/* ═══════════════════════════════════════════════════════════════════
   NuraMark

   Palette is lifted from the logo: lime #CCE464 on near-black, with the
   deep green #125912 as the structural shade. The base is a very dark
   charcoal-green rather than pure black — long sessions in front of a
   chart are easier on a surface that still has some depth to it.

   Semantics stay conventional: green up, red down, both desaturated so
   they read cleanly on a dark ground instead of vibrating.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --lime:      #cce464;
  --lime-dim:  #a8bf4e;
  --lime-glow: rgba(204, 228, 100, .16);
  --green-dk:  #125912;

  --bg:    #0a0d0a;
  --bg-1:  #0f130e;
  --bg-2:  #141a13;
  --bg-3:  #1b2219;
  --line:  #26301f;
  --line-2:#334029;

  --txt:   #e9eee2;
  --txt-2: #b3bda8;
  --muted: #7e8a74;

  --up:    #57d18d;
  --up-bg: rgba(87, 209, 141, .12);
  --down:  #e5726a;
  --down-bg: rgba(229, 114, 106, .12);
  --blue:  #4c8df6;
  --gold:  #e8b84b;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --shadow: 0 18px 44px rgba(0, 0, 0, .55);
  --wrap: 1200px;

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* The faint grid sits in the body's own background rather than a fixed
     pseudo-element: a full-viewport fixed layer underneath the sticky,
     backdrop-filtered header made Chromium drop the whole page while
     scrolling. Scrolling the grid with the content costs nothing visually. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(204, 228, 100, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 228, 100, .03) 1px, transparent 1px);
  background-size: 64px 64px;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* v34.21: hidden ABOVE the page, not 9999px to the side. In Arabic (right-to-
   left) a box far to the left widens the page itself, and phones (Samsung,
   Chrome on Android) then zoomed the whole site out to a thin column. */
.skip {
  position: absolute; top: -100px; inset-inline-start: 1rem;
  background: var(--lime); color: #000; padding: .6rem 1rem; border-radius: var(--r-sm);
}
.skip:focus { top: 1rem; z-index: 99; }

/* Nothing may ever make the page wider than the phone. `clip` (not hidden)
   keeps the sticky top bar working; older browsers keep body's `hidden`. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* ── top bar ────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 13, 10, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }

.brand { flex: 0 0 auto; }

/* The mark and the wordmark are the original artwork, painted through a CSS
   mask so the brand colour lives in the palette rather than in the file.
   --logo-h drives both; the widths come from each crop's own aspect ratio
   (mark 238×276, word 544×65). */
.logo {
  --logo-h: 40px;
  display: inline-flex; align-items: center; gap: .6rem;
  height: var(--logo-h);
}
.logo-mark, .logo-word {
  display: block; height: 100%;
  background-color: var(--lime);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.logo-mark {
  width: calc(var(--logo-h) * 0.862);
  -webkit-mask-image: url("/assets/img/mark.png");
  mask-image: url("/assets/img/mark.png");
}
.logo-word {
  /* the wordmark's cap height is smaller than the mark's full height */
  height: 58%;
  width: calc(var(--logo-h) * 0.58 * 8.369);
  -webkit-mask-image: url("/assets/img/word.png");
  mask-image: url("/assets/img/word.png");
}
.brand:hover .logo-mark, .brand:hover .logo-word { background-color: #d8ee7c; }

/* Browsers without mask support would show two blank boxes; fall back to a
   plain text wordmark there rather than to nothing. */
@supports not ((mask-image: url("#")) or (-webkit-mask-image: url("#"))) {
  .logo-mark { display: none; }
  .logo-word {
    width: auto; height: auto; background: none; color: var(--lime);
    font: 800 22px/1 var(--sans); letter-spacing: .04em;
  }
  .logo-word::after { content: "NURA-MARK"; }
}

.nav { display: flex; gap: 1.6rem; margin-inline-start: auto; font-size: .95rem; }
.nav a { color: var(--txt-2); padding: .35rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.nav a:hover { color: var(--txt); }
.nav a.on { color: var(--lime); border-bottom-color: var(--lime); }

.topbar-right { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.nav + .topbar-right { margin-inline-start: 0; }

.langpick { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--txt-2);
  border-radius: 999px; padding: .35rem .7rem; cursor: pointer;
  font: inherit; font-size: .85rem;
}
.lang-btn:hover { border-color: var(--line-2); color: var(--txt); }
.lang-code { font-family: var(--mono); letter-spacing: .04em; }
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lime); color: #000;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
}
.tierbadge {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  padding: .05rem .3rem; border-radius: 4px;
  background: var(--bg-3); color: var(--muted);
}
.tierbadge.tier-A { background: var(--lime); color: #000; }
.tierbadge.tier-1 { background: var(--up-bg); color: var(--up); }

.menu {
  position: absolute; top: calc(100% + .5rem); inset-inline-start: 0;
  min-width: 168px; padding: .35rem;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  display: none; z-index: 50;
}
.menu-end { inset-inline-start: auto; inset-inline-end: 0; }
.langpick.open .menu { display: block; }
.menu a { display: block; padding: .5rem .7rem; border-radius: var(--r-sm); color: var(--txt-2); font-size: .9rem; }
.menu a:hover { background: var(--bg-3); color: var(--txt); }
.menu a.on { color: var(--lime); }

.burger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--txt-2); margin: 4px 0; border-radius: 2px; }
.mobnav { display: none; flex-direction: column; padding: .5rem 1.25rem 1rem; border-top: 1px solid var(--line); }
.mobnav a { padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--txt-2); }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.3rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--lime); color: #0a0d0a; }
.btn-primary:hover { background: #d8ee7c; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--txt); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn-dark { background: var(--bg-2); border-color: var(--line); color: var(--txt); }
.btn-dark:hover { border-color: var(--line-2); }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ── flashes ────────────────────────────────────────────────────── */
.flash {
  margin: 1rem 0 0; padding: .8rem 1.1rem; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--bg-2); font-size: .93rem;
}
.flash-ok  { border-color: rgba(87, 209, 141, .4);  background: var(--up-bg);   color: var(--up); }
.flash-err { border-color: rgba(229, 114, 106, .4); background: var(--down-bg); color: var(--down); }

/* ── hero ───────────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 3rem; position: relative; }
.hero::after {
  content: ""; position: absolute; inset-inline-end: -10%; top: -20%;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, var(--lime-glow) 0%, transparent 62%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }

.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lime); background: var(--lime-glow);
  border: 1px solid rgba(204, 228, 100, .25);
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.dot-live { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.hero h1 { margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero-sub { font-size: 1.08rem; color: var(--txt-2); max-width: 54ch; margin-bottom: 1.8rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hero-note { font-size: .82rem; color: var(--muted); max-width: 52ch; }

/* ── stat strip ─────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 2.5rem 0; }
.stat { background: var(--bg-1); padding: 1.15rem 1.3rem; }
.stat-v { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--lime); line-height: 1.15; }
.stat-v.up { color: var(--up); } .stat-v.down { color: var(--down); }
.stat-k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: .2rem; }

/* ── market pulse ───────────────────────────────────────────────── */
.pulse {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.pulse-h { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.pulse-clock { font-family: var(--mono); font-size: clamp(2.6rem, 7vw, 3.8rem); font-weight: 700;
  color: var(--txt); letter-spacing: .04em; line-height: 1.05; margin: .6rem 0 .1rem; }
.pulse-date { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.pulse-row { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .82rem; }
.pulse-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pulse-led { width: 9px; height: 9px; border-radius: 2px; background: var(--muted); flex: 0 0 auto; }
.pulse-led.on { background: var(--up); box-shadow: 0 0 10px rgba(87, 209, 141, .7); }
.pulse-code { font-weight: 700; letter-spacing: .1em; min-width: 62px; }
.pulse-city { color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.pulse-state { margin-inline-start: auto; letter-spacing: .12em; color: var(--muted); }
.pulse-state.on { color: var(--up); font-weight: 700; }
.pulse-time { min-width: 50px; text-align: end; color: var(--txt-2); }

/* ── sections ───────────────────────────────────────────────────── */
.sec { padding: clamp(3rem, 7vw, 5rem) 0; }
.sec-alt { background: linear-gradient(180deg, transparent, rgba(18, 89, 18, .07), transparent); }
.sec-h { max-width: 62ch; margin-bottom: 2.4rem; }
.sec-h p { color: var(--txt-2); }
.sec-h.center { margin-inline: auto; text-align: center; }

/* ── steps ──────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: s; }
.step { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; position: relative; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; color: var(--lime);
  background: var(--lime-glow); border: 1px solid rgba(204, 228, 100, .22);
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 1rem;
}
.step h3 { font-size: 1.02rem; }
.step p { color: var(--txt-2); font-size: .92rem; margin: 0; }

/* ── signal cards ───────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.2rem; }

.card {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1) 55%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.25rem; display: flex; flex-direction: column; gap: .95rem;
  transition: border-color .18s, transform .18s;
  position: relative; overflow: hidden;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
  background: var(--muted);
}
.card.s-buy::before    { background: var(--up); }
.card.s-hold::before   { background: var(--lime); }
.card.s-sell::before   { background: var(--gold); }
.card.s-closed::before { background: var(--blue); }

.card-top { display: flex; align-items: flex-start; gap: .8rem; }
.tkr-mark {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  background: var(--bg-3); border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--lime);
}
.tkr-id { min-width: 0; }
.tkr-sym { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.tkr-name { font-size: .943rem; color: var(--muted); line-height: 1.25; overflow: hidden;
             display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

.badge {
  margin-inline-start: auto; flex: 0 0 auto;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .28rem .65rem; border-radius: 999px;
  background: var(--bg-3); color: var(--txt-2); border: 1px solid var(--line-2);
}
.badge.s-buy    { background: var(--up-bg);   color: var(--up);   border-color: rgba(87, 209, 141, .32); }
.badge.s-hold   { background: var(--lime-glow); color: var(--lime); border-color: rgba(204, 228, 100, .3); }
.badge.s-sell   { background: rgba(232, 184, 75, .12); color: var(--gold); border-color: rgba(232, 184, 75, .3); }
.badge.s-closed { background: rgba(76, 141, 246, .12); color: var(--blue); border-color: rgba(76, 141, 246, .3); }

.price-row { display: flex; align-items: baseline; gap: .6rem; }
.price { font-family: var(--mono); font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; }
.chg { font-family: var(--mono); font-size: .9rem; font-weight: 600; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); } .chg.flat { color: var(--muted); }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lv { background: var(--bg-1); padding: .6rem .7rem; }
.lv-k { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.lv-k i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.lv-k.k-entry i { background: var(--blue); }
.lv-k.k-tp    i { background: var(--up); }
.lv-k.k-sl    i { background: var(--down); }
.lv-v { font-family: var(--mono); font-size: .96rem; font-weight: 600; margin-top: .15rem; }

.ladder { display: flex; align-items: center; gap: .9rem; font-size: .78rem; color: var(--muted); }
.lad { display: flex; align-items: center; gap: .35rem; }
.pips { display: flex; gap: 3px; }
.pip { width: 7px; height: 7px; border-radius: 2px; background: var(--bg-3); border: 1px solid var(--line-2); }
.pip.on.buy  { background: var(--up);   border-color: var(--up); }
.pip.on.sell { background: var(--gold); border-color: var(--gold); }

.metrics { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--muted); padding-top: .2rem; border-top: 1px solid var(--line); }
.metrics b { display: block; font-family: var(--mono); font-size: .98rem; color: var(--txt); font-weight: 700; }
.metrics b.up { color: var(--up); } .metrics b.down { color: var(--down); }
.metrics .over { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--muted); }

/* the one instruction on the card: what to trade, and over how many steps */
.recline {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .5rem .7rem; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--line-2);
}
.recline-k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.recline-src { display: block; margin-top: .15rem; font-size: .68rem; font-weight: 500; color: var(--muted); opacity: .8; }
.recline-q { text-align: end; line-height: 1.2; }
.recline b { display: block; font-size: 1.02rem; font-weight: 700; color: var(--txt); }
/* what the position costs, small: the quantity is the instruction, the
   money is the sanity check */
.recline-cash { display: block; font-style: normal; font-size: .74rem; color: var(--muted); }

/* ── favourites ──────────────────────────────────────────────────────
   A ticker the viewer picked in the simulator. Marked with red because
   nothing else on the card is red unless it is losing money, so the
   accent never competes with the stage colour on the leading edge. */
/* One accent colour per card, set from the money and then reused by the
   edge, the wash, the border and the tag — so the card never argues with
   itself about whether this position is going well. */
.card.fav          { --fav: var(--up);   --fav-soft: rgba(87, 209, 141, .13); }
.card.fav-down     { --fav: var(--down); --fav-soft: rgba(229, 114, 106, .13); }
.card.fav-flat     { --fav: var(--muted);--fav-soft: rgba(138, 154, 130, .10); }

.card.fav { border-color: var(--fav); padding-top: 1.55rem; }
.card.fav::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0, var(--fav-soft), transparent 58%);
}
.favmark {
  position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 1;
  background: var(--fav);
}
.favtag {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem .22rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bg-1); background: var(--fav);
  border-end-end-radius: 8px;
}
.favtag svg { width: 11px; height: 11px; fill: currentColor; }

.favnote { color: var(--txt-2); }
.favdot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); margin-inline-end: .4rem; vertical-align: baseline;
}

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; }
.stamp { font-size: .74rem; color: var(--muted); font-family: var(--mono); }

/* locked card */
.card.locked { filter: none; }
.card.locked .lockwrap { position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10, 13, 10, .74); backdrop-filter: blur(6px); text-align: center; padding: 1.2rem; z-index: 2; }
.card.locked .lockwrap p { font-size: .86rem; color: var(--txt-2); margin: .5rem 0 .9rem; }
.lockicon { width: 34px; height: 34px; color: var(--lime); }

/* ── tables ─────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
thead th {
  text-align: start; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: .85rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--bg-2); white-space: nowrap;
}
tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(204, 228, 100, .035); }
td.num, th.num { font-family: var(--mono); text-align: end; }
td.up { color: var(--up); } td.down { color: var(--down); }
.pill { font-size: .72rem; padding: .18rem .55rem; border-radius: 999px; background: var(--bg-3); color: var(--txt-2); }
.pill.win  { background: var(--up-bg); color: var(--up); }
.pill.loss { background: var(--down-bg); color: var(--down); }
.pill.open { background: rgba(76, 141, 246, .12); color: var(--blue); }

/* ── market tabs ────────────────────────────────────────────────── */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--txt-2); font-size: .92rem;
}
.tab:hover { border-color: var(--line-2); color: var(--txt); }
.tab.on { background: var(--lime); border-color: var(--lime); color: #0a0d0a; font-weight: 600; }
.tab .n { font-family: var(--mono); font-size: .78rem; opacity: .75; }
.tab.soon { opacity: .58; }

/* ── detail page ────────────────────────────────────────────────── */
.dhead { display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; padding: 2rem 0 1.4rem; }
.dhead .tkr-mark { width: 54px; height: 54px; border-radius: 16px; font-size: .95rem; }
.dhead h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0; }
.dhead .sub { color: var(--muted); font-size: .92rem; }
.dhead-right { margin-inline-start: auto; text-align: end; }
.dhead-right .price { font-size: 2rem; }

.panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem; margin-bottom: 1.4rem; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.panel-h h2 { font-size: 1.08rem; margin: 0; }
.panel-note { font-size: .78rem; color: var(--muted); }

.chartbox { position: relative; width: 100%; }
/* pan-y, not none: vertical page scrolling must still work when a finger
   starts on the chart; horizontal drag is what pans it. */
.chartbox canvas { display: block; width: 100%; border-radius: var(--r); background: #080b08; touch-action: pan-y; }

.chartctl { position: absolute; top: .6rem; inset-inline-end: .6rem; display: flex; gap: .25rem; z-index: 4; }
.chartctl button {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  background: rgba(20, 26, 19, .9); border: 1px solid var(--line-2); color: var(--txt-2);
  font: 600 15px/1 var(--mono); display: grid; place-items: center;
}
.chartctl button:hover { border-color: var(--lime); color: var(--lime); }
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: .7rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.lg-buy  { background: var(--up); }
.lg-sell { background: var(--gold); }
.lg-tp   { background: var(--blue); }
.lg-sl   { background: var(--down); }

.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(20, 26, 19, .96); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .55rem .7rem;
  font-family: var(--mono); font-size: .76rem; line-height: 1.55; color: var(--txt);
  box-shadow: var(--shadow); white-space: nowrap; opacity: 0; transition: opacity .12s;
}
.tip.on { opacity: 1; }
.tip .k { color: var(--muted); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.kpi { background: var(--bg-1); padding: .95rem 1.1rem; }
.kpi-k { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kpi-v { font-family: var(--mono); font-size: 1.28rem; font-weight: 700; margin-top: .15rem; }
.kpi-v.up { color: var(--up); } .kpi-v.down { color: var(--down); }

.preds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; }
.pred { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; }
.pred-t { font-size: .88rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pred-v { font-size: .78rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.pred-v.yes { background: var(--up-bg); color: var(--up); }
.pred-v.no  { background: var(--bg-3); color: var(--muted); }
.bar { height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; margin-top: .55rem; }
.bar > i { display: block; height: 100%; background: var(--lime); border-radius: 3px; }
.pred-m { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--muted); margin-top: .35rem; }

/* ── forms ──────────────────────────────────────────────────────── */
.formcard { max-width: 430px; margin: clamp(2rem, 7vw, 4.5rem) auto; background: var(--bg-1);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem; box-shadow: var(--shadow); }
.formcard h1 { font-size: 1.65rem; }
.formcard .sub { color: var(--txt-2); font-size: .93rem; margin-bottom: 1.6rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; color: var(--txt-2); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .72rem .9rem; font: inherit; font-size: .95rem;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--txt);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime-glow);
}
.formcard .alt { text-align: center; font-size: .88rem; color: var(--muted); margin-top: 1.2rem; }
.formcard .alt a { color: var(--lime); }
.err { background: var(--down-bg); border: 1px solid rgba(229, 114, 106, .35); color: var(--down);
  padding: .65rem .9rem; border-radius: var(--r-sm); font-size: .88rem; margin-bottom: 1rem; }

/* ── pricing ────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.plan { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem; display: flex; flex-direction: column; }
.plan.feature { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime-glow), var(--shadow); }
.plan-k { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.plan-p { font-family: var(--mono); font-size: 2.4rem; font-weight: 700; margin: .5rem 0 .1rem; }
.plan-p small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0; font-size: .9rem; color: var(--txt-2); }
.plan li { padding: .35rem 0 .35rem 1.5rem; position: relative; }
.plan li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--lime); }
.plan .btn { margin-top: auto; }

/* ── payment ────────────────────────────────────────────────────── */
.paygrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4rem; align-items: start; }
.copyrow { display: flex; gap: .5rem; align-items: stretch; }
.copyrow input { flex: 1; font-family: var(--mono); font-size: .82rem; }
.paysteps { list-style: none; padding: 0; margin: 0; counter-reset: p; }
.paysteps li { counter-increment: p; padding: .7rem 0 .7rem 2.4rem; position: relative; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--txt-2); }
.paysteps li:last-child { border-bottom: 0; }
.paysteps li::before {
  content: counter(p); position: absolute; inset-inline-start: 0; top: .7rem;
  width: 24px; height: 24px; border-radius: 50%; background: var(--lime-glow);
  border: 1px solid rgba(204, 228, 100, .28); color: var(--lime);
  display: grid; place-items: center; font-family: var(--mono); font-size: .74rem;
}

/* ── admin ──────────────────────────────────────────────────────── */
.adm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.adm-tabs a { padding: .45rem .9rem; border-radius: var(--r-sm); background: var(--bg-1);
  border: 1px solid var(--line); font-size: .88rem; color: var(--txt-2); }
.adm-tabs a.on { background: var(--lime); border-color: var(--lime); color: #0a0d0a; font-weight: 600; }
.inline-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-form select, .inline-form input {
  padding: .35rem .55rem; font: inherit; font-size: .82rem; background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 6px; color: var(--txt);
}

/* ── misc ───────────────────────────────────────────────────────── */
.notice { background: var(--bg-1); border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: 1.6rem; text-align: center; color: var(--muted); }
.empty { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
.mono { font-family: var(--mono); }
.up { color: var(--up); } .down { color: var(--down); }
.center { text-align: center; }
.hr { height: 1px; background: var(--line); border: 0; margin: 2rem 0; }
.crumb { font-size: .85rem; color: var(--muted); padding-top: 1.4rem; }
.crumb a:hover { color: var(--lime); }

/* ── footer ─────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); background: var(--bg-1); margin-top: 4rem; }
.foot-in { display: grid; grid-template-columns: 1.4fr .7fr .7fr 1.4fr; gap: 2rem; padding: 3rem 0 2rem; }
.foot-brand .logo { --logo-h: inherit; }
.foot-tag {
  color: var(--muted); font-size: .85rem; margin-top: .8rem;
  /* Line up with the WORDMARK, not with the mark beside it.
     The logo is [mark][gap][word], so the word starts one mark-width plus
     one gap in. Sitting at the container edge left the tagline hanging
     under the mark and reading slightly out of true. Computed from the
     same variables the logo uses, so it holds at any --logo-h, and
     margin-inline-start so it mirrors correctly in Arabic. */
  margin-inline-start: calc(var(--logo-h, 30px) * 0.862 + .6rem);
}
.foot-col h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.foot-col a { display: block; color: var(--txt-2); font-size: .9rem; padding: .22rem 0; }
.foot-col a:hover { color: var(--lime); }
.foot-legal p { font-size: .78rem; color: var(--muted); line-height: 1.65; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.2rem 0 2rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.foot-langs { display: flex; gap: .8rem; font-family: var(--mono); }
.foot-langs a.on { color: var(--lime); }

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .paygrid { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: block; }
  .topbar-right .btn { display: none; }
  .mobnav[data-open] { display: flex; }
  .steps { grid-template-columns: 1fr; }
  .dhead-right { margin-inline-start: 0; text-align: start; width: 100%; }
  .foot-in { grid-template-columns: 1fr; }
}

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

/* ═══════════════════ v2 ═══════════════════ */

/* ── hero brand block: the real logo, big, with the slogan ─────── */
.hero-brand { text-align: center; padding: 1rem 0 2.2rem; }
.logo-stack {
  --logo-h: 120px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1.1rem;
  height: auto;
}
.logo-stack .logo-mark { height: var(--logo-h); width: calc(var(--logo-h) * 0.862); }
.logo-stack .logo-word { height: 34px; width: calc(34px * 8.369); max-width: 88vw; }
.hero-slogan {
  margin: 1.1rem 0 0;
  font-family: var(--mono); font-size: clamp(.62rem, 1.7vw, .85rem);
  letter-spacing: .34em; text-transform: uppercase; color: var(--lime-dim);
  white-space: nowrap;
}
.hero { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* ── 5-tile stat strip ─────────────────────────────────────────── */
.stats-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .stats-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-5 { grid-template-columns: repeat(2, 1fr); } }

/* ── market pulse v2 ───────────────────────────────────────────── */
.pulse-matrix { display: block; width: 100%; height: 96px; margin: .9rem 0 .3rem; }
.pulse-chg { font-family: var(--mono); font-size: .8rem; font-weight: 700; min-width: 76px; }
.pulse-chg.up { color: var(--up); } .pulse-chg.down { color: var(--down); }
.pulse-chg.flat { color: var(--muted); }
.pulse-hours { font-family: var(--mono); font-size: .74rem; color: var(--txt-2);
  min-width: 88px; text-align: end; letter-spacing: .02em; }

/* ── card v2 ───────────────────────────────────────────────────── */
.levels-2 { grid-template-columns: repeat(2, 1fr); }
.lv-k.k-size i { background: var(--lime); }
.tkr-emoji { font-size: 1rem; }
.tradepl {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .8rem; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: .82rem; color: var(--txt-2);
}
.tradepl b { font-size: 1.05rem; }
.tradepl.up b { color: var(--up); } .tradepl.down b { color: var(--down); }
.tradepl.up { border-color: rgba(87, 209, 141, .25); }
.tradepl.down { border-color: rgba(229, 114, 106, .25); }
.ladder-v2 { flex-direction: column; align-items: stretch; gap: .45rem; }
.ladder-v2 .lad { gap: .55rem; }
.lad-txt { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.prechip {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: .25rem .6rem; border-radius: 999px;
  background: rgba(232, 184, 75, .12); color: var(--gold);
  border: 1px solid rgba(232, 184, 75, .32);
}
.dhead-right .prechip { display: inline-block; margin-inline-start: .4rem; }

/* ── predictions: the explanation line ─────────────────────────── */
.pred-x { font-size: .8rem; color: var(--muted); margin: .45rem 0 0; line-height: 1.5; }

/* ── the personal-capital widget ───────────────────────────────── */
.eqform { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.eqform label { font-size: .78rem; color: var(--txt-2); }
.eqform input {
  width: 130px; padding: .45rem .6rem; font: inherit; font-size: .88rem;
  font-family: var(--mono);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--txt);
}
.eqform input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime-glow); }
.growthline {
  margin-bottom: 1rem; padding: .7rem 1rem; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--lime-glow), transparent 70%);
  border: 1px solid rgba(204, 228, 100, .22);
  font-size: .92rem; color: var(--txt);
}
.growthline b { font-family: var(--mono); color: var(--lime); }

/* ── footer story ──────────────────────────────────────────────── */
.foot-story { padding: 1.6rem 0 .4rem; border-top: 1px solid var(--line); }
.foot-story h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lime); margin-bottom: .5rem; }
.foot-story p { color: var(--txt-2); font-size: .9rem; max-width: 72ch; margin: 0 0 1rem; }

/* ═══════════════════ v3 ═══════════════════ */

/* ── bigger logo everywhere (v4: +15% over v3) ──────────────────── */
.logo { --logo-h: 55px; }
/* Declared on the brand, not the logo, so the tagline beside it can
   read the same value. It used to be set here and again above, and
   the tagline was indented from the smaller of the two. */
.foot-brand { --logo-h: 46px; }
.logo-stack { --logo-h: 196px; }
.logo-stack .logo-word { height: 53px; width: calc(53px * 8.369); }
.hero-slogan { font-size: clamp(.66rem, 1.8vw, .95rem); letter-spacing: .3em; }
/* the bar grows with the mark, or the logo sits on the nav */
.topbar-in { height: 90px; }
@media (max-width: 760px) {
  .logo { --logo-h: 44px; }
  .logo-stack { --logo-h: 124px; }
  .logo-stack .logo-word { height: 35px; width: calc(35px * 8.369); }
  .hero-slogan { letter-spacing: .18em; white-space: normal; }
  .topbar-in { height: 76px; }
}

/* ── card v3 ────────────────────────────────────────────────────── */
.sparkwrap { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: .6rem .75rem .3rem; }
.spark-h { display: flex; align-items: baseline; justify-content: space-between;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spark-h b { font-size: .95rem; letter-spacing: 0; text-transform: none; }
.spark { display: block; width: 100%; height: 64px; }

.signow {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .65rem .85rem; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line-2);
}
.signow-k { display: block; font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); }
.signow-v { font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.signow.s-buy    { border-color: rgba(87,209,141,.4);  background: var(--up-bg); }
.signow.s-buy    .signow-v { color: var(--up); }
.signow.s-hold   { border-color: rgba(204,228,100,.34); background: var(--lime-glow); }
.signow.s-hold   .signow-v { color: var(--lime); }
.signow.s-sell   { border-color: rgba(232,184,75,.4);  background: rgba(232,184,75,.1); }
.signow.s-sell   .signow-v { color: var(--gold); }
.signow.s-closed { border-color: rgba(76,141,246,.4);  background: rgba(76,141,246,.1); }
.signow.s-closed .signow-v { color: var(--blue); }
.signow-r { text-align: end; }
.signow-price { display: block; font-size: 1.15rem; font-weight: 700; }
.signow-price i { font-style: normal; font-size: .72rem; color: var(--muted); }
.signow-pl { display: block; font-size: .78rem; }
.signow-pl.up { color: var(--up); } .signow-pl.down { color: var(--down); }
.signow-pl.flat { color: var(--muted); }

.metrics { flex-wrap: wrap; gap: .9rem 1.2rem; }
.cardnotes { border-top: 1px solid var(--line); padding-top: .65rem; }
.cardnotes p { margin: 0 0 .35rem; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.cardnotes p:last-child { margin-bottom: 0; }

/* ── the two labelled reads at the foot of a card ────────────────────
   The action and the technical read answer different questions — what to
   do, and what the tape looks like — so they are labelled and separated
   rather than run together as two more grey lines. Cards are auto-height
   in an auto-fill grid, so the extra segment lengthens the card on its own;
   what it needs is contrast, not a height. */
.cardnotes .ainote { color: var(--txt-2); }
.cardnotes .ainote b { color: var(--lime); font-weight: 700; }

.cardnotes .tanote {
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px dashed var(--line);
  color: var(--txt-2);
}
.cardnotes .tanote b {
  display: block; margin-bottom: .12rem;
  color: var(--muted); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
}
.prechip.stale { background: rgba(229,114,106,.12); color: var(--down);
  border-color: rgba(229,114,106,.32); }

/* ── the standing recommendation panel ──────────────────────────── */
.recopanel { border-color: rgba(204,228,100,.3);
  background: linear-gradient(140deg, rgba(204,228,100,.07), var(--bg-1) 60%); }
.recotext { font-size: 1.02rem; color: var(--txt); margin: 0 0 .6rem; line-height: 1.6; }

/* ── simulator ──────────────────────────────────────────────────── */
.simform { margin-bottom: 1.4rem; }
.simgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem; align-items: end; margin-bottom: .4rem; }
.field-actions { display: flex; align-items: flex-end; }
.field-actions .btn { width: 100%; }
.simticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.simtick {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: .85rem; transition: border-color .15s, background .15s;
}
.simtick:hover { border-color: var(--line-2); }
.simtick.on { border-color: var(--lime); background: var(--lime-glow); }
.simtick input { width: 15px; height: 15px; accent-color: var(--lime); flex: 0 0 auto; }
.simtick-sym { font-weight: 700; }
.simtick-name { color: var(--muted); font-size: .78rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.simtick-pl { font-size: .78rem; }
.simpick-actions { display: flex; gap: .45rem; margin: .8rem 0 0; }

/* ── admin: the multi-market grant ──────────────────────────────── */
.inline-form select[multiple] { min-width: 88px; padding: .2rem .3rem; }

/* The v3 logo is much wider, so the nav needs room back between the phone
   breakpoint and a comfortable desktop — otherwise "How it works" wraps
   onto three lines. */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .logo { --logo-h: 44px; }
  .nav  { gap: 1.05rem; font-size: .9rem; }
  .topbar-in { gap: 1rem; height: 80px; }
}
@media (max-width: 900px) {
  .nav { gap: .8rem; font-size: .85rem; }
  .topbar-right .btn { padding: .4rem .7rem; font-size: .8rem; }
}

/* ═══════════════════ v3.1 ═══════════════════ */

/* ── pulse: clock is the centrepiece, markets sit beneath ───────── */
.pulse-clockbox {
  text-align: center;
  padding: .4rem 0 1rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}
.pulse-matrix { display: block; width: 100%; height: 128px; }
.pulse-clockbox .pulse-date { border: 0; padding: .35rem 0 0; }

.pulse-mkt { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.pulse-mkt:last-child { border-bottom: 0; padding-bottom: 0; }
.pulse-mkt .pulse-row { border-bottom: 0; padding: 0; }

.pulse-idx { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .45rem 0 0 1.7rem; }
.idx { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .78rem; }
.idx-k { color: var(--muted); letter-spacing: .04em; }
.idx-v { color: var(--txt); font-weight: 700; }
.idx-c { font-weight: 700; }
.idx-c.up { color: var(--up); } .idx-c.down { color: var(--down); } .idx-c.flat { color: var(--muted); }

/* ── card: the ladder pip bar ───────────────────────────────────── */
.ladderbar { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-bottom: .5rem; }
.ladderbar .lad { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; }
.ladderbar b { font-size: .76rem; color: var(--txt-2); font-weight: 700; }

/* ── simulator: the equal-weight statement ──────────────────────── */
.allocnote {
  margin-bottom: 1.2rem; padding: .8rem 1.1rem; border-radius: var(--r);
  background: linear-gradient(90deg, var(--lime-glow), transparent 72%);
  border: 1px solid rgba(204, 228, 100, .24);
  font-size: .92rem; color: var(--txt);
}

/* ── mobile ─────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .pulse { padding: 1.1rem; }
  .pulse-matrix { height: 104px; }
  .pulse-clockbox { padding-bottom: .8rem; }
  .pulse-row { flex-wrap: wrap; gap: .5rem; font-size: .78rem; }
  .pulse-city { display: none; }
  .pulse-hours { min-width: auto; }
  .pulse-idx { padding-inline-start: 1.4rem; }
  .signow { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .signow-r { text-align: start; }
  .simgrid { grid-template-columns: 1fr; }
  .simticks { grid-template-columns: 1fr; }
  .metrics { gap: .8rem 1rem; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .chartctl button { width: 32px; height: 32px; }  /* comfortable tap target */
}

/* the ladder position, inline with the signal word */
.signow-step {
  margin-inline-start: .45rem; padding: .1rem .42rem;
  border-radius: 6px; font-family: var(--mono); font-size: .8rem;
  background: rgba(255, 255, 255, .09); color: inherit; vertical-align: middle;
}

/* v34.17: "SELL SL" -- the exit was the stop-loss */
.signow-step.is-sl {
  background: var(--down-bg); color: var(--down);
  border: 1px solid rgba(229, 114, 106, .38); font-weight: 700; letter-spacing: .04em;
}

/* stop-loss badge on a card — the one exit a reader must not miss */
.badge.s-stop {
  background: var(--down-bg); color: var(--down);
  border-color: rgba(229, 114, 106, .38);
  margin-inline-start: .35rem;
}
.card-top { flex-wrap: wrap; }
/* the period a simulated P/L covers, under its label */
.kpi-sub {
  display: block; margin-top: .1rem;
  font-size: .68rem; letter-spacing: .04em; color: var(--lime-dim);
  text-transform: none;
}

/* per-trade readout on the card sparkline */
.sparkbox { position: relative; }
.sparktip {
  position: absolute; top: -4px; z-index: 6; pointer-events: none;
  background: rgba(20, 26, 19, .97); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: .35rem .55rem;
  font-family: var(--mono); font-size: .7rem; line-height: 1.5; color: var(--txt-2);
  white-space: nowrap; opacity: 0; transition: opacity .12s;
  box-shadow: var(--shadow);
}
.sparktip.on { opacity: 1; }
.sparktip b.up { color: var(--up); } .sparktip b.down { color: var(--down); }
.spark { cursor: crosshair; touch-action: pan-y; }

/* The ticker tag carries the whole identifier, so it sizes to the text
   rather than clipping it to three characters. */
.tkr-mark {
  width: auto; min-width: 46px; padding: 0 .5rem;
  letter-spacing: .01em;
}
.tkr-mark.len-4 { font-size: .74rem; }
.tkr-mark.len-5 { font-size: .68rem; letter-spacing: 0; }
.dhead .tkr-mark { min-width: 62px; padding: 0 .6rem; font-size: .95rem; }
.dhead .tkr-mark.len-4 { font-size: .88rem; }
.dhead .tkr-mark.len-5 { font-size: .8rem; }

/* ── Our story, on the home page ──────────────────────────────────────
   The mark sits behind the words at 10% opacity — present enough to read
   as brand, faint enough that the text never fights it. It is masked from
   the same PNG as the header logo, so it stays crisp at any size. */
.storyband {
  position: relative; overflow: hidden;
  margin: 2.4rem 0 .5rem;
  padding: 2.1rem 2.4rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--bg-2), var(--bg-1) 60%);
}
.storyband-mark {
  position: absolute; inset-block: -18%; inset-inline-end: -4%;
  width: 320px; opacity: .10; pointer-events: none;
  background-color: var(--lime);
  -webkit-mask-image: url("/assets/img/mark.png");
  mask-image: url("/assets/img/mark.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.storyband-in { position: relative; max-width: 62ch; }
.storyband h2 {
  font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .7rem;
}
.storyband p { margin: 0; color: var(--txt-2); font-size: 1.02rem; line-height: 1.72; }

@media (max-width: 720px) {
  .storyband { padding: 1.5rem 1.3rem; }
  .storyband-mark { width: 200px; inset-inline-end: -12%; opacity: .08; }
  .storyband h2 { font-size: 1.28rem; }
  .storyband p { font-size: .96rem; }
}

/* small explanatory line under a form label */
.fieldnote {
  margin: -.2rem 0 .6rem; font-size: .8rem; color: var(--muted);
}

/* ── How it works: the ladder, drawn ──────────────────────────────────
   The words "Buy 3x" mean nothing until you see three slices land on
   three closes, so the page shows the shape rather than describing it. */
.panel-p { color: var(--txt-2); line-height: 1.72; margin: 0 0 1rem; }
.panel-note { margin-top: 1rem; }

.ladderfig {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-1); padding: 1rem 1.1rem; margin: 0 0 1.4rem;
}
.ladderfig-h {
  display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: .9rem; font-size: .82rem; color: var(--muted);
}
.ladderfig-h b { font-size: .95rem; letter-spacing: .04em; }
.ladderfig-h b.up { color: var(--up); }
.ladderfig-h b.gold { color: var(--gold); }

.lsteps { display: flex; gap: .55rem; align-items: flex-end; }
.lstep {
  flex: 1 1 0; min-width: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.lstep-frac { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
/* the bar is the capital slice; filled once that close has traded */
.lstep-bar {
  display: block; width: 100%; height: 54px; border-radius: 6px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  position: relative; overflow: hidden;
}
.lstep-bar i { position: absolute; inset: 0; opacity: .18; }
.lstep.buy  .lstep-bar i { background: var(--up); }
.lstep.sell .lstep-bar i { background: var(--gold); }
.lstep.done.buy  .lstep-bar { border-color: var(--up);   background: rgba(87, 209, 141, .18); }
.lstep.done.sell .lstep-bar { border-color: var(--gold); background: rgba(232, 184, 75, .18); }
.lstep.done .lstep-bar i { opacity: 1; }
.lstep.done.buy  .lstep-bar i { background: var(--up); }
.lstep.done.sell .lstep-bar i { background: var(--gold); }
.lstep-k { font-size: .74rem; color: var(--txt-2); }
.lstep-s { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lstep.done .lstep-s { color: var(--lime); }

/* one candle, with the two levels an order can improve on */
.candlefig { margin: 1.2rem 0 1rem; }
.candlefig svg { width: 100%; max-width: 700px; height: auto; display: block; }
.cf-wick  { stroke: var(--txt-2); stroke-width: 2; }
.cf-body       { stroke-width: 1.5; }
.cf-body.up    { fill: rgba(87, 209, 141, .22); stroke: var(--up); }
.cf-body.down  { fill: rgba(229, 114, 106, .22); stroke: var(--down); }
.cf-cap        { font: 700 12px var(--sans); letter-spacing: .02em; }
.cf-cap.up     { fill: var(--up); } .cf-cap.down { fill: var(--down); }
.cf-note       { font: 600 11px var(--sans); }
.cf-note.up    { fill: var(--up); } .cf-note.gold { fill: var(--gold); }
.cf-lvl   { stroke-width: 1; stroke-dasharray: 4 4; }
.cf-lvl.hi { stroke: var(--gold); } .cf-lvl.lo { stroke: var(--up); }
.cf-lvl.cl { stroke: var(--line-2); stroke-dasharray: none; }
.cf-t     { font: 600 11px var(--sans); }
.cf-t.hi  { fill: var(--gold); } .cf-t.lo { fill: var(--up); } .cf-t.cl { fill: var(--muted); }
.cf-dot.buy  { fill: var(--up); }
.cf-dot.sell { fill: var(--gold); }
.cf-dot.base { fill: var(--bg-1); stroke: var(--muted); stroke-width: 1.5; }
.cf-arrow.buy  { stroke: var(--up);   stroke-width: 1.5; color: var(--up); }
.cf-arrow.sell { stroke: var(--gold); stroke-width: 1.5; color: var(--gold); }

.nextc-list { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
.nextc-list li { margin-bottom: .6rem; color: var(--txt-2); line-height: 1.65; }
.nextc-list li.up   { list-style: none; position: relative; }
.nextc-list li.gold { list-style: none; position: relative; }
.nextc-list li.up::before,
.nextc-list li.gold::before {
  content: "▸"; position: absolute; inset-inline-start: -1.1rem;
}
.nextc-list li.up::before   { color: var(--up); }
.nextc-list li.gold::before { color: var(--gold); }

.notice-warn {
  margin-top: 1rem; text-align: start;
  border-color: rgba(232, 184, 75, .3); background: rgba(232, 184, 75, .07);
}

@media (max-width: 640px) {
  .lsteps { gap: .35rem; }
  .lstep-bar { height: 42px; }
  .lstep-k, .lstep-s { font-size: .62rem; }
}

/* ── the bot pitch under the four steps ─────────────────────────────
   The steps are all things the reader has to do. This is the offer to do
   none of them, so it reads as a break in the page, not a fifth step. */
.botpitch { margin-top: 2.4rem; text-align: center; }
.botpitch-t {
  max-width: 46ch; margin: 0 auto;
  font-size: 1.12rem; line-height: 1.6; color: var(--txt);
}
.botpitch-cta { margin: .4rem 0 0; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

.robot { display: block; width: 180px; height: auto; margin: .7rem auto .3rem; overflow: visible; }
.robot .rb-beacon { animation: rb-pulse 2.6s ease-in-out infinite; }
.robot .rb-eye    { animation: rb-blink 6s steps(1, end) infinite; }

@keyframes rb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes rb-blink { 0%, 96% { opacity: 1; } 97%, 99% { opacity: .15; } }

@media (prefers-reduced-motion: reduce) {
  .robot .rb-beacon, .robot .rb-eye { animation: none; }
}
@media (max-width: 560px) { .robot { width: 144px; } }

/* ── track record: what the month-by-month table is actually for ────
   A red month in the table reads as a failure until something says
   otherwise. This line says it, and the three windows under it show it. */
.track-disc {
  max-width: 70ch; margin: -.4rem 0 1.6rem;
  color: var(--txt-2); font-size: 1.02rem; line-height: 1.75;
}
.track-disc::before {
  content: ''; display: block; width: 34px; height: 2px;
  margin-bottom: .9rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--up), transparent);
}
.stats-3 { grid-template-columns: repeat(3, 1fr); margin: 0 0 .9rem; }
@media (max-width: 560px) { .stats-3 { grid-template-columns: 1fr; } }
.track-x { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0 0 2rem; }

/* a save actually happened — the simulator used to reload with no word of it */
.notice.ok {
  margin-bottom: 1.2rem; text-align: start;
  border-color: rgba(87, 209, 141, .34); background: rgba(87, 209, 141, .08);
  color: var(--up);
}

/* ── trial + crypto checkout ─────────────────────────────────────────
   The quote is the whole page: one amount, one address, one clock. */
.tierbadge.tier-T { background: rgba(232, 184, 75, .16); color: var(--gold);
                    border-color: rgba(232, 184, 75, .34); }

.paybox .panel-h { display: flex; align-items: center; gap: .8rem; }
.payamt {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; margin-bottom: 1.1rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg-1);
}
.payamt-k { display: block; font-size: .78rem; color: var(--muted); }
.payamt-v { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; }
.payamt-v i { font-style: normal; font-size: .9rem; color: var(--muted); font-weight: 600; }
.payamt-x { display: block; font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.payttl {
  font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--lime);
  align-self: center;
}
.payttl.down { color: var(--down); font-size: .95rem; }

.copyrow { display: flex; gap: .5rem; align-items: stretch; }
.addr {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap;
  padding: .6rem .7rem; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: .85rem; color: var(--txt);
}
.paysteps { margin: 1rem 0; padding-inline-start: 1.2rem; color: var(--txt-2); }
.paysteps li { margin-bottom: .35rem; }
.hashform { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* the pricing editor, and the badge it can put on a plan card */
.plan { position: relative; }
.plan-badge {
  position: absolute; top: -.7rem; inset-inline-start: 1.2rem;
  padding: .18rem .6rem; border-radius: 999px;
  background: var(--lime); color: #000;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.planedit .panel-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.planedit textarea {
  width: 100%; resize: vertical; font: inherit; line-height: 1.5;
  padding: .6rem .7rem; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--txt);
}
.chk { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }

/* the monthly column chart and its legend dots */
.barbox { position: relative; }
.barbox .tip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: rgba(12, 16, 12, .95); border: 1px solid var(--line-2);
  border-radius: 8px; padding: .5rem .6rem; font-size: .78rem; line-height: 1.5;
  min-width: 120px; z-index: 3;
}
.barbox .tip .k { color: var(--muted); display: inline-block; min-width: 52px; }
.barbox .tip .up { color: var(--up); } .barbox .tip .down { color: var(--down); }
.legdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-inline-end: .3rem; vertical-align: baseline;
}
.legdot.up { background: var(--up); } .legdot.lime { background: var(--lime); }

/* the "how do I get these?" disclosures on the service panels */
.howto {
  margin: 0 0 1rem; padding: .5rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-1);
}
.howto summary { cursor: pointer; font-size: .85rem; color: var(--lime); font-weight: 600; }
.howto ol { margin: .7rem 0 .2rem; padding-inline-start: 1.3rem; color: var(--txt-2); }
.howto li { margin-bottom: .4rem; font-size: .88rem; line-height: 1.6; }
.fieldnote.down { color: var(--down); }

/* exactly what a subscriber's message will look like */
.msgpreview {
  margin: 0; padding: .8rem .9rem; border-radius: 8px; overflow-x: auto;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font: 400 .8rem/1.7 var(--mono); color: var(--txt-2);
  white-space: pre-wrap; word-break: break-word;
}

/* "2 of 3 markets" under a stat whose window not every market can answer */
.cover { display: block; font-size: .68rem; color: var(--muted); opacity: .8; margin-top: .1rem; }
.sendlog ul { margin: .7rem 0 .2rem; padding-inline-start: 1.1rem; list-style: none; }
.sendlog li { font-family: var(--mono); font-size: .78rem; margin-bottom: .3rem; }
.sendlog li.up { color: var(--up); } .sendlog li.down { color: var(--down); }

/* the live/simulate switch: it must not look like an ordinary checkbox */
.chk-live { margin-inline-start: 1.2rem; color: var(--gold); font-weight: 600; }

/* ── the trading bot section ──────────────────────────────────────────
   Its own space under the simulator: this is the one feature on the site
   that spends real money, so it gets room to explain itself. */
.botsec { margin: 2.4rem 0 3rem; }
.botsec-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.botsec-h h2 { margin: .4rem 0 .3rem; font-size: 1.7rem; letter-spacing: -.01em; }
.botsec-sub { margin: 0; color: var(--txt-2); max-width: 62ch; line-height: 1.7; }

.botpill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--txt-2);
}
.botpill.dry  { color: var(--up);   border-color: rgba(87, 209, 141, .4);  background: var(--up-bg); }
.botpill.live { color: var(--down); border-color: rgba(229, 114, 106, .45); background: rgba(229,114,106,.1); }

.botcard {
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1) 60%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem 1.6rem; margin-bottom: 1.2rem;
}
.botcard h3 { margin: 0 0 .7rem; font-size: 1.12rem; }

.botplot { margin: 1rem 0 .4rem; }
.botplot canvas { display: block; width: 100%; border-radius: var(--r); background: #080b08; }

/* the four things it does, numbered */
.botsteps { counter-reset: bs; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.botsteps li {
  counter-increment: bs; position: relative;
  padding-inline-start: 2.1rem; margin-bottom: .75rem;
  color: var(--txt-2); line-height: 1.65;
}
.botsteps li::before {
  content: counter(bs); position: absolute; inset-inline-start: 0; top: .1rem;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lime-glow); color: var(--lime);
  font: 700 .74rem var(--mono);
}
.botsteps b { color: var(--txt); }

.botfacts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.botfacts div { display: flex; flex-direction: column; gap: .15rem; }
.botfacts span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.botfacts b { font-size: .92rem; color: var(--txt); }

/* secrets: masked by default, with an eye to check what you pasted */
.secretrow { display: flex; gap: .4rem; }
.secretrow input { flex: 1 1 auto; min-width: 0; }
.eye {
  flex: 0 0 auto; width: 40px; border-radius: 8px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--muted);
  display: grid; place-items: center; transition: color .15s, border-color .15s;
}
.eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.eye:hover { color: var(--txt); }
.eye.on { color: var(--lime); border-color: rgba(204, 228, 100, .4); }
.saved-tag { color: var(--up); font-size: .7rem; font-weight: 700; margin-inline-start: .4rem; }

.botswitches { display: flex; flex-wrap: wrap; gap: .4rem 0; margin-top: .4rem; }

.botlog-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.botlog-stats { display: flex; gap: 1.1rem; font-size: .78rem; color: var(--muted); }
.botlog-stats b { color: var(--txt); font-family: var(--mono); margin-inline-start: .35rem; }
.botempty { color: var(--muted); font-size: .9rem; margin: 1rem 0 0; }
.botlog td { vertical-align: middle; }
.botlog .nowrap { white-space: nowrap; }
.evtag { font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.evtag.ev-buy { color: var(--up); } .evtag.ev-sell { color: var(--gold); }
.evtag.ev-error, .evtag.ev-stop { color: var(--down); }

.botalert {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-top: 1.2rem; padding: .95rem 1.1rem;
  border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg-1);
}
.botalert.on { border-style: solid; border-color: rgba(87, 209, 141, .35); }
.botalert p { margin: .2rem 0 0; font-size: .84rem; color: var(--muted); max-width: 58ch; }

@media (max-width: 640px) {
  .botcard { padding: 1.1rem 1rem; }
  .botsec-h h2 { font-size: 1.35rem; }
}

/* the bot page: status strip, the signed-out call to action, the pointer */
.botstate {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
  padding: .8rem 1.1rem; border-radius: var(--r);
  background: var(--bg-2); border: 1px solid var(--line);
}
.botstate-k { font-size: .72rem; color: var(--muted); text-transform: uppercase;
              letter-spacing: .06em; display: block; }
.botstate-l b { font-size: .95rem; }
.botstate-l b.muted { color: var(--muted); font-weight: 600; }

.botcta, .botlink {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin: 1.6rem 0;
  padding: 1.3rem 1.5rem; border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--bg-2), var(--bg-1) 60%);
  border: 1px solid var(--line-2);
}
.botcta h3, .botlink b { margin: 0 0 .3rem; font-size: 1.1rem; display: block; }
.botcta p, .botlink p { margin: 0; color: var(--txt-2); max-width: 56ch; font-size: .92rem; }
.botcta-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* which tickers the bot may trade, and what each one gets */
.botpicks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: .5rem; margin-top: .3rem;
}
/* THE TILE IS THE WRAPPER. The tick row and the share row share one frame so a
   coin reads as one object. The share box sits outside the <label> on purpose:
   inside it, every click on the number would toggle the checkbox. */
.botpick-w {
  border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line-2);
  transition: border-color .15s, background .15s;
}
.botpick-w:hover { border-color: var(--muted); }
.botpick-w.on { border-color: var(--lime); background: var(--lime-glow); }
.botpick {
  display: flex; align-items: flex-start; gap: .5rem;
  cursor: pointer; padding: .5rem .6rem .45rem;
}
.botpick input { accent-color: var(--lime); flex: 0 0 auto; margin-top: .1rem; }
/* Name on one line, the numbers on the next. Laid out as nested flex rather
   than a spanning grid cell: the grid version wrapped "8 months" mid-phrase
   whenever a tile was narrow. */
.botpick-id { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.botpick-sym {
  font-family: var(--mono); font-size: .8rem; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.botpick-meta { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.botpick-pl { font-size: .74rem; }
/* The period that P/L was earned over. Quiet on purpose: a percentage with no
   period invites the reader to supply one, and they supply a shorter one. */
.botpick-span { font-size: .62rem; color: var(--muted); letter-spacing: .01em; }
.botpick-wt {
  display: flex; align-items: center; justify-content: flex-end; gap: .3rem;
  padding: .25rem .6rem .4rem; border-top: 1px dashed var(--line-2);
}
.botpick-wt-k { font-size: .6rem; color: var(--muted); letter-spacing: .01em; }
/* Native spinners are removed: at this size the arrows were taller than the
   number and made a 4-character field look like a control panel. */
.botpick-wt input::-webkit-outer-spin-button,
.botpick-wt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.botpick-wt input {
  -moz-appearance: textfield; appearance: textfield;
  width: 3.1rem; text-align: right; font-size: .72rem; line-height: 1.2;
  padding: .12rem .3rem; border-radius: 5px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: inherit; font-family: var(--mono);
}
.botpick-wt input:disabled { opacity: .3; cursor: not-allowed; }
.botpick-w.on .botpick-wt input { border-color: var(--lime); }
.botpicks-actions {
  display: flex; gap: .5rem; margin: .7rem 0 0;
  align-items: center; flex-wrap: wrap;
}
.botw-sum { font-size: .74rem; color: var(--muted); }
.botw-sum.ok   { color: var(--lime); }
.botw-sum.part { color: var(--gold); }
.botw-sum.over { color: var(--down); font-weight: 600; }
.hud-tile-yr {
  display: block; font-style: normal; font-size: .56rem; color: var(--muted);
  letter-spacing: .03em; margin-top: .05rem; line-height: 1.1;
}

.botsplit {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin: 1rem 0 .2rem; padding: .8rem 1rem; border-radius: var(--r);
  background: var(--lime-glow); border: 1px solid rgba(204, 228, 100, .28);
}
.botsplit-k { font-size: .74rem; color: var(--muted); text-transform: uppercase;
              letter-spacing: .06em; }
.botsplit b { font-family: var(--mono); font-size: 1.02rem; color: var(--lime); }
.botsplit-x { font-size: .76rem; color: var(--muted); margin-inline-start: auto; }

/* ── vendor data fault ───────────────────────────────────────────────
   Shown even on a locked card. "The data behind this is stale" is not a
   paid insight, and a visitor who cannot see it is being misled. */
/* Boxed and gold, not a quiet footnote: this says the data behind the card
   is not what it should be, and that has to be impossible to skim past.
   Scoped under .cardnotes so it beats the shared `p` colour there. */
.cardnotes .dinote {
  margin: .6rem 0 0; padding: .45rem .6rem;
  border: 1px solid rgba(232, 184, 75, .40);
  border-radius: var(--r-sm);
  background: rgba(232, 184, 75, .11);
  color: var(--gold);
  font-size: .72rem; line-height: 1.45; font-weight: 500;
}

/* ── crypto checkout: the QR and the network it belongs to ──────────
   The network label is repeated next to the address and again as a
   warning, because USDT here is on TON: a customer who assumes Tron and
   sends TRC20 loses the money outright, and nothing in this codebase can
   undo that. Redundant text is cheaper than a lost payment. */
.payaddr { display: flex; gap: 1.1rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.payaddr-in { flex: 1 1 260px; min-width: 0; }
.payqr { margin: 0; text-align: center; flex: 0 0 auto; }
.payqr img {
  width: 168px; height: 168px; display: block;
  background: #fff; padding: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}
.payqr figcaption { margin-top: .35rem; font-size: .7rem; color: var(--muted); }
.paynet { margin: .5rem 0 0; font-size: .78rem; color: var(--txt-2); }
.paynet b { color: var(--lime); }
.paynet-warn {
  display: block; margin-top: .3rem; padding: .4rem .55rem;
  border: 1px solid rgba(232, 184, 75, .4); border-radius: var(--r-sm);
  background: rgba(232, 184, 75, .1); color: var(--gold);
  font-size: .72rem; line-height: 1.45;
}
.fieldnote { margin: .3rem 0 0; font-size: .72rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 460px) { .payqr { margin: 0 auto; } }

/* ── the connected account, read back ───────────────────────────────
   Sits directly under the status row: the first thing a user should see
   after saving keys is their own balances, because that is the proof the
   connection worked. */
.folio {
  margin: 1rem 0 1.4rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-1);
}
.folio-h { display: flex; align-items: baseline; justify-content: space-between;
           gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.folio-h h3 { margin: 0; font-size: 1rem; }
.folio-tot { font-size: .82rem; color: var(--muted); }
.folio-tot b { font-family: var(--mono); color: var(--lime); font-size: 1.05rem; margin-inline-start: .3rem; }
.folio-t { width: 100%; border-collapse: collapse; font-size: .84rem; }
.folio-t th { text-align: start; font-weight: 600; color: var(--muted);
              font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
              padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.folio-t td { padding: .42rem .5rem; border-bottom: 1px solid var(--line); }
.folio-t tr:last-child td { border-bottom: 0; }
.folio-t .num { text-align: end; }
.folio-t .mono { font-family: var(--mono); }
.folio-x { margin: .6rem 0 0; font-size: .72rem; color: var(--muted); line-height: 1.55; }
.folio-empty { margin: 0; font-size: .84rem; color: var(--txt-2); }
.folio-err { margin: 0; font-size: .82rem; color: var(--gold); line-height: 1.55; }
.folio-err .mono { font-family: var(--mono); opacity: .85; }

/* ── footer story: smaller, with the mark beside it ──────────────────
   The mark is dark green rather than lime — down here it is a signature,
   not a call to action, and a bright logo in the footer competes with the
   page above it. Sized from the text block so the two stay balanced
   whatever a translation does to the line count. */
.foot-story { display: flex; gap: 1rem; align-items: center; }
.foot-story-mark {
  flex: 0 0 auto; align-self: stretch;
  width: 54px; min-height: 54px;
  background-color: var(--green-dk);
  -webkit-mask-image: url("/assets/img/mark.png");
          mask-image: url("/assets/img/mark.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  opacity: .95;
}
.foot-story-in { min-width: 0; }
.foot-story h4 { margin: 0 0 .3rem; font-size: .86rem; }
.foot-story p  { margin: 0; font-size: .78rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 520px) {
  .foot-story { gap: .75rem; }
  .foot-story-mark { width: 38px; min-height: 38px; }
}

/* ── the bot's own record ────────────────────────────────────────── */
.botstats { margin: .8rem 0 1rem; }
.botstats .stat-v { font-size: 1.2rem; }
.botstats .stat-k { font-size: .68rem; }
.live-pill { background: rgba(87,209,141,.16); color: var(--up); border-color: rgba(87,209,141,.4); }
.botperf-x { margin: .5rem 0 0; font-size: .72rem; color: var(--muted); line-height: 1.55; }
.botchg { margin-top: .9rem; font-size: .78rem; }
.botchg b { color: var(--txt-2); }
.botchg ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); }
.botchg li { margin: .18rem 0; line-height: 1.5; }
.botchg .mono { font-family: var(--mono); opacity: .8; margin-inline-end: .4rem; }
.tab.soon { opacity: .72; }
.botsoon h3 { color: var(--gold); }

/* ── pre-close banner ────────────────────────────────────────────────
   A signal read off a candle that is still trading. It spans the card at
   the very top — bleeding past the card's own padding — because the one
   misreading of this card that costs money is taking an early read for the
   final one.

   The card clips its corners (overflow:hidden), so the bar inherits the
   rounded top without needing its own radius. Nothing overlaps it: the
   favourite tag and the accent bar are pushed down by exactly its height. */
.prebar {
  margin: -1.25rem -1.25rem 0;
  padding: .4rem .7rem;
  background: var(--gold);
  color: #2a1d00;
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; text-align: center;
  position: relative; z-index: 3;
}
.prebar.stale {
  background: rgba(232, 184, 75, .16);
  color: var(--gold);
  border-bottom: 1px solid rgba(232, 184, 75, .35);
  font-weight: 700; letter-spacing: .04em;
}
/* Make room: both of these are positioned from the top of the card. */
.card.has-pre .favmark { top: 27px; }
.card.has-pre .favtag  { top: 27px; }
.card.has-pre::before  { top: 27px; }

/* ── message builder ─────────────────────────────────────────────────
   Two boxes and a live preview. The preview is the point: the chips only
   matter because you can see, in this market's real numbers, what the
   message will actually look like on a phone. */
.msgb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .9rem 0; }
@media (max-width: 700px) { .msgb-cols { grid-template-columns: 1fr; } }
.msgb-col h3 { margin: 0 0 .2rem; font-size: .84rem; }
.msgb-area {
  min-height: 92px; margin-top: .45rem; padding: .6rem;
  display: flex; flex-wrap: wrap; gap: .45rem; align-content: flex-start;
  background: var(--bg); border: 1px dashed var(--line-2); border-radius: var(--r);
}
.msgb-area.is-empty::after {
  content: '—'; color: var(--muted); font-size: .8rem; align-self: center;
  margin: 0 auto;
}
.msgb-chip {
  padding: .3rem .6rem; border-radius: 999px; cursor: grab;
  background: var(--bg-3); border: 1px solid var(--line-2);
  font-size: .76rem; font-weight: 600; color: var(--txt);
  user-select: none; transition: border-color .15s, transform .1s;
}
.msgb-chip:hover  { border-color: var(--lime); }
.msgb-chip:active { cursor: grabbing; transform: scale(.97); }
.msgb-chip.dragging { opacity: .45; }
.msgb-area.muted .msgb-chip { background: var(--bg-2); color: var(--txt-2); }

.msgb-prev { margin-top: .4rem; }
.msgb-prev-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.msgb-out {
  margin: 0; padding: .8rem .9rem; border-radius: var(--r);
  background: #0b1622; border: 1px solid #1d3350;   /* a phone, not the site */
  color: #e6edf5; font-family: var(--mono); font-size: .76rem;
  line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  max-height: 220px; overflow: auto;
}
.msgb-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.msgb-state { margin: .6rem 0 0; font-size: .8rem; color: var(--txt-2); }
.msgb-state a { color: var(--lime); }

/* Per-market deploy strip.
   One row per market: name, a single button, and what it is doing now. The
   state is spelled out in words rather than left to the button's colour —
   "Stop" on a green button is ambiguous about which state you are in. */
.deploygrid { display: grid; gap: .45rem; margin-top: .5rem; }
.deploy-one {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: .5rem; background: var(--card);
}
.deploy-mk { flex: 1 1 auto; font-weight: 600; }
.deploy-state { font-size: .82rem; color: var(--muted); min-width: 5.5rem; text-align: end; }
.deploy-state.on { color: var(--up); font-weight: 600; }
@media (max-width: 480px) {
  .deploy-one { flex-wrap: wrap; }
  .deploy-state { text-align: start; min-width: 0; }
}

/* Stop-everything button.
   Outlined rather than a solid red slab: it is a legitimate thing to press,
   not a warning to be shouted at. It fills in on hover, so the weight
   arrives at the moment the pointer is actually on it. */
.btn-danger {
  background: var(--down-bg); border-color: var(--down); color: var(--down);
}
.btn-danger:hover { background: var(--down); color: #12100f; }
.deploy-stopall {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line);
}
.deploy-stopall .fieldnote { margin: 0; flex: 1 1 14rem; }

/* ── Bot progress: started with → worth now ──────────────────────────
   Placed above the stat tiles because it answers the question they do
   not: the tiles report inputs and activity, this reports outcome.
   One row on a desktop, stacked on a phone, with the arrow dropped
   there — a → pointing sideways between two stacked cells is noise. */
.botprogress {
  display: grid; gap: .9rem; align-items: stretch;
  grid-template-columns: 1fr auto 1fr auto;
  margin: 0 0 1rem; padding: 1rem 1.1rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
}
.bp-cell { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.bp-k {
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.bp-v { font-size: 1.45rem; font-weight: 650; line-height: 1.15; }
.bp-sub { font-size: .82rem; color: var(--muted); }
.bp-sub.up { color: var(--up); } .bp-sub.down { color: var(--down); }
.bp-arrow { align-self: center; color: var(--muted); font-size: 1.3rem; }
.bp-mode { border-inline-start: 1px solid var(--line); padding-inline-start: 1rem; }
.bp-mode .bp-v { font-size: 1rem; font-weight: 600; }
.bp-mode .bp-sub { font-size: .78rem; line-height: 1.35; }

@media (max-width: 720px) {
  .botprogress { grid-template-columns: 1fr; gap: .8rem; }
  .bp-arrow { display: none; }
  .bp-mode {
    border-inline-start: 0; padding-inline-start: 0;
    border-top: 1px solid var(--line); padding-top: .8rem;
  }
}

/* The two budget modes read as a choice, not as two stray checkboxes. */
.budgetmode .chk {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .55rem .7rem; margin-top: .4rem;
  border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.budgetmode .chk:hover { border-color: var(--line-2); }
.budgetmode .chk:has(input:checked) {
  border-color: var(--lime); background: rgba(198, 233, 106, .07);
}
.budgetmode .chk span { font-size: .88rem; line-height: 1.45; color: var(--muted); }
.budgetmode .chk b { color: var(--txt); font-weight: 620; }


/* Bot diagnosis: the first red row is the answer, so it has to be the
   thing the eye lands on. */
.diagt { width: 100%; border-collapse: collapse; font-size: .88rem; }
.diagt td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.diagt tr:last-child td { border-bottom: 0; }
.diag-i { width: 1.8rem; text-align: center; }
.diag-k { white-space: nowrap; color: var(--muted); }
.diag-v { color: var(--txt); word-break: break-word; }
.diagt .diag-bad { background: var(--down-bg); }
.diagt .diag-bad .diag-k, .diagt .diag-bad .diag-v { color: var(--down); font-weight: 600; }


/* Add-on services: one section, several panels. They are related, so they
   share a heading — but they still need to read as separate things. */
.addons > .panel + .panel,
.addons > .panel + .msgb,
.addons > .msgb + .botlink { margin-top: 1.4rem; }
.addons > .botlink { margin-top: 1.6rem; }


/* ── Mini simulator (home page) ───────────────────────────────────────
   Its own class names, deliberately. The first version reused the
   allocation illustration's .lab-* classes, and editorial.css — which
   loads later — styles those for a completely different component: a
   two-column workspace and labels forced to space-between. The form
   collapsed to unusable stubs. Different component, different names. */
.msim-panel {
  display: grid; gap: 1.25rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line-2); border-radius: 22px;
  background: linear-gradient(120deg, #142430, var(--bg-1));
}

/* Capital gets the room: it is the number people retype. The button sizes
   to its text so it never squeezes the fields next to it. */
.msim-form {
  display: grid; gap: .9rem; align-items: end;
  grid-template-columns: minmax(9rem, 1fr) minmax(11rem, 1.4fr) minmax(10rem, 1fr) auto;
}
.msim-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.msim-field label {
  display: block;                 /* not the flex/space-between editorial sets */
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.msim-form select,
.msim-form input {
  width: 100%; box-sizing: border-box;
  padding: .7rem .75rem; margin: 0;
  font: 600 1.05rem/1.2 var(--mono);
  color: var(--txt); background: #081117;
  border: 1px solid var(--line-2); border-radius: 10px;
}
.msim-form select { font-family: inherit; font-weight: 600; }
.msim-form select:focus, .msim-form input:focus {
  outline: none; border-color: var(--lime);
}
.msim-form .btn { align-self: end; white-space: nowrap; padding-inline: 1.4rem; }

.msim-out {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 1.1rem 1.2rem;
  background: rgba(8, 17, 23, .55);
  border: 1px solid var(--line); border-radius: 16px;
}
.msim-out > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.msim-out span {
  font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.msim-out b {
  font: 650 clamp(1.15rem, 2.1vw, 1.5rem)/1.15 var(--mono);
  overflow-wrap: anywhere;
}
.msim-out b.up { color: var(--up); }
.msim-out b.down { color: var(--down); }

.msim-note { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 900px) {
  .msim-form { grid-template-columns: 1fr 1fr; }
  .msim-form .btn { grid-column: 1 / -1; }
  .msim-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .msim-form { grid-template-columns: 1fr; }
  .msim-out { grid-template-columns: 1fr; }
}


/* Five steps: three then two on a wide screen, which keeps the rows even
   instead of leaving a single card stranded under a row of four. */
.steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps-5 .step { display: flex; flex-direction: column; gap: .5rem; }
.steps-5 .step .btn { align-self: start; margin-top: auto; }
@media (max-width: 900px) { .steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps-5 { grid-template-columns: 1fr; } }

/* ── pricing v2: monthly / yearly switch and the four cards ───────── */
.billing { position: relative; }
.bill-r { position: absolute; opacity: 0; pointer-events: none; }
.billtog {
  display: flex; gap: .25rem; width: max-content; max-width: 100%;
  margin: 0 auto 2.2rem; padding: .3rem;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px;
}
.billtog label {
  cursor: pointer; padding: .55rem 1.25rem; border-radius: 999px; white-space: nowrap;
  font-weight: 600; font-size: .92rem; color: var(--txt-2);
  transition: background .2s ease, color .2s ease;
}
.billtog label b {
  margin-inline-start: .35rem; padding: .1rem .45rem; border-radius: 999px;
  background: var(--up-bg); color: var(--up); font-size: .72rem; font-weight: 800;
}
#bill-m:checked ~ .billtog label[for="bill-m"],
#bill-y:checked ~ .billtog label[for="bill-y"] { background: var(--lime); color: #000; }
#bill-y:checked ~ .billtog label[for="bill-y"] b { background: rgba(0, 0, 0, .14); color: #000; }
#bill-m:focus-visible ~ .billtog label[for="bill-m"],
#bill-y:focus-visible ~ .billtog label[for="bill-y"] { outline: 2px solid var(--lime); outline-offset: 2px; }
.billing .py { display: none; }
#bill-y:checked ~ .plans .py { display: block; }
#bill-y:checked ~ .plans .pm { display: none; }

/* Five cards in one row, Pro last on a track 20% wider than the rest.
   Fixed tracks rather than auto-fit, so the row never grows a spare column. */
.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); }
@media (max-width: 1100px) { .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .plans-4 { grid-template-columns: minmax(0, 1fr); } }
.plans-4 .plan { transition: transform .2s ease, border-color .2s ease; }
.plans-4 .plan:hover { transform: translateY(-3px); border-color: var(--line-2); }
.plans-4 .plan.feature:hover { border-color: var(--lime); }
.plan-ico {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; margin-bottom: .9rem;
  border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 1.3rem;
}
.plan.feature .plan-ico { background: var(--lime-glow); border-color: var(--lime-dim); }
.plan-sub { margin: .1rem 0 0; min-height: 1.3em; font-size: .8rem; color: var(--muted); }
.plan-save { color: var(--up); font-weight: 700; }
.plan-on { margin: 0 0 .7rem; font-size: .82rem; font-weight: 600; color: var(--up); }
.plan-note { margin: .45rem 0 0; font-size: .72rem; color: var(--muted); text-align: center; }
.payreceipt th { text-align: start; color: var(--muted); font-weight: 600; width: 40%; }
.payreceipt-tx { word-break: break-all; font-size: .78rem; }
.paycheck { margin: .9rem 0 .4rem; font-size: .82rem; color: var(--up); }
.paysender { margin: .2rem 0 .9rem; font-size: .82rem; }
.paysender summary { cursor: pointer; color: var(--muted); }
.paysender input { margin-top: .5rem; width: 100%; }
.plan-cta { margin-top: auto; }
.plan-hint { max-width: 46rem; margin: 1.6rem auto 0; text-align: center; font-size: .85rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .plans-4 .plan { transition: none; }
  .plans-4 .plan:hover { transform: none; }
}

/* ── pricing v3: Pro as the last, 20% larger card; account package list ─ */
.plan-foot { margin-top: auto; display: flex; flex-direction: column; }
.plans-4 .plan.pro {
  /* Wider via its 1.2fr track; taller by reaching past the row edges, so it
     stands out from the row without breaking its alignment. */
  margin-block: -1.1rem;
  padding: 2rem;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232, 184, 75, .18), var(--shadow);
  background: linear-gradient(120deg, rgba(232, 184, 75, .09), var(--bg-1) 42%, rgba(204, 228, 100, .05));
}
.plans-4 .plan.pro:hover { border-color: var(--gold); }
.plan.pro .plan-badge { background: var(--gold); }
.plan.pro .plan-k { color: var(--gold); }
.plan.pro .plan-ico { background: rgba(232, 184, 75, .14); border-color: rgba(232, 184, 75, .45); }
.plan.pro .plan-ico { width: 3.1rem; height: 3.1rem; font-size: 1.55rem; }
.plan.pro .plan-p { font-size: 2.9rem; }
.plan.pro ul { font-size: .95rem; }
.plan-deal { margin: .45rem 0 0; font-size: .82rem; font-weight: 700; color: var(--gold); }
@media (max-width: 1100px) {
  /* Alone on its row: centred, and still 20% wider than a two-up card. */
  .plans-4 .plan.pro { grid-column: 1 / -1; justify-self: center; width: min(100%, 31rem); margin-block: .4rem 0; }
}
@media (max-width: 600px) {
  .plans-4 .plan.pro { width: 100%; }
}
.pkglist { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 1rem; }
.pkglist-k { margin-inline-end: .3rem; font-size: .8rem; color: var(--muted); }

/* ── pricing: the free-trial banner ────────────────────────────────── */
.trialbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem;
  max-width: 52rem; margin: 0 auto 1.6rem; padding: .8rem 1.1rem;
  border: 1px solid var(--lime-dim); border-radius: var(--r);
  background: linear-gradient(90deg, var(--lime-glow), rgba(232, 184, 75, .08));
  color: var(--txt-2); font-size: .9rem; text-align: center;
}
.trialbar b { color: var(--txt); }
.trialbar-ico { font-size: 1.3rem; }

/* ── admin users: one short chip per package, compact grant list ───── */
.admuser small { display: block; margin-top: .15rem; font-size: .72rem; color: var(--muted); }
.admchips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; max-width: 20rem; }
.admchips form { display: inline-flex; margin: 0; }
.admchips .pill { border: 0; white-space: nowrap; font-family: inherit; line-height: 1.5; }
.admchips button.pill { cursor: pointer; }
.admchips button.pill:hover { filter: brightness(1.3); }
.admchips button.pill span { margin-inline-start: .35rem; opacity: .65; }
.admgrant select[multiple] { min-width: 9.5rem; }

/* ── card: max buy — a slim dashed "ceiling" line under the recommendation ─ */
.maxbuy {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .45rem; padding: .42rem .7rem;
  border: 1px dashed rgba(232, 184, 75, .38); border-radius: var(--r-sm);
  background: rgba(232, 184, 75, .04);
  font-size: .78rem; color: var(--muted);
}
.maxbuy-k { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; letter-spacing: .02em; }
.maxbuy-k svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.maxbuy-v { font-size: .92rem; font-weight: 700; color: var(--gold); }

/* A small circled "i" carrying a longer explanation as a native tooltip —
   no JavaScript, and keyboard-focusable so the note is reachable without a
   mouse. */
.info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-inline-start: .35rem; flex: none;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold); font-size: .65rem; font-weight: 700; font-style: normal;
  cursor: help; vertical-align: middle; opacity: .85;
}
.info-i:hover, .info-i:focus-visible { opacity: 1; outline: none; box-shadow: 0 0 0 2px rgba(232, 184, 75, .25); }

/* v34: max volume is the second row of the recommendation. */
.recommendation-block .maxbuy { margin-top:8px; }
.recommendation-block .recline { margin-bottom:0; }

/* ── v25 conversion colours ─────────────────────────────────────────────
   Orange = subscribe (warm urgency without red's loss/danger reading).
   Green  = confirm / checkout (prosperity, "go"), with a slow animated fade. */
.btn-sub {
  position: relative; overflow: hidden; border: 0; color: #1d0e00;
  background: linear-gradient(135deg, #ffa24a, #ff7a1a 55%, #f0600b);
  box-shadow: 0 6px 18px rgba(255, 122, 26, .28);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-sub:hover, .btn-sub:focus-visible { color: #1d0e00; filter: brightness(1.06); box-shadow: 0 9px 26px rgba(255, 122, 26, .42); transform: translateY(-1px); }
.btn-sub::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-130%); animation: nm-sub-sheen 3.4s ease-in-out infinite;
}
@keyframes nm-sub-sheen { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.btn-go {
  border: 0; color: #03170b;
  background: linear-gradient(110deg, #178a47, #2fbf68, #7ae6a2, #2fbf68, #178a47);
  background-size: 320% 100%;
  animation: nm-go-fade 5s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(47, 191, 104, .26);
}
.btn-go:hover, .btn-go:focus-visible { color: #03170b; box-shadow: 0 9px 28px rgba(47, 191, 104, .42); }
@keyframes nm-go-fade { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .btn-sub::after, .btn-go { animation: none; } }

/* ── v25 checkout: plan, then coin cards with the amount in each coin ─── */
.payform { max-width: 42rem; margin-inline: auto; }
.paystep { display: flex; align-items: center; gap: .6rem; margin: .3rem 0 .75rem; }
.paystep-n { width: 1.65rem; height: 1.65rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--up-bg); color: var(--up); font-weight: 800; font-size: .85rem; }
.paystep-t { font-weight: 700; color: var(--txt); }
.payplan { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1.5rem; }
.payplan select { flex: 1 1 16rem; min-height: 46px; padding: .6rem .8rem; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--txt); font: inherit; }
.payplan-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.payplan-total span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.payplan-total b { font-size: 1.7rem; color: var(--txt); }
.coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; }
.coins-or { grid-column: 1 / -1; margin: .55rem 0 0; font-size: .8rem; color: var(--muted); }
.coin { position: relative; display: block; cursor: pointer; }
.coin input { position: absolute; opacity: 0; pointer-events: none; }
.coin-body { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .8rem .95rem; background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.coin:hover .coin-body { border-color: var(--muted); }
.coin input:checked + .coin-body { border-color: var(--up); box-shadow: 0 0 0 1px var(--up), 0 8px 20px rgba(47, 191, 104, .14); background: linear-gradient(160deg, rgba(47, 191, 104, .11), var(--bg-1) 62%); }
.coin input:focus-visible + .coin-body { outline: 2px solid var(--up); outline-offset: 2px; }
.coin-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.coin-name { font-size: .88rem; color: var(--txt); }
.coin-tag { padding: .12rem .5rem; border-radius: 999px; background: var(--up-bg); color: var(--up); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.coin-est { font-size: 1rem; font-weight: 700; color: var(--txt); }
.coin-note { font-size: .74rem; color: var(--muted); }
.coin-main { grid-column: 1 / -1; }
.coin-main .coin-body { padding: 1rem 1.1rem; }
.coin-main .coin-est { font-size: 1.45rem; }
.paypromo { margin: 1.1rem 0; }
.paypromo summary { cursor: pointer; font-size: .88rem; color: var(--txt-2); }
.paypromo input { width: 100%; min-height: 44px; margin-top: .6rem; padding: .55rem .8rem; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--txt); font: inherit; }

/* ── v25 admin dashboard ────────────────────────────────────────────── */
.dash-note { margin: 0 0 1rem; font-size: .82rem; color: var(--muted); }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.dkpi { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem 1rem 1.25rem; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); }
.dkpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--kpi, var(--lime)); }
.dkpi-lime { --kpi: var(--lime); } .dkpi-blue { --kpi: var(--blue); } .dkpi-green { --kpi: var(--up); }
.dkpi-gold { --kpi: var(--gold); } .dkpi-orange { --kpi: #ff8a2a; } .dkpi-red { --kpi: var(--down); }
.dkpi-k { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dkpi-v { font-size: 1.95rem; font-weight: 700; line-height: 1.1; color: var(--txt); }
.dkpi-s { font-size: .78rem; color: var(--txt-2); }
.dash-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0 1rem; }
.dash-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 1rem; }
.dash-card { margin: 0 0 1rem; min-width: 0; }
.dash-h { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.dash-h h2 { margin: 0; font-size: .95rem; }
.dchart { display: block; width: 100%; height: auto; }
.dchart .dgrid { stroke: var(--line); stroke-dasharray: 3 4; }
.dchart .dlab { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.dchart .dbar { fill: var(--lime); opacity: .85; }
.dchart .dbar:hover { opacity: 1; }
.dchart-blue .dbar { fill: var(--blue); }
.dchart-green .dbar { fill: var(--up); }
.dash-meters { display: flex; flex-direction: column; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.dash-meters li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 3rem; align-items: center; gap: .7rem; font-size: .86rem; }
.dm-k { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--txt-2); }
.dm-bar { height: .55rem; overflow: hidden; border-radius: 999px; background: var(--bg-3); }
.dm-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime-dim), var(--lime)); }
.dash-meters b { text-align: end; }
.dash-list { margin: 0; padding: 0; list-style: none; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list small { display: block; font-size: .72rem; color: var(--muted); }
.dash-foot { font-size: .8rem; color: var(--muted); }

/* ── card: pre-close tag (v25.2) ─────────────────────────────────────
   The pre-close read used to be a full-width bar that pushed the favourite
   tag and accent line down and crowded the header. It is now a small gold
   tag in the top corner OPPOSITE the favourite tag, the same size and shape,
   so a card can carry both without either one moving. */
.card.has-pre { padding-top: 1.55rem; }
.card .prebar {
  position: absolute; top: 0; inset-inline-end: 0; z-index: 2;
  margin: 0;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem .22rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; text-align: start; white-space: nowrap;
  color: #2a1d00; background: var(--gold);
  border: 0; border-end-start-radius: 8px;
}
.card .prebar.stale {
  color: var(--gold); background: rgba(232, 184, 75, .16);
  box-shadow: inset 0 0 0 1px rgba(232, 184, 75, .38);
  font-weight: 700;
}
/* Nothing is pushed down any more. */
.card.has-pre .favmark,
.card.has-pre .favtag,
.card.has-pre::before { top: 0; }

/* ── setup guides (v26.4) ────────────────────────────────────────── */
.howto.guide { padding: .9rem 1.1rem; }
.guide-lede { margin: .7rem 0 .2rem; color: var(--txt-2); font-size: .88rem; line-height: 1.65; }
.guide-steps { margin: .8rem 0 .2rem; padding-inline-start: 1.25rem; color: var(--txt-2); }
.guide-steps > li { margin-bottom: .95rem; line-height: 1.6; list-style: none; position: relative; }
.guide-steps > li b { color: var(--txt); font-size: .92rem; }
.guide-steps > li p { margin: .3rem 0 0; font-size: .88rem; line-height: 1.7; }
.guide-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .55rem 0 0; }
.guide-links .btn { text-decoration: none; }
.guide-tip {
  margin: 1rem 0 .3rem; padding: .7rem .9rem; border-radius: 10px;
  background: rgba(232,184,75,.08); box-shadow: inset 3px 0 0 var(--gold);
  color: var(--txt-2); font-size: .88rem; line-height: 1.7; text-align: start;
}
[dir="rtl"] .guide-tip { box-shadow: inset -3px 0 0 var(--gold); }
.guide-happy { margin: .6rem 0 0; color: var(--lime); font-weight: 650; font-size: .9rem; }

/* the small "i" on a message field, and what it says */
.msgb-chip { position: relative; }
.chip-i {
  display: inline-grid; place-items: center; width: 15px; height: 15px; margin-inline-start: .4rem;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(0,0,0,.25);
  color: var(--muted); font: 700 .62rem/1 var(--sans); font-style: normal; cursor: help;
  vertical-align: middle; transition: color .15s, border-color .15s, background .15s;
}
.chip-i:hover, .chip-i:focus-visible { color: var(--lime); border-color: var(--lime); background: var(--lime-glow); outline: none; }
.chip-i::after {
  content: attr(data-tip); position: absolute; z-index: 30; bottom: calc(100% + 9px); inset-inline-start: 0;
  width: max-content; max-width: 260px; padding: .5rem .65rem; border-radius: 8px;
  background: #0d1510; border: 1px solid var(--line-2); box-shadow: var(--shadow);
  color: var(--txt-2); font: 400 .78rem/1.55 var(--sans); text-align: start; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
.chip-i:hover::after, .chip-i:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .chip-i::after { transition: none; } }
.saved-tag.bad { color: var(--down); border-color: var(--down); }

/* ===== how it works v34.3 ===== */
.hiw-hero { padding-top: 3rem; }
.hiw-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .hiw-paths { grid-template-columns: 1fr; } }
.hiw-path {
  position: relative; padding: 1.15rem 1.15rem 1.15rem 1.15rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(204,228,100,.06), transparent 42%);
}
.hiw-path-k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--lime); color: #14200a; font-weight: 800; font-size: .85rem;
}
.hiw-path h3 { margin: .55rem 0 .25rem; }
.hiw-path > p { margin: 0 0 .7rem; color: var(--muted); font-size: .88rem; }
.hiw-path ol { margin: 0 0 .9rem; padding-inline-start: 1.15rem; display: grid; gap: .45rem; }
.hiw-path li { color: var(--text); font-size: .9rem; line-height: 1.45; }
.hiw-shot { margin: 0; }
.hiw-shot figcaption {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .45rem;
}
.hiw-shot img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.hiw-lead { max-width: 46rem; margin: .6rem auto 0; color: var(--muted); }

/* Jump bar. Sticky because the section someone wants is rarely the one they
   are standing in; horizontally scrollable so eight chips never wrap into a
   block that pushes the first section off screen. */
.hiw-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  padding: .7rem .2rem; margin: 1.6rem 0 2.2rem;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(9px);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.hiw-nav::-webkit-scrollbar { display: none; }
.hiw-nav a {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  padding: .38rem .7rem; border-radius: 999px; font-size: .78rem;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line-2); background: var(--bg-3);
  transition: color .15s, border-color .15s, background .15s;
}
.hiw-nav a:hover { color: inherit; border-color: var(--lime); background: var(--lime-glow); }
.hiw-nav a span {
  font-family: var(--mono); font-size: .66rem; color: var(--lime);
  opacity: .85;
}

.hiw-sec { scroll-margin-top: 4.5rem; margin: 0 0 3.2rem; }
.hiw-h { margin-bottom: 1.1rem; }
.hiw-h h2 { margin: .15rem 0 .35rem; }
.hiw-h p { color: var(--muted); max-width: 52rem; margin: 0; }
.hiw-n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--lime); opacity: .8;
}

.hiw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .hiw-split { grid-template-columns: 1fr; } }

.hiw-box {
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 1.1rem 1.2rem;
}
.hiw-box h3 { margin: 0 0 .4rem; font-size: 1rem; }
.hiw-box > p { color: var(--muted); margin: 0 0 .8rem; }
.hiw-box .btn { margin-top: .9rem; }
.hiw-sub { font-size: .82rem; }
.hiw-foot {
  margin-top: .9rem; font-size: .82rem; color: var(--muted);
  border-inline-start: 2px solid var(--line-2); padding-inline-start: .7rem;
}

/* Numbered points — the shape every section body is built from. */
.hiw-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.hiw-points-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .hiw-points-3 { grid-template-columns: 1fr; } }
.hiw-p { display: flex; gap: .7rem; align-items: flex-start; }
.hiw-p-n {
  flex: 0 0 auto; width: 1.45rem; height: 1.45rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: .72rem;
  color: var(--lime); background: var(--lime-glow); border: 1px solid var(--lime);
}
.hiw-p b { display: block; font-size: .92rem; }
.hiw-p p { margin: .15rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }

/* Sample figures. Tagged, so an invented card is never read as a live one. */
.hiw-demo { margin: 0; }
.hiw-demo-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.dcard {
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: 14px; padding: .9rem 1rem;
}
.dcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.dcard-id b { display: block; font-family: var(--mono); font-size: .95rem; }
.dcard-id span { font-size: .74rem; color: var(--muted); }
.dcard-badge {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .2rem .55rem; border-radius: 999px; font-size: .72rem;
  color: var(--lime); background: var(--lime-glow); border: 1px solid var(--lime);
}
.dcard-track { position: relative; margin: .8rem 0 .6rem; }
.dcard-track svg { width: 100%; height: 56px; overflow: visible; }
.dcard-track polyline { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: .75; }
.dcard-track .dc-buy  polygon { fill: var(--lime); }
.dcard-track .dc-sell polygon { fill: var(--gold); }
.dcard-k, .dcard-x {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .66rem; color: var(--muted); letter-spacing: .04em;
}
.dcard-x { position: absolute; inset-inline-end: 0; top: 0; font-family: var(--mono); }
.dcard-rows { display: grid; gap: .35rem; border-top: 1px dashed var(--line-2); padding-top: .6rem; }
.dcard-rows > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dcard-rows span { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.dcard-rows b { font-size: .84rem; }
.dcard-rows em { font-style: normal; font-size: .68rem; color: var(--muted); }

/* The little numbered discs that tie a figure to its explanation. */
.dcard i, .hiw-note-n {
  display: inline-grid; place-items: center; font-style: normal;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  font-family: var(--mono); font-size: .6rem;
  color: var(--lime); background: var(--lime-glow); border: 1px solid var(--lime);
}
.hiw-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.hiw-notes li { display: flex; gap: .6rem; align-items: flex-start; }
.hiw-note-n { flex: 0 0 auto; margin-top: .15rem; }
.hiw-notes b { display: block; font-size: .88rem; }
.hiw-notes p { margin: .1rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* The three headline numbers. */
.hiw-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 720px) { .hiw-metrics { grid-template-columns: 1fr; } }
.hiw-metric {
  text-align: center; padding: 1.1rem .8rem; border-radius: 14px;
  background: linear-gradient(180deg, var(--lime-glow), transparent 85%);
  border: 1px solid var(--line-2);
}
.hiw-metric b {
  display: block; font-family: var(--mono); font-size: 1.9rem; line-height: 1;
  color: var(--lime);
}
.hiw-metric span { display: block; margin-top: .35rem; font-size: .78rem; color: var(--muted); }

/* The training loop, drawn. Four words is the whole algorithm. */
.hiw-loop {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line-2);
}
.hiw-loop span {
  padding: .2rem .55rem; border-radius: 6px; font-size: .74rem;
  background: var(--bg-2); border: 1px solid var(--line-2);
}
.hiw-loop i { font-style: normal; color: var(--muted); font-size: .8rem; }
.hiw-loop-back { color: var(--lime) !important; font-size: 1rem !important; }

/* Top-three features. Bar widths are relative usage, not decoration. */
.hiw-feat { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.hiw-feat-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.hiw-feat-h b { font-size: .9rem; }
.hiw-feat-h span { font-size: .68rem; color: var(--muted); }
.hiw-feat-bar { height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin: .3rem 0 .25rem; }
.hiw-feat-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--lime); }
.hiw-feat p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* Sample alert messages. */
.dmsg { display: grid; gap: .6rem; }
.dmsg-b {
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: 12px; border-start-start-radius: 4px; padding: .7rem .85rem;
}
.dmsg-b > b { font-size: .7rem; color: var(--muted); letter-spacing: .04em; }
.dmsg-b p { margin: .3rem 0 0; font-size: .84rem; }
.dmsg-t { font-size: .68rem !important; color: var(--muted); }

.hiw-disc { margin: 2.4rem 0 1.4rem; }
.hiw-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* ===== v33 venue-aware picker ===== */
/* A coin the selected exchange does not list: still shown, so the reader
   sees what they would give up by switching, but plainly unavailable. */
.botpick-w.off { opacity: .5; border-style: dashed; background: transparent; }
.botpick-w.off .botpick { cursor: not-allowed; }
.botpick-w.off:hover { border-color: var(--line-2); }
.botpick-off {
  font-size: .6rem; color: var(--gold); letter-spacing: .02em;
  margin-top: .1rem;
}

/* ===== v34: money per share, performance range ===== */
.botpick-wt { flex-wrap: wrap; }
.botpick-usd {
  flex: 1 0 100%; text-align: end; font-size: .66rem;
  color: var(--lime); letter-spacing: .01em; min-height: .8rem;
}
.botperf-box { margin-top: .4rem; }
.botrange {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin-bottom: .5rem;
}
.botrange button {
  font: inherit; font-size: .72rem; font-family: var(--mono);
  padding: .22rem .6rem; border-radius: 999px; cursor: pointer;
  color: var(--muted); background: var(--bg-3); border: 1px solid var(--line-2);
  transition: color .15s, border-color .15s, background .15s;
}
.botrange button:hover { color: inherit; border-color: var(--muted); }
.botrange button.on { color: var(--lime); border-color: var(--lime); background: var(--lime-glow); }
.botrange-chg { margin-inline-start: auto; font-size: .8rem; color: var(--muted); }
.botrange-chg.up { color: var(--lime); }
.botrange-chg.down { color: var(--down); }

/* ── v34.20: admin dashboard, user search, failed orders, messages ── */
.dkpi-u { font-size: .8rem; font-weight: 600; color: var(--muted); }
.dash-pay { min-width: 0; }
.dash-pay th, .dash-pay td { padding: .6rem .7rem; }
.dash-pay tbody th { text-align: start; font-weight: 400; border-bottom: 1px solid var(--line); }
.dash-pay tbody tr:last-child th { border-bottom: 0; }
.dash-pay td { white-space: nowrap; }
.dash-bots td, .fo-table td { white-space: normal; }
.fo-table td.nowrap, .dash-bots td.mono { white-space: nowrap; }
.dash-pay th small { display: block; margin-top: .2rem; font-size: .7rem; color: var(--muted); }
.dash-pay td small { color: var(--muted); }
.dash-pay tr.is-rev td b { color: var(--lime); }
.geo-per { display: inline-flex; gap: .3rem; }
.geo-per a { padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; color: var(--muted); text-decoration: none; }
.geo-per a.on { color: var(--lime); border-color: var(--lime); }
.geo-wrap { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(14rem, 1fr); gap: 1.2rem; align-items: start; }
.geo-map { min-width: 0; }
.geomap { display: block; width: 100%; height: auto; background: var(--bg-2); border-radius: 10px; }
.geomap path { stroke: var(--bg-1); stroke-width: .5; transition: opacity .15s; }
.geomap path:hover { opacity: .75; }
.geomap .g0, .geo-key .g0 { fill: var(--bg-3); background: var(--bg-3); }
.geomap .g1, .geo-key .g1 { fill: #3b4a26; background: #3b4a26; }
.geomap .g2, .geo-key .g2 { fill: #5c7331; background: #5c7331; }
.geomap .g3, .geo-key .g3 { fill: #82a03d; background: #82a03d; }
.geomap .g4, .geo-key .g4 { fill: #a8c44d; background: #a8c44d; }
.geomap .g5, .geo-key .g5 { fill: var(--lime); background: var(--lime); }
.geo-key { display: flex; align-items: center; gap: .25rem; margin-top: .45rem; font-size: .7rem; color: var(--muted); }
.geo-key i { display: inline-block; width: 1.4rem; height: .5rem; border-radius: 2px; }
.geo-list .stamp { display: block; margin: 0 0 .7rem; }
.dash-ex { display: inline-block; margin-inline-end: 1rem; }
.dash-bots td small { display: block; font-size: .72rem; }
.usearch { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .9rem; }
.usearch input[type=search] { flex: 1 1 18rem; min-width: 0; max-width: 34rem; }
.admuser small + small { margin-top: .05rem; }
a.stat { display: block; text-decoration: none; color: inherit; }
a.stat:hover { outline: 1px solid var(--down); }
.fo-reasons { margin: 0 0 1rem; padding: 0; list-style: none; }
.fo-reasons li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.fo-reasons li > b { min-width: 2.6rem; color: var(--down); }
.fo-why code { display: block; margin-top: .3rem; font-size: .76rem; white-space: pre-wrap; word-break: break-word; color: var(--txt-2); }
.fo-table td { vertical-align: top; }
.fo-item { border-bottom: 1px solid var(--line); }
.fo-item:last-of-type { border-bottom: 0; }
.fo-item tr:first-child td { border-bottom: 0; padding-bottom: .25rem; }
.fo-whyrow td { padding-top: 0; white-space: normal; }
.fo-what { display: block; margin-top: .35rem; font-size: .82rem; color: var(--txt-2); }
.am-preview { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.am-preview h3 { margin: .2rem 0 .6rem; font-size: .9rem; }
.am-frame { display: block; width: 100%; height: 34rem; border: 1px solid var(--line); border-radius: 10px; background: #0b0f0c; }
.am-who { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .84rem; }
.am-who small { color: var(--muted); }
#mailc tr.is-now td { background: var(--bg-2); }
@media (max-width: 760px) {
  .geo-wrap { grid-template-columns: 1fr; }
  .am-frame { height: 28rem; }
}

/* ── v34.21: the home-screen app ───────────────────────────────────── */
html.is-app .pwa-link { display: none !important; }
.pwa-banner {
  position: fixed; z-index: 60; inset-inline: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45); animation: pwa-up .35s ease-out;
}
.pwa-banner img { flex: 0 0 auto; border-radius: 10px; }
.pwa-b-t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pwa-b-t b { display: block; font-size: .9rem; }
.pwa-b-t small { display: block; font-size: .74rem; color: var(--muted); }
.pwa-x { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; padding: .2rem .35rem; cursor: pointer; }
.pwa-sheet {
  position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; justify-items: center;
  padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .55);
}
.pwa-card {
  position: relative; width: min(100%, 26rem); padding: 1.4rem 1.3rem 1.2rem; text-align: center;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 18px; animation: pwa-up .3s ease-out;
}
.pwa-card img { border-radius: 14px; }
.pwa-card h3 { margin: .7rem 0 .3rem; }
.pwa-card p { color: var(--txt-2); font-size: .9rem; }
.pwa-card ol { margin: .8rem 0 1.1rem; padding: 0; list-style: none; text-align: start; }
.pwa-card li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.pwa-card li b { flex: 0 0 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #0b0f0c; font-size: .8rem; }
.pwa-card .pwa-x { position: absolute; top: .5rem; inset-inline-end: .5rem; }
@keyframes pwa-up { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .pwa-banner { display: none; } }
@media (prefers-reduced-motion: reduce) { .pwa-banner, .pwa-card { animation: none; } }

/* v34.21: the top bar always fits a phone. With the logo at full size, the
   language button, the account button and the menu (☰) needed ~430px, so on
   a 375px phone the menu was pushed off the screen. The logo now scales with
   the screen and the gaps tighten; nothing is hidden but the language flag. */
@media (max-width: 560px) {
  .topbar-in { gap: .5rem; }
  .topbar .logo { --logo-h: clamp(22px, 7vw, 40px); gap: .35rem; }
  .topbar .brand { min-width: 0; flex: 0 1 auto; }
  .topbar-right { gap: .35rem; }
  .topbar-right .lang-btn { padding-inline: .45rem; }
}
@media (max-width: 400px) {
  .topbar-right .lang-btn > span:first-child:not(.avatar) { display: none; }
}

/* ── v34.22: the smart install guide, /app, legal pages ────────────── */
.pwa-card { max-height: calc(100vh - 2rem); overflow-y: auto; }
.pwa-guide { text-align: start; margin: .6rem 0 .4rem; }
.pwa-lead { font-size: .92rem; color: var(--txt); margin: .2rem 0 .8rem; }
.pwa-alt { font-size: .82rem; color: var(--muted); margin: .7rem 0 .4rem; }
.pwa-help { font-size: .78rem; color: var(--muted); margin: .7rem 0 0; }
.pwa-help a { color: var(--lime); }
.pwa-act, .pwa-copy, .pwa-native { margin: 0 0 .5rem; }
.pwa-steps { margin: .4rem 0 .8rem; padding: 0; list-style: none; }
.pwa-steps li { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.45; }
.pwa-steps li b { flex: 0 0 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #0b0f0c; font-size: .8rem; }
/* a little drawing of the browser: where to tap, and what to choose */
.pwa-mock { position: relative; direction: ltr; margin: .4rem auto .6rem; width: 15.5rem; max-width: 100%; height: 9.4rem;
  border: 1px solid var(--line-2, #2a3a2c); border-radius: 14px; background: #0b0f0c; overflow: hidden; }
.pm-bar { position: absolute; inset-inline: 0; display: flex; align-items: center; gap: .4rem; padding: .35rem .45rem; background: #1b2219; }
.pm-url { flex: 1; height: 1.35rem; border-radius: 99px; background: #0b0f0c; color: #8fa08c; font: .62rem/1.35rem var(--mono); padding-inline: .5rem; }
.pm-btn { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; color: #0b0f0c; background: var(--lime);
  font-weight: 800; box-shadow: 0 0 0 0 rgba(204,228,100,.7); animation: pm-pulse 1.6s infinite; }
.pm-menu { position: absolute; width: 9.6rem; padding: .3rem; border-radius: 10px; background: #1d2a20; border: 1px solid #2a3a2c; }
.pm-menu i { display: block; height: .5rem; margin: .35rem .3rem; border-radius: 4px; background: #2e3c2c; }
.pm-menu b { display: block; padding: .3rem .4rem; border-radius: 6px; background: rgba(204,228,100,.18); color: var(--lime); font-size: .66rem; line-height: 1.2; }
.pm-tr .pm-bar, .pm-tl .pm-bar { top: 0; } .pm-br .pm-bar, .pm-bl .pm-bar, .pm-bc .pm-bar { bottom: 0; }
.pm-tl .pm-bar, .pm-bl .pm-bar { flex-direction: row-reverse; }
.pm-tr .pm-menu { top: 2.5rem; right: .4rem; } .pm-tl .pm-menu { top: 2.5rem; left: .4rem; }
.pm-br .pm-menu { bottom: 2.5rem; right: .4rem; } .pm-bl .pm-menu { bottom: 2.5rem; left: .4rem; }
.pm-bc .pm-bar { justify-content: center; } .pm-bc .pm-url { display: none; }
.pm-bc .pm-bar::before, .pm-bc .pm-bar::after { content: ""; width: 2.4rem; height: .5rem; border-radius: 4px; background: #2e3c2c; margin: 0 1rem; }
.pm-bc .pm-menu { bottom: 2.6rem; left: 50%; transform: translateX(-50%); }
@keyframes pm-pulse { 70% { box-shadow: 0 0 0 .55rem rgba(204,228,100,0); } 100% { box-shadow: 0 0 0 0 rgba(204,228,100,0); } }
.pwa-qr { display: block; margin: .6rem auto; width: 174px; height: 174px; border-radius: 10px; background: #fff; }
.pwa-toast { position: fixed; z-index: 80; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  max-width: calc(100% - 2rem); padding: .7rem 1rem; border-radius: 12px; background: var(--lime); color: #0b0f0c; font-weight: 600;
  font-size: .88rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: pwa-up .25s ease-out; }
.app-hero { text-align: center; padding: 2.4rem 0 1.2rem; }
.app-hero img { border-radius: 22px; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.app-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 1rem 0 .4rem; }
.app-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin: 1rem 0 0; padding: 0; list-style: none; color: var(--txt-2); font-size: .9rem; }
.app-guide { max-width: 32rem; margin: 0 auto 3rem; }
.legal { max-width: 46rem; padding-block: 2.2rem 3rem; }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.legal-s h2 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.legal-s p, .legal .sub { color: var(--txt-2); line-height: 1.75; }
.legal-contact p { margin: 0 0 1rem; }
@media (prefers-reduced-motion: reduce) { .pm-btn { animation: none; } }

/* v34.24: iPhone home-screen app. The app draws behind the status bar
   (black-translucent), so the top bar has to leave room for the clock,
   notch and Dynamic Island, or the logo (home) and ☰ sit under them and
   cannot be tapped. env() is 0 in a normal browser tab and on most Android
   phones, so nothing moves there. */
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.pwa-sheet { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
.foot { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* the expanded chart stays clear of the notch and home bar, so Close can be tapped */
.chart-dialog { max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem); }

/* v34.25: the narrowest phones (Galaxy Z Fold cover screen, 280px; old
   320px phones with the account button): the mark alone, so ☰ always fits */
@media (max-width: 340px) {
  .topbar .logo-word { display: none; }
  .topbar-right .lang-btn { padding-inline: .35rem; }
}
/* v34.25: tablets and phones held sideways (761-1100px). The full menu plus
   language, Log in and Register needs ~1100px, so in between they ran off the
   edge (768 portrait tablets, 844 landscape iPhones, 1024 tablets in Arabic).
   The menu folds into ☰ there; Log in / Register stay visible, they fit. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .burger { display: block; }
  .mobnav[data-open] { display: flex; }
}
/* v34.25: small laptops (1101-1360px): the full-size logo left the Register
   button 8px past the edge at 1280px; the medium logo and gaps fit */
@media (min-width: 1101px) and (max-width: 1360px) {
  .logo { --logo-h: 44px; }
  .nav { gap: 1.05rem; font-size: .9rem; }
  .topbar-in { gap: 1rem; }
}
/* v34.25: grids and form fields never wider than the phone. The admin
   dashboard's two-column rows had a 352px minimum (stuck out below 360px),
   and fields with a size="" were a fixed width (Admin → Email at 280px). */
.dash-2 { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.dash-3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { max-width: 100%; }
/* v34.25: the smallest screens (280-360px): the footer logo and the home
   headline scale down instead of sticking out a few pixels */
@media (max-width: 360px) {
  /* a long button label wraps instead of pushing past the edge */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .foot-brand { --logo-h: 32px; }
  .hero-grid > * { min-width: 0; }
  .hero-grid h1 { font-size: 2.1rem; overflow-wrap: anywhere; }
}

/* v34.27: USDT on TON, said plainly (checkout form and payment page) */
.coin-name-big { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: 1.05rem; }
.coin-net {
  display: inline-block; padding: .14rem .55rem; border-radius: 999px;
  background: rgba(0, 152, 234, .14); border: 1px solid rgba(0, 152, 234, .45);
  color: #4db8f5; font-size: .72rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.ton-help { margin: .6rem 0 0; font-size: .8rem; color: var(--txt-2); line-height: 1.55; }
.tonbar {
  margin: 1rem 0 .2rem; padding: .85rem 1rem; border-radius: var(--r);
  border: 1px solid rgba(0, 152, 234, .5); background: rgba(0, 152, 234, .09);
}
.tonbar-t { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--txt); line-height: 1.35; }
.tonbar-t b { color: #4db8f5; }
.tonbar-x { margin: .35rem 0 0; font-size: .8rem; color: var(--txt-2); line-height: 1.5; }
.tonsteps-h { margin: 1.2rem 0 .3rem; font-size: 1rem; }
.tonsteps { padding-inline-start: 0; }
.tonsteps li { line-height: 1.55; padding-left: 0; padding-right: 0; padding-inline-start: 2.4rem; } /* the number sits on the reading side, Arabic too */
.tonsteps li b { color: var(--txt); }