/* Breakpoints. Loaded last so it can override layout and component rules. */
@media (max-width: 980px) {
  .hero .shell, .anatomy, .rules, .agents, .plane { grid-template-columns: minmax(0, 1fr); }
  .anatomy-figure { border-right: 0; border-bottom: 2px solid var(--ink); }
  .g3, .g4, .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fav-row { grid-template-columns: auto minmax(0, 1fr); }
  .fav-dl { grid-column: 1 / -1; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .logo-grid { grid-auto-flow: dense; }
  .donts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plane ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 620px) {
  .shell { width: calc(100% - 32px); }
  .g2, .g3, .g4, .logo-grid, .swatches, .plane ul, .captain-grid { grid-template-columns: minmax(0, 1fr); }
  .logo-card.primary, .logo-card.wide { grid-column: auto; }
  .swatches { grid-template-columns: minmax(0, 1fr) !important; }
  .donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copy-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .copy-btn { justify-self: start; }
  .say-row { grid-template-columns: minmax(0, 1fr); }
  .say-row > div:first-child { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .say-head { display: none; }
  .say-row > div:first-child::before { content: "We say"; display: block; margin-bottom: 4px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-dark); }
  .mech .say-row > div:first-child::before { content: "Looks generated"; color: #B0175A; }
  .mech .say-row > div:last-child::before { content: "Write instead" !important; color: var(--blue-dark) !important; }
  .say-row > div:last-child::before { content: "We avoid"; display: block; margin-bottom: 4px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #B0175A; }
  .hero-card dl { grid-template-columns: minmax(0, 1fr); }
  .header-meta { display: none; }
  .lockup-row { grid-template-columns: minmax(0, 1fr); }
  .lockup-row .lockup { --lockup-size: 18px; }
  .lockup { --lockup-size: 22px; }
}
@media (max-width: 820px) {
  .footer-bottom { font-size: .75rem; }
}
@media (max-width: 620px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-block: 54px 45px; }
  .footer-column { gap: 2px; }
  .footer-column a { min-height: 40px; }
  .footer-bottom { min-height: 0; padding-block: 22px 28px; align-items: flex-start; flex-direction: column; gap: 10px; }
}