/* ==========================================================================
   Al-Manara site — inner pages (a registration page, an info page): page hero,
   gain cards, the step path, the form with its side note. Load after site.css.
   ========================================================================== */
.page-hero{padding-block:clamp(40px,8vw,96px) clamp(28px,5vw,56px)}
/* the hero lines up with the header (right edge of the 1200px column); only its text is narrowed */
.page-hero .in{display:grid;gap:clamp(16px,2.6vw,24px);justify-items:start}
.page-hero .in > *{max-width:760px}
.page-hero h1{font-size:clamp(40px,8vw,84px);line-height:1.1}
.page-hero h1 em{font-style:normal;color:var(--brand)}
.page-hero .lede{font-size:clamp(17px,2.1vw,21px);color:var(--ink-soft);max-width:54ch}
.page-hero .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

.blk{padding-block:clamp(36px,6vw,72px)}
.blk h2{font-size:clamp(26px,4vw,40px);margin-bottom:clamp(20px,3vw,32px)}

/* what the presenter gets */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.gains{grid-template-columns:1fr}}
.gain{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px;display:grid;gap:8px;align-content:start}
.gain .ico{width:auto;height:30px;margin-bottom:4px}
.gain h3{font-size:19px}
.gain p{color:var(--ink-soft);font-size:15px}

/* the path from proposal to workshop: a real sequence, drawn on the slant */
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
@media (max-width:860px){.path{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.path{grid-template-columns:1fr}}
.path li{position:relative;padding:20px 22px 22px;background:var(--card);border:1px solid var(--line);margin:-1px 0 0 -1px;display:grid;gap:6px;align-content:start;counter-increment:s}
.path li::before{content:counter(s);font-weight:700;font-size:34px;line-height:1;color:var(--brand)}
.path li b{font-size:17px}
.path li span{font-size:14px;color:var(--muted)}
.path li.review{background:var(--ink);color:#fff;border-color:var(--ink)}
.path li.review span{color:rgba(255,255,255,.72)}

.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.topics span{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--card);font-size:14px;font-weight:500}
.note{font-size:14px;color:var(--muted);margin-top:12px}

.form-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:960px){.form-wrap{grid-template-columns:1fr}.aside{order:-1}}
.aside{position:sticky;top:calc(var(--head-h) + 20px);background:var(--surface);border-radius:8px;padding:20px;display:grid;gap:10px;font-size:15px}
@media (max-width:960px){.aside{position:static}}
.aside b{font-size:16px}
.aside ul{margin:0;padding-inline-start:18px;display:grid;gap:4px;color:var(--ink-soft)}