/* /app/ «دانلود اپلیکیشن اسپیکینو» (templates/core/app.html). The iPhone guide's screens are drawn here (no screenshots,
   no other brand's artwork): a phone frame, Safari's bottom bar with the Share button, the share sheet row, the Home
   Screen with our icon. They are decoration (aria-hidden); the steps' text carries the instructions. */
.apppg { display: grid; gap: 36px; max-inline-size: 64rem; }
.apppg-head { display: flex; gap: 18px; align-items: center; }
.apppg-head h1 { font-size: var(--fs-h1); margin: 0 0 6px; }
.apppg-head .lead { margin: 0; color: var(--ink-2); max-inline-size: 60ch; line-height: 1.8; }
.apppg-icon { display: grid; place-items: center; inline-size: 76px; block-size: 76px; flex: none; border-radius: 18px; background: var(--card);
  box-shadow: var(--e1), inset 0 0 0 0.5px var(--sep); }
.apppg-icon .brand-mark { inline-size: 54px; block-size: 54px; }
@media (max-width: 560px) { .apppg-head { flex-direction: column; align-items: flex-start; } .apppg-icon { inline-size: 64px; block-size: 64px; } }

.apppg-get { display: grid; gap: 24px; align-items: center; padding: 22px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e1); }
.apppg-get-in { display: grid; gap: 10px; }
.apppg-get-in p { margin: 0; }
.apppg-qr { display: flex; gap: 16px; align-items: center; }
.apppg-qr .qr { inline-size: 132px; block-size: 132px; flex: none; box-shadow: inset 0 0 0 0.5px var(--sep); }
.apppg-qr p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; max-inline-size: 22ch; }
.apppg-qr b { color: var(--ink); display: block; }
@media (min-width: 820px) { .apppg-get { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 32px; } }

.apppg-sec { display: grid; gap: 12px; }
.apppg-sec h2 { font-size: var(--fs-xl); margin: 0; }
.apppg-sec > p { margin: 0; line-height: 1.85; max-inline-size: 70ch; }
.apppg-sec .appsec-feats { margin-block: 6px 0; }
.apppg-steps { margin: 0; padding-inline-start: 1.4em; display: grid; gap: 8px; line-height: 1.85; max-inline-size: 70ch; }
.apppg-inapp { display: grid; gap: 12px; padding: 24px; }
.apppg-inapp h1 { font-size: var(--fs-xl); margin: 0; }
.apppg-inapp p { margin: 0; }

/* ---- the iPhone guide ---- */
.ios-guide { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ios-guide > li { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.ios-guide p { margin: 0; font-size: var(--fs-sm); line-height: 1.8; }
.ios-guide p b { display: block; font-size: var(--fs-base); margin-block-end: 2px; }
.ios-shot { display: grid; place-items: center; padding-block: 4px; }
.ios-scr { --frame: color-mix(in srgb, var(--ink) 88%, var(--paper)); --glass: color-mix(in srgb, var(--card) 86%, transparent);
  position: relative; inline-size: 150px; aspect-ratio: 9 / 19; border-radius: 28px; border: 6px solid var(--frame); background: var(--paper);
  overflow: hidden; box-shadow: var(--e2); direction: ltr; }
.ios-notch { position: absolute; z-index: 3; inset-block-start: 6px; inset-inline: 0; margin-inline: auto; inline-size: 40px; block-size: 11px; border-radius: 99px; background: var(--frame); }
.ios-l { display: block; block-size: 6px; border-radius: 3px; background: var(--hair); }
.ios-l.w5 { inline-size: 50%; } .ios-l.w6 { inline-size: 60%; } .ios-l.w7 { inline-size: 70%; } .ios-l.w8 { inline-size: 80%; }
.ios-page { position: absolute; inset: 30px 12px 64px; display: grid; gap: 8px; align-content: start; }
.ios-card { display: block; block-size: 46px; border-radius: 8px; background: var(--tint); }
/* Safari's bottom bar: the address pill and the toolbar (iOS 18 layout; on iOS 26 Share sits behind «⋯», said in the text) */
.ios-bar { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 6px 8px 10px; display: grid; gap: 6px; background: var(--glass);
  border-block-start: 0.5px solid var(--sep); }
.ios-url { display: block; block-size: 18px; border-radius: 8px; background: var(--paper-2); font: 600 8px/18px var(--f-display); font-style: normal;
  color: var(--ink-2); text-align: center; }
.ios-tools { display: flex; justify-content: space-between; align-items: center; padding-inline: 4px; }
.ios-t { display: block; inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--hair); }
.ios-share { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 7px; background: transparent; color: #0a84ff; }
.ios-share svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the share sheet */
.ios-dim { position: absolute; inset: 0; background: var(--scrim); }
.ios-sheet { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 6px; padding: 6px 8px 12px; border-radius: 14px 14px 0 0; background: var(--card); }
.ios-grab { display: block; inline-size: 26px; block-size: 3px; border-radius: 2px; background: var(--hair); margin: 2px auto 4px; }
.ios-row { display: flex; align-items: center; gap: 6px; min-block-size: 22px; padding: 3px 6px; border-radius: 7px; background: var(--paper); }
.ios-ri { display: grid; place-items: center; inline-size: 14px; block-size: 14px; flex: none; border-radius: 4px; background: var(--hair); color: var(--ink); }
.ios-row .ios-l { block-size: 5px; }
.ios-plus { background: transparent; }
.ios-plus svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ios-rt { font-size: 8px; font-weight: 650; color: var(--ink); white-space: nowrap; direction: rtl; }
/* the Home Screen */
.ios-home { background: linear-gradient(160deg, var(--hero-a), var(--hero-b) 60%, var(--hero-c)); }
.ios-grid { position: absolute; inset: 30px 12px auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.ios-app { display: block; aspect-ratio: 1; border-radius: 7px; background: color-mix(in srgb, var(--card) 55%, transparent); }
.ios-ours { display: grid; place-items: center; background: #fff; }
.ios-ours .brand-mark { inline-size: 76%; block-size: 76%; }
.ios-ours-l { position: absolute; inset-block-start: 118px; inset-inline-start: 12px; inline-size: calc((100% - 24px - 24px) / 4); text-align: center;
  font: 700 7px/1.2 var(--f-body); color: var(--ink); }  /* the mock is LTR (direction on .ios-scr): under the first column */
/* the thing to tap: a ring that breathes (motion tier 2+), a still ring otherwise */
.ios-guide .is-hot { position: relative; box-shadow: 0 0 0 2px var(--indigo); }
html[data-motion="2"] .ios-guide .is-hot, html[data-motion="3"] .ios-guide .is-hot { animation: ios-hot 1.8s var(--ease-std) infinite; }
@keyframes ios-hot { 0%, 100% { box-shadow: 0 0 0 2px var(--indigo); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--indigo) 35%, transparent), 0 0 0 2px var(--indigo); } }
@media (prefers-reduced-motion: reduce) { .ios-guide .is-hot { animation: none !important; } }
/* an English UI name inside a Persian sentence ((Add to Home Screen), (Open as Web App)): one isolated, unbroken run */
.apppg [lang="en"] { unicode-bidi: isolate; white-space: nowrap; }