/* Surveylet unified V6 – same visual language as the approved V5 prototype.
   Non-destructive: new rules apply only after JS attaches .fluent-unified.
   The original V5 home/features/realtime/services styles are not changed. */
body:has(main .fluent-unified) main.site-main { overflow: visible !important; }
body[data-route] main .fluent-unified,
body[data-route] main .fluent-unified > div { background: #fff !important; color: #23384e; }
body[data-route] main .fluent-unified :is(.cal-wrap, [class$="-wrap"]) {
  max-width: none !important; width: 100% !important;
}
body[data-route] main .fluent-unified > :is(.cal-wrap, [class$="-wrap"]),
body[data-route] main .fluent-unified > div > :is(.cal-wrap, [class$="-wrap"]) {
  margin-inline: auto !important; padding-inline: clamp(24px,4vw,66px) !important;
  overflow: visible !important;
}
body[data-route] main .fluent-unified > div > section,
body[data-route] main .fluent-unified > section { max-width: none !important; }
body[data-route] main .fluent-unified :is(h1,h2,h3,h4) { color: #203751 !important; }
body[data-route] main .fluent-unified :is(p,li) { line-height: 1.65; }

/* Article and product headers: open, bright, roomy, with original soft animated field.
   The generic network stage is only installed on pages without video/forms. */
body[data-route] main .fluent-unified section:is([data-layout="hero"], [class$="-hero"],.cal-hero) {
  position: relative !important; isolation: isolate;
  border: 0 !important; border-bottom: 1px solid #e4edf5 !important;
  border-radius: 0 !important; box-shadow: none !important;
  background: linear-gradient(105deg,#f7fbfe 0%, #fff 68%) !important;
  color: #203751 !important;
  margin: 0 !important;
  padding: clamp(35px,4.5vw,68px) clamp(10px,2.8vw,42px) !important;
  overflow: hidden !important;
}
body[data-route] main .fluent-unified section:is([data-layout="hero"], [class$="-hero"],.cal-hero) :is(p,li,span):not([class*="eyebrow"]):not([class*="kicker"]) {
  color: #50657a !important;
}
body[data-route] main .fluent-unified section:is([data-layout="hero"], [class$="-hero"],.cal-hero) h1 {
  font-size: clamp(34px,3.4vw,55px) !important; line-height: 1.1 !important;
  letter-spacing: -.035em !important; color:#172e47 !important; max-width: 920px !important;
}
body[data-route] main .fluent-unified section:is([data-layout="hero"], [class$="-hero"],.cal-hero) [class*="eyebrow"] { color: #0d6eb9 !important; }
body[data-route] main .fluent-unified :is(.cal-button-primary,[class*="btn-primary"],[class*="button-primary"]) {
  background: #0f6cbd !important; color: #fff !important; border-color: #0f6cbd !important;
}
body[data-route] main .fluent-unified :is(.cal-button-secondary,[class*="btn-secondary"],[class*="button-secondary"]) {
  background: #fff !important; color: #0f6cbd !important; border-color: #c7daea !important;
}
body[data-route] main .fluent-unified :is([class*="button"],[class*="btn"]):is(a,button) {
  border-radius: 7px !important; box-shadow: none !important;
}
body[data-route] main .fluent-unified :is(.fluent-unified-hero-grid,.site-hero-layout.fluent-unified-hero-grid) {
  display:grid !important; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr) !important;
  gap:clamp(24px,4vw,70px) !important; align-items:center !important;
}
body[data-route] main .fluent-unified .fluent-unified-hero-copy,
body[data-route] main .fluent-unified .site-hero-copy { min-width: 0 !important; }
body[data-route] main .fluent-unified .fluent-old-hero-art { display:none !important; }
body[data-route] main .fluent-unified .fluent-motion-stage {
  min-width:0; max-width:570px; width:100%; aspect-ratio: 1.48;
  position:relative; overflow:hidden; justify-self:end;
  border:1px solid rgba(158,192,220,.46); border-radius:15px;
  background:radial-gradient(ellipse at 50% 48%,#e7f5ff 0%,#f7fbfe 69%,#fff 100%);
  box-shadow:0 9px 24px rgba(22,67,113,.065);
}
body[data-route] main .fluent-unified .fluent-motion-stage canvas {width:100%;height:100%;display:block;}

/* Sticky topic navigation – dark navy with high-contrast selected state. */
body[data-route] main .fluent-unified .fluent-unified-tabs-shell {max-width:none;width:100%;margin:0 auto;padding:24px 0 52px;overflow:visible!important;}
body[data-route] main .fluent-unified .fluent-unified-tabs-intro {font-size:11px!important;font-weight:750!important;letter-spacing:.15em;color:#526981!important;margin:0 0 12px;}
body[data-route] main .fluent-unified .fluent-unified-tabbar {
  position:sticky !important; top:var(--ds-nav-h,68px) !important; z-index:24;
  background:#193854 !important; border:1px solid #264968;
  border-bottom:2px solid #0d2944; box-shadow:0 8px 20px rgba(16,36,55,.21);
  border-radius:0; width:100%; overflow:visible;
}
body[data-route] main .fluent-unified .fluent-unified-tabs {
  display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;overscroll-behavior-x:contain;
}
body[data-route] main .fluent-unified .fluent-unified-tab {
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:#e5edf6 !important;background:transparent!important;
  border:0!important;border-bottom:3px solid transparent!important;
  font:630 14px/1.4 Inter,"Segoe UI",Arial,sans-serif!important;
  padding:15px 19px 14px!important;text-decoration:none!important;border-radius:0!important;
  box-shadow:none!important;white-space:nowrap;letter-spacing:0;
}
body[data-route] main .fluent-unified .fluent-unified-tab:hover {background:#2a4f70!important;color:#fff!important;}
body[data-route] main .fluent-unified .fluent-unified-tab[aria-selected="true"],
body[data-route] main .fluent-unified .fluent-unified-tab[aria-current="location"] {
  background:#0f6cbd!important;color:#fff!important;
  border-bottom:3px solid #9fd6ff!important;font-weight:720!important;
}
body[data-route] main .fluent-unified .fluent-unified-tab:focus-visible {outline:3px solid #b4e0ff!important;outline-offset:-4px;}
body[data-route] main .fluent-unified .fluent-unified-panel[hidden] {display:none!important;}
body[data-route] main .fluent-unified .fluent-unified-panel {padding:26px 0 10px;min-width:0;}
body[data-route] main .fluent-unified .fluent-unified-panel > section {
  max-width:none !important; margin:0 !important; padding:30px 0 36px !important;
  background:#fff !important; color:#263d52 !important; border:0!important;
  border-bottom:1px solid #e6eef5!important;border-radius:0!important;box-shadow:none!important;
}
body[data-route] main .fluent-unified .fluent-unified-panel > section:last-child {border-bottom:0!important;}
body[data-route] main .fluent-unified .fluent-unified-panel > section :is(h2,h3,h4,strong) {color:#213b56 !important;}
body[data-route] main .fluent-unified .fluent-unified-panel > section :is(p,li) {color:#52667b !important;}
body[data-route] main .fluent-unified .fluent-unified-panel > section h2 {font-size:clamp(23px,2.4vw,32px)!important;line-height:1.2!important;letter-spacing:-.02em!important;}
body[data-route] main .fluent-unified .fluent-unified-panel > section [class*="card"] {box-shadow:none!important;}
body[data-route] main .fluent-unified .fluent-unified-panel > section [data-layout="timeline"] :is(p,li,span){color:#465e76!important;}
body[data-route] main .fluent-unified .fluent-unified-panel > section a {color:#0f6cbd;}
body[data-route] main .fluent-unified .fluent-unified-anchorbar {margin:0 0 24px;}
body[data-route] main .fluent-unified :is(.fluent-unified-panel section, section[id],h2[id],h3[id]) {scroll-margin-top:calc(var(--ds-nav-h,68px) + 74px);}
/* Keep page-end CTAs in view regardless of selected content tab. */
body[data-route] main .fluent-unified .fluent-unified-tabs-shell + section:is([data-layout="cta"],[class$="-cta"]) {
  max-width:none !important; margin:0 !important; padding:36px clamp(24px,4vw,66px)!important;
  background:#f4f8fc!important;border:1px solid #e4ecf4!important;border-radius:0!important;box-shadow:none!important;
  color:#203751!important;
}
body[data-route] main .fluent-unified .fluent-unified-tabs-shell + section:is([data-layout="cta"],[class$="-cta"]) :is(h2,p){color:#203751!important;}
/* Help has its own usable sidebar/search. Only add the visual sticky jump bar. */
body main .fluent-help .fluent-unified-tabbar{top:var(--ds-nav-h,68px)!important;}
body main .fluent-help .fluent-unified-tabs{overflow-x:auto;}
@media (max-width:1000px) {
 body[data-route] main .fluent-unified :is(.fluent-unified-hero-grid,.site-hero-layout.fluent-unified-hero-grid) {grid-template-columns:1fr!important;gap:24px!important;}
 body[data-route] main .fluent-unified .fluent-motion-stage{justify-self:start;max-width:520px;}
}
@media (max-width:640px) {
 body[data-route] main .fluent-unified > :is(.cal-wrap,[class$="-wrap"]),
 body[data-route] main .fluent-unified > div > :is(.cal-wrap,[class$="-wrap"]) {padding-inline:18px!important;}
 body[data-route] main .fluent-unified section:is([data-layout="hero"],[class$="-hero"],.cal-hero){padding:33px 12px!important;}
 body[data-route] main .fluent-unified .fluent-unified-tab{font-size:13px!important;padding:13px 15px 12px!important;}
 body[data-route] main .fluent-unified .fluent-motion-stage{aspect-ratio:1.65;max-width:100%;}
 body[data-route] main .fluent-unified .fluent-unified-panel > section{padding:24px 0!important;}
}
@media (prefers-reduced-motion: reduce){
 body[data-route] main .fluent-unified *{scroll-behavior:auto!important;}
}
/* When the new tab bar exists, avoid duplicate old in-page topic navigation. */
body[data-route] main .fluent-unified:has(.fluent-unified-tabbar) :is(.medical-section-nav,.pricing-nav) {display:none!important;}
/* Long publication titles and DOI links must wrap on narrow phones. */
body[data-route] main .fluent-unified :is(.cal-reference,.cal-nm-reference,[data-reference-item]) a {
  overflow-wrap:anywhere!important;word-break:break-word!important;white-space:normal!important;
}