/* =========================================================================
   HERO, FINALE + FOOTER (the approved Hero C and Finale).
   Loaded after shared Nav C and other shared stylesheets, so these rules
   win over the older .hero-hook / .finale / .foot rules.
   Colours follow the sky engine's variables (--ink, --accent, --cta), which
   are exactly the design's #4E2C16 / #AD5B0C at predawn and cream / #F2BB67
   at night.
   ========================================================================= */

/* The fixed landscape band (scenery.css), mirrored here so the footer can
   sit in the near dune at the finale. Keep these three in step with
   .landscape in scenery.css. */
:root {
  --pp-land: clamp(180px, 29vh, 350px);
  /* how far the near dune has risen at the end of the page (site.js lifts it
     64px over the whole scroll); no lift without the engine */
  --pp-lift: 0px;
  /* crest of the near dune at the page's middle column, measured from the
     bottom of the screen (dunes-near.svg crests 40.7% down the band) */
  --pp-foot: calc(0.593 * var(--pp-land) + var(--pp-lift));
}
@media (max-height: 620px) {
  :root { --pp-land: clamp(96px, 26vh, 160px); }
}
@media (max-width: 700px) {
  :root { --pp-land: clamp(110px, 16vh, 160px); }
}
html.gsap { --pp-lift: 64px; }

/* =========================================================================
   HERO (Hero C): "Scroll less." left, the whole Home phone standing in front
   of the dunes in the middle, "Pray on time." in the accent on the right
   with the category line and the two badges under it. One H1 carries both
   beats.
   ========================================================================= */
.hero-c {
  position: relative;
  max-width: none;
  margin: 0;
  text-align: left;
}
.hero-c .hero-c__head {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: wrap;
  color: var(--ink);
  animation: none;
}
.hero-c__beat { display: block; }
.hero-c__beat--b { color: var(--accent); }
.hero-c .hero-c__sub {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink);
}
.hero-c__phone { position: relative; }
.hero-c__frame {
  position: relative;
  box-sizing: border-box;
  border: 7px solid #281D15;
  border-radius: 42px;
  background: #281D15;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(30, 10, 3, 0.6);
}
.hero-c__frame > img { display: block; width: 100%; height: auto; border-radius: 32px; }

/* Home's fixed 393-wide illustration, ending before the score. Every prop
   uses the app's coordinates; the screenshot below keeps all real controls. */
.hero-c__live {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 393 / 370;
  /* Clip decorative overflow without a scrollable box around the button. */
  overflow: clip;
  /* The ground's antialiased lower edge must blend into sand, not sky. */
  background: linear-gradient(to bottom, #EFD0C1 0 85%, #332519 85% 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-c__live.is-ready { opacity: 1; visibility: visible; }
.hero-c__live > img,
.hero-c__live > svg,
.hero-c__live > div,
.hero-c__live > button {
  position: absolute;
  display: block;
  border-radius: 0;
}
.hero-c__ground,
.hero-c__wordmark { inset: 0; width: 100%; height: 100%; }
.hero-c__wordmark { font-family: var(--display); }
.hero-c__plate { left: 0; top: 29.189189%; width: 100%; height: 70.810811%; }
.hero-c__oasis { left: 3.180662%; top: 55.891892%; width: 21.374046%; height: 18.918919%; }
.hero-c__tent { left: 63.664122%; top: 57.702703%; width: 22.461323%; height: 13.675676%; }
.hero-c__live > .hero-c__shadow { left: 28.244275%; top: 88.378378%; width: 53.94402%; height: 8.108108%; background: #241A12; border-radius: 50%; }
.hero-c__rocks--left { left: -11.195929%; top: 87.027027%; width: 28.684733%; height: 19.459459%; }
.hero-c__sabr {
  left: 18.822364%; top: 41.114086%; width: 63.298109%; height: 54.187676%;
  padding: 0; border: 0; appearance: none; background: none;
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hero-c__sabr:disabled { pointer-events: none; cursor: default; }
.hero-c__sabr:focus-visible { outline: 2px solid #F8ECCF; outline-offset: 3px; }
.hero-c__morph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-c__morph.is-under { opacity: 0; }
.hero-c__palm { left: 75.454389%; top: 35.675676%; width: 39.589695%; height: 60.810811%; }
.hero-c__rocks--right { left: 89.56743%; top: 93.513514%; width: 14.342366%; height: 9.72973%; transform: scaleX(-1); }
.hero-c__grass { left: 83.969466%; top: 95.675676%; width: 11.549949%; height: 14.054054%; }
.hero-c__achievement { left: 88.938295%; top: 20.456081%; width: 5.695929%; height: 6.05%; object-fit: contain; }
.hero-c__live > .hero-c__chrome { left: 0; top: 0; width: 100%; height: auto; clip-path: url(#hero-phone-chrome); filter: url(#hero-phone-ink); }
.hero-c__clips { overflow: hidden; }

/* Same five lanes and travel times as SabrCloudLayer. The negative delays
   spread clouds across the sky on arrival; each wraps completely offscreen. */
.hero-c__cloud {
  left: calc(var(--cloud-width) / 393 * -100%);
  top: calc(var(--cloud-top) / 370 * 100%);
  width: calc(var(--cloud-width) / 393 * 100%);
  height: auto;
  opacity: var(--cloud-opacity, 1);
  animation: hero-cloud-drift var(--cloud-duration) linear infinite;
  animation-delay: var(--cloud-delay);
  animation-play-state: paused;
}
.hero-c__live.is-ready:not(.is-paused) .hero-c__cloud { animation-play-state: running; }
.hero-c__cloud--1 { --cloud-width: 78; --cloud-top: 9.6; --cloud-duration: 52s; --cloud-delay: -21s; --cloud-travel: 703.846154%; }
.hero-c__cloud--2 { --cloud-width: 44; --cloud-top: 66; --cloud-duration: 74s; --cloud-delay: -24s; --cloud-travel: 1093.181818%; }
.hero-c__cloud--3 { --cloud-width: 56; --cloud-top: 37.8; --cloud-duration: 63s; --cloud-delay: -57s; --cloud-travel: 901.785714%; }
.hero-c__cloud--4 { --cloud-width: 28; --cloud-top: 103; --cloud-duration: 112s; --cloud-delay: -4s; --cloud-travel: 1603.571429%; --cloud-opacity: 0.5; }
.hero-c__cloud--5 { --cloud-width: 22; --cloud-top: 124.2; --cloud-duration: 138s; --cloud-delay: -95s; --cloud-travel: 1986.363636%; --cloud-opacity: 0.45; }
@keyframes hero-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--cloud-travel)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-c__live.is-ready { opacity: 0; visibility: hidden; }
  .hero-c__cloud { animation: none; }
}

/* ---- store badges (hero and finale) ---- */
.hero-c .cta-pair,
.finale-c .cta-pair {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
}
.store-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  width: 182px;
  height: 52px;
  border-radius: 12px;
  background: #1B120B;
  color: #FFFFFF;
  font-family: var(--sans);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.store-badge:hover { transform: translateY(-2px); }
.store-badge svg { display: block; flex-shrink: 0; }
.store-badge__ico--apple { width: 21.4px; height: 27px; }
.store-badge__ico--play { width: 22.2px; height: 24px; }
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; text-align: left; }
.store-badge__top { font-size: 12px; font-weight: 600; }
.store-badge--play .store-badge__top { letter-spacing: 0.4px; }
.store-badge__name { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }

/* ---- desktop: three columns, scaled as one piece ----
   --u is one design pixel: 1px on the approved 1440x900 frame, smaller when
   the window is narrower or shorter, a little larger on big screens. The
   whole phone (709 design px tall) shows, centred in the screen under the
   nav, in front of the dunes. */
@media (min-width: 1000px) {
  .hero-c {
    --u: max(0.72px, min(1.2px, calc((100vw - 80px) / 1200), calc(100vh / 900)));
    --u: max(0.72px, min(1.2px, calc((100vw - 80px) / 1200), calc(100svh / 900)));
    --phone-h: calc(709 * var(--u));
    display: block;
    height: 100vh;
    height: 100svh;
    min-height: calc(112px + var(--phone-h));
    padding: 0;
  }
  .hero-c__stage {
    position: absolute;
    left: 0;
    right: 0;
    top: max(88px, calc(72px + (100vh - 72px - var(--phone-h)) / 2));
    top: max(88px, calc(72px + (100svh - 72px - var(--phone-h)) / 2));
    display: grid;
    grid-template-columns: calc(376 * var(--u)) calc(320 * var(--u)) calc(376 * var(--u));
    grid-template-rows: auto auto 1fr;
    column-gap: calc(64 * var(--u));
    justify-content: center;
  }
  .hero-c .hero-c__head {
    grid-column: 1 / 4;
    grid-row: 1;
    margin-top: calc(52 * var(--u));
    display: grid;
    grid-template-columns: calc(376 * var(--u)) calc(320 * var(--u)) calc(376 * var(--u));
    column-gap: calc(64 * var(--u));
    font-size: calc(80 * var(--u));
  }
  .hero-c__beat--a { grid-column: 1; text-align: right; }
  .hero-c__beat--b { grid-column: 3; text-align: left; }
  .hero-c__br { display: block; }
  .hero-c__side {
    grid-column: 3;
    grid-row: 2;
    margin-top: calc(24 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(40 * var(--u));
  }
  .hero-c .hero-c__sub { font-size: calc(34 * var(--u)); }
  .hero-c .cta-pair { justify-content: flex-start; }
  /* the pair may overhang the third column a little on short screens: 144px
     keeps the Google Play label clear of both badge edges */
  .hero-c .store-badge {
    width: max(144px, min(182px, calc((376 * var(--u) - 12px) / 2)));
    height: max(48px, calc(52 * var(--u)));
  }
  .hero-c__phone {
    grid-column: 2;
    grid-row: 1 / 4;
    width: calc(320 * var(--u));
  }
  .hero-c__frame { border-width: calc(7 * var(--u)); border-radius: calc(42 * var(--u)); }
  .hero-c__frame > img { border-radius: calc(32 * var(--u)); }
}
/* narrower desktops: the badge wording steps down with the column */
@media (min-width: 1000px) and (max-width: 1279px), (min-width: 1000px) and (max-height: 820px) {
  .hero-c .store-badge { gap: 8px; }
  .hero-c .store-badge__name { font-size: 19px; }
  .hero-c .store-badge__top { font-size: 11px; }
  .hero-c .store-badge__ico--apple { width: 18.2px; height: 23px; }
  .hero-c .store-badge__ico--play { width: 19.4px; height: 21px; }
}

/* ---- phones and tablets: one centred column, the whole phone under the
   badges ----
   --p is one design pixel of the 390x844 frame. It is the smaller of the
   width scale and a height scale worked back from the phone: everything from
   the top of the screen to the bottom of the phone is 114px of fixed size
   (padding, badges, frame border) plus 687 design px of scaled size, so
   (screen height - 146px) / 687 leaves the phone's bottom edge 32px clear of
   the bottom of the screen, on short phones as well as tall ones. */
@media (max-width: 999px) {
  .hero-c {
    --p: clamp(0.6px, min(calc(100vw / 390), calc((100vh - 146px) / 687)), 1.3px);
    --p: clamp(0.6px, min(calc(100vw / 390), calc((100svh - 146px) / 687)), 1.3px);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 80px 24px 0;
    text-align: center;
  }
  .hero-c__stage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .hero-c .hero-c__head { font-size: calc(46 * var(--p)); letter-spacing: -0.02em; }
  .hero-c__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: calc(28 * var(--p));
  }
  .hero-c .hero-c__sub { margin-top: calc(16 * var(--p)); font-size: calc(22 * var(--p)); }
  .hero-c__sub .hero-c__br { display: block; }
  .hero-c .cta-pair { width: 100%; max-width: 420px; margin-top: calc(24 * var(--p)); justify-content: center; }
  .hero-c .store-badge { flex: 1 1 0; min-width: 0; width: auto; max-width: 204px; height: 48px; gap: 9px; }
  .hero-c .store-badge__ico--apple { width: 19.8px; height: 25px; }
  .hero-c .store-badge__ico--play { width: 20.3px; height: 22px; }
  .hero-c .store-badge__top { font-size: 11px; }
  .hero-c .store-badge__name { font-size: 20px; }
  /* the whole phone, in front of the dunes, under the badges */
  .hero-c__phone {
    width: calc(220 * var(--p));
    margin-bottom: 48px;
  }
  .hero-c__frame { border-width: 6px; border-radius: calc(29 * var(--p)); }
  .hero-c__frame > img { border-radius: calc(22 * var(--p)); }
}
@media (max-width: 359px) {
  .hero-c { padding-inline: 16px; }
  .hero-c .cta-pair { gap: 8px; }
  .hero-c .store-badge { gap: 6px; }
  .hero-c .store-badge__name { font-size: 17px; }
  .hero-c .store-badge__top { font-size: 10px; }
}

/* =========================================================================
   FINALE: the two-beat close and the badges in the open night sky, and the
   footer written into the front dune below. The finale is the last frame of
   the page, so its size is worked back from the bottom of the screen: the
   footer is exactly as tall as the sand under the near dune's crest once the
   dunes have risen (--pp-foot), and the finale fills the sky above it with
   the close sitting a little above its middle.
   ========================================================================= */
.finale.finale-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--pp-foot));
  min-height: calc(100svh - var(--pp-foot));
  padding: 72px 24px 7vh;
  padding: 72px 24px 7svh;
  text-align: center;
}
.finale-c .finale-c__head {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: min(60px, 7.8vw);
  line-height: 1.04;
  letter-spacing: 0;
  text-align: center;
  text-wrap: wrap;
  color: var(--ink);
}
.finale-c__beat { display: block; }
.finale-c__beat--b { color: var(--accent); }
.finale-c .cta-pair { justify-content: center; margin: 48px 0 0; }
.finale-c .store-badge { border: 1px solid rgba(255, 245, 229, 0.28); }

.foot.foot-c {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: var(--pp-foot);
  padding: 0 24px 32px;
  background: none;
  border: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.foot-c .foot__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 16px;
  font-size: inherit;
}
.foot-c .foot__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.foot-c .foot__links a:hover { color: var(--ink); }
.foot-c .foot__legal {
  margin: 0;
  font-size: inherit;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.foot-c .foot__legal a {
  display: inline-block;
  padding: 14px 0;
  margin: -14px 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot-c .foot__legal a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .finale.finale-c { padding: 60px 24px 6svh; }
  .finale-c .finale-c__head { font-size: min(36px, 9.3vw); letter-spacing: -0.02em; }
  .finale-c__line { display: block; }
  .finale-c .cta-pair { width: 100%; max-width: 420px; margin: 32px 0 0; }
  .finale-c .store-badge { flex: 1 1 0; min-width: 0; width: auto; height: 48px; gap: 9px; }
  .finale-c .store-badge__ico--apple { width: 19.8px; height: 25px; }
  .finale-c .store-badge__ico--play { width: 20.3px; height: 22px; }
  .finale-c .store-badge__top { font-size: 11px; }
  .finale-c .store-badge__name { font-size: 20px; }
  .foot.foot-c { padding: 0 16px 36px; font-size: 13px; }
  .foot-c .foot__links { gap: 0; }
  .foot-c .foot__links a { padding: 0 clamp(6px, 2.3vw, 9px); }
}
@media (max-width: 359px) {
  .finale-c .cta-pair { gap: 8px; }
  .finale-c .store-badge { gap: 6px; }
  .finale-c .store-badge__name { font-size: 17px; }
  .finale-c .store-badge__top { font-size: 10px; }
}

/* Reduced motion paints the bands flat over the landscape, so the finale
   brings its own two dunes, with the footer written into the front one. */
html.reduced .foot.foot-c {
  --ink: #F8E7CD;
  overflow: hidden;
  background: #302116;
}
html.reduced .foot.foot-c::before,
html.reduced .foot.foot-c::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: -1;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}
html.reduced .foot.foot-c::before { top: 0; width: 142%; height: 200%; background: #3E2A1C; }
html.reduced .foot.foot-c::after { top: 40%; width: 156%; height: 200%; background: #21160D; }