/* ==========================================================================
   solutions-healthcare.css — /solutions/healthcare (Kestrel Health)
   Written 2026-09-05 (solutions wave B); rebuilt the same evening on the two
   standing rules at the end of docs/briefs/PIPELINE.md §2 ("simplify", and
   "every mock is a port of the real product"). Loads after feature-v2.css,
   home.css, hero-film.css and widgets-real.css.

   Six things worth knowing before editing:

   1. The hero is HeroFilm. Nothing here touches .hero-film, .moment, .m-card
      or .pp--tl: that markup is the contract with hero-film.css and
      feature-v2.js.
   2. The week is one rail, not five sections. A hairline runs down a 108px
      gutter, a day marker sits on it, and beside the marker there are two
      sentences and one screen. A marker with a ring (.is-day) starts a new day
      and a plain marker continues the day before it, so Mon / Tue / Wed / Wed
      / Fri reads down the rail before any of the words do. The rail is drawn
      per beat, not as one absolute line, so it stops at the first and last
      marker rather than dangling past them.
   3. Every beat has the same rhythm on purpose: a timeline whose rows vary is
      not a timeline. The variety is in the four screens, which are four
      genuinely different product surfaces. Do not reintroduce alternating
      left/right rows or a full-width breakout row.
   4. Each screen is a port of real product code, named in the page's header
      comment. Where a value here looks odd against the rest of the site, it is
      almost always the product's: the 42px react-select control and its 4px
      radius, the 25px provider mark and the 10px label offset, the amber basis
      banner inside the board card, the 10px AI pips, the 7px share-of-voice
      track, the red #d92040 REC pill.
   5. Two site rules override the product inside those ports, and nothing else
      does. Nothing renders under 13px (the product's captions are 11.5 to
      12.5px and its league pills 11px), and muted text is #5b6076 (the
      product's #667085 and #6b7280 fail the floor on the tints these screens
      use). #5b6076 measures 6.21:1 on white, 5.80 on --v2-card, 5.70 on
      --ghost and 5.65 on #f8f9fc. Do not lighten it back. The banner keeps the
      product's own #6b4c00 on #fff4d6, which measures 7.2:1.
   6. No border-left accents, no hover lift on a screen, no reveal on a
      <section>, no card inside a card.
   ========================================================================== */

/* ---------- the strip: six marks (Lachlan, 2026-09-05) ---------- */
@media (min-width: 992px) { .hl-page .v2-logos ul { justify-content: space-between; gap: 28px; } }
.hl-page .v2-logos img[alt="Brendale Medical Centre"] { max-height: 44px; }
.hl-page .v2-logos img[alt="Gold Coast &amp; Tweed Eye Doctors"], .hl-page .v2-logos img[alt="Gold Coast & Tweed Eye Doctors"] { max-height: 30px; }
.hl-page .v2-logos img[alt="London Gynaecology"] { max-height: 30px; }
.hl-page .v2-logos img[alt="The Lash Lounge"] { max-height: 28px; }
.hl-page .v2-logos img[alt="Dracut Chiropractic Center"] { max-height: 34px; }

/* the shared blockquote carries a 40px browser default margin that nothing else resets */
.hl-page .tq blockquote { margin: 0; }

/* ==========================================================================
   THE WEEK: the rail
   ========================================================================== */
.hl-week { --hl-rail: 108px; --hl-gap: clamp(26px, 3vw, 46px); --hl-pad: clamp(30px, 3.4vw, 46px); --hl-mark: 25px; }
.hl-head {
  display: grid; grid-template-columns: var(--hl-rail) minmax(0, 1fr); column-gap: var(--hl-gap);
  margin-bottom: clamp(34px, 4vw, 56px);
}
.hl-head > * { grid-column: 2; max-width: 720px; }

.hl-rail { margin: 0; padding: 0; list-style: none; }
.hl-beat {
  position: relative;
  display: grid;
  grid-template-columns: var(--hl-rail) minmax(0, .86fr) minmax(0, 1.14fr);
  column-gap: var(--hl-gap);
  align-items: start;
  padding: var(--hl-pad) 0;
}
.hl-beat:first-child { padding-top: 0; }
.hl-beat:last-child { padding-bottom: 0; }
/* the rail itself, drawn per beat so it begins and ends at a marker */
.hl-beat::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--hl-rail) / 2 - 1px);
  width: 2px; border-radius: 2px; background: #dfe5ff;
}
/* --hl-mark is the marker's radius, so the rail begins and ends at the centre of the first and last marker */
.hl-beat:first-child::before { top: var(--hl-mark); }
.hl-beat:last-child::before { bottom: auto; height: calc(var(--hl-pad) + var(--hl-mark)); }

/* the marker: a day on the rail. A ring means the day changed. */
.hl-mark { grid-column: 1; grid-row: 1 / 40; align-self: start; display: flex; justify-content: center; }
.hl-day {
  position: relative; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 1px var(--v2-line);
  font: 600 13.5px/1 var(--font-display); color: #5b6076;
}
.hl-beat.is-day .hl-day { background: #eef2ff; box-shadow: 0 0 0 2px var(--blue); color: var(--blue); }

.hl-copy { grid-column: 2; }
.hl-copy h3 {
  font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.hl-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.hl-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.hl-links a { font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none; }
.hl-links a::after { content: " \2192"; }
.hl-links a:hover { text-decoration: underline; }

/* the folded objection: the two sentences the cut section was carrying */
.hl-foot {
  margin-top: clamp(34px, 3.6vw, 48px);
  margin-left: calc(var(--hl-rail) + var(--hl-gap));
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--v2-line);
  max-width: 66ch;
  font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty;
}
.hl-foot i { font-style: normal; color: var(--ink); font-weight: 500; }

/* ==========================================================================
   THE FOUR SCREENS. One frame, four ported surfaces.
   ========================================================================== */
.hl-screen {
  grid-column: 3; min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow);
}

/* the marks: a provider initial in a white disc (a system with no sprite gets its initial) */
.hl-mk {
  flex: none; width: 25px; height: 25px; border-radius: 7px;
  display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line);
  font-style: normal; font: 700 13px/1 var(--font-display); color: #1f7a6c;
}
.hl-mk--c { color: var(--blue); }
.hl-mk--c .icon { width: 15px; height: 15px; }
/* a real vendor mark sits on the same white disc, at the Cloutly mark’s size and in its own brand colour */
.hl-mk .icon, .hl-mk .mk-logo { width: 15px; height: 15px; }
.hl-mk .mk-logo { display: block; object-fit: contain; }

/* the head the automation and AI screens share */
.hl-scr-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--v2-line);
}
.hl-scr-t { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.hl-scr-loc { font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.hl-scr-loc b { font-weight: 600; color: var(--ink); }

/* ---------- 1 · the Nookal automation (AutomationsDetailsModal + AutomationForm + SelectLabel + AutomationSummary)
   "When this happens:" / "Do this:" are the summary's own labels. The control is react-select's: a 42px row with a
   1px border and a 4px radius, the 25px provider mark, the label 10px in, and the green IconCheckCircle (#009900,
   16px) that marks an authorised trigger. ---------- */
.hl-auto-l { margin: 14px 0 7px; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.hl-sel {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 6px 12px;
  border: 1px solid #cccccc; border-radius: 4px; background: #fff;
  font: 400 14.5px/1.35 var(--font-body); color: var(--ink);
}
.hl-sel > span { min-width: 0; }
.hl-ok { flex: none; width: 16px; height: 16px; margin-left: auto; color: #009900; }

/* ---------- 2 · Staff recognition (Board + BoardRow + Strips.BasisBanner) ----------
   The product's card head, its amber basis banner INSIDE the card directly under that head, its five-track row, its
   value-over-caption slots and its chips. The rank-1 disc is the product's color-mix of the primary at 12% behind
   text at 60%, resolved to hex. */
.hl-scr--lb { padding: 0; overflow: hidden; }
.hl-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.hl-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.hl-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.hl-lb-basis {
  padding: 11px 20px 12px; border-bottom: 1px solid rgba(176, 122, 0, .2);
  background: #fff4d6; font: 400 13px/1.5 var(--font-body); color: #6b4c00;
}
.hl-lb-basis b { font-weight: 700; }
.hl-lb-b { padding: 0 6px; }
.hl-lb-r {
  display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 14px 14px 14px 10px;
}
/* the product's metrics row is a flex with a 26px gap; here the two slots are grid tracks, so the gap is on them */
.hl-lb-r > .hl-lb-slot + .hl-lb-slot { margin-left: 12px; }
.hl-lb-r + .hl-lb-r { border-top: 1px solid #e7e9f2; }
.hl-lb-rank { font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums; }
.hl-lb-r.is-lead .hl-lb-rank {
  width: 27px; height: 27px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e0e8ff; color: #002499;
}
.hl-lb-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 15px/1 var(--font-display);
}
.hl-lb-who { min-width: 0; }
.hl-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.hl-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.hl-lb-slot { min-width: 86px; text-align: right; }
.hl-lb-slot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.hl-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.hl-chip {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: #f1f5f9; color: #475569; font: 500 13px/1.4 var(--font-display); white-space: nowrap;
}
.hl-chip.is-up { background: #e6f7ea; color: #0c7a52; }

/* ---------- 3 · the booking page, with the real widget markup inside it ---------- */
.hl-book-h { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.hl-svc { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--v2-card); }
.hl-svc b { display: block; font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.hl-svc span { font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.hl-svc em { flex: none; font: 600 13px/1.3 var(--font-display); font-style: normal; color: var(--blue); }
.hl-btn { display: block; margin-top: 12px; padding: 11px 16px; border-radius: 10px; background: #5b6480; font: 600 14px/1.3 var(--font-display); color: #fff; text-align: center; }
/* the widget sits under the button, the way it does on a real booking page: the kit's own paddings are trimmed so it
   reads as a snippet inside the mock rather than as a second card */
.hl-strip { margin-top: 14px; }
.hl-page .hl-strip .cw2-agg { gap: 12px; margin-bottom: 14px; }
.hl-page .hl-strip .cw2-agg-big { font-size: 30px; }
.hl-page .hl-strip .cw2-card + .cw2-card { margin-top: 10px; }
.hl-page .hl-strip .cw2-card { padding: 13px 14px; }
.hl-page .hl-strip .cw2-text { font-size: 13.5px; }

/* ---------- 4 · the AI Search league (AiSearchView: Band, the toolbar, leagueRow, Pips) ----------
   The product's band with one denominator, its filter pills and sort control, its 7px share-of-voice track and its
   10px per-assistant pips (#e3e6ef off, --ins-good #00845a on). Pills are 13px here, not the product's 11px. */
.hl-ai-band { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.hl-ai-band > b { font: 800 30px/1 var(--font-display); letter-spacing: -.03em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.hl-ai-band > b span { font: 600 17px/1 var(--font-display); letter-spacing: -.01em; color: #5b6076; }
.hl-ai-band > p { max-width: 24ch; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); }
.hl-ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 12px; border-radius: 10px 10px 0 0; background: #f8f9fc; box-shadow: inset 0 0 0 1px #e4e7ef; }
.hl-ai-bar i { padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e7ef; font-style: normal; font: 600 13px/1.3 var(--font-display); color: #5b6076; white-space: nowrap; }
.hl-ai-bar i.is-on { background: #eef2ff; box-shadow: inset 0 0 0 1px #ccd7ff; color: #0b0e1a; }
.hl-ai-sort { margin-left: auto; padding: 5px 9px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e4e7ef; font: 600 13px/1.3 var(--font-display); color: #5b6076; white-space: nowrap; }
.hl-ai-t { box-shadow: inset 0 0 0 1px #e4e7ef; border-radius: 0 0 10px 10px; overflow: hidden; }
.hl-ai-r { display: grid; grid-template-columns: minmax(0, 1fr) 118px 46px; gap: 10px; align-items: center; padding: 10px 14px; }
.hl-ai-r + .hl-ai-r { border-top: 1px solid #eff1f6; }
.hl-ai-n { min-width: 0; font: 600 13px/1.35 var(--font-display); color: #0b0e1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-ai-sov { display: flex; align-items: center; gap: 7px; }
.hl-ai-sov b { min-width: 34px; font: 700 13px/1.3 var(--font-display); color: #0b0e1a; font-variant-numeric: tabular-nums; }
.hl-ai-track { flex: 1; height: 7px; border-radius: 4px; background: #eff1f6; overflow: hidden; }
.hl-ai-track i { display: block; height: 100%; border-radius: 4px; background: var(--blue); opacity: .85; }
.hl-pips { display: inline-flex; justify-content: flex-end; gap: 4px; }
.hl-pips i { width: 10px; height: 10px; border-radius: 50%; background: #e3e6ef; }
.hl-pips i.is-hit { background: #00845a; }
.hl-ai-key { margin-top: 12px; font: 400 13px/1.5 var(--font-body); color: #5b6076; }

/* ---------- proof: the product fact, then the one quote ---------- */
.hl-page .hl-proof { padding-bottom: 0; }
.hl-page .hl-proof .col > .h { max-width: 780px; margin: 0 auto; }
/* the quote steps down from the h2 rather than sitting in 400px of white */
.hl-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(48px, 5vw, 72px); }
.hl-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.hl-page .tq figcaption { margin-top: 26px; }

/* ---------- breakpoints ----------
   Two steps. Under 1180px the screen drops below its copy but the rail stays, because the rail is the page's device.
   Under 992px the rail flattens and the day becomes a chip above the heading. */
@media (max-width: 1180px) {
  .hl-beat { grid-template-columns: var(--hl-rail) minmax(0, 1fr); }
  .hl-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .hl-week { --hl-rail: 0px; }
  .hl-head { display: block; }
  .hl-beat { grid-template-columns: 1fr; padding: clamp(28px, 3.4vw, 40px) 0; }
  .hl-beat::before { display: none; }
  .hl-beat + .hl-beat { border-top: 1px solid var(--v2-line); }
  .hl-copy, .hl-screen { grid-column: 1; }
  .hl-mark { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-bottom: 14px; }
  .hl-day {
    width: auto; height: auto; border-radius: 999px; padding: 5px 13px;
    background: #eef2ff; box-shadow: none; color: var(--blue);
  }
  .hl-beat.is-day .hl-day { box-shadow: none; }
  .hl-copy h3 { max-width: 26ch; }
  .hl-copy p { max-width: 62ch; }
  .hl-screen { max-width: 560px; }
  .hl-foot { margin-left: 0; }
}
@media (max-width: 620px) {
  .hl-screen { padding: 14px; }
  .hl-scr--lb { padding: 0; }
  /* the board's row goes flex on a phone, the way the product's own board does: rank, avatar and name on the first
     line, then the two value-over-caption slots side by side under them */
  .hl-lb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 13px 10px; }
  .hl-lb-rank { width: 22px; }
  /* the desktop rank disc centres itself in its track with `margin: 0 auto`, which in a flex row would push the
     avatar to the far edge */
  .hl-lb-r.is-lead .hl-lb-rank { width: 24px; height: 24px; margin: 0; }
  .hl-lb-av { width: 34px; height: 34px; font-size: 14px; }
  .hl-lb-who { flex: 1 1 calc(100% - 110px); }
  .hl-lb-slot { flex: none; min-width: 0; text-align: left; }
  .hl-lb-r > .hl-lb-slot + .hl-lb-slot { margin-left: 0; }
  .hl-lb-slot > b.hl-chip { display: inline-block; }
  .hl-lb-basis { padding: 11px 14px 12px; }
  .hl-lb-h { padding: 15px 14px 13px; }
  .hl-ai-band { flex-wrap: wrap; }
  .hl-ai-r { grid-template-columns: minmax(0, 1fr) 96px 46px; }
  .hl-svc { flex-wrap: wrap; gap: 6px; }
}