/* /clinics — the clinic landing page. Built on site.css (nav, buttons, pills, footer); every colour and type size is a
   theme.css token through site.css's aliases. The receipt is the page's quiet idea: line items, a double rule, a total. */

.cl-in{max-width:1380px;margin:0 auto;padding:0 32px;width:100%}
.cl-band{padding:104px 0}
#how{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cl-close{background:var(--surface);border-top:1px solid var(--line)}
.cl-head{max-width:760px;margin-bottom:56px}
.cl-sub{margin-top:14px;font-size:var(--text-lead);line-height:1.55;color:var(--ink-soft);max-width:40em}
.amt,.pamt b,.tally dd,.run-total strong,.run-file-what span{font-variant-numeric:tabular-nums}

/* ===== hero ===== */
.cl-hero{padding:88px 0 104px}
.cl-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:88px;align-items:center}
.cl-for{font-size:var(--text-lead);color:var(--ink-soft);margin-bottom:18px}
.cl-h1{font-size:var(--text-hero);font-weight:var(--font-weight-hero);letter-spacing:var(--tracking-hero);line-height:1.06;text-wrap:balance}
.cl-lede{margin-top:22px;font-size:var(--text-lead);line-height:1.6;color:var(--ink-soft);max-width:34em}

/* the clinic-type picker: one segmented control, three radios */
.cl-pick{border:0;margin-top:36px;min-width:0}
.cl-pick legend{font-size:var(--text-small);font-weight:600;color:var(--ink-soft);margin-bottom:10px;padding:0}
.cl-seg{display:inline-flex;padding:3px;gap:2px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
.cl-seg label{position:relative;display:block;cursor:pointer}
.cl-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cl-seg span{display:flex;align-items:center;justify-content:center;height:36px;padding:0 18px;border-radius:4px;font-size:var(--text-body-md);font-weight:400;color:var(--ink-soft);white-space:nowrap}
.cl-seg input:checked+span{background:var(--ground);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line-strong),0 1px 2px rgba(16,19,26,.06)}
.cl-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.cl-cta{display:flex;align-items:center;gap:24px;margin-top:24px;flex-wrap:wrap}
.cl-link{font-size:var(--text-body-md);font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.btn:focus-visible,.cl-link:focus-visible,.wordmark:focus-visible,.foot a:focus-visible,.trust a:focus-visible,.nav .links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== the run: the Report working on a sample export ===== */
.run{border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);box-shadow:var(--shadow-lift);overflow:hidden;min-width:0}
.run-head{display:flex;align-items:baseline;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.run-head b{font-size:var(--text-body-md);font-weight:600}
.run-head>span{font-size:var(--text-small);color:var(--ink-faint)}
.run-file{display:flex;align-items:center;gap:14px;padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--line);min-width:0}
.run-doc{width:20px;height:24px;flex:none;color:var(--ink-faint)}
.run-file-what{flex:1;min-width:0}
.run-file-what b{display:block;font-size:var(--text-body-md);font-weight:600;overflow-wrap:anywhere}
.run-file-what span{font-size:var(--text-small);color:var(--ink-soft)}
.run-file .pill{margin-left:auto}
.run-lines{list-style:none}
.run-lines li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:12px 24px;border-bottom:1px solid var(--line);min-width:0}
.run-lines li:last-child{border-bottom:0}
.run-lines li>div{min-width:0}
.run-lines b{display:block;font-size:var(--text-body-md);font-weight:600}
.run-lines li>div>span{display:block;font-size:var(--text-small);color:var(--ink-soft);overflow-wrap:anywhere}
.run-lines .amt{font-size:var(--text-body-md);color:var(--ink);flex:none}
.run-lines .more b{font-weight:400;color:var(--ink-soft)}
.run-lines .more .amt{color:var(--ink-soft)}
/* the ruled total: a double rule over the due tint */
.run-total{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-top:3px double var(--ink);background:var(--accent-soft);color:var(--accent-ink)}
.run-total b{display:block;font-size:var(--text-body-md);font-weight:600}
.run-total div span{font-size:var(--text-small)}
.run-total strong{font-size:var(--text-headline);font-weight:650;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.cur{font-size:.55em;font-weight:600;letter-spacing:0;margin-right:2px;vertical-align:.18em}
.run-text{padding:18px 24px 20px;border-top:1px solid var(--line)}
.run-to{font-size:var(--text-small);color:var(--ink-faint)}
.run-to span{white-space:nowrap}
.run-sms{margin-top:10px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 6px 18px;font-size:var(--text-body-md);line-height:1.55;overflow-wrap:anywhere}
.run-wait{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.run-wait>span{font-size:var(--text-small);color:var(--ink-faint)}

/* the run's one moment: lines ring up, the total counts, the text arrives (clinics.js adds the classes) */
.run.is-running .run-lines li,.run.is-running .run-text{opacity:0;transform:translateY(6px)}
.run.is-running .run-lines li.on,.run.is-running .run-text.on{opacity:1;transform:none;transition:opacity .28s ease,transform .28s ease}

/* ===== how it works: the flowchart ===== */
.cl-flow{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:center}
.flow-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;align-items:center;position:relative;padding-right:48px}
.fs,.fe{position:relative;background:var(--ground);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0}
.actor{font-size:var(--text-small);font-weight:400;color:var(--ink-faint)}
.fs h3,.fe h3{margin-top:6px;font-size:var(--text-body-md);font-weight:600;line-height:1.35}
.fs p:not(.actor),.fe p:not(.actor){margin-top:6px;font-size:var(--text-small);line-height:1.5;color:var(--ink-soft)}
/* the rail between steps: a line arriving at a dot, the mark's own language */
.fs+.fs::before{content:"";position:absolute;left:-33px;top:50%;width:32px;height:2px;background:var(--line-strong)}
.fs+.fs::after{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-3px;border-radius:50%;background:var(--ink-faint)}
/* step four forks into the patient's three outcomes */
.flow-steps::after{content:"";position:absolute;right:0;top:50%;width:49px;height:2px;background:var(--line-strong)}
.flow-ends{list-style:none;display:grid;grid-auto-rows:1fr;gap:16px;position:relative;padding-left:28px}
.fe::before{content:"";position:absolute;left:-29px;top:50%;width:28px;height:2px;background:var(--line-strong)}
.fe::after{content:"";position:absolute;left:-29px;width:2px;background:var(--line-strong)}
.fe:first-child::after{top:50%;bottom:-17px}
.fe:nth-child(2)::after{top:-17px;bottom:-17px}
.fe:last-child::after{top:-17px;height:calc(50% + 17px)}

/* ===== the one dark band: what a text is, where the list lives ===== */
.cl-dark{background:var(--dark);color:var(--on-accent)}
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
.trust h3{font-size:var(--text-lead);font-weight:600;margin-bottom:8px}
.trust ul{list-style:none}
.trust li{padding:14px 0;border-top:1px solid var(--dark-line);font-size:var(--text-lead);line-height:1.55;color:var(--dark-soft)}
.trust a{color:var(--accent-on-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ===== prices: the ladder as line items, and month one rung up ===== */
.prices{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:88px;align-items:center}
.plist{list-style:none;border-top:1px solid var(--line-strong)}
.plist li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n a" "d a";gap:6px 40px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.plist h3{grid-area:n;font-size:var(--text-lead);font-weight:600;line-height:1.3}
.pdesc{grid-area:d;font-size:var(--text-body-md);line-height:1.55;color:var(--ink-soft);max-width:38em}
.pamt{grid-area:a;font-size:var(--text-small);color:var(--ink-soft);white-space:nowrap;text-align:right}
.pamt b{font-size:26px;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin-right:4px}
.tally{border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);box-shadow:var(--shadow-lift);padding:28px 28px 24px}
.tally h3{font-size:var(--text-lead);font-weight:600}
.tally-sub{margin-top:6px;font-size:var(--text-small);line-height:1.5;color:var(--ink-soft)}
.tally dl{margin-top:20px}
.tally dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:11px 0;border-top:1px solid var(--line)}
.tally dt{font-size:var(--text-body-md);color:var(--ink-soft);min-width:0}
.tally dd{font-size:var(--text-body-md);color:var(--ink);white-space:nowrap}
.tally .tot{border-top:3px double var(--ink);margin-top:4px;padding-top:14px;align-items:center}
.tally .tot dt{color:var(--ink);font-weight:600}
.tally .tot dd{font-size:var(--text-headline);font-weight:650;letter-spacing:-.02em;line-height:1.1}

/* ===== close ===== */
.cl-close-in{text-align:center;max-width:760px}
.cl-close .cl-sub{margin-left:auto;margin-right:auto}
.cl-close .cl-pick{margin-top:32px}
.cl-close .cl-cta{justify-content:center}

/* ===== nav: the mark's two fixed fills, as on /privacy (site.css [data-page="privacy"]) ===== */
[data-page="clinics"] .wordmark .ra-last{fill:var(--ink-faint)}
[data-page="clinics"] .wordmark .ra-halo{fill:var(--accent-soft)}

/* ===== footer: the privacy page's, with three links ===== */
.cl-foot-links{display:flex;gap:24px}
.cl-foot-links a{color:var(--ink-soft)}
.cl-foot-links a:hover{color:var(--ink)}
.cl-link:hover{color:var(--ink-soft)}

@media (max-width:1180px){
  .cl-hero-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .cl-hero-copy{max-width:640px}
  .cl-flow{grid-template-columns:minmax(0,1fr)}
  .flow-steps{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:0}
  .fs+.fs::before,.fs+.fs::after,.flow-steps::after{display:none}
  .flow-ends{margin-top:32px;grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0}
  .fe::before,.fe::after{display:none}
  .prices{grid-template-columns:minmax(0,1fr);gap:48px}
  .tally{max-width:520px}
}

@media (max-width:760px){
  .cl-in{padding:0 16px}
  .cl-band{padding:72px 0}
  .cl-hero{padding:40px 0 72px}
  .cl-hero-grid{gap:40px}
  .cl-h1{font-size:var(--text-display-phone);line-height:1.1}
  .cl-for,.cl-lede,.cl-sub{font-size:var(--text-lead-phone)}
  .cl-head{margin-bottom:36px}
  .cl-seg{display:flex}
  .cl-seg label{flex:1}
  .cl-seg span{padding:0 8px;height:40px;font-size:16px}
  .cl-cta{gap:20px}
  .cl-cta .btn{flex:1 1 100%}
  .cl-close .cl-cta .btn{flex:1 1 100%}
  .run-head,.run-file,.run-lines li,.run-total,.run-text{padding-left:16px;padding-right:16px}
  .run-lines b,.run-lines .amt,.run-file-what b,.run-sms,.run-total b{font-size:16px}
  .run-lines li>div>span,.run-file-what span,.run-head>span,.run-total div span,.run-to,.run-wait>span{font-size:16px}
  .run-total strong{font-size:var(--text-headline-phone)}
  .flow-steps{grid-template-columns:minmax(0,1fr);gap:28px}
  .fs+.fs::before{display:block;left:27px;top:-29px;width:2px;height:28px}
  .flow-ends{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px;padding-left:56px}
  .flow-ends::before{content:"";position:absolute;left:27px;top:-28px;width:2px;height:28px;background:var(--line-strong)}
  .fe::before{display:block;left:-29px;width:28px}
  .fe::after{display:block;left:-29px}
  .fe:first-child::after{top:-1px;bottom:-17px}
  .fs h3,.fe h3{font-size:17px}
  .fs p:not(.actor),.fe p:not(.actor){font-size:16px}
  .trust{grid-template-columns:minmax(0,1fr);gap:40px}
  .trust li{font-size:16px}
  .plist li{grid-template-areas:"n a" "d d";gap:8px 16px}
  .pdesc{font-size:16px}
  .pamt b{font-size:22px}
  .tally{padding:22px 18px 20px}
  .tally dt,.tally dd{font-size:16px}
  .tally .tot dd{font-size:var(--text-headline-phone)}
  .tally-sub{font-size:16px}
  .cl-foot-links{gap:20px}
  .cl-foot-links a{display:inline-flex;align-items:center;min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  .run.is-running .run-lines li,.run.is-running .run-text{opacity:1;transform:none;transition:none}
}