/* ============================================================
   TunerSuite — anime.js-style marketing site
   Cream → dark scroll, line-art ECU hero, animated feature demos
   ============================================================ */

:root{
  --cream:#dcd7cd;
  --cream-2:#cfc9bd;
  --ink:#12120e;            /* dark text on cream */
  --ink-2:#4a4840;
  --dark:#08080d;
  --dark-2:#0f0f18;
  --surface:rgba(255,255,255,.035);
  --surface-solid:#12121c;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.17);
  --text:#f3f3f7;
  --muted:#9b9baf;
  --muted-2:#7d7d8c;

  --a1:#ff6a1f;            /* torque orange */
  --a2:#ff2f45;           /* heat red */
  --a3:#ff2d8b;           /* magenta */
  --accent:#ff4526;
  --grad:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));
  --glow:rgba(255,60,70,.4);

  --maxw:1180px;
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--dark);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
code{font-family:"Space Grotesk",monospace;font-size:.92em;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:600;line-height:1.04;letter-spacing:-.02em}
.accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* scroll-driven backdrop (JS sets background-color cream→dark) */
.scene-bg{position:fixed;inset:0;z-index:0;background:var(--cream);pointer-events:none;transition:background-color .1s linear}
.nav,main,.footer{position:relative;z-index:2}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;
  padding:16px clamp(18px,4vw,44px);transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(8,8,13,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.on-cream .brand,.nav.on-cream .nav-links a{color:var(--ink)}
.nav.on-cream .nav-burger span{background:var(--ink)}
.brand{display:flex;align-items:center;gap:11px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:19px;transition:color .3s}
.brand-mark{width:20px;height:20px;border-radius:6px;background:var(--grad);box-shadow:0 0 22px var(--glow);transition:transform .5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(90deg)}
.brand-name span{color:var(--a2)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted);transition:color .3s}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--grad);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-burger span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ---------- buttons ---------- */
.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}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:16px}
.btn:not(.btn-sm):not(.btn-lg){padding:12px 22px;font-size:15px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -10px var(--glow);position:relative;overflow:hidden}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px -12px var(--glow)}
.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}
.btn-primary:hover::after{animation:sheen .85s ease}
@keyframes sheen{to{left:150%}}
.btn-outline{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-outline:hover{transform:translateY(-3px);border-color:var(--a2)}
.btn-block{width:100%}
/* outline on cream */
.hero .btn-outline{color:var(--ink);border-color:rgba(18,18,14,.28)}
.hero .btn-outline:hover{border-color:var(--accent)}

/* ---------- layout ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,10vw,130px) clamp(20px,5vw,40px)}
.section-head{max-width:760px;margin:0 auto clamp(40px,6vw,66px);text-align:center}
.kicker{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--a1);padding:6px 14px;border:1px solid var(--line-strong);border-radius:999px;margin-bottom:20px}
.section-head h2{font-size:clamp(30px,5vw,52px);margin-bottom:16px}
.section-lead{color:var(--muted);font-size:clamp(16px,2vw,18px);max-width:620px;margin:0 auto}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px clamp(20px,5vw,44px) 60px;position:relative;color:var(--ink)}
.hero-grid{max-width:var(--maxw);margin:0 auto;width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.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(44px,7vw,86px);margin-bottom:24px;color:var(--ink)}
.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-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-price-tag{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:600;color:var(--ink);padding:7px 16px;border-radius:999px;background:rgba(18,18,14,.06);border:1px solid rgba(18,18,14,.14)}
.hero-price-tag strong{color:var(--accent)}
.hero-price-note{font-size:14px;color:var(--ink-2)}
.hero-price-note strong{color:var(--ink)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* hero ECU line-art */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.ecu-art{width:100%;max-width:460px;height:auto}
.ecu-art .draw{stroke:var(--ink);stroke-width:1.4;fill:none}
.ecu-art .chip-main{fill:rgba(18,18,14,.04)}
.ecu-art .chip{fill:rgba(18,18,14,.03)}
.ecu-art .trace{stroke:var(--accent);stroke-width:1.6;opacity:.9}
.ecu-art .pins{stroke-width:1.2;opacity:.6}
.ecu-art .chip-label{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;fill:var(--ink);letter-spacing:.05em}
.ecu-art .chip-label.sm{font-size:9px;fill:var(--ink-2)}
.ecu-art .scan{stroke:var(--accent);stroke-width:2;opacity:0}
/* network-bridge hero scene */
.ecu-art .soft{stroke:var(--ink-2);opacity:.45}
.ecu-art .accent-fill{fill:var(--accent);stroke:none}
.ecu-art .bridge{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:5 6;opacity:.85}
.ecu-art .hero-label{font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;fill:var(--ink-2);letter-spacing:.12em}
.token-out{fill:var(--accent);stroke:none;filter:drop-shadow(0 0 6px var(--glow))}
.pay-badge rect{fill:rgba(255,69,38,.06);stroke:var(--accent);stroke-width:1.3}
.pay-badge text{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:700;fill:var(--accent)}
.pay-badge{animation:blink 1.9s ease-in-out infinite;animation-play-state:paused}
body.hero-live .pay-badge{animation-play-state:running}
.ecu-float{transform-origin:center;animation:ecuFloat 7s ease-in-out infinite;animation-play-state:paused}
body.hero-live .ecu-float,body.hero-live .ecu-badge .dot,body.hero-live .hero-scroll i{animation-play-state:running}
.ecu-badge .dot,.hero-scroll i{animation-play-state:paused}
@keyframes ecuFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(.4deg)}}
.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 rgba(18,18,14,.12);padding:8px 13px;border-radius:10px;backdrop-filter:blur(4px)}
.ecu-badge b{color:var(--accent)}
.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}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.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}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- capability cloud ---------- */
.cloud{border-top:1px solid rgba(18,18,14,.1);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.cloud-inner{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;max-width:900px;margin:0 auto;padding:0 20px}
.cloud-inner span{font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:500;color:var(--muted);padding:6px 14px;border:1px solid var(--line);border-radius:999px;transition:color .3s,border-color .3s,background .3s;opacity:0;transform:translateY(10px)}
.cloud-inner span.in{opacity:1;transform:none}
.cloud-inner span:hover{color:var(--text);border-color:var(--a2);background:rgba(255,45,69,.08)}

/* ---------- how you run it (modes) ---------- */
.modes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mode-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:26px 24px;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.mode-card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.mode-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mode-card:hover::after{transform:scaleX(1)}
.mode-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,69,38,.1);border:1px solid rgba(255,69,38,.22);color:var(--a1);margin-bottom:16px}
.mode-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mode-card h3{font-size:18px;margin-bottom:4px}
.mode-who{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;color:var(--a2);margin-bottom:11px}
.mode-desc{font-size:14px;color:var(--muted)}
.modes-note{text-align:center;margin-top:26px;font-size:15px;color:var(--muted)}
.modes-note strong{color:var(--text)}

/* ---------- why / positioning band ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-item{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:28px 26px;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.why-item:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.why-item::after{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.why-item:hover::after{transform:scaleX(1)}
.why-num{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:700;color:var(--a2);letter-spacing:.1em}
.why-item h3{font-size:19px;margin:12px 0 9px}
.why-item p{font-size:14.5px;color:var(--muted)}

/* ---------- feature rows ---------- */
.features{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,80px) clamp(20px,5vw,40px)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(50px,7vw,90px) 0}
.feature-row.reverse .feature-copy{order:2}
.feature-tag{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);margin-bottom:16px}
.feature-copy h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px}
.feature-copy p{color:var(--muted);font-size:16.5px;margin-bottom:22px}
.feature-points{list-style:none;display:flex;flex-direction:column;gap:11px}
.feature-points li{position:relative;padding-left:28px;font-size:15.5px;color:var(--text)}
.feature-points li::before{content:"";position:absolute;left:0;top:8px;width:14px;height:8px;border-left:2px solid var(--a2);border-bottom:2px solid var(--a2);transform:rotate(-45deg)}

/* anchor targets clear the fixed nav */
[id]{scroll-margin-top:84px}

/* pause demo motion while the card is off-screen (perf + battery) */
.demo *{animation-play-state:paused}
.demo.live *{animation-play-state:running}

/* shared entrance keyframe used across several demos */
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* demo shell */
.feature-demo{display:flex;flex-direction:column;gap:12px}
.demo{background:linear-gradient(160deg,var(--dark-2),#0b0b13);border:1px solid var(--line);border-radius:var(--radius);padding:24px;min-height:250px;position:relative;overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.demo::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0,rgba(255,69,38,.10),transparent 60%);pointer-events:none}
.demo-caption{font-size:13px;color:var(--muted-2);text-align:center;font-style:italic}

/* --- demo 1: match --- */
.demo-match{display:flex;flex-direction:column;gap:16px;justify-content:center}
.dm-file{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.dm-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(255,69,38,.12);color:var(--a1);font-size:18px}
.dm-meta b{display:block;font-size:14.5px}.dm-meta em{font-style:normal;font-size:12px;color:var(--muted)}
.dm-scan{height:3px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;position:relative}
.dm-scan i{position:absolute;left:-40%;top:0;bottom:0;width:40%;background:var(--grad);border-radius:3px}
.in-view .dm-scan i{animation:scanSweep 1.6s var(--ease) .2s both}
@keyframes scanSweep{to{left:100%}}
.dm-rows{display:flex;flex-direction:column;gap:8px}
.dm-kv{display:flex;justify-content:space-between;font-size:13.5px}
.dm-kv span{color:var(--muted)}.dm-kv b{font-family:"Space Grotesk",monospace;color:var(--text)}
.dm-match{display:flex;align-items:center;gap:12px;margin-top:4px;opacity:0}
.in-view .dm-match{animation:pop .5s var(--ease) 1.7s both}
.dm-badge{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;color:#fff;background:var(--grad);padding:6px 14px;border-radius:8px}
.dm-deliver{color:#22c55e;font-size:14px;font-weight:600}

/* --- demo 2: editor --- */
.demo-editor{display:flex;flex-direction:column;gap:14px}
.de-head{display:flex;justify-content:space-between;align-items:center}
.de-map{font-size:13px;color:var(--muted)}
.de-chip{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:12px;color:#fff;background:var(--grad);padding:4px 11px;border-radius:7px}
.de-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.de-cell{aspect-ratio:1.4;border-radius:4px;background:rgba(255,255,255,.05);display:grid;place-items:center;font-family:"Space Grotesk",monospace;font-size:10.5px;color:var(--muted);transition:background .5s,color .5s}
.de-cell.hot{background:rgba(255,69,38,.75);color:#fff}
.de-foot{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.de-arrow{color:var(--muted-2)}.de-ok{margin-left:auto;color:#22c55e;font-weight:600}

/* --- demo 3: pipeline --- */
.demo-pipe{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.dp-stage{flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;opacity:.4;transition:opacity .4s,transform .4s}
.dp-stage.active{opacity:1;transform:translateY(-3px)}
.dp-i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--surface);border:1px solid var(--line)}
.dp-stage.active .dp-i{border-color:var(--a2);background:rgba(255,45,69,.12)}
.dp-stage b{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:500}
.dp-arrow{flex:0 0 18px;height:2px;background:linear-gradient(90deg,var(--line-strong),transparent);align-self:flex-start;margin-top:22px}
.dp-token{position:absolute;top:34px;left:24px;width:14px;height:14px;border-radius:50%;background:var(--grad);box-shadow:0 0 14px var(--glow);opacity:0}
.in-view .dp-token{animation:pipeToken 3.4s var(--ease) .3s infinite}
@keyframes pipeToken{0%{opacity:0;left:8%}10%{opacity:1}90%{opacity:1}100%{opacity:0;left:88%}}

/* --- demo: AI assistant (takes actions) --- */
.demo-assistant{display:flex;flex-direction:column;gap:11px;justify-content:center}
.as-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13.5px;opacity:0;transform:translateY(8px)}
.in-view .as-out{animation:pop .45s var(--ease) .2s forwards}
.in-view .as-done{animation:pop .45s var(--ease) 2.2s forwards}
.as-out{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.as-done{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.as-done b{color:#22c55e}
.as-action{align-self:flex-start;width:88%;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:11px;opacity:0;transform:translateY(8px)}
.in-view .as-action{animation:pop .5s var(--ease) 1s forwards}
.as-action-top{font-size:13.5px;display:flex;align-items:center;gap:9px}
.as-action-top b{color:var(--text)}
.as-i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(255,69,38,.14);color:var(--a1);font-weight:700;flex:none}
.as-confirm{display:flex;gap:8px}
.as-btn{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;color:#fff;background:var(--grad);padding:6px 16px;border-radius:8px}
.as-btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.in-view .as-confirm .as-btn:first-child{animation:confirmFlash 1.4s var(--ease) 1.6s}
@keyframes confirmFlash{0%,100%{box-shadow:0 0 0 0 var(--glow)}40%{box-shadow:0 0 0 5px rgba(255,69,38,.25)}}

/* --- demo: tuning workflow stepper --- */
.demo-workflow{display:flex;flex-direction:column;gap:16px;justify-content:center}
.wf-card{align-self:flex-start;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.wf-chips{display:flex;gap:8px;flex-wrap:wrap}
.wf-chip{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 12px}
.wf-chip.on{color:#fff;background:var(--grad);border-color:transparent}
.wf-steps{position:relative;display:flex;justify-content:space-between;margin-top:6px}
.wf-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;position:relative;z-index:2}
.wf-step i{width:20px;height:20px;border-radius:50%;background:var(--surface-solid);border:2px solid var(--line-strong);display:block;transition:background .3s,border-color .3s}
.wf-step span{font-size:11.5px;color:var(--muted);font-family:"Space Grotesk",sans-serif}
.wf-line{position:absolute;top:9px;left:12%;right:12%;height:2px;background:var(--line-strong);z-index:1}
.wf-line b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad);display:block}
.in-view .wf-line b{animation:wfFill 3s var(--ease) .4s forwards}
@keyframes wfFill{to{width:100%}}
.in-view .wf-step:nth-child(1) i{animation:wfDot .3s var(--ease) .4s forwards}
.in-view .wf-step:nth-child(2) i{animation:wfDot .3s var(--ease) 1.3s forwards}
.in-view .wf-step:nth-child(3) i{animation:wfDot .3s var(--ease) 2.2s forwards}
.in-view .wf-step:nth-child(4) i{animation:wfDot .3s var(--ease) 3s forwards}
@keyframes wfDot{to{background:var(--a2);border-color:var(--a2);box-shadow:0 0 12px var(--glow)}}

/* --- demo 4: vehicle hub --- */
.demo-hub{display:flex;flex-direction:column;gap:14px}
.dh-plate{display:flex;align-items:center;gap:0;align-self:flex-start;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.2);font-family:"Space Grotesk",sans-serif;font-weight:700}
.dh-gb{background:#1a3fb8;color:#ffd400;font-size:10px;padding:10px 8px;letter-spacing:.05em}
.dh-plate b{background:#f4d000;color:#111;font-size:20px;padding:8px 14px;letter-spacing:.06em}
.dh-spec{display:flex;flex-direction:column;gap:7px}
.dh-row{display:flex;justify-content:space-between;font-size:13.5px}.dh-row span{color:var(--muted)}
.dh-dyno{width:100%;height:80px}
.dh-dyno path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400}
.dh-stock{stroke:var(--muted-2)}
.dh-tuned{stroke:url(#g)}
.in-view .dh-dyno path{animation:draw 1.6s var(--ease) .4s forwards}
.in-view .dh-tuned{animation-delay:.7s}
@keyframes draw{to{stroke-dashoffset:0}}
.dh-gain{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.dh-gain b{font-family:"Space Grotesk",sans-serif;font-size:22px;color:var(--a1)}

/* --- demo 5: telegram --- */
.demo-tg{display:flex;flex-direction:column;gap:10px;justify-content:center}
.tg-msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13.5px;opacity:0;transform:translateY(8px)}
.in-view .tg-msg{animation:pop .45s var(--ease) forwards}
.in-view .tg-msg:nth-child(1){animation-delay:.2s}
.in-view .tg-msg:nth-child(2){animation-delay:.9s}
.in-view .tg-msg:nth-child(3){animation-delay:1.8s}
.in-view .tg-msg:nth-child(4){animation-delay:2.4s}
.tg-out{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px;font-family:"Space Grotesk",monospace}
.tg-in{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.tg-card{display:flex;flex-direction:column;gap:3px}
.tg-card b{font-size:14px}.tg-card span{font-size:12.5px;color:var(--muted)}
.tg-typing{display:flex;gap:4px;padding:12px 16px}
.tg-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.2s ease-in-out infinite}
.tg-typing i:nth-child(2){animation-delay:.2s}.tg-typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* --- demo 6: support AI --- */
.demo-support{display:flex;flex-direction:column;gap:11px;justify-content:center}
.sp-log{font-family:"Space Grotesk",monospace;font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.sp-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,.03);opacity:0;transform:translateX(-10px)}
.sp-line span{color:var(--muted)}.sp-line b{font-family:"Space Grotesk",sans-serif}
.sp-line .warn{color:#f59e0b}
.in-view .sp-1{animation:slideIn .5s var(--ease) .4s both}
.in-view .sp-2{animation:slideIn .5s var(--ease) .9s both}
.in-view .sp-3{animation:slideIn .5s var(--ease) 1.5s both}
.sp-hand{font-size:13px;color:var(--muted-2);text-align:right;opacity:0}
.in-view .sp-hand{animation:pop .4s var(--ease) 2.1s both}
@keyframes slideIn{to{opacity:1;transform:none}}

/* --- demo 7: network --- */
.demo-net{display:flex;flex-direction:column;align-items:center;gap:14px;justify-content:center}
.net-svg{width:240px;max-width:100%}
.net-lines line{stroke:var(--line-strong);stroke-width:1.4}
.net-nodes circle{fill:var(--surface-solid);stroke:var(--line-strong);stroke-width:1.5}
.net-core{fill:rgba(255,69,38,.18);stroke:var(--a2);stroke-width:2;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1;r:18}}
.net-fly{fill:var(--a2);filter:drop-shadow(0 0 6px var(--glow))}
.in-view .net-fly{animation:fly 3s var(--ease) infinite}
@keyframes fly{0%{cx:205;cy:46;opacity:0}15%{opacity:1}50%{cx:120;cy:100}55%{opacity:1}70%{opacity:0}100%{opacity:0}}
.net-cap{font-size:13px;color:var(--muted)}.net-cap .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a2);margin-right:6px;animation:blink 1.4s infinite}

/* --- demo 8: billing --- */
.demo-bill{display:flex;flex-direction:column;gap:14px;justify-content:center}
.bl-bal{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bl-bal span{color:var(--muted);font-size:14px}.bl-bal b{font-family:"Space Grotesk",sans-serif;font-size:30px;color:var(--text)}
.bl-methods{display:flex;gap:8px}
.bl-m{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:7px 13px}
.bl-invoice{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.bl-irow{display:flex;justify-content:space-between;font-size:13.5px}.bl-irow span{color:var(--muted)}
.bl-irow b{font-family:"Space Grotesk",sans-serif}
.bl-vat span,.bl-vat b{color:var(--muted-2);font-size:12.5px}
.bl-tot{padding-top:8px;border-top:1px solid var(--line)}.bl-tot b{color:var(--a1);font-size:15px}

/* --- demo 9: white-label --- */
.demo-wl{display:grid;place-items:center}
.wl-portal{width:100%;max-width:340px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0a0a12;transition:box-shadow .5s}
.wl-bar{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.wl-logo{width:22px;height:22px;border-radius:6px;background:var(--accent);transition:background .5s}
.wl-name{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;transition:color .5s}
.wl-dots{margin-left:auto;display:flex;gap:5px}.wl-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.wl-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.wl-block{height:16px;border-radius:6px;background:rgba(255,255,255,.05)}
.wl-hero{height:56px;background:linear-gradient(120deg,var(--accent),transparent);opacity:.5;transition:background .5s}

/* ---------- everything grid ---------- */
.everything{max-width:1220px}
.everything-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ev-cat{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:24px 22px;transition:transform .35s var(--ease),border-color .35s}
.ev-cat:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.ev-cat h3{font-size:16px;display:flex;align-items:center;gap:9px;margin-bottom:16px}
.ev-dot{width:9px;height:9px;border-radius:50%;background:var(--grad);flex:none;box-shadow:0 0 10px var(--glow)}
.ev-cat ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ev-cat li{font-size:13px;color:var(--muted);line-height:1.5;padding-left:16px;position:relative}
.ev-cat li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--a2);opacity:.7}
.ev-cat li b{color:var(--text);font-weight:600}

/* ---------- numbers ---------- */
.stat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;text-align:center}
.stat-num{font-family:"Space Grotesk",sans-serif;font-size:clamp(32px,5vw,54px);font-weight:700;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.stat-label{font-size:13.5px;color:var(--muted);margin-top:10px}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.price-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;position:relative;transition:transform .35s var(--ease)}
.price-card:hover{transform:translateY(-6px)}
.price-card.featured{border-color:rgba(255,45,69,.4);box-shadow:0 24px 60px -30px var(--glow)}
.price-card.featured::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price-flag{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--grad);padding:5px 13px;border-radius:999px;margin-bottom:18px}
.price-flag.muted{background:rgba(255,255,255,.06);color:var(--muted)}
.price-card h3{font-size:21px;margin-bottom:12px}
.price-amount{font-family:"Space Grotesk",sans-serif;font-size:42px;font-weight:700;line-height:1;margin-bottom:20px}
.price-amount span{display:block;font-size:13.5px;font-weight:500;color:var(--muted);margin-top:8px}
.price-list{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.price-list li{font-size:14.5px;padding-left:26px;position:relative}
.price-list li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;border-left:2px solid var(--a2);border-bottom:2px solid var(--a2);transform:rotate(-45deg)}
.price-fine{font-size:12px;color:var(--muted-2);margin-top:14px;text-align:center}
.price-invest{margin-top:22px;background:var(--dark-2);border:1px solid rgba(255,45,69,.28);border-radius:18px;padding:28px 30px;display:flex;gap:22px;align-items:flex-start;box-shadow:0 24px 60px -40px var(--glow)}
.pi-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;font-weight:700;background:var(--grad);color:#fff;flex:none}
.price-invest h3{font-size:20px;margin-bottom:8px}
.pi-body p{color:var(--muted);font-size:15px;max-width:660px;margin-bottom:14px}
.pi-body p strong{color:var(--text)}
.pi-list{list-style:none;display:flex;gap:10px 26px;flex-wrap:wrap}
.pi-list li{font-size:14px;padding-left:22px;position:relative;color:var(--text)}
.pi-list li::before{content:"✓";position:absolute;left:0;color:var(--a2);font-weight:700}

/* ---------- build ---------- */
.build-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.build-item{background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:22px 24px;font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:500;display:flex;align-items:center;gap:14px;transition:transform .3s var(--ease),border-color .3s}
.build-item::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none;box-shadow:0 0 12px var(--glow)}
.build-item:hover{transform:translateX(6px);border-color:var(--line-strong)}

/* ---------- cta ---------- */
.cta{text-align:center}
.cta-inner{background:var(--dark-2);border:1px solid var(--line);border-radius:28px;padding:clamp(48px,7vw,84px) clamp(24px,5vw,60px);position:relative;overflow:hidden}
.cta-inner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(255,45,69,.18),transparent 60%)}
.cta-inner>*{position:relative}
.cta h2{font-size:clamp(28px,4.6vw,46px);margin-bottom:16px}
.cta p{color:var(--muted);font-size:18px;max-width:520px;margin:0 auto 32px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{text-align:center;padding:54px 20px 46px;border-top:1px solid var(--line)}
.footer-brand{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:18px;margin-bottom:12px}
.footer-brand .brand-name span{color:var(--a2)}
.footer-tag{color:var(--muted);font-size:14.5px;margin-bottom:8px}
.footer-copy{color:var(--muted-2);font-size:13px}

/* ---------- reveal ---------- */
/* Progressive enhancement: hide ONLY when JS confirmed it's running (adds body.anim-on).
   If the script fails to load, or IO stalls, content stays visible — never an empty page. */
body.anim-on [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in-view{opacity:1 !important;transform:none !important}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-visual{order:-1;max-width:340px;margin:0 auto}
  .feature-row,.feature-row.reverse{grid-template-columns:1fr;gap:26px}
  .feature-row.reverse .feature-copy{order:0}
  .stat-row{grid-template-columns:repeat(3,1fr);gap:28px 20px}
  .price-grid{grid-template-columns:1fr;max-width:430px;margin:0 auto}
  .price-invest{flex-direction:column;gap:16px;max-width:460px;margin:22px auto 0}
  .build-grid{grid-template-columns:1fr}
  .everything-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .modes-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .de-grid{grid-template-columns:repeat(8,1fr)}
  .everything-grid{grid-template-columns:1fr}
  .modes-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .dh-dyno path{stroke-dashoffset:0}
  .cloud-inner span{opacity:1;transform:none}
  .tg-msg,.dm-match,.sp-line,.sp-hand{opacity:1;transform:none}
}

/* ============================================================
   WORDPRESS / WOOCOMMERCE INTEGRATION (product 17803 page)
   ============================================================ */

/* keep the WP admin bar sane on our dark takeover */
#wpadminbar{z-index:99999}
html{scroll-padding-top:84px}

/* ---------- gallery ---------- */
.tsp-gallery{max-width:var(--maxw);margin:0 auto;padding:clamp(30px,5vw,60px) clamp(20px,5vw,40px)}
.tsp-gallery-main{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--dark-2);aspect-ratio:16/9;display:grid;place-items:center;box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
.tsp-gallery-main img{width:100%;height:100%;object-fit:contain;background:#0a0a12;cursor:zoom-in;transition:opacity .35s var(--ease)}
.tsp-gallery-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.tsp-thumb{width:96px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--line);cursor:pointer;background:#0a0a12;padding:0;transition:border-color .25s,transform .25s var(--ease);flex:none}
.tsp-thumb img{width:100%;height:100%;object-fit:cover}
.tsp-thumb.active{border-color:var(--a2)}
.tsp-thumb:hover{transform:translateY(-3px);border-color:var(--line-strong)}
/* lightbox */
.tsp-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(4,4,8,.94);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.tsp-lightbox.open{display:flex}
.tsp-lightbox img{max-width:94vw;max-height:92vh;border-radius:10px;box-shadow:0 40px 90px -30px #000}
.tsp-lightbox-close{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:#fff;font-size:22px;cursor:pointer}

/* ---------- purchase card (real WooCommerce) ---------- */
.buy-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.buy-card{background:var(--dark-2);border:1px solid rgba(255,45,69,.32);border-radius:22px;padding:clamp(26px,4vw,38px);box-shadow:0 30px 70px -40px var(--glow);max-width:520px;margin:0 auto}
.buy-flag{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--grad);padding:5px 13px;border-radius:999px;margin-bottom:16px}
.buy-title{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* WooCommerce price */
.buy-card .price{font-family:"Space Grotesk",sans-serif;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px}
.buy-card .price del{color:var(--muted-2);font-size:20px;font-weight:500;text-decoration:line-through;opacity:.8}
.buy-card .price ins{text-decoration:none;font-size:46px;font-weight:700;color:var(--text)}
.buy-card .price .amount{color:inherit}
.buy-card .buy-sub{font-size:14px;color:var(--muted);margin-bottom:22px}
.buy-card .buy-sub strong{color:var(--text)}
/* add-to-cart form + buttons */
.buy-card form.cart{margin:0}
.buy-card .quantity{display:none} /* single licence — force qty 1 */
.buy-card .single_add_to_cart_button,.buy-card .buy-now-btn{
  display:flex !important;align-items:center;justify-content:center;width:100%;
  font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16px;
  padding:15px 24px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;margin:0 0 12px;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.buy-card .single_add_to_cart_button{background:var(--grad);color:#fff;box-shadow:0 12px 30px -12px var(--glow)}
.buy-card .single_add_to_cart_button:hover{transform:translateY(-3px);box-shadow:0 18px 42px -12px var(--glow);color:#fff}
.buy-card .buy-now-btn{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line-strong)}
.buy-card .buy-now-btn:hover{transform:translateY(-3px);border-color:var(--a2);color:var(--text)}
/* stripe express / payment-request / link buttons */
.buy-sep{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted-2);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;font-family:"Space Grotesk",sans-serif}
.buy-sep::before,.buy-sep::after{content:"";flex:1;height:1px;background:var(--line)}
#wc-stripe-payment-request-wrapper,.wc-stripe-payment-request-wrapper,.wc-stripe-product-pay-button,.wc-block-components-express-payment{margin:0 auto 8px !important;max-width:100% !important}
#wc-stripe-payment-request-button-separator{display:none !important}
.buy-methods{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.buy-methods span{font-size:12px;color:var(--muted-2)}
.buy-secure{font-size:12.5px;color:var(--muted-2);text-align:center;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px}
.buy-secure svg{width:14px;height:14px;fill:none;stroke:var(--a2);stroke-width:2}

/* ---------- description (rendered from WooCommerce content) ---------- */
.tsp-desc{max-width:820px;margin:0 auto;padding:clamp(30px,5vw,60px) clamp(20px,5vw,40px);color:var(--muted);font-size:16px;line-height:1.75}
.tsp-desc h2,.tsp-desc h3{color:var(--text);margin:1.4em 0 .5em}
.tsp-desc h2{font-size:26px}.tsp-desc h3{font-size:20px}
.tsp-desc p{margin:0 0 1em}
.tsp-desc ul{margin:0 0 1em 1.1em;display:flex;flex-direction:column;gap:8px}
.tsp-desc img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:12px 0}
.tsp-desc a{color:var(--a2)}

@media(max-width:900px){
  .tsp-gallery-main{aspect-ratio:4/3}
}

/* two-up info cards under the buy card */
.price-grid.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin:26px auto 0}
@media(max-width:900px){ .price-grid.two{grid-template-columns:1fr;max-width:430px} }
/* Four ways to run it: your own server and the three hosting plans (19 Oct 2026). */
.price-grid.four{grid-template-columns:repeat(4,1fr);max-width:none}
@media(max-width:1180px){ .price-grid.four{grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto} }
@media(max-width:900px){ .price-grid.four{grid-template-columns:1fr;max-width:430px} }

/* ============================================================
   MODE TABS (Standalone / Master / Master+Slave / Slave)
   ============================================================ */
.modetabs{max-width:var(--maxw);margin:0 auto}
.modetabs-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.modetab{background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:15px 16px;cursor:pointer;text-align:left;transition:border-color .3s,transform .3s var(--ease),background .3s;display:flex;flex-direction:column;gap:2px}
.modetab b{font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:600;color:var(--text)}
.modetab em{font-style:normal;font-size:12.5px;color:var(--muted)}
.modetab:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.modetab.is-active{border-color:transparent;background:var(--grad);box-shadow:0 12px 30px -14px var(--glow)}
.modetab.is-active b,.modetab.is-active em{color:#fff}
.modetabs-body{position:relative}
.modepanel{display:none}
.modepanel.is-active{display:block;animation:panelIn .45s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modepanel-lede{max-width:740px;margin-bottom:24px}
.modepanel-lede h3{font-size:clamp(21px,3vw,28px);margin-bottom:8px}
.modepanel-lede p{color:var(--muted);font-size:16px}
.modepanel-lede strong{color:var(--text)}.modepanel-lede em{font-style:italic;color:var(--text)}
.modefeat{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px;margin:0}
.modefeat li{position:relative;padding-left:30px;font-size:15px;color:var(--text)}
.modefeat li b{color:var(--a1)}
.modefeat li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:rgba(255,69,38,.12);border:1px solid rgba(255,69,38,.32)}
.modefeat li::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:3px;border-left:2px solid var(--a2);border-bottom:2px solid var(--a2);transform:rotate(-45deg)}
.modeplus-title{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--a1);margin:24px 0 14px}
.modefeat.modeplus li::before{background:rgba(255,69,38,.2);border-color:rgba(255,69,38,.5)}
.modepanel-note{margin-top:20px;font-size:14.5px;color:var(--muted);font-style:italic}

/* full original description wrapper (its own #ts-wrapper CSS styles the inside) */
.tsp-fulldesc{max-width:1180px}
.tsp-desc-wrap{border-top:1px solid var(--line);padding-top:10px}

@media(max-width:900px){
  .modetabs-bar{grid-template-columns:repeat(2,1fr)}
  .modefeat{grid-template-columns:1fr}
}

/* ============================================================
   LITE MODE — weak PCs / reduced-motion: keep the design, drop perpetual + heavy motion
   ============================================================ */
body.lite .ecu-float,
body.lite .token-out,
body.lite .pay-badge,
body.lite .cloud-inner span,
body.lite .hero-scroll i,
body.lite .marquee-track,
body.lite .demo *{animation:none !important}
body.lite .scene-bg{transition:none}
body.lite *{backdrop-filter:none !important}
body.lite [data-reveal]{transition:opacity .3s linear !important;transform:none !important}
body.lite .modepanel.is-active{animation:none}
/* lite toggle chip */
.lite-toggle{position:fixed;right:16px;bottom:16px;z-index:99998;display:inline-flex;align-items:center;gap:7px;font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;color:var(--text);background:rgba(12,12,20,.82);border:1px solid var(--line-strong);border-radius:999px;padding:9px 15px;cursor:pointer;backdrop-filter:blur(8px)}
.lite-toggle:hover{border-color:var(--a2)}
.lite-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--a2)}
body.lite .lite-toggle .dot{background:var(--muted-2)}

/* WP admin bar offset for the fixed nav (logged-in admins only) */
body.admin-bar .nav{top:32px}
@media(max-width:782px){ body.admin-bar .nav{top:46px} }

/* beat WooCommerce's default button styling inside the buy card */
.tsp .buy-card .single_add_to_cart_button{border-radius:14px !important;padding:15px 24px !important;background:var(--grad) !important;color:#fff !important;font-size:16px !important;width:100% !important;border:0 !important;height:auto !important;line-height:1.2 !important;text-transform:none !important;letter-spacing:0 !important;font-family:"Space Grotesk",sans-serif !important;margin:0 0 12px !important}
.tsp .buy-card .single_add_to_cart_button:hover{transform:translateY(-3px) !important;opacity:1 !important;color:#fff !important}
.tsp .buy-card .price{margin-bottom:6px !important;background:none !important}
.tsp .buy-card .price .amount,.tsp .buy-card .price bdi{color:inherit !important}
/* hide screen-reader-only price text */
.tsp .screen-reader-text{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

/* ============================================================
   MODE PANELS v2 — sidebar mockup + file flow per mode
   ============================================================ */
.modepanel-grid{display:grid;grid-template-columns:236px 1fr;gap:34px;align-items:start}
.modeside{background:#0b0b13;border:1px solid var(--line);border-radius:14px;padding:12px 10px;font-family:"Space Grotesk",sans-serif}
.ms-brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--text);padding:6px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ms-logo{width:18px;height:18px;border-radius:5px;background:var(--grad);flex:none}
.ms-grp{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);padding:12px 8px 6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ms-grp.is-new{color:var(--a1)}
.ms-newtag{font-size:9px;background:rgba(255,69,38,.16);color:var(--a1);padding:2px 6px;border-radius:6px;text-transform:none;letter-spacing:0}
.ms-item{font-size:13px;color:var(--muted);padding:7px 10px;border-radius:8px;position:relative}
.ms-item.is-new{color:var(--text);background:rgba(255,69,38,.08)}
.ms-item.is-new::after{content:"NEW";position:absolute;right:9px;top:9px;font-size:8px;color:var(--a1);font-weight:700;letter-spacing:.05em}
.modeinfo h3{font-size:clamp(20px,2.6vw,26px);margin-bottom:10px}
.modeinfo>p{color:var(--muted);font-size:15.5px;margin-bottom:16px}
.modeflow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 15px;font-family:"Space Grotesk",sans-serif;font-size:13px;margin-bottom:12px}
.modeflow span{color:var(--text)}.modeflow span b{color:var(--a1)}
.modeflow i{color:var(--a2);font-style:normal;font-weight:700}
.modeflow-note{font-size:14px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.modeflow-note b{color:var(--text)}
.modeinfo .modefeat{grid-template-columns:1fr;gap:10px}

/* ============================================================
   AI SHOWCASE — Telegram bot + in-portal Support AI
   ============================================================ */
.aishow-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:var(--maxw);margin:0 auto}
.aishow-col{display:flex;flex-direction:column;gap:20px}
.aishow-cap h3{font-size:20px;margin-bottom:8px}
.aishow-cap p{color:var(--muted);font-size:15px}

/* telegram phone */
.tg-phone{max-width:340px;width:100%;margin:0 auto;border-radius:30px;border:8px solid #14161a;background:#0e1013;overflow:hidden;box-shadow:0 40px 80px -40px #000}
.tg-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#17212b}
.tg-back{color:#5eb5f7;font-size:22px;line-height:1}
.tg-title{flex:1;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;color:#fff;line-height:1.1}
.tg-title em{display:block;font-style:normal;font-size:11px;color:#7d8b99}
.tg-ava{width:34px;height:34px;border-radius:50%;background:#2b3a4a;display:grid;place-items:center;font-size:10px;font-weight:700;color:#cfe3f5}
.tg-scroll{background:#0b141a;padding:14px 12px;display:flex;flex-direction:column;gap:8px;min-height:410px}
.tg-b{max-width:84%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.35;color:#e6edf3}
.tg-b.out{align-self:flex-end;background:#2b5278;border-bottom-right-radius:4px;display:flex;flex-direction:column;gap:6px}
.tg-b.in{align-self:flex-start;background:#182533;border-bottom-left-radius:4px}
.tg-b.in b{color:#fff}
.tg-photo{position:relative;border-radius:8px;overflow:hidden;width:200px;max-width:100%}
.tg-photo svg{display:block;width:100%;height:auto}
.tg-plate{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#f4d000;color:#111;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:11px;padding:2px 8px;border-radius:3px;letter-spacing:.05em}
.tg-txt{font-size:13px}
.tg-vcard{display:flex;align-items:center;gap:10px}
.tg-vcard svg{width:76px;height:38px;flex:none}
.tg-vcard b{font-size:14px}
.tg-spec{display:flex;flex-direction:column;gap:3px}
.tg-spec>b{font-size:14px;color:#fff}
.tg-spec span{font-size:12px;color:#9fb0c0}
.tg-gain{color:#fff !important}.tg-gain b{color:#4ade80}
.tg-quote{color:#5eb5f7 !important;font-size:12px}
.tg-input{padding:11px 14px;background:#17212b;color:#5c6b7a;font-size:13px}

/* in-portal support AI */
.portal-chat{max-width:400px;width:100%;margin:0 auto;border-radius:16px;border:1px solid var(--line);background:var(--dark-2);overflow:hidden;box-shadow:0 40px 80px -40px #000}
.pc-top{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;color:var(--text)}
.pc-dot{width:9px;height:9px;border-radius:50%;background:#22c55e}
.pc-badge{margin-left:auto;font-size:10px;font-weight:700;color:#fff;background:var(--grad);padding:3px 8px;border-radius:6px}
.pc-scroll{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:372px}
.pc-b{max-width:88%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.42}
.pc-b.user{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.pc-b.pc-file{font-family:"Space Grotesk",sans-serif;font-size:12px;opacity:.92}
.pc-b.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--text);border-bottom-left-radius:4px}
.pc-b.bot b{color:var(--text)}.pc-b .warn{color:#f59e0b}
.pc-hand{color:var(--muted) !important;font-style:italic}
.pc-input{padding:13px 16px;border-top:1px solid var(--line);color:var(--muted-2);font-size:13px}

@media(max-width:900px){
  .modepanel-grid{grid-template-columns:1fr;gap:22px}
  .modeside{max-width:320px}
  .aishow-grid{grid-template-columns:1fr;gap:44px}
}

/* ============================================================
   BUY CARD CLEANUP — buy block under hero, tidy buttons
   ============================================================ */
.buytop{padding-top:clamp(38px,5vw,64px);padding-bottom:clamp(30px,4vw,50px)}
.buy-cta-row{text-align:center;margin-bottom:28px}

/* restyle the plugin "Buy Now" (was small + purple) → clean secondary, full-width */
.tsp .buy-card .buy_now_button{display:flex !important;align-items:center;justify-content:center;width:100% !important;background:rgba(255,255,255,.05) !important;color:var(--text) !important;border:1px solid var(--line-strong) !important;border-radius:14px !important;padding:14px 24px !important;font-size:15px !important;font-family:"Space Grotesk",sans-serif !important;font-weight:600 !important;margin:0 0 6px !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;text-decoration:none !important;height:auto !important;line-height:1.2 !important}
.tsp .buy-card .buy_now_button:hover{transform:translateY(-2px) !important;border-color:var(--a2) !important;color:var(--text) !important;background:rgba(255,45,69,.08) !important}

/* "or pay instantly" divider before the express buttons */
.buy-card .buy-express-label{display:flex;align-items:center;gap:12px;margin:16px 0 10px;color:var(--muted-2);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-family:"Space Grotesk",sans-serif}
.buy-card .buy-express-label::before,.buy-card .buy-express-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* Stripe express (Apple Pay / GPay / Link) spacing */
.tsp .buy-card #wc-stripe-payment-request-wrapper,
.tsp .buy-card .wc-stripe-payment-request-wrapper,
.tsp .buy-card .wc-stripe-product-page-pay-button,
.tsp .buy-card .wc-block-components-express-payment,
.tsp .buy-card [id*="express-payment"],
.tsp .buy-card [class*="express-checkout"]{margin:6px 0 !important;max-width:100% !important}
.tsp .buy-card #wc-stripe-payment-request-button-separator{display:none !important}

/* ============================================================
   ANIMATED MODE FLOW RAILS (per tab: standalone/master/master+slave/slave)
   ============================================================ */
.flow2{position:relative;display:flex;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;overflow:hidden}
.f2-node{display:flex;flex-direction:column;align-items:center;gap:5px;font-family:"Space Grotesk",sans-serif;font-size:11.5px;color:var(--text);text-align:center;flex:0 0 auto;z-index:2;min-width:60px;line-height:1.2}
.f2-node b{color:var(--a1)}
.f2-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:var(--surface-solid);border:1px solid var(--line-strong)}
.f2-hub .f2-ico{border-color:var(--a2);background:rgba(255,45,69,.12);animation:f2pulse 2.4s ease-in-out infinite}
.f2-fork .f2-ico{color:var(--a1)}
@keyframes f2pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,45,69,0)}50%{box-shadow:0 0 0 6px rgba(255,45,69,.14)}}
.f2-wire{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px);z-index:1;min-width:16px;margin-top:19px}
.f2-dot{position:absolute;top:35px;left:8%;width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px var(--glow);transform:translate(-50%,-50%);opacity:0;z-index:3}
.modepanel.is-active .flow2 .f2-dot{animation:f2run 3.4s ease-in-out infinite}
.modepanel.is-active .flow2 .f2-back{animation:f2runback 3.4s ease-in-out 1.7s infinite;background:#22c55e}
@keyframes f2run{0%{left:8%;opacity:0}8%{opacity:1}92%{left:92%;opacity:1}100%{left:92%;opacity:0}}
@keyframes f2runback{0%{left:92%;opacity:0}8%{opacity:1}92%{left:8%;opacity:1}100%{left:8%;opacity:0}}
body.lite .f2-dot{animation:none !important;opacity:0}
body.lite .f2-hub .f2-ico{animation:none !important}

/* buy + telegram CTA under the mode tabs */
.modes-cta{text-align:center;margin-top:30px}
.modes-cta .btn{margin:0 6px 10px}
.modes-pay{margin-top:6px;font-size:12.5px;color:var(--muted-2);display:flex;align-items:center;justify-content:center;gap:7px}
.modes-pay svg{stroke:var(--a2)}

/* ============================================================
   AI SHOWCASE v2 — ask band, chips, typing, staggered reveal
   ============================================================ */
.ask-band{max-width:var(--maxw);margin:46px auto 0;background:var(--dark-2);border:1px solid var(--line);border-radius:18px;padding:30px clamp(20px,4vw,36px)}
.ask-head{text-align:center;margin-bottom:20px}
.ask-head h3{font-size:24px;margin-bottom:6px}
.ask-head p{color:var(--muted);font-size:15px}
.ask-flow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ask-q{font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px;transition:border-color .3s,transform .3s var(--ease)}
.ask-q:hover{border-color:var(--a2);transform:translateY(-2px)}
.ai-touch{max-width:var(--maxw);margin:22px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center}
.ai-touch-lbl{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:600;color:var(--muted)}
.ai-chip{font-size:13px;color:var(--text);background:rgba(255,69,38,.08);border:1px solid rgba(255,69,38,.22);border-radius:8px;padding:7px 13px}

/* typing dots */
.tg-typing,.pc-typing{display:flex !important;flex-direction:row !important;gap:4px;align-items:center;width:auto}
.tg-typing i,.pc-typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;animation:typing 1.2s ease-in-out infinite}
.tg-typing i:nth-child(2),.pc-typing i:nth-child(2){animation-delay:.2s}
.tg-typing i:nth-child(3),.pc-typing i:nth-child(3){animation-delay:.4s}
.tg-typing{color:#9fb0c0}.pc-typing{color:var(--muted)}
body.lite .tg-typing i,body.lite .pc-typing i{animation:none !important;opacity:.6}

/* staggered message reveal — only when animated (not lite) */
body.anim-on .aishow-col:not(.in-view) .tg-scroll .tg-b,
body.anim-on .aishow-col:not(.in-view) .pc-scroll .pc-b{opacity:0}
body.anim-on .aishow-col.in-view .tg-scroll .tg-b,
body.anim-on .aishow-col.in-view .pc-scroll .pc-b{animation:pop .5s var(--ease) both}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(1){animation-delay:.15s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(2){animation-delay:.5s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(3){animation-delay:.85s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(4){animation-delay:1.2s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(5){animation-delay:1.55s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(6){animation-delay:1.9s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(7){animation-delay:2.25s}
body.anim-on .aishow-col.in-view :is(.tg-scroll>.tg-b,.pc-scroll>.pc-b):nth-child(8){animation-delay:2.6s}

@media(max-width:640px){
  .f2-node{min-width:52px;font-size:10.5px}
  .f2-ico{width:32px;height:32px;font-size:15px}
}

/* ============================================================
   ROI CALCULATOR — "see the money"
   ============================================================ */
.roi-card{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:0;background:linear-gradient(160deg,var(--dark-2),#0b0b13);border:1px solid rgba(255,45,69,.28);border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -50px var(--glow)}
.roi-controls{padding:clamp(28px,4vw,42px);display:flex;flex-direction:column;gap:26px;border-right:1px solid var(--line)}
.roi-slider label{display:flex;justify-content:space-between;align-items:baseline;font-family:"Space Grotesk",sans-serif;font-size:14px;color:var(--muted)}
.roi-slider label b{font-size:20px;color:var(--text)}
.roi-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--surface);border:1px solid var(--line);outline:none;margin-top:14px;cursor:pointer}
.roi-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 6px 16px -3px var(--glow);border:3px solid #12121c}
.roi-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--a2);cursor:pointer;border:3px solid #12121c}
.roi-keep{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)}
.roi-keep b{color:var(--text)}
.roi-keep-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none}
.roi-outputs{padding:clamp(28px,4vw,42px);display:flex;flex-direction:column;gap:18px;position:relative}
.roi-outputs::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 90% 0,rgba(255,69,38,.10),transparent 60%);pointer-events:none}
.roi-lbl{display:block;font-size:12.5px;color:var(--muted);letter-spacing:.02em;margin-bottom:4px}
.roi-big b,.roi-big{position:relative}
.roi-big b{font-family:"Space Grotesk",sans-serif;font-size:clamp(38px,6vw,54px);font-weight:700;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.roi-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.roi-cell b{font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:700;color:var(--text)}
.roi-cell b.accent{-webkit-text-fill-color:transparent}
.roi-bar{height:10px;border-radius:6px;background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative}
.roi-bar-fill{height:100%;width:20%;background:var(--grad);border-radius:6px;transition:width .5s var(--ease)}
.roi-bar-txt{font-size:13.5px;color:var(--muted)}
.roi-bar-txt b{color:var(--text)}
.roi-outputs .btn{margin-top:6px;position:relative}
.roi-fine{font-size:12px;color:var(--muted-2);text-align:center;position:relative}

/* ============================================================
   STICKY BUY BAR
   ============================================================ */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:99990;transform:translateY(120%);transition:transform .4s var(--ease);pointer-events:none;padding:0 14px 14px}
.stickybuy.show{transform:translateY(0);pointer-events:auto}
.sb-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:16px;background:rgba(12,12,20,.86);border:1px solid var(--line-strong);border-radius:16px;padding:12px 16px;box-shadow:0 24px 50px -24px #000;backdrop-filter:blur(16px)}
.sb-brand{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;color:var(--text);white-space:nowrap}
.sb-accent{color:var(--a2)}
.sb-price{display:flex;align-items:baseline;gap:7px;font-family:"Space Grotesk",sans-serif;font-size:14px;color:var(--text);flex-wrap:wrap}
.sb-price s{color:var(--muted-2);font-weight:400}
.sb-price b{font-size:20px;color:var(--text)}
.sb-price em{font-style:normal;font-size:12px;color:var(--muted)}
.sb-btn{margin-left:auto;white-space:nowrap}
body.lite .stickybuy{transition:none}
@media(max-width:640px){
  .sb-price em{display:none}
  .sb-brand{font-size:0;gap:0}
  .sb-brand .brand-mark{font-size:14px}
}
@media(max-width:900px){
  .roi-card{grid-template-columns:1fr}
  .roi-controls{border-right:0;border-bottom:1px solid var(--line)}
}

/* ============================================================
   FAQ (native accessible accordion)
   ============================================================ */
.faq{max-width:840px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .3s}
.faq-item[open]{border-color:var(--line-strong)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;font-family:"Space Grotesk",sans-serif;font-size:16.5px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chev{width:11px;height:11px;border-right:2px solid var(--a2);border-bottom:2px solid var(--a2);transform:rotate(45deg);transition:transform .3s var(--ease);flex:none}
.faq-item[open] .faq-chev{transform:rotate(-135deg)}
.faq-a{padding:0 22px 20px;color:var(--muted);font-size:15.5px;line-height:1.65}
.faq-a p{margin:0}
.faq-a strong{color:var(--text)}
.faq-a a{color:var(--a2)}

/* ============================================================
   ACCESSIBILITY — visible focus for keyboard users
   ============================================================ */
.tsp a:focus-visible,.tsp button:focus-visible,.tsp summary:focus-visible,.tsp input:focus-visible,
.stickybuy a:focus-visible,.lite-toggle:focus-visible{outline:2px solid var(--a2);outline-offset:3px;border-radius:8px}
.modetab:focus-visible,.tsp-thumb:focus-visible,.ask-q:focus-visible{outline:2px solid var(--a2);outline-offset:2px}

/* hosting plans extras */
.hostcta-or{display:inline-block;margin-left:12px;font-size:14px;color:var(--muted);font-style:italic;vertical-align:middle}
.host-note{max-width:760px;margin:22px auto 0;text-align:center;font-size:14px;color:var(--muted);line-height:1.7}
.host-note strong{color:var(--text)}
.host-note a{color:var(--a2)}
@media(max-width:900px){ .hostcta-or{display:block;margin:8px 0 0} }

/* ============================================================
   FLOW RAILS v2 — "animat super bine": energy wires, comet token, hub ring
   ============================================================ */
.flow2 .f2-wire{background:repeating-linear-gradient(90deg,rgba(255,45,69,.6) 0 5px,transparent 5px 15px);background-size:15px 2px;opacity:.55}
.modepanel.is-active .flow2 .f2-wire{animation:wireFlow .7s linear infinite}
@keyframes wireFlow{from{background-position:0 0}to{background-position:15px 0}}
body.lite .flow2 .f2-wire{animation:none !important;opacity:.3;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}

/* token: glowing orb + comet trail */
.flow2 .f2-dot{width:14px;height:14px;box-shadow:0 0 14px 2px var(--glow),0 0 30px var(--glow)}
.flow2 .f2-dot::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);width:38px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--a2));opacity:.55;pointer-events:none}
.flow2 .f2-back{box-shadow:0 0 14px 2px rgba(34,197,94,.55),0 0 26px rgba(34,197,94,.4)}
.flow2 .f2-back::before{right:auto;left:100%;background:linear-gradient(90deg,#22c55e,transparent)}
.modepanel.is-active .flow2 .f2-dot{animation:f2run 3.2s cubic-bezier(.45,0,.55,1) infinite}
.modepanel.is-active .flow2 .f2-back{animation:f2runback 3.2s cubic-bezier(.45,0,.55,1) 1.6s infinite}

/* hub processing ring */
.flow2 .f2-hub .f2-ico{position:relative}
.flow2 .f2-hub .f2-ico::after{content:"";position:absolute;inset:-3px;border-radius:14px;border:2px solid var(--a2);opacity:0;pointer-events:none}
.modepanel.is-active .flow2 .f2-hub .f2-ico::after{animation:hubRing 2.2s ease-out infinite}
@keyframes hubRing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.5);opacity:0}}

/* node icons breathe as the flow passes */
.modepanel.is-active .flow2 .f2-node:not(.f2-hub) .f2-ico{animation:nodeBreath 3s ease-in-out infinite}
@keyframes nodeBreath{0%,100%{border-color:var(--line-strong)}50%{border-color:rgba(255,45,69,.45)}}
body.lite .flow2 .f2-hub .f2-ico::after,body.lite .flow2 .f2-node .f2-ico{animation:none !important}

/* ============================================================
   Staggered grid reveals (more animejs-style density) — perf-gated
   ============================================================ */
body.anim-on :is(.why-grid,.everything-grid,.build-grid,.stat-row,.modes-grid,.aishow-grid,.price-grid)>[data-reveal]:nth-child(2){transition-delay:.06s}
body.anim-on :is(.why-grid,.everything-grid,.build-grid,.stat-row,.modes-grid,.aishow-grid,.price-grid)>[data-reveal]:nth-child(3){transition-delay:.12s}
body.anim-on :is(.why-grid,.everything-grid,.build-grid,.stat-row,.price-grid)>[data-reveal]:nth-child(4){transition-delay:.18s}
body.anim-on :is(.why-grid,.everything-grid,.build-grid,.stat-row)>[data-reveal]:nth-child(5){transition-delay:.24s}
body.anim-on :is(.why-grid,.everything-grid,.build-grid,.stat-row)>[data-reveal]:nth-child(6){transition-delay:.3s}
body.anim-on :is(.everything-grid)>[data-reveal]:nth-child(7){transition-delay:.36s}
body.anim-on :is(.everything-grid)>[data-reveal]:nth-child(8){transition-delay:.42s}

/* full-flow hero: extra tokens */
.token-in{fill:var(--accent);stroke:none;filter:drop-shadow(0 0 5px var(--glow))}
.token-pay{fill:#22c55e;stroke:none;filter:drop-shadow(0 0 5px rgba(34,197,94,.55))}
/* buy card under the hero badge (compact, dark on cream) */
.hero-buy{margin-top:18px}
.hero-buy .hb-card{max-width:100% !important;padding:20px 22px !important}
.hero-buy .price ins{font-size:32px !important}
.hero-buy .buy-sub{font-size:13px !important;margin-bottom:14px !important}
.hero-buy .buy-secure{font-size:11.5px}

/* kill the redundant WooCommerce screen-reader price lines ("Original price was:" / "Current price is:") */
.tsp .price .screen-reader-text,
.tsp .buy-card .screen-reader-text,
.tsp .woocommerce-Price-amount + .screen-reader-text,
.tsp span.screen-reader-text{display:none !important}

/* ------------------------------------------------------------------
   Restore the Bootstrap 5 grid for the ORIGINAL long description only.
   Bootstrap CSS is dropped site-wide on this page (it clashed with the
   custom design), but the product long-description is authored with
   .row / .col-md-* / .col-lg-* — without the grid it collapsed to a
   58,000px stack. Scoped to .tsp-desc-wrap so it can never touch the
   custom sections above. Covers exactly the classes the copy uses.
   ------------------------------------------------------------------ */
.tsp-desc-wrap .row{--gx:1.5rem;--gy:0px;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--gy));margin-right:calc(-.5*var(--gx));margin-left:calc(-.5*var(--gx))}
.tsp-desc-wrap .row>*{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(.5*var(--gx));padding-left:calc(.5*var(--gx));margin-top:var(--gy)}
.tsp-desc-wrap .row.g-2{--gx:.5rem;--gy:.5rem}
.tsp-desc-wrap .row.g-3{--gx:1rem;--gy:1rem}
.tsp-desc-wrap .text-center{text-align:center}
@media (min-width:768px){
  .tsp-desc-wrap .col-md-3{flex:0 0 auto;width:25%}
  .tsp-desc-wrap .col-md-6{flex:0 0 auto;width:50%}
}
@media (min-width:992px){
  .tsp-desc-wrap .col-lg-3{flex:0 0 auto;width:25%}
  .tsp-desc-wrap .col-lg-4{flex:0 0 auto;width:33.3333%}
  .tsp-desc-wrap .col-lg-6{flex:0 0 auto;width:50%}
}

/* flow-diagram + pipeline icons: clean line-SVGs instead of OS emoji (looks finished, brand-consistent) */
.f2-ico svg{width:1.15em;height:1.15em;display:block}
.dp-i svg{width:1.15em;height:1.15em;display:block}
.f2-ico,.dp-i{display:inline-flex;align-items:center;justify-content:center}

/* The long description carries its own scroll-reveal (product-showcase script): it can grey a
   band of copy mid-scroll and sometimes sticks elements at opacity:0. Legibility > fade-in —
   keep the description copy always crisp and fully opaque. */
.tsp-desc-wrap [class*="tsp-pre"],
.tsp-desc-wrap .tsp-pre{opacity:1 !important;transform:none !important;filter:none !important;visibility:visible !important}
/* sticky buy bar: near-solid so page text can't bleed through it */
.stickybuy .sb-inner{background:rgba(12,12,20,.95) !important}

/* ==================================================================
   Long-form product description — reading typography.
   The global `*{margin:0}` reset strips the browser's default text
   spacing, and the dropped theme/Bootstrap CSS used to supply it — so
   headings glued to paragraphs rendered as dense full-width walls.
   Restore vertical rhythm + a readable line-length, scoped to the copy.
   ================================================================== */
.tsp-desc-wrap{line-height:1.75}
.tsp-desc-wrap h1,.tsp-desc-wrap h2,.tsp-desc-wrap h3,.tsp-desc-wrap h4,.tsp-desc-wrap h5{font-family:"Space Grotesk",sans-serif;line-height:1.25;font-weight:600}
.tsp-desc-wrap h1{font-size:clamp(26px,4vw,36px);margin:1.7em 0 .5em}
.tsp-desc-wrap h2{font-size:clamp(21px,3vw,28px);margin:1.8em 0 .5em}
.tsp-desc-wrap h3{font-size:clamp(17px,2.2vw,21px);margin:1.55em 0 .4em}
.tsp-desc-wrap h4,.tsp-desc-wrap h5{font-size:16px;margin:1.35em 0 .35em;color:var(--muted)}
.tsp-desc-wrap p{margin:0 0 1.05em;line-height:1.75;max-width:72ch}
.tsp-desc-wrap ul,.tsp-desc-wrap ol{margin:0 0 1.15em;padding-left:1.35em;max-width:72ch}
.tsp-desc-wrap li{margin:.3em 0;line-height:1.6}
.tsp-desc-wrap li::marker{color:var(--a1)}
/* A bold word is emphasis, not a fixed white: #fff here made every <strong>
   in the 140 KB description invisible on the light ground (1.06:1, measured
   2026-09-08 across 16 elements). --text is the emphasis ink and it is
   redefined for light mode further down this file, so both themes follow. */
.tsp-desc-wrap strong,.tsp-desc-wrap b{color:var(--text);font-weight:600}
.tsp-desc-wrap a{color:var(--a1);text-decoration:underline;text-underline-offset:2px}
.tsp-desc-wrap hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.tsp-desc-wrap img{max-width:100%;height:auto;border-radius:12px}
/* the restored margins must never push the first element of a card/block down */
.tsp-desc-wrap [class*="card"]>*:first-child,
.tsp-desc-wrap [class*="tsp-"]>*:first-child{margin-top:0}

/* Full write-up collapsed behind a toggle — content stays in the DOM (SEO), page stays short */
.tsp-fulldesc .fulldesc{text-align:center;max-width:var(--maxw);margin:0 auto}
.fulldesc-toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text);font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;transition:background .2s var(--ease),border-color .2s var(--ease)}
.fulldesc-toggle::-webkit-details-marker{display:none}
.fulldesc-toggle::marker{content:""}
.fulldesc-toggle:hover{background:rgba(255,255,255,.06);border-color:var(--a1)}
.fulldesc-toggle:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.fd-chev{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.fulldesc[open] .fd-chev{transform:rotate(180deg)}
.fulldesc .fd-close{display:none}
.fulldesc[open] .fd-open{display:none}
.fulldesc[open] .fd-close{display:inline}
.fulldesc > .tsp-desc-wrap{text-align:left;margin-top:46px;animation:fdIn .4s var(--ease)}
@keyframes fdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* bulletproof collapse — some Chromium versions render <details> content via ::details-content
   with content-visibility, so force the hide explicitly */
.fulldesc:not([open]) > .tsp-desc-wrap{display:none !important}
.fulldesc[open] > .tsp-desc-wrap{display:block}

/* Language flags are <img class="ts-flag" src="…/gb.svg"> — SVGs with NO intrinsic width, so with
   max-width:100% they balloon to the full container width (a giant flag). Force a small inline flag.
   Their sizing CSS lived in the theme's flag-icon stylesheet, which is dropped on this page. */
.tsp-desc-wrap img.ts-flag,
.tsp-desc-wrap .ts-flag,
img.ts-flag{width:22px !important;height:16px !important;max-width:22px !important;display:inline-block;vertical-align:-3px;object-fit:cover;border-radius:2px;margin:0 5px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* ==================================================================
   Product write-up SHOWCASE components (.ts-*). Their base look lived
   in the theme's style.min.css (dropped on this page), so every card
   rendered bare/transparent. Re-style them in the page's dark design,
   scoped to .tsp-desc-wrap so nothing else is touched.
   ================================================================== */
.tsp-desc-wrap .ts-section{padding:34px 0;max-width:none}
.tsp-desc-wrap .ts-h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(23px,3.2vw,32px);font-weight:600;color:var(--text);margin:.2em 0 .45em;line-height:1.22;max-width:none}
.tsp-desc-wrap .ts-lede{font-size:clamp(16px,1.8vw,18px);color:var(--muted);max-width:70ch;margin:0 0 1.7em;line-height:1.7}
/* kicker label + accent dash */
.tsp-desc-wrap .ts-kicker{display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--a1);margin:0 0 16px}
.tsp-desc-wrap .ts-dash{display:inline-block;width:26px;height:2px;background:var(--grad);border-radius:2px;flex:none}
/* cards */
.tsp-desc-wrap .ts-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:22px 24px;height:100%}
.tsp-desc-wrap .ts-card__title{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:600;color:var(--text);margin:0 0 9px;line-height:1.3}
.tsp-desc-wrap .ts-card__sub{font-size:14.5px;color:var(--muted);margin:0;line-height:1.65;max-width:none}
/* feature list items */
.tsp-desc-wrap .ts-feat{display:flex;gap:12px;padding:15px 0;border-top:1px solid var(--line);align-items:flex-start}
.tsp-desc-wrap .ts-feat:first-child{border-top:0}
.tsp-desc-wrap .ts-feat::before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--grad)}
.tsp-desc-wrap .ts-feat__title{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--text);margin:0 0 4px;font-size:15px}
.tsp-desc-wrap .ts-feat__sub{color:var(--muted);margin:0;font-size:14px;line-height:1.6;max-width:none}
/* tool / spec chips */
.tsp-desc-wrap .ts-tool{display:inline-block;padding:6px 13px;margin:0 7px 9px 0;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;font-size:13px;color:var(--text);font-weight:500}
/* FAQ */
.tsp-desc-wrap .ts-faq{padding:18px 0;border-top:1px solid var(--line)}
.tsp-desc-wrap .ts-faq__q{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--text);margin:0 0 7px;font-size:16px}
.tsp-desc-wrap .ts-faq__a{color:var(--muted);margin:0;line-height:1.7;max-width:none}
/* grids (independent of Bootstrap) */
.tsp-desc-wrap [class*="ts-grid"]{display:grid;gap:18px;margin:0 0 1.5em;align-items:stretch}
.tsp-desc-wrap .ts-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tsp-desc-wrap .ts-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tsp-desc-wrap .ts-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.tsp-desc-wrap .ts-grid-3,.tsp-desc-wrap .ts-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.tsp-desc-wrap [class*="ts-grid"]{grid-template-columns:1fr}}

/* AI Assistant demo — rebuilt as an always-visible command chat (the old .as-* demo depended on a
   scroll-triggered animation that could leave the box empty). Multiple real-action examples. */
.demo-assistant{display:flex;flex-direction:column;background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:300px;padding:0}
.asx-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:600;color:var(--text)}
.asx-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px var(--glow)}
.asx-tag{margin-left:auto;font-size:11px;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:2px 9px;font-family:monospace}
.asx-scroll{padding:15px 16px;display:flex;flex-direction:column;gap:9px}
.asx-row{font-size:13px;line-height:1.4}
.asx-row.user{align-self:flex-end;max-width:90%;background:var(--grad);color:#fff;padding:8px 13px;border-radius:12px 12px 4px 12px;font-weight:500}
.asx-row.act{align-self:stretch;background:rgba(255,255,255,.04);border:1px solid var(--line-strong);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:10px}
.asx-act-t{color:var(--text)}
.asx-btns{display:flex;gap:8px}
.asx-btns i{font-style:normal;font-size:12px;font-weight:600;padding:5px 15px;border-radius:8px}
.asx-btns .y{background:var(--grad);color:#fff}
.asx-btns .n{background:transparent;color:var(--muted);border:1px solid var(--line-strong);font-weight:500}
.asx-row.done{align-self:flex-start;color:var(--muted);font-size:12.5px}
.asx-row.done::before{content:"✓ ";color:#22c55e;font-weight:700}
.asx-input{margin-top:auto;border-top:1px solid var(--line);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.asx-slash{background:rgba(255,255,255,.08);border:1px solid var(--line-strong);border-radius:6px;padding:1px 8px;font-family:monospace;color:var(--text);font-weight:400}

/* ============ HOW IT WORKS — end-to-end flow ============ */
.how .flow-steps{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px;max-width:var(--maxw);margin:0 auto}
.fstep{flex:1 1 150px;min-width:148px;max-width:186px;background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:20px 16px;text-align:center;display:flex;flex-direction:column;gap:6px}
.fstep-n{width:30px;height:30px;margin:0 auto 5px;border-radius:50%;background:var(--grad);color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 0 14px var(--glow)}
.fstep b{font-family:"Space Grotesk",sans-serif;font-size:14.5px;color:var(--text)}
.fstep em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.5}
.fstep-arrow{align-self:center;width:18px;height:2px;background:var(--line-strong);position:relative;flex:none;margin-top:34px}
.fstep-arrow::after{content:"";position:absolute;right:-2px;top:-3px;border:4px solid transparent;border-left-color:var(--a1)}
@media(max-width:900px){.how .flow-steps{flex-direction:column;align-items:center}.fstep{max-width:360px;width:100%}.fstep-arrow{transform:rotate(90deg);margin:2px 0}}

/* ============ WHY WORKSHOPS SWITCH ============ */
.switch-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px;margin:0 auto}
@media(max-width:720px){.switch-grid{grid-template-columns:1fr}}
.switch-card{display:grid;grid-template-columns:1fr auto 1.25fr;align-items:center;gap:14px;background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.switch-card .sw-from{color:var(--muted);font-size:14px;text-decoration:line-through;text-decoration-color:var(--a2);text-decoration-thickness:1px}
.switch-card .sw-arrow{color:var(--a1);font-weight:700;font-size:18px}
.switch-card .sw-to{color:var(--text);font-size:14px;font-weight:500;line-height:1.4}

/* ============ COMPARISON TABLE ============ */
.cmp-wrap{max-width:880px;margin:0 auto;overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.cmp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.cmp-table th,.cmp-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp-table thead th{font-family:"Space Grotesk",sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line-strong)}
.cmp-table th.cmp-us,.cmp-table td.cmp-us{background:rgba(255,69,38,.06);color:var(--text)}
.cmp-table thead th.cmp-us{color:var(--a1);font-size:15px;text-transform:none;letter-spacing:0;font-weight:700}
.cmp-table td:first-child{color:var(--muted)}
.cmp-table .yes{color:#22c55e;font-weight:700;margin-right:5px}
.cmp-table .no{color:var(--muted-2);font-weight:700;margin-right:5px}
.cmp-table tbody tr:last-child td{border-bottom:0}
/* switch cards: stack from→to vertically on small screens so the text isn't cramped */
@media(max-width:520px){
  .switch-card{grid-template-columns:1fr;gap:8px;text-align:left}
  .switch-card .sw-arrow{transform:rotate(90deg);justify-self:start;margin:2px 0}
}

/* mode-tab flow: add a clear direction arrowhead at the end of each wire */
.flow2 .f2-wire{position:relative}
.flow2 .f2-wire::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--a2);opacity:.75;z-index:2}
.flow2.flow2-bi .f2-wire::after{opacity:.55}

/* "NEW" badge on feature tags */
.feat-new{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--grad);padding:2px 7px;border-radius:6px;vertical-align:middle}

/* Dealer Pro — branded document mockup (a light "printed paper" that pops on the dark page) */
.demo-dealerpro{display:flex;align-items:center;justify-content:center;padding:22px;min-height:280px}
.dpr-doc{width:100%;max-width:320px;background:#fdfdfb;color:#1a1a1a;border-radius:12px;padding:20px 22px;box-shadow:0 24px 60px -22px rgba(0,0,0,.7);font-size:13px}
.dpr-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:2px solid #ececec}
.dpr-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#7c3aed);flex:none}
.dpr-name{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;color:#111}
.dpr-pro{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.05em;color:#fff;background:var(--grad);padding:3px 9px;border-radius:6px}
.dpr-title{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16px;margin:13px 0 10px;color:#111}
.dpr-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f1f1f1;color:#555}
.dpr-row b{color:#111}
.dpr-foot{display:flex;justify-content:space-between;margin-top:13px;font-size:11px;color:#8a8a8a}

/* mode-tab flow: a packet rides EVERY segment (continuous pipeline, not one dot) + fit 4–5 stages */
.flow2 .f2-node{min-width:54px;max-width:100px}
.flow2 .f2-wire::before{content:"";position:absolute;top:50%;left:2px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px var(--glow);opacity:0;z-index:3}
.modepanel.is-active .flow2 .f2-wire::before{animation:wirePk 1.9s linear infinite}
@keyframes wirePk{0%{left:2px;opacity:0}14%{opacity:1}80%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}
body.lite .flow2 .f2-wire::before,body[data-perf-tier="saver"] .flow2 .f2-wire::before{animation:none !important;opacity:0}
@media(prefers-reduced-motion:reduce){.flow2 .f2-wire::before{animation:none !important;opacity:0}}
@media(max-width:820px){.flow2{overflow-x:auto}}

/* ===== AI File Match demo (anime.js choreographed) ===== */
.demo-match{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:20px}
.mx-file{position:relative;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid var(--line-strong);border-radius:12px;padding:13px 15px;overflow:hidden}
.mx-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:15px;flex:none}
.mx-meta b{display:block;font-family:"Space Grotesk",sans-serif;font-size:14px;color:var(--text)}
.mx-meta em{font-style:normal;font-size:12px;color:var(--muted)}
.mx-beam{position:absolute;top:0;bottom:0;width:45%;left:-120%;background:linear-gradient(90deg,transparent,rgba(255,69,38,.28),transparent);pointer-events:none}
.mx-sha{display:flex;align-items:center;gap:10px;margin:14px 0 8px}
.mx-sha-k{color:var(--muted);font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.mx-sha-v{color:var(--a1);font-family:monospace;font-size:12.5px;letter-spacing:.5px}
.mx-rows{display:flex;flex-direction:column;margin:4px 0}
.mx-kv{display:flex;justify-content:space-between;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px}
.mx-kv span{color:var(--muted)}
.mx-val{color:var(--text);font-family:monospace}
.mx-net{display:flex;align-items:center;justify-content:space-between;margin:13px 0 15px}
.mx-net-k{color:var(--muted);font-size:12px}
.mx-dots{display:flex;gap:6px}
.mx-dots i{width:9px;height:9px;border-radius:50%;background:var(--grad);box-shadow:0 0 6px var(--glow)}
.mx-match{display:flex;align-items:center;gap:12px}
.mx-badge{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--grad);padding:7px 15px;border-radius:9px;box-shadow:0 0 18px var(--glow)}
.mx-deliver{color:#22c55e;font-size:13px;font-weight:600}

/* ===== Vehicle Hub dyno demo (anime.js draw) ===== */
.demo-hub{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:22px}
.vh-plate{display:inline-flex;align-items:stretch;background:#f5d000;border-radius:7px;overflow:hidden;font-family:"Space Grotesk",sans-serif;font-weight:700;margin-bottom:16px}
.vh-gb{background:#0a3d91;color:#fff;font-size:10px;display:flex;align-items:center;padding:0 7px;letter-spacing:.5px}
.vh-reg{color:#111;font-size:20px;letter-spacing:1.5px;padding:7px 12px}
.vh-spec{display:flex;flex-direction:column;margin-bottom:12px}
.vh-row{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.vh-row span{color:var(--muted)}.vh-row b{color:var(--text)}
.vh-dyno{width:100%;height:auto;display:block;margin:8px 0 4px}
.vh-grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.vh-band{fill:rgba(255,69,38,.13);stroke:none}
.vh-stock{fill:none;stroke:#79798a;stroke-width:2.4;stroke-linecap:round}
.vh-tuned{fill:none;stroke:var(--a1);stroke-width:2.8;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--glow))}
.vh-ax{fill:var(--muted-2);font-size:8px;font-family:"Space Grotesk",sans-serif}
.vh-gain{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.vh-gain-s{color:var(--muted);font-size:13px}
.vh-gain b{color:var(--a1);font-family:"Space Grotesk",sans-serif;font-size:13px}

/* ===== Try the live demo CTA ===== */
.trydemo{text-align:center}
.trydemo-card{max-width:760px;margin:0 auto;background:linear-gradient(160deg,rgba(255,69,38,.09),var(--surface-solid) 60%);border:1px solid var(--line-strong);border-radius:22px;padding:clamp(32px,5vw,54px)}
.trydemo-card .kicker{margin-bottom:16px}
.trydemo-card h2{margin-bottom:14px}
.trydemo-card .section-lead{margin:0 auto 26px}
.trydemo-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.trydemo-note{display:inline-flex;align-items:flex-start;gap:9px;max-width:600px;margin:0 auto;font-size:13.5px;color:var(--muted);line-height:1.6;text-align:left;padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px}
.trydemo-note svg{flex:none;margin-top:2px;color:var(--a1)}
.trydemo-note a{color:var(--a1);text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.trydemo-note{flex-direction:column;align-items:center;text-align:center}}

/* ===== Trust — fair questions / objection handling ===== */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;margin:0 auto}
@media(max-width:720px){.trust-grid{grid-template-columns:1fr}}
.trust-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.trust-q{display:block;font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:600;color:var(--text);margin-bottom:11px}
.trust-q::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grad);margin-right:10px;vertical-align:middle;box-shadow:0 0 8px var(--glow)}
.trust-card p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0}
.trust-card b{color:var(--text)}
.trust-card a{color:var(--a1);text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   PORTED SHOWCASES v1.5.2 — wow carousel, analytics dashboard,
   owner control strip, marketplace + quick file tool demos
   ============================================================ */
:root{--glass:rgba(12,16,30,.55);--elec:#00d9ff}
.demo-market{display:flex;flex-direction:column;gap:11px;justify-content:center}
.mk-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.mk-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(0,217,255,.12);color:var(--elec);font-size:14px;flex:none}
.mk-meta{flex:1;min-width:0}
.mk-meta b{display:block;font-size:14px;font-family:"Space Grotesk",sans-serif}
.mk-meta em{font-style:normal;font-size:11.5px;color:#22e88c}
.mk-btn{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:9px;background:var(--grad);color:#fff;min-width:100px;text-align:center;position:relative;overflow:hidden;flex:none}
.mk-btn.installing{background:rgba(255,255,255,.06);color:var(--muted)}
.mk-btn.done{background:rgba(34,232,140,.14);color:#22e88c}
.mk-btn .mk-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,217,255,.25)}
.demo-batch{display:flex;flex-direction:column;gap:12px}
.bt-drop{display:flex;align-items:center;justify-content:center;gap:9px;height:60px;border:1.5px dashed var(--line-strong);border-radius:12px;color:var(--muted-2);font-family:"Space Grotesk",sans-serif;font-size:13px}
.bt-ic{font-size:17px;color:var(--elec)}
.bt-list{display:flex;flex-direction:column;gap:7px;min-height:126px}
.bt-item{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12.5px;opacity:0}
.bt-item .bt-name{font-family:"JetBrains Mono",monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.bt-item .bt-hash{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--elec)}
.bt-item .bt-ok{color:#22e88c;font-weight:700}
.wow-carousel{position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 70px -40px #000}
.wow-track{display:flex;transition:transform .55s cubic-bezier(.22,.7,.2,1);will-change:transform}
.wow-slide{flex:0 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(28px,5vw,54px) clamp(24px,5vw,54px) clamp(44px,6vw,64px)}
.wow-copy .slide-eyebrow{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--elec)}
.wow-copy h3{font-size:clamp(21px,3vw,30px);margin:10px 0 12px;line-height:1.1}
.wow-copy p{color:var(--muted);font-size:15px;line-height:1.65;max-width:440px}
.wow-visual{display:flex;align-items:center;justify-content:center}
.wow-arrow{position:absolute;top:44%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(10,14,26,.72);backdrop-filter:blur(8px);border:1px solid var(--line-strong);color:#fff;font-size:22px;line-height:1;cursor:pointer;z-index:3;display:grid;place-items:center;transition:border-color .2s,background .2s}
.wow-arrow:hover{border-color:var(--elec);background:rgba(10,14,26,.9)}
.wow-arrow.prev{left:14px}
.wow-arrow.next{right:14px}
.wow-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.wow-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);border:none;cursor:pointer;padding:0;transition:width .25s,background .25s}
.wow-dot.on{background:var(--a1);width:22px;border-radius:4px}
.wv-panel{width:100%;max-width:320px;background:rgba(9,13,24,.9);border:1px solid var(--line-strong);border-radius:14px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.wv-bub{max-width:82%;padding:9px 13px;border-radius:13px;font-size:13px;margin-bottom:8px}
.wv-bub.in{background:rgba(255,255,255,.05);border:1px solid var(--line);border-bottom-left-radius:4px}
.wv-bub.out{background:var(--grad);color:#fff;border-bottom-right-radius:4px;margin-left:auto}
.wv-bub.out.mono{font-family:"JetBrains Mono",monospace}
.wv-bub b.accent{color:#fff}
.wv-chan{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wv-chan span{font-family:"Space Grotesk",sans-serif;font-size:10.5px;padding:4px 9px;border-radius:7px;background:rgba(0,217,255,.08);border:1px solid rgba(0,217,255,.22);color:var(--elec)}
.wv-flow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.wv-photo{width:88px;height:66px;border-radius:10px;background:linear-gradient(135deg,#243049,#121a2c);border:1px solid var(--line-strong);display:grid;place-items:center;font-size:26px}
.wv-arrowi{color:var(--a1);font-size:20px}
.wv-plate{display:flex;align-items:stretch;border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.2);font-family:"Space Grotesk",sans-serif;font-weight:700}
.wv-plate .gb{background:#1a3fb8;color:#ffd400;font-size:9px;display:grid;place-items:center;padding:0 6px}
.wv-plate b{background:#f4d000;color:#111;font-size:15px;padding:7px 10px;letter-spacing:.05em}
.wv-car{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:13px}
.wv-car b{display:block;font-family:"Space Grotesk",sans-serif}
.wv-car span{color:var(--muted-2);font-size:11.5px}
.wv-notif{display:flex;flex-direction:column;gap:8px;width:100%;max-width:300px}
.wv-nrow{display:flex;align-items:center;gap:10px;background:rgba(9,13,24,.85);border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-size:13px}
.wv-nrow .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,107,26,.12);color:var(--a1);flex:none;font-size:14px}
.wv-nrow small{margin-left:auto;color:#22e88c;font-size:11px;font-family:"Space Grotesk",sans-serif}
.wv-cert{width:190px;background:linear-gradient(160deg,#fff,#eef1f6);border-radius:10px;padding:16px 14px;color:#1a2130;box-shadow:0 24px 50px rgba(0,0,0,.5);transform:rotate(-3deg)}
.wv-cert .ct{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#ff6b1a}
.wv-cert .cbig{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:26px;margin:6px 0}
.wv-cert .cl{height:6px;border-radius:3px;background:#dfe4ee;margin:6px 0}
.wv-cert .cl.s{width:60%}
.wv-cert .cbadge{margin-top:10px;font-size:10px;font-weight:700;color:#0a9d54}
@media(max-width:768px){
.wow-slide{grid-template-columns:1fr}
.wow-visual{order:-1}
}
.rotframe{position:relative;margin:34px auto 0;background:linear-gradient(165deg,#13131f,#0a0a12);border:1px solid var(--line);border-radius:20px;box-shadow:0 46px 92px -56px rgba(0,0,0,.95);overflow:hidden}
.rotframe::before{content:"";position:absolute;inset:0;background:radial-gradient(115% 70% at 84% -8%,rgba(255,106,31,.12),transparent 62%);pointer-events:none;z-index:0}
.rot-head{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line);position:relative;z-index:2}
.rot-ava{width:32px;height:32px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;box-shadow:0 0 18px var(--glow);flex:none}
.rot-hmeta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rot-hmeta b{font-size:14px;color:var(--text)}
.rot-hmeta small{font-size:11.5px;color:var(--muted)}
.rot-hmeta small .liveon{color:#22e88c;font-weight:600}
.rot-tag{margin-left:auto;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--a1);background:rgba(255,106,31,.1);border:1px solid rgba(255,106,31,.30);padding:5px 11px;border-radius:999px;white-space:nowrap;transition:opacity .3s;flex:none}
.rot-view{position:relative;z-index:1}
.rot-slide{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;padding:20px}
.rot-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.rot-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:14px 16px 17px;position:relative;z-index:2}
.rot-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:.3s}
.rot-dots i.on{background:var(--a1);width:20px;border-radius:5px}
.ai-stage .rot-view{min-height:344px}
.capgrid{max-width:1140px;margin:44px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:22px 28px}
.capcol h4{font-family:"Space Grotesk",sans-serif;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--text);margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.capcol h4 .ci{color:var(--a1);font-size:15px}
.capcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.capcol li{position:relative;padding-left:17px;font-size:13px;color:var(--muted);line-height:1.42}
.capcol li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--a1);opacity:.75}
.capcol li b{color:var(--text);font-weight:600}
.capcol li code{color:var(--text);font-weight:600;font-family:"Space Grotesk",ui-monospace,monospace;font-size:12px;background:rgba(255,255,255,.05);padding:0 5px;border-radius:5px}
.cap-note{max-width:1140px;margin:20px auto 0;text-align:center;font-size:13px;color:var(--muted-2);font-style:italic}
.dash-stage{max-width:772px}
.dash-stage .rot-view{min-height:318px}
.dv{display:flex;flex-direction:column;gap:14px;min-height:278px}
.dv-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.dv-kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.dv-kpi span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:block}
.dv-kpi b{font-family:"Space Grotesk",sans-serif;font-size:23px;color:var(--text);display:block;margin-top:5px;line-height:1.05}
.dv-kpi b em{font-size:13px;font-style:normal;color:var(--muted)}
.dv-kpi .up{font-size:11px;color:#22e88c;font-weight:600}
.dv-bars{display:flex;align-items:flex-end;gap:9px;height:98px;padding-top:6px}
.dv-bars i{flex:1;background:var(--grad);border-radius:6px 6px 0 0;min-height:8px;opacity:.9}
.dv-legend{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2)}
.dv-title{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.dv-rows{display:flex;flex-direction:column;gap:11px}
.dv-row{display:grid;grid-template-columns:120px 1fr 58px;gap:12px;align-items:center;font-size:13px;color:var(--text)}
.dv-row .track{height:8px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.dv-row .fill{height:100%;background:var(--grad);border-radius:5px}
.dv-row .val{text-align:right;color:var(--muted);font-family:"Space Grotesk",sans-serif}
.dv-split{display:flex;align-items:center;gap:24px}
.dv-donut{width:122px;height:122px;border-radius:50%;flex:none;position:relative;background:conic-gradient(var(--a1) 0 63%,#3a3550 63% 100%)}
.dv-donut::after{content:"";position:absolute;inset:17px;border-radius:50%;background:#0e0e17}
.dv-donut b{position:absolute;inset:0;display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-size:19px;color:var(--text);z-index:1}
.dv-leg{display:flex;flex-direction:column;gap:10px;font-size:13px}
.dv-leg span{display:flex;align-items:center;gap:8px;color:var(--muted)}
.dv-leg i{width:11px;height:11px;border-radius:3px;flex:none}
.dv-leg b{color:var(--text)}
.dv-chips{display:flex;flex-wrap:wrap;gap:8px}
.dv-chips span{font-family:"Space Grotesk",sans-serif;font-size:12.5px;color:var(--text);background:var(--surface);border:1px solid var(--line);padding:6px 11px;border-radius:8px}
.dv-chips span b{color:var(--a1)}
.dv-health{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dv-hrow{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.dv-hrow .hd{width:9px;height:9px;border-radius:50%;background:#22e88c;box-shadow:0 0 8px rgba(34,232,140,.6);flex:none}
.dv-hrow small{margin-left:auto;color:var(--muted);font-family:"Space Grotesk",sans-serif}
.dv-stars{display:flex;align-items:center;gap:14px}
.dv-stars b{font-family:"Space Grotesk",sans-serif;font-size:30px;color:var(--text)}
.dv-stars .s{color:var(--a1);font-size:19px;letter-spacing:3px}
.dv-stars small{color:var(--muted);font-size:12.5px}
.dv-review{font-size:13px;color:var(--muted);font-style:italic;border-left:2px solid var(--a1);padding-left:11px;margin-top:2px}
@media(max-width:640px){
.capgrid{grid-template-columns:1fr}
.dv-row{grid-template-columns:92px 1fr 46px;gap:9px}
.dv-split{flex-direction:column;align-items:flex-start;gap:16px}
.dv-health{grid-template-columns:1fr}
.rot-tag{display:none}
}
@media(prefers-reduced-motion:reduce){
.rot-slide{transition:opacity .2s linear}
}
.ai-side-pro .rot-ava{background:linear-gradient(135deg,#00d9ff,#0077ff);box-shadow:0 0 18px rgba(0,217,255,.35)}
.ai-side-pro .rot-tag{color:var(--elec);background:rgba(0,217,255,.08);border-color:rgba(0,217,255,.3)}
.ai-side-pro .rot-dots i.on{background:var(--elec)}
.rot-slide .cv>*{opacity:0;transform:translateY(9px)}
.rot-slide.is-active .cv>*{animation:bubIn .5s var(--ease) both}
.rot-slide.is-active .cv>*:nth-child(1){animation-delay:.12s}
.rot-slide.is-active .cv>*:nth-child(2){animation-delay:.5s}
.rot-slide.is-active .cv>*:nth-child(3){animation-delay:.95s}
.rot-slide.is-active .cv>*:nth-child(4){animation-delay:1.3s}
.rot-slide.is-active .dyno-tuned{animation:dynoDraw 1.5s .7s var(--ease) forwards}
.ai-ctrl{display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap;max-width:1150px;margin:44px auto 0;padding:20px 22px;background:var(--glass);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);border:1px solid var(--line-strong);border-radius:18px}
.ai-ctrl-copy{flex:1 1 340px;min-width:260px}
.ai-ctrl-copy b{display:flex;align-items:center;gap:9px;font-family:"Space Grotesk",sans-serif;font-size:15.5px;color:var(--text)}
.ai-ctrl-copy b svg{color:var(--a1);flex:none}
.ai-ctrl-copy span{display:block;font-size:13px;color:var(--muted);line-height:1.55;margin-top:5px}
.ai-ctrl-toggles{flex:1 1 300px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-content:center}
.tgl{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-size:12px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:7px 12px;border-radius:999px}
.tgl em{font-style:normal;color:var(--muted-2);font-size:10.5px}
.tgl i{position:relative;width:26px;height:15px;border-radius:999px;background:rgba(255,255,255,.12);flex:none;transition:background .35s var(--ease)}
.tgl i::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#8a8a99;transition:left .35s var(--ease),background .35s var(--ease)}
.ai-ctrl.in-view .tgl.on{color:var(--text);border-color:rgba(255,106,31,.35)}
.ai-ctrl.in-view .tgl.on i{background:rgba(255,106,31,.55)}
.ai-ctrl.in-view .tgl.on i::after{left:13px;background:#fff}
.ai-ctrl.in-view .tgl:nth-child(1) i,.ai-ctrl.in-view .tgl:nth-child(1) i::after{transition-delay:.25s}
.ai-ctrl.in-view .tgl:nth-child(2) i,.ai-ctrl.in-view .tgl:nth-child(2) i::after{transition-delay:.4s}
.ai-ctrl.in-view .tgl:nth-child(3) i,.ai-ctrl.in-view .tgl:nth-child(3) i::after{transition-delay:.55s}
.ai-ctrl.in-view .tgl:nth-child(5) i,.ai-ctrl.in-view .tgl:nth-child(5) i::after{transition-delay:.7s}
.ai-notif{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;max-width:1150px;margin:18px auto 0;padding:15px 22px;border:1px dashed var(--line-strong);border-radius:15px}
.ai-notif b{font-family:"Space Grotesk",sans-serif;font-size:14px;color:var(--text);flex:none}
.ai-notif>span{font-size:12.5px;color:var(--muted);flex:1 1 260px;min-width:220px}
.ai-notif-chips{display:flex;flex-wrap:wrap;gap:7px}
.ai-notif-chips span{font-family:"Space Grotesk",sans-serif;font-size:11.5px;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
@media(max-width:960px){
.ai-ctrl-toggles{justify-content:flex-start}
}
@media(max-width:560px){
.ai-stage .rot-view{min-height:316px}
.ai-ctrl{padding:17px 16px}
.ai-notif{padding:13px 16px}
}
@media(prefers-reduced-motion:reduce){
.rot-slide .cv>*{opacity:1;transform:none;animation:none!important}
.tgl i,.tgl i::after{transition:none}
}
.btn,.wa-fab,.ct-topic,.rot-dots i,.faq-item summary{-webkit-tap-highlight-color:transparent}

/* ==========================================================================
   LIGHT MODE — the product page had none.
   This file carries 22 :root tokens and, until now, zero light rules, so in
   light mode it painted #f3f3f7 text on a #f6f8fc ground: 1.04:1 across 301
   elements. The main sales page was unreadable for anyone whose site theme is
   light, and nothing said so because the page had never been contrast-audited.
   Every value below is measured against the light ground, not guessed.
   ========================================================================== */
body.light-mode{
  --dark:          #f7f8fa;   /* page ground              */
  --dark-2:        #eef0f4;   /* recessed band            */
  --surface:       rgba(15,23,42,.035);
  --surface-solid: #ffffff;
  --line:          rgba(15,23,42,.10);
  --line-strong:   rgba(15,23,42,.18);
  --text:          #12121c;   /* 17.50:1 */
  --muted:         #55555f;   /*  6.93:1 */
  --muted-2:       #5f5f6d;   /*  5.91:1 */
  --cream:         #3a3730;   /* 11.17:1 - was a light ink for dark panels */
  --cream-2:       #4a463c;   /*  8.85:1 */
  --ink:           #12120e;   /* 17.67:1 */
  --ink-2:         #4a4840;   /*  8.62:1 */
}
/* The page ground itself, which the tokens above do not repaint on their own. */
body.light-mode .ts-product,
body.light-mode #tsp-root,
body.light-mode .tsp-page{ background:var(--dark); color:var(--text); }

/* The mockups keep their own dark ground in BOTH themes — they are pictures of
   a portal, not part of the page chrome — so flipping --text to a dark ink made
   them unreadable in light mode: #12121c on #0f0f17 measured 1.03:1.
   A fixed surface needs a fixed ink. Same lesson as the terminal panel on
   /about-us/: theme tokens belong on theme-aware surfaces only. */
body.light-mode :is(
  .wl-shell, .wl-name, .wl-side, .wl-main,
  .ms-shell, .ms-brand, .ms-grp, .ms-row,
  .sb-shell, .sb-brand, .sb-item,
  .wv-shell, .wv-nrow, .wv-head,
  .demo-shell, .mock, .mockup, .phone, .laptop
){
  --text:  #f3f3f7;
  --muted: #9b9baf;
  --ink:   #f3f3f7;
  color:   #f3f3f7;
}
body.light-mode :is(.wl-shell,.ms-shell,.sb-shell,.wv-shell,.demo-shell,.mock,.mockup) :is(span,div,p,b,strong,em,li,a){
  color: inherit;
}

/* Measured, not guessed. Each group below comes from the audit's own fg/bg
   pairs on this page in light mode. */

/* 1. The orange accent is a signal colour, and on the light ground it read
      2.69:1 across 22 elements. Darkened for TEXT use only - fills, borders and
      buttons keep the brand orange, because there the orange is the surface and
      the ink sits on top of it. */
body.light-mode{ --a1-ink: #b8420a; }            /* 5.19:1 on the page ground #f7f8fa,
                                                    4.87:1 on the comparison table's
                                                    tinted cell #f7edef, which the old
                                                    #c2470a missed at 4.36:1 - it was
                                                    only ever measured on the ground */
body.light-mode :is(.kicker, .feature-tag, .slide-eyebrow, .eyebrow,
                    .cmp-us, .mx-deliver, .a1-text,
                    .why-num, .mx-sha-v, th.cmp-us){ color: var(--a1-ink); }

/* 2. Panels that keep a dark ground in light mode. These are pictures of a
      product, so the ink stays light regardless of theme - the same rule the
      terminal panel on /about-us/ needed. */
body.light-mode :is(.ms-item, .ms-shell, .wv-bub, .wv-shell, .sb-shell,
                    .wl-shell, .demo-shell){
  color: #f3f3f7;
}
body.light-mode :is(.ms-item, .wv-bub) :is(b, em, span, div, p){ color: inherit; }

/* 3. The same lesson as the mockups above, for the components the first pass
      missed - but applied only where it is TRUE. Measured in light mode, the
      candidates split three ways by their effective background luminance:

        genuinely dark (13-31)  .wow-carousel .sb-inner .tg-top .tg-input
        genuinely light (255)   .ts-tool .dv-kpi .ask-q .tsp-stats .tsp-pre
                                .bl-invoice .tg-card .mk-row .tg-msg
        stuck mid-grey (121-137) .ai-chip .tdb-recent-buys

      Only the first group may keep light ink. Forcing it on the second put
      #f3f3f7 on #eff1f5, which is how a fix becomes a bug. The third group is
      the real defect: on a mid-grey nothing reaches 4.5:1 - white manages only
      4.03 - so the SURFACE has to move, not the ink. */
body.light-mode :is(.wow-carousel, .sb-inner, .tg-top, .tg-input){
  --surface:       rgba(255,255,255,.06);
  --surface-solid: #14141c;
  --line:          rgba(255,255,255,.10);
  --line-strong:   rgba(255,255,255,.18);
  --text:          #f3f3f7;
  --muted:         #b6b6c6;
  --muted-2:       #9b9baf;
  --cream:         #f3f3f7;
  --cream-2:       #d8d8e4;
  --ink:           #f3f3f7;
  --ink-2:         #d8d8e4;
  --a1-ink:        #ff9d5c;   /* the accent has to be LIGHTER on a dark panel */
  color:           #f3f3f7;
}
body.light-mode :is(.wow-carousel, .sb-inner, .tg-top, .tg-input)
  :is(p, span, b, strong, em, li, s, a, div, code){ color: inherit; }

/* The two that were stranded in the middle. In light mode they become what
   every other card on the page already is: a light surface with dark ink. */
body.light-mode :is(.ai-chip, .tdb-recent-buys){
  background-color: #eef0f4;
  border-color:     rgba(15,23,42,.12);
  --text:  #12121c;
  --muted: #55555f;
  --ink:   #12121c;
  color:   #12121c;
}
body.light-mode :is(.ai-chip, .tdb-recent-buys)
  :is(p, span, b, strong, em, li, s, div, code){ color: inherit; }

/* A yellow badge is a signal surface: its ink is dark in both themes. */
body.light-mode :is(.mx-warn, .badge-warn, [class*="-warn"]){ color: #1a1600; }

/* ==========================================================================
   PRODUCT WRITE-UP, part two (2026-09-08)
   ---------------------------------------------------------------------------
   Two jobs in one block.

   (a) Four helpers the description has used for months and this page has never
       styled: .ts-step, .ts-stat, .ts-stack-row and .ts-h3. Their look lived in
       the theme's style.min.css, which this page deliberately drops, so eight
       install steps, twelve catalogue figures and sixteen spec rows have been
       rendering as bare text on the main sales page. Same class of defect as
       the .ts-card block above, found the same way: by reading the markup
       against the stylesheet rather than trusting either alone.

   (b) The pieces the AI capabilities appendix needs — a numbered pipeline, a
       measured-figures row, a tier badge and a call-out.

   Every colour here is a token. The tokens are redefined wholesale under
   body.light-mode further up this file, so both themes follow without a second
   set of rules — and nothing below paints a theme-aware ink onto a surface
   that stays fixed.
   ========================================================================== */

/* --- (a) helpers the description already uses ---------------------------- */
.tsp-desc-wrap .ts-h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(17px,2vw,20px);font-weight:600;color:var(--text);margin:1.6em 0 .7em;line-height:1.3;letter-spacing:-.01em}

.tsp-desc-wrap .ts-step{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line)}
.tsp-desc-wrap .ts-step:first-child{border-top:0}
.tsp-desc-wrap .ts-step__n{flex:none;width:30px;height:30px;border-radius:9px;background:var(--badge-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13px;letter-spacing:0}
.tsp-desc-wrap .ts-step__title{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--text);margin:4px 0 4px;font-size:15px}
.tsp-desc-wrap .ts-step__sub{color:var(--muted);margin:0;font-size:14px;line-height:1.6;max-width:none}

.tsp-desc-wrap .ts-stat{background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;display:flex;flex-direction:column;gap:5px;height:100%}
.tsp-desc-wrap .ts-stat__num{font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--text);line-height:1.1}
.tsp-desc-wrap .ts-stat__label{font-size:12.5px;color:var(--muted);line-height:1.45}

.tsp-desc-wrap .ts-stack-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:6px 20px;padding:13px 0;border-top:1px solid var(--line);align-items:baseline}
.tsp-desc-wrap .ts-stack-row:first-child{border-top:0}
.tsp-desc-wrap .ts-stack-row dt{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--text);font-size:14px;margin:0}
.tsp-desc-wrap .ts-stack-row dd{color:var(--muted);font-size:14px;line-height:1.6;margin:0}
.tsp-desc-wrap .ts-row--muted{color:var(--muted)}
@media(max-width:620px){.tsp-desc-wrap .ts-stack-row{grid-template-columns:1fr;gap:3px}}

/* --- (b) the appendix ---------------------------------------------------- */

/* A pipeline reads left to right on a desk and top to bottom on a phone; the
   arrow turns with it rather than disappearing, because the direction IS the
   content here. */
.tsp-desc-wrap .ts-pipe{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0 0 1.7em}
.tsp-desc-wrap .ts-pipe__step{flex:1 1 168px;min-width:158px;background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.tsp-desc-wrap .ts-pipe__n{width:26px;height:26px;border-radius:8px;background:var(--surface);border:1px solid var(--line-strong);color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:12px}
.tsp-desc-wrap .ts-pipe__step b{font-family:"Space Grotesk",sans-serif;font-size:14.5px;font-weight:600;color:var(--text);line-height:1.3}
.tsp-desc-wrap .ts-pipe__step em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.55}
.tsp-desc-wrap .ts-pipe__arrow{align-self:center;flex:none;width:16px;height:2px;background:var(--line-strong);position:relative;margin-top:8px}
.tsp-desc-wrap .ts-pipe__arrow::after{content:"";position:absolute;right:-2px;top:-3px;border:4px solid transparent;border-left-color:var(--a1)}
/* The last step is the one that pays off, and the step that costs money is the
   one to look at twice. Both get an edge rather than a fill, so the ink on the
   card stays the same theme-aware ink as every other card. */
.tsp-desc-wrap .ts-pipe__step--end{border-color:rgba(255,106,31,.45)}
.tsp-desc-wrap .ts-pipe__step--end .ts-pipe__n{background:var(--badge-fill);border-color:transparent;color:#fff}
.tsp-desc-wrap .ts-pipe__step--cost{border-color:rgba(255,47,69,.45)}
.tsp-desc-wrap .ts-pipe__step--cost .ts-pipe__n{background:var(--badge-fill-cost);border-color:transparent;color:#fff}
@media(max-width:760px){
  .tsp-desc-wrap .ts-pipe{flex-direction:column}
  .tsp-desc-wrap .ts-pipe__step{width:100%}
  .tsp-desc-wrap .ts-pipe__arrow{transform:rotate(90deg);margin:2px 0;align-self:center}
}

.tsp-desc-wrap .ts-statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 1.7em}
.tsp-desc-wrap .ts-statbox{background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:6px}
.tsp-desc-wrap .ts-statbox b{font-family:"Space Grotesk",sans-serif;font-size:clamp(19px,2.4vw,25px);font-weight:700;color:var(--text);line-height:1.05}
.tsp-desc-wrap .ts-statbox span{font-size:13px;color:var(--muted);line-height:1.5}
.tsp-desc-wrap .ts-statbox__vs{font-size:12px;color:var(--muted-2)}
@media(max-width:860px){.tsp-desc-wrap .ts-statrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.tsp-desc-wrap .ts-statrow{grid-template-columns:1fr}}

.tsp-desc-wrap .ts-tier{display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--a1);margin:0 0 8px}

.tsp-desc-wrap .ts-callout{border:1px solid var(--line-strong);border-left:3px solid var(--a1);border-radius:14px;background:var(--surface);padding:20px 22px;margin:1.6em 0 0}
.tsp-desc-wrap .ts-callout__t{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--text);font-size:15px;margin:0 0 7px}
.tsp-desc-wrap .ts-callout__b{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0;max-width:none}
.tsp-desc-wrap .ts-callout__b a{color:var(--a1);font-weight:600;border-bottom:1px solid rgba(255,106,31,.4)}
.tsp-desc-wrap .ts-callout__b a:hover{border-bottom-color:var(--a1)}

/* --------------------------------------------------------------------------
   The accent as INK, which is not the same thing as the accent.
   #ff6a1f is a signal colour: correct in a gradient, correct as a border, and
   2.69:1 as text on the light ground — measured across every .ts-kicker in the
   description on 2026-09-08, so 38 eyebrow labels were failing, not three. The
   gradient must not move (it is the brand), so text gets its own token and the
   light theme darkens only that. 4.9:1 on the page ground, 5.2:1 on a card.
   -------------------------------------------------------------------------- */
:root{ --a1-ink: var(--a1); }
body.light-mode{ --a1-ink: #c2410c; }
.tsp-desc-wrap .ts-kicker{color:var(--a1-ink)}
.tsp-desc-wrap .ts-tier{color:var(--a1-ink)}
.tsp-desc-wrap .ts-callout__b a{color:var(--a1-ink);border-bottom-color:color-mix(in srgb, var(--a1-ink) 40%, transparent)}
.tsp-desc-wrap .ts-callout__b a:hover{border-bottom-color:var(--a1-ink)}

/* --------------------------------------------------------------------------
   Numeral badges: a fixed ink needs a fixed, MEASURED fill.
   White on var(--grad) reads 2.86:1 at the orange stop and white on var(--a2)
   reads 3.66:1 — both below 4.5 for a 12-13px bold numeral, and both invisible
   to the contrast harness, which reports a gradient ground as unresolved rather
   than guessing at it. These two fills are the brand colours taken down until
   white clears the bar, and they are the same in both themes because the
   surface is fixed in both themes.
     #b3300f  white 6.28:1
     #a3122b  white 7.85:1
   The gradient keeps every place it carries no text (.ts-dash, the feature
   bullets), which is what it is for.
   -------------------------------------------------------------------------- */
:root, body.light-mode{ --badge-fill:#b3300f; --badge-fill-cost:#a3122b; }

/* ==========================================================================
   ARCHIVE PITCH (#own-archive-pitch) — 2026-09-08
   The three capabilities argued in the page rather than in the write-up, which
   is 13,644 words behind a closed <details> at 93% of a 90,062px page. Its own
   classes, because the write-up's .ts-* set is scoped to .tsp-desc-wrap and
   would render bare here. Tokens only, so light mode follows the block above.
   ========================================================================== */
.archpitch .arch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:var(--maxw);margin:0 auto}
.archpitch .arch-card{background:var(--surface-solid);border:1px solid var(--line);border-radius:18px;padding:26px 28px 24px;display:flex;flex-direction:column}
.archpitch .arch-card--wide{grid-column:1 / -1}
.archpitch .arch-tag{align-self:flex-start;font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a1-ink);border:1px solid var(--line-strong);border-radius:999px;padding:4px 12px;margin:0 0 14px}
.archpitch .arch-card h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(18px,2.1vw,21px);font-weight:600;color:var(--text);margin:0 0 10px;line-height:1.25}
.archpitch .arch-card p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 16px;max-width:64ch}
.archpitch .arch-card p strong{color:var(--text)}
.archpitch .arch-nums{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.archpitch .arch-nums span{flex:1 1 150px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);line-height:1.4}
.archpitch .arch-nums b{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:700;color:var(--text)}
.archpitch .arch-link{margin-top:auto;align-self:flex-start;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14.5px;color:var(--a1-ink);border-bottom:1px solid transparent}
.archpitch .arch-link:hover{border-bottom-color:var(--a1-ink)}
.archpitch .arch-foot{max-width:var(--maxw);margin:22px auto 0;color:var(--muted);font-size:14.5px;line-height:1.75;text-align:center}
.archpitch .arch-foot strong{color:var(--text)}
.archpitch .arch-foot a{color:var(--a1-ink);font-weight:600}
@media(max-width:820px){.archpitch .arch-grid{grid-template-columns:1fr}}

/* ==========================================================================
   #bench-flow — the transposition chain, drawn.
   Five stages, each lighting in turn, with a packet running the wires between
   them. Ordinary elements and two keyframes; the page carries enough script
   already. Every colour is a token, so light mode follows.

   The whole thing has to read with the motion off — that is not a courtesy,
   it is most of the value: a reader who asked their machine to stop animating,
   a print, a screenshot in an email. So the lit state is the DEFAULT and the
   animation only takes it away and gives it back.
   ========================================================================== */
.archpitch .bflow{list-style:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;max-width:var(--maxw);margin:26px auto 0;padding:0}
.archpitch .bflow-node{flex:1 1 168px;min-width:150px;background:var(--surface-solid);border:1px solid var(--line);border-radius:14px;padding:16px 15px;display:flex;flex-direction:column;gap:5px;position:relative}
.archpitch .bflow-node b{font-family:"Space Grotesk",sans-serif;font-size:14.5px;font-weight:600;color:var(--text);line-height:1.25}
.archpitch .bflow-node em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.5}
.archpitch .bflow-pin{width:9px;height:9px;border-radius:50%;background:var(--a1);box-shadow:0 0 0 4px color-mix(in srgb, var(--a1) 22%, transparent);margin-bottom:4px;
  animation:bflow-pulse 5s var(--ease) infinite;animation-delay:calc(var(--i) * .55s)}
.archpitch .bflow-node--you{border-color:color-mix(in srgb, var(--a1) 45%, transparent)}
.archpitch .bflow-node--you .bflow-pin{background:var(--a2);box-shadow:0 0 0 4px color-mix(in srgb, var(--a2) 22%, transparent)}

.archpitch .bflow-wire{align-self:center;flex:0 1 26px;min-width:18px;height:2px;background:var(--line-strong);border-radius:2px;position:relative;overflow:visible}
.archpitch .bflow-wire::after{content:"";position:absolute;right:-3px;top:-3px;border:4px solid transparent;border-left-color:var(--a1);opacity:.8}
.archpitch .bflow-wire i{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--a1);
  animation:bflow-travel 5s var(--ease) infinite}
.archpitch .bflow-wire:nth-of-type(2) i{animation-delay:.55s}
.archpitch .bflow-wire:nth-of-type(4) i{animation-delay:1.1s}
.archpitch .bflow-wire:nth-of-type(6) i{animation-delay:1.65s}
.archpitch .bflow-wire:nth-of-type(8) i{animation-delay:2.2s}

@keyframes bflow-pulse{
  0%,8%   {transform:scale(1);opacity:.55}
  14%     {transform:scale(1.5);opacity:1}
  30%,100%{transform:scale(1);opacity:.85}
}
@keyframes bflow-travel{
  0%,6%  {left:0;opacity:0}
  10%    {opacity:1}
  22%    {left:100%;opacity:1}
  26%,100%{left:100%;opacity:0}
}

@media(max-width:900px){
  .archpitch .bflow{flex-direction:column}
  .archpitch .bflow-node{width:100%}
  /* min-width:18px from the horizontal rule outlives `width` and turned the
     vertical connector into an 18px square. Measured, not guessed. */
  .archpitch .bflow-wire{width:2px;min-width:0;height:18px;flex:none;align-self:center}
  .archpitch .bflow-wire::after{right:-3px;top:auto;bottom:-3px;border-left-color:transparent;border-top-color:var(--a1)}
  .archpitch .bflow-wire i{left:-2px;top:0;animation:bflow-travel-v 5s var(--ease) infinite}
  @keyframes bflow-travel-v{0%,6%{top:0;opacity:0}10%{opacity:1}22%{top:100%;opacity:1}26%,100%{top:100%;opacity:0}}
}

/* Motion off: every stage lit, the packets gone, the diagram still true. */
@media (prefers-reduced-motion: reduce){
  .archpitch .bflow-pin{animation:none;opacity:1;transform:none}
  .archpitch .bflow-wire i{animation:none;display:none}
}