/*
 * GE2studio V1.10.0 — global mobile responsive pass.
 *
 * Goal: recover useful reading width on compact phones without changing the
 * desktop composition or flattening the premium page identities.  Several
 * acquisition families previously combined a mobile shell (20px margins) with
 * a second 20–32px section padding, leaving only 256–280px for actual content.
 */

/* Defensive compatibility: a cached header fragment from a pre-1.9.4 build
   must never bring the removed Demo CTA back when paired with current assets. */
.mobile-header-demo,
.header-actions {
  display: none !important;
}

@media (max-width: 1100px) {
  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: center;
    gap: 12px !important;
  }

  .navigation-root {
    grid-column: 2;
    justify-self: end;
    width: 46px;
    min-width: 46px;
    margin-left: 0 !important;
  }

  .mobile-navigation,
  .mobile-menu-toggle {
    justify-self: end;
  }

  .mobile-menu-toggle {
    width: 46px;
    height: 46px;
  }

  .mobile-menu-toggle .mobile-menu-bar {
    width: 21px;
    height: 2px;
    flex-basis: 2px;
  }
}

@media (max-width: 720px) {
  :root {
    --ge2-mobile-gutter: 18px;
    --ge2-mobile-card-gap: 12px;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* French editorial headings should wrap between words, never through them. */
  main :is(h1, h2, h3, h4),
  main :is(h1, h2, h3, h4) a {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  main :is(h1, h2, h3) {
    text-wrap: balance;
  }

  /* ----------------------------------------------------------------------
     SEO landing pages: remove the nested shell tax while keeping a safe edge.
     ---------------------------------------------------------------------- */
  .seo-landing :is(
    .seo-challenges,
    .seo-workflow,
    .seo-decision-scene,
    .seo-capabilities,
    .seo-related,
    .seo-faq
  ) {
    width: 100% !important;
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .seo-landing .seo-hero,
  .seo-landing .seo-conversion {
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .seo-challenge-grid article,
  .seo-challenge-grid article:first-child {
    padding: 24px 20px;
  }

  .seo-workflow-list li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .seo-capability-list article {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 20px 18px;
  }

  .seo-capability-list article > .product-status {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.35;
  }

  .seo-decision-board > header,
  .seo-decision-observed,
  .seo-decision-columns article,
  .seo-decision-board > footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .seo-faq summary {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 14px;
  }

  /* ----------------------------------------------------------------------
     Feature, tools and guides hubs.
     ---------------------------------------------------------------------- */
  .tools-page > :is(.tools-featured, .tools-roadmap, .tools-method-link) {
    width: 100% !important;
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .tools-page .tools-hero {
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .tools-roadmap > div {
    width: 100%;
    margin-inline: 0;
    padding: 7px 12px;
  }

  .tools-roadmap article {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 24px 0;
  }

  .tools-roadmap article > span {
    font-size: 18px;
  }

  .tools-roadmap h3,
  .tools-roadmap h3 a {
    font-size: 20px;
    line-height: 1.18;
  }

  .tools-roadmap article p {
    margin-top: 7px;
    line-height: 1.58;
  }

  .tools-roadmap article small {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 30px;
    margin-top: 8px;
    padding: 7px 9px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .tools-hero-proof span {
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ----------------------------------------------------------------------
     Tool detail pages and calculators.
     ---------------------------------------------------------------------- */
  .tool-detail-page > :is(.tool-simulator-stage, .tool-interpretation, .tool-faq) {
    width: 100% !important;
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .tool-detail-page .tool-detail-hero,
  .tool-detail-page .tool-cta {
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .tool-detail-page > .tool-detail-steps {
    box-sizing: border-box;
    width: calc(100% - (2 * var(--ge2-mobile-gutter))) !important;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
  }

  .tool-detail-steps article {
    padding: 20px 18px;
  }

  .tool-detail-steps article > span {
    width: 36px;
    height: 36px;
  }

  .tool-simulator-stage :is(.simulation-controls, .simulation-grid, .simulation-results) {
    min-width: 0;
  }

  /* ----------------------------------------------------------------------
     Methodology and guide extensions.
     ---------------------------------------------------------------------- */
  .methodology-page > :is(
    .methodology-principles,
    .methodology-definitions,
    .methodology-estimates,
    .methodology-confidence,
    .methodology-benchmark
  ) {
    width: 100% !important;
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .methodology-page .methodology-hero,
  .methodology-page .methodology-cta {
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .methodology-page > .methodology-causality {
    box-sizing: border-box;
    width: calc(100% - (2 * var(--ge2-mobile-gutter))) !important;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 38px 22px;
  }

  .methodology-principles ol {
    padding: 7px;
  }

  .methodology-principles li {
    margin: 4px;
    padding: 22px 20px;
  }

  .methodology-definitions > div {
    padding-left: 12px;
    padding-right: 12px;
  }

  .methodology-definitions article {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
  }

  .methodology-estimate-board dl {
    padding-left: 16px;
    padding-right: 16px;
  }

  .methodology-confidence article {
    padding: 24px 20px;
  }

  /* ----------------------------------------------------------------------
     Comparison pages.
     ---------------------------------------------------------------------- */
  .comparison-page > :is(
    .comparison-choice,
    .comparison-sources,
    .comparison-faq
  ) {
    width: 100% !important;
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .comparison-page .comparison-hero,
  .comparison-page .comparison-cta {
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .comparison-page > .comparison-decision--scenarios {
    box-sizing: border-box;
    width: calc(100% - (2 * var(--ge2-mobile-gutter))) !important;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 34px 20px;
  }

  .comparison-choice--proofs > ol,
  .comparison-choice--status > ol {
    padding-left: 12px;
    padding-right: 12px;
  }

  .comparison-choice--proofs li,
  .comparison-choice--status li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .comparison-choice--proofs li > span {
    width: 36px;
    height: 36px;
  }

  .comparison-choice--proofs h3,
  .comparison-choice--status h3 {
    font-size: 20px;
    line-height: 1.18;
  }

  .comparison-choice--status .product-status {
    max-width: 100%;
    white-space: normal;
  }

  /* ----------------------------------------------------------------------
     Migration from bsport.
     ---------------------------------------------------------------------- */
  .migration-bsport-page > :is(
    .migration-bsport-intro,
    .migration-bsport-data,
    .migration-bsport-v14-scope,
    .migration-bsport-faq,
    .migration-bsport-form-section
  ) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none;
    margin-inline: 0;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .migration-bsport-page :is(
    .migration-bsport-hero,
    .migration-bsport-steps,
    .migration-bsport-gate
  ) {
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .migration-bsport-steps > ol > li {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding-left: 0;
    padding-right: 0;
  }

  .migration-bsport-data > div:last-child,
  .migration-bsport-form-section .migration-lead-form {
    padding-left: 18px;
    padding-right: 18px;
  }

  .migration-bsport-v14-scope li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  /* Long badges and controls stay inside their cards without shrinking copy. */
  :is(.product-status, .demo-badge, .tools-roadmap small) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
}

@media (max-width: 380px) {
  :root {
    --ge2-mobile-gutter: 16px;
  }

  .site-header .header-inner {
    width: calc(100vw - 32px) !important;
  }

  .tools-roadmap h3,
  .tools-roadmap h3 a,
  .comparison-choice--proofs h3,
  .comparison-choice--status h3 {
    font-size: 19px;
  }

  .seo-capability-list article {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding: 19px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle,
  .mobile-menu-toggle .mobile-menu-bar {
    transition: none !important;
  }
}

/* V1.10.0 final mobile-width corrections found during the all-route audit. */
@media (max-width: 720px) {
  /* Prevent intrinsic content widths from reopening desktop columns on phones. */
  .premium-page .split-section {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .premium-page .split-section > * {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Experiences: the satisfaction header previously inherited a shell wider
     than the section content box by 4–6px on compact phones. */
  .experiences-page .satisfaction-section {
    box-sizing: border-box;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .experiences-page :is(.satisfaction-section-head, .satisfaction-demo) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .experiences-page .satisfaction-section-head > * {
    min-width: 0;
  }

  /* Studios: preserve the editorial number/icon signature while returning the
     actual copy column to a readable width. */
  .studios-page .studio-editorial {
    box-sizing: border-box;
    width: 100%;
    padding-left: max(var(--ge2-mobile-gutter), env(safe-area-inset-left));
    padding-right: max(var(--ge2-mobile-gutter), env(safe-area-inset-right));
  }

  .studios-page .studio-editorial article,
  .studios-page .studio-editorial article:first-child {
    grid-template-columns: 30px 34px minmax(0, 1fr);
    gap: 10px;
    padding: 20px;
  }

  .studios-page .studio-editorial article > .premium-icon,
  .studios-page .studio-editorial article:first-child > .premium-icon {
    width: 34px;
    height: 34px;
  }

  .studios-page .studio-editorial article h2 {
    font-size: clamp(25px, 7.7vw, 30px);
    line-height: 1.08;
  }

  .studios-page .studio-editorial article:first-child h2 {
    font-size: clamp(29px, 8.8vw, 36px);
    line-height: 1.04;
  }

  /* Long editorial words stay whole without overflowing their cards. */
  .methodology-page > .methodology-causality h2 {
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 1.01;
  }

  main:has(.legal-copy) .legal-copy h2 {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    font-size: clamp(27px, 8.3vw, 35px);
    line-height: 1.08;
  }

  .not-found h1 {
    font-size: clamp(46px, 15vw, 68px);
    line-height: .96;
  }
}

@media (max-width: 380px) {
  .studios-page .studio-editorial article,
  .studios-page .studio-editorial article:first-child {
    grid-template-columns: 28px 32px minmax(0, 1fr);
    gap: 8px;
    padding: 18px;
  }

  .studios-page .studio-editorial article > .premium-icon,
  .studios-page .studio-editorial article:first-child > .premium-icon {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 720px) {
  /* Form checkbox must not inherit the generic full-width input rule. */
  .demo-form .privacy-check {
    display: flex !important;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
  }

  .demo-form .privacy-check input[type="checkbox"] {
    flex: 0 0 20px;
    width: 20px !important;
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
  }

  .demo-form .privacy-check > span {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  .platform-note {
    padding-left: 24px;
    padding-right: 24px;
  }

  .methodology-page > .methodology-causality h2 {
    font-size: clamp(33px, 9.2vw, 42px);
  }
}