/* LeapCode quiz.css (release 1.3): shared look for question cards, answer circles, voice note and autosave notice.
   Used by Momentum Check and Momentum Check · Detailed. Rules: 1 icon per question (in the stem, never in the answers),
   key words bold, a few words italic, the rest unbold. Answers carry no icons except the 3 circles
   (full, half, quarter) on Working, Partly, Missing. */

/* ---- question stem: plain weight, bold key words, a few italic words, 1 icon at the left ---- */
.qcard legend { font-weight: 400; font-size: 1.1rem; line-height: 1.45; color: var(--fg, #1a1a1a); }
.qcard legend b { font-weight: 700; color: var(--fg-heading, #111); }
.qcard legend i { font-style: italic; padding-inline: .12em; } /* L-026: italic glyph overhangs the straight quote beside it; padding is layout only, stored text unchanged */
.qcard legend[data-i] { position: relative; padding-left: 2.5rem; }
.qcard legend[data-i]::before { content: attr(data-i); position: absolute; left: 0; top: 1.15rem; width: 2rem; text-align: center; font-size: 1.45rem; line-height: 1.2; }

/* ---- Pre-Flight answers: full-width rows, plain text, a circle for how complete ---- */
.pq .opt3 { display: flex; align-items: flex-start; gap: 10px; width: 100%; border-radius: 12px; padding: 10px 14px; margin: 8px 0; font-weight: 400; line-height: 1.45; }
.pq .opt3 input { flex: none; margin: 2px 0 0; }
.pq .opt3 .dt { flex: none; width: 1.1em; text-align: center; font-size: 1.05rem; line-height: 1.3; color: #5E6D74; }
.pq .opt3:has(input:checked) { font-weight: 600; }
.pq .opt3:has(input:checked) .dt { color: #C83A3A; }
.pq .opt3.skip { width: auto; display: inline-flex; padding: 6px 14px; color: var(--fg-muted, #5b6470); font-size: .9rem; }

/* ---- voice note and autosave notice ---- */
.lc-voice { display: block; margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #F4F7F8; border: 1px solid var(--line, #dfe5e8); font-size: .9rem; line-height: 1.5; color: var(--fg-muted, #44525a); }
.lc-voice b { color: var(--fg-heading, #111); }
.lc-voice a { color: inherit; text-decoration: underline; text-decoration-color: #D44040; text-underline-offset: 3px; }
.lc-voice small { display: block; margin-top: 4px; font-size: .8rem; color: var(--fg-muted, #5b6470); }
.lc-voice a:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; border-radius: 4px; }

/* ---- answer colours (release 1.3.1): the answer you pick lights up by how well it is working.
        green = working, orange = partly, red = missing. Momentum Check has 4 levels: red, orange, lime, green (value 0..3). ---- */
:root { --lv-g: #11B890; --lv-gt: #E7F7F2; --lv-o: #E07830; --lv-ot: #FDF0E6; --lv-r: #C83A3A; --lv-rt: #FBEAEA; --lv-l: #7FB33A; --lv-lt: #F1F7E6; }
.pq .opt3 .dt { font-size: 1.15rem; }
.pq .opt3:has(input[value="w"]) .dt { color: var(--lv-g); }
.pq .opt3:has(input[value="p"]) .dt { color: var(--lv-o); }
.pq .opt3:has(input[value="m"]) .dt { color: var(--lv-r); }
.pq .opt3:has(input[value="w"]:checked) { border-color: var(--lv-g); background: var(--lv-gt); }
.pq .opt3:has(input[value="p"]:checked) { border-color: var(--lv-o); background: var(--lv-ot); }
.pq .opt3:has(input[value="m"]:checked) { border-color: var(--lv-r); background: var(--lv-rt); }
.pq .opt3 input[value="w"] { accent-color: var(--lv-g); } .pq .opt3 input[value="p"] { accent-color: var(--lv-o); } .pq .opt3 input[value="m"] { accent-color: var(--lv-r); }
.pq .opt3:has(input:checked) .dt { color: inherit; }
.pq .opt3:has(input[value="w"]:checked) .dt { color: var(--lv-g); } .pq .opt3:has(input[value="p"]:checked) .dt { color: var(--lv-o); } .pq .opt3:has(input[value="m"]:checked) .dt { color: var(--lv-r); }
.qcard:not(.pq) .opt:has(input[value="0"]:checked) { border-color: var(--lv-r); background: var(--lv-rt); }
.qcard:not(.pq) .opt:has(input[value="1"]:checked) { border-color: var(--lv-o); background: var(--lv-ot); }
.qcard:not(.pq) .opt:has(input[value="2"]:checked) { border-color: var(--lv-l); background: var(--lv-lt); }
.qcard:not(.pq) .opt:has(input[value="3"]:checked) { border-color: var(--lv-g); background: var(--lv-gt); }
.qcard:not(.pq) .opt input[value="0"]:checked { background: var(--lv-r); border-color: var(--lv-r); }
.qcard:not(.pq) .opt input[value="1"]:checked { background: var(--lv-o); border-color: var(--lv-o); }
.qcard:not(.pq) .opt input[value="2"]:checked { background: var(--lv-l); border-color: var(--lv-l); }
.qcard:not(.pq) .opt input[value="3"]:checked { background: var(--lv-g); border-color: var(--lv-g); }
/* underline for the words the answer turns on */
.qcard legend u, .oq label.f u { text-decoration: underline; text-decoration-color: #C83A3A; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.qcard:not(.pq) .opt:has(input[value="na"]:checked) { border-color: #5E6D74; background: #F4F7F8; }
.qcard:not(.pq) .opt input[value="na"]:checked { background: #5E6D74; border-color: #5E6D74; }
/* hours question has 5 levels: red, orange, gold, lime, green */
.qcard:has(input[name="q7"]) .opt:has(input[value="2"]:checked) { border-color: #D9A520; background: #FBF4DC; }
.qcard:has(input[name="q7"]) .opt input[value="2"]:checked { background: #D9A520; border-color: #D9A520; }
.qcard:has(input[name="q7"]) .opt:has(input[value="3"]:checked) { border-color: var(--lv-l); background: var(--lv-lt); }
.qcard:has(input[name="q7"]) .opt input[value="3"]:checked { background: var(--lv-l); border-color: var(--lv-l); }
.qcard:has(input[name="q7"]) .opt:has(input[value="4"]:checked) { border-color: var(--lv-g); background: var(--lv-gt); }
.qcard:has(input[name="q7"]) .opt input[value="4"]:checked { background: var(--lv-g); border-color: var(--lv-g); }

/* ---- band slider (release 1.3.1) ---- */
.lc-sl { margin: 10px 0 4px; padding: 14px 16px 12px; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 14px; background: #fff; }
.lc-sl__v { display: block; font: 700 1.05rem var(--font-heading, inherit); color: var(--fg-heading, #111); min-height: 1.5em; margin: 0 0 10px; }
.lc-sl.unset .lc-sl__v, .lc-sl.off .lc-sl__v { color: var(--fg-muted, #5b6470); font-weight: 600; }
.lc-sl__r { position: relative; height: 32px; }
.lc-sl input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; z-index: 2; touch-action: pan-y; }
.lc-sl input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #C83A3A var(--p, 0%), #E3E8EB var(--p, 0%)); }
.lc-sl input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: #E3E8EB; }
.lc-sl input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: #C83A3A; }
.lc-sl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: #C83A3A; border: 4px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lc-sl input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #C83A3A; border: 4px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.lc-sl.unset input[type=range]::-webkit-slider-runnable-track, .lc-sl.off input[type=range]::-webkit-slider-runnable-track { background: #E3E8EB; }
.lc-sl.unset input[type=range]::-webkit-slider-thumb, .lc-sl.off input[type=range]::-webkit-slider-thumb { background: #9AA7AD; }
.lc-sl.unset input[type=range]::-moz-range-thumb, .lc-sl.off input[type=range]::-moz-range-thumb { background: #9AA7AD; }
.lc-sl.unset input[type=range]::-moz-range-progress, .lc-sl.off input[type=range]::-moz-range-progress { background: #E3E8EB; }
.lc-sl input[type=range]:focus-visible { outline: 3px solid #D44040; outline-offset: 6px; border-radius: 8px; }
.lc-sl__t { position: absolute; left: 15px; right: 15px; top: 12px; height: 8px; pointer-events: none; z-index: 1; }
.lc-sl__t i { position: absolute; top: 12px; width: 2px; height: 6px; margin-left: -1px; background: #B9C0C4; }
.lc-sl__e { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .78rem; color: var(--fg-muted, #5b6470); }
.lc-sl__off { font: inherit; font-size: .85rem; margin-top: 8px; padding: 6px 14px; min-height: 44px; border: 1px solid var(--line, #dfe5e8); border-radius: 999px; background: #fff; color: var(--fg-muted, #44525a); cursor: pointer; }
.lc-sl__off.on { border-color: #5E6D74; background: #F4F7F8; font-weight: 600; color: var(--fg, #111); }
.lc-sl__off:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; }

/* ---- voice tip, 1 line (release 1.3.1). Replaces the earlier boxed note. ---- */
.lc-voice { padding: 0; margin: 6px 0 16px; border: 0; background: none; }
.lc-voice__t { font: inherit; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line, #dfe5e8); border-radius: 999px; background: #F4F7F8; color: var(--fg-muted, #44525a); cursor: pointer; }
.lc-voice__t:hover { border-color: #D44040; }
.lc-voice__t:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; }
.lc-voice__c { transition: transform .15s ease; } .lc-voice__t[aria-expanded="true"] .lc-voice__c { transform: rotate(180deg); }
.lc-voice__b { margin: 6px 0 0; padding: 10px 14px; border-radius: 12px; background: #F4F7F8; font-size: .9rem; line-height: 1.5; color: var(--fg-muted, #44525a); }
.lc-voice__d { display: none; }
.lc-voice-fab { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .lc-voice__d { display: inline; }
  .lc-voice-fab { display: inline-flex; align-items: center; gap: 0; position: fixed; right: 20px; bottom: 20px; z-index: 40; height: 56px; min-width: 56px; padding: 0 15px; border-radius: 999px; background: #fff; color: #1A1A1A !important; text-decoration: none; font: 700 .95rem var(--font-body, inherit); box-shadow: 0 6px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.08); overflow: hidden; white-space: nowrap; transition: box-shadow .2s ease, gap .2s ease; }
  .lc-voice-fab__i { flex: none; color: #C83A3A; }
  .lc-voice-fab__t { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .25s ease, opacity .2s ease; }
  .lc-voice-fab__t small { font-weight: 500; font-size: .8rem; color: #5E6D74; }
  .lc-voice-fab:hover, .lc-voice-fab:focus-visible { gap: 8px; box-shadow: 0 8px 26px rgba(0,0,0,.34), 0 0 0 2px #C83A3A; }
  .lc-voice-fab:hover .lc-voice-fab__t, .lc-voice-fab:focus-visible .lc-voice-fab__t { max-width: 320px; opacity: 1; }
  .lc-voice-fab:focus-visible { outline: 3px solid #D44040; outline-offset: 3px; }
}
}

/* ---- Step 3 boxes: full width, stacked, expandable ---- */
.oq .stack { display: grid; grid-template-columns: 1fr; gap: 10px; }
.oq textarea.open, .own textarea, textarea.grow { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; overflow-y: auto; }
.oq label.f[data-i]::before, .fgrid label[data-i]::before { content: attr(data-i) " "; }
.oq label.f u { text-decoration-color: #C83A3A; }
.oq label.f b, .fgrid label b { font-weight: 800; }

/* ---- hover previews the colour the answer would take (release 1.3.2) ---- */
.pq .opt3:has(input[value="w"]):hover { border-color: var(--lv-g); background: #F3FBF8; }
.pq .opt3:has(input[value="p"]):hover { border-color: var(--lv-o); background: #FEF8F2; }
.pq .opt3:has(input[value="m"]):hover { border-color: var(--lv-r); background: #FDF5F5; }
.pq .opt3.skip:hover { border-color: #5E6D74; background: #F4F7F8; }
.qcard:not(.pq) .opt:has(input[value="0"]):hover { border-color: var(--lv-r); background: #FDF5F5; }
.qcard:not(.pq) .opt:has(input[value="1"]):hover { border-color: var(--lv-o); background: #FEF8F2; }
.qcard:not(.pq) .opt:has(input[value="2"]):hover { border-color: var(--lv-l); background: #F8FBF2; }
.qcard:not(.pq) .opt:has(input[value="3"]):hover { border-color: var(--lv-g); background: #F3FBF8; }
.qcard:not(.pq) .opt:has(input[value="na"]):hover { border-color: #5E6D74; background: #F4F7F8; }
.qcard:has(input[name="q7"]) .opt:has(input[value="2"]):hover { border-color: #D9A520; background: #FDF9EA; }
.qcard:has(input[name="q7"]) .opt:has(input[value="3"]):hover { border-color: var(--lv-l); background: #F8FBF2; }
.qcard:has(input[name="q7"]) .opt:has(input[value="4"]):hover { border-color: var(--lv-g); background: #F3FBF8; }
/* a picked answer keeps its own colour when the mouse is over it */
.pq .opt3:has(input:checked):hover, .qcard:not(.pq) .opt:has(input:checked):hover { background-blend-mode: normal; }

/* ---- founder-load band chips (design rule DR-12): green runs without you, orange needs you nearby, red stops without you ---- */
.lc-band { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 7px; min-height: 34px; border-radius: 999px; font: 700 .875rem var(--font-heading, inherit); line-height: 1.3; color: #fff; background: #5E6D74; }
.lc-band--g { background: #0B8A6B; } .lc-band--o { background: #B85A1B; } .lc-band--r { background: #A12A2A; } .lc-band--n { background: #5E6D74; }
.lc-band__i { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; font-size: 14px; line-height: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.bandname#bn, .bandname#us { background: none; padding: 0; margin: 8px 0; }
.bandname#bn .lc-band, .bandname#us .lc-band { font-size: 1rem; padding: 8px 20px 8px 8px; min-height: 40px; } .bandname#bn .lc-band__i, .bandname#us .lc-band__i { width: 28px; height: 28px; font-size: 16px; }
.ubox .bn:has(.lc-band) { background: none; padding: 0; }
.acc summary small.st:has(.lc-band) { margin-left: auto; }
.parts .ps-w { color: #0B8A6B; } .parts .ps-p { color: #B85A1B; } .parts .ps-m { color: #A12A2A; }

/* the old black pill behind the header label is gone: the coloured chip stands alone, with room above and below */
.acc summary .st:has(.lc-band) { background: none; padding: 0; margin-left: auto; }
.acc summary:has(.lc-band) { padding-top: 18px; padding-bottom: 18px; }
.earlier li .sc .lc-band { min-height: 36px; }

/* ---- free value sliders: gradient bar that deepens as you slide (release 1.3.3) ---- */
.lc-vs { padding-bottom: 34px; position: relative; }
.lc-vs .lc-sl__v { font-weight: 700; font-size: 1.15rem; margin: 0; }
.lc-vs__sub { display: block; min-height: 1.3em; margin: 0 0 8px; font-size: .85rem; color: var(--fg-muted, #5b6470); }
.lc-vs input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, transparent var(--p, 0%), #E3E8EB var(--p, 0%)), linear-gradient(90deg, #C83A3A, #E8B23A 50%, #11B890); }
.lc-vs.unset input[type=range]::-webkit-slider-runnable-track, .lc-vs.off input[type=range]::-webkit-slider-runnable-track { background: #E3E8EB; }
.lc-vs input[type=range]::-moz-range-track { background: #E3E8EB; }
.lc-vs input[type=range]::-moz-range-progress { background: var(--tc, #E8B23A); }
.lc-vs input[type=range]::-webkit-slider-thumb { background: var(--tc, #C83A3A); }
.lc-vs input[type=range]::-moz-range-thumb { background: var(--tc, #C83A3A); }
.lc-vs.unset input[type=range]::-webkit-slider-thumb, .lc-vs.off input[type=range]::-webkit-slider-thumb { background: #9AA7AD; }
.lc-vs.unset input[type=range]::-moz-range-thumb, .lc-vs.off input[type=range]::-moz-range-thumb { background: #9AA7AD; }
.lc-vs__ticks { position: absolute; left: 15px; right: 15px; margin-top: 4px; height: 18px; font-size: .72rem; color: var(--fg-muted, #5b6470); pointer-events: none; }
.lc-vs__ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.lc-vs__ticks span.a { transform: none; } .lc-vs__ticks span.z { transform: translateX(-100%); }
.lc-vs .lc-sl__off { margin-top: 26px; }
/* a lighter touch: less bold in the labels */
.lc-sl__v { font-weight: 600; }
.fgrid > label { font-weight: 500; } .fgrid > label b { font-weight: 800; }

/* Release 1.3: skipped questions on the Momentum Check are marked, and the page takes the visitor to the 1st one */
.qcard.lc-missing { border-radius: 14px; outline: 2px solid #C83A3A; outline-offset: 4px; background: rgba(200,58,58,.05); position: relative; }
.qcard.lc-missing > fieldset::before { content: "Needs an answer"; display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: #A12A2A; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.qcard.lc-pulse { animation: lcPulse 1.1s ease-out 1; }
@keyframes lcPulse { 0% { box-shadow: 0 0 0 0 rgba(200,58,58,.45); } 100% { box-shadow: 0 0 0 18px rgba(200,58,58,0); } }
@media (prefers-reduced-motion: reduce) { .qcard.lc-pulse { animation: none; } }
.lc-jump { margin-left: 4px; padding: 4px 12px; border: 1px solid #A12A2A; border-radius: 999px; background: #fff; color: #A12A2A; font: inherit; font-weight: 600; cursor: pointer; }
.lc-jump:hover, .lc-jump:focus-visible { background: #A12A2A; color: #fff; }

/* ======================================================================================================
   Wave 2e checks (LR-12 v0.4, LR-16 v0.4): counter, answer grid, bar picker, chips, definitions,
   engine subheads, opening questions, progress %, result strip, fix cards.
   ====================================================================================================== */

/* ---- counter: Q2 (of 7) ---- */
.qcard legend .qn { text-transform: none; letter-spacing: 0; font: 700 .875rem var(--font-heading, inherit); color: #C83A3A; margin: 0 0 2px; }
.qcard legend .qn i { font-style: normal; font-weight: 500; font-size: .85em; color: #5E6D74; padding: 0; }
.qcard legend .qn span { font-weight: 600; color: #5E6D74; }
.qcard legend[data-i]::before { top: 1.55rem; }
.qcard.pq legend, .qcard legend { float: none; width: 100%; display: block; }
.qcard fieldset { clear: both; }

/* ---- answers 2-3 per row (LR-12 7.2). Worst at the top / left, best at the bottom / right ---- */
.ans { display: grid; gap: 12px; grid-template-columns: 1fr; clear: both; margin: 8px 0 0; }
.ans .opt, .ans .opt3 { margin: 0; height: 100%; box-sizing: border-box; }
@media (min-width: 640px) { .ans[data-t="2"] { grid-template-columns: repeat(2, 1fr); } .ans[data-t="3"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639px) { .ans[data-p="2"] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ans[data-d="2"] { grid-template-columns: repeat(2, 1fr); } .ans[data-d="3"] { grid-template-columns: repeat(3, 1fr); } .ans[data-d="1"] { grid-template-columns: 1fr; } }
.pq .ans .opt3 { margin: 0; }

/* ---- bar picker: a number line, small to large, left to right on every screen size ---- */
.barpick { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; margin: 10px 0 0; clear: both; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 14px; overflow: hidden; background: #fff; }
.barpick .stop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; text-align: center; padding: 14px 6px 12px; min-height: 64px; cursor: pointer; font-size: .9rem; line-height: 1.3; border-left: 1.5px solid var(--line-strong, #cbd5e0); background: #fff; transition: background .2s ease; overflow-wrap: anywhere; }
.barpick .stop:first-child { border-left: 0; }
.barpick .stop input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.barpick .stop .dt { font-size: 1.15rem; line-height: 1; }
.barpick .stop:has(input:checked) { font-weight: 700; }
.barpick .stop:has(input:focus-visible) { outline: 3px solid #D44040; outline-offset: -3px; }
.barpick .stop::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5E6D74; background: #fff; flex: none; }
.barpick .stop:has(input:checked)::before { background: var(--stopc, #C83A3A); border-color: var(--stopc, #C83A3A); box-shadow: inset 0 0 0 3px #fff; }
.barpick .stop:has(input[value="0"]), .barpick .stop:has(input[value="m"]) { --stopc: var(--lv-r); --stopt: var(--lv-rt); }
.barpick .stop:has(input[value="1"]), .barpick .stop:has(input[value="p"]) { --stopc: var(--lv-o); --stopt: var(--lv-ot); }
.barpick .stop:has(input[value="2"]) { --stopc: var(--lv-l); --stopt: var(--lv-lt); }
.barpick .stop:has(input[value="3"]), .barpick .stop:has(input[value="w"]) { --stopc: var(--lv-g); --stopt: var(--lv-gt); }
.barpick .stop:has(input:checked) { background: var(--stopt, #FFF6F4); box-shadow: inset 0 -4px 0 var(--stopc, #C83A3A); }
@media (hover: hover) { .barpick .stop:hover { background: #F7F9F9; } .barpick .stop:has(input:checked):hover { background: var(--stopt, #FFF6F4); } }
.barpick.pbar .stop::before { display: none; }
.barpick.pbar .stop .dt { color: var(--stopc); }
@media (max-width: 639px) {
  .barpick.long { grid-template-columns: 1fr; }
  .barpick.long .stop { flex-direction: row; text-align: left; min-height: 48px; padding: 10px 14px; border-left: 0; border-top: 1.5px solid var(--line-strong, #cbd5e0); }
  .barpick.long .stop:first-child { border-top: 0; }
  .barpick.long .stop:has(input:checked) { box-shadow: inset 4px 0 0 var(--stopc, #C83A3A); }
}
@media (max-width: 400px) { .barpick .stop { font-size: .8rem; padding: 12px 3px 10px; } }

/* ---- chips: side answers (I do not know, Skip, Not relevant) and opening choices ---- */
.sides { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; clear: both; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 999px; background: #fff; cursor: pointer; font-size: .9rem; line-height: 1.3; color: var(--fg-muted, #44525a); position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:hover { border-color: #5E6D74; background: #F4F7F8; }
.chip:has(input:checked) { border-color: #1A1A1A; background: #F4F7F8; color: #1A1A1A; font-weight: 700; }
.chip:has(input:focus-visible) { outline: 3px solid #D44040; outline-offset: 2px; }
.chip.skip { font-size: .85rem; }

/* ---- opening questions (not scored): neutral picked state, never green, orange or red ---- */
.ctx { margin: 0 0 26px; }
.ctx .permission { font-weight: 600; margin: 0 0 12px; }
.ctxq .tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .ctxq .tiles { grid-template-columns: repeat(3, 1fr); } }
.ctxq .tiles .chip { border-radius: 14px; justify-content: center; text-align: center; padding: 12px; }
.ctxq .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ctxq .chip:has(input:checked) { border-color: #1A1A1A; background: #FFF6F7; }
.ctx-other { display: block; margin: 10px 0 0; font-weight: 600; font-size: .9rem; } .ctx-other input { width: 100%; max-width: 420px; padding: 10px 12px; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 10px; font: inherit; }

/* ---- definition toggle and engine subhead ---- */
details.def { clear: both; margin: 8px 0 4px; font-size: .9rem; }
details.def summary { cursor: pointer; display: inline-block; min-height: 32px; color: #5E6D74; text-decoration: underline; text-decoration-color: #C83A3A; text-underline-offset: 3px; }
details.def p { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #F4F7F8; line-height: 1.5; }
.eng { margin: 18px 0 8px; font: 700 .95rem var(--font-heading, inherit); color: var(--fd, #55556E); letter-spacing: .02em; }
.eng:first-of-type { margin-top: 4px; }

/* ---- progress % (LR-12 7.4) ---- */
.sticky .prow { display: flex; align-items: center; gap: 12px; } .sticky .prow .bar { flex: 1; margin: 0; }
.sticky #pct, #pctpf { font: 700 .95rem var(--font-heading, inherit); min-width: 3ch; text-align: right; }
.sticky .bar i, #pbar { background: #C83A3A; }
.bar { background: #D9DEDE; }
@media (prefers-reduced-motion: reduce) { .bar i, #pbar { transition: none; } .lc-youarehere { animation: none; } }
/* slim unit label under the header on phone and tablet (LR-12 7.3) */
.ubar { display: none; }
@media (max-width: 1023px) {
  .ubar { display: block; position: sticky; top: 48px; z-index: 19; height: 40px; line-height: 40px; padding: 0 16px; background: var(--fd, #55556E); color: #fff; font: 700 .85rem var(--font-heading, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ublock { grid-template-columns: 1fr; } .ublock .uside { display: none; }
}
.uside small { display: block; }

/* ---- result: band + parts count + Do / Document / Delegate road (LR-16 Option C) ---- */
.ubox .cnt, .rcount { margin: 8px 0 0; font-size: .92rem; line-height: 1.5; }
.rcount b { font-weight: 700; } .rcount .w { color: #0B8A6B; } .rcount .p { color: #B85A1B; } .rcount .m { color: #A12A2A; }
.named { margin: 6px 0 0; padding: 0; list-style: none; font-size: .9rem; text-align: left; } .named li { margin: 2px 0; }
.named .m { color: #A12A2A; } .named .p { color: #B85A1B; }
.road { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 0; margin: 14px 0 6px; font-size: .85rem; text-align: center; }
.road > div { position: relative; padding: 24px 4px 10px; border: 1.5px solid var(--line-strong, #cbd5e0); border-left-width: 0; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.road > div:first-child { border-left-width: 1.5px; border-radius: 12px 0 0 12px; }
.road > div.opt { border-style: dashed; color: #5E6D74; border-radius: 0 12px 12px 0; background: #F7F9F9; }
.road > div.on { background: color-mix(in srgb, var(--fc, #11B890) 18%, #fff); font-weight: 700; }
.road b { font: 700 .9rem var(--font-heading, inherit); }
.road small { font-size: .72rem; color: #5E6D74; line-height: 1.25; padding: 0 2px; }
.road .lc-youarehere { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #1A1A1A; color: #fff; font: 700 .68rem var(--font-heading, inherit); letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; animation: lcyah .6s ease-out both; }
@keyframes lcyah { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 400px) { .road { font-size: .75rem; } .road small { display: none; } .road .lc-youarehere { font-size: .6rem; padding: 3px 6px; } }
.bandline { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; }

/* ---- results list (LR-12 9) ---- */
.elist details { border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 14px; margin: 10px 0; background: #fff; }
.elist summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; cursor: pointer; font: 700 1rem var(--font-heading, inherit); }
.elist summary .cn { margin-left: auto; font: 500 .85rem var(--font-body, inherit); color: #5E6D74; }
.elist ol { list-style: none; margin: 0; padding: 0 16px 12px 40px; }
.elist li.pt { margin: 6px 0; }
.elist .ptb { width: 100%; text-align: left; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; background: none; border: 0; padding: 8px 0; min-height: 44px; font: inherit; cursor: pointer; }
.elist .ptb .no { color: var(--c-serial, #5A696F); font-weight: 600; min-width: 2.4em; }
.elist .ptb .stt { margin-left: auto; font-weight: 600; } .elist .ps-w { color: #0B8A6B; } .elist .ps-p { color: #B85A1B; } .elist .ps-m { color: #A12A2A; } .elist .ps-x { color: #5E6D74; }
.elist .ptd { padding: 4px 0 8px; font-size: .92rem; } .elist .ptd[hidden] { display: none; }
.starthere { background: #D44040; color: #fff; font: 700 .68rem var(--font-heading, inherit); letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }

/* ---- fix card (DR-18, LR-12 8) ---- */
.fixes { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.fix { border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 16px; padding: 16px 18px; background: #fff; position: relative; }
.fix .fl { font: 700 .78rem var(--font-heading, inherit); letter-spacing: .08em; text-transform: uppercase; color: #C83A3A; margin: 0; }
.fix h4 { margin: 4px 0 6px; font: 700 1.125rem var(--font-heading, inherit); }
.fix .tk { position: absolute; top: 8px; right: 12px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.fix .tk input { width: 22px; height: 22px; accent-color: #11B890; }
.fix .row { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; }
.fix .row .ch { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 6px; font: 600 .8125rem var(--font-body, inherit); background: #EEF1F1; color: #3D3D4A; }
.fix .row.done .ch { background: #E7F7F2; color: #0B7C61; }
.fix .closes { margin: 8px 0 0; font-size: .85rem; color: #5E6D74; }
.fixnote { font-size: .9rem; color: #44525a; margin: 0 0 4px; }
.fixcount { font: 700 .95rem var(--font-heading, inherit); margin: 4px 0 8px; }
.state-note { display: block; margin: 0 0 8px; font-size: .9rem; color: #44525a; }
.def-badge, .demo { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #FFF1C2; color: #6b4e00; font: 700 .75rem var(--font-heading, inherit); margin-right: 6px; }
.ugrid:has(.ubox:only-child) { grid-template-columns: 1fr; } .ubox:only-child .bandline { display: none; } .ubox:only-child { text-align: left; } .ubox:only-child .un, .ubox:only-child .rcount { text-align: left; }
.mm li { grid-template-columns: 190px 1fr; }
.btn-row[hidden] { display: none !important; } .fix h4 { padding-right: 76px; }

/* W2e: fix-card template pills (DR-14 item 2, DR-18 item 2): a compact red-gradient pill "🎁 Title" + small italic file tag, 1 line under it. Same look as the portal's .btn.tplbtn. */
.tplrow { margin: 10px 0 0; }
.btn.tplbtn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: #D44040; color: #fff !important; text-decoration: none; box-shadow: 0 8px 18px -10px rgba(200,58,58,.9); transition: transform .2s ease, box-shadow .2s ease; padding: 9px 20px; min-height: 44px; text-align: left; line-height: 1.3; font-size: .9375rem; }
.btn.tplbtn b { font-weight: 700; }
.btn.tplbtn .gf { margin: 0 2px 0 0; }
.btn.tplbtn .ft { font: italic 500 .75rem var(--font-body, inherit); opacity: .9; margin-left: 2px; }
.tpld { margin: 4px 0 0; font-size: .875rem; color: #3D3D4A; }
.also { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #D9DEDE); }
.alsot { margin: 0; font: 700 .78rem var(--font-heading, inherit); letter-spacing: .08em; text-transform: uppercase; color: #5E6D74; }
@media (max-width: 40em) { .btn.tplbtn { width: 100%; justify-content: center; text-align: center; flex-wrap: wrap; } }
.btn.tplbtn:focus-visible { transform: translateY(-2px); outline: 3px solid #D44040; outline-offset: 2px; }
@media (hover:hover) and (pointer:fine) { .btn.tplbtn:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgba(200,58,58,.95); } }
@media (prefers-reduced-motion: reduce) { .btn.tplbtn { transition: none; } .btn.tplbtn:hover, .btn.tplbtn:focus-visible { transform: none; } }

/* ======================================================================================================
   Wave 2f (K-01 to K-26): Quick Momentum Check. Hero art, "(OF n)" labels on the right, industry grid,
   area dividers, sticky unit label, number sliders, 2-column result, band track, unlock form.
   ====================================================================================================== */
.hero-mc h1 .h1l { display: block; }
.hero-art { justify-self: end; width: 100%; max-width: 360px; }
.hero-art svg { display: block; width: 100%; height: auto; }
.hero-art .pipe { fill: #fff; stroke: #1A1A1A; stroke-width: 2.5; stroke-linejoin: round; }
.hero-art .pipe--choke { stroke: #C83A3A; fill: #FFF6F4; }
.hero-art .flow circle { fill: #11B890; opacity: 0; animation: lcFlow 4.2s linear infinite; }
.hero-art .flow .d2 { animation-delay: 1.4s; } .hero-art .flow .d3 { animation-delay: 2.8s; }
.hero-art .flow--b circle { fill: #C83A3A; animation-name: lcFlowB; }
@keyframes lcFlow { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(262px); opacity: 0; } }
@keyframes lcFlowB { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 40% { transform: translateX(120px); } 50% { transform: translateX(132px); } 92% { opacity: 1; } 100% { transform: translateX(262px); opacity: 0; } }
.hero-art .glow { fill: rgba(200,58,58,.28); transform-origin: 150px 121px; animation: lcPulseG 2.2s ease-in-out infinite; }
@keyframes lcPulseG { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.25); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-art .flow circle, .hero-art .glow { animation: none; } .hero-art .flow circle { opacity: 1; } .hero-art .flow .d2 { transform: translateX(90px); } .hero-art .flow .d3 { transform: translateX(180px); } }
@media (max-width: 820px) { .hero-art { max-width: 240px; justify-self: start; } }

/* areas intro chips: icon and label on 1 line (K-04) */
.what b { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; } .what .i { display: inline; font-size: 1.4rem; } .what .d { display: block; }

/* label on the right, question text first in the DOM (K-06, K-08) */
#f .qcard legend .lg { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
#f .qcard legend .qt { flex: 1 1 auto; min-width: 0; }
#f .qcard legend .qn { order: 2; flex: none; margin: 2px 0 0; white-space: nowrap; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: #C83A3A; font-weight: 700; text-align: right; }
#f .qcard legend .qn .lc-of-lab { font-size: 1em; font-weight: 700; color: #C83A3A; }
#f .qcard legend .qn .lc-of { font-size: calc(1em - 2px); font-weight: 600; color: #7A8A91; font-variant-caps: all-small-caps; letter-spacing: .06em; }
@media (max-width: 480px) { #f .qcard legend .lg { flex-direction: column-reverse; gap: 4px; } #f .qcard legend .qn { text-align: left; margin: 0; } }

/* industry grid: 4 / 2 / 1 columns, left-aligned (K-07) */
.ctxq .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; justify-items: stretch; }
.ctxq .chips .chip { justify-content: flex-start; text-align: left; height: 100%; }
@media (max-width: 900px) { .ctxq .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ctxq .chips { grid-template-columns: 1fr; } }

/* area dividers: centred, bold, white on the unit colour (K-11) */
.adiv { margin: 22px 0 12px; padding: 8px 14px; text-align: center; background: var(--fd, #0B8064); color: #fff; border-radius: 10px; font: 700 1.05rem var(--font-heading, inherit); letter-spacing: .02em; }
.adiv:first-of-type { margin-top: 4px; }

/* Q4: 3-column grid, left-aligned, equal heights (K-12) */
.ans[data-d="3"] .opt { align-items: flex-start; text-align: left; }

/* number sliders: the live label stays inside the card (K-09) */
.numq { margin: 8px 0 0; max-width: 100%; }
.numq .lc-sl { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.numq .lc-sl__v { overflow-wrap: anywhere; }
.numq .lc-vs__ticks { left: 15px; right: 15px; }
.numq .lc-vs__ticks span { max-width: 22%; white-space: normal; text-align: center; line-height: 1.1; }
.numq .lc-vs__ticks span.a { text-align: left; } .numq .lc-vs__ticks span.z { text-align: right; }
.numq .lc-vs { padding-bottom: 46px; }

/* unit block: overflow clip keeps the sticky label working (overflow hidden killed it) (K-10) */
#f .ublock { overflow: clip; }
#f .uside { align-items: flex-start; }
#f .uside span { position: sticky; top: 110px; }
@media (max-width: 640px) {
  #f .ublock { grid-template-columns: 1fr; }
  #f .ublock .uside { display: block; position: sticky; top: 52px; z-index: 15; text-align: center; padding: 6px 10px; }
  #f .uside span { position: static; writing-mode: horizontal-tb; transform: none; padding: 0; letter-spacing: .08em; font-size: .85rem; }
}
#f .btn-row { justify-content: center; }
#f .btn--check { margin: 0 auto; }

/* result: 2 columns (K-15), Do lines (K-16), area cards in 3 columns (K-17), band track (K-25) */
.res .rh { margin: 4px 0 6px; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 500; }
.res .rh b { font-weight: 800; }
.rgrid { display: grid; gap: 22px 32px; margin: 18px 0; }
@media (min-width: 48em) { .rgrid { grid-template-columns: 1.1fr 1fr; } }
.rright h3 { margin: 0 0 8px; font-weight: 500; } .rright h3 b { font-weight: 800; }
.parts2 { list-style: decimal; margin: 0; padding-left: 1.6em; text-align: left; }
.parts2 li { margin: .5em 0; padding-left: .3em; } .parts2 li::marker { color: #7A8A91; font-weight: 700; }
.parts2 .pc { display: inline-block; width: 1.2em; font-size: 1.05rem; }
.parts2 .pt-w .pc { color: var(--lv-g); } .parts2 .pt-p .pc { color: var(--lv-o); } .parts2 .pt-m .pc { color: var(--lv-r); }
.rcount { margin: 12px 0; text-align: left; } .rcount .w { color: #0B8A6B; } .rcount .p { color: #B85A1B; } .rcount .m { color: #A12A2A; }
.dd { list-style: none; margin: 10px 0; padding: 0; text-align: left; }
.dd li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: 6px 0; border: 1px solid var(--line, #dfe5e8); border-radius: 10px; background: #fff; }
.dd li.on { border-color: #1A1A1A; background: #FFF6F4; }
.dd .lc-youarehere { position: static; transform: none; font-style: normal; background: #1A1A1A; color: #fff; font: 700 .68rem var(--font-heading, inherit); letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.acards { display: grid; gap: 14px; margin: 8px 0 18px; }
@media (min-width: 48em) { .acards { grid-template-columns: repeat(3, 1fr); } }
.acard { position: relative; border: 2px solid var(--line-strong, #cbd5e0); border-radius: 14px; padding: 16px; background: #fff; text-align: left; }
.acard.low { border-color: #C83A3A; background: #FFF6F4; box-shadow: 0 10px 24px -14px rgba(200,58,58,.7); }
.acard h4 { margin: 0 0 4px; font: 700 1.05rem var(--font-heading, inherit); } .acard p { margin: 0 0 10px; font-size: .92rem; }
.acard .tag { position: absolute; top: -12px; right: 12px; background: #C83A3A; color: #fff; font: 700 .72rem var(--font-heading, inherit); letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.btrack { position: relative; margin: 8px 0 14px; padding-bottom: 22px; }
.btrack ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.btrack ol::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 22px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #C83A3A, #E07830 50%, #11B890); opacity: .55; }
.btrack li { position: relative; text-align: center; padding: 0 4px; font-size: .88rem; line-height: 1.25; opacity: .75; }
.btrack li .bt-i { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%; background: #fff; border: 3px solid #cbd5e0; font-size: 1.4rem; position: relative; z-index: 1; }
.btrack li b { display: block; font: 700 .9rem var(--font-heading, inherit); }
.btrack li.here { opacity: 1; } .btrack li.here .bt-i { border-color: var(--bc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bc) 25%, transparent); }
.btrack .bt-r { --bc: #C83A3A; } .btrack .bt-o { --bc: #E07830; } .btrack .bt-g { --bc: #11B890; }
.btrack li.next { opacity: 1; } .btrack li.next .bt-i { border-color: var(--bc); animation: lcGlow 2s ease-in-out infinite; }
@keyframes lcGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bc) 30%, transparent); } }
.bt-tag { display: block; margin-top: 4px; font-style: normal; font: 700 .68rem var(--font-heading, inherit); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #1A1A1A; border-radius: 999px; padding: 2px 8px; width: fit-content; margin-inline: auto; }
.bt-tag.bt-nx { background: none; color: #5E6D74; border: 1px dashed #5E6D74; }
.bt-ptr { position: absolute; bottom: 0; left: calc((var(--at, 0) + .5) * 33.333%); width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 12px solid #1A1A1A; transition: left 1s cubic-bezier(.3,.8,.3,1); }
@media (prefers-reduced-motion: reduce) { .bt-ptr { transition: none; } .btrack li.next .bt-i { animation: none; } }
.neck { font-size: 1.05rem; margin: 8px 0; }

/* unlock form: 2 columns (K-19) */
.unlock .ufg { display: grid; grid-template-columns: 1fr; gap: 12px 18px; }
@media (min-width: 48em) { .unlock .ufg { grid-template-columns: 1fr 1fr; } .unlock .ufw { grid-column: 1 / -1; } }
.unlock .f { display: block; font-weight: 600; margin: 0; } .unlock .f .flab { display: block; margin-bottom: 4px; }
.unlock .f input[type=text], .unlock .f input[type=email], .unlock .f input[type=tel], .unlock .f select { width: 100%; max-width: none; box-sizing: border-box; margin-top: 4px; padding: 10px 12px; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 10px; font: inherit; background: #fff; }
.unlock .ph2 { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 8px; } .unlock .ph2 select, .unlock .ph2 input { margin-top: 0; }
.unlock .rem { margin: 0 0 10px 28px; font-size: .82rem; }
.unlock .cb { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-weight: 400; }
.unlock .cb input { margin-top: 4px; flex: none; }
#f .qcard legend[data-i]::before { top: 0; }
.numq .lc-vs { padding-bottom: 14px; }
.numq .lc-vs__ticks { position: relative; left: 0; right: 0; margin-top: 8px; height: 20px; }
.numq .lc-vs__ticks span.z { white-space: nowrap; max-width: none; }
.numq .lc-vs .lc-sl__off { margin-top: 12px; }
.hero-mc .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(220px, 30vw, 380px); }
@media (max-width: 820px) { .hero-mc .hero-grid { grid-template-columns: minmax(0, 1fr); } }
/* call-to-scale: GHL calendar slot placeholder (M-08) */
.calph { margin: 0 0 12px; padding: 10px 14px; border: 2px dashed #C83A3A; border-radius: 12px; background: #FFF6F4; font-size: .9rem; }
.calslot .ghlcal { display: block; }
.res { overflow-wrap: anywhere; min-width: 0; } .res .rgrid > *, .res .acards > * { min-width: 0; }
@media (max-width: 480px) { .res { padding: 18px; } .btrack li { font-size: .8rem; padding: 0 2px; } .bt-tag { font-size: .6rem; padding: 2px 5px; } .unlock .ph2 { grid-template-columns: 1fr; } }
#uf-ts { max-width: 100%; overflow-x: clip; }

/* W2g K-19: unlock form rows line up. Labels and inputs start at the same height; the team-size slider is compact (same height as an input) */
.unlock .ufg { align-items: start; }
.unlock .f .ph2 { margin-top: 4px; }
.unlock .f .flab { margin-bottom: 0; }
@media (min-width: 48em) {
  .unlock .lc-sl { padding: 4px 14px; min-height: 0; }
  .unlock .lc-sl__t, .unlock .lc-sl__e, .unlock .lc-sl__off { display: none; }
  .unlock .lc-sl__v { font-size: 1rem; margin: 0 0 2px; }
  .unlock .lc-sl input[type=range] { margin: 0; }
}

/* W2g K-02: the check's h1 is 2 lines on desktop: "Find the Choke Point" / "holding your Revenue down." */
@media (min-width: 821px) {
  .hero-mc h1 { font-size: clamp(2rem, 1rem + 2.6vw, 3.2rem); }
  .hero-mc h1 .h1l { white-space: nowrap; }
}
.unlock label.f { margin: 0; }

/* ======== W2h (1.6.3), set O: Quick Momentum Check, O-19 to O-33 ======== */
/* O-20: heading above the progress bar. The sticky bar sits under the fixed header (not behind it) */
.sticky { top: var(--lc-hdr, 60px); }
.mc-head { margin: 0 0 8px; }
.mc-head__t { margin: 0 0 2px; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.2; font-weight: 500; }
.mc-head__t b { font-weight: 800; }
.mc-head__p { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--fg, #1a1a1a); font-weight: 400; }
@media (max-width: 640px) { .mc-head__p { display: none; } .mc-head { margin: 0 0 2px; } }

/* O-24: the intro line under "About you" is black; the 2 key phrases carry the emphasis (DR-20: bold for the key words, inverted for the turning words) */
.ctx .permission, .ctx .permission b { color: #111; }
.ctx .permission { font-weight: 400; font-size: 1rem; max-width: none; }
.ctx .permission b { font-weight: 800; }

/* O-21, O-22: icon and question text share the 1st line box; the "Q1 (of 7)" tag sits at the far right of that row */
#f .qcard legend[data-i] { padding-left: 2.6rem; }
#f .qcard legend[data-i]::before { top: 0; left: 0; width: 2rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; }
#f .qcard legend .lg { align-items: flex-start; width: 100%; }
#f .qcard legend .qt { line-height: 1.6rem; }
#f .qcard legend .qn { margin: 0 0 0 auto; line-height: 1.6rem; align-self: flex-start; }
@media (max-width: 480px) {
  #f .qcard legend .lg { flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
  #f .qcard legend .qn { margin: 0; }
}

/* O-23: a slider inside a question card has no box of its own; its label stays inside the card */
.qcard .lc-sl { border: 0; background: transparent; padding: 6px 0 4px; border-radius: 0; box-shadow: none; max-width: 100%; }
.qcard .lc-sl__v { display: block; overflow-wrap: anywhere; max-width: 100%; }

/* O-25: the vertical label rail stays in view while its questions scroll (sticky needs no clipping ancestor; the box corners are rounded on the rail itself) */
#f .ublock { overflow: visible; }
#f .uside { border-radius: 15px 0 0 15px; align-self: stretch; }
#f .uside span { position: sticky; top: 190px; }
@media (max-width: 640px) { #f .uside { border-radius: 15px 15px 0 0; } #f .ublock .uside { top: 150px; } }

/* O-26: answers in 2 columns from 720px, 1 column on phones. Short "About you" answers stay chips */
@media (min-width: 720px) {
  .ans[data-d="2"], .ans[data-d="3"], .ans[data-t="2"], .ans[data-t="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) { .ans, .ans[data-p="2"] { grid-template-columns: 1fr; } }

/* O-27: no black frame round the result; a quiet 1px edge with the same radius as the other cards */
.res { border: 1px solid var(--line-strong, #cbd5e0); box-shadow: 0 14px 34px -22px rgba(26,26,26,.35); overflow: visible; }
#f .ublock:last-of-type { margin-bottom: 18px; }
#f .ubody { padding-bottom: 8px; }
#f .ubody > :last-child { margin-bottom: 6px; }

/* O-30: report headings carry their icon; Do, Document, Delegate keep their icons; 2 columns on desktop */
.res h3 > span[aria-hidden] { margin-right: .35em; }
.res .dd li > span { display: block; }
.res .dd .dd-i { font-style: normal; font-size: 1.25rem; line-height: 1; margin-right: .5em; vertical-align: -.1em; }
.res .parts2 .pa { margin-right: .35em; }
@media (min-width: 48em) {
  .res .next2 .nx { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; align-items: start; }
  .res .next2 .nx > * { margin: 0; }
}

/* O-31: Leads, Price and Follow-up are 3 separate cards: grid of 3 on desktop, a stack on a phone */
.res .acards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 48em) { .res .acards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.res .acard { margin: 0; box-shadow: 0 6px 18px -14px rgba(26,26,26,.5); }


/* O-32, O-33: unlock form, labels above inputs, 2 columns; phone = compact country picker + the number on 1 row */
.unlock .ufg { grid-template-columns: 1fr; }
@media (min-width: 48em) { .unlock .ufg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.unlock .f { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.unlock .f > input, .unlock .f > select { margin-top: 0; }
.unlock .f .flab { margin: 0; }
.unlock .ph2 { display: flex; gap: 8px; margin-top: 0; }
.unlock .ph2 select { flex: 0 0 112px; width: 112px; min-width: 0; padding-inline: 8px; text-overflow: clip; }
.unlock .ph2 input { flex: 1 1 auto; width: auto; min-width: 0; }
@media (max-width: 480px) { .unlock .ph2 { display: flex; } }
.unlock .fine { margin-top: 14px; padding-top: 10px; border-top: 1px solid #E3E8EB; }
.unlock .fine p { margin: 0 0 6px; font-size: .75rem; line-height: 1.5; color: #5E6D74; max-width: none; }
.unlock .fine b { color: #44525a; }
.unlock .fine button[data-lc-clear] { font: inherit; color: #A12A2A; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.unlock .f .ph2 { margin-top: 0; align-items: stretch; }
.unlock .f .ph2 select, .unlock .f .ph2 input { margin: 0; height: 100%; }

/* ======== W2h UX audit fixes (1.6.3): UX_Audit_Momentum_Check_v0.1, findings 1-33 ======== */
/* 1: the "Type your industry" box obeys [hidden] */
.ctx-other[hidden] { display: none; }
.ctx-other input { max-width: 100%; box-sizing: border-box; }
/* 7, 8: opaque sticky panel; the description line goes once the panel is stuck */
div.sticky { background: #FCF1EA; -webkit-backdrop-filter: none; backdrop-filter: none; }
div.sticky.is-stuck .mc-head__p { display: none; }
.sticky .ulab { display: none; }
/* 3: the unit rail also shows on tablets (641-1023), sticky under the progress panel */
@media (min-width: 641px) and (max-width: 1023px) {
  #f .ublock { grid-template-columns: 52px minmax(0, 1fr); }
  #f .ublock .uside { display: flex; }
}
#f .uside span { top: calc(var(--lc-hdr, 60px) + var(--lc-prog, 100px) + 14px); }
/* 2: phones: no second sticky bar. The unit name joins the progress panel, which is opaque, with no gap */
@media (max-width: 640px) {
  #f .ublock { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  #f .ublock .uside { display: none; }
  .sticky .prow { flex-wrap: wrap; row-gap: 2px; }
  .sticky .ulab { display: block; flex: 1 0 100%; font: 700 .8rem var(--font-heading, inherit); letter-spacing: .08em; text-transform: uppercase; color: #0B6E56; }
  .sticky .ulab[hidden] { display: none; }
}
/* 5: phones: tag right-aligned on a small line above; icon + question on 1 row, icon level with the question's 1st line */
@media (max-width: 480px) {
  #f .qcard legend .lg { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  #f .qcard legend .qn { align-self: flex-end; text-align: right; margin: 0; font-size: .8rem; line-height: 1.2rem; }
  #f .qcard legend[data-i]::before { top: calc(1.2rem + 4px); }
  #f .qcard.pq legend[data-i]::before { top: 0; }
  .ctxq .chips { gap: 8px; } .ctxq .chips .chip { white-space: normal; min-height: 44px; }
  .ctxq .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-sl__e span:not(:first-child):not(:last-child) { display: none; }
  .lc-sl__e span { font-size: .8125rem; }
}
@media (max-width: 360px) { .ctxq .tiles { grid-template-columns: 1fr; } #uf-go { white-space: nowrap; padding-inline: 18px; } #uf-go .ph { display: none; } }
/* 9: focus ring on sliders is not clipped */
.qcard .lc-sl, .numq .lc-sl { overflow: visible; }
.lc-sl input[type=range]:focus-visible { outline-offset: 2px; }
/* 11, 12, 20: contrast, darker shades of the same hue (DR-21.6) */
#f .qcard legend .qn .lc-of, .lc-of { color: #5E6D74; }
.rcount .w { color: #0A7A5F; }
.lc-band--g { background: #0A7A5F; }
.btrack li { opacity: 1; color: #5E6D74; } .btrack li.here, .btrack li.next { color: inherit; }
/* 13: quiet area dividers */
.adiv { background: #E7F7F2; color: #0B6E56; text-align: left; border-left: 4px solid #0B8064; }
/* 14, 33: unlock form heights line up */
.unlock .f .ph2 select, .unlock .f .ph2 input { height: 48px; box-sizing: border-box; }
.unlock .lc-sl { min-height: 48px; padding: 6px 14px; }
/* 15, 16: touch targets */
.unlock .cb { min-height: 44px; align-items: center; }
.unlock .cb input { width: 20px; height: 20px; margin: 0; accent-color: #C83A3A; }
@media (max-width: 640px) {
  .lc-sl__r { height: 44px; } .lc-sl input[type=range] { height: 44px; } .lc-sl__t { top: 18px; }
  .lc-sl input[type=range]::-webkit-slider-runnable-track { margin-top: 0; }
  .chip, .tiles .chip { min-height: 44px; } .lc-sl__off { min-height: 44px; }
}
/* 17, 21, 22: one "you are here"; next step marked quietly; no loose pointer */
.dd .lc-youarehere.dd-next { background: none; color: #1A1A1A; border: 1.5px solid #1A1A1A; }
.bt-tag.bt-nx { white-space: nowrap; } .bt-ptr { display: none; }
.btrack { padding-bottom: 6px; }
/* 24: wrapped list lines return under the text */
.parts2 li { display: grid; grid-template-columns: auto auto 1fr; column-gap: .35em; align-items: baseline; }
.parts2 li::marker { content: ""; }
/* 25: lighter card borders, except the choke card */
.res .acard { border-width: 1px; } .res .acard.low { border: 2px solid #C83A3A; }
.acard h4 .lc-band, .acard .lc-band { white-space: nowrap; }
/* 29: Inter ships 400-600 only */
.ctx .permission b { font-weight: 600; }
/* 32: an empty Turnstile slot takes no room */
#uf-ts { min-height: 0; } #uf-ts:empty { display: none; }
@media (min-width: 48em) { .unlock .lc-sl__r, .unlock .lc-sl input[type=range] { height: 24px; } .unlock .lc-sl__v { margin: 0; min-height: 0; line-height: 1.3; } .unlock .lc-sl { min-height: 48px; } }

/* ======== W2i (1.6.3), set P: Quick Momentum Check, P-06 to P-16 ======== */
/* P-06: dark hero like the other main pages */
.hero-mc .hero-grid { position: relative; z-index: 3; align-items: center; }
.hero-mc .hero-art { position: relative; z-index: 3; }
.hero-mc .hero-art text { fill: #fff; }
.hero-mc .hero-art .pipe { fill: rgba(255,255,255,.07); stroke: #B7C1C6; }
.hero-mc .hero-art .pipe--choke { fill: rgba(200,58,58,.22); stroke: #FF7A6E; }
.hero-mc .hero-art .glow { fill: rgba(255,122,110,.38); }
.hero-mc h1 .lc-ul { color: #fff; }

/* P-09: own-words box fills the card, under every question */
.qcard > .own { width: 100%; margin: 14px 0 0; }
.qcard > .own textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }

/* P-08: the low end is the best answer on these sliders, so the bar runs green to red */
.lc-vs.rev input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, transparent var(--p, 0%), #E3E8EB var(--p, 0%)), linear-gradient(90deg, #11B890, #E8B23A 50%, #C83A3A); }
.lc-vs.rev.unset input[type=range]::-webkit-slider-runnable-track, .lc-vs.rev.off input[type=range]::-webkit-slider-runnable-track { background: #E3E8EB; }

/* P-10: nothing above or beside "Show my result" may move. The "Needs an answer" badge floats (no height), and the status line has its own reserved space below the button */
.qcard.lc-missing > fieldset::before { position: absolute; top: -12px; right: 14px; margin: 0; z-index: 2; }
#f .btn-row { flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; }
#f .btn--check { margin: 0 auto; }
#st { display: block; width: 100%; min-height: 3.2em; text-align: center; line-height: 1.5; }
@media (max-width: 480px) { #st { min-height: 5.6em; } }

/* P-11: result cards equal height; the band chip is centred and sits on the bottom edge */
.res .acards { align-items: stretch; }
.res .acard { display: flex; flex-direction: column; height: 100%; }
.res .acard > p { margin-bottom: 14px; }
.res .acard > .lc-band { margin-top: auto; align-self: center; }

/* P-14: the consent star */
.unlock .cb-star { color: #A12A2A; font-weight: 700; text-decoration: none; padding: 0 4px; }
.unlock .cb-star:hover, .unlock .cb-star:focus-visible { text-decoration: underline; }
.unlock .cb-note { margin: -4px 0 10px 30px; font-size: .78rem; line-height: 1.5; color: #5E6D74; max-width: none; }

/* P-15: country picker (a combobox: type a name or a dial code) */
.unlock .ph2 { align-items: stretch; }
.unlock .ccb { position: relative; flex: 0 0 112px; width: 112px; min-width: 0; }
.unlock .ccb .cc-in { width: 100%; height: 48px; box-sizing: border-box; margin: 0; padding: 0 8px; text-align: left; font: inherit; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 10px; background: #fff; cursor: text; }
.unlock .ccb .cc-in:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; }
.unlock .cc-list { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); width: min(300px, calc(100vw - 48px)); max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1.5px solid var(--line-strong, #cbd5e0); border-radius: 12px; box-shadow: 0 16px 32px -12px rgba(26,26,26,.35); -webkit-overflow-scrolling: touch; }
.unlock .cc-list[hidden] { display: none; }
.unlock .cc-list li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: 8px; align-items: center; padding: 10px 10px; min-height: 44px; border-radius: 8px; font-weight: 500; cursor: pointer; }
.unlock .cc-list li.on, .unlock .cc-list li:hover { background: #FFF1EF; }
.unlock .cc-list li[aria-selected=true] .cn { font-weight: 700; }
.unlock .cc-list .cd { color: #5E6D74; font-variant-numeric: tabular-nums; }
.unlock .cc-list li.cc-none { display: block; cursor: default; color: #5E6D74; }
.unlock .cc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* P-16: the status sits beside the button (under it on phones), with a sand timer that turns over while we work */
.unlock .uf-row { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 16px; }
.unlock .uf-st { margin: 0; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--fg, #1a1a1a); }
.unlock .uf-st.err { color: #C00000; }
.unlock .uf-st:empty { display: none; }
@media (max-width: 640px) { .unlock .uf-st { flex-basis: 100%; } }
.hg { flex: none; width: 22px; height: 30px; color: #1A1A1A; }
.hg .hg-top, .hg .hg-bot, .hg .hg-fall { transform-box: fill-box; }
.hg .hg-top { transform-origin: 50% 100%; transform: scaleY(.5); }
.hg .hg-bot { transform-origin: 50% 100%; transform: scaleY(.5); }
.hg .hg-fall { opacity: 0; }
.hg .hg-turn { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .hg .hg-turn { animation: hgTurn 1.2s cubic-bezier(.6,0,.3,1) infinite; }
  .hg .hg-top { animation: hgTop 1.2s linear infinite; }
  .hg .hg-bot { animation: hgBot 1.2s linear infinite; }
  .hg .hg-fall { animation: hgFall 1.2s linear infinite; }
}
@keyframes hgTurn { 0%, 72% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes hgTop { 0% { transform: scaleY(1); } 70%, 100% { transform: scaleY(0); } }
@keyframes hgBot { 0% { transform: scaleY(0); } 70%, 100% { transform: scaleY(1); } }
@keyframes hgFall { 0%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } }

/* P-13: the Team size box is exactly as tall as the 48px inputs beside it: value on the left, slider on the right, 1 row */
.unlock .lc-sl { display: flex; align-items: center; gap: 14px; height: 48px; min-height: 48px; box-sizing: border-box; padding: 0 14px; margin: 0; border-radius: 10px; }
.unlock .lc-sl .lc-sl__t, .unlock .lc-sl .lc-sl__e, .unlock .lc-sl .lc-sl__off { display: none; }
.unlock .lc-sl .lc-sl__v { flex: 0 0 auto; min-width: 6.6em; margin: 0; min-height: 0; font-size: .95rem; line-height: 1.2; }
.unlock .lc-sl .lc-sl__r { flex: 1 1 auto; min-width: 0; height: 24px; }
.unlock .lc-sl input[type=range] { height: 24px; margin: 0; }
.unlock .lc-sl input[type=range]::-webkit-slider-thumb { margin-top: -8px; }
.unlock .cb-star { padding: 0 0 0 2px; }
