/* Mobile layout fixes for the landing. Not part of the Claude Design kit.
   Loaded after the page styles, so these rules win at equal specificity.
   Everything here applies only to phones (<=600px) or to the open mobile menu;
   desktop rendering is unchanged. */

/* Mobile menu: opaque panel, and a solid nav bar while the menu is open. */
.nav-menu { background: var(--bg); }
body:has(.nav-menu.open) nav { background: var(--bg); border-bottom-color: var(--border); }

@media (max-width: 600px) {
  /* Page frame: 20px gutters instead of 40px, tighter vertical rhythm. */
  nav { padding: 0 20px; }
  .nav-menu { padding: 8px 20px 20px; }
  .container { padding: 0 20px; }
  section, .status-section { padding: 64px 0; }
  .closing { padding: 72px 0; }
  .logos-bar { padding: 44px 0; }
  h2 { font-size: 30px; }
  .sub { font-size: 15px; }

  /* Icons: lucide replaces <i> with <svg>, so the page's `... i {}` size rules miss.
     Mirror them onto the svg and keep flex rows from squashing the glyphs. */
  svg.lucide { flex: none; }
  .pillars svg.lucide { width: 14px; height: 14px; color: var(--mint); }
  .dash-side .it svg.lucide { width: 13px; height: 13px; }
  .nav-burger svg.lucide { width: 18px; height: 18px; }
  .trust .tr svg.lucide { width: 16px; height: 16px; color: var(--primary); margin-top: 3px; }
  .p-icon svg.lucide { width: 16px; height: 16px; }
  .end .icon svg.lucide { width: 20px; height: 20px; }
  .end li svg.lucide { width: 15px; height: 15px; color: var(--mint); margin-top: 4px; }
  .beachhead svg.lucide { width: 16px; height: 16px; color: var(--primary); margin-top: 4px; }

  /* A section's main actions span the full width and may wrap instead of overflowing. */
  .hero-actions .sy-btn, .aud-card .sy-btn, .cta-actions .sy-btn {
    width: 100%; justify-self: stretch; height: auto; min-height: var(--control-h-lg);
    padding-block: 10px; white-space: normal; text-align: center;
  }

  /* Hero */
  .hero { padding-top: 112px; padding-bottom: 64px; }
  .hero-sub { font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .pillars { gap: 10px 20px; margin-bottom: 44px; }
  .dash-url { display: none; }
  .dash-tag { white-space: nowrap; }
  .mini-card .lbl { white-space: normal; overflow: visible; text-overflow: clip; }
  .lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
  .tx-table .row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 9px 12px; }
  .tx-table .pill { font-size: 11px; }

  /* Network logos: two-line wordmarks need a box that grows. */
  .net .mark { height: auto; min-height: 44px; }
  .net .mark .wm { line-height: 1.2; }

  /* Problem */
  .p-card { padding: 22px 20px; }
  .chain { padding: 22px 20px 24px; }
  .chain-title { flex-direction: column; gap: 4px; }

  /* How it works */
  .ba-card { padding: 18px 16px 20px; }
  .ba-card .bt { flex-wrap: wrap; gap: 8px; }
  .ba-card .bt span { white-space: nowrap; }

  /* Product */
  .end { padding: 24px 20px; gap: 28px; }
  .pill { white-space: nowrap; flex: none; }
  .end .status { flex-wrap: wrap; }

  /* Audience */
  .aud-card { padding: 24px 20px; }
  .aud-card h3 { font-size: 22px; }

  /* Status and trust */
  .timeline { row-gap: 28px; }
  .ms { padding-right: 0; }
  .beachhead { align-items: flex-start; }
  .trust .inner { grid-template-columns: 1fr; }

  /* Early access */
  .cta-box { padding: 40px 20px; border-radius: 20px; }
  .cta-box h2 { font-size: 30px; }
  .cta-box h2 br { display: none; }
  .cta-box p { font-size: 15px; margin-bottom: 28px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .traction { flex-direction: column; align-items: center; gap: 8px; }

  /* Footer: stack logo, links and copyright instead of one 421px-wide row,
     which made phones zoom the whole page out. */
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-links { flex-wrap: wrap; gap: 10px 20px; }
}

/* Agent card: below ~340px of width the fixed card ratio cannot hold its text. */
@container (max-width: 340px) {
  .acard { aspect-ratio: auto; gap: 14px; }
}