/* NORDEL responsive layer.
   Desktop (>=1001px) is untouched: every rule lives inside a max-width query.
   Selectors match React's serialized inline styles (space after colon, 0.95fr not .95fr). */

img,svg{max-width:100%}
/* The reel's export stage is a fixed 1920x1080 svg scaled by transform — never constrain it. */
svg[data-om-exportable-video-with-duration-secs],svg[data-om-exportable-video-with-duration-secs] *{max-width:none}
input,select,textarea,button{max-width:100%}

/* ---------- Tablet: collapse asymmetric two-column layouts ---------- */
@media (max-width:1000px){
  [style*="grid-template-columns: 1.25fr 0.75fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 250px 1fr"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:32px !important;
  }
  /* footer: four columns to two */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:32px !important;
  }
  /* comparison grids keep their columns but tighten */
  [style*="grid-template-columns: 1.1fr 1fr 1fr"]{gap:12px !important}

  /* side rails (doc nav, spec panels) stop sticking once they sit inline */
  [style*="position: sticky"][style*="top: 100px"]{position:static !important}
}

/* ---------- Mobile / small tablet ---------- */
@media (max-width:860px){
  /* container gutters */
  [style*="padding: 0px 24px"]{padding-left:20px !important;padding-right:20px !important}

  /* section rhythm: roughly 60% of desktop */
  [style*="padding: 96px 24px 104px"]{padding:54px 20px 58px !important}
  [style*="padding: 88px 24px 92px"]{padding:50px 20px 54px !important}
  [style*="padding: 80px 24px 88px"]{padding:48px 20px 50px !important}
  [style*="padding: 72px 24px 88px"]{padding:46px 20px 50px !important}
  [style*="padding: 60px 24px 64px"]{padding:44px 20px 46px !important}
  [style*="padding: 56px 24px 64px"]{padding:42px 20px 46px !important}
  [style*="padding: 52px 24px 64px"]{padding:40px 20px 46px !important}
  [style*="padding: 72px 24px"]{padding:46px 20px !important}
  [style*="padding: 64px 24px"]{padding:42px 20px !important}
  [style*="padding: 56px 24px"]{padding:40px 20px !important}
  [style*="padding: 64px 24px 28px"]{padding:42px 20px 24px !important}
  [style*="padding: 22px 24px 40px"]{padding:20px 20px 32px !important}
  [style*="padding: 80px 0px"]{padding:48px 0 !important}
  [style*="padding: 72px 0px 80px"]{padding:46px 0 50px !important}
  [style*="padding: 72px 0px 72px"]{padding:46px 0 !important}
  [style*="padding: 72px 0px 0px"]{padding:46px 0 0 !important}
  [style*="padding: 64px 0px 64px"]{padding:42px 0 !important}
  [style*="padding: 64px 0px 0px"]{padding:42px 0 0 !important}
  [style*="padding: 56px 0px 0px"]{padding:40px 0 0 !important}

  /* panel padding */
  [style*="padding: 40px 32px"]{padding:26px 22px !important}
  [style*="padding: 36px 32px"]{padding:26px 22px !important}
  [style*="padding: 30px 32px"]{padding:24px 22px !important}
  [style*="padding: 32px 34px"]{padding:24px 22px !important}
  [style*="padding: 28px 34px 32px"]{padding:24px 22px 26px !important}

  /* display type: step down, never below 22px */
  [style*="font-size: 48px"]{font-size:32px !important}
  [style*="font-size: 46px"]{font-size:31px !important}
  [style*="font-size: 44px"]{font-size:30px !important}
  [style*="font-size: 42px"]{font-size:29px !important}
  [style*="font-size: 40px"]{font-size:28px !important}
  [style*="font-size: 34px"]{font-size:26px !important}
  [style*="font-size: 32px"]{font-size:25px !important}
  [style*="font-size: 31px"]{font-size:24px !important}
  [style*="font-size: 30px"]{font-size:24px !important}
  [style*="font-size: 28px"]{font-size:23px !important}
  [style*="font-size: 27px"]{font-size:22px !important}
  [style*="font-size: 26px"]{font-size:22px !important}
  [style*="font-size: 17.5px"]{font-size:16.5px !important}

  /* hero headlines authored with <br> read better as natural wraps on narrow screens */
  h1 br{display:none}

  /* utility bar: allow wrapping, drop the label, centre the row */
  [style*="min-height: 38px"][style*="white-space: nowrap"]{
    white-space:normal !important;
    justify-content:center !important;
    gap:6px 16px !important;
  }
  [style*="min-height: 38px"][style*="white-space: nowrap"] > span:first-child{display:none}
  [style*="min-height: 38px"][style*="white-space: nowrap"] > a[style*="margin-left: auto"]{margin-left:0 !important}

  /* header row makes room for the menu button */
  header > div{
    min-height:64px !important;
    padding:10px 20px !important;
    gap:14px !important;
    flex-wrap:nowrap !important;
    padding-right:62px !important;
  }
  header img{height:30px !important}
  header a[style*="padding: 12px 26px"]{padding:11px 18px !important;font-size:14px !important}

  /* touch targets */
  footer a,header a{min-height:24px}
  a[style*="border-radius: 0px 28px 0px 0px"]{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  button[style*="border-radius: 0px 28px 0px 0px"]{min-height:44px}
  input,select,textarea{font-size:16px !important;min-height:44px}

  /* modal */
  [style*="position: fixed"][style*="padding: 32px"]{padding:12px !important}
  [style*="max-height: 82vh"]{max-height:90vh !important}
}

/* ---------- Phones ---------- */
@media (max-width:620px){
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:24px !important;
  }
  [style*="grid-template-columns: 120px 1fr"]{grid-template-columns:88px minmax(0,1fr) !important}

  /* stack primary/secondary CTA pairs full width */
  a[style*="padding: 13px 28px"][style*="border-radius: 0px 28px 0px 0px"],
  a[style*="padding: 12px 24px"][style*="border-radius: 0px 28px 0px 0px"]{
    width:100% !important;
    text-align:center;
  }
  header a[style*="padding: 12px 26px"]{width:auto !important}

  /* drop the header Support link — it lives in the menu and the utility bar */
  header a[style*="gap: 7px"]{display:none !important}

  footer [style*="margin-left: auto"]{margin-left:0 !important}
  [style*="What’s new"],button[style*="left: 24px"]{left:16px !important;bottom:16px !important}
}

/* ---------- Mobile menu (paired with mobile-nav.js) ----------
   The panel is an absolutely-positioned child of the sticky <header>, so it lives
   inside the header's own stacking context — nothing can float above it, and there
   is no scrim to swallow taps. */
#mnav-btn{display:none}
@media (max-width:860px){
  #mnav-btn{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:14px;z-index:70;
    width:46px;height:46px;padding:0;background:#fff;border:1px solid #e2e4e6;
    border-radius:0 14px 0 0;color:#00587c;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  #mnav-btn span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative}
  #mnav-btn span:before,#mnav-btn span:after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .15s ease,opacity .15s ease}
  #mnav-btn span:before{top:-6px}
  #mnav-btn span:after{top:6px}
  html[data-mnav-open] #mnav-btn span{background:transparent}
  html[data-mnav-open] #mnav-btn span:before{transform:translateY(6px) rotate(45deg)}
  html[data-mnav-open] #mnav-btn span:after{transform:translateY(-6px) rotate(-45deg)}

  header > div{padding-right:70px !important}
  header nav{display:none !important}
  html[data-mnav-open] header nav{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;
    position:absolute;left:0;right:0;top:100%;z-index:5;
    background:#fff;border-bottom:1px solid #e2e4e6;box-shadow:0 14px 30px rgba(0,35,49,.16);
    padding:4px 20px 10px !important;gap:0 !important;margin:0;
    max-height:calc(100vh - 130px);overflow:auto;white-space:normal !important;
  }
  html[data-mnav-open] header nav > a{
    display:flex !important;align-items:center;min-height:52px;
    padding:2px 0 !important;font-size:17px !important;
    border-bottom:1px solid #eef0f1 !important;color:#062331 !important;
  }
  html[data-mnav-open] header nav > a:last-child{border-bottom:0 !important}
}