/* Common responsive navigation and overflow safeguards. */
img, video, iframe { max-width: 100%; }
@media (max-width: 760px) {
  header { position: relative; grid-template-columns: minmax(0, 1fr) auto; min-height: 72px; padding: 10px var(--site-gutter); }
  header > .logo { min-width: 0; }
  header .logo img { display: block; width: 116px; height: auto; }
  header .nav-actions { gap: 8px; }
  header .nav-actions .btn { padding: 10px 12px; font-size: 10px; }
  .js header .nav-actions .menu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 8px; cursor: pointer; }
  .js header #nav { display: none; }
  .js header #nav.open { display: flex; }
  header #nav, header #nav.open { grid-column: 1 / -1; grid-row: 2; position: static; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; max-height: min(70vh, 480px); overflow-y: auto; border-top: 1px solid #eeeaf4; padding: 8px 0 4px; background: white; }
  header #nav > a { display: flex; align-items: center; min-height: 46px; padding: 10px 4px; white-space: normal; font-size: 14px; }
  header #nav > a + a { border-top: 1px solid #f2eef7; }
  header .menu:focus-visible, header a:focus-visible { outline: 3px solid #a78be9; outline-offset: 2px; }
  .wrap { max-width: 100%; }
  .about-hero-grid > *, .module-hero-grid > *, .module-detail > *, .contact-layout > *, .footer-grid > * { min-width: 0; }
  .about-actions, .module-actions { flex-wrap: wrap; }
  .footer-grid a, .footer-grid span, .contact-channel a { overflow-wrap: anywhere; }
  .shift-table-wrap, .shift-employee-table, .overview-tablet-tabs { -webkit-overflow-scrolling: touch; }
}
@media (max-width: 360px) {
  header .logo img { width: 103px; }
  header .nav-actions .btn { padding: 10px 8px; font-size: 9px; }
  .about-actions .btn { white-space: normal; }
}
/* The former interior page now starts directly below the main navigation. */
.about-page .about-hero { padding-top: clamp(32px, 5vw, 64px); }
@media (max-width: 360px) {
  .about-flow.about-flow-network { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; padding: 0; overflow: visible; }
  .about-flow-network .flow-connectors { display: none; }
  .about-flow-network .flow-center { position: static; grid-column: 1 / -1; justify-self: center; margin-bottom: 6px; transform: none; animation: none; }
  .about-flow-network .flow-module { position: static; width: auto; min-width: 0; min-height: 68px; animation: none; }
  .about-flow-network .flow-module > span { min-width: 0; }
  .about-flow-network .flow-module small { white-space: normal; }
  .about-flow-network .flow-module em { display: none; }
}
/* Keep in-page breadcrumbs in normal flow on small screens. */
.nav-mobile-login { display: none; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#form-status { font-size: 14px; line-height: 1.5; margin-top: 16px; }
#form-status[data-state="error"] { color: #b42318; }
#form-status[data-state="success"] { color: #087443; }
@media (max-width: 760px) {
  header #nav > a.nav-mobile-login { display: flex; color: #754cf3; }
  main nav.feature-breadcrumb, main nav.about-breadcrumb { position: static; top: auto; left: auto; right: auto; z-index: auto; max-height: none; overflow: visible; box-shadow: none; background: transparent; }
  .feature-breadcrumb { padding: 20px 0; }
  .moved-home-proof { padding-left: 22px; padding-right: 22px; }
  .moved-home-proof .pitch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .moved-home-proof .pitch-facts > .pitch-fact { min-width: 0; min-height: 100px; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; padding: 12px; }
  .moved-home-proof .pitch-fact b, .moved-home-proof .pitch-fact-label { overflow-wrap: anywhere; }
  .contact-main .form-grid { grid-template-columns: 1fr !important; }
  .contact-main input { font-size: 16px !important; }
}
@media (max-width: 360px) {
  .moved-home-proof .pitch-facts { grid-template-columns: 1fr; }
  .moved-home-proof .pitch-facts > .pitch-fact { min-height: 75px; }
}
/* Mobile mockups retain the same width-to-height ratio as the desktop phones. */
@media (max-width: 650px) {
  .rota-mobile-showcase {
    container-type: inline-size;
    height: auto;
    aspect-ratio: 1 / 1.18;
  }
  .rota-mobile-showcase .app-mockup {
    width: 47%;
    height: auto;
    aspect-ratio: 225 / 484;
  }
  .rota-mobile-showcase .login-art { height: clamp(55px, 30cqw, 100px); }
  .rota-mobile-showcase .mockup-field { height: clamp(21px, 7cqw, 29px); }
  .rota-mobile-showcase .mockup-login-button { height: clamp(21px, 7cqw, 27px); }
  .rota-mobile-showcase .dashboard-modules > div { height: clamp(36px, 13cqw, 55px); }
  .rota-mobile-showcase .dashboard-notice { padding: clamp(4px, 1.8cqw, 7px); }
  .rota-mobile-showcase .dashboard-notice p { margin: 3px 0; }
  .rota-mobile-showcase .dashboard-dots { margin: 4px 0; }
}
