/* /get: what a computer, an iPad or a link preview sees of a /get/<surface>
   link. It is the home page's closing band on a page of its own: the icon,
   the line, the two stores, and the fine print in the home page's mono meta
   type. Loaded after /page.css; nothing here is shared. */

.get-hero { padding-top: clamp(56px, 7.4vw, 108px); }

/* A centred block gets a centred light, as the home page's closing band
   does: blue behind the icon and the title, mint just past it. The default
   glow sits right, beside a left-aligned title. */
.get-hero::before {
  inset: -20% -20% auto -20%;
  height: 120%;
  background:
    radial-gradient(32% 42% at 47% 44%, rgba(56, 184, 245, 0.16), transparent 70%),
    radial-gradient(28% 36% at 56% 56%, rgba(108, 222, 190, 0.09), transparent 70%);
}

/* The title at the size of the home page's "Open it and start." band, one
   step down, so the badges still sit above the fold on a laptop. */
.get-hero .page-title {
  max-width: 18ch;
  font-size: clamp(3.1rem, 7.8vw, 6.9rem);
  line-height: 0.9;
}
/* Each line as wide as its words, so the ramp runs blue to mint across
   "for any addiction." as it does across the home page's "and start." */
.get-hero .page-title .line { width: fit-content; max-width: 100%; margin-inline: auto; }
.get-hero .lead { max-width: 34rem; }

/* The fine print: the home page's meta lines, mono and quiet. */
.get-hero .fine {
  max-width: 44rem;
  margin-inline: auto;
  font: 400 0.8125rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-wrap: balance;
}
/* On a phone the lines break between sentences, never inside "No account". */
.get-hero .phrase { display: inline-block; }
@media (max-width: 480px) { .get-hero .fine { letter-spacing: 0; } }
.get-hero .badges + .fine { margin-top: 30px; }
.get-hero .fine + .fine { margin-top: 8px; }
.get-hero .fine a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--mint-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.get-hero .fine a:hover { color: var(--ink); text-decoration-color: var(--mint); }

@media (prefers-reduced-motion: no-preference) {
  .get-hero .fine { animation: rise 0.9s var(--ease) 0.28s both; }
}

@media print {
  .get-hero { padding: 0 0 10pt; }
  .get-hero .page-title { font-size: 26pt; line-height: 1; }
  .get-hero .fine { font-size: 9pt; }
}