/* The exported mockup uses inline styles. These targeted overrides let its
   layout reflow without changing the artwork or animation keyframes. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Size the two headline lines against their actual column, including when
   the hero changes from a split layout to a full-width mobile layout. */
.sf-hero-copy { container-type: inline-size; }
#top h1 { font-size: clamp(26px, 10cqi, 64px); }
#top .sf-hero-line {
  display: block;
  position: relative;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
#top .sf-hero-emphasis { color: var(--sf-red); }

@media (max-width: 760px) {
  .sf-page, .sf-page *, .sf-page *::before, .sf-page *::after {
    box-sizing: border-box;
  }

  .sf-header {
    padding: 20px 20px 12px !important;
    gap: 16px 10px !important;
  }

  .sf-header > a { gap: 8px !important; }
  .sf-header > a > svg { width: 32px; height: 34px; }
  .sf-header > a > span { font-size: clamp(17px, 4.5vw, 22px) !important; }
  .sf-header .sf-btn { font-size: 14px !important; padding: 0 12px !important; }

  footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  #top {
    padding: 28px 20px 64px !important;
    gap: 36px !important;
  }

  #top > div,
  #nudge > div > div, #minds > div > div, #install > .sf-card > div {
    flex: 0 0 100% !important;
    width: 100%;
    min-width: 0;
  }

  #top > .sf-rise { gap: 24px !important; }
  #top h1 + p { font-size: 18px !important; }
  .sf-page h2 { font-size: clamp(34px, 8.6vw, 48px) !important; line-height: 1.08 !important; }

  #faq { padding: 64px 20px !important; gap: 32px !important; }

  #nudge > div, #minds > div { padding: 64px 20px !important; gap: 48px !important; }
  #nudge > div { flex-direction: column-reverse; }
  #nudge .sf-card { padding: 28px 20px !important; }
  #nudge .sf-card > .sf-h { font-size: 28px !important; }
  #minds > div > div:last-child { padding: 36px 0; }
  .sf-orbit {
    width: min(220px, calc(100vw - 140px)) !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  .sf-orbit > .sf-bob { width: 120px !important; height: 124px !important; margin: -62px 0 0 -60px !important; }
  .sf-orbit .sf-unspin { font-size: 12px !important; }

  #faq button { padding: 16px !important; font-size: 19px !important; }
  #faq button > span:first-child { min-width: 0; }
  #faq .sf-row { padding: 0 16px 20px !important; }

  #install { padding: 0 20px 64px !important; }
  #install > .sf-card { padding: 32px 24px !important; gap: 48px !important; }
  #install > .sf-card > div:last-child { margin: 16px 0; }
  #install .sf-spin { width: 220px !important; height: 220px !important; margin: -110px 0 0 -110px !important; }
  #install .sf-spin > svg { width: 220px; height: 220px; }
  #install .sf-bob { width: 160px !important; height: 165px !important; }
  footer > div { padding: 28px 20px !important; gap: 12px !important; }
  footer nav { width: 100%; }
}

@media (max-width: 480px) {
  .sf-header { padding-inline: 16px !important; }
  #install .sf-btn { width: 100%; }
  #install > .sf-card > div:first-child > div { width: 100%; }
}