/* =====================================================================
   Home Care 360 — components for home-care-360.html and the
   blog-homecare360-*.html posts. Builds on the shared diagram and
   screenshot components in storage360.css (s3-*), which every Home
   Care 360 page also loads.
   Site palette: navy #002d5b / #0b1c39, coral #ff656a.
   Text in diagrams is HTML so it stays >= 12px on phones; the one SVG
   (the data-model diagram) is shown only on wide screens and has an
   HTML equivalent for narrow ones.
   ===================================================================== */

/* ---------- Big screenshot (full content width) ---------- */
.hc-shot-lg { margin: 28px 0 10px; }
.hc-shot-lg img { width: 100%; height: auto; display: block; border: 1px solid #e3e7f2; border-radius: 10px; box-shadow: 0 14px 40px rgba(11, 28, 57, .12); background: #fff; }
.hc-shot-lg figcaption { font-size: 13.5px; line-height: 1.6; color: #6b7390; margin-top: 10px; }
.hc-shot-lg figcaption b { color: #0b1c39; }
.section-dark .hc-shot-lg figcaption { color: rgba(255, 255, 255, .72); }
.section-dark .hc-shot-lg figcaption b { color: #fff; }

/* Screenshot gallery for the product page: caption row, then the image at full container width */
.hc-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; }
.hc-gallery .g-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hc-gallery .g-img a { display: block; }
.hc-gallery .g-img img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); background: #fff; }
.hc-gallery .g-txt { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 32px; align-items: end; }
.hc-gallery .g-txt h5 { font-size: 22px; font-weight: 800; color: #fff; margin: 0; }
.hc-gallery .g-txt p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .8); margin: 0; }
.hc-gallery .g-txt .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #ff656a; margin-bottom: 6px; }

/* ---------- KPI strip ---------- */
.hc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hc-kpis .k { background: #f5f7fc; border: 1px solid #dfe4f2; border-radius: 10px; padding: 14px 16px; }
.hc-kpis .k .v { display: block; font-size: 26px; font-weight: 800; color: #002d5b; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hc-kpis .k .l { display: block; font-size: 13px; line-height: 1.45; color: #506172; margin-top: 4px; }
.hc-kpis .k.hot { background: #fff4f4; border-color: rgba(255, 101, 106, .45); }
.hc-kpis .k.hot .v { color: #c4333a; }

/* ---------- Referral funnel (HTML bars) ---------- */
.hc-funnel .f-row { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin: 8px 0; }
.hc-funnel .f-row .k { font-size: 14px; font-weight: 700; color: #0b1c39; }
.hc-funnel .f-bar { height: 40px; border-radius: 6px; background: #002d5b; color: #fff; display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 700; white-space: nowrap; min-width: 0; overflow: hidden; }
.hc-funnel .f-bar small { font-weight: 500; opacity: .8; margin-left: 8px; }
.hc-funnel .f-row.mid .f-bar { background: #2f6fb3; }
.hc-funnel .f-row.end .f-bar { background: #1f8a5b; }
.hc-funnel .leak { margin: 14px 0 0 134px; border: 2px dashed rgba(255, 101, 106, .6); background: #fff4f4; border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.55; color: #3d4663; }
.hc-funnel .leak b { color: #c4333a; font-size: 16px; }

/* ---------- Column chart (vertical bars, HTML) ---------- */
.hc-cols { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 8px; align-items: end; height: 230px; padding-top: 22px; border-bottom: 2px solid #c9d0e3; }
.hc-cols .c { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hc-cols .c .bar { background: #002d5b; border-radius: 4px 4px 0 0; position: relative; min-height: 3px; }
.hc-cols .c .bar .live { position: absolute; left: 0; right: 0; bottom: 0; background: #ff656a; border-radius: 0; }
.hc-cols .c .n { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #0b1c39; transform: translateY(-20px); font-variant-numeric: tabular-nums; }
.hc-cols .c.hl .bar { background: #0a4d8b; }
.hc-cols-x { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.hc-cols-x span { text-align: center; font-size: 12.5px; color: #3d4663; line-height: 1.3; }
.hc-cols-x span b { display: block; color: #c4333a; font-size: 13px; }

/* ---------- County tiles (star gap) ---------- */
.hc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hc-tiles .t { border-radius: 8px; padding: 9px 11px; font-size: 12.5px; line-height: 1.35; color: #0b1c39; border: 1px solid rgba(0, 0, 0, .06); }
.hc-tiles .t b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.hc-tiles .t small { display: block; color: inherit; opacity: .78; font-size: 12px; }
.hc-tiles .t.b3 { background: #b4232a; color: #fff; }
.hc-tiles .t.b2 { background: #e26a6e; color: #fff; }
.hc-tiles .t.b1 { background: #f8d2d3; }
.hc-tiles .t.b0 { background: #eef1f8; }
.hc-tiles .t.a1 { background: #cfe6da; }
.hc-tiles .t.a2 { background: #1f8a5b; color: #fff; }
.hc-tiles-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: #3d4663; }
.hc-tiles-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); border: 1px solid rgba(0, 0, 0, .08); }

/* ---------- Dumbbell rows (ours vs county vs national) ---------- */
.hc-dumb .d-row { display: grid; grid-template-columns: 220px 1fr 70px; gap: 12px; align-items: center; margin: 10px 0; font-size: 13.5px; color: #3d4663; }
.hc-dumb .d-row .k { line-height: 1.3; }
.hc-dumb .d-row .v { text-align: right; font-weight: 800; color: #c4333a; font-variant-numeric: tabular-nums; }
.hc-dumb .d-row .v.pos { color: #1f8a5b; }
.hc-dumb .track { position: relative; height: 22px; }
.hc-dumb .track::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: #e3e7f2; }
.hc-dumb .seg { position: absolute; top: 9px; height: 4px; background: #f3b2b4; border-radius: 2px; }
.hc-dumb .seg.pos { background: #a9d8c0; }
.hc-dumb .dot { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.hc-dumb .dot.us { background: #ff656a; }
.hc-dumb .dot.cty { background: #002d5b; }
.hc-dumb .dot.nat { background: #fff; border: 2px solid #8a93a8; box-shadow: none; width: 12px; height: 12px; margin-left: -6px; top: 5px; }

/* ---------- Personas ---------- */
.hc-persona { background: #fff; border: 1px solid #e3e7f2; border-radius: 12px; padding: 22px 22px 18px; height: 100%; box-shadow: 0 4px 18px rgba(11, 28, 57, .05); transition: all .25s; display: flex; flex-direction: column; }
.hc-persona:hover { border-color: #ff656a; box-shadow: 0 12px 32px rgba(255, 101, 106, .14); transform: translateY(-3px); }
.hc-persona .who { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hc-persona .who i { width: 42px; height: 42px; min-width: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff656a, #e8555a); color: #fff; font-size: 17px; }
.hc-persona .who h5 { margin: 0; font-size: 17px; font-weight: 800; color: #0b1c39; line-height: 1.25; }
.hc-persona .who small { display: block; font-size: 12.5px; color: #6b7390; font-weight: 600; }
.hc-persona .brief { font-size: 13.5px; line-height: 1.5; color: #0b1c39; background: #f5f7fc; border-left: 3px solid #ff656a; border-radius: 0 6px 6px 0; padding: 8px 10px; margin: 6px 0 12px; font-weight: 600; }
.hc-persona ul { list-style: none; padding: 0; margin: 0 0 4px; }
.hc-persona li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: #506172; margin-bottom: 6px; }
.hc-persona li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ff656a; }
.hc-persona .lands { margin-top: auto; font-size: 12.5px; color: #6b7390; padding-top: 8px; border-top: 1px dashed #e3e7f2; }

/* ---------- Data model ---------- */
.hc-model-svg { display: block; width: 100%; height: auto; }
.hc-model-list { display: none; }
.hc-model-list .ent { border: 1px solid #c9d6ef; background: #eef3fc; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.hc-model-list .ent.cms { background: #ecf7f0; border: 2px dashed #3a9a68; }
.hc-model-list .ent b { display: block; color: #0b1c39; font-size: 16px; }
.hc-model-list .ent .n { color: #002d5b; font-weight: 800; }
.hc-model-list .ent small { display: block; color: #506172; font-size: 13px; line-height: 1.45; margin-top: 2px; }
.hc-model-list .ent .rel { display: block; font-size: 12.5px; color: #c4333a; font-weight: 700; margin-top: 4px; }
.hc-model-ai { margin-top: 14px; border-radius: 12px; background: #0b1c39; color: #fff; padding: 14px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hc-model-ai .lbl { flex: 0 0 auto; }
.hc-model-ai .lbl b { display: block; font-size: 15.5px; }
.hc-model-ai .lbl small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.hc-model-ai .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-model-ai .chips span { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); }
.hc-model-ai .chips span b { color: #ff9a9d; }
.hc-model-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 13px; color: #3d4663; }
.hc-model-legend span::before { content: ''; display: inline-block; width: 14px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); border: var(--b, 1px solid #c9d6ef); }

/* ---------- Copilot candidate table ---------- */
.hc-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; border: 1px solid #e6e9f5; border-radius: 10px; }
.hc-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.hc-tbl th { text-align: left; background: #0b1c39; color: #fff; padding: 10px 12px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.hc-tbl td { padding: 10px 12px; border-bottom: 1px solid #e6e9f5; color: #3d4663; vertical-align: top; line-height: 1.45; }
.hc-tbl tr:last-child td { border-bottom: 0; }
.hc-tbl tr:nth-child(even) td { background: #fafbfe; }
.hc-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #0b1c39; white-space: nowrap; }
.hc-tbl tr.top td { background: #fff4f4; }
.hc-tbl td small { color: #6b7390; }

/* ---------- Score bar (weights) ---------- */
.hc-weights { display: flex; height: 46px; border-radius: 8px; overflow: hidden; gap: 2px; }
.hc-weights > div { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; color: #fff; font-size: 12.5px; line-height: 1.25; min-width: 0; }
.hc-weights > div b { font-size: 15px; color: #fff; }

/* ---------- Two-up / three-up value cards in light sections ---------- */
.hc-value { background: #fff; border: 1px solid #e3e7f2; border-radius: 12px; padding: 22px; height: 100%; border-top: 4px solid #ff656a; }
.hc-value .big { display: block; font-size: 30px; font-weight: 800; color: #002d5b; line-height: 1.1; margin-bottom: 6px; }
.hc-value h6 { font-size: 15.5px; font-weight: 800; color: #0b1c39; margin-bottom: 6px; }
.hc-value p { font-size: 14px; line-height: 1.6; color: #506172; margin: 0; }

/* ---------- Whitepaper request (PDF not yet published) ---------- */
.s3-wp .btn-wp.req { background: transparent; border-color: rgba(255, 255, 255, .6); }
.s3-wp .btn-wp.req:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .hc-model-svg { display: none; }
    .hc-model-list { display: block; }
    .hc-gallery .g-txt { grid-template-columns: minmax(0, 1fr); }
    .hc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .hc-funnel .f-row { grid-template-columns: 78px 1fr; gap: 8px; }
    .hc-funnel .f-row .k { font-size: 13px; }
    .hc-funnel .f-bar { font-size: 13px; padding: 0 10px; height: 36px; }
    .hc-funnel .f-bar small { display: none; }
    .hc-funnel .leak { margin-left: 0; }
    .hc-cols { height: 190px; gap: 4px; }
    .hc-cols-x { gap: 4px; }
    .hc-cols .c .n { font-size: 11.5px; }
    .hc-cols-x span { font-size: 11.5px; }
    .hc-dumb .d-row { grid-template-columns: 1fr 58px; }
    .hc-dumb .d-row .k { grid-column: 1 / -1; font-weight: 600; color: #0b1c39; margin-bottom: -6px; }
    .hc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-kpis .k .v { font-size: 22px; }
    .hc-weights > div { padding: 0 6px; font-size: 11.5px; }
    .hc-weights > div b { font-size: 13px; }
}

/* ---------- Blog: let a screenshot or diagram break out of the 760px text column ---------- */
.article-body .hc-wide { position: relative; width: min(1110px, calc(100vw - 32px)); left: 50%; transform: translateX(-50%); }
.article-body .hc-shot-lg { margin: 30px 0 26px; }
.article-body .hc-kpis { margin: 24px 0; }
@media (max-width: 767px) {
    .article-body table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13.5px; }
    .article-body table.tbl th, .article-body table.tbl td { padding: 9px 10px; }
}