@charset "utf-8";
/* ===========================================================================
   Nisaa homepages (/ and /ar). Loaded after site-2.css, on these two pages only.

   Versioned filename: /assets/ is served immutable for a year, so any edit here
   after a release ships under the next number (and the constant in
   tools/build-home.py moves with it). home-1 shipped 2026-10-01.

   The page is built for someone who just tapped a search ad on a phone: one
   promise, one install button, real screens, then detail. Device classes on
   <html> (is-ios / is-android / is-desktop, set by the inline script in
   tools/layout.py) decide which install unit shows.
   ========================================================================= */

/* Arabic body copy reads better in the system face (SF Arabic on iPhone) than
   in Naskh at paragraph sizes; headings keep Amiri via site-2.css. */
html[lang="ar"] { font-family: var(--ui); }
html[lang="ar"] .review blockquote,
html[lang="ar"] .faq summary,
html[lang="ar"] .feat h3 { font-family: var(--arabic); }

.btn--coral {
  background: #b4524e;
  color: #fff;
  box-shadow: 0 6px 18px rgba(180, 82, 78, .28);
}
@media (prefers-color-scheme: dark) {
  .btn--coral { background: #e8908c; color: #1a1411; box-shadow: none; }
}

.home .band { padding-block: clamp(2.75rem, 6vw, 4.75rem); }

.home__head { max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.home__head .lede { margin-top: 1.1rem; }
.home__more { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Hero ------------------------------------------------------------------- */

.hx { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem); overflow: hidden; }

.hx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hx h1 { margin-bottom: .9rem; }
html[lang="en"] .hx h1 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); }
html[lang="ar"] .hx h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.45; }

.hx__lede { margin-bottom: 1.6rem; }

/* Social proof as a label above the headline, the way Flo leads with its
   ratings line: it tells the visitor this is worth reading before the pitch. */
.hx__trusted {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .9rem;
  padding-block: .25rem;
  padding-inline: .3rem .85rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
/* Three overlapping headshots, the same faces as the App Store hero
   screenshot's "Trusted by" row. */
.hx__faces { display: inline-flex; flex: none; }
.hx__faces img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--paper);
}
.hx__faces img + img { margin-inline-start: -.5rem; }

/* Two real phones: home in front, fasting behind (desktop only). The whole
   stack fades out at the hem instead of showing a cut-off phone. */
.hx__art {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  max-height: 460px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  padding-top: .5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.hx__art::before {
  content: '';
  position: absolute;
  inset: 6% 0 10%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(238, 159, 128, .34), transparent 70%),
    radial-gradient(70% 60% at 40% 70%, rgba(213, 160, 168, .28), transparent 72%);
  filter: blur(30px);
}

.hx__phone {
  position: relative;
  width: 300px;
  max-width: 78%;
  border-radius: 17% 17% 0 0 / 10.5% 10.5% 0 0;
  box-shadow: 0 30px 60px rgba(43, 43, 43, .18), 0 6px 16px rgba(43, 43, 43, .08);
}
.hx__phone img { width: 100%; }

.hx__phone--back {
  position: absolute;
  inset-inline-start: 0;
  top: 12%;
  width: 260px;
  max-width: 64%;
  rotate: -7deg;
  opacity: .96;
}
[dir="rtl"] .hx__phone--back { rotate: 7deg; }

@media (prefers-color-scheme: dark) {
  /* A black bezel on a near-black page needs a rim to read as an object. */
  .hx__phone {
    box-shadow: 0 0 0 1px rgba(243, 239, 234, .16), 0 30px 60px rgba(0, 0, 0, .55);
  }
}

@media (max-width: 900px) {
  .hx__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hx__copy { text-align: center; }
  .hx__copy .get { justify-content: center; }
  .hx__lede { margin-inline: auto; }
  .hx__art {
    width: min(100%, 360px);
    height: 400px;
    justify-content: center;
    padding-top: .5rem;
  }
  .hx__phone { width: 250px; }
  .hx__phone--back { display: none; }
}

/* Hero motion -------------------------------------------------------------
   Off for visitors who ask for reduced motion: the subheading's last word
   cycles (home-*.js), and the hero glides in on load while the front phone
   floats very slightly. The phone screens stay put by Ahmad's call. */

.rot { display: inline-block; color: var(--coral-ink); font-weight: 600; }
.rot b { display: inline-block; font-weight: inherit; }
.rot b.is-out { animation: rot-out .3s var(--ease) forwards; }
.rot b.is-in { animation: rot-in .45s var(--ease) both; }
@keyframes rot-out { to { opacity: 0; transform: translateY(-.4em); filter: blur(3px); } }
@keyframes rot-in { from { opacity: 0; transform: translateY(.4em); filter: blur(3px); } }

@media (prefers-reduced-motion: no-preference) {
  .js .hx__copy > * { animation: hx-rise .65s var(--ease) both; }
  .js .hx__copy > :nth-child(2) { animation-delay: .07s; }
  .js .hx__copy > :nth-child(3) { animation-delay: .14s; }
  .js .hx__copy > :nth-child(4) { animation-delay: .21s; }
  .js .hx__art { animation: hx-art .9s var(--ease) .12s both; }
  .js .hx__phone--front { animation: hx-float 6s ease-in-out 1.2s infinite; }
}
@keyframes hx-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hx-art { from { opacity: 0; transform: translateY(28px) scale(.985); } }
@keyframes hx-float { 50% { transform: translateY(-8px); } }

/* Install unit ------------------------------------------------------------ */

.get { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

.get__ios { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.hx .get__ios .appstore img, .final .get__ios .appstore img { width: 180px; }
.get__note { margin: 0; font-size: .85rem; color: var(--ink-3); }

.get__android { display: none; width: 100%; max-width: 30rem; }
.get__msg { font-size: .95rem; color: var(--ink-2); margin-bottom: .8rem; }
.get__row { display: flex; gap: .5rem; }
.get__row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .8rem 1rem;
  font: inherit;
  font-size: 1rem;           /* 16px+ stops iOS zooming into the field */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
}
.get__row input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.get__row .btn { flex: none; }
.get__status { margin: .6rem 0 0; font-size: .88rem; min-height: 1.2em; color: var(--ink-2); }
.get__status[data-state="ok"] { color: var(--green-ink); }
.get__status[data-state="err"] { color: var(--coral-ink); }
.get__android.is-done .get__row { display: none; }

.get__qr {
  display: none;
  align-items: center;
  gap: .9rem;
  max-width: 17rem;
  padding: .6rem .9rem .6rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.get__qr p { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-2); text-align: start; }
.get__code { flex: none; width: 88px; height: 88px; padding: 4px; background: #fff; border-radius: 8px; }
.get__code canvas, .get__code img { width: 80px !important; height: 80px !important; }

.is-android .get__ios { display: none; }
.is-android .get__android { display: block; }
.is-desktop .get__qr.is-ready { display: flex; }

@media (max-width: 900px) {
  .hx .get__ios { align-items: center; }
  .hx .get__android { margin-inline: auto; }
}
@media (max-width: 420px) {
  .get__row { flex-direction: column; }
}

/* Features ----------------------------------------------------------------- */

.feats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.feat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.3rem;
  scroll-margin-top: 6rem;
}
.feat svg {
  width: 2.5rem;
  height: 2.5rem;
  padding: .55rem;
  margin-bottom: .9rem;
  border-radius: 50%;
  color: var(--coral-ink);
  background: color-mix(in srgb, var(--coral) 16%, transparent);
}
.feat h3 { font-size: 1.28rem; margin-bottom: .45rem; }
.feat p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
html[lang="ar"] .feat p { line-height: 1.8; }

@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .feats { grid-template-columns: 1fr; gap: .75rem; }
  .feat { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.1rem; }
  .feat svg { grid-row: span 2; margin: 0; }
  .feat h3 { font-size: 1.15rem; margin-bottom: .25rem; }
}

/* Reviews + mid CTA -------------------------------------------------------- */

.home .reviews { margin-top: 0; }
.reviews__note { margin: .75rem 0 0; font-size: .85rem; color: var(--ink-3); }
html[lang="ar"] .review blockquote { font-size: 1.12rem; line-height: 1.8; }

.mid {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.mid h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
@media (max-width: 700px) {
  .mid { flex-direction: column; align-items: flex-start; }
}

/* FAQ tweak: RTL answers pad on the other side. */
[dir="rtl"] .faq .faq__a { padding: 0 0 1.35rem 2.5rem; }

/* Closing CTA -------------------------------------------------------------- */

.final { text-align: center; }
.final__mark {
  font-family: var(--arabic);
  font-size: 1.35rem;
  color: var(--coral-ink);
  margin: 0 0 .4rem;
}
.final h2 { max-width: 20ch; margin-inline: auto; }
.final .lede { margin: 1.1rem auto 1.75rem; }
.final .get { justify-content: center; }
.final .get__ios { align-items: center; }
.final .get__android { margin-inline: auto; text-align: start; }

/* Sticky install bar (phones only) ----------------------------------------- */

.sticky { display: none; }

@media (max-width: 760px) {
  .sticky {
    position: fixed;
    inset-inline: .6rem;
    bottom: calc(.6rem + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .55rem .55rem .7rem;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    transform: translateY(calc(100% + 1.5rem));
    transition: transform .35s var(--ease);
  }
  .sticky.is-shown { transform: none; }
  .sticky img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
  .sticky p { margin: 0; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .sticky b { font-size: .95rem; }
  .sticky span { font-size: .78rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky .btn { margin-inline-start: auto; padding: .7rem 1.05rem; font-size: .92rem; white-space: nowrap; }
  .sticky__android { display: none; }
  .is-android .sticky__ios { display: none; }
  .is-android .sticky__android { display: inline-flex; }

  /* Keep the footer's last line clear of the bar. */
  .home ~ .foot { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky { transition: none; }
}