/* Kindergarten lesson-plans page — supporting layout (steps, topics, hero).
   Used by /anasheed-taalimiya-lil-rawda/ and the English pair. */

.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:18px}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:24px 22px 22px;
}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--gold);color:#1a1108;
  font-weight:700;font-size:1.05rem;margin-bottom:12px;
}
.steps h3{color:var(--gold2);margin:0 0 .4em;font-size:1.2rem}
.steps p{margin:0;color:var(--muted)}

.topic-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-align:inherit;font:inherit;color:var(--cream);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;cursor:pointer;width:100%;
  transition:border-color .15s,filter .15s;
}
.topic-btn:hover{border-color:var(--gold);color:var(--cream)}
.topic-btn h3{margin:0;color:var(--gold2)}
.topic-btn p{margin:0;color:var(--muted);font-size:.98rem;font-weight:400}
.topic-btn .more{margin-top:8px;color:var(--gold2);font-weight:700;font-size:.92rem}

.include-card h3{margin:.2em 0 .35em}
.include-card p{margin:0;color:var(--muted)}
.include-n{display:inline-block;color:var(--gold);font-weight:700;font-size:.85rem}
.who-card h3{margin:0 0 .35em}
.who-card p{margin:0;color:var(--muted)}
.price-note{color:var(--muted);font-size:.95rem;margin-top:.2em}
.sub-note{font-size:.92rem;color:var(--muted)}
.cred p{max-width:65ch}
.btns.form-actions{margin-top:0}
.form-status{min-height:1.5em;color:var(--muted);font-size:.95rem;margin:0}
.nowrap{white-space:nowrap}

.price{font-variant-numeric:tabular-nums}
.fx{font-size:.88rem;color:var(--muted);margin:.6em 0 0;max-width:65ch}

.hero-audience{
  color:var(--gold2);
  font-weight:700;
  font-size:1.15rem;
  margin:.15em 0 .85em;
  max-width:40ch;
}
html[lang=en] .hero-audience{font-family:var(--en);letter-spacing:0;max-width:46ch}