/* home.css */
/* ============================================================
   Classroom Showdown — the home page (index.html). Sky, clouds, the two
   brand monsters, chunky buttons. Built mobile-first; the hero's monsters
   tuck away below 900px so the words and the two buttons stay on screen.
   ============================================================ */
.home{background:#fff}

/* ------------------------------------------------------------ header */
.hm-nav{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(16px,4vw,48px);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hm-nav-r{display:flex;align-items:center;gap:10px}
.hm-nav-r .sd-btn{padding:10px 18px;font-size:16px}
.hm-play{color:var(--sky);font-size:13px}
@media (max-width:560px){
  .sd-logo img{height:40px}
  .hm-nav-r .sd-btn{padding:9px 12px;font-size:14px}
  .hm-join .hm-play{display:none}
}

/* ------------------------------------------------------------ hero */
.hm-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr minmax(0,640px) 1fr;align-items:center;
  min-height:min(78vh,720px);padding:56px 16px 150px;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.95) 0 60px,transparent 61px),
    radial-gradient(circle at 24% 26%,rgba(255,255,255,.95) 0 46px,transparent 47px),
    radial-gradient(circle at 80% 16%,rgba(255,255,255,.9) 0 54px,transparent 55px),
    radial-gradient(circle at 86% 20%,rgba(255,255,255,.9) 0 40px,transparent 41px),
    linear-gradient(180deg,#BFE6FF 0%,#E4F5FF 55%,#FFFFFF 100%);
}
.hm-hero-mid{position:relative;z-index:2;text-align:center}
.hm-hero h1{font-size:clamp(34px,5.4vw,62px);font-weight:700;color:var(--navy);letter-spacing:-.01em}
.hm-lead{font-size:clamp(17px,2vw,21px);color:var(--ink);max-width:560px;margin:18px auto 26px;font-weight:700}
.hm-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.hm-fine{margin-top:16px;color:var(--muted);font-size:14.5px;font-weight:700}
.hm-hero-art{position:relative;z-index:1;height:100%;min-height:300px}
.hm-board{position:absolute;right:4%;bottom:6%;width:min(300px,100%);transform:rotate(-6deg);animation:hm-bob 4s ease-in-out infinite}
/* One red monster per screen (Chris, 2026-10-04): red on the left with
   the clipboard, blue alone on the right. */
.hm-blue{position:absolute;left:0;right:0;margin:0 auto;bottom:2%;width:min(270px,85%);animation:hm-bob 3.6s ease-in-out .8s infinite}
@keyframes hm-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.hm-board,.hm-blue{animation:none}}
.hm-hills{
  position:absolute;left:0;right:0;bottom:0;height:150px;z-index:0;
  background:url("showdown/bg/join.webp") center 88%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%);
}
@media (max-width:900px){
  .hm-hero{grid-template-columns:1fr;padding:40px 16px 130px;min-height:0}
  .hm-hero-left{display:none}
  .hm-hero-right{order:2;min-height:180px;width:100%;max-width:420px;margin:18px auto 0}
  .hm-blue{width:min(200px,55%)}
}

/* ------------------------------------------------------------ sections */
.hm-sec{padding:64px clamp(16px,4vw,48px);max-width:1180px;margin:0 auto}
.hm-h{font-size:clamp(28px,3.6vw,42px);text-align:center;margin-bottom:30px}
.hm-h-left{text-align:left}
.hm-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hm-step{position:relative;padding:26px 22px 24px;border-radius:24px;background:#fff;border:3px solid var(--line);box-shadow:0 8px 0 var(--line)}
.hm-step img{width:58px;height:58px;object-fit:contain}
.hm-step h3{font-size:23px;margin:10px 0 8px}
.hm-step p{margin:0;color:var(--muted);font-weight:700}
.hm-step-n{
  position:absolute;top:-16px;right:18px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;color:#fff;
}
.hm-tone-sky{border-color:#BFE3FF;box-shadow:0 8px 0 #BFE3FF;background:var(--sky-l)} .hm-tone-sky .hm-step-n{background:var(--sky)}
.hm-tone-red{border-color:#FFC7CE;box-shadow:0 8px 0 #FFC7CE;background:var(--red-l)} .hm-tone-red .hm-step-n{background:var(--red)}
.hm-tone-teal{border-color:#AEEDE9;box-shadow:0 8px 0 #AEEDE9;background:var(--teal-l)} .hm-tone-teal .hm-step-n{background:var(--teal)}
@media (max-width:860px){.hm-steps{grid-template-columns:1fr}}

.hm-crowd-sec{max-width:none;background:linear-gradient(180deg,#FFF6DA,#FFFFFF)}
.hm-crowd{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:1080px;margin:0 auto}
.hm-crowd img{width:76px;height:76px;object-fit:contain;transition:transform .15s}
.hm-crowd img:hover{transform:scale(1.18) rotate(-6deg)}
@media (max-width:560px){.hm-crowd img{width:54px;height:54px}}
.hm-powers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px auto 0;max-width:900px}
.hm-powers span{
  padding:8px 16px;border-radius:999px;background:#fff;border:2px solid var(--line-2);
  font-family:'Fredoka',sans-serif;font-weight:600;color:var(--navy);
}
.hm-powers span:nth-child(3n+1){border-color:#FFC7CE;background:var(--red-l)}
.hm-powers span:nth-child(3n+2){border-color:#BFE3FF;background:var(--sky-l)}
.hm-powers span:nth-child(3n){border-color:#AEEDE9;background:var(--teal-l)}

.hm-split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hm-split-text p{font-size:18px;font-weight:700;color:var(--muted)}
.hm-split-art{position:relative;min-height:300px}
.hm-fold{
  position:absolute;padding:14px 26px;border-radius:16px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;
  box-shadow:0 6px 0 rgba(0,0,0,.15);
}
.hm-fold::before{content:'';position:absolute;left:14px;top:-10px;width:46px;height:14px;border-radius:8px 8px 0 0;background:inherit}
.hm-fold.f1{left:0;top:10px;background:var(--sky)}
.hm-fold.f2{left:60px;top:90px;background:var(--grape)}
.hm-fold.f3{left:120px;top:170px;background:var(--red)}
.hm-split-art img{position:absolute;right:0;bottom:0;width:min(220px,48%)}
@media (max-width:860px){.hm-split{grid-template-columns:1fr}.hm-split-art{min-height:260px}}

.hm-ticks{list-style:none;padding:0;margin:14px 0}
.hm-ticks li{position:relative;padding-left:30px;margin:9px 0;font-weight:700;color:var(--ink)}
.hm-ticks li::before{
  content:'';position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ------------------------------------------------------------ plans */
.hm-bill{display:flex;justify-content:center;gap:6px;margin:-12px auto 26px;padding:6px;border-radius:999px;background:var(--panel);border:2px solid var(--line);width:max-content}
.hm-bill-btn{border:0;background:transparent;padding:9px 18px;border-radius:999px;font:inherit;font-weight:800;color:var(--muted);cursor:pointer}
.hm-bill-on{background:#fff;color:var(--navy);box-shadow:0 3px 0 var(--line-2)}
.hm-save{margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--sun);color:var(--navy);font-size:12px}
.hm-plans{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:24px}
.hm-plan{position:relative;display:flex;flex-direction:column;padding:28px 26px;border-radius:26px;background:#fff;border:3px solid var(--line);box-shadow:0 10px 0 var(--line)}
.hm-plan h3{font-size:26px}
.hm-plan-plus{border-color:#FFC7CE;box-shadow:0 10px 0 #FFC7CE}
.hm-plan-tag{position:absolute;top:-15px;left:24px;padding:4px 14px;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:13px}
.hm-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 0}
.hm-amt{font-family:'Fredoka',sans-serif;font-size:46px;font-weight:700;color:var(--navy)}
.hm-per{font-weight:800;color:var(--muted)}
.hm-per-note{margin:2px 0 0;color:var(--muted);font-weight:700;font-size:14px}
.hm-plan .hm-ticks{flex:1}
.hm-plan-btn{width:100%;margin-top:12px}
@media (max-width:760px){.hm-plans{grid-template-columns:1fr}}
.hm-copy{margin-top:8px;font-size:13px}