/* Junturi landing: responsive layer (s315, owner ruling: "I add a responsive layer").
   The LAND-1 design ships desktop-only (its only @media is prefers-reduced-motion) and all of its
   layout is inline style, so these rules target the inline declarations by attribute selector and
   need !important to win. No copy, colour or type family changes here: layout only.
   Breakpoints: 900px (tablet: header, hero, two-up claim rows) and 560px (phone: gutters, phone
   mock-ups, headline size). Verified by build_check.py at 360, 390, 430, 768, 1024, 1440. */

@media (max-width: 900px) {
  /* header: brand + the primary CTA only; the section links are all reachable by scrolling */
  header[data-screen-label="Header"] nav > a { display: none !important; }

  /* hero: the photo spans the row, the two app phones sit side by side beneath it */
  div[style*="grid-template-columns: minmax(0px, 260px) minmax(0px, 1fr) minmax(0px, 260px)"] {
    grid-template-columns: 1fr 1fr !important;
    justify-items: center !important;
    row-gap: 28px !important;
  }
  div[style*="grid-template-columns: minmax(0px, 260px) minmax(0px, 1fr)"] > div[style*="height: 640px"] {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    aspect-ratio: 768 / 1376;   /* the photo's own shape: the twin-pins mark and the table both stay in frame */
  }
  div[style*="grid-template-columns: minmax(0px, 260px) minmax(0px, 1fr)"] > div[style*="width: 260px"] {
    transform: none !important;
    justify-self: center !important;
  }

  /* the six claims: text and phones stack instead of sitting two-up at a 320px minimum */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }
}

@media (max-width: 560px) {
  /* gutters: 32px -> 20px on every centred container */
  header > div, section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  div[data-screen-label="Supporting cast strip"] { margin-left: -20px !important; margin-right: -20px !important;
    padding-left: 20px !important; padding-right: 20px !important; }

  section[data-screen-label="Hero"] h1 { font-size: clamp(40px, 12vw, 64px) !important; }

  /* hero */
  div[style*="grid-template-columns: minmax(0px, 260px) minmax(0px, 1fr)"] { gap: 14px !important; margin-top: 40px !important; }
  div[style*="grid-template-columns: minmax(0px, 260px) minmax(0px, 1fr)"] > div[style*="width: 260px"] { zoom: 0.62; }

  /* app phone mock-ups inside the claims scale down so two still fit a phone screen */
  /* Claims 1 and 4 pair a 220px phone (staggered by translateY(28px)) with a 260px one. Wrapped onto two
     rows, the stagger pushes the first phone into the second (owner-found on iPhone, s315), so the pair
     stays on ONE row and scales to fit: (220 + 260) * 0.64 + 12 = 319px, inside a 320px-wide content box. */
  div[data-screen-label^="Claim"] div[style*="width: 260px; height: 562px"] { zoom: 0.64; }
  div[data-screen-label^="Claim"] div[style*="width: 220px; height: 476px"] { zoom: 0.64; }
  div[data-screen-label^="Claim"] div[style*="justify-content: center; gap: 20px"] { gap: 12px !important; flex-wrap: nowrap !important; }

  /* footer bottom line wraps rather than overflowing */
  footer div[style*="border-top: 1px solid"] { flex-wrap: wrap !important; gap: 10px !important; }
}

/* The staggered phone pair (Claims 1 and 4) stays on one row at EVERY width: the design's own two-column
   claim rows are ~452px wide between 900 and ~1150px, too narrow for 220 + 260 + 20 = 500px, so it
   wrapped and overlapped there too. Where one row is too narrow, the pair scales. */
div[data-screen-label^="Claim"] div[style*="justify-content: center; gap: 20px"] { flex-wrap: nowrap !important; }
@media (min-width: 901px) and (max-width: 1180px) {
  div[data-screen-label^="Claim"] div[style*="width: 260px; height: 562px"],
  div[data-screen-label^="Claim"] div[style*="width: 220px; height: 476px"] { zoom: 0.86; }
}
@media (min-width: 561px) and (max-width: 640px) {
  div[data-screen-label^="Claim"] div[style*="width: 260px; height: 562px"],
  div[data-screen-label^="Claim"] div[style*="width: 220px; height: 476px"] { zoom: 0.85; }
}