/* Product-story layer for case studies: brief (problem · people · metrics), stat strips, annotated screens with pins, before/after comparisons and a shared line-icon set. Loaded after reading-room.css. */
.story-chapters{container-type:inline-size}
.ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.story-chapter>.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--case-accent)}
.story-chapter>.eyebrow .ico{width:18px;height:18px}
.story-chapter .chapter-lede{font-size:18px;line-height:1.75;color:var(--text)}

/* The brief */
.brief{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 16px}
.brief-card{position:relative;min-width:0;padding:22px 22px 24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--case-accent) 10%,transparent),transparent 62%),var(--surface);box-shadow:var(--inset)}
.brief-head{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent)}
.brief-head .ico{width:38px;height:38px;padding:8px;border-radius:12px;border:1px solid color-mix(in srgb,var(--case-accent) 35%,transparent);background:color-mix(in srgb,var(--case-accent) 12%,transparent)}
.story-chapter .brief-card h3{font-size:21px;line-height:1.25;letter-spacing:-.01em;margin:18px 0 10px;text-wrap:balance}
.story-chapter .brief-card p{font-size:14px;line-height:1.7;margin:0;color:var(--muted)}
.persona-list,.metric-targets{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.persona-list li,.metric-targets li{display:grid;gap:3px;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--case-accent) 45%,transparent)}
.persona-list b,.metric-targets b{font-size:15px;font-weight:600;color:var(--text)}
.persona-list span,.metric-targets span{font-size:13px;line-height:1.6;color:var(--muted)}
.stat-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--line)}
.stat-strip>div{min-width:0;padding:18px 18px 20px;background:var(--surface);display:grid;gap:8px;align-content:start}
.stat-strip strong{font-size:clamp(28px,3.6cqi,42px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--case-accent);font-variant-numeric:tabular-nums}
.stat-strip span{font-size:13px;line-height:1.5;color:var(--muted)}
.story-chapter .stat-note{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 0}

/* Annotated screens */
.story-chapter figure.shot{display:grid;gap:14px;margin:30px 0;background:none;border:0;border-radius:0;overflow:visible}
.story-chapter .shot figcaption{display:flex;align-items:center;gap:10px;padding:0;font-size:12px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;color:var(--case-accent)}
.story-chapter .shot figcaption .ico{width:18px;height:18px}
.shot-frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#f4f4f1;box-shadow:var(--shadow)}
.shot-frame.dark{background:#070b12}
.story-chapter .shot-frame img{display:block;width:100%;height:auto}
.pin{position:absolute;left:var(--x);top:var(--y);z-index:2;width:28px;height:28px;margin:-14px 0 0 -14px;display:grid;place-items:center;border-radius:50%;font:700 12px/1 Manrope,system-ui,sans-serif;color:#0b1411;background:var(--case-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--case-accent) 32%,transparent),0 4px 14px #0007;transition:transform .25s,box-shadow .25s}
.pin:after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--case-accent);opacity:0;animation:pin-ping 2.8s ease-out infinite}
.pin.on{transform:scale(1.2);box-shadow:0 0 0 6px color-mix(in srgb,var(--case-accent) 45%,transparent),0 0 26px var(--case-accent)}
@keyframes pin-ping{0%{opacity:.75;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.45)}}
.shot-notes{list-style:none;counter-reset:note;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.shot-notes li{counter-increment:note;position:relative;min-width:0;padding:12px 14px 13px 48px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13px;line-height:1.55;color:var(--muted);transition:border-color .25s,background .25s}
.shot-notes li:before{content:counter(note);position:absolute;left:12px;top:11px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:700;color:var(--case-accent);border:1px solid color-mix(in srgb,var(--case-accent) 55%,transparent)}
.shot-notes b{display:block;margin-bottom:2px;font-size:14px;font-weight:600;color:var(--text)}
.shot-notes li.on{border-color:color-mix(in srgb,var(--case-accent) 65%,transparent);background:color-mix(in srgb,var(--case-accent) 9%,var(--surface))}
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border-radius:18px;background:#070b12;border:1px solid var(--line)}
.phones .shot-frame{border-radius:20px;background:#070b12;box-shadow:none}

/* Before / after */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0 12px;align-items:start}
.story-chapter .compare figure.shot{margin:0}
.compare .shot-notes{grid-template-columns:1fr}
.story-chapter .shot.before figcaption{color:var(--muted)}
.shot.before .shot-frame{filter:saturate(.8)}
.story-chapter .compare-decision{display:flex;gap:12px;align-items:flex-start;max-width:none;margin:12px 0 26px;padding:14px 18px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--case-accent) 50%,transparent);font-size:15px;line-height:1.6;color:var(--text)}
.compare-decision .ico{margin-top:2px;color:var(--case-accent)}

/* Supporting semiotics */
.flow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0;padding:0;list-style:none}
.flow-steps li{position:relative;min-width:0;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:grid;gap:8px;align-content:start}
.flow-steps li+li:before{content:'→';position:absolute;left:-7px;top:50%;transform:translate(-50%,-50%);font-size:16px;color:var(--case-accent)}
.flow-steps .ico{width:32px;height:32px;color:var(--case-accent)}
.flow-steps b{font-size:17px;font-weight:600}
.flow-steps span{font-size:13px;line-height:1.55;color:var(--muted)}
.voice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.voice{margin:0;min-width:0;padding:18px 18px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);display:grid;gap:14px;align-content:space-between}
.voice:before{content:'“';font:600 44px/0.6 'Cormorant Garamond',Georgia,serif;color:var(--case-accent)}
.story-chapter .voice p{margin:0;font-size:15px;line-height:1.6;color:var(--text)}
.voice cite{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent)}
.reframe{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;margin:24px 0}
.reframe>div{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.reframe .new{border-color:color-mix(in srgb,var(--case-accent) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--case-accent) 10%,transparent),transparent 70%),var(--surface)}
.reframe .arrow{align-self:center;justify-self:center;color:var(--case-accent)}
.reframe small{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reframe .new small{color:var(--case-accent)}
.story-chapter .reframe p{margin:0;font-size:14px;line-height:1.65}
.reframe .old p{color:var(--muted)}
.scorecard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.scorecard>div{min-width:0;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.story-chapter .scorecard h4{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent)}
.scorecard ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px;line-height:1.5}
.scorecard li{display:flex;gap:10px}
.scorecard li:before{content:'';flex:0 0 6px;height:6px;margin-top:8px;transform:rotate(45deg);background:var(--case-accent)}
.confidence-demo{display:grid;gap:12px;margin:22px 0;padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.conf-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.conf-level{display:inline-flex;align-items:center;gap:8px;min-width:200px;font-size:14px;font-weight:600}
.conf-level i{width:10px;height:10px;border-radius:50%;background:#6f96f2}
.conf-level.high i{background:#83c451}
.conf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--case-accent) 55%,transparent);font-size:12px;color:var(--case-accent)}
.conf-chip .ico{width:13px;height:13px}
.material-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.material-demo>div{display:grid;justify-items:center;gap:14px;padding:28px 18px;border-radius:18px;border:1px solid var(--line)}
.material-demo .regular{background:#ecebf1;color:#33283e}
.material-demo .gem{background:radial-gradient(circle at 28% 18%,#7a5bb8,#1b1430 72%);color:#f3eefc}
.demo-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:14px;font-size:15px;font-weight:600}
.regular .demo-btn{background:#5b3f86;color:#fff;box-shadow:0 6px 14px #5b3f8640}
.gem .demo-btn{background:linear-gradient(135deg,#ffffff40,#ffffff0d);border:1px solid #ffffff55;box-shadow:inset 0 1px 0 #fff9,0 8px 26px #b58cff55;color:#fff}
.material-demo small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.outcome-badges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.outcome-badges span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--case-accent) 45%,transparent);background:color-mix(in srgb,var(--case-accent) 8%,transparent);font-size:13px;color:var(--text)}
.outcome-badges .ico{width:16px;height:16px;color:var(--case-accent)}

[data-scheme=light] .pin{color:#fff}

@container (min-width:761px) and (max-width:1000px){.brief{grid-template-columns:repeat(2,minmax(0,1fr))}.brief-metrics{grid-column:1/-1}}
@container (max-width:760px){.brief,.flow-steps,.voice-grid,.compare,.scorecard,.material-demo,.reframe{grid-template-columns:minmax(0,1fr)}.stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.reframe .arrow{transform:rotate(90deg)}.flow-steps li+li:before{left:50%;top:-7px;transform:translate(-50%,-50%) rotate(90deg)}}
@media(max-width:700px){.pin{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:10px}.phones{padding:8px;gap:8px}}
@media(prefers-reduced-motion:reduce){.pin:after{animation:none}.pin,.shot-notes li{transition:none}}
.iteration-table strong{display:flex;align-items:center;gap:10px}.iteration-table strong .ico{width:22px;height:22px}
.package-list{list-style:none;margin:22px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.package-list a{display:grid;gap:6px;height:100%;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);transition:border-color .25s}.package-list a:hover,.package-list a:focus-visible{border-color:color-mix(in srgb,var(--case-accent) 60%,transparent)}.package-list b{font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--case-accent)}.package-list span{font-size:13px;color:var(--muted)}.package-list em{font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--case-accent)}@container (max-width:760px){.package-list{grid-template-columns:minmax(0,1fr)}}

/* One Li8: naming anatomy, grammar rules, token tiers, Gem's four Cs, the gradient formula and contrast fixes. */
.story-chapter code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--case-accent) 12%,transparent)}
.token-anatomy{margin:22px 0;padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--inset)}
.token-anatomy code{display:block;padding:0;background:none;font:600 clamp(15px,2.6cqi,24px)/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);overflow-wrap:anywhere}
.token-anatomy [data-part]{padding:2px 5px;border-radius:6px;color:var(--text);background:color-mix(in srgb,var(--case-accent) 14%,transparent);box-shadow:inset 0 -2px 0 var(--case-accent)}
.token-anatomy .compound{background:color-mix(in srgb,var(--case-accent) 32%,transparent)}
.token-anatomy ol{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.token-anatomy li{font-size:13px;color:var(--muted);border-top:2px solid var(--case-accent);padding-top:8px}
.token-anatomy li b{display:block;color:var(--text);font:600 14px ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.rule-grid,.gem-cs,.tier-flow{display:grid;gap:14px;margin:18px 0}
.rule-card{padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.rule-card small{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--case-accent)}
.rule-card h3{font-size:19px;line-height:1.3;margin:8px 0}
.rule-card p{font-size:14px;line-height:1.65;color:var(--muted)}
.rule-card code{display:inline-block;margin:12px 6px 0 0;padding:5px 9px;color:var(--text);overflow-wrap:anywhere}
.tier{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-align:center}
.tier strong{display:block;font-size:36px;line-height:1;color:var(--case-accent);font-variant-numeric:tabular-nums}
.tier b{display:block;margin:8px 0 2px;font-size:15px}.tier span{font-size:13px;color:var(--muted)}
.tier-arrow{justify-self:center;color:var(--muted);font-size:22px;rotate:90deg}
.gem-c{padding:18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(145deg,color-mix(in srgb,var(--case-accent) 16%,transparent),transparent 62%),var(--surface)}
.gem-c i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-style:normal;font-weight:800;font-size:18px;color:var(--case-accent);background:var(--surface);box-shadow:var(--neu-sm,0 4px 10px #0003),var(--inset)}
.gem-c b{display:block;margin:12px 0 4px;font-size:17px}.gem-c span{font-size:13px;line-height:1.55;color:var(--muted)}
.formula{margin:20px 0;padding:22px;border-radius:18px;border:1px solid var(--line);background:var(--surface)}
.formula>code{display:block;padding:0;background:none;font:700 clamp(22px,3.4cqi,32px)/1.2 ui-monospace,Menlo,monospace;color:var(--case-accent)}
.formula p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--muted)}
.contrast-list{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:10px}
.contrast-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.contrast-list s{color:var(--muted);font-variant-numeric:tabular-nums}.contrast-list strong{font-size:18px;color:var(--case-accent);font-variant-numeric:tabular-nums}
.principles{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.principles span{padding:8px 15px;border-radius:999px;font-size:13px;letter-spacing:.03em;background:var(--surface);box-shadow:var(--neu-sm,0 4px 10px #0002),var(--inset)}
@container (min-width:760px){.rule-grid{grid-template-columns:1fr 1fr}.gem-cs{grid-template-columns:repeat(4,minmax(0,1fr))}.tier-flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}.tier-arrow{rotate:none}}
@container (max-width:520px){.token-anatomy ol{grid-template-columns:1fr 1fr}.contrast-list li{grid-template-columns:minmax(0,1fr) auto}.contrast-list s{display:none}}
.story-chapter>h3{margin:30px 0 8px}
.gem-cs .gem-c{margin:0;padding:0;overflow:hidden}
.gem-c>img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#0e1020}
.gem-c figcaption{padding:14px 16px 16px}
.gem-c figcaption b{margin-top:0}
.token-anatomy .ta-token{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 6px}
.token-anatomy .ta-seg{display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px}
.token-anatomy .ta-seg code{display:inline-block;padding:4px 9px;border-radius:7px;font:600 clamp(15px,2.4cqi,23px)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);background:color-mix(in srgb,var(--case-accent) 14%,transparent);box-shadow:inset 0 -2px 0 var(--case-accent)}
.token-anatomy .ta-seg.compound code{background:color-mix(in srgb,var(--case-accent) 32%,transparent)}
.token-anatomy .ta-seg small{align-self:stretch;min-width:max-content;border-top:2px solid var(--case-accent);padding-top:7px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.token-anatomy .ta-dash{padding-top:4px;font:600 clamp(15px,2.4cqi,23px)/1.3 ui-monospace,Menlo,monospace;color:var(--muted)}
.token-anatomy .ta-seg.compound{background:none;box-shadow:none}

/* VARAH balanced scorecard (Akshay's sketch): four bento cards with straight edges; each inner corner has a concave cutout around a central circle, leaving an even channel. */
.scorecard.petals{--core:150px;--gap:16px;--notch:calc(var(--core) / 2 + var(--gap));--petal-edge:var(--line);--petal-drop:drop-shadow(8px 10px 16px #050806b3) drop-shadow(-5px -5px 12px #2a3a313d);position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:var(--gap);margin:30px 0}
[data-scheme=light] .scorecard.petals{--petal-drop:drop-shadow(8px 10px 16px #a5ada366) drop-shadow(-6px -6px 14px #ffffffd9)}
.scorecard.petals>.petal{min-width:0;padding:0;border:0;border-radius:0;background:none;filter:var(--petal-drop)}
.petal-body{height:100%;box-sizing:border-box;padding:24px;border-radius:24px;background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--petal-edge)}
.petal-tl .petal-body{border-bottom-right-radius:0;padding-right:calc(var(--notch) + 12px);padding-bottom:36px;-webkit-mask:radial-gradient(circle at calc(100% + calc(var(--gap) / 2)) calc(100% + calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));mask:radial-gradient(circle at calc(100% + calc(var(--gap) / 2)) calc(100% + calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));background-image:radial-gradient(circle at calc(100% + calc(var(--gap) / 2)) calc(100% + calc(var(--gap) / 2)),#0000 calc(var(--notch) - .5px),var(--petal-edge) var(--notch),var(--petal-edge) calc(var(--notch) + 1px),#0000 calc(var(--notch) + 1.6px)),linear-gradient(150deg,color-mix(in srgb,var(--case-accent) 9%,transparent),transparent 55%)}
.petal-tr .petal-body{border-bottom-left-radius:0;padding-left:calc(var(--notch) + 12px);padding-bottom:36px;-webkit-mask:radial-gradient(circle at calc(-1 * calc(var(--gap) / 2)) calc(100% + calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));mask:radial-gradient(circle at calc(-1 * calc(var(--gap) / 2)) calc(100% + calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));background-image:radial-gradient(circle at calc(-1 * calc(var(--gap) / 2)) calc(100% + calc(var(--gap) / 2)),#0000 calc(var(--notch) - .5px),var(--petal-edge) var(--notch),var(--petal-edge) calc(var(--notch) + 1px),#0000 calc(var(--notch) + 1.6px)),linear-gradient(150deg,color-mix(in srgb,var(--case-accent) 9%,transparent),transparent 55%)}
.petal-bl .petal-body{border-top-right-radius:0;padding-right:calc(var(--notch) + 12px);padding-top:36px;-webkit-mask:radial-gradient(circle at calc(100% + calc(var(--gap) / 2)) calc(-1 * calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));mask:radial-gradient(circle at calc(100% + calc(var(--gap) / 2)) calc(-1 * calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));background-image:radial-gradient(circle at calc(100% + calc(var(--gap) / 2)) calc(-1 * calc(var(--gap) / 2)),#0000 calc(var(--notch) - .5px),var(--petal-edge) var(--notch),var(--petal-edge) calc(var(--notch) + 1px),#0000 calc(var(--notch) + 1.6px)),linear-gradient(150deg,color-mix(in srgb,var(--case-accent) 9%,transparent),transparent 55%)}
.petal-br .petal-body{border-top-left-radius:0;padding-left:calc(var(--notch) + 12px);padding-top:36px;-webkit-mask:radial-gradient(circle at calc(-1 * calc(var(--gap) / 2)) calc(-1 * calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));mask:radial-gradient(circle at calc(-1 * calc(var(--gap) / 2)) calc(-1 * calc(var(--gap) / 2)),#0000 var(--notch),#000 calc(var(--notch) + .6px));background-image:radial-gradient(circle at calc(-1 * calc(var(--gap) / 2)) calc(-1 * calc(var(--gap) / 2)),#0000 calc(var(--notch) - .5px),var(--petal-edge) var(--notch),var(--petal-edge) calc(var(--notch) + 1px),#0000 calc(var(--notch) + 1.6px)),linear-gradient(150deg,color-mix(in srgb,var(--case-accent) 9%,transparent),transparent 55%)}
.story-chapter .scorecard.petals h4{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.scorecard.petals h4 .ico{box-sizing:content-box;width:18px;height:18px;padding:9px;border-radius:50%;color:var(--case-accent);background:var(--surface);box-shadow:var(--neu-sm,0 4px 10px #0003),var(--inset,none)}
.scorecard.petals h4 small{margin-left:auto;white-space:nowrap;font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:500}
.scorecard.petals ul{display:grid;gap:9px;font-size:14px;line-height:1.45}
.scorecard.petals li{color:var(--muted)}
.scorecard.petals li:before{background:var(--case-accent)}
.scorecard.petals>.petal-core{position:absolute;left:50%;top:50%;width:var(--core);height:var(--core);transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;display:grid;place-content:center;gap:4px;text-align:center;background:var(--surface);box-shadow:var(--neu-sm,0 10px 24px #0005),var(--inset,inset 0 1px 0 #ffffff12),inset 0 0 0 1px var(--line)}
.scorecard.petals>.petal-core:before{content:'';position:absolute;inset:12px;border-radius:50%;box-shadow:var(--neu-in,inset 0 2px 8px #0005)}
.scorecard.petals>.petal-core b{position:relative;font-size:15px;letter-spacing:.16em;color:var(--case-accent)}
.scorecard.petals>.petal-core span{position:relative;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:var(--muted)}
@container (max-width:640px){
  .scorecard.petals{grid-template-columns:minmax(0,1fr);grid-template-rows:none;--core:120px;padding-top:calc(var(--core) + var(--gap))}
  .scorecard.petals>.petal-core{top:0;transform:translateX(-50%)}
  .scorecard.petals .petal-body{border-radius:22px!important;padding:22px!important;-webkit-mask:none;mask:none;background-image:linear-gradient(150deg,color-mix(in srgb,var(--case-accent) 9%,transparent),transparent 55%)}
}
/* Same neumorphic language as the home tiles: dual dark/light shadow following the carved shape, a highlight edge, a pressed channel ring around the core. */
.scorecard.petals{--petal-drop:drop-shadow(10px 10px 16px #050806d9) drop-shadow(-8px -8px 16px #2a3a3170)}
[data-scheme=light] .scorecard.petals{--petal-drop:drop-shadow(12px 12px 18px #a5ada38c) drop-shadow(-9px -9px 16px #ffffffeb)}
.petal-body{box-shadow:inset 0 0 0 1px var(--petal-edge),inset 1px 1px 0 var(--hi-edge,#ffffff12)}
.scorecard.petals>.petal-core{box-shadow:10px 10px 22px #050806cc,-8px -8px 18px #2a3a3166,inset 1px 1px 0 var(--hi-edge,#ffffff12)}
[data-scheme=light] .scorecard.petals>.petal-core{box-shadow:12px 12px 22px #a5ada38c,-9px -9px 18px #ffffffeb,inset 1px 1px 0 #fff}
.scorecard.petals:before{content:'';position:absolute;left:50%;top:50%;width:calc(var(--notch) * 2 - 6px);height:calc(var(--notch) * 2 - 6px);transform:translate(-50%,-50%);border-radius:50%;box-shadow:inset 4px 4px 10px #050806a6,inset -4px -4px 10px #2a3a3140;pointer-events:none}
[data-scheme=light] .scorecard.petals:before{box-shadow:inset 5px 5px 10px #a5ada366,inset -5px -5px 10px #ffffffcc}
@container (max-width:760px){
  .scorecard.petals{grid-template-columns:minmax(0,1fr);grid-template-rows:none;--core:120px;padding-top:calc(var(--core) + var(--gap) + 8px)}
  .scorecard.petals:before{display:none}
  .scorecard.petals>.petal-core{top:0;transform:translateX(-50%)}
  .scorecard.petals .petal-body{border-radius:22px!important;padding:22px!important;-webkit-mask:none;mask:none;background-image:linear-gradient(150deg,color-mix(in srgb,var(--case-accent) 9%,transparent),transparent 55%)}
}
.case-name .case-fullname{display:block;margin-top:6px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* VARAH steering-wheel framework: Figma geometry recreated as inline SVG, themed. */
.wheel-framework{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center;margin:26px 0;padding:24px;border-radius:22px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow,none),var(--inset,none)}
.wheel-fig{margin:0!important;background:none!important;border:0!important;display:grid;justify-items:center;gap:12px}
.wheel-svg{width:100%;max-width:420px;height:auto;overflow:visible}
.wh-rim{fill:color-mix(in srgb,var(--case-accent) 78%,#0b3b48)}
.wh-hub{fill:color-mix(in srgb,var(--text) 10%,var(--bg))}
.wh-core{fill:#2e3ecd}
.wl{font:700 34px Manrope,Arial,sans-serif;fill:var(--text)}
.wl.on-rim{fill:#fff}
.wl.core-t{fill:#fff;font-size:30px}
.wheel-fig figcaption{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--case-accent);padding:0!important}
.wheel-legend h3{font-size:22px;line-height:1.25;margin:0 0 8px}
.wheel-legend>p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.wheel-legend ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wheel-legend li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.5;padding-top:10px;border-top:1px solid var(--line)}
.wheel-legend li:first-child b{color:#5d6cff}
.wheel-legend li b{color:var(--case-accent)}
.wheel-legend li span{color:var(--muted)}
@container (min-width:760px){.wheel-framework{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@container (max-width:520px){.wheel-legend li{grid-template-columns:1fr;gap:2px}}
:root:not([data-scheme=light]) .wh-rim{fill:color-mix(in srgb,var(--case-accent) 52%,#07313d)}
.wl.on-rim{font-size:29px}
/* One Li8 case study: user preferences are parallel, not a sequence, so no flow arrows. */
.flow-steps.prefs li+li:before{content:none}