/* 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); }
}

/* ---- Who it's for pages (4 Nov 2026): eight role pages in _variants/for-<role>/ on this template. Everything above
   is the Lloyd's CRO page's variant.css, unchanged; the rules below are added for the role pages only. This file is kept
   identical in all eight for-<role> folders, so each page publishes alone. */

/* Hero: the role's Halden view on an indigo panel, one question, two or three big figures, then a light sheet of rows */
.fr-map { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fr-panel { background: var(--ink); color: var(--surface); border-radius: 24px; padding: 28px 28px 26px; display: flex; flex-direction: column;
  gap: 18px; box-shadow: 0 32px 64px -36px rgba(31, 70, 81, 0.55); }
.fr-panel > .lc-k { color: var(--on-ink-2); }
.fr-ask { margin: -6px 0 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--surface); }
.fr-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fr-stats-1 { grid-template-columns: minmax(0, 1fr); }
.fr-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-stat { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 13px; border-radius: 14px;
  background: rgba(249, 255, 241, 0.06); border: 1px solid rgba(249, 255, 241, 0.22); }
.fr-stat b { font-family: var(--font-data); font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: var(--tabular); color: var(--surface); }
.fr-stat span { font-size: 13px; line-height: 1.35; color: var(--on-ink-2); }
.fr-stat::before { content: ""; display: block; width: 22px; height: 4px; border-radius: 2px; background: rgba(249, 255, 241, 0.35); }
.fr-stat.is-ok::before { background: #5BC27A; }
.fr-stat.is-amb::before { background: var(--amber); }
.fr-stat.is-bad::before { background: #F07A62; }
.fr-sheet { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 12px 16px 6px; }
.fr-sheet .lc-k { display: block; color: var(--ink-2); padding: 2px 0 2px; }
.fr-sheet .lc-rows { margin-top: 2px; }
.fr-sheet .lc-rows li:first-child { padding-top: 10px; }
.fr-cap { margin: 0; text-align: center; color: var(--ink-2); }

/* Red badge, beside the house green (.lc-ok) and amber (.lc-amb) */
.fr-bad { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--fail-text); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lc-rows .lc-upd-t span { overflow-wrap: anywhere; }

/* Operations hero: process lines as a small tube map, a red ring where a control has failed */
.fr-tube { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 12px; }
.fr-tube li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; color: var(--on-ink-2); }
.fr-track { position: relative; display: flex; justify-content: space-between; align-items: center; height: 16px; }
.fr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(249, 255, 241, 0.3); }
.fr-tube li:nth-child(1) .fr-track::before { background: var(--line-dist); }
.fr-tube li:nth-child(2) .fr-track::before { background: #6F9BA8; }
.fr-tube li:nth-child(3) .fr-track::before { background: var(--line-clm); }
.fr-tube li:nth-child(4) .fr-track::before { background: var(--line-ri); }
.fr-track i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--ink); }
.fr-track i.is-bad { width: 16px; height: 16px; background: var(--ink); box-shadow: inset 0 0 0 3px #F07A62, 0 0 0 2px var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .fr-track i.is-bad::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #F07A62; animation: fr-pulse 2.2s ease-out infinite; }
}
@keyframes fr-pulse { from { opacity: 0.9; transform: scale(0.7); } to { opacity: 0; transform: scale(1.6); } }

/* Chain pictures (root cause, policy to evidence): cards joined by arrows, on the numbers-in column */
.fr-chain { max-width: 290px; }
.fr-link { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fr-link .lc-k { color: var(--accent-deep); }
.fr-link b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.fr-chain .fr-link:last-child { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.fr-chain .fr-link:last-child .lc-k { color: var(--lemon); }

/* Proof: one line, centred */
.fr-proof-sec { display: flex; justify-content: center; }
.rd-page > section > .section.fr-proof-sec { padding-top: 72px; padding-bottom: 72px; }
.lc-proof.fr-proof { margin-top: 0; padding-top: 0; border-top: 0; max-width: 46em; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 960px) {
  .fr-panel { padding: 36px 36px 32px; gap: 22px; }
  .fr-ask { font-size: 28px; }
  .fr-stat b { font-size: 40px; }
}
@media (max-width: 599px) {
  .fr-panel { padding: 22px 16px 18px; border-radius: 20px; gap: 14px; }
  .fr-ask { font-size: 20px; }
  .fr-stats { gap: 8px; }
  .fr-stat { padding: 12px 10px 11px; }
  .fr-stat b { font-size: 26px; }
  .fr-stat span { font-size: 12px; }
  .fr-sheet { padding: 10px 12px 4px; }
  .fr-tube li { grid-template-columns: 7em minmax(0, 1fr); font-size: 12px; gap: 8px; }
  .rd-page > section > .section.fr-proof-sec { padding-top: 48px; padding-bottom: 48px; }
}

/* ---- Benefit lens round (4 Nov 2026): under each benefit line, today against the state with CoVi Analytics */
.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; } }

/* ---- 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; } }

/* ---- Who it's for formula, 4 Nov 2026: Rulio block at the foot of the compliance page */
.fr-rulio-sec .rd-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fr-rulio-sec .rd-text .h2, .fr-rulio-sec .rd-text p { margin: 0; }
.fr-rulio-sec .rd-text p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 28em; }
.fr-rulio-img { display: flex; justify-content: center; }
.fr-rulio-img img { width: 100%; max-width: 340px; height: auto; border-radius: var(--radius-card); box-shadow: 0 24px 48px -32px rgba(31, 70, 81, 0.5); }
/* Test fixes (4 Nov 2026): the Rulio picture never widens a 320px screen, and the Beta tag stays at 12px or larger */
.fr-rulio-img { min-width: 0; }
.fr-rulio-img img { max-width: 100%; height: auto; }
.fr-rulio-sec .nav-tag { font-size: 12px; }