.app-route-page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }

.app-route-header { border-bottom: 1px solid var(--outline-soft); }

.app-route-header__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.abook-wordmark {
  display: inline-flex;
  align-items: baseline;
  color: inherit;
  font-size: inherit;
}
.abook-wordmark__alpha {
  color: inherit;
  font-family: 'Inter', sans-serif;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}
.abook-wordmark__name {
  margin-left: .015em;
  color: inherit;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}
.abook-wordmark--brand .abook-wordmark__alpha {
  color: #f94d00;
}
.app-route-brand {
  font-size: 20px;
  text-decoration: none;
}
.app-route-home { color: var(--primary); font-size: 14px; font-weight: 600; }

.app-route-main { display: grid; place-items: center; padding: 80px 0; }

.app-chooser {
  width: min(100% - 40px, 560px);
  padding: 40px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-surface);
}

.app-chooser h1 { max-width: none; color: var(--ink); font-size: clamp(40px, 5vw, 52px); }
.app-route-status { margin-top: 16px; color: var(--ink-muted); }
.app-store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.app-store-link, .app-store-badge { display: inline-flex; min-height: 48px; align-items: center; }
.app-store-badge { opacity: .78; }
.app-store-link img, .app-store-badge img { width: auto; height: 48px; }
.app-store-link[data-store="googlePlay"] img, .app-store-badge[data-store="googlePlay"] img {
  width: auto;
  height: 64px;
}
.app-route-fallback { margin-top: 32px; font-size: 14px; }
.app-route-fallback a { color: var(--primary); font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 767px) {
  .app-route-header__inner { min-height: 68px; }
  .app-route-main { padding: 56px 0; }
  .app-chooser { padding: 28px 24px; }
  .app-store-badges { flex-direction: column; align-items: flex-start; }
}

/* Touch targets. A finger needs about 44px to hit reliably; these links sit at
   16-22px, which is a miss waiting to happen. Only coarse pointers get the
   padding — a mouse does not need it and the footer stays compact on desktop. */
@media (pointer: coarse) {
  .app-route-fallback a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The English download page shares the homepage's paper, slate and type.
   Translated app routes retain their existing presentation above. */
.app-route-page--download {
  display: block;
  color: var(--paper);
  background: var(--slate);
}

.app-route-page--download .app-route-header { border-bottom: 1px solid var(--slate-line); }
.app-route-page--download .app-route-header__inner { min-height: 88px; }
.app-route-page--download .app-route-brand { font-size: 26px; }
.app-route-page--download .app-route-home {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--paper-dim);
  font-weight: 400;
  text-decoration: none;
}
.app-route-page--download .app-route-home:hover { color: var(--paper); }
.app-route-page--download .langswitch__btn { min-height: 44px; }
.app-route-page--download .app-route-main { display: block; place-items: normal; padding: 0; }

.app-route-page--download .app-chooser {
  width: 100%;
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(48px, 6vw, 80px);
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.app-route-page--download .app-route-eyebrow {
  margin: 0 0 20px;
  color: var(--paper-dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.app-route-page--download .app-chooser h1 {
  margin: 0;
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.app-route-page--download .app-route-status {
  max-width: none;
  margin: 24px auto 0;
  color: var(--paper-dim);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}
.app-route-status__line {
  display: block;
}
.app-route-page--download .app-store-badges {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.app-route-page--download .app-store-link {
  flex: none;
  border-radius: 7px;
}
.app-route-page--download .app-store-link img { max-width: none; height: 48px; }
/* Google: 168px of visible art within a 250px canvas. Match Apple's
   48px visible height and absorb the transparent 41px on each edge. */
.app-route-page--download .app-store-link[data-store="googlePlay"] img {
  height: calc(48px * 250 / 168);
  margin: calc(-48px * 41 / 168);
}
.app-route-page--download .app-route-testing {
  max-width: 44ch;
  margin: 24px auto 0;
  color: var(--paper-faint);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}
.app-route-page--download .app-route-fallback { margin: 20px 0 0; }
.app-route-page--download .app-route-fallback a {
  display: inline-flex;
  align-items: baseline;
  gap: .25em;
  min-height: 44px;
  padding-block: 10px;
  color: var(--paper-dim);
  font-weight: 400;
  text-decoration-color: var(--paper-faint);
}

.app-route-page--download .app-help {
  width: 100%;
  padding-block: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 96px);
  color: var(--ink);
  background: var(--paper);
}
.app-help__heading { margin-bottom: 36px; }
.app-help__heading h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.app-help__heading p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.app-route-page--download .app-help__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.app-route-page--download .step__img {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1106 / 896;
  object-fit: contain;
  border-radius: 6px;
}
.app-route-page--download .step__caption {
  margin: 20px 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(25px, 2.3vw, 30px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}
.app-help__detail { margin: 8px 0 0; color: var(--ink-soft); font-size: 15px; }

.app-route-page--download .site-footer { padding-block: 40px; border-top: 1px solid var(--slate-line); }
.app-route-page--download .site-footer__inner { display: grid; gap: 28px; }
.app-route-page--download .site-footer p { margin: 0; color: var(--paper-faint); font-size: 13px; }
.app-route-page--download .site-footer .footer-brand { margin-bottom: 12px; color: var(--paper); font-size: 24px; }
.app-route-page--download .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.app-route-page--download .site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.app-route-page--download .site-footer__links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--paper-dim);
  font-size: 14px;
  text-decoration: none;
}
.app-route-page--download .site-footer__links a:hover { color: var(--paper); }
.app-route-page--download .site-footer__lang { margin: 0; }
.app-route-page--download .site-footer__lang a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 899px) {
  .app-route-page--download .app-help__grid { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
  .app-route-page--download .app-help__heading { max-width: 560px; }
}
@media (max-width: 520px) {
  .app-route-page--download .app-route-header__inner { min-height: 76px; }
  .app-route-page--download .app-route-brand { font-size: 24px; }
  .app-route-page--download .app-store-badges { gap: 20px; }
  .app-route-page--download .app-store-link img { height: 44px; }
  .app-route-page--download .app-store-link[data-store="googlePlay"] img {
    height: calc(44px * 250 / 168);
    margin: calc(-44px * 41 / 168);
  }
  .app-route-page--download .site-footer__legal { display: grid; gap: 12px; }
}