/* Kalide — mobile layer. Pages are laid out with inline styles; below 760px
   these rules reflow them. Selectors match inline-style fragments. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }

  /* fixed-width page shells */
  [style*="width:1280px"],
  [style*="width: 1280px"] { width: auto !important; max-width: 100% !important; }
  [style*="width:520px"],
  [style*="width: 520px"],
  [style*="width:460px"],
  [style*="width: 460px"] { width: 100% !important; }
  [style*="height:520px"],
  [style*="height: 520px"],
  [style*="height:400px"],
  [style*="height: 400px"],
  [style*="height:360px"],
  [style*="height: 360px"] { height: auto !important; min-height: 240px; }

  /* side padding */
  [style*="padding:24px 56px"],
  [style*="padding: 24px 56px"] { padding: 16px 20px !important; }
  [style*="padding:44px 56px"],
  [style*="padding: 44px 56px"] { padding: 32px 20px !important; }
  [style*="padding:16px 56px"],
  [style*="padding: 16px 56px"] { padding: 12px 20px !important; }
  [style*="padding:52px 56px"],
  [style*="padding: 52px 56px"] { padding: 36px 20px !important; }
  [style*="padding:40px 56px"],
  [style*="padding: 40px 56px"] { padding: 28px 20px !important; }
  [style*="padding:56px 56px"],
  [style*="padding: 56px 56px"] { padding: 40px 20px !important; }
  [style*="padding:80px 56px"],
  [style*="padding: 80px 56px"] { padding: 52px 20px !important; }
  [style*="padding:64px 56px"],
  [style*="padding: 64px 56px"] { padding: 44px 20px !important; }
  [style*="padding:88px 56px"],
  [style*="padding: 88px 56px"] { padding: 52px 20px !important; }
  [style*="padding:72px 56px"],
  [style*="padding: 72px 56px"] { padding: 48px 20px !important; }
  [style*="padding:20px 56px"],
  [style*="padding: 20px 56px"] { padding: 16px 20px !important; }
  [style*="padding:28px 56px"],
  [style*="padding: 28px 56px"] { padding: 20px 20px !important; }
  [style*="padding:96px 56px"],
  [style*="padding: 96px 56px"] { padding: 56px 20px !important; }
  [style*="padding:56px;"], [style*="padding: 56px;"] { padding: 28px 20px !important; }

  /* grids collapse to one column */
  [style*="grid-template-columns:1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr;"],
  [style*="grid-template-columns:1fr 1.15fr"],
  [style*="grid-template-columns: 1fr 1.15fr"],
  [style*="grid-template-columns:1fr 1fr 1fr;"],
  [style*="grid-template-columns: 1fr 1fr 1fr;"],
  [style*="grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)"],
  [style*="grid-template-columns: minmax(0,1.15fr) minmax(0,1fr)"],
  [style*="grid-template-columns:minmax(0px, 1.15fr) minmax(0px, 1fr)"],
  [style*="grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 1fr)"] {
    grid-template-columns: minmax(0,1fr) !important; gap: 28px !important;
  }
  /* four-column footers become two */
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }

  /* side-by-side feature rows stack; image first */
  [style*="gap:52px"],
  [style*="gap: 52px"],
  [style*="gap:56px"],
  [style*="gap: 56px"] { flex-direction: column !important; gap: 24px !important; align-items: stretch !important; }
  [style*="flex-direction:row-reverse"],
  [style*="flex-direction: row-reverse"] { flex-direction: column !important; }
  [style*="gap:52px"] > *,
  [style*="gap: 52px"] > *,
  [style*="gap:56px"] > *,
  [style*="gap: 56px"] > * { flex: none !important; width: 100% !important; }
  [style*="justify-content:space-between;align-items:flex-start;gap:40px"],
  [style*="justify-content: space-between;align-items:flex-start;gap:40px"],
  [style*="justify-content:space-between; align-items: flex-start; gap: 40px"],
  [style*="justify-content: space-between; align-items: flex-start; gap: 40px"] { flex-direction: column !important; gap: 20px !important; }

  /* type */
  [style*="font-size:72px"],
  [style*="font-size: 72px"] { font-size: 40px !important; line-height: 1.08 !important; }
  [style*="font-size:64px"],
  [style*="font-size: 64px"] { font-size: 42px !important; }
  [style*="font-size:62px"],
  [style*="font-size: 62px"] { font-size: 40px !important; }
  [style*="font-size:54px"],
  [style*="font-size: 54px"] { font-size: 38px !important; }
  [style*="font-size:44px"],
  [style*="font-size: 44px"] { font-size: 32px !important; }
  [style*="font-size:21px"],
  [style*="font-size: 21px"],
  [style*="font-size:22px"],
  [style*="font-size: 22px"] { font-size: 18px !important; }


  /* homepage hero: keep the long words on one line and the rag even */
  #top { padding-top: 40px !important; padding-bottom: 36px !important; }
  #top h1 { font-size: clamp(44px, 13.5vw, 64px) !important; line-height: .95 !important; letter-spacing: -.04em !important; text-align: left !important; text-wrap: balance !important; hyphens: none !important; }
  #top p { font-size: 18px !important; margin-top: 22px !important; text-align: left !important; text-wrap: pretty !important; }


  /* Collage hero shots: 2x2 on desktop, single column on phones */
  [style*="grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;"] { grid-template-columns: 1fr !important; }


  /* Collage effect grid: 2 across on phones */
  [style*="grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;"] { grid-template-columns: 1fr 1fr !important; }

  /* header nav */
  /* big inset cards */
  [style*="padding:44px 48px"],
  [style*="padding: 44px 48px"] { padding: 28px 22px !important; }
  [style*="padding:56px 52px"],
  [style*="padding: 56px 52px"],[style*="padding:48px 52px"],
  [style*="padding: 48px 52px"] { padding: 32px 22px !important; }

  /* Scoring Tools two-up bullet rows */
  [style*="gap:26px;font-size:14px"], [style*="gap: 26px; font-size: 14px"] { flex-direction: column !important; gap: 12px !important; }
  [style*="gap:26px;font-size:14px"] > *, [style*="gap: 26px; font-size: 14px"] > * { flex: none !important; }
  /* spanning cells in collapsed grids */
  [style*="grid-column:span"], [style*="grid-column: span"] { grid-column: auto !important; }

  /* header: keep logo and nav on one clean line */
  header { gap: 12px !important; }
  header > a { gap: 9px !important; flex: none !important; }
  header > a svg:first-child { width: 26px !important; height: 26px !important; }
  header > a svg:nth-child(2) { width: 96px !important; height: 14px !important; }
  header nav { gap: 12px !important; flex: none !important; }
  header nav a { white-space: nowrap !important; font-size: 13.5px !important; }
  header nav a[style*="padding"] { padding: 10px 16px !important; }
}
@media (max-width: 400px) {
  /* narrowest phones: drop the wordmark, keep the K */
  header > a svg:nth-child(2) { display: none !important; }
}

/* Wide screens: backgrounds run full-bleed, content stays in a centred column. */
@media (min-width: 761px) {
  html, body { background: #f4efe4 !important; }
  [style*="width:1280px;margin:0 auto"], [style*="width: 1280px; margin: 0px auto"] { width: auto !important; max-width: none !important; }
  [style*="width:1280px;margin:0 auto"] > header:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width:1280px;margin:0 auto"] > section:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width:1280px;margin:0 auto"] > footer:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width:1280px;margin:0 auto"] > div:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width:1280px;margin:0 auto"] > article:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width: 1280px; margin: 0px auto"] > header:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width: 1280px; margin: 0px auto"] > section:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width: 1280px; margin: 0px auto"] > footer:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="width: 1280px; margin: 0px auto"] > div:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]) ,
  [style*="width: 1280px; margin: 0px auto"] > article:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]) {
    padding-left: max(56px, calc((100% - 1168px) / 2)) !important;
    padding-right: max(56px, calc((100% - 1168px) / 2)) !important;
  }
  [style*="max-width:1180px;margin:0 auto"], [style*="max-width: 1180px; margin: 0px auto"] { width: auto !important; max-width: none !important; }
  [style*="max-width:1180px;margin:0 auto"] > header:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width:1180px;margin:0 auto"] > section:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width:1180px;margin:0 auto"] > footer:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width:1180px;margin:0 auto"] > div:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width:1180px;margin:0 auto"] > article:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width: 1180px; margin: 0px auto"] > header:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width: 1180px; margin: 0px auto"] > section:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width: 1180px; margin: 0px auto"] > footer:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]),
  [style*="max-width: 1180px; margin: 0px auto"] > div:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]) ,
  [style*="max-width: 1180px; margin: 0px auto"] > article:not([style*="position:fixed"]):not([style*="position: fixed"]):not([style*="position:absolute"]):not([style*="position: absolute"]) {
    padding-left: max(56px, calc((100% - 1068px) / 2)) !important;
    padding-right: max(56px, calc((100% - 1068px) / 2)) !important;
  }
}

@media (max-width: 760px) {
  [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.3fr 1.5fr 1fr"], [style*="grid-template-columns: 1.3fr 1.5fr 1fr"],
  [style*="grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)"], [style*="grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)"], [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.3fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)"], [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.2fr)"],
  [style*="grid-template-columns:140px 1fr"], [style*="grid-template-columns: 140px 1fr"] {
    grid-template-columns: minmax(0,1fr) !important; gap: 8px 20px !important;
  }
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(4,minmax(0,1fr))"], [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] {
    grid-template-columns: 1fr 1fr !important; gap: 20px 14px !important;
  }
  /* requirements table: hide the empty header row, label each value instead */
  [style*="grid-template-columns:140px 1fr 1fr;gap:24px;padding:0 0 12px"], [style*="grid-template-columns: 140px 1fr 1fr; gap: 24px; padding: 0px 0px 12px"] { display: none !important; }
  [style*="grid-template-columns:140px 1fr 1fr;gap:24px;padding:16px 0"] > div:nth-child(2)::before,
  [style*="grid-template-columns: 140px 1fr 1fr; gap: 24px; padding: 16px 0px"] > div:nth-child(2)::before { content: "Mac: "; font-weight: 700; }
  [style*="grid-template-columns:140px 1fr 1fr;gap:24px;padding:16px 0"] > div:nth-child(3)::before,
  [style*="grid-template-columns: 140px 1fr 1fr; gap: 24px; padding: 16px 0px"] > div:nth-child(3)::before { content: "Windows: "; font-weight: 700; }
}
