/* Agentic Workflows page B, "The setup and content": a warm dark hero (its world and edge are in shared/agentic-page-links.css), a sticky step rail beside eight numbered step cards (promise, three short lines, three artifacts, demo slot, copy-this line, previous and next). */
.agentic-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding: 48px 0 32px; } /* rail beside the steps */
.step-rail { position: sticky; top: 24px; } /* the rail stays in view on desktop */
.step-rail ol { display: grid; gap: 2px; } /* eight short links */
.step-rail a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-left: 2px solid var(--ink-line); color: var(--paper-soft); font: 500 15px/1.25 var(--body); text-decoration: none; transition: color 0.2s, border-color 0.2s; } /* one step link, at least 44 px high */
.step-rail a:hover { color: var(--paper); } /* brighten on hover */
.step-rail a[aria-current] { border-color: var(--amber); background: var(--ink-raised); color: var(--paper); } /* the step in view */
.rail-num { color: var(--amber); font: 500 13px var(--mono); } /* its number */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } /* the eight cards, each allowed to shrink to the screen */
.step { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--ink-line); border-radius: 20px; background: var(--ink-raised); scroll-margin-top: 20px; } /* one numbered step card */
.step-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 2.4vw, 26px); align-items: start; } /* big number beside the words */
.step-number { grid-row: 1 / span 3; color: var(--amber); font: 800 clamp(48px, 6vw, 76px)/0.85 var(--display); letter-spacing: -0.05em; } /* the numeral */
.step-kicker { margin-bottom: 8px; color: var(--paper-soft); font: 500 13px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } /* "Part 3 of 8" and the status */
.step h2 { font: 700 clamp(25px, 3vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; } /* the step title */
.step-promise { margin-top: 8px; color: var(--paper); font-size: clamp(17px, 1.8vw, 20px); line-height: 1.4; } /* one line, no paragraph */
.step-facts { display: grid; gap: 10px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-line); } /* three short rows */
.step-facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: baseline; } /* label beside text */
.step-facts dt { color: var(--amber); font: 500 13px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } /* row label */
.step-facts dd { margin: 0; color: var(--paper-soft); font-size: 16.5px; line-height: 1.45; } /* row text */
.demo-slot { display: grid; gap: 6px; margin-top: 18px; padding: 14px 16px; border: 1.5px dashed rgb(243 239 230 / 0.28); border-radius: 14px; background: rgb(0 0 0 / 0.18); } /* where the demo will play */
.demo-slot > span { color: var(--paper-soft); font: 500 13px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } /* "Demo" label */
.demo-slot p { color: var(--paper-soft); font-size: 15.5px; line-height: 1.4; } /* what the demo shows */
.demo-table { width: 100%; border-collapse: collapse; font-size: 15px; } /* the real model-policy table, compact */
.demo-table caption { padding-bottom: 4px; color: var(--paper-soft); font: 500 13px var(--mono); letter-spacing: 0.04em; text-align: left; text-transform: uppercase; } /* its caption */
.demo-table th, .demo-table td { padding: 6px 8px; border-bottom: 1px solid var(--ink-line); text-align: left; } /* cells */
.demo-table th { color: var(--paper-soft); font: 500 13px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } /* column heads */
.demo-table td:last-child { color: var(--amber); font-family: var(--mono); font-size: 14px; white-space: nowrap; } /* the model tier */
.step-bar { display: none; } /* the slim bar shows only on phones */
.step-copy { margin-top: 14px; padding: 12px 16px; border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; background: rgb(242 181 68 / 0.08); color: var(--paper); font-size: 17px; line-height: 1.4; } /* the one-line takeaway */
.step-copy b { display: block; margin-bottom: 2px; color: var(--amber); font: 500 13px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } /* "Copy this" label */
.step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 20px; margin-top: 10px; font: 600 15px var(--body); } /* previous and next */
.step-nav a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; } /* every step link is at least 44 px high */
@media (max-width: 860px) { /* tablets and phones */
  .step-bar:not([hidden]) { position: sticky; top: 0; z-index: 20; display: block; margin: 0 calc(var(--gutter) * -1); border-bottom: 1px solid var(--ink-line); background: rgb(26 23 20 / 0.96); backdrop-filter: blur(8px); } /* a slim sticky bar once the rail has scrolled away */
  .step-bar-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 var(--gutter); color: var(--paper); font: 500 14px/1.2 var(--body); text-decoration: none; } /* one tap target across the bar */
  .step-bar-link > span:first-child { color: var(--amber); font: 500 13px var(--mono); white-space: nowrap; } /* "Part 3 of 8" */
  .step-bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the step's title */
  .step-bar-more { color: var(--paper-soft); font: 500 13px var(--mono); white-space: nowrap; } /* "All steps" */
  .agentic-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 28px; } .step-rail, .steps { min-width: 0; } /* one column that may shrink below its longest word */
  .step-rail { position: static; } /* the rail becomes a short grid above the steps */
  .step-rail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; } /* two columns, four rows */
  .step-rail a { padding: 4px 8px; font-size: 14px; } /* compact */
  .step-head { grid-template-columns: 1fr; } /* number above the words */
  .step-number { grid-row: auto; font-size: 44px; margin-bottom: 4px; } /* smaller numeral */
  .step-facts div { grid-template-columns: 1fr; gap: 2px; } /* label above text */
}
@media (max-width: 400px) { .demo-table td:last-child { white-space: normal; } .demo-table th, .demo-table td { padding: 6px 5px; } .step-rail ol { grid-template-columns: minmax(0, 1fr); } .step-rail a { min-width: 0; overflow-wrap: anywhere; } .step-rail a span:last-child { min-width: 0; }  } /* very narrow phones: one column, so nothing runs off the edge */ /* phones: the picture is about 830 px tall */