/* LeapCode Wave 2f page styles (W2f-P-pages). Page-scoped, namespaced (rm2-, vz2-, bsc2-, lts-, kz-), no change to the shared shell.
   Needs tokens.css, registry-tokens.css and w2-components.css. */

/* ---- hero KPI strip (same look as the unit and engine pages) ---- */
.lc-kpis-wrap { position: relative; z-index: 3; padding-block: 0; background: none; margin-top: 28px; }
.lc-kpis-wrap .lc-kpis { padding: var(--s-4, 16px) 0 var(--s-2, 8px); max-width: none; margin: 0; }
.lc-kpis-wrap .lc-kpi__l { color: var(--lc-fg, #F2F4F4); }
.lc-kpis-wrap .lc-kpi__n { color: #fff; }
.lc-kpis-wrap .lc-kpi { border-top-color: #D44040; }
.lc-kpis__fn { margin: 0; padding: 0 0 var(--s-2, 8px); font-size: .875rem; color: var(--lc-fg, #F2F4F4); opacity: .85; }

/* ---- roadmap: the road in 4 groups (DR-23: dotted inside a group, gradient dotted snake between groups) ---- */
.rm2 { --dot: #6B7B82; }
.rm2-g { margin: 0; padding: 8px 0 0; }
.rm2-g--a { --dot: #D44040; --tint: rgba(200,58,58,.06); } .rm2-g--b { --dot: #E07830; --tint: rgba(224,120,48,.07); } .rm2-g--c { --dot: #0B8A6B; --tint: rgba(11,138,107,.06); } .rm2-g--d { --dot: #1A6DAF; --tint: rgba(26,109,175,.06); }
/* R-14: each group heading block (heading + intro line) sits in a rounded box in the group's colour */
.rm2-hb { border: 2px solid var(--dot); background: var(--tint, transparent); border-radius: 16px; padding: 18px 22px; margin: 0 0 28px; }
.rm2-hb .rm2-g__h { margin: 0; }
.rm2-hb .rm2-g__h + .rm2-g__lead { margin: .45em 0 0; }
.rm2-g__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .5em; margin: 0 0 .35em; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.rm2-g__h b { font-weight: 800; }
.rm2-br { font-weight: 400; font-size: .62em; color: var(--fg-muted,#5A696F); letter-spacing: 0; }
.rm2-g__lead { margin: 0 0 28px; font-size: 1.1rem; color: var(--fg-muted); }
.rm2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .rm2-steps--3, .rm2-steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rm2-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm2-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .rm2-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rm2-steps > li { position: relative; margin: 0; padding: 0; min-width: 0; display: flex; }
.rm2-box { position: relative; flex: 1 1 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px 68px; min-width: 0; display: flex; flex-direction: column; }
/* Q-08: the dotted line and circles above each group are gone. Phones: a short vertical dotted connector between stacked cards (set Q) */
@media (max-width: 47.99em) {
  .rm2-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 100%; height: 28px; margin-left: -1px; border-left: 3px dotted var(--dot); pointer-events: none; }
}
.rm2-box h3 { margin: 0 0 .5em; font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.rm2-box p { margin: 0 0 .8em; color: var(--fg-muted); }
.rm2-box p:last-of-type { margin-bottom: 0; }
.rm2-box .cta, .rm2-box .rm2-btn { margin-top: auto; align-self: flex-start; }
.rm2-box p + .cta, .rm2-box p + .rm2-btn { margin-top: 18px; }
.rm2-n { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; background: #EEF1F1; color: var(--fg-muted,#5A696F); display: grid; place-items: center; font: 700 .85rem var(--font-heading); }
.rm2-tag { display: inline-block; margin: 0 0 10px; font: 700 .72rem var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted,#5A696F); }
.rm2-sub { margin: 0 0 .7em; font-size: .9rem; color: #6B7B82; }
.rm2-snake { display: block; width: 100%; max-width: 560px; height: 120px; margin: 18px auto 14px; overflow: visible; flex: none; }
.rm2-snake--r { transform: scaleX(-1); }
.rm2 .lc-conn__snake .lc-conn__h { display: none; }
.rm2 .lc-conn__snake .lc-conn__v { display: inline; }
.rm2-cond { margin-top: 26px; padding: 16px 20px; border-left: 4px solid #1A6DAF; background: #F2F7FB; border-radius: 0 12px 12px 0; }
.rm2-cond p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .rm2 .lc-conn__snake path { animation: none; } }
.rm2-how { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 48em) { .rm2-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } }
.rm2-how li { padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; border-left: 4px solid #D44040; }
.rm2-how b { font-family: var(--font-heading); font-size: 1.05rem; }
.rm2-how span { display: block; color: var(--fg-muted); margin-top: 2px; }
.rm2-q { margin-top: 24px; font: 700 1.15rem var(--font-heading); }

/* ---- vision page ---- */
.vz2-quotes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 48em) { .vz2-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vz2-quotes li { margin: 0; padding: 18px 20px; border-left: 4px solid #D44040; background: #fff; border-radius: 0 12px 12px 0; font: 500 1.05rem/1.5 var(--font-heading); }
.vz2-quotes b { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; font-weight: 700; }
.vz2-who { margin: 12px 0 0; color: var(--fg-muted); font-size: .9rem; }
.vz2-big { margin: 18px 0 10px; font: 700 clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem)/1.2 var(--font-heading); }
.vz2-sub { margin-top: 30px; }
.vz2-lists { display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 48em) { .vz2-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vz2-lists ul { margin: 0; padding-left: 1.2em; } .vz2-lists li { margin: .45em 0; }
.vz2-struck { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 48em) { .vz2-struck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vz2-struck li { margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: line-through; text-decoration-color: rgba(200, 58, 58, .6); color: var(--fg-muted); }

/* ---- about ---- */
.ab2-quotes { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 48em) { .ab2-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab2-quotes li { margin: 0; padding: 14px 18px; border-left: 4px solid #D44040; background: #fff; border-radius: 0 12px 12px 0; font: 500 1.02rem/1.5 var(--font-heading); }
.ab2-quotes b { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; }
.ab2-more { margin-top: 22px; }
.ab2-more a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 700; }

/* ---- BSC LEAP: viewport cards ---- */
.bsc2 { display: grid; gap: 22px; }
@media (min-width: 64em) { .bsc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bsc2-c { border: 1px solid var(--line); border-top: 6px solid var(--vc); border-radius: 16px; background: #fff; padding: 26px 26px 22px; min-width: 0; }
.bsc2-c h3 { display: flex; gap: .45em; align-items: baseline; margin: 0 0 .35em; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); color: var(--vc); color: color-mix(in srgb, var(--vc) 72%, #000); } /* 1.8.6 DR-21.6: Registry hex as a darker text shade of the same hue (3:1+ large) */
.bsc2-c h3 small { font-size: .55em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.bsc2-k { margin: 18px 0 8px; font: 700 .78rem var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.bsc2-ind { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.bsc2-ind li { margin: 0; padding: 4px 11px; border-radius: 8px; background: var(--bg-tint); font-size: .9rem; }
.bsc2-fn { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bsc2-fn li { margin: 0; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--vc); color: var(--fg); font-size: .88rem; font-weight: 600; background: #fff; }
.bsc2-kpis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bsc2-kpis li { margin: 0; padding: 10px 12px; border-top: 3px solid var(--vc); background: var(--bg-tint); border-radius: 0 0 8px 8px; font-size: .88rem; line-height: 1.35; }
@media (max-width: 30em) { .bsc2-kpis { grid-template-columns: minmax(0, 1fr); } }
.bsc2-q { margin-top: 28px; }

/* ---- guarantees / pages: keep centred blocks centred as the page widens (M-20) ---- */
.keep-centre { margin-inline: auto; }

/* clients: the voices slider keeps its own breathing room above the closing call (M-03) */
.lc-voices + .lc-after-voices { padding-top: 72px; }
.lc-voices:not([hidden]) { margin-bottom: 0; }
.hero.dark .lc-kpis-wrap, .band.hero .lc-kpis-wrap { margin-top: 28px; }

/* O-35 to O-37 (roadmap): cards joined card to card by moving dots; gaps +15% (32px to 37px); group 2 onward blink; snake drawn by assets/js/roadmap-snake.js */
#road { position: relative; --rm2-gap: 37px; }
#road .rm2-steps { column-gap: var(--rm2-gap); }
@keyframes rm2-dots { to { background-position: 18px 50%; } }
@keyframes rm2-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (min-width: 48em) {
  /* Q-03: the short connector sits at the middle of the card height */
  #road .rm2-box::after { content: ""; position: absolute; left: 100%; top: 50%; width: var(--rm2-gap); height: 6px; margin-top: -3px; pointer-events: none;
    background: radial-gradient(circle, var(--dot) 1.6px, transparent 2.2px) 0 50% / 9px 6px repeat-x; animation: rm2-dots 1.4s linear infinite; }
  #road .rm2-steps--3 > li:nth-child(3n) .rm2-box::after, #road .rm2-steps--6 > li:nth-child(3n) .rm2-box::after,
  #road .rm2-steps--2 > li:nth-child(2n) .rm2-box::after, #road .rm2-steps--4 > li:nth-child(2n) .rm2-box::after { display: none; }
  #road .rm2-g:not(.rm2-g--a) .rm2-box::after { animation: rm2-dots 1.4s linear infinite, rm2-blink 1.6s ease-in-out infinite; }
}
@media (min-width: 72em) {
  #road .rm2-steps--4 > li:nth-child(2n) .rm2-box::after { display: block; }
  #road .rm2-steps--4 > li:nth-child(4n) .rm2-box::after { display: none; }
}
@media (max-width: 47.99em) { #road .rm2-g:not(.rm2-g--a) .rm2-steps > li::after { animation: rm2-blink 1.6s ease-in-out infinite; } }
/* the drawn snake (desktop only; phones keep the short vertical connector) */
#road .rm2-flow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
#road .rm2-flow path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 11; animation: lc-conn-flow 2.4s linear infinite; }
@media (min-width: 48em) { #road.rm2--flow .rm2-snake { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  #road .rm2-box::after, #road .rm2-steps > li::after, #road .rm2-flow path { animation: none !important; opacity: 1; }
  #road .rm2-more, #road .rm2-box { transition: none !important; }
  #road .rm2-flow path { stroke-dasharray: 0.1 9; }
}
/* P-20: icon before each How We Work title */
.rm2-how b > span[aria-hidden] { display: inline; margin: 0 .3em 0 0; }
#road .rm2-nb { white-space: nowrap; }

/* wrap connectors (row to row inside a group, drawn by roadmap-snake.js): same moving dots as the short ones, blinking from group 2 on */
#road .rm2-flow path.rm2-wrap { stroke-width: 3.4; stroke-dasharray: 0.1 9; }
#road .rm2-flow path.rm2-wrap--blink { animation: lc-conn-flow 2.4s linear infinite, rm2-blink 1.6s ease-in-out infinite; }

/* Q-09: Start Here, red, with a small flag, left of card 1 on wide screens, above it otherwise */
#road .rm2-g--a .rm2-steps { padding-top: 30px; }
#road .rm2-start { position: absolute; left: 0; top: -30px; display: inline-flex; align-items: center; gap: 6px; font: 800 .95rem/1 var(--font-heading); color: var(--c-sol-text,#B83434); white-space: nowrap; }
#road .rm2-start svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 87.5em) {
  #road .rm2-g--a .rm2-steps { padding-top: 0; }
  #road .rm2-start { left: auto; right: calc(100% + 14px); top: 22px; }
}

/* Q-07: hover, keyboard focus or tap: the card turns red and opens 3-4 key pointers in place (the row grows; the snake redraws) */
#road .rm2-more { display: grid; grid-template-rows: 0fr; visibility: hidden; opacity: 0; transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s .28s; }
#road .rm2-more > ul { overflow: hidden; min-height: 0; margin: 0; padding: 0; list-style: none; }
#road .rm2-more li { position: relative; padding: 0 0 0 20px; margin: 0 0 .45em; font-size: .95rem; line-height: 1.4; }
#road .rm2-more li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#road .rm2-box { transition: background-color .2s ease, color .2s ease, border-color .2s ease; cursor: default; }
#road .rm2-box.is-open, #road .rm2-box:focus-within, #road .rm2-box:focus-visible { background: #D44040; border-color: #D44040; color: #fff; }
@media (hover: hover) { #road .rm2-box:hover { background: #D44040; border-color: #D44040; color: #fff; } }
#road .rm2-box:focus-visible { outline: 3px solid #1A1A1A; outline-offset: 3px; }
#road .rm2-box.is-open .rm2-more, #road .rm2-box:focus-within .rm2-more { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s; margin-top: 14px; }
@media (hover: hover) { #road .rm2-box:hover .rm2-more { grid-template-rows: 1fr; visibility: visible; opacity: 1; transition: grid-template-rows .28s ease, opacity .2s ease, visibility 0s; margin-top: 14px; } }
#road .rm2-box.is-open :is(h3, p, .rm2-sub, .rm2-tag, a:not(.cta)), #road .rm2-box:focus-within :is(h3, p, .rm2-sub, .rm2-tag, a:not(.cta)) { color: #fff; }
@media (hover: hover) { #road .rm2-box:hover :is(h3, p, .rm2-sub, .rm2-tag, a:not(.cta)) { color: #fff; } }
#road .rm2-box.is-open .cta, #road .rm2-box:focus-within .cta { background: #fff !important; color: var(--c-sol-text,#B83434) !important; border-color: #fff; }
@media (hover: hover) { #road .rm2-box:hover .cta { background: #fff !important; color: var(--c-sol-text,#B83434) !important; border-color: #fff; } }
#road .rm2-box.is-open .rm2-n, #road .rm2-box:focus-within .rm2-n { background: #fff; color: var(--c-sol-text,#B83434); }
@media (hover: hover) { #road .rm2-box:hover .rm2-n { background: #fff; color: var(--c-sol-text,#B83434); } }
#road .rm2-box > .rm2-more + .cta { margin-top: 18px; }