/*! NBC v6.503 · M5 Mobile 9.5 Final QA
    Scope: <=760px. Final polish only; desktop remains untouched. */
@media (max-width:760px){
  :root{
    --m5-focus:#a6e8b4;
    --m5-paper:#f1eee7;
    --m5-paper-ink:#111511;
    --m5-deep:#07100b;
    --m5-line:rgba(247,245,242,.12);
    --m5-muted:rgba(247,245,242,.66);
  }

  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
  body.page.design-system-executive{-webkit-tap-highlight-color:transparent}
  body.page.design-system-executive main :is(p,li,dd){orphans:2;widows:2}
  body.page.design-system-executive :is(img,picture,video){display:block}

  /* Keyboard focus must remain obvious even in the dark visual system. */
  body.page.design-system-executive :is(a,button,input,select,textarea,summary):focus-visible{
    outline:2px solid var(--m5-focus)!important;
    outline-offset:3px!important;
    box-shadow:none!important;
  }

  /* Mobile rails: consistent momentum, snap and edge affordance across M2–M4. */
  body.page.design-system-executive :is(
    .m-rail,[data-mobile-rail="true"],[data-m1-rail="true"],
    .m2-decisions__rail,.m2-proof__rail,.m3-rail,.m4-rail,.m4-metric-rail,
    .dg-takeaways,.dg-preview-stack,.dg-related-grid,.baro-scenarios,.baro-dimensions,
    .dc7-choice-grid,.dc5-process-types,.m4-reading-nav
  ){
    scroll-padding-inline:var(--m-gutter);
    scroll-snap-stop:normal;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.page.design-system-executive :is(
    .m-rail,[data-mobile-rail="true"],[data-m1-rail="true"],
    .m2-decisions__rail,.m2-proof__rail,.m3-rail,.m4-rail,.m4-metric-rail,
    .dg-takeaways,.dg-preview-stack,.dg-related-grid,.baro-scenarios,.baro-dimensions,
    .dc7-choice-grid,.dc5-process-types,.m4-reading-nav
  )::-webkit-scrollbar{display:none}
  body.page.design-system-executive [data-m5-rail-state="start"]{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
  }
  body.page.design-system-executive [data-m5-rail-state="middle"]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  }
  body.page.design-system-executive [data-m5-rail-state="end"]{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 100%);
  }

  /* Header: slightly lighter render cost while retaining the glass effect. */
  body.page.design-system-executive .site-header{
    backdrop-filter:blur(16px) saturate(112%);
    -webkit-backdrop-filter:blur(16px) saturate(112%);
  }

  /* Footer polish: small enough to be quiet, large enough to feel intentional. */
  body.page.design-system-executive .footer-brand strong{font-size:18px;line-height:1.15}
  body.page.design-system-executive .footer-signature>p{font-size:13.25px;line-height:1.55}
  body.page.design-system-executive .footer-mail{font-size:13px}
  body.page.design-system-executive .footer-navigation-row a{font-size:12.5px}
  body.page.design-system-executive .footer-meta{font-size:10.5px;line-height:1.5}

  /* M2/M3 final balance: no visual redesign, only small rhythm consistency. */
  body.page-home[data-m2-home-active="true"] .m2-section__intro,
  body[data-m3-service-active="true"] .m3-intro{max-width:35ch}
  body[data-m3-service-active="true"] .m3-next__copy{max-width:34ch}

  /* Case detail: opened evidence should read like editorial content, not metadata. */
  body[data-m4-kind="case-detail"] .m4-case-accordion[open] :is(p,li,dd){
    font-size:15.5px!important;
    line-height:1.66!important;
  }
  body[data-m4-kind="case-detail"] .m4-case-accordion summary{
    min-height:58px;
    align-items:center;
  }

  /* Decision Guide detail: biggest remaining typographic weakness from M4. */
  body[data-m4-kind="guide-detail"] .dg-page-hero h1{
    font-size:clamp(38px,10.2vw,42px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  body[data-m4-kind="guide-detail"] .dg-page-body{padding-top:48px!important}
  body[data-m4-kind="guide-detail"] .dg-page-body :is(p,li,dd),
  body[data-m4-kind="guide-detail"] .dg-takeaway p,
  body[data-m4-kind="guide-detail"] .dg-after20-item p,
  body[data-m4-kind="guide-detail"] .dg-related-guides p{
    font-size:15.5px!important;
    line-height:1.64!important;
  }
  body[data-m4-kind="guide-detail"] .dg-page-body :is(h2,.dg-section-title){
    font-size:29px!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
  }
  body[data-m4-kind="guide-detail"] .dg-page-body h3{
    font-size:20px!important;
    line-height:1.08!important;
  }
  body[data-m4-kind="guide-detail"] .dg-takeaway{
    flex-basis:min(86vw,326px)!important;
    padding:22px!important;
  }
  body[data-m4-kind="guide-detail"] :is(.dg-live-tool,.dg-guide-preview,.dg-after20,.dg-related-guides){
    padding-block:52px!important;
  }
  body[data-m4-kind="guide-detail"] :is(.dg-preview-stack,.dg-related-grid){gap:14px!important}
  body[data-m4-kind="guide-detail"] :is(.dg-preview-caption,.dg-preview-note,.dg-tool-note,.dg-live-tool small){
    font-size:12.5px!important;
    line-height:1.52!important;
  }
  body[data-m4-kind="guide-detail"] .dg-preview-stack>*{flex-basis:82vw!important}
  body[data-m4-kind="guide-detail"] .dg-related-grid>*{flex-basis:84vw!important}

  /* Barometer: the previous SVG stage reserved too much vertical space on a phone. */
  body[data-m4-kind="barometer"] .baro-stage{overflow:hidden}
  body[data-m4-kind="barometer"] .baro-svg{
    height:clamp(225px,62vw,255px)!important;
    min-height:225px!important;
  }
  body[data-m4-kind="barometer"] .baro-readout{
    min-height:0!important;
    padding-bottom:12px!important;
  }
  body[data-m4-kind="barometer"] .baro-stage-column{min-height:0!important}
  body[data-m4-kind="barometer"] .baro-finding{margin-top:0!important}
  body[data-m4-kind="barometer"] .baro-scenario{min-height:46px}
  body[data-m4-kind="barometer"] .baro-dimension{min-height:280px!important}

  /* Digital Check: keep the initial tool screen compact and intentional. */
  body[data-m4-kind="digital"] .dc5-stage{min-height:260px!important}
  body[data-m4-kind="digital"] .dc5-question-panel{padding-bottom:30px!important}

  /* Regional Göttingen page: M5 creates a dedicated mobile journey. */
  body.page-regional[data-m5-local-active="true"] .local-hero{
    min-height:0!important;
    padding-top:calc(var(--m-header-h) + env(safe-area-inset-top) + 34px)!important;
    padding-bottom:58px!important;
  }
  body.page-regional[data-m5-local-active="true"] .local-hero-grid{display:block!important}
  body.page-regional[data-m5-local-active="true"] .local-founder-card{display:none!important}
  body.page-regional[data-m5-local-active="true"] .local-hero h1{
    font-size:clamp(37px,10.2vw,41px)!important;
    line-height:.97!important;
    max-width:9.6ch!important;
  }
  body.page-regional[data-m5-local-active="true"] .local-hero-thesis{
    margin-top:22px!important;
    font-size:19px!important;
    line-height:1.18!important;
  }
  body.page-regional[data-m5-local-active="true"] .local-hero-lede{
    margin-top:14px!important;
    max-width:35ch;
    font-size:16px!important;
    line-height:1.58!important;
  }
  body.page-regional[data-m5-local-active="true"] .local-hero-actions{
    margin-top:25px!important;
    display:block!important;
  }
  body.page-regional[data-m5-local-active="true"] .local-hero-actions .btn{width:100%}
  body.page-regional[data-m5-local-active="true"] .nbc-hero-secondary-link{display:none!important}
  body.page-regional[data-m5-local-active="true"] .local-hero-proof{
    margin-top:22px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px 12px!important;
    border:0!important;
    padding:0!important;
    font-size:11px!important;
    line-height:1.35!important;
  }
  body.page-regional[data-m5-local-active="true"] .local-hero-proof strong{grid-column:1/-1;color:var(--green)}
  body.page-regional[data-m5-local-active="true"] main>.local-situations,
  body.page-regional[data-m5-local-active="true"] main>.local-economy,
  body.page-regional[data-m5-local-active="true"] main>.local-check,
  body.page-regional[data-m5-local-active="true"] main>.local-proof,
  body.page-regional[data-m5-local-active="true"] main>.local-qualification,
  body.page-regional[data-m5-local-active="true"] main>.local-independence,
  body.page-regional[data-m5-local-active="true"] main>.local-direct,
  body.page-regional[data-m5-local-active="true"] main>.local-faq,
  body.page-regional[data-m5-local-active="true"] main>.local-final{display:none!important}

  .m5-local{background:#07100b;color:var(--paper)}
  .m5-local__section{padding:68px var(--m-gutter);border-top:1px solid var(--m5-line)}
  .m5-local__section--deep{background:radial-gradient(circle at 85% 0,rgba(134,200,149,.08),transparent 38%),#07100b}
  .m5-local__section--paper{background:var(--m5-paper);color:var(--m5-paper-ink);border-color:rgba(17,21,17,.12)}
  .m5-local__wrap{width:100%;max-width:430px;margin-inline:auto}
  .m5-local__kicker{display:block;margin-bottom:20px;color:var(--green);font:500 10px/1.2 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase}
  .m5-local__section--paper .m5-local__kicker{color:#477a52}
  .m5-local__title{margin:0;font-size:clamp(30px,8.5vw,34px);line-height:1.01;letter-spacing:-.04em;text-wrap:balance}
  .m5-local__section--paper .m5-local__title{color:var(--m5-paper-ink)}
  .m5-local__intro{margin:18px 0 0;max-width:35ch;color:var(--m5-muted);font-size:16px;line-height:1.62}
  .m5-local__section--paper .m5-local__intro{color:rgba(17,21,17,.68)}
  .m5-local__rail{
    display:flex;gap:12px;width:calc(100% + var(--m-gutter));margin-top:30px;padding-right:var(--m-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none
  }
  .m5-local__rail::-webkit-scrollbar{display:none}
  .m5-local-card{
    flex:0 0 min(82vw,316px);min-height:285px;padding:22px;border:1px solid rgba(247,245,242,.12);border-radius:22px;background:rgba(255,255,255,.025);scroll-snap-align:start
  }
  .m5-local-card small{color:var(--green);font:500 9px/1.2 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.09em}
  .m5-local-card h3{margin:52px 0 12px;font-size:24px;line-height:1.02;letter-spacing:-.035em}
  .m5-local-card p{margin:0;color:var(--m5-muted);font-size:15px;line-height:1.55}
  .m5-local__chain{margin-top:30px;border-top:1px solid rgba(17,21,17,.14)}
  .m5-local__step{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid rgba(17,21,17,.14)}
  .m5-local__step span{color:#477a52;font:500 10px/1.2 var(--mono,"IBM Plex Mono",monospace)}
  .m5-local__step strong{display:block;color:var(--m5-paper-ink);font-size:17px;line-height:1.16}
  .m5-local__step p{margin:7px 0 0;color:rgba(17,21,17,.66);font-size:14.5px;line-height:1.52}
  .m5-local__proof{margin-top:30px;display:grid;gap:0;border-top:1px solid var(--m5-line)}
  .m5-local__proof-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:22px 0;border-bottom:1px solid var(--m5-line);align-items:start}
  .m5-local__proof-row small{color:var(--green);font:500 9px/1.2 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.08em}
  .m5-local__proof-row strong{display:block;margin-top:7px;font-size:17px;line-height:1.14}
  .m5-local__proof-row b{color:var(--green);font-size:18px;line-height:1.06;text-align:right}
  .m5-local__pillars{margin-top:30px;display:grid;gap:10px}
  .m5-local__pillar{padding:18px;border:1px solid var(--m5-line);border-radius:16px;background:rgba(255,255,255,.025)}
  .m5-local__pillar strong{display:block;font-size:17px;line-height:1.14}
  .m5-local__pillar p{margin:7px 0 0;color:var(--m5-muted);font-size:14.5px;line-height:1.5}
  .m5-local__cta{margin-top:28px;width:100%}
  .m5-local__micro{margin:12px 0 0;color:rgba(247,245,242,.5);font-size:11.5px;line-height:1.48}

  /* Low-level performance guard: decorative ambient layers are visually quiet on mobile. */
  body.page.design-system-executive .nbc-ambient-field{opacity:.72}
}

@media (max-width:374px){
  body.page-regional[data-m5-local-active="true"] .local-hero h1{font-size:36px!important}
  .m5-local__section{padding-inline:18px}
  .m5-local-card{flex-basis:84vw}
}

@media (prefers-reduced-motion:reduce){
  @media (max-width:760px){
    html{scroll-behavior:auto}
    body.page.design-system-executive [data-m5-rail-state]{-webkit-mask-image:none;mask-image:none}
  }
}
@media (max-width:760px){
  body.page-regional[data-m5-local-active="true"] .local-hero h1{max-width:100%!important}
  body.page-regional[data-m5-local-active="true"] .local-hero h1 span{
    overflow-wrap:normal!important;
    word-break:normal!important;
    -webkit-hyphens:manual!important;
    hyphens:manual!important;
  }
}
@media (max-width:760px){
  body[data-m4-kind="barometer"] .baro-svg{
    height:clamp(175px,49vw,205px)!important;
    min-height:175px!important;
  }
}

/* M5 final readability guard — narrow mobile only. */
@media (max-width:760px){
  body.page-service.service-ki[data-m3-service-active="true"] .nbc-unified-hero-title{
    max-width:100%!important;
  }
  body[data-m4-kind="barometer"] :is(.baro-readout p,.baro-finding p,.risk-reversal-tool){
    font-size:12.5px!important;
    line-height:1.48!important;
  }
  body[data-m4-kind="digital-check"] #dc-prefill-copy{
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  body.page-decision-guide .dg-conversion-copy p{
    font-size:15px!important;
    line-height:1.62!important;
  }
}
@media (max-width:760px){
  body.page-digital-check #dc-prefill-copy{font-size:12.5px!important;line-height:1.45!important}
}
@media (max-width:760px){
  body.page-template-guide .dg-conversion-copy p{font-size:15px!important;line-height:1.62!important}
}

/* M5 tablet-edge guard: keep the 768px boundary touch-safe without mounting mobile-only compositions. */
@media (min-width:761px) and (max-width:820px){
  body.page-barometer input[type="range"]{min-height:44px!important}
  body .styleguide-final{min-width:44px!important}
  body.page-template-guide .dg-tool-caption{font-size:11.5px!important;line-height:1.45!important}
}
@media (min-width:761px) and (max-width:820px){
  body.page-barometer input[type="range"]{height:44px!important;min-height:44px!important}
  body.page-barometer :is(.baro-dimension-copy,.baro-readout p,.baro-finding p,.risk-reversal-tool){font-size:12.5px!important;line-height:1.48!important}
}
@media (min-width:761px) and (max-width:820px){
  body.page-barometer input[type="number"]{min-height:44px!important;height:44px!important;padding-block:8px!important}
}
