/* Medrecords AI — hub design system, 2026.
 *
 * One stylesheet behind every index/hub page (/guides/, /best/, /compare/,
 * /alternatives/, /reports/, /content-hub/, /product/, /solutions/). Source is
 * the founder-supplied Guides comp: warm paper ground, Newsreader for display,
 * forest green as the only action colour, per-collection accents reserved for
 * wayfinding.
 *
 * Everything is prefixed .h26- so it cannot collide with the inline styles the
 * rest of the static build carries. Inlined into pages by scripts/inline-css.mjs.
 *
 * The neutral ramp is shifted one step darker than the comp: the site chrome
 * (nav, footer, #ctd wrapper) paints #F4F2EC, and using the comp's lighter
 * #FAF9F5 here would put a visible seam under the sticky header on every page.
 */

.h26 {
  /* ---- Brand ---------------------------------------------------------- */
  --forest: #2F6B50;
  --forest-hover: #275A43;
  --forest-tint: #EDF4EF;

  /* ---- Collection accents (wayfinding only, never decoration) ---------- */
  --verify: #357A56;
  --verify-wash: #E2EDE7;
  --flag: #96700F;
  --flag-wash: #F3E9CE;
  --insight: #5A49C4;
  --insight-wash: #E8E5F7;

  /* ---- Warm neutral text ramp ----------------------------------------- */
  --ink: #16140F;
  --body: #3A3833;
  --slate: #514E46;
  --slate-soft: #5F5B52;
  --faint: #6F6B62;
  --mute: #97917F;

  /* ---- Surfaces -------------------------------------------------------- */
  --paper: #F4F2EC;
  --surface-card: #FFFFFF;
  --surface-raised: #ECE9E2;
  --hairline: #E4DFD5;
  --soft-rule: #EAE5DB;

  /* ---- Form -------------------------------------------------------------*/
  --radius-chip: 8px;
  --radius-button: 11px;
  --radius-card: 16px;
  --shadow-rest: none; /* 2026-10-15: no shadows at rest (premium pass) */
  --shadow-raised: 0 4px 10px rgba(22,20,15,.07), 0 10px 28px rgba(22,20,15,.08);
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .22s;

  --font-serif: Newsreader, Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--paper);
  color: var(--body);
}

.h26 *, .h26 *::before, .h26 *::after { box-sizing: border-box; }
.h26 a { text-decoration: none; color: inherit; }
.h26 :focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 4px;
}

.h26-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---------- Hero ------------------------------------------------------- */
.h26-hero {
  background: var(--forest-tint);
  border-bottom: 1px solid var(--hairline);
}
.h26-hero > .h26-wrap { padding-top: 60px; }

.h26-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--slate-soft);
}
.h26-crumb a { color: var(--forest); font-weight: 500; }
.h26-crumb a:hover { color: var(--forest-hover); text-decoration: underline; text-underline-offset: 3px; }
.h26-crumb span[aria-hidden] { color: var(--mute); }

.h26-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px; align-items: end; margin-top: 22px;
}
.h26-h1 {
  font-family: var(--font-serif);
  font-weight: 600; font-size: clamp(38px, 4.4vw, 58px);
  line-height: 1.05; letter-spacing: -.02em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.h26-lede {
  font-size: 18px; line-height: 1.6; color: var(--slate);
  margin: 22px 0 0; max-width: 620px; text-wrap: pretty;
}

/* Hero meta. The byline is the page's authorship signal, so it reads as text,
 * not as a caption: same measure as the lede, one step down in size. */
.h26-byline {
  font-size: 14px; line-height: 1.5; color: var(--faint);
  margin: 16px 0 0; max-width: 620px;
}
.h26-byline a {
  color: var(--forest); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.h26-byline a:hover { border-bottom-color: var(--forest); }
.h26-note {
  font-size: 13px; line-height: 1.55; color: var(--mute);
  margin: 10px 0 0; max-width: 620px;
}

/* Listee panel. The "Listed here?" line already existed, but it sat in the
   smallprint under the rows, which on an 8,000-row page nobody listed there
   will ever reach. Promoted into the hero, because the person it is written
   for arrives by searching their own name and leaves from the top of the page.
   Styled as a quiet rule-and-inset, not a card, so it does not compete with
   the stat block beside it. */
.h26-claim {
  margin: 14px 0 0; padding: 12px 0 0; max-width: 620px;
  border-top: 1px solid var(--soft-rule);
  font-size: 13px; line-height: 1.55; color: var(--mute);
}
.h26-claim b { color: var(--ink); font-weight: 650; }
.h26-claim a {
  color: var(--forest); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease);
}
.h26-claim a:hover { border-bottom-color: var(--forest); }

/* Stat block: three facts about the collection, not a hero-metric flourish. */
.h26-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--surface-card); box-shadow: var(--shadow-rest); overflow: hidden;
}
.h26-stats > div { padding: 20px 22px; border-right: 1px solid var(--soft-rule); }
.h26-stats > div:last-child { border-right: 0; }
.h26-stat-n {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 34px; line-height: 1; color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.h26-stat-l {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate-soft); margin-top: 10px;
}

/* ---------- Filter bar -------------------------------------------------- */
.h26-bar {
  display: flex; align-items: center; gap: 24px;
  margin-top: 44px; padding-bottom: 20px;
}
.h26-pills {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 4px;
}
.h26-pill {
  border: 0; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; padding: 8px 16px;
  border-radius:6px; color: var(--slate-soft); background: transparent;
  display: flex; align-items: center; gap: 8px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.h26-pill:hover { color: var(--ink); }
.h26-pill[aria-pressed="true"] {
  color: #FFF; background: var(--forest); box-shadow: var(--shadow-rest);
}
.h26-pill-n { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .72; }

.h26-search {
  display: flex; align-items: center; gap: 10px;
  width: 320px; height: 42px; padding: 0 14px; margin-left: auto;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.h26-search:focus-within {
  border-color: var(--forest); box-shadow: 0 0 0 4px rgba(47,107,80,.16);
}
.h26-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink);
}
.h26-search input::placeholder { color: var(--faint); }
.h26-search button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--slate-soft); padding: 0;
}

/* ---------- Featured ---------------------------------------------------- */
.h26-kicker-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.h26-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--forest);
}
.h26-kicker-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }

.h26-featured {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px;
}
.h26-lead {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 300px; background: var(--ink); color: #F4F2EC;
  border-radius: var(--radius-card); padding: 36px 40px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.h26-lead:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.h26-lead-top { display: flex; align-items: center; gap: 10px; }
.h26-lead-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: #97CBAC;
}
.h26-lead-badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px; color: #97CBAC;
  background: rgba(151,203,172,.14); border-radius:6px; padding: 4px 10px;
}
.h26-lead h2 {
  color: #F4F2EC; /* the card is an <a>; .h26 a{color:inherit} outranks .h26-lead */
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -.015em;
  margin: 0; max-width: 520px; text-wrap: balance;
}
.h26-lead p {
  font-size: 15.5px; line-height: 1.6; color: #C9C4B8;
  margin: 16px 0 0; max-width: 520px; text-wrap: pretty;
}
.h26-lead-tags { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.h26-lead-tags span {
  font-size: 12px; font-weight: 600; color: #F4F2EC;
  background: rgba(244,242,236,.1); border: 1px solid rgba(244,242,236,.16);
  border-radius: var(--radius-chip); padding: 5px 10px;
}
.h26-lead-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 28px;
}
.h26-lead-cta { font-size: 14px; font-weight: 600; color: #97CBAC; }
.h26-lead-meta { font-family: var(--font-mono); font-size: 11.5px; color: #9A958A; }

.h26-feat-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.h26-feat-card {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 26px 28px;
  box-shadow: var(--shadow-rest);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.h26-feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.h26-feat-card h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 22px;
  line-height: 1.25; color: var(--ink); margin: 10px 0 0;
}
.h26-feat-card p {
  font-size: 14px; line-height: 1.55; color: var(--slate-soft); margin: 8px 0 0;
}
.h26-tag {
  align-self: flex-start; font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: var(--radius-chip); padding: 5px 9px; white-space: nowrap;
}

/* ---------- Collections ------------------------------------------------- */
.h26-section {
  scroll-margin-top: 92px; padding: 56px 0 8px;
  border-top: 1px solid var(--soft-rule); margin-top: 40px;
}
.h26-section-grid {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px; align-items: start;
}
.h26-rail { position: sticky; top: 92px; }
.h26-rail-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  border-radius:6px; padding: 5px 12px;
}
.h26-rail-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.h26-rail h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: 30px;
  line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 8px 0 0;
}
.h26-rail p {
  font-size: 14.5px; line-height: 1.6; color: var(--slate-soft);
  margin: 12px 0 0; text-wrap: pretty;
}
.h26-rail-count {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--faint); margin-top: 18px;
}
.h26-rail-link {
  display: inline-block; margin-top: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--forest);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.h26-rail-link:hover { border-bottom-color: var(--forest); }

.h26-groups { display: flex; flex-direction: column; gap: 36px; }
.h26-group-label { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.h26-group-label span:first-child {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.h26-group-rule { flex: 1; height: 1px; background: var(--soft-rule); }

.h26-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.h26-card {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 22px 24px 20px;
  box-shadow: var(--shadow-rest); min-height: 168px;
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.h26-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-raised);
  border-color: var(--accent, var(--forest));
}
/* Accent edge keys the card to its collection; the sticky rail carries the
   same colour, so it reads as wayfinding rather than ornament. */
.h26-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent, var(--forest));
}
.h26-card h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: 19px;
  line-height: 1.28; color: var(--ink); margin: 0; text-wrap: pretty;
}
.h26-card p {
  font-size: 13.5px; line-height: 1.55; color: var(--slate-soft);
  margin: 10px 0 0; text-wrap: pretty;
}
.h26-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--soft-rule);
}
.h26-card-foot > span:first-child {
  font-size: 12.5px; font-weight: 600; color: var(--forest); white-space: nowrap;
}
.h26-card-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; border-radius: var(--radius-chip);
  padding: 3px 8px; white-space: nowrap;
}
.h26-card-spacer { flex: 1; }

/* ---------- Directory tiles --------------------------------------------- */
/* For collections where every page shares one templated description (the 326
   alternatives pages, the 323 head-to-heads). Repeating that sentence 326 times
   is noise, so the tile carries the vendor name and nothing else, and the
   description is stated once in the section rail. */
.h26-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.h26-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 14px 12px 16px;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.h26-tile:hover {
  border-color: var(--accent, var(--forest));
  background: var(--forest-tint); transform: translateX(2px);
}
.h26-tile-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.h26-tile-t {
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere;
}
.h26-tile-m {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.4;
  color: var(--faint); overflow-wrap: anywhere;
}
.h26-tile-a {
  font-size: 14px; color: var(--mute); flex-shrink: 0;
  transition: color var(--dur) var(--ease);
}
.h26-tile:hover .h26-tile-a { color: var(--forest); }

/* With no pill row the search field is the only control, so it leads the bar
   instead of being pushed to the right margin of an empty row. */
.h26-bar:not(:has(.h26-pills)) .h26-search { margin-left: 0; width: 100%; max-width: 520px; }

/* ---------- Empty state ------------------------------------------------- */
.h26-empty {
  margin-top: 40px; padding: 64px 40px; text-align: center;
  border: 1px dashed var(--hairline); border-radius: var(--radius-card);
}
.h26-empty-h {
  font-family: var(--font-serif); font-weight: 600; font-size: 24px; color: var(--ink);
}
.h26-empty p { font-size: 14.5px; color: var(--slate-soft); margin: 10px 0 20px; }
.h26-empty button {
  border: 1px solid var(--hairline); background: var(--surface-card);
  border-radius: var(--radius-button); padding: 9px 16px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
}

/* ---------- Also-see ---------------------------------------------------- */
.h26-also { border-top: 1px solid var(--soft-rule); padding-top: 48px; }
.h26-also-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.h26-also-card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--surface-raised); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 26px 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.h26-also-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.h26-also-t {
  display: block;
  font-family: var(--font-serif); font-weight: 600; font-size: 21px;
  line-height: 1.25; color: var(--ink);
}
.h26-also-d {
  display: block;
  font-size: 14px; line-height: 1.55; color: var(--slate-soft); margin-top: 6px;
}
.h26-also-arrow {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center; color: #F4F2EC; font-size: 16px;
}

/* ---------- Filtering state (JS sets [hidden]) --------------------------- */
.h26 [hidden] { display: none !important; }
.h26-nojs .h26-bar { display: none; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1080px) {
  .h26-hero-grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .h26-section-grid { grid-template-columns: 1fr; gap: 24px; }
  .h26-rail { position: static; }
  .h26-featured { grid-template-columns: 1fr; }
  .h26-feat-side { grid-template-rows: auto auto; }
}
@media (max-width: 860px) {
  .h26-wrap { padding: 0 24px; }
  .h26-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .h26-search { width: 100%; margin-left: 0; }
  .h26-grid, .h26-also-grid { grid-template-columns: 1fr; }
  .h26-lead { padding: 28px 26px; min-height: 0; }
  .h26-lede { font-size: 16.5px; }
}
@media (max-width: 560px) {
  .h26-wrap { padding: 0 18px; }
  .h26-stats { grid-template-columns: 1fr; }
  .h26-stats > div { border-right: 0; border-bottom: 1px solid var(--soft-rule); }
  .h26-stats > div:last-child { border-bottom: 0; }
  .h26-also-card { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .h26 * { transition: none !important; }
  .h26-lead:hover, .h26-card:hover, .h26-feat-card:hover, .h26-also-card:hover,
  .h26-tile:hover {
    transform: none;
  }
}

/* ---------- Directory rows ---------------------------------------------- */
/* A directory carries two or three stats depending on whether its rows link
   anywhere, so the track count follows the content. It is set here rather than
   inline because site.js rewrites any inline grid-template-columns it finds. */
.h26-dir .h26-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.h26-dir .h26-stats > div { padding: 18px 16px; }
.h26-dir .h26-stat-l { hyphens: auto; }
/* Restated at this specificity, and after the shared query rather than inside it:
   the auto-fit rule above is the later declaration and would otherwise win the
   narrow viewport back, leaving a two-up grid with an orphan third stat. */
@media (max-width: 560px) { .h26-dir .h26-stats { grid-template-columns: 1fr; } }

/* The seven /content-hub/directory/ pages list 250-400 people or companies,
   each with a link out. As a table it needed six columns, and the link column
   sat past the right edge of a horizontally scrolling wrapper: present in the
   markup, unreachable in practice. One row per listing puts the link inside
   the viewport at every width, and the page never scrolls sideways. */
.h26-dir-body { padding-top: 30px; padding-bottom: 56px; }
.h26-dir .hv { margin-bottom: 26px; }

.h26-dir .h26-bar { gap: 12px; flex-wrap: wrap; }
.h26-dir .h26-search {
  margin-left: 0; width: auto; flex: 1 1 auto; max-width: 460px;
}
.h26-dir .h26-search svg { color: var(--faint); flex-shrink: 0; }
.h26-bar-count {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.h26-select { position: relative; flex-shrink: 0; }
.h26-select select {
  appearance: none; -webkit-appearance: none;
  height: 42px; padding: 0 34px 0 14px; max-width: 220px;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.h26-select select:focus-visible {
  border-color: var(--forest); box-shadow: 0 0 0 4px rgba(47,107,80,.16);
}
.h26-select-a {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--faint); font-size: 11px;
}

.h26-rows {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface-card);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest); overflow: hidden;
}
.h26-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start; gap: 0 16px;
  padding: 16px 22px 18px; border-top: 1px solid var(--soft-rule);
  transition: background var(--dur) var(--ease);
  scroll-margin-top: 92px;
  container: h26row / inline-size;
}
.h26-row:target { background: var(--wash, var(--forest-tint)); }
.h26-row:first-child { border-top: 0; }
.h26-row:hover { background: var(--wash, var(--forest-tint)); }

.h26-row-av {
  width: 32px; height: 32px; border-radius: 10px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--wash, var(--forest-tint)); color: var(--accent, var(--forest));
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
}
.h26-row:hover .h26-row-av { background: var(--surface-card); }

/* The body is a container so the facts table below can decide, from the width
   it actually has rather than the viewport, whether to run one or two pairs. */
.h26-row-b {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  container: h26body / inline-size;
}
.h26-row-t {
  font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  letter-spacing: -.005em; overflow-wrap: anywhere;
}
.h26-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.h26-row-meta:empty { display: none; }
.h26-row-chip {
  font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--slate-soft);
  background: var(--surface-raised); border-radius: 6px; padding: 2px 7px;
}
.h26-row:hover .h26-row-chip { background: rgba(255,255,255,.7); }
.h26-row-m {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
  color: var(--slate-soft); overflow-wrap: anywhere;
}

/* The labelled columns, set as a spec sheet: a fixed label column, a value
   column, one hairline per fact. The wrapper div is display: contents so the
   dt/dd pairs are the grid's own cells and every label lines up on one axis.
   Wide rows run two pairs side by side; the pair index is what says which
   side a fact sits on, so the gutter goes on the even-numbered pairs. Never
   set these tracks inline: scripts/site.js collapses any inline
   grid-template-columns to 1fr on mobile. */
.h26-row-fs {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 0; margin: 9px 0 0; padding: 0;
}
.h26-row-fs:empty { display: none; }
.h26-row-fs > div { display: contents; }
.h26-row-fs dt, .h26-row-fs dd {
  margin: 0; border-top: 1px solid var(--soft-rule); min-width: 0;
}
.h26-row-fs dt {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--slate-soft);
  line-height: 1.5; padding: 8px 14px 6px 0;
}
.h26-row-fs dd {
  font-size: 13px; line-height: 1.5; color: var(--body);
  padding: 6px 12px 6px 0; overflow-wrap: anywhere;
}
@container h26body (min-width: 620px) {
  .h26-row-fs { grid-template-columns: 150px minmax(0, 1fr) 150px minmax(0, 1fr); }
  .h26-row-fs > div:nth-child(even) dt { padding-left: 28px; }
}
/* A phone leaves the body about 220px. Two columns there squeeze a value
   into 110px, so the label sits above its value instead. */
@container h26body (max-width: 300px) {
  .h26-row-fs { grid-template-columns: minmax(0, 1fr); }
  .h26-row-fs dt { padding: 8px 0 1px; }
  .h26-row-fs dd { border-top: 0; padding: 0 0 8px; }
}

.h26-row-l { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: -3px; }
/* Beside the sticky card the list is about 690px, and a row's actions run from
   one button to three (236px to 465px). Inline, they took that out of the body,
   so two rows on one page showed two different fact layouts. Stacked, every
   row's body is the same width. The lower bound keeps phones on the inline
   form, where the actions already sit on their own line under the body. */
@container h26row (min-width: 420px) and (max-width: 780px) {
  .h26-row-l { flex-direction: column; align-items: stretch; gap: 5px; }
  .h26-row-link, .h26-row-req { justify-content: center; }
}
/* `.h26 a` (0,1,1) outranks a lone class, so the anchors that set their own
   colour are written with the element in the selector. */
.h26 a.h26-row-link {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--forest);
  background: var(--surface-card);
  border: 1px solid var(--hairline); border-radius: var(--radius-chip);
  padding: 5px 10px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.h26-row-link span { font-size: 11px; opacity: .7; }
.h26 a.h26-row-link:hover {
  border-color: var(--forest); background: var(--forest); color: #FFF;
}
.h26-row-none {
  font-family: var(--font-mono); font-size: 11px; color: var(--mute);
  white-space: nowrap;
}

/* Request contact. These pages publish no phone number and no email address,
   so this button is the only route to a listee. Filled ink so it is the first
   thing the eye lands on in a row (founder, 2026-09-22: the dashed outline was
   too easy to miss). */
.h26-row-req {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #F4F2EC; background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius-chip);
  padding: 6px 12px; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.h26-row-req:hover, .h26-row-req:focus-visible {
  background: var(--forest); border-color: var(--forest); color: #FFFFFF;
  transform: translateY(-1px);
}

.h26-rq {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: hidden;
  border: 1px solid var(--hairline); border-radius:12px;
  background: var(--surface-card); color: var(--ink);
  padding: 0; box-shadow: 0 40px 70px -34px rgba(22, 20, 15, .3);
}
.h26-rq::backdrop { background: rgba(22, 20, 15, .42); }
.h26-rq-form {
  display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 22px;
  max-height: calc(100dvh - 34px); overflow-y: auto; box-sizing: border-box;
}
.h26-rq-top { display: flex; flex-direction: column; gap: 9px; }
.h26-rq-prog {
  list-style: none; margin: 4px 0 2px; padding: 0; display: flex; gap: 6px;
  counter-reset: rq;
}
.h26-rq-prog li {
  flex: 1; counter-increment: rq; font-size: 11.5px; font-weight: 600; color: var(--mute);
  padding-top: 7px; border-top: 3px solid var(--hairline);
}
.h26-rq-prog li::before { content: counter(rq) ". "; }
.h26-rq-prog li.is-on { color: var(--ink); border-top-color: var(--forest); }
.h26-rq-prog li.is-done { color: var(--slate-soft); border-top-color: var(--forest-tint); }
.h26-rq-step { display: flex; flex-direction: column; gap: 14px; }
.h26-rq-step[hidden] { display: none; }
.h26-rq-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.h26-rq-set > legend { font-size: 12.5px; font-weight: 600; color: var(--slate-soft); padding: 0; margin-bottom: 7px; }
.h26-rq-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.h26-rq-chip { position: relative; cursor: pointer; }
.h26-rq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.h26-rq-chip span {
  display: inline-block; font-size: 13px; line-height: 1.3; color: var(--body);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-chip);
  padding: 7px 11px; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.h26-rq-chip:hover span { border-color: var(--slate-soft); }
.h26-rq-chip input:checked + span { background: var(--forest-tint); border-color: var(--forest); color: var(--ink); font-weight: 600; }
.h26-rq-chip input:focus-visible + span { outline: 2px solid var(--forest); outline-offset: 1px; }
.h26-rq-ack { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--body); cursor: pointer; }
.h26-rq-ack input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--forest); flex: none; }
.h26-rq .is-bad > span, .h26-rq .is-bad > legend { color: #A33; }
.h26-rq .is-bad input, .h26-rq .is-bad select, .h26-rq .is-bad .h26-rq-chip span { border-color: #A33; }
.h26-rq-h { font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.h26-rq-who { font-size: 13.5px; color: var(--ink); margin: -4px 0 0; font-weight: 600; }
.h26-rq-note { font-size: 12.5px; line-height: 1.55; color: var(--faint); margin: 0; }
.h26-rq-f { display: flex; flex-direction: column; gap: 5px; }
.h26-rq-f > span { font-size: 12.5px; font-weight: 600; color: var(--slate-soft); }
.h26-rq-f input, .h26-rq-f textarea, .h26-rq-f select {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--hairline); border-radius: 9px;
  padding: 9px 11px; width: 100%; box-sizing: border-box; resize: vertical;
}
.h26-rq-f input:focus, .h26-rq-f textarea:focus, .h26-rq-f select:focus {
  outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest);
}
.h26-rq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.h26-rq-status { font-size: 12.5px; line-height: 1.5; margin: 0; color: var(--faint); }
.h26-rq-status:empty { display: none; }
.h26-rq-status.is-ok { color: var(--forest); font-weight: 600; }
.h26-rq-status.is-warn { color: rgb(137, 103, 35); }
.h26-rq-status.is-bad { color: #A33; }
.h26-rq-act {
  display: flex; gap: 9px; justify-content: flex-end; margin-top: 3px;
  position: sticky; bottom: -22px; background: var(--surface-card); padding: 12px 0 2px;
}
.h26-rq-act .h26-rq-x { margin-right: auto; }
.h26-rq-act [hidden] { display: none; }
.h26-rq-act button {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 10px; padding: 10px 16px;
}
.h26-rq-x, .h26-rq-back { background: transparent; color: var(--slate-soft); border: 1px solid var(--hairline); }
.h26-rq-next { background: var(--forest); color: #FFF; border: 1px solid var(--forest); }
.h26-rq-go { background: var(--forest); color: #FFF; border: 1px solid var(--forest); }
.h26-rq-go[disabled] { opacity: .6; cursor: default; }

.h26-smallprint {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  color: var(--faint); margin: 16px 0 0;
}

/* The about / key facts / sources columns are the page's own prose, lifted
   through this rebuild unchanged. They only need separating from the list. */
.h26-dir .content-split { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--soft-rule); }

@media (max-width: 860px) {
  .h26-dir .h26-bar { flex-direction: row; flex-wrap: wrap; }
  .h26-dir .h26-search { max-width: none; }
  .h26-select select { max-width: none; }
}
@media (max-width: 640px) {
  .h26-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px 12px; padding: 14px 16px 16px;
  }
  .h26-row-av { width: 28px; height: 28px; border-radius: 8px; }
  .h26-row-l { grid-column: 2 / -1; flex-wrap: wrap; }
  .h26-bar-count { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h26-row, .h26-row-link, .h26-row-req { transition: none; }
}

/* The Medrecords AI card beside a directory list. It is sticky because the
   lists run to thousands of rows and a card that scrolls away is seen once;
   92px matches the rail offset already used elsewhere on these pages.
   Below 1080px the grid folds to one column and the card stops being sticky,
   so on a phone it lands after the listings instead of covering them. */
.h26-dir-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px; align-items: start;
}
.h26-ad { position: sticky; top: 92px; }
.h26-ad-card {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 22px;
  box-shadow: var(--shadow-rest);
}
.h26-ad-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin: 0;
}
.h26-ad-h {
  font-family: var(--font-serif); font-weight: 600; font-size: 21px;
  line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 10px 0 0;
}
.h26-ad-p {
  font-size: 14px; line-height: 1.6; color: var(--slate-soft);
  margin: 10px 0 0; text-wrap: pretty;
}
.h26-ad-list { list-style: none; margin: 16px 0 0; padding: 0; }
.h26-ad-list li {
  position: relative; padding-left: 16px; margin-top: 9px;
  font-size: 13.5px; line-height: 1.5; color: var(--slate);
}
.h26-ad-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--forest);
}
.h26-ad-list b { color: var(--ink); font-weight: 600; }
.h26 a.h26-ad-cta {
  display: block; margin-top: 18px; padding: 11px 16px; text-align: center;
  background: var(--forest); color: #FFFFFF; border-radius: var(--radius-button);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: background var(--dur) var(--ease);
}
.h26 a.h26-ad-cta:hover { background: var(--forest-hover); }
.h26-ad-fine {
  font-size: 12px; line-height: 1.5; color: var(--faint); margin: 9px 0 0;
}

@media (max-width: 1080px) {
  .h26-dir-grid { grid-template-columns: 1fr; gap: 32px; }
  .h26-ad { position: static; }
  .h26-ad-card { max-width: 520px; }
}

/* "Get listed" — a floating CTA on every directory page, for a visitor who is
   not on a list, or whose entry is wrong, and has no other way to reach us.
   The trigger is a real link with a mailto fallback so it works with JS off;
   directory-filter.js intercepts the click to open the fuller form instead. */
.h26-gl-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius:6px;
  background: var(--forest); color: #FFFFFF;
  font-size: 14px; font-weight: 650; text-decoration: none;
  box-shadow: var(--shadow-raised);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.h26-gl-fab:hover { background: var(--forest-hover); transform: translateY(-1px); }
.h26-gl-fab svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .h26-gl-fab { right: 14px; bottom: 14px; padding: 12px; }
  .h26-gl-fab span { display: none; }
}

/* ---------- Long lists -------------------------------------------------
   These directories run to thousands of rows. The browser was laying out and
   painting every one of them, including the ~2,600 nobody was looking at, and
   that is what made the wheel feel heavy. content-visibility lets it skip the
   rows outside the viewport. 170px is the measured median row on the longest
   of these lists; the rows themselves run from 77px to 487px, so it is a first
   guess and nothing more, and the auto keyword is what matters: once a row has
   rendered the browser remembers its real height and stops guessing.
   scripts/directory-filter.js adds the jump bar that goes with this. */
.h26-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 170px;
}

.h26-jump {
  position: fixed; top: 0; left: 0; right: 0; z-index: 38;
  background: var(--surface-card);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-rest);
  transform: translateY(-101%);
  transition: transform var(--dur) var(--ease);
}
.h26-jump.is-on { transform: none; }
.h26-jump-in {
  max-width: 1200px; margin: 0 auto; padding: 8px 40px;
  display: flex; align-items: center; gap: 14px;
}
.h26-jump-az {
  display: flex; align-items: center; gap: 1px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.h26-jump-az::-webkit-scrollbar { display: none; }
.h26-jump-az button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--slate-soft);
  width: 26px; height: 28px; flex-shrink: 0; border-radius: 7px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.h26-jump-az button:hover:not(:disabled) {
  color: #FFF; background: var(--accent, var(--forest));
}
.h26-jump-az button:disabled { color: var(--mute); opacity: .4; cursor: default; }
.h26-jump-c {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.h26-jump-b {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 12px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--surface-card);
  border: 1px solid var(--hairline); border-radius: var(--radius-button);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.h26-jump-b:hover { border-color: var(--forest); background: var(--forest-tint); }
.h26-jump-b svg { flex-shrink: 0; }

@media (max-width: 880px) {
  .h26-jump-in { padding: 6px 14px; gap: 8px; }
  .h26-jump-c { display: none; }
  .h26-jump-b span { display: none; }
  .h26-jump-b { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .h26-jump { transition: none; }
}