/* Phone and small-tablet layout. Desktop styling remains in styles.css. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 1rem; }
  .wrap { width: calc(100% - 32px); }
  main, section, article, figure, .hero-copy, .hero-mark,
  .section-heading > *, .about-inner > *, .platform-detail > * { min-width: 0; }
  img { max-width: 100%; }
  .header { min-height: 0; padding-block: 14px; gap: 12px; }
  .brand { font-size: 17px; gap: 9px; }
  .brand img { width: 38px; height: 38px; }
  .brand-sub { font-size: 11px; }
  .header nav { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .header nav a { display: flex; justify-content: center; align-items: center; min-height: 44px; min-width: 0; gap: 6px; font-size: 14px; line-height: 1.3; text-align: center; }
  .header nav svg { width: 19px; height: 19px; }
  h1, .contact-page h1, .staff-page h1, .products-heading h1 {
    font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; overflow-wrap: break-word;
  }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2rem); line-height: 1.2; letter-spacing: -.6px; }
  h3, .product-summary h3, .contact-entry h2 { font-size: 1.4rem; line-height: 1.25; }
  .eyebrow { font-size: 12px; letter-spacing: 1px; margin-bottom: 18px; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 30px; gap: 20px; }
  .intro { font-size: 1rem; line-height: 1.6; margin-bottom: 22px; }
  .hero-mark { margin-top: 0; }
  .hero-mark img { max-width: 190px; }
  .hero-mark p { font-size: 12px; letter-spacing: 1px; margin-top: 12px; }
  .button { padding: 12px 18px; min-height: 44px; gap: 22px; }
  .section { padding-block: 40px; }
  .section-heading, .about-inner, .platform-detail, .contact-entry,
  .product-pair, .vector-product, .use-case-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section-heading .eyebrow { margin-bottom: 0; }
  .principles-inner { flex-direction: column; gap: 10px; padding-block: 18px; font-size: 12px; }
  .cap-grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .cap-grid article, .product-summary { padding: 22px; }
  .cap-grid article + article, .product-summary + article { border-left: 0; border-top: 1px solid var(--line); }
  .cap-grid h3 { margin: 16px 0 12px; }
  article p { margin-bottom: 18px; }
  .platform-detail { margin-top: 28px; }
  .about-copy .large { font-size: 1.2rem; }
  .roadmap-list { margin-top: 28px; }
  .roadmap-list li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 22px; }
  .level { display: flex; align-items: center; gap: 16px; font-size: 1.7rem; flex-wrap: wrap; }
  .use-case-list { margin-top: 28px; gap: 0; }
  .use-case-list > div { padding-block: 22px; }
  .use-case-list h3 { font-size: 1.3rem; }
  .contact-page, .staff-page, .products-page { padding-block: 32px 44px; min-height: 0; }
  .contact-directory, .integrated-products { margin-top: 28px; }
  .contact-entry { padding: 22px; }
  .directory-email, .contact-email { overflow-wrap: anywhere; }
  .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 28px 16px; margin-top: 28px; }
  .staff-member figcaption { padding-top: 12px; }
  .staff-member h2 { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; overflow-wrap: break-word; }
  .staff-member p { font-size: 14px; line-height: 1.4; }
  .product-section-heading > p:last-child { font-size: 1rem; margin-top: 16px; }
  .product-pair { gap: 0; margin-top: 24px; }
  .product-screen { margin-top: 28px; }
  .product-screen figcaption { flex-direction: column; padding: 18px; gap: 10px; }
  .product-screen figcaption > a { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
  .vector-product { margin-top: 40px; padding-top: 30px; }
  footer { padding-block: 28px 20px; }
  .footer-brand { font-size: 1.15rem; line-height: 1.4; }
  .footer-bottom { flex-wrap: wrap; gap: 14px; margin-top: 22px; }
}