/* ============================================================
   REHAB AT WORK — design system
   Direction (Jonathan, 2026-08-14): majority black + RAW yellow.
   Yellow #FFF300 sampled from the live logo. Squared, industrial,
   high-contrast. Zero external assets — system fonts only.
   ============================================================ */

:root {
  --ink: #0d0e0f;          /* page canvas */
  --panel: #17181a;        /* raised surface */
  --panel-2: #1e2023;      /* hover / nested surface */
  --line: #2a2c30;         /* hairline borders */
  --text: #edebe3;         /* warm off-white body */
  --dim: #a8a69c;          /* secondary text */
  --yellow: #fcee1e;       /* PMS YELLOW C — official web hex per style guide */
  --yellow-press: #e0d41b; /* active/pressed */
  --on-yellow: #0d0e0f;    /* text on yellow */
  --blue: #0065a4;         /* PMS 7691 C — official brand blue */
  --blue-bright: #2f96d8;  /* legible blue accent on dark */
  --blue-panel: #0c2233;   /* deep navy surface */
  --max: 1140px;
  --stripe: repeating-linear-gradient(
    -45deg,
    var(--yellow) 0 14px,
    var(--ink) 14px 28px
  );
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  /* Brand body font per style guide is Calibri (with system fallbacks) */
  font-family: Calibri, "Segoe UI", -apple-system, system-ui, Roboto, Arial, sans-serif;
  font-size: 1.0925rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--text); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--yellow); }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */

/* Headings use the logo's Helvetica family (Arial on Windows) */
h1, h2, h3 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.25rem; letter-spacing: 0; }

.kicker {
  color: var(--yellow);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.lede { color: var(--dim); font-size: clamp(1.05rem, 1.8vw, 1.25rem); max-width: 44em; }

.section { padding: 88px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section h2 { margin-bottom: 0.75rem; }
.section .lede { margin-bottom: 2.5rem; }

/* ---------- top utility bar ---------- */

.topbar { background: var(--yellow); color: var(--on-yellow); font-size: 0.85rem; font-weight: 700; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.topbar a { color: var(--on-yellow); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-right { display: inline-flex; gap: 16px; align-items: center; }
.lang-switch {
  border: 2px solid var(--on-yellow); padding: 1px 10px; font-weight: 800;
  letter-spacing: 0.02em; white-space: nowrap;
}
.lang-switch:hover { background: var(--on-yellow); color: var(--yellow) !important; text-decoration: none !important; }

/* ---------- header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 14, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 28px;
  min-height: 68px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px;
}
.wordmark {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: 1.15rem; letter-spacing: 0.04em;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.wordmark img { height: 40px; width: auto; }
.wordmark .at { color: var(--yellow); }
.wordmark:hover { color: var(--text); }
.wordmark small { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; color: var(--dim); }
.site-nav { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.site-nav a {
  text-decoration: none; color: var(--dim);
  font-size: 0.95rem; font-weight: 600;
}
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--yellow); }

/* mobile hamburger (CSS-only) */
.nav-toggle { display: none; }
.nav-burger { display: none; margin-left: auto; cursor: pointer; padding: 10px 4px; }
.nav-burger span { display: block; width: 26px; height: 3px; background: var(--yellow); margin: 5px 0; border-radius: 2px; transition: transform 0.15s; }
@media (max-width: 1020px) {
  .nav-burger { display: block; }
  .site-nav { display: none; flex-direction: column; align-items: flex-start; width: 100%; gap: 2px; padding: 6px 0 16px; }
  .site-nav a { padding: 10px 0; font-size: 1.05rem; }
  .site-nav .btn { margin-top: 8px; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked + .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked + .nav-burger span:nth-child(2) { transform: scaleX(0); }
  .nav-toggle:checked + .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- locations map (Google embeds) ---------- */

.gmap-panel {
  background: var(--panel); border: 1px solid var(--line);
  padding: 14px 14px 8px; margin-bottom: 28px; border-radius: 10px;
}
.gmap-hint { color: var(--dim); font-size: 0.85rem; margin: 0 2px 10px; letter-spacing: 0.04em; }
.gmap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gmap-chips a {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: #16181b; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 7px 13px;
  font-size: 0.86rem; font-weight: 700; text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.gmap-chips a span { color: var(--dim); font-size: 0.72rem; font-weight: 600; }
.gmap-chips a:hover, .gmap-chips a:focus-visible { border-color: var(--yellow); }
.gmap-chips a.on { background: var(--yellow); border-color: var(--yellow); color: #0d0e0f; }
.gmap-chips a.on span { color: #0d0e0f; }

.gmap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #16181b; }
.gmap iframe { display: block; width: 100%; border: 0; }
.gmap-main iframe { height: clamp(340px, 46vw, 540px); }
.gmap-canvas { height: clamp(340px, 46vw, 540px); }
.gmap-iw { color: #202124; font-size: 0.88rem; line-height: 1.55; padding: 2px 4px 4px 0; }
.gmap-iw strong { display: block; margin-bottom: 2px; }
.gmap-iw a { color: #0065a4; font-weight: 600; }
.gmap-wide iframe { height: 360px; }
.gmap-cell { height: 100%; }
.gmap-cell iframe { height: 100%; min-height: 300px; }

@media (max-width: 620px) {
  .gmap-panel { padding: 10px 10px 6px; }
  .gmap-wide iframe { height: 300px; }
}

/* share-your-story capture */
.story-form { max-width: 46em; }
.story-form fieldset { border: 1px solid var(--line); background: var(--panel); padding: 24px 26px 28px; margin-bottom: 20px; }
.story-form legend { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; color: var(--yellow); padding: 0 10px; }
.story-form label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--dim); margin-bottom: 5px; letter-spacing: 0.04em; }
.story-form textarea, .story-form input[type="text"], .story-form select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); padding: 11px 13px;
}
.story-form textarea { min-height: 150px; resize: vertical; }
.story-form textarea:focus, .story-form input:focus, .story-form select:focus { outline: 2px solid var(--yellow); border-color: var(--yellow); }
.consent-box {
  background: var(--blue-panel); border: 1px solid #1b4258; border-left: 4px solid var(--blue-bright);
  padding: 20px 22px; margin-top: 18px;
}
.consent-box label { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: 0.98rem; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 0 0 14px; cursor: pointer; }
.consent-box label:last-child { margin-bottom: 0; }
.consent-box input[type="radio"] { accent-color: var(--yellow); width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.consent-box strong { color: var(--yellow); }
.qr-card {
  border: 2px dashed var(--line); padding: 26px; text-align: center; max-width: 30em;
}
.qr-card .u { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; color: var(--yellow); font-size: 1.3rem; letter-spacing: 0.02em; }

/* testimonials */
.quote-card {
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--yellow);
  padding: 26px; position: relative;
}
.quote-card::before {
  content: "\201C"; font-family: Georgia, serif; font-size: 3.2rem; line-height: 1;
  color: var(--yellow); display: block; margin-bottom: 6px;
}
.quote-card p { color: var(--text); font-size: 1.02rem; }
.quote-card footer { margin-top: 14px; color: var(--dim); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.quote-card footer .who { color: var(--yellow); }
.sat-strip { display: flex; gap: 40px; flex-wrap: wrap; margin: 2.2rem 0 2.6rem; }
.sat-strip .s { }
.sat-strip .n { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.sat-strip .l { color: var(--dim); font-size: 0.85rem; margin-top: 4px; max-width: 14em; }

/* satisfaction band — slim proof strip directly under the home hero */
.sat-band { background: var(--panel); border-bottom: 1px solid var(--line); }
.sat-band .wrap { padding-top: 26px; padding-bottom: 26px; }
.sat-band .sat-strip { margin: 0; }

/* gallery */
.gallery { columns: 3; column-gap: 16px; }
@media (max-width: 980px) { .gallery { columns: 2; } }
@media (max-width: 620px) { .gallery { columns: 1; } }
.gallery figure { break-inside: avoid; margin: 0 0 16px; border: 1px solid var(--line); background: var(--panel); }
.gallery img { width: 100%; display: block; }
.gallery figcaption { padding: 10px 14px; color: var(--dim); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* FAQ accordions */
.faq details { border: 1px solid var(--line); background: var(--panel); margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 800; padding: 16px 20px; list-style: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--yellow); transform: rotate(45deg); border-radius: 2px; margin-right: 12px; }
.faq details[open] summary { color: var(--yellow); border-bottom: 1px solid var(--line); }
.faq .a { padding: 14px 20px 18px; color: var(--dim); max-width: 60em; }
.faq .a a { color: var(--text); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block; padding: 14px 26px;
  font-weight: 800; font-size: 1rem; text-decoration: none;
  border: 2px solid var(--yellow); cursor: pointer;
}
.btn-solid { background: var(--yellow); color: var(--on-yellow); }
.btn-solid:hover { background: var(--yellow-press); border-color: var(--yellow-press); color: var(--on-yellow); }
.btn-ghost { background: transparent; color: var(--yellow); }
.btn-ghost:hover { background: var(--yellow); color: var(--on-yellow); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.site-nav .btn { padding: 9px 18px; font-size: 0.9rem; }

/* ---------- hero ---------- */

.hero { padding: 110px 0 90px; }
.hero .lede { margin-top: 1.4rem; }
.hero .btn-row { margin-top: 2.4rem; }
.hazard { height: 8px; background: var(--stripe); border-bottom: 3px solid var(--blue); }

.tagline {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic; font-weight: 800; color: var(--yellow);
  font-size: 1.15rem; margin-top: 1.8rem; letter-spacing: 0.01em;
}

/* photo hero: black-first, image as a dimmed layer */
.hero-photo {
  background:
    linear-gradient(100deg, rgba(13,14,15,0.96) 0%, rgba(13,14,15,0.82) 46%, rgba(13,14,15,0.55) 100%),
    var(--hero-img) center / cover no-repeat;
  border-bottom: 1px solid var(--line);
}

/* audience self-select tiles (structure borrowed from the 2025 mockup) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }
a.tile {
  background: var(--panel); border: 1px solid var(--line); padding: 24px 26px;
  text-decoration: none; display: flex; align-items: center; gap: 18px;
}
a.tile:hover { border-color: var(--yellow); background: var(--panel-2); color: var(--text); }
.tile .dmd {
  width: 26px; height: 26px; flex: 0 0 26px; background: var(--yellow);
  border: 2px solid #0d0e0f; outline: 1px solid var(--yellow);
  transform: rotate(45deg);
  border-radius: 6px; /* rounded corners to match the logo diamond */
}
.tile .lbl { font-weight: 800; font-size: 1.08rem; }
.tile .sub { color: var(--dim); font-size: 0.88rem; display: block; font-weight: 400; }
.tile:hover .lbl { color: var(--yellow); }

/* photo band */
.photo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .photo-band { grid-template-columns: 1fr; } }
.photo-band figure { margin: 0; border: 1px solid var(--line); background: var(--panel); }
.photo-band img { width: 100%; height: 320px; object-fit: cover; }
.photo-band figcaption { padding: 12px 16px; color: var(--dim); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- cards & grids ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  padding: 26px;
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--dim); font-size: 0.98rem; }
.card ul { margin: 0.8rem 0 0 1.1rem; color: var(--dim); font-size: 0.95rem; }
.card li { margin-bottom: 0.3rem; }

.svc-num { color: var(--blue-bright); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.1em; }
.svc-short { color: var(--yellow); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.8rem; }
a.card { text-decoration: none; display: block; }
a.card:hover { background: var(--panel-2); color: var(--text); }
a.card:hover h3 { color: var(--yellow); }
.card .more { color: var(--yellow); font-weight: 700; font-size: 0.9rem; margin-top: 1rem; }

/* ---------- proof / outcomes ---------- */

.proof { background: var(--blue-panel); border-top: 1px solid #1b4258; border-bottom: 1px solid #1b4258; }
.proof .stat { border-color: #1b4258; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 2.2rem; }
@media (max-width: 860px) { .stat-row { grid-template-columns: 1fr; } }
.stat {
  border: 1px dashed var(--line); padding: 26px; text-align: left;
}
.stat .num { font-size: 2.6rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.stat .lbl { color: var(--text); font-weight: 700; margin-top: 0.6rem; }
.stat .sub { color: var(--dim); font-size: 0.85rem; margin-top: 0.3rem; }
.pending-note {
  margin-top: 1.6rem; color: var(--dim); font-size: 0.9rem;
  border-left: 3px solid var(--yellow); padding-left: 14px; max-width: 46em;
}

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { border-top: 3px solid var(--yellow); padding-top: 18px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; color: var(--blue-bright); font-weight: 800; font-size: 1.6rem; margin-bottom: 0.5rem;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--dim); font-size: 0.98rem; }

/* ---------- locations ---------- */

.loc-state { color: var(--yellow); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 2.2rem 0 1rem; }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .loc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } }
a.loc-card {
  background: var(--panel); border: 1px solid var(--line); padding: 20px;
  text-decoration: none; display: block;
}
a.loc-card:hover { border-color: var(--yellow); color: var(--text); }
.loc-card .name { font-weight: 800; font-size: 1.1rem; }
.loc-card .name::after { content: " →"; color: var(--yellow); }
.loc-card .meta { color: var(--dim); font-size: 0.9rem; margin-top: 0.35rem; }

/* location detail */
.contact-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--yellow);
  padding: 28px;
}
.contact-card dt { color: var(--yellow); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1.1rem; }
.contact-card dt:first-child { margin-top: 0; }
.contact-card dd { margin: 0.15rem 0 0; font-size: 1.05rem; }
.contact-card a { text-decoration: none; }
.contact-card a:hover { text-decoration: underline; text-decoration-color: var(--yellow); }

.photo-slot {
  background:
    linear-gradient(rgba(13,14,15,0.55), rgba(13,14,15,0.55)),
    repeating-linear-gradient(-45deg, #17181a 0 24px, #1b1d1f 24px 48px);
  border: 1px solid var(--line);
  min-height: 260px;
  display: flex; align-items: flex-end; padding: 18px;
}
.photo-slot span { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.photo-real { border: 1px solid var(--line); }
.photo-real img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

/* footer motto */
.motto { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; color: var(--yellow); letter-spacing: 0.02em; }
.motto .dmd { display: inline-block; width: 9px; height: 9px; background: var(--yellow); transform: rotate(45deg); border-radius: 2px; margin: 0 8px 1px; }

/* ---------- referral form ---------- */

.mode-tabs { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.mode-tab {
  font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer;
  padding: 14px 24px; background: var(--panel); color: var(--dim);
  border: 1px solid var(--line);
}
.mode-tab[aria-selected="true"] { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.mode-tab:hover:not([aria-selected="true"]) { border-color: var(--yellow); color: var(--text); }

.rform fieldset {
  border: 1px solid var(--line); background: var(--panel);
  padding: 24px 26px 28px; margin-bottom: 22px;
}
.rform legend {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: 1.05rem; color: var(--yellow);
  padding: 0 10px; letter-spacing: 0.02em;
}
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.f-grid .full { grid-column: 1 / -1; }
@media (max-width: 700px) { .f-grid { grid-template-columns: 1fr; } }
.rform label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--dim); margin-bottom: 5px; letter-spacing: 0.04em; }
.rform label .req { color: var(--yellow); }
.rform input[type="text"], .rform input[type="tel"], .rform input[type="email"],
.rform input[type="date"], .rform select, .rform textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); padding: 11px 13px;
}
.rform input:focus, .rform select:focus, .rform textarea:focus {
  outline: 2px solid var(--yellow); outline-offset: 0; border-color: var(--yellow);
}
.rform textarea { min-height: 90px; resize: vertical; }
.rform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.choice-row { display: flex; gap: 14px 22px; flex-wrap: wrap; padding-top: 4px; }
.choice-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; color: var(--text); margin: 0; cursor: pointer; }
.rform input[type="radio"], .rform input[type="checkbox"] { accent-color: var(--yellow); width: 17px; height: 17px; }

.dropzone {
  border: 2px dashed var(--line); background: var(--panel);
  padding: 44px 24px; text-align: center; cursor: pointer;
}
.dropzone.dragover { border-color: var(--yellow); background: var(--panel-2); }
.dropzone .dz-dmd {
  width: 34px; height: 34px; margin: 0 auto 14px; background: var(--yellow);
  transform: rotate(45deg); border-radius: 8px; border: 2px solid #0d0e0f; outline: 1px solid var(--yellow);
}
.dropzone strong { color: var(--yellow); }
.dropzone p { color: var(--dim); font-size: 0.9rem; margin-top: 6px; }
.file-list { list-style: none; margin-top: 14px; }
.file-list li { color: var(--text); font-size: 0.95rem; padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 6px; }
.form-note {
  background: var(--blue-panel); border: 1px solid #1b4258; border-left: 4px solid var(--blue-bright);
  padding: 18px 22px; margin-top: 18px; color: var(--text);
}
.form-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; align-items: center; }

/* ---------- process timeline ---------- */

.timeline { list-style: none; margin: 2.4rem 0 0; padding-left: 30px; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 2.4rem 26px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -9px; top: 4px;
  width: 14px; height: 14px; background: var(--yellow);
  transform: rotate(45deg); border-radius: 3px; border: 2px solid var(--ink);
  outline: 2px solid var(--yellow);
}
.timeline h3 { margin-bottom: 0.35rem; }
.timeline p { color: var(--dim); max-width: 42em; }
.timeline .who { display: inline-block; color: var(--blue-bright); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.4rem; }

/* ---------- print (fax-ready referral form) ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .site-head, .site-foot, .mode-tabs, .hero .btn-row, .form-actions,
  .cta-band, .form-note, .hazard, .no-print { display: none !important; }
  .rform fieldset { border: 1.5pt solid #000; background: #fff; break-inside: avoid; }
  .rform legend { color: #000; }
  .rform label { color: #000; }
  .rform input, .rform select, .rform textarea { background: #fff; color: #000; border: 1pt solid #000; }
  .print-head { display: block !important; border-bottom: 4pt solid #000; margin-bottom: 14pt; padding-bottom: 8pt; }
  .print-head h1 { font-size: 16pt; }
  a { color: #000; text-decoration: none; }
  .hero { padding: 0; }
  .hero h1, .kicker, .lede { color: #000; }
  .cm-checklist li { break-inside: avoid; }
}
.print-head { display: none; }

.svc-cols { columns: 2; gap: 40px; color: var(--dim); font-size: 0.98rem; }
@media (max-width: 700px) { .svc-cols { columns: 1; } }
.svc-cols li { break-inside: avoid; margin-bottom: 0.45rem; list-style: none; padding-left: 1.1em; text-indent: -1.1em; }
.svc-cols li::before { content: "— "; color: var(--yellow); }

/* ---------- prose pages ---------- */

.prose { max-width: 46em; }
.prose h2 { margin: 2.6rem 0 0.8rem; font-size: 1.55rem; }
.prose p { margin-bottom: 1.1rem; }
.prose ul { margin: 0 0 1.1rem 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--yellow); font-weight: 700; }

.callout {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--yellow);
  padding: 20px 24px; margin: 1.6rem 0;
}
.callout p { margin: 0; color: var(--text); }
.callout-ask { background: var(--blue-panel); border-color: #1b4258; border-left-color: var(--blue-bright); }

.crumb { color: var(--dim); font-size: 0.85rem; margin-bottom: 1.6rem; }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--yellow); }

/* ---------- CTA band ---------- */

.cta-band { background: var(--yellow); color: var(--on-yellow); }
.cta-band .wrap { padding-top: 64px; padding-bottom: 64px; }
.cta-band h2 { color: var(--on-yellow); }
.cta-band p { color: rgba(13,14,15,0.75); font-weight: 600; margin: 0.7rem 0 1.8rem; max-width: 40em; }
.cta-band .btn { border-color: var(--on-yellow); }
.cta-band .btn-solid { background: var(--on-yellow); color: var(--yellow); }
.cta-band .btn-solid:hover { background: #000; border-color: #000; color: var(--yellow); }
.cta-band .btn-ghost { color: var(--on-yellow); }
.cta-band .btn-ghost:hover { background: var(--on-yellow); color: var(--yellow); }

/* ---------- footer ---------- */

.site-foot { border-top: 1px solid var(--line); padding: 64px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.site-foot h4 { color: var(--yellow); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 0.45rem; }
.site-foot a { color: var(--dim); text-decoration: none; font-size: 0.95rem; }
.site-foot a:hover { color: var(--yellow); }
.foot-legal { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 24px; color: var(--dim); font-size: 0.85rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- misc ---------- */

.tel { white-space: nowrap; }
table.fax-table { border-collapse: collapse; width: 100%; margin-top: 1.2rem; }
.fax-table th, .fax-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.fax-table th { color: var(--yellow); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.fax-table td { color: var(--dim); }
.fax-table td:first-child { color: var(--text); font-weight: 700; }

/* ============================================================
   Costs & coverage page (/patients/cost/, /es/costo/)
   Built 2026-09-18. Uses ONLY the shared :root tokens, so it
   ports unchanged if a design variant ever becomes site.css.
   Every class is cp- prefixed — .steps/.step already exist and
   mean something else.
   ============================================================ */

/* proportional bar: who actually pays for care here */
.cp-bar { display: flex; height: 16px; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--line); margin-top: 0.9rem; }
.cp-bar i { display: block; height: 100%; }
.cp-bar .b1 { background: var(--yellow); flex: 0 0 72.7%; }
.cp-bar .b2 { background: var(--blue-bright); flex: 0 0 25.3%; }
.cp-bar .b3 { background: var(--dim); flex: 1 1 auto; min-width: 6px; }
.cp-key { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 0.8rem;
  font-size: 0.88rem; color: var(--dim); }
.cp-key b { color: var(--text); }
.cp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 7px; }

/* the three doors */
.cp-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 1.6rem; }
.cp-door { border: 1px solid var(--line); background: var(--panel); padding: 22px;
  display: flex; flex-direction: column; gap: 10px; }
.cp-door.free { border-color: var(--yellow); }
.cp-door h3 { font-size: 1.05rem; letter-spacing: 0.01em; }
.cp-fig { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: var(--yellow); }
.cp-door.dep .cp-fig { font-size: 1.9rem; color: var(--blue-bright); }
.cp-door p { font-size: 0.95rem; color: var(--dim); }
.cp-door .cp-n { margin-top: auto; padding-top: 10px; font-size: 0.8rem;
  color: var(--dim); border-top: 1px dashed var(--line); }

/* the breakdown list */
.cp-arrows { list-style: none; display: flex; flex-direction: column; gap: 18px;
  margin-top: 0.4rem; }
.cp-arrows > li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.cp-ar { color: var(--yellow); font-weight: 800; line-height: 1.4; }
.cp-arrows h3 { font-size: 1rem; }
.cp-arrows h3 span { font-weight: 400; color: var(--dim); }
.cp-val { font-weight: 700; }
.cp-val em { font-style: normal; font-weight: 400; color: var(--dim); }

/* numbered "how you pay" steps — .steps is taken, this is not that */
.cp-steps { list-style: none; display: flex; flex-direction: column; gap: 12px;
  margin-top: 0.9rem; }
.cp-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  font-size: 0.98rem; }
.cp-steps .k { width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-bright); color: var(--ink); font-weight: 800;
  font-size: 0.8rem; display: grid; place-items: center; }

/* road-sign notice — the one thing someone must see before driving to a clinic */
.cp-signal { display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  align-items: start; background: var(--yellow); color: var(--on-yellow);
  padding: 16px 18px; border: 2px solid var(--ink); }
.cp-signal .d { width: 20px; height: 20px; background: var(--on-yellow);
  transform: rotate(45deg); margin: 4px 0 0 3px; }
.cp-signal p { font-size: 0.95rem; }
.cp-signal strong { font-weight: 800; }

.cp-two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px;
  align-items: start; margin-top: 1.2rem; }

.cp-basis { font-size: 0.84rem; color: var(--dim); border-top: 1px solid var(--line);
  padding-top: 1rem; margin-top: 2.4rem; }

@media (max-width: 860px) {
  .cp-doors, .cp-two { grid-template-columns: 1fr; }
}
@media print {
  .cp-doors { grid-template-columns: repeat(3, 1fr); }
  .cp-two { grid-template-columns: 1fr 1.2fr; }
}

/* Cost page — the reframe of 2026-09-18: the page is for patients who actually
   pay (commercial + self-pay). The work-comp answer is one banner, not a section.
   Chart palette validated with the dataviz validator against the dark surface:
   #3e93c9 / #b07e22 pass lightness, chroma, CVD separation and contrast. */
.cp-dismiss { display: grid; grid-template-columns: auto 1fr; gap: 16px;
  align-items: center; border: 1px solid var(--yellow); background: var(--panel);
  padding: 18px 20px; margin-top: 0.4rem; }
.cp-zero { font-size: 2rem; font-weight: 800; color: var(--yellow); line-height: 1; }
.cp-dismiss p { font-size: 1rem; }

.cp-chart { margin: 2rem 0 0; background: var(--panel); border: 1px solid var(--line);
  padding: 22px 20px 16px; }
.cp-chart figcaption { font-weight: 700; font-size: 1.02rem; }
.cp-csub { font-size: 0.9rem; color: var(--dim); margin: 0.2rem 0 1rem; }
.cp-chart svg { display: block; }
.cg { stroke: #262d36; stroke-width: 1; }
.cax { stroke: #3b434d; stroke-width: 1; }
.ctk { fill: var(--dim); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.clb { fill: var(--text); font-size: 12.5px; text-anchor: end; }
.cgh { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }
.cgh-ins { fill: #3e93c9; }
.cgh-self { fill: #cf9a3f; }
.cr { stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.cr-ins { stroke: #3e93c9; }
.cr-self { stroke: #cf9a3f; }
.cd { stroke: var(--panel); stroke-width: 1.5; }
.cd-ins { fill: #3e93c9; }
.cd-self { fill: #cf9a3f; }
.cvl { fill: var(--text); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cleg { fill: var(--dim); font-size: 11.5px; }

@media (max-width: 860px) { .cp-dismiss { grid-template-columns: 1fr; } }

/* ---------- medical records (/medical-records/) — all mr- prefixed, shared tokens only ---------- */

.mr-ways .card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mr-badge { display: inline-block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--yellow); color: var(--on-yellow); padding: 3px 8px; border-radius: 2px; font-weight: 800; }
.mr-check { list-style: none; margin: 0.4rem 0 0; }
.mr-check li { padding: 6px 0 6px 1.6em; position: relative; color: var(--dim); font-size: 0.98rem; }
.mr-check li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 10px; background: var(--yellow); transform: rotate(45deg); border-radius: 2px; }
.mr-check li b { color: var(--text); }

.mr-est { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; background: var(--panel); border: 1px solid var(--line); padding: 26px; margin-top: 2rem; }
@media (max-width: 860px) { .mr-est { grid-template-columns: 1fr; } }
.mr-est label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--dim); letter-spacing: 0.04em; margin-bottom: 5px; }
.mr-est select, .mr-est input { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); padding: 11px 13px; margin-bottom: 16px; }
.mr-est select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--yellow) 50%), linear-gradient(135deg, var(--yellow) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.mr-est select:focus, .mr-est input:focus { outline: 2px solid var(--yellow); outline-offset: 0; border-color: var(--yellow); }
.mr-est small { display: block; color: var(--dim); font-size: 0.85rem; margin: -10px 0 8px; }
.mr-out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
@media (max-width: 560px) { .mr-out { grid-template-columns: 1fr; } }
.mr-q { background: var(--panel-2); border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; }
.mr-q h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 12px; }
.mr-lines { list-style: none; margin: 0; flex: 1; }
.mr-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; color: var(--dim); padding: 6px 0; border-bottom: 1px dashed var(--line); }
.mr-lines li b { color: var(--text); font-weight: 700; white-space: nowrap; }
.mr-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; font-weight: 800; font-size: 1rem; }
.mr-total b { font-size: 1.6rem; color: var(--yellow); letter-spacing: -0.02em; }
.mr-total .open { font-size: 0.9rem; color: var(--dim); font-weight: 600; text-align: right; }
.mr-notes { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; font-size: 0.9rem; color: var(--dim); }
.mr-notes li { padding-left: 1.1em; text-indent: -1.1em; margin-bottom: 4px; }
.mr-notes li::before { content: "\2014  "; color: var(--yellow); }
.mr-fine { font-size: 0.88rem; color: var(--dim); margin-top: 1rem; max-width: 60em; }

.mr-free { list-style: none; margin: 1.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
@media (max-width: 700px) { .mr-free { grid-template-columns: 1fr; } }
.mr-free li { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--yellow); padding: 14px 16px; font-size: 0.95rem; color: var(--dim); }
.mr-free li b { display: block; color: var(--text); margin-bottom: 3px; }

.mr-time { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 1.8rem; }
@media (max-width: 860px) { .mr-time { grid-template-columns: 1fr; } }
.mr-time .t { border-top: 3px solid var(--yellow); padding-top: 16px; }
.mr-time .n { font-size: 2.2rem; font-weight: 800; color: var(--yellow); line-height: 1; letter-spacing: -0.03em; }
.mr-time p { color: var(--dim); font-size: 0.95rem; margin-top: 8px; }
.mr-time p strong { color: var(--text); }

@media print {
  #fees h2, #fees .lede { display: none !important; }
  .rform .choice-row label { color: #000; }
  .dropzone { display: none !important; }
}

/* ---------- using your insurance (/patients/insurance/, /es/seguro/) — all ins- prefixed, shared tokens only ---------- */

.ins-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* five-step flow: benefit check -> visit -> claim -> EOB -> settle up */
.ins-flow { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 1.8rem; }
@media (max-width: 1020px) { .ins-flow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ins-flow { grid-template-columns: 1fr; } }
.ins-flow li { border-top: 3px solid var(--yellow); padding-top: 14px; }
.ins-flow .n { display: block; color: var(--blue-bright); font-weight: 800; font-size: 1.5rem; line-height: 1; margin-bottom: 8px; }
.ins-flow h3 { font-size: 1.02rem; margin-bottom: 6px; }
.ins-flow p { color: var(--dim); font-size: 0.95rem; }

/* glossary cards: what the word means, then what we do about it */
.ins-terms { margin-top: 1.8rem; }
.ins-term .ins-here { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); color: var(--text); }
.ins-lab { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 3px; }

/* network table: status chips carry a word, never color alone */
.ins-table td { vertical-align: top; }
.ins-table td.ins-note { font-size: 0.9rem; }
.ins-st { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px; border: 1px solid var(--line); border-radius: 2px; white-space: nowrap; color: var(--text); }
.ins-in { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.ins-out { color: var(--dim); }
.ins-cert { border-color: var(--blue-bright); color: var(--blue-bright); }
.ins-case { border-style: dashed; }
.ins-no { color: var(--dim); border-color: transparent; padding-left: 0; }
@media (max-width: 700px) {
  .ins-table thead { display: none; }
  .ins-table, .ins-table tbody, .ins-table tr { display: block; width: 100%; }
  .ins-table tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .ins-table td { display: block; border: 0; padding: 3px 0; }
  .ins-table td[data-l] { display: inline-block; margin-right: 16px; }
  .ins-table td[data-l]::before { content: attr(data-l); color: var(--dim); font-size: 0.82rem; margin-right: 6px; }
}
.ins-fine { font-size: 0.88rem; color: var(--dim); margin-top: 1rem; max-width: 62em; }

/* after-the-visit facts */
.ins-bill { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 1.8rem; }
@media (max-width: 760px) { .ins-bill { grid-template-columns: 1fr; } }
.ins-bill li { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--yellow); padding: 16px 18px; color: var(--dim); font-size: 0.97rem; }
.ins-bill li b { display: block; color: var(--text); margin-bottom: 4px; }

@media print {
  .ins-flow { grid-template-columns: repeat(5, 1fr); }
  .ins-bill { grid-template-columns: 1fr 1fr; }
}

/* round 2 (2026-09-24 pm): icons, the estimate -> EOB diagram, the who-pays chart, the card,
   self-pay price tiles, the Good Faith Estimate notice, pay-by-check envelope */
.ins-subh { margin: 2.6rem 0 1rem; font-size: 1.3rem; }
.ins-fhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ins-fhead .ins-ico { width: 30px; height: 30px; color: var(--yellow); }
.ins-fhead .n { margin: 0; }

.ins-eob { margin: 2rem 0 0; }
.ins-eob-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1.35fr; align-items: center; gap: 12px; }
.ins-eob-step { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--yellow); padding: 18px 16px; text-align: center; }
.ins-eob-step .ins-ico { display: block; width: 34px; height: 34px; margin: 0 auto 8px; color: var(--yellow); }
.ins-eob-step b, .ins-eob-out b { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; }
.ins-eob-step span, .ins-eob-out span { display: block; color: var(--dim); font-size: 0.92rem; margin-top: 2px; }
.ins-arrow { width: 40px; height: 16px; color: var(--yellow); }
.ins-eob-out { list-style: none; display: grid; gap: 10px; }
.ins-eob-out li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--blue-bright); padding: 12px 14px; }
.ins-eob-out .ins-ico { width: 28px; height: 28px; color: var(--blue-bright); }
.ins-eob figcaption { margin-top: 1.2rem; max-width: 60em; }
@media (max-width: 900px) {
  .ins-eob-row { grid-template-columns: 1fr; }
  .ins-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* who pays, phase by phase. #b07e22 / #3e93c9 = the dataviz-validated dark pair (all six
   checks pass on #17181a); brand yellow fails the lightness band as a fill. */
.ins-phases { margin: 1.8rem 0 0; background: var(--panel); border: 1px solid var(--line); padding: 22px 22px 18px; }
.ins-phases figcaption { font-weight: 700; font-size: 1.02rem; }
.ins-psub { color: var(--dim); font-size: 0.9rem; margin: 0.2rem 0 0.9rem; }
.ins-legend { display: flex; gap: 20px; font-size: 0.88rem; color: var(--dim); margin-bottom: 14px; }
.ins-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.ins-you { background: #b07e22; }
.ins-plan { background: #3e93c9; }
.ins-prow { list-style: none; display: grid; gap: 14px; }
.ins-prow li { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 18px; align-items: center; }
.ins-prow .lab b { display: block; font-size: 0.97rem; }
.ins-prow .lab span { display: block; color: var(--dim); font-size: 0.86rem; }
.ins-bar { display: flex; gap: 2px; height: 32px; }
.ins-bar span { display: flex; align-items: center; min-width: 0; padding: 0 10px; color: var(--ink); font-weight: 800; font-size: 0.86rem; white-space: nowrap; overflow: hidden; }
.ins-bar span:first-child { border-radius: 4px 0 0 4px; }
.ins-bar span:last-child { border-radius: 0 4px 4px 0; }
.ins-bar span:only-child { border-radius: 4px; }
@media (max-width: 700px) { .ins-prow li { grid-template-columns: 1fr; gap: 6px; } }

/* the example insurance card + its numbered key */
.ins-cardwrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; margin-top: 1.8rem; }
@media (max-width: 900px) { .ins-cardwrap { grid-template-columns: 1fr; } }
.ins-cardsvg { width: 100%; height: auto; display: block; }
.ic-card { fill: var(--panel-2); stroke: var(--line); stroke-width: 2; }
.ic-head { fill: var(--blue-panel); }
.ic-logo { fill: none; stroke: var(--blue-bright); stroke-width: 3; }
.ic-brand { fill: var(--text); font: 800 17px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.08em; }
.ic-badge { fill: none; stroke: var(--text); stroke-width: 2; }
.ic-badge-t { fill: var(--text); font: 800 16px "Helvetica Neue", Helvetica, Arial, sans-serif; text-anchor: middle; }
.ic-lab { fill: var(--dim); font: 700 11px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; }
.ic-val { fill: var(--text); font: 700 17px ui-monospace, Consolas, monospace; }
.ic-ph { fill: var(--line); }
.ic-box { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ic-amt { fill: var(--text); font: 700 14px ui-monospace, Consolas, monospace; text-anchor: end; }
.ic-suit { fill: none; stroke: var(--blue-bright); stroke-width: 2.5; }
.ic-suit-t { fill: var(--blue-bright); font: 800 16px "Helvetica Neue", Helvetica, Arial, sans-serif; text-anchor: middle; }
.ic-mk circle { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.ic-mk text { fill: var(--on-yellow); font: 800 13px "Helvetica Neue", Helvetica, Arial, sans-serif; text-anchor: middle; }
.ins-cardkey { list-style: none; counter-reset: ck; display: grid; gap: 12px; }
.ins-cardkey li { counter-increment: ck; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; }
.ins-cardkey li::before { content: counter(ck); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--on-yellow); font-weight: 800; font-size: 0.85rem; display: grid; place-items: center; }
.ins-cardkey b { color: var(--text); }
.ins-cardkey span { color: var(--dim); font-size: 0.95rem; }

/* self-pay price tiles + the Good Faith Estimate notice */
.ins-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; }
@media (max-width: 480px) { .ins-prices { grid-template-columns: 1fr; } }
.ins-price { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--yellow); padding: 20px 22px; }
.ins-price .k { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); font-weight: 800; }
.ins-price .v { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 3rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 8px 0 4px; }
.ins-price .s { display: block; color: var(--dim); font-size: 0.92rem; }
.ins-gfe { margin-top: 2rem; background: var(--blue-panel); border: 1px solid #1b4258; border-left: 4px solid var(--blue-bright); padding: 22px 24px; max-width: 62em; }
.ins-gfe h3 { font-size: 1.08rem; margin-bottom: 0.6rem; }
.ins-gfe p, .ins-gfe li { font-size: 0.95rem; color: var(--text); }
.ins-gfe ul { margin: 0.7rem 0 0.9rem 1.2rem; }
.ins-gfe li { margin-bottom: 0.35rem; }

/* pay by check */
.ins-mail { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; margin-top: 1.6rem; background: var(--panel); border: 1px dashed var(--line); padding: 22px 24px; max-width: 760px; }
.ins-env { width: 120px; height: auto; display: block; }
.e-body { fill: var(--panel-2); stroke: var(--text); stroke-width: 2; }
.e-flap { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.e-stamp { fill: var(--yellow); }
.e-line { stroke: var(--dim); stroke-width: 3; stroke-linecap: round; }
.ins-mail p { color: var(--dim); font-size: 0.97rem; }
.ins-mail p strong { color: var(--text); }
.ins-mail address { font-style: normal; font-size: 1.1rem; line-height: 1.5; color: var(--text); font-weight: 700; margin-top: 0.6rem; }
@media (max-width: 560px) { .ins-mail { grid-template-columns: 1fr; } .ins-env { width: 84px; } }

/* round 3: missed visits — notice ($0), the first one ($0), then the fee */
.ins-miss { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 1.8rem; max-width: 900px; }
@media (max-width: 700px) { .ins-miss { grid-template-columns: 1fr; } }
.ins-miss-t { background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--blue-bright); padding: 18px 20px; }
.ins-miss-t .ins-ico { display: block; width: 28px; height: 28px; margin-bottom: 10px; color: var(--blue-bright); }
.ins-miss-t .k { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 800; }
.ins-miss-t .v { display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 8px 0 4px; }
.ins-miss-t .s { display: block; color: var(--dim); font-size: 0.92rem; }
.ins-miss-t.is-fee { border-top-color: var(--yellow); }
.ins-miss-t.is-fee .ins-ico, .ins-miss-t.is-fee .k, .ins-miss-t.is-fee .v { color: var(--yellow); }
@media print { .ins-miss { grid-template-columns: repeat(3, 1fr); } }

/* work comp $0 band (lib/wc-band.js) — first thing on the patient cost pages.
   Jonathan 2026-09-24: "Work comp patients pay nothing out of pocket. make that known." */
.wc-band { background: var(--yellow); color: var(--on-yellow); padding: 22px 0; }
.wc-band .wrap { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.wc-zero { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 3.8rem; line-height: 1; letter-spacing: -0.04em; }
.wc-head { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1.2; margin: 0; color: var(--on-yellow); }
.wc-sub { margin: 5px 0 0; font-size: 1rem; line-height: 1.5; color: var(--on-yellow); max-width: 62em; }
@media (max-width: 560px) {
  .wc-band .wrap { grid-template-columns: 1fr; gap: 6px; }
  .wc-zero { font-size: 2.8rem; }
  .wc-head { font-size: 1.28rem; }
}
@media print { .wc-band { border: 2px solid #000; } }