/* Large-screen art direction. Keep the established layout through 1440px.
   Scale the composition with bounded rem-based type, never browser zoom or a
   transform on the page. Reading/form columns have a narrower limit than demos. */
@media screen and (min-width: 1441px) {
  html { font-size: clamp(1rem, calc(.75rem + .277778vw), 1.375rem); }
  :root { --max: clamp(73.75rem, 78vw, 104rem); }
  .wrap { padding-inline: clamp(1.75rem, 2vw, 3rem); }

  /* The navigation and hero share the same centered outer grid. */
  .nav { top: .875rem; gap: 1.125rem; padding: .625rem .75rem .625rem 1.375rem; }
  .nav .logo { width: 10.5rem; }
  .nav-links a { padding: .5rem 1rem; }
  .btn { gap: .625rem; padding: .8125rem 1.625rem; }
  .btn-nav { padding: .625rem 1.25rem; }
  .hero { padding: 9.375rem 0 2.5rem; }
  .hero-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(3rem, 4vw, 6rem); }
  .hero h1 { font-size: clamp(4.4rem, calc(3.3rem + 1.22vw), 5.4rem); max-width: 11em; margin-bottom: 1.375rem; }
  .hero .lede { max-width: 60ch; margin-bottom: 2rem; }
  .cta-row { gap: .875rem; }
  .proof-row { gap: .625rem; margin-top: 1.75rem; }
  .chip { padding: .5rem .875rem; gap: .375rem; }
  .eyebrow { gap: .625rem; margin-bottom: 1.125rem; }
  .eyebrow .tick { width: 2.625rem; height: .875rem; }

  /* Enlarge the phone's actual layout box, so callouts remain attached to it. */
  .hero-visual { width: 100%; max-width: 32rem; justify-self: center; }
  .phone { width: clamp(18.25rem, calc(10rem + 9.2vw), 24rem); border-radius: 2.75rem; padding: .625rem; container-type: inline-size; }
  .phone-screen { border-radius: 2.1875rem; }
  /* The miniature app scales with its handset, including the space below video. */
  .phone .phone-notch { top: 5.15cqw; width: 29.4cqw; height: 8.1cqw; }
  .phone .feed-head { padding: 16.18cqw 5.15cqw 3.68cqw; gap: 3.31cqw; }
  .phone .feed-avatar { width: 9.56cqw; height: 9.56cqw; }
  .phone .feed-id { font-size: 4.24cqw; }
  .phone .feed-id small, .phone .feed-follow { font-size: 3.65cqw; }
  .phone .feed-follow { padding: 1.84cqw 4.04cqw; }
  .phone .feed-cta { margin: 3.68cqw 4.41cqw 0; padding: 3.31cqw 5.15cqw; font-size: 4.59cqw; }
  .phone .feed-meta { padding: 4.41cqw 5.15cqw; gap: 3.68cqw; }
  .phone .feed-meta .row { gap: 4.78cqw; }
  .phone .feed-meta .row svg { width: 7.35cqw; height: 7.35cqw; }
  .phone .feed-meta .bar { height: 2.57cqw; }
  .phone-notch { top: .875rem; width: 5rem; height: 1.375rem; border-radius: .8125rem; }
  .feed-head { gap: .5625rem; padding: 2.75rem .875rem .625rem; }
  .feed-avatar { width: 1.625rem; height: 1.625rem; }
  .feed-follow { padding: .3125rem .6875rem; }
  .feed-cta { margin: .625rem .75rem 0; padding: .5625rem .875rem; }
  .feed-meta { padding: .75rem .875rem; gap: .625rem; }
  .feed-meta .row { gap: .8125rem; }
  .feed-meta .row svg { width: 1.25rem; height: 1.25rem; }
  .feed-meta .bar { height: .4375rem; }
  .float-card { gap: .625rem; padding: .75rem 1.125rem; border-radius: 1rem; }
  .float-card .ico { width: 2.125rem; height: 2.125rem; border-radius: .625rem; }
  .vid-toggle { width: max(44px, 2.5rem); height: max(44px, 2.5rem); background-size: 1rem; }

  .biz { padding: 4rem 0 .625rem; }
  .biz-label { margin-bottom: 1.25rem; }
  .biz-chip { padding: .6875rem 1.375rem; gap: .5625rem; margin-right: .75rem; }
  .sec-head { max-width: 42rem; margin-bottom: 4rem; }
  .sec-head h2 { margin-bottom: .875rem; }
  .steps-grid { gap: clamp(1.25rem, 1.5vw, 2rem); }
  .step { padding: clamp(1.875rem, 2vw, 2.75rem); }
  .step-num { width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem; }
  .step p { max-width: 34ch; }
  .onboarding-links { margin-top: 3.5rem; gap: 1rem; }
  .demo-grid { gap: clamp(1.375rem, 2vw, 3rem); }
  .demo-phone { border-radius: 1.875rem; padding: .4375rem; }
  .demo-phone .demo-screen { border-radius: 1.5rem; }
  .demo-screen .feed-head { padding: .625rem .6875rem .5625rem; }
  .demo-cta { margin: .5rem .5625rem .625rem; padding: .5rem .75rem; }
  .demo-label { margin-top: 1rem; }

  /* Pricing, budget, about and closing panels share the main content edges. */
  .price-grid { max-width: none; gap: 1.5rem; }
  .price-card { padding: 2.5rem 2.375rem; }
  .price-card ul { gap: .75rem; }
  .price-budget { padding: 1.625rem 2.375rem; gap: 2.125rem; }
  .pb-desc { padding-left: 2.125rem; }
  .about-card { max-width: none; padding: 3rem 3.25rem; gap: 3rem; }
  .about-card p { max-width: none; font-size: 1.1rem; }
  .about-mark { width: 7.5rem; height: 7.5rem; }
  .about-mark img { width: 5.5rem; height: 5.5rem; }
  .final-card { padding: 5.5rem 2.5rem; }
  .final-card h2 { max-width: 22ch; margin-inline: auto; }
  .foot-grid { gap: 1.625rem; padding-top: 2.125rem; }
  .foot-logo { width: 9.375rem; }
  .foot-links { gap: 1rem 1.625rem; }

  /* Forms and instructions grow more gently than the marketing composition. */
  .intake-page, .guide-page { font-size: 1.0625rem; }
  .intake-nav, .intake-layout, .guide-layout, .intake-footer { max-width: min(84vw, 88rem); }
  .intake-nav { margin-top: 1rem; padding: .75rem 1.5rem; }
  .intake-nav img { width: 10.5rem; }
  .intake-nav-links, .guide-nav-links { gap: 1.25rem; }
  .call-link, .intake-nav-links > a:first-child, .guide-nav-links > a:first-child { font-size: .9375rem; }
  .intake-layout, .guide-layout { grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.6fr); gap: 4rem; margin-block: 4rem 5rem; padding-inline: 1.5rem; }
  .intro h1, .guide-sidebar h1 { font-size: 3rem; }
  .intro-lede, .guide-sidebar .intro-lede, .guide-intro { font-size: 1.25rem; }
  .intro, .guide-sidebar { top: 2rem; }
  .intro-price { font-size: 1rem; }
  .intro-price strong { font-size: 1.25rem; }
  .intro-price a { font-size: .875rem; }
  .next-steps h2 { font-size: 1.3125rem; }
  .intro-price, .next-steps, .direct-contact, .portfolio-note { max-width: 34ch; }
  .form-section, .guide-step { padding: 2rem; margin-bottom: 1.5rem; }
  .form-heading h2 { font-size: 2.25rem; }
  .step-heading h2, .launch-check h2, .guide-help h2 { font-size: 1.75rem; }
  legend { font-size: 1.5625rem; }
  input, textarea, select { font-size: 1rem; padding: .6875rem .75rem; }
  label, .section-help, .guide-hint, .partner-copy { font-size: .9375rem; }
  .guide-step summary, .submit-button { font-size: 1.0625rem; }
  .guide-step p, .guide-step li { max-width: 65ch; }
  .new-tab, .field-help, .required-note, .optional, .source-link, .email-note { font-size: .8125rem; }
  .notice, .setup-note, .direct-contact, .portfolio-note, .back-link { font-size: .875rem; }
  .intake-footer { font-size: .8125rem; }
}