/* Version 5: larger home video, conspicuous sticky tabs, restored animated hero graphics. */
/* SURVEYLET FLUENT PREVIEW — applied only to the four opt-in pages.
   Neutral surfaces / restrained accent / persistent topic navigation.
   No content or original anchor targets are deleted. */

/* Shell and navigation. This file is only included on the preview routes. */
body:has(.fluent-prototype) { background: #fff !important; }
body:has(.fluent-prototype) .site-header { background: rgba(255,255,255,.97) !important; border-bottom: 1px solid #e5e9ee !important; box-shadow: 0 1px 4px rgba(17,24,39,.035) !important; }
body:has(.fluent-prototype) .site-utility { background: #f4f7fa !important; color: #556575 !important; border-bottom: 1px solid #ebeff3; }
body:has(.fluent-prototype) .site-utility a { color: #115ea3 !important; }
body:has(.fluent-prototype) .site-menu > a,
body:has(.fluent-prototype) .site-dropdown > button { border-radius: 5px !important; font-weight: 550 !important; }
body:has(.fluent-prototype) .site-nav-cta { border-radius: 7px !important; box-shadow: none !important; }

/* Shared restrained colors and typography on the selected pages. */
body[data-route] main .fluent-prototype {
  --cal-blue: #0f6cbd; --cal-blue-dark: #172b4d; --cal-accent: #0f6cbd;
  --cal-text: #243447; --cal-muted: #516273; --cal-border: #e3e9ef;
  --cal-shadow: none; --ds-brand: #0f6cbd;
  background: #fff !important; color: #243447 !important;
  font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
}
body[data-route] main .fluent-prototype .cal-wrap,
body[data-route] main .fluent-prototype .cal-home-wrap { width: 100% !important; max-width: none !important; padding: 0 !important; }

/* Compact, editorial hero, rather than a large promotional banner. */
body[data-route] main .fluent-prototype > div > section:is(.cal-home-hero, .cal-hero) {
  min-height: 0 !important; height: auto !important;
  margin: 0 !important; border: none !important;
  border-bottom: 1px solid #e8edf2 !important; border-radius: 0 !important;
  padding: clamp(38px, 4.5vw, 66px) max(28px, calc((100vw - 1180px) / 2)) !important;
  background: linear-gradient(115deg, #f7fbff 0%, #fff 67%) !important;
  box-shadow: none !important; color: #172b4d !important; overflow: hidden !important;
}
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-layout,
body[data-route] main .fluent-prototype .cal-hero .site-hero-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
body[data-route] main .fluent-prototype[data-fluent-preview="home"] .cal-home-hero .site-hero-layout { grid-template-columns: minmax(0,1.4fr) minmax(260px,.65fr) !important; gap: clamp(22px, 3vw, 54px) !important; }
body[data-route] main .fluent-prototype .cal-hero .site-hero-art { display: none !important; }
body[data-route] main .fluent-prototype .ds-field,
body[data-route] main .fluent-prototype .site-hero-art::after { display: none !important; }
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video { max-width: 400px !important; width: 100%; justify-self: end; }
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video a,
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video img {
  display: block; width: 100%; max-width: 400px !important; height: auto !important;
  border-radius: 10px !important; box-shadow: 0 5px 18px rgba(30,66,96,.1) !important;
}
body[data-route] main .fluent-prototype .cal-home-hero :is(h1, .cal-home-title-primary),
body[data-route] main .fluent-prototype .cal-hero h1 {
  font-size: clamp(35px, 3.4vw, 51px) !important;
  line-height: 1.09 !important; letter-spacing: -.035em !important;
  font-weight: 750 !important; color: #152c47 !important; max-width: 940px !important;
  margin: 0 0 12px !important;
}
body[data-route] main .fluent-prototype .cal-home-title-secondary {
  color: #40566e !important; font-size: clamp(21px, 2.1vw, 29px) !important;
  font-weight: 520 !important; letter-spacing: -.022em !important; line-height: 1.2 !important;
  max-width: 720px !important; margin: 6px 0 15px !important;
}
body[data-route] main .fluent-prototype .cal-hero p,
body[data-route] main .fluent-prototype .cal-home-hero p:not(.cal-home-hero-blog) {
  color: #586a7a !important; font-size: 16px !important; line-height: 1.65 !important; max-width: 800px !important;
}
body[data-route] main .fluent-prototype :is(.cal-home-eyebrow, .cal-eyebrow) {
  color: #0f6cbd !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; margin-bottom: 12px !important;
}
body[data-route] main .fluent-prototype .cal-home-trust-row { margin-top: 17px !important; gap: 7px !important; }
body[data-route] main .fluent-prototype .cal-home-pill { background: #edf4fb !important; border: 1px solid #e1eaf3 !important; box-shadow: none !important; border-radius: 5px !important; color: #335575 !important; padding: 4px 9px !important; font-size: 11px !important; }
body[data-route] main .fluent-prototype .cal-home-hero-blog { margin: 15px 0 0 !important; font-size: 13px !important; }
body[data-route] main .fluent-prototype .cal-home-hero-blog a { color: #0f6cbd !important; }
body[data-route] main .fluent-prototype :is(.cal-button, .cal-home-button) {
  border-radius: 7px !important; box-shadow: none !important; transform: none !important;
  font-weight: 650 !important; min-height: 42px !important; padding: 9px 16px !important;
}
body[data-route] main .fluent-prototype .cal-home-button-primary,
body[data-route] main .fluent-prototype .cal-button-primary,
body[data-route] main .fluent-prototype .cal-home-button-blue,
body[data-route] main .fluent-prototype .cal-home-cta .cal-home-button-primary { background: #0f6cbd !important; color: #fff !important; border-color: #0f6cbd !important; }
body[data-route] main .fluent-prototype .cal-home-button-secondary,
body[data-route] main .fluent-prototype .cal-button-secondary,
body[data-route] main .fluent-prototype .cal-home-button-outline { background: #fff !important; color: #0f6cbd !important; border: 1px solid #cad9e7 !important; }
body[data-route] main .fluent-prototype .cal-home-overview {
  max-width: 1180px !important; margin: 0 auto !important; padding: 20px 28px 0 !important;
  color: #586a7a !important; font-size: 15px !important;
}
body[data-route] main .fluent-prototype .cal-home-overview p { max-width: 1030px; }

/* The new topic navigation is deliberately flat, not another row of cards. */
body[data-route] main .fluent-prototype .fluent-tabs-shell { max-width: 1240px; margin: 0 auto; padding: 27px 28px 48px; }
body[data-route] main .fluent-prototype .fluent-tab-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-bottom: 12px; }
body[data-route] main .fluent-prototype .fluent-tab-prompt { color: #455b71; font-size: 11px; font-weight: 740; letter-spacing: .13em; }
body[data-route] main .fluent-prototype .fluent-tab-heading p { color: #6b7b89; font-size: 13px; margin: 0; }
body[data-route] main .fluent-prototype .fluent-tab-list {
  display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; border-bottom: 1px solid #dce5ed; gap: 6px;
  position: sticky; top: 66px; z-index: 21; background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body[data-route] main .fluent-prototype .fluent-tab {
  flex: 0 0 auto; background: transparent; color: #586a7a; font: 600 14px/1.4 "Inter", "Segoe UI", sans-serif;
  padding: 15px 17px 14px; border: none; border-bottom: 3px solid transparent;
  border-radius: 0; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
body[data-route] main .fluent-prototype .fluent-tab:hover { color: #0f6cbd; background: #f4f8fc; }
body[data-route] main .fluent-prototype .fluent-tab[aria-selected="true"] { color: #0f6cbd; border-bottom-color: #0f6cbd; font-weight: 700; }
body[data-route] main .fluent-prototype .fluent-tab:focus-visible { outline: 2px solid #0f6cbd; outline-offset: -3px; }
body[data-route] main .fluent-prototype .fluent-tab-panel[hidden] { display: none !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel { padding-top: 22px; min-width: 0; }
body[data-route] main .fluent-prototype .fluent-tab-panel > section {
  padding: 28px 6px 32px !important; margin: 0 !important; border: 0 !important;
  border-bottom: 1px solid #edf0f4 !important; border-radius: 0 !important;
  background: #fff !important; box-shadow: none !important;
  max-width: none !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel > section:last-child { border-bottom: 0 !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel :is(h2, h3) { color: #1d3550 !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel h2 {
  font-size: clamp(24px, 2.3vw, 31px) !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: -.025em !important; margin: 0 0 13px !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel h3 { font-size: clamp(17px,1.5vw,20px) !important; font-weight: 680 !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel :is(p,li) { line-height: 1.65; }
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-home-intro,
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-intro { color: #556679 !important; font-size: 16px !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel :is(.cal-card,.cal-home-card,.cal-home-institution-card) {
  background: #fff !important; border: 1px solid #e3eaf0 !important; border-radius: 9px !important;
  box-shadow: none !important; padding: 20px !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel :is(.cal-card,.cal-home-card):hover { border-color: #b9d5ee !important; transform: none !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel :is(.cal-home-badge, .cal-page-kicker) {
  background: transparent !important; border: 0 !important; color: #63768b !important;
  box-shadow: none !important; font-size: 11px !important; font-weight: 720 !important;
  letter-spacing: .09em !important; padding: 0 !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-home-institution-grid { gap: 11px !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-home-institution-card { padding: 13px !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-step { box-shadow:none !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-table th { background: #f4f7fa !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-table th,
body[data-route] main .fluent-prototype .fluent-tab-panel .cal-table td { border-color: #e4eaf0 !important; }

/* The page-end call to action remains visible whichever tab is selected. */
body[data-route] main .fluent-prototype > div > section:is(.cal-home-cta, .cal-cta) {
  max-width: none !important; background: #f4f8fc !important; border: 1px solid #e3edf7 !important;
  color: #21374f !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 35px max(28px, calc((100vw - 1180px)/2)) !important;
}
body[data-route] main .fluent-prototype > div > section:is(.cal-home-cta, .cal-cta) h2 { color: #203b56 !important; font-size: clamp(23px, 2vw, 30px) !important; }
body[data-route] main .fluent-prototype > div > section:is(.cal-home-cta, .cal-cta) p { color: #556679 !important; font-size: 16px !important; }

@media (max-width: 940px) {
  body[data-route] main .fluent-prototype[data-fluent-preview="home"] .cal-home-hero .site-hero-layout { grid-template-columns: 1fr !important; }
  body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video { justify-self: start !important; max-width: 420px !important; margin-top: 22px !important; }
  body[data-route] main .fluent-prototype .fluent-tab-list { top: 64px; }
}
@media (max-width: 620px) {
  body[data-route] main .fluent-prototype > div > section:is(.cal-home-hero, .cal-hero) { padding: 36px 20px !important; }
  body[data-route] main .fluent-prototype .fluent-tabs-shell { padding: 22px 18px 34px; }
  body[data-route] main .fluent-prototype .fluent-tab-heading { gap: 3px; }
  body[data-route] main .fluent-prototype .fluent-tab-heading p { font-size: 12px; }
  body[data-route] main .fluent-prototype .fluent-tab { padding: 12px 13px; font-size: 13px; }
  body[data-route] main .fluent-prototype .fluent-tab-list { top: 72px; }
  body[data-route] main .fluent-prototype .cal-home-overview { padding: 18px 20px 0 !important; }
  body[data-route] main .fluent-prototype .fluent-tab-panel > section { padding: 25px 2px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route] main .fluent-prototype * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* PROTOTYPE V3 — less page inset, functional persistent tabs, crisp light workflows.
   Scoped to the four pages opted into this CSS. */
body[data-route] main .fluent-prototype { --fluent-gutter: clamp(20px, 4vw, 76px); }
/* main.site-main's global overflow:hidden was capturing scrolling and breaking sticky. */
body:has(.fluent-prototype) main.site-main { overflow: visible !important; }
body[data-route] main .fluent-prototype > div > section:is(.cal-home-hero, .cal-hero) {
  padding: clamp(38px, 4.2vw, 60px) var(--fluent-gutter) !important;
}
body[data-route] main .fluent-prototype .cal-home-overview {
  max-width: none !important;
  padding-inline: var(--fluent-gutter) !important;
}
body[data-route] main .fluent-prototype .fluent-tabs-shell {
  width: 100%; max-width: none; padding: 24px var(--fluent-gutter) 44px;
}
body[data-route] main .fluent-prototype .fluent-tab-list {
  top: var(--ds-nav-h, 68px);
  z-index: 85;
  margin-inline: calc(-1 * var(--fluent-gutter));
  padding-inline: var(--fluent-gutter);
  width: auto;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 3px 12px -9px rgba(25,51,77,.35);
}
body[data-route] main .fluent-prototype > div > section:is(.cal-home-cta, .cal-cta) {
  padding-inline: var(--fluent-gutter) !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel,
body[data-route] main .fluent-prototype .fluent-panels { overflow: visible !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel > section {
  scroll-margin-top: calc(var(--ds-nav-h, 68px) + 72px);
}
/* Remove the inherited dark-blue process strip and the accompanying charts.
   The content stays in the same logical order: 6 independent, numbered steps. */
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="timeline"] {
  background: #fff !important; color: #253d52 !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="timeline"] > h2 {
  color: #1e3650 !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="timeline"] > p,
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="timeline"] > .cal-intro {
  color: #52677b !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 22px !important;
  counter-reset: calstep;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-step {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 170px;
  padding: 62px 21px 20px !important;
  border: 1px solid #e0e7ee !important;
  border-radius: 9px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  color: #253d52 !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-step::before {
  content: counter(calstep) !important;
  counter-increment: calstep;
  position: absolute;
  top: 18px !important; left: 21px !important;
  width: 29px !important; height: 29px !important;
  display: grid !important; place-items: center;
  background: #e4f1fc !important; color: #0c609e !important;
  border: none !important; border-radius: 7px !important; box-shadow: none !important;
  font-size: 14px !important; line-height: 1 !important;
  font-weight: 700 !important; transform: none !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-step::after {
  content: none !important; display: none !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-step strong {
  display: block; color: #1d3550 !important; font-weight: 700 !important;
  font-size: 16px !important; line-height: 1.35 !important; margin-bottom: 9px;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-step :is(span,p,li) {
  display: block; color: #4f6479 !important;
  font-size: 14px !important; line-height: 1.55 !important;
}
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .ds-step-ring,
body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .ds-steps-chart {
  display: none !important;
}
/* Editorial sticky headings need not compete with the new fixed-position tabs. */
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="chapter"] > h2,
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="split"] > h2,
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="intro"] > h2 {
  position: static !important;
}
@media (max-width: 920px) {
  body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px) {
  body[data-route] main .fluent-prototype { --fluent-gutter: 18px; }
  body[data-route] main .fluent-prototype .fluent-tabs-shell {
    padding-inline: var(--fluent-gutter);
  }
  body[data-route] main .fluent-prototype .fluent-tab-list { top: var(--ds-nav-h, 68px); }
  body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-steps {
    grid-template-columns: 1fr !important;
  }
  body[data-route] main .fluent-prototype .fluent-tab-panel section[data-layout="timeline"] .design-step { min-height: 0; }
}

/* v4: keep new topic nav visible and full width when the primary header is sticky. */
body[data-route] main .fluent-prototype .fluent-tabs-shell { max-width: none !important; width: 100% !important; }
body[data-route] main .fluent-prototype .fluent-tab-list { position: sticky !important; top: var(--ds-nav-h, 68px) !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="timeline"] :is(h3,h4,strong) { color: #1d3550 !important; }
body[data-route] main .fluent-prototype .fluent-tab-panel > section[data-layout="timeline"] :is(p,li,span:not([class*="badge"])) { color: #4f6479 !important; }


/* V5: contrast-forward sticky topic navigation and expanded home video. */
body[data-route] main .fluent-prototype .fluent-tab-list {
  background: #193854 !important;
  color: #fff !important;
  border: 1px solid #264968 !important;
  border-bottom: 2px solid #0e273f !important;
  box-shadow: 0 8px 20px rgba(16, 36, 55, .2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-route] main .fluent-prototype .fluent-tab {
  color: #e5edf6 !important;
  border-bottom: 3px solid transparent !important;
  font-weight: 630 !important;
}
body[data-route] main .fluent-prototype .fluent-tab:hover {
  background: #2a4f70 !important;
  color: #fff !important;
}
body[data-route] main .fluent-prototype .fluent-tab[aria-selected="true"] {
  color: #fff !important;
  background: #0f6cbd !important;
  border-bottom: 3px solid #9fd6ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
body[data-route] main .fluent-prototype .fluent-tab:focus-visible {
  outline: 3px solid #b4e0ff !important;
  outline-offset: -4px;
}
body[data-route] main .fluent-prototype[data-fluent-preview="home"] .cal-home-hero .site-hero-layout {
  grid-template-columns: minmax(0, 1.09fr) minmax(0, 1fr) !important;
  gap: clamp(28px, 3.3vw, 60px) !important;
  align-items: center !important;
}
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video {
  display: block !important;
  max-width: 760px !important;
  width: 100% !important;
  justify-self: end;
}
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video a,
body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video img {
  width: 100% !important;
  max-width: 760px !important;
  height: auto !important;
}
/* The original site's consensus-field animation is a lightweight canvas, not
   a GIF. Restore it behind the page headers and give motion its own right-side
   visual stage rather than resurrecting the dated promotional still images. */
body[data-route] main .fluent-prototype > div > section:is(.cal-home-hero, .cal-hero) .ds-field {
  display: block !important;
  opacity: .88 !important;
}
body[data-route] main .fluent-prototype > div > section:is(.cal-home-hero, .cal-hero) {
  isolation: isolate !important;
}
body[data-route] main .fluent-prototype .cal-hero .site-hero-art {
  display: none !important; /* older photographic image; replaced by motion stage */
}
body[data-route] main .fluent-prototype .cal-hero .site-hero-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 92px) !important;
}
body[data-route] main .fluent-prototype .cal-hero .site-hero-copy,
body[data-route] main .fluent-prototype .fluent-realtime-copy { min-width: 0; }
body[data-route] main .fluent-prototype[data-fluent-preview="realtime"] .cal-hero .fluent-realtime-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 92px) !important;
}
body[data-route] main .fluent-prototype .fluent-motion-stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 590px;
  aspect-ratio: 1.47;
  justify-self: end;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(157, 195, 224, .42);
  background: radial-gradient(ellipse at 53% 49%, rgba(221,241,255,.82) 0%, rgba(241,249,255,.47) 45%, rgba(255,255,255,.58) 76%);
  box-shadow: 0 8px 30px rgba(35, 83, 120, .075), inset 0 1px 0 #fff;
}
body[data-route] main .fluent-prototype .fluent-motion-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
body[data-route] main .fluent-prototype .fluent-motion-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.36),transparent 45%);
  pointer-events: none; z-index: 1;
}
@media (max-width: 980px) {
  body[data-route] main .fluent-prototype[data-fluent-preview="home"] .cal-home-hero .site-hero-layout {
    grid-template-columns: 1fr !important;
  }
  body[data-route] main .fluent-prototype .cal-home-hero .site-hero-video {
    justify-self: start !important;
    margin-top: 24px !important;
    max-width: 760px !important;
  }
  body[data-route] main .fluent-prototype .cal-hero .site-hero-layout,
  body[data-route] main .fluent-prototype[data-fluent-preview="realtime"] .cal-hero .fluent-realtime-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  body[data-route] main .fluent-prototype .fluent-motion-stage {
    justify-self: start;
    max-width: 620px;
    width: 100%;
  }
}
@media (max-width: 620px) {
  body[data-route] main .fluent-prototype .fluent-tab-list {
    box-shadow: 0 6px 15px rgba(16, 36, 55, .19) !important;
  }
  body[data-route] main .fluent-prototype .fluent-motion-stage { aspect-ratio: 1.66; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route] main .fluent-prototype .fluent-motion-stage { animation: none !important; }
}