/* ==========================================================================
   site.css - the TPcopier public website: ONE design system for every public page.
   Brand: deep forest, electric lime, warm cream (sand and mint for rhythm).
   Archivo (expanded, heavy) for headlines - the words that matter in the brand
   gradient (.it) - Geist for reading, Geist Mono for small labels.
   The app and the admin console load base.css / app.css, never this file; the
   brand colours below must stay equal to base.css (tests/test_site.py checks).

   RULES
   - Mobile first. New blocks are written for the 360 px phone; min-width queries
     add columns. Tap targets are 44 px on phones. No sideways scroll.
   - Motion is transform + opacity only, and stops for prefers-reduced-motion.
   - An animated box never changes its size (fixed or min heights): no layout shift.
   - Above the fold use .in (CSS-only entrance, LCP-safe). Below it use .rv
     (scroll reveal, added by site.js, staggered inside each parent).
   - Every section below the first screen gets .lazy: skipped by the first paint (faster
     LCP), laid out by site.js in idle time after load (no shift when scrolling fast).
     Never on the hero or the first section after it.
   - Short copy: headlines of 8 words or fewer, lines of 20 words or fewer.
   - No invented numbers. Prices come from the page's {{PLACEHOLDERS}}; example
     figures live only inside an illustration that carries a .flow__tag label.

   CLASSES - reuse these on new pages
   Layout
     .wrap                     page width (18 px gutters on phones, 28 px from 720 px)
     .sec  .sec--tight         a section; backgrounds: .sec--paper .sec--sand .sec--mint,
                               dark: .sec--forest + the data-dark attribute (the nav turns dark over it)
     .lazy                     below-the-fold section (see RULES); site.js adds .is-laid
     .sh > .eyebrow + h2.h2 + p.sub    centred section head
     .split  .split--rev       text + picture, two columns from 1000 px (--rev: picture on the left)
     .grid .grid--2 .grid--3 .grid--4  card grids, one column on phones
   Type
     .h1 .h2 .h3 .lead .sub  .it (gradient words)  .eyebrow (dot label)  .tag  .t-link
   Controls
     .btn + .btn--lime | .btn--forest | .btn--ghost (on dark) | .btn--line (on light)
          + .btn--sm | .btn--lg | .btn--block ; .btn__ic = the arrow tile ; .btns (.btns--center)
     .pills > li.pill          small trust chips (dark hero)
     .chips > .chip            platform / broker chips; a.chip is a 44 px link (.chips--center)
     .ticks > li               a checked list
     .prices > .price          price tiles: <b>{{PRICE}}</b>Name<small>one-time</small>
   Cards
     .card (.card__ic, h3, p)  feature card ; a.card.card--link + .card__go = whole-card link
     .bflow                    SENDER -> RECEIVER badges joined by a moving wire (.bflow__e--in: an Indian broker)
     .bm .bm--tg|wa|dc|tv|mt4|mt5|quotex|pocket|iqoption|binomo|olymptrade|expertoption|binolla|zerodha|angelone|upstox|dhan|
          fyers|groww|icici|5paisa|kotakneo|aliceblue|brand
                               platform and broker badges - the admin's logos replace them (Admin > Brand Logos, /broker-icons.css)
   Pictures (illustrations - always with a .flow__tag "Illustration" label)
     .fx (+ data-fx)          the hero picture of each page: a story told in steps (see "hero illustrations" below)
     .tvbox  .inflow  .copybox (+ .fan)                                 section pictures
     .wire > i                 a dot running down a dashed wire; set --len to its height
     .marquee > ul.marquee__track x2 (the second aria-hidden)           endless name strip
   Blocks
     .hero (home) .phero (inner pages) .crumbs .trust .ok
     .tl .tl--3 > .tl__step > .tl__n     steps with a drawn line (an ol or a div)
     .faq > .faq__side + .qas > details.qa > summary + p                FAQ accordion
     .band                     lime call-to-action band
     .ptease                   compact pricing teaser around {{BRIDGE_CARDS}}
     .mcta                     phone-only sticky trial button (home)
     .lb                       the blog picture viewer (built by site.js)
     .auth > .auth__main > .auth__box > .logo + .auth__card (h1.auth__title, .auth__hint, form) + .auth__foot + .auth__links
                               sign-in, sign-up, reset: on phones the card sits over a dark band; .pw + .pw__show = a
                               password field with its Show button; .auth__side .auth__bridges = the side panel's bridges
   Still used by the landing pages (kept as they were):
     .screen .tgcard .tgbubble .orders .orow .ost .console__ex .console__live .console__sum
     .rmx .eatape .ot .jsonbox .fan .opts .spot .sig .xlink .reads .why .duo .tile .cards
     .bgroup .bgrid .bcard .calc .crow .swrow .swcard .cmp .tablewrap .promo .legal .posts
     .post .toc .post-cta .sw-card .chipline .big404 .auth .form .field .input .check .alert
   ========================================================================== */

@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.22s; }

/* Metric-matched fallbacks, measured in Chromium against the Google Fonts Archivo and Geist
   (scratchpad siteui/fontmetrics.py): while the web fonts load, text is set in local Arial scaled
   to the same widths, so nothing re-wraps when they swap in. Archivo's width axis gets one face per
   font-stretch band the headings use (100% phones, 106-118% wider screens). */
@font-face{ font-family:"Archivo fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:500 750; font-stretch:50% 103%; size-adjust:98.6%; ascent-override:89.3%; descent-override:21.3%; line-gap-override:0%; }
@font-face{ font-family:"Archivo fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:751 1000; font-stretch:50% 103%; size-adjust:103.4%; ascent-override:85.1%; descent-override:20.3%; line-gap-override:0%; }
@font-face{ font-family:"Archivo fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:500 1000; font-stretch:103% 109%; size-adjust:109.5%; ascent-override:80.4%; descent-override:19.2%; line-gap-override:0%; }
@font-face{ font-family:"Archivo fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:500 1000; font-stretch:109% 113.5%; size-adjust:115.5%; ascent-override:76.2%; descent-override:18.2%; line-gap-override:0%; }
@font-face{ font-family:"Archivo fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:500 1000; font-stretch:113.5% 116.5%; size-adjust:118.6%; ascent-override:74.2%; descent-override:17.7%; line-gap-override:0%; }
@font-face{ font-family:"Archivo fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:500 1000; font-stretch:116.5% 200%; size-adjust:124.5%; ascent-override:70.7%; descent-override:16.9%; line-gap-override:0%; }
@font-face{ font-family:"Geist fb"; src:local("Arial"),local("ArialMT"),local("Arimo"),local("Liberation Sans");
  font-weight:100 549; size-adjust:102.5%; ascent-override:98.5%; descent-override:29.3%; line-gap-override:0%; }
@font-face{ font-family:"Geist fb"; src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Liberation Sans Bold");
  font-weight:550 1000; size-adjust:100.3%; ascent-override:100.7%; descent-override:29.9%; line-gap-override:0%; }

:root{
  --f950:#06110D; --f900:#0A1B15; --f850:#0E231C; --f800:#132D25; --f700:#1D4034; --f600:#2B5647;
  --lime:#C8F25A; --lime-2:#B4E23E; --lime-3:#E4F9AE; --lime-rgb:200,242,90; --lime-ink:#4D7C0F;
  --cream:#F4F1E8; --paper:#FBFAF5; --sand:#EAE3D2; --sand-2:#E0D7C1; --mint:#DDEFE4; --mint-2:#CBE6D6;
  --ink:#0A1B15; --ink-2:#1E3029; --body:#34463D; --mute:#5A6A62; --faint:#8E9A93;
  --line:rgba(10,27,21,.12); --line-2:rgba(10,27,21,.07);
  --dline:rgba(214,255,232,.1); --dline-2:rgba(214,255,232,.06); --dline-3:rgba(214,255,232,.18);
  --dtext:#F2F8F4; --dmute:#BFD0C7; --ddim:#8BA096;
  --win:#1E9E5A; --win-soft:#E1F5E9; --loss:#D64545; --loss-soft:#FBE7E6; --wait:#B7791F; --wait-soft:#FBF1DD;
  --r:16px; --r-lg:22px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(10,27,21,.05),0 1px 1px rgba(10,27,21,.03);
  --sh-2:0 18px 40px -22px rgba(10,27,21,.28),0 2px 6px rgba(10,27,21,.05);
  --sh-3:0 50px 110px -40px rgba(6,17,13,.55),0 16px 36px -18px rgba(6,17,13,.3);
  --display:"Archivo","Archivo fb","Geist",system-ui,sans-serif;
  --font:"Geist","Geist fb",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --grad-ink:linear-gradient(100deg,#2F5A0E 0%,#4D7C0F 40%,#0F766E 100%);
  --grad-lime:linear-gradient(100deg,#E4F9AE 0%,#C8F25A 42%,#8FE3B8 100%);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8F25A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --check-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1B15' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1B15' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
html.is-locked{ overflow:hidden; }
body.site{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; }
:where(.site) :where(h1,h2,h3,h4){ margin:0; font-family:var(--display); font-weight:800; font-stretch:112%; letter-spacing:-0.015em; line-height:1.04; color:inherit; }
:where(.site) p{ margin:0; }
:where(.site) a{ color:inherit; text-decoration:none; }
:where(.site) :where(img,svg){ max-width:100%; }
.site ::selection{ background:var(--lime); color:var(--ink); }
.site :focus-visible{ outline:2.5px solid var(--lime-2); outline-offset:3px; border-radius:10px; }
.skip{ position:absolute; left:-999px; top:8px; z-index:999; background:var(--ink); color:var(--lime); padding:10px 16px; border-radius:12px; }
.skip:focus{ left:12px; }

.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 18px; }
@media (min-width:720px){ .wrap{ padding:0 28px; } body.site{ font-size:17px; } }
@media (min-width:1560px){ .wrap{ max-width:1380px; } }
@media (min-width:1860px){ .wrap{ max-width:1500px; padding:0 40px; } }

/* ---------- words ---------- */
.it{ font-style:normal; font-weight:inherit; color:#3F6212; background:var(--grad-ink); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; padding-right:.02em; }
.on-dark .it,.hero .it,.phero .it,.sec--forest .it,.big404 .it,.auth__side .it{ color:var(--lime); background:var(--grad-lime);
  -webkit-background-clip:text; background-clip:text; }
.tag{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); }
.tag b{ display:inline-grid; place-items:center; min-width:28px; height:22px; padding:0 7px; border-radius:7px; background:var(--ink);
  color:var(--lime); font-weight:600; font-size:11px; letter-spacing:.04em; }
.on-dark .tag,.sec--forest .tag,.hero .tag,.phero .tag{ color:var(--dmute); }
.on-dark .tag b,.sec--forest .tag b,.hero .tag b,.phero .tag b{ background:var(--lime); color:var(--ink); }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font:600 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.eyebrow::before{ content:""; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--lime-ink); box-shadow:0 0 0 4px rgba(var(--lime-rgb),.45); }
[data-dark] .eyebrow{ color:var(--dmute); }
[data-dark] .eyebrow::before{ background:var(--lime); box-shadow:0 0 0 4px rgba(var(--lime-rgb),.18); }
.h1{ font-size:clamp(42px,6.2vw,100px); font-weight:850; font-stretch:118%; line-height:.98; letter-spacing:-0.02em; }
.h2{ font-size:clamp(30px,3.4vw + 12px,56px); font-weight:800; font-stretch:115%; line-height:1.03; letter-spacing:-0.018em; }
.h3{ font-size:clamp(21px,1.9vw,28px); letter-spacing:-0.015em; }
.lead{ font-size:clamp(17px,1.25vw,20px); color:var(--body); line-height:1.6; max-width:660px; }
.sub{ font-size:clamp(16.5px,.35vw + 15px,19px); color:var(--body); line-height:1.55; max-width:620px; }
.on-dark .lead,.sec--forest .lead,.hero .lead,.phero .lead,[data-dark] .sub{ color:var(--dmute); }
.h1,.h2,.h3,.band h2{ text-wrap:balance; }
.lead,.sub,.tile p{ text-wrap:pretty; }
.center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mb-16{ margin-bottom:16px; }
/* a stand-alone text link: underlined in lime; the padding grows its tap area without moving the text */
.t-link{ font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime-2);
  text-decoration-thickness:3px; text-underline-offset:4px; padding:13px 0; transition:text-decoration-color .2s; }
.t-link:hover{ text-decoration-color:var(--ink); }
.on-dark .t-link,.hero .t-link,.phero .t-link,.sec--forest .t-link,[data-dark] .t-link{ color:var(--dtext); }
[data-dark] .t-link:hover{ text-decoration-color:var(--dtext); }

/* ---------- buttons: a label and an arrow tile ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; height:52px; padding:0 22px; border-radius:16px;
  border:1.5px solid transparent; font:600 15px/1 var(--font); letter-spacing:-.005em; cursor:pointer; white-space:nowrap; text-decoration:none;
  overflow:hidden; transition:transform .25s var(--spring), background .2s, border-color .2s, color .2s, box-shadow .25s; }
.btn:has(.btn__ic){ padding:0 7px 0 22px; }
.btn__ic{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:grid; place-items:center; transition:transform .3s var(--spring); }
.btn__ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.btn:active{ transform:scale(.97); }
.btn--lime{ background:var(--lime); color:var(--ink); box-shadow:0 10px 26px -12px rgba(var(--lime-rgb),.9); }
.btn--lime .btn__ic{ background:var(--ink); color:var(--lime); }
/* a light sweep across the lime button */
.btn--lime::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-120%) skewX(-18deg); }
.btn--forest{ background:var(--ink); color:var(--cream); }
.btn--forest .btn__ic{ background:var(--lime); color:var(--ink); }
.btn--line{ background:transparent; color:var(--ink); border-color:rgba(10,27,21,.22); }
.btn--ghost{ background:rgba(255,255,255,.04); color:var(--dtext); border-color:var(--dline-3); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); }
  .btn:hover .btn__ic{ transform:rotate(45deg); }
  .btn--lime:hover{ background:#D2F76E; box-shadow:0 16px 34px -12px rgba(var(--lime-rgb),.95); }
  .btn--lime:hover::after{ transform:translateX(260%) skewX(-18deg); transition:transform .8s var(--ease); }
  .btn--forest:hover{ box-shadow:0 16px 30px -14px rgba(6,17,13,.7); }
  .btn--line:hover{ border-color:var(--ink); background:rgba(10,27,21,.03); }
  .btn--ghost:hover{ border-color:rgba(214,255,232,.45); background:rgba(255,255,255,.08); }
}
.btn--sm{ height:44px; font-size:14px; border-radius:14px; padding:0 18px; }
.btn--sm:has(.btn__ic){ padding:0 6px 0 18px; }
.btn--sm .btn__ic{ width:32px; height:32px; flex-basis:32px; border-radius:10px; }
.btn--lg{ height:56px; font-size:15.5px; border-radius:18px; }
.btn--lg .btn__ic{ width:42px; height:42px; flex-basis:42px; border-radius:13px; }
@media (min-width:720px){ .btn--lg{ height:60px; font-size:16px; } .btn--lg .btn__ic{ width:44px; height:44px; flex-basis:44px; } }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.btns{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.btns--center{ justify-content:center; }

/* ---------- pills, chips, ticks, price tiles ---------- */
.pills{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:22px 0 0; padding:0; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 6px; border-radius:999px; font-size:13px; font-weight:500;
  color:var(--dmute); background:rgba(255,255,255,.04); border:1px solid var(--dline-3); }
.pill::before{ content:""; width:17px; height:17px; flex:0 0 17px; border-radius:50%; background:rgba(var(--lime-rgb),.16) var(--check) center/10px no-repeat; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:22px 0 0; padding:0; }
.chips--center{ justify-content:center; }
.chip{ display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 14px; border-radius:13px; background:var(--paper);
  border:1px solid var(--line); font-size:14.5px; font-weight:600; line-height:1.2; transition:transform .25s var(--spring), border-color .2s, background .2s; }
a.chip{ min-height:48px; padding:0 16px 0 8px; }
a.chip:active{ transform:scale(.97); }
@media (hover:hover){ a.chip:hover{ transform:translateY(-2px); border-color:var(--ink); } }
[data-dark] .chip{ background:rgba(255,255,255,.05); border-color:var(--dline-3); color:var(--dtext); }
@media (hover:hover){ [data-dark] a.chip:hover{ border-color:rgba(var(--lime-rgb),.7); background:rgba(var(--lime-rgb),.08); } }
.ticks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; font-weight:560; line-height:1.45; }
.ticks li::before{ content:""; flex:0 0 22px; width:22px; height:22px; margin-top:1px; border-radius:7px; background:var(--ink) var(--check) center/13px no-repeat; }
[data-dark] .ticks li{ color:var(--dtext); }
[data-dark] .ticks li::before{ background:var(--lime) var(--check-ink) center/13px no-repeat; }
.prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; max-width:460px; margin-top:22px; }
.price{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:12px 16px 13px; border-radius:16px; background:var(--paper);
  border:1px solid var(--line); font-size:14px; font-weight:600; line-height:1.35; }
.price b{ font:850 28px/1.05 var(--display); font-stretch:108%; letter-spacing:-0.02em; }
.price small{ font:500 11px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-family:var(--display); font-weight:800; font-stretch:108%; font-size:19px; letter-spacing:-0.018em; }
/* logo A's wordmark: TP, then copier - TP lime where the logo sits on dark */
.logo b{ font-weight:inherit; transition:color .2s; }
.nav.is-dark .logo b,[data-dark] .logo b,.auth__side .logo b{ color:var(--lime); }
.nav.is-open .logo b{ color:inherit; }
.logo__mark{ width:34px; height:34px; flex:0 0 34px; border-radius:11px; display:grid; place-items:center; background:var(--lime); color:var(--ink);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }
.logo__mark svg{ width:20px; height:20px; }

/* ---------- navigation: a floating bar; on phones a menu sheet slides down from it ---------- */
.nav{ position:fixed; top:10px; left:0; right:0; z-index:90; padding:0 10px; pointer-events:none; }
.nav::before{ content:""; position:fixed; inset:0; background:rgba(4,12,9,.55); opacity:0; pointer-events:none; transition:opacity .3s; }
.nav.is-open::before{ opacity:1; pointer-events:auto; }
.nav__in{ pointer-events:auto; position:relative; z-index:2; max-width:1240px; margin:0 auto; height:60px; display:flex; align-items:center; gap:10px;
  padding:0 8px 0 14px; border-radius:18px; background:rgba(251,250,245,.8); border:1px solid var(--line); color:var(--ink);
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 12px 30px -18px rgba(10,27,21,.35); transition:background .3s, border-color .3s, color .3s, box-shadow .3s; }
.nav.is-dark .nav__in{ background:rgba(10,27,21,.66); border-color:var(--dline); color:var(--dtext); box-shadow:0 12px 30px -18px rgba(0,0,0,.6); }
.nav .logo,.nav__go,.nav__burger{ position:relative; z-index:1; }
.nav__go{ margin-left:auto; transition:opacity .2s; }
.nav__burger{ width:44px; height:44px; flex:0 0 44px; border-radius:13px; border:1px solid currentColor; background:transparent; color:inherit;
  cursor:pointer; display:grid; place-content:center; gap:5px; opacity:.9; }
.nav__burger span{ display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .35s var(--spring); }
.nav.is-open .nav__in{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav.is-open .nav__go{ opacity:0; pointer-events:none; }
.nav.is-open .nav__burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
/* the sheet: same links as the desktop bar */
.nav__sheet{ position:absolute; z-index:0; top:0; left:0; right:0; padding:72px 12px 14px; border-radius:22px; background:var(--paper); color:var(--ink);
  box-shadow:0 40px 80px -30px rgba(4,12,9,.7); max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-12px) scale(.98); transform-origin:50% 0;
  transition:transform .35s var(--ease), opacity .2s, visibility 0s .35s; }
.nav.is-open .nav__sheet{ opacity:1; visibility:visible; transform:none; transition:transform .45s var(--spring), opacity .2s, visibility 0s; }
.nav__links{ display:grid; gap:2px; }
.nav__links a{ display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:0 14px; border-radius:14px;
  font:750 20px/1.1 var(--display); font-stretch:106%; letter-spacing:-.012em; }
.nav__links a::after{ content:""; width:20px; height:20px; background:var(--arrow) center/20px no-repeat; opacity:.35; transition:transform .25s var(--spring), opacity .2s; }
.nav__links a[aria-current="page"]{ background:rgba(var(--lime-rgb),.3); }
.nav__cta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.nav__cta > *{ height:50px; }
.nav__signin{ display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); border-radius:14px; font-size:15px; font-weight:650; white-space:nowrap; }
.nav.is-open .nav__links a,.nav.is-open .nav__cta{ animation:sheetIn .45s var(--ease) both; }
.nav.is-open .nav__links a:nth-child(2){ animation-delay:.03s; } .nav.is-open .nav__links a:nth-child(3){ animation-delay:.06s; }
.nav.is-open .nav__links a:nth-child(4){ animation-delay:.09s; } .nav.is-open .nav__links a:nth-child(5){ animation-delay:.12s; }
.nav.is-open .nav__cta{ animation-delay:.18s; }
@keyframes sheetIn{ from{ opacity:0; transform:translateY(10px); } }
@media (hover:hover){ .nav__links a:hover{ background:rgba(10,27,21,.05); } .nav__links a:hover::after{ transform:translateX(3px); opacity:.8; } }
@media (min-width:1080px){
  .nav{ top:14px; padding:0 16px; }
  .nav::before,.nav__burger,.nav__go{ display:none; }
  .nav__in{ height:64px; gap:14px; padding:0 10px 0 16px; border-radius:20px; }
  .nav__sheet{ display:contents; visibility:visible; color:inherit; }
  .nav__links{ display:flex; gap:2px; margin:0 auto; animation:none; }
  .nav__links a{ min-height:42px; padding:0 13px; border-radius:12px; font:520 14.5px/1 var(--font); letter-spacing:0; white-space:nowrap; opacity:.8; transition:opacity .15s, background .15s; }
  .nav__links a::after{ display:none; }
  .nav__links a:hover{ opacity:1; }
  .nav.is-dark .nav__links a:hover{ background:rgba(255,255,255,.07); }
  .nav__links a[aria-current="page"]{ opacity:1; background:rgba(var(--lime-rgb),.22); }
  .nav.is-dark .nav__links a[aria-current="page"]{ background:rgba(var(--lime-rgb),.14); color:var(--lime); }
  .nav__cta{ display:flex; align-items:center; gap:6px; margin:0; }
  .nav__cta > *{ height:44px; }
  .nav__signin{ border:0; padding:0 14px; border-radius:12px; font-size:14.5px; font-weight:600; }
  .nav__signin:hover{ background:rgba(10,27,21,.05); }
  .nav.is-dark .nav__signin:hover{ background:rgba(255,255,255,.07); }
}

@media (min-width:1080px) and (max-width:1279px){ .nav__links a{ padding:0 9px; } .nav__in{ gap:8px; } }

/* ---------- a landing page's sources side by side: one card each, its own anchor for the menu ---------- */
.srcs{ display:grid; gap:14px; }
.src{ display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:22px; background:var(--paper); border:1px solid var(--line); }
.src__h{ display:flex; align-items:center; gap:12px; }
.src__h h3{ margin:0; font:750 21px/1.15 var(--display); letter-spacing:-.01em; }
.src p{ margin:0; color:var(--mute); line-height:1.6; }
.src ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:14.5px; line-height:1.45; }
.src li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:9px; }
.src li svg{ width:18px; height:18px; margin-top:1px; fill:none; stroke:var(--forest,#0E5C3F); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.src code{ display:block; padding:9px 11px; border-radius:11px; background:var(--cream); font:500 12.5px/1.5 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.src .t-link{ margin-top:auto; }
@media (min-width:900px){ .srcs{ grid-template-columns:repeat(3,minmax(0,1fr)); } .srcs--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* ---------- the routing picture (_routing.html - home and automations): senders -> TPcopier -> receivers, one route a loop ---------- */
.fx--rt{ width:100%; max-width:560px; justify-self:center; padding:16px; border-radius:28px; border-color:var(--dline-3);
  background:radial-gradient(120% 55% at 50% 0%,rgba(var(--lime-rgb),.09),transparent 60%),linear-gradient(180deg,#0E241C,#08150F); }
.rt__bar{ display:flex; align-items:center; gap:8px; min-width:0; padding:0 2px 12px; border-bottom:1px solid var(--dline);
  font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dmute); }
.rt__bar b{ color:var(--dtext); font-weight:700; }
.rt__sq{ flex:0 0 10px; height:10px; border-radius:3px; background:var(--lime); box-shadow:0 0 12px rgba(var(--lime-rgb),.6); }
.rt__sl{ opacity:.5; }
.rt__ttl{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.rt__stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:12px; border:1px solid var(--dline); border-radius:14px; }
.rt__stats > div{ min-width:0; padding:9px 11px; border-left:1px solid var(--dline); }
.rt__stats > div:first-child{ border-left:0; }
.rt__stats small{ display:block; font:500 9.5px/1.25 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ddim); }
.rt__stats b{ display:block; margin-top:5px; font:700 21px/1 var(--mono); color:var(--dtext); }
.rt__stats b em{ margin-left:3px; font-size:11px; font-style:normal; color:var(--lime); }
.rt__stats .rt__note{ margin-top:4px; letter-spacing:.02em; text-transform:none; }
.rt__lbl{ display:flex; align-items:center; gap:10px; margin:14px 2px 9px; font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ddim); }
.rt__lbl i{ flex:1; height:1px; background:var(--dline); }
.rt__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.rt__chip{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 4px; border-radius:11px; font-size:12.5px; font-weight:600;
  color:var(--dtext); background:rgba(255,255,255,.04); border:1px solid var(--dline); transition:border-color .3s, background .3s, box-shadow .3s; }
.rt__chip.is-src,.rt__chip.is-dst{ border-color:rgba(var(--lime-rgb),.75); background:rgba(var(--lime-rgb),.1); box-shadow:0 0 22px -8px rgba(var(--lime-rgb),.85); }
.rt__chip.is-dst::after{ content:""; position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%;
  background:var(--lime) var(--check-ink) center/10px no-repeat; transition:opacity .3s, transform .45s var(--spring); }
.rt__core{ display:grid; justify-items:center; }
.rt__msg{ display:flex; align-items:center; gap:8px; max-width:100%; margin-top:12px; padding:6px 12px 6px 6px; border-radius:12px;
  background:#16362B; border:1px solid var(--dline); font:500 12px/1.4 var(--mono); color:var(--dtext); }
.rt__msg .fx-tw{ min-width:0; overflow-wrap:anywhere; }
.rt__hub{ position:relative; display:grid; justify-items:center; align-content:center; gap:2px; width:104px; height:104px; border-radius:50%; text-align:center;
  background:radial-gradient(circle at 50% 30%,#1B4A39,#0B1F17 70%); border:1.5px solid rgba(var(--lime-rgb),.55);
  box-shadow:0 0 0 8px rgba(var(--lime-rgb),.05),0 0 44px -8px rgba(var(--lime-rgb),.55); }
.rt__hub::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px dashed rgba(var(--lime-rgb),.35); animation:rtTurn 16s linear infinite; }
.rt__hub.on{ animation:rtBeat .7s var(--ease); }
.rt__logo{ width:22px; height:22px; color:var(--lime); }
.rt__logo svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.rt__hub small{ font:600 8.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dmute); }
.rt__hub .fx-st{ justify-items:center; }
.rt__hub .fx-st > *{ padding:0; background:none; font:700 16px/1.1 var(--mono); }
.rt__hub .fx-st > i{ color:var(--dmute); }
.rt__hub .fx-st > b{ color:var(--lime); }
@keyframes rtTurn{ to{ transform:rotate(360deg); } }
@keyframes rtBeat{ 40%{ transform:scale(1.07); box-shadow:0 0 0 12px rgba(var(--lime-rgb),.1),0 0 60px -4px rgba(var(--lime-rgb),.85); } }
.rt__foot{ display:flex; justify-content:center; margin-top:14px; }
.rt__foot .fx-st{ justify-items:center; }
@media (min-width:480px){ .fx--rt{ padding:18px 20px; } .rt__chip{ font-size:13px; } }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .rt__chip:is(.is-src,.is-dst):not(.on),.fx--rt.is-out .rt__chip{ border-color:var(--dline); background:rgba(255,255,255,.04); box-shadow:none; }
  .rt__chip.is-dst:not(.on)::after,.fx--rt.is-out .rt__chip::after{ opacity:0; transform:scale(.3); }
}
@media (prefers-reduced-motion:reduce){ .rt__hub::before{ animation:none; } }

/* an app whose download is not ready yet (site.software_list): said plainly, not as big as a price */
.bcard--soon .bcard__price b{ font-size:clamp(22px,1vw + 15px,27px); letter-spacing:-.01em; }

/* a hub's guides: a small card per broker, one guide per source */
.guides{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.guide{ display:grid; align-content:start; padding:14px 14px 6px; border-radius:18px; background:var(--paper); border:1px solid var(--line); }
.guide .t-link{ justify-self:start; padding:6px 0; font-size:13.5px; line-height:1.35; text-decoration-thickness:2px; }
@media (min-width:700px){ .guides{ gap:12px; } .guides--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .guide{ padding:16px 18px 8px; } .guide .t-link{ font-size:14.5px; padding:7px 0; } }
@media (min-width:1080px){ .guides{ grid-template-columns:repeat(5,minmax(0,1fr)); } .guides--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- sections ---------- */
.sec{ position:relative; padding:clamp(64px,6vw + 40px,132px) 0; }
.sec--tight{ padding:clamp(52px,4vw + 34px,96px) 0; }
.sec--tight .h2{ font-size:clamp(28px,2.2vw + 16px,46px); }
.sec--paper{ background:var(--paper); }
.sec--sand{ background:var(--sand); }
.sec--mint{ background:var(--mint); }
.sec--forest{ background:var(--f900); color:var(--dtext); }
.sec--forest::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 420px at 85% 0%,rgba(var(--lime-rgb),.08),transparent 70%),radial-gradient(700px 400px at 0% 100%,rgba(52,211,153,.06),transparent 70%); }
.sec--forest > *{ position:relative; }
.sh{ display:grid; justify-items:center; gap:14px; max-width:780px; margin:0 auto 36px; text-align:center; }
.sh .sub{ max-width:600px; }
@media (min-width:1000px){ .sh{ margin-bottom:52px; } }
.sechead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:24px 56px; align-items:end; }
.sechead .tag{ margin-bottom:18px; }
.sechead .lead{ justify-self:end; }
.sechead--center{ grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; }
.sechead--center .lead{ justify-self:center; }
.split{ display:grid; gap:40px; align-items:center; }
.split > *{ min-width:0; }
.split .h2{ margin-top:14px; }
.split .sub{ margin-top:14px; }
.split .btns{ margin-top:26px; }
.split > div > .t-link{ display:inline-block; margin-top:14px; }
@media (min-width:1000px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,5vw,88px); }
  .split--rev > :first-child{ order:2; }
}
.grid{ display:grid; gap:14px; }
@media (min-width:640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1080px){ .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ---------- the home hero: headline + a picture of a signal landing in MetaTrader ---------- */
.hero{ position:relative; overflow:hidden; isolation:isolate; background:var(--f950); color:var(--dtext); padding:104px 0 0; }
.hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:radial-gradient(1000px 520px at 30% -10%,rgba(var(--lime-rgb),.14),transparent 64%),
             radial-gradient(700px 500px at 100% 60%,rgba(52,211,153,.08),transparent 70%); }
.hero__bg::after{ content:""; position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(rgba(214,255,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(214,255,232,.05) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 20%,transparent 75%); }
.hero__bg i{ position:absolute; width:460px; height:460px; left:-170px; top:-40px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,242,90,.2),transparent 64%); animation:orb 18s ease-in-out infinite alternate; }
.hero__bg i + i{ left:auto; right:-200px; top:34%; width:560px; height:560px; background:radial-gradient(circle,rgba(143,227,184,.16),transparent 64%);
  animation-duration:23s; animation-direction:alternate-reverse; }
@keyframes orb{ to{ transform:translate3d(90px,50px,0) scale(1.1); } }
.hero__grid{ display:grid; gap:40px; align-items:center; }
.hero__copy{ min-width:0; }
.hero .h1{ margin-top:16px; font-size:clamp(34px,4.4vw + 16px,66px); }
.hero .lead{ margin-top:16px; max-width:540px; }
.hero .btns{ margin-top:26px; }
@media (min-width:1080px){
  .hero{ padding-top:132px; }
  .hero__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; }
}

/* the hero picture itself is a .fx scene (below, and the page's own <style>); these pieces are shared by the section pictures */
.flow__tag{ position:absolute; z-index:3; top:-11px; right:18px; padding:6px 9px; border-radius:8px; font:600 10.5px/1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; background:var(--f800); color:var(--dmute); border:1px solid var(--dline-3); }
.fsrc__h{ display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; }
.fsrc__h b{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fsrc__h small{ display:none; margin-left:auto; font:500 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ddim); }
@media (min-width:480px){ .fsrc__h small{ display:block; } }
.wire{ position:relative; justify-self:center; width:2px; height:100%;
  background:repeating-linear-gradient(to bottom,var(--wire,rgba(var(--lime-rgb),.4)) 0 5px,transparent 5px 10px); }
.wire i{ position:absolute; left:50%; top:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--dot,var(--lime));
  box-shadow:0 0 0 4px rgba(var(--lime-rgb),.18),0 0 18px 4px rgba(var(--lime-rgb),.55); opacity:0; }
.term__on{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font:600 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--lime); }
.term__on i{ width:7px; height:7px; border-radius:50%; background:var(--lime); animation:blink 1.6s steps(1) infinite; }
.term__sym{ display:grid; min-width:0; line-height:1.25; }
.term__sym b{ font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term__sym small{ font:500 11px/1.35 var(--mono); color:var(--ddim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tvbox__order em,.inflow__out em{ font:600 11px/1 var(--mono); font-style:normal; padding:6px 8px; border-radius:8px;
  background:var(--lime); color:var(--ink); white-space:nowrap; }
@keyframes blink{ 50%{ opacity:.25; } }

/* an endless strip of names under the hero (the second list is a copy, aria-hidden) */
.marquee{ display:flex; gap:10px; overflow:hidden; margin-top:52px; padding:0 0 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee__track{ flex:none; display:flex; gap:10px; margin:0; padding:0; list-style:none; animation:marquee 46s linear infinite; }
.marquee__track li{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 15px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--dline); background:rgba(255,255,255,.03); color:var(--dmute); font-size:14px; font-weight:560; }
.marquee__track li:has(.bm){ padding-left:9px; }
@media (hover:hover){ .marquee:hover .marquee__track{ animation-play-state:paused; } }
@keyframes marquee{ to{ transform:translateX(calc(-100% - 10px)); } }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:56px; }
.cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.card{ padding:28px; border-radius:26px; background:var(--paper); border:1px solid var(--line); transition:transform .35s var(--ease), box-shadow .35s, border-color .3s; }
@media (hover:hover){ .card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } }
.card__ic{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--ink); color:var(--lime); }
.card__ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.card h3{ font-size:22px; margin-top:20px; letter-spacing:-0.013em; }
.card p{ color:var(--body); font-size:15.5px; margin-top:8px; }
.sec--forest .card{ background:rgba(255,255,255,.03); border-color:var(--dline); }
.sec--forest .card p{ color:var(--dmute); }
.sec--forest .card__ic{ background:var(--lime); color:var(--ink); }
.sec--mint .card,.sec--sand .card{ background:var(--paper); }
/* a whole card that is one link: the arrow line at its foot moves on hover, a gradient edge lights up */
.card--link{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:24px; color:inherit; isolation:isolate; }
.card--link::before{ content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:linear-gradient(135deg,var(--lime) 0%,transparent 42%,transparent 62%,#8FE3B8 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s; }
.card--link .bflow{ margin-bottom:6px; }
.card--link h3{ margin:4px 0 0; font-size:19px; font-stretch:106%; }
.card--link p{ margin:0; font-size:15px; }
.card__go{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:10px; font-weight:650; font-size:14.5px; color:var(--ink); }
.card__go::after{ content:""; width:18px; height:18px; flex:0 0 18px; background:var(--arrow) center/18px no-repeat; transition:transform .3s var(--spring); }
.card--link:active{ transform:scale(.985); }
@media (hover:hover){
  .card--link:hover{ border-color:transparent; }
  .card--link:hover::before{ opacity:1; }
  .card--link:hover .card__go::after{ transform:translateX(5px); }
}

/* ---------- broker marks ---------- */
.bm{ width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:inline-grid; place-items:center; font:700 10px/1 var(--font); color:#fff; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.bm--tg{ background:linear-gradient(135deg,#2AABEE,#1C8FC7); }
.bm--quotex{ background:linear-gradient(135deg,#1E88E5,#1565C0); }
.bm--pocket{ background:linear-gradient(135deg,#00B26F,#00845A); }
.bm--iqoption{ background:linear-gradient(135deg,#FF7A00,#E25B00); }
.bm--binomo{ background:linear-gradient(135deg,#6C3CE6,#4B22C4); }
.bm--olymptrade{ background:linear-gradient(135deg,#2A9D8F,#1F7A6F); }
.bm--expertoption{ background:linear-gradient(135deg,#E64980,#C2255C); }
.bm--binolla{ background:linear-gradient(135deg,#3B82F6,#1D4ED8); }
.bm--mt5{ background:linear-gradient(135deg,#2F80ED,#1B4F9C); font-size:9px; }
.bm--mt4{ background:linear-gradient(135deg,#27AE60,#1B7A43); font-size:9px; }
.bm--tv{ background:linear-gradient(135deg,#2962FF,#131722); font-size:9px; }
.bm--wa{ background:linear-gradient(135deg,#25D366,#128C7E); }
.bm--dc{ background:linear-gradient(135deg,#5865F2,#3C45A5); }
.bm--zerodha{ background:linear-gradient(135deg,#4A8FE0,#2C69B5); }
.bm--angelone{ background:linear-gradient(135deg,#F6A21A,#D97F06); }
.bm--upstox{ background:linear-gradient(135deg,#6E3B9E,#4A2270); }
.bm--dhan{ background:linear-gradient(135deg,#8B6CFA,#5B3ED8); }
.bm--fyers{ background:linear-gradient(135deg,#34479E,#1C2A66); }
.bm--groww{ background:linear-gradient(135deg,#00C896,#00956F); }
.bm--icici{ background:linear-gradient(135deg,#A8323A,#701C22); }
.bm--5paisa{ background:linear-gradient(135deg,#F0553A,#C93A20); }
.bm--kotakneo{ background:linear-gradient(135deg,#E5313A,#AF1219); }
.bm--aliceblue{ background:linear-gradient(135deg,#25A8EC,#0B78B8); }
.bm--brand{ background:var(--lime); color:var(--ink); }
.bm--lg{ width:52px; height:52px; flex-basis:52px; border-radius:16px; font-size:15px; }
.bm--sm{ width:22px; height:22px; flex-basis:22px; border-radius:7px; font-size:8.5px; }

/* a bridge: SENDER to RECEIVER, the wire always moving */
.bflow{ display:inline-flex; align-items:center; gap:0; }
.bflow__e{ width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font:800 11px/1 var(--font); font-style:normal;
  color:#fff; letter-spacing:.02em; box-shadow:0 8px 20px -10px rgba(6,17,13,.6); }
.bflow__e svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.bflow__e--tg{ background:linear-gradient(135deg,#2AABEE,#1C8FC7); }
.bflow__e--tv{ background:linear-gradient(135deg,#2962FF,#131722); }
.bflow__e--wa{ background:linear-gradient(135deg,#25D366,#128C7E); }
.bflow__e--dc{ background:linear-gradient(135deg,#5865F2,#3C45A5); }
.bflow__e--mt{ background:linear-gradient(135deg,#2F80ED,#1B4F9C); }
.bflow__e--bin{ background:linear-gradient(135deg,#1E88E5,#6C3CE6); }
.bflow__e--acc{ background:linear-gradient(135deg,#6B7F76,#3E4D47); }
.bflow__e--host{ background:linear-gradient(135deg,#1D4034,#0A1B15); color:var(--lime); }
.bflow__e--in{ background:linear-gradient(135deg,#F59E0B,#C2410C); }
.bflow__e--delta,.bm--delta{ background:linear-gradient(135deg,#FF7F00 0 50%,#2DB52F 50% 100%); }
.bflow__e--binance,.bm--binance{ background:#1E2026; color:#F0B90B; }
.bflow__wire{ position:relative; width:46px; height:3px; margin:0 6px; border-radius:3px; background:rgba(10,27,21,.12); overflow:hidden; }
.bflow__wire b{ position:absolute; top:0; left:-14px; width:14px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--lime-2),var(--lime)); animation:wire 1.6s var(--ease) infinite; }
.bflow__wire b + b{ animation-delay:.8s; }
@keyframes wire{ to{ transform:translateX(74px); } }

/* ---------- the TradingView, Indian and trade-copier pictures ---------- */
.tvbox,.inflow{ position:relative; width:100%; max-width:520px; justify-self:center; padding:16px; border-radius:28px; }
.tvbox{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--dline-3); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }
.tvbox__alert{ padding:12px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--dline); }
.tvbox__alert code{ display:block; margin-top:10px; padding:11px 12px; border-radius:12px; background:#0B1F18; color:#D9F99D;
  border:1px solid rgba(var(--lime-rgb),.2); font:500 12.5px/1.6 var(--mono); overflow-wrap:anywhere; }
.tvbox__pipe,.inflow__pipe{ display:grid; height:46px; --len:46px; }
.tvbox .wire i,.inflow .wire i{ animation:dotLoop 2.6s linear infinite; }
.inflow .wire--b i{ animation-delay:1.3s; }
.tvbox__order,.inflow__out{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; }
.tvbox__order{ background:rgba(var(--lime-rgb),.07); border:1px solid rgba(var(--lime-rgb),.3); }
.tvbox__order em,.inflow__out em{ animation:pop 2.6s var(--ease) infinite; }
@keyframes dotLoop{ 0%{ opacity:0; transform:translateY(0); } 12%{ opacity:1; } 80%{ opacity:1; transform:translateY(var(--len)); } 90%,100%{ opacity:0; transform:translateY(var(--len)); } }
@keyframes pop{ 0%,76%,100%{ transform:none; } 84%{ transform:scale(1.12); } }
.inflow{ background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-2); --wire:rgba(10,27,21,.22); --dot:#65A30D; }
.inflow .flow__tag{ background:var(--ink); color:var(--lime-3); border-color:var(--ink); }
.inflow__src{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-radius:18px; background:var(--cream); border:1px solid var(--line-2); }
.inflow__src small{ flex-basis:100%; font:500 11px/1.4 var(--mono); color:var(--mute); }
.inflow__pc{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:var(--f900); color:var(--dtext); }
.inflow__pc svg{ width:30px; height:30px; flex:0 0 30px; fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.inflow__pc span{ display:grid; line-height:1.3; }
.inflow__pc small{ font:500 11px/1.4 var(--mono); color:var(--dmute); }
.inflow__out{ background:var(--cream); border:1px solid var(--line); }
.inflow__out .term__sym small{ color:var(--mute); }
.inflow__rs{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--ink); color:var(--lime); }
.inflow__rs svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.copybox{ position:relative; width:100%; max-width:520px; justify-self:center; }
.copybox .fan{ margin-top:6px; }

/* ---------- the pricing teaser: the bridge cards from site.bridge_cards(), made compact ---------- */
.ptease{ margin-top:0; gap:26px; }
.ptease .bcard__sub,.ptease .bcard__list,.ptease .bcard__cta,.ptease .bcard__tiers,.ptease .bcard__more{ display:none; }
.ptease .bgroup:first-child .bgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ptease .bcard{ padding:16px; gap:6px; border-radius:20px; }
.ptease .bcard .bflow{ margin-bottom:4px; transform:scale(.85); transform-origin:0 50%; }
.ptease .bcard__name{ font-size:16px; line-height:1.15; }
.ptease .bcard__price{ margin-top:2px; }
.ptease .bcard__price b{ font-size:32px; }
.ptease .bcard__price span{ font-size:13px; }
.ptease .bcard__inc{ font-size:12.5px; line-height:1.4; font-weight:560; color:var(--mute); }
/* the binary bridges: one short line of chips, last */
.ptease .bgroup + .bgroup .bgrid{ display:flex; flex-wrap:wrap; gap:8px; }
.ptease .bgroup + .bgroup .bcard{ flex-direction:row; align-items:center; gap:10px; padding:9px 14px; border-radius:14px; }
.ptease .bgroup + .bgroup .bflow,.ptease .bgroup + .bgroup .bcard__inc{ display:none; }
.ptease .bgroup + .bgroup .bcard__name{ font-size:14px; font-stretch:100%; }
.ptease .bgroup + .bgroup .bcard__price{ margin:0; }
.ptease .bgroup + .bgroup .bcard__price b{ font-size:17px; }
.ptease .bgroup + .bgroup .bcard__price span{ font-size:12px; }
.ptease__foot{ display:grid; justify-items:center; gap:4px; margin-top:34px; text-align:center; }
@media (min-width:720px){ .ptease .bgroup:first-child .bgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1080px){ .ptease .bgroup:first-child .bgrid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); } }
/* the home page's software list ({{SOFTWARE_LIST}}): its price and Get it - what it does is on /software */
#software .bcard__list{ display:none; }

/* ---------- steps ---------- */
ol.tl{ list-style:none; padding:0; margin-left:0; margin-right:0; }
.tl{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin-top:64px; }
.sh + .tl{ margin-top:0; }
.tl::before,.tl::after{ content:""; position:absolute; left:32px; right:calc((100% - 84px) / 4 - 32px); top:31px; height:2px; border-radius:2px; }
.tl--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tl--3::before,.tl--3::after{ right:calc((100% - 56px) / 3 - 32px); }
.tl::before{ background:rgba(10,27,21,.14); }
.tl::after{ background:var(--ink); transform-origin:left; transform:scaleX(var(--tl,0)); transition:transform .9s var(--ease); }
.tl__step{ position:relative; }
.tl__n{ position:relative; z-index:1; width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--paper); border:1.5px solid rgba(10,27,21,.18);
  font-family:var(--display); font-weight:800; font-size:30px; line-height:1; color:var(--mute); transition:background .4s, color .4s, border-color .4s, transform .4s var(--spring); }
.tl__step.is-in .tl__n{ background:var(--ink); color:var(--lime); border-color:var(--ink); transform:rotate(-6deg); }
.tl__step h3{ font-size:22px; margin-top:22px; letter-spacing:-0.013em; }
.tl__step p{ color:var(--body); font-size:15px; margin-top:8px; }
.tl__chip{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 12px 8px 8px; border-radius:13px; background:var(--paper); border:1px solid var(--line);
  font-size:13px; font-weight:600; box-shadow:var(--sh-1); }
.tl__chip em{ font-style:normal; font:600 10.5px/1 var(--mono); color:var(--win); }

/* ---------- FAQ ---------- */
.faq{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,90px); align-items:start; }
.faq__side .h2{ margin-top:18px; }
.faq__card{ margin-top:30px; padding:24px; border-radius:24px; background:var(--ink); color:var(--dtext); }
.faq__card b{ display:block; font-family:var(--display); font-size:22px; letter-spacing:-0.01em; }
.faq__card p{ color:var(--dmute); font-size:14.5px; margin:8px 0 18px; }
.qas{ border-top:1.5px solid var(--ink); }
.qa{ border-bottom:1px solid var(--line); }
.qas__h{ font:600 13px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:30px 0 0; padding:0 4px 10px; border-bottom:1px solid var(--line); }
.qas > .qas__h:first-child{ margin-top:16px; }
/* home (2026-10-30): what it connects, what it costs, speed note, the comparison */
.hm-what .h2{ margin-top:14px; }
.hm-p{ margin:18px 0 0; max-width:none; text-align:left; }
.hm-p2{ margin-top:14px; color:var(--body); font-size:16.5px; line-height:1.6; }
.hm-map{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:center; padding:clamp(14px,2.4vw,24px);
  border-radius:var(--r-xl); background:var(--f900); color:var(--dtext); box-shadow:var(--sh-3); }
.hm-map small{ display:block; margin:0 0 10px 2px; font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ddim); }
.hm-map ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.hm-map li{ display:flex; align-items:center; gap:9px; min-width:0; padding:8px 10px; border-radius:12px; background:rgba(214,255,232,.05);
  border:1px solid var(--dline); font-size:14px; font-weight:560; line-height:1.25; }
.hm-map li .bm{ flex:0 0 auto; }
.hm-map__mid{ writing-mode:vertical-rl; transform:rotate(180deg); padding:14px 7px; border-radius:999px; border:1px dashed rgba(var(--lime-rgb),.45);
  font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
@media (max-width:480px){ .hm-map{ gap:7px; } .hm-map li{ font-size:12.5px; gap:6px; padding:7px 7px; } }
.hm-cost{ display:grid; gap:22px; align-items:center; margin-top:clamp(40px,5vw,64px); padding:clamp(20px,3vw,32px); border-radius:var(--r-xl);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); }
@media (min-width:900px){ .hm-cost{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); } }
.hm-cost h3{ font:800 24px/1.15 var(--display); font-stretch:106%; letter-spacing:-.01em; }
.hm-cost p{ margin:10px 0 12px; color:var(--body); font-size:16px; line-height:1.6; }
.hm-prices{ max-width:none; margin-top:0; }
.hm-speed{ margin-top:0; }
.hm-speed__note{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:16px; padding:18px 22px; border-radius:20px;
  border:1px dashed rgba(var(--lime-rgb),.35); background:rgba(var(--lime-rgb),.05); }
.hm-speed__note > b{ font:850 clamp(30px,5vw,40px)/1 var(--display); font-stretch:108%; color:var(--lime); }
.hm-speed__note p{ flex:1 1 300px; margin:0; color:var(--dmute); font-size:15px; line-height:1.55; }
.hm-speed__note strong{ color:var(--dtext); }
.hm-cmp td:nth-child(2){ background:rgba(var(--lime-rgb),.10); font-weight:560; color:var(--ink); }
.hm-cmp thead th:nth-child(2){ background:var(--lime); }
.hm-cmp thead a{ color:inherit; }
.hm-src{ max-width:860px; margin:16px auto 0; text-align:center; font-size:13.5px; line-height:1.6; color:var(--mute); }
.hm-src a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.hm-h3{ margin:clamp(40px,5vw,56px) 0 18px; text-align:center; font:800 clamp(22px,3vw,28px)/1.15 var(--display); font-stretch:106%; }
.hm-better .card h3{ margin-top:0; font-size:19px; }
/* /trade-copier-for-brokers: the hero's four facts, the e-mail card, the code note */
.bp-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:30px; }
@media (min-width:900px){ .bp-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } }
.bp-stat{ min-width:0; padding:16px 16px 14px; border-radius:18px; background:rgba(214,255,232,.05); border:1px solid var(--dline); }
.bp-stat b{ display:block; font:850 clamp(24px,6vw,34px)/1.05 var(--display); font-stretch:108%; letter-spacing:-.02em; color:var(--lime); }
.bp-stat span{ display:block; margin-top:8px; color:var(--dtext); font-size:14.5px; line-height:1.4; }
.bp-stat small{ display:block; margin-top:6px; font:500 11px/1.35 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ddim); }
.bp-mail{ padding:28px; }
.bp-mail .btns{ margin-top:18px; }
.bp-mail__alt{ margin-top:14px; font-size:14.5px; color:var(--mute); }
.bp-ticks li{ color:var(--dtext); }
.bp-ticks li::before{ background-color:var(--f700); }
.bp-shot{ margin:0; padding:12px; }
.bp-shot img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; background:var(--cream); border-radius:12px; border:1px solid var(--line); }
.bp-shot figcaption{ padding:14px 6px 4px; font-size:14.5px; line-height:1.5; color:var(--body); }
.bp-why{ margin-top:16px; }
.bp-note{ margin-top:10px; font-size:14px; color:var(--dmute); }
.qa summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:18px 4px;
  font-weight:600; font-size:17px; line-height:1.4; letter-spacing:-.01em; transition:color .2s; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:""; flex:0 0 34px; width:34px; height:34px; border-radius:11px; border:1.5px solid var(--line);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1B15' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat;
  transition:transform .35s var(--spring), background-color .2s, border-color .2s; }
.qa[open] summary::after{ transform:rotate(45deg); background-color:var(--lime); border-color:var(--lime); }
@media (hover:hover){ .qa summary:hover::after{ border-color:var(--ink); } }
.qa p{ padding:0 60px 24px 4px; color:var(--body); font-size:16px; }
.qa[open] > p{ animation:qaIn .4s var(--ease); }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-8px); } }

/* ---------- lime call to action ---------- */
.band{ position:relative; overflow:hidden; isolation:isolate; background:var(--lime); padding:clamp(64px,6vw + 36px,124px) 0; text-align:center; }
.band::before,.band::after{ content:""; position:absolute; z-index:-1; width:540px; height:540px; left:-160px; top:-240px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.6),transparent 64%); animation:orb 16s ease-in-out infinite alternate; }
.band::after{ left:auto; top:auto; right:-180px; bottom:-280px; background:radial-gradient(circle,rgba(143,227,184,.75),transparent 64%);
  animation-duration:21s; animation-direction:alternate-reverse; }
.band h2{ font-size:clamp(34px,4.6vw + 12px,84px); line-height:1; letter-spacing:-0.022em; }
.band p{ font-size:18px; color:var(--ink-2); margin:16px auto 0; max-width:560px; }
.band p a{ text-decoration:underline; }
.band .btns{ margin-top:30px; justify-content:center; }

/* ---------- footer ---------- */
.foot{ position:relative; overflow:hidden; background:var(--f950); color:var(--dmute); padding:64px 0 26px; }
.foot::before{ content:""; position:absolute; right:-160px; top:-200px; width:560px; height:560px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--lime-rgb),.10),transparent); }
.foot > *{ position:relative; }
.foot .logo{ color:var(--dtext); }
.foot__top{ display:grid; gap:36px; }
.foot__about p{ margin:14px 0 20px; max-width:340px; font-size:15px; }
.foot__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
.foot__h{ margin:0 0 6px; font:600 12px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ddim); }
.foot__col a{ display:block; padding:12px 0; font-size:15px; line-height:1.4; color:var(--dmute); transition:color .15s; }
.foot__col a:hover,.foot__bar a:hover{ color:var(--lime); }
.foot__legal{ margin-top:44px; padding-top:22px; border-top:1px solid var(--dline); font-size:12.5px; line-height:1.7; color:var(--ddim); max-width:1000px; }
.foot__bar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 24px; margin-top:12px; font-size:13.5px; color:var(--ddim); }
.foot__bar a{ display:inline-block; padding:12px 0; }
@media (min-width:1000px){
  .foot{ padding-top:clamp(72px,7vw,100px); }
  .foot__top{ grid-template-columns:minmax(0,1fr) minmax(0,3.2fr); gap:48px; }
  .foot__nav{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .foot__col a{ padding:6px 0; }
}

/* ---------- inner pages: the dark page head ---------- */
.phero{ position:relative; overflow:hidden; background:var(--f950); color:var(--dtext); padding:118px 0 64px; }
.phero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1100px 520px at 50% -8%,rgba(var(--lime-rgb),.16),transparent 64%),
             radial-gradient(700px 500px at 100% 70%,rgba(52,211,153,.08),transparent 70%),
             radial-gradient(600px 420px at 0% 80%,rgba(var(--lime-rgb),.05),transparent 70%); }
.phero::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(214,255,232,.14) 1px,transparent 1.2px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%); }
.phero > *{ position:relative; z-index:1; }
.phero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
.phero h1{ font-size:clamp(32px,4.8vw + 10px,84px); margin-top:18px; }
.phero h1.h1--long{ font-size:clamp(32px,3.3vw + 12px,64px); }   /* a 45+ letter title: the button stays above the fold */
.phero .lead{ margin-top:22px; }
.phero .btns{ margin-top:32px; }
.phero .trust{ justify-content:flex-start; }
.crumbs{ font:500 13px/1.4 var(--mono); color:var(--ddim); letter-spacing:.02em; }
.crumbs a{ padding:14px 2px; }
.crumbs a:hover{ color:var(--lime); }
.trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:26px; font-size:14px; color:var(--dmute); }
.trust span{ display:inline-flex; align-items:center; gap:8px; }
.ok{ width:18px; height:18px; flex:0 0 18px; border-radius:6px; display:inline-grid; place-items:center; background:rgba(var(--lime-rgb),.16); color:var(--lime); }
.ok svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:1000px){ .phero{ padding:150px 0 90px; } }

/* ---------- landing-page blocks (kept) ---------- */
.screen{ border-radius:26px; padding:20px; background:linear-gradient(180deg,#0D2019,#08150F); border:1px solid var(--dline); box-shadow:0 50px 120px -50px rgba(0,0,0,.8); }
.screen__bar{ display:flex; align-items:center; gap:10px; padding:0 4px 14px; border-bottom:1px solid var(--dline); font:500 12px/1 var(--mono); color:var(--ddim); }
.screen__bar b{ color:var(--dtext); font:600 14px/1 var(--font); }
.screen__bar .console__live{ margin-left:auto; }
.screen .fan{ margin-top:16px; }
.screen .tgcard{ margin-top:16px; }
.screen .orders{ margin-top:12px; }
.screen__foot{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--dline-2);
  font-size:14px; color:var(--dmute); }
.console__ex{ padding:3px 8px; border-radius:6px; border:1px solid var(--dline-3); color:var(--dmute); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.console__live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--lime); letter-spacing:.1em; font-size:11px; font-weight:600; }
.console__live i{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(var(--lime-rgb),.6); animation:ping 1.8s ease-out infinite; }
@keyframes ping{ 70%{ box-shadow:0 0 0 8px rgba(var(--lime-rgb),0); } 100%{ box-shadow:0 0 0 0 rgba(var(--lime-rgb),0); } }
.console__sum{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font:500 12px/1 var(--mono); color:var(--ddim); }
.console__sum b{ color:var(--lime); font-weight:600; }
.tgcard{ border-radius:18px; background:rgba(255,255,255,.03); border:1px solid var(--dline); padding:14px; }
.tgcard__who{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; }
.tgcard__who small{ display:block; font-weight:400; font-size:12px; color:var(--ddim); }
.tgbubble{ margin-top:12px; padding:12px 14px; border-radius:4px 16px 16px 16px; background:#16362B; color:var(--dtext);
  font:500 15px/1.45 var(--mono); min-height:48px; word-break:break-word; }
.rmx__msg .caret{ display:inline-block; width:8px; height:16px; margin-left:2px; vertical-align:-3px; background:var(--lime); animation:blink 1s steps(1) infinite; }
.tgbubble--pre{ white-space:pre-line; font-family:var(--mono); font-size:13px; line-height:1.55; }
.orders{ display:grid; gap:8px; }
.orow{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 12px; border-radius:12px;
  background:rgba(255,255,255,.025); border:1px solid var(--dline-2); font-size:14px; font-weight:560; position:relative; overflow:hidden; }
.orow::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--lime); transform-origin:left; transform:scaleX(0); }
.orow.is-sent::after{ transition:transform .5s var(--ease); transform:scaleX(1); }
.orow.is-done{ border-color:rgba(var(--lime-rgb),.28); background:rgba(var(--lime-rgb),.05); }
.ost{ font:600 11px/1 var(--mono); letter-spacing:.04em; padding:5px 8px; border-radius:7px; color:var(--ddim); background:rgba(255,255,255,.04); white-space:nowrap; }
.orow.is-sent .ost{ color:var(--dtext); }
.orow.is-done .ost{ color:var(--ink); background:var(--lime); }
.orow .ost.is-off{ color:var(--ddim); }
.eatape{ display:grid; gap:8px; }
.eatape > div{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 14px; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--dtext); font-size:13.5px; }
.eatape > div > div{ min-width:0; }
.eatape code{ display:block; font:500 12.5px/1.4 var(--mono); color:var(--dtext); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eatape small{ display:block; color:var(--ddim); font-size:12px; margin-top:2px; }
.ot{ font:700 10.5px/1 var(--mono); letter-spacing:.08em; padding:6px 8px; border-radius:8px; white-space:nowrap; }
.ot--open{ color:#93C5FD; background:rgba(96,165,250,.14); } .ot--mod{ color:#FDBA74; background:rgba(251,146,60,.14); }
.ot--close{ color:#67E8F9; background:rgba(34,211,238,.14); } .ot--be{ color:#FCD34D; background:rgba(251,191,36,.14); }
.ot--ign{ color:var(--ddim); background:rgba(255,255,255,.06); }
.jsonbox{ font:500 13px/1.6 var(--mono); padding:16px 18px; border-radius:16px; background:#0B1F18; color:#D9F99D; border:1px solid rgba(var(--lime-rgb),.2);
  white-space:pre-wrap; overflow-wrap:anywhere; }
.pl{ font:600 11px/1 var(--mono); padding:5px 8px; border-radius:7px; }
.pl--win{ background:var(--win-soft); color:var(--win); } .pl--loss{ background:var(--loss-soft); color:var(--loss); } .pl--wait{ background:var(--wait-soft); color:var(--wait); }

.tile{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:28px; border:1px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column; gap:12px; min-width:0; transition:transform .35s var(--ease), box-shadow .35s; }
@media (hover:hover){ .tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } }
.tile h3{ font-size:clamp(22px,1.8vw,28px); letter-spacing:-0.015em; }
.tile p{ color:var(--body); font-size:15.5px; }
.tile__k{ font:600 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.tile__vis{ margin-top:auto; }
.tile__price b{ font-family:var(--display); font-size:28px; letter-spacing:-0.01em; margin-right:4px; }
.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:56px; align-items:start; }
.reads{ display:grid; gap:8px; }
.reads div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; padding:12px 14px; border-radius:14px;
  background:var(--cream); border:1px solid var(--line-2); }
.reads code{ font:500 14px/1.35 var(--mono); overflow-wrap:anywhere; }
.reads span{ font:600 12px/1 var(--mono); padding:7px 10px; border-radius:9px; background:var(--ink); color:var(--cream); white-space:nowrap; }
.reads span b{ color:var(--lime); font-weight:600; }
/* an alert's fields: the name, then what it does - a long explanation wraps instead of squeezing the name */
.reads--fields div{ grid-template-columns:auto minmax(0,1fr); }
.reads--fields span{ justify-self:start; white-space:normal; line-height:1.45; }
.why{ display:grid; gap:8px; }
.why > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 13px; border-radius:13px; background:var(--cream);
  border:1px solid var(--line-2); }
.why > div > div{ min-width:0; }
.why code{ display:block; font:500 13.5px/1.3 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.why small{ display:block; font-family:var(--font); font-size:12.5px; color:var(--mute); margin-top:3px; white-space:normal; }

/* one channel, many brokers */
.sig{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(32px,5vw,80px); align-items:center; }
.sig__pts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; margin-top:30px; }
.sig__pts > div{ display:flex; gap:12px; align-items:flex-start; }
.sig__pts svg{ width:22px; height:22px; flex:0 0 22px; padding:4px; border-radius:7px; background:var(--ink); fill:none; stroke:var(--lime); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.sig__pts b{ display:block; font-size:15.5px; }
.sig__pts p{ color:var(--body); font-size:14px; margin-top:2px; }
.rmx{ border-radius:30px; padding:22px; background:var(--f900); color:var(--dtext); border:1px solid var(--f800); box-shadow:var(--sh-3); }
.rmx__h{ display:flex; align-items:center; gap:10px; padding:2px 4px 16px; border-bottom:1px solid var(--dline); font:500 12px/1 var(--mono); color:var(--ddim); }
.rmx__h b{ font:600 14px/1 var(--font); color:var(--dtext); }
.rmx__h .console__live{ margin-left:auto; }
.rmx__lab{ font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ddim); margin:16px 4px 10px; }
.rmx__chans{ display:flex; flex-wrap:wrap; gap:8px; }
.rmx__chan{ display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:8px 13px 8px 8px; border-radius:14px; border:1px solid var(--dline); background:rgba(255,255,255,.03);
  color:var(--dmute); font:600 13.5px/1 var(--font); cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.rmx__chan:hover{ color:var(--dtext); border-color:var(--dline-3); }
.rmx__chan[aria-pressed="true"]{ color:var(--ink); background:var(--lime); border-color:var(--lime); }
.rmx__accs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.rmx__acc{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.025); border:1px solid var(--dline-2); transition:border-color .3s, background .3s; }
.rmx__acc b{ display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmx__acc small{ display:block; font:500 11px/1.2 var(--mono); color:var(--ddim); margin-top:2px; }
.rmx__acc.is-on{ border-color:rgba(var(--lime-rgb),.45); background:rgba(var(--lime-rgb),.07); }
.rmx__sw{ position:relative; width:38px; height:22px; border-radius:20px; background:rgba(255,255,255,.1); transition:background .3s; }
.rmx__sw::after{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#9FB3A9; transition:transform .35s var(--spring), background .3s; }
.rmx__acc.is-on .rmx__sw{ background:var(--lime); }
.rmx__acc.is-on .rmx__sw::after{ transform:translateX(16px); background:var(--ink); }
/* the typed message never wraps, so the box keeps its height while site.js types */
.rmx__msg{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:4px 15px 15px 15px; background:#16362B;
  font:500 14.5px/1.4 var(--mono); color:var(--dtext); min-height:46px; }
.rmx__msg > span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rmx__msg small{ margin-left:auto; font:600 11px/1 var(--mono); letter-spacing:.04em; color:var(--lime); white-space:nowrap; }
.rmx__sum{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:13px 14px; border-radius:15px; background:rgba(var(--lime-rgb),.08);
  border:1px solid rgba(var(--lime-rgb),.22); font-size:14px; color:var(--dmute); }
.rmx__sum b{ color:var(--lime); font-weight:600; }
.xlink{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:22px 26px; border-radius:24px; background:var(--paper); border:1px solid var(--line); }
.xlink b{ font-family:var(--display); font-size:21px; letter-spacing:-0.013em; }
.xlink p{ color:var(--body); font-size:15px; flex:1 1 320px; }

/* one account, many followers (site.js draws the wires) */
.spot{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
.spot__card{ border-radius:30px; padding:22px; background:var(--f900); color:var(--dtext); border:1px solid var(--f800); box-shadow:var(--sh-3); }
.spot__bar{ display:flex; align-items:center; gap:10px; font:500 12px/1 var(--mono); color:var(--ddim); padding:2px 4px 14px; border-bottom:1px solid var(--dline); }
.spot__bar b{ color:var(--dtext); font-weight:600; font-family:var(--font); font-size:14px; }
.spot__bar span:last-child{ margin-left:auto; color:var(--lime); }
.fan{ position:relative; height:250px; }
.spot__card .fan{ height:300px; margin-top:16px; }
.fan svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.fan__main,.fan__f{ position:absolute; display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 7px; border-radius:13px; font-size:13px; font-weight:600;
  white-space:nowrap; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); transition:border-color .3s, box-shadow .3s, background .3s; }
.fan__main{ left:0; top:50%; transform:translateY(-50%); background:var(--ink); color:var(--lime); border-color:var(--ink); }
.fan__f{ right:0; }
.fan__f.is-hit{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,27,21,.12); }
.fan__f em{ font-style:normal; font:600 10.5px/1 var(--mono); color:var(--win); opacity:0; transition:opacity .3s; }
.fan__f.is-hit em{ opacity:1; }
.fan .w-base{ fill:none; stroke:rgba(10,27,21,.25); stroke-width:1.6; }
.fan .w-flow{ fill:none; stroke:var(--ink); stroke-width:1.8; stroke-dasharray:3 10; animation:flow 1s linear infinite; }
.fan .w-dot{ fill:var(--ink); }
.phero .fan .w-base,.spot__card .fan .w-base{ stroke:rgba(var(--lime-rgb),.25); }
.phero .fan .w-flow,.spot__card .fan .w-flow{ stroke:var(--lime); }
.phero .fan .w-dot,.spot__card .fan .w-dot{ fill:var(--lime); }
.phero .fan__f,.spot__card .fan__f{ background:rgba(255,255,255,.04); border-color:var(--dline); color:var(--dtext); box-shadow:none; }
.phero .fan__f.is-hit,.spot__card .fan__f.is-hit{ border-color:rgba(var(--lime-rgb),.6); box-shadow:0 0 0 3px rgba(var(--lime-rgb),.12); }
.phero .fan__f em,.spot__card .fan__f em{ color:var(--lime); }
.phero .fan__main,.spot__card .fan__main{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
@keyframes flow{ to{ stroke-dashoffset:-13; } }
.fan__f .stake{ font:600 11px/1 var(--mono); padding:4px 7px; border-radius:7px; background:rgba(var(--lime-rgb),.14); color:var(--lime); transition:background .3s; }
.fan__f .stake.is-new{ background:var(--lime); color:var(--ink); }
.opts{ display:grid; gap:10px; margin-top:30px; }
.opt{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; align-items:start; text-align:left; padding:16px 18px; border-radius:18px; border:1.5px solid var(--line);
  background:var(--paper); cursor:pointer; font:inherit; color:inherit; transition:border-color .2s, background .2s, transform .2s var(--ease); }
.opt:hover{ border-color:rgba(10,27,21,.35); }
.opt i{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(10,27,21,.3); margin-top:2px; display:grid; place-items:center; transition:border-color .2s; }
.opt i::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ink); transform:scale(0); transition:transform .25s var(--spring); }
.opt b{ font-size:16px; font-weight:650; }
.opt span{ display:block; color:var(--body); font-size:14.5px; margin-top:3px; }
.opt[aria-checked="true"]{ border-color:var(--ink); background:#fff; }
.opt[aria-checked="true"] i{ border-color:var(--ink); background:var(--lime); }
.opt[aria-checked="true"] i::after{ transform:scale(1); }
.chipline{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.center .chipline{ justify-content:center; }
.chipline a{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 9px; border-radius:15px; background:var(--paper); border:1px solid var(--line);
  font-weight:600; font-size:15px; transition:transform .25s var(--spring), border-color .2s; }
.chipline a:hover{ transform:translateY(-2px); border-color:var(--ink); }
.big404{ font-size:clamp(130px,22vw,300px); line-height:.78; letter-spacing:-0.015em; margin-bottom:18px; }
.big404 .it{ color:var(--lime); }

/* the price card on the software page */
.sw-card{ margin-top:16px; padding:22px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid var(--dline); }
.sw-card__price{ font:700 clamp(46px,4vw,64px)/1 var(--display); letter-spacing:-0.025em; color:var(--lime); }
.sw-card__price small{ font:500 16px/1 var(--font); color:var(--dmute); margin-left:8px; letter-spacing:0; }
.sw-card ul{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; color:var(--dmute); font-size:15px; }
.sw-card li b{ color:var(--dtext); }

/* ---------- prices: paid per bridge (site.bridge_cards) ---------- */
.bridges{ display:grid; gap:40px; margin-top:48px; }
.bgroup__h{ font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:16px;
  display:flex; align-items:center; gap:12px; }
.bgroup__h::after{ content:""; flex:1; height:1px; background:var(--line); }
.bgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.bcard{ position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px 24px; border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); overflow:hidden;
  transition:transform .35s var(--spring), box-shadow .3s, border-color .3s; }
.bcard::before{ content:""; position:absolute; inset:-1px -1px auto; height:4px; background:linear-gradient(90deg,var(--lime),#8FE3B8);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
@media (hover:hover){ .bcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); border-color:rgba(10,27,21,.2); } .bcard:hover::before{ transform:scaleX(1); } }
.bcard .bflow{ margin-bottom:6px; }
.bcard__name{ font-size:22px; font-weight:800; font-stretch:106%; letter-spacing:-0.013em; }
.bcard__sub{ color:var(--body); font-size:14.5px; line-height:1.5; min-height:44px; }
.bcard__price{ display:flex; align-items:baseline; gap:6px; margin-top:6px; }
.bcard__price b{ font:850 48px/1 var(--display); font-stretch:110%; letter-spacing:-0.022em; }
.bcard__price span{ color:var(--mute); font-weight:600; }
.bcard__inc{ font-size:13.5px; color:var(--ink-2); font-weight:600; }
/* a MetaTrader plan's tiers: accounts and a month, hosting included */
.bcard__tiers{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.bcard__tiers li{ display:flex; align-items:baseline; gap:6px; padding:5px 9px; border-radius:9px; background:var(--sand);
  border:1px solid var(--line-2); font-size:12.5px; font-weight:560; color:var(--ink-2); }
.bcard__tiers b{ font-weight:800; color:var(--ink); }
.bcard__more{ font-size:12.5px; color:var(--mute); }
.bcard__more a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.bcard__list{ list-style:none; margin:8px 0 6px; padding:0; display:grid; gap:9px; flex:1; }
.bcard__list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.45; }
.bcard__list svg{ width:18px; height:18px; flex:0 0 18px; padding:3px; border-radius:6px; background:var(--ink); fill:none; stroke:var(--lime);
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }
.bcard__cta{ margin-top:8px; }
/* build your bill */
.calc{ margin-top:34px; border-radius:var(--r-xl); background:var(--f900); color:var(--dtext); padding:28px; box-shadow:var(--sh-3); position:relative; overflow:hidden; }
.calc::after{ content:""; position:absolute; width:480px; height:480px; right:-160px; top:-220px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,242,90,.2),transparent 65%); pointer-events:none; }
.calc > *{ position:relative; }
.calc__h{ display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; margin-bottom:18px; }
.calc__h b{ font:800 26px/1.1 var(--display); font-stretch:108%; letter-spacing:-0.015em; }
.calc__h span{ color:var(--dmute); font-size:14.5px; }
.calc__rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.crow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:16px;
  background:rgba(255,255,255,.035); border:1px solid var(--dline); transition:background .2s, border-color .2s; }
.crow.is-on{ background:rgba(200,242,90,.08); border-color:rgba(200,242,90,.35); }
.crow input[type=checkbox]{ width:24px; height:24px; accent-color:var(--lime); cursor:pointer; }
.crow__name{ font-weight:650; font-size:14.5px; }
.crow__name small{ display:block; color:var(--dmute); font-weight:500; font-size:12.5px; margin-top:2px; }
.crow__acc{ display:flex; align-items:center; gap:8px; }
.crow__acc button{ width:36px; height:36px; border-radius:10px; border:1px solid var(--dline-3); background:rgba(255,255,255,.05);
  color:var(--dtext); font-size:17px; line-height:1; cursor:pointer; transition:background .15s, transform .1s; }
.crow__acc button:hover:not(:disabled){ background:rgba(255,255,255,.12); }
.crow__acc button:active:not(:disabled){ transform:scale(.92); }
.crow__acc button:disabled{ opacity:.35; cursor:not-allowed; }
.crow__acc b{ min-width:20px; text-align:center; font-variant-numeric:tabular-nums; }
.crow__tier{ height:36px; max-width:100%; padding:0 8px; border-radius:10px; border:1px solid var(--dline-3); background:rgba(255,255,255,.05);
  color:var(--dtext); font:inherit; font-size:14px; cursor:pointer; }
.crow__tier option{ color:#0A1B15; }
.calc__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; padding-top:20px; border-top:1px dashed var(--dline-3); }
.calc__foot > div > span{ display:block; color:var(--dmute); font-size:13px; }
.calc__foot > div > b{ font:850 44px/1 var(--display); font-stretch:110%; letter-spacing:-0.022em; color:var(--lime); font-variant-numeric:tabular-nums; }
.calc__year{ margin-top:6px; font-size:13.5px; opacity:.85; }
.calc__year s{ opacity:.6; }
/* pay once: the Lifetime Software */
.swrow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:36px; }
.swcard{ display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:var(--r-lg); background:var(--sand);
  border:1px solid var(--line-2); color:var(--ink); transition:transform .3s var(--spring), box-shadow .3s, background .3s; }
@media (hover:hover){ .swcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); background:var(--sand-2); } }
.swcard__tag{ align-self:flex-start; font:600 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:7px; background:var(--ink); color:var(--lime); }
.swcard__name{ font:800 18px/1.2 var(--display); letter-spacing:-0.01em; margin-top:6px; }
.swcard__sub{ font-size:13.5px; color:var(--body); line-height:1.45; flex:1; }
.swcard__price{ font:850 30px/1 var(--display); letter-spacing:-0.02em; margin-top:6px; }
.swcard__price small{ font:600 13px var(--font); color:var(--mute); letter-spacing:0; }
.swcard__inc{ font-size:12.5px; color:var(--ink-2); font-weight:600; }
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:48px; border-radius:24px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); }
.cmp{ width:100%; border-collapse:collapse; font-size:15px; min-width:640px; }
.cmp th,.cmp td{ padding:16px 20px; border-bottom:1px solid var(--line-2); text-align:center; }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp thead th{ font-family:var(--display); font-size:18px; letter-spacing:-0.01em; background:var(--sand); }
.cmp th[scope="row"],.cmp thead th:first-child{ text-align:left; color:var(--body); font-weight:560; font-family:var(--font); font-size:15px; }
.cmp--left td{ text-align:left; }
.cmp tbody tr:hover{ background:rgba(var(--lime-rgb),.14); }
/* the launch offer (only while it runs: site.promo_banner) */
.promo{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:center; margin:26px auto 0; max-width:760px;
  padding:12px 18px; border-radius:14px; background:rgba(var(--lime-rgb),.16); border:1px solid rgba(var(--lime-rgb),.45); font-size:15.5px; text-align:center; }
.promo b{ padding:3px 10px; border-radius:999px; background:var(--lime); color:var(--ink); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; }
.sec .promo{ margin:0 auto 22px; }
.refund-note{ margin-top:18px; text-align:center; color:var(--mute); font-size:14.5px; }
.refund-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; padding:12px 0; }

/* ---------- long-form text: the refund policy, the blog ---------- */
.legal{ max-width:760px; }
.legal h2{ font-family:var(--display); font-size:clamp(22px,2vw,28px); letter-spacing:-0.015em; margin:38px 0 10px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:19px; margin:26px 0 8px; }
.legal p,.legal li{ color:var(--body); font-size:17px; line-height:1.75; }
.legal p + p{ margin-top:12px; }
.legal ul,.legal ol{ padding-left:22px; display:grid; gap:6px; margin:10px 0; }
.legal a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime-2); text-underline-offset:3px; }
.legal blockquote{ margin:22px 0; padding:14px 18px; border-left:4px solid var(--lime-2); background:var(--paper); border-radius:0 14px 14px 0; }
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.post-card{ display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
@media (hover:hover){ .post-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:rgba(10,27,21,.2); } }
.post-card:active{ transform:scale(.99); }
.post-card:focus-visible{ outline:3px solid var(--lime-2); outline-offset:3px; }
.post-card__cat{ font:600 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mute); }
.post-card h2{ font-family:var(--display); font-size:21px; line-height:1.25; letter-spacing:-0.01em; margin:0; color:var(--ink); }
.post-card p{ margin:0; color:var(--body); font-size:15px; line-height:1.6; flex:1; }
.post-card__meta{ font-size:13px; color:var(--mute); }
.post-h1{ max-width:880px; }
.post-meta{ margin-top:14px; font:500 13.5px/1.4 var(--mono); color:var(--dmute); }
.post{ margin:0 auto; }
.post code{ font-family:var(--mono); font-size:.92em; background:var(--sand); padding:2px 6px; border-radius:6px; overflow-wrap:anywhere; }
.post pre{ margin:18px 0; padding:14px 16px; border-radius:14px; background:var(--sand); overflow-x:auto; max-width:100%; }
.post pre code{ padding:0; background:none; overflow-wrap:normal; white-space:pre; font-size:13.5px; line-height:1.6; }
.post h2{ scroll-margin-top:90px; }
/* screenshots and illustrations in an article, each with its caption (the italic line after it); a tap opens the viewer */
.post img{ display:block; max-width:100%; height:auto; margin:22px 0 8px; border-radius:14px;
  border:1px solid rgba(15,42,32,.12); box-shadow:0 18px 40px -24px rgba(6,17,13,.45); background:#fff; transition:transform .3s var(--ease), box-shadow .3s; }
.post img[role="button"]{ cursor:zoom-in; }
@media (hover:hover){ .post img[role="button"]:hover{ transform:translateY(-2px); box-shadow:0 26px 50px -24px rgba(6,17,13,.5); } }
.post img[role="button"]:active{ transform:scale(.99); }
.post p:has(> img) + p > em:only-child{ display:block; font-size:14px; color:var(--mute); margin-top:-4px; }
.post table{ display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
.post th,.post td{ padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.post th{ font-weight:700; background:rgba(var(--lime-rgb),.10); white-space:nowrap; }
.toc{ margin:0 0 30px; padding:12px 20px; border:1px solid var(--line); border-radius:14px; background:rgba(var(--lime-rgb),.08); }
.toc summary{ cursor:pointer; font-weight:700; padding:10px 0; }
.toc ol{ margin:4px 0 0; padding-left:20px; columns:2; column-gap:32px; }
.toc li{ margin:0; break-inside:avoid; }
.toc a{ display:block; padding:11px 0; line-height:1.4; text-decoration:none; }
.toc a:hover{ text-decoration:underline; }
.post-cta{ max-width:760px; margin:44px auto 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 26px; border-radius:var(--r-lg); background:var(--f900); color:var(--dtext); }
.post-cta h2{ font-family:var(--display); font-size:22px; margin:0 0 6px; letter-spacing:-0.01em; }
.post-cta p{ margin:0; color:var(--dmute); font-size:15px; }

/* the picture viewer (site.js): zoom with the buttons, a pinch, a double tap or the wheel */
.lb{ position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden;
  overscroll-behavior:contain; background:rgba(4,12,9,.97); color:var(--dtext); }
.lb[open]{ display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; animation:lbIn .25s var(--ease); }
.lb::backdrop{ background:transparent; }
.lb__top{ display:flex; justify-content:flex-end; padding:calc(10px + env(safe-area-inset-top)) 10px 0; }
.lb__stage{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:8px; touch-action:none; cursor:zoom-in; }
.lb[open] .lb__stage{ animation:lbPic .35s var(--ease); }
.lb.is-zoomed .lb__stage{ cursor:grab; }
.lb.is-drag .lb__stage{ cursor:grabbing; }
.lb__img{ flex:none; max-width:100%; max-height:100%; border-radius:10px; transform-origin:0 0; will-change:transform; user-select:none; -webkit-user-drag:none;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8); background:#fff; }
.lb__cap{ margin:0; padding:4px 18px 0; text-align:center; font-size:14px; color:var(--dmute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb__bar{ display:flex; justify-content:center; gap:8px; padding:12px 12px calc(14px + env(safe-area-inset-bottom)); }
.lb__btn{ min-width:48px; height:48px; padding:0 12px; border-radius:14px; border:1px solid var(--dline-3); background:rgba(255,255,255,.06); color:var(--dtext);
  font:600 14px/1 var(--font); cursor:pointer; display:inline-grid; place-items:center; transition:background .2s, transform .15s; }
.lb__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.lb__btn:hover{ background:rgba(255,255,255,.14); }
.lb__btn:active{ transform:scale(.94); }
.lb__pct{ min-width:72px; font-variant-numeric:tabular-nums; }
@keyframes lbIn{ from{ opacity:0; } }
@keyframes lbPic{ from{ opacity:0; transform:scale(.96); } }

/* ---------- sign in / sign up ---------- */
.auth{ min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--cream); }
.auth__main{ display:grid; place-items:center; padding:40px 24px; }
.auth__box{ width:100%; max-width:430px; }
.auth__box > .logo{ margin-bottom:34px; }
.auth__title{ font-family:var(--display); font-size:clamp(32px,3vw,42px); font-weight:800; letter-spacing:-0.02em; line-height:1.02; margin:0; }
.auth__hint{ color:var(--body); margin-top:10px; font-size:15.5px; }
.auth__foot{ margin-top:24px; font-size:14.5px; color:var(--mute); text-align:center; }
.auth__foot a{ color:var(--ink); font-weight:650; text-decoration:underline; text-decoration-color:var(--lime-2); text-decoration-thickness:2px; text-underline-offset:4px; padding:12px 0; }
.auth__side{ position:relative; overflow:hidden; margin:14px; border-radius:30px; background:var(--f900); color:var(--dtext); padding:44px clamp(30px,4vw,60px);
  display:flex; flex-direction:column; }
.auth__side::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(700px 420px at 90% 0%,rgba(var(--lime-rgb),.16),transparent 70%); }
.auth__side::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(214,255,232,.14) 1px,transparent 1.2px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 80% 20%,#000,transparent 70%); mask-image:radial-gradient(ellipse at 80% 20%,#000,transparent 70%); }
.auth__side > *{ position:relative; z-index:1; }
.auth__side h2{ margin-top:auto; font-size:clamp(34px,3.4vw,56px); line-height:1; letter-spacing:-0.022em; }
.auth__side ul{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; font-size:16px; color:var(--dmute); }
.auth__side li{ display:flex; gap:12px; align-items:center; }
.auth__side .note{ margin-top:36px; font-size:13px; color:var(--ddim); }
.form{ margin-top:30px; }
.field{ margin-bottom:18px; }
.field__label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.field__hint{ font-size:13px; color:var(--mute); margin-top:7px; }
.input{ width:100%; height:52px; padding:0 16px; border-radius:15px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); font:500 16px/1 var(--font); outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.input:hover{ border-color:rgba(10,27,21,.3); }
.input:focus{ border-color:var(--ink); background:#fff; box-shadow:0 0 0 4px rgba(var(--lime-rgb),.55); }
.input::placeholder{ color:var(--faint); }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--body); cursor:pointer; }
.check input{ width:24px; height:24px; flex:0 0 24px; margin:0; accent-color:var(--ink); }
.alert{ display:flex; gap:10px; padding:15px 17px; border-radius:16px; font-size:14.5px; line-height:1.55; border:1px solid var(--line); background:var(--paper); }
.alert--warn{ background:var(--wait-soft); border-color:#EED8AC; color:#6B4700; }
.alert--danger{ background:var(--loss-soft); border-color:#F1C4C2; color:#8E1F1F; }
.alert--info{ background:var(--mint); border-color:var(--mint-2); color:var(--ink-2); }
.badge-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:11px; background:var(--lime); color:var(--ink); font-weight:650; font-size:13.5px; }
/* the auth pages' own pieces: a password's Show button, the links under the form, the side panel's bridges */
.auth__card .form{ margin-top:26px; }
.pw{ position:relative; }
.pw .input{ padding-right:84px; }
.pw__show{ position:absolute; right:4px; top:4px; height:44px; min-width:72px; padding:0 12px; border:0; border-radius:12px; background:transparent;
  color:var(--ink-2); font:600 14px/1 var(--font); cursor:pointer; }
.pw__show:hover{ background:rgba(10,27,21,.05); }
.auth__forgot{ display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:14px; font-weight:600;
  text-decoration:underline; text-decoration-color:var(--lime-2); text-decoration-thickness:2px; text-underline-offset:4px; }
.auth__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 18px; margin-top:6px; font-size:14px; color:var(--mute); }
.auth__links a{ display:inline-flex; align-items:center; min-height:44px; }
.auth__links a:hover{ color:var(--ink); }
.auth__side .auth__bridges{ margin:30px 0 0; gap:10px; }
.auth__bridges li{ gap:14px; padding:10px 14px 10px 10px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--dline);
  font-size:15px; color:var(--dtext); }
.auth__bridges .bflow__e{ width:34px; height:34px; border-radius:11px; font-size:10px; box-shadow:none; }
.auth__bridges .bflow__wire{ width:28px; background:rgba(214,255,232,.14); }
/* on a phone (no side panel): a dark band with the brand, the form on a card over its edge */
@media (max-width:1000px){
  .auth__main{ position:relative; isolation:isolate; place-items:start center; padding:0 16px 28px; }
  .auth__main::before{ content:""; position:absolute; z-index:-1; inset:0 0 auto; height:230px; background:
    radial-gradient(420px 220px at 20% 0%,rgba(var(--lime-rgb),.2),transparent 70%),
    radial-gradient(360px 240px at 100% 100%,rgba(52,211,153,.12),transparent 70%),var(--f950); }
  .auth__box{ max-width:480px; }
  .auth__box > .logo{ margin:20px 0 22px; color:var(--dtext); }
  .auth__card{ padding:26px 20px 22px; border-radius:26px; background:var(--paper); border:1px solid var(--line);
    box-shadow:0 30px 60px -34px rgba(6,17,13,.55); animation:riseT .6s var(--ease) both; }
  .auth__title{ font-size:clamp(30px,8vw,40px); }
}

/* ---------- the phone's own trial button (home) ---------- */
.mcta{ display:none; }
@media (max-width:760px){
  .mcta{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:80; display:flex; align-items:center;
    justify-content:space-between; gap:12px; padding:10px 10px 10px 16px; border-radius:18px; background:rgba(10,27,21,.94);
    color:var(--dtext); box-shadow:0 18px 40px -12px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transform:translateY(140%); visibility:hidden; transition:transform .45s var(--spring), visibility 0s .45s; }
  .mcta.is-on{ transform:none; visibility:visible; transition:transform .45s var(--spring); }
  .is-locked .mcta{ transform:translateY(140%); visibility:hidden; }
  .mcta b{ display:block; font-size:14.5px; }
  .mcta small{ color:var(--dmute); font-size:12px; }
}

/* ---------- motion: reveal on scroll (site.js) and the CSS-only entrance above the fold ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
.rv.is-in{ opacity:1; transform:none; }
.rv:target{ opacity:1; transform:none; transition:none; }   /* a #link's section: in place before the jump is measured */
.no-js .rv{ opacity:1; transform:none; }
/* the page heads show without waiting for the script: the LCP text is painted at once */
.in,.phero .rv{ opacity:1; transform:none; animation:rise .7s var(--ease) both; }
/* the headline and its line (the LCP text) move in but are never transparent, so they count as painted at once */
.hero .h1.in,.hero .lead.in,.phero h1.rv,.phero .lead.rv{ animation-name:riseT; }
.hero .lead.in,.phero .lead.rv{ animation-delay:.06s; }
.hero .btns.in,.phero .btns.rv,.fx.in{ animation-delay:.12s; }
.hero .pills.in,.phero .trust.rv,.phero .screen.rv{ animation-delay:.18s; }
.marquee.in{ animation-delay:.26s; }
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } }
@keyframes riseT{ from{ transform:translateY(14px); } }
/* below the fold: skipped by the first paint (a faster LCP); site.js lays each one out in idle time after load,
   so a fast scroll never meets a placeholder that then jumps to its real height. Never on the first screen. */
.lazy{ content-visibility:auto; contain-intrinsic-size:auto 900px; }
.lazy.is-laid{ content-visibility:visible; }

/* ---------- hero illustrations (.fx): one story per page, played in steps by site.js ----------
   <div class="screen fx fx--NAME" data-fx="LOOP_MS"> - each piece with data-at="MS" gets .on at that moment of the
   loop. The HTML is the finished picture: without script, or with less motion, it is shown as it is. With motion the
   pieces wait in their start state (.fx-up .fx-left .fx-pop .fx-fade .fx-grow) and move in on .on. [data-type] types
   its text inside an .fx-tw box (which keeps its final size), [data-count] counts up to its number,
   [data-cycle]="a|b" (text) and [data-cycle-cls]="x|y" (a class) change every loop. Plays only while on screen and
   while the tab is visible (.is-paused); a mouse tilts the card (.is-tilt, --px/--py). Each page keeps its own
   scene CSS; the shared pieces are .fx-st (a status chip that flips), .fx-wire (--h) (a connector with pulses),
   .fx-ring (a ripple) and .fx-hit (a lit edge). Only transform and opacity move. */
.fx{ position:relative; overflow:hidden; isolation:isolate; }
.fx[data-fx]{ transition:transform .7s var(--ease), opacity .9s var(--ease); transition-delay:0s; }
.fx[data-fx].is-tilt{ transform:perspective(1200px) rotateX(calc(var(--py,0) * -6deg)) rotateY(calc(var(--px,0) * 8deg)); }
.fx::before{ content:""; position:absolute; z-index:-1; left:10%; top:-25%; width:80%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--lime-rgb),.13),transparent); opacity:0; transition:opacity .5s;
  translate:calc(var(--px,0) * 70%) calc(var(--py,0) * 60%); }
.fx.is-tilt::before{ opacity:1; }
.fx::after{ content:""; position:absolute; z-index:5; top:-30%; bottom:-30%; left:0; width:34%; pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.045) 42%,rgba(var(--lime-rgb),.08) 52%,transparent 68%);
  transform:translateX(-160%) skewX(-14deg); animation:fxSheen 9s var(--ease) 1.2s infinite; }
@keyframes fxSheen{ 0%,72%{ transform:translateX(-160%) skewX(-14deg); } 100%{ transform:translateX(420%) skewX(-14deg); } }
.fx.is-paused *,.fx.is-paused *::before,.fx.is-paused *::after,.fx.is-paused::after{ animation-play-state:paused !important; }
.fx :is(.fx-up,.fx-left,.fx-pop,.fx-fade){ transition:opacity .45s var(--ease), transform .6s var(--spring); }
.fx .fx-grow{ transform-origin:0 50%; transition:transform .8s var(--ease), opacity .45s; }
/* a typed box: an invisible copy of the whole text keeps its size while the text is typed over it */
.fx-tw{ display:grid; }
.fx-tw::before{ content:attr(data-full); visibility:hidden; }
.fx-tw::before,.fx-tw > *{ grid-area:1 / 1; min-width:0; }
.fx .is-typing::after{ content:""; display:inline-block; width:.5em; height:1.05em; margin-left:2px; vertical-align:-.18em; background:var(--lime);
  animation:blink .9s steps(1) infinite; }
/* a status chip: the first word, then it flips to the second (the finished one) */
.fx-st{ display:inline-grid; justify-items:end; perspective:300px; }
.fx-st > *{ grid-area:1 / 1; padding:6px 8px; border-radius:8px; font:600 11px/1 var(--mono); font-style:normal; letter-spacing:.03em; white-space:nowrap;
  backface-visibility:hidden; transition:transform .55s var(--spring), opacity .3s; }
.fx-st > i{ color:var(--dmute); background:rgba(255,255,255,.07); opacity:0; transform:rotateX(-90deg); }
.fx-st > b{ color:var(--ink); background:var(--lime); }
/* a dashed connector; on .on its pulses run down it (or across it: .fx-wire--h). --len: its length */
.fx-wire{ position:relative; display:block; width:2px; height:var(--len,34px); margin:0 auto;
  background:repeating-linear-gradient(to bottom,rgba(var(--lime-rgb),.36) 0 5px,transparent 5px 10px); }
.fx-wire--h{ width:auto; height:2px; margin:0; background:repeating-linear-gradient(to right,rgba(var(--lime-rgb),.36) 0 5px,transparent 5px 10px); }
.fx-wire i{ position:absolute; inset:0; opacity:0; transform:translateY(-100%); }
.fx-wire--h i{ transform:translateX(-100%); }
.fx-wire i::after{ content:""; position:absolute; left:50%; bottom:0; width:9px; height:9px; margin:0 0 -4.5px -4.5px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 3px rgba(var(--lime-rgb),.2),0 0 16px 4px rgba(var(--lime-rgb),.55); }
.fx-wire i::before{ content:""; position:absolute; left:0; bottom:3px; width:2px; height:26px; background:linear-gradient(transparent,var(--lime)); }
.fx-wire--h i::after{ left:auto; right:0; bottom:50%; margin:0 -4.5px -4.5px 0; }
.fx-wire--h i::before{ left:auto; right:3px; bottom:0; width:26px; height:2px; background:linear-gradient(90deg,transparent,var(--lime)); }
.fx-wire.on i{ animation:fxRunV .85s var(--ease) both; }
.fx-wire--h.on i{ animation-name:fxRunH; }
.fx-wire.on i + i{ animation-delay:.17s; }
@keyframes fxRunV{ 0%{ opacity:0; transform:translateY(-100%); } 14%,86%{ opacity:1; } 100%{ opacity:0; transform:translateY(0); } }
@keyframes fxRunH{ 0%{ opacity:0; transform:translateX(-100%); } 14%,86%{ opacity:1; } 100%{ opacity:0; transform:translateX(0); } }
/* a ripple (place it inside the piece it rings), and a lit edge for the piece that fires */
.fx-ring{ position:absolute; inset:0; border-radius:inherit; border:1.5px solid var(--lime); opacity:0; pointer-events:none; }
.fx-ring.on{ animation:fxRing 1.3s var(--ease) both; }
@keyframes fxRing{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } }
.fx-hit{ position:relative; }
.fx-hit::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; border:1.5px solid var(--lime); pointer-events:none;
  box-shadow:0 0 26px -6px rgba(var(--lime-rgb),.7),inset 0 0 18px -10px rgba(var(--lime-rgb),.6); opacity:0; }
.fx-hit.on::after{ animation:fxHit 1.8s var(--ease) both; }
@keyframes fxHit{ 0%{ opacity:0; } 18%{ opacity:1; } 100%{ opacity:0; } }
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .fx .fx-up:not(.on){ opacity:0; transform:translateY(12px); }
  .fx .fx-left:not(.on){ opacity:0; transform:translateX(-18px); }
  .fx .fx-pop:not(.on){ opacity:0; transform:scale(.6); }
  .fx .fx-fade:not(.on){ opacity:0; }
  .fx .fx-grow:not(.on){ transform:scaleX(0); }
  .fx-st:not(.on) > i{ opacity:1; transform:none; }
  .fx-st:not(.on) > b{ opacity:0; transform:rotateX(90deg); }
  .fx.is-out :is(.fx-up,.fx-left,.fx-pop,.fx-fade,.fx-grow){ opacity:0; transition:opacity .45s ease; }
  .fx.is-reset,.fx.is-reset *,.fx.is-reset *::before,.fx.is-reset *::after{ transition:none !important; }
}
@media (max-width:480px){ .screen.fx{ padding:14px; border-radius:22px; } }

/* ---------- widths (the landing-page blocks, desktop first as they were written) ---------- */
@media (max-width:1180px){
  .bgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1100px){
  .swrow{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1000px){
  .sechead,.spot,.faq,.phero__grid,.sig,.duo{ grid-template-columns:minmax(0,1fr); }
  .sechead .lead{ justify-self:start; }
  .tl{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .tl--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tl::before,.tl::after{ display:none; }
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .auth{ grid-template-columns:minmax(0,1fr); }
  .auth__side{ display:none; }
  .spot__card{ order:2; }
  .posts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .bgrid,.calc__rows,.swrow{ grid-template-columns:1fr; }
  .bcard{ padding:22px 20px; }
  .bcard__price b{ font-size:42px; }
  .bcard__sub{ min-height:0; }
  .calc{ padding:22px 16px; border-radius:22px; }
  .calc__foot > div > b{ font-size:38px; }
  .calc__foot .btn{ width:100%; }
  .crow__acc button,.crow__tier{ height:44px; }
  .crow__acc button{ width:44px; }
  .crow__acc--tier{ grid-column:2 / -1; }        /* a MetaTrader plan's tier list: under its name, full width */
  .crow__acc--tier .crow__tier{ width:100%; }
}
@media (max-width:720px){
  .nav__in{ height:60px; }
  .h1{ font-size:clamp(34px,10.2vw,56px); font-stretch:100%; letter-spacing:-0.018em; }
  .h2,.phero h1,.hero .h1,.band h2{ font-stretch:100%; }
  .tile{ padding:22px; border-radius:24px; }
  /* steps on a phone: the number beside its words, one line joining them */
  .tl,.tl--3{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .tl::before{ display:block; left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; }
  .tl__step{ display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:16px; align-content:start; }
  .tl__n{ grid-row:span 3; width:56px; height:56px; border-radius:18px; font-size:26px; }
  .tl__step h3{ margin-top:4px; font-size:20px; }
  .tl__step p,.tl__chip{ grid-column:2; }
  .tl__chip{ justify-self:start; }
  .faq__card{ display:none; }
  .card--link{ padding:18px; }
  .sig__pts,.rmx__accs{ grid-template-columns:minmax(0,1fr); }
  .reads div{ grid-template-columns:minmax(0,1fr); }
  .reads span{ justify-self:start; }
  .rmx{ padding:16px; border-radius:24px; }
  .cards,.cards--2{ grid-template-columns:minmax(0,1fr); }
  .qa summary{ font-size:16.5px; padding:16px 2px; }
  .qa p{ padding:0 8px 22px 2px; }
  .fan{ height:230px; }
  .spot__card .fan{ height:270px; }
  .fan__main,.fan__f{ font-size:12px; padding:6px 9px 6px 6px; gap:6px; }
  .fan__main .bm,.fan__f .bm{ width:20px; height:20px; flex-basis:20px; font-size:8px; border-radius:6px; }
  .posts{ grid-template-columns:minmax(0,1fr); }
  .post-cta{ flex-direction:column; align-items:flex-start; }
  .toc ol{ columns:1; }
  .spot__card{ padding:16px; border-radius:24px; }
}
@media (hover:none){ .tile:hover,.card:hover{ transform:none; } }

/* ---------- less motion: everything still, reveals are a plain fade ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ transform:none; transition:opacity .5s ease; }
  .in,.phero .rv{ animation:none; }
  .tl::after{ transition:none; }
  .console__live i,.rmx__msg .caret,.fan .w-flow,.bflow__wire b,.hero__bg i,.band::before,.band::after,
  .term__on i,.tvbox__order em,.inflow__out em,.nav.is-open .nav__links a,.nav.is-open .nav__cta,
  .qa[open] > p,.lb[open],.lb[open] .lb__stage,.auth__card{ animation:none !important; }
  .wire i{ display:none; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; flex:1 1 auto; }
  .marquee__track[aria-hidden="true"]{ display:none; }
  .btn--lime::after{ display:none; }
  .bcard:hover,.swcard:hover,.card--link:hover,.card:hover,a.chip:hover{ transform:none; }
  .fx *,.fx *::before,.fx *::after{ animation:none !important; transition:none !important; }
  .fx::after,.fx-wire i{ display:none; }
}

/* ---------- product, pricing and comparison pages (hotfix313): the answer under the h1, a prose body, a side note ---------- */
.lp-answer{ max-width:780px; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid var(--dline-2); }
.lp .legal{ max-width:820px; margin:0 auto; }
.lp .legal h3{ margin-top:22px; }
.lp .note{ margin:18px 0; padding:14px 18px; border-radius:14px; background:var(--sand); font-size:15.5px; line-height:1.6; }
.lp .disclaimer{ max-width:820px; margin:40px auto 0; font-size:14px; color:var(--mute); line-height:1.6; }