/* ============================================================
   13 — CONTROLS
   The pill family.

   Everything you PRESS is a pill. Everything you READ keeps the
   12px panel radius. That is not inconsistency — the geometry
   tells you which is which before you have read a word, and on a
   dense screen that is worth more than visual uniformity.

   One rule holds throughout, inherited from the palette notes:
   an active state is never colour alone. A selected tab is filled
   AND its label goes to full contrast; a rating is stars AND a
   number; a discount badge is a colour AND the word OFF.
   ============================================================ */

/* ---------- 01. SEGMENTED — the top-level switch --------------
   Three or four mutually exclusive views. The rail is a track and
   the active item is a filled pill inside it, so the group reads
   as one control rather than as three buttons that happen to be
   adjacent.
   ------------------------------------------------------------ */
.seg-pill{
  display:inline-flex;align-items:center;gap:4px;padding:5px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);
}
.seg-pill button{
  appearance:none;border:0;cursor:pointer;white-space:nowrap;
  padding:9px 20px;border-radius:var(--r-pill);
  background:none;color:var(--dim);
  font:600 14px/1 var(--display);letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .2s,background .25s;
}
.seg-pill button:hover{color:var(--text)}
.seg-pill button[aria-selected="true"]{
  background:var(--spectrum);color:#12061F;
  box-shadow:0 8px 24px -12px rgba(255,79,216,.9);
}
.seg-pill .tick-new{
  font:700 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:3px 6px;border-radius:var(--r-pill);
  background:var(--mint);color:#06231A;
}
.seg-pill button[aria-selected="true"] .tick-new{background:rgba(0,0,0,.28);color:#fff}

/* ---------- 02. TAB PILLS — the second level ------------------
   Free-standing, not in a rail, because these switch content
   rather than mode. The selected one is solid and light so it
   reads as "you are here" even out of the corner of your eye.
   ------------------------------------------------------------ */
.tabpills{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tabpills a,.tabpills button{
  appearance:none;cursor:pointer;white-space:nowrap;
  padding:13px 26px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--dim);font:600 15px/1 var(--display);
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,color .22s,background .22s;
}
.tabpills a:hover,.tabpills button:hover{
  transform:translateY(-1px);color:var(--text);border-color:rgba(255,79,216,.45);
}
.tabpills [aria-current="page"],.tabpills [aria-selected="true"]{
  background:var(--text);border-color:var(--text);color:#160A22;
}
.tabpills .tick-new{margin-left:2px}
.tabpills .hot{
  border-color:rgba(255,79,216,.5);
  background:radial-gradient(120% 160% at 50% 0%,rgba(255,79,216,.22),rgba(255,255,255,.04));
  color:var(--text);
}

/* ---------- 03. CHIP STATS — the proof row --------------------
   Number first, label second, icon as a coloured tile. Read left
   to right the row is "60+ verified firms", which is a sentence,
   not a legend.
   ------------------------------------------------------------ */
.chiprow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chipstat{
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 20px 11px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.3,1);
}
.chipstat:hover{transform:translateY(-2px);border-color:rgba(255,79,216,.42)}
.chipstat i{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;color:#12061F;
  background:var(--spectrum);
}
.chipstat i svg{width:16px;height:16px}
.chipstat b{font:700 16px/1 var(--display);letter-spacing:-.02em}
.chipstat span{font-size:13.5px;color:var(--dim)}

/* ---------- 04. FILTER RAIL ---------------------------------- */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filterbar .sep{width:1px;height:24px;background:var(--line);margin:0 4px}
.fpill{
  appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--dim);font:600 13.5px/1 var(--display);
  transition:color .2s,border-color .2s,background .2s;
}
.fpill:hover{color:var(--text);border-color:rgba(255,79,216,.4)}
.fpill[aria-pressed="true"]{
  color:var(--text);border-color:rgba(255,79,216,.55);
  background:rgba(255,79,216,.14);
}
.fpill svg{width:15px;height:15px;flex:0 0 auto}
.fpill .count{
  font:500 11px/1 var(--mono);color:var(--faint);
  padding:3px 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);
}

/* ---------- 05. RATING --------------------------------------- */
.rating{display:inline-flex;align-items:center;gap:7px}
.rating b{font:700 13px/1 var(--display)}
.rating .stars{display:inline-flex;gap:1.5px}
.rating .stars i{
  width:11px;height:11px;display:block;background:var(--faint);
  -webkit-mask:var(--star) center/contain no-repeat;
  mask:var(--star) center/contain no-repeat;
}
.rating .stars i.on{background:var(--gold)}
.rating .stars i.half{background:linear-gradient(90deg,var(--gold) 50%,var(--faint) 50%)}
:root{
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 .8l2.2 4.6 5 .7-3.6 3.5.9 5L8 12.2 3.5 14.6l.9-5L.8 6.1l5-.7z' fill='%23000'/%3E%3C/svg%3E");
}
/*  the number is there because "four and a half stars" is a shape and
    "4.5 from 1,240" is a fact, and only one of those is checkable */
.rating .count{font:400 11.5px/1 var(--mono);color:var(--faint)}

/* ---------- 06. OFFER BADGE ---------------------------------- */
.offer{
  display:inline-flex;flex-direction:column;align-items:stretch;gap:2px;
  border-radius:var(--r);overflow:hidden;min-width:104px;text-align:center;
}
.offer .amt{
  padding:7px 12px;background:var(--spectrum);color:#12061F;
  font:700 12.5px/1.2 var(--display);letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.offer .code{
  padding:6px 12px;background:rgba(255,79,216,.14);
  border:1px solid rgba(255,79,216,.32);border-top:0;
  font:500 11px/1.2 var(--mono);letter-spacing:.06em;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
}
.offer .code:hover{background:rgba(255,79,216,.22)}
.offer.mint .amt{background:linear-gradient(115deg,var(--mint),#22C6C6);color:#04231A}
.offer.gold .amt{background:linear-gradient(115deg,var(--gold),#FF8A3D);color:#2A1804}

/* ---------- 07. LIST ROW — logo, name, rating, offer ---------- */
.listrow{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  transition:border-color .22s,transform .22s cubic-bezier(.2,.7,.3,1),background .22s;
}
.listrow:hover{
  transform:translateY(-2px);border-color:rgba(255,79,216,.42);
  background:rgba(255,79,216,.06);
}
.listrow .logo{
  width:46px;height:46px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;font:700 15px/1 var(--display);color:#12061F;
  background:var(--spectrum);
}
.listrow .logo.alt{background:linear-gradient(140deg,#38BDF8,#6D3BF5);color:#fff}
.listrow .logo.alt2{background:linear-gradient(140deg,var(--mint),#22C6C6);color:#04231A}
.listrow .who{min-width:0}
.listrow .who b{display:block;font:700 14.5px/1.25 var(--display);letter-spacing:-.01em}
.listrow .who .meta{display:flex;align-items:center;gap:9px;margin-top:5px;flex-wrap:wrap}
.listrow .rank{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font:700 12px/1 var(--mono);background:rgba(255,255,255,.06);color:var(--dim);
}
.listrow .rank.g1{background:linear-gradient(140deg,#FFD75E,#FF8A3D);color:#2A1804}
.listrow .rank.g2{background:linear-gradient(140deg,#D9E1F2,#9AA8C4);color:#151B2B}
.listrow .rank.g3{background:linear-gradient(140deg,#E0A06A,#B06B3A);color:#22120A}
@media(max-width:560px){
  .listrow{grid-template-columns:auto 1fr;gap:10px}
  .listrow .offer{grid-column:1 / -1}
}

/* ---------- 08. CAROUSEL HEAD -------------------------------- */
.carohead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.carohead h3{margin:0;font:700 17px/1.2 var(--display);display:flex;align-items:center;gap:9px}
.caronav{display:flex;align-items:center;gap:10px}
.caronav button{
  width:34px;height:34px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--dim);
  display:grid;place-items:center;
}
.caronav button:hover{color:var(--text);border-color:rgba(255,79,216,.5)}
.carodots{display:flex;gap:6px}
.carodots i{
  width:6px;height:6px;border-radius:50%;background:var(--faint);opacity:.5;display:block;
}
.carodots i.on{background:var(--cyan);opacity:1;width:18px;border-radius:var(--r-pill)}

/* ---------- 09. GLOW PANEL — the two hero cards -------------- */
.glowpanel{
  position:relative;border-radius:var(--r-lg);padding:20px;
  border:1px solid rgba(255,79,216,.22);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(255,79,216,.12),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.glowpanel.violet{
  border-color:rgba(109,59,245,.3);
  background:
    radial-gradient(120% 100% at 100% 0%,rgba(109,59,245,.2),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.glowpanel > .hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px;flex-wrap:wrap;
}

/* ---------- 10. TOP GLOW ------------------------------------
   The purple bloom behind the masthead. One element, one blur,
   no animation — it is the room's lighting, not an effect.
   ------------------------------------------------------------ */
.topglow{
  position:absolute;top:-320px;left:50%;transform:translateX(-50%);
  width:min(1500px,140vw);height:640px;pointer-events:none;z-index:0;
  background:
    radial-gradient(50% 50% at 30% 60%,rgba(255,79,216,.20),transparent 70%),
    radial-gradient(45% 50% at 68% 45%,rgba(109,59,245,.26),transparent 72%);
  filter:blur(28px);
}

/*  A badge with no label is just the glyph. Inside a table cell an
    inline-flex with no width stretches to the column, which turns a 15px
    identifier into a 200px empty bar — so anywhere a badge is used as a
    marker rather than a label, it is sized to its content. */
.matrix3 .src,.pickopt .src,.listrow .src,.chan .src{width:fit-content}

@media(max-width:760px){
  .seg-pill button{padding:8px 15px;font-size:13px}
  .tabpills a,.tabpills button{padding:11px 18px;font-size:14px}
  .chipstat{padding:9px 15px 9px 9px}
  .chipstat b{font-size:14.5px}
  .chipstat span{font-size:12.5px}
  .topglow{height:420px;top:-220px;filter:blur(20px)}
}

@media(prefers-reduced-motion:reduce){
  .chipstat,.tabpills a,.tabpills button,.listrow{transition:none}
  .chipstat:hover,.tabpills a:hover,.listrow:hover{transform:none}
}

/* ============================================================
   DIRECTORY LAYOUT
   The shape a comparison site actually needs.

   The reference does one thing well and it is worth copying: the
   controls sit ABOVE the content in a fixed order — mode, then
   tabs, then filters — and on mobile each of those becomes a
   horizontally scrolling rail rather than wrapping into three
   rows of stacked buttons.

   That is the whole mobile problem with control-heavy pages. Wrap
   them and the content starts below the fold; scroll them and the
   first card is visible on a 360px screen.
   ============================================================ */

.controls{
  position:sticky;top:0;z-index:24;
  padding:12px 0;margin-bottom:20px;
  background:linear-gradient(180deg,var(--void) 72%,transparent);
  backdrop-filter:blur(10px);
}
.controls > * + *{margin-top:11px}

/*  Each control row scrolls sideways on a narrow screen instead of wrapping.
    Edge-masked so a half-visible pill reads as "there is more" rather than
    as a clipped mistake. */
.crail{
  display:flex;gap:9px;align-items:center;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.crail::-webkit-scrollbar{display:none}
.crail > *{flex:0 0 auto}
@media(max-width:760px){
  .crail{
    -webkit-mask:linear-gradient(90deg,#000 0,#000 92%,transparent);
    mask:linear-gradient(90deg,#000 0,#000 92%,transparent);
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .controls{padding:10px 0;margin-bottom:14px}
  .controls > * + *{margin-top:9px}
}

/* ---------- the two hero panels side by side ----------------- */
.dirhero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
@media(max-width:1000px){.dirhero{grid-template-columns:1fr}}

/* ---------- ranked list, as in the reference ----------------- */
.ranklist{display:grid;gap:9px}
.ranklist .listrow{padding:11px 13px}
.ranklist .listrow .logo{width:40px;height:40px;border-radius:11px}

/* ---------- offer grid inside a panel ------------------------ */
.offergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:1100px){.offergrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.offergrid{grid-template-columns:1fr}}

.offercard{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  transition:border-color .2s,transform .2s cubic-bezier(.2,.7,.3,1),background .2s;
}
.offercard:hover{
  transform:translateY(-2px);border-color:rgba(255,79,216,.42);
  background:rgba(255,79,216,.06);
}
.offercard .logo{
  width:46px;height:46px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;background:rgba(255,255,255,.07);
  border:1px solid var(--line-2);
}
.offercard .who{min-width:0}
.offercard .who b{
  display:block;font:700 14px/1.25 var(--display);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.offercard .who .meta{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
@media(max-width:420px){
  .offercard{grid-template-columns:auto 1fr}
  .offercard .offer{grid-column:1 / -1}
}

/* ---------- sticky mobile action bar -------------------------
   On a phone the primary action scrolls away and never comes
   back, so it gets pinned. Only on a phone: on a desktop it is
   always in view and pinning it would just take space.
   ------------------------------------------------------------ */
.stickycta{display:none}
@media(max-width:760px){
  .stickycta{
    display:flex;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:rgba(11,6,22,.94);backdrop-filter:blur(14px);
  }
  .stickycta .btn{flex:1;justify-content:center}
  .stickycta .who{
    flex:0 0 auto;font:500 11px/1.3 var(--mono);color:var(--faint);max-width:38%;
  }
  body{padding-bottom:74px}
}

/* ---------- mobile density -----------------------------------
   A control-heavy page on a 360px screen is the hard case, and
   the fix is not smaller text — it is fewer things per row and
   the same reading size.
   ------------------------------------------------------------ */
@media(max-width:520px){
  .chiprow{gap:8px}
  .chipstat{padding:8px 13px 8px 8px}
  .chipstat i{width:26px;height:26px;border-radius:8px}
  .chipstat b{font-size:14px}
  .chipstat span{font-size:12px}
  .tabpills a,.tabpills button{padding:10px 16px;font-size:13.5px}
  .seg-pill{padding:4px}
  .seg-pill button{padding:8px 14px;font-size:13px}
  .sec{padding:38px 0}
  .sec-hd h2{font-size:clamp(22px,6.4vw,30px)}
}


/* ============================================================
   HINDI INSTALL GUIDE
   Devanagari needs more line height than Latin — the matras sit
   above and below the baseline, and at 1.6 they collide. 1.9 is
   the point where a Hindi paragraph reads as comfortably as the
   English one next to it.
   ============================================================ */
.hi-index{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:20px;
}
@media(max-width:900px){.hi-index{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hi-index{grid-template-columns:1fr}}
.hi-index a{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(255,255,255,.03);font-size:13.5px;
}
.hi-index a:hover{border-color:rgba(255,79,216,.45);background:rgba(255,79,216,.06)}
.hi-index a span{color:var(--dim)}

.hi-bridge{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;margin-top:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}
.hi-bridge > header{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line-2);
}
.hi-bridge .pair{display:flex;align-items:center;gap:10px}
.hi-bridge .pair .arrow{display:block;width:18px;height:2px;border-radius:2px;background:var(--spectrum)}
.hi-bridge h3{margin:0;font:700 17px/1.3 var(--display)}

.hi-steps{margin:0;padding:0;list-style:none;counter-reset:blk}
.hi-block{margin-bottom:20px}
.hi-block > b{
  display:flex;align-items:center;gap:10px;
  font:600 15px/1.5 var(--display);margin-bottom:10px;
}
.hi-block > b::before{
  counter-increment:blk;content:counter(blk);
  width:22px;height:22px;border-radius:7px;flex:0 0 auto;
  background:var(--spectrum);color:#12061F;
  display:grid;place-items:center;font:700 11px/1 var(--mono);
}
.hi-block ol{margin:0;padding-left:34px;display:grid;gap:9px}
/*  Romanised Hindi is Latin script, so it takes Latin line height. The earlier 1.9
    was there for Devanagari matras and reads as loose here. */
.hi-block li{font-size:14.5px;line-height:1.75;color:var(--dim)}
.hi-block li b{color:var(--text);font-weight:600}
.hi-block li code{
  font:400 12.5px var(--mono);padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--text);
}
.hi-foot{
  margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:13px;line-height:1.7;color:var(--faint);
}
@media(max-width:560px){
  .hi-bridge{padding:18px 16px}
  .hi-block ol{padding-left:26px}
}

/* ---------- dual price ---------------------------------------
   Two lines, not one. "$79 · ₹6,599/mo" reads badly and is
   genuinely ambiguous: the "/mo" lands at the end and looks like
   it belongs only to the rupee figure, so the reader has to stop
   and work out whether the dollar price is monthly too.

   Each line carries its own "/mo". It costs one line of height
   and saves a second of doubt at the moment somebody is deciding
   whether to pay.

   Rupees first, and both at the same weight. Making one large and
   the other a footnote tells the reader which currency we think
   is real, and for most of this audience that guess is wrong.
   ------------------------------------------------------------ */
.price2{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.price2 .row{display:flex;align-items:baseline;gap:5px}
.price2 b{font:700 30px/1.1 var(--display);letter-spacing:-.03em}
.price2 small{font:500 13px/1 var(--ui);color:var(--faint)}
.price2 .row.alt b{font-size:19px;color:var(--dim);font-weight:600}
.price2 .row.alt small{font-size:12px}
.plans .price2{align-items:center}
.plan .price{display:flex;justify-content:center}

.price1{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap}
.price1 b{font-weight:700}
.price1 small{font-size:.82em;font-weight:500;color:var(--faint)}
.price1 i{font-style:normal;color:var(--faint);opacity:.7}

@media(max-width:520px){
  .price2 b{font-size:26px}
  .price2 .row.alt b{font-size:17px}
}

/* ---------- language switch ----------------------------------
   Two languages, same step, shown in place. A separate page means
   somebody who switches has to find where they were all over
   again, and a setup guide must not do that to you halfway
   through step four.
   ------------------------------------------------------------ */
.langsw{
  display:inline-flex;gap:4px;padding:4px;margin-top:20px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);
}
.langsw button{
  appearance:none;border:0;cursor:pointer;
  padding:8px 18px;border-radius:var(--r-pill);
  background:none;color:var(--dim);font:600 13.5px/1 var(--display);
  transition:background .22s,color .22s;
}
.langsw button:hover{color:var(--text)}
.langsw button.on{background:var(--spectrum);color:#12061F}

/* ---------- payment methods ----------------------------------
   A method is a radio, and the note under it is not decoration:
   UPI Autopay, an RBI card mandate and an irreversible crypto
   transfer behave differently in ways that matter AFTER you have
   paid. Saying so at the moment of choosing is the only time it
   is useful.
   ------------------------------------------------------------ */
/*  Flex with a wrapper, not a two-row grid. The grid version put the radio in
    `grid-row:1/3` and looked right — until it met an engine without CSS grid,
    where the input stopped being placed and printed straight over the label
    text. A control you cannot read is worse than one that looks plainer. */
.paym{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  transition:border-color .2s,background .2s;
}
.pm-body{display:block;flex:1 1 auto;min-width:0}
.paym + .paym{margin-top:9px}
.paym:hover{border-color:rgba(255,79,216,.4)}
.paym.on{border-color:rgba(255,79,216,.55);background:rgba(255,79,216,.09)}
.paym input{flex:0 0 auto;margin:3px 0 0;accent-color:var(--cyan)}
.pm-head{display:block}
.pm-head b{margin-right:9px}
.pm-head b{font:700 14.5px/1.3 var(--display)}
.pm-blurb{font-size:12.5px;color:var(--dim)}
.pm-note{display:block;margin-top:4px;font-size:12.5px;line-height:1.65;color:var(--faint)}
@media(max-width:520px){
  .paym{padding:12px}
  .pm-head b{display:block;margin:0 0 2px}
}

/* the documentation's own heading — it had none after the syntax chapters
   were removed, which left the page with no outline at all */
.doc-h1{
  margin:0 0 10px;font:700 clamp(26px,4vw,38px)/1.1 var(--display);
  letter-spacing:-.03em;
}

/* ---------- connector downloads ------------------------------
   Four slots. A slot with no file says so instead of offering a
   link that 404s — a download button that fails is worse than an
   honest empty state, because the customer assumes the file is
   broken rather than absent.
   ------------------------------------------------------------ */
.dl{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
}
.dl + .dl{margin-top:9px}
.dl.ready{border-color:rgba(49,229,164,.28);background:rgba(49,229,164,.05)}
.dl.waiting{opacity:.66}
.dl-icon{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  display:inline-block;text-align:center;line-height:44px;
  font:700 11px/44px var(--mono);letter-spacing:.04em;
  background:var(--spectrum);color:#12061F;
}
.dl.waiting .dl-icon{background:rgba(255,255,255,.07);color:var(--faint)}
.dl.test .dl-icon{background:linear-gradient(140deg,#38BDF8,#6D3BF5);color:#fff}
.dl.test.waiting .dl-icon{background:rgba(255,255,255,.07);color:var(--faint)}
.dl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dl-body b{font:700 14px/1.2 var(--display)}
.dl-plat{font:500 11px/1 var(--mono);color:var(--faint);letter-spacing:.06em}
.dl-note{font-size:12.5px;line-height:1.5;color:var(--dim)}
.dl-wait{
  font:500 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:8px 12px;border:1px dashed var(--line);
  border-radius:var(--r-pill);flex:0 0 auto;white-space:nowrap;
}
@media(max-width:620px){
  .dl{flex-wrap:wrap}
  .dl-wait,.dl .btn{margin-left:58px}
}

.dl-steps{margin:0;padding-left:22px;display:grid;gap:14px}
.dl-steps li{font-size:14px;line-height:1.65;color:var(--dim)}
.dl-steps li b{color:var(--text)}
.dl-steps code{
  font:400 12.5px var(--mono);padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.07);color:var(--text);
}
.dl-steps kbd{
  font:500 11px var(--mono);padding:2px 6px;border-radius:4px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
}
/*  the step everybody skips gets its own colour, because a warning that looks
    like the paragraph around it is a warning nobody reads */
.dl-warn{
  display:block;margin-top:8px;padding:10px 12px;border-radius:var(--r-sm);
  border-left:2px solid var(--gold);background:rgba(255,201,60,.08);
  font-size:12.5px;line-height:1.6;color:var(--text);
}

/* ---------- nothing to install --------------------------------
   Eighteen of the twenty-two need no download, and that was
   nowhere on the site. A customer comparing products cannot know
   it unless it is said — and the four that DO need one are said
   in the same breath, because a claim with the exception hidden
   is the kind a customer finds out about at checkout.
   ------------------------------------------------------------ */
.nothing{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:22px 26px;border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(49,229,164,.07),rgba(255,255,255,.02));
}
.n-left{
  display:inline-block;text-align:center;flex:0 0 auto;min-width:96px;
}
.n-body{flex:1 1 340px;min-width:0}
.n-num{
  font:700 46px/1 var(--display);letter-spacing:-.04em;
  background:linear-gradient(150deg,#31E5A4,#A855F7);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.n-num{display:block}
.n-of{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-top:6px}
.n-body h3{margin:0 0 6px;font:700 19px/1.2 var(--display);letter-spacing:-.02em}
.n-body p{margin:0;font-size:14px;line-height:1.65;color:var(--dim);max-width:56ch}
.n-right{
  display:flex;flex-direction:column;gap:4px;flex:0 1 230px;
  padding-left:26px;border-left:1px solid var(--line-2);
}
.n-lbl{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}
.n-mt{font:700 15px/1.2 var(--display)}
.n-why{font-size:12px;line-height:1.55;color:var(--faint)}
@media(max-width:900px){
  .nothing{gap:18px}
  .n-right{flex:1 1 100%;padding-left:0;padding-top:14px;
    border-left:0;border-top:1px solid var(--line-2)}
}
@media(max-width:560px){
  .nothing{padding:18px}
  .n-num{font-size:38px}
}

/* ── Which book an account trades ─────────────────────────────
   In the accounts table, on the row, so it is readable without
   opening anything. Real is marked in TEXT as well as colour:
   the difference between practice money and the customer's own
   must not depend on seeing a hue.
   ------------------------------------------------------------ */
.tl-book{
  font:inherit;
  padding:3px 6px;
  border-radius:6px;
  border:1px solid var(--line,rgba(255,255,255,.18));
  background:var(--panel,rgba(255,255,255,.04));
  color:inherit;
}
.tl-book:focus-visible{outline:2px solid var(--brass,#c9a227);outline-offset:1px}
.tl-book:disabled{opacity:.55;cursor:progress}