/* Tri-Cities AI Lab base styles and shared components (homepage-v2).
 * Loaded on every page after tokens.css. Component classes are listed in
 * docs/homepage-v2.md; build pages from these before writing page CSS. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports (overflow: clip) { html, html body { overflow-x: clip; } }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button, a, input, label, select, summary, textarea { touch-action: manipulation; }
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--ink); }
p { text-wrap: pretty; }
a { color: var(--teal-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--navy); }
strong, b { font-weight: 700; color: var(--ink); }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.on-navy :focus-visible, .band--navy :focus-visible, .site-footer :focus-visible, .page-open :focus-visible { outline-color: var(--teal-on-navy); }
::selection { background: var(--teal-tint); color: var(--ink); }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 8px; top: -80px; z-index: 1000;
  background: var(--navy); color: var(--white); padding: 12px 18px;
  border-radius: var(--r-control); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--white); }
.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;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.wrap--text { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.band { padding-block: var(--section-y); }
.band--paper { background: var(--paper); }
.band--mist { background: var(--mist); }
.band--white { background: var(--white); }
.band--navy { background: var(--navy); color: var(--on-navy); }
.band--navy h1, .band--navy h2, .band--navy h3, .on-navy h1, .on-navy h2, .on-navy h3 { color: var(--white); }
.band--navy a:not(.button), .on-navy a:not(.button) { color: var(--white); }
.band--paper + .band--paper { padding-top: 0; }
.flow > * + * { margin-top: var(--flow, 1em); }
.section-head { max-width: 62ch; margin-bottom: var(--s8); }
.section-head p { margin-top: var(--s3); color: var(--muted); }
.band--navy .section-head p { color: var(--on-navy); }
.kicker { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--teal-text); margin-bottom: var(--s2); }
.band--navy .kicker, .on-navy .kicker { color: var(--on-navy-muted); }
.lead { font-size: 1.0625rem; color: var(--body); max-width: 60ch; }
.band--navy .lead, .on-navy .lead { color: var(--on-navy); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-tiny); }
.center { text-align: center; }

/* ---------- Buttons and links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 10px 20px;
  border: 1.5px solid transparent; border-radius: var(--r-control);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.button svg { width: 18px; height: 18px; flex: none; }
.button--primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.button--primary:hover { background: var(--navy-raised); border-color: var(--navy-raised); color: var(--white); }
.button--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.button--secondary:hover { background: var(--mist); color: var(--navy); }
.button--light { background: var(--white); color: var(--navy); border-color: var(--white); }
.button--light:hover { background: var(--mist); color: var(--navy); }
.button--outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.button--outline-light:hover { border-color: var(--white); color: var(--white); background: var(--navy-raised); }
.button--block { display: flex; width: 100%; }
.button--lg { min-height: 52px; font-size: 1.0625rem; }
.button:disabled, .button[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.button-row--split > * { flex: 1 1 0; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  font-weight: 600; color: var(--teal-text); text-decoration: underline;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.text-link:hover { color: var(--navy); }
.band--navy .text-link, .on-navy .text-link { color: var(--white); }
.text-link--back::before { content: "\2039"; font-size: 1.25em; line-height: 1; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--mist); color: var(--ink);
  font-size: var(--fs-tiny); font-weight: 600; line-height: 1.3;
}
.pill--line { background: var(--white); border: 1px solid var(--line-strong); }
.pill--teal { background: var(--teal-tint); color: var(--teal-text); }
.pill--ochre { background: var(--ochre-tint); color: var(--ochre-text); }
.pill--navy { background: var(--navy); color: var(--white); }
.pill--on-navy { background: var(--navy-raised); color: var(--white); }
.pill-list { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; list-style: none; }

/* ---------- Choice chips ---------- */
.chip-grid { display: grid; gap: var(--s2); grid-template-columns: 1fr; padding: 0; list-style: none; }
.chip-grid--two { grid-template-columns: 1fr 1fr; }
.chip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font-size: 1rem; font-weight: 500; line-height: 1.3; text-align: left; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--teal); color: var(--ink); }
.chip--go::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-top: 2px solid var(--muted);
  transform: rotate(45deg); margin-right: 4px;
}
.chip[aria-pressed="true"], .chip:has(input:checked) {
  background: var(--teal-tint); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal);
}
.chip[aria-pressed="true"]::before, .chip:has(input:checked)::before {
  content: ""; order: 2; flex: none; width: 10px; height: 6px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg) translateY(-2px);
}
.chip--compact { min-height: var(--tap); padding: 10px 12px; font-size: 0.9375rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }

/* ---------- Progress ---------- */
.progress { display: flex; align-items: center; gap: var(--s3); }
.progress__label { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); white-space: nowrap; }
.progress__bars { display: flex; gap: 4px; flex: 1; }
.progress__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.progress__bar[data-done] { background: var(--teal); }

/* ---------- Form controls ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.input, .textarea, .select {
  width: 100%; min-height: var(--tap); padding: 10px 12px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: 1rem;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--teal); }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); }

/* ---------- Notes ---------- */
.note { border-radius: var(--r-control); padding: var(--s4); }
.note__title { display: block; font-size: var(--fs-small); font-weight: 700; margin-bottom: 4px; }
.note--week { background: var(--ochre-tint); color: var(--ochre-text); }
.note--week .note__title { color: var(--ochre-text); }
.note--honest { border: 1px dashed var(--honest-border); background: transparent; color: var(--body); }
.note--honest .note__title { color: var(--ink); }
.note--mist { background: var(--mist); }

/* ---------- Cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6); }
.card--mist { background: var(--mist); border-color: transparent; }
.card--navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.card--navy h2, .card--navy h3 { color: var(--white); }
.link-card { display: flex; gap: var(--s3); align-items: center; text-decoration: none; color: inherit; }
.link-card:hover { color: inherit; }
.link-card.card--navy, .link-card.card--navy:hover { color: var(--on-navy); }
.link-card.card--navy:hover { background: var(--navy-raised); }
.icon-circle {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: 50%; background: var(--navy-raised); color: var(--white);
}
.icon-circle svg { width: 18px; height: 18px; }

/* ---------- Result card (container query) ---------- */
.result-card { container-type: inline-size; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.result-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  background: var(--navy); color: var(--white); padding: 10px var(--s4);
  font-size: var(--fs-small); font-weight: 600;
}
.result-card__body { padding: var(--s5) var(--s4); display: grid; gap: var(--s5); }
.result-card__body h2 { font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); }
.result-block__title { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.hours { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.hours__num { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); color: var(--ink); line-height: 1.2; }
.hours__year { font-size: var(--fs-small); color: var(--muted); margin-top: 4px; }
.hours__unit { font-weight: 600; color: var(--muted); }
@container (min-width: 560px) {
  .result-card__body { padding: var(--s6) var(--s8); }
  .result-card__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

/* ---------- Case file (container query) ---------- */
.case-file { container-type: inline-size; }
.case-file__inner { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) var(--s4); }
.case-file--mist .case-file__inner { background: var(--mist); border-color: transparent; }
.case-file__label { display: block; font-size: var(--fs-tiny); font-weight: 700; color: var(--teal-text); margin-bottom: 6px; }
.case-file h3 { margin-bottom: var(--s3); }
.flow-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; margin: 0 0 var(--s4); list-style: none; }
.flow-strip li { display: inline-flex; align-items: center; gap: 6px; }
.flow-strip li:not(:last-child)::after { content: ""; width: 10px; height: 1px; background: var(--line-strong); }
.case-file dl { display: grid; gap: var(--s3); }
.case-file__row dt { font-size: var(--fs-tiny); font-weight: 700; color: var(--ink); }
.case-file__row dd { margin: 2px 0 0; color: var(--body); }
.case-file__row--person { background: var(--navy); color: var(--white); border-radius: var(--r-control); padding: var(--s3) var(--s4); }
.case-file__row--person dt, .case-file__row--person dd { color: var(--white); }
.case-file__more-toggle { margin-top: var(--s2); }
.case-file__actions { margin-top: var(--s5); }
@container (min-width: 620px) {
  .case-file__inner { padding: var(--s8); }
  .case-file__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s4); align-items: baseline; }
  .case-file__row dd { margin: 0; }
}
.case-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  /* Equal-height cards with the buttons on one line at the bottom. */
  .case-grid > .case-file { display: flex; }
  .case-grid .case-file__inner { display: flex; flex-direction: column; width: 100%; }
  .case-grid .case-file__actions { margin-top: auto; padding-top: var(--s5); }
}
@media (min-width: 1100px) {
  .case-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Workflow demo (container query) ---------- */
.demo { container-type: inline-size; }
.demo__jobs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-bottom: var(--s4); }
.demo__job { position: relative; padding-right: 36px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.demo__job small { font-size: var(--fs-tiny); color: var(--muted); font-weight: 400; }
.demo__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0; margin: 0 0 var(--s4); list-style: none; }
.demo__step {
  position: relative; display: grid; place-items: center; gap: 4px; width: 100%; min-height: var(--tap); padding: 6px 4px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font-weight: 700; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.demo__step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; font-size: var(--fs-tiny); font-weight: 500; line-height: 1.25; color: var(--muted); }
.demo__step[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.demo__step[aria-expanded="true"] .demo__step-label { color: var(--on-navy); }
.demo__step[data-done]:not([aria-expanded="true"]) { background: var(--teal-tint); border-color: var(--teal); }
.demo__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5) var(--s4); min-height: 280px; }
.demo__card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.demo__card-head .progress__label { display: block; }
.demo__card h3 { font-size: 1.25rem; margin-top: 4px; }
.demo__card dl { display: grid; gap: var(--s2); background: var(--mist); border-radius: var(--r-control); padding: var(--s4); margin-top: var(--s3); }
.demo__card dt { font-size: var(--fs-tiny); font-weight: 700; color: var(--muted); }
.demo__card dd { margin: 0 0 4px; color: var(--ink); }
.demo__doc { font-family: var(--font-serif); font-weight: 600; font-size: 0.9375rem; line-height: 1.55; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s4); margin-top: var(--s3); }
.demo__doc p + p { margin-top: var(--s2); }
.demo__doc mark { background: var(--teal-tint); color: var(--ink); padding: 1px 3px; border-radius: 3px; }
.demo__check { display: flex; gap: var(--s3); align-items: center; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--white); cursor: pointer; }
.demo__check + .demo__check { margin-top: var(--s2); }
.demo__check input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; }
.demo__check:has(input:checked) { background: var(--teal-tint); border-color: var(--teal); }
.demo__nav { display: flex; gap: var(--s3); margin-top: var(--s4); }
.demo__nav > * { flex: 1; }
.demo__ok { display: flex; gap: var(--s2); align-items: center; font-weight: 600; color: var(--teal-text); margin-top: var(--s3); }
.demo__ok svg { width: 20px; height: 20px; flex: none; }
.demo__flag { background: var(--ochre-tint); color: var(--ochre-text); border-radius: var(--r-control); padding: var(--s3) var(--s4); margin-top: var(--s3); }
.demo__flag strong { color: var(--ochre-text); }
.demo__locked { border: 1px dashed var(--honest-border); border-radius: var(--r-control); padding: var(--s4); margin-top: var(--s3); }
.demo__summary { display: grid; gap: var(--s2); margin-top: var(--s3); }
@container (min-width: 640px) {
  .demo__steps { gap: var(--s2); }
  .demo__step { min-height: 84px; align-content: start; padding: 10px 8px; }
  .demo__step-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .demo__card, .demo__nav { max-width: 720px; margin-inline: auto; }
  .demo__card { padding: var(--s6) var(--s8); }
  .demo__jobs { max-width: 720px; margin-inline: auto; margin-bottom: var(--s5); }
}

/* ---------- Diagnostic ---------- */
.diag { container-type: inline-size; }
.diag__step { display: grid; gap: var(--s4); }
.diag__step h2 { font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); }
.diag__picked { font-size: var(--fs-small); color: var(--muted); }
.diag__actions { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; }
.diag__actions .button { min-width: 9rem; }
.diag__foot { font-size: var(--fs-small); color: var(--muted); margin-top: var(--s4); display: grid; gap: 2px; }
.diag__foot a { color: var(--teal-text); }
/* Call and Text inside a sentence (partials/contact_actions.html): the pair
   moves to the next line as one unit while it fits on one line, and wraps
   inside itself when it does not (large text on a narrow screen), so no link
   is pushed out of view. */
.contact-actions--inline { display: inline-block; }
/* The separator and Text never split, so a line never ends with the separator. */
.contact-actions__tail { white-space: nowrap; }
.sms-preview { background: var(--mist); border-radius: var(--r-control); padding: var(--s4); }
.sms-preview__text { font-size: 0.9375rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
@container (min-width: 440px) {
  .diag .chip-grid--auto { grid-template-columns: 1fr 1fr; }
}

/* ---------- Numbered steps ---------- */
.steps { display: grid; gap: var(--s5); padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); align-items: start; counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 700;
}
.steps h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.steps p { color: var(--body); margin-top: 2px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s8); } }

/* ---------- FAQ (native details) ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 56px; padding: var(--s3) 0; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--teal-text); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: var(--s4); max-width: 65ch; }
.faq details > div > * + * { margin-top: var(--s2); }

/* ---------- Person ---------- */
.person { display: grid; gap: var(--s5); align-items: start; }
.person__head { display: flex; gap: var(--s4); align-items: center; }
.person__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; }
.person__name { font-size: 1.375rem; }
.person__role { color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 900px) {
  .person { grid-template-columns: 200px 1fr; gap: var(--s10); }
  .person__head { display: block; }
  .person__photo { width: 200px; height: 200px; margin-bottom: var(--s4); }
}

/* ---------- Talk band ---------- */
.talk { display: grid; gap: var(--s4); max-width: 640px; }
.talk p { color: var(--on-navy); }
.talk__fine { font-size: var(--fs-small); color: var(--on-navy-muted) !important; }

/* ---------- Interior page opening ---------- */
.page-open { background: var(--navy); color: var(--on-navy); padding-block: var(--s8) var(--s10); }
.page-open h1 { color: var(--white); font-size: clamp(2rem, 1.6rem + 1.9vw, 3.25rem); max-width: 22ch; }
.page-open .lead { margin-top: var(--s3); color: var(--on-navy); }
.page-open .kicker { color: var(--on-navy-muted); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0 0 var(--s4); list-style: none; font-size: var(--fs-small); color: var(--on-navy-muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--on-navy-muted); }
.crumbs a { color: var(--on-navy); }
.crumbs [aria-current] { color: var(--on-navy-muted); }
@media (min-width: 768px) { .page-open { padding-block: var(--s12) var(--s16); } }

/* ---------- Prose (articles, legal pages, long form) ---------- */
.prose { font-size: var(--fs-body); color: var(--body); max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote { border-left: 3px solid var(--teal); padding-left: var(--s4); color: var(--ink); }
.prose img { border-radius: var(--r-control); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.prose--article { font-size: var(--fs-article); max-width: 70ch; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); background: var(--mist); font-weight: 700; }
@media (max-width: 640px) {
  .prose table.stack, .prose table.stack tbody, .prose table.stack tr, .prose table.stack td { display: block; width: 100%; }
  .prose table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .prose table.stack tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-control); padding: var(--s2) var(--s4); margin-bottom: var(--s3); }
  .prose table.stack td { border: 0; padding: 6px 0; }
  .prose table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-tiny); font-weight: 700; color: var(--muted); }
}

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; gap: var(--s4); min-height: 60px; }
.site-header__logo { display: block; margin-right: auto; }
.site-header__logo img { width: 150px; height: auto; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--s1); padding: 0; margin: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px; color: var(--ink); font-weight: 500; font-size: 0.9375rem; text-decoration: none; border-radius: 6px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--teal-text); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
/* Call and Text (partials/contact_actions.html), shown from 1100px like Book. */
.site-header__contact { display: none; align-items: center; gap: var(--s2); white-space: nowrap; }
.site-header__contact .contact-actions__sep { color: var(--muted); }
/* In the header and footer rows the separator and Text keep the row's gap. */
.site-header__contact .contact-actions__tail,
.site-footer__phone .contact-actions__tail { display: inline-flex; align-items: center; column-gap: var(--s2); }
.site-header__phone-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; font-size: 0.9375rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-header__phone-link:hover { color: var(--teal-text); }
.site-header__book { display: none; min-height: 40px; padding: 8px 14px; font-size: 0.9375rem; }
.icon-button {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; background: transparent; color: var(--navy); border-radius: var(--r-control); cursor: pointer;
}
.icon-button:hover { background: var(--mist); color: var(--navy); }
.icon-button svg { width: 22px; height: 22px; }
@media (min-width: 1100px) {
  .site-header__bar { min-height: 76px; gap: var(--s6); }
  .site-header__logo { margin-right: 0; }
  .site-header__logo img { width: 170px; }
  .site-nav { display: block; margin-right: auto; }
  .site-header__contact, .site-header__book { display: inline-flex; }
  .site-header__icon { display: none; }
}
/* 1100 to 1199px: the full bar is a tight fit, so the spacing and the logo
   tighten instead of nav labels and Book breaking onto two lines. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .site-header__bar { gap: var(--s4); }
  .site-header__logo img { width: 150px; }
  .site-nav a { padding: 0 8px; }
}

/* Mobile menu: native <dialog> */
.menu-dialog {
  margin: 0 0 0 auto; padding: 0; border: 0; width: min(88vw, 380px); max-width: none;
  height: 100dvh; max-height: none; background: var(--white); color: var(--ink);
}
.menu-dialog::backdrop { background: rgba(14, 36, 56, 0.55); }
.menu-dialog__inner { display: flex; flex-direction: column; min-height: 100%; padding: var(--s3) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom)); }
.menu-dialog__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.menu-dialog__title { font-weight: 700; }
.menu-dialog nav ul { padding: 0; list-style: none; border-top: 1px solid var(--line); }
.menu-dialog nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.menu-dialog nav a:hover { color: var(--teal-text); }
.menu-dialog__sub a { font-weight: 400 !important; font-size: 1rem !important; min-height: 48px !important; padding-left: var(--s4); color: var(--body) !important; }
.menu-dialog__actions { display: grid; gap: var(--s2); margin-top: var(--s6); }
/* "Book 15 minutes" does not fit half the menu width: it takes its own full-width row. */
.menu-dialog__actions .button-row--split > [data-book] { flex-basis: 100%; }
/* The talk band's "Book 15 minutes" wraps to two lines beside Call below 430px.
   Give it its own full-width row there instead, the same fix as the menu. */
@media (max-width: 429px) { .talk .button-row--split > [data-book] { flex-basis: 100%; } }
.menu-dialog__area { margin-top: auto; padding-top: var(--s6); font-size: var(--fs-small); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .menu-dialog[open] { animation: menu-in 180ms ease-out; }
  @keyframes menu-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- Mobile sticky action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--line);
}
.action-bar .button { min-height: 48px; padding: 8px; font-size: 0.9375rem; }
.action-bar[data-state="off"] { visibility: hidden; transform: translateY(100%); }
@media (prefers-reduced-motion: no-preference) {
  .action-bar { transition: transform 160ms ease-out, visibility 160ms; }
}
@media (max-width: 767px) {
  body.has-action-bar .site-footer { padding-bottom: calc(var(--s8) + var(--action-bar-h) + env(safe-area-inset-bottom)); }
  body.has-action-bar .klaro .cookie-notice { bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 768px) { .action-bar { display: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy); padding-block: var(--s10) var(--s8); font-size: 0.9375rem; }
.site-footer a:not(.button) { color: var(--on-navy); text-decoration: none; }
.site-footer a:not(.button):hover { color: var(--white); text-decoration: underline; }
.newsletter-card .kicker { color: var(--on-navy-muted); margin: 0; }
.site-footer__grid { display: grid; gap: var(--s8); }
.site-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); padding: 0; list-style: none; }
.site-footer__links a { display: flex; align-items: center; min-height: var(--tap); }
.site-footer__contact { display: grid; gap: 2px; }
.site-footer__contact a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer__phone { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); }
.site-footer__phone .contact-actions__sep { color: var(--on-navy-muted); }
.site-footer__area { color: var(--on-navy-muted); font-size: var(--fs-small); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--navy-raised); font-size: var(--fs-small); color: var(--on-navy-muted); }
.site-footer__legal a, .site-footer__legal button { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--on-navy-muted); background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.site-footer__legal a:hover, .site-footer__legal button:hover { color: var(--white); text-decoration: underline; }
.site-footer__copy { margin-right: auto; line-height: var(--tap); }
.newsletter-card { background: var(--navy); border-radius: var(--r-card); padding: var(--s6); display: grid; gap: var(--s3); }
.newsletter-card h2 { color: var(--white); font-size: 1.5rem; }
.newsletter-card p { color: var(--on-navy); }
@media (min-width: 900px) {
  .site-footer { padding-block: var(--s16) var(--s8); }
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 0.8fr; align-items: start; gap: var(--s10); }
}

/* ---------- Home: diagnostic hero ---------- */
.hero { background: var(--paper); }
.hero__intro { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; padding-block: var(--s8) var(--s10); }
.hero__intro h1 { color: var(--white); max-width: 14ch; }
.hero__intro .lead { margin-top: var(--s4); }
.hero__checks { display: none; }
.hero__ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; pointer-events: none; }
.hero__intro > .hero__text { position: relative; z-index: 1; }
.hero__panel { padding-block: var(--s5) var(--s8); }
.hero__card { container-type: inline-size; }
.hero__card-head { display: none; }
@media (min-width: 1000px) {
  .hero { background: var(--mist); }
  /* Full-bleed halves; the text and the card line up with the header's content edges. */
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__intro { padding: var(--s16) var(--s12) 180px calc(max(0px, (100vw - var(--wrap-max)) / 2) + var(--gutter)); }
  .hero__intro > .hero__text { padding-inline: 0; }
  .hero__checks { display: grid; gap: var(--s3); padding: 0; margin-top: var(--s8); list-style: none; }
  .hero__checks li { display: flex; gap: var(--s3); align-items: center; color: var(--on-navy); }
  .hero__checks svg { width: 20px; height: 20px; color: var(--teal-on-navy); flex: none; }
  .hero__panel { padding: var(--s12) calc(max(0px, (100vw - var(--wrap-max)) / 2) + var(--gutter)) var(--s12) var(--s12); display: grid; align-items: start; justify-items: start; }
  .hero__card { background: var(--white); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--s6) var(--s8); width: 100%; max-width: 640px; }
  .hero__card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); }
  .hero__card-head h2 { font-size: 1.375rem; }
  .hero__card-head .text-link { min-height: 0; font-size: var(--fs-small); }
}
.home-kicker-wide { display: none; }
@media (min-width: 1000px) { .home-kicker-wide { display: inline; } }

/* ---------- Print ---------- */
@media print {
  .site-header, .action-bar, .site-footer, .menu-dialog, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* ---------- Diagnostic details ---------- */
.diag { scroll-margin-top: 84px; }
.diag__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.diag__head h2 { font-size: 1.375rem; }
.diag__meta { font-size: var(--fs-small); color: var(--muted); margin-top: calc(-1 * var(--s2)); }
[data-fs-view] { view-transition-name: first-step; }
.fs-restoring [data-fs-step="1"] { visibility: hidden; }
.diag__result { display: grid; gap: var(--s4); }
.diag__result > .text-link { justify-self: start; }
.diag__talk { display: grid; gap: var(--s3); padding-top: var(--s2); }
.diag__talk h3 { font-size: 1.375rem; }
.diag__talk > .text-link { justify-self: start; }
.fs-dialog { width: min(92vw, 440px); border: 0; border-radius: var(--r-card); padding: var(--s6); color: var(--ink); }
.fs-dialog::backdrop { background: rgba(14, 36, 56, 0.55); }
@media (max-width: 999px) {
  /* The mobile hero already names the tool; keep the heading for screen readers. */
  .page-home .diag__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* ---------- Case file disclosure ---------- */
.case-file__more { margin-block: var(--s3); border-block: 1px solid var(--line); }
.case-file--mist .case-file__more { border-color: var(--line-strong); }
.case-file__more > summary {
  display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); cursor: pointer;
  list-style: none; font-weight: 600; color: var(--teal-text);
}
.case-file__more > summary::-webkit-details-marker { display: none; }
.case-file__more > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-right: 2px;
}
.case-file__more[open] > summary::before { transform: rotate(45deg); }
.case-file__more > dl { padding-bottom: var(--s3); }
.case-file__inner > dl + dl { margin-top: var(--s3); }
mark.placeholder { background: #FFF3B0; color: #5A4300; padding: 0 4px; border-radius: 3px; }
.case-file__row--person mark.placeholder { color: #5A4300; }

/* ---------- Demo fallback and link ---------- */
.demo__static { padding-left: 1.3em; display: grid; gap: var(--s2); max-width: 720px; }
.demo__case { max-width: 720px; margin: var(--s3) auto 0; }

.demo__job[aria-pressed="true"]::before { position: absolute; top: 16px; right: 14px; }

/* ---------- Case study long form ---------- */
.cs-longform h2 { display: flex; align-items: center; gap: var(--s3); font-size: 1.5rem; }
.cs-h2-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mist); }
.cs-h2-icon svg { width: 16px; height: 16px; stroke: var(--teal-text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-limitations { border: 1px dashed var(--honest-border); border-radius: var(--r-control); padding: var(--s5); }
.cs-limitations h2 { margin-top: 0; font-size: 1.25rem; }
.cs-limitations > * + * { margin-top: 0.6em; }
.cs-diagram-img-wrap { display: block; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.cs-diagram-img-wrap img { width: 100%; height: auto; border-radius: 0; }
.cs-image-slot { border: 1px dashed var(--line-strong); border-radius: var(--r-control); padding: var(--s6); text-align: center; color: var(--muted); }
.cs-summary { margin-top: calc(-1 * var(--s10)); position: relative; }
@media (min-width: 768px) { .cs-summary { margin-top: calc(-1 * var(--s12)); } }
.link-list { display: grid; gap: var(--s2); padding: 0; list-style: none; }
.cs-findings { list-style: none; padding: 0 !important; }
.cs-findings > li { padding: var(--s4) 0; border-top: 1px solid var(--line); margin: 0 !important; }
.cs-findings > li:last-child { border-bottom: 1px solid var(--line); }
.cs-findings h3 { margin: 0 0 4px; font-size: 1.125rem; }
.cs-anon-note, .cs-note { background: var(--mist); border-radius: var(--r-control); padding: var(--s4) var(--s5); font-size: var(--fs-small); color: var(--muted); }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); }
.cs-stat { background: var(--mist); border-radius: var(--r-control); padding: var(--s4); }
.cs-stat-value { font-family: var(--font-serif); font-weight: 600; font-size: 2rem; color: var(--ink); line-height: 1.1; }
.cs-stat-label { font-size: var(--fs-small); color: var(--muted); }
.cs-scan-img-wrap { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.cs-scan-caption { font-size: var(--fs-small); color: var(--muted); }

/* Headlines never italicize or color single words (pre-v2 markup used <em>). */
h1 em, h2 em, h3 em, h1 i, h2 i, h3 i { font-style: normal !important; color: inherit !important; font-weight: inherit; }
.page-open a:not(.button) { color: var(--white); }

/* ---------- Platform features (Phase 9) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}
/* Form state without JavaScript: flag a field only after the visitor has
   interacted with it, and mark the label of a required field that is empty. */
.field:has(:user-invalid) label { color: var(--ochre-text); }
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: var(--ochre-text); }
form:has(:user-invalid) [type="submit"] { opacity: 0.85; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

/* Keep focused and anchored elements clear of the sticky header, and on
   phones of the action bar (idea carried over from the svc-v2 pass). */
html { scroll-padding-top: 84px; }
@media (max-width: 767px) { html { scroll-padding-bottom: calc(var(--action-bar-h) + 24px); } }

/* ---------- Header dropdowns (Services, Who we help) ----------
   Disclosure pattern: the label stays a link, the chevron button toggles the
   list (aria-expanded) for keyboard and touch; hover opens it for a mouse. */
.site-nav__item { position: relative; display: flex; align-items: center; }
.site-nav__toggle {
  display: inline-grid; place-items: center; width: 28px; height: var(--tap); margin-left: -8px;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px;
}
.site-nav__toggle svg { width: 10px; height: 6px; }
.site-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav .site-nav__sub {
  position: absolute; top: calc(100% - 4px); left: 0; z-index: 60; min-width: 240px;
  display: none; flex-direction: column; gap: 0; padding: var(--s2) 0; margin: 0; list-style: none;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
}
.site-nav__item--sub:hover > .site-nav__sub,
.site-nav__toggle[aria-expanded="true"] + .site-nav__sub { display: flex; }
.site-nav__item--sub:hover > .site-nav__toggle svg { transform: rotate(180deg); }
.site-nav .site-nav__sub a { display: flex; min-height: 40px; padding: 8px 16px; border-radius: 0; font-size: 0.9375rem; }
.site-nav .site-nav__sub a:hover { background: var(--mist); }
.menu-dialog__sub { padding: 0 0 var(--s2) !important; border-top: 0 !important; list-style: none; }
.menu-dialog nav .menu-dialog__sub a { border-bottom: 0; min-height: 44px; padding-left: var(--s4); font-weight: 400; font-size: 1rem; color: var(--body); }

/* Talk band: centered on tablet and desktop, left-aligned on phones. */
@media (min-width: 768px) {
  .talk { margin-inline: auto; text-align: center; }
  .talk h2, .talk p { margin-inline: auto; }
}

/* Find your first step: the section matched to the visitor's path
   (PATH_CONTENT in static/js/first-step.js). Hidden or in default order
   unless a path is chosen; html[data-fs-path] is set before first paint. */
.fs-alt { display: none; }
html[data-fs-path="missed-leads"] #see-missed-call { display: block; }
html[data-fs-path="getting-found"] #cf-ai-readiness,
html[data-fs-path="website"] #cf-website-rebuild { order: -1; }

/* ==========================================================================
   Utilities. Keep this block LAST in site.css: nothing after it, so these
   rules win ties on specificity and source order.
   ========================================================================== */

/* Accessible-name suffixes and text for screen readers only. Same recipe as
   .sr-only above; pages that were told to use the name "visually-hidden"
   use this one. Never use it to hide content that sighted visitors need. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* <span class="eyebrow"> inside an <h1>: the small label above a headline,
   as part of the headline for search and screen readers, drawn exactly like
   the label it stands for and not in the H1's type. Every property the H1
   would hand down is set here.
   Default: the .kicker in site.css (Public Sans 0.875rem 600, teal text,
   8px under). On navy (homepage hero, .page-open, .band--navy, .on-navy):
   the same muted blue-grey the kicker turns to there. On svc-v2 pages
   (services, industries, case files): the .v2-label in svc-v2.css (14px 600,
   line-height 1.4, its own teal), 14px under as .cs-label on case files;
   on a dark svc-v2 band, the light teal the site uses for labels there. */
h1 .eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  font-style: normal;
  line-height: var(--lh-body);
  letter-spacing: normal;
  text-transform: none;
  text-wrap: pretty;
  color: var(--teal-text);
  margin: 0 0 var(--s2);
}
.band--navy h1 .eyebrow, .on-navy h1 .eyebrow, .page-open h1 .eyebrow, .hero__intro h1 .eyebrow { color: var(--on-navy-muted); }
.svc-v2 h1 .eyebrow { font-size: 14px; line-height: 1.4; color: var(--v2-teal-text, var(--teal-text)); margin-bottom: 14px; }
.svc-v2 :is(.v2-dark, .v2-closing, .v2-on-navy) h1 .eyebrow { color: var(--v2-teal-light, var(--teal-on-navy)); }