/* IA no Mac fullscreen override.
   Loaded after styles.css so old cinematic locks cannot reintroduce side gutters. */
:root {
  --fullscreen-pad: clamp(14px, 2.4vw, 48px);
  --fullscreen-pad-tight: clamp(3px, .25vw, 5px);
  --topbar-h: 68px;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: clip !important;
  background: #05080d !important;
}

body.has-cinematic,
body.has-cinematic main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

body.has-cinematic .cinema-layer,
body.has-cinematic #om-field,
body.has-cinematic #om-grade,
body.has-cinematic #om-grid,
body.has-cinematic #om-scan,
body.has-cinematic #om-vignette,
body.has-cinematic #om-grain {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  pointer-events: none !important;
}

body.has-cinematic .topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--topbar-h) !important;
}

body.has-cinematic main > section,
body.has-cinematic .hero,
body.has-cinematic #meumac.estimator.band {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

body.has-cinematic main > section.band {
  padding-left: var(--fullscreen-pad) !important;
  padding-right: var(--fullscreen-pad) !important;
}

body.has-cinematic .hero {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body.has-cinematic .hero-content {
  margin-left: 0 !important;
  max-width: min(720px, 100%) !important;
}

body.has-cinematic #meumac.estimator.band {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - var(--topbar-h)) !important;
  min-height: calc(100dvh - var(--topbar-h)) !important;
  padding: 10px var(--fullscreen-pad-tight) 12px !important;
  overflow: hidden !important;
}

body.has-cinematic #meumac .section-head,
body.has-cinematic #meumac .wide-copy,
body.has-cinematic #meumac .estimator-panel,
body.has-cinematic #meumac .estimator-controls,
body.has-cinematic #meumac .mac-help-inline,
body.has-cinematic #meumac .est-recommendation,
body.has-cinematic #meumac .est-cats,
body.has-cinematic #meumac .estimator-summary,
body.has-cinematic #meumac .est-note,
body.has-cinematic #meumac .estimator-details,
body.has-cinematic #meumac .estimator-table,
body.has-cinematic #meumac #est-results {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.has-cinematic #meumac .estimator-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (min-width: 761px) {
  body.has-cinematic #meumac .estimator-panel {
    align-self: flex-start !important;
    position: relative !important;
    left: 50% !important;
    inline-size: calc(100vw - 10px) !important;
    width: calc(100vw - 10px) !important;
    max-inline-size: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    min-inline-size: calc(100vw - 10px) !important;
    min-width: calc(100vw - 10px) !important;
    margin-left: calc(-50vw + 5px) !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 760px) {
  :root {
    --fullscreen-pad: 18px;
    --fullscreen-pad-tight: 18px;
    --topbar-h: 64px;
  }

  body.has-cinematic #meumac.estimator.band {
    min-height: 100dvh !important;
    padding: calc(var(--topbar-h) + 18px) 18px 24px !important;
    overflow: visible !important;
  }
}

@media (min-width: 761px) {
  html body.has-cinematic main#top section#meumac.estimator.band,
  body.has-cinematic:has(#om-field) #meumac.estimator.band {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 5px 12px !important;
  }

  html body.has-cinematic main#top section#meumac.estimator.band > .estimator-panel,
  body.has-cinematic:has(#om-field) #meumac.estimator.band > .estimator-panel {
    align-self: flex-start !important;
    position: relative !important;
    left: 50% !important;
    inline-size: calc(100vw - 10px) !important;
    width: calc(100vw - 10px) !important;
    max-inline-size: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    min-inline-size: calc(100vw - 10px) !important;
    min-width: calc(100vw - 10px) !important;
    margin-left: calc(-50vw + 5px) !important;
    margin-right: 0 !important;
  }
}

/* Fullscreen cinematic r51: authoritative final layer for desktop previews.
   The whole experience is tied to the viewport, not to old centered containers. */
:root {
  --fullscreen-pad: clamp(14px, 2.4vw, 48px);
  --fullscreen-pad-tight: clamp(6px, .8vw, 18px);
  --topbar-h: 68px;
}

body.has-cinematic {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body.has-cinematic main#top {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow-x: clip !important;
}

body.has-cinematic main#top > section,
body.has-cinematic main#top > section.band,
body.has-cinematic .hero,
body.has-cinematic #meumac.estimator.band {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

body.has-cinematic main#top > section.band {
  padding-left: var(--fullscreen-pad) !important;
  padding-right: var(--fullscreen-pad) !important;
}

body.has-cinematic .hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .52fr) !important;
  gap: clamp(22px, 4vw, 72px) !important;
  align-items: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: calc(var(--topbar-h) + clamp(28px, 4vh, 58px)) var(--fullscreen-pad) clamp(28px, 6vh, 72px) !important;
}

body.has-cinematic .hero-content {
  width: 100% !important;
  max-width: min(900px, 58vw) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.has-cinematic .starter-card {
  width: min(540px, 100%) !important;
  max-width: none !important;
  justify-self: stretch !important;
}

body.has-cinematic #meumac.estimator.band {
  min-height: calc(100vh - var(--topbar-h)) !important;
  min-height: calc(100dvh - var(--topbar-h)) !important;
  padding: clamp(10px, 1vw, 18px) var(--fullscreen-pad-tight) clamp(12px, 1.2vw, 22px) !important;
  overflow: hidden !important;
}

body.has-cinematic #meumac .section-head,
body.has-cinematic #meumac .wide-copy,
body.has-cinematic #meumac .estimator-panel,
body.has-cinematic #meumac .estimator-controls,
body.has-cinematic #meumac .mac-help-inline,
body.has-cinematic #meumac .est-recommendation,
body.has-cinematic #meumac .est-cats,
body.has-cinematic #meumac .estimator-summary,
body.has-cinematic #meumac .est-note,
body.has-cinematic #meumac .estimator-details,
body.has-cinematic #meumac .estimator-table,
body.has-cinematic #meumac #est-results {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

body.has-cinematic #meumac .estimator-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 980px) {
  body.has-cinematic .hero {
    grid-template-columns: 1fr !important;
  }

  body.has-cinematic .hero-content {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  :root {
    --fullscreen-pad: 18px;
    --fullscreen-pad-tight: 18px;
    --topbar-h: 64px;
  }

  html,
  body,
  body.has-cinematic,
  body.has-cinematic main,
  body.has-cinematic main#top {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  body.has-cinematic .topbar {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
  }

  body.has-cinematic .brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.has-cinematic .topbar .burger {
    display: inline-flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    inline-size: 46px !important;
    width: 46px !important;
    min-inline-size: 46px !important;
    min-width: 46px !important;
    block-size: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    border: 1px solid rgba(95, 247, 226, .42) !important;
    border-radius: 12px !important;
    background: rgba(6, 14, 22, .92) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.28) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 25 !important;
  }

  body.has-cinematic .topbar .burger b {
    position: absolute !important;
    inline-size: 1px !important;
    width: 1px !important;
    block-size: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  body.has-cinematic .topbar .burger span {
    display: block !important;
    inline-size: 20px !important;
    width: 20px !important;
    block-size: 2px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #e8fffb !important;
    box-shadow: 0 0 12px rgba(95, 247, 226, .45) !important;
    opacity: 1 !important;
  }

  body.has-cinematic .topbar .burger span + span {
    margin-top: 4px !important;
  }

  body.has-cinematic main#top > section,
  body.has-cinematic main#top > section.band,
  body.has-cinematic .hero,
  body.has-cinematic #meumac.estimator.band {
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.has-cinematic .hero {
    padding: calc(var(--topbar-h) + 16px) 18px 34px !important;
    gap: 14px !important;
  }

  body.has-cinematic .hero-content,
  body.has-cinematic .hero-content > * {
    box-sizing: border-box !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.has-cinematic .hero-content h1,
  body.has-cinematic #hero-title {
    font-size: clamp(31px, 8.4vw, 36px) !important;
    line-height: 1.04 !important;
    max-inline-size: 12ch !important;
    max-width: 12ch !important;
    margin-block: 10px 10px !important;
    text-wrap: balance !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.has-cinematic .hero-copy {
    font-size: 14.5px !important;
    line-height: 1.38 !important;
    margin: 8px 0 10px !important;
  }

  body.has-cinematic .truth-mini {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    inline-size: 100% !important;
    width: 100% !important;
  }

  body.has-cinematic .truth-mini strong,
  body.has-cinematic .truth-mini span,
  body.has-cinematic .truth-mini a {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }

  body.has-cinematic .truth-mini strong {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  body.has-cinematic .truth-mini span,
  body.has-cinematic .truth-mini a {
    font-size: 12.5px !important;
    line-height: 1.28 !important;
  }

  body.has-cinematic .hero-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  body.has-cinematic .hero-tags span {
    max-inline-size: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.has-cinematic #meumac.estimator.band {
    padding: calc(var(--topbar-h) + 18px) 18px 24px !important;
  }

  body.has-cinematic #meumac .estimator-panel,
  body.has-cinematic #meumac .estimator-controls,
  body.has-cinematic #meumac .est-cats,
  body.has-cinematic #meumac .estimator-summary,
  body.has-cinematic #meumac .est-recommendation,
  body.has-cinematic #meumac #est-results {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-wrap: anywhere !important;
  }

  body.has-cinematic #meumac .estimator-controls,
  body.has-cinematic #meumac .est-cats {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  body.has-cinematic #meumac .estimator-table,
  body.has-cinematic #meumac #est-results {
    overflow-x: visible !important;
  }

  body.has-cinematic #meumac .estimator-head {
    display: none !important;
  }

  body.has-cinematic #meumac .est-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  body.has-cinematic #meumac .est-row > * {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
  }

  body.has-cinematic #meumac .est-row .est-pill,
  body.has-cinematic #meumac .est-row .est-tps,
  body.has-cinematic #meumac .est-row .is-estimated {
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }

  body.has-cinematic .study-paths,
  body.has-cinematic #study-paths {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-inline: 18px !important;
    padding-bottom: 4px !important;
  }

  body.has-cinematic .study-paths > *,
  body.has-cinematic #study-paths > * {
    flex: 0 0 auto !important;
    max-inline-size: min(82vw, 300px) !important;
    max-width: min(82vw, 300px) !important;
    white-space: normal !important;
  }
}

/* Scroll islands: the fullscreen panel keeps wheel/trackpad movement local. */
body.has-cinematic #meumac .estimator-panel,
body.has-cinematic #meumac #est-results,
body.has-cinematic #om-drawer {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

body.has-cinematic #meumac .estimator-panel,
body.has-cinematic #meumac #est-results {
  overscroll-behavior-y: contain !important;
  scrollbar-gutter: stable both-edges;
  touch-action: pan-y !important;
}

body.has-cinematic #meumac .estimator-panel {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.has-cinematic #study-paths,
body.has-cinematic .study-paths {
  overscroll-behavior-inline: contain !important;
  -webkit-overflow-scrolling: touch !important;
}