/* ───────── CASE WIDGETS ─────────
   Interactive case-study components (compare slider, Pre-LIVE stepper, niche chart, git walkthrough,
   text-expansion visualiser, motion lab). Behaviour: case-widgets.js. Content: CASE_WIDGETS in data.js.
   Mount point: <div class="cw" data-widget="…" data-key="…"></div>. Plus Jakarta only, tokens only,
   except the two stages that are deliberately dark in both themes (phone stage, motion lab chrome). */

.cw { display: block; min-width: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
.cw * { box-sizing: border-box; }
.cw-caption { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-caption b { color: var(--text); font-weight: 600; }

/* shared controls */
.cw-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface); }
.cw-tab { appearance: none; border: 0; background: transparent; color: var(--text-300); font: 600 12px/20px 'Plus Jakarta Sans', sans-serif; padding: 3px 12px; border-radius: 999px; cursor: pointer; transition: background 180ms ease, color 180ms ease; white-space: nowrap; }
.cw-tab:hover { color: var(--text); }
.cw-tab.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.cw-btn { appearance: none; border: 1px solid var(--text); background: var(--text); color: var(--bg); font: 600 13px/20px 'Plus Jakarta Sans', sans-serif; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: opacity 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease; white-space: nowrap; }
.cw-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.cw-btn:active { transform: translateY(0) scale(0.98); }
.cw-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
.cw-btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.cw-btn.ghost:hover { border-color: var(--text-200); opacity: 1; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-chip { appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--text-300); font: 500 12px/18px 'Plus Jakarta Sans', sans-serif; padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.cw-chip:hover { color: var(--text); border-color: var(--text-200); }
.cw-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.cw-term { border-bottom: 1px dotted var(--text-200); cursor: help; position: relative; color: var(--text); font-weight: 600; outline: none; }
.cw-term::after { content: attr(data-def); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--text); color: var(--bg); font: 400 12px/18px 'Plus Jakarta Sans', sans-serif; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; white-space: normal; }
.cw-term:hover::after, .cw-term:focus-visible::after, .cw-term.open::after { opacity: 1; transform: none; }

/* ── 1. Before / after compare (Jabar) ── */
.cw-cmp { --pos: 50%; position: relative; margin-top: 12px; aspect-ratio: 1.8; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); user-select: none; touch-action: pan-y; cursor: col-resize; }
.cw-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; -webkit-user-drag: none; pointer-events: none; }
.cw-cmp-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cw-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--bg); box-shadow: 0 0 0 1px rgba(0,0,0,0.12); outline: none; }
.cw-cmp-handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--bg); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,0.18); display: grid; place-items: center; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.cw-cmp-handle span svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw-cmp.is-drag .cw-cmp-handle span, .cw-cmp-handle:focus-visible span { transform: scale(1.1); }
.cw-cmp-handle:focus-visible span { box-shadow: 0 0 0 2px var(--accent-2); }
.cw-cmp-tag { position: absolute; top: 12px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(20,20,19,0.78); color: #fff; /* sits on screenshots, not on the page */ pointer-events: none; }
.cw-cmp-tag.is-before { left: 12px; }
.cw-cmp-tag.is-after { right: 12px; }
.cw-cmp.is-swap .cw-cmp-before, .cw-cmp.is-swap .cw-cmp-after { animation: cwFade 0.36s ease both; }
@keyframes cwFade { from { opacity: 0; } to { opacity: 1; } }
.cw-cmp-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(20,20,19,0.78); color: #fff; font-size: 11px; font-weight: 600; pointer-events: none; transition: opacity 300ms ease; white-space: nowrap; }
.cw-cmp.is-used .cw-cmp-hint { opacity: 0; }

/* ── 2. Pre-LIVE stepper ── */
.cw-step { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; margin-top: 8px; align-items: stretch; }
.cw-step-stage { position: relative; border-radius: 16px; overflow: hidden; background: #0b0b0c; /* phone screenshots were shot on black; stage stays dark in both themes */ min-height: 560px; display: flex; align-items: center; justify-content: center; }
.cw-step-stage img { position: absolute; top: 50%; left: 50%; width: 84%; height: calc(100% - 44px); object-fit: contain; transform: translate(-50%, -48%) scale(0.98); opacity: 0; transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.cw-step-stage img.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cw-step-count { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-step-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cw-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cw-step-list li button { appearance: none; width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; cursor: pointer; color: var(--text-300); font: 500 14px/20px 'Plus Jakarta Sans', sans-serif; transition: background 160ms ease, color 160ms ease; }
.cw-step-list li button:hover { background: var(--surface); color: var(--text); }
.cw-step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface); color: var(--text-300); transition: background 160ms ease, color 160ms ease; }
.cw-step-list li.done .cw-step-n { background: var(--accent-2-100); color: var(--accent-2); }
.cw-step-list li.on button { color: var(--text); font-weight: 600; }
.cw-step-list li.on .cw-step-n { background: var(--text); color: var(--bg); }
.cw-step-body { padding: 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cw-step-text { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-step-text strong { color: var(--text); font-weight: 600; }
.cw-step-text.in { animation: fadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-funnel-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); margin-bottom: 8px; }
.cw-funnel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.cw-funnel-seg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cw-funnel-seg i { display: block; height: 6px; border-radius: 3px; background: var(--border); position: relative; overflow: hidden; }
.cw-funnel-seg i::after { content: ''; position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-funnel-seg.on i::after { transform: scaleX(1); }
.cw-funnel-seg.cur i::after { background: var(--accent-2); }
.cw-funnel-seg b { font-size: 10px; line-height: 14px; font-weight: 500; color: var(--text-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-funnel-seg.cur b { color: var(--text); font-weight: 700; }
.cw-funnel-metric { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--text); font-weight: 600; }
.cw-funnel-metric em { font-style: normal; background: var(--accent-2-100); padding: 1px 5px; border-radius: 4px; }
.cw-step-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; }

/* ── 3. Niche chart (Content Creation) ── */
.cw-chart { --row: 40px; margin-top: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.cw-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cw-chart-note { font-size: 12px; color: var(--text-300); }
.cw-chart-rows { position: relative; }
.cw-row { position: absolute; left: 0; right: 0; top: 0; height: var(--row); display: grid; grid-template-columns: 24px 132px minmax(0, 1fr) 62px 96px; gap: 10px; align-items: center; padding: 0 6px; border-radius: 8px; cursor: pointer; outline: none; transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1), background 160ms ease; }
.cw-row:hover, .cw-row:focus-visible, .cw-row.pin { background: var(--surface); }
.cw-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-2); }
.cw-row-n { font-size: 11px; font-weight: 700; color: var(--text-200); font-variant-numeric: tabular-nums; }
.cw-row-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-row-bar { position: relative; height: 12px; border-radius: 0 4px 4px 0; overflow: hidden; }
.cw-row-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 4px 4px 0; background: var(--text); opacity: 0.85; transition: width 0.52s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-row.top .cw-row-bar i { background: #fe2c55; /* TikTok red on purpose: the chart is about TikTok content */ opacity: 1; }
.cw-row-val { font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.cw-row-tier { font-size: 10px; font-weight: 600; line-height: 16px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-300); white-space: nowrap; justify-self: start; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cw-row-tier.t-5, .cw-row-tier.t-4 { background: rgba(254,44,85,0.12); color: #e10543; /* TikTok red tint, see .cw-row.top */ border-color: transparent; }
.cw-chart-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 16px; align-items: start; }
.cw-chart-thumbs { display: flex; gap: 6px; }
.cw-chart-thumb { position: relative; flex: 0 0 auto; width: 86px; border-radius: 8px; overflow: hidden; background: var(--surface); }
.cw-chart-thumb img { display: block; width: 100%; height: auto; }
.cw-chart-thumb b { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; /* over a video thumbnail */ font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-chart-detail-text { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-chart-detail-text b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.cw-chart-detail.in { animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── 4. Git walkthrough (SEA Design Repository) ── */
.cw-git { margin-top: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.cw-git-stage { position: relative; background: var(--surface); padding: 14px 0 4px; }
.cw-git-stage svg { display: block; width: 100%; height: auto; }
.cw-git-stage text { font-family: 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); }
.cw-git-stage .lane { stroke: var(--border); stroke-width: var(--sw, 2); fill: none; }
.cw-git-stage .lane.main { stroke: var(--text-200); }
.cw-git-stage .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-git-stage .draw.on { stroke-dashoffset: 0; }
.cw-git-stage .draw.dash { stroke-dasharray: 0.03 0.02; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.4s ease; }
.cw-git-stage .draw.dash.on { opacity: 1; }
.cw-git-stage .node { fill: var(--bg); stroke: var(--text); stroke-width: calc(var(--sw, 2) + 0.5); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-git-stage .node.on { transform: scale(1); }
.cw-git-stage .node.branch { stroke: var(--accent-2); }
.cw-git-stage .node.merge { fill: var(--text); }
.cw-git-stage .lbl { font-size: var(--fs, 11px); opacity: 0; transition: opacity 0.4s ease 0.2s; }
.cw-git-stage .lbl.on { opacity: 1; }
.cw-git-stage .lbl.b { fill: var(--accent-2); font-weight: 600; }
.cw-git-stage .lbl.m { fill: var(--text); font-weight: 600; }
.cw-git-mr { position: absolute; right: 16px; top: 14px; width: 32%; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 8px 20px -12px rgba(0,0,0,0.25); opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.cw-git-mr.on { opacity: 1; transform: none; }
.cw-git-mr-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text); }
.cw-git-mr-t small { font-weight: 600; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-git-mr-d { margin: 3px 0 8px; font-size: 11px; line-height: 15px; color: var(--text-300); }
.cw-git-mr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cw-git-mr-chips span { font-size: 10px; line-height: 16px; padding: 0 7px; border-radius: 999px; background: var(--surface); color: var(--text-300); border: 1px solid var(--border); }
.cw-git-mr-ok { display: none; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text); }
.cw-git-mr-ok i { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-2); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; }
.cw-git-mr-ok span { font-weight: 500; color: var(--text-300); }
.cw-git-mr.ok .cw-git-mr-ok { display: flex; animation: fadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-git-ai { display: none; margin: 4px 16px 14px; padding: 10px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text); }
.cw-git-ai.on { display: flex; align-items: center; gap: 10px; animation: fadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-git-ai b { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); }
.cw-git-ai .caret { display: inline-block; width: 1px; height: 14px; background: var(--text); vertical-align: -2px; margin-left: 1px; animation: cwBlink 1s steps(2) infinite; }
@keyframes cwBlink { to { opacity: 0; } }
.cw-git-out { position: absolute; left: 16px; top: 14px; width: 34%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 8px 20px -12px rgba(0,0,0,0.25); opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.cw-git-out.on { opacity: 1; transform: none; }
.cw-git-out-item { display: flex; flex-direction: column; }
.cw-git-out-item b { font-size: 22px; line-height: 26px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cw-git-out-item span { font-size: 11px; line-height: 14px; color: var(--text-300); }
.cw-git-out em { flex-basis: 100%; font-style: normal; font-size: 11px; line-height: 15px; color: var(--text-300); }
.cw-git-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; padding: 16px; }
.cw-git-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); margin-bottom: 4px; }
.cw-git-title { margin: 0 0 6px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--text); }
.cw-git-text { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-git-text.in { animation: fadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-git-nav { display: flex; gap: 8px; align-items: center; }
.cw-git-dots { display: flex; gap: 5px; margin-right: 8px; }
.cw-git-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background 200ms ease, transform 200ms ease; }
.cw-git-dots i.on { background: var(--text); transform: scale(1.2); }
.cw-git-dots i.done { background: var(--text-200); }

/* ── 5. Text expansion (Language Translator) ── */
.cw-xp { margin-top: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.cw-xp-top { display: flex; flex-direction: column; gap: 12px; }
.cw-xp-form { display: flex; gap: 8px; }
.cw-xp-input { flex: 1; min-width: 0; appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 500 14px/20px 'Plus Jakarta Sans', sans-serif; padding: 7px 12px; border-radius: 999px; outline: none; transition: border-color 160ms ease; }
.cw-xp-input:focus { border-color: var(--text); }
.cw-xp-input::placeholder { color: var(--text-200); }
.cw-xp-ctl { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; font-size: 12px; color: var(--text-300); }
.cw-xp-ctl label { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: 1; }
.cw-xp-ctl output { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; min-width: 42px; }
.cw-xp-ctl input[type=range] { flex: 1; accent-color: var(--text); max-width: 240px; }
.cw-xp-rows { display: flex; flex-direction: column; }
.cw-xp-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 190px; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.cw-xp-lang { display: flex; flex-direction: column; font-size: 12px; color: var(--text-300); line-height: 16px; }
.cw-xp-lang b { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text); }
.cw-xp-btnwrap { min-width: 0; overflow: hidden; padding: 4px 0; }
.cw-xp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; width: var(--w, 140px); padding: 0 16px; border-radius: 999px; background: #fe2c55; /* TikTok red, the button being sized */ color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-xp-btn::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 1.5px dashed transparent; transition: border-color 200ms ease; pointer-events: none; }
.cw-xp-row.over .cw-xp-btn::after { border-color: var(--primary); }
.cw-xp-label { display: inline-block; white-space: nowrap; }
.cw-xp-label i { font-style: normal; color: var(--primary); }
.cw-xp-meta { display: grid; grid-template-columns: minmax(0, 1fr) 46px 78px; gap: 8px; align-items: center; font-size: 12px; }
.cw-xp-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface); overflow: hidden; }
.cw-xp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--text); transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-xp-row.over .cw-xp-bar i { background: var(--primary); }
.cw-xp-pct { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-xp-state { font-size: 11px; font-weight: 600; color: var(--text-300); white-space: nowrap; }
.cw-xp-row.over .cw-xp-state { color: var(--primary); }
.cw-xp-note { margin: 12px 0 0; font-size: 12px; line-height: 18px; color: var(--text-300); min-height: 18px; }
.cw-xp-measure { position: absolute; visibility: hidden; white-space: nowrap; font-size: 14px; font-weight: 600; font-family: 'Plus Jakarta Sans', sans-serif; pointer-events: none; }

/* ── 6. Motion lab (Animation to Code). The whole widget reproduces the team lab's own light look, in both site
   themes, so every colour here is raw hex on purpose (the lab's palette, TikTok red for accent) and never a
   site token. Plus Jakarta stays the typeface. On desktop it is centered on the case body and wider than it
   (symmetric bleed); the sticky section nav would sit under it, so body.cw-lab-focus fades the nav while the lab is in view. ── */
.cw-lab { --page: #f5f5f5; --surface: #ffffff; --widget: rgba(0,0,0,0.05); --ink: #161823; --ink-soft: rgba(22,24,35,0.65); --ink-faint: rgba(22,24,35,0.35); --line: rgba(22,24,35,0.08); --accent: #fe2c55; --accent-ink: #e10543; --accent-tint: #ffd9da; --teal: #008192; --teal-tint: rgba(0,129,146,0.12); --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; margin-top: 8px; border-radius: 18px; background: var(--page); color: var(--ink); border: 1px solid var(--line); padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 22px; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; }
.cw[data-widget="millab"] { transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
@media (min-width: 1400px) { .desktop-frame .cw[data-widget="millab"] { width: calc(100% + 360px); margin-left: -180px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .desktop-frame .cw[data-widget="millab"] { width: calc(100% + 200px); margin-left: -100px; } }
.sidebar-wrap, .case-sidebar { transition: opacity 0.3s ease; }
body.cw-lab-focus .desktop-frame .sidebar-wrap, body.cw-lab-focus .desktop-frame .case-sidebar { opacity: 0; pointer-events: none; }
.cw-lab-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; max-width: 680px; margin: 0 auto; }
.cw-lab-eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/16px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.cw-lab-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.cw-lab-h { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.cw-lab-lede { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink-soft); max-width: 60ch; }
.cw-lab-lede em { font-style: italic; color: var(--ink); }
.cw-lab-tabs { display: inline-flex; gap: 2px; margin-top: 8px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22,24,35,0.06), 0 10px 28px -14px rgba(22,24,35,0.22); }
.cw-lab-tabs button { appearance: none; border: 0; background: transparent; color: var(--ink-soft); font: 600 13px/18px 'Plus Jakarta Sans', sans-serif; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.cw-lab-tabs button:hover { color: var(--ink); }
.cw-lab-tabs button.on { background: var(--widget); color: var(--ink); }
.cw-lab-controls { display: flex; gap: 8px; margin-top: 6px; }
.cw-lab-auto, .cw-lab-replayall, .cw-lab-copy, .cw-lab-snap, .cw-lab-reset { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font: 600 12.5px/16px 'Plus Jakarta Sans', sans-serif; cursor: pointer; white-space: nowrap; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; }
.cw-lab-auto:hover, .cw-lab-replayall:hover, .cw-lab-copy:hover, .cw-lab-snap:hover, .cw-lab-reset:hover { color: var(--ink); background: var(--widget); }
.cw-lab-auto.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); }
.cw-lab-auto:focus-visible, .cw-lab-replayall:focus-visible, .cw-lab-copy:focus-visible, .cw-lab-replay:focus-visible, .cw-lab-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cw-lab-replayall svg, .cw-lab-replay svg, .cw-lab-copy svg { width: 13px; height: 13px; }
.cw-lab-panel { display: none; flex-direction: column; gap: 22px; }
.cw-lab-panel.on { display: flex; }
.cw-lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; gap: 20px 24px; align-items: stretch; /* subgrid: titles, descriptions, stages and feet each share a row across the variants */ }
.cw-lab-grid.two { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
.cw-lab-var { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 10px; align-content: start; min-width: 0; cursor: pointer; }
.cw-lab-var .cw-lab-why { align-self: start; }
.cw-lab-var .cw-lab-stage { align-self: end; }
.cw-lab-var .cw-lab-foot { align-self: start; }   /* an open spec in one variant must not push the neighbours' buttons down */
.cw-lab-tag { display: flex; align-items: baseline; gap: 8px; }
.cw-lab-tag h4 { margin: 0; flex: 1; min-width: 0; font-size: 14.5px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.cw-lab-tag .idx { font: 500 11px/16px var(--mono); color: var(--ink-faint); white-space: nowrap; }
.cw-lab-ported { font: 700 10px/16px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 7px; border-radius: 999px; background: var(--teal-tint); color: var(--teal); cursor: help; align-self: center; }
.cw-lab-why { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-soft); }
.cw-lab-stage { position: relative; width: 100%; height: 440px; overflow: hidden; border-radius: 14px; background: #e2e2e2; box-shadow: 0 1px 2px rgba(22,24,35,0.06), 0 10px 28px -14px rgba(22,24,35,0.22); display: flex; justify-content: center; transition: box-shadow 200ms ease; }
.cw-lab-stage.sheet { align-items: flex-end; padding: 18px 14px 0; background: #b9b9be; /* the sheet sits over a dimmed page, like the real component's backdrop */ }
.cw-lab-stage.card { align-items: center; padding: 16px; height: 460px; }
.cw-lab-var.sel .cw-lab-stage { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px -14px rgba(22,24,35,0.22); }
/* footer: Replay + Copy handoff sit together under the stage; the timing spec is secondary and folds out on demand */
.cw-lab-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cw-lab-specbtn { appearance: none; margin-left: auto; padding: 5px 9px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-faint); font: 500 11px/16px var(--mono); cursor: pointer; }
.cw-lab-specbtn:hover { color: var(--ink); background: var(--widget); }
.cw-lab-specbtn.on { color: var(--ink); border-color: var(--line); background: var(--surface); }
.cw-lab-spec { flex-basis: 100%; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font: 500 10.5px/15px var(--mono); color: var(--ink-soft); word-break: break-word; }
.cw-lab-spec[hidden] { display: none; }
.cw-lab-replay { appearance: none; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--page); font: 600 12.5px/16px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.cw-lab-replay:hover { background: #2a2c3a; }
.cw-lab-copy { padding: 7px 12px; background: var(--widget); color: var(--ink); font-size: 12px; }
.cw-lab-handoff-note { margin: -6px 0 0; text-align: center; font-size: 12px; line-height: 18px; color: var(--ink-faint); }
.cw-lab-copy.done { background: var(--teal-tint); border-color: var(--teal); color: var(--teal); }
.cw-lab-tune { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "head head" "sliders curve"; gap: 12px 24px; align-items: center; padding: 14px 18px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.cw-lab-tune-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cw-lab-tune-head b { font-weight: 700; }
.cw-lab-tune-target { color: var(--ink-soft); flex: 1; min-width: 0; }
.cw-lab-snap { padding-right: 10px; }
.cw-lab-snap option { color: #161823; background: #fff; }
.cw-lab-sliders { grid-area: sliders; display: flex; flex-direction: column; gap: 8px; }
.cw-lab-sliders label { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; gap: 10px; align-items: center; color: var(--ink-soft); }
.cw-lab-sliders input[type=range] { width: 100%; accent-color: var(--accent); }
.cw-lab-sliders output { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.cw-lab-tune.kf .cw-lab-sliders, .cw-lab-tune.kf .cw-lab-snap, .cw-lab-tune.kf .cw-lab-reset { opacity: 0.4; pointer-events: none; }
.cw-lab-curve { grid-area: curve; display: flex; flex-direction: column; gap: 4px; }
.cw-lab-curve svg { width: 100%; height: 56px; display: block; border-radius: 8px; background: var(--page); border: 1px solid var(--line); overflow: visible; }
.cw-lab-curve .one { stroke: rgba(22,24,35,0.18); stroke-width: 1; stroke-dasharray: 3 3; }
.cw-lab-curve .base { fill: none; stroke: rgba(22,24,35,0.22); stroke-width: 1.5; }
.cw-lab-curve .live { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.cw-lab-curve-note { font: 500 10.5px/14px var(--mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* stage mocks: the light product UI being prototyped */
.cw-lab-stage [data-el] { will-change: transform, opacity; }
.ml-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto; }
.ml-card .ml-handle, .ml-isheet .ml-handle { margin-bottom: 12px; }
/* coupon sheet */
.ml-sheet { width: 100%; max-width: 375px; background: var(--surface); border-radius: 20px 20px 0 0; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -6px 24px rgba(22,24,35,0.10); }
.ml-sheet-t { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; text-align: center; letter-spacing: -0.01em; }
.ml-sheet-s { margin: -8px 0 0; font-size: 12.5px; line-height: 17px; color: var(--ink-soft); text-align: center; }
.ml-offer { position: relative; display: flex; flex-direction: column; gap: 8px; border-radius: 20px; padding: 10px 8px; overflow: hidden; background: linear-gradient(180deg, #ff406c 30%, #e92b57 68%, #f5405f 100%); }
.ml-glow { position: absolute; left: 50%; top: 34%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 999px; background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 68%); opacity: 0; pointer-events: none; }
.ml-rays { position: absolute; left: 50%; top: 34%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ml-rays b { position: absolute; left: -1.5px; top: -78px; width: 3px; height: 68px; border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0)); transform-origin: 50% 100%; }
.ml-rays b:nth-child(1) { transform: rotate(0deg); } .ml-rays b:nth-child(2) { transform: rotate(45deg); } .ml-rays b:nth-child(3) { transform: rotate(90deg); } .ml-rays b:nth-child(4) { transform: rotate(135deg); } .ml-rays b:nth-child(5) { transform: rotate(180deg); } .ml-rays b:nth-child(6) { transform: rotate(225deg); } .ml-rays b:nth-child(7) { transform: rotate(270deg); } .ml-rays b:nth-child(8) { transform: rotate(315deg); }
.ml-couponwrap { position: relative; }
.ml-badge { position: absolute; top: 0; right: 0; z-index: 2; background: rgba(254,44,85,0.18); color: var(--accent-ink); font-size: 11px; font-weight: 600; line-height: 14px; height: 14px; padding: 0 4px; border-radius: 0 6px 0 6px; transform-origin: top right; }
.ml-ticket { display: flex; min-height: 58px; }
.ml-ticket-ic { flex-shrink: 0; width: 52px; display: flex; align-items: center; justify-content: center; background: #fff2f5; border: 0.5px solid rgba(225,5,67,0.1); border-right: 0; border-radius: 8px 0 0 8px; color: var(--accent-ink); }
.ml-ticket-ic svg { width: 18px; height: 18px; }
.ml-ticket-div { flex-shrink: 0; width: 8px; position: relative; background: #fff2f5; border-top: 0.5px solid rgba(225,5,67,0.1); border-bottom: 0.5px solid rgba(225,5,67,0.1); }
.ml-ticket-div::before, .ml-ticket-div::after { content: ''; position: absolute; left: 50%; width: 8px; height: 8px; border-radius: 999px; background: #e9315a; transform: translateX(-50%); }
.ml-ticket-div::before { top: -4px; } .ml-ticket-div::after { bottom: -4px; }
.ml-ticket-b { flex: 1; min-width: 0; background: #fff2f5; border: 0.5px solid rgba(225,5,67,0.1); border-left: 0; border-radius: 0 8px 8px 0; padding: 8px 8px 8px 4px; display: flex; flex-direction: column; gap: 3px; }
.ml-ticket-b b { font-size: 15px; line-height: 19px; font-weight: 700; color: var(--accent-ink); }
.ml-ticket-b span { font-size: 10px; line-height: 13px; color: var(--ink); }
.ml-ticket-b small { display: flex; justify-content: space-between; font-size: 10px; line-height: 13px; color: var(--ink-faint); margin-top: 2px; }
.ml-ticket-b small .tc { color: #2b5db9; }
.ml-keepzone { position: relative; height: 56px; display: flex; align-items: center; justify-content: center; }
.ml-keepglow { position: absolute; inset: -4px -3px; background: radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 68%); filter: blur(2px); pointer-events: none; }
.ml-keep { position: relative; width: 94%; background: #fff; color: var(--accent); font-size: 15px; font-weight: 600; text-align: center; padding: 11px 0; border-radius: 26px; text-shadow: 0 1px 0 #fff; box-shadow: inset 0 -2px 6px rgba(255,94,94,0.3), inset 0 -2px 8px rgba(255,94,94,0.5); }
.ml-cancel { margin-top: 8px; text-align: center; padding: 12px 0; border-radius: 26px; background: var(--widget); font-size: 14px; font-weight: 600; }
/* order card (badge reveal, tracking update, early payment) */
.ml-card { position: relative; width: 100%; max-width: 344px; background: var(--surface); border-radius: 14px; box-shadow: 0 1px 2px rgba(22,24,35,0.06), 0 10px 28px -14px rgba(22,24,35,0.22); }
.ml-head { display: flex; align-items: center; gap: 6px; padding: 12px 16px; }
.ml-store { display: flex; color: var(--ink); } .ml-store svg { width: 16px; height: 16px; }
.ml-name { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-card:not(.ml-card-pad) .ml-name { flex: 0 1 auto; }
.ml-chev { display: flex; color: var(--ink-faint); } .ml-chev svg { width: 14px; height: 14px; }
.ml-head .ml-chev { flex: 1; }
.ml-status { font-size: 15px; font-weight: 700; white-space: nowrap; }
.ml-card-pad .ml-name { font-size: 14px; font-weight: 600; } .ml-card-pad .ml-status { font-size: 14px; font-weight: 600; }
.ml-mall { background: #161823; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.02em; }
.ml-widget { margin: 0 12px 12px; background: var(--widget); border-radius: 10px; padding: 8px 12px; display: flex; align-items: flex-start; gap: 8px; }
.ml-wicon { position: relative; width: 14px; height: 14px; flex-shrink: 0; margin-top: 1.5px; }
.ml-wicon i { position: absolute; inset: 0; display: block; } .ml-wicon svg { width: 14px; height: 14px; display: block; }
.ml-wicon .truck { color: var(--ink); } .ml-wicon .check { color: #00b368; opacity: 0; }
.ml-wbody { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ml-refund { font-size: 12px; line-height: 17px; color: var(--ink); } .ml-refund b { font-weight: 600; } .ml-refund span { color: var(--teal); font-weight: 700; }
.ml-line1 { position: relative; height: 16px; overflow: hidden; perspective: 220px; }
.ml-state { position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 700; white-space: nowrap; backface-visibility: hidden; transform-origin: 50% 50%; }
.ml-state.new { opacity: 0; }
.ml-state b { color: var(--teal); }
.ml-msgrow { position: relative; height: 15px; margin-top: 2px; overflow: hidden; }
.ml-msg { position: absolute; left: 0; top: 0; width: 100%; font-size: 11.5px; line-height: 15px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-track { position: absolute; left: 0; top: 5px; width: 100%; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; opacity: 0; }
.ml-track i { display: block; height: 100%; width: 65%; border-radius: 999px; background: var(--teal); }
.ml-widget > .ml-chev { margin-left: auto; align-self: center; }
.ml-tracking { margin: 0 12px 12px; background: var(--widget); border-radius: 14px; padding: 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ml-tracking svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); } .ml-tracking svg:last-child { color: var(--ink-faint); margin-left: auto; }
.ml-tracking b { color: var(--teal); }
.ml-sku { display: flex; gap: 8px; padding: 0 12px; }
.ml-thumb { width: 72px; height: 72px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ml-thumb.dark { background: linear-gradient(160deg, #2b2b2b, #111); } .ml-thumb.dark svg { width: 46px; height: 46px; }
.ml-thumb.light { background: linear-gradient(160deg, #eef1f5, #cdd4de); color: #8b96a6; } .ml-thumb.light svg { width: 40px; height: 40px; }
.ml-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.ml-info .r1 { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.ml-info .t { flex: 1; min-width: 0; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-info .p { font-weight: 700; white-space: nowrap; }
.ml-info .r2 { display: flex; gap: 4px; font-size: 11px; } .ml-info .v { flex: 1; color: var(--ink-faint); } .ml-info .q { font-weight: 500; }
.ml-info .tags { display: flex; gap: 4px; }
.ml-info .tags span { background: rgba(203,103,11,0.12); color: #895109; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 3px; height: 14px; display: flex; align-items: center; border-radius: 4px; white-space: nowrap; }
.ml-cta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
.ml-cartbtn { width: 32px; height: 32px; border-radius: 999px; background: var(--widget); display: flex; align-items: center; justify-content: center; color: var(--ink); } .ml-cartbtn svg { width: 16px; height: 16px; }
.ml-primarywrap { position: relative; z-index: 0; }
.ml-primary { position: relative; z-index: 1; display: block; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 22px; border-radius: 999px; white-space: nowrap; }
.ml-flag { position: absolute; bottom: 100%; left: 0; margin-bottom: -6px; z-index: 2; height: 15px; display: flex; align-items: center; padding: 0 9px 0 6px; border-radius: 999px 999px 999px 3px; background: var(--accent-tint); color: var(--accent-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; transform-origin: bottom left; opacity: 0; }
@keyframes mlPopSettle { 0% { opacity: 0; transform: scale(0.35) rotate(-10deg) translateY(3px); } 100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); } }
@keyframes mlPeel { 0% { opacity: 0; transform: scaleY(0.1) skewX(-8deg) translateY(4px); } 55% { opacity: 1; transform: scaleY(1.12) skewX(2deg) translateY(-1.5px); } 78% { transform: scaleY(0.94) skewX(-1deg) translateY(0.5px); } 100% { opacity: 1; transform: scaleY(1) skewX(0deg) translateY(0); } }
.ml-ghost { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--widget); }
.ml-padrow { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 13px; padding: 8px 12px 0; position: relative; }
.ml-pad { background: var(--teal); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px; letter-spacing: 0.02em; }
.ml-total { color: var(--ink-soft); } .ml-padrow > b { font-weight: 600; }
.ml-infoic { display: flex; color: var(--ink-faint); } .ml-infoic svg { width: 14px; height: 14px; }
.ml-padtag { position: relative; background: var(--teal-tint); color: var(--teal); font-size: 11px; font-weight: 500; height: 18px; padding: 0 4px; border-radius: 4px; display: flex; align-items: center; gap: 2px; letter-spacing: 0.01em; }
.ml-padtag i { display: flex; transform-origin: 50% 50%; } .ml-padtag svg { width: 12px; height: 12px; }
.ml-tip { position: absolute; bottom: calc(100% + 10px); right: -6px; width: 200px; z-index: 5; background: #1c1c24; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 11.5px; line-height: 16px; font-weight: 400; opacity: 0; transform-origin: bottom right; pointer-events: none; box-shadow: 0 10px 28px -14px rgba(22,24,35,0.4); }
.ml-tip b { color: #7be0e0; }
.ml-tip::after { content: ''; position: absolute; bottom: -5px; right: 16px; width: 10px; height: 10px; background: #1c1c24; transform: rotate(45deg); }
.ml-panel { height: 0; overflow: hidden; opacity: 0; }
.ml-panel p { margin: 0; padding: 8px 16px 0; font-size: 11.5px; line-height: 16px; color: var(--ink-soft); } .ml-panel b { color: var(--ink); }
.ml-backdrop { position: absolute; inset: 0; background: rgba(22,24,35,0.45); opacity: 0; pointer-events: none; }
.ml-isheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 20px 20px 0 0; padding: 20px 16px 16px; transform: translateY(100%); box-shadow: 0 -6px 24px rgba(22,24,35,0.12); }
.ml-isheet-t { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.ml-isheet-b { margin: 0 0 16px; font-size: 12.5px; line-height: 18px; color: var(--ink-soft); } .ml-isheet-b b { color: var(--ink); }
.ml-isheet-cta { display: block; text-align: center; padding: 12px 0; border-radius: 26px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; }

/* mobile frame */
:is(.mobile-frame, .cw-narrow) .cw-lab { padding: 22px 14px 18px; border-radius: 16px; }
/* Vertical lab: below ~880px of the lab's own width three stages can't sit side by side without the mock
   text wrapping, so the variants stack. 600-880px: text on the left, stage on the right; under 600px: one
   plain column. Container query, so it holds in the mobile frame, the narrow desktop window and any bleed width. */
.cw[data-widget="millab"] { container-type: inline-size; }
@container (max-width: 879px) {
  .cw-lab-grid, .cw-lab-grid.two { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; justify-content: stretch; }
  .cw-lab-var { grid-template-rows: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "tag stage" "why stage" "foot stage"; column-gap: 24px; row-gap: 10px; align-content: start; }
  .cw-lab-var .cw-lab-tag { grid-area: tag; }
  .cw-lab-var .cw-lab-why { grid-area: why; font-size: 13.5px; line-height: 20px; }
  .cw-lab-var .cw-lab-stage { grid-area: stage; align-self: start; }
  .cw-lab-var .cw-lab-foot { grid-area: foot; align-self: end; }
  .cw-lab-var + .cw-lab-var { padding-top: 32px; border-top: 1px solid var(--line); }
  .cw-lab-tune { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sliders" "curve"; }
}
@container (max-width: 599px) {
  .cw-lab-var { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "tag" "why" "stage" "foot"; }
  .cw-lab-var .cw-lab-stage { width: 100%; max-width: 360px; margin: 4px auto 0; }
  .cw-lab-var .cw-lab-foot { align-self: start; }
}

/* ── jmodes: same question, three weights (Design Judgement) ── */
.cw-jm { margin-top: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); overflow: hidden; }
.cw-jm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.cw-jm-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); }
.cw-jm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); }
.cw-jm-seg button { appearance: none; border: 0; background: transparent; color: var(--text-300); font: 600 12px/18px 'Plus Jakarta Sans', sans-serif; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.cw-jm-seg button:hover { color: var(--text); }
.cw-jm-seg button.on { background: var(--text); color: var(--bg); }
.cw-jm-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
.cw-jm-ask { padding: 16px; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.cw-jm-ask p { margin: 0; font-size: 15px; line-height: 23px; color: var(--text); }
.cw-jm-mode { font-size: 12px; line-height: 18px; color: var(--text-300); margin-top: auto; padding-top: 12px; }
.cw-jm-who { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-300); }
.cw-jm-ans { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cw-jm-ans.in { animation: cwFadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cwFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cw-jm-meter { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-300); }
.cw-jm-meter b { color: var(--text); font-weight: 600; }
.cw-jm-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cw-jm-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; line-height: 20px; color: var(--text); padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.cw-jm-lines.ranked li { padding-left: 8px; }
.cw-jm-lines li.down { color: var(--text-300); }
.cw-jm-rank { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--text); color: var(--bg); align-self: center; }
.cw-jm-lines li.down .cw-jm-rank { background: transparent; border: 1px solid var(--border); color: var(--text-300); }
.cw-jm-text { flex: 1 1 60%; min-width: 0; }
.cw-jm-cite { font: 600 10.5px/16px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; padding: 0 6px; border-radius: 4px; white-space: nowrap; }
.cw-jm-cite.in { background: var(--accent-2-100); color: var(--accent-2); }
.cw-jm-cite.ex { border: 1px solid var(--border); color: var(--text-300); }
.cw-jm-cite.gs { color: var(--text-300); font-style: italic; }
.cw-jm-close { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cw-jm-close div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 19px; }
.cw-jm-close dt { font-weight: 700; color: var(--text); }
.cw-jm-close dd { margin: 0; color: var(--text-300); }
.cw-jm-close dd mark { background: var(--accent-2-100); color: var(--text); padding: 0 3px; border-radius: 3px; }
.cw-jm-note { margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11.5px; line-height: 17px; color: var(--text-300); }
:is(.mobile-frame, .cw-narrow) .cw-jm-body { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-jm-ask { border-right: 0; border-bottom: 1px solid var(--border); }
:is(.mobile-frame, .cw-narrow) .cw-jm-close div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
@media (prefers-reduced-motion: reduce) { .cw-jm-ans.in { animation: none; } }

/* ── mobile frame ── */
:is(.mobile-frame, .cw-narrow) .cw-step { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-step-stage { min-height: 440px; }
:is(.mobile-frame, .cw-narrow) .cw-step-stage img { width: 88%; }
:is(.mobile-frame, .cw-narrow) .cw-funnel-seg b { white-space: normal; }
:is(.mobile-frame, .cw-narrow) .cw-chart { --row: 62px; padding: 14px 12px; }
:is(.mobile-frame, .cw-narrow) .cw-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "n name tier" "bar bar val"; row-gap: 6px; column-gap: 8px; align-content: center; }
:is(.mobile-frame, .cw-narrow) .cw-row-n { grid-area: n; }
:is(.mobile-frame, .cw-narrow) .cw-row-name { grid-area: name; }
:is(.mobile-frame, .cw-narrow) .cw-row-tier { grid-area: tier; }
:is(.mobile-frame, .cw-narrow) .cw-row-bar { grid-area: bar; }
:is(.mobile-frame, .cw-narrow) .cw-row-val { grid-area: val; }
:is(.mobile-frame, .cw-narrow) .cw-chart-detail { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-chart-thumbs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* narrow stage: the cards flow under the graph instead of floating over it */
:is(.mobile-frame, .cw-narrow) .cw-git-mr, :is(.mobile-frame, .cw-narrow) .cw-git-out { display: none; position: static; width: auto; margin: 6px 16px 0; transform: none; box-shadow: none; }
:is(.mobile-frame, .cw-narrow) .cw-git-mr.on { display: block; }
:is(.mobile-frame, .cw-narrow) .cw-git-out.on { display: flex; }
:is(.mobile-frame, .cw-narrow) .cw-git-ai { margin-top: 8px; }
:is(.mobile-frame, .cw-narrow) .cw-git-mr-d { display: none; }
:is(.mobile-frame, .cw-narrow) .cw-git-panel { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-git-nav { justify-content: space-between; }
:is(.mobile-frame, .cw-narrow) .cw-xp-row { grid-template-columns: 64px minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-xp-meta { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 46px 84px; }
:is(.mobile-frame, .cw-narrow) .cw-xp-ctl input[type=range] { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .cw-step-stage img, .cw-row, .cw-row-bar i, .cw-funnel-seg i::after, .cw-git-stage .draw, .cw-git-stage .node, .cw-git-stage .lbl, .cw-git-mr, .cw-xp-btn, .cw-xp-bar i, .cw-sheet, .cw-cmp-handle span { transition-duration: 0.01ms !important; }
  .cw-tb-note.in, .cw-step-text.in, .cw-git-text.in, .cw-git-ai.on, .cw-git-mr.ok .cw-git-mr-ok, .cw-chart-detail.in, .cw-cmp.is-swap .cw-cmp-before, .cw-cmp.is-swap .cw-cmp-after { animation: none !important; }
  .cw-git-ai .caret { animation: none; }
}

/* ── 7. Tokopedia tab bar ── */
/* Phone mock = Figma "iPhone 14 Pro - Space Black" (267:28813), exported as phone-frame.webp (1312x2672,
   transparent display, Dynamic Island baked in). The real screens sit behind the bezel. --u is one design px
   of the 390-wide nav design (123:34008): the display is 89.863% of the frame width, 390 design px wide. */
.cw-tb { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 8px; }
.cw-tb-phone { position: relative; width: 330px; max-width: 100%; aspect-ratio: 1312 / 2672; container-type: inline-size; filter: drop-shadow(0 20px 28px rgba(0,0,0,0.22)); }
.cw-tb-mock { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 3; }
/* display = the transparent hole in the frame (measured from the export); black behind it so the screens'
   baked corners blend into the bezel */
.cw-tb-display { --u: 0.23042cqw; position: absolute; left: 5.183%; top: 2.171%; right: 4.954%; bottom: 2.171%; border-radius: 12.96cqw; overflow: hidden; background: #000; }
.cw-tb-screens { position: absolute; inset: 0; }
.cw-tb-screens [data-screen] { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top center; display: block; opacity: 0; }
.cw-tb-screens [data-screen].on { opacity: 1; transform: none; }
.cw-tb-screens [data-screen].leaving { opacity: 1; }   /* stays visible while its exit animation runs */
.cw-tb-screens .cw-tb-empty { height: 100%; display: grid; place-items: center; background: #f6f6f6; color: #6b6b68; font-size: calc(13 * var(--u)); line-height: 1.5; text-align: center; padding: 0 calc(28 * var(--u)); }
.cw-tb-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: #ffffff; /* app chrome */ }
.cw-tb-bar { display: flex; height: calc(50 * var(--u)); }
.cw-tb-tab { appearance: none; border: 0; background: transparent; flex: 0 0 20.26%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); padding: 0; cursor: pointer; color: #080808; -webkit-tap-highlight-color: transparent; }
.cw-tb-tab:first-child { flex-basis: 18.97%; }
.cw-tb-tab.on { color: #008527; }
.cw-tb-ico { position: relative; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.cw-tb-ico lottie-player { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cw-tb-name { font: 400 calc(10 * var(--u)) / calc(12 * var(--u)) 'Plus Jakarta Sans', sans-serif; letter-spacing: calc(0.1 * var(--u)); white-space: nowrap; }
.cw-tb-home { position: relative; height: calc(21 * var(--u)); }
.cw-tb-home i { position: absolute; left: 50%; bottom: calc(8 * var(--u)); width: calc(144 * var(--u)); height: calc(5 * var(--u)); border-radius: 100px; background: #000; transform: translateX(-50%); }
.cw-tb-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw-tb-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); }
.cw-tb-note { margin: 4px 0 0; font-size: 14px; line-height: 22px; color: var(--text-300); min-height: 44px; }
.cw-tb-note strong { color: var(--text); font-weight: 600; }
.cw-tb-note.in { animation: fadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-tb-hint { margin: 0; font-size: 12px; color: var(--text-200); }

/* ── 8. Annotated scrub ── */
.cw-scrub { margin-top: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.cw-scrub-stage { width: 100%; border-radius: 10px; padding: 28px 20px; display: flex; justify-content: center; background: #000; /* the demo was recorded on black */ }
/* Auction card: a rebuild of the TikTok LIVE pin card (Figma 10:57991 / 259:27382), so its chrome is raw hex on purpose (white card in both themes) */
.cw-auc { position: relative; width: 100%; max-width: 376px; display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: 8px; background: #fff; color: rgba(0,0,0,0.92); font-family: 'Plus Jakarta Sans', sans-serif; }
.cw-auc-thumb { position: relative; flex: 0 0 78px; width: 78px; height: 78px; border-radius: 8px; background: #f9f9f9; overflow: hidden; }
.cw-auc-thumb img { position: absolute; left: 8px; top: 7px; width: 60px; height: 64px; object-fit: cover; }
.cw-auc-clock { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: flex-start; height: 29px; }
.cw-auc-gavel { width: 24px; height: 24px; position: relative; z-index: 1; }
.cw-auc-clock b { display: flex; align-items: flex-start; height: 20px; margin: 2px 0 0 -8px; padding: 0 10px 0 12px; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #cccccc 0%, #ae00ff 67.6%, rgba(230,176,255,0) 100%); color: #fff; font-weight: 700; font-size: 16px; line-height: 20px; font-style: italic; transform: skewX(-4.26deg); }
.cw-auc.hot .cw-auc-clock b { background: linear-gradient(90deg, #cccccc 0%, #fe2c55 67.6%, rgba(255,176,190,0) 100%); }
.cw-auc-roll { display: inline-flex; flex-direction: column; height: 20px; overflow: hidden; }
.cw-auc-roll > span { display: block; height: 20px; line-height: 20px; }
.cw-auc-clock b i { font-size: 12px; font-style: italic; line-height: 22px; }
.cw-auc-ext { font-size: 12px; font-style: italic; line-height: 22px; margin-left: 1px; transform-origin: left center; }
.cw-auc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1; }
.cw-auc-bids { display: inline-block; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(89,89,89,0.15); font-size: 12px; line-height: 20px; }
.cw-auc-title { margin: 0; width: 100%; font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-auc-lead { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 18px; color: rgba(0,0,0,0.55); white-space: nowrap; }
.cw-auc-av { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }
.cw-auc-win { color: #009e3d; }
.cw-auc-price { font-weight: 400; }
.cw-scrub-track { position: relative; height: 28px; margin: 12px 0 8px; cursor: pointer; touch-action: pan-y; outline: none; }
.cw-scrub-rail { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.cw-scrub-fill { height: 100%; width: 0; background: var(--text); }
.cw-scrub-mark { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text-200); pointer-events: none; transition: border-color 160ms ease, background 160ms ease; }
.cw-scrub-mark.on { border-color: var(--accent-2); background: var(--accent-2); }
.cw-scrub-thumb { position: absolute; top: 5px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.18); pointer-events: none; }
.cw-scrub-track:focus-visible .cw-scrub-thumb { box-shadow: 0 0 0 3px var(--accent-2-100); }
.cw-scrub-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cw-scrub-text { margin: 12px 0 0; font-size: 14px; line-height: 22px; color: var(--text-300); min-height: 22px; }
.cw-scrub-text strong { color: var(--text); font-weight: 600; }
.cw-scrub-text.in { animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── 9. Device tiles ── */
.cw-tiles { margin-top: 8px; }
.cw-tiles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cw-tile { appearance: none; border: 0; padding: 0; position: relative; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--surface); aspect-ratio: 1; outline: none; box-shadow: 0 0 0 1px var(--border); transition: box-shadow 200ms ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-tile:hover img, .cw-tile.on img { transform: scale(1.04); }
.cw-tile:hover, .cw-tile.on { box-shadow: 0 0 0 1px var(--border), 0 18px 32px -16px rgba(0,0,0,0.45); transform: translateY(-3px); }
.cw-tile:focus-visible { box-shadow: 0 0 0 2px var(--accent-2); }
.cw-tile-n { display: none; }
.cw-tile.on .cw-tile-n { background: var(--accent-2); }
.cw-tile-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0)); color: #fff; /* over a photo */ font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-tiles-detail { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.cw-tiles-detail.in { animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-tiles-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.cw-tiles-head b { font-size: 15px; font-weight: 700; color: var(--text); }
.cw-tiles-who { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-2-100); color: var(--accent-2); }
.cw-tiles-detail p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }

/* ── 10. Hotspots ── */
.cw-hs { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; margin-top: 8px; }
.cw-hs-stage { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 0 var(--border), 0 24px 48px -24px rgba(0,0,0,0.35); }
.cw-hs-stage img { display: block; width: 100%; height: auto; }
.cw-hs-pin { position: absolute; appearance: none; border: 0; padding: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--bg); color: var(--text); font: 700 11px/1 'Plus Jakarta Sans', sans-serif; box-shadow: 0 0 0 2px var(--text), 0 4px 12px rgba(0,0,0,0.25); cursor: pointer; display: grid; place-items: center; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background 160ms ease, color 160ms ease; }
.cw-hs-pin::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent-2); opacity: 0; }
.cw-hs-pin:hover { transform: scale(1.1); }
.cw-hs-pin.on { background: var(--accent-2); color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 4px 12px rgba(0,0,0,0.25); }
.cw-hs-pin.on::before { animation: cwPing 1.6s ease-out infinite; }
@keyframes cwPing { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.cw-hs-panel { position: sticky; top: 90px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.cw-hs-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.cw-hs-list li button { appearance: none; width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; cursor: pointer; color: var(--text-300); font: 500 13px/18px 'Plus Jakarta Sans', sans-serif; transition: background 160ms ease, color 160ms ease; }
.cw-hs-list li button:hover { background: var(--bg); color: var(--text); }
.cw-hs-list li.on button { color: var(--text); font-weight: 600; }
.cw-hs-list li.on .cw-step-n { background: var(--accent-2); color: #fff; }
.cw-hs-text { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-hs-text strong { color: var(--text); font-weight: 600; }
.cw-hs-text.in { animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── 11. Loupe ── */
.cw-loupe { position: relative; cursor: zoom-in; overflow: hidden; border-radius: 4px; }
.cw-loupe img { display: block; width: 100%; height: auto; }
.cw-loupe-lens { position: absolute; width: 180px; height: 180px; border-radius: 50%; background-repeat: no-repeat; background-color: var(--bg); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--border), 0 12px 30px rgba(0,0,0,0.25); pointer-events: none; opacity: 0; transform: scale(0.9); transition: opacity 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.cw-loupe.is-on .cw-loupe-lens { opacity: 1; transform: none; }
.cw-loupe-hint { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(20,20,19,0.78); color: #fff; font-size: 11px; font-weight: 600; pointer-events: none; transition: opacity 300ms ease; }
.cw-loupe.is-used .cw-loupe-hint, .cw-loupe.no-loupe .cw-loupe-hint { opacity: 0; }

/* ── 12. Palette ── */
.cw-pal { margin-top: 8px; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 14px; }
.cw-pal-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.cw-pal-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); }
.cw-pal-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.cw-pal-img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--surface); }
.cw-pal-sw { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-pal-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cw-pal-chip i { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-pal-chip.match i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2); }
.cw-pal-chip:hover i { transform: scale(1.08); }
.cw-pal-chip b { font-size: 10px; font-weight: 600; color: var(--text-300); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cw-pal-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--text-300); }

/* ── deck mode ── */
.cw-deck-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; appearance: none; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: 600 13px/20px 'Plus Jakarta Sans', sans-serif; padding: 7px 14px 7px 12px; border-radius: 999px; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; }
.cw-deck-btn svg { width: 16px; height: 16px; }
.cw-deck-btn:hover { border-color: var(--text-200); transform: translateY(-1px); }
.cw-deck { position: fixed; inset: 0; z-index: 10050; display: none; flex-direction: column; background: rgba(12,12,12,0.96); color: #fff; /* presentation overlay stays dark */ font-family: 'Plus Jakarta Sans', sans-serif; }
.cw-deck.open { display: flex; animation: cwFade 0.24s ease both; }
.cw-deck-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7); }
.cw-deck-actions { display: flex; gap: 8px; }
.cw-deck-fs, .cw-deck-x, .cw-deck-prev, .cw-deck-next { appearance: none; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font: 600 12px/16px 'Plus Jakarta Sans', sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background 160ms ease; }
.cw-deck-fs:hover, .cw-deck-x:hover, .cw-deck-prev:hover, .cw-deck-next:hover { background: rgba(255,255,255,0.14); }
.cw-deck-x { width: 32px; padding: 0; height: 30px; font-size: 18px; line-height: 1; }
.cw-deck-prev, .cw-deck-next { width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1; }
.cw-deck-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 24px; user-select: none; }
.cw-deck-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }
.cw-deck-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 18px 20px; }
.cw-deck-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 60vw; }
.cw-deck-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.cw-deck-dots i.on { background: #fff; transform: scale(1.25); }

/* ── works year wheel ── */
/* a sideways wheel in a hairline pill at the right end of .tabs on desktop; on the mobile frame it is a slim row
   under the tabs with the count on the left. The centred stop between the two ticks is the selection. */
.cw-yd { position: relative; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cw-yd--row { margin: -22px 0 -8px; justify-content: space-between; width: 100%; }
.cw-yd-count { font: 400 13px/18px 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--text-300); white-space: nowrap; }
.cw-yd-count b { font-weight: 500; color: var(--text); }
.cw-yd:not(.cw-yd--row) .cw-yd-count { opacity: 0; transition: opacity 160ms ease; }
.cw-yd:not(.cw-yd--row).on .cw-yd-count { opacity: 1; }
.cw-yd-wheel { position: relative; width: 190px; height: 32px; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--bg); transition: border-color 0.2s; }
.cw-yd-wheel:hover, .cw-yd.on .cw-yd-wheel { border-color: var(--text-200); }
.cw-yd-wheel::before, .cw-yd-wheel::after { content: ''; position: absolute; left: 50%; width: 1px; height: 5px; background: var(--text); transform: translateX(-50%); pointer-events: none; z-index: 1; }
.cw-yd-wheel::before { top: 0; } .cw-yd-wheel::after { bottom: 0; }
.cw-yd-list { display: flex; height: 100%; padding: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: pointer; outline: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.cw-yd-list::-webkit-scrollbar { display: none; }
/* the run-in on each end that lets the first and last stop reach the centre: spacer boxes, not padding, because
   WebKit has not always counted trailing padding in a flex scroller's scrollable width (the last year could then
   never be centred and the snap fought the strip) */
.cw-yd-list::before, .cw-yd-list::after { content: ''; flex: 0 0 calc(50% - 30px); }
.cw-yd-list.grab { cursor: ew-resize; scroll-snap-type: none; }
.cw-yd-list:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.cw-yd-opt { flex: 0 0 60px; display: grid; place-items: center; height: 100%; padding: 0; appearance: none; border: 0; background: none; font: 400 13px/18px 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--text-300); cursor: inherit; scroll-snap-align: center; user-select: none; -webkit-user-select: none; transition: color 160ms ease; }
.cw-yd-opt[aria-selected="true"] { color: var(--text); font-weight: 500; }
:is(.mobile-frame, .cw-narrow) .cw-yd-wheel { width: 170px; height: 30px; }
/* margin rail: fixed at the left edge while the tabs row is above the viewport (desktop, fine pointer only) */
.cw-ydr { position: fixed; left: 22px; top: 50%; transform: translate(-8px, -50%); z-index: 30; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 10px 10px; opacity: 0; pointer-events: none; transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-ydr.on { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.cw-ydr-i { position: relative; display: flex; align-items: center; gap: 10px; height: 22px; padding: 0; appearance: none; border: 0; background: none; cursor: pointer; color: var(--text-300); text-align: left; }
.cw-ydr-i i { display: block; width: 14px; height: 1.5px; border-radius: 1px; background: var(--text-200); transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1), background 160ms ease, opacity 160ms ease; }
.cw-ydr-i.on i { width: 26px; background: var(--text); }
.cw-ydr-i b { font: 400 13px/18px 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), color 160ms ease; white-space: nowrap; }
.cw-ydr-i.on b { color: var(--text); font-weight: 500; }
.cw-ydr:hover .cw-ydr-i b { opacity: 1; transform: none; }
.cw-ydr:hover .cw-ydr-i i { width: 10px; }
.cw-ydr:hover .cw-ydr-i.on i { width: 18px; }
.cw-ydr:hover .cw-ydr-i:not(.hover):not(.on) b { color: var(--text-200); }
.cw-ydr:hover .cw-ydr-i.hover b { color: var(--text); }
.cw-ydr:hover .cw-ydr-i.hover i { background: var(--text); }
@media (max-width: 1180px) { .cw-ydr { display: none; } }
.cw-yd-empty[hidden] { display: none; }   /* an author display wins over the UA rule for [hidden], so say it here */
.cw-yd-empty { display: flex; align-items: baseline; gap: 8px; margin: 28px 0 0; font: 400 14px/22px 'Plus Jakarta Sans', sans-serif; color: var(--text-300); }
.cw-yd-empty button { appearance: none; border: 0; padding: 0; background: none; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* what the year actually does: the filtered-out cards leave the grid, and a section with nothing left goes with them */
.works-page-content .section.cw-yd-lead { margin-top: 0 !important; }   /* beats the inline 40px on the 2nd and 3rd sections */
.work-card.is-off { display: none !important; }
.works-page-content .section.is-off { display: none; }

/* ── command palette ── */
.cw-cmd-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,0.55); color: var(--text); cursor: pointer; padding: 0; margin-left: 4px; margin-right: -8px; transition: background 200ms ease-out, transform 160ms ease-out, border-color 200ms ease-out; -webkit-tap-highlight-color: transparent; }
[data-theme="dark"] .cw-cmd-btn { background: rgba(22,21,26,0.55); } /* same fill as the theme toggle beside it */
.cw-cmd-btn:hover { transform: scale(1.08); border-color: var(--text-200); }
.cw-cmd-btn svg { width: 18px; height: 18px; }
.cw-cmd { position: fixed; inset: 0; z-index: 10060; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; background: rgba(0,0,0,0.35); }
.cw-cmd.open { display: flex; animation: cwFade 0.18s ease both; }
.cw-cmd-box { width: 100%; max-width: 560px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5); overflow: hidden; animation: fadeUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; font-family: 'Plus Jakarta Sans', sans-serif; }
.cw-cmd-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-300); }
.cw-cmd-in svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cw-cmd-in input { flex: 1; min-width: 0; appearance: none; border: 0; background: transparent; color: var(--text); font: 500 15px/22px 'Plus Jakarta Sans', sans-serif; outline: none; }
.cw-cmd-in input::placeholder { color: var(--text-200); }
.cw-cmd-in kbd { font: 600 10px/16px 'Plus Jakarta Sans', sans-serif; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); color: var(--text-300); }
.cw-cmd-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.cw-cmd-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.cw-cmd-list li.on { background: var(--surface); }
.cw-cmd-list li.empty { color: var(--text-300); font-size: 13px; cursor: default; }
.cw-cmd-t { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.cw-cmd-s { font-size: 12px; color: var(--text-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-cmd-g { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-200); }
.cw-cmd-list li.cw-cmd-h { display: block; padding: 8px 10px 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-200); cursor: default; }
.cw-cmd-list li.cw-cmd-h + li { margin-top: 0; }
.cw-cmd-list li.cw-cmd-h:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; border-radius: 0; }
.cw-cmd-t mark, .cw-cmd-s mark { background: var(--accent-2-100); color: var(--accent-2); border-radius: 3px; padding: 0 1px; }
.cw-cmd-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; line-height: 16px; color: var(--text-300); }
.cw-cmd-foot kbd { display: inline-block; min-width: 16px; text-align: center; font: 600 10px/16px 'Plus Jakarta Sans', sans-serif; padding: 0 4px; border-radius: 4px; border: 1px solid var(--border); margin-right: 4px; color: var(--text-300); }
:is(.mobile-frame, .cw-narrow) .cw-cmd-foot { display: none; }

/* ── meter chip tooltips ── */
.cw-tip { position: relative; cursor: help; outline: none; }
.cw-tip::after { content: attr(data-def); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 6; width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 8px; background: var(--text); color: var(--bg); font: 400 12px/18px 'Plus Jakarta Sans', sans-serif; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; white-space: normal; text-transform: none; letter-spacing: 0; }
.cw-tip:hover::after, .cw-tip:focus-visible::after, .cw-tip.open::after { opacity: 1; transform: none; }

.cw-step-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-step-tags span { font-size: 11px; font-weight: 600; line-height: 18px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-300); background: var(--bg); }
.cw-step-tags span.accent { background: var(--accent-2-100); color: var(--accent-2); border-color: transparent; }

/* ── mobile frame (round two) ── */
:is(.mobile-frame, .cw-narrow) .cw-tb { grid-template-columns: minmax(0, 1fr); justify-items: center; }
:is(.mobile-frame, .cw-narrow) .cw-tb-side { width: 100%; }
:is(.mobile-frame, .cw-narrow) .cw-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.mobile-frame, .cw-narrow) .cw-hs { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-hs-panel { position: static; }
:is(.mobile-frame, .cw-narrow) .cw-pal-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
:is(.mobile-frame, .cw-narrow) .cw-pal-body { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-pal-img { width: 100%; height: 120px; }
:is(.mobile-frame, .cw-narrow) .cw-cmd-list li { grid-template-columns: minmax(0, 1fr) auto; }
:is(.mobile-frame, .cw-narrow) .cw-cmd-s { display: none; }
:is(.mobile-frame, .cw-narrow) .cw-loupe-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cw-tb-screens [data-screen], .cw-tile, .cw-tile img, .cw-hs-pin, .cw-loupe-lens, .cw-pal-chip i, .cw-yd-wheel, .cw-yd-opt, .cw-ydr, .cw-ydr-i i, .cw-ydr-i b { transition-duration: 0.01ms !important; }
  .cw-yd-list { scroll-behavior: auto; }
  .cw-hs-pin.on::before { animation: none; }
  .cw-scrub-text.in, .cw-tiles-detail.in, .cw-hs-text.in, .cw-deck.open, .cw-cmd.open, .cw-cmd-box { animation: none !important; }
}

.cw-between { margin: 56px 0 72px; }

/* ── hmw: iteration rounds (Pre-LIVE) ─────────────────────────────── */
.cw-hmw { margin-top: 8px; }
.cw-hmw + .cw-hmw, .cw[data-widget="hmw"] + .cw[data-widget="hmw"] { margin-top: 56px; }
.cw-hmw-q { margin: 0 0 14px; font: 500 20px/28px 'Plus Jakarta Sans', sans-serif; color: var(--text); letter-spacing: -0.01em; max-width: 640px; }
.cw-hmw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cw-hmw-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.cw-hmw-stage { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 24px; border-radius: 16px; background: var(--surface); min-height: 520px; opacity: 0; transform: translateY(6px); transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-hmw-stage.in { opacity: 1; transform: none; }
.cw-hmw-stage img { display: block; width: auto; height: 480px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0,0,0,0.22)); }
.cw-hmw-stage img { cursor: zoom-in; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.cw-hmw-stage.two img { height: 420px; max-width: calc(50% - 8px); }
.cw-hmw-stage.three { gap: 0; }
.cw-hmw-stage.three img { position: relative; height: auto; max-height: 420px; max-width: 46%; }
.cw-hmw-stage.three img + img { margin-left: -19%; }
.cw-hmw-stage.three img:nth-child(1), .cw-hmw-stage.three img:nth-child(3) { transform: translateY(14px) scale(0.94); opacity: 0.92; }
.cw-hmw-stage.three img:nth-child(2) { z-index: 2; }
.cw-hmw-stage.three img:hover { z-index: 3; transform: none; opacity: 1; }
.cw-hmw-stage img[src$="snippet.webp"] { height: auto; width: 46%; max-width: 46%; border-radius: 10px; }
.cw-hmw-panel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; opacity: 0; transition: opacity 0.42s ease; }
.cw-hmw-panel.in { opacity: 1; }
.cw-hmw-title { font: 600 17px/24px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-hmw-idea { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-hmw-verdicts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-hmw-verdicts li { display: grid; grid-template-columns: 44px 16px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 20px; color: var(--text); }
.cw-hmw-team { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-300); line-height: 16px; }
.cw-hmw-ico { width: 16px; height: 16px; color: var(--text-300); }
.cw-hmw-ico svg { width: 16px; height: 16px; display: block; }
.cw-hmw-verdicts li.ok .cw-hmw-ico { color: var(--primary); }
.cw-hmw-verdicts li.ok { background: var(--primary-100); }
.cw-hmw-verdicts li.warn .cw-hmw-ico { color: var(--primary); }
.cw-hmw-verdicts li.warn { background: var(--primary-100); }
.cw-hmw-panel .cw-step-nav { margin-top: auto; padding-top: 8px; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-body { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-hmw-stage { min-height: 0; padding: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-stage img { height: 380px; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-stage.two img { height: 300px; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-stage.three img { max-height: 320px; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-q { font-size: 18px; line-height: 26px; }
/* folded reveal (data-reveal): trigger card + 0fr/1fr fold */
.cw-hmw-trigger { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 8px; text-align: left; appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 14px 16px; cursor: pointer; color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; transition: transform 200ms ease-out, border-color 200ms ease, box-shadow 300ms ease; -webkit-tap-highlight-color: transparent; }
.cw-hmw-trigger:hover { transform: translateY(-1px); border-color: var(--text-200); }
.cw-hmw-trigger:active { transform: scale(0.995); }
.cw-hmw-trigger.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.cw-hmw-spark { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.cw-hmw-spark svg { width: 16px; height: 16px; display: block; }
.cw-hmw-trigger:hover .cw-hmw-spark { transform: scale(1.08); }
.cw-hmw-trigger.on .cw-hmw-spark { transform: rotate(90deg); }
.cw-hmw-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-hmw-tq { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; }
.cw-hmw-ts { font-size: 12.5px; line-height: 18px; color: var(--text-300); }
.cw-hmw-tcta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--text-300); transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.cw-hmw-tcta svg { width: 12px; height: 12px; transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1); }
.cw-hmw-trigger:hover .cw-hmw-tcta { color: var(--text); border-color: var(--text-200); }
.cw-hmw-trigger.on .cw-hmw-tcta { background: var(--text); color: var(--bg); border-color: var(--text); }
.cw-hmw-trigger.on .cw-hmw-tcta svg { transform: rotate(180deg); }
.cw-hmw-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 560ms cubic-bezier(0.16, 1, 0.3, 1); }
.cw-hmw-fold.open { grid-template-rows: 1fr; }
.cw-hmw-fold-in { min-height: 0; overflow: hidden; }
.cw-hmw-fold .cw-hmw { margin-top: 20px; padding-bottom: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-trigger { flex-wrap: wrap; }
:is(.mobile-frame, .cw-narrow) .cw-hmw-tt { flex-basis: calc(100% - 50px); }
:is(.mobile-frame, .cw-narrow) .cw-hmw-tcta { margin-left: 50px; }
@media (prefers-reduced-motion: reduce) { .cw-hmw-stage, .cw-hmw-stage img, .cw-hmw-panel, .cw-hmw-fold, .cw-hmw-spark, .cw-hmw-tcta svg { transition-duration: 0.01ms !important; } }



/* ── Deck boards (Product Selection). Dark in both themes on purpose: they reproduce the original TikTok-styled deck slides, so the board chrome is raw hex ── */
.cw-bd { margin-top: 8px; padding: 36px 32px; border-radius: 24px; background: #000; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; display: flex; flex-direction: column; gap: 28px; }
.cw-bd-pill { align-self: flex-start; padding: 6px 16px; border-radius: 999px; background: #fe2c55; color: #fff; font-size: 13px; font-weight: 600; line-height: 18px; }
.cw-bd-pill.warn { background: #fe7c02; }
.cw-bd-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; max-width: 660px; color: #fff; }
.cw-bd-title .hl { color: #00bad0; }
.cw-bd-mut { margin: 0; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 20px; }
.cw-bd-lane { display: flex; align-items: center; gap: 16px; }
.cw-bd-lane span { padding: 6px 16px; border-radius: 999px; background: #fe2c55; color: #fff; font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.cw-bd-lane::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.3); }
.cw-bd-text b { display: block; font-size: 15px; font-weight: 700; line-height: 20px; max-width: 560px; }
.cw-bd-text b + span { margin-top: 4px; }
.cw-bd-text span { display: block; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 20px; max-width: 560px; }
.cw-bd-cap { margin: 12px 0 0; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 20px; }
.cw-bd img[data-zoom] { cursor: zoom-in; }
/* phones */
.cw-bd-phones { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; padding: 0 12px; }
.cw-bd-phone { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cw-bd-phone img { display: block; width: 100%; max-width: 200px; height: auto; }
.cw-bd-phone figcaption { width: 100%; max-width: 220px; }
.cw-bd-phone figcaption b { display: block; font-size: 14px; font-weight: 700; line-height: 19px; }
.cw-bd-phone figcaption span { display: block; margin-top: 4px; color: rgba(255,255,255,0.6); font-size: 13px; line-height: 18px; }
.cw-bd-arrow { position: absolute; left: -26px; top: 46%; width: 24px; height: 12px; }
.cw-bd-arrow::before { content: ''; position: absolute; left: 2px; right: 3px; top: 5px; height: 1px; background: rgba(255,255,255,0.55); }
.cw-bd-arrow::after { content: ''; position: absolute; right: 3px; top: 2px; width: 6px; height: 6px; border-right: 1px solid rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.55); transform: rotate(-45deg); }
/* checks */
.cw-bd-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cw-bd-checks li { display: flex; gap: 10px; align-items: flex-start; }
.cw-bd-checks .cw-bd-ic { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.cw-bd-checks b { display: block; font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-checks span { display: block; margin-top: 3px; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 20px; }
/* browser frame */
.cw-bd-pc, .cw-bd-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; }
.cw-bd-hero { align-items: start; }
.cw-bd-pc.right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cw-bd-pc.wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
.cw-bd-pc[style*="--pad"] .cw-bd-pc-shot { margin-bottom: var(--pad); }
.cw-bd-rgrid.dense { gap: 12px 8px; }
.cw-bd-rgrid.dense .cw-bd-rq { font-size: 10px; line-height: 13px; min-height: 26px; }
.cw-bd-rgrid.dense .cw-bd-rtag { font-size: 10.5px; line-height: 13px; }
.cw-bd-rgrid.dense .cw-bd-rcell { gap: 6px; }
.cw-bd-rgrid.dense img { border-radius: 6px; }
.cw-bd-pc.right .cw-bd-pc-side { order: 2; }
.cw-bd-hero-txt { display: flex; flex-direction: column; gap: 14px; }
.cw-bd-pc-shot { position: relative; }
.cw-bd-browser { position: relative; border-radius: 8px; overflow: visible; background: #38393a; box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.cw-bd-bar { height: 24px; border-radius: 8px 8px 0 0; background: #191c1f; display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.cw-bd-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.cw-bd-bar i:nth-child(2) { background: #febc2e; }
.cw-bd-bar i:nth-child(3) { background: #28c840; }
.cw-bd-bar span { margin: 0 auto; transform: translateX(-11px); background: #0c0f12; color: #fff; font-size: 8px; line-height: 14px; padding: 0 12px; border-radius: 4px; }
.cw-bd-browser > img { display: block; width: 100%; height: auto; border-radius: 0 0 8px 8px; }
.cw-bd-float { position: absolute; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.5); }
.cw-bd-float.raw { border-radius: 0; box-shadow: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45)); }
/* before / after */
.cw-bd-compare { display: flex; flex-direction: column; gap: 16px; }
.cw-bd-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cw-bd-side { margin: 0; min-width: 0; }
.cw-bd-side img { display: block; width: 100%; height: auto; border-radius: 10px; margin-top: 8px; }
.cw-bd-action { margin-top: 8px; padding: 12px 16px; border-radius: 10px; background: #fff; color: rgba(0,0,0,0.92); font-size: 12px; line-height: 18px; }
.cw-bd-action em { font-style: normal; font-weight: 600; color: #009995; }
.cw-bd-action b { font-weight: 600; }
.cw-bd-action .cw-bd-ic { display: inline-block; width: 14px; height: 14px; vertical-align: -3px; }
.cw-bd-nw { white-space: nowrap; }
.cw-bd-ul { margin: 12px 0 0; padding-left: 18px; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 20px; }
.cw-bd-ul li::marker { color: rgba(255,255,255,0.85); }
/* numbered steps (issue board) */
.cw-bd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cw-bd-pairs { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-template-rows: auto auto; gap: 24px; }
.cw-bd-pair { margin: 0; display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 24px; justify-items: center; }
.cw-bd-pair-txt { display: flex; gap: 14px; width: 100%; }
.cw-bd-pair-txt b { display: block; font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-pair-txt span:not(.cw-bd-n) { display: block; margin-top: 3px; color: rgba(255,255,255,0.6); font-size: 13px; line-height: 18px; }
.cw-bd-pair img { display: block; width: 100%; max-width: 200px; height: auto; cursor: zoom-in; }
.cw-bd-steps li { display: flex; gap: 14px; }
.cw-bd-n { font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-steps b { display: block; font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-steps span:not(.cw-bd-n) { display: block; margin-top: 3px; color: rgba(255,255,255,0.6); font-size: 13px; line-height: 18px; }
/* chips: the real TikTok product-row tags, raw hex on purpose */
.cw-bd-chip { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 4px; border-radius: 4px; background: #ffeaee; color: #000; font-size: 11px; line-height: 18px; white-space: nowrap; }
.cw-bd-chip.bolt { background: #ffefe9; }
.cw-bd-chip.thumb { background: #ececed; color: #171718; }
.cw-bd-chip.gift, .cw-bd-chip.fire { background: #ffeaee; }
.cw-bd-chip .cw-bd-ic { width: 12px; height: 12px; flex: 0 0 12px; }
/* label mapping */
.cw-bd-labels { display: flex; flex-direction: column; gap: 16px; }
.cw-bd-labels-grid { display: flex; flex-direction: column; gap: 18px; }
.cw-bd-labels-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cw-bd-labels-list li { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); align-items: center; gap: 14px; }
.cw-bd-labels-list .cw-bd-mut { font-size: 13px; line-height: 18px; }
.cw-bd-badge { justify-self: center; }
.cw-bd-badge i { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.3); color: #fff; font-size: 11px; font-weight: 600; line-height: 14px; font-style: normal; }
.cw-bd-labels-img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
.cw-bd-labels-list .cw-bd-chip { font-size: 12px; height: 20px; line-height: 20px; }
/* column rules */
.cw-bd-columns { display: flex; flex-direction: column; gap: 16px; }
.cw-bd-colsets { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cw-bd-colset > .cw-bd-mut { margin-bottom: 8px; }
.cw-bd-colset > img { display: block; width: 100%; height: auto; border-radius: 10px; margin-bottom: 16px; }
.cw-bd-cols { display: grid; grid-template-columns: 1.3fr 1.1fr 0.9fr; border: 2px solid rgba(255,255,255,0.3); border-radius: 18px; min-height: 200px; }
.cw-bd-col { padding: 16px 18px; border-left: 1px solid rgba(255,255,255,0.3); min-width: 0; }
.cw-bd-col:first-child { border-left: 0; }
.cw-bd-col-h { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 18px; margin-bottom: 14px; }
.cw-bd-col-g { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
.cw-bd-col-g .cw-bd-mut { font-size: 12px; line-height: 16px; }
.cw-bd-col-g.up { padding-right: 22px; }
.cw-bd-col-g.up::before { content: ''; position: absolute; right: 6px; top: 8px; bottom: 26px; width: 1px; background: #fff; }
.cw-bd-col-g.up::after { content: ''; position: absolute; right: 3px; top: 8px; width: 6px; height: 6px; border-left: 1px solid #fff; border-top: 1px solid #fff; transform: rotate(45deg); }

/* ── generic deck blocks (AI-initiative boards). --bd-ac is the per-board accent set inline by the builder ── */
.cw-bd { --bd-ac: #00bad0; }
/* Desktop boards render at the deck's proportions: everything (type, screens, spacing) scaled to 84% while the board keeps its full width. Mobile keeps its own compact sizes. */
.desktop-frame .cw-bd { zoom: 0.84; }
/* html.cw-narrow is set by case-widgets.js under 900px: the desktop frame then uses the mobile board rules at full size */
.cw-narrow .cw-bd { zoom: 1; }
.cw-bd-title .hl { color: var(--bd-ac); }
.cw-bd-pill.ac { background: var(--bd-ac); color: #fff; }
.cw-bd-pill.dim { background: rgba(255,255,255,0.12); color: #fff; }
.cw-bd-pill.good { background: #1fae5a; color: #fff; }
.cw-bd-lead { margin: 0; color: rgba(255,255,255,0.72); font-size: 15px; line-height: 22px; max-width: 640px; }
.cw-bd-lead b, .cw-bd-lead strong { color: #fff; }
.cw-bd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.cw-bd-split-l { display: flex; flex-direction: column; gap: 16px; }
.cw-bd-split-l .cw-bd-lead { color: #fff; font-weight: 700; font-size: 15px; line-height: 21px; }
.cw-bd-split-r { display: flex; flex-direction: column; gap: 18px; }
.cw-bd-num { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.cw-bd-num li { display: flex; gap: 14px; }
.cw-bd-num .cw-bd-n { color: rgba(255,255,255,0.6); }
.cw-bd-num b { display: block; font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-num span:not(.cw-bd-n) { display: block; margin-top: 3px; color: rgba(255,255,255,0.6); font-size: 14px; line-height: 20px; }
.cw-bd-metrics { display: flex; flex-direction: column; gap: 22px; }
.cw-bd-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cw-bd-metric { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid var(--bd-ac); border-radius: 18px; }
.cw-bd-ml { font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-mv { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.cw-bd-mv em, .cw-bd-mv .hl { font-style: normal; color: var(--bd-ac); }
.cw-bd-ms { color: rgba(255,255,255,0.6); font-size: 13px; line-height: 18px; }
.cw-bd-quote { padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cw-bd-qtext { margin: 0; max-width: 760px; font-size: 24px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.cw-bd-qtext .hl { color: var(--bd-ac); }
.cw-bd-flow { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cw-bd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cw-bd-fstep { display: inline-flex; align-items: center; gap: 10px; }
.cw-bd-fchip { padding: 12px 16px; border: 1px solid rgba(255,255,255,0.25); border-radius: 14px; font-size: 14px; line-height: 18px; white-space: nowrap; }
.cw-bd-farrow { width: 14px; height: 10px; position: relative; flex: 0 0 14px; }
.cw-bd-farrow::before { content: ''; position: absolute; left: 0; right: 3px; top: 4.5px; height: 1px; background: rgba(255,255,255,0.55); }
.cw-bd-farrow::after { content: ''; position: absolute; right: 3px; top: 2px; width: 5px; height: 5px; border-right: 1px solid rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.55); transform: rotate(-45deg); }
.cw-bd-cards { display: flex; flex-direction: column; gap: 22px; }
.cw-bd-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cw-bd-card { padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 8px; }
.cw-bd-card b { color: var(--bd-ac); font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-card span { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 20px; }
.cw-bd-ss { display: flex; flex-direction: column; gap: 28px; }
.cw-bd-ss-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px; align-items: center; }
.cw-bd-ss-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cw-bd-ss-shot img, .cw-bd-plain img, .cw-bd-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.cw-bd-ss-shot img { margin-left: auto; }
.cw-bd-shots { display: flex; flex-direction: column; gap: 18px; }
.cw-bd-shots-grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 28px; align-items: start; }
/* whole phones (screens composited into the iPhone frame) sit tighter and carry no card chrome */
.cw-bd-shots[style*="--n:6"] .cw-bd-shots-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; justify-items: center; }
.cw-bd-shots[style*="--n:6"] .cw-bd-shot { align-items: center; width: 100%; max-width: 250px; }
.cw-bd-shots[style*="--n:6"] .cw-bd-shot img { border-radius: 0; box-shadow: none; }
.cw-bd-shot { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cw-bd-sheetwrap { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cw-bd-sheet { width: 100%; padding: 22px 26px; border-radius: 18px; background: #f7f7f5; color: #1a1a1a; display: flex; flex-direction: column; gap: 10px; } /* light sheet inside the dark board on purpose */
.cw-bd-sheet-note { margin: 0 0 6px; text-align: center; color: rgba(0,0,0,0.42); font-size: 13px; line-height: 19px; }
.cw-bd-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; line-height: 20px; }
.cw-bd-sheet-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid rgba(0,0,0,0.12); border-radius: 999px; background: #eeeeec; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cw-bd-sheet-btn svg { width: 14px; height: 14px; }
.cw-bd-link { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cw-bd-link-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid var(--bd-ac); border-radius: 999px; font-size: 14px; line-height: 18px; word-break: break-all; }
.cw-bd-link-pill svg { width: 15px; height: 15px; flex: 0 0 15px; }
.cw-bd-link .cw-bd-mut { flex: 1 1 420px; min-width: 0; }   /* the note needs a full sentence's width; if the pill leaves less it drops under the pill at full width */

/* deck blocks used by the LIVE Auctions boards */
.cw-bd-bullets { margin: 0; padding-left: 18px; color: #fff; font-size: 14px; line-height: 20px; display: flex; flex-direction: column; gap: 4px; max-width: 640px; }
.cw-bd-bullets li::marker { color: rgba(255,255,255,0.85); }
.cw-bd-bullets li { list-style: disc; }
.cw-bd-pill.small { padding: 3px 10px; font-size: 12px; line-height: 16px; }
.cw-bd-shot-img { position: relative; width: 100%; }
.cw-bd-shot.center { align-items: center; text-align: center; }
.cw-bd-chat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.cw-bd-chat.nos { grid-template-columns: 1fr; }
.cw-bd-chat-side { display: flex; flex-direction: column; gap: 12px; }
.cw-bd-chat-side b { font-size: 16px; line-height: 22px; font-weight: 700; }
.cw-bd-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cw-bd-msgs > li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
.cw-bd-who { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255,255,255,0.1); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.cw-bd-who i { width: 18px; height: 18px; border-radius: 50%; background: var(--who); flex: 0 0 18px; }
.cw-bd-msgs .cw-bd-msg { margin: 4px 0 0; font-size: 14px; line-height: 20px; min-width: 0; }
.cw-bd-msgs > li.circle .cw-bd-msg { margin: 0; }
.cw-bd-msgs > li.circle { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; }
.cw-bd-who.disc { width: 64px; height: 64px; padding: 0; justify-content: center; border-radius: 50%; background: #2a2a2b; font-size: 13px; }
.cw-bd-msgs .cw-bd-bullets { color: rgba(255,255,255,0.72); }
.cw-bd-warn { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.cw-bd-warn svg { width: 18px; height: 18px; display: block; }
.cw-bd-checks li.warn > div > b { color: #fff; }
.cw-bd-checks li .cw-bd-bullets { margin-top: 6px; color: rgba(255,255,255,0.6); }
.cw-bd-checks .cw-bd-bullets li, .cw-bd-num .cw-bd-bullets li, .cw-bd-msgs .cw-bd-bullets li { display: list-item; }
.cw-bd-checks.tight { gap: 8px; }
.cw-bd-rgrid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px 14px; }
.cw-bd-rcell { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-bd-rcell img { display: block; width: 100%; height: auto; border-radius: 10px; }
.cw-bd-rq { margin: 0; color: rgba(255,255,255,0.6); font-size: 12px; line-height: 16px; min-height: 32px; }
.cw-bd-rtag { font-size: 12px; line-height: 16px; font-weight: 700; }
.cw-bd-rtag.good { color: #25c9c0; }
.cw-bd-rtag.bad { color: #fe4a63; }
.cw-bd-journey { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 30px; align-items: start; }
/* connectors are measured and drawn by wireJourney() into one SVG overlay; the gaps below leave room for them */
.cw-bd-journey.arrows { position: relative; gap: 40px; }
.cw-bd-journey.arrows .cw-bd-jcol { gap: 44px; }
.cw-bd-journey.arrows .cw-bd-jh { margin-bottom: -30px; }
.cw-bd-journey.arrows .cw-bd-jq { margin: 0 0 0 30px; gap: 10px; }
.cw-bd-journey.arrows .cw-bd-jq + .cw-bd-jq { margin-top: -16px; }
.cw-bd-journey.arrows .cw-bd-jq .cw-bd-mut { margin-left: 8px; }
.cw-bd-journey.arrows img[data-tight] { margin-top: -36px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey.arrows img[data-tight] { margin-top: -28px; }
.cw-bd-jsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cw-bd-jsvg path { fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cw-bd-jcol { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cw-bd-jh { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 700; line-height: 20px; }
.cw-bd-jcol img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cw-bd-jq { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 6px; }
.cw-bd-jq .cw-bd-pill { white-space: normal; text-align: left; }
.cw-bd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cw-bd-opt { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 0 22px; border-left: 1px solid rgba(255,255,255,0.25); }
.cw-bd-opt:first-child { border-left: 0; padding-left: 0; }
/* a badge above one option must not push its heading below the neighbour's: the badge-less option reserves the same height */
.cw-bd-opts.badged .cw-bd-opt:not(.has-badge) { padding-top: 32px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-opts.badged .cw-bd-opt:not(.has-badge) { padding-top: 18px; }
.cw-bd-opt-h { display: flex; gap: 12px; align-items: flex-start; }
.cw-bd-opt-h b { font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-opt .cw-bd-bullets { color: rgba(255,255,255,0.72); padding-left: 32px; }
.cw-bd-callout { padding: 14px 26px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 14px; line-height: 20px; }
.cw-bd-callout.center { text-align: center; align-self: center; }

/* more deck blocks: numbered list, nested two-column, verdict columns, icon flows, photo-backed quote board */
.cw-bd.has-bg { background-size: cover; background-position: center; position: relative; isolation: isolate; }
.cw-bd.has-bg::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(0,0,0,0.42); z-index: -1; }
.cw-bd-lane span.ac { background: var(--bd-ac); }
.cw-bd-two { display: grid; grid-template-columns: minmax(0, var(--l, 5fr)) minmax(0, var(--r, 7fr)); gap: 32px; align-items: start; }
.cw-bd-two.center { align-items: center; }
/* chat discs in columns (team concerns row) */
.cw-bd-msgs[style*="--cols"] { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 18px 28px; align-items: start; }
.cw-bd-two-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cw-bd-two .cw-bd-shot { align-items: center; }
.cw-bd-two .cw-bd-shots-grid { justify-items: center; }
.cw-bd-num li .cw-bd-bullets { margin-top: 6px; color: rgba(255,255,255,0.6); }
.cw-bd-verdict { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px; }
.cw-bd-vcol { display: flex; flex-direction: column; gap: 18px; }
.cw-bd-vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cw-bd-vlist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-bd-vlist b { font-size: 17px; line-height: 22px; font-weight: 700; }
.cw-bd-vtag { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; line-height: 14px; color: #fff; }
.cw-bd-vtag.low { background: #e6b400; color: #fff; }
.cw-bd-vtag.mid { background: #0f9d58; }
.cw-bd-vtag.high { background: #fe2c55; }
.cw-bd-varrow { width: 14px; height: 34px; position: relative; margin-left: 12px; }
.cw-bd-varrow::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 4px; width: 1px; background: rgba(255,255,255,0.55); }
.cw-bd-varrow::after { content: ''; position: absolute; left: 3px; bottom: 4px; width: 6px; height: 6px; border-right: 1px solid rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.55); transform: rotate(45deg); }
.cw-bd-vcol .cw-bd-mut { font-size: 15px; line-height: 22px; }
.cw-bd-flow.center { align-items: center; }
/* lg: the workflow rows in the translator case (bigger icons, long arrows); xl: the tool tiles */
.cw-bd-flow.lg .cw-bd-ficon { width: 64px; border-radius: 16px; }
.cw-bd-flow.lg .cw-bd-chips { gap: 18px; }
.cw-bd-flow.lg .cw-bd-fstep { gap: 18px; }
.cw-bd-flow.lg .cw-bd-farrow { width: 56px; flex-basis: 56px; }
.cw-bd-flow.xl .cw-bd-ficon { width: 96px; border-radius: 18px; }
.cw-bd-flow.xl .cw-bd-chips { gap: 14px; }
.cw-bd-num-img { display: none; }
.cw-bd-ss-side:empty { display: none; }
.cw-bd-ficon { display: block; width: 72px; height: auto; border-radius: 14px; }
.cw-bd-ss-h { display: flex; gap: 12px; align-items: flex-start; }
.cw-bd-ss-h b { font-size: 15px; font-weight: 700; line-height: 20px; }
.cw-bd-ss-shot { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: flex-end; }
.cw-bd-ss-shot img { margin-left: 0; width: auto; max-width: 100%; }
.cw-bd-ss-shot img:only-child { width: 100%; }
.cw-bd-ss.start .cw-bd-ss-shot { justify-content: flex-start; }
.cw-bd-ss.top .cw-bd-ss-row { align-items: start; }
.cw-bd-ss[style*="--side"] .cw-bd-ss-row { grid-template-columns: minmax(0, var(--side)) minmax(0, 8fr); }
/* stack: heading on top, then one row of photo + assets, vertically centred; assets may run past the board edge like the deck */
.cw-bd-ss.stack .cw-bd-ss-row { grid-template-columns: 1fr; gap: 16px; }
.cw-bd-ss.stack .cw-bd-ss-shot { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 28px; }
.cw-bd-ss.stack .cw-bd-ss-shot img { flex: 0 1 auto; min-width: 0; }
.cw-bd-ss-group { display: flex; flex-direction: column; gap: 14px; flex: 0 1 auto; min-width: 0; }
.cw-bd-ss-group img { width: 100%; }

/* annotation notes + red curved arrows over a screenshot (deck style) */
.cw-bd-pc-shot { overflow: visible; }
.cw-bd-annot-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.cw-bd-annot { position: absolute; z-index: 3; color: rgba(255,255,255,0.85); font-size: 14px; line-height: 20px; }
.cw-bd-annot p { margin: 0 0 8px; }
.cw-bd-annot-pin, .cw-bd-annot-n { display: none; }
:is(.mobile-frame, .cw-narrow) .cw-bd-annot-pin { display: flex; position: absolute; z-index: 3; width: 20px; height: 20px; margin: -10px 0 0 -10px; align-items: center; justify-content: center; border-radius: 50%; background: #fe2c55; color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 0 0 3px rgba(254,44,85,0.3); }
:is(.mobile-frame, .cw-narrow) .cw-bd-annot { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-annot-n { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: #fe2c55; color: #fff; font-size: 11px; font-weight: 700; grid-row: 1 / span 9; }
:is(.mobile-frame, .cw-narrow) .cw-bd-annot p { grid-column: 2; }
/* grouped research table */
.cw-bd-rgroups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.cw-bd-rgroup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw-bd-rgroup header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cw-bd-rgroup header b { font-size: 14px; font-weight: 700; line-height: 20px; }
.cw-bd-rgroup header .cw-bd-mut { font-size: 12px; line-height: 16px; }
.cw-bd-rgrid.table { gap: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; overflow: hidden; }
.cw-bd-rgrid.table .cw-bd-rcell { padding: 8px 8px 10px; border-left: 1px solid rgba(255,255,255,0.18); gap: 6px; }
.cw-bd-rgrid.table .cw-bd-rcell:first-child { border-left: 0; }
.cw-bd-rgrid.table .cw-bd-rcell img { border-radius: 6px; }
.cw-bd-rgrid.table .cw-bd-rq { min-height: 0; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.18); }

/* ── mobile frame: boards + outcome ── */
:is(.mobile-frame, .cw-narrow) .cw-bd { padding: 24px 18px; border-radius: 18px; gap: 22px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-title { font-size: 22px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phones { grid-template-columns: 1fr; padding: 0; gap: 20px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phone { flex-direction: row; align-items: center; gap: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phone.nocap { justify-content: center; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phone img { max-width: 150px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phone figcaption { max-width: none; }
:is(.mobile-frame, .cw-narrow) .cw-bd-arrow { display: none; }
/* two phones (labelling system): side by side, the caption runs under both */
:is(.mobile-frame, .cw-narrow) .cw-bd-phones.pair { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phones.pair .cw-bd-phone { display: contents; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phones.pair .cw-bd-phone img { max-width: none; width: 100%; }
:is(.mobile-frame, .cw-narrow) .cw-bd-phones.pair .cw-bd-phone figcaption { grid-column: 1 / -1; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs[style*="--cols"] { grid-template-columns: 1fr; gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-action { font-size: 12px; line-height: 17px; padding: 10px 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-pc, :is(.mobile-frame, .cw-narrow) .cw-bd-pc.right, :is(.mobile-frame, .cw-narrow) .cw-bd-hero, :is(.mobile-frame, .cw-narrow) .cw-bd-labels-grid, :is(.mobile-frame, .cw-narrow) .cw-bd-steps { grid-template-columns: 1fr; }
/* before / after stay side by side on mobile, notes below the chips */
:is(.mobile-frame, .cw-narrow) .cw-bd-ba { gap: 12px; }
/* wide banner comparisons stack on mobile (`stack: true`), screenshot pairs stay side by side */
:is(.mobile-frame, .cw-narrow) .cw-bd-ba.stack { grid-template-columns: 1fr !important; gap: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-colsets { gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-pairs { grid-template-columns: 1fr; grid-template-rows: none; gap: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-pair { grid-template-rows: none; grid-row: auto; gap: 14px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-pair img { max-width: 180px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-chip { font-size: 11px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-pc.right .cw-bd-pc-side { order: 0; }
:is(.mobile-frame, .cw-narrow) .cw-bd-labels-list li { grid-template-columns: 36px auto minmax(0, 1fr); gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-cols { grid-template-columns: 1fr; min-height: 0; }
:is(.mobile-frame, .cw-narrow) .cw-bd-col { border-left: 0; border-top: 1px solid rgba(255,255,255,0.3); }
:is(.mobile-frame, .cw-narrow) .cw-bd-col:first-child { border-top: 0; }

:is(.mobile-frame, .cw-narrow) .cw-bd-split, :is(.mobile-frame, .cw-narrow) .cw-bd-cgrid, :is(.mobile-frame, .cw-narrow) .cw-bd-ss-row, :is(.mobile-frame, .cw-narrow) .cw-bd-shots-grid { grid-template-columns: 1fr; }
:is(.mobile-frame, .cw-narrow) .cw-bd-split { gap: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-split-l .cw-bd-lead { font-size: 14px; line-height: 20px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-num { gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-num b, :is(.mobile-frame, .cw-narrow) .cw-bd-checks b, :is(.mobile-frame, .cw-narrow) .cw-bd-card b { font-size: 14px; line-height: 19px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-num span:not(.cw-bd-n), :is(.mobile-frame, .cw-narrow) .cw-bd-checks span, :is(.mobile-frame, .cw-narrow) .cw-bd-card span, :is(.mobile-frame, .cw-narrow) .cw-bd-mut, :is(.mobile-frame, .cw-narrow) .cw-bd-lead { font-size: 13px; line-height: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-metrics, :is(.mobile-frame, .cw-narrow) .cw-bd-cards, :is(.mobile-frame, .cw-narrow) .cw-bd-shots { gap: 14px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-mgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-metric { padding: 12px 14px; gap: 3px; border-radius: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ml { font-size: 12px; line-height: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-mv { font-size: 26px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ms { font-size: 11px; line-height: 15px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-cgrid { gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-card { padding: 14px 16px; gap: 4px; border-radius: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss { gap: 36px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-row { gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-shots-grid { gap: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-shots[style*="--n:4"] .cw-bd-shots-grid, :is(.mobile-frame, .cw-narrow) .cw-bd-shots[style*="--n:3"] .cw-bd-shots-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-shot { gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-qtext { font-size: 18px; line-height: 1.3; }
:is(.mobile-frame, .cw-narrow) .cw-bd-quote { padding: 6px 0; gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-fchip { white-space: normal; padding: 10px 12px; font-size: 13px; }
/* one column: chip flows wrap; the arrow trails its chip, so a wrapped line ends with an arrow and never starts with one */
:is(.mobile-frame, .cw-narrow) .cw-bd-flow:not(:has(.cw-bd-ficon)) .cw-bd-chips { gap: 8px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-shot img { margin-left: 0; max-width: 100% !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-sheet { padding: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-sheet-row { font-size: 13px; padding: 10px 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-sheet-btn { font-size: 11px; padding: 5px 9px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-sheet-btn svg { display: none; }

:is(.mobile-frame, .cw-narrow) .cw-bd-chat, :is(.mobile-frame, .cw-narrow) .cw-bd-journey, :is(.mobile-frame, .cw-narrow) .cw-bd-opts { grid-template-columns: 1fr; }
:is(.mobile-frame, .cw-narrow) .cw-bd-rgrid { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-rgrid.dense { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 10px 6px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-pc.wide { grid-template-columns: 1fr; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs > li { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs > li .cw-bd-who { padding: 4px 10px 4px 4px; font-size: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs { gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs .cw-bd-msg { margin-top: 3px; font-size: 13px; line-height: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs > li.circle { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-who.disc { width: 48px; height: 48px; font-size: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-opt { border-left: 0; padding: 0; }
:is(.mobile-frame, .cw-narrow) .cw-bd-opt + .cw-bd-opt { border-top: 1px solid rgba(255,255,255,0.25); padding-top: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-callout { border-radius: 16px; }
/* mobile journey: columns stack, the connector overlay keeps drawing the in-column arrows */
:is(.mobile-frame, .cw-narrow) .cw-bd-jcol img { max-width: 100% !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-jcol img[data-tight] { max-width: 72% !important; }
/* smaller cards (preview chips, secondary states) sit centred under the full-width card in one column */
:is(.mobile-frame, .cw-narrow) .cw-bd-jcol img[data-tight], :is(.mobile-frame, .cw-narrow) .cw-bd-jcol img[style*="max-width"] { align-self: center; }
/* the desktop shot reserves room for its annotation boxes; in one column they are plain text, so no reserve */
:is(.mobile-frame, .cw-narrow) .cw-bd-pc[style*="--pad"] .cw-bd-pc-shot { margin-bottom: 0; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey.arrows .cw-bd-jq { padding-top: 0; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey.arrows { gap: 36px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey.arrows .cw-bd-jcol { gap: 36px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey.arrows .cw-bd-jq { margin-left: 24px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey.arrows .cw-bd-jcol > img:not([data-tight]) { width: calc(100% - 18px); margin-left: 18px; }   /* gutter for the stage rail (wireJourney) */

:is(.mobile-frame, .cw-narrow) .cw-bd-two, :is(.mobile-frame, .cw-narrow) .cw-bd-verdict, :is(.mobile-frame, .cw-narrow) .cw-bd-ss[style*="--side"] .cw-bd-ss-row { grid-template-columns: 1fr; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-shot { justify-content: flex-start; gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-shot img { max-width: calc(50% - 5px) !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-shot img:only-child { max-width: 100% !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss.stack .cw-bd-ss-shot { flex-wrap: wrap; gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-group { flex: 1 1 calc(50% - 5px); min-width: 0; gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ss-group img { max-width: 100% !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-ficon { width: 56px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-flow.lg .cw-bd-ficon { width: 52px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-flow.lg .cw-bd-farrow { width: 28px; flex-basis: 28px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-flow.lg .cw-bd-chips, :is(.mobile-frame, .cw-narrow) .cw-bd-flow.lg .cw-bd-fstep { gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-flow.xl .cw-bd-ficon { width: 64px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-num-img { display: block; width: 100%; margin-top: 10px; border-radius: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-two.no-r-mobile > .cw-bd-two-col:last-child { display: none; }
:is(.mobile-frame, .cw-narrow) .cw-bd-shots[style*="--n:6"] .cw-bd-shots-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

:is(.mobile-frame, .cw-narrow) .cw-bd-rgroups { grid-template-columns: 1fr; }
:is(.mobile-frame, .cw-narrow) .cw-bd-annot { position: static; width: auto !important; margin-top: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-annot-layer { display: none; }

/* ── Outcome ledger (chapter "break"): hairline rows that draw in, numbers that count from before to after ── */
.cw-out { margin-top: 8px; }
.cw-out-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 0 12px; }
.cw-out-dot { align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 0 var(--accent-2-100); }
.cw-out.in .cw-out-dot { animation: outPulse 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s 1; }
@keyframes outPulse { 0% { box-shadow: 0 0 0 0 var(--accent-2-100); } 60% { box-shadow: 0 0 0 9px rgba(57,48,225,0); } 100% { box-shadow: 0 0 0 0 rgba(57,48,225,0); } }
.cw-out-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-300); }
.cw-out-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text); }
.cw-out-when { margin-left: auto; font-size: 12px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-out-rows { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cw-out-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 11px 0; }
.cw-out-row::before, .cw-out-row:last-child::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--border); transform: scaleX(0); transform-origin: left center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 120ms); }
.cw-out-row:last-child::after { top: auto; bottom: 0; transition-delay: calc((var(--i, 0) + 1) * 120ms); }
.cw-out.in .cw-out-row::before, .cw-out.in .cw-out-row:last-child::after { transform: scaleX(1); }
.cw-out-l, .cw-out-v { opacity: 0; transform: translateY(6px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 120ms + 120ms), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 120ms + 120ms); }
.cw-out.in .cw-out-l, .cw-out.in .cw-out-v { opacity: 1; transform: none; }
.cw-out-l { font-size: 14px; line-height: 20px; color: var(--text-300); }
.cw-out-v { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw-out-v small { font-size: 14px; font-weight: 500; color: var(--text-300); }
.cw-out-v svg { width: 14px; height: 9px; color: var(--text-200); align-self: flex-end; margin-bottom: 5px; }
.cw-out-v em { font-style: normal; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); min-width: 2ch; text-align: right; }
.cw-out-note { margin: 12px 0 0; font-size: 12px; line-height: 18px; color: var(--text-300); }
.cw-out.compact .cw-out-top { padding-bottom: 8px; }
.cw-out.compact .cw-out-title { font-size: 13px; line-height: 18px; }
.cw-out.compact .cw-out-row { padding: 9px 0; gap: 12px; }
.cw-out.compact .cw-out-l { font-size: 13px; line-height: 18px; }
.cw-out.compact .cw-out-v em { font-size: 21px; line-height: 24px; }
.cw-out.compact .cw-out-note { font-size: 11px; line-height: 16px; }

/* ── Story walkthrough: chapters of app + PC screens, one dark stage ── */
.cw-st { display: grid; grid-template-columns: minmax(0, 456px) minmax(0, 1fr); gap: 22px; margin-top: 8px; align-items: stretch; }
.cw-st-stage { position: relative; border-radius: 16px; overflow: hidden; background: #0b0b0c; /* same dark stage as Pre-LIVE: screenshots were shot on black, stays dark in both themes */ min-height: 600px; }
.cw-st-shot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px; opacity: 0; transform: scale(0.985); transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.cw-st-shot.on { opacity: 1; transform: none; pointer-events: auto; }
.cw-st-shot.app img { height: 100%; width: auto; max-width: 100%; object-fit: contain; cursor: zoom-in; }
.cw-st-shot.pc .cw-bd-browser { width: 100%; }
/* PC screens are dense: each step crops to the region that matters (focus point per step); the button opens the whole screenshot */
.cw-st-shot.pc .cw-bd-browser > img { cursor: zoom-in; aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.cw-st-shot.pc.fit .cw-bd-browser > img { aspect-ratio: auto; }
.cw-st-full { position: absolute; right: 10px; bottom: 10px; appearance: none; border: 0; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,0.72); color: #fff; font: 600 11px/16px 'Plus Jakarta Sans', sans-serif; cursor: pointer; backdrop-filter: none; }
.cw-st-full:hover { background: rgba(0,0,0,0.88); }
.cw-st-shot.result { padding: 20px; }
.cw-st-sheet { width: 100%; padding: 16px 18px 18px; border-radius: 12px; background: var(--bg); }
.cw-st-count { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-st-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cw-st-chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cw-st-ch { border-top: 1px solid var(--border); padding-top: 8px; }
.cw-st-ch-h { display: flex; align-items: baseline; gap: 8px; padding: 0 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-st-ch-h b { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-300); transition: color 160ms ease; }
.cw-st-ch.on .cw-st-ch-h b { color: var(--text); }
.cw-st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cw-st-steps li button { appearance: none; width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 9px; font: 500 13px/18px 'Plus Jakarta Sans', sans-serif; color: var(--text-300); cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.cw-st-steps li button:hover { background: var(--surface); color: var(--text); }
.cw-st-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--surface); color: var(--text-300); transition: background 160ms ease, color 160ms ease; }
.cw-st-steps li.done .cw-st-n { background: var(--accent-2-100); color: var(--accent-2); }
/* active step: colour + filled badge only. Bolding the label re-wrapped long titles and pushed Back / Next down a line. */
.cw-st-steps li.on button { color: var(--text); }
.cw-st-steps li.on .cw-st-n { background: var(--text); color: var(--bg); }
.cw-st-steps li.brk .cw-st-n { background: transparent; border: 1px dashed var(--text-200); }
.cw-st-steps li.brk .cw-st-n::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.cw-st-steps li.brk.on .cw-st-n { background: var(--accent-2); border-color: var(--accent-2); }
.cw-st-steps li.brk.on .cw-st-n::before { background: var(--bg); }
.cw-st-body { padding: 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cw-st-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-st-tags span { font-size: 11px; font-weight: 600; line-height: 18px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-300); background: var(--bg); }
.cw-st-tags span.accent { background: var(--accent-2-100); color: var(--accent-2); border-color: transparent; }
.cw-st-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; color: var(--text); }
.cw-st-text { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-st-text strong { color: var(--text); font-weight: 600; }
.cw-st-text.in { animation: fadeUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-st-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 6px; }

/* mobile frame */
/* mobile: stage, then Back / Next right under it, then the caption, then the chapter list, so the screen and the buttons share the viewport */
:is(.mobile-frame, .cw-narrow) .cw-st { display: flex; flex-direction: column; gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-st-stage { min-height: 0; height: min(58vh, 440px); order: 0; }
:is(.mobile-frame, .cw-narrow) .cw-st-side { display: contents; }
:is(.mobile-frame, .cw-narrow) .cw-st-body { order: 1; min-height: 0 !important; }
:is(.mobile-frame, .cw-narrow) .cw-st-chapters { order: 2; }
:is(.mobile-frame, .cw-narrow) .cw-st-nav { order: -1; margin-top: 0; padding-top: 0; justify-content: space-between; }
:is(.mobile-frame, .cw-narrow) .cw-st-nav .cw-btn { flex: 1; text-align: center; }
:is(.mobile-frame, .cw-narrow) .cw-st-shot { padding: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-out-v em { font-size: 21px; line-height: 24px; }
@media (prefers-reduced-motion: reduce) {
  .cw-out-row::before, .cw-out-row:last-child::after, .cw-out-l, .cw-out-v { transition: none !important; transform: none !important; opacity: 1 !important; }
  .cw-out.in .cw-out-dot { animation: none; }
  .cw-st-shot, .cw-st-text.in { transition: none !important; animation: none !important; }
}
:is(.mobile-frame, .cw-narrow) .cw-lab { padding: 22px 14px 18px; border-radius: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-lab-grid, :is(.mobile-frame, .cw-narrow) .cw-lab-grid.two { grid-template-columns: minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-lab-tabs { flex-wrap: wrap; justify-content: center; border-radius: 18px; }
:is(.mobile-frame, .cw-narrow) .cw-lab-tune { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "sliders" "curve"; }
:is(.mobile-frame, .cw-narrow) .cw-lab-tune-target { flex-basis: 100%; order: 3; }

/* chips wrap inside the narrower before / after column sets */
.cw-bd-col { min-width: 0; }
.cw-bd-col-g .cw-bd-chip { white-space: normal; max-width: 100%; text-align: left; align-items: center; }
.cw-bd-col-g.up { padding-right: 22px; }
.cw-bd-col-g .cw-bd-chip { height: auto; min-height: 18px; }
/* floating cards wider than their host (the auction card over a phone): on mobile keep them inside the board and over the phone's own card */
:is(.mobile-frame, .cw-narrow) .cw-bd-float.over { width: 112% !important; left: -6% !important; top: 74% !important; }
/* smaller floats (a pop-up over a PC shot) stay modest on mobile and start inside the shot */
:is(.mobile-frame, .cw-narrow) .cw-bd-float:not(.over):not(.sm) { width: 50% !important; left: 3% !important; }
/* small pop-ups (a 3-tag menu) keep their own spot and only grow a little */
:is(.mobile-frame, .cw-narrow) .cw-bd-float.sm { width: 38% !important; }
/* big metric values need a heavier blur than body text or the digits still read */
.cw-bd-mv .metric-locked .metric-blur-text { filter: blur(14px); }
:is(.mobile-frame, .cw-narrow) .cw-bd-mv .metric-locked .metric-blur-text { filter: blur(10px); }
.cw-bd-mv .metric-locked.metric-unlocked .metric-blur-text { filter: none; }
/* mobile: circle chat rows centre on the disc; kept two-column blocks (`keep: true`) stay text | phones like desktop; 2-column journeys stay 2 columns */
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs > li.circle { align-items: center; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs > li.circle .cw-bd-msg { margin: 0; }
:is(.mobile-frame, .cw-narrow) .cw-bd-msgs .cw-bd-bullets { gap: 2px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-two.keep { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 12px; align-items: center; }
:is(.mobile-frame, .cw-narrow) .cw-bd-two.keep.phone-l { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
:is(.mobile-frame, .cw-narrow) .cw-bd-two.keep .cw-bd-shots-grid { grid-template-columns: 1fr; gap: 8px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-two.keep .cw-bd-shot-img { max-width: 100% !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-two.keep .cw-bd-checks { gap: 10px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey[style*="--n:2"] { grid-template-columns: 1fr 1fr; gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey[style*="--n:2"].arrows { gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey[style*="--n:2"] .cw-bd-jcol { gap: 28px; }
:is(.mobile-frame, .cw-narrow) .cw-bd-journey[style*="--n:2"] .cw-bd-jcol img { max-width: 100% !important; }
:is(.mobile-frame, .cw-narrow) .cw-bd-two:not(.keep) .cw-bd-shot-img { max-width: 62% !important; }

/* ═══ KEY METRICS (kmMount): one lead or equal rows, every number drawn as the thing it is ═══
   One component, two surfaces. On the page (outcome ledger) it reads the tokens; inside a deck board it takes the board's raw dark
   palette and its --bd-ac, same as every other .cw-bd block. Numerals are Cabinet Grotesk 500 (the site's display face, already
   self-hosted); everything else is Plus Jakarta. */
.cw-km { --km-fg: var(--text); --km-mut: var(--text-300); --km-dim: var(--text-200); --km-ln: var(--border); --km-ac: var(--accent-2); --km-on: var(--bg); --km-big: 76px; --km-mid: 40px; --km-sm: 24px; --km-ctl: 12px; --km-lab-lg: 18px; --km-lab: 16px; --km-sub: 13px; margin-top: 8px; color: var(--km-fg); font-family: 'Plus Jakarta Sans', sans-serif; }
.cw-bd .cw-km { --km-fg: #fff; --km-mut: rgba(255,255,255,0.62); --km-dim: rgba(255,255,255,0.5); --km-ln: rgba(255,255,255,0.16); --km-ac: var(--bd-ac); --km-on: #000; --km-big: 96px; --km-mid: 48px; --km-sm: 26px; --km-ctl: 14px; --km-lab-lg: 22px; --km-lab: 18px; --km-sub: 14px; margin-top: 0; }
.cw-km em { font-style: normal; color: var(--km-ac); }
.cw-km-snap, .cw-km-snap * { transition: none !important; }
.cw-km-top { margin-bottom: 22px; }
.cw-km-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.cw-km-head b { font-size: 15px; line-height: 21px; font-weight: 700; }
.cw-km-head span { font-size: 12px; line-height: 17px; color: var(--km-mut); font-variant-numeric: tabular-nums; }
/* Controls: three icons under the metrics, right-aligned, no fill and no outline. The chosen layout is only a little brighter than
   the other, so the footer reads as a quiet tool row and the numbers keep the eye. They wake up on hover or focus. */
.cw-km-foot { display: flex; align-items: flex-end; gap: 12px 20px; margin-top: 16px; }
.cw-km-foot .cw-km-note { margin: 0; flex: 1 1 auto; min-width: 0; }
.cw-km-ctl { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.cw-km-seg { display: inline-flex; gap: 2px; }
.cw-km-seg::after { content: ''; align-self: center; width: 1px; height: 12px; margin: 0 5px 0 7px; background: var(--km-ln); }
.cw-km-seg button, .cw-km-replay { appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; display: inline-grid; place-items: center; width: calc(var(--km-ctl) * 2.2); height: calc(var(--km-ctl) * 2.2); border-radius: 6px; color: var(--km-fg); opacity: 0.3; transition: opacity 0.25s, background-color 0.25s; }
.cw-km-seg button svg, .cw-km-replay svg { width: calc(var(--km-ctl) * 1.25); height: calc(var(--km-ctl) * 1.25); }
.cw-km-seg button[aria-pressed="true"] { opacity: 0.62; }
@media (hover: hover) { .cw-km-seg button:hover, .cw-km-replay:hover { opacity: 0.95; background: color-mix(in srgb, var(--km-fg) 9%, transparent); } }
.cw-km-seg button:focus-visible, .cw-km-replay:focus-visible { opacity: 0.95; }
.cw-km-replay.spin svg { animation: cwKmSpin 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cwKmSpin { from { transform: rotate(-360deg); } }
.cw-km-seg button:focus-visible, .cw-km-replay:focus-visible, .cw-ka-row:focus-visible { outline: 2px solid var(--km-ac); outline-offset: 2px; }
.cw-km-note { margin: 16px 0 0; max-width: 560px; font-size: 12px; line-height: 18px; color: var(--km-mut); }
/* the odometer: each slot is as wide as the digit it lands on (the hidden .w), the strip of two turns of 0-9 is centred over it
   and clipped top and bottom only, so a wide digit passing through a narrow slot is not shaved at the sides */
.cw-ko { display: inline-flex; align-items: flex-end; font-variant-numeric: tabular-nums; overflow: clip; overflow-clip-margin: 0.4em; } /* clip, not hidden: the centred strips poke 3-4px past the last slot and must not add scroll width */
.cw-ko em { display: contents; }
.cw-ko .c, .cw-ko .d, .cw-ko .d .w, .cw-ko .s span { display: block; height: 1.1em; line-height: 1.1em; white-space: pre; }
.cw-ko .d { position: relative; clip-path: inset(0 -0.4em); }
.cw-ko .d .w { visibility: hidden; }
.cw-ko .s { position: absolute; left: 50%; top: 0; text-align: center; transform: translate(-50%, calc(var(--f, 0) * -5%)); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 110ms); }
.cw-km-in .cw-ko .s { transform: translate(-50%, calc(var(--t) * -5%)); }
/* the site's metric lock blurs by a fixed 4.5px, which is readable at display size: scale it with the type while locked */
.cw-km .metric-locked:not(.metric-unlocked) .metric-blur-text { filter: blur(0.2em); }
/* layout "lead" */
.cw-ka { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.cw-ka-it { transition: opacity 0.3s; }
@media (hover: hover) { .cw-ka:hover .cw-ka-it:not(:hover) { opacity: 0.42; } .cw-ke:hover .cw-ke-row:not(:hover) { opacity: 0.42; } }
.cw-ka-lead { --gh: 18px; min-width: 0; }
.cw-ka-l { font-size: var(--km-lab-lg); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.cw-ka-big { margin: 10px 0 6px; font: 500 var(--km-big)/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.03em; white-space: nowrap; }
.cw-ka-big.long { font-size: calc(var(--km-big) * 0.75); }
.cw-ka-big.xl { font-size: calc(var(--km-big) * 0.52); }
.cw-ka-s { font-size: calc(var(--km-sub) + 1px); line-height: 1.45; color: var(--km-mut); }
.cw-ka-fig { margin-top: 22px; }
.cw-ka-l, .cw-ka-big, .cw-ka-s, .cw-ka-fig { transition: opacity 0.16s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-ka-lead.sw > * { opacity: 0; transform: translateY(4px); }
.cw-ka-rows { display: flex; flex-direction: column; min-width: 0; }
.cw-ka-row { --gh: 8px; appearance: none; margin: 0; background: none; border: 0; border-top: 1px solid var(--km-ln); border-radius: 0; font: inherit; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; width: 100%; padding: 14px 0 16px; text-align: left; color: var(--km-fg); cursor: pointer; transition: opacity 0.3s, padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-ka-row:last-child { border-bottom: 1px solid var(--km-ln); }
.cw-ka-row::before { content: ''; position: absolute; left: 0; top: 15px; bottom: 17px; width: 2px; border-radius: 1px; background: var(--km-ac); transform: scaleY(0); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) { .cw-ka-row:hover { padding-left: 14px; } .cw-ka-row:hover::before { transform: none; } }
.cw-ka-row:focus-visible { padding-left: 14px; } .cw-ka-row:focus-visible::before { transform: none; }
.cw-ka-row .k { font-size: var(--km-sub); line-height: 1.4; color: var(--km-mut); }
.cw-ka-row .k b { display: block; font-size: var(--km-lab); line-height: 1.35; font-weight: 700; letter-spacing: -0.005em; color: var(--km-fg); }
.cw-ka-row .v { font: 500 var(--km-sm)/1.15 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; white-space: nowrap; }
.cw-ka-row .f { grid-column: 1 / -1; display: block; margin-top: 10px; }
.cw-ka-row .f:empty { display: none; }
.cw-ka-row .k, .cw-ka-row .v, .cw-ka-row .f { transition: opacity 0.16s; }
.cw-ka-row.sw .k, .cw-ka-row.sw .v, .cw-ka-row.sw .f { opacity: 0; }
/* layout "rows": subgrid keeps label, drawing and number columns aligned across rows */
.cw-ke { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; column-gap: 24px; }
.cw-ke-row { --gh: 16px; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 20px 0; border-top: 1px solid var(--km-ln); transition: opacity 0.3s; }
.cw-ke-row:last-child { border-bottom: 1px solid var(--km-ln); }
.cw-km-b:first-child .cw-ke-row:first-child { border-top: 0; padding-top: 2px; } /* no title above: the block's own edge is the top rule */
.cw-km-b:first-child .cw-ka-row:first-child { border-top: 0; padding-top: 2px; }
.cw-ke-k { font-size: var(--km-lab); line-height: 1.35; font-weight: 700; letter-spacing: -0.005em; }
.cw-ke-k small { display: block; margin-top: 3px; font-weight: 400; font-size: var(--km-sub); line-height: 1.4; letter-spacing: 0; color: var(--km-mut); }
.cw-ke-fig { min-width: 0; }
.cw-ke-v { text-align: right; font: 500 var(--km-mid)/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.025em; white-space: nowrap; }
.cw-ke-v.long { font-size: calc(var(--km-mid) * 0.72); }
/* the drawings. All read --km-ac / --km-dim / --km-fg / --gh and draw when their host gets .cw-km-in */
.cw-kg-cap { display: block; margin-top: 7px; font-size: 11px; line-height: 15px; color: var(--km-dim); }
.cw-kg-lift { position: relative; display: block; height: var(--gh, 14px); }
.cw-kg-lift .base { position: absolute; left: 0; top: 0; bottom: 0; width: 72%; border-radius: 3px 0 0 3px; background: var(--km-dim); opacity: 0.42; transform-origin: left; transform: scaleX(0); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-kg-lift .gain { position: absolute; left: 72%; top: 0; bottom: 0; width: calc(72% * var(--g)); border-radius: 0 3px 3px 0; background: var(--km-ac); transform-origin: left; transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) 0.45s; }
.cw-kg-lift .tick { position: absolute; left: 72%; top: -4px; bottom: -4px; width: 1px; background: var(--km-fg); opacity: 0; transition: opacity 0.3s 0.4s; }
.cw-km-in .cw-kg-lift .base, .cw-km-in .cw-kg-lift .gain { transform: none; }
.cw-km-in .cw-kg-lift .tick { opacity: 1; }
/* ruler: several lifts on one shared scale, so +28% is nine times +3.2% on the page too */
.cw-kg-ruler { position: relative; display: block; height: var(--gh, 14px); border-radius: 3px; background: color-mix(in srgb, var(--km-dim) 24%, transparent); }
.cw-kg-ruler .rf { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); min-width: 3px; border-radius: 3px; background: var(--km-ac); transform-origin: left; transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s; }
.cw-km-in .cw-kg-ruler .rf { transform: none; }
.cw-kg-ruler > i { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--km-fg); opacity: 0.3; }
.cw-kg-ruler > i b { display: none; position: absolute; top: calc(100% + 3px); left: 0; transform: translateX(-50%); font: 400 9.5px/12px 'Plus Jakarta Sans', sans-serif; white-space: nowrap; color: var(--km-fg); }
.cw-kg-ruler > i:first-of-type b { transform: none; } .cw-kg-ruler > i:last-of-type b { transform: translateX(-100%); }
.cw-ka-lead .cw-kg-ruler, .cw-ke-row:last-child .cw-kg-ruler { margin-bottom: 18px; }
.cw-ka-lead .cw-kg-ruler > i b, .cw-ke-row:last-child .cw-kg-ruler > i b { display: block; }
/* cells (a share of 100) and dots (a head count). Only the lit marks wait their turn; unlit ones settle at once */
.cw-kg-cells, .cw-kg-dots { display: grid; grid-auto-flow: column; gap: 2px; }
.cw-kg-cells { grid-template-columns: repeat(50, 1fr); grid-template-rows: repeat(2, auto); }
.cw-kg-dots { grid-template-columns: repeat(var(--cols, 58), 1fr); grid-template-rows: repeat(var(--rows, 5), auto); }
.cw-kg-cells i, .cw-kg-dots i { aspect-ratio: 1; border-radius: 1.5px; background-color: var(--km-dim); opacity: 0.32; transform: scale(0); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n) * var(--sp, 3ms)), background-color 0.3s, opacity 0.3s; }
.cw-kg-dots i { border-radius: 50%; }
.cw-kg-cells i { --sp: 5ms; --st: 90ms; }
.cw-kg-cells i.was { background-color: var(--km-fg); opacity: 0.5; }
.cw-km-in .cw-kg-cells i, .cw-km-in .cw-kg-dots i { transform: none; }
.cw-km-in i.lit { background-color: var(--km-ac); opacity: 1; transition-delay: calc(var(--n) * var(--sp, 3ms)), calc(450ms + var(--n) * var(--st, 14ms)), calc(450ms + var(--n) * var(--st, 14ms)); }
.cw-kg-dots i.more { background-color: var(--km-ac); opacity: 0; }
.cw-km-in .cw-kg-dots i.more { animation: cwKmMore 2.6s ease-in-out calc(1.5s + var(--m) * 0.3s) infinite; }
@keyframes cwKmMore { 0%, 100% { opacity: 0.08; } 50% { opacity: calc(0.62 - var(--m) * 0.16); } }
/* grow: before to after as marks you can count. Grey was there, colour was added */
.cw-kg-grow { display: flex; align-items: center; gap: 3px; }
.cw-kg-grow i { flex: 0 1 max(10px, var(--gh, 14px)); aspect-ratio: 1; border-radius: 3px; background-color: var(--km-fg); opacity: 0.5; transform: scale(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--n) * 35ms), background-color 0.3s, opacity 0.3s; }
.cw-kg-grow.dot i { border-radius: 50%; }
.cw-km-in .cw-kg-grow i { transform: none; }
.cw-km-in .cw-kg-grow i.lit { transition-delay: calc(520ms + var(--k) * 70ms), 0s, 0s; }
/* ticks: a count too big for dots but still worth seeing one by one (commits) */
.cw-kg-ticks { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(var(--cols), 1fr); gap: 2px 1px; }
.cw-kg-ticks i { height: max(4px, calc(var(--gh, 14px) * 0.5)); border-radius: 1px; background-color: var(--km-ac); transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-km-in .cw-kg-ticks i { transform: none; }
/* span: a duration, end to end */
.cw-kg-span { position: relative; display: flex; align-items: center; gap: 3px; max-width: 78%; padding-bottom: 16px; }
.cw-kg-span u { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--km-ac); text-decoration: none; transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cw-kg-span u.b { background: var(--km-ac); transition-delay: 1.05s; }
.cw-kg-span i { flex: 1; height: max(3px, calc(var(--gh, 14px) * 0.3)); border-radius: 2px; background: var(--km-ac); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) calc(150ms + var(--n) * 450ms); }
.cw-km-in .cw-kg-span u, .cw-km-in .cw-kg-span i { transform: none; }
.cw-kg-span b { position: absolute; bottom: 0; font: 400 9.5px/12px 'Plus Jakarta Sans', sans-serif; color: var(--km-dim); white-space: nowrap; }
.cw-kg-span b.a { left: 0; } .cw-kg-span b.b { right: 0; }
/* range: two or three of something, drawn as the things themselves. The optional one is dashed */
.cw-kg-range { display: flex; gap: 5px; }
.cw-kg-range i { flex: 0 0 22%; max-width: 64px; height: max(14px, calc(var(--gh, 14px) * 1.6)); border-radius: 4px; border: 1px solid var(--km-ac); background: color-mix(in srgb, var(--km-ac) 24%, transparent); opacity: 0; transform: scale(0.6); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--n) * 160ms), opacity 0.3s calc(var(--n) * 160ms); }
.cw-kg-range i.opt { background: none; border-style: dashed; }
.cw-km-in .cw-kg-range i { opacity: 1; transform: none; }
.cw-km-in .cw-kg-range i.opt { opacity: 0.7; }
/* flow: one step from A to B */
.cw-kg-flow { position: relative; display: flex; align-items: center; gap: 6px; max-width: 320px; }
.cw-kg-flow b { flex: 0 0 auto; font: 500 10px/18px 'Plus Jakarta Sans', sans-serif; padding: 0 8px; border-radius: 999px; border: 1px solid var(--km-ln); color: var(--km-mut); white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-kg-flow b.to { border-color: var(--km-ac); background: var(--km-ac); color: var(--km-on); transition-delay: 0.75s; }
.cw-kg-flow i { position: relative; flex: 1; height: 1px; background: var(--km-ac); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.cw-kg-flow i::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--km-ac); border-right: 1px solid var(--km-ac); transform: rotate(45deg); }
.cw-kg-flow i::before { content: ''; position: absolute; left: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--km-ac); opacity: 0; }
.cw-km-in .cw-kg-flow b { opacity: 1; transform: none; } .cw-km-in .cw-kg-flow i { transform: none; }
/* checks: a short list that all has to pass */
.cw-kg-checks { display: flex; gap: 4px; }
.cw-kg-checks i { position: relative; flex: 0 1 max(12px, var(--gh, 14px)); aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--km-dim); transition: background-color 0.25s calc(300ms + var(--n) * 70ms), border-color 0.25s calc(300ms + var(--n) * 70ms); }
.cw-kg-checks i::after { content: ''; position: absolute; left: 50%; top: 44%; width: 26%; height: 50%; border: solid var(--km-on); border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) calc(340ms + var(--n) * 70ms); }
.cw-km-in .cw-kg-checks i { background-color: var(--km-ac); border-color: var(--km-ac); }
.cw-km-in .cw-kg-checks i::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
/* split: a total and the parts that make it. The same bar on three rows, a different part lit on each */
.cw-kg-split { display: flex; gap: 2px; }
.cw-kg-split i { position: relative; flex: var(--w) 1 0px; height: var(--gh, 14px); border-radius: 3px; background-color: var(--km-dim); opacity: 0.3; transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n) * 260ms), background-color 0.3s, opacity 0.3s; }
.cw-km-in .cw-kg-split i { transform: none; }
.cw-km-in .cw-kg-split i.lit { transition-delay: calc(var(--n) * 260ms), 0s, 0s; }
.cw-km-in .cw-kg-split i.lit.two { opacity: 0.6; }
.cw-kg-split i b { display: none; position: absolute; left: 0; top: calc(100% + 4px); font: 400 9.5px/12px 'Plus Jakarta Sans', sans-serif; color: var(--km-fg); white-space: nowrap; }
.cw-ka-lead .cw-kg-split.all, .cw-ke-row .cw-kg-split.all { margin-bottom: 16px; }
.cw-ka-lead .cw-kg-split.all i b, .cw-ke-row .cw-kg-split.all i b { display: block; }
/* hover: the marks of the row under the pointer answer once */
@keyframes cwKmBreathe { 40% { transform: scaleX(1.07); } }
@keyframes cwKmPulse { 40% { transform: scale(1.6); } }
@keyframes cwKmHop { 40% { transform: translateY(-3px); } }
@keyframes cwKmRun { 0% { left: 0; opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
@media (hover: hover) {
  .cw-km-in:hover .cw-kg-lift .gain, .cw-km-in:hover .cw-kg-ruler .rf { animation: cwKmBreathe 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
  .cw-km-in:hover i.lit { animation: cwKmPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n) * var(--rp, 10ms)); }
  .cw-km-in:hover .cw-kg-range i { animation: cwKmHop 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n) * 70ms); }
  .cw-km-in:hover .cw-kg-checks i { animation: cwKmHop 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--n) * 35ms); }
  .cw-km-in:hover .cw-kg-flow i::before { animation: cwKmRun 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
}
/* mobile frame: the lead stacks over its rows; in "rows" the number sits beside the label and the drawing takes the full width */
:is(.mobile-frame, .cw-narrow) .cw-km { --km-big: 68px; --km-mid: 36px; --km-sm: 22px; --km-ctl: 12px; --km-lab-lg: 18px; --km-lab: 16px; --km-sub: 13px; }
:is(.mobile-frame, .cw-narrow) .cw-km-top { margin-bottom: 16px; }
:is(.mobile-frame, .cw-narrow) .cw-km-foot { flex-wrap: wrap; margin-top: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-km-foot .cw-km-note { flex-basis: 100%; }
:is(.mobile-frame, .cw-narrow) .cw-km { --km-ctl: 14px; } /* 31px targets for a thumb */
:is(.mobile-frame, .cw-narrow) .cw-ka { grid-template-columns: minmax(0, 1fr); gap: 22px; }
:is(.mobile-frame, .cw-narrow) .cw-km-b:first-child .cw-ka-row:first-child { border-top: 1px solid var(--km-ln); padding-top: 14px; } /* stacked under the lead here, so the first row needs its rule back */
:is(.mobile-frame, .cw-narrow) .cw-ke { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-ke-row { padding: 16px 0 18px; }
:is(.mobile-frame, .cw-narrow) .cw-ke-k { grid-area: 1 / 1; }
:is(.mobile-frame, .cw-narrow) .cw-ke-v { grid-area: 1 / 2; }
:is(.mobile-frame, .cw-narrow) .cw-ke-fig { grid-area: 2 / 1 / 3 / 3; margin-top: 12px; }
:is(.mobile-frame, .cw-narrow) .cw-ke-fig:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cw-km *, .cw-km *::before, .cw-km *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ═══════════ SOLO LIVE widgets: rigs, console, setups, field (page tokens), then the live console and the bench ═══════════ */
/* ── rigs ── */
.cw-rig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 8px; }
.cw-rig-load { display: flex; gap: 14px; font-size: 13px; color: var(--text-300); }
.cw-rig-load b { font-family: 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 500; color: var(--text); margin-right: 2px; }
.cw-rig { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; margin-top: 12px; align-items: stretch; }
.cw-rig-stage { border-radius: 16px; background: var(--surface); padding: 8px; }
.cw-rig-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.cw-rig-line { stroke: var(--text-200); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; fill: none; }
.cw-rig-line.far { stroke-dasharray: 0.02 0.02; stroke-dashoffset: 0; opacity: 0; }
svg.in .cw-rig-line { animation: cwRigDraw 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 90ms + 120ms) forwards; }
svg.in .cw-rig-line.far { animation: cwFade 0.5s ease calc(var(--i) * 90ms + 120ms) forwards; }
@keyframes cwRigDraw { to { stroke-dashoffset: 0; } }
.cw-rig-dev { cursor: pointer; outline: none; }
.cw-rig-dev rect { fill: var(--bg); stroke: var(--border); stroke-width: 1.2; transition: stroke 160ms ease, fill 160ms ease; }
.cw-rig-dev.key rect { stroke: var(--case-ac, var(--primary)); stroke-width: 1.6; }
.cw-rig-dev text, .cw-rig-person text { font: 600 11px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); transition: fill 160ms ease; }
.cw-rig-dev:hover rect, .cw-rig-dev:focus-visible rect, .cw-rig-dev.on rect { stroke: var(--text); }
.cw-rig-dev.on rect { fill: var(--text); }
.cw-rig-dev.on text, .cw-rig-dev:hover text { fill: var(--text); }
.cw-rig-person > circle:first-child { fill: var(--text); }
.cw-rig-gaze { fill: var(--case-ac, var(--primary)); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-rig-side { display: flex; flex-direction: column; gap: 14px; justify-content: space-between; }
.cw-rig-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-rig-note b { color: var(--text); font-weight: 600; }
.cw-rig-detail { padding: 14px 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 20px; color: var(--text-300); min-height: 96px; }
.cw-rig-detail b { color: var(--text); font-size: 14px; font-weight: 600; }

/* ── console ── */
.cw-con-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cw-con-stage { margin-top: 12px; border-radius: 16px; background: var(--surface); padding: 20px; display: grid; place-items: center; overflow: hidden; }
.cw-con-frame { position: relative; width: 100%; aspect-ratio: 1.79; border-radius: 8px; background: var(--bg); box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(0,0,0,0.08); transform-origin: 50% 50%; transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-con-regions { position: absolute; inset: 0; }
.cw-con-reg { position: absolute; padding: 8px 10px; border: 1px solid var(--bg); border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; overflow: hidden; opacity: 0; transform: scale(0.96); transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-con-reg.in { opacity: 1; transform: none; }
.cw-con-reg b { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text); }
.cw-con-reg span { font-size: 11px; line-height: 15px; color: var(--text-300); }
.cw-con-reg em { font: 500 22px/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; font-style: normal; color: var(--text-200); margin-bottom: 2px; }
.cw-con-reg.hot { background: color-mix(in srgb, var(--case-ac, var(--primary)) 14%, var(--bg)); }
.cw-con-reg.hot em { color: var(--case-ac, var(--primary)); }
.cw-con-reg.low { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--bg) 6px 12px); }
.cw-con-ui { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 8px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.cw-con-ui.sweep { transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease; }
.cw-con-frame[data-layer="ui"] .cw-con-ui { opacity: 1; }
.cw-con-cur { position: absolute; left: 50%; top: 108%; z-index: 3; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; opacity: 0; transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1), top 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.is-sweep .cw-con-cur { transition-duration: 1.5s, 1.5s, 0.3s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.65, 0, 0.35, 1), ease; }
.is-collab .cw-con-cur { opacity: 1; }
.cw-con-cur svg { width: 16px; height: 16px; flex: none; fill: var(--cur); stroke: var(--bg); stroke-width: 1; }
.cw-con-cur i { font: 600 11px/16px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #fff; background: var(--cur); padding: 1px 7px; border-radius: 3px 8px 8px 8px; margin-top: 10px; white-space: nowrap; }
.cw-con-cur.me { --cur: var(--accent-2); }
.cw-con-cur.mate { --cur: #0f9d76; /* second collaborator colour, Figma-style multiplayer cursors */ }
[data-theme="dark"] .cw-con-cur i { color: #14130f; }
.cw-con-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; margin-top: 14px; }
.cw-con-dist { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12px; color: var(--text-300); }
.cw-con-dist input { grid-column: 1 / -1; width: 100%; accent-color: var(--text); }
.cw-con-dist output { color: var(--text); font-weight: 600; }
/* far away only the big regions survive: labels grow against the shrinking screen, small print drops out */
.cw-con-reg b, .cw-con-reg em { transition: font-size 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.is-far .cw-con-reg span, .is-far .cw-con-reg:not(.hot) b { opacity: 0; }
.is-far .cw-con-reg.hot b { font-size: 34px; line-height: 38px; }
.is-far .cw-con-reg.hot em { font-size: 64px; }

/* narrow: the mobile frame and small desktop windows */
.mobile-frame .cw-rig, .cw-narrow .cw-rig { grid-template-columns: 1fr; }
.mobile-frame .cw-con-foot, .cw-narrow .cw-con-foot { grid-template-columns: 1fr; }
.mobile-frame .cw-con-stage, .cw-narrow .cw-con-stage { padding: 10px; }
.mobile-frame .cw-con-reg span, .cw-narrow .cw-con-reg span { display: none; }
.mobile-frame .cw-con-reg, .cw-narrow .cw-con-reg { padding: 4px 5px; } .mobile-frame .cw-con-reg b, .cw-narrow .cw-con-reg b { font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-frame .cw-con-reg em, .cw-narrow .cw-con-reg em { font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .cw-roll, .cw-rig-line, .cw-con-reg, .cw-con-ui, .cw-con-cur, .cw-con-frame, .cw-cf-box, .cw-cf-card, .cw-cf-lines path, .cw-drv-tap, .cw-app-sheet, .cw-app-shelf, .cw-rig-gaze { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  .cw-rig-line { stroke-dashoffset: 0; } .cw-rig-line.far { opacity: 1; }
}

.cw-rig-head .cw-tabs, .cw-con-bar .cw-tabs, .cw-cf-bar .cw-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cw-rig-head .cw-tabs::-webkit-scrollbar, .cw-con-bar .cw-tabs::-webkit-scrollbar, .cw-cf-bar .cw-tabs::-webkit-scrollbar { display: none; }
.mobile-frame .cw-con-cur i, .cw-narrow .cw-con-cur i { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
/* the mode tabs fill the first line, so the two controls take the second one end to end instead of huddling at the right with a dead gutter beside them */
.mobile-frame .cw-con-acts, .cw-narrow .cw-con-acts { width: 100%; margin-left: 0; justify-content: space-between; }
/* ── setups: the four host setups as line drawings ── */
.cw-su-tabs { margin-top: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.cw-su { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; margin-top: 12px; }
.cw-su-stage { border-radius: 16px; background: var(--surface); padding: 8px; }
.cw-su-stage svg { display: block; width: 100%; height: auto; }
.cw-su-s { fill: var(--bg); stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.cw-su-s.thick { stroke-width: 4; stroke-linecap: butt; } .cw-su-s.soft { stroke: var(--text-200); stroke-width: 1; }
svg.in .cw-su-s { animation: cwSuDraw 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 70ms) forwards; }
@keyframes cwSuDraw { 60% { fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
.cw-su-tag, .cw-su-name, .cw-su-dim { opacity: 0; } svg.in .cw-su-tag, svg.in .cw-su-name, svg.in .cw-su-dim { animation: cwFade 0.4s ease calc(var(--i) * 70ms + 300ms) forwards; }
.cw-su-tag { font: 600 12px 'Plus Jakarta Sans', sans-serif; fill: var(--case-ac, var(--primary)); }
.cw-su-name { font: 600 10px 'Plus Jakarta Sans', sans-serif; fill: var(--text); }
.cw-su-dim line, .cw-su-dim path { stroke: var(--text-200); stroke-width: 1; stroke-dasharray: 3 3; fill: none; } .cw-su-dim path { stroke-dasharray: none; }
.cw-su-dim text { font: 500 11px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); }
.cw-su-side { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.cw-su-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); } .cw-su-note b { color: var(--text); font-weight: 600; }
.cw-su-side dl { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.cw-su-side dt { font-size: 12px; line-height: 18px; color: var(--text-300); } .cw-su-side dt + dd + dt { margin-top: 8px; }
.cw-su-side dd { margin: 0; font-size: 14px; line-height: 21px; color: var(--text); }
.cw-su-chip { display: inline-block; margin: 2px 6px 0 0; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--case-ac, var(--primary)) 14%, var(--bg)); color: var(--text); }
.mobile-frame .cw-su, .cw-narrow .cw-su { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .cw-su-s { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; } .cw-su-tag, .cw-su-name, .cw-su-dim { opacity: 1; animation: none !important; } }

/* ═══ field: the rooms as found, pins on the photo + the same list under it ═══ */
.cw-fd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.cw-fd-visit { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.cw-fd-photo { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface); }
.cw-fd-photo img { display: block; width: 100%; height: auto; user-select: none; }
.cw-fd-pin { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); font: 600 13px/24px 'Plus Jakarta Sans', sans-serif; cursor: pointer; opacity: 0; transform: scale(0.4); transition: opacity 0.3s ease calc(var(--i) * 90ms + 200ms), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 90ms + 200ms), background 0.2s, color 0.2s; }
.cw-fd-visit.in .cw-fd-pin { opacity: 1; transform: none; }
.cw-fd-pin b { font-weight: 600; }
.cw-fd-pin span { position: absolute; left: 30px; top: 1px; padding: 0 9px; border-radius: 999px; background: var(--bg); color: var(--text); font-size: 13px; line-height: 22px; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
.cw-fd-pin.flip span { left: auto; right: 30px; transform: translateX(4px); }
.cw-fd-pin.up span { left: auto; right: -6px; top: -31px; transform: translateY(4px); }
.cw-fd-photo:has(.cw-fd-pin.on) .cw-fd-pin:not(.on) { opacity: 0.55; }
.cw-fd-pin.on { background: var(--case-ac, var(--primary)); color: var(--bg); z-index: 2; }
.cw-fd-pin.on span { opacity: 1; transform: none; }
.cw-fd-pin:focus-visible { outline: 2px solid var(--case-ac, var(--primary)); outline-offset: 2px; }
.cw-fd-gaze { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--case-ac, var(--primary)); opacity: 0; transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s; pointer-events: none; }
.cw-fd-visit.in .cw-fd-gaze { opacity: 0.9; }
.cw-fd-visit figcaption { display: flex; flex-direction: column; gap: 8px; }
.cw-fd-title { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-300); } .cw-fd-title b { color: var(--text); font-weight: 600; margin-right: 6px; }
.cw-fd-visit ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cw-fd-visit li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text-300); cursor: default; transition: color 0.2s; }
.cw-fd-visit li > b { flex: 0 0 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-300); transition: color 0.2s; }
.cw-fd-visit li strong { font-weight: 600; color: var(--text); margin-right: 6px; }
.cw-fd-visit li.on > b { color: var(--case-ac, var(--primary)); } .cw-fd-visit li.on { color: var(--text); }
.cw-fd-tally { margin: 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text); }
.cw-fd-foot { margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.mobile-frame .cw-fd, .cw-narrow .cw-fd { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mobile-frame .cw-fd-visit, .cw-narrow .cw-fd-visit { flex: 0 0 84%; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .cw-fd-pin { opacity: 1; transform: none; transition: none; } .cw-fd-gaze { display: none; } }

/* ───────── LIVE CONSOLE (Solo LIVE case) ─────────
   The product UI from Figma (d17EL3G5ZZebVY23xl174K · 280:34120 preview layout, 280:34075 operations layout) at its
   1440 × 824 design size, scaled to the widget frame by transform. It reproduces a shipped light product, so every
   colour and type size below is the product's own raw value on purpose, identical in both site themes.
   TikTok Text is rendered in Plus Jakarta Sans, like the HTML case heroes. */

.cw-con-ui { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; background: #e4e4e4; }
.cw-con-ui.sweep { transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease; }
.cw-con-frame[data-layer="ui"] .cw-con-ui { opacity: 1; }
.cw-con-frame[data-layer="def"] .cw-con-ui { pointer-events: none; }
.cw-con-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cw-con-live { position: absolute; inset: 0; }
.cw-con-ui[data-kind="img"] .cw-con-live, .cw-con-ui[data-kind="html"] .cw-con-shot { display: none; }
.cw-con-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: var(--text-300); transition: opacity 0.24s ease; }
.cw-con-vars.off { opacity: 0.35; pointer-events: none; }
.cw-con-vars > span { font-weight: 600; color: var(--text); }
.cw-con-var { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.cw-lc { --teal: #009995; --t1: rgba(0,0,0,0.92); --t2: rgba(0,0,0,0.65); --t3: rgba(0,0,0,0.55); --t4: rgba(0,0,0,0.35); --line: rgba(0,0,0,0.1); --chat-fs: 14px;
  position: absolute; left: 0; top: 0; width: 1440px; height: 824px; transform-origin: 0 0; display: flex; flex-direction: column; background: #e4e4e4; color: var(--t1);
  font: 400 14px/20px 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.005em; text-align: left; user-select: none; }
.cw-lc * { box-sizing: border-box; }
.cw-lc p { margin: 0; }
.cw-lc button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.lc-ic { display: block; flex: none; }
.lc-row { display: flex; align-items: center; gap: 12px; }
.lc-row.g6 { gap: 6px; } .lc-row.g8 { gap: 8px; } .lc-row.g10 { gap: 10px; } .lc-row.g16 { gap: 16px; } .lc-row.g28 { gap: 28px; }
.lc-vr { width: 1px; height: 12px; background: var(--line); flex: none; }
.lc-vr.w { background: rgba(255,255,255,0.3); }
.lc-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.lc-thumb { display: block; border-radius: 4px; object-fit: cover; flex: none; }
.lc-check { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 4px; background: #fff; border: 1px solid rgba(0,0,0,0.25); }
.lc-check.s { position: static; width: 16px; height: 16px; display: block; }

.lc-head { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--line); }
.lc-head b { font-size: 16px; line-height: 24px; font-weight: 600; }
.lc-start { font-size: 12px; line-height: 18px; color: var(--t3); transition: opacity 0.2s ease; }
.cw-lc[data-live="0"] .lc-start, .cw-lc[data-live="0"] .lc-start + .lc-vr { opacity: 0; }
.lc-mode { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px !important; border: 1px solid var(--t2) !important; border-radius: 99px; font-size: 12px !important; font-weight: 600 !important; color: var(--t2) !important; transition: background 0.16s ease; }
.lc-mode:hover { background: rgba(0,0,0,0.05); }

.lc-main { flex: 1; min-height: 0; display: grid; gap: 2px; transition: opacity 0.18s ease; }
.cw-lc[data-layout="ops"] .lc-main { grid-template-columns: 547fr 444fr 444fr; grid-template-rows: minmax(0, 1fr); }
.cw-lc[data-layout="ops"] .lc-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; }
.cw-lc[data-layout="ops"] .lc-video, .cw-lc[data-layout="ops"] .lc-data { flex: 0 0 275px; }
.cw-lc[data-layout="ops"] .lc-chat, .cw-lc[data-layout="ops"] .lc-activity { flex: 1 1 0; }
/* video and scripts both off: the panel folds to its action bar and chat takes the full height */
.cw-lc[data-layout="ops"][data-video="0"][data-scripts="0"] .lc-video, .cw-lc[data-layout="ops"][data-live="0"] .lc-video { flex-basis: 40px; }
.lc-video { transition: flex-basis 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-lc[data-layout="preview"] .lc-main { grid-template-columns: 504fr 432fr 504fr; grid-template-rows: 275px minmax(0, 1fr); grid-template-areas: "prod video data" "prod video chat"; }
.cw-lc[data-layout="preview"] .lc-col { display: contents; }
.cw-lc[data-layout="preview"] .lc-products { grid-area: prod; } .cw-lc[data-layout="preview"] .lc-video { grid-area: video; }
.cw-lc[data-layout="preview"] .lc-data { grid-area: data; } .cw-lc[data-layout="preview"] .lc-chat { grid-area: chat; }
.cw-lc[data-layout="preview"] .lc-activity { display: none; }
.cw-lc.is-swapping .lc-main { opacity: 0; }
.lc-panel { position: relative; min-width: 0; min-height: 0; background: #fff; display: flex; flex-direction: column; overflow: hidden; }

/* products */
.lc-tabs { position: relative; display: flex; padding: 0 12px; background: #f8f8f8; flex: none; overflow: hidden; }
.lc-tab { width: 104px; height: 60px; padding: 4px; flex: none; display: flex; }
.lc-tab::before { content: ''; }
.lc-tab { flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; line-height: 18px; font-weight: 600; border-radius: 2px; background-clip: content-box; }
.lc-tab em { font-style: normal; }
.lc-tab.on { background-color: #000; color: #fff; }
.lc-tab.on .lc-ic { filter: invert(1); }
.lc-tabs-more { position: absolute; right: 0; top: 0; width: 56px; height: 60px; display: grid; place-items: center; background: linear-gradient(270deg, #f8f8f8 60%, rgba(248,248,248,0)); }
.lc-tabs-more i { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.12); }
.lc-phead { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; flex: none; font-weight: 600; }
.lc-add { display: inline-flex; align-items: center; gap: 4px; color: var(--teal); font-weight: 600; }
.lc-plist { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 16px; overflow: hidden; }
.lc-search { height: 36px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid rgba(0,0,0,0.14); border-radius: 4px; color: var(--t4); }
.lc-filters { display: flex; align-items: center; gap: 12px; flex: none; }
.lc-sel { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 60px; height: 24px; padding: 0 8px; border-radius: 4px; background: rgba(0,0,0,0.05); font-size: 12px; font-weight: 600; }
.lc-filters .lc-sel { width: 140px; }
.lc-cards { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.lc-card { position: relative; display: flex; background: #f8f8f8; border-radius: 4px; transition: background 0.3s ease, box-shadow 0.3s ease; }
.lc-card.pinned { background: #ebf7f7; box-shadow: inset 2px 0 0 var(--teal); }
.lc-card.flash { animation: lcFlash 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes lcFlash { 0% { box-shadow: inset 2px 0 0 var(--teal), 0 0 0 0 rgba(0,153,149,0.45); } 100% { box-shadow: inset 2px 0 0 var(--teal), 0 0 0 10px rgba(0,153,149,0); } }
.lc-card-main { flex: 1; min-width: 0; padding: 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.lc-card-top { position: relative; display: flex; gap: 8px; align-items: flex-start; }
.lc-idx { width: 44px; height: 36px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid rgba(0,0,0,0.14); border-radius: 4px; }
.lc-pic { position: relative; flex: none; } .lc-pic .lc-thumb { border-radius: 8px; }
.lc-drag { position: absolute; left: 0; bottom: 0; }
.lc-card-txt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-price { font-size: 16px; line-height: 24px; font-weight: 600; }
.lc-stock { font-size: 12px; line-height: 18px; color: var(--t2); } .lc-stock span { margin: 0 8px; color: var(--line); } .lc-stock em { font-style: normal; }
.lc-pin { position: absolute; right: 1px; bottom: 0; width: 72px; height: 24px; border-radius: 4px !important; background: var(--teal) !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; transition: background 0.16s cubic-bezier(0.65, 0, 0.35, 1), color 0.16s ease, transform 0.16s ease; }
.lc-pin:hover { background: #00807d !important; } .lc-pin:active { transform: scale(0.96); }
.lc-pin.done { background: rgba(0,153,149,0.14) !important; color: var(--teal) !important; }
.lc-stats { display: flex; align-items: center; background: #f0f0f0; border-radius: 4px; padding: 6px 0; font-size: 12px; line-height: 18px; color: var(--t3); }
.lc-stats span { flex: 1; text-align: center; } .lc-stats b { color: var(--t1); font-weight: 600; margin-left: 2px; } .lc-stats i { width: 1px; height: 10px; background: var(--line); }
.lc-flash { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #fff; border-radius: 4px; font-size: 12px; line-height: 18px; color: var(--t2); }
.lc-card-side { width: 42px; flex: none; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 12px 0; }
.lc-pempty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.lc-pempty > b { font-size: 16px; line-height: 24px; font-weight: 600; } .lc-pempty > p { width: 286px; font-size: 12px; line-height: 18px; color: var(--t3); }
.lc-recs { display: flex; gap: 7px; margin: 12px 0 10px; text-align: left; } .lc-recs div { width: 90px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 18px; }
.lc-recs b { font-weight: 600; } .lc-recs span { color: var(--t3); } .lc-recs em { font-style: normal; font-weight: 600; color: #595959; background: rgba(0,0,0,0.05); border-radius: 4px; padding: 1px 4px; display: flex; gap: 2px; align-items: center; white-space: nowrap; overflow: hidden; font-size: 11px; }
.lc-ghost { width: 286px; height: 36px; border-radius: 4px !important; background: rgba(0,0,0,0.05) !important; font-weight: 600 !important; }
.cw-lc[data-live="0"] .lc-plist { display: none; } .cw-lc[data-live="0"] .lc-pempty { display: flex; }

/* video and scripts */
.lc-video { background: #000; color: #fff; padding: 8px; gap: 8px; }
.lc-host { position: absolute; top: 0; bottom: 0; left: 50%; width: 206px; height: 100%; transform: translateX(-50%); object-fit: cover; object-position: 50% 12%; transition: opacity 0.28s ease; }
.cw-lc[data-layout="preview"] .lc-host { left: 0; width: 100%; transform: none; }
.lc-video::before { content: ''; position: absolute; inset: 0 0 auto; height: 64px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0)); z-index: 1; pointer-events: none; }
.lc-vbar { position: relative; z-index: 2; height: 24px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; font-size: 12px; line-height: 18px; font-weight: 600; color: rgba(255,255,255,0.8); }
.lc-vbar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.lc-sw { position: relative; width: 28px; height: 14px; border-radius: 99px !important; background: rgba(255,255,255,0.34) !important; transition: background 0.16s cubic-bezier(0.65, 0, 0.35, 1); flex: none; }
.lc-sw i { position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.16s cubic-bezier(0.65, 0, 0.35, 1); }
.lc-sw.on { background: var(--teal) !important; } .cw-lc[data-live="0"] .lc-vbar .lc-sw { background: rgba(255,255,255,0.34) !important; } .cw-lc[data-live="0"] .lc-vbar .lc-sw i { transform: none; } .lc-sw.on i { transform: translateX(14px); }
.lc-livebadge { display: grid; place-items: center; padding: 1px 6px; border-radius: 4px; background: #fe2c55; animation: lcPulse 1.6s ease-in-out infinite; }
@keyframes lcPulse { 50% { opacity: 0.55; } }
.lc-timer { color: #fff; font-variant-numeric: tabular-nums; }
.lc-script { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 8px; background: rgba(47,47,47,0.8); overflow: hidden; transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.lc-script-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 12px; line-height: 18px; font-weight: 600; color: rgba(255,255,255,0.7); flex: none; }
.lc-script-h.b { border-top: 1px solid rgba(255,255,255,0.2); }
.lc-script-b { flex: 1; min-height: 0; overflow: hidden; padding: 0 12px; font-weight: 600; }
.cw-lc[data-layout="preview"] .lc-script { flex: none; height: 232px; }
.cw-lc[data-scripts="0"] .lc-script { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.cw-lc[data-video="0"] .lc-host { opacity: 0; }
.lc-nofeed, .lc-golive { display: none; }
.cw-lc[data-live="0"] .lc-video { background: #595959; }
.cw-lc[data-live="0"] .lc-host, .cw-lc[data-live="0"] .lc-script, .cw-lc[data-live="0"] .lc-onair, .cw-lc[data-live="0"] .lc-mic, .cw-lc[data-live="0"] .lc-vbar label:first-child, .cw-lc[data-live="0"] .lc-vbar label:first-child + .lc-vr, .cw-lc[data-live="0"] .lc-video::before { display: none; }
.cw-lc[data-live="0"] .lc-nofeed { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9b9b9b; font-weight: 600; }
.cw-lc[data-live="0"][data-layout="preview"] .lc-golive { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.cw-lc[data-live="0"][data-layout="ops"] .lc-nofeed { display: none; }
.cw-lc[data-live="0"][data-layout="ops"] .lc-golive { display: flex; position: absolute; right: 8px; top: 6px; z-index: 3; } .cw-lc[data-live="0"][data-layout="ops"] .lc-golive > :not(.lc-go) { display: none; } .cw-lc[data-live="0"][data-layout="ops"] .lc-go { height: 28px; padding: 0 16px !important; }
.lc-practice { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-radius: 8px; background: rgba(0,0,0,0.14); }
.lc-go { height: 40px; border-radius: 4px !important; background: var(--teal) !important; color: #fff !important; font-weight: 600 !important; transition: background 0.16s ease, transform 0.16s ease; }
.lc-go:hover { background: #00807d !important; } .lc-go:active { transform: scale(0.98); }
.lc-golive p { display: flex; justify-content: center; gap: 4px; font-size: 12px; line-height: 18px; color: #f0f0f0; }

/* data */
.lc-dhead { height: 40px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; font-weight: 600; }
.lc-dhead b { font-weight: 600; line-height: 32px; } .lc-dhead b.on { box-shadow: inset 0 -2px var(--teal); }
.lc-more { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--t3); }
.lc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; padding: 4px 16px 0; flex: 1; min-height: 0; }
.lc-tile { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 8px; border-radius: 4px; background: #f5f5f5; outline: none; transition: background 0.16s ease; cursor: default; }
.lc-tile:hover, .lc-tile:focus-visible { background: #ebebeb; }
.lc-tile span { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--t3); }
.lc-tile b { display: flex; align-items: baseline; gap: 6px; font-size: 16px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; } .lc-tile em { font-style: normal; }
.lc-trend { font-size: 11px; font-weight: 600; color: #e14653; } .cw-lc[data-live="0"] .lc-trend { display: none; }
.lc-sugg { margin: 8px 16px 16px; padding: 8px 12px; border-radius: 4px; background: #f8f8f8; flex: none; display: flex; flex-direction: column; gap: 8px; transition: opacity 0.24s ease; }
.cw-lc[data-suggest="0"] .lc-sugg { display: none; }
.lc-sugg-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--t2); } .lc-sugg-h em { font-style: normal; }
.lc-sugg-b { height: 54px; display: grid; align-items: center; font-size: 12px; line-height: 18px; }
.lc-sugg-empty { text-align: center; color: var(--t3); } .lc-sugg-card { display: none; }
.cw-lc[data-sugg="1"] .lc-sugg-empty { display: none; }
.cw-lc[data-sugg="1"] .lc-sugg-card { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; animation: lcIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lc-sugg-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lc-sugg-card b { font-weight: 700; }
.lc-sugg-card .lc-pin { position: static; width: auto; padding: 0 10px !important; }
.lc-pop { position: absolute; z-index: 5; width: 300px; padding: 12px; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06); display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; animation: lcIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; pointer-events: none; }
.lc-pop[hidden] { display: none; }
.lc-pop span { grid-column: 1 / -1; font-size: 12px; font-weight: 600; } .lc-pop b { font-size: 18px; font-weight: 700; } .lc-pop small { font-size: 11px; color: var(--t3); }
.lc-pop p { grid-column: 1 / -1; font-size: 11px; line-height: 15px; color: var(--t3); } .lc-pop svg { grid-column: 1 / -1; width: 100%; height: 90px; margin-top: 6px; overflow: visible; }
.lc-pop .g { stroke: rgba(0,0,0,0.08); stroke-width: 1; fill: none; } .lc-pop .l { stroke: var(--teal); stroke-width: 2; fill: none; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.lc-pop .l.draw { animation: lcDraw 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes lcDraw { to { stroke-dashoffset: 0; } }

/* chat + activity */
.lc-thead { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; flex: none; font-weight: 600; } .lc-thead b { font-weight: 600; }
.cw-lc[data-layout="preview"] .lc-chat .lc-thead b { font-size: 16px; line-height: 24px; }
.lc-thead button { display: block; border-radius: 4px !important; transition: background 0.16s ease; } .lc-thead button:hover { background: rgba(0,0,0,0.06) !important; }
.lc-sub { display: flex; gap: 4px; padding: 4px 16px 8px; flex: none; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--t3); } .lc-sub span { padding: 3px 8px; border-radius: 4px; } .lc-sub .on { background: rgba(0,0,0,0.05); color: var(--t1); }
.lc-feed, .lc-acts { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.lc-feed { gap: 12px; padding: 8px 16px 0; font-size: var(--chat-fs); line-height: 1.43; transition: font-size 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
.lc-acts { gap: 8px; padding: 8px 12px 16px; align-items: flex-start; }
.lc-who { display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--t3); } .lc-who .lc-av { margin-right: 4px; }
.lc-msg p { padding-left: 32px; }
.lc-tag { display: inline-grid; place-items: center; min-height: 20px; padding: 0 6px; border-radius: 4px; background: rgba(0,0,0,0.05); font-size: 12px; line-height: 18px; font-weight: 600; color: #595959; white-space: nowrap; }
.lc-tag.green { background: rgba(0,158,61,0.15); color: #009e3d; }
.lc-act, .lc-order { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px 0 4px; white-space: nowrap; flex: none; font-size: 14px; line-height: 20px; }
.lc-act .lc-av, .lc-order .lc-av { margin-right: 4px; }
.lc-act span, .lc-order span { font-weight: 600; color: var(--t3); } .lc-act em, .lc-order em { font-style: normal; } .lc-act b, .lc-order b { font-weight: 600; }
.lc-act.soft { padding: 4px 24px 4px 4px; border-radius: 16px 0 0 16px; background: linear-gradient(90deg, #f5f5f5 80%, rgba(245,245,245,0)); }
.lc-order { padding: 4px 32px 4px 4px; border-radius: 100px 0 0 100px; background: linear-gradient(90deg, #ebf7f7 80%, rgba(235,247,247,0)); } .lc-order i { font-style: normal; color: var(--line); margin: 0 2px; } .lc-order small { font-size: 14px; color: var(--t3); }
.lc-mini { display: inline-block; margin-left: 2px; } .lc-mini .lc-thumb { box-shadow: 0 0 0 0.5px var(--line); }
.lc-x { font-size: 12px; font-weight: 800 !important; } .lc-x i { font-style: normal; font-size: 16px; }
.lc-orders { height: 107px; flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px; padding: 4px 12px 0; overflow: hidden; }
.lc-orders.in-chat { display: none; } .cw-lc[data-layout="preview"] .lc-orders.in-chat { display: flex; height: 74px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.lc-feed .only-preview { display: none; } .cw-lc[data-layout="preview"] .lc-feed .only-preview { display: inline-flex; align-self: flex-start; font-size: var(--chat-fs); }
.lc-dragline { flex: none; padding-top: 6px; border-bottom: 1px solid var(--line); display: grid; place-items: center; } .lc-dragline i { width: 36px; height: 3px; border-radius: 3px; background: rgba(0,0,0,0.2); margin-bottom: -2px; }
.lc-afilter { padding: 12px 16px 0; flex: none; }
.lc-input { margin: 16px; height: 44px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border: 1px solid rgba(0,0,0,0.14); border-radius: 4px; color: var(--t4); }
.lc-noact { display: none; flex: 1; align-items: center; justify-content: center; text-align: center; padding: 0 40px; color: var(--t3); }
.cw-lc[data-live="0"] .lc-noact { display: flex; } .cw-lc[data-live="0"] .lc-feed, .cw-lc[data-live="0"] .lc-acts, .cw-lc[data-live="0"] .lc-orders { display: none !important; }
.lc-msg.in, .lc-act.in, .lc-order.in { animation: lcIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes lcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cw-lc *, .cw-con-ui { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  .lc-pop .l { stroke-dashoffset: 0; }
}
.cw-con-frame[data-layer="ui"] .cw-con-regions { pointer-events: none; }
.cw-con-frame[data-layer="ui"] .cw-con-ui { pointer-events: auto; } /* the screenshot layer used to be inert; the HTML console is operated */

.cw-lc .lc-data { overflow: visible; z-index: 2; } /* the metric popover hangs below the tiles, over the panel underneath */

/* ───────── BENCH (Solo LIVE case): data, tools and preparation as running stages ─────────
   Two halves. The stages are slices of the LIVE console (live-console.css) at their own 993px size, so they keep the
   product's raw values in both themes. The chrome around them (tabs, task line, legend, lanes) reads the page tokens. */

/* ── stages ── */
.lc-sugg-none { display: none; text-align: center; color: var(--t3); }
.cw-lc[data-took="1"] .lc-sugg-none { display: block; } .cw-lc[data-took="1"] .lc-sugg-empty { display: none; }
.cw-lc[data-layout="data"] .lc-head, .cw-lc[data-layout="tools"] .lc-head { display: none; }
.cw-lc[data-layout="data"] .lc-main, .cw-lc[data-layout="tools"] .lc-main { grid-template-columns: 547fr 444fr; grid-template-rows: minmax(0, 1fr); }
.cw-lc[data-layout="tools"] .lc-main { grid-template-columns: 420fr 290fr 290fr; }
.cw-lc[data-layout="tools"] .lc-data, .cw-lc[data-layout="tools"] .lc-vbar label + .lc-vr, .cw-lc[data-layout="tools"] .lc-vbar label:nth-of-type(2), .cw-lc[data-layout="tools"] .lc-mic, .cw-lc[data-layout="tools"] .lc-filters .lc-sel + .lc-sel { display: none; }
.cw-lc[data-layout="tools"] .lc-activity { flex: 1 1 0; } .cw-lc[data-layout="tools"] .lc-filters .lc-sel { width: 120px; }
.cw-lc[data-layout="data"] .lc-col, .cw-lc[data-layout="tools"] .lc-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; }
.cw-lc[data-layout="data"] .lc-main > .lc-col:nth-of-type(1) { display: none; }
.cw-lc[data-layout="data"] .lc-data, .cw-lc[data-layout="tools"] .lc-video { flex: 0 0 275px; } .cw-lc[data-layout="data"] .lc-activity, .cw-lc[data-layout="tools"] .lc-chat { flex: 1 1 0; }
.cw-lc[data-layout="data"] .lc-orders { height: 74px; }

/* ghost cursor that plays a chapter once */
.lc-gcur { position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; opacity: 0; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
.lc-gcur.on { opacity: 1; }
.lc-gcur svg { display: block; width: 24px; height: 24px; fill: #111; stroke: #fff; stroke-width: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.lc-gcur i { position: absolute; left: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; }
.lc-gcur.tap i { animation: lcTap 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes lcTap { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.2); } }

/* tools: the old strip and the giveaway list replace the product list; the new tool pane opens above chat */
.lc-oldtabs { position: relative; display: none; padding: 0 12px; background: #f8f8f8; flex: none; overflow: hidden; }
.lc-oldtab { width: 79px; height: 60px; padding: 4px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; line-height: 18px; font-weight: 600; border-radius: 2px; background-clip: content-box; cursor: pointer; }
.lc-oldtab em { font-style: normal; } .lc-oldtab.on { background-color: #000; color: #fff; } .lc-oldtab.on .lc-ic { filter: invert(1); }
.cw-lc[data-layout="tools"] .lc-tab { cursor: pointer; }
.cw-lc[data-era="before"] .lc-tabs { display: none; } .cw-lc[data-era="before"] .lc-oldtabs { display: flex; }
.lc-gv-list { display: none; flex: 1; min-height: 0; flex-direction: column; }
.cw-lc[data-era="before"][data-tool] .lc-products > .lc-phead, .cw-lc[data-era="before"][data-tool] .lc-plist { display: none; }
.cw-lc[data-era="before"][data-tool] .lc-gv-list { display: flex; animation: lcIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lc-toolbtns { display: none; gap: 8px; padding: 12px 16px 2px; flex: none; }
.cw-lc[data-era="after"] .lc-tabs { display: none; } .cw-lc[data-era="after"] .lc-toolbtns { display: flex; }
.lc-toolbtn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 4px; background: rgba(0,0,0,0.05); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.lc-gv-item { margin: 0 16px; padding: 12px; border-radius: 4px; background: #f8f8f8; display: grid; grid-template-columns: 48px 1fr auto; gap: 10px 12px; align-items: center; }
.lc-gv-item + .lc-gv-item { margin-top: 8px; }
.lc-gv-item > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.lc-gv-pic { width: 48px; height: 48px; border-radius: 8px; background: #fe2c55; color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.lc-gv-tasks { grid-column: 1 / -1; padding: 8px 10px; border-radius: 4px; background: #fff; font-size: 12px; line-height: 18px; color: var(--t2); }
.lc-ghost.s { width: auto; height: 28px; padding: 0 12px !important; font-size: 12px !important; }
.lc-gv-pub { position: static !important; }
.lc-runchip { position: absolute; left: 12px; top: 40px; z-index: 3; display: none !important; flex-direction: column; align-items: center; gap: 0; border-radius: 8px !important; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,0.9); animation: lcChip 1.8s ease-in-out infinite; }
.cw-lc[data-era="after"] .lc-runchip { display: flex !important; }
.lc-runchip .lc-gv-pic { width: 44px; height: 36px; border-radius: 0; font-size: 16px; }
.lc-runchip b { width: 44px; padding: 1px 0; background: rgba(0,0,0,0.72); color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
@keyframes lcChip { 50% { box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 7px rgba(254,44,85,0.35); } }
.lc-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: 292px; padding: 14px; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.16); display: flex; flex-direction: column; gap: 12px; overflow: hidden; transform: translateX(106%); transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-lc[data-tool="perf"] .lc-drawer { transform: none; }
.lc-dr-h { display: flex; justify-content: space-between; align-items: center; } .lc-dr-h b { font-size: 16px; line-height: 24px; font-weight: 600; }
.lc-cdown.k { display: inline-block; padding: 0 5px; border-radius: 4px; background: #000; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.lc-dr-note { display: flex; gap: 6px; align-items: flex-start; padding: 10px; border-radius: 4px; background: #e9edf0; font-size: 12px; line-height: 18px; color: var(--t2); } .lc-dr-note .lc-ic { margin-top: 2px; }
.lc-drawer .lc-gv-item { margin: 0; }
.lc-dr-sub { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .lc-dr-sub b { font-weight: 600; }
.lc-dr-list { display: flex; flex-direction: column; } .lc-dr-list div { display: flex; align-items: center; gap: 8px; padding: 7px 0; } .lc-dr-list span { font-weight: 600; } .lc-dr-list em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--t3); }
.lc-stamp { position: absolute; z-index: 8; width: 30px; height: 30px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fe2c55; color: #fff; display: grid; place-items: center; font-size: 14px; line-height: 1; font-weight: 700; font-style: normal; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0,0,0,0.3); animation: lcIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; pointer-events: none; }

/* prep: header variants (280:33356), a get-ready list and flash sales made before the room opens */
.lc-pre .lc-status { display: none; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; white-space: nowrap; }
.lc-pre .lc-status em, .lc-pre .lc-status i { font-style: normal; font-variant-numeric: tabular-nums; } .lc-pre .lc-status em { color: #e14140; }
.lc-pre .lc-status.s-air { color: var(--t3); }
.lc-pre[data-phase="days"] .s-days, .lc-pre[data-phase="ready"] .s-ready, .lc-pre[data-phase="air"] .s-air { display: inline-flex; animation: lcIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lc-onair-h { display: none; align-items: center; gap: 8px; } .lc-onair-h .lc-timer { color: var(--t1); font-size: 14px; font-weight: 600; }
.lc-pre[data-phase="air"] .lc-onair-h { display: inline-flex; } .lc-pre:not([data-phase="air"]) .lc-onair-h + .lc-vr { display: none; }
.lc-pre-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 380fr 611fr; gap: 2px; }
.lc-prep-n { font-size: 12px; font-weight: 600; color: var(--t3); }
.lc-prep-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.lc-prep-i { display: flex !important; align-items: flex-start; gap: 10px; width: 100%; padding: 12px !important; border-radius: 4px !important; background: #f8f8f8 !important; text-align: left; transition: background 0.2s ease; }
.lc-prep-i span { display: flex; flex-direction: column; gap: 2px; } .lc-prep-i b { font-weight: 600; } .lc-prep-i em { font-style: normal; font-size: 12px; line-height: 18px; color: var(--t3); }
.lc-prep-i .lc-check { margin-top: 2px; flex: none; position: relative; transition: background 0.16s ease, border-color 0.16s ease; }
.lc-prep-i.done { background: #ebf7f7 !important; } .lc-prep-i.done .lc-check { background: var(--teal); border-color: var(--teal); }
.lc-prep-i.done .lc-check::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lc-batch { display: inline-flex !important; align-items: center; gap: 4px; color: var(--teal) !important; font-weight: 600 !important; }
.lc-pre[data-batch="1"] .lc-batch, .lc-pre:not([data-phase="days"]) .lc-batch { opacity: 0.35; pointer-events: none; }
.lc-fs-list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.lc-fs-empty { padding: 56px 40px; text-align: center; color: var(--t3); } .lc-pre[data-batch="1"] .lc-fs-empty { display: none; }
.lc-fs-row { display: none; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border-radius: 4px; background: #f8f8f8; transition: background 0.3s ease; }
.lc-pre[data-batch="1"] .lc-fs-row { display: grid; animation: lcIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 90ms) both; }
.lc-fs-row .lc-stock b { color: #fe2c55; font-weight: 600; } .lc-fs-row .lc-stock s { color: var(--t4); }
.lc-fs-go { position: static !important; width: 80px !important; height: 28px !important; }
.lc-pre:not([data-phase="air"]) .lc-fs-go { opacity: 0.3; pointer-events: none; }
.lc-fs-row.live { background: #ebf7f7; } .lc-fs-row.live .lc-fs-tag { background: rgba(254,44,85,0.12); color: #fe2c55; }
.lc-fs-row.live .lc-fs-go { background: rgba(0,153,149,0.14) !important; color: var(--teal) !important; pointer-events: none; }

/* ── chrome (page tokens) ── */
.cw-bn { margin-top: 8px; }
.cw-bn-ch + .cw-bn-ch { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border); }
.cw-bn-no { display: block; margin-bottom: 4px; font-size: 13px; line-height: 20px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-bn-block + .cw-bn-block { margin-top: 28px; }
.cw-bn-era { font: 600 15px/22px 'Plus Jakarta Sans', sans-serif; color: var(--text); min-width: 52px; }
.cw-bn-head { margin: 0 0 14px; } .cw-bn-head h3 { margin: 0 0 4px; font: 600 20px/28px 'Plus Jakarta Sans', sans-serif; color: var(--text); } .cw-bn-head h3 em { font-style: normal; color: var(--case-ac, var(--primary)); }
.cw-bn-head p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); max-width: 640px; }
.cw-bn-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; min-height: 36px; }
.cw-bn-task { margin: 0; flex: 1 1 320px; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-bn-count { display: flex; gap: 18px; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-bn-count b { font: 500 18px/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text); margin-left: 4px; } .cw-bn-count b.bad { color: var(--primary); }
.cw-bn-stage { padding: 12px; border-radius: 16px; background: var(--surface); }
.cw-bn-canvas { position: relative; border-radius: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: #e4e4e4; /* the product's own canvas grey, same in both themes */ }
.cw-bn-legend { list-style: none; counter-reset: bn; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cw-bn-legend li { counter-increment: bn; padding-top: 10px; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 20px; color: var(--text-300); transition: border-color 0.3s ease; }
.cw-bn-legend li b { font-weight: 600; color: var(--text); } .cw-bn-legend li b::before { content: counter(bn) "  "; color: var(--text-300); white-space: pre; transition: color 0.3s ease; }
.cw-bn-legend li.on { border-top-color: var(--case-ac, var(--primary)); } .cw-bn-legend li.on b::before { color: var(--case-ac, var(--primary)); }
.cw-bn-tp { margin-top: 22px; }
.cw-bn-lanes { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-bn-lane { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cw-bn-lane > b { font-weight: 600; color: var(--text); padding: 0 8px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.cw-bn-lane i { display: flex; gap: 6px; height: 14px; align-items: center; transition: opacity 0.3s ease; } .cw-bn-lane i.pre { justify-content: flex-end; }
.cw-bn-lane u { display: block; height: 10px; width: 36px; border-radius: 3px; background: var(--case-ac, var(--primary)); }
.cw-bn-lane.l0 u { width: 64px; background: repeating-linear-gradient(135deg, var(--text-200) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--text-200); }
.cw-bn-lane u.tap { width: 10px; border-radius: 50%; }
.cw-bn-lanes[data-phase="days"] .air, .cw-bn-lanes[data-phase="ready"] .air, .cw-bn-lanes[data-phase="air"] .pre { opacity: 0.3; }
.mobile-frame .cw-bn-legend, .cw-narrow .cw-bn-legend { grid-template-columns: 1fr; gap: 10px; }

/* ── console widget ── */
.cw-con-changes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.cw-con-changes li { position: relative; padding-left: 14px; } .cw-con-changes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--case-ac, var(--primary)); }
.cw-con-reg.slim { flex-direction: row; align-items: center; padding: 0 10px; } .cw-con-reg.slim b { font-size: 13px; line-height: 16px; white-space: nowrap; }
.mobile-frame .cw-con-ghost i, .cw-narrow .cw-con-ghost i, .mobile-frame .cw-con-reg.slim b, .cw-narrow .cw-con-reg.slim b { display: none; }

/* ── layouts: region maps over the real screens, one Before and the two modes it became ── */
.cw-ly { margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }
.cw-ly-map { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw-ly-map figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-ly-map figcaption b { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.cw-ly-map.before { align-self: center; width: min(100%, 560px); }
.cw-ly-frame { position: relative; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.cw-ly-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0.16; filter: grayscale(1); }
.cw-ly-reg { position: absolute; padding: 7px 9px; border: 1px solid var(--bg); border-radius: 7px; background: color-mix(in srgb, var(--surface) 86%, transparent); display: flex; flex-direction: column; gap: 1px; overflow: hidden; opacity: 0; transform: scale(0.96); transition: opacity 0.32s ease calc(var(--i) * 70ms), transform 0.42s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 70ms); }
.cw-ly-map.in .cw-ly-reg { opacity: 1; transform: none; }
.cw-ly-reg b { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-ly-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.cw-ly-reg em { font: 500 24px/1.05 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; font-style: normal; color: var(--text); }
.cw-ly-reg small { font-size: 13px; line-height: 17px; color: var(--text-300); }
.cw-ly-reg.slim { flex-direction: row; align-items: center; padding: 0 9px; } .cw-ly-reg.slim b { white-space: nowrap; }
.cw-ly-reg.up { background: color-mix(in srgb, var(--case-ac, var(--primary)) 16%, var(--bg)); } .cw-ly-reg.up em { color: var(--case-ac, var(--primary)); }
.cw-ly-reg.down, .cw-ly-reg.low { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, var(--bg) 6px 12px); } .cw-ly-reg.down em { color: var(--text-300); }
.cw-ly-fork { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text); }
.cw-ly-fork::before, .cw-ly-fork::after { content: ""; width: 1px; height: 18px; background: var(--border); }
.cw-ly-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cw-con-changes.one { grid-template-columns: 1fr; margin-top: 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-ly-note { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.mobile-frame .cw-ly-pair, .cw-narrow .cw-ly-pair { grid-template-columns: 1fr; }
.mobile-frame .cw-ly-reg, .cw-narrow .cw-ly-reg { padding: 4px 5px; } .mobile-frame .cw-ly-reg em, .cw-narrow .cw-ly-reg em { font-size: 16px; } .mobile-frame .cw-ly-reg small, .cw-narrow .cw-ly-reg small, .mobile-frame .cw-ly-reg.slim b, .cw-narrow .cw-ly-reg.slim b { display: none; }
.cw-con-bar { align-items: center; } .cw-con-dist { margin-top: 14px; max-width: 420px; }

/* ── setups: one row per setup, the host drawn in it ── */
.cw-sx { margin-top: 8px; display: flex; flex-direction: column; gap: 28px; }
.cw-sx-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.cw-sx-side { display: flex; flex-direction: column; gap: 8px; }
.cw-sx-no { font-size: 13px; line-height: 20px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-sx-side h4 { margin: 0; font: 600 18px/26px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-sx-ask { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; line-height: 21px; color: var(--text); } .cw-sx-ask span { display: block; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-sa { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease calc(var(--i) * 90ms), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 90ms); }
.cw-sx-row.in .cw-sa { opacity: 1; transform: none; }
.cw-sa-floor { stroke: var(--text-200); stroke-width: 1.2; } .cw-sa-line { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cw-sa-line.thick { stroke-width: 3.2; }
.cw-sa-ink { fill: var(--text); } .cw-sa-obj { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; }
.cw-sa-b.g { fill: var(--border); } .cw-sa-b.k { fill: var(--text); opacity: 0.78; } .cw-sa-b.a { fill: var(--case-ac, var(--primary)); opacity: 0.6; } .cw-sa-b.rec { fill: var(--primary); }
.cw-sa-gaze { stroke: var(--case-ac, var(--primary)); stroke-width: 1.8; stroke-dasharray: 5 6; stroke-linecap: round; animation: cwSaFlow 1.1s linear infinite; }
.cw-sa-dot { fill: var(--case-ac, var(--primary)); }
@keyframes cwSaFlow { to { stroke-dashoffset: -11; } }
.cw-sa-t { font: 600 15px 'Plus Jakarta Sans', sans-serif; fill: var(--text); }
.cw-sa-gt, .cw-sa-dt { font: 600 13px 'Plus Jakarta Sans', sans-serif; fill: var(--case-ac, var(--primary)); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; } .cw-sa-dt { fill: var(--text-300); }
.cw-sa-dim { fill: none; stroke: var(--text-200); stroke-width: 1.2; }
.mobile-frame .cw-sx-row, .cw-narrow .cw-sx-row { grid-template-columns: 1fr; gap: 12px; }
.mobile-frame .cw-sa-t, .cw-narrow .cw-sa-t { font-size: 22px; } .mobile-frame .cw-sa-gt, .cw-narrow .cw-sa-gt, .mobile-frame .cw-sa-dt, .cw-narrow .cw-sa-dt { font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .cw-sa, .cw-ly-reg { opacity: 1; transform: none; transition: none; } .cw-sa-gaze { animation: none; } }

/* ── field widget: three visits, the third one drawn ── */
.cw-fd { gap: 16px; align-items: start; }
.cw-fd-photo.drawn svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) { .lc-gcur { display: none; } .cw-con-ghost { opacity: 1; animation: none; } }

/* ── round 4 ── */
.cw[data-key^="solo"] .cw-bd-title { max-width: none; }
.cw-con-acts { display: inline-flex; gap: 8px; }
.cw-con-cmp[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.cw-con-was { position: absolute; inset: 0; z-index: 2; border-radius: 8px; overflow: hidden; background: #e4e4e4; /* product canvas grey */ opacity: 0; pointer-events: none; transition: opacity 0.32s ease; }
.cw-con-was img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top left; }
.cw-con-was span { position: absolute; left: 12px; bottom: 12px; padding: 2px 12px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 13px/22px 'Plus Jakarta Sans', sans-serif; }
.cw-con-frame[data-was="1"] .cw-con-was { opacity: 1; pointer-events: auto; }
.cw-con-reg.slim em { font-size: 13px; line-height: 16px; margin: 0 6px 0 0; }
.cw-bn-blocks.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.cw-bn-blocks.pair .cw-bn-block + .cw-bn-block { margin-top: 0; }
.cw-bn-blocks.pair .cw-bn-hud { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; min-height: 0; }
.cw-bn-blocks.pair .cw-bn-task { grid-column: 1 / -1; grid-row: 2; min-height: 40px; }
.cw-bn-blocks.pair .cw-bn-era { font-size: 18px; line-height: 26px; }
@media (min-width: 1400px) { .desktop-frame .cw-bn-blocks.pair { width: calc(100% + 360px); margin-left: -180px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .desktop-frame .cw-bn-blocks.pair { width: calc(100% + 200px); margin-left: -100px; } }
.mobile-frame .cw-bn-blocks.pair, .cw-narrow .cw-bn-blocks.pair { grid-template-columns: 1fr; gap: 24px; }
.cw-lc[data-era="after"][data-tool="perf"] .lc-stats { box-shadow: inset 0 0 0 1px var(--teal); transition: box-shadow 0.3s ease; }
.cw-lc[data-layout="tools"] .lc-card .lc-pin { bottom: auto; top: 24px; }

/* ── round 5 ── */
/* scrim and stamp shadow are raw black on purpose: the stage is the light product UI in both themes, a token would flip in dark mode */
.lc-spot { position: absolute; z-index: 7; border-radius: 8px; box-shadow: 0 0 0 3px #fe2c55, 0 0 0 2400px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.cw-lc.is-guided .lc-spot { opacity: 1; }
.cw-bn-canvas { isolation: isolate; }
.cw-con-acts { margin-left: auto; align-items: center; }
.cw-con-acts .cw-btn { padding: 5px 14px; }   /* 32px, the height of the tab row beside it; outlined where the tabs are filled */

/* ── round 6 ── */
.mobile-frame .cw-fd { width: calc(100% + 20px); padding-right: 20px; }   /* the swipe strip bleeds to the frame's right edge, like .scroll-track */
.cw-bn-replay, .cw-con-replay { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; }
.cw-bn-replay svg, .cw-con-replay svg { width: 14px; height: 14px; flex: none; }
.lc-ring { position: absolute; z-index: 7; border-radius: 8px; box-shadow: 0 0 0 3px #fe2c55, 0 0 0 9px rgba(254,44,85,0.16); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lc-ring.on { opacity: 1; }
.lc-ring b { font-style: normal; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #fe2c55; color: #fff; display: none; place-items: center; font-size: 14px; line-height: 1; font-weight: 700; box-shadow: 0 0 0 3px #fff; }
.lc-ring.num b { display: grid; }
.lc-surf[hidden] { display: none; } .lc-surf { position: relative; }
.cw-lc.lc-air .lc-head { display: flex; }
.cw-lc.lc-air .lc-flash { display: none; }
.lc-fsbar { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border-radius: 4px; background: #fff; font-size: 12px; line-height: 18px; color: var(--t2); transition: background 0.3s ease; }
.lc-fsbar > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-fsbar b { color: #fe2c55; font-weight: 600; }
.lc-fsbar .lc-tag { font-style: normal; } .lc-fsbar .lc-fs-go { top: auto !important; width: 72px !important; height: 24px !important; }
.lc-fsbar.live { background: #ebf7f7; } .lc-fsbar.live .lc-fs-tag { background: rgba(254,44,85,0.12); color: #fe2c55; }
.lc-fsbar.live .lc-fs-go { background: rgba(0,153,149,0.14) !important; color: var(--teal) !important; pointer-events: none; }
.cw-lc.lc-air .lc-mode, .cw-lc.lc-air .lc-mode + .lc-vr { display: none; }   /* this stage is one layout; Switch mode would take it apart */

/* ── round 7 ── */
.lc-ring.bare { box-shadow: none; }
.cw-ly-reg { padding: 6px 9px; justify-content: center; } .cw-ly-reg b, .cw-ly-v { flex: none; } .cw-ly-reg em { font-size: 20px; }   /* nothing shrinks: the label was losing its top line in the short regions */
.cw-con-dist { margin: 14px auto 0; } .cw-con-dist output { grid-area: 1 / 2; } .cw-con-dist input { grid-row: 2; }

/* number roll shared by the Solo widgets */
.cw-roll { animation: cwRoll 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; display: inline-block; }
@keyframes cwRoll { from { opacity: 0; transform: translateY(0.4em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* ═══════════ NEW COMMERCE APP and MINI TTS SEA widgets: clips, ledger, driver, reasons, pipeline, copyfit, wpath, labframe, ba ═══════════ */
/* ───────── NEW CASE WIDGETS (preview) ─────────
   clips · rigs · console · ledger · driver · copyfit. Plus Jakarta only, tokens only. The product mocks inside
   the phones (driver, copyfit) are raw hex on purpose: they reproduce a light product UI in both themes. */


/* small switch, used by the driver */
.cw-sw { position: relative; display: inline-flex; cursor: pointer; }
.cw-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cw-sw i { width: 32px; height: 18px; border-radius: 999px; background: var(--border); transition: background 160ms cubic-bezier(0.65, 0, 0.35, 1); position: relative; }
.cw-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 160ms cubic-bezier(0.65, 0, 0.35, 1); }
.cw-sw input:checked + i { background: var(--text); }
.cw-sw input:checked + i::after { transform: translateX(14px); }
.cw-sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--accent-2); }

/* ── clips ── */
.cw-clips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin-top: 12px; padding: 24px; border-radius: 16px; background: var(--surface); }
.cw-clips.pc { grid-template-columns: 1fr; padding: 0; background: none; }
.cw-clip { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw-clip-frame { position: relative; overflow: hidden; background: #fff; /* recordings are light product UI */ }
.cw-clip.phone .cw-clip-frame { border-radius: 13.9% / 6.4%; background: #111; box-shadow: 0 0 0 5px #111, 0 12px 32px rgba(0,0,0,0.16); margin: 5px; aspect-ratio: 402 / 874; }
.cw-clip.pc .cw-clip-frame { border-radius: 12px; border: 1px solid var(--border); }
.cw-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-clip.pc video { height: auto; }
.cw-clip-play { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(20,20,19,0.72); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 160ms ease; }
.cw-clip-frame:hover .cw-clip-play, .cw-clip-play:focus-visible, .cw-clip:not(.is-playing) .cw-clip-play { opacity: 1; }
.cw-clip-play svg { width: 14px; height: 14px; fill: currentColor; }
.cw-clip-play .pa, .cw-clip.is-playing .cw-clip-play .pl { display: none; }
.cw-clip.is-playing .cw-clip-play .pa { display: block; }
.cw-clip figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 19px; color: var(--text-300); }
.cw-clip figcaption b { color: var(--text); font-weight: 600; }



/* ── ledger ── left: the shelf as the buyer reads it (a product mock: light in both themes, the colours of the
   prototype, raw hex on purpose). Right: the workings, on the page tokens */
.cw-led { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 20px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); align-items: start; }
.cw-led-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cw-led-cap { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-300); }
.cw-led-cap b { color: var(--text); font-weight: 600; }
.cw-led-shelf { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: #161823; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06); }
.cw-led-shelf-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.cw-led-shelf-h svg { width: 16px; height: 16px; flex: none; }
.cw-led-shelf-h b { font-size: 14px; font-weight: 600; }
.cw-led-shelf-h small { margin-left: auto; font-size: 12px; color: rgba(22,24,35,0.5); font-variant-numeric: tabular-nums; }
.cw-led-row { appearance: none; border: 0; background: transparent; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; position: relative; transition: background 160ms ease; }
.cw-led-row + .cw-led-row::before { content: ''; position: absolute; left: 70px; right: 14px; top: 0; height: 1px; background: rgba(22,24,35,0.08); }
.cw-led-row:hover { background: rgba(22,24,35,0.03); }
.cw-led-row.on { background: rgba(22,24,35,0.06); }
.cw-led-row:focus-visible { outline: 2px solid #161823; outline-offset: -2px; }
.cw-led-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #f1f1f2; }
.cw-led-thumb img, .cw-led-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-led-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cw-led-main b { font-size: 14px; line-height: 19px; font-weight: 600; }
.cw-led-left { font-size: 13px; line-height: 18px; color: rgba(22,24,35,0.55); }
.cw-led-verdict { font-size: 12px; line-height: 18px; font-weight: 500; color: rgba(22,24,35,0.55); white-space: nowrap; }
.cw-led-row[data-v="cheaper"] .cw-led-verdict { color: #e0245a; font-weight: 600; }
.cw-led-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }
.cw-led-price b { font-size: 14px; line-height: 20px; font-weight: 700; }
.cw-led-key { list-style: none; margin: 6px 0 0; padding: 12px 2px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.cw-led-key li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; line-height: 17px; color: var(--text-300); }
.cw-led-today { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 2px 2px 0; font-size: 13px; color: var(--text-300); }
.cw-led-today input { width: 100%; accent-color: var(--text); }
.cw-led-today output { color: var(--text); font-weight: 600; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

.cw-led-work { border-radius: 14px; background: var(--bg); padding: 18px; display: flex; flex-direction: column; --led-ac: var(--accent-2); }
.cw-led-work[data-state="soon"], .cw-led-work[data-state="out"] { --led-ac: var(--primary); }
.cw-led-head { display: flex; align-items: center; gap: 14px; }
.cw-led-hero { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface); }
.cw-led-head > div { display: flex; flex-direction: column; min-width: 0; }
.cw-led-name { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-led-big { display: flex; align-items: baseline; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
.cw-led-big em { font: 500 44px/44px 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--led-ac); transition: color 0.3s ease; }
.cw-led-bar { position: relative; height: 10px; margin-top: 34px; border-radius: 999px; background: color-mix(in srgb, var(--led-ac) 26%, var(--bg)); transition: background 0.3s ease; }
.cw-led-used { position: absolute; inset: 0; border-radius: 999px; background: var(--text-200); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-led-mark { position: absolute; top: -5px; bottom: -5px; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); transition: left 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-led-mark b { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-led-mark[data-side="l"] b { left: auto; right: -1px; transform: none; } .cw-led-mark[data-side="r"] b { left: -1px; transform: none; }
.cw-led-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-led-in { margin: 18px 0 0; display: flex; flex-direction: column; }
.cw-led-in > div { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.cw-led-in dt { font-size: 12px; line-height: 19px; font-weight: 600; color: var(--text-300); }
.cw-led-in dd { margin: 0; }
.cw-led-in .v { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-led-in .v output { min-width: 46px; text-align: center; }
.cw-led-in .why { grid-column: 2 / -1; font-size: 13px; line-height: 19px; color: var(--text-300); }
/* evidence grades: a mark and a colour each, so they can be told apart at a glance without the legend */
.cw-grade { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.02em; vertical-align: 1px; white-space: nowrap; }
.cw-grade svg { width: 11px; height: 11px; flex: none; }
.cw-grade.measured { background: var(--text); color: var(--bg); }
.cw-grade.researched { background: var(--accent-2-100); color: var(--accent-2); }
.cw-grade.inferred { background: var(--primary-100); color: var(--primary); }
.cw-grade.illustrative { background: var(--surface); color: var(--text-300); box-shadow: inset 0 0 0 1px var(--border); }
.cw-led-step { appearance: none; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; }
.cw-led-step:hover { border-color: var(--text-200); } .cw-led-step:active { transform: scale(0.94); }
.cw-led-eq { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 21px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-led-eq b { color: var(--text); font-weight: 600; } .cw-led-eq .op { margin: 0 2px; }
.cw-led-grade, .cw-led-pv { margin: 0; font-size: 13px; line-height: 21px; color: var(--text-300); }
.cw-led-grade { padding-top: 12px; border-top: 1px solid var(--border); }
.cw-led-pv { padding: 0 2px; }
.cw-led-grade b, .cw-led-pv b { color: var(--text); font-weight: 600; }

/* ── driver ── one stage: the deck panel and the phone are the same height, the nav sits on the panel floor */
.cw-drv { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); align-items: stretch; }
.cw-drv-deck { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; border-radius: 14px; background: var(--bg); }
.cw-drv-deck .cw-tabs { align-self: flex-start; }
.cw-drv-pane { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.cw-drv-pane[hidden] { display: none; }
.cw-drv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-drv-steps > li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; color: var(--text-300); transition: background 160ms ease, color 160ms ease; }
.cw-drv-steps > li:hover { background: var(--surface); }
.cw-drv-steps > li > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface); transition: background 160ms ease, color 160ms ease; }
.cw-drv-steps > li > div > p { margin: 0; font-size: 14px; line-height: 22px; }
.cw-drv-steps > li > div { min-width: 0; }
.cw-drv-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-drv-more > div { overflow: hidden; }
.cw-drv-more small { display: block; font-size: 13px; line-height: 19px; color: var(--text-300); }
.cw-drv-steps > li.on .cw-drv-more { grid-template-rows: 1fr; }
.cw-drv-arg { margin: 12px 0 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.cw-drv-arg > b { font-size: 14px; line-height: 21px; font-weight: 700; color: var(--text); }
.cw-drv-arg dl { margin: 0; display: flex; flex-direction: column; }
.cw-drv-arg dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.cw-drv-arg dt { font-size: 12px; line-height: 19px; font-weight: 600; color: var(--text-300); } .cw-drv-arg dd { margin: 0; font-size: 13px; line-height: 19px; color: var(--text); }
.cw-drv-arg { color: var(--text); }
.cw-drv-claims { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.cw-drv-claims li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--text-300); } .cw-drv-claims .cw-grade { flex: none; margin-top: 1px; }
.cw-drv-steps > li.on { color: var(--text); background: var(--surface); }
.cw-drv-steps > li.on > div > p { font-weight: 600; }
.cw-drv-steps > li.on > span { background: var(--text); color: var(--bg); }
.cw-drv-steps > li.done > span { background: var(--accent-2-100); color: var(--accent-2); }
.cw-drv-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--primary-100); color: var(--text); font-size: 13px; line-height: 20px; animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-drv-log { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.cw-drv-log div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.cw-drv-log dt { font-size: 12px; line-height: 18px; color: var(--text-300); }
.cw-drv-log dd { margin: 0; font: 500 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-drv-log dd.good { color: var(--accent-2); } .cw-drv-log dd.bad { color: var(--primary); }
.cw-drv-nav { display: flex; align-items: center; gap: 8px; }
.cw-drv-nav small { margin-left: auto; font-size: 12px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-drv-cards { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cw-drv-cards li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); transition: color 160ms ease; }
.cw-drv-cards li:last-child { border-bottom: 0; }
.cw-drv-cards li.off { color: var(--text-200); }
.cw-drv-letter { font: 500 16px/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text-300); }
.cw-drv-link { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-300); }
.cw-drv-link code { font: 500 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--surface); padding: 8px 10px; border-radius: 8px; word-break: break-all; }
.cw-drv-phone { position: sticky; top: 96px; align-self: start; width: 100%; border-radius: 34px; box-shadow: 0 0 0 5px #111, 0 12px 32px rgba(0,0,0,0.16); overflow: clip; /* clip, not hidden: a scrollIntoView on the sheet must never scroll the phone itself */ background: #f5f5f5; /* product mock, light in both themes */ color: #161823; aspect-ratio: 330 / 680; }
.cw-drv-screen { position: absolute; inset: 0; overflow: auto; padding: 16px 10px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.cw-app-bar { display: flex; align-items: center; gap: 8px; }
.cw-app-bar svg { width: 18px; height: 18px; flex: none; }
.cw-app-bar span { flex: 1; padding: 7px 12px; border-radius: 8px; background: rgba(22,24,35,0.06); font-size: 12px; line-height: 16px; color: rgba(22,24,35,0.45); }
.cw-app-tabs { display: flex; gap: 14px; padding: 2px 4px 4px; font-size: 12px; line-height: 18px; font-weight: 600; color: rgba(22,24,35,0.5); }
.cw-app-tabs b { color: #161823; box-shadow: inset 0 -2px #161823; padding-bottom: 3px; }
.cw-app-disc { appearance: none; border: 0; border-radius: 12px; background: #fff; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; font-family: inherit; color: inherit; cursor: pointer; text-align: left; }
.cw-app-disc b { font-size: 13px; } .cw-app-disc small { font-size: 11px; color: rgba(22,24,35,0.5); }
.cw-app-shelf { background: #fff; border-radius: 12px; padding: 2px 12px; animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-app-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 0.5px solid rgba(22,24,35,0.12); }
.cw-app-row:last-child { border-bottom: 0; }
.cw-app-pic { width: 32px; height: 32px; flex: none; border-radius: 6px; background: #f1f1f2 center / cover no-repeat; }
.cw-app-row span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cw-app-row b { font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-app-row small, .cw-app-order small { font-size: 11px; line-height: 15px; color: rgba(22,24,35,0.5); }
.cw-app-cta { appearance: none; border: 0; border-radius: 999px; background: #f1f1f2; color: #161823; font: 600 11px/16px 'Plus Jakarta Sans', sans-serif; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.cw-app-order { background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cw-app-order > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw-app-order > div + div { justify-content: flex-start; }
.cw-app-order b { font-size: 12px; font-weight: 600; } .cw-app-order em { font-size: 11px; font-style: normal; font-weight: 600; }
.cw-app-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; max-height: 92%; background: #fff; border-radius: 18px 18px 0 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -8px 30px rgba(0,0,0,0.16); animation: cwSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-app-sheet[hidden], .cw-app-shelf[hidden] { display: none; }
@keyframes cwSheetUp { from { transform: translateY(100%); } to { transform: none; } }
.cw-app-sheet > b { font-size: 14px; } .cw-app-sheet > small { font-size: 11px; line-height: 16px; color: rgba(22,24,35,0.6); }
.cw-app-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.cw-app-total em { font: 700 18px/1 'Plus Jakarta Sans', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.cw-app-find, .cw-app-pay { appearance: none; border: 0; border-radius: 999px; font: 600 12px/18px 'Plus Jakarta Sans', sans-serif; padding: 8px 12px; cursor: pointer; }
.cw-app-find { background: #f1f1f2; color: #161823; } .cw-app-find:disabled { color: #197a43; background: #eaf8ef; cursor: default; }
.cw-app-pay { background: #fe2c55; color: #fff; }
.cw-drv-tap { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(57,48,225,0.28); border: 1.5px solid rgba(57,48,225,0.7); opacity: 0; pointer-events: none; z-index: 4; }
.cw-drv-tap.go { animation: cwTap 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes cwTap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.3); } }

/* ── reasons ── the Why track in miniature. The shelf reuses the ledger's product mock (light in both themes) */
.cw-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); align-items: start; }
.cw-why-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cw-why-shelf { padding-bottom: 6px; }
.cw-why-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 14px; }
.cw-why-row + .cw-why-row::before { content: ''; position: absolute; left: 70px; right: 14px; top: 0; height: 1px; background: rgba(22,24,35,0.08); }
.cw-why-row .cw-led-thumb { grid-row: span 2; }
.cw-why-row .cw-led-verdict.cheaper { color: #e0245a; font-weight: 600; }
.cw-why-cta { grid-column: 2 / -1; justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: #f1f1f2; font-size: 12px; line-height: 18px; font-weight: 600; color: #161823; }
/* an annotated region: a dashed outline in the prototype's own assistant colour, solid while its card is open */
.cw-why-r { position: relative; display: inline-block; align-self: flex-start; margin: 4px 0 2px; border-radius: 6px; outline: 1.5px dashed rgba(224, 57, 155, 0.55); outline-offset: 2px; cursor: help; transition: outline-color 160ms ease, background 160ms ease; }
.cw-why-r:hover, .cw-why-r:focus-visible, .cw-why-r.on { outline: 1.5px solid #e0399b; background: rgba(224, 57, 155, 0.08); }
.cw-why-r.cw-why-cta { border-radius: 999px; } .cw-why-r.cw-why-cta.on, .cw-why-r.cw-why-cta:hover { background: #fbe3f1; }
.cw-why-r.pin::after { content: ''; position: absolute; top: -7px; right: -7px; width: 8px; height: 8px; border-radius: 50%; background: #e0399b; }
.cw-why-hint { margin: 0; padding: 0 2px; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-why-card { border-radius: 14px; background: var(--bg); min-height: 330px; }
.cw-why-in { padding: 18px; display: flex; flex-direction: column; gap: 12px; animation: fadeUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-why-in > p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-why-t { font-size: 16px; line-height: 23px; font-weight: 700; color: var(--text); }
.cw-why-in > p.cw-why-p { padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 20px; color: var(--text); }
.cw-why-claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cw-why-claims li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-why-dl { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cw-why-dl dt { font-size: 12px; line-height: 17px; font-weight: 600; color: var(--text); }
.cw-why-dl dd { margin: 1px 0 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-why-pin { font-size: 12px; line-height: 17px; color: var(--text-300); }
.mobile-frame .cw-why, .cw-narrow .cw-why { grid-template-columns: 1fr; padding: 14px; }
.mobile-frame .cw-why-card, .cw-narrow .cw-why-card { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .cw-why-in { animation: none; } }

/* ── driver phone, second pass: the picks are hers, the price has a history, the vouchers are searched in front of her.
   A product mock, light in both themes: raw hex on purpose, the colours of the prototype ── */
.cw-app-row em, .cw-app-opt em { font-style: normal; font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; align-self: flex-start; }
.cw-app-row small.v { color: #161823; } .cw-app-row small.v.good { color: #e0245a; }
.cw-app-tick, .cw-app-opt i { appearance: none; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(22,24,35,0.28); background: #fff; color: transparent; display: grid; place-items: center; cursor: pointer; transition: background 160ms cubic-bezier(0.65, 0, 0.35, 1), border-color 160ms cubic-bezier(0.65, 0, 0.35, 1); }
.cw-app-tick svg, .cw-app-opt i svg, .cw-app-places svg { width: 12px; height: 12px; }
.cw-app-tick[aria-pressed="true"], .cw-app-opt[aria-pressed="true"] i { background: #fe2c55; border-color: #fe2c55; color: #fff; }
.cw-app-opt i { border-radius: 5px; }
.cw-app-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 8px; border-top: 0.5px solid rgba(22,24,35,0.12); }
.cw-app-foot span { display: flex; flex-direction: column; min-width: 0; }
.cw-app-foot b { font-size: 11px; line-height: 15px; font-weight: 600; } .cw-app-foot small { font-size: 10px; line-height: 14px; color: rgba(22,24,35,0.5); }
.cw-app-buy { appearance: none; border: 0; border-radius: 999px; background: #fe2c55; color: #fff; font: 700 11px/16px 'Plus Jakarta Sans', sans-serif; padding: 6px 12px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cw-app-buy:disabled { background: #f1f1f2; color: rgba(22,24,35,0.4); }
.cw-app-acts { justify-content: flex-end !important; } .cw-app-cta.pri { background: #fe2c55; color: #fff; }
.cw-app-store { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .cw-app-store i { font: 700 8px/12px 'Plus Jakarta Sans', sans-serif; font-style: normal; letter-spacing: 0.04em; padding: 0 4px; border-radius: 3px; background: #fe2c55; color: #fff; }
.cw-app-note { flex-direction: column; align-items: stretch !important; gap: 1px !important; padding: 7px 10px; border-radius: 8px; background: #f5f5f6; font-size: 11px; line-height: 15px; } .cw-app-note span { font-weight: 600; color: #161823; } .cw-app-note small { color: rgba(22,24,35,0.5); }
.cw-app-it { gap: 8px !important; } .cw-app-it > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cw-app-it b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cw-app-it em { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; align-self: flex-start; }
.cw-drv-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cw-drv-filter { appearance: none; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-family: inherit; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.cw-drv-filter b { font-size: 13px; line-height: 18px; font-weight: 600; } .cw-drv-filter small { font-size: 11px; line-height: 15px; color: var(--text-300); }
.cw-drv-filter.on { background: var(--text); color: var(--bg); border-color: var(--text); } .cw-drv-filter.on small { color: var(--bg); opacity: 0.7; }
.cw-drv-filter:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cw-drv-cards input:disabled + i { opacity: 0.45; }
.cw-app-sheet { overflow: auto; scrollbar-width: none; } /* flex: none, or the column squeezes a scrolling child down to a sliver */
.cw-app-hist, .cw-app-opt, .cw-app-vouch, .cw-app-total, .cw-app-pay { flex: none; }
.cw-app-hist, .cw-app-opt { appearance: none; border: 0; border-radius: 10px; background: #f5f5f6; padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-family: inherit; color: inherit; text-align: left; cursor: pointer; }
.cw-app-hist span, .cw-app-opt span, .cw-app-vt, .cw-app-found span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cw-app-hist b { font-size: 11px; line-height: 15px; color: #e0245a; } .cw-app-opt b, .cw-app-vt b, .cw-app-found b { font-size: 11px; line-height: 15px; }
.cw-app-hist small, .cw-app-opt small, .cw-app-vt small, .cw-app-found small { font-size: 10px; line-height: 14px; color: rgba(22,24,35,0.55); }
.cw-app-spark { flex: none; height: 18px; display: flex; align-items: flex-end; gap: 2px; } .cw-app-spark u { width: 5px; border-radius: 1px; background: rgba(22,24,35,0.22); text-decoration: none; } .cw-app-spark u.now { background: #e0245a; }
.cw-app-chart { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 84px; padding: 4px 4px 0; animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-app-chart[hidden], .cw-app-places[hidden], .cw-app-found[hidden], .cw-app-find[hidden] { display: none; }
.cw-app-chart span { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 1px; }
.cw-app-chart u { align-self: end; width: 100%; border-radius: 3px 3px 0 0; background: rgba(22,24,35,0.16); text-decoration: none; transform-origin: bottom; animation: cwBarUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-app-chart .now u { background: #e0245a; }
.cw-app-chart small { font-size: 10px; line-height: 13px; color: rgba(22,24,35,0.5); } .cw-app-chart b { font-size: 10px; line-height: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes cwBarUp { from { transform: scaleY(0.1); } to { transform: none; } }
.cw-app-vouch { border-radius: 10px; background: #f5f5f6; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.cw-app-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cw-app-places li { display: flex; align-items: center; gap: 6px; font-size: 10px; line-height: 14px; color: rgba(22,24,35,0.45); transition: color 200ms ease; }
.cw-app-places li svg { flex: none; color: transparent; border-radius: 50%; transition: color 200ms ease; }
.cw-app-places li:not(.ok) svg { border: 1.5px solid rgba(22,24,35,0.2); border-top-color: #161823; animation: cwSpin 0.7s linear infinite; }
.cw-app-places li.ok { color: #161823; } .cw-app-places li.ok svg { color: #0a8f7a; }
@keyframes cwSpin { to { transform: rotate(360deg); } }
.cw-app-found { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 0.5px solid rgba(22,24,35,0.12); animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-app-claim { appearance: none; flex: none; border: 0; border-radius: 999px; background: #fff; color: #161823; font: 600 11px/16px 'Plus Jakarta Sans', sans-serif; padding: 5px 12px; cursor: pointer; }
.cw-app-claim:disabled { color: #197a43; background: #eaf8ef; cursor: default; }
.cw-app-placed { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 4px; text-align: center; animation: fadeUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-app-placed i { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: #eaf8ef; color: #197a43; display: grid; place-items: center; } .cw-app-placed i svg { width: 18px; height: 18px; }
.cw-app-placed b { font-size: 14px; } .cw-app-placed small { font-size: 11px; line-height: 16px; color: rgba(22,24,35,0.6); } .cw-app-placed .cw-app-total { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 0.5px solid rgba(22,24,35,0.12); }

/* ── pipeline ── who holds the work at each step. Lanes are people, columns are steps, the line is the work moving ── */
.cw-pl { margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); }
.cw-pl svg { display: block; width: 100%; height: auto; overflow: visible; }
.cw-pl-lane { fill: var(--bg); } .cw-pl-lane.alt { fill: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.cw-pl-who { font: 600 12px 'Plus Jakarta Sans', sans-serif; fill: var(--text); } .cw-pl-whos { font: 500 10.5px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); }
.cw-pl-path { fill: none; stroke: var(--text-200); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cw-pl-back { fill: none; stroke: var(--case-ac, var(--primary)); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0; }
.cw-pl.in .cw-pl-path { animation: cwRigDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; } .cw-pl.in .cw-pl-back { animation: cwFade 0.5s ease 1.7s forwards; }
.cw-pl-backt { font: 600 10.5px 'Plus Jakarta Sans', sans-serif; fill: var(--case-ac, var(--primary)); opacity: 0; } .cw-pl.in .cw-pl-backt { animation: cwFade 0.5s ease 1.8s forwards; }
.cw-pl-node { cursor: pointer; outline: none; }
.cw-pl-node circle { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; transition: fill 160ms ease, r 160ms ease; }
.cw-pl-node text { font: 700 11px 'Plus Jakarta Sans', sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: central; transition: fill 160ms ease; pointer-events: none; }
.cw-pl-node.on circle, .cw-pl-node:hover circle, .cw-pl-node:focus-visible circle { fill: var(--text); } .cw-pl-node.on text, .cw-pl-node:hover text, .cw-pl-node:focus-visible text { fill: var(--bg); }
.cw-pl-step { font: 500 10.5px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); text-anchor: middle; }
.cw-pl-detail { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; min-height: 86px; }
.cw-pl-detail b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); } .cw-pl-detail p { grid-column: 1; margin: 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-pl-out { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 2px; max-width: 200px; font-size: 12px; line-height: 17px; color: var(--text-300); } .cw-pl-out span { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--text); }
.cw-pl-list { display: none; list-style: none; margin: 0; padding: 0; }
.mobile-frame .cw-pl svg, .cw-narrow .cw-pl svg, .mobile-frame .cw-pl-detail, .cw-narrow .cw-pl-detail { display: none; }
.mobile-frame .cw-pl, .cw-narrow .cw-pl { padding: 14px; } .mobile-frame .cw-pl-list, .cw-narrow .cw-pl-list { display: flex; flex-direction: column; }
.cw-pl-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text-300); } .cw-pl-list li:first-child { border-top: 0; }
.cw-pl-list li i { grid-row: span 3; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 11px/22px 'Plus Jakarta Sans', sans-serif; font-style: normal; text-align: center; }
.cw-pl-list li em { font-style: normal; font-size: 12px; color: var(--case-ac, var(--primary)); font-weight: 600; } .cw-pl-list li b { color: var(--text); font-weight: 600; font-size: 14px; }

/* this case's dark boards let their title run the full width (the shared 660px cap is the deck slide's proportion) */
.cw[data-key^="nca"] .cw-bd-title { max-width: none; }
.cw[data-key^="nca"] :is(.cw-bd-num span:not(.cw-bd-n), .cw-bd-checks span, .cw-bd-mut, .cw-bd-card span) { color: rgba(255,255,255,0.82); }
.cw[data-key^="nca"] .cw-bd-num .cw-bd-n { color: var(--bd-ac); }
@media (prefers-reduced-motion: reduce) { .cw-pl-path { stroke-dashoffset: 0; animation: none !important; } .cw-pl-back, .cw-pl-backt { opacity: 1; animation: none !important; } .cw-app-chart, .cw-app-chart u, .cw-app-found { animation: none; } .cw-app-places li:not(.ok) svg { animation: none; } }

/* ── copyfit ── */
.cw-cf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cw-cf { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 28px; margin-top: 12px; padding: 24px 16px; border-radius: 16px; background: var(--surface); min-height: 470px; align-items: center; }
.cw-cf-lane { position: relative; align-self: stretch; }
.cw-cf-phone { position: relative; border-radius: 30px; box-shadow: 0 0 0 5px #111, 0 12px 32px rgba(0,0,0,0.16); background: #f5f5f5; /* product mock, light in both themes */ color: #161823; overflow: hidden; }
.cw-cf-page { padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 18px; }
.cw-cf-page [data-slot] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='11' fill='%23141413' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M13 8v10M8 13h10' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 13 13, crosshair; /* the system crosshair is a thin white plus on Windows and vanished on the white cards (owner); ink disc + white ring reads on any colour */ }
.cf-card { background: #fff; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cf-title { font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cf-price { font-size: 18px; font-weight: 700; color: #e10543; }
.cf-row { display: flex; align-items: center; gap: 8px; }
.cf-store { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cf-follow { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #f1f1f2; }
.cf-chips, .cf-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.cf-chip { flex: none; font-size: 11px; line-height: 16px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: #eaf8ef; color: #197a43; }
.cf-tab { flex: none; font-size: 12px; font-weight: 600; color: rgba(22,24,35,0.6); padding: 4px 0; margin-right: 8px; }
.cf-tab.on { color: #161823; box-shadow: inset 0 -2px #161823; }
.cf-banner { background: linear-gradient(90deg, #fff0f2, #fff); }
.cf-banner-h { font-weight: 700; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cf-cell { background: #fff; border-radius: 8px; padding: 8px 3px; text-align: center; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cf-cta-row { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }
.cf-btn { display: block; text-align: center; font-weight: 600; font-size: 14px; line-height: 20px; padding: 10px 12px; border-radius: 999px; background: #f1f1f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-btn.pri { background: #fe2c55; color: #fff; }
.cw-cf-over { position: absolute; inset: 0; pointer-events: none; }
.cw-cf-box { position: absolute; border: 1.5px solid var(--c); border-radius: 5px; opacity: 0; }
.cw-cf-over.in .cw-cf-box { animation: cwFade 0.3s ease calc(var(--i) * 28ms) forwards; }
.cw-cf-box span { position: absolute; right: -1px; top: -9px; font: 700 9px/13px 'Plus Jakarta Sans', sans-serif; padding: 0 4px; border-radius: 4px; background: var(--c); color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cw-cf-box.pass, .cw-cf-ret.pass, .cw-cf-card.pass, .cw-cf-lines .pass { --c: #8b8e97; }
.cw-cf-box.warn, .cw-cf-ret.warn, .cw-cf-card.warn, .cw-cf-lines .warn { --c: #e07b00; }
.cw-cf-box.fail, .cw-cf-ret.fail, .cw-cf-card.fail, .cw-cf-lines .fail { --c: #e10543; }
.cw-cf-ret { position: absolute; border: 1.5px solid var(--c); border-radius: 5px; pointer-events: none; /* untweened on purpose: it retargets several times a second */ }
.cw-cf-ret[hidden] { display: none; }
.cw-cf-ret span { position: absolute; left: -1px; bottom: calc(100% + 3px); font: 700 10px/15px 'Plus Jakarta Sans', sans-serif; padding: 0 5px; border-radius: 4px; background: var(--c); color: #fff; white-space: nowrap; }
.cw-cf-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cw-cf-lines path { fill: none; stroke: var(--c); stroke-width: 1.4; }
.cw-cf-lines path.fresh { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cwRigDraw 180ms cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.cw-cf-card { position: absolute; left: 0; right: 0; max-width: 190px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.08); font-size: 12px; line-height: 17px; color: var(--text-300); animation: cwCardIn 180ms cubic-bezier(0.32, 0.72, 0, 1) 110ms both; transition: top 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.cw-cf-lane.l .cw-cf-card { margin-left: auto; }
@keyframes cwCardIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
.cw-cf-tag { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--c); color: #fff; }
.cw-cf-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; background: none; color: var(--text-300); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 50%; }
.cw-cf-x:hover { background: var(--surface); color: var(--text); }
.cw-cf-n { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.cw-cf-n b { font: 500 26px/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-cf-card p { margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-cf-card p.dim { white-space: normal; margin: 6px 0 0; }
.cw-cf-meta { display: flex; gap: 4px; } .cw-cf-meta i { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--text); }
.cw-cf-card dl { margin: 8px 0; display: flex; flex-direction: column; gap: 1px; }
.cw-cf-card dl div { display: flex; justify-content: space-between; } .cw-cf-card dt { font-size: 11px; } .cw-cf-card dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-cf-copy { appearance: none; width: 100%; border: 0; border-radius: 8px; background: var(--text); color: var(--bg); font: 600 12px/18px 'Plus Jakarta Sans', sans-serif; padding: 6px; cursor: pointer; }
.cw-cf-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; color: var(--text-300); }
.cw-cf-tool b { color: var(--text); font-weight: 700; }
.cw-cf-sum { display: flex; flex-wrap: wrap; gap: 4px 12px; } .cw-cf-sum i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.cw-cf-sum .fail { color: #e10543; } .cw-cf-sum .warn { color: #e07b00; } .cw-cf-sum .pass { color: var(--text); } .cw-cf-sum .mk { color: var(--text-300); font-weight: 500; }
.cw-cf-gap { flex: 1; }
.cw-cf-btn { appearance: none; border: 0; border-radius: 999px; background: var(--surface); color: var(--text); font: 600 12px/18px 'Plus Jakarta Sans', sans-serif; padding: 5px 12px; cursor: pointer; transition: background 160ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1); }
.cw-cf-btn.on { background: var(--accent-2); color: #fff; }
[data-theme="dark"] .cw-cf-btn.on { color: #14130f; }
.cw-cf-btn.x { background: none; color: var(--text-300); }

/* ── narrow: the mobile frame and small desktop windows ── */
.mobile-frame .cw-clips, .cw-narrow .cw-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 12px; }
.mobile-frame .cw-clips.pc, .cw-narrow .cw-clips.pc { grid-template-columns: 1fr; padding: 0; }
.mobile-frame .cw-rig, .cw-narrow .cw-rig, .mobile-frame .cw-led, .cw-narrow .cw-led { grid-template-columns: 1fr; }
.mobile-frame .cw-drv, .cw-narrow .cw-drv { grid-template-columns: 1fr; } .mobile-frame .cw-drv-phone, .cw-narrow .cw-drv-phone { position: relative; top: 0; width: 280px; justify-self: center; order: -1; }
.mobile-frame .cw-cf, .cw-narrow .cw-cf { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
.mobile-frame .cw-cf-phone, .cw-narrow .cw-cf-phone { width: 100%; max-width: 300px; justify-self: center; order: -1; }
.mobile-frame .cw-cf-lines, .cw-narrow .cw-cf-lines { display: none; }
.mobile-frame .cw-cf-card, .cw-narrow .cw-cf-card { position: relative; max-width: none; margin: 0 0 8px; }
.mobile-frame .cw-cf-tool, .cw-narrow .cw-cf-tool { border-radius: 16px; padding: 10px 12px; }

@media (prefers-reduced-motion: reduce) {
}

/* tab rows never widen the phone layout: they scroll sideways inside their own row */
.mobile-frame .cw-led, .cw-narrow .cw-led { padding: 14px; gap: 18px; }
.mobile-frame .cw-led-work, .cw-narrow .cw-led-work { padding: 14px; }
.mobile-frame .cw-led-in > div, .cw-narrow .cw-led-in > div { grid-template-columns: 88px minmax(0, 1fr) auto; }

@media (prefers-reduced-motion: reduce) { .cw-su-s { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; } .cw-su-tag, .cw-su-name, .cw-su-dim { opacity: 1; animation: none !important; } }

@media (prefers-reduced-motion: reduce) { .cw-fd-pin { opacity: 1; transform: none; transition: none; } .cw-fd-gaze { display: none; } }

/* ═══ wpath: a designer's path, five steps on a rail and one stage. Page tokens only; the active step takes the case accent ═══ */
.cw-wp { margin-top: 12px; --wp-ac: var(--case-ac, var(--text)); }
.cw-wp-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cw-wp-steps button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 0 0 10px; cursor: pointer; position: relative; font: 600 13px/18px 'Plus Jakarta Sans', sans-serif; color: var(--text-300); transition: color 0.2s ease; }
.cw-wp-steps button i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--surface); color: var(--text-300); transition: background 0.2s ease, color 0.2s ease; }
.cw-wp-steps button b { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--border); overflow: hidden; }
.cw-wp-steps button b::after { content: ''; position: absolute; inset: 0; background: var(--wp-ac); transform: scaleX(0); transform-origin: left; }
.cw-wp-steps button.done b::after { transform: scaleX(1); }
.cw-wp-steps button[aria-selected="true"] { color: var(--text); }
.cw-wp-steps button[aria-selected="true"] i { background: var(--text); color: var(--bg); }
.cw-wp-steps button[aria-selected="true"] b::after { transform: scaleX(1); }
.cw-wp.auto.seen .cw-wp-steps button[aria-selected="true"] b::after { animation: cwWpFill var(--dwell, 4200ms) linear both; }
@keyframes cwWpFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cw-wp-steps button:hover { color: var(--text); }
.cw-wp-steps button:focus-visible { outline: 2px solid var(--wp-ac); outline-offset: 4px; border-radius: 4px; }
.cw-wp-pane { margin: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: center; animation: cwWpIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-wp-pane[hidden] { display: none; }
@keyframes cwWpIn { from { opacity: 0; transform: translateY(6px); } }
.cw-wp-vis { aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: #fff; /* screenshots are light product UI */ }
.cw-wp-vis img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-wp-vis.plain { background: var(--surface); display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.cw-wp-pane figcaption { display: flex; flex-direction: column; gap: 8px; }
.cw-wp-pane figcaption b { font: 600 20px/26px 'Plus Jakarta Sans', sans-serif; color: var(--text); letter-spacing: -0.01em; }
.cw-wp-pane figcaption span { font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-wp-chat { width: min(100%, 420px); display: flex; flex-direction: column; gap: 10px; font: 500 14px/21px 'Plus Jakarta Sans', sans-serif; }
.cw-wp-chat p { margin: 0; padding: 12px 14px; border-radius: 14px; }
.cw-wp-chat .cw-wp-me { align-self: flex-end; background: var(--text); color: var(--bg); border-bottom-right-radius: 4px; }
.cw-wp-chat .cw-wp-ai { align-self: flex-start; background: var(--bg); color: var(--text-300); border: 1px solid var(--border); border-bottom-left-radius: 4px; display: flex; gap: 8px; align-items: baseline; }
.cw-wp-ai i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wp-ac); transform: translateY(-1px); }
.cw-wp-merge { width: min(100%, 380px); overflow: visible; }
.cw-wp-merge path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.cw-wp-merge path.m, .cw-wp-merge circle.m { stroke: var(--text-300); }
.cw-wp-merge circle.m { fill: var(--text-300); stroke: none; }
.cw-wp-merge path.b { stroke: var(--wp-ac); stroke-dasharray: 260; stroke-dashoffset: 0; animation: cwWpDraw 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cw-wp-merge circle.b { fill: var(--wp-ac); }
@keyframes cwWpDraw { from { stroke-dashoffset: 260; } }
.cw-wp-merge .k { fill: var(--text); }
.cw-wp-merge text { font: 600 11px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); }
.cw-wp-facts { list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cw-wp-facts li { display: flex; flex-direction: column; gap: 3px; }
.cw-wp-facts b { font: 600 13px/18px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-wp-facts span { font-size: 13px; line-height: 19px; color: var(--text-300); }
.mobile-frame .cw-wp-steps, .cw-narrow .cw-wp-steps { gap: 6px; }
.mobile-frame .cw-wp-steps button, .cw-narrow .cw-wp-steps button { grid-template-columns: auto; }
.mobile-frame .cw-wp-steps button span, .cw-narrow .cw-wp-steps button span { display: none; }
.mobile-frame .cw-wp-pane, .cw-narrow .cw-wp-pane { grid-template-columns: 1fr; gap: 12px; }
.mobile-frame .cw-wp-pane figcaption b, .cw-narrow .cw-wp-pane figcaption b { font-size: 16px; line-height: 22px; }
.mobile-frame .cw-wp-facts, .cw-narrow .cw-wp-facts { grid-template-columns: 1fr 1fr; gap: 14px 12px; }

/* ═══ labframe: the embedded lab. Light in both themes on purpose (it is the lab's own page), like the millab widget ═══ */
.cw-labf { margin-top: 12px; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; background: #f3f3f3; /* the lab's own page colour, so nothing flashes while it loads */ }
.cw-labf iframe { display: block; width: 100%; height: 720px; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .cw-wp-pane, .cw-wp-merge path.b, .cw-wp.auto.seen .cw-wp-steps button[aria-selected="true"] b::after { animation: none; }
}

/* ═══ ba: before / after as two whole screens, left and right on a desktop, stacked in the mobile frame. Page tokens; the screenshots bring their own colours ═══ */
.cw-ba { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.mobile-frame .cw-ba, .cw-narrow .cw-ba { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cw-ba-item { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cw-ba-item figcaption { display: flex; flex-direction: column; gap: 4px; }
.cw-ba-shot { position: relative; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.cw-ba-shot img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.cw-ba-tag { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 1; padding: 4px 12px; border-radius: 999px; font: 600 13px/18px 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text-300); border: 1px solid var(--border); white-space: nowrap; }
.cw-ba-tag.now { background: var(--text); color: var(--bg); border-color: var(--text); }
.cw-ba-item figcaption b { font: 600 16px/22px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-ba-item figcaption span { font-size: 14px; line-height: 22px; color: var(--text-300); }
.mobile-frame .cw-ba-tag, .cw-narrow .cw-ba-tag { top: 8px; padding: 2px 10px; }

/* hand-counted limits: the Figma sheet is the whole point of the board, so in the mobile frame it fills the width instead of the 62% every stacked twocol shot gets */
:is(.mobile-frame, .cw-narrow) .cw[data-key="mttsManual"] .cw-bd-two:not(.keep) .cw-bd-shot-img { max-width: 100% !important; }

/* the lab needs about 1040px for A, B, C to share one row, and before | after needs two readable screens, so on a desktop both run wider than the case body, like the millab widget */
@media (min-width: 1400px) { .desktop-frame .cw[data-widget="labframe"], .desktop-frame .cw[data-widget="ba"] { width: calc(100% + 360px); margin-left: -180px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .desktop-frame .cw[data-widget="labframe"], .desktop-frame .cw[data-widget="ba"] { width: calc(100% + 200px); margin-left: -100px; } }


/* ── round 8 ── */
.cw-ly-reg.slim:first-child, .cw-con-reg[data-k="head"] { justify-content: center; }
.cw[data-off="1"] *, .cw[data-off="1"] *::before, .cw[data-off="1"] *::after { animation-play-state: paused !important; }   /* off-screen widgets stop pulsing and flowing; the one in view keeps the frame */

/* ── round 9: a region lands under the cursor that placed it, so it arrives with a little overshoot ── */
@keyframes cwConPop { 0% { opacity: 0; transform: translateY(7px) scale(0.985); } 68% { opacity: 1; transform: translateY(-1.5px) scale(1); } 100% { opacity: 1; transform: none; } }
.cw-con-reg.pop { animation: cwConPop 0.44s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── the baht sign ──
   Neither Plus Jakarta Sans nor Cabinet Grotesk carries U+0E3F, so every ฿ on the New Commerce App case fell
   through to whatever sans the visitor's machine offers: a different typeface, and about 60% wider than the
   digits beside it. This adds the one glyph to both families from a 1.8KB Noto Sans Thai subset. The
   unicode-range means nothing else is touched. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./assets/fonts/NotoSansThai-baht.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0E3F; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('./assets/fonts/NotoSansThai-baht.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0E3F; }

/* ── touch: two controls sat under the 28px the rest of the page keeps ── */
.mobile-frame .cw-drv .cw-tab, .cw-narrow .cw-drv .cw-tab { min-height: 34px; }
/* the shelf hotspots sit inside a product mock, so the box cannot grow; the hit area grows instead */
.mobile-frame .cw-why-r::before, .cw-narrow .cw-why-r::before { content: ''; position: absolute; inset: -6px -3px; border-radius: 9px; }

/* ── the two day scrubbers, one behaviour ──
   Both were bare native range inputs, so the thumb was whatever the platform drew and the grab area was a few
   pixels tall. The input itself becomes the touch row and the thumb is drawn, so a finger has something to
   catch. touch-action keeps a vertical swipe scrolling the page rather than fighting the slider. */
.cw-led-today input[type="range"], .cw-con-dist input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 24px; background: transparent; cursor: pointer; touch-action: pan-y;
}
.cw-led-today input[type="range"]::-webkit-slider-runnable-track,
.cw-con-dist input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--border); }
.cw-led-today input[type="range"]::-moz-range-track,
.cw-con-dist input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--border); }
.cw-led-today input[type="range"]::-webkit-slider-thumb,
.cw-con-dist input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px;
  border-radius: 50%; background: var(--text); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); transition: transform 140ms ease;
}
.cw-led-today input[type="range"]::-moz-range-thumb,
.cw-con-dist input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.cw-led-today input[type="range"]:active::-webkit-slider-thumb,
.cw-con-dist input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
.cw-led-today input[type="range"]:focus-visible::-webkit-slider-thumb,
.cw-con-dist input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 32%, transparent); }
/* a finger needs more than a mouse does */
:is(.mobile-frame, .cw-narrow) .cw-led-today input[type="range"],
:is(.mobile-frame, .cw-narrow) .cw-con-dist input[type="range"] { height: 34px; }
:is(.mobile-frame, .cw-narrow) .cw-led-today input[type="range"]::-webkit-slider-thumb,
:is(.mobile-frame, .cw-narrow) .cw-con-dist input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11px; }
:is(.mobile-frame, .cw-narrow) .cw-led-today input[type="range"]::-moz-range-thumb,
:is(.mobile-frame, .cw-narrow) .cw-con-dist input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) {
  .cw-led-today input[type="range"]::-webkit-slider-thumb, .cw-con-dist input[type="range"]::-webkit-slider-thumb { transition: none; }
}

/* ═══════════ nca widgets (migrated from the preview) ═══════════
   The New Commerce App case study's rules. They come last on purpose: several are deliberate overrides
   of the generic widget rules above. Solo LIVE and Mini TTS SEA keep their staged versions. ═══ */
/* ───────── NEW CASE WIDGETS (preview) ─────────
   clips · rigs · console · ledger · driver · copyfit. Plus Jakarta only, tokens only. The product mocks inside
   the phones (driver, copyfit) are raw hex on purpose: they reproduce a light product UI in both themes. */

.cw-roll { animation: cwRoll 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; display: inline-block; }

@keyframes cwRoll { from { opacity: 0; transform: translateY(0.4em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }


/* small switch, used by the driver */
.cw-sw { position: relative; display: inline-flex; cursor: pointer; }

.cw-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.cw-sw i { width: 32px; height: 18px; border-radius: 999px; background: var(--border); transition: background 160ms cubic-bezier(0.65, 0, 0.35, 1); position: relative; }

.cw-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 160ms cubic-bezier(0.65, 0, 0.35, 1); }

.cw-sw input:checked + i { background: var(--text); }

.cw-sw input:checked + i::after { transform: translateX(14px); }

.cw-sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--accent-2); }


/* ── clips ── */
.cw-clips { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; margin-top: 12px; padding: 24px; border-radius: 16px; background: var(--surface); }

.cw-clips.pc { grid-template-columns: 1fr; padding: 0; background: none; }

.cw-clip { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.cw-clip-frame { position: relative; overflow: hidden; background: #fff; /* recordings are light product UI */ }

.cw-clip.phone .cw-clip-frame { border-radius: 13.9% / 6.4%; background: #111; box-shadow: 0 0 0 5px #111, 0 12px 32px rgba(0,0,0,0.16); margin: 5px; aspect-ratio: 402 / 874; }

.cw-clip.pc .cw-clip-frame { border-radius: 12px; border: 1px solid var(--border); }

.cw-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }

.cw-clip.pc video { height: auto; }

.cw-clip-play { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(20,20,19,0.72); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 160ms ease; }

.cw-clip-frame:hover .cw-clip-play, .cw-clip-play:focus-visible, .cw-clip:not(.is-playing) .cw-clip-play { opacity: 1; }

.cw-clip-play svg { width: 14px; height: 14px; fill: currentColor; }

.cw-clip-play .pa, .cw-clip.is-playing .cw-clip-play .pl { display: none; }

.cw-clip.is-playing .cw-clip-play .pa { display: block; }

.cw-clip figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 19px; color: var(--text-300); }

.cw-clip figcaption b { color: var(--text); font-weight: 600; }


/* ── ledger ── left: the shelf as the buyer reads it (a product mock: light in both themes, the colours of the
   prototype, raw hex on purpose). Right: the workings, on the page tokens */
.cw-led { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 20px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); align-items: start; }

.cw-led-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.cw-led-cap { margin: 0; font-size: 14px; line-height: 21px; color: var(--text-300); }

.cw-led-cap b { color: var(--text); font-weight: 600; }

.cw-led-shelf { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: #161823; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06); }

.cw-led-shelf-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }

.cw-led-shelf-h svg { width: 16px; height: 16px; flex: none; }

.cw-led-shelf-h b { font-size: 14px; font-weight: 600; }

.cw-led-shelf-h small { margin-left: auto; font-size: 12px; color: rgba(22,24,35,0.5); font-variant-numeric: tabular-nums; }

.cw-led-row { appearance: none; border: 0; background: transparent; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 12px 14px; text-align: left; cursor: pointer; font-family: inherit; color: inherit; position: relative; transition: background 160ms ease; }

.cw-led-row + .cw-led-row::before { content: ''; position: absolute; left: 74px; right: 14px; top: 0; height: 1px; background: rgba(22,24,35,0.08); }

.cw-led-row:hover { background: rgba(22,24,35,0.03); }

.cw-led-row.on { background: rgba(22,24,35,0.06); }

.cw-led-row:focus-visible { outline: 2px solid #161823; outline-offset: -2px; }

.cw-led-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #f1f1f2; }

.cw-led-thumb img, .cw-led-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cw-led-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.cw-led-main b { font-size: 14px; line-height: 19px; font-weight: 600; }
 .cw-led-main > span { white-space: nowrap; }

.cw-led-left { font-size: 13px; line-height: 18px; color: rgba(22,24,35,0.55); }

.cw-led-verdict { font-size: 12px; line-height: 18px; font-weight: 500; color: rgba(22,24,35,0.55); white-space: nowrap; }

.cw-led-row[data-v="cheaper"] .cw-led-verdict { color: var(--cw-red); font-weight: 600; }

.cw-led-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-variant-numeric: tabular-nums; }

.cw-led-cta { align-self: flex-start; margin-top: 5px; padding: 4px 10px; border-radius: 999px; background: #f1f1f2; font-size: 12px; line-height: 16px; font-weight: 600; color: #161823; }

.cw-led-row[data-v="cheaper"] .cw-led-cta { background: var(--cw-red); color: #fff; }

.cw-led-row.off { opacity: 0.55; }
 .cw-led-row.off .cw-led-cta { display: none; }
 .cw-led-row.off.on { opacity: 0.8; }

.cw-led-rule { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; line-height: 21px; color: var(--text-300); }
 .cw-led-rule b { color: var(--text); font-weight: 600; }

/* where a claim came from: its own line under the claim, with a tag, so it reads as a citation and not as more sentence */
.cw-src { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11px; line-height: 16px; color: var(--text-300); }

.cw-src::before { content: 'Source'; display: inline-block; margin-right: 7px; padding: 0 5px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: 10px; line-height: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); vertical-align: 1px; }

/* vision: three pillars, one recipe */
.cw-led-dates { font-size: 13px; letter-spacing: 0.01em; }
 .cw-led-in .v small { font-size: 12px; font-weight: 500; color: var(--text-300); }

.cw-led-price b { font-size: 14px; line-height: 20px; font-weight: 700; }

.cw-led-key { list-style: none; margin: 6px 0 0; padding: 12px 2px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }

.cw-led-key li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; line-height: 17px; color: var(--text-300); }

.cw-led-today { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 2px 2px 0; font-size: 13px; color: var(--text-300); }

.cw-led-today input { width: 100%; accent-color: var(--text); }

.cw-led-today output { color: var(--text); font-weight: 600; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }


.cw-led-work { border-radius: 14px; background: var(--bg); padding: 18px; display: flex; flex-direction: column; --led-ac: var(--accent-2); }

.cw-led-work[data-state="soon"], .cw-led-work[data-state="out"] { --led-ac: var(--cw-red); }

.cw-led-head { display: flex; align-items: center; gap: 14px; }

.cw-led-hero { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: var(--surface); }

.cw-led-head > div { display: flex; flex-direction: column; min-width: 0; }

.cw-led-name { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cw-led-big { display: flex; align-items: baseline; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }

.cw-led-big em { font: 500 44px/44px 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; color: var(--led-ac); transition: color 0.3s ease; }

.cw-led-bar { position: relative; height: 10px; margin-top: 34px; border-radius: 999px; background: color-mix(in srgb, var(--led-ac) 26%, var(--bg)); transition: background 0.3s ease; }

.cw-led-used { position: absolute; inset: 0; border-radius: 999px; background: var(--text-200); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1); }

.cw-led-mark { position: absolute; top: -5px; bottom: -5px; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text); transition: left 0.42s cubic-bezier(0.16, 1, 0.3, 1); }

.cw-led-mark b { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.cw-led-mark[data-side="l"] b { left: auto; right: -1px; transform: none; }
 .cw-led-mark[data-side="r"] b { left: -1px; transform: none; }

.cw-led-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--text-300); font-variant-numeric: tabular-nums; }

.cw-led-in { margin: 18px 0 0; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; }

.cw-led-in > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 2px 12px; align-items: start; padding: 9px 0; border-top: 1px solid var(--border); }

.cw-led-in dt { font-size: 12px; line-height: 19px; font-weight: 600; color: var(--text-300); }

.cw-led-in dd { margin: 0; }

.cw-led-in .v { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 21px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

.cw-led-in .v output { min-width: 46px; text-align: center; }

.cw-led-in .why { grid-column: 2 / -1; font-size: 13px; line-height: 19px; color: var(--text-300); }

/* evidence grades: a mark and a colour each, so they can be told apart at a glance without the legend */
.cw-grade { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.02em; vertical-align: 1px; white-space: nowrap; }

.cw-grade svg { width: 11px; height: 11px; flex: none; }

.cw-grade.measured { background: var(--text); color: var(--bg); }

.cw-grade.researched { background: var(--accent-2-100); color: var(--accent-2); }

.cw-grade.inferred { background: color-mix(in srgb, #e0399b 13%, var(--bg)); color: color-mix(in srgb, #e0399b 76%, var(--text)); }

.cw-grade.illustrative { background: var(--surface); color: var(--text-300); box-shadow: inset 0 0 0 1px var(--border); }

.cw-led-step { appearance: none; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease; }

.cw-led-step:hover { border-color: var(--text-200); }
 .cw-led-step:active { transform: scale(0.94); }

.cw-led-eq { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 21px; color: var(--text-300); font-variant-numeric: tabular-nums; }

.cw-led-eq b { color: var(--text); font-weight: 600; }
 .cw-led-eq .op { margin: 0 2px; }

.cw-led-grade, .cw-led-pv { margin: 0; font-size: 13px; line-height: 21px; color: var(--text-300); }

.cw-led-grade { padding-top: 12px; border-top: 1px solid var(--border); }

.cw-led-pv { padding: 0 2px; }

.cw-led-grade b, .cw-led-pv b { color: var(--text); font-weight: 600; }


/* ── driver ── one stage: the deck panel and the phone are the same height, the nav sits on the panel floor */
.cw-drv { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); align-items: stretch; }

.cw-drv-deck { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; border-radius: 14px; background: var(--bg); }

.cw-drv-deck .cw-tabs { align-self: flex-start; }

.cw-drv-pane { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.cw-drv-pane[hidden] { display: none; }

.cw-drv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.cw-drv-steps > li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; color: var(--text-300); transition: background 160ms ease, color 160ms ease; }

.cw-drv-steps > li:hover { background: var(--surface); }

.cw-drv-steps > li > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface); transition: background 160ms ease, color 160ms ease; }

.cw-drv-steps > li > div > p { margin: 0; font-size: 14px; line-height: 22px; }

.cw-drv-steps > li > div { min-width: 0; }

.cw-drv-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s cubic-bezier(0.16, 1, 0.3, 1); }

.cw-drv-more > div { overflow: hidden; }

.cw-drv-more small { display: block; font-size: 13px; line-height: 19px; color: var(--text-300); }

.cw-drv-steps > li.on .cw-drv-more { grid-template-rows: 1fr; }

.cw-drv-arg { margin: 12px 0 6px; padding: 14px 16px; border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }

.cw-drv-arg > b { font-size: 14px; line-height: 21px; font-weight: 700; color: var(--text); }

.cw-drv-arg dl { margin: 0; display: flex; flex-direction: column; }

.cw-drv-arg dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }

.cw-drv-arg dt { font-size: 12px; line-height: 19px; font-weight: 600; color: var(--text-300); }
 .cw-drv-arg dd { margin: 0; font-size: 13px; line-height: 19px; color: var(--text); }

.cw-drv-arg { color: var(--text); }

.cw-drv-claims { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }

.cw-drv-claims li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--text-300); }
 .cw-drv-claims .cw-grade { flex: none; margin-top: 1px; }

.cw-drv-steps > li.on { color: var(--text); background: var(--surface); }

.cw-drv-steps > li.on > div > p { font-weight: 600; }

.cw-drv-steps > li.on > span { background: var(--text); color: var(--bg); }

.cw-drv-steps > li.done > span { background: var(--accent-2-100); color: var(--accent-2); }

.cw-drv-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--primary-100); color: var(--text); font-size: 13px; line-height: 20px; animation: fadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-drv-log { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }

.cw-drv-log div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; }

.cw-drv-log dt { font-size: 12px; line-height: 18px; color: var(--text-300); }

.cw-drv-log dd { margin: 0; font: 500 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cw-drv-log dd.good { color: var(--accent-2); }
 .cw-drv-log dd.bad { color: var(--cw-red); }

.cw-drv-nav { display: flex; align-items: center; gap: 8px; }

.cw-drv-nav small { margin-left: auto; font-size: 12px; color: var(--text-300); font-variant-numeric: tabular-nums; }

.cw-drv-cards { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.cw-drv-cards li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); transition: color 160ms ease; }

.cw-drv-cards li:last-child { border-bottom: 0; }

.cw-drv-cards li.off { color: var(--text-200); }

.cw-drv-letter { font: 500 16px/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text-300); }

.cw-drv-link { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-300); }

.cw-drv-link code { font: 500 12px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); background: var(--surface); padding: 8px 10px; border-radius: 8px; word-break: break-all; }

.cw-drv-phone { position: sticky; top: 96px; align-self: start; width: 100%; border-radius: 34px; box-shadow: 0 0 0 5px #111, 0 12px 32px rgba(0,0,0,0.16); overflow: clip; /* clip, not hidden: a scrollIntoView on the sheet must never scroll the phone itself */ background: #f5f5f5; /* product mock, light in both themes */ color: #161823; aspect-ratio: 330 / 680; }

.cw-drv-screen { position: absolute; inset: 0; overflow: auto; padding: 16px 10px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }

.cw-app-bar { display: flex; align-items: center; gap: 8px; }

.cw-app-bar svg { width: 18px; height: 18px; flex: none; }

.cw-app-bar span { flex: 1; padding: 7px 12px; border-radius: 8px; background: rgba(22,24,35,0.06); font-size: 12px; line-height: 16px; color: rgba(22,24,35,0.45); }

.cw-app-tabs { display: flex; gap: 14px; padding: 2px 4px 4px; font-size: 12px; line-height: 18px; font-weight: 600; color: rgba(22,24,35,0.5); }

.cw-app-tabs b { color: #161823; box-shadow: inset 0 -2px #161823; padding-bottom: 3px; }

.cw-app-disc { appearance: none; border: 0; border-radius: 12px; background: #fff; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; font-family: inherit; color: inherit; cursor: pointer; text-align: left; }

.cw-app-disc b { font-size: 13px; }
 .cw-app-disc small { font-size: 11px; color: rgba(22,24,35,0.5); }

.cw-app-shelf { background: #fff; border-radius: 12px; padding: 2px 12px; animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-app-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 0.5px solid rgba(22,24,35,0.12); }

.cw-app-row:last-child { border-bottom: 0; }

.cw-app-pic { width: 32px; height: 32px; flex: none; border-radius: 6px; background: #f1f1f2 center / cover no-repeat; }

.cw-app-row span { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.cw-app-row b { font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cw-app-row small, .cw-app-order small { font-size: 11px; line-height: 15px; color: rgba(22,24,35,0.5); }

.cw-app-cta { appearance: none; border: 0; border-radius: 999px; background: #f1f1f2; color: #161823; font: 600 11px/16px 'Plus Jakarta Sans', sans-serif; padding: 5px 10px; cursor: pointer; white-space: nowrap; }

.cw-app-order { background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

.cw-app-order > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cw-app-order > div + div { justify-content: flex-start; }

.cw-app-order b { font-size: 12px; font-weight: 600; }
 .cw-app-order em { font-size: 11px; font-style: normal; font-weight: 600; }

.cw-app-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; max-height: 92%; background: #fff; border-radius: 18px 18px 0 0; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -8px 30px rgba(0,0,0,0.16); animation: cwSheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-app-sheet[hidden], .cw-app-shelf[hidden] { display: none; }

@keyframes cwSheetUp { from { transform: translateY(100%); } to { transform: none; } }

.cw-app-sheet > b { font-size: 14px; }
 .cw-app-sheet > small { font-size: 11px; line-height: 16px; color: rgba(22,24,35,0.6); }

.cw-app-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }

.cw-app-total em { font: 700 18px/1 'Plus Jakarta Sans', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }

.cw-app-find, .cw-app-pay { appearance: none; border: 0; border-radius: 999px; font: 600 12px/18px 'Plus Jakarta Sans', sans-serif; padding: 8px 12px; cursor: pointer; }

.cw-app-find { background: #f1f1f2; color: #161823; }
 .cw-app-find:disabled { color: #197a43; background: #eaf8ef; cursor: default; }

.cw-app-pay { background: var(--cw-red); color: #fff; }

.cw-drv-tap { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(57,48,225,0.28); border: 1.5px solid rgba(57,48,225,0.7); opacity: 0; pointer-events: none; z-index: 4; }

.cw-drv-tap.go { animation: cwTap 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes cwTap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.3); } }


/* ── reasons ── the Why track in miniature. The shelf reuses the ledger's product mock (light in both themes) */
.cw-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 20px; margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); align-items: start; }

.cw-why-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.cw-why-shelf { padding-bottom: 6px; }

.cw-why-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 14px; }

.cw-why-row + .cw-why-row::before { content: ''; position: absolute; left: 70px; right: 14px; top: 0; height: 1px; background: rgba(22,24,35,0.08); }

.cw-why-row .cw-led-thumb { grid-row: span 2; }

.cw-why-row .cw-led-verdict.cheaper { color: var(--cw-red); font-weight: 600; }

.cw-why-cta { grid-column: 2 / -1; justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: #f1f1f2; font-size: 12px; line-height: 18px; font-weight: 600; color: #161823; }

/* an annotated region: a dashed outline in the prototype's own assistant colour, solid while its card is open */
.cw-why-r { position: relative; display: inline-block; align-self: flex-start; margin: 4px 0 2px; padding: 0 3px; border-radius: 6px; outline: none; border-bottom: 1px dotted rgba(224, 57, 155, 0.6); cursor: help; transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }

.cw-why-r:hover, .cw-why-r:focus-visible, .cw-why-r.on { outline: none; background: rgba(224, 57, 155, 0.1); border-bottom-color: transparent; box-shadow: 0 0 0 1px rgba(224, 57, 155, 0.45), 0 0 0 4px rgba(224, 57, 155, 0.13); }

.cw-why-r.cw-why-cta { border-radius: 999px; border-bottom: 0; padding: 5px 12px; }
 .cw-why-r.cw-why-cta.on, .cw-why-r.cw-why-cta:hover { background: #fbe3f1; }

.cw-why-cta.cheaper { background: var(--cw-red); color: #fff; }
 /* the app's own primary button: a real saving is the only red on the row */
.cw-why-r.cw-why-cta.cheaper.on, .cw-why-r.cw-why-cta.cheaper:hover { background: color-mix(in srgb, var(--cw-red) 86%, #000); }

.cw-why-hint { margin: 0; padding: 0 2px; font-size: 13px; line-height: 20px; color: var(--text-300); }

.cw-why-card { border-radius: 14px; background: var(--bg); min-height: 330px; }

.cw-why-in { padding: 18px; display: flex; flex-direction: column; gap: 12px; animation: fadeUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-why-in > p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); }

.cw-why-t { font-size: 16px; line-height: 23px; font-weight: 700; color: var(--text); }

.cw-why-in > p.cw-why-p { padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 13px; line-height: 20px; color: var(--text); }

.cw-why-claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.cw-why-claims li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text-300); }

.cw-why-dl { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }

.cw-why-dl dt { font-size: 12px; line-height: 17px; font-weight: 600; color: var(--text); }

.cw-why-dl dd { margin: 1px 0 0; font-size: 13px; line-height: 20px; color: var(--text-300); }

.cw-why-pin { font-size: 12px; line-height: 17px; color: var(--text-300); }

.mobile-frame .cw-why, .cw-narrow .cw-why { grid-template-columns: 1fr; padding: 14px; }

.mobile-frame .cw-why-card, .cw-narrow .cw-why-card { min-height: 0; }


/* ── driver phone, second pass: the picks are hers, the price has a history, the vouchers are searched in front of her.
   A product mock, light in both themes: raw hex on purpose, the colours of the prototype ── */
.cw-app-row em, .cw-app-opt em { font-style: normal; font-size: 12px; line-height: 16px; font-weight: 700; font-variant-numeric: tabular-nums; align-self: flex-start; }

.cw-app-row small.v { color: #161823; }
 .cw-app-row small.v.good { color: var(--cw-red); }

.cw-app-tick, .cw-app-opt i { appearance: none; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(22,24,35,0.28); background: #fff; color: transparent; display: grid; place-items: center; cursor: pointer; transition: background 160ms cubic-bezier(0.65, 0, 0.35, 1), border-color 160ms cubic-bezier(0.65, 0, 0.35, 1); }

.cw-app-tick svg, .cw-app-opt i svg, .cw-app-places svg { width: 12px; height: 12px; }

.cw-app-tick[aria-pressed="true"], .cw-app-opt[aria-pressed="true"] i { background: var(--cw-red); border-color: var(--cw-red); color: #fff; }

.cw-app-opt i { border-radius: 5px; }

.cw-app-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 8px; border-top: 0.5px solid rgba(22,24,35,0.12); }

.cw-app-foot span { display: flex; flex-direction: column; min-width: 0; }

.cw-app-foot b { font-size: 11px; line-height: 15px; font-weight: 600; }
 .cw-app-foot small { font-size: 10px; line-height: 14px; color: rgba(22,24,35,0.5); }

.cw-app-buy { appearance: none; border: 0; border-radius: 999px; background: var(--cw-red); color: #fff; font: 700 11px/16px 'Plus Jakarta Sans', sans-serif; padding: 6px 12px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }

.cw-app-buy:disabled { background: #f1f1f2; color: rgba(22,24,35,0.4); }

.cw-app-acts { justify-content: flex-end !important; }
 .cw-app-cta.pri { background: var(--cw-red); color: #fff; }

.cw-app-store { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
 .cw-app-store i { font: 700 8px/12px 'Plus Jakarta Sans', sans-serif; font-style: normal; letter-spacing: 0.04em; padding: 0 4px; border-radius: 3px; background: var(--cw-red); color: #fff; }

.cw-app-note { flex-direction: column; align-items: stretch !important; gap: 1px !important; padding: 7px 10px; border-radius: 8px; background: #f5f5f6; font-size: 11px; line-height: 15px; }
 .cw-app-note span { font-weight: 600; color: #161823; }
 .cw-app-note small { color: rgba(22,24,35,0.5); }

.cw-app-it { gap: 8px !important; }
 .cw-app-it > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .cw-app-it b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .cw-app-it em { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; align-self: flex-start; }

.cw-drv-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }

.cw-drv-filter { appearance: none; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-family: inherit; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }

.cw-drv-filter b { font-size: 13px; line-height: 18px; font-weight: 600; }
 .cw-drv-filter small { font-size: 11px; line-height: 15px; color: var(--text-300); }

.cw-drv-filter.on { background: var(--text); color: var(--bg); border-color: var(--text); }
 .cw-drv-filter.on small { color: var(--bg); opacity: 0.7; }

.cw-drv-filter:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.cw-drv-cards input:disabled + i { opacity: 0.45; }

.cw-app-sheet { overflow: auto; scrollbar-width: none; }
 /* flex: none, or the column squeezes a scrolling child down to a sliver */
.cw-app-hist, .cw-app-opt, .cw-app-vouch, .cw-app-total, .cw-app-pay { flex: none; }

.cw-app-hist, .cw-app-opt { appearance: none; border: 0; border-radius: 10px; background: #f5f5f6; padding: 8px 10px; display: flex; align-items: center; gap: 8px; font-family: inherit; color: inherit; text-align: left; cursor: pointer; }

.cw-app-hist span, .cw-app-opt span, .cw-app-vt, .cw-app-found span { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cw-app-hist b { font-size: 11px; line-height: 15px; color: var(--cw-red); }
 .cw-app-opt b, .cw-app-vt b, .cw-app-found b { font-size: 11px; line-height: 15px; }

.cw-app-hist small, .cw-app-opt small, .cw-app-vt small, .cw-app-found small { font-size: 10px; line-height: 14px; color: rgba(22,24,35,0.55); }

.cw-app-spark { flex: none; height: 18px; display: flex; align-items: flex-end; gap: 2px; }
 .cw-app-spark u { width: 5px; border-radius: 1px; background: rgba(22,24,35,0.22); text-decoration: none; }
 .cw-app-spark u.now { background: var(--cw-red); }

.cw-app-chart { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 84px; padding: 4px 4px 0; animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-app-chart[hidden], .cw-app-places[hidden], .cw-app-found[hidden], .cw-app-find[hidden] { display: none; }

.cw-app-chart span { height: 100%; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 1px; }

.cw-app-chart u { align-self: end; width: 100%; border-radius: 3px 3px 0 0; background: rgba(22,24,35,0.16); text-decoration: none; transform-origin: bottom; animation: cwBarUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-app-chart .now u { background: var(--cw-red); }

.cw-app-chart small { font-size: 10px; line-height: 13px; color: rgba(22,24,35,0.5); }
 .cw-app-chart b { font-size: 10px; line-height: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

@keyframes cwBarUp { from { transform: scaleY(0.1); } to { transform: none; } }

.cw-app-vouch { border-radius: 10px; background: #f5f5f6; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }

.cw-app-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.cw-app-places li { display: flex; align-items: center; gap: 6px; font-size: 10px; line-height: 14px; color: rgba(22,24,35,0.45); transition: color 200ms ease; }

.cw-app-places li svg { flex: none; color: transparent; border-radius: 50%; transition: color 200ms ease; }

.cw-app-places li:not(.ok) svg { border: 1.5px solid rgba(22,24,35,0.2); border-top-color: #161823; animation: cwSpin 0.7s linear infinite; }

.cw-app-places li.ok { color: #161823; }
 .cw-app-places li.ok svg { color: #0a8f7a; }

@keyframes cwSpin { to { transform: rotate(360deg); } }

.cw-app-found { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 0.5px solid rgba(22,24,35,0.12); animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-app-claim { appearance: none; flex: none; border: 0; border-radius: 999px; background: #fff; color: #161823; font: 600 11px/16px 'Plus Jakarta Sans', sans-serif; padding: 5px 12px; cursor: pointer; }

.cw-app-claim:disabled { color: #197a43; background: #eaf8ef; cursor: default; }

.cw-app-placed { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 4px; text-align: center; animation: fadeUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-app-placed i { width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: #eaf8ef; color: #197a43; display: grid; place-items: center; }
 .cw-app-placed i svg { width: 18px; height: 18px; }

.cw-app-placed b { font-size: 14px; }
 .cw-app-placed small { font-size: 11px; line-height: 16px; color: rgba(22,24,35,0.6); }
 .cw-app-placed .cw-app-total { width: 100%; margin-top: 8px; padding-top: 8px; border-top: 0.5px solid rgba(22,24,35,0.12); }


/* ── pipeline ── who holds the work at each step. Lanes are people, columns are steps, the line is the work moving ── */
.cw-pl { margin-top: 12px; padding: 20px; border-radius: 16px; background: var(--surface); }

.cw-pl svg { display: block; width: 100%; height: auto; overflow: visible; }

.cw-pl-lane { fill: var(--bg); }
 .cw-pl-lane.alt { fill: color-mix(in srgb, var(--bg) 55%, var(--surface)); }

.cw-pl-who { font: 600 12px 'Plus Jakarta Sans', sans-serif; fill: var(--text); }
 .cw-pl-whos { font: 500 10.5px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); }

.cw-pl-path { fill: none; stroke: var(--text-200); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

.cw-pl-back { fill: none; stroke: var(--case-ac, var(--primary)); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0; }

.cw-pl.in .cw-pl-path { animation: cwRigDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; }
 .cw-pl.in .cw-pl-back { animation: cwFade 0.5s ease 1.7s forwards; }

.cw-pl-backt { font: 600 10.5px 'Plus Jakarta Sans', sans-serif; fill: var(--case-ac, var(--primary)); opacity: 0; }
 .cw-pl.in .cw-pl-backt { animation: cwFade 0.5s ease 1.8s forwards; }

.cw-pl-node { cursor: pointer; outline: none; }

.cw-pl-node circle { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; transition: fill 160ms ease, r 160ms ease; }

.cw-pl-node text { font: 700 11px 'Plus Jakarta Sans', sans-serif; fill: var(--text); text-anchor: middle; dominant-baseline: central; transition: fill 160ms ease; pointer-events: none; }

.cw-pl-node.on circle, .cw-pl-node:hover circle, .cw-pl-node:focus-visible circle { fill: var(--text); }
 .cw-pl-node.on text, .cw-pl-node:hover text, .cw-pl-node:focus-visible text { fill: var(--bg); }

.cw-pl-step { font: 500 10.5px 'Plus Jakarta Sans', sans-serif; fill: var(--text-300); text-anchor: middle; }

.cw-pl-detail { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; min-height: 86px; }

.cw-pl-detail b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }
 .cw-pl-detail p { grid-column: 1; margin: 0; font-size: 13px; line-height: 20px; color: var(--text-300); }

.cw-pl-out { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 2px; max-width: 200px; font-size: 12px; line-height: 17px; color: var(--text-300); }
 .cw-pl-out span { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--text); }

.cw-pl-list { display: none; list-style: none; margin: 0; padding: 0; }

.mobile-frame .cw-pl svg, .cw-narrow .cw-pl svg, .mobile-frame .cw-pl-detail, .cw-narrow .cw-pl-detail { display: none; }

.mobile-frame .cw-pl, .cw-narrow .cw-pl { padding: 14px; }
 .mobile-frame .cw-pl-list, .cw-narrow .cw-pl-list { display: flex; flex-direction: column; }

.cw-pl-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--text-300); }
 .cw-pl-list li:first-child { border-top: 0; }

.cw-pl-list li i { grid-row: span 3; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 11px/22px 'Plus Jakarta Sans', sans-serif; font-style: normal; text-align: center; }

.cw-pl-list li em { font-style: normal; font-size: 12px; color: var(--case-ac, var(--primary)); font-weight: 600; }
 .cw-pl-list li b { color: var(--text); font-weight: 600; font-size: 14px; }


/* this case's dark boards let their title run the full width (the shared 660px cap is the deck slide's proportion) */
.cw[data-key^="nca"] .cw-bd-title { max-width: none; }

.cw[data-key^="nca"] :is(.cw-bd-num span:not(.cw-bd-n), .cw-bd-checks span, .cw-bd-mut, .cw-bd-card span) { color: rgba(255,255,255,0.82); }

.cw[data-key^="nca"] .cw-bd-num .cw-bd-n { color: var(--bd-ac); }


/* ── narrow: the mobile frame and small desktop windows ── */
.mobile-frame .cw-clips, .cw-narrow .cw-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 12px; }

.mobile-frame .cw-clips.pc, .cw-narrow .cw-clips.pc { grid-template-columns: 1fr; padding: 0; }

.mobile-frame .cw-drv, .cw-narrow .cw-drv { grid-template-columns: 1fr; }
 .mobile-frame .cw-drv-phone, .cw-narrow .cw-drv-phone { position: relative; top: 0; width: 280px; justify-self: center; order: -1; }

.mobile-frame .cw-led, .cw-narrow .cw-led { padding: 14px; gap: 18px; }

.mobile-frame .cw-led-work, .cw-narrow .cw-led-work { padding: 14px; }

.mobile-frame .cw-led-in, .cw-narrow .cw-led-in { grid-template-columns: 88px minmax(0, 1fr) auto; }


/* ── the shelf row, rebuilt to the prototype's order page: thumb, one text column, price alone at the top right ── */
.cw-led-thumb { grid-row: 1 / span 4; align-self: start; }

.cw-led-main { grid-column: 2; }

.cw-led-main b { font-size: 14px; line-height: 20px; }

.cw-led-row .cw-led-left, .cw-led-row .cw-led-verdict { font-size: 13px; line-height: 18px; }

.cw-led-row .cw-led-verdict { font-weight: 500; }

.cw-led-row[data-v="cheaper"] .cw-led-verdict { color: var(--cw-red); }
   /* the one red on the shelf, the app's own */
.cw-led-price { grid-column: 3; grid-row: 1 / span 3; align-self: start; align-items: flex-end; gap: 2px; }

.cw-led-price b { line-height: 20px; }
                              /* sits on the title's line */
.cw-led-cta { margin-top: 7px; }

.cw-led-shelf { border-radius: 16px; }
                              /* tux container level 2, small */
/* the workings: every value, its grade and its note start at the same top edge */
.cw-led-in dt { line-height: 19px; }

.cw-led-in .v { align-items: center; min-height: 21px; }

.cw-led-in .g { align-self: start; line-height: 20px; }

.cw-led-in .why { padding-top: 2px; }


/* both columns open on the same line: the two captions reserve two lines each so the cards start level */
.cw-led > .cw-led-col > .cw-led-cap { min-height: 42px; }

.mobile-frame .cw-led > .cw-led-col > .cw-led-cap, .cw-narrow .cw-led > .cw-led-col > .cw-led-cap { min-height: 0; }


.cw-led-row.on:not([data-v="cheaper"]) .cw-led-cta { background: #fff; }
   /* the grey chip vanishes into the selected row; the red one must keep its fill or its white label disappears */

.cw-led-row .cw-led-verdict { font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }

.cw-led-work[data-mode="price"] .cw-led-bar, .cw-led-work[data-mode="price"] .cw-led-ends, .cw-led-work[data-mode="price"] .cw-led-big em { display: none; }

.cw-led-work[data-mode="price"] .cw-led-big { font-size: 15px; line-height: 21px; color: var(--text-300); font-weight: 500; }

.cw-led-work[data-mode="price"] .cw-led-in { margin-top: 14px; }


/* the idea card argument: label column, then the claim, so every row starts on one left edge */
.cw-drv-arg dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 14px; align-items: start; }

.cw-drv-arg dl dt { line-height: 20px; }

.cw-drv-arg dl dd { margin: 0; }


/* the workings: a value and what it is measured against stay on one line, the sum below wraps as whole phrases */
.cw-led-in .v { flex-wrap: wrap; gap: 2px 7px; }

.cw-led-in .v small { white-space: nowrap; }

.cw-led-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; padding: 12px 0; }

.cw-led-eq b, .cw-led-eq span { white-space: nowrap; }

.cw-led-rule, .cw-led-grade { padding-top: 12px; }


/* ── vision: one chain per pillar, so expectation, research, novelty and outcome read as one move ── */

/* four steps need room to read: the chain runs wider than the column, like the lab does */

/* the running product, folded away: the argument stands on its own and the recording is there on request */

/* ── vision: convention, the finding that breaks it, and the thing we shipped, side by side ── */
.cw-vis { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; padding: 22px; border-radius: 16px; background: var(--surface); }

.cw-vis-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.cw-vis-chip { appearance: none; text-align: left; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 12px; padding: 11px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }

.cw-vis-chip i { font: 500 13px/19px 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; font-style: normal; color: var(--case-ac, var(--primary)); }

.cw-vis-chip b { display: block; font-size: 13px; line-height: 19px; font-weight: 600; }

.cw-vis-chip em { display: block; font-style: normal; font-size: 12px; line-height: 17px; color: var(--text-300); }

.cw-vis-chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }

.cw-vis-chip.on em, .cw-vis-chip.on i { color: var(--bg); }
 .cw-vis-chip.on em { opacity: 0.72; }

.cw-vis-chip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }


.cw-vis-tbl { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1.16fr); column-gap: 34px; row-gap: 16px; align-items: start; }

.cw-vis-tbl > * { opacity: 0; }

.cw-vis-tbl.in > * { animation: cwFade 0.42s ease calc(var(--i) * 80ms) forwards; }

.cw-vis-h { position: relative; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--text-300); padding-bottom: 9px; border-bottom: 1px solid var(--border); }

/* the connectives sit in the gutter, so the three columns read as one sentence */
.cw-vis-j { position: absolute; left: -34px; top: -1px; width: 34px; text-align: center; font-size: 11px; font-weight: 500; font-style: italic; color: var(--case-ac, var(--primary)); }

.cw-vis-c { display: flex; flex-direction: column; gap: 9px; }

.cw-vis-c p { margin: 0; font-size: 13px; line-height: 20px; }

.cw-vis-c.usual p { font-size: 12px; line-height: 18px; font-weight: 500; }

.cw-vis-c.found p { font-size: 15px; line-height: 23px; }
   /* the finding is the argument, so it is the loudest thing in the table */
.cw-vis-c.usual p { color: var(--text-300); }

.cw-vis-c.found p { color: var(--text); }

.cw-vis-src { display: block; font-size: 11px; line-height: 16px; color: var(--text-200); font-style: italic; }

.cw-vis-src::before { content: '· '; }

.cw-vis-made { grid-column: 3; align-self: stretch; display: flex; flex-direction: column; gap: 14px; border-radius: 14px; padding: 16px; background: var(--text); color: var(--bg); }

.cw-vis-made-t b { display: block; font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: 0.002em; }

.cw-vis-made-t p { margin: 5px 0 0; font-size: 13px; line-height: 20px; opacity: 0.72; }

.cw-vis-made .cw-mk { margin-top: auto; }

.cw-vis-fb { margin: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.16); font-size: 13px; line-height: 20px; opacity: 0.86; }


/* ── the small drawings ── */
.cw-mk { display: flex; flex-direction: column; gap: 7px; padding: 11px; border-radius: 10px; }

.cw-mk.dead { background: var(--bg); border: 1px solid var(--border); }

.cw-mk.live { background: var(--bg); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26); }

.cw-mk-r { display: flex; align-items: center; gap: 8px; }

.cw-mk-r.end { justify-content: flex-end; }
 .cw-mk-r.spread { justify-content: space-between; }

.cw-mk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.cw-mk-col.end { flex: none; align-items: flex-end; text-align: right; }

.cw-mk-col b { font-size: 11px; line-height: 15px; font-weight: 600; }

.cw-mk-col em { font-style: normal; font-size: 10px; line-height: 14px; color: var(--text-300); }

.cw-mk-col em.good { color: var(--accent-2); font-weight: 600; }
 .cw-mk-col em.warn { color: var(--case-ac, var(--primary)); font-weight: 600; }

.cw-mk-sq { flex: none; width: 24px; height: 24px; border-radius: 5px; background: var(--surface); }

.cw-mk.live .cw-mk-sq { background: var(--bg-400, var(--surface)); }

.cw-mk-l { display: block; height: 4px; border-radius: 2px; background: var(--border); width: var(--w, 100%); }

.cw-mk-b { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 10px; line-height: 13px; font-weight: 600; background: var(--surface); color: var(--text-200); }

.cw-mk-b.ac { background: var(--case-ac, var(--primary)); color: #fff; }

.cw-mk-b.gh { background: transparent; border: 1px solid var(--border); color: var(--text-300); }

.cw-mk-hd { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--border); font-size: 11px; line-height: 15px; font-weight: 600; }

.cw-mk-n { margin-left: auto; padding: 1px 6px; border-radius: 999px; background: var(--surface); font-size: 10px; color: var(--text-300); }

.cw-mk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--case-ac, var(--primary)); }

.cw-mk p.cw-mk-note { margin: 1px 0 0; font-size: 11px; line-height: 15px; font-style: italic; color: var(--text-200); }

.cw-mk-p { display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 15px; }

.cw-mk-p s { color: var(--text-200); }
 .cw-mk-p b { font-weight: 600; }
 .cw-mk-p em { font-style: normal; font-size: 10px; color: var(--text-200); }

.cw-mk-fld { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 7px; background: var(--surface); font-size: 10px; line-height: 14px; color: var(--text-200); }

.cw-mk-cur { width: 1px; height: 11px; background: var(--text-200); }

.cw-mk-empty { padding: 14px 0; text-align: center; font-size: 10px; color: var(--text-200); }

.cw-mk-r.spread .cw-mk-ts { width: auto; }

.cw-mk-ts { flex: none; width: 30px; font-style: normal; font-size: 10px; line-height: 14px; color: var(--text-200); font-variant-numeric: tabular-nums; }

.cw-mk-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface); }

.cw-mk-band { position: absolute; left: 30%; width: 44%; top: 0; bottom: 0; border-radius: 3px; background: var(--border); }

.cw-mk-ch { padding: 4px 9px; border-radius: 7px; background: var(--surface); font-size: 11px; line-height: 15px; font-weight: 600; color: var(--text); }

.mobile-frame .cw-vis, .cw-narrow .cw-vis { padding: 14px; gap: 14px; }

.mobile-frame .cw-vis-pick, .cw-narrow .cw-vis-pick { grid-template-columns: 1fr; }

.mobile-frame .cw-vis-tbl, .cw-narrow .cw-vis-tbl { grid-template-columns: 1fr; column-gap: 0; row-gap: 12px; }

.mobile-frame .cw-vis-h, .cw-narrow .cw-vis-h, .mobile-frame .cw-vis-j, .cw-narrow .cw-vis-j { display: none; }

.mobile-frame .cw-vis-c.usual, .cw-narrow .cw-vis-c.usual { padding-top: 12px; border-top: 1px solid var(--border); }

.mobile-frame .cw-vis-c.found p::before, .cw-narrow .cw-vis-c.found p::before { content: 'but'; margin-right: 0.35em; font-style: italic; color: var(--case-ac, var(--primary)); }

.mobile-frame .cw-vis-made, .cw-narrow .cw-vis-made { grid-row: auto !important; grid-column: auto; }


/* the button now lives inside the text column, so it follows its line by a flex gap instead of a grid row */
.cw-why-cta { grid-column: auto; align-self: flex-start; margin-top: 6px; }

/* one grid for the whole list, so a wide badge and a narrow one still start their text at the same x */
.cw-drv-claims { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 9px; }

.cw-drv-claims li { display: contents; }

.cw-drv-claims .cw-grade { align-self: start; margin-top: 1px; }

/* the folded recording sits behind the site's own disclosure pill */
.cw .case-dropdown { margin-top: 14px; }

.cw .case-dropdown-in { padding-top: 14px; }


/* ── the shipped card performs what it does ── */
@keyframes cwMkIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.cw-vis-made .cw-mk > * { opacity: 0; }

.cw-in .cw-vis-made .cw-mk > * { animation: cwMkIn 0.52s cubic-bezier(0.16, 1, 0.3, 1) both; }

.cw-in .cw-vis-made .cw-mk > *:nth-child(1) { animation-delay: 0.26s; }

.cw-in .cw-vis-made .cw-mk > *:nth-child(2) { animation-delay: 0.36s; }

.cw-in .cw-vis-made .cw-mk > *:nth-child(3) { animation-delay: 0.46s; }

.cw-in .cw-vis-made .cw-mk > *:nth-child(4) { animation-delay: 0.56s; }


/* the shelf: the picks are the buyer's, so they tick on and let go again */
.cw-mk-tick { flex: none; position: relative; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border); box-sizing: border-box; }

.cw-mk-tick::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border-right: 1.5px solid var(--bg); border-bottom: 1.5px solid var(--bg); transform: rotate(42deg); opacity: 0; }

@keyframes cwTickOn { 0%, 6% { background: transparent; border-color: var(--border); } 13%, 74% { background: var(--case-ac, var(--primary)); border-color: var(--case-ac, var(--primary)); } 82%, 100% { background: transparent; border-color: var(--border); } }

@keyframes cwTickMk { 0%, 8% { opacity: 0; transform: rotate(42deg) scale(0.4); } 15%, 74% { opacity: 1; transform: rotate(42deg) scale(1); } 82%, 100% { opacity: 0; transform: rotate(42deg) scale(0.4); } }

.cw-in .cw-vis-made .cw-mk-tick { animation: cwTickOn 5.2s ease-in-out 1.1s infinite; }

.cw-in .cw-vis-made .cw-mk-tick::after { animation: cwTickMk 5.2s ease-in-out 1.1s infinite; }

.cw-in .cw-vis-made .cw-mk-r:nth-child(3) .cw-mk-tick, .cw-in .cw-vis-made .cw-mk-r:nth-child(3) .cw-mk-tick::after { animation-delay: 1.5s; }


/* Needs you: the thing that needs you says so */
.cw-mk-dot { position: relative; }

@keyframes cwMkRing { 0% { transform: scale(0.7); opacity: 0.85; } 70%, 100% { transform: scale(2.8); opacity: 0; } }

.cw-in .cw-vis-made .cw-mk-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--case-ac, var(--primary)); animation: cwMkRing 2.4s ease-out infinite; }


/* the rule and the grade had 12px under their hairline and nothing above the next one, so every block in the
   workings sat high in its own band; the last one needs no bottom, the panel's padding is below it */
.cw-led-work > .cw-led-rule, .cw-led-work > .cw-led-grade, .cw-led-work > .cw-led-pv { padding-bottom: 12px; }

.cw-led-work > *:last-child { padding-bottom: 0; }


/* Neither Plus Jakarta Sans nor Cabinet Grotesk carries U+0E3F, so every baht sign fell through to whatever
   sans the visitor's machine offers: a different typeface, and 59% wider than the digits beside it. This adds
   the one glyph to both families (a 1.8KB Noto Sans Thai subset), so no selector changes and nothing else is
   touched. Root-absolute so it resolves the same from /_preview.html and from the shipped stylesheet. */

/* ── the pipeline on a phone: the chart is hidden, so the list has to carry what it said ── */
.mobile-frame .cw-pl-list, .cw-narrow .cw-pl-list { gap: 8px; }

.mobile-frame .cw-pl-list li, .cw-narrow .cw-pl-list li { border-top: 0; background: var(--bg); border-radius: 12px; padding: 12px; gap: 3px 10px; }

.cw-pl-list li i { grid-column: 1; grid-row: 1 / span 4; }

.cw-pl-list li > em, .cw-pl-list li > b, .cw-pl-list li > span, .cw-pl-list li > .cw-pl-lout { grid-column: 2; }

.cw-pl-list li em { display: flex; align-items: center; gap: 0; }

/* five lanes, the one holding the work is lit: the swimlane, small enough for a phone */
.cw-pl-l5 { display: inline-flex; gap: 3px; margin-right: 8px; }

.cw-pl-l5 span { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }

.cw-pl-l5 span.on { background: var(--case-ac, var(--primary)); }

.cw-pl-list li[data-me] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-ac, var(--primary)) 38%, transparent); }

.cw-pl-lout { grid-column: 2; margin-top: 7px; padding: 8px 10px; border-radius: 8px; background: var(--surface); font-size: 12px; line-height: 18px; color: var(--text); }

.cw-pl-lout small { display: block; font-size: 10px; line-height: 14px; color: var(--text-200); }

.cw-pl-loop { display: none; }

.mobile-frame .cw-pl-loop, .cw-narrow .cw-pl-loop { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--case-ac, var(--primary)) 45%, transparent); font-size: 12px; line-height: 18px; color: var(--text-300); }

.cw-pl-loop span { flex: none; width: 7px; height: 7px; margin-top: 5px; border-left: 1.5px solid var(--case-ac, var(--primary)); border-bottom: 1.5px solid var(--case-ac, var(--primary)); transform: rotate(45deg); }


/* ── 3. a 72px label column wraps, so the labels close up against their values ── */


/* ── 4. the driver's controls go where you can watch the phone answer them ── */
.mobile-frame .cw-drv-deck, .cw-narrow .cw-drv-deck { display: contents; }

.mobile-frame .cw-drv .cw-tabs, .cw-narrow .cw-drv .cw-tabs { order: 1; }

.mobile-frame .cw-drv-phone, .cw-narrow .cw-drv-phone { order: 2; }

.mobile-frame .cw-drv-pane, .cw-narrow .cw-drv-pane { order: 3; display: flex; flex-direction: column; }

.mobile-frame .cw-drv-pane[hidden], .cw-narrow .cw-drv-pane[hidden] { display: none; }

.mobile-frame .cw-drv-nav, .cw-narrow .cw-drv-nav { order: -1; margin: 0 0 12px; }


/* a 104px label column leaves about 130px for the answer on a phone, which breaks every line after three
   words; the label sits above its answer instead, and the graded claim gets its full width back */
.mobile-frame .cw-drv-arg dl > div, .cw-narrow .cw-drv-arg dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

.mobile-frame .cw-drv-arg dt, .cw-narrow .cw-drv-arg dt { font-size: 11px; line-height: 16px; color: var(--text-200); }

.mobile-frame .cw-drv-claims, .cw-narrow .cw-drv-claims { grid-template-columns: minmax(0, 1fr); row-gap: 5px; }

.mobile-frame .cw-drv-claims .cw-grade, .cw-narrow .cw-drv-claims .cw-grade { justify-self: start; margin-bottom: 2px; }

.mobile-frame .cw-drv-claims li, .cw-narrow .cw-drv-claims li { display: contents; }

.mobile-frame .cw-drv-claims > li + li .cw-grade, .cw-narrow .cw-drv-claims > li + li .cw-grade { margin-top: 10px; }


/* One red for the whole case. It was #fe2c55 on fills and #e0245a on text, which sat side by side on the same
   shelf row and did not match. The darker one wins: identical everywhere, and it carries 11px text at 4.6:1. */
.cw { --cw-red: #fe2c55; }

/* the legend, now its own block above the ledger */
.cw-gk { padding: 16px 18px; border-radius: 14px; background: var(--surface); }

.cw-gk-lead { margin: 0 0 12px; font-size: 13px; line-height: 20px; color: var(--text-300); }

.cw-gk-list { margin: 0; padding: 0; border-top: 0; }

.mobile-frame .cw-gk, .cw-narrow .cw-gk { padding: 14px; }

.mobile-frame .cw-gk-list li, .cw-narrow .cw-gk-list li { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: start; }


/* ── the tracking mock, built from the real tracking page: teal route, a red vehicle on it ──
   Teal is the product's own tracking colour (TUX cyan), raw on purpose, the same way the other product
   surfaces here are. Red stays what it is everywhere else: money, or the primary action. */
.cw-mk { --cw-teal: #00C3D0; }

.cw-mk-trk { position: relative; height: 40px; border-radius: 8px; background: var(--surface); }

.cw-mk-rail, .cw-mk-fill { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; }

.cw-mk-rail { background: var(--border); }

.cw-mk-fill { background: var(--cw-teal); transform-origin: left center; transform: scaleX(0); }

.cw-mk-cp { position: absolute; left: var(--p); top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1.5px var(--border); }

.cw-mk-cp:last-of-type { box-shadow: 0 0 0 1.5px var(--cw-teal); }

.cw-mk-van { position: absolute; left: 6%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--cw-red); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.22); }

.cw-mk-van svg { grid-area: 1 / 1; width: 13px; height: 13px; opacity: 0; }

.cw-mk-van svg:nth-child(1) { opacity: 1; }

/* one marker, four icons: parcel, truck to 70%, motorbike, delivered */
@keyframes cwVanRun { 0%, 8% { left: 6%; } 60% { left: 70%; } 78%, 100% { left: 94%; } }

@keyframes cwVanFill { 0%, 8% { transform: scaleX(0); } 60% { transform: scaleX(0.727); } 78%, 100% { transform: scaleX(1); } }

@keyframes cwIcBox { 0%, 8% { opacity: 1; } 11%, 100% { opacity: 0; } }

@keyframes cwIcTruck { 0%, 8% { opacity: 0; } 11%, 59% { opacity: 1; } 62%, 100% { opacity: 0; } }

@keyframes cwIcBike { 0%, 59% { opacity: 0; } 62%, 76% { opacity: 1; } 79%, 100% { opacity: 0; } }

@keyframes cwIcDone { 0%, 76% { opacity: 0; } 79%, 100% { opacity: 1; } }

.cw-in .cw-vis-made .cw-mk-van { animation: cwVanRun 7s cubic-bezier(0.5, 0, 0.3, 1) 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-fill { animation: cwVanFill 7s cubic-bezier(0.5, 0, 0.3, 1) 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-van svg:nth-child(1) { animation: cwIcBox 7s linear 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-van svg:nth-child(2) { animation: cwIcTruck 7s linear 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-van svg:nth-child(3) { animation: cwIcBike 7s linear 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-van svg:nth-child(4) { animation: cwIcDone 7s linear 0.5s infinite; }

.cw-mk-r.btns { gap: 6px; }
 .cw-mk-r.btns .cw-mk-b { flex: 1; text-align: center; }


/* ── inside a product mock, the product's colours ── */
.cw-mk-b.ac { background: var(--cw-red); color: #fff; }

.cw-mk-col em.good { color: var(--cw-red); font-weight: 600; }

.cw-mk-col em.warn { color: var(--text); font-weight: 600; }
   /* advice, not a saving, so it is not red */
.cw-mk-dot { background: var(--cw-red); }

.cw-in .cw-vis-made .cw-mk-dot::after { border-color: var(--cw-red); }

@keyframes cwTickOnRed { 0%, 6% { background: transparent; border-color: var(--border); } 13%, 74% { background: var(--cw-red); border-color: var(--cw-red); } 82%, 100% { background: transparent; border-color: var(--border); } }

.cw-in .cw-vis-made .cw-mk-tick { animation-name: cwTickOnRed; }

.cw-vis-made .cw-mk-tick { background: transparent; }


/* ── the overdue stretch, past the due tick rather than pinned at full ── */
.cw-led-used { clip-path: inset(0 calc((1 - min(var(--p, 0), var(--due, 1))) * 100%) 0 0); }

.cw-led-over { position: absolute; inset: 0; border-radius: 999px; background: var(--cw-red); opacity: 0;
  clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 calc(var(--due, 1) * 100%));
  transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }

.cw-led-duet { position: absolute; top: -2px; bottom: -2px; left: calc(var(--due, 1) * 100%); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--bg); opacity: 0; transition: left 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }

.cw-led-work[data-state="out"] .cw-led-over, .cw-led-work[data-state="out"] .cw-led-duet { opacity: 1; }

/* overdue reads as a line, not a 44px number, the same way "nothing here runs out" does */
.cw-led-work[data-state="out"] .cw-led-big em { display: none; }

.cw-led-work[data-state="out"] .cw-led-big { font-size: 15px; line-height: 21px; color: var(--text-300); font-weight: 500; }

.cw-led-work[data-state="out"] .cw-led-ends { position: relative; }

.cw-led-work[data-state="out"] .cw-led-ends .b { position: absolute; left: calc(var(--due, 1) * 100%); transform: translateX(-50%); white-space: nowrap; }


/* ── 8: the legend uses the width it is given ── */
.cw-gk { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: 16px 32px; align-items: start; }

.cw-gk-lead { margin: 0; }

.cw-gk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }

.cw-gk-list li { display: block; }

.cw-gk-list li .cw-grade { margin-bottom: 6px; }

.cw-gk-list li > span:not(.cw-grade) { display: block; }

.mobile-frame .cw-gk, .cw-narrow .cw-gk { grid-template-columns: minmax(0, 1fr); gap: 12px; }

.mobile-frame .cw-gk-list, .cw-narrow .cw-gk-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }


/* ── the route, the vehicle and the checkpoints are one colour: the journey is one thing ── */
.cw-mk { --cw-green: #34C759; }

.cw-mk-fill { background: var(--cw-green); }

.cw-mk-van { background: var(--cw-green); }

.cw-mk-cp, .cw-mk-cp:last-of-type { box-shadow: 0 0 0 1.5px var(--border); }

/* each ring turns as the vehicle reaches it, so the passed part of the trip is readable at a glance */
@keyframes cwCp1 { 0%, 7% { box-shadow: 0 0 0 1.5px var(--border); } 10%, 100% { box-shadow: 0 0 0 1.5px var(--cw-green); } }

@keyframes cwCp2 { 0%, 33% { box-shadow: 0 0 0 1.5px var(--border); } 36%, 100% { box-shadow: 0 0 0 1.5px var(--cw-green); } }

@keyframes cwCp3 { 0%, 59% { box-shadow: 0 0 0 1.5px var(--border); } 62%, 100% { box-shadow: 0 0 0 1.5px var(--cw-green); } }

@keyframes cwCp4 { 0%, 77% { box-shadow: 0 0 0 1.5px var(--border); } 80%, 100% { box-shadow: 0 0 0 1.5px var(--cw-green); } }

.cw-in .cw-vis-made .cw-mk-cp[data-i="1"] { animation: cwCp1 7s linear 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-cp[data-i="2"] { animation: cwCp2 7s linear 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-cp[data-i="3"] { animation: cwCp3 7s linear 0.5s infinite; }

.cw-in .cw-vis-made .cw-mk-cp[data-i="4"] { animation: cwCp4 7s linear 0.5s infinite; }

/* delivered lands rather than fades */
@keyframes cwIcDone { 0%, 76% { opacity: 0; transform: scale(0.3); } 82% { opacity: 1; transform: scale(1.3); } 88%, 100% { opacity: 1; transform: scale(1); } }

.cw-mk-van svg:nth-child(4) { transform-origin: center; }


/* ── less bold in the workings: the arithmetic is a working, the answer is the answer ── */
.cw-led-big { font-weight: 500; }

.cw-led-big em { font-weight: 500; }

.cw-led-dates { font-weight: 500; }

.cw-led-grade b { font-weight: 600; }

.cw-led-eq { font-weight: 500; }
 .cw-led-eq b { font-weight: 600; }


/* ── the legend's title ── */
.cw-gk-say { display: flex; flex-direction: column; gap: 7px; }

.cw-gk-t { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--text); }


/* ── the left column follows while the right one scrolls, like the driver's phone ── */
.cw-led-col { position: sticky; top: 96px; align-self: start; }

.cw-why-stage { position: sticky; top: 96px; align-self: start; }

.mobile-frame .cw-led-col, .cw-narrow .cw-led-col, .mobile-frame .cw-why-stage, .cw-narrow .cw-why-stage { position: static; top: auto; }


/* ── 5/6. this case wears pink, so the site's default blue does not sit inside its widgets ──
   The token is re-bound locally, not changed at the root, so every other case keeps its blue. */
.cw[data-widget="driver"], .cw[data-widget="ledger"], .cw[data-key="ncaBuild"] {
  --accent-2: #e0399b;
  --accent-2-100: color-mix(in srgb, #e0399b 13%, var(--bg));
}


/* ── 7/8. the boards' opening paragraph is a lead, not a headline ── */
.cw[data-key^="nca"] .cw-bd-split-l .cw-bd-lead { font-weight: 500; }


/* the board's list numbers are proportional, so 01 and 02 are different widths and the text column drifts 2px */
.cw[data-key^="nca"] .cw-bd-num .cw-bd-n { font-variant-numeric: tabular-nums; }


/* ── touch: a few controls were under the 28px the rest of the page keeps ── */
.mobile-frame .cw-drv .cw-tab, .cw-narrow .cw-drv .cw-tab { min-height: 34px; }

/* the shelf hotspots sit inside a product mock, so the box cannot grow; the hit area grows instead */
.mobile-frame .cw-why-r::before, .cw-narrow .cw-why-r::before { content: ''; position: absolute; inset: -6px -3px; border-radius: 9px; }
@media (prefers-reduced-motion: reduce) {
 .cw-why-in { animation: none; }
 .cw-pl-path { stroke-dashoffset: 0; animation: none !important; }
 .cw-pl-back, .cw-pl-backt { opacity: 1; animation: none !important; }
 .cw-app-chart, .cw-app-chart u, .cw-app-found { animation: none; }
 .cw-app-places li:not(.ok) svg { animation: none; }

  .cw-vis-made .cw-mk > * { opacity: 1; }

  .cw-in .cw-vis-made .cw-mk > *, .cw-in .cw-vis-made .cw-mk-tick, .cw-in .cw-vis-made .cw-mk-tick::after,
  .cw-in .cw-vis-made .cw-mk-dot::after, .cw-in .cw-vis-made .cw-mk-van, .cw-in .cw-vis-made .cw-mk-fill, .cw-in .cw-vis-made .cw-mk-van svg { animation: none !important; }

  .cw-vis-made .cw-mk-fill { transform: scaleX(1); }
 .cw-vis-made .cw-mk-van { left: 94%; }
 .cw-vis-made .cw-mk-van svg:last-child { opacity: 1; }

  .cw-vis-made .cw-mk-tick { background: var(--case-ac, var(--primary)); border-color: var(--case-ac, var(--primary)); }

  .cw-vis-made .cw-mk-tick::after { opacity: 1; }
}
@media (min-width: 1400px) {
 .desktop-frame .cw-vis { width: calc(100% + 360px); margin-left: -180px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
 .desktop-frame .cw-vis { width: calc(100% + 200px); margin-left: -100px; }
}
@media (max-width: 900px) {

  .cw-vis-tbl { grid-template-columns: 1fr; column-gap: 0; row-gap: 12px; }

  .cw-vis-h, .cw-vis-j { display: none; }

  .cw-vis-c.usual { padding-top: 12px; border-top: 1px solid var(--border); }

  .cw-vis-c.found p::before { content: 'but'; margin-right: 0.35em; font-style: italic; color: var(--case-ac, var(--primary)); }

  .cw-vis-made { grid-row: auto !important; grid-column: auto; }
 .cw-led-col, .cw-why-stage { position: static; top: auto; }
}

/* ───────── SOLO LIVE REVAMP + SAPI PAGE (24 Sep 2026) ─────────
   the explored console options, the bench story strip, the setups switch, the paired metrics, a laptop, and the
   company-by-company page (map, chapters, logos) with the About page's Experience rows leading into it */

/* ── live console, option 1: six metric tiles in an 80px header (Figma 289:30281). Raw console palette on purpose ── */
.cw-lc[data-top="1"] .lc-head { height: 80px; padding: 16px; gap: 120px; }
.lc-head-top .lc-mode { height: 32px; padding: 0 12px !important; font-size: 14px !important; font-weight: 500 !important; }
.lc-toptiles { flex: 1; min-width: 0; display: flex; gap: 8px; }
.lc-toptiles .lc-tile { flex: 1 1 0; min-width: 0; height: 48px; padding: 2px 12px 4px; gap: 0; border-radius: 4px; background: #f5f5f5; cursor: default; }
.lc-toptiles .lc-tile span { display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 18px; font-weight: 500; color: var(--t4); white-space: nowrap; }
.lc-toptiles .lc-tile b { font-size: 16px; line-height: 1.3; font-weight: 600; }
.lc-toptiles .lc-tile-more { flex: none; justify-content: center; }
.lc-toptiles .lc-tile-more span { font-size: 12px; color: var(--t2); }
.cw-lc[data-top="1"][data-layout="preview"] .lc-main { grid-template-columns: 515fr 410fr 515fr; grid-template-rows: auto minmax(0, 1fr); }
.cw-lc[data-top="1"] .lc-dhead, .cw-lc[data-top="1"] .lc-data .lc-tiles { display: none; }

/* ── live console, option 2 (Figma 292:35764): products move to a full-height right column, video + activity on the
      left, data + chat in the middle. Keeps data-layout="ops" so every Solo mode style still applies ── */
.cw-lc[data-swap="1"] .lc-head { height: 48px; }
.cw-lc[data-swap="1"] .lc-mode, .cw-lc[data-swap="1"] .lc-mode + .lc-vr { display: none; }
.cw-lc[data-swap="1"] .lc-main { grid-template-columns: 428fr 430fr 576fr; grid-template-rows: 262px minmax(0, 1fr); grid-template-areas: "video data prod" "act chat prod"; }
.cw-lc[data-swap="1"] .lc-col { display: contents; }
.cw-lc[data-swap="1"] .lc-products { grid-area: prod; } .cw-lc[data-swap="1"] .lc-video { grid-area: video; }
.cw-lc[data-swap="1"] .lc-data { grid-area: data; } .cw-lc[data-swap="1"] .lc-chat { grid-area: chat; } .cw-lc[data-swap="1"] .lc-activity { grid-area: act; }

/* ── explore: the options side by side as tabs, each with its reasons as a three-column strip ── */
.cw-ex { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 8px 0; }
.cw-ex-tab { display: inline-flex; align-items: center; gap: 6px; }
.cw-ex-tab i { display: grid; place-items: center; width: 16px; height: 16px; }
.cw-ex-tab i svg { width: 14px; height: 14px; }
.cw-ex-tab.no i { color: var(--primary); } .cw-ex-tab.yes i { color: var(--case-ac, var(--text)); }
.cw-ex-opt { display: none; width: 100%; flex-direction: column; gap: 12px; }
.cw-ex-opt.on { display: flex; }
.cw-ex-stage { border-radius: 10px; overflow: hidden; background: #e4e4e4; box-shadow: 0 0 0 1px var(--border); } /* console grey, as in the product */
.cw-ex-live { position: relative; aspect-ratio: 1440 / 800; overflow: hidden; }
.cw-ex-task { margin: 0; font-size: 13px; line-height: 20px; color: var(--text-300); }
.cw-ex-head { margin: 6px 0 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text); }
.cw-ex-why ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cw-ex-why li { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-ex-why li b { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text); }
.cw-ex-why.no li b { color: var(--primary); } .cw-ex-why.yes li b, .cw-ex-why li.keep b { color: var(--case-ac, var(--text)); }

/* ── bench: problem, change, why, above each running stage; the prep lanes get a header and a caption per row ── */
.cw-bn-head .cw-bn-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; max-width: none; }
.cw-bn-story > div { padding-top: 10px; border-top: 1px solid var(--border); }
.cw-bn-story b { display: block; margin-bottom: 4px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--case-ac, var(--text)); }
.cw-bn-head .cw-bn-story p { margin: 0; font-size: 14px; line-height: 22px; color: var(--text-300); max-width: none; }
.cw-bn-lanes .cw-bn-lane { grid-template-columns: 56px minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.3fr); }
.cw-bn-lane > em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--text-300); }
.cw-bn-lane.hd { font-size: 11px; line-height: 14px; color: var(--text-300); }
.cw-bn-lane.hd i { height: auto; font-style: normal; } .cw-bn-lane.hd > b { visibility: hidden; }
.cw-bn-lanes .cw-bn-lane.hd i { opacity: 1; }
:is(.mobile-frame, .cw-narrow) .cw-bn-lane > em { display: none; }

/* ── boards: the key action in a finding reads in the board accent ── */
.cw-bd-num em.act { font-style: normal; font-weight: 600; color: var(--bd-ac); }

/* ── setups: a switch on a scene's drawing (scene.alt), e.g. the phone flipped to its rear camera ── */
.cw-sx-row .cw-su-stage { position: relative; }
.cw-sx-flip { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 0; border-radius: 999px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--border), 0 2px 6px rgba(0,0,0,0.06); cursor: pointer; font: 600 12px/18px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-sx-flip i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--border); transition: background 0.2s ease; }
.cw-sx-flip i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-sx-flip[aria-checked="true"] i { background: var(--case-ac, var(--text)); }
.cw-sx-flip[aria-checked="true"] i::after { transform: translateX(12px); }
.mobile-frame .cw-sx-flip { top: 8px; right: 8px; font-size: 11px; padding: 4px 10px 4px 5px; }

/* ── metrics, layout 'pair': two (or more) leads side by side, each at display size ── */
.cw-ka.cw-ka-pair { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); align-items: start; gap: 48px; }
:is(.mobile-frame, .cw-narrow) .cw-ka.cw-ka-pair { grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* ── a case dropdown that holds HTML (dropdown.html): the laptop, then a paragraph ── */
.case-dropdown-html { display: flex; flex-direction: column; gap: 16px; padding: 12px 24px 20px; }
.case-dropdown-html .case-p { margin: 0; }
.mobile-frame .case-dropdown-html { padding: 8px 12px 16px; }

/* ── laptop: one screenshot in a laptop. Lid and base are hardware, dark in both themes on purpose ── */
.cw-lt { margin: 8px 0; }
.cw-lt-lid { margin: 0 5%; padding: 2.2% 2.2% 2.8%; border-radius: 16px 16px 0 0; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09), 0 18px 50px rgba(0,0,0,0.14); }
.cw-lt-lid img { display: block; width: 100%; height: auto; border-radius: 3px; cursor: zoom-in; }
.cw-lt-base { position: relative; height: 14px; margin: 0 1%; border-radius: 0 0 16px 16px / 0 0 12px 12px; background: linear-gradient(#e2e2e5, #b4b4b9); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }
.cw-lt-base i { position: absolute; left: 50%; top: 0; width: 13%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #a2a2a8; }
.cw-lt .cw-caption { margin-top: 14px; }
.mobile-frame .cw-lt-lid { margin: 0 3%; border-radius: 10px 10px 0 0; }
.mobile-frame .cw-lt-base { height: 9px; margin: 0; }

/* ── capmap: skills by company. A name or a dot pins a skill; the caption then says how many lines it marked ── */
.cw-cm { display: flex; flex-direction: column; margin: 4px 0 12px; }
.cw-cm-row { display: grid; grid-template-columns: minmax(170px, 1.7fr) repeat(var(--n), 1fr); align-items: center; min-height: 38px; border-bottom: 1px solid var(--border); transition: background 0.2s ease; }
.cw-cm-top { align-items: end; min-height: 56px; padding-bottom: 8px; border-bottom-color: var(--text-300); }
.cw-cm-co { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); text-align: center; }
.cw-cm-co b { font-size: 14px; line-height: 20px; font-weight: 600; }
.cw-cm-co small { font-size: 12px; line-height: 16px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-cm-co:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cw-cm-sk { justify-self: start; padding: 4px 12px 4px 0; border: 0; background: none; cursor: pointer; text-align: left; font: 400 14px/20px 'Plus Jakarta Sans', sans-serif; color: var(--text);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease; }
.cw-cm-sk:hover { text-decoration-color: var(--text-300); }
.cw-cm-dot { justify-self: center; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.cw-cm-dot i { width: 12px; height: 12px; border-radius: 50%; background: var(--case-ac, var(--accent-2)); transform: scale(0); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, box-shadow 0.2s ease; transition-delay: calc(var(--i, 0) * 40ms), 0s, 0s; }
.cw-cm.in .cw-cm-dot i { transform: scale(1); }
.cw-cm.in .cw-cm-dot:hover i, .cw-cm.in .cw-cm-row.hot .cw-cm-dot i, .cw-cm.in .cw-cm-row.on .cw-cm-dot i { transform: scale(1.35); transition-delay: 0s; }
.cw-cm.has-pin .cw-cm-row[data-sk]:not(.on) .cw-cm-dot i { opacity: 0.3; }
.cw-cm-dot.at i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--case-ac, var(--accent-2)) 22%, transparent); }
.cw-cm-no { justify-self: center; width: 8px; height: 1px; background: var(--border); }
.cw-cm-row.hot { background: color-mix(in srgb, var(--case-ac, var(--accent-2)) 6%, transparent); }
.cw-cm-row.on { background: color-mix(in srgb, var(--case-ac, var(--accent-2)) 11%, transparent); }
.cw-cm-row.on .cw-cm-sk { font-weight: 600; }
.cw-cm .cw-caption { margin-top: 12px; }
.cw-cm-say b { color: var(--text); font-weight: 600; }
.cw-cm-clear { margin-left: 4px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── chapter: one company. Lines open their skill tags on hover, tap or focus; a pinned skill marks its lines ── */
.cw-ch { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 8px; }
.cw-ch-list { list-style: none; margin: 0; padding: 0; }
.cw-ch-it { display: flex; flex-direction: column; margin: 0 -12px; padding: 12px; border-radius: 8px; cursor: pointer; outline: none; transition: background 0.25s ease; }
.cw-ch-it + .cw-ch-it { border-top: 1px solid var(--border); border-radius: 0; }
.cw-ch-it p { margin: 0; font-size: 15px; line-height: 24px; color: var(--text); }
.cw-ch-it { position: relative; }
.cw-ch-it.has-go { padding-right: 48px; }
.cw-ch-go { text-decoration: none !important; background-image: none !important; border: 0; position: absolute; top: 12px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-300); transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.cw-ch-go svg { width: 16px; height: 16px; }
.cw-ch-go:hover, .cw-ch-go:focus-visible { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); transform: translateX(2px); }
.cw-ch-tags { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
.cw-ch-tags > span { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; gap: 6px; }
.cw-ch-it:hover .cw-ch-tags, .cw-ch-it:focus-visible .cw-ch-tags, .cw-ch-it.open .cw-ch-tags, .cw-ch-it.on .cw-ch-tags { grid-template-rows: 1fr; opacity: 1; }
.cw-ch-tag { margin-top: 8px; padding: 1px 9px; border: 0; border-radius: 999px; background: var(--surface); cursor: pointer; font: 400 12px/18px 'Plus Jakarta Sans', sans-serif; color: var(--text-300); transition: background 0.2s ease, color 0.2s ease; }
.cw-ch-tag:hover { color: var(--text); }
.cw-ch-tag.hit { background: var(--case-ac, var(--accent-2)); color: var(--bg); }
.cw-ch-it:hover, .cw-ch-it:focus-visible { background: color-mix(in srgb, var(--text) 3%, transparent); }
.cw-ch-it.lit { background: color-mix(in srgb, var(--case-ac, var(--accent-2)) 8%, transparent); }
.cw-ch-it.on { background: color-mix(in srgb, var(--case-ac, var(--accent-2)) 11%, transparent); }
.cw-ch-work { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 6px; }
.cw-ch-work .work-card { width: auto !important; min-width: 0; }
.cw-ch .cw-caption { margin: 0; }

/* ── company logos: brand marks sit on white in both themes, like app icons ── */
.co-logo { display: block; flex: none; width: 48px; height: 48px; box-sizing: border-box; padding: 6px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(0,0,0,0.06); object-fit: contain; }
.co-logo.full { padding: 0; }
.case-h2 .co-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case-h2 .co-name small { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-300); letter-spacing: 0; }
.case-h2:has(> .co-logo) { display: flex; align-items: center; gap: 16px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); font-size: 28px; line-height: 36px; }
.cw-cm-co .co-logo { width: 32px; height: 32px; padding: 4px; border-radius: 9px; margin-bottom: 6px; box-shadow: 0 0 0 1px var(--border); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-cm-co .co-logo.full { padding: 0; }
.cw-cm-co:hover .co-logo { transform: translateY(-2px); }

/* ── About page, Experience: rows open that company's chapter; hover shows its skills from the map ── */
.experience-item.exp-link { margin: -8px -12px; padding: 8px 12px; border-radius: 10px; cursor: pointer; outline: none; transition: background 0.2s ease; }
.experience-item.exp-link:hover, .experience-item.exp-link:focus-visible { background: color-mix(in srgb, var(--text) 4%, transparent); }
.exp-tags { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; }
.exp-tags > span { min-height: 0; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.exp-link:hover .exp-tags, .exp-link:focus-visible .exp-tags { grid-template-rows: 1fr; opacity: 1; }
.exp-tags i { margin-top: 6px; padding: 1px 9px; border-radius: 999px; background: var(--bg); font-style: normal; font-size: 12px; line-height: 18px; color: var(--text-300); }
.exp-tags em { margin-top: 6px; margin-left: 4px; font-style: normal; font-size: 12px; line-height: 18px; color: var(--text); }

/* ── mobile frame ── */
.mobile-frame .cw-ex-why ol, .mobile-frame .cw-bn-head .cw-bn-story, .mobile-frame .cw-ch-work { grid-template-columns: 1fr; }
.mobile-frame .cw-bn-head .cw-bn-story { gap: 12px; }
.mobile-frame .cw-cm-row { grid-template-columns: minmax(104px, 1.3fr) repeat(var(--n), 1fr); min-height: 36px; }
.mobile-frame .cw-cm-sk { font-size: 12px; line-height: 16px; padding-right: 6px; }
.mobile-frame .cw-cm-co b { font-size: 11px; line-height: 14px; }
.mobile-frame .cw-cm-co small { display: none; }
.mobile-frame .cw-cm-dot { width: 26px; height: 26px; }
.mobile-frame .cw-cm-dot i { width: 10px; height: 10px; }
.mobile-frame .cw-ex-tab { font-size: 11px; padding: 3px 9px; }
.mobile-frame .cw-ex .cw-tabs { display: flex; flex-wrap: wrap; max-width: 100%; border-radius: 16px; }
.mobile-frame .case-h2:has(> .co-logo) { gap: 12px; margin-top: 40px; padding-top: 28px; font-size: 22px; line-height: 30px; }
.mobile-frame .case-h2 .co-logo { width: 40px; height: 40px; border-radius: 11px; padding: 5px; }
.mobile-frame .case-h2 .co-logo.full { padding: 0; }
.mobile-frame .case-h2 .co-name small { font-size: 13px; line-height: 18px; }
.mobile-frame .cw-cm-co .co-logo { width: 24px; height: 24px; padding: 3px; border-radius: 7px; margin-bottom: 4px; }
.mobile-frame .cw-cm-co .co-logo.full { padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .cw-cm-dot i, .cw-ch-tags, .exp-tags { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ═══ NEST · Tokopedia NEST design principles (case-tokopedia-nest) ═══
   The deck cards (#212121 ink, white question cards) and the doc's pastel boxes (#fff1ba scope, #c5fcff deliverable,
   #c9fde0 pattern, #e4ebf5 step) are printed objects from the Tokopedia doc: raw hex on purpose, same in both themes.
   The four principle hues arrive as --nx (green / blue / purple / orange, Tokopedia's own). Everything else is tokens. */
.cw-nx-pc { position: relative; width: 160px; height: 240px; border-radius: 12px; background: #212121; color: #fff; overflow: hidden; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; font-family: 'Plus Jakarta Sans', sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.18); }
/* the corner artwork is the card's own (Figma 292:32641 and siblings), placed at its frame coordinates in % of a 160×240 card */
.cw-nx-pc::before { content: ''; position: absolute; left: 19.75%; top: -30.53%; width: 122.75%; aspect-ratio: 196.4 / 176.64; background: url('./assets/nest/card-dark.svg') no-repeat 0 0 / 100% 100%; pointer-events: none; }
.cw-nx-pc.cover::before { left: 26%; top: -40.4%; width: 137.75%; aspect-ratio: 220.4 / 195.78; background-image: url('./assets/nest/card-cover.svg'); z-index: 1; }
.cw-nx-pc-k { font-size: 8px; line-height: 10px; color: rgba(255,255,255,0.55); display: flex; flex-direction: column; }
.cw-nx-pc-k b { font-weight: 800; color: rgba(255,255,255,0.8); }
.cw-nx-pc-t { margin-top: 50px; font-size: 18px; line-height: 20px; font-weight: 800; }
.cw-nx-pc-s { margin-top: 10px; font-size: 8px; line-height: 11px; color: rgba(255,255,255,0.55); }
.cw-nx-pc-f { margin-top: auto; font-size: 8px; font-weight: 800; color: #fefefe; }
.cw-nx-pc.cover { background: #fff; color: #212121; }
.cw-nx-pc.cover::after { content: ''; position: absolute; inset: 0 0 36px; background: #212121; z-index: 0; }
.cw-nx-pc.cover > * { position: relative; z-index: 1; }
.cw-nx-pc.cover .cw-nx-pc-k { visibility: hidden; }
.cw-nx-pc.cover .cw-nx-pc-t { color: #fff; order: 2; margin-top: 4px; }
.cw-nx-pc.cover .cw-nx-pc-s { color: #fff; order: 1; margin-top: 62px; text-transform: uppercase; }
.cw-nx-pc.cover .cw-nx-pc-f { order: 3; color: #212121; }

/* hero */
.cw-nx-glow { left: -30cqw; top: -45cqw; width: 95cqw; height: 95cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,170,91,0.55), rgba(0,170,91,0) 100%); filter: blur(2cqw); pointer-events: none; }
.cw-nx-fan { right: 6cqw; top: 50%; width: 46cqw; height: 26cqw; transform: translateY(-50%); }
.cw-nx-fan .cw-nx-pc { position: absolute; left: 50%; top: 50%; width: 11.5cqw; height: 17.25cqw; padding: 0.85cqw; border-radius: 0.85cqw; margin: -8.6cqw 0 0 -5.75cqw; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(calc((var(--i) - 2) * 9.4cqw)) rotate(calc((var(--i) - 2) * 4deg)) translateY(calc(var(--d) * 0.9cqw)); }
.cw-nx-fan .cw-nx-pc:nth-child(1) { --i: 0; --d: 4; } .cw-nx-fan .cw-nx-pc:nth-child(2) { --i: 1; --d: 1; } .cw-nx-fan .cw-nx-pc:nth-child(3) { --i: 2; --d: 0; }
.cw-nx-fan .cw-nx-pc:nth-child(4) { --i: 3; --d: 1; } .cw-nx-fan .cw-nx-pc:nth-child(5) { --i: 4; --d: 4; }
.cw-nx-hero:hover .cw-nx-fan .cw-nx-pc { transform: translateX(calc((var(--i) - 2) * 10.6cqw)) rotate(calc((var(--i) - 2) * 2.5deg)) translateY(calc(var(--d) * 0.4cqw - 0.6cqw)); }
.cw-nx-fan .cw-nx-pc-k { font-size: 0.6cqw; line-height: 0.75cqw; }
.cw-nx-fan .cw-nx-pc-t { margin-top: 3.4cqw; font-size: 1.25cqw; line-height: 1.4cqw; }
.cw-nx-fan .cw-nx-pc-s { margin-top: 0.7cqw; font-size: 0.6cqw; line-height: 0.8cqw; }
.cw-nx-fan .cw-nx-pc.cover .cw-nx-pc-s { margin-top: 4.3cqw; }
.cw-nx-fan .cw-nx-pc.cover::after { bottom: 2.4cqw; }
.cw-nx-fan .cw-nx-pc-f { font-size: 0.6cqw; }

/* credits + brief */
.cw-nx-cred { margin: 0; border: 1px solid var(--border); border-radius: 12px; padding: 6px 0; }
.cw-nx-cred > div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 8px 16px; align-items: baseline; }
.cw-nx-cred dt { font-size: 14px; color: var(--text-300); }
.cw-nx-cred dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cw-nx-cred dd span { font-size: 13px; line-height: 20px; padding: 2px 8px; border-radius: 12px; background: var(--surface); color: var(--text); }
.cw-nx-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cw-nx-brief section { background: var(--surface); border-radius: 14px; padding: 16px 16px 14px; }
.cw-nx-brief h4 { margin: 0 0 10px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--text); }
.cw-nx-brief ol { margin: 0; padding-left: 18px; }
.cw-nx-brief li { font-size: 13.5px; line-height: 20px; color: var(--text-300); margin: 0 0 6px; }
.cw-nx-brief li b { color: var(--text); }

/* timeline */
.cw-nx-tl-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.cw-nx-tl-rail::before { content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: var(--border); }
.cw-nx-tl-b { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; width: 100%; padding-right: 10px; position: relative; }
.cw-nx-tl-b i { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); box-sizing: border-box; margin-bottom: 10px; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.cw-nx-tl-b.past i, .cw-nx-tl-b.on i { background: var(--case-ac, var(--primary)); border-color: var(--case-ac, var(--primary)); }
.cw-nx-tl-b.on i { transform: scale(1.25); }
.cw-nx-tl-b i.live { border-style: dashed; }
.cw-nx-tl-b em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-300); }
.cw-nx-tl-b b { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text-300); transition: color 0.2s; }
.cw-nx-tl-b.on b { color: var(--text); }
.cw-nx-tl-b small { font-size: 11.5px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-nx-tl-b:focus-visible { outline: 2px solid var(--case-ac, var(--primary)); outline-offset: 4px; border-radius: 6px; }
.cw-nx-tl-d { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--surface); min-height: 112px; box-sizing: border-box; }
.cw-nx-tl-d > b { font-size: 16px; color: var(--text); }
.cw-nx-tl-dd { margin-left: 10px; font-size: 12.5px; color: var(--text-300); }
.cw-nx-tl-d p, .cw-nx-tl-d li { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-nx-tl-d ul { margin: 0; padding-left: 18px; }

/* scope */
.cw-nx-scope { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.cw-nx-scope svg { width: 100%; height: auto; display: block; color: var(--text-300); overflow: visible; }
.cw-nx-sn circle { fill: #0094cf; transition: fill 0.3s, opacity 0.3s; }
.cw-nx-sn.root circle { fill: #28c3ea; }
.cw-nx-sn text { fill: #fff; font: 700 12.5px/1 'Plus Jakarta Sans', sans-serif; text-anchor: middle; pointer-events: none; }
.cw-nx-se line { stroke: currentColor; stroke-width: 1.5; transition: stroke 0.3s, opacity 0.3s; }
.cw-nx-se text { fill: currentColor; font: 500 11px 'Plus Jakarta Sans', sans-serif; text-anchor: middle; }
.cw-nx-scope svg:has(.on) .cw-nx-se:not(.on) { opacity: 0.25; }
.cw-nx-scope svg:has(.on) .cw-nx-sn:not(.on) circle { opacity: 0.35; }
.cw-nx-se.on { color: var(--text); }
.cw-nx-scope-l { margin: 0; padding-left: 20px; }
.cw-nx-scope-l li { font-size: 14px; line-height: 22px; color: var(--text-300); margin-bottom: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background 0.2s, color 0.2s; outline: none; }
.cw-nx-scope-l li.on { background: var(--surface); color: var(--text); }

/* tracker */
.cw-nx-tr-scroll { overflow-x: auto; border-radius: 14px; background: var(--surface); outline: none; }
.cw-nx-tr table { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 12px; }
.cw-nx-tr th, .cw-nx-tr td { padding: 7px 6px; text-align: center; font-weight: 500; color: var(--text); white-space: nowrap; transition: background 0.15s; }
.cw-nx-tr thead th { font-size: 11px; font-weight: 700; color: var(--text-300); padding-top: 12px; white-space: normal; line-height: 14px; vertical-align: bottom; }
.cw-nx-tr th[scope="row"], .cw-nx-tr thead th:first-child { text-align: left; padding-left: 14px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.cw-nx-tr tr.g th { text-align: left; padding: 12px 14px 4px; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; color: var(--text-300); }
.cw-nx-tr .col { background: color-mix(in srgb, var(--text) 5%, transparent); }
.cw-nx-tr td.dt { font-weight: 700; font-variant-numeric: tabular-nums; padding-right: 14px; }
.cw-nx-st { display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 16px; padding: 2px 8px; border-radius: 10px; }
.cw-nx-st.done { background: #0a6b43; color: #fff; }
.cw-nx-st.ongoing { background: #3fd68f; color: #06331f; }
.cw-nx-st.skipped { color: var(--text-300); padding: 2px 0; font-weight: 600; }
.cw-nx-st.next { color: var(--text-300); box-shadow: inset 0 0 0 1px var(--border); font-weight: 600; }

/* notes */
.cw-nx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cw-nx-chips button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 500; color: var(--text); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.cw-nx-chips button i { width: 8px; height: 8px; border-radius: 50%; background: var(--nx); }
.cw-nx-chips button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.cw-nx-chips button:focus-visible { outline: 2px solid var(--case-ac, var(--primary)); outline-offset: 2px; }
.cw-nx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 16px; padding: 22px; border-radius: 16px; background: var(--surface); }
.cw-nx-note { margin: 0; background: #fffae6; color: #212121; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.06); transform: rotate(var(--r)) translateY(10px); opacity: 0; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s, filter 0.3s; }
.cw-nx-board.in .cw-nx-note { opacity: 1; transform: rotate(var(--r)); }
.cw-nx-board.in .cw-nx-note:nth-child(2) { transition-delay: 0.06s, 0.06s, 0s; } .cw-nx-board.in .cw-nx-note:nth-child(3) { transition-delay: 0.12s, 0.12s, 0s; }
.cw-nx-board.in .cw-nx-note:nth-child(4) { transition-delay: 0.18s, 0.18s, 0s; } .cw-nx-board.in .cw-nx-note:nth-child(5) { transition-delay: 0.24s, 0.24s, 0s; } .cw-nx-board.in .cw-nx-note:nth-child(6) { transition-delay: 0.3s, 0.3s, 0s; }
.cw-nx-note figcaption { background: #ffdd7f; font-size: 11px; font-weight: 800; padding: 4px 10px; }
.cw-nx-note p { margin: 0; padding: 8px 10px 12px; font-size: 13px; line-height: 19px; }
.cw-nx-note p b { color: var(--nx); font-weight: 800; }
.cw-nx-board.filtered .cw-nx-note:not(.hit) { opacity: 0.3; filter: grayscale(1); }
.cw-nx-board.filtered .cw-nx-note.hit { transform: rotate(0deg) scale(1.03); transition-delay: 0s; }

/* uses */
.cw-nx-uses { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.cw-nx-uses-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-nx-uses-l button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-300); transition: background 0.2s, color 0.2s; }
.cw-nx-uses-l button i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface); color: var(--text-300); flex: none; transition: background 0.2s, color 0.2s; }
.cw-nx-uses-l button.on { background: var(--surface); color: var(--text); }
.cw-nx-uses-l button.on i { background: var(--case-ac, var(--primary)); color: #fff; }
.cw-nx-uses-l button:focus-visible { outline: 2px solid var(--case-ac, var(--primary)); }
.cw-nx-uses-d { background: var(--surface); border-radius: 16px; padding: 18px 20px; min-height: 250px; box-sizing: border-box; }
.cw-nx-uses-d small, .cw-nx-deck-h small, .cw-nx-deck-q, .cw-nx-df-m small { display: block; font-size: 12px; font-weight: 600; color: var(--text-300); }
.cw-nx-uses-d ul { margin: 8px 0 0; padding-left: 18px; }
.cw-nx-uses-d li { font-size: 14.5px; line-height: 23px; color: var(--text); }
.cw-nx-uses-d blockquote { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 14px; line-height: 22px; color: var(--text-300); font-style: italic; }

/* def */
.cw-nx-def { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cw-nx-df { position: relative; background: var(--surface); border-radius: 16px; padding: 18px 18px 16px; display: flex; flex-direction: column; opacity: 0; transform: translateY(12px); transition: opacity 0.5s calc(var(--i) * 0.08s), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 0.08s); }
.cw-nx-def.in .cw-nx-df { opacity: 1; transform: none; }
.cw-nx-df-n { font: 500 13px 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text-300); }
.cw-nx-df-t { margin-top: 18px; font-size: 22px; line-height: 28px; font-weight: 800; color: var(--nx); }
.cw-nx-df-s { margin: 8px 0 16px; font-size: 15px; line-height: 23px; font-weight: 600; color: var(--text); }
.cw-nx-df-m { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.cw-nx-df-m p { margin: 4px 0 8px; font-size: 13.5px; line-height: 20px; color: var(--text-300); }
.cw-nx-df-m span { display: flex; flex-wrap: wrap; gap: 5px; }
.cw-nx-df-m i { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--bg); color: var(--text); }

/* doc boxes shared by system + touch */
.cw-nx-box { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; border-radius: 10px; font-size: 12px; line-height: 15px; font-weight: 700; color: #212121; box-sizing: border-box; }
.cw-nx-box.y { background: #fff1ba; } .cw-nx-box.c { background: #c5fcff; } .cw-nx-box.g { background: #c9fde0; } .cw-nx-box.n { background: #e4ebf5; }

/* system */
.cw-nx-sys { background: var(--surface); border-radius: 16px; padding: 18px; }
.cw-nx-sys-lab { display: flex; flex-direction: column; font-size: 11.5px; line-height: 15px; color: var(--text-300); }
.cw-nx-sys-lab b { font-size: 13px; color: var(--text); }
.cw-nx-sys-soul { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.cw-nx-sys-soul .cw-nx-box { justify-self: center; padding: 12px 24px; }
.cw-nx-sys-grid { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; padding-top: 14px; }
.cw-nx-sys-lab.r2 { grid-column: 1; grid-row: 1; padding-top: 30px; } .cw-nx-sys-lab.r3 { grid-column: 1; grid-row: 2; }
.cw-nx-sys-spec { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; padding-top: 24px; }
.cw-nx-sys-down { flex: 1; min-height: 24px; width: 2px; margin: 4px auto; background: var(--text-300); }
.cw-nx-sys-gen { grid-column: 3; grid-row: 1 / 3; background: #212121; border-radius: 12px; padding: 8px 10px 12px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; position: relative; }
.cw-nx-sys-gen em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; }
.cw-nx-sys-col { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; outline: none; transition: opacity 0.2s; }
.cw-nx-sys-col > .cw-nx-box { margin-bottom: 14px; }
.cw-nx-sys-items { display: flex; flex-direction: column; gap: 6px; }
.cw-nx-sys-items .cw-nx-box { font-size: 11px; line-height: 14px; font-weight: 600; min-height: 44px; }
.cw-nx-sys-gen:has(.cw-nx-sys-col:hover, .cw-nx-sys-col:focus) .cw-nx-sys-col:not(:hover):not(:focus) { opacity: 0.35; }
.cw-nx-sys-loop { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; font-size: 12.5px; line-height: 18px; color: var(--text-300); }
.cw-nx-sys-loop span { display: inline-flex; align-items: center; gap: 8px; }
.cw-nx-sys-loop i { width: 22px; height: 2px; flex: none; }
.cw-nx-sys-loop .use i { background: #00aa5b; } .cw-nx-sys-loop .create i { background: #f94d63; }

/* touch */
.cw-nx-touch { background: var(--surface); border-radius: 16px; padding: 16px 18px 18px; }
.cw-nx-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 0; }
.cw-nx-lane + .cw-nx-lane:not(.branch) { border-top: 1px dashed var(--border); }
.cw-nx-lane-t { font-size: 13px; font-weight: 700; color: var(--text); }
.cw-nx-lane ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cw-nx-lane li { position: relative; min-height: 54px; transition: opacity 0.3s, filter 0.3s; }
.cw-nx-lane li + li::before { content: ''; position: absolute; left: -13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1.5 6.5 5 3 8.5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cw-nx-lane.branch .cw-nx-lane-t { visibility: hidden; }
.cw-nx-lane.branch li:first-child { grid-column: 2; }
.cw-nx-lane li.off { opacity: 0.2; filter: grayscale(1); }
.cw-nx-touch-say { margin: 6px 0 0; font-size: 13.5px; line-height: 20px; color: var(--text); min-height: 40px; }

/* deck */
.cw-nx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cw-nx-tabs button { all: unset; cursor: pointer; border-radius: 12px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s; opacity: 0.55; }
.cw-nx-tabs button:hover { opacity: 0.85; }
.cw-nx-tabs button.on { opacity: 1; transform: translateY(-4px); }
.cw-nx-tabs button:focus-visible { outline: 2px solid var(--nx); outline-offset: 3px; }
.cw-nx-pc.mini { width: 100%; height: auto; aspect-ratio: 16 / 11; box-shadow: none; }
.cw-nx-pc.mini .cw-nx-pc-t { margin-top: auto; font-size: 17px; }
.cw-nx-pc.mini .cw-nx-pc-s { display: none; }
.cw-nx-pc.mini .cw-nx-pc-f { margin-top: 8px; color: var(--nx); }
.cw-nx-pc.mini::before { left: 46%; top: -38%; width: 70%; }
.cw-nx-tabs button.on .cw-nx-pc { box-shadow: inset 0 -3px 0 var(--nx); }
.cw-nx-deck-b { background: var(--surface); border-radius: 16px; padding: 18px; }
.cw-nx-deck-h p { margin: 4px 0 6px; font-size: 18px; line-height: 26px; font-weight: 700; color: var(--text); }
.cw-nx-kw { font-size: 13px; font-weight: 600; color: var(--nx); }
.cw-nx-model { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 16px 0 18px; position: relative; }
.cw-nx-mn { flex: 1 1 140px; background: var(--bg); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cw-nx-mn > b { font-size: 13.5px; color: var(--text); }
.cw-nx-mn small { font-size: 11.5px; line-height: 15px; color: var(--text-300); }
.cw-nx-mn span { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cw-nx-mn i { font-style: normal; font-size: 11.5px; line-height: 16px; padding: 1px 7px; border-radius: 9px; background: color-mix(in srgb, var(--nx) 14%, transparent); color: var(--text); }
.cw-nx-arw { width: 16px; height: 16px; align-self: center; color: var(--nx); flex: none; }
.cw-nx-loop { flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--nx); text-align: center; padding-top: 2px; }
.cw-nx-deck-q { margin-bottom: 10px; }
.cw-nx-qs { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.cw-nx-qc { flex: none; width: 160px; height: 240px; border-radius: 12px; background: #fff; color: #212121; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 6px 16px rgba(0,0,0,0.08); position: relative; overflow: hidden; }
.cw-nx-qc::before { content: ''; position: absolute; left: 31.6px; top: -73.28px; width: 196.4px; height: 176.64px; background: no-repeat 0 0 / 100% 100%; pointer-events: none; }
.cw-nx-qc.k-relevant::before { background-image: url('./assets/nest/q-relevant.svg'); } .cw-nx-qc.k-reliable::before { background-image: url('./assets/nest/q-reliable.svg'); }
.cw-nx-qc.k-engaging::before { background-image: url('./assets/nest/q-engaging.svg'); } .cw-nx-qc.k-empowering::before { background-image: url('./assets/nest/q-empowering.svg'); }
.cw-nx-qc-k { display: flex; flex-direction: column; font-size: 8.5px; line-height: 11px; color: var(--nx); position: relative; }
.cw-nx-qc-k b { font-weight: 800; }
.cw-nx-qc-q { margin-top: 36px; font-size: 17px; line-height: 20px; font-weight: 800; position: relative; }
.cw-nx-qc-s { margin-top: 10px; font-size: 9px; line-height: 12px; color: #555; }
.cw-nx-qc-f { margin-top: auto; font-size: 8.5px; font-weight: 800; color: var(--nx); }
.cw-nx-deck-b.deal .cw-nx-qc { animation: cwNxDeal 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i) * 70ms); }
.cw-nx-deck-b.deal .cw-nx-model { animation: cwNxFade 0.4s ease backwards; }
@keyframes cwNxDeal { from { opacity: 0; transform: translateX(-40px) rotate(-6deg); } }
@keyframes cwNxFade { from { opacity: 0; } }

/* tribes: outlined chips, green = own principles, amber = the main four only, grey = not yet (the slide's legend) */
.cw-nx-tb-leg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cw-nx-tb-leg button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; color: var(--text); }
.cw-nx-tb-leg button b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cw-nx-tb-leg button i { width: 10px; height: 10px; border-radius: 3px; box-sizing: border-box; }
.cw-nx-tb-leg .own i { background: #00aa5b; } .cw-nx-tb-leg .main i { background: #ffc400; } .cw-nx-tb-leg .none i { border: 1.5px solid var(--text-300); }
.cw-nx-tb-leg button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.cw-nx-tb-leg button:focus-visible { outline: 2px solid var(--case-ac, var(--primary)); outline-offset: 2px; }
.cw-nx-tb-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px; border-radius: 16px; background: var(--surface); }
.cw-nx-tb-t { font-size: 13.5px; line-height: 20px; padding: 6px 12px; border-radius: 8px; background: var(--bg); color: var(--text-300); box-shadow: inset 0 0 0 1px var(--border); opacity: 0; transform: translateY(6px); transition: opacity 0.4s calc(var(--i) * 18ms), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i) * 18ms), filter 0.25s; }
.cw-nx-tb.in .cw-nx-tb-t { opacity: 1; transform: none; }
.cw-nx-tb-t.own { color: var(--text); box-shadow: inset 0 0 0 1.5px #00aa5b; font-weight: 600; }
.cw-nx-tb-t.main { color: var(--text); box-shadow: inset 0 0 0 1.5px #ffc400; font-weight: 600; }
.cw-nx-tb[data-only="own"] .cw-nx-tb-t:not(.own), .cw-nx-tb[data-only="main"] .cw-nx-tb-t:not(.main), .cw-nx-tb[data-only="none"] .cw-nx-tb-t:not(.none) { opacity: 0.25; filter: grayscale(1); transition-delay: 0s; }

/* frameworks: headline numbers, then the impact / hindrance matrix beside the ranked list, then the picked module */
.cw-nx-sc-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.cw-nx-sc-top div { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.cw-nx-sc-top b { font: 500 34px/1 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text); letter-spacing: -0.02em; }
.cw-nx-sc-top span { font-size: 13px; line-height: 18px; color: var(--text-300); }
.cw-nx-fw-b { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.cw-nx-fw-plot { position: relative; padding: 14px 18px 34px 40px; border-radius: 16px; background: var(--surface); }
.cw-nx-fw-plot .ay { position: absolute; left: 12px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.cw-nx-fw-plot .ax { position: absolute; left: 40px; right: 18px; bottom: 8px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text); }
.cw-nx-fw-area { position: relative; height: 250px; border-left: 1px solid var(--text-300); border-bottom: 1px solid var(--text-300);
  background: linear-gradient(var(--text-300), var(--text-300)) 0 var(--ai) / 100% 1px no-repeat, repeating-linear-gradient(to bottom, var(--text-300) 0 3px, transparent 3px 7px) var(--ah) 0 / 1px 100% no-repeat; }
.cw-nx-fw-area .gy, .cw-nx-fw-area .gx { position: absolute; font-style: normal; font-size: 10.5px; color: var(--text-300); font-variant-numeric: tabular-nums; }
.cw-nx-fw-area .gy { left: -16px; transform: translateY(-50%); } .cw-nx-fw-area .gx { bottom: -18px; transform: translateX(-50%); }
.cw-nx-fw-area .avg { position: absolute; font-size: 10.5px; color: var(--text-300); }
.cw-nx-fw-area .avg.i { right: 4px; top: var(--ai); transform: translateY(-120%); } .cw-nx-fw-area .avg.h { left: var(--ah); top: 2px; margin-left: 5px; }
.cw-nx-fw-pt { all: unset; cursor: pointer; position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-6px, -50%); opacity: 0; transition: opacity 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-nx-fw.in .cw-nx-fw-pt { opacity: 1; }
.cw-nx-fw-pt i { width: 12px; height: 12px; border-radius: 50%; background: #00aa5b; box-shadow: 0 0 0 2px var(--surface); flex: none; font-style: normal; font-size: 0; color: #fff; display: grid; place-items: center; }
.cw-nx-fw-pt span { font-size: 12px; font-weight: 600; line-height: 16px; padding: 3px 8px; border-radius: 7px; background: #00aa5b; color: #fff; white-space: nowrap; transform: translateY(var(--dy)); transition: background 0.2s, box-shadow 0.2s; }
.cw-nx-fw-pt.l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.cw-nx-fw-pt:hover span, .cw-nx-fw-pt:focus-visible span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #00aa5b; }
.cw-nx-fw.picked .cw-nx-fw-pt:not(.on) span { background: color-mix(in srgb, #00aa5b 55%, var(--surface)); }
.cw-nx-fw-pt.on span { background: #04703f; }
.cw-nx-fw-rank { margin: 0; padding: 10px; list-style: none; counter-reset: fw; border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cw-nx-fw-rank li { counter-increment: fw; }
.cw-nx-fw-rank button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 10px; color: var(--text); transition: background 0.2s, box-shadow 0.2s; }
.cw-nx-fw-rank button::before { content: counter(fw); font: 500 14px 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; width: 16px; color: var(--text-300); }
.cw-nx-fw-rank li.na button::before { content: '–'; }
.cw-nx-fw-rank b { font-size: 14px; font-weight: 600; flex: 1; }
.cw-nx-fw-rank span { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cw-nx-fw-rank small { font-weight: 500; color: var(--text-300); }
.cw-nx-fw-rank li.na b { color: var(--text-300); }
.cw-nx-fw-rank button:hover, .cw-nx-fw-rank button:focus-visible { background: color-mix(in srgb, var(--text) 5%, transparent); }
.cw-nx-fw-rank button.on { background: var(--bg); box-shadow: inset 3px 0 0 #00aa5b, 0 1px 2px rgba(0,0,0,0.06); }
.cw-nx-fw-rank button.on::before { color: #00aa5b; font-weight: 700; }
.cw-nx-fw-mod { margin-top: 14px; border-radius: 16px; background: var(--surface); padding: 18px 20px 20px; }
.cw-nx-fw-mod.deal .cw-nx-fw-mb { animation: cwNxFade 0.35s ease backwards; }
.cw-nx-fw-mh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cw-nx-fw-mh .n { font: 500 15px 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif; color: var(--text-300); }
.cw-nx-fw-mh b { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--text); }
.cw-nx-fw-mh .s { margin-left: auto; font-size: 12.5px; color: var(--text-300); }
.cw-nx-fw-mh .s em { font-style: normal; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-nx-fw-mb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; margin-top: 10px; }
.cw-nx-fw-mb:not(:has(.cw-nx-ex)) { grid-template-columns: 1fr; }
.cw-nx-fw-mb .what { margin: 0 0 8px; font-size: 14px; line-height: 22px; color: var(--text-300); }
.cw-nx-fw-mb ul { margin: 0; padding-left: 18px; }
.cw-nx-fw-mb li { font-size: 14.5px; line-height: 23px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
/* the tool itself, a small printed page in the doc's style (white paper, same in both themes) */
.cw-nx-ex { align-self: start; background: #fff; color: #212121; border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.12); font-size: 11.5px; line-height: 16px; }
.cw-nx-ex b { font-weight: 800; color: var(--nx, #212121); }
.cw-nx-ex p { margin: 0; }
.cw-nx-ex-kr > div { display: grid; grid-template-columns: 82px 1fr 104px; gap: 8px; padding: 7px 4px; border-top: 1px solid #e5e7ec; }
.cw-nx-ex-kr > .h { border-top: 0; font-size: 10.5px; font-weight: 700; color: #6d7588; padding-top: 0; }
.cw-nx-ex-kr span:last-child { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; }
.cw-nx-ex-kr i { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 6px; background: #f0f3f7; }
.cw-nx-ex-hmw .t, .cw-nx-ex-tree .goal { display: block; font-weight: 800; font-size: 12.5px; margin-bottom: 8px; }
.cw-nx-ex-hmw > div, .cw-nx-ex-tree > div > div { padding: 7px 0; border-top: 1px solid #e5e7ec; }
.cw-nx-ex-hmw ul { margin: 4px 0 0; padding-left: 14px; }
.cw-nx-ex-hmw li { font-size: 11px; line-height: 15px; font-weight: 500; color: #3b4150; margin: 0; }
.cw-nx-ex-hmw p { color: #3b4150; }
.cw-nx-ex-tree .goal { padding: 8px 10px; border-radius: 8px; background: #c9fde0; }
.cw-nx-ex-tree > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cw-nx-ex-tree small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 14px; color: #6d7588; }
.cw-nx-ex-crit { display: grid; gap: 8px; }
.cw-nx-ex-crit > div { border: 1px solid #e5e7ec; border-radius: 10px; padding: 10px; }
.cw-nx-ex-crit small { color: var(--nx); font-weight: 700; font-size: 10.5px; }
.cw-nx-ex-crit > div > b { display: block; color: #212121; margin-bottom: 6px; }
.cw-nx-ex-crit p { margin-top: 6px; padding: 6px 8px; border-radius: 7px; border-left: 3px solid #bfc9d9; background: #f7f8fa; }
.cw-nx-ex-crit p.c { border-left-color: #ff7f17; } .cw-nx-ex-crit p.a { border-left-color: #00aa5b; }
.cw-nx-ex-crit em { display: block; font-style: normal; font-weight: 700; font-size: 10.5px; }
/* user story: the project's principle cards, the white card of the deck at half size */
.cw-nx-ex-st > small { font-weight: 800; font-size: 12.5px; }
.cw-nx-ex-st > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cw-nx-ex-st > div > div { position: relative; overflow: hidden; border-radius: 10px; padding: 10px 10px 8px; min-height: 128px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.cw-nx-ex-st > div > div::before { content: ''; position: absolute; left: 30%; top: -45%; width: 110%; aspect-ratio: 196.4 / 176.64; background: no-repeat 0 0 / 100% 100%; pointer-events: none; }
.cw-nx-ex-st .k-relevant::before { background-image: url('./assets/nest/q-relevant.svg'); } .cw-nx-ex-st .k-reliable::before { background-image: url('./assets/nest/q-reliable.svg'); }
.cw-nx-ex-st .k-engaging::before { background-image: url('./assets/nest/q-engaging.svg'); } .cw-nx-ex-st .k-empowering::before { background-image: url('./assets/nest/q-empowering.svg'); }
.cw-nx-ex-st b { position: relative; font-size: 13px; }
.cw-nx-ex-st p { position: relative; margin-top: 6px; font-size: 11px; line-height: 15px; color: #3b4150; }
.cw-nx-ex-st span { margin-top: auto; padding-top: 8px; font-size: 8.5px; font-weight: 800; color: var(--nx); }
.cw-nx-ex-pr > small { font-weight: 800; font-size: 12.5px; }
.cw-nx-ex-pr > p { margin: 4px 0 10px; color: #3b4150; }
.cw-nx-ex-pr > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cw-nx-ex-pr > div > div { border: 1px solid #e5e7ec; border-radius: 10px; padding: 10px; }
.cw-nx-ex-pr > div p { margin-top: 4px; font-size: 11px; line-height: 15px; color: #3b4150; }

/* quotes */
.cw-nx-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cw-nx-quotes figure { margin: 0; padding: 16px 18px; border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.cw-nx-quotes blockquote { margin: 0; font-size: 15px; line-height: 23px; color: var(--text); }
.cw-nx-quotes figcaption { margin-top: auto; font-size: 12.5px; color: var(--text-300); }

/* narrow + mobile frame */
.cw-narrow .cw-nx-brief, .mobile-frame .cw-nx-brief, .cw-narrow .cw-nx-quotes, .mobile-frame .cw-nx-quotes { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-cred > div { grid-template-columns: 1fr; gap: 4px; }
.mobile-frame .cw-nx-tl-rail { grid-template-columns: repeat(var(--n), 92px); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.mobile-frame .cw-nx-tl-rail::before { right: auto; width: calc(92px * var(--n) - 20px); }
.cw-narrow .cw-nx-scope, .mobile-frame .cw-nx-scope { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-scope-l li { font-size: 13.5px; line-height: 21px; }
.cw-narrow .cw-nx-uses, .mobile-frame .cw-nx-uses { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-uses-l { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
.mobile-frame .cw-nx-uses-l button { white-space: nowrap; width: auto; border: 1px solid var(--border); border-radius: 18px; padding: 5px 10px 5px 6px; font-size: 13px; }
.mobile-frame .cw-nx-uses-d { min-height: 230px; padding: 14px 16px; }
.mobile-frame .cw-nx-def { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-board { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 14px 10px; }
.mobile-frame .cw-nx-note p { font-size: 12px; line-height: 17px; }
.cw-narrow .cw-nx-sys-grid, .mobile-frame .cw-nx-sys-grid { grid-template-columns: 1fr; }
.cw-narrow .cw-nx-sys-lab.r2, .cw-narrow .cw-nx-sys-lab.r3, .mobile-frame .cw-nx-sys-lab.r2, .mobile-frame .cw-nx-sys-lab.r3 { display: none; }
.cw-narrow .cw-nx-sys-spec, .mobile-frame .cw-nx-sys-spec, .cw-narrow .cw-nx-sys-gen, .mobile-frame .cw-nx-sys-gen { grid-column: 1; grid-row: auto; }
.cw-narrow .cw-nx-sys-spec, .mobile-frame .cw-nx-sys-spec { flex-direction: row; padding-top: 0; }
.cw-narrow .cw-nx-sys-spec .cw-nx-box, .mobile-frame .cw-nx-sys-spec .cw-nx-box { flex: 1; }
.cw-narrow .cw-nx-sys-down, .mobile-frame .cw-nx-sys-down { width: 18px; height: 2px; min-height: 0; flex: none; margin: auto 6px; }
.mobile-frame .cw-nx-sys-gen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-frame .cw-nx-sys-soul { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-sys { padding: 14px; }
.cw-narrow .cw-nx-lane, .mobile-frame .cw-nx-lane { grid-template-columns: 1fr; gap: 6px; }
.mobile-frame .cw-nx-lane ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.mobile-frame .cw-nx-lane.branch li:first-child { grid-column: auto; }
.mobile-frame .cw-nx-lane.branch .cw-nx-lane-t { visibility: visible; font-size: 12px; color: var(--text-300); font-weight: 600; }
.mobile-frame .cw-nx-lane li:nth-child(odd)::before { display: none; }
.mobile-frame .cw-nx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-frame .cw-nx-pc.mini { aspect-ratio: 16 / 8; }
.mobile-frame .cw-nx-deck-b { padding: 14px; }
.mobile-frame .cw-nx-deck-h p { font-size: 16px; line-height: 23px; }
.mobile-frame .cw-nx-model { flex-direction: column; }
.mobile-frame .cw-nx-model .cw-nx-arw { transform: rotate(90deg); }
.mobile-frame .cw-nx-mn { flex: none; }
.mobile-frame .cw-nx-sc-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-frame .cw-nx-sc-top b { font-size: 28px; }
.cw-narrow .cw-nx-fw-b, .mobile-frame .cw-nx-fw-b, .cw-narrow .cw-nx-fw-mb, .mobile-frame .cw-nx-fw-mb { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-fw-area { height: 220px; }
/* phone: the plot keeps its dots, numbered by rank; the ranked list below carries the names */
.mobile-frame .cw-nx-fw-pt span { display: none; }
.mobile-frame .cw-nx-fw-pt, .mobile-frame .cw-nx-fw-pt.l { transform: translate(calc(-50% + var(--mx)), -50%); } /* --mx: phone-only nudge for dots closer than their size */
.mobile-frame .cw-nx-fw-pt i { width: 22px; height: 22px; font-size: 11px; font-weight: 800; }
.mobile-frame .cw-nx-fw-pt.on i { background: #04703f; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #04703f; }
.mobile-frame .cw-nx-ex-kr > .h span:last-child { display: none; }
.mobile-frame .cw-nx-fw-plot { padding: 12px 12px 42px 34px; }
.mobile-frame .cw-nx-fw-mod { padding: 14px; }
.mobile-frame .cw-nx-fw-mh .s { margin-left: 0; flex-basis: 100%; }
.mobile-frame .cw-nx-ex-kr > div { grid-template-columns: 70px 1fr; } .mobile-frame .cw-nx-ex-kr > div > span:last-child { grid-column: 2; }
.mobile-frame .cw-nx-ex-tree > div, .mobile-frame .cw-nx-ex-pr > div { grid-template-columns: 1fr; }
.mobile-frame .cw-nx-ex-st > div > div { min-height: 150px; }
.mobile-frame .cw-nx-tb-cloud { padding: 12px; gap: 6px; } .mobile-frame .cw-nx-tb-t { font-size: 12.5px; padding: 4px 9px; }

@media (prefers-reduced-motion: reduce) {
  .cw-nx-fan .cw-nx-pc, .cw-nx-note, .cw-nx-df, .cw-nx-fw-pt, .cw-nx-tb-t, .cw-nx-tabs button, .cw-nx-lane li { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .cw-nx-deck-b.deal .cw-nx-qc, .cw-nx-deck-b.deal .cw-nx-model, .cw-nx-fw-mod.deal .cw-nx-fw-mb { animation: none; }
}

/* ── hmwq: the brief as How-might-we questions, a three-column strip like the feature stories ── */
.cw-hq { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cw-hq li { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.cw-hq li.in { opacity: 1; transform: none; }
.cw-hq-k { font-size: 13px; line-height: 20px; font-weight: 700; color: var(--case-ac, var(--text)); }
.cw-hq-q { margin: 0; font-size: 15px; line-height: 23px; color: var(--text); }
.cw-hq-to { margin-top: auto; align-self: flex-start; padding: 4px 0 0; border: 0; background: none; cursor: pointer; text-align: left; font: 400 13px/20px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cw-hq-to span { color: var(--text-300); }
.cw-hq-to i { font-style: normal; display: inline-block; transition: transform 0.2s ease; }
.cw-hq-to:hover { text-decoration: underline; text-underline-offset: 3px; } .cw-hq-to:hover i { transform: translateY(2px); }
:is(.mobile-frame, .cw-narrow) .cw-hq { grid-template-columns: 1fr; gap: 14px; }

/* ── tasks: a host's tasks during a stream, as a scannable list: group | tasks on one line | count.
      Dark in both themes like the deck it came from (raw hex on purpose) ── */
.cw-tk { margin: 8px 0; padding: 26px 28px 22px; border-radius: 16px; background: #000; color: #fff; }
.cw-tk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cw-tk-title { margin: 0; font: 700 20px/28px 'Plus Jakarta Sans', sans-serif; }
.cw-tk-count { margin: 0; flex: none; font-size: 13px; line-height: 20px; color: rgba(255,255,255,0.6); }
.cw-tk-count b { color: #fff; font-weight: 700; }
.cw-tk-list { list-style: none; margin: 0; padding: 0; }
.cw-tk-r { display: grid; grid-template-columns: 170px minmax(0, 1fr) 24px; align-items: baseline; gap: 16px; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12);
  opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.cw-tk.in .cw-tk-r { opacity: 1; transform: none; }
.cw-tk-g { font-size: 14px; line-height: 22px; font-weight: 700; color: #fff; }
.cw-tk-steps { display: flex; flex-direction: column; gap: 4px; }
.cw-tk-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; line-height: 22px; color: rgba(255,255,255,0.86); }
.cw-tk-arw { width: 18px; height: 10px; flex: none; color: rgba(255,255,255,0.4); }
.cw-tk-sep { font-style: normal; color: rgba(255,255,255,0.35); }
.cw-tk-n { justify-self: end; font-size: 13px; line-height: 22px; color: rgba(255,255,255,0.45); font-variant-numeric: tabular-nums; }
.cw-tk-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; line-height: 18px; color: rgba(255,255,255,0.55); }
:is(.mobile-frame, .cw-narrow) .cw-tk { padding: 20px 16px 18px; }
:is(.mobile-frame, .cw-narrow) .cw-tk-head { flex-direction: column; gap: 4px; }
:is(.mobile-frame, .cw-narrow) .cw-tk-r { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 12px; }
:is(.mobile-frame, .cw-narrow) .cw-tk-g { grid-column: 1; } :is(.mobile-frame, .cw-narrow) .cw-tk-n { grid-column: 2; grid-row: 1; }
:is(.mobile-frame, .cw-narrow) .cw-tk-steps { grid-column: 1 / -1; }
:is(.mobile-frame, .cw-narrow) .cw-tk-line { font-size: 13px; line-height: 20px; }

/* ── a key phrase in body copy: an accent underline, not the callout's highlighter ── */
.case-p mark { background: none; color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--case-ac, var(--text)); text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .cw-hq li, .cw-tk-r { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}