/* ============================================================
   FOREXERO /plans — SLASH PRICING LOCK
   Single reference: Slash pricing (live + supplied screenshots).
   Font: General Sans (approved Forexero face), JetBrains
   Mono for small technical accents. Dark top to bottom.
   ============================================================ */

.pl6 {
  --bg: #050506;
  --card: #111214;
  --elev: #151619;
  --text: #F7F7F5;
  --muted: #96979D;
  --border: #292A2E;
  --border-soft: rgba(255, 255, 255, 0.10);
  --gold: #C6B591;
  --gold-light: #E6D7B2;
  --gold-dark: #9F8A5C;
  --tp: #00B67A;
  --sans: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.25, 1, 0.4, 1);
  display: block;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
}
.pl6 *, .pl6 *::before, .pl6 *::after { box-sizing: border-box; }
.pl6 .wrap6 { max-width: 1520px; margin: 0 auto; padding: 0 32px; }
.pl6 h1, .pl6 h2, .pl6 h3 { font-family: var(--sans); margin: 0; color: var(--text); }
.pl6 p { margin: 0; }
.pl6 a { text-decoration: none; }

/* ---------------------------------------------------------- */
/* Announcement bar — warm color break, scrolls away           */
/* ---------------------------------------------------------- */
#fxAnnounce {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 45%, rgba(0,0,0,.10) 100%),
    linear-gradient(90deg, #242529 0%, #4A4C52 24%, #6B6D74 50%, #45474C 76%, #242529 100%);
  color: #F7F7F5;
  min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px; font-weight: 500;
  text-align: center;
  line-height: 1.35;
}
#fxAnnounce a { color: #F7F7F5; font-weight: 700; text-decoration: none; white-space: nowrap; }
#fxAnnounce a:hover { color: #C6B591; text-decoration: underline; text-underline-offset: 3px; }
#fxAnnounce .an-short { display: none; }
@media (max-width: 560px) {
  #fxAnnounce { min-height: 44px; font-size: 13px; }
  #fxAnnounce .an-full { display: none; }
  #fxAnnounce .an-short { display: inline; }
}

/* pill buttons, Slash-style */
.pl6 .b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 26px; border-radius: 999px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; width: 100%;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.pl6 .b:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pl6 .b-white { background: #F7F7F5; color: #0B0B0C; }
.pl6 .b-white:hover { background: #E9E9E6; }
.pl6 .b-line { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.22); }
.pl6 .b-line:hover { border-color: rgba(255, 255, 255, 0.45); }

/* ---------------------------------------------------------- */
/* 1. SMALL INTRO                                              */
/* ---------------------------------------------------------- */
.pl6 .head { padding: 132px 0 40px; }
.pl6 .head-inner { display: grid; gap: 18px; max-width: 900px; }
.pl6 .head h1 { font-size: clamp(44px, 5vw, 72px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; }
@media (max-width: 640px) { .pl6 .head { padding: 104px 0 28px; } }

/* ---------------------------------------------------------- */
/* 2. PRICING CARDS — wide, Slash proportions                  */
/* ---------------------------------------------------------- */
.pl6 .sec-plans { padding: 8px 0 96px; }
.pl6 .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pl6 .pcard {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0) 55%),
    var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: clamp(32px, 3vw, 48px);
  display: flex; flex-direction: column;
  min-height: 620px;
}
.pl6 .pcard.annual {
  background:
    radial-gradient(circle at 82% -8%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 22%, transparent 48%),
    linear-gradient(120deg, rgba(198, 181, 145, 0.05) 0%, rgba(198, 181, 145, 0) 34%, rgba(255, 255, 255, 0.03) 52%, rgba(198, 181, 145, 0) 70%, rgba(198, 181, 145, 0.04) 100%),
    radial-gradient(120% 90% at 50% 30%, rgba(255, 255, 255, 0.025) 0%, transparent 65%),
    linear-gradient(165deg, #14161B 0%, #101216 100%);
  border-color: rgba(230, 215, 178, 0.18);
}
.pl6 .pc-top { display: flex; align-items: center; gap: 12px; min-height: 30px; flex-wrap: wrap; }
.pl6 .pc-name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.pl6 .pcard.annual .pc-name {
  background: linear-gradient(90deg, #F3E7C7 0%, #C7B184 45%, #E8D9B5 72%, #F5EEE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pl6 .pc-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #B9A47A;
  border: 1px solid rgba(198, 181, 145, 0.4);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pl6 .pc-price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.pl6 .pc-price .p { font-size: clamp(44px, 3.6vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.pl6 .pc-price .c { font-size: 15px; font-weight: 400; color: var(--muted); }
.pl6 .pc-bill { font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 8px; }
.pl6 .pc-save { font-size: 13.5px; font-weight: 400; color: var(--gold); margin-top: 4px; min-height: 1.4em; }
.pl6 .pc-bill.pc-gold { color: var(--gold); }
.pl6 .pc-cta { margin-top: 24px; }
.pl6 .pc-desc { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 22px; }
.pl6 .pc-note { font-size: 13px; color: var(--muted); margin-top: 6px; }
.pl6 .pc-div { border: 0; border-top: 1px solid var(--border-soft); margin: 24px 0 0; }
.pl6 .pc-feats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.pl6 .pc-feats li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.pl6 .pc-feats li::before {
  content: ""; position: absolute; left: 3px; top: 0.52em;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--muted);
  border-bottom: 1.6px solid var(--muted);
  transform: rotate(-45deg);
}
.pl6 .pcard.annual .pc-feats li::before {
  border-color: var(--gold);
}
@media (max-width: 980px) {
  .pl6 .pgrid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 18px; }
  .pl6 .pcard { min-height: 0; }
  .pl6 .sec-plans { padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .pl6 .wrap6 { padding: 0 22px; }
}

/* ---------------------------------------------------------- */
/* 3. FREE VS VIP COMPARISON — dark, ruleless Slash table      */
/* ---------------------------------------------------------- */
.pl6 .sec-cmp { padding: 40px 0 96px; }
.pl6 .cmp-title { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 44px; max-width: 640px; }
.pl6 .cmp-cols { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; }
.pl6 .cmp-headrow {
  position: sticky;
  top: calc(var(--fxAnnOff, 0px) + 72px);
  z-index: 5;
  background: rgba(5, 5, 6, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}
@media (max-width: 1023px) {
  .pl6 .cmp-headrow { top: calc(var(--fxAnnOff, 0px) + 64px); }
}
.pl6 .cmp-colhead { display: grid; gap: 4px; align-content: start; padding-bottom: 26px; }
.pl6 .cmp-colhead .d-mob { display: none; }
@media (max-width: 760px) {
  .pl6 .cmp-headrow { padding-top: 8px; }
  .pl6 .cmp-colhead { padding-bottom: 12px; }
  .pl6 .cmp-colhead .d-desk { display: none; }
  .pl6 .cmp-colhead .d-mob { display: block; }
}
.pl6 .cmp-colhead .n { font-size: 20px; font-weight: 700; }
.pl6 .cmp-colhead .d { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.pl6 .cmp-colhead.vip .n {
  background: linear-gradient(90deg, #F3E7C7 0%, #C7B184 45%, #E8D9B5 72%, #F5EEE0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pl6 .cmp-group { margin-top: 8px; }
.pl6 .cmp-cat {
  font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -0.01em;
  padding: 34px 0 16px;
}
.pl6 .cmp-group:first-of-type .cmp-cat { padding-top: 6px; }
.pl6 .cmp-row { display: contents; }
.pl6 .cmp-row > span {
  border-top: 1px solid var(--border-soft);
  padding: 17px 0;
  font-size: 15.5px; line-height: 1.5;
  display: flex; align-items: center;
}
.pl6 .cmp-row .f { color: var(--text); font-weight: 500; font-size: clamp(15.5px, 1.4vw, 18px); }
.pl6 .cmp-row .v { color: var(--muted); font-size: 15px; }
.pl6 .cmp-row .v b { color: var(--text); font-weight: 600; }
.pl6 .ck {
  display: inline-block; width: 10px; height: 5.5px;
  border-left: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted);
  transform: rotate(-45deg) translateY(-1px);
}
.pl6 .ck.gold { border-color: var(--gold); }
.pl6 .dash { color: rgba(255, 255, 255, 0.25); }
@media (max-width: 760px) {
  .pl6 .sec-cmp { padding: 24px 0 64px; }
  .pl6 .cmp-cols { grid-template-columns: 1fr 1fr; }
  .pl6 .cmp-colhead.feat { display: none; }
  .pl6 .cmp-row > .f {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-soft);
    padding: 15px 0 4px;
  }
  .pl6 .cmp-row > .v { border-top: 0; padding: 2px 0 14px; font-size: 14px; }
  .pl6 .cmp-row > .v::before { content: attr(data-col) "  "; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(255,255,255,0.4); margin-right: 8px; text-transform: uppercase; }
  .pl6 .cmp-cat { padding: 26px 0 10px; }
}

/* ---------------------------------------------------------- */
/* 4. SMALL FINAL CTA                                          */
/* ---------------------------------------------------------- */
.pl6 .sec-final { border-top: 1px solid var(--border-soft); padding: 76px 0 88px; }
.pl6 .final-inner { display: grid; gap: 16px; justify-items: center; text-align: center; }
.pl6 .final-inner h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.02em; }
.pl6 .final-inner > p { font-size: 15px; color: var(--muted); }
.pl6 .final-inner .b { width: auto; min-width: 190px; }
.pl6 .final-help { font-size: 13.5px; color: var(--muted); }
.pl6 .final-help a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pl6 .final-help a:hover { color: var(--gold-light); }
@media (max-width: 640px) { .pl6 .sec-final { padding: 56px 0 64px; } }


/* ---------------------------------------------------------- */
/* Sponsored fork modal (shared with /sponsored-vip)           */
/* ---------------------------------------------------------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(5, 5, 6, 0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-bg.open { display: flex; }
.modal {
  position: relative;
  width: min(480px, 100%);
  background: #111214;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 34px 32px 28px;
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #F7F7F5;
}
.modal .mx {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; color: #96979D; font-size: 24px; cursor: pointer; line-height: 1;
  min-width: 44px; min-height: 44px;
}
.modal .mx:hover { color: #F7F7F5; }
.modal h3 { font-size: 21px; font-weight: 600; margin: 0 0 8px; }
.modal .ms { font-size: 14px; color: #96979D; margin-bottom: 20px; }
.modal .fork { display: grid; gap: 12px; }
.modal .fork-opt {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: grid; gap: 6px; justify-items: start;
}
.modal .fork-opt b { font-size: 15.5px; font-weight: 600; color: #F7F7F5; }
.modal .fork-opt span { font-size: 13.5px; line-height: 1.5; color: #96979D; }
.modal .fork-opt .min-dep { font-size: 13.5px; font-weight: 600; color: #F7F7F5; }
.modal .fork-opt .min-dep b { font-weight: 600; color: #C6B591; }
.modal .fork-opt .fb {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 20px; margin-top: 8px; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.modal .fork-opt .fb.go { background: #F7F7F5; color: #0B0B0C; border: 1px solid #F7F7F5; }
.modal .fork-opt .fb.go:hover { background: #E9E9E6; }
.modal .fork-opt .fb.alt { background: transparent; color: #F7F7F5; border: 1px solid rgba(255, 255, 255, 0.22); }
.modal .fork-opt .fb.alt:hover { border-color: rgba(255, 255, 255, 0.45); }
.modal .m-activation { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: #96979D; }
.modal .m-activation a { color: #F7F7F5; text-decoration: underline; text-underline-offset: 3px; }
.modal .m-activation a:hover { color: #C6B591; }
.modal .m-disc { margin-top: 10px; font-size: 11.5px; color: rgba(150, 151, 157, 0.8); }
.modal .m-disc a { color: #96979D; text-decoration: underline; text-underline-offset: 3px; }
.modal .m-disc a:hover { color: #F7F7F5; }
@media (max-width: 640px) {
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal { width: 100%; border-radius: 16px 16px 0 0; padding: 30px 22px 26px; border-bottom: 0; }
}

/* reveal, motion-safe */
@media (prefers-reduced-motion: no-preference) {
  .pl6 .rv { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
  .pl6 .rv.on { opacity: 1; transform: none; }
  .pl6 .pgrid .pcard:nth-child(2) { transition-delay: 90ms; }
  .pl6 .pgrid .pcard:nth-child(3) { transition-delay: 180ms; }
  .pl6 .pgrid .pcard.on { transition-delay: inherit; }
}

/* ---------------------------------------------------------- */
/* /plans nav: near-black sticky, warm-white pill CTA          */
/* ---------------------------------------------------------- */
body[data-page="plans"] header.nav .fxnav-cta.btn {
  background: #F7F7F5 !important; border-color: #F7F7F5 !important; color: #0B0B0C !important;
  border-radius: 999px !important;
}
body[data-page="plans"] header.nav .fxnav-cta.btn:hover { background: #E9E9E6 !important; border-color: #E9E9E6 !important; }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light {
  background: rgba(5, 5, 6, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-logo img.fxnav-logo-ink { display: none; }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-logo img.fxnav-logo-white { display: block; }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-trigger,
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-direct { color: rgba(247, 247, 245, 0.92); }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-trigger:hover,
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-direct:hover { color: #fff; }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-actions .fxnav-login.btn { color: rgba(247, 247, 245, 0.92); }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-actions .fxnav-login.btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .auth-avatar { color: #fff; }
body[data-page="plans"]:not(.fxmm-lock):not(:has(.fxmega.is-open)) header.nav.fx-light .fxnav-burger span { background: #fff; }