/* ============================================================
   Capifront — Site skin v2 (Crypton-style dark / violet)
   Loaded AFTER style.css on every page (see tools/apply_skin.py).
   1) re-maps the style.css design tokens  2) restyles shared components.
   Visual source of truth: home-v2.html + theme-v2.css.
   Styling only — no layout logic, wording or data lives here.
   ============================================================ */

/* ---------- 1. Tokens — dark (default) ---------- */
:root {
  --bg:            #030303;
  --bg-2:          #05050a;
  --surface:       #0b0a12;
  --surface-2:     #12121c;
  --surface-3:     #1a1926;
  --border:        rgba(255,255,255,.07);
  --border-2:      rgba(255,255,255,.12);

  --text:          #ffffff;
  --text-dim:      #cccccc;
  --text-mut:      #8d8b99;

  /* accents: lavender for small text/ticks/links, violet for fills */
  --neon:          #beafff;
  --neon-2:        #ffffff;
  --violet:        #a68dff;
  --violet-2:      #ffffff;
  --neon-soft:     rgba(116,54,255,.12);
  --neon-glow:     rgba(116,54,255,.30);
  --violet-soft:   rgba(116,54,255,.08);
  --danger:        #ff6b81;
  --warn:          #ffc46b;
  --green:         #4ade9a;

  /* skin-only helpers */
  --brand:         #7436ff;
  --brand-2:       #8452ff;
  --brand-deep:    #4b1fd1;
  --lav:           #beafff;
  --lav-line:      rgba(190,175,255,.24);
  --on-accent:     #14102a;          /* text on lavender (--orange) fills */
  --ring:          #beafff;
  --btn-2-bg:      #d9d9de;          /* light-grey secondary pill */
  --btn-2-bg-h:    #ffffff;
  --btn-2-text:    #0b0a12;

  /* former gold / orange accents -> lavender family */
  --gold:          #beafff;
  --gold-2:        #ddd4ff;
  --gold-soft:     rgba(116,54,255,.12);
  --gold-line:     rgba(190,175,255,.36);
  --gold-glow:     rgba(116,54,255,.30);
  --orange:        #beafff;
  --orange-2:      #ddd4ff;
  --orange-soft:   rgba(116,54,255,.14);
  --orange-line:   rgba(190,175,255,.40);
  --orange-glow:   rgba(116,54,255,.35);

  --teal-btn:      #7436ff;
  --teal-btn-2:    #4b1fd1;
  --grad-primary:  linear-gradient(180deg, #7d42ff 0%, #7436ff 100%);
  --grad-duo:      linear-gradient(100deg, #ffffff, #beafff);
  --grad-violet:   linear-gradient(100deg, #beafff, #ffffff);
  --grad-gold:     linear-gradient(100deg, #ffffff 0%, #ddd4ff 45%, #beafff 100%);
  --grad-logo:     linear-gradient(150deg, #8452ff 0%, #4b1fd1 100%);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 16px;
  --r-xl: 24px;
  --shadow:      0 18px 50px rgba(0,0,0,.5);
  --shadow-lg:   0 30px 80px rgba(0,0,0,.6);
  --shadow-neon: 0 0 0 1px rgba(190,175,255,.28), 0 24px 60px -24px rgba(116,54,255,.55);
  --glass:       rgba(255,255,255,.02);
  --glass-brd:   rgba(255,255,255,.07);
  --chart-grid:  rgba(255,255,255,.06);

  --nav-h: 72px;
  --font:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 1b. Tokens — light (dashboard theme toggle) ---------- */
html[data-theme="light"] {
  --bg:            #f6f5fb;
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f8f7fd;
  --surface-3:     #eeecf7;
  --border:        #e8e5f3;
  --border-2:      #d9d5ea;

  --text:          #0e0c1a;
  --text-dim:      #4a4760;
  --text-mut:      #625f78;

  --neon:          #5b2ee0;
  --neon-2:        #8452ff;
  --violet:        #5b2ee0;
  --violet-2:      #7436ff;
  --neon-soft:     rgba(116,54,255,.09);
  --neon-glow:     rgba(116,54,255,.18);
  --violet-soft:   rgba(116,54,255,.06);
  --danger:        #c02640;          /* ≥5:1 on its own tinted chip */
  --warn:          #a05f00;
  --green:         #0c6b3f;

  --lav:           #5b2ee0;
  --lav-line:      rgba(116,54,255,.26);
  --on-accent:     #ffffff;
  --ring:          #5b2ee0;
  --btn-2-bg:      #ffffff;
  --btn-2-bg-h:    #f3f0ff;
  --btn-2-text:    #0e0c1a;

  --gold:          #5b2ee0;
  --gold-2:        #4b1fd1;
  --gold-soft:     rgba(116,54,255,.08);
  --gold-line:     rgba(116,54,255,.32);
  --gold-glow:     rgba(116,54,255,.18);
  --orange:        #7436ff;
  --orange-2:      #5b2ee0;
  --orange-soft:   rgba(116,54,255,.08);
  --orange-line:   rgba(116,54,255,.34);
  --orange-glow:   rgba(116,54,255,.2);

  --grad-gold:     linear-gradient(100deg, #4b1fd1 0%, #8452ff 100%);
  --grad-duo:      linear-gradient(100deg, #4b1fd1, #8452ff);
  --grad-violet:   linear-gradient(100deg, #8452ff, #4b1fd1);

  --shadow:        0 10px 30px rgba(30,20,70,.07);
  --shadow-lg:     0 20px 50px rgba(30,20,70,.12);
  --shadow-neon:   0 0 0 1px rgba(116,54,255,.3), 0 14px 40px rgba(116,54,255,.12);
  --glass:         rgba(14,12,26,.02);
  --glass-brd:     rgba(14,12,26,.08);
  --chart-grid:    rgba(14,12,26,.08);
}

/* ---------- 2. Base ---------- */
body { background: var(--bg); font-family: var(--font); }
::selection { background: rgba(116,54,255,.55); color: #fff; }
/* soft violet glow at the top of every page (absolute: stays at the page top, not on every screen) */
body::before {
  position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: min(980px, 100vh); opacity: 1;   /* ≤ viewport: a fixed 980px box gave short pages (auth-callback, 404 …) a phantom scroll */
  background:
    radial-gradient(52% 60% at 50% -8%, rgba(116,54,255,.26), transparent 70%),
    radial-gradient(30% 34% at 78% 0%, rgba(150,110,255,.10), transparent 70%);
  background-size: 100% 980px; background-repeat: no-repeat;   /* same 980px glow shape as before, just clipped */
}
body::after { background-image: none; }
html[data-theme="light"] body::before {
  background: radial-gradient(52% 60% at 50% -8%, rgba(116,54,255,.08), transparent 70%);
  background-size: 100% 980px; background-repeat: no-repeat;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, .section-title, .hero h1, .page-hero h1, .cta-band h2, .split h2, .empty-hero h2,
.prose h2, .prose h3, .newsletter h3, .discord-band h3, .fx-offer-title, .topbar-title, .hub-h,
.feature-photo .fp-cap h3, .trader-info .t-name, .award b {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
.hero h1, .section-title, .cta-band h2, .page-hero h1, .split h2, .empty-hero h2, .prose h2,
.newsletter h3, .discord-band h3, .fx-offer-title, .feature-photo .fp-cap h3 { font-weight: 500; }
.hero h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; letter-spacing: -.025em; }
.section-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.1; }
.cta-band h2 { font-size: clamp(28px, 3.8vw, 42px); line-height: 1.15; }
.split h2 { font-size: clamp(26px, 3.2vw, 38px); }
.card h3, .step h3, .tl-item h3, .blog-body h3, .review-v h4, .panel-head h3, .prose h3, .auth-card h1,
.dash-head h1, .jr-title-row h1, .hub-h, .topbar-title, .trader-info .t-name { font-weight: 500; }
.panel-head h3 { font-weight: 600; font-size: 16px; }
.section-sub, .page-hero p, .hero p.lead { color: var(--text-dim); }
.gradient-text { background-image: var(--grad-gold); }
.neon { color: var(--neon); }
.up { color: var(--green); }
.down { color: var(--danger); }

/* big numbers: medium-weight DM Sans like the reference */
.price-amt, .stat-strip .s-num, .s-num, .co-stat .cs-num, .hc-val, .ch-price-val, .ch-size, .size-val,
.pt-head b, .pt-price b, .cfg-buy-price b, .cfg-buy-plan, .size-price b {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em;
}
.kpi .val, .cr-stat .val, .gauge-num b, .metrix-title h1, .mini-acct .m-size, .jr-summary .kpi .val, .mx-kpis .kpi .val {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
}

/* ---------- 4. Chips / eyebrows / pills ---------- */
.eyebrow {
  gap: 7px; padding: 8px 13px; border-radius: 40px; margin-bottom: 20px;
  font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; text-transform: none; line-height: 1.2;
  color: var(--lav); background: rgba(116,54,255,.10); border: 1px solid var(--lav-line);
  backdrop-filter: none;
}
.pill-live { background: rgba(74,222,154,.10); color: var(--green); border: 1px solid rgba(74,222,154,.28); }
.pill-dot { background: var(--green); box-shadow: 0 0 8px rgba(74,222,154,.7); }
.pill-warn { background: rgba(255,196,107,.12); color: var(--warn); border-color: rgba(255,196,107,.3); }
.pill-warn .pill-dot { background: var(--warn); box-shadow: none; }
.pill-bad .pill-dot { background: var(--danger); box-shadow: none; }
.badge-ok { background: rgba(74,222,154,.12); color: var(--green); }
.badge-bad { background: rgba(255,107,129,.12); color: var(--danger); }
.badge-mut { background: var(--neon-soft); color: var(--neon); }
.tag-buy { background: rgba(74,222,154,.12); color: var(--green); }
.tag-sell { background: rgba(255,107,129,.12); color: var(--danger); }

/* ---------- 5. Buttons ---------- */
.btn {
  min-height: 44px; padding: 12px 22px; border-radius: 32px;
  font-family: var(--font); font-size: 14.5px; font-weight: 500; letter-spacing: 0;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2,.7,.2,1);
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--brand); color: #fff; border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px -10px rgba(116,54,255,.75);
}
.btn-primary:hover {
  background: var(--brand-2); color: #fff; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 38px -10px rgba(132,82,255,.9);
}
/* secondary = light-grey pill (marketing) */
.btn-ghost {
  background: var(--btn-2-bg); color: var(--btn-2-text); border: 1px solid transparent;
  backdrop-filter: none; box-shadow: none;
}
.btn-ghost:hover { background: var(--btn-2-bg-h); color: var(--btn-2-text); border-color: transparent; }
/* inside the dashboard shell + dense panels = outlined pill */
.dash .btn-ghost, .panel .btn-ghost, .auth-card .btn-ghost, .fx-modal-card .btn-ghost, .table-wrap .btn-ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border-2);
}
.dash .btn-ghost:hover, .panel .btn-ghost:hover, .auth-card .btn-ghost:hover, .fx-modal-card .btn-ghost:hover, .table-wrap .btn-ghost:hover {
  background: var(--surface-2); border-color: var(--lav-line); color: var(--text);
}
html[data-theme="light"] .btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border-2); }
html[data-theme="light"] .btn-ghost:hover { background: #f3f0ff; border-color: rgba(116,54,255,.45); color: var(--text); }
.btn-lg { min-height: 52px; padding: 14px 30px; font-size: 16px; }
.btn-sm { min-height: 36px; padding: 8px 15px; font-size: 13.5px; }
.btn-block { width: 100%; }

/* ---------- 6. Nav — moved to chrome-v2.css (shared site chrome) ---------- */
.logo-mark { background: var(--grad-logo); color: #fff; box-shadow: 0 0 24px rgba(116,54,255,.35); }
/* legacy single-column dropdown (no longer emitted by main.js) */
.nav-drop { background: rgba(11,10,18,.98); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.nav-drop a:hover { background: var(--surface-2); }
@media (max-width: 960px) { .nav-drop { background: transparent; border: none; box-shadow: none; } }

/* ---------- 7. Sections / heroes / bands ---------- */
.section { padding: 104px 0; }
@media (max-width: 760px) { .section { padding: 64px 0; } }
.page-hero { position: relative; isolation: isolate; padding: 80px 0 48px; }
.page-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 0; right: 0; top: -140px; height: 560px;
  background: radial-gradient(46% 58% at 50% 28%, rgba(116,54,255,.22), transparent 72%);
}
html[data-theme="light"] .page-hero::before { background: radial-gradient(46% 58% at 50% 28%, rgba(116,54,255,.08), transparent 72%); }
.page-hero p { font-size: 17.5px; }

.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 88px 32px 96px; border-radius: var(--r-xl);
  background: linear-gradient(180deg, #0a0912 0%, #0c0a18 60%, #120d26 100%);
  border: 1px solid var(--border);
}
.cta-band::before {
  content: ""; position: absolute; left: 50%; bottom: -170px; width: 90%; height: 320px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(132,82,255,.7), rgba(116,54,255,.18) 55%, transparent 75%);
  filter: blur(10px);
}
.cta-band::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(220,210,255,.9), transparent);
}
.cta-band p { color: var(--text-dim); font-size: 17px; }
.cta-band h2 + .btn { margin-top: 14px; }
/* Trustpilot line main.js adds under every CTA band: 40px tap target, arrow never wraps alone (  in main.js) */
.cta-band .tp-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 4px; text-align: center; }
@media (max-width: 420px) { .cta-band .tp-link { font-size: 14.5px; } }
@media (max-width: 720px) { .cta-band { padding: 64px 20px 72px; } }

/* footer newsletter -> chrome-v2.css */

.discord-band {
  border-radius: var(--r-xl); border-color: var(--lav-line);
  background: radial-gradient(80% 140% at 0% 0%, rgba(116,54,255,.18), rgba(116,54,255,.04) 70%), var(--surface);
}
.btn-discord { background: var(--brand); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px -10px rgba(116,54,255,.75); }
.btn-discord:hover { background: var(--brand-2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 38px -10px rgba(132,82,255,.9); }

/* ---------- 8. Cards & panels ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  backdrop-filter: none; box-shadow: none;
}
.card::before { background: linear-gradient(160deg, rgba(190,175,255,.32), transparent 42%); opacity: .45; }
.card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.12); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
.card:hover::before { opacity: .9; }
.card .ic { width: 48px; height: 48px; border-radius: 12px; background: rgba(116,54,255,.12); border: 1px solid var(--lav-line); color: var(--lav); }
.card .ic svg { stroke: var(--lav); }
.card p, .step p, .tl-item p { color: var(--text-dim); }
html[data-theme="light"] .card { box-shadow: var(--shadow); }
html[data-theme="light"] .card::before { opacity: .2; }

.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  backdrop-filter: none; box-shadow: none;
}
html[data-theme="light"] .panel { box-shadow: 0 1px 2px rgba(30,20,70,.04), 0 8px 24px rgba(30,20,70,.05); }
.mock-panel, .stat-strip, .co-stat, .trust-badge, .trust-row .trust-badge, .review-card, .review-v, .tl-item, .sym-chip,
.blog-card, .trader-card, .award, .ach, .hero-card, .jr-row, .ls-card, .mini-acct {
  background: var(--surface); border: 1px solid var(--border); backdrop-filter: none; box-shadow: none;
}
.stat-strip, .co-stat, .review-card, .tl-item, .blog-card, .trader-card, .hero-card { border-radius: var(--r-lg); }
.hero-card { border-top: 1px solid var(--lav-line); box-shadow: 0 30px 80px -30px rgba(116,54,255,.45); }
.hc-m, .hc-trade { background: var(--surface-2); border-color: var(--border); }
.blog-thumb { background: radial-gradient(80% 90% at 50% 100%, rgba(116,54,255,.28), transparent 70%), var(--surface-2); }
.blog-thumb svg, .trust-badge .em svg, .tl-num svg, .co-stat .cs-top svg, .ach .em svg { stroke: var(--lav); }
.blog-card:nth-child(n) .blog-thumb svg { stroke: var(--lav); }
.blog-body .tag2 {
  display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: .01em; text-transform: none;
  color: var(--lav); background: rgba(116,54,255,.10); border: 1px solid var(--lav-line);
}
.step .num, .tl-item .tl-num {
  background: rgba(116,54,255,.12); color: var(--lav); border: 1px solid var(--lav-line);
  font-family: var(--font-display); font-weight: 600;
}
.check-list .tick { background: rgba(116,54,255,.14); color: var(--lav); }
.mock-bar { background: var(--surface-3); }
.mock-bar > span, .fill-ok { background: linear-gradient(90deg, #7436ff, #beafff); }
.side-item, .metric-card, .mock-card, .sb-card, .hub-card, .price-card {
  background: var(--surface) !important;          /* beats style.css polish rule (!important) */
  border-color: var(--border) !important;
  backdrop-filter: none;
}
.price-card { border-radius: var(--r-lg); }
.price-card:hover { border-color: rgba(190,175,255,.3) !important; box-shadow: var(--shadow-neon); }
.price-list li .tick { color: var(--lav); }
.price-badge { background: var(--lav); color: var(--on-accent); font-weight: 600; }
.acct-tabs { background: var(--surface); border: 1px solid var(--border); }
.acct-tabs button { font-weight: 500; }
.acct-tabs button.active { background: var(--brand); color: #fff; }

/* featured / selected = violet glow (beats style.css !important gold rule) */
.pt-card.featured, .price-card.featured, .size-card.on {
  border-color: rgba(190,175,255,.38) !important;
  box-shadow: 0 0 0 1px rgba(190,175,255,.22), 0 30px 80px -30px rgba(116,54,255,.65) !important;
}
.price-card.featured, .pt-card.featured { background: linear-gradient(180deg, #0b0a12 0%, #140f2a 60%, #1c1340 100%) !important; }
.size-card.on .size-check { background: var(--lav); color: var(--on-accent); }
html[data-theme="light"] .pt-card.featured, html[data-theme="light"] .price-card.featured { background: linear-gradient(180deg, #ffffff, #f1ecff) !important; }

/* ---------- 9. Tables ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-2); }
table.lb th { background: var(--surface); color: var(--text-mut); font-weight: 500; font-size: 12px; letter-spacing: .07em; }
table.lb td { border-top: 1px solid var(--border); }
table.lb tr:hover td { background: rgba(116,54,255,.04); }
html[data-theme="light"] .table-wrap { background: #fff; }
html[data-theme="light"] table.lb th { background: var(--surface-2); }
@media (max-width: 640px) {
  table.lb th, table.lb td { padding: 14px 16px; }
  table.lb th { white-space: nowrap; }
}

/* ---------- 10. FAQ ---------- */
.faq-item { background: var(--bg-2); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 12px; transition: border-color .2s; }
.faq-item.open { border-color: rgba(190,175,255,.22); }
.faq-q { padding: 22px 28px; font-size: 17px; font-weight: 500; color: var(--text); }
.faq-q .plus { color: var(--text); font-weight: 300; }
.faq-item.open .faq-q .plus { color: var(--lav); }
.faq-a-inner { padding: 0 28px 22px; color: var(--text-dim); }
@media (max-width: 720px) { .faq-q { padding: 18px 20px; font-size: 16px; } .faq-a-inner { padding: 0 20px 18px; } }

/* ---------- 11. Forms / auth ---------- */
.field label { font-weight: 500; color: var(--text-dim); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; font-family: var(--font); font-size: 15px;
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-mut); }
.field input:focus, .field select:focus, .field textarea:focus,
.jr-select:focus, .jr-search:focus, .jr-note:focus, .promo-row input:focus {
  outline: none; border-color: var(--lav); box-shadow: 0 0 0 3px rgba(116,54,255,.25);
}
.auth-card {
  background: radial-gradient(90% 60% at 50% 0%, rgba(116,54,255,.14), transparent 70%), var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: 0 40px 100px -40px rgba(116,54,255,.45);
}
.auth-card h1 { font-size: 28px; }
@media (max-width: 480px) {
  .auth-wrap { padding-top: 28px; padding-bottom: 28px; }
  .auth-card { padding: 30px 22px; }                                         /* 40px squeezed inputs to ~258px at 390px */
  .field input, .field select, .field textarea { font-size: 16px; }          /* <16px makes iOS Safari zoom on focus */
  .auth-card .field input::placeholder { font-size: 14px; }
}
/* stacked two-column form rows: field margin alone sets the rhythm (grid gap + margin doubled it) */
@media (max-width: 640px) { form .grid-2 { row-gap: 0; } }
.auth-alt a, .prose a:not(.btn), .crumb a:hover { color: var(--lav); }   /* :not(.btn) keeps CTA buttons in .prose white-on-violet */
.promo-row input { background: var(--bg-2); border-radius: 12px; }
.addon-row { border-radius: 14px; }
.addon-row.on { border-color: var(--lav-line); background: rgba(116,54,255,.10); }
.addon-row input, .ch-toggle input { accent-color: var(--brand); }
.addon-price { color: var(--lav); }
.pay-steps { background: var(--surface-2); border-color: var(--border); border-radius: 14px; }
.pay-steps-h { color: var(--lav); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.checkout-safety { background: rgba(116,54,255,.08); border: 1px solid var(--lav-line); border-radius: 12px; }
.order-line { background: rgba(116,54,255,.08); border: 1px solid var(--lav-line); }
.ptrack-step.done .ptrack-dot { background: var(--brand); color: #fff; border-color: var(--brand); }
.ptrack-step.done::after { background: var(--brand); }
/* order "waiting for payment" badge + current tracker step: old orange -> palette amber */
.order-badge { background: rgba(255,196,107,.12); color: var(--warn); border-color: rgba(255,196,107,.3); font-weight: 600; }
.order-badge::before { background: var(--warn); animation: skinPulseAmber 1.8s infinite; }
@keyframes skinPulseAmber { 0% { box-shadow: 0 0 0 0 rgba(255,196,107,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,196,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,196,107,0); } }
.ptrack-step.current .ptrack-dot { background: rgba(255,196,107,.12); color: var(--warn); border-color: var(--warn); }
.trust-strip { border-top-color: var(--border); }

/* ---------- 12. Pricing widget (#price-grid → .pt matrix) + older variants ---------- */
.pt-offer, .cfg-offer, .ch-offer {
  background: rgba(116,54,255,.10); border: 1px solid var(--lav-line); color: var(--text-dim); font-weight: 500;
}
.pt-offer b, .cfg-offer b, .ch-offer b { color: var(--lav); font-weight: 600; }
@media (max-width: 600px) {
  .pt-offer, .cfg-offer { display: block; text-align: center; border-radius: 16px; line-height: 1.5; }
  .pt-offer .cfg-dot, .cfg-offer .cfg-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
}
/* discount line injected by checkout.html with an inline orange colour -> palette amber */
.mock-row [style*="#ff9d3d"] { color: var(--warn) !important; }
.cfg-dot { background: var(--lav); animation: skinPulse 1.8s infinite; }
@keyframes skinPulse { 0% { box-shadow: 0 0 0 0 rgba(190,175,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(190,175,255,0); } 100% { box-shadow: 0 0 0 0 rgba(190,175,255,0); } }
.seg, .jr-seg { background: var(--surface); border: 1px solid var(--border); }
.seg button, .jr-seg button { font-weight: 500; }
.seg button.on { background: var(--brand); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.seg button.on span, .seg.cfg-steps button.on span { color: rgba(255,255,255,.92); }
.seg.cfg-steps button b { font-weight: 600; }
.jr-seg button.on { background: rgba(116,54,255,.16); color: var(--lav); }

.pt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pt-card:hover { border-color: rgba(255,255,255,.16); }
.pt-head { border-bottom-color: var(--border); }
.pt-head span { font-weight: 500; }
.pt-cell { border-bottom-color: var(--border); font-weight: 500; }
.pt-lab { color: var(--text-dim); text-align: left; }
.pt-lab svg { color: var(--lav); }
.pt-price b { font-size: 28px; color: var(--text); }
.pt-ribbon { top: -15px; background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 8px 22px -6px rgba(116,54,255,.8); }   /* sits on the border line, clear of "Account size" */
/* discount = small pill centred at the foot of the featured head (the old round badge covered the ribbon) */
.pt-off {
  top: 62px; right: auto; left: 50%; transform: translateX(-50%);
  width: auto; height: auto; flex-direction: row; gap: 3px; padding: 3px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--lav); color: var(--on-accent); box-shadow: none;
}
.pt-off span { font-size: 9px; font-weight: 600; }
.size-off { background: var(--lav); color: var(--on-accent); }
.size-pop { background: rgba(116,54,255,.12); color: var(--lav); border: 1px solid var(--lav-line); }
.pt-start { font-weight: 500; }
.pt-card:not(.featured) .pt-start { background: transparent; color: var(--text); border: 1px solid var(--border-2); box-shadow: none; }
.pt-card:not(.featured) .pt-start:hover { background: var(--brand); color: #fff; border-color: transparent; }
.size-card { background: var(--surface); border: 1px solid var(--border); }
.size-price b, .cfg-buy-price b { color: var(--text); }
.cfg-panel, .ch-scroll { background: var(--surface); border: 1px solid var(--border); }
.cfg-stats { background: var(--border); }
.cfg-stat { background: var(--surface); }
.ch-col-featured { background: linear-gradient(180deg, rgba(116,54,255,.14), rgba(116,54,255,.02)); }
.ch-head .ch-col-featured { border-top-color: var(--lav-line); border-left-color: var(--lav-line); border-right-color: var(--lav-line); }
.ch-col-featured:not(.ch-head .ch-col-featured) { border-left-color: var(--lav-line); border-right-color: var(--lav-line); }
.ch-best { color: var(--lav); border-color: var(--lav-line); box-shadow: 0 0 18px rgba(116,54,255,.35); }
.ch-col-featured .btn-primary { background: var(--brand); color: #fff; border-color: transparent; }
.ch-col-featured .btn-primary:hover { background: var(--brand-2); color: #fff; }

/* ---------- 13. Footer — moved to chrome-v2.css (shared site chrome) ---------- */
.disclaimer { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; }   /* generic box outside the footer */
.lang-chip { background: var(--surface); border-color: var(--border); }

/* ---------- 14. Dashboard shell ---------- */
.sidebar { background: var(--bg-2); border-right: 1px solid var(--border); }
.sidebar .logo { display: block; flex: none; padding: 0; height: 30px; margin: 4px 0 20px; }   /* style.css padding sat inside the 30px box (and the flex column shrank it), so the logo touched "New Challenge" */
.side-sec-in { min-height: 0; overflow: hidden; }                                 /* main.js wraps each section's links in one row so 1fr -> 0fr collapses them all */
.side-sec.collapsed .side-sec-in { visibility: hidden; transition: visibility 0s .24s; }   /* collapsed links leave the tab order */
.side-link { border-radius: 10px; font-size: 14px; color: var(--text-dim); }
.side-link:hover { background: var(--surface-2); color: var(--text); }
.side-link.active { background: rgba(116,54,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(190,175,255,.16); }
.side-link.active .ic { color: var(--lav); }
html[data-theme="light"] .side-link.active { background: rgba(116,54,255,.08); color: #4b1fd1; box-shadow: inset 0 0 0 1px rgba(116,54,255,.14); font-weight: 600; }
html[data-theme="light"] .side-link.active .ic { color: #4b1fd1; }
.side-sec-h { font-weight: 600; letter-spacing: .09em; }
.side-cta { background: var(--brand); color: #fff; border-radius: 32px; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 26px -10px rgba(116,54,255,.8); }
.side-cta:hover { background: var(--brand-2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 32px -10px rgba(132,82,255,.9); }
.side-badge { background: var(--surface-3); }
html:not([data-theme="light"]) .side-toggle .switch { background: rgba(116,54,255,.28); border-color: var(--lav-line); }   /* dark-mode toggle only: other switches keep their own on/off state */
html:not([data-theme="light"]) .side-toggle .switch .knob { background: var(--lav); }
.side-logout:hover { background: rgba(255,107,129,.08); }

.dash-main { position: relative; }
.topbar-title, .hub-h { font-family: var(--font-display); font-weight: 600; }
.acct-switch select { background-color: var(--surface-2); border: 1px solid var(--border-2); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.icon-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.icon-btn:hover { background: var(--surface-3); }
.avatar { background: linear-gradient(135deg, #8452ff, #4b1fd1); color: #fff; font-weight: 700; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); backdrop-filter: none; }
.kpi .lab, .cr-stat .lab { font-weight: 500; letter-spacing: .06em; }
.kpi .val, .metrix-title h1 { color: var(--text); }
.kpi .val.up, html[data-theme="light"] .kpi .val.up { color: var(--green); }
.kpi .val.down, html[data-theme="light"] .kpi .val.down { color: var(--danger); }
.acct-banner { background: linear-gradient(100deg, rgba(116,54,255,.16), rgba(116,54,255,.04)); border: 1px solid var(--lav-line); }
.metrix-ic { background: rgba(116,54,255,.12); color: var(--lav); }
.track { background: var(--surface-3); }
.obj-note.ok { background: rgba(116,54,255,.10); color: var(--lav); border: 1px solid var(--lav-line); }
.obj-note.warn { background: rgba(255,107,129,.1); border-color: rgba(255,107,129,.28); }
.empty-hero { border-top-color: var(--brand); }
.empty-hero .empty-ic { background: rgba(116,54,255,.12); color: var(--lav); }
.empty-hero .empty-ic svg { width: 28px; height: 28px; }
.jr-rate button .jr-ic { display: inline-block; vertical-align: -2px; margin-right: 5px; }
.jr-note-badge svg { display: inline-block; vertical-align: -3px; }
.mini-acct:hover, .mini-acct.sel { border-color: var(--lav-line); }
.tag-chip:hover { border-color: var(--lav-line); color: var(--lav); }
.tag-chip.on, .jr-rate button[data-rate="good"].on { background: rgba(116,54,255,.12); border-color: var(--lav-line); color: var(--lav); }
.jr-tagline .mini { background: rgba(116,54,255,.12); color: var(--lav); }
.jr-row.win { box-shadow: inset 3px 0 0 0 var(--green); }
.notif-panel { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); }
.notif-item.notif-ok { background: rgba(116,54,255,.10); }
.notif-item.notif-warn { background: rgba(255,196,107,.12); }
.notif-clear { color: var(--lav); }
.fx-live, .term-acct { background: var(--surface-2); border-color: var(--border); }
.tv-wrap { border-color: var(--border); border-radius: var(--r-lg); }
.live-dot.on { background: var(--green); }
/* page-local dashboard colours (inline <style> in dashboard.html etc.) — one notch more specific */
body .donut .dn-act { stroke: #8452ff; }
body .donut .dn-fun { stroke: #4ade9a; }
body .sw-act { background: #8452ff; }
body .sw-fun { background: #4ade9a; }
html[data-theme="light"] body .dash-main .fill-ok { background: linear-gradient(90deg, #7436ff, #a68dff); }
html[data-theme="light"] body .dash-main .neon,
html[data-theme="light"] body .metrix-ic,
html[data-theme="light"] body .dash-main .obj-note.ok { color: #4b1fd1; }
html[data-theme="light"] body .dash-main .up { color: var(--green); }
html[data-theme="light"] body .dash-main .pill-live { color: var(--green); background: rgba(15,122,72,.08); border-color: rgba(15,122,72,.28); }
html[data-theme="light"] body .dash-main .pill-live .pill-dot { background: var(--green); box-shadow: none; }
html[data-theme="light"] .badge-mut { color: #4b1fd1; }
html[data-theme="light"] .badge-ok { color: var(--green); }
html[data-theme="light"] .obj-note.ok { border-color: rgba(116,54,255,.22); }

/* ---------- 15. Modal (offer bar, cookie banner, offer popup, toast -> chrome-v2.css) ---------- */
.fx-modal { background: rgba(3,3,3,.72); }
.fx-modal-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-xl); }
html[data-theme="light"] .fx-modal { background: rgba(14,12,26,.45); }

/* ---------- 16. Page-local blocks (generated articles / localized pages / admin) ---------- */
body .art-faq details, body .l10n-faq details { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0; }
body .art-faq details[open], body .l10n-faq details[open] { border-color: rgba(190,175,255,.22); }
body .art-faq summary, body .l10n-faq summary { font-weight: 500; color: var(--text); border-radius: var(--r-lg); }
body .art-faq summary { padding: 16px 22px; }
body .l10n-faq summary { padding: 17px 22px; }
body .art-faq summary:focus-visible, body .l10n-faq summary:focus-visible { outline-offset: -3px; }
body .art-faq details > p { margin: -6px 0 0; padding: 0 22px 16px; }
body .l10n-faq details > p { margin: 0; padding: 0 22px 18px; }
body .art-related a { background: var(--surface); border-color: var(--border); border-radius: var(--r-lg); font-weight: 500; }
body .prose .art-related a { color: var(--text); }                       /* .prose a:not(.btn) turned the related cards lavender */
body .art-related a:hover, body .prose .art-related a:hover { border-color: var(--lav-line); color: var(--lav); }
/* admin.html (inline <style>): gold active tab + teal/gold status chips -> violet / green / amber */
body .adm-side a.nv.on { color: #fff; background: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
body .adm-side a.nv.on .cnt, body .adm-side a.nv.on .cnt.cnt-open { background: rgba(255,255,255,.2); color: #fff; }
body .adm-side .nv .cnt.cnt-new { background: var(--lav); color: var(--on-accent); }
body .adm-side .nv .cnt.cnt-open { background: rgba(255,196,107,.16); color: var(--warn); }
body .s-finished, body .s-paid, body .s-funded, body .s-active, body .s-bought, body .s-sent, body .s-kyc-ok, body .s-answered { background: rgba(74,222,154,.12); color: var(--green); }
body .s-pending, body .s-requested, body .s-under_review, body .s-waiting, body .s-created, body .s-trial, body .s-sending, body .s-open { background: rgba(255,196,107,.12); color: var(--warn); }
body .adm-table .pos { color: var(--green); }
body .adm-reply { border-left-color: var(--lav-line); }

/* ---------- 17. Shared fixes from the page audits (2026-10) ---------- */
/* long-form text (.prose: legal pages, guides, generated articles) */
.prose h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; font-weight: 500; margin: 0 0 18px; }
.prose h2 { line-height: 1.25; }
.prose h3 { line-height: 1.3; }
.prose p + p { margin-top: 14px; }
.prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: 12px; }
.prose ol { margin-block: 10px; margin-inline: 22px 0; }          /* logical margins = RTL-safe */
.prose ol > li { list-style: decimal; }
.prose ol > li::marker { color: var(--lav); }
.prose strong { color: var(--text); }                    /* bold callouts stand out from #ccc body text */
.prose .cta-band h2 { margin: 0 0 16px; }                /* .prose h2 top margin pushed CTA headings down inside articles */

/* label / value rows */
.mock-row { gap: 16px; }
.mock-row > :last-child:not(:first-child) { text-align: right; margin-inline-start: auto; }   /* stays right-aligned when a row wraps */

/* muted intro line directly above a form field (hub calculators) */
.panel > p.mut + :is(.field, [class*="row"], .grid, .grid-2, .grid-3) { margin-top: 14px; }

/* tick lists: block rows + absolutely placed tick, so inline <b>/<a> inside a row don't become flex columns */
.check-list > li, .check-list > div { display: block; position: relative; padding-inline-start: 36px; min-height: 24px; line-height: 1.6; font-size: 15px; }
.check-list > li > .tick, .check-list > div > .tick { position: absolute; inset-inline-start: 0; top: calc(.8em - 12px); }

/* positive money = palette green (matches .up) */
.pos { color: var(--green); font-weight: 600; }
.neg { color: var(--danger); font-weight: 600; }

/* leaderboard medals: gold/silver/bronze -> violet scale */
.rank-1 { background: linear-gradient(135deg, #8452ff, #4b1fd1); color: #fff; }
.rank-2 { background: rgba(190,175,255,.22); color: #beafff; }
.rank-3 { background: rgba(116,54,255,.16); color: #a68dff; box-shadow: inset 0 0 0 1px rgba(190,175,255,.2); }
html[data-theme="light"] .rank-2 { color: #4b1fd1; }
html[data-theme="light"] .rank-3 { color: #5b2ee0; }

/* plain .pill (no state modifier) = neutral tag chip */
.pill:not([class*="pill-"]) { background: rgba(255,255,255,.05); border: 1px solid var(--border-2); color: var(--text-dim); }
html[data-theme="light"] .pill:not([class*="pill-"]) { background: var(--surface-2); }
.panel-head .pill { white-space: nowrap; flex-shrink: 0; }

/* FAQ: .faq-item clips overflow, so draw the focus ring inside */
.faq-q:focus-visible { outline-offset: -3px; border-radius: 20px; }

/* native form controls follow the theme (scoped to controls so transparent iframes are unaffected) */
input, select, textarea { color-scheme: dark; }
html[data-theme="light"] :is(input, select, textarea) { color-scheme: light; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* dashboard shell: wide tables/grids must not widen the layout on phones */
.dash-main { min-width: 0; }
.dash-grid > *, .metrix-grid > *, .grid > *, .kyc-grid > * { min-width: 0; }
@media (max-width: 960px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.hub-body > .grid, .hub-body > .stat-strip, .hub-body > .sim-grid { margin-bottom: 22px; }
.hub-body > *:last-child { margin-bottom: 0; }
.fill-warn { background: linear-gradient(90deg, #e8a33d, var(--warn)); }
.notif-count { background: #d42f4a; color: #fff; }                 /* white on #d42f4a = 4.9:1 */
html[data-theme="light"] .tradingview-widget-copyright a,
html[data-theme="light"] .tradingview-widget-copyright a:visited { color: var(--text-mut) !important; }

/* plan selector: when the row is too narrow (dashboard with sidebar, tablets) wrap whole buttons instead of breaking labels */
@media (min-width: 601px) {
  .pt-controls .seg.cfg-steps { min-width: 0; flex-wrap: wrap; justify-content: center; border-radius: 30px; }
  .pt-controls .seg.cfg-steps button { white-space: nowrap; }
}
/* phones */
@media (max-width: 600px) {
  .pt-controls .seg.cfg-steps { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 20px; }
  .pt-controls .seg.cfg-steps button { flex: 1 1 28%; padding: 8px 6px; border-radius: 14px; }
  .pt-controls .seg.cfg-steps button span { white-space: nowrap; font-size: 10px; }   /* "Standard · 2 phases" no longer breaks onto a 3rd line */
  .pt-controls .seg.cfg-cur { align-self: center; }
}

/* ---------- 18. Shared fixes from the page audits, round 2 (2026-10-02) ---------- */
/* links inside running text must look like links (colour + underline, not colour-inherit) — WCAG 1.4.1 */
main p a:not([class]), main li a:not([class]) {
  color: var(--lav); text-decoration: underline; text-decoration-color: var(--lav-line); text-underline-offset: 3px;
}
main p a:not([class]):hover, main li a:not([class]):hover { text-decoration-color: currentColor; }

/* CTA band main.js injects before the footer: the page's last section already ends with its own bottom
   padding, so the band adds none on top (was 104 + 110px of empty space) */
.section.fx-band { padding-top: 0; }
@media (max-width: 760px) {
  .section.roomy { padding: 64px 0; }                   /* .section.roomy kept 110px on phones (outranked the mobile .section rule) */
  .section.fx-band { padding-top: 0; }
}

/* dashboard on phones: the open sidebar drawer sits above the cookie banner (z 400) instead of under it */
@media (max-width: 960px) {
  .sidebar.open { z-index: 410; }
  .dash-backdrop.on { z-index: 405; }
}