/* ============================================================
   CareConnect – Shared Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: #0C1410;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Design Tokens ---------- */
:root {
  --primary:           #00875A;
  --primary-hover:     #006B48;
  --primary-light:     #52E0A0;
  --primary-container: #E5F0E8;
  --primary-dark:      #005230;
  --secondary:         #356B53;
  --secondary-light:   #B8F0CF;
  --tertiary:          #00658E;
  --tertiary-light:    #C5E7FF;

  --bg:                #FFFFFF;
  --surface:           #F4FAF7;
  --surface-alt:       #EFF7F2;
  --surface-variant:   #D7E6DC;
  --surface-container: #E5F0E8;

  --text:              #0C1410;
  --text-secondary:    #33403A;
  --text-muted:        #54635A;

  --border:            #B6C6BC;
  --border-light:      #D7E6DC;

  --success:           #0B7A3F;
  --warning:           #9A5B00;
  --error:             #C00012;
  --star:              #F5A300;

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-xxl:  34px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(0,135,90,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 14px rgba(0,135,90,.11), 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 32px rgba(0,135,90,.14), 0 4px 12px rgba(0,0,0,.09);
  --shadow-xl: 0 20px 52px rgba(0,135,90,.17), 0 8px 20px rgba(0,0,0,.11);

  --transition: .2s ease;
  --max-width: 1160px;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; color: var(--text); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); }
p  { color: var(--text-secondary); }
a  { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Layout Helpers ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section    { padding: 88px 0; }
.section-sm { padding: 52px 0; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-light);
  transition: box-shadow var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-sm); }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; height: 66px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.2rem; color: var(--text); text-decoration: none;
}
.nav-logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #00875A 0%, #356B53 100%);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  font-size: .9375rem; font-weight: 500; color: var(--text-secondary);
  padding: 8px 14px; border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover { color: var(--primary); background: var(--primary-container); }
.nav-links a.active { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px;
  color: var(--text); line-height: 0;
}
.mobile-menu {
  display: none; background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; padding: 12px 24px 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  display: block; padding: 10px 14px; font-weight: 500; color: var(--text-secondary);
  border-radius: var(--radius-md); transition: background var(--transition), color var(--transition);
}
.mobile-menu a:hover { background: var(--surface); color: var(--primary); }
.mobile-menu .mobile-cta { padding: 12px 24px 20px; display: flex; gap: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--radius-pill);
  font-size: .9375rem; font-weight: 500; font-family: inherit;
  cursor: pointer; border: 2px solid transparent; text-decoration: none;
  transition: all var(--transition); white-space: nowrap; line-height: 1;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover {
  background: var(--primary-hover); border-color: var(--primary-hover); color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,135,90,.35);
}
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover {
  background: var(--primary); color: #fff;
  transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,135,90,.25);
}
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-ghost:hover { background: var(--surface); color: var(--text); }
.btn-white { background: #fff; color: var(--primary); border-color: #fff; }
.btn-white:hover {
  background: var(--primary-container); border-color: var(--primary-container); color: var(--primary);
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.15); color: #fff; }
.btn-lg   { padding: 16px 32px; font-size: 1rem; }
.btn-sm   { padding: 8px 16px; font-size: .875rem; }
.btn-full { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding: 148px 0 88px;
  background: linear-gradient(160deg, #fff 0%, var(--surface-alt) 55%, var(--surface-container) 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content:''; position:absolute; top:-220px; right:-180px;
  width:640px; height:640px;
  background: radial-gradient(circle, rgba(0,135,90,.11) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content:''; position:absolute; bottom:-120px; left:-120px;
  width:420px; height:420px;
  background: radial-gradient(circle, rgba(53,107,83,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary-container); color: var(--primary);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: .875rem; font-weight: 500; margin-bottom: 22px;
}
.hero h1 {
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--text) 0%, var(--primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero .hero-lead { font-size: 1.125rem; margin-bottom: 38px; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--primary); line-height: 1; }
.hero-stat-label { font-size: .85rem; color: var(--text-muted); margin-top: 4px; }

/* Phone mockup */
.hero-visual { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; }
.phone-mockup {
  width: 280px; height: 560px;
  background: linear-gradient(160deg, #fff 0%, var(--surface) 100%);
  border-radius: 44px;
  border: 8px solid #0C1410;
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,.8);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-notch {
  width: 96px; height: 26px;
  background: #0C1410; border-radius: 0 0 18px 18px;
  margin: 0 auto; flex-shrink: 0;
}
.phone-screen { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.phone-header { background: var(--primary); border-radius: 14px; padding: 14px; color: #fff; }
.phone-header-title { font-size: .875rem; font-weight: 700; opacity: .9; }
.phone-header-name { font-size: 1.1rem; font-weight: 700; margin: 2px 0; }
.phone-header-sub { font-size: .75rem; opacity: .75; }
.phone-caregiver-card {
  background: #fff; border: 1px solid var(--border-light); border-radius: 14px;
  padding: 12px; display: flex; gap: 10px; align-items: center;
  box-shadow: var(--shadow-sm);
}
.phone-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: #fff;
}
.phone-caregiver-name { font-size: .875rem; font-weight: 600; color: var(--text); }
.phone-caregiver-meta { font-size: .75rem; color: var(--text-muted); }
.phone-stars { color: var(--star); font-size: .75rem; letter-spacing: -1px; }
.phone-tag {
  display: inline-block; background: var(--primary-container);
  color: var(--primary); font-size: .65rem; font-weight: 600;
  padding: 2px 7px; border-radius: 20px; margin-top: 2px;
}
.phone-verified { color: var(--primary); }
.phone-booking {
  background: var(--surface-container); border-radius: 12px; padding: 10px;
}
.phone-booking-label { font-size: .7rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.phone-booking-val { font-size: .875rem; font-weight: 600; color: var(--text); margin-top: 2px; }
.phone-btn {
  background: var(--primary); color: #fff; border-radius: 999px;
  padding: 10px; font-size: .8rem; font-weight: 600; text-align: center; margin-top: auto;
}

/* ---------- Trust Bar ---------- */
.trust-bar { background: var(--primary); padding: 22px 0; }
.trust-bar-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.95); font-size: .9375rem; font-weight: 500;
}

/* ---------- Section Headers ---------- */
.section-header { text-align: center; margin-bottom: 60px; }
.section-label {
  display: inline-block; color: var(--primary); font-size: .8125rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { max-width: 560px; margin: 0 auto; font-size: 1.0625rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-grid { display: grid; gap: 24px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Feature Cards ---------- */
.feature-icon {
  width: 52px; height: 52px; background: var(--primary-container);
  border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; margin-bottom: 20px; color: var(--primary);
  flex-shrink: 0;
}
.feature-card h3 { margin-bottom: 10px; }

/* ---------- How It Works ---------- */
.hiw-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 52px; flex-wrap: wrap; }
.hiw-tab {
  padding: 10px 26px; border-radius: var(--radius-pill);
  border: 2px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: .9375rem; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all var(--transition);
}
.hiw-tab.active  { background: var(--primary); border-color: var(--primary); color: #fff; }
.hiw-tab:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.hiw-panel { display: none; }
.hiw-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.steps { display: flex; flex-direction: column; gap: 32px; position: relative; }
.steps::before {
  content:''; position:absolute; left:23px; top:46px; bottom:24px;
  width:2px; background: linear-gradient(to bottom, var(--primary), transparent);
}
.step { display: flex; gap: 22px; align-items: flex-start; }
.step-num {
  width: 48px; height: 48px; background: var(--primary); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.125rem; flex-shrink: 0; position: relative; z-index: 1;
}
.step-content h3 { margin-bottom: 6px; }

/* ---------- Stats Strip ---------- */
.stats-strip {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 64px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.stat-value { font-size: 2.5rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: .9375rem; color: rgba(255,255,255,.8); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; gap: 24px; }
.pricing-2col { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.pricing-3col { grid-template-columns: repeat(3, 1fr); }

.pricing-card {
  background: var(--bg); border: 2px solid var(--border-light);
  border-radius: var(--radius-xl); padding: 36px 32px;
  position: relative; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pricing-card.featured { border-color: var(--primary); box-shadow: var(--shadow-md); }
.pricing-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: .8125rem; font-weight: 600;
  padding: 4px 18px; border-radius: var(--radius-pill); white-space: nowrap;
}
.pricing-role {
  font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.pricing-name { font-size: 1.375rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.pricing-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.pricing-price-amount { font-size: 2.75rem; font-weight: 700; color: var(--primary); line-height: 1; }
.pricing-price-period { font-size: .9375rem; color: var(--text-muted); }
.pricing-desc { color: var(--text-muted); font-size: .875rem; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-light); }
.pricing-perks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.pricing-perk { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; color: var(--text-secondary); }
.perk-check { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.perk-cross { color: var(--border); flex-shrink: 0; margin-top: 2px; }

/* Billing toggle */
.billing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 52px; flex-wrap: wrap;
}
.billing-opts {
  display: flex; background: var(--surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-pill); padding: 4px; gap: 2px;
}
.billing-opt {
  padding: 8px 20px; border-radius: var(--radius-pill);
  font-size: .875rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all var(--transition); border: none;
  background: none; font-family: inherit; position: relative;
}
.billing-opt.active { background: var(--primary); color: #fff; }
.billing-opt .save-tag {
  position: absolute; top: -18px; right: 2px;
  background: var(--success); color: #fff;
  font-size: .625rem; font-weight: 700;
  padding: 2px 6px; border-radius: var(--radius-pill);
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.faq-btn {
  width: 100%; background: var(--bg); border: none; padding: 20px 24px;
  text-align: left; font-size: 1rem; font-weight: 500; color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-family: inherit; transition: background var(--transition);
}
.faq-btn:hover { background: var(--surface); }
.faq-btn[aria-expanded="true"] { background: var(--surface); color: var(--primary); }
.faq-chevron { flex-shrink: 0; transition: transform .3s ease; }
.faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-body { display: none; }
.faq-body.open { display: block; }
.faq-body-inner { padding: 0 24px 22px; color: var(--text-secondary); line-height: 1.75; }

/* ---------- Testimonials ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
}
.testimonial-stars { color: var(--star); font-size: 1rem; letter-spacing: -1px; margin-bottom: 14px; }
.testimonial-text { font-size: .9375rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.7; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; color: #fff; flex-shrink: 0;
}
.testimonial-name { font-weight: 600; color: var(--text); font-size: .9375rem; }
.testimonial-role { font-size: .8125rem; color: var(--text-muted); }

/* ---------- CTA Section ---------- */
.cta-section {
  background: linear-gradient(135deg, var(--primary) 0%, #004D35 100%);
  padding: 88px 0; text-align: center;
}
.cta-section h2 { color: #fff; margin-bottom: 16px; }
.cta-section p  { color: rgba(255,255,255,.85); font-size: 1.125rem; max-width: 540px; margin: 0 auto 44px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Page Banner ---------- */
.page-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 128px 0 68px; text-align: center;
}
.page-banner h1 { color: #fff; margin-bottom: 16px; }
.page-banner p  { color: rgba(255,255,255,.85); font-size: 1.125rem; max-width: 560px; margin: 0 auto; }
.page-banner .breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: .875rem; color: rgba(255,255,255,.65); margin-bottom: 20px;
}
.page-banner .breadcrumb a { color: rgba(255,255,255,.75); }
.page-banner .breadcrumb a:hover { color: #fff; }

/* ---------- Icon Cards (nurses/patients pages) ---------- */
.icon-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.icon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.icon-card-icon {
  width: 56px; height: 56px; background: var(--primary-container);
  border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; color: var(--primary); flex-shrink: 0;
}

/* ---------- Comparison Table ---------- */
.table-wrap { overflow-x: auto; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th, .comp-table td { padding: 16px 20px; text-align: left; font-size: .9375rem; }
.comp-table thead th {
  background: var(--primary); color: #fff; font-weight: 600; font-size: .875rem;
}
.comp-table thead th:first-child { background: var(--surface); color: var(--text); }
.comp-table tbody tr:nth-child(even) td { background: var(--surface); }
.comp-table tbody td { color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }
.comp-table tbody tr:last-child td { border-bottom: none; }
.yes { color: var(--primary); font-weight: 600; }
.no  { color: var(--border); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--radius-pill); font-size: .8125rem; font-weight: 500;
}
.badge-success { background: #E6F4EC; color: var(--success); }
.badge-primary { background: var(--primary-container); color: var(--primary); }
.badge-warning { background: #FFF4E0; color: var(--warning); }
.badge-neutral { background: var(--surface-variant); color: var(--text-muted); }

/* ---------- Animations ---------- */
[data-aos] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
[data-aos].visible { opacity: 1; transform: translateY(0); }
[data-aos-delay="1"] { transition-delay: .1s; }
[data-aos-delay="2"] { transition-delay: .2s; }
[data-aos-delay="3"] { transition-delay: .3s; }
[data-aos-delay="4"] { transition-delay: .4s; }

/* ---------- Footer ---------- */
.footer { background: #0C1410; color: rgba(255,255,255,.65); padding: 0 0 36px; }
.footer-grid {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 52px;
}
.footer-brand h3 { color: #fff; font-size: 1.2rem; margin-bottom: 12px; }
.footer-brand p  { color: rgba(255,255,255,.55); font-size: .9rem; max-width: 280px; line-height: 1.8; }
.footer-col h4 {
  color: rgba(255,255,255,.85); font-size: .8125rem;
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,.5); font-size: .9375rem; transition: color var(--transition); }
.footer-links a:hover { color: var(--primary-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 28px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .875rem; color: rgba(255,255,255,.35);
}
.footer-logo { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 1.1rem; }

/* ---------- Utilities ---------- */
.text-center  { text-align: center; }
.text-primary { color: var(--primary) !important; }
.text-muted   { color: var(--text-muted) !important; }
.font-bold    { font-weight: 700; }
.mt-sm { margin-top: 8px; }   .mb-sm { margin-bottom: 8px; }
.mt-md { margin-top: 16px; }  .mb-md { margin-bottom: 16px; }
.mt-lg { margin-top: 28px; }  .mb-lg { margin-bottom: 28px; }
.mt-xl { margin-top: 48px; }  .mb-xl { margin-bottom: 48px; }
.flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pricing-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .hero { padding: 110px 0 60px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
  .hiw-panel.active { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .pricing-2col, .pricing-3col { grid-template-columns: 1fr; max-width: 480px; }
  .trust-bar-inner { gap: 24px; }
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 480px) {
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-stats { gap: 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ============================================================
   STORE BUTTONS
   ============================================================ */
.store-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.store-btn {
  display: flex; align-items: center; gap: 10px;
  background: #0C1410; color: #fff;
  border-radius: 12px; padding: 10px 16px;
  border: 1.5px solid rgba(255,255,255,.2);
  text-decoration: none; transition: all var(--transition);
  white-space: nowrap;
}
.store-btn:hover { background: #1a2d22; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); border-color: var(--primary-light); }
.store-btn-icon { width: 26px; height: 26px; flex-shrink: 0; }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.2; }
.store-btn-sub  { font-size: .6rem; opacity: .75; letter-spacing: .03em; }
.store-btn-name { font-size: .9375rem; font-weight: 700; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); padding: 128px 0 68px; text-align: center; }
.blog-hero h1 { color: #fff; margin-bottom: 16px; }
.blog-hero p  { color: rgba(255,255,255,.85); font-size: 1.125rem; max-width: 560px; margin: 0 auto 28px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-card-img {
  height: 180px; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; flex-shrink: 0;
}
.blog-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.blog-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.blog-tag {
  display: inline-flex; align-items: center;
  background: var(--primary-container); color: var(--primary);
  font-size: .75rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.blog-date { font-size: .8125rem; color: var(--text-muted); }
.blog-read { font-size: .8125rem; color: var(--text-muted); }
.blog-card h3 { font-size: 1.0625rem; margin: 0; }
.blog-card h3 a { color: var(--text); text-decoration: none; }
.blog-card h3 a:hover { color: var(--primary); }
.blog-card p  { font-size: .9rem; flex: 1; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--border-light); margin-top: auto; }
.blog-author { display: flex; align-items: center; gap: 8px; }
.blog-author-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.blog-author-name { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); }

/* Blog post article */
.blog-post-header { background: linear-gradient(135deg, var(--primary) 0%, #004D35 100%); padding: 128px 0 60px; }
.blog-post-header .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: rgba(255,255,255,.65); margin-bottom: 20px; flex-wrap: wrap; }
.blog-post-header .breadcrumb a { color: rgba(255,255,255,.75); }
.blog-post-header .breadcrumb a:hover { color: #fff; }
.blog-post-header h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.5rem); margin-bottom: 20px; }
.blog-post-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.blog-post-meta span { color: rgba(255,255,255,.75); font-size: .875rem; display: flex; align-items: center; gap: 6px; }

.blog-post-body { max-width: 760px; margin: 0 auto; padding: 60px 24px; }
.blog-post-body h2 { font-size: 1.5rem; margin: 40px 0 16px; color: var(--text); }
.blog-post-body h3 { font-size: 1.15rem; margin: 28px 0 12px; color: var(--text); }
.blog-post-body p  { margin-bottom: 18px; line-height: 1.8; font-size: 1.0625rem; color: var(--text-secondary); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 18px 24px; display: flex; flex-direction: column; gap: 8px; }
.blog-post-body li { line-height: 1.7; color: var(--text-secondary); font-size: 1.0625rem; }
.blog-post-body strong { color: var(--text); font-weight: 600; }
.blog-post-body a { color: var(--primary); font-weight: 500; text-decoration: underline; }
.blog-post-body blockquote { border-left: 4px solid var(--primary); background: var(--primary-container); padding: 16px 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 24px 0; font-style: italic; color: var(--text-secondary); }
.blog-post-body .callout { background: var(--surface-container); border-radius: var(--radius-lg); padding: 24px 28px; margin: 28px 0; }
.blog-post-body .callout h4 { color: var(--primary); margin-bottom: 8px; }
.blog-cta-box { background: linear-gradient(135deg, var(--primary) 0%, #004D35 100%); border-radius: var(--radius-xl); padding: 36px; text-align: center; margin: 40px 0; }
.blog-cta-box h3 { color: #fff; margin-bottom: 10px; }
.blog-cta-box p  { color: rgba(255,255,255,.8); margin-bottom: 20px; }
.blog-related { border-top: 1px solid var(--border-light); padding-top: 40px; margin-top: 40px; }
.blog-related h3 { margin-bottom: 20px; }
.blog-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.blog-related-card { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow var(--transition); }
.blog-related-card:hover { box-shadow: var(--shadow-sm); }
.blog-related-card .blog-tag { width: fit-content; }
.blog-related-card h4 { font-size: .9375rem; margin: 0; }
.blog-related-card h4 a { color: var(--text); }
.blog-related-card h4 a:hover { color: var(--primary); }
.toc { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px 28px; margin: 0 0 36px; }
.toc h4 { margin-bottom: 12px; font-size: .9375rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }
.toc ol { margin: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.toc li a { color: var(--primary); font-size: .9375rem; text-decoration: none; }
.toc li a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HELP CENTER / AI CHAT
   ============================================================ */
.help-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); padding: 128px 0 64px; text-align: center; }
.help-hero h1 { color: #fff; margin-bottom: 14px; }
.help-hero p  { color: rgba(255,255,255,.85); font-size: 1.125rem; max-width: 520px; margin: 0 auto; }
.chat-wrap { max-width: 820px; margin: -40px auto 0; padding: 0 24px 80px; position: relative; z-index: 10; }
.chat-container {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; height: 640px;
  overflow: hidden;
}
.chat-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 18px 24px; display: flex; align-items: center; gap: 14px; flex-shrink: 0;
}
.chat-header-avatar {
  width: 42px; height: 42px; background: rgba(255,255,255,.2);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-header-name { color: #fff; font-weight: 700; font-size: 1rem; }
.chat-header-status { color: rgba(255,255,255,.75); font-size: .8125rem; display: flex; align-items: center; gap: 5px; }
.chat-header-dot { width: 7px; height: 7px; background: #52E0A0; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.chat-messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 88%; }
.chat-msg.user { flex-direction: row-reverse; margin-left: auto; }
.chat-msg-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700;
}
.chat-msg.bot  .chat-msg-avatar { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
.chat-msg.user .chat-msg-avatar { background: var(--surface-variant); color: var(--text-muted); }
.chat-msg-bubble {
  border-radius: var(--radius-lg); padding: 12px 16px;
  font-size: .9375rem; line-height: 1.65;
}
.chat-msg.bot  .chat-msg-bubble { background: var(--surface); color: var(--text); border-bottom-left-radius: 4px; }
/* User message bubble — green background, white text everywhere inside */
.chat-msg.user .chat-msg-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.user .chat-msg-bubble p,
.chat-msg.user .chat-msg-bubble li,
.chat-msg.user .chat-msg-bubble h3,
.chat-msg.user .chat-msg-bubble strong,
.chat-msg.user .chat-msg-bubble u { color: #fff !important; background: transparent; }
.chat-msg-bubble p  { margin: 0 0 8px; }
.chat-msg-bubble p:last-child { margin-bottom: 0; }
.chat-msg-bubble strong { font-weight: 600; }
.chat-msg-bubble u  { text-decoration: underline; }
.chat-msg-bubble a  { color: var(--primary); font-weight: 500; }
.chat-msg.user .chat-msg-bubble a { color: rgba(255,255,255,.9); }
.chat-msg-bubble ul, .chat-msg-bubble ol { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.chat-msg-bubble li { font-size: .9375rem; }
.chat-msg-bubble h3 { font-size: 1rem; margin: 12px 0 6px; }
.chat-typing { display: flex; gap: 5px; align-items: center; padding: 4px 0; }
.chat-typing span { width: 7px; height: 7px; background: var(--text-muted); border-radius: 50%; animation: typing .8s ease infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
.chat-input-row {
  padding: 16px 20px; border-top: 1px solid var(--border-light);
  display: flex; gap: 10px; align-items: flex-end; flex-shrink: 0;
  background: var(--bg);
}
.chat-input {
  flex: 1; border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 16px; font-size: .9375rem; font-family: inherit; resize: none;
  max-height: 120px; outline: none; transition: border-color var(--transition);
  line-height: 1.5; background: var(--surface);
}
.chat-input:focus { border-color: var(--primary); background: var(--bg); }
.chat-send {
  width: 44px; height: 44px; background: var(--primary); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: all var(--transition); color: #fff;
}
.chat-send:hover { background: var(--primary-hover); transform: scale(1.05); }
.chat-send:disabled { background: var(--border); cursor: not-allowed; transform: none; }
.chat-suggestions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 16px; }
.chat-suggestion {
  background: var(--primary-container); color: var(--primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  font-size: .8125rem; font-weight: 500; padding: 6px 14px;
  cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.chat-suggestion:hover { background: var(--primary); color: #fff; }
.chat-disclaimer { text-align: center; font-size: .75rem; color: var(--text-muted); padding: 0 20px 12px; }

/* ============================================================
   LEGAL / STATIC PAGES
   ============================================================ */
.legal-body { max-width: 800px; margin: 0 auto; padding: 64px 24px; }
.legal-body h2 { font-size: 1.375rem; margin: 40px 0 14px; color: var(--text); }
.legal-body h3 { font-size: 1.1rem; margin: 28px 0 10px; color: var(--text); }
.legal-body p  { margin-bottom: 16px; line-height: 1.8; color: var(--text-secondary); }
.legal-body ul { margin: 0 0 16px 22px; display: flex; flex-direction: column; gap: 6px; }
.legal-body li { color: var(--text-secondary); line-height: 1.7; }
.legal-body a  { color: var(--primary); }
.legal-body strong { color: var(--text); }
.legal-updated { background: var(--surface); border-radius: var(--radius-md); padding: 12px 16px; font-size: .875rem; color: var(--text-muted); margin-bottom: 32px; display: inline-block; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: .9rem; }
.cookie-table th { background: var(--primary); color: #fff; padding: 12px 14px; text-align: left; font-size: .8125rem; }
.cookie-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); vertical-align: top; }
.cookie-table tr:nth-child(even) td { background: var(--surface); }

/* Safety page */
.safety-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 600px) { .safety-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER APP BANNER (top of footer — App Store + Google Play)
   ============================================================ */
.footer-app-banner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 36px 0;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
.footer-app-banner::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:280px; height:280px;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, transparent 70%);
  pointer-events: none;
}
.footer-app-banner-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 24px;
  position: relative; z-index: 1;
}
.footer-app-banner-text { width: 100%; max-width: 720px; color: #fff; }
.footer-app-banner-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.8);
  margin-bottom: 8px;
}
.footer-app-banner h3 {
  color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin-bottom: 8px; font-weight: 700;
}
.footer-app-banner p { color: rgba(255,255,255,.85); font-size: .9375rem; margin: 0; }
.footer-app-banner-buttons {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
}
.footer-app-banner-buttons .store-btn {
  background: rgba(0,0,0,.4);
  border-color: rgba(255,255,255,.3);
}
.footer-app-banner-buttons .store-btn:hover {
  background: #0C1410;
  border-color: #fff;
}
@media (max-width: 768px) {
  .footer-app-banner { padding: 28px 0; margin-bottom: 40px; }
  .footer-app-banner-inner { flex-direction: column; text-align: center; align-items: stretch; }
  .footer-app-banner-buttons { justify-content: center; }
}

/* ============================================================
   INDEX PAGE — FUN ANIMATIONS
   ============================================================ */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(18px, -22px) rotate(8deg); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,135,90,.45); }
  50%      { box-shadow: 0 0 0 18px rgba(0,135,90,0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes pop {
  0%   { transform: scale(.92); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Floating decorative shapes (added near hero) */
.float-shape {
  position: absolute; pointer-events: none;
  opacity: .85; z-index: 0;
  will-change: transform;
}
.float-shape.s-heart    { top: 12%;  left:  6%; animation: floaty 6s ease-in-out infinite; }
.float-shape.s-pill     { top: 24%;  right: 10%; animation: drift 7.5s ease-in-out infinite; }
.float-shape.s-plus     { bottom: 18%; left: 12%; animation: wiggle 4s ease-in-out infinite; }
.float-shape.s-stetho   { bottom: 28%; right: 4%; animation: floaty 8s ease-in-out infinite reverse; }
.float-shape.s-ring     { top: 50%;  left: 50%;  animation: spinSlow 22s linear infinite; opacity:.35; }

/* Hero logo icon: gentle pulse */
.hero .nav-logo-icon,
.hero-badge {
  animation: pulseGlow 3s ease-out infinite;
}

/* Big gradient text shimmer */
.hero h1 {
  background-size: 200% auto;
  animation: shimmer 6s linear infinite;
}

/* Stat values "pop" in */
.hero-stat-value { animation: pop .8s cubic-bezier(.2,.9,.3,1.3) both; }
.hero-stat:nth-child(2) .hero-stat-value { animation-delay: .15s; }
.hero-stat:nth-child(3) .hero-stat-value { animation-delay: .3s; }

/* Phone mockup gentle bob */
.phone-mockup {
  animation: floaty 7s ease-in-out infinite;
}

/* "Verified" tag wiggle on hover */
.phone-tag:hover { animation: wiggle .6s ease-in-out 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .float-shape,
  .phone-mockup,
  .hero h1,
  .hero-stat-value,
  .hero .nav-logo-icon,
  .hero-badge { animation: none !important; }
}

/* ============================================================
   PRICING — billing-cycle banner & free-tier highlight
   ============================================================ */
.billing-banner {
  background: linear-gradient(135deg, var(--primary-container) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin: 0 auto 28px;
  max-width: 760px;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.billing-banner-emoji { font-size: 1.5rem; }
.billing-banner-text { color: var(--text); font-weight: 500; font-size: .95rem; }
.billing-banner-text strong { color: var(--primary); }

.pricing-section-title {
  text-align: center; margin: 0 auto 12px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.pricing-section-sub {
  text-align: center; color: var(--text-muted); margin: 0 auto 32px;
  max-width: 580px;
}

/* Free-tier callout */
.free-tier-callout {
  background: var(--surface);
  border: 2px dashed var(--primary-light);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-top: 18px;
  display: flex; align-items: center; gap: 14px;
}
.free-tier-callout .free-tier-icon {
  width: 42px; height: 42px;
  background: var(--primary-container);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--primary);
}
.free-tier-callout p { margin: 0; font-size: .9rem; color: var(--text-secondary); }
.free-tier-callout strong { color: var(--text); }

/* Compare-plans table */
.compare-table-wrap {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 0 auto 56px;
  box-shadow: var(--shadow-sm);
}
.compare-table {
  width: 100%; border-collapse: collapse; min-width: 540px;
}
.compare-table th, .compare-table td {
  padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border-light);
  font-size: .9375rem; vertical-align: middle;
}
.compare-table thead th {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.compare-table thead th:first-child { background: var(--text); }
.compare-table tbody tr:hover { background: var(--surface); }
.compare-table tbody td:first-child { font-weight: 500; color: var(--text); }
.compare-table td.check { color: var(--success); font-weight: 700; }
.compare-table td.cross { color: var(--text-muted); }
.compare-table .free-row td { background: var(--surface-alt); }
.compare-table-title {
  text-align: center; margin: 48px auto 18px;
  font-size: 1.25rem; color: var(--text);
}

/* ============================================================
   CAREGIVER PROFITABILITY BANNER
   ============================================================ */
.profit-banner {
  background: linear-gradient(135deg, #0A1411 0%, #15211C 50%, #0A1411 100%);
  color: #fff;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  border-top: 4px solid #52E0A0;
  box-shadow: inset 0 1px 0 rgba(82,224,160,.15);
}
/* Subtle glowing accent — gives the dark surface life */
.profit-banner::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:360px; height:360px;
  background: radial-gradient(circle, rgba(82,224,160,.22) 0%, transparent 70%);
  pointer-events: none;
}
.profit-banner::after {
  content:''; position:absolute; bottom:-140px; left:-100px;
  width:320px; height:320px;
  background: radial-gradient(circle, rgba(0,135,90,.20) 0%, transparent 70%);
  pointer-events: none;
}
.profit-banner-inner {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
  align-items: center; position: relative; z-index: 1;
  margin-bottom: 40px;
}
.profit-banner-eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  padding: 6px 14px; border-radius: 999px;
  color: #52E0A0; margin-bottom: 14px;
}
.profit-banner-headline h2 {
  color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0 0 16px; line-height: 1.2;
}
.profit-banner-headline p {
  color: rgba(255,255,255,.86); font-size: 1.0625rem;
  line-height: 1.65; margin: 0;
}
.profit-banner-headline strong { color: #fff; }

.profit-banner-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.profit-stat {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.profit-stat-value {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800; color: #52E0A0; line-height: 1;
  margin-bottom: 6px;
}
.profit-stat-label {
  font-size: .8rem; color: rgba(255,255,255,.8);
  line-height: 1.35;
}

.profit-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 28px;
  position: relative; z-index: 1;
}
.profit-flow-step {
  display: flex; align-items: flex-start; gap: 14px;
}
.profit-flow-num {
  width: 38px; height: 38px;
  background: #52E0A0; color: #00432A;
  border-radius: 50%;
  font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profit-flow-step strong { color: #fff; font-size: 1rem; display: block; margin-bottom: 4px; }
.profit-flow-step p { color: rgba(255,255,255,.78); font-size: .875rem; margin: 0; line-height: 1.5; }
.profit-flow-arrow {
  color: rgba(255,255,255,.55);
  font-size: 1.5rem; font-weight: 300;
  align-self: center;
}

.profit-callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(82,224,160,.15);
  border: 1px solid rgba(82,224,160,.5);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  position: relative; z-index: 1;
  color: #fff;
}
.profit-callout svg { color: #52E0A0; flex-shrink: 0; margin-top: 2px; }
.profit-callout p { margin: 0; line-height: 1.55; font-size: .95rem; color: rgba(255,255,255,.92); }
.profit-callout strong { color: #fff; }

@media (max-width: 900px) {
  .profit-banner-inner { grid-template-columns: 1fr; gap: 32px; }
  .profit-flow {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .profit-flow-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ============================================================
   CHAT-BEFORE-BOOKING BANNER (reusable across the site)
   ============================================================ */
.chat-cta {
  background: linear-gradient(135deg, var(--primary-container) 0%, #C5E7FF 100%);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  display: flex; align-items: center; gap: 22px;
  margin: 28px auto;
  max-width: 880px;
  flex-wrap: wrap;
}
.chat-cta-icon {
  width: 54px; height: 54px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.chat-cta-text { flex: 1; min-width: 240px; }
.chat-cta-text h3 { color: var(--text); font-size: 1.15rem; margin-bottom: 4px; }
.chat-cta-text p { color: var(--text-secondary); margin: 0; font-size: .9375rem; line-height: 1.5; }
.chat-cta-text strong { color: var(--primary); }

/* ============================================================
   ███  COMPREHENSIVE MOBILE OPTIMIZATION  ███
   Added: 2026-05-25 — full mobile-friendly pass
   ============================================================ */

/* -------- Global mobile fundamentals -------- */
html {
  -webkit-text-size-adjust: 100%;     /* prevent iOS font scaling on rotate */
  text-size-adjust: 100%;
  scroll-padding-top: 80px;            /* anchor links clear sticky nav */
}
body {
  overflow-x: hidden;                  /* belt-and-braces against horizontal scroll */
  -webkit-tap-highlight-color: rgba(0,135,90,.15);
  text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; height: auto; }
* { min-width: 0; }                    /* helps grid/flex children shrink properly */

/* iPhone safe-area insets (notch + home indicator) */
@supports (padding: env(safe-area-inset-left)) {
  .container {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .nav { padding-top: env(safe-area-inset-top); }
  .footer { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
  .mobile-menu { padding-bottom: env(safe-area-inset-bottom); }
}

/* -------- Touch targets (Apple HIG: ≥44×44, Material: ≥48×48) -------- */
@media (max-width: 768px) {
  .btn,
  .nav-links a,
  .mobile-menu a,
  .footer-links a,
  .faq-btn,
  .billing-opt,
  .chat-send,
  .nav-toggle,
  .chat-suggestion,
  .store-btn,
  .care-type-card,
  .pricing-card a {
    min-height: 44px;
  }
  .btn-sm { padding: 10px 18px; min-height: 40px; }
  .nav-toggle { width: 44px; height: 44px; }
  .chat-send { width: 48px; height: 48px; }
  .faq-btn { padding: 16px 18px; }
}

/* -------- Nav (mobile refinements) -------- */
.nav { transition: box-shadow var(--transition), background var(--transition); }
@media (max-width: 768px) {
  .nav-inner { height: 60px; }
  .nav-logo { font-size: 1.1rem; }
  .nav-logo-icon { width: 32px; height: 32px; }
  .mobile-menu ul {
    padding: 14px 20px 16px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu a {
    padding: 13px 14px;
    font-size: 1rem;
    border-radius: var(--radius-md);
  }
  .mobile-menu .mobile-cta {
    padding: 14px 20px 22px;
  }
  /* When mobile menu is open lock body scroll */
  body:has(.mobile-menu.open) { overflow: hidden; }
}

/* -------- Hero (mobile-first refinements) -------- */
@media (max-width: 768px) {
  .hero {
    padding: 96px 0 56px;
    min-height: auto;
  }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.15; }
  .hero .hero-lead { font-size: 1rem; max-width: none; margin-bottom: 28px; }
  .hero-actions { gap: 12px; margin-bottom: 28px; }
  .hero-actions .btn,
  .cta-actions .btn { width: 100%; justify-content: center; }
  .hero-stats {
    gap: 24px;
    justify-content: space-around;
    padding: 16px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .hero-stat { flex: 1; align-items: center; text-align: center; }
  .hero-stat-value { font-size: 1.5rem; }
  .hero-stat-label { font-size: .75rem; }
  /* Hide decorative floating shapes on small screens — they crowd the layout */
  .float-shape { display: none; }
  /* Store buttons stack and fill on mobile */
  .store-buttons { flex-direction: column; gap: 10px; }
  .store-buttons .store-btn { width: 100%; justify-content: center; }
}

/* -------- Page banner / blog post header -------- */
@media (max-width: 768px) {
  .page-banner { padding: 84px 0 36px; }
  .page-banner h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .page-banner p { font-size: .95rem; }
  .breadcrumb { font-size: .8rem; flex-wrap: wrap; }
  .blog-post-header { padding: 84px 0 40px; }
  .blog-post-header h1 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .blog-post-meta { gap: 12px; }
  .blog-post-meta span { font-size: .8rem; }
}

/* -------- Sections, headers, container padding -------- */
@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .section-sm { padding: 32px 0; }
  .section-header { margin-bottom: 36px; }
  .section-header h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .section-header p { font-size: .95rem; padding: 0 4px; }
  .container { padding: 0 18px; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 40px 0; }
}

/* -------- Card grids: cleaner gaps on mobile -------- */
@media (max-width: 768px) {
  .card-grid { gap: 16px; }
  .card { padding: 22px; }
  h3 { font-size: 1.0625rem; }
}

/* -------- Pricing cards on mobile -------- */
@media (max-width: 768px) {
  .pricing-card { padding: 24px 20px; }
  .pricing-price-amount { font-size: 2.25rem; }
  .pricing-perks { font-size: .9rem; }
  .billing-toggle { margin-bottom: 32px; }
  .billing-opts {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .billing-opts::-webkit-scrollbar { display: none; }
  .billing-opt { padding: 9px 14px; font-size: .8125rem; flex-shrink: 0; }
  .billing-opt .save-tag { font-size: .55rem; padding: 2px 5px; }
  .billing-banner {
    padding: 14px 16px;
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
  .billing-banner-text { font-size: .875rem; }
  .free-tier-callout {
    padding: 16px 18px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .free-tier-callout p { font-size: .875rem; }
}

/* Comparison tables: horizontal scroll on small screens with hint shadows */
@media (max-width: 768px) {
  .compare-table-wrap {
    border-radius: var(--radius-md);
    position: relative;
    background:
      linear-gradient(to right, var(--bg) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0) 30%) 0 100%,
      linear-gradient(to left, var(--bg) 30%, rgba(255,255,255,0)) 100% 0,
      linear-gradient(to left, rgba(0,0,0,0.05), rgba(0,0,0,0) 30%) 100% 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 14px 100%, 40px 100%, 14px 100%;
    background-attachment: local, scroll, local, scroll;
  }
  .compare-table { font-size: .85rem; min-width: 480px; }
  .compare-table th, .compare-table td { padding: 10px 12px; }
  .compare-table-title { font-size: 1.05rem; margin-top: 32px; }
}

/* -------- Trust bar (mobile) -------- */
@media (max-width: 768px) {
  .trust-bar { padding: 18px 0; }
  .trust-bar-inner { gap: 14px 24px; }
  .trust-item { font-size: .8125rem; gap: 8px; }
  .trust-item svg { width: 18px; height: 18px; }
}

/* -------- "How it works" tabs -------- */
@media (max-width: 768px) {
  .hiw-tabs { flex-direction: column; gap: 8px; }
  .hiw-tab { width: 100%; padding: 12px 18px; }
  .step { gap: 14px; }
  .step-num {
    width: 36px; height: 36px;
    font-size: 1rem;
    flex-shrink: 0;
  }
  .step-content h3 { font-size: 1rem; }
  .step-content p { font-size: .9rem; }
}

/* -------- Testimonials -------- */
@media (max-width: 768px) {
  .testimonial-card { padding: 24px 20px; }
  .testimonial-text { font-size: .95rem; }
}

/* -------- FAQ -------- */
@media (max-width: 768px) {
  .faq-btn {
    font-size: .9375rem;
    line-height: 1.4;
    gap: 12px;
  }
  .faq-body-inner { font-size: .9rem; line-height: 1.6; }
}

/* -------- CTA section -------- */
@media (max-width: 768px) {
  .cta-section { padding: 56px 0; }
  .cta-section h2 { font-size: clamp(1.3rem, 5vw, 1.75rem); }
  .cta-section p { font-size: .95rem; }
  .cta-actions { flex-direction: column; gap: 12px; width: 100%; }
  .cta-actions .btn { width: 100%; }
}

/* -------- Help Center AI chat: full-height mobile experience -------- */
@media (max-width: 768px) {
  .help-hero { padding: 96px 0 48px; }
  .help-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .chat-wrap { padding: 0 12px 36px; margin-top: -28px; }
  .chat-container {
    height: 70vh;
    min-height: 460px;
    border-radius: var(--radius-lg);
  }
  .chat-header { padding: 14px 18px; }
  .chat-header-avatar { width: 36px; height: 36px; }
  .chat-header-name { font-size: .95rem; }
  .chat-messages { padding: 16px; gap: 12px; }
  .chat-msg { max-width: 92%; }
  .chat-msg-bubble { font-size: .9rem; padding: 10px 14px; }
  .chat-input-row { padding: 12px 14px; }
  .chat-input { font-size: 1rem; padding: 10px 14px; }
  .chat-suggestions { padding: 0 14px 12px; }
  .chat-suggestion { font-size: .75rem; padding: 5px 11px; }
}

/* -------- Footer (mobile) -------- */
@media (max-width: 768px) {
  .footer-app-banner { padding: 24px 0; margin-bottom: 32px; }
  .footer-app-banner h3 { font-size: 1.1rem; }
  .footer-app-banner p { font-size: .875rem; }
  .footer-app-banner-buttons { flex-direction: column; width: 100%; }
  .footer-app-banner-buttons .store-btn { width: 100%; max-width: 280px; justify-content: center; margin: 0 auto; }
  .footer-grid { gap: 28px; }
  .footer-brand { text-align: center; }
  .footer-brand p { max-width: none; margin-left: auto; margin-right: auto; }
  .footer-logo { justify-content: center; }
  .footer-col { text-align: center; }
  .footer-col h4 { margin-bottom: 12px; }
  .footer-links a { display: inline-block; padding: 6px 0; min-height: 32px; }
}

/* -------- Profit banner (caregivers page) -------- */
@media (max-width: 768px) {
  .profit-banner { padding: 44px 0; }
  .profit-banner-headline h2 { font-size: 1.35rem; line-height: 1.25; }
  .profit-banner-headline p { font-size: .95rem; }
  .profit-banner-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .profit-stat { padding: 16px 12px; }
  .profit-stat-value { font-size: 1.5rem; }
  .profit-stat-label { font-size: .7rem; }
  .profit-flow {
    padding: 20px 16px;
    gap: 14px;
  }
  .profit-flow-num { width: 32px; height: 32px; font-size: .95rem; }
  .profit-flow-step strong { font-size: .95rem; }
  .profit-flow-step p { font-size: .825rem; }
  .profit-callout { padding: 14px 16px; font-size: .875rem; }
  .profit-callout p { font-size: .875rem; }
}

/* -------- Chat-CTA banner (homepage + patients) -------- */
@media (max-width: 768px) {
  .chat-cta {
    padding: 22px 20px;
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .chat-cta-icon { width: 48px; height: 48px; margin: 0 auto; }
  .chat-cta-text h3 { font-size: 1.05rem; }
  .chat-cta-text p { font-size: .9rem; }
}

/* -------- Blog post body (readability) -------- */
@media (max-width: 768px) {
  .blog-post-body { padding: 40px 18px 56px; }
  .blog-post-body h2 { font-size: 1.25rem; margin: 32px 0 12px; }
  .blog-post-body h3 { font-size: 1.05rem; margin: 22px 0 10px; }
  .blog-post-body p { font-size: 1rem; line-height: 1.7; }
  .blog-post-body li { font-size: 1rem; }
  .toc { padding: 18px 22px; }
  .toc h4 { font-size: .85rem; }
  .toc li a { font-size: .9rem; }
  .blog-cta-box { padding: 26px 22px; margin: 28px -2px; }
  .blog-cta-box h3 { font-size: 1.1rem; }
  .blog-grid { gap: 18px; }
  .blog-card-body { padding: 20px; }
  .blog-related-grid { gap: 12px; }
}

/* -------- Phone-mockup decorative element on mobile -------- */
@media (max-width: 768px) {
  /* Already hidden via .hero-visual { display: none; } */
  .phone-mockup { width: 240px; height: 480px; }
}

/* -------- Forms / inputs on mobile -------- */
@media (max-width: 768px) {
  input, textarea, select, button {
    font-size: 16px !important;       /* prevent iOS auto-zoom on focus */
  }
}

/* -------- Legal pages (privacy/terms/cookies) -------- */
@media (max-width: 768px) {
  .legal-body { padding: 40px 18px 64px; }
  .legal-body h2 { font-size: 1.2rem; margin: 28px 0 10px; }
  .legal-body h3 { font-size: 1.025rem; }
  .legal-body p, .legal-body li { font-size: .95rem; line-height: 1.65; }
  .cookie-table { font-size: .8rem; min-width: 100%; display: block; overflow-x: auto; }
}

/* -------- Safety page grid -------- */
@media (max-width: 600px) {
  .safety-grid { grid-template-columns: 1fr; gap: 16px; }
  .safety-grid .card { padding: 22px 20px; }
}

/* -------- iPhone SE (≤375px) -------- */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero { padding: 88px 0 44px; }
  .hero h1 { font-size: 1.65rem; }
  .nav-logo { font-size: 1rem; }
  .nav-logo-icon { width: 30px; height: 30px; }
  .btn { padding: 11px 18px; font-size: .9rem; }
  .btn-lg { padding: 13px 22px; font-size: .95rem; }
  .pricing-price-amount { font-size: 2rem; }
  .section-header h2 { font-size: 1.25rem; }
  .blog-post-body { padding: 32px 14px 48px; }
  .profit-stat-value { font-size: 1.25rem; }
  .footer-app-banner h3 { font-size: 1rem; }
}

/* -------- Landscape phones -------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 80px 0 32px; }
  .help-hero { padding: 80px 0 28px; }
  .chat-container { height: 80vh; min-height: 360px; }
  .mobile-menu ul { max-height: calc(100vh - 60px); }
}

/* -------- Accessibility & motion (mobile-relevant) -------- */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover transforms on touch devices to avoid sticky-hover bug */
  .card:hover,
  .pricing-card:hover,
  .blog-card:hover,
  .testimonial-card:hover {
    transform: none;
  }
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-white:hover {
    transform: none;
  }
}

/* -------- Print -------- */
@media print {
  .nav, .footer, .footer-app-banner, .cta-section, .hero-actions, .float-shape { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ============================================================
   MOBILE MENU — proper positioning below fixed nav
   ============================================================ */
@media (max-width: 768px) {
  .mobile-menu {
    display: none;
    position: fixed;
    top: 60px;                          /* matches mobile nav height */
    left: 0; right: 0;
    z-index: 999;                       /* below nav (1000), above content */
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .mobile-menu.open {
    display: block;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* When mobile menu is open, dim/lock the page underneath */
.mobile-menu.open ~ main,
body:has(.mobile-menu.open) main {
  pointer-events: none;
}

/* Restore mobile-menu to inline on desktop (in case CSS cascade flips it) */
@media (min-width: 769px) {
  .mobile-menu, .mobile-menu.open { display: none; }
}

/* ============================================================
   ANIMATED BURGER (replaces SVG icon)
   ============================================================ */
.nav-toggle .burger {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 18px;
}
.nav-toggle .burger > span {
  position: absolute;
  left: 0; right: 0;
  height: 2.5px;
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.65,.05,.36,1),
              opacity .25s ease,
              top .35s cubic-bezier(.65,.05,.36,1),
              background-color .2s ease;
}
.nav-toggle .burger > span:nth-child(1) { top: 0; }
.nav-toggle .burger > span:nth-child(2) { top: 8px; }
.nav-toggle .burger > span:nth-child(3) { top: 16px; }

/* Open state — morph into X */
.nav-toggle[aria-expanded="true"] .burger > span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
  background: var(--primary);
}
.nav-toggle[aria-expanded="true"] .burger > span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .burger > span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
  background: var(--primary);
}

/* Click/tap press feedback */
.nav-toggle:active .burger > span { background: var(--primary); }

/* ============================================================
   MOBILE PRICING CARDS — redesigned
   ============================================================ */
@media (max-width: 768px) {
  /* Constrain grids, never max-width them awkwardly */
  .pricing-grid.pricing-2col,
  .pricing-grid.pricing-3col {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 14px;
  }

  /* Card: compact, horizontal-friendly header, balanced spacing */
  .pricing-card {
    padding: 22px 20px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .pricing-card.featured {
    border: 2px solid var(--primary);
    box-shadow: 0 6px 20px rgba(0,135,90,.18);
  }

  /* Move the badge to top-right corner, smaller */
  .pricing-badge {
    position: absolute;
    top: 14px; right: 14px;
    font-size: .65rem;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .04em;
  }

  /* Header row: role + name on one line */
  .pricing-role {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .pricing-name {
    font-size: 1.4rem;
    margin-bottom: 14px;
    font-weight: 700;
  }

  /* Price row: large amount + period inline */
  .pricing-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
  }
  .pricing-price-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
  }
  .pricing-price-period {
    font-size: .9rem;
    color: var(--text-muted);
  }

  .pricing-desc {
    font-size: .875rem;
    color: var(--text-secondary);
    margin: 14px 0 16px;
    line-height: 1.55;
  }

  /* Perks: tighter, smaller checkmarks, no wasted vertical space */
  .pricing-perks {
    display: flex; flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    font-size: .875rem;
  }
  .pricing-perk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
    color: var(--text-secondary);
  }
  .perk-check, .perk-cross {
    width: 18px; height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
  }
  .perk-check svg, .perk-cross svg { width: 14px; height: 14px; }

  /* CTA button: smaller, fills width */
  .pricing-card .btn-full {
    padding: 12px 18px;
    font-size: .9rem;
    min-height: 44px;
  }

  /* Trailing fine-print: smaller */
  .pricing-card > p:last-child {
    font-size: .7rem !important;
    margin-top: 10px !important;
  }
}

/* Extra-tight at iPhone SE width */
@media (max-width: 380px) {
  .pricing-card { padding: 18px 16px 20px; }
  .pricing-name { font-size: 1.25rem; }
  .pricing-price-amount { font-size: 1.75rem; }
  .pricing-desc { font-size: .825rem; }
  .pricing-perks { font-size: .825rem; gap: 7px; }
}

/* ============================================================
   COMPACT FOOTER ON MOBILE — much shorter overall height
   ============================================================ */
@media (max-width: 768px) {
  /* App banner: trim drastically */
  .footer-app-banner {
    padding: 18px 0;
    margin-bottom: 20px;
  }
  .footer-app-banner-eyebrow {
    font-size: .65rem;
    margin-bottom: 4px;
  }
  .footer-app-banner h3 {
    font-size: 1rem;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  .footer-app-banner p {
    font-size: .8rem;
    line-height: 1.45;
  }
  .footer-app-banner-buttons {
    flex-direction: row;
    gap: 8px;
    justify-content: center;
  }
  .footer-app-banner-buttons .store-btn {
    width: auto;
    flex: 1;
    max-width: 170px;
    padding: 8px 12px;
    gap: 8px;
  }
  .footer-app-banner-buttons .store-btn-icon { width: 22px; height: 22px; }
  .footer-app-banner-buttons .store-btn-sub { font-size: .55rem; }
  .footer-app-banner-buttons .store-btn-name { font-size: .8125rem; }

  /* Footer grid: 2-column compact layout for the link columns */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    text-align: left !important;
  }

  /* Brand spans the full row + is more compact */
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center !important;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 4px;
  }
  .footer-brand p {
    font-size: .825rem;
    line-height: 1.55;
    margin-top: 8px !important;
  }
  .footer-logo { font-size: 1rem; }

  /* Link columns get title and links in tight stack */
  .footer-col {
    text-align: left !important;
  }
  .footer-col h4 {
    font-size: .7rem;
    margin-bottom: 10px;
    letter-spacing: .08em;
  }
  .footer-links {
    gap: 6px;
  }
  .footer-links a {
    font-size: .825rem;
    padding: 4px 0 !important;
    min-height: 28px !important;
    display: inline-block;
  }

  /* Footer bottom: smaller */
  .footer-bottom {
    padding-top: 16px;
    font-size: .7rem;
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .footer-app-banner-buttons .store-btn { padding: 7px 10px; }
  .footer-app-banner-buttons .store-btn-icon { width: 20px; height: 20px; }
  .footer-grid { gap: 16px; }
}

/* ============================================================
   PRICING TOGGLE — sticks horizontally with shadow hint on mobile
   ============================================================ */
@media (max-width: 768px) {
  .billing-toggle {
    margin-bottom: 22px;
  }
}

/* ============================================================
   FIX #1 — Mobile stats grid: 4 items in ONE compact row
   ============================================================ */
@media (max-width: 768px) {
  .stats-strip { padding: 32px 0; }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    text-align: center;
  }
  .stats-grid > div {
    padding: 6px 4px;
    border-right: 1px solid rgba(255,255,255,.18);
  }
  .stats-grid > div:last-child { border-right: none; }
  .stats-grid .stat-value {
    font-size: clamp(.95rem, 4vw, 1.2rem) !important;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
    color: #ffffff !important;
    white-space: nowrap;
  }
  .stats-grid .stat-label {
    font-size: .625rem !important;
    line-height: 1.2;
    color: rgba(255,255,255,.85) !important;
    display: block;
  }
}
@media (max-width: 380px) {
  .stats-grid {
    gap: 4px !important;
  }
  .stats-grid .stat-value { font-size: .85rem !important; }
  .stats-grid .stat-label { font-size: .55rem !important; }
}

/* ============================================================
   FIX #2 — Show small phone mockup ON MOBILE (was hidden)
   ============================================================ */
@media (max-width: 768px) {
  /* Override the earlier "display:none" on hero-visual */
  .hero-visual {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 28px auto 0;
    width: 100%;
    max-width: 220px;
    transform: scale(.85);
    transform-origin: center top;
  }
  .phone-mockup {
    width: 200px;
    height: 400px;
    border-width: 6px;
    border-radius: 32px;
  }
  .phone-notch { width: 70px; height: 18px; border-radius: 0 0 14px 14px; }
  .phone-screen { padding: 10px 8px; gap: 6px; }
  .phone-header { padding: 8px 10px; border-radius: 10px; }
  .phone-header-title { font-size: .65rem; }
  .phone-header-name { font-size: .8rem; }
  .phone-header-sub { font-size: .55rem; }
  .phone-caregiver-card {
    padding: 7px;
    gap: 6px;
    border-radius: 10px;
  }
  .phone-avatar { width: 28px; height: 28px; font-size: .65rem; }
  .phone-caregiver-name { font-size: .65rem; }
  .phone-caregiver-meta { font-size: .55rem; }
  .phone-stars { font-size: .55rem; }
  .phone-tag { font-size: .5rem; padding: 1px 5px; }
  .phone-booking { padding: 6px 8px; border-radius: 8px; }
  .phone-booking-label { font-size: .5rem; }
  .phone-booking-val { font-size: .65rem; }
  .phone-btn { padding: 6px; font-size: .6rem; }
  /* Reorder so phone appears AFTER content for natural reading flow on mobile */
  .hero-inner { display: flex; flex-direction: column; }
  .hero-content { order: 1; }
  .hero-visual { order: 2; }
}
@media (max-width: 380px) {
  .hero-visual { max-width: 190px; transform: scale(.78); }
}

/* ============================================================
   FIX #5 — Help Center: better mobile design, hide suggestions
   ============================================================ */
@media (max-width: 768px) {
  /* Hide the suggestion chips on mobile — input is the primary UX */
  .chat-suggestions {
    display: none !important;
  }
  /* Full-bleed chat experience */
  .help-hero {
    padding: 84px 0 32px;
  }
  .help-hero h1 { font-size: clamp(1.4rem, 6vw, 1.85rem); margin-bottom: 8px; }
  .help-hero p  { font-size: .9rem; padding: 0 8px; }
  .chat-wrap {
    margin-top: -20px;
    padding: 0 8px 24px;
  }
  .chat-container {
    height: calc(100dvh - 180px);
    min-height: 480px;
    max-height: none;
    border-radius: 16px;
  }
  .chat-header {
    padding: 12px 14px;
    gap: 10px;
  }
  .chat-header-avatar { width: 32px; height: 32px; }
  .chat-header-avatar svg { width: 18px; height: 18px; }
  .chat-header-name { font-size: .9rem; }
  .chat-header-status { font-size: .7rem; }
  .chat-messages {
    padding: 14px;
    gap: 10px;
  }
  .chat-msg { max-width: 94%; }
  .chat-msg-avatar { width: 28px; height: 28px; font-size: .65rem; }
  .chat-msg-bubble {
    font-size: .9rem;
    padding: 9px 13px;
    border-radius: 14px;
  }
  .chat-input-row {
    padding: 10px 12px;
    gap: 8px;
    border-top: 1px solid var(--border-light);
    background: var(--bg);
  }
  .chat-input {
    padding: 10px 14px;
    font-size: 16px;       /* prevent iOS auto-zoom */
    border-radius: 22px;
    min-height: 44px;
  }
  .chat-send {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .chat-disclaimer {
    font-size: .65rem;
    padding: 4px 14px 8px;
  }
}

/* Compact help-center 'other ways to get help' on mobile */
@media (max-width: 768px) {
  .help-center-quicklinks .card-grid-3 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ---------- Popular help topics ---------- */
.help-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.help-topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.help-topic:hover,
.help-topic:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}
.help-topic-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
  background: var(--primary-container);
  border-radius: var(--radius-sm);
}
.help-topic-label {
  flex: 1 1 auto;
  font-weight: 600;
  line-height: 1.35;
}
.help-topic-arrow {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 1.1rem;
  transition: transform var(--transition);
}
.help-topic:hover .help-topic-arrow,
.help-topic:focus-visible .help-topic-arrow {
  transform: translateX(4px);
}
/* RTL: arrow points the other way and slides left */
[dir="rtl"] .help-topic-arrow { transform: scaleX(-1); }
[dir="rtl"] .help-topic:hover .help-topic-arrow,
[dir="rtl"] .help-topic:focus-visible .help-topic-arrow { transform: scaleX(-1) translateX(4px); }

@media (max-width: 768px) {
  .help-topics-grid { grid-template-columns: 1fr; gap: 12px; }
  .help-topic { padding: 15px 16px; }
  .help-topic-icon { width: 40px; height: 40px; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .help-topic, .help-topic-arrow { transition: none; }
  .help-topic:hover, .help-topic:focus-visible { transform: none; }
}

/* ============================================================
   BLOG IMAGES — real photos
   ============================================================ */
.blog-hero-image {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.blog-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}
.blog-card-img-link {
  display: block;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.blog-card-img-real {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card-img-real {
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .blog-hero-image { padding: 18px 14px 0; }
  .blog-card-img-link { height: 180px; }
}

/* ============================================================
   MOBILE NAV — slower, smoother menu open + help button
   ============================================================ */

/* Help button (circled ?) — visible only on mobile, sits left of burger */
.nav-help-mobile {
  display: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: var(--primary-container);
  border: 1px solid var(--border-light);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), color var(--transition);
  flex-shrink: 0;
}
.nav-help-mobile:hover,
.nav-help-mobile:focus-visible {
  background: var(--primary);
  color: #fff;
  transform: scale(1.06);
}
.nav-help-mobile:active { transform: scale(.96); }

@media (max-width: 768px) {
  .nav-help-mobile {
    display: inline-flex;
    margin-left: auto;     /* push help-? and burger together to the right */
    margin-right: 6px;     /* tight gap to the burger */
  }
  /* Re-arrange nav so order is: logo  …  help-?  burger */
  .nav-inner > .nav-cta { display: none; }
  /* Slightly smaller help button on mobile for compact pairing with burger */
  .nav-help-mobile { width: 36px; height: 36px; }
  .nav-help-mobile svg { width: 19px; height: 19px; }
}

/* "Get Care Now" / any .btn inside mobile-menu must keep its own colors,
   not inherit the generic .mobile-menu a { color: var(--text-secondary) } */
.mobile-menu .btn,
.mobile-menu .btn-primary { color: #fff !important; }
.mobile-menu .btn-primary:hover { color: #fff !important; background: var(--primary-hover) !important; }
.mobile-menu .btn-outline { color: var(--primary) !important; }
.mobile-menu .btn-outline:hover { color: #fff !important; }

/* ============================================================
   LANGUAGE DROPDOWN — English / العربية / Français / Español
   ============================================================ */

/* Desktop dropdown inside .nav-cta */
.lang-dd { position: relative; display: inline-flex; }
.lang-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.lang-dd-btn:hover,
.lang-dd-btn:focus-visible {
  background: var(--primary-container);
  color: var(--primary);
  border-color: var(--primary);
}
.lang-dd-caret { transition: transform var(--transition); }
.lang-dd.open .lang-dd-caret { transform: rotate(180deg); }

.lang-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 1100;
}
.lang-dd.open .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dd-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 8px);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.lang-dd-menu a:hover { background: var(--primary-container); color: var(--primary); }
.lang-dd-menu a.active { color: var(--primary); font-weight: 700; background: var(--primary-container); }

/* Mobile language row inside the burger menu */
.mobile-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.mobile-lang a {
  flex: 1 1 40%;
  text-align: center;
  padding: 11px 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: .9rem;
  font-weight: 600;
  color: var(--text) !important;
  text-decoration: none;
}
.mobile-lang a.active {
  background: var(--primary);
  color: #fff !important;
  border-color: var(--primary);
}
/* The desktop dropdown is hidden on mobile (its parent .nav-cta is display:none);
   languages are reached through .mobile-lang in the burger menu instead. */
.mobile-menu .mobile-cta a {
  /* Reset the auto-applied .mobile-menu a styling on CTA buttons */
  padding: 12px 20px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   SLOWER, SMOOTHER MOBILE MENU TRANSITION
   ============================================================ */
@media (max-width: 768px) {
  .mobile-menu {
    transition:
      opacity .55s cubic-bezier(.16,1,.3,1),
      transform .55s cubic-bezier(.16,1,.3,1),
      visibility 0s linear .55s;
    transform: translateY(-16px);
    visibility: hidden;
  }
  .mobile-menu.open {
    transform: translateY(0);
    visibility: visible;
    transition:
      opacity .55s cubic-bezier(.16,1,.3,1),
      transform .55s cubic-bezier(.16,1,.3,1),
      visibility 0s linear 0s;
  }
  /* Stagger each menu item with a tiny delay for a polished cascade */
  .mobile-menu ul li {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .mobile-menu.open ul li {
    opacity: 1;
    transform: translateX(0);
  }
  .mobile-menu.open ul li:nth-child(1) { transition-delay: .12s; }
  .mobile-menu.open ul li:nth-child(2) { transition-delay: .18s; }
  .mobile-menu.open ul li:nth-child(3) { transition-delay: .24s; }
  .mobile-menu.open ul li:nth-child(4) { transition-delay: .30s; }
  .mobile-menu.open ul li:nth-child(5) { transition-delay: .36s; }
  .mobile-menu.open ul li:nth-child(6) { transition-delay: .42s; }
  .mobile-menu.open ul li:nth-child(7) { transition-delay: .48s; }
  .mobile-menu.open ul li:nth-child(8) { transition-delay: .54s; }
  .mobile-menu.open .mobile-cta {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease .6s, transform .4s ease .6s;
  }
  .mobile-menu.open .mobile-cta { opacity: 1; transform: translateY(0); }
}

/* Slower burger morph too — feels coherent with the menu */
.nav-toggle .burger > span {
  transition: transform .55s cubic-bezier(.16,1,.3,1),
              opacity .35s ease .1s,
              top .55s cubic-bezier(.16,1,.3,1),
              background-color .3s ease;
}

/* ============================================================
   patients.html — Two-column section grids (responsive)
   ============================================================ */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.two-col-grid.two-col-grid-center { align-items: center; }
.two-col-grid.two-col-grid-top    { align-items: start; }

/* "Free for patients" side card */
.hiw-side-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 90px;
}

@media (max-width: 1024px) {
  .two-col-grid { gap: 40px; }
}

@media (max-width: 768px) {
  /* Stack the two columns and tighten gaps on mobile */
  .two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .hiw-side-card {
    position: static !important;
    top: auto;
    gap: 16px;
    order: 2;   /* "Free for patients" pricing card sits AFTER the steps on mobile */
  }
  .two-col-grid .steps { order: 1; }

  /* === Smart Search left column — feature list rows === */
  .two-col-grid h2 { font-size: clamp(1.4rem, 5vw, 1.85rem) !important; line-height: 1.2; }
  .two-col-grid > div > p { font-size: .95rem; line-height: 1.6; }

  /* Feature-row icon circles: smaller on mobile, tighter gap */
  .two-col-grid > div > div > div[style*="width:40px"] {
    width: 34px !important; height: 34px !important;
  }
  .two-col-grid > div > div > div > svg {
    width: 16px !important; height: 16px !important;
  }
  /* Each feature row's TEXT block — better line wrapping */
  .two-col-grid > div > div[style*="flex-direction:column"] > div {
    gap: 12px !important;
    font-size: .9rem;
    line-height: 1.5;
  }

  /* === Filter demo card === */
  .filter-demo {
    padding: 20px 16px !important;
    gap: 12px !important;
  }
  .filter-demo > div[style*="font-weight:700"] {
    font-size: .9rem !important;
  }
  .filter-row {
    gap: 6px !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
  }
  .filter-label {
    width: 100% !important;
    margin-bottom: 4px;
    font-size: .65rem !important;
    color: var(--text-muted);
  }
  .filter-chip {
    padding: 5px 11px !important;
    font-size: .75rem !important;
  }

  /* CareGiver result rows: stack avatar with name+meta, price below */
  .caregiver-result {
    padding: 10px 12px !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap;
  }
  .caregiver-result-avatar {
    width: 38px !important; height: 38px !important;
    font-size: .8rem !important;
  }
  .caregiver-result-name { font-size: .825rem !important; }
  .caregiver-result-meta { font-size: .7rem !important; }
  .caregiver-result-price {
    font-size: .9rem !important;
    margin-left: auto !important;
    white-space: nowrap;
  }

  /* === How It Works steps === */
  .steps { gap: 18px !important; }
  .step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .step-num {
    width: 32px !important; height: 32px !important;
    font-size: .95rem !important;
    flex-shrink: 0;
  }
  .step-content h3 { font-size: 1rem !important; margin-bottom: 4px; }
  .step-content p  { font-size: .875rem !important; line-height: 1.55; }

  /* === "Free for patients" side card on mobile === */
  .hiw-side-card > div {
    padding: 22px 20px !important;
    border-radius: var(--radius-lg) !important;
  }
  .hiw-side-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }
  .hiw-side-card p {
    font-size: .9rem !important;
    margin-bottom: 14px !important;
  }
  .hiw-side-card > div > div > div {
    font-size: .85rem !important;
    gap: 8px !important;
  }

  /* === Live Care Sheet content — feature badge rows === */
  .two-col-grid > div > div[style*="flex-direction:column"][style*="margin-bottom:28px"] {
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .two-col-grid > div > div[style*="flex-direction:column"][style*="margin-bottom:28px"] > div {
    font-size: .85rem !important;
    gap: 10px !important;
    flex-wrap: wrap;
    line-height: 1.45;
  }

  /* === Care sheet mockup card === */
  .two-col-grid > div > div[style*="background:#fff"][style*="border-radius:var(--radius-xl)"] {
    padding: 18px !important;
    border-radius: var(--radius-lg) !important;
  }
  .two-col-grid > div > div[style*="background:#fff"] > div[style*="margin-bottom:20px"] {
    margin-bottom: 14px !important;
  }
  .two-col-grid > div > div[style*="background:#fff"] > div > div > div[style*="font-size:1rem"] {
    font-size: .9rem !important;
  }
  /* Care sheet entry tiles */
  .two-col-grid > div > div[style*="background:#fff"] > div[style*="flex-direction:column"] > div {
    padding: 9px 12px !important;
  }
  .two-col-grid > div > div[style*="background:#fff"] > div[style*="flex-direction:column"] > div > div:first-child {
    font-size: .6rem !important;
  }
  .two-col-grid > div > div[style*="background:#fff"] > div[style*="flex-direction:column"] > div > div:last-child {
    font-size: .825rem !important;
    line-height: 1.4;
  }
}

@media (max-width: 380px) {
  .two-col-grid { gap: 24px !important; }
  .filter-demo { padding: 16px 14px !important; }
  .filter-chip { padding: 4px 9px !important; font-size: .7rem !important; }
  .caregiver-result-name { font-size: .8rem !important; }
  .caregiver-result-meta { font-size: .65rem !important; }
  .step-num { width: 28px !important; height: 28px !important; font-size: .85rem !important; }
}

/* ============================================================
   CAREGIVERS — Specialties grid (better on mobile)
   ============================================================ */
@media (max-width: 768px) {
  /* 3 chips per row on mobile — shorter labels fit naturally */
  .specialty-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .specialty-chip {
    padding: 8px 10px !important;
    font-size: .75rem !important;
    line-height: 1.25 !important;
    border-radius: var(--radius-md) !important;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .specialty-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .specialty-chip { font-size: .7rem !important; padding: 7px 8px !important; }
}

/* ============================================================
   CAREGIVERS — Earnings card (mobile polish)
   ============================================================ */
@media (max-width: 768px) {
  .earnings-card {
    padding: 22px 20px !important;
    border-radius: var(--radius-lg) !important;
    gap: 12px !important;
  }
  .earnings-card h3 { font-size: 1.05rem !important; margin-bottom: 4px !important; }
  .earnings-card > p { font-size: .8rem !important; }
  .earnings-row {
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .earnings-label { font-size: .8rem !important; flex: 1 1 auto; min-width: 0; }
  .earnings-value { font-size: 1.1rem !important; margin-left: auto; }
}

/* ============================================================
   PATIENTS — Live Care Sheet (proper classes, mobile-friendly)
   ============================================================ */
.care-sheet-tracks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
}
.care-sheet-tracks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9375rem;
  color: var(--text-secondary);
}
.care-sheet-tracks .badge { flex-shrink: 0; }

.care-sheet-mock {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.care-sheet-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.care-sheet-mock-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.care-sheet-mock-sub   { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }

.care-sheet-mock-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.care-sheet-entry {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.care-sheet-entry-highlight {
  background: var(--primary-container);
}
.care-sheet-entry-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.care-sheet-entry-highlight .care-sheet-entry-label { color: var(--primary); }
.care-sheet-entry-value {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .care-sheet-tracks {
    gap: 10px;
    margin-bottom: 22px;
  }
  .care-sheet-tracks li {
    font-size: .85rem;
    line-height: 1.45;
    flex-wrap: wrap;
  }
  .care-sheet-tracks .badge { font-size: .65rem !important; padding: 3px 9px !important; }

  .care-sheet-mock {
    padding: 18px 16px;
    border-radius: var(--radius-lg);
  }
  .care-sheet-mock-head { margin-bottom: 14px; }
  .care-sheet-mock-title { font-size: .95rem; }
  .care-sheet-mock-sub { font-size: .72rem; }
  .care-sheet-mock-entries { gap: 8px; }
  .care-sheet-entry { padding: 10px 12px; border-radius: var(--radius-sm); }
  .care-sheet-entry-label { font-size: .6rem; margin-bottom: 2px; }
  .care-sheet-entry-value { font-size: .82rem; line-height: 1.4; }
}

/* Remove the old brittle attribute-selector mobile rules — they were aimed at the inline-style versions of the same content. The new class-based rules above replace them cleanly. */