/* ============================================================
   THE IPHONE INSTALL PAGE

   External, not a <style> block in the page, because static files are
   served with a Content-Security-Policy that has no 'unsafe-inline' --
   deliberately, and the rest of the site already keeps every rule in a
   stylesheet for the same reason.

   Inline, this page shipped to production completely unstyled: the
   browser blocked the block, the icon rendered at its natural size, and
   the text ran off the screen. Nothing in the markup looked wrong,
   because nothing in the markup was.
   ============================================================ */

/* ------------------------------------------------------------
   This page is read on the phone it is about, held in one hand,
   probably while somebody is being told to install something. So
   it is one column, large type, and the instruction is the first
   thing on the screen rather than the reward for scrolling.
   ------------------------------------------------------------ */
.ios-wrap { max-width: 520px; margin: 0 auto; padding: 40px 20px 72px; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.ios-mark { width: 76px; height: 76px; border-radius: 19px; display: block; margin: 0 auto 20px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.ios-h1 { font-family: Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em; font-size: 30px; line-height: 1.15; text-align: center; margin: 0 0 10px; color: var(--text, #F1F3F6); }
.ios-sub { text-align: center; color: var(--text-faint, #8B93A0); font-size: 15.5px; line-height: 1.6; margin: 0 0 30px; }

.ios-steps { list-style: none; padding: 0; margin: 0 0 28px; counter-reset: s; }
.ios-steps li { position: relative; padding: 0 0 0 52px; margin: 0 0 22px; }
.ios-steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -2px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent, #2563ff); color: #fff;
  font: 800 15px Inter, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ios-steps b { display: block; font: 700 16.5px Inter, sans-serif; color: var(--text, #F1F3F6); margin-bottom: 4px; }
.ios-steps p { margin: 0; color: var(--text-faint, #8B93A0); font-size: 14.5px; line-height: 1.6; }
.ios-steps .glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; }

.ios-open { display: block; text-align: center; padding: 17px 20px; border-radius: 14px; background: var(--accent, #2563ff); color: #fff; font: 800 16.5px Inter, sans-serif; text-decoration: none; margin: 0 0 12px; }
.ios-open:active { transform: translateY(1px); }
.ios-note { text-align: center; color: var(--text-faint, #8B93A0); font-size: 13px; line-height: 1.6; margin: 0 0 32px; }

.ios-box { border: 1px solid var(--border-soft, #262B33); border-radius: 14px; padding: 16px 18px; margin: 0 0 16px; }
.ios-box h2 { font: 700 13px Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint, #8B93A0); margin: 0 0 10px; }
.ios-box ul { margin: 0; padding-left: 18px; color: var(--text-mid, #9BA2AD); font-size: 14.5px; line-height: 1.75; }

/* Shown only once the app is actually installed and opened from the
   Home Screen, where these instructions are noise. */
.ios-installed { display: none; text-align: center; padding: 28px 20px; }
@media (display-mode: standalone) {
  .ios-guide { display: none; }
  .ios-installed { display: block; }
}

/* ------------------------------------------------------------
   THE PERSON ON A COMPUTER

   Most people find the site on a laptop and want the app on their
   phone. Every instruction below is an iOS Safari gesture, so on a
   desktop the page describes buttons that are not there -- which reads
   as broken rather than as "not for this device".

   Hidden on anything with a coarse pointer, which is the phones and
   tablets the instructions are actually for. A width query would get
   this wrong on a tablet in portrait.
   ------------------------------------------------------------ */
.ios-desktop {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--border-soft, #262B33);
  border-radius: 14px; padding: 18px; margin: 0 0 26px;
  background: rgba(37, 99, 255, .05);
}
.ios-qr { flex-shrink: 0; width: 120px; height: 120px; border-radius: 8px; }
.ios-desktop-text b { display: block; font: 700 16px Inter, sans-serif; color: var(--text, #F1F3F6); margin-bottom: 6px; }
.ios-desktop-text p { margin: 0 0 8px; color: var(--text-faint, #8B93A0); font-size: 14px; line-height: 1.6; }
.ios-desktop-text p:last-child { margin-bottom: 0; }
.ios-desktop-alt { font-size: 13px !important; }

@media (pointer: coarse) { .ios-desktop { display: none; } }

/* A little more presence where there is room for it. The column stays
   narrow on purpose -- this is a list of three instructions, and a wide
   measure makes short lines harder to follow, not easier. */
@media (min-width: 720px) and (pointer: fine) {
  .ios-wrap { padding-top: 64px; }
  .ios-h1 { font-size: 36px; }
  .ios-sub { font-size: 16.5px; }
}