/* ============================================================
   TDB CHROME v2 — sitewide nav + footer polish
   Nav: mega-menu w/ live preview pane, scroll progress, compact
   Footer: glow, giant watermark, online pill, link life
   Dual theme: dark (default) + body.light-mode
   ============================================================ */

:root{
  --tg1:var(--tdb-accent);
  --tg2:var(--tdb-support);
  --tgrad:linear-gradient(90deg,var(--tdb-accent),var(--tdb-support));
  --tease:cubic-bezier(.16,1,.3,1);
  --tnav-line:color-mix(in srgb, var(--tdb-line) 16%, transparent);
  --tnav-line-strong:color-mix(in srgb, var(--tdb-line) 28%, transparent);
}

/* ---------- nav bar chrome ---------- */
header .navbar.tnav-bar{padding:1rem 0;transition:padding .35s var(--tease),background-color .3s ease}
header .navbar.tnav-bar.tnav-compact{padding:.45rem 0}
.tnav-wrap{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:14px}

.tnav-brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;letter-spacing:.01em}
.tnav-brand-mark{width:14px;height:14px;border-radius:4px;background:conic-gradient(from 210deg,var(--tdb-accent),var(--tdb-support),var(--tdb-accent));box-shadow:0 0 14px rgba(37,99,235,.65);flex:none;transform:rotate(45deg);transition:transform .5s var(--tease)}
.tnav-brand:hover .tnav-brand-mark{transform:rotate(225deg)}
/* The logo (2026-10-15): the same split diamond and name as the v3 header, tdb_v3_logo(). */
.tnav-brand .v3-logo{display:inline-flex;align-items:center;gap:.5em;font-size:17px;font-weight:700;letter-spacing:.05em;line-height:1;white-space:nowrap}
.tnav-brand .v3-logo__mark{width:1.55em;height:1.55em;flex:none}
.tnav-brand .v3-logo__mark .a{fill:currentColor}
.tnav-brand .v3-logo__mark .b{fill:#e8702a}
.tnav-brand .v3-logo__dash{display:inline-block;width:.42em;height:.14em;margin:0 .1em;overflow:hidden;background:#e8702a;color:transparent;vertical-align:.26em;transform:skewX(-20deg)}

.tnav-links{display:flex;flex-direction:row;align-items:center;gap:2px;margin:0 auto;padding:0;list-style:none}
.tnav-links>li{position:relative;list-style:none}
.tnav-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-weight:600;font-size:.94rem;color:var(--secondary-text,var(--tdb-body));padding:9px 14px;border-radius:10px;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s var(--tease)}
.tnav-link:hover{color:var(--primary-text,var(--tdb-text));background:rgba(148,163,184,.08);transform:translateY(-1px)}
.tnav-link.on{color:var(--primary-text,var(--tdb-text));position:relative}
.tnav-link.on::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--tgrad)}
.tnav-chev{transition:transform .25s var(--tease);opacity:.7}
.tnav-dd.open .tnav-chev{transform:rotate(180deg)}

/* ---------- mega panel ---------- */
.tnav-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);width:min(760px,calc(100vw - 32px));background:color-mix(in srgb, var(--tdb-band) 97%, transparent);border:1px solid var(--tnav-line-strong);border-radius:18px;padding:16px 16px 12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(37,99,235,.08);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--tease),transform .25s var(--tease),visibility .25s;z-index:1002}
.tnav-dd.open .tnav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.tnav-panel::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:inherit;border-left:1px solid var(--tnav-line-strong);border-top:1px solid var(--tnav-line-strong);border-radius:3px 0 0 0}

.tnav-panel-head{display:flex;align-items:baseline;gap:10px;padding:4px 10px 12px;border-bottom:1px solid var(--tnav-line);margin-bottom:10px}
.tnav-panel-head b{font-size:14px;color:var(--primary-text,var(--tdb-text))}
.tnav-panel-head span{font-size:11.5px;color:var(--secondary-text,var(--tdb-body))}
.tnav-panel-head a{margin-left:auto;font-size:11px;font-weight:700;color:var(--tg2);white-space:nowrap;text-decoration:none;transition:transform .2s var(--tease)}
.tnav-panel-head a:hover{transform:translateX(2px);color:var(--tg2)}

.tnav-panel-cols{display:grid;grid-template-columns:1.25fr .95fr;gap:14px}
.tnav-panel-grid{display:grid;grid-template-columns:1fr;gap:2px}
.tnav-panel-grid a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;text-decoration:none;transition:background .2s ease}
.tnav-panel-grid a:hover,.tnav-panel-grid a.hot{background:rgba(255,255,255,.05)}
.tpi{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:color-mix(in srgb, var(--tdb-accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 28%, transparent);color:var(--tdb-accent);transition:transform .25s var(--tease),box-shadow .25s,background .25s}
.tpi svg{width:17px;height:17px}
.tnav-panel-grid a:hover .tpi,.tnav-panel-grid a.hot .tpi{transform:scale(1.1) rotate(-5deg);box-shadow:0 6px 16px -6px rgba(37,99,235,.6);background:color-mix(in srgb, var(--tdb-accent) 22%, transparent)}
.tpt{display:flex;flex-direction:column;gap:1px;min-width:0}
.tpt b{font-size:13px;font-weight:700;color:var(--primary-text,var(--tdb-text));line-height:1.25}
.tpt small{font-size:11px;color:var(--secondary-text,var(--tdb-body));line-height:1.35}

/* preview pane */
.tnav-prev{position:relative;border:1px solid var(--tnav-line);border-radius:14px;background:rgba(255,255,255,.025);padding:12px;display:flex;flex-direction:column;min-height:196px;overflow:hidden}
.tnav-prev-chrome{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.tnav-prev-chrome i{width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.35)}
.tnav-prev-chrome i:first-child{background:color-mix(in srgb, var(--tdb-danger) 55%, transparent)}
.tnav-prev-chrome i:nth-child(2){background:color-mix(in srgb, var(--tdb-warning) 55%, transparent)}
.tnav-prev-chrome i:nth-child(3){background:color-mix(in srgb, var(--tdb-success) 55%, transparent)}
.tnav-prev-chrome span{margin-left:auto;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary-text,var(--tdb-body))}
.tnav-prev-scene{position:absolute;inset:44px 12px 12px;display:none;flex-direction:column;justify-content:center;gap:12px}
.tnav-prev-scene.on{display:flex;animation:tpvIn .35s var(--tease) both}
@keyframes tpvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tpv-cap{margin:0;font-size:11px;color:var(--secondary-text,var(--tdb-body));line-height:1.45}

/* scene: own vs rent */
.tpv-save{display:flex;gap:18px;align-items:flex-end;height:86px}
.tpv-scol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.tpv-scol i{width:100%;border-radius:6px 6px 2px 2px}
.tpv-scol i.rent{background:linear-gradient(180deg,var(--tdb-danger),var(--tdb-danger));height:26%;animation:tpvRent 3.4s ease-in-out infinite}
.tpv-scol i.own{background:linear-gradient(180deg,var(--tdb-success),#0e6b42);height:30%}
.tpv-scol em{font-style:normal;font-size:10.5px;color:var(--secondary-text,var(--tdb-body))}
@keyframes tpvRent{0%,100%{height:26%}45%,58%{height:82%}}

/* scene: flow */
.tpv-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tpv-node{font-size:11px;font-weight:700;color:var(--primary-text,var(--tdb-text));border:1px solid var(--tnav-line-strong);background:rgba(255,255,255,.05);padding:7px 11px;border-radius:9px;white-space:nowrap}
.tpv-node.hot{border-color:color-mix(in srgb, var(--tdb-accent) 60%, transparent);background:color-mix(in srgb, var(--tdb-accent) 16%, transparent);color:#9cc3ff}
.tpv-node.ok{border-color:color-mix(in srgb, var(--tdb-success) 55%, transparent);background:color-mix(in srgb, var(--tdb-success) 12%, transparent);color:#6ee7a0}
.tpv-link{flex:1;min-width:14px;height:2px;background:linear-gradient(90deg,color-mix(in srgb, var(--tdb-accent) 15%, transparent),color-mix(in srgb, var(--tdb-accent) 70%, transparent));position:relative;overflow:hidden;border-radius:2px}
.tpv-link::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--tdb-accent),transparent);animation:tpvDash 1.6s linear infinite}
@keyframes tpvDash{to{left:110%}}

/* scene: chat */
.tpv-chat{display:flex;flex-direction:column;gap:7px}
.tpv-b{max-width:88%;font-size:11px;line-height:1.4;padding:7px 11px;border-radius:12px;border:1px solid var(--tnav-line)}
.tpv-b.o{align-self:flex-end;background:color-mix(in srgb, var(--tdb-accent) 16%, transparent);border-color:color-mix(in srgb, var(--tdb-accent) 40%, transparent);color:var(--tdb-text);border-bottom-right-radius:4px}
.tpv-b.i{align-self:flex-start;background:rgba(255,255,255,.05);color:var(--primary-text,var(--tdb-text));border-bottom-left-radius:4px}
.tpv-b.t{align-self:flex-start;display:flex;gap:4px;padding:9px 12px;border-bottom-left-radius:4px;background:rgba(255,255,255,.05)}
.tpv-b.t i{width:5px;height:5px;border-radius:50%;background:var(--secondary-text,#8b93a7);animation:tpvTyp 1.2s ease-in-out infinite}
.tpv-b.t i:nth-child(2){animation-delay:.15s}
.tpv-b.t i:nth-child(3){animation-delay:.3s}
@keyframes tpvTyp{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* scene: chips */
.tpv-chips{display:flex;gap:7px;flex-wrap:wrap}
.tpv-chips span{font-size:11px;font-weight:600;color:var(--secondary-text,var(--tdb-body));border:1px solid var(--tnav-line);background:rgba(255,255,255,.04);padding:7px 12px;border-radius:999px;animation:tpvChip 4.5s ease-in-out infinite}
.tpv-chips span:nth-child(2){animation-delay:1.5s}
.tpv-chips span:nth-child(3){animation-delay:3s}
@keyframes tpvChip{0%,30%,100%{color:inherit;border-color:var(--tnav-line);background:rgba(255,255,255,.04)}8%,20%{color:var(--tdb-accent-ink);border-color:var(--tg1);background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 35%, transparent),color-mix(in srgb, var(--tdb-support) 15%, transparent))}}

/* scene: demo (skeleton browser rows shimmer) */
.tpv-demo{display:flex;flex-direction:column;gap:8px}
.tpv-demo i{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,color-mix(in srgb, var(--tdb-accent) 22%, transparent) 50%,rgba(255,255,255,.06) 75%);background-size:220% 100%;animation:tpvSheen 2.4s ease-in-out infinite}
.tpv-demo i:nth-child(1){width:62%}
.tpv-demo i:nth-child(2){width:88%;animation-delay:.2s}
.tpv-demo i:nth-child(3){width:74%;animation-delay:.4s}
.tpv-demo i:nth-child(4){width:46%;animation-delay:.6s}
@keyframes tpvSheen{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* scene: pulse bars */
.tpv-bars{display:flex;align-items:flex-end;gap:7px;height:80px}
.tpv-bars i{flex:1;height:var(--h);background:var(--tgrad);border-radius:4px 4px 0 0;opacity:.92;transform-origin:bottom}
.tnav-prev-scene.on .tpv-bars i{animation:tpvGrow .7s var(--tease) both}
.tnav-prev-scene.on .tpv-bars i:nth-child(2){animation-delay:.07s}
.tnav-prev-scene.on .tpv-bars i:nth-child(3){animation-delay:.14s}
.tnav-prev-scene.on .tpv-bars i:nth-child(4){animation-delay:.21s}
.tnav-prev-scene.on .tpv-bars i:nth-child(5){animation-delay:.28s}
.tnav-prev-scene.on .tpv-bars i:nth-child(6){animation-delay:.35s}
@keyframes tpvGrow{from{transform:scaleY(0)}}

/* panel foot */
.tnav-panel-foot{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 10px 2px;border-top:1px solid var(--tnav-line)}
.tpf-cta{font-size:12px;color:var(--secondary-text,var(--tdb-body));text-decoration:none;transition:transform .2s var(--tease)}
.tpf-cta b{color:var(--primary-text,var(--tdb-text));font-weight:700;background:linear-gradient(90deg,var(--tdb-accent),var(--tdb-support));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tpf-cta:hover{transform:translateX(2px)}
.tpf-wa{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:#25d366;background:rgba(37,211,102,.09);border:1px solid rgba(37,211,102,.35);border-radius:999px;padding:8px 14px;text-decoration:none;transition:background .2s,color .2s}
.tpf-wa:hover{background:#25d366;color:#04310f}

/* panel open: staggered link entrance */
.tnav-dd.open .tnav-panel-grid a{animation:tnpIn .35s var(--tease) both}
.tnav-dd.open .tnav-panel-grid a:nth-child(1){animation-delay:.03s}
.tnav-dd.open .tnav-panel-grid a:nth-child(2){animation-delay:.08s}
.tnav-dd.open .tnav-panel-grid a:nth-child(3){animation-delay:.13s}
.tnav-dd.open .tnav-panel-grid a:nth-child(4){animation-delay:.18s}
.tnav-dd.open .tnav-panel-grid a:nth-child(5){animation-delay:.23s}
.tnav-dd.open .tnav-panel-grid a:nth-child(6){animation-delay:.28s}
.tnav-dd.open .tnav-prev{animation:tnpIn .4s .1s var(--tease) both}
@keyframes tnpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- scroll progress ---------- */
.tnav-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--tgrad);z-index:2;box-shadow:0 0 8px rgba(37,99,235,.7);pointer-events:none}

/* ---------- nav WhatsApp round ---------- */
.tnav-wa{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;background:#25d366;box-shadow:0 6px 16px -6px rgba(37,211,102,.7);transition:transform .2s var(--tease),box-shadow .2s}
.tnav-wa:hover{transform:translateY(-2px) scale(1.06);color:#fff;box-shadow:0 10px 22px -8px rgba(37,211,102,.9)}
.tnav-wa::after{content:"";position:absolute;inset:-1px;border-radius:50%;animation:tnavPing 3.8s ease-out infinite;pointer-events:none}
@keyframes tnavPing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}55%,100%{box-shadow:0 0 0 11px rgba(37,211,102,0)}}

/* ---------- header icons context fixes ---------- */
.tnav-icons{gap:1.05rem;margin-left:auto;flex:none}
.tnav-icons .header-icon-item{position:relative}

/* ---------- burger ---------- */
.tnav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;background:rgba(148,163,184,.08);border:1px solid var(--tnav-line-strong);border-radius:10px;cursor:pointer}
.tnav-burger i{display:block;height:2px;border-radius:2px;background:var(--primary-text,#e7eaf0);transition:transform .3s var(--tease),opacity .2s}
.tnav-burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tnav-burger.open i:nth-child(2){opacity:0}
.tnav-burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- mobile drawer (body-level) ---------- */
.tnav-drawer{position:fixed;inset:0;z-index:999;background:color-mix(in srgb, var(--tdb-band) 98.5%, transparent);padding:96px 22px 34px;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--tease),visibility .28s}
.tnav-drawer.open{opacity:1;visibility:visible;pointer-events:auto}
body.tnav-locked{overflow:hidden}
.tnav-drawer-in{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:4px}
.tnav-drawer.open .tnav-drawer-in>*{animation:tnpIn .45s var(--tease) both}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(1){animation-delay:.05s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(2){animation-delay:.1s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(3){animation-delay:.14s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(4){animation-delay:.18s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(5){animation-delay:.22s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(6){animation-delay:.26s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(7){animation-delay:.3s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(8){animation-delay:.34s}
.tnav-drawer.open .tnav-drawer-in>*:nth-child(9){animation-delay:.38s}
.tnav-acc{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:var(--tdb-text);font-size:1.05rem;font-weight:800;padding:13px 6px;cursor:pointer;border-bottom:1px solid var(--tnav-line)}
.tnav-acc svg{margin-left:auto;transition:transform .25s var(--tease)}
.tnav-acc.open svg,.tnav-acc[aria-expanded="true"] svg{transform:rotate(180deg)}
.tnav-acc-panel{display:none;flex-direction:column;padding:4px 0 8px}
.tnav-acc-panel.open{display:flex}
.tnav-acc-panel a{display:flex;flex-direction:column;gap:1px;color:var(--tdb-text);font-size:.95rem;font-weight:600;text-decoration:none;padding:10px 14px;border-radius:10px}
.tnav-acc-panel a em{font-style:normal;font-size:.74rem;color:var(--tdb-muted);font-weight:500}
.tnav-acc-panel a:hover{background:rgba(255,255,255,.05);color:#fff}
.tnav-dlink{display:block;color:var(--tdb-text);font-size:1.05rem;font-weight:800;text-decoration:none;padding:13px 6px;border-bottom:1px solid var(--tnav-line)}
.tnav-dlink:hover{color:var(--tdb-accent)}
.tnav-drawer-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tnav-cta-main{display:block;text-align:center;font-weight:800;font-size:1rem;color:var(--tdb-accent-ink);text-decoration:none;background:linear-gradient(135deg,var(--tdb-accent),var(--tdb-support));padding:14px 18px;border-radius:14px;box-shadow:0 12px 30px -10px rgba(37,99,235,.7)}
.tnav-cta-main:hover{color:#fff;filter:brightness(1.08)}
.tnav-cta-wa{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.95rem;color:#25d366;text-decoration:none;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.4);padding:12px 18px;border-radius:14px}
.tnav-cta-wa:hover{background:#25d366;color:#04310f}
.tnav-cta-portal{display:block;text-align:center;font-weight:700;font-size:.95rem;color:var(--tdb-text);text-decoration:none;border:1px solid var(--tnav-line-strong);padding:12px 18px;border-radius:14px}
.tnav-cta-portal:hover{color:var(--tdb-accent-ink);border-color:var(--tdb-accent)}

/* ---------- responsive ---------- */
@media (max-width:991.98px){
  .tnav-links{display:none}
  .tnav-burger{display:flex}
  .tnav-cp{display:none}
  /* neutralise legacy collapsed-menu styling that used to apply to .header-icons */
  .tnav-icons{gap:.8rem;flex-direction:row!important;justify-content:flex-end!important;border-top:0!important;padding-top:0!important;margin-top:0!important}
}
@media (max-width:575.98px){
  .tnav-hide-sm{display:none}
  .tnav-brand{font-size:1.15rem!important}
}
@media (min-width:992px){
  .tnav-drawer{display:none}
}

/* ============================================================
   FOOTER v2
   ============================================================ */
.tdb-footer{position:relative;overflow:hidden}
.tfoot-glow{position:absolute;left:50%;top:-140px;width:900px;height:280px;transform:translateX(-50%);background:radial-gradient(50% 100% at 50% 100%,color-mix(in srgb, var(--tdb-accent) 12%, transparent),transparent 70%);pointer-events:none;z-index:0}
.tdb-footer .footer-heading{position:relative;padding-bottom:8px}
.tdb-footer .footer-heading::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;border-radius:2px;background:var(--tgrad)}
.tdb-footer .footer-nav a{display:inline-block;transition:color .2s,transform .25s var(--tease)}
.tdb-footer .footer-nav a:hover{transform:translateX(4px)}
.tdb-footer .footer-social a{display:inline-flex;transition:transform .25s var(--tease),color .25s}
.tdb-footer .footer-social a:hover{transform:translateY(-3px)}

/* online pill — the file service runs 24/7 */
.tfoot-open{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--tdb-success);background:color-mix(in srgb, var(--tdb-success) 8%, transparent);border:1px solid color-mix(in srgb, var(--tdb-success) 35%, transparent);border-radius:999px;padding:6px 12px;margin:10px 0 2px;width:max-content;max-width:100%}
.tfoot-open i{width:7px;height:7px;border-radius:50%;background:var(--tdb-success);animation:tfootPing 2.4s ease-out infinite;flex:none}
.tfoot-open em{font-style:normal}
@keyframes tfootPing{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%,100%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* giant watermark (position !important: style.min.css forces `.tdb-footer > :not(.tdb-footer-bg)` to relative) */
.tdb-footer .tfoot-mark{position:absolute!important;left:50%;bottom:-.26em;transform:translateX(-50%);font-weight:800;font-size:clamp(64px,13vw,190px);letter-spacing:-.02em;line-height:1;white-space:nowrap;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 78%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;pointer-events:none;user-select:none;z-index:0}
.tfoot-mark b{font-weight:800;background:linear-gradient(180deg,color-mix(in srgb, var(--tdb-accent) 22%, transparent),rgba(6,182,212,0) 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:640px){.tdb-footer .tfoot-mark{font-size:20vw;bottom:-.2em}}
.tdb-footer .container,.tdb-footer .tdb-footer__cta,.tdb-footer .footer-bottom{position:relative;z-index:1}

/* ============================================================
   WhatsApp FAB label + nudge (FAB sits bottom-LEFT on this site)
   ============================================================ */
/* Base display for the floating WhatsApp button. It used to be inline on the
   element in footer.php, which put it out of reach of every stylesheet - see
   the note there. The bottom offset lives in tdb-readability.css. */
#tdb-wa-float{display:flex;overflow:visible}
#tdb-wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;animation:tnavPing 3.4s ease-out infinite;pointer-events:none}
.tdb-wa-label{position:absolute;left:66px;top:50%;transform:translateY(-50%);background:color-mix(in srgb, var(--tdb-band) 96%, transparent);border:1px solid rgba(255,255,255,.14);color:var(--tdb-text);font-size:13px;font-weight:600;padding:8px 13px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#tdb-wa-float:hover .tdb-wa-label,#tdb-wa-float:focus-visible .tdb-wa-label{opacity:1}
@media(max-width:560px){.tdb-wa-label{display:none}}

.tdb-wa-nudge{position:fixed;left:24px;bottom:92px;z-index:9989;max-width:264px;background:color-mix(in srgb, var(--tdb-band) 97%, transparent);border:1px solid rgba(37,211,102,.45);border-radius:16px 16px 16px 4px;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:tnudgeIn .45s var(--tease);text-decoration:none;display:block;padding:12px 34px 12px 14px}
.tdb-wa-nudge b{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.tdb-wa-nudge span{display:block;color:var(--tdb-body);font-size:12px;line-height:1.45}
.tdb-wa-nudge .tdb-wa-nudge-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--tdb-muted);font-size:16px;line-height:1;cursor:pointer;padding:4px}
.tdb-wa-nudge:hover{border-color:#25d366}
@keyframes tnudgeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:768px){.tdb-wa-nudge{left:16px;bottom:80px}}

/* ============================================================
   LIGHT MODE — body.light-mode (WP site convention)
   ============================================================ */
body.light-mode .tnav-link{color:var(--tdb-on-light)}
body.light-mode .tnav-link:hover{color:var(--tdb-on-light);background:color-mix(in srgb, var(--tdb-surface) 6%, transparent)}
body.light-mode .tnav-link.on{color:var(--tdb-on-light)}
body.light-mode .tnav-burger{background:color-mix(in srgb, var(--tdb-surface) 5%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 15%, transparent)}
body.light-mode .tnav-burger i{background:var(--tdb-raised)}
body.light-mode .tnav-panel{background:rgba(255,255,255,.99);border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent);box-shadow:0 30px 80px -20px rgba(15,23,42,.25),0 0 0 1px rgba(37,99,235,.06)}
body.light-mode .tnav-panel-head b{color:var(--tdb-on-light)}
body.light-mode .tnav-panel-head span{color:var(--tdb-muted)}
body.light-mode .tnav-panel-grid a:hover,body.light-mode .tnav-panel-grid a.hot{background:color-mix(in srgb, var(--tdb-accent) 6%, transparent)}
body.light-mode .tpt b{color:var(--tdb-on-light)}
body.light-mode .tpt small{color:var(--tdb-muted)}
body.light-mode .tpi{background:color-mix(in srgb, var(--tdb-accent) 9%, transparent);border-color:color-mix(in srgb, var(--tdb-accent) 25%, transparent);color:var(--tdb-accent)}
body.light-mode .tnav-prev{background:color-mix(in srgb, var(--tdb-surface) 3%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 10%, transparent)}
body.light-mode .tnav-prev-chrome span{color:var(--tdb-muted)}
body.light-mode .tpv-cap{color:var(--tdb-muted)}
body.light-mode .tpv-node{color:var(--tdb-on-light);background:color-mix(in srgb, var(--tdb-surface) 4%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 15%, transparent)}
body.light-mode .tpv-node.hot{color:var(--tdb-accent);background:color-mix(in srgb, var(--tdb-accent) 10%, transparent);border-color:color-mix(in srgb, var(--tdb-accent) 40%, transparent)}
body.light-mode .tpv-node.ok{color:#15803d;background:color-mix(in srgb, var(--tdb-success) 10%, transparent)}
body.light-mode .tpv-b.i{background:color-mix(in srgb, var(--tdb-surface) 5%, transparent);color:var(--tdb-on-light)}
body.light-mode .tpv-b.o{color:var(--tdb-accent)}
body.light-mode .tpv-chips span{color:#475569;background:color-mix(in srgb, var(--tdb-surface) 4%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent)}
body.light-mode .tpv-scol em{color:var(--tdb-muted)}
body.light-mode .tpf-cta{color:var(--tdb-muted)}
body.light-mode .tpf-cta b{background:linear-gradient(90deg,var(--tdb-accent),var(--tdb-support));-webkit-background-clip:text;background-clip:text}
body.light-mode .tnav-panel-head,body.light-mode .tnav-panel-foot{border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent)}
body.light-mode .tnav-drawer{background:rgba(248,250,252,.99)}
body.light-mode .tnav-acc,body.light-mode .tnav-dlink{color:var(--tdb-on-light);border-color:color-mix(in srgb, var(--tdb-line) 8%, transparent)}
body.light-mode .tnav-dlink:hover{color:var(--tdb-accent)}
body.light-mode .tnav-acc-panel a{color:var(--tdb-on-light)}
body.light-mode .tnav-acc-panel a:hover{background:color-mix(in srgb, var(--tdb-accent) 6%, transparent);color:var(--tdb-on-light)}
body.light-mode .tnav-acc-panel a em{color:var(--tdb-muted)}
body.light-mode .tnav-cta-portal{color:var(--tdb-on-light);border-color:color-mix(in srgb, var(--tdb-line) 20%, transparent)}
body.light-mode .tnav-cta-portal:hover{color:var(--tdb-on-light);border-color:var(--tdb-accent)}
body.light-mode .tfoot-mark{background:linear-gradient(180deg,color-mix(in srgb, var(--tdb-surface) 7%, transparent),rgba(15,23,42,0) 78%);-webkit-background-clip:text;background-clip:text}
body.light-mode .tfoot-mark b{background:linear-gradient(180deg,color-mix(in srgb, var(--tdb-accent) 20%, transparent),rgba(6,182,212,0) 80%);-webkit-background-clip:text;background-clip:text}
body.light-mode .tdb-wa-label{background:#fff;border-color:color-mix(in srgb, var(--tdb-line) 15%, transparent);color:var(--tdb-on-light);box-shadow:0 8px 24px rgba(15,23,42,.18)}
body.light-mode .tdb-wa-nudge{background:#fff;border-color:rgba(37,211,102,.6);box-shadow:0 18px 50px rgba(15,23,42,.2)}
body.light-mode .tdb-wa-nudge b{color:var(--tdb-on-light)}
body.light-mode .tdb-wa-nudge span{color:#475569}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .tnav-brand-mark,.tnav-chev,.tnav-link,.tpi,.tpf-cta,.tnav-wa,.tnav-burger i,.tdb-footer .footer-nav a,.tdb-footer .footer-social a{transition:none}
  .tnav-link:hover,.tnav-wa:hover,.tdb-footer .footer-nav a:hover,.tdb-footer .footer-social a:hover{transform:none}
  .tnav-wa::after,#tdb-wa-float::after,.tfoot-open i,.tpv-link::after,.tpv-b.t i,.tpv-chips span,.tpv-scol i.rent,.tpv-demo i{animation:none!important}
  .tnav-dd.open .tnav-panel-grid a,.tnav-dd.open .tnav-prev,.tnav-drawer.open .tnav-drawer-in>*,.tnav-prev-scene.on,.tnav-prev-scene.on .tpv-bars i{animation:none!important;opacity:1;transform:none}
  .tnav-panel{transition:opacity .1s}
  .tdb-wa-nudge{animation:none}
}

/* ============================================================
   HOMEPAGE — FIRST 90 DAYS + LANGUAGE BAND
   ============================================================ */
.t90-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px;position:relative}
.t90-grid::before{content:"";position:absolute;top:17px;left:4%;right:4%;height:2px;background:linear-gradient(90deg,rgba(37,99,235,.0),color-mix(in srgb, var(--tdb-accent) 50%, transparent) 12%,color-mix(in srgb, var(--tdb-support) 50%, transparent) 88%,rgba(6,182,212,0));pointer-events:none}
.t90-step{position:relative;background:rgba(255,255,255,.03);border:1px solid var(--tnav-line);border-radius:16px;padding:22px 20px 20px;transition:transform .3s var(--tease),border-color .3s,box-shadow .3s}
.t90-step:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--tdb-accent) 45%, transparent);box-shadow:0 18px 40px -18px rgba(37,99,235,.35)}
.t90-when{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tdb-accent);background:color-mix(in srgb, var(--tdb-accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 35%, transparent);border-radius:999px;padding:5px 12px;margin-bottom:12px;position:relative;z-index:1}
.t90-step h3{font-size:1.06rem;font-weight:800;color:var(--primary-text,var(--tdb-text));margin:0 0 8px}
.t90-step p{font-size:.9rem;color:var(--secondary-text,var(--tdb-body));line-height:1.6;margin:0}
.t90-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
@media(max-width:991.98px){.t90-grid{grid-template-columns:1fr 1fr}.t90-grid::before{display:none}}
@media(max-width:575.98px){.t90-grid{grid-template-columns:1fr}}

.tlang-card{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,50px);align-items:center;background:rgba(255,255,255,.03);border:1px solid var(--tnav-line-strong);border-radius:24px;padding:clamp(24px,4vw,44px);position:relative;overflow:hidden}
.tlang-card::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb, var(--tdb-support) 8%, transparent),transparent 55%),radial-gradient(90% 120% at 0% 100%,color-mix(in srgb, var(--tdb-accent) 8%, transparent),transparent 55%);pointer-events:none}
.tlang-card>*{position:relative}
.tlang-copy .ts2-section-sub{margin-bottom:0}
.tlang-chips{display:flex;flex-wrap:wrap;gap:10px}
.tlang-chips span{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:700;color:var(--primary-text,var(--tdb-text));background:rgba(255,255,255,.05);border:1px solid var(--tnav-line-strong);border-radius:999px;padding:9px 15px;animation:tlangBob 7s ease-in-out infinite;transition:border-color .25s,transform .25s var(--tease)}
.tlang-chips span:hover{border-color:color-mix(in srgb, var(--tdb-accent) 55%, transparent);transform:translateY(-2px)}
.tlang-chips span:nth-child(2n){animation-delay:1.2s}
.tlang-chips span:nth-child(3n){animation-delay:2.4s}
.tlang-chips span:nth-child(5n){animation-delay:3.6s}
@keyframes tlangBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:991.98px){.tlang-card{grid-template-columns:1fr}}

body.light-mode .t90-step{background:rgba(255,255,255,.75);border-color:color-mix(in srgb, var(--tdb-line) 10%, transparent)}
body.light-mode .t90-step h3{color:var(--tdb-on-light)}
body.light-mode .t90-step p{color:#475569}
body.light-mode .t90-when{color:var(--tdb-accent);background:color-mix(in srgb, var(--tdb-accent) 8%, transparent)}
body.light-mode .tlang-card{background:rgba(255,255,255,.75);border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent)}
body.light-mode .tlang-chips span{color:var(--tdb-on-light);background:color-mix(in srgb, var(--tdb-surface) 4%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 15%, transparent)}

@media(prefers-reduced-motion:reduce){
  .t90-step,.tlang-chips span{transition:none;animation:none!important}
  .t90-step:hover,.tlang-chips span:hover{transform:none}
}

/* ============================================================
   CONTACT — enquiry form (topic chips, status, success panel)
   ============================================================ */
.tenq-chips{display:flex;flex-wrap:wrap;gap:8px}
.tenq-chip{cursor:pointer;margin:0}
.tenq-chip input{position:absolute;opacity:0;pointer-events:none}
.tenq-chip span{display:inline-flex;align-items:center;font-size:.84rem;font-weight:700;color:var(--secondary-text,var(--tdb-body));background:rgba(255,255,255,.04);border:1px solid var(--tnav-line-strong);border-radius:999px;padding:8px 14px;transition:color .2s,border-color .2s,background .2s,transform .2s var(--tease)}
.tenq-chip:hover span{transform:translateY(-1px);border-color:color-mix(in srgb, var(--tdb-accent) 50%, transparent)}
.tenq-chip input:checked+span{color:var(--tdb-accent-ink);background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 85%, transparent),color-mix(in srgb, var(--tdb-support) 70%, transparent));border-color:transparent;box-shadow:0 8px 20px -8px rgba(37,99,235,.7)}
.tenq-chip input:focus-visible+span{outline:2px solid var(--tdb-accent);outline-offset:2px}
.tenq-opt{font-size:.7rem;font-weight:600;color:var(--secondary-text,var(--tdb-body));opacity:.7;margin-left:4px}
.tenq-msg{border-radius:12px;padding:10px 14px;font-size:.88rem;font-weight:600;margin:0 0 16px}
.tenq-msg.err{color:#fca5a5;background:color-mix(in srgb, var(--tdb-danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-danger) 35%, transparent)}
.tenq-done{text-align:center;padding:26px 6px}
.tenq-done-ico{width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--tdb-success);background:color-mix(in srgb, var(--tdb-success) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-success) 40%, transparent);animation:tnpIn .5s var(--tease) both}
.tenq-alt{margin:14px 0 0;text-align:center;font-size:.85rem;color:var(--secondary-text,var(--tdb-body))}
.tenq-alt a{color:#25d366;font-weight:700;text-decoration:none}
.tenq-alt a:hover{text-decoration:underline}

body.light-mode .tenq-chip span{color:#475569;background:color-mix(in srgb, var(--tdb-surface) 4%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 15%, transparent)}
body.light-mode .tenq-chip input:checked+span{color:#fff}
body.light-mode .tenq-msg.err{color:var(--tdb-danger);background:color-mix(in srgb, var(--tdb-danger) 7%, transparent)}

@media(prefers-reduced-motion:reduce){
  .tenq-chip span{transition:none}
  .tenq-chip:hover span{transform:none}
  .tenq-done-ico{animation:none}
}

/* ============================================================
   HOMEPAGE — ANALYTICS BAND
   ============================================================ */
.tana-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.tana-tile{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--tnav-line);border-radius:16px;padding:20px 18px;transition:transform .3s var(--tease),border-color .3s}
.tana-tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--tdb-accent) 45%, transparent)}
.tana-tile i{font-size:1.25rem;color:var(--tdb-accent)}
.tana-tile b{font-size:1rem;font-weight:800;color:var(--primary-text,var(--tdb-text))}
.tana-tile span{font-size:.86rem;color:var(--secondary-text,var(--tdb-body));line-height:1.55}
.tana-cta{text-align:center;margin-top:26px}
@media(max-width:991.98px){.tana-tiles{grid-template-columns:1fr 1fr}}
@media(max-width:575.98px){.tana-tiles{grid-template-columns:1fr}}
body.light-mode .tana-tile{background:rgba(255,255,255,.75);border-color:color-mix(in srgb, var(--tdb-line) 10%, transparent)}
body.light-mode .tana-tile b{color:var(--tdb-on-light)}
body.light-mode .tana-tile span{color:#475569}
body.light-mode .tana-tile i{color:var(--tdb-accent)}
@media(prefers-reduced-motion:reduce){.tana-tile{transition:none}.tana-tile:hover{transform:none}}

/* ============================================================
   HERO v5 — clean rebuild: display fonts, staggered entrance,
   calmer glows, capability marquee (replaces drifting bubbles)
   ============================================================ */
body.home{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
body.home h1,body.home h2,body.home h3,body.home .ts2-h1,body.home .ts2-h2,body.home .tdb-spec-n,body.home .ts2-mini-eyebrow,body.home .t90-when{font-family:'Space Grotesk','Inter',sans-serif}
body.home .ts2-h1{font-weight:700;letter-spacing:-.02em;font-size:clamp(2.35rem,4.6vw,3.55rem);line-height:1.06}
body.home .ts2-h2{letter-spacing:-.015em}
body.home .tdb-hero4-lede{font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:34rem}

/* eyebrow → kicker pill */
body.home .tdb-hero4-copy .ts2-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tdb-accent);background:color-mix(in srgb, var(--tdb-accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 30%, transparent);border-radius:999px;padding:7px 14px}

/* staggered entrance — pure CSS, no JS dependency */
@keyframes t5up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tdb-h5in>*{opacity:0;animation:t5up .75s cubic-bezier(.16,1,.3,1) forwards}
.tdb-h5in>*:nth-child(1){animation-delay:.05s}
.tdb-h5in>*:nth-child(2){animation-delay:.14s}
.tdb-h5in>*:nth-child(3){animation-delay:.23s}
.tdb-h5in>*:nth-child(4){animation-delay:.32s}
.tdb-h5in>*:nth-child(5){animation-delay:.41s}
.tdb-h5in>*:nth-child(6){animation-delay:.5s}
.tdb-h5vis{opacity:0;animation:t5up .9s .3s cubic-bezier(.16,1,.3,1) forwards}

/* hero glows: one breath slower + blue/cyan split */
body.home .tdb-hero4 .ts2-glow-a{background:radial-gradient(closest-side,color-mix(in srgb, var(--tdb-accent) 34%, transparent),transparent 70%)}
body.home .tdb-hero4 .ts2-glow-b{background:radial-gradient(closest-side,color-mix(in srgb, var(--tdb-support) 26%, transparent),transparent 70%)}

/* capability marquee */
.tcap-marquee{position:relative;margin:34px 0 6px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tcap-track{display:inline-flex;gap:10px;white-space:nowrap;padding:2px 0;animation:tcapScroll 64s linear infinite;will-change:transform}
.tcap-marquee:hover .tcap-track{animation-play-state:paused}
.tcap-track span{display:inline-flex;align-items:center;font-family:'Space Grotesk','Inter',sans-serif;font-size:.78rem;font-weight:600;color:var(--secondary-text,var(--tdb-body));background:rgba(255,255,255,.04);border:1px solid var(--tnav-line);border-radius:999px;padding:7px 14px;transition:color .2s,border-color .2s}
.tcap-track span:hover{color:var(--primary-text,var(--tdb-text));border-color:color-mix(in srgb, var(--tdb-accent) 50%, transparent)}
@keyframes tcapScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

body.light-mode .tdb-hero4-copy .ts2-eyebrow{color:var(--tdb-accent);background:color-mix(in srgb, var(--tdb-accent) 8%, transparent)}
body.light-mode .tcap-track span{color:#475569;background:color-mix(in srgb, var(--tdb-surface) 4%, transparent);border-color:color-mix(in srgb, var(--tdb-line) 12%, transparent)}
body.light-mode .tcap-track span:hover{color:var(--tdb-on-light)}

@media(max-width:575.98px){
  .tcap-marquee{margin-top:24px}
  body.home .ts2-h1{font-size:clamp(2rem,8.5vw,2.4rem)}
}
@media(prefers-reduced-motion:reduce){
  .tdb-h5in>*,.tdb-h5vis{animation:none;opacity:1;transform:none}
  .tcap-track{animation:none;white-space:normal;flex-wrap:wrap;justify-content:center}
  .tcap-marquee{-webkit-mask-image:none;mask-image:none}
}

/* hero5 specificity pins (cluster-extra loads later and tied on specificity) */
body.home .tdb-hero4 .ts2-h1{font-weight:700;letter-spacing:-.02em;font-size:clamp(2.35rem,4.6vw,3.55rem);line-height:1.06}
body.light-mode .tdb-hero4-copy .ts2-eyebrow{color:var(--tdb-accent)!important;background:color-mix(in srgb, var(--tdb-accent) 8%, transparent)!important;border-color:color-mix(in srgb, var(--tdb-accent) 30%, transparent)!important}

/* ============================================================
   HERO v5.1 — compact pass (legacy sheets fight with !important,
   so these page-scoped pins do too)
   ============================================================ */
body.home .tdb-hero4{padding-top:48px!important;padding-bottom:14px!important}
body.home .tdb-hero4 .ts2-h1{font-size:clamp(2.15rem,3.3vw,2.9rem)!important;line-height:1.08!important;letter-spacing:-.02em!important;margin:0 0 16px!important;text-wrap:balance}
body.home .tdb-hero4-copy .ts2-eyebrow{margin-bottom:16px!important}
body.home .tdb-hero4-lede{font-size:1.06rem!important;margin:0 0 24px!important;max-width:34rem!important}
body.home .tdb-hero4-cta{margin-bottom:16px!important}
body.home .tdb-hero4-trust{margin-bottom:10px!important}
body.home .tdbhg-slides{min-height:308px!important}
body.home .tdb-hero4-grid{gap:clamp(28px,4vw,56px)!important;align-items:center!important}
.tcap-marquee{margin-top:26px}
@media(max-width:991.98px){
  body.home .tdb-hero4{padding-top:30px!important}
  body.home .tdb-hero4 .ts2-h1{font-size:clamp(1.9rem,6.4vw,2.4rem)!important}
}

/* ============================================================
   HERO v6 — ported feature-slider hero (tunerpro mechanics,
   TDB identity: blue/cyan tokens, transparent £699 deal card)
   ============================================================ */
.tdbh{--cream:#0b0e17;--cream-2:#0b0e17;--ink:var(--tdb-on-dark);--ink-2:var(--tdb-on-dark);--dark:#06080f;--dark-2:#0d1120;
  --surface:rgba(255,255,255,.035);--surface-solid:var(--tdb-surface);--line:rgba(255,255,255,.09);--line-strong:color-mix(in srgb, var(--tdb-line) 17%, transparent);
  --text:var(--tdb-on-dark);--muted:var(--tdb-on-dark);--muted-2:var(--tdb-on-dark);
  --a1:var(--tdb-accent);--a2:var(--tdb-support);--a3:var(--tdb-accent);--accent:var(--tdb-accent);
  --grad:linear-gradient(100deg,var(--tdb-accent),color-mix(in oklab, var(--tdb-accent) 58%, #fff) 52%,var(--tdb-accent));--glow:color-mix(in srgb, var(--tdb-accent) 45%, transparent);
  --elec:var(--tdb-support);--glass:rgba(12,16,30,.55);--maxw:1180px;--radius:18px;--ease:cubic-bezier(.22,1,.36,1);
  background:var(--tdb-ground);color:var(--text);font-family:'Inter',-apple-system,sans-serif}
.tdbh h1,
.tdbh h2,
.tdbh h3,
.tdbh .hero-title,
.tdbh .hs-title{font-family:'Space Grotesk','Inter',sans-serif}
.tdb-belt{position:relative;padding:10px 24px 34px;background:var(--tdb-ground)}
.tdb-belt .tdb-specs{margin-top:26px}
body.light-mode .tdbh,
body.light-mode .tdb-belt{background:var(--tdb-ground)}
/* The hero and the belt stay dark in light mode by design (rule above). The
   global light-mode rule in light-mode-overrides.css repaints every heading,
   paragraph, span, list item and strong to near-black, which applied inside
   these two dark bands too and left the headline, the lead paragraph and the
   scan panel invisible on the light-mode homepage. Hand those elements back to
   the hero's own cascade; `inherit` restores exactly what they had before the
   global rule reached them.

   Two sheets compete here: light-mode-overrides.css sets near-black without
   !important, and ts2-light-mode.min.css sets #0f172a WITH !important at the
   same specificity as a plain `.tdbh h1`. Winning that needs both a longer
   selector and !important, hence the `.ts2` variants below. */
body.light-mode .tdbh :is(h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,legend,strong,b):not(:is(.eyebrow,.ok,.tick,.hl,.acc,.mth,.url,.ph-b,.mid,.dim,.accent)),
body.light-mode .ts2 .tdbh :is(h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,legend,strong,b):not(:is(.eyebrow,.ok,.tick,.hl,.acc,.mth,.url,.ph-b,.mid,.dim,.accent)),
body.light-mode .tdb-belt :is(h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,legend,strong,b):not(:is(.eyebrow,.ok,.tick,.hl,.acc,.mth,.url,.ph-b,.mid,.dim,.accent)),
body.light-mode .ts2 .tdb-belt :is(h1,h2,h3,h4,h5,h6,p,span,li,label,td,th,legend,strong,b):not(:is(.eyebrow,.ok,.tick,.hl,.acc,.mth,.url,.ph-b,.mid,.dim,.accent)){
  color:inherit !important}
.tdbh .accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.tdbh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:"Space Grotesk",sans-serif;font-weight:600;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s,color .25s;white-space:nowrap}
.tdbh-btn-lg{padding:15px 28px;font-size:16px}
.tdbh-btn:not(.tdbh-btn-sm):not(.tdbh-btn-lg){padding:12px 22px;font-size:15px}
.tdbh-btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px var(--glow);position:relative;overflow:hidden}
.tdbh-btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px -12px var(--glow)}
.tdbh-btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);pointer-events:none}
.tdbh-btn-primary:hover::after{animation:sheen .85s ease}
.tdbh-btn-outline{background:transparent;color:var(--text);border-color:var(--line-strong)}
.tdbh-btn-outline:hover{transform:translateY(-3px);border-color:var(--a2)}
.hero .tdbh-btn-outline{color:var(--ink);border-color:color-mix(in srgb, var(--tdb-line) 28%, transparent)}
.hero .tdbh-btn-outline:hover{border-color:var(--accent)}
.tdbh .section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,130px) clamp(20px,5vw,40px)}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:88px clamp(20px,5vw,44px) 52px;position:relative;color:var(--ink)}
.hero-grid{max-width:var(--maxw);margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:30px;align-items:center}
.hero-copy,
.hero-visual{min-width:0}
.tdbh .eyebrow{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:22px}
.hero-title{font-size:clamp(40px,4.8vw,54px);margin-bottom:24px;color:var(--ink);text-wrap:balance}
.hero-title .line{display:block}
.hero-title .char{display:inline-block;will-change:transform,opacity}
.hero-sub{font-size:clamp(16px,1.7vw,19px);color:var(--ink-2);max-width:540px;margin-bottom:26px}
.hero-sub strong{color:var(--ink)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
body.hero-live .ecu-float,
body.hero-live .ecu-badge .dot,
body.hero-live .hero-scroll i{animation-play-state:running}
.tdbh .ecu-badge .dot,
.hero-scroll i{animation-play-state:paused}
.tdbh .ecu-badge{position:absolute;bottom:2%;left:0;font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.5);border:1px solid color-mix(in srgb, var(--tdb-line) 12%, transparent);padding:8px 13px;border-radius:10px;backdrop-filter:blur(4px)}
.tdbh .ecu-badge b{color:var(--accent)}
.tdbh .ecu-badge .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;animation:blink 1.4s ease-in-out infinite}
.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.hero-scroll i{width:1px;height:40px;background:linear-gradient(var(--accent),transparent);animation:scrollPulse 2s var(--ease) infinite}
.tdbh .cloud-inner span.in{opacity:1;transform:none}
.tdbh .wf-chip.on{color:#fff;background:var(--grad);border-color:transparent}
.tdbh .net-cap .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a2);margin-right:6px;animation:blink 1.4s infinite}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;gap:30px}
.hero-visual{order:-1;max-width:340px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
.blob{animation:none!important}
}
.hero{overflow:hidden}
.hero-aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-grid,
.hero-scroll{position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.blob.o{width:44vw;height:44vw;background:radial-gradient(circle,color-mix(in srgb, var(--tdb-accent) 55%, transparent),transparent 70%);top:-14vw;left:-10vw}
.blob.c{width:40vw;height:40vw;background:radial-gradient(circle,rgba(0,217,255,.45),transparent 70%);top:2vw;right:-12vw}
.blob.p{width:38vw;height:38vw;background:radial-gradient(circle,rgba(58,110,255,.34),transparent 70%);bottom:-22vw;left:26vw}
.hero-aura{transition:opacity .8s ease}
.hero{color:var(--text)}
.tdbh .eyebrow{color:var(--elec)}
.hero-title,
.hero-sub strong,
.hero-price-note strong{color:var(--text)}
.hero-sub,
.hero-price-note{color:var(--muted)}
.hero .tdbh-btn-outline{color:var(--text);border-color:var(--line-strong)}
.hero .tdbh-btn-outline:hover{border-color:var(--elec)}
.hero-scroll{color:var(--muted-2)}
.tdbh .ecu-badge{color:var(--text);background:color-mix(in srgb, var(--tdb-surface) 60%, transparent);border-color:var(--line);backdrop-filter:blur(8px)}
.tdbh .ecu-badge b{color:var(--a1)}
.tdbh .ecu-badge .dot{background:var(--elec)}
.tdbh .net-fly,
.tdbh .net-cap .dot{fill:var(--elec)}
.tdbh .net-cap .dot{background:var(--elec)}
.apid-note .dot{width:7px;height:7px;border-radius:50%;background:var(--tdb-success);box-shadow:0 0 8px #22e88c}
.tdbh .deepscan{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1/.95;perspective:900px}
.ds-plane{position:absolute;left:50%;top:50%;width:330px;height:330px;margin:-165px 0 0 -165px;transform-style:preserve-3d;transform:rotateX(60deg)}
.ds-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);gap:5px}
.ds-sweep{position:absolute;left:-5%;right:-5%;top:0;height:18%;border-radius:8px;background:linear-gradient(180deg,transparent,rgba(0,217,255,.20),transparent);box-shadow:0 0 34px rgba(0,217,255,.35);pointer-events:none}
.ds-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:500;padding:5px 11px;border-radius:999px;background:color-mix(in srgb, var(--tdb-surface) 72%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.45);opacity:0}
.ds-chip i{width:6px;height:6px;border-radius:50%;background:var(--elec);box-shadow:0 0 8px var(--elec)}
.ds-chip.b i{background:var(--a1);box-shadow:0 0 8px var(--a1)}
.ds-chip.a{top:1%;left:-3%}
.ds-chip.b{top:15%;right:-4%}
.ds-chip.c{top:29%;left:-5%}
.ds-live{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--elec);display:flex;align-items:center;gap:7px}
.ds-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--elec);box-shadow:0 0 9px var(--elec);animation:blink 1.3s infinite}
.ds-prog{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--a1)}
.ds-file{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted-2);margin-bottom:11px}
.ds-readout{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px}
.ds-kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;align-items:baseline}
.ds-kv span{color:var(--muted-2);font-family:"Space Grotesk",sans-serif}
.ds-kv b{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--text);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){
.tdbh .deepscan{max-width:400px}
.ds-plane{width:300px;height:300px;margin:-150px 0 0 -150px}
}
.hero-cta .tdbh-btn-primary{animation:ctaPulse 2.8s ease-in-out infinite}
.tdbh .deepscan{aspect-ratio:auto;perspective:none;padding-top:6px}
.ds-scene{position:relative;height:206px;perspective:820px}
.ds-plane{position:absolute;left:50%;top:52%;width:300px;height:300px;margin:-150px 0 0 -150px;transform-style:preserve-3d;transform:rotateX(46deg);transition:transform .25s ease-out}
.ds-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);gap:5px}
.ds-sweep{position:absolute;left:-6%;right:-6%;top:0;height:16%;border-radius:8px;background:linear-gradient(180deg,transparent,rgba(0,217,255,.42),transparent);box-shadow:0 0 44px rgba(0,217,255,.5);pointer-events:none}
.ds-chip{background:color-mix(in srgb, var(--tdb-surface) 96%, transparent)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;top:auto;left:auto;right:auto}
.ds-chip.a{top:-2px;left:0}
.ds-chip.b{top:24%;right:0}
.ds-panel{position:relative;z-index:2;margin-top:0;background:color-mix(in srgb, var(--tdb-band) 97%, transparent);border:1px solid var(--line-strong);border-radius:16px;padding:15px 17px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.ds-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.ds-panel .ds-file{margin-bottom:12px}
.ds-readout{display:grid;gap:9px}
.ds-kv{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;align-items:center;opacity:.36;transition:opacity .35s}
.ds-kv.on{opacity:1}
.ds-kv span{color:var(--muted-2);font-family:"Space Grotesk",sans-serif}
.ds-kv b{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--text)}
.ds-kv b.ok{color:var(--tdb-success)}
@media(max-width:900px){
.ds-plane{width:268px;height:268px;margin:-134px 0 0 -134px}
.ds-scene{height:186px}
}
.apid-stbtn.on{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 22%, transparent),color-mix(in srgb, var(--tdb-accent) 6%, transparent));border-color:var(--a1);color:var(--tdb-accent-ink)}
.tdbh-btn svg{width:18px;height:18px;flex:0 0 auto}
.tdbh .wow-dot.on{background:var(--a1);width:22px;border-radius:4px}
.tdbh .wv-bub.in{background:rgba(255,255,255,.05);border:1px solid var(--line);border-bottom-left-radius:4px}
.tdbh .wv-bub.out{background:var(--grad);color:#fff;border-bottom-right-radius:4px;margin-left:auto}
.tdbh .wv-bub.out.mono{font-family:"JetBrains Mono",monospace}
.tdbh .wv-bub b.accent{color:#fff}
.tdbh .enq-opt.on{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 22%, transparent),color-mix(in srgb, var(--tdb-accent) 6%, transparent));border-color:var(--a1);color:var(--tdb-accent-ink)}
.tdbh .rot-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.tdbh .rot-dots i.on{background:var(--a1);width:20px;border-radius:5px}
.tdbh .bub.in{align-self:flex-start;background:var(--tdb-raised);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--text)}
.tdbh .bub.out{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.tdbh .bub .accent{color:var(--a1);font-weight:600}
.tdbh .bub.out .accent{color:#fff}
.ds-flow{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);opacity:.32;transition:opacity .45s var(--ease)}
.ds-flow.on{opacity:1}
.ds-flow-track{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.ds-node{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--tdb-text);background:rgba(150,180,225,.09);border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;white-space:nowrap;flex:0 0 auto;text-align:center;transition:color .35s,background .35s,border-color .35s}
.ds-node.mid{color:var(--tdb-accent-ink);background:color-mix(in srgb, var(--tdb-accent) 16%, transparent);border-color:color-mix(in srgb, var(--tdb-accent) 42%, transparent)}
.ds-arrow{flex:1 1 auto;min-width:14px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(150,180,225,.30),var(--a1));position:relative}
.ds-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--a1);border-top:4px solid transparent;border-bottom:4px solid transparent}
.ds-verdict{font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--tdb-text);line-height:1.45;min-height:36px;transition:opacity .25s ease}
.ds-verdict b{color:#fff;font-weight:600}
.ds-verdict .hl{color:var(--a1)}
.ds-verdict .tick{color:var(--tdb-success);font-weight:700}
.ds-who{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.09);font-family:"Space Grotesk",sans-serif;font-size:10.5px;color:var(--muted-2);line-height:1.42}
.ds-who b{color:var(--muted);font-weight:600}
.tdbh .cmp .tick{color:var(--tdb-success);font-weight:700}
@media(max-width:560px){
.hero-title{font-size:clamp(23px,7.2vw,42px);margin-bottom:20px}
}
.reframe{padding:clamp(46px,6vw,78px) 0;text-align:center}
.reframe-inner{max-width:900px;margin:0 auto;padding:0 20px}
.reframe-lead{font-family:"Space Grotesk",sans-serif;font-size:clamp(15px,2vw,18px);color:var(--muted);letter-spacing:.02em;margin:0 0 6px}
.reframe-h{font-size:clamp(27px,4.6vw,46px);line-height:1.08;margin:0 0 26px;letter-spacing:-.01em;color:var(--text)}
.reframe-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:780px;margin:0 auto 22px}
.reframe-stack span{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;color:var(--text);background:var(--surface-solid);border:1px solid var(--line-strong);border-radius:999px;padding:9px 16px}
.reframe-foot{font-size:16px;color:var(--muted);margin:0}
.reframe-foot b{color:var(--a1)}
.tdbh .trust-strip{display:flex;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:34px auto 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface-solid)}
.tdbh .trust-cell{flex:1 1 150px;text-align:center;padding:18px 14px;border-right:1px solid var(--line)}
.tdbh .trust-cell:last-child{border-right:none}
.tdbh .trust-cell b{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(21px,2.6vw,27px);color:var(--text);line-height:1}
.tdbh .trust-cell b em{font-style:normal;color:var(--a1)}
.tdbh .trust-cell span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
@media(max-width:640px){
.tdbh .trust-cell{flex-basis:33.33%;border-bottom:1px solid var(--line)}
}
.tdbh .builtby{padding:clamp(28px,4vw,52px) 0}
.tdbh .builtby-inner{max-width:760px;margin:0 auto;padding:28px 30px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb, var(--tdb-accent) 6%, transparent),var(--surface-solid));border:1px solid var(--line-strong);border-radius:18px}
.tdbh .builtby-badge{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--a1);background:color-mix(in srgb, var(--tdb-accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 30%, transparent);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.tdbh .builtby-lead{font-family:"Space Grotesk",sans-serif;font-size:clamp(18px,2.6vw,24px);color:var(--text);line-height:1.3;margin:0 0 12px;font-weight:600}
.tdbh .builtby-body{font-size:15px;color:var(--muted);line-height:1.65;margin:0 auto;max-width:620px}
.tdbh .builtby-body b{color:var(--text)}
.tdbh-btn-wa{background:#25d366;border-color:#25d366;color:#052e16}
.tdbh-btn-wa:hover{background:var(--tdb-success);border-color:var(--tdb-success);color:#052e16;transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.35)}
.tdbh-btn-wa svg{width:18px;height:18px;flex:0 0 auto}
.tdbh .ct-topic.on{background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 25%, transparent),color-mix(in srgb, var(--tdb-danger) 10%, transparent));border-color:var(--a1);color:var(--tdb-accent-ink)}
.ct-done .tdbh-btn-wa{margin-top:10px}
.tdbh .ai-side-pro .rot-dots i.on{background:var(--elec)}
.tdbh .rot-slide.is-active .cv>*{animation:bubIn .5s var(--ease) both}
.tdbh .rot-slide.is-active .cv>*:nth-child(1){animation-delay:.12s}
.tdbh .rot-slide.is-active .cv>*:nth-child(2){animation-delay:.5s}
.tdbh .rot-slide.is-active .cv>*:nth-child(3){animation-delay:.95s}
.tdbh .rot-slide.is-active .cv>*:nth-child(4){animation-delay:1.3s}
.dynocard{align-self:flex-start;width:92%;background:var(--tdb-surface);border:1px solid var(--line);border-radius:13px;padding:11px 13px 10px}
.dyno-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.dyno-top b{font-size:12.5px;color:var(--text);font-family:"Space Grotesk",sans-serif}
.dynocard svg{width:100%;height:64px;display:block}
.dyno-tuned{stroke-dasharray:340;stroke-dashoffset:340}
.rot-slide.is-active .dyno-tuned{animation:dynoDraw 1.5s .7s var(--ease) forwards}
.dyno-leg{display:flex;gap:14px;margin-top:7px;font-size:11.5px;color:var(--muted)}
.dyno-leg i{display:inline-block;width:12px;height:0;border-top:2px solid var(--tdb-line);vertical-align:3px;margin-right:5px}
.dyno-leg i.st{border-top-style:dashed}
.dyno-leg i.tu{border-top-color:var(--a1)}
.dyno-leg b{color:var(--text)}
.tdbh .ai-ctrl.in-view .tgl.on{color:var(--text);border-color:color-mix(in srgb, var(--tdb-accent) 35%, transparent)}
.tdbh .ai-ctrl.in-view .tgl.on i{background:color-mix(in srgb, var(--tdb-accent) 55%, transparent)}
.tdbh .ai-ctrl.in-view .tgl.on i::after{left:13px;background:#fff}
@media(max-width:560px){
.dynocard{width:100%}
}
@media(prefers-reduced-motion:reduce){
.dyno-tuned{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}
}
.tdbh-btn,
.tdbh .wa-fab,
.tdbh .ct-topic,
.tdbh .rot-dots i,
.tdbh .faq-item summary{-webkit-tap-highlight-color:transparent}
.tdbh .nav-links a.on{color:var(--text)}
.tdbh .nav-links a.on::after{width:100%}
.tdbh .wa-round{width:54px;height:54px;padding:0!important;border-radius:50%;flex:0 0 auto}
.tdbh .wa-round svg{width:22px;height:22px}
@media(max-width:640px){
.hero-cta .tdbh-btn-primary,
.hero-cta .tdbh-btn-outline{flex:1 1 100%;justify-content:center}
.tdbh .wa-round{margin:0 auto}
}
@media(max-width:900px){
.hero-scroll{display:none}
}
.hero-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:auto;pointer-events:none;z-index:1}
.tdbh .nav-prev-scene.on{opacity:1}
.tdbh .pv-b.o{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:3px;font-family:"Space Grotesk",ui-monospace,monospace}
.tdbh .nav-prev-scene.on .pv-b{animation:bubIn .4s var(--ease) both}
.tdbh .nav-prev-scene.on .pv-b:nth-child(2){animation-delay:.25s}
.tdbh .nav-prev-scene.on .pv-b:nth-child(3){animation-delay:.5s}
.tdbh .nav-prev-scene.on .pv-bars i{animation:pvGrow .7s var(--ease) both}
.tdbh .nav-prev-scene.on .pv-bars i:nth-child(2){animation-delay:.07s}
.tdbh .nav-prev-scene.on .pv-bars i:nth-child(3){animation-delay:.14s}
.tdbh .nav-prev-scene.on .pv-bars i:nth-child(4){animation-delay:.21s}
.tdbh .nav-prev-scene.on .pv-bars i:nth-child(5){animation-delay:.28s}
.tdbh .nav-prev-scene.on .pv-bars i:nth-child(6){animation-delay:.35s}
@media(prefers-reduced-motion:reduce){
.tdbh .nav-prev-scene.on .pv-b,
.tdbh .nav-prev-scene.on .pv-bars i{animation:none!important;opacity:1;transform:none}
}
.hero-deal{position:relative;display:flex;gap:13px;align-items:flex-start;max-width:560px;margin:6px 0 18px;padding:15px 17px;border-radius:16px;border:1px solid transparent;background:linear-gradient(color-mix(in srgb, var(--tdb-band) 82%, transparent),color-mix(in srgb, var(--tdb-band) 82%, transparent)) padding-box,linear-gradient(120deg,color-mix(in srgb, var(--tdb-accent) 90%, transparent),color-mix(in srgb, var(--tdb-danger) 75%, transparent),rgba(255,45,139,.6),rgba(0,217,255,.55),color-mix(in srgb, var(--tdb-accent) 90%, transparent)) border-box;background-size:100% 100%,320% 100%;background-position:0 0,0 0;animation:hdPan 9s linear infinite;box-shadow:0 18px 50px -24px rgba(255,60,70,.35)}
.tdbh .hd-ic{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--grad);color:#fff;box-shadow:0 6px 18px -6px var(--glow)}
.hero-deal p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.hero-deal b{color:var(--text)}
.hero-pricebar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:0 0 26px}
.tdbh .hp-flash{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb, var(--tdb-accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 40%, transparent);color:var(--a1);animation:hpGlow 2.6s ease-in-out infinite}
.tdbh .hp-text{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,25px);letter-spacing:-.01em;background:linear-gradient(110deg,#ffffff 8%,#ffd7c2 28%,var(--tdb-accent) 48%,#ff2d8b 66%,#ffffff 88%);background-size:230% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hpText 5.5s linear infinite}
.tdbh .hp-sep{width:1px;height:22px;background:var(--line-strong)}
.tdbh .hp-chips{display:flex;gap:7px}
.tdbh .hp-chips i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.04);padding:5px 11px;border-radius:999px;transition:color .2s,border-color .2s}
.tdbh .hp-chips i:hover{color:var(--text);border-color:var(--line-strong)}
@media(max-width:640px){
.hero-deal{padding:13px 14px}
.tdbh .hp-sep{display:none}
}
@media(prefers-reduced-motion:reduce){
.hero-deal{animation:none}
.tdbh .hp-text{animation:none}
.tdbh .hp-flash{animation:none}
}
.hero-slider{position:relative;z-index:1}
.hs-track{display:grid}
.hs-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(28px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s;pointer-events:none}
.hs-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hs-title{font-size:clamp(30px,4.6vw,54px);line-height:1.06;margin:14px 0 18px;letter-spacing:-.02em}
.hs-vis{display:flex;align-items:center;justify-content:center}
.hs-slide.is-active .hs-card .pv-bars i{animation:pvGrow .7s var(--ease) both}
.hs-slide.is-active .hs-card .pv-bars i:nth-child(2){animation-delay:.08s}
.hs-slide.is-active .hs-card .pv-bars i:nth-child(3){animation-delay:.16s}
.hs-slide.is-active .hs-card .pv-bars i:nth-child(4){animation-delay:.24s}
.hs-slide.is-active .hs-card .pv-bars i:nth-child(5){animation-delay:.32s}
.hs-slide.is-active .hs-card .pv-bars i:nth-child(6){animation-delay:.4s}
.hs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:clamp(44px,4.5vw,60px);height:clamp(44px,4.5vw,60px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:color-mix(in srgb, var(--tdb-text) 85%, transparent);cursor:pointer;opacity:.85;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s,opacity .25s}
.hs-prev{left:-14px}
.hs-next{right:-14px}
.hs-arrow:hover{background:color-mix(in srgb, var(--tdb-accent) 14%, transparent);border-color:color-mix(in srgb, var(--tdb-accent) 55%, transparent);color:var(--tdb-accent-ink);opacity:1;transform:translateY(-50%) scale(1.07);box-shadow:0 12px 34px -12px var(--glow)}
.hs-arrow:active{transform:translateY(-50%) scale(.95)}
@media(max-width:1260px){
.hs-prev{left:0}
.hs-next{right:0}
}
@media(max-width:640px){
.hs-arrow{width:40px;height:40px;opacity:.7}
.hs-arrow svg{width:20px;height:20px}
.hs-prev{left:-4px}
.hs-next{right:-4px}
}
.hs-dots{display:flex;gap:7px;justify-content:center;margin-top:30px;position:relative;z-index:6}
.hs-dots button{width:8px;height:8px;border-radius:999px;border:0;background:var(--line-strong);cursor:pointer;transition:width .3s var(--ease),background .3s;padding:0}
.hs-dots button.on{width:26px;background:var(--grad)}
.hs-slide.is-active .hs-el{animation:bubIn .6s var(--ease) both}
.hs-slide.is-active .hs-el:nth-child(1){animation-delay:.08s}
.hs-slide.is-active .hs-el:nth-child(2){animation-delay:.18s}
.hs-slide.is-active .hs-el:nth-child(3){animation-delay:.28s}
.hs-slide.is-active .hs-el:nth-child(4){animation-delay:.38s}
.hs-slide.is-active .hs-vis{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){
.hs-slide{transition:opacity .2s linear;transform:none}
.hs-slide.is-active .hs-el,
.hs-slide.is-active .hs-card .pv-bars i{animation:none!important}
.hs-arrow{transition:none}
}
.blob{opacity:.75}
.blob.o{background:radial-gradient(circle,color-mix(in srgb, var(--tdb-accent) 70%, transparent),transparent 72%)}
.blob.c{background:radial-gradient(circle,rgba(0,217,255,.6),transparent 72%)}
.blob.p{background:radial-gradient(circle,rgba(88,120,255,.5),transparent 72%)}
.hs-chips{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;max-width:520px}
.hs-chip{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:9px 13px}
.hs-chip svg{width:15px;height:15px;flex:none;color:var(--a1)}
.hs-chip b{color:var(--text);font-family:"Space Grotesk",sans-serif;font-size:12.5px;white-space:nowrap}
.hs-chip i{font-style:normal;color:var(--muted-2);font-size:12px}
.hs-phone{position:relative;width:min(340px,100%);background:linear-gradient(170deg,var(--tdb-raised),var(--tdb-band));border:1px solid var(--line-strong);border-radius:26px;padding:10px 10px 8px;box-shadow:0 46px 92px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06);animation:phFloat 7s ease-in-out infinite alternate}
.hs-ph-toast{position:absolute;top:-14px;left:50%;transform:translateX(-50%) translateY(-6px);white-space:nowrap;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;color:var(--tdb-success);background:color-mix(in srgb, var(--tdb-band) 97%, transparent);border:1px solid color-mix(in srgb, var(--tdb-success) 45%, transparent);border-radius:999px;padding:6px 13px;box-shadow:0 10px 28px rgba(0,0,0,.5);opacity:0;z-index:2}
.hs-ph-top{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--line)}
.hs-ph-ava{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;flex:none}
.hs-ph-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.hs-ph-meta b{font-family:"Space Grotesk",sans-serif;font-size:13px;color:var(--text)}
.hs-ph-meta i{font-style:normal;font-size:10.5px;color:#2aabee;display:flex;align-items:center;gap:5px}
.hs-ph-meta .on{width:6px;height:6px;border-radius:50%;background:#2aabee;animation:tgOn 2.4s ease-in-out infinite}
.hs-ph-tg{margin-left:auto;color:#2aabee;flex:none}
.hs-ph-chat{display:flex;flex-direction:column;gap:7px;padding:12px 8px;min-height:286px}
.ph-b{max-width:86%;font-size:12px;line-height:1.45;padding:7px 10px;border-radius:12px;opacity:0}
.ph-b.out{align-self:flex-end;background:linear-gradient(135deg,#2aabee,#1b8fd0);color:#fff;border-bottom-right-radius:4px;font-family:"Space Grotesk",ui-monospace,monospace}
.ph-b.in{align-self:flex-start;background:#1b2030;border:1px solid var(--line);color:var(--text);border-bottom-left-radius:4px}
.ph-b.pic{padding:4px}
.ph-car{display:block;width:150px;height:72px;border-radius:9px;position:relative;background:linear-gradient(155deg,#39415a 0%,#232a3e 55%,#181d2c 100%);overflow:hidden}
.ph-car::before{content:"";position:absolute;left:14px;right:44px;top:16px;height:26px;border-radius:9px 26px 4px 4px;background:linear-gradient(165deg,#6a7694,#3d465f)}
.ph-car::after{content:"";position:absolute;left:20px;width:16px;height:16px;bottom:10px;border-radius:50%;background:#0c0f18;box-shadow:70px 0 0 #0c0f18}
.ph-car .plate{position:absolute;right:8px;bottom:8px;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;letter-spacing:.06em;color:#151824;background:#f4c400;border-radius:3px;padding:1px 5px}
.ph-b.card b{display:block;font-family:"Space Grotesk",sans-serif;font-size:12.5px}
.ph-b.card span{display:block;font-size:11px;color:var(--muted)}
.ph-b.card .dim{color:var(--muted-2)}
.ph-b.card em{font-style:normal;color:#7be3ad;font-weight:600}
.ph-b .acc{color:#7be3ad}
.ph-b.typing{display:flex;gap:4px;padding:9px 11px}
.ph-b.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:phTy 1s ease-in-out infinite}
.ph-b.typing i:nth-child(2){animation-delay:.15s}
.ph-b.typing i:nth-child(3){animation-delay:.3s}
.ph-b.doc{display:flex;gap:9px;align-items:center}
.tdbh .doc-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb, var(--tdb-accent) 14%, transparent);font-size:15px}
.tdbh .doc-tx b{display:block;font-size:11.5px;font-family:"Space Grotesk",sans-serif}
.tdbh .doc-tx i{font-style:normal;font-size:10px;color:var(--muted-2)}
.hs-ph-input{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--muted-2)}
.hs-ph-input svg{color:#2aabee}
.hs-slide.is-active .pb0{animation:phB 10s var(--ease) infinite}
.hs-slide.is-active .pb2{animation:phB2 10s var(--ease) infinite}
.hs-slide.is-active .pb1{animation:phB1 10s var(--ease) infinite}
.hs-slide.is-active .pb3{animation:phB3 10s var(--ease) infinite}
.hs-slide.is-active .pb5{animation:phB5 10s var(--ease) infinite}
.hs-slide.is-active .pb6{animation:phB6 10s var(--ease) infinite}
.hs-slide.is-active .hs-ph-toast{animation:phToast 10s var(--ease) infinite}
.hs-flow{width:min(430px,100%);display:flex;flex-direction:column;gap:10px;background:linear-gradient(165deg,var(--tdb-surface),var(--tdb-band));border:1px solid var(--line-strong);border-radius:20px;padding:20px;box-shadow:0 46px 92px -56px rgba(0,0,0,.95)}
.hs-flow-row{display:flex;align-items:center;gap:10px}
.hs-port{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line-strong);padding:7px 10px;border-radius:9px;min-width:150px}
.hs-port .pd{width:8px;height:8px;border-radius:3px;background:var(--pc,#888);flex:none}
.hs-port .wal{font-style:normal;margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:400;color:var(--muted-2);background:rgba(255,255,255,.05);border-radius:5px;padding:2px 5px;white-space:nowrap}
.hs-port .wal.low{color:var(--tdb-warning);border:1px solid color-mix(in srgb, var(--tdb-warning) 40%, transparent);background:color-mix(in srgb, var(--tdb-warning) 8%, transparent)}
.hs-slide.is-active .hs-port .wal.low{animation:walLow 9s ease-in-out infinite}
.hs-lane{position:relative;flex:1;height:2px;background:var(--line-strong);border-radius:2px;min-width:30px}
.hs-lane .file{position:absolute;top:50%;left:0;width:14px;height:16px;margin-top:-8px;border-radius:3px;background:linear-gradient(160deg,#e8ecf5,#b9c2d4);opacity:0;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.hs-lane .file::before{content:"";position:absolute;left:3px;right:3px;top:4px;height:1.6px;background:#5b6474;box-shadow:0 3px 0 #5b6474,0 6px 0 #5b6474}
.hs-flow-master{position:relative;align-self:center;text-align:center;background:linear-gradient(135deg,color-mix(in srgb, var(--tdb-accent) 16%, transparent),color-mix(in srgb, var(--tdb-danger) 8%, transparent));border:1px solid color-mix(in srgb, var(--tdb-accent) 50%, transparent);border-radius:13px;padding:11px 22px;margin:2px 0}
.hs-flow-master b{display:block;font-family:"Space Grotesk",sans-serif;font-size:13.5px;color:var(--text)}
.hs-flow-master span{font-size:10.5px;color:var(--muted)}
.hs-flow-master .pulse{position:absolute;inset:0;border-radius:13px;pointer-events:none}
.hs-flow-out{display:flex;align-items:center;gap:10px}
.hs-lane.out{flex:1}
.hs-lane.out .file{background:linear-gradient(160deg,#4be097,#1d9e60)}
.hs-lane.out .file::before{background:#0b5c36;box-shadow:0 3px 0 #0b5c36,0 6px 0 #0b5c36}
.hs-deliv{flex:none;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;color:var(--tdb-success);background:color-mix(in srgb, var(--tdb-success) 8%, transparent);border:1px solid color-mix(in srgb, var(--tdb-success) 35%, transparent);padding:8px 11px;border-radius:10px}
.hs-deliv small{display:block;font-weight:400;font-size:9.5px;color:var(--muted-2)}
.hs-slide.is-active .hs-lane .f1{animation:laneRun 9s linear infinite}
.hs-slide.is-active .hs-lane .f2{animation:laneRun 9s linear infinite;animation-delay:1.1s}
.hs-slide.is-active .hs-lane .f3{animation:laneRun 9s linear infinite;animation-delay:2.2s}
.hs-slide.is-active .hs-lane.out .fo{animation:laneRunOut 9s linear infinite}
.hs-slide.is-active .hs-flow-master .pulse{animation:masterPulse 9s ease-out infinite}
.hs-inv{position:relative;width:min(380px,100%);background:linear-gradient(165deg,var(--tdb-surface),var(--tdb-band));border:1px solid var(--line-strong);border-radius:18px;padding:20px;box-shadow:0 46px 92px -56px rgba(0,0,0,.95);overflow:hidden}
.hs-inv-top{display:flex;justify-content:space-between;align-items:center;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);padding-bottom:10px;border-bottom:1px dashed var(--line-strong)}
.hs-inv-clock{color:var(--muted-2);letter-spacing:0}
.hs-inv-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line);opacity:0}
.hs-inv-row b{color:var(--text);font-family:"JetBrains Mono",monospace;font-size:12px}
.hs-inv-total{display:flex;justify-content:space-between;padding:11px 0 4px;font-family:"Space Grotesk",sans-serif;font-size:14px;color:var(--text);opacity:0}
.hs-inv-total b{font-family:"JetBrains Mono",monospace;font-size:17px;color:var(--a1)}
.hs-inv-paid{position:absolute;top:42%;right:18px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:26px;letter-spacing:.18em;color:var(--tdb-success);border:3px solid var(--tdb-success);border-radius:10px;padding:2px 14px;transform:rotate(-12deg) scale(3);opacity:0}
.hs-inv-foot{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--muted-2);opacity:0}
.hs-inv-foot .ok-dot{width:7px;height:7px;border-radius:50%;background:var(--tdb-success);flex:none}
.hs-slide.is-active .ir1{animation:invRow 8s var(--ease) infinite}
.hs-slide.is-active .ir2{animation:invRow2 8s var(--ease) infinite}
.hs-slide.is-active .ir3{animation:invRow3 8s var(--ease) infinite}
.hs-slide.is-active .hs-inv-paid{animation:invPaid 8s var(--ease) infinite}
.hs-slide.is-active .ir4{animation:invRow4 8s var(--ease) infinite}
.hs-api{width:min(430px,100%);background:linear-gradient(165deg,var(--tdb-surface),var(--tdb-band));border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 46px 92px -56px rgba(0,0,0,.95);overflow:hidden;font-family:"JetBrains Mono",monospace}
.hs-api-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.hs-api-top i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.hs-api-top i:nth-child(1){background:#ff5f57}
.hs-api-top i:nth-child(2){background:#febc2e}
.hs-api-top i:nth-child(3){background:#28c840}
.hs-api-top span{margin-left:auto;font-size:10px;color:var(--muted-2)}
.hs-api-req{display:flex;align-items:center;gap:8px;padding:12px 14px 4px;font-size:12px}
.hs-api-req .mth{color:var(--tdb-success);font-weight:600}
.hs-api-req .url{color:var(--text);overflow:hidden;white-space:nowrap}
.hs-api-status{margin-left:auto;font-size:10px;color:var(--tdb-success);border:1px solid color-mix(in srgb, var(--tdb-success) 40%, transparent);border-radius:6px;padding:2px 7px;opacity:0}
.hs-api-body{display:flex;flex-direction:column;gap:3px;padding:8px 14px 12px;font-size:11.5px;color:var(--muted)}
.hs-api-body .al{opacity:0}
.hs-api-body em{font-style:normal;color:#7dd3fc}
.hs-api-body b{color:var(--a1)}
.hs-api-widget{display:flex;align-items:center;gap:9px;padding:11px 14px 14px;border-top:1px dashed var(--line-strong)}
.hs-api-plate{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);border-radius:8px;padding:6px 9px;min-width:0}
.hs-api-plate .wplate{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--tdb-on-light);background:var(--tdb-warning);border-radius:3px;padding:1px 6px;overflow:hidden;white-space:nowrap}
.hs-api-book{flex:none;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;color:#fff;background:var(--grad);border-radius:999px;padding:6px 13px}
.hs-api-lead{flex:none;font-size:10px;color:var(--tdb-success);opacity:0;white-space:nowrap}
.hs-slide.is-active .hs-api-req .url{animation:apiType 8s steps(24) infinite}
.hs-slide.is-active .hs-api-status{animation:apiIn2 8s var(--ease) infinite}
.hs-slide.is-active .a1{animation:apiA1 8s var(--ease) infinite}
.hs-slide.is-active .a2{animation:apiA2 8s var(--ease) infinite}
.hs-slide.is-active .a3{animation:apiA3 8s var(--ease) infinite}
.hs-slide.is-active .a4{animation:apiA4 8s var(--ease) infinite}
.hs-slide.is-active .hs-api-plate .wplate{animation:apiPlate 8s steps(10) infinite}
.hs-slide.is-active .hs-api-book{animation:apiBook 8s ease-in-out infinite}
.hs-slide.is-active .hs-api-lead{animation:apiLead 8s var(--ease) infinite}
@media(max-width:900px){
.hs-phone,
.hs-flow,
.hs-inv,
.hs-api{margin:0 auto}
.hs-ph-chat{min-height:250px}
.hs-chips{max-width:none}
}
@media(max-width:640px){
.hs-chip i{display:none}
.hs-port{min-width:120px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
.hs-phone{animation:none}
.hs-ph-meta .on,
.ph-b.typing i{animation:none}
.hs-slide.is-active .ph-b,
.hs-slide.is-active .hs-inv-row,
.hs-slide.is-active .hs-inv-total,
.hs-slide.is-active .hs-inv-foot,
.hs-slide.is-active .hs-api-body .al,
.hs-slide.is-active .hs-api-status,
.hs-slide.is-active .hs-inv-paid,
.hs-slide.is-active .hs-ph-toast,
.hs-slide.is-active .hs-api-lead{animation:none!important;opacity:1;transform:none}
.hs-slide.is-active .hs-ph-toast{transform:translateX(-50%)}
.hs-slide.is-active .hs-inv-paid{transform:rotate(-12deg)}
.hs-slide.is-active .ph-b.typing{display:none}
.hs-slide.is-active .hs-lane .file,
.hs-slide.is-active .hs-lane.out .file{animation:none!important;opacity:1;left:calc(50% - 7px)}
.hs-slide.is-active .hs-flow-master .pulse,
.hs-slide.is-active .hs-port .wal.low{animation:none}
.hs-slide.is-active .hs-api-req .url,
.hs-slide.is-active .hs-api-plate .wplate{animation:none;max-width:none}
.hs-slide.is-active .hs-api-book{animation:none}
}
.hs-vh{width:min(400px,100%);display:flex;flex-direction:column;gap:10px;background:linear-gradient(165deg,var(--tdb-surface),var(--tdb-band));border:1px solid var(--line-strong);border-radius:20px;padding:18px;box-shadow:0 46px 92px -56px rgba(0,0,0,.95)}
.hs-vh-search{display:flex;align-items:center;gap:9px}
.vh-plate-w{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);border-radius:10px;padding:8px 10px;min-width:0}
.vh-plate{font-style:normal;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--tdb-on-light);background:var(--tdb-warning);border-radius:4px;padding:2px 8px;overflow:hidden;white-space:nowrap}
.vh-go{flex:none;font-family:"Space Grotesk",sans-serif;font-size:11.5px;font-weight:600;color:#fff;background:var(--grad);border-radius:999px;padding:7px 14px}
.hs-vh-res{opacity:0}
.hs-vh-res b{display:block;font-family:"Space Grotesk",sans-serif;font-size:14.5px;color:var(--text)}
.hs-vh-res span{font-size:11.5px;color:var(--muted)}
.hs-vh-tags{display:flex;flex-wrap:wrap;gap:7px;opacity:0}
.hs-vh-tags span{font-size:10.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.hs-vh-tags b{color:var(--text);font-weight:600}
.hs-vh .dynocard{width:100%;opacity:0}
.hs-vh-note{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.03);border:1px dashed var(--line-strong);border-radius:12px;padding:9px 11px;opacity:0}
.vh-cam{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.3);font-size:14px}
.hs-vh-note b{display:block;font-family:"Space Grotesk",sans-serif;font-size:11.5px;color:var(--text)}
.hs-vh-note i{font-style:normal;font-size:10px;color:var(--muted-2)}
.hs-slide.is-active .vh-plate{animation:vhType 9s steps(10) infinite}
.hs-slide.is-active .vr1{animation:vhIn1 9s var(--ease) infinite}
.hs-slide.is-active .vr2{animation:vhIn2 9s var(--ease) infinite}
.hs-slide.is-active .vr3{animation:vhIn3 9s var(--ease) infinite}
.hs-slide.is-active .vr4{animation:vhIn4 9s var(--ease) infinite}
.hs-slide.is-active .hs-vh .dyno-tuned{stroke-dasharray:340;animation:vhDyno 9s var(--ease) infinite}
@media(prefers-reduced-motion:reduce){
.hs-slide.is-active .vh-plate,
.hs-slide.is-active .hs-vh .dyno-tuned{animation:none;max-width:none;stroke-dasharray:none;stroke-dashoffset:0}
.hs-slide.is-active .vr1,
.hs-slide.is-active .vr2,
.hs-slide.is-active .vr3,
.hs-slide.is-active .vr4{animation:none!important;opacity:1;transform:none}
}
@keyframes sheen{to{left:150%}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 30px -10px var(--glow)}50%{box-shadow:0 12px 42px -6px rgba(255,107,26,.6)}}
@keyframes bubIn{to{opacity:1;transform:none}}
@keyframes dynoDraw{to{stroke-dashoffset:0}}
@keyframes pvGrow{from{transform:scaleY(0)}}
@keyframes hdPan{to{background-position:0 0,320% 0}}
@keyframes hpGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,106,31,0)}50%{box-shadow:0 0 18px 2px rgba(255,106,31,.35)}}
@keyframes hpText{to{background-position:230% 0}}
@keyframes phFloat{from{transform:translateY(0) rotate(-.4deg)}to{transform:translateY(-9px) rotate(.4deg)}}
@keyframes tgOn{50%{box-shadow:0 0 8px 1px rgba(42,171,238,.6)}}
@keyframes phTy{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes phB{0%{opacity:0;transform:translateY(8px)}4%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes phB2{0%,6%{opacity:0}9%,16%{opacity:1}19%,100%{opacity:0;height:0;min-height:0;padding-top:0;padding-bottom:0;margin:0}}
@keyframes phB1{0%,18%{opacity:0;transform:translateY(8px)}22%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes phB3{0%,28%{opacity:0;transform:translateY(8px)}33%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes phB5{0%,46%{opacity:0;transform:translateY(8px)}51%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes phB6{0%,58%{opacity:0;transform:translateY(10px) scale(.96)}64%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes phToast{0%,74%{opacity:0;transform:translateX(-50%) translateY(-6px)}80%,94%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0}}
@keyframes walLow{0%,58%{box-shadow:0 0 0 0 rgba(255,176,32,0)}64%,72%{box-shadow:0 0 10px 1px rgba(255,176,32,.45)}80%,100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
@keyframes laneRun{0%,2%{opacity:0;left:0}6%{opacity:1}30%{opacity:1;left:calc(100% - 14px)}34%,100%{opacity:0;left:calc(100% - 14px)}}
@keyframes laneRunOut{0%,52%{opacity:0;left:0}56%{opacity:1}84%{opacity:1;left:calc(100% - 14px)}88%,100%{opacity:0}}
@keyframes masterPulse{0%,30%{box-shadow:0 0 0 0 rgba(255,106,31,0)}38%{box-shadow:0 0 0 10px rgba(255,106,31,.16)}46%,100%{box-shadow:0 0 0 0 rgba(255,106,31,0)}}
@keyframes invRow{0%,4%{opacity:0;transform:translateX(-8px)}9%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes invRow2{0%,14%{opacity:0;transform:translateX(-8px)}19%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes invRow3{0%,24%{opacity:0;transform:translateX(-8px)}29%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes invPaid{0%,38%{opacity:0;transform:rotate(-12deg) scale(3)}46%,95%{opacity:1;transform:rotate(-12deg) scale(1)}100%{opacity:0}}
@keyframes invRow4{0%,52%{opacity:0}58%,95%{opacity:1}100%{opacity:0}}
@keyframes apiType{0%{max-width:0}22%,100%{max-width:220px}}
@keyframes apiIn2{0%,24%{opacity:0}30%,95%{opacity:1}100%{opacity:0}}
@keyframes apiA1{0%,30%{opacity:0;transform:translateY(4px)}35%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes apiA2{0%,36%{opacity:0;transform:translateY(4px)}41%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes apiA3{0%,42%{opacity:0;transform:translateY(4px)}47%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes apiA4{0%,48%{opacity:0;transform:translateY(4px)}53%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes apiPlate{0%,54%{max-width:0;padding-left:0;padding-right:0}68%,100%{max-width:90px;padding-left:6px;padding-right:6px}}
@keyframes apiBook{0%,70%{transform:none}74%,78%{transform:scale(1.08)}82%,100%{transform:none}}
@keyframes apiLead{0%,80%{opacity:0;transform:translateX(-4px)}86%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vhType{0%{max-width:0;padding-left:0;padding-right:0}12%,100%{max-width:110px;padding-left:8px;padding-right:8px}}
@keyframes vhIn1{0%,14%{opacity:0;transform:translateY(6px)}19%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vhIn2{0%,22%{opacity:0;transform:translateY(6px)}27%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vhIn3{0%,30%{opacity:0;transform:translateY(6px)}35%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vhIn4{0%,58%{opacity:0;transform:translateY(6px)}64%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vhDyno{0%,34%{stroke-dashoffset:340}58%,100%{stroke-dashoffset:0}}
/* ===== HERO v6.1 hotfixes: contain glows, blue blobs, no scroll-cue, reframe dark band ===== */
.tdbh{overflow:hidden;position:relative}
.tdbh #blobO{background:radial-gradient(circle, color-mix(in srgb, var(--tdb-accent) 55%, transparent), transparent 70%)!important;opacity:.5!important}
.tdbh #blobC{opacity:.45!important}
.tdbh #blobP{background:radial-gradient(circle, color-mix(in srgb, var(--tdb-support) 40%, transparent), transparent 70%)!important;opacity:.4!important}
.tdbh .hero-scroll{display:none!important}
.section.reframe{background:var(--tdb-ground);color:var(--tdb-text);padding:88px 24px 70px}
.section.reframe>*{max-width:1180px;margin-left:auto;margin-right:auto}
.section.reframe .accent{background:linear-gradient(100deg,var(--tdb-accent),color-mix(in oklab, var(--tdb-accent) 58%, #fff) 52%,var(--tdb-accent));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
body.light-mode .section.reframe{background:var(--tdb-ground);color:var(--tdb-text)}

/* single progress bar: the old top one from tdb-motion.js is retired — tnavProgress (under the navbar) is the only one */
#tdbm-progress{display:none!important}

/* HERO v6.3: the 3D scan plane ported badly (orange dashed columns) — retire it; the scan panel card carries the scene alone */
.tdbh .ds-scene{display:none!important}
.tdbh .deepscan{min-height:0}

/* ============================================================
   ACCESSIBILITY PASS — 2026-08-13
   Every rule below was written against a measured value, not a
   guess. The comment on each says what it read before the fix.
   ============================================================ */

/* --- Light mode: bands that stay dark need light text ---------------------
   .tdb-belt sets a dark background but never sets a colour, so the global
   light-mode text rule painted its contents near-black: a 60-item capability
   ticker at 1.12:1, i.e. invisible. Giving the band its own colour also makes
   the `inherit` rule above resolve to something readable. */
body.light-mode .tdb-belt{color:var(--tdb-text)}

/* Language switcher in light mode.
   The previous attempt repainted the TEXT to var(--tdb-text) - which is DARK in
   light mode - while leaving the pill dark. Dark on dark: re-measured 1.03:1 on
   every page of the site, so the fix had made it marginally worse than the
   1.01:1 it was written to cure.
   Repaint the SURFACE, then let the text follow the theme as it already did. */
body.light-mode .tdb-lang__btn{
  background:var(--tdb-surface) !important;
  border-color:var(--tdb-border) !important;
}
body.light-mode .tdb-lang__btn,
body.light-mode .tdb-lang__btn *{color:var(--tdb-text) !important}

/* --- Light mode: accent text on white ------------------------------------
   Tags measured 2.54:1 (blue) and 1.92:1 (green) against white. */
body.light-mode .tdb-dvp-tag.blue{color:var(--tdb-accent) !important}
body.light-mode .tdb-dvp-tag.green{color:#047857 !important}

/* Cookie bar: link 1.67:1, reject button 1.32:1 against white. */
body.light-mode .cookie-text a{color:var(--tdb-accent) !important}
body.light-mode #tdb-reject-cookies{color:var(--tdb-on-light) !important}

/* A white-50 utility used on a near-white strip: 1.59:1. */
body.light-mode p.text-white-50,
body.light-mode p.text-white-50 strong{color:#475569 !important}

/* --- Both themes: accents too dim on the near-black panels ---------------
   Measured 3.75:1 and 3.87:1 where 4.5:1 is required. These also sit inside
   .tdbh, so they must beat the inherit rule above. */
body.light-mode .ts2 .tdbh .ds-prog, body.light-mode .ts2 .tdbh .ecu-badge b,
body.light-mode .tdbh .ds-prog, body.light-mode .tdbh .ecu-badge b,
.tdbh .ds-prog, .tdbh .ecu-badge b{color:var(--tdb-accent) !important}

/* Document-mock captions measured 3.56:1 and 3.99:1. The dim value comes from
   --text-3 in tunersuite-cluster-extra.min.css, which loads after this file, so
   an equal-specificity rule here loses. Hence the extra .tdb-doc ancestor. */
.tdb-doc .tdb-doc-hd span,
.tdb-doc .tdb-doc-fig span{color:var(--tdb-body)}

/* --- Target size (WCAG 2.2 §2.5.8, 24x24 minimum) ------------------------
   Measured sizes are in each comment. The slider dots keep their 8px look;
   only the hit area grows, via an overlay that does not affect layout. */
#ts-promo-bar button{min-height:24px}                    /* was 25x22 */
.header-icon{min-width:24px;min-height:24px}             /* was 22x25 */
.ts2-feature-card-link{min-height:24px}                  /* was 162x22 */
.footer-text{min-height:24px}                            /* was 84x23 */
#tdb-policy-strip a{padding-block:3px}                   /* was 20px tall */
#hsDots button{position:relative}                        /* was 8x8 */
#hsDots button::after{content:"";position:absolute;top:50%;left:50%;
  width:24px;height:24px;transform:translate(-50%,-50%)}

/* Blog furniture colours live in single.php, which sets them inline via
   --sp-text-muted; an external rule here loses to that and would be dead. */

/* --- Breadcrumb and footer navigation target size ------------------------
   Measured 32x16 and 25x14 in the breadcrumb, 41x23 in the footer nav. These
   two components are 95% of every undersized control on the site. */
ol.breadcrumb li.breadcrumb-item a{display:inline-block;padding-block:4px}
ol.breadcrumb li.breadcrumb-item,ol.breadcrumb li.breadcrumb-item a{font-size:13px}
ul.footer-nav li.menu-item a{display:inline-block;padding-block:1px}

/* --- The dark palette written inline into content, mapped for light mode ---
   Article and guide bodies carry style="color: #fff" and the rest of the dark
   theme's greys directly in their HTML — 59 such elements in a single article.
   An inline style beats every stylesheet, so in light mode those headings were
   white on near-white: measured 1.00:1.

   This lives here rather than in single.php because pages use a different
   template and had exactly the same content, unreadable in exactly the same
   way. Scoped to <main> so it only touches page content, and each colour is
   mapped to its light-mode counterpart rather than flattened, so an accent
   stays an accent. */
body.light-mode main [style*="color: #fff"],
body.light-mode main [style*="color:#fff"]{color:var(--tdb-on-light) !important}
body.light-mode main [style*="color: var(--tdb-text)"],
body.light-mode main [style*="color:var(--tdb-text)"],
body.light-mode main [style*="color: var(--tdb-text)"],
body.light-mode main [style*="color:var(--tdb-text)"],
body.light-mode main [style*="color: var(--tdb-body)"],
body.light-mode main [style*="color:var(--tdb-body)"],
body.light-mode main [style*="color: var(--tdb-body)"],
body.light-mode main [style*="color:var(--tdb-body)"]{color:var(--tdb-on-light) !important}
body.light-mode main [style*="color: var(--tdb-accent)"],
body.light-mode main [style*="color:var(--tdb-accent)"],
body.light-mode main [style*="color: #7dd3fc"],
body.light-mode main [style*="color:#7dd3fc"]{color:var(--tdb-accent) !important}
body.light-mode main [style*="color: var(--tdb-success)"],
body.light-mode main [style*="color:var(--tdb-success)"]{color:#047857 !important}
body.light-mode main [style*="color: var(--tdb-warning)"],
body.light-mode main [style*="color:var(--tdb-warning)"]{color:#b45309 !important}
body.light-mode main [style*="color: var(--tdb-danger)"],
body.light-mode main [style*="color:var(--tdb-danger)"]{color:var(--tdb-danger) !important}

/* --- Tables in article and guide content, on a phone -----------------------
   Wide comparison tables squeezed into a 390px viewport gave cells of about
   nine characters per line — 92 of the 94 collapsed-column defects on the whole
   site, every one of them at 390px and invisible at desktop width. Let the
   table scroll sideways instead of crushing its columns; a minimum cell width
   keeps each column readable while it scrolls. */
@media (max-width: 768px) {
  /* Product pages and article bodies render outside <main>, so the first
     version of this rule missed 76 cells across twelve pages while reading as
     though it covered them. */
  main table,
  .product-full-content table,
  article table,
  .entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  main table td, main table th,
  .product-full-content table td, .product-full-content table th,
  article table td, article table th,
  .entry-content table td, .entry-content table th {
    /* 150px is the cell box; its padding comes off that, leaving about
       126 usable pixels, which still crushed the column. */
    min-width: 180px;
    white-space: normal;
  }
}

/* --- Keyboard focus -------------------------------------------------------
   Every input, select and textarea on the site had its outline removed with
   nothing put back: twelve fields on the contact form alone, where anyone
   navigating by keyboard has no way to see where they are. :focus-visible
   shows the ring only for keyboard use, so nothing changes for a mouse. */
/* Form controls anywhere — the header search sits outside <main>, so a
   main-scoped rule left it with no focus ring at all. */
:is(input, select, textarea):focus-visible,
main :is(input, select, textarea, button, a, [tabindex]):focus-visible,
.tdb-lang__btn:focus-visible,
header :is(button, a):focus-visible,
footer :is(button, a):focus-visible {
  outline: 2px solid var(--tdb-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
body.light-mode main :is(input, select, textarea, button, a, [tabindex]):focus-visible,
body.light-mode header :is(button, a):focus-visible,
body.light-mode footer :is(button, a):focus-visible {
  outline-color: var(--tdb-accent);
}

/* A prose font-size floor was tried here and did not win against the many
   per-component rules that set 13-14px; rather than leave a rule that looks
   like a fix and does nothing, it is removed. Card and caption text at 13-14px
   is a deliberate choice in this design — only genuinely tiny text is flagged. */

/* --- Last contrast clusters, each measured ------------------------------- */

/* The subscription note on the three hosting products sits in a light amber
   box but inherited the dark theme's pale grey text: 2.12:1. This box is light
   in both themes, so its text is dark in both. (My own edit earlier today.) */
.ts-hosting-product p[style*="fff3e0"],
.ts-hosting-product p[style*="FFF3E0"],
.ts-hosting-product p[style*="fff3e0"] strong,
.ts-hosting-product p[style*="FFF3E0"] strong { color: var(--tdb-on-light); }

/* #2563eb is the brand blue and reads 3.75-3.88:1 on the near-black panels —
   under the 4.5:1 needed for body-size text. The lighter tint is the same hue
   at 7:1; light mode keeps the deeper blue, which is already fine on white. */
/* The `body ` prefix is deliberate. A bare `.ts-eyebrow` here loses to two
   rules of identical specificity that come later — one in a stylesheet loaded
   after this file, one in a <style> block inside the page — so the same fix
   was written twice and did nothing both times. One element in the selector
   settles it regardless of order. */
body :is(.ts-eyebrow, .ts-flow-num),
body .ds-verdict b.hl { color: var(--tdb-accent); }
body.light-mode :is(.ts-eyebrow, .ts-flow-num) { color: var(--tdb-accent); }

/* Slate-500 on the near-black about page reads 4.13:1, just under 4.5. No
   light-mode pair: that section keeps its dark background in both themes, and
   the darker colour I first paired with it measured 2.60:1 there. Checked,
   not assumed. */
body :is(.tdba-stat, .tdba-ops-foot) { color: var(--tdb-body); }
/* In light mode the global text rule (body.light-mode span) outranks the line
   above and paints these near-black on their still-dark panel: 1.11:1. They
   need the light colour in BOTH themes, stated with enough specificity to
   hold. */
/* superseded: these sit on the fixed-dark .tdba-ops panel and are inked
   in tdb-light-pro.css. A theme token here paints dark on dark. */
body.light-mode :is(.tdba-stat, .tdba-ops-foot) { color: #9aa3b6; }

/* Emerald-600 on the white chip reads 3.77:1. */
body.light-mode .tdba-chip { color: #047857; }

/* Code-block comments are grey on a light code surface in light mode: 3.18:1. */
body.light-mode :is(.ts-tk-com, .ts-code .ts-tk-com) { color: #475569; }


/* --- Inherited colours that land on their own background ---
   Measured, not guessed. The two buttons inherit Bootstrap's #212529 and sit
   on the dark footer and cookie bar: 1.1:1, invisible in both themes. The
   success green reads 2.5:1 there. The legal contents fails on white only,
   so it is scoped to light mode - darkening it everywhere would break the
   dark theme, which currently passes. */
button#tdb-accept-cookies{color:#fff}
div#newsletter form.tdb-news button.btn-tdbf{color:#fff}
div#newsletter ul.footer-contact li a.text-success{color:var(--tdb-success)}
div.tdbs-cats a.tdbs-cat span{color:var(--tdb-body)}
body.light-mode nav#legal-toc-nav a{color:var(--tdb-muted)}
body.light-mode nav#legal-toc-nav a.is-active,
body.light-mode nav#legal-toc-nav a:hover{color:var(--tdb-accent)}

/* Success green reads 3.8:1 on a white card; 5.5:1 at this weight.
   Light mode only - the dark page already passes. */
body.light-mode .ts2-feature-card [class*="text-success"],
body.light-mode .ts2-contact-grid .ts2-feature-card strong{color:#047857}


/* --- Target size: the three link groups still under 24px ---
   Measured 25x14 and 30x16 in the hero breadcrumb, 23 high in the header
   nav, 22 in the announce link. Padding only, so the hit area grows and
   nothing on the page moves. */
section.tdb-hero > .tdb-hero__inner > nav a{display:inline-block;padding-block:5px}
nav#navLinks > a{display:inline-block;padding-block:1px}
.osw-announce .osw-announce-inner a{display:inline-block;padding-block:1px}
div#wowDots button.wow-dot{position:relative}
div#wowDots button.wow-dot::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}


/* ==========================================================================
   HERO v3 — a photograph behind the headline, and a real demo beside it.
   The layer that used to sit here drew nothing and shaded everything; it is
   gone. The values below are the ones the portal itself uses for its login
   background, so the site and the product look like the same company.
   ========================================================================== */

.hero-photo,
.hero-photo-scrim,
.hero-grain,
.hero-vig { position: absolute; inset: 0; pointer-events: none; }

.hero-photo {
  z-index: 0;
  background-size: cover;
  background-position: center 42%;
  transform: scale(1.06);
  filter: blur(2px);
  opacity: .94;
  animation: tdbKenBurns 46s ease-in-out infinite alternate;
}
@keyframes tdbKenBurns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-2.5%, -2%, 0); }
}

/* Dark where the words are, clear where the picture earns its place. */
.hero-photo-scrim {
  z-index: 1;
  background: linear-gradient(90deg,
              rgba(2, 6, 23, .88) 0%,
              rgba(2, 6, 23, .60) 46%,
              rgba(2, 6, 23, .08) 100%);
}
.hero-grain {
  z-index: 3;
  opacity: .28;
  mix-blend-mode: overlay;
  background-size: 180px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.hero-vig {
  z-index: 3;
  background: radial-gradient(ellipse at 50% 45%, transparent 42%, color-mix(in srgb, var(--tdb-ground) 70%, transparent) 100%);
}
.hero .hero-aura { z-index: 2; }
.hero .hero-slider { position: relative; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
}

/* The price bar is a pill, so it hugs what it says instead of stretching a
   band of empty glass across the column. */
.hero-pricebar {
  width: fit-content;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
}
/* ---- light mode inside the hero ----------------------------------------
   The hero keeps its photograph in both themes, so it stays a dark surface and
   everything on it stays light. The theme's light rules are re-pinned here
   rather than excluded one by one, because the next person to add a light rule
   for a scene should not have to remember this.
   ------------------------------------------------------------------------ */
[data-bs-theme="light"] .hero .sc-actor-label,
body.light-mode .hero .sc-actor-label {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: var(--tdb-text);
}
[data-bs-theme="light"] .hero .sc-caption,
body.light-mode .hero .sc-caption { color: var(--tdb-text); }
[data-bs-theme="light"] .hero .sc-btn,
body.light-mode .hero .sc-btn {
  border-color: color-mix(in srgb, var(--tdb-line) 30%, transparent);
  background: rgba(255, 255, 255, .05);
  color: var(--tdb-text);
}
[data-bs-theme="light"] .hero .sc-btn:hover,
body.light-mode .hero .sc-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
[data-bs-theme="light"] .hero .sc-dot,
body.light-mode .hero .sc-dot { background: rgba(148, 163, 184, .26); }
[data-bs-theme="light"] .hero .sc-dot.is-done,
body.light-mode .hero .sc-dot.is-done { background: color-mix(in srgb, var(--tdb-accent) 55%, transparent); }
[data-bs-theme="light"] .hero .sc-dot.is-current,
body.light-mode .hero .sc-dot.is-current { background: var(--tdb-accent); }
[data-bs-theme="light"] .hero .sc,
body.light-mode .hero .sc { --sc-shadow: 0 60px 120px rgba(0, 0, 0, .78), 0 10px 30px rgba(0, 0, 0, .55); }
/* The licence card keeps its own animated gradient border. Glass over glass
   reads as neither. */

/* ---- the demo, in the hero's compact size ------------------------------
   Two devices need more room than the hero column has, so the stage runs off
   the right edge on purpose and the section clips it. The words underneath
   stay inside the column, where they are read.
   ------------------------------------------------------------------------ */
.hero .hero-visual { overflow: visible; align-items: center; }
/* Short of the slider's arrow: the demo may run off the edge, but not under
   the control the visitor uses to leave it. */
/* The laptop is the portal — the thing being sold — and side by side it could
   only ever be as wide as the column minus a phone, so it was drawn small and
   the right third of it fell off the screen. Stacked, the phone sits in front
   of it, which is where a phone sits next to a laptop on a desk anyway, and
   the screen gets the room. */
/* The stage is sized in one place and the laptop is given exactly that, so
   there is no arithmetic between a percentage and a viewport unit deciding
   whether the right third of the screen falls off the page. -46px puts its
   edge in the gutter, clear of the slider arrow. */
.hero .sc { width: 100%; margin: 0; }
.hero .sc-stage { position: relative; right: -46px; width: clamp(430px, 43vw, 640px); margin-left: auto;
                  justify-content: flex-end; gap: 0; align-items: flex-end; }
/* The phone comes out of the flow and leans on the laptop the way it would on
   a desk, so it costs the screen nothing. */
.hero .sc-actor:first-of-type { position: absolute; left: -80px; bottom: -48px; z-index: 4; margin: 0; }
/* Two labels stacked on one laptop lid is noise. The phone is obviously a
   phone, and the caption underneath says whose it is. */
.hero .sc-actor:first-of-type .sc-actor-label { display: none; }
.hero .sc-actor:last-of-type { flex: 0 0 auto; }
.hero .dv--phone  { --dv-w-ctx: 172px; }
.hero .dv--laptop { --dv-w-ctx: clamp(430px, 43vw, 640px); }

/* A dark screenshot on a dark photograph reads as a smudge. The laptop gets a
   cool rim behind it and a real shadow under it, so the edge of the screen is
   somewhere the eye can land. */
.hero .sc-actor:last-of-type { position: relative; }
.hero .sc-actor:last-of-type::before {
  content: ""; position: absolute; z-index: -1;
  left: 4%; right: -6%; top: 12%; bottom: -10%;
  background: radial-gradient(58% 62% at 55% 50%, color-mix(in srgb, var(--tdb-accent) 30%, transparent), rgba(56,152,255,0) 70%);
  filter: blur(26px); pointer-events: none;
}
.hero .dv--laptop { filter: drop-shadow(0 34px 58px rgba(2,6,23,.72)); }
.hero .dv--laptop img { filter: brightness(1.07) saturate(1.06) contrast(1.03); }
.hero .sc-actor-label { font-size: 11.5px; padding: 6px 11px; }
.hero .sc-caption { margin-top: 16px; max-width: 46ch; text-align: left; font-size: 13.5px; min-height: 2.8em; }
.hero .sc-controls { justify-content: flex-start; margin-top: 2px; max-width: 430px; }
.hero .sc-relay { display: none; }

@media (max-width: 991px) {
  /* An older rule put the visual above the headline. That was fine for a small
     ornament; a twelve-step demo shown before the visitor knows what the product
     is, is not. Words first on a phone. */
  .hero .hero-visual { order: 1; max-width: none; }
  .hero .sc { width: 100%; margin-left: 0; margin-right: 0; }
  .hero .sc-stage { justify-content: center; flex-wrap: wrap; gap: 18px; align-items: center; }
  .hero .sc-stage { position: static; right: auto; width: 100%; margin-left: 0; justify-content: center; flex-wrap: wrap; gap: 18px; align-items: center; }
  .hero .sc-actor:first-of-type { position: static; left: auto; bottom: auto; margin: 0; }
  .hero .dv--laptop { --dv-w-ctx: min(430px, 86vw); }
  .hero .sc-caption { text-align: center; max-width: 100%; }
  .hero .sc-controls { justify-content: center; }
}

/* ==========================================================================
   Two ways in — a band, not a section.

   This was two 300px cards saying "open the demo" and "send us a file", sat
   between the demos and the argument. Both are one-line offers; they get one
   line each. Light mode on this site is a class on the body.
   ========================================================================== */
.tdb-2w{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:26px 30px;border-radius:18px;
  background:color-mix(in srgb, var(--tdb-raised) 55%, transparent);border:1px solid rgba(125,150,200,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tdb-2w-copy{min-width:0}
.tdb-2w-h{margin:6px 0 0;font-size:clamp(20px,2.3vw,27px);line-height:1.2;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;color:#fff}
.tdb-2w-btns{display:flex;gap:12px;flex-wrap:wrap}
.tdb-2w-btns .ts2-btn{white-space:nowrap}
#demo-vs-portal{padding-top:44px!important;padding-bottom:44px!important}
body.light-mode .tdb-2w,[data-bs-theme="light"] .tdb-2w{background:rgba(255,255,255,.72);border-color:color-mix(in srgb, var(--tdb-line) 10%, transparent)}
body.light-mode .tdb-2w-h,[data-bs-theme="light"] .tdb-2w-h{color:var(--tdb-on-light)}
@media(max-width:768px){
  .tdb-2w{flex-direction:column;align-items:stretch;text-align:center;padding:22px}
  .tdb-2w-btns{justify-content:center}
  .tdb-2w-btns .ts2-btn{flex:1 1 220px;justify-content:center}
}

/* The language chips lost their own section; they belong with coverage, which
   was already claiming "11 languages out of the box" one paragraph earlier. */
.tdb-cov-lang-lbl{margin:26px auto 14px;max-width:62ch;text-align:center;color:var(--tdb-body);font-size:15px;line-height:1.6}
.tlang-chips-center{justify-content:center;max-width:920px;margin-left:auto;margin-right:auto}
body.light-mode .tdb-cov-lang-lbl,[data-bs-theme="light"] .tdb-cov-lang-lbl{color:#475569}

/* ==========================================================================
   What you get, what it costs — the four questions, at screen three.

   Four cards, so the grid divides at two columns and at one and never strands
   a card on a half-empty row. Light mode on this site is a class on the body;
   the attribute selector is written too because these files are shared.
   ========================================================================== */
.wyg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wyg-card{padding:26px 28px;border-radius:18px;
  background:color-mix(in srgb, var(--tdb-raised) 50%, transparent);border:1px solid rgba(125,150,200,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wyg-lbl{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tdb-body);background:color-mix(in srgb, var(--tdb-accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 28%, transparent);
  padding:5px 11px;border-radius:999px;margin-bottom:14px}
.wyg-card h3{margin:0 0 10px;font-size:clamp(19px,2vw,23px);line-height:1.25;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;color:#fff}
.wyg-card p{margin:0;color:var(--tdb-body);font-size:15px;line-height:1.65}
.wyg-card-cost h3 b{font-size:1.35em;color:#ff8a3d}
.wyg-card-cost h3 span{display:block;font-size:.78em;font-weight:700;color:#ffb787;margin-top:4px}
.wyg-card-cost{border-color:color-mix(in srgb, var(--tdb-accent) 32%, transparent)}
.wyg-card-keep{border-color:color-mix(in srgb, var(--tdb-success) 30%, transparent)}
.wyg-card-keep .wyg-lbl{color:var(--tdb-success);background:color-mix(in srgb, var(--tdb-success) 10%, transparent);border-color:color-mix(in srgb, var(--tdb-success) 30%, transparent)}
body.light-mode .wyg-card,[data-bs-theme="light"] .wyg-card{background:rgba(255,255,255,.72);border-color:color-mix(in srgb, var(--tdb-line) 10%, transparent)}
body.light-mode .wyg-card-cost,[data-bs-theme="light"] .wyg-card-cost{border-color:color-mix(in srgb, var(--tdb-accent) 30%, transparent)}
body.light-mode .wyg-card-keep,[data-bs-theme="light"] .wyg-card-keep{border-color:rgba(5,150,105,.30)}
body.light-mode .wyg-card h3,[data-bs-theme="light"] .wyg-card h3{color:var(--tdb-on-light)}
body.light-mode .wyg-card p,[data-bs-theme="light"] .wyg-card p{color:#475569}
body.light-mode .wyg-card-cost h3 b,[data-bs-theme="light"] .wyg-card-cost h3 b{color:var(--tdb-accent)}
body.light-mode .wyg-card-cost h3 span,[data-bs-theme="light"] .wyg-card-cost h3 span{color:#9a3412}
body.light-mode .wyg-card-keep .wyg-lbl,[data-bs-theme="light"] .wyg-card-keep .wyg-lbl{color:#047857}
@media(max-width:820px){.wyg{grid-template-columns:minmax(0,1fr)}.wyg-card{padding:22px}}

/* The monthly belongs beside the setup fee, not in a footnote below the fold. */
.ts2-plan-mo{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.45;font-weight:600;color:#ffb787}
body.light-mode .ts2-plan-mo,[data-bs-theme="light"] .ts2-plan-mo{color:#9a3412}
.hero-pricebar .hp-text i{font-style:normal;opacity:.72;font-weight:600}

/* ==========================================================================
   The phone bar.

   51% of the people who open this arrive on a phone, where the pricing section
   began twenty screens down. Price and a way to ask, always in thumb reach.
   Homepage only, phone only; the floating WhatsApp button is lifted clear of
   it and the page gets room at the bottom so the bar never covers the footer.
   ========================================================================== */
.tdb-mbar{display:none}
@media(max-width:768px){
  body.home .tdb-mbar{
    display:flex;align-items:center;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:9990;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb, var(--tdb-band) 96%, transparent);border-top:1px solid rgba(125,150,200,.26);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  body.home .tdb-mbar-price{flex:1 1 auto;min-width:0;color:var(--tdb-text);font-size:13px;line-height:1.25;font-weight:600}
  body.home .tdb-mbar-price b{display:block;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.01em}
  body.home .tdb-mbar-price i{font-style:normal;color:#ffb787;font-weight:700}
  body.home .tdb-mbar-wa,body.home .tdb-mbar-go{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    height:42px;border-radius:11px;text-decoration:none;font-weight:700;font-size:14px}
  body.home .tdb-mbar-wa{width:42px;font-size:20px;color:#fff;background:#25d366}
  body.home .tdb-mbar-go{padding:0 16px;color:var(--tdb-accent-ink);background:linear-gradient(135deg,var(--tdb-accent),var(--tdb-support))}
  body.home .tdb-mbar-wa:focus-visible,body.home .tdb-mbar-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
  body.home{padding-bottom:76px}
  /* The two lift rules that used to live here (bubble to 80px, its nudge to
     148px) are gone: they never once applied, because footer.php carried
     `bottom:24px` inline on the element and an inline style beats any
     stylesheet. The bubble is switched off on this surface further down
     instead - the bar carries its own WhatsApp button. */
  body.light-mode.home .tdb-mbar{background:rgba(255,255,255,.97);border-top-color:color-mix(in srgb, var(--tdb-line) 12%, transparent)}
  body.light-mode.home .tdb-mbar-price{color:var(--tdb-on-light)}
  body.light-mode.home .tdb-mbar-price b{color:var(--tdb-on-light)}
  body.light-mode.home .tdb-mbar-price i{color:#9a3412}
}

/* The phone bar shares the bottom edge with two existing floating controls.
   The language pill sat exactly on top of "See pricing"; it is lifted clear,
   and the announcement bar's own "View pricing" button is redundant on a phone
   now that the bar carries one permanently. */
/* 2026-09-04: lifting the pill to 212px only MOVED the collision. On a 375px
   phone it landed at y=560 - the middle of the hero, on the sentence that sells
   the product ("Your customers order, your tuners deliver, and it prices,
   charges and invoices every job"). Floating chrome belongs stacked in the
   bottom strip, not parked over what someone is reading, so the pill docks just
   above the bar instead.

   The bubble is a different problem with the same cause. Six rules set its
   `bottom` and the one that actually wins puts it 24px off the floor, which is
   1,727px2 on top of the "£699" in the bar. It is also a duplicate: the bar
   carries its own WhatsApp button in thumb reach. So on the phone homepage it
   is switched off rather than nudged again - one WhatsApp entry point, in the
   bar, where the price already is. It stays on every other page and width.

   Both are guarded by tools/audit/mobilechrome.test.mjs, which must run with
   consent seeded: while the consent banner is open `body.tdb-consent-open`
   lifts the bubble 110px clear with !important and HIDES this bug. */
/* Docking the pill just ABOVE the bar (73px) was still wrong: it only moved the
   collision again. The hero CTA is a full-width button, so on a taller phone
   (390x844) it slid down to exactly that band and the pill clipped 426px2 of
   "Get TunerSuite - £699". Anything floating above the bar will eventually hit
   a full-width control, at some viewport height.
   So the pill goes INSIDE the bar's own band, which is chrome already, and the
   bar reserves room for it. Nothing floats over the page content any more. */
@media(max-width:768px){
  body.home .tdb-lang{bottom:calc(11px + env(safe-area-inset-bottom,0px));left:12px}
  /* The pill is compact here: at full size it took 110px of a 375px bar - 29%
     of the width for a control most visitors never touch - and squeezed the
     price into four wrapped lines, growing the bar from 63px to 91px. The
     chevron goes, since a globe with a language code already reads as a
     picker, and the price keeps its two lines. */
  body.home .tdb-lang__btn{padding:7px 10px;font-size:12px}
  body.home .tdb-lang__chev{display:none}
  body.home .tdb-mbar{padding-left:82px}
  body.home #tdb-wa-float,
  body.home .tdb-wa-nudge{display:none}
  body.home .ts2-announce .ts2-announce-cta{display:none}
}

/* Dropping the arrows to the caption line got them off the laptop and put them
   below the fold, which is worse: a control you have to scroll the hero out of
   sight to reach is not a control. They go back to the middle, pinned to the
   edge of the screen instead of the edge of the slider — the slider is inset 44px
   at every width, so one offset holds everywhere — and a size down, so what they
   clip on a narrow screen is the outer bezel rather than the picture. */
@media (min-width: 992px) {
  .hero .hs-arrow { top: 50%; bottom: auto; transform: translateY(-50%);
                    width: clamp(42px, 3.4vw, 54px); height: clamp(42px, 3.4vw, 54px); opacity: .72; }
  .hero .hs-arrow svg { width: 20px; height: 20px; }
  .hero .hs-prev { left: -34px; }
  .hero .hs-next { right: -34px; }
  .hero .hs-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.07); }
  .hero .hs-arrow:active { transform: translateY(-50%) scale(.95); }
}

/* Under about 1320 the gutter runs out before the stage does. */
@media (min-width: 992px) and (max-width: 1330px) {
  .hero .sc-stage { right: -8px; }
}

/* ==========================================================================
   What the monthly is for.

   Four promises, so the grid divides at two columns and at one. A left rule
   rather than a card, because this section is a set of commitments and it
   should not look like another feature grid. */
.bk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 34px; }
.bk-item { padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--tdb-success) 40%, transparent); }
.bk-k { display: block; margin-bottom: 7px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -.01em; color: #fff; }
.bk-item p { margin: 0; color: var(--tdb-body); font-size: 15px; line-height: 1.65; }
.bk-foot { margin: 30px auto 0; max-width: 68ch; text-align: center; color: var(--tdb-muted);
  font-size: 13.5px; line-height: 1.6; }
body.light-mode .bk-item, [data-bs-theme="light"] .bk-item { border-left-color: rgba(5, 150, 105, .40); }
body.light-mode .bk-k, [data-bs-theme="light"] .bk-k { color: var(--tdb-on-light); }
body.light-mode .bk-item p, [data-bs-theme="light"] .bk-item p { color: #475569; }
body.light-mode .bk-foot, [data-bs-theme="light"] .bk-foot { color: var(--tdb-muted); }
@media (max-width: 820px) { .bk { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* On a wide screen the grid stayed at 1180px, so a third of the picture was
   empty on the left while the phone was pressed into the laptop on the right.
   Given the room, the hero takes it: the copy gets its own column, the two
   devices stop riding each other, and there is a real margin down both sides. */
@media (min-width: 1500px) {
  .hero .hero-grid { max-width: min(1560px, 90vw); }
  .hero .sc-stage { right: -20px; }
  .hero .sc-actor:first-of-type { left: -150px; bottom: -40px; }
}

/* Between 1200 and 1500 there is a fixed amount of room and three things
   competing for it, so they are derived from the viewport rather than guessed.
   The laptop's right edge sits 40px off the screen edge; the phone stands 132px
   clear of the laptop, which is the most the headline leaves; the laptop takes
   whatever is between them. Pulling the stage left drags the phone with it,
   which is why all three have to move together. */
@media (min-width: 1200px) and (max-width: 1499px) {
  .hero .sc-stage { right: calc(634px - 50vw); }
  .hero .dv--laptop { --dv-w-ctx: min(600px, 42vw); }
  .hero .sc-actor:first-of-type { left: -90px; }
}

/* On a phone the hero grid was coming out wider than the screen, so the laptop
   hung 13px past the right edge and was quietly clipped. Cap the grid and let
   the stage centre inside it. */
@media (max-width: 991px) {
  .hero .hero-grid { max-width: 100%; }
  .hero .hero-visual { max-width: 100%; }
  .hero .sc-stage { max-width: 100%; }
  .hero .dv--laptop { --dv-w-ctx: min(430px, 82vw); }
}

/* 1440 in particular: the derived offset left the laptop 6px off the screen
   edge, because the stage does not actually start where the grid column ends.
   Measured, not assumed. */
@media (min-width: 1400px) and (max-width: 1499px) {
  .hero .sc-stage { right: calc(662px - 50vw); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero .sc-actor:first-of-type { left: -84px; }
}

/* Below about 1280 the leaning phone runs out of room and starts covering the
   headline, which is worse than any composition. It goes back into the row
   beside the laptop, smaller, and both shrink to fit the column — measured by
   rect intersection against every line of the copy, not by eye. */
@media (min-width: 992px) and (max-width: 1299px) {
  .hero .sc-stage { position: relative; right: 0; justify-content: flex-end;
                    gap: 12px; align-items: flex-end; }
  .hero .sc-actor:first-of-type { position: static; left: auto; bottom: auto; margin: 0; }
  .hero .dv--phone  { --dv-w-ctx: 132px; }
  .hero .dv--laptop { --dv-w-ctx: min(400px, calc(34vw - 60px)); }
}

/* ==========================================================================
   Always on — the night shift.

   Three doors in, one assistant, two ways out, playing as an episode rather
   than sitting there as a diagram.

   The wires are ONE svg overlay whose paths are generated at runtime from the
   real element boxes, in a 1:1 css-pixel viewBox. Nothing here is calibrated
   by hand, so a copy edit, a translation or a new breakpoint cannot pull the
   ends off the things they point at — which is exactly how the previous
   version broke. Orientation is derived too: when the core sits beside the
   doors the wires run across, when it sits under them they run down, so the
   flow survives on a phone instead of being switched off.

   Nothing inside .ns-stage changes height while an episode plays. Motion is
   opacity and transform only, so the geometry stays valid mid-timeline and
   the observer stays quiet.
   ========================================================================== */

.ns {
  --ns-panel:      color-mix(in srgb, var(--tdb-surface) 62%, transparent);
  --ns-panel-b:    rgba(125, 150, 200, .20);
  --ns-tile:       rgba(255, 255, 255, .045);
  --ns-tile-b:     rgba(148, 163, 184, .20);
  --ns-tile-hover: rgba(255, 255, 255, .075);
  --ns-text:       var(--tdb-text);
  --ns-dim:        var(--tdb-body);
  --ns-micro:      #7f8b9e;
  --ns-accent:     var(--tdb-accent);
  --ns-accent-b:   color-mix(in srgb, var(--tdb-accent) 42%, transparent);
  --ns-accent-bg:  color-mix(in srgb, var(--tdb-accent) 13%, transparent);
  --ns-accent-glow: color-mix(in srgb, var(--tdb-accent) 55%, transparent);
  --ns-ok:         var(--tdb-success);
  --ns-ok-b:       color-mix(in srgb, var(--tdb-success) 42%, transparent);
  --ns-ok-glow:    color-mix(in srgb, var(--tdb-success) 40%, transparent);
  --ns-esc:        #ff9d5c;
  --ns-esc-b:      rgba(255, 138, 61, .42);
  --ns-esc-glow:   rgba(255, 138, 61, .38);
  --ns-wire:       rgba(148, 163, 184, .30);
  --ns-wire-live:  rgba(147, 197, 253, .95);
}

/* ---------- stage ---------------------------------------------------- */

.ns-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.02fr) minmax(0, 1.14fr);
  column-gap: clamp(46px, 5.6vw, 96px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 24px;
  background: var(--ns-panel);
  border: 1px solid var(--ns-panel-b);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  isolation: isolate;
}
.ns-stage::before {            /* a soft field behind the assistant */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; width: min(560px, 62%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--tdb-accent) 16%, transparent), transparent 68%);
  opacity: .9;
}
.ns-stage > * { position: relative; z-index: 2; }

.ns-wires { position: absolute; left: 0; top: 0; z-index: 1;
  pointer-events: none; overflow: visible; }
.ns-wire { fill: none; stroke: var(--ns-wire); stroke-width: 1.7;
  stroke-linecap: round; }
.ns-wire-ok  { stroke: color-mix(in srgb, var(--tdb-success) 40%, transparent); }
.ns-wire-esc { stroke: rgba(255, 138, 61, .40); }

/* the lit copy of a wire, drawn on top while a packet is running it */
.ns-wire-live { fill: none; stroke: var(--ns-wire-live); stroke-width: 2.4;
  stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px rgba(147, 197, 253, .75)); }
.ns-wire-live.is-ok  { stroke: #6ee7b7; filter: drop-shadow(0 0 6px rgba(52, 211, 153, .8)); }
.ns-wire-live.is-esc { stroke: #ffb787; filter: drop-shadow(0 0 6px rgba(255, 138, 61, .8)); }

.ns-packet      { opacity: 0; }
.ns-packet-core { fill: var(--tdb-text); }
.ns-packet-halo { fill: rgba(147, 197, 253, .30); }
.ns-packet.is-ok  .ns-packet-core { fill: var(--tdb-text); }
.ns-packet.is-ok  .ns-packet-halo { fill: color-mix(in srgb, var(--tdb-success) 30%, transparent); }
.ns-packet.is-esc .ns-packet-core { fill: var(--tdb-text); }
.ns-packet.is-esc .ns-packet-halo { fill: rgba(255, 138, 61, .30); }

/* ---------- the three doors ------------------------------------------ */

.ns-doors { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ns-rail-lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ns-micro); margin-bottom: 2px; }

.ns-door { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px;
  align-items: center; padding: 11px 14px; border-radius: 15px;
  background: var(--ns-tile); border: 1px solid var(--ns-tile-b);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.ns-door i { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; font-size: 17px;
  color: var(--ns-accent); background: var(--ns-accent-bg);
  border: 1px solid var(--ns-accent-b); transition: transform .35s ease; }
.ns-door b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ns-text);
  letter-spacing: -.005em; }
.ns-door-sub { display: block; font-size: 12.5px; color: var(--ns-dim); margin-top: 1px; }
.ns-door.is-live { background: var(--ns-tile-hover); border-color: var(--ns-accent-b);
  box-shadow: 0 14px 34px -18px var(--ns-accent-glow); }
/* the door's own label steps out of the way while the question sits on it,
   so the two never ghost through each other mid-crossfade */
.ns-door > * { transition: opacity .28s ease; }
.ns-door.is-asking > * { opacity: 0; }
.ns-door.is-live i { transform: scale(1.06); }

/* the question, laid over the door it arrived on — an overlay, so the rail
   never changes height and the wire geometry stays valid */
.ns-ask { position: absolute; left: 0; right: 0; z-index: 3; opacity: 0;
  padding: 11px 14px; border-radius: 15px; pointer-events: none;
  background: linear-gradient(180deg, var(--tdb-raised), var(--tdb-surface));
  border: 1px solid var(--ns-accent-b);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(37, 99, 235, .18); }
.ns-ask span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ns-accent); margin-bottom: 3px; }
.ns-ask p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ns-text); }

/* ---------- the assistant -------------------------------------------- */

.ns-core { text-align: center; padding: 24px 20px 18px; border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tdb-accent) 17%, transparent), color-mix(in srgb, var(--tdb-accent) 5%, transparent));
  border: 1px solid var(--ns-accent-b);
  box-shadow: 0 34px 74px -38px var(--ns-accent-glow); }
.ns-core-ic { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 50px; height: 50px; border-radius: 15px;
  margin-bottom: 11px; font-size: 23px; color: #bfdbfe;
  background: color-mix(in srgb, var(--tdb-accent) 24%, transparent); border: 1px solid color-mix(in srgb, var(--tdb-accent) 40%, transparent); }
.ns-core-ic::after { content: ""; position: absolute; inset: -6px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--tdb-accent) 55%, transparent); opacity: 0; }
.ns-core > b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 800;
  letter-spacing: -.015em; color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.ns-core-sub { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ns-dim); }
.ns-core-sub em { font-style: normal; color: #ffb787 !important; font-weight: 700; }

.ns-knows { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 13px 0 0; padding: 0; list-style: none; }
.ns-knows li { font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  color: #bfdbfe; padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--tdb-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tdb-accent) 30%, transparent); }

.ns-status { display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; height: 46px;
  border-top: 1px solid color-mix(in srgb, var(--tdb-line) 16%, transparent); }
.ns-status i { flex: none; margin-top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ns-micro); }
.ns-status.is-busy i { background: var(--ns-accent); }
.ns-status.is-ok   i { background: var(--ns-ok); }
.ns-status.is-esc  i { background: var(--ns-esc); }
.ns-status span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; height: 34px; font-size: 12.5px; line-height: 1.35; color: var(--ns-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- the two ways out ----------------------------------------- */

.ns-outs { display: flex; flex-direction: column; gap: 12px; }
.ns-out { padding: 15px 17px; border-radius: 16px; background: var(--ns-tile);
  border: 1px solid var(--ns-tile-b);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.ns-out-ok  { border-color: color-mix(in srgb, var(--tdb-success) 28%, transparent); }
.ns-out-esc { border-color: rgba(255, 138, 61, .28); }
.ns-out-ok.is-live  { border-color: var(--ns-ok-b);
  background: color-mix(in srgb, var(--tdb-success) 7%, transparent); box-shadow: 0 18px 42px -22px var(--ns-ok-glow); }
.ns-out-esc.is-live { border-color: var(--ns-esc-b);
  background: rgba(255, 138, 61, .07); box-shadow: 0 18px 42px -22px var(--ns-esc-glow); }

.ns-k { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; }
.ns-out-ok  .ns-k { color: var(--ns-ok); }
.ns-out-esc .ns-k { color: var(--ns-esc); }
.ns-out p { margin: 0; font-size: 13.8px; line-height: 1.55; color: var(--ns-dim); }

/* the escalation ladder — always rendered, so nothing reflows; the steps
   simply light in order when an episode takes this branch */
.ns-ladder { display: flex; flex-direction: column; gap: 0; margin: 11px 0 0;
  padding: 0; list-style: none; }
.ns-ladder li { position: relative; display: flex; align-items: center; gap: 9px;
  padding: 4px 0 4px 0; font-size: 12.5px; line-height: 1.3; color: var(--ns-dim);
  transition: color .3s ease; }
.ns-ladder li::before { content: ""; flex: none; width: 7px; height: 7px;
  border-radius: 50%; background: rgba(148, 163, 184, .40);
  box-shadow: 0 0 0 0 var(--ns-esc-glow);
  transition: background .3s ease, box-shadow .3s ease; }
.ns-ladder li::after { content: ""; position: absolute; left: 3px; top: 20px; bottom: -4px;
  width: 1px; background: rgba(148, 163, 184, .22); }
.ns-ladder li:last-child::after { display: none; }
.ns-ladder li.is-on { color: var(--ns-text); font-weight: 600; }
.ns-ladder li.is-on::before { background: var(--ns-esc);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .18); }

/* ---------- the night strip ------------------------------------------ */

.ns-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px;
  align-items: center; margin-top: 14px; padding: 14px clamp(18px, 2.2vw, 26px);
  border-radius: 18px; background: var(--ns-panel); border: 1px solid var(--ns-panel-b); }
.ns-strip-h { font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ns-micro); margin: 0 0 8px; }
.ns-log { margin: 0; padding: 0; list-style: none; height: 84px; overflow: hidden; }
.ns-log li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0;
  font-size: 12.8px; line-height: 1.35; color: var(--ns-dim); }
.ns-log time { flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--ns-micro); }
.ns-log b { font-weight: 600; color: var(--ns-text); }
.ns-log li[data-kind="ok"]  b { color: #6ee7b7; }
.ns-log li[data-kind="esc"] b { color: #ffb787; }
.ns-log-empty { color: var(--ns-micro); font-style: italic; }

.ns-tally { display: flex; gap: 22px; }
.ns-tally div { text-align: right; }
.ns-tally b { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--ns-text); }
.ns-tally-ok  b { color: var(--ns-ok); }
.ns-tally-esc b { color: var(--ns-esc); }
.ns-tally span { display: block; margin-top: 5px; font-size: 11px; color: var(--ns-micro); }

/* ---------- the six, ranked ------------------------------------------ */

.ns-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-top: 26px; }
.ns-tile { position: relative; overflow: hidden; padding: 22px 24px; border-radius: 18px;
  background: var(--ns-tile); border: 1px solid var(--ns-tile-b);
  transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.ns-tile:hover { transform: translateY(-3px); background: var(--ns-tile-hover);
  border-color: color-mix(in srgb, var(--tdb-accent) 34%, transparent); }
.ns-tile-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 13px; font-size: 19px;
  color: var(--ns-accent); background: var(--ns-accent-bg);
  border: 1px solid var(--ns-accent-b); }
.ns-tile h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 800;
  letter-spacing: -.012em; color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.ns-tile p { margin: 0; font-size: 14.4px; line-height: 1.62; color: var(--ns-dim); }

/* the two halves of the same evening, which is the whole argument */
.ns-vs { display: grid; gap: 10px; margin: 18px 0 0; }
.ns-vs > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px;
  align-items: baseline; padding: 11px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--tdb-ground) 22%, transparent); border: 1px solid var(--ns-tile-b); }
.ns-vs dt { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ns-micro); }
.ns-vs dd { margin: 0; font-size: 13.6px; line-height: 1.5; color: var(--ns-dim); }
.ns-vs .is-with { background: color-mix(in srgb, var(--tdb-success) 7%, transparent); border-color: color-mix(in srgb, var(--tdb-success) 26%, transparent); }
.ns-vs .is-with dt { color: var(--ns-ok); }
.ns-vs .is-with dd { color: var(--ns-text); }

/* the money tile — two wide, two tall, and the only one carrying a visual */
.ns-tile-lead { grid-column: span 2; grid-row: span 2; display: flex;
  flex-direction: column; padding: 26px 28px;
  background: linear-gradient(158deg, color-mix(in srgb, var(--tdb-accent) 14%, transparent), rgba(255, 255, 255, .04) 58%);
  border-color: color-mix(in srgb, var(--tdb-accent) 30%, transparent); }
.ns-tile-lead h3 { font-size: 23px; margin-bottom: 10px; }
.ns-tile-lead p { font-size: 15.2px; max-width: 46ch; }
.ns-mini { display: flex; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 22px; }
.ns-mini-step { flex: 1 1 0; min-width: 0; padding: 12px 13px; border-radius: 13px;
  background: color-mix(in srgb, var(--tdb-ground) 28%, transparent); border: 1px solid var(--ns-tile-b);
  transition: border-color .3s ease, background .3s ease; }
.ns-mini-step b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ns-text); }
.ns-mini-step span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ns-micro);
  font-family: 'JetBrains Mono', ui-monospace, monospace; }
.ns-mini-step.is-on { border-color: var(--ns-ok-b); background: color-mix(in srgb, var(--tdb-success) 10%, transparent); }
.ns-mini-step.is-on b { color: #6ee7b7; }

.ns-tile-quiet { background: rgba(255, 255, 255, .025);
  border-style: dashed; border-color: color-mix(in srgb, var(--tdb-line) 22%, transparent); }
.ns-tile-quiet .ns-tile-ic { color: var(--ns-dim);
  background: rgba(148, 163, 184, .10); border-color: color-mix(in srgb, var(--tdb-line) 22%, transparent); }

/* ---------- light mode ------------------------------------------------
   The site toggles body.light-mode; html[data-theme] and data-bs-theme are
   carried too because both conventions exist across this codebase and a
   missing pair is exactly what left the old wires invisible on white. */

body.light-mode .ns,
html[data-theme="light"] .ns,
[data-bs-theme="light"] .ns {
  --ns-panel:      rgba(255, 255, 255, .78);
  --ns-panel-b:    color-mix(in srgb, var(--tdb-surface) 10%, transparent);
  --ns-tile:       rgba(15, 23, 42, .035);
  --ns-tile-b:     rgba(15, 23, 42, .12);
  --ns-tile-hover: rgba(15, 23, 42, .06);
  --ns-text:       var(--tdb-on-light);
  --ns-dim:        #475569;
  --ns-micro:      #556173;
  --ns-accent:     var(--tdb-accent);
  --ns-accent-b:   color-mix(in srgb, var(--tdb-accent) 30%, transparent);
  --ns-accent-bg:  color-mix(in srgb, var(--tdb-accent) 9%, transparent);
  --ns-accent-glow: color-mix(in srgb, var(--tdb-accent) 35%, transparent);
  --ns-ok:         #047857;
  --ns-ok-b:       rgba(4, 120, 87, .40);
  --ns-ok-glow:    rgba(4, 120, 87, .28);
  --ns-esc:        var(--tdb-accent);
  --ns-esc-b:      color-mix(in srgb, var(--tdb-accent) 40%, transparent);
  --ns-esc-glow:   color-mix(in srgb, var(--tdb-accent) 26%, transparent);
  --ns-wire:       rgba(71, 85, 105, .38);
  --ns-wire-live:  color-mix(in srgb, var(--tdb-accent) 95%, transparent);
}
/* Two of the site's own light-mode rules land inside this section below AA:
   the section intro is painted #9ba3b4 with !important fleet-wide (2.31:1 on
   a light page) and the eyebrow sits at 4.34:1. Corrected here for this
   section only — the same two classes are used across the homepage and want
   the same treatment globally. */
body.light-mode .ns .ts2-section-sub,
html[data-theme="light"] .ns .ts2-section-sub,
[data-bs-theme="light"] .ns .ts2-section-sub { color: #475569 !important; }
body.light-mode .ns .ts2-mini-eyebrow,
html[data-theme="light"] .ns .ts2-mini-eyebrow,
[data-bs-theme="light"] .ns .ts2-mini-eyebrow { color: var(--tdb-accent) !important; }

body.light-mode .ns-stage::before,
html[data-theme="light"] .ns-stage::before,
[data-bs-theme="light"] .ns-stage::before { opacity: .5; }
body.light-mode .ns-wire-ok,
html[data-theme="light"] .ns-wire-ok,
[data-bs-theme="light"] .ns-wire-ok  { stroke: rgba(4, 120, 87, .45); }
body.light-mode .ns-wire-esc,
html[data-theme="light"] .ns-wire-esc,
[data-bs-theme="light"] .ns-wire-esc { stroke: color-mix(in srgb, var(--tdb-accent) 45%, transparent); }
body.light-mode .ns-wire-live,
html[data-theme="light"] .ns-wire-live,
[data-bs-theme="light"] .ns-wire-live { filter: drop-shadow(0 0 5px rgba(29, 78, 216, .5)); }
body.light-mode .ns-wire-live.is-ok,
html[data-theme="light"] .ns-wire-live.is-ok,
[data-bs-theme="light"] .ns-wire-live.is-ok  { stroke: #047857; filter: drop-shadow(0 0 5px rgba(4, 120, 87, .5)); }
body.light-mode .ns-wire-live.is-esc,
html[data-theme="light"] .ns-wire-live.is-esc,
[data-bs-theme="light"] .ns-wire-live.is-esc { stroke: var(--tdb-accent); filter: drop-shadow(0 0 5px rgba(194, 65, 12, .5)); }
body.light-mode .ns-packet-core,
html[data-theme="light"] .ns-packet-core,
[data-bs-theme="light"] .ns-packet-core { fill: var(--tdb-accent); }
body.light-mode .ns-packet-halo,
html[data-theme="light"] .ns-packet-halo,
[data-bs-theme="light"] .ns-packet-halo { fill: color-mix(in srgb, var(--tdb-accent) 25%, transparent); }
body.light-mode .ns-packet.is-ok .ns-packet-core,
html[data-theme="light"] .ns-packet.is-ok .ns-packet-core,
[data-bs-theme="light"] .ns-packet.is-ok .ns-packet-core { fill: #047857; }
body.light-mode .ns-packet.is-esc .ns-packet-core,
html[data-theme="light"] .ns-packet.is-esc .ns-packet-core,
[data-bs-theme="light"] .ns-packet.is-esc .ns-packet-core { fill: var(--tdb-accent); }
body.light-mode .ns-core > b,
html[data-theme="light"] .ns-core > b,
[data-bs-theme="light"] .ns-core > b,
body.light-mode .ns-tile h3,
html[data-theme="light"] .ns-tile h3,
[data-bs-theme="light"] .ns-tile h3 { color: var(--tdb-on-light); }
body.light-mode .ns-core-sub em,
html[data-theme="light"] .ns-core-sub em,
[data-bs-theme="light"] .ns-core-sub em { color: #9a3412 !important; }
body.light-mode .ns-core-ic,
html[data-theme="light"] .ns-core-ic,
[data-bs-theme="light"] .ns-core-ic { color: var(--tdb-accent); background: color-mix(in srgb, var(--tdb-accent) 12%, transparent); }
body.light-mode .ns-knows li,
html[data-theme="light"] .ns-knows li,
[data-bs-theme="light"] .ns-knows li { color: var(--tdb-accent); background: color-mix(in srgb, var(--tdb-accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--tdb-accent) 22%, transparent); }
body.light-mode .ns-ask,
html[data-theme="light"] .ns-ask,
[data-bs-theme="light"] .ns-ask { background: #fff; box-shadow: 0 20px 40px -22px rgba(15, 23, 42, .35); }
body.light-mode .ns-log li[data-kind="ok"] b,
html[data-theme="light"] .ns-log li[data-kind="ok"] b,
[data-bs-theme="light"] .ns-log li[data-kind="ok"] b { color: #047857; }
body.light-mode .ns-log li[data-kind="esc"] b,
html[data-theme="light"] .ns-log li[data-kind="esc"] b,
[data-bs-theme="light"] .ns-log li[data-kind="esc"] b { color: var(--tdb-accent); }
body.light-mode .ns-mini-step,
html[data-theme="light"] .ns-mini-step,
[data-bs-theme="light"] .ns-mini-step,
body.light-mode .ns-vs > div,
html[data-theme="light"] .ns-vs > div,
[data-bs-theme="light"] .ns-vs > div { background: rgba(255, 255, 255, .7); }
body.light-mode .ns-vs .is-with,
html[data-theme="light"] .ns-vs .is-with,
[data-bs-theme="light"] .ns-vs .is-with { background: rgba(4, 120, 87, .08); }
body.light-mode .ns-mini-step.is-on b,
html[data-theme="light"] .ns-mini-step.is-on b,
[data-bs-theme="light"] .ns-mini-step.is-on b { color: #047857; }

/* ---------- narrower, then a phone ------------------------------------
   The stage turns to run downwards. The wires are NOT switched off — they
   are rebuilt vertically from the same element boxes, so the story is the
   same one on a 390px screen as on a 1920px one. */

@media (max-width: 1180px) {
  .ns-stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(38px, 6vw, 62px);
    column-gap: 0; }
  .ns-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ns-rail-lbl { grid-column: 1 / -1; margin-bottom: 0; }
  .ns-door { grid-template-columns: 32px minmax(0, 1fr); padding: 10px 12px; }
  .ns-door i { width: 32px; height: 32px; font-size: 15px; }
  .ns-core { max-width: 520px; margin: 0 auto; width: 100%; }
  .ns-outs { flex-direction: row; }
  .ns-outs .ns-out { flex: 1 1 0; min-width: 0; }
  .ns-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ns-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns-tile-lead { grid-column: span 2; grid-row: span 1; }
  .ns-strip { grid-template-columns: minmax(0, 1fr); }
  .ns-tally { justify-content: flex-start; }
  .ns-tally div { text-align: left; }
}
@media (max-width: 720px) {
  .ns-vs > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  /* lanes down the right for the three incoming wires */
  .ns-doors { grid-template-columns: minmax(0, 1fr); padding-right: 38px; }
  /* a channel down the side for the escalation wire to take */
  .ns-outs { flex-direction: column; padding-left: 30px; }
  .ns-bento { grid-template-columns: minmax(0, 1fr); }
  .ns-tile-lead { grid-column: span 1; }
  .ns-log { height: 108px; }
  .ns-tally { gap: 16px; }
  .ns-tally b { font-size: 19px; }
}

/* ---------- reduced motion -------------------------------------------
   The finished state, not a blank one: wires drawn, both outcomes lit, the
   ladder open, the strip already carrying its night. */
@media (prefers-reduced-motion: reduce) {
  .ns-wire-live, .ns-packet, .ns-ask { display: none !important; }
  .ns-ladder li { color: var(--ns-text); }
  .ns-ladder li::before { background: var(--ns-esc); }
  .ns-tile, .ns-door, .ns-out, .ns-mini-step { transition: none !important; }
}

/* ==========================================================================
   Hero slide six — AI File Match.

   It used to be "one plate in, the whole car quoted", which is slide two in
   different words. This is the journey the product actually sells: a locked
   read arrives, it is matched against work already done, and it leaves locked
   again — the decrypt/tune/re-encrypt loop every rival makes you do by hand.
   Same container language as the vehicle-hub visual it replaces, same 9s
   staged loop, same reduced-motion exit.
   ========================================================================== */
.hs-fm{width:min(400px,100%);display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(165deg,var(--tdb-surface),var(--tdb-band));border:1px solid var(--line-strong);
  border-radius:20px;padding:18px;box-shadow:0 46px 92px -56px rgba(0,0,0,.9)}
.hs-fm .fr1,.hs-fm .fr2,.hs-fm .fr3,.hs-fm .fr4,.hs-fm .fr5{opacity:0}
.fm-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong)}
.fm-row b{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--text)}
.fm-row i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap}
.fm-doc{flex:0 0 auto;width:13px;height:17px;border-radius:2px;background:currentColor;opacity:.55;
  clip-path:polygon(0 0,68% 0,100% 26%,100% 100%,0 100%)}
.fm-in .fm-doc{color:#8fb7ff}
.fm-out{border-color:color-mix(in srgb, var(--tdb-success) 36%, transparent)}
.fm-out .fm-doc{color:var(--tdb-success)}
.fm-tiers{display:flex;flex-wrap:wrap;gap:6px}
.fm-t{font-size:10px;font-weight:600;padding:5px 9px;border-radius:999px;color:var(--muted);
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong)}
.fm-t.is-hit{color:var(--tdb-text);background:color-mix(in srgb, var(--tdb-accent) 14%, transparent);border-color:color-mix(in srgb, var(--tdb-accent) 48%, transparent)}
.fm-gate{display:flex;align-items:baseline;gap:8px;padding:8px 11px;border-radius:11px;
  background:color-mix(in srgb, var(--tdb-accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-accent) 30%, transparent)}
.fm-gate b{font-family:"Space Grotesk",sans-serif;font-size:12px;color:#9cc6ff}
.fm-gate i{font-style:normal;font-size:10.5px;color:var(--muted);line-height:1.4}
.fm-paid{display:flex;align-items:baseline;gap:8px;padding:9px 11px;border-radius:11px;
  background:color-mix(in srgb, var(--tdb-success) 10%, transparent);border:1px solid color-mix(in srgb, var(--tdb-success) 34%, transparent)}
.fm-paid b{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:#7df3bd}
.fm-paid b::before{content:"�3a0"}
.fm-paid i{font-style:normal;font-size:10.5px;color:var(--muted)}
.hs-slide.is-active .fr1{animation:vhIn1 9s var(--ease) infinite}
.hs-slide.is-active .fr2{animation:vhIn2 9s var(--ease) infinite}
.hs-slide.is-active .fr3{animation:vhIn3 9s var(--ease) infinite}
.hs-slide.is-active .fr4{animation:vhIn4 9s var(--ease) infinite}
.hs-slide.is-active .fr5{animation:vhIn5 9s var(--ease) infinite}
@keyframes vhIn5{0%,62%{opacity:0;transform:translateY(6px)}67%,96%{opacity:1;transform:none}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hs-slide.is-active .fr1,.hs-slide.is-active .fr2,.hs-slide.is-active .fr3,
  .hs-slide.is-active .fr4,.hs-slide.is-active .fr5{animation:none;opacity:1;transform:none}
}

/* The reseller line under the early-adopter meter. */
.tdb-ea-resell{margin:14px 0 0;text-align:center;font-size:13.5px;line-height:1.6;color:var(--tdb-body)}
.tdb-ea-resell a{color:#ffb787;text-decoration:underline;text-underline-offset:3px}
.tdb-ea-resell a:hover{color:#fff}
body.light-mode .tdb-ea-resell,[data-bs-theme="light"] .tdb-ea-resell{color:#475569}
body.light-mode .tdb-ea-resell a,[data-bs-theme="light"] .tdb-ea-resell a{color:#9a3412}

/* One gateway on the shop means a refused card is the end of the road. Until
   another is switched on, the page at least says there is another way. */
.tdb-paylines{margin:22px auto 0;max-width:70ch;text-align:center;font-size:14px;line-height:1.65;color:var(--tdb-body)}
.tdb-paylines strong{color:var(--tdb-text);font-weight:700}
.tdb-paylines a{color:var(--tdb-success);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.tdb-paylines a:hover{color:#7df3bd}
body.light-mode .tdb-paylines,[data-bs-theme="light"] .tdb-paylines{color:#475569}
body.light-mode .tdb-paylines strong,[data-bs-theme="light"] .tdb-paylines strong{color:var(--tdb-on-light)}
body.light-mode .tdb-paylines a,[data-bs-theme="light"] .tdb-paylines a{color:#047857}

/* Hero proof row - three checkable facts under the claim, before the price.
   All tokens; the hero pins its own palette because it sits over a photograph,
   so this stays legible in both themes without a second rule. */
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 18px;padding-bottom:15px;
  border-bottom:1px solid color-mix(in srgb, var(--tdb-line) 55%, transparent);
  font-size:13px;line-height:1.5;color:var(--tdb-muted)}
.hero-proof span{display:inline-flex;align-items:baseline;gap:6px}
.hero-proof b{color:var(--tdb-text);font-weight:700;letter-spacing:-.01em}
@media (max-width:640px){.hero-proof{gap:6px 15px;font-size:12px;padding-bottom:12px;margin-bottom:14px}}

/* The mode chips sit on a translucent panel over the photograph, where the
   muted tier measures under 4.5:1. Over an image the ground is a range rather
   than a value, so the quietest text in the hero uses the brightest tier. */
.hero-pricebar .hp-chips i{color:var(--tdb-text);opacity:.92}

/* ===== sections added 2026-08-31 ======================================== */

/* The fork. Two honest routes and a way past them, at the point where the
   reader has just been told the price and is deciding whether to keep going. */
.tdb-fork{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;margin:20px 0 2px}
.tdb-fork-lbl{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tdb-muted);margin-right:2px}
.tdb-fork a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:999px;border:1px solid var(--tdb-border);background:var(--tdb-surface);
  color:var(--tdb-text);font-size:.93rem;font-weight:600;text-decoration:none;
  transition:border-color .18s var(--tdb-ease-out),background .18s var(--tdb-ease-out)}
.tdb-fork a:hover,.tdb-fork a:focus-visible{border-color:var(--tdb-accent);
  background:var(--tdb-surface-hover);color:var(--tdb-text)}
.tdb-fork a i{color:var(--tdb-accent)}

/* The facts, as sentences. Two columns so twelve lines do not read as a wall,
   one column the moment that would make the measure too short. */
.tdb-facts{margin-top:32px;padding:26px 28px;border:1px solid var(--tdb-border);
  border-radius:var(--tdb-radius-xl);background:var(--tdb-sunk)}
.tdb-facts-h{margin:0 0 15px;font-size:1.05rem;color:var(--tdb-text)}
.tdb-facts-list{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.tdb-facts-list li{break-inside:avoid;margin:0 0 11px;padding-left:19px;position:relative;
  color:var(--tdb-body);font-size:.94rem;line-height:1.58}
.tdb-facts-list li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--tdb-accent)}
.tdb-facts-when{margin:16px 0 0;font-size:.81rem;color:var(--tdb-muted)}
@media(max-width:860px){.tdb-facts-list{columns:1}.tdb-facts{padding:22px 20px}}

/* What happens after you buy. Numbered because it is a sequence in time, and
   the fear it answers is about time. */
.tdb-ayb{margin-top:34px;padding:26px 28px;border:1px solid var(--tdb-border);
  border-radius:var(--tdb-radius-xl);background:var(--tdb-surface)}
.tdb-ayb-h{margin:0 0 20px;font-size:1.12rem;color:var(--tdb-text)}
.tdb-ayb-steps{counter-reset:ayb;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.tdb-ayb-steps li{counter-increment:ayb;position:relative;padding-top:36px;
  color:var(--tdb-muted);font-size:.93rem;line-height:1.58}
.tdb-ayb-steps li::before{content:counter(ayb);position:absolute;top:0;left:0;
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;background:var(--tdb-accent);color:var(--tdb-accent-ink)}
.tdb-ayb-steps b{display:block;margin-bottom:5px;color:var(--tdb-text);font-size:.99rem}

/* The network pillar. A flow, then a table - a table because what a reader
   wants here is to compare four settings, and four cards would not let them. */
.tdb-net-flow{list-style:none;margin:0 0 32px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px}
.tdb-net-flow li{padding:22px;border:1px solid var(--tdb-border);
  border-radius:var(--tdb-radius-xl);background:var(--tdb-surface)}
.tdb-net-n{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  margin-bottom:13px;background:var(--tdb-wash-accent);color:var(--tdb-accent);
  font-weight:700;font-size:.87rem}
.tdb-net-flow b{display:block;margin-bottom:6px;color:var(--tdb-text);font-size:1rem}
.tdb-net-flow p{margin:0;color:var(--tdb-muted);font-size:.92rem;line-height:1.56}
.tdb-net-ctl{padding:24px 26px;border:1px solid var(--tdb-border);
  border-radius:var(--tdb-radius-xl);background:var(--tdb-sunk)}
.tdb-net-ctl-h{margin:0 0 8px;font-size:1.05rem;color:var(--tdb-text)}
.tdb-net-tbl{width:100%;border-collapse:collapse}
.tdb-net-tbl th,.tdb-net-tbl td{text-align:left;vertical-align:top;padding:14px 0;
  border-top:1px solid var(--tdb-hair);font-size:.94rem;line-height:1.58}
.tdb-net-tbl tr:first-child th,.tdb-net-tbl tr:first-child td{border-top:0}
.tdb-net-tbl th{width:32%;padding-right:26px;color:var(--tdb-text);font-weight:650}
.tdb-net-tbl td{color:var(--tdb-body)}
.tdb-net-foot{margin:22px 0 0;color:var(--tdb-muted);font-size:.94rem;
  max-width:var(--tdb-measure)}
@media(max-width:640px){
  .tdb-net-tbl th,.tdb-net-tbl td{display:block;width:auto;padding-right:0}
  .tdb-net-tbl th{padding-bottom:4px}
  .tdb-net-tbl td{padding-top:0;border-top:0}
  .tdb-net-ctl,.tdb-ayb{padding:22px 20px}
}

/* Bootstrap utility classes used directly in page content sit outside the token
   layer, so they keep Bootstrap's own pairings: the body colour on the primary
   blue measured 4.25:1, and the info cyan on white 1.96:1 - an all but invisible
   call to action on the pricing page. Corrected in the site's vocabulary rather
   than by editing Bootstrap, which other things depend on. */
/* The contact page carries its own <style> block inside the page content, with
   hardcoded colours that never reached the token layer. Its footer strip is
   #909cb0 on white - 2.55:1 in rendered pixels, under a comment claiming the
   contrast was measured. Needs !important only because a rule inside the body
   outranks a stylesheet at equal specificity. */
body.light-mode .tdbc-chat-foot{color:var(--tdb-muted) !important}

.badge.bg-primary{color:#fff}
/* Written into the page content as `bg-primary text-dark`, which is dark text
   on Bootstrap blue by definition - 4.25:1, on two pages. .text-dark carries
   !important, so the correction has to as well; it is scoped to the one
   pairing that can never be right rather than to .text-dark generally. */
.badge.bg-primary.text-dark{color:#fff !important}
.btn-outline-info{color:var(--tdb-support);border-color:var(--tdb-support)}
.btn-outline-info:hover,.btn-outline-info:focus-visible{
  background:var(--tdb-support);color:var(--tdb-accent-ink);border-color:var(--tdb-support)}

/* The demo transcripts. The headline was authored and never printed; the
   transcript is collapsed because the player is already animating the same
   words one at a time, and open because a crawler and a reader both need it. */
.sc-story{margin:14px auto 0;max-width:var(--tdb-container-narrow, 72ch)}
.sc-story-h{margin:0 0 8px;font-size:1.06rem;line-height:1.35;color:var(--tdb-text);
  text-align:center}
.sc-story-more{border-top:1px solid var(--tdb-hair);padding-top:10px}
.sc-story-more>summary{cursor:pointer;list-style:none;color:var(--tdb-muted);
  font-size:.86rem;display:inline-flex;align-items:center;gap:7px}
.sc-story-more>summary::-webkit-details-marker{display:none}
.sc-story-more>summary::before{content:"";width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .18s var(--tdb-ease-out)}
.sc-story-more[open]>summary::before{transform:rotate(90deg)}
.sc-story-more>summary:hover{color:var(--tdb-text)}
.sc-story-steps{margin:12px 0 0;padding-left:20px;color:var(--tdb-body);
  font-size:.92rem;line-height:1.6}
.sc-story-steps li{margin:0 0 7px}


/* === Remaining contrast, measured 2026-08-31 ==============================
   Five elements, each just under threshold or inked for the wrong surface.
   Numbers are from tools/audit/audit.mjs against the live pages.            */

/* The selected topic chip takes white ink from --tdb-accent-ink, but in light
   mode its gradient composites to #f5f5f5 - white on near-white, 1.09:1.
   Give the SELECTED state a solid accent ground so its ink has something to
   sit on; the unselected chips already read fine. */
body.light-mode .tenq-chip input:checked + span{
  background:var(--tdb-accent) !important;
  border-color:var(--tdb-accent) !important;
  color:var(--tdb-accent-ink) !important;
}

/* Emerald-600 on a tinted chip, not on white: 4.27:1 against #e2e3e4. */
body.light-mode .wyg-card-keep .wyg-lbl,
[data-bs-theme="light"] .wyg-card-keep .wyg-lbl{color:#065f46}

/* dyno stage pill: fixed at source in ts2-light-mode.min.css, which loads
   after this file. A duplicate here would be dead weight that reads as if it
   were doing the work. */

/* Emerald-600 links on white: 3.77:1. */
body.light-mode .ts2-host-pricing a[style*="059669"],
body.light-mode a[style*="#059669"]{color:#047857 !important}

/* Gains API preview: a request line and the answer it returns. Sized from the
   panel's own tokens so it matches the other scenes in both themes. */
.tpv-api{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%}
.tpv-req{font-family:var(--tdb-mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:11.5px;letter-spacing:.02em;padding:7px 10px;border-radius:8px;
  background:color-mix(in srgb, currentColor 7%, transparent);
  border:1px solid color-mix(in srgb, currentColor 14%, transparent);
  max-width:100%;overflow-wrap:anywhere}
.tpv-res{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font-size:13.5px}
.tpv-res b{font-weight:700}
.tpv-res em{font-style:normal;font-size:11px;opacity:.7;
  padding:2px 7px;border-radius:999px;
  background:color-mix(in srgb, currentColor 9%, transparent)}

/* The preview column was a grid child with default `stretch`, so it grew to the
   height of the menu list beside it - now seven items tall - while its scenes
   are ~120px. The result was a bordered box that was mostly empty, which reads
   as unfinished rather than spacious.
   Size it to its own content instead, with a floor so switching scenes does not
   make the panel jump. */
.tnav-panel-cols{align-items:start}
.tnav-prev{align-self:start;min-height:196px}
.tnav-prev-scene{inset:40px 12px 12px}

/* On a narrow laptop the two columns crowd each other before the mobile drawer
   takes over at 992px. Give the list the room and let the preview drop. */
@media (max-width: 1100px){
  .tnav-panel-cols{grid-template-columns:1fr}
  .tnav-prev{display:none}
}

/* The caption says "rent a portal and you own nothing", and the chart said the
   opposite: the red Renting bar carried a growth animation that took it past
   the green Owning bar, and neither bar had an axis saying what its height
   measured. A picture that argues with its own caption is worse than no
   picture.
   The bars measure ONE thing - what you end up owning - so renting is a stub
   and owning is full. No animation: "you own nothing" does not grow. */
.tnav-prev-scene[data-scene="own"] .tpv-scol i.rent{
  height:7% !important;
  animation:none !important;
}
.tnav-prev-scene[data-scene="own"] .tpv-scol i.own{
  height:100% !important;
}
.tnav-prev-scene[data-scene="own"] .tpv-save::before{
  content:"what you own after 3 years";
  position:absolute;top:-2px;left:0;
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--secondary-text,var(--tdb-body));opacity:.65;
}
.tnav-prev-scene[data-scene="own"] .tpv-save{position:relative;padding-top:14px}

/* Between the drawer breakpoint (992px) and a comfortable desktop the header
   ran out of room: measured at 1100px the cart was clipped by the viewport
   edge, the WhatsApp button was pushed off-screen entirely, and "File Service"
   wrapped onto two lines. 68% of the fleet browses under 1367px, so this band
   is not an edge case - it is most people.
   Tighten the row rather than hide anything: no wrapping, smaller gaps, a
   shorter CTA label, and icons that keep their tap target. */
@media (min-width:992px) and (max-width:1279px){
  .tnav-wrap{gap:8px}
  .tnav-links{gap:0}
  .tnav-link{font-size:.88rem;padding-inline:8px;white-space:nowrap}
  .tnav-icons{gap:.6rem}
  .tnav-cta,.tnav-portal-btn{font-size:.84rem;padding:8px 12px;white-space:nowrap}
}
@media (min-width:992px) and (max-width:1129px){
  /* the last 130px: the label goes, the button and its target stay */
  .tnav-cta .tnav-cta-label,.tnav-portal-btn span{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  }
}

/* At exactly the drawer boundary the desktop row is at its tightest and the
   WhatsApp icon still crossed the edge. It duplicates the floating WhatsApp
   button that is on every page anyway, so in this narrow band the header drops
   it rather than clipping it. */
@media (min-width:992px) and (max-width:1059px){
  .tnav-icons .tnav-wa-item{display:none}
}