/* ==========================================================================
   Syentrix — Behavioral Health RCM
   Design system: "The Record"

   The page is built as a clinical record — a sheet with a header block, a field
   grid, itemised lines and a status stamp. The structure is not decoration: it
   is the container the AEO content actually needs (tables, answer blocks,
   question-shaped sections), and it proves domain fluency before a word is read
   — which matters while there is still no case study to point at.

   Palette is clinical teal rather than legacy-EHR blue, and spacing is
   deliberately generous: the concept's own risk is "looks like the software they
   already resent", and density is what would tip it there.
   Light-only. Every text pair verified against WCAG AA.
   ========================================================================== */

:root {
  --paper:      #f2f6f7;
  --surface:    #ffffff;
  --surface-2:  #e7eef0;
  --tint:       #f8fbfb;
  --ink:        #0c1a1e;
  --ink-2:      #34474e;
  --muted:      #55686f;
  --rule:       #dce6e9;
  --rule-strong:#b4c5cb;

  --accent:      #0a6459;
  --accent-deep: #074a42;
  --accent-bright:#0d8a7c;
  --accent-soft: #e2f1ee;
  --accent-line: #5f9c93;

  --signal:      #a83a33;
  --signal-soft: #fbeceb;
  --signal-line: #d9a9a4;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r:    6px;          /* chart-sheet corners: crisp, not pill-soft */
  --r-sm: 4px;
  --sh-1: 0 1px 2px rgba(12,26,30,.05);
  --sh-2: 0 1px 3px rgba(12,26,30,.07), 0 8px 24px rgba(12,26,30,.06);

  --wrap: 1180px;
  --measure: 68ch;

  /* Horizontal inset for every block inside a record sheet. One value so the tabs,
     head, field cells, note and actions cannot drift out of alignment again. */
  --rec-pad: 2.2rem;
}
:root { color-scheme: light; }

*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px }
.measure { max-width:var(--measure) }

/* ---------- type ---------- */
h1,h2,h3,h4 { margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.022em; line-height:1.14 }
h1 { font-family:var(--serif); font-size:clamp(2.1rem,4.6vw,3.3rem); margin-bottom:.7rem; letter-spacing:-.03em }
h2 { font-family:var(--serif); font-size:clamp(1.6rem,3.1vw,2.3rem); margin-bottom:.65rem; letter-spacing:-.026em }
h3 { font-size:1.14rem; margin-bottom:.42rem }
h4 { font-size:1rem; margin-bottom:.34rem }
p { margin:0 0 1.1rem }
a { color:var(--accent-deep); text-underline-offset:3px }
a:hover { color:var(--accent-bright) }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px }
ul,ol { margin:0 0 1.1rem; padding-left:1.2rem }
li { margin-bottom:.45rem }
li::marker { color:var(--accent-line) }
strong { font-weight:600 }

.eyebrow {
  display:inline-block; font-family:var(--mono); font-size:.71rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 .85rem;
}
.lead, .sub { font-size:1.18rem; line-height:1.55; color:var(--ink-2); max-width:58ch }
.note { font-size:.85rem; color:var(--muted); line-height:1.55 }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

/* ---------- header ---------- */
.skip { position:absolute; left:-9999px; background:var(--accent); color:#fff; padding:.7rem 1.1rem; z-index:300 }
.skip:focus { left:10px; top:10px }

.site-head { position:sticky; top:0; z-index:100; background:var(--accent-deep); color:#fff }
.head-in { display:flex; align-items:center; gap:2rem; max-width:var(--wrap); margin:0 auto; padding:12px 28px }
.brand { display:flex; flex-direction:column; text-decoration:none; color:#fff; white-space:nowrap }
.brand b { font-family:var(--serif); font-size:1.28rem; font-weight:600; letter-spacing:-.02em }
.brand b span { color:#7fd8c9 }
.brand small { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:-1px }
.site-nav { display:flex; align-items:center; gap:1.45rem; margin-left:auto }
.site-nav a { font-size:.9rem; font-weight:500; color:rgba(255,255,255,.88); text-decoration:none }
.site-nav a:hover { color:#fff }
.site-nav a[aria-current="page"] { color:#fff; font-weight:600; box-shadow:inset 0 -2px 0 #7fd8c9 }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.93rem; font-weight:600; text-decoration:none;
  padding:.66rem 1.25rem; border-radius:var(--r); border:1.5px solid var(--accent);
  background:var(--accent); color:#fff; transition:background .16s ease, border-color .16s ease;
}
.btn:hover { background:var(--accent-deep); border-color:var(--accent-deep); color:#fff }
.site-nav a.btn { background:#fff; border-color:#fff; color:var(--accent-deep); padding:.42rem 1rem; font-size:.86rem }
.site-nav a.btn:hover { background:#dff2ee; border-color:#dff2ee; color:var(--accent-deep) }
.btn-ghost { background:transparent; color:var(--accent-deep); border-color:var(--rule-strong) }
.btn-ghost:hover { background:var(--surface); border-color:var(--accent); color:var(--accent-deep) }
.btn-lg { font-size:1rem; padding:.82rem 1.6rem }
.btn-white { background:#fff; border-color:#fff; color:var(--accent-deep) }
.btn-white:hover { background:#dff2ee; border-color:#dff2ee; color:var(--accent-deep) }
.btn svg { width:16px; height:16px; flex:none }

/* ==========================================================================
   THE RECORD — the hero sheet
   ========================================================================== */
.sheet { background:var(--paper); padding:2.2rem 0 3.4rem; border-bottom:1px solid var(--rule) }
.record { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--sh-2); overflow:hidden }

/* tabs are real in-page navigation, not chrome for its own sake */
.rec-tabs { display:flex; gap:2px; padding:0 calc(var(--rec-pad) - 1rem); background:var(--surface-2); border-bottom:1px solid var(--rule); overflow-x:auto; scrollbar-width:none }
.rec-tabs::-webkit-scrollbar { display:none }
.rec-tabs a {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:.72rem 1rem; white-space:nowrap; border-bottom:2px solid transparent;
}
.rec-tabs a:hover { color:var(--accent-deep); background:var(--tint) }
.rec-tabs a.on { color:var(--accent-deep); background:var(--surface); border-bottom-color:var(--accent); font-weight:500 }

.rec-head { padding:2.4rem var(--rec-pad) 2rem; border-bottom:2px solid var(--accent); display:flex; gap:2rem; justify-content:space-between; align-items:flex-start }
.rec-head > div { min-width:0 }
.rec-head h1 { max-width:20ch }
.rec-head .sub { margin-bottom:0 }
.stamp {
  flex:none; border:2px solid var(--signal); color:var(--signal); border-radius:var(--r-sm);
  padding:.5rem .8rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; transform:rotate(-2.5deg); text-align:center; line-height:1.35;
}
.stamp b { display:block; font-size:1.05rem; letter-spacing:.02em }
.stamp.ok { border-color:var(--accent); color:var(--accent-deep) }

.fields { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--rule) }
.fields > div { padding:1.35rem var(--rec-pad); border-right:1px solid var(--rule) }
.fields > div:last-child { border-right:0 }
.fields .k { font-family:var(--mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:.45rem }
.fields .v { font-family:var(--serif); font-size:1.95rem; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums }
.fields .v.bad { color:var(--signal) }
.fields .cite { display:block; font-size:.7rem; color:var(--muted); margin-top:.5rem; line-height:1.35 }

.rec-note { padding:1.6rem var(--rec-pad) 1.7rem; background:var(--tint) }
.rec-note .tag { display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.55rem }
.rec-note p { margin:0; font-size:1.03rem; line-height:1.6; max-width:74ch }
.rec-actions { padding:1.4rem var(--rec-pad) 1.7rem; display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; border-top:1px solid var(--rule) }
.rec-meta { display:flex; flex-wrap:wrap; gap:1.3rem; margin-left:auto; font-size:.83rem; color:var(--muted) }
.rec-meta span { display:inline-flex; align-items:center; gap:.4rem }
.rec-meta svg { width:15px; height:15px; color:var(--accent); flex:none }

.lines { border-top:1px solid var(--rule) }
.lines .ln { display:flex; gap:1.1rem; align-items:baseline; padding:.85rem 2.2rem; border-bottom:1px solid var(--rule); font-size:.94rem }
.lines .ln:last-child { border-bottom:0 }
.lines .code { font-family:var(--mono); font-size:.82rem; color:var(--accent-deep); flex:none; min-width:4.2rem }
.lines .desc { color:var(--ink-2) }
.lines .amt { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; flex:none }
.lines .amt.bad { color:var(--signal) }

/* ---------- sections ---------- */
section { padding:4.6rem 0; position:relative }
.sec-tint { background:var(--tint); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.sec-surface { background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.sec-head, .section-intro { max-width:64ch; margin-bottom:2.2rem }
.sec-head p, .section-intro p { color:var(--ink-2); font-size:1.05rem; margin-bottom:0 }

/* ---------- claim pipeline (imported from Concept 02) ---------- */
.pipeline { background:var(--accent-deep); border-radius:var(--r); padding:2rem 1.8rem 1.7rem; color:#fff; overflow:hidden }
.pipe-lab { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#8fd6c9; margin-bottom:1.4rem }
.pipe { display:grid; grid-template-columns:repeat(6,1fr); position:relative }
.nd { position:relative; text-align:center }
.nd .dot { width:40px; height:40px; border-radius:50%; margin:0 auto .7rem; display:grid; place-items:center; background:rgba(127,214,201,.16); border:1.5px solid rgba(127,214,201,.55); color:#7fd8c9; font-size:.8rem; font-weight:700 }
.nd.deny .dot { background:rgba(224,140,132,.2); border-color:#e08c84; color:#ffc9c3 }
.nd.win .dot { background:#7fd8c9; border-color:#7fd8c9; color:var(--accent-deep) }
.nd::after { content:""; position:absolute; top:20px; left:calc(50% + 25px); right:calc(-50% + 25px); height:1.5px; background:linear-gradient(90deg,rgba(127,214,201,.55),rgba(127,214,201,.2)) }
.nd:last-child::after { display:none }
.nd b { display:block; font-size:.78rem; margin-bottom:.15rem }
.nd small { display:block; font-size:.7rem; color:#a9d5cd; line-height:1.35 }
@keyframes pipeTravel { 0%{left:0;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0} }
@keyframes pipePulse  { 0%{box-shadow:0 0 0 0 rgba(224,140,132,.5)} 70%{box-shadow:0 0 0 14px rgba(224,140,132,0)} 100%{box-shadow:0 0 0 0 rgba(224,140,132,0)} }
.pipe::after { content:""; position:absolute; top:19px; width:9px; height:9px; border-radius:50%; background:#7fd8c9; box-shadow:0 0 14px 4px rgba(127,214,201,.7); animation:pipeTravel 4.6s ease-in-out infinite }
.nd.deny .dot { animation:pipePulse 2.2s ease-out infinite }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; margin:0 0 1.8rem }
.stat { background:var(--surface); padding:1.4rem 1.5rem 1.5rem }
.stat .v { display:block; font-family:var(--serif); font-size:2.3rem; font-weight:600; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums }
.stat .v.loss { color:var(--signal) }
.stat .l { display:block; font-size:.9rem; color:var(--ink-2); margin-top:.55rem; line-height:1.4 }
.stat cite { display:block; font-style:normal; font-size:.71rem; color:var(--muted); margin-top:.65rem; padding-top:.55rem; border-top:1px solid var(--rule) }

/* ---------- waterfall ---------- */
.waterfall { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:1.8rem }
.wf-row { display:grid; grid-template-columns:190px 1fr; gap:1.1rem; align-items:center; margin-bottom:1rem }
.wf-lab b { display:block; font-size:.94rem; font-weight:600 }
.wf-lab small { display:block; font-size:.79rem; color:var(--muted); line-height:1.35 }
.wf-bar { height:38px; border-radius:var(--r-sm); display:flex; align-items:center; padding:0 .9rem; font-family:var(--mono); font-size:.84rem; font-variant-numeric:tabular-nums; color:#fff }
.wf-billed { background:var(--accent) }
.wf-denied { background:#b8564a }
.wf-lost   { background:var(--signal) }
.wf-note { margin:1.5rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule); font-size:.94rem; color:var(--ink-2) }

/* ---------- flow ---------- */
.flow { display:grid; grid-template-columns:repeat(7,1fr); gap:.7rem }
.flow-step { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:1.1rem 1rem 1.15rem }
.flow-step.leak { border-color:var(--signal-line); background:var(--signal-soft) }
.flow-n { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-deep); font-family:var(--mono); font-size:.72rem; margin-bottom:.65rem }
.flow-step.leak .flow-n { background:#fff; color:var(--signal) }
.flow-step h4 { font-size:.89rem; margin-bottom:.28rem }
.flow-step p { font-size:.77rem; color:var(--muted); margin:0; line-height:1.4 }
.flow-tag { display:inline-block; margin-top:.65rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--signal) }
.flow-legend { display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1.3rem; font-size:.83rem; color:var(--muted) }
.flow-legend i { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:.45rem; vertical-align:-1px }

/* ---------- cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1.1rem }
.cards-4 { grid-template-columns:repeat(4,1fr) }
.cards-3 { grid-template-columns:repeat(3,1fr) }
.card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:1.5rem 1.45rem 1.55rem; transition:border-color .16s ease }
.card:hover { border-color:var(--accent-line) }
.card .ico { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-deep); margin-bottom:.95rem }
.card .ico svg { width:19px; height:19px }
.card .num { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--accent-deep); margin-bottom:.55rem }
.card p { font-size:.94rem; color:var(--ink-2); margin-bottom:0 }
.card h3 a { text-decoration:none; color:var(--ink) }
.card h3 a:hover { color:var(--accent-deep) }
.card-link { display:inline-flex; align-items:center; gap:.35rem; margin-top:.85rem; font-size:.87rem; font-weight:600; text-decoration:none }
.card-link svg { width:14px; height:14px }

.pcards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem }
.pcard { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column }
.pcard .shot { aspect-ratio:4/3; position:relative }
.pcard .shot .photo { position:absolute; inset:0; border-radius:0 }
.pcard .body { padding:1.3rem 1.35rem 1.4rem }
.pcard p { font-size:.92rem; color:var(--ink-2); margin-bottom:.85rem }

/* ---------- photo slots ---------- */
.photo {
  position:relative; display:block; width:100%; height:100%;
  object-fit:cover; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(150deg,#e6eef0,#dae6e9 50%,#cddcdf);
}
.photo:not(img)::before {
  content:""; position:absolute; inset:0; opacity:.55;
  background-image:linear-gradient(rgba(90,115,122,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(90,115,122,.10) 1px,transparent 1px);
  background-size:26px 26px;
}
.photo:not(img)::after {
  content:"◎  " attr(data-shot);
  position:absolute; left:12px; right:12px; bottom:12px;
  font-family:var(--mono); font-size:.66rem; line-height:1.45; color:var(--muted);
  background:rgba(255,255,255,.88); border:1px solid var(--rule-strong); border-radius:var(--r-sm); padding:.45rem .6rem;
}

/* Until real photography exists, collapse the empty frames instead of publishing grey
   panels. Each slot reappears on its own the moment its placeholder div is replaced by
   a real <img class="photo">, so the layout is waiting rather than removed. */
.shot:not(:has(img)), .face:not(:has(img)) { display:none }
/* ...and a two-up split whose image half is hidden must close to one column, or the
   copy is stranded at half width beside an empty cell. */
.split:has(.shot:not(:has(img))) { grid-template-columns:1fr }
.split:has(.shot:not(:has(img))) > * { max-width:var(--measure) }

/* ==========================================================================
   EXPLANATORY PANELS
   These replaced the stock-photography slots. A practice manager gets more from
   an authorization burn-down or a payer-hours window than from a therapy-room
   photo, and unlike photography they can be verified against the copy beside them.
   Built from the existing .waterfall / .lines primitives; no images, no script.
   ========================================================================== */
.viz-cap { margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--rule); font-size:.79rem; color:var(--muted); line-height:1.45 }
.viz-h { display:flex; align-items:baseline; gap:.6rem; margin:0 0 1.2rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.viz-h b { font-family:var(--sans); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--ink); font-weight:600 }

/* Narrow bar rows for the burn-down. The value sits beside the bar rather than inside
   it: a short bar cannot hold its own label, and padding one out to fit would misstate
   the proportion the chart exists to show. */
.viz .wf-row { grid-template-columns:132px 1fr; margin-bottom:.7rem }
.wf-meter { display:flex; align-items:center; gap:.65rem }
.wf-meter .wf-bar { height:30px; padding:0; min-width:3px }
.wf-meter .val { font-family:var(--mono); font-size:.83rem; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap }
.wf-risk { background:var(--signal) }

/* .lines carries the record sheet's 2.2rem gutter; inside a panel it supplies its own */
.viz .lines { border-top:0 }
.viz .lines .ln { padding-left:0; padding-right:0 }
.viz .lines .ln:first-child { padding-top:0 }

/* two-lane separation diagram (HIPAA vs 42 CFR Part 2) */
.lanes { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden }
.lane { background:var(--surface); padding:1.15rem 1.2rem }
.lane.part2 { background:var(--signal-soft) }
.lane h4 { font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.6rem }
.lane.part2 h4 { color:var(--signal) }
.lane ul { margin:0; padding-left:1.05rem; font-size:.87rem; color:var(--ink-2) }
.lane li { margin-bottom:.3rem }

/* code / scope strip that replaced the photo at the head of each practice card */
.cardtags { display:flex; flex-wrap:wrap; gap:.35rem; padding:1rem 1.35rem; background:var(--tint); border-bottom:1px solid var(--rule) }
.cardtags span { font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--accent-deep); background:var(--accent-soft); border-radius:var(--r-sm); padding:.28rem .5rem }

@media (max-width:560px){
  .lanes { grid-template-columns:1fr }
  .viz .wf-row { grid-template-columns:1fr; gap:.35rem }
}

/* ---------- split ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center }
.split.flip > *:first-child { order:2 }
.split .shot { aspect-ratio:5/4; border-radius:var(--r); overflow:hidden; position:relative; border:1px solid var(--rule) }
.split .shot .photo { position:absolute; inset:0; border-radius:0 }

/* ---------- tables ---------- */
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r) }
table { border-collapse:collapse; width:100%; font-size:.93rem; font-variant-numeric:tabular-nums }
caption { text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); padding:1.1rem 1.4rem .3rem }
th,td { text-align:left; padding:.88rem 1.4rem; border-bottom:1px solid var(--rule); vertical-align:top }
thead th { font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface-2) }
tbody th { font-weight:600 }
tbody tr:last-child th, tbody tr:last-child td { border-bottom:0 }
tbody tr:hover td, tbody tr:hover th { background:var(--tint) }
tr.hi th, tr.hi td { background:var(--accent-soft) }
tr.hi:hover th, tr.hi:hover td { background:var(--accent-soft) }
td.num, th.num { text-align:right }
.tscroll::after { content:"Scroll table →"; display:none; font-size:.73rem; color:var(--muted); padding:.5rem 1.4rem .75rem }
.tscroll table { min-width:34rem }

/* ---------- callout ---------- */
.callout { background:var(--signal-soft); border:1px solid var(--signal-line); border-left:3px solid var(--signal); border-radius:var(--r); padding:1.3rem 1.5rem; max-width:80ch }
.callout h4 { display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--signal); margin-bottom:.55rem }
.callout h4 svg { width:15px; height:15px; flex:none }
.callout p:last-child { margin-bottom:0 }
.callout.neutral { background:var(--surface-2); border-color:var(--rule-strong); border-left-color:var(--accent) }
.callout.neutral h4 { color:var(--muted) }

/* ---------- FAQ ---------- */
.faq { display:flex; flex-direction:column; gap:.6rem; max-width:82ch }
.faq details { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden }
.faq details[open] { border-color:var(--accent-line) }
.faq summary { cursor:pointer; list-style:none; padding:1.1rem 1.4rem; font-family:var(--serif); font-size:1.1rem; font-weight:600; letter-spacing:-.015em; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:""; flex:none; width:10px; height:10px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg) translateY(-2px); transition:transform .2s ease }
.faq details[open] summary::after { transform:rotate(225deg) translateY(-2px) }
.faq .a { padding:0 1.4rem 1.25rem; max-width:var(--measure) }
.faq .a p:last-child { margin-bottom:0 }

/* ---------- chips / trustbar ---------- */
.chips { display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:1rem 0 1.3rem; padding:0 }
.chips li { margin:0 }
.chips span { display:inline-block; font-family:var(--mono); font-size:.76rem; padding:.35rem .7rem; border:1px solid var(--rule-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink-2) }

.trustbar { background:var(--surface); border-bottom:1px solid var(--rule); padding:1.3rem 0 }
.trustbar-in { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:center }
.trustbar span.lab { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.trustbar ul { display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; margin:0; padding:0 }
.trustbar li { margin:0 }
.trustbar li span { display:inline-block; font-size:.82rem; color:var(--ink-2); padding:.35rem .75rem; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--paper) }

/* ---------- stat band ----------
   The markup shipped without these rules when the stylesheet moved from the gold
   palette to The Record, so the four figures rendered as an unstyled single column. */
.statband { background:var(--accent-deep); color:#fff; padding:2.6rem 0 }
.statband .row { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem }
.statband .s b {
  display:block; font-family:var(--serif); font-size:2.1rem; font-weight:600;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.statband .s b.loss { color:#f0b3a6 }
.statband .s span { display:block; font-size:.87rem; color:rgba(255,255,255,.78); margin-top:.6rem; line-height:1.4 }
@media (max-width:860px){ .statband .row { grid-template-columns:repeat(2,1fr); gap:1.7rem } }
@media (max-width:460px){ .statband .row { grid-template-columns:1fr; gap:1.35rem } }

/* ---------- testimonial ---------- */
.quote { display:grid; grid-template-columns:104px 1fr; gap:1.6rem; align-items:start; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r); padding:1.9rem 2rem }
.quote .face { width:104px; height:104px; border-radius:var(--r); overflow:hidden; position:relative }
.quote .face .photo:not(img)::after { display:none }
.quote blockquote { margin:0; font-family:var(--serif); font-size:1.28rem; line-height:1.44; letter-spacing:-.015em }
.quote figcaption { margin-top:.95rem; font-size:.89rem; color:var(--muted) }
.quote figcaption b { display:block; color:var(--ink); font-weight:600 }

/* ---------- CTA ---------- */
.cta { background:var(--accent-deep); color:#fff; border:0 }
.cta h2 { color:#fff }
.cta p { color:rgba(255,255,255,.92); max-width:64ch; font-size:1.04rem }
.cta .eyebrow { color:#7fd8c9 }
.cta-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem }
.cta-points { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.9rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.24) }
.cta-points div { display:flex; align-items:center; gap:.5rem; font-size:.87rem; color:rgba(255,255,255,.92) }
.cta-points svg { width:16px; height:16px; flex:none; color:#7fd8c9 }

/* ---------- footer ---------- */
.site-foot { background:var(--surface); border-top:1px solid var(--rule); padding:3.2rem 0 2.8rem; font-size:.89rem; color:var(--muted) }
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:2.2rem; margin-bottom:2.2rem }
.foot-grid h4 { font-family:var(--mono); font-size:.67rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.85rem }
.foot-grid ul { list-style:none; padding:0; margin:0 }
.foot-grid li { margin-bottom:.48rem }
.foot-grid a { color:var(--muted); text-decoration:none }
.foot-grid a:hover { color:var(--accent-deep) }
.foot-legal { border-top:1px solid var(--rule); padding-top:1.4rem; font-size:.81rem; line-height:1.6 }
.updated { font-family:var(--mono); font-size:.72rem; color:var(--muted) }

.crumb { font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted); margin:0 0 1rem }
.crumb a { color:var(--muted); text-decoration:none }
.crumb a:hover { color:var(--accent-deep) }
.reveal { opacity:1; transform:none }

/* ==========================================================================
   Responsive
   ========================================================================== */
:target, section[id] { scroll-margin-top:5rem }

@media (max-width:1080px){ .flow { grid-template-columns:repeat(4,1fr); gap:.85rem } }
@media (max-width:1000px){
  .cards-4, .cards-3, .pcards { grid-template-columns:repeat(2,1fr) }
  .split { grid-template-columns:1fr; gap:1.8rem }
  .split.flip > *:first-child { order:0 }
}
@media (max-width:900px){
  .rec-head { flex-direction:column; gap:1.4rem }
  .stamp { align-self:flex-start; transform:rotate(-2deg) }
  .fields { grid-template-columns:repeat(2,1fr) }
  .fields > div:nth-child(2n) { border-right:0 }
  .fields > div:nth-child(-n+2) { border-bottom:1px solid var(--rule) }
  .pipe { grid-template-columns:repeat(3,1fr); row-gap:1.4rem }
  .nd::after, .pipe::after { display:none }
}
@media (max-width:860px){
  .site-head { position:static }
  :target, section[id] { scroll-margin-top:1rem }
  .head-in { flex-wrap:wrap; gap:.7rem 1rem; padding:11px 20px }
  .site-nav { margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:1.15rem; scrollbar-width:none; padding-bottom:2px;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent 100%); mask-image:linear-gradient(to right,#000 88%,transparent 100%) }
  .site-nav::-webkit-scrollbar { display:none }
  .site-nav a { white-space:nowrap; font-size:.88rem }
  section { padding:3.2rem 0 }
  .sheet { padding:1.6rem 0 2.6rem }
  .wf-row { grid-template-columns:150px 1fr }
}
@media (max-width:720px){ .flow { grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){
  .cards-4,.cards-3,.pcards { grid-template-columns:1fr }
  .quote { grid-template-columns:1fr; gap:1.1rem }
}
@media (max-width:560px){
  body { font-size:16.5px }
  .wrap { padding:0 16px }
  .head-in { padding:10px 16px }
  h1 { font-size:clamp(1.8rem,7.6vw,2.35rem) }
  h2 { font-size:clamp(1.42rem,6vw,1.8rem) }
  .lead,.sub { font-size:1.06rem }
  .sheet { --rec-pad:1.2rem }
  .rec-head { padding:1.6rem var(--rec-pad) 1.4rem }
  .lines .ln { padding-left:1.2rem; padding-right:1.2rem; flex-wrap:wrap }
  .fields > div { padding:1.1rem var(--rec-pad) }
  .fields .v { font-size:1.7rem }
  .stat { padding:1.2rem 1.15rem }
  .stat .v { font-size:2rem }
  .card,.waterfall,.callout,.quote { padding:1.2rem 1.15rem }
  .rec-actions,.cta-actions { flex-direction:column; align-items:stretch }
  .rec-actions .btn,.cta-actions .btn { width:100%; text-align:center }
  .rec-meta { margin-left:0 }
  .wf-row { grid-template-columns:1fr; gap:.45rem }
  .tscroll::after { display:block }
  th,td { padding:.75rem 1rem }
  .faq summary { font-size:1.02rem; padding:1rem 1.1rem }
  .faq .a { padding:0 1.1rem 1.05rem }
  section { padding:2.6rem 0 }
}
@media (max-width:420px){ .flow { grid-template-columns:1fr } }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
  .pipe::after, .nd.deny .dot { animation:none !important }
}

/* ---------- brand lockup ----------
   The mark is an infinity loop — the symbol the autistic community adopted in
   place of the puzzle piece — and simultaneously a picture of the revenue cycle.
   The red dot sits at the crossover: the denial, the point the cycle stops. */
.brand { flex-direction:row; align-items:center; gap:.62rem }
.brand-mark { width:44px; height:24px; flex:none }
.brand-text { display:flex; flex-direction:column; min-width:0 }
@media (max-width:560px){ .brand-mark { width:38px; height:21px } }