/* ===========================================================================
   Careby designer-fixes.css
   Per-page overrides requested by the design team (2026-05-19).
   Loaded after mobile-fixes.css so it can override page-specific styles.

   Logo green:   #1A7A52  (var(--jade))
   Dark green:   #1b3d2f  (designer-specified background)
   =========================================================================== */

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ BODY CHECK / HEALTH ASSESSMENTS — Careby_Care_Packages.html              ║
   ║ Scoped via body.page-body-check                                           ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* 1. Hero — enlarge headline, the comma was already removed via HTML edit */
body.page-body-check .hero h1 {
  font-size: clamp(2.8rem, 6.5vw, 5rem) !important;
  letter-spacing: -0.035em !important;
}

/* 2. Pick your panel button → logo green */
body.page-body-check .hero-cta--primary,
body.page-body-check .final-cta-btn--primary {
  background: #1A7A52 !important;
  border-color: #1A7A52 !important;
}
body.page-body-check .hero-cta--primary:hover,
body.page-body-check .final-cta-btn--primary:hover {
  background: #14633F !important;
}

/* 3. Hero photo — strip any watermark/overlay on the image */
body.page-body-check .hero-photo::after,
body.page-body-check .hero-photo::before {
  display: none !important;
}
/* If the watermark is baked into the JPG, the designer needs a clean image;
   this rule at least removes any DOM-overlay watermark. */

/* 4. "What your panel catches" eyebrow — enlarge */
body.page-body-check .outcomes-eyebrow {
  font-size: 1rem !important;
  letter-spacing: 0.18em !important;
}

/* 5. "Every Health Assessment includes Careby Insight" callout — enlarge text */
body.page-body-check .insight-callout {
  background: #FFFFFF !important;
  border-left: 4px solid #1A7A52 !important;
}
body.page-body-check .insight-callout-title,
body.page-body-check .insight-callout h3,
body.page-body-check .insight-callout-eyebrow {
  font-size: 1.05rem !important;
}

/* 6. Insight callout background → white (already in rule 5) */

/* 7. "Four steps to results" — enlarge headline + softer green accent */
body.page-body-check .hiw-h {
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
}
body.page-body-check .hiw-h em {
  color: #1A7A52 !important;
}

/* 8. "服务流程" section — dark green background, white text */
body.page-body-check .hiw-section {
  background: #1b3d2f !important;
  color: #FFFFFF !important;
}
body.page-body-check .hiw-eyebrow,
body.page-body-check .hiw-eyebrow span {
  color: #C6EED9 !important;
}
body.page-body-check .hiw-h {
  color: #FFFFFF !important;
}
body.page-body-check .hiw-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 9. 01-04 timeline — bare steps on dark bg (timeline handled in page CSS) */
body.page-body-check .hiw-step {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #FFFFFF !important;
}
body.page-body-check .hiw-num {
  background: transparent !important;
  color: #7AD8A8 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: inline !important;
  font-size: inherit !important;
  font-weight: 700 !important;
}
body.page-body-check .hiw-step-title,
body.page-body-check .hiw-step h3 {
  color: #F5F1EB !important;
  font-size: 22px !important;
}
body.page-body-check .hiw-step p,
body.page-body-check .hiw-step-desc {
  color: rgba(245, 241, 235, 0.78) !important;
  font-size: 14px !important;
}

/* 10. Dr. Jerry section — enlarge headline, white background */
body.page-body-check .approach-section,
body.page-body-check .doc-section,
body.page-body-check .physician-section {
  background: #FFFFFF !important;
}
body.page-body-check .approach-h,
body.page-body-check .doc-h,
body.page-body-check .physician-h {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem) !important;
}

/* 11. Tier-cards section — dark green background per mockup */
body.page-body-check .bc-tiers-section,
body.page-body-check .tiers-section,
body.page-body-check section:has(> .bc-tiers) {
  background: linear-gradient(180deg, #0E2B1F 0%, #0A1F17 100%) !important;
}

/* 12. Tier names — enlarge */
body.page-body-check .bc-tier-name {
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
}

/* 13. Tier CTA — logo green */
body.page-body-check .bc-tier-cta {
  background: #1A7A52 !important;
}
body.page-body-check .bc-tier-cta:hover {
  background: #14633F !important;
}

/* 14. "What's tested" toggle — enlarge */
body.page-body-check .bc-tier-toggle-closed,
body.page-body-check .bc-tier-toggle-open {
  font-size: 15px !important;
}

/* 15. "Compare all panels" / "See add-ons" — enlarge */
body.page-body-check .bc-compare-link,
body.page-body-check .bc-addon-link,
body.page-body-check .tiers-compare a,
body.page-body-check .tiers-addons a {
  font-size: 16px !important;
}

/* 16. Final CTA — black band, kept; punctuation removed via HTML */
body.page-body-check .final-cta-section {
  /* keep existing dark band */
}

/* 17. Final CTA fine print — enlarge */
body.page-body-check .final-cta-fineprint,
body.page-body-check .final-cta-sub {
  font-size: 15px !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ CAREBY INSIGHT — Careby_Insight.html                                      ║
   ║ Scoped via body.page-insight                                              ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* 2,5,8. Section eyebrows — enlarge, center, light green → logo green */
body.page-insight .section-eyebrow {
  font-size: 1rem !important;
  text-align: center !important;
  color: #1A7A52 !important;
  letter-spacing: 0.18em !important;
  display: block !important;
}
body.page-insight .section-h {
  text-align: center !important;
}
body.page-insight .section-h em {
  color: #1A7A52 !important;
}

/* 3. Feature icons — no green background */
body.page-insight .feature-icon {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.page-insight .feature-icon svg {
  color: #1A7A52 !important;
  stroke: #1A7A52 !important;
  width: 32px !important;
  height: 32px !important;
}

/* 4. All feature cards → light gray/cream background */
body.page-insight .features-grid .feature,
body.page-insight .feature {
  background: #F5F1EB !important;
  border: 1px solid rgba(15, 25, 35, 0.06) !important;
}

/* 6. "Standalone" / "$199" path eyebrow — enlarge */
body.page-insight .path-eyebrow {
  font-size: 0.85rem !important;
  color: #1A7A52 !important;
  letter-spacing: 0.18em !important;
}
/* "Insight Annual · $199" heading — enlarge */
body.page-insight .path-card h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}

/* 7. Path-card highlight (Insight Annual) — logo green border + CTA */
body.page-insight .path-card.highlight {
  border-color: #1A7A52 !important;
  background: #EAF7F1 !important;
}
body.page-insight .path-card.highlight .btn-primary,
body.page-insight .path-card .btn-primary {
  background: #1A7A52 !important;
  border-color: #1A7A52 !important;
}
body.page-insight .path-card.highlight .btn-primary:hover,
body.page-insight .path-card .btn-primary:hover {
  background: #14633F !important;
}

/* 9. User rows — bold first line as block, then desc; centered */
body.page-insight .users-list {
  max-width: 760px !important;
  margin: 0 auto !important;
}
body.page-insight .user-row {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}
body.page-insight .user-num {
  color: #1A7A52 !important;
  font-weight: 700 !important;
}
body.page-insight .user-text strong {
  display: block !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

/* 10. Closing CTA — logo green */
body.page-insight .closing-h em {
  color: #1A7A52 !important;
}
body.page-insight .closing .btn-primary {
  background: #1A7A52 !important;
}
body.page-insight .closing .btn-primary:hover {
  background: #14633F !important;
}

/* Insight hero — side-image layout (dashboard mockup on the right) */
body.page-insight .hero {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  padding: 120px 48px 80px !important;
  max-width: 1280px !important;
}
body.page-insight .hero-copy {
  min-width: 0 !important;
}
body.page-insight .hero h1 {
  font-size: clamp(36px, 4vw, 60px) !important;
  max-width: none !important;
}
body.page-insight .hero-visual {
  min-width: 0 !important;
}
body.page-insight .hero-visual img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
@media (max-width: 768px) {
  body.page-insight .hero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 88px 16px 36px !important;
  }
  body.page-insight .hero h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ CARE SERVICES — Careby_InHomeCareServices.html                            ║
   ║ Scoped via body.page-care-services                                        ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* 2. "OUR SERVICES" / 我们的服务 — center, enlarge, logo green */
body.page-care-services .svc .section-eyebrow,
body.page-care-services .svc-header .section-eyebrow {
  text-align: center !important;
  font-size: 1rem !important;
  color: #1A7A52 !important;
  letter-spacing: 0.18em !important;
}
body.page-care-services .svc-header {
  text-align: center !important;
}
body.page-care-services .svc-header h2.section-h {
  text-align: center !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
}
body.page-care-services .svc-header h2.section-h em {
  color: #1A7A52 !important;
}
body.page-care-services .svc-header .section-sub {
  text-align: center !important;
  font-size: 1.1rem !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. "WHY FAMILIES CALL US" / 为什么家庭选择我们 — center + enlarge,
       headline white, em in logo green, sub enlarged                          */
body.page-care-services .problem .problem-eyebrow {
  text-align: center !important;
  font-size: 1rem !important;
  color: #42c88a !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
}
body.page-care-services .problem .problem-head {
  text-align: center !important;
}
body.page-care-services .problem .problem-h {
  text-align: center !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  color: #FFFFFF !important;
}
/* Designer 2026-05-28: ZH "难的部分 由我们承担" bold sans-serif, not italic, #42c88a */
body.page-care-services .problem .problem-h em {
  color: #42c88a !important;
  display: block !important;
}
body.page-care-services .problem .problem-h .zh em {
  color: #42c88a !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  display: block !important;
}
body.page-care-services .problem .problem-sub {
  text-align: center !important;
  font-size: 1.1rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. WHY FAMILIES CALL US — Designer 2026-05-28: gradient #000028 → #197a52, mint-green labels & ok text bold */
body.page-care-services .problem {
  background: linear-gradient(to right,#000028 0%,#197a52 100%) !important;
  color: #FFFFFF !important;
}
body.page-care-services .problem-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
}
body.page-care-services .problem-card-label {
  color: #42c88a !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
body.page-care-services .problem-row-text {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.page-care-services .problem-row.ok .problem-row-text {
  color: #42c88a !important;
  font-weight: 700 !important;
}
body.page-care-services .problem-row-check {
  fill: #2ECC8A !important;
  stroke: #FFFFFF !important;
}

/* 5. THE CAREBY DIFFERENCE eyebrow — enlarge, center, logo green */
body.page-care-services .diff .section-eyebrow {
  text-align: center !important;
  font-size: 1rem !important;
  color: #1A7A52 !important;
  letter-spacing: 0.18em !important;
}
body.page-care-services .diff-header {
  text-align: center !important;
}
body.page-care-services .diff .section-h {
  text-align: center !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
}
body.page-care-services .diff .section-h em {
  color: #1A7A52 !important;
}

/* 6. "01 · Speaks your language" labels — enlarge, logo green */
body.page-care-services .diff-num {
  font-size: 14px !important;
  color: #1A7A52 !important;
  letter-spacing: 0.06em !important;
}

/* 7. HOW TO START banner — Designer 2026-05-28: gradient #000028 → #197a52, vertical centering */
body.page-care-services .memnote {
  background: linear-gradient(to right,#000028 0%,#197a52 100%) !important;
  color: #FFFFFF !important;
  padding: 80px 56px !important;
  margin-top: 0 !important;
}
body.page-care-services .memnote-inner {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
}
body.page-care-services .memnote-label {
  color: #42c88a !important;
  letter-spacing: 0.18em !important;
}
body.page-care-services .memnote-body {
  color: rgba(255, 255, 255, 0.88) !important;
}
body.page-care-services .memnote-link {
  color: #42c88a !important;
  border-bottom-color: rgba(66, 200, 138, 0.4) !important;
}
body.page-care-services .memnote-link:hover {
  border-bottom-color: #42c88a !important;
}

/* 8. "FROM OUR FAMILIES" eyebrow — enlarge */
body.page-care-services .testi-bg .section-eyebrow {
  text-align: center !important;
  font-size: 1rem !important;
  color: #1A7A52 !important;
  letter-spacing: 0.18em !important;
}
body.page-care-services .testi-header {
  text-align: center !important;
}
body.page-care-services .testi-bg .section-h {
  text-align: center !important;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
}
body.page-care-services .testi-bg .section-h em {
  color: #1A7A52 !important;
}

/* 9. Testimonial cards — logo green accent + gray surfaces, ready for portraits */
body.page-care-services .tcard {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  padding: 28px 26px !important;
  box-shadow: 0 4px 18px rgba(15, 25, 35, 0.04) !important;
}
body.page-care-services .tc-stars {
  color: #1A7A52 !important;
  font-size: 16px !important;
  margin-bottom: 14px !important;
}
body.page-care-services .tc-quote {
  color: #1A1E23 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin-bottom: 22px !important;
}
body.page-care-services .tc-av {
  background: #1A7A52 !important;
  color: #FFFFFF !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;  /* allows future <img> portraits */
}
body.page-care-services .tc-av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.page-care-services .tc-name {
  color: #1A1E23 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
body.page-care-services .tc-role {
  color: #6B7280 !important;
  font-size: 13px !important;
}

/* 11. Final CTA — Designer 2026-05-28: gradient #000028 → #197a52, "制定护理方案" #42c88a bold */
body.page-care-services .final-cs {
  background: linear-gradient(to right,#000028 0%,#197a52 100%) !important;
  color: #FFFFFF !important;
}
body.page-care-services .final-cs h2,
body.page-care-services .final-cs h2 span {
  color: #FFFFFF !important;
}
body.page-care-services .final-cs h2 em {
  color: #42c88a !important;
}
body.page-care-services .final-cs h2 .zh em {
  color: #42c88a !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  display: block !important;
}

/* 10. Make the final CTA button clickable + visible */
body.page-care-services .final-cs a,
body.page-care-services .final-cs .btn,
body.page-care-services .final-cs button {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: #1A7A52 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
body.page-care-services .final-cs a:hover {
  background: #14633F !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ WEIGHT LOSS — Careby_WeightLoss.html                                      ║
   ║ Scoped via body.page-weight-loss                                          ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* 4. Final CTA bar: orange/warm → logo green gradient */
body.page-weight-loss .final-cta {
  background: linear-gradient(135deg, #1A7A52 0%, #2ECC8A 100%) !important;
  color: #FFFFFF !important;
}
body.page-weight-loss .final-cta h2,
body.page-weight-loss .final-cta h2 span {
  color: #FFFFFF !important;
}

/* 5. Final CTA button: white background, logo green text */
body.page-weight-loss .final-cta-btn {
  background: #FFFFFF !important;
  color: #1A7A52 !important;
  font-weight: 700 !important;
}
body.page-weight-loss .final-cta-btn:hover {
  background: #F5F1EB !important;
}

/* 3. FAQ centered (already mostly is — reinforce alignment) */
body.page-weight-loss .faq h2 {
  text-align: center !important;
}

/* 1. Hero feel closer to Care Packages — enlarge H1 + use green em */
body.page-weight-loss section.hero h1,
body.page-weight-loss .hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
}

/* 2. How it works section: prepare two-column layout (phone+steps) on desktop.
       Until a phone-screenshot asset is wired in, the existing 4-step row
       layout remains; this adds room for the asset. */
body.page-weight-loss .hiw {
  text-align: center !important;
}

/* ╔═══════════════════════════════════════════════════════════════════════════╗
   ║ FOR EMPLOYERS — Careby_ForEmployers.html                                  ║
   ║ Scoped via body.page-for-employers                                        ║
   ╚═══════════════════════════════════════════════════════════════════════════╝ */

/* 1. Whole page font → Noto Sans SC / 思源黑体 (both EN + ZH) */
body.page-for-employers,
body.page-for-employers *:not(.logo):not(svg):not(svg *) {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Inter', sans-serif !important;
}
body.page-for-employers em,
body.page-for-employers strong {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

/* 2. Eyebrows enlarged + emphasized */
body.page-for-employers .fe-section-eyebrow,
body.page-for-employers .fe-hero-eyebrow {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1A7A52 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

/* 3. Green bold for em accent text within the FOR-EMPLOYERS page */
body.page-for-employers .fe-section-h em,
body.page-for-employers .fe-hero-h em {
  color: #1A7A52 !important;
  font-weight: 800 !important;
}

/* 4. Section H sizes — enlarge */
body.page-for-employers .fe-hero-h {
  font-size: clamp(2.6rem, 5.2vw, 4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
body.page-for-employers .fe-section-h {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
}

/* 5. The DARK SECTION em colour: lighter green #43c88b */
/* The dark-bg "30 days setup" or final section gets the soft accent */
body.page-for-employers .fe-final,
body.page-for-employers .fe-dark,
body.page-for-employers section[style*="background:#1b3d2f"],
body.page-for-employers section[style*="background:#0e3727"] {
  background: #1b3d2f !important;
  color: #FFFFFF !important;
}
body.page-for-employers .fe-final em,
body.page-for-employers .fe-dark em {
  color: #43c88b !important;
}
body.page-for-employers .fe-final h2,
body.page-for-employers .fe-final h2 span {
  color: #FFFFFF !important;
}

/* 6. FAQ section font (same Noto Sans SC), centered question marks */
body.page-for-employers .faq h2,
body.page-for-employers .fe-faq h2 {
  text-align: center !important;
}

/* Number badge / step circles: use logo green */
body.page-for-employers .fe-stat-num,
body.page-for-employers .fe-step-num {
  color: #1A7A52 !important;
}