/* Phone layout for makesugo.com — desktop inline styles stay as-is. */
.site-nav-doc {
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-nav-doc a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body, #3F2B23);
  text-decoration: none;
}

@media (max-width: 820px) {
  .site-nav-inner {
    padding: 0 16px !important;
    height: 56px !important;
    gap: 10px;
  }
  .site-nav-links {
    display: none !important;
  }
  .site-nav-doc {
    display: flex !important;
    gap: 12px;
  }
  .site-nav-doc a {
    font-size: 13px;
  }
  .site-nav-end {
    gap: 8px !important;
  }
  .site-nav-cta {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .site-hero {
    padding: 88px 18px 48px !important;
    min-height: auto !important;
  }
  .site-hero h1 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    padding: 0 4px;
  }
  .site-hero-cta {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
  }
  .site-hero p,
  .site-pad p,
  #pricing p {
    font-size: 16px !important;
  }
  .site-hero p br,
  #pricing p br {
    display: none;
  }

  .site-pad h2,
  .site-share h2,
  #pricing h2 {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  .site-pad {
    padding: 56px 18px !important;
  }
  .site-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    justify-items: center;
  }
  .site-split > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  .site-split > div:not(.site-phone):not(.site-camera):not(.site-graphic) {
    width: 100%;
  }

  .site-phone,
  .site-camera,
  .site-graphic {
    justify-self: center !important;
    margin-inline: auto !important;
  }
  .site-phone {
    width: min(280px, 78vw) !important;
    height: calc(min(280px, 78vw) * 640 / 340) !important;
  }
  .site-camera {
    width: min(340px, 86vw) !important;
    order: 2;
    min-height: 420px;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .site-graphic {
    width: min(340px, 86vw) !important;
  }

  #top img:not(.site-nav-inner img) {
    display: block;
    margin-inline: auto;
  }

  .site-camera + div {
    order: 1;
  }
  .site-camera > div:first-child {
    min-height: 420px;
    background-size: cover;
    background-position: center;
  }

  /* view() timelines often never fire on phones — leave content visible */
  [style*="animation-timeline"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-share {
    padding: 0 18px 56px !important;
  }
  .site-features {
    padding: 0 18px 56px !important;
  }
  .site-features > div {
    padding: 34px 22px !important;
    border-radius: 24px !important;
  }
  .site-feature-grid {
    grid-template-columns: 1fr !important;
    margin-top: 30px !important;
  }
  .site-feature-card {
    padding: 18px !important;
  }
  #pricing [data-open-wait] {
    max-width: 100%;
    box-sizing: border-box;
    height: auto !important;
    min-height: 52px;
    padding: 14px 18px !important;
    white-space: normal;
    text-align: center;
  }
  .site-footer-mark {
    display: none !important;
  }
  .site-footer {
    padding: 48px 18px 32px !important;
  }
}

@media (max-width: 600px) {
  /* The four desktop links plus the language pill do not fit beside the
     wordmark on narrow phones. Keep primary actions visible; the same links
     remain available in the footer and the page content. */
  .site-nav-doc {
    display: none !important;
  }
  .site-nav-end {
    flex: 0 1 auto;
    min-width: 0;
  }
  .site-nav-inner > a:first-child {
    flex: 0 0 auto;
  }
  .site-nav-inner > a:first-child img {
    height: 26px !important;
  }
}

@media (max-width: 420px) {
  .site-hero h1 {
    font-size: 30px !important;
  }
  .site-nav-cta {
    font-size: 0 !important;
    width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
}