/* =========================================================
   Financial Operations — Revenue
   Built to public/reference/brand-guidelines.md. Loaded after /index.css.

   Completes the Revenue column, and shares its component vocabulary with
   Empanelment & Contracts and Claims & Revenue Recovery — stage rails,
   tags, field rows, tables, the money triptych, the voice block.

   What this page adds: proportional revenue bars, an aging breakdown, an
   OPD/IPD matrix, dimension tabs and a small trend. Numbers carry the
   story here, so they are set in Geist at display sizes with tabular
   figures, and lime marks only the state that changed.

   The brief's green (#16C542) is not in our palette: --lime for completed
   and current, --lime-ink for green text, --rose only for a shortfall.

   NO PHOTOGRAPHY except the AI section — the library has no finance or
   billing photograph, and the two people in it already appear on four
   pages each. The scene frames are sized for the photographs when taken.

   Every class is prefixed fo- ; the reset weighs nothing (guidelines §14).
   ========================================================= */

.fo {
  --pad: calc(67 * var(--u));
  --text: #2a2a2a;
  --faint: #9a9a9a;
  --soft: #f5f8f1;
  --grey: #f7f7f7;
  --lime-tint: #effcb5;
  --lime-ink: #3f5a00;
  --amber: #fff1d2;
  --amber-ink: #8a5600;
  --rose: #ffe8e4;
  --rose-ink: #b23a2c;
  --r-card: calc(18 * var(--u));
  --r: calc(12 * var(--u));
  --r-sm: calc(9 * var(--u));
  --shadow: 0 1px 2px rgba(17, 19, 24, .03), 0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-28 * var(--u)) rgba(17, 19, 24, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  display: block;
  color: var(--ink);
}
.fo *, .fo *::before, .fo *::after { box-sizing: border-box; }
:where(.fo) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, table) { margin: 0; }
:where(.fo) :where(ul, ol) { padding: 0; list-style: none; }
.fo img { display: block; max-width: 100%; }
.fo .i { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type ---------- */
.fo-h1, .fo-h2, .fo-h3 { font-family: var(--font-head); font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.fo-h1 { font-size: calc(64 * var(--u)); line-height: calc(77 * var(--u)); }
.fo-h2 { font-size: calc(48 * var(--u)); line-height: calc(57 * var(--u)); }
.fo-h3 { font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); }
.fo .dim { color: var(--muted); }
.fo-lede { margin-top: calc(16 * var(--u)); max-width: calc(660 * var(--u)); font-size: calc(25 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.fo-sub { margin-top: calc(18 * var(--u)); max-width: calc(520 * var(--u)); font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.fo-k { font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.fo-pill { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(5 * var(--u)) calc(13 * var(--u)); border-radius: 999px; background: var(--soft); color: var(--text); font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.3; }
.fo-pill::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; opacity: .7; }
.fo-pill.problem { background: var(--amber); color: var(--amber-ink); }
.fo-pill.solution { background: var(--lime-tint); color: var(--lime-ink); }
.fo-pill.ink { background: var(--ink); color: var(--lime); }
.fo-pill + .fo-h1, .fo-pill + .fo-h2 { margin-top: calc(22 * var(--u)); }
.fo-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(44 * var(--u)); }
.fo .btn .i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); transition: transform .2s var(--ease); }
.fo .btn:hover .i { transform: translateX(calc(3 * var(--u))); }

/* ---------- sections ---------- */
.fo-sec { position: relative; padding: calc(128 * var(--u)) var(--pad); }
.fo-sec + .fo-sec { border-top: 1px solid var(--rule); }
.fo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(96 * var(--u)); align-items: center; }
.fo-split.rev > :first-child { order: 2; }
.fo-head { max-width: calc(940 * var(--u)); }
.fo-head.mid { margin-inline: auto; text-align: center; }
.fo-head.mid .fo-lede { margin-inline: auto; }
.fo-stage { margin-top: calc(72 * var(--u)); }
.fo-sec.soft { isolation: isolate; }
.fo-sec.soft::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: #fafaf8; z-index: -1; }
.fo-sec.soft::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); pointer-events: none; }
.fo-chap { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-bottom: calc(40 * var(--u)); }
.fo-chap b { font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: .04em; color: var(--faint); font-variant-numeric: tabular-nums; }
.fo-chap i { flex: 1; height: 1px; background: var(--rule); }

/* ---------- hero ---------- */
.fo-hero { padding: calc(120 * var(--u)) var(--pad) calc(96 * var(--u)); }
.fo-hero .fo-h1 { max-width: calc(960 * var(--u)); }
.fo-hero__stage { position: relative; margin-top: calc(72 * var(--u)); }
/* the frame the photograph will occupy; for now it carries the payer record */
/* Until the photograph exists the frame sizes to the record it holds, so
   the panel reads as intentional rather than as a gap waiting to be
   filled. Restore `aspect-ratio: 16 / 7` when the <img> goes in. */
.fo-scene { position: relative; display: grid; place-items: center; padding: calc(64 * var(--u)) calc(40 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--soft); overflow: hidden; }
.fo-scene > img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-card) - 1px); }
.fo-cap { margin-top: calc(16 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }

/* ---------- the payer record ---------- */
.fo-payer { width: 100%; max-width: calc(640 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.fo-payer__top { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-bottom: 1px solid var(--rule); }
.fo-payer__top b { font-family: var(--font-head); font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.fo-payer__top .fo-tag { margin-left: auto; }

/* ---------- shared product UI ---------- */
.fo-ui { border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.fo-ui__top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); background: #fcfcfb; }
.fo-ui__top b { font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fo-ui__top .fo-tag { margin-left: auto; }
.fo-ui__body { padding: calc(20 * var(--u)); }
.fo-ui + .fo-ui { margin-top: calc(16 * var(--u)); }
.fo-tag { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--grey); color: var(--text); font-size: calc(12 * var(--u)); font-weight: 600; white-space: nowrap; }
.fo-tag.ok { background: var(--lime-tint); color: var(--lime-ink); }
.fo-tag.wait { background: var(--amber); color: var(--amber-ink); }
.fo-tag.bad { background: var(--rose); color: var(--rose-ink); }
.fo-tag .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.fo-fields { display: grid; gap: calc(14 * var(--u)); }
.fo-fields > div { display: grid; gap: calc(3 * var(--u)); }
.fo-fields dt { font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.fo-fields dd { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.fo-fields.two { grid-template-columns: 1fr 1fr; column-gap: calc(24 * var(--u)); }
.fo-mono { font-variant-numeric: tabular-nums; }

/* ---------- the continuous stage rail ---------- */
.fo-rail { display: flex; align-items: flex-start; }
.fo-stagepoint { position: relative; flex: 1 1 0; min-width: 0; padding-top: calc(30 * var(--u)); text-align: center; }
.fo-stagepoint::before { content: ""; position: absolute; top: calc(8 * var(--u)); left: 50%; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: calc(-5.5 * var(--u)); border-radius: 50%; background: var(--divider); z-index: 1; }
.fo-stagepoint::after { content: ""; position: absolute; top: calc(13 * var(--u)); left: 50%; right: calc(-50%); height: 1px; background: var(--divider); }
.fo-stagepoint:last-child::after { display: none; }
.fo-stagepoint b { display: block; font-size: calc(14.5 * var(--u)); font-weight: 600; letter-spacing: -.01em; }
.fo-stagepoint span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); }
.fo-stagepoint.done::before, .fo-stagepoint.done::after { background: var(--lime-ico); }
.fo-stagepoint.now::before { background: var(--lime); box-shadow: 0 0 0 calc(5 * var(--u)) rgba(199, 243, 104, .45); }
.fo-stagepoint.now b { color: var(--lime-ink); }
.fo-stagepoint.wait b { font-weight: 500; color: var(--muted); }

/* the small vertical rail inside a column */
.fo-steps { display: grid; justify-items: start; gap: calc(6 * var(--u)); }
.fo-step { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(15 * var(--u)); font-weight: 600; }
.fo-step.done { border-color: var(--lime-ico); background: var(--lime-soft); color: var(--lime-ink); }
.fo-step.now { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(199, 243, 104, .3); }
.fo-step.wait { color: var(--muted); }
.fo-step .i { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.fo-steps i.join { width: 2px; height: calc(14 * var(--u)); margin-left: calc(22 * var(--u)); background: var(--divider); }
.fo-steps i.join.on { background: var(--lime-ico); }

/* ---------- the rate change ---------- */

/* ---------- the renewal countdown ---------- */

/* the expiry notice, integrated rather than a pop-up */
.fo-act { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-radius: var(--r); background: var(--ink); color: var(--lime); font-size: calc(15 * var(--u)); font-weight: 600; }
.fo-act .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: auto; }

/* ---------- one record, several teams ---------- */

/* ---------- workspace ---------- */
.fo-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: #fff; }
.fo-metrics > div { padding: calc(20 * var(--u)); }
.fo-metrics > div + div { border-left: 1px solid var(--rule); }
.fo-metrics b { display: block; font-family: var(--font-head); font-size: calc(34 * var(--u)); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fo-metrics span { display: block; margin-top: calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }
.fo-metrics > div.on { background: var(--lime-soft); }
.fo-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); flex-wrap: wrap; padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); }
.fo-search { display: flex; align-items: center; gap: calc(9 * var(--u)); flex: 1 1 calc(230 * var(--u)); min-width: calc(170 * var(--u)); padding: calc(9 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); color: var(--faint); font-size: calc(14 * var(--u)); }
.fo-table { width: 100%; border-collapse: collapse; }
.fo-table th, .fo-table td { padding: calc(14 * var(--u)) calc(18 * var(--u)); text-align: left; font-size: calc(14.5 * var(--u)); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.fo-table th { font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); background: #fcfcfb; }
.fo-table td b { font-weight: 600; }
.fo-table tr:last-child td { border-bottom: 0; }
.fo-table tr.on td { background: var(--lime-soft); }
.fo-table .num { font-variant-numeric: tabular-nums; color: var(--muted); }

/* activity */
.fo-time li { position: relative; display: grid; grid-template-columns: calc(66 * var(--u)) minmax(0, 1fr); column-gap: calc(18 * var(--u)); padding: calc(12 * var(--u)) 0 calc(12 * var(--u)) calc(18 * var(--u)); }
.fo-time li::before { content: ""; position: absolute; left: 0; top: calc(19 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--divider); }
.fo-time li::after { content: ""; position: absolute; left: calc(4 * var(--u)); top: calc(28 * var(--u)); bottom: calc(-4 * var(--u)); width: 1px; background: var(--rule); }
.fo-time li:last-child::after { display: none; }
.fo-time li.now::before { background: var(--lime-ico); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(199, 243, 104, .35); }
.fo-time time { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.fo-time p { font-size: calc(15.5 * var(--u)); font-weight: 500; }

/* ---------- AI ---------- */
.fo-ai { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: calc(64 * var(--u)); align-items: center; }
.fo-person { position: relative; display: grid; justify-items: center; padding: calc(28 * var(--u)) 0 0; border-radius: var(--r-card); background: var(--soft); }
.fo-person img { width: calc(300 * var(--u)); max-width: 100%; height: auto; }
.fo-said { position: absolute; z-index: 2; left: calc(-40 * var(--u)); top: calc(46 * var(--u)); max-width: calc(300 * var(--u)); padding: calc(14 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)); background: #fff; box-shadow: var(--shadow); font-family: var(--font-head); font-size: calc(19 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.025em; }
.fo-said .fo-k { display: block; margin-bottom: calc(7 * var(--u)); color: var(--faint); }
.fo-mic { position: absolute; z-index: 3; right: calc(30 * var(--u)); bottom: calc(34 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: var(--ink); box-shadow: var(--shadow); }
.fo-mic .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--lime); }
.fo-wave { display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(24 * var(--u)); }
.fo-wave i { width: calc(3 * var(--u)); min-height: calc(4 * var(--u)); border-radius: 999px; background: var(--lime); animation: foWave 1.1s ease-in-out infinite; }
.fo-answer { display: grid; gap: calc(16 * var(--u)); padding: calc(26 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r-card); background: var(--lime-soft); }
.fo-answer__k { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--lime-ink); }
.fo-answer__k i { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--ink); }
.fo-answer__k i .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.fo-answer__t { font-family: var(--font-head); font-size: calc(30 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.fo-breaks { display: grid; gap: calc(7 * var(--u)); }
.fo-breaks li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: var(--r-sm); background: #fff; font-size: calc(15 * var(--u)); font-weight: 500; }
.fo-breaks b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- outcomes: four blocks, generous space, not cards ---------- */
.fo-out { border-top: 1px solid var(--rule); margin-top: calc(64 * var(--u)); }
.fo-out > div { display: grid; grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: calc(40 * var(--u)); padding: calc(36 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.fo-out .n { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; padding-top: calc(7 * var(--u)); }
.fo-out h3 { font-family: var(--font-head); font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.fo-out p { align-self: center; font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); color: var(--muted); }

/* ---------- FAQ ---------- */
.fo-faq { max-width: calc(920 * var(--u)); margin-top: calc(56 * var(--u)); border-top: 1px solid var(--rule); }
.fo-faq details { border-bottom: 1px solid var(--rule); }
.fo-faq summary { display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(24 * var(--u)) 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 500; letter-spacing: -.028em; transition: color .15s ease; }
.fo-faq summary::-webkit-details-marker { display: none; }
.fo-faq summary:hover { color: var(--lime-ink); }
.fo-faq summary::after { content: ""; flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(calc(-2 * var(--u)), calc(-2 * var(--u))); transition: transform .25s var(--ease); }
.fo-faq details[open] summary::after { transform: rotate(-135deg); }
.fo-faq p { padding: 0 calc(48 * var(--u)) calc(26 * var(--u)) 0; max-width: calc(760 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(27 * var(--u)); color: var(--prose, #4d4d4d); }

/* ---------- final CTA + strip ---------- */
.fo-cta { padding: calc(130 * var(--u)) var(--pad); border-top: 1px solid var(--rule); }
.fo-cta__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: calc(96 * var(--u)); align-items: center; }
.fo-cta .fo-payer { max-width: none; }
.fo-life { padding: 0 var(--pad) calc(120 * var(--u)); }
.fo-life nav { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.fo-life a, .fo-life span { display: block; padding: calc(18 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 600; color: var(--muted); }
.fo-life > nav > * + * { border-left: 1px solid var(--rule); }
.fo-life small { display: block; margin-bottom: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fo-life .here { background: var(--lime-soft); color: var(--ink); }
.fo-life .here small { color: var(--lime-ink); }
.fo-life a:hover { color: var(--ink); }

/* ---------- motion ---------- */
.fo-js .fo-rev { opacity: 0; transform: translateY(calc(12 * var(--u))); }
.fo-js .fo-rev.is-in { opacity: 1; transform: none; transition: opacity .75s ease var(--d, 0ms), transform .75s var(--ease) var(--d, 0ms); }
@keyframes foWave { 0%, 100% { height: 22%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .fo *, .fo *::before, .fo *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (guidelines §10).
   ========================================================= */
@media (max-width: 1179px) {
  .fo { --pad: 22px; }
  .fo .i { width: 16px; height: 16px; }
  .fo-h1 { font-size: clamp(32px, 7.2vw, 48px); line-height: 1.08; }
  .fo-h2 { font-size: clamp(26px, 5.4vw, 36px); line-height: 1.16; }
  .fo-h3 { font-size: 20px; line-height: 27px; }
  .fo-lede { font-size: 17px; line-height: 25px; }
  .fo-sub { font-size: 16px; line-height: 24px; max-width: none; }
  .fo-ctas { margin-top: 28px; flex-direction: column; align-items: stretch; }

  .fo-hero { padding: 44px 22px 56px; }
  .fo-hero__stage, .fo-stage { margin-top: 32px; }
  .fo-scene { aspect-ratio: auto; padding: 20px 14px; }

  .fo-sec { padding: 56px 22px; }
  .fo-chap { margin-bottom: 26px; }
  .fo-split { grid-template-columns: 1fr; row-gap: 32px; }
  .fo-split.rev > :first-child { order: 0; }

  /* label and value stay on one line; only the payer name may wrap */
  .fo-payer__top { flex-wrap: wrap; row-gap: 8px; padding: 16px; }
  .fo-payer__top b { font-size: 20px; }

  .fo-rail { flex-direction: column; align-items: stretch; }
  .fo-stagepoint { padding: 0 0 0 30px; text-align: left; min-height: 52px; }
  .fo-stagepoint::before { top: 4px; left: 0; margin-left: 0; }
  .fo-stagepoint::after { top: 15px; bottom: -4px; left: 5px; right: auto; width: 1px; height: auto; }

  .fo-fields.two { grid-template-columns: 1fr; row-gap: 14px; }

  .fo-metrics { grid-template-columns: 1fr 1fr; }
  .fo-metrics > div:nth-child(odd) { border-left: 0; }
  .fo-metrics > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .fo-metrics b { font-size: 28px; }
  .fo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fo-table th, .fo-table td { padding: 12px 14px; }

  .fo-ai { grid-template-columns: 1fr; row-gap: 28px; }
  .fo-said { position: static; max-width: none; margin: 0 0 16px; border-radius: 18px 18px 18px 4px; }
  .fo-person { padding: 20px 16px 0; }
  .fo-person img { width: 230px; }
  .fo-mic { position: static; justify-content: center; width: -moz-fit-content; width: fit-content; margin: 0 auto 18px; }
  .fo-answer__t { font-size: 22px; line-height: 29px; }

  .fo-out > div { grid-template-columns: 1fr; row-gap: 10px; padding: 26px 0; }
  .fo-out .n { padding-top: 0; }
  .fo-out h3 { font-size: 24px; line-height: 31px; }
  .fo-out p { font-size: 16px; line-height: 24px; }

  .fo-faq summary { font-size: 19px; line-height: 26px; padding: 20px 0; gap: 14px; }
  .fo-faq p { font-size: 16px; line-height: 25px; padding: 0 0 22px; }

  .fo-cta { padding: 72px 22px; }
  .fo-cta__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .fo-life { padding: 0 22px 64px; }
  .fo-life nav { grid-template-columns: 1fr 1fr; }
  .fo-life > nav > :nth-child(3) { border-left: 0; }
  .fo-life > nav > :nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

/* ---------- money: the triptych this page is built around ---------- */
.fo-money { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: calc(16 * var(--u)); padding: calc(26 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.fo-money > div { display: grid; gap: calc(6 * var(--u)); min-width: 0; }
.fo-money .fo-k { color: var(--faint); }
.fo-amt { font-family: var(--font-head); font-size: calc(34 * var(--u)); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fo-money .got .fo-amt { color: var(--lime-ink); }
.fo-money .gap .fo-amt { color: var(--rose-ink); }
.fo-money .op { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; color: var(--faint); }
.fo-money.big .fo-amt { font-size: calc(44 * var(--u)); }
.fo-why { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-radius: var(--r); background: var(--rose); color: var(--rose-ink); font-size: calc(15 * var(--u)); font-weight: 600; }
.fo-why .i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.fo-why span { margin-left: auto; font-weight: 500; opacity: .8; font-size: calc(13.5 * var(--u)); }

/* the readiness checklist */

/* the three-state list used by the closing panel */
.fo-marks li { display: flex; align-items: center; gap: calc(13 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(16 * var(--u)); font-weight: 600; }
.fo-marks li:last-child { border-bottom: 0; }
.fo-marks .mark { display: grid; place-items: center; flex: none; width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; background: var(--grey); }
.fo-marks .mark .i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.fo-marks .done .mark { background: var(--lime); color: var(--ink); }
.fo-marks .live .mark { background: var(--lime-tint); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(199, 243, 104, .3); }
.fo-marks .live .mark::after { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--lime-ink); }
.fo-marks .live { color: var(--lime-ink); }
.fo-marks .todo { color: var(--muted); font-weight: 500; }
.fo-marks .todo .mark::after { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid var(--divider); }

/* an operational notice, integrated rather than a pop-up */

@media (max-width: 1179px) {
  .fo-money { grid-template-columns: 1fr; justify-items: start; gap: 12px; padding: 18px; }
  /* the arrow turns to point down the stack; the equals sign must not */
  .fo-money .op:not(.eq) { transform: rotate(90deg); }
  .fo-amt, .fo-money.big .fo-amt { font-size: 30px; }
}

/* ---------- proportional revenue, read as a list not a chart ---------- */
.fo-bars { display: grid; }
.fo-bars li { display: grid; grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr) calc(88 * var(--u)); align-items: center; gap: calc(16 * var(--u)); padding: calc(13 * var(--u)) calc(20 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(15.5 * var(--u)); font-weight: 600; }
.fo-bars li:last-child { border-bottom: 0; }
.fo-bars .track { height: calc(10 * var(--u)); border-radius: 999px; background: var(--grey); overflow: hidden; }
.fo-bars .track i { display: block; height: 100%; border-radius: 999px; background: var(--lime-ico); transform-origin: left; transform: scaleX(var(--v, 1)); }
.fo-bars li.on .track i { background: var(--lime); box-shadow: 0 0 0 1px var(--lime-ico) inset; }
.fo-bars .amt { text-align: right; font-variant-numeric: tabular-nums; }
.fo-total { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); border-top: 1px solid var(--rule); background: #fcfcfb; font-size: calc(13 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.fo-total b { margin-left: auto; font-family: var(--font-head); font-size: calc(28 * var(--u)); font-weight: 500; letter-spacing: -.03em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- tabs: one interface, several dimensions ---------- */
.fo-tabs { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--rule); }
.fo-tab { padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 600; color: var(--muted); white-space: nowrap; }
.fo-tab.on { border-color: var(--lime-ico); background: var(--lime); color: var(--ink); }

/* ---------- payment modes and aging, same shape ---------- */
.fo-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.fo-list li { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(13 * var(--u)) calc(20 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(15.5 * var(--u)); font-weight: 600; }
.fo-list li:last-child { border-bottom: 0; }
.fo-list .amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.fo-list li.on { background: var(--lime-soft); }
.fo-list .age { min-width: calc(110 * var(--u)); color: var(--muted); font-weight: 500; }
.fo-list li.old .amt { color: var(--rose-ink); }

/* ---------- the OPD / IPD matrix ---------- */
.fo-matrix { width: 100%; border-collapse: collapse; }
.fo-matrix th, .fo-matrix td { padding: calc(18 * var(--u)) calc(20 * var(--u)); text-align: right; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.fo-matrix thead th { font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); background: #fcfcfb; }
.fo-matrix th:first-child, .fo-matrix td:first-child { text-align: left; font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.fo-matrix td { font-family: var(--font-head); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.fo-matrix tr:last-child td { border-bottom: 0; }
.fo-matrix td.tot { background: var(--lime-soft); }
.fo-matrix tr.short td:not(:first-child) { color: var(--rose-ink); }

/* ---------- the small trend ---------- */
.fo-trend { display: grid; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)); }
.fo-trend li { display: grid; grid-template-columns: calc(54 * var(--u)) minmax(0, 1fr) calc(72 * var(--u)); align-items: center; gap: calc(14 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
.fo-trend .m { color: var(--faint); letter-spacing: .06em; text-transform: uppercase; font-size: calc(12 * var(--u)); }
.fo-trend .bar { height: calc(14 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--lime-soft); transform-origin: left; transform: scaleX(var(--v, 1)); }
.fo-trend li:last-child .bar { background: var(--lime); }
.fo-trend .amt { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- the three revenue views, sequential ---------- */
.fo-arch { display: grid; }
.fo-arch > article { display: grid; grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; column-gap: calc(40 * var(--u)); padding: calc(38 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.fo-arch > article:first-child { border-top: 1px solid var(--rule); }
.fo-arch .n { font-size: calc(13 * var(--u)); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; padding-top: calc(8 * var(--u)); }
.fo-arch h3 { font-family: var(--font-head); font-size: calc(28 * var(--u)); line-height: calc(35 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.fo-arch h3 a { color: inherit; border-bottom: 1px solid var(--lime-ico); }
.fo-arch h3 a:hover { background: var(--lime-soft); }
.fo-arch ul { display: grid; gap: calc(6 * var(--u)); align-self: center; }
.fo-arch li { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--muted); }
.fo-arch .here { background: var(--lime-soft); }
.fo-arch .here h3 { color: var(--lime-ink); }

/* the quiet context labels around a problem statement */
.fo-chips { display: flex; flex-wrap: wrap; gap: calc(9 * var(--u)); margin-top: calc(28 * var(--u)); }
.fo-chips span { padding: calc(8 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14.5 * var(--u)); font-weight: 500; color: var(--muted); }

@media (max-width: 1179px) {
  .fo-bars li { grid-template-columns: 1fr auto; row-gap: 8px; padding: 12px 16px; }
  .fo-bars .track { grid-column: 1 / -1; }
  .fo-total b { font-size: 22px; }
  .fo-split2 { grid-template-columns: 1fr; }
  .fo-list li { padding: 12px 16px; }
  .fo-list .age { min-width: 84px; }
  .fo-matrix th, .fo-matrix td { padding: 12px 10px; }
  .fo-matrix td { font-size: 18px; }
  .fo-matrix th:first-child, .fo-matrix td:first-child { font-size: 10.5px; }
  .fo-trend li { grid-template-columns: 44px minmax(0, 1fr) 62px; }
  .fo-arch > article { grid-template-columns: 1fr; row-gap: 12px; padding: 24px 0; }
  .fo-arch .n { padding-top: 0; }
  .fo-arch h3 { font-size: 22px; line-height: 29px; }
  .fo-arch li { font-size: 15.5px; line-height: 24px; }
  .fo-chips { gap: 7px; margin-top: 20px; }
  .fo-chips span { font-size: 13px; padding: 6px 12px; }
}