/* home.css: the home page's sections (hero, showcase, Congregation Mode strip, board, commitments, pricing, call to action).
 * Loads after site.css; see its header for the split. */

/* ============================================================ 5. hero */
.hero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
  padding:0 var(--margin);min-height:calc(min(100svh,1000px) - var(--nav-h));overflow:clip}
.hero__copy{grid-column:1/span 6;position:relative;z-index:2;align-self:start;padding:clamp(40px,9vh,120px) 0 48px}
.hero .sub{font-size:var(--step-lead);line-height:1.5;margin:clamp(16px,2.4vh,26px) 0 clamp(20px,3vh,30px);max-width:40ch;color:var(--cream)}
.hero .hero-link{display:inline-block;margin-top:2px;font-size:var(--step-s);color:var(--cream);font-weight:500;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:.07em;text-decoration-color:var(--gold-text)}
.hero .join__note,.hero .join__more{color:var(--cream-dim)}
.hero .join__more{color:var(--btn-gold)}

.hero__stage{grid-column:7/-1;position:relative;align-self:end;justify-self:stretch;
  margin-right:calc(var(--margin) * -1);height:clamp(520px,calc(100svh - var(--nav-h) - 16px),900px);overflow:clip}
.hero__stage .arch-stage{position:absolute;inset:0;background:var(--f-gold)}
.hero__shot{position:absolute;left:50%;bottom:0;height:95%;aspect-ratio:780/1618;max-width:78%;transform:translateX(-50%)}   /* rises from the floor of the stage */
.hero__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}

@media (max-width:860px){
  .hero{display:block;min-height:0}
  .hero__copy{padding:28px 0 28px}
  .hero__stage{margin:6px calc(var(--margin) * -1) 0;height:min(150vw,620px)}
  .hero__shot{height:94%}
}

/* ============================================================ 6. showcase (split) */
.showcase{margin-top:clamp(56px,7vw,120px)}
.showcase__media{display:grid;justify-items:center;align-items:end;padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0}
.showcase__shot{position:relative;height:min(76svh,820px);aspect-ratio:780/1606;max-width:100%;background:var(--app-bg)}
.showcase__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 100%}
.showcase__text{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,64px);gap:40px}
.tabs{display:flex;flex-wrap:wrap;gap:6px 26px}
.tabs button{font-size:var(--step-lead);font-weight:600;padding:10px 0;color:var(--cream-dim);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;text-decoration-thickness:.1em;transition:color var(--t-hover) ease,text-decoration-color var(--t-hover) ease}
.tabs button[aria-selected="true"]{color:var(--cream);text-decoration-color:var(--gold-text)}
.showcase h2{font-size:var(--step-l);max-width:12ch}
.showcase p.desc{max-width:36ch;margin-top:20px}
.showcase__actions{display:flex;flex-wrap:wrap;gap:10px}
.showcase__actions .btn{flex:1 1 auto;min-height:60px;font-size:var(--step-s)}
.showcase__actions .btn.ghost{background:var(--ink-3)}
/* without JavaScript every panel shows, one after the other */
.showcase__panel{display:grid;grid-template-columns:1fr 1fr;min-height:max(88svh,640px)}
.showcase__panel+.showcase__panel{margin-top:0}
.js .showcase__panel[hidden]{display:none}
@media (max-width:860px){
  .showcase__panel{display:block;min-height:0}
  .showcase__media{padding:28px var(--margin) 0}
  .showcase__shot{height:auto;width:min(78%,340px)}
  .showcase__text{padding:28px var(--margin) 40px;gap:28px}
}

/* ============================================================ 7. four fields: one Congregation Mode screen, four moments */
.strip__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;padding:clamp(72px,9vw,150px) var(--margin) clamp(24px,3vw,44px)}
.strip__head h2{max-width:11ch}
.strip__head p{max-width:34ch}
.strip__play{min-height:56px;min-width:236px;padding:0 28px;font-size:var(--step-s)}
.strip__play[hidden]{display:none}
.strip{display:grid;grid-template-columns:repeat(4,1fr)}
.moment{position:relative;min-height:min(78svh,760px);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;justify-content:space-between;overflow:clip;
  transition:background-color var(--t-ui) ease}
.moment__say{font-family:var(--serif);font-size:var(--step-m);line-height:1.08;letter-spacing:-.015em;font-weight:500;max-width:15ch;min-height:2.16em;order:3}
.moment__card{align-self:center;margin:auto 0;width:min(260px,82%);transition:transform var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.moment:hover .moment__card{transform:translateY(-6px)}}
.moment.is-now{background:var(--ink-2)}
.moment:focus-visible{outline:3px solid var(--cream);outline-offset:-8px}
.strip.is-playing .moment:not(.is-now):not(.is-done) .moment__card{opacity:.4}
.strip.is-playing .moment:not(.is-now):not(.is-done) :is(.cm__ar,.cm__en,.cm__found,.cm__end,.cm__endtext){visibility:hidden}
/* the fragment of the real interface (data-ui): the app's own colours */
.cm{background:var(--app-bg);color:var(--app-text);border-radius:26px;padding:18px 16px 16px;min-height:310px;display:flex;flex-direction:column;font-family:var(--sans)}
.cm__label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--app-gold);font-weight:600}
.cm__sub{text-align:center;color:var(--app-dim);font-size:12.5px;margin-top:4px}
.cm__ar{font-family:var(--arabic);font-size:25px;line-height:1.7;text-align:center;direction:rtl;margin-top:22px;min-height:84px;color:var(--app-text)}
.cm__en{text-align:center;color:var(--app-gold);font-size:14px;line-height:1.5;margin-top:8px;min-height:44px}
.cm__pulse{margin-top:auto;display:flex;justify-content:center;gap:5px;padding-top:14px}
.cm__pulse span{display:block;width:6px;border-radius:3px;background:var(--app-gold);height:10px}
.cm__pulse span:nth-child(2){height:18px}.cm__pulse span:nth-child(3){height:26px}.cm__pulse span:nth-child(4){height:16px}.cm__pulse span:nth-child(5){height:8px}
.cm--done .cm__pulse{display:none}
.cm__end{font-family:var(--arabic);font-size:34px;text-align:center;margin-top:40px;color:var(--app-gold)}
.cm__endtext{text-align:center;color:var(--app-dim);font-size:14px;margin-top:6px}
.cm__found{margin:26px auto 0;padding:8px 14px;background:var(--app-card);border-radius:12px;font-size:14px;color:var(--app-text);text-align:center}
@media (max-width:860px){
  .strip{grid-template-columns:1fr}
  .moment{min-height:min(64svh,520px)}
  .moment__say{max-width:16ch;min-height:0;order:-1;margin-bottom:12px}
}

/* ============================================================ 8. the board: close-ups of the real interface */
.board__wrap{padding:clamp(72px,10vw,200px) var(--margin) 0}
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(78px,7.2vw,112px);gap:8px}
.tile{position:relative;display:flex;flex-direction:column;overflow:clip}
.tile__media{flex:1;min-height:0;position:relative;overflow:clip}
.tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 0)}
.tile__media--pad img{inset:auto;left:50%;top:var(--y,0);width:var(--w,86%);height:auto;object-fit:fill;transform:translateX(-50%)}
.tile__cap{padding:12px 18px 16px;display:grid;gap:2px}
.tile__cap b{font-size:var(--step-t);font-weight:600;line-height:1.25}
.tile__cap span{font-size:var(--step-s);line-height:1.4;color:var(--cream-dim)}
.tile--head{justify-content:flex-start;padding:clamp(18px,2vw,30px)}
.tile--head h2{font-size:var(--step-l);max-width:none}
.t-a{grid-column:1/span 6;grid-row:1/span 4}
.t-b{grid-column:7/span 6;grid-row:1/span 2}
.t-c{grid-column:7/span 3;grid-row:span 2}
.t-d{grid-column:10/span 3;grid-row:span 2}
.t-e{grid-column:1/span 3;grid-row:span 4}
.t-f{grid-column:4/span 3;grid-row:span 4}
.t-g{grid-column:7/span 6;grid-row:span 2}
.t-h{grid-column:7/span 3;grid-row:span 2}
.t-i{grid-column:10/span 3;grid-row:span 2}
@media (max-width:860px){
  .board{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:6px}
  .tile{grid-column:span 1;grid-row:auto}
  .t-a,.t-b,.t-g{grid-column:1/-1}
  /* every picture keeps its own proportions: nothing is cropped, so no word is ever cut */
  .tile__media,.tile__media--pad{position:static;flex:none;overflow:visible}
  .tile__media img{position:static;width:100%;height:auto;object-fit:fill;object-position:initial}
  .tile__media--pad{padding:clamp(14px,4vw,28px) clamp(14px,4vw,28px) 6px}
  .tile__media--pad img{left:auto;top:auto;transform:none}
  .tile__cap b{font-size:16px}.tile__cap span{font-size:14px}
  /* the Qur'an crop is shortened on a line boundary (after the third āyah), so it sits level with its neighbour */
  .t-f .tile__media{aspect-ratio:780/750;overflow:clip}
  .t-f .tile__media img{height:100%;object-fit:cover;object-position:50% 0}
}
@media (max-width:560px){
  .board{grid-template-columns:1fr}
  .tile{grid-column:1/-1}
  .t-f .tile__media{aspect-ratio:auto;overflow:visible}
  .t-f .tile__media img{height:auto;object-fit:fill}
}

/* ============================================================ 9. commitments (proof without invented proof) */
.commit{padding:clamp(72px,10vw,200px) var(--margin) 0}
.commit__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.commit__tile{padding:clamp(20px,2.2vw,32px);min-height:clamp(190px,17vw,260px);display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.commit__tile h3{font-family:var(--serif);font-size:var(--step-m);font-weight:500;letter-spacing:-.02em;line-height:1.02;max-width:14ch}
.commit__tile p{max-width:30ch}
.commit__head,.commit__wide{grid-column:span 2}
.commit__head h2{font-size:var(--step-l);max-width:none}
@media (max-width:860px){
  .commit__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .commit__head{grid-column:1/-1;min-height:0}
  .commit__wide{grid-column:1/-1}
  .commit__tile{min-height:0}
}

/* ============================================================ 10. pricing: two plans, two fields */
.plans{display:grid;grid-template-columns:5fr 7fr;margin-top:clamp(72px,10vw,200px)}
.plan{min-height:min(80svh,740px);padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:20px}
.plan h2{font-size:var(--step-l);line-height:.98}
.plan__who{max-width:28ch;font-size:var(--step-lead);line-height:1.4}
.plan__body{max-width:38ch}
.plan__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.plan__price{font-family:var(--serif);font-size:var(--step-xl);line-height:.9;letter-spacing:-.03em}
.plan__unit{font-size:var(--step-t);font-weight:500}
.plan__alt{font-size:var(--step-t);margin-top:10px}
.plan__shot{max-width:420px;margin-top:8px}
.plan__shot{border-radius:22px;overflow:clip}
.plan__shot img{width:100%}
@media (max-width:860px){
  .plans{display:block}
  .plan{min-height:0;padding:32px var(--margin) 40px}
  .plan__foot{flex-direction:column;align-items:flex-start}
  .plan__foot .btn{width:100%}
}

/* ============================================================ 11. the call to action (also the #waitlist form) */
.cta{margin-top:clamp(72px,10vw,200px);padding:calc(var(--arch) + clamp(24px,3vw,44px)) var(--margin) clamp(48px,6vw,88px)}
.cta__top{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start;justify-content:space-between}
.cta__say{font-size:var(--step-lead);line-height:1.4;max-width:40ch}
.cta__bism{font-size:var(--step-l);line-height:1.5}
.cta__word{font-family:var(--serif);font-weight:500;font-size:clamp(50px,10.6vw,190px);line-height:.92;letter-spacing:-.04em;margin:clamp(20px,3vw,44px) 0 clamp(36px,5vw,76px);text-wrap:balance}
.nb{white-space:nowrap}
.cta__word a{display:block}
.cta .join.join--card{margin:0;max-width:520px}
.cta .join-done{margin:0;align-items:flex-start;text-align:left}
.cta .wait{display:block}
.cta .share{justify-content:flex-start}
.cta .join__note{color:var(--cream-dim)}
.cta .join__note a{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:.07em}   /* launch mode: "How we use your email" */
.cta noscript>.join__note{margin:20px 0 0}
@media (max-width:860px){
  .cta__word{font-size:clamp(46px,14.4vw,120px)}
}

/* the join bar keeps its tokens; the page just clears it */
html.join-bar-open .footer{padding-bottom:calc(var(--bar-h,64px) + 28px)}

/* The signup component's notes were 12.5px; nothing meant to be read goes below 13px. */
.join .join__note,.join .join__help,.join .join__consent,.share__label{font-size:13px}

/* Carried over from the previous page stylesheet (signup component, see docs/JOIN-FLOW.md): the hidden Turnstile sheet's heading and Cancel
   button must not be focusable or announced while it is closed, and the sticky bar's finished state never shows the SMS and WhatsApp share buttons. */
[data-join-turnstile]:not([data-visible="true"]) :is(h3,[data-join-turnstile-cancel]){visibility:hidden}
.joinbar__done [data-join-share-whatsapp],.joinbar__done [data-join-share-sms]{display:none!important}
@media (max-width:560px){
  .commit__grid{grid-template-columns:1fr}
  .commit__tile,.commit__head,.commit__wide{grid-column:1/-1}
  .commit__tile p{max-width:none}
}

/* Congregation Mode cards at 861 to 1210px: equal heights, balanced wraps, three caption lines reserved */
@media (min-width:861px) and (max-width:1210px){
  .cm{min-height:356px}
  .moment__say{min-height:3.24em}
  .cm__label,.cm__sub,.cm__en{text-wrap:balance}
}

/* print: the hero screen is part of the page */
@media print{
  .hero{min-height:0;overflow:visible}
  .hero__stage{break-inside:avoid}
}

@media (forced-colors: active){
  .moment.is-now{outline:3px solid Highlight;outline-offset:-8px}
}