/* The three paid screener pages. Built on the Learn styles (the body is the
   same blocks); this adds the first screen, the solid buttons that are meant
   to be seen, the closing call and the cards of the other screeners. */

.scr-wrap{max-width:900px}

/* ------------------------------------------------------------ first screen */
.scr-hero{padding-top:6px}
.scr-wrap .scr-hero h1{
  font-size:clamp(28px,4.6vw,44px);line-height:1.12;letter-spacing:-.025em;
  margin:0 0 14px;text-wrap:balance;
}
.scr-wrap .scr-lead{font-size:clamp(15px,1.7vw,17.5px);line-height:1.7;color:var(--txt-2);margin:0 0 22px;max-width:46em}


/* The buttons people came for: solid, large, impossible to miss. */
.scr-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.scr-cta .btn.big{padding:15px 28px;font-size:16px}
.scr-cta .btn:not(.ghost){
  background:var(--up);border-color:var(--up);color:var(--bg);font-weight:700;
  box-shadow:0 10px 28px -12px var(--up);
}
.scr-cta .btn:not(.ghost):hover{filter:brightness(1.08);background:var(--up)}
.scr-cta .btn:focus-visible{outline:2px solid var(--up);outline-offset:3px}
.scr-wrap .scr-note{margin:12px 0 0;font-size:13px;color:var(--txt-3)}

.scr-shot{margin:34px 0 8px}
.scr-shot img{
  border-color:var(--line-strong);
  box-shadow:0 30px 90px -30px rgba(0,229,160,.28), 0 0 0 1px var(--hairline);
}
.scr-shot figcaption{font-size:12.5px;color:var(--txt-3);margin-top:8px;text-align:center}

/* --------------------------------------------------------------- the body */
/* The Learn styles are written for `.learn main`; the body sits inside main. */
.scr-body{margin-top:10px}
.scr-body .learn-cta{margin:30px 0}
.scr-body .learn-cta .btn{
  background:var(--up);border-color:var(--up);color:var(--bg);font-weight:700;
  padding:15px 28px;font-size:16px;border-radius:12px;box-shadow:0 10px 28px -12px var(--up);
}
.scr-body .learn-cta .btn:hover{filter:brightness(1.08);background:var(--up)}
.scr-body .learn-table td:first-child{font-weight:600;color:var(--txt)}

/* ------------------------------------------------------------ closing call */
.scr-end{
  margin:46px 0 10px;padding:30px 28px;border-radius:16px;text-align:center;
  border:1px solid var(--up-line);
  background:radial-gradient(120% 140% at 50% 0%, var(--up-bg) 0%, var(--panel) 70%);
}
.scr-wrap main .scr-end h2{margin:0 0 10px;font-size:24px}
.scr-wrap main .scr-end p{margin:0 auto 20px;max-width:36em;color:var(--txt-2)}
.scr-end .scr-cta{justify-content:center}

/* ---------------------------------------------------------- other screens */
.scr-others{margin:46px 0 10px}
.scr-wrap main .scr-others h2{font-size:20px;margin:0 0 14px}
.scr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.scr-card{
  display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt-2);
  transition:border-color .15s,background .15s,transform .15s;
}
.scr-card:hover{border-color:var(--up-line);background:var(--panel-hover);text-decoration:none;transform:translateY(-2px)}
.scr-card .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3)}
.scr-card.free .k{color:var(--up)}
.scr-card b{font-size:16px;color:var(--txt)}
.scr-card .d{font-size:13px;line-height:1.5;flex:1}
.scr-card .go{font-size:13px;font-weight:600;color:var(--up)}

@media (max-width:760px){
  .scr-cards{grid-template-columns:1fr}
  .scr-cta .btn.big{flex:1 1 220px}
}
@media (prefers-reduced-motion:reduce){.scr-card,.scr-card:hover{transition:none;transform:none}}