@charset "utf-8";
/* ===========================================================================
   Answer pages on the conversion template (tools/build-answers.py,
   answer_page). Loaded after site-*.css and home-*.css, which supply the
   install unit (.get), the sticky bar and the coral button.

   Versioned filename: /assets/ is served immutable for a year, so any edit
   after a release ships under the next number with ANSWER_CSS updated to
   match (answer-1 shipped 2026-10-05).

   Order on the page: question, one install card, the full answer (always
   open), one closing install unit. Movement mirrors the homepage: glide-in,
   a floating phone, a rotating word, plus a reading progress bar.
   ========================================================================= */

.answer .wrap--narrow { max-width: 760px; }

/* Question -------------------------------------------------- */

.ans-head { padding-block: clamp(1.25rem, 4vw, 2.5rem) 0; }

.ans-head h1 {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: 1.4rem;
}
html[lang="ar"] .ans-head h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.5; }

/* Install card ------------------------------------------------------------- */

.ans-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: 1.35rem 1.35rem 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ans-cta__copy { padding-bottom: 1.35rem; align-self: center; }
.ans-cta__title {
  margin: 0 0 .4rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--ink);
}
html[lang="ar"] .ans-cta__title { font-family: var(--arabic); font-weight: 700; font-size: 1.3rem; line-height: 1.6; }
.ans-cta__line { margin: 0 0 1.1rem; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }

/* A peek of the real app: the top of the home screen, cut at the card edge.
   Clip the bottom only. The phone floats up a few pixels and rises in on
   load, so a plain overflow:hidden box sliced its top off mid-float. */
.ans-cta__phone { width: 132px; height: 190px; clip-path: inset(-80px -80px 0 -80px); }
.ans-cta__phone img {
  width: 132px;
  border-radius: 17% 17% 0 0 / 10.5% 10.5% 0 0;
  box-shadow: 0 10px 30px rgba(43, 43, 43, .16);
}
@media (prefers-color-scheme: dark) {
  .ans-cta__phone img { box-shadow: 0 0 0 1px rgba(243, 239, 234, .16), 0 10px 30px rgba(0, 0, 0, .5); }
}

.ans-cta .get { gap: .75rem 1rem; }
.ans-cta .get__qr { max-width: 15rem; }

@media (max-width: 520px) {
  .ans-cta { padding: 1.15rem 1.15rem 0; gap: .75rem; }
  .ans-cta__phone { width: 96px; height: 150px; }
  .ans-cta__phone img { width: 96px; }
  .ans-cta__title { font-size: 1.22rem; }
  html[lang="ar"] .ans-cta__title { font-size: 1.15rem; }
}

/* Full answer ---------------------------------------------------------------- */

.ans-body { padding-block: clamp(1.75rem, 4vw, 2.5rem) 0; }

/* Closing install unit ------------------------------------------------------ */

.ans-final {
  margin-top: 1.5rem;
  padding-block: 2rem clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.ans-final h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin-bottom: 1.25rem; }
.ans-final .get { justify-content: center; }
.ans-final .get__ios { align-items: center; }
.ans-final .get__android { margin-inline: auto; text-align: start; }

/* Movement ------------------------------------------------------------------
   hx-rise and hx-float come from home-*.css, so the answer pages move exactly
   like the homepage. Everything here is off for reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  .js .ans-head h1 { animation: hx-rise .6s var(--ease) both; }
  .js .ans-cta { animation: hx-rise .7s var(--ease) .1s both; }
  /* The phone rises into the card, then keeps breathing. */
  .js .ans-cta__phone img {
    animation: ans-phone-in .9s var(--ease) .35s both,
               hx-float 6s ease-in-out 1.6s infinite;
  }
}
@keyframes ans-phone-in { from { opacity: 0; transform: translateY(48px); } }

/* Reading progress: a coral hairline across the top that fills as she scrolls.
   Scroll-driven CSS, no script; browsers without it simply show nothing. */
.ans-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ans-progress {
      display: block;
      position: fixed;
      inset-inline: 0;
      top: 0;
      z-index: 60;
      height: 3px;
      background: var(--coral);
      transform-origin: left center;
      animation: ans-progress linear both;
      animation-timeline: scroll(root block);
    }
    [dir="rtl"] .ans-progress { transform-origin: right center; }
  }
}
@keyframes ans-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }