/* Shared masthead foundations; the centered layout is defined below. */
.site-header--distributed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: none;
  min-height: 88px;
  padding: 20px 32px;
  color: #fff;
  background: transparent;
}
.site-header--distributed .header-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  color: #fff;
}
.site-header--distributed .header-menu-link {
  padding: 12px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.02em;
  text-transform: none;
  white-space: nowrap;
  color: #fff;
}
.site-header--distributed .header-menu-link:hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.site-header--distributed .wordmark {
  justify-self: start;
  padding: 0;
  color: #fff;
  font-size: 36px;
  line-height: 1;
}
.site-header--distributed .header-utility { justify-self: end; }
@media (max-width: 900px) {
  .site-header--distributed { gap: 24px; padding: 18px 24px; min-height: 80px; }
  .site-header--distributed .header-menu-link { font-size: 14px; }
}
@media (max-width: 760px) {
  .site-header--distributed {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 76px;
    padding: 18px 22px;
  }
  .site-header--distributed .header-navigation,
  .site-header--distributed .header-utility { display: none; }
  .site-header--distributed .wordmark { font-size: 32px; }
  .site-header--distributed .menu-toggle { position: static; justify-self: end; color: #fff; }
  .site-header--distributed .mobile-nav { top: 100%; left: 0; right: 0; }
  .site-header--distributed .mobile-nav a {
    font-family: inherit;
    font-size: 16px;
    letter-spacing: -.02em;
    text-transform: none;
  }
}

/* Shared proportions taken from the reference's responsive header.
   Its rem scale is local here so articles and body copy keep their sizing. */
.site-header--distributed.site-header--scroll {
  --header-unit: 14px;
  --header-glass: rgb(248 248 248 / .74);
  --header-top-padding: calc(1.5 * var(--header-unit) + 8px);
  --header-bottom-padding: calc(1.5 * var(--header-unit));
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  min-height: 0;
  padding: var(--header-top-padding) calc(2 * var(--header-unit)) var(--header-bottom-padding);
  gap: calc(1.125 * var(--header-unit));
  background: transparent;
  transition: background-color .3s cubic-bezier(.215, .61, .355, 1), color .3s ease, box-shadow .3s ease, padding-top .25s ease, padding-bottom .25s ease;
}
.site-header--scroll.is-scrolled,
.site-header--scroll.site-header--subpage {
  color: #222;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  box-shadow: inset 0 -1px 0 #ffffff66, 0 4px 24px #00000008;
}
/* The glass bar is compact, with equal space above and below its contents. */
.site-header--distributed.site-header--scroll:is(.is-scrolled, .site-header--subpage) {
  padding-block: var(--header-unit);
}
/* Headers over hero artwork share the homepage's open spacing until scroll. */
:where(.customer-story, .architecture-overview, .deployment-overview, .transformation-overview, .industry-overview) .site-header--distributed.site-header--scroll.site-header--subpage:not(.is-scrolled) {
  padding-top: var(--header-top-padding);
  padding-bottom: var(--header-bottom-padding);
}
.site-header--scroll .header-navigation { gap: calc(2.7 * var(--header-unit)); color: inherit; }
.site-header--scroll .header-menu-link {
  color: inherit;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(.938 * var(--header-unit));
  line-height: 1.2;
  letter-spacing: calc(-.009 * var(--header-unit));
}
.site-header--scroll .wordmark {
  color: inherit;
  font-size: calc(2 * var(--header-unit));
  line-height: calc(1.5 * var(--header-unit));
}
.site-header--distributed.site-header--scroll .menu-toggle { color: inherit; }
.site-header--scroll .menu-toggle span { background: currentColor; }
.site-header--scroll:is(.is-scrolled, .site-header--subpage) :focus-visible { outline-color: currentColor; }
.site-header--scroll .mobile-nav {
  color: #222;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}
.site-header--scroll .mobile-nav a { color: inherit; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header--scroll.is-scrolled,
  .site-header--scroll.site-header--subpage,
  .site-header--scroll .mobile-nav { background: #f8f8f8; }
}
@media (min-width: 1280px) {
  .site-header--distributed.site-header--scroll { --header-unit: calc(1.25vw - 2px); }
}
@media (min-width: 1440px) {
  .site-header--distributed.site-header--scroll { --header-unit: calc(.416667vw + 10px); }
}
@media (min-width: 1920px) {
  .site-header--distributed.site-header--scroll { --header-unit: calc(1.25vw - 6px); }
}
@media (min-width: 2400px) {
  .site-header--distributed.site-header--scroll { --header-unit: 24px; }
}
@media (max-width: 1280px) {
  .site-header--scroll .header-navigation { gap: calc(1.5 * var(--header-unit)); }
}
@media (max-width: 760px) {
  .site-header--distributed.site-header--scroll {
    --header-top-padding: 26px;
    --header-bottom-padding: 18px;
    padding: var(--header-top-padding) 22px var(--header-bottom-padding);
  }
  .site-header--scroll .menu-toggle { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header--distributed.site-header--scroll { transition: none; }
}

/* Equal side columns keep the homepage wordmark at the viewport center. */
.site-header--distributed.site-header--centered {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.site-header--centered .wordmark {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
.site-header--centered .header-navigation {
  width: 100%;
  justify-content: flex-end;
}
.site-header--centered .header-navigation--left {
  grid-column: 1;
  grid-row: 1;
  padding-right: clamp(24px, 2.5vw, 48px);
}
.site-header--centered .header-navigation--right {
  grid-column: 3;
  grid-row: 1;
  padding-left: clamp(24px, 2.5vw, 48px);
  justify-content: flex-start;
}
@media (max-width: 760px) {
  .site-header--centered .header-navigation { display: none; }
  .site-header--centered .menu-toggle { grid-column: 3; grid-row: 1; }
}

/* Shared subpage navigation uses the same centered homepage layout. */
.site-header--distributed.site-header--scroll.site-header--subpage {
  position: sticky;
  top: 0;
  border: 0;
  transform: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.site-header--subpage .wordmark { font-family: Georgia, serif; text-decoration: none; }
.site-header--subpage .header-navigation { position: static; transform: none; margin: 0; }
.site-header--subpage .header-menu-link { text-decoration: none; }
.site-header--subpage .menu-toggle { display: none; }
.site-header--subpage .mobile-nav[hidden] { display: none !important; }
@media(max-width:760px) {
 .site-header--subpage .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; border:0; padding:0; width:28px; background:none; }
 .site-header--subpage .menu-toggle span { display:block; width:24px; height:1px; background:currentColor; }
 .site-header--subpage .mobile-nav { position:absolute; top:100%; left:0; right:0; padding:24px; }
 .site-header--subpage .mobile-nav a { display:block; padding:12px 0; text-decoration:none; }
}

/* Customer stories begin with the navigation over the hero artwork. */
.customer-story .site-header--distributed.site-header--scroll.site-header--subpage {
  position: fixed;
}
.customer-story .site-header--scroll.site-header--subpage:not(.is-scrolled) {
  color: #fff;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.customer-story .site-header--subpage .mobile-nav { color: #222; }

/* Editorial geometry follows the supplied Sierra customer-story reference. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #262626; background: #fff; -webkit-font-smoothing: antialiased; }
/* Match the landing-page case cards across every story section. */
.customer-story { --story-radius: 8px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 30; padding: 12px 20px; background: #fff; color: #111; }
.skip-link:focus { top: 12px; }
.wordmark { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.06em; }
.story-container { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 24px; }
.story-navigation { position: absolute; top: 0; left: 0; z-index: 10; background: transparent; }
.menu-toggle, .mobile-nav { display: none; }
.story-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 800px; height: 90svh; color: #fff; background: #202725; }
/* Keep the soft editorial gradient at full resolution; a light scrim supports white type. */
.story-hero-background { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(#00000042, #00000042), var(--story-art); background-size: cover; background-position: center; }
.story-hero-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 120px; padding-block: 120px; }
.story-hero-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.story-company-logo { display: block; max-width: 240px; width: auto; height: 64px; object-fit: contain; object-position: left center; filter: grayscale(1) brightness(0) invert(1); }
.story-company-logo.case-logo--knockout { height:84px; max-width:240px; filter:grayscale(1) contrast(5) invert(1); mix-blend-mode:screen; }
.story-company-name { min-height: 64px; display: flex; align-items: center; font-size: 36px; line-height: 1.15; font-weight: 550; letter-spacing: -.045em; }
.story-company-name.story-company-name--compact { min-height:48px; max-width:430px; font-size:clamp(23px,2.4vw,30px); line-height:1.16; letter-spacing:-.035em; }
.story-hero h1 { font-size: 65px; line-height: 72px; letter-spacing: -.025em; max-width: 1112px; text-wrap: balance; }
.story-result-value { font-size: 65px; line-height: 72px; letter-spacing: -.03em; }
.story-result-label { font-size: 18px; line-height: 26px; margin-top: 4px; }
.story-article { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "sidebar demo" "sidebar prose"; column-gap: 104.6667px; align-items: start; padding-top: 112px; padding-bottom: 64px; }
.story-sidebar { grid-area: sidebar; align-self: stretch; min-width: 0; }
.story-sidebar-inner { position: sticky; top: 32px; }
.story-contents { padding: 0; }
.story-contents ul { display: flex; flex-direction: column; gap: 18px; padding: 0; margin: 0; list-style: none; }
.story-contents a { display: flex; align-items: baseline; gap: 12px; font-size: 16px; line-height: 24px; color: #4b4b4b; transition: color .2s; }
.story-contents a::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #999; }
.story-contents a:hover, .story-contents a[aria-current="location"] { color: #000; }
.story-contents a[aria-current="location"]::before { background: #111; }
.story-industry { margin-top: 40px; padding-bottom: 24px; }
.story-industry h2 { margin-bottom: 16px; font-size: 20px; line-height: 28px; }
.story-industry > span { display: inline-block; padding: 4px 8px; background: #f3f3f3; border-radius: 3px; color: #555; font-size: 12px; line-height: 16px; }
.story-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 24px; color: #666; }
.story-back:hover { color: #111; }
.story-prose { grid-area: prose; min-width: 0; font-size: 18px; line-height: 28px; color: #606060; overflow-wrap: anywhere; }
.story-lead-image { margin: 0 0 64px; }
.story-lead-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--story-radius); }
.story-lead-image figcaption { margin-top: 12px; font-size: 12px; line-height: 18px; color: #888; }
.story-prose h2 { color: #262626; font-size: 38px; line-height: 46px; letter-spacing: -.025em; margin-bottom: 32px; text-wrap: balance; }
.story-prose h3 { color: #262626; font-size: 20px; line-height: 28px; margin-bottom: 24px; }
.story-prose p + p { margin-top: 24px; }
.story-prose > section, .story-prose > aside { margin-top: 80px; scroll-margin-top: 32px; }
.story-prose strong { color: #303030; font-weight: 550; }
.story-narrative { margin: 36px 0 0; padding-left: 32px; list-style: decimal; }
.story-narrative > li { padding-left: 8px; scroll-margin-top: 120px; }
.story-narrative > li + li { margin-top: 32px; }
.story-narrative > li::marker { color: #262626; font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.story-prose .story-narrative > li > h2 { margin-bottom: 10px; font-size: 24px; line-height: 32px; font-weight: 650; letter-spacing: -.02em; text-wrap: pretty; }
.story-narrative > li > p + p { margin-top: 16px; }
.body-eyebrow { margin-bottom: 16px; font-size: 12px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.workflow-steps { list-style: none; padding: 0; margin: 48px 0 0; counter-reset: steps; }
.workflow-steps li { position: relative; padding-left: 48px; margin-top: 40px; counter-increment: steps; }
.workflow-steps li::before { content: counter(steps, decimal-leading-zero); position: absolute; top: 2px; left: 0; color: #8b8b8b; font-size: 14px; }
.workflow-steps h3 { margin-bottom: 16px; }
.results-table-wrap { width: 100%; overflow-x: auto; margin: 40px 0; }
.results-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 22px; }
.results-table caption { text-align: left; padding-bottom: 24px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #777; }
.results-table th, .results-table td { padding: 16px 24px 16px 0; vertical-align: top; }
.results-table tr > :last-child { padding-right: 0; }
.results-table th { font-weight: 500; color: #222; }
.results-table thead th { color: #777; font-size: 12px; font-weight: 400; }
.results-table tbody th { width: 30%; }
.results-table td:nth-child(2) { color: #222; min-width: 100px; font-size: 20px; line-height: 26px; letter-spacing: -.02em; }
.number-lens { margin: 48px 0; padding-block: 16px; }
.number-lens figcaption { color: #555; font-size: 16px; line-height: 24px; margin-bottom: 20px; }
.story-prose .number-lens-value { color: #222; font-size: clamp(40px, 4vw, 60px); line-height: 1.1; letter-spacing: -.035em; }
.story-prose .number-lens-explanation { color: #333; font-size: 24px; line-height: 32px; margin-top: 20px; }
.story-prose .number-lens-detail { font-size: 16px; line-height: 24px; margin-top: 24px; }
.number-bars { display: grid; gap: 18px; margin-block: 32px; }
.number-bar { display: grid; grid-template-columns: 110px 60px minmax(0, 1fr); align-items: center; gap: 16px; }
.number-bar > div { background: #ececec; height: 8px; }
.number-bar i { display: block; height: 100%; background: #333; width: var(--bar-width, 50%); }
.story-additional-results { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; }
.story-additional-results > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; }
.story-additional-results dt { font-size: 14px; line-height: 22px; }
.story-additional-results dd { font-size: 36px; line-height: 40px; letter-spacing: -.03em; color: #222; }
.story-related { padding-block: 112px; }
.story-related > h2 { font-size: 38px; line-height: 46px; letter-spacing: -.025em; margin-bottom: 48px; }
.story-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related-story { display: flex; flex-direction: column; align-items: flex-start; }
.related-story-art { width: 100%; height: 280px; border-radius: var(--story-radius); overflow: hidden; position: relative; isolation: isolate; display: grid; place-items: center; padding: 24px; color: #fff; }
.related-story-art::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--story-art) center / cover; filter: brightness(.68); }
.related-story-art span { font-size: 28px; line-height: 1.15; font-weight: 500; text-align: center; letter-spacing: -.025em; }
.related-story-logo { display:block; width:auto; max-width:80%; height:96px; object-fit:contain; }
.related-story-logo.case-logo--knockout { filter:grayscale(1) contrast(5) invert(1); mix-blend-mode:screen; }
.related-story h3 { font-size: 24px; line-height: 32px; letter-spacing: -.02em; margin-block: 24px; }
.story-read { margin-top: auto; font-size: 15px; display: flex; align-items: center; gap: 16px; }
.story-cta { padding-block: 96px; text-align: center; }
.story-cta h2 { font-size: 48px; line-height: 56px; letter-spacing: -.03em; margin-bottom: 24px; }
.story-cta p { font-size: 18px; line-height: 26px; color: #666; }
.story-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; border-radius: var(--story-radius); margin-top: 32px; padding: 16px 24px; background: #111; color: #fff; font-size: 16px; line-height: 20px; }
.story-cta a:hover { background: #333; }
.story-cta--application { scroll-margin-top: 112px; }
.story-cta--application h2 { max-width: 1080px; margin-inline: auto; text-wrap: balance; }
.story-cta--application p { max-width: 1080px; margin-inline: auto; line-height: 1.65; text-wrap: balance; }
.architecture-line { display: flex; justify-content: space-between; gap: 32px; padding-top: 64px; margin-top: 64px; font-size: 12px; line-height: 20px; color: #888; }
@media (min-width: 1800px) {
  .story-hero { min-height: 1000px; }
}
@media (max-width: 1199px) {
  .story-article { grid-template-columns: minmax(0, 1fr); grid-template-areas: "demo" "sidebar" "prose"; max-width: 900px; padding-top: 80px; }
  .story-contents, .story-back { display: none; }
  .story-sidebar-inner { position: static; }
  .story-industry { padding: 0 0 32px; margin: 0; }
  .story-industry h2 { margin-bottom: 8px; }
  .story-hero h1 { font-size: 56px; line-height: 64px; }
  .story-hero-content { gap: 80px; }
  .story-prose > section, .story-prose > aside { scroll-margin-top: 24px; }
}
@media (max-width: 760px) {
  .story-navigation .menu-toggle { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 12px 0 12px 12px; }
  .menu-toggle span { display: block; width: 22px; height: 1px; background: currentColor; }
  .story-navigation .mobile-nav:not([hidden]) { display: flex; flex-direction: column; position: absolute; padding: 24px; background: #fff; color: #222; box-shadow: 0 8px 16px #0001; }
  .mobile-nav a { padding: 12px 0; }
  .story-hero { min-height: 720px; height: 100svh; }
  .story-hero-content { gap: 64px; padding-top: 128px; padding-bottom: 80px; }
  .story-hero h1 { font-size: 42px; line-height: 48px; }
  .story-company-logo { height: 48px; max-width: 200px; }
  .story-company-name { min-height: 48px; font-size: 28px; }
  .story-result-value { font-size: 52px; line-height: 58px; }
  .story-result-label { font-size: 16px; line-height: 24px; }
  .story-article { padding-top: 48px; padding-bottom: 48px; }
  .story-prose { font-size: 17px; line-height: 26px; }
  .story-prose h2 { font-size: 30px; line-height: 38px; margin-bottom: 24px; }
  .story-prose > section, .story-prose > aside { margin-top: 56px; }
  .story-narrative { margin-top: 28px; padding-left: 28px; }
  .story-narrative > li { padding-left: 5px; }
  .story-narrative > li + li { margin-top: 28px; }
  .story-narrative > li::marker { font-size: 21px; }
  .story-prose .story-narrative > li > h2 { margin-bottom: 8px; font-size: 21px; line-height: 29px; }
  .story-lead-image { margin-bottom: 40px; }
  .results-table { display: block; }
  .results-table caption { display: block; }
  .results-table thead { display: none; }
  .results-table tbody { display: grid; gap: 32px; }
  .results-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
  .results-table th, .results-table td { padding: 0; }
  .results-table tbody th { width: auto; }
  .results-table td:nth-child(2) { min-width: 0; text-align: right; font-size: 24px; line-height: 28px; }
  .results-table td:last-child { grid-column: 1 / -1; }
  .number-lens { margin-block: 40px; padding: 0; }
  .story-additional-results { margin-top: 48px; gap: 24px; }
  .story-related { padding-block: 64px; }
  .story-related > h2 { font-size: 32px; line-height: 40px; margin-bottom: 32px; }
  .story-related-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .related-story-art { height: auto; aspect-ratio: 1.2; }
  .related-story h3 { margin-block: 20px; }
  .story-cta { padding-block: 64px; }
  .story-cta h2 { font-size: 36px; line-height: 44px; }
  .architecture-line { margin-top: 48px; padding-top: 24px; flex-direction: column; gap: 12px; }
}
@media (max-width: 400px) {
  .story-hero h1 { font-size: 38px; line-height: 44px; }
  .story-container, .ending-shell { padding-inline: 20px; }
  .story-hero-content { gap: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { transition: none !important; }
}

.story-evidence-note { font-size:14px; line-height:1.5; color:#777; margin-top:24px; }
.story-sidebar-inner { top:110px; }
.story-prose > section { scroll-margin-top:120px; }

/* Financial evidence shares the hero with the story, without invented trends. */
/* A 16:9 desktop frame fills at least the first screen, including taller windows. */
.story-hero { display: grid; width: 100%; max-width: 100%; height: auto; min-height: 100svh; aspect-ratio: 16 / 9; }
.story-hero-content { display: grid; height: auto; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 64px; min-height: inherit; padding-block: clamp(112px,10vw,144px) clamp(56px,6.67vw,96px); }
.story-hero h1 { font-size: clamp(36px,4vw,56px); line-height: 1.09; text-wrap: pretty; }
.story-hero-heading { gap: 36px; }
.story-hero-copy { min-width: 0; }
.story-hero-subtitle { max-width: 38em; margin-top: 24px; font-size: 18px; line-height: 1.5; color: #ffffffe0; text-wrap: pretty; }
.story-viz { min-width: 0; width: 100%; padding: 28px; border: 1px solid #ffffff35; border-radius: var(--story-radius); background: linear-gradient(145deg,#ffffff0d,#ffffff03); }
.story-viz-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 16px; }
.story-viz .story-result-value { font-size: clamp(46px,5.7vw,76px); line-height: 1; }
.story-viz .story-result-label { font-size: 16px; line-height: 1.4; margin-top: 10px; }
.story-viz h2 { font-size: 15px; line-height: 1.4; margin: 30px 0 20px; }
.story-viz-plot { display: flex; gap: 20px; align-items: stretch; }
.story-viz-item { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; border-radius: 4px; }
.story-viz-value { font-size: 20px; line-height: 1.2; padding-bottom: 10px; font-variant-numeric: tabular-nums; }
.story-viz-mark { display: block; background: linear-gradient(0deg,#ffffff30,#ffffffbf); border: 1px solid #ffffff55; border-radius: 5px 5px 0 0; transition: filter .2s; }
.story-viz-item:hover .story-viz-mark,.story-viz-item[aria-pressed="true"] .story-viz-mark { filter: brightness(1.3); background-color: #ffffff25; }
.story-viz-plot--bars { height: 190px; padding-bottom: 32px; }
.story-viz-plot--bars .story-viz-item { justify-content: flex-end; }
.story-viz-plot--bars .story-viz-mark { height: calc(var(--amount) * .75); flex-shrink: 0; border-bottom: 0; }
.story-viz-label { font-size: 12px; line-height: 1.35; padding-top: 9px; }
.story-viz-plot--bars .story-viz-label { position: absolute; top: 100%; left: 0; }
.story-viz-plot--stack { flex-direction: column; gap: 14px; }
.story-viz-plot--facts { gap:24px; }
.story-viz-plot--facts .story-viz-item { padding-top:8px; }
.story-viz-plot--facts .story-viz-value { font-size:clamp(30px,3.4vw,42px); letter-spacing:-.035em; }
.story-viz-plot--facts .story-viz-mark { display:none; }
.story-viz-plot--stack .story-viz-mark { width: var(--amount); height: 24px; border-radius: 3px; }
.story-viz-plot--stack .story-viz-value { font-size: 24px; }
.story-viz-plot--flow { flex-direction: column; gap: 0; }
.story-viz-plot--flow .story-viz-item { padding: 12px 0 12px 26px; border-left: 1px solid #ffffff50; }
.story-viz-plot--flow .story-viz-mark { position: absolute; left: -5px; top: 20px; width: 9px; height: 9px; border-radius: 50%; }
.story-viz-plot--flow .story-viz-value { padding: 0; }
.story-viz-plot--flow .story-viz-label { padding-top: 4px; }
.story-viz figcaption { border-top: 1px solid #ffffff25; padding-top: 14px; font-size: 10px; line-height: 1.55; color: #ffffffb8; }
.story-viz figcaption a { text-decoration: underline; white-space: nowrap; }
@keyframes story-bar-in { from { transform: scaleY(.03); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
.story-viz.is-visible .story-viz-mark { transform-origin: bottom; animation: story-bar-in .85s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--order) * 110ms); }
@media(max-width:900px) {
 .story-hero { aspect-ratio: auto; }
 .story-hero-content { grid-template-columns: 1fr; gap: 48px; padding-block: 128px 64px; }
 .story-viz { max-width: 540px; }
 .story-hero h1 { font-size: clamp(34px,6vw,52px); }
 .story-hero-subtitle { margin-top: 20px; font-size: 17px; line-height: 1.55; }
}
@media(max-width:480px) { .story-viz { padding: 22px; } .story-viz-value { font-size: 18px; } }
@media(prefers-reduced-motion:reduce) { .story-viz.is-visible .story-viz-mark { animation: none; } .story-viz-mark { transition: none; } }

/* Contextual statistics stay in the reading column beside their explanation. */
.story-prose .story-body-viz {
 box-sizing:border-box; max-width:none; width:100%; margin:36px 0 48px;
 padding:clamp(24px,4vw,40px); border-radius:var(--story-radius); color:#fff;
 background:#243746;
 border:1px solid #ffffff35;
}
.story-prose .story-body-viz h3 { margin:0 0 28px; font-size:clamp(22px,2.4vw,30px); line-height:1.25; color:#fff; letter-spacing:-.025em; }
.story-prose .story-body-viz p { color:inherit; margin:0; }
.story-prose .story-body-viz .story-viz-eyebrow { font-size:11px; margin-bottom:16px; }
.story-prose .story-body-viz figcaption { margin-top:20px; font-size:12px; color:#d0d9df; }
.story-body-viz .story-viz-item { font-family:inherit; cursor:pointer; }
.story-body-viz .story-viz-item:focus-visible { outline:2px solid #fff; outline-offset:6px; }
.story-body-viz .story-viz-plot--metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.story-body-viz .story-viz-plot--metrics .story-viz-item { padding:24px 18px; border:1px solid #ffffff30; border-radius:var(--story-radius); background:#ffffff0a; }
.story-body-viz .story-viz-plot--metrics .story-viz-item[aria-pressed="true"] { background:#ffffff18; border-color:#ffffff70; }
.story-body-viz .story-viz-plot--metrics .story-viz-mark { display:none; }
.story-body-viz .story-viz-plot--metrics .story-viz-value { font-size:clamp(30px,3.5vw,44px); letter-spacing:-.035em; }
.story-body-viz .story-viz-label { font-size:14px; }
@media(max-width:480px){ .story-body-viz .story-viz-plot--metrics { grid-template-columns:1fr; } }

/* Research-led product components. The outer canvas is a single Praxis color. */
.story-product-demo { grid-area:demo; container-type:inline-size; width:100%; margin:0 0 48px; color:#29362f; font-size:13px; line-height:1.45; letter-spacing:0; overflow-wrap:normal; }
.story-product-demo *, .story-product-demo *::before, .story-product-demo *::after { min-width:0; box-sizing:border-box; }
.story-product-demo [hidden] { display:none !important; }
.story-product-demo :is(h3,h4,p) { margin:0; color:inherit; }
.story-product-demo h3 { font-size:22px; font-weight:550; line-height:1.2; letter-spacing:-.035em; text-wrap:pretty; }
.story-product-demo h4 { font-size:22px; font-weight:550; line-height:1.25; letter-spacing:-.025em; text-wrap:pretty; }
.story-product-demo p { font-size:13px; line-height:1.6; color:#68726c; }
.story-product-demo strong { font-weight:580; color:inherit; }
.story-product-demo :is(ul,ol) { padding:0; margin:0; list-style:none; }
.story-product-demo button { font:inherit; color:inherit; cursor:pointer; }
.story-product-demo button:focus-visible { outline:3px solid #5d82de; outline-offset:3px; }
.story-product-demo svg { display:block; width:17px; height:17px; flex-shrink:0; }
/* Individual product surfaces sit on a solid canvas, without a surrounding app window. */
.product-scene { --scene-color:#24465e; --ui-accent:#466b63; --ui-soft:#edf2ee; padding:clamp(28px,4.3cqw,52px); border-radius:var(--story-radius); background:var(--scene-color); overflow:hidden; }
.product-scene--procurement { --ui-accent:#426858; --ui-soft:#edf3ed; }
.product-scene--pharmacy { --ui-accent:#447363; --ui-soft:#edf3ef; }
.product-scene--scheduling { --ui-accent:#416c85; --ui-soft:#eaf1f5; }
.product-scene--renewals { --ui-accent:#496b8d; --ui-soft:#edf2f7; }
.product-scene-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:36px; }
.product-scene-identity { display:flex; align-items:center; gap:12px; color:#fff; }
.product-scene-identity strong { display:block; font-size:16px; font-weight:550; letter-spacing:-.02em; }
.product-scene-identity div>span { display:block; font-size:10px; color:#ffffffac; margin-top:4px; }
.product-app-mark { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border:1px solid #ffffff30; border-radius:8px; background:#ffffff0d; }
.product-app-mark svg { width:20px; height:20px; }
.product-tabs { display:flex; gap:3px; padding:4px; border-radius:8px; background:#00000018; flex-shrink:0; }
.product-tabs button { padding:10px 14px; background:transparent; color:#ffffffb5; border:0; border-radius:5px; font-size:11px; font-weight:500; white-space:nowrap; transition:background .15s,color .15s; }
.product-tabs button[aria-selected=true] { background:#fff; color:#28352f; box-shadow:0 2px 5px #00000012; }
.product-collage { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; align-items:stretch; }
.product-panel { display:contents; }
.product-piece,.product-widget { padding:24px; background:#fff; color:#29362f; border:1px solid #ffffff75; border-radius:8px; box-shadow:0 3px 5px #15241a0a,0 15px 35px -14px #1423194a; }
.product-piece--primary { grid-column:1; grid-row:1; }
.product-piece--secondary { grid-column:1; grid-row:2; }
.product-piece--tertiary { grid-column:1/-1; grid-row:3; }
.product-support--1 { grid-column:2; grid-row:1; }
.product-support--2 { grid-column:2; grid-row:2; }
.product-piece--alternate { grid-column:1; grid-row:1/3; }
.product-scene[data-view="1"] .product-collage { align-items:start; }
.product-scene[data-view="1"] .product-support--1 { align-self:stretch; }
.product-view-heading { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:20px; }
.product-eyebrow { display:block; color:#7b8592; font-size:9px; font-weight:550; letter-spacing:.055em; margin-bottom:7px; }
.product-badge { display:inline-flex; align-items:center; flex-shrink:0; width:fit-content; padding:4px 7px; border-radius:5px; font-size:9px; line-height:1.3; color:#36735f; background:#e5f1e9; white-space:nowrap; font-weight:550; }
.product-badge--purple { color:#75619e; background:#eee9f7; }
.product-badge--amber { color:#96672e; background:#fcf0dc; }
.product-badge--blue { color:#436797; background:#eaf0fa; }
.product-badge--light { color:#fff; background:#24384ad9; }
.product-widget-heading { display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.story-product-demo .product-widget-heading h3 { font-size:14px; line-height:1.35; letter-spacing:-.015em; font-weight:550; }
.product-widget-heading>svg { color:#6d7890; width:16px; height:16px; }
.tone-lilac { background:#eae8f3; color:#343444; }
.tone-peach { background:#f0dfd0; color:#543e32; }
.tone-slate { background:#f4f7f9; color:#243746; }
.tone-steel { background:#304d62; color:#fff; }
.tone-steel .product-widget-heading>svg { color:#c2d3df; }
.story-product-demo .tone-steel p { color:#d7e2e9; }
.tone-paper { background:#f4f3ee; }
.tone-mint { background:#e6efe8; }
.tone-cobalt { background:#315b94; color:#fff; }
.tone-cobalt .product-widget-heading>svg { color:#c4d7f1; }
.product-subhead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:19px 0 12px; font-size:11px; }
.product-subhead>span { color:#939ba5; font-size:9px; }
.product-fields { margin:0; }
.product-fields>div { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-bottom:1px solid #edf0f4; }
.product-fields dt { color:#838d99; font-size:10px; flex:0 0 35%; }
.product-fields dd { margin:0; font-size:11px; font-weight:500; text-align:right; }
.product-fields dd small { display:block; color:#87909b; font-size:9px; font-weight:400; margin-top:4px; }
.product-file { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid #e9ecf1; border-radius:7px; margin-top:8px; background:#fff; }
.product-file>span { color:#6583b3; background:#edf2fb; padding:8px; border-radius:6px; }
.product-file>div { flex:1; }
.product-file strong { font-size:10px; display:block; }
.product-file small { display:block; color:#8a93a1; font-size:9px; margin-top:3px; }
.product-checks { display:grid; gap:12px; }
.product-checks li { display:flex; align-items:start; gap:8px; font-size:11px; }
.product-checks svg { width:15px; height:15px; color:#628e7b; margin-top:1px; }
.product-widget-footer { display:flex; align-items:center; gap:7px; border-top:1px solid #26334415; margin-top:22px; padding-top:13px; font-size:9px; color:#737e8a; }
.product-widget-footer svg { width:14px; height:14px; }
.product-note { display:flex; align-items:start; gap:10px; padding:15px; border-radius:8px; margin-top:18px; }
.product-note>svg { width:16px; height:16px; color:#7f70a2; }
.product-note strong { display:block; font-size:11px; margin-bottom:5px; }
.story-product-demo .product-note p { font-size:10px; }
.product-avatar { display:inline-grid; place-items:center; flex-shrink:0; width:29px; height:29px; border-radius:50%; background:#e2eaf4; color:#5d799b; font-size:9px; font-weight:600; }
.product-avatar.lilac { color:#8a75ae; background:#eee6f6; }
.product-avatar.peach { color:#a16c42; background:#f5e5d8; }
.product-table-wrap { width:100%; }
.product-table { width:100%; border-collapse:collapse; font-size:10px; }
.product-table th { padding:9px 7px; text-align:left; font-size:9px; color:#8b94a2; font-weight:450; background:#f6f7f9; }
.product-table td { padding:13px 7px; border-bottom:1px solid #edf0f4; }
.product-table td strong,.product-table td small { display:block; }
.product-table td small { color:#96a0ad; margin-top:3px; font-size:9px; }
.product-status-strip { display:flex; align-items:center; gap:8px; border-radius:6px; background:#f0f4f7; padding:12px; font-size:10px; color:#667e8d; margin-top:20px; }
.product-status-strip>svg { width:15px; height:15px; }
.product-media { display:block; width:100%; height:100%; object-fit:cover; }
/* Coaching: replay, time-linked transcript, and behavioral criteria. */
.product-replay { position:relative; width:100%; height:252px; border-radius:var(--story-radius); overflow:hidden; background:#c8d0d5; }
.product-replay .product-media { object-position:50% 39%; }
.product-replay-top { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.product-replay-top>span:last-child { color:#fff; font-size:8px; letter-spacing:.1em; text-shadow:0 1px 8px #000; }
.product-replay-caption { position:absolute; left:12px; right:12px; bottom:12px; background:#182936e8; color:#fff; padding:11px 12px; border-radius:6px; font-size:11px; line-height:1.55; }
.product-replay-caption>span { display:block; color:#aebed0; font-size:8px; margin-bottom:4px; }
.product-replay-timeline { display:flex; align-items:center; gap:9px; margin-top:11px; color:#84909f; font-size:8px; }
.product-replay-timeline>div { height:4px; background:#e9edf3; border-radius:4px; flex:1; position:relative; }
.product-replay-timeline i { display:block; width:10%; height:100%; background:#4a708c; border-radius:4px; transition:width .2s; }
.product-replay-timeline b { position:absolute; height:8px; width:3px; top:-2px; background:#7393a9; left:10%; }
.product-replay-timeline b:last-child { left:24%; }
.product-moment { display:flex; text-align:left; align-items:center; gap:10px; background:#fff; border:1px solid #ebedf1; border-radius:7px; padding:11px; width:100%; margin-top:7px; }
.product-moment[aria-pressed=true] { border-color:#b8cbd9; background:#edf4f8; }
.product-moment>span { font-size:9px; color:#6d8193; }
.product-moment>div { flex:1; }
.product-moment strong { display:block; font-size:10px; }
.product-moment small { display:block; color:#7e8998; font-size:9px; line-height:1.45; margin-top:3px; }
.product-moment>svg { width:14px; height:14px; color:#4f7690; }
.product-score-intro { display:flex; justify-content:space-between; align-items:center; gap:7px; margin-bottom:8px; font-size:11px; }
.product-score-intro>span { font-size:9px; color:#738291; }
.product-criteria li { display:flex; align-items:center; justify-content:space-between; gap:9px; border-bottom:1px solid #24374618; padding:12px 0; font-size:10px; }
.product-criteria li:last-child { border:0; }
.product-timecode { display:block; font-size:9px; color:#c1d2df; margin-bottom:14px; }
.story-product-demo .product-widget h4+p { margin-top:10px; }
.product-quoted-line { background:#ffffff14; border:1px solid #ffffff24; border-radius:6px; margin-top:17px; padding:12px; font-size:11px; line-height:1.5; color:#f5f9fc; }
/* Procurement: request details, an actual commercial comparison, and approval history. */
.product-stepper { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #eceef2; padding-bottom:18px !important; margin-bottom:8px !important; }
.product-stepper li { display:grid; gap:6px; text-align:center; font-size:8px; color:#99a1ad; position:relative; flex:1; }
.product-stepper li>span { display:grid; place-items:center; margin:auto; height:20px; width:20px; border:1px solid #dbe1e9; border-radius:50%; background:#fff; z-index:1; }
.product-stepper li:not(:last-child)::after { content:''; height:1px; background:#dce3eb; position:absolute; left:60%; right:-40%; top:10px; }
.product-stepper svg { height:12px; width:12px; }
.product-stepper .complete { color:#729080; }
.product-stepper .complete>span { background:#e6f0e9; border:0; }
.product-stepper .current { color:#5878a2; }
.product-stepper .current>span { background:#375e94; color:#fff; border:0; }
.product-quote-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.product-quote-grid>div { padding:17px 14px; border:1px solid #e6e9ed; border-radius:8px; background:#f9fafb; }
.product-quote-grid>div.selected { border-color:#ccdcca; background:#eef5ec; }
.product-quote-grid span { display:block; font-size:9px; color:#818d9a; }
.product-quote-grid strong { display:block; margin:7px 0; font-size:29px; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.product-quote-grid small { display:block; font-size:8px; color:#95a194; }
.product-saving { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 2px 4px; }
.product-saving span { display:flex; align-items:center; gap:7px; color:#7a8b80; font-size:10px; }
.product-saving svg { width:14px; height:14px; }
.product-saving strong { color:#4e735a; font-size:16px; }
.product-contract-doc { padding:17px 15px; background:#fff; border:1px solid #e5e3db; border-radius:5px; box-shadow:0 4px 0 #e8e6dd; }
.product-doc-mast { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:6px; letter-spacing:.08em; color:#a0a7b2; padding-bottom:14px; border-bottom:1px solid #eaecef; }
.product-doc-mast svg { width:13px; height:13px; }
.story-product-demo .product-contract-doc h4 { font-size:15px; margin-top:18px; }
.product-doc-subtitle { font-size:9px; color:#8e97a2; }
.product-contract-doc dl { margin:14px 0 12px; }
.product-contract-doc dl>div { padding:9px 0; border-bottom:1px solid #edf0f2; }
.product-contract-doc dt { font-size:8px; color:#99a0ac; }
.product-contract-doc dd { margin:4px 0 0; font-size:9px; }
.product-doc-stamp { display:flex; align-items:center; gap:6px; font-size:8px; color:#789780; padding-top:4px; }
.product-doc-stamp svg { width:12px; height:12px; }
.product-approval-trail { display:grid; gap:22px; }
.product-approval-trail li { display:flex; align-items:start; gap:10px; }
.product-approval-trail i { display:grid; place-items:center; width:24px; height:24px; font-size:9px; font-style:normal; border-radius:50%; background:#ffffff20; color:#d0e3f6; flex-shrink:0; }
.product-approval-trail i svg { width:12px; height:12px; }
.product-approval-trail strong { display:block; font-size:11px; }
.product-approval-trail li span { display:block; font-size:9px; color:#b5c9e3; margin-top:4px; }
.product-approval-trail .pending i { background:#ead6bc; color:#72553b; }
.product-room-meta { display:flex; gap:9px; align-items:center; background:#f7f9fb; padding:12px; border-radius:8px; margin-bottom:20px; }
.product-room-meta strong { font-size:10px; display:block; }
.product-room-meta span:not(.product-avatar) { font-size:9px; color:#8a96a3; display:block; }
.product-avatar-stack { display:flex; margin-left:auto; }
.product-avatar-stack .product-avatar { width:25px; height:25px; margin-left:-5px; border:2px solid white; font-size:7px; }
.product-thread { display:grid; gap:21px; }
.product-thread>div { display:flex; align-items:start; gap:9px; }
.product-thread section { flex:1; }
.product-thread strong { font-size:10px; display:block; }
.product-thread small { display:block; font-size:8px; color:#a0a8b2; font-weight:400; margin-top:3px; }
.story-product-demo .product-thread p { font-size:11px; padding:9px 0; }
.product-attachment { display:inline-flex; align-items:center; gap:6px; font-size:9px; color:#6985ab; background:#f0f4fa; padding:6px 8px; border-radius:4px; }
.product-attachment svg { width:11px; height:11px; }
/* Pharmacy: source document and entered fields, plus the exception and activity queues. */
.product-rx-workspace { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:17px; }
.product-rx-workspace .product-subhead { margin-top:0; }
.product-source-page { min-height:330px; background:#f7f6f1; border:1px solid #e5e3d8; border-radius:3px; padding:14px; position:relative; }
.story-product-demo .product-source-page h4 { font-family:Georgia,serif; font-size:17px; margin-top:17px; margin-bottom:13px; font-weight:400; line-height:1.25; }
.product-source-field { margin:12px 0; }
.product-source-field>span { display:block; color:#9a9c98; font-size:7px; text-transform:uppercase; letter-spacing:.05em; }
.product-source-field b { font-family:monospace; display:block; font-size:9px; font-weight:400; color:#6a7179; margin-top:5px; }
.product-source-field.highlight { border:1px solid #bdb7dc; background:#e8e4f151; padding:7px; margin-left:-7px; margin-right:-7px; }
.product-source-field i { display:block; height:3px; width:90%; background:#b8bbb867; margin-top:6px; }
.product-source-field i:last-child { width:70%; }
.product-source-sign { font-size:7px; color:#aaa; margin-top:20px; }
.product-source-sign>div { height:16px; border-bottom:1px solid #bcc0ba; }
.product-source-page>small { display:block; margin-top:15px; color:#9ca5a9; font-size:7px; }
.product-rx-field { background:#fff; border:1px solid #e4e8ee; padding:10px; border-radius:6px; margin-bottom:9px; }
.product-rx-field label { display:block; font-size:8px; color:#9b90ae; }
.product-rx-field strong { display:block; font-size:11px; margin-top:6px; }
.product-rx-field small { display:flex; align-items:center; gap:4px; font-size:8px; color:#86a28e; margin-top:8px; line-height:1.5; }
.product-rx-field small svg { height:11px; width:11px; }
.product-rx-field:last-child small { color:#9d865d; }
.product-running { display:flex; align-items:center; gap:6px; font-size:9px; color:#6e9a79; margin-bottom:12px; }
.product-running i { width:5px; height:5px; border-radius:50%; background:#6d9c77; }
.product-queue li { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #b4c7b840; padding:16px 0; }
.product-queue li:last-child { padding-bottom:0; }
.product-queue strong { display:block; font-size:11px; }
.product-queue li span:not(.product-badge) { display:block; font-size:8px; color:#84978a; margin-top:4px; }
.product-activity { display:grid; gap:21px; }
.product-activity li { display:flex; gap:12px; align-items:center; font-size:10px; }
.product-activity time { color:#a2a6a8; font-size:8px; width:26px; }
.product-activity li:last-child { padding-top:14px; border-top:1px solid #e5e4dc; }
.product-activity li:last-child strong { color:#5c826f; }
.product-exception-detail { padding:17px; margin-top:23px; background:#fcf6ec; border:1px solid #efe1c9; border-radius:8px; }
.product-exception-detail .product-subhead { margin-top:0; color:#a78b5c; }
.story-product-demo .product-exception-detail h4 { font-size:16px; margin-top:15px; }
.story-product-demo .product-exception-detail p { margin-top:9px; font-size:11px; }
.product-comparison-fields { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:17px 0 9px; }
.product-comparison-fields>div { background:#fff9; border-radius:5px; padding:9px; flex:1; }
.product-comparison-fields span { display:block; font-size:8px; color:#ae997a; }
.product-comparison-fields strong { display:block; margin-top:5px; font-size:10px; }
/* Eyecare: a BI capacity view with a threshold-based decision, not an invented clinic app. */
.product-filter-row { display:flex; gap:7px; margin-top:-5px; margin-bottom:20px; }
.product-filter-row>span { padding:6px 9px; border:1px solid #e7eaf0; border-radius:5px; font-size:9px; color:#8893a0; }
.product-forecast { width:100% !important; height:auto !important; margin:18px 0 0; overflow:visible; }
.chart-grid { stroke:#edf0f5; stroke-width:1; }
.chart-axis { font-size:9px; fill:#9ea8b6; }
.product-chart-legend { display:flex; justify-content:center; gap:20px; font-size:9px; color:#8993a2; margin:5px 0 22px; }
.product-chart-legend>span { display:flex; align-items:center; gap:6px; }
.product-chart-legend i { height:3px; width:13px; background:#456bd1; }
.product-chart-legend span:last-child i { background:#bf9277; }
.product-calendar-stamp { border-bottom:1px solid #52466a20; padding-bottom:18px; margin-bottom:17px; }
.product-calendar-stamp>span { display:block; font-size:8px; letter-spacing:.06em; color:#8d83a0; }
.product-calendar-stamp strong { display:block; font-size:27px; letter-spacing:-.05em; margin-top:5px; }
.product-calendar-stamp small { font-size:17px; color:#988da9; font-weight:400; }
.product-widget .product-checks { margin-top:20px; }
.product-widget .product-checks li { font-size:10px; }
.product-inputs { display:grid; gap:18px; }
.product-inputs>div { display:flex; gap:9px; align-items:center; font-size:10px; }
.product-inputs svg { color:#a1856f; width:15px; height:15px; }
.product-session-block { display:flex; align-items:center; gap:13px; border:1px solid #e5e2ee; padding:14px; border-radius:8px; background:#f4f2f8; margin-bottom:12px; }
.product-session-block>div { background:#e4ddef; padding:10px; border-radius:5px; text-align:center; flex-shrink:0; }
.product-session-block span { display:block; font-size:7px; color:#9c8ab3; }
.product-session-block strong { font-size:20px; color:#78638f; }
.product-session-block section { flex:1; }
.story-product-demo .product-session-block h4 { font-size:14px; }
.story-product-demo .product-session-block p { font-size:9px; margin-top:4px; }
.product-session-block>svg { color:#a290b9; }
.product-profit-test { padding:12px 0 17px; }
.product-threshold-track { height:9px; border-radius:5px; background:#edf0f5; margin:24px 8px 12px; position:relative; }
.product-threshold-track i { display:block; height:100%; width:87%; background:#90bda1; border-radius:5px; }
.product-threshold-track b { position:absolute; top:-6px; left:60%; height:20px; width:2px; background:#ad9a86; }
.product-threshold-track>span { position:absolute; top:-3px; left:85%; height:15px; width:15px; border-radius:50%; background:#4d8c69; border:3px solid #fff; }
.product-threshold-labels { display:flex; justify-content:space-between; gap:10px; color:#9aa5b2; font-size:8px; }
.product-threshold-labels strong { color:#5e9372; }
/* Auto finance: data-bound video editor, scene timeline, and customer delivery. */
.product-video-preview { position:relative; height:225px; border-radius:8px; overflow:hidden; background:#b5c1c7; }
.product-video-preview .product-media { object-position:50% 57%; }
.product-video-tag { position:absolute; top:12px; left:12px; padding:5px 7px; background:#fff9; color:#576d77; font-size:8px; border-radius:4px; }
.product-video-caption { position:absolute; left:15px; right:15px; bottom:15px; padding:12px; background:#172736e8; border-radius:6px; color:#fff; text-align:center; font-size:13px; }
.product-token { display:inline-block; border:1px solid #cdc7e23d; color:#776199; background:#eeeaf6; padding:1px 5px; border-radius:4px; font-family:ui-monospace,SFMono-Regular,monospace; font-size:.86em; white-space:nowrap; }
.product-video-caption .product-token { background:#ffffff1f; color:#e0d4fa; border:0; }
.product-editor-meta { display:flex; align-items:center; justify-content:space-between; gap:7px; color:#98a1ae; font-size:8px; margin:11px 0 14px; }
.product-editor-timeline { display:flex; gap:6px; }
.product-editor-timeline button { flex:1; display:flex; align-items:center; gap:8px; padding:12px 8px; font-size:9px; border:1px solid #e0e5ee; background:#f1f4f9; border-radius:5px; text-align:left; }
.product-editor-timeline button>span { font-size:8px; color:#7b92ac; padding:5px; background:#e2e8f1; border-radius:4px; }
.product-editor-timeline button[aria-pressed=true] { border-color:#7192c7; background:#e8eff9; color:#4d6fa7; box-shadow:inset 0 0 0 1px #b8cce9; }
.product-audio-track { display:flex; align-items:center; gap:10px; color:#9c85ba; background:#f1ecf8; border-radius:4px; padding:8px; margin-top:6px; }
.product-audio-track>svg { width:12px; height:12px; }
.product-audio-track>span { font-size:8px; white-space:nowrap; }
.product-wave { display:flex; align-items:center; height:24px; justify-content:space-between; flex:1; gap:3px; overflow:hidden; }
.product-wave>i { width:3px; height:var(--h); background:#b3a1cb; flex-shrink:0; border-radius:2px; }
.product-script { margin-top:19px; padding:14px; background:#faf9fc; border:1px solid #eae6f1; border-radius:7px; min-height:111px; }
.product-script .product-subhead { margin:0 0 12px; }
.story-product-demo .product-script p { font-size:13px; color:#485463; line-height:1.8; }
.product-data-map { margin-top:15px; }
.product-data-map>div { display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid #d9d9cf70; padding:12px 0; font-size:10px; }
.product-data-map>div>span:first-child { color:#86909b; }
.product-data-map>div:last-child { border:0; }
.product-customer-email { background:#f9fafb; padding:14px; border:1px solid #e6eaf0; border-radius:8px; }
.product-email-from { display:flex; align-items:center; gap:10px; border-bottom:1px solid #e5e9ef; padding-bottom:13px; }
.product-email-from>svg { width:23px; height:23px; color:#9aacc2; }
.product-email-from strong { display:block; font-size:11px; }
.product-email-from span { display:block; font-size:9px; color:#98a2af; margin-top:4px; }
.product-email-from .product-token { display:inline; margin:0; }
.product-email-body { padding:22px 8px 6px; }
.story-product-demo .product-email-body h4 { font-size:22px; }
.story-product-demo .product-email-body p { margin:14px 0; font-size:11px; }
.product-email-image { position:relative; height:195px; border-radius:6px; overflow:hidden; }
.product-email-image>span { position:absolute; left:12px; right:12px; bottom:12px; color:white; background:#263b53f0; padding:9px; border-radius:5px; display:flex; align-items:center; justify-content:space-between; font-size:10px; }
.product-email-image svg { width:13px; height:13px; }
.product-delivery-options { display:grid; gap:9px; margin-top:15px; }
.product-delivery-options>span { display:flex; align-items:center; gap:6px; justify-content:space-between; border-bottom:1px solid #e5e9ef; padding-bottom:9px; color:#8493a4; font-size:10px; }
.product-delivery-options svg { width:12px; height:12px; }
/* Surface details: quiet chrome, sharper type, and color attached to a useful state. */
.product-piece>:first-child { margin-top:0; }
.product-view-heading { margin-bottom:22px; gap:12px; }
.product-eyebrow { color:#7a837d; font-size:10px; letter-spacing:.035em; margin-bottom:8px; }
.product-widget-heading { margin-bottom:24px; }
.product-widget-heading>svg { width:18px; height:18px; color:var(--ui-accent); }
.product-subhead { font-size:13px; margin:22px 0 15px; }
.product-subhead>span { font-size:10px; color:#87918b; }
.product-badge { padding:5px 8px; border-radius:4px; font-size:10px; font-weight:500; }
.product-badge--green { color:#2c7152; background:#e5f1e6; }
.product-badge--blue { color:#43667f; background:#eaf1f6; }
.product-badge--purple { color:#496784; background:#eaf0f6; }
.product-badge--amber { color:#97682f; background:#f8edd8; }
.product-fields>div { padding:13px 0; border-color:#edf0ec; }
.product-fields dt { font-size:11px; color:#7c867f; }
.product-fields dd { font-size:12px; }
.product-fields dd small { font-size:10px; color:#7c867f; }
.product-file { padding:13px; gap:12px; border-color:#e7ebe7; background:#fff; }
.product-file>span { background:var(--ui-soft); color:var(--ui-accent); }
.product-file strong { font-size:12px; }
.product-file small { font-size:10px; color:#8b938d; }
.product-widget-footer { font-size:10px; line-height:1.5; border-color:#263a2d10; color:#7b867f; padding-top:16px; }
.product-checks { gap:15px; }
.product-checks li { font-size:12px; }
.product-table { font-size:12px; }
.product-table th { font-size:10px; padding:11px 8px; background:#f4f6f3; color:#7b857f; }
.product-table td { padding:14px 8px; border-color:#ebefeb; }
.product-table td small { font-size:10px; color:#8b948d; }
.product-status-strip { background:#f1f5f1; color:#60766a; font-size:11px; padding:14px; }
.product-note { background:#edf3ef; }
.product-note strong { font-size:12px; }
.story-product-demo .product-note p { font-size:12px; }
.tone-paper { background:#f7f7f2; }
.tone-ink { background:#fff; color:#29362f; }
.tone-ink .product-timecode { color:#8a948d; }
.product-quoted-line { background:#edf3ec; color:#43634c; border:0; border-left:3px solid #8aa37e; padding:14px; font-size:13px; }
/* Coaching: a replay, feedback sheet, transcript, and a separate coaching note. */
.product-scene--coaching .product-piece--primary { padding:12px; }
.product-scene--coaching .product-piece--primary .product-view-heading { padding:10px 12px 0; }
.product-replay { height:clamp(230px,27cqw,310px); aspect-ratio:auto; border-radius:6px; }
.product-replay .product-media { position:absolute; inset:0; object-position:50% 38%; }
.product-replay-top { top:16px; left:16px; right:16px; }
.product-replay-caption { left:16px; right:16px; bottom:16px; padding:14px 16px; font-size:13px; background:#192e2bd9; backdrop-filter:blur(12px); }
.product-replay-caption>span { font-size:10px; margin-bottom:6px; color:#c4d1c9; }
.product-replay-top>span:last-child { font-size:9px; }
.product-replay-timeline { font-size:10px; gap:12px; margin:17px 10px 7px; }
.product-replay-timeline i { background:#779a72; }
.product-replay-timeline b { background:#c5af79; }
.product-scene--coaching .product-support--1 { display:flex; flex-direction:column; }
.product-score-intro { font-size:13px; margin-bottom:14px; }
.product-score-intro>span { font-size:10px; }
.product-criteria { display:flex; flex-direction:column; flex:1; }
.product-criteria li { flex:1; font-size:12px; padding:15px 0; border-color:#dde4da; }
.product-criteria .product-badge { min-width:65px; justify-content:center; }
.product-moment { padding:14px 12px; margin-top:9px; border-color:#e9ede7; gap:12px; }
.product-moment[aria-pressed=true] { background:#f0f5ee; border-color:#bdcdb4; }
.product-moment>span { font-size:10px; color:#6c8469; }
.product-moment strong { font-size:12px; }
.product-moment small { font-size:11px; color:#899087; }
.product-moment>svg { color:#789171; }
.product-timecode { font-size:10px; margin-bottom:12px; }
.product-scene--coaching .product-support--2 { display:flex; flex-direction:column; }
.product-scene--coaching .product-support--2>[data-moment-detail]:not([hidden]) { display:flex; flex-direction:column; flex:1; }
.product-scene--coaching .product-support--2 p { flex:1; font-size:12px; }
.product-scene--coaching .product-support--2 .product-widget-heading { margin-bottom:16px; }
/* Procurement: the commercial result takes priority over the request form. */
.product-scene--procurement .product-collage { grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); }
.product-commercial { display:flex; flex-direction:column; justify-content:center; align-self:center; padding:0; background:none; border:0; box-shadow:none; }
.product-commercial>.product-subhead { color:#fff; }
.product-commercial>.product-subhead>span { color:#ffffffa0; }
.product-scene--procurement .product-support--1 { padding:0; background:none; border:0; box-shadow:none; }
.product-scene--procurement .product-support--1>.product-widget-heading { color:#fff; }
.product-scene--procurement .product-support--1>.product-widget-heading svg { color:#ffffffab; }
.product-commercial>.product-subhead { margin-bottom:18px; }
.product-quote-grid { gap:0; box-shadow:0 12px 24px -12px #17231d55; background:#f5f6f2; border:1px solid #e6eae1; border-radius:6px; overflow:hidden; }
.product-quote-grid>div { padding:24px 18px; border:0; border-radius:0; background:none; }
.product-quote-grid>div.selected { border:0; background:#eaf0e5; }
.product-quote-grid span { color:#6e7b6c; font-size:11px; }
.product-quote-grid strong { margin:13px 0; font-size:clamp(29px,3.7cqw,48px); font-weight:450; letter-spacing:-.06em; color:#314034; }
.product-quote-grid small { color:#8d9787; font-size:10px; line-height:1.5; }
.product-saving { margin-top:18px; padding:19px 20px; box-shadow:0 12px 24px -14px #17231d55; background:#e6edb3; border-radius:6px; }
.product-saving span { color:#687039; font-size:11px; }
.product-saving strong { color:#343d1e; font-size:clamp(29px,3.5cqw,44px); font-weight:450; letter-spacing:-.055em; }
.product-contract-doc { position:relative; padding:22px; background:#fff; border:1px solid #e3e5dc; border-radius:3px; box-shadow:2px 4px 0 -1px #eaede4,4px 7px 0 -2px #d9ded1,0 12px 22px -10px #52614620; overflow:hidden; }
.product-contract-doc::after { content:''; position:absolute; top:0; right:0; width:28px; height:28px; background:#ebeee5; clip-path:polygon(0 0,100% 100%,100% 0); }
.product-doc-mast { font-size:8px; color:#879281; padding-bottom:17px; }
.story-product-demo .product-contract-doc h4 { font-size:23px; margin-top:22px; }
.product-doc-subtitle { font-size:11px; color:#8c9687; }
.product-contract-doc dl>div { padding:11px 0; }
.product-contract-doc dt { font-size:10px; color:#89927f; }
.product-contract-doc dd { font-size:11px; }
.product-doc-stamp { font-size:10px; color:#6d8c63; padding-top:8px; }
.product-stepper { border:0; padding-bottom:10px !important; margin-bottom:6px !important; }
.product-stepper li { font-size:10px; }
.product-stepper li>span { height:25px; width:25px; }
.product-stepper li:not(:last-child)::after { top:12px; background:#d9e2d8; }
.product-stepper .current>span { background:#496c56; }
.product-stepper .current { color:#496c56; }
.product-approval-trail { gap:22px; }
.product-approval-trail i { height:29px; width:29px; color:#5e7f5c; background:#e7eee0; }
.product-approval-trail strong { font-size:13px; }
.product-approval-trail li span { font-size:11px; color:#8d9687; }
.product-approval-trail .pending i { color:#94763f; background:#f1e7cf; }
.product-documents { padding:19px 24px; }
.product-document-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.product-document-pair .product-file { margin-top:0; }
.product-thread strong,.product-room-meta strong { font-size:12px; }
.product-thread small,.product-room-meta span:not(.product-avatar) { font-size:10px; }
.story-product-demo .product-thread p { font-size:13px; }
.product-attachment { font-size:10px; }
/* Pharmacy: a paper source, an extracted record, then the live operation. */
.product-scene--pharmacy .product-collage { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.product-scene--pharmacy .product-piece--primary { grid-column:1; grid-row:1; }
.product-scene--pharmacy .product-piece--secondary { grid-column:2; grid-row:1; }
.product-scene--pharmacy .product-support--1 { grid-column:1; grid-row:2; }
.product-scene--pharmacy .product-support--2 { grid-column:2; grid-row:2; }
.product-source { background:none; padding:0; border:0; box-shadow:none; }
.product-source>.product-subhead { color:#fff; margin-bottom:20px; }
.product-source>.product-subhead>span { color:#ffffffb0; }
.product-source-page { min-height:350px; padding:28px; border-color:#deded2; background:#fffef9; box-shadow:3px 4px 0 -1px #e7e7db,0 12px 22px -12px #4b574a30; }
.story-product-demo .product-source-page h4 { font-size:28px; margin:23px 0; }
.product-source-field { margin:16px 0; }
.product-source-field>span { font-size:9px; color:#9a9b8e; }
.product-source-field b { font-size:12px; color:#667261; }
.product-source-field.highlight { border-color:#8fae91; background:#ebf2e4; padding:10px; margin-left:-10px; margin-right:-10px; }
.product-source-sign,.product-source-page>small { font-size:9px; }
.product-source-sign>div { height:18px; }
.product-rx-fields { display:flex; flex-direction:column; }
.product-rx-fields>.product-subhead { margin:0 0 14px; }
.product-rx-field { padding:15px; border:1px solid #e4eae1; background:#fcfdfa; margin-bottom:10px; flex:1; }
.product-rx-field:last-child { margin-bottom:0; }
.product-rx-field label { font-size:10px; color:#7b8a77; }
.product-rx-field strong { font-size:14px; margin-top:7px; }
.product-rx-field small { font-size:10px; color:#73916e; }
.product-scene--pharmacy .product-piece--tertiary { margin:0; padding:17px 24px; border:0; background:#e4eddb; color:#536a4d; box-shadow:none; }
.product-running { font-size:11px; }
.product-running i { width:6px; height:6px; box-shadow:0 0 0 3px #6d9c7715; }
.product-queue li { padding:15px 0; }
.product-queue strong { font-size:13px; }
.product-queue li span:not(.product-badge) { font-size:10px; }
.product-activity { gap:22px; }
.product-activity li { font-size:12px; gap:18px; }
.product-activity time { font-size:10px; width:32px; }
.product-exception-detail .product-file { background:#fffdfa; }
.product-scene--pharmacy[data-view="1"] .product-collage { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.product-scene--pharmacy[data-view="1"] .product-support--1 { grid-column:2; grid-row:1; }
.product-scene--pharmacy[data-view="1"] .product-support--2 { grid-column:2; grid-row:2; }
/* Clinical planning: the forecast and a calendar action each have their own surface. */
.product-demand { padding:28px; }
.product-filter-row { margin:0 0 24px; }
.product-filter-row>span { font-size:11px; padding:7px 10px; border-color:#e4e9e6; color:#7c8880; }
.product-chart-legend { justify-content:flex-start; font-size:11px; margin:12px 0 0; gap:22px; }
.product-forecast { margin-top:24px; }
.chart-axis { fill:#83958f; }
.product-calendar-stamp { padding:18px; margin-bottom:22px; border:0; border-radius:6px; background:#e7edf0; }
.product-calendar-stamp>span { color:#7d8b91; font-size:10px; }
.product-calendar-stamp strong { font-size:36px; font-weight:450; color:#344f5f; }
.product-calendar-stamp small { font-size:20px; color:#84969c; }
.product-scene--scheduling .product-support--1 { display:flex; flex-direction:column; }
.product-scene--scheduling .product-support--1 .product-checks { flex:1; }
.product-widget .product-checks li { font-size:12px; }
.product-inputs { gap:20px; }
.product-inputs>div { font-size:12px; }
.product-inputs svg { color:#879575; width:17px; height:17px; }
.product-session-block { background:#eff3f4; border-color:#e2e8e9; padding:18px; }
.product-session-block>div { background:#dfe8e8; }
.product-session-block span { color:#799088; font-size:9px; }
.product-session-block strong { color:#58796d; }
.story-product-demo .product-session-block h4 { font-size:18px; }
.story-product-demo .product-session-block p { font-size:11px; }
.product-threshold-labels { font-size:10px; }
/* Renewals: film frame, editing timeline, data mapping, and a delivery trail. */
.product-film { padding:0; background:none; border:0; box-shadow:none; }
.product-film .product-view-heading { color:#fff; }
.product-film .product-eyebrow { color:#ffffffa0; }
.product-film .product-editor-meta { color:#ffffffb0; }
.product-film .product-view-heading { padding:0; }
.product-video-preview { height:clamp(240px,27cqw,320px); aspect-ratio:auto; box-shadow:0 12px 24px -12px #17231d55; border-radius:6px; }
.product-video-preview>.product-media { position:absolute; inset:0; }
.product-video-tag { font-size:10px; padding:6px 9px; background:#ffffffe3; }
.product-video-caption { font-size:19px; text-align:left; padding:16px; background:#263c4ad9; backdrop-filter:blur(10px); }
.product-editor-meta { font-size:10px; margin:16px 10px 8px; }
.product-editor-timeline { gap:8px; }
.product-editor-timeline button { padding:13px 10px; font-size:11px; background:#f5f7f8; border-color:#e6ebed; }
.product-editor-timeline button>span { font-size:10px; padding:6px; background:#e8edef; }
.product-editor-timeline button[aria-pressed=true] { background:#e9f0f4; border-color:#9bb3c2; color:#416c87; box-shadow:none; }
.product-audio-track { margin-top:10px; background:#e4eddc; color:#728c60; padding:11px; }
.product-audio-track>span { font-size:9px; }
.product-wave>i { background:#95ae7c; }
.product-script { border:0; background:none; padding:0; margin-top:24px; min-height:84px; }
.story-product-demo .product-script p { font-size:16px; color:#64736e; line-height:1.8; }
.product-token { background:#edf1f4; color:#537185; border-color:#d8e3e9; }
.product-data-map>div { font-size:12px; padding:15px 0; border-color:#e5e9df; }
.product-data-map>div>span:first-child { color:#84917c; }
.product-scene--renewals .product-support--1 { display:flex; flex-direction:column; }
.product-scene--renewals .product-data-map { flex:1; display:flex; flex-direction:column; margin-top:8px; }
.product-data-map>div { flex:1; }
.product-email-from strong { font-size:13px; }
.product-email-from span { font-size:11px; }
.story-product-demo .product-email-body h4 { font-size:28px; }
.story-product-demo .product-email-body p { font-size:13px; }
.product-email-image { height:245px; }
.product-email-image>span { font-size:12px; }
.product-delivery-options>span { font-size:12px; }
/* Reflow the composition at small sizes; never scale down a screenshot. */
@container (max-width:900px) {
 .product-scene { padding:32px; }
 .product-scene-heading { gap:16px; margin-bottom:28px; }
 .product-scene-identity strong { font-size:14px; }
 .product-scene-identity div>span { font-size:9px; }
 .product-tabs button { font-size:10px; padding:9px 10px; }
 .product-collage { gap:18px; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
 .product-piece,.product-widget { padding:20px; }
 .product-piece--primary .product-view-heading { align-items:start; flex-wrap:wrap; gap:9px; }
 .story-product-demo h3 { font-size:20px; }
 .story-product-demo .product-widget-heading h3 { font-size:13px; }
 .product-score-intro { flex-wrap:wrap; }
 .product-criteria li { font-size:11px; padding:12px 0; }
 .product-criteria .product-badge { min-width:58px; font-size:9px; }
 .product-replay { aspect-ratio:4/3; }
 .product-replay-caption { left:12px; right:12px; bottom:12px; padding:12px; font-size:12px; }
 .product-commercial { padding:0; }
 .product-quote-grid>div { padding:18px 12px; }
 .product-quote-grid strong { font-size:29px; }
 .product-quote-grid span,.product-quote-grid small { font-size:9px; }
 .product-saving { padding:16px 12px; }
 .product-saving span { font-size:10px; }
 .product-saving strong { font-size:31px; }
 .product-contract-doc { padding:17px; }
 .product-doc-mast { font-size:7px; }
 .product-video-preview { aspect-ratio:4/3; }
 .product-video-caption { font-size:16px; }
 .product-editor-timeline button { font-size:10px; padding:10px 7px; gap:5px; }
 .product-rx-field strong { font-size:12px; }
 .product-filter-row { flex-wrap:wrap; }
 .product-table { font-size:10px; }
 .product-table .product-badge { font-size:8px; padding:5px; }
 .product-table th { font-size:9px; }
 .product-table td small { font-size:9px; }
}
@container (max-width:650px) {
 .product-scene { padding:24px 18px; }
 .product-scene-heading { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:24px; }
 .product-scene-identity strong { font-size:16px; }
 .product-scene-identity div>span { font-size:10px; }
 .product-tabs { width:100%; }
 .product-tabs button { flex:1; font-size:11px; padding:11px 8px; }
 .product-collage,.product-scene--procurement .product-collage,.product-scene--pharmacy .product-collage,.product-scene--pharmacy[data-view="1"] .product-collage { display:flex; flex-direction:column; gap:16px; }
 .product-piece--primary { order:0; }
 .product-piece--secondary { order:2; }
 .product-piece--tertiary { order:4; }
 .product-support--1 { order:1; }
 .product-support--2 { order:3; }
 .product-piece--alternate { order:0; }
 .product-scene[data-view="1"] .product-support--1 { order:1; }
 .product-scene[data-view="1"] .product-support--2 { order:2; }
 .product-scene--procurement .product-piece--secondary { order:0; }
 .product-scene--procurement .product-piece--primary { order:1; }
 .product-scene--procurement .product-support--1 { order:2; }
 .product-scene--procurement .product-support--2 { order:3; }
 .product-scene--pharmacy .product-piece--secondary { order:1; }
 .product-scene--pharmacy .product-support--1 { order:2; }
 .product-piece,.product-widget { padding:22px; }
 .product-scene--coaching .product-piece--primary { padding:10px; }
 .product-film,.product-source { padding:0; }
 .product-replay { aspect-ratio:4/3; }
 .product-replay-caption { font-size:12px; }
 .product-view-heading { align-items:start; flex-wrap:wrap; }
 .product-criteria li { font-size:12px; padding:14px 0; }
 .product-document-pair { grid-template-columns:1fr; gap:9px; }
 .product-quote-grid strong { font-size:34px; }
 .product-saving strong { font-size:36px; }
 .product-contract-doc { padding:24px; }
 .product-source-page { padding:24px; }
 .product-rx-field { padding:15px; }
 .product-rx-field strong { font-size:14px; }
 .product-calendar-stamp strong { font-size:38px; }
 .product-table th,.product-table td { padding-inline:5px; }
 .product-table td small { font-size:9px; }
 .product-filter-row { gap:6px; }
 .product-filter-row>span { font-size:10px; padding:6px 8px; }
 .product-chart-legend { gap:15px; font-size:10px; }
 .product-video-preview { aspect-ratio:4/3; }
 .product-video-caption { font-size:16px; padding:12px; }
 .product-editor-timeline button { font-size:10px; flex-direction:column; align-items:flex-start; gap:8px; padding:12px; }
 .product-audio-track { gap:7px; }
 .product-wave>i { width:2px; }
 .product-wave { gap:2px; }
 .story-product-demo .product-script p { font-size:15px; }
 .product-email-body { padding-inline:0; }
 .product-email-image { height:190px; }
 .product-fields dt { flex-basis:32%; font-size:10px; }
 .product-fields dd { font-size:11px; }
}
@container (max-width:360px) {
 .product-scene { padding:24px 14px; }
 .product-piece,.product-widget { padding:19px; }
 .product-scene-identity div>span { font-size:9px; }
 .product-file { padding:10px; gap:8px; }
 .product-file small { font-size:9px; }
 .product-saving { padding:14px 10px; }
 .product-saving span { font-size:9px; }
 .product-quote-grid strong { font-size:29px; }
 .product-saving strong { font-size:32px; }
 .product-commercial { padding:0; }
 .product-quote-grid>div { padding:18px 10px; }
 .product-replay-caption { font-size:11px; }
 .product-replay-top { left:12px; right:12px; }
 .product-table .product-badge { white-space:normal; }
 .product-table th { font-size:8px; }
 .product-table { font-size:10px; }
 .product-video-caption { font-size:14px; }
 .product-video-tag { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .product-replay-timeline i,.product-tabs button { transition:none; } }
/* FIA: editable learning material, reusable context, and a campaign preview. */
.product-scene--training-marketing { --ui-accent:#496c5c; --ui-soft:#eff2eb; }
.product-training-editor { padding:24px; }
.product-editor-paper { background:#fffefa; border:1px solid #e5e6df; border-radius:5px; box-shadow:3px 5px 0 -1px #e9ebe3,0 10px 22px -16px #1f352b60; overflow:hidden; }
.product-editor-toolbar { display:flex; align-items:center; gap:18px; padding:12px 16px; border-bottom:1px solid #e5e6df; font-size:11px; color:#788379; }
.product-editor-toolbar .product-autosaved { margin-left:auto; display:flex; gap:4px; align-items:center; font-size:9px; color:#6a8a71; }
.product-editor-toolbar svg { width:12px; height:12px; }
.product-editor-page { padding:26px; }
.product-doc-kicker { display:block; font-size:8px; letter-spacing:.12em; color:#899085; margin-bottom:12px; }
.story-product-demo .product-editor-page h4 { font-family:Georgia,serif; font-size:32px; line-height:1.12; font-weight:400; letter-spacing:-.035em; color:#354c40; }
.product-editor-rule { height:1px; background:#dfe3d8; margin:22px 0; }
.product-editor-page>strong { display:block; font-size:12px; margin-bottom:7px; }
.story-product-demo .product-editor-page p { font-size:12px; color:#7b8479; }
.product-revision { margin-top:20px; padding:15px; background:#eef2e7; border-left:2px solid #8ea476; }
.product-revision>span { display:flex; gap:7px; align-items:center; color:#5c7451; font-size:9px; margin-bottom:8px; }
.product-revision svg { width:13px; height:13px; }
.story-product-demo .product-revision p { color:#4e654c; }
.product-manual-outline { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.product-manual-outline span { padding:6px 8px; font-size:8px; color:#8d9285; background:#f2f2eb; border-radius:3px; }
.product-editor-foot { display:flex; align-items:center; gap:7px; color:#7c897b; font-size:9px; margin-top:20px; }
.product-editor-foot>span { margin-left:auto; }
.product-editor-foot svg { height:13px; width:13px; }
.product-chain { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.product-chain>div { position:relative; }
.product-chain>div>span { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#edf1e9; color:#6c8166; font-size:10px; margin:8px 0 14px; }
.product-chain strong { display:block; font-size:13px; margin-bottom:5px; }
.product-chain small { display:block; color:#8c9688; font-size:10px; }
.product-chain>div:not(:last-child)::after { content:''; position:absolute; top:20px; left:36px; right:0; height:1px; background:#e2e7de; }
.product-knowledge-files { margin-top:16px; }
.product-knowledge-files>div { display:flex; align-items:center; gap:11px; padding:15px 0; }
.product-knowledge-files>div+div { border-top:1px solid #e2e4da; }
.product-knowledge-files strong { display:block; font-size:12px; }
.product-knowledge-files small { display:block; color:#8b9384; font-size:9px; margin-top:4px; }
.product-knowledge-files>div>svg { width:12px; height:12px; margin-left:auto; color:#8ba57a; }
.product-knowledge-icon { display:grid; place-items:center; width:34px; height:39px; flex-shrink:0; color:#667f6c; background:#e2e9db; border-radius:5px; }
.product-knowledge-icon--1,.product-knowledge-icon--3 { color:#8a785a; background:#ebe5d6; }
.product-knowledge-icon--2 { color:#637d90; background:#dfe7ed; }
.product-knowledge-icon svg { width:16px; height:16px; }
.product-content-trail { margin-top:6px !important; }
.product-content-trail li strong { font-size:12px; }
.product-content-trail li span { font-size:10px; }
.product-newsletter-routing { display:grid; grid-template-columns:45px 1fr; gap:11px; padding-bottom:20px; font-size:10px; }
.product-newsletter-routing>span { color:#91998c; }
.product-newsletter { border:1px solid #e4e8dc; border-radius:5px; background:#fffefa; overflow:hidden; }
.product-newsletter-mast { display:flex; align-items:center; justify-content:space-between; font-size:8px; letter-spacing:.1em; padding:18px 22px; color:#7a8867; }
.product-newsletter-cover { position:relative; overflow:hidden; background:#dce7bd; color:#34492c; padding:32px 24px; min-height:200px; }
.product-newsletter-cover>span { position:relative; z-index:1; font-size:7px; letter-spacing:.12em; }
.story-product-demo .product-newsletter-cover h4 { position:relative; z-index:1; font-family:Georgia,serif; font-size:38px; font-weight:400; margin-top:18px; letter-spacing:-.04em; }
.product-newsletter-art { position:absolute; right:-15px; top:0; bottom:0; width:38%; display:flex; align-items:center; gap:8px; transform:rotate(18deg); }
.product-newsletter-art i { display:block; width:24%; height:120%; background:#9cad80; border-radius:50%; }
.product-newsletter-art i:nth-child(2) { background:#6e865b; }
.product-newsletter-art i:nth-child(3) { background:#476441; }
.product-newsletter-body { padding:24px; }
.product-newsletter-body>div { position:relative; padding:16px 25px 16px 0; border-top:1px solid #e8eade; }
.product-newsletter-body strong { font-size:13px; }
.story-product-demo .product-newsletter-body p { font-size:11px; margin-top:5px; }
.product-newsletter-body>div>svg { position:absolute; right:0; top:22px; color:#879875; }
/* BSUH: compare the documents, then follow the payment-review decision. */
.product-scene--finance { --ui-accent:#56726e; --ui-soft:#eaf1ed; }
.product-match-banner { display:flex; align-items:center; gap:8px; padding:11px 12px; margin:0 0 20px; border-radius:5px; background:#f3efdf; color:#887345; font-size:10px; }
.product-match-banner svg { width:14px; height:14px; }
.product-invoice-pair { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.product-invoice-paper { border:1px solid #e4e5de; padding:19px 17px; border-radius:4px; background:#fffefa; box-shadow:2px 4px 0 -1px #e8e9e0,0 8px 18px -12px #30412d30; }
.product-invoice-mast { display:flex; align-items:center; gap:5px; color:#899382; font-size:8px; margin-bottom:24px; }
.product-invoice-mast svg { width:13px; height:13px; }
.story-product-demo .product-invoice-paper h4 { font-size:17px; letter-spacing:.035em; font-weight:550; }
.product-invoice-ref { color:#9b9f93; display:block; font-size:9px; margin-top:5px; }
.product-invoice-lines { display:grid; gap:6px; margin:25px 0; }
.product-invoice-lines i { height:4px; background:#e9eadd; width:76%; border-radius:1px; }
.product-invoice-lines i:nth-child(2) { width:91%; }
.product-invoice-lines i:nth-child(3) { width:51%; }
.product-invoice-paper dl { display:grid; gap:14px; padding-top:16px; border-top:1px solid #e6e8de; }
.product-invoice-paper dt { font-size:8px; color:#979e91; }
.product-invoice-paper dd { font-size:10px; margin-top:4px; }
.product-invoice-total { padding:18px 0; margin-top:20px; border-top:1px solid #e6e8de; }
.product-invoice-total>span { display:block; color:#899282; font-size:9px; margin-bottom:9px; }
.product-invoice-total>strong { font-size:19px; font-weight:450; letter-spacing:-.02em; }
.product-match-footer { display:flex; align-items:center; gap:8px; color:#8b9586; font-size:9px; margin-top:22px; }
.product-match-footer svg { width:14px; height:14px; }
.tone-finance { background:#e8eddf; color:#3e5444; display:flex; flex-direction:column; }
.tone-finance .product-widget-heading svg { color:#74846c; }
.product-payment-state { display:flex; align-items:center; gap:9px; margin:22px 0; color:#819071; font-size:8px; letter-spacing:.07em; }
.product-payment-state>svg { height:35px; width:35px; padding:8px; box-sizing:content-box; border-radius:50%; background:#dce5d0; color:#688263; }
.story-product-demo .tone-finance h4 { font-size:clamp(28px,3.3cqw,40px); font-weight:450; line-height:1.12; letter-spacing:-.045em; margin-bottom:18px; }
.story-product-demo .tone-finance p { color:#7c8874; font-size:12px; line-height:1.7; }
.product-control-label { display:flex; align-items:center; gap:7px; padding-top:28px; margin-top:auto; font-size:10px; color:#778a6c; }
.product-control-label svg { width:14px; height:14px; }
.product-coverage-list { display:grid; gap:20px; margin:24px 0 0 !important; }
.product-coverage-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-coverage-list li>span:first-child { display:flex; gap:8px; align-items:center; font-size:11px; }
.product-coverage-list svg { width:14px; height:14px; color:#8f9989; }
.product-finance-path .product-chain .current>span { background:#3f6170; color:#fff; }
.product-finance-path .product-chain>div>span>svg { width:13px; height:13px; }
.product-run-summary { display:flex; align-items:center; gap:14px; background:#eef2e8; padding:20px; border-radius:5px; margin-bottom:25px; }
.product-run-symbol { background:#dce8d3; color:#6d8d60; padding:12px; border-radius:7px; }
.product-run-symbol svg { width:20px; height:20px; }
.story-product-demo .product-run-summary h4 { font-size:20px; color:#586c4e; }
.product-run-note { margin-top:32px; }
.story-product-demo .product-run-note h4 { font-family:Georgia,serif; font-size:28px; font-weight:400; margin-bottom:15px; }
.story-product-demo .product-run-note p { font-size:12px; margin-bottom:22px; }
@container (max-width:900px) {
 .product-editor-page { padding:22px; }
 .story-product-demo .product-editor-page h4 { font-size:28px; }
 .product-knowledge-files>div { padding:13px 0; gap:8px; }
 .product-knowledge-files strong { font-size:11px; }
 .product-knowledge-icon { width:28px; height:34px; }
 .product-invoice-pair { gap:9px; }
 .product-invoice-paper { padding:17px 11px; }
 .product-invoice-mast { font-size:7px; gap:4px; }
 .product-invoice-total>strong { font-size:16px; }
 .product-coverage-list li { flex-wrap:wrap; gap:8px; }
 .product-payment-state { margin:12px 0 20px; flex-wrap:wrap; }
 .product-chain { gap:10px; }
 .product-chain small { font-size:9px; }
 .product-editor-foot { flex-wrap:wrap; }
 .product-editor-foot>span { margin-left:0; }
}
@container (max-width:650px) {
 .product-scene--training-marketing .product-collage,.product-scene--finance .product-collage { display:flex; flex-direction:column; }
 .product-training-editor,.product-finance-review { padding:18px; }
 .product-editor-page { padding:22px 17px; }
 .product-editor-toolbar { gap:14px; padding:11px 13px; }
 .product-knowledge-files strong { font-size:12px; }
 .product-knowledge-files>div { padding:15px 0; gap:11px; }
 .product-invoice-mast { font-size:7px; flex-wrap:wrap; }
 .product-invoice-paper { padding:17px 10px; }
 .product-invoice-paper h4 { font-size:15px; }
 .product-invoice-total>strong { font-size:15px; }
 .product-match-banner { font-size:9px; }
 .product-match-footer { font-size:9px; align-items:flex-start; }
 .product-payment-state { flex-wrap:nowrap; }
 .story-product-demo .tone-finance h4 { font-size:34px; }
 .product-coverage-list li { flex-wrap:nowrap; }
 .product-newsletter-cover { padding:28px 20px; }
 .story-product-demo .product-newsletter-cover h4 { font-size:32px; }
 .product-newsletter-body { padding:20px; }
 .product-newsletter-routing { grid-template-columns:39px 1fr; }
 .product-scene--finance .product-table { font-size:9px; }
 .product-scene--finance .product-table .product-badge { white-space:normal; }
}