/* The welcome page fills the viewport height. */
.welcome-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
}

.welcome-inner > * { width: 100%; }

.welcome-intro.is-second { padding-top: 32px; border-top: .5px solid var(--color-separator); }
/* not yet available: the same pill, in light grey, not clickable */
.welcome-cta.is-disabled,
.welcome-cta.is-disabled:hover,
.welcome-cta.is-disabled:active { color: var(--color-label-tertiary); background: var(--color-fill); cursor: default; }
/* a section's mark, as apple.com sets a small app icon above a feature headline */
.welcome-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.welcome-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-icon.is-bench { background: linear-gradient(145deg, #4aa8ff, #0a6cff); }
.welcome-icon.is-inferlets { background: linear-gradient(145deg, #3b5bfd, #a855f7); }
/* the glyph fills its tile as an app icon's does; the button lines up with the headline, not the whole block */
.welcome-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }
.welcome-intro { align-items: flex-start; }
.welcome-intro > .welcome-cta { margin-top: 62px; }
@media (max-width: 760px) { .welcome-intro > .welcome-cta { margin-top: 0; } }
.welcome-icon { margin-bottom: 20px; }
.welcome-intro > .welcome-cta { margin-top: 68px; }
@media (max-width: 760px) { .welcome-intro > .welcome-cta { margin-top: 0; } }

/* on a phone the welcome reads as an iPhone page: a shorter banner, a 34-point large title, 16-point margins */
@media (max-width: 899px) {
  .method-inner,
  .welcome-inner { padding: 16px var(--edge) calc(48px + env(safe-area-inset-bottom)); }
  .method-head h1 { font-size: 34px; letter-spacing: -.02em; }
  .welcome-banner { height: 240px; margin-bottom: 16px; }
  .welcome-banner-copy { left: 22px; right: 22px; top: 22px; }
  .welcome-banner-actions { left: 22px; bottom: 20px; }
  .welcome-banner-link { height: 36px; font-size: 15px; }
  .welcome-intro { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 8px; }
  .welcome-intro > .welcome-cta,
  .welcome-intro > .welcome-cta:last-child { margin-top: 0; }
  .welcome-tagline { font-size: 20px; }
  .welcome-icon { margin-bottom: 16px; }
}

/* the secondary call to action, as Apple pairs them: the same pill, outlined in blue, so the filled one leads */
.welcome-cta.is-secondary { color: #0071e3; background: transparent; box-shadow: inset 0 0 0 1px #0071e3; }
.welcome-cta.is-secondary:hover { color: #fff; background: #0071e3; }
.welcome-cta.is-secondary:active { color: #fff; background: #006edb; }
:root[data-theme="dark"] .welcome-cta.is-secondary { color: #2997ff; box-shadow: inset 0 0 0 1px #2997ff; }
:root[data-theme="dark"] .welcome-cta.is-secondary:hover { color: #fff; background: #0071e3; box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .welcome-cta.is-secondary { color: #2997ff; box-shadow: inset 0 0 0 1px #2997ff; }
  :root:not([data-theme="light"]) .welcome-cta.is-secondary:hover { color: #fff; background: #0071e3; box-shadow: none; }
}