/* CaddySkills introduction page (/caddyskills). Builds on the tokens in /styles.css. */

.sk-skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--orange);color:#1a1205;
  padding:10px 16px;border-radius:10px;font-weight:700}
.sk-skip:focus{top:12px}
main :focus-visible,.sk-skip:focus-visible{outline:3px solid var(--orange-lt);outline-offset:3px;border-radius:6px}

/* hero */
.sk-hero{padding:72px 28px 56px;overflow:hidden}
.sk-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.sk-hero h1{margin:0;font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.sk-headline{font-size:clamp(22px,2.8vw,30px);font-weight:800;color:var(--orange-lt);margin:8px 0 18px}
.sk-hero .lede{color:#d6d9e0;font-size:clamp(16px,1.9vw,19px);max-width:560px;margin:0 0 26px}
.sk-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sk-ctas.center{justify-content:center;margin-top:36px}
.sk-play{font-size:18px;padding:16px 32px}
.sk-note{color:var(--muted);font-size:14px;margin:16px 0 0}
.sk-art{margin:0}
.sk-art img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border)}

/* how it works */
.sk-steps{list-style:none;counter-reset:sk;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sk-steps li{counter-increment:sk;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.sk-steps li::before{content:counter(sk);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:rgba(247,148,29,.14);color:var(--orange-lt);font-weight:800;margin-bottom:12px}
.sk-steps h3{margin:0 0 6px;font-size:18px}
.sk-steps p{margin:0;color:var(--muted)}
.sk-fine{color:var(--muted);font-size:14px;margin:22px 0 0}

/* games */
.sk-games{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.sk-game{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.sk-game h3{margin:0 0 10px;font-size:21px;color:var(--text)}
.sk-game p{margin:0;color:var(--muted);font-size:16px}

.sk-narrow > *{max-width:760px}
.sk-narrow p:not(.kicker){color:var(--muted);font-size:17px}

@media(max-width:900px){
  .sk-hero-grid{grid-template-columns:1fr;gap:32px}
  .sk-steps,.sk-games{grid-template-columns:1fr}
}
@media(max-width:620px){
  .sk-hero{padding:44px 18px 36px}
  .sk-ctas .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .sk-ctas .btn{transition:none}
  .sk-ctas .btn:hover{transform:none}
}
.sk-narrow p a{text-decoration:underline;text-underline-offset:3px}