/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:clamp(52px,6.5vw,86px) 0 clamp(30px,4vw,44px);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:78%;
  background:radial-gradient(60% 60% at 30% 40%,rgba(43,46,127,.12),transparent 70%),
             radial-gradient(46% 46% at 76% 24%,rgba(247,148,29,.14),transparent 70%);
  pointer-events:none;
}
[data-theme="dark"] .hero::before{
  background:radial-gradient(60% 60% at 30% 40%,rgba(90,97,216,.22),transparent 70%),
             radial-gradient(46% 46% at 76% 24%,rgba(247,148,29,.14),transparent 70%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero h1 .accent{
  background:var(--grad-flame);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{margin-top:20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--rail);background:var(--surface);font-size:.78rem;font-weight:600;
  color:var(--ink-2);box-shadow:var(--shadow-sm);
}
.chip svg{width:13px;height:13px;color:var(--pos)}

/* hero quote board — the page's signature "live data" moment */
.board{
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.board-top{
  display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--rail);
  background:var(--surface-2);
}
.board-top b{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.board-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;color:var(--pos);font-family:"JetBrains Mono",monospace;letter-spacing:.1em}
.board-top .live i{width:6px;height:6px;border-radius:50%;background:var(--pos);animation:pulse 2s infinite}
.board-rows{padding:6px 0}
.brow{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:9px 18px;font-size:.86rem;
}
.brow + .brow{border-top:1px solid var(--rail-2)}
.brow .sym{font-weight:600;letter-spacing:-.01em}
.brow .sym small{display:block;font-size:.66rem;color:var(--ink-3);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.brow .px{font-family:"JetBrains Mono",monospace;font-weight:700;font-variant-numeric:tabular-nums;min-width:88px;text-align:right}
.brow .ch{font-family:"JetBrains Mono",monospace;font-size:.76rem;font-weight:700;min-width:68px;text-align:right;padding:2px 7px;border-radius:6px}
.ch.up{color:var(--pos);background:color-mix(in srgb,var(--pos) 12%,transparent)}
.ch.dn{color:var(--neg);background:color-mix(in srgb,var(--neg) 12%,transparent)}
.flash-up{animation:fu .6s ease}.flash-dn{animation:fd .6s ease}
@keyframes fu{0%{background:color-mix(in srgb,var(--pos) 26%,transparent)}100%{background:transparent}}
@keyframes fd{0%{background:color-mix(in srgb,var(--neg) 26%,transparent)}100%{background:transparent}}
.board-foot{padding:11px 18px;border-top:1px solid var(--rail);background:var(--surface-2);font-size:.7rem;color:var(--ink-3);font-family:"JetBrains Mono",monospace;letter-spacing:.06em}

/* platform marquee */
.plats{border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);background:var(--surface);padding:22px 0;overflow:hidden}
.plats-lbl{text-align:center;font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;font-weight:700}
.track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.plats:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.plat{
  display:flex;align-items:center;gap:9px;font-family:Sora,sans-serif;font-weight:700;
  font-size:1.02rem;color:var(--ink-2);letter-spacing:-.02em;opacity:.72;transition:opacity .2s,color .2s;white-space:nowrap;
}
.plat:hover{opacity:1;color:var(--navy)}
.plat svg{width:19px;height:19px;color:var(--orange)}

/* ============================================================
   BILLING SWITCH + PLAN CARDS
   ============================================================ */
.switch-bar{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:clamp(30px,4vw,46px)}
.seg{
  display:inline-flex;padding:5px;border-radius:999px;background:var(--rail-2);
  border:1px solid var(--rail);position:relative;
}
.seg button{padding:10px 26px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--ink-2);position:relative;z-index:2;transition:color .22s}
.seg button[aria-pressed="true"]{color:#fff}
.seg .thumb{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--grad-brand);transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);z-index:1;box-shadow:0 4px 12px rgba(43,46,127,.3)}
.save-note{
  display:inline-flex;align-items:center;gap:9px;font-size:.87rem;font-weight:600;color:var(--orange-600);
  background:color-mix(in srgb,var(--orange) 12%,transparent);border:1px dashed color-mix(in srgb,var(--orange) 45%,transparent);
  padding:8px 18px;border-radius:999px;
}
[data-theme="dark"] .save-note{color:var(--orange)}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.plan{
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);
  padding:26px 22px 24px;position:relative;box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
  display:flex;flex-direction:column;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--navy) 30%,var(--rail))}
.plan--best{
  border-color:transparent;box-shadow:var(--shadow-lg);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    var(--grad-brand) border-box;
  border:2px solid transparent;
}
.plan--best::after{
  content:"";position:absolute;inset:-1px;border-radius:var(--r-xl);pointer-events:none;
  background:radial-gradient(80% 40% at 50% 0%,rgba(247,148,29,.14),transparent 70%);
}
.plan-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad-flame);color:#1A1200;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 16px;border-radius:999px;
  font-family:"JetBrains Mono",monospace;box-shadow:0 5px 16px rgba(247,148,29,.4);white-space:nowrap;
}
.plan-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.plan-name{
  font-family:"JetBrains Mono",monospace;font-size:.76rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy);border:1.5px solid currentColor;
  padding:5px 13px;border-radius:8px;
}
.plan--best .plan-name{color:var(--orange);}
.price{display:flex;align-items:flex-start;gap:2px;line-height:1}
.price .cur{font-family:Sora,sans-serif;font-size:1.5rem;font-weight:700;color:var(--navy);margin-top:6px}
.price .amt{font-family:Sora,sans-serif;font-size:clamp(2.4rem,4vw,3.05rem);font-weight:800;letter-spacing:-.045em;color:var(--navy);font-variant-numeric:tabular-nums}
.plan--best .price .cur,.plan--best .price .amt{background:var(--grad-flame);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-sub{font-family:"JetBrains Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-top:8px}
.price-was{font-size:.78rem;color:var(--ink-3);margin-top:6px;height:18px}
.price-was s{opacity:.8}
.price-was b{color:var(--pos);font-weight:700;margin-left:6px}
.plan hr{border:0;border-top:1px solid var(--rail);margin:20px 0}
.spec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;flex:1}
.spec li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0;font-size:.855rem;border-bottom:1px dashed var(--rail-2)}
.spec li:last-child{border-bottom:0}
.spec .k{color:var(--ink-2)}
.spec .v{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.82rem;color:var(--ink);text-align:right;white-space:nowrap}
.spec .v.yes{color:var(--pos)}
.spec .v.no{color:var(--ink-3);font-weight:500}
.plan .btn{margin-top:22px}

/* ============================================================
   COMPARISON MATRIX
   ============================================================ */
.matrix-shell{background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);box-shadow:var(--shadow-md);overflow:hidden}
.matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.matrix{width:100%;border-collapse:collapse;min-width:760px}
table.matrix th,table.matrix td{padding:14px 18px;text-align:center;font-size:.87rem;border-bottom:1px solid var(--rail-2)}
table.matrix thead th{
  position:sticky;top:0;background:var(--surface-2);z-index:3;
  font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--navy);border-bottom:1px solid var(--rail);padding-block:16px;
}
table.matrix thead th.best{background:color-mix(in srgb,var(--orange) 12%,var(--surface-2));color:var(--orange-600)}
[data-theme="dark"] table.matrix thead th.best{color:var(--orange)}
table.matrix tbody th{
  text-align:left;font-weight:600;color:var(--ink);position:sticky;left:0;background:var(--surface);z-index:2;
  min-width:210px;font-size:.87rem;
}
table.matrix tbody td{font-family:"JetBrains Mono",monospace;font-weight:600;font-variant-numeric:tabular-nums}
table.matrix tbody tr:hover td,table.matrix tbody tr:hover th{background:var(--rail-2)}
table.matrix td.best{background:color-mix(in srgb,var(--orange) 5%,transparent)}
table.matrix tr.grp th{
  background:var(--rail-2);font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;padding-block:9px;
}
table.matrix tr.grp td{background:var(--rail-2)}
.tick,.cross{font-size:1.05rem;line-height:1}
.tick{color:var(--pos);font-weight:700}
.cross{color:var(--ink-3);opacity:.55}

/* ============================================================
   ADD-ONS
   ============================================================ */
.addon-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{
  padding:8px 16px;border-radius:999px;border:1px solid var(--rail);background:var(--surface);
  font-size:.83rem;font-weight:600;color:var(--ink-2);transition:.18s;
}
.filters button:hover{border-color:var(--navy);color:var(--navy)}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
[data-theme="dark"] .filters button[aria-pressed="true"]{color:#0B0D24}
.search{position:relative;margin-left:auto;min-width:230px}
.search input{
  width:100%;padding:11px 15px 11px 40px;border-radius:999px;border:1px solid var(--rail);
  background:var(--surface);color:var(--ink);font-size:.87rem;font-family:inherit;transition:.18s;
}
.search input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px var(--ring)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3)}

table.addons{width:100%;border-collapse:collapse;min-width:600px}
table.addons thead th{
  background:var(--grad-brand);color:#fff;padding:15px 20px;text-align:left;
  font-family:"JetBrains Mono",monospace;font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
table.addons thead th:not(:first-child){text-align:right}
table.addons td{padding:13px 20px;border-bottom:1px solid var(--rail-2);font-size:.88rem}
table.addons td:not(:first-child){text-align:right;font-family:"JetBrains Mono",monospace;font-weight:600;font-variant-numeric:tabular-nums}
table.addons tbody tr{transition:background .15s}
table.addons tbody tr:hover{background:var(--rail-2)}
table.addons .name{font-weight:600;color:var(--ink)}
table.addons .na{color:var(--ink-3);font-weight:400}
table.addons .annual{color:var(--pos)}
.tag{
  display:inline-block;margin-left:9px;font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:2px 7px;border-radius:5px;
  background:color-mix(in srgb,var(--navy) 12%,transparent);color:var(--navy);vertical-align:middle;
}
.empty-row td{text-align:center!important;color:var(--ink-3);padding:34px 20px!important;font-family:inherit!important}

/* ============================================================
   INCLUDED INDICATORS
   ============================================================ */
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.incl-card{
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-lg);padding:24px 22px;
  box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden;
}
.incl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--navy) 30%,var(--rail))}
.incl-card .ic{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--grad-brand);color:#fff;box-shadow:0 5px 14px rgba(43,46,127,.25);
}
.incl-card .ic svg{width:21px;height:21px}
.incl-card h3{margin-bottom:8px}
.incl-card p{font-size:.87rem;color:var(--ink-2)}
.incl-card .avail{
  margin-top:16px;display:inline-block;font-family:"JetBrains Mono",monospace;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:6px;
  background:color-mix(in srgb,var(--pos) 14%,transparent);color:var(--pos);
}
.incl-card .avail.elite{background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange-600)}
[data-theme="dark"] .incl-card .avail.elite{color:var(--orange)}

/* ============================================================
   TRIAL BAND
   ============================================================ */
.band{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-brand);
  color:#fff;padding:clamp(38px,5vw,64px) clamp(26px,4vw,58px);text-align:center;
  box-shadow:var(--shadow-lg);
}
.band::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(50% 70% at 12% 10%,rgba(247,148,29,.4),transparent 60%),
             radial-gradient(46% 66% at 88% 90%,rgba(247,148,29,.28),transparent 60%);
}
.band > *{position:relative;z-index:2}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.86);max-width:56ch;margin:16px auto 0}
.band .btn{margin-top:28px}
.band-stats{display:flex;justify-content:center;gap:clamp(24px,5vw,64px);flex-wrap:wrap;margin-top:36px;padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.band-stat b{display:block;font-family:Sora,sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.03em}
.band-stat span{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:700}

/* ============================================================
   FAQ + TERMS
   ============================================================ */
.faq{max-width:900px;margin-inline:auto}
.qa{border-bottom:1px solid var(--rail)}
.qa:first-child{border-top:1px solid var(--rail)}
.qa-q{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;text-align:left;font-family:Sora,sans-serif;font-weight:700;
  font-size:clamp(.98rem,1.4vw,1.08rem);letter-spacing:-.014em;transition:color .18s;
}
.qa-q:hover{color:var(--navy)}
.qa-q .pm{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  border:1px solid var(--rail);color:var(--navy);transition:.24s;
}
.qa.open .qa-q .pm{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(45deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.qa-a p{padding:0 4px 22px;color:var(--ink-2);font-size:.93rem;max-width:74ch}

.terms{
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-sm);
}
.terms ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.terms li{font-size:.9rem;color:var(--ink-2)}
.terms li::marker{color:var(--orange);font-weight:700}
.terms b{color:var(--ink)}
.terms .sub{list-style:none;padding-left:0;margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.terms .sub li{
  background:var(--rail-2);border:1px solid var(--rail);border-radius:8px;padding:6px 13px;
  font-size:.82rem;font-weight:600;color:var(--ink);font-family:"JetBrains Mono",monospace;
}
.note{
  margin-top:22px;padding:16px 20px;border-left:3px solid var(--orange);
  background:color-mix(in srgb,var(--orange) 8%,transparent);border-radius:0 10px 10px 0;
  font-size:.87rem;color:var(--ink-2);
}

/* ============================================================
   FOOTER  (shared shell)
   ============================================================ */
footer.site{background:#0E1030;color:#C3C8E8;position:relative;margin-top:clamp(40px,6vw,80px)}
footer.site::before{
  content:"";position:absolute;top:-58px;left:0;right:0;height:60px;
  background:#0E1030;clip-path:ellipse(75% 100% at 50% 100%);
}
[data-theme="dark"] footer.site,[data-theme="dark"] footer.site::before{background:#05061A}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px 26px;padding-top:clamp(40px,5vw,62px)}
.foot-grid .fcol-h{
  font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin:0 0 16px;font-weight:700;
}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-grid a{font-size:.86rem;color:#A8AECF;transition:color .16s,transform .16s;display:inline-block}
.foot-grid a:hover{color:#fff;transform:translateX(3px)}

.foot-social{display:flex;gap:10px;margin-top:22px}
.foot-social a{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#A8AECF;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.foot-social a:hover{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1);transform:translateY(-2px)}
.foot-social svg{width:17px;height:17px}
.foot-brand p{font-size:.86rem;color:#8E95BC;margin-top:20px;max-width:34ch;line-height:1.7}
.foot-brand .addr{margin-top:18px;font-size:.83rem;color:#A8AECF;font-style:normal;line-height:1.8}
.foot-brand .addr a{display:block}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#C3C8E8;transition:.2s;
}
.socials a:hover{background:var(--orange);color:#1A1200;transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
.risk{
  margin-top:clamp(32px,4vw,48px);padding:20px 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:.76rem;line-height:1.75;color:#7C83AB;
}
.risk b{color:var(--orange);letter-spacing:.06em}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;flex-wrap:wrap;
  gap:14px;align-items:center;justify-content:space-between;font-size:.8rem;color:#7C83AB;
}
.foot-bar nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-bar a:hover{color:#fff}

/* to-top */
.totop{
  position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:14px;z-index:45;
  background:var(--grad-brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.28s;
}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop svg{width:18px;height:18px}

/* Scroll reveal, gated on the .js class that the inline bootstrap sets.
   If scripting is off, blocked, or the observer never fires, the content is
   simply visible — an animation must never be able to hide the page. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.07s}.js .rv.d2{transition-delay:.14s}.js .rv.d3{transition-delay:.21s}

/* ============================================================
   BRAND LOCKUP
   The master artwork itself, embedded as two data URIs — one for
   each theme — so the lockup is pixel-identical to the brand file
   and there is nothing to align by hand. The dark variant lifts
   only the wordmark and the pixel blocks to near-white; the navy
   square is left alone because the orange arrow already carries
   the contrast against a dark canvas.
   Aspect ratio 524:90. Swap the two url() values to update.
   ============================================================ */
.brand{display:flex;align-items:center;flex:none;margin-right:14px}
.brand-logo{
  display:block;height:30px;width:175px;flex:none;
  background:url("/assets/img/786947613ab0.png") left center/contain no-repeat;
}
/* one dark payload, two contexts: dark theme anywhere, and the footer in
   every theme — it sits on navy either way */
[data-theme="dark"] .brand-logo,
.foot-brand .brand-logo{background-image:url("/assets/img/cbf770cc06e5.png")}
.foot-brand .brand-logo{height:32px;width:186px}
.drawer .brand-logo{height:26px;width:151px}

/* ============================================================
   HERO TELEMETRY PANEL  (replaces the symbol quote board)
   ============================================================ */
.telem{background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.telem-top{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--rail);background:var(--surface-2)}
.telem-top b{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.telem-top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;color:var(--pos);font-family:"JetBrains Mono",monospace;letter-spacing:.12em}
.telem-top .live i{width:6px;height:6px;border-radius:50%;background:var(--pos);animation:pulse 2s infinite}
.telem-hero{padding:22px 18px 8px;text-align:center}
.telem-hero .lbl{font-family:"JetBrains Mono",monospace;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.telem-hero .big{
  font-family:Sora,sans-serif;font-weight:800;font-size:clamp(2.1rem,4.2vw,2.9rem);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;margin-top:6px;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="dark"] .telem-hero .big{background:linear-gradient(120deg,#7A81F0,#C9CDFF);-webkit-background-clip:text;background-clip:text}
.spark{display:block;width:100%;height:76px;margin-top:10px}
#spkFill stop:first-child{stop-color:var(--navy);stop-opacity:.30}
#spkFill stop:last-child{stop-color:var(--navy);stop-opacity:0}
#spkLine{stroke:var(--navy)}
#spkDot{fill:var(--orange)}
#spkBase{stroke:var(--rail);stroke-dasharray:3 5}
.telem-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rail)}
.tstat{padding:14px 10px;text-align:center;border-right:1px solid var(--rail-2)}
.tstat:last-child{border-right:0}
.tstat b{display:block;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tstat b.ok{color:var(--pos)}
.tstat span{display:block;font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-top:5px}
.telem-foot{padding:11px 18px;border-top:1px solid var(--rail);background:var(--surface-2);font-size:.68rem;color:var(--ink-3);font-family:"JetBrains Mono",monospace;letter-spacing:.08em;display:flex;justify-content:space-between;gap:10px}

/* ============================================================
   PLATFORM DISTRIBUTION MAP + PIX API STRIP
   The section's whole argument is "one feed, many destinations",
   so it is drawn rather than scrolled: a single source node on the
   left, wires fanning out to three lanes, and the platform marks
   sitting on those lanes. The wires carry a flowing dash, which is
   the only motion here — a marquee repeated logos on screen and
   said nothing about how the feed actually reaches them.
   ============================================================ */
.plats{border-top:1px solid var(--rail);border-bottom:1px solid var(--rail);background:var(--surface);padding:clamp(44px,5.5vw,76px) 0;position:relative}
.plats-head{text-align:center;max-width:840px;margin:0 auto clamp(30px,4vw,46px)}
.plats-head .eyebrow{margin-inline:auto}
.plats-head h2{white-space:nowrap}
.plats-head p{color:var(--ink-2);font-size:.97rem;margin-top:14px;max-width:66ch;margin-inline:auto}

.fmap{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,54px);align-items:center}
.fmap-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.fmap-wires path{fill:none;stroke:var(--rail);stroke-width:1.5}
.fmap-wires path.flow{
  stroke:var(--orange);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:4 22;animation:wireflow 2.4s linear infinite;opacity:.9;
}
@keyframes wireflow{to{stroke-dashoffset:-26}}

/* the source node */
.fmap-hub{
  position:relative;z-index:2;width:184px;flex:none;text-align:center;
  border:1px solid var(--rail);border-radius:var(--r-lg);background:var(--surface-2);
  padding:24px 20px;box-shadow:var(--shadow-sm);
}
.fmap-hub .hub-mark{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin:0 auto 14px;
  background:var(--grad-brand);color:#fff;box-shadow:0 6px 16px rgba(43,46,127,.26);
}
.fmap-hub .hub-mark svg{width:25px;height:25px}
.fmap-hub b{display:block;font-family:Sora,sans-serif;font-weight:800;font-size:1.06rem;letter-spacing:-.026em;color:var(--ink)}
.fmap-hub .hub-sub{
  display:block;margin-top:7px;font-family:"JetBrains Mono",monospace;font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:700;line-height:1.6;
}
.fmap-hub .hub-sub i{display:block;font-style:normal}
.fmap-hub .pulse{
  position:absolute;inset:-6px;border-radius:calc(var(--r-lg) + 6px);border:1px solid var(--orange);
  opacity:0;animation:hubring 2.4s ease-out infinite;pointer-events:none;
}
@keyframes hubring{0%{transform:scale(.97);opacity:.55}70%{transform:scale(1.04);opacity:0}100%{opacity:0}}

/* the lanes */
.fmap-lanes{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.lane{position:relative;display:flex;gap:clamp(10px,1.2vw,14px);align-items:center}
.lane::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rail);z-index:-1;
}
.lane-node{
  width:9px;height:9px;border-radius:50%;flex:none;background:var(--surface);
  border:2px solid var(--rail);transition:border-color .3s,background .3s;
}
.lane.hot .lane-node{border-color:var(--orange);background:var(--orange)}

.ptile{
  flex:1 1 0;min-width:0;display:grid;place-items:center;height:88px;padding:14px 16px;
  border-radius:var(--r-md);border:1px solid var(--rail);background:#FCFDFF;
  transition:border-color .24s,transform .24s,box-shadow .24s;
}
.ptile:hover{border-color:color-mix(in srgb,var(--navy) 45%,var(--rail));transform:translateY(-4px);box-shadow:var(--shadow-md);z-index:2}
/* On a dark page a bank of pure-white tiles reads as glare rather than design.
   These logos genuinely need a light ground — most are dark ink with no
   transparent variant — so the plate stays light but is dimmed, warmed and
   given an inner edge, which turns a row of bright rectangles into a set of
   deliberate logo plates. Full brightness returns on hover, where the eye is. */
[data-theme="dark"] .ptile{
  background:#E7EAF4;border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  filter:brightness(.9) saturate(.92);
  transition:border-color .24s,transform .24s,box-shadow .24s,filter .24s;
}
[data-theme="dark"] .ptile:hover{
  border-color:rgba(255,255,255,.34);filter:brightness(1) saturate(1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 30px -14px rgba(0,0,0,.7);
}
[data-theme="dark"] .ptile--api{background:transparent;filter:none;box-shadow:none}
[data-theme="dark"] .ptile--api:hover{filter:none}
.plogo{display:block;width:100%;height:46px;background-position:center;background-repeat:no-repeat;background-size:contain}
.ptile--api{
  border-style:dashed;background:transparent;flex-direction:column;gap:5px;
  border-color:color-mix(in srgb,var(--navy) 30%,var(--rail));
}
.ptile--api:hover{background:color-mix(in srgb,var(--navy) 5%,transparent);border-style:solid}
.ptile--api .ptile--type{color:var(--navy)}
[data-theme="dark"] .ptile--api{background:transparent;border-color:color-mix(in srgb,var(--navy) 55%,var(--rail))}
[data-theme="dark"] .ptile--api:hover{background:color-mix(in srgb,var(--navy) 14%,transparent);border-style:solid}
.ptile-sub{
  font-family:"JetBrains Mono",monospace;font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.ptile--type{font-family:Sora,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.03em;color:#2B2E7F;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Pix API SDK strip ---- */
.api-strip{margin-top:clamp(40px,5vw,66px);padding-top:clamp(34px,4vw,48px);border-top:1px solid var(--rail)}
.api-head{text-align:center;max-width:660px;margin:0 auto clamp(24px,3vw,34px)}
.api-head .eyebrow{margin-inline:auto}
.api-head h3{font-size:clamp(1.3rem,2.2vw,1.68rem)}
.api-head p{color:var(--ink-2);font-size:.94rem;margin-top:10px}
.api-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.api-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  padding:28px 16px 24px;border-radius:var(--r-md);border:1px solid var(--rail);background:var(--surface-2);
  transition:border-color .24s,transform .24s,box-shadow .24s;overflow:hidden;
}
.api-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-flame);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.api-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--navy) 40%,var(--rail))}
.api-tile:hover::after{transform:scaleX(1)}
.api-well{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--surface);border:1px solid var(--rail);transition:background .24s,border-color .24s}
.api-tile:hover .api-well{background:color-mix(in srgb,var(--navy) 8%,var(--surface));border-color:color-mix(in srgb,var(--navy) 30%,var(--rail))}
.api-glyph{width:34px;height:34px;background-position:center;background-repeat:no-repeat;background-size:contain}
[data-theme="dark"] .api-glyph{filter:invert(1) brightness(1.85)}
.api-tile b{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:.98rem;letter-spacing:-.022em;color:var(--ink)}
.api-tile small{display:block;margin-top:5px;font-family:"JetBrains Mono",monospace;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.api-more{display:flex;justify-content:center;margin-top:26px}
.api-more a{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:var(--navy);padding:9px 4px;border-bottom:1.5px solid transparent;transition:border-color .2s,gap .2s}
.api-more a:hover{border-color:var(--orange);gap:13px}
.api-more svg{width:15px;height:15px}

@media (max-width:1100px){
  .plats-head h2{white-space:normal}
  .ptile{height:78px}
  .plogo{height:40px}
}
@media (max-width:900px){.api-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){
  /* the wires only make sense side-on; stacked, the lanes speak for themselves */
  .fmap{grid-template-columns:1fr;gap:24px}
  .fmap-wires{display:none}
  .fmap-hub{width:100%;max-width:none;display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:14px 18px;text-align:left}
  .fmap-hub b{white-space:nowrap}
  .fmap-hub .hub-mark{margin:0;width:42px;height:42px;border-radius:12px}
  .fmap-hub .hub-mark svg{width:21px;height:21px}
  .fmap-hub .hub-sub{margin:0 0 0 auto;text-align:right}
  .fmap-hub .hub-sub i{display:inline}
  .fmap-hub .hub-sub i + i::before{content:" · ";color:var(--rail)}
  .fmap-hub .hub-sub{white-space:nowrap;font-size:.55rem;letter-spacing:.12em}
  .lane{flex-wrap:wrap;gap:10px}
  .lane::before{display:none}
  .lane-node{display:none}
  .ptile{flex:1 1 calc(33.333% - 8px)}
}
@media (max-width:620px){
  /* the strapline stops fitting beside the name — drop it and let the
     name carry the node on its own */
  .fmap-hub .hub-sub{display:none}
  .ptile{flex:1 1 calc(50% - 6px);height:72px;padding:12px 14px}
  .plogo{height:36px}
  .ptile--type{font-size:.92rem}
}
@media (max-width:540px){
  .api-grid{grid-template-columns:repeat(2,1fr)}
  .api-tile{padding:22px 10px 20px;gap:11px}
  .api-well{width:52px;height:52px;border-radius:14px}
  .api-glyph{width:28px;height:28px}
}

/* ============================================================
   COMPARE PLANS — TABBED MATRIX
   ============================================================ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tabs button{
  padding:11px 22px;border-radius:11px;border:1px solid var(--rail);background:var(--surface);
  font-family:"JetBrains Mono",monospace;font-size:.73rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);transition:.2s;
}
.tabs button:hover{border-color:var(--navy);color:var(--navy)}
.tabs button[aria-selected="true"]{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 5px 16px rgba(43,46,127,.28)}
.tabpanel[hidden]{display:none}
table.matrix tbody th small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem;margin-top:3px;line-height:1.45;font-family:Inter,sans-serif}
table.matrix td.txt{font-family:Inter,sans-serif;font-weight:500;font-size:.83rem;color:var(--ink-2);line-height:1.45}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:.79rem;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:7px}
@media (max-width:720px){
  .tabs button{flex:1 1 46%;padding:10px 8px;font-size:.66rem;letter-spacing:.08em}
  .telem-stats{grid-template-columns:1fr 1fr}
  .tstat:nth-child(2){border-right:0}
  .tstat:nth-child(3){grid-column:1/-1;border-top:1px solid var(--rail-2)}
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1140px){
  .plans{grid-template-columns:repeat(2,1fr);gap:26px}
  .plan--best{order:-1}
  .incl{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.4fr repeat(2,1fr)}
}
@media (max-width:1180px){
  /* claw back horizontal room before giving up the mega menu entirely */
  .menu{gap:0}
  .menu-btn{padding:10px 9px;font-size:.875rem}
  .menu-btn.active::after{left:9px;right:9px}
}
@media (max-width:1060px){
  .menu{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .board{max-width:520px}
}
@media (max-width:720px){
  .plans{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .util .wrap{gap:16px;font-size:.79rem}
  .search{margin-left:0;width:100%}
  .band-stats{gap:22px}
  .totop{right:14px;bottom:14px}
}
@media (max-width:620px){
  .brand-logo{height:27px;width:157px}
  .brand{margin-right:10px}
  .tools{gap:6px}
}
@media (max-width:480px){
  .wrap{padding-inline:18px}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:460px){
  /* below this the header can only carry the logo, the CTA and the menu.
     Theme and account move into the drawer, which has room for them. */
  .tools .acct,#themeBtn{display:none}
  .brand-logo{height:24px;width:140px}
  .icon-btn{width:38px;height:38px;border-radius:10px}
  .btn--sm{padding:8px 15px;font-size:.81rem}
  :root{--head-h:64px}
}
@media (max-width:360px){
  /* 320px is the narrowest device still in use; everything has to earn its place */
  .wrap{padding-inline:12px}
  .brand{margin-right:6px}
  .brand-logo{height:21px;width:122px}
  .btn--sm{padding:7px 11px;font-size:.76rem;gap:5px}
  .icon-btn{width:34px;height:34px;border-radius:9px}
  .icon-btn svg{width:15px;height:15px}
  .tools{gap:4px}
  .ann{font-size:.75rem;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}
@media print{
  header.site,.ann,.util,.totop,.drawer,.scrim,footer.site .socials{display:none}
  body{background:#fff}
}




/* ============================================================
   PIX CONNECT
   The page's job is to answer "will it work with what I use, and
   what do I actually get?" — so the centrepiece is an explorer:
   every supported platform on the left, and what the feed gives
   that specific platform on the right. Everything else supports it.
   ============================================================ */
.hero-pc{position:relative;padding:clamp(42px,5vw,72px) 0 clamp(28px,3.5vw,44px);overflow:hidden}
.hero-pc::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:78%;pointer-events:none;
  background:radial-gradient(56% 56% at 26% 36%,rgba(43,46,127,.13),transparent 70%),
             radial-gradient(42% 42% at 80% 22%,rgba(247,148,29,.14),transparent 70%);
}
[data-theme="dark"] .hero-pc::before{
  background:radial-gradient(56% 56% at 26% 36%,rgba(90,97,216,.23),transparent 70%),
             radial-gradient(42% 42% at 80% 22%,rgba(247,148,29,.14),transparent 70%);
}
.hero-pc .wrap{position:relative;z-index:2;text-align:center}
.hero-pc .eyebrow{margin-inline:auto}
.hero-pc h1{font-size:clamp(2.2rem,4.8vw,3.7rem);max-width:16ch;margin-inline:auto}
.hero-pc h1 .accent{background:var(--grad-flame);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-pc .lede{margin:22px auto 0;text-align:center}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;justify-content:center}

/* ---- hero platform conveyor ------------------------------------
   The muted 66%-opacity grid read as washed-out artwork in the light
   theme — a lineup that looks faded looks unsupported. Rebuilt as a
   single conveyor: full-colour marks at a larger size drifting past
   on one line, separated by the brand pixel dot. One moving line
   reads as one living claim — "all of these, continuously" — and the
   motion is ambient, not decorative: it pauses the moment the cursor
   or keyboard focus arrives, and collapses to a static wrapped row
   under prefers-reduced-motion. */
.prail{margin:clamp(30px,4vw,48px) auto 0;max-width:1160px}
.prail-k{
  display:block;text-align:center;margin-bottom:clamp(16px,2.2vw,22px);
  font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.prail-view{
  overflow:hidden;
  /* the row dissolves at both edges instead of clipping mid-logo */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.prail-track{display:flex;width:max-content;animation:prail-drift var(--prail-dur,42s) linear infinite}
.prail-seg{display:flex;align-items:center;gap:clamp(30px,4vw,52px);padding-right:clamp(30px,4vw,52px)}
@keyframes prail-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ambient, never insistent: any intent pauses the belt */
.prail-view:hover .prail-track{animation-play-state:paused}
.chip-plat{
  display:grid;place-items:center;height:44px;padding:0 4px;border:0;background:none;border-radius:8px;
  opacity:1;flex:none;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),filter .28s ease;
}
.chip-plat:hover{transform:translateY(-3px) scale(1.04);filter:drop-shadow(0 10px 18px rgba(16,24,64,.16))}
/* Optically sized, not box-sized: each mark carries its true aspect
   ratio (read from the artwork itself) and a height weighted by how
   wide it runs — a 8:1 wordmark at full height would dwarf a 3:1
   badge, so the thin wide marks sit lower and everything reads as
   one even lineup. */
.chip-plat .plogo{height:34px;width:auto;min-width:0;max-width:none}
.chip-plat .plogo[data-logo="amibroker"]{aspect-ratio:256/88}
.chip-plat .plogo[data-logo="advanced-get"]{aspect-ratio:273/88}
.chip-plat .plogo[data-logo="multicharts"]{aspect-ratio:250/88}
.chip-plat .plogo[data-logo="fibonacci-trader"]{aspect-ratio:250/88}
.chip-plat .plogo[data-logo="neuroshell-trader"]{aspect-ratio:267/88}
.chip-plat .plogo[data-logo="galactic-trader"]{aspect-ratio:258/88}
.chip-plat .plogo[data-logo="excel"]{aspect-ratio:250/88}
.chip-plat .plogo[data-logo="metastock"]{aspect-ratio:330/60;height:24px}
.chip-plat .plogo[data-logo="ninjatrader-8"],
.chip-plat .plogo[data-logo="ninjatrader-7"]{aspect-ratio:330/41;height:20px}
.chip-plat .ptile--type{
  font-family:Sora,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink-2);
}
/* the brand pixel dot keeps the moving row unmistakably ours */
.prail-dot{flex:none;width:5px;height:5px;border-radius:2px;background:var(--grad-flame);opacity:.65}
@media (max-width:640px){
  .chip-plat{height:36px}
  .chip-plat .plogo{height:26px}
  .chip-plat .plogo[data-logo="metastock"]{height:19px}
  .chip-plat .plogo[data-logo="ninjatrader-8"],
  .chip-plat .plogo[data-logo="ninjatrader-7"]{height:15px}
  .prail-seg{gap:clamp(22px,6vw,34px);padding-right:clamp(22px,6vw,34px)}
}
/* Several of these marks are dark ink on transparent — Fibonacci Trader,
   Galactic Trader, NeuroShell — so on a dark page they simply vanished.
   Each mark rides a dimmed light plate in dark mode, brightening as it
   is hovered, so the whole belt stays legible and consistent. */
[data-theme="dark"] .chip-plat{
  opacity:1;background:#E7EAF4;border:1px solid rgba(255,255,255,.10);
  border-radius:10px;padding:9px 16px;height:auto;min-height:50px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  filter:brightness(.92) saturate(.94);
  transition:filter .24s,transform .24s,box-shadow .24s,border-color .24s;
}
[data-theme="dark"] .chip-plat:hover{
  filter:brightness(1) saturate(1);transform:translateY(-3px);
  border-color:rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 26px -12px rgba(0,0,0,.7);
}
[data-theme="dark"] .chip-plat .ptile--type{color:#2A2F55}
[data-theme="dark"] .prail-dot{opacity:.8}
/* No motion preference: the belt parks as a centred wrapped row and the
   duplicate half disappears, so nothing repeats and nothing moves. */
@media (prefers-reduced-motion:reduce){
  .prail-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .prail-seg{flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:18px}
  .prail-seg[aria-hidden="true"]{display:none}
  .prail-seg > .prail-dot:last-child{display:none}
  .prail-view{-webkit-mask-image:none;mask-image:none}
}

/* ---------- the explorer ----------
   Two panes: a scrolling index of platforms, and a detail sheet.
   The index gets a soft mask top and bottom rather than a raw
   scrollbar edge, and the selected row carries an accent rail so
   the link between the two panes is never in doubt. */
.xp{
  display:grid;grid-template-columns:296px 1fr;
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.xp-side{border-right:1px solid var(--rail);background:var(--surface-2);display:flex;flex-direction:column;min-height:0}
.xp-side-top{
  padding:15px 18px;border-bottom:1px solid var(--rail);
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;display:flex;align-items:center;gap:8px;
}
.xp-side-top .pixrail{height:11px}
.xp-side-top .pixrail i{width:4px}
.xp-side-top .pixrail i:nth-child(1){height:4px}.xp-side-top .pixrail i:nth-child(2){height:6px}
.xp-side-top .pixrail i:nth-child(3){height:8px}.xp-side-top .pixrail i:nth-child(4){height:11px}

/* Without the logo tiles the eleven rows fit without scrolling, so the
   cut-off last item and the masked edges are gone. */
.xp-list{padding:8px;scrollbar-width:thin;scrollbar-color:var(--rail) transparent}
.xp-list::-webkit-scrollbar{width:7px}
.xp-list::-webkit-scrollbar-thumb{background:var(--rail);border-radius:99px}
.xp-list::-webkit-scrollbar-track{background:transparent}

.xp-item{
  position:relative;display:grid;grid-template-columns:26px 1fr 12px;gap:13px;align-items:center;width:100%;
  padding:13px 14px;border-radius:12px;text-align:left;
  transition:background .2s,transform .2s cubic-bezier(.2,.7,.3,1);
}
.xp-item + .xp-item{margin-top:2px}
.xp-item:hover{background:var(--rail-2);transform:translateX(3px)}
.xp-item[aria-selected="true"]{
  background:var(--surface);
  box-shadow:0 1px 2px rgba(11,13,36,.05),0 8px 22px -14px rgba(11,13,36,.4);
}
[data-theme="dark"] .xp-item[aria-selected="true"]{background:rgba(255,255,255,.055)}
.xp-item[aria-selected="true"]::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--grad-flame);
}
.xp-n{
  font-family:"JetBrains Mono",monospace;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  color:var(--ink-3);transition:color .2s;
}
.xp-item[aria-selected="true"] .xp-n{color:var(--orange)}
.xp-txt{min-width:0}
.xp-item b{
  display:block;font-family:Sora,sans-serif;font-weight:700;font-size:.94rem;letter-spacing:-.024em;
  color:var(--ink);line-height:1.25;
}
.xp-item .kick{
  display:block;font-family:"JetBrains Mono",monospace;font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.xp-item[aria-selected="true"] b{color:var(--navy)}
[data-theme="dark"] .xp-item[aria-selected="true"] b{color:#A8AEFF}
.xp-item .chev{width:12px;height:12px;color:var(--rail);transition:.2s}
.xp-item:hover .chev{color:var(--ink-3)}
.xp-item[aria-selected="true"] .chev{color:var(--orange);transform:translateX(2px)}

/* detail sheet */
.xp-panel{padding:0;min-width:0;max-width:100%;display:flex;flex-direction:column}
.xp-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px clamp(22px,2.6vw,32px);border-bottom:1px solid var(--rail);background:var(--surface-2);
}
.xp-bar .mk{
  height:54px;min-width:140px;border-radius:12px;background:#FCFDFF;border:1px solid var(--rail);
  display:grid;place-items:center;padding:9px 16px;box-shadow:0 2px 8px -4px rgba(11,13,36,.18);
}
[data-theme="dark"] .xp-bar .mk{background:#F4F6FC;border-color:rgba(255,255,255,.1)}
.xp-bar .mk .plogo{height:32px;width:100%}
.xp-bar .mk .glyph{width:22px;height:22px;color:#2B2E7F}
.xp-bar .doc{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:.83rem;font-weight:600;
  color:var(--navy);padding:8px 14px;border-radius:999px;border:1px solid var(--rail);background:var(--surface);
  transition:.2s;white-space:nowrap;
}
.xp-bar .doc:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.xp-bar .doc svg{width:14px;height:14px}
.lvl{font-family:"JetBrains Mono",monospace;font-size:.57rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.lvl.start{background:color-mix(in srgb,var(--pos) 15%,transparent);color:var(--pos)}
.lvl.active{background:color-mix(in srgb,var(--navy) 13%,transparent);color:var(--navy)}
.lvl.pro{background:color-mix(in srgb,var(--orange) 17%,transparent);color:var(--orange-600)}
[data-theme="dark"] .lvl.pro{color:var(--orange)}

.xp-body{padding:clamp(24px,2.8vw,34px);flex:1}
.xp-body h3{font-size:clamp(1.3rem,2vw,1.6rem);margin-bottom:11px}
.xp-body .sum{font-size:.94rem;color:var(--ink-2);line-height:1.72;max-width:66ch}
.xp-cols > *{min-width:0}
.xp-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(22px,2.8vw,38px);margin-top:26px}
.xp-cols h4{
  font-family:"JetBrains Mono",monospace;font-size:.59rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rail-2);
}
.xp-gets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.xp-gets li{display:grid;grid-template-columns:18px 1fr;gap:11px;font-size:.87rem;color:var(--ink-2);line-height:1.55}
.xp-gets .tk{
  width:18px;height:18px;border-radius:6px;display:grid;place-items:center;margin-top:1px;
  background:color-mix(in srgb,var(--pos) 14%,transparent);color:var(--pos);
}
.xp-gets .tk svg{width:11px;height:11px}

/* install steps, drawn as a short numbered run */
.xp-need{list-style:none;margin:0;padding:0;position:relative}
.xp-need li{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid var(--rail);background:var(--surface-2);font-size:.84rem;font-weight:600;color:var(--ink)}
.xp-need li + li{margin-top:8px}
.xp-need li::after{
  content:"";position:absolute;left:26px;bottom:-9px;width:1px;height:8px;background:var(--rail);
}
.xp-need li:last-child::after{display:none}
.xp-need li i{
  font-style:normal;font-family:"JetBrains Mono",monospace;font-size:.6rem;font-weight:800;letter-spacing:.04em;
  color:#fff;background:var(--navy);border-radius:7px;width:22px;height:22px;display:grid;place-items:center;flex:none;
}
[data-theme="dark"] .xp-need li i{color:#0B0D24}
.xp-need li.opt{border-style:dashed;background:transparent}
.xp-need li.opt i{background:var(--rail);color:var(--ink-3)}

.xp-best{
  margin-top:24px;padding:15px 18px;border-left:3px solid var(--orange);
  background:color-mix(in srgb,var(--orange) 8%,transparent);border-radius:0 10px 10px 0;
  font-size:.87rem;color:var(--ink-2);line-height:1.65;
}
.xp-best b{color:var(--ink)}
.xp-foot{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:18px clamp(22px,2.6vw,32px);border-top:1px solid var(--rail);background:var(--surface-2);
}
.xp-foot .hint{margin-left:auto;font-size:.78rem;color:var(--ink-3)}

/* ---------- ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rail);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md)}
.rung{padding:clamp(24px,2.6vw,32px) clamp(20px,2vw,26px);border-right:1px solid var(--rail);display:flex;flex-direction:column}
.rung:last-child{border-right:0}
.rung .bars{display:flex;gap:4px;margin-bottom:16px}
.rung .bars i{height:4px;flex:1;border-radius:2px;background:var(--rail)}
.rung .bars i.on{background:var(--orange)}
.rung .who{font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.rung h3{margin:9px 0 10px;font-size:clamp(1.05rem,1.5vw,1.18rem)}
.rung p{font-size:.86rem;color:var(--ink-2);flex:1;line-height:1.65}
.rung .pick{margin-top:18px;padding-top:15px;border-top:1px dashed var(--rail);font-size:.8rem;color:var(--ink-3)}
.rung .pick b{display:block;font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.rung .pick span{color:var(--ink);font-weight:600}

/* ---------- capability grid ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cap{background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);padding:22px 20px;transition:border-color .22s,transform .22s}
.cap:hover{border-color:color-mix(in srgb,var(--navy) 36%,var(--rail));transform:translateY(-3px)}
.cap .k{font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700;display:block;margin-bottom:9px}
.cap b{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:.97rem;letter-spacing:-.02em;margin-bottom:7px}
.cap p{font-size:.84rem;color:var(--ink-2);line-height:1.6}

/* ---------- requirements ---------- */
.reqs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.req{background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);padding:20px 18px;text-align:center}
/* These were a navy glyph on a faint tile — near-invisible on a dark page and
   weak on a light one. Filling the tile with the brand gradient and inverting
   the glyph gives one treatment that reads clearly in both themes, and matches
   the icon language used everywhere else on the site. */
.req .ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin:0 auto 14px;
  background:var(--grad-brand);border:0;color:#fff;
  box-shadow:0 8px 18px -8px rgba(43,46,127,.55);
}
[data-theme="dark"] .req .ic{color:#0B0D24;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.req:hover .ic{transform:scale(1.05)}
.req .ic{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.req .ic svg{width:21px;height:21px}
.req b{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:.9rem;letter-spacing:-.02em;margin-bottom:5px}
.req span{font-size:.79rem;color:var(--ink-3);line-height:1.5}

/* ---------- faq ---------- */
.faq{max-width:900px;margin-inline:auto}
.qa{border-bottom:1px solid var(--rail)}
.qa:first-child{border-top:1px solid var(--rail)}
.qa-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;text-align:left;font-family:Sora,sans-serif;font-weight:700;font-size:clamp(.95rem,1.4vw,1.05rem);letter-spacing:-.014em;transition:color .18s}
.qa-q:hover{color:var(--navy)}
.qa-q .pm{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;border:1px solid var(--rail);color:var(--navy);transition:.24s}
.qa.open .qa-q .pm{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(45deg)}
.qa-a{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.qa-a p{padding:0 4px 20px;color:var(--ink-2);font-size:.91rem;max-width:76ch;line-height:1.7}

/* ---------- closing band ---------- */
.band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-brand);color:#fff;padding:clamp(38px,5vw,64px) clamp(26px,4vw,58px);text-align:center;box-shadow:var(--shadow-lg)}
.band::before{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(50% 70% at 12% 10%,rgba(247,148,29,.4),transparent 60%),radial-gradient(46% 66% at 88% 90%,rgba(247,148,29,.28),transparent 60%)}
.band > *{position:relative;z-index:2}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.86);max-width:58ch;margin:16px auto 0}
.band .band-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.band .btn--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.band .btn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff}

@media (max-width:1080px){
  /* the index becomes a horizontal rail above the sheet; the mask flips
     with it so the fade is on the edges you can actually scroll past */
  .xp{grid-template-columns:1fr}
  .xp > *{min-width:0}
  .xp-side{border-right:0;border-bottom:1px solid var(--rail)}
  .xp-list{
    max-height:none;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .xp-list::-webkit-scrollbar{height:6px}
  .xp-item{flex:0 0 auto;width:216px;grid-template-columns:40px 1fr}
  .xp-item .chev{display:none}
  .xp-item[aria-selected="true"]::before{top:auto;bottom:0;left:12px;right:12px;width:auto;height:3px;border-radius:3px 3px 0 0}
  .xp-cols{grid-template-columns:1fr;gap:26px}
  .caps{grid-template-columns:repeat(2,1fr)}
  .reqs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .xp-bar{padding:14px 18px;gap:10px}
  .xp-bar .doc{margin-left:0;width:100%;justify-content:center}
  .xp-body,.xp-foot{padding-inline:18px}
  .xp-foot{flex-direction:column;align-items:stretch}
  .xp-foot .btn{width:100%}
  .xp-foot .hint{margin-left:0;text-align:center;margin-top:4px}
}
@media (max-width:760px){
  .ladder{grid-template-columns:1fr}
  .rung{border-right:0;border-bottom:1px solid var(--rail)}
  .rung:last-child{border-bottom:0}
}
@media (max-width:600px){
  .caps{grid-template-columns:1fr}
  .chip-plat{width:112px;height:50px}
  .chip-plat .plogo{height:24px}
}

/* ============================================================
   POLISH LAYER — a shared upgrade to the primitives every page
   already uses, so the lift is consistent rather than page-deep.
   Four moves, in order of how much they carry:
     1. DEPTH    — shadows tinted with the brand navy and layered
                   (ambient + direct) instead of flat grey blur.
     2. MATERIAL — a hairline of light along the top edge of every
                   raised surface: the cheapest way to make a card
                   read as a physical object rather than a div.
     3. MOTION   — one easing curve and one duration everywhere,
                   so hovers across the site feel like one product.
     4. DIMENSION— a small pointer-driven tilt on the few surfaces
                   that genuinely depict a screen or a card.
   Everything degrades: reduced-motion, coarse pointers and
   no-JS all end up with the flat, fast version.
   ============================================================ */


/* NOTE: buttons, focus rings, the eyebrow dash and the base card lift are
   already handled by the POLISH LAYER further down this stylesheet. This
   block deliberately adds only what that layer does not cover: the depth
   tokens, the material edge, section lighting, figure alignment and the
   pointer tilt. */

/* ---- 1. depth ---------------------------------------------- */
:root{
  --shadow-sm:0 1px 2px rgba(20,22,58,.05), 0 2px 8px rgba(20,22,58,.05);
  --shadow-md:0 2px 6px rgba(20,22,58,.06), 0 10px 24px rgba(20,22,58,.08), 0 24px 56px rgba(20,22,58,.07);
  --shadow-lg:0 4px 10px rgba(20,22,58,.07), 0 16px 40px rgba(20,22,58,.10), 0 40px 96px rgba(20,22,58,.12);
  --ease:cubic-bezier(.2,.7,.3,1);
  --edge:inset 0 1px 0 rgba(255,255,255,.85);
}
[data-theme="dark"]{
  --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 2px 8px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.35);
  --shadow-lg:0 4px 12px rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.5), 0 48px 110px rgba(0,0,0,.45);
  --edge:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- 2. material: the light edge on raised surfaces --------- */
.qcard, .px, .plan, .imx, .every-strip, .mdemo, .dlcard, .post, .an,
.px-why, .combo, .prodx article, .atx-win, .band, .rel-card, .ptile{
  box-shadow:var(--edge), var(--shadow-sm);
}
[data-theme="dark"] .qcard, [data-theme="dark"] .px, [data-theme="dark"] .plan,
[data-theme="dark"] .dlcard, [data-theme="dark"] .post, [data-theme="dark"] .an{
  border-color:color-mix(in srgb, var(--rail) 85%, #fff 15%);
}

/* ---- 3. motion: one curve, one distance -------------------- */
.qcard, .px, .dlcard, .post, .an, .rel-card, .mr, .prodx article, .combo{
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  will-change:transform;
}
.qcard:hover, .dlcard:hover, .post:hover, .an:hover, .rel-card:hover, .prodx article:hover{
  transform:translateY(-3px);
  box-shadow:var(--edge), var(--shadow-md);
}
/* icon chips pick up the parent's hover rather than sitting inert */
.qcard:hover .ic, .dlcard:hover .ic, .prodx article:hover .ic, .px:hover .ic{
  transform:translateY(-1px) scale(1.04);
  border-color:color-mix(in srgb, var(--navy) 40%, var(--rail));
}
.ic{transition:transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease)}

/* ---- sections: a soft spotlight instead of a flat fill ----- */
.sec--tint{position:relative;isolation:isolate}
.sec--tint::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%, rgba(247,148,29,.05), transparent 60%);
}
[data-theme="dark"] .sec--tint::before{
  background:radial-gradient(120% 60% at 50% 0%, rgba(122,129,240,.09), transparent 62%);
}
/* the rule that separates sections becomes a gradient hairline */
.sec--rail{border-top:0;position:relative}
.sec--rail::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rail) 18%,var(--rail) 82%,transparent);
}

/* ---- numerals: aligned figures wherever numbers matter ----- */
.plan .v, .imx-t td, .band-stat b, .pstat b, .spec .v, .dl-spec, .price, .amt{
  font-variant-numeric:tabular-nums;
}

/* ---- 4. dimension: tilt, only where it depicts a surface --- */
[data-tilt]{transform-style:preserve-3d;transition:transform .4s var(--ease)}
[data-tilt].tilting{transition:transform .08s linear}
[data-tilt] > *{transform:translateZ(0.01px)}

@media (prefers-reduced-motion:reduce){
  .qcard,.px,.dlcard,.post,.an,.rel-card,.mr,.prodx article,.combo,
  [data-tilt],.btn,.ic{transition:none !important}
  .qcard:hover,.dlcard:hover,.post:hover,.an:hover,.rel-card:hover,
  .prodx article:hover{transform:none}
  .btn--flame::after{display:none}
}

/* ============================================================
   PREMIUM LAYER II — the techniques that separate a good site
   from an expensive one, applied to the card primitives every
   page is built from.

     A. SPOTLIGHT   a light source that follows the cursor inside
                    a card. The single strongest "this is a real
                    product" signal in modern SaaS design, because
                    the surface appears to be lit rather than
                    painted. One delegated listener drives all of
                    them.
     B. EDGE LIGHT  a gradient hairline that traces the card
                    border on hover, brightest nearest the cursor
                    side. Replaces the usual flat border-colour
                    swap, which always reads as a CSS default.
     C. NUMERALS    step and claim numbers become editorial: a
                    gradient face over a hollow ghost numeral.
     D. AURORA      dark sections get a slow, layered colour field
                    instead of a flat fill — depth without noise.
     E. GLASS       the "check it" strips become inset glass with
                    a lit accent rail, so a proof reads differently
                    from a paragraph.

   Every effect is pointer-driven; nothing animates at rest, and
   coarse pointers and reduced-motion get the flat version.
   ============================================================ */

/* ---- A. cursor spotlight ----------------------------------- */
.qcard,.step,.dl,.fail,.cat,.way,.build,.pillar,.incl-card,.prod,.qk,.ptr,.astep,.stp,.bt,.acc,.offer,.dlcard,.post,.an,.px,.combo,.mr,.rel-card,.prodx article,.imx,.mdemo,.every-strip,.plan{
  position:relative;
  --mx:50%; --my:0%;
}
.qcard::after,.step::after,.dl::after,.fail::after,.cat::after,.way::after,.build::after,.pillar::after,.incl-card::after,.prod::after,.qk::after,.ptr::after,.astep::after,.stp::after,.bt::after,.acc::after,.offer::after,.dlcard::after,.post::after,.an::after,.px::after,.combo::after,.mr::after,.rel-card::after,.prodx article::after,.imx::after,.mdemo::after,.every-strip::after,.plan::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),
             rgba(247,148,29,.10), rgba(247,148,29,.04) 40%, transparent 68%);
  opacity:0;transition:opacity .3s var(--ease);z-index:0;
}
[data-theme="dark"] .qcard::after,[data-theme="dark"] .step::after,[data-theme="dark"] .dl::after,[data-theme="dark"] .fail::after,[data-theme="dark"] .cat::after,[data-theme="dark"] .way::after,[data-theme="dark"] .build::after,[data-theme="dark"] .pillar::after,[data-theme="dark"] .incl-card::after,[data-theme="dark"] .prod::after,[data-theme="dark"] .qk::after,[data-theme="dark"] .ptr::after,[data-theme="dark"] .astep::after,[data-theme="dark"] .stp::after,[data-theme="dark"] .bt::after,[data-theme="dark"] .acc::after,[data-theme="dark"] .offer::after,[data-theme="dark"] .dlcard::after,[data-theme="dark"] .post::after,[data-theme="dark"] .an::after,[data-theme="dark"] .px::after,[data-theme="dark"] .combo::after,[data-theme="dark"] .mr::after,[data-theme="dark"] .rel-card::after,[data-theme="dark"] .prodx article::after,[data-theme="dark"] .imx::after,[data-theme="dark"] .mdemo::after,[data-theme="dark"] .every-strip::after,[data-theme="dark"] .plan::after{
  background:radial-gradient(340px circle at var(--mx) var(--my),
             rgba(140,148,255,.16), rgba(122,129,240,.06) 42%, transparent 70%);
}
.qcard.lit::after,.step.lit::after,.dl.lit::after,.fail.lit::after,.cat.lit::after,.way.lit::after,.build.lit::after,.pillar.lit::after,.incl-card.lit::after,.prod.lit::after,.qk.lit::after,.ptr.lit::after,.astep.lit::after,.stp.lit::after,.bt.lit::after,.acc.lit::after,.offer.lit::after,.dlcard.lit::after,.post.lit::after,.an.lit::after,.px.lit::after,.combo.lit::after,.mr.lit::after,.rel-card.lit::after,.prodx article.lit::after,.imx.lit::after,.mdemo.lit::after,.every-strip.lit::after,.plan.lit::after{opacity:1}
/* content must sit above the light, not under it */
.qcard > *,.step > *,.dl > *,.fail > *,.cat > *,.way > *,.build > *,.pillar > *,.incl-card > *,.prod > *,.qk > *,.ptr > *,.astep > *,.stp > *,.bt > *,.acc > *,.offer > *,.dlcard > *,.post > *,.an > *,.px > *,.combo > *,.mr > *,.rel-card > *,.prodx article > *,.imx > *,.mdemo > *,.every-strip > *,.plan > *{position:relative;z-index:1}

/* ---- B. gradient edge light -------------------------------- */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .qcard::before,.step::before,.dl::before,.fail::before,.cat::before,.way::before,.build::before,.pillar::before,.incl-card::before,.prod::before,.qk::before,.ptr::before,.astep::before,.stp::before,.bt::before,.acc::before,.offer::before,.dlcard::before,.post::before,.an::before,.px::before,.combo::before,.mr::before,.rel-card::before,.prodx article::before,.imx::before,.mdemo::before,.every-strip::before,.plan::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--orange) 55%,transparent),
      transparent 38%, transparent 62%,
      color-mix(in srgb,var(--navy) 55%,transparent));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    opacity:0;transition:opacity .35s var(--ease);pointer-events:none;z-index:0;
  }
  .qcard.lit::before,.step.lit::before,.dl.lit::before,.fail.lit::before,.cat.lit::before,.way.lit::before,.build.lit::before,.pillar.lit::before,.incl-card.lit::before,.prod.lit::before,.qk.lit::before,.ptr.lit::before,.astep.lit::before,.stp.lit::before,.bt.lit::before,.acc.lit::before,.offer.lit::before,.dlcard.lit::before,.post.lit::before,.an.lit::before,.px.lit::before,.combo.lit::before,.mr.lit::before,.rel-card.lit::before,.prodx article.lit::before,.imx.lit::before,.mdemo.lit::before,.every-strip.lit::before,.plan.lit::before{opacity:.9}
}

/* ---- C. editorial numerals --------------------------------- */
.step .n, .dl-n, .fail-n, .px-num, .as i{
  background:linear-gradient(135deg,var(--orange),var(--orange-600) 55%,var(--navy));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="dark"] .step .n,[data-theme="dark"] .px-num{
  background:linear-gradient(135deg,#FBB040,#F7941D 45%,#8E95F5);
  -webkit-background-clip:text;background-clip:text;
}
.step{overflow:hidden}
.step::marker{content:""}
/* a hollow ghost of the same numeral, sitting behind the card corner */
.step .n{position:relative;display:inline-block}
.step .n::after{
  content:attr(data-ghost);position:absolute;right:-14px;top:-26px;
  font-size:5.4rem;font-weight:800;letter-spacing:-.05em;line-height:1;
  -webkit-text-stroke:1px color-mix(in srgb,var(--navy) 26%,transparent);
  color:transparent;pointer-events:none;z-index:-1;
}
[data-theme="dark"] .step .n::after{
  -webkit-text-stroke-color:color-mix(in srgb,var(--navy) 34%,transparent);
}

/* ---- D. aurora field on tinted sections -------------------- */
[data-theme="dark"] .sec--tint::before{
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(122,129,240,.14), transparent 60%),
    radial-gradient(50% 45% at 88% 8%, rgba(247,148,29,.07), transparent 62%),
    radial-gradient(70% 60% at 50% 110%, rgba(90,97,216,.10), transparent 65%);
}
.sec--tint::before{
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(63,68,181,.05), transparent 60%),
    radial-gradient(50% 45% at 88% 8%, rgba(247,148,29,.06), transparent 62%),
    radial-gradient(70% 60% at 50% 110%, rgba(63,68,181,.04), transparent 65%);
}

/* ---- E. proof strips read as glass ------------------------- */
.dl-test, .fail-good, .es-note, .imx-note, .aud-note{
  position:relative;border-radius:10px;
  background:color-mix(in srgb,var(--surface-2) 88%, transparent);
  border:1px solid color-mix(in srgb,var(--rail) 70%, transparent);
  padding:11px 14px 11px 16px;
}
.dl-test::before, .fail-good::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--pos),color-mix(in srgb,var(--pos) 30%,transparent));
}
[data-theme="dark"] .dl-test, [data-theme="dark"] .fail-good{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- step connectors: a lit line, not a dot ---------------- */
.steps{position:relative}
.steps .step + .step::marker{content:none}
@media (min-width:900px){
  .steps .step:not(:last-child)::marker{content:none}
}

@media (prefers-reduced-motion:reduce){
  .qcard::after,.step::after,.dl::after,.fail::after,.cat::after,.way::after,.build::after,.pillar::after,.incl-card::after,.prod::after,.qk::after,.ptr::after,.astep::after,.stp::after,.bt::after,.acc::after,.offer::after,.dlcard::after,.post::after,.an::after,.px::after,.combo::after,.mr::after,.rel-card::after,.prodx article::after,.imx::after,.mdemo::after,.every-strip::after,.plan::after,
  .qcard::before,.step::before,.dl::before,.fail::before,.cat::before,.way::before,.build::before,.pillar::before,.incl-card::before,.prod::before,.qk::before,.ptr::before,.astep::before,.stp::before,.bt::before,.acc::before,.offer::before,.dlcard::before,.post::before,.an::before,.px::before,.combo::before,.mr::before,.rel-card::before,.prodx article::before,.imx::before,.mdemo::before,.every-strip::before,.plan::before{transition:none}
}

/* ============================================================
   RESPONSIVE REFINEMENT — phones and small tablets.
   The site already collapsed its grids correctly; what it did
   not do was resize the CONTROLS. A button that keeps its
   desktop padding and then stretches to the full width of a
   360px screen reads as oversized — the label floats in the
   middle of a slab. These rules keep every call to action
   thumb-sized (48px, the accessible minimum) without letting it
   become a billboard, and make secondary actions visibly
   secondary so a stacked pair still has a hierarchy.
   ============================================================ */
@media (max-width:600px){
  .btn{
    padding:12px 20px;
    font-size:.9rem;
    min-height:48px;               /* tap target, not visual bulk */
    line-height:1.25;
  }
  .btn--sm{padding:10px 16px;font-size:.84rem;min-height:44px}
  .btn--flame{box-shadow:0 4px 14px rgba(247,148,29,.3)}
  .btn svg{width:14px;height:14px}

  /* stacked CTA rows: full width for reachability, tight spacing */
  .hero-cta,.atx-cta,.px-ctas,.imx-btns,.mdemo-ctas,.px-cta-row,.art-cta .btn-row{
    display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;
  }
  .hero-cta .btn,.atx-cta .btn,.px-ctas .btn,.imx-btns .btn,
  .mdemo-ctas .btn,.px-cta-row .btn{width:100%}

  /* the second action in a stacked pair steps back visually */
  .hero-cta .btn--ghost,.atx-cta .btn--ghost,.imx-btns .btn--ghost,
  .px-ctas .btn--ghost,.px-cta-row .btn--ghost{
    background:transparent;
    border-color:color-mix(in srgb,var(--rail) 90%,transparent);
    box-shadow:none;
  }
  /* inline text links inside CTA rows keep their own rhythm */
  .px-ctas .px-sub,.mdemo-ctas .mdemo-alt,.imx-btns + .imx-aud{text-align:center}
}

/* very small screens: trim the frame, never the content */
@media (max-width:380px){
  .btn{padding:12px 14px;font-size:.86rem;gap:7px}
  .atx-steps{padding:14px 14px}
  .atx-steps .as{font-size:.82rem;gap:9px}
  .atx-badge{font-size:.5rem;letter-spacing:.1em;padding:5px 10px}
  .step .n::after{display:none}     /* the ghost numeral needs room to breathe */
}

/* nothing on any page may push the viewport sideways */
img,svg,video,canvas,table{max-width:100%}
body{overflow-x:hidden}

/* ============================================================
   SECTION RAIL + BACK-TO-TOP PLACEMENT

   The rail is a reading map: one dot per section, pinned to the
   right edge, the current one elongated into a pill. Hovering a
   dot names the section; clicking jumps to it. It is built at
   runtime from the page's own headings, so it can never fall out
   of sync with the content, and it only appears on screens wide
   enough that it sits beside the text rather than on top of it.

   Back-to-top moves to the LEFT edge. The Zoho chat launcher owns
   the bottom-right corner on every page; two floating controls
   fighting for one corner is how a button becomes unclickable.
   ============================================================ */
.srail{
  position:fixed;top:50%;right:18px;transform:translateY(-50%);
  z-index:40;display:none;flex-direction:column;gap:4px;
  padding:10px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  border:1px solid color-mix(in srgb,var(--rail) 70%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
}
@media (min-width:1240px){ .srail{display:flex} }
.srail-item{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:999px;cursor:pointer;
}
.srail-dot{
  width:7px;height:7px;border-radius:999px;
  background:color-mix(in srgb,var(--ink-3) 55%,transparent);
  transition:background .25s var(--ease),height .3s var(--ease),width .3s var(--ease);
}
.srail-item:hover .srail-dot{background:var(--ink-2)}
.srail-item[aria-current="true"] .srail-dot{
  background:var(--grad-flame);height:18px;width:7px;
}
/* the label rides out to the left, never pushing layout */
.srail-label{
  position:absolute;right:28px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;pointer-events:none;opacity:0;
  padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--rail);
  box-shadow:var(--shadow-md);
  font-family:"JetBrains Mono",monospace;font-size:.58rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.srail-item:hover .srail-label,
.srail-item:focus-visible .srail-label{opacity:1;transform:translateY(-50%) translateX(0)}
.srail-item:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* progress thread behind the dots */
.srail::before{
  content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,var(--rail) 12%,var(--rail) 88%,transparent);
  z-index:-1;
}

/* ---- back to top, now bottom-left ---- */
.totop{
  right:auto !important;
  left:20px;
  border-radius:14px;
}
@media (max-width:640px){ .totop{left:14px;bottom:14px} }

@media (prefers-reduced-motion:reduce){
  .srail-dot,.srail-label{transition:none}
}

/* ---- button icons are sized by CSS, not by trusting each tag ----
   An <svg> without width/height defaults to filling its box; one
   forgotten attribute is enough to turn a button into a billboard,
   which is exactly what happened. This makes the size structural. */
.btn > svg, .btn svg{width:15px;height:15px;flex:none}
.btn--sm > svg, .btn--sm svg{width:14px;height:14px}
.go svg, .mr > svg, .px-sub svg, .imx-alt svg{flex:none}

/* "Free" reads differently from "Beta": a green status, not the flame
   used for launches, so the two badges never compete in the menu */
.mega-badge--free,.dr-new--free{
  background:rgba(30,169,124,.14);color:#0E6B4F;
  box-shadow:inset 0 0 0 1px rgba(30,169,124,.38);
}
[data-theme="dark"] .mega-badge--free,[data-theme="dark"] .dr-new--free{color:#4ED4A5;box-shadow:inset 0 0 0 1px rgba(78,212,165,.38)}

/* ============================================================
   CRAFT LAYER — the details that separate a well-built site from
   a designed one. None of it is decoration for its own sake:

   1. TYPE     headlines balance their lines, paragraphs refuse
               orphans, numerals and ligatures are set properly.
   2. MOTIF    every page family opens on its own drawn texture —
               a blueprint grid for products, ruled ledger lines for
               wealth tools, contour lines for the home page — so
               each page is recognisable before a word is read.
   3. GRAIN    a whisper of film grain over flat colour, the way
               print and the best screen work avoid banding.
   4. PROGRESS a hairline that fills as you read.
   5. DETAIL   links in prose underline from the left, selection and
               scrollbars carry the brand.
   ============================================================ */

/* ---- 1. typography --------------------------------------- */
h1,h2,h3,.display{text-wrap:balance;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
p,li,.lede{text-wrap:pretty;hanging-punctuation:first}
h1{letter-spacing:-.035em}
h2{letter-spacing:-.028em}

/* ---- 2. per-page signature motif ------------------------- */
.motif{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  --ln:rgba(43,46,127,.075);
  -webkit-mask-image:radial-gradient(ellipse 72% 88% at 62% 18%,#000 12%,transparent 74%);
          mask-image:radial-gradient(ellipse 72% 88% at 62% 18%,#000 12%,transparent 74%);
}
[data-theme="dark"] .motif{--ln:rgba(142,149,245,.10)}
.motif--grid{
  background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);
  background-size:34px 34px;
}
.motif--dots{background-image:radial-gradient(var(--ln) 1.3px,transparent 1.5px);background-size:18px 18px}
.motif--hatch{background-image:repeating-linear-gradient(135deg,var(--ln) 0 1px,transparent 1px 15px)}
.motif--rings{background-image:repeating-radial-gradient(circle at 78% 22%,var(--ln) 0 1px,transparent 1px 28px)}
.motif--ruled{background-image:repeating-linear-gradient(0deg,var(--ln) 0 1px,transparent 1px 30px),
  linear-gradient(90deg,transparent 0 76px,rgba(247,148,29,.16) 76px 77px,transparent 77px)}
.motif--contour{background-image:
  repeating-radial-gradient(ellipse 120% 70% at 30% 110%,var(--ln) 0 1px,transparent 1px 22px),
  repeating-radial-gradient(ellipse 90% 60% at 95% -10%,var(--ln) 0 1px,transparent 1px 26px)}
.motif--lines{background-image:linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:64px 100%}
.has-motif{position:relative;isolation:isolate}

/* ---- 3. grain --------------------------------------------- */
.grain{
  position:fixed;inset:-50%;z-index:120;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .grain{opacity:.05}
@media print{.grain,.readbar{display:none}}

/* ---- 4. reading progress --------------------------------- */
.readbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:130;pointer-events:none;
  background:var(--grad-flame);transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 10px rgba(247,148,29,.45);
}

/* ---- 5. detail ------------------------------------------- */
.art-body a, .lede a, .qa-a a, .imx-aud a, .atx2-fine a, .tx-fine a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  text-decoration:none;transition:background-size .3s var(--ease);
}
.art-body a:hover, .lede a:hover, .qa-a a:hover, .imx-aud a:hover, .atx2-fine a:hover, .tx-fine a:hover{background-size:100% 1px}

::selection{background:rgba(247,148,29,.28);color:inherit}
[data-theme="dark"] ::selection{background:rgba(142,149,245,.35)}

@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--ink-3) 35%,transparent);
    border-radius:999px;border:3px solid transparent;background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--orange) 55%,transparent)}
}
html{scrollbar-color:color-mix(in srgb,var(--ink-3) 40%,transparent) transparent;scrollbar-width:thin}

@media (prefers-reduced-motion:reduce){
  .readbar{display:none}
  .art-body a,.lede a,.qa-a a{transition:none}
}

/* ============================================================
   EXPERIENCE LAYER — the parts of a great site you notice only
   when they are missing: a way past the menu for keyboard users,
   a map of a long article, links that go to the exact question
   or paragraph, and search you can reach without the mouse.
   ============================================================ */

/* ---- skip link: invisible until a keyboard user needs it ---- */
.skip{
  position:fixed;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:10px;
  background:var(--ink);color:var(--surface);font-weight:700;font-size:.88rem;
  box-shadow:var(--shadow-md);transition:top .2s var(--ease);
}
.skip:focus{top:14px;outline:2px solid var(--orange);outline-offset:2px}

/* ---- article table of contents ---- */
.toc{
  position:fixed;top:132px;left:max(20px,calc(50% - 640px));width:220px;z-index:30;
  max-height:calc(100vh - 280px);overflow:auto;display:none;
  padding:14px 12px 12px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  border:1px solid color-mix(in srgb,var(--rail) 80%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.toc.show{opacity:1;transform:none}
@media (min-width:1320px){ .toc{display:block} .toc-inline{display:none} }
.toc-h{
  margin:0 0 8px 6px;font-family:"JetBrains Mono",monospace;font-size:.56rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.toc ol,.toc-inline ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li,.toc-inline li{counter-increment:t}
.toc a,.toc-inline a{
  display:grid;grid-template-columns:22px 1fr;gap:4px;padding:6px 8px;border-radius:8px;
  font-size:.8rem;line-height:1.35;color:var(--ink-3);
  transition:color .18s,background .18s;
}
.toc a::before,.toc-inline a::before{
  content:counter(t,decimal-leading-zero);font-family:"JetBrains Mono",monospace;
  font-size:.58rem;font-weight:700;color:var(--ink-3);padding-top:2px;
}
.toc a:hover{color:var(--ink);background:var(--surface-2)}
.toc a[aria-current="true"]{color:var(--ink);background:var(--surface-2);font-weight:600}
.toc a[aria-current="true"]::before{color:var(--orange)}
.toc-inline{
  margin:0 0 28px;border:1px solid var(--rail);border-radius:var(--r-md);background:var(--surface-2);
}
.toc-inline summary{
  cursor:pointer;list-style:none;padding:13px 16px;font-weight:700;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline summary::after{content:"+";font-size:1.1rem;color:var(--ink-3);transition:transform .2s var(--ease)}
.toc-inline[open] summary::after{transform:rotate(45deg)}
.toc-inline ol{padding:0 8px 10px}

/* ---- heading deep links ---- */
.art-body h2{position:relative;scroll-margin-top:calc(var(--head-h,72px) + 20px)}
.hlink{
  position:absolute;left:-30px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  color:var(--ink-3);opacity:0;transition:opacity .18s,color .18s,background .18s;
}
.art-body h2:hover .hlink,.hlink:focus-visible{opacity:1}
.hlink:hover{color:var(--orange);background:var(--surface-2)}
.hlink svg{width:14px;height:14px}
.hlink[data-copied]::after{
  content:"Link copied";position:absolute;left:30px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-family:"JetBrains Mono",monospace;font-size:.56rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--ink);color:var(--surface);
}
@media (max-width:760px){ .hlink{left:auto;right:-4px;opacity:.55} }

/* ---- FAQ deep links ---- */
.qa{scroll-margin-top:calc(var(--head-h,72px) + 24px)}
.qa.flash{animation:qaFlash 1.6s var(--ease)}
@keyframes qaFlash{0%{box-shadow:0 0 0 0 rgba(247,148,29,.5)}100%{box-shadow:0 0 0 14px rgba(247,148,29,0)}}

/* ---- search shortcut hint ---- */
.kbd-hint{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:"JetBrains Mono",monospace;font-size:.62rem;font-weight:700;color:var(--ink-3);
  padding:2px 7px;border-radius:5px;border:1px solid var(--rail);background:var(--surface);
}
@media (hover:none){ .kbd-hint{display:none} }

@media (prefers-reduced-motion:reduce){
  .toc,.skip,.hlink{transition:none}
  .qa.flash{animation:none}
}