/* ============================================================
   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}
}










/* ============================================================
   BLOG
   A hub that has to do two jobs: let someone browse by subject,
   and let someone follow a path from beginner to advanced. The
   level filter is the second job — most blog indexes only do the
   first, which is why they read as an archive rather than a course.
   ============================================================ */
.hero-bl{position:relative;padding:clamp(40px,5vw,70px) 0 clamp(24px,3vw,34px);overflow:hidden;text-align:center}
.hero-bl::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:78%;pointer-events:none;
  background:radial-gradient(52% 52% at 26% 34%,rgba(43,46,127,.13),transparent 70%),
             radial-gradient(42% 42% at 78% 24%,rgba(247,148,29,.13),transparent 70%);
}
[data-theme="dark"] .hero-bl::before{
  background:radial-gradient(52% 52% at 26% 34%,rgba(90,97,216,.23),transparent 70%),
             radial-gradient(42% 42% at 78% 24%,rgba(247,148,29,.13),transparent 70%);
}
.hero-bl .wrap{position:relative;z-index:2}
.hero-bl h1{font-size:clamp(2rem,4vw,3rem)}
.hero-bl .lede{margin:18px auto 0;max-width:64ch}

.bl-search{
  position:relative;display:flex;align-items:center;gap:12px;max-width:560px;margin:28px auto 0;
  background:var(--surface);border:1px solid var(--rail);border-radius:14px;padding:0 16px;
  box-shadow:var(--shadow-md);transition:border-color .2s,box-shadow .2s;
}
.bl-search:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px color-mix(in srgb,var(--navy) 12%,transparent),var(--shadow-md)}
.bl-search svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.bl-search input{
  flex:1;min-width:0;border:0;background:transparent;padding:15px 0;font-family:Inter,sans-serif;
  font-size:.96rem;color:var(--ink);outline:none;
}
.bl-search input::-webkit-search-cancel-button{display:none}

/* filters */
.bl-filters{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:26px}
.bl-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.bl-row .lbl{
  font-family:"JetBrains Mono",monospace;font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;align-self:center;margin-right:4px;
}
.bf{
  padding:8px 16px;border-radius:999px;border:1px solid var(--rail);background:var(--surface);
  font-size:.82rem;font-weight:600;color:var(--ink-2);transition:.2s;
}
.bf:hover{border-color:var(--navy);color:var(--navy)}
.bf[aria-pressed="true"]{background:var(--grad-brand);border-color:transparent;color:#fff}
[data-theme="dark"] .bf[aria-pressed="true"]{color:#0B0D24}
.bf--lvl[aria-pressed="true"]{background:var(--grad-flame);color:#1A1200}
.bl-count{margin-top:16px;font-size:.84rem;color:var(--ink-3);min-height:1.2em}

/* article grid */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rail);
  border-radius:var(--r-lg);overflow:hidden;color:inherit;position:relative;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),border-color .24s,box-shadow .24s;
}
.post:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--navy) 34%,var(--rail));box-shadow:var(--shadow-lg)}
.post--soon{opacity:.72}
.post--soon:hover{transform:none;box-shadow:var(--shadow-sm)}
.post-art{
  height:132px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#161A3E,#2B2E7F 58%,#3A2170);
}
.post-art svg{position:absolute;inset:0;width:100%;height:100%}
.post-cat{
  position:absolute;left:14px;top:14px;z-index:2;font-family:"JetBrains Mono",monospace;
  font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:5px 11px;border-radius:6px;background:rgba(255,255,255,.92);color:#2B2E7F;
}
.post-lvl{
  position:absolute;right:14px;top:14px;z-index:2;font-family:"JetBrains Mono",monospace;
  font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:5px 11px;border-radius:6px;background:rgba(0,0,0,.34);color:#fff;
  backdrop-filter:blur(4px);
}
.post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:1.05rem;line-height:1.4;letter-spacing:-.024em;margin-bottom:10px}
.post:hover h3{color:var(--navy)}
[data-theme="dark"] .post:hover h3{color:#A8AEFF}
.post p{font-size:.85rem;color:var(--ink-2);line-height:1.68;flex:1}
.post-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--rail-2);
  font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.post-go{color:var(--navy)}
[data-theme="dark"] .post-go{color:#8E95F5}
.post-soon{color:var(--orange)}
.bl-empty{margin-top:26px;font-size:.92rem;color:var(--ink-3);line-height:1.7}

/* ---- article page ---- */
.art{padding:clamp(30px,4vw,54px) 0 0}
.art-head{max-width:74ch;margin:0 auto}
.art-crumb{
  display:flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:18px;
}
.art-crumb a{color:var(--orange)}
.art h1{font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.15}
.art-sub{margin-top:18px;font-size:clamp(1rem,1.4vw,1.14rem);color:var(--ink-2);line-height:1.7}
.art-meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--rail);
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.art-meta .pill{padding:5px 11px;border-radius:6px;background:var(--rail-2);border:1px solid var(--rail)}
.art-meta .pill--cat{background:var(--grad-brand);color:#fff;border-color:transparent}
[data-theme="dark"] .art-meta .pill--cat{color:#0B0D24}

.art-body{max-width:74ch;margin:0 auto;padding:clamp(28px,3.4vw,44px) 0 0}
.art-body h2{
  font-size:clamp(1.35rem,2.2vw,1.7rem);margin:clamp(34px,4vw,48px) 0 14px;letter-spacing:-.03em;
  scroll-margin-top:calc(var(--head-h) + 20px);
}
.art-body h3{font-size:1.1rem;margin:28px 0 10px;letter-spacing:-.026em}
.art-body p{font-size:1.02rem;color:var(--ink-2);line-height:1.85}
.art-body p + p{margin-top:16px}
.art-body b,.art-body strong{color:var(--ink)}
.art-body a{color:var(--navy);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--orange) 45%,transparent);transition:border-color .18s}
.art-body a:hover{border-color:var(--orange)}
[data-theme="dark"] .art-body a{color:#8E95F5}
.art-body ul,.art-body ol{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;counter-reset:ai}
.art-body ul li{position:relative;padding-left:24px;font-size:1.02rem;color:var(--ink-2);line-height:1.8}
.art-body ul li::before{content:"";position:absolute;left:6px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.art-body ol li{counter-increment:ai;position:relative;padding-left:36px;font-size:1.02rem;color:var(--ink-2);line-height:1.8}
.art-body ol li::before{
  content:counter(ai);position:absolute;left:0;top:3px;width:24px;height:24px;border-radius:7px;
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:.68rem;font-weight:800;
  background:var(--rail-2);border:1px solid var(--rail);color:var(--navy);
}
[data-theme="dark"] .art-body ol li::before{color:#8E95F5}

.art-lead{
  font-size:1.1rem!important;color:var(--ink)!important;line-height:1.8;padding-left:18px;
  border-left:3px solid var(--orange);
}
.art-note{
  margin-top:22px;padding:18px 22px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--rail);font-size:.92rem!important;line-height:1.75;
}
.art-note b{color:var(--ink)}
.art-warn{
  margin-top:22px;padding:18px 22px;border-radius:0 12px 12px 0;border-left:3px solid var(--orange);
  background:color-mix(in srgb,var(--orange) 8%,transparent);font-size:.94rem!important;line-height:1.75;
}
.art-key{
  margin-top:26px;padding:22px 24px;border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--rail);
}
.art-key b{
  display:block;font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
.art-key ul{margin:0}

/* figures */
.fig{margin:clamp(26px,3vw,38px) 0}
.fig-box{
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--shadow-sm);
}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{
  margin-top:12px;font-size:.82rem;color:var(--ink-3);line-height:1.6;text-align:center;
}
.fg-lbl{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-3);font-weight:700}
.fg-t{font-family:Inter,sans-serif;font-size:11px;fill:var(--ink-2)}
.fg-b{font-family:Sora,sans-serif;font-size:12px;font-weight:700;fill:var(--ink)}
.fg-line{stroke:var(--rail);stroke-width:1}
.fg-up{fill:#1EA97C}.fg-dn{fill:#E05656}
.fg-accent{fill:var(--orange)}
.fg-navy{fill:var(--navy)}
[data-theme="dark"] .fg-navy{fill:#8E95F5}

/* table */
.art-table{width:100%;border-collapse:collapse;margin-top:22px;font-size:.92rem}
.art-table th,.art-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--rail)}
.art-table th{
  font-family:"JetBrains Mono",monospace;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;background:var(--surface-2);
}
.art-table td{color:var(--ink-2);line-height:1.6}
.art-table tr:last-child td{border-bottom:0}
.art-wrap-x{overflow-x:auto;margin-top:22px}

/* related + cta */
.art-cta{
  margin:clamp(34px,4vw,52px) auto 0;max-width:74ch;padding:clamp(24px,3vw,34px);
  border-radius:var(--r-lg);background:var(--grad-brand);color:#fff;text-align:center;
}
.art-cta h2{color:#fff;margin:0 0 10px;font-size:1.3rem}
.art-cta p{color:rgba(255,255,255,.86);font-size:.94rem;line-height:1.7;max-width:56ch;margin:0 auto}
.art-cta .btn{margin-top:20px}
.art-next{max-width:74ch;margin:clamp(30px,3.5vw,44px) auto 0}
.art-next-h{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:16px;
}
.art-next-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.an{
  display:block;background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);
  padding:20px;color:inherit;transition:.22s;
}
.an:hover{border-color:color-mix(in srgb,var(--navy) 34%,var(--rail));transform:translateY(-3px)}
.an span{
  display:block;font-family:"JetBrains Mono",monospace;font-size:.54rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:7px;
}
.an b{font-family:Sora,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.022em;line-height:1.4}
.an:hover b{color:var(--navy)}
[data-theme="dark"] .an:hover b{color:#A8AEFF}

@media (max-width:1000px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:660px){
  .bl-grid{grid-template-columns:1fr}
  .art-next-grid{grid-template-columns:1fr}
  .art-body p,.art-body ul li,.art-body ol li{font-size:.97rem}
}

/* ============================================================
   PRODUCTS HUB — the /products index
   Five numbered rows, one per product. The two-digit index and the
   status badge do the visual work; hover behaviour matches the rest
   of the site (motion answers intent, nothing animates at rest).
   ============================================================ */
.hero-px{padding-top:clamp(48px,7vw,84px)}
.px-hero{text-align:center;max-width:820px;margin-inline:auto}
.px-hero .eyebrow{margin-inline:auto}
.px-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.px-hero .lede{margin:20px auto 0}
.px-strip{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin-top:clamp(26px,3.5vw,38px);
}
.px-node{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  border:1px dashed var(--rail);border-radius:999px;padding:7px 13px;background:var(--surface);
}
.px-wire{width:22px;height:2px;border-radius:2px;background:var(--grad-flame);opacity:.55}
@media (max-width:640px){.px-wire{display:none}}

.px{
  display:grid;grid-template-columns:96px 1.35fr 1fr;gap:clamp(18px,3vw,34px);
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);
  padding:clamp(22px,3vw,32px);margin-bottom:16px;box-shadow:var(--shadow-sm);
  transition:transform .24s,border-color .24s,box-shadow .24s;
}
.px:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--navy) 32%,var(--rail));box-shadow:var(--shadow-md)}
.px-num{
  font-family:Sora,sans-serif;font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);letter-spacing:-.05em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;padding-top:4px;
}
[data-theme="dark"] .px-num{background:linear-gradient(120deg,#8E95F5,#C9CDFF);-webkit-background-clip:text;background-clip:text}
.px-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.px-top h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0}
.px-badge{
  font-family:"JetBrains Mono",monospace;font-size:.55rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
}
.px-badge--live{color:#0E6B4F;background:rgba(30,169,124,.12);border:1px solid rgba(30,169,124,.35)}
[data-theme="dark"] .px-badge--live{color:#4ED4A5;border-color:rgba(78,212,165,.35)}
.px-badge--soon{color:#1A1200;background:var(--grad-flame)}
.px-badge--dev{color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--rail)}
.px-pos{margin:10px 0 0;font-weight:600;color:var(--ink);font-size:1.02rem;line-height:1.55}
.px-desc{margin:10px 0 0;color:var(--ink-2);font-size:.92rem;line-height:1.7}
.px-side{display:flex;flex-direction:column;justify-content:space-between;gap:18px;border-left:1px dashed var(--rail);padding-left:clamp(16px,2.4vw,28px)}
.px-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.px-facts li{display:grid;grid-template-columns:15px 1fr;gap:11px;font-size:.87rem;color:var(--ink-2);line-height:1.55}
.px-facts i{width:6px;height:6px;border-radius:2px;background:var(--grad-flame);margin-top:8px;margin-left:3px}
.px-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.px-sub{font-size:.85rem;font-weight:600;color:var(--navy)}
[data-theme="dark"] .px-sub{color:#8E95F5}
@media (max-width:980px){
  .px{grid-template-columns:64px 1fr}
  .px-side{grid-column:1/-1;border-left:0;border-top:1px dashed var(--rail);padding-left:0;padding-top:18px}
}
@media (max-width:520px){
  .px{grid-template-columns:1fr}
  .px-num{padding-top:0}
}

.px-why{
  display:grid;grid-template-columns:minmax(220px,.8fr) 1.4fr;gap:clamp(20px,4vw,54px);
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow-sm);
}
.px-why h2{margin-top:10px;font-size:clamp(1.3rem,2.3vw,1.7rem)}
.px-why p{margin:0;color:var(--ink-2);line-height:1.75;align-self:center}
@media (max-width:820px){.px-why{grid-template-columns:1fr}}

.px-cta{text-align:center;max-width:680px;margin-inline:auto}
.px-cta h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.px-cta p{margin:14px auto 0;color:var(--ink-2);line-height:1.7}
.px-cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ============================================================
   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}
}