/* C2 — Chart. Same brand, information-first: squared-off panels on the cool
   ground, each announced by a mono label and a top rule whose colour says what
   the section IS — urgent, not yet confirmed, or settled. Figures line up. */
:root{ --ground:#EDF0F4; --surface:#FFFFFF; --tint:#E6F0FB; --rule:#D7E1E9;
  --r:0px; --r-lg:0px; --sec-y:.5rem; --shell:1240px; }
body{ font-size:16px; }
.sec{ padding-block:.45rem; }
.sec + .sec{ border-top:0; }
.sec > .shell > .sec-in{ background:var(--surface); border:1px solid var(--rule);
  border-top:3px solid var(--blue); border-radius:0;
  padding:clamp(1.2rem,2.4vw,1.8rem); }
.sec:first-of-type > .shell > .sec-in{ margin-top:.9rem; }
main > .sec:last-child{ padding-bottom:1.4rem; }
.sec.hero > .shell > .sec-in{ border-top-color:var(--ink); }

/* Semantic top rules, and they mean something. */
.sec[data-state="urgent"] > .shell > .sec-in{ border-top-color:var(--red); background:var(--red-soft); }
.sec[data-state]>.shell>.sec-in::before{ display:block; font-family:var(--f-display);
  font-style:italic; font-size:.85rem; margin-bottom:.5rem; }
.sec[data-state="urgent"]>.shell>.sec-in::before{ content:"Read this before anything else"; color:var(--red-d); }
.sec[data-state="unconfirmed"] > .shell > .sec-in{ border-top-color:#B07A12; }
.sec[data-state="unconfirmed"]>.shell>.sec-in::before{ content:"Some details await the practice's confirmation"; color:#8A6410; }
.sec[data-state="settled"] > .shell > .sec-in{ border-top-color:#1C6B4B; }
.sec[data-state="settled"]>.shell>.sec-in::before{ content:"Confirmed"; color:#1C6B4B; }
/* Figures line up. */
.hours,.facts dt,.steps .k,.card .s,.choice .sub,.quote .who,.eyebrow,.legal,
.facts dt,.steps .k{ font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-d); }
.facts > div,.steps li{ padding-block:var(--s2); }
.choice{ border-top:3px solid var(--blue); border-radius:var(--r); }
.choice:hover{ box-shadow:none; background:var(--tint); }
.choice .name{ font-size:1.12rem; }
.quote{ border-radius:0; border-top:3px solid var(--rule); }
.alert{ border-radius:var(--r); border-left:0; }
.notice,.receipt{ border-radius:var(--r); }
.portrait{ border-radius:var(--r); }
.btn,.tel,.nav ul,.nav a,.menu-btn,.disclose > button,.filter button,button.submit,.tags li{ border-radius:var(--r); }
.site-foot{ margin-top:1rem; }