/* Joshua Kaats demo funnel, shared design system.
   One file so every page in the funnel is visually identical. Vibrantix. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:#010907; --mint:#6dc0b5; --mint2:#3f9e92;
  --tx:#ffffff; --dim:rgba(255,255,255,.72); --faint:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.14); --card:rgba(255,255,255,.03); --gold:#C4A34F;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--tx);font-family:'DM Sans',system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:700;line-height:1.1;letter-spacing:-.01em}
a{color:var(--mint)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:720px}

.ribbon{background:linear-gradient(90deg,#C4A34F,#8d7638);color:#17140c;font-weight:700;
  font-size:12.5px;letter-spacing:.05em;text-align:center;padding:9px 16px}
.ribbon a{color:#17140c}

.langbar{position:fixed;bottom:13px;right:14px;z-index:80;display:flex;background:#08201c;
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
.langbar button{background:none;border:none;color:var(--dim);font:inherit;font-size:12.5px;
  font-weight:700;padding:8px 13px;cursor:pointer}
.langbar button.on{background:var(--mint);color:var(--ink)}

/* his real DSA mark, white on transparent, straight off his own site */
.logo{padding:26px 0 8px}
.brand{height:30px;width:auto;display:inline-block;vertical-align:middle}
.foot-brand{height:19px;opacity:.55;margin-right:2px}

.pill{display:inline-block;background:rgba(109,192,181,.12);border:1px solid rgba(109,192,181,.4);
  color:var(--mint);border-radius:999px;padding:6px 14px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.pill.grey{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--dim)}

.cta{display:inline-block;background:linear-gradient(180deg,#86dccf,#3f9e92);color:var(--ink);
  border:none;border-radius:999px;padding:18px 40px;font-family:'DM Sans';font-weight:700;
  font-size:17px;cursor:pointer;box-shadow:0 20px 50px -14px rgba(109,192,181,.6);
  transition:transform .13s;text-decoration:none}
.cta:hover{transform:translateY(-2px)}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.card.mint{border-color:rgba(109,192,181,.45);background:rgba(109,192,181,.06)}

.steps{counter-reset:s;margin:30px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:0 0 24px 52px;border-left:1px solid var(--line);
  margin-left:17px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-18px;top:-3px;width:35px;height:35px;
  border-radius:50%;background:var(--mint);color:var(--ink);font-family:'Fraunces',serif;
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px}
.steps b{display:block;font-family:'Fraunces',serif;font-size:17.5px;margin-bottom:6px}
.steps p{margin:0;color:var(--dim);font-size:15px}

.devnote{background:#17140c;border:1px solid var(--gold);color:#e8d9a8;border-radius:12px;
  padding:16px 18px;margin:34px 0 0;font-size:13.2px;line-height:1.55}
.devnote b{color:var(--gold)}

table{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:14px}
th{text-align:left;font-family:'DM Sans';font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);padding:0 12px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
tr:last-child td{border-bottom:none}
td.n{font-family:'Fraunces',serif;font-weight:600;white-space:nowrap}
.win{color:var(--mint)} .lose{color:#ff8f7a}
/* the little inline meter in a table cell. NOT .bar, that name belongs to the sticky
   event header on the registration page and the two collided. */
.meter{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;
  margin-top:6px;min-width:70px}
.meter i{display:block;height:100%;background:var(--mint)}


/* ---- video card. a real player frame with a play control, never a blank box ---- */
.vid{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#061a16;
  border:1px solid var(--line);box-shadow:0 40px 90px -34px rgba(0,0,0,.8);cursor:pointer}
.vid::before{content:"";display:block;padding-bottom:56.25%}
.vid img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .in2{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15px;text-align:center;padding:20px;
  background:radial-gradient(85% 80% at 50% 42%,rgba(109,192,181,.15),transparent 72%)}
/* with a real poster behind it the scrim does the contrast work, not a mint glow.
   the caption drops to the bottom rail so it never lands on whatever the frame says. */
.vid.has-poster .in2{background:linear-gradient(180deg,rgba(1,9,7,.30) 0%,rgba(1,9,7,.18) 45%,
  rgba(1,9,7,.80) 100%)}
.vid.has-poster .cap{position:absolute;left:16px;right:74px;bottom:13px;text-align:left;color:#fff;
  font-weight:500;font-size:12.8px;text-shadow:0 1px 12px rgba(0,0,0,.8)}
/* a ring so the control reads as a control against a busy frame, not a green blob */
.vid.has-poster .play{box-shadow:0 0 0 9px rgba(1,9,7,.34),0 10px 30px -6px rgba(0,0,0,.7)}
.play{width:74px;height:74px;border-radius:50%;background:var(--mint);display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 11px rgba(109,192,181,.13);transition:transform .16s}
.vid:hover .play{transform:scale(1.07)}
.play::after{content:"";width:0;height:0;margin-left:5px;border-style:solid;
  border-width:13px 0 13px 21px;border-color:transparent transparent transparent #010907}
.vid .cap{font-size:13.4px;color:var(--dim)}
.vid .dur{position:absolute;right:13px;bottom:12px;background:rgba(0,0,0,.55);border-radius:7px;
  padding:5px 10px;font-size:11.8px;font-weight:700;letter-spacing:.03em}

/* ---- countdown ---- */
.cd{display:flex;gap:9px;justify-content:center;margin:24px 0 0;flex-wrap:wrap}
.cd>div{border:1px solid var(--line);border-radius:12px;padding:12px 0;min-width:76px;
  background:rgba(255,255,255,.03)}
.cd b{display:block;font-family:'Fraunces',serif;font-size:28px;line-height:1;
  font-variant-numeric:tabular-nums}
.cd span{font-size:10.6px;color:var(--dim);letter-spacing:.11em;text-transform:uppercase}

/* ---- reviews. trustpilot green is deliberate, it says where this came from ---- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:16px 0 0;text-align:left}
@media(max-width:880px){.revs{grid-template-columns:1fr}}
.rev{border:1px solid var(--line);border-radius:14px;padding:20px 21px;background:rgba(255,255,255,.03)}
.stars{color:#00b67a;font-size:13.5px;letter-spacing:2.5px;line-height:1}
.rev p{margin:11px 0 0;font-size:14.3px;color:var(--dim);line-height:1.56}
.rev .who{margin:13px 0 0;font-size:12.4px;color:var(--faint)}
.rev .who b{color:var(--tx);font-weight:600}

/* ---- checklist ---- */
.chk{list-style:none;margin:26px 0 0;padding:0;text-align:left}
.chk li{position:relative;padding:0 0 15px 34px;font-size:15.6px;color:var(--dim)}
.chk li::before{content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
  background:rgba(109,192,181,.16);border:1px solid rgba(109,192,181,.5)}
.chk li::after{content:"";position:absolute;left:6.5px;top:10px;width:4px;height:9px;
  border:solid var(--mint);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---- secondary button ---- */
.ghost{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:12px 22px;
  color:var(--tx);text-decoration:none;font-weight:600;font-size:14.4px;
  background:rgba(255,255,255,.04);transition:border-color .14s}
.ghost:hover{border-color:rgba(109,192,181,.55)}

.foot{border-top:1px solid var(--line);margin-top:56px;padding:30px 20px 44px;text-align:center;
  color:var(--faint);font-size:12.5px}

/* demo chrome must never sit on top of a call to action, especially on a phone */
@media(max-width:700px){
  .langbar{bottom:auto;top:auto;position:static;display:inline-flex;margin:14px 0 0}
  .langbar button{padding:7px 12px;font-size:12px}
  .cd>div{min-width:66px}
}