/* DataWayfinder.ai — responsive layer
   The desktop design lives in inline styles; this file adapts it for tablet and phone.
   Breakpoints: 1279px (tablet: stack two-column layouts), 900px (small tablet: menu + grids), 600px (phone). */

/* ---------- all widths ---------- */
img { max-width: 100%; }
.nav-toggle, .nav-burger, .nav-cta { display: none; }
/* side gutters shrink gracefully instead of a fixed 120px */
[style*="max(120px, calc((100% - 1200px) / 2))"] {
  padding-left: max(40px, calc((100% - 1200px) / 2)) !important;
  padding-right: max(40px, calc((100% - 1200px) / 2)) !important;
}
[style*="width:1200px"] { width: 100% !important; max-width: 1200px; }
[style*="width:1000px"] { width: 100% !important; max-width: 1000px; }
[style*="width:892px"] { width: 100% !important; max-width: 892px; }
[style*="width:760px"] { max-width: 100%; }

/* ---------- tablet: ≤1279px ---------- */
@media (max-width: 1279px) {
  /* two-column page sections stack */
  section:not([style*="flex-direction:column"]) { flex-direction: column !important; align-items: stretch !important; gap: 48px !important; }
  section[style*="justify-content:center;gap:120px"] { flex-direction: row !important; flex-wrap: wrap; justify-content: center !important; gap: 32px 72px !important; }
  section[style*="display:flex;justify-content:center;padding"] { align-items: center !important; }
  /* fixed-width columns become full width */
  [style*="width:520px"], [style*="width:480px"], [style*="width:440px"], [style*="width:400px"],
  [style*="width:560px"], [style*="width:600px"], [style*="width:632px"] { width: 100% !important; max-width: 100% !important; }
  img[style*="width:632px"] { height: auto !important; aspect-ratio: 632 / 400; }
  [style*="max-width:640px"], [style*="max-width:620px"], [style*="max-width:680px"], [style*="max-width:720px"], [style*="max-width:820px"] { max-width: 100% !important; }
  /* home hero diagram centred under the copy */
  div[style*="flex:1;display:flex;justify-content:flex-end"] { justify-content: center !important; }
  /* systems hero: request-a-connector circle sits under the copy */
  section > div[style*="border-radius:999px"] { align-self: flex-start; }
  /* card rows wrap into 2 columns, then 1 */
  div[style*="display:flex;gap:24px;width:1200px"] { flex-wrap: wrap; }
  div[style*="display:flex;gap:24px;width:1200px"] > * { flex: 1 1 280px !important; }
  /* team photos stay three across, shrinking together */
  div[style*="display:flex;gap:32px;width:892px"] { gap: 20px !important; }
  div[style*="display:flex;gap:24px;width:1200px"] { height: auto !important; }
  /* headline rows with something on the right */
  div[style*="width:1200px;display:flex;"]:not([style*="flex-direction:column"]) { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  /* logo strip wraps */
  div[style*="justify-content:center;gap:56px"] { flex-wrap: wrap; gap: 28px 48px !important; }
  [style*="display:flex;gap:12px"] { flex-wrap: wrap; }
}

/* ---------- footer: ≤1100px ---------- */
@media (max-width: 1100px) {
  footer > div:first-child { flex-direction: column !important; gap: 40px !important; }
  footer div[style="display:flex;gap:80px"] { flex-wrap: wrap; gap: 32px 64px !important; }
}

/* ---------- small tablet: ≤900px ---------- */
@media (max-width: 900px) {
  /* header: hamburger menu */
  header { height: auto !important; min-height: 72px; flex-wrap: wrap; padding-top: 14px !important; padding-bottom: 14px !important; row-gap: 0; }
  header > a:first-child { order: 0; }
  header > a.btn { order: 1; margin-left: auto; height: 40px !important; padding: 0 16px; }
  .nav-burger { order: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 8px; border-radius: 6px; cursor: pointer; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { display: block; width: 20px; height: 2px; background: #2C4A6B; border-radius: 2px; position: relative; content: ""; }
  .nav-burger span::before { position: absolute; top: -6px; }
  .nav-burger span::after { position: absolute; top: 6px; }
  .nav-toggle:focus-visible + .nav-burger { outline: 2px solid #2C4A6B; outline-offset: 2px; }
  header nav.nav { order: 3; display: none !important; width: 100%; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 8px 0 4px; }
  .nav-toggle:checked ~ nav.nav { display: flex !important; }
  header nav.nav a { padding: 14px 0; border-top: 1px solid #EEE0C8; font-size: 16px; }
  /* grids collapse */
  div[style*="repeat(4, minmax(0, 1fr))"], div[style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  div[style*="grid-template-columns:260px 1.4fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; padding: 32px 0 !important; }
  div[style*="grid-template-columns:260px 1fr"] { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* home comparison: each row becomes a labelled stack */
  div[style*="grid-template-columns:220px 1.6fr 1fr 1fr"][style*="padding-bottom:18px"] { display: none !important; }
  div[style*="grid-template-columns:220px 1.6fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; }
  div[style*="grid-template-columns:220px 1.6fr 1fr 1fr"] > p:nth-child(3)::before { content: "Integrator-led project"; }
  div[style*="grid-template-columns:220px 1.6fr 1fr 1fr"] > p:nth-child(4)::before { content: "Doing it in-house"; }
  div[style*="grid-template-columns:220px 1.6fr 1fr 1fr"] > p:nth-child(n+3)::before { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #75593A; margin-bottom: 2px; }
  /* systems group headings */
  div[style*="justify-content:space-between;align-items:flex-end;border-bottom"] { flex-direction: column; align-items: flex-start !important; gap: 6px; }
  /* type scale */
  h1.display { font-size: 48px !important; }
  section h2[style*="font-size:40px"] { font-size: 34px !important; }
}

/* ---------- phone: ≤600px ---------- */
@media (max-width: 600px) {
  [style*="max(120px, calc((100% - 1200px) / 2))"] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="padding:9"], section[style*="padding:8"], section[style*="padding:7"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding:64px"] { padding-top: 40px !important; padding-bottom: 56px !important; }
  section:not([style*="flex-direction:column"]) { gap: 40px !important; }
  header > a.btn { display: none !important; }
  .nav-cta { display: block; order: 4; }
  .nav-toggle:checked ~ nav.nav .nav-cta, .nav-toggle:checked ~ nav.nav .nav-cta:hover { display: flex !important; margin-top: 12px; border-top: 0 !important; padding: 0 !important; color: #fff; }
  /* type */
  h1.display { font-size: 38px !important; }
  .h2 { font-size: 28px !important; }
  .lede { font-size: 18px !important; }
  section h2[style*="font-size:40px"] { font-size: 28px !important; }
  .big[style*="font-size:36px"] { font-size: 30px !important; }
  /* grids to one column (logo grids keep two) */
  div[style*="repeat(3, minmax(0, 1fr))"], div[style*="width:1200px;display:grid;grid-template-columns:repeat(4"],
  div[style*="repeat(2, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; }
  div[style*="display:flex;align-items:center;height:120px"] { height: 88px !important; }
  /* home hero diagram scales down */
  div[style*="position:relative;width:644px"] { zoom: .52; }
  /* reconciliation report: hide the "Matched" column */
  div[style*="grid-template-columns:1.3fr 1fr 1fr 90px"] { grid-template-columns: 1.2fr 1fr 1fr !important; }
  div[style*="grid-template-columns:1.3fr 1fr 1fr 90px"] > :nth-child(4) { display: none !important; }
  div[style*="justify-content:space-between;gap:16px;padding-bottom:16px"] { flex-wrap: wrap; }
  /* team photos stack, each the same size */
  div[style*="display:flex;gap:32px;width:892px"] { flex-direction: column; align-items: center; gap: 32px !important; }
  div[style*="display:flex;gap:32px;width:892px"] > * { width: 100%; max-width: 320px; }
  /* cards and forms breathe less */
  .card[style*="padding:40px"], form.card { padding: 24px !important; }
  div[style*="padding:56px 64px"] { padding: 40px 24px !important; }
  div[style*="padding:32px"] { padding: 24px !important; }
  /* footer bottom line */
  footer > div:last-child { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  footer div[style="display:flex;gap:80px"] { gap: 28px 48px !important; }
  span[aria-label="QuickBooks"] img { height: 28px !important; width: 28px !important; }
  span[aria-label="QuickBooks"] > span { font-size: 18px !important; }
  /* systems hero circle */
  a.circle-cta { width: 176px !important; height: 176px !important; }
}

@media (max-width: 360px) {
  div[style*="position:relative;width:644px"] { zoom: .46; }
}