/* =====================================================================
   KataCore · landing page
   Public shop window: what it is, who is winning, and one way in.
   All colour comes from the tokens in base.css.
   ===================================================================== */

body{display:block;padding:0}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding:18px}

/* --- masthead ------------------------------------------------------- */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:6px 0 26px;
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{
  font-family:var(--sans);font-size:24px;font-weight:bold;letter-spacing:-.02em;
  text-transform:uppercase;
}
.brand .mark span{color:var(--lantern)}
.brand .by{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase}

.teacher-link{
  margin-left:auto;margin-right:14px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--soft);text-decoration:none;
  border:1px solid var(--edge);border-radius:999px;
  padding:7px 14px;
}
.teacher-link:hover{color:var(--paper);border-color:var(--lantern)}
@media (max-width:560px){.teacher-link{margin:0;order:3;flex-basis:100%;text-align:center}}

/* --- hero ----------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch;
}
@media (max-width:820px){.hero{grid-template-columns:1fr}}

.hero h1{font-size:clamp(38px,7.4vw,72px)}
.hero .lede{font-size:17px;max-width:52ch}

.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.cta{
  background:var(--lantern);color:#141A08;border:0;border-radius:var(--r-md);
  padding:16px 26px;font-size:17px;font-weight:bold;cursor:pointer;
  text-transform:uppercase;text-decoration:none;display:inline-block;
}
.cta:hover{filter:brightness(1.08)}
.cta.secondary{
  background:transparent;color:var(--paper);border:1px solid var(--edge);
  font-weight:normal;text-transform:none;
}
.cta.secondary:hover{border-color:var(--lantern)}

.nosignup{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--jade);
  text-transform:uppercase;margin-top:14px;
}

/* --- the loop ------------------------------------------------------- */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media (max-width:760px){.loop{grid-template-columns:repeat(2,1fr)}}
.step{
  background:var(--well);border:1px solid var(--edge2);border-radius:var(--r-md);padding:14px;
}
.step i{
  display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:var(--lantern);margin-bottom:6px;
}
.step b{display:block;font-size:16px;margin-bottom:4px}
.step p{margin:0;font-size:13px;line-height:1.5;color:var(--dim)}

/* --- leaderboard ---------------------------------------------------- */
.board-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.season{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase}

.board td{vertical-align:middle}
.board .rank{width:44px;color:var(--dim);font-size:16px}
.board .rank.top{color:var(--lantern)}
.board .who b{display:block;font-family:var(--sans);font-size:15px;color:var(--paper)}
.board .who small{color:var(--dim);font-size:12px}
.board .elo{text-align:right;color:var(--lantern);font-size:16px}
.board .wl{text-align:right;color:var(--dim);font-size:12px;width:88px}
@media (max-width:600px){.board .wl{display:none}}

.chip{
  display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;
  vertical-align:middle;
}

.empty{
  text-align:center;color:var(--dim);font-family:var(--mono);font-size:13px;
  padding:28px 10px;line-height:1.7;
}

/* --- stats ---------------------------------------------------------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:700px){.counters{grid-template-columns:repeat(2,1fr)}}
.counter{
  background:var(--well);border:1px solid var(--edge2);border-radius:var(--r-md);
  padding:14px;text-align:center;
}
.counter b{display:block;font-family:var(--mono);font-size:clamp(22px,4vw,30px);color:var(--lantern)}
.counter i{
  display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-top:4px;
}

.ticker{margin-top:12px;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--dim)}
.ticker b{color:var(--jade);font-weight:normal}
.ticker s{color:var(--dim);text-decoration:none;opacity:.7}

/* --- sections ------------------------------------------------------- */
section{margin-top:26px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:820px){.split{grid-template-columns:1fr}}

footer{
  margin:40px 0 24px;padding-top:18px;border-top:1px solid var(--edge2);
  font-family:var(--mono);font-size:11px;color:var(--dim);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* The AI section's standards note — a teacher-facing claim, so it is
   styled as a citation rather than as marketing. */
.ai-standard {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--edge2, #22304a);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--soft, #9fb0c8);
}