/* ============================================================
   ACCELPIX DESIGN SYSTEM
   Palette   — navy #2B2E7F (brand), orange #F7941D (brand),
               ink #14163A, canvas #F5F6FB, rail #E3E6F2
   Type      — Sora (display), Inter (body), JetBrains Mono (all
               numeric data: prices, symbol counts, tenures)
   Signature — the "depth ladder": every plan card carries a pixel
               rail derived from the logo's dissolving-pixel motif,
               and all numeric values are set in tabular mono so
               plans read like a live quote board, not a brochure.
   ============================================================ */

:root{
  --navy:#2B2E7F; --navy-700:#22245F; --navy-900:#14163A;
  --orange:#F7941D; --orange-600:#E07E0A;
  --ink:#14163A; --ink-2:#4A4F73; --ink-3:#767C9C;
  --canvas:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFF;
  --rail:#E3E6F2; --rail-2:#EDEFF8;
  --pos:#0E9F6E; --neg:#D9534F;
  --shadow-sm:0 1px 2px rgba(20,22,58,.06), 0 2px 8px rgba(20,22,58,.05);
  --shadow-md:0 4px 12px rgba(20,22,58,.07), 0 16px 40px rgba(20,22,58,.08);
  --shadow-lg:0 8px 24px rgba(20,22,58,.10), 0 32px 72px rgba(20,22,58,.14);
  --ring:rgba(43,46,127,.35); 
  --grad-brand:linear-gradient(120deg,#2B2E7F 0%,#3F44B5 55%,#5A61D8 100%);
  --grad-flame:linear-gradient(120deg,#F7941D 0%,#FBB040 100%);
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --maxw:1240px;
  --head-h:72px;
}
[data-theme="dark"]{
  --navy:#7A81F0; --navy-700:#5A61D8; --navy-900:#C9CDFF;
  --orange:#FBA63F; --orange-600:#F7941D;
  --ink:#EBEDFB; --ink-2:#A7ADD2; --ink-3:#7B82AC;
  --canvas:#080A1C; --surface:#101334; --surface-2:#161A40;
  --rail:#242A56; --rail-2:#1C2148;
  --pos:#34D399; --neg:#F87171;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.35);
  --shadow-lg:0 10px 30px rgba(0,0,0,.5), 0 36px 80px rgba(0,0,0,.5);
  --ring:rgba(122,129,240,.45); 
  --grad-brand:linear-gradient(120deg,#3F44B5 0%,#5A61D8 55%,#7A81F0 100%);
}


/* The browser needs to know the scheme before our CSS loads, or it paints a
   white canvas first — the same flash, one layer lower down. */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}

/* A short settle on arrival. Pure CSS with no JS dependency — if scripting
   fails the page is simply visible, never stuck at zero opacity. Deliberately
   brief: long enough to feel considered, short enough that nobody waits. */
/* Opacity only — never transform. A transform on the body element makes it a containing
   block for fixed-position descendants, which detaches the sticky header and
   the drawer and produced 400px of horizontal overflow. */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .24s ease both}
@media (prefers-reduced-motion:reduce){body{animation:none}}
*,*::before,*::after{box-sizing:border-box}
/* the hidden attribute must beat any display rule, or filtered cards stay visible */
[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,.display{font-family:Sora,Inter,sans-serif;font-weight:800;letter-spacing:-.024em;line-height:1.1;margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.016em}
p{margin:0}
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.sec{padding:clamp(56px,7vw,104px) 0;position:relative}
/* NOTE: content-visibility:auto was tried on the below-fold sections and removed.
   A skipped subtree is invisible to IntersectionObserver, so every scroll-reveal
   inside it stayed at opacity 0 — the sections never appeared at all. The paint
   saving was not worth shipping blank content. */
.sec--tint{background:var(--surface-2)}
.sec--rail{border-top:1px solid var(--rail)}

.eyebrow{
  font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px}
.lede{color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.115rem);max-width:62ch}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:.94rem;
  letter-spacing:.005em;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,background .18s,color .18s;
  white-space:nowrap;border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn--flame{background:var(--grad-flame);color:#1A1200;box-shadow:0 6px 18px rgba(247,148,29,.35)}
.btn--flame:hover{box-shadow:0 10px 28px rgba(247,148,29,.45)}
.btn--brand{background:var(--grad-brand);color:#fff;box-shadow:0 6px 18px rgba(43,46,127,.28)}
.btn--brand:hover{box-shadow:0 10px 30px rgba(43,46,127,.38)}
.btn--ghost{border-color:var(--rail);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn--ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn--sm{padding:9px 18px;font-size:.85rem}
.btn--wide{width:100%}

/* ---------- pixel motif (logo-derived signature) ---------- */
.pixrail{display:flex;gap:3px;align-items:flex-end;height:14px}
.pixrail i{width:5px;border-radius:1.5px;background:var(--rail);display:block}
.pixrail i:nth-child(1){height:5px}.pixrail i:nth-child(2){height:8px}
.pixrail i:nth-child(3){height:11px}.pixrail i:nth-child(4){height:14px}
.pixrail i.on{background:var(--orange)}

/* ============================================================
   ANNOUNCEMENT + UTILITY + HEADER  (shared shell — reuse on all pages)
   ============================================================ */
.ann{
  background:var(--navy-700);color:#fff;text-align:center;font-size:.82rem;
  font-weight:600;padding:9px 16px;position:relative;z-index:60;
}
[data-theme="dark"] .ann{background:#171B47}
.ann a{color:var(--orange);border-bottom:1px dotted rgba(247,148,29,.6)}
.ann .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3CD68A;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 0 rgba(60,214,138,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(60,214,138,0)}100%{box-shadow:0 0 0 0 rgba(60,214,138,0)}}

.util{border-bottom:1px solid var(--rail);background:var(--surface);font-size:.85rem}
.util .wrap{display:flex;align-items:center;gap:24px;min-height:46px;min-width:0;flex-wrap:wrap;padding-block:7px}
.util a{color:var(--ink-2);display:inline-flex;align-items:center;gap:8px;min-width:0;transition:color .18s}
.util a:hover{color:var(--navy)}
.util a > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.util svg{width:15px;height:15px;flex:none;color:var(--orange)}
.util .hours{margin-left:auto}
.util .hours b{font-weight:600;color:var(--ink)}
.util .h-tight,.util .h-mini{display:none}
@media (max-width:1080px){
  .util .h-full{display:none}
  .util .h-tight{display:inline}
}
@media (max-width:860px){
  .util .wrap{gap:16px}
  .util .u-mail{display:none}
}
@media (max-width:560px){
  /* A lone left-aligned phone number left two thirds of the bar empty and read
     as a layout fault. Both items stay, with hours cut to the shortest honest
     form — the row is a link to the full timings either way. */
  .util{font-size:.78rem}
  .util .wrap{gap:10px;min-height:40px;padding-block:5px}
  .util .h-tight{display:none}
  .util .h-mini{display:inline}
  .util svg{width:14px;height:14px}
  .util a{gap:6px}
}
@media (max-width:360px){
  /* below this the two labels start to collide, so the hours icon goes first */
  .util{font-size:.74rem}
  .util .hours svg{display:none}
}

/* account dropdown */
.acct{position:relative}
.acct-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:216px;z-index:45;
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:7px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.acct[data-open="true"] .acct-menu{opacity:1;visibility:visible;transform:none}
.acct-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:.88rem;font-weight:500;color:var(--ink-2);transition:background .16s,color .16s}
.acct-menu a:hover{background:var(--rail-2);color:var(--navy)}
.acct-menu a svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.acct-menu a:hover svg{color:var(--navy)}
.acct-menu a[data-logout]{border-top:1px solid var(--rail);border-radius:0 0 9px 9px;margin-top:5px;padding-top:13px}

header.site{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rail);transition:box-shadow .25s,background .35s;
}
header.site.stuck{box-shadow:var(--shadow-md)}
.nav{display:flex;align-items:center;gap:14px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:11px;margin-right:8px;flex:none}
.brand sup{font-size:.5rem;color:var(--ink-3);vertical-align:super;font-family:Inter,sans-serif;font-weight:600}

.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu > li{list-style:none;position:relative}
.menu-btn{
  display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:10px;
  font-size:.92rem;font-weight:500;color:var(--ink);transition:color .18s,background .18s;
}
.menu-btn:hover,.menu > li[aria-expanded="true"] .menu-btn{color:var(--navy);background:var(--rail-2)}
.menu-btn .chev{width:11px;height:11px;transition:transform .22s}
.menu > li[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu-btn.active{color:var(--navy)}
.menu-btn.active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--orange);border-radius:2px}

.mega{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:22px;opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:40;
  /* --mx is set by clampMega() so a panel near the window edge slides back
     inside instead of spilling off-screen at mid-range widths */
  transform:translate(calc(-50% + var(--mx,0px)),8px);
  max-width:calc(100vw - 28px);
}
.menu > li[aria-expanded="true"] .mega{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--mx,0px)),0)}
.mega--1{width:min(290px,calc(100vw - 28px))}
.mega--3{width:min(880px,calc(100vw - 28px));display:grid;grid-template-columns:repeat(3,1fr);gap:8px 26px}
.mega--4{width:min(760px,calc(100vw - 28px));display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
.mega .mega-h{
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:4px 0 10px;font-weight:700;grid-column:1/-1;
}
.mega--3 h5,.mega--4 h5{grid-column:auto}
.mega-item{display:flex;gap:12px;padding:10px 12px;border-radius:12px;transition:background .16s,transform .16s}
.mega-item:hover{background:var(--rail-2);transform:translateX(3px)}
.mega-item .ic{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--rail-2);color:var(--navy);border:1px solid var(--rail);
}
.mega-item .ic svg{width:16px;height:16px}
.mega-item b{display:block;font-family:Sora,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.mega-item span{display:block;font-size:.78rem;color:var(--ink-3);line-height:1.45;margin-top:2px}
.mega-col{display:flex;flex-direction:column}
.mega-flat{display:block;padding:8px 12px;border-radius:9px;font-size:.87rem;color:var(--ink-2);transition:background .16s,color .16s}
.mega-flat:hover{background:var(--rail-2);color:var(--navy)}

/* the nav takes the slack and the controls sit flush against the wrap gutter.
   Without this the row packed to the left and the controls stopped ~50px
   short of the right margin, which read as a misaligned header. */
.site-head .wrap > nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.tools{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.icon-btn{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--rail);background:var(--surface);transition:.18s;color:var(--ink-2);
}
.icon-btn:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px)}
.icon-btn svg{width:17px;height:17px}
.icon-btn .moon{display:none}
[data-theme="dark"] .icon-btn .sun{display:none}
[data-theme="dark"] .icon-btn .moon{display:block}
.burger{display:none}

/* mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(400px,88vw);background:var(--surface);
  z-index:70;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:20px;box-shadow:var(--shadow-lg);
}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;background:rgba(10,12,32,.55);opacity:0;visibility:hidden;transition:.28s;z-index:65;backdrop-filter:blur(2px)}
.scrim.open{opacity:1;visibility:visible}
.dr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.dr-group{border-bottom:1px solid var(--rail)}
/* Direct drawer entries (Pricing / Downloads / Blog) are real links, not JS buttons —
   middle-click, long-press and no-JS all keep working, and crawlers can follow them. */
a.dr-head{text-decoration:none;color:inherit}
a.dr-head:hover{color:var(--navy)}
.dr-head{display:flex;width:100%;align-items:center;justify-content:space-between;padding:15px 4px;font-family:Sora,sans-serif;font-weight:700;font-size:.98rem}
.dr-head svg{width:13px;height:13px;transition:transform .22s;color:var(--ink-3)}
.dr-group.open .dr-head svg{transform:rotate(180deg)}
.dr-body{display:none;padding:0 4px 14px}
.dr-group.open .dr-body{display:block}
/* "Soon" badge in the mobile drawer — mirrors the mega menu's featured TradeX badge. */
.dr-body a .dr-new{
  font-family:"JetBrains Mono",monospace;font-size:.55rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 6px;border-radius:999px;margin-left:7px;
  color:#1A1200;background:var(--grad-flame);
}
.dr-body a{display:block;padding:9px 0;font-size:.89rem;color:var(--ink-2)}
.dr-body a:hover{color:var(--navy)}
.dr-tools{margin-top:18px}
.dr-tool{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;border:1px solid var(--rail);border-radius:12px;font-size:.9rem;font-weight:600;color:var(--ink-2);transition:.18s}
.dr-tool:hover{border-color:var(--navy);color:var(--navy)}
.dr-tool svg{width:17px;height:17px;flex:none;color:var(--orange)}
.dr-tool .moon{display:none}
[data-theme="dark"] .dr-tool .sun{display:none}
[data-theme="dark"] .dr-tool .moon{display:block}
.dr-body .lbl{font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 4px;font-weight:700}

/* ---- related pages ---------------------------------------------
   Every page ends with three contextual links out. Descriptive anchor
   text, so the link says what the target is about rather than "click
   here" — which is what search engines actually read. */
.rel{border-top:1px solid var(--rail);padding-top:clamp(30px,3.5vw,44px)}
.rel-h{
  font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 18px;
}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{
  display:block;background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);
  padding:22px 20px;color:inherit;transition:border-color .22s,transform .22s,box-shadow .22s;
}
.rel-card:hover{border-color:color-mix(in srgb,var(--navy) 38%,var(--rail));transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.rel-card b{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.022em;color:var(--ink);margin-bottom:7px}
.rel-card:hover b{color:var(--navy)}
.rel-card p{font-size:.84rem;color:var(--ink-2);line-height:1.6}
.rel-card .go{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:.8rem;font-weight:600;
  color:var(--navy);transition:gap .2s;
}
.rel-card:hover .go{gap:11px}
.rel-card .go svg{width:13px;height:13px}
@media (max-width:820px){.rel-grid{grid-template-columns:1fr}}

/* ---- combo pricing -------------------------------------------------
   A bundle card has to survive being read by someone doing arithmetic,
   so the two components are itemised on their own rows and the total is
   the only figure given visual weight. The pay button is styled as a
   payment control rather than a marketing CTA — it takes money, and it
   should look like it. */
.combo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.combo{
  position:relative;background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow-md);display:flex;flex-direction:column;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s;
}
.combo:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.combo--top{border-color:transparent;box-shadow:0 0 0 2px var(--orange),var(--shadow-lg)}
.combo-flag{
  position:absolute;top:0;right:18px;z-index:3;font-family:"JetBrains Mono",monospace;font-size:.55rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px 4px;
  background:var(--grad-flame);color:#1A1200;border-radius:0 0 7px 7px;
}
.combo-band{
  padding:12px 20px;text-align:center;background:var(--grad-brand);color:#fff;
  font-family:"JetBrains Mono",monospace;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
[data-theme="dark"] .combo-band{color:#0B0D24}
.combo-body{padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;flex:1}
.combo h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.04em;margin:0}
.combo h3 span{color:var(--orange)}
.combo-sub{
  margin-top:8px;font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
}
.combo-lines{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rail)}
.combo-lines > div{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;padding:14px 0}
.combo-lines > div + div{border-top:1px solid var(--rail-2)}
.combo-lines dt{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.combo-lines dt b{color:var(--ink);font-weight:700}
.combo-lines dd{margin:0;text-align:right}
.cl-inr{
  display:block;font-family:"JetBrains Mono",monospace;font-size:1rem;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cl-usd{
  display:block;margin-top:3px;font-family:"JetBrains Mono",monospace;font-size:.68rem;
  color:var(--ink-3);white-space:nowrap;
}
.combo-total{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  margin-top:18px;padding-top:18px;border-top:2px solid var(--rail);
}
.ct-label{
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.ct-val{
  font-family:Sora,sans-serif;font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.045em;
  text-align:right;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad-flame);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ct-val em{
  display:block;margin-top:7px;font-family:"JetBrains Mono",monospace;font-style:normal;
  font-size:.7rem;font-weight:400;color:var(--ink-3);-webkit-text-fill-color:var(--ink-3);letter-spacing:0;
}
/* Razorpay injects its own control, which we cannot style — so the slot
   just centres it and reserves height, keeping both cards the same shape
   whether the script has loaded yet or not. */
.btn-pay{
  display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;padding:15px 22px;
  border-radius:12px;background:linear-gradient(100deg,#2B6BF7,#1A3FB8);color:#fff;
  box-shadow:0 12px 26px -12px rgba(43,107,247,.7);transition:transform .22s,box-shadow .22s,filter .22s;
}
.btn-pay:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(43,107,247,.8);filter:saturate(1.08)}
.btn-pay svg{width:22px;height:22px;flex:none}
.btn-pay span{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.15}
.btn-pay small{
  display:block;margin-top:3px;font-family:Inter,sans-serif;font-weight:400;font-size:.68rem;
  letter-spacing:.01em;color:rgba(255,255,255,.72);
}
.combo-inc{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px dashed var(--rail);display:flex;flex-direction:column;gap:9px}
.combo-inc li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:.84rem;color:var(--ink-2);line-height:1.6}
.combo-inc i{width:5px;height:5px;border-radius:50%;background:var(--orange);margin-top:8px;margin-left:4px}

.combo-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.cf-item{background:var(--surface);border:1px solid var(--rail);border-radius:var(--r-md);padding:20px}
.cf-item b{display:block;font-family:Sora,sans-serif;font-weight:700;font-size:.93rem;letter-spacing:-.022em;margin-bottom:7px}
.cf-item p{font-size:.83rem;color:var(--ink-2);line-height:1.65}
.cf-item a{color:var(--navy);font-weight:600;border-bottom:1px solid transparent;transition:border-color .18s}
.cf-item a:hover{border-color:var(--orange)}
[data-theme="dark"] .cf-item a{color:#8E95F5}

@media (max-width:940px){
  .combo-grid{grid-template-columns:1fr}
  .combo-foot{grid-template-columns:1fr}
}
@media (max-width:480px){
  .combo-lines > div{grid-template-columns:1fr;gap:6px}
  .combo-lines dd{text-align:left}
  .cl-usd{display:inline;margin-left:8px}
  .combo-total{grid-template-columns:1fr;gap:8px}
  .ct-val{text-align:left}
}

/* ============================================================
   POLISH LAYER
   Appended last so it refines the shell without rewriting it.
   The rule throughout: motion and colour respond to intent —
   hover, focus, press — and never animate on their own. A page
   that shimmers at rest looks cheap; a page that answers the
   cursor precisely looks expensive.
   ============================================================ */

/* ---- buttons -------------------------------------------------
   A light sweep crosses the button on hover, the shadow deepens
   and tints to the button's own colour, and the press state
   settles rather than bouncing. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .62s cubic-bezier(.22,.7,.3,1);
}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s}

.btn--flame{background-size:180% 100%;background-position:0% 50%;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background-position .5s ease}
.btn--flame:hover{background-position:100% 50%;box-shadow:0 14px 34px -8px rgba(247,148,29,.6)}
.btn--brand{background-size:180% 100%;background-position:0% 50%;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background-position .5s ease}
.btn--brand:hover{background-position:100% 50%;box-shadow:0 14px 36px -8px rgba(43,46,127,.5)}
.btn--ghost{transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .22s,color .22s,box-shadow .22s,background .22s}
.btn--ghost:hover{
  border-color:transparent;color:var(--navy);
  box-shadow:0 0 0 1.5px var(--navy), 0 10px 26px -12px rgba(43,46,127,.45);
  background:color-mix(in srgb,var(--navy) 4%,var(--surface));
}
[data-theme="dark"] .btn--ghost:hover{color:#A8AEFF;box-shadow:0 0 0 1.5px #5A61D8,0 10px 26px -12px rgba(0,0,0,.6)}
.btn--ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(43,46,127,.09) 48%,transparent 66%)}

/* ---- header and brand ---------------------------------------
   The logo lifts a hair and warms slightly. Nav items grow an
   accent underline from the centre rather than appearing. */
.brand{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.brand:hover{transform:translateY(-1px)}
.brand-logo{transition:filter .3s ease}
.brand:hover .brand-logo{filter:saturate(1.12) drop-shadow(0 3px 10px rgba(247,148,29,.28))}

.menu-btn{position:relative;transition:color .2s,background .2s}
.menu-btn::before{
  content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;
  background:var(--grad-flame);transition:left .26s cubic-bezier(.2,.7,.3,1),right .26s cubic-bezier(.2,.7,.3,1);
}
.menu-btn:hover::before,.menu > li[aria-expanded="true"] .menu-btn::before{left:13px;right:13px}
.menu-btn.active::after{background:var(--grad-flame)}

/* ---- mega menu ----------------------------------------------
   A warmer panel with a lit top edge, and items that reveal an
   accent rail and tint their icon as the cursor arrives. */
.mega{
  /* background-color stated separately so a solid base always exists: the
     shorthand alone leaves background-color transparent, which is one
     mis-typed gradient stop away from a see-through menu. */
  background-color:var(--surface);
  background-image:
    linear-gradient(180deg,color-mix(in srgb,var(--navy) 4%,var(--surface)) 0%,var(--surface) 42%);
  box-shadow:0 30px 70px -28px rgba(11,13,36,.34), 0 2px 10px rgba(11,13,36,.06);
  backdrop-filter:saturate(1.2);-webkit-backdrop-filter:saturate(1.2);
}
[data-theme="dark"] .mega{
  /* The first stop must be OPAQUE. Using rgba(255,255,255,.06) here made the
     top half of the panel see-through, so the page showed through the menu.
     Mixing white into the surface colour gives the same lift, solidly. */
  background-color:var(--surface);
  background-image:linear-gradient(180deg,color-mix(in srgb,#fff 7%,var(--surface)) 0%,var(--surface) 46%);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.4);
}
.mega::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 3px 3px;
  background:var(--grad-flame);opacity:.85;
}
.mega .mega-h{color:var(--orange)}

.mega-item{position:relative;overflow:hidden;transition:background .2s,transform .2s cubic-bezier(.2,.7,.3,1)}
.mega-item::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--grad-flame);transform:scaleY(0);transform-origin:center;
  transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
.mega-item:hover::before{transform:scaleY(1)}
.mega-item:hover{background:color-mix(in srgb,var(--navy) 5%,var(--rail-2));transform:translateX(5px)}
.mega-item .ic{transition:background .22s,color .22s,border-color .22s,transform .22s}
.mega-item:hover .ic{
  background:var(--grad-brand);color:#fff;border-color:transparent;transform:scale(1.06);
  box-shadow:0 6px 16px -6px rgba(43,46,127,.5);
}
[data-theme="dark"] .mega-item:hover .ic{color:#0B0D24}
.mega-item:hover b{color:var(--navy)}
[data-theme="dark"] .mega-item:hover b{color:#A8AEFF}
.mega-flat{position:relative;padding-left:12px;transition:background .18s,color .18s,padding-left .22s}
.mega-flat:hover{padding-left:18px}
.mega-flat::before{
  content:"";position:absolute;left:6px;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--orange);transform:translateY(-50%) scale(0);transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.mega-flat:hover::before{transform:translateY(-50%) scale(1)}

/* ---- links and text -----------------------------------------
   Inline links draw their underline from left to right instead
   of switching it on. */
.doc a,.svc-p a,.cf-item a,.eng-note a,.after-note a,.q-foot a,.sp-more a,.combo-foot a{
  background-image:linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  border-bottom:0!important;transition:background-size .28s cubic-bezier(.2,.7,.3,1),color .2s;
  padding-bottom:1px;
}
.doc a:hover,.svc-p a:hover,.cf-item a:hover,.eng-note a:hover,.after-note a:hover,
.q-foot a:hover,.sp-more a:hover,.combo-foot a:hover{background-size:100% 1.5px}

::selection{background:color-mix(in srgb,var(--orange) 32%,transparent);color:var(--ink)}
[data-theme="dark"] ::selection{background:color-mix(in srgb,var(--orange) 40%,transparent);color:#fff}

/* the eyebrow rule grows as its section arrives */
.eyebrow::before,.eyebrow-b::before{transition:width .5s cubic-bezier(.2,.7,.3,1) .1s}
.rv .eyebrow::before,.rv .eyebrow-b::before{width:0}
.rv.in .eyebrow::before,.rv.in .eyebrow-b::before{width:22px}

/* ---- cards --------------------------------------------------
   A single shared hover: the card lifts, the shadow deepens, and
   a hairline of brand colour picks out the top edge. */
.qcard,.build,.eng,.guide,.dlx,.soft,.rel-card,.qk,.ptr,.cf-item,.reach,.astep,.step-b,.layer,.fail,.cat{
  position:relative;
}
.qcard::after,.build::after,.eng::after,.guide::after,.rel-card::after,.qk::after,
.ptr::after,.reach::after,.astep::after,.layer::after,.fail::after,.cat::after{
  content:"";position:absolute;left:14px;right:14px;top:-1px;height:2px;border-radius:0 0 3px 3px;
  background:var(--grad-flame);opacity:0;transition:opacity .26s;pointer-events:none;
}
.qcard:hover::after,.build:hover::after,.eng:hover::after,.guide:hover::after,.rel-card:hover::after,
.qk:hover::after,.ptr:hover::after,.reach:hover::after,.astep:hover::after,.layer:hover::after,
.fail:hover::after,.cat:hover::after{opacity:1}
.cat--lead::after{display:none}

/* ---- focus, for people who use a keyboard -------------------- */
:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 18%,transparent);
}
.btn:focus-visible,.btn-pay:focus-visible{outline-offset:4px}

/* ---- footer -------------------------------------------------- */
.foot-grid a{position:relative;transition:color .18s,transform .18s,padding-left .22s}
.foot-grid a::before{
  content:"";position:absolute;left:-10px;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--orange);transform:translateY(-50%) scale(0);transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.foot-grid a:hover::before{transform:translateY(-50%) scale(1)}
.foot-grid a:hover{padding-left:6px;transform:none}

/* ---- respect the visitor's setting --------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn::after,.mega-item::before,.mega-flat::before,.foot-grid a::before,.menu-btn::before{transition:none}
  .btn:hover::after{transform:translateX(-120%)}
}

/* No button may be wider than the screen it is on. Long CTA labels are
   nowrap by default, which pushed "Start your 5-day free trial" past the
   viewport at 320px on any page whose band used the longer wording. */
@media (max-width:560px){
  .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.35}
  .band-cta,.help-cta,.req-cta,.sv-cta,.hero-cta{width:100%}
  .band-cta .btn,.help-cta .btn{width:100%;justify-content:center}
}

/* Below about 300px the logo, the trial button and the burger cannot all fit.
   The trial CTA is the one to drop — it is repeated inside the drawer and in
   every page's closing band, whereas the burger is the only way to navigate.
   This is past the 320px WCAG reflow requirement, but a browser at 500% zoom
   lands here and should not scroll sideways. */
@media (max-width:300px){
  .tools .btn{display:none}
  .brand-logo{max-width:132px}
}

/* ---- featured menu row ---------------------------------------
   A product that is launching is an announcement, not a fifth equal
   item — and a fifth item would orphan on its own line in a two-column
   grid. It spans both columns, sits first, and carries a badge. */
.mega-feat{
  grid-column:1/-1;margin-bottom:6px;padding:14px;
  background:color-mix(in srgb,var(--navy) 4%,var(--surface-2));
  border:1px solid var(--rail);border-radius:14px;
}
[data-theme="dark"] .mega-feat{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
.mega-feat:hover{background:color-mix(in srgb,var(--navy) 7%,var(--surface-2));transform:translateX(0)}
[data-theme="dark"] .mega-feat:hover{background:rgba(255,255,255,.075)}
.mega-feat .ic{background:var(--grad-brand);border-color:transparent;color:#fff}
[data-theme="dark"] .mega-feat .ic{color:#0B0D24}
.mega-feat::before{display:none}
.mega-badge{
  display:inline-block;margin-left:9px;vertical-align:middle;
  font-family:"JetBrains Mono",monospace;font-style:normal;font-size:.52rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:5px;
  background:var(--grad-flame);color:#1A1200;
}