/* =====================================================================
   TIMMY'S DUNGEON — futures prop-firm hub
   Dark control-room blue.
   Shared across index / propfirms / giveaways / indicator.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --bg-0:#070A11;      /* page */
  --bg-1:#0B111C;      /* elevated band */
  --bg-2:#101826;      /* card */
  --bg-3:#16202F;      /* card hover / input */
  --bg-4:#1C2738;      /* raised chip */
  --line:#233145;
  --line-2:#2D3C52;
  --line-soft:rgba(255,255,255,.055);

  --green:#2E7BF6;
  --green-bright:#5CA0FF;
  --green-deep:#1B4D9E;
  --green-ink:#F5F9FF;
  --green-glow:rgba(46,123,246,.20);
  --green-wash:rgba(46,123,246,.08);

  --gold:#2E7BF6;      /* GIVEAWAY ROOMS ONLY */
  --gold-bright:#5CA0FF;
  --gold-deep:#1B4D9E;
  --gold-ink:#F5F9FF;
  --gold-glow:rgba(46,123,246,.20);
  --gold-wash:rgba(46,123,246,.08);

  --loss:#E5544B;

  --text:#EAF1FB;
  --muted:#96A2B5;
  /* Was #63708A. Measured against the three grounds it actually sits on it came out at 3.95, 3.69
     and 3.49 to 1, all under the 4.5:1 floor for body text, and it is the colour of the deals
     disclosure, the review counts and the deals note. The same colour was found and fixed inside
     rewards-shell.html on 2026-07-27 but the shared stylesheet was missed, so the fix never reached
     index.html or propfirms.html, which are the pages that are actually live.
     #8E9BB0 is the value that replaced it there. It measures 7.0, 6.54 and 6.18 on the same three
     grounds and still sits below --muted, so the hierarchy is unchanged. */
  --muted-2:#8E9BB0;

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --r-sm:9px;
  --r:13px;
  --r-lg:18px;
  --r-xl:26px;

  --shadow:0 24px 60px -28px rgba(0,0,0,.8);
  --shadow-2:0 12px 34px -18px rgba(0,0,0,.7);

  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul{list-style:none;padding:0}
input{font:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:5px}

/* ambient field */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(820px 560px at 82% -6%, rgba(46,123,246,.10), transparent 62%),
    radial-gradient(680px 520px at 4% 10%, rgba(46,123,246,.05), transparent 58%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:4px 4px;
}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
main{overflow-x:clip}
.section{padding-block:clamp(58px,8vw,110px)}
.section--tight{padding-block:clamp(44px,5vw,72px)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.04}
.h1{font-size:clamp(31px,6.2vw,70px);letter-spacing:-.03em;line-height:1.04;font-weight:700}
.h2{font-size:clamp(29px,4.2vw,46px);letter-spacing:-.025em;font-weight:700}
.h3{font-size:clamp(21px,2.4vw,27px);font-weight:600}
.green{color:var(--green)}
.gold{color:var(--gold)}
.lead{color:var(--muted);font-size:clamp(16px,1.4vw,18.5px);line-height:1.6;max-width:56ch}

/* eyebrow — editorial label, no box */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.75;flex:none}
.eyebrow--gold{color:var(--gold)}
/* centered contexts get a trailing rule so the label stays symmetric */
.hero .eyebrow::after,.section-head--center .eyebrow::after,.phero .eyebrow::after{
  content:"";width:26px;height:1px;background:currentColor;opacity:.75;flex:none}

.section-head{max-width:660px;margin-bottom:clamp(36px,4vw,54px)}
.section-head .h2{margin-top:18px}
.section-head .lead{margin-top:16px}
.section-head--center{max-width:720px;margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(32px,3.6vw,46px);flex-wrap:wrap}
.head-row .section-head{margin-bottom:0}

/* ---------- Buttons ---------- */
/* Every variant carries a 1px border, transparent unless a variant colours it. Without this the
   bordered variants (ghost, line) stand 2px taller than the unbordered ones (primary, gold), so
   any row mixing them is misaligned — and how it looks depends on the parent's align-items, which
   made the same .btn-primary render 56.8px in the hero (stretched to match the ghost beside it)
   and 54.8px further down the page. Border-box means the transparent border costs no extra size. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:14.5px;letter-spacing:.005em;
  padding:12px 20px;border:1px solid transparent;border-radius:var(--r);white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--green);color:var(--green-ink);font-weight:700;
  box-shadow:0 10px 26px -12px var(--green-glow),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{transform:translateY(-2px);background:var(--green-bright);
  box-shadow:0 16px 34px -12px var(--green-glow),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-ghost{background:var(--bg-3);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--green-deep);background:var(--bg-4)}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-line:hover{border-color:var(--green);color:var(--green-bright)}
.btn-gold{background:var(--gold);color:var(--gold-ink);font-weight:700;
  box-shadow:0 10px 26px -12px var(--gold-glow),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-gold:hover{transform:translateY(-2px);background:var(--gold-bright);box-shadow:0 16px 34px -12px var(--gold-glow)}
.btn-lg{padding:15px 26px;font-size:15.5px}
.btn-xl{padding:20px 48px;font-size:18px;min-width:300px}
.btn-sm{padding:9px 15px;font-size:13.5px}
.btn-block{width:100%}
.on-sm{display:none}

/* ---------- Ticker ---------- */
.ticker{background:var(--bg-1);border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--muted)}
.ticker .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:9px;text-align:center;flex-wrap:wrap}
.ticker b{color:var(--green);font-weight:600}
.ticker .dot{color:var(--muted-2)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:transparent;border-bottom:1px solid transparent;
  transition:background .32s var(--ease),border-color .32s var(--ease),backdrop-filter .32s var(--ease),box-shadow .32s var(--ease)}
.nav.scrolled{background:rgba(9,13,20,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line-soft);box-shadow:0 10px 34px -20px rgba(0,0,0,.75)}
.nav.open{background:rgba(9,13,20,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line-soft)}
.nav__in{display:flex;align-items:center;gap:20px;height:66px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;letter-spacing:-.01em;font-size:17px}
.brand img{width:32px;height:32px;border-radius:9px}
.brand b{color:var(--green);font-weight:700}
.nav__links{display:flex;align-items:center;gap:2px;position:absolute;right:15%;top:50%;transform:translateY(-50%);white-space:nowrap}
.nav__links a{padding:9px 14px;border-radius:10px;color:var(--muted);font-weight:500;font-size:14.5px;
  transition:color .18s,background .18s}
.nav__links a:hover{color:var(--text);background:var(--bg-2)}
.nav__links a[aria-current="page"]{color:var(--green)}
.nav__links a[aria-current="page"]:hover{color:var(--green-bright)}
.nav__cta{margin-left:8px}
.nav__links a.nav__cta.btn-primary{color:var(--green-ink)}
.nav__links a.nav__cta.btn-primary:hover{color:var(--green-ink);background:var(--green-bright)}
.nav__toggle{display:none;margin-left:auto;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line-2);align-items:center;justify-content:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:"";display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:.25s}
.nav__toggle span::before{transform:translateY(-6px)}
.nav__toggle span::after{transform:translateY(4px)}
.nav.open .nav__toggle span{background:transparent}
.nav.open .nav__toggle span::before{transform:rotate(45deg)}
.nav.open .nav__toggle span::after{transform:rotate(-45deg) translateY(-1px)}
.i-discord{width:19px;height:19px}

/* ---------- HERO (home) ---------- */
.hero{position:relative;padding-top:clamp(22px,4vw,52px);padding-bottom:clamp(20px,3vw,40px);text-align:center;overflow:hidden}
.hero__copy{max-width:820px;margin-inline:auto}
.hero h1{margin:0 auto}
.hero__sub{margin:18px auto 0;font-size:clamp(16px,1.6vw,20px);max-width:60ch;color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:26px}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:26px}
.hero__meta li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.hero__meta b{font-family:var(--font-mono);color:var(--text);font-weight:700}
.hero__meta .d{width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}

/* framed product window */
.frame-wrap{position:relative;max-width:940px;margin:clamp(28px,4vw,52px) auto 0}
.frame-duo{position:relative;max-width:1000px;margin:clamp(28px,4vw,54px) auto 0;aspect-ratio:2.35/1}
.fd{position:absolute;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.fd img{width:100%;display:block}
.fd--back{left:0;bottom:5%;width:61%;z-index:0;filter:brightness(.8);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.fd--front{right:0;bottom:0;width:66%;z-index:2;box-shadow:0 44px 84px -32px rgba(0,0,0,.92)}
.fd--front::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
/* Three-frame hero: Discord is biggest in the centre; deals (left) and Prop Shop (right) are smaller
   side peeks. All three are vertically centred, so the shorter side frames stay contained within the
   centre's height and can never poke above or below it. */
.frame-trio{max-width:1180px;aspect-ratio:2.55/1}
.frame-trio .fd--back{left:0;top:50%;bottom:auto;transform:translateY(-50%);width:45%;z-index:0;filter:brightness(.6)}
.frame-trio .fd--front{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:54%;z-index:3}
.frame-trio .fd--side{right:0;top:50%;bottom:auto;transform:translateY(-50%);width:28%;z-index:1;filter:brightness(.68);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
@media(max-width:600px){
  .frame-trio{aspect-ratio:2.25/1}
  .frame-trio .fd--back{width:46%}
  .frame-trio .fd--front{width:58%}
  .frame-trio .fd--side{width:31%}
}
@media(max-width:720px){
  .fd--front .floaty--members{top:7px;right:7px;padding:4px 8px;gap:6px;border-radius:9px}
  .fd--front .floaty--members .ic{width:22px;height:22px;border-radius:6px}
  .fd--front .floaty--members .ic svg{width:13px;height:13px}
  /* 7px uppercase is not small type, it is decoration shaped like type. This badge is the social
     proof on the hero, so on the screen where most visitors meet it, it has to be readable.
     Raised to 12.5/9 and the tracking eased, which still clears the screenshot behind it. */
  .fd--front .floaty--members .k{font-size:12.5px}
  .fd--front .floaty--members .l{font-size:9px;letter-spacing:.06em;margin-top:1px}
}
.frame{position:relative;z-index:1;border:1px solid var(--line-2);border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));overflow:hidden;box-shadow:var(--shadow)}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.frame__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--bg-1)}
.frame__bar i{width:11px;height:11px;border-radius:50%;background:var(--bg-4);display:block}
.frame__bar i:first-child{background:#33443c}
.frame__bar em{margin-left:auto;margin-right:auto;font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);font-style:normal;letter-spacing:.04em;white-space:nowrap}
.frame img{width:100%;display:block}
.floaty{position:absolute;display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:14px;
  background:rgba(11,18,16,.94);border:1px solid var(--line-2);box-shadow:var(--shadow-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.floaty .k{font-family:var(--font-mono);font-weight:700;letter-spacing:.01em;line-height:1;font-size:17px}
.floaty .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;margin-top:4px}
.floaty svg{width:22px;height:22px}
.floaty--members{top:16px;right:16px}
.floaty--members .ic{width:34px;height:34px;border-radius:9px;background:var(--green-wash);border:1px solid rgba(46,123,246,.25);
  display:flex;align-items:center;justify-content:center;color:var(--green)}
.floaty--members .k{color:var(--text);font-size:16px}
.floaty--payout{bottom:-22px;right:-12px;border-color:rgba(46,123,246,.35)}
.floaty--payout .k{color:var(--green);font-size:18px}
.floaty--payout svg{color:var(--green)}

/* ---------- Feature cards ---------- */
.fcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fcards .fcard{max-width:none;display:flex;flex-direction:column}
.fcards .fcard__link{margin-top:auto}
@media(max-width:960px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.fcards{grid-template-columns:minmax(0,1fr)}}
.fcard{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 24px;overflow:hidden;transition:transform .25s var(--ease),border-color .25s,background .25s}
.fcard:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--bg-3)}
.fcard--lead{border-color:rgba(46,123,246,.28);background:linear-gradient(180deg,var(--green-wash),var(--bg-2))}
.fcard__tag{position:absolute;top:18px;right:18px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);border:1px solid rgba(46,123,246,.3);border-radius:100px;padding:4px 10px}
.fcard__ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-4);border:1px solid var(--line-2);color:var(--green);margin-bottom:18px}
.fcard__ic svg{width:22px;height:22px}
.fcard h3{margin-bottom:9px}
.fcard p{color:var(--muted);font-size:14.5px;margin-bottom:18px}
/* padded to clear the 24px target minimum without moving the text: it is the card's only action,
   and it rendered 22px tall. The negative margin absorbs the padding so spacing is unchanged. */
.fcard__link{font-weight:600;font-size:14px;color:var(--green);display:inline-flex;align-items:center;gap:7px;padding:6px 4px;margin:-6px -4px}
.fcard__link svg{width:15px;height:15px;transition:transform .2s}
.fcard:hover .fcard__link svg{transform:translateX(3px)}
/* What's included grid (4 across, compact) */
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.inc-grid .fcard{padding:24px 20px;text-align:center}
.inc-grid .fcard__ic{width:40px;height:40px;margin:0 auto 13px}
.inc-grid .fcard h3{font-size:17px}
.inc-grid .ind__feats{gap:11px;text-align:left}
.inc-grid .ind__feats li{gap:10px}
.inc-grid .ind__feats .fi{width:24px;height:24px;border-radius:7px}
.inc-grid .ind__feats .fi svg{width:13px;height:13px}
.inc-grid .ind__feats b{font-size:13px;white-space:nowrap}
.inc-grid .fcard__link{font-size:13px}
@media(max-width:900px){.inc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.inc-grid{grid-template-columns:1fr}}
.fmini{margin-bottom:20px;border:1px solid var(--line);border-radius:12px;background:var(--bg-1);padding:14px;overflow:hidden}
.fmini--rows{display:flex;flex-direction:column;gap:8px}
.fmini__row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.fmini__row .av{width:22px;height:22px;border-radius:50%;background:var(--bg-4);border:1px solid var(--line-2);flex:none}
.fmini__row .bar{height:6px;border-radius:4px;background:var(--bg-4);flex:1}
.fmini__row .bar.g{background:linear-gradient(90deg,var(--green-deep),var(--green));opacity:.55}
.fmini__pct{margin-left:auto;font-family:var(--font-mono);font-weight:700;color:var(--green);font-size:13px}
.fmini--deal{display:flex;flex-direction:column;gap:10px}
.fmini__deal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.fmini__deal-row b{color:var(--text);font-weight:600}
.fmini--gift{display:flex;align-items:center;gap:12px}
.fmini--gift .gift-ic{width:38px;height:38px;border-radius:10px;background:var(--gold-wash);border:1px solid rgba(46,123,246,.28);
  display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none}
.fmini--gift .gift-ic svg{width:20px;height:20px}
.fmini--gift .txt b{display:block;color:var(--text);font-size:13px}
.fmini--gift .txt span{font-size:12px;color:var(--muted)}

/* ---------- How it works ---------- */
.how{display:grid;grid-template-columns:1fr .9fr;gap:clamp(36px,5vw,72px);align-items:center}
.steps{display:flex;flex-direction:column;gap:6px}
.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step__n{flex:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:var(--green);font-size:15px}
.step h4{font-size:17px;margin-bottom:5px;font-weight:600;letter-spacing:-.01em}
.step p{color:var(--muted);font-size:14.5px}
.step p b{color:var(--text);font-weight:600}
.emblem{position:relative;width:min(400px,80vw);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center}
.emblem__ring{position:absolute;border-radius:50%;border:1px solid var(--line-2)}
.emblem__ring--1{inset:0;border-style:dashed;border-color:var(--line-2);animation:spin 46s linear infinite}
.emblem__ring--2{inset:15%;border-color:var(--line);background:radial-gradient(circle at 50% 40%,var(--green-wash),transparent 62%)}
.emblem__ring--3{inset:31%;border-color:rgba(46,123,246,.22)}
.emblem__core{position:relative;z-index:2;width:34%;aspect-ratio:1;border-radius:24px;overflow:hidden;
  border:1px solid rgba(46,123,246,.35);box-shadow:0 0 44px -8px var(--green-glow);background:var(--bg-2);display:grid;place-items:center}
.emblem__core img{width:100%;height:100%;object-fit:cover}
.emblem__pip{position:absolute;top:50%;left:50%;width:0;height:0;z-index:3;
  transform:rotate(var(--a)) translateY(calc(min(200px,40vw) * -1))}
.emblem__pip i{display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  width:46px;height:46px;border-radius:13px;background:var(--bg-2);border:1px solid var(--line-2);color:var(--green);box-shadow:var(--shadow-2)}
.emblem__pip i svg{width:21px;height:21px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Discount grid (coupon cards) ---------- */
.deals{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.deals-disclose{text-align:center;color:var(--muted-2);font-size:12.5px;line-height:1.55;max-width:620px;margin:0 auto 26px}
/* min-width:0 makes the flex-shrink in this shorthand actually mean something. A flex item defaults
   to min-width:auto, which floors at its own min-content, so on a 320px phone the 276px row could
   not shrink these below ~296px (335px for the featured card) and they hung 8px past the viewport.
   main{overflow-x:clip} hid the page-level symptom, which is why it survived: the card was not
   scrolling the page, it was being sliced at the edge. */
.deals .deal{flex:1 1 300px;max-width:364px;min-width:0}
.deal{position:relative;background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;
  padding:18px;display:flex;flex-direction:column;gap:15px;
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s}
.deal:hover{transform:translateY(-4px);border-color:rgba(46,123,246,.35)}
.deal--featured{border-color:rgba(46,123,246,.68);box-shadow:0 0 0 1px rgba(46,123,246,.4),0 0 36px -2px rgba(46,123,246,.5),0 22px 50px -20px rgba(46,123,246,.6)}
.deal--featured:hover{border-color:rgba(46,123,246,.72)}
.deal__medal{position:absolute;top:14px;right:12px;z-index:3;width:48px;line-height:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.deal__medal img,.deal__medal svg{width:100%;height:auto;display:block}
.deal:has(.deal__medal) .deal__id{padding-right:52px}

/* ---------- Top picks leaderboard ---------- */
.lboard{display:flex;flex-direction:column;gap:12px;max-width:900px;margin-inline:auto}
.lb{display:flex;align-items:center;gap:16px;padding:14px 20px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.lb:hover{transform:translateY(-2px);border-color:rgba(46,123,246,.45)}
.lb--1{border-color:rgba(231,181,74,.6);box-shadow:0 0 0 1px rgba(231,181,74,.3),0 0 30px -4px rgba(231,181,74,.38),0 18px 42px -18px rgba(231,181,74,.5)}
.lb__medal{width:40px;flex:none;line-height:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.lb__medal img,.lb__medal svg{width:100%;height:auto;display:block}
.lb__logo{width:52px;height:52px;flex:none;border-radius:13px;object-fit:cover;border:1px solid var(--line)}
.lb__id{flex:1;min-width:0}
.lb__name{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.15}
.lb__rating{display:inline-flex;align-items:center;gap:7px;margin-top:4px;text-decoration:none}
.lb__off{flex:none;font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--off,#3B8EFF);letter-spacing:-.02em;white-space:nowrap}
.lb__off small{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:2px;text-align:right}
.lb__go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:11px;
  background:var(--green);color:var(--green-ink);font-weight:700;font-size:13.5px;white-space:nowrap;
  transition:transform .18s var(--ease),background .2s}
.lb__go:hover{background:var(--green-bright);transform:translateY(-1px)}
.lb__go svg{width:15px;height:15px;flex:none}
.lb__arrow{display:none}
@media(max-width:720px){
  .lb{flex-wrap:nowrap;gap:10px;padding:10px 12px;border-radius:13px}
  .lb__medal{width:26px}
  .lb__logo{width:34px;height:34px;border-radius:9px}
  .lb__name{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .lb__off{font-size:15.5px}
  .lb__off small{display:none}
  .lb__go{display:none}
  .lb__arrow{display:flex;flex:none;width:26px;height:26px;align-items:center;justify-content:center;
    border-radius:8px;background:var(--green);color:var(--green-ink)}
  .lb__arrow svg{width:14px;height:14px}
}
/* Every child of .lb except the name is flex-shrink:0, so .lb__id alone absorbs the shortfall and
   at 320px it was down to 64px — "Lucid Trading" and "Apex Funding" both truncated to an ellipsis
   on the homepage, where the firm name is the whole point of the row. The arrow cannot go: below
   720px it replaces the "Buy Now" button and is the row's only affordance. So the width comes back
   out of the spacing instead, which no one is reading. */
@media(max-width:400px){
  .lb{gap:7px;padding:10px 10px}
  .lb__medal{width:22px}
  .lb__logo{width:30px;height:30px}
  .lb__off{font-size:14px}
}
.deal__head{display:flex;align-items:center;gap:15px}
.deal__logo{width:80px;height:80px;border-radius:16px;object-fit:cover;flex:none;border:1px solid var(--line)}
.deal__id{min-width:0}
.deal__name{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.08;margin-bottom:9px}
.deal__rating{display:inline-flex;align-items:center;gap:7px;background:var(--bg-1);border:1px solid var(--line);border-radius:8px;padding:4px 9px;text-decoration:none;transition:border-color .2s}
.deal__rating:hover{border-color:var(--green-deep)}
.deal__score{font-family:var(--font-mono);font-weight:700;font-size:12.5px;color:var(--text)}
.deal__stars{position:relative;display:inline-block;color:var(--line-2);font-size:12px;letter-spacing:1.5px;line-height:1}
.deal__stars::before{content:"★★★★★";position:absolute;left:0;top:0;color:var(--green);width:var(--r,100%);overflow:hidden;white-space:nowrap}
.deal__reviews{color:var(--muted-2);font-family:var(--font-mono);font-size:11px;border-left:1px solid var(--line-2);padding-left:7px}
.deals-note{text-align:center;margin-top:20px;font-size:12px;color:var(--muted-2)}
.deals-note a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.deals-note a:hover{color:var(--green)}
/* coupon ticket: solid blue border layer, fill sits 1.5px inside so the
   border traces the whole perimeter AND curves into the side notches */
.deal__ticket{position:relative;--nr:15px;padding:24px 22px;text-align:center;border-radius:16px;
  background:rgba(46,123,246,.5);
  -webkit-mask:
    radial-gradient(circle var(--nr) at 0 50%,#0000 98%,#000) 0/50.5% 100% no-repeat,
    radial-gradient(circle var(--nr) at 100% 50%,#0000 98%,#000) 100%/50.5% 100% no-repeat;
  mask:
    radial-gradient(circle var(--nr) at 0 50%,#0000 98%,#000) 0/50.5% 100% no-repeat,
    radial-gradient(circle var(--nr) at 100% 50%,#0000 98%,#000) 100%/50.5% 100% no-repeat}
.deal__ticket::before{content:"";position:absolute;inset:1.5px;border-radius:15px;pointer-events:none;
  background:linear-gradient(180deg,#16233b,#0c1526);--nr2:15px;
  -webkit-mask:
    radial-gradient(circle var(--nr2) at 0 50%,#0000 98%,#000) 0/50.5% 100% no-repeat,
    radial-gradient(circle var(--nr2) at 100% 50%,#0000 98%,#000) 100%/50.5% 100% no-repeat;
  mask:
    radial-gradient(circle var(--nr2) at 0 50%,#0000 98%,#000) 0/50.5% 100% no-repeat,
    radial-gradient(circle var(--nr2) at 100% 50%,#0000 98%,#000) 100%/50.5% 100% no-repeat}
.deal__ticket>*{position:relative;z-index:1}
.deal__off{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,3.4vw,42px);color:var(--off,#3B8EFF);letter-spacing:-.02em;line-height:1}
.deal__off-sub{margin-top:9px;font-size:13px;font-weight:600;color:var(--text)}
.deal__actions{display:grid;grid-template-columns:1fr;gap:10px}
.deal__btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--bg-1);color:var(--text);font-weight:600;font-size:13.5px;
  white-space:nowrap;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.deal__btn:hover{border-color:var(--green-deep);background:var(--bg-3)}
.deal__btn svg{width:15px;height:15px;flex:none}
.deal__btn--code b{color:var(--green);font-family:var(--font-mono);font-weight:800;font-size:17px;letter-spacing:.04em}
.deal__btn.copied{border-color:var(--green-deep);color:var(--green)}
.deal__go{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:11px;
  background:var(--green);color:var(--green-ink);font-weight:700;font-size:14.5px;
  transition:transform .18s var(--ease),background .2s;box-shadow:0 10px 26px -14px var(--green-glow)}
.deal__go:hover{background:var(--green-bright);transform:translateY(-1px)}
.deal__go svg{width:17px;height:17px;flex:none}
.deals-foot{display:flex;justify-content:center;margin-top:34px}
/* Affiliate / FTC disclosure bar */
.affdisc{max-width:820px;margin:0 auto 26px;padding:12px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2);color:var(--muted);font-size:13.5px;line-height:1.6;text-align:center}
.affdisc strong{color:var(--text);font-weight:600}
/* Inline affiliate disclosure that reads as a section subtitle (homepage top picks) */
.deals-note{max-width:600px;margin:12px auto 0;color:var(--muted);font-size:14px;line-height:1.55;text-align:center}
/* Copy-trading card (Tradecopia): distinct horizontal shape so it doesn't read as a prop firm */
.ct-card{display:grid;grid-template-columns:1fr auto auto;gap:clamp(24px,3vw,48px);align-items:center;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:20px;padding:clamp(24px,3vw,36px) clamp(26px,3.5vw,42px)}
.ct-card__id{display:flex;align-items:center;gap:17px;min-width:0}
.ct-card__logo{width:66px;height:66px;border-radius:15px;object-fit:cover;border:1px solid var(--line);flex:none}
.ct-card__name{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.015em;line-height:1.08;margin-bottom:9px}
.ct-card__deal{text-align:center;padding:0 clamp(6px,1.5vw,20px)}
.ct-card__off{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3vw,38px);color:var(--off,#3B8EFF);letter-spacing:-.02em;line-height:1}
.ct-card__off-sub{margin-top:8px;font-size:12px;color:var(--muted);max-width:180px}
.ct-card__actions{display:flex;flex-direction:column;gap:10px;min-width:200px}
.ct-card__actions .deal__btn{padding:12px 14px}
@media(max-width:820px){
  .ct-card{grid-template-columns:1fr;gap:22px}
  .ct-card__deal{text-align:left;padding:0}
  .ct-card__off-sub{max-width:none}
}

/* ---------- Code band ---------- */
.band{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3.6vw,44px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,48px);align-items:center;
  position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 320px at 100% 0,var(--green-glow),transparent 60%)}
.band h2{margin:16px 0 12px}
.band__inner{position:relative;z-index:1}
.keysteps{display:flex;flex-direction:column;gap:0;margin-top:22px}
.keysteps li{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:14.5px}
.keysteps li:last-child{border-bottom:0}
.keysteps li b{color:var(--text);font-weight:600}
.keysteps .n{flex:none;width:27px;height:27px;border:1px solid var(--green-deep);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:var(--green);font-size:12.5px}
.codebox{position:relative;z-index:1;display:flex;flex-direction:column;gap:13px}
.codebox__row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg-0);border:1px solid var(--green-deep);border-radius:var(--r);padding:17px 20px}
.codebox__row .lbl{font-size:11px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;font-family:var(--font-mono);margin-bottom:5px}
.codebox__row .val{font-family:var(--font-mono);font-size:clamp(26px,3.6vw,38px);font-weight:700;color:var(--green-bright);letter-spacing:.05em;line-height:1}
.copybtn{font-family:var(--font-mono);font-size:12px;color:var(--green);border:1px solid var(--line-2);
  border-radius:9px;padding:10px 14px;transition:.2s;white-space:nowrap;flex:none}
.copybtn:hover{border-color:var(--green);color:var(--green-bright)}
.copybtn.copied{color:var(--green);border-color:var(--green-deep);background:var(--green-wash)}
.note{font-size:12px;color:var(--muted-2);font-family:var(--font-mono);letter-spacing:.01em;text-align:center}

/* ---------- Giveaways (GOLD ROOM) ---------- */
.give__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
/* prizes box drives the height; how-to card stretches up to match it */
.tgrid{columns:2;column-gap:16px;max-width:900px;margin:4px auto 0}
/* height:auto so the width/height attributes on these tags supply only the aspect ratio and do not
   fight width:100%. Without it a sized image renders at its literal attribute height. */
.tgrid img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line-2);margin:0 0 16px;break-inside:avoid;background:var(--bg-2)}
@media(max-width:560px){.tgrid{columns:1}}
.payout-ph{aspect-ratio:4/3;border:1px dashed var(--line-2);border-radius:14px;background:var(--bg-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted-2)}
.payout-ph svg{width:26px;height:26px}
.payout-ph span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.prizes{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 24px 18px}
.prizes h3{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;padding:20px 0 8px;color:var(--text);font-weight:600}
.prize{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.prize:last-child{border-bottom:0}
.prize__logo{width:44px;height:44px;flex:none;border-radius:11px;background:var(--bg-4);
  border:1px solid var(--line-2);overflow:hidden}
.prize__logo img{width:100%;height:100%;object-fit:cover;display:block}
.prize__info{flex:1;min-width:0}
.prize__info b{display:block;font-size:14.5px;font-weight:600}
.prize__info span{font-size:12.5px;color:var(--muted)}
.prize__qty{font-family:var(--font-mono);font-weight:700;color:var(--gold);font-size:15px;flex:none}
.give__card{background:linear-gradient(180deg,var(--gold-wash),var(--bg-2));
  border:1px solid rgba(46,123,246,.45);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,28px);
  display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(46,123,246,.1),0 20px 50px -24px rgba(46,123,246,.5)}
.give__card h3{margin:2px 0 0}
.give__card p{color:var(--muted);margin:12px 0 0;font-size:14.5px;line-height:1.55}
.give__card .btn{margin-top:auto;box-shadow:0 10px 26px -10px rgba(46,123,246,.6)}
.give__card .btn svg{margin-left:2px}
.give__how{list-style:none;margin:22px 0 24px;padding:0;flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:16px}
.give__how li{display:flex;align-items:center;gap:15px;font-size:15px;font-weight:500;color:var(--text)}
.give__how-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--gold)}
.give__how-ic svg{width:23px;height:23px}
.give__how-ic svg[fill="currentColor"]{width:20px;height:20px}
.give__note{margin-top:15px;font-size:12px;color:var(--muted-2);font-family:var(--font-mono);text-align:center}
.give__card .keysteps{margin-top:0}
.give__card .keysteps .n{border-color:var(--gold-deep);color:var(--gold)}
.give__card .perks-gold{display:flex;flex-direction:column;gap:13px}
.give__card .perks-gold li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.give__card .perks-gold svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:3px}

/* ---------- Winners rail (manual scroll, seamless loop) ---------- */
.winners{overflow:hidden}
.winners-rail{position:relative;max-width:var(--wrap);margin-inline:auto}
.winners-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 8px}
.winners-scroll::-webkit-scrollbar{display:none}
.winners-grid{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(2,auto);gap:16px;width:max-content;padding:0 clamp(16px,4vw,44px)}
.winners-grid img{height:172px;width:auto;display:block;border-radius:14px;border:1px solid var(--line);background:var(--bg-1);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.65);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.winners-grid img:hover{transform:translateY(-4px);border-color:rgba(46,123,246,.5)}
.winners-rail::before,.winners-rail::after{content:"";position:absolute;top:0;bottom:8px;width:64px;z-index:2;pointer-events:none}
.winners-rail::before{left:0;background:linear-gradient(90deg,var(--bg-0),transparent)}
.winners-rail::after{right:0;background:linear-gradient(270deg,var(--bg-0),transparent)}
.winners-arrow{position:absolute;top:50%;right:14px;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(11,17,28,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.7);
  transition:background .2s,border-color .2s,transform .2s,color .2s}
.winners-arrow:hover{background:var(--green);border-color:var(--green);color:var(--green-ink);transform:translateY(-50%) scale(1.07)}
.winners-arrow svg{width:20px;height:20px}
@media(max-width:560px){.winners-grid img{height:150px}.winners-arrow{width:42px;height:42px;right:10px}}

/* ---------- Earn it: Dungeon Points ---------- */
.earn__grid{display:grid;grid-template-columns:1fr 1.02fr;grid-template-areas:"pitch shot" "cta shot";column-gap:20px;row-gap:22px;align-items:center}
.earn__pitch{grid-area:pitch;align-self:end;display:flex;flex-direction:column}
.earn__cta{grid-area:cta;align-self:start;justify-self:start}
.earn__pitch .eyebrow{display:inline-block;margin-bottom:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright)}
.earn__pitch .h2{margin:0 0 12px}
.earn__pitch .lead{margin:0;max-width:none}
.earn__how{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:13px}
.earn__how li{display:flex;align-items:center;gap:14px}
.earn__how-ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--green-wash);border:1px solid rgba(46,123,246,.3);display:grid;place-items:center;color:var(--green)}
.earn__how-ic svg{width:21px;height:21px}
.earn__how-t{flex:1;min-width:0;display:flex;flex-direction:column}
.earn__how-t b{font-size:15px;font-weight:600;color:var(--text)}
.earn__how-t span{font-size:12.5px;color:var(--muted)}
.earn__plus{flex:none;font-family:var(--font-mono);font-weight:700;font-size:11.5px;color:var(--green-bright);background:var(--green-wash);border:1px solid rgba(46,123,246,.32);padding:5px 11px;border-radius:999px;white-space:nowrap}
.earn__pitch .lead{margin-bottom:0}
.earn__pitch .btn{margin-top:28px;align-self:flex-start}
.earn__vault{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;background:radial-gradient(130% 90% at 50% -20%,rgba(46,123,246,.28),transparent 62%),linear-gradient(180deg,var(--bg-3),var(--bg-2));border:1px solid rgba(46,123,246,.5);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,40px) clamp(22px,3vw,34px);box-shadow:0 26px 64px -32px rgba(46,123,246,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.earn__coin{position:relative;overflow:hidden;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;background:radial-gradient(circle at 34% 28%,#9cc4ff,#2E7BF6 56%,#123b7d);box-shadow:0 10px 26px -6px rgba(46,123,246,.75),inset 0 2px 6px rgba(255,255,255,.55),inset 0 -7px 12px rgba(0,0,0,.4)}
.earn__coin svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linejoin:round}
.earn__coin::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);transform:translateX(-130%);animation:coinSheen 4s ease-in-out infinite}
@keyframes coinSheen{0%,72%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
.earn__num{position:relative;font-family:var(--font-display);font-weight:800;font-size:clamp(46px,7vw,68px);line-height:1;letter-spacing:-.02em;color:var(--text);text-shadow:0 0 34px rgba(46,123,246,.6);font-variant-numeric:tabular-nums}
.earn__num-label{position:relative;margin-top:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-bright)}
.earn__cashline{position:relative;width:100%;margin-top:24px;padding-top:22px;border-top:1px dashed rgba(46,123,246,.38)}
.earn__cashline-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:11px}
.earn__reward{display:inline-flex;align-items:center;gap:11px;background:var(--bg-1);border:1px solid rgba(46,123,246,.42);border-radius:13px;padding:11px 17px;box-shadow:0 8px 22px -12px rgba(46,123,246,.6)}
.earn__reward b{font-size:15.5px;font-weight:700;color:var(--text)}
.earn__reward span{font-size:12px;color:var(--muted)}
.earn__shot{grid-area:shot;display:block;align-self:center;max-width:500px;margin-inline:auto;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);box-shadow:0 30px 70px -28px rgba(0,0,0,.72);text-decoration:none;transition:transform .2s,box-shadow .2s}
.earn__shot:hover{transform:translateY(-4px);box-shadow:0 42px 82px -28px rgba(0,0,0,.82),0 0 0 1px rgba(46,123,246,.4)}
.earn__shot img{display:block;width:100%;height:auto}
@media(max-width:760px){.earn__grid{grid-template-columns:1fr;grid-template-areas:"pitch" "shot" "cta"}.earn__pitch{align-self:auto}.earn__cta{align-self:auto}.earn__shot{align-self:auto}}
@media(prefers-reduced-motion:reduce){.earn__coin::after{animation:none}}

/* ---------- Prop Shop sneak peek ---------- */
.shoppeek-rail{position:relative;max-width:var(--wrap);margin-inline:auto}
.shoppeek-scroll{display:flex;align-items:stretch;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:8px clamp(16px,4vw,44px) 14px;scroll-snap-type:x proximity}
.shoppeek-scroll::-webkit-scrollbar{display:none}
.shopcard{position:relative;flex:none;width:268px;scroll-snap-align:start;display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 16px;overflow:hidden;background:radial-gradient(120% 90% at 8% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(152deg,var(--c1) 0%,var(--c2) 78%);box-shadow:0 16px 34px -20px rgba(0,0,0,.7);transition:transform .18s,box-shadow .18s}
.shopcard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -20px rgba(0,0,0,.78)}
.shopcard__tag{position:absolute;top:10px;right:10px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#0b1220;background:rgba(255,255,255,.92);padding:3px 8px;border-radius:6px}
.shopcard__logo{flex:none;width:48px;height:48px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center}
.shopcard__logo img{width:100%;height:100%;object-fit:cover;display:block}
.shopcard__logo--mk{font-family:var(--font-display);font-weight:800;font-size:17px;color:#8bf0bd;background:rgba(255,255,255,.06)}
.shopcard__body{display:flex;flex-direction:column;min-width:0}
.shopcard__firm{font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.15}
.shopcard__plan{font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:4px}
.shopcard__cost{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1;margin-top:8px;display:flex;align-items:baseline;gap:4px}
.shopcard__cost small{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.shopcard__acct{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}
.shoppeek-rail::before,.shoppeek-rail::after{content:"";position:absolute;top:0;bottom:14px;width:52px;z-index:2;pointer-events:none}
.shoppeek-rail::before{left:0;background:linear-gradient(90deg,var(--bg-0),transparent)}
.shoppeek-rail::after{right:0;background:linear-gradient(270deg,var(--bg-0),transparent)}
.shoppeek__cta{display:flex;justify-content:center;margin-top:clamp(22px,3vw,32px)}
@media(max-width:560px){
  .shoppeek-scroll{flex-direction:column;overflow-x:visible;scroll-snap-type:none;padding-left:clamp(16px,5vw,24px);padding-right:clamp(16px,5vw,24px)}
  .shopcard{width:auto;scroll-snap-align:none}
  .shoppeek-rail::before,.shoppeek-rail::after{display:none}
}

/* ---------- Indicator ---------- */
.ind{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center}
.ind-hero{text-align:center}
.ind-hero__media{max-width:100%;margin:0 auto}
.frame video{width:100%;display:block}
.ind-hero__cta{max-width:780px;margin:clamp(30px,4vw,48px) auto 0}
.ind-hero__cta .h1{margin-top:0;font-size:clamp(34px,5vw,56px);line-height:1.06}
.ind-hero__cta .lead{margin:18px auto 0;max-width:680px}
.ind-hero__actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}
.ind-hero__actions .js-video svg{margin-right:2px}
.plan__watch{text-align:center;margin-top:12px}
.linkbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;color:var(--green-bright);font-size:13.5px;font-family:inherit;transition:color .18s}
.linkbtn:hover{color:var(--green)}
.vmodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,32px)}
.vmodal.open{display:flex;animation:vmodalIn .2s ease both}
@keyframes vmodalIn{from{opacity:0}to{opacity:1}}
.vmodal__overlay{position:absolute;inset:0;background:rgba(4,7,12,.84);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.vmodal__box{position:relative;z-index:1;width:min(920px,100%)}
.vmodal__frame{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.85);background:#000}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal__close{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.vmodal__close:hover{border-color:var(--green-deep);background:var(--bg-3)}
.vmodal__close svg{width:17px;height:17px}
.ind__media{border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#000}
.ind__media img,.ind__media video{width:100%;display:block}
.ind__feats{display:flex;flex-direction:column;gap:16px;margin:24px 0 26px}
.ind__feats li{display:flex;gap:13px;align-items:flex-start}
.ind__feats .fi{width:38px;height:38px;flex:none;border-radius:10px;background:var(--bg-3);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--green)}
.ind__feats .fi svg{width:19px;height:19px}
.ind__feats b{display:block;font-size:15px;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;margin-bottom:3px}
.ind__feats span{font-size:14px;color:var(--muted)}
.ind__price{display:inline-flex;align-items:baseline;gap:10px;margin-bottom:22px}
.ind__price .p{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--text)}
.ind__price .u{color:var(--muted);font-size:14px}
.ind__price .save{font-family:var(--font-mono);font-size:11px;color:var(--green);border:1px solid var(--green-deep);
  border-radius:100px;padding:4px 10px;letter-spacing:.08em}

/* ---------- Discord banner ---------- */
.discord{position:relative;overflow:hidden;border:1px solid rgba(46,123,246,.24);border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--bg-1),var(--bg-2));padding:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center}
.discord::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 360px at 88% 120%,var(--green-glow),transparent 60%)}
.discord__in{position:relative;z-index:1}
.discord h2{margin:14px 0 12px}
.discord .lead{margin-bottom:26px}
.discord__art{position:relative;z-index:1;display:flex;justify-content:center}
.discord__art .glyph{width:min(180px,44vw);aspect-ratio:1;border-radius:26px;border:1px solid var(--line-2);
  background:radial-gradient(circle at 50% 35%,var(--green-wash),var(--bg-1));display:grid;place-items:center;color:var(--green);
  box-shadow:0 0 60px -14px var(--green-glow)}
.discord__art .glyph svg{width:46%;height:46%}
.discord__actions{display:flex;flex-wrap:wrap;gap:12px}
.discord--center{grid-template-columns:1fr;text-align:center}
.discord--center .lead{margin-left:auto;margin-right:auto;max-width:52ch}
.discord--center .discord__actions{justify-content:center}
.discord--center .discord__art{display:none}
.discord--center::before{background:radial-gradient(600px 360px at 50% 130%,var(--green-glow),transparent 60%)}
@media(max-width:820px){.discord{grid-template-columns:1fr;gap:28px}.discord__art{order:-1;justify-content:flex-start}}
.cta-final{position:relative;overflow:hidden;
  border:1px solid rgba(46,123,246,.26);border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--bg-1),var(--bg-2));
  padding:clamp(34px,4.5vw,54px) clamp(28px,4vw,56px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,60px);align-items:center}
.cta-final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 360px at 100% 120%,var(--green-glow),transparent 60%)}
.cta-final>*{position:relative;z-index:1}
.cta-final .eyebrow{margin-bottom:14px}
.cta-final h2{margin:0;max-width:16ch}
.cta-final .lead{margin:15px 0 0;max-width:440px}
.cta-final__actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex:none}
.cta-final__actions .btn{white-space:nowrap}
.winners__cta{display:flex;justify-content:center;margin-top:clamp(30px,4vw,44px)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto}
.faq__item{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);margin-bottom:12px;overflow:hidden;transition:border-color .2s}
.faq__item.open{border-color:var(--line-2)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 22px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:clamp(15.5px,1.8vw,18px);letter-spacing:-.01em}
.faq__q .pm{flex:none;width:24px;height:24px;position:relative}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--green);border-radius:2px;transition:.25s}
.faq__q .pm::before{top:11px;left:4px;right:4px;height:2px}
.faq__q .pm::after{left:11px;top:4px;bottom:4px;width:2px}
.faq__item.open .pm::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq__a p{padding:0 22px 22px;color:var(--muted);max-width:74ch;font-size:14.5px}

/* ---------- Hero video ---------- */
.vwrap{position:relative;max-width:760px;margin:34px auto 30px;aspect-ratio:16/9;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;background:#05070c}
.vframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:linear-gradient(180deg,rgba(5,7,12,.2),rgba(5,7,12,.55));transition:opacity .3s var(--ease),background .25s var(--ease)}
.vplay:hover{background:linear-gradient(180deg,rgba(5,7,12,.28),rgba(5,7,12,.62))}
.vplay.hide{opacity:0;pointer-events:none}
.vplay__ic{width:70px;height:70px;border-radius:50%;background:var(--green);color:var(--green-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(46,123,246,.4);transition:transform .25s var(--ease)}
.vplay:hover .vplay__ic{transform:scale(1.06)}
.vplay__ic svg{width:28px;height:28px;margin-left:4px}
.vplay__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ---------- Back to top ---------- */
.totop{display:flex;justify-content:center;padding:6px 0 38px}
.totop__btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:8px 17px;background:transparent;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.totop__btn:hover{color:var(--text);border-color:var(--green-deep);background:var(--bg-2)}
.totop__btn svg{width:14px;height:14px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line-soft);background:var(--bg-1);padding-block:18px}
.foot__bar{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap}
.foot__cr{color:var(--muted);font-size:13px;margin:0}
.foot__cr a{color:var(--green-bright);text-decoration:none;transition:color .18s}
.foot__cr a:hover{color:var(--green)}
.foot__social{display:flex;align-items:center;gap:14px}
.foot__label{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.foot__pfp{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--line-2);flex:none}
.socials{display:flex;gap:8px}
.socials a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s}
.socials a:hover{color:var(--green);border-color:var(--green-deep);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
/* Legal / disclaimer page */
.wrap--legal{max-width:760px}
.legalhub{display:grid;gap:14px;margin-top:32px}
.legalhub__card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;transition:border-color .2s,transform .2s}
.legalhub__card:hover{border-color:var(--green-deep);transform:translateY(-2px)}
.legalhub__card h2{font-family:var(--font-display);font-size:18px;margin:0 0 4px;color:var(--text)}
.legalhub__card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.legalhub__card .arw{color:var(--green-bright);flex:none}
.legal h2{margin-top:34px;margin-bottom:10px}
.legal p{color:var(--muted);font-size:15px;line-height:1.75}
.legal p a{color:var(--green-bright);text-decoration:none}
.legal p a:hover{color:var(--green)}
.legal__foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--muted-2)}

/* ---------- Page hero (sub pages) ---------- */
.phero{padding-top:clamp(30px,4.5vw,58px);padding-bottom:clamp(28px,3.6vw,44px);text-align:center}
.phero .eyebrow{margin-bottom:20px}
.phero h1{margin-top:0}
.phero .lead{margin:20px auto 0;text-align:center}
.phero__actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}

/* ---------- Pricing (indicator page) ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
.plan{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;position:relative}
.plan--best{border-color:rgba(46,123,246,.3);background:linear-gradient(180deg,var(--green-wash),var(--bg-2))}
.plan__badge{position:absolute;top:-12px;right:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  background:var(--green);color:var(--green-ink);font-weight:700;padding:5px 12px;border-radius:100px}
.plan h3{margin-bottom:8px}
.plan__price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.plan__price .amt{font-family:var(--font-mono);font-size:42px;font-weight:700;letter-spacing:-.02em}
.plan__price .per{color:var(--muted);font-size:15px}
.plan__note{color:var(--muted-2);font-size:13px;margin-bottom:22px}
.plan__incl{color:var(--muted);font-size:14px;margin-bottom:24px}
.plan__list{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.plan__list li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--muted)}
.plan__list svg{width:16px;height:16px;color:var(--green);flex:none}
.plan__secure{text-align:center;color:var(--muted-2);font-size:12.5px;margin-top:22px;font-family:var(--font-mono)}
/* ---------- Earn-it-instead card (indicator pricing) ----------
   Sits under the plan grid at the SAME 820px measure, so it lines up with the two cards above
   rather than floating at its own width. Shorter than a plan on purpose: it is a third route, not
   a third price, and giving it equal height would make it read as a plan with the price missing.
   Its own surface, not .plan's: a plan is a thing you buy, and this is a thing you earn. Borrowing
   the plan card's styling would have said "compare me to those" when the whole point is that it is
   a different kind of offer. */
.earncard{display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  max-width:820px;margin:18px auto 0;padding:24px 26px;border-radius:var(--r-lg);
  background:linear-gradient(140deg,rgba(46,123,246,.14),var(--bg-2) 62%);
  border:1px solid rgba(46,123,246,.28)}
.earncard__main{flex:1 1 340px;min-width:0}
.earncard__eyebrow{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-bright)}
.earncard__h{font-family:var(--font-display);font-size:clamp(20px,2.4vw,25px);font-weight:700;
  letter-spacing:-.01em;color:var(--text);margin:8px 0 8px;line-height:1.15}
.earncard__p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px;max-width:430px}
.earncard__p b{color:var(--text);font-weight:700}
.earncard__btn{display:inline-flex;align-items:center;gap:8px;width:auto}
.earncard__btn svg{width:16px;height:16px}

/* The logo strip. Overlapped rather than spaced out, so five marks read as one group and take the
   width of about three: a plain row of five separate tiles would out-weigh the headline beside it. */
.earncard__side{flex:0 1 auto;display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.earncard__firms{display:flex;align-items:center}
.earncard__logo{width:46px;height:46px;border-radius:12px;overflow:hidden;flex:none;
  background:#0A0F18;border:1px solid rgba(255,255,255,.13);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.85);margin-left:-11px}
.earncard__logo:first-child{margin-left:0}
/* The marks are square PNGs that fill their plate edge to edge, so the plate must not carry padding
   or an inner ring: a border would paint the plate's own near-black between the mark and the edge,
   which is the black-outline artefact this site has already had to fix once on the shop tiles. */
.earncard__logo img{display:block;width:100%;height:100%;object-fit:cover}
.earncard__note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted-2);max-width:210px;line-height:1.5}

@media(max-width:640px){
  .earncard{padding:20px;gap:20px}
  /* the logos lead on a phone, where the headline would otherwise push them off the first screen */
  .earncard__side{order:-1}
  .earncard__btn{width:100%;justify-content:center}
}

/* ---------- Reveal ---------- */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .how{grid-template-columns:1fr;gap:44px}
  .how__emblem{order:-1}
  .band{grid-template-columns:1fr;gap:28px}
  .ind{grid-template-columns:1fr}
  .ind__media{order:-1}
  .foot__grid{gap:32px}
}
@media(max-width:820px){
  .nav__links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--bg-1);border-bottom:1px solid var(--line);padding:14px 22px 22px;
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s var(--ease),opacity .24s var(--ease),visibility .24s;margin-left:0}
  .nav.open .nav__links{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav__links a{padding:14px 12px;font-size:16px}
  .nav__cta{margin:8px 0 0}
  .nav__toggle{display:flex}
  .give__grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lead-br{display:none}
  .give__facts{grid-template-columns:1fr}
  .hero__actions,.phero__actions,.ind-hero__actions{flex-wrap:nowrap;align-items:stretch;gap:10px}
  .hero__actions .btn,.phero__actions .btn,.ind-hero__actions .btn{flex:1 1 0;min-width:0;white-space:normal;padding:12px 12px;font-size:14px;text-align:center}
  .cta-final{grid-template-columns:1fr;gap:26px}
  .cta-final__actions{gap:10px}
  .cta-final__actions .btn{width:100%}
  .foot{padding-block:20px}
  .foot__bar{flex-direction:column;text-align:center;gap:14px}
  .foot__social{flex-direction:column;gap:11px;order:-1}
  .socials{justify-content:center}
  .on-lg{display:none}
  .on-sm{display:inline}
  .frame__bar em{display:none}
  .floaty--members{top:10px;right:10px;padding:9px 12px}
  .floaty--members .ic{width:28px;height:28px}
  .floaty--members .k{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .emblem__ring--1{animation:none}
}

/* ---------- Brand deal pages (/tradecopia-discount-code, /tradesyncer-discount-code) ----------
   One page per BRAND, not per keyword. "tradecopia discount code", "tradecopia coupon code" and
   "tradecopia promo code" are the same intent, so they share a page and the variants live in the
   H2s and the FAQ rather than in separate URLs that would compete with each other. */
.dpage{padding:38px 0 70px}
.dp-crumb{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:18px}
.dp-crumb a{color:var(--muted)}
.dp-crumb a:hover{color:var(--text)}
.dp-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;color:var(--text);font-weight:600;font-size:13.5px;text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.dp-back:hover{border-color:#2E7BF6;color:#2E7BF6;background:rgba(46,123,246,.08)}
.dp-back svg{width:15px;height:15px;flex-shrink:0}

.dp-hero{display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:center;
  padding:24px;border:1px solid var(--line-2);border-radius:18px;background:var(--bg-2)}
/* cover with no padding, so the mark fills the tile. Every brand logo here is a square image with
   no transparent margin baked in, so cover crops nothing and contain was just adding dead space. */
.dp-hero__logo{width:88px;height:88px;border-radius:18px;object-fit:cover;background:var(--bg-1);
  border:1px solid var(--line-2)}
.dp-hero h1{font-size:clamp(26px,4.2vw,38px);line-height:1.1;letter-spacing:-.02em;margin:0 0 8px}
.dp-hero__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.dp-hero__rating{color:var(--gold)}

.dp-offer{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:20px;
  padding:20px 22px;border:1px solid var(--green-deep);border-radius:16px;
  background:linear-gradient(120deg,rgba(46,123,246,.13),var(--bg-2) 68%)}
.dp-offer__off{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,5vw,44px);
  line-height:1;letter-spacing:-.02em;color:var(--green)}
.dp-offer__sub{font-size:13.5px;color:var(--muted);margin-top:6px}
.dp-offer__act{display:flex;gap:10px;flex-wrap:wrap}

.dp-sec{margin-top:44px}
.dp-sec h2{font-size:clamp(21px,3vw,27px);letter-spacing:-.01em;margin:0 0 6px}
.dp-sec__lead{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 18px;max-width:70ch}

.dp-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg-2);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px}
.dp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dp-video__soon{color:var(--muted);font-size:14px;max-width:44ch;line-height:1.6}
.dp-video__soon b{display:block;color:var(--text);font-size:16px;margin-bottom:6px}

.dp-table{width:100%;border-collapse:collapse;font-size:14px}
/* var(--line), not var(--line-1) — the latter is defined nowhere, and an undefined custom property
   with no fallback invalidates the whole border-bottom shorthand, so this table shipped with no row
   separators at all. It is the one place on these pages where a reader has to track a value across
   a row, and on a phone that row is inside a horizontal scroller. */
.dp-table th,.dp-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.dp-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.dp-table td:first-child{font-weight:600;color:var(--text)}
.dp-table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-scroll{overflow-x:auto;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2)}

.dp-chips{display:flex;flex-wrap:wrap;gap:8px}
.dp-chip{font-family:var(--font-mono);font-size:12px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--muted)}

.dp-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:12px}
.dp-steps li{counter-increment:s;position:relative;padding:15px 16px 15px 52px;border-radius:13px;
  border:1px solid var(--line-2);background:var(--bg-2);font-size:14.5px;line-height:1.55}
.dp-steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:24px;height:24px;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  background:rgba(46,123,246,.15);border:1px solid var(--green-deep);color:var(--green)}
.dp-steps b{color:var(--text)}

.dp-faq{display:grid;gap:10px}
.dp-faq details{border:1px solid var(--line-2);border-radius:13px;background:var(--bg-2);overflow:hidden}
.dp-faq summary{cursor:pointer;padding:15px 17px;font-weight:600;font-size:15px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.dp-faq summary::-webkit-details-marker{display:none}
.dp-faq summary::after{content:'+';font-family:var(--font-mono);font-size:19px;color:var(--muted);flex:none}
.dp-faq details[open] summary::after{content:'\2013'}
.dp-faq p{margin:0;padding:0 17px 16px;color:var(--muted);font-size:14px;line-height:1.65;max-width:72ch}

.dp-note{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.6}

@media(max-width:640px){
  .dp-hero{grid-template-columns:64px 1fr;gap:14px;padding:18px}
  .dp-hero__logo{width:64px;height:64px;border-radius:14px}
  .dp-offer{grid-template-columns:1fr;gap:14px}
  .dp-offer__act .btn{width:100%}
}

/* Info link on a deal card. Sits alongside the code and Buy Now buttons and points at that
   brand's own details page, which is what stops those pages being orphans. */
.deal__btn--info{color:var(--muted);font-size:13px}
.deal__btn--info:hover{color:var(--text)}
.deal__btn--info svg{width:15px;height:15px}

/* Inline links inside body copy. Without this they inherit the paragraph colour and have no
   underline, so they read as plain text and nobody clicks them. */
.lead a,.dp-sec__lead a,.dp-faq p a{color:var(--green);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s}
.lead a:hover,.dp-sec__lead a:hover,.dp-faq p a:hover{color:var(--green-bright)}