/* Service narratives extend the existing light, typographic public site. */
.story-shell { width: min(1440px, calc(100% - var(--page-padding) * 2)); margin-inline: auto; }
.story-heading .eyebrow, .story-rail .eyebrow { margin: 0 0 24px; color: var(--fg-subtle); font: 11px/1.5 var(--font-mono); letter-spacing: .1em; }
.story-heading .eyebrow span { color: var(--orange-500); }
.story-heading :is(h1, h2) { margin: 0; color: var(--fg-default); font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.story-heading h1 { max-width: 20ch; font-size: clamp(40px, 4.5vw, 70px); line-height: 1.04; }
.story-heading h1 strong { color: var(--orange-500); font-weight: inherit; }
.story-heading h2 { max-width: 29ch; font-size: clamp(30px, 3vw, 46px); }
.story-copy { min-width: 0; color: var(--fg-muted); font-size: 18px; line-height: 1.75; text-align: left; }
.story-copy > p { max-width: 73ch; margin: 0 0 1.2em; }
.story-copy > :last-child { margin-bottom: 0; }
.story-copy strong { color: var(--fg-default); font-weight: 500; }
.story-copy :is(p, li, strong) { text-align: left; }
.story-copy :is(ul, ol) { padding-inline-start: 24px; }
.story-copy li { margin-block: 12px; }
.story-copy code { overflow-wrap: anywhere; }
.story-hero { padding-block: clamp(48px, 5vw, 80px) clamp(64px, 7vw, 104px); }
.story-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.story-hero .story-heading h1 { max-width: 26ch; }
.story-hero__copy { max-width: 70ch; padding-top: 0; font-size: 18px; line-height: 1.65; }
.story-hero .eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 12px; border-radius: 50%; background: var(--orange-500); }
.story-hero .section-actions { margin-top: 32px; }
.story-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; gap: clamp(48px, 6vw, 96px); padding-block: 0 96px; }
.story-rail { position: sticky; top: 128px; max-height: calc(100svh - 160px); overflow-y: auto; scrollbar-width: thin; }
.story-rail ol { list-style: none; padding: 0; margin: 0; }
.story-rail li { border-top: 1px solid var(--border-default); }
.story-rail a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 0; color: var(--fg-muted); font-size: 14px; line-height: 1.4; text-decoration: none; }
.story-rail a span { font: 10px/1.5 var(--font-mono); }
.story-rail a:hover, .story-rail a[data-chapter-active] { color: var(--fg-default); }
.story-rail a[data-chapter-active] span { color: var(--orange-500); }
.story-rail a:focus-visible { outline: 2px solid var(--orange-500); outline-offset: -2px; }
.story-content { min-width: 0; }
.story-section { padding-block: 56px 64px; border-top: 1px solid var(--border-default); scroll-margin-top: 128px; }
.story-section:first-child { padding-top: 32px; }
.story-section:focus { outline: none; }
.story-anchor { display: block; scroll-margin-top: 128px; }
.story-section .story-heading { margin-bottom: 32px; }
.story-section .section-actions { margin-top: 32px; gap: 16px 24px; }
.story-section--closing { margin-top: 16px; padding: 40px; background: var(--ink-25); border-top: 2px solid var(--orange-500); }
.story-visual { margin: 40px 0; border: 1px solid var(--border-default); background: var(--ink-25); }
.story-visual figcaption { padding: 18px 24px; border-bottom: 1px solid var(--border-default); color: var(--fg-subtle); font: 11px/1.6 var(--font-mono); letter-spacing: .04em; }
.story-visual ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.story-visual li { position: relative; min-width: 0; display: flex; gap: 18px; margin: 0; padding: 28px 24px; border-inline-end: 1px solid var(--border-default); }
.story-visual li:last-child { border-inline-end: 0; }
.story-visual strong { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 400; line-height: 1.2; letter-spacing: -.02em; }
.story-visual li p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; }
.story-visual__index { color: var(--orange-500); font: 11px/1.8 var(--font-mono); }
.story-visual--network ol { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 24px; gap: 20px; }
.story-visual--network li { display: block; border: 1px solid var(--border-default); padding: 24px; background: var(--ink-0); }
.story-visual--network .story-visual__index { display: block; margin-bottom: 16px; }
.story-visual--network li:first-child, .story-visual--network li:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; }
.story-visual--network li:first-child { border-color: var(--orange-500); }
.story-visual--network li:last-child { border-inline-start: 3px solid var(--orange-500); }
.story-visual--sequence ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-visual--sequence li:nth-child(-n+2) { border-bottom: 1px solid var(--border-default); }
.story-visual--sequence li:nth-child(even) { border-inline-end: 0; }
.story-visual--levels ol { display: block; }
.story-visual--levels li { border-inline-end: 0; border-bottom: 1px solid var(--border-default); align-items: baseline; gap: 24px; }
.story-visual--levels li:last-child { border-bottom: 0; }
.story-visual--levels .story-visual__index { min-width: 32px; font-size: 24px; color: var(--fg-subtle); }
.story-visual--atlas li { display: block; }
.story-visual--atlas .story-visual__index { display: block; margin-bottom: 36px; }
.story-visual--atlas li:nth-child(2) { border-top: 2px solid var(--orange-500); }
.story-copy :is(#cloud-runtime, #model-logos) { margin-top: 40px; font: 12px/1.6 var(--font-mono); letter-spacing: .08em; }
.story-copy .cloud-architecture__frame { border-radius: 0; }
.story-copy :is(#cloud-runtime, #model-logos) + ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--border-default); }
.story-copy #cloud-runtime + ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.story-copy :is(#cloud-runtime, #model-logos) + ul li { display: grid; grid-template-rows: auto auto; place-items: center; gap: 12px; min-width: 0; margin: 0; padding: 24px 16px; border-bottom: 1px solid var(--border-default); text-align: center; font-size: 13px; line-height: 1.4; }
.story-copy :is(#cloud-runtime, #model-logos) + ul img { display: block; width: min(100%, 96px); height: 32px; object-fit: contain; filter: brightness(0); }
@media (max-width: 1100px) {
  .story-body { grid-template-columns: 160px minmax(0, 1fr); gap: 40px; }
  .story-visual--network ol { grid-template-columns: 1fr; }
  .story-visual--network li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; }
  .story-visual--atlas ol { grid-template-columns: 1fr; }
  .story-visual--atlas li { display: flex; border-inline-end: 0; border-bottom: 1px solid var(--border-default); }
  .story-visual--atlas li:nth-child(2) { border-top: 0; border-inline-start: 2px solid var(--orange-500); }
  .story-visual--atlas li:last-child { border-bottom: 0; }
  .story-visual--atlas .story-visual__index { margin: 0; }
}
@media (max-width: 980px) {
  .story-copy #cloud-runtime + ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-hero { padding-block: 48px 56px; }
  .story-body { grid-template-columns: 1fr; gap: 32px; }
  .story-hero__copy { font-size: 17px; }
  .story-heading h1 { font-size: clamp(36px, 7.4vw, 52px); max-width: 22ch; }
  .story-heading h2 { font-size: clamp(29px, 6vw, 38px); }
  .story-copy { font-size: 17px; }
  .story-rail { position: static; max-height: none; overflow: visible; }
  .story-rail ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .story-rail a { font-size: 13px; }
  .story-body { padding-bottom: 64px; gap: 48px; }
  .story-section { padding-block: 40px; }
  .story-section--closing { padding: 28px 24px; }
  .story-visual { margin-block: 28px; }
  .story-visual :is(figcaption, li) { padding: 20px; }
  .story-visual strong { font-size: 21px; }
}
@media (max-width: 480px) {
  .story-visual ol { grid-template-columns: 1fr; }
  .story-visual--sequence li { border-inline-end: 0; border-bottom: 1px solid var(--border-default); }
  .story-visual--sequence li:last-child { border-bottom: 0; }
  .story-visual--network ol { padding: 16px; gap: 12px; }
  .story-copy #model-logos + ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}