*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #E2E688; color: #2B2E12; }
a { color: #2B2E12; }
a:hover { color: #000000; }
img { max-width: 100%; }
.page { width: 100%; max-width: 1440px; margin: 0 auto; min-height: 100vh; overflow-x: hidden; }
a:focus-visible { outline: 2px solid #C9402B; outline-offset: 4px; }

/* Tablet and down */
@media (max-width: 1024px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Phone */
@media (max-width: 1024px) {
  .site-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-top: 24px !important; }
  .site-header > a, .site-header > span { font-size: 13px !important; }
  .site-header nav { flex-wrap: wrap; gap: 8px 18px !important; font-size: 14px !important; }

  .stack { flex-direction: column !important; align-items: stretch !important; }
  .stack > * { flex: 1 1 auto !important; max-width: 100% !important; }
  .stack > img, .stack > a > img { width: 100% !important; }
  .fb { flex: 1 1 auto !important; width: 100% !important; }

  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gx { grid-template-columns: minmax(0, 1fr) !important; }
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nw { white-space: normal !important; }

  h1, h2, h3, p, span, a, blockquote { overflow-wrap: break-word; }
}

@media (max-width: 1024px) {
  .wrapx { flex-wrap: wrap !important; row-gap: 10px !important; column-gap: 20px !important; }
  .page nav a { white-space: nowrap; }
  .stack > * { height: auto !important; }
  .stack > span[aria-hidden="true"] { display: none !important; }
  .g2 > *, .g3 > *, .gx > * { grid-column: auto !important; }

  /* Home hero */
  .hero { height: auto !important; display: flex; flex-direction: column; gap: 28px; padding-bottom: 0; }
  .hero > * { position: static !important; width: 100% !important; }
  .hero > h1 { order: 1; white-space: normal !important; }
  .hero > div:not([aria-hidden]) { order: 2; gap: 24px; }
  .hero > div[aria-hidden] { display: none !important; }
  .hero > img { order: 3; height: auto !important; aspect-ratio: auto !important; max-width: 420px !important; align-self: center; background: linear-gradient(to bottom, transparent 16%, #C9402B 16%); }
}
@media (max-width: 1024px) {
  .g4 > *, .g5 > * { grid-column: auto !important; }
}

@media (max-width: 1024px) {
  .g6, .g8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; row-gap: 20px !important; }
  /* video play buttons */
  span[aria-hidden="true"][style*="border-radius: 50%"][style*="position: absolute"] { left: 50% !important; top: 50% !important; margin: 0 !important; transform: translate(-50%, -50%); width: 64px !important; height: 64px !important; }
  span[aria-hidden="true"][style*="border-radius: 50%"][style*="position: absolute"] svg { width: 26px; height: 26px; }

  /* AI page: three decisions */
  section[aria-labelledby="decisions"] > img { float: none !important; width: 100% !important; margin: 0 0 8px !important; shape-outside: none !important; }
  section[aria-labelledby="decisions"] > span { position: static !important; display: block; padding: 0 0 8px; }
  section[aria-labelledby="decisions"] { display: flex; flex-direction: column; }
  section[aria-labelledby="decisions"] > h2 { order: -2; }
  section[aria-labelledby="decisions"] > img { order: -1; }

  /* AI page: product phones */
  section[aria-labelledby="products"] > div:last-child { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; }
  section[aria-labelledby="products"] > div:last-child > div { margin-top: 0 !important; gap: 10px !important; }
  section[aria-labelledby="products"] > div:last-child a { font-size: 15px !important; }
  section[aria-labelledby="products"] > div:last-child span { font-size: 11px !important; }

  /* AI page: safety diagram becomes a list */
  div[role="img"][aria-label^="Diagram"] { position: static !important; height: auto !important; display: flex; flex-direction: column; gap: 18px; aspect-ratio: auto !important; }
  div[role="img"][aria-label^="Diagram"] > svg { display: none !important; }
  div[role="img"][aria-label^="Diagram"] > div, div[role="img"][aria-label^="Diagram"] > p { position: static !important; width: auto !important; max-width: none !important; text-align: left !important; align-items: flex-start !important; }
  div[role="img"][aria-label^="Diagram"] > div:nth-of-type(5)::before { content: "Layers of safety"; display: block; margin: 12px 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  div[role="img"][aria-label^="Diagram"] > div:nth-of-type(11) { margin-top: 12px; }

  /* Champions: phones rising from a line */
  .g3[style*="overflow: hidden"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
}

@media (max-width: 1024px) {
  .g4[style*="height: 380px"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; height: 210px !important; padding: 0 !important; }
}
@media (max-width: 1024px) {
  .g4[style*="height: 380px"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  .g2, .g3 { grid-template-columns: minmax(0, 1fr) !important; }
  .g3[style*="overflow: hidden"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .hero > img { max-width: 480px !important; }
  section[aria-labelledby="decisions"] > img { max-width: 560px !important; align-self: center; }
}

@media (min-width: 1025px) {
  .hero > div:not([aria-hidden]) { width: min(700px, calc(100% - 540px)) !important; }
}
@media (max-width: 1340px) {
  .nw { white-space: normal !important; }
}