/* Solutions page layout variants (Academic labs). Builds on ../styles.css. */

/* Shared: timeline figure (Fig. 1, the record outlives the rotation) */
.tl { display: grid; grid-template-columns: 150px repeat(12, minmax(0, 1fr)); row-gap: 12px; column-gap: 0; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tl__m { text-align: center; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.tl__who { color: var(--ink); font-size: 11.5px; }
.tl__bar { height: 8px; background: var(--ink); border-radius: 1px; position: relative; }
.tl__bar--muted { background: var(--bar-muted); }
.tl__end { position: absolute; right: -2px; top: 12px; white-space: nowrap; font-size: 10.5px; color: var(--muted); transform: translateX(100%); padding-left: 6px; }
.tl__lab { height: 16px; background: var(--purple); border-radius: 1px; position: relative; margin-top: 10px; }
.tl__dots { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: center; }
.tl__dots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .8; display: block; }
.tl__labtext { grid-column: 2 / 14; font-size: 11.5px; color: var(--ink); padding-top: 2px; }

/* Shared: file import figure */
.files { display: flex; flex-direction: column; gap: 8px; }
.files__row { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; }
.files__row .chip { justify-content: flex-start; }
.files__arrow { height: 1px; background: var(--ink); position: relative; }
.files__arrow::after { content: ''; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--ink); }
.member { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); }
.member li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: 14px; align-items: baseline; }
.member li:last-child { border-bottom: 0; }
.member .gone { color: var(--muted); text-decoration: line-through; }

/* ---------- Variant A: journal, two columns (matches the homepage) ---------- */
.a-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.a-pains p { font-family: var(--display); font-size: 24px; line-height: 1.25; color: var(--ink); }
.a-rows { display: flex; flex-direction: column; }
.a-row { display: grid; grid-template-columns: 480px minmax(0, 1fr); column-gap: 72px; padding: 36px 0; border-top: 1px solid var(--rule); align-items: start; }
.a-row:first-child { border-top: 1px solid var(--ink); }
.a-row .h3 { margin: 10px 0 12px; }
.a-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }

/* ---------- Variant B: centered editorial + problem/answer ledger (Legora) ---------- */
.b-hero { padding: 112px 0 56px; text-align: center; }
.b-hero .h1 { font-size: 84px; max-width: 1040px; margin: 22px auto 0; }
.b-hero .lede { max-width: 640px; margin: 28px auto 0; }
.b-hero .hero__ctas { justify-content: center; }
.b-fig { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 40px 0 24px; }
.b-ledger { border-top: 1px solid var(--ink); }
.b-ledger__head, .b-ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 360px; column-gap: 40px; }
.b-ledger__head { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.b-ledger__row { padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.b-ledger__row .was { font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--muted); }
.b-ledger__row .now { font-family: var(--display); font-size: 22px; line-height: 1.3; color: var(--ink); }
.b-ledger__row .now + p { margin-top: 8px; }
.b-roles li { display: grid; grid-template-columns: 320px minmax(0, 1fr) 160px; column-gap: 40px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.b-roles li:first-child { border-top: 1px solid var(--ink); }
.b-roles strong { font-family: var(--display); font-size: 26px; font-weight: 400; }

/* ---------- Variant C: dark hero + a year in a lab (Invertix) ---------- */
.c-hero { background: var(--band); color: var(--cream); padding: 104px 0 72px; }
.c-hero .label { color: rgba(246, 242, 233, .7); }
.c-hero .h1 { color: var(--cream); font-size: 80px; max-width: 980px; margin-top: 20px; }
.c-hero .lede { color: rgba(246, 242, 233, .82); max-width: 620px; margin-top: 28px; }
.c-hero .btn { border-color: rgba(246, 242, 233, .6); color: var(--cream); }
.c-hero .btn:hover { background: var(--cream); color: var(--ink); }
.c-hero .btn--primary { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.c-hero .tl { color: rgba(246, 242, 233, .6); margin-top: 72px; }
.c-hero .tl__m { border-bottom-color: rgba(246, 242, 233, .2); }
.c-hero .tl__who, .c-hero .tl__labtext { color: var(--cream); }
.c-hero .tl__bar { background: var(--cream); }
.c-hero .tl__bar--muted { background: rgba(246, 242, 233, .35); }
.c-hero .tl__end { color: rgba(246, 242, 233, .6); }
.c-hero .tl__lab { background: #8F97F0; }
.c-hero .figcap { border-top-color: rgba(246, 242, 233, .2); color: rgba(246, 242, 233, .6); max-width: none; }
.c-chapters { display: flex; flex-direction: column; }
.c-chapter { display: grid; grid-template-columns: 160px minmax(0, 440px) minmax(0, 1fr); column-gap: 56px; padding: 56px 0; border-top: 1px solid var(--rule); align-items: start; }
.c-chapter:first-child { border-top: 1px solid var(--ink); }
.c-chapter__when { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; padding-top: 10px; }
.c-chapter .h2 { font-size: 38px; }
.c-chapter p { margin-top: 16px; }
.c-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.c-roles > div { padding: 28px 28px 28px 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.c-roles > div:nth-child(2n) { padding-left: 28px; border-left: 1px solid var(--rule); }

/* Comparison page */
.cmp { padding: 32px 0 64px; }
.cmp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cmp__item { display: flex; flex-direction: column; gap: 12px; }
.cmp__frame { height: 1400px; border: 1px solid var(--ink); overflow: hidden; background: #fff; position: relative; }
.cmp__frame iframe { width: 1440px; height: 5200px; border: 0; transform: scale(.3); transform-origin: 0 0; position: absolute; top: 0; left: 0; }

@media (max-width: 1180px) {
  .a-row, .b-ledger__head, .b-ledger__row, .b-roles li, .c-chapter { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .b-ledger__head { display: none; }
  .a-pains, .a-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .tl { grid-template-columns: 110px repeat(12, minmax(0, 1fr)); }
  .tl__end { display: none; }
}
@media (max-width: 900px) {
  .a-pains, .a-roles, .c-roles { grid-template-columns: minmax(0, 1fr); }
  .c-roles > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .b-hero .h1, .c-hero .h1 { font-size: 46px; }
  .cmp__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Segment pages (academic.html, biotech.html, cro.html): layout C + segment figures ===== */
.seg-hero-fig { margin-top: 64px; }
.seg-hero-fig .figcap { border-top-color: rgba(246, 242, 233, .2); color: rgba(246, 242, 233, .6); max-width: none; }

/* CRO hero: one workspace per sponsor */
.sponsors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(246, 242, 233, .4); }
.sponsor { padding: 20px 28px 4px 0; display: flex; flex-direction: column; gap: 10px; }
.sponsor + .sponsor { padding-left: 28px; border-left: 1px solid rgba(246, 242, 233, .4); }
.sponsor__name { font-family: var(--display); font-size: 28px; color: var(--cream); }
.sponsor li { padding: 7px 0; border-bottom: 1px dashed rgba(246, 242, 233, .18); font-family: var(--mono); font-size: 12px; color: rgba(246, 242, 233, .82); }
.sponsor__ai { display: flex; justify-content: space-between; padding-top: 6px; font-family: var(--mono); font-size: 11.5px; color: rgba(246, 242, 233, .65); }
.sponsor__ai b { font-weight: 500; color: var(--cream); }
.sponsor__ai b.off { color: #F2A77B; }

/* Biotech hero: design history of the lead construct */
.trail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgba(246, 242, 233, .4); }
.trail__step { position: relative; padding: 22px 24px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.trail__step::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--cream); }
.trail__step:last-child::before { background: #8F97F0; }
.trail__v { font-family: var(--mono); font-size: 11.5px; color: #A9AFF5; }
.trail__what { font-size: 15.5px; line-height: 1.4; color: var(--cream); }
.trail__who { font-family: var(--mono); font-size: 11px; color: rgba(246, 242, 233, .6); }

/* Agent question-and-answer figure */
.ask { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Export formats list */
.formats { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 4px 16px; }
.formats li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--rule); font-size: 15px; align-items: baseline; }
.formats li:last-child { border-bottom: 0; }
.formats li span:last-child { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }

/* Share link card */
.share { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.share__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 6px 0 12px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); font-family: var(--mono); font-size: 12.5px; }
.share__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share__foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }

/* Sanger read vs design */
.seqaln { border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); padding: 14px 16px; font-family: var(--code); font-size: 12px; }
.seqaln__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); white-space: pre; line-height: 1.7; overflow: hidden; }
.seqaln__row span:first-child { color: var(--muted); }
.seqaln__bars { color: var(--muted); }
.seqaln__sum { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--rule); display: flex; justify-content: space-between; color: var(--ink-2); }
.seqaln__sum b { font-weight: 500; color: #2E6B31; }

/* Sponsor review packet */
/* Capped with the page now fluid: past about 1400px the status column drifts
   a long way from the text it belongs to. */
.packet { max-width: 1400px; }
.packet li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) 150px; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.packet li:first-child { border-top: 1px solid var(--ink); }
.packet strong { font-family: var(--display); font-size: 22px; font-weight: 400; }
.packet .status { justify-self: start; }

@media (max-width: 1180px) {
  .sponsors, .trail { grid-template-columns: minmax(0, 1fr); }
  .sponsor + .sponsor { padding-left: 0; border-left: 0; border-top: 1px solid rgba(246, 242, 233, .25); }
  .trail__step { padding-left: 20px; border-left: 1px solid rgba(246, 242, 233, .4); }
  .trail__step::before { left: -5px; top: 26px; }
  .trail { border-top: 0; }
  .packet li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ===== Cohere-style segment template (cro-cohere.html) ===== */
.co-hero { padding: 88px 0 80px; }
.co-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 72px; align-items: center; }
.co-hero .h1 { font-size: 64px; margin-top: 18px; }
.co-hero .lede { margin-top: 24px; max-width: 540px; }

.co-band { background: var(--band); color: var(--cream); padding: 96px 0; }
.co-band .h2 { color: var(--cream); }
.co-band .lede-s { color: rgba(246, 242, 233, .75); margin-top: 16px; max-width: 560px; }
.co-band__grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
/* Band frame: the dark form of the product page's glass tile (`.pf-stage` in styles.css), so all three
   Solutions pages share one tile. Continuity pass, founder 10-08. */
.co-frame { --p-shadow: #00000066; position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 44px; min-height: 660px; display: flex; align-items: center; justify-content: center; border: 1px solid #3B3F7A; border-radius: 20px; background: linear-gradient(125deg, #ffffff22 0%, transparent 30%), linear-gradient(150deg, #2A2E6E 25%, #1A1D4A 100%); }
.co-frame::before { content: ''; position: absolute; inset: -50% 40% -80% 32%; width: 75px; background: #ffffff14; transform: rotate(32deg); z-index: -1; }
/* The window inside the frame: the app in light chrome, as the academic scenes already draw it. */
.co-card { display: none; width: 100%; max-width: 566px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); font-size: 13.5px; box-shadow: 0 18px 35px var(--p-shadow); }
.co-card.is-active { display: block; }
.co-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-weight: 500; }
.co-card__head span:last-child { font-family: var(--mono); font-size: 11px; color: var(--muted); font-weight: 400; }
.co-card__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.co-msg { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.co-msg__av { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--purple); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.co-msg__av--agent { background: var(--purple); color: #fff; }
.co-msg__label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.co-msg ul { margin: 6px 0 0; padding-left: 16px; list-style: disc; color: var(--ink-2); }
.co-msg li { margin: 3px 0; }
.co-msg b { font-weight: 500; color: var(--ink); }
.co-tool { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 4px; font-family: var(--code); font-size: 11.5px; color: var(--ink-2); }
.co-tool .ok { color: var(--teal); }
.co-srcs { display: flex; gap: 6px; flex-wrap: wrap; }
.co-srcs span { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--rule); background: var(--card); color: var(--ink-2); }
.co-card__input { margin: 0 16px 16px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; color: var(--muted); font-size: 13px; }
.co-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--rule); font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.co-row b { font-weight: 500; color: var(--ink); text-align: right; }
.co-row .off { color: #9A4E12; }
.co-gel { background: #14152B; border-radius: 4px; padding: 10px; }
.co-gel .gel text { fill: rgba(255, 255, 255, .55); }

.co-uc { border-top: 1px solid rgba(246, 242, 233, .25); }
.co-uc__item { border-bottom: 1px solid rgba(246, 242, 233, .25); }
.co-uc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; background: none; border: 0; color: var(--cream); font: inherit; font-family: var(--display); font-size: 26px; text-align: left; cursor: pointer; }
.co-uc__btn::after { content: '+'; font-family: var(--mono); font-size: 16px; color: rgba(246, 242, 233, .6); }
.co-uc__item.is-active .co-uc__btn::after { content: '\2212'; }
.co-uc__item.is-active { border-top: 2px solid #A9AFF5; margin-top: -1px; }
.co-uc__body { display: none; padding: 0 0 24px; }
.co-uc__item.is-active .co-uc__body { display: block; }
.co-uc__body p { color: rgba(246, 242, 233, .82); }
.co-uc__body ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.co-uc__body li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 16px; color: var(--cream); }
.co-uc__body li::before { content: '\2713'; font-family: var(--mono); color: #A9AFF5; }
.co-band .btn { margin-top: 28px; border-color: rgba(246, 242, 233, .6); color: var(--cream); }
.co-band .btn:hover { background: var(--cream); color: var(--ink); }

@media (max-width: 1180px) {
  .co-hero__grid, .co-band__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .co-frame { padding: 20px; min-height: 0; }
}

/* Cohere-style tiles: custom art inside the purple tile */

/* Hero figures: one tile on all three Solutions pages, the product page's `.pf-stage`, square, with the
   figure in an app window (`.pf-win`). Continuity pass, founder 10-08. */
.co-hero .pf-fig { margin: 0; width: 100%; max-width: 560px; justify-self: end; }
.co-hero .pf-stage { aspect-ratio: 1 / 1; padding: 40px; display: flex; align-items: center; justify-content: center; }
.pf-win { width: 100%; min-width: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 18px 35px var(--p-shadow); color: var(--ink); overflow: hidden; }
.pf-fig figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 1180px) { .co-hero .pf-fig { justify-self: start; } }
@media (max-width: 540px) { .co-hero .pf-stage { aspect-ratio: auto; padding: 18px 12px; } }

/* CRO hero: the orders board from the CRO prototype (CroOrdersPage: the same rows in state columns, left
   to right the way an order moves), drawn with made-up data. Phase 2 work; the caption says so. */
.cro-orders { font-size: 12px; line-height: 1.35; }
.cro-orders__bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--rule); font-size: 11.5px; color: var(--muted); }
.cro-orders__bar b { font-weight: 500; color: var(--ink); padding-bottom: 9px; margin-bottom: -10px; border-bottom: 2px solid var(--ink); }
.cro-orders__view { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.cro-orders__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.cro-orders__col { padding: 6px; border-radius: 6px; background: var(--card); min-height: 230px; }
.cro-orders__colhead { display: flex; justify-content: space-between; padding: 2px 2px 4px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cro-order { margin-top: 6px; padding: 7px 8px; border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); font-size: 11px; }
.cro-order b { display: block; font-weight: 500; font-family: var(--code); font-size: 11px; }
.cro-order span { display: block; color: var(--ink-2); }
.cro-order small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.cro-order small.wait { color: #9A4E12; }
.cro-orders__foot { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px 12px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--muted); }
@media (max-width: 540px) { .cro-orders__board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cro-orders__col { min-height: 0; } .cro-orders__bar span:not(.cro-orders__view) { display: none; } }


/* Solutions figures, round 2 (founder 10-09, option F on the "Solutions figure backgrounds" canvas).
   Same glass tiles, but each page has its own colour and each figure its own glint, so the three
   pages stop looking identical. The colours are neighbours of the brand indigo at the same
   lightness (indigo, violet, steel blue), so the dark band tiles sit on the navy section without
   clashing. The body class (sol--academic, sol--biotech, sol--cro) carries the page's palette and
   the glint geometry; the hero and band rules below only read the variables. */
.sol--academic { --sol-l1: #e9eafa; --sol-l2: #c8cce9; --sol-lb: #d9dcf2; --sol-d1: #2A2E6E; --sol-d2: #1A1D4A; --sol-db: #3b3f7a;
  --hg-a: 32deg;  --hg1-l: 80%;  --hg1-w: 98px; --hg1-o: .7;  --hg2-l: 0%;  --hg2-w: 0px;  --hg2-o: 0;
  --bg-a: -28deg; --bg1-l: 14%;  --bg1-w: 112px; --bg1-o: .10; --bg1-img: none; --bg2-l: 0%; --bg2-w: 0px; --bg2-o: 0; }
.sol--biotech  { --sol-l1: #efe9fa; --sol-l2: #d5c8ec; --sol-lb: #e1d8f2; --sol-d1: #352A6E; --sol-d2: #211A4A; --sol-db: #4a3d82;
  --hg-a: -32deg; --hg1-l: -2%;  --hg1-w: 64px; --hg1-o: .75; --hg2-l: 12%; --hg2-w: 14px; --hg2-o: .6;
  --bg-a: 32deg;  --bg1-l: 52%;  --bg1-w: 96px; --bg1-o: .11;
  --bg1-img: linear-gradient(90deg, #fff 0 22px, transparent 22px 37px, #fff 37px 59px, transparent 59px 74px, #fff 74px 96px);
  --bg2-l: 0%; --bg2-w: 0px; --bg2-o: 0; }
.sol--cro      { --sol-l1: #e6eefa; --sol-l2: #c3d3ec; --sol-lb: #d3dff2; --sol-d1: #22386E; --sol-d2: #15244A; --sol-db: #34508a;
  --hg-a: 62deg;  --hg1-l: -20%; --hg1-w: 112px; --hg1-o: .55; --hg2-l: 72%; --hg2-w: 34px; --hg2-o: .5;
  --bg-a: 14deg;  --bg1-l: 70%;  --bg1-w: 64px; --bg1-o: .10; --bg1-img: none; --bg2-l: 84%; --bg2-w: 13px; --bg2-o: .12; }

.sol .co-hero .pf-stage {
  background: linear-gradient(125deg, #ffffffce 0%, transparent 30%), linear-gradient(150deg, var(--sol-l1) 25%, var(--sol-l2) 100%);
  border-color: var(--sol-lb);
}
.sol .co-hero .pf-stage::before, .sol .co-hero .pf-stage::after,
.sol .co-frame::before, .sol .co-frame::after {
  content: ''; position: absolute; z-index: -1; top: -60%; bottom: auto; right: auto; height: 220%;
  background: #fff; transform-origin: center; pointer-events: none;
}
.sol .co-hero .pf-stage::before { left: var(--hg1-l); width: var(--hg1-w); opacity: var(--hg1-o); transform: rotate(var(--hg-a)); }
.sol .co-hero .pf-stage::after  { left: var(--hg2-l); width: var(--hg2-w); opacity: var(--hg2-o); transform: rotate(var(--hg-a)); }
.sol .co-frame {
  background: linear-gradient(150deg, var(--sol-d1) 25%, var(--sol-d2) 100%);
  border-color: var(--sol-db);
}
.sol .co-frame::before { left: var(--bg1-l); width: var(--bg1-w); opacity: var(--bg1-o); transform: rotate(var(--bg-a)); }
.sol--biotech .co-frame::before { background: var(--bg1-img); }
.sol .co-frame::after  { left: var(--bg2-l); width: var(--bg2-w); opacity: var(--bg2-o); transform: rotate(var(--bg-a)); }

/* Audit fix (10-10): the Solutions headline shrinks on a phone like the other heroes do, so the CRO
   headline is not five lines tall and the figure starts on the first screen. */
@media (max-width: 700px) { .co-hero .h1 { font-size: 46px; } }

/* Academic: two cited surveys that frame the problem (moved from the homepage, founder 10-10). */
.proof-stats { padding: 48px 0; }
.proof-stats__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.proof-stats__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; min-height: 160px; padding: 28px 24px; border-bottom: 1px solid var(--rule); }
.proof-stats__label { display: flex; flex-direction: column; gap: 8px; }
.proof-stats__label strong { font-family: var(--display); font-size: 23px; font-weight: 500; color: var(--ink-2); }
.proof-stats__label span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.proof-stats__metric { margin: 0; text-align: center; color: var(--ink); }
.proof-stats__metric strong { display: block; font-family: var(--display); font-size: 80px; font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.proof-stats__qualifier { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.proof-stats__detail { max-width: 35ch; justify-self: end; width: 100%; }
.proof-stats__detail p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.proof-stats__detail a { display: inline-block; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); text-decoration: none; }
.proof-stats__detail a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.proof-stats__detail a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 900px) {
  .proof-stats { padding: 32px 0; }
  .proof-stats__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; min-height: 0; padding: 28px 20px; }
  .proof-stats__metric { text-align: right; }
  .proof-stats__metric strong { font-size: 64px; }
  .proof-stats__detail { grid-column: 1 / -1; max-width: none; }
  .proof-stats__label strong { font-size: 21px; }
}
@media (max-width: 440px) {
  .proof-stats__row { padding: 24px 16px; gap: 18px 12px; }
  .proof-stats__metric strong { font-size: 56px; }
  .proof-stats__detail p { font-size: 17px; }
}