/* Homepage "3 steps" (2026-10-19): real app screens in a plain phone frame, one step per row,
   sides alternating, a faint oversized numeral in the row's corner (the jugad.app pattern).
   Loaded by the 5 locale homepages after nk.css + film.css; its own classes (nk-how__*) so the
   nk.css .nk-steps/.nk-step rules never apply. Logical properties only: /ar/ mirrors by itself. */

.nk-how { list-style: none; margin: 0; padding: 0; }
@supports (overflow: clip) { .nk-how { overflow-x: clip; } }

.nk-how__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "media copy";
  align-items: center;
  column-gap: clamp(32px, 5vw, 80px);
  padding-block: clamp(48px, 7vw, 96px);
}
.nk-how__row:first-child { padding-top: clamp(16px, 3vw, 40px); }
.nk-how__row:nth-child(even) { grid-template-areas: "copy media"; }

/* The numeral: paper-coloured ink, behind everything, in the copy column's top corner. Its box
   never leaves the row (no negative inset), so it cannot widen the page. */
.nk-how__ghost {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 0;
  font: 700 clamp(6rem, 14vw, 11rem)/1 var(--f-display);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--rule);
  color: color-mix(in srgb, var(--ink) 7%, transparent);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.nk-how__row:nth-child(even) .nk-how__ghost { inset-inline-end: auto; inset-inline-start: 0; }
/* The digits live in data-n, drawn here: a decorative 1.15:1 numeral as real text fails the
   colour-contrast audit even under aria-hidden; generated content is not a text node. */
.nk-how__ghost::before { content: attr(data-n); }

.nk-how__media { grid-area: media; position: relative; z-index: 1; display: flex; justify-content: center; }
.nk-how__copy { grid-area: copy; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; max-width: 32em; }

/* Phone: CSS only. Ink bezel, matching inner radius, one soft shadow, a small island at the top.
   The image owns the aspect ratio (1290:2796 capture) so the slot is reserved before it loads. */
.nk-how__phone {
  --bezel: 10px;
  --r: 44px;
  position: relative;
  width: min(100%, 320px);
  padding: var(--bezel);
  border-radius: var(--r);
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(17, 17, 17, .18), 0 28px 48px -20px rgba(17, 17, 17, .32);
}
.nk-how__phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1290 / 2796;
  object-fit: cover;
  border-radius: calc(var(--r) - var(--bezel));
  background: var(--bg);
}
/* The captures carry no status bar (the app header starts at y=0), so the island is a slim pill
   that sits above the header line instead of a full-height one that would cover the wordmark. */
.nk-how__phone::after {
  content: "";
  position: absolute;
  top: calc(var(--bezel) + .8%);
  left: 50%;
  transform: translateX(-50%);
  width: 24%;
  height: 1.3%;
  border-radius: 999px;
  background: var(--ink);
}

/* Copy: small numbered eyebrow with a 48 px rule, big display heading, one measured paragraph. */
.nk-how__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 600 1rem/1 var(--f-display);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--t2);
}
.nk-how__eyebrow::after { content: ""; flex: none; width: 48px; height: 1px; background: var(--t2); }
.nk-how__title {
  margin: 0;
  font: 700 clamp(1.75rem, 3.5vw, 2.75rem)/1.05 var(--f-display);
  letter-spacing: -.03em;
  color: var(--t1);
  text-wrap: balance;
}
.nk-how__text { margin: 0; font: 400 1.05rem/1.6 var(--f-body); color: var(--t2); max-width: var(--measure); }

html[dir="rtl"] .nk-how__title { letter-spacing: 0; line-height: 1.2; }
html[dir="rtl"] .nk-how__ghost { letter-spacing: 0; }

/* Under 1024 px: one column, phone first and smaller, copy under it. The numeral keeps the row's
   top corner and the row reserves its height, so it sits above the centred phone, never behind it. */
@media (max-width: 1023px) {
  .nk-how__row, .nk-how__row:nth-child(even) {
    --ghost: clamp(4rem, 18vw, 6rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "copy";
    row-gap: 28px;
    padding-block: calc(var(--ghost) * .95) 48px;
  }
  .nk-how__row:first-child { padding-top: calc(var(--ghost) * .95); }
  .nk-how__row:nth-child(even) .nk-how__ghost { inset-inline-start: auto; inset-inline-end: 0; }
  .nk-how__ghost { font-size: var(--ghost); }
  .nk-how__phone { --bezel: 8px; --r: 36px; width: min(100%, 240px); }
  .nk-how__copy { max-width: none; gap: 14px; }
  .nk-how__text { font-size: 1rem; }
}

/* App screens DRAWN IN HTML inside the phone frame (city pages: real city data;
   homepages + city fallback: general example). Scaled by the phone width via
   container units, with a px fallback for browsers without them. Moved here from
   the city-page template on 2026-10-19 so homepages and city pages share it. */
.nk-how__phone{container-type:inline-size}
.nk-app{position:relative;display:flex;flex-direction:column;aspect-ratio:1290/2796;overflow:hidden;border-radius:calc(var(--r) - var(--bezel));background:#f2f3f5;color:#111;font:500 9.4px/1.3 var(--f-body);font-size:4.2cqw;text-align:start}
@media (min-width:1024px){.nk-app{font-size:12.6px;font-size:4.2cqw}}
.nk-app svg{width:1.3em;height:1.3em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nk-app b{font-weight:800}
.nk-app-bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:2.4em 1em .7em;background:#fff}
.nk-app-brand{font-weight:800;font-size:1.1em;letter-spacing:-.01em}
.nk-app-city{display:inline-flex;align-items:center;gap:.25em;padding:.25em .6em;border:1.5px solid #c9dc8e;border-radius:1em;background:#eef3df;color:#3f5c00;font-weight:700;font-size:.82em}
.nk-app-city svg{width:1.05em;height:1.05em}
.nk-app-bar--title{justify-content:flex-start;gap:1.1em}.nk-app-bar--title b{font-size:1.1em}
.nk-app-chips{display:flex;gap:.35em;padding:.6em 1em .1em}
.nk-app-chip{display:inline-flex;align-items:center;gap:.25em;padding:.3em .65em;border:1.5px solid #111;border-radius:.55em;font-weight:700;font-size:.78em;white-space:nowrap;background:#fff}
.nk-app-chip svg{width:1em;height:1em}
.nk-app-chip.is-on{background:#1d9bd7;border-color:#1d9bd7;color:#fff}
.nk-app-h{padding:.8em 1em 0;font-weight:800;font-size:1.3em;letter-spacing:-.01em}
.nk-app-sub{padding:.15em 1.25em .4em;color:#5b6168;font-size:.82em}
.nk-app-label{padding:.7em 1.25em .3em;color:#5b6168;font-size:.82em}
.nk-app-card{margin:.45em 1em;padding:.85em .95em;border-radius:.9em;background:linear-gradient(155deg,#2c362c,#121512);color:#fff;display:flex;flex-direction:column;gap:.35em}
.nk-app-card b{text-transform:uppercase;font-size:.92em}
.nk-app-meta{display:flex;align-items:center;gap:.35em;font-size:.76em;color:#d7ddd4}
.nk-app-meta svg{width:1.1em;height:1.1em;color:#5ab3e8}
.nk-app-row{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.nk-app-card .nk-app-row{margin-top:.25em}
.nk-app-count{color:#b9ef2a;font-weight:800;font-size:.78em}
.nk-app-btn{display:inline-block;background:#d7f33a;color:#111;font-weight:800;border-radius:1em;padding:.32em .8em;font-size:.76em;white-space:nowrap}
.nk-app-btn.is-muted{background:#3b423b;color:#cfd6cc}
.nk-app-empty{margin:.6em 1em;padding:1.4em 1em;border-radius:.9em;background:#fff;display:flex;flex-direction:column;align-items:center;gap:.5em;text-align:center}
.nk-app-empty svg{width:2em;height:2em;color:#5d7a00}
.nk-app-empty b{font-size:.95em}.nk-app-empty span{font-size:.8em;color:#5b6168}.nk-app-empty .nk-app-btn{color:#111;margin-top:.3em}
.nk-app-fab{position:absolute;inset-inline-end:1em;bottom:4.6em;width:2.6em;height:2.6em;border-radius:.8em;background:#5d7a00;color:#fff;display:grid;place-items:center}
.nk-app-nav{margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:.7em .4em 1.3em;background:#fff;border-top:1px solid #e4e6e9;color:#6b7178}
.nk-app-nav .is-on{display:grid;place-items:center;padding:.3em 1.2em;border-radius:1em;background:#eef0ea;color:#5d7a00}
.nk-app-hero{padding:2.6em 1em 1em;background:linear-gradient(160deg,#2f3d2f,#0f130f);color:#fff;display:flex;flex-direction:column;gap:.45em}
.nk-app-hero b{font-size:1.15em}
.nk-app-pill{display:inline-flex;align-items:center;gap:.35em;align-self:flex-start;background:#d7f33a;color:#111;font-weight:800;font-size:.76em;padding:.3em .7em;border-radius:1em}
.nk-app-pill svg{width:1.05em;height:1.05em}
.nk-app-tabs{display:flex;background:#fff;border-bottom:1px solid #e4e6e9}
.nk-app-tabs span{flex:1;text-align:center;padding:.75em 0;font-weight:800;font-size:.76em;color:#6b7178}
.nk-app-tabs .is-on{color:#5d7a00;box-shadow:inset 0 -2px #5d7a00}
.nk-app-tiles{display:flex;gap:.5em;padding:.8em 1em}
.nk-app-tiles span{flex:1;background:#fff;border-radius:.7em;padding:.8em .4em;text-align:center;font-weight:800;font-size:.8em;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.nk-app-roster{margin:.2em 1em;padding:.9em 1em;border-radius:.9em;background:#1b2027;color:#fff;display:flex;flex-direction:column;gap:.55em}
.nk-app-roster b{font-size:.95em}
.nk-app-lime{color:#c4f02e;font-weight:800;font-size:.78em}
b.nk-app-lime{font-size:1em}
.nk-app-plist{display:flex;flex-direction:column;gap:.7em;margin-top:.35em}
.nk-app-prow{display:flex;align-items:center;gap:.6em;font-style:normal}
.nk-app-prow b{width:1.7em;height:1.7em;border-radius:50%;background:#c4f02e;opacity:.9;flex:none}
.nk-app-prow span{height:.75em;border-radius:1em;background:#4a525d;filter:blur(1.5px)}
.nk-app-bar2{display:block;height:.35em;border-radius:1em;background:#3a414b;overflow:hidden}
.nk-app-bar2 i{display:block;height:100%;background:#c4f02e}
.nk-app-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.8em 1em 1.4em;background:#fff;border-top:1px solid #e4e6e9}
.nk-app-foot b{display:block;font-size:.95em}.nk-app-foot small{display:block;font-size:.72em;color:#5b6168}
.nk-app-cta{background:#111;color:#c4f02e;font-weight:800;border-radius:.7em;padding:.75em 1.6em;font-size:.85em}
.nk-app-cta.is-muted{background:#d9dcdf;color:#5b6168}
.nk-app-prog{display:block;margin:.6em 1em 0;height:.3em;border-radius:1em;background:#dfe2e6;overflow:hidden}
.nk-app-prog i{display:block;width:25%;height:100%;background:#5d7a00}
.nk-app-select{display:flex;align-items:center;justify-content:space-between;margin:0 1em;padding:.75em .9em;background:#fff;border:1px solid #dfe2e6;border-radius:.8em;font-size:.9em}
.nk-app-court{position:relative;margin:.35em 1em;padding-block:.75em;padding-inline:.9em 2.6em;background:#fff;border:1.5px solid #111;border-radius:.8em;display:flex;flex-direction:column;gap:.4em}
.nk-app-court b{font-size:.85em}
.nk-app-court.is-more{border-style:dashed;border-color:#9aa0a6;color:#5b6168;font-size:.8em;padding-inline-end:.9em}
.nk-app-tags{display:flex;flex-wrap:wrap;gap:.35em;align-items:center}
.nk-app-tag{font-weight:800;font-size:.68em;padding:.2em .5em;border-radius:.35em}
.nk-app-tag.is-lime{background:#d7f33a;color:#111}.nk-app-tag.is-green{background:#3d9a4a;color:#fff}
.nk-app-star{font-weight:800;font-size:.72em;color:#8a6d00}
.nk-app-radio{position:absolute;inset-inline-end:.8em;top:50%;width:1.3em;height:1.3em;margin-top:-.65em;border:1.5px solid #111;border-radius:50%}
.nk-app-next{margin:auto 1em 1.4em;display:block;text-align:center;background:#111;color:#c4f02e;font-weight:800;border-radius:.8em;padding:.8em;font-size:.9em}
.nk-app-notif{display:flex;gap:.7em;padding:.9em 1em;background:#fff;border-bottom:1px solid #eceef0}
.nk-app-nicon{width:2.3em;height:2.3em;border-radius:50%;background:#eef3df;color:#5d7a00;display:grid;place-items:center;flex:none}
.nk-app-nicon svg{width:1.2em;height:1.2em}
.nk-app-ntxt{display:flex;flex-direction:column;gap:.2em;min-width:0}
.nk-app-ntxt b{font-size:.86em;line-height:1.25}
.nk-app-ntxt span{font-size:.78em;color:#41464c}
.nk-app-ntxt small{font-size:.7em;color:#6b7178}
.nk-app-bar--title svg{color:#111}
.nk-app-mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em;padding:.8em 1em .1em}
.nk-app-mtxt{display:flex;flex-direction:column;gap:.15em;min-width:0}
.nk-app-mtxt b{font-size:1.3em;letter-spacing:-.01em;line-height:1.15}
.nk-app-mtxt span{color:#5b6168;font-size:.8em}
.nk-app-list{display:inline-flex;align-items:center;gap:.3em;margin-top:.3em;font-weight:800;font-size:.85em;white-space:nowrap}
.nk-app-map{position:relative;flex:1;margin-top:.55em;overflow:hidden;background:#f2efe9}
.nk-app-map>svg.nk-app-mtiles{position:absolute;inset:0;width:100%;height:100%;stroke:none}
.nk-app-mpin{position:absolute;width:1.9em;height:1.9em;transform:translate(-50%,-100%);color:#111}
.nk-app-mpin svg{width:100%;height:100%;fill:currentColor;stroke:none}
.nk-app-mpin.is-own{color:#7b1fa2;filter:drop-shadow(0 0 1.5px #0a0f1a)}
.nk-app-mpin.is-sel{width:2.5em;height:2.5em;z-index:1}
.nk-app-zoom{position:absolute;top:.7em;right:.7em;display:flex;flex-direction:column;gap:.55em;padding:.55em .45em;background:#fff;border-radius:.5em;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.nk-app-zoom svg{width:1.15em;height:1.15em}
.nk-app-msheet{position:absolute;inset-inline:.8em;bottom:.8em;z-index:2;display:flex;flex-direction:column;gap:.45em;padding:.8em .9em;background:#fff;border-radius:.9em;box-shadow:0 .3em 1em rgba(0,0,0,.2)}
.nk-app-msheet b{font-size:.9em}
.nk-app-suggest{position:absolute;inset-inline-end:.8em;bottom:.9em;z-index:2;display:inline-flex;align-items:center;gap:.4em;padding:.75em 1em;background:#5d7a00;color:#fff;font-weight:800;font-size:.82em;border-radius:.9em;box-shadow:0 .2em .7em rgba(0,0,0,.2)}
.nk-app-behind{position:relative;flex:1;display:flex;flex-direction:column;overflow:hidden}
.nk-app-behind::after{content:"";position:absolute;inset:0;background:rgba(17,20,24,.5)}
.nk-app-sheet{position:absolute;inset-inline:0;top:45%;bottom:0;z-index:2;display:flex;flex-direction:column;background:#fff;border-radius:1.5em 1.5em 0 0;overflow:hidden;box-shadow:0 -.3em 1.2em rgba(0,0,0,.18)}
.nk-app-handle{display:block;flex:none;width:2.6em;height:.28em;margin:.6em auto .25em;border-radius:1em;background:#cfd2d6}
.nk-app-shead{display:flex;align-items:center;gap:.6em;padding:.45em 1em .75em;border-bottom:1px solid #e4e6e9}
.nk-app-shead b{flex:1;font-size:1.15em}
.nk-app-clear{display:inline-flex;align-items:center;gap:.3em;color:#5d7a00;font-weight:700;font-size:.8em;white-space:nowrap}
.nk-app-clear svg{width:1.15em;height:1.15em}
.nk-app-sheet .nk-app-notif{flex:none;border-bottom:0;position:relative}
.nk-app-sheet .nk-app-notif+.nk-app-notif::before{content:"";position:absolute;top:0;inset-inline:4em 0;border-top:1px solid #eceef0}

/* Reviews band: real 5-star App Store reviews, verbatim (city pages since 2026-10-19, homepages
   since 2026-10-22). Moved here from the city template's inline <style>; both load this file. */
.nk-revband{margin:64px 0 0;padding:56px var(--pad) 64px;background:var(--dark-bg,#111);color:#fff}
.nk-revband--home{margin:var(--sec-gap,64px) 0 0;padding:80px var(--pad)}
.nk-revband h2{margin:0 0 36px;font:700 clamp(1.5rem,2.4vw,2rem)/1.1 var(--f-display);letter-spacing:-.02em;color:#fff}
.nk-revgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 48px}
.nk-rev{display:flex;flex-direction:column;gap:14px;padding-inline-start:22px;border-inline-start:2px solid rgba(255,255,255,.85)}
.nk-rev blockquote{margin:0 0 auto;font:500 1.05rem/1.6 var(--f-body);color:#fff;quotes:"\201C" "\201D"}
.nk-rev blockquote::before{content:open-quote}.nk-rev blockquote::after{content:close-quote}
html[lang="fr"] .nk-rev blockquote,html[lang="it"] .nk-rev blockquote{quotes:"\00AB\00A0" "\00A0\00BB"}
html[lang="ar"] .nk-rev blockquote{quotes:"\00AB" "\00BB"}
html[lang="de"] .nk-rev blockquote{quotes:"\201E" "\201C"}
.nk-rev-stars{margin-top:10px;color:#fff;letter-spacing:3px;font-size:.95rem;line-height:1}
.nk-rev-by{display:flex;flex-direction:column;gap:3px}
.nk-rev-by b{font:700 1rem/1.3 var(--f-body);color:#fff}
.nk-rev-by span{font:500 .85rem/1.3 var(--f-body);color:var(--dark-body,#a2a39a)}
html[dir="rtl"] .nk-rev-stars{letter-spacing:0}
@media (max-width:767px){.nk-revgrid{grid-template-columns:1fr;gap:28px}.nk-revband{padding:44px var(--pad) 48px}.nk-revband--home{padding:80px var(--pad)}}