/* Landing page. Mobile first: the teacher, the promise, the two buttons. */

.skip:focus { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); width: auto; height: auto; clip-path: none; padding: var(--space-3) var(--space-4); background: var(--brand); color: var(--on-brand); border-radius: var(--radius-md); z-index: 60; }

.top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-4); }
.top .brand img { height: 36px; width: auto; }
.top-actions { display: flex; gap: var(--space-2); align-items: center; }

/* ── Hero ── */
.hero { display: grid; gap: var(--space-5); padding-block: var(--space-2) var(--space-6); }
.photo {
  margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, var(--ilm-sand), color-mix(in srgb, var(--ilm-emas-light) 45%, var(--ilm-sand)));
  display: grid; place-items: center;
}
.photo-star { position: absolute; width: 70%; opacity: .14; inset-inline-end: -12%; inset-block-end: -18%; }
.photo figcaption { position: relative; color: var(--ilm-muted); font-weight: var(--weight-strong); }
/* Real photos: stacked, one shown at a time (landing.js rotates them). The
   portraits are full length, so the frame keeps the face in view. */
.has-photos { background: #fff; }
.photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  opacity: 0; transition: opacity .9s ease; }
.photo-img.is-on { opacity: 1; }
.photo-dots { position: absolute; inset-block-end: 0; inset-inline: 0; margin-inline: auto; width: fit-content; display: flex; isolation: isolate; }
.photo-dots::before { content: ''; position: absolute; inset-block: 12px; inset-inline: 12px; z-index: -1;
  background: color-mix(in srgb, #fff 85%, transparent); border-radius: var(--radius-pill); }
.photo-dots button { width: 36px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.photo-dots button::before { content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--ilm-green-900) 25%, transparent); border: 1.5px solid var(--ilm-green-900); transition: background .2s; }
.photo-dots button[aria-current="true"]::before { background: var(--ilm-green-900); }
.photo-dots button:focus-visible { box-shadow: none; outline: 3px solid var(--ilm-green-900); outline-offset: -10px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .photo-img { transition: none; } }
.hero-copy { display: grid; gap: var(--space-4); align-content: start; }
.proof { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step-0); font-weight: var(--weight-strong); background: var(--surface); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); justify-self: start; }
.hero h1 { font-size: clamp(var(--step-5), 9vw, 60px); color: var(--brand); letter-spacing: -.01em; }
:lang(ar) .hero h1 { letter-spacing: 0; }
.lede { font-size: var(--step-2); max-width: 46ch; }
.intake { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--weight-strong); color: var(--accent-text); }
.cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cta .btn { flex: 1 1 auto; }

.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; padding-block-end: var(--space-6); }
.chips a { min-height: var(--tap); display: inline-flex; align-items: center; padding-inline: var(--space-4); border-radius: var(--radius-pill); background: var(--surface); text-decoration: none; font-weight: var(--weight-strong); font-size: var(--step-0); }

/* ── Sections ── */
.section { padding-block: var(--space-8) 0; }
.section > h2, .band h2 { font-size: var(--step-5); margin-block-end: var(--space-5); }
.band { background: var(--surface); padding-block: var(--space-7); margin-block-start: var(--space-8); }
.about p { max-width: 62ch; font-size: var(--step-2); }

.clips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.clip { display: grid; align-content: end; gap: var(--space-2); aspect-ratio: 9 / 12; border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none; font-weight: var(--weight-strong); color: var(--ilm-paper); background: linear-gradient(180deg, var(--ilm-green-700), var(--ilm-green-900)); }
.clip.has-cover { position: relative; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; place-items: center; align-content: center; }
.clip-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Corner, not centre: the covers carry their title across the middle. */
.clip.has-cover .clip-play { position: absolute; inset-block-end: var(--space-4); inset-inline-start: var(--space-4); width: 56px; height: 56px;
  box-shadow: 0 4px 18px rgb(0 0 0 / .35); transition: transform .15s; }
.clip.has-cover .clip-play svg { width: 26px; height: 26px; }
.clip.has-cover:hover .clip-play { transform: scale(1.06); }
/* Phones: the clips sit in a row you swipe, so three tall videos don't
   stack into a long scroll. */
@media (max-width: 859px) {
  .clips { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(68%, 280px); overflow-x: auto;
    scroll-snap-type: x mandatory; padding-block-end: var(--space-2); scrollbar-width: thin; }
  .clips > li { scroll-snap-align: start; }
}
.clip.is-playing { position: relative; display: block; aspect-ratio: 9 / 16; padding: 0; overflow: hidden; background: #000; }
.clip.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-play { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ilm-emas-light); color: var(--ilm-green-900); }

.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.features li { display: grid; gap: var(--space-2); align-content: start; }
.features .ico { width: 28px; height: 28px; color: var(--accent-text); }
.features h3 { font-size: var(--step-3); }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.steps li { counter-increment: step; background: var(--bg); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.steps li::before { content: counter(step); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: var(--weight-display); }
.steps h3 { font-size: var(--step-3); }

.fees { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.fee { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-3); }
.fee.featured { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--ilm-emas); }
.fee-tag { justify-self: start; font-size: var(--step-0); font-weight: var(--weight-strong); color: var(--accent-text); }
.fee h3 { font-size: var(--step-3); }
.price { font-size: var(--step-1); color: var(--text-muted); }
.price bdi { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-6); color: var(--text); line-height: 1; }
.fee ul { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); }
.fee li { display: flex; gap: var(--space-2); align-items: start; }
.fee li .ico { color: var(--success); margin-block-start: 2px; }
.fee-note { margin-block-start: var(--space-4); max-width: 62ch; }

.quotes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.quotes blockquote { margin: 0; background: var(--bg); border-radius: var(--radius-lg); padding: var(--space-5); font-size: var(--step-2); }

.faq { display: grid; gap: var(--space-2); max-width: 760px; }
.faq details { background: var(--surface); border-radius: var(--radius-md); }
.faq summary { cursor: pointer; padding: var(--space-4); font-weight: var(--weight-strong); list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--step-3); line-height: 1; color: var(--accent-text); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 var(--space-4) var(--space-4); max-width: 62ch; }

.final { background: var(--ilm-green-900); color: var(--ilm-paper); margin-block-start: var(--space-8); padding-block: var(--space-8); position: relative; overflow: hidden; }
.final .wrap { display: grid; gap: var(--space-5); justify-items: start; position: relative; }
.final h2 { font-size: var(--step-5); max-width: 18ch; }
.final::after { content: ""; position: absolute; inset-inline-end: -80px; inset-block-start: -60px; width: 340px; height: 340px; background: url("/brand/logo/ilm-star.svg") center / contain no-repeat; opacity: .12; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); align-items: center; padding-block: var(--space-6) calc(var(--space-8) + 40px); font-size: var(--step-0); }
.foot-brand { display: flex; gap: var(--space-3); align-items: center; }
.foot-brand img { height: 26px; width: auto; }
.foot-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.foot-links a { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ── Sticky call to action, phones only ── */
.sticky-cta {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--line);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta .btn { flex: 1; }
.sticky-cta .wa { background: var(--surface); }

@media (min-width: 860px) {
  .top .brand img { height: 44px; }
  .hero { grid-template-columns: 1fr 1.1fr; align-items: center; gap: var(--space-7); padding-block: var(--space-6) var(--space-7); }
  .hero .photo { order: 2; aspect-ratio: 4 / 5; }
  .photo-img { object-position: 50% 0; }
  .cta .btn { flex: 0 0 auto; }
  .sticky-cta { display: none; }
  .foot { padding-block-end: var(--space-7); }
}