/* ============================================================
   EAZYBOT — DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand: navy #262156 + cyan #03ACEF, sampled from the EazyBot logo */
  --ink:#141034;
  --ink-2:#1E1949;
  --ink-3:#2B2568;
  --paper:#F5F5FB;
  --white:#FFFFFF;
  --azure:#2B2568;        /* primary action = brand navy */
  --azure-dk:#1B1746;
  --cyan:#03ACEF;         /* brand accent, on dark */
  --cyan-ink:#0176AC;     /* brand accent, legible on light */
  --teal:#0FBF8F;
  --teal-dk:#0A9C74;
  --rose:#FF5C6C;
  --lilac:#B7B1E8;
  --muted:#6C6A92;
  --muted-lt:#9C99BC;
  --line:#E5E4F0;
  --line-dk:#2E2866;

  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(12,16,48,.06), 0 4px 12px rgba(12,16,48,.04);
  --shadow-md:0 2px 6px rgba(12,16,48,.06), 0 18px 44px rgba(12,16,48,.09);
  --shadow-lg:0 30px 80px rgba(12,16,48,.18);

  --maxw:1400px;
  --gut:clamp(16px,2.6vw,34px);

  --f-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:0}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.02em;line-height:1.2}
h4{font-size:1.02rem;letter-spacing:-.01em}
p{margin:0}

.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

:focus-visible{outline:3px solid var(--azure);outline-offset:3px;border-radius:4px}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.band{padding:clamp(64px,8vw,116px) 0}
.band--tight{padding:clamp(48px,5vw,72px) 0}
.band--dark{background:var(--ink);color:var(--white)}
.band--paper{background:var(--paper)}
.band--white{background:var(--white)}

.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;color:var(--azure);
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none}
.band--dark .eyebrow{color:var(--lilac)}

.lede{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--muted);max-width:56ch;line-height:1.62}
.band--dark .lede{color:#A9B0DA}

.sec-head{max-width:760px;margin-bottom:clamp(36px,4vw,56px)}
.sec-head p{margin-top:18px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--azure);color:#fff;box-shadow:0 8px 20px rgba(61,109,255,.28)}
.btn--primary:hover{background:var(--azure-dk);box-shadow:0 12px 28px rgba(61,109,255,.34)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(12,16,48,.03)}
.band--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.24)}
.band--dark .btn--ghost:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#EDEFFA}
.btn--sm{padding:9px 18px;font-size:.87rem}
.btn--block{width:100%}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(245,246,251,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{border-bottom-color:var(--line);background:rgba(245,246,251,.94)}
.nav__in{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.22rem;letter-spacing:-.045em}
.brand__mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,var(--azure) 0%,#6C4BFF 55%,var(--teal) 130%);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(61,109,255,.32)
}
.brand__mark span{
  display:block;width:11px;height:11px;border-radius:3px;
  border:2.5px solid #fff;border-bottom-color:transparent;border-right-color:transparent;
  transform:rotate(-45deg) translate(1px,1px)
}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:12px}
.nav__links a{
  padding:8px 14px;border-radius:var(--r-pill);font-size:.93rem;font-weight:500;color:var(--muted);
  transition:color .16s ease,background .16s ease
}
.nav__links a:hover{color:var(--ink);background:rgba(12,16,48,.05)}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:600;background:rgba(61,109,255,.1)}
.nav__spacer{flex:1}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__login{font-size:.93rem;font-weight:600;padding:9px 6px}
.nav__burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;justify-content:center}
.nav__burger span{display:block;width:16px;height:1.6px;background:var(--ink);position:relative}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:16px;height:1.6px;background:var(--ink)}
.nav__burger span::before{top:-5px}.nav__burger span::after{top:5px}

.drawer{display:none;border-top:1px solid var(--line);background:#fff;padding:14px var(--gut) 22px}
.drawer.is-open{display:block}
.drawer a{display:block;padding:12px 2px;font-weight:600;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:16px}

@media (max-width:940px){
  .nav__links,.nav__login{display:none}
  .nav__burger{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:
    radial-gradient(900px 460px at 88% -8%, rgba(108,75,255,.30), transparent 62%),
    radial-gradient(760px 420px at 6% 106%, rgba(15,191,143,.16), transparent 60%),
    var(--ink);
  color:#fff;position:relative;overflow:hidden;
  padding:clamp(56px,7vw,92px) 0 clamp(64px,7vw,96px)
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 46px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%)
}
.hero__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(30px,3.6vw,54px);align-items:start
}
.hero h1{margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero__lede{font-size:clamp(1.04rem,1.5vw,1.2rem);color:#A9B0DA;max-width:50ch;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__note{
  margin-top:20px;font-size:.84rem;color:#7C84B4;display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.hero__note b{color:#C3C9EE;font-weight:600}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;box-shadow:0 0 0 3px rgba(15,191,143,.18)}

.pill-tag{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px 6px 8px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#C3C9EE;margin-bottom:26px
}
.pill-tag b{color:var(--teal);font-weight:600}

/* ---- Signature: the cover ladder instrument ---- */
.ladder{
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.ladder__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03)
}
.ladder__pair{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.86rem;font-weight:500}
.ladder__pair .live{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(15,191,143,.5)}50%{opacity:.75;box-shadow:0 0 0 6px rgba(15,191,143,0)}}
.ladder__state{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(61,109,255,.18);color:#A7BEFF;border:1px solid rgba(61,109,255,.34);
  transition:all .3s ease
}
.ladder__state[data-tone="win"]{background:rgba(15,191,143,.18);color:#6FE3C1;border-color:rgba(15,191,143,.38)}
.ladder__state[data-tone="risk"]{background:rgba(255,92,108,.15);color:#FF9AA5;border-color:rgba(255,92,108,.34)}

.ladder__body{position:relative;padding:16px 18px 6px}
.rung{
  display:grid;grid-template-columns:74px 1fr 78px;align-items:center;gap:12px;
  height:38px;position:relative
}
.rung__price{font-family:var(--f-mono);font-size:.79rem;color:#767EB0;transition:color .35s ease;font-variant-numeric:tabular-nums}
.rung__track{position:relative;height:1px;background:rgba(255,255,255,.1);border-radius:2px}
.rung__track::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(0);transform-origin:left;
  width:100%;height:2px;border-radius:2px;background:rgba(61,109,255,.55);
  transition:transform .5s cubic-bezier(.4,0,.2,1)
}
.rung__tag{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;color:#5C6396;text-align:right;
  transition:color .35s ease
}
.rung__dot{
  position:absolute;left:80px;top:50%;transform:translate(-50%,-50%) scale(.55);
  width:9px;height:9px;border-radius:50%;background:#3A4180;
  transition:all .4s cubic-bezier(.34,1.4,.64,1)
}
.rung.is-filled .rung__track::before{transform:translateY(-50%) scaleX(1)}
.rung.is-filled .rung__price{color:#E7EAFB}
.rung.is-filled .rung__tag{color:#A7BEFF}
.rung.is-filled .rung__dot{background:var(--azure);transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 4px rgba(61,109,255,.22)}
.rung--tp .rung__track::before{background:rgba(15,191,143,.6)}
.rung--tp.is-filled .rung__dot{background:var(--teal);box-shadow:0 0 0 4px rgba(15,191,143,.24)}
.rung--tp.is-filled .rung__tag{color:#6FE3C1}

/* moving price marker */
.marker{
  position:absolute;left:14px;right:14px;height:0;
  transition:top .95s cubic-bezier(.45,.05,.35,1);pointer-events:none;z-index:3
}
.marker__line{
  position:absolute;left:66px;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.14));
}
.marker__chip{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;color:var(--ink);
  background:#fff;padding:2px 6px;border-radius:5px;font-variant-numeric:tabular-nums
}
/* average entry line */
.avgline{
  position:absolute;left:14px;right:14px;height:0;z-index:2;
  transition:top .8s cubic-bezier(.4,0,.2,1),opacity .4s ease;opacity:0
}
.avgline.is-on{opacity:1}
.avgline__line{position:absolute;left:66px;right:0;top:0;border-top:1.5px dashed rgba(15,191,143,.75)}
.avgline__chip{
  position:absolute;right:0;top:-9px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;
  color:#0B2A22;background:var(--teal);padding:2px 7px;border-radius:5px;font-weight:600
}

.ladder__foot{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)
}
.lstat{padding:13px 16px;border-right:1px solid rgba(255,255,255,.08)}
.lstat:last-child{border-right:0}
.lstat__k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6B73A6}
.lstat__v{font-family:var(--f-mono);font-size:1.02rem;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.lstat__v[data-tone="teal"]{color:var(--teal)}
.lstat__v[data-tone="rose"]{color:var(--rose)}

.ladder__cap{
  font-size:.76rem;color:#6B73A6;text-align:center;margin-top:14px;line-height:1.5
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
}

/* ============================================================
   MARQUEE / LOGO ROW
   ============================================================ */
.press{border-top:1px solid rgba(255,255,255,.1);padding-top:30px;margin-top:clamp(48px,6vw,72px);position:relative;z-index:2}
.press__lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#6B73A6;margin-bottom:18px}
.press__row{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);align-items:center}
.press__row span{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:rgba(255,255,255,.42)}

/* ============================================================
   CARDS & GRIDS
   ============================================================ */
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:940px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#D2D8EE}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.95rem;line-height:1.6}
.card__ico{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(61,109,255,.1);color:var(--azure)
}
.card__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card__ico[data-tone="teal"]{background:rgba(15,191,143,.12);color:var(--teal-dk)}
.card__ico[data-tone="rose"]{background:rgba(255,92,108,.1);color:var(--rose)}

.card--dark{background:var(--ink-2);border-color:var(--line-dk);color:#fff}
.card--dark p{color:#A9B0DA}

/* ============================================================
   CYCLE / STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.step{padding:30px 26px 30px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step__n{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;color:var(--azure);
  display:block;margin-bottom:14px
}
.step h4{margin-bottom:9px;font-size:1.08rem}
.step p{color:var(--muted);font-size:.92rem;line-height:1.58;padding-right:18px}
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--azure);
  transition:width .7s cubic-bezier(.4,0,.2,1)
}
.step.in::before{width:100%}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .step:last-child{border-bottom:0}
}

/* ============================================================
   SPLIT FEATURE
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.checklist{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.checklist li{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;font-size:.97rem;line-height:1.55}
.checklist svg{width:20px;height:20px;margin-top:2px;flex:none;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.band--dark .checklist li{color:#D5D9F0}

/* mini panel used in split sections */
.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden
}
.panel__hd{
  padding:14px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--f-mono);font-size:.74rem;color:var(--muted);letter-spacing:.04em
}
.panel__hd b{color:var(--ink);font-weight:600}
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:11px 18px;text-align:left;font-size:.86rem;border-bottom:1px solid var(--line)}
.ptable th{
  font-family:var(--f-mono);font-weight:500;font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-lt);background:#FAFBFF
}
.ptable td{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.ptable td:first-child{font-family:var(--f-body);font-weight:600}
.ptable tr:last-child td{border-bottom:0}
.pos{color:var(--teal-dk);font-weight:600}
.neg{color:var(--rose);font-weight:600}

/* ============================================================
   PRICING
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:1040px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tiers{grid-template-columns:1fr}}

.tier{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 28px;display:flex;flex-direction:column;position:relative;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier--feat{border-color:var(--azure);box-shadow:0 20px 50px rgba(61,109,255,.16)}
.tier__flag{
  position:absolute;top:-11px;left:24px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--azure);color:#fff;padding:4px 11px;border-radius:var(--r-pill)
}
.tier__name{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.03em}
.tier__access{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-lt);margin-top:5px
}
.tier__price{display:flex;align-items:baseline;gap:7px;margin-top:20px}
.tier__price .amt{font-family:var(--f-mono);font-size:2.3rem;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tier__price .cur{font-family:var(--f-mono);font-size:.82rem;color:var(--muted)}
.tier__sub{font-size:.83rem;color:var(--muted);margin-top:6px}
.ssf{
  margin-top:18px;padding:13px 14px;border-radius:var(--r-md);
  background:#F7F8FD;border:1px solid var(--line)
}
.ssf__k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-lt)}
.ssf__v{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.ssf__v b{font-family:var(--f-mono);font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
.ssf__v span{font-size:.8rem;color:var(--muted)}
.ssf__ex{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);margin-top:7px;font-variant-numeric:tabular-nums}
.save{
  display:inline-block;margin-top:11px;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-dk);background:rgba(15,191,143,.12);padding:4px 10px;border-radius:var(--r-pill)
}
.tier__list{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px;flex:1}
.tier__list li{display:grid;grid-template-columns:18px 1fr;gap:11px;font-size:.9rem;align-items:center;color:var(--ink)}
.tier__list li svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tier__list li b{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}

/* included-in-all feature groups */
.fgroup{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.fgroup h4{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azure);margin-bottom:18px;font-weight:500
}
.fgroup ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.fgroup li{font-size:.91rem;line-height:1.5;color:var(--muted);padding-left:16px;position:relative}
.fgroup li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:1px;background:var(--lilac)}
.fgroup li b{color:var(--ink);font-weight:600}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;gap:20px
}
.quote p{font-size:1rem;line-height:1.6}
.quote__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote__av{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--azure),#6C4BFF);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;font-family:var(--f-display)
}
.quote__meta strong{display:block;font-size:.9rem}
.quote__meta span{font-family:var(--f-mono);font-size:.7rem;color:var(--muted-lt);letter-spacing:.05em}

/* ============================================================
   STAT STRIP
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats div{background:#fff;padding:26px 22px}
.stats .k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-lt)}
.stats .v{font-family:var(--f-mono);font-size:1.9rem;font-weight:600;letter-spacing:-.04em;margin-top:8px;font-variant-numeric:tabular-nums}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.02em
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 60px 24px 0;color:var(--muted);font-size:.96rem;line-height:1.65}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{
  background:
    radial-gradient(700px 340px at 82% 8%, rgba(108,75,255,.34), transparent 62%),
    radial-gradient(600px 320px at 10% 96%, rgba(15,191,143,.18), transparent 62%),
    var(--ink);
  color:#fff;border-radius:clamp(20px,3vw,32px);
  padding:clamp(44px,6vw,76px) clamp(28px,5vw,64px);
  position:relative;overflow:hidden
}
.cta h2{max-width:16ch;margin-bottom:20px}
.cta .lede{color:#A9B0DA}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ============================================================
   FORMS
   ============================================================ */
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:.83rem;font-weight:600}
.field input,.field select,.field textarea{
  font:inherit;font-size:.94rem;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:#fff;color:var(--ink);width:100%;
  transition:border-color .16s ease,box-shadow .16s ease
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--azure);box-shadow:0 0 0 3px rgba(61,109,255,.15)
}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.78rem;color:var(--muted-lt)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm)}
.formnote{
  margin-top:14px;font-size:.79rem;color:var(--muted);line-height:1.5
}

.contactline{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.contactline:last-of-type{border-bottom:0}
.contactline__ico{
  width:38px;height:38px;border-radius:11px;background:rgba(61,109,255,.1);color:var(--azure);
  display:grid;place-items:center;flex:none
}
.contactline__ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contactline h4{margin-bottom:4px}
.contactline p,.contactline a{color:var(--muted);font-size:.93rem}
.contactline a:hover{color:var(--azure)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:#fff;padding:clamp(52px,6vw,76px) 0 34px}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot h5{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6B73A6;font-weight:500;margin:0 0 16px
}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.foot a{color:#B9BFE2;font-size:.92rem}
.foot a:hover{color:#fff}
.foot__mission{color:#8E96C6;font-size:.93rem;line-height:1.6;max-width:34ch;margin-top:16px}
.social{display:flex;gap:9px;margin-top:18px}
.social a{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  transition:background .18s ease,transform .18s ease
}
.social a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.social svg{width:16px;height:16px;fill:#D5D9F0}
.foot__bottom{
  margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:.83rem;color:#6B73A6
}
.risk{
  margin-top:26px;padding:18px 20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  font-size:.79rem;line-height:1.6;color:#8E96C6
}
.risk b{color:#C3C9EE;display:block;margin-bottom:5px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ============================================================
   PAGE ROUTING + REVEAL
   ============================================================ */
.page{display:none}
.page.is-active{display:block}

.pagehead{
  background:
    radial-gradient(700px 340px at 85% -20%, rgba(108,75,255,.28), transparent 62%),
    var(--ink);
  color:#fff;padding:clamp(56px,7vw,92px) 0 clamp(56px,6vw,80px)
}
.pagehead h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:20px}
.pagehead .lede{color:#A9B0DA}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   BRAND REFINEMENTS  (logo lockup, cyan accent, dark contexts)
   ============================================================ */

/* --- FIX: ghost buttons were inheriting dark ink on dark backgrounds --- */
.hero .btn--ghost,
.cta .btn--ghost,
.pagehead .btn--ghost,
.band--dark .btn--ghost,
.on-dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.hero .btn--ghost:hover,
.cta .btn--ghost:hover,
.pagehead .btn--ghost:hover,
.band--dark .btn--ghost:hover,
.on-dark .btn--ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.12)}

/* primary button = brand navy; cyan reserved for accent */
.btn--primary{box-shadow:0 8px 20px rgba(43,37,104,.28)}
.btn--primary:hover{box-shadow:0 12px 28px rgba(43,37,104,.36)}
.hero .btn--primary,.cta .btn--primary{background:var(--cyan);color:#04263A;box-shadow:0 8px 24px rgba(3,172,239,.34)}
.hero .btn--primary:hover,.cta .btn--primary:hover{background:#2CBEF5;box-shadow:0 12px 32px rgba(3,172,239,.42)}

/* cyan accents on light surfaces use the legible tint */
.eyebrow{color:var(--cyan-ink)}
.band--dark .eyebrow,.hero .eyebrow,.pagehead .eyebrow{color:var(--cyan)}
.step__n,.fgroup h4{color:var(--cyan-ink)}
.card__ico{background:rgba(3,172,239,.11);color:var(--cyan-ink)}
.tier__flag{background:var(--azure)}
.tier--feat{border-color:var(--cyan);box-shadow:0 20px 50px rgba(3,172,239,.18)}
.step::before{background:var(--cyan)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(3,172,239,.18)}

/* --- logo lockup replaces the old CSS mark --- */
.brand{gap:9px}
.brand__mark{
  width:34px;height:34px;border-radius:0;background:none;box-shadow:none;flex:none;
  display:block
}
.brand__mark img{width:100%;height:100%;object-fit:contain}
.brand__wm{height:19px;width:auto;display:block}
.brand--lg .brand__mark{width:44px;height:44px}
.brand--lg .brand__wm{height:25px}

/* ============================================================
   HERO: SPOT / FUTURES SEGMENTED CONTROL
   ============================================================ */
.segwrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.seg{
  display:inline-flex;padding:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)
}
.seg button{
  border:0;background:transparent;color:#A9A5D0;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  padding:8px 18px;border-radius:var(--r-pill);transition:all .22s ease
}
.seg button[aria-selected="true"]{background:var(--cyan);color:#04263A;font-weight:600}
.seg button:hover:not([aria-selected="true"]){color:#fff}
.segnote{font-size:.8rem;color:#7E7AAE}

/* futures-mode colouring for the instrument */
.rung--short .rung__track::before{background:rgba(255,92,108,.55)}
.rung--short.is-filled .rung__dot{background:var(--rose);box-shadow:0 0 0 4px rgba(255,92,108,.22)}
.rung--short.is-filled .rung__tag{color:#FF9AA5}
.rung--liq .rung__tag{color:#FF6E7C}
.rung--liq .rung__track{background:rgba(255,92,108,.25)}

/* ============================================================
   TWO-MARKET SPLIT CARDS
   ============================================================ */
.mktcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease
}
.mktcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mktcard__hd{padding:26px 28px 22px;border-bottom:1px solid var(--line);position:relative}
.mktcard__hd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cyan)}
.mktcard--fut .mktcard__hd::before{background:var(--rose)}
.mktcard__kind{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-lt);margin-bottom:9px
}
.mktcard__bd{padding:24px 28px 28px;flex:1}
.mktcard__bd p{color:var(--muted);font-size:.95rem;line-height:1.6}
.mktcard ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px}
.mktcard ul li{font-size:.91rem;padding-left:17px;position:relative;color:var(--ink)}
.mktcard ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--cyan)}
.mktcard--fut ul li::before{background:var(--rose)}
.warnstrip{
  margin-top:20px;padding:12px 14px;border-radius:var(--r-md);
  background:#FFF3F4;border:1px solid #FFD9DD;color:#8A3A43;font-size:.82rem;line-height:1.5
}

/* ============================================================
   EXCHANGE GRID / CHIPS
   ============================================================ */
.exgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.exgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.excell{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:border-color .2s ease,transform .2s ease
}
.excell:hover{border-color:var(--cyan);transform:translateY(-2px)}
.excell b{font-size:.96rem;font-weight:600}
.excell span{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-lt);border:1px solid var(--line);padding:3px 8px;border-radius:var(--r-pill)
}
.excell span[data-m="both"]{color:var(--cyan-ink);border-color:rgba(3,172,239,.4)}
.excell span[data-m="fut"]{color:#B0434F;border-color:#F2C9CE}

.chiprow{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  font-size:.84rem;color:#D2CFEC
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--cyan);font-style:normal;flex:none}

/* ============================================================
   DARK STAT BAR
   ============================================================ */
.dstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border-radius:var(--r-lg);overflow:hidden}
.dstats > div{background:var(--ink-2);padding:26px 22px}
.dstats .k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#7E7AAE}
.dstats .v{font-family:var(--f-mono);font-size:1.85rem;font-weight:600;letter-spacing:-.04em;margin-top:8px;font-variant-numeric:tabular-nums;color:#fff}
@media (max-width:820px){.dstats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   AUDIENCE / SECURITY / APP / AFFILIATE
   ============================================================ */
.aud{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  border-top:3px solid var(--cyan)
}
.aud__k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-lt);margin-bottom:12px}
.aud p{color:var(--muted);font-size:.93rem;line-height:1.58;margin-top:9px}

.appband{
  background:linear-gradient(150deg,var(--ink-2),var(--ink));
  border:1px solid var(--line-dk);border-radius:clamp(20px,3vw,30px);
  padding:clamp(34px,4vw,54px);color:#fff
}
.storebtns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.storebtn{
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:var(--r-md);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:background .2s ease
}
.storebtn:hover{background:rgba(255,255,255,.16)}
.storebtn small{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#9C98C8}
.storebtn b{display:block;font-size:.94rem;font-weight:600;margin-top:1px}

.tiernote{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px
}
@media (max-width:760px){.tiernote{grid-template-columns:1fr}}
.tiernote div{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-md);padding:18px
}
.tiernote .lvl{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cyan)}
.tiernote .pctv{font-family:var(--f-mono);font-size:1.6rem;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.tiernote p{font-size:.83rem;color:#9C98C8;margin-top:5px}

/* ============================================================
   BIG NUMBER STATS BAND
   ============================================================ */
.bignums{text-align:center}
.bignums h2{max-width:22ch;margin:0 auto clamp(38px,5vw,58px)}
.bignums__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,34px)}
@media (max-width:820px){.bignums__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 20px}}
.bignum .v{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.05em;line-height:1;
  font-size:clamp(2.6rem,5.2vw,4.1rem);font-variant-numeric:tabular-nums;
  color:var(--ink)
}
.bignum .v span{color:var(--cyan-ink)}
.bignum .k{
  margin-top:14px;font-size:.93rem;color:var(--muted);line-height:1.45;
  max-width:20ch;margin-left:auto;margin-right:auto
}
.bignums__note{margin-top:clamp(30px,4vw,44px);font-size:.79rem;color:var(--muted-lt)}

/* ============================================================
   VISUAL STEP CARDS
   ============================================================ */
.stepcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:980px){.stepcards{grid-template-columns:1fr}}
.stepcard{
  background:linear-gradient(180deg,#FBFBFE 0%,#F1F1FA 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.stepcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#D8D6EC}
.stepcard__hd{padding:28px 28px 0}
.stepcard__n{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-ink);display:block;margin-bottom:12px
}
.stepcard h3{font-size:clamp(1.15rem,1.5vw,1.32rem);margin-bottom:11px}
.stepcard p{color:var(--muted);font-size:.93rem;line-height:1.58}
.stepcard .btn{margin-top:20px;align-self:flex-start}
.stepcard__vis{
  margin-top:26px;position:relative;min-height:250px;overflow:hidden;flex:1
}

/* vis 1 — floating exchange tiles */
.extiles{position:absolute;inset:0}
.extile{
  position:absolute;width:62px;height:62px;border-radius:18px;background:#fff;
  box-shadow:0 6px 18px rgba(20,16,52,.10);display:grid;place-items:center;
  animation:float 6s ease-in-out infinite
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.extile .exmark{width:34px;height:34px;border-radius:10px}
.extile:nth-child(1){left:12%;top:16%;animation-delay:0s}
.extile:nth-child(2){left:40%;top:4%;animation-delay:.7s}
.extile:nth-child(3){left:68%;top:20%;animation-delay:1.4s}
.extile:nth-child(4){left:6%;top:52%;animation-delay:2.1s}
.extile:nth-child(5){left:36%;top:44%;animation-delay:.4s}
.extile:nth-child(6){left:64%;top:58%;animation-delay:1.1s}
.extile:nth-child(7){left:20%;top:82%;animation-delay:1.8s}
.extile:nth-child(8){left:50%;top:84%;animation-delay:2.5s}

/* vis 2 — stacked engine cards */
.botstack{position:absolute;left:28px;right:-10px;top:10px}
.botstack__c{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 8px 24px rgba(20,16,52,.09);margin-bottom:-4px
}
.botstack__c:nth-child(1){opacity:.5;transform:scale(.94);transform-origin:left top}
.botstack__c:nth-child(2){opacity:.75;transform:scale(.97);transform-origin:left top}
.botstack__c:nth-child(3){position:relative;z-index:2}
.botstack__t{display:flex;align-items:center;gap:9px}
.botstack__t b{font-size:.94rem}
.botstack__pill{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(3,172,239,.12);color:var(--cyan-ink);padding:3px 8px;border-radius:var(--r-pill)
}
.botstack__c p{font-size:.81rem;color:var(--muted);margin-top:7px;line-height:1.45}
.botstack__tags{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.botstack__tags span{
  font-size:.68rem;color:var(--muted);border:1px solid var(--line);
  padding:3px 8px;border-radius:6px;background:#FAFAFE
}

/* vis 3 — live bot rows */
.botrows{position:absolute;left:28px;right:-10px;top:10px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(20,16,52,.09)}
.botrow{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line)}
.botrow:last-child{border-bottom:0}
.botrow__coin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.62rem;font-weight:700;font-family:var(--f-display);flex:none}
.botrow__pair{font-size:.87rem;font-weight:600;flex:1}
.botrow__side{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px
}
.botrow__side[data-s="long"]{background:rgba(15,191,143,.14);color:var(--teal-dk)}
.botrow__side[data-s="short"]{background:rgba(255,92,108,.13);color:#B0434F}
.botrow__side[data-s="hedge"]{background:rgba(3,172,239,.13);color:var(--cyan-ink)}
.botrow__v{font-family:var(--f-mono);font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--teal-dk)}

/* ============================================================
   EXCHANGE MARKS
   ============================================================ */
.exmark{
  width:32px;height:32px;border-radius:9px;flex:none;
  display:grid;place-items:center;color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.86rem;letter-spacing:-.03em
}
.exmark[data-x="binance"]{background:#F0B90B;color:#181A20}
.exmark[data-x="binanceus"]{background:#F0B90B;color:#181A20}
.exmark[data-x="bybit"]{background:#17181E;color:#F7A600}
.exmark[data-x="okx"]{background:#0E0E0E}
.exmark[data-x="kucoin"]{background:#01BC8D}
.exmark[data-x="kraken"]{background:#7132F5}
.exmark[data-x="coinbase"]{background:#0052FF}
.exmark[data-x="more"]{background:#E5E4F0;color:var(--muted)}

.excell{gap:12px}
.excell__l{display:flex;align-items:center;gap:12px;min-width:0}
.excell__l b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   FREE TRIAL BAND
   ============================================================ */
.trialband{
  background:
    radial-gradient(600px 300px at 88% 10%, rgba(3,172,239,.28), transparent 62%),
    linear-gradient(140deg,var(--ink-2),var(--ink));
  border:1px solid var(--line-dk);border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,40px);color:#fff;
  display:grid;grid-template-columns:1.15fr 1fr 1fr auto;gap:clamp(22px,3vw,38px);align-items:center
}
@media (max-width:1040px){.trialband{grid-template-columns:1fr 1fr;row-gap:28px}}
@media (max-width:600px){.trialband{grid-template-columns:1fr}}
.trialband__badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);background:rgba(3,172,239,.14);border:1px solid rgba(3,172,239,.34);
  padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px
}
.trialband h3{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.035em;line-height:1.05}
.trialband h3 em{font-style:normal;color:var(--cyan)}
.trialband p{color:#A9A5D0;font-size:.9rem;line-height:1.55;margin-top:10px;max-width:34ch}
.trialspec{border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
.trialspec .k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7E7AAE}
.trialspec .v{font-family:var(--f-mono);font-size:1.5rem;font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.trialspec ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px}
.trialspec ul li{font-size:.85rem;color:#C8C5E4}
@media (max-width:600px){.trialspec{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}}

/* ============================================================
   SIX-TIER GRID
   ============================================================ */
.tiers6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:1040px){.tiers6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiers6{grid-template-columns:1fr}}
.tier__unlim{color:var(--cyan-ink)}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmpwrap{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow-x:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-sm)
}
.cmp{width:100%;min-width:920px;border-collapse:collapse}
.cmp th,.cmp td{padding:14px 14px;text-align:center;border-bottom:1px solid var(--line);font-size:.88rem}
.cmp thead th{
  background:#FAFAFE;vertical-align:bottom;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:2
}
.cmp .rowlab{
  text-align:left;font-weight:600;font-size:.88rem;
  position:sticky;left:0;background:#fff;z-index:1;min-width:210px;
  border-right:1px solid var(--line)
}
.cmp thead .rowlab{background:#FAFAFE;z-index:3}
.cmp .tname{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;display:block}
.cmp .tprice{font-family:var(--f-mono);font-size:1.15rem;font-weight:600;display:block;margin-top:6px;font-variant-numeric:tabular-nums}
.cmp .tunit{font-family:var(--f-mono);font-size:.62rem;color:var(--muted-lt);display:block;margin-top:3px;letter-spacing:.08em;text-transform:uppercase}
.cmp td{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.cmp td.rowlab{font-family:var(--f-body)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .col-pop{background:rgba(3,172,239,.05)}
.cmp thead .col-pop{background:rgba(3,172,239,.10)}
.cmp .yes svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cmp .no{color:var(--muted-lt)}
.cmp .grouprow td{
  background:#F7F7FC;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);text-align:left;font-weight:500
}
.cmpnote{font-size:.79rem;color:var(--muted-lt);margin-top:14px}
.scrollhint{
  display:none;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-lt);margin-bottom:10px
}
@media (max-width:980px){.scrollhint{display:block}}

/* ============================================================
   FIX: CYCLE STATE COLUMNS
   The old version drew one rule across the whole row and clipped it
   with calc(100% - 18px), and used a right border as the divider —
   so the rule gaps never lined up with the text, and column text sat
   flush against the divider. Each column now owns its own rule and
   the columns are separated by a real gap instead.
   ============================================================ */
.steps{
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(20px,2.6vw,36px);row-gap:0;border-top:0
}
.step{
  padding:26px 0 0;border-right:0;border-bottom:0;
  border-top:1px solid var(--line)
}
.step:last-child{border-right:0}
.step::before{top:-1px;left:0;width:0;height:2px;background:var(--cyan)}
.step.in::before{width:100%}
.step p{padding-right:0}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;row-gap:0}
  .step{border-right:0;border-bottom:0;border-top:1px solid var(--line);padding:24px 0 28px}
  .step:last-child{padding-bottom:0}
}

/* ============================================================
   FIX: ABOUT FACT GRID
   Long values ("Non-custodial") were wrapping mid-word inside a
   4-up mono grid with overflow:hidden, so the second line was
   clipped. Now 2-up, display face, sized to fit, wrapping allowed.
   ============================================================ */
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats div{padding:24px 22px;min-width:0}
.stats .k{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-lt);line-height:1.4
}
.stats .v{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.45rem,2.2vw,1.9rem);letter-spacing:-.035em;line-height:1.15;
  margin-top:10px;overflow-wrap:anywhere;hyphens:none;color:var(--ink)
}
@media (max-width:420px){.stats{grid-template-columns:1fr}}


/* ============================================================
   EXCHANGE CARDS  (replaces the cramped inline .excell row)
   Old version put the name and the market pill on one line with
   space-between, so long names had to truncate. Stacking them
   removes the competition for horizontal space entirely.
   Note: the old `.excell span` selector was matching EVERY span
   inside the cell, including the wrapper and the logo tile, which
   is what gave the names a pill outline and mono uppercase.
   ============================================================ */
.exch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1040px){.exch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.exch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.exch-grid{grid-template-columns:1fr}}

.exch{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.exch:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.exch__name{
  display:block;margin-top:16px;font-size:1rem;font-weight:600;letter-spacing:-.015em;
  color:var(--ink);line-height:1.25
}
.exch__tag{
  display:inline-block;margin-top:10px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:4px 9px;border-radius:var(--r-pill);
  white-space:nowrap
}
.exch__tag[data-m="both"]{color:var(--cyan-ink);border-color:rgba(3,172,239,.38);background:rgba(3,172,239,.06)}

.exlogo{
  width:44px;height:44px;border-radius:13px;flex:none;
  display:grid;place-items:center;overflow:hidden
}
.exlogo svg{width:23px;height:23px;fill:currentColor}
.exlogo i{
  font-style:normal;font-family:var(--f-display);font-weight:800;
  font-size:.82rem;letter-spacing:-.02em;color:currentColor
}
.exlogo[data-x="binance"]{background:rgba(240,185,11,.16);color:#B07D06}
.exlogo[data-x="binanceus"]{background:rgba(240,185,11,.16);color:#B07D06}
.exlogo[data-x="bybit"]{background:#F1F1F5;color:#17181E}
.exlogo[data-x="okx"]{background:#F1F1F5;color:#0E0E0E}
.exlogo[data-x="kucoin"]{background:rgba(1,188,141,.15);color:#018F6C}
.exlogo[data-x="kraken"]{background:rgba(113,50,245,.13);color:#6528E0}
.exlogo[data-x="coinbase"]{background:rgba(0,82,255,.12);color:#0052FF}

/* floating tiles in step card 1 reuse the same marks */
.extile{width:64px;height:64px}
.extile .exlogo{width:40px;height:40px;border-radius:12px}
.extile .exlogo svg{width:21px;height:21px}


/* ============================================================
   HELP CENTRE
   ============================================================ */
.hc-search{position:relative;max-width:560px;margin-top:30px}
.hc-search input{
  width:100%;font:inherit;font-size:1rem;padding:16px 18px 16px 50px;
  border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;
  transition:border-color .18s ease,background .18s ease
}
.hc-search input::placeholder{color:#8A86B8}
.hc-search input:focus{outline:none;border-color:var(--cyan);background:rgba(255,255,255,.14)}
.hc-search svg{
  position:absolute;left:19px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;stroke:#8A86B8;fill:none;stroke-width:2;stroke-linecap:round
}
.hc-count{margin-top:14px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;color:#8A86B8}

.hc-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1040px){.hc-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.hc-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.hc-cats{grid-template-columns:1fr}}
.hc-cat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;display:flex;flex-direction:column;gap:0;text-align:left;
  cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.hc-cat-card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.hc-cat-card__ico{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(3,172,239,.11);color:var(--cyan-ink);margin-bottom:14px
}
.hc-cat-card__ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hc-cat-card b{display:block;font-size:.97rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.hc-cat-card span{
  display:block;margin-top:7px;font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted-lt)
}

.hc-group{margin-bottom:clamp(34px,4vw,50px);scroll-margin-top:90px}
.hc-group__hd{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
.hc-group h3{font-size:clamp(1.25rem,1.9vw,1.55rem)}
.hc-group__n{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-lt)}
.hc-group__lede{color:var(--muted);font-size:.93rem;margin-bottom:16px;max-width:60ch}
.hc-group .faq{border-top:1px solid var(--line)}
.hc-group.is-hidden{display:none}
.hc-q.is-hidden{display:none}

.hc-empty{
  display:none;text-align:center;padding:56px 20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)
}
.hc-empty.is-on{display:block}
.hc-empty h3{margin-bottom:10px}
.hc-empty p{color:var(--muted);font-size:.95rem}

.hc-contact{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px
}
@media (max-width:820px){.hc-contact{grid-template-columns:1fr}}
.hc-contact a{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  display:block;transition:border-color .2s ease,transform .2s ease
}
.hc-contact a:hover{border-color:var(--cyan);transform:translateY(-3px)}
.hc-contact b{display:block;font-size:1rem;font-weight:600;margin-bottom:6px}
.hc-contact p{color:var(--muted);font-size:.89rem;line-height:1.5}

.hc-note{
  background:#FFF8E9;border:1px solid #F0DFB8;border-radius:var(--r-md);
  padding:14px 16px;font-size:.85rem;line-height:1.55;color:#7A6234;margin-top:14px
}
.hc-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.86rem}
.hc-table th,.hc-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
.hc-table th{
  font-family:var(--f-mono);font-weight:500;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-lt)
}
.hc-table td{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.hc-table td:first-child{font-family:var(--f-body);font-weight:600}
.hc-table tr:last-child td{border-bottom:0}


/* ============================================================
   LEGAL DOCUMENTS
   ============================================================ */
.lg-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lg-meta span{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:#C3C0E4
}
.lg-meta span b{color:var(--cyan);font-weight:600}

.lg-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:940px){.lg-wrap{grid-template-columns:1fr}}

.lg-toc{position:sticky;top:88px}
@media (max-width:940px){
  .lg-toc{position:static;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:8px}
}
.lg-toc__k{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-lt);margin-bottom:14px
}
.lg-toc ol{list-style:none;padding:0;margin:0;counter-reset:toc}
.lg-toc li{counter-increment:toc;margin-bottom:2px}
.lg-toc a{
  display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:start;
  padding:7px 10px;border-radius:8px;font-size:.85rem;line-height:1.35;color:var(--muted);
  transition:background .15s ease,color .15s ease
}
.lg-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--f-mono);font-size:.66rem;color:var(--muted-lt);padding-top:2px
}
.lg-toc a:hover{background:rgba(3,172,239,.07);color:var(--ink)}
.lg-toc a.is-active{background:rgba(3,172,239,.11);color:var(--ink);font-weight:600}
.lg-toc a.is-active::before{color:var(--cyan-ink)}

.lg-doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,4vw,52px)}
.lg-intro{
  font-size:1rem;line-height:1.65;color:var(--muted);
  padding-bottom:26px;margin-bottom:8px;border-bottom:1px solid var(--line)
}
.lg-intro strong{color:var(--ink);font-weight:600}

.lg-sec{counter-increment:lgsec;padding-top:34px;scroll-margin-top:96px}
.lg-doc{counter-reset:lgsec}
.lg-sec h2{
  font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.02em;line-height:1.25;
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;margin-bottom:16px
}
.lg-sec h2::before{
  content:counter(lgsec,decimal-leading-zero);
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;color:var(--cyan-ink);
  letter-spacing:.1em
}
.lg-sec p{font-size:.95rem;line-height:1.72;color:#3E3B62;margin-bottom:14px}
.lg-sec p:last-child{margin-bottom:0}
.lg-sec h3{
  font-size:.95rem;font-family:var(--f-body);font-weight:700;letter-spacing:0;
  margin:22px 0 10px;color:var(--ink)
}
.lg-sec ol,.lg-sec ul{margin:0 0 14px;padding-left:0;list-style:none}
.lg-sec ol{counter-reset:lgi}
.lg-sec ol > li{
  counter-increment:lgi;position:relative;padding-left:34px;margin-bottom:11px;
  font-size:.95rem;line-height:1.7;color:#3E3B62
}
.lg-sec ol > li::before{
  content:counter(lgi) ".";position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:.78rem;color:var(--cyan-ink)
}
.lg-sec ul > li{
  position:relative;padding-left:22px;margin-bottom:11px;
  font-size:.95rem;line-height:1.7;color:#3E3B62
}
.lg-sec ul > li::before{
  content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;
  border-radius:1px;background:var(--lilac)
}
.lg-sec ol.alpha{counter-reset:lga}
.lg-sec ol.alpha > li{counter-increment:lga}
.lg-sec ol.alpha > li::before{content:counter(lga,lower-alpha) "."}
.lg-sec ol.roman{counter-reset:lgr}
.lg-sec ol.roman > li{counter-increment:lgr}
.lg-sec ol.roman > li::before{content:counter(lgr,lower-roman) "."}

.lg-caps{
  background:#F7F7FC;border:1px solid var(--line);border-left:3px solid var(--ink-3);
  border-radius:var(--r-md);padding:20px 22px;margin:18px 0
}
.lg-caps p{
  font-size:.83rem;line-height:1.75;letter-spacing:.005em;color:#3E3B62;margin-bottom:12px
}
.lg-caps p:last-child{margin-bottom:0}

.lg-addr{
  background:#FAFAFE;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px;font-family:var(--f-mono);font-size:.85rem;line-height:1.85;color:var(--ink)
}
.lg-addr b{display:block;font-family:var(--f-body);font-weight:700;margin-bottom:6px}

.lg-foot{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.83rem;color:var(--muted-lt)
}
.lg-print{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.85rem;font-weight:600
}
.lg-print:hover{border-color:var(--ink)}
.lg-print svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.lg-switch{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.lg-switch a{
  padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:.86rem;font-weight:600;background:#fff;transition:border-color .18s ease
}
.lg-switch a:hover{border-color:var(--cyan)}
.lg-switch a[aria-current="page"]{background:var(--azure);color:#fff;border-color:var(--azure)}

@media print{
  .nav,.foot,.lg-toc,.lg-foot,.lg-switch,.drawer{display:none !important}
  .pagehead{background:none !important;color:#000 !important;padding:0 0 18px !important}
  .pagehead .lede,.pagehead h1{color:#000 !important}
  .lg-meta span{background:none;border-color:#ccc;color:#333}
  .lg-doc{border:0;padding:0}
  .lg-wrap{display:block}
  .band{padding:0 !important}
  .lg-sec{page-break-inside:avoid}
}


/* ============================================================
   TIER FLAGS — popularity and value are different signals
   ============================================================ */
.tier--value{border-color:var(--teal);box-shadow:0 18px 44px rgba(15,191,143,.16)}
.tier__flag--value{background:var(--teal-dk)}
.savetag{
  display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;
  border-radius:var(--r-md);background:rgba(15,191,143,.09);
  border:1px solid rgba(15,191,143,.28)
}
.savetag svg{width:16px;height:16px;flex:none;stroke:var(--teal-dk);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.savetag span{font-size:.82rem;line-height:1.45;color:#0A6B51}
.savetag b{font-weight:700}


/* ============================================================
   THREE-LAYER CONTENT
   Every explanatory block follows the same shape:
   headline (plain) > benefit (what it does for you) > detail (how).
   ============================================================ */
.benefit{font-size:.97rem;line-height:1.62;color:var(--ink);margin-bottom:12px}
.card .benefit{font-size:.94rem}
.card--dark .benefit{color:#EDECF8}
.techline{
  font-family:var(--f-body);font-size:.855rem;line-height:1.6;color:var(--muted);
  padding-top:12px;margin-top:auto;position:relative;padding-left:13px
}
.techline::before{
  content:"";position:absolute;left:0;top:14px;bottom:2px;width:2px;border-radius:2px;
  background:var(--line)
}
.techline strong{
  display:block;font-family:var(--f-body);font-weight:600;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted-lt);margin-bottom:5px
}
.band--dark .techline,.card--dark .techline{color:#A9A5D0}
.band--dark .techline::before,.card--dark .techline::before{background:rgba(255,255,255,.18)}
.bestfor{
  display:inline-block;margin-bottom:10px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cyan-ink);background:rgba(3,172,239,.09);
  border:1px solid rgba(3,172,239,.26);padding:4px 10px;border-radius:var(--r-pill)
}
.card--dark .bestfor{color:var(--cyan);background:rgba(3,172,239,.14);border-color:rgba(3,172,239,.3)}

/* trust banner — the custody promise, stated plainly */
.trustbar{
  margin-top:26px;padding:20px 22px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(3,172,239,.16),rgba(3,172,239,.05));
  border:1px solid rgba(3,172,239,.34);display:flex;gap:16px;align-items:flex-start
}
.trustbar__ico{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(3,172,239,.2);color:var(--cyan)
}
.trustbar__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trustbar b{display:block;color:#fff;font-size:1.02rem;letter-spacing:-.015em;margin-bottom:6px}
.trustbar p{color:#C3C9EE;font-size:.9rem;line-height:1.6;margin:0}
.trustbar em{font-style:normal;color:var(--cyan);font-weight:600}
.trustbar--light{background:linear-gradient(120deg,rgba(3,172,239,.09),rgba(3,172,239,.03));border-color:rgba(3,172,239,.3)}
.trustbar--light .trustbar__ico{background:rgba(3,172,239,.14);color:var(--cyan-ink)}
.trustbar--light b{color:var(--ink)}
.trustbar--light p{color:var(--muted)}
.trustbar--light em{color:var(--cyan-ink)}


/* ============================================================
   RECOGNITION / PRESS
   ============================================================ */
.press__row{align-items:stretch}
.recog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
@media (max-width:900px){.recog{grid-template-columns:1fr}}
.recog a{
  display:flex;flex-direction:column;gap:0;padding:22px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg);transition:border-color .2s ease,transform .2s ease,background .2s ease
}
.recog a:hover{border-color:rgba(3,172,239,.5);background:rgba(255,255,255,.09);transform:translateY(-3px)}
.recog__kind{
  font-family:var(--f-body);font-weight:600;font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:12px
}
.recog b{display:block;color:#fff;font-size:1rem;line-height:1.35;letter-spacing:-.015em;margin-bottom:8px}
.recog p{color:#A9A5D0;font-size:.87rem;line-height:1.55;margin:0}
.recog__go{
  margin-top:16px;font-size:.8rem;font-weight:600;color:var(--cyan);
  display:inline-flex;align-items:center;gap:6px
}

.recog__more{
  margin-top:14px;font-size:.85rem;color:#A9A5D0;display:flex;flex-wrap:wrap;gap:6px 18px
}
.recog__more a{color:var(--cyan);font-weight:600}
.recog__more a:hover{text-decoration:underline}

/* light variant, used on the paper band */
.recog--light a{background:#fff;border-color:var(--line)}
.recog--light a:hover{border-color:var(--cyan);background:#fff}
.recog--light b{color:var(--ink)}
.recog--light p{color:var(--muted)}
.recog--light .recog__kind{color:var(--cyan-ink)}


/* ============================================================
   COMING SOON — futures is not live yet
   ============================================================ */
.soon{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  font-family:var(--f-body);font-weight:600;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  color:#B0762A;background:rgba(240,168,58,.14);border:1px solid rgba(240,168,58,.42);
  padding:3px 9px;border-radius:var(--r-pill)
}
.soon::before{content:"";width:5px;height:5px;border-radius:50%;background:#E0952B;flex:none}
.soon--dark{color:#F3C179;background:rgba(240,168,58,.16);border-color:rgba(240,168,58,.4)}
h3 .soon,h4 .soon,b .soon{margin-left:9px}

/* the futures market card reads as forthcoming, not live */
.mktcard--fut{opacity:.94}
.mktcard--fut .mktcard__hd{background:linear-gradient(90deg,rgba(240,168,58,.07),transparent)}
.mktcard--fut .mktcard__hd::before{background:#E0952B}
.soonbar{
  margin-top:18px;padding:13px 15px;border-radius:var(--r-md);
  background:rgba(240,168,58,.09);border:1px solid rgba(240,168,58,.34);
  font-size:.87rem;line-height:1.55;color:#7A5A22
}
.soonbar b{font-weight:700}

/* the futures tab in the hero control */
.seg button[data-mode="futures"]{position:relative}
.seg button[data-mode="futures"] i{
  font-style:normal;font-size:.55rem;letter-spacing:.1em;margin-left:6px;
  color:#F3C179;text-transform:uppercase
}
.seg button[data-mode="futures"][aria-selected="true"] i{color:#5A3E0E}


/* ============================================================
   STRATEGY CARD — icon, name and status on one line
   ============================================================ */
.card--strat{display:flex;flex-direction:column}
.strat__hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.strat__hd .card__ico{margin-bottom:0;width:38px;height:38px;border-radius:11px;flex:none}
.strat__hd .card__ico svg{width:18px;height:18px}
.strat__hd h3{font-size:1.12rem;margin:0;flex:1 1 auto;min-width:0}
.strat__hd .soon{flex:none}
.strat__mkt{
  font-family:var(--f-body);font-weight:600;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-lt);border:1px solid var(--line);
  padding:3px 9px;border-radius:var(--r-pill);flex:none
}
.strat__mkt[data-m="spot"]{color:var(--cyan-ink);border-color:rgba(3,172,239,.34);background:rgba(3,172,239,.06)}
.card--dark .strat__mkt{color:#A9A5D0;border-color:rgba(255,255,255,.2)}
.strat__link{
  margin-top:16px;font-size:.86rem;font-weight:600;color:var(--cyan-ink);
  display:inline-flex;align-items:center;gap:6px
}
.strat__link:hover{text-decoration:underline}


/* ============================================================
   STRATEGY LANDING PAGES
   ============================================================ */
.stg-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,3.4vw,52px);align-items:start}
@media (max-width:940px){.stg-hero{grid-template-columns:1fr}}

.stg-spec{display:grid;gap:0;border-top:1px solid var(--line)}
.stg-spec__row{
  display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;
  padding:18px 0;border-bottom:1px solid var(--line)
}
@media (max-width:720px){.stg-spec__row{grid-template-columns:1fr;gap:6px}}
.stg-spec__k{
  font-family:var(--f-body);font-weight:700;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--cyan-ink);padding-top:3px
}
.stg-spec__v{font-size:.95rem;line-height:1.65;color:#3E3C63}
.stg-spec__v b{font-weight:600;color:var(--ink)}

/* worked example */
.stg-eg{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:var(--r-md);padding:22px 24px
}
.stg-eg h4{margin-bottom:12px}
.stg-eg ol{margin:0;padding-left:20px;display:grid;gap:9px}
.stg-eg li{font-size:.93rem;line-height:1.6;color:#3E3C63}
.stg-eg li b{color:var(--ink)}
.stg-eg--short{border-left-color:var(--rose)}

/* ============================================================
   SUPERTREND CANDLE ANIMATION
   ============================================================ */
.st-chart{
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:visible
}
.st-chart__top{border-radius:var(--r-lg) var(--r-lg) 0 0}
.st-chart__foot{border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.st-chart__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)
}
.st-chart__pair{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:.84rem;color:#fff}
.st-chart__pair .live{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2.2s ease-in-out infinite}
.st-trend{
  font-family:var(--f-body);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);transition:all .35s ease
}
.st-trend[data-t="up"]{background:rgba(15,191,143,.2);color:#6FE3C1;border:1px solid rgba(15,191,143,.42)}
.st-trend[data-t="down"]{background:rgba(255,92,108,.18);color:#FF9AA5;border:1px solid rgba(255,92,108,.42)}
.st-chart__body{position:relative;padding:14px 16px 8px}
.st-svg{display:block;width:100%;height:auto}
.st-chart__foot{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)
}
.st-chart__foot div{padding:12px 16px;border-right:1px solid rgba(255,255,255,.08)}
.st-chart__foot div:last-child{border-right:0}
.st-chart__foot .k{font-family:var(--f-body);font-weight:600;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:#6B73A6}
.st-chart__foot .v{font-family:var(--f-mono);font-size:1rem;font-weight:600;margin-top:4px;color:#fff;font-variant-numeric:tabular-nums}
.st-chart__foot .v[data-tone="teal"]{color:var(--teal)}
.st-chart__foot .v[data-tone="rose"]{color:var(--rose)}
.st-cap{font-size:.76rem;color:#6B73A6;text-align:center;margin-top:14px;line-height:1.5}

/* gate meter for single-side */
.gate{
  margin-top:16px;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)
}
.gate__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.gate__lbl{font-family:var(--f-body);font-weight:600;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#8A86B8}
.gate__val{font-family:var(--f-mono);font-size:.9rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.gate__bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.gate__fill{
  height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--rose));
  transition:width .5s cubic-bezier(.4,0,.2,1)
}
.gate.is-armed{border-color:rgba(255,92,108,.45);background:rgba(255,92,108,.08)}
.gate.is-armed .gate__lbl{color:#FF9AA5}


/* ---- order tooltip on strategy charts ---- */
.st-chart__body{position:relative}
.st-tip{
  position:absolute;pointer-events:none;opacity:0;
  transform:translate(-50%,-116%) scale(.94);transform-origin:50% 100%;
  transition:opacity .16s ease, transform .16s ease;z-index:6;
  background:rgba(9,6,26,.97);border:1px solid rgba(255,255,255,.22);border-radius:8px;
  padding:7px 9px;width:max-content;max-width:190px;
  box-shadow:0 8px 22px rgba(0,0,0,.55)
}
.st-tip.is-on{opacity:1;transform:translate(-50%,-116%) scale(1)}
.st-tip::after{
  content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(9,6,26,.97);
  border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)
}
/* flipped below the dot when there is no room above */
.st-tip--below{transform:translate(-50%,16%) scale(.94)}
.st-tip--below.is-on{transform:translate(-50%,16%) scale(1)}
.st-tip--below::after{
  bottom:auto;top:-5px;
  border-right:0;border-bottom:0;
  border-left:1px solid rgba(255,255,255,.22);border-top:1px solid rgba(255,255,255,.22)
}
.st-tip__hd{
  font-family:var(--f-body);font-weight:700;font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:5px;white-space:nowrap
}
.st-tip__hd[data-s="long"]{color:#6FE3C1}
.st-tip__hd[data-s="short"]{color:#FF9AA5}
.st-tip__hd[data-s="skip"]{color:#A9A5D0}
.st-tip__r{display:flex;justify-content:space-between;gap:12px;font-size:.68rem;line-height:1.5;white-space:nowrap}
.st-tip__r span{color:#8A86B8}
.st-tip__r b{font-family:var(--f-mono);color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.st-tip__r b[data-tone="teal"]{color:var(--teal)}
.st-tip__r b[data-tone="rose"]{color:var(--rose)}
.st-tip__note{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.13);
  font-size:.64rem;color:#8A86B8;line-height:1.4;white-space:normal}

/* the dot that just filled */
.st-svg circle.is-new{animation:orderPop .5s ease-out}
@keyframes orderPop{
  0%{transform:scale(.2);opacity:0}
  55%{transform:scale(1.35);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.st-svg circle[data-tip]{cursor:pointer;pointer-events:all}
.st-hint{
  font-size:.72rem;color:#6B73A6;text-align:center;margin-top:9px;
  display:flex;align-items:center;justify-content:center;gap:6px
}


/* ---- named strategies inside a market card ---- */
.mkt-strat{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.mkt-strat li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:12px 14px;border-radius:var(--r-md);
  background:#F7F8FD;border:1px solid var(--line)
}
.mkt-strat .n{
  font-family:var(--f-body);font-weight:700;font-size:.6rem;letter-spacing:.06em;
  color:var(--cyan-ink);background:rgba(3,172,239,.12);border:1px solid rgba(3,172,239,.3);
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;margin-top:1px
}
.mktcard--fut .mkt-strat .n{color:#B0433F;background:rgba(255,92,108,.11);border-color:rgba(255,92,108,.3)}
.mktcard--fut .mkt-strat li{background:#FDF8F8;border-color:#F2E2E2}
.mkt-strat b{display:block;font-size:.93rem;font-weight:600;letter-spacing:-.01em;margin-bottom:3px}
.mkt-strat b a{color:inherit}
.mkt-strat b a:hover{color:var(--cyan-ink);text-decoration:underline}
.mkt-strat span{display:block;font-size:.85rem;line-height:1.5;color:var(--muted)}


/* ============================================================
   NAV DROPDOWN — strategies
   ============================================================ */
.nav__item{position:relative}
.nav__item > a{display:inline-flex;align-items:center;gap:6px}
.nav__item > a::after{
  content:"";width:5px;height:5px;flex:none;margin-top:-2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.55;transition:transform .18s ease
}
.nav__item:hover > a::after,.nav__item:focus-within > a::after{transform:rotate(225deg) translate(-1px,-1px)}
.nav__menu{
  position:absolute;top:100%;left:0;padding-top:10px;min-width:310px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;z-index:90
}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__item.is-dismissed .nav__menu{opacity:0;visibility:hidden;transform:translateY(-6px)}
.nav__menu__in{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgba(20,16,52,.16);padding:8px;overflow:hidden
}
.nav__menu h6{
  margin:0;padding:9px 12px 5px;
  font-family:var(--f-body);font-weight:700;font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-lt)
}
.nav__menu a{
  display:block;padding:9px 12px;border-radius:var(--r-md);
  font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25
}
.nav__menu a small{
  display:block;font-weight:400;font-size:.78rem;color:var(--muted);margin-top:2px;
  letter-spacing:0;text-transform:none
}
.nav__menu a:hover{background:#F3F5FD;color:var(--ink)}
.nav__menu a .soon{margin-left:7px;transform:translateY(-1px)}
.nav__menu__all{
  display:block;margin-top:6px;padding:10px 12px;border-top:1px solid var(--line);
  font-size:.85rem;font-weight:600;color:var(--cyan-ink)
}
@media (max-width:940px){.nav__menu{display:none}}

/* drawer sub-list */
.drawer__sub{padding:2px 0 8px 14px;border-bottom:1px solid var(--line)}
.drawer__sub a{
  display:block;padding:9px 2px;font-size:.92rem;font-weight:500;color:var(--muted);border:0
}
.drawer__sub a:hover{color:var(--ink)}

/* ---- make the strategy link read as an action ---- */
.strat__link{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  padding:9px 16px;border-radius:var(--r-pill);
  background:var(--azure);color:#fff;font-size:.85rem;font-weight:600;
  transition:background .18s ease, transform .18s ease
}
.strat__link:hover{background:var(--azure-dk);transform:translateY(-1px);text-decoration:none}
.card--strat:hover .strat__link{background:var(--azure-dk)}


/* ============================================================
   PAGE HEADER — use the full width instead of a left column
   ============================================================ */
.pagehead__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:end
}
@media (max-width:900px){.pagehead__grid{grid-template-columns:1fr;gap:24px;align-items:start}}
.pagehead__grid h1{margin-bottom:0}
.pagehead__body .lede{max-width:60ch}
.pagehead__body .lede + .lede{margin-top:15px}
.pagehead .hero__cta{margin-top:26px}

/* ============================================================
   SPOT STRATEGY PAGE — tank mechanic
   ============================================================ */
.tank-wrap{
  background:linear-gradient(170deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden
}
.tank-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  font-family:var(--f-mono);font-size:.82rem;color:#fff
}
.tank-mode{
  font-family:var(--f-body);font-weight:700;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);
  background:rgba(3,172,239,.18);color:var(--cyan);border:1px solid rgba(3,172,239,.4)
}
.tank-body{padding:16px 18px 6px}
.ord{
  display:grid;grid-template-columns:64px 1fr 74px;align-items:center;gap:10px;
  height:34px;position:relative;transition:opacity .4s ease
}
.ord__p{font-family:var(--f-mono);font-size:.78rem;color:#C3C9EE;font-variant-numeric:tabular-nums}
.ord__bar{height:7px;border-radius:4px;background:rgba(255,92,108,.3);position:relative;overflow:hidden}
.ord__bar i{position:absolute;inset:0;background:rgba(255,92,108,.75);transform-origin:left;transition:transform .4s ease}
.ord__q{font-family:var(--f-mono);font-size:.72rem;color:#8A86B8;text-align:right}
.ord.is-closed{opacity:.34}
.ord.is-closed .ord__bar i{background:rgba(15,191,143,.7)}
.ord.is-worst .ord__p{color:#FF9AA5;font-weight:600}
.ord.is-target{animation:ordPulse 1.1s ease-in-out infinite}
@keyframes ordPulse{0%,100%{opacity:1}50%{opacity:.55}}

.tank-meter{margin:14px 0 4px;padding:14px 16px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.tank-meter__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.tank-meter__lbl{font-family:var(--f-body);font-weight:700;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#8A86B8}
.tank-meter__v{font-family:var(--f-mono);font-size:.92rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.tank-meter__bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.tank-meter__fill{height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),var(--teal));transition:width .45s cubic-bezier(.4,0,.2,1)}
.tank-meter.is-full{border-color:rgba(15,191,143,.5);background:rgba(15,191,143,.09)}
.tank-meter.is-full .tank-meter__lbl{color:#6FE3C1}
.tank-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.tank-foot div{padding:12px 15px;border-right:1px solid rgba(255,255,255,.08)}
.tank-foot div:last-child{border-right:0}
.tank-foot .k{font-family:var(--f-body);font-weight:600;font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;color:#6B73A6}
.tank-foot .v{font-family:var(--f-mono);font-size:.98rem;font-weight:600;margin-top:4px;color:#fff;font-variant-numeric:tabular-nums}
.tank-foot .v[data-tone="teal"]{color:var(--teal)}

/* two-up compare */
.cmp2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:860px){.cmp2{grid-template-columns:1fr}}
.cmp2 .stg-eg{height:100%}


/* ---- brand tagline ---- */
.tagline{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  display:inline-flex;gap:.42em;flex-wrap:wrap
}
.tagline span:nth-child(2){color:var(--cyan)}
.foot .tagline{font-size:1.12rem;color:#fff;margin:16px 0 0}
.cta .tagline{font-size:clamp(1.15rem,1.7vw,1.45rem);color:#fff;margin-bottom:14px;opacity:.92}
.hero .tagline{font-size:.95rem;color:#A9A5D0;margin-top:0}


/* ---- contact form feedback ---- */
.formalert{
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:20px;
  border:1px solid var(--line);background:#F7F8FD
}
.formalert b{display:block;font-size:.95rem;margin-bottom:4px}
.formalert p{font-size:.87rem;line-height:1.5;margin:0;color:var(--muted)}
.formalert--ok{background:rgba(15,191,143,.08);border-color:rgba(15,191,143,.34)}
.formalert--ok b{color:var(--teal-dk)}
.formalert--err{background:#FFF3F4;border-color:#FFD9DD}
.formalert--err b{color:#8A3A43}
.formcard form .field:last-of-type{margin-bottom:20px}


/* ============================================================
   NARROW VIEWPORTS
   The three-column stat footers under each chart had no mobile
   rule, so long values ("Oldest order retired", "Session closed")
   forced the card wider than the screen and pushed the whole page
   into horizontal scroll.
   ============================================================ */
@media (max-width:620px){
  .ladder__foot,
  .st-chart__foot,
  .tank-foot{grid-template-columns:1fr 1fr}
  .ladder__foot .lstat:nth-child(3),
  .st-chart__foot div:nth-child(3),
  .tank-foot div:nth-child(3){grid-column:1 / -1;border-right:0;border-top:1px solid rgba(255,255,255,.08)}
  .lstat,.st-chart__foot div,.tank-foot div{padding:11px 13px}
}
@media (max-width:420px){
  .ladder__foot,
  .st-chart__foot,
  .tank-foot{grid-template-columns:1fr}
  .ladder__foot .lstat,
  .st-chart__foot div,
  .tank-foot div{border-right:0;border-top:1px solid rgba(255,255,255,.08)}
  .ladder__foot .lstat:first-child,
  .st-chart__foot div:first-child,
  .tank-foot div:first-child{border-top:0}
}

/* long values wrap rather than stretching their column */
.lstat__v,.st-chart__foot .v,.tank-foot .v{overflow-wrap:anywhere}
.tank-top{flex-wrap:wrap}

/* nothing should be able to force the page sideways */
html,body{max-width:100%;overflow-x:hidden}
img,svg,table{max-width:100%}

/* mini pricing teaser row */
.ptease{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.ptease{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ptease{grid-template-columns:1fr}}
.ptcell{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  transition:border-color .2s ease,transform .2s ease
}
.ptcell:hover{border-color:var(--cyan);transform:translateY(-3px)}
.ptcell h4{font-family:var(--f-display);font-size:1.1rem}
.ptcell .pt-amt{font-family:var(--f-mono);font-size:1.7rem;font-weight:600;letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums}
.ptcell .pt-cur{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.ptcell .pt-meta{font-size:.85rem;color:var(--muted);margin-top:10px;line-height:1.5}
.ptcell .pt-meta b{font-family:var(--f-mono);color:var(--ink)}