/* ==========================================================================
   solutions-home-care.css — /solutions/home-care
   (solutions wave B, 2026-09-05; rebuilt the same evening under
   docs/pipeline/REDESIGN-COMMON.md on Lachlan's two rulings: "hugely wordy, if
   you're going to use a timeline, style it creatively rather than dump an essay
   onto the page. Remember, simplify!" and "you're building a lot of generic
   graphics next to paragraph blocks. They're dead giveaways for lazy AI. These
   blocks need to be polished, elevated or closer to the real product.")
   Loads after feature-v2.css, feature-v3.css, home.css and hero-film.css.

   Prefix is .care-, not .hc-: the page once shared nine .hc-* names with
   /solutions/healthcare and the declarations conflicted (healthcare has since
   moved to .hl-, so nothing owns .hc- now).

   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.
   2. The fortnight is one device, and it is a GAUGE, not a rail with markers.
      Each beat carries a fourteen-rung ladder in the left gutter, one rung per
      day, lit up to that beat's day: 1, then 4, then 12, then every rung for
      "any day". The four gauges fill down the page, so the fortnight advances
      before any of the words are read. The five sibling solutions pages own
      the day disc, the top pip strip, the service stub, the day tab and the
      five-beat disc rail; this page owns the gauge. Do not swap it for a
      hairline.
   3. Every beat has the same rhythm on purpose: a sequence whose rows vary is
      not a sequence. The variety is in the four screens, which are four
      genuinely different product surfaces. Do not reintroduce alternating
      left/right rows. The one exception is .is-wide, the Locations beat: that
      card has seven columns and cannot be read in a 520px column, so its
      screen spans the full measure under its copy.
   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 19px modal title at -0.02em, the 26px
      count, the 40px select with its 6px radius, the 40px board and inbox
      avatars, the 18px source badge, the 6px chip radius, the 32px outline
      button with its 16px sparkle.
   5. Two site rules override the product inside those ports, and nothing else
      does. Nothing renders under 13px (the product's captions run 11 to
      12.5px), and muted text is #5b6076 (the product's #667085, #6b7280 and
      #989898 all fail the floor on these tints). #5b6076 measures 6.21:1 on
      white, 5.80 on --v2-card, 5.70 on --ghost and 5.65 on #f3f4f6. Do not
      lighten it back.
   6. The Locations table is the only thing wide enough to overflow. It scrolls
      inside .care-scroll (a focusable region) and the long column headings swap
      to short ones under 1080px. Under 723px the card drops to Location,
      Rating and Status, so the phone shows the reason without a sideways
      scroll.
   ========================================================================== */

.care-page .v2-logos img.is-tall { max-height: 34px; }

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

/* ==========================================================================
   THE FORTNIGHT: the gauge
   ========================================================================== */
.care-week { --care-rail: 84px; --care-gap: clamp(24px, 2.8vw, 40px); --care-pad: clamp(26px, 3vw, 40px); }
.care-head {
  display: grid; grid-template-columns: var(--care-rail) minmax(0, 1fr); column-gap: var(--care-gap);
  margin-bottom: clamp(28px, 3.2vw, 44px);
}
.care-head > * { grid-column: 2; max-width: 720px; }

.care-rail { margin: 0; padding: 0; list-style: none; }
.care-beat {
  display: grid;
  grid-template-columns: var(--care-rail) minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: var(--care-gap);
  align-items: start;
  padding: var(--care-pad) 0;
}
.care-beat:first-child { padding-top: 0; }
.care-beat:last-child { padding-bottom: 0; }
.care-beat + .care-beat { border-top: 1px solid var(--v2-line); }

/* the gauge: the day, then fourteen rungs lit to it */
.care-mark {
  grid-column: 1; grid-row: 1 / 40; align-self: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
}
.care-day { font: 600 13.5px/1 var(--font-display); color: var(--blue); white-space: nowrap; }
.care-gauge { display: flex; flex-direction: column; gap: 6px; }
.care-gauge i { width: 13px; height: 3px; border-radius: 2px; background: #dfe5ff; }
.care-gauge i.is-on { width: 20px; background: #8fa6ff; }
.care-gauge i.is-now { width: 28px; height: 4px; background: var(--blue); }
.care-gauge.is-any i.is-on { width: 20px; background: #b3c2ff; }

.care-copy { grid-column: 2; }
.care-copy h3 {
  font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.care-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.care-copy p b { color: var(--ink); font-weight: 600; }
.care-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.care-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none;
}
.care-links a:hover { text-decoration: underline; }
.care-links .icon { width: 15px; height: 15px; }

/* the Locations beat: seven columns need the whole measure, so the screen sits under the copy */
.care-beat.is-wide { grid-template-columns: var(--care-rail) minmax(0, 1fr); }
.care-beat.is-wide .care-copy { max-width: 62ch; }
.care-beat.is-wide .care-screen { grid-column: 2; margin-top: 20px; }
.care-cap { grid-column: 2; margin-top: 10px; font: 400 13px/1.5 var(--font-body); color: #5b6076; }

/* ==========================================================================
   THE RESTRAINT BAND
   The buyer's worry in this vertical is a platform that goes off and pesters a
   family in the middle of something hard, so the band answers it with four
   rules the product enforces (claims §B6c). One tinted panel, the argument as
   a heading, the rules on hairlines: four identical tiles would be the card
   grid the site bans, and these are rules, which read as a list.
   ========================================================================== */
.care-vows-sec { padding: clamp(30px, 3.2vw, 48px) 0 clamp(4px, .6vw, 10px); }
.care-vows {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  column-gap: clamp(28px, 3.4vw, 56px); align-items: start;
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 44px);
  border-radius: 22px; background: #f3f6ff; box-shadow: inset 0 0 0 1px rgba(0, 61, 255, .09);
}
.care-vows .h { font-size: clamp(25px, 2.5vw, 33px); line-height: 1.15; max-width: 17ch; }
.care-vows-l { margin: 0; padding: 0; list-style: none; }
.care-vows-l li {
  display: grid; grid-template-columns: 19px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 13px 0;
}
.care-vows-l li + li { border-top: 1px solid rgba(0, 61, 255, .12); }
.care-vows-l li:first-child { padding-top: 2px; }
.care-vows-l li:last-child { padding-bottom: 2px; }
.care-vows-l .icon { width: 19px; height: 19px; margin-top: 2px; color: var(--blue); flex: none; }
/* #5b6076 measures 5.66:1 on #f3f6ff; the bold lead of each rule is ink */
.care-vows-l span { font: 400 15.5px/1.55 var(--font-body); color: #5b6076; text-wrap: pretty; }
.care-vows-l b { color: var(--ink); font-weight: 600; }

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

/* ---------- 1 · the CSV import (ContactsImportModal) ----------
   The modal's own title and description, its Location select (multi-location accounts only), the file row it swaps
   the dropzone for once a file is read, the count over its noun, the three-row sample, the campaign checkbox and the
   primary button with the confirmation sentence the product prints before the button is pressed. */
.care-imp-h { padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); }
.care-imp-h b { display: block; font: 700 19px/1.3 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.care-imp-h em { display: block; margin-top: 3px; font-style: normal; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.care-imp-l { margin: 14px 0 6px; font: 600 13px/1.4 var(--font-display); color: var(--ink); }
.care-sel {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 6px 12px;
  border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
  font: 400 14px/1.35 var(--font-body); color: var(--ink);
}
.care-sel > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.care-chev { flex: none; width: 14px; height: 14px; margin-left: auto; color: #5b6076; }
.care-file {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  margin-top: 14px; padding: 9px 13px; border: 1px solid var(--v2-line); border-radius: 11px;
}
.care-file span { min-width: 0; font: 500 13px/1.4 var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.care-file i { flex: none; font-style: normal; font: 600 13px/1.4 var(--font-display); color: var(--blue); }
.care-imp-n { display: flex; align-items: baseline; gap: 7px; margin-top: 13px; font: 500 14px/1.3 var(--font-display); color: var(--ink); }
.care-imp-n b { font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.care-imp-go {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px;
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--v2-line);
}
.care-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 15px; border-radius: 8px; background: var(--blue);
  font: 600 14px/1 var(--font-display); color: #fff;
}
.care-cta .icon { width: 15px; height: 15px; }

/* ---------- 2 · Staff recognition (Board + BoardRow + Strips) ----------
   The product's card head, the name-matching banner where Board.js renders it, the five-track row, the
   value-over-caption slots and the chips. The rank-1 disc is the product's color-mix of the primary at 12% behind
   text at 60%, resolved to hex. */
.care-scr--lb { padding: 0; overflow: hidden; }
.care-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.care-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.care-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.care-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;
}
.care-lb-basis b { font-weight: 700; }
.care-lb-b { padding: 0 6px; }
.care-lb-r {
  display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto auto; gap: 13px; 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 */
.care-lb-r > .care-lb-slot + .care-lb-slot { margin-left: 12px; }
.care-lb-r + .care-lb-r { border-top: 1px solid #e7e9f2; }
.care-lb-rank { font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums; }
.care-lb-r.is-lead .care-lb-rank {
  width: 27px; height: 27px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e0e8ff; color: #002499;
}
.care-lb-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 15px/1 var(--font-display);
}
.care-lb-who { min-width: 0; }
.care-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.care-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.care-lb-slot { min-width: 84px; text-align: right; }
.care-lb-slot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.care-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.care-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;
}
.care-chip.is-up { background: #e6f7ea; color: #0c7a52; }

/* ---------- 3 · the Locations card (LocationsCard + scorecardData) ----------
   The card head is the product's: an h3, the computed digest under it, and the ghost "Download locations CSV" button
   on the right. Every string in the table is claims §A1; nothing here is the page's own invention except the caption
   outside the card, which names the visitor's city because the product's card carries none. */
.care-scr--tbl { padding: 16px 18px 8px; }
.care-tbl-h {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--v2-line);
}
.care-tbl-h b { display: block; font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.care-tbl-h em { display: block; margin-top: 3px; font-style: normal; font: 400 13px/1.45 var(--font-body); color: #5b6076; }
.care-ghost {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #d1d5db;
  font: 500 13px/1 var(--font-display); color: #374151;
}
.care-dl { width: 14px; height: 14px; transform: rotate(90deg); }
/* statusAsOfNote's caption (.caption, 12px --ins-muted in the product; 13px / #5b6076 here) */
.care-tbl-asof { margin: 0 0 10px; font: 400 13px/1.5 var(--font-body); color: #5b6076; text-wrap: pretty; }
.care-scroll { position: relative; overflow-x: auto; border-radius: 8px; }
.care-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.care-tbl { width: 100%; min-width: 690px; border-collapse: separate; border-spacing: 0; text-align: left; }
.care-tbl th, .care-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--v2-line); font: 400 13.5px/1.4 var(--font-body); color: var(--v2-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.care-tbl thead th { font: 600 13px/1.35 var(--font-display); color: #5b6076; white-space: normal; vertical-align: bottom; }
.care-tbl tbody th, .care-tbl .c-rank { font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.care-tbl .c-rank { width: 56px; }
/* LocationsCard.js:79 renders the rank in a 24px badge, and rank 1 in the product's amber. The product's
   #b07a00 on #fff4d6 measures 3.20:1, so the badge reuses this page's already-darkened warn pair. */
.care-rankb {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: #f0f1f7; color: #4a5065; font: 800 13px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.care-rankb.is-r1 { background: #fff0cc; color: #8a5a00; }
/* .tdelta: 11px/800 in the product, lifted to the 13px floor; the tone colours are the pills' */
.care-td { margin-left: 5px; font: 800 13px/1.3 var(--font-display); white-space: nowrap; }
.care-td.is-up { color: #0c7a52; }
.care-td.is-down { color: #c9184a; }
.care-td.is-flat { color: #5b6076; }
.care-tbl .c-name { min-width: 108px; }
.care-tbl .c-rate, .care-tbl .c-new { white-space: nowrap; }
.care-tbl tbody tr:last-child th, .care-tbl tbody tr:last-child td { border-bottom: 0; }
.care-tbl .c-abbr { display: none; }
.care-pill { display: inline-block; padding: 4px 9px; border-radius: 999px; font: 600 13px/1.35 var(--font-display); white-space: nowrap; }
.care-pill.is-good { background: #ddf7ea; color: #0c7a52; }
.care-pill.is-warn { background: #fff0cc; color: #8a5a00; }
.care-pill.is-crit { background: #ffe3ea; color: #c9184a; }
/* the expander the card shows above eight locations; inert here, because the whole mock is a still image */
.care-tbl-more { display: flex; align-items: center; gap: 7px; padding: 12px 10px 14px; border-top: 1px solid var(--v2-line); font: 600 13px/1.35 var(--font-display); color: var(--blue); }
.care-tbl-more::after { content: "\25BE"; font-size: 13px; }

/* ---------- 4 · the inbox and Draft with AI (CustomerListItem + InboxHeader + AdaptiveComposer + MagicResponse) ----
   The product's 16px row padding, the 40px avatar with its 18px source badge, the amber needs-response dot, the
   "Needs action" pill, the star row, the composer's help line above the textarea, and the button row: a 32px outline
   button with a 16px sparkle, the tone as a dropdown (never chips; Friendly is the product's default) and the send
   button, which for a connected Google review reads "Post reply to Google". */
.care-scr--inb { padding: 0; overflow: hidden; }
.care-inb-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 14px 16px; border-bottom: 1px solid #f3f4f6;
}
.care-tabs { display: inline-flex; align-items: center; gap: 6px; }
.care-tabs b, .care-tabs i {
  padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display);
}
.care-tabs b { background: #eef2ff; color: var(--blue); }
.care-tabs i { color: #5b6076; }
.care-scope { font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.care-inb { margin: 0; padding: 0; list-style: none; }
.care-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.care-inb > li.is-sel { background: rgba(0, 61, 255, .05); }
.care-inb-av {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--font-display);
}
.care-inb-mk {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #e5e7eb;
}
.care-inb-mk .icon { width: 12px; height: 12px; }
.care-inb-b { min-width: 0; }
.care-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.care-inb-1, .care-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.care-inb-1 em { margin-left: auto; padding-left: 10px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.care-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.care-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.care-inb-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.care-pill2 {
  padding: 1px 8px; border-radius: 999px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca;
  color: #b91c1c; font-style: normal; font: 600 13px/1.5 var(--font-display);
}
.care-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }
/* MiniStars renders the unearned stars in text-gray-300, it does not drop them (CustomerListItem.js:49-63) */
.care-stars em { font-style: normal; color: #d1d5db; }
/* the private-complaint row's badge is the Cloutly source mark, which is a currentColor glyph */
.care-inb-mk.is-cl { color: var(--blue); }
.care-comp-help { padding: 11px 16px 9px; border-bottom: 1px solid #f3f4f6; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.care-comp-t { padding: 13px 16px 2px; font: 400 14px/1.55 var(--font-body); color: var(--ink); }
.care-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 13px 14px; }
.care-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px #d1d5db;
  font: 500 13.5px/1 var(--font-display); color: #374151;
}
.care-btn .icon { width: 16px; height: 16px; }
.care-btn.is-go { margin-left: auto; background: var(--blue); box-shadow: none; color: #fff; font-weight: 600; }
.care-btn .care-chev { width: 13px; height: 13px; margin-left: 0; color: currentColor; }

/* ---------- proof: the headline and the quote share one 780px column; the quote steps down so the h2 leads ---------- */
.care-page .care-proof .col > .h { max-width: 780px; margin: 0 auto; }
.care-page .care-proof { padding-bottom: 0; }
.care-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(48px, 5vw, 72px); }
.care-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.care-page .tq figcaption { margin-top: 26px; }

/* ---------- breakpoints ----------
   Three steps. Under 1180px the screen drops below its copy but the gauge stays, because the gauge is the page's
   device. Under 992px the gutter closes and the gauge turns on its side above the heading, fourteen ticks in a row.
   Under 723px the Locations card drops to three columns. */
@media (max-width: 1180px) {
  .care-beat { grid-template-columns: var(--care-rail) minmax(0, 1fr); }
  .care-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
  .care-beat.is-wide .care-screen { max-width: none; }
}
@media (max-width: 1079px) {
  .care-tbl .c-full { display: none; }
  .care-tbl .c-abbr { display: inline; }
}
@media (max-width: 991px) {
  .care-week { --care-rail: 0px; }
  .care-head { display: block; }
  /* .care-beat.is-wide carries two classes, so its own grid-template-columns outranks .care-beat's however late
     that comes: it has to be reset here by name or its screen lands in the closed 0px gutter column. */
  /* minmax(0,1fr), never 1fr: a bare 1fr track is minmax(auto,1fr), so the Locations table min-width
     pushes the whole document wide instead of scrolling inside .care-scroll (measured at 760px). */
  .care-beat, .care-beat.is-wide { grid-template-columns: minmax(0, 1fr); padding: clamp(28px, 3.4vw, 40px) 0; }
  .care-copy, .care-screen, .care-beat.is-wide .care-screen, .care-cap { grid-column: 1; }
  .care-mark {
    grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 14px;
  }
  .care-day { padding: 5px 12px; border-radius: 999px; background: #eef2ff; }
  .care-gauge { flex-direction: row; align-items: center; gap: 4px; }
  .care-gauge i { width: 3px; height: 11px; }
  .care-gauge i.is-on { width: 3px; height: 15px; }
  .care-gauge i.is-now { width: 4px; height: 19px; }
  /* .care-gauge.is-any i.is-on carries three classes, so it outranks the two-class rule above whatever the order */
  .care-gauge.is-any i.is-on { width: 3px; height: 15px; }
  .care-copy h3 { max-width: 26ch; }
  .care-copy p { max-width: 62ch; }
  .care-beat.is-wide .care-copy { max-width: none; }
  /* wider than the model page's 560px: these screens are dense, and a narrow column makes them tall rather than
     small. 680px is the import modal's own max width in the product. */
  .care-screen { max-width: 680px; }
}
/* under here the Locations card would need a sideways scroll to reach the Status column, which is the whole point of
   the mock, so it drops to Location, Rating and Status and fits */
/* the restraint band goes one column before its two columns get narrow enough to shred the heading */
@media (max-width: 820px) {
  .care-vows { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 2.8vw, 28px); }
  .care-vows .h { max-width: 24ch; }
}
@media (max-width: 723px) {
  .care-tbl .c-rank, .care-tbl .c-new, .care-tbl .c-resp, .care-tbl .c-quiet { display: none; }
  .care-tbl .c-rate .care-td { display: block; margin-left: 0; }
  .care-tbl { min-width: 0; table-layout: fixed; }
  .care-tbl th, .care-tbl td { padding: 11px 8px 11px 0; white-space: normal; }
  .care-tbl .c-name { width: 31%; min-width: 0; }
  .care-tbl .c-rate { width: 16%; }
  .care-tbl .c-status { width: 53%; padding-right: 0; }
  .care-pill { white-space: normal; }
}
@media (max-width: 620px) {
  .care-vows { padding: 22px 18px; border-radius: 18px; }
  .care-vows-l li { padding: 12px 0; }
  .care-screen { padding: 14px; }
  .care-scr--lb, .care-scr--inb { padding: 0; }
  .care-scr--tbl { padding: 14px 14px 6px; }
  .care-tbl th, .care-tbl td { padding: 10px 7px; }
  .care-lb-basis { padding: 11px 14px 12px; }
  .care-lb-h { padding: 15px 14px 13px; }
  /* 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 */
  .care-lb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 13px 10px; }
  .care-lb-rank { width: 22px; }
  /* the desktop rank disc centres itself with `margin: 0 auto`, which in a flex row would push the avatar out */
  .care-lb-r.is-lead .care-lb-rank { width: 24px; height: 24px; margin: 0; }
  .care-lb-av { width: 34px; height: 34px; font-size: 14px; }
  .care-lb-who { flex: 1 1 calc(100% - 110px); }
  .care-lb-slot { flex: none; min-width: 0; text-align: left; }
  .care-lb-r > .care-lb-slot + .care-lb-slot { margin-left: 0; }
  .care-lb-slot > b.care-chip { display: inline-block; }
  .care-inb > li { padding: 13px 12px; }
  .care-comp { padding: 11px 12px 12px; }
  .care-btn.is-go { margin-left: 0; }
}

/* ---------- the hero portrait between 620 and 991 ----------
   hero-film.css's tablet rule sets `right: 6px` on .pp--tl but never clears the desktop `left: 28px`, so left wins and
   the portrait lands in the white space beside the centred film rather than on its corner. Every scene hero has this;
   it is corrected here for this page only, because hero-film.css is shared. QUESTIONS.md carries it. */
@media (min-width: 620px) and (max-width: 991px) {
  .care-page .hero-moment--scene .pp--tl { left: calc(50% - min(50%, 260px) - 14px); right: auto; top: 96px; }
}