/* ============================================================
   Cliniqi "live" explainers - animated recreations of product
   screens. Declarative: authored in HTML, driven by assets/live.js.

   <figure class="lv" data-steps="1200,1400,3200">   step durations (ms); last = hold before loop
     <div class="lv__win">
       <div class="lv__bar"><span class="lv__dot"></span><span class="lv__title">Laboratory · Queue</span><span class="lv__meta">Live</span></div>
       <div class="lv__body"> ...rows / fields / pills... </div>
     </div>
     <div class="lv-chip lv-chip--tr" data-at="3">...</div>
     <ol class="lv-rail"><li data-at="1">...</li></ol>
     <figcaption class="cap">...</figcaption>
   </figure>

   Element hooks (inside .lv):
     data-at="N"            gets .on at step N (cleared on loop)
     data-off="M"           loses .on at step M
     data-fx="in|pop|fill|glow|strike|press|bar|draw|none"   what .on looks like (default in)
     data-set="N:state:Text|M:state:Text"   swap is-<state> class + text at steps (state may be empty)
                                             states: wait act ok warn alert ai ink
     data-type="N" data-text="..."           typewriter at step N
     data-count="N" data-to="1240" data-prefix="₹"   count-up at step N
   ============================================================ */

.lv{position:relative; margin:0; --lv-r:18px; font-family:var(--sans)}
/* .lv resets figure margins, so re-apply the spacing utilities when they sit on the figure itself */
.lv.gap-top{margin-top:clamp(28px,4vw,44px)}
.lv.gap-top-sm{margin-top:18px}
/* Devanagari must not inherit the mono labels' letter-spacing (it breaks conjuncts) */
.lv [lang="hi"]{letter-spacing:0}
/* live.js wraps the window(s) + chips in .lv__stage so chips anchor to the window, not the rail/caption */
.lv__stage{position:relative}
.lv__stage--chipb{margin-bottom:36px}
.lv__stage--chipt{margin-top:32px}
.lv__win{
  position:relative; border:1px solid var(--hairline); border-radius:var(--lv-r); overflow:hidden;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -10px rgba(15,31,24,.10), 0 34px 90px -30px rgba(16,185,129,.26);
}
.lv--flat .lv__win{box-shadow:0 2px 6px rgba(15,31,24,.04), var(--shadow)}
.lv__bar{
  display:flex; align-items:center; gap:10px; padding:11px 16px; min-height:42px;
  background:linear-gradient(180deg,#fdfefd,#f4f8f5); border-bottom:1px solid var(--hairline);
}
.lv__dot{width:9px; height:9px; border-radius:50%; background:var(--emerald); position:relative; flex:none}
.lv__dot::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(16,185,129,.4); animation:lvPulse 1.8s ease-out infinite}
.lv__title{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.lv__meta{margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--faint); white-space:nowrap}
.lv__tabs{display:flex; gap:4px; margin-left:12px}
.lv__tabs span{font-size:11px; font-weight:600; color:var(--muted); padding:4px 10px; border-radius:999px}
.lv__tabs span.is-cur{background:var(--wash); color:var(--deep)}
.lv__body{padding:14px 16px 16px; font-size:13px; color:var(--ink-2); line-height:1.45}
.lv__body--tight{padding:8px 0 10px}
@keyframes lvPulse{0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.5);opacity:0}}

/* ---------- small type + atoms ---------- */
.lv-lbl{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:3px}
.lv-h{font-size:14px; font-weight:650; color:var(--ink); letter-spacing:-.01em; margin:0 0 2px}
.lv-sub{display:block; font-size:11.5px; color:var(--muted)}
.lv-mono{font-family:var(--mono); font-size:11.5px; letter-spacing:.02em}
.lv-num{font-variant-numeric:tabular-nums}
.lv-muted{color:var(--faint)}
.lv-strong{font-weight:650; color:var(--ink)}
.lv-right{text-align:right}
.lv-sep{height:1px; background:var(--hairline); margin:10px 0}
.lv-flex{display:flex; align-items:center; gap:8px; min-width:0}
.lv-flex--sb{justify-content:space-between}
.lv-stack{display:flex; flex-direction:column; gap:8px}
.lv-g2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.lv-g3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.lv-g4{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.lv-g2>*, .lv-g3>*, .lv-g4>*{min-width:0}

.lv-av{
  width:28px; height:28px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--wash-2); color:var(--deep); font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.lv-av--sky{background:var(--t-sky-l); color:#2f6a80}
.lv-av--sand{background:var(--t-sand-l); color:#86683a}
.lv-av--lilac{background:var(--t-lilac-l); color:#5f5390}
.lv-av--rose{background:var(--t-rose-l); color:#8e4a4a}

/* ---------- pills / status ---------- */
.lv-pill{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border-radius:999px; padding:3px 9px;
  font-size:10.5px; font-weight:650; letter-spacing:.01em; line-height:1.3;
  background:#f1f3f0; color:var(--muted); border:1px solid transparent;
  transition:background .35s, color .35s, border-color .35s, box-shadow .35s;
}
.lv-pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.65; flex:none}
.lv-pill--bare::before{display:none}
.lv-pill.is-wait{background:#f6f1e4; color:#8a6a2a}
.lv-pill.is-act{background:var(--t-sky); color:#2a6a86; border-color:var(--t-sky-l)}
.lv-pill.is-ok{background:var(--wash); color:var(--deep); border-color:var(--wash-line)}
.lv-pill.is-warn{background:#fbf0e3; color:#a3591c; border-color:#f1dcc1}
.lv-pill.is-alert{background:#fbeaea; color:#b23a3a; border-color:#f1d0d0}
.lv-pill.is-ai{background:var(--mint); color:#0a5f47}
.lv-pill.is-ver{background:var(--t-lilac); color:#5f5390; border-color:var(--t-lilac-l)}
.lv-pill.is-ink{background:var(--ink); color:#fff}
.lv-pill.lv-flash{animation:lvFlash .7s ease-out}
@keyframes lvFlash{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)} 100%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}

.lv-tag{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:6px; background:var(--tint); color:var(--muted); white-space:nowrap; vertical-align:1px}
.lv-tag--g{background:var(--wash); color:var(--deep)}
.lv-tag--sky{background:var(--t-sky); color:#2f6a80}
.lv-tag--sand{background:var(--t-sand); color:#86683a}
.lv-tag--lilac{background:var(--t-lilac); color:#5f5390}
.lv-tag--rose{background:var(--t-rose); color:#8e4a4a}
.lv-tag--sage{background:var(--t-sage); color:#4d6b3c}

/* ---------- lanes (queue boards, kanban) ----------
   Cards "move" between lanes: the same card sits in each lane with data-fx="grow",
   data-at = when it arrives, data-off = when it leaves. */
.lv-lanes{display:grid; grid-template-columns:repeat(var(--lanes,3),minmax(0,1fr)); gap:8px}
.lv-lane{border-radius:11px; background:#f7f9f6; border:1px solid #eef2ed; padding:6px 6px 0; min-height:132px; min-width:0}
.lv-lane__h{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:3px 4px 7px; display:flex; justify-content:space-between; gap:6px; white-space:nowrap}
.lv-lane__h > span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis}
.lv-lane--amber{background:#fbf6ec; border-color:#f1e5cc}
.lv-lane--sky{background:#f1f7fa; border-color:#dcebf1}
.lv-lane--mint{background:#f0faf5; border-color:#d6efe2}
.lv-lane--lilac{background:#f5f3fb; border-color:#e6e1f4}
.lv-card{background:#fff; border:1px solid var(--hairline); border-radius:9px; padding:7px 9px; margin-bottom:6px; font-size:11px; line-height:1.35; min-width:0}
.lv-card .t{font-family:var(--mono); font-size:9.5px; color:var(--muted); display:flex; justify-content:space-between; gap:6px}
.lv-card b{display:block; font-size:11.5px; font-weight:650; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lv-card .lv-pill{font-size:9.5px; padding:2px 7px; margin-top:4px}
.lv-card.is-hot{border-color:#d9d2f1; background:#faf8ff; box-shadow:0 0 0 2px rgba(124,104,196,.12)}

/* ---------- compact explainer (bento tiles, minis) ---------- */
.lv--mini{--lv-r:14px}
.lv--mini .lv__win{box-shadow:0 2px 8px rgba(15,31,24,.05), 0 18px 40px -26px rgba(16,185,129,.35)}
.lv--mini .lv__bar{padding:8px 12px; min-height:34px; gap:8px}
.lv--mini .lv__title{font-size:9.5px}
.lv--mini .lv__body{padding:10px 12px 12px; font-size:12px}
.lv--mini .lv__body--tight{padding:6px 0 8px}
.lv--mini .lv__body--tight .lv-tr{padding:7px 12px}
.lv--mini .lv-chip{padding:7px 10px} .lv--mini .lv-chip .ic{width:22px; height:22px; font-size:11px}

/* ---------- table-like lists ---------- */
.lv-table{display:flex; flex-direction:column}
.lv-tr{display:grid; grid-template-columns:var(--cols,1fr 1fr 1fr); gap:10px; align-items:center; padding:9px 16px; border-top:1px solid #f0f3ef; min-width:0}
.lv-tr>*{min-width:0}
/* names / labels inside rows ellipsize instead of wrapping; pills never clip */
.lv-tr .lv-strong, .lv-tr .lv-sub, .lv-ell{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* .lv-table--wrap: narrative tables (timelines) wrap instead of truncating */
.lv-table--wrap .lv-strong, .lv-table--wrap .lv-sub{white-space:normal; overflow:visible}
.lv-flex>*{min-width:0}
.lv-tr--h{border-top:0; padding-top:4px; padding-bottom:6px}
.lv-tr--h>*{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
.lv-tr.is-sel, .lv-tr.lv-cur{background:linear-gradient(90deg,rgba(16,185,129,.07),rgba(16,185,129,0))}
.lv__body .lv-tr{padding-left:0; padding-right:0}
.lv__body--tight .lv-tr{padding-left:16px; padding-right:16px}

/* ---------- fields (like the scribe) ---------- */
.lv-field{border:1px solid var(--hairline); border-radius:12px; padding:8px 11px; background:#fbfcfa; transition:border-color .4s, background .4s, box-shadow .4s; min-width:0}
.lv-field .lv-lbl{transition:color .4s}
.lv-field .v{display:block; font-size:12.5px; color:var(--ink); transition:color .4s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lv-field[data-fx="fill"]:not(.on) .v{color:#c3cfc8}
.lv-field[data-fx="fill"].on{border-color:var(--wash-line); background:var(--wash); box-shadow:0 4px 12px -6px rgba(16,185,129,.25)}
.lv-field[data-fx="fill"].on .lv-lbl{color:var(--deep)}

/* ---------- KPIs / big numbers ---------- */
.lv-kpi{border:1px solid var(--hairline); border-radius:12px; padding:10px 12px; background:#fff; min-width:0}
.lv-kpi b{display:block; font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums}
.lv-kpi--g b{color:var(--deep)}
.lv-big{font-family:var(--serif); font-weight:500; font-size:clamp(36px,4vw,52px); line-height:1; color:var(--deep); letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.lv-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; overflow:hidden;
  border-radius:999px; padding:6px 13px; font-size:11.5px; font-weight:650; white-space:nowrap;
  background:linear-gradient(135deg,#12c48b,var(--deep)); color:#fff; box-shadow:0 6px 14px -8px rgba(16,185,129,.6);
}
.lv-btn--ghost{background:#fff; color:var(--ink-2); border:1px solid var(--hairline); box-shadow:none}
.lv-btn--sky{background:#0ea5e9; box-shadow:0 6px 14px -8px rgba(14,165,233,.6)}
.lv-btn.is-added{background:rgba(14,165,233,.16); color:#0369a1; box-shadow:none}
.lv-btn--ink{background:var(--ink)}
.lv-btn::after{content:''; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:rgba(255,255,255,.55); opacity:0; transform:scale(0)}
.lv-btn--ghost::after{background:rgba(16,185,129,.35)}
.lv-btn.lv-press{animation:lvPress .55s ease-out}
.lv-btn.lv-press::after{animation:lvRipple .6s ease-out}
@keyframes lvPress{0%{transform:scale(1)} 30%{transform:scale(.94)} 100%{transform:scale(1)}}
@keyframes lvRipple{0%{opacity:1; transform:scale(0)} 100%{opacity:0; transform:scale(14)}}

/* ---------- progress ---------- */
.lv-prog{height:6px; border-radius:99px; background:#eef2ee; overflow:hidden}
.lv-prog i{display:block; height:100%; width:var(--from,0%); border-radius:99px; background:linear-gradient(90deg,var(--bright),var(--deep)); transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
.lv-prog[data-fx="bar"].on i{width:var(--to,100%)}

/* ---------- token display ---------- */
.lv-token{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:linear-gradient(135deg,var(--wash),#fff); border:1px solid var(--wash-line)}
.lv-token .lv-big{font-size:34px}

/* ---------- typed text ---------- */
.lv-typed{min-height:1.4em}
.lv-caret{display:inline-block; width:2px; height:1.05em; background:var(--emerald); vertical-align:-2px; margin-left:1px; animation:lvBlink 1s steps(1) infinite}
@keyframes lvBlink{50%{opacity:0}}

/* ---------- mic / listening ---------- */
.lv-wave{display:inline-flex; gap:3px; align-items:center; height:14px}
.lv-wave i{width:3px; border-radius:2px; background:var(--emerald); height:4px; animation:lvWv 1s ease-in-out infinite}
.lv-wave i:nth-child(2){animation-delay:.12s} .lv-wave i:nth-child(3){animation-delay:.24s}
.lv-wave i:nth-child(4){animation-delay:.36s} .lv-wave i:nth-child(5){animation-delay:.48s}
@keyframes lvWv{0%,100%{height:4px} 50%{height:13px}}

/* ---------- step effects ---------- */
.lv [data-at]{transition:opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1), background .4s, box-shadow .4s, border-color .4s, color .4s}
.lv [data-at]:not([data-fx]):not(.on), .lv [data-fx="in"]:not(.on){opacity:0; transform:translateY(8px)}
.lv [data-fx="left"]:not(.on){opacity:0; transform:translateX(-12px)}
.lv [data-fx="pop"]:not(.on){opacity:0; transform:scale(.86) translateY(6px)}
.lv [data-fx="fade"]:not(.on){opacity:0}
.lv [data-fx="dim"]:not(.on){opacity:.35}
.lv [data-fx="glow"].on{box-shadow:0 0 0 2px var(--emerald), 0 8px 22px -8px rgba(16,185,129,.45); border-color:var(--emerald)}
.lv [data-fx="strike"].on{text-decoration:line-through; text-decoration-color:var(--deep); color:var(--faint)}
.lv [data-fx="gone"].on{opacity:0; transform:translateX(18px)}
.lv [data-fx="none"]{transition:none}
/* collapsing element: takes no space until on (lists that grow, cards that move lanes).
   live.js wraps every data-fx="grow" element in .lv-grow > div so padded cards collapse fully. */
.lv .lv-grow{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .55s cubic-bezier(.2,.6,.2,1), opacity .4s}
.lv .lv-grow > div{overflow:hidden; min-height:0}
.lv .lv-grow.on{grid-template-rows:1fr; opacity:1}
/* svg connector that draws itself */
.lv [data-fx="draw"]{stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400); transition:stroke-dashoffset 1s cubic-bezier(.5,.1,.3,1)}
.lv [data-fx="draw"].on{stroke-dashoffset:0}

/* ---------- floating chips (hero-style) ---------- */
.lv-chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--hairline); border-radius:14px; padding:9px 13px; max-width:250px;
  box-shadow:0 14px 34px -12px rgba(15,31,24,.2);
}
.lv-chip .ic{width:26px; height:26px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--wash-2); color:var(--deep); font-size:12.5px; font-weight:700}
.lv-chip .ic--sky{background:var(--t-sky-l); color:#2f6a80}
.lv-chip .ic--sand{background:var(--t-sand-l); color:#86683a}
.lv-chip .ic--rose{background:var(--t-rose-l); color:#8e4a4a}
.lv-chip .ic--lilac{background:var(--t-lilac-l); color:#5f5390}
.lv-chip .tx{line-height:1.25; min-width:0}
.lv-chip .tx b{display:block; font-size:12px; font-weight:650; color:var(--ink); letter-spacing:-.01em}
.lv-chip .tx span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.lv-chip:not([data-fx]):not(.on), .lv-chip[data-fx="pop"]:not(.on){opacity:0; transform:scale(.86) translateY(8px)}
.lv-chip.on{animation:lvFloat 6.5s ease-in-out .6s infinite}
.lv-chip--tr{top:-28px; right:-18px}
.lv-chip--tl{top:-28px; left:-18px}
.lv-chip--br{bottom:-30px; right:-16px}
.lv-chip--bl{bottom:-30px; left:-20px}
.lv-chip--mr{top:42%; right:-30px}
.lv-chip--ml{top:42%; left:-34px}
@keyframes lvFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}

/* gutter layout: wide explainers keep their chips in a side column, stacking like
   notifications, so they never cover rows. Chips use --g1/--g2/--g3 for their slot. */
.lv--gutter{--gut:clamp(210px,19vw,250px)}
.lv--gutter .lv__stage{padding-right:var(--gut); margin:0}
.lv--gutter .lv-chip{left:auto; right:0; bottom:auto; width:calc(var(--gut) - 26px); max-width:none}
.lv--gutter .lv-chip--g1{top:8%} .lv--gutter .lv-chip--g2{top:36%} .lv--gutter .lv-chip--g3{top:64%}

/* ---------- narrative rail (synced to the animation) ---------- */
.lv-rail{list-style:none; margin:20px 0 0; padding:0; display:flex; gap:6px; counter-reset:lvr}
.lv .lv-rail li[data-at]{opacity:1 !important; transform:none !important}
.lv-rail{margin-top:30px}
.lv-rail li{
  flex:1; min-width:0; counter-increment:lvr; position:relative;
  padding:18px 14px 0 0; border-top:2px solid var(--hairline);
  font-size:12.5px; line-height:1.4; color:var(--faint); transition:color .4s, border-color .4s;
}
.lv-rail li::before{
  content:counter(lvr); position:absolute; top:-11px; left:0; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px;
  background:#fff; border:1.5px solid var(--hairline); color:var(--faint); transition:all .4s;
}
.lv-rail li b{display:block; font-size:12.5px; font-weight:650; color:inherit; margin:0 0 2px; line-height:1.3}
.lv-rail li.is-done{color:var(--muted); border-top-color:var(--wash-line)}
.lv-rail li.is-done::before{background:var(--wash-2); border-color:var(--wash-line); color:var(--deep)}
.lv-rail li.is-cur{color:var(--ink-2); border-top-color:var(--emerald)}
.lv-rail li.is-cur::before{background:linear-gradient(135deg,#12c48b,var(--deep)); border-color:transparent; color:#fff; box-shadow:0 0 0 4px rgba(16,185,129,.16)}
.lv-rail li.is-cur b{color:var(--ink)}

/* ---------- multi-window flows: panes joined by animated connectors ----------
   <div class="lv-flowrow">
     <div class="lv__win">...</div>
     <div class="lv-conn" data-at="2"><span>auto-billed</span><i></i></div>
     <div class="lv__win">...</div>
   </div>                                   (turns vertical on phones) */
.lv-flowrow{display:flex; align-items:stretch}
.lv-flowrow > .lv__win{flex:1 1 0; min-width:0}
.lv-flowrow .lv__body{font-size:12.5px}
.lv-conn{flex:0 0 clamp(40px,4.4vw,62px); position:relative; align-self:center; height:40px}
.lv .lv-conn[data-at]{opacity:1 !important; transform:none !important}
.lv-conn::before{content:''; position:absolute; left:5px; right:5px; top:50%; border-top:2px dashed var(--hairline); transition:border-color .4s}
.lv-conn i{position:absolute; top:50%; left:5px; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 4px rgba(16,185,129,.18); opacity:0}
.lv-conn span{position:absolute; bottom:calc(50% + 7px); left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--deep); white-space:nowrap; opacity:0; transition:opacity .4s}
.lv-conn.on::before{border-top-color:var(--emerald)}
.lv-conn.on i{animation:lvTravel 1.5s cubic-bezier(.5,.1,.3,1) infinite}
.lv-conn.on span{opacity:1}
@keyframes lvTravel{0%{left:5px; opacity:0} 15%,85%{opacity:1} 100%{left:calc(100% - 14px); opacity:0}}
@keyframes lvTravelV{0%{top:5px; opacity:0} 15%,85%{opacity:1} 100%{top:calc(100% - 14px); opacity:0}}

/* ---------- section layouts built around explainers ---------- */
.chapter{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr); gap:clamp(30px,5vw,72px); align-items:center}
.chapter--flip{grid-template-columns:minmax(0,1.25fr) minmax(0,.92fr)}
.chapter--flip .chapter__text{order:2}
.chapter--flip .chapter__media{order:1}
.chapter + .chapter{margin-top:clamp(64px,9vw,120px)}
.chapter__text .num{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--deep); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin:0 0 14px}
.chapter__text .num::before{content:''; width:22px; height:2px; background:var(--emerald); border-radius:2px}
.chapter__text h3{font-size:clamp(24px,2.7vw,34px); line-height:1.12; letter-spacing:-.02em; margin-bottom:.45em}
.chapter__text p{color:var(--ink-2)}
.chapter__media{padding:22px 26px 0 22px}
.ticks{list-style:none; margin:16px 0 0; padding:0}
.ticks li{position:relative; padding-left:28px; margin:0 0 10px; font-size:15px; color:var(--ink-2)}
.ticks li::before{content:''; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:6px; background:var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%230c8a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; border:1px solid var(--wash-line)}
.ticks li b{font-weight:600; color:var(--ink)}

/* full-width showcase band around a big explainer */
.showcase{position:relative; border-radius:calc(var(--rad) + 10px); padding:clamp(24px,4vw,48px); border:1px solid var(--wash-line);
  background:
    radial-gradient(80% 90% at 92% -10%, rgba(16,185,129,.12), rgba(16,185,129,0) 55%),
    radial-gradient(70% 80% at -6% 110%, rgba(222,240,245,.85), rgba(222,240,245,0) 60%),
    linear-gradient(180deg,#ffffff,#f4faf6);
}

/* mini live tiles (replace screenshot galleries) */
.minis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.minis .lv__body{font-size:12px}
.mini-cap{font-size:13px; color:var(--muted); margin:10px 2px 0}
.mini-cap b{color:var(--ink); font-weight:650}

/* a bottom chip hangs ~30px under the window: keep the rail's step numbers clear of it */
.lv__stage--chipb + .lv-rail{margin-top:60px}
.lv__stage--chipb + .cap, .lv__stage--chipb + figcaption{margin-top:40px}

/* grid tracks default to min-width auto, so a long window title could widen the page on phones */
.chapter>*, .minis>*, .showcase>*{min-width:0}
.lv-none{flex:none}

/* in-window two-column layout that stacks on phones (transcript | note, editor | panel) */
.lv-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start}
/* phone-only element (counterpart of .lv-sm-hide) */
.lv-sm-only{display:none !important}

/* extra atoms */
.lv-tag--red{background:#fbeaea; color:#b23a3a}
.lv-pill.is-off{background:#f1f3f0; color:var(--muted); border-color:transparent}
.lv-btn--rec{background:#dc4a4a; box-shadow:0 6px 14px -8px rgba(220,74,74,.6)}
.lv-btn--rec::before{content:''; width:7px; height:7px; border-radius:50%; background:#fff; animation:lvBlink 1s steps(1) infinite}
.lv-spk{display:inline-block; min-width:22px; text-align:center; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:1px 5px; border-radius:5px; margin-right:6px; background:var(--wash-2); color:var(--deep); vertical-align:1px}
.lv-spk--pt{background:var(--t-sky-l); color:#2f6a80}

/* live explainer inside a bento tile (replaces the old bleeding screenshot) */
.btile--lg .shot--live{flex:none; min-height:0; height:auto; margin:18px 0 8px; border:0; border-radius:0; overflow:visible; box-shadow:none}
.btile--lg .shot--live .lv-chip--br{right:-8px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .lv-chip--mr{right:-10px} .lv-chip--ml{left:-10px}
  .lv-chip--tr,.lv-chip--br{right:-8px} .lv-chip--tl,.lv-chip--bl{left:-8px}
}
@media (max-width:900px){
  .lv--gutter .lv__stage{padding-right:0}
  .lv--gutter .lv-chip{position:relative; top:auto; right:auto; width:fit-content; max-width:100%; margin:10px 0 0}
  .lv--gutter .lv-chip.on{animation:none}
  .chapter,.chapter--flip{grid-template-columns:1fr}
  .chapter--flip .chapter__text{order:1}
  .chapter--flip .chapter__media{order:2}
  .chapter__media{padding:20px 6px 0}
  .minis{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .lv-flowrow{flex-direction:column}
  .lv-flowrow > .lv__win{flex:none}
  .lv-conn{flex-basis:44px; height:44px; width:40px; align-self:center}
  .lv-conn::before{left:50%; right:auto; top:5px; bottom:5px; border-top:0; border-left:2px dashed var(--hairline)}
  .lv-conn.on::before{border-left-color:var(--emerald)}
  .lv-conn i{left:50%; margin:0 0 0 -4.5px; top:5px}
  .lv-conn.on i{animation-name:lvTravelV}
  .lv-conn span{bottom:auto; top:50%; left:calc(50% + 12px); transform:translateY(-50%)}
}
@media (max-width:640px){
  .lv__body{padding:12px 12px 14px}
  .lv__body--tight .lv-tr{padding-left:12px; padding-right:12px}
  .lv-sm-hide{display:none !important}
  /* rows may declare a phone layout: style="--cols:...; --cols-sm:..." */
  .lv-tr{grid-template-columns:var(--cols-sm,var(--cols,1fr 1fr 1fr)); gap:8px}
  .lv-av{width:24px; height:24px; font-size:9.5px}
  .lv-lanes{grid-template-columns:repeat(var(--lanes-sm,var(--lanes,3)),minmax(0,1fr))}
  .btile--lg .shot--live{height:auto}
  .lv-g3,.lv-g4{grid-template-columns:1fr 1fr}
  .minis{grid-template-columns:1fr}
  .lv__tabs{display:none}
  .lv__stage--chipb{margin-bottom:0} .lv__stage--chipt{margin-top:0}
  .lv__stage--chipb + .lv-rail{margin-top:22px}
  .lv__stage--chipb + .cap, .lv__stage--chipb + figcaption{margin-top:12px}
  .lv-cols{grid-template-columns:1fr}
  .lv-sm-only{display:block !important}
  .lv-sm-only.lv-flex{display:flex !important}
  /* chips become in-flow toasts under the window on phones */
  .lv-chip{position:relative; inset:auto !important; margin:10px 0 0; max-width:none; width:fit-content}
  .lv-chip.on{animation:none}
  .lv-rail{flex-direction:column; gap:0; border-left:2px solid var(--hairline); margin-left:9px; padding-left:0}
  .lv-rail li{border-top:0; padding:0 0 12px 22px; margin-left:-2px; border-left:2px solid transparent}
  .lv-rail li.is-cur{border-left-color:var(--emerald)} .lv-rail li.is-done{border-left-color:var(--wash-line)}
  .lv-rail{margin-top:22px}
  .lv-rail li::before{left:-11px; top:0}
}

@media (prefers-reduced-motion:reduce){
  .lv *, .lv *::before, .lv *::after{animation:none !important; transition:none !important}
  .lv__dot::after{display:none}
}