/* Lloyd's turnkey, concept "claude" (3 Nov 2026). Loaded after site.css and redesign.css. Site tokens only.
   One story in pictures: your framework, set up once, feeds every syndicate and rolls up into one view.
   Every visual is HTML and CSS, so text reflows and never drops below 12px. Lemon appears on indigo only. */

/* ---- Shared bits */
.lc-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.lc-note { margin: 0; color: var(--ink-2); }
.rd-close .lc-note { color: var(--on-ink-body); }
.lc-hero .lead { max-width: 30em; }
.lc-halden { margin: 0; }
.lc-k { font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; }

/* ---- Hero map: framework -> syndicates -> one view, on an indigo panel */
.lc-map { margin: 0; }
.lc-panel { background: var(--ink); color: var(--surface); border-radius: 24px; padding: 32px 32px 28px; display: flex; flex-direction: column;
  box-shadow: 0 32px 64px -36px rgba(31, 70, 81, 0.55); }
.lc-fw { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 20px;
  border: 1px solid rgba(249, 255, 241, 0.35); border-radius: 14px; }
.lc-fw .lc-k, .lc-view .lc-k { color: var(--on-ink-2); }
.lc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 14px; }
.lc-legend li { display: inline-flex; align-items: center; gap: 7px; }

/* The three shapes of a framework: risks are dots, controls are squares, processes are bars */
.lc-r, .lc-c, .lc-p { display: inline-block; flex: none; }
.lc-r { width: 9px; height: 9px; border-radius: 50%; background: var(--surface); }
.lc-c { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.lc-p { width: 20px; height: 9px; border-radius: 5px; background: var(--on-ink-2); }

.lc-wire { display: block; width: 100%; height: 30px; overflow: visible; }
.lc-wire path { fill: none; stroke: rgba(249, 255, 241, 0.45); stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

/* column-gap is 3% so the card centres sit at 15.67%, 50% and 84.33%, where the wires land */
.lc-syns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3%; }
.lc-syn { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 14px 12px;
  background: rgba(249, 255, 241, 0.06); border: 1px solid rgba(249, 255, 241, 0.22); border-radius: 14px; }
.lc-syn b { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--surface); overflow-wrap: anywhere; }
.lc-shapes { display: grid; grid-template-columns: repeat(4, 9px); gap: 7px; }
.lc-shapes .lc-p { grid-column: span 2; width: 100%; }
.lc-st { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-data); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); }
.lc-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lc-syn.is-new { border: 1.5px dashed var(--lemon); background: rgba(255, 255, 97, 0.07); }
.lc-syn.is-new .lc-st { background: var(--lemon); color: var(--ink); padding: 3px 8px; border-radius: var(--radius-pill); }
.lc-syn.is-new .lc-st::before { display: none; }

.lc-view { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 58%;
  background: var(--surface); color: var(--ink); border-radius: 14px; padding: 14px 20px; }
.lc-view .lc-k { color: var(--ink-2); }
.lc-view-r { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; }
.lc-view-r b { font-size: 17px; font-weight: 700; }
.lc-ok { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--green-strong); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* The new syndicate's pattern fills in once, on load. Without motion it is simply filled. */
@media (prefers-reduced-motion: no-preference) {
  .lc-syn.is-new .lc-shapes > span { animation: lc-fill 0.45s ease both; }
  .lc-syn.is-new .lc-shapes > span:nth-child(1) { animation-delay: 0.5s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(2) { animation-delay: 0.6s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(3) { animation-delay: 0.7s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(4) { animation-delay: 0.8s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(5) { animation-delay: 0.9s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(6) { animation-delay: 1.0s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(7) { animation-delay: 1.1s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(8) { animation-delay: 1.2s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(9) { animation-delay: 1.3s; }
  .lc-syn.is-new .lc-shapes > span:nth-child(10) { animation-delay: 1.4s; }
  .lc-syn.is-new .lc-st { animation: lc-in 0.4s ease 1.7s both; }
}
@keyframes lc-fill { from { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lemon); } }
@keyframes lc-in { from { opacity: 0; transform: translateY(4px); } }

@media (min-width: 960px) {
  .lc-panel { padding: 40px 40px 36px; }
  .lc-wire { height: 36px; }
  .lc-syn { padding: 18px 18px 16px; gap: 16px; }
  .lc-syn b { font-size: 15px; }
  .lc-shapes { grid-template-columns: repeat(4, 12px); gap: 9px; }
  .lc-shapes .lc-r, .lc-shapes .lc-c { width: 12px; height: 12px; }
  .lc-shapes .lc-p { height: 12px; border-radius: 6px; }
  .lc-view { padding: 16px 24px; }
  .lc-view-r b { font-size: 19px; }
}
@media (max-width: 599px) {
  .lc-panel { padding: 20px 14px 18px; border-radius: 20px; }
  .lc-fw { padding: 10px 14px; }
  .lc-legend { font-size: 13px; gap: 6px 12px; }
  .lc-syn { padding: 12px 8px 10px; gap: 10px; border-radius: 12px; }
  .lc-syn b { font-size: 12px; }
  .lc-shapes { grid-template-columns: repeat(4, 8px); gap: 5px; }
  .lc-r, .lc-c { width: 8px; height: 8px; }
  .lc-st { letter-spacing: 0.06em; }
  .lc-syn.is-new .lc-st { padding: 2px 6px; }
  .lc-view { min-width: 0; align-self: stretch; padding: 12px 14px; }
}

/* ---- What you get: one full-width row per benefit, on the house two-column pattern (redesign.css .rd-two: text 5/12,
   picture 7/12 from 960, .rd-flip puts the picture left). Rows alternate right, left, right. Below 960 each row is
   text then picture. Rows sit one section rhythm apart (.section padding: 72px, 48px on a phone). */
.lc-gets-h { margin: 0 0 48px; }
.lc-gets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 72px; }
.lc-get { min-width: 0; overflow: hidden; overflow: clip; } /* the slide-in offset never widens the page */
.lc-get h3 { margin: 0; }
.lc-get p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 26em; }
@media (min-width: 960px) { .lc-gets .lc-tile { min-height: 360px; } }

/* Slide-in: the script adds .lc-reveal (hidden start) and then .is-in, once per picture. Desktop pictures come from
   their own side; stacked rows rise a little. No motion preference, no script: no hidden start, so always shown. */
@media (prefers-reduced-motion: no-preference) {
  .lc-vis.lc-reveal { opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .lc-vis.lc-reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .lc-get .lc-vis.lc-reveal { transform: translateX(64px); }
  .lc-get.rd-flip .lc-vis.lc-reveal { transform: translateX(-64px); }
  .lc-get .lc-vis.lc-reveal.is-in { transform: none; }
}
.lc-tile { background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-card); min-height: 290px;
  display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.lc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 14px 30px -16px rgba(31, 70, 81, 0.32); }
.lc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lc-card-h b { font-size: 15px; font-weight: 700; }
.lc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--tint); color: var(--ink); font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

/* 1. Readiness */
.lc-f1 { width: 100%; max-width: 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lc-f1 .lc-card { width: 100%; }
.lc-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.lc-checks li { display: flex; align-items: center; gap: 10px; }
.lc-checks li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background-color: var(--accent-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23F9FFF1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat; }

/* 2. Update feed */
.lc-f2 { width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lc-feed { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.lc-upd { display: flex; align-items: center; gap: 12px; padding: 11px 14px; width: calc(100% - 28px); }
.lc-upd:nth-child(2) { margin-left: 14px; }
.lc-upd:nth-child(3) { margin-left: 28px; }
.lc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ink)); }
.lc-upd-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.lc-upd-t b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.lc-upd-t span { font-size: 13px; color: var(--ink-2); line-height: 1.35; }
.lc-when { flex: none; font-family: var(--font-data); font-weight: 700; font-size: 12px; color: var(--ink-2); }

/* 3. Numbers in */
.lc-f3 { width: 100%; max-width: 270px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lc-files { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.lc-files .lc-from { font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.lc-file { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px 4px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border-strong); font-family: var(--font-data); font-weight: 700; font-size: 13px; color: var(--ink); }
.lc-file svg { width: 12px; height: 14px; }
.lc-down { width: 14px; height: 22px; color: var(--ink-3); }
.lc-f3 .lc-card { width: 100%; }
.lc-fig { font-family: var(--font-data); font-weight: 700; font-size: 14px; color: var(--ink-2); font-variant-numeric: var(--tabular); }
.lc-bars { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lc-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.lc-bars .lc-v { font-family: var(--font-data); font-weight: 700; font-size: 13px; font-variant-numeric: var(--tabular); }
.lc-bars i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); position: relative; overflow: hidden; }
.lc-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); min-width: 6px; border-radius: 4px; background: var(--accent-deep); }

/* ---- Grow, and the proof beneath it */
.lc-grow { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lc-grow .h2 { max-width: 16em; margin: 0; }
.lc-grow .body-lg { max-width: 32em; margin: 0; }
.lc-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border-strong); text-align: left; width: 100%; }
@media (min-width: 800px) { .lc-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.lc-proof-i { display: flex; align-items: center; gap: 20px; margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.lc-n { flex: none; font-family: var(--font-data); font-weight: 700; font-size: 56px; line-height: 1; color: var(--ink); }
.lc-proof-i .label { flex: none; min-width: 4.6em; }
@media (max-width: 599px) {
  .lc-proof { margin-top: 40px; }
  .lc-proof-i { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; }
  .lc-n { font-size: 44px; }
  .lc-tile { min-height: 0; padding: 24px 16px; }
  .lc-gets { gap: 48px; }
  .lc-gets-h { margin-bottom: 32px; }
}

/* ---- Additions, 3 Nov 2026: the "Why now" card, sign-posts and the status-row picture. This file is kept identical in
   _variants/lloyds-turnkey-claude, _variants/lloyds-cro and _variants/appointed-reps, so each page publishes alone. */

/* Why now: text left (headline, our reading), one card right with three cited points on a short timeline */
.lc-why-sec { border-top: 1px solid var(--border); }
.lc-why-sec .rd-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lc-why-sec .h2 { margin: 0; max-width: 13em; }
.lc-why-sec .rd-text p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 26em; }
.lc-why { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 28px 26px;
  box-shadow: 0 14px 30px -18px rgba(31, 70, 81, 0.3); }
.lc-why ol { list-style: none; margin: 20px 0 0; padding: 0; }
.lc-why li { position: relative; padding: 0 0 24px 30px; }
.lc-why li:last-child { padding-bottom: 0; }
.lc-why li::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 3px var(--accent-deep); }
.lc-why li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 2px; width: 1.5px; background: var(--muted); }
.lc-why li:last-child::after { display: none; }
.lc-why-k { display: block; margin-bottom: 4px; font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-deep); line-height: 1.4; }
.lc-why-t { display: block; font-size: 16px; line-height: 1.5; color: var(--ink); }
.lc-why-s { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 599px) {
  .lc-why { padding: 22px 18px 20px; }
  .lc-why li { padding-left: 26px; }
  .lc-why-t { font-size: 15px; }
}

/* Status rows: one card, one line per syndicate or AR, a badge on the right */
.lc-f4 { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lc-f4 .lc-card { width: 100%; }
.lc-rows { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.lc-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.lc-rows li:first-child { border-top: 0; padding-top: 2px; }
.lc-amb { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--amber-deep); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Sign-posts: two plain link cards before the closing band */
.lc-next-sec .label { margin: 0 0 20px; }
.lc-next { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 800px) { .lc-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.lc-next a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--tap); padding: 22px 24px;
  background: var(--ground); border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--ink); text-decoration: none;
  font-size: 17px; font-weight: 600; line-height: 1.4; transition: border-color 0.2s ease; }
.lc-next a:hover { border-color: var(--border-strong); }
.lc-next a span[aria-hidden] { flex: none; color: var(--accent-deep); font-size: 20px; transition: transform 0.2s ease; }
.lc-next a:hover span[aria-hidden] { transform: translateX(3px); }
@media (max-width: 599px) { .lc-next a { padding: 18px 18px; font-size: 16px; } }

/* ---- Fix round, 3 Nov 2026 (voice and Opus reviews) */
.lc-hero .label { text-wrap: balance; }                       /* no lone last word in the eyebrow */
.lc-hero .cta-solo { margin-top: 4px; }                       /* hero: button only; the full line sits at the close */
.lc-why-sec .rd-text p.lc-why-src { font-size: 13px; line-height: 1.45; margin-top: -6px; }
.lc-why-s a, .lc-why-src a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.lc-why-s a:hover, .lc-why-src a:hover { color: var(--ink); }
.lc-cap, .lc-get .lc-cap { margin: 6px 0 0; max-width: none; font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* Benefit headlines at the small-H2 step, so the benefit outranks the picture; pictures a little larger in a tighter tile */
.lc-get .h3 { font-size: var(--fs-h2-sm-m); font-weight: var(--w-h2); letter-spacing: var(--track-h2); line-height: var(--lh-h2-sm); }
.lc-get .rd-text { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 960px) {
  .lc-get .h3 { font-size: var(--fs-h2-sm); }
  .lc-gets .lc-tile { min-height: 340px; padding: 20px; }
  .lc-gets .lc-f1, .lc-gets .lc-f2, .lc-gets .lc-f3, .lc-gets .lc-f4 { zoom: 1.3; }
}

/* CRO hero: two syndicates, each with the coverholders that write for it beneath, inside the same card */
.lc-syns.lc-syns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4%; }
.lc-chs { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding-top: 12px;
  border-top: 1px dashed rgba(249, 255, 241, 0.35); }
.lc-chs .lc-k { color: var(--on-ink-2); }
.lc-chs-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.lc-chs-dots { display: inline-flex; gap: 5px; }
.lc-chs-dots i { width: 14px; height: 9px; border-radius: 3px; border: 1.5px solid var(--on-ink-2); }
.lc-chs-st { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--lemon); color: var(--ink);
  font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* ---- Founder layout round, 3 Nov 2026: no grey panels, roomier rhythm, closing CTA as a card inside the page width */

/* 1. Benefit pictures float on the page with their own soft shadow: no grey panel behind them */
.lc-gets .lc-tile { background: none; border: 0; padding: 8px 0; }

/* 2. Rhythm: the home page's 72px (48px on a phone) is the floor; these pages go roomier */
.rd-page > section > .section, .rd-page > section.section { padding-top: 104px; padding-bottom: 104px; }
.lc-gets { gap: 128px; }
.lc-gets-h { margin-bottom: 72px; }
.lc-feed { gap: 14px; }
.lc-f1, .lc-f2, .lc-f3, .lc-f4 { gap: 14px; }
.lc-f3 { gap: 10px; }
.lc-rows li { padding: 13px 0; }
.lc-why li { padding-bottom: 30px; }
.lc-proof { margin-top: 72px; padding-top: 40px; }
@media (max-width: 599px) {
  .rd-page > section > .section, .rd-page > section.section { padding-top: 64px; padding-bottom: 64px; }
  .lc-gets { gap: 72px; }
  .lc-gets-h { margin-bottom: 40px; }
  .lc-proof { margin-top: 48px; }
}

/* 3. The closing call to action card now lives in assets/redesign.css for the whole site (founder, 3 Nov 2026). */

/* ---- RiskOps contrast (CRO page, 3 Nov 2026): "a risk system" beside "a RiskOps system", a few words a side.
   Only the CRO page uses these rules; the file stays identical in all three folders. */
.lc-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.lc-vs-c { border-radius: var(--radius-card); padding: 26px 24px; }
.lc-vs-c .lc-k { display: block; margin-bottom: 14px; }
.lc-vs-c ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lc-vs-c li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid; font-size: 16px; line-height: 1.4; }
.lc-vs-c li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); }
.lc-vs-old { background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); }
.lc-vs-old .lc-k { color: var(--ink-2); }
.lc-vs-old li { border-top-color: var(--border); }
.lc-vs-old li::before { background: var(--muted); }
.lc-vs-new { background: var(--ink); color: var(--surface); box-shadow: 0 24px 48px -30px rgba(31, 70, 81, 0.6); }
.lc-vs-new .lc-k { color: var(--lemon); }
.lc-vs-new li { border-top-color: rgba(249, 255, 241, 0.2); }
.lc-vs-new li::before { background: var(--lemon); }
@media (max-width: 599px) {
  .lc-vs { gap: 10px; }
  .lc-vs-c { padding: 18px 14px; }
  .lc-vs-c li { font-size: 14px; padding: 10px 0; gap: 8px; }
}

/* ---- Founder round, 3 Nov 2026 (turnkey): Syndicate 3 part onboarded */
.lc-prog { align-self: stretch; display: block; height: 6px; border-radius: 3px; background: rgba(249, 255, 241, 0.18); overflow: hidden; }
.lc-prog i { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--lemon); }
.lc-prog-t { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--lemon); }
.lc-syn.is-new .lc-shapes > span.lc-off { animation: none; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(249, 255, 241, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .lc-syn.is-new .lc-prog i { animation: lc-prog 1.2s ease 0.5s both; }
  .lc-syn.is-new .lc-prog-t { animation: lc-in 0.4s ease 1.7s both; }
}
@keyframes lc-prog { from { width: 0; } }

/* ---- Round 2, 3 Nov 2026: the CRO hero with Halden's syndicates, and the RiskOps cards stacked on a phone. (The footer
   strip fix moved to assets/redesign.css with the CTA card.) */
.lc-syn-h .lc-plan { margin-top: -8px; font-size: 13px; line-height: 1.3; color: var(--on-ink-2); font-family: var(--font-data); font-weight: 700; }
.lc-syn-h .lc-ok, .lc-syn-h .lc-amb { align-self: flex-start; }
@media (max-width: 479px) {
  .lc-vs { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Benefit round, 4 Nov 2026 (_build_plan/website/2026-11-04-benefit-lens-round.md). Every benefit row reads today,
   the better outcome, then a measure. The CRO page adds the delta cards under Why now and the screenshot deck. */

/* Benefit rows: the pain as a small "Today" line above the headline, the measure beneath the line */
.lc-get .lc-pain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; max-width: 30em;
  font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.lc-pain span { flex: none; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.lc-get .lc-m { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding-left: 14px; border-left: 3px solid var(--accent-deep); max-width: 24em; }
.lc-m b { font-family: var(--font-data); font-weight: 700; font-size: 28px; line-height: 1.15; color: var(--ink); font-variant-numeric: var(--tabular); }
.lc-m span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 599px) { .lc-m b { font-size: 24px; } }

/* An insight line under a status card (CRO board pack picture) */
.lc-insight { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lc-insight .lc-k { color: var(--ink-2); }
.lc-insight b { font-size: 15px; font-weight: 700; line-height: 1.35; }

/* Why now delta (CRO): today on the left, the desired state on the right, an arrow between; stacked on a phone */
.lc-delta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 64px; }
.lc-delta-arr { align-self: center; display: inline-flex; color: var(--accent-deep); }
.lc-delta-arr svg { width: 28px; height: 28px; }
@media (max-width: 599px) {
  .lc-delta { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 40px; }
  .lc-delta-arr { justify-self: center; transform: rotate(90deg); }
}

/* A plain text link under a section line */
.lc-more { align-self: flex-start; font-weight: 600; }

/* Screenshot deck (CRO, "A different approach"): six 4:3 screenshots stacked like cards. data-pos 0 is the front card;
   1 and 2 fan out behind it; the rest wait, unseen, at the back. The page script moves the front card to the back
   (.is-out flies it left, then it rejoins at the back). With reduced motion nothing animates. */
.lc-deck { position: relative; }
.lc-deck-cards { list-style: none; position: relative; aspect-ratio: 4 / 3; margin: 26px 34px 0 0; padding: 0; }
.lc-deck-card { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 48px -28px rgba(31, 70, 81, 0.45); transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease; }
.lc-deck-card img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lc-deck-card[data-pos="0"] { z-index: 6; }
.lc-deck-card[data-pos="1"] { z-index: 5; transform: translate(14px, -12px) rotate(2.5deg) scale(0.97); }
.lc-deck-card[data-pos="2"] { z-index: 4; transform: translate(26px, -22px) rotate(5deg) scale(0.94); }
.lc-deck-card[data-pos="3"], .lc-deck-card[data-pos="4"], .lc-deck-card[data-pos="5"], .lc-deck-card[data-pos="6"], .lc-deck-card[data-pos="7"] {
  z-index: 3; transform: translate(26px, -22px) rotate(5deg) scale(0.94); opacity: 0; }
.lc-deck-card.is-out { z-index: 7; transform: translate(-58%, 12px) rotate(-9deg); opacity: 0;
  transition: transform 0.38s ease-in, opacity 0.38s ease-in; }
.lc-deck-tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface);
  font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.lc-deck.is-live .lc-deck-cards { cursor: pointer; touch-action: pan-y; }
.lc-deck-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 34px 0 0; }
.lc-deck-ctl[hidden] { display: none; }
.lc-deck-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color 0.2s ease; }
.lc-deck-btn:hover { border-color: var(--ink); }
.lc-deck-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.lc-deck-btn[hidden] { display: none; }
.lc-deck-btn svg { width: 18px; height: 18px; }
.lc-deck-btn .i-play, .lc-deck.is-paused .lc-deck-btn .i-pause { display: none; }
.lc-deck.is-paused .lc-deck-btn .i-play { display: block; }
@media (max-width: 599px) {
  .lc-deck-cards, .lc-deck-ctl { margin-right: 22px; }
  .lc-deck-cards { margin-top: 20px; }
  .lc-deck-card { border-radius: 12px; }
  .lc-deck-card[data-pos="1"] { transform: translate(10px, -9px) rotate(2.5deg) scale(0.97); }
  .lc-deck-card[data-pos="2"], .lc-deck-card[data-pos="3"], .lc-deck-card[data-pos="4"], .lc-deck-card[data-pos="5"], .lc-deck-card[data-pos="6"], .lc-deck-card[data-pos="7"] {
    transform: translate(18px, -16px) rotate(5deg) scale(0.94); }
  .lc-deck-tag { left: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-deck-card, .lc-deck-card.is-out { transition: none; }
}

/* ---- Opus fixes, 4 Nov 2026 (_build_plan/website/2026-11-04-lens-round-opus-review.md) */

/* Today against With CoVi Analytics: the role pages' chip pair (copied from _variants/for-board/variant.css, benefit lens
   round), so every page shows the delta the same way. Under each benefit line. */
.fr-delta { margin: 6px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; max-width: 30em; }
.fr-delta > div { min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.fr-delta dt { margin: 0 0 4px; font-family: var(--font-data); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.fr-delta dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.fr-delta > div:first-child dd { text-decoration: line-through; text-decoration-color: rgba(31, 70, 81, 0.35); }
.fr-delta > .is-new { background: var(--ink); border-color: var(--ink); }
.fr-delta > .is-new dt { color: var(--lemon); }
.fr-delta > .is-new dd { color: var(--surface); font-weight: 600; }
@media (max-width: 599px) { .fr-delta dd { font-size: 14px; } .fr-delta > div { padding: 10px 12px; } }

/* The same pair at full width straight after the hero: three lines a side, one per benefit row below */
.rd-page > section.lc-sum-sec > .section { padding-top: 24px; padding-bottom: 88px; }
.lc-sum-sec .h2 { margin: 12px 0 0; max-width: 18em; }
.fr-delta.lc-sum { max-width: none; margin-top: 28px; gap: 16px; }
.lc-sum > div { padding: 22px 24px; border-radius: var(--radius-card); }
.lc-sum dt { margin-bottom: 6px; }
.lc-sum dd { padding: 11px 0; border-top: 1px solid var(--border); font-size: 17px; }
.lc-sum > .is-new dd { border-top-color: rgba(249, 255, 241, 0.2); }
.lc-sum > .is-new { box-shadow: 0 24px 48px -30px rgba(31, 70, 81, 0.6); }
@media (max-width: 599px) {
  .rd-page > section.lc-sum-sec > .section { padding-top: 8px; padding-bottom: 56px; }
  .fr-delta.lc-sum { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
  .lc-sum > div { padding: 16px 16px; }
  .lc-sum dd { font-size: 15px; padding: 9px 0; }
}

/* The measure sits under the chip pair */
.lc-get .fr-delta + .lc-m { margin-top: 10px; }

/* Proof without the grow band (CRO) */
.lc-proof-only .lc-proof { margin-top: 0; }

/* Deck on a phone: only the three cards that read at that width */
@media (max-width: 599px) { .lc-deck-card[data-phone="off"] { display: none; } }

/* ---- Formula round, 4 Nov 2026 (_build_plan/website/2026-11-04-formula-round.md). The page formula's visual rules,
   written to be copied as they are by the role pages and Home: put .fx-page on <main> and use the blocks below.
   .fx-page          one ground colour top to bottom, the top sections' spacing all the way down, nothing clipped
   .fx-outcome       the closing outcome band: one headline, one line, centred
   .fx-proof-sec     the proof band: .fx-proof card holding .fx-proof-i items (.fx-proof-photo or .fx-proof-fig, then a p)
   .fx-bad           a red failure tag; .fx-c-fail a failing control square in the framework shapes */

/* One ground: milk bands keep their hairlines but take the page ground */
.fx-page .band-milk { background: transparent; }

/* What you get: rows sit a full section apart, as the sections above them do (104px each side, 64px on a phone) */
.fx-page .lc-gets { gap: 208px; }
.fx-page .lc-gets-h { margin-bottom: 104px; }
.fx-page .lc-get .rd-text { gap: 16px; }
@media (max-width: 599px) {
  .fx-page .lc-gets { gap: 128px; }
  .fx-page .lc-gets-h { margin-bottom: 64px; }
}

/* Nothing clipped: the rows only clip sideways (the slide-in offset), so card shadows show in full */
.fx-page .lc-get { overflow: visible; overflow-x: clip; }

/* Closing outcome band */
.fx-outcome .section { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.fx-outcome .h2 { margin: 0; max-width: 17em; text-wrap: balance; }
.fx-outcome .body-lg { margin: 0; max-width: 34em; color: var(--ink-2); }

/* Proof band: one prominent card, two items side by side from 800px, a rule between them */
.fx-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 44px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 24px 48px -36px rgba(31, 70, 81, 0.45); }
@media (min-width: 800px) {
  .fx-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .fx-proof-i + .fx-proof-i { padding-left: 44px; margin-left: 44px; border-left: 1px solid var(--border); }
}
.fx-proof-i { display: flex; align-items: center; gap: 24px; min-width: 0; }
.fx-proof-photo { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border-strong); }
.fx-proof-fig { flex: none; min-width: 112px; font-family: var(--font-data); font-weight: 700; font-size: 64px; line-height: 1; color: var(--ink);
  font-variant-numeric: var(--tabular); text-align: center; }
.fx-proof-i p { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.fx-proof-i b { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }
@media (max-width: 599px) {
  .fx-proof { padding: 26px 20px; gap: 28px; }
  .fx-proof-i { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fx-proof-photo { width: 88px; height: 88px; }
  .fx-proof-fig { min-width: 0; font-size: 52px; text-align: left; }
  .fx-proof-i p { font-size: 16px; }
}

/* Failure marks on the hero panel (ink ground) */
.lc-c.fx-c-fail { background: var(--fail); box-shadow: 0 0 0 1.5px rgba(249, 255, 241, 0.55); }
.fx-bad { display: inline-flex; align-self: flex-start; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--fail); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 599px) { .fx-bad, .lc-syn-h .lc-amb { white-space: normal; } }
/* One ground also behind the closing call to action card (redesign.css gives it the milk ground after a milk band) */
.fx-page .band-milk + .rd-close.band-ink { background: transparent; }
/* The proof band follows the outcome band as one close: no second full section gap between them */
.rd-page > section.fx-outcome + section.fx-proof-sec > .section { padding-top: 0; }
@media (max-width: 799px) { .fx-proof-i + .fx-proof-i { padding-top: 28px; border-top: 1px solid var(--border); } }
@media (max-width: 599px) { .lc-syn-h .lc-amb, .fx-bad { border-radius: 10px; line-height: 1.3; padding-top: 4px; padding-bottom: 4px; } }

/* Proof item with the label above the figure (CRO and turnkey: the customer is named before the 50+) */
.fx-proof-stack p { gap: 4px; }
.fx-proof-stack .fx-proof-fig { min-width: 0; text-align: left; margin: 4px 0 2px; }
/* A single picture in The difference (principal firms) floats like the benefit pictures: no panel behind it */
.lc-ops-sec .lc-tile { background: none; border: 0; padding: 8px 0; }

/* Founder photo zoomed on the face (founder, 4 Nov 2026): .fx-proof-photo is the circle (a span) and the img scales
   inside it. A bare <img class="fx-proof-photo"> still works, unzoomed. */
span.fx-proof-photo { display: block; overflow: hidden; }
.fx-proof-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform: scale(1.9); transform-origin: 51% 8%; }  /* top of the head just inside the ring, face centred */