/* The Feonix app download page (/app, templates/app_download.html). Loaded by that page only, after the fx set,
   and built from the fx tokens alone: purple, white, ground, border — no gold, no gradients, no shadows. */

/* App icon tile: the approved white Feonix mark on the brand purple, as on the app's own icon. */
.fx .fx-apphero__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px;
  margin: 8px 0 22px; border-radius: 18px; background: var(--fx-purple); }
.fx .fx-apphero__icon img { width: 40px; height: auto; }
.fx .fx-apphero .fx-phero__title { max-width: 16ch; }

/* Two platform cards: side by side from tablet up, stacked (Android first) on phones. */
.fx .fx-appget__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-gap); align-items: start; }
@media (max-width: 767px) { .fx .fx-appget__grid { grid-template-columns: minmax(0, 1fr); } }

.fx .fx-platform { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 1rem + 2vw, 36px);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-panel); background: var(--fx-white); }
.fx .fx-platform__name { font-size: var(--fx-step-h3); }
.fx .fx-platform__where { margin-top: 4px; font-size: var(--fx-step-meta); color: var(--fx-text-muted); }
.fx .fx-platform__cta { margin-top: 20px; min-height: 56px; }
/* "iPhone — Coming soon": a status, not a control — same footprint as the Android button, never clickable. */
.fx .fx-platform__soon { display: flex; align-items: center; justify-content: center; margin-top: 20px; min-height: 56px;
  padding: 12px 20px; border: 1px dashed var(--fx-field-border); border-radius: var(--fx-r-button); background: var(--fx-ground);
  color: var(--fx-purple); font-weight: 600; text-align: center; }

/* iPhone launch notification — directly under the iPhone status. */
.fx .fx-notify { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--fx-hairline); }
.fx .fx-notify__title { font-size: 1.125rem; line-height: 1.3; }
.fx .fx-notify__text { margin-top: 6px; color: var(--fx-text-muted); max-width: 52ch; }
.fx .fx-notify__form { display: grid; gap: 6px; margin-top: 14px; max-width: none; }
.fx .fx-notify__row { display: flex; flex-wrap: wrap; gap: 10px; }
.fx .fx-notify__row .fx-input { flex: 1 1 14rem; min-width: 0; font-size: 1rem; }   /* 16px: no iOS zoom on focus */
.fx .fx-notify__row .fx-btn { flex: 0 0 auto; min-width: 9.5rem; margin-top: 0; }
@media (max-width: 479px) { .fx .fx-notify__row .fx-btn { flex: 1 1 100%; } }
.fx .fx-notify__form .fx-input[aria-invalid="true"] { border-color: var(--fx-error); }
.fx .fx-notify__privacy { margin-top: 8px; font-size: var(--fx-step-meta); line-height: 1.55; color: var(--fx-text-muted); }
.fx .fx-notify__privacy a { color: var(--fx-purple); font-weight: 600; text-underline-offset: 3px; }
.fx .fx-notify__status:empty { display: none; }
.fx .fx-notify__status { margin-top: 10px; padding: 12px 14px; border-radius: var(--fx-r-control); font-weight: 600;
  line-height: 1.45; overflow-wrap: anywhere; }
.fx .fx-notify__status.is-ok { background: var(--fx-success-wash); color: var(--fx-success); }
.fx .fx-notify__status.is-err { background: var(--fx-error-wash); color: var(--fx-error); }
/* Honeypot: invisible to people (and aria-hidden), still in the DOM for bots — the newsletter's .fxnl__hp pattern. */
.fx .fx-notify__hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Screens from the current app (images/app/): two across on phones, four from tablet up. Framed with the fx border
   and card radius only. */
.fx .fx-appshots__title { font-size: var(--fx-step-h3); margin-bottom: 20px; }
.fx .fx-appshots__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-gap); }
@media (min-width: 768px) { .fx .fx-appshots__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fx .fx-appshots figure { margin: 0; }
.fx .fx-appshots img { width: 100%; height: auto; aspect-ratio: 540 / 1167; border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-card); background: var(--fx-ground); }
.fx .fx-appshots figcaption { margin-top: 10px; font-size: var(--fx-step-meta); font-weight: 600; color: var(--fx-text-muted); text-align: center; }