/* The current Sabr app palette and typography, layered over the day cycle. */
@font-face {
  font-family: "Titan One";
  src: url("fonts/titan-one-v165.woff2") format("woff2"),
       url("fonts/titan-one-v165.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F6E3C6;
  --ink: #4E2C16;
  --muted: #74543B;
  --accent: #D8801F;
  --accentInk: #3C220F;
  --card: rgba(255, 251, 242, 0.72);
  --bd: rgba(78, 44, 22, 0.16);
  --dune1: #E5CAA7;
  --dune2: #D6B48C;
  --dune3: #C9A275;
  --disc: #F6CA8D;
  --glow: rgba(246, 202, 141, 0.12);
  --horizon: rgba(246, 202, 141, 0.12);
  --star: 0;
  --gold: #DDA43A;
  --display: "Titan One", ui-rounded, system-ui, sans-serif;
  --serif: var(--display);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --maxw: 1240px;
}

body { font-size: 17px; }
button, .sbadge__name { font-family: var(--sans); }
.hero-head, .feat-head, .meet-sabr__head, .finale__head {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}

/* Keep the app's simple, broad dunes in the lower part of the scene. */
.horizon { opacity: 0.3; }
/* The disc is light, not a sticker: the same two-layer halo site.css gives the
   large disc, scaled to this smaller one so the falloff still reads as glow. */
.disc {
  width: clamp(58px, 7vw, 96px);
  box-shadow: 0 0 38px 9px var(--glow), 0 0 15px 2px var(--glow);
}
/* Phones stack every panel full width, so the disc has no gutter to sit in and
   it passes close to headings. Smaller here, with a tighter halo. */
@media (max-width: 700px) {
  .disc { width: 48px; box-shadow: 0 0 26px 6px var(--glow), 0 0 11px 1px var(--glow); }
}
/* The navigation is quieter than the page and follows its current sky. */
.nav {
  min-height: 76px;
  padding: 14px clamp(22px, 4.5vw, 72px);
  background: color-mix(in srgb, var(--bg) 87%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent);
}
.nav__brand {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0;
}
.nav__brand img { width: 31px; height: 31px; border-radius: 9px; }
.nav__links { margin-left: 28px; font-size: 0.9rem; gap: 26px; }
.nav__links a { color: var(--ink); opacity: 0.82; }
.nav__rating { font-family: var(--sans); font-size: 0.88rem; }
.cta { min-height: 44px; padding: 10px 20px; box-shadow: none; }
.cta:hover { box-shadow: none; }

/* The real Home screen carries the opening invitation. */
.hero-hook { padding: 112px 44px 68px; min-height: 100svh; }
.hero-layout {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: clamp(24px, 6vw, 84px);
  width: 100%;
}
.hero-copy { padding-bottom: 24px; text-align: left; }
.hero-hook .hero-head {
  max-width: none;
  font-size: clamp(3.1rem, 4.75vw, 4.6rem);
  line-height: 1.08;
  margin-bottom: 24px;
  animation: none;
}
.hero-copy .hero-lede {
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  line-height: 1.65;
  max-width: 34ch;
  color: var(--muted);
}
.hero-copy .cta-group { align-items: flex-start; margin-top: 30px; gap: 16px; }
.hero-copy .cta-pair { justify-content: flex-start; gap: 12px; }
.hero-scene {
  position: relative;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: min(100%, 430px);
  padding-bottom: 12px;
}
.phone.hero-phone {
  width: min(25vw, 300px, calc((100svh - 180px) * 0.46));
  margin-left: 0;
  transform: none;
}
.hero-hook .scroll-cue {
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  padding-bottom: 30px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.scroll-cue::before { display: none; }
.scroll-cue::after { height: 21px; background: var(--bd); }
.sbadge { border-radius: 12px; box-shadow: none; }
.sbadge__name { font-size: 1.16rem; font-weight: 600; }
.also-line { font-size: 0.88rem; }
.also-line a { color: var(--ink); text-decoration: underline; }

/* Editorial feature chapters keep all attention on the app's actual UI. */
.feature { gap: clamp(40px, 6vw, 88px); padding: 104px 60px; }
.feature__text { flex: 1 1 48%; max-width: 32rem; }
.feature__media { flex: 1 1 40%; }
.feat-head {
  font-size: clamp(2.35rem, 4.25vw, 3.6rem);
  line-height: 1.11;
  max-width: 16ch;
  margin-bottom: 16px;
}
.feat-lede { font-size: 1.15rem; line-height: 1.65; max-width: 35ch; }
/* Tier footnote under a feature lede: names the plan the feature belongs to. */
.feat-note {
  margin-top: -12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 35ch;
}
.tag { align-items: center; flex-wrap: nowrap; gap: 11px; min-height: 52px; margin-bottom: 16px; letter-spacing: 0; text-transform: none; }
/* The label is the page's eyebrow voice: the sticker gives it identity, the tracked caps give it weight without competing with the headline. */
.tag .prayer { font-family: var(--sans); font-size: 0.86rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.tag .time { border: none; padding: 0 0 0 3px; letter-spacing: 0; font-size: 0.85rem; }
/* Natural widths keep the visible sticker edge close to its label, and the
   heights are balanced against the label rather than against each other. */
.tag__sticker {
  --sticker-height: 40px;
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--sticker-height);
  object-fit: contain;
}
.tag__sticker--salah { --sticker-height: 42px; }
.tag__sticker--tasbih { --sticker-height: 41px; }
.tag__sticker--wide { --sticker-height: 38px; }
.phone, .phone--tall {
  width: clamp(230px, 26vw, 316px);
  border: 7px solid #281D15;
  border-radius: 38px;
  background: #281D15;
  box-shadow: 0 2px 0 1px rgba(78, 44, 22, 0.16), 0 22px 42px -24px rgba(38, 21, 10, 0.42);
}
.phone img { border-radius: 29px; }


/* Proof Mode gets its own moment beside the original camera capture. */
.proof-feature .feat-head { max-width: 12ch; }
.proof-privacy {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 23px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.proof-privacy svg { flex: 0 0 17px; width: 17px; height: 17px; }
@media (min-width: 701px) {
  .proof-feature .phone { width: min(26vw, 316px, calc((100svh - 190px) * 0.46)); }
}
@media (max-width: 700px) {
  .proof-privacy { justify-content: center; font-size: 0.82rem; }
  .feat-note { margin-inline: auto; font-size: 0.82rem; }
}

.methods-panel { padding: 100px 60px 56px; }
.methods__copy .feat-head { max-width: 16ch; }
.methods__stage { flex: 1 1 42%; gap: 18px; }
.methods.is-enhanced .methods__frame {
  width: min(29vw, 294px, calc((100svh - 180px) * 0.46));
  border: 7px solid #281D15;
  border-radius: 37px;
  background: #281D15;
  box-shadow: 0 2px 0 1px rgba(78, 44, 22, 0.16), 0 22px 42px -24px rgba(38, 21, 10, 0.42);
}
.methods.is-enhanced .methods__label {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}
.methods:not(.is-enhanced) .methods__screens {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  max-width: 720px;
  gap: 24px;
}
.methods:not(.is-enhanced) .mscreen img { border: 5px solid #281D15; padding: 0; background: #281D15; border-radius: 23px; }
.mscreen__cap { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 0.9rem; }

/* Tapping a state is an invitation to meet Sabr, not another dashboard. */
.meet-sabr { gap: 10px; padding-top: 88px; padding-bottom: 24px; }
.meet-sabr__head { max-width: 19ch; font-size: clamp(1.85rem, 3vw, 2.65rem); margin-bottom: 0; }
.meet-sabr__body { max-width: 42ch; margin-bottom: 2px; font-size: 1.08rem; }
.sabr { gap: 16px; margin-top: 0; max-width: 690px; }
.sabr.is-live .sabr__stage {
  position: relative;
  display: block;
  width: min(300px, 31vw, calc(100svh - 365px));
  min-width: 200px;
  aspect-ratio: 1;
}
.sabr.is-live .sabr__figure {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
}
.sabr.is-live .sabr__figure.is-active { opacity: 1; }
.sabr.is-live .sabr__figure img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.sabr.is-live .sabr__cap { display: none; }
.sabr__choices { display: none; }
.sabr.is-live .sabr__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
.sabr__choices button {
  padding: 10px 13px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
}
.sabr__choices button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sabr__choices button.is-active,
.sabr__choices button[aria-pressed="true"] { border-color: var(--bd); background: color-mix(in srgb, var(--bg) 55%, transparent); font-weight: 700; }
.sabr__cap { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.sabr__week { display: none; }
html.gsap .runway--sabr { height: 220vh; }
html.gsap .runway--methods { height: 220vh; margin-bottom: 0; }
html.gsap .runway--dots { height: 205vh; }
html.gsap .runway--loop { height: 235vh; }
/* Native sticky positioning keeps each chapter inside its own runway. */
html.gsap .runway > .methods-panel,
html.gsap .runway > .meet-sabr,
html.gsap .runway > .stat-band,
html.gsap .runway > .cause-band { position: sticky; top: 0; }

/* The reviews chapter owns its own layout in reviews.css. */
.band--reviews::before { display: none; }
.finale__head { max-width: 18ch; line-height: 1.13; }
/* The finale is the last panel in the document, so its resting frame is max
   scroll: the footer owns the bottom of the viewport and the fixed nav caps the
   top. A full 100svh panel there can only ever show (viewport - footer) of
   itself, which slid the camel behind the nav. Size the panel and the artwork
   against what the nav and the footer leave instead, so the whole lockup lands
   in the last frame. */
.finale__inner {
  min-height: calc(100svh - 210px);
  padding-top: 60px;
  padding-bottom: 30px;
  gap: 18px;
}
.finale__sabr { width: min(clamp(96px, calc(100svh - 640px), 218px), 38vw); }
.foot { background: color-mix(in srgb, var(--bg) 95%, #000); }

@media (min-width: 641px) {
  html.gsap .methods { gap: clamp(32px, 5vw, 64px); }
  html.gsap .methods__copy { flex: 1 1 48%; max-width: 32rem; gap: 22px; }
  html.gsap .methods.is-enhanced .methods__frame { width: min(29vw, 294px, calc((100svh - 180px) * 0.46)); }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .hero-hook { padding-inline: 36px; }
  .hero-hook .hero-head { font-size: clamp(2.85rem, 5.65vw, 3.8rem); }
  .hero-layout { grid-template-columns: 1.04fr 1fr; gap: 22px; }
  .hero-copy .hero-lede { font-size: 1.05rem; }
  .hero-copy .cta-pair { gap: 9px; }
  .hero-copy .sbadge { padding-inline: 12px; gap: 8px; height: 49px; }
  .hero-copy .sbadge__name { font-size: 0.96rem; }
  .hero-copy .sbadge__ico svg { width: 22px; height: 22px; }
  .feature { padding-inline: 36px; gap: 46px; }
  .feature .feat-head { font-size: clamp(2rem, 4vw, 2.8rem); }
  .feature .feat-lede { font-size: 1.08rem; }
  .methods-panel { padding-inline: 36px; }
}

@media (max-width: 700px) {
  .nav { min-height: 68px; gap: 12px; padding: 12px 20px; }
  .nav__brand { font-size: 0.95rem; gap: 8px; }
  .nav__brand img { width: 28px; height: 28px; }
  .nav__rating { display: none; }
  .nav .cta { font-size: 0.8rem; padding-inline: 14px; }
  .hero-hook { min-height: 0; padding: 92px 24px 72px; }
  .hero-layout { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { text-align: center; padding-bottom: 0; }
  .hero-hook .hero-head { font-size: clamp(2.8rem, 9.8vw, 4.1rem); max-width: 12ch; line-height: 1.1; margin: 0 auto 14px; }
  .hero-copy .hero-lede { font-size: 1rem; line-height: 1.6; max-width: 32ch; margin-inline: auto; }
  .hero-copy .cta-group { align-items: center; margin-top: 18px; gap: 13px; }
  .hero-copy .cta-pair { justify-content: center; gap: 10px; }
  .hero-scene { width: min(90%, 350px); }
  .phone.hero-phone { width: min(60vw, 264px, calc((100svh - 412px) * 0.46)); }
  .hero-hook .scroll-cue { bottom: 23px; font-size: 0.8rem; }
  .sbadge { height: 48px; padding-inline: 14px; gap: 9px; }
  .sbadge__ico svg { width: 23px; height: 23px; }
  .sbadge__name { font-size: 1.03rem; }
  .sbadge__top { font-size: 0.52rem; }
  .feature, .feature--flip { flex-direction: column; text-align: center; }
  .feature { min-height: 0; padding: 88px 24px; gap: 30px; }
  .feature__text { max-width: 35rem; }
  .feature .tag { justify-content: center; }
  .feature .feat-head, .feature .feat-lede { margin-inline: auto; }
  .feat-head, .feature .feat-head { font-size: clamp(2rem, 7.6vw, 3.1rem); max-width: 15ch; }
  .feat-lede, .feature .feat-lede { font-size: 1.03rem; line-height: 1.65; }
  .tag { gap: 9px; min-height: 46px; margin-bottom: 14px; }
  .tag .prayer { font-size: 0.78rem; letter-spacing: 0.2em; }
  .tag__sticker { height: calc(var(--sticker-height) * 0.86); }
  .phone, .phone--tall { width: min(69vw, 286px); border-width: 6px; border-radius: 34px; }
  .phone img { border-radius: 27px; }
  .methods-panel { padding: 92px 24px 34px; }
  .methods { gap: 27px; }
  html.gsap .methods { flex-direction: column; gap: 27px; }
  html.gsap .methods__copy { align-items: center; text-align: center; gap: 0; flex-basis: auto; }
  html.gsap .methods__copy .feat-head { font-size: clamp(1.8rem, 7.25vw, 2.5rem); }
  html.gsap .methods__copy .feat-lede { display: block; font-size: 0.95rem; line-height: 1.5; max-width: 34ch; margin: 17px auto 0; }
  .methods__copy .tag { margin-bottom: 14px; }
  .methods.is-enhanced .methods__frame { width: min(59vw, 232px, calc((100svh - 365px) * 0.46)); border-width: 6px; border-radius: 31px; }
  .methods__stage { gap: 12px; }
  .methods.is-enhanced .methods__label { font-size: 0.85rem; }
  .meet-sabr { padding: 82px 23px 22px; gap: 10px; }
  .meet-sabr__head { font-size: clamp(1.85rem, 7.2vw, 2.5rem); }
  .meet-sabr__body { font-size: 0.95rem; max-width: 35ch; }
  .sabr { gap: 13px; margin-top: 6px; }
  .sabr.is-live .sabr__stage { width: min(61vw, 270px, calc(100svh - 365px)); min-width: 160px; }
  .sabr.is-live .sabr__choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(100%, 330px);
    gap: 2px;
    padding: 6px;
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
  }
  .sabr__choices button { font-size: 0.78rem; padding-inline: 7px; }
  html.gsap .runway.runway--sabr { height: 180vh; }
  .finale__inner { min-height: calc(100svh - 300px); padding: 60px 24px 24px; gap: 18px; }
  .finale__head { font-size: clamp(2rem, 8vw, 3rem); }
  .foot { padding: 35px 22px; }
  .foot__links { gap: 8px 18px; }
  .foot__legal { font-size: 0.78rem; line-height: 1.7; }
}

@media (max-width: 370px) {
  .nav { padding-inline: 15px; gap: 8px; }
  .nav__brand { font-size: 0.85rem; }
  .nav__brand img { width: 25px; height: 25px; }
  .nav .cta { margin-left: auto; }
  .hero-hook { padding-inline: 19px; }
  .hero-hook .hero-head { font-size: 2.25rem; }
  .hero-copy .cta-pair { gap: 8px; }
  .hero-copy .sbadge { padding-inline: 12px; }
  .hero-copy .sbadge__name { font-size: 0.97rem; }
}

/* Without the sky engine the disc never moves off site.css's resting
   --disc-x / --disc-y, which lands it on the hero download badges and the
   "Also on Mac" line. Park it low and left instead, over the dunes, where it
   reads as a sun near the horizon and crosses no copy. */
html:not(.gsap) {
  --disc-x: 6vw;
  --disc-y: 72vh;
}

/* Static and reduced-motion views retain the same daylight-to-night story. */
html.reduced .sky { background: var(--bg); }
html.reduced .band--predawn,
html.reduced .band--dhuhr,
html.reduced .band--asr {
  --ink: #4E2C16;
  --muted: #74543B;
  --accent: #AB5C12;
  --accentInk: #FFF7EA;
  --bd: rgba(78, 44, 22, 0.17);
  --card: rgba(255, 251, 242, 0.72);
  color: var(--ink);
}
html.reduced .band--predawn { background: #F6E3C6; }
html.reduced .band--dhuhr { background: #F7E7CD; }
html.reduced .band--asr { background: #EECFAB; }
html.reduced .band--maghrib,
html.reduced .band--isha,
html.reduced .band--reviews,
html.reduced .band--finale {
  --ink: #F8E7CD;
  --muted: #D9BE9F;
  --accent: #EDAB56;
  --accentInk: #3C220F;
  --bd: rgba(248, 231, 205, 0.2);
  --card: rgba(255, 246, 230, 0.08);
  color: var(--ink);
}
html.reduced .band--maghrib { background: #673B27; }
html.reduced .band--isha { background: #3C291D; }
html.reduced .band--reviews, html.reduced .band--finale { background: #302116; }
html.reduced .methods-panel, html.reduced .meet-sabr { padding-block: 96px; }
@media (prefers-reduced-motion: reduce) {
  .hero-hook .hero-head, .hero-hook .reveal-line { animation: none; }
  .sabr__figure { transition: none; }
}

/* On compact screens, keep the real UI large and let the page scroll naturally. */
.methods__choices { display: none; }
.methods.is-enhanced .methods__choices { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.methods__choices button { min-height: 44px; padding: 10px 13px; font: 600 .85rem var(--sans); color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.methods__choices button[aria-pressed="true"] { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); border-color: var(--bd); }
.methods__choices button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
@media (max-width: 1100px) {
  .methods.is-enhanced .methods__choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 320px); }
  .methods__choices button { grid-column: span 2; }
  .methods__choices button:nth-child(4) { grid-column: 2 / span 2; }
  .methods__choices button:nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 701px) and (max-width: 1100px) and (min-height: 741px) {
  html.gsap .methods.is-enhanced .methods__frame { width: min(29vw, 294px, calc((100svh - 280px) * 0.46)); }
}
.finale__faq { font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px), (max-height: 740px) {
  html.gsap .runway.runway--methods { height: auto; margin-bottom: 0; }
  html.gsap .runway > .methods-panel { position: relative; }
  html.gsap .methods.is-enhanced .methods__frame { width: min(69vw, 274px); }
  .methods-panel { padding-block: 88px 64px; }
}

/* The 4.8 lives in the nav chip on wide screens; under 700px the chip is hidden, so the hero carries it. */
.hero-rating { display: none; }
@media (max-width: 700px) { .hero-rating { display: inline; } }

/* Second half of the tagline under the finale head, in the body face (Titan One has no italic). */
.finale__tag { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 1.05rem; color: var(--muted); margin-top: 0; }

/* Sabr gets the same escape hatch as the methods panel: on short or narrow viewports
   the runway collapses, the panel stops sticking, and the mood buttons own the state. */
@media (max-width: 700px), (max-height: 740px) {
  html.gsap .runway.runway--sabr { height: auto; }
  html.gsap .runway > .meet-sabr { position: relative; }
  .meet-sabr { padding-block: 82px 56px; }
}

/* =========================================================================
   PANEL TWO: "Where your hours go"
   A pinned, scroll-scrubbed runway. The number counts up from zero while the
   nineteen feed hours fill in one by one, the five prayer hours ignite last,
   and the caption swaps under them. It carries the sunrise sky, so the
   sequence stays predawn -> sunrise -> dhuhr. Colours stay in CSS vars so the
   sky engine keeps repainting them mid-scrub; the timeline only moves
   opacity, scale and transform (initStatBand in site.js).
   ========================================================================= */
.stat-band {
  min-height: 0;
  gap: 30px;
  padding-block: clamp(96px, 13vh, 148px);
}
/* Pinned mode: the panel fills the viewport for the length of its runway. */
html.gsap .runway--dots > .stat-band {
  min-height: 100svh;
  gap: clamp(24px, 4vh, 38px);
  padding-block: 92px 64px;
  justify-content: center;
}
.stat-band .stat {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.3vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: 0;
  max-width: 20ch;
  text-wrap: balance;
}
/* The counter rewrites the three digits on every scrub frame. Titan One has
   no tabular figures (its "0" is 0.73em wide, its "1" only 0.45em), so each
   digit gets its own fixed cell. The number's total width is then constant and
   the sentence after it never shifts while the count climbs. */
.stat-band .stat__num { white-space: nowrap; }
.stat-band .stat__d {
  display: inline-block;
  width: 0.73em;
  text-align: center;
}
.stat-band .stat__src {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--muted);
}
/* One row is one day. Twenty four hours, left to right. */
.stat-band .dots {
  grid-template-columns: repeat(24, 1fr);
  gap: clamp(3px, 0.85vw, 8px);
  max-width: 540px;
}
/* Pinned, the day reads as two rows of twelve: bigger dots, and a block
   narrow enough that the travelling sun never lands on it. */
html.gsap .runway--dots > .stat-band .dots {
  grid-template-columns: repeat(12, 1fr);
  max-width: 372px;
  gap: 8px;
}
/* No CSS transitions here: the scrubbed timeline owns every dot's state. */
.stat-band .dot {
  border: none;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  transition: none;
}
.stat-band .dot--prayer {
  background: var(--accent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
/* Two captions crossfade in the same box. */
.stat-band .stat-cap {
  position: relative;
  width: 100%;
  /* narrow enough that both captions wrap to two balanced lines, so the
     crossfade swaps like for like */
  max-width: 30ch;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  text-wrap: balance;
  color: var(--muted);
}
@media (max-width: 700px) {
  .stat-band { gap: 24px; padding-block: 84px; }
  .stat-band .stat { font-size: clamp(1.7rem, 7.4vw, 2.6rem); max-width: 16ch; }
  .stat-band .dots { max-width: 100%; gap: clamp(2px, 1vw, 5px); }
  .stat-band .stat-cap { font-size: 0.95rem; max-width: 30ch; }
}

/* =========================================================================
   THE ROOT CAUSE
   The same twenty four hours bent into a ring, on its own pinned runway.
   Beat one: the twenty four muted hours fill in one by one, clockwise from
   the top. Beat two: the five prayers ignite. Beat three: warmth spreads
   outward from each prayer through the rest of the day. Three captions carry
   the beats; the blog links stay visible below the ring throughout. It has no
   data-sky of its own, and the sky engine keys off scroll position rather than
   DOM section, so this band renders in whatever palette its runway is passing
   through, which for most of that travel is light sand. That is why every fill
   here is a var() rather than a fixed colour.
   ========================================================================= */
.cause-band {
  min-height: 0;
  gap: 20px;
  /* Wide enough that the heading lands on two lines at the shared .feat-head
     size; the captions below keep the narrower 34rem measure. */
  max-width: 40rem;
  padding-block: clamp(104px, 14vh, 156px);
}
/* Pinned, the copy is biased up the viewport: the dunes climb to roughly 70%
   of the frame here, and the captions and links have to stay clear of the
   ridge and the camel that walks it. */
html.gsap .runway--loop > .cause-band {
  min-height: 100svh;
  gap: clamp(12px, 1.7vh, 19px);
  padding-block: clamp(80px, 9vh, 112px) clamp(214px, 35vh, 392px);
  justify-content: center;
}
.cause-band .feat-head { max-width: 100%; margin-bottom: 0; }
.cause-band .cause-cap {
  position: relative;
  width: 100%;
  /* narrow enough that all three beats wrap to two balanced lines, so the
     crossfades swap like for like */
  max-width: 26rem;
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.72;
  text-wrap: balance;
  color: var(--muted);
}
.cause-ring { width: clamp(150px, 21vw, 194px); margin-top: 10px; }
html.gsap .runway--loop .cause-ring { width: clamp(132px, 19vh, 200px); margin-top: 0; }
.cause-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Three stacked layers, one colour each, so the timeline never has to
   interpolate a var(): the muted day underneath, the warm day and the five
   ignited prayers fading in on top. */
.cause-ring__dot { fill: color-mix(in srgb, var(--ink) 20%, transparent); }
.cause-ring__feed { fill: color-mix(in srgb, var(--accent) 78%, transparent); }
.cause-ring__prayer { fill: var(--accent); }
.cause-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.92rem;
}
.cause-links a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--bd);
}
.cause-links a:hover { text-decoration-color: var(--accent); }
@media (max-width: 700px) {
  .cause-band { gap: 17px; padding-block: 88px; }
  .cause-links { gap: 14px 22px; font-size: 0.9rem; }
  .cause-band .feat-head { max-width: 100%; }
  .cause-band .cause-cap { font-size: 0.99rem; line-height: 1.68; }
  .cause-ring { width: min(56vw, 170px); }
}

/* Just above the 741px collapse threshold the pinned panel has the least room
   of any size that still pins: a full viewport of copy minus the reserved band
   the fixed landscape occupies. Everything gets one size smaller there so the
   links still land above the ridge instead of spilling into it. */
@media (min-width: 701px) and (max-height: 800px) {
  html.gsap .runway--loop > .cause-band {
    gap: clamp(8px, 1.1vh, 14px);
    padding-block: clamp(56px, 7vh, 84px) clamp(196px, 32vh, 260px);
  }
  html.gsap .runway--loop > .cause-band .feat-head { font-size: clamp(1.6rem, 3.3vw, 2.2rem); }
  html.gsap .runway--loop .cause-ring { width: clamp(100px, 14.5vh, 150px); }
  html.gsap .runway--loop > .cause-band .cause-cap { font-size: 1rem; line-height: 1.62; }
}

/* Both runways get the same escape hatch as the methods and Sabr panels: on
   short or narrow viewports they collapse, the panel stops sticking, and
   site.js switches the same timelines from scrub to play-once-on-enter. */
@media (max-width: 700px), (max-height: 740px) {
  html.gsap .runway.runway--dots,
  html.gsap .runway.runway--loop { height: auto; }
  html.gsap .runway > .stat-band,
  html.gsap .runway > .cause-band { position: relative; }
  html.gsap .runway--dots > .stat-band {
    min-height: 0;
    gap: 24px;
    padding-block: clamp(84px, 12vh, 132px);
  }
  html.gsap .runway--loop > .cause-band {
    min-height: 0;
    gap: 17px;
    padding-block: clamp(88px, 13vh, 140px);
  }
  /* back to the single 24 hour strip, but never wider than the flat band's
     own measure: this block also catches wide-but-short desktop viewports */
  html.gsap .runway--dots > .stat-band .dots {
    grid-template-columns: repeat(24, 1fr);
    max-width: min(100%, 540px);
    gap: clamp(2px, 1vw, 6px);
  }
  html.gsap .runway--loop .cause-ring { width: min(56vw, 190px); margin-top: 10px; }
}

/* Both caption stacks are a single grid cell: every caption sits in the same
   cell, so the box is exactly as tall as the tallest one at any width, no
   reserved height has to be guessed, and nothing below shifts when they swap.
   This overrides the absolute positioning site.css applies to .cap. */
.stat-band .stat-cap,
.cause-band .cause-cap { display: grid; }
html.gsap .stat-band .stat-cap > .cap,
html.reduced .stat-band .stat-cap > .cap,
html.gsap .cause-band .cause-cap > .cap,
html.reduced .cause-band .cause-cap > .cap {
  position: static;
  grid-area: 1 / 1;
}

/* No JS and reduced motion land on the finished state of both sequences: the
   real number, every dot settled, the ring warm with the prayers ignited, and
   only the last caption of each. No motion, no pinning, no runway height. */
html:not(.gsap) .cap1,
html:not(.gsap) .lcap1,
html:not(.gsap) .lcap2 { display: none; }
html.reduced .lcap3 { opacity: 1; }
/* site.css tints the dots for the DARK predawn band it ships; refresh.css
   repaints that band light sand, so the stat band re-states its own fills at a
   specificity that clears those rules in both static modes. */
html.reduced .stat-band .dot,
html:not(.gsap) .stat-band .dot {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
html.reduced .stat-band .dot--prayer,
html:not(.gsap) .stat-band .dot--prayer { background: var(--accent); }

/* Phone navigation: the same details-based hamburger the interior pages use, so
   Features, Meet Sabr, Reviews and FAQ stay reachable once .nav__links hides. */
.navmenu { display: none; position: relative; }
.navmenu > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid var(--bd);
  cursor: pointer;
  color: var(--ink);
}
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::marker { content: ""; }
.navmenu__bars {
  position: relative;
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.navmenu__bars::before,
.navmenu__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.navmenu__bars::before { top: -6px; }
.navmenu__bars::after { top: 6px; }
.navmenu[open] > summary { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.navmenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  display: grid;
  gap: 2px;
  min-width: 244px;
  padding: 8px;
  border-radius: 17px;
  border: 1px solid var(--bd);
  background: var(--bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.navmenu__panel a {
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-align: left;
}
.navmenu__panel a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.navmenu__rating { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }

/* =========================================================================
   STORE BADGES (the same lockup the homepage hero and finale use, so there is
   one download control across the whole site)
   ========================================================================= */
@media (max-width: 820px) {
  .navmenu { display: block; margin-left: 8px; }
}