/* Blog visual components: animated figures, interactive guides and designed callouts.
   Final state is the default. blog-viz.js adds .pre (initial state) to off-screen blocks and .in when they scroll into view. */

/* ---------- Shared figure shell ---------- */
.viz { position: relative; margin: 44px 0 0 !important; padding: clamp(20px, 3.2vw, 36px); border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(80% 60% at 100% 0%, rgba(17, 17, 20, 0.06), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(249, 115, 22, 0.05), transparent 70%), #fff; box-shadow: 0 30px 60px -48px rgba(17, 17, 20, 0.35); font-size: 16px; line-height: 1.5; color: var(--text); }
.viz.is-dark { background: var(--grad-glow); border-color: rgba(255, 255, 255, 0.08); color: var(--invert); }
.viz li, .pillars3 li, .takeaway li, .num-list li, .rt-line li { margin: 0 !important; }
.viz p { margin: 0; }
.viz svg, .alert svg, .retire svg { display: block; }
.viz-head { margin-bottom: 24px; }
.viz-kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-3); }
.is-dark .viz-kicker { color: var(--violet-soft); }
.viz-title { font-size: clamp(21px, 2.2vw, 27px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 6px !important; color: var(--text); }
.is-dark .viz-title { color: #fff; }
.viz-sub { font-size: 16px; color: var(--text-mute); margin-top: 6px !important; line-height: 1.55; }
.is-dark .viz-sub { color: var(--invert-mute); }
.viz figcaption { margin-top: 20px; font-size: 14.5px; color: var(--text-mute); }
.is-dark figcaption { color: var(--invert-faint); }

/* ---------- Stack upgrade ---------- */
.stack-grid { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); align-items: center; }
.stack-panel { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: opacity .6s var(--ease-out), transform .7s var(--ease-pop); }
.stack-panel .sp-head { min-height: 70px; padding: 14px 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.stack-panel .sp-head b { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
.stack-panel .sp-head span { display: block; font-size: 14px; color: var(--text-mute); margin-top: 2px; }
.stack-panel.next { border: 1px solid transparent; box-shadow: 0 24px 48px -28px rgba(17, 17, 20, 0.55); transition-delay: .15s; }
.stack-panel.next .sp-head { background: var(--grad-brand); border-bottom: 0; }
.stack-panel.next .sp-head b, .stack-panel.next .sp-head span { color: #fff; }
.sp-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 15px; perspective: 400px; }
.sp-head + .sp-row { border-top: 0; }
.sp-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--paper-2); color: var(--text-mute); }
.next .sp-ic { background: var(--wash-violet); color: var(--brand-3); }
.sp-ic svg { width: 17px; height: 17px; }
.sp-name { font-weight: 500; line-height: 1.3; }
.sp-ver { font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--text-mute); white-space: nowrap; transition: transform .6s var(--ease-pop), opacity .4s; transition-delay: calc(var(--i, 0) * 130ms + 450ms); }
.next .sp-ver { background: var(--ink); color: #fff; }
.stack-flow { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 10px; text-align: center; }
.flow-bar { position: relative; width: 58px; height: 6px; margin-right: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-2), var(--brand-1)); background-size: 200% 100%; animation: viz-flow 2.2s linear infinite; }
.flow-bar::after { content: ''; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); border-left: 13px solid var(--brand-3); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@keyframes viz-flow { to { background-position: -200% 0; } }
.flow-txt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); line-height: 1.5; }
.stack-viz.pre .stack-panel.classic { opacity: 0; transform: translateX(-18px); }
.stack-viz.pre .stack-panel.next { opacity: 0; transform: translateX(18px); }
.stack-viz.pre .next .sp-ver { opacity: 0; transform: rotateX(90deg); }
.seg { display: none; }
.stack-grid.flip .sp-ver { animation: viz-flip .55s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes viz-flip { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: none; } }
@media (max-width: 680px) {
  .stack-grid { grid-template-columns: 1fr; }
  .stack-flow { flex-direction: row; justify-content: center; padding: 18px 0; }
  .flow-bar { transform: rotate(90deg); margin: 8px 0; }
  .stack-viz.has-js .seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 16px; }
  .seg-btn { font: inherit; font-size: 15px; font-weight: 600; padding: 8px 18px; border-radius: 999px; border: 0; background: transparent; color: var(--text-mute); cursor: pointer; }
  .seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
  .stack-grid[data-show="next"] .stack-panel.classic, .stack-grid[data-show="classic"] .stack-panel.next,
  .stack-grid[data-show="next"] .stack-flow, .stack-grid[data-show="classic"] .stack-flow { display: none; }
}

/* ---------- Timelines ---------- */
.tl { --n: 5; --ring: #fff; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; position: relative; }
.tl::before, .tl::after { content: ''; position: absolute; top: 21px; left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 3px; border-radius: 3px; background: var(--line); }
.tl::after { background: var(--grad-brand); transform-origin: left center; transition: transform 1.6s var(--ease-out) .2s; }
.pre .tl::after { transform: scaleX(0); }
.tl-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.tl-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; background: var(--grad-brand); box-shadow: 0 0 0 6px var(--ring), 0 10px 20px -8px rgba(17, 17, 20, 0.55); transition: background .4s, color .4s, box-shadow .4s, transform .5s var(--ease-pop); transition-delay: calc(var(--i, 0) * 280ms + 250ms); }
.pre .tl-dot { background: #fff; color: var(--text-faint); box-shadow: 0 0 0 6px var(--ring), inset 0 0 0 2px var(--line); transform: scale(.85); }
.tl-step b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.tl-step .d { display: block; font-size: 14px; color: var(--text-mute); line-height: 1.45; margin-top: 3px; }
.tl-step.hl .tl-dot { box-shadow: 0 0 0 6px var(--ring), 0 0 0 10px rgba(17, 17, 20, 0.22); }
.tl-inset { margin-top: 28px; padding: 22px 18px; border-radius: 18px; background: var(--paper-2); border: 1px dashed #D4D4DA; position: relative; }
.tl-inset::before { content: ''; position: absolute; right: 10%; top: -29px; height: 28px; border-left: 2px dashed #D4D4DA; }
.tl-inset .tl { --ring: var(--paper-2); }
.tl-inset .tl-dot { background: var(--brand-3); box-shadow: 0 0 0 6px var(--ring); }
.tl-inset-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-3); margin-bottom: 18px; }
.is-dark .tl { --ring: transparent; }
.is-dark .tl::before { background: rgba(255, 255, 255, 0.16); }
.is-dark .tl-step b { color: #fff; }
.is-dark .tl-dot { box-shadow: 0 10px 24px -8px rgba(249, 115, 22, 0.6); }
.is-dark.pre .tl-dot { background: rgba(255, 255, 255, 0.08); color: var(--invert-faint); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.tl-compact .tl-step b { font-size: 16px; }
@media (max-width: 680px) {
  .tl { grid-template-columns: 1fr; gap: 0; }
  .tl::before, .tl::after { display: none; }
  .tl-step:not(:last-child)::before, .tl-step:not(:last-child)::after { content: ''; position: absolute; left: 20.5px; top: 44px; bottom: 0; width: 3px; background: var(--line); }
  .is-dark .tl-step:not(:last-child)::before { background: rgba(255, 255, 255, 0.16); }
  .tl-step:not(:last-child)::after { background: var(--grad-brand); transform-origin: center top; transition: transform .45s var(--ease-out); transition-delay: calc(var(--i, 0) * 280ms + 420ms); }
  .pre .tl-step::after { transform: scaleY(0); }
  .tl-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; padding-bottom: 18px; }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-step > div { padding-top: 10px; }
  .tl-inset::before { display: none; }
}

/* ---------- Readiness checklist + ring ---------- */
.ready-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.ready-top .viz-head { margin: 0; }
.ring { position: relative; width: 120px; height: 120px; flex: none; }
.ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .ring-bg { stroke: var(--paper-3); }
.ring .ring-fg { stroke: url(#readyGrad); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-out); }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.ring-label b { font-size: 32px; font-weight: 700; line-height: 1; }
.ring-label span { font-size: 12px; color: var(--text-mute); max-width: 76px; line-height: 1.25; margin-top: 3px; }
.ready-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ready-item { font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) 26px; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--text); transition: border-color .3s, background .3s, transform .25s var(--ease-out); }
.ready-item:hover { transform: translateY(-2px); border-color: #DCDCE0; }
.ri-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--paper-2); color: var(--text-mute); transition: background .3s, color .3s; }
.ri-ic svg { width: 20px; height: 20px; }
.ri-txt b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.ri-txt span { display: block; font-size: 14.5px; color: var(--text-mute); line-height: 1.4; margin-top: 2px; }
.ri-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: transparent; transition: background .3s, border-color .3s, color .3s, transform .4s var(--ease-pop); transform: scale(.9); }
.ri-check svg { width: 14px; height: 14px; }
.ready-item.is-done { border-color: #CDEBD8; background: linear-gradient(90deg, #F3FBF6, #fff); }
.ready-item.is-done .ri-ic { background: var(--wash-violet); color: var(--brand-3); }
.ready-item.is-done .ri-check { background: #16A34A; border-color: #16A34A; color: #fff; transform: scale(1); }
.ready-banner { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
@media (max-width: 680px) { .ready-grid { grid-template-columns: 1fr; } .ready-top { flex-direction: column-reverse; align-items: flex-start; } }

/* ---------- TSUA pipeline ---------- */
.pipe { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.pipe-step { --c: var(--brand-3); --w: var(--wash-violet); position: relative; min-height: 200px; padding: 40px 22px 18px 28px; background: var(--w); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; transition: opacity .5s, transform .6s var(--ease-pop); transition-delay: calc(var(--i, 0) * 150ms); }
.pipe-step:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 16px; }
.pipe-step.c2 { --c: #B84FC9; --w: #FBEFFA; }
.pipe-step.c3 { --c: #EA580C; --w: #FFF2E8; }
.pipe-step.c4 { --c: #2F6FE0; --w: #EAF2FF; }
.pipe-step.c5 { --c: #15803D; --w: #EAF7EF; }
.pipe-num { position: absolute; top: 12px; left: 30px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--c); }
.pipe-step:first-child .pipe-num { left: 18px; }
.pipe-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c); box-shadow: 0 10px 20px -12px var(--c); flex: none; }
.pipe-ic svg { width: 23px; height: 23px; }
.pipe-txt b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.pipe-txt .d { display: block; font-size: 14px; color: var(--text-mute); line-height: 1.4; margin-top: 4px; }
.pre .pipe-step { opacity: 0; transform: translateX(-14px); }
.pipe-track { position: relative; height: 4px; margin: 14px 18px 0; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.pipe-track::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; border-radius: 4px; background: var(--grad-brand); animation: viz-run 3.2s var(--ease-out) infinite; }
@keyframes viz-run { to { left: 100%; } }
.pipe-orch { margin-top: 16px; display: grid; grid-template-columns: 46px auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: #fff; }
.pipe-orch .ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; }
.pipe-orch .ic svg { width: 22px; height: 22px; }
.pipe-orch b { font-size: 16px; font-weight: 600; }
.pipe-orch > span:not(.ic) { font-size: 14.5px; color: var(--invert-mute); border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: 14px; line-height: 1.45; }
.pipe-result { margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #EAF7EF; border: 1px solid #CDEBD8; color: #14532D; font-size: 15px; font-weight: 500; line-height: 1.45; }
.pipe-result .ic { width: 30px; height: 30px; border-radius: 50%; background: #16A34A; color: #fff; display: grid; place-items: center; flex: none; }
.pipe-result .ic svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .pipe { grid-template-columns: 1fr; gap: 8px; }
  .pipe-step, .pipe-step:first-child { clip-path: none; border-radius: 14px; min-height: 0; flex-direction: row; text-align: left; padding: 14px 16px; gap: 14px; }
  .pipe-num, .pipe-step:first-child .pipe-num { position: static; order: -1; width: 22px; }
  .pipe-track { display: none; }
  .pipe-orch { grid-template-columns: 46px minmax(0, 1fr); }
  .pipe-orch > span:not(.ic) { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
}

/* ---------- Icon grid ---------- */
.icon-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.icon-grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; font-size: 15.5px; font-weight: 500; line-height: 1.3; transition: transform .5s var(--ease-pop), opacity .4s, border-color .2s; transition-delay: calc(var(--i, 0) * 70ms); }
.icon-grid li:hover { border-color: #DCDCE0; }
.icon-grid .gi { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--wash-violet); color: var(--brand-3); }
.icon-grid .gi svg { width: 20px; height: 20px; }
.pre .icon-grid li { opacity: 0; transform: translateY(14px) scale(.96); }
@media (max-width: 680px) { .icon-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Pillars, areas, pull quote, takeaway ---------- */
.pillars3 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px !important; }
.pillar3 { position: relative; overflow: hidden; padding: 22px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: transform .5s var(--ease-pop), opacity .4s; transition-delay: calc(var(--i, 0) * 120ms); }
.pillar3::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad-brand); }
.pillar3 .pi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--wash-violet); color: var(--brand-3); margin-bottom: 14px; }
.pillar3 .pi svg { width: 22px; height: 22px; }
.pillar3 b { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--brand-3); }
.pillar3 span { display: block; font-size: 16px; color: var(--text-mute); margin-top: 6px; line-height: 1.5; }
.pillars3.pre .pillar3 { opacity: 0; transform: translateY(16px); }
@media (max-width: 640px) { .pillars3 { grid-template-columns: 1fr; } }

.prose blockquote.pull { margin: 40px 0 0 !important; padding: 30px 32px 30px 92px; border: 0; border-radius: 22px; background: var(--paper-2); position: relative; font-size: clamp(20px, 2vw, 25px); line-height: 1.45; font-weight: 500; color: var(--text); }
.pull::before { content: '\201C'; position: absolute; left: 22px; top: 8px; font-size: 100px; line-height: 1; font-weight: 700; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 560px) { .prose blockquote.pull { padding: 58px 22px 24px; } .pull::before { top: 2px; left: 18px; font-size: 80px; } }

.area3 { display: grid; gap: 12px; margin-top: 18px !important; }
.area3 .ac { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: transform .5s var(--ease-pop), opacity .4s, border-color .25s; transition-delay: calc(var(--i, 0) * 120ms); }
.area3 .ac:hover { border-color: #DCDCE0; }
.area3 .ai { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; box-shadow: 0 12px 24px -14px rgba(17, 17, 20, 0.6); }
.area3 .ai svg { width: 24px; height: 24px; }
.area3 .ac b { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.area3 .ac p { font-size: 16.5px; line-height: 1.65; color: var(--text-mute); margin-top: 4px; }
.area3 .req { display: inline-flex; margin-top: 12px; font-size: 13.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--ink); color: #fff; }
.area3.pre .ac { opacity: 0; transform: translateY(14px); }
@media (max-width: 560px) { .area3 .ac { grid-template-columns: 1fr; } }

.takeaway { margin-top: 32px !important; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--grad-glow); color: #fff; }
.takeaway .viz-kicker { color: var(--violet-soft); }
.prose .takeaway ol, .takeaway ol { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: tk; }
.takeaway li { counter-increment: tk; padding-top: 14px; border-top: 2px solid rgba(255, 255, 255, 0.18); font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; line-height: 1.35; color: #fff; transition: transform .5s var(--ease-pop), opacity .4s; transition-delay: calc(var(--i, 0) * 160ms); }
.takeaway li::before { content: counter(tk, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--violet-soft); margin-bottom: 6px; }
.takeaway.pre li { opacity: 0; transform: translateY(12px); }
@media (max-width: 640px) { .takeaway ol { grid-template-columns: 1fr; } }

/* ---------- Callouts ---------- */
.alert { position: relative; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; margin-top: 28px !important; padding: 22px 24px 22px 26px; border-radius: 18px; background: linear-gradient(135deg, #FFF5EC, #fff 72%); border: 1px solid #FFD8BD; }
.alert::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--brand-1), var(--brand-2)); }
.alert .al-ic { position: relative; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); box-shadow: 0 12px 24px -12px rgba(249, 115, 22, 0.6); }
.alert .al-ic svg { width: 26px; height: 26px; }
.alert .al-ic::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid rgba(249, 115, 22, 0.35); animation: viz-ping 2.4s ease-out infinite; }
@keyframes viz-ping { from { opacity: 1; transform: scale(.92); } to { opacity: 0; transform: scale(1.22); } }
.alert .al-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert .al-title { font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.3; }
.alert .al-pill { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #FFE4CF; color: #9A3412; }
.alert p { font-size: 16.5px; line-height: 1.65; color: var(--text-mute); margin-top: 6px !important; }
.alert.info, .alert.tip { background: linear-gradient(135deg, var(--wash-violet), #fff 72%); border-color: #E0D5FF; }
.alert.info::before, .alert.tip::before { background: var(--grad-brand); }
.alert.info .al-ic, .alert.tip .al-ic { background: var(--grad-brand); box-shadow: 0 12px 24px -12px rgba(17, 17, 20, 0.6); }
.alert.info .al-ic::after, .alert.tip .al-ic::after { display: none; }
.alert.info .al-pill, .alert.tip .al-pill { background: #E6DCFF; color: #4C1D95; }
@media (max-width: 560px) { .alert { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- OCI: service cards ---------- */
.svc3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px !important; }
.svc3 .sc { position: relative; overflow: hidden; padding: 22px 20px 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: transform .5s var(--ease-pop), opacity .4s, box-shadow .25s, border-color .25s; transition-delay: calc(var(--i, 0) * 120ms); }
.svc3 .sc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-brand); }
.svc3 .sc:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -28px rgba(17, 17, 20, 0.35); border-color: #DCDCE0; }
.sc-k { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-3); }
.sc-name { font-size: 17px; font-weight: 600; line-height: 1.3; margin-top: 6px !important; min-height: 2.6em; color: var(--text); }
.sc-vers { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.sc-vers span { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; }
.sc-vers span.off { background: var(--paper-2); color: var(--text-faint); text-decoration: line-through; }
.sc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sc-badges span, .st { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #EAF7EF; color: #166534; }
.sc-badges span::before, .st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sc-badges span.warn, .st.warn { background: #FFF1E6; color: #9A3412; }
.sc-note { font-size: 14px; color: var(--text-mute); margin-top: 12px !important; line-height: 1.5; }
.svc3.pre .sc { opacity: 0; transform: translateY(16px); }
@media (max-width: 700px) { .svc3 { grid-template-columns: 1fr; } .sc-name { min-height: 0; } }

/* ---------- OCI: retirement alert ---------- */
.retire { position: relative; overflow: hidden; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 24px; margin-top: 32px !important; padding: 26px; border-radius: 24px; background: linear-gradient(135deg, #1C1222 0%, #0B0B12 62%); color: var(--invert); border: 1px solid rgba(249, 115, 22, 0.25); }
.retire::after { content: ''; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 115, 22, 0.32), transparent); pointer-events: none; }
.rt-date { align-self: start; text-align: center; border-radius: 18px; background: linear-gradient(160deg, var(--brand-1), var(--brand-2)); padding: 14px 10px; color: #fff; box-shadow: 0 18px 32px -16px rgba(249, 115, 22, 0.7); transition: transform .6s var(--ease-pop), opacity .4s; }
.rt-date span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: .9; }
.rt-date b { display: block; font-size: 48px; font-weight: 700; line-height: 1; margin-top: 4px; }
.rt-date em { display: block; font-style: normal; font-size: 15px; font-weight: 600; margin-top: 2px; }
.rt-body { position: relative; z-index: 1; }
.rt-pill { display: inline-flex; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(249, 115, 22, 0.16); color: #FDBA74; }
.retire .rt-title { font-size: clamp(20px, 2vw, 24px); font-weight: 600; color: #fff; margin-top: 10px !important; line-height: 1.25; }
.retire .rt-text { font-size: 16px; line-height: 1.65; color: var(--invert-mute); margin-top: 8px !important; }
.rt-line { list-style: none; padding: 0; margin: 22px 0 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; }
.rt-line::before { content: ''; position: absolute; top: 7px; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, #16A34A, var(--brand-1) 50%, rgba(255, 255, 255, 0.2)); }
.rt-line li { position: relative; padding-top: 28px; font-size: 14.5px; transition: transform .5s var(--ease-pop), opacity .4s; transition-delay: calc(var(--i, 0) * 180ms + 200ms); }
.rt-line li::before { content: ''; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px #141416; }
.rt-line li.mark::before { background: var(--brand-1); animation: viz-dot 2s ease-out infinite; }
.rt-line li.later::before { background: #4A4256; }
@keyframes viz-dot { from { box-shadow: 0 0 0 4px #141416, 0 0 0 4px rgba(249, 115, 22, 0.6); } to { box-shadow: 0 0 0 4px #141416, 0 0 0 16px rgba(249, 115, 22, 0); } }
.rt-line b { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.rt-line span { display: block; color: var(--invert-mute); margin-top: 2px; line-height: 1.4; }
.retire.pre .rt-date { opacity: 0; transform: scale(.88); }
.retire.pre .rt-line li { opacity: 0; transform: translateY(10px); }
@media (max-width: 640px) {
  .retire { grid-template-columns: 1fr; padding: 22px; }
  .rt-date { justify-self: start; display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; }
  .rt-date b { font-size: 32px; margin: 0; }
  .rt-line { grid-template-columns: 1fr; }
  .rt-line::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, #16A34A, var(--brand-1) 50%, rgba(255, 255, 255, 0.2)); }
  .rt-line li { padding: 0 0 0 30px; }
}

/* ---------- OCI: matrices ---------- */
.prose .mtx { border-radius: 18px; box-shadow: 0 24px 48px -40px rgba(17, 17, 20, 0.4); margin-top: 22px !important; }
.mtx table { font-size: 15px; }
.mtx thead th { background: var(--ink); color: #fff; border-bottom: 0; font-weight: 600; font-size: 14.5px; }
.mtx tbody tr:nth-child(even) td { background: #FAFAFD; }
.mtx tbody tr:hover td { background: #F5F0FF; }
.mtx th:first-child, .mtx td:first-child { position: sticky; left: 0; z-index: 1; }
.mtx td:first-child { background: #fff; box-shadow: 1px 0 0 var(--line); }
.mtx th:first-child { z-index: 2; }
.mtx td.yes, .mtx td.no { white-space: nowrap; }
.mtx td.yes { color: #166534 !important; font-weight: 600; }
.mtx td.no { color: var(--text-faint) !important; }
.mtx td.yes::before, .mtx td.no::before, .mtx-legend .lg::before { content: ''; display: inline-block; vertical-align: -6px; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mtx td.no::before, .mtx-legend .lg.no::before { background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8C9D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.mtx-legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 14.5px; color: var(--text-mute); margin-top: 12px !important; }
.mtx-legend .lg::before { width: 20px; height: 20px; vertical-align: -5px; }
.mtx-hint { display: none; }
@media (max-width: 760px) { .mtx-hint { display: inline; font-size: 13.5px; color: var(--text-faint); } }

/* ---------- OCI: RAC status cards ---------- */
.rac3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px !important; }
.rac3 .rc { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; transition: transform .5s var(--ease-pop), opacity .4s; transition-delay: calc(var(--i, 0) * 120ms); }
.rc-top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rc-top b { font-size: 20px; font-weight: 700; }
.st { font-size: 13px; font-weight: 600; }
.rac3 .rc p { font-size: 15.5px; line-height: 1.6; color: var(--text-mute); margin-top: 12px !important; }
.rac3.pre .rc { opacity: 0; transform: translateY(16px); }
@media (max-width: 700px) { .rac3 { grid-template-columns: 1fr; } }

/* ---------- OCI: decision guide ---------- */
.guide-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-chip { font: inherit; font-size: 15px; font-weight: 500; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.guide-chip:hover { border-color: #CFCFDE; }
.guide-chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.guide-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.gs { position: relative; padding: 16px 44px 16px 16px; border-radius: 16px; border: 2px solid var(--line); background: #fff; transition: border-color .35s, box-shadow .35s, opacity .35s, filter .35s, background .35s; }
.gs b { display: block; font-size: 17px; font-weight: 700; }
.gs > span { display: block; font-size: 14px; color: var(--text-mute); margin-top: 2px; line-height: 1.35; }
.gs .fit-tag { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; opacity: 0; transform: scale(.5); transition: opacity .35s, transform .45s var(--ease-pop); }
.gs .warn-tag { display: none; margin-top: 10px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #FFF1E6; color: #9A3412; width: fit-content; }
.gs.fit { border-color: var(--brand-3); box-shadow: 0 18px 36px -24px rgba(17, 17, 20, 0.55); background: linear-gradient(180deg, var(--wash-violet), #fff); }
.gs.fit .fit-tag { opacity: 1; transform: scale(1); }
.gs.dim { opacity: .45; filter: grayscale(.4); }
.gs.warn .warn-tag { display: inline-block; }
.guide-why { margin-top: 14px; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: #fff; }
.guide-why .lbl { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-soft); }
.guide-why .gw-req { display: block; font-size: 14.5px; color: var(--invert-faint); margin-top: 6px; }
.guide-why .gw-fit { display: block; font-size: 20px; font-weight: 600; margin-top: 2px; }
.guide-why .gw-why { font-size: 16px; color: var(--invert-mute); margin-top: 6px !important; line-height: 1.6; }
.guide-why.swap { animation: viz-in .45s var(--ease-pop); }
@keyframes viz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.guide details { margin-top: 16px; }
.guide summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--brand-3); }
.guide details .table-wrap { margin-top: 12px; }
@media (max-width: 640px) { .guide-svcs { grid-template-columns: 1fr; } }

/* ---------- Numbered takeaways ---------- */
.num-list { list-style: none; padding: 0; margin: 18px 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; counter-reset: nl; }
.num-list li { counter-increment: nl; position: relative; padding: 20px 20px 20px 74px; border-radius: 18px; border: 1px solid var(--line); background: #fff; font-size: 16.5px; line-height: 1.55; color: var(--text); transition: transform .5s var(--ease-pop), opacity .4s, border-color .25s; transition-delay: calc(var(--i, 0) * 90ms); }
.num-list li:hover { border-color: #DCDCE0; }
.num-list li::before { content: counter(nl, decimal-leading-zero); position: absolute; left: 20px; top: 17px; font-size: 28px; font-weight: 700; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num-list.pre li { opacity: 0; transform: translateY(14px); }
@media (max-width: 640px) { .num-list { grid-template-columns: 1fr; } }

/* ---------- Reduced motion: final state, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow-bar, .pipe-track::after, .alert .al-ic::after, .rt-line li.mark::before, .stack-grid.flip .sp-ver, .guide-why.swap { animation: none !important; }
  .viz *, .pillars3 *, .takeaway *, .svc3 *, .rac3 *, .num-list *, .retire *, .area3 * { transition: none !important; }
}

@media (max-width: 680px) { .sp-row { min-height: 0; } .stack-panel .sp-head { min-height: 0; } }
.st, .sc-badges span { border-radius: 10px; line-height: 1.35; align-items: baseline; }
.st::before, .sc-badges span::before { flex: none; transform: translateY(-2px); }

/* Monochrome overrides: violet only on primary buttons */
.blog-post, .prose { --brand-3: #111114; --brand-2: #111114; --violet: #111114; --violet-soft: #C9CAD0; --wash-violet: #F5F5F6; --grad-brand: #111114; --grad-glow: #1C1C20; }
.blog-post .grad, .prose .grad { background: none !important; -webkit-text-fill-color: currentColor !important; }