/* User reference applied only to the case-study navigation and first chapter. */
.hero-reference-page > .site-header {
  background: #f6f9ff;
  border-bottom-color: #dce5f3;
  color: #101b33;
}
.hero-reference-page > .site-header .nav { width: calc(100% - 9.2%); max-width: 1800px; min-height: 72px; }
.hero-reference-page > .site-header .brand { font-size: 16px; font-weight: 700; white-space: nowrap; }
.hero-reference-page > .site-header .brand span { color: #52688e; }
.hero-reference-page > .site-header .nav-links { gap: 38px; font-size: 15px; font-weight: 500; }
.hero-reference-page > .site-header .chapter-menu summary { font-size: 15px; font-weight: 500; }
.hero-reference-page > .site-header .chapter-list { background: #f6f9ff; }
.hero-reference-page .hero-reference { --ink: #070e1e; --muted: #5b7196; --line: #dce6f5; padding: 0; background: #f7faff; }
.hero-reference .hero-main {
  position: relative;
  background: radial-gradient(ellipse at 94% 8%, #dce8fb 0, transparent 53%), linear-gradient(110deg, #f9fbff 0%, #f5f9ff 58%, #eaf2ff 100%);
}
.hero-reference .hero-shell {
  position: relative;
  width: 100%;
  max-width: 2000px;
  --hero-side: clamp(32px, 4.6vw, 92px);
  --hero-pad-top: clamp(34px, 3vw, 56px);
  --hero-art-top: 24px;
  min-height: clamp(740px, calc(100svh - 72px), 1050px);
  margin-inline: auto;
  padding: var(--hero-pad-top) var(--hero-side) 22px;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  grid-template-rows: auto auto;
  align-content: start;
  row-gap: 20px;
}
.hero-reference .hero-editorial { position: relative; z-index: 2; grid-column: 1; grid-row: 1; min-width: 0; width: 100%; max-width: 720px; }
.hero-reference .section-label { margin-bottom: 9px; color: #627ba6; font-size: 12px; letter-spacing: .14em; }
.hero-reference .hero-eyebrow { margin: 0 0 14px; color: #627ba6; font-size: 12px; line-height: 1.65; letter-spacing: .13em; }
.hero-reference .hero-product { margin: 0 0 32px; color: var(--ink); font-size: clamp(21px, 1.67vw, 30px); font-weight: 700; line-height: 1.5; letter-spacing: .01em; }
.hero-reference h1 { max-width: none; margin: 0; font-size: clamp(38px, 3.15vw, 60px); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; text-wrap: initial; }
.hero-reference h1 > span { display: block; white-space: nowrap; }
.hero-reference .hero-title-tail { white-space: nowrap; }
.hero-reference h1 em { font-style: normal; color: #2563ff; background: linear-gradient(115deg, #5799ff 0%, #1262ff 82%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-reference .hero-description { max-width: 600px; margin-top: 20px; font-size: clamp(15px, 1.08vw, 19px); line-height: 1.8; color: #576e94; text-wrap: pretty; }
.hero-reference .hero-actions { display: flex; gap: 18px; margin-top: 22px; }
.hero-reference .hero-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 178px; min-height: 54px; padding: 12px 26px; border-radius: 999px; font-size: 16px; font-weight: 500; text-decoration: none; }
.hero-reference .hero-button > span { font-size: 24px; line-height: 1; }
.hero-reference .hero-button-primary { color: #fff; background: linear-gradient(#202e46, #0b1426); box-shadow: inset 0 1px 0 #455269; }
.hero-reference .hero-button-secondary { color: #14213b; background: #ffffff70; border: 1px solid #d8e4f7; }
.hero-reference .hero-button-primary:hover { background: #243656; }
.hero-reference .hero-button-secondary:hover { background: #eaf1ff; border-color: #b7caee; }
.hero-reference .hero-button:focus-visible, .hero-reference .hero-progress:focus-visible { outline: 3px solid #3157f6; outline-offset: 5px; }
.hero-reference .hero-meta { display: grid; grid-template-columns: 1.35fr .67fr 1.48fr .91fr; gap: 0; margin-top: 32px; padding: 13px 0 18px; border-block: 1px solid var(--line); }
.hero-reference .hero-meta > div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.hero-reference .hero-meta > div:first-child { padding-left: 0; border-left: 0; }
.hero-reference .hero-meta > div:last-child { padding-right: 0; }
.hero-reference .hero-meta dt { margin-bottom: 5px; color: #526b94; font-size: 10px; line-height: 1.5; }
.hero-reference .hero-meta dd { color: #203452; font-size: clamp(9px, .59vw, 11px); line-height: 1.65; overflow-wrap: normal; }
.hero-reference .hero-workflow { margin-top: 16px; }
.hero-reference .hero-workflow h2 { margin: 0; color: #101b33; font-size: 14px; font-weight: 700; line-height: 1.6; letter-spacing: 0; }
.hero-reference .hero-workflow ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 10px; }
.hero-reference .hero-workflow li { position: relative; min-width: 0; }
.hero-reference .hero-workflow li:not(:last-child)::after { content: '→'; position: absolute; top: 7px; right: -13px; color: #5c75a1; font-size: 22px; font-weight: 400; }
.hero-reference .workflow-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #2465ff; border-radius: 50%; background: #eaf2ff; }
.hero-reference .workflow-icon svg { width: 24px; height: 24px; }
.hero-reference .hero-workflow h3 { margin-top: 6px; color: #13213b; font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: 0; }
.hero-reference .hero-workflow p { margin-top: 4px; color: #617ba4; font-size: 12px; line-height: 1.6; }
.hero-reference .hero-art { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: start; min-width: 0; margin: calc(var(--hero-art-top) - var(--hero-pad-top)) calc(-1 * var(--hero-side)) 0 calc(-1 * min(1.44vw, 28.8px)); }
.hero-reference .hero-art-crop { position: relative; width: 100%; aspect-ratio: 992 / 760; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 5%), linear-gradient(to bottom, #000 94%, transparent); mask-composite: intersect; }
.hero-reference .hero-art img { position: absolute; display: block; width: 168.5484%; max-width: none; height: auto; left: -68.5484%; top: -13.1579%; }
.hero-reference .hero-art figcaption { position: absolute; bottom: 3px; right: 7.6%; margin: 0; padding: 6px 0; color: #556e94; font-size: 11px; line-height: 1.5; }
.hero-reference .hero-bottom { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 0; position: relative; z-index: 2; }
.hero-reference .hero-progress { display: inline-flex; align-items: center; gap: 17px; min-height: 36px; color: #6d83a6; font-size: 12px; }
.hero-reference .hero-progress b { color: #12213b; font-size: 14px; }
.hero-reference .hero-progress-line { width: 110px; height: 2px; background: #dce5f2; }
.hero-reference .hero-progress-line i { display: block; width: 20%; height: 2px; background: #152039; }
.hero-reference .hero-scroll { margin-left: 3px; color: #314b74; }
.hero-reference .hero-motto { color: #637da6; font-size: 12px; }
.hero-reference > .wrap { padding-top: 0; }
.hero-reference .challenge { padding-block: 104px 44px; }
@media (min-width: 1500px) {
  .hero-reference .hero-description { max-width: 560px; }
  .hero-reference .hero-meta, .hero-reference .hero-workflow { width: 92%; }
}
@media (min-width: 1700px) {
  .hero-reference .hero-editorial { width: 101%; }
  .hero-reference .hero-shell { --hero-art-top: 22px; }
  .hero-reference .hero-product { margin-bottom: 38px; }
  .hero-reference .hero-description { margin-top: 26px; }
  .hero-reference .hero-actions { margin-top: 30px; }
  .hero-reference .hero-meta { margin-top: 42px; }
  .hero-reference .hero-workflow ol { margin-top: 16px; }
}
@media (min-width: 1151px) and (max-height: 820px) {
  .hero-reference-page > .site-header .nav { min-height: 64px; }
  .hero-reference .hero-shell { --hero-pad-top: 24px; --hero-art-top: 8px; min-height: min(calc(100svh - 64px), 1050px); padding-block: var(--hero-pad-top) 12px; row-gap: 12px; }
  .hero-reference .hero-product { margin-bottom: 18px; }
  .hero-reference .hero-description { margin-top: 12px; line-height: 1.75; }
  .hero-reference .hero-actions { margin-top: 16px; }
  .hero-reference .hero-button { min-height: 48px; font-size: 14px; padding: 10px 22px; }
  .hero-reference .hero-meta { margin-top: 26px; padding-bottom: 13px; }
  .hero-reference .hero-workflow { margin-top: 12px; }
  .hero-reference .hero-workflow ol { margin-top: 8px; }
  .hero-reference .hero-workflow h3 { font-size: 12px; }
  .hero-reference .hero-workflow p { font-size: 11px; line-height: 1.45; }
  .hero-reference .workflow-icon { width: 36px; height: 36px; }
  .hero-reference .hero-bottom { margin-top: 0; }
  .hero-reference .hero-progress { min-height: 28px; }

}
@media (max-width: 1150px) {
  .hero-reference .hero-shell { display: flex; flex-direction: column; gap: 0; padding-top: 42px; min-height: auto; }
  .hero-reference .hero-editorial { width: 100%; max-width: 760px; }
  .hero-reference h1 { font-size: clamp(40px, 5.25vw, 56px); }
  .hero-reference .hero-description { max-width: 650px; font-size: 17px; }
  .hero-reference .hero-meta { max-width: 680px; }
  .hero-reference .hero-meta dd { font-size: 11px; }
  .hero-reference .hero-workflow { max-width: 650px; }
  .hero-reference .hero-art { position: relative; inset: auto; width: 100%; max-width: 1000px; margin: 24px auto 0; }
  .hero-reference .hero-art-crop { mask-image: none; }
  .hero-reference .hero-art figcaption { right: 0; bottom: 0; }
  .hero-reference .hero-bottom { margin-top: 20px; }
}
@media (max-width: 600px) {
  .hero-reference-page > .site-header .nav { width: calc(100% - 40px); min-height: 64px; }
  .hero-reference-page > .site-header .brand { max-width: none; font-size: 14px; }
  .hero-reference-page > .site-header .brand span { display: inline; }
  .hero-reference-page > .site-header .nav-links { display: none; }
  .hero-reference-page > .site-header .chapter-menu summary { font-size: 13px; }
  .hero-reference .hero-shell { padding: 38px 20px 24px; }
  .hero-reference .section-label { font-size: 11px; }
  .hero-reference .hero-eyebrow { font-size: 10px; }
  .hero-reference .hero-product { font-size: 20px; margin-bottom: 26px; }
  .hero-reference h1 { font-size: clamp(30px, 8.8vw, 45px); line-height: 1.4; letter-spacing: -.035em; }
  .hero-reference h1 > span { white-space: normal; }
  .hero-reference h1 em { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .hero-reference .hero-description { margin-top: 20px; font-size: 16px; line-height: 1.85; }
  .hero-reference .desktop-break { display: none; }
  .hero-reference .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
  .hero-reference .hero-button { min-width: 0; min-height: 48px; padding: 11px 16px; gap: 8px; font-size: 13px; }
  .hero-reference .hero-button > span { font-size: 20px; }
  .hero-reference .hero-meta { margin-top: 28px; grid-template-columns: 1.2fr 1fr; gap: 19px 0; padding-block: 16px; }
  .hero-reference .hero-meta > div { padding-inline: 14px; }
  .hero-reference .hero-meta > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-reference .hero-meta > div:nth-child(even) { padding-right: 0; }
  .hero-reference .hero-meta dd { font-size: 11px; overflow-wrap: anywhere; }
  .hero-reference .hero-workflow { margin-top: 20px; }
  .hero-reference .hero-workflow ol { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
  .hero-reference .hero-workflow li { display: grid; grid-template-columns: 44px 88px 1fr; align-items: center; column-gap: 12px; padding-block: 12px; border-bottom: 1px solid #dce6f5; }
  .hero-reference .hero-workflow li:not(:last-child)::after { display: none; }
  .hero-reference .workflow-icon { width: 40px; height: 40px; }
  .hero-reference .workflow-icon svg { width: 22px; height: 22px; }
  .hero-reference .hero-workflow h3 { margin: 0; font-size: 13px; }
  .hero-reference .hero-workflow p { margin: 0; font-size: 12px; }
  .hero-reference .hero-art { margin-top: 24px; }
  .hero-reference .hero-art-crop { aspect-ratio: 992 / 790; }
  .hero-reference .hero-art figcaption { position: relative; margin-top: 8px; font-size: 10px; text-align: right; }
  .hero-reference .hero-bottom { margin-top: 12px; gap: 10px; }
  .hero-reference .hero-progress { gap: 10px; }
  .hero-reference .hero-progress-line { width: 56px; }
  .hero-reference .hero-motto { max-width: 120px; text-align: right; font-size: 10px; line-height: 1.5; }
  .hero-reference .challenge { padding-block: 68px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reference *, .hero-reference-page .site-header * { scroll-behavior: auto; }
}