/* Block: argos/steps */

/* Layout: journey */
.journey { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey-step { min-height: 128px; padding: 21px 0; display: grid; grid-template-columns: 66px 1fr minmax(150px, .48fr); gap: 26px; align-items: center; border-bottom: 1px solid var(--line); }
.journey-step:last-child { border-bottom: 0; }
.journey-step > span { width: 38px; height: 38px; display: grid; place-items: center; position: relative; border: 1px solid rgba(97,24,215,.25); border-radius: 50%; color: var(--violet); font-size: .68rem; font-weight: 900; }
.journey-step:not(:last-child) > span::after { content: ""; width: 1px; height: 91px; position: absolute; top: 38px; background: linear-gradient(var(--violet), rgba(97,24,215,.08)); }
.journey-step h3 { margin: 0 0 7px; }
.journey-step p { margin: 0; color: var(--muted); }
.journey-step small { justify-self: end; color: var(--muted); font-size: .8rem; font-weight: 850; text-align: right; text-transform: uppercase; }

/* Layout: rail */
.approach-rail { border-top: 1px solid var(--line); }
.approach-rail article { min-height: 150px; padding: 27px 0; display: grid; grid-template-columns: 64px 300px 1fr; gap: 24px; align-items: start; border-bottom: 1px solid var(--line); }
.approach-rail span { color: var(--violet); font-size: .78rem; font-weight: 900; }
.approach-rail h3 { margin: 0; }
.approach-rail p { max-width: 700px; margin: 0; color: var(--muted); }

/* Layout: flow */
.recovery-flow { padding: 34px 0; display: grid; grid-template-columns: repeat(var(--step-count, 5), 1fr); gap: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recovery-flow article { min-width: 0; position: relative; }
.recovery-flow article:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 6px; color: #14bfa7; }
.recovery-flow span { color: var(--violet); font-size: .78rem; font-weight: 900; }
.recovery-flow h3 { margin: 40px 0 8px; font-size: 1.05rem; }
.recovery-flow p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Flow variants: cards and dark bar */
.recovery-flow--cards { padding: 0; gap: 20px; border: 0; }
.recovery-flow--cards article { min-height: 220px; padding: 22px 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }
.recovery-flow--cards article:not(:last-child)::after { right: -16px; top: 50%; transform: translateY(-50%); color: var(--ink); }
.recovery-flow--cards h3 { margin-top: 52px; font-size: 1.15rem; }
.recovery-flow--cards p { font-size: .7rem; }
.recovery-flow--bar { padding: 23px; gap: 16px; border: 0; border-radius: 19px; color: var(--white); background: var(--charcoal); }
.recovery-flow--bar article { min-height: 90px; padding: 12px; }
.recovery-flow--bar article:not(:last-child)::after { content: ""; right: -12px; top: 50%; width: 15px; height: 1px; background: rgba(29,214,190,.4); }
.recovery-flow--bar span { color: var(--mint); font-size: .78rem; }
.recovery-flow--bar h3 { margin: 18px 0 0; font-size: .68rem; }
.recovery-flow--bar p { color: rgba(255,255,255,.72); }
.steps-note--box { margin-top: 20px; padding: 25px 28px; border: 1px solid rgba(241,174,80,.27); border-radius: 17px; color: #694819; background: rgba(241,174,80,.1); }
.steps-note--box b, .steps-note--box strong { color: var(--ink); }

/* Rows variant: cards */
.system-stack--cards { display: grid; gap: 10px; border-top: 0; }
.system-stack--cards .stack-row { min-height: 170px; padding: 25px 28px; grid-template-columns: 100px 1fr .78fr; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.system-stack--cards .stack-row:hover { transform: translateY(-3px); border-color: rgba(97,24,215,.25); box-shadow: 0 16px 38px rgba(35,24,59,.07); background: var(--paper); }
.system-stack--cards .stack-row h3 { font-size: 1.35rem; }
.system-stack--cards .stack-row > b { padding: 18px; font-size: .76rem; line-height: 1.5; }
.system-stack--cards .stack-row:nth-child(n) > b { border-color: var(--mint); color: #2d504a; background: rgba(29,214,190,.08); }

/* Layout: stack (operating layers) */
.layer-stack { margin-top: 56px; }
.layer-stack article { min-height: 96px; margin-top: -1px; padding: 22px 26px; display: grid; grid-template-columns: 46px 1fr 120px; gap: 18px; align-items: center; border: 1px solid var(--line); background: var(--card-glass); transition: transform 180ms ease, background 180ms ease; }
.layer-stack article:first-child { border-radius: 22px 22px 0 0; }
.layer-stack article:last-child { border-radius: 0 0 22px 22px; }
.layer-stack article:hover { z-index: 1; transform: translateX(5px); }
.layer-stack article > span { color: var(--violet); font-size: .9rem; font-weight: 900; }
.layer-stack h3 { margin-bottom: 6px; font-size: 1.2rem; }
.layer-stack p { margin: 0; color: var(--muted); font-size: .9rem; }
.layer-stack article > b { justify-self: end; color: var(--muted); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.steps-note { margin-top: 30px; color: var(--muted); }
.steps-note p { margin: 0; }
.on-dark .layer-stack article { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.045); }
.on-dark .layer-stack article:hover { background: rgba(255,255,255,.09); }
.on-dark .layer-stack article > span { color: var(--mint); }
.on-dark .layer-stack p { color: rgba(255,255,255,.82); }
.on-dark .layer-stack article > b { color: rgba(255,255,255,.72); }
.on-dark .steps-note { color: rgba(255,255,255,.82); }

/* Layout: rows (workstreams) */
.system-stack { border-top: 1px solid var(--line); }
.stack-row { min-height: 148px; padding: 26px 28px; display: grid; grid-template-columns: 65px 1fr .75fr; gap: 30px; align-items: center; border-bottom: 1px solid var(--line); transition: background 180ms ease; }
.stack-row:hover { background: rgba(97,24,215,.035); }
.stack-row > span { color: var(--violet); font-size: .78rem; font-weight: 900; }
.stack-row small { color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.stack-row h3 { margin: 7px 0 8px; font-size: 1.48rem; }
.stack-row p { margin: 0; color: var(--muted); }
.stack-row > b { padding: 15px 17px; border-left: 3px solid var(--mint); color: #284a45; background: rgba(29,214,190,.08); font-size: .79rem; line-height: 1.45; }
.stack-row:nth-child(4n+2) > b { border-color: #b391eb; color: #4e3377; background: rgba(97,24,215,.06); }
.stack-row:nth-child(4n+3) > b { border-color: #f0a84a; color: #694819; background: rgba(240,168,74,.1); }
.stack-row:nth-child(4n+4) > b { border-color: #77aef0; color: #2c4d77; background: rgba(90,156,235,.08); }
.on-dark .system-stack, .on-dark .stack-row { border-color: rgba(255,255,255,.17); }
.on-dark .stack-row > span { color: var(--mint); }

/* Dark themes */
.on-dark .journey, .on-dark .journey-step, .on-dark .approach-rail, .on-dark .approach-rail article, .on-dark .recovery-flow { border-color: rgba(255,255,255,.17); }
.on-dark .journey-step > span, .on-dark .approach-rail span, .on-dark .recovery-flow span { color: #14bfa7; }
.on-dark .journey-step > span { border-color: rgba(20,191,167,.35); }
.on-dark .journey-step p, .on-dark .approach-rail p, .on-dark .recovery-flow p { color: rgba(255,255,255,.82); }
.on-dark .journey-step small { color: rgba(255,255,255,.72); }

@media (max-width: 1100px) {
  .stack-row { grid-template-columns: 52px 1fr; }
  .stack-row > b { grid-column: 2; }
}

@media (max-width: 1100px) {
  .recovery-flow--cards, .recovery-flow--bar { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .recovery-flow--cards article::after, .recovery-flow--bar article::after { display: none; }
}

@media (max-width: 840px) {
  .recovery-flow { grid-template-columns: 1fr; }
  .recovery-flow--bar { grid-template-columns: repeat(2, 1fr); }
  .recovery-flow--bar article { border-bottom: 0; }
  .recovery-flow article { min-height: 110px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .on-dark .recovery-flow article { border-color: rgba(255,255,255,.17); }
  .layer-stack article { grid-template-columns: 42px 1fr; }
  .layer-stack article > b { display: none; }
  .recovery-flow article:last-child { border-bottom: 0; }
  .recovery-flow article:not(:last-child)::after { content: "↓"; right: auto; left: 8px; top: auto; bottom: -19px; font-size: 20px;}
  .recovery-flow h3 { margin-top: 22px; }
  .approach-rail article { grid-template-columns: 45px 1fr; }
  .approach-rail article p { grid-column: 2; }
}

@media (max-width: 760px) {
  .stack-row { padding-inline: 12px; grid-template-columns: 37px 1fr; gap: 12px; }
  .stack-row > b { grid-column: 1/-1; }
  .layer-stack article { padding: 18px; }
  .journey-step { grid-template-columns: 48px 1fr; gap: 16px; }
  .journey-step small { grid-column: 2; justify-self: start; text-align: left; }
}