/* 1.8.6 G-1: optional + a preload (Sans: partials/header.html on every page; Serif: added by build_shell.js on pages with a quote), so text never re-flows when a font arrives */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:optional;src:url("../fonts/SourceSans3-var-latin.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:optional;src:url("../fonts/SourceSerif4-italic-var-latin.woff2") format("woff2")}
/* D-03: the font faces live here, because shell.css is stamped on every page (brand.css is not). Same paths as brand.css (same folder). */
/* LeapCode shared header and footer. Self-contained; every selector is namespaced .lcx- */
.lcx-header,.lcx-footer{--lcx-red:#D44040;--lcx-red-hi:#F07070;--lcx-paper:#F7F9F9;--lcx-muted:#AEBBC2;
  font-family:var(--font-body,"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);line-height:1.5;-webkit-text-size-adjust:100%}
.lcx-header *,.lcx-footer *{box-sizing:border-box}
.lcx-header ul,.lcx-footer ul{list-style:none;margin:0;padding:0}
.lcx-header a,.lcx-footer a{text-decoration:none}
.lcx-header{position:sticky;top:0;z-index:60;background:rgba(26,26,26,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.lcx-header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:100%;max-width:1200px;margin:0 auto;padding:8px clamp(16px,4vw,40px);min-height:56px}
.lcx-header__in>.lcx-header__logo{justify-self:start}
.lcx-header__in>.lcx-btn{justify-self:end}
.lcx-header__logo{display:flex;align-items:center;min-height:44px}
.lcx-header__logo img{display:block;height:28px;width:auto}
.lcx-nav{justify-self:center}
.lcx-nav__list{display:flex;gap:6px}
.lcx-nav__list a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--lcx-paper);font:600 .95rem var(--font-body,"Source Sans 3",system-ui,sans-serif)}
.lcx-nav__list a:hover,.lcx-nav__list a:focus-visible{color:var(--lcx-red-hi)}
.lcx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--lcx-red);color:#fff!important;font:700 .95rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);white-space:nowrap;transition:background .2s ease,transform .2s ease}
.lcx-btn:focus-visible{background:#D44040;transform:translateY(-1px)}
@media (hover:hover) and (pointer:fine){.lcx-btn:hover{background:#D44040;transform:translateY(-1px)}}  /* L-015 */
.lcx-menu{display:none;position:relative}
.lcx-menu summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:10px}
.lcx-menu summary::-webkit-details-marker{display:none}
.lcx-menu__bars,.lcx-menu__bars::before,.lcx-menu__bars::after{display:block;width:22px;height:2px;background:var(--lcx-paper);border-radius:2px;content:"";position:relative}
.lcx-menu__bars::before{position:absolute;top:-7px}.lcx-menu__bars::after{position:absolute;top:7px}
.lcx-menu[open] .lcx-menu__list{display:block}
.lcx-menu__list{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;background:#1A1A1A;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.lcx-menu__list a{display:flex;align-items:center;min-height:44px;padding:0 14px;color:var(--lcx-paper);font:600 1rem var(--font-body,"Source Sans 3",system-ui,sans-serif);border-radius:8px}
.lcx-menu__list a:hover,.lcx-menu__list a:focus-visible{background:rgba(255,255,255,.08);color:var(--lcx-red-hi)}
.lcx-nav__list a{white-space:nowrap}
@media (max-width:1270px){.lcx-header__in{display:flex}.lcx-nav{display:none}.lcx-menu{display:block}.lcx-btn{margin-left:auto}.lcx-header__in{gap:10px}}
@media (max-width:420px){.lcx-header__logo img{height:24px}.lcx-btn{padding:0 14px;font-size:.85rem}.lcx-header__in{padding-left:16px;padding-right:12px}}

/* 1.8.6 E-1 (WCAG 2.4.1): 1 skip link per page, from partials/header.html; hidden until it takes keyboard focus */
a.skip-link.lcx-skip{position:absolute;left:8px;top:8px;z-index:1000;padding:10px 16px;background:#fff;color:#1A1A1A;border:2px solid #D44040;border-radius:8px;font:700 1rem var(--font-body,"Source Sans 3",system-ui,sans-serif);text-decoration:none;transform:translateY(-300%)}
a.skip-link.lcx-skip:focus,a.skip-link.lcx-skip:focus-visible{transform:none;left:8px;outline:3px solid #D44040;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){a.skip-link.lcx-skip{transition:transform .15s ease}}
.lcx-footer{background:#1A1A1A;color:var(--lcx-muted);padding:48px clamp(16px,4vw,40px) 28px;font-size:.9rem;text-align:left}
/* 1.8.6 A-2 (DR-17.2): footer text starts on the page column. The footer already pads by the shell gutter, so the inner box is the
   1200px container minus its 2 gutters (same left edge as .wrap content at every width). */
.lcx-footer__in{width:100%;max-width:calc(1200px - 2 * clamp(16px,4vw,40px));margin:0 auto}
.lcx-footer__grid{display:grid;grid-template-columns:1.2fr 1.5fr 1fr;gap:40px 48px}
.lcx-lockup{display:inline-flex;flex-direction:column;gap:4px}
.lcx-lockup img{display:block;height:35px;width:auto;max-width:100%}
.lcx-lockup__tag{font:600 .7rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--lcx-red-hi)}
.lcx-footer__tagline{margin:14px 0 12px;color:var(--lcx-paper);font:700 1.05rem var(--font-heading,"Source Sans 3",system-ui,sans-serif)}
.lcx-footer a{color:var(--lcx-muted)}
.lcx-footer a:hover,.lcx-footer a:focus-visible{color:#fff}
.lcx-footer__contact a,.lcx-footer__col li a,.lcx-footer__meta a{display:inline-flex;align-items:center;min-height:44px}
.lcx-footer__col h2{margin:0 0 6px;font:700 .8rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.lcx-soc{display:grid;grid-template-columns:repeat(4,44px);gap:12px;margin-top:10px!important;list-style:none;padding:0}
.lcx-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--lcx-muted);color:var(--lcx-muted);transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.lcx-soc a:hover,.lcx-soc a:focus-visible{background:var(--lcx-red);border-color:var(--lcx-red);color:#fff;transform:translateY(-2px)}
.lcx-soc svg{width:18px;height:18px}
.lcx-partners{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:10px!important}
.lcx-partners a{display:inline-flex;align-items:center;min-height:48px}
.lcx-partners img{display:block;height:48px;width:auto;border-radius:6px}
.lcx-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#2C3E50;color:#fff;font:700 .95rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);letter-spacing:.04em;border:2px solid rgba(255,255,255,.2)}
.lcx-footer__legal{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.8125rem}
.lcx-footer__legal p{margin:0 0 8px;max-width:none}
.lcx-footer__meta{display:flex;flex-wrap:wrap;gap:0 18px;margin:6px 0 4px!important}
.lcx-footer__copy{margin-top:6px!important;color:#8696a0}
@media (min-width:561px){.lcx-footer__col nav ul,nav.lcx-footer__col ul{columns:2;column-gap:28px}.lcx-footer__col li{break-inside:avoid}}
@media (max-width:900px){.lcx-footer__grid{grid-template-columns:1fr 1fr;gap:32px 40px}.lcx-footer__brand{grid-column:1/-1}}
@media (max-width:560px){.lcx-footer{padding-top:36px}.lcx-footer__grid{grid-template-columns:1fr;gap:28px}.lcx-footer__col nav ul,nav.lcx-footer__col ul{columns:1}}
@media (prefers-reduced-motion:reduce){.lcx-btn,.lcx-soc a{transition:none}.lcx-btn:hover,.lcx-soc a:hover{transform:none}}

/* Shell overflow guards (moved from the homepage): the footer grid and header must never cause sideways scroll */
.lcx-footer__grid > * { min-width: 0; }
.lcx-partners img { max-width: 100%; box-sizing: border-box !important; }
@media (max-width: 380px) { .lcx-header .lcx-header__logo img { width: 110px; height: auto; } .lcx-header .lcx-header__in { gap: 4px; padding-right: 4px; } .lcx-header .lcx-btn { padding: 0 10px; font-size: .8rem; } }

/* 1.3: at 320px the header was 4px too wide (hamburger past the edge) */
@media (max-width: 340px) { .lcx-header .lcx-header__logo img { width: 96px; } .lcx-header .lcx-btn { padding: 0 8px; font-size: .75rem; } }

/* ---- notes strip above the footer (design rule DR-5): every disclaimer, referral note and "how we save data" line lives here,
        in small type, never in the hero or above the fold ---- */
.lcx-notes { background: #F4F7F8; border-top: 1px solid #E3E8EB; padding: 18px 0; }
.lcx-notes__in { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.lcx-notes p { margin: 0 0 6px; font-size: .78rem; line-height: 1.55; color: #5E6D74; max-width: 90ch; }
.lcx-notes p:last-child { margin-bottom: 0; }
.lcx-notes b { color: #44525a; }
.lcx-notes a { color: inherit; text-decoration: underline; text-decoration-color: #D44040; text-underline-offset: 3px; }
.lcx-notes button { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-color: #D44040; text-underline-offset: 3px; cursor: pointer; }
.lcx-notes a:focus-visible, .lcx-notes button:focus-visible { outline: 3px solid #D44040; outline-offset: 2px; border-radius: 3px; }

.lcx-ver { margin-left: 10px; font-size: .72rem; color: #8696A0; white-space: nowrap; } /* 1.8.6 C-9: solid #8696A0 on #1A1A1A = 5.7:1 (was 55% opacity, 2.6:1) */
/* breadcrumbs (release 1.5): 1 line, Home > Section > Page, every step but the last is a link. Plain text with separators, never a list */
.lcx-crumbs{background:#F7F9F9;border-bottom:1px solid #E1E6E8;font-family:var(--font-body,"Source Sans 3",system-ui,sans-serif)}
.lcx-crumbs{--lcx-gut:clamp(16px,4vw,40px);padding-left:max(var(--lcx-gut),calc((100% - 1200px)/2 + var(--lcx-gut)));padding-right:max(var(--lcx-gut),calc((100% - 1200px)/2 + var(--lcx-gut)))}
.lcx-crumbs__in{box-sizing:border-box;margin:0;padding:10px 0;font-size:.9rem;line-height:1.6;color:var(--c-crumb,#5E6D74);display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.lcx-crumbs__sep{color:#B4BEC3;font-weight:600}
.lcx-crumbs a{color:var(--c-crumb,#5E6D74);font-weight:400;text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.lcx-crumbs a:hover,.lcx-crumbs a:focus-visible{text-decoration:underline;color:#A12A2A}
.lcx-crumbs a:focus-visible{outline:3px solid #D44040;outline-offset:2px;border-radius:3px}
.lcx-crumbs__cur{color:#4A585F;font-weight:600}

/* Services drop-down (release 1.5): opens on hover or keyboard focus; the Services link itself still goes to the page */
.lcx-has-sub{position:relative}
.lcx-sub{display:none;position:absolute;left:0;top:100%;min-width:290px;padding:8px;background:#1A1A1A;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);z-index:70}
.lcx-has-sub:hover>.lcx-sub,.lcx-has-sub:focus-within>.lcx-sub,.lcx-has-sub.is-open>.lcx-sub{display:block}
.lcx-sub--r{left:auto;right:0}
.lcx-sub a{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:8px 12px;border-radius:8px;color:var(--lcx-paper);font:600 .95rem var(--font-body,"Source Sans 3",system-ui,sans-serif)}
.lcx-sub a span{font-weight:500;font-size:.8rem;color:var(--lcx-muted)}
.lcx-sub a:hover,.lcx-sub a:focus-visible{background:rgba(255,255,255,.08);color:var(--lcx-red-hi)}
.lcx-menu__list a.lcx-menu__sub{padding-left:30px;font-weight:500;font-size:.95rem}

/* menu look (release 1.5): pipes between items, and a hover sweep like the rest of the site */
.lcx-nav__list{gap:0;align-items:center}
.lcx-nav__list>li{position:relative;display:flex;align-items:center}
.lcx-nav__list>li+li::before{content:"";width:1px;height:18px;background:rgba(255,255,255,.22);flex:none}
.lcx-nav__list>li>a{position:relative;padding:0 14px;transition:color .2s ease,transform .2s ease}
.lcx-nav__list>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:linear-gradient(90deg,#D44040,#FF9B93);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.lcx-nav__list>li>a:hover,.lcx-nav__list>li>a:focus-visible{transform:translateY(-1px)}
.lcx-nav__list>li>a:hover::after,.lcx-nav__list>li>a:focus-visible::after,.lcx-has-sub:focus-within>a::after,.lcx-has-sub:hover>a::after{transform:scaleX(1)}
.lcx-nav__list>li>a:focus-visible{outline:3px solid #FF9B93;outline-offset:-3px;border-radius:6px}
.lcx-sub a{transition:background-color .2s ease,color .2s ease,padding-left .2s ease}
.lcx-sub a:hover,.lcx-sub a:focus-visible{padding-left:18px}
.lcx-menu__list a{transition:background-color .2s ease,color .2s ease,padding-left .2s ease}
.lcx-menu__list a:hover,.lcx-menu__list a:focus-visible{padding-left:20px}
@media (prefers-reduced-motion:reduce){.lcx-nav__list>li>a,.lcx-nav__list>li>a::after,.lcx-sub a,.lcx-menu__list a{transition:none}.lcx-nav__list>li>a:hover{transform:none}}

/* Scaling Secrets in the footer, under Partners (release 1.5): 1 tall email field with the Subscribe button centred inside it, on its own rule line.
   It is a plain form that opens Substack, so no Substack code loads on these pages. */
.lcx-ss{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.32)}
.lcx-ss__t{margin:0 0 4px;font:700 1rem var(--font-heading,"Source Sans 3",sans-serif);color:#fff;text-transform:none;letter-spacing:0}
.lcx-ss__p{margin:0 0 12px;font-size:.88rem;color:var(--lcx-muted)}
.lcx-ss__f{position:relative}
.lcx-ss__f input{display:block;width:100%;min-height:58px;padding:0 138px 0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);color:#fff;font:500 1rem var(--font-body,"Source Sans 3",system-ui,sans-serif);transition:border-color .2s ease,background-color .2s ease}
.lcx-ss__f input::placeholder{color:#93A3AB}
.lcx-ss__f input:hover{border-color:rgba(255,255,255,.4)}
.lcx-ss__f input:focus-visible{outline:3px solid #FF9B93;outline-offset:2px;background:rgba(255,255,255,.1)}
.lcx-ss__f button{position:absolute;top:50%;right:7px;transform:translateY(-50%);min-height:44px;padding:0 20px;border:0;border-radius:10px;cursor:pointer;overflow:hidden;
  background:#D44040;color:#fff;font:700 .95rem var(--font-body,"Source Sans 3",system-ui,sans-serif);letter-spacing:.01em;box-shadow:0 8px 18px -10px rgba(200,58,58,.9);transition:transform .2s ease,box-shadow .2s ease}
.lcx-ss__f button span{position:relative;z-index:1}
.lcx-ss__f button::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .55s ease}
.lcx-ss__f button:hover,.lcx-ss__f button:focus-visible{transform:translateY(calc(-50% - 1px));box-shadow:0 14px 24px -10px rgba(200,58,58,.95)}
.lcx-ss__f button:hover::after,.lcx-ss__f button:focus-visible::after{left:130%}
.lcx-ss__f button:focus-visible{outline:3px solid #FF9B93;outline-offset:2px}
.lcx-ss__n{margin:10px 0 0;font-size:.78rem;color:var(--lcx-muted)}
.lcx-ss__n a{color:#F07070;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
@media (prefers-reduced-motion:reduce){.lcx-ss__f button,.lcx-ss__f button::after,.lcx-ss__f input{transition:none}.lcx-ss__f button:hover{transform:translateY(-50%)}}
@media (max-width:420px){.lcx-ss__f input{padding-right:128px}}

/* LeapCode insignia on alternating sections (release 1.5, assets/js/watermark.js).
   Same geometry as the Leap Arch on the "Not sure where to start" band (the reference): bottom corner, at least a third cropped, 0 degrees.
   Strength: 13% on light sections, 14% on dark ones (the reference is 12% on dark with a night-sky texture). Tune only here. */
.lc-wm{position:relative;isolation:isolate;overflow:hidden}
.lc-wm::before{content:"";position:absolute;z-index:-1;bottom:-20%;width:clamp(300px,42vw,620px);aspect-ratio:425/510;pointer-events:none;
  background:url("../img/brand/arch-watermark.svg") center/contain no-repeat;opacity:.13}
.lc-wm--r::before{right:-8%}
.lc-wm--l::before{left:-8%}
.lc-wm--dark::before{opacity:.14}
/* L-011: backstop. A watermark class on a light section draws nothing; the insignia lives on dark sections only. */
.lc-wm:not(.lc-wm--dark)::before{display:none}
@media (max-width:700px){.lc-wm::before{width:280px;opacity:.13}.lc-wm--dark::before{opacity:.12}}
@media print{.lc-wm::before{display:none}}

/* footer: Why > How > What, then Start */
.lcx-www{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.lcx-www li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.lcx-www li>span{flex:0 0 52px;font:800 .72rem var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#F07070}
.lcx-www a{color:#fff;font-weight:600}
.lcx-www a:hover,.lcx-www a:focus-visible{color:var(--lcx-red-hi)}
.lcx-www__go{margin-top:4px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.22)}
.lcx-more{margin-top:4px!important}
/* the Why / How / What ribbon under the breadcrumb */
.www{background:#fff;border-bottom:1px solid #E1E6E8}
.www ol{list-style:none;margin:0 auto;padding:10px clamp(16px,4vw,32px);max-width:1200px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.www a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:6px 10px;border-radius:12px;border:1.5px solid #E1E6E8;background:#FBF8F5;color:#1A1A1A;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background-color .2s ease}
.www b{font:800 .8125rem var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#A12A2A}
.www span{font:700 .95rem var(--font-heading,"Source Sans 3",sans-serif)}
.www a:hover,.www a:focus-visible{transform:translateY(-1px);border-color:#D44040}
.www a:focus-visible{outline:3px solid #D44040;outline-offset:2px}
.www .is-here a{background:#D44040;border-color:#D44040;color:#fff}
.www .is-here b{color:#fff} /* 1.8.6 C-5: labels on #D44040 are white (4.6:1) and 13px+ */
.www .is-here small{font:700 .68rem var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#fff}
@media (max-width:520px){.www ol{gap:6px}.www span{font-size:.85rem}}
@media (prefers-reduced-motion:reduce){.www a{transition:none}.www a:hover{transform:none}}

/* Release 1.5: menu labels (Why, How, What, Proof, Squad), logo line-up, footer icons and LeapCode OS link (approved from /preview/menu/) */
.lcx-header__logo img{transform:translateY(3px)}
.lcx-nav a[data-tag]{position:relative}
.lcx-nav a[data-tag]::before{content:attr(data-tag);position:absolute;left:14px;top:3px;font:800 .6rem/1 var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#F07070;opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.lcx-nav a[data-tag]:hover::before,.lcx-nav a[data-tag]:focus-visible::before{opacity:1;transform:none}
.lcx-tag{flex:0 0 52px;font:800 .62rem var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#F07070;font-style:normal}
.lcx-menu__list a.lcx-menu__sub{padding-left:66px}
@media (prefers-reduced-motion:reduce){.lcx-nav a[data-tag]::before{transition:none;transform:none}}
.lcx-footer__contact a{gap:10px}
.lcx-ico{width:22px;height:22px;flex:none;color:#F07070}
.lcx-footer__contact a:hover .lcx-ico,.lcx-footer__contact a:focus-visible .lcx-ico{color:#fff}
.lcx-os>span{display:flex;flex-direction:column;line-height:1.25;font-weight:700}
.lcx-os__n{display:inline-block!important;white-space:nowrap}
.lcx-os small{font-weight:500;font-size:.78rem;color:var(--lcx-muted)}
.lcx-www{gap:0}
.lcx-www li{min-height:44px}
.lcx-www__n{margin:14px 0 0}
.lcx-www__n a{color:#fff;font-weight:600}
.lcx-www a+a::before{content:"\00b7";margin-right:14px;color:#6B7B82}

/* W2e: the long call button wraps to 2 lines on phones instead of overflowing; 44px tap target kept */
@media (max-width:600px){.lcx-header .lcx-btn{white-space:normal;text-align:center;line-height:1.15;max-width:150px;padding:4px 12px;font-size:.78rem}}
@media (max-width:380px){.lcx-header .lcx-btn{max-width:128px;padding:4px 8px;font-size:.72rem}}
/* W2e: the call button label is longer ("🎁 Book your Free Call to Scale") and the check is "Quick Momentum Check™", so the desktop bar tightens between 1271 and 1520px to fit 1280 without a sideways scroll */
@media (min-width:1271px) and (max-width:1520px){
  .lcx-header__in{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .lcx-nav{justify-self:center;min-width:0}
  .lcx-nav__list a{font-size:.88rem}
  .lcx-nav__list>li>a{padding:0 8px}
  .lcx-nav__list>li>a::after{left:8px;right:8px}
  .lcx-header .lcx-btn{padding:0 14px;font-size:.84rem}
}


/* ===== W2f (1.6.1) shared pieces ===== */
/* K-03: breadcrumbs share the header's edge between 1271 and 1520px too, so the trail starts under the logo */

/* L-01 / DR-26: hero emphasis. 1 inverted phrase (the key subject) and 1 underlined phrase (the turn) on every h1.
   .lc-inv: white on a red block with a slight skew (the block is skewed, the text stays upright). White on #D44040 is 5.1:1.
   .lc-ul: thick red underline. Both work on light and dark heroes and wrap across lines. */
.lc-inv{position:relative;display:inline-block;max-width:100%;padding:0 .22em;margin:0 .04em;color:#fff!important;font-style:normal;z-index:0;vertical-align:baseline}
.lc-inv::before{content:"";position:absolute;inset:0;z-index:-1;background:#D44040;border-radius:3px;transform:skewX(-6deg)}
.lc-ul{text-decoration:underline;text-decoration-color:#D44040;text-decoration-thickness:.13em;text-underline-offset:.16em;text-decoration-skip-ink:none}
.lc-inv .lc-ul,.lc-inv.lc-ul{text-decoration-color:#fff}
@media print{.lc-inv::before{background:none;border-bottom:3px solid #D44040}.lc-inv{color:inherit!important}}
@media (forced-colors:active){.lc-inv::before{background:Highlight}.lc-inv{color:HighlightText!important}}

/* DR-24: the "(OF n)" label. Grey small caps in brackets; the label before it is 2px larger. Use: <span class="lc-of-wrap"><span class="lc-of-lab">Question 3</span> <span class="lc-of">(of 10)</span></span> */
.lc-of-wrap{display:inline-flex;align-items:baseline;gap:.4em}
.lc-of-lab{font-size:1em}
.lc-of{font-size:calc(1em - 2px);font-variant-caps:all-small-caps;letter-spacing:.06em;font-weight:600;color:#7A8A91;font-style:normal}

/* L-02: hero role labels on the people pages were pills; they are plain text now */
.hero .role,header.hero .role,.hero-grid .role{display:block;margin:0 0 14px;padding:0;border:0;border-radius:0;background:none;font:700 .8rem var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#F07070}

/* M-04: every animation and transition on every page stops under reduced motion (1 rule, here, because shell.css is on every page) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}

/* ===== W2g (1.6.2) ===== */
/* N-04 / DR-20: a heading is plain weight; only the key words are bold. The key words are the .lc-inv and .lc-ul phrases and any <strong> or <b> in the h1.
   Bold form follows the owned-line pattern (P-1): 2-4 carrying words, never the whole line. */
body h1{font-weight:700}
body h1 .lc-inv,body h1 .lc-ul,body h1 strong,body h1 b{font-weight:800}

/* N-05: 1 hero rhythm, here, for every hero. h1 -> sub-line 22px (room for the underline and inverted block), sub-line -> description 20px, description -> buttons 32px.
   The 2-line h1 has line-height 1.12 so the lines sit together and the inverted block on a word never touches the line above or below. */
body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) h1{margin:0 0 22px;line-height:1.12}
body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) .sub{margin:0 0 20px}
body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) :is(.lead,.lede):has(+ .btn-row){margin-bottom:0}
body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) .btn-row{margin-top:32px}
@media (max-width:600px){
  body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) h1{margin-bottom:18px}
  body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) .sub{margin-bottom:16px}
  body :is(.hero,.hero-mc,.hero-text,.hero-copy,.op-hero) .btn-row{margin-top:26px}
}

/* ===== W2g round 2 (1.6.2) ===== */
/* DR-14: every primary button is the red gradient with white text; hover is a darker red, never orange. Covers .btn--call and the check's "Show my result". */
body .btn--call, body .btn--check, body .dark .btn--check{background:#D44040;color:#fff;border-color:transparent}
body .btn--call:focus-visible, body .btn--check:focus-visible{background:#D44040;color:#fff;box-shadow:0 14px 28px -10px rgba(168,46,46,.7)}
@media (hover:hover) and (pointer:fine){
  body .btn--call:hover, body .btn--check:hover, body .dark .btn--check:hover{background:#D44040;color:#fff;box-shadow:0 14px 28px -10px rgba(168,46,46,.7)}
}

/* J-04: KPI numbers are white on every dark band, and the "+" is red on every strip */
.dark .lc-kpi__n, .hero .lc-kpi__n, .hk .lc-kpi__n, .lc-kpis-wrap .lc-kpi__n, .band--dark .lc-kpi__n{color:#fff}
.lc-kpi__n .hk-plus, .hk-plus{color:#FF6B63}

/* L-01: the emphasised word and its trailing punctuation stay together on one line, no gap before the full stop */
.lc-nw{white-space:nowrap}
.lc-inv + .lc-punct, .lc-ul + .lc-punct{margin-left:0}

/* DR-17: the notes strip uses the footer's inner width and padding, so the text starts and ends where the footer's does */
.lcx-notes{padding:18px clamp(16px,4vw,40px)}
.lcx-notes__in{max-width:1200px;padding:0}
.lcx-notes p{max-width:none}

/* J-26 / M-19: footer rows stay on 1 line from 901px up (Contact and Learn to Scale never wrap alone) */
@media (min-width:901px){
  .lcx-footer__grid{grid-template-columns:.8fr 2.1fr .9fr;gap:40px 36px}
  .lcx-www li{flex-wrap:nowrap;gap:6px 10px;white-space:nowrap}
  .lcx-www a+a::before{margin-right:10px}
  .lcx-www li>span{flex:0 0 48px}
}
@media (min-width:901px) and (max-width:1100px){
  .lcx-footer__grid{grid-template-columns:.7fr 2.3fr .9fr;gap:32px 24px}
  .lcx-www li{gap:6px 8px}
  .lcx-www a+a::before{margin-right:8px}
}

/* K-31: the check page's road box, the /roadmap/ markup in compact form (scripts/build_check_road_w2g.py) */
.rm2--mini .rm2-g__h{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);margin:0 0 .8em;display:flex;align-items:baseline;flex-wrap:wrap;gap:.1em .5em}
.rm2--mini .rm2-g__h b{font-weight:800}
.rm2--mini .rm2-br{font-weight:300;font-size:.7em;color:var(--fg-muted,#5A696F)}
.rm2--mini .rm2-box{padding:16px 16px 52px}
.rm2--mini .rm2-box h4{margin:0 0 .35em;font:800 1.02rem/1.2 var(--font-heading,"Source Sans 3",sans-serif);letter-spacing:-.01em}
.rm2--mini .rm2-box p{margin:0;font-size:.88rem;line-height:1.45;color:var(--fg-muted,#5E6D74)}
.rm2--mini .rm2-n{width:30px;height:30px;right:12px;bottom:12px;font-size:.75rem}
.rm2--mini .rm2-here{position:absolute;left:16px;bottom:16px;padding:1px 10px;border-radius:999px;background:#D44040;color:#fff;font:600 .72rem/1.6 var(--font-body,"Source Sans 3",sans-serif)}
.rm2--mini .rm2-steps{gap:18px 24px}
.rm2--mini .rm2-snake{height:80px;margin:6px auto}
.rm2--mini .lc-conn__snake .lc-conn__h{display:none}
.rm2--mini .lc-conn__snake .lc-conn__v{display:inline}
.rm2--mini .lc-conn__snake{flex:none}
.lc-conn__defs{position:absolute;width:0;height:0;overflow:hidden}
.rm-strip .rm-in-wrap{padding:0 clamp(16px,4vw,40px)}

/* K-30 (W2g): every multi-step visual is joined by 3px dotted connectors (DR-23). 1 look for every numbered step list on the site. */
body .op-steps li:not(:last-child)::after{width:0;background:none;border-left:3px dotted #D44040;left:22px}
body ol.journey li:not(:last-child)::after{width:0;background:none;border-left:3px dotted #D44040;left:.85em}
body .op-flow__arrow{font-size:0;line-height:0;padding:0;margin:0 0 0 20px;width:0;height:22px;border-left:3px dotted #FF9B93}
/* the check's "Your path" row: dotted lines between the 3 boxes instead of arrows */
body .flow li.ar{font-size:0;flex:0 0 40px;min-width:0;height:0;padding:0;border:0;border-top:3px dotted #D44040;background:none;align-self:center}
@media (max-width:640px){body .flow li.ar{flex:1 1 100%;max-width:3px;height:22px;border-top:0;border-left:3px dotted #D44040;margin-left:24px}}
/* unit pages: the 13 weeks, a ring above each week joined by a dotted line */
body .rwk li{position:relative;padding-top:26px}
body .rwk li::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}
body .rwk li:not(:last-child)::after{content:"";position:absolute;top:10px;left:calc(50% + 10px);right:calc(-50% + 10px);border-top:3px dotted #D44040}
/* Technology team: 3 steps stacked, joined */
body .steps{gap:26px}
body .steps li{position:relative}
body .steps li:not(:last-child)::after{content:"";position:absolute;left:30px;top:100%;height:26px;border-left:3px dotted #D44040}
/* Systems Leap: the 5 stages on 1 rail */
body #stages .grid{grid-template-columns:minmax(0,1fr);gap:30px;padding-left:44px;position:relative}
body #stages .grid>.card{position:relative}
body #stages .grid>.card::before{content:"";position:absolute;left:-36px;top:26px;width:18px;height:18px;border:4px solid #D44040;border-radius:50%;background:#fff;box-sizing:border-box;z-index:1}
body #stages .grid>.card:not(:last-child)::after{content:"";position:absolute;left:-28px;top:48px;bottom:-30px;border-left:3px dotted #D44040}
@media (max-width:560px){body #stages .grid{padding-left:30px}body #stages .grid>.card::before{left:-26px}body #stages .grid>.card:not(:last-child)::after{left:-18px}}

/* O-15: the roadmap line "From your Current Reality (Now) to your Desired Reality (Vision)": the tags are small, only the 1st letter is a capital */
.lc-rt-tag{font-size:.8em;font-weight:500}
.lcx-www .lcx-nb{font-style:normal;font-weight:400}.lcx-www a b{font-weight:800}
.lcx-www b+.lcx-nb,.lcx-www .lcx-nb+b{margin-left:.3em}
/* W2i P-21: Growth is brown, Scale is red, everywhere */
:root{--lc-growth:#7A4E2D;--lc-scale:#D44040}
.lc-growth{color:var(--lc-growth)}.lc-scale{color:var(--lc-scale)}

/* Q-01 (Wave 2j): notes strip retired. Footer clear control + small print lines. */
.lcx-footer__clear{display:inline-flex;align-items:center;min-height:44px;font:inherit;color:inherit;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.lcx-footer__clear:focus-visible{outline:3px solid #D44040;outline-offset:2px;border-radius:3px}
/* R-12: tooltip, inline confirm row and status for the "Clear My Saved Answers" control (assets/js/autosave.js) */
.lc-clr-host,.lcx-footer__meta li{position:relative}
.lc-clr__tip{position:absolute;left:0;bottom:calc(100% - 4px);z-index:30;width:max-content;max-width:min(300px,86vw);padding:8px 12px;border-radius:8px;background:#fff;color:#1A1A1A;font:500 .82rem/1.4 var(--font-body,"Source Sans 3",system-ui,sans-serif);box-shadow:0 4px 18px rgba(0,0,0,.28);display:none;pointer-events:none}
[data-lc-clear]:focus-visible+.lc-clr__tip{display:block}
@media (hover:hover){[data-lc-clear]:hover+.lc-clr__tip{display:block}}
.lc-clr--open .lc-clr__tip{display:none!important}
.lc-clr__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:2px 0 6px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(128,128,128,.55);font-size:.9rem;line-height:1.4;width:100%;max-width:520px}
.lc-clr__n{display:block;font-size:.82rem;opacity:.9}
.lc-clr__b{display:inline-flex;gap:8px;flex:none}
.lc-clr__b button{min-height:44px;padding:0 16px;border-radius:999px;font:700 .88rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);cursor:pointer;border:2px solid currentColor;background:transparent;color:inherit}
.lc-clr__b .lc-clr__y{background:#D44040;border-color:transparent;color:#fff}
.lc-clr__b button:focus-visible{outline:3px solid #D44040;outline-offset:2px}
.lc-clr__st{font-size:.85rem;margin-left:6px}
.lc-clr__st:empty{display:none}
.lcx-footer__meta li:has(.lc-clr__row){flex-basis:100%}

.lc-fine{font-size:.78rem;line-height:1.55;color:#5E6D74;margin:10px 0 0}
.lc-fine.wrap{max-width:1200px;margin:0 auto;padding:12px clamp(16px,4vw,40px)}
.pt-fx{display:block;flex-basis:100%;margin:6px 0 0}
/* Q-18 (Wave 2j): the rocket slot inside .btn--call took launch.css's generic .slot card (padding, border, paper background) and showed as a white box. Inline icon, no box. */
body .btn--call .slot{padding:0;border:0;background:none;box-shadow:none;margin-left:.35em;line-height:1}

/* W2l (KZ, 2 Nov 2026): the footer adjusts on smaller screens. 3 columns only from 1240px; below that the brand
   and the partners column share row 1 and the "Find your way" menu gets its own full-width row, so its rows still
   fit on 1 line (J-26) and nothing overlaps. Phones stack everything. */
@media (max-width:1239px){
  .lcx-footer__grid{grid-template-columns:1fr 1fr;grid-template-areas:"brand side" "nav nav";gap:32px 40px}
  .lcx-footer__brand{grid-area:brand;grid-column:auto}
  nav.lcx-footer__col{grid-area:nav;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
  .lcx-footer__grid > .lcx-footer__col:not(nav){grid-area:side}
  .lcx-footer__col nav ul,nav.lcx-footer__col ul{columns:1}
}
@media (max-width:640px){
  .lcx-footer__grid{grid-template-columns:1fr;grid-template-areas:"brand" "nav" "side";gap:28px}
  .lcx-www li{flex-wrap:wrap;white-space:normal;gap:4px 10px}
  .lcx-www li>span{flex:0 0 100%}
}

/* "Your saved answers are back" line (autosave.js), 1 style on every page: site font, aligned with the page, Start Over in the site button style (DR-14) */
.lc-draft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;width:fit-content;max-width:100%;margin:0 0 14px;padding:8px 8px 8px 16px;border-radius:16px;background:#fff;border:1px solid #D9DEE0;box-shadow:0 1px 3px rgba(26,26,26,.06);font:500 .92rem/1.4 var(--font-body,"Source Sans 3",system-ui,sans-serif);color:var(--fg,#1A1A1A)}
.lc-draft[hidden]{display:none}
.lc-draft>span{min-width:0}
.lc-draft>span::first-letter{color:#0B8A6B;font-weight:800}
.lc-draft button{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:0;border-radius:999px;background:#D44040;color:#fff;font:700 .85rem/1.2 var(--font-body,"Source Sans 3",system-ui,sans-serif);cursor:pointer;box-shadow:0 4px 12px rgba(200,58,58,.22);transition:transform .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){.lc-draft button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(200,58,58,.3)}}
.lc-draft button:focus-visible{outline:3px solid #D44040;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lc-draft button{transition:none}}

/* ===== 1.8.0 · Set V/W style layer (W-0, W-5 to W-8): Source Sans 3, New Leap Red #D44040 flat, 4 roles, ™ ===== */
:root{--c-action:#D44040;--c-action-hover:#E35252;--c-action-dark:#F07070}
/* 1.8.6 lane L (UI/UX audit 7 Nov 2026, C-3/C-11, DR-21.6): #D44040 is 4.6:1 on white only and fails on every band tint.
   It stays the red for fills, borders, buttons and the inverted block. Red TEXT (role .lc-sol/.lc-ul, links, red labels) uses
   --c-sol-text #B83434 (same hue; 4.5:1+ on white and on every band tint the site uses; 3:1+ is not enough for an 18px h2). Muted grey on tints: #5A696F (was #5E6D74).
   Guard: node scripts/qa_contrast.js */
:root{--c-sol-text:#B83434;--link:var(--c-sol-text);--fg-muted:#5A696F;--c-steel-deep:#5A696F;--c-crumb:#5E6D74;--c-serial:#5A696F}
body{font-family:var(--font-body);font-size:var(--fs-body,1.125rem)}
/* 1.8.6 lane N (DR-16 v2.0.2, type-system.md §2, KZ 7 Nov 2026): body text 18px sitewide (was the 16px browser default). Small print,
   labels, chips, tables and captions keep their own sizes (set in rem or px on their own rules). */
table{font-size:1rem}
/* buttons: flat New Leap Red, white text, small lift on hover, no gradient, no sweep */
.form .btn::after,.lcx-ss__f button::after,.btn-g::after{display:none!important}
body :is(.btn--primary,.lcx-btn,.btn--call,.btn--check,.btn-g,.nl-btn,.form .btn,.pt-btn,.btn.tplbtn,.lc-draft button,.lc-clr__b .lc-clr__y,.lcx-ss__f button){background:#D44040!important;background-image:none!important;border-color:#D44040;color:#fff}
.dark .btn--check,body .dark .btn--check{color:#fff}
@media (hover:hover) and (pointer:fine){
  body :is(.btn--primary,.lcx-btn,.btn--call,.btn--check,.btn-g,.nl-btn,.form .btn,.pt-btn,.btn.tplbtn,.lc-draft button,.lc-clr__b .lc-clr__y,.lcx-ss__f button):hover{background:#E35252!important;border-color:#E35252;color:#fff;transform:translateY(-2px)}
}
body :is(.btn--primary,.lcx-btn,.btn--call,.btn--check,.btn-g,.nl-btn,.form .btn,.pt-btn,.btn.tplbtn,.lc-draft button,.lcx-ss__f button):focus-visible{background:#E35252!important;color:#fff}
.band--dark .btn--primary,.dark .btn--primary{color:#fff}
a{color:var(--link)}
.dark a:not([class]),.band--dark a:not([class]){color:#F07070}

/* emphasis: the 4 roles (W-6). Heavy in headings, 700 in body text. Colour is never the only signal. */
.lc-inv{background:none;font-weight:800}
.lc-inv::before{background:#D44040}
.lc-ul,.lc-sol{text-decoration:none;font-weight:800;color:var(--lc-role-sol,var(--c-sol-text,#B83434))}
.lc-inv .lc-ul,.lc-inv.lc-ul{color:inherit}
.lc-prob{font-weight:800;color:var(--lc-role-prob,var(--c-problem,#2F5D7C))}
.lc-dang{font-weight:800;color:var(--lc-role-dang,var(--c-danger,#A12A2A))}
.lc-k{font-weight:800;color:var(--lc-role-k,var(--c-ink,#1A1A1A))}
:is(p,li,td,dd,small,label,blockquote,figcaption) :is(.lc-sol,.lc-ul,.lc-prob,.lc-dang,.lc-k){font-weight:700}
/* headings: light frame (300) only when they carry an emphasis element, so a plain heading never looks faint */
h1,h2{letter-spacing:-.015em;text-wrap:balance}
h1,h2,h3,h4{text-wrap:balance} /* 1.8.6 B-4: h4 too (card and glossary titles left 1 word on the last line) */
p{text-wrap:pretty}
body :is(h1,h2):has(strong,b,.lc-inv,.lc-ul,.lc-sol,.lc-prob,.lc-dang,.lc-k){font-weight:300}
body :is(h1,h2) :is(strong,b,.lc-inv,.lc-ul,.lc-sol,.lc-prob,.lc-dang,.lc-k){font-weight:800}
/* owned-line accent: Source Serif 4 italic (W-0), only where a class asks for it */
.lc-serif{font-family:var(--font-serif);font-style:italic;font-weight:600}
/* 1.8.6 B-3 (DR-16.1, DR-20.4.3; ruled 6 Nov 2026 "serif italic alone"): the key words inside a founder quote are Source Serif 4
   italic 600, in their role colour (colour unchanged here). Quote containers: rotator, founder-voice and hero quotes, About pain quotes. */
:is(blockquote,.lc-rot__q,.fv__b,.hq,.ab2-quotes li,q) :is(b,strong,.lc-prob,.lc-sol,.lc-dang,.lc-k){font-family:var(--font-serif,"Source Serif 4",Georgia,serif);font-style:italic;font-weight:600}
/* ™ is never bold, sits against the name, smaller and raised (W-5) */
.tm{font-weight:400!important;font-size:.6em;vertical-align:.6em;line-height:0;margin:0;letter-spacing:0;font-style:normal}
/* ™ never wraps onto its own line (1.8.1, KZ 5 Nov 2026). Global, beats any 'X span{display:block}'. apply_type_w3a.py wraps
   the text run around each ™ in .tmr (1 flex item in a flex/grid box) and the name's last word + ™ in .tmw (no break). Check: scripts/qa_tm_wrap.js */
.tm{display:inline!important;white-space:nowrap}
.tmr{display:inline!important}
/* 1.8.5 (KZ 7 Nov 2026): a framework, model or OS name links to its page (scripts/apply_fw_links_w385.py). The text keeps its
   role colour; a thin underline in the same colour says it is a link. */
a.fw-link,a.fw-link:visited{color:inherit!important;font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:currentColor}
a.fw-link:hover,a.fw-link:focus-visible{text-decoration-thickness:2px}
.tmw{display:inline!important;white-space:nowrap}
/* band chips: the 1st word in capitals (W-8) */
.lc-band__w1{text-transform:uppercase;letter-spacing:.02em}

/* X-07 / X-14 (Set X): a section's "see / read all" link sits on the far right, on every page */
p:has(> a.tlink:only-child), p:has(> a.tl:only-child), .hw-act:has(> a.tlink:only-child) { text-align: right; }
/* 1.8.1 (X-01, W-3): line breaks from the breakdown rows (scripts/apply_breakdown_w3b.py).
   .s = a "/" segment: each one after the 1st starts its own line in a heading (the 1st stays inline, so a leading icon keeps its line).
   .u = a "|" unit: phones break between units, never inside one. */
:is(h1,h2,h3,h4,h5,h6) .s + .s{display:block}
.u{white-space:nowrap}
/* role colours on dark grounds: the on-dark values (W-7). 1.8.6 lane L (audit C-1/C-2) and L2 (Codex review): the dark-ground
   list is written once. A dark ground or dark component sets the on-dark role tokens and the on-dark text red --c-sol-text; the
   role classes (.lc-sol/.lc-ul, .lc-prob, .lc-dang, .lc-k) read the tokens, so a role class on the dark element itself, in any
   child, and any custom label that uses var(--c-sol-text) all get the on-dark value. A new dark component adds its class here,
   or carries the marker class .on-dark. A light surface inside a dark one (.on-light, a light hero) puts the light-ground values
   back. Guard: node scripts/qa_contrast.js */
:is(.dark,.band--dark,.hero:not(.hero--light),.lc-sec--hero,.lc-change,.on-dark,.anchor,.rg-hero,.rm--dark,.lcx-footer,.lcx-menu__list,.lcx-sub){--c-sol-text:#F07070;--lc-role-sol:#F07070;--lc-role-prob:var(--c-problem-d,#A9C4D8);--lc-role-dang:#F08080;--lc-role-k:currentcolor}
:is(.on-light,.hero.hero--light){--c-sol-text:#B83434;--lc-role-sol:initial;--lc-role-prob:initial;--lc-role-dang:initial;--lc-role-k:initial}
/* buttons (W-2): frame 500, the name in 800, white on red (never the ink colour of .lc-k) */
:is(.btn,.lcx-btn,.tl,.pt-btn,.btn-g,.nl-btn,.tplbtn,a.cta,button.cta,.btn-call):has(b.lc-k){font-weight:500}
:is(.btn,.lcx-btn,.tl,.pt-btn,.btn-g,.nl-btn,.tplbtn,a.cta,button.cta,.btn-call) b.lc-k{font-weight:800;color:inherit;white-space:nowrap}
/* 1.8.2: a button label with a heavy name is 1 flex item, so the space before the name never collapses */
.lc-lbl{display:inline}
/* 1.8.2: on a small phone a "|" unit can be wider than the screen (an inverted block in a big heading). Below 480px the units may
   wrap, and the inverted block wraps inside its max-width, so a heading never runs off the screen */
@media (max-width:480px){.u{white-space:normal}.lc-inv{white-space:normal}}

/* 1.8.3 Set Z lane E (KZ, 5 Nov 2026): the closing band above the footer is never plain dark.
   .lc-close = a slight New Leap Red (#D44040) gradient over deep maroon, with the LeapCode insignia (Leap Arch),
   same geometry as the "Not sure where to start" reference: bottom right, a third cropped, 0 degrees.
   Applied by scripts/apply_close_w3c.py to the last dark CTA band on every page; a new page only adds class="lc-close".
   1.8.6 (audit C-10): the glow is 10% (was 30%) and the solution red inside the band is #F48080, so on the lightest point of the
   gradient white (11:1), red #F48080 (4.6:1), slate #A9C4D8 (6.5:1) and danger #F08080 (4.6:1) pass.
   Guard: scripts/qa_close_band.js. Tune only here. */
section.lc-close.lc-close{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background-color:#2A0D0F!important;
  background-image:radial-gradient(120% 90% at 0% 0%,rgba(212,64,64,.10) 0%,rgba(212,64,64,0) 45%),
    linear-gradient(160deg,#5A1A1D 0%,#3A1114 48%,#220B0D 100%)!important;
  border-top:3px solid #D44040}
section.lc-close.lc-close::before{content:"";position:absolute;z-index:-1;inset:auto;top:auto;left:auto;right:-8%;bottom:-20%;
  width:clamp(300px,42vw,620px);aspect-ratio:425/510;pointer-events:none;
  background:url("../img/brand/arch-watermark.svg") center/contain no-repeat;opacity:.14}
@media (max-width:700px){section.lc-close.lc-close::before{width:280px;opacity:.12}}
@media print{section.lc-close.lc-close::before{display:none}}
/* the band's own insignia replaces older per-band arches and the night-sky texture */
.lc-close > .lc-arch,.lc-close > .sky{display:none}
.lc-close :is(h2,h3){color:#fff}
.lc-close :is(.lead,p){color:#F6E9E9}
.lc-close :is(.signoff,.lc-signoff){color:#E9CFCF}
.lc-close a:not(.btn):not(.go):not(.cta):not(.lcx-btn){color:#fff}
/* role colours: the on-dark values (W-7) */
.lc-close :is(.lc-sol,.lc-ul){color:#F48080}
.lc-close .lc-prob{color:#A9C4D8}
.lc-close .lc-dang{color:#F08080}
.lc-close .lc-k{color:inherit}
/* buttons: a red button would sink into the red band, so the primary becomes a light pill (white, New Leap Red label);
   the secondary keeps the site's on-dark ghost (.dark .btn--call.ghost: clear, #FF9B93 rim, white label) */
.lc-close.lc-close :is(a.btn,a.go,a.cta,a.lcx-btn):not(.ghost){background:#fff!important;border-color:#fff!important;color:#B83434!important;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.lc-close.lc-close :is(a.btn,a.go,a.cta,a.lcx-btn):not(.ghost) :is(b,.lc-k,.lc-lbl){color:inherit!important}
@media (hover:hover) and (pointer:fine){.lc-close.lc-close :is(a.btn,a.go,a.cta,a.lcx-btn):not(.ghost):hover{background:#FFECEC!important;border-color:#FFECEC!important}}
.lc-close.lc-close :is(a.btn,a.go,a.cta,a.lcx-btn):not(.ghost):focus-visible{background:#FFECEC!important;outline:3px solid #fff;outline-offset:3px}
.lc-close.lc-close a.btn.ghost{background:transparent!important;border-color:#FF9B93!important;color:#fff!important}
/* a highlight box (.hl) would put red text on a red box here: the role colour alone carries it */
.lc-close .hl{background:none!important;box-shadow:none!important;padding:0}
.lc-close .hl::before,.lc-close .hl::after{display:none}

/* 1.8.4 (KZ, 6 Nov 2026: the "What we believe" cards broke into 1 word per line). Role emphasis from the Core Message Breakdown is
   always inline, whatever a page's own "x b{display:block}" rule says; card titles that are plain <b> keep their own layout.
   Guard: node scripts/qa_broken_emphasis.js */
b.lc-k,b.lc-sol,b.lc-prob,b.lc-dang,strong.lc-k,strong.lc-sol,strong.lc-prob,strong.lc-dang,b b,strong b,b strong{display:inline!important;margin:0}
.hd-t{display:inline;min-width:0} /* 1.8.4: heading text after the icon is 1 inline run (apply_headtext_w384.py) */
/* 1.8.5 lane I (KZ 7 Nov 2026): offices line in the footer, icons approved by KZ */
.lcx-offices{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;list-style:none;margin:0 0 10px!important;padding:0}
.lcx-offices__h{font:700 .75rem var(--font-heading,"Source Sans 3",system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-right:2px}
.lcx-offices a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.lcx-offices small{font-size:.7rem;letter-spacing:.08em;color:var(--lcx-red-hi)}
/* 1.8.5 lane J: squad headshots in the round avatars (footer, /about/) */
img.lcx-avatar,img.ph-photo{object-fit:cover;object-position:50% 15%;padding:0;background:#2C3E50}
.lcx-partners img.lcx-avatar{width:48px;height:48px;border-radius:50%}

/* ===== 1.8.6 Set AC lane L (UI/UX audit 7 Nov 2026; KZ: "nothing slips through the cracks"). Guard: node scripts/qa_contrast.js ===== */
/* a role class on the inverted red block keeps the block's white, wherever the block sits (beats every on-dark list above) */
body .lc-inv .lc-ul,body .lc-inv.lc-ul,body .lc-inv .lc-sol,body .lc-inv.lc-sol{color:inherit}
/* C-10: small print on the closing band stays light (#E9CFCF = 7:1+ on the band) */
.lc-close.lc-close :is(.op-note,.note,.muted,small,.small){color:#E9CFCF}
/* C-8 (DR-26: a hero is not a closing band; DR-29.0 v2.0.1: no plain dark block near the footer). On a page so short that the
   hero is 1 of the last 3 blocks before the footer, the hero is light: paper ground, ink text, no red gradient, light-ground
   role colours (the tokens above). Used by /services/model-b/, /pricing-details/, /self-check/thank-you/, /404.html. Guard: qa_close_band.js */
body .hero.hero--light{background:#F7F9F9;background-image:none;color:#1A1A1A;border-bottom:1px solid #E1E6E8}
body .hero.hero--light > .sky,body .hero.hero--light > .lc-arch,body .hero.hero--light::before,body .hero.hero--light::after,body .hero.hero--light > .wrap::before,body .hero.hero--light > .container::before{display:none}
body .hero.hero--light :is(h1,h2,h3,p,.lead,.sub,li){color:#1A1A1A}
body .hero.hero--light :is(.label,.eyebrow,.muted,.kicker){color:#5A696F}
body .hero.hero--light a:not([class]){color:var(--c-sol-text,#B83434)}
body .hero.hero--light a.tl{color:#1A1A1A;text-decoration-color:#D44040}
body .hero.hero--light :is(a.btn,a.cta,.lcx-btn) .lc-k,body .hero.hero--light .lc-inv{color:#fff}
/* white text on the done-green chips: a same-hue deeper fill (#0A7D61, 5.1:1; was #0B8A6B, 4.3:1) */
.lc-band--g{background:#0A7D61}
/* team cards: the initials shown until a photo loads are ink, so they read on every unit's tint (5:1+) */
body .team .pic span:not(.lc-z){color:#1A1A1A;opacity:.8}
/* unit route dots: the step number is large text (19px bold), so white on the deeper steps passes 3:1 */
body .route .dot{font-size:max(19px,calc(var(--d) * .36))}
/* /frameworks/ (C-13): the count badge on the pressed red toggle is a darker plate, so white reads (5:1+) */
body .fw-tgb[aria-pressed="true"] .fw-tgn{background:rgba(0,0,0,.2)}
/* status chips that carry white text on a Registry colour: the plate is a deeper shade of the same hue (white 4.5:1+) */
body .chip--fn{background:color-mix(in srgb,var(--fd) 88%,#000)}
/* 1.8.6 lane L2 (Codex review; qa_contrast.js now samples gradients and textures under the text): tinted bands and callouts, with
   or without a texture of dots, use a deeper shade of the same hue for red text and muted grey (DR-21.6): #A52E2E and #4F5D63
   read 4.5:1+ on the tint and on its dots. A new tinted surface adds its class here. */
:is(.p-problem,.p-proof,.mc,.stand,.fv__b,.rg-tint){--c-sol-text:#A52E2E;--fg-muted:#4F5D63;--c-steel-deep:#4F5D63}
/* the gold dots of the proof band are lighter (30% and 25%, were 60% and 50%), so text that crosses a dot still reads 4.5:1+ */
body .p-proof{background-image:radial-gradient(1.5px 1.5px at 30px 40px,rgba(224,160,40,.3),transparent 62%),radial-gradient(1.1px 1.1px at 120px 100px,rgba(224,160,40,.25),transparent 62%)}
/* 1.8.6 (KZ, 7 Nov 2026): squad card titles in the inverse style, slightly larger */
.ccard__r{display:inline-block;align-self:flex-start;background:#D44040;color:#fff;font-weight:700;font-size:calc(1em + 2px);line-height:1.25;padding:3px 9px;border-radius:4px;margin:4px 0 6px}
/* 1.8.6 (KZ, 7 Nov 2026): the space under the hero buttons equals the space above the headline (no fixed hero height), so phones show no empty block */
.band.hero:has(> .hero-copy){min-height:0;padding-bottom:96px}
/* 1.8.6: the breadcrumb bar has its own light ground, so its links keep the breadcrumb grey (DR-26.5) even inside a dark section (was white on #F7F9F9 on /clients/) */
body .lcx-crumbs a,body :is(.dark,.band--dark,.hero,.lc-close) .lcx-crumbs a{color:#5E6D74 !important}
/* 1.8.6: links inside a light hero use the light-ground text red (#B83434), never the on-dark #F07070 */
body .hero.hero--light :is(p,.lead,li) a{color:var(--c-sol-text,#B83434) !important}