/* ══════════════════════════════════════════════════════════════════════════
   DRAPTO DESIGN SYSTEM

   Loaded AFTER drapto.v2.css so it wins without deleting anything. The old
   stylesheet had three :root blocks and eight accent colours — blue, orange,
   coral, teal, violet, rose, amber, emerald — accumulated one page at a time.
   Eight accents is no accent, which is why the site reads as inconsistent
   rather than as anything in particular.

   ── THE DECISION ──

   One ink, one accent, one warm signal colour. Everything else is a grey.
   Apollo and Practo look like consumer marketplaces because they are; this
   sells to a hospital finance head and a consultant, and it should look like
   a publication rather than a storefront.
   ══════════════════════════════════════════════════════════════════════════ */:root {
  /* ── INK ── one family, six steps */
  --ink:        #101a24;
  --ink-2:      #33424f;
  --ink-3:      #5b6b78;
  --ink-4:      #8a97a2;

  /* ── SURFACE ── */
  --bg:         #ffffff;
  --bg-2:       #f7f8f7;
  --bg-3:       #eef1f0;
  --line:       #e2e6e5;
  --line-2:     #f0f2f1;

  /* ── ONE ACCENT ── deep green. Reads as clinical and as money, which is
     the whole proposition, and it is not the blue every health SaaS uses. */
  --accent:     #0f5f52;
  --accent-2:   #0b4a40;
  --accent-3:   #e8f1ef;

  /* ── ONE SIGNAL ── for loss, risk and anything overdue. Nothing else. */
  --warn:       #b04a2f;
  --warn-2:     #fbf2ef;

  /* ── TYPE ── */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* A ratio, not fifteen arbitrary sizes. */
  --t-xs: 12.5px; --t-sm: 14px;  --t-md: 16px;
  --t-lg: 20px;   --t-xl: 27px;  --t-2xl: 38px; --t-3xl: 52px;

  /* ── SPACE ── multiples of 4, so nothing is 13px by accident */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16,26,36,.04), 0 8px 24px rgba(16,26,36,.06);

  /* Aliases so the old stylesheet's names keep working. */
  --ink-soft: var(--ink-3);
  --ink-faint: var(--ink-4);
  --surface: var(--bg);
  --line-soft: var(--line-2);
  --accent-tint: var(--accent-3);
  --teal: var(--accent);
  --blue-900: var(--ink);
  --blue-600: var(--accent);
  --structure: var(--ink);
}/* ── TYPE ── serif for statements, sans for everything you have to read ── */body { font-family: var(--font-body); color: var(--ink); background: var(--bg);
  font-size: var(--t-md); line-height: 1.65; -webkit-font-smoothing: antialiased; }h1, h2, h3, .big { font-family: var(--font-display); font-weight: 600;
  letter-spacing: -.012em; color: var(--ink); }h1 { font-size: clamp(30px, 4.4vw, var(--t-3xl)); line-height: 1.08; margin: 0 0 var(--s-4); }h2 { font-size: clamp(24px, 3vw, var(--t-2xl)); line-height: 1.14; margin: 0 0 var(--s-3); }h3 { font-size: var(--t-lg); line-height: 1.3; margin: 0 0 var(--s-2); }/* A lead is one size up and one shade lighter. Never bold — bold on a long
   paragraph is a paragraph nobody reads. */.sec-head > p, .lead, .hx-sub {
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.62;
  color: var(--ink-2); max-width: 62ch; font-weight: 400;
}.eyebrow {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s-2);
}/* ── RHYTHM ── every section breathes the same ── */section { padding: var(--s-8) 0; }section.alt, section:nth-of-type(even) { background: var(--bg-2); }.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-5); }.sec-head { max-width: 720px; margin-bottom: var(--s-6); }/* ── BUTTONS ── two, and they do not compete ── */.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--s-5); border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s;
}.btn-primary { background: var(--accent); color: #fff; }.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }/* ── CARDS ── one shape, everywhere ── */.card, .cat, .pcard, .door, .dvs-col, .dnum, .dflow-step, .specrow, .pdoor {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}.card:hover, .cat:hover, .specrow:hover, .pdoor:hover {
  border-color: var(--accent); box-shadow: var(--shadow);
}.cat:hover { transform: translateY(-3px); }/* Any grid of cards, same gutters, same minimum. */.cards, .cat-g, .pcat-grid, .doors-grid, .speclist, .dnums, .dvs {
  gap: var(--s-4);
}/* ── LINKS ── */a { color: var(--accent); }a:hover { color: var(--accent-2); }/* ── THE ONE SIGNAL COLOUR ── */.dnum.is-loss b, .dvs-col.is-bad li::before { color: var(--warn); }.dvs-col.is-bad { background: var(--warn-2); border-color: #eddcd5; }.dnum.is-gain b, .dvs-col.is-good li::before { color: var(--accent); }.dvs-col.is-good { background: var(--accent-3); border-color: var(--accent); }/* ── PHONE ── the majority of this audience ── */@media (max-width: 720px) {section { padding: var(--s-7) 0; }.wrap { padding: 0 var(--s-4); }.sec-head { margin-bottom: var(--s-5); }.btn { width: 100%; }.cta-row { flex-direction: column; align-items: stretch; }}/* ══════════════════════════════════════════════════════════════════════════
   THREE MORE WAYS TO SHOW RATHER THAN TELL

   A flow, a comparison and a figure were not enough shapes — pages that
   needed a timeline or a table got a paragraph instead.
   ══════════════════════════════════════════════════════════════════════════ *//* ── A TIMELINE: when things happen, and what the deadline is ── */.dtime { margin: var(--s-5) 0; padding-left: var(--s-5); border-left: 2px solid var(--line); }.dtime-row { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-4); }.dtime-row::before {
  content: ""; position: absolute; left: calc(var(--s-5) * -1 - 5px); top: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}.dtime-row.is-late::before { background: var(--warn); border-color: var(--warn); }.dtime-row b { display: block; font-size: 15px; }.dtime-row time {
  display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2px;
}.dtime-row.is-late time { color: var(--warn); }.dtime-row span { display: block; margin-top: 3px; font-size: var(--t-sm);
  line-height: 1.55; color: var(--ink-3); }/* ── A TABLE: when the answer genuinely is a table ── */.dtable { width: 100%; border-collapse: collapse; margin: var(--s-5) 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.dtable th, .dtable td { padding: var(--s-3) var(--s-4); text-align: left;
  border-bottom: 1px solid var(--line-2); font-size: var(--t-sm); line-height: 1.5; }.dtable thead th { background: var(--bg-2); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }.dtable tbody tr:last-child td { border-bottom: 0; }.dtable td.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }.dtable td.is-loss { color: var(--warn); font-weight: 600; }/* ── A CHECKLIST: what is included, seen at a glance ── */.dcheck { display: grid; gap: var(--s-2); margin: var(--s-5) 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }.dcheck div {
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6); position: relative;
  border-radius: var(--radius-sm); background: var(--bg-2);
  font-size: var(--t-sm); line-height: 1.5;
}.dcheck div::before {
  content: "✓"; position: absolute; left: var(--s-3); top: var(--s-3);
  color: var(--accent); font-weight: 700;
}@media (max-width: 720px) {/* v139: .dtable stays display:table; .tbl-scroll scrolls it */}/* ══════════════════════════════════════════════════════════════════════════
   MODULE COLOUR

   One accent kept the site coherent but made every module look identical.
   These are functional, not decorative: a hue per part of the platform, so
   somebody who has seen the labs screen recognises the labs page. Eight
   random accents was the problem; eight *assigned* ones is a system.

   Used only on the module strip and the section eyebrow. Buttons, links and
   cards stay the one green, or the coherence goes again.
   ══════════════════════════════════════════════════════════════════════════ */:root {
  --m-intake:  #0f5f52;   /* booking and front desk — the free half */
  --m-chart:   #2563a8;   /* clinical, labs, pharmacy */
  --m-money:   #8a5a1f;   /* billing, collections, revenue integrity */
  --m-corp:    #6b4d94;   /* corporate health */
  --m-nadi:    #1b7a6b;   /* the assistant */
  --m-comm:    #a8474a;   /* communities and doctor pages */
}.mtag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  background: color-mix(in srgb, var(--m, var(--accent)) 10%, white);
  color: var(--m, var(--accent));
  border: 1px solid color-mix(in srgb, var(--m, var(--accent)) 22%, white);
}.mstrip { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-5); }/* A card that belongs to a module carries a hairline of its colour. */.card.m-intake { border-top: 3px solid var(--m-intake); }.card.m-chart  { border-top: 3px solid var(--m-chart); }.card.m-money  { border-top: 3px solid var(--m-money); }.card.m-corp   { border-top: 3px solid var(--m-corp); }.card.m-nadi   { border-top: 3px solid var(--m-nadi); }.card.m-comm   { border-top: 3px solid var(--m-comm); }/* ── COMPARISON MATRIX ── */.dmatrix { width: 100%; border-collapse: collapse; margin: var(--s-5) 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.dmatrix th, .dmatrix td { padding: var(--s-3) var(--s-4); text-align: left;
  border-bottom: 1px solid var(--line-2); font-size: var(--t-sm); line-height: 1.5; }.dmatrix thead th { background: var(--bg-2); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }.dmatrix td.y { color: var(--accent); font-weight: 600; }.dmatrix td.n { color: var(--ink-4); }.dmatrix td.p { color: var(--m-money); }.dmatrix tbody tr:last-child td { border-bottom: 0; }.dmatrix .us { background: var(--accent-3); }/* ══════════════════════════════════════════════════════════════════════════
   NAVI — the site assistant

   Sits bottom-right, out of the way until asked. On a phone it takes the
   whole screen, because a 320px chat panel on a 390px viewport is a panel
   nobody types into.
   ══════════════════════════════════════════════════════════════════════════ */.nv-fab {
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(15,95,82,.30);
  transition: transform .16s, background .16s;
}.nv-fab:hover { background: var(--accent-2); transform: translateY(-2px); }.nv.is-open .nv-fab { transform: scale(.9); opacity: .55; }.nv-panel {
  position: absolute; right: 0; bottom: 66px;
  width: 380px; max-height: 74vh;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}.nv-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}.nv-top b { font-family: var(--font-display); font-size: 15.5px; }.nv-x { border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--ink-4); cursor: pointer; padding: 0 4px; }.nv-x:hover { color: var(--ink); }.nv-log { flex: 1; overflow-y: auto; padding: var(--s-4); }.nv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }.nv-chip {
  border: 1px solid var(--line); background: var(--bg); cursor: pointer;
  padding: 6px 11px; border-radius: 999px;
  font: inherit; font-size: var(--t-xs); color: var(--accent);
}.nv-chip:hover { border-color: var(--accent); background: var(--accent-3); }.nv-hits { display: grid; gap: 6px; }.nv-hit {
  display: block; padding: var(--s-3); border-radius: var(--radius-sm);
  border: 1px solid var(--line); text-decoration: none; color: inherit;
}.nv-hit:hover { border-color: var(--accent); background: var(--accent-3); }.nv-hit b { display: block; font-size: var(--t-sm); color: var(--accent); }.nv-hit span { display: block; margin-top: 2px; font-size: var(--t-xs);
  line-height: 1.5; color: var(--ink-3); }.nv-in { display: flex; gap: 6px; padding: var(--s-3); border-top: 1px solid var(--line); }.nv-in input {
  flex: 1; min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--t-sm);
}.nv-in input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }.nv-go {
  min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font: inherit; font-size: var(--t-sm);
  font-weight: 600; cursor: pointer;
}.nv-go:hover { background: var(--accent-2); }.nv-foot { margin: 0; padding: 0 var(--s-3) var(--s-3);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-4); }@media (max-width: 560px) {/* Full screen. A 380px panel on a 390px phone is a panel nobody types in. */.nv-panel {
    position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0;
    border: 0;
  }.nv.is-open .nv-fab { display: none; }}/* ══════════════════════════════════════════════════════════════════════════
   WHAT RUNS ON ITS OWN

   Shown across the site because it is the thing people ask about and the
   thing most vendors are vague on. Deliberately split: what needs a model,
   and what does not. "Works with no AI key at all" is the stronger half.
   ══════════════════════════════════════════════════════════════════════════ */.agents { margin: var(--s-6) 0; padding: var(--s-5); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-2); }.agents-h { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4); }.agents-h h2 { margin: 0; font-size: var(--t-lg); }.agents-h span { font-size: var(--t-xs); color: var(--ink-4); }.agents-g { display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }.agent {
  padding: var(--s-4); border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
}.agent b { display: block; font-size: var(--t-sm); }.agent p { margin: 4px 0 0; font-size: var(--t-xs); line-height: 1.55; color: var(--ink-3); }.agent-k {
  display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}/* The distinction is the point, so it is a colour and not a footnote. */.agent-k.no-ai { background: var(--accent-3); color: var(--accent); }.agent-k.ai    { background: color-mix(in srgb, var(--m-nadi) 12%, white); color: var(--m-nadi); }.agents-note { margin: var(--s-4) 0 0; font-size: var(--t-xs); line-height: 1.6;
  color: var(--ink-3); }/* ══════════════════════════════════════════════════════════════════════════
   THE LOCAL BAR

   Bottom-left, above nothing, dismissible once and for the session. It
   offers a link — it never redirects, because a visitor who searched for a
   national page and gets thrown to a city page has lost what they came for.
   ══════════════════════════════════════════════════════════════════════════ */.loc-bar {
  position: fixed; left: 20px; bottom: 20px; z-index: 880;
  display: flex; align-items: center; gap: var(--s-3);
  max-width: min(440px, calc(100vw - 40px));
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg); box-shadow: var(--shadow);
  font-size: var(--t-sm); line-height: 1.5;
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s, transform .22s;
}.loc-bar.is-in { opacity: 1; transform: none; }.loc-go { font-weight: 600; white-space: nowrap; text-decoration: none; }.loc-x { border: 0; background: none; font-size: 20px; line-height: 1;
  color: var(--ink-4); cursor: pointer; padding: 0 2px; margin-left: auto; }.loc-x:hover { color: var(--ink); }@media (max-width: 560px) {/* Clear of Navi's button, which sits bottom-right. */.loc-bar { left: 14px; right: 84px; bottom: 14px; max-width: none;
    flex-wrap: wrap; gap: var(--s-2); }}/* ══════════════════════════════════════════════════════════════════════════
   A FIGURE MUST NOT FLOAT ALONE

   A 300px phone mock centred in a 1120px column, with a section's worth of
   whitespace above and below it, reads as a hole in the page rather than as
   an illustration of the paragraph before it.

   Bounding it and pulling it up against what it illustrates is the fix. The
   caption does the joining; a figure that needs a caption to explain why it
   is there is usually in the wrong place.
   ══════════════════════════════════════════════════════════════════════════ */.hfig {
  margin: var(--s-5) auto 0;
  max-width: 640px;
  padding: var(--s-5);
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}.hfig img {
  display: block; margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow);
}/* A phone at full width is a two-metre phone; at 300px in a wide column it
   is a stamp in a field. 260 inside a bounded panel reads as a phone. */.hfig img[height="862"] { max-width: 260px; }.hfig figcaption {
  margin-top: var(--s-3); text-align: center;
  font-size: var(--t-xs); line-height: 1.55; color: var(--ink-3);
}@media (max-width: 620px) {.hfig { padding: var(--s-4); margin-top: var(--s-4); }.hfig img[height="862"] { max-width: 220px; }}/* ── AND THE HEADER MUST ACTUALLY STICK ──
   position:sticky dies silently if any ancestor is a scroll container or
   creates a containing block. Restated here so a later rule cannot quietly
   take it away. */.site-header {
  position: sticky !important;
  top: 0;
  z-index: 60;
}html, body { overflow-x: visible; }/* ══════════════════════════════════════════════════════════════════════════
   BLOCKS THAT LOST THEIR CONTAINER

   Content I appended landed inside <section> but AFTER .wrap closed, so it
   rendered edge to edge with text against the viewport. Rather than more
   HTML surgery across 235 pages — which is how the last three bugs happened
   — these get the container treatment in CSS.

   A direct child of section that is not .wrap is, on this site, always one
   of my appended blocks. Nothing else is built that way.
   ══════════════════════════════════════════════════════════════════════════ */section > h2,
section > .dnums,
section > .dtime,
section > .dcheck,
section > .dvs,
section > .dtable,
section > .tbl-scroll,
section > .dflow,
section > .cards,
section > .speclist,
section > p,
section > .cta-row {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
  box-sizing: border-box;
}/* A table needs the padding on the outside, or the border sits inside it. */section > .dtable { width: calc(100% - var(--s-5) * 2); }section > h2 { margin-top: var(--s-7); }@media (max-width: 720px) {section > h2, section > .dnums, section > .dtime, section > .dcheck,
  section > .dvs, section > .dtable, section > .tbl-scroll, section > .dflow, section > .cards,
  section > .speclist, section > p, section > .cta-row {
    padding-left: var(--s-4); padding-right: var(--s-4);
  }section > .dtable { width: calc(100% - var(--s-4) * 2); }}/* ══════════════════════════════════════════════════════════════════════════
   THE FOOTER

   Four columns of 10, 5, 6 and 13 leaves one long leg hanging well below the
   others, which is what reads as messy — not the content, the ragged bottom
   edge.

   The long one wraps into two sub-columns on a wide screen so all four end
   at roughly the same line.
   ══════════════════════════════════════════════════════════════════════════ */.f-col { min-width: 0; break-inside: avoid; }.f-col h4 { color: var(--ink); }.f-col a { color: var(--ink-3); text-decoration: none; }.f-col a:hover { color: var(--accent); text-decoration: none; }/* A column past ten links wraps rather than dangling. */.f-col:nth-child(4) > ul,
.f-col:nth-child(4) > div:not(:first-child) {
  column-count: 2; column-gap: var(--s-5);
}.f-col:nth-child(4) a { break-inside: avoid; }/* Legal row: quieter than the columns above it, and evenly spaced. */.foot-b { border-top: 1px solid var(--line); padding-top: var(--s-4); }.foot-b a { color: var(--ink-4); font-size: var(--t-xs); }.foot-b a:hover { color: var(--ink-2); }.foot-desc, .foot-compliance { font-size: var(--t-xs); line-height: 1.65; color: var(--ink-4); }.foot-flag { font-size: 11px; color: var(--ink-4); }@media (max-width: 820px) {/* Two sub-columns in a stacked footer is unreadable. */.f-col:nth-child(4) > ul,
  .f-col:nth-child(4) > div:not(:first-child) { column-count: 1; }}
/* ══════════════════════════════════════════════════════════════════════════
   THE SECOND NAV ROW

   435 pages behind one row of dropdowns means most of the site is three
   clicks deep. A second row costs forty pixels and puts the eleven things
   people actually look for one click away.

   It scrolls horizontally on a phone rather than wrapping to four lines —
   a nav that pushes the page down by 160px is a nav people scroll past.
   ══════════════════════════════════════════════════════════════════════════ */

.subnav {
  background: var(--deep, #07211c);
  border-top: 1px solid rgba(255,255,255,.08);
}
.subnav-in {
  display: flex; gap: var(--s5, 24px); align-items: center;
  height: 44px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-in a {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.78); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .14s, border-color .14s;
}
.subnav-in a:hover {
  color: #fff; border-bottom-color: var(--glow, #1fa38c);
}

/* ── QUICK TILES ── the four things somebody arrives wanting ── */
.quick {
  display: grid; gap: 12px; margin: 26px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.qt {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--line, #e2e8e6);
  text-decoration: none; color: inherit;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.qt:hover {
  transform: translateY(-2px); border-color: var(--accent, #0f5f52);
  box-shadow: 0 2px 4px rgba(12,22,32,.06), 0 18px 40px -14px rgba(12,22,32,.18);
}
.qt b { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink, #0c1620); }
.qt span {
  display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #0f5f52);
}
.qt-i {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; font-size: 19px;
}
/* Four tints, one per destination — enough to tell them apart at a glance
   without becoming a second colour system. */
.qt-1 { background: #eef5f3; } .qt-1 .qt-i { background: #d8e9e5; }
.qt-2 { background: #eef1f7; } .qt-2 .qt-i { background: #dde3f0; }
.qt-3 { background: #f7f2e9; } .qt-3 .qt-i { background: #efe4d0; }
.qt-4 { background: #f7eef0; } .qt-4 .qt-i { background: #f0dde1; }

@media (max-width: 720px) {
  .subnav-in { gap: 18px; height: 42px; padding-left: var(--s4, 16px); }
  .quick { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BANNER BOXES

   The Apple pattern: a large tinted panel, generous space, one line of type
   at a size that would be absurd anywhere else, and nothing else competing
   with it. It works because of what is left out — no border, no shadow, one
   sentence, and a lot of air.

   The tints are pale enough that the ink stays black. A saturated panel with
   white text is a different, louder thing and it does not sit next to
   everything else on this site.
   ══════════════════════════════════════════════════════════════════════════ */

.bnr {
  border-radius: 22px;
  padding: clamp(32px, 5vw, 64px);
  margin: var(--s6, 32px) 0;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.bnr-t {
  font-family: var(--f-display, Georgia, serif);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 20ch;
  margin-inline: auto;
}
.bnr-l {
  margin: var(--s4, 16px) auto 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--ink-2, #33424f);
}
.bnr-cta { margin-top: var(--s5, 24px); display: flex; gap: 10px;
  justify-content: center; flex-wrap: wrap; }

/* A figure inside a banner, when the number IS the message. */
.bnr-n {
  display: block;
  font-family: var(--f-display, Georgia, serif);
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.bnr-n + .bnr-t { margin-top: var(--s3, 12px); font-size: clamp(18px, 2vw, 26px); }

/* Six tints. Pale on purpose — the ink stays black and they sit beside the
   rest of the site rather than shouting over it. */
.bnr-green  { background: #e9f2ef; }
.bnr-blue   { background: #eaeff7; }
.bnr-sand   { background: #f6f1e8; }
.bnr-rose   { background: #f7edee; }
.bnr-slate  { background: #eef1f2; }
.bnr-mint   { background: #e9f4f1; }

/* The one dark variant, for a page that needs a full stop. */
.bnr-dark { background: var(--deep, #07211c); }
.bnr-dark .bnr-t, .bnr-dark .bnr-n { color: #fff; }
.bnr-dark .bnr-l { color: rgba(255,255,255,.76); }
.bnr-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.06); }

/* Two banners side by side, when one idea has two halves. */
.bnr-pair {
  display: grid; gap: var(--s4, 16px); margin: var(--s6, 32px) 0;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.bnr-pair .bnr { margin: 0; padding: clamp(28px, 3.5vw, 44px); }
.bnr-pair .bnr-t { font-size: clamp(21px, 2.2vw, 29px); }

@media (max-width: 720px) {
  .bnr { border-radius: 18px; }
  .bnr-cta .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE RECOVERY CALCULATOR

   Mighty puts a revenue-potential panel on its pricing page and it is the
   most persuasive thing there. The difference here: theirs projects what you
   MIGHT earn, which is a claim about the future. This computes what a
   room-cap breach ALREADY cost, from figures the hospital types in.

   Their arithmetic, not our promise. That is why it can sit on a site that
   refuses fabricated numbers.
   ══════════════════════════════════════════════════════════════════════════ */

.calc {
  display: grid; gap: 0; margin: var(--s6, 32px) 0;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.1fr);
  border-radius: 22px; overflow: hidden;
  background: var(--deep, #07211c);
}
.calc-out {
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(150deg, #1fa38c 0%, #3fc4a5 100%);
  color: #06231e; display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
.calc-lab { font-size: 14px; font-weight: 600; opacity: .8; }
.calc-big {
  font-family: var(--f-display, Georgia, serif);
  font-size: clamp(40px, 6vw, 72px); line-height: 1;
  font-weight: 600; letter-spacing: -.03em; margin: 8px 0;
  font-variant-numeric: tabular-nums;
}
.calc-sub { font-size: 13.5px; line-height: 1.55; opacity: .85; max-width: 34ch;
  margin-inline: auto; }
.calc-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: var(--s5, 24px); border-top: 1px solid rgba(6,35,30,.18); padding-top: var(--s4, 16px);
}
.calc-split div b { display: block; font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.calc-split div span { display: block; font-size: 12px; opacity: .8; }

.calc-in { padding: clamp(26px, 3.5vw, 40px); color: #fff; }
.calc-f { margin-bottom: var(--s4, 16px); }
.calc-f label {
  display: block; font-size: 12.5px; margin-bottom: 6px; color: rgba(255,255,255,.72);
}
.calc-f input, .calc-f select {
  width: 100%; min-height: 46px; padding: 0 14px; font: inherit; font-size: 15px;
  color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 11px;
}
.calc-f input:focus, .calc-f select:focus {
  outline: 2px solid #1fa38c; outline-offset: -1px; background: rgba(255,255,255,.10);
}
.calc-f select option { color: #06231e; }
.calc-row { display: grid; gap: var(--s3, 12px); grid-template-columns: 1fr 1fr; }
.calc-note {
  margin: var(--s4, 16px) 0 0; font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,.60);
}
.calc-cta { margin-top: var(--s4, 16px); }
.calc-cta .btn { width: 100%; background: #1fa38c; color: #06231e; border: 0; }
.calc-cta .btn:hover { background: #3fc4a5; color: #06231e; }

@media (max-width: 760px) {
  .calc { grid-template-columns: 1fr; border-radius: 18px; }
  .calc-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A SEARCH BAR YOU CAN SEE

   The header has search behind a small button. Apollo puts a full-width
   field in the hero because on a 436-page site, search IS the navigation for
   anybody who knows what they want and cannot guess which of eleven menu
   items it lives under.
   ══════════════════════════════════════════════════════════════════════════ */

.bigsearch { max-width: 640px; margin: var(--s5, 24px) auto 0; }
.bigsearch-f {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; min-height: 58px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(12,22,32,.06), 0 18px 40px -12px rgba(12,22,32,.28);
  cursor: text;
}
.bigsearch-f svg { flex: 0 0 auto; color: var(--ink-4, #8a97a2); }
.bigsearch-f input {
  flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px;
  background: transparent; color: var(--ink, #0c1620); min-width: 0;
}
.bigsearch-f kbd {
  flex: 0 0 auto; font-family: var(--f-mono, monospace); font-size: 12px;
  padding: 3px 8px; border-radius: 6px;
  background: var(--bg-2, #f6f8f8); color: var(--ink-4, #8a97a2);
  border: 1px solid var(--line, #e2e8e6);
}
.bigsearch-hint {
  margin: 12px 0 0; text-align: center; font-size: 13px;
  color: rgba(255,255,255,.62);
}
.bigsearch-hint a { color: rgba(255,255,255,.86); text-decoration: underline;
  text-underline-offset: 3px; }
.bigsearch-hint a:hover { color: #fff; }

/* ── SPECIALITY GRID ── the Apollo "Browse by Specialties" shape ── */
.specs {
  display: grid; gap: 12px; margin-top: var(--s5, 24px);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.spec {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--line, #e2e8e6); background: #fff;
  text-decoration: none; color: inherit; font-size: 14.5px; line-height: 1.3;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.spec:hover {
  transform: translateY(-2px); border-color: var(--accent, #0f5f52);
  box-shadow: 0 2px 4px rgba(12,22,32,.05), 0 14px 30px -12px rgba(12,22,32,.18);
  color: var(--accent, #0f5f52);
}
.spec-i {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--accent-3, #e6f1ee); color: var(--accent, #0f5f52);
}

@media (max-width: 720px) {
  .bigsearch-f { min-height: 52px; padding: 0 16px; }
  .bigsearch-f kbd { display: none; }
  .specs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT FRAMES

   No screenshots exist and a stock photograph of a smiling doctor tells a
   buyer nothing. These are the actual interface, drawn as SVG — which has
   three advantages over a screenshot: it stays sharp at any size, it weighs
   a few kilobytes, and it cannot go stale showing a screen we removed.

   The chrome is deliberately plain. A browser bar with a fake URL and three
   dots is enough for somebody to know they are looking at software.
   ══════════════════════════════════════════════════════════════════════════ */

.frame {
  margin: var(--s5, 24px) 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line, #e2e8e6);
  box-shadow: 0 2px 4px rgba(12,22,32,.06), 0 22px 50px -16px rgba(12,22,32,.22);
}
.frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--bg-2, #f6f8f8);
  border-bottom: 1px solid var(--line, #e2e8e6);
}
.frame-dots { display: flex; gap: 5px; }
.frame-dots i { width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-2, #f0f4f3); border: 1px solid var(--line, #e2e8e6); }
.frame-url {
  flex: 1; font-family: var(--f-mono, monospace); font-size: 11.5px;
  color: var(--ink-4, #8a97a2); background: #fff;
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line, #e2e8e6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame svg { display: block; width: 100%; height: auto; }
.frame-cap {
  padding: 12px 16px; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-3, #5b6b78); background: var(--bg-2, #f6f8f8);
  border-top: 1px solid var(--line, #e2e8e6);
}

/* Two frames side by side, when the point is the difference between them. */
.frame-pair {
  display: grid; gap: var(--s4, 16px); margin-top: var(--s5, 24px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.frame-pair .frame { margin: 0; }

/* Inline SVG, because the dingbat glyphs used before were not in any font the
   site loads and rendered as empty boxes. An icon that depends on font
   coverage is an icon that will break on somebody's machine. */
.qt-i svg { width: 20px; height: 20px; }
.spec-i svg { width: 19px; height: 19px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION ON THE FIGURES

   The numbers on this site are the argument — ₹42,857 gone, 24 rules, 50%
   payable. A figure that arrives is read; a figure that is simply present
   gets skimmed past with the rest of the paragraph.

   ── ON SCROLL, NOT ON LOAD ──

   A figure that animated before it was on screen has already finished by
   the time somebody reaches it, which is the same as not animating. The
   observer starts it when it is actually visible.
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes fig-in { from { opacity: 0; transform: translateY(10px); }
                    to { opacity: 1; transform: none; } }
@keyframes fig-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Hidden until seen, then it arrives. Without the .is-seen class nothing
   moves, so a browser with JavaScript off shows everything normally. */
.dnum, .dtime-row, .dcheck div, .flow-s, .vs-col, .qt {
  opacity: 1;
}
.js-motion .dnum,
.js-motion .dtime-row,
.js-motion .dcheck div,
.js-motion .flow-s,
.js-motion .vs-col,
.js-motion .qt { opacity: 0; }

.js-motion .is-seen .dnum,
.js-motion .is-seen.dnum,
.js-motion .is-seen .dtime-row,
.js-motion .is-seen .dcheck div,
.js-motion .is-seen .flow-s,
.js-motion .is-seen .vs-col,
.js-motion .is-seen .qt {
  animation: fig-in .5s cubic-bezier(.22, 1, .36, 1) both;
}
/* Staggered so a row of three reads left to right rather than blinking on
   together. */
.js-motion .is-seen .dnum:nth-child(2),
.js-motion .is-seen .dcheck div:nth-child(2),
.js-motion .is-seen .flow-s:nth-child(2),
.js-motion .is-seen .qt:nth-child(2) { animation-delay: .07s; }
.js-motion .is-seen .dnum:nth-child(3),
.js-motion .is-seen .dcheck div:nth-child(3),
.js-motion .is-seen .flow-s:nth-child(3),
.js-motion .is-seen .qt:nth-child(3) { animation-delay: .14s; }
.js-motion .is-seen .dcheck div:nth-child(n+4),
.js-motion .is-seen .flow-s:nth-child(n+4),
.js-motion .is-seen .qt:nth-child(n+4) { animation-delay: .21s; }
.js-motion .is-seen .dtime-row:nth-child(2) { animation-delay: .08s; }
.js-motion .is-seen .dtime-row:nth-child(3) { animation-delay: .16s; }
.js-motion .is-seen .dtime-row:nth-child(4) { animation-delay: .24s; }
.js-motion .is-seen .vs-col:nth-child(2) { animation-delay: .10s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .dnum, .js-motion .dtime-row, .js-motion .dcheck div,
  .js-motion .flow-s, .js-motion .vs-col, .js-motion .qt {
    opacity: 1 !important; animation: none !important; transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A DIRECTORY IS A LIST, NOT SIXTEEN CARDS

   The homepage had four action tiles and twelve more of the identical shape
   directly beneath them. Sixteen boxes with the same border, the same
   padding and the same tinted icon is not navigation — the four that matter
   became indistinguishable from the twelve that are a directory.

   So the four keep the card. The twelve become rows: a name, a line, a rule
   between them. Less ink, faster to scan, and the actions stand out again
   because nothing else looks like them.
   ══════════════════════════════════════════════════════════════════════════ */

.browse {
  display: grid;
  gap: 0;
  margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 1px solid var(--line);
}
.browse-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: padding-left .16s, color .16s;
}
.browse-row:hover { padding-left: 10px; color: var(--accent); }
.browse-row b {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.browse-row span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
  text-align: right;
  margin-left: auto;
}
/* An arrow that only appears on hover — a static one on every row is twelve
   pieces of furniture nobody looks at. */
.browse-row::after {
  content: '\2192';
  flex: 0 0 auto;
  opacity: 0;
  color: var(--accent);
  transition: opacity .16s, transform .16s;
  transform: translateX(-4px);
}
.browse-row:hover::after { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .browse { grid-template-columns: 1fr; }
  .browse-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .browse-row span { text-align: left; margin-left: 0; }
  .browse-row::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ACTION BAR

   Four tinted boxes above twelve more, all the same shape, meant the eye
   read sixteen rectangles and stopped distinguishing between them — the
   four that matter most stopped standing out, which is the opposite of why
   they were at the top.

   A bar, not a grid. Same links, different shape, so it reads as a row of
   actions rather than the first line of a longer list.
   ══════════════════════════════════════════════════════════════════════════ */

.actbar { border-bottom: 1px solid var(--line); background: var(--bg); }
.actbar-in {
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.actbar-in::-webkit-scrollbar { display: none; }
.act {
  flex: 1 1 0; min-width: 172px;
  padding: 18px 20px 16px;
  text-decoration: none; color: inherit;
  border-right: 1px solid var(--line-2);
  transition: background .15s;
}
.act:last-child { border-right: 0; }
.act:hover { background: var(--accent-3); }
.act b {
  display: block; font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.act:hover b { color: var(--accent); }
.act span {
  display: block; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-4);
}

@media (max-width: 720px) {
  /* Scrolls sideways rather than becoming four stacked bars, which would
     push the page's actual argument below the fold. */
  .act { min-width: 148px; padding: 14px 16px 12px; }
  .act b { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE BOTTOM CORNERS

   Two chat widgets were mounting in the same place — an older orange
   support bubble and Navi, overlapping. And the location bar sat bottom
   left with nothing keeping it clear of either.

   One assistant, bottom right. The location bar bottom left, and on a phone
   it stops short of the button rather than sliding under it.
   ══════════════════════════════════════════════════════════════════════════ */

.nv { right: 22px; bottom: 22px; }
.nv-fab { width: 52px; height: 52px; }

/* Clear of the button on any width. */
.loc-bar { max-width: min(420px, calc(100vw - 110px)); }

@media (max-width: 560px) {
  .nv { right: 14px; bottom: 14px; }
  .nv-fab { width: 48px; height: 48px; }
  /* Stops before the button rather than under it. */
  .loc-bar { left: 12px; right: 76px; bottom: 14px; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HOMEPAGE VISUALISATION

   Nine SVGs on the homepage and not one carried an argument — all of them
   were pictures of the interface. The good charts were on inner pages,
   which is backwards: the homepage has to make somebody want to read an
   inner page.

   Bar height is the only encoding, and it means one thing: how much of a
   deduction can still be prevented at that moment. It falls to almost
   nothing by settlement, and that fall is the entire product argument.
   ══════════════════════════════════════════════════════════════════════════ */

.hviz { margin: var(--s5) 0 var(--s4); }
.hviz-svg { display: block; width: 100%; height: auto; }

.hv-rail { stroke: var(--line-2); stroke-width: 1.5; }

/* The two halves of the stay. The band, not the bars, is what somebody
   takes away — before discharge you can act, after it you can only ask. */
.hv-open { fill: var(--accent-3); }
.hv-shut { fill: var(--bg-2, #f6f6f4); }
.hv-band {
  font-size: 14px; font-weight: 600; fill: var(--accent);
  letter-spacing: -.01em;
}
.hv-band-shut { fill: var(--ink-4); }

.hv-bar { fill: var(--accent); }
.hv-bar-late { fill: var(--ink-5, #c9ccca); }
.hv-dot { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.hv-dot-late { fill: var(--ink-4); }

.hv-lab { font-size: 13px; font-weight: 600; fill: var(--ink); }
.hv-lab-late { fill: var(--ink-3); }
.hv-sub { font-size: 11px; fill: var(--ink-4); }
.hv-key { font-size: 11.5px; fill: var(--ink-4); }

.hviz-note {
  margin: var(--s3) 0 0;
  font-size: 15px; line-height: 1.65; color: var(--ink-2);
  max-width: 62ch;
}

/* Bars grow from the rail as the section arrives, so the fall from
   admission to settlement is watched rather than read. */
.js-motion .hviz .hv-bar { transform-origin: center bottom; transform: scaleY(0); }
.js-motion .is-seen .hv-bar {
  animation: hv-rise .55s cubic-bezier(.22, 1, .36, 1) both;
}
.js-motion .is-seen .hv-stop:nth-of-type(2) .hv-bar { animation-delay: .10s; }
.js-motion .is-seen .hv-stop:nth-of-type(3) .hv-bar { animation-delay: .20s; }
.js-motion .is-seen .hv-stop:nth-of-type(4) .hv-bar { animation-delay: .30s; }
@keyframes hv-rise { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .hviz .hv-bar { transform: none !important; animation: none !important; }
}

@media (max-width: 640px) {
  /* An eight-hundred-pixel timeline on a phone is four unreadable columns,
     so it scrolls at a legible width instead of shrinking. */
  .hviz { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hviz-svg { min-width: 620px; }
  .hviz-note { font-size: 14px; }
}

/* ── THE PRICING COMPARISON ──
   Two bars, both facts. The left is the price, which is fixed and ours.
   The right is a month of deductions, which is theirs. We deliberately do
   not draw a third bar for "what you would recover" — that number does not
   exist before somebody looks at the claims, and drawing it would be the
   kind of promise this whole site refuses to make. */
.pviz { margin: var(--s5) 0 var(--s3); }
.pviz-svg { display: block; width: 100%; height: auto; }
.pv-cap { font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--ink-4); }
.pv-bar { }
.pv-bar-cost { fill: var(--accent); }
.pv-bar-loss { fill: var(--ink-5, #d8d5cf); }
.pv-lab { font-size: 14px; font-weight: 600; fill: var(--ink); }
.pv-sub { font-size: 12px; fill: var(--ink-4); }
.pviz-note { margin: var(--s3) 0 0; font-size: 15px; line-height: 1.65;
  color: var(--ink-2); max-width: 62ch; }

.js-motion .pviz .pv-bar { transform-origin: left center; transform: scaleX(0); }
.js-motion .is-seen .pv-bar { animation: pv-grow .6s cubic-bezier(.22,1,.36,1) both; }
.js-motion .is-seen .pv-bar-loss { animation-delay: .18s; }
@keyframes pv-grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .js-motion .pviz .pv-bar { transform: none !important; animation: none !important; }
}
@media (max-width: 640px) {
  .pviz { overflow-x: auto; }
  .pviz-svg { min-width: 560px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ROOM CAP CASCADE

   The single most counter-intuitive thing in Indian health insurance, and
   the reason the product exists. Two columns: billed, and what survives.
   Every right-hand bar is cut by the SAME ratio, which is what nobody
   expects — people assume the insurer refuses the room difference and stops.
   ══════════════════════════════════════════════════════════════════════════ */

.rcviz { margin: var(--s5) 0 var(--s3); }
.rcviz-svg { display: block; width: 100%; height: auto; }
.rc-head { font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--ink-4); }
.rc-lab { font-size: 13.5px; font-weight: 500; fill: var(--ink); }
.rc-billed { fill: var(--ink-5, #d8d5cf); }
.rc-paid { fill: var(--accent); }
.rc-amt { font-size: 12.5px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.rc-cut { fill: var(--accent); font-weight: 600; }
.rc-rule { stroke: var(--line); stroke-width: 1; }
.rc-tot { font-size: 14px; font-weight: 600; fill: var(--ink); }
.rc-tot-small { fill: var(--ink-3); }
/* The number the whole page exists to make somebody feel. */
.rc-tot-big { font-size: 19px; fill: var(--critical, #a33a22); }
.rc-note { font-size: 11px; fill: var(--ink-4); }
.rcviz-note { margin: var(--s3) 0 0; font-size: 15px; line-height: 1.65;
  color: var(--ink-2); max-width: 62ch; }

.js-motion .rcviz .rc-paid { transform-origin: left center; transform: scaleX(0); }
.js-motion .is-seen .rc-paid { animation: rc-grow .5s cubic-bezier(.22,1,.36,1) both; }
.js-motion .is-seen .rc-row:nth-of-type(2) .rc-paid { animation-delay: .09s; }
.js-motion .is-seen .rc-row:nth-of-type(3) .rc-paid { animation-delay: .18s; }
.js-motion .is-seen .rc-row:nth-of-type(4) .rc-paid { animation-delay: .27s; }
@keyframes rc-grow { to { transform: scaleX(1); } }

/* ══════════════════════════════════════════════════════════════════════════
   THE WALL

   Not a chart — a wall. Two columns with a hard line between them, because
   the argument is categorical rather than quantitative: these things, never
   those, and no setting in between.
   ══════════════════════════════════════════════════════════════════════════ */

.wallviz {
  display: grid; grid-template-columns: 1fr 40px 1fr;
  align-items: stretch; margin: var(--s5) 0 var(--s3);
}
.wall-col { padding: var(--s4); border-radius: 14px; }
.wall-yes { background: var(--accent-3); }
.wall-no { background: var(--bg-2, #f6f6f4); }
.wall-h { margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; }
.wall-yes .wall-h { color: var(--accent); }
.wall-no .wall-h { color: var(--ink-4); }
.wall-col ul { margin: 0; padding-left: 18px; }
.wall-col li { font-size: 14.5px; line-height: 1.6; margin-bottom: 9px; }
.wall-no li { color: var(--ink-3); }
.wall-line { display: flex; justify-content: center; }
.wall-line span { width: 2px; background: var(--line-2); border-radius: 1px; }
.wallviz-note { margin: var(--s3) 0 0; font-size: 15px; line-height: 1.65;
  color: var(--ink-2); max-width: 64ch; }

/* ══════════════════════════════════════════════════════════════════════════
   WHERE THE FEE GOES

   Three bars of the same total length, cut differently. Length is the
   encoding and it is the only one — the reader compares the green.
   ══════════════════════════════════════════════════════════════════════════ */

.cutviz { margin: var(--s5) 0 var(--s3); }
.cutviz-svg { display: block; width: 100%; height: auto; }
.ct-lab { font-size: 14px; font-weight: 500; fill: var(--ink-2); }
.ct-lab-us { font-weight: 700; fill: var(--ink); }
.ct-keep { fill: var(--ink-5, #d8d5cf); }
.ct-keep-all { fill: var(--accent); }
.ct-cut { fill: var(--critical, #a33a22); opacity: .82; }
.ct-cut-lab { font-size: 11.5px; fill: #fff; font-weight: 600; }
.ct-all { font-size: 12.5px; fill: #fff; font-weight: 600; }
.ct-note { font-size: 11.5px; fill: var(--ink-4); }

.js-motion .cutviz rect { transform-origin: left center; transform: scaleX(0); }
.js-motion .is-seen .cutviz rect,
.js-motion .cutviz.is-seen rect { animation: ct-grow .55s cubic-bezier(.22,1,.36,1) both; }
.js-motion .is-seen g:nth-of-type(2) .ct-keep { animation-delay: .10s; }
.js-motion .is-seen g:nth-of-type(3) .ct-keep { animation-delay: .20s; }
@keyframes ct-grow { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .rcviz .rc-paid, .js-motion .cutviz rect {
    transform: none !important; animation: none !important;
  }
}

@media (max-width: 720px) {
  .wallviz { grid-template-columns: 1fr; gap: 12px; }
  /* Horizontal on a phone — a vertical rule between stacked columns says
     nothing, but a line above the second one still marks the divide. */
  .wall-line { height: 2px; }
  .wall-line span { width: 100%; height: 2px; }
}
@media (max-width: 640px) {
  .rcviz, .cutviz { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rcviz-svg { min-width: 700px; }
  .cutviz-svg { min-width: 620px; }
  .rcviz-note, .wallviz-note { font-size: 14px; }
}

/* ── THE FUNNEL ──
   Used where the argument is a drop between stages: claims sorted by what
   is preventable, lab results by whether anybody opened them, rejections by
   whether an appeal moves. Width is the only encoding. */
.fnl { margin: var(--s5) 0 var(--s3); }
.fnl-svg { display: block; width: 100%; height: auto; }
.fn-cap { font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--ink-4); }
.fn-a { fill: var(--accent); }
.fn-b { fill: var(--accent-2, #4fa392); }
.fn-c { fill: var(--ink-5, #d8d5cf); }
.fn-in { font-size: 13px; fill: #fff; font-weight: 500; }
.fn-in-dark { fill: var(--ink-2); }
.fn-n { font-size: 11.5px; fill: var(--ink-4); }
.fn-note { font-size: 11px; fill: var(--ink-4); }
.fnl-note { margin: var(--s3) 0 0; font-size: 15px; line-height: 1.65;
  color: var(--ink-2); max-width: 62ch; }

.js-motion .fnl rect { transform-origin: left center; transform: scaleX(0); }
.js-motion .is-seen .fnl rect,
.js-motion .fnl.is-seen rect { animation: fn-grow .5s cubic-bezier(.22,1,.36,1) both; }
.js-motion .fnl.is-seen rect:nth-of-type(2) { animation-delay: .08s; }
.js-motion .fnl.is-seen rect:nth-of-type(3) { animation-delay: .16s; }
.js-motion .fnl.is-seen rect:nth-of-type(4) { animation-delay: .24s; }
@keyframes fn-grow { to { transform: scaleX(1); } }

/* ── THE SCHEDULE ──
   Ten checks on a clock. Filled marks found something; the rest ran and
   said nothing, which is the argument. */
.agviz { margin: var(--s5) 0 var(--s3); }
.agviz-svg { display: block; width: 100%; height: auto; }
.ag-rail { stroke: var(--line-2); stroke-width: 1.5; }
.ag-dot { fill: #fff; stroke: var(--line-strong, #d3d3cc); stroke-width: 2; }
.ag-hit { fill: var(--accent); stroke: var(--accent); }
.ag-tick { stroke: var(--accent); stroke-width: 1.5; }
.ag-lab { font-size: 11px; fill: var(--ink-4); }
.ag-lab-hit { fill: var(--accent); font-weight: 600; font-size: 12px; }
.ag-t { font-size: 11px; fill: var(--ink-4); }
.ag-key { font-size: 12px; fill: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .fnl rect { transform: none !important; animation: none !important; }
}
@media (max-width: 640px) {
  .fnl, .agviz { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fnl-svg { min-width: 600px; }
  .agviz-svg { min-width: 700px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WORKED ARITHMETIC

   Numbers a reader can redo. Every row is either an input they recognise or
   a multiplication they can check, and the conclusion follows from the
   mechanism rather than from a survey we cannot show them.

   Set as a sum rather than a table, because a sum reads as something being
   worked out and a table reads as something being asserted.
   ══════════════════════════════════════════════════════════════════════════ */

.sums { margin: var(--s5) 0 var(--s3); }
.sm-grid {
  max-width: 560px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.sm-row {
  display: grid;
  grid-template-columns: 1fr 34px 132px;
  align-items: baseline;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-2);
}
.sm-row:last-child { border-bottom: 0; }
.sm-lab { font-size: 14.5px; color: var(--ink-2); }
/* The operator column is what makes it read as arithmetic rather than as a
   list of facts. */
.sm-op {
  font-size: 13px; color: var(--ink-4); text-align: center;
  font-variant-numeric: tabular-nums;
}
.sm-val {
  font-size: 15px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
/* The lines where money leaves. */
.sm-row.is-out { background: var(--accent-3); }
.sm-row.is-out .sm-lab { color: var(--accent); font-weight: 500; }
.sm-row.is-out .sm-val { color: var(--accent); }

.sm-total {
  background: var(--bg-2, #f6f6f4);
  border-top: 1.5px solid var(--line-strong, #d3d3cc);
  padding: 16px 18px;
}
.sm-total .sm-lab { font-weight: 600; color: var(--ink); font-size: 15px; }
.sm-big { font-size: 21px; color: var(--critical, #a33a22); letter-spacing: -.02em; }

.sm-note {
  margin: var(--s3) 0 0;
  font-size: 14.5px; line-height: 1.65; color: var(--ink-3);
  max-width: 62ch;
}

/* Rows arrive in order, so the sum is watched being worked rather than
   appearing finished. */
.js-motion .sums .sm-row { opacity: 0; }
.js-motion .sums.is-seen .sm-row {
  animation: sm-in .38s ease-out both;
}
.js-motion .sums.is-seen .sm-row:nth-child(1) { animation-delay: .00s; }
.js-motion .sums.is-seen .sm-row:nth-child(2) { animation-delay: .07s; }
.js-motion .sums.is-seen .sm-row:nth-child(3) { animation-delay: .14s; }
.js-motion .sums.is-seen .sm-row:nth-child(4) { animation-delay: .21s; }
.js-motion .sums.is-seen .sm-row:nth-child(5) { animation-delay: .28s; }
.js-motion .sums.is-seen .sm-row:nth-child(6) { animation-delay: .35s; }
.js-motion .sums.is-seen .sm-total { animation-delay: .46s; }
@keyframes sm-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .sums .sm-row { opacity: 1 !important; animation: none !important; }
}
@media (max-width: 560px) {
  .sm-grid { max-width: none; }
  .sm-row { grid-template-columns: 1fr 26px 104px; padding: 11px 14px; gap: 6px; }
  .sm-lab { font-size: 13.5px; }
  .sm-val { font-size: 14px; }
  .sm-big { font-size: 18px; }
}

/* Two the class cross-check found unstyled. .st-next-a was styled and its
   own parent was not, so the "read next" line on 17 location pages sat
   flush against the paragraph above it. */
.st-next {
  margin: var(--s4) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
/* The answer half of a homepage FAQ row. */
.hfaq-r { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   THE ASSISTANT BUTTON — THE ACTUAL BUG
   
   .nv had `right: 22px; bottom: 22px` and no `position` at all. Offsets on
   a static element do nothing, so the button rendered inline at the end of
   the footer, and .nv-panel — which is `position: absolute` — resolved
   against the page rather than against the button.
   
   That is why it appeared in the footer instead of the corner.
   ══════════════════════════════════════════════════════════════════════════ */

.nv {
  position: fixed;
  right: 22px;
  bottom: 22px;
  /* Above the page, below a modal. A chat button that covers a dialog is
     worse than one nobody can find. */
  z-index: 900;
  /* The panel anchors to this, which is the whole reason it needs to be a
     positioned element. */
  isolation: isolate;
}
.nv-fab {
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(12, 22, 32, .18), 0 1px 3px rgba(12, 22, 32, .10);
  transition: transform .16s, box-shadow .16s;
}
.nv-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 22, 32, .22);
}
.nv-fab svg { width: 24px; height: 24px; }

.nv-panel {
  box-shadow: 0 12px 40px -8px rgba(12, 22, 32, .28), 0 2px 8px rgba(12, 22, 32, .10);
  border-radius: 16px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .nv { right: 14px; bottom: 14px; }
  .nv-fab { width: 50px; height: 50px; }
  /* Full width on a phone — a 380px panel on a 360px screen hangs off the
     edge, which is how it has been. */
  .nv-panel {
    position: fixed;
    right: 10px;
    left: 10px;
    bottom: 74px;
    width: auto;
    max-height: 68vh;
  }
  /* And the location bar stops before the button rather than under it. */
  .loc-bar { right: 78px; }
}

/* Inline icons beside a label. Sized in em so they scale with the text
   rather than sitting at a fixed pixel size next to a heading. */
.ic { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .4em;
  flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   THE CALCULATORS ON A PHONE

   Three grids with fixed tracks and no mobile rule, and all three are
   calculators — the pricing one and two tools. A calculator is where
   somebody types their own numbers, so it is the worst place on the site
   for a field to be 140px wide.

   Found by checking what each page actually renders rather than scanning
   the stylesheet: the earlier pass flagged auto-fit grids as broken and
   missed these entirely.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  /* The pricing calculator: two columns side by side become one, because
     560px of input beside 560px of output does not fit in 360. */
  .calc-split { grid-template-columns: 1fr; }
  /* And the divider between them was a vertical border, which reads as
     nothing once they stack. */
  .calc-split > * + * { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  /* A label beside a 128px field leaves about 150px for the label. Stacked,
     the field gets the full width and the label gets a line of its own. */
  .pdc-f { grid-template-columns: 1fr; gap: 6px; }
  .pdc-f input, .pdc-f select {
    width: 100%;
    /* 16px, because anything smaller makes iOS zoom the page on focus —
       which on a calculator means the layout jumps as somebody types. */
    font-size: 16px;
    min-height: 46px;
  }
  .pdc-f label { font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ALIGNMENT PROBLEM

   156 tables with no scroll wrapper. A table wider than the viewport does
   not clip — it widens the page, and then every section on it appears
   shifted left with a horizontal scrollbar at the bottom. That reads as
   "the whole site is misaligned" when one table is the cause.

   Fixed at the container rather than by wrapping 156 tables, because the
   markup fix would have to be repeated by whoever adds the 157th.
   ══════════════════════════════════════════════════════════════════════════ */

/* Nothing widens the page. The one rule that prevents the whole class of
   problem. */
/* On html only. `overflow-x: hidden` on BODY creates a scroll container,
   and position:sticky resolves against the nearest one — so it silently
   kills every sticky element on the page, including the nav. Eight rules
   here use sticky. */
/* NOT html { overflow-x: hidden }. A previous fix sets
   `html, body { overflow-x: visible }` deliberately, because
   position:sticky dies if an ancestor is a scroll container —
   and the sticky nav depends on it. Overflow is contained at
   the table and the flex row instead, which is where it
   actually originates. */
body { max-width: 100%; }

/* .wrap KEEPS ITS 1120px MEASURE.
   A `.wrap { max-width: 100% }` used to sit here, meant to stop horizontal
   overflow. It did not: min-width wins over max-width, so the wide children
   still overflowed, and the rule dropped every .wrap on all 459 pages to full
   bleed. Meanwhile `section > h2 / p / .dtable / .cards / .dcheck / .dvs`
   below keep their own 1120px. The two container systems then disagreed on
   the left edge by (100vw - 1120px) / 2 — 400px on a 1920px screen — which is
   what read as the site-wide misalignment. Overflow is contained at the table
   and the flex row, where it actually originates. */

/* THE SCROLL BELONGS ON A WRAPPER, NOT ON THE TABLE.
   `table { display: block }` splits thead and tbody into two independent
   table boxes. Each then sizes its own columns from its own content, so the
   header stops lining up over the data underneath it — and `min-width:
   max-content` on both made the two disagree even harder. Worse, min-width on
   the scroll box itself (.dtable carries 520px) forces the box wide instead of
   letting it scroll, so the page overflowed sideways on every phone.
   The table stays display:table and .tbl-scroll does the scrolling. */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}
.tbl-scroll > table { max-width: none; margin-top: 0; margin-bottom: 0; }

/* Flex rows wrap rather than forcing the page wider. A flex child defaults
   to min-width:auto, which is why one long word can push a row past its
   container. */
.wrap [class*="-row"],
.cta-row, .viz-key, .dcheck { flex-wrap: wrap; }

/* Only the children of a flex or grid container, not every element inside a
   wrap — `.wrap * { min-width: 0 }` would override every deliberate
   min-width on the page, including the ones holding a layout up. */
.cta-row > *, .viz-key > *, .dcheck > *,
.cards > *, .browse > *, .dvs > *, .wallviz > *, .quick > *, .actbar-in > * {
  min-width: 0;
}

/* And anything monospace — a URL, a code, an account reference — breaks
   rather than running off the edge. */
code, .num, .rk, .pb-amt, .dsup-ref, [class*="mono"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 560px) {
  /* Long words in headings are the other common overflow. */
  h1, h2, h3 { overflow-wrap: break-word; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE DARK SUBNAV SHOULD NOT STICK

   It has no position of its own — it sticks because it sits inside
   .site-header, which is sticky. So two bars follow you down every page,
   and on a phone that is a third of the screen gone before any content.

   The white bar is worth keeping pinned: it has search, sign-in and the
   main navigation. The dark one is a list of eleven links somebody uses
   once, and it belongs at the top of the page rather than on top of the
   content.

   Only the inner bar is pinned rather than the whole header, so the subnav
   scrolls away with the page.
   ══════════════════════════════════════════════════════════════════════════ */

/* The header stops being the sticky element... */
.site-header {
  position: relative !important;
  top: auto;
}

/* ...and the white bar inside it becomes one. The subnav is a sibling of
   this, so it scrolls away. */
.site-header > .wrap,
.site-header > .nav-in,
.site-header > .hdr-in {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line, #ecebe7);
}

.subnav { position: static; }

@media (max-width: 900px) {
  /* On a phone the subnav scrolls sideways and is not pinned, so the whole
     viewport is content once you start reading. */
  .subnav { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL ENTERPRISE LAYER
   A single visual language for hospital groups and employers. The palette is
   deliberately cool and dimensional: it carries precision and optimism across
   markets without borrowing country- or payer-specific visual conventions.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --d-midnight: #08428c;
  --d-indigo: #5c6795;
  --d-sky: #41c0f2;
  --d-ocean: #0d518c;
  --d-electric: #0b4fd9;
  --d-ice: #eefaff;
  --d-cloud: #f5f8ff;
  --d-ink: #10233d;
  --d-muted: #596a82;
  --d-line: #d8e4f4;
  --d-success: #138a76;
  --d-amber: #b87916;
  --d-risk: #b54735;

  --ink: var(--d-ink);
  --ink-2: #314663;
  --ink-3: var(--d-muted);
  --ink-4: #8290a4;
  --bg: #ffffff;
  --bg-2: var(--d-cloud);
  --bg-3: #e8f3ff;
  --line: var(--d-line);
  --line-2: #eaf0f8;
  --accent: var(--d-electric);
  --accent-2: var(--d-midnight);
  --accent-3: #e6f2ff;
  --warn: var(--d-risk);
  --warn-2: #fff2ef;

  /* Compatibility values used by the pre-existing page library. */
  --blue-900: var(--d-midnight);
  --blue-800: var(--d-ocean);
  --blue-700: var(--d-electric);
  --blue-600: var(--d-electric);
  --blue-500: var(--d-sky);
  --blue-400: #75d4f7;
  --blue-300: #b9eafd;
  --blue-200: #d8f4fe;
  --blue-100: #e9f8fe;
  --blue-50: var(--d-ice);
  --orange-700: var(--d-indigo);
  --orange-600: var(--d-indigo);
  --orange-500: var(--d-indigo);
  --orange-400: #8993c0;
  --orange-300: #bdc4df;
  --orange-200: #dfe3f1;
  --orange-100: #eceef7;
  --orange-50: #f5f5fb;
  --green: var(--d-success);
  --m-intake: var(--d-electric);
  --m-chart: var(--d-sky);
  --m-money: var(--d-indigo);
  --m-corp: var(--d-indigo);
  --m-nadi: var(--d-ocean);
  --m-comm: var(--d-midnight);
}

body { background: var(--bg); }
.anb { background: var(--d-midnight); color: #fff; }
.anb a { color: var(--d-sky); }
.site-header > .wrap,
.site-header > .nav-in,
.site-header > .hdr-in { background: color-mix(in srgb, #fff 91%, var(--d-ice)); }
.subnav { background: var(--d-midnight); }
.subnav a { color: #dbeeff; }
.subnav a:hover { color: #fff; }
.btn-primary { background: linear-gradient(135deg, var(--d-electric), var(--d-ocean)); box-shadow: 0 10px 24px rgba(11,79,217,.22); }
.btn-primary:hover { background: linear-gradient(135deg, var(--d-midnight), var(--d-electric)); }
.btn-ghost { border-color: #b9d6f4; color: var(--d-midnight); background: rgba(255,255,255,.72); }
.btn-ghost:hover { border-color: var(--d-electric); color: var(--d-electric); background: var(--d-ice); }

/* Depth is reserved for the major decision surfaces. */
.hx, .pl-hero, .cp-hero, .co-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 76% 18%, rgba(65,192,242,.31), transparent 27rem),
    radial-gradient(circle at 13% 83%, rgba(11,79,217,.13), transparent 31rem),
    linear-gradient(135deg, #faffff 0%, var(--d-ice) 52%, #f6f8ff 100%) !important;
}
.hx::before, .pl-hero::before, .cp-hero::before, .co-hero::before {
  content:""; position:absolute; z-index:-1; width:360px; height:360px; border-radius:50%;
  right:-125px; top:80px; opacity:.72; filter:blur(.2px);
  background: conic-gradient(from 190deg, var(--d-electric), var(--d-sky), var(--d-indigo), var(--d-electric));
  transform: perspective(800px) rotateX(58deg) rotateZ(18deg);
  box-shadow: 0 42px 65px rgba(8,66,140,.16), inset 0 1px 22px rgba(255,255,255,.58);
  animation: d-orbit 12s ease-in-out infinite alternate;
}
.hx::after, .pl-hero::after, .cp-hero::after, .co-hero::after {
  content:""; position:absolute; z-index:-1; width:130px; height:130px; border-radius:32px;
  right:18%; bottom:32px; opacity:.65; transform: perspective(600px) rotateX(56deg) rotateZ(25deg);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(65,192,242,.45));
  box-shadow: 18px 26px 32px rgba(8,66,140,.16), inset 0 1px 1px #fff;
  animation: d-float 8s ease-in-out infinite;
}
@keyframes d-orbit { to { transform: perspective(800px) rotateX(63deg) rotateZ(42deg) translate3d(-24px,-18px,36px); } }
@keyframes d-float { 50% { transform: perspective(600px) rotateX(62deg) rotateZ(32deg) translateY(-16px); } }

.enterprise-orbit { position:relative; display:grid; place-items:center; width:min(100%, 480px); height:265px; margin:34px 0 0 auto; perspective:1100px; }
.enterprise-orbit .orbital { position:absolute; width:335px; height:160px; border:1px solid rgba(11,79,217,.24); border-radius:50%; transform:rotateX(67deg) rotateZ(-17deg); }
.enterprise-orbit .orbital:nth-child(2) { width:260px; transform:rotateX(67deg) rotateZ(43deg); border-color:rgba(92,103,149,.34); }
.enterprise-orbit .orbital:nth-child(3) { width:185px; transform:rotateX(67deg) rotateZ(103deg); border-color:rgba(65,192,242,.75); }
.enterprise-core { position:relative; z-index:2; width:120px; aspect-ratio:1; display:grid; place-items:center; border-radius:28px; color:#fff; font-weight:700; text-align:center; line-height:1.2; letter-spacing:-.02em; background:linear-gradient(145deg, var(--d-sky), var(--d-electric) 56%, var(--d-midnight)); transform:rotateX(13deg) rotateY(-21deg); box-shadow:26px 31px 42px rgba(8,66,140,.27), inset 1px 1px 1px rgba(255,255,255,.55); animation:d-core 8s ease-in-out infinite; }
.enterprise-core::before { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.36); border-radius:20px; }
.enterprise-orbit .signal { position:absolute; z-index:3; width:18px; aspect-ratio:1; border-radius:50%; background:var(--d-sky); box-shadow:0 0 0 7px rgba(65,192,242,.16), 0 6px 15px rgba(8,66,140,.22); animation:d-signal 5s ease-in-out infinite; }
.enterprise-orbit .signal.one { transform:translate(-143px,-55px); }
.enterprise-orbit .signal.two { background:var(--d-indigo); transform:translate(145px,31px); animation-delay:-1.8s; }
.enterprise-orbit .signal.three { background:var(--d-electric); transform:translate(-45px,88px); animation-delay:-3.1s; }
@keyframes d-core { 50% { transform:rotateX(17deg) rotateY(-10deg) translateY(-12px); } }
@keyframes d-signal { 50% { filter:brightness(1.15); scale:1.18; } }

.dmock-stage { perspective: 1600px; }
.dmock { border-color: rgba(11,79,217,.17); box-shadow: 0 25px 60px rgba(8,66,140,.14), 0 4px 14px rgba(8,66,140,.08); }
.dmock-bar { background: linear-gradient(90deg, var(--d-midnight), var(--d-ocean)); }
.dmock-k > div { border-color: var(--d-line); }
.dmock-k q { color: var(--d-midnight); }
.dmock-k q.hot { color: var(--d-indigo); }
.dmock-side b.on { color: var(--d-electric); background: var(--d-ice); box-shadow: inset 3px 0 0 var(--d-electric); }
.card, .cat, .pcard, .door, .dvs-col, .dnum, .dflow-step, .specrow, .pdoor, .pl-card, .cp-seg > div { border-color: var(--d-line); }
.card:hover, .cat:hover, .specrow:hover, .pdoor:hover, .pl-card:hover { border-color: var(--d-sky); box-shadow: 0 16px 38px rgba(8,66,140,.1); }
.dflow-step.is-key, .dvs-col.is-good, .dmatrix .us { background: var(--d-ice); border-color: #b5e9fa; }
.wall-yes, .cp-yes { background: linear-gradient(145deg, #fff, var(--d-ice)) !important; }
.wall-no, .cp-no { background: linear-gradient(145deg, #fff, #f5f5fb) !important; }

@media (max-width: 720px) {
  .hx::before, .pl-hero::before, .cp-hero::before, .co-hero::before { width:230px; height:230px; right:-105px; top:118px; }
  .hx::after, .pl-hero::after, .cp-hero::after, .co-hero::after { display:none; }
  .enterprise-orbit { height:210px; margin-inline:auto; }
  .enterprise-orbit .orbital { width:270px; }
  .enterprise-orbit .orbital:nth-child(2) { width:210px; }
  .enterprise-orbit .orbital:nth-child(3) { width:145px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx::before, .hx::after, .pl-hero::before, .pl-hero::after, .cp-hero::before, .cp-hero::after, .co-hero::before, .co-hero::after, .enterprise-core, .enterprise-orbit .signal { animation:none; }
}

/* ── Enterprise story blocks: a diagram carries the argument before copy. ── */
.hx h1, .pl-hero h1, .cp-hero h1, .co-hero h1 {
  font-family: var(--font-body); font-weight: 700; letter-spacing: -.047em;
}
.enterprise-band { position:relative; overflow:hidden; padding:clamp(68px,9vw,116px) 0; background:linear-gradient(130deg, #063779, var(--d-midnight) 54%, #0a3e76); color:#fff; }
.enterprise-band::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(rgba(65,192,242,.22) 1px, transparent 1px),linear-gradient(90deg, rgba(65,192,242,.22) 1px, transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg, transparent, #000 18%, #000 80%, transparent); }
.enterprise-band .wrap { position:relative; }
.eb-kicker { margin:0 0 12px; color:var(--d-sky); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.eb-title { max-width:17ch; margin:0; color:#fff; font-family:var(--font-body); font-size:clamp(30px,4vw,52px); font-weight:700; letter-spacing:-.045em; line-height:1.04; }
.eb-lead { max-width:59ch; margin:18px 0 0; color:#cce9fb; font-size:17px; line-height:1.65; }
.enterprise-map { position:relative; display:grid; gap:14px; max-width:1030px; margin:48px auto 0; padding:20px; grid-template-columns:repeat(3,1fr); align-items:center; }
.enterprise-map::before { content:""; position:absolute; left:16%; right:16%; top:50%; height:1px; background:linear-gradient(90deg, transparent, rgba(65,192,242,.86) 20%, rgba(65,192,242,.86) 80%, transparent); box-shadow:0 0 18px rgba(65,192,242,.5); }
.em-node { position:relative; z-index:1; min-height:170px; padding:25px; border:1px solid rgba(177,225,255,.26); border-radius:18px; background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); box-shadow:0 24px 35px rgba(0,16,48,.16), inset 0 1px rgba(255,255,255,.2); backdrop-filter:blur(13px); transform:perspective(700px) rotateX(3deg); transition:transform .24s ease, border-color .24s ease; }
.em-node:hover { border-color:rgba(65,192,242,.85); transform:perspective(700px) rotateX(0) translateY(-8px); }
.em-num { display:block; color:var(--d-sky); font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; }
.em-node b { display:block; margin-top:24px; color:#fff; font-size:18px; letter-spacing:-.02em; }
.em-node p { margin:7px 0 0; color:#cce9fb; font-size:14px; line-height:1.55; }
.outcome-strip { display:grid; gap:1px; margin:0 auto; max-width:1120px; border:1px solid var(--d-line); border-radius:18px; overflow:hidden; background:var(--d-line); grid-template-columns:repeat(3,1fr); }
.outcome-strip > div { padding:25px 28px; background:#fff; }
.outcome-strip b { display:block; color:var(--d-midnight); font-family:var(--font-body); font-size:15px; font-weight:700; }
.outcome-strip span { display:block; margin-top:6px; color:var(--d-muted); font-size:14px; line-height:1.5; }
.outcome-strip i { display:block; width:28px; height:3px; margin-bottom:17px; border-radius:3px; background:linear-gradient(90deg,var(--d-electric),var(--d-sky)); }
.executive-brief { position:relative; isolation:isolate; padding:54px 0; background:linear-gradient(135deg,#fff,var(--d-ice)); overflow:hidden; }
.executive-brief::before { content:""; position:absolute; z-index:-1; width:360px; height:360px; right:-170px; top:-140px; border-radius:42% 58% 63% 37% / 40% 45% 55% 60%; background:linear-gradient(135deg, rgba(65,192,242,.37), rgba(11,79,217,.08)); transform:rotate(28deg); }
.executive-brief .wrap { display:flex; gap:28px; align-items:center; justify-content:space-between; }
.executive-brief h2 { max-width:16ch; margin:0; font-family:var(--font-body); font-size:clamp(25px,3vw,37px); font-weight:700; letter-spacing:-.04em; }
.executive-brief p { max-width:49ch; margin:10px 0 0; color:var(--d-muted); }
.executive-brief .btn { flex:0 0 auto; }
.trust-ribbon { padding:0 0 52px; background:var(--d-ice); }
.trust-ribbon .wrap { padding-top:0; }
.trust-card { display:grid; gap:1px; overflow:hidden; border:1px solid #bfeafa; border-radius:18px; background:#bfeafa; grid-template-columns:1.25fr 1fr 1fr; box-shadow:0 18px 42px rgba(8,66,140,.1); }
.trust-card > div { padding:23px 26px; background:rgba(255,255,255,.9); }
.trust-card > div:first-child { background:linear-gradient(135deg,var(--d-midnight),var(--d-ocean)); }
.trust-card p { margin:0; color:var(--d-muted); font-size:14px; line-height:1.52; }
.trust-card p:first-child { color:#d8f5ff; }
.trust-card b { display:block; margin-bottom:5px; color:var(--d-midnight); font-size:16px; }
.trust-card > div:first-child b { color:#fff; }
.trust-card span { display:block; color:var(--d-sky); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width: 760px) {
  .enterprise-map, .outcome-strip, .trust-card { grid-template-columns:1fr; }
  .enterprise-map::before { top:10%; bottom:10%; left:50%; right:auto; width:1px; height:auto; }
  .em-node { min-height:0; }
  .enterprise-band { padding:68px 0; }
  .executive-brief .wrap { align-items:flex-start; flex-direction:column; }
}

/* Procurement pages need a clear, factual next step — not a wall of badges. */
.procurement-brief { padding:54px 0; background:linear-gradient(135deg, var(--d-midnight), var(--d-ocean)); }
.procurement-brief .wrap { display:grid; gap:28px; align-items:center; grid-template-columns:1.05fr 1fr; }
.procurement-brief h2 { margin:0; color:#fff; font-family:var(--font-body); font-size:clamp(27px,3.2vw,40px); line-height:1.08; letter-spacing:-.04em; }
.procurement-brief p { margin:13px 0 0; color:#d8f1ff; max-width:51ch; }
.procurement-list { display:grid; gap:9px; }
.procurement-list div { padding:15px 17px 15px 44px; position:relative; border:1px solid rgba(176,228,255,.26); border-radius:12px; background:rgba(255,255,255,.08); color:#fff; font-size:14px; line-height:1.45; }
.procurement-list div::before { content:""; position:absolute; left:18px; top:21px; width:9px; height:5px; border-left:2px solid var(--d-sky); border-bottom:2px solid var(--d-sky); transform:rotate(-45deg); }
.procurement-list b { display:block; color:#fff; font-size:14px; }
.procurement-list span { display:block; margin-top:3px; color:#cfeeff; font-size:13px; }
.tour-callout { display:flex; gap:18px; align-items:center; margin:30px 0 0; padding:17px 19px; border:1px solid #bfeafa; border-radius:14px; background:linear-gradient(130deg,#fff,var(--d-ice)); }
.tour-callout b { color:var(--d-midnight); font-size:14px; }
.tour-callout span { color:var(--d-muted); font-size:13.5px; line-height:1.48; }
.tour-callout i { flex:0 0 auto; display:grid; width:32px; height:32px; place-items:center; border-radius:10px; background:linear-gradient(135deg,var(--d-electric),var(--d-sky)); color:#fff; font-style:normal; font-weight:700; }
@media (max-width: 760px) { .procurement-brief .wrap { grid-template-columns:1fr; } }
@media (max-width: 480px) {
  .enterprise-orbit { transform:scale(.88); transform-origin:center top; margin-bottom:-24px; }
  .enterprise-map { padding:0; }
  .em-node { padding:21px; }
  .trust-card > div, .outcome-strip > div { padding:21px; }
  .tour-callout { align-items:flex-start; flex-direction:column; gap:11px; }
}