/* home.php only. The tokens, the buttons, the language bar and the App Store
   plate all come from sender.css, which home.php loads first — the two pages are
   one site, and a home page with its own blues would say otherwise.

   What is here is the handful of shapes the sender has no use for: a hero, a
   feature list and a numbered how-it-works. */

.hero { text-align: center; padding: 8px 0 4px; }
/* The wordmark is small here and large on the sender, which is the right way
   round: this page is about the app, that page *is* the app. */
.hero-mark {
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--c-text-3);
}
.hero-mark b { color: var(--c-primary-text); }
.hero h1 {
  margin-top: 16px; font-size: 34px; line-height: 1.15; font-weight: 700;
  letter-spacing: -.02em;
}
.hero-sub {
  max-width: 46ch; margin: 14px auto 0;
  font-size: 16px; line-height: 1.55; color: var(--c-text-2);
}
.hero .store { margin-top: 26px; }
.hero-meta { margin-top: 10px; font-size: 12px; color: var(--c-text-3); }
.hero-alt { margin-top: 18px; font-size: 14px; }
.hero-alt a { color: var(--c-primary-text); text-decoration: none; }
.hero-alt a:hover { text-decoration: underline; }

/* The same width as everything else on the page.
   It was 900 px against a 560 px column, which made the picture look like it had
   been pasted in from a different layout — the cards below it start where its
   shadow ends. One column, one edge. The height attribute on the img reserves
   the space before the bytes arrive, so nothing below it jumps. */
.hero-art { margin: 34px auto 0; }
.hero-art img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--c-hairline); border-radius: var(--r-xl);
}

.block { margin-top: 46px; }
.block h2 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-text-3);
}
.block-copy {
  margin-top: 12px; padding: 16px 18px;
  border: 1px solid var(--c-hairline); border-radius: var(--r-lg);
  background: var(--c-surface-2); color: var(--c-text-2); font-size: 14px;
}

.features, .steps {
  margin-top: 12px; padding: 0; list-style: none;
  border: 1px solid var(--c-hairline); border-radius: var(--r-lg);
  background: var(--c-surface-2); overflow: hidden;
}
.features li, .steps li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--c-hairline);
}
.features li:last-child, .steps li:last-child { border-bottom: 0; }
.features b, .steps b { display: block; font-size: 15.5px; font-weight: 600; }
.features small, .steps small {
  display: block; margin-top: 4px; color: var(--c-text-3); font-size: 13.5px; line-height: 1.5;
}
.features-icon { flex: 0 0 auto; width: 26px; font-size: 19px; line-height: 1.4; text-align: center; }
.steps-number {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-primary-tint); color: var(--c-primary-text);
  font-size: 13px; font-weight: 700; text-align: center; line-height: 26px;
}

/* ---------- Privacy policy ---------- */

/* A policy is read, not scanned, so it is paragraphs at a comfortable measure
   rather than the cards the rest of the site is made of. */
.policy-head { padding: 8px 0 4px; }
.policy-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.policy-date { margin-top: 8px; color: var(--c-text-3); font-size: 13px; }
.policy-lede {
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--c-hairline); border-radius: var(--r-lg);
  background: var(--c-surface-2); color: var(--c-text-2);
  font-size: 15px; line-height: 1.6;
}
.policy { margin-top: 32px; }
.policy h2 { font-size: 17px; font-weight: 600; }
.policy p {
  margin-top: 10px; color: var(--c-text-2); font-size: 14.5px; line-height: 1.65;
}
.policy p b { color: var(--c-text); }
.policy a { color: var(--c-primary-text); }
.block-copy a, .foot a { color: var(--c-primary-text); }

/* The sender's column rules cover its own sections by id; this page's sections
   need the same width, and the hero a little more room to breathe. */
.page > .topbar, .page > .hero, .page > .hero-art, .page > .block, .page > .foot,
.page > .policy-head, .page > .policy {
  max-width: 560px; margin-left: auto; margin-right: auto;
}

@media (max-width: 620px) {
  .hero h1 { font-size: 27px; }
  .hero-sub { font-size: 15px; }
}