/* LeapCode Wave 2e shared components: KPI strip, rotator (DR-22), journey line (LR-07 v0.3), emphasis (DR-20).
   Needs tokens.css and registry-tokens.css. Copy-agnostic: all words come from the page. */

/* ======== DR-20 emphasis utilities ======== */
/* Quote key words: bold + underline (2-4 words, inside a quote with attribution). Not link-coloured, not <u>. */
.lc-key { font-weight: 700; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
/* Owned line key words: bold + italic (2-5 words, body, pull lines, graphics). */
.lc-own { font-weight: 700; font-style: italic; }
/* Urdu script takes bold only, never underline (DR-20.3.9). */
[lang="ur"] .lc-key, .lc-key[lang="ur"] { text-decoration: none; }

/* ======== KPI strip (under every hero) ======== */
.lc-kpis { list-style: none; margin: 0; padding: var(--s-5,24px) var(--gutter,16px); display: grid; gap: var(--s-4,16px) var(--s-5,24px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--container,75rem); margin-inline: auto; }
.lc-kpis[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 40em) { .lc-kpis[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 29.99em) { .lc-kpis[data-count="3"] { grid-template-columns: minmax(0, 1fr); } }
.lc-kpi { border-top: 4px solid var(--lc-acc-strong, var(--reg-legacy-4)); padding-top: var(--s-2,8px); min-width: 0; }
.lc-kpi__n { display: block; font: var(--w-bold,700) clamp(1.75rem, 1.3rem + 2vw, 2.5rem)/1.1 var(--font-heading); color: var(--lc-acc-strong, var(--fg)); font-variant-numeric: tabular-nums; }
.lc-kpi__l { display: block; font-size: var(--fs-small,.875rem); line-height: 1.4; color: var(--lc-fg, var(--fg)); overflow-wrap: anywhere; }
.lc-kpi__i { margin-inline-end: .25em; }

/* ======== Rotator (DR-22) ======== */
.lc-rot { max-width: var(--container,75rem); margin-inline: auto; padding: var(--s-5,24px) var(--gutter,16px); color: var(--lc-fg, var(--fg)); }
.lc-rot__h { margin: 0 0 var(--s-3,12px); font: var(--w-bold,700) var(--fs-h3,1.5rem)/1.2 var(--font-heading); }
.lc-rot__list { list-style: none; margin: 0; padding: 0; display: grid; }
/* Without JS every quote shows, in order, with a gap. */
.lc-rot__list > li { margin: 0 0 var(--s-4,16px); }
.lc-rot__q { margin: 0; padding: var(--s-3,12px) var(--s-4,16px); border-inline-start: 4px solid var(--lc-acc-strong, var(--reg-legacy-4)); font: 500 var(--fs-lead,1.2rem)/1.45 var(--font-heading); }
.lc-rot__q p { margin: 0; }
.lc-rot__who { display: block; margin-top: var(--s-2,8px); font: 400 var(--fs-small,.875rem)/1.4 var(--font-body); color: var(--fg-muted); }
.lc-rot__ur { display: block; margin-top: var(--s-2,8px); font: 400 .9375rem/1.9 var(--font-arabic, "Cairo", "Zain", sans-serif); direction: rtl; text-align: start; color: var(--lc-fg, var(--fg)); opacity: .9; }
.lc-rot__ctl { display: none; align-items: center; gap: var(--s-3,12px); margin-top: var(--s-3,12px); flex-wrap: wrap; }
.lc-rot__btn { min-width: var(--tap,44px); min-height: var(--tap,44px); padding: 0 var(--s-4,16px); border: 1px solid var(--line-strong, #6B7B82); border-radius: var(--r-ctl,6px); background: transparent; color: inherit; font: 600 var(--fs-small,.875rem) var(--font-body); cursor: pointer; }
.lc-rot__btn:hover { border-color: var(--lc-acc-strong, currentColor); }
.lc-rot__btn:focus-visible { outline: var(--focus-w,3px) solid var(--focus, #D44040); outline-offset: var(--focus-offset,2px); }
.lc-rot__count { font-size: var(--fs-small,.875rem); font-variant-numeric: tabular-nums; }

/* JS on: all items share 1 grid cell, so the box is as tall as the tallest quote (CLS 0). Only opacity/visibility change. */
.lc-rot.is-on .lc-rot__list > li { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.lc-rot.is-on .lc-rot__list > li.is-active { opacity: 1; visibility: visible; transition: opacity 300ms ease; }
.lc-rot.is-on .lc-rot__ctl { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .lc-rot.is-on .lc-rot__list > li, .lc-rot.is-on .lc-rot__list > li.is-active { transition: none; }
}

/* ======== Journey line (LR-07 v0.3). The <ol> is the truth; this CSS draws the line. ======== */
.lc-jny { --jny-done:#0B8A6B; --jny-here:#D44040; --jny-todo:#6B7B82; max-width: var(--container,75rem); margin-inline: auto; padding: var(--s-5,24px) var(--gutter,16px); color: var(--lc-fg, var(--fg)); }
:root[data-theme="dark"] .lc-jny { --jny-done:#5FD4B0; --jny-here:#FF9B93; --jny-todo:#A3B0B6; }
.lc-jny__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5,24px); grid-template-columns: minmax(0,1fr); position: relative; }
.lc-jny__st { position: relative; padding-inline-start: 44px; min-width: 0; }
/* phone: vertical line down the left, dot per station */
.lc-jny__st::before { content: ""; position: absolute; inset-inline-start: 15px; top: 20px; bottom: calc(-1 * var(--s-5,24px)); border-inline-start: 3px dashed var(--jny-todo); }
.lc-jny__st:last-child::before { display: none; }
.lc-jny__st.is-done::before, .lc-jny__st.is-here::before { border-inline-start-style: solid; border-color: var(--jny-done); }
.lc-jny__st.is-here::before { border-image: linear-gradient(var(--jny-done), var(--jny-todo)) 1; }
.lc-jny__dot { position: absolute; inset-inline-start: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--jny-todo); background: var(--bg, #fff); box-sizing: border-box; display: grid; place-items: center; font-size: 11px; line-height: 1; color: #fff; }
.is-done > .lc-jny__dot { background: var(--jny-done); border-color: var(--jny-done); }
.is-here > .lc-jny__dot { background: var(--bg, #fff); border-color: var(--jny-here); width: 24px; height: 24px; inset-inline-start: 4px; top: 4px; }
.lc-jny__lbl { display: block; font: var(--w-bold,700) 1.0625rem/1.3 var(--font-heading); }
.lc-jny__sub { display: block; margin-top: 2px; font-size: var(--fs-small,.875rem); line-height: 1.4; color: var(--fg-muted); }
.lc-jny__big { display: flex; flex-wrap: wrap; gap: 2px var(--s-3,12px); font: var(--w-bold,700) 1.0625rem/1.3 var(--font-heading); }
.lc-jny__big span + span::before { content: "\00B7"; margin-inline-end: var(--s-3,12px); color: var(--jny-todo); }
.lc-jny__words { display: block; margin-top: 2px; font-size: var(--fs-small,.875rem); line-height: 1.4; color: var(--fg-muted); }
.lc-jny__dig { display: block; margin-top: 2px; font: var(--w-bold,700) .875rem/1 var(--font-heading); color: var(--c-gold-deep, #8E6A1D); }
:root[data-theme="dark"] .lc-jny__dig { color: var(--d-gold, #D9A83F); }
.lc-jny__pill { display: inline-block; margin-inline-start: var(--s-2,8px); padding: 2px 10px; border-radius: 999px; background: var(--jny-here); color: #fff; font: 600 .875rem/1.4 var(--font-body); vertical-align: middle; }
:root[data-theme="dark"] .lc-jny__pill { color: #1A1A1A; }
.lc-jny__rocket { font-size: 1.25rem; }
.is-here > .lc-jny__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--jny-here); opacity: 0; animation: lc-jny-pulse 2.4s ease-out 3; }
@keyframes lc-jny-pulse { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
/* tablet and up: 1 horizontal row, line runs across behind the dots */
@media (min-width: 45em) {
  .lc-jny__list { grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); grid-template-columns: none; gap: var(--s-4,16px); }
  .lc-jny__st { padding-inline-start: 0; padding-top: 40px; }
  .lc-jny__st::before { inset-inline-start: 20px; inset-inline-end: calc(-1 * var(--s-4,16px)); top: 15px; bottom: auto; width: auto; border-inline-start: 0; border-top: 3px dashed var(--jny-todo); }
  .lc-jny__st.is-done::before, .lc-jny__st.is-here::before { border-top-style: solid; border-top-color: var(--jny-done); border-inline-start: 0; border-image: none; }
  .lc-jny__st.is-here::before { border-image: linear-gradient(90deg, var(--jny-done), var(--jny-todo)) 1; border-top-width: 3px; }
  .lc-jny__dot { inset-inline-start: 0; top: 6px; }
  .is-here > .lc-jny__dot { inset-inline-start: -2px; top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .is-here > .lc-jny__dot::after { animation: none; opacity: 0; } }

/* SOCIETY(TM) staircase: 7 stages, each step 1 tread higher, Registry tj1..tj7 fills. Text sits on a step; ink or white by P9. */
.lc-stairs { max-width: var(--container,75rem); margin-inline: auto; padding: var(--s-5,24px) var(--gutter,16px); }
.lc-stairs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lc-stairs__step { padding: 10px 14px; border-radius: var(--r-ctl,6px); color: #1A1A1A; background: var(--st, #ccc); min-width: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lc-stairs__step[data-st="1"] { --st: var(--stage-setup); margin-inline-start: 0; }
.lc-stairs__step[data-st="2"] { --st: var(--stage-standardize); margin-inline-start: 3%; }
.lc-stairs__step[data-st="3"] { --st: var(--stage-optimize); margin-inline-start: 6%; }
.lc-stairs__step[data-st="4"] { --st: var(--stage-scale); margin-inline-start: 9%; color: #fff; } /* Scale: neither ink (4.33) nor white (4.02) reaches 4.5 on tj4, so white text sits on a 4px ink-tinted shadow-free chip below */
.lc-stairs__step[data-st="5"] { --st: var(--stage-integrate); margin-inline-start: 12%; color: #fff; }
.lc-stairs__step[data-st="6"] { --st: var(--stage-ecosystem); margin-inline-start: 15%; color: #fff; }
.lc-stairs__step[data-st="7"] { --st: var(--stage-transcend); margin-inline-start: 18%; color: #fff; }
.lc-stairs__step[data-st="4"] > * { background: rgba(26,26,26,.78); padding: 0 6px; border-radius: 4px; }
.lc-stairs__n { font: var(--w-bold,700) .875rem var(--font-heading); }
.lc-stairs__t { font: var(--w-bold,700) 1rem/1.3 var(--font-heading); }
.lc-stairs__d { font-size: var(--fs-small,.875rem); flex-basis: 100%; }
@media (min-width: 45em) {
  /* desktop: true staircase, steps rise left to right */
  .lc-stairs__list { grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); align-items: end; gap: 4px; }
  .lc-stairs__step { margin-inline-start: 0 !important; flex-direction: column; gap: 2px; align-items: flex-start; min-height: calc(72px + var(--rise-n, 0) * 22px); }
  .lc-stairs__step[data-st="1"] { --rise-n: 0; } .lc-stairs__step[data-st="2"] { --rise-n: 1; } .lc-stairs__step[data-st="3"] { --rise-n: 2; }
  .lc-stairs__step[data-st="4"] { --rise-n: 3; } .lc-stairs__step[data-st="5"] { --rise-n: 4; } .lc-stairs__step[data-st="6"] { --rise-n: 5; } .lc-stairs__step[data-st="7"] { --rise-n: 6; }
}

/* ======== DR-23 Connected steps (W2f) ========
   Steps inside a group are joined by a dotted line. Groups are joined by a gradient dotted "snake" (an inline SVG, aria-hidden).
   Wide screens: groups side by side, the line runs left to right. Phones: everything stacks and the line runs down.
   The <ol> lists are the truth; the lines are decoration. Dots drift slowly; reduced motion stops them.
   Markup:
   <div class="lc-conn">
     <ol class="lc-conn__group"><li class="lc-conn__step">...</li><li class="lc-conn__step">...</li></ol>
     <svg class="lc-conn__snake" aria-hidden="true" focusable="false" viewBox="0 0 120 60" preserveAspectRatio="none"><path class="lc-conn__h" d="M0 8 C40 8 40 52 80 52 S110 20 120 20"/><path class="lc-conn__v" d="M60 0 C105 14 15 42 60 60"/></svg>
     <ol class="lc-conn__group">...</ol>
   </div>
   Put 1 <svg class="lc-conn__defs"> with the shared gradient (id lc-conn-grad) once per page (see _components/index.html). */
.lc-conn { --conn-dot: var(--jny-todo, #6B7B82); --conn-w: 3px; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: var(--container,75rem); margin-inline: auto; padding: var(--s-5,24px) var(--gutter,16px); }
.lc-conn__group { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lc-conn__step { position: relative; padding: var(--s-3,12px) 0 var(--s-3,12px) 44px; min-width: 0; }
/* phone: dotted line down the left of the group, a dot per step */
.lc-conn__step::before { content: ""; position: absolute; inset-inline-start: 15px; top: 34px; bottom: -12px; border-inline-start: var(--conn-w) dotted var(--conn-dot); }
.lc-conn__step:last-child::before { display: none; }
.lc-conn__step::after { content: ""; position: absolute; inset-inline-start: 8px; top: 16px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--conn-dot); background: var(--bg, #fff); box-sizing: border-box; }
.lc-conn__snake { display: block; width: 60px; height: 96px; margin: 0 0 0 8px; overflow: visible; }
.lc-conn__snake .lc-conn__h { display: none; }
.lc-conn__snake path { fill: none; stroke: url(#lc-conn-grad); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 11; vector-effect: non-scaling-stroke; animation: lc-conn-flow 2.4s linear infinite; }
.lc-conn__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes lc-conn-flow { to { stroke-dashoffset: -22; } }
@media (min-width: 45em) {
  .lc-conn { flex-direction: row; align-items: flex-start; }
  .lc-conn__group { flex-direction: row; flex: 1 1 0; min-width: 0; gap: var(--s-4,16px); }
  .lc-conn__step { flex: 1 1 0; padding: 40px 0 0; }
  .lc-conn__step::before { inset-inline-start: 22px; inset-inline-end: calc(-1 * var(--s-4,16px)); top: 15px; bottom: auto; width: auto; border-inline-start: 0; border-top: var(--conn-w) dotted var(--conn-dot); }
  .lc-conn__step::after { inset-inline-start: 0; top: 6px; }
  .lc-conn__snake { flex: 0 0 120px; width: 120px; height: 60px; margin: 0 var(--s-3,12px); align-self: flex-start; margin-top: -2px; }
  .lc-conn__snake .lc-conn__v { display: none; }
  .lc-conn__snake .lc-conn__h { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .lc-conn__snake path { animation: none; } }
@media print { .lc-conn__snake path { animation: none; stroke: #6B7B82; } }

/* ================= W2j Q-11: "The Change You'll Experience" = an inverted panel, the same on units, engines, sprints and rooms ================= */
.lc-change { margin: 48px 0 12px; padding: clamp(22px, 4vw, 40px); border-radius: 20px; background: #1E2428; color: #fff; }
.lc-change > h3, .lc-change .eyebrow { margin: 0 0 20px; font: 800 clamp(1.6rem, 3.2vw, 1.9rem)/1.15 var(--font-heading, inherit); letter-spacing: 0; text-transform: none; color: #fff; }
.lc-change .eyebrow::before { display: none; }
.lc-change > h3 .lc-ul { text-decoration-color: #D44040; }
.lc-change .band__head { margin-bottom: 18px; }
.lc-change .band__head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.78); }
.lc-change .band__head h2 .lc-ul { color: #fff; }
.lc-change .ft, .lc-change .op-fromto { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lc-change .ft li, .lc-change .op-fromto li { border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.04); padding: 14px 18px; }
.lc-change .ft li > span:first-child, .lc-change .op-fromto__from { color: rgba(255,255,255,.72); text-decoration: line-through; text-decoration-color: rgba(229,85,79,.7); }
.lc-change .ft .ar, .lc-change .op-fromto__arrow { color: #FF8A84; font-weight: 800; }
.lc-change .ft .to, .lc-change .op-fromto__to { color: #fff; font-weight: 800; }
@media (max-width: 40em) { .lc-change { margin-left: -4px; margin-right: -4px; border-radius: 16px; } }

/* 1.8.1 lane 3 (X-18): a KPI item that links to the Frameworks page (scripts/apply_framework_links_w3b.py) */
.lc-kpi > a.fw-kpi { display: block; color: inherit; text-decoration: none; }
.lc-kpi > a.fw-kpi:hover .lc-kpi__l, .lc-kpi > a.fw-kpi:focus-visible .lc-kpi__l { text-decoration: underline; text-underline-offset: .2em; }
.lc-kpi > a.fw-kpi:focus-visible { outline: 3px solid #F07070; outline-offset: 4px; }
/* 1.8.2 (KZ): the KPI strip ends with "& Counting", a small trailing label on the figures' baseline, on 1 line on desktop.
   Shared by the home page and /frameworks/ (both strips come from scripts/fw_kpis.py) */
.lc-kpis[data-more] .fw-kpi-more { grid-column: 1 / -1; padding-top: 0; font: 700 1rem/1.3 var(--font-heading); color: #E7EBEC; white-space: nowrap; }
@media (min-width: 40em) {
  .lc-kpis[data-count="4"][data-more] { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .lc-kpis[data-more] .fw-kpi-more { grid-column: auto; padding-top: 12px; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); line-height: 1.1; }
  .lc-kpis[data-more] .fw-kpi-more > span { font-size: clamp(1rem, .9rem + .4vw, 1.25rem); letter-spacing: .01em; }
}
@media (min-width: 40em) { .hk .lc-kpis[data-more] .fw-kpi-more { padding-top: 16px; } }