/*
  EXAMPLE HELPER CARD ("Nomsa K.", made up, not a real helper)
  Shared by the home page and the "choosing a nanny" article.
  Copies the platform's browse card (hh-platform css/site.css, "Helper card A3"),
  so change it here when that card changes. Colours come from /settings.css.
*/
.hc { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hc-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep-sea); background: var(--deep-sea-soft); padding: 5px 12px; border-radius: 999px; }
.hc-card { position: relative; width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px 18px; box-shadow: 0 14px 34px -18px rgba(20,36,47,0.3); }
.hc-card p { margin: 0 !important; }
.hc-heart { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-mid); }
.hc-heart svg { fill: none; stroke: #E0457B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 4px; box-shadow: 0 0 0 3px var(--white), 0 0 0 5.5px var(--sun); }
.hc-card .hc-name { font-size: 19px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.hc-card .hc-roles { font-size: 14px; line-height: 1.4; color: var(--ink-light); }
.hc-card .hc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.4; padding: 4px 11px; border-radius: 999px; background: #E8F1E3; color: #3A6535; }
.hc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hc-numbers { display: flex; width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.hc-numbers > span { flex: 1; padding: 6px 4px; min-height: 54px; justify-content: center; border-left: 1px solid var(--line); display: flex; flex-direction: column; line-height: 1.25; }
.hc-numbers > span:first-child { border-left: 0; }
.hc-numbers strong { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hc-numbers strong svg { vertical-align: -2px; margin-right: 4px; color: var(--ink-light); }
.hc-numbers em { font-style: normal; font-size: 12px; color: var(--ink-light); }
.hc-star { color: #D9A030; }
.hc-quote { margin: 4px 0 0; width: 100%; text-align: left; font-size: 14px; line-height: 1.45; color: var(--ink-mid); background: var(--mist); border-radius: 10px; padding: 10px 12px; }
.hc-quote span { display: block; text-align: right; font-size: 12px; color: var(--ink-light); font-weight: 600; margin-top: 3px; }
.hc-card .hc-foot { width: 100%; text-align: right; font-size: 14px; color: var(--ink-mid); }
.hc-rate b { color: var(--ink); }

/* Hero pages: a little bigger, with a deeper shadow. (It used to tilt, but a tilted card looks blurry on some screens.) */
.hc-tilt .hc-card { max-width: 330px; box-shadow: 0 24px 50px -28px rgba(20,36,47,0.35); }

/* No photo: initials in a deep-sea-soft circle, like the platform (22 Oct 2026) */
.hc-initials { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--deep-sea-soft); color: var(--deep-sea); font-weight: 700; font-size: 26px; margin-bottom: 4px; }