/* Visual-story kit for the case studies. Loaded after the page's own styles. */
:root { --vs-a: #2563EB; --vs-on: #fff; --vs-at: #1D4ED8; --vs-a2: #93C5FD; --vs-ease: cubic-bezier(.2,.85,.2,1); }
[data-theme="dark"] { --vs-at: var(--vs-a2); }
.vs-body { max-width: 1240px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.vs-sec { padding: 4.5rem 0 0; scroll-margin-top: 110px; }
.vs-sec .cs-sh { padding: 0 0 1.75rem; }
.vs-sec .cs-sh-row, .vs-sec .cs-sh-row span { color: var(--vs-at); }
.vs-note { font-family: var(--font-mono); font-size: .75rem; color: var(--text-secondary); margin: 1rem 0 0; }
.vs-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 5px 12px; }
.vs-chip b { color: var(--vs-at); font-weight: 700; }

/* reveal */
.vs-rv { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--vs-ease), transform .65s var(--vs-ease); }
.vs-rv.in { opacity: 1; transform: none; }
.vs-rv.in .vs-st { opacity: 1; transform: none; }
.vs-st { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--vs-ease), transform .55s var(--vs-ease); transition-delay: calc(var(--i, 0) * 110ms + 120ms); }

/* at a glance */
.vs-glance { display: grid; gap: 22px; }
.vs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--border-subtle); }
.vs-stat { padding: 24px 16px 24px 0; display: flex; flex-direction: column; gap: 6px; }
.vs-stat b { font-family: var(--font-sans); font-weight: 500; letter-spacing: -.04em; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; color: var(--text-primary); }
.vs-stat b small { font-size: .5em; letter-spacing: 0; margin-left: 4px; color: var(--vs-at); font-weight: 600; }
.vs-stat span { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); line-height: 1.4; }
.vs-story { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.vs-sc { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vs-sc i { font-style: normal; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-at); font-weight: 700; }
.vs-sc p { margin: 0; font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; color: var(--text-primary); }
.vs-sc.end { background: var(--vs-a); border-color: var(--vs-a); }
.vs-sc.end i, .vs-sc.end p { color: var(--vs-on); }
.vs-arr { width: 44px; position: relative; align-self: center; height: 3px; background: repeating-linear-gradient(to right, var(--text-secondary) 0 6px, transparent 6px 11px); background-size: 11px 3px; animation: vs-dash 1s linear infinite; }
.vs-arr::after { content: ""; position: absolute; right: -2px; top: -4px; width: 9px; height: 9px; border-top: 3px solid var(--text-secondary); border-right: 3px solid var(--text-secondary); transform: rotate(45deg); }
@keyframes vs-dash { to { background-position: 11px 0; } }

/* browser and phone frames */
.vs-browser { margin: 0; border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden; background: var(--bg-surface); box-shadow: 0 22px 44px -24px rgba(0,0,0,.35); display: flex; flex-direction: column; min-width: 0; }
.vs-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-surface-subtle); border-bottom: 1px solid var(--border-subtle); }
.vs-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.vs-bar span { margin-left: 8px; flex: 1; font-family: var(--font-mono); font-size: .68rem; color: var(--text-secondary); background: var(--bg-surface); border-radius: 999px; padding: 3px 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vs-screen { position: relative; overflow: hidden; background: #fff; }
.vs-screen img, .vs-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vs-cap { font-family: var(--font-mono); font-size: .7rem; color: var(--text-secondary); padding: 10px 14px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
.vs-phone { margin: 0; border: 7px solid #121212; border-radius: 34px; overflow: hidden; background: #121212; box-shadow: 0 22px 44px -24px rgba(0,0,0,.45); max-width: 270px; justify-self: center; align-self: start; }
.vs-phone img { display: block; width: 100%; height: auto; }
.vs-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: start; }
.vs-bento > * { min-width: 0; }
.vs-c4 { grid-column: span 4; } .vs-c3 { grid-column: span 3; } .vs-c2 { grid-column: span 2; } .vs-c6 { grid-column: span 6; }
.vs-ar169 .vs-screen { aspect-ratio: 16 / 9; } .vs-ar43 .vs-screen { aspect-ratio: 4 / 3; } .vs-ar1 .vs-screen { aspect-ratio: 1 / 1; }
.vs-play { cursor: default; }

/* before / after ladder */
.vs-ladder { display: grid; gap: 12px; }
.vs-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px minmax(0, 1fr); gap: 0 14px; align-items: stretch; }
.vs-row .l { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; }
.vs-cell { border-radius: var(--radius-md); padding: 14px 16px; font-size: .95rem; line-height: 1.4; min-width: 0; }
.vs-cell.b { background: var(--bg-surface-subtle); color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.vs-cell.a { background: var(--vs-a); color: var(--vs-on); font-weight: 500; }
.vs-cell small { display: block; font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-bottom: 4px; }
.vs-row .vs-arr { width: 100%; }
.vs-head { display: grid; grid-template-columns: 130px minmax(0, 1fr) 52px minmax(0, 1fr); gap: 0 14px; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); padding-bottom: 4px; }
.vs-head span:nth-child(2) { grid-column: 2; } .vs-head span:nth-child(3) { grid-column: 4; color: var(--vs-at); font-weight: 700; }

/* pull quote */
.vs-quote { margin: 2.5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; max-width: 980px; }
.vs-quote::before { content: "\201C"; font-family: var(--font-serif); font-size: 6rem; line-height: .7; color: var(--vs-at); }
.vs-quote p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.22; color: var(--text-primary); }
.vs-quote small { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: .72rem; font-style: normal; color: var(--text-secondary); letter-spacing: .04em; }

/* duel: rejected vs selected */
.vs-duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 18px; margin-top: 1.5rem; align-items: stretch; }
.vs-opt { border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.vs-opt .t { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.vs-opt .t i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8rem; }
.vs-opt h3 { margin: 0; font-family: var(--font-sans); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.vs-opt p { margin: 0; font-size: .95rem; line-height: 1.5; }
.vs-opt.no { background: var(--bg-surface-subtle); border: 1px dashed var(--border-strong); opacity: .92; }
.vs-opt.no h3 { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-secondary) 60%, transparent); text-decoration-thickness: 2px; color: var(--text-secondary); }
.vs-opt.no p { color: var(--text-secondary); }
.vs-opt.no .t { color: var(--text-secondary); } .vs-opt.no .t i { background: var(--border-strong); color: var(--text-primary); }
.vs-opt.yes { background: var(--vs-a); color: var(--vs-on); box-shadow: 0 24px 50px -26px var(--vs-a); }
.vs-opt.yes .t i { background: var(--vs-on); color: var(--vs-a); }
.vs-rv .vs-opt.yes { transform: scale(.96); transition: transform .7s var(--vs-ease) .25s; } .vs-rv.in .vs-opt.yes { transform: scale(1); }

/* numbered principles */
.vs-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.vs-steps li { position: relative; padding: 18px 20px 0 0; }
.vs-steps li::before { counter-increment: s; content: counter(s); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--vs-a); color: var(--vs-on); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; margin-bottom: 12px; position: relative; z-index: 1; }
.vs-steps li::after { content: ""; position: absolute; left: 40px; right: 8px; top: 34px; height: 3px; background: repeating-linear-gradient(to right, var(--border-strong) 0 6px, transparent 6px 11px); }
.vs-steps li:last-child::after { display: none; }
.vs-steps b { display: block; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.vs-steps span { display: block; margin-top: 4px; font-size: .9rem; color: var(--text-secondary); line-height: 1.45; }

/* tree / sitemap */
.vs-tree { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: center; }
.vs-root { background: var(--vs-a); color: var(--vs-on); border-radius: var(--radius-lg); padding: 16px 22px; font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; position: relative; }
.vs-root::after { content: ""; position: absolute; left: 100%; top: 50%; width: 28px; border-top: 3px dashed var(--border-strong); }
.vs-branches { display: grid; gap: 10px; position: relative; padding-left: 0; }
.vs-branches::before { content: ""; position: absolute; left: -14px; top: 22px; bottom: 22px; border-left: 3px dashed var(--border-strong); }
.vs-br { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.vs-br::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; border-top: 3px dashed var(--border-strong); }
.vs-node { border: 1.5px solid var(--vs-at); color: var(--vs-at); border-radius: 10px; padding: 6px 14px; font-family: var(--font-sans); font-weight: 600; font-size: .92rem; background: var(--bg-surface); }
.vs-leaf { border-radius: 999px; padding: 5px 12px; font-size: .82rem; background: var(--bg-surface-subtle); color: var(--text-secondary); }
.vs-sep { width: 14px; border-top: 3px dashed var(--border-strong); }

/* generic diagram frame */
.vs-diagram { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-xl); padding: clamp(18px, 3vw, 32px); margin-top: 1.5rem; }
.vs-dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 18px; }

/* outcome tiles */
.vs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vs-tile { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-lg); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.vs-tile s { text-decoration: none; color: var(--text-secondary); font-size: .95rem; line-height: 1.3; }
.vs-tile b { font-family: var(--font-sans); font-weight: 600; font-size: 1.08rem; line-height: 1.25; color: var(--text-primary); letter-spacing: -.01em; }
.vs-tile small { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .7rem; color: var(--text-secondary); margin-top: -4px; }
.vs-tile .vs-arr { width: 34px; }
.vs-claim { margin-top: 1.5rem; border-left: 4px solid var(--vs-at); background: var(--bg-surface-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 16px 20px; max-width: 900px; font-size: .92rem; line-height: 1.6; color: var(--text-body); }
.vs-claim strong { color: var(--text-primary); }
.vs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 1.5rem; }
.vs-card { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-lg); padding: 18px 20px; }
.vs-card b { display: block; font-family: var(--font-sans); font-size: 1.02rem; color: var(--text-primary); margin-bottom: 4px; }
.vs-card p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }

/* ---------- project diagrams ---------- */
/* suite (Ribaso) */
.vs-suite { display: grid; grid-template-columns: 1fr 1.25fr 1fr; grid-template-rows: auto auto; gap: 16px 18px; align-items: stretch; }
.vs-prod { border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.vs-prod b { font-family: var(--font-sans); font-size: 1.1rem; color: var(--text-primary); }
.vs-prod span { font-size: .88rem; color: var(--text-secondary); line-height: 1.4; }
.vs-prod em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-at); font-weight: 700; }
.vs-prod.core { background: var(--vs-a); color: var(--vs-on); border-color: var(--vs-a); grid-row: 1; grid-column: 2; box-shadow: 0 0 0 0 var(--vs-a); animation: vs-pulse 3.2s ease-out infinite; }
.vs-prod.core b, .vs-prod.core span, .vs-prod.core em { color: var(--vs-on); }
@keyframes vs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vs-a) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 18px transparent; } }
.vs-prod.s1 { grid-row: 1; grid-column: 1; } .vs-prod.s2 { grid-row: 2; grid-column: 1; } .vs-prod.s3 { grid-row: 1; grid-column: 3; }
.vs-base { grid-row: 2; grid-column: 2 / 4; border: 2px dashed var(--vs-at); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px; }
.vs-base span { font-family: var(--font-mono); font-size: .75rem; color: var(--vs-at); font-weight: 600; background: var(--bg-surface-subtle); border-radius: 999px; padding: 6px 14px; }
.vs-base small { width: 100%; text-align: center; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
/* fan-out (Ribaso) */
.vs-fan { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto minmax(60px, 1fr) auto; align-items: center; gap: 0 4px; }
.vs-fbox { border-radius: var(--radius-lg); padding: 16px 20px; background: var(--vs-a); color: var(--vs-on); font-family: var(--font-sans); font-weight: 600; text-align: center; line-height: 1.3; }
.vs-fbox small { display: block; font-family: var(--font-mono); font-size: .62rem; font-weight: 500; opacity: .9; letter-spacing: .06em; margin-top: 4px; }
.vs-ins { display: grid; gap: 10px; }
.vs-in { border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: 12px; padding: 10px 16px; font-family: var(--font-mono); font-size: .75rem; color: var(--text-primary); display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.vs-in em { font-style: normal; color: var(--text-secondary); font-size: .66rem; }
.vs-wire { position: relative; height: 100%; min-height: 150px; }
.vs-wire i { position: absolute; left: 0; right: 0; height: 0; border-top: 3px dashed var(--border-strong); }
.vs-wire i:nth-child(1) { top: 18%; } .vs-wire i:nth-child(2) { top: 50%; } .vs-wire i:nth-child(3) { top: 82%; }
.vs-wire u { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--vs-a); left: 0; opacity: 0; }
.in .vs-wire u { animation: vs-travel 2.6s var(--vs-ease) infinite; }
.vs-wire u:nth-of-type(1) { top: calc(18% - 4px); } .vs-wire u:nth-of-type(2) { top: calc(50% - 4px); animation-delay: .25s; } .vs-wire u:nth-of-type(3) { top: calc(82% - 4px); animation-delay: .5s; }
@keyframes vs-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.vs-cmp { display: grid; gap: 9px; min-width: 170px; }
.vs-cmp b { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.vs-bar2 { height: 10px; border-radius: 99px; background: var(--bg-surface-subtle); overflow: hidden; }
.vs-bar2 i { display: block; height: 100%; width: 0; background: var(--vs-a); border-radius: 99px; transition: width 1.4s var(--vs-ease) .6s; }
.vs-bar2:nth-of-type(2) i { background: var(--vs-a2); }
.in .vs-bar2 i { width: var(--w); }
.vs-chase { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); }
.vs-chase span { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; background: var(--bg-surface-subtle); }
.vs-chase span:first-child::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--vs-a); animation: vs-blink 1.2s ease-in-out infinite; }
@keyframes vs-blink { 50% { opacity: .25; } }
/* funnel (igus) */
.vs-funnel { display: grid; gap: 10px; justify-items: center; }
.vs-fn { border-radius: 14px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--vs-a); color: var(--vs-on); width: var(--w); min-width: 280px; max-width: 100%; opacity: 0; transform: scaleX(.6); transition: opacity .5s var(--vs-ease), transform .8s var(--vs-ease); transition-delay: calc(var(--i) * 220ms + 150ms); }
.in .vs-fn { opacity: 1; transform: none; }
.vs-fn b { font-family: var(--font-sans); font-size: 1rem; }
.vs-fn span { font-family: var(--font-mono); font-size: .68rem; opacity: .95; display: flex; gap: 6px; flex-wrap: wrap; }
.vs-fn span em { font-style: normal; background: rgba(0,0,0,.18); border-radius: 99px; padding: 3px 10px; }
.vs-fn.f0 { background: var(--bg-surface-subtle); color: var(--text-primary); border: 1px dashed var(--border-strong); } .vs-fn.f0 span em { background: var(--border-subtle); }
.vs-fn.f4 { background: var(--text-primary); color: var(--bg-main); } .vs-fn.f4 span em { background: rgba(255,255,255,.2); }
.vs-think { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.vs-think div { border-radius: var(--radius-md); background: var(--bg-surface-subtle); padding: 14px 16px; }
.vs-think b { font-family: var(--font-sans); font-size: .98rem; color: var(--text-primary); display: block; }
.vs-think span { font-family: var(--font-mono); font-size: .66rem; color: var(--text-secondary); display: block; margin-top: 4px; line-height: 1.5; }
/* purchase ladder (Vinyaara) */
.vs-stairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.vs-stair { border-radius: var(--radius-lg); padding: 18px 20px; border: 1px solid var(--border-strong); background: var(--bg-surface); display: flex; flex-direction: column; gap: 4px; }
.vs-stair b { font-family: var(--font-sans); font-size: 1.15rem; color: var(--text-primary); }
.vs-stair span { font-size: .88rem; color: var(--text-secondary); line-height: 1.4; }
.vs-stair em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-at); font-weight: 700; }
.vs-stair.s1 { min-height: 150px; background: var(--vs-a); color: var(--vs-on); border-color: var(--vs-a); }
.vs-stair.s1 b, .vs-stair.s1 span, .vs-stair.s1 em { color: var(--vs-on); }
.vs-stair.s2 { min-height: 190px; } .vs-stair.s3 { min-height: 230px; }
.vs-stair { transform-origin: bottom; transform: scaleY(.8); opacity: 0; transition: transform .8s var(--vs-ease), opacity .6s; transition-delay: calc(var(--i) * 180ms + 150ms); }
.in .vs-stair { transform: none; opacity: 1; }
/* loop (Ishaani) */
.vs-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: l; }
.vs-loop li { list-style: none; position: relative; padding: 0 18px 0 0; }
.vs-loop li div { border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: var(--radius-md); padding: 14px 16px; font-family: var(--font-sans); font-size: .95rem; color: var(--text-primary); line-height: 1.3; height: 100%; }
.vs-loop li:not(:last-child)::after { content: ""; position: absolute; right: 2px; top: 50%; width: 14px; border-top: 3px dashed var(--vs-at); }
.vs-loopback { height: 34px; margin: 0 8% 0 8%; border: 3px dashed var(--vs-at); border-top: 0; border-radius: 0 0 24px 24px; position: relative; }
.vs-loopback::after { content: "again and again"; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); font-family: var(--font-mono); font-size: .66rem; background: var(--bg-surface); padding: 0 10px; color: var(--vs-at); font-weight: 700; }
.vs-loops { list-style: none; margin: 0; padding: 0; }
.vs-axes { display: grid; grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: 0; align-items: center; }
.vs-ppl, .vs-ax { display: grid; gap: 12px; }
.vs-ppl div, .vs-ax div { border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; }
.vs-ppl div { border: 1px solid var(--border-strong); background: var(--bg-surface); }
.vs-ppl b, .vs-ax b { display: block; font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary); }
.vs-ppl span { font-family: var(--font-mono); font-size: .7rem; color: var(--text-secondary); }
.vs-ax div { background: var(--vs-a); color: var(--vs-on); } .vs-ax b { color: var(--vs-on); }
.vs-ax span { font-size: .8rem; opacity: .95; }
.vs-axm { display: grid; gap: 12px; justify-items: center; }
.vs-axm i { display: block; width: 100%; border-top: 3px dashed var(--border-strong); height: 0; margin: 28px 0; }
/* lanes (Gloss) */
.vs-lanes { position: relative; height: 330px; max-width: 640px; margin-inline: auto; }
.vs-blk { position: absolute; width: 38%; height: 44px; border-radius: 10px; display: flex; align-items: center; padding: 0 14px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; transition: transform 1.1s var(--vs-ease), left 1.1s var(--vs-ease), top 1.1s var(--vs-ease); transition-delay: calc(var(--i) * 120ms + 500ms); left: 31%; top: calc(var(--y0) * 1px); }
.vs-blk.r { background: var(--vs-a); color: var(--vs-on); } .vs-blk.g { background: #C9A24B; color: #1a1406; }
.in .vs-blk { left: var(--x1); top: calc(var(--y1) * 1px); }
.vs-lane-h { position: absolute; top: -34px; width: 38%; text-align: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); opacity: 0; transition: opacity .6s 1.6s; }
.in .vs-lane-h { opacity: 1; }
.vs-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vs-optc { border-radius: var(--radius-lg); border: 1px dashed var(--border-strong); background: var(--bg-surface-subtle); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.vs-optc.sel { background: var(--vs-a); border: 1px solid var(--vs-a); color: var(--vs-on); }
.vs-optc b { font-family: var(--font-sans); font-size: 1rem; line-height: 1.25; } .vs-optc.sel b, .vs-optc.sel small { color: var(--vs-on); }
.vs-optc small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.vs-mini { height: 86px; display: grid; gap: 6px; align-content: center; }
.vs-mini i { display: block; height: 14px; border-radius: 5px; background: var(--border-strong); }
.vs-optc.sel .vs-mini i { background: rgba(255,255,255,.55); }
.vs-mini.two { grid-template-columns: 1fr 1fr; gap: 10px; } .vs-mini.two i { height: 70px; }
.vs-mini.shell { grid-template-rows: 16px 1fr; } .vs-mini.shell > i:first-child { height: 16px; }
.vs-mini.shell > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vs-mini.shell > div i { height: 54px; }
.vs-jr { display: grid; gap: 22px; }
.vs-jrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.vs-jrow > b { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-primary); }
.vs-jsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.vs-jsteps span { position: relative; margin-right: 18px; border-radius: 12px; padding: 12px 14px; background: var(--bg-surface-subtle); font-size: .9rem; color: var(--text-primary); line-height: 1.3; }
.vs-jsteps span:last-child { background: var(--vs-a); color: var(--vs-on); margin-right: 0; }
.vs-jsteps span:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 18px; border-top: 3px dashed var(--vs-at); }
.vs-find { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 1.5rem; }
/* split entry (nutri) */
.vs-split { display: grid; grid-template-columns: auto minmax(40px, 1fr) minmax(0, 1.4fr); align-items: center; gap: 0 8px; }
.vs-entry { border-radius: var(--radius-lg); padding: 18px 22px; background: var(--text-primary); color: var(--bg-main); font-family: var(--font-sans); font-weight: 600; text-align: center; }
.vs-paths { display: grid; gap: 14px; }
.vs-path { border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--bg-surface); padding: 14px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vs-path b { font-family: var(--font-sans); font-size: 1.02rem; color: var(--text-primary); min-width: 150px; }
.vs-path .vs-leaf { background: var(--vs-a); color: var(--vs-on); }
.vs-fork { position: relative; align-self: stretch; }
.vs-fork::before, .vs-fork::after { content: ""; position: absolute; left: 0; right: 0; border-top: 3px dashed var(--border-strong); }
.vs-fork::before { top: 25%; } .vs-fork::after { top: 75%; }
.vs-fork u { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--vs-a); opacity: 0; left: 0; }
.in .vs-fork u { animation: vs-travel 2.4s var(--vs-ease) infinite; } .vs-fork u:nth-of-type(1) { top: calc(25% - 4px); } .vs-fork u:nth-of-type(2) { top: calc(75% - 4px); animation-delay: .4s; }
.vs-flow5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; }
.vs-flow5 div { position: relative; padding: 0 16px 0 0; }
.vs-flow5 div span { display: block; border-radius: var(--radius-md); background: var(--bg-surface-subtle); padding: 14px 14px; font-size: .9rem; color: var(--text-primary); line-height: 1.3; height: 100%; }
.vs-flow5 div:last-child span { background: var(--vs-a); color: var(--vs-on); }
.vs-flow5 div:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 16px; border-top: 3px dashed var(--vs-at); }
.vs-flow5 i { font-style: normal; font-family: var(--font-mono); font-size: .64rem; color: var(--text-secondary); display: block; margin-bottom: 6px; }

@media (max-width: 960px) {
  .vs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-story { grid-template-columns: 1fr; gap: 0; } .vs-story .vs-arr { width: 3px; height: 28px; margin: 0 0 0 24px; background: repeating-linear-gradient(to bottom, var(--text-secondary) 0 6px, transparent 6px 11px); animation: none; } .vs-story .vs-arr::after { right: -3px; top: auto; bottom: -2px; transform: rotate(135deg); }
  .vs-c4, .vs-c3, .vs-c2 { grid-column: span 6; } .vs-phone { max-width: 240px; }
  .vs-row, .vs-head { grid-template-columns: minmax(0, 1fr); gap: 8px; } .vs-head { display: none; } .vs-row .vs-arr { width: 3px; height: 24px; margin-left: 20px; background: repeating-linear-gradient(to bottom, var(--text-secondary) 0 6px, transparent 6px 11px); animation: none; } .vs-row .vs-arr::after { display: none; }
  .vs-duel, .vs-tiles, .vs-two, .vs-find, .vs-opts, .vs-stairs, .vs-think { grid-template-columns: minmax(0, 1fr); }
  .vs-steps { grid-template-columns: minmax(0, 1fr); } .vs-steps li::after { display: none; }
  .vs-tree { grid-template-columns: minmax(0, 1fr); gap: 18px; } .vs-root::after { display: none; } .vs-branches { margin-left: 14px; }
  .vs-suite { grid-template-columns: minmax(0, 1fr); } .vs-prod.core, .vs-prod.s1, .vs-prod.s2, .vs-prod.s3, .vs-base { grid-column: 1; grid-row: auto; } .vs-prod.core { order: -1; }
  .vs-fan { grid-template-columns: minmax(0, 1fr); gap: 14px; } .vs-wire { display: none; }
  .vs-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; } .vs-loopback { display: none; }
  .vs-axes { grid-template-columns: minmax(0, 1fr); gap: 14px; } .vs-axm { display: none; }
  .vs-jrow { grid-template-columns: minmax(0, 1fr); } .vs-jsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; } .vs-jsteps span:nth-child(2n) { margin-right: 0; } .vs-jsteps span:nth-child(2n)::after { display: none; }
  .vs-split { grid-template-columns: minmax(0, 1fr); gap: 14px; } .vs-fork { display: none; }
  .vs-flow5 { grid-template-columns: minmax(0, 1fr); gap: 10px; } .vs-flow5 div { padding: 0; } .vs-flow5 div::after { display: none; }
  .vs-tile { grid-template-columns: minmax(0, 1fr); } .vs-tile .vs-arr { width: 3px; height: 22px; background: repeating-linear-gradient(to bottom, var(--text-secondary) 0 5px, transparent 5px 9px); animation: none; } .vs-tile .vs-arr::after { display: none; }
}
@media (max-width: 640px) { .vs-body { padding-inline: 1rem; } .vs-lanes { height: 300px; } .vs-blk { font-size: .6rem; padding: 0 8px; } .vs-fn { min-width: 0; } .vs-quote::before { font-size: 4rem; } }
@media (prefers-reduced-motion: reduce) {
  .vs-rv, .vs-st, .vs-stair, .vs-fn, .vs-blk, .vs-lane-h { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vs-blk { left: var(--x1) !important; top: calc(var(--y1) * 1px) !important; }
  .vs-arr, .vs-wire u, .vs-fork u, .vs-prod.core, .vs-chase span:first-child::before { animation: none !important; } .vs-bar2 i { width: var(--w) !important; transition: none !important; }
}

.vs-flow5 div:last-child i { color: var(--vs-on); opacity: .85; }
.vs-lanes { transition: height 1s var(--vs-ease) 1.2s; }
.in .vs-lanes { height: 205px; }
@media (max-width: 640px) { .in .vs-lanes { height: 205px; } }
@media (prefers-reduced-motion: reduce) { .vs-lanes { height: 205px !important; transition: none !important; } }
.vs-opt.yes h3, .vs-opt.yes p { color: var(--vs-on); }
.vs-opt.no h3 { color: var(--text-secondary); }
.vs-sc.end p, .vs-sc.end i { color: var(--vs-on); }
.vs-cell.a, .vs-cell.a small { color: var(--vs-on); }
.vs-fn, .vs-fn b, .vs-fn span { color: var(--vs-on); } .vs-fn.f0, .vs-fn.f0 b, .vs-fn.f0 span { color: var(--text-primary); } .vs-fn.f4, .vs-fn.f4 b { color: var(--bg-main); }
.vs-stair.s1, .vs-stair.s1 b, .vs-stair.s1 span, .vs-stair.s1 em { color: var(--vs-on); }
.vs-prod.core, .vs-prod.core b, .vs-prod.core span, .vs-prod.core em, .vs-fbox, .vs-fbox small, .vs-root, .vs-ax b, .vs-ax span, .vs-optc.sel b, .vs-optc.sel small, .vs-jsteps span:last-child, .vs-flow5 div:last-child span, .vs-path .vs-leaf { color: var(--vs-on); }
.vs-ar24 .vs-screen { aspect-ratio: 5 / 2; }
.vs-lanes { margin-top: 44px; }

/* ---------- storyboard ---------- */
.sb { margin-top: .5rem; }
.sb-ch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; margin: 3.2rem 0 1.1rem; }
.sb-ch:first-child { margin-top: 1rem; }
.sb-ch .n { width: 38px; height: 38px; border-radius: 50%; background: var(--vs-a); color: var(--vs-on); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: .9rem; grid-row: span 2; }
.sb-ch h3 { margin: 0; font-family: var(--font-sans); font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; color: var(--text-primary); line-height: 1.15; }
.sb-ch p { margin: 0; font-size: .98rem; color: var(--text-secondary); line-height: 1.45; max-width: 70ch; }
.sb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sb-panel { margin: 0; border-radius: 22px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle); box-shadow: 0 18px 40px -28px rgba(0,0,0,.35); position: relative; min-width: 0; display: flex; flex-direction: column; }
.sb-w6 { grid-column: span 6; } .sb-w3 { grid-column: span 3; } .sb-w2 { grid-column: span 2; } .sb-w4 { grid-column: span 4; }
.sb-art { position: relative; line-height: 0; background: #EEF1F6; }
.sb-svg { display: block; width: 100%; height: auto; }
.sb-panel figcaption { padding: 14px 18px 16px; font-size: .92rem; line-height: 1.5; color: var(--text-secondary); }
.sb-panel figcaption b { color: var(--text-primary); font-weight: 600; display: block; font-family: var(--font-sans); font-size: 1rem; margin-bottom: 2px; }
.sb-note { position: absolute; z-index: 2; top: 12px; right: 12px; max-width: 48%; font-family: var(--font-serif); font-style: italic; font-size: .95rem; line-height: 1.25; color: #9C2C1A; background: rgba(255,255,255,.94); border: 1.5px dotted #D9502F; border-radius: 10px; padding: 7px 12px; }
.sb-note.l { right: auto; left: 12px; } .sb-note.b { top: auto; bottom: 12px; }
.sb-fine { font-family: var(--font-mono); font-size: .7rem; color: var(--text-secondary); margin: 1.1rem 0 0; }
.sb-t { font-family: var(--font-body), 'Figtree', system-ui, sans-serif; }
.sb-pop { opacity: 0; transform-box: fill-box; transform-origin: 18% 100%; transform: scale(.6); }
.in .sb-pop { animation: sb-pop .55s var(--vs-ease) forwards; animation-delay: var(--d, 0s); }
@keyframes sb-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
.sb-bob { transform-box: fill-box; animation: sb-bob 3.4s ease-in-out infinite; }
@keyframes sb-bob { 50% { transform: translateY(-4px); } }
.sb-dash { animation: sb-dash 1s linear infinite; } @keyframes sb-dash { to { stroke-dashoffset: -15; } }
.sb-spin { transform-box: fill-box; transform-origin: center; animation: sb-spin 9s linear infinite; } @keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-wig { transform-box: fill-box; transform-origin: center; animation: sb-wig 1.1s ease-in-out infinite; } @keyframes sb-wig { 50% { transform: rotate(10deg) translateX(2px); } }
.sb-twinkle { transform-box: fill-box; transform-origin: center; animation: sb-tw 2.2s ease-in-out infinite; } @keyframes sb-tw { 50% { transform: scale(.55) rotate(25deg); opacity: .6; } }
.sb-steam { animation: sb-steam 2.4s ease-in-out infinite; } @keyframes sb-steam { 50% { opacity: .2; transform: translateY(-4px); } }
.sb-ring { animation: sb-ring 1.4s var(--vs-ease) .3s both; } @keyframes sb-ring { from { stroke-dasharray: 0 999; } }
.sb-slide { transform-box: fill-box; } .in .sb-slide { animation: sb-slide 1s var(--vs-ease) both; animation-delay: var(--d, 0s); } @keyframes sb-slide { from { opacity: 0; transform: translateX(-26px); } }
.sb-rise { transform-box: fill-box; } .in .sb-rise { animation: sb-rise .9s var(--vs-ease) both; animation-delay: var(--d, 0s); } @keyframes sb-rise { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 960px) { .sb-w3, .sb-w2, .sb-w4 { grid-column: span 6; } .sb-note { position: static; max-width: none; margin: 10px 14px 0; display: block; } .sb-art { display: flex; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .sb-pop { opacity: 1 !important; transform: none !important; animation: none !important; } .sb-bob, .sb-dash, .sb-spin, .sb-wig, .sb-twinkle, .sb-steam, .sb-ring, .sb-slide, .sb-rise { animation: none !important; } }

.sb-reel { margin: 0 0 1.5rem; } .sb-reel .sb-art { background: #0F1A17; } .sb-reel video { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; background: #0F1A17; }
.sb-reel-wrap { margin-bottom: 1rem; }
.sb { margin-top: 1rem; }
@media (max-width: 700px) {
  .sb-w6 .sb-art:not(.x) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sb-w6 .sb-svg { min-width: 700px; }
  .sb-reel .sb-art { overflow: hidden; } .sb-reel video { min-width: 0; }
  .sb-note { font-size: .85rem; }
}

/* ================= reference case study (rf) ================= */
.rf-nav { position: sticky; top: 74px; z-index: 30; display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; margin: 0 auto 8px; max-width: max-content; border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); backdrop-filter: blur(10px); border-radius: 999px; scrollbar-width: none; max-width: 100%; }
.rf-nav::-webkit-scrollbar { display: none; }
.rf-nav a { flex: 0 0 auto; text-decoration: none; font-family: var(--font-mono); font-size: .74rem; color: var(--text-secondary); padding: 6px 13px; border-radius: 999px; transition: background .2s, color .2s; }
.rf-nav a:hover { background: var(--bg-surface-subtle); color: var(--text-primary); }
.rf-nav a.on { background: var(--vs-a); color: var(--vs-on); }
.rf-nav-wrap { padding: .5rem 1rem 0; display: flex; justify-content: center; }
.rf-take { display: flex; gap: 12px; align-items: flex-start; margin: -.3rem 0 1.6rem; max-width: 78ch; }
.rf-take i { flex: 0 0 auto; font-style: normal; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; background: var(--vs-a); color: var(--vs-on); border-radius: 999px; padding: 4px 11px; margin-top: 4px; }
.rf-take p { margin: 0; font-family: var(--font-sans); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.35; letter-spacing: -.01em; color: var(--text-primary); }
.rf-sub { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 2.2rem 0 .9rem; }
.rf-persona { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 1.25rem; }
.rf-p { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-xl); padding: 22px; display: grid; gap: 12px; position: relative; overflow: hidden; }
.rf-p::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c, var(--vs-a)); }
.rf-p h4 { margin: 0; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 600; color: var(--text-primary); }
.rf-p h4 small { display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; margin-top: 3px; }
.rf-pr { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; font-size: .92rem; line-height: 1.4; color: var(--text-body); align-items: baseline; }
.rf-pr b { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }

/* IA */
.rf-ia { display: grid; gap: 22px; }
.rf-ba { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 20px; align-items: stretch; }
.rf-box { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-xl); padding: 22px; min-width: 0; }
.rf-box.old { background: var(--bg-surface-subtle); border-style: dashed; border-color: var(--border-strong); }
.rf-tag { display: inline-block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 4px 11px; margin-bottom: 14px; background: var(--border-subtle); color: var(--text-secondary); }
.rf-tag.new { background: var(--vs-a); color: var(--vs-on); }
.rf-oldpage { border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); padding: 12px; display: grid; gap: 8px; }
.rf-oldpage span { display: block; border-radius: 8px; padding: 9px 12px; font-size: .84rem; background: var(--bg-surface-subtle); color: var(--text-secondary); }
.rf-oldpage span:nth-child(odd) { background: color-mix(in srgb, var(--border-strong) 70%, transparent); }
.rf-note { font-family: var(--font-mono); font-size: .68rem; color: var(--text-secondary); margin: 12px 0 0; line-height: 1.5; }
.rf-map { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; align-items: center; }
.rf-root { background: var(--text-primary); color: var(--bg-main); border-radius: 16px; padding: 14px 18px; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; position: relative; }
.rf-root::after { content: ""; position: absolute; left: 100%; top: 50%; width: 26px; border-top: 3px dashed var(--border-strong); }
.rf-lv1 { display: grid; gap: 10px; position: relative; }
.rf-lv1::before { content: ""; position: absolute; left: -14px; top: 26px; bottom: 26px; border-left: 3px dashed var(--border-strong); }
.rf-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
.rf-row::before { content: ""; position: absolute; left: -14px; top: 22px; width: 14px; border-top: 3px dashed var(--border-strong); }
.rf-page { border: 1.5px solid var(--vs-at); color: var(--vs-at); background: var(--bg-surface); border-radius: 12px; padding: 9px 14px; font-family: var(--font-sans); font-weight: 600; font-size: .92rem; line-height: 1.2; }
.rf-page small { display: block; font-family: var(--font-mono); font-size: .6rem; font-weight: 500; opacity: .85; margin-top: 2px; letter-spacing: .02em; }
.rf-page.hot { background: var(--vs-a); color: var(--vs-on); border-color: var(--vs-a); }
.rf-secs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.rf-secs span { font-size: .78rem; line-height: 1; padding: 7px 10px; border-radius: 999px; background: var(--bg-surface-subtle); color: var(--text-secondary); }
.rf-secs span.k { background: color-mix(in srgb, var(--vs-a) 14%, var(--bg-surface)); color: var(--vs-at); font-weight: 600; }
.rf-anat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rf-stack { display: grid; gap: 6px; }
.rf-stack div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--bg-surface-subtle); font-size: .88rem; color: var(--text-body); }
.rf-stack div i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--vs-a); color: var(--vs-on); display: grid; place-items: center; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; }
.rf-stack div small { display: block; color: var(--text-secondary); font-size: .74rem; }
.rf-stack div.goal { background: var(--vs-a); color: var(--vs-on); } .rf-stack div.goal i { background: var(--vs-on); color: var(--vs-a); } .rf-stack div.goal small { color: var(--vs-on); opacity: .85; }

/* flows */
.rf-flows { display: grid; gap: 22px; }
.rf-flow { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-xl); padding: 22px 22px 26px; min-width: 0; overflow: hidden; }
.rf-fh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.rf-fh h4 { margin: 0; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; color: var(--text-primary); padding-left: 12px; border-left: 5px solid var(--c, var(--vs-a)); }
.rf-fh span { font-family: var(--font-mono); font-size: .7rem; color: var(--text-secondary); }
.rf-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(130px, 1fr)); gap: 0; overflow-x: auto; padding-bottom: 6px; }
.rf-st { position: relative; padding: 0 20px 0 0; display: grid; align-content: start; gap: 10px; min-width: 0; }
.rf-st .nd { border-radius: 14px; padding: 12px 14px; background: var(--bg-surface-subtle); font-size: .9rem; line-height: 1.3; color: var(--text-primary); font-weight: 500; min-height: 76px; position: relative; }
.rf-st .nd em { display: block; font-style: normal; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 5px; }
.rf-st.start .nd { background: var(--text-primary); color: var(--bg-main); } .rf-st.start .nd em { color: var(--bg-main); opacity: .75; }
.rf-st.end .nd { background: var(--c, var(--vs-a)); color: var(--vs-on); } .rf-st.end .nd em { color: var(--vs-on); opacity: .85; }
.rf-st:not(:last-child)::after { content: ""; position: absolute; top: 38px; right: 0; width: 20px; border-top: 3px dashed var(--c, var(--vs-at)); }
.rf-st:not(:last-child)::before { content: ""; position: absolute; top: 34px; right: 0; width: 8px; height: 8px; border-top: 3px solid var(--c, var(--vs-at)); border-right: 3px solid var(--c, var(--vs-at)); transform: rotate(45deg); z-index: 1; }
.rf-fix { font-size: .78rem; line-height: 1.35; color: var(--text-secondary); padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border-strong); }
.rf-fix b { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-at); margin-bottom: 3px; }
.rf-dot { position: absolute; left: 0; top: 34px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--vs-a)); opacity: 0; pointer-events: none; }
.in .rf-flow .rf-dot { animation: rf-run 5.5s var(--vs-ease) infinite 1s; }
@keyframes rf-run { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.rf-track-wrap { position: relative; }
.rf-entry { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rf-entry span { font-size: .8rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 13px; color: var(--text-body); background: var(--bg-surface); }
.rf-entry span b { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-at); margin-right: 6px; }

/* decisions */
.rf-dec { display: grid; gap: 18px; }
.rf-d { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0 22px; padding: 26px 0; border-top: 1px solid var(--border-subtle); }
.rf-d:first-child { border-top: 0; padding-top: 4px; }
.rf-d > .n { font-family: var(--font-sans); font-weight: 500; font-size: 3rem; letter-spacing: -.05em; color: var(--vs-at); line-height: 1; }
.rf-d h4 { margin: 0 0 6px; font-family: var(--font-sans); font-size: 1.4rem; letter-spacing: -.02em; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.rf-d .ask { margin: 0 0 14px; font-size: .98rem; color: var(--text-secondary); line-height: 1.45; max-width: 64ch; }
.rf-d .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rf-c { border-radius: var(--radius-lg); padding: 15px 16px; font-size: .9rem; line-height: 1.4; min-width: 0; }
.rf-c b { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
.rf-c.no { background: var(--bg-surface-subtle); border: 1px dashed var(--border-strong); color: var(--text-secondary); } .rf-c.no b { color: var(--text-secondary); }
.rf-c.yes { background: var(--vs-a); color: var(--vs-on); } .rf-c.yes b { color: var(--vs-on); opacity: .85; }
.rf-c.fx { background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-body); } .rf-c.fx b { color: var(--vs-at); }

/* screens */
.rf-shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: start; }
.rf-shots > * { min-width: 0; }
.rf-annot { position: relative; line-height: 0; }
.rf-annot img { width: 100%; height: auto; display: block; }
.rf-pin { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--vs-a); color: var(--vs-on); display: grid; place-items: center; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 6px 14px rgba(0,0,0,.3); }
.rf-pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--vs-a); animation: rf-ping 2.2s ease-out infinite; }
@keyframes rf-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.rf-legend { display: grid; gap: 10px; align-content: start; }
.rf-lg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-md); font-size: .88rem; line-height: 1.4; color: var(--text-body); }
.rf-lg i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--vs-a); color: var(--vs-on); display: grid; place-items: center; font-family: var(--font-mono); font-size: .74rem; font-weight: 700; }
.rf-lg b { color: var(--text-primary); display: block; font-family: var(--font-sans); font-weight: 600; }

/* difference */
.rf-diff { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: stretch; }
.rf-col { border-radius: var(--radius-xl); padding: 22px; min-width: 0; }
.rf-col.b { background: var(--bg-surface-subtle); border: 1px dashed var(--border-strong); }
.rf-col.a { background: color-mix(in srgb, var(--vs-a) 10%, var(--bg-surface)); border: 1.5px solid var(--vs-a); }
.rf-col h4 { margin: 0 0 14px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; } .rf-col.a h4 { color: var(--vs-at); }
.rf-j { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rf-j li { position: relative; padding: 0 0 14px 28px; font-size: .92rem; line-height: 1.35; color: var(--text-body); }
.rf-j li:last-child { padding-bottom: 0; }
.rf-j li::before { content: ""; position: absolute; left: 6px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-surface); border: 3px solid var(--border-strong); }
.rf-j li::after { content: ""; position: absolute; left: 11px; top: 18px; bottom: -2px; border-left: 2px dashed var(--border-strong); }
.rf-j li:last-child::after { display: none; }
.rf-col.a .rf-j li::before { border-color: var(--vs-a); } .rf-col.a .rf-j li::after { border-color: var(--vs-a); opacity: .5; }
.rf-j li.bad::before { border-color: #DC2626; background: #FEE2E2; }
.rf-j li.bad { color: var(--text-secondary); }
.rf-j li.win::before { background: var(--vs-a); }
.rf-mid { display: grid; place-items: center; }
.rf-mid .vs-arr { width: 100%; }
.rf-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 22px; border-block: 1px solid var(--border-subtle); }
.rf-kpi div { padding: 20px 14px 20px 0; display: grid; gap: 6px; }
.rf-kpi b { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.04em; line-height: 1; color: var(--text-primary); }
.rf-kpi b small { font-size: .45em; color: var(--vs-at); margin-left: 4px; letter-spacing: 0; }
.rf-kpi span { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); line-height: 1.4; }
.rf-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 960px) {
  .rf-persona, .rf-anat, .rf-ba, .rf-next { grid-template-columns: minmax(0, 1fr); }
  .rf-map { grid-template-columns: minmax(0, 1fr); gap: 16px; } .rf-root::after { display: none; } .rf-lv1 { margin-left: 14px; }
  .rf-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rf-d { grid-template-columns: minmax(0, 1fr); gap: 6px; } .rf-d .grid3 { grid-template-columns: minmax(0, 1fr); }
  .rf-shots { grid-template-columns: minmax(0, 1fr); }
  .rf-diff { grid-template-columns: minmax(0, 1fr); gap: 12px; } .rf-mid { display: none; }
  .rf-kpi { grid-template-columns: minmax(0, 1fr); } .rf-kpi div { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
  .rf-track { grid-template-columns: repeat(var(--n), 190px); }
}
@media (prefers-reduced-motion: reduce) { .rf-pin::after, .in .rf-flow .rf-dot { animation: none !important; } .rf-dot { display: none; } }
.rf-ba { align-items: start; } .vs-nat .vs-screen { aspect-ratio: auto; } .vs-nat .vs-screen img { height: auto; }

/* storyboard fits one screen */
.rf-sb .sb-panel figcaption { padding: 10px 14px 12px; font-size: .84rem; line-height: 1.4; } .rf-sb .sb-panel figcaption b { font-size: .92rem; }
.rf-sb .sb-grid { gap: 14px; } .rf-sb .sb-note { display: none; }
.rf-who { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 1rem 0 0; }
.rf-who span { font-size: .85rem; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; color: var(--text-body); background: var(--bg-surface); }
.rf-who span b { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vs-at); margin-right: 8px; }
.rf-who span.n { border: 0; background: none; color: var(--text-secondary); font-family: var(--font-mono); font-size: .68rem; padding: 0; }
/* IA, same pattern as the Nook case study */
.rf-before { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1.25rem; font-size: .92rem; color: var(--text-secondary); }
.rf-before .rf-tag { margin: 0; } .rf-before em { font-family: var(--font-mono); font-size: .68rem; font-style: normal; }
.rf-ia3 { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; align-items: start; }
.rf-ia-col { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-xl); padding: 22px 22px 26px; min-width: 0; }
.rf-ia-col h3 { margin: 0 0 4px; display: inline-block; padding: 6px 16px; border-radius: 999px; color: var(--on, #fff); background: var(--c); font-family: var(--font-sans); font-size: 1rem; }
.rf-ia-col.s { --c: #121212; --t: #121212; --on: #fff; } .rf-ia-col.i { --c: #0F7A6B; --t: #0F7A6B; --on: #fff; } .rf-ia-col.c { --c: #4338CA; --t: #4338CA; --on: #fff; }
[data-theme="dark"] .rf-ia-col.s { --c: #F0EFEB; --t: #F0EFEB; --on: #121212; } [data-theme="dark"] .rf-ia-col.i { --c: #3FC79A; --t: #3FC79A; --on: #0b1210; } [data-theme="dark"] .rf-ia-col.c { --c: #8B93FF; --t: #8B93FF; --on: #0b1210; }
.rf-ia-sub { margin: 6px 0 16px; font-size: .84rem; color: var(--text-secondary); line-height: 1.4; }
.rf-tree, .rf-tree ul { list-style: none; margin: 0; padding: 0; }
.rf-tree > li { margin-bottom: 14px; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--vs-ease), transform .55s var(--vs-ease); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.in .rf-tree > li { opacity: 1; transform: none; }
.rf-tab { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; color: var(--t); padding: 3px 12px; border: 1.5px solid currentColor; border-radius: 8px; }
.rf-tree ul { margin: 6px 0 0 14px; border-left: 2px solid var(--border-strong); }
.rf-tree ul li { position: relative; padding: 3px 0 3px 18px; font-size: .86rem; line-height: 1.4; color: var(--text-secondary); }
.rf-tree ul li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; border-top: 2px solid var(--border-strong); }
/* alignment */
.rf-st .nd { min-height: 96px; } .rf-fix { min-height: 92px; }
.rf-shots { align-items: stretch; } .rf-legend { grid-template-rows: repeat(5, 1fr); }
.rf-row3 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 1.5rem; align-items: stretch; }
.rf-row3 > * { min-width: 0; } .rf-row3 .vs-browser { height: 100%; } .rf-row3 .vs-phone { align-self: center; max-width: 210px; }
@media (max-width: 960px) { .rf-ia3 { grid-template-columns: minmax(0, 1fr); } .rf-row3 { grid-template-columns: minmax(0, 1fr); } .rf-row3 > * { grid-column: 1 / -1 !important; } .rf-legend { grid-template-rows: none; } }

.rf-take { max-width: none; margin: -.3rem 0 1.6rem; } .rf-take p { font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: none; font-weight: 400; color: var(--text-secondary); }
.rf-take:has(> i) p { color: var(--text-primary); }

.rf-ia-col.g { --c: var(--k); --t: var(--k); --on: #fff; }
[data-theme="dark"] .rf-ia-col.g { --c: var(--kd); --t: var(--kd); --on: #0b1210; }
.rf-fix.ghost { border-color: transparent; }
.rf-st .nd { display: flex; flex-direction: column; justify-content: flex-start; }

.rf-hier-row { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 1fr; align-items: stretch; gap: 0; }
.rf-hier-row .vs-arr { align-self: center; width: 100%; }
.rf-hn { border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 5px; align-content: start; }
.rf-hn b { font-family: var(--font-sans); font-size: 1.05rem; color: var(--text-primary); }
.rf-hn span { font-size: .84rem; color: var(--text-secondary); line-height: 1.35; }
.rf-hn.guest { margin-left: 14px; border-style: dashed; border-color: var(--border-strong); background: var(--bg-surface-subtle); }
@media (max-width: 960px) { .rf-hier-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } .rf-hier-row .vs-arr { display: none; } .rf-hn.guest { margin-left: 0; } }