/* Wave 2e WS-B3: page-scoped styles for the 6 unit and 14 engine pages (offers/*).
   Adds only what the shared files (registry-tokens.css, w2-components.css) do not have:
   heading emphasis (DR-20 / P-1), hero founder line, "We stand against…" line, growth vs scale,
   founder-voice block, cost-price-value strip, KPI footnote. Nothing here changes a shared file. */

/* ---- headings: bold only on the key nouns (P-1), underline on the turning word (P-2) ---- */
.lc-hd { font-weight: 500; }
.lc-hd b, .lc-hd strong { font-weight: 800; }
.lc-hd u { text-decoration-thickness: .08em; text-underline-offset: .18em; }
h1.lc-hd { font-weight: 400; }
h1.lc-hd b { font-weight: 800; }
.nm b { font-weight: 700; }

/* ---- owned lines (bold + italic) and quote key words (bold + underline), DR-20 ---- */
b.lc-own { font-weight: 700; }
b.lc-own i { font-style: italic; }
.credit { display: inline-block; margin-inline-start: .5em; font-size: .875rem; font-style: italic; opacity: .85; }

/* ---- hero: the KPI strip follows at once, so the hero needs less air below ---- */
body.eng .hero { min-height: 0; padding-bottom: 28px; }

/* ---- hero founder line ---- */
.hero .hq { margin: 20px 0 0; max-width: 56ch; padding: 4px 0 4px 16px; border-inline-start: 4px solid var(--sec-hero-a, #ECB4B1); color: #F2F4F4; }
.hero .hq p { margin: 0; font: 500 1.05rem/1.5 var(--font-heading); }
.hero .hq footer { margin-top: 6px; font-size: .875rem; color: #C9D3D8; }
.hero .lead b { font-weight: 700; }

/* ---- KPI strip under the hero text, inside the hero band (on the hero ground) ---- */
.hero .lc-kpis-wrap { position: relative; z-index: 3; padding-block: 0; background: none; margin-top: 28px; }
.hero .lc-kpis-wrap .wrap { padding-inline: 20px; } @media (min-width: 48em) { .hero .lc-kpis-wrap .wrap { padding-inline: 40px; } }
.hero .lc-kpis { padding: var(--s-4, 16px) 0 var(--s-2, 8px); max-width: none; margin: 0; }
.hero .lc-kpi__l { color: var(--lc-fg, #F2F4F4); }
.lc-kpis__fn { margin: 0; padding: 0 0 var(--s-2, 8px); font-size: .875rem; color: var(--lc-fg, #F2F4F4); opacity: .85; }

/* ---- "We stand against…" ---- */
.stand { margin: 14px 0 20px; padding: 14px 18px; border-inline-start: 4px solid #A34243; background: rgba(163, 66, 67, .08); border-radius: 0 12px 12px 0; }
.stand__k { margin: 0 0 4px; font: 700 .8125rem var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: #7A272A; }
.stand__l { margin: 0; font: 500 1.125rem/1.45 var(--font-heading); }

/* ---- founder-voice block: "Do you feel the same?" -> quote -> mechanism ---- */
.fv { margin: 22px 0; }
.fv__q { margin: 0 0 8px; font: 600 1.05rem var(--font-heading); }
.fv__b { margin: 0; padding: 10px 16px; border-inline-start: 4px solid var(--reg-legacy-4, #136AAC); background: rgba(19, 106, 172, .06); border-radius: 0 12px 12px 0; }
.fv__b p { margin: 0; font: 500 1.125rem/1.5 var(--font-heading); }
.fv__b footer { margin-top: 6px; font-size: .875rem; color: var(--fg-muted, #5E6D74); }
.fv__b--solo { margin: 18px 0; }
.fv__m { margin: 10px 0 0; }

/* ---- growth vs scale ---- */
.gvs { margin: 26px 0; }
.gvs h3 { margin: 0 0 12px; }
.gvs__g { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .gvs__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gvs__c { border-radius: 14px; padding: 14px 18px; border: 1px solid var(--line, #D8DEE1); background: #fff; }
.gvs__c--s { border-color: #05785D; background: #EBF6F2; }
.gvs__c p { margin: 0; }
.gvs__k { margin: 0 0 4px !important; font: 700 .875rem var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted, #5E6D74); }
.gvs__c--s .gvs__k { color: #015541; }

/* ---- cost -> price -> value (Price-Proof Offer Ladder Engine) ---- */
.cpv { margin: 22px 0; }
.cpv__s { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 14px; padding: 0; }
.cpv__s li { padding: 6px 18px; border-radius: 999px; border: 1.5px solid #05785D; font: 700 1rem var(--font-heading); color: #015541; background: #EBF6F2; }
.cpv__s li.ar { border: 0; background: none; padding: 0; color: var(--fg-muted, #5E6D74); }

/* ---- the closing anchor: Gerber line sits under the folded lead ---- */
.anchor .lead + .lead { margin-top: -6px; }
.anchor .lc-own { color: #fff; }

/* ---- notes strip on these pages: a little more air between the paragraphs ---- */
.lcx-notes p { max-width: none; }

/* ---- dark theme keeps the blocks readable ---- */
:root[data-theme="dark"] .stand { background: rgba(236, 180, 177, .08); }
:root[data-theme="dark"] .stand__k { color: #ECB4B1; }
:root[data-theme="dark"] .fv__b { background: rgba(116, 170, 222, .1); }
:root[data-theme="dark"] .gvs__c { background: transparent; }
:root[data-theme="dark"] .gvs__c--s { background: rgba(97, 184, 155, .1); border-color: #61B89B; }
:root[data-theme="dark"] .gvs__c--s .gvs__k { color: #61B89B; }
:root[data-theme="dark"] .cpv__s li { background: transparent; border-color: #61B89B; color: #61B89B; }

@media (prefers-reduced-motion: reduce) { .lc-hd, .stand, .fv, .gvs { transition: none; animation: none; } }

/* Wave 2f (L-05): engine sections inside the unit pages */
.p-engine { scroll-margin-top: 96px; }
.p-engine .etag { margin: 18px 0 8px; }
.p-engine .parts { margin-top: 18px; }

/* Wave 2f (L-05): the parts table and the not-included fold came with the engine page; they now live here, for the unit pages */
.parts { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.parts th { text-align: left; font: 700 .8125rem var(--font-heading); letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; background: #E9F1F9; color: #2D5880; }
.parts td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; } .parts td:first-child { width: 48px; font: 700 .9rem var(--font-heading); color: #5E6D74; } .parts td strong { display: block; }
/* W2e 320px: long words wrap, cells tighten, so the parts table never runs past the screen */
.parts th, .parts td { overflow-wrap: anywhere; } @media (max-width: 380px) { .parts th, .parts td { padding-left: 10px; padding-right: 10px; } .parts td:first-child { width: 36px; } }
details.ni { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 18px; } details.ni summary { cursor: pointer; font: 600 1.02rem var(--font-heading); padding: 14px 0; } details.ni ul { padding-left: 1.2em; } details.ni li { margin: .45em 0; }

/* ================= W2h O-38 to O-42: 1 week stepper for the gate and for every engine (shared; pages carry no copy of it) ================= */
/* Each step: numbered circle with a flag, name, week label on a dotted rung, 2-4 bullets. Desktop: 6 columns on rows shared by subgrid. */
.route-scroll .route { min-width: 940px; grid-template-columns: repeat(6, minmax(150px, 1fr)); grid-template-rows: auto auto auto 1fr; row-gap: 0; }
.route-scroll .route > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.route-scroll .route > li > .dot { margin-bottom: 10px; }
.route-scroll .route > li > strong { font-family: var(--font-heading); font-size: 1rem; }
.route .wk { position: relative; display: block; padding-top: 26px; margin: 12px 0 8px; font: 600 .875rem var(--font-body, inherit); color: var(--fg-muted, #5E6D74); }
.route .wk::before { content: ""; position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 3px solid #D44040; border-radius: 50%; background: #fff; box-sizing: border-box; z-index: 1; }
.route > li:not(:last-child) .wk::after { content: ""; position: absolute; top: 10px; left: calc(50% + 10px); width: calc(100% - 4px); border-top: 3px dotted #D44040; }
.route > li > ul { margin: 0; padding: 0 0 0 1.1em; text-align: left; font-size: .9rem; line-height: 1.45; }
.route > li > ul li { margin: 0 0 .4em; padding: 0; text-align: left; }

/* the dashed and dotted connectors blink gently: an opacity pulse, 1.6s */
@keyframes lc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.route::before, .route > li:not(:last-child) .wk::after { animation: lc-blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .route::before, .route > li:not(:last-child) .wk::after { animation: none; } }

/* phones and narrow tablets: vertical stepper, circle on the left, no sideways scroll */
@media (max-width: 48em) {
  .route-scroll { overflow: visible; padding: 28px 0 0; }
  .route-scroll .route { --d: 48px; display: block; min-width: 0; }
  .route::before { left: calc(var(--d) / 2 - 2px); right: auto; top: calc(var(--d) / 2); bottom: 56px; width: 5px; height: auto; background: repeating-linear-gradient(180deg, var(--line-strong) 0 14px, transparent 14px 22px); }
  .route-scroll .route > li { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: var(--d) minmax(0, 1fr); column-gap: 14px; text-align: left; padding: 0 0 24px; }
  .route-scroll .route > li > .dot { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .route-scroll .route > li > strong { grid-column: 2; grid-row: 1; align-self: center; }
  .route .wk { grid-column: 2; grid-row: 2; padding-top: 0; margin: 4px 0; }
  .route .wk::before, .route > li:not(:last-child) .wk::after { display: none; }
  .route > li > ul { grid-column: 2; grid-row: 3; }
}

/* O-42: room between the Day 21 / 40 / 90 cards and the next heading */
.checks { margin-bottom: 48px; }
.checks + .lc-hd { margin-top: 0; }

/* ================= W2i set P (P-21, P-23 to P-25) ================= */
/* P-21: Growth is brown, Scale is red (tokens and .lc-growth / .lc-scale live in shell.css) */
.gvs__c--g { border-color: var(--lc-growth, #7A4E2D); background: #F7EFE8; }
.gvs__c--s { border-color: var(--lc-scale, #D44040); background: #FCEDED; }
.gvs__k.lc-growth, .gvs__c--g .gvs__k { color: var(--lc-growth, #7A4E2D); }
.gvs__k.lc-scale, .gvs__c--s .gvs__k { color: var(--lc-scale, #D44040); }
.lc-tag-growth, .lc-tag-scale { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.lc-tag-growth { color: var(--lc-growth, #7A4E2D); background: rgba(122, 78, 45, .12); }
.lc-tag-scale { color: var(--lc-scale, #D44040); background: rgba(200, 58, 58, .12); }
:root[data-theme="dark"] .gvs__c--g { background: rgba(196, 147, 108, .1); border-color: #C4936C; }
:root[data-theme="dark"] .gvs__c--g .gvs__k, :root[data-theme="dark"] .gvs__k.lc-growth { color: #C4936C; }
:root[data-theme="dark"] .gvs__c--s { background: rgba(232, 99, 99, .1); border-color: #E86363; }
:root[data-theme="dark"] .gvs__c--s .gvs__k, :root[data-theme="dark"] .gvs__k.lc-scale { color: #E86363; }
:root[data-theme="dark"] .gvs h3 .lc-growth { color: #C4936C; } :root[data-theme="dark"] .gvs h3 .lc-scale { color: #E86363; }

/* P-24: each check card takes its step's circle colour (the --cc inline value is the step 3 / 4 / 6 colour); title is a deeper shade of it */
.checks .card { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 9%, #fff); }
.checks .card h3 { color: color-mix(in srgb, var(--cc) 50%, #1A1A1A); } /* 1.8.6: 50% so every unit colour reads 4.5:1+ on its card tint */
:root[data-theme="dark"] .checks .card { background: color-mix(in srgb, var(--cc) 14%, transparent); }
:root[data-theme="dark"] .checks .card h3 { color: color-mix(in srgb, var(--cc) 70%, #fff); }

/* P-23: connector lines from step 3 / 4 / 6 to the Day 21 / 40 / 90 cards (drawn by assets/js/w2i-gate-links.js, desktop only) */
.route-scroll + .checks.lc-gl-on { margin-top: 92px; }
svg.lc-gl { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 1; }
svg.lc-gl[hidden] { display: none; }
svg.lc-gl path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 8; animation: lc-blink 1.6s ease-in-out infinite; }
svg.lc-gl circle { animation: lc-blink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { svg.lc-gl path, svg.lc-gl circle { animation: none; } }
@media (min-width: 48.01em) {
  .route-scroll .route { column-gap: 16px; min-width: 1000px; }
  .route > li:not(:last-child) .wk::after { width: calc(100% + 12px); }
}

/* P-25: the 3 Layers of Intelligence, an isometric stack in the unit's colour (restored from the pre-W2e pages, shared) */
.lc-l3 { list-style: none; margin: 26px 0 8px; padding: 0; position: relative; }
.lc-l3 > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; margin: 0 0 18px; }
.lc-l3 > li svg { width: 220px; max-width: 100%; height: auto; display: block; margin: 0 auto; position: relative; z-index: 2; animation: lc-l3-sway 9s ease-in-out infinite alternate; }
.lc-l3 > li:nth-of-type(2) svg { animation-delay: -3s; } .lc-l3 > li:nth-of-type(3) svg { animation-delay: -6s; }
.lc-l3 .t { fill: var(--t); } .lc-l3 .l { fill: color-mix(in srgb, var(--t) 78%, #000); } .lc-l3 .r { fill: color-mix(in srgb, var(--t) 58%, #000); }
.lc-l3 text { font: 700 44px var(--font-heading, "Source Sans 3", sans-serif); fill: var(--x, #1A1A1A); }
.lc-l3 > li:nth-of-type(1) { --t: var(--s4, #CC4449); --x: var(--x4, #fff); }
.lc-l3 > li:nth-of-type(2) { --t: var(--s3, #E48A8D); --x: var(--x3, #1A1A1A); }
.lc-l3 > li:nth-of-type(3) { --t: var(--s2, #F0B4B6); --x: var(--x2, #1A1A1A); }
.lc-l3 h3 { margin: 0 0 2px; font-size: 1.35rem; } .lc-l3 h3 .lyr { font-weight: 400; } .lc-l3 p { margin: 0 0 4px; }
@keyframes lc-l3-sway { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
.lc-l3__wire, .lc-l3__sig { display: none; }
@media (min-width: 48em) {
  .lc-l3 > li { grid-template-columns: 300px minmax(0, 1fr); gap: 54px; margin: -26px 0 0; } .lc-l3 > li:nth-of-type(1) { margin-top: 0; }
  .lc-l3 > li svg { width: 300px; } .lc-l3 .tx { padding: 34px 0 18px; position: relative; }
  .lc-l3 .tx::before { content: ""; position: absolute; left: -54px; top: 98px; width: 44px; border-top: 2px dashed var(--s4, #CC4449); }
  .lc-l3__wire { display: block; position: absolute; left: 149px; top: 70px; bottom: 90px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--s4, #CC4449), #D44040, var(--s4, #CC4449)); opacity: .55; z-index: 1; }
  .lc-l3__sig { display: block; position: absolute; left: 144px; width: 13px; height: 13px; border-radius: 50%; z-index: 3; box-shadow: 0 0 12px 3px currentColor; }
  .lc-l3__sig.dn { color: #D44040; background: #D44040; animation: lc-l3-dn 4.6s ease-in-out infinite alternate; }
  .lc-l3__sig.up { color: var(--s4, #CC4449); background: var(--s4, #CC4449); animation: lc-l3-up 4.6s ease-in-out infinite alternate; }
  @keyframes lc-l3-dn { from { top: 70px; } to { top: calc(100% - 90px); } } @keyframes lc-l3-up { from { top: calc(100% - 90px); } to { top: 70px; } }
}
@media (prefers-reduced-motion: reduce) { .lc-l3 > li svg, .lc-l3__sig { animation: none !important; } }
/* 1.8.6 E-2 (WCAG 2.4.7): the engine card's link was a 0x0 box with a stretched ::after, so keyboard focus landed on nothing visible.
   The link itself now covers the card (same click area as before) and shows the focus ring round the whole card. */
.ecard > a.go { position: absolute; inset: 0; align-self: stretch; justify-self: stretch; z-index: 1; display: block; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: inherit; font-size: 0; }
.ecard > a.go::after { content: none; }
.ecard > a.go:focus-visible { outline: 3px solid #D44040; outline-offset: -3px; } /* inside: the card clips overflow */