/* ============================================================================
   Osseus loop-graphics — looping mockup animations for workflow sections.
   Companion to scripts/loop-graphics.js (renders the HTML these styles drive).

   Rules of the system
   - Pure CSS keyframes (opacity / transform / stroke-dashoffset / left / top).
   - Every graphic shares one timeline: each element animates over the SAME
     --lg-dur with percentage choreography, so everything stays in sync.
   - The .lg-scene wrapper fades out during the last ~5% of the loop and back
     in at 0%, so children can snap to their 0% (hidden) state invisibly —
     a soft reset with no jarring jump.
   - Base (non-animated) styles are the PAYOFF state. Under
     prefers-reduced-motion the animations are removed and each graphic reads
     as a complete static diagram. Transient elements (scan lines, travel
     dots) have a hidden base state so they vanish from the static frame.
   - Accent is tinted via --lg-accent (set inline by loop-graphics.js).
   - Typography inside the cards is Instrument Sans only — no monospace, no
     uppercase/letterspaced micro-labels. Decorative strokes are solid; the
     only stroke-dasharray use is pathLength:1 line-draw animation that ends
     as a solid line.
   - Real-text system: every mockup shows legible example content in white
     #FFFDF9 inner cards (1px ink-14% border). Body text 13px/1.45, chips and
     labels never below 11px; everything abstract stays a 6px tint bar.
   ========================================================================= */

/* ---------- mockup card chrome ---------- */
.lg{
  position:relative;
  width:100%;
  background:#FBF8F3;
  border:1px solid rgba(43,38,32,.14);
  border-radius:17px;
  box-shadow:0 24px 54px rgba(43,38,32,.08),0 2px 8px rgba(43,38,32,.05);
  overflow:hidden;
  color:#2B2620;
  font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  line-height:1.35;
  --lg-ease:cubic-bezier(.22,.61,.36,1);
  --lg-dur:12s;
  --lg-accent:#A9542C;
  --lg-moss:#789272;
  --lg-blue:#33507D;
  --lg-amber:#C9822B;
}
.lg-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;
  border-bottom:1px solid rgba(43,38,32,.09);
  background:rgba(43,38,32,.018);
}
.lg-dots{display:inline-flex;gap:6px;flex:none}
.lg-dots i{width:8px;height:8px;border-radius:50%;background:rgba(43,38,32,.13)}
.lg-dots i:nth-child(1){background:rgba(169,84,44,.42)}
.lg-dots i:nth-child(2){background:rgba(201,130,43,.38)}
.lg-dots i:nth-child(3){background:rgba(120,146,114,.46)}
.lg-title{
  font-size:11px;font-weight:500;
  color:rgba(43,38,32,.58);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lg-stage{
  position:relative;
  aspect-ratio:52/36;
  overflow:hidden;
  background-image:radial-gradient(rgba(43,38,32,.055) 1px,transparent 1.3px);
  background-size:22px 22px;
  background-position:11px 9px;
}
.lg-scene{position:absolute;inset:0;animation:lgScene var(--lg-dur) linear infinite}
@keyframes lgScene{
  0%{opacity:0}
  2%,94.5%{opacity:1}
  98.5%,100%{opacity:0}
}

/* ---------- shared atoms ---------- */
.lg-skel{height:6px;border-radius:4px;background:rgba(43,38,32,.11)}
.lg-chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border:1px solid rgba(43,38,32,.17);border-radius:100px;background:#F5F0E9;
  font-size:11px;font-weight:600;
  color:rgba(43,38,32,.88);box-shadow:0 2px 6px rgba(43,38,32,.06);white-space:nowrap;
}
.lg-chip img{width:13px;height:13px;object-fit:contain;display:block}
.lg-cite{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border:1px solid rgba(51,80,125,.28);border-radius:6px;background:rgba(51,80,125,.06);
  font-size:11px;font-weight:500;color:#33507D;white-space:nowrap;
}
.lg-cite img{width:12px;height:12px;object-fit:contain;display:block}
.lg-note{
  position:absolute;background:#FFFDF9;border:1px solid rgba(43,38,32,.14);
  border-radius:11px;padding:10px 13px;box-shadow:0 14px 32px rgba(43,38,32,.11);
}
.lg-micro{
  display:block;font-size:11px;font-weight:600;
  color:rgba(43,38,32,.5);
}
.lg-avatar{
  width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--lg-blue);color:#F5F0E9;
  font-size:8px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.lg-check{width:16px;height:16px;flex:none}
.lg-check circle{fill:none;stroke:var(--lg-moss);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.lg-check path{fill:none;stroke:var(--lg-moss);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.lg-edges{position:absolute;inset:0;width:100%;height:100%;display:block}
.lg-edges path,.lg-edges line{vector-effect:non-scaling-stroke;fill:none}

/* ---------- figure wrapper + caption line ("Fig. 01 — …") ---------- */
.lg-fig{margin:0;width:100%;min-width:0}
.lg-figcap{
  margin-top:12px;
  font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  font-size:13px;font-weight:500;line-height:1.5;
  color:rgba(43,38,32,.55);
}

/* ==========================================================================
   1. loopFlag — integration issues flagged at the design-doc stage
   ========================================================================= */
/* CONTENT-DRIVEN HEIGHT. The doc block and the action card sit in the
   scene's normal flow, so the stage grows to whatever the (wrapping) text
   needs at any container width — no fixed aspect ratio to outgrow, and the
   two cards can never collide. Only the floating flag note and the scan
   line stay absolute; the doc reserves min-height so the note fits over it.
   Base styles remain the payoff state for reduced motion. */
.lg--flag .lg-stage{aspect-ratio:auto}
.lg--flag .lg-scene{position:relative;inset:auto;padding:14px 0 15px}
.lg--flag .lgf-doc{position:relative;margin-left:6.5%;width:56%;min-height:172px}
.lg--flag .lgf-line{margin-bottom:11%}
.lg--flag .lgf-line{position:relative;margin-bottom:13.5%;transform-origin:left center}
.lg--flag .lgf-line.w1{width:92%}
.lg--flag .lgf-line.w2{width:70%}
.lg--flag .lgf-line.w3{width:84%}
.lg--flag .lgf-line.w4{width:88%}
.lg--flag .lgf-issue{
  position:relative;border-radius:7px;margin-bottom:9%;padding:5px 8px;margin-left:-8px;width:max-content;max-width:calc(100% + 8px);
  background:color-mix(in srgb,var(--lg-accent) 11%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lg-accent) 38%,transparent);
  animation:lgfIssue var(--lg-dur) var(--lg-ease) infinite;
}
.lg--flag .lgf-issue .lgf-line{margin:0;width:100%;min-width:190px;background:color-mix(in srgb,var(--lg-accent) 52%,#F5F0E9);animation:lgfIssueBar var(--lg-dur) var(--lg-ease) infinite}
/* the one REAL spec line in the doc — revealed left-to-right as it is "typed" */
.lg--flag .lgf-spec{
  display:block;font-size:11.5px;font-weight:600;line-height:1.35;letter-spacing:-.005em;
  color:rgba(43,38,32,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:lgfSpec var(--lg-dur) steps(24,end) infinite;
}
@keyframes lgfSpec{
  0%,18.5%{clip-path:inset(0 100% 0 0)}
  24%,100%{clip-path:inset(0 0 0 0)}
}
.lg--flag .lgf-doc .lgf-line.t1{animation:lgfL1 var(--lg-dur) var(--lg-ease) infinite}
.lg--flag .lgf-doc .lgf-line.t2{animation:lgfL2 var(--lg-dur) var(--lg-ease) infinite}
.lg--flag .lgf-doc .lgf-line.t3{animation:lgfL3 var(--lg-dur) var(--lg-ease) infinite}
.lg--flag .lgf-issue-wrap{animation:lgfL4 var(--lg-dur) var(--lg-ease) infinite}
.lg--flag .lgf-doc .lgf-line.t5{animation:lgfL5 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgfL1{0%,2%{opacity:0;transform:scaleX(0)}6.5%,100%{opacity:1;transform:scaleX(1)}}
@keyframes lgfL2{0%,7.5%{opacity:0;transform:scaleX(0)}12%,100%{opacity:1;transform:scaleX(1)}}
@keyframes lgfL3{0%,13%{opacity:0;transform:scaleX(0)}17.5%,100%{opacity:1;transform:scaleX(1)}}
@keyframes lgfL4{0%,18.5%{opacity:0}23%,100%{opacity:1}}
@keyframes lgfL5{0%,24%{opacity:0;transform:scaleX(0)}28.5%,100%{opacity:1;transform:scaleX(1)}}
.lg--flag .lgf-issue-wrap{transform-origin:left center}
/* the issue row types in like a plain bar, then highlights amber -> rust */
@keyframes lgfIssue{
  0%,36%{background:transparent;box-shadow:inset 0 0 0 1px transparent}
  41%{background:rgba(201,130,43,.16);box-shadow:inset 0 0 0 1px rgba(201,130,43,.55)}
  46%{background:rgba(201,130,43,.16);box-shadow:inset 0 0 0 1px rgba(201,130,43,.55)}
  52%,100%{background:color-mix(in srgb,var(--lg-accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lg-accent) 38%,transparent)}
}
@keyframes lgfIssueBar{
  0%,36%{background:rgba(43,38,32,.11)}
  41%,46%{background:rgba(201,130,43,.62)}
  52%,100%{background:color-mix(in srgb,var(--lg-accent) 52%,#F5F0E9)}
}
.lg--flag .lgf-scan{
  position:absolute;left:3%;width:62%;top:6%;height:2px;border-radius:2px;
  background:var(--lg-blue);opacity:0;
  box-shadow:0 0 10px 2px rgba(51,80,125,.35),0 14px 22px rgba(51,80,125,.12);
  animation:lgfScan var(--lg-dur) linear infinite;
}
@keyframes lgfScan{
  0%,29%{opacity:0;top:6%}
  31%{opacity:.95;top:10%}
  38%{opacity:.95;top:58%}
  40.5%,100%{opacity:0;top:62%}
}
.lg--flag .lgf-flag{
  right:4.5%;top:16px;width:48%;max-width:272px;
  border-color:color-mix(in srgb,var(--lg-accent) 42%,transparent);
  animation:lgfFlag var(--lg-dur) var(--lg-ease) infinite;
}
.lg--flag .lgf-flag-head{display:flex;gap:7px;align-items:flex-start;font-size:13px;font-weight:500;line-height:1.45;letter-spacing:-.005em;color:rgba(43,38,32,.9)}
.lg--flag .lgf-flag-head .glyph{color:var(--lg-accent);flex:none;font-size:13px;line-height:1.4}
.lg--flag .lgf-flag .lg-micro{color:color-mix(in srgb,var(--lg-accent) 78%,#2B2620);margin-bottom:5px}
.lg--flag .lgf-flag-tools{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.lg--flag .lgf-flag-tools .lg-chip{height:22px;font-size:11px;padding:0 9px}
.lg--flag .lgf-flag-tools .lg-chip img{width:12px;height:12px}
@keyframes lgfFlag{
  0%,44%{opacity:0;transform:translateY(10px) scale(.94)}
  50%,100%{opacity:1;transform:none}
}
/* Final act: an actionable proposal card slides up — concrete fix, a dark
   "Approve change" pill + ghost "Ask <owner>", then the approve button
   presses (subtle scale + fill) and a moss confirmation line appears.
   Base (non-animated) styles are the APPROVED payoff state. */
.lg--flag .lgf-act{
  position:relative;margin:16px 4.5% 0 6.5%;
  animation:lgfAct var(--lg-dur) var(--lg-ease) infinite;
}
.lg--flag .lgf-act .lg-micro{margin-bottom:3px}
.lg--flag .lgf-proposal{
  display:block;font-size:12.5px;font-weight:600;line-height:1.4;letter-spacing:-.005em;
  color:rgba(43,38,32,.92);margin-bottom:8px;
}
.lg--flag .lgf-act-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.lg--flag .lgf-btn{
  display:inline-flex;align-items:center;height:25px;padding:0 12px;
  border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap;
}
.lg--flag .lgf-approve{
  background:#2B2620;color:#F5F0E9;
  animation:lgfPress var(--lg-dur) var(--lg-ease) infinite;
}
.lg--flag .lgf-ask{border:1px solid rgba(43,38,32,.25);color:rgba(43,38,32,.85);background:transparent}
.lg--flag .lgf-confirm{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:11.5px;font-weight:600;color:#4E6249;
  animation:lgfConfirm var(--lg-dur) var(--lg-ease) infinite;
}
.lg--flag .lgf-confirm .lg-check{width:14px;height:14px}
@keyframes lgfAct{
  0%,52%{opacity:0;transform:translateY(14px)}
  58%,100%{opacity:1;transform:none}
}
/* the press: quick scale-down + darker fill, then release */
@keyframes lgfPress{
  0%,68%{transform:none;background:#2B2620}
  70%,72.5%{transform:scale(.94);background:#171310}
  75%,100%{transform:none;background:#2B2620}
}
@keyframes lgfConfirm{
  0%,74%{opacity:0;transform:translateY(4px)}
  79%,100%{opacity:1;transform:none}
}
.lg--flag .lg-check circle{animation:lgfCkC var(--lg-dur) linear infinite}
.lg--flag .lg-check path{animation:lgfCkT var(--lg-dur) linear infinite}
@keyframes lgfCkC{0%,75%{stroke-dashoffset:1}82%,100%{stroke-dashoffset:0}}
@keyframes lgfCkT{0%,80%{stroke-dashoffset:1}85%,100%{stroke-dashoffset:0}}

/* ==========================================================================
   2. loopSearch — ask once, one cited answer
   Choreography: typing + sources land FAST (payoff complete by ~46% of the
   loop), then the finished cited answer HOLDS until the ~95% scene fade —
   at the scoped 10–11s durations that is a ~5s readable hold.
   ========================================================================= */
/* CONTENT-DRIVEN HEIGHT. The ask bar, the source-chip row and the long
   cited answer card stack in the scene's normal flow, so the stage grows to
   fit however many lines the answer wraps to at any container width — no
   fixed aspect ratio to overflow and nothing can collide. */
.lg--search .lg-stage{aspect-ratio:auto}
.lg--search .lg-scene{position:relative;inset:auto;padding:15px 0 16px}
.lg--search .lgs-ask{
  position:relative;margin:0 5%;height:40px;
  display:flex;align-items:center;gap:9px;padding:0 13px;
  background:#FFFDF8;border:1px solid rgba(43,38,32,.16);border-radius:10px;
  box-shadow:0 10px 24px rgba(43,38,32,.07);
}
.lg--search .lgs-ask svg{flex:none;color:rgba(43,38,32,.45)}
.lg--search .lgs-q{font-size:11.5px;font-weight:500;color:rgba(43,38,32,.9);white-space:nowrap;overflow:hidden}
/* Typed question: each char span (.qc1..qc64, emitted by loop-graphics.js)
   snaps in 36ms after the previous one via its own keyframes on the shared
   12s timeline — hidden chars sit at font-size:0 so the caret hugs the last
   typed character. steps(1,end) keeps every reveal a crisp keystroke. */
.lg--search .lgs-caret{
  display:inline-block;width:1.5px;height:12px;margin-left:2px;vertical-align:-2px;
  border-radius:1px;opacity:0;background:color-mix(in srgb,var(--lg-accent) 85%,transparent);
  animation:lgsCaret var(--lg-dur) steps(1,end) infinite;
}
/* solid while typing (2–15%), one idle blink, gone once sources light up */
@keyframes lgsCaret{0%,1.9%{opacity:0}2%{opacity:1}15.2%{opacity:0}16.4%{opacity:1}17.6%,100%{opacity:0}}
.lg--search .lgs-q .qc1{animation:lgsQc1 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc2{animation:lgsQc2 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc3{animation:lgsQc3 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc4{animation:lgsQc4 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc5{animation:lgsQc5 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc6{animation:lgsQc6 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc7{animation:lgsQc7 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc8{animation:lgsQc8 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc9{animation:lgsQc9 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc10{animation:lgsQc10 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc11{animation:lgsQc11 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc12{animation:lgsQc12 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc13{animation:lgsQc13 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc14{animation:lgsQc14 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc15{animation:lgsQc15 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc16{animation:lgsQc16 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc17{animation:lgsQc17 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc18{animation:lgsQc18 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc19{animation:lgsQc19 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc20{animation:lgsQc20 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc21{animation:lgsQc21 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc22{animation:lgsQc22 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc23{animation:lgsQc23 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc24{animation:lgsQc24 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc25{animation:lgsQc25 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc26{animation:lgsQc26 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc27{animation:lgsQc27 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc28{animation:lgsQc28 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc29{animation:lgsQc29 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc30{animation:lgsQc30 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc31{animation:lgsQc31 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc32{animation:lgsQc32 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc33{animation:lgsQc33 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc34{animation:lgsQc34 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc35{animation:lgsQc35 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc36{animation:lgsQc36 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc37{animation:lgsQc37 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc38{animation:lgsQc38 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc39{animation:lgsQc39 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc40{animation:lgsQc40 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc41{animation:lgsQc41 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc42{animation:lgsQc42 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc43{animation:lgsQc43 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc44{animation:lgsQc44 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc45{animation:lgsQc45 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc46{animation:lgsQc46 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc47{animation:lgsQc47 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc48{animation:lgsQc48 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc49{animation:lgsQc49 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc50{animation:lgsQc50 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc51{animation:lgsQc51 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc52{animation:lgsQc52 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc53{animation:lgsQc53 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc54{animation:lgsQc54 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc55{animation:lgsQc55 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc56{animation:lgsQc56 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc57{animation:lgsQc57 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc58{animation:lgsQc58 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc59{animation:lgsQc59 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc60{animation:lgsQc60 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc61{animation:lgsQc61 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc62{animation:lgsQc62 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc63{animation:lgsQc63 var(--lg-dur) steps(1,end) infinite}
.lg--search .lgs-q .qc64{animation:lgsQc64 var(--lg-dur) steps(1,end) infinite}
@keyframes lgsQc1{0%,2.2%{font-size:0;opacity:0}2.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc2{0%,2.4%{font-size:0;opacity:0}2.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc3{0%,2.6%{font-size:0;opacity:0}2.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc4{0%,2.8%{font-size:0;opacity:0}3.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc5{0%,3.0%{font-size:0;opacity:0}3.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc6{0%,3.2%{font-size:0;opacity:0}3.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc7{0%,3.4%{font-size:0;opacity:0}3.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc8{0%,3.6%{font-size:0;opacity:0}3.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc9{0%,3.8%{font-size:0;opacity:0}4.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc10{0%,4.0%{font-size:0;opacity:0}4.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc11{0%,4.2%{font-size:0;opacity:0}4.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc12{0%,4.4%{font-size:0;opacity:0}4.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc13{0%,4.6%{font-size:0;opacity:0}4.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc14{0%,4.8%{font-size:0;opacity:0}5.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc15{0%,5.0%{font-size:0;opacity:0}5.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc16{0%,5.2%{font-size:0;opacity:0}5.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc17{0%,5.4%{font-size:0;opacity:0}5.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc18{0%,5.6%{font-size:0;opacity:0}5.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc19{0%,5.8%{font-size:0;opacity:0}6.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc20{0%,6.0%{font-size:0;opacity:0}6.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc21{0%,6.2%{font-size:0;opacity:0}6.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc22{0%,6.4%{font-size:0;opacity:0}6.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc23{0%,6.6%{font-size:0;opacity:0}6.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc24{0%,6.8%{font-size:0;opacity:0}7.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc25{0%,7.0%{font-size:0;opacity:0}7.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc26{0%,7.2%{font-size:0;opacity:0}7.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc27{0%,7.4%{font-size:0;opacity:0}7.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc28{0%,7.6%{font-size:0;opacity:0}7.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc29{0%,7.8%{font-size:0;opacity:0}8.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc30{0%,8.0%{font-size:0;opacity:0}8.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc31{0%,8.2%{font-size:0;opacity:0}8.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc32{0%,8.4%{font-size:0;opacity:0}8.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc33{0%,8.6%{font-size:0;opacity:0}8.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc34{0%,8.8%{font-size:0;opacity:0}9.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc35{0%,9.0%{font-size:0;opacity:0}9.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc36{0%,9.2%{font-size:0;opacity:0}9.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc37{0%,9.4%{font-size:0;opacity:0}9.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc38{0%,9.6%{font-size:0;opacity:0}9.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc39{0%,9.8%{font-size:0;opacity:0}10.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc40{0%,10.0%{font-size:0;opacity:0}10.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc41{0%,10.2%{font-size:0;opacity:0}10.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc42{0%,10.4%{font-size:0;opacity:0}10.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc43{0%,10.6%{font-size:0;opacity:0}10.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc44{0%,10.8%{font-size:0;opacity:0}11.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc45{0%,11.0%{font-size:0;opacity:0}11.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc46{0%,11.2%{font-size:0;opacity:0}11.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc47{0%,11.4%{font-size:0;opacity:0}11.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc48{0%,11.6%{font-size:0;opacity:0}11.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc49{0%,11.8%{font-size:0;opacity:0}12.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc50{0%,12.0%{font-size:0;opacity:0}12.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc51{0%,12.2%{font-size:0;opacity:0}12.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc52{0%,12.4%{font-size:0;opacity:0}12.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc53{0%,12.6%{font-size:0;opacity:0}12.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc54{0%,12.8%{font-size:0;opacity:0}13.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc55{0%,13.0%{font-size:0;opacity:0}13.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc56{0%,13.2%{font-size:0;opacity:0}13.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc57{0%,13.4%{font-size:0;opacity:0}13.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc58{0%,13.6%{font-size:0;opacity:0}13.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc59{0%,13.8%{font-size:0;opacity:0}14.0%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc60{0%,14.0%{font-size:0;opacity:0}14.2%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc61{0%,14.2%{font-size:0;opacity:0}14.4%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc62{0%,14.4%{font-size:0;opacity:0}14.6%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc63{0%,14.6%{font-size:0;opacity:0}14.8%,100%{font-size:1em;opacity:1}}
@keyframes lgsQc64{0%,14.8%{font-size:0;opacity:0}15.0%,100%{font-size:1em;opacity:1}}
/* One centred, wrapping row of source chips — in normal flow inside the row,
   so chips never collide with each other or the answer card at any width. */
.lg--search .lgs-srcs{
  position:relative;margin:22px 4% 0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px 9px;
}
.lg--search .lgs-src{display:inline-flex;border-radius:100px}
.lg--search .lgs-src.s1{animation:lgsC1 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-src.s2{animation:lgsC2 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-src.s3{animation:lgsC3 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-src.s4{animation:lgsC4 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-src.s5{animation:lgsC5 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgsC1{0%,16%{opacity:0;transform:translateY(6px)}19%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 6px color-mix(in srgb,var(--lg-accent) 16%,transparent),0 2px 6px rgba(43,38,32,.06);border-color:color-mix(in srgb,var(--lg-accent) 60%,transparent)}22.5%,100%{opacity:1;transform:none}}
@keyframes lgsC2{0%,18.5%{opacity:0;transform:translateY(6px)}21.5%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 6px color-mix(in srgb,var(--lg-accent) 16%,transparent),0 2px 6px rgba(43,38,32,.06);border-color:color-mix(in srgb,var(--lg-accent) 60%,transparent)}25%,100%{opacity:1;transform:none}}
@keyframes lgsC3{0%,21%{opacity:0;transform:translateY(6px)}24%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 6px color-mix(in srgb,var(--lg-accent) 16%,transparent),0 2px 6px rgba(43,38,32,.06);border-color:color-mix(in srgb,var(--lg-accent) 60%,transparent)}27.5%,100%{opacity:1;transform:none}}
@keyframes lgsC4{0%,23.5%{opacity:0;transform:translateY(6px)}26.5%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 6px color-mix(in srgb,var(--lg-accent) 16%,transparent),0 2px 6px rgba(43,38,32,.06);border-color:color-mix(in srgb,var(--lg-accent) 60%,transparent)}30%,100%{opacity:1;transform:none}}
@keyframes lgsC5{0%,26%{opacity:0;transform:translateY(6px)}29%{opacity:1;transform:translateY(-3px);box-shadow:0 0 0 6px color-mix(in srgb,var(--lg-accent) 16%,transparent),0 2px 6px rgba(43,38,32,.06);border-color:color-mix(in srgb,var(--lg-accent) 60%,transparent)}32.5%,100%{opacity:1;transform:none}}
.lg--search .lgs-links path{stroke:color-mix(in srgb,var(--lg-accent) 52%,transparent);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:0}
.lg--search .lgs-links .ln1{animation:lgsL1 var(--lg-dur) linear infinite}
.lg--search .lgs-links .ln2{animation:lgsL2 var(--lg-dur) linear infinite}
.lg--search .lgs-links .ln3{animation:lgsL3 var(--lg-dur) linear infinite}
.lg--search .lgs-links .ln4{animation:lgsL4 var(--lg-dur) linear infinite}
.lg--search .lgs-links .ln5{animation:lgsL5 var(--lg-dur) linear infinite}
@keyframes lgsL1{0%,18%{stroke-dashoffset:1;opacity:0}19.5%{opacity:1}26%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgsL2{0%,20.5%{stroke-dashoffset:1;opacity:0}22%{opacity:1}28.5%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgsL3{0%,23%{stroke-dashoffset:1;opacity:0}24.5%{opacity:1}31%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgsL4{0%,25.5%{stroke-dashoffset:1;opacity:0}27%{opacity:1}33.5%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgsL5{0%,28%{stroke-dashoffset:1;opacity:0}29.5%{opacity:1}36%,100%{stroke-dashoffset:0;opacity:1}}
.lg--search .lgs-answer{
  position:relative;margin:20px 5% 0;
  animation:lgsAns var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lgsAns{
  0%,30%{opacity:0;transform:translateY(16px)}
  35%,100%{opacity:1;transform:none}
}
.lg--search .lgs-ans-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.lg--search .lgs-ans-head .lg-micro{color:color-mix(in srgb,var(--lg-moss) 80%,#2B2620)}
.lg--search .lgs-ans-title{font-size:12px;font-weight:600;letter-spacing:-.005em;color:color-mix(in srgb,var(--lg-moss) 65%,#2B2620);white-space:nowrap}
.lg--search .lgs-owner{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:rgba(43,38,32,.72);white-space:nowrap}
.lg--search .lgs-owner .lg-avatar{width:17px;height:17px;font-size:7px}
.lg--search .lgs-owner{animation:lgsOwner var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgsOwner{0%,36%{opacity:0;transform:translateX(6px)}39.5%,100%{opacity:1;transform:none}}
/* real answer body — long cited answer with rust superscript markers and
   the bolded accountable owner */
.lg--search .lgs-ans-body{
  margin:0;font-size:13px;font-weight:500;line-height:1.45;letter-spacing:-.005em;
  color:rgba(43,38,32,.88);
  animation:lgsBody var(--lg-dur) var(--lg-ease) infinite;
}
.lg--search .lgs-ans-body sup{
  font-size:.66em;font-weight:700;line-height:0;padding:0 1px;color:#A9542C;
}
.lg--search .lgs-ans-body b{font-weight:700;color:#2B2620}
@keyframes lgsBody{0%,33%{opacity:0;transform:translateY(5px)}38%,100%{opacity:1;transform:none}}
/* small "Sources" label above the numbered chips */
.lg--search .lgs-src-label{
  display:block;margin-top:9px;font-size:11px;font-weight:600;
  color:rgba(43,38,32,.45);
  animation:lgsSrcLbl var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lgsSrcLbl{0%,38%{opacity:0}41%,100%{opacity:1}}
/* legacy skeleton answer lines (older inlined pages) */
.lg--search .lgs-ans-line{transform-origin:left center;margin-bottom:8px}
.lg--search .lgs-ans-line.al1{width:88%;animation:lgsAl1 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-ans-line.al2{width:64%;animation:lgsAl2 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgsAl1{0%,56%{opacity:0;transform:scaleX(0)}61%,100%{opacity:1;transform:scaleX(1)}}
@keyframes lgsAl2{0%,59%{opacity:0;transform:scaleX(0)}64%,100%{opacity:1;transform:scaleX(1)}}
.lg--search .lgs-cites{display:flex;gap:6px;row-gap:5px;margin-top:6px;flex-wrap:wrap;align-items:center}
/* rust number badge inside each source chip — matches the answer's <sup>s */
.lg--search .lgs-cnum{
  display:inline-grid;place-items:center;flex:none;width:13px;height:13px;
  border-radius:4px;background:#A9542C;color:#fff;
  font-size:8px;font-weight:700;font-style:normal;
}
.lg--search .lgs-verify{
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;
  border-radius:100px;border:1px solid rgba(120,146,114,.5);background:rgba(120,146,114,.13);
  font-size:11px;font-weight:600;color:#4E6249;white-space:nowrap;
  animation:lgsVerify var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lgsVerify{0%,43%{opacity:0;transform:translateY(4px) scale(.92)}45.5%,100%{opacity:1;transform:none}}
.lg--search .lgs-cites .lg-cite.c1{animation:lgsCt1 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-cites .lg-cite.c2{animation:lgsCt2 var(--lg-dur) var(--lg-ease) infinite}
.lg--search .lgs-cites .lg-cite.c3{animation:lgsCt3 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgsCt1{0%,38.5%{opacity:0;transform:translateY(5px) scale(.92)}41.5%,100%{opacity:1;transform:none}}
@keyframes lgsCt2{0%,40%{opacity:0;transform:translateY(5px) scale(.92)}43%,100%{opacity:1;transform:none}}
@keyframes lgsCt3{0%,41.5%{opacity:0;transform:translateY(5px) scale(.92)}44.5%,100%{opacity:1;transform:none}}
/* action row: one small dark button that does the asked task */
.lg--search .lgs-action{
  display:flex;margin-top:10px;
  animation:lgsAct var(--lg-dur) var(--lg-ease) infinite;
}
.lg--search .lgs-act-btn{
  display:inline-flex;align-items:center;height:26px;padding:0 13px;
  border-radius:100px;background:#2B2620;color:#F5F0E9;
  font-size:11px;font-weight:600;white-space:nowrap;
}
@keyframes lgsAct{0%,44%{opacity:0;transform:translateY(5px)}46.5%,100%{opacity:1;transform:none}}
.lg--search .lg-check circle{animation:lgsCkC var(--lg-dur) linear infinite}
.lg--search .lg-check path{animation:lgsCkT var(--lg-dur) linear infinite}
@keyframes lgsCkC{0%,31%{stroke-dashoffset:1}37%,100%{stroke-dashoffset:0}}
@keyframes lgsCkT{0%,35%{stroke-dashoffset:1}39%,100%{stroke-dashoffset:0}}

/* ==========================================================================
   3. loopOnboard — the personalized ramp-up brief a new joiner gets
   A checklist card assembles item by item (read first / why / don't redo /
   first task); moss checks tick off the first two, the first task
   highlights last with the owner to ask, then the payoff pill lands.
   Base styles are the completed-brief payoff state (reduced motion).
   ========================================================================= */
/* CONTENT-DRIVEN HEIGHT. The brief card is the whole graphic and sits in the
   scene's normal flow (payoff row included), so the stage grows to fit the
   checklist however its lines wrap — no fixed aspect ratio, no overlap. */
.lg--onboard .lg-stage{aspect-ratio:auto}
.lg--onboard .lg-scene{position:relative;inset:auto;padding:15px 0 16px}
.lg--onboard .lgo-brief{
  position:relative;margin:0 5%;
  background:#FFFDF9;border:1px solid rgba(43,38,32,.14);border-radius:12px;
  padding:12px 13px 13px;box-shadow:0 14px 32px rgba(43,38,32,.10);
  display:flex;flex-direction:column;gap:8px;
  animation:lgoBrief var(--lg-dur) var(--lg-ease) infinite;
}
.lg--onboard .lgo-brief>.lg-micro{margin-bottom:1px}
@keyframes lgoBrief{0%,2%{opacity:0;transform:translateY(8px)}7%,100%{opacity:1;transform:none}}
.lg--onboard .lgo-item{
  position:relative;display:flex;gap:8px;align-items:flex-start;
  padding:8px 10px;border-radius:9px;background:rgba(245,240,233,.55);
  box-shadow:inset 0 0 0 1px rgba(43,38,32,.09);
}
/* the "don't redo" row keeps a rust warning tint */
.lg--onboard .lgo-item--dont{background:rgba(169,84,44,.08);box-shadow:inset 0 0 0 1px rgba(169,84,44,.3)}
.lg--onboard .lgo-item--task{background:#FFFDF9;box-shadow:inset 0 0 0 1px rgba(43,38,32,.09)}
/* first-task highlight ring — pulses in accent late in the loop, settles */
.lg--onboard .lgo-item--task::after{
  content:"";position:absolute;inset:-1px;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 1.4px color-mix(in srgb,var(--lg-accent) 60%,transparent);
  animation:lgoTaskRing var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lgoTaskRing{
  0%,50%{opacity:0;box-shadow:0 0 0 1.4px color-mix(in srgb,var(--lg-accent) 60%,transparent),0 0 0 0 transparent}
  56%{opacity:1;box-shadow:0 0 0 1.4px color-mix(in srgb,var(--lg-accent) 60%,transparent),0 0 0 6px color-mix(in srgb,var(--lg-accent) 15%,transparent)}
  63%,100%{opacity:1;box-shadow:0 0 0 1.4px color-mix(in srgb,var(--lg-accent) 60%,transparent),0 0 0 0 transparent}
}
/* status glyphs: moss check circles (tick as the joiner works through),
   rust "!" for the don't-redo row, ink arrow for the first task */
.lg--onboard .lgo-st{flex:none;margin-top:1px;width:16px;height:16px}
.lg--onboard .lgo-st--check .lg-check{width:16px;height:16px;display:block}
.lg--onboard .lgo-st--warn,
.lg--onboard .lgo-st--task{
  width:15px;height:15px;margin-top:1.5px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;font-style:normal;line-height:1;
}
.lg--onboard .lgo-st--warn{background:rgba(169,84,44,.9);color:#FBF8F3}
.lg--onboard .lgo-st--task{background:#2B2620;color:#F5F0E9}
.lg--onboard .lgo-st--task svg,
.lg--onboard .lgo-st--state svg{width:15px;height:15px;display:block}
.lg--onboard .lgo-st--task svg{width:12px;height:12px}
/* "Where it stands" — a blue status dot: current state, nothing to action */
.lg--onboard .lgo-st--state{color:var(--lg-blue)}
.lg--onboard .lgo-item--state .lgo-kind{color:color-mix(in srgb,var(--lg-blue) 78%,#2B2620)}
.lg--onboard .lgo-item-body{min-width:0;font-size:12.5px;line-height:1.5}
.lg--onboard .lgo-kind{font-size:11px;font-weight:700;color:rgba(43,38,32,.48);margin-right:7px;white-space:nowrap}
.lg--onboard .lgo-item--dont .lgo-kind{color:#A9542C}
.lg--onboard .lgo-item--task .lgo-kind{color:color-mix(in srgb,var(--lg-accent) 80%,#2B2620)}
.lg--onboard .lgo-item-text{font-weight:500;letter-spacing:-.005em;color:rgba(43,38,32,.9)}
.lg--onboard .lgo-item-chips{display:inline-flex;gap:5px;margin-left:7px;vertical-align:-5px}
.lg--onboard .lgo-item-chips .lg-chip{height:20px;font-size:10.5px;padding:0 8px}
.lg--onboard .lgo-item-chips .lg-chip img{width:11px;height:11px}
.lg--onboard .lgo-owner{
  display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 3px;
  border:1px solid rgba(43,38,32,.17);border-radius:100px;background:#F5F0E9;
  font-size:10.5px;font-weight:600;color:rgba(43,38,32,.88);
  box-shadow:0 2px 6px rgba(43,38,32,.06);white-space:nowrap;
}
.lg--onboard .lgo-owner .lg-avatar{width:15px;height:15px;font-size:6.5px}
/* items slide in one by one */
.lg--onboard .lgo-item.i1{animation:lgoI1 var(--lg-dur) var(--lg-ease) infinite}
.lg--onboard .lgo-item.i2{animation:lgoI2 var(--lg-dur) var(--lg-ease) infinite}
.lg--onboard .lgo-item.i3{animation:lgoI3 var(--lg-dur) var(--lg-ease) infinite}
.lg--onboard .lgo-item.i4{animation:lgoI4 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgoI1{0%,8%{opacity:0;transform:translateY(9px)}13%,100%{opacity:1;transform:none}}
@keyframes lgoI2{0%,14%{opacity:0;transform:translateY(9px)}19%,100%{opacity:1;transform:none}}
@keyframes lgoI3{0%,20%{opacity:0;transform:translateY(9px)}25%,100%{opacity:1;transform:none}}
@keyframes lgoI4{0%,26%{opacity:0;transform:translateY(9px)}31%,100%{opacity:1;transform:none}}
/* The circle lands with its item — an empty checkbox — and only the tick
   draws later, so items 1–2 visibly get ticked off as the joiner works
   through them. Unticked circles read muted; ticking turns them moss. */
.lg--onboard .lgo-st--check .lg-check circle{stroke:var(--lg-moss)}
.lg--onboard .ck1 .lg-check circle{animation:lgoCk1C var(--lg-dur) linear infinite}
.lg--onboard .ck1 .lg-check path{animation:lgoCk1P var(--lg-dur) linear infinite}
.lg--onboard .ck2 .lg-check circle{animation:lgoCk2C var(--lg-dur) linear infinite}
.lg--onboard .ck2 .lg-check path{animation:lgoCk2P var(--lg-dur) linear infinite}
@keyframes lgoCk1C{0%,9%{stroke-dashoffset:1;stroke:rgba(43,38,32,.3)}13%{stroke-dashoffset:0;stroke:rgba(43,38,32,.3)}36%{stroke:rgba(43,38,32,.3)}40%,100%{stroke-dashoffset:0;stroke:var(--lg-moss)}}
@keyframes lgoCk1P{0%,36%{stroke-dashoffset:1}41%,100%{stroke-dashoffset:0}}
@keyframes lgoCk2C{0%,15%{stroke-dashoffset:1;stroke:rgba(43,38,32,.3)}19%{stroke-dashoffset:0;stroke:rgba(43,38,32,.3)}44%{stroke:rgba(43,38,32,.3)}48%,100%{stroke-dashoffset:0;stroke:var(--lg-moss)}}
@keyframes lgoCk2P{0%,44%{stroke-dashoffset:1}49%,100%{stroke-dashoffset:0}}
/* Payoff row: the card's own last row. Space is reserved in normal flow from
   the first frame (the row keeps its height; only its pill fades in), so it
   can never overlap the checklist above it. */
.lg--onboard .lgo-payoff-row{
  display:flex;justify-content:center;align-items:center;
  min-height:24px;margin-top:2px;
}
.lg--onboard .lgo-payoff{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;
  border-radius:100px;border:1px solid rgba(120,146,114,.5);background:rgba(120,146,114,.13);
  font-size:11px;font-weight:600;color:#4E6249;white-space:nowrap;
  animation:lgoPayoff var(--lg-dur) var(--lg-ease) infinite;
}
.lg--onboard .lgo-payoff .lg-check{width:13px;height:13px}
@keyframes lgoPayoff{
  0%,64%{opacity:0;transform:translateY(6px)}
  70%,100%{opacity:1;transform:none}
}

/* ==========================================================================
   3b. onboardCard — static onboarding summary (no loop; one-shot entrance).
   Four moss-tick bullets in white inner rows + a dark "Open interactive
   demo" pill (assets/demo-modal.js opens data-demo-src in the demo modal).
   The root keeps .lg and an explicit inline --lg-dur so the homepage
   cycler (loop-cycle.js) still reads a loop length from this static card.
   ========================================================================= */
.lg--onboardcard .lg-stage{aspect-ratio:auto}
.lg--onboardcard .lgoc{position:relative;padding:16px 15px 17px;display:flex;flex-direction:column;gap:12px}
.lg--onboardcard .lgoc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lg--onboardcard .lgoc-item{
  display:flex;gap:9px;align-items:flex-start;
  padding:9px 11px;border-radius:10px;
  background:#FFFDF9;border:1px solid rgba(43,38,32,.14);
  box-shadow:0 6px 16px rgba(43,38,32,.05);
}
.lg--onboardcard .lgoc-item .lg-check{width:15px;height:15px;margin-top:2.5px}
.lg--onboardcard .lgoc-text{
  min-width:0;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:-.005em;
  color:rgba(43,38,32,.88);
}
.lg--onboardcard .lgoc-text b{font-weight:600;color:#2B2620}
.lg--onboardcard .lgoc-chips{display:inline-flex;gap:5px;margin-left:7px;vertical-align:-5px;flex-wrap:wrap;row-gap:4px}
.lg--onboardcard .lgoc-chips .lg-chip{height:20px;font-size:10.5px;padding:0 8px}
.lg--onboardcard .lgoc-chips .lg-chip img{width:11px;height:11px}
.lg--onboardcard .lgoc-cta{display:flex}
.lg--onboardcard .lgoc-btn{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border-radius:100px;background:#A9542C;color:#F5F0E9;text-decoration:none;
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:background .15s ease,transform .15s ease;
  animation:lgocBtnPulse 2.6s ease-in-out infinite;
}
@keyframes lgocBtnPulse{0%,100%{box-shadow:0 0 0 0 rgba(169,84,44,.38)}50%{box-shadow:0 0 0 9px rgba(169,84,44,0)}}
@media (prefers-reduced-motion:reduce){.lg--onboardcard .lgoc-btn{animation:none}}
.lg--onboardcard .lgoc-btn:hover{background:#8B4423;animation:none;box-shadow:none}
.lg--onboardcard .lgoc-btn:active{transform:scale(.97)}
.lg--onboardcard .lgoc-btn svg{width:14px;height:14px;flex:none;display:block}
/* one-shot entrance (replays when the homepage cycler re-shows the pane —
   panes toggle display:none -> block, which restarts these) */
.lg--onboardcard .lgoc-item{animation:lgocIn .5s var(--lg-ease) backwards}
.lg--onboardcard .lgoc-item.b1{animation-delay:.05s}
.lg--onboardcard .lgoc-item.b2{animation-delay:.13s}
.lg--onboardcard .lgoc-item.b3{animation-delay:.21s}
.lg--onboardcard .lgoc-item.b4{animation-delay:.29s}
.lg--onboardcard .lgoc-cta{animation:lgocIn .5s .4s var(--lg-ease) backwards}
@keyframes lgocIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:620px){
  .lg--onboardcard .lgoc{padding:13px 12px 14px}
  .lg--onboardcard .lgoc-item{padding:8px 9px;gap:7px}
  .lg--onboardcard .lgoc-text{font-size:11.5px}
  .lg--onboardcard .lgoc-chips{margin-left:5px;vertical-align:-4px}
  .lg--onboardcard .lgoc-chips .lg-chip{height:18px;font-size:9.5px;padding:0 7px}
  .lg--onboardcard .lgoc-btn{height:34px;font-size:12.5px;padding:0 15px}
}
@media (prefers-reduced-motion:reduce){
  .lg--onboardcard .lgoc-item,.lg--onboardcard .lgoc-cta{animation:none}
}

/* ==========================================================================
   4. loopHistory — never repeat a dead end
   ========================================================================= */
.lg--history .lgh-base{
  position:absolute;left:7%;top:36%;width:56%;height:1.5px;background:rgba(43,38,32,.24);
  transform-origin:left center;animation:lghBase var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lghBase{0%,2%{transform:scaleX(0)}9%,100%{transform:scaleX(1)}}
.lg--history .lgh-tick{position:absolute;top:36%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px}
.lg--history .lgh-dot{width:11px;height:11px;border-radius:50%;background:#F5F0E9;border:1.6px solid rgba(43,38,32,.55);margin-top:11px}
.lg--history .lgh-tick span{font-size:11px;font-weight:600;color:rgba(43,38,32,.62)}
.lg--history .lgh-tick.k1{animation:lghT1 var(--lg-dur) var(--lg-ease) infinite}
.lg--history .lgh-tick.k2{animation:lghT2 var(--lg-dur) var(--lg-ease) infinite}
.lg--history .lgh-tick.k3{animation:lghT3 var(--lg-dur) var(--lg-ease) infinite}
.lg--history .lgh-tick.k4{animation:lghT4 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lghT1{0%,4%{opacity:0;transform:translate(-50%,-50%) translateY(6px)}8.5%,100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lghT2{0%,9%{opacity:0;transform:translate(-50%,-50%) translateY(6px)}13.5%,100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lghT3{0%,14%{opacity:0;transform:translate(-50%,-50%) translateY(6px)}18.5%,100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lghT4{0%,19%{opacity:0;transform:translate(-50%,-50%) translateY(6px)}23.5%,100%{opacity:1;transform:translate(-50%,-50%)}}
.lg--history .lgh-tick.k4 .lgh-dot{background:var(--lg-accent);border-color:var(--lg-accent);animation:lghFailDot var(--lg-dur) var(--lg-ease) infinite}
@keyframes lghFailDot{
  0%,26%{background:#F5F0E9;border-color:rgba(43,38,32,.55);box-shadow:0 0 0 0 transparent}
  30%{background:var(--lg-accent);border-color:var(--lg-accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--lg-accent) 22%,transparent)}
  36%,100%{background:var(--lg-accent);border-color:var(--lg-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lg-accent) 12%,transparent)}
}
.lg--history .lgh-fail{
  position:absolute;top:52%;transform:translateX(-50%);
  font-size:11px;font-weight:600;white-space:nowrap;
  color:color-mix(in srgb,var(--lg-accent) 88%,#2B2620);
  animation:lghFail var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lghFail{0%,29%{opacity:0;transform:translateX(-50%) translateY(4px)}34%,100%{opacity:1;transform:translateX(-50%)}}
.lg--history .lgh-draft{
  left:66%;top:9%;right:6%;
  animation:lghDraft var(--lg-dur) var(--lg-ease) infinite;
}
.lg--history .lgh-draft .lg-micro{margin-bottom:4px}
.lg--history .lgh-draft b{font-size:12px;font-weight:600;display:block;margin-bottom:8px}
@keyframes lghDraft{0%,38%{opacity:0;transform:translateY(8px) scale(.95)}44%,100%{opacity:1;transform:none}}
.lg--history .lg-edges .lghe{
  stroke:var(--lg-accent);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:0;opacity:.6;stroke-linecap:round;
  animation:lghEdge var(--lg-dur) linear infinite;
}
/* solid connector draws once from R31 toward the draft, then holds */
@keyframes lghEdge{0%,45%{stroke-dashoffset:1;opacity:0}47%{opacity:.6}54%,100%{stroke-dashoffset:0;opacity:.6}}
.lg--history .lgh-warn{
  left:7%;top:64%;width:66%;max-width:348px;display:flex;align-items:flex-start;gap:8px;
  border-color:rgba(201,130,43,.55);background:#FBF3E4;
  font-size:12.5px;font-weight:500;line-height:1.45;letter-spacing:-.005em;color:rgba(43,38,32,.9);
  animation:lghWarn var(--lg-dur) var(--lg-ease) infinite;
}
.lg--history .lgh-warn .glyph{flex:none;width:15px;height:15px;border-radius:50%;background:rgba(201,130,43,.9);color:#FBF8F3;font-size:9.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.lg--history .lgh-warn .lg-micro{color:#8F5F1E;margin-bottom:2px}
@keyframes lghWarn{0%,56%{opacity:0;transform:translateY(12px)}62%,100%{opacity:1;transform:none}}
.lg--history .lgh-ok{
  position:absolute;left:66%;top:83%;
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
  border-radius:100px;border:1px solid rgba(120,146,114,.5);background:rgba(120,146,114,.14);
  font-size:11px;font-weight:600;color:#4E6249;white-space:nowrap;
  animation:lghOk var(--lg-dur) var(--lg-ease) infinite;
}
@keyframes lghOk{0%,72%{opacity:0;transform:translateY(6px) scale(.9)}77%,100%{opacity:1;transform:none}}
.lg--history .lgh-ok .lg-check{width:12px;height:12px}
.lg--history .lg-check circle{animation:lghCkC var(--lg-dur) linear infinite}
.lg--history .lg-check path{animation:lghCkT var(--lg-dur) linear infinite}
@keyframes lghCkC{0%,74%{stroke-dashoffset:1}80%,100%{stroke-dashoffset:0}}
@keyframes lghCkT{0%,78%{stroke-dashoffset:1}82%,100%{stroke-dashoffset:0}}

/* ==========================================================================
   5. loopMemory — your agents, on the same governed memory
   ========================================================================= */
.lg--memory .lgm-agent{
  left:4.5%;top:33%;width:27%;transform:translateY(-50%);
  animation:lgmAgent var(--lg-dur) var(--lg-ease) infinite;
}
.lg--memory .lgm-agent .lg-micro{margin-bottom:4px}
.lg--memory .lgm-agent .lg-skel{width:86%;margin-bottom:6px}
.lg--memory .lgm-agent .lg-skel:last-child{width:58%;margin-bottom:0}
/* real agent request text */
.lg--memory .lgm-ask{
  display:block;font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:-.005em;
  color:rgba(43,38,32,.88);
}
@keyframes lgmAgent{0%,2%{opacity:0;transform:translateY(calc(-50% + 8px))}7%,100%{opacity:1;transform:translateY(-50%)}}
.lg--memory .lgm-hub{
  position:absolute;left:50%;top:33%;width:58px;height:58px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(245,240,233,.96);border:1px solid rgba(43,38,32,.2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 5px rgba(245,240,233,.55),0 12px 30px rgba(43,38,32,.12);
  animation:lgmHub var(--lg-dur) var(--lg-ease) infinite;
}
.lg--memory .lgm-hub::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(43,38,32,.10);
}
.lg--memory .lgm-hub img{width:26px;height:26px}
@keyframes lgmHub{
  0%,20%{box-shadow:0 0 0 5px rgba(245,240,233,.55),0 12px 30px rgba(43,38,32,.12)}
  24%{box-shadow:0 0 0 5px rgba(245,240,233,.55),0 0 0 13px color-mix(in srgb,var(--lg-accent) 17%,transparent),0 12px 30px rgba(43,38,32,.12)}
  30%,100%{box-shadow:0 0 0 5px rgba(245,240,233,.55),0 12px 30px rgba(43,38,32,.12)}
}
.lg--memory .lgm-hub small{
  position:absolute;bottom:calc(100% + 14px);left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:600;color:rgba(43,38,32,.55);white-space:nowrap;
}
.lg--memory .lgm-action{
  left:72%;right:4.5%;top:33%;transform:translateY(-50%);
  border-color:color-mix(in srgb,var(--lg-accent) 45%,transparent);
  animation:lgmAction var(--lg-dur) var(--lg-ease) infinite;
}
.lg--memory .lgm-action .lg-micro{margin-bottom:5px}
.lg--memory .lgm-action b{font-size:12.5px;font-weight:600;letter-spacing:-.005em;display:block;line-height:1.4}
@keyframes lgmAction{
  0%,4%{opacity:0}
  9%,54%{opacity:.5;border-color:rgba(43,38,32,.15);box-shadow:0 14px 32px rgba(43,38,32,.06)}
  60%,100%{opacity:1;border-color:color-mix(in srgb,var(--lg-accent) 45%,transparent);box-shadow:0 14px 32px rgba(43,38,32,.11)}
}
/* The tinted chrome strip read as a highlight band across the top of the card,
   so this window keeps the divider but drops the tint. */
.lg--memory .lg-bar{background:none}
/* pathLength-normalised dashes and non-scaling-stroke disagree in Chrome: the
   dash length is measured in screen space while pathLength normalises the user
   space, so a "fully drawn" edge stops about 15% short of its own endpoint.
   These edges scale with the box instead, and their widths are set to land on
   the same rendered weight as before. */
.lg--memory .lg-edges path{vector-effect:none}
.lg--memory .lg-edges .lgm-rail{stroke:rgba(43,38,32,.26);stroke-width:1.05;stroke-dasharray:1;stroke-dashoffset:0}
.lg--memory .lg-edges .lgm-rail.r1{animation:lgmR1 var(--lg-dur) linear infinite}
.lg--memory .lg-edges .lgm-rail.r2{animation:lgmR2 var(--lg-dur) linear infinite}
@keyframes lgmR1{0%,7%{stroke-dashoffset:1;opacity:0}8%{opacity:1}13%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgmR2{0%,10%{stroke-dashoffset:1;opacity:0}11%{opacity:1}16%,100%{stroke-dashoffset:0;opacity:1}}
.lg--memory .lgm-dot{
  position:absolute;width:8px;height:8px;border-radius:50%;top:33%;
  background:var(--lg-accent);opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--lg-accent) 45%,transparent);
}
.lg--memory .lgm-dot.d1{animation:lgmD1 var(--lg-dur) var(--lg-ease) infinite}
.lg--memory .lgm-dot.d2{animation:lgmD2 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgmD1{
  0%,13%{opacity:0;left:32.5%}
  15%{opacity:1}
  22%{opacity:1;left:43.5%}
  24%,100%{opacity:0;left:44%}
}
@keyframes lgmD2{
  0%,44%{opacity:0;left:56%}
  46%{opacity:1}
  55%{opacity:1;left:70.5%}
  57%,100%{opacity:0;left:71%}
}
.lg--memory .lg-edges .lgm-stem{stroke:color-mix(in srgb,var(--lg-accent) 45%,transparent);stroke-width:.95;stroke-dasharray:1;stroke-dashoffset:0}
.lg--memory .lg-edges .lgm-stem.s1{animation:lgmS1 var(--lg-dur) linear infinite}
.lg--memory .lg-edges .lgm-stem.s2{animation:lgmS2 var(--lg-dur) linear infinite}
.lg--memory .lg-edges .lgm-stem.s3{animation:lgmS3 var(--lg-dur) linear infinite}
@keyframes lgmS1{0%,27%{stroke-dashoffset:1;opacity:0}28%{opacity:1}34%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgmS2{0%,31%{stroke-dashoffset:1;opacity:0}32%{opacity:1}38%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes lgmS3{0%,35%{stroke-dashoffset:1;opacity:0}36%{opacity:1}42%,100%{stroke-dashoffset:0;opacity:1}}
.lg--memory .lgm-chip{position:absolute;transform:translate(-50%,-50%)}
.lg--memory .lgm-chip .lg-cite{height:23px;font-size:11px;padding:0 9px;background:#FFFDF9;box-shadow:0 8px 18px rgba(43,38,32,.08)}
.lg--memory .lgm-chip.m1{animation:lgmC1 var(--lg-dur) var(--lg-ease) infinite}
.lg--memory .lgm-chip.m2{animation:lgmC2 var(--lg-dur) var(--lg-ease) infinite}
.lg--memory .lgm-chip.m3{animation:lgmC3 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgmC1{0%,28%{opacity:0;transform:translate(-50%,-50%) translate(58px,-56px) scale(.6)}34%,100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lgmC2{0%,32%{opacity:0;transform:translate(-50%,-50%) translate(-6px,-78px) scale(.6)}38%,100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lgmC3{0%,36%{opacity:0;transform:translate(-50%,-50%) translate(-66px,-52px) scale(.6)}42%,100%{opacity:1;transform:translate(-50%,-50%)}}
.lg--memory .lgm-chip .lg-cite.is-moss{border-color:rgba(120,146,114,.5);background:rgba(120,146,114,.12);color:#4E6249}
.lg--memory .lgm-approve{
  /* right-aligned with the action note above it, so a nowrap label cannot
     run off the card at narrower widths */
  position:absolute;right:4.5%;top:53%;
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;
  border-radius:100px;border:1px solid rgba(120,146,114,.5);background:rgba(120,146,114,.14);
  font-size:11px;font-weight:600;color:#4E6249;white-space:nowrap;
  animation:lgmApprove var(--lg-dur) var(--lg-ease) infinite;
}
.lg--memory .lgm-approve .lg-check{width:12px;height:12px}
@keyframes lgmApprove{0%,64%{opacity:0;transform:translateY(6px) scale(.9)}69%,100%{opacity:1;transform:none}}
.lg--memory .lg-check circle{animation:lgmCkC var(--lg-dur) linear infinite}
.lg--memory .lg-check path{animation:lgmCkT var(--lg-dur) linear infinite}
@keyframes lgmCkC{0%,66%{stroke-dashoffset:1}72%,100%{stroke-dashoffset:0}}
@keyframes lgmCkT{0%,70%{stroke-dashoffset:1}74%,100%{stroke-dashoffset:0}}

/* ==========================================================================
   7. hardwareToSoftwareImpact — reviewed ECAD change to approved Jira work
   ========================================================================= */
.lg--impact .lg-stage{aspect-ratio:auto}
.lg--impact .lgi{padding:14px;display:grid;gap:9px}
.lg--impact .lgi-source,
.lg--impact .lgi-impacts,
.lg--impact .lgi-tickets{position:relative}
.lg--impact .lgi-source{padding:12px 13px;animation:lgiSource var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgiSource{0%,2%{opacity:0;transform:translateY(-7px)}9%,100%{opacity:1;transform:none}}
.lg--impact .lgi-source-head,
.lg--impact .lgi-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lg--impact .lgi-tool,
.lg--impact .lgi-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600}
.lg--impact .lgi-tool img{width:13px;height:13px;object-fit:contain}
.lg--impact .lgi-state{height:21px;padding:0 8px;border-radius:100px;border:1px solid rgba(120,146,114,.5);background:rgba(120,146,114,.13);color:#4E6249}
.lg--impact .lgi-state::before{width:5px;height:5px;border-radius:50%;background:#66845F;content:""}
.lg--impact .lgi-source-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;margin-top:8px}
.lg--impact .lgi-source-body .lg-micro{display:block;margin-bottom:2px;color:rgba(43,38,32,.55)}
.lg--impact .lgi-source-body b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.lg--impact .lgi-delta{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.lg--impact .lgi-delta small{margin-right:2px;font-size:10.5px;color:rgba(43,38,32,.52)}
.lg--impact .lgi-delta s{font-size:12px;color:rgba(43,38,32,.5);text-decoration-color:rgba(169,84,44,.8);text-decoration-thickness:1.5px}
.lg--impact .lgi-delta i{font-size:11px;font-style:normal;color:rgba(43,38,32,.42)}
.lg--impact .lgi-delta strong{font-size:14px;color:#A9542C;animation:lgiDelta var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgiDelta{0%,10%{background:transparent;box-shadow:0 0 0 0 transparent}16%{background:rgba(169,84,44,.12);box-shadow:0 0 0 4px rgba(169,84,44,.08)}24%,100%{background:transparent;box-shadow:0 0 0 0 transparent}}
.lg--impact .lgi-rationale{display:block;margin-top:8px;padding-top:7px;border-top:1px solid rgba(43,38,32,.09);font-size:10.5px;color:rgba(43,38,32,.5)}

.lg--impact .lgi-bridge{height:29px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;color:#3F6F6A;animation:lgiBridge var(--lg-dur) var(--lg-ease) infinite}
.lg--impact .lgi-bridge i{height:1px;background:rgba(63,111,106,.28);transform-origin:center}
.lg--impact .lgi-bridge span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:650;white-space:nowrap}
.lg--impact .lgi-bridge img{width:18px;height:18px}
@keyframes lgiBridge{0%,15%{opacity:0;transform:scaleX(.7)}22%,100%{opacity:1;transform:scaleX(1)}}

.lg--impact .lgi-impacts{padding:0;overflow:hidden}
.lg--impact .lgi-section-head{padding:10px 12px;border-bottom:1px solid rgba(43,38,32,.1);font-size:10.5px;font-weight:650}
.lg--impact .lgi-section-head span:last-child{font-weight:500;color:rgba(43,38,32,.5)}
.lg--impact .lgi-files{display:grid}
.lg--impact .lgi-file{min-width:0;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(43,38,32,.07);background:#FFFDF9}
.lg--impact .lgi-file:last-child{border-bottom:0}
.lg--impact .lgi-file img{width:13px;height:13px;object-fit:contain}
.lg--impact .lgi-file span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:550;color:rgba(43,38,32,.86)}
.lg--impact .lgi-file small{height:19px;display:inline-flex;align-items:center;padding:0 7px;border-radius:100px;background:rgba(63,111,106,.09);font-size:9.5px;font-weight:600;color:#3F6F6A;white-space:nowrap}
.lg--impact .lgi-file.f1{animation:lgiFile1 var(--lg-dur) var(--lg-ease) infinite}
.lg--impact .lgi-file.f2{animation:lgiFile2 var(--lg-dur) var(--lg-ease) infinite}
.lg--impact .lgi-file.f3{animation:lgiFile3 var(--lg-dur) var(--lg-ease) infinite}
.lg--impact .lgi-file.f4{animation:lgiFile4 var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgiFile1{0%,24%{opacity:0;transform:translateX(-12px)}30%,100%{opacity:1;transform:none}}
@keyframes lgiFile2{0%,29%{opacity:0;transform:translateX(-12px)}35%,100%{opacity:1;transform:none}}
@keyframes lgiFile3{0%,34%{opacity:0;transform:translateX(-12px)}40%,100%{opacity:1;transform:none}}
@keyframes lgiFile4{0%,39%{opacity:0;transform:translateX(-12px)}45%,100%{opacity:1;transform:none}}

.lg--impact .lgi-tickets{min-height:67px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px;animation:lgiTickets var(--lg-dur) var(--lg-ease) infinite}
@keyframes lgiTickets{0%,49%{opacity:0;transform:translateY(8px)}56%,100%{opacity:1;transform:none}}
.lg--impact .lgi-ticket-main{min-width:0;display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:7px;align-items:center}
.lg--impact .lgi-ticket-main img{grid-row:1/3;width:15px;height:15px;object-fit:contain}
.lg--impact .lgi-ticket-main b{font-size:12px;font-weight:650;line-height:1.25}
.lg--impact .lgi-ticket-main small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:rgba(43,38,32,.52)}
.lg--impact .lgi-ticket-state{position:relative;min-width:205px;height:29px}
.lg--impact .lgi-review,
.lg--impact .lgi-confirm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:100px;font-size:10.5px;font-weight:650;white-space:nowrap}
.lg--impact .lgi-review{opacity:0;border:1px solid rgba(43,38,32,.2);background:#2B2620;color:#F5F0E9;animation:lgiReview var(--lg-dur) var(--lg-ease) infinite}
.lg--impact .lgi-confirm{gap:5px;border:1px solid rgba(120,146,114,.5);background:rgba(120,146,114,.14);color:#4E6249;animation:lgiConfirm var(--lg-dur) var(--lg-ease) infinite}
.lg--impact .lgi-confirm .lg-check{width:12px;height:12px}
@keyframes lgiReview{0%,57%{opacity:0;transform:scale(.94)}63%,74%{opacity:1;transform:none}79%,100%{opacity:0;transform:scale(.96)}}
@keyframes lgiConfirm{0%,75%{opacity:0;transform:translateY(4px)}81%,100%{opacity:1;transform:none}}
.lg--impact .lgi-confirm .lg-check circle{animation:lgiCheckC var(--lg-dur) linear infinite}
.lg--impact .lgi-confirm .lg-check path{animation:lgiCheckT var(--lg-dur) linear infinite}
@keyframes lgiCheckC{0%,77%{stroke-dashoffset:1}83%,100%{stroke-dashoffset:0}}
@keyframes lgiCheckT{0%,81%{stroke-dashoffset:1}86%,100%{stroke-dashoffset:0}}

/* ---------- small screens: taller stage, slightly smaller type ---------- */
@media (max-width:620px){
  .lg-stage{aspect-ratio:52/44}
  .lg-title{font-size:10px}
  .lg-figcap{font-size:12px;margin-top:10px}
  .lg-chip{height:23px;font-size:10px;padding:0 8px}
  .lg-chip img{width:11px;height:11px}
  .lg-cite{height:21px;font-size:10px;padding:0 7px}
  /* flag / search / onboard stages are content-sized, so they need no
     per-breakpoint heights — only the floating flag note gets more room. */
  .lg--flag .lgf-doc{min-height:196px}
  .lg--flag .lgf-flag{width:60%}
  .lg--flag .lgf-flag-head{font-size:11.5px}
  .lg--flag .lgf-spec{font-size:10px}
  .lg--flag .lgf-proposal{font-size:11px}
  .lg--flag .lgf-btn{height:23px;font-size:10px;padding:0 10px}
  .lg--flag .lgf-confirm{font-size:10.5px}
  .lg--search .lgs-q{font-size:10px}
  .lg--search .lgs-ask{height:35px;gap:7px}
  .lg--search .lgs-ans-body{font-size:11.5px}
  .lg--search .lgs-owner{font-size:10px}
  .lg--search .lgs-act-btn{height:23px;font-size:10px;padding:0 10px}
  .lg--onboard .lgo-item{padding:7px 8px;gap:6px}
  .lg--onboard .lgo-item-body{font-size:11px}
  .lg--onboard .lgo-kind{font-size:10px;margin-right:5px}
  .lg--onboard .lgo-item-chips{margin-left:5px;vertical-align:-4px}
  .lg--onboard .lgo-item-chips .lg-chip{height:18px;font-size:9.5px;padding:0 7px}
  .lg--onboard .lgo-owner{height:18px;font-size:9.5px}
  .lg--history .lgh-warn{width:80%;font-size:11px}
  .lg--memory .lgm-agent{width:32%}
  .lg--memory .lgm-agent .lg-micro,.lg--memory .lgm-action .lg-micro{font-size:10px}
  .lg--memory .lgm-ask{font-size:11px}
  .lg--memory .lgm-action b{font-size:11px}
  .lg--memory .lgm-hub{width:48px;height:48px}
  .lg--memory .lgm-hub img{width:21px;height:21px}
  .lg--impact .lgi{padding:11px;gap:8px}
  .lg--impact .lgi-source{padding:10px 11px}
  .lg--impact .lgi-source-body{grid-template-columns:1fr;gap:6px;align-items:start}
  .lg--impact .lgi-delta{justify-content:flex-start}
  .lg--impact .lgi-rationale{margin-top:6px;padding-top:6px}
  .lg--impact .lgi-section-head{padding:9px 10px}
  .lg--impact .lgi-file{grid-template-columns:15px minmax(0,1fr) auto;gap:6px;padding:7px 10px}
  .lg--impact .lgi-file span{font-size:10.5px}
  .lg--impact .lgi-file small{font-size:9px;padding:0 6px}
  .lg--impact .lgi-tickets{align-items:flex-start;flex-direction:column;gap:9px;padding:10px 11px}
  .lg--impact .lgi-ticket-state{width:100%;min-width:0}
}

/* ---------- reduced motion: freeze every graphic at its payoff frame ------ */
@media (prefers-reduced-motion:reduce){
  .lg .lg-scene,
  .lg .lg-scene *,
  .lg--impact .lgi,
  .lg--impact .lgi *{animation:none!important}
}

/* ==========================================================================
   Optional layout helpers — Operon-style alternating text + graphic rows.
   Markup: .lg-split > .lg-split-copy + .lg-split-media  (add .lg-split--flip
   to place the graphic on the left on desktop). Mobile stacks copy first.
   ========================================================================= */
.lg-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,6vw,88px);align-items:center;
  padding:clamp(44px,6vw,78px) 0;
}
.lg-split + .lg-split{border-top:1px solid rgba(43,38,32,.10)}
.lg-split-copy{min-width:0}
.lg-split-media{min-width:0;display:flex;justify-content:center}
.lg-split-media .lg{max-width:560px}
.lg-split-media .lg-fig{max-width:560px}
.lg-split-media .lg-fig .lg{max-width:none}
.lg-split--flip .lg-split-copy{order:2}
.lg-split--flip .lg-split-media{order:1}
@media (max-width:900px){
  .lg-split{grid-template-columns:1fr;gap:30px;padding:44px 0}
  .lg-split--flip .lg-split-copy{order:0}
  .lg-split--flip .lg-split-media{order:1}
  .lg-split-media .lg{max-width:520px;width:100%}
  .lg-split-media .lg-fig{max-width:520px;width:100%}
  .lg-split-media .lg-fig .lg{max-width:none}
}