/* Responsive finishing layer. Keep the approved desktop composition; give
   real content room to wrap instead of clipping it or shrinking the type. */
#mock :is(.head, .bento, .sgrid, .pgrid, .pcards, .tiles, .fgrid, .fcols) > * {
  min-width: 0;
}
#mock :is(.doc, .panel, .trav, .runstrip) { min-width: 0; }
#mock .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#mock .tile > * { min-width: 0; max-width: 100%; }
#mock .tile h3 { overflow-wrap: anywhere; }
#mock .mail { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
#mock .hero .hnav .btn.sm { min-height: 44px; }
#mock .tag { max-width: 100%; }
#mock .tag b { flex-shrink: 0; }
#mock .tag i { line-height: 1.3; }
#mock .btn { min-height: 44px; max-width: 100%; }
#mock .route-mobile { display: none; }
#mock .phone-eyebrow, #mock .phone-proof, #mock .phone-footer-contact { display: none; }

@media (max-width: 1100px) {
  /* The tablet hero needs the same generous line lengths as the phone. */
  #mock .hero .hgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 30px;
    padding-bottom: 38px;
  }
  #mock .hero .sub { max-width: 38ch; }
  #mock .lineup-display {
    width: min(100%, 460px);
    justify-self: center;
  }
  #mock .hero .stage { aspect-ratio: 1.2; }
  #mock .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mock .strip div:nth-child(3) { border-left: 0; }
  #mock .strip div:nth-child(n + 3) { border-top: 1px solid var(--hl); }
  #mock .strip div { padding: 20px; }
  #mock .globe { width: min(400px, 100%); }
  #mock .glegend { position: relative; bottom: auto; margin-top: 2px; }
  #mock .globe canvas { aspect-ratio: 1; height: auto; }
  #mock .edge { row-gap: 32px; }
  #mock .ecol { gap: 28px; }
}

@media (max-width: 860px) {
  #mock .head { gap: 22px; }
  #mock .head .side { gap: 20px; }
  #mock .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #mock .stats div { padding: 24px 18px; }
  #mock .stats div:nth-of-type(odd) { padding-left: 0; }
  #mock .stats .smp { max-width: 100%; line-height: 1.4; }
  #mock .t-head { flex-wrap: wrap; line-height: 1.4; }
  #mock .t-head > * { min-width: 0; }
  #mock .kv { gap: 12px; }
  #mock .kv span { min-width: 0; }
  #mock .kv b { flex-shrink: 0; }
}

/* Phone composition follows the reference's compact hero, single primary
   action and full-width reading column. Section-specific layouts live in
   omni-mobile-sections.css; the progressively enhanced menu/carousel is in
   omni-mobile-components.css. */
@media (max-width: 700px) {
  body.day { --page-gutter: 0px; padding-inline: 0; }
  #mock { --pad: 20px; --sec: 52px; }
  #mock .sheet { border: 0; padding-top: 0; }
  #mock .slab { margin: 0 5px 5px; border-radius: 24px; }
  #mock .sec { padding: 52px 20px; }
  #mock .slab-pad { padding: 38px 20px; }
  #mock :is(.sec,.slab) { scroll-margin-top: 82px; }
  #mock .rule::before, #mock .rule::after { display: none; }
  #mock .rule { margin-inline: 20px; }
  /* Hidden by CSS, not by the mount script, so the tablet header never flashes before the phone notch appears. */
  #mock .notchbar, #mock .hero .hnav { display: none; }
  #mock .notchbar .nchip { display: none; }
  #mock .tag { font-size: 10.5px; line-height: 1.2; }
  #mock .tag i { padding: 5px 9px; }
  #mock .h2 { font-size: 30px; line-height: 1.06; letter-spacing: -.04em; }
  #mock .head { gap: 18px; padding-bottom: 24px; margin-bottom: 24px; }
  #mock .head p { font-size: 15px; line-height: 1.5; }
  #mock .head .side { gap: 18px; }
  #mock .btn { width: fit-content; min-height: 48px; font-size: 14px; gap: 12px; padding-left: 18px; white-space: normal; line-height: 1.25; }
  #mock .btn .arr { width: 34px; height: 34px; }
  #mock .cta { gap: 12px; margin-top: 22px; }

  #mock .hero .hgrid { grid-template-columns: minmax(0,1fr); padding: 20px 30px 16px; gap: 14px; }
  #mock .hero :is(.pillb,.offer,.strip), #mock .hero .cta .ghost { display: none; }
  #mock .hero .phone-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(27,29,74,.08); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.3; }
  #mock .hero .phone-eyebrow em { font: 500 10px/1.2 var(--mono); font-style: normal; letter-spacing: .04em; background: var(--ok-bg); color: var(--ok-deep); padding: 6px 8px; border-radius: 999px; white-space: nowrap; }
  #mock .hero .h1 { font-size: clamp(36px,9.8vw,44px); line-height: 1.01; letter-spacing: -.048em; margin-top: 18px; }
  /* The chip word gets room for the descenders of "shipped" so the p's stay inside the box. */
  #mock .hero .chipw { padding: .04em .16em .17em; }
  #mock .hero .sub { font-size: 16px; line-height: 1.45; font-weight: 400; letter-spacing: -.015em; max-width: 36ch; margin-top: 18px; text-wrap: pretty; }
  #mock .hero .sub em { font-weight: 600; }
  #mock .hero .cta { margin-top: 22px; }
  #mock .hero .phone-proof { display: block; margin-top: 16px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
  /* Phones: no quote button in the hero (the blind menu has it). The US + CN pill takes the button's slot under the sub. */
  #mock .hero .cta { display: none; }
  #mock .hero .hgrid > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
  #mock .hero .h1 { margin-top: 0; }
  #mock .hero .phone-eyebrow { order: 1; margin-top: 22px; }
  #mock .hero .phone-proof { order: 2; }
  #mock .lineup-display { width: min(100%,300px); justify-self: center; }
  #mock .hero .stage { aspect-ratio: 1.2; }
  /* Status pills at 80% of the earlier phone size. */
  #mock #lineup-stage[data-pill-layout="orbit"] .fc { font-size: 8.5px; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc .pill-face { padding: 4px 6px 4px 4px; gap: 4px; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc i { width: 14px; height: 14px; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc i .ic { width: 10px; height: 10px; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc.now i::before { width: 5px; height: 5px; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc.f1 { left: 1%; top: 7%; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc.f2 { right: 1%; top: 25%; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc.f3 { left: 3%; bottom: 15%; }
  #mock #lineup-stage[data-pill-layout="orbit"] .fc.f4 { right: 3%; top: auto; bottom: 0; }
  /* The pause control stays quiet on phones too (keyboard focus only), as on desktop. */

  #mock .mqrow { gap: 14px; padding: 26px 20px; }
  #mock .mqrow > b { font-size: 10.5px; }
  #mock .mq ul { font-size: 14px; gap: 20px; }
  #mock .mq li { gap: 20px; }
  #mock .mq li::after { width: 20px; }
  /* Reduced motion keeps the same compact strip, with manual horizontal
     scrolling instead of expanding every marquee item into a long list. */
  #mock .mq { overflow-x: auto; scrollbar-width: none; }
  #mock .mq::-webkit-scrollbar { display: none; }
  #mock .mq-track { width: max-content; flex-wrap: nowrap; }
  #mock .mq ul { flex-wrap: nowrap; }

  #mock #capabilities .slab-pad { padding: 36px 26px 30px; }
  #mock #capabilities .head.c { text-align: left; justify-items: start; gap: 0; padding-bottom: 0; margin-bottom: 24px; }
  #mock #capabilities .h2 { font-size: 32px; max-width: 17ch; }
  #mock #capabilities .head p { margin-top: 14px; font-size: 14px; line-height: 1.5; }
  #mock .edge { gap: 16px; margin-top: 0; }
  #mock .globe { width: min(280px,100%); margin-bottom: 0; }
  /* The legend escapes the 280px globe box so both pills sit on one centered row; at 320 they still wrap. */
  #mock .glegend { position: relative; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 52px); justify-content: center; margin-top: 10px; gap: 7px; font-size: 9.5px; line-height: 1.3; }
  #mock .glegend li { gap: 5px; padding: 4px 8px 4px 4px; }
  #mock .glegend b { padding: 4px 6px; }
  #mock .edge-cta { margin-top: 24px; justify-content: center; }
  #mock .edge-cta .btn { font-size: 13px; }
}

@media (max-width: 360px) {
  #mock .hero .hgrid { padding-inline: 22px; }
  #mock .hero .h1 { font-size: 34px; }
  #mock .hero .sub { font-size: 15px; }
  #mock .hero .phone-proof { font-size: 11px; }
  #mock #capabilities .slab-pad { padding-inline: 20px; }
}

@media (max-width: 480px) {
  #mock .route { display: block; }
  #mock .route-mobile { display: none; width: 100%; padding: 0 6px; }
  #mock .route-mobile > p { margin-bottom: 10px; font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
  #mock .route-mobile ul { display: grid; gap: 8px; }
  #mock .route-mobile li { display: grid; grid-template-columns: minmax(0,1fr) 24px 36px; align-items: center; gap: 10px; }
  #mock .route-mobile li > span { padding: 5px 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 500; line-height: 1.3; }
  #mock .route-mobile small { display: block; font: 500 10px/1.4 var(--mono); }
  #mock .route-mobile i { font-style: normal; font-size: 20px; text-align: center; }
  #mock .route-mobile b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 13px; }
}