/* Nexus 99 members — ENTRY BANNER
   ------------------------------------------------------------------
   The first thing a buyer sees after signing in: the Nexa Group
   beta-tester offer, deliberately set apart from the member's own
   Nexus 99 account.

   This is a port of the LIVE Cash Raffle Daily entry popup
   (members.cashraffledaily.com/first-login) so the two read the same:
   no card chrome, content straight on a light page, circle mark ->
   kicker -> big headline -> gold panel -> icon card -> dark pay block
   -> red CTA, then a qualification step. Confetti behind it all.

   The only substitutions are brand ones: CRD's green is Nexus 99 blue.
   The gold panel, the gold pay figure, the green requirement ticks and
   the red CTA are conversion furniture and are kept as they are.

   Everything is scoped under .offer and every variable is declared
   locally, so this file cannot reach into the course shell - that one
   has a dark sidebar, this page is light-mode only.
   ================================================================== */

/* while the entry card is up there is no sidebar and no header: the
   offer is a doorway, not a page inside the account */
body.entry .side,
body.entry .top { display:none !important }
body.entry .shell { display:block }
body.entry #view { padding:0 }

.offer{
  --ink:#141a24;
  --ink-2:#2a3341;
  --muted:#5b616e;
  --muted-2:#878d99;
  --line:#e2e5ea;
  --accent:#0F6FEF;
  --accent-d:#0B55BC;
  --accent-soft:#EAF2FE;
  --accent-line:#C3DAFB;
  --gold:#f2b705;
  --green:#1a7f37;
  --green-soft:#e8f6ec;
  --radius:12px;
  --shadow-sm:0 1px 2px rgba(15,31,61,.06),0 2px 6px rgba(15,31,61,.05);
  --shadow:0 2px 4px rgba(15,31,61,.05),0 10px 28px rgba(15,31,61,.09);

  min-height:100dvh;
  position:relative;
  overflow:hidden;
  color:var(--ink);
  background:linear-gradient(180deg,#fbfcfe 0%,#eef1f6 100%);
  display:flex;flex-direction:column;
}
.offer *{box-sizing:border-box}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

.offer-inner{
  position:relative;z-index:1;
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:44px 20px 40px;
}
.offer .screen{width:100%;max-width:560px;display:none}
.offer .screen.active{display:block}

/* ---- the circle mark ---- */
.offer .mark{
  width:78px;height:78px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  box-shadow:0 0 0 8px rgba(15,111,239,.10);
}
.offer .mark svg{width:38px;height:38px;fill:var(--accent-d);display:block}

.offer .kicker{
  text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-d);margin:0 0 12px;
}

.offer h1{
  margin:0 0 22px;text-align:center;
  font-size:38px;line-height:1.08;letter-spacing:-.028em;font-weight:700;color:var(--ink);
}
/* the pay line, as its own line under the headline - the number has to be in
   the headline, not only in the pay block further down */
.offer h1 .hl-pay{display:block;margin-top:8px;color:var(--green);font-size:.6em;font-weight:800}

/* ---- gold panel: the selection claim ---- */
.panel-gold{
  background:#fff8e6;border:1px solid #f0dc9a;border-radius:var(--radius);
  padding:20px 22px;text-align:center;margin-bottom:16px;
}
.panel-gold p{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.panel-gold strong{color:var(--accent-d)}
.panel-gold .fine{display:block;margin-top:9px;font-size:13px;line-height:1.5;color:var(--muted)}

/* ---- white icon card: the reassurance ---- */
.offer .card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px 20px;
}
.card-icon{display:flex;gap:15px;align-items:flex-start;margin-bottom:16px}
.card-icon .ic{
  flex:none;width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:1px solid var(--line);
}
.card-icon .ic svg{width:21px;height:21px;fill:var(--accent-d)}
.card-icon p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}

/* ---- what the partner pays testers ---- */
.offer .pay{
  background:linear-gradient(180deg,#0B55BC 0%,#07306B 100%);
  border-radius:var(--radius);padding:22px 20px 20px;text-align:center;color:#fff;
  box-shadow:var(--shadow);margin-bottom:26px;border:1px solid rgba(255,255,255,.08);
}
.offer .pay .pay-k{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#BFD6FA;
}
.offer .pay .pay-v{
  margin:8px 0 0;display:flex;align-items:baseline;justify-content:center;gap:8px;
}
.offer .pay .amt{
  font-size:62px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.offer .pay .per{font-size:19px;font-weight:600;color:#DCEAFE}

/* ---- buttons ---- */
.btn-red{
  display:block;width:100%;text-align:center;text-decoration:none;
  appearance:none;border:0;cursor:pointer;
  font:inherit;font-size:19px;font-weight:700;letter-spacing:-.005em;color:#fff;
  background:linear-gradient(180deg,#e0353d 0%,#c2141d 100%);
  border-radius:11px;padding:19px 22px;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 22px rgba(190,25,34,.34);
  transition:transform .08s ease,box-shadow .16s ease,filter .16s ease;
}
.btn-red:hover{filter:brightness(1.07)}
.btn-red:active{transform:translateY(2px)}
.btn-red:focus-visible{outline:3px solid rgba(20,26,36,.45);outline-offset:3px}

.btn-ghost{
  display:block;width:100%;text-align:center;text-decoration:none;
  appearance:none;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:#55606f;
  background:#f1f3f7;border:1px solid var(--line);
  border-radius:10px;padding:14px 18px;margin-top:14px;
}
.btn-ghost:hover{background:#e7eaf0;color:var(--ink-2)}
.btn-ghost:focus-visible{outline:3px solid rgba(15,111,239,.4);outline-offset:2px}

/* ---- step 2: the requirements ---- */
.reqs{display:grid;gap:12px;margin:0 0 22px}
.req{
  display:flex;align-items:center;gap:15px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 18px;
}
.req .ic{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-soft);border:1px solid #c8e6d1;
}
.req .ic svg{width:21px;height:21px;fill:var(--green);display:block}
.req span{font-size:17px;font-weight:600;color:var(--ink-2)}

.qualify-line{text-align:center;font-size:18px;color:var(--ink-2);margin:0 0 22px}
.qualify-line strong{color:var(--green);font-weight:800}

.foot-note{margin:20px 0 0;text-align:center;font-size:12.5px;line-height:1.6;color:var(--muted-2)}

/* ---- page footer ---- */
.offer-foot{
  position:relative;z-index:1;
  padding:0 20px 30px;text-align:center;
  font-size:12.5px;color:var(--muted-2);line-height:1.65;
}
.offer-foot p{max-width:620px;margin:0 auto 8px}
.offer-foot a{color:#6b7580;text-decoration:none;margin:0 7px;font-weight:600}
.offer-foot a:hover{text-decoration:underline}

@media (max-width:560px){
  .offer-inner{padding:30px 16px 32px}
  .offer h1{font-size:29px}
  .offer .pay .amt{font-size:52px}
  .btn-red{font-size:17px;padding:17px 18px}
}
@media (prefers-reduced-motion:reduce){
  .offer *{animation:none!important;transition:none!important}
}