/* Layout overrides are separate from the supplied artwork and animation code. */
:root {
  --marketing-width: min(2880px, calc(100vw - clamp(40px, 10vw, 320px)));
}

/* A tall monitor should not add a taller empty area above the headline. */
:root [data-herotext] { padding-block: clamp(40px, 6vh, 80px) 24px !important; }
:root [data-heronote] { margin-top: 20px !important; width: calc(100% - 32px); }
:root [data-herosec] { padding-bottom: clamp(40px, 4vw, 64px) !important; }
:root [data-heroacts] > a { min-height: 48px; }
:root [data-fcol] > a { overflow-wrap: anywhere; }
:root [data-mch2] { font-size: clamp(38px, 6.5vw, 92px) !important; line-height: 0.98 !important; letter-spacing: -0.035em !important; }

/* Give large displays a larger layout, without stretching paragraphs or icons. */
@media (min-width: 1600px) {
  :root [data-pill] { max-width: var(--marketing-width) !important; }
  :root [data-sec] > div:not([data-mcstage]),
  :root [data-fpad] > div { max-width: var(--marketing-width) !important; }
  :root [data-sec][data-pad] { padding-inline: 0 !important; }
  :root [data-sec] > div:not([data-mcstage]) { width: var(--marketing-width) !important; }
  :root [data-h1] { font-size: clamp(104px, 6vw, 128px) !important; }
  :root [data-demosec] { padding-inline: 0 !important; }
  :root [data-demostage] { width: var(--marketing-width) !important; margin-inline: auto !important; }
  :root [data-mcstage] { width: min(100%, 1680px) !important; }
  :root [data-founding] > div:first-child > div:first-child {
    aspect-ratio: auto !important;
    height: 340px;
    flex: 0 0 auto;
  }
}

/* Use the actual available column width, including tablet split-screen views. */
@media (max-width: 1024px) {
  :root [data-herotext] { padding-top: 48px !important; }
  :root [data-founding] > div:first-child { height: auto !important; }
  :root #why-choose-detail { min-height: 320px; }
  :root [data-founding-grid] { grid-auto-rows: minmax(250px, auto) !important; }
  :root [data-why-card] { height: auto !important; min-height: 250px; }
}
@media (max-width: 767px) {
  :root [data-herotext] { padding-top: 40px !important; }
  :root [data-h1] { font-size: clamp(38px, 7.5vw, 56px) !important; line-height: 1.08 !important; }
  :root [data-herolead] { margin-top: 22px !important; }
  :root [data-heroacts] { margin-top: 24px !important; }
  :root [data-founding-grid] { grid-auto-rows: minmax(220px, auto) !important; }
  :root [data-why-card] { min-height: 220px; }
  :root #why-choose-detail { min-height: clamp(280px, calc(900px - 110vw), 550px); }
  :root [data-faq] summary { gap: 16px; }
  :root [data-faq] > p { padding-right: 0; }
}

/* Keep the integration headline readable inside the phone content column. */
@media (max-width: 640px) {
  :root section:has([data-integration-title]) > div:first-child { padding-inline: 8px !important; }
  :root [data-integration-title] { font-size: clamp(30px, 5.4vw, 42px) !important; line-height: 1.1 !important; letter-spacing: -1px !important; }
  :root [data-integration-title] + p { font-size: 18px !important; }
}

/* Show every role card on phones/tablets rather than clipping later cards. */
@media (max-width: 1180px) {
  :root [data-role-gallery] { margin-inline: 0 !important; padding-inline: 0 !important; }
  :root [data-role-track] { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px !important; transform: none !important; }
  :root [data-role-track] > a { width: 100% !important; height: auto !important; min-height: 240px; }
  :root [data-role-track] > a > span:last-child { margin-top: 24px !important; font-size: 20px !important; line-height: 1.45 !important; }
}
@media (max-width: 640px) {
  :root [data-role-track] { grid-template-columns: minmax(0,1fr); }
}

/* Let desktop visitors reach the remaining role cards by horizontal scroll. */
@media (min-width: 1181px) {
  :root [data-role-gallery] { overflow-x: auto !important; scroll-snap-type: x proximity; scrollbar-width: thin; }
  :root [data-role-track] > a { scroll-snap-align: start; }
}