/* =========================================================
   The ATHAR app — page styles (group B)
   Simplified (Oct 2026): hero · four screens · download · next step · close.
   Builds on athar.css. Logical properties only, so Arabic mirrors.
   ========================================================= */

/* ---------- phone frame (real app screenshots, 390 × 844) ---------- */
.phone {
  position: relative; margin: 0;
  width: var(--w, 280px);
  padding: 2.6%;
  border-radius: 16% / 7.4%;
  background: #20261E;
  box-shadow: 0 30px 60px rgba(40, 30, 15, .22), 0 6px 16px rgba(40, 30, 15, .12), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.phone::before {
  content: ""; position: absolute; z-index: 2;
  top: 2.3%; inset-inline: 0; margin-inline: auto;
  width: 28%; height: 2.6%;
  border-radius: 999px; background: #20261E;
}
.phone .screen {
  width: 100%; aspect-ratio: 390 / 844; overflow: hidden;
  border-radius: 13.5% / 6.3%;
  /* shows while a screenshot loads, or if it fails */
  background: var(--athar-cream) url("/assets/logo/athar-mark-watermark.svg") center / 46% no-repeat;
}
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }

/* platform hints: .pill sets display, which would otherwise override [hidden] */
[data-when][hidden] { display: none !important; }

/* ---------- hero (shared .hero-grid / .hero-media contract) ---------- */
.app-hero-text .label { margin-block-end: 1.1rem; }
.app-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; }
.ios-line { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .9375rem; }
@media (min-width: 961px) {
  html[lang="ar"] .app-hero .display { max-width: none; }
  html[lang="ar"] .app-hero .display > span { white-space: nowrap; }
}

/* two phones on a dune panel, the fingerprint mostly cropped off its corner;
   the panel takes its height from .hero-media and the phones fit inside it */
.app-stage {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  border-radius: 36px;
  background: var(--athar-dune) url("/assets/logo/athar-mark-watermark.svg") 116% -12% / 44% no-repeat;
}
html[dir="rtl"] .app-stage { background-position: -16% -12%; }
.app-stage .phone { grid-area: 1 / 1; }
.app-stage .phone.front { --w: min(285px, 18vw, calc((100svh - var(--header-h) - 9rem) * .425)); transform: translate(-30%, 0); z-index: 1; }
.app-stage .phone.back { --w: min(240px, 15vw, calc((100svh - var(--header-h) - 9rem) * .36)); transform: translate(40%, -4%); }
html[dir="rtl"] .app-stage .phone.front { transform: translate(30%, 0); }
html[dir="rtl"] .app-stage .phone.back { transform: translate(-40%, -4%); }

@media (max-width: 960px) {
  .app-stage.hero-media { height: auto; aspect-ratio: auto; padding-block: 2.5rem; }
  .app-stage .phone.front { --w: min(46vw, 250px); }
  .app-stage .phone.back { --w: min(40vw, 220px); }
}
@media (max-width: 520px) {
  .app-hero-cta .btn { flex: 1 1 100%; }
  .app-stage .phone.back { display: none; }
  .app-stage .phone.front, html[dir="rtl"] .app-stage .phone.front { transform: none; }
}

/* ---------- inside the app: four screens in a row ---------- */
.screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.screens > li { display: grid; gap: .4rem; align-content: start; justify-items: center; text-align: center; }
.screens .phone { --w: min(100%, 250px); margin-block-end: 1.1rem; }
.screens h3 { font-weight: 800; color: var(--athar-green); font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.25; }
html[lang="ar"] .screens h3 { font-family: var(--font-arabic-display); font-weight: 700; line-height: 1.45; }
.screens p { color: var(--muted); max-width: 26ch; }
@media (max-width: 960px) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .screens .phone { --w: min(100%, 230px); }
}
@media (max-width: 420px) {
  .screens { column-gap: 1rem; }
  .screens .phone { margin-block-end: .75rem; }
  .screens p { font-size: .9375rem; }
}

/* ---------- download ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.dl-card { display: flex; flex-direction: column; gap: 1.25rem; }
.dl-card-head { display: flex; align-items: center; gap: 1rem; }
.dl-card-head > div { flex: 1; min-width: 0; }
.dl-card-head .h3 { color: var(--athar-brown); font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.dl-card-head .small { margin-top: .2rem; }
.this-phone { flex: none; }
.dl-card.mine { box-shadow: 0 0 0 2px var(--athar-green), var(--shadow-card); }
.dl-card .btn.block { margin-top: auto; }
.install-tip { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted); font-size: .9375rem; }
.install-tip .ms { color: var(--athar-brown); font-size: 1.25rem; margin-top: .05em; }
.ios-copy { color: var(--athar-ink); font-size: 1.0625rem; }
/* the next step closes the download section (no second cream section, no double rule) */
.dl-next { margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 760px) {
  .dl-grid { grid-template-columns: 1fr; }
}

/* ---------- Arabic secondary text: larger and looser ---------- */
html[lang="ar"] :is(.screens p, .install-tip) { font-size: 1.0625rem; line-height: 1.8; }