/* ── Public-page responsive layer ────────────────────────────────────────
   Verbatim from the Claude Design source. This exact block appears, byte for
   byte, in Home.dc.html, Product.dc.html, Pricing.dc.html, Voices.dc.html,
   Login.dc.html and Docs.dc.html — so it lives here once and every public
   page links it. Docs adds two further breakpoints of its own in docs.css.

   The hook classes below (.site-nav, .nav-mid, .g2, .g3b, .foot-cols,
   .foot-bot, .btn-row) are the design's own names, applied to the matching
   elements in our templates so these rules drop in unchanged.

   Durable design link:
   https://claude.ai/design/p/8aae513c-96d4-44b8-8813-711d6cc9de3c
   Local snapshots: design/claude/app/*.dc.html
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width:900px){
    .site-nav{padding:12px 18px!important;flex-wrap:wrap!important;row-gap:9px!important}
    .nav-mid{order:3!important;width:100%!important;gap:22px!important;overflow-x:auto!important;padding-top:9px!important;border-top:1px solid rgba(255,255,255,.07)!important;scrollbar-width:none}
    .nav-mid::-webkit-scrollbar{display:none}
    .nav-mid a{white-space:nowrap!important;flex:none!important}
    .g2{grid-template-columns:minmax(0,1fr)!important}
    .g2>*{border-right:none!important}
    .g3b{grid-template-columns:1fr!important}
    .g3b>div{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
    .g3b>div:last-child{border-bottom:none!important}
    .foot-cols{column-gap:40px!important;row-gap:24px!important}
    .foot-bot{flex-direction:column!important;gap:7px!important}
  }

@media (max-width:560px){
    .btn-row{flex-direction:column!important;align-items:stretch!important}
    .btn-row>a{text-align:center!important}
  }