/* =============================================================
   HELPER CIRCLE — styles.css
   Brand: Trusted · Human · Calm · Guided · Community-led
   Fonts: Lora (display) + DM Sans (body)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {

  /* ── Color: Brand greens ── */
  --clr-primary:     #2C8A6E;  /* slightly muted vs old #2F8F73 — less startup, more trusted */
  --clr-primary-dk:  #1B5E48;  /* deep: dark sections, footer, hover states */
  --clr-primary-lt:  #3DAD8A;  /* light: hover tints, icon accents */
  --clr-primary-bg:  #EAF5EF;  /* mint: chip backgrounds, tag fills, icon wells */
  --clr-primary-soft:#F3FAF6;  /* mint soft: hover states, subtle section tints */

  /* ── Color: Neutrals (warm, not cool-grey) ── */
  --clr-cream:       #FBF6EE;  /* page background warm sections */
  --clr-cream-dk:    #F2EADc;  /* deeper warm: secondary backgrounds */
  --clr-sand:        #E8DDD0;  /* borders on cream backgrounds */
  --clr-white:       #FFFFFF;

  /* ── Color: Text ── */
  --clr-text:        #1E1E1E;  /* near-black: primary headings */
  --clr-text-2:      #383838;  /* dark: body text on white */
  --clr-text-muted:  #64696E;  /* medium: subtext, meta, labels */
  --clr-text-faint:  #9AA0A6;  /* light: placeholders, tertiary info */

  /* ── Color: Accents ── */
  --clr-peach:       #FFAC8E;  /* warm accent: CTAs on dark, highlights */
  --clr-coral:       #F5724A;  /* strong accent: hover on peach */
  --clr-amber:       #E8A83A;  /* trust/verified tone */
  --clr-amber-bg:    #FDF4E0;  /* amber backgrounds for trust cues */

  /* ── Color: Borders ── */
  --clr-border:      #E2E8E4;  /* default border: cards, inputs on white */
  --clr-border-warm: #E4D9CA;  /* warm border: sections on cream */

  /* ── Typography: Font families ── */
  --font-display:    'Lora', Georgia, 'Times New Roman', serif;
  --font-body:       'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Typography: Scale (fluid) ── */
  --text-xs:         0.72rem;   /* 11.5px — labels, kickers, legal */
  --text-sm:         0.82rem;   /* 13px — tags, chips, captions */
  --text-base:       0.92rem;   /* 14.7px — body default */
  --text-md:         1rem;      /* 16px — emphasized body */
  --text-lg:         1.08rem;   /* 17.3px — lead paragraphs */
  --text-xl:         1.2rem;    /* 19.2px — card titles */
  --text-h3:         1.1rem;    /* 17.6px — section sub-headings */
  --text-h2:         clamp(1.6rem, 3vw, 2.2rem);
  --text-h1:         clamp(2.2rem, 4.4vw, 3.2rem);
  --text-display:    clamp(1.85rem, 4vw, 2.8rem); /* banner headlines */

  /* ── Typography: Line heights ── */
  --lh-tight:    1.15;
  --lh-snug:     1.28;
  --lh-normal:   1.6;
  --lh-relaxed:  1.72;

  /* ── Typography: Letter spacing ── */
  --ls-tighter:  -0.03em;
  --ls-tight:    -0.015em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.09em;
  --ls-widest:    0.14em;

  /* ── Spacing scale: 4px base ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;  /* section vertical padding standard */
  --space-20: 80px;
  --space-24: 96px;
  --space-hero-top: 100px;     /* header clearance */
  --space-hero-bot: 60px;

  /* ── Border radius scale ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 32px 80px rgba(0,0,0,.16);
  --shadow-green: 0 8px 24px rgba(44,138,110,.30);

  /* ── Motion ── */
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   180ms;
  --dur-base:   260ms;
  --dur-slow:   400ms;
}

/* ─────────────────────────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--clr-text);
  background: var(--clr-white);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }

/* ─────────────────────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────────────────────── */
.wrap {
  max-width: min(92vw, 1360px);
  margin: 0 auto;
  padding: 0 var(--space-7);
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
   ───────────────────────────────────────────────────────────── */

/* Kicker — uniform green pill */
.kicker {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary);
  background: var(--clr-primary-bg);
  padding: 5px 13px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* Section eyebrow — kept for legacy, maps to same style as kicker text */
.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary);
  background: var(--clr-primary-bg);
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* Preview section sub-label */
.preview-sub {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  margin: 0;
  line-height: var(--lh-normal);
}

/* Headings */
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--clr-text);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--clr-text);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
/* Smaller H2 for long titles or card-level headings */
.h2-sm {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--clr-text);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}
.lead {
  font-size: var(--text-lg);
  color: var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 520px;
  text-wrap: pretty;
}
em { font-style: italic; color: var(--clr-primary); }

/* ─────────────────────────────────────────────────────────────
   BUTTONS — unified system
   All buttons: same height, same border-width, same radius
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

.btn-green {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}
.btn-green:hover {
  background: var(--clr-primary-dk);
  border-color: var(--clr-primary-dk);
  transform: translateY(-2px);
  box-shadow: var(--shadow-green);
}

.btn-outline {
  background: transparent;
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.btn-outline:hover {
  background: var(--clr-primary-bg);
  transform: translateY(-2px);
}

.btn-ghost {
  background: rgba(255,255,255,.13);
  color: var(--clr-white);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.22);
  transform: translateY(-2px);
}

.btn-peach {
  background: var(--clr-peach);
  color: var(--clr-text);
  border-color: var(--clr-peach);
  font-weight: 700;
}
.btn-peach:hover {
  background: var(--clr-coral);
  border-color: var(--clr-coral);
  color: var(--clr-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,114,74,.32);
}

.btn-white {
  background: var(--clr-white);
  color: var(--clr-primary);
  border-color: var(--clr-white);
}
.btn-white:hover {
  background: var(--clr-primary-bg);
  border-color: var(--clr-primary-bg);
}

/* Size variants */
.btn-sm  { font-size: var(--text-sm);  padding: 8px 18px; }
.btn-lg  { font-size: var(--text-md);  padding: 14px 30px; }
.btn-full { width: 100%; justify-content: center; }

/* ─────────────────────────────────────────────────────────────
   CHIPS & TAGS — unified system
   Chips: larger, for trust signals in hero & filters
   Tags: smaller, for card metadata
   ───────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 6px 13px;
  border-radius: var(--radius-full);
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text-2);
  white-space: nowrap;
  line-height: 1;
}
.chip-g  { background: var(--clr-primary-bg); border-color: transparent; color: var(--clr-primary); font-weight: 600; }
.chip-p  { background: #FFF0E8; border-color: transparent; color: var(--clr-coral); font-weight: 600; }
.chip-dk { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: var(--clr-white); }

.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.tag-g { background: var(--clr-primary-bg); color: var(--clr-primary); }
.tag-p { background: #FFF0E8; color: var(--clr-coral); }
.tag-amber { background: var(--clr-amber-bg); color: var(--clr-amber); }
/* Category tag — sits first in tag row, neutral dark tone */
.tag-category {
  background: var(--clr-cream-dk);
  color: var(--clr-text-2);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   LOGO
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   LOGO — clean single circle mark + larger wordmark
   ───────────────────────────────────────────────────────────── */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Mark: single solid circle with HC inside */
.logo-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--clr-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(44,138,110,.25);
}
/* Remove the old pseudo-element overlapping circles */
.logo-mark::before, .logo-mark::after { display: none; }

.logo-hc {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  font-style: italic;
  color: var(--clr-white);
  letter-spacing: -.01em;
  line-height: 1;
  /* Override old absolute positioning */
  position: static;
  inset: auto;
}

.logo-text {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--clr-text);
  letter-spacing: -.02em;
  line-height: 1;
}
.logo-text strong { font-weight: 700; }

/* Inverted (dark bg) */
.logo-inv .logo-text { color: var(--clr-white); }
.logo-inv .logo-mark { background: rgba(255,255,255,.15); box-shadow: none; }

/* ─────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: rgba(251,246,238,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--clr-border-warm);
  transition: box-shadow var(--dur-base) var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; height: 68px; gap: var(--space-8); }

.site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.nav-a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--clr-text-muted);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-a:hover, .nav-a.on { color: var(--clr-text); background: var(--clr-primary-bg); }
.nav-a.on { color: var(--clr-primary); }
.hdr-cta { margin-left: var(--space-2); }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); margin-left: auto; }
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--clr-text); border-radius: 2px;
  transition: all var(--dur-base) var(--ease);
}

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--clr-primary-dk); color: rgba(255,255,255,.72); padding: 60px 0 36px; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-12);
  padding-bottom: var(--space-11, 44px); border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: var(--space-8);
}
.footer-brand .logo-text { color: var(--clr-white); }
.footer-tagline { font-size: var(--text-sm); color: rgba(255,255,255,.5); margin-top: var(--space-4); line-height: var(--lh-relaxed); max-width: 240px; }
.footer-col-ttl { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgba(255,255,255,.36); margin-bottom: var(--space-4); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: var(--text-base); color: rgba(255,255,255,.6); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--clr-white); }
.footer-bottom { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-legal { font-size: var(--text-xs); color: rgba(255,255,255,.28); }
.footer-origin { font-size: var(--text-sm); color: rgba(255,255,255,.38); font-style: italic; margin-bottom: var(--space-2); }

/* ─────────────────────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────────────────────── */
.rev { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.rev.in { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────────────────────────────
   ── INDEX PAGE ──────────────────────────────────────────────
   ───────────────────────────────────────────────────────────── */

/* ── HERO ── */
.hero {
  padding: var(--space-hero-top) 0 var(--space-hero-bot);
  background: var(--clr-cream);
  position: relative; overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16);
  align-items: center; position: relative; z-index: 2;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--clr-primary);
  background: var(--clr-white); border: 1.5px solid var(--clr-border);
  padding: 6px 14px; border-radius: var(--radius-full);
  margin-bottom: var(--space-5); box-shadow: var(--shadow-xs);
}
.hero-hl { margin-bottom: var(--space-4); max-width: 540px; }
.hero-sub {
  font-size: var(--text-lg); color: var(--clr-text-muted);
  line-height: var(--lh-relaxed); margin-bottom: var(--space-8);
  max-width: 480px; text-wrap: balance;
}
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.hero-clarify {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 420px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--clr-border);
  margin-top: var(--space-1);
}

/* Hero card stack — larger on desktop */
.hero-vis { position: relative; height: 580px; }
.card-stack { position: relative; width: 100%; height: 100%; }
.hc {
  position: absolute; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.hc:hover { transform: scale(1.04) rotate(0deg) !important; box-shadow: var(--shadow-lg); z-index: 10; }
.hc img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.hc-lbl {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.70) 0%, transparent 100%);
}
.hc-name { display: block; font-size: var(--text-base); font-weight: 600; color: var(--clr-white); margin-bottom: 4px; }
.hc-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-full);
  background: rgba(44,138,110,.84); color: var(--clr-white);
}
/* Enlarged cards for wider container */
.hc-a { width: 248px; height: 328px; top: 0; left: 18px; transform: rotate(-4deg); z-index: 3; }
.hc-b { width: 232px; height: 308px; top: 26px; right: 8px; transform: rotate(3deg); z-index: 2; }
.hc-c { width: 216px; height: 288px; bottom: 32px; left: 100px; transform: rotate(-1.5deg); z-index: 1; }

/* ── HERO CARD PLACEHOLDERS ── */
/* CSS-drawn cards replace stock photos — initials + warm gradients */
.hc-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2);
}
.hc-ph-a { background: linear-gradient(160deg, #2C8A6E 0%, #1B5E48 100%); }
.hc-ph-b { background: linear-gradient(160deg, #3D7A6A 0%, #2C5F52 100%); }
.hc-ph-c { background: linear-gradient(160deg, #4A7C6F 0%, #345C53 100%); }
.hc-ph-initial {
  font-family: var(--font-display); font-size: 4rem; font-weight: 500; font-style: italic;
  color: rgba(255,255,255,.9); line-height: 1; display: block;
}
.hc-ph-sub {
  font-size: var(--text-xs); color: rgba(255,255,255,.6);
  font-weight: 500; letter-spacing: .04em; display: block;
}

/* ── HELPER CARD PLACEHOLDERS ── */
/* Tall gradient placeholders for browse + preview cards */
.hcard-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3);
}
.hcard-ph--teal { background: linear-gradient(170deg, #EAF5EF 0%, #C5E0D4 100%); }
.hcard-ph--sage { background: linear-gradient(170deg, #EEF3F0 0%, #CCDDD5 100%); }
.hcard-ph--warm { background: linear-gradient(170deg, #F5F0EA 0%, #DED2C0 100%); }
.hcard-ph-initial {
  font-family: var(--font-display); font-size: 4.5rem; font-weight: 500; font-style: italic;
  color: var(--clr-primary); line-height: 1; display: block; opacity: .7;
}
.hcard-ph-nat {
  font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-muted);
  letter-spacing: .03em; display: block; text-align: center; padding: 0 var(--space-3);
}

/* ── SPECIALTY TAGS — warm human colours, scannable first ── */
.tag-specialty {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  line-height: 1.2;
  letter-spacing: .01em;
}
/* Sage green — childcare */
.tag-childcare { background: #DCF0E6; color: #2A6B4A; }
/* Dusty peach — eldercare */
.tag-elder     { background: #F5E8E0; color: #9B5B3A; }
/* Warm beige — cooking */
.tag-cooking   { background: #EDE8DE; color: #7A6446; }
/* Soft olive — infant care / newborn */
.tag-infant    { background: #E8EDD8; color: #556334; }
/* Muted terracotta — pet friendly */
.tag-pet       { background: #F0E4DE; color: #8B4A3A; }

/* ── TRUST ROW — quiet, secondary, below specialty tags ── */
.hcard-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--clr-border);
}
.trust-tick {
  font-size: .70rem;
  color: var(--clr-text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* Old tag-verify kept as alias for backward compat in profile page */
.tag-verify {
  background: var(--clr-primary-bg);
  color: var(--clr-primary);
  font-weight: 600;
  font-size: var(--text-xs);
  display: block;
  width: 100%;
}

/* ── OUTCOMES SECTION (replaces old benefits layout) ── */
.outcomes { padding: var(--space-18) 0; background: var(--clr-cream); }
.outcomes-hdr { text-align: center; max-width: 480px; margin: 0 auto var(--space-10); }
.outcomes-hdr .h2 { margin-bottom: 0; }
.outcomes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); align-items: stretch;
}
/* Outcomes grid — desktop 3-col, mobile carousel via 768px block below */
/* Outcome card image header */
.outcome-img-wrap {
  position: relative;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-7)) 0;
  height: 180px; overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  flex-shrink: 0;
}
/* SVG wrap: no dark gradient overlay */
.outcome-img-wrap::after { display: none; }

/* SVG fills the wrap fully */
.outcome-svg { width: 100%; height: 100%; display: block; }

/* Per-card SVG background tints */
.outcome-svg--green { background: #EAF5EF; }
.outcome-svg--peach { background: #FFF3EE; }
.outcome-svg--sand  { background: #F0EAE0; }

/* Subtle scale on hover */
.outcome-card:hover .outcome-svg {
  transform: scale(1.025);
  transition: transform var(--dur-slow) var(--ease);
}

/* Label sits BELOW the image wrap — not inside overflow:hidden */
.outcome-img-label {
  display: block;
  padding: var(--space-4) var(--space-7) 0;
  margin: 0 calc(-1 * var(--space-7));
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.outcome-card--green .outcome-img-label { color: var(--clr-primary); }
.outcome-card--peach .outcome-img-label { color: #9B5B3A; }
.outcome-card--sand  .outcome-img-label { color: #7A6446; }
.outcome-card {
  border-radius: var(--radius-xl); padding: var(--space-8) var(--space-7);
  display: flex; flex-direction: column; gap: var(--space-4);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.outcome-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.outcome-card--green { background: var(--clr-primary-bg); border: 1.5px solid rgba(44,138,110,.18); }
.outcome-card--peach { background: #FFF3EE; border: 1.5px solid rgba(193,98,63,.14); }
.outcome-card--sand  { background: var(--clr-cream-dk); border: 1.5px solid var(--clr-border-warm); }
.outcome-role {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--clr-text-muted);
}
.outcome-icon { flex-shrink: 0; }
.outcome-title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--clr-text); line-height: var(--lh-snug);
}
.outcome-body { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--lh-normal); }
.outcome-list {
  list-style: none; display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-4); border-top: 1px solid rgba(0,0,0,.06);
}
.outcome-list li {
  font-size: var(--text-sm); color: var(--clr-text-2); line-height: var(--lh-normal);
  display: flex; align-items: flex-start; gap: var(--space-2);
}
.outcome-list li::before {
  content: '✓'; color: var(--clr-primary); font-weight: 700;
  flex-shrink: 0; font-size: .8rem; margin-top: 1px;
}


/* ── TEXT-ONLY TESTIMONIAL INITIALS ── */
.tcard-initials {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--clr-primary-bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
  font-style: italic; color: var(--clr-primary);
}

/* ── BEFORE/AFTER: CSS-DRAWN SG HOME ── */
/* Abstract Singapore HDB/condo interior panel — no image dependency */
.ba-sg-home {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #F0EDE6 0%, #E2DDD4 40%, #D6D0C6 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
/* Stylised window with blinds — HDB characteristic */
.ba-sg-window {
  position: absolute; top: var(--space-8); left: 50%; transform: translateX(-50%);
  width: 140px; height: 110px;
  background: #B8D4E8;
  border: 3px solid #8FA8BA;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ba-sg-blinds {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.35) 0px, rgba(255,255,255,.35) 7px,
    rgba(0,0,0,.08) 7px, rgba(0,0,0,.08) 8px
  );
}
/* Stylised plant — common in SG homes */
.ba-sg-plant {
  position: absolute; bottom: 0; right: var(--space-6);
  width: 48px; height: 80px;
}
.ba-sg-plant::before {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 36px;
  background: #8B7355; border-radius: 3px 3px 0 0;
}
.ba-sg-plant::after {
  content: ''; position: absolute; bottom: 30px; left: 0;
  width: 48px; height: 54px;
  background: radial-gradient(ellipse at 50% 80%, #4A8A62 30%, #2D6B48 70%, transparent 100%);
  border-radius: 50% 50% 30% 30%;
}
/* Floor line */
.ba-sg-home::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 20px; background: #C8C0B4; border-top: 2px solid #B0A898;
}

/* ── REFERRAL BANNER INITIALS ── */
.ref-av-initial {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  font-style: italic; color: rgba(255,255,255,.85);
  margin-right: -8px; flex-shrink: 0;
}

/* ── PROFILE PHOTO PLACEHOLDER ── */
.prof-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #EAF5EF 0%, #C5E0D4 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2);
}
.prof-ph-initial {
  font-family: var(--font-display); font-size: 5rem; font-weight: 500;
  font-style: italic; color: var(--clr-primary); line-height: 1;
  opacity: .7; display: block;
}
.prof-ph-name {
  font-size: var(--text-base); font-weight: 600; color: var(--clr-text);
  display: block;
}
.prof-ph-nat {
  font-size: var(--text-xs); color: var(--clr-text-muted);
  display: block; letter-spacing: .03em;
}

/* Ambient blobs */
.blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .4; }
.blob-a { width: 420px; height: 420px; background: radial-gradient(#75B89D, transparent 70%); top: -90px; right: -80px; }
.blob-b { width: 280px; height: 280px; background: radial-gradient(#FFAC8E, transparent 70%); bottom: -60px; left: 60px; }

/* ── HOW IT WORKS ── */
.how { padding: var(--space-18) 0; background: var(--clr-white); }
.how-hdr { text-align: center; max-width: 560px; margin: 0 auto var(--space-12); }
.how-hdr .h2 { margin-bottom: 0; text-wrap: balance; }

.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); align-items: stretch;
}
.how-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-7);
  transition:
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
  cursor: default;
}
.how-step:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Step number */
.how-step-n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  font-style: italic;
  color: #7BB5A4;
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  margin-bottom: var(--space-4);
  align-self: flex-start;
  transition: color var(--dur-base) var(--ease);
}
.how-step:hover .how-step-n { color: var(--clr-primary); }

/* Icon circle */
.how-ico {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--clr-primary-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  transition: background var(--dur-base) var(--ease);
  flex-shrink: 0;
}
.how-step:hover .how-ico { background: var(--clr-primary); }
.how-step:hover .how-ico svg path,
.how-step:hover .how-ico svg circle,
.how-step:hover .how-ico svg rect { stroke: var(--clr-white); }

.how-step .h3 { margin-bottom: var(--space-2); font-size: var(--text-h3); }
.how-step-sub {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  line-height: var(--lh-normal);
  max-width: 200px;
  text-wrap: balance;
}

/* Hover-expanded detail list */
.how-step-detail {
  list-style: none;
  max-height: 0; overflow: hidden; opacity: 0; margin-top: 0;
  transition:
    max-height var(--dur-slow) var(--ease),
    opacity var(--dur-base) var(--ease),
    margin-top var(--dur-base) var(--ease);
  text-align: left; width: 100%;
}
.how-step:hover .how-step-detail { max-height: 200px; opacity: 1; margin-top: var(--space-5); }
.how-step-detail li {
  font-size: var(--text-sm); color: var(--clr-text-2); line-height: var(--lh-normal);
  padding: 5px 0 5px 18px; position: relative;
  border-top: 1px solid var(--clr-border);
}
.how-step-detail li:first-child { border-top: none; padding-top: 0; }
.how-step-detail li::before {
  content: ''; position: absolute; left: 0; top: 52%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clr-primary);
}

/* How section footer line */
.how-footer {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-8); margin-top: var(--space-9); flex-wrap: wrap;
}
.how-timeline, .how-trust {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-sm);
}
.how-timeline { font-weight: 600; color: var(--clr-primary-dk); }
.how-trust { color: var(--clr-text-muted); }

/* ── BENEFITS ── */
.benefits { padding: var(--space-18) 0; background: var(--clr-cream); }
.benefits-hdr { text-align: center; max-width: 480px; margin: 0 auto var(--space-11, 44px); }
.benefits-hdr .h2 { margin-bottom: 0; }

.benefits-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

/* Feature card — fills full height of right column */
.benefit-feature {
  position: relative; border-radius: var(--radius-xl);
  overflow: hidden; min-height: 0; cursor: default;
  /* height driven by the grid row, matching right column */
}
.benefit-feature-img { position: absolute; inset: 0; }
.benefit-feature-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform var(--dur-slow) var(--ease);
}
.benefit-feature:hover .benefit-feature-img img { transform: scale(1.04); }
.benefit-feature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(15,50,38,.16) 0%, rgba(15,50,38,.72) 55%, rgba(15,50,38,.92) 100%);
}
.benefit-feature-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-9) var(--space-8); z-index: 2;
}
.benefit-feature-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.benefit-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 500; color: var(--clr-white);
  line-height: var(--lh-snug); margin-bottom: var(--space-3);
}
.benefit-feature-text {
  font-size: var(--text-md); color: rgba(255,255,255,.76);
  line-height: var(--lh-relaxed); max-width: 320px;
}

/* Supporting cards — fill grid height, distribute evenly */
.benefit-supporting {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.benefit-support-card {
  background: var(--clr-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: var(--space-4);
  border: 1.5px solid var(--clr-border);
  flex: 1;
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}
.benefit-support-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary);
}
.bsc-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bsc-icon-green { background: var(--clr-primary-bg); }
.bsc-icon-peach { background: #FFF0E8; }
.bsc-icon-sand  { background: var(--clr-cream-dk); }
.bsc-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: 500; color: var(--clr-text); margin-bottom: 3px; line-height: var(--lh-snug); }
.bsc-text { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--lh-normal); margin: 0; }

/* ── HELPER PREVIEW ── */
.preview { padding: var(--space-18) 0; background: var(--clr-cream); }
.preview-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4);
}
.preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }

/* Helper card — equal height via grid stretch */
.preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); align-items: stretch; }

/* [removed] ORIGINAL .helper-card block — replaced by unified .hcard system at end of file */

/* Preview CTA */
.preview-cta { text-align: center; margin-top: var(--space-9); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.preview-cta-note { font-size: var(--text-sm); color: var(--clr-text-muted); }

/* ── TESTIMONIALS & TRUST ── */
.testimonials { padding: var(--space-18) 0; background: var(--clr-white); }
.testimonials-hdr { text-align: center; margin-bottom: var(--space-10); }
.testimonials-hdr .h2 { margin-bottom: var(--space-3); }
.testimonials-sub {
  font-size: var(--text-base); color: var(--clr-text-muted);
  max-width: 440px; margin: 0 auto; line-height: var(--lh-normal);
}

/* 3 testimonial cards */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
  margin-bottom: var(--space-10);
}

.tcard {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.tcard-stars { display: flex; gap: 3px; margin-bottom: var(--space-4); flex-shrink: 0; }
.tcard-stars svg { color: var(--clr-amber); }

.tcard-quote {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 400; font-style: italic; color: var(--clr-text);
  line-height: var(--lh-relaxed); flex: 1; margin-bottom: var(--space-5);
  text-wrap: pretty;
}

.tcard-footer {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-4); border-top: 1px solid var(--clr-border);
  margin-top: auto; flex-shrink: 0;
}
.tcard-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--clr-primary-bg); flex-shrink: 0;
}
.tcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tcard-author { flex: 1; min-width: 0; }
.tcard-name { font-size: var(--text-sm); font-weight: 600; color: var(--clr-text); margin-bottom: 1px; }
.tcard-role { font-size: var(--text-xs); color: var(--clr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Testimonial matched tag — neutral, muted, not a verification badge */
.tcard-matched {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--clr-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  font-style: italic;
}
/* Keep tcard-verified for any remaining uses */
.tcard-verified {
  font-size: var(--text-xs); font-weight: 500; color: var(--clr-text-muted);
  white-space: nowrap; flex-shrink: 0; font-style: italic;
}

/* Outcome card image fallback — CSS-drawn placeholder when local image absent */
.outcome-img-wrap.outcome-img-fallback {
  background: var(--clr-primary-bg);
  display: flex; align-items: center; justify-content: center;
}
.outcome-img-wrap.outcome-img-fallback::after {
  content: 'Image coming soon';
  font-size: var(--text-xs); color: var(--clr-text-muted); font-style: italic;
}

/* Before/after image fallback */
.ba-image-wrap.ba-img-fallback {
  background: linear-gradient(160deg, #EAF5EF 0%, #D0E8DC 100%);
  display: flex; align-items: center; justify-content: center;
}
.ba-image-wrap.ba-img-fallback::after {
  content: 'singapore-hdb-home.jpg';
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-sm); color: var(--clr-text-muted);
  padding: var(--space-6);
}

/* Before / After story block */
.before-after {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-10); align-items: center;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.ba-image-wrap {
  position: relative; height: 100%; min-height: 320px; overflow: hidden;
  background: var(--clr-primary-bg);
}
.ba-image-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
/* Before/after story label — replaces video play button */
.ba-story-label {
  position: absolute; top: var(--space-4); left: var(--space-4);
  background: rgba(44,138,110,.9); color: var(--clr-white);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-full);
}

.ba-content { padding: var(--space-8) var(--space-8) var(--space-8) 0; }
.ba-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: var(--space-5);
}
.ba-block { margin-bottom: var(--space-5); }
.ba-stage {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--clr-text-muted);
  margin-bottom: var(--space-2);
}
.ba-stage-after { color: var(--clr-primary); }
.ba-text {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-md); color: var(--clr-text); line-height: var(--lh-relaxed);
  text-wrap: pretty;
}
.ba-result {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--clr-primary);
  background: var(--clr-primary-bg); border-radius: var(--radius-full);
  padding: 7px 14px; width: fit-content; margin-bottom: var(--space-4);
}
.ba-attr { font-size: var(--text-xs); color: var(--clr-text-muted); }

/* Soft social proof bar */
.social-proof-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: var(--clr-white); border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
}
.sp-item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--clr-text-2); font-weight: 500;
}
.sp-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--clr-border); flex-shrink: 0;
}

/* Hero micro trust signals */
.hero-micro-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); margin-bottom: var(--space-5);
}
.micro-trust-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--clr-text-muted); font-weight: 500;
}
.micro-trust-sep {
  color: var(--clr-border); font-size: var(--text-xs);
}


/* Responsive */
@media (max-width: 860px) {
  .before-after { grid-template-columns: 1fr; }
  .ba-image-wrap { min-height: 240px; }
  .ba-content { padding: var(--space-6); }
  .social-proof-bar { flex-direction: column; align-items: flex-start; }
  .sp-dot { display: none; }
}
@media (max-width: 600px) {
  .hero-micro-trust { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .micro-trust-sep { display: none; }
}

/* ── REFERRAL BANNER ── */
.ref-banner { padding: var(--space-18) 0; background: var(--clr-primary-dk); position: relative; overflow: hidden; }
.ref-banner-bg { position: absolute; inset: 0; pointer-events: none; }
.rblob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .24; }
.rblob-a { width: 420px; height: 420px; background: var(--clr-primary-lt); top: -80px; left: -60px; }
.rblob-b { width: 320px; height: 320px; background: var(--clr-peach); bottom: -60px; right: 80px; }
.rblob-c { width: 180px; height: 180px; background: #FFE59C; top: 40px; right: -40px; }
.ref-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-14); align-items: center;
}
.ref-avs { display: flex; align-items: center; margin-bottom: var(--space-5); }
.ref-av {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--clr-primary-dk); margin-right: -9px; flex-shrink: 0;
}
.ref-av img { width: 100%; height: 100%; object-fit: cover; }
.ref-av-ct { margin-left: 18px; font-size: var(--text-sm); font-weight: 600; color: rgba(255,255,255,.58); }
.ref-hl { font-family: var(--font-display); font-size: var(--text-display); font-weight: 500; color: var(--clr-white); line-height: var(--lh-snug); margin-bottom: var(--space-3); }
.ref-sub { font-size: var(--text-md); color: rgba(255,255,255,.68); margin-bottom: var(--space-7); line-height: var(--lh-relaxed); }
.ref-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-7); }
.ref-card {
  background: rgba(255,255,255,.08); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,.13); border-radius: var(--radius-xl); padding: var(--space-8);
}
.ref-card-ttl {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: rgba(255,255,255,.36); margin-bottom: var(--space-5);
  padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.1);
}

/* ─────────────────────────────────────────────────────────────
   ── BROWSE PAGE
   ───────────────────────────────────────────────────────────── */
.browse-hero { padding: 106px 0 0; background: var(--clr-cream); }
.browse-hl { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; color: var(--clr-text); margin-bottom: 10px; }
.browse-sub { font-size: var(--text-md); color: var(--clr-text-muted); margin-bottom: var(--space-7); }

.search-bar {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--clr-white); border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-full); padding: 10px 10px 10px 18px;
  max-width: 500px; box-shadow: var(--shadow-sm); margin-bottom: var(--space-6);
}
.search-bar input { flex: 1; border: none; outline: none; font-size: var(--text-md); color: var(--clr-text); background: transparent; }
.search-bar input::placeholder { color: var(--clr-text-faint); }

.filter-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: 18px 0 0; }
.fchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); font-weight: 500; padding: 8px 16px;
  border-radius: var(--radius-full); border: 1.5px solid var(--clr-border);
  background: var(--clr-white); color: var(--clr-text-2); cursor: pointer;
  transition: all var(--dur-fast) var(--ease); user-select: none;
}
.fchip:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: var(--clr-primary-bg); }
.fchip.on { background: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-white); }

.browse-body { padding: 34px 0 84px; background: var(--clr-white); }
.browse-ct { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--space-6); }
.browse-ct strong { color: var(--clr-text); }
.browse-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.browse-empty { grid-column: 1/-1; text-align: center; padding: 72px 0; color: var(--clr-text-muted); }

/* ─────────────────────────────────────────────────────────────
   ── PROFILE PAGE
   ───────────────────────────────────────────────────────────── */
/* ── PROFILE PAGE ── */
.breadcrumb-bar { padding: 80px 0 0; background: var(--clr-cream); }
.breadcrumb-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--clr-text-muted);
  padding-top: var(--space-4); transition: color var(--dur-fast);
}
.breadcrumb-link:hover { color: var(--clr-text); }
.prof-tag-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.prof-info { display: flex; flex-direction: column; }

/* Verification panel */
.verify-panel { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
.verify-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.verify-ico {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--clr-primary-bg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.verify-label { font-size: var(--text-sm); font-weight: 600; color: var(--clr-text); margin-bottom: 2px; }
.verify-detail { font-size: var(--text-xs); color: var(--clr-text-muted); line-height: var(--lh-normal); }

/* Trust note */
.trust-note {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--clr-text-muted);
  background: var(--clr-primary-bg); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-top: var(--space-4);
  line-height: var(--lh-normal);
}
.trust-note svg { flex-shrink: 0; margin-top: 1px; }

/* Strengths list */
.prof-strengths {
  list-style: none; display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.prof-strengths li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-base); color: var(--clr-text-2); line-height: var(--lh-normal);
}
.prof-strengths li::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--clr-primary); margin-top: 7px;
}

/* Work history */
.work-history { display: flex; flex-direction: column; gap: var(--space-5); }
.work-item { padding-left: var(--space-4); border-left: 2px solid var(--clr-border); }
.work-period { font-size: var(--text-sm); font-weight: 600; color: var(--clr-text); margin-bottom: 4px; }
.work-role { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--lh-normal); }

/* Sidebar help text */
.sidebar-help { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--lh-relaxed); }
.sidebar-help strong { color: var(--clr-text-2); display: block; margin-bottom: var(--space-1); }
.sidebar-help a { color: var(--clr-primary); }

/* Verified referral story sidebar card */
.referral-story-card {
  background: var(--clr-primary-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-top: var(--space-4);
}
.rs-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--clr-primary); margin-bottom: var(--space-3);
}
.rs-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-base); color: var(--clr-text);
  line-height: var(--lh-relaxed); margin-bottom: var(--space-3);
}
.rs-attr { font-size: var(--text-xs); color: var(--clr-text-muted); }

/* More helpers section */
.more-helpers { padding: var(--space-18) 0; background: var(--clr-cream); }
.more-helpers-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--space-8); flex-wrap: wrap; gap: var(--space-4);
}

/* Before/after story label */
.ba-story-label {
  position: absolute; top: var(--space-4); left: var(--space-4);
  background: rgba(44,138,110,.9); color: var(--clr-white);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-full);
}
.ba-privacy-note {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--clr-text-muted);
  margin-top: var(--space-4); line-height: var(--lh-normal);
}
.ba-privacy-note svg { flex-shrink: 0; margin-top: 1px; }

.prof-header { padding: 106px 0 0; background: var(--clr-cream); }
.prof-header-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--space-12); align-items: start; padding-bottom: var(--space-12); }
.prof-photo-wrap { position: relative; flex-shrink: 0; }
.prof-photo { width: 218px; height: 288px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.prof-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.prof-vbadge {
  position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
  background: var(--clr-primary); color: var(--clr-white); font-size: var(--text-xs); font-weight: 700;
  padding: 5px 13px; border-radius: var(--radius-full); white-space: nowrap; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 4px;
}
.prof-name { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; color: var(--clr-text); margin-bottom: 6px; }
.prof-sub { font-size: var(--text-md); color: var(--clr-text-muted); margin-bottom: var(--space-6); }
.prof-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-7); }
.prof-fact {
  display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--clr-text-2);
  background: var(--clr-white); border: 1.5px solid var(--clr-border);
  padding: 7px 13px; border-radius: var(--radius-full); box-shadow: var(--shadow-xs);
}
.prof-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.prof-micro { font-size: var(--text-xs); color: var(--clr-text-muted); margin-top: var(--space-3); display: flex; align-items: center; gap: 5px; }

.prof-body { padding: 52px 0 84px; background: var(--clr-white); }
.prof-body-inner { display: grid; grid-template-columns: 1fr 330px; gap: var(--space-12); align-items: start; }
.prof-sec { margin-bottom: var(--space-10); padding-bottom: var(--space-10); border-bottom: 1px solid var(--clr-border); }
.prof-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.prof-sec-ttl { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; color: var(--clr-text); margin-bottom: var(--space-3); }
.prof-sec p { font-size: var(--text-base); color: var(--clr-text-2); line-height: var(--lh-relaxed); }
.skills-row { display: flex; flex-wrap: wrap; gap: 7px; }

.ref-quote { background: var(--clr-primary-soft); border-left: 3px solid var(--clr-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 18px 20px; margin-top: var(--space-3); }
.ref-quote p { font-size: var(--text-base); color: var(--clr-text-2); font-style: italic; margin-bottom: 9px; line-height: var(--lh-relaxed); }
.ref-quote-attr { font-size: var(--text-xs); color: var(--clr-text-muted); font-style: normal; font-weight: 600; }

.sidebar-card { background: #FAFCFB; border: 1.5px solid var(--clr-border); border-radius: var(--radius-xl); padding: var(--space-7); position: sticky; top: 86px; }
.sidebar-ttl { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500; margin-bottom: 7px; }
.sidebar-sub { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--space-5); line-height: var(--lh-normal); }
.sidebar-checks { display: flex; flex-direction: column; gap: 11px; margin-bottom: var(--space-6); }
.scheck { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--clr-text-2); }
.scheck-ico { width: 21px; height: 21px; border-radius: 50%; background: var(--clr-primary-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sdivider { height: 1px; background: var(--clr-border); margin: var(--space-5) 0; }
.sidebar-note { font-size: var(--text-xs); color: var(--clr-text-muted); text-align: center; line-height: var(--lh-normal); margin-top: var(--space-3); }

/* ─────────────────────────────────────────────────────────────
   ── REFER PAGE
   ───────────────────────────────────────────────────────────── */
.refer-hero { padding: 106px 0 70px; background: var(--clr-cream); position: relative; overflow: hidden; }
.refer-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: start; position: relative; z-index: 2; }
.refer-hl { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 500; line-height: var(--lh-tight); color: var(--clr-text); margin-bottom: var(--space-4); }
.refer-sub { font-size: var(--text-lg); color: var(--clr-text-muted); margin-bottom: var(--space-8); line-height: var(--lh-relaxed); }
.refer-perks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.refer-why { display: flex; flex-direction: column; gap: var(--space-4); margin-top: 6px; }
.refer-why-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.refer-why-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.refer-why-item strong { font-size: var(--text-base); color: var(--clr-text); display: block; margin-bottom: 2px; }
.refer-why-item p { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--lh-normal); }

.form-card { background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius-2xl); padding: 34px; box-shadow: var(--shadow-md); }
.form-card-ttl { font-family: var(--font-display); font-size: 1.28rem; font-weight: 500; color: var(--clr-text); margin-bottom: 5px; }
.form-card-sub { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--space-6); line-height: var(--lh-normal); }

.form-section-ttl {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--clr-text-muted); margin: var(--space-5) 0 var(--space-3); padding-bottom: 9px; border-bottom: 1px solid var(--clr-border);
}
.form-section-ttl:first-child { margin-top: 0; }

.fg { margin-bottom: var(--space-4); }
.fg label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--clr-text-2); margin-bottom: 6px; }
.fg input, .fg select, .fg textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--clr-text);
  background: var(--clr-white); border: 1.5px solid var(--clr-border); border-radius: var(--radius-md);
  padding: 10px 13px; outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); appearance: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(44,138,110,.11); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--clr-text-faint); }
.fg textarea { resize: vertical; min-height: 88px; line-height: var(--lh-normal); }
.fg select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364696E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.form-success { display: none; text-align: center; padding: 36px 16px; }
.form-success-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--clr-primary-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.form-success h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; margin-bottom: 9px; }
.form-success p { font-size: var(--text-base); color: var(--clr-text-muted); }

.refer-stats { padding: 68px 0; background: var(--clr-white); }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); }
.stat-card { background: var(--clr-cream); border-radius: var(--radius-xl); padding: 30px; text-align: center; }
.stat-n { font-family: var(--font-display); font-size: 2.7rem; font-weight: 500; color: var(--clr-primary); margin-bottom: 5px; }
.stat-l { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: var(--lh-normal); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
/* ── Large desktop ≥1360px: already handled by min(92vw, 1360px) */

/* ── Laptop ~1200px ── */
@media (max-width: 1200px) {
  .browse-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet ~1000px ── */
@media (max-width: 1000px) {
  .browse-grid { grid-template-columns: repeat(2, 1fr); }
  .hc-a { width: 220px; height: 292px; }
  .hc-b { width: 206px; height: 274px; }
  .hc-c { width: 192px; height: 256px; }
}

/* ── Mobile ~860px ── */
@media (max-width: 860px) {
  /* Nav */
  .site-nav {
    display: none; position: fixed; top: 68px; left: 0; right: 0;
    background: var(--clr-cream); flex-direction: column; align-items: stretch;
    padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--clr-border-warm);
    box-shadow: var(--shadow-md); gap: var(--space-1); z-index: 299;
  }
  .site-nav.open { display: flex; }
  .nav-a { padding: 12px 16px; }
  .hamburger { display: flex; }
  .hdr-cta { display: none; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-hl, .hero-sub, .hero-clarify { max-width: 100%; }
  .hero-ctas, .hero-trust { justify-content: center; }
  .hero-vis { height: 340px; }
  .hc-a { width: 158px; height: 210px; left: 10px; }
  .hc-b { width: 148px; height: 196px; right: 8px; }
  .hc-c { width: 138px; height: 182px; left: 56px; }

  /* Sections */
  .how-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .how-step { padding: var(--space-6); }
  .how-step-sub { max-width: 100%; }
  .how-step:hover .how-step-detail, .how-step-detail { max-height: none; opacity: 1; margin-top: var(--space-4); }
  .how-footer { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
  .benefits-layout { grid-template-columns: 1fr; }
  .benefit-feature { min-height: 340px; }
  .benefit-supporting { height: auto; }
  .ref-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .refer-hero-inner { grid-template-columns: 1fr; }
  .prof-header-inner { grid-template-columns: 1fr; }
  .prof-photo-wrap { display: flex; justify-content: center; }
  .prof-body-inner { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 600px) {
  /* browse-grid stacks — preview-grid handled by 768px carousel block */
  .browse-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr; }
  .benefit-support-card { padding: var(--space-4) var(--space-5); }
  .bsc-icon { width: 40px; height: 40px; }
}

/* =============================================================
   MOBILE OPTIMISATION — iPhone/Mobile pass
   Breakpoint: max-width 768px (iPhone 13/14/SE safe)
   IMPORTANT: Desktop/tablet layouts are UNTOUCHED above this block
   ============================================================= */

/* ── Shared carousel mixin — applied to all 3-card sections ── */
.carousel-row {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  padding-bottom: 8px;
  /* Bleed slightly past the wrap so first card starts at edge */
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
}
.carousel-row::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {

  /* ── Global mobile section padding ── */
  .how, .outcomes, .preview, .testimonials, .ref-banner { padding: 56px 0; }

  /* ── Mobile typography ── */
  :root {
    --text-h1: clamp(1.9rem, 7vw, 2.4rem);
    --text-h2: clamp(1.5rem, 5.5vw, 1.9rem);
  }

  /* ── HERO ── */
  .hero { padding: 88px 0 40px; }
  .hero-grid { gap: 32px; }
  .hero-vis { height: 280px; margin-top: 8px; }
  .hc-a { width: 138px; height: 184px; left: 8px; top: 0; }
  .hc-b { width: 130px; height: 172px; right: 4px; top: 18px; }
  .hc-c { width: 120px; height: 160px; left: 44px; bottom: 10px; }
  /* Consistent portrait crop on hero cards */
  .hc img {
    object-fit: cover;
    object-position: center 30%;
    width: 100%; height: 100%;
  }

  /* ── HOW IT WORKS — horizontal carousel ── */
  .how-steps {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 8px;
    /* Override the grid set at 860px */
    grid-template-columns: unset !important;
  }
  .how-steps::-webkit-scrollbar { display: none; }
  .how-step {
    flex: 0 0 82vw !important;
    max-width: 320px !important;
    width: 82vw !important;
    scroll-snap-align: start;
    /* Prevent the step from collapsing */
    min-width: 260px;
  }

  /* ── OUTCOMES — horizontal carousel ── */
  .outcomes-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 8px;
    grid-template-columns: unset !important;
    align-items: unset !important;
  }
  .outcomes-grid::-webkit-scrollbar { display: none; }
  .outcome-card {
    flex: 0 0 82vw !important;
    max-width: 320px !important;
    width: 82vw !important;
    scroll-snap-align: start;
    min-width: 260px;
    /* Ensure card is self-contained */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Outcome label gap fix — clear space below SVG */
  .outcome-img-label {
    display: block;
    padding-top: 20px;
    padding-bottom: 0;
  }

  /* Outcome SVG illustration — fixed height, no overflow */
  .outcome-img-wrap {
    height: 160px;
    flex-shrink: 0;
  }
  .outcome-svg { width: 100%; height: 100%; display: block; }

  /* ── HELPER PREVIEW CARDS — horizontal carousel ── */
  .preview-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 8px;
    grid-template-columns: unset !important;
    align-items: unset !important;
  }
  .preview-grid::-webkit-scrollbar { display: none; }
  /* Legacy preview-grid/.helper-card mobile rules removed —
     unified .hcard-grid handles its own mobile carousel below. */

  /* ── TESTIMONIALS — horizontal carousel ── */
  .testimonials-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 8px;
    grid-template-columns: unset !important;
    align-items: unset !important;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }
  .tcard {
    flex: 0 0 86vw !important;
    max-width: 340px !important;
    width: 86vw !important;
    scroll-snap-align: start;
    min-width: 260px;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Testimonial footer — wrap gracefully on narrow cards */
  .tcard-footer {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tcard-matched, .tcard-verified {
    margin-left: 0;
    white-space: normal;
  }

  /* ── BROWSE GRID — keep single column stack (intentional, not carousel) ── */
  .browse-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  /* ── GENERAL CARD SAFETY ── */
  /* Prevent any card from overflowing the viewport */
  .outcome-card, .tcard, .how-step, .hcard {
    box-sizing: border-box;
    max-width: 100vw;
  }

  /* ── SECTION HEADERS ── */
  .preview-hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* ── REF BANNER ── */
  .ref-inner { gap: 40px; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── Tiny phones (SE, 375px) ── */
@media (max-width: 390px) {
  .how-step, .outcome-card, .tcard {
    flex: 0 0 88vw !important;
    max-width: 310px !important;
    width: 88vw !important;
  }
  .wrap { padding: 0 16px; }
}

/* =============================================================
   BENEFITS-NEW SECTION — clean rebuild
   ============================================================= */
.benefits-new {
  padding: var(--space-18) 0;
  background: var(--clr-cream);
}
.benefits-new-hdr {
  text-align: center;
  max-width: 520px;
  margin: 0 auto var(--space-10);
}
.benefits-new-hdr .h2 { margin-bottom: 0; }

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

/* Each card is a full self-contained flex column */
.benefit-card {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  padding: 0 0 32px 0;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
}
.benefit-card--green { background: #EAF5EF; border-color: rgba(44,138,110,.15); }
.benefit-card--peach { background: #FFF3EE; border-color: rgba(193,98,63,.12); }
.benefit-card--sand  { background: #F0EAE0; border-color: rgba(122,100,70,.12); }

/* Visual area — SVG fills this */
.benefit-visual {
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 24px 24px 0 0;
}
.benefit-visual svg { display: block; width: 100%; height: 100%; }

/* All text content sits below visual with consistent padding */
.benefit-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 24px 28px 16px;
}
.benefit-label--green { color: var(--clr-primary); }
.benefit-label--peach { color: #9B5B3A; }
.benefit-label--sand  { color: #7A6446; }

.benefit-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--clr-text);
  line-height: 1.3;
  margin: 0 28px 12px;
}
.benefit-description {
  font-size: 0.88rem;
  color: var(--clr-text-muted);
  line-height: 1.6;
  margin: 0 28px 20px;
  flex-grow: 1;
}
.benefit-divider {
  border: none;
  border-top: 1px solid rgba(0,0,0,.08);
  margin: 0 28px 20px;
}
.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 28px;
  padding: 0;
}
.benefit-list li {
  font-size: 0.84rem;
  color: var(--clr-text-2);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.benefit-list li::before {
  content: '✓';
  color: var(--clr-primary);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.78rem;
  margin-top: 1px;
}

/* Mobile carousel — benefit cards */
@media (max-width: 768px) {
  .benefit-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 8px;
    margin: 0;
  }
  .benefit-grid::-webkit-scrollbar { display: none; }
  .benefit-card {
    flex: 0 0 84vw;
    max-width: 320px;
    min-width: 260px;
    scroll-snap-align: start;
  }
}

/* [removed] CLEAN REBUILD .helper-grid/.hcard block — replaced by unified .hcard system at end of file */

/* =============================================================
   FINAL POLISH PASS — typography, mobile, swipe affordance
   ============================================================= */

/* ── 1. Remove tcard-matched globally ── */
.tcard-matched { display: none; }

/* ── 2. Global orphan/wrap fixes ── */
.h1, .h2, .h2-sm, .h3,
.hero-hl, .hero-sub, .hero-clarify,
.benefit-title, .benefit-description,
.tcard-quote, .outcome-title, .ref-hl {
  text-wrap: balance;
}

/* Tighter max-widths to prevent bad breaks */
.hero-hl  { max-width: 520px; }
.hero-sub { max-width: 580px; }
.hero-clarify { max-width: 400px; }
.testimonials-hdr .h2 { max-width: 600px; margin-left: auto; margin-right: auto; }
.benefits-new-hdr .h2 { max-width: 400px; margin-left: auto; margin-right: auto; }

/* ── 3. Mobile hero — unified alignment ── */
@media (max-width: 768px) {

  /* Full left-align hero on mobile — no mixed alignment */
  .hero-left {
    text-align: left;
  }
  .hero-ctas { justify-content: flex-start; }
  .hero-trust { justify-content: flex-start; }
  .hero-micro-trust {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .micro-trust-sep { display: none; }
  .micro-trust-item { font-size: 0.78rem; }
  .hero-clarify { text-align: left; }

  /* Hero floating cards — rebalanced composition */
  .hero-vis { height: 300px; margin-top: 8px; }
  .hc-a {
    width: 145px; height: 194px;
    top: 0; left: 12px;
    transform: rotate(-3deg);
  }
  .hc-b {
    width: 135px; height: 180px;
    top: 14px; right: 12px;
    transform: rotate(2.5deg);
  }
  .hc-c {
    width: 128px; height: 170px;
    bottom: 8px; left: 52px;
    transform: rotate(-1deg);
  }

  /* Section padding tighter on mobile */
  .how, .benefits-new, .preview, .testimonials { padding: 52px 0; }

  /* Testimonial footer — stack cleanly */
  .tcard-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Typography — smaller headings on mobile */
  .h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .benefit-title { font-size: 1rem; }
  .tcard-quote { font-size: 0.88rem; }
}

/* ── 4. Swipe affordance — peek next card + fade edge ── */

/* Carousel containers get padding-right so next card peeks */
@media (max-width: 768px) {

  /* Add right-edge fade to signal more content */
  .benefit-grid,
  .helper-grid,
  .how-steps,
  .testimonials-grid {
    position: relative;
  }

  /* Peek: cards don't fill 100% so edge of next card shows */
  .benefit-card,
  .hcard,
  .how-step,
  .tcard {
    /* Already 84vw — next card peeks at ~16vw */
    scroll-snap-align: start;
  }

  /* Swipe hint row below each carousel */
  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.72rem;
    color: var(--clr-text-muted);
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  .swipe-hint-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--clr-border);
    transition: background 300ms;
  }
  .swipe-hint-dot.active { background: var(--clr-primary); }

  /* Right-edge gradient fade on carousel sections */
  .benefits-new .wrap,
  .preview .wrap,
  .how .wrap,
  .testimonials .wrap {
    position: relative;
  }
  .benefits-new .wrap::after,
  .preview .wrap::after,
  .testimonials .wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, var(--clr-cream));
    pointer-events: none;
    z-index: 2;
  }
  .preview .wrap::after {
    background: linear-gradient(to right, transparent, var(--clr-white));
  }
  .testimonials .wrap::after {
    background: linear-gradient(to right, transparent, var(--clr-cream));
  }
}

/* Desktop: hide swipe hints */
@media (min-width: 769px) {
  .swipe-hint { display: none; }
}

/* ── 5. Portrait consistency — all card images ── */
.hcard-photo img {
  object-fit: cover;
  object-position: center 25%;
  width: 100%;
  height: 100%;
}

/* ── 6. Tcard footer — clean without matched label ── */
.tcard-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--clr-border);
  margin-top: auto;
}
.tcard-initials {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--clr-primary-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 500; font-style: italic;
  color: var(--clr-primary);
  flex-shrink: 0;
}
.tcard-author { flex: 1; min-width: 0; }
.tcard-name { font-size: 0.88rem; font-weight: 600; color: var(--clr-text); margin-bottom: 1px; }
.tcard-role { font-size: 0.75rem; color: var(--clr-text-muted); }

/* ── 7. Small phones (375–390px) ── */
@media (max-width: 390px) {
  .hero-hl { font-size: clamp(1.7rem, 8vw, 2rem); }
  .hero-sub { font-size: 0.92rem; }
  .wrap { padding: 0 16px; }
  .benefit-card, .hcard, .tcard, .how-step {
    flex: 0 0 88vw;
    max-width: 300px;
  }
}

/* =============================================================
   PRICING CLARITY SECTION
   ============================================================= */
.pricing-clarity {
  padding: var(--space-18) 0;
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}

.pricing-clarity-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

/* Left — positioning copy */
.pc-heading {
  margin-bottom: var(--space-5);
  max-width: 380px;
  text-wrap: balance;
}
.pc-sub {
  font-size: var(--text-base);
  color: var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
  max-width: 400px;
}
.pc-cta { margin-top: var(--space-4); }

/* Right — two blocks */
.pc-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pc-free-block,
.pc-paid-block {
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
}
.pc-free-block {
  background: var(--clr-primary-bg);
  border: 1.5px solid rgba(44,138,110,.15);
}
.pc-paid-block {
  background: var(--clr-cream);
  border: 1.5px solid var(--clr-border);
}

.pc-block-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: var(--space-4);
}
.pc-block-label--muted { color: var(--clr-text-muted); }

.pc-paid-intro {
  font-size: var(--text-sm);
  color: var(--clr-text-2);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.pc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.pc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--clr-text-2);
  line-height: var(--lh-normal);
}
.pc-list li svg { flex-shrink: 0; }
.pc-list--muted li { color: var(--clr-text-muted); }

.pc-no-agency {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--clr-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-text-2);
}

/* Helper card — direct hire note */
.hcard-direct-hire {
  font-size: 0.70rem;
  color: var(--clr-primary);
  font-weight: 600;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.hcard-direct-hire::before {
  content: '✦';
  font-size: 0.6rem;
}

/* Responsive */
@media (max-width: 860px) {
  .pricing-clarity-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .pc-heading, .pc-sub { max-width: 100%; }
}
@media (max-width: 768px) {
  .pricing-clarity { padding: 52px 0; }
}

/* =============================================================
   PRICING SECTION — S$499 card layout
   ============================================================= */
.pricing-section {
  padding: var(--space-18) 0;
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
}
.pricing-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-14);
  align-items: start;
}
.pricing-heading {
  max-width: 360px;
  text-wrap: balance;
  margin-bottom: var(--space-5);
}
.pricing-sub {
  font-size: var(--text-base);
  color: var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
  max-width: 420px;
  text-wrap: pretty;
}
.pricing-not-agency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-primary);
  background: var(--clr-primary-bg);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

/* Pricing card */
.pricing-card-wrap { position: sticky; top: 88px; }
.pricing-card {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.pricing-card-top {
  background: var(--clr-primary);
  padding: 32px 32px 28px;
  color: var(--clr-white);
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.pricing-label {
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: .9;
  margin-bottom: 4px;
}
.pricing-sublabel {
  font-size: var(--text-xs);
  opacity: .65;
  line-height: 1.5;
}
.pricing-card-body {
  padding: 24px 28px 28px;
}
.pricing-section-ttl {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 12px;
}
.pricing-section-ttl--muted { color: var(--clr-text-muted); }
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pricing-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--clr-text-2);
  line-height: 1.4;
}
.pricing-list li svg { flex-shrink: 0; }
.pricing-list--muted li { color: var(--clr-text-muted); }
.pricing-divider {
  height: 1px;
  background: var(--clr-border);
  margin: 0 0 20px;
}
.pricing-cta-btn {
  display: block;
  width: calc(100% - 56px);
  margin: 0 28px 28px;
  text-align: center;
}

/* Responsive */
@media (max-width: 960px) {
  .pricing-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .pricing-card-wrap { position: static; }
  .pricing-heading, .pricing-sub { max-width: 100%; }
}
@media (max-width: 768px) {
  .pricing-section { padding: 52px 0; }
  .pricing-amount { font-size: 2.4rem; }
}

/* =============================================================
   FINAL POLISH — carousel dots, mobile alignment, typography
   ============================================================= */

/* Active carousel dot animation */
@keyframes dotPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.swipe-hint-dot.active {
  background: var(--clr-primary);
  animation: dotPulse 1.8s ease infinite;
}

/* Mobile section headers — centered */
@media (max-width: 768px) {
  .how-hdr,
  .benefits-new-hdr,
  .testimonials-hdr,
  .pricing-copy { text-align: left; }

  /* Reduce section spacing on mobile */
  .pricing-section { padding: 48px 0; }
  .benefits-new { padding: 48px 0; }
  .how { padding: 48px 0; }

  /* Better hero mobile badge */
  .hero-badge { font-size: 0.72rem; }

  /* Micro trust — tighter on mobile */
  .hero-micro-trust { gap: 4px; }
  .micro-trust-item { font-size: 0.76rem; gap: 4px; }

  /* Helper card name — prevent wrapping */
  .hcard-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Testimonial section heading max-width */
.testimonials-hdr .h2 {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* How It Works heading — no forced break */
.how-hdr .h2 { text-wrap: balance; max-width: 480px; }

/* Pricing heading balance */
.pricing-heading { text-wrap: balance; }

/* Prevent last word orphan on hero sub */
.hero-sub { text-wrap: pretty; }

/* =============================================================
   FIXES — May 2026
   ============================================================= */

/* ── Keyboard focus rings ── */
:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Filter chip active state (browse page) ── */
.fchip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
  white-space: nowrap;
}
.fchip:hover {
  background: var(--clr-primary-bg);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}
.fchip.on,
.fchip[aria-pressed="true"] {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
  font-weight: 600;
}

/* ── Browse empty state ── */
#browse-empty {
  text-align: center;
  padding: 60px 0 40px;
}
#browse-empty p {
  color: var(--clr-text-muted);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

/* ── SVG avatar stack (refer page) ── */
.ref-av-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--clr-white);
  margin-left: -8px;
  flex-shrink: 0;
}
.ref-av-svg:first-child {
  margin-left: 0;
}
.ref-av-svg svg {
  display: block;
}

/* ── Muted text contrast — ensure 4.5:1 on white ── */
.browse-sub,
.hcard-meta,
.footer-tagline,
.preview-sub,
.hero-clarify {
  color: var(--clr-text-muted); /* #64696E — passes AA on white */
}

/* =============================================================
   UX POLISH — May 2026
   Fixes: year script, micro-trust wrap, filter scroll hint,
          hero H1 orphan guard, spacing rhythm
   ============================================================= */

/* ── FIX 1: Footer year — ensure span never shows blank ──
   The <span id="year"> is populated by inline JS at bottom
   of each page. This is a fallback so it never looks broken. */
#year:empty::after {
  content: '2026';
}

/* ── FIX 2: Micro-trust strip — wrap gracefully on mobile ── */
.hero-micro-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  row-gap: 8px;
}
.micro-trust-sep {
  color: var(--clr-text-faint);
  line-height: 1;
  /* hide separators when wrapping — they orphan at line ends */
}
@media (max-width: 640px) {
  .micro-trust-sep {
    display: none;
  }
  .hero-micro-trust {
    gap: 6px 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .micro-trust-item {
    font-size: 0.80rem;
    gap: 5px;
  }
}

/* ── FIX 3: Filter chip row — scroll hint on mobile ── */
.browse-hero .wrap {
  position: relative;
}
.filter-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  padding-bottom: 4px;
  /* allow chips to scroll without pushing layout */
  scroll-snap-type: x proximity;
}
.filter-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.fchip {
  scroll-snap-align: start;
  flex-shrink: 0; /* prevent chips from shrinking */
}

/* Fade-right gradient hint that more chips exist */
@media (max-width: 768px) {
  .browse-hero .wrap {
    /* overlay a fade on the right edge of the filter row */
    position: relative;
  }
  .filter-bar::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    min-width: 40px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--clr-white));
    pointer-events: none;
    flex-shrink: 0;
  }
}

/* ── FIX 4: Hero H1 orphan guard ── */
.hero-hl {
  text-wrap: balance;
  max-width: 560px;
}
@media (max-width: 480px) {
  .hero-hl {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    max-width: 100%;
  }
}

/* ── FIX 5: General mobile spacing rhythm ── */
@media (max-width: 768px) {
  /* Slightly more breathing room between hero elements */
  .hero-ctas {
    margin-bottom: var(--space-5);
  }
  .hero-micro-trust {
    margin-bottom: var(--space-4);
  }
  .hero-trust {
    margin-bottom: var(--space-3);
  }

  /* Browse page: tighten hero padding so filters are closer to fold */
  .browse-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-6);
  }

  /* Reduce H1 bottom margin on browse to close gap to filter chips */
  .browse-hl {
    margin-bottom: var(--space-3);
  }
  .browse-sub {
    margin-bottom: var(--space-5);
  }
}

/* =============================================================
   MOBILE UX — May 2026
   Fix 2: Hero card stack swipe affordance on mobile
   Fix 4: Refer page mobile visual balance
   ============================================================= */

/* ── FIX 2: Hero card stack on mobile ──
   On desktop the cards stack with parallax rotation — looks great.
   On mobile they collapse into a single visible card with no
   affordance. We flatten the stack into a horizontal scroll
   strip so users can swipe through them naturally. */

@media (max-width: 768px) {
  .hero-vis {
    width: 100%;
    overflow: hidden;
    margin-top: var(--space-8);
  }

  .card-stack {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 4px 16px;
    /* Reset desktop rotation/positioning */
    position: static;
    height: auto;
  }

  .card-stack::-webkit-scrollbar {
    display: none;
  }

  /* Scroll dots indicator */
  .card-stack::after {
    content: '';
    min-width: 20px;
    flex-shrink: 0;
  }

  .hc {
    /* Reset desktop absolute positioning and rotation */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    rotate: none !important;

    /* Normalize size — all three cards same shape on mobile */
    width: 220px !important;
    min-width: 220px;
    max-width: 240px;
    height: auto !important;
    flex-shrink: 0;
    scroll-snap-align: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);

    /* Stack contents top-to-bottom so the label sits below the photo */
    display: flex;
    flex-direction: column;
  }

  .hc img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
  }

  /* Swipe hint label — shown below the strip */
  .card-stack-hint {
    display: block;
  }
}

/* Hide swipe hint on desktop */
.card-stack-hint {
  display: none;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* ── FIX 4: Refer page — mobile visual balance ──
   The two-column hero (copy left, form right) stacks on mobile.
   Ensure the form doesn't feel crammed and copy breathes. */

@media (max-width: 768px) {
  .refer-hero-inner {
    flex-direction: column;
    gap: var(--space-8);
    padding-top: var(--space-10);
    padding-bottom: var(--space-8);
  }

  .refer-hero .rev {
    width: 100%;
    max-width: 100%;
  }

  /* Tighten the refer headline on mobile */
  .refer-hl {
    font-size: clamp(2rem, 8vw, 2.8rem);
    text-wrap: balance;
  }

  /* Form card full width on mobile */
  .form-card {
    width: 100%;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  /* Stack the two-column form row on mobile */
  .form-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Why-refer items stack more comfortably */
  .refer-why {
    gap: var(--space-5);
  }

  .refer-why-item {
    gap: var(--space-3);
  }

  /* Avatar + social proof row wraps cleanly */
  .ref-av-stack {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Stats grid single column on mobile */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* How referrals work steps stack vertically */
  .how-steps {
    flex-direction: column;
    gap: var(--space-6);
  }
}
/* ═══════════════════════════════════════════════════
   HERO CSS PATCH — append to bottom of styles.css
   (these rules override earlier declarations)
   ═══════════════════════════════════════════════════ */

/* ── Desktop: tighter grid gap, sub max-width ── */
.hero-grid {
  gap: 56px; /* was var(--space-16) ~80px — pulls cards closer to copy */
}
.hero-sub {
  max-width: 440px; /* was 480px — faster scanning */
  margin-bottom: var(--space-6); /* tighter before CTAs */
}
.hero-hl {
  max-width: 520px;
}
.hero-clarify {
  max-width: 380px;
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

/* ── Micro-trust: better spacing & separator visibility ── */
.hero-micro-trust {
  gap: 10px;
  margin-bottom: var(--space-4);
}
.micro-trust-item {
  gap: 6px;
  font-size: 0.8rem;
}
.micro-trust-sep {
  color: var(--clr-text-muted);
  opacity: 0.5;
}

/* ── Trust chips: consistent height & padding ── */
.hero-trust .chip {
  min-height: 30px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── CTA spacing ── */
.hero-ctas {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ── Desktop cards: better face crop ── */
.hc img {
  object-position: center 12%; /* show faces higher up */
}

/* ── Tablet ~1000px ── */
@media (max-width: 1000px) {
  .hero-grid {
    gap: 40px;
  }
  .hc-a { width: 218px; height: 290px; }
  .hc-b { width: 204px; height: 272px; }
  .hc-c { width: 190px; height: 254px; }
}

/* ── Mobile ~860px: tighten vertical density ── */
@media (max-width: 860px) {
  .hero { padding: 84px 0 36px; }
  .hero-grid { gap: 28px; }
  .hero-vis { height: 320px; }
  .hero-sub { margin-bottom: var(--space-5); }
  .hero-ctas { margin-bottom: var(--space-3); }
  .hero-trust { margin-bottom: var(--space-3); }

  /* Cards: slightly larger, better face visibility */
  .hc-a { width: 162px; height: 216px; left: 12px; top: 0; }
  .hc-b { width: 152px; height: 202px; right: 10px; top: 22px; }
  .hc-c { width: 142px; height: 188px; left: 60px; bottom: 8px; }

  .hc img {
    object-fit: cover;
    object-position: center 18%; /* faces visible, not cropped */
    width: 100%; height: 100%;
  }
}

/* ── Mobile ~768px: left-align, tighter spacing ── */
@media (max-width: 768px) {
  .hero-left { text-align: left; }
  .hero-ctas { justify-content: flex-start; }
  .hero-trust { justify-content: flex-start; }
  .hero-clarify { text-align: left; }

  .hero-micro-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .micro-trust-sep { display: none; }
  .micro-trust-item { font-size: 0.78rem; }

  /* Card composition for mobile */
  .hero-vis { height: 310px; }
  .hc-a { width: 148px; height: 198px; top: 0; left: 12px; transform: rotate(-3deg); }
  .hc-b { width: 138px; height: 184px; top: 16px; right: 12px; transform: rotate(2.5deg); }
  .hc-c { width: 130px; height: 172px; bottom: 6px; left: 54px; transform: rotate(-1deg); }
}

/* ── Small phones ~390px ── */
@media (max-width: 390px) {
  .hero-hl { font-size: clamp(1.65rem, 7.5vw, 1.95rem); }
  .hero-sub { font-size: 0.9rem; }
  .hero-vis { height: 280px; }
  .hc-a { width: 132px; height: 176px; }
  .hc-b { width: 122px; height: 164px; }
  .hc-c { width: 114px; height: 152px; }
}
@media (max-width: 860px) {
  .hero-sub { display: none; }
  .hero-clarify { display: none; }
  .hero-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero-ctas .btn {
    flex: 1;
    min-width: 140px;
    text-align: center;
  }
}
@media (max-width: 860px) {
  .hero-sub { display: none; }
  .hero-clarify { display: none; }
  .hero-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero-ctas .btn {
    flex: 1;
    min-width: 140px;
    text-align: center;
  }
}
/* ── Remove conflicting card overrides ── */
@media (min-width: 861px) {
  .hero-vis { position: relative; height: 520px; }
  .hc { position: absolute; }
}

/* ── Mobile cards: equal size, tight composition ── */
@media (max-width: 860px) {
  .hero-vis { height: 240px; margin-top: 0; gap: 0; }
  .hc-a { width: 145px; height: 193px; left: 8px; top: 0; }
  .hc-b { width: 145px; height: 193px; right: 8px; top: 20px; }
  .hc-c { width: 145px; height: 193px; left: 52px; bottom: 0; }
}
/* ── Desktop: hide redundant copy ── */
@media (min-width: 861px) {
  .hero-sub { display: none !important; }
  .hero-clarify { display: none !important; }
}

/* ── Desktop: fix card stack ── */
@media (min-width: 861px) {
  .hero-vis {
    height: 480px !important;
    width: 420px !important;
  }
  .hc-a {
    width: 248px !important; height: 328px !important;
    top: 0 !important; left: 18px !important;
    transform: rotate(-4deg) !important;
  }
  .hc-b {
    width: 232px !important; height: 308px !important;
    top: 26px !important; right: 0 !important; left: auto !important;
    transform: rotate(3deg) !important;
  }
  .hc-c {
    width: 216px !important; height: 288px !important;
    bottom: 0 !important; left: 100px !important;
    transform: rotate(-1.5deg) !important;
  }
}
/* ── Desktop: proper card spread ── */
@media (min-width: 861px) {
  .hero-vis {
    height: 500px !important;
    width: 100% !important;
  }
  .hc-a {
    width: 240px !important; height: 318px !important;
    top: 20px !important; left: 0 !important;
    transform: rotate(-3deg) !important;
    z-index: 3 !important;
  }
  .hc-b {
    width: 224px !important; height: 298px !important;
    top: 0 !important; right: 20px !important; left: auto !important;
    transform: rotate(2deg) !important;
    z-index: 2 !important;
  }
  .hc-c {
    width: 210px !important; height: 278px !important;
    bottom: 0 !important; left: 120px !important;
    transform: rotate(-1deg) !important;
    z-index: 1 !important;
  }
}

/* ── Scroll hint arrow ── */
.hero::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  border-right: 2px solid var(--clr-text-muted);
  border-bottom: 2px solid var(--clr-text-muted);
  transform: rotate(45deg);
  margin: 0 auto;
  opacity: 0.4;
  animation: bounce 1.8s infinite;
}
@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(6px); }
}
@media (min-width: 861px) {
  .hc-c {
    bottom: -20px !important;
    left: 160px !important;
    transform: rotate(1deg) !important;
    z-index: 4 !important;
  }
  .hc-c img {
    object-position: center 8% !important;
  }
}
/* ── Global font size correction ── */
:root {
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
}

/* ── Desktop: restore sub paragraph to fill left column height ── */
@media (min-width: 861px) {
  .hero-sub {
    display: block !important;
    font-size: 0.95rem !important;
    max-width: 420px !important;
    color: var(--clr-text-muted) !important;
    margin-bottom: var(--space-5) !important;
  }
}
/* ════════════════════════════════
   HOW IT WORKS — Premium Refinement
   ════════════════════════════════ */

/* Section: soft cream background to separate from white hero */
.how {
  background: var(--clr-cream) !important;
}

/* Cards: left-align, always show bullets, softer border */
.how-step {
  align-items: flex-start !important;
  text-align: left !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition:
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s ease !important;
}

/* Hover: gentle elevation only, no green border flash */
.how-step:hover {
  border-color: rgba(47,143,115,0.2) !important;
  box-shadow: 0 8px 24px rgba(47,143,115,0.10) !important;
  transform: translateY(-2px) !important;
}

/* Step number: smaller, more editorial */
.how-step-n {
  font-size: 1.5rem !important;
  color: var(--clr-primary) !important;
  opacity: 0.45 !important;
  margin-bottom: var(--space-3) !important;
  transition: opacity 0.3s ease !important;
}
.how-step:hover .how-step-n {
  opacity: 0.85 !important;
  color: var(--clr-primary) !important;
}

/* Icon: left-aligned, slightly smaller */
.how-ico {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: var(--space-4) !important;
  background: rgba(47,143,115,0.09) !important;
  align-self: flex-start !important;
  transition: background 0.3s ease !important;
}
.how-step:hover .how-ico {
  background: rgba(47,143,115,0.16) !important;
}
/* Keep icon green on hover — don't invert to white */
.how-step:hover .how-ico svg path,
.how-step:hover .how-ico svg circle,
.how-step:hover .how-ico svg rect {
  stroke: var(--clr-primary) !important;
}

/* Title: left-aligned */
.how-step .h3 {
  text-align: left !important;
}

/* Sub: left-aligned, full width */
.how-step-sub {
  text-align: left !important;
  max-width: 100% !important;
  margin-bottom: var(--space-4) !important;
}

/* Bullets: always visible, no hover reveal */
.how-step-detail {
  max-height: none !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
.how-step-detail li {
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}
.how-step-detail li::before {
  opacity: 0.55 !important;
}

/* Footer: upgrade to soft sage pill */
.how-footer {
  margin-top: var(--space-10) !important;
  padding: var(--space-5) var(--space-8) !important;
  background: rgba(47,143,115,0.06) !important;
  border: 1px solid rgba(47,143,115,0.14) !important;
  border-radius: 16px !important;
  gap: var(--space-8) !important;
  justify-content: center !important;
}
.how-timeline,
.how-trust {
  font-size: var(--text-base) !important;
}
.how-trust {
  color: var(--clr-text-2) !important;
}

/* Mobile: tighten gap between headline and cards */
@media (max-width: 860px) {
  .how-hdr {
    margin-bottom: var(--space-7) !important;
  }
  .how-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-4) !important;
    padding: var(--space-5) var(--space-6) !important;
  }
}
/* ── How It Works: separation + alignment fixes ── */

/* White background to separate from cream hero */
.how {
  background: var(--clr-white) !important;
}

/* Re-centre the header */
.how-hdr {
  text-align: center !important;
}
.how-hdr .h2,
.how-hdr .kicker {
  text-align: center !important;
}

/* Mobile: reduce gap between last card and footer pill */
@media (max-width: 860px) {
  .how-steps {
    margin-bottom: 0 !important;
  }
  .how-footer {
    margin-top: var(--space-6) !important;
  }
}
/* ── How It Works: header + mobile fixes ── */

/* Force centre on desktop */
.how .wrap {
  text-align: center;
}
.how-hdr {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Left-align headline on mobile to match card content */
@media (max-width: 860px) {
  .how .wrap { text-align: left; }
  .how-hdr { text-align: left !important; }
  .how-hdr .h2 { text-align: left !important; }
}

/* Mobile: peek at next card to signal scrollability */
@media (max-width: 860px) {
  .how-steps {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--space-4) !important;
    padding-bottom: var(--space-2) !important;
    scrollbar-width: none !important;
  }
  .how-steps::-webkit-scrollbar { display: none; }
  .how-step {
    flex: 0 0 82% !important;
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }
}
/* ── How It Works: final alignment fixes ── */
.how-hdr {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile: slightly narrower cards for better peek */
@media (max-width: 860px) {
  .how-step {
    flex: 0 0 78% !important;
  }
}
@media (max-width: 860px) {
  .how-hdr {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .how-hdr .kicker {
    text-align: left !important;
  }
}
/* ════════════════════════════════
   PRICING — Editorial redesign
   ════════════════════════════════ */

/* Hide old pricing elements if they linger */
.pricing-inner,
.pricing-card-wrap,
.pricing-card { display: none !important; }

.pricing-section {
  background: var(--clr-white) !important;
  border-top: 1px solid var(--clr-border) !important;
  padding: var(--space-18) 0 !important;
}

.pricing-editorial {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.pricing-editorial-hdr {
  text-align: center;
}

.pricing-heading {
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--space-4) !important;
}

.pricing-editorial-sub {
  font-size: var(--text-base);
  color: var(--clr-text-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: var(--lh-relaxed);
}

/* Fee row — amount + label inline */
.pricing-fee-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--clr-cream);
  border-radius: 16px;
  border: 1px solid var(--clr-border);
}

.pricing-fee-amount {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--clr-primary-dk);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.pricing-fee-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 4px;
}

.pricing-fee-sublabel {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  line-height: 1.5;
}

/* Includes grid — 2 col */
.pricing-includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}

.pricing-include-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
  color: var(--clr-text-2);
  line-height: 1.4;
}

.pricing-editorial-cta {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

/* ── Benefits: refined cards ── */
.benefit-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.benefit-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07) !important;
}
.benefit-visual {
  height: 160px !important;
}
.benefit-description {
  font-size: var(--text-base) !important;
}
.benefit-list li {
  font-size: var(--text-base) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .pricing-fee-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
  }
  .pricing-includes-grid {
    grid-template-columns: 1fr;
  }
  .pricing-editorial-cta {
    width: 100%;
    text-align: center;
  }
  .pricing-heading {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }
}
/* ── Pricing editorial: breathing room ── */
.pricing-editorial {
  gap: var(--space-12) !important;
}
.pricing-fee-row {
  margin-bottom: var(--space-6) !important;
  padding: var(--space-7) var(--space-8) !important;
}
.pricing-includes-grid {
  gap: var(--space-4) var(--space-8) !important;
  margin-bottom: var(--space-8) !important;
  padding: 0 var(--space-2) !important;
}
.pricing-editorial-cta {
  margin-top: var(--space-2) !important;
}

@media (max-width: 768px) {
  .pricing-includes-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3) var(--space-4) !important;
  }
}
.pricing-footnote {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  text-align: center;
  margin-top: var(--space-2);
  line-height: 1.6;
}
.pricing-footnote-link {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ── Pricing footnote: smaller, lighter ── */
.pricing-footnote {
  font-size: var(--text-xs) !important;
  color: var(--clr-text-muted) !important;
  text-align: center !important;
  margin-top: var(--space-4) !important;
  line-height: 1.6 !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Mobile: single column includes to avoid word wrapping ── */
@media (max-width: 768px) {
  .pricing-includes-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
}
/* ════════════════════════════════
   HELPER PREVIEW — Mobile compression
   ════════════════════════════════ */

/* [removed] Legacy .preview-grid + .helper-card mobile override — replaced by unified .hcard system at end of file */
/* ── Preview section: cream background to separate from pricing white ── */
.preview {
  background: var(--clr-cream) !important;
}

/* ── Social proof bar: prevent orphan text on mobile ── */
@media (max-width: 860px) {
  .sp-item {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .social-proof-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
  }
}
/* ── Background alternation ── */
.testimonials {
  background: var(--clr-white) !important;
}
.before-after {
  background: var(--clr-cream) !important;
  border-color: transparent !important;
}

/* ── Desktop: fix testimonials-sub orphan ── */
.testimonials-sub {
  max-width: 380px !important;
}

/* ── Mobile: fix preview headline orphan ── */
@media (max-width: 860px) {
  .testimonials-grid + .swipe-hint {
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }
}
/* Desktop: testimonials header — prevent early wrap */
@media (min-width: 861px) {
  .testimonials-hdr .h2 {
    white-space: nowrap !important;
  }
}
/* Push swipe hint up, away from before-after section */
.testimonials-grid + .swipe-hint {
  margin-bottom: var(--space-8) !important;
}
/* ── Desktop section background alternation ── */
@media (min-width: 861px) {
  .benefits   { background: var(--clr-cream) !important; }
  .pricing    { background: var(--clr-white) !important; }
  .preview    { background: var(--clr-cream) !important; }
  .testimonials { background: var(--clr-white) !important; }
  .testimonials-section { background: var(--clr-white) !important; }
}

/* ── Desktop: testimonials title — no early wrap ── */
@media (min-width: 861px) {
  .testimonials-hdr .h2 {
    white-space: nowrap !important;
  }
  .testimonials-sub {
    max-width: 420px !important;
    margin: 0 auto !important;
  }
}
/* ════════════════════════════════
   DESKTOP — section backgrounds (authoritative)
   ════════════════════════════════ */
@media (min-width: 861px) {
  .benefits     { background: var(--clr-cream)  !important; }
  .pricing      { background: var(--clr-white)  !important; }
  .preview      { background: var(--clr-cream)  !important; }
  .testimonials { background: var(--clr-white)  !important; }
}

/* ════════════════════════════════
   DESKTOP — referred helpers header: centre-align to match other sections
   ════════════════════════════════ */
@media (min-width: 861px) {
  .preview-hdr {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .preview-hdr h2 {
    text-align: center !important;
  }
  .preview-hdr p,
  .preview-hdr .preview-sub {
    text-align: center !important;
  }
  /* Keep Browse all → link right-aligned separately below grid */
  .preview-hdr a {
    align-self: center !important;
  }
}

/* ════════════════════════════════
   DESKTOP — testimonials title: fix orphan, keep centred
   ════════════════════════════════ */
@media (min-width: 861px) {
  .testimonials-hdr .h2 {
    white-space: nowrap !important;
  }
  .testimonials-sub {
    max-width: 380px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}
/* ── Correct pricing section selector ── */
.pricing-section { background: var(--clr-cream) !important; }

   /* ════════════════════════════════
   FOOTER — elegant minimal redesign
   ════════════════════════════════ */

.site-footer {
  background: var(--clr-primary-dk) !important;
  padding: var(--space-12) 0 var(--space-8) !important;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

/* Emotional brand line */
.footer-heart {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: rgba(255,255,255,.62);
  max-width: 420px;
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Minimal nav */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.footer-nav a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.footer-nav a:hover { color: var(--clr-white); }
.footer-nav-sep {
  color: rgba(255,255,255,.2);
  font-size: var(--text-sm);
}

/* Legal strip */
.footer-legal-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,.28);
}
.footer-legal-strip a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
}
.footer-legal-strip a:hover { color: rgba(255,255,255,.6); }

/* Testimonial card in ref-banner — tighter on mobile */
@media (max-width: 860px) {
  .ref-quote {
    padding: var(--space-5) !important;
  }
  .ref-quote-text {
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal) !important;
  }
  .ref-banner {
    padding: var(--space-12) 0 !important;
  }
}
/* [removed] Legacy .helper-grid carousel mobile override — replaced by unified .hcard system at end of file */

/* ── Pricing: white on all screen sizes, final override ── */
.pricing-section { background: var(--clr-white) !important; }

   /* ════════════════════════════════════════════════════════════
   FINAL POLISH PASS — May 2026
   Appended overrides. Do not edit code above this block.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Hero photo cluster: align backdrop cards (Siti + Rizalyn)
   so both top edges match. Aye Aye stays lowest in front.
   Original: .hc-a top:0, .hc-b top:26px → mismatch.            */
.hc-b {
  top: 0 !important;
}

/* Optional micro-balance: keep front card visually deepest */
.hc-c {
  bottom: 24px !important;
}

/* ── 2. Hero subhead: prevent awkward orphan wraps             */
.hero-sub {
  text-wrap: pretty;
}

/* ── 3. Hero badge row: already correct in HTML (chip-g for
   first two = trust signals, plain .chip for third = process).
   Tiny tweak: lift the outlined chip's border so the role is
   clearer at a glance.                                          */
.hero-trust .chip:not(.chip-g):not(.chip-p):not(.chip-dk) {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: var(--clr-white);
}

/* ── 4. Mobile hero photo cluster: prevent right-edge cut-off  */
@media (max-width: 860px) {
  .hero-vis {
    overflow: hidden;
  }
  .hc-a, .hc-b, .hc-c {
    max-width: calc(100vw - 32px);
  }
}

/* ── 5. "Better for everyone" cards: balance visual density.
   Reduce the busy middle card's visual height slightly so the
   trio reads as a set, not a centerpiece + bookends.           */
.benefit-card--peach .benefit-visual {
  height: 168px;
}
.benefit-card--green .benefit-visual,
.benefit-card--sand .benefit-visual {
  height: 180px;
}

/* ── 6. Pricing section: tighten top whitespace                */
.pricing-section {
  padding-top: clamp(56px, 7vw, 88px) !important;
}
@media (max-width: 860px) {
  .pricing-section {
    padding-top: 48px !important;
  }
}

/* ── 7. "Know a good helper?" green panel: reduce vertical
   padding so it doesn't dwarf the content. Also tighten the
   testimonial card's inner padding on desktop.                 */
.ref-banner {
  padding: clamp(64px, 8vw, 104px) 0 !important;
}
.ref-card {
  padding: var(--space-6) var(--space-7);
}
@media (min-width: 861px) {
  .ref-inner {
    align-items: center;
    gap: var(--space-10);
  }
}

/* ── 8. Footer (image 16 context): improve text contrast on
   the dark-green footer for the tagline and origin lines.
   Lift from 0.5/0.38 to AA-passing values.                     */
.footer-tagline {
  color: rgba(252, 247, 238, 0.78) !important;
}
.footer-origin {
  color: rgba(252, 247, 238, 0.68) !important;
}
.footer-heart {
  color: rgba(252, 247, 238, 0.74) !important;
}
.footer-legal-strip,
.footer-legal {
  color: rgba(252, 247, 238, 0.48) !important;
}
/* ════════════════════════════════════════════════════════════
   BROWSE PAGE — editorial redesign (Phase 1)
   New namespace: b* to avoid collisions with .browse-* and
   .helper-card / .hcard-* which are used elsewhere.
   ════════════════════════════════════════════════════════════ */

/* ── HERO: calm, editorial ────────────────────────────────── */
.bhero {
  background: var(--clr-cream);
  padding: clamp(96px, 12vw, 140px) 0 clamp(40px, 5vw, 64px);
}
.bhero-inner {
  max-width: 760px;
}
.bhero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--clr-primary);
  background: var(--clr-primary-bg);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}
.bhero-hl {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.12;
  color: var(--clr-text);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.bhero-sub {
  font-size: var(--text-md);
  color: var(--clr-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 56ch;
  margin: 0;
}

/* ── FILTER ROW: soft, single line, less SaaS ─────────────── */
.bfilters {
  background: var(--clr-cream);
  padding: 0 0 clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--clr-border-warm);
}
.bfilters-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.bfilter-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bpill {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--clr-text-2);
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  letter-spacing: 0;
}
.bpill:hover {
  background: var(--clr-primary-soft);
  color: var(--clr-primary);
}
.bpill.on {
  background: var(--clr-primary-bg);
  color: var(--clr-primary);
  font-weight: 600;
}
.bpill:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

.bfilter-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--clr-text-muted);
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.bfilter-more:hover {
  color: var(--clr-primary);
  background: var(--clr-primary-soft);
}
.bfilter-more svg {
  opacity: 0.7;
}

/* ── EDITORIAL CARD GRID ──────────────────────────────────── */
.bgrid-section {
  background: var(--clr-cream);
  padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 120px);
}
.bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}

/* [removed] Legacy .bcard editorial block — replaced by unified .hcard system at end of file */

/* ── Empty state ──────────────────────────────────────────── */
.bgrid-empty {
  text-align: center;
  padding: var(--space-12) 0 var(--space-8);
  color: var(--clr-text-muted);
}
.bgrid-empty p {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}
.bgrid-reset {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-primary);
  background: transparent;
  border: 1.5px solid var(--clr-primary);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.bgrid-reset:hover {
  background: var(--clr-primary-soft);
}

/* ── Quiet trust strip ────────────────────────────────────── */
.btrust {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--clr-border-warm);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  text-align: center;
}
.btrust-sep {
  color: var(--clr-text-faint);
  opacity: 0.6;
}

/* ── More profiles note ──────────────────────────────────── */
.bgrid-note {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  font-style: italic;
  font-family: var(--font-display);
}
.bgrid-note a {
  color: var(--clr-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(44, 138, 110, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.bgrid-note a:hover {
  text-decoration-color: var(--clr-primary);
}

/* ── "MORE FILTERS" MODAL ────────────────────────────────── */
.bmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.bmodal[hidden] {
  display: none;
}
.bmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 94, 72, 0.32);
  backdrop-filter: blur(6px);
  animation: bmodalFade 200ms var(--ease);
}
.bmodal-panel {
  position: relative;
  background: var(--clr-white);
  border-radius: 24px;
  padding: clamp(32px, 4vw, 48px);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  animation: bmodalRise 260ms var(--ease);
}
.bmodal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--clr-text-muted);
  transition: background var(--dur-fast) var(--ease);
}
.bmodal-close:hover {
  background: var(--clr-cream-dk);
  color: var(--clr-text);
}
.bmodal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--clr-primary-bg);
  color: var(--clr-primary);
  margin: 0 auto var(--space-5);
}
.bmodal-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--clr-text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}
.bmodal-text {
  font-size: var(--text-base);
  color: var(--clr-text-2);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-3);
}
.bmodal-text--muted {
  color: var(--clr-text-muted);
  font-size: var(--text-sm);
}
.bmodal-cta {
  margin-top: var(--space-5);
  min-width: 140px;
}

@keyframes bmodalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bmodalRise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .bgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .bhero {
    padding-top: 88px;
  }
  .bhero-hl br {
    display: none;
  }
  .bfilters-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .bfilter-pills {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* hide scrollbar */
    scrollbar-width: none;
  }
  .bfilter-pills::-webkit-scrollbar {
    display: none;
  }
  .bpill {
    flex-shrink: 0;
  }
  .bfilter-more {
    align-self: flex-end;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .bgrid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
/* [removed] Legacy .bcard mobile responsive rule — replaced by unified .hcard system at end of file */
  .btrust {
    flex-direction: column;
    gap: 6px;
  }
  .btrust-sep {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════
   BROWSE PAGE — editorial calm layout
   ═══════════════════════════════════════════════════════ */

/* ── Hero ── */
.bhero {
  padding: clamp(72px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
  background: var(--cream, #FCF7EE);
}
.bhero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.bhero-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #2C5F4F);
  font-weight: 600;
  margin-bottom: 20px;
  opacity: 0.85;
}
.bhero-hl {
  font-family: var(--serif, "Cormorant Garamond", "Playfair Display", Georgia, serif);
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1.08;
  font-weight: 500;
  color: var(--ink, #1F2A24);
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.bhero-sub {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft, #4A5651);
  max-width: 540px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ── Filter row ── */
.bfilters {
  padding: 16px 0 40px;
  background: var(--cream, #FCF7EE);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  background-color: rgba(252, 247, 238, 0.88);
}
.bfilters-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════
   POLISH BLOCK — May 2026 (final clean version)
   ═══════════════════════════════════════════ */

/* Desktop: keep testimonials title on 1 line */
@media (min-width: 769px) {
  .testimonials-hdr .h2 {
    white-space: nowrap !important;
  }
  .hero-sub {
    text-wrap: pretty !important;
  }
}

/* Pricing — wider, more substantial on desktop */
@media (min-width: 901px) {
  .pricing-editorial {
    max-width: 980px !important;
  }
  .pricing-fee-row {
    padding: 32px 40px !important;
    gap: 36px !important;
  }
  .pricing-fee-amount {
    font-size: 3.4rem !important;
  }
  .pricing-includes-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px 32px !important;
  }
  .pricing-fee-label,
  .pricing-fee-sublabel {
    text-wrap: pretty !important;
  }
}

/* Hero trust bullets — single row when possible, clean wrap otherwise */
.hero-micro-trust {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px 14px !important;
}
.micro-trust-item {
  white-space: nowrap !important;
}

/* Card height consistency now handled by unified .hcard system at end of file. */

/* Orphan prevention */
.preview-sub,
.pricing-fee-label,
.pricing-fee-sublabel,
.pricing-editorial-sub,
.hero-sub,
.footer-heart {
  text-wrap: pretty !important;
}

/* Mobile: left-align everything */
@media (max-width: 768px) {
  .hero-micro-trust {
    align-items: flex-start !important;
    margin-left: 0 !important;
  }
  .pricing-editorial-hdr,
  .pricing-heading,
  .pricing-editorial-sub,
  .pricing-footnote {
    text-align: left !important;
    margin-left: 0 !important;
    max-width: 100% !important;
  }
  .pricing-editorial-cta {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  .footer-heart,
  .footer-inner,
  .testimonials-hdr,
  .testimonials-sub,
  .benefits-new-hdr {
    text-align: left !important;
    max-width: 100% !important;
  }
  .testimonials-hdr .h2,
  .benefits-new-hdr .h2 {
    text-align: left !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .footer-nav,
  .footer-legal-strip {
    justify-content: flex-start !important;
  }
}


/* Center pricing fee row + includes grid on desktop */
@media (min-width: 901px) {
  .pricing-fee-row {
    justify-content: center !important;
    text-align: left !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .pricing-includes-grid {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
  }
  .pricing-include-item {
    justify-content: flex-start !important;
  }
}


/* Footer tagline — balanced wrapping (no orphans) */
.footer-heart {
  text-wrap: balance !important;
  max-width: 480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* On mobile keep it left-aligned but still balanced */
@media (max-width: 768px) {
  .footer-heart {
    text-wrap: balance !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* =============================================================
   UNIFIED HELPER CARD — single component, two display modes
   .hcard                → compact, hover/tap-to-reveal quote (homepage, other helpers)
   .hcard.hcard--full    → full editorial card, quote always visible (Browse Helpers)
   ============================================================= */

/* Grid containers */
.hcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
}
.hcard-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

/* Card shell */
.hcard {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), border-color 260ms var(--ease);
}
.hcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
  border-color: var(--clr-sand, rgba(0,0,0,0.12));
}

/* Photo */
.hcard-photo {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: linear-gradient(170deg, #EEF3F0 0%, #CCDDD5 100%);
}
.hcard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 600ms var(--ease);
}
.hcard:hover .hcard-photo img { transform: scale(1.03); }

/* Tier badge — quiet pill, bottom-left of photo */
.hcard-tier {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  letter-spacing: 0;
  transition: opacity 220ms var(--ease);
}
.hcard-tier svg { flex-shrink: 0; }
.hcard-tier--verified {
  color: var(--clr-primary);
  background: rgba(255, 255, 255, 0.96);
}
.hcard-tier--referred {
  color: var(--clr-text-2, #5F5E5A);
  background: rgba(255, 255, 255, 0.94);
}

/* Hover/tap overlay — compact card only */
.hcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 42, 30, 0.94) 0%, rgba(12, 42, 30, 0.55) 55%, rgba(12, 42, 30, 0.05) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  gap: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.hcard:hover .hcard-overlay,
.hcard.is-open .hcard-overlay {
  opacity: 1;
  pointer-events: auto;
}
.hcard:hover .hcard-tier,
.hcard.is-open .hcard-tier { opacity: 0; }

.hcard-overlay-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
  text-wrap: pretty;
}
.hcard-overlay-cite {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.78);
  font-style: normal;
  font-weight: 500;
}
.hcard-overlay-specialty {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-display);
  font-style: italic;
  margin-top: 2px;
}

/* Body */
.hcard-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.hcard-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--clr-text);
  margin: 0;
  letter-spacing: -0.005em;
}
.hcard-meta {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  margin: 0;
  line-height: var(--lh-normal);
}

/* ── FULL variant (Browse Helpers): quote always visible inline ── */
.hcard--full .hcard-overlay { display: none; }
.hcard--full .hcard-tier { display: none; }
.hcard--full .hcard-body {
  padding: var(--space-6) var(--space-6) var(--space-5);
  gap: var(--space-2);
}

.hcard-quote {
  margin: var(--space-3) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--clr-border);
}
.hcard-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--clr-text-2, var(--clr-text));
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-2);
  text-wrap: pretty;
}
.hcard-quote cite {
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--clr-text-muted);
  letter-spacing: 0.01em;
}
.hcard-specialty {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  margin: var(--space-2) 0 0;
  font-style: italic;
  font-family: var(--font-display);
}

/* Tier footer line — full variant only */
.hcard-tier-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--clr-border);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--clr-text-muted);
}
.hcard-tier-row svg { flex-shrink: 0; }
.hcard-tier-row--verified { color: var(--clr-primary); }
.hcard-tier-row--verified svg { color: var(--clr-primary); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hcard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Default: carousel on mobile (homepage, other helpers) */
  .hcard-grid:not(.hcard-grid--static) {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 8px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .hcard-grid:not(.hcard-grid--static)::-webkit-scrollbar { display: none; }
  .hcard-grid:not(.hcard-grid--static) > .hcard {
    flex: 0 0 78%;
    max-width: 320px;
    min-width: 260px;
    scroll-snap-align: start;
  }
  /* Browse Helpers stays as stacked single column */
  .hcard-grid--static {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hcard-grid--static > .hcard {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* =============================================================
   UNIFIED HELPER CARD — tap-to-reveal JS hook
   The .is-open class is toggled by JS on touch devices.
   See README in your repo for the JS snippet to include.
   ============================================================= */

/* =============================================================
   HERO CARD STACK — MOBILE FINAL OVERRIDE
   The card stack accumulated 14+ conflicting .hc-a/b/c rules
   across the codebase. On mobile we collapse to a horizontal
   swipe row of three IDENTICAL cards. This block lives at the
   end of the file so it wins the cascade unconditionally.
   ============================================================= */
@media (max-width: 860px) {
  .hero-vis {
    height: auto !important;
    width: 100% !important;
    margin-top: var(--space-6, 18px);
    overflow: hidden;
  }
  .card-stack {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px 4px 16px !important;
    position: static !important;
    height: auto !important;
  }
  .card-stack::-webkit-scrollbar { display: none; }

  /* All three cards: identical, neutral position, flex-grown photo */
  .hc,
  .hc-a,
  .hc-b,
  .hc-c {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    rotate: none !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 290px !important;
    flex: 0 0 220px !important;
    scroll-snap-align: center;
    border-radius: var(--radius-lg, 16px) !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    margin: 0 !important;
  }
  .hc img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 20%;
    display: block;
  }
}

/* Small phones — slightly tighter cards but still identical */
@media (max-width: 400px) {
  .hc,
  .hc-a,
  .hc-b,
  .hc-c {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 264px !important;
    flex: 0 0 200px !important;
  }
}

/* =============================================================
   MOBILE FINAL OVERRIDES (round 2)
   1. Hero micro-trust list — 2-column grid instead of stacked
   2. Hero card stack — bring sizes back down (was 220×290 too big)
   ============================================================= */

@media (max-width: 860px) {
  /* Lay the four trust bullets in a tight 2×2 grid */
  .hero-micro-trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    align-items: start !important;
    gap: 6px 14px !important;
    margin-top: var(--space-3, 12px);
  }
  .micro-trust-sep { display: none !important; }
  .micro-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Shrink hero cards to original-ish mobile size */
  .hc,
  .hc-a,
  .hc-b,
  .hc-c {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
    height: 198px !important;
    flex: 0 0 148px !important;
  }
}

/* Small phones — keep the 2×2 grid but tighten */
@media (max-width: 400px) {
  .hero-micro-trust {
    gap: 5px 10px !important;
  }
  .micro-trust-item {
    font-size: 0.78rem;
    gap: 5px;
  }

  .hc,
  .hc-a,
  .hc-b,
  .hc-c {
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    height: 184px !important;
    flex: 0 0 138px !important;
  }
}

/* =============================================================
   MOBILE: HEADER CLEARANCE FIX
   The fixed site header is 68px tall. Several pages reset their
   hero/first-section top padding to 40px on mobile, hiding the
   first 28px of content behind the header. Restore safe clearance.
   ============================================================= */
@media (max-width: 768px) {
  /* Browse page hero — restore clearance above the H1 */
  .browse-hero {
    padding-top: 96px !important;
  }

  /* Refer page hero — restore clearance above the eyebrow + H1 */
  .refer-hero {
    padding-top: 0 !important;
  }
  .refer-hero-inner {
    padding-top: 96px !important;
  }

  /* Profile page header — restore clearance above the photo */
  .prof-header {
    padding-top: 96px !important;
  }

  /* In-page anchor jumps (e.g. clicking "How It Works" in nav) */
  /* — make the section land below the fixed header */
  #how,
  .how,
  section[id] {
    scroll-margin-top: 84px;
  }
}

/* =============================================================
   BROWSE PAGE — EARLY-STAGE COMMUNITY POSITIONING
   Replaces the old 3-helper-cards grid with:
   - Onboarding strip (status indicator)
   - Preview-of-format card (single illustrative example)
   - Process explainer (kept, restyled)
   - Two pathways: waitlist + active match
   When real profiles exist, the .format-section preview can be
   replaced by a .hcard-grid of live profiles — all surrounding
   sections remain valuable as supporting context.
   ============================================================= */

/* ─── Onboarding strip ─── */
.onboarding-strip {
  padding: 32px 0 24px;
  background: var(--clr-cream);
}
.ob-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 22px;
  background: rgba(44, 138, 110, 0.06);
  border: 1px solid rgba(44, 138, 110, 0.18);
  border-radius: var(--radius-lg, 14px);
}
.ob-dot {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  background: var(--clr-primary, #2C8A6E);
  border-radius: 50%;
}
.ob-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: var(--clr-primary, #2C8A6E);
  opacity: 0.25;
  animation: obPulse 2.4s ease-out infinite;
}
@keyframes obPulse {
  0%   { transform: scale(0.7); opacity: 0.45; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(0.7); opacity: 0; }
}
.ob-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clr-text, #2A2926);
}
.ob-text strong {
  font-weight: 600;
  color: var(--clr-primary, #2C8A6E);
}

/* ─── Section heading utility (shared by format, process, pathways) ─── */
.format-hdr {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.format-hdr .kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.format-hdr .h2 {
  text-wrap: balance;
  margin-bottom: 16px;
}
.format-sub {
  color: var(--clr-text-muted, #6B7370);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

/* ─── Preview of profile format ─── */
.format-section {
  padding: 80px 0 80px;
  background: var(--clr-white);
}
.preview-card-wrap {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
}
.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0 auto 18px;
  background: var(--clr-cream);
  border: 1px solid var(--clr-border-warm, rgba(0,0,0,0.08));
  border-radius: var(--radius-full, 999px);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted, #6B7370);
  text-transform: uppercase;
}
.preview-badge svg {
  flex-shrink: 0;
  opacity: 0.65;
}
.preview-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-xl, 20px);
  padding: 36px 36px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  position: relative;
}
.preview-card-wrap {
  text-align: center;
}
.preview-card { text-align: left; }

.preview-top {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--clr-border, #E5E1DA);
}
.preview-photo-slot {
  width: 96px;
  height: 96px;
  background: var(--clr-cream);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-lg, 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--clr-text-muted, #6B7370);
}
.preview-photo-slot svg {
  opacity: 0.55;
}
.preview-photo-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: center;
  line-height: 1.3;
  padding: 0 4px;
}
.preview-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 10px;
  background: rgba(44, 138, 110, 0.10);
  color: var(--clr-primary, #2C8A6E);
  border-radius: var(--radius-full, 999px);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.preview-name {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--clr-text, #2A2926);
}
.preview-initial {
  font-style: italic;
  opacity: 0.65;
}
.preview-line {
  margin: 0;
  font-size: 0.88rem;
  color: var(--clr-text-muted, #6B7370);
  letter-spacing: 0.01em;
}

.preview-section {
  margin-bottom: 24px;
}
.preview-section:last-child {
  margin-bottom: 0;
}
.preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-primary, #2C8A6E);
  margin-bottom: 8px;
}
.preview-summary {
  margin: 0 0 14px;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--clr-text, #2A2926);
}
.preview-quote {
  margin: 0;
  padding: 14px 18px;
  background: var(--clr-cream);
  border-left: 3px solid rgba(44, 138, 110, 0.4);
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clr-text, #2A2926);
}
.preview-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted, #6B7370);
}
.preview-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--clr-border, #E5E1DA);
}
.preview-detail {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clr-text, #2A2926);
}

.format-foot {
  max-width: 580px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--clr-text-muted, #6B7370);
}

/* ─── Process explainer (numbered 3-step) ─── */
.process-section {
  padding: 80px 0 80px;
  background: var(--clr-cream);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}
.process-step {
  background: var(--clr-white);
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-xl, 20px);
  padding: 32px 28px;
}
.process-step-n {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: rgba(44, 138, 110, 0.08);
  color: var(--clr-primary, #2C8A6E);
  border-radius: 50%;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.process-step-h {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  color: var(--clr-text, #2A2926);
  text-wrap: balance;
}
.process-step-p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--clr-text-muted, #6B7370);
}

/* ─── Pathways: two-card engagement section ─── */
.pathways-section {
  padding: 80px 0 80px;
  background: var(--clr-white);
}
.pathways-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
.pathway-card {
  background: var(--clr-cream);
  border: 1px solid var(--clr-border-warm, rgba(0,0,0,0.08));
  border-radius: var(--radius-xl, 20px);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
}
.pathway-card-alt {
  background: rgba(44, 138, 110, 0.05);
  border: 1px solid rgba(44, 138, 110, 0.15);
}
.pathway-icon {
  width: 44px;
  height: 44px;
  background: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary, #2C8A6E);
  margin-bottom: 18px;
  border: 1px solid var(--clr-border, #E5E1DA);
}
.pathway-icon-alt {
  background: var(--clr-primary, #2C8A6E);
  color: var(--clr-white);
  border-color: var(--clr-primary, #2C8A6E);
}
.pathway-h {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.45rem;
  font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  color: var(--clr-text, #2A2926);
  text-wrap: balance;
}
.pathway-p {
  margin: 0 0 22px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--clr-text-muted, #6B7370);
  flex: 1;
}
.pathway-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pathway-input {
  padding: 14px 18px;
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-md, 10px);
  font-size: 1rem;
  background: var(--clr-white);
  font-family: inherit;
  color: var(--clr-text, #2A2926);
}
.pathway-input:focus {
  outline: none;
  border-color: var(--clr-primary, #2C8A6E);
  box-shadow: 0 0 0 3px rgba(44, 138, 110, 0.12);
}
.pathway-btn {
  width: 100%;
}
.pathway-btn-full {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/* ─── Mobile adjustments ─── */
@media (max-width: 768px) {
  .onboarding-strip {
    padding: 24px 0 16px;
  }
  .ob-inner {
    padding: 16px 18px;
    gap: 12px;
  }
  .ob-text {
    font-size: 0.9rem;
  }

  .format-section,
  .process-section,
  .pathways-section {
    padding: 56px 0 64px;
  }

  .format-hdr {
    margin-bottom: 40px;
  }
  .format-hdr .h2 {
    font-size: 1.65rem;
  }
  .format-sub {
    font-size: 0.95rem;
  }

  .preview-card {
    padding: 26px 22px 24px;
  }
  .preview-top {
    grid-template-columns: 72px 1fr;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  .preview-photo-slot {
    width: 72px;
    height: 72px;
  }
  .preview-photo-slot svg {
    width: 30px;
    height: 30px;
  }
  .preview-photo-label {
    font-size: 0.55rem;
  }
  .preview-name {
    font-size: 1.35rem;
  }
  .preview-summary {
    font-size: 1rem;
  }
  .preview-quote {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
  .preview-section-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .process-step {
    padding: 26px 22px;
  }

  .pathways-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pathway-card {
    padding: 28px 22px 24px;
  }
}

/* =============================================================
   WHY REFERRALS MATTER — editorial asymmetric layout
   Replaces the previous 3-equal-cards "tcard" educational
   section. Featured card on left (1.2fr), two supporting
   cards stacked on right (1fr). Scoped classes (.why-*) so a
   future .tcard testimonial grid can coexist without conflict.
   ============================================================= */

.why-section {
  padding: 80px 0 80px;
  background: var(--clr-white);
}

/* Header block — anchored to same vertical column as grid below */
.why-hdr {
  max-width: 920px;
  margin: 0 auto 56px;
  text-align: center;
}
.why-hdr .kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.why-h2 {
  margin: 0 auto 16px;
  max-width: 16ch;
  text-wrap: balance;
}
.why-sub {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--clr-text-muted, #6B7370);
  font-size: 1.05rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Grid: feature (1.2fr) + supporting stack (1fr) */
.why-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  align-items: stretch;
}

.why-supporting {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
}

/* Shared card styles */
.why-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-xl, 20px);
  padding: 38px 36px 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base, 200ms) var(--ease, ease), box-shadow var(--dur-base, 200ms) var(--ease, ease);
}
.why-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}

/* Featured card (left) — warmer, more emphasis */
.why-card-feature {
  background: var(--clr-cream, #FCF7EE);
  border-color: rgba(44, 138, 110, 0.18);
  padding: 48px 44px 40px;
}

/* Icon treatment */
.why-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(44, 138, 110, 0.08);
  color: var(--clr-primary, #2C8A6E);
  border-radius: 50%;
  margin-bottom: 22px;
}
.why-icon-feature {
  width: 52px;
  height: 52px;
  background: rgba(44, 138, 110, 0.12);
  margin-bottom: 26px;
}

/* Typography */
.why-card-h {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.55rem;
  font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--clr-text, #2A2926);
  text-wrap: balance;
}
.why-card-feature .why-card-h {
  font-size: 1.9rem;
  line-height: 1.2;
}

.why-card-p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--clr-text, #2A2926);
}
.why-card-support .why-card-p {
  font-size: 0.96rem;
}

/* Editorial italic caption (feature card only) */
.why-card-caption {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(44, 138, 110, 0.18);
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--clr-text-muted, #6B7370);
}
.why-card-caption em {
  font-style: italic;
}

/* ─── Tablet ─── */
@media (max-width: 980px) {
  .why-section {
    padding: 72px 0 80px;
  }
  .why-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
  .why-supporting {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }
  .why-card-feature {
    padding: 40px 36px 34px;
  }
}

/* ─── Mobile ─── */
@media (max-width: 700px) {
  .why-section {
    padding: 56px 0 64px;
  }
  .why-hdr {
    margin-bottom: 40px;
    padding: 0 4px;
  }
  .why-h2 {
    font-size: 1.85rem;
    line-height: 1.18;
  }
  .why-sub {
    font-size: 0.98rem;
  }
  .why-grid {
    gap: 14px;
  }
  .why-supporting {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .why-card {
    padding: 30px 26px 26px;
  }
  .why-card-feature {
    padding: 34px 28px 28px;
  }
  .why-card-h {
    font-size: 1.4rem;
  }
  .why-card-feature .why-card-h {
    font-size: 1.65rem;
  }
  .why-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
  }
  .why-icon-feature {
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
  }
  .why-card-caption {
    font-size: 0.98rem;
    margin-top: 14px;
    padding-top: 14px;
  }
}

/* =============================================================
   GLOBAL VERTICAL RHYTHM — May 2026 refinement
   Modest reduction in section padding sitewide to tighten flow.
   Editorial breathing room preserved; "empty template" gaps
   compressed. Targets ~12% reduction from prior values.
   ============================================================= */

@media (min-width: 769px) {
  /* Browse page sections — was 88/96, now 72/80 */
  .format-section,
  .pathways-section {
    padding: 72px 0 80px;
  }
  .journey-section {
    padding: 64px 0 72px;
  }

  /* Why-section on homepage — was 96/104, now 80/88 */
  .why-section {
    padding: 80px 0 88px;
  }

  /* Increase breathing room between heading block and grid on why-section */
  .why-hdr {
    margin-bottom: 72px;
  }
}

/* =============================================================
   JOURNEY TIMELINE — editorial horizontal flow
   Replaces 3-equal-cards "process" pattern with a connected
   timeline: dots + soft sage line + spare copy beneath each.
   On mobile, becomes vertical with a left-aligned spine.
   ============================================================= */

.journey-section {
  background: var(--clr-cream, #FCF7EE);
  padding: 80px 0 88px;
}
.journey-hdr {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
}
.journey-hdr .kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.journey-h {
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}

/* Desktop: horizontal timeline */
.journey-timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  position: relative;
  counter-reset: journey;
}

/* Soft sage line connecting the three dots */
.journey-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 16.67%;
  right: 16.67%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(44, 138, 110, 0.25) 12%,
    rgba(44, 138, 110, 0.25) 88%,
    transparent 100%);
  z-index: 0;
}

.journey-step {
  position: relative;
  padding: 0 16px;
  text-align: center;
  z-index: 1;
}

.journey-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 1px solid rgba(44, 138, 110, 0.25);
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--clr-primary, #2C8A6E);
  position: relative;
}
.journey-dot span {
  line-height: 1;
  margin-top: -2px;
}

.journey-step-h {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  line-height: 1.25;
  color: var(--clr-text, #2A2926);
  text-wrap: balance;
}

.journey-step-p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--clr-text-muted, #6B7370);
  max-width: 22ch;
  margin: 0 auto;
}

/* Tablet — same horizontal but tighter */
@media (max-width: 900px) {
  .journey-section {
    padding: 64px 0 72px;
  }
  .journey-hdr {
    margin-bottom: 48px;
  }
  .journey-step {
    padding: 0 8px;
  }
  .journey-step-h {
    font-size: 1.2rem;
  }
}

/* Mobile — vertical with left-aligned spine */
@media (max-width: 640px) {
  .journey-section {
    padding: 48px 0 56px;
  }
  .journey-hdr {
    margin-bottom: 40px;
    padding: 0 4px;
  }
  .journey-h {
    font-size: 1.7rem;
  }

  .journey-timeline {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: 18px;
    max-width: 360px;
    margin: 0 auto;
  }
  .journey-timeline::before {
    /* Switch to vertical spine */
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      rgba(44, 138, 110, 0.25),
      rgba(44, 138, 110, 0.25));
  }
  .journey-step {
    text-align: left;
    padding: 0 0 0 56px;
    position: relative;
  }
  .journey-dot {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
  .journey-step-p {
    margin: 0;
    max-width: none;
  }
}

/* =============================================================
   MEET HELPERS POINTER — homepage editorial moment
   Replaces the previous .preview helper-cards section. A calm,
   single editorial block pointing to browse.html. No inventory
   implied. When real helpers exist, replace this with a real
   .hcard-grid (legacy markup pattern still intact in styles.css).
   ============================================================= */
.meet-pointer {
  padding: 80px 0 80px;
  background: var(--clr-cream);
  border-top: 1px solid var(--clr-border);
}
.meet-pointer-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.meet-pointer .kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.meet-pointer-h {
  margin: 0 auto 14px;
  max-width: 16ch;
  text-wrap: balance;
}
.meet-pointer-sub {
  margin: 0 auto 32px;
  max-width: 46ch;
  color: var(--clr-text-muted, #6B7370);
  font-size: 1.05rem;
  line-height: 1.7;
  text-wrap: pretty;
}
.meet-pointer-cta {
  display: inline-block;
}

@media (max-width: 700px) {
  .meet-pointer {
    padding: 48px 0 56px;
  }
  .meet-pointer-h {
    font-size: 1.85rem;
  }
  .meet-pointer-sub {
    font-size: 0.98rem;
    margin-bottom: 24px;
  }
}

/* =============================================================
   HERO — SINGLE-COLUMN VARIANT (post hero-card removal)
   With the fanned helper card stack removed from the right side
   of the hero, the .hero-grid becomes a centred single column.
   Content stays left-aligned (not centred text) to keep the
   editorial / confident feel, max-width clamps it nicely.
   ============================================================= */
.hero-grid--single {
  grid-template-columns: 1fr !important;
  max-width: 720px;
  margin-left: 0;
}
.hero-grid--single .hero-left {
  max-width: 640px;
}

@media (max-width: 980px) {
  .hero-grid--single {
    max-width: none;
  }
}

/* =============================================================
   HERO PORTRAITS — editorial (no labels, no inventory cues)
   Three friendly portraits on the right side of the hero,
   purposefully unbranded as "available helpers." No names,
   no verification chips, no "available now" pills. They
   anchor the brand emotionally — humans behind the platform.
   Replaces the deleted .hero-vis card-stack at this slot.
   ============================================================= */

.hero-portraits {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 60px;
}

.hero-portrait {
  position: absolute;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  background: var(--clr-white);
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Asymmetric arrangement — one larger, two smaller */
.hero-portrait--a {
  /* Largest, centred */
  width: 220px;
  height: 280px;
  top: 0;
  left: 50%;
  transform: translateX(-58%) rotate(-3deg);
  z-index: 2;
}
.hero-portrait--b {
  /* Right-back, smaller */
  width: 168px;
  height: 220px;
  top: 30px;
  right: 4%;
  transform: rotate(4deg);
  z-index: 1;
}
.hero-portrait--c {
  /* Bottom-front, smaller */
  width: 152px;
  height: 200px;
  bottom: 32px;
  left: 4%;
  transform: rotate(-2deg);
  z-index: 3;
}

.hero-portraits-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--clr-text-muted, #6B7370);
  margin: 0;
  padding: 0 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet — same arrangement, slightly smaller */
@media (max-width: 1100px) {
  .hero-portrait--a { width: 200px; height: 256px; }
  .hero-portrait--b { width: 152px; height: 200px; }
  .hero-portrait--c { width: 138px; height: 180px; }
}

/* Mobile — horizontal scroll row, no labels, no overlap */
@media (max-width: 860px) {
  .hero-portraits {
    position: relative !important;
    min-height: auto;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 0 8px;
    gap: 14px;
  }

  /* The three portraits become a horizontal scroll row */
  .hero-portrait {
    position: relative !important;
    width: 148px !important;
    height: 198px !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex-shrink: 0;
  }

  /* Need a flex container — using a wrapper since we can't add markup */
  /* Place the portraits inside an explicit row via parent flex layout */
  .hero-portraits::before {
    content: "";
    display: none;
  }

  /* On mobile we want the portraits in a row, not stacked vertically — switch parent to row + wrap */
  .hero-portraits {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 16px 0 12px;
  }
  .hero-portraits::-webkit-scrollbar { display: none; }

  .hero-portrait {
    scroll-snap-align: center;
  }

  /* Caption sits BELOW the portraits row on mobile, in normal flow */
  .hero-portraits-cap {
    position: static !important;
    order: 99;
    flex-basis: 100%;
    text-align: center;
    margin: 12px 0 0 !important;
    padding: 0 12px;
    font-size: 0.88rem;
  }
}

@media (max-width: 400px) {
  .hero-portrait {
    width: 138px !important;
    height: 184px !important;
  }
}

/* =============================================================
   REFERRAL BANNER — circle motif (replaces lettered initials)
   The previous lettered avatars (S/R/A) named fictional helpers.
   Replaced with abstract overlapping circles that reinforce the
   "Helper Circle" brand metaphor without naming anyone.
   The legacy .ref-av-initial styles remain in styles.css and
   can be repurposed if real avatars (e.g. founder photos) are
   added later.
   ============================================================= */
.ref-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  margin-right: -10px;
  flex-shrink: 0;
}
.ref-circle:nth-child(2) {
  background: rgba(255, 255, 255, 0.12);
}
.ref-circle:nth-child(3) {
  background: rgba(255, 255, 255, 0.16);
}
.ref-avs .ref-av-ct {
  margin-left: 16px;
}

/* =============================================================
   HERO PORTRAITS — RESTYLE (May 2026)
   Goals:
   - Reduce visual dominance (~30% smaller)
   - Soften saturation so headline keeps focus
   - Partial crops on side portraits (peek past edges) — signals
     "fragment of community" rather than "product photo"
   ============================================================= */
@media (min-width: 861px) {
  .hero-portraits {
    min-height: 290px;
    padding: 32px 0 64px;
  }

  /* Smaller, gentler */
  .hero-portrait {
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  }
  .hero-portrait img {
    /* Soften saturation and contrast a touch so portraits feel less
       "marketplace photoshoot" and more editorial */
    filter: saturate(0.92) brightness(1.02);
  }

  /* Featured (centre) — kept proportionally biggest but smaller overall */
  .hero-portrait--a {
    width: 168px;
    height: 220px;
    top: 12px;
    left: 50%;
    transform: translateX(-55%) rotate(-2deg);
    z-index: 2;
  }

  /* Right portrait — partial crop, extends past the right edge */
  .hero-portrait--b {
    width: 128px;
    height: 170px;
    top: 36px;
    right: -28px;
    transform: rotate(2.5deg);
    z-index: 1;
  }

  /* Left portrait — partial crop, extends past the left edge */
  .hero-portrait--c {
    width: 118px;
    height: 158px;
    bottom: 64px;
    left: -22px;
    transform: rotate(-1.5deg);
    z-index: 3;
  }

  /* Caption smaller too */
  .hero-portraits-cap {
    font-size: 0.88rem;
    max-width: 280px;
    bottom: 8px;
  }
}

@media (min-width: 1100px) {
  /* Add a tiny bit back at very large screens so portraits don't feel lost */
  .hero-portrait--a { width: 188px; height: 244px; }
  .hero-portrait--b { width: 142px; height: 188px; }
  .hero-portrait--c { width: 130px; height: 172px; }
}

/* =============================================================
   PRICING — CONCIERGE REDESIGN (May 2026)
   Replaces SaaS-style pricing card with split-panel editorial:
   1. Header (kicker + H2 + sub)
   2. Two-card grid: Our admin fee | What's included
   3. Below: Separate third-party costs strip
   4. Single soft CTA
   Removes giant "S$499" dominance. Adds explicit third-party
   cost transparency to remove ambiguity.
   ============================================================= */

.pricing-section {
  padding: 80px 0 88px;
  background: var(--clr-white);
  border-top: 1px solid var(--clr-border);
}

.pricing-hdr {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.pricing-hdr .kicker {
  display: inline-block;
  margin-bottom: 18px;
}
.pricing-heading {
  margin: 0 auto 14px;
  max-width: 16ch;
  text-wrap: balance;
}
.pricing-sub {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--clr-text-muted, #6B7370);
  font-size: 1.05rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* Split: Our fee | What's included */
.pricing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto 28px;
}

.pricing-panel {
  background: var(--clr-white);
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-xl, 20px);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
}

.pricing-panel-fee {
  background: var(--clr-cream, #FCF7EE);
  border-color: rgba(44, 138, 110, 0.18);
}

.pricing-panel-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary, #2C8A6E);
  margin-bottom: 20px;
}

/* The fee — present but not dominant */
.pricing-amount-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.pricing-amount {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--clr-text, #2A2926);
}
.pricing-amount-after {
  font-size: 0.92rem;
  color: var(--clr-text-muted, #6B7370);
  font-style: italic;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
}

.pricing-panel-note {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--clr-text-muted, #6B7370);
  margin: 0 0 22px;
}
.pricing-panel-note em {
  font-style: italic;
}

.pricing-panel-list {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(44, 138, 110, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-panel-list li {
  font-size: 0.92rem;
  color: var(--clr-text, #2A2926);
  position: relative;
  padding-left: 16px;
}
.pricing-panel-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--clr-text-muted, #6B7370);
}

/* What's included — checklist */
.pricing-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pricing-includes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.96rem;
  color: var(--clr-text, #2A2926);
  line-height: 1.5;
}
.pricing-includes svg {
  flex-shrink: 0;
  color: var(--clr-primary, #2C8A6E);
  margin-top: 4px;
}

/* Third-party costs — clearly separated */
.pricing-thirdparty {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 32px 28px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-xl, 20px);
}
.pricing-thirdparty-label {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.pricing-thirdparty-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--clr-white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-full, 999px);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted, #6B7370);
}
.pricing-thirdparty-h {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--clr-text, #2A2926);
}
.pricing-thirdparty-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 28px;
}
.pricing-thirdparty-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pricing-tp-name {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--clr-text, #2A2926);
}
.pricing-tp-desc {
  font-size: 0.82rem;
  color: var(--clr-text-muted, #6B7370);
  line-height: 1.4;
}
.pricing-thirdparty-foot {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 0.86rem;
  color: var(--clr-text-muted, #6B7370);
  line-height: 1.55;
}
.pricing-thirdparty-link {
  color: var(--clr-primary, #2C8A6E);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.pricing-thirdparty-link:hover {
  text-decoration: underline;
}

.pricing-cta-wrap {
  text-align: center;
  margin-top: 36px;
}

/* Tablet */
@media (max-width: 900px) {
  .pricing-section {
    padding: 64px 0 72px;
  }
  .pricing-hdr {
    margin-bottom: 40px;
  }
  .pricing-thirdparty-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .pricing-section {
    padding: 48px 0 56px;
  }
  .pricing-hdr {
    margin-bottom: 36px;
    padding: 0 4px;
  }
  .pricing-heading {
    font-size: 1.8rem;
  }
  .pricing-sub {
    font-size: 0.96rem;
  }
  .pricing-split {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 20px;
  }
  .pricing-panel {
    padding: 28px 24px 24px;
  }
  .pricing-amount {
    font-size: 2rem;
  }
  .pricing-thirdparty {
    padding: 24px 22px 22px;
  }
  .pricing-thirdparty-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pricing-cta-wrap {
    margin-top: 28px;
  }
}

/* =============================================================
   HERO FIGURE — single portrait + handwritten note (May 2026)
   Replaces the 3-portrait floating cluster. Composition:
   - One portrait, anchored, with a small "Referral verified" badge
   - A small handwritten-style note overlapping bottom-left
   One human story, told well — not marketplace inventory.
   ============================================================= */

.hero-figure {
  position: relative;
  margin: 0;
  padding: 32px 32px 60px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.figure-portrait {
  position: relative;
  width: 280px;
  height: 360px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.13);
  background: var(--clr-white);
  /* Slight rotation gives editorial life without feeling random */
  transform: rotate(-1.5deg);
}
.figure-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.95);
}

/* Quiet trust badge — top of portrait */
.figure-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--clr-primary, #2C8A6E);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.figure-badge svg {
  flex-shrink: 0;
}

/* Handwritten-style referral note */
.figure-note {
  position: absolute;
  bottom: 14px;
  right: -28px;
  width: 220px;
  padding: 16px 18px 14px;
  background: var(--clr-white, #FFFFFF);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(0, 0, 0, 0.04);
  /* Slight rotation for editorial collage feel (now mirrors to the right) */
  transform: rotate(3deg);
  z-index: 2;
}
.figure-note::before {
  /* Soft warm tint at top to suggest paper texture */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(232, 130, 92, 0.06), transparent);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}
.figure-note-body {
  margin: 0 0 8px;
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--clr-text, #2A2926);
  letter-spacing: 0.005em;
}
.figure-note-by {
  margin: 0;
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-size: 0.92rem;
  color: var(--clr-text-muted, #6B7370);
  letter-spacing: 0.02em;
}

/* Soften hero badge so it doesn't pre-empt the headline */
.hero-badge {
  background: transparent !important;
  border: 1px solid rgba(44, 138, 110, 0.28) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .figure-portrait { width: 248px; height: 320px; }
  .figure-note { width: 200px; }
}

/* Mobile — portrait + note remain a single composed unit (overlapping).
   The previous approach used flex-column which separated them vertically. */
@media (max-width: 860px) {
  .hero-figure {
    padding: 16px 24px 32px;
    /* keep as flex but row-aligned so portrait stays the centrepiece
       and the note's absolute positioning still anchors to it */
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }
  .figure-portrait {
    width: 220px;
    height: 286px;
    transform: rotate(-1.5deg);
  }
  .figure-note {
    /* Hangs off the bottom-right of the portrait, partially outside,
       so it no longer covers her face. */
    position: absolute;
    bottom: -8px;
    right: -12px;
    left: auto;
    width: 180px;
    padding: 14px 16px 12px;
    transform: rotate(3deg);
  }
  .figure-note-body { font-size: 1.05rem; line-height: 1.32; }
  .figure-note-by { font-size: 0.88rem; }
}

@media (max-width: 480px) {
  .hero-figure {
    padding: 12px 18px 28px;
  }
  .figure-portrait {
    width: 200px;
    height: 260px;
  }
  .figure-note {
    width: 168px;
    padding: 12px 14px 10px;
    right: -10px;
    left: auto;
    bottom: -6px;
  }
  .figure-note-body { font-size: 0.98rem; }
  .figure-note-by { font-size: 0.82rem; }
}

/* Very narrow screens (≤360px — older/budget phones) */
@media (max-width: 360px) {
  .figure-portrait {
    width: 184px;
    height: 240px;
  }
  .figure-note {
    width: 150px;
    padding: 10px 12px 9px;
  }
  .figure-note-body { font-size: 0.92rem; }
}

/* =============================================================
   BROWSE PAGE — REFINEMENT PASS (May 2026)
   1. Hero handwritten note (visual anchor)
   2. Onboarding strip → editorial italic line
   3. Preview card — simplified summary + chips
   4. Journey timeline — tightened
   5. Pathway cards — smaller, more proportionate
   ============================================================= */

/* ─── 1. Browse hero with handwritten note ─── */
.browse-hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.browse-hero-text {
  /* keep existing typography from .browse-hl and .browse-sub */
}
.browse-hero-note {
  justify-self: end;
  width: 280px;
  padding: 22px 24px 20px;
  margin: 0;
  background: var(--clr-cream, #FCF7EE);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.04);
  transform: rotate(1.5deg);
  position: relative;
}
.browse-hero-note::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(232, 130, 92, 0.06), transparent);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}
.browse-hero-note-body {
  margin: 0 0 10px;
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--clr-text, #2A2926);
  letter-spacing: 0.005em;
}
.browse-hero-note-by {
  margin: 0;
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-size: 1rem;
  color: var(--clr-text-muted, #6B7370);
}

@media (max-width: 860px) {
  .browse-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .browse-hero-note {
    justify-self: center;
    width: 240px;
    transform: rotate(1.5deg);
  }
}

/* ─── 2. Onboarding strip — editorial italic, not status banner ─── */
.onboarding-strip {
  padding: 24px 0 8px;
  background: transparent;
}
.ob-note {
  margin: 0 auto;
  max-width: 580px;
  text-align: center;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--clr-text-muted, #6B7370);
}
.ob-note em {
  font-style: italic;
}

/* ─── 3. Preview card — quote tighter, chips replace metadata grid ─── */
.preview-summary {
  margin: 0 0 14px;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--clr-text, #2A2926);
}
.preview-quote {
  margin: 0;
  padding: 12px 16px;
  background: var(--clr-cream, #FCF7EE);
  border-left: 2px solid rgba(44, 138, 110, 0.35);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--clr-text, #2A2926);
  font-style: normal;
}
.preview-quote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted, #6B7370);
}

/* Inline chips replace the 2x2 metadata grid */
.preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--clr-border, #E5E1DA);
}
.preview-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--clr-cream, #FCF7EE);
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--clr-text, #2A2926);
  letter-spacing: 0.005em;
}

/* Override stale .preview-section-grid in case any old CSS lingers */
.preview-section-grid {
  display: none !important;
}

/* ─── 4. Journey timeline — tighten vertical, strengthen line ─── */
.journey-section {
  padding: 60px 0 64px;
}
.journey-hdr {
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .journey-section {
    padding: 48px 0 52px;
  }
  .journey-hdr {
    margin-bottom: 36px;
  }
}
@media (max-width: 640px) {
  .journey-section {
    padding: 40px 0 44px;
  }
  .journey-hdr {
    margin-bottom: 28px;
  }
}
/* Slightly stronger connector for editorial intent */
.journey-timeline::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(44, 138, 110, 0.42) 14%,
    rgba(44, 138, 110, 0.42) 86%,
    transparent 100%) !important;
  height: 1.5px !important;
}
@media (max-width: 640px) {
  .journey-timeline::before {
    background: rgba(44, 138, 110, 0.42) !important;
    width: 1.5px !important;
  }
}

/* ─── 5. Pathway cards — tighter, more proportionate ─── */
.pathways-section {
  padding: 60px 0 72px;
}
.pathway-card {
  padding: 26px 26px 24px !important;
}
.pathway-icon {
  width: 38px !important;
  height: 38px !important;
  margin-bottom: 14px !important;
}
.pathway-h {
  font-size: 1.3rem !important;
  margin-bottom: 8px !important;
}
.pathway-p {
  font-size: 0.92rem !important;
  margin-bottom: 18px !important;
  line-height: 1.55 !important;
}
.pathway-btn-full {
  width: 100%;
  padding: 11px 18px !important;
  font-size: 0.96rem !important;
  text-align: center;
  text-decoration: none;
}

/* Ensure pathways grid container doesn't overflow on desktop */
.pathways-grid {
  max-width: 760px !important;
  gap: 16px !important;
}

@media (max-width: 640px) {
  .pathways-section {
    padding: 44px 0 52px;
  }
  .pathway-card {
    padding: 22px 22px 20px !important;
  }
}

/* =============================================================
   MOBILE POLISH PASS (May 2026 — targeted fixes)
   - Pricing-hdr: left-align on mobile
   - Pricing-panel-note: better wrap balance
   - Footer: left-align on mobile
   ============================================================= */

@media (max-width: 768px) {
  /* Pricing section header — left-align on mobile (matches title alignment) */
  .pricing-hdr {
    text-align: left !important;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .pricing-hdr .kicker {
    display: inline-block;
  }
  .pricing-heading {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .pricing-sub {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  /* Pricing-panel-note: encourage balanced 2-line wrap */
  .pricing-panel-note {
    text-wrap: balance;
    max-width: 30ch;
  }

  /* Footer — left-align tagline + nav on mobile */
  .footer-inner {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .footer-heart {
    text-align: left !important;
    max-width: none !important;
  }
  .footer-nav,
  .footer-legal-strip {
    justify-content: flex-start !important;
  }
}

/* =============================================================
   HERO FIGURE — shift slightly left on desktop
   Balances the empty middle gap between hero text and visual,
   without pulling the figure all the way to centre.
   ============================================================= */
/* =============================================================
   HERO FIGURE — shift slightly left on desktop
   Balances the empty middle gap between hero text and visual.
   Important: keep justify-content as default (center) so the
   portrait and note stay grouped together. We move the whole
   figure left via transform, not by changing flex alignment.
   ============================================================= */
@media (min-width: 861px) {
  .hero-figure {
    transform: translateX(-40px);
  }
}

@media (min-width: 1200px) {
  .hero-figure {
    transform: translateX(-56px);
  }
}

/* =============================================================
   PALETTE INJECTION (May 2026)
   - Why-card icons: differentiated by tint to break sage monotone
   - Pricing third-party card: peach tint instead of gray
   ============================================================= */

/* ─── "Why referrals matter" icons — three different tints ─── */
/* Card 1 (feature, "She already knows Singapore") keeps sage default.
   Below: target the supporting cards in document order. */
.why-supporting .why-card-support:nth-child(1) .why-icon {
  background: rgba(232, 130, 92, 0.10);
  color: #C66740;
}
.why-supporting .why-card-support:nth-child(2) .why-icon {
  background: rgba(184, 136, 74, 0.12);
  color: #8A5F2E;
}

/* ─── Pricing third-party costs: peach-tinted card ─── */
.pricing-thirdparty {
  background: rgba(232, 130, 92, 0.05) !important;
  border: 1px dashed rgba(232, 130, 92, 0.28) !important;
}
.pricing-thirdparty-tag {
  background: var(--clr-white) !important;
  border: 1px solid rgba(232, 130, 92, 0.32) !important;
  color: #9B5B3A !important;
}
.pricing-thirdparty-foot {
  border-top: 1px solid rgba(232, 130, 92, 0.18) !important;
}

/* ─── How-it-works icons: colored backgrounds for steps 2 and 3 ─── */
.how-ico--peach {
  background: rgba(232, 130, 92, 0.10) !important;
}
.how-ico--amber {
  background: rgba(184, 136, 74, 0.12) !important;
}

/* =============================================================
   BROWSE PAGE — POLISH PASS (May 2026)
   Targeted refinements:
   - Desktop hero composition (tighter, more anchored)
   - Pathway cards aligned bottom (equal optical weight)
   - Journey timeline tighter on desktop
   ============================================================= */

/* ─── Desktop hero: rebalance for composition ─── */
@media (min-width: 861px) {
  .browse-hero-inner {
    grid-template-columns: 1.2fr 0.9fr;
    gap: 32px;
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 8px;
  }
  .browse-hero-text {
    max-width: 520px;
  }
  /* Subtle editorial rule under the hero text — anchors composition */
  .browse-hero-text::after {
    content: "";
    display: block;
    width: 48px;
    height: 1.5px;
    background: rgba(44, 138, 110, 0.42);
    margin-top: 28px;
  }
  /* Note shifts slightly into the gap so it reads as part of one composition */
  .browse-hero-note {
    justify-self: start;
    width: 300px;
    transform: rotate(1.5deg) translateX(-20px);
  }
}

@media (min-width: 1200px) {
  .browse-hero-inner {
    max-width: 1120px;
  }
  .browse-hero-note {
    transform: rotate(1.5deg) translateX(-32px);
  }
}

/* ─── Pathway cards: equal optical weight, button anchored to bottom ─── */
.pathway-card {
  /* Ensures both cards stretch to the same height in the grid */
  height: 100%;
}
.pathway-btn-full {
  margin-top: auto;
}
/* The body paragraph gets a min-height on desktop so cards with shorter
   copy don't shrink and break visual pairing */
@media (min-width: 641px) {
  .pathway-p {
    min-height: 2.8em;
  }
}

/* ─── Journey timeline tighter on desktop ─── */
@media (min-width: 861px) {
  .journey-timeline {
    max-width: 720px !important;
  }
}

/* =============================================================
   BROWSE — ORPHAN POLISH (May 2026)
   text-wrap: balance redistributes lines so trailing pairs
   don't end up alone on the last line.
   ============================================================= */
.ob-note,
.format-sub,
.pathway-p {
  text-wrap: balance;
}

/* Slightly narrower max-width on the onboarding note so balanced
   wrap produces tighter, more deliberate lines */
@media (max-width: 860px) {
  .ob-note {
    max-width: 480px;
  }
}

/* Mobile-only <br> in hero subtitle (desktop ignores it) */
.sub-break-mobile { display: none; }
@media (max-width: 860px) {
  .sub-break-mobile { display: inline; }
}

/* =============================================================
   BROWSE HERO — refined composition (May 2026)
   The hero now carries three distinct claims stacked vertically:
   - H1 (what)
   - .browse-sub (standard: verification)
   - .browse-hero-meta (rhythm: referral-driven, not sourced)
   - Handwritten note (emotional voice, right side)
   Each carries a different typographic weight to create hierarchy
   rather than redundancy.
   ============================================================= */

.browse-hero-meta {
  margin: 14px 0 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--clr-text-muted, #6B7370);
  font-style: italic;
  text-wrap: balance;
  max-width: 460px;
}

/* The .browse-sub line is the secondary anchor — slightly larger
   than the meta line, normal weight, not italic */
.browse-sub {
  text-wrap: balance;
  max-width: 480px;
}

@media (min-width: 861px) {
  /* Push the editorial sage rule slightly further down so it sits
     under all three text elements as a unifying anchor */
  .browse-hero-text::after {
    margin-top: 32px;
  }
}

@media (max-width: 860px) {
  .browse-hero-meta {
    font-size: 0.88rem;
    margin-top: 12px;
    max-width: none;
  }
}

/* =============================================================
   BROWSE — PATHWAY FORMS (Formspree, May 2026)
   Inline forms inside pathway cards. Each card holds a small form
   with email + submit. Success/error states swap in via JS.
   ============================================================= */

.pathway-form-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  width: 100%;
}
.pathway-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.pathway-field-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--clr-text, #2A2926);
  letter-spacing: 0.01em;
}
.pathway-field-opt {
  font-weight: 400;
  color: var(--clr-text-muted, #6B7370);
  font-size: 0.74rem;
  margin-left: 2px;
}
.pathway-field-hint {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--clr-text-muted, #6B7370);
}
.pathway-form-v2 input[type="email"],
.pathway-form-v2 input[type="text"],
.pathway-form-v2 input[type="tel"],
.pathway-form-v2 textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--clr-text, #2A2926);
  background: var(--clr-white, #FFFFFF);
  border: 1px solid rgba(31, 42, 36, 0.12);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pathway-form-v2 input[type="email"]:focus,
.pathway-form-v2 input[type="text"]:focus,
.pathway-form-v2 input[type="tel"]:focus,
.pathway-form-v2 textarea:focus {
  outline: none;
  border-color: rgba(44, 138, 110, 0.4);
  box-shadow: 0 0 0 3px rgba(44, 138, 110, 0.08);
}
.pathway-form-v2 textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
  font-family: inherit;
}
.pathway-form-v2 ::placeholder {
  color: rgba(31, 42, 36, 0.32);
}
.pathway-form-v2 .pathway-btn-full {
  margin-top: 6px;
}
.pathway-form-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--clr-text-muted, #6B7370);
  text-align: center;
  line-height: 1.5;
}

/* Success state — replaces the form fields inline */
.pathway-success {
  padding: 16px 14px;
  background: rgba(44, 138, 110, 0.08);
  border: 1px solid rgba(44, 138, 110, 0.22);
  border-radius: 10px;
  text-align: center;
}
.pathway-success p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clr-text, #2A2926);
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-style: italic;
  text-wrap: balance;
}

/* Error state — appears above the submit button if request fails */
.pathway-error {
  padding: 12px 14px;
  background: rgba(232, 130, 92, 0.06);
  border: 1px solid rgba(232, 130, 92, 0.28);
  border-radius: 8px;
}
.pathway-error p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #9B5B3A;
}
.pathway-error a {
  color: #9B5B3A;
  text-decoration: underline;
}

/* Disabled-while-submitting state */
.pathway-form-v2 button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =============================================================
   BROWSE PAGE — PALETTE INJECTION (May 2026)
   Matches the homepage's sage → peach → amber progression so
   visitors moving between pages feel the same warmth system.
   ============================================================= */

/* ─── 1. Journey timeline dots: sage / peach / amber ─── */
/* Step 1 keeps sage default. */
.journey-step:nth-child(2) .journey-dot {
  background: rgba(232, 130, 92, 0.10) !important;
  border-color: rgba(232, 130, 92, 0.35) !important;
}
.journey-step:nth-child(2) .journey-dot span {
  color: #C66740 !important;
}
.journey-step:nth-child(3) .journey-dot {
  background: rgba(184, 136, 74, 0.12) !important;
  border-color: rgba(184, 136, 74, 0.38) !important;
}
.journey-step:nth-child(3) .journey-dot span {
  color: #8A5F2E !important;
}

/* ─── 2. Hero editorial rule: peach instead of sage ─── */
@media (min-width: 861px) {
  .browse-hero-text::after {
    background: rgba(232, 130, 92, 0.5) !important;
  }
}

/* ─── 3. Preview quote left border: peach instead of sage ─── */
.preview-quote {
  border-left-color: rgba(232, 130, 92, 0.42) !important;
}

/* =============================================================
   BROWSE PREVIEW SECTION — STRONGER PEACH (May 2026)
   First pass barely moved the needle. Now applying peach across
   four touchpoints to genuinely warm this section.
   ============================================================= */

/* 1. PREVIEW pill (illustrative example) — switch from sage to peach */
.preview-badge {
  background: rgba(232, 130, 92, 0.08) !important;
  border-color: rgba(232, 130, 92, 0.28) !important;
  color: #9B5B3A !important;
}
.preview-badge svg {
  color: #C66740 !important;
  opacity: 0.75 !important;
}

/* 2. Photo placeholder slot — soft peach instead of cream
   (signals "future content waiting", not "missing/cold") */
.preview-photo-slot {
  background: rgba(232, 130, 92, 0.06) !important;
  border-color: rgba(232, 130, 92, 0.30) !important;
  color: #9B5B3A !important;
}
.preview-photo-slot svg {
  color: #C66740 !important;
}

/* 3. Quote left border — thicker + more saturated peach */
.preview-quote {
  border-left: 3px solid rgba(232, 130, 92, 0.55) !important;
  background: rgba(232, 130, 92, 0.04) !important;
}

/* 4. Outer preview-card border — subtle peach tint to unify
   the whole composition under one warm accent */
.preview-card {
  border-color: rgba(232, 130, 92, 0.16) !important;
}

/* =============================================================
   BROWSE PREVIEW — DECISIVE PEACH (May 2026)
   Previous pass was too subtle; pushing values up so peach
   actually registers visually.
   ============================================================= */

/* PILLS at the bottom: cream → peach tint with peach-brown text.
   These occupy a wide horizontal band so they have the most
   visual impact when colored. */
.preview-chip {
  background: rgba(232, 130, 92, 0.10) !important;
  border-color: rgba(232, 130, 92, 0.32) !important;
  color: #9B5B3A !important;
  font-weight: 500;
}

/* PREVIEW pill — push the peach harder so it's clearly peach,
   not subtle warm cream */
.preview-badge {
  background: rgba(232, 130, 92, 0.14) !important;
  border-color: rgba(232, 130, 92, 0.40) !important;
  color: #8B4F2E !important;
}
.preview-badge svg {
  color: #C66740 !important;
  opacity: 0.9 !important;
}

/* PHOTO slot — stronger peach so it visibly reads as warm */
.preview-photo-slot {
  background: rgba(232, 130, 92, 0.10) !important;
  border: 1.5px dashed rgba(232, 130, 92, 0.40) !important;
  color: #9B5B3A !important;
}

/* QUOTE — beefier left border + slightly stronger tint */
.preview-quote {
  border-left: 4px solid rgba(232, 130, 92, 0.65) !important;
  background: rgba(232, 130, 92, 0.06) !important;
}

/* CARD outer border — a touch more visible peach */
.preview-card {
  border-color: rgba(232, 130, 92, 0.22) !important;
}

/* =============================================================
   FOOTER ASIDE — secondary contextual link
   Sits between the main footer-nav and the legal strip.
   Quieter typography signals: "this is a situational link,
   not a primary route".
   ============================================================= */
.footer-aside {
  margin: 14px 0 0;
  font-size: 0.86rem;
  font-style: italic;
  text-align: center;
  color: rgba(252, 247, 238, 0.62);
  line-height: 1.5;
}
.footer-aside a {
  color: rgba(252, 247, 238, 0.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(252, 247, 238, 0.22);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-aside a:hover {
  color: rgba(252, 247, 238, 1);
  border-bottom-color: rgba(252, 247, 238, 0.5);
}

@media (max-width: 768px) {
  .footer-aside {
    text-align: left;
    margin-top: 10px;
  }
}

/* ════════════════════════════════════════════════════════════
   CURRENTLY AVAILABLE REFERRED HELPERS  (home page #helpers)
   Compact cards, rendered from helpers-data.js
   ════════════════════════════════════════════════════════════ */
.avail {
  padding: 72px 0;
  background: var(--clr-cream, #FBF6EE);
}
.avail-hdr {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}
.avail-hdr .kicker { margin-bottom: 14px; }
.avail-sub {
  margin: 12px auto 0;
  color: var(--clr-text-muted, #64696E);
  font-size: 1.02rem;
  line-height: 1.6;
  text-wrap: balance;
}
.avail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.hc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(31,42,36,.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(31,42,36,.10);
  border-color: #D8D2C8;
}
/* Media — square (shorter than before), full face preserved */
.hc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--clr-cream-dk, #F2EADc);
  overflow: hidden;
}
.hc-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
/* Prominent referral badge over the image */
.hc-badge {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.93);
  color: var(--clr-primary, #2C8A6E);
  box-shadow: 0 1px 5px rgba(31,42,36,.16);
}
.hc-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
/* Name + nationality overlay at the foot of the image */
.hc-namebar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 12px;
  background: linear-gradient(to top, rgba(20,28,24,.80), rgba(20,28,24,0));
  color: #fff;
}
.hc-name {
  display: block;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-weight: 500; font-size: 1.42rem; line-height: 1.08;
  letter-spacing: -0.01em;
}
.hc-natline {
  display: block;
  font-size: 0.78rem; color: rgba(255,255,255,.85);
  margin-top: 3px;
}
/* Body — information-first */
.hc-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 16px 18px 18px;
}
.hc-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--clr-primary, #2C8A6E);
  margin: 0 0 14px;
}
.hc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.hc-snap {
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 16px;
  border-top: 1px solid var(--clr-border, #E5E1DA);
  padding-top: 14px;
}
.hc-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 10px; align-items: start;
}
.hc-k {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--clr-text-muted, #64696E);
  padding-top: 2px;
}
.hc-v {
  font-size: 0.86rem; line-height: 1.4;
  color: var(--clr-text-2, #383838);
}
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-chip {
  font-size: 0.74rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: var(--clr-primary-bg, #EAF5EF);
  color: var(--clr-primary, #2C8A6E);
}
.hc-cta {
  margin-top: auto;
  font-size: 0.85rem; font-weight: 600;
  color: var(--clr-primary, #2C8A6E);
}
.hc-card:hover .hc-cta { text-decoration: underline; }

/* Sage → peach → amber cadence */
.hc-card--peach .hc-badge,
.hc-card--peach .hc-status,
.hc-card--peach .hc-cta { color: #C66740; }
.hc-card--peach .hc-chip { background: #FCEDE6; color: #C66740; }
.hc-card--amber .hc-badge,
.hc-card--amber .hc-status,
.hc-card--amber .hc-cta { color: #8A5F2E; }
.hc-card--amber .hc-chip { background: var(--clr-amber-bg, #FDF4E0); color: #8A5F2E; }

.avail-foot {
  text-align: center;
  margin-top: 36px;
}
.avail-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--clr-text-muted, #64696E);
  font-size: 0.95rem;
}
.avail-empty a { color: var(--clr-primary, #2C8A6E); }

/* Swipe tracker dots — injected by helpers-data.js, mobile only */
.avail-dots { display: none; }

@media (max-width: 860px) {
  .avail { padding: 56px 0; }
  .avail-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    max-width: none;
    /* bleed to the screen edges past the .wrap padding */
    margin: 0 calc(-1 * var(--space-7));
    padding: 4px var(--space-7) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--space-7);
    scrollbar-width: none;
  }
  .avail-grid::-webkit-scrollbar { display: none; }
  .hc-card {
    flex: 0 0 84%;
    max-width: 320px;
    scroll-snap-align: start;
  }
  .avail-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .avail-dot {
    width: 7px; height: 7px;
    padding: 0; border: 0;
    border-radius: 50%;
    background: var(--clr-border-warm, #E0D8C9);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .avail-dot.is-active {
    background: var(--clr-primary, #2C8A6E);
    transform: scale(1.3);
  }
}

/* ════════════════════════════════════════════════════════════
   A NOTE FROM THE FOUNDER  (personal, editorial, narrow column)
   ════════════════════════════════════════════════════════════ */
.founder-note {
  padding: 64px 0;
  background: var(--clr-white, #FFFFFF);
}
.founder-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.founder-inner .kicker { margin-bottom: 16px; }
.founder-h { margin: 0 0 24px; }
.founder-body { text-align: left; }
.founder-body p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--clr-text-2, #383838);
  margin: 0 0 14px;
}
.founder-body p:last-child { margin-bottom: 0; }
.founder-sign {
  font-family: 'Caveat', 'Cormorant Garamond', cursive, serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--clr-primary, #2C8A6E);
  text-align: left;
  margin: 32px 0 2px;
}
.founder-role {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted, #64696E);
  text-align: left;
  margin: 0;
}
@media (max-width: 860px) {
  .founder-note { padding: 56px 0; }
  .founder-body p { font-size: 1rem; line-height: 1.78; }
  .founder-sign { font-size: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   WHAT FAMILIES SAY  (single featured testimonial — not a carousel)
   ════════════════════════════════════════════════════════════ */
.families-say {
  padding: 72px 0;
  background: var(--clr-cream, #FBF6EE);
}
.fsay-block {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.fsay-block .kicker { margin-bottom: 14px; }
.fsay-h { margin: 0 0 10px; }
.fsay-sub {
  max-width: 460px;
  margin: 0 auto 36px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clr-text-muted, #64696E);
  text-wrap: balance;
}
.fsay-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-lg, 20px);
  padding: 54px 46px 40px;
  margin: 0;
  box-shadow: 0 1px 2px rgba(31, 42, 36, .04);
}
.fsay-mark {
  position: absolute;
  top: 6px;
  left: 30px;
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--clr-primary, #2C8A6E);
  opacity: 0.16;
  pointer-events: none;
}
.fsay-quote {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--clr-ink, #1F2A24);
  margin: 0 0 22px;
  text-wrap: balance;
}
.fsay-cite {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clr-text-muted, #64696E);
  margin: 0;
}
@media (max-width: 860px) {
  .families-say { padding: 52px 0; }
  .fsay-card { padding: 44px 24px 32px; }
  .fsay-mark { font-size: 4rem; left: 18px; }
  .fsay-quote { font-size: 1.32rem; }
}

/* ════════════════════════════════════════════════════════════
   HERO TRUST ROW — balanced 2-column layout (final override)
   Four items in a single greedy-wrap row left "One transparent fee"
   orphaned on its own line. Lay them out 2 × 2 so both rows are
   even; drop the literal "·" separators (they orphan on wrap).
   Collapses to a single column on small phones. Markup unchanged.
   ════════════════════════════════════════════════════════════ */
.hero-micro-trust {
  display: grid !important;
  grid-template-columns: auto auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px 22px !important;
}
.hero-micro-trust .micro-trust-sep { display: none !important; }
.hero-micro-trust .micro-trust-item { white-space: nowrap; }
@media (max-width: 420px) {
  .hero-micro-trust { grid-template-columns: 1fr !important; gap: 8px 0 !important; }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE SECTION BACKGROUND ALTERNATION (final override)
   Visible order: Hero(cream) · Better for Everyone(white) ·
   How(cream) · Pricing(white) · Available(cream) · Founder(white) ·
   What Families Say(cream) · Referral banner(dark). The "Better for
   Everyone" cards are tinted, so they still stand out on white.
   ════════════════════════════════════════════════════════════ */
.benefits-new { background: var(--clr-white) !important; }
.how { background: var(--clr-cream) !important; }
.avail { background: var(--clr-cream) !important; }
.families-say { background: var(--clr-white) !important; }

/* ════════════════════════════════════════════════════════════
   FOUNDER QUOTE CARD  (primary founder story, in refer banner)
   Brighter, larger editorial serif; the closing belief line is the
   prominent takeaway. Tighter banner height. Label kept, subtle.
   ════════════════════════════════════════════════════════════ */
.ref-banner { padding: 60px 0 !important; }
.ref-card-ttl { color: rgba(255,255,255,.45) !important; }
.ref-card-quote { margin: 0 0 18px; }
.ref-card-quote p {
  font-family: var(--fd, 'Cormorant Garamond'), serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(255,255,255,.90);
  margin: 0 0 14px;
}
.ref-card-belief {
  color: #fff !important;
  font-weight: 500;
  margin-bottom: 0 !important;
}
.ref-card-cite {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.55);
  margin: 14px 0 0;
}
@media (max-width: 860px) {
  .ref-banner { padding: 48px 0 !important; }
  .ref-card-quote p { font-size: 1.08rem; }
}

/* ═══════════════════════════════════════════════════════════
   STORIES FROM FAMILIES   (replaces old .families-say block)
   Scoped social-proof cards. Grid handles 1–3 cards; native
   <details> expansion, no JS. Independent of .hc-card / .avail.
   ═══════════════════════════════════════════════════════════ */
.stories {
  padding: var(--space-18, 72px) 0;
  background: var(--clr-white, #fff);
}
.stories-hdr {
  text-align: center;
  max-width: 580px;
  margin: 0 auto var(--space-10, 40px);
}
.stories-hdr .h2 { margin-bottom: var(--space-3, 12px); }
.stories-sub {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--clr-text-muted, #64696E);
  text-wrap: balance;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6, 24px);
  max-width: 760px;
  margin: 0 auto;
  align-items: start;
}

.story-card {
  background: var(--clr-white, #fff);
  border: 1px solid var(--clr-border-warm, #E4D9CA);
  border-radius: var(--radius-lg, 20px);
  padding: 30px 30px 26px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04));
  display: flex;
  flex-direction: column;
}

/* Category badge */
.story-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full, 9999px);
  margin-bottom: var(--space-4, 16px);
}
.story-badge--referring {
  color: var(--clr-primary, #2C8A6E);
  background: var(--clr-primary-bg, #EAF5EF);
}
.story-badge--hiring {
  color: #9B5B3A;
  background: #FBEDE6;
}

/* Headline quote */
.story-quote {
  font-family: var(--font-display, var(--fd, 'Cormorant Garamond')), serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--clr-text, #1E1E1E);
  text-wrap: balance;
  margin: 0 0 18px;
}

/* Takeaway tags */
.story-tags {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.story-tags li {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm, 0.82rem);
  font-weight: 500;
  color: var(--clr-text-2, #383838);
  background: var(--clr-primary-soft, #F3FAF6);
  border: 1px solid var(--clr-border, #E5E1DA);
  border-radius: var(--radius-full, 9999px);
  padding: 5px 12px 5px 10px;
}
.story-tags li::before {
  content: "";
  width: 13px; height: 13px;
  margin-right: 6px;
  flex-shrink: 0;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M2.5 6.8l2.6 2.6L11 4' stroke='%232C8A6E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Expandable full story */
.story-more {
  margin-top: 18px;
  border-top: 1px solid var(--clr-border-warm, #E4D9CA);
  padding-top: 14px;
}
.story-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--clr-primary, #2C8A6E);
}
.story-more > summary::-webkit-details-marker { display: none; }
.story-more > summary:hover .story-more-label { text-decoration: underline; }
.story-more-chev {
  transition: transform 0.22s ease;
  color: var(--clr-primary, #2C8A6E);
}
.story-more[open] > summary .story-more-chev { transform: rotate(180deg); }

.story-body { margin-top: 14px; }
.story-body p {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--clr-text-muted, #64696E);
  margin: 0 0 12px;
}
.story-body p:last-of-type { margin-bottom: 0; }
.story-by {
  font-family: var(--font-display, var(--fd, 'Cormorant Garamond')), serif;
  font-style: italic;
  font-size: 1.02rem !important;
  color: var(--clr-text-2, #383838) !important;
  margin-top: 4px !important;
}

/* Permission note */
.story-permission {
  margin-top: 18px;
  font-size: var(--text-xs, 0.72rem);
  font-style: italic;
  color: var(--clr-text-faint, #9AA0A6);
}

@media (max-width: 640px) {
  .stories { padding: 52px 0; }
  .story-card { padding: 24px 22px 22px; }
  .story-quote { font-size: 1.32rem; }
}

/* Stories — reviewer identity (authenticity refinement) */
.story-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.story-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary-bg, #EAF5EF);
  color: var(--clr-primary, #2C8A6E);
  font-family: var(--font-display, var(--fd, 'Cormorant Garamond')), serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}
.story-person-id { display: flex; flex-direction: column; gap: 1px; }
.story-person-name {
  font-family: var(--font-display, var(--fd, 'Cormorant Garamond')), serif;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--clr-text, #1E1E1E);
  line-height: 1.15;
}
.story-person-role {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted, #64696E);
}
.story-context {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--clr-text-muted, #64696E);
  margin: 0 0 16px;
}

/* ═══════════════════════════════════════════════════════════
   TRUST SIGNALS  —  badges + "Different ways trust is earned"
   Added for the trust-signal model:
     ⭐ Employer Recommended  = solid sage (primary, strongest)
     🔄 Long-Term Retention   = outlined / muted (clearly secondary)
   No peach/amber here — those stay as accent punctuation only.
   ═══════════════════════════════════════════════════════════ */

/* ---- Reusable signal badge (used on homepage, browse cards, profiles) ---- */
.tsig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.tsig-mark { font-size: 0.82rem; line-height: 1; }

/* Strongest — solid sage */
.tsig--rec {
  background: var(--clr-primary, #2C8A6E);
  color: #fff;
}
/* Secondary — solid blue */
.tsig--ret {
  background: #2E6F95;
  color: #fff;
}

/* ---- Homepage section: Different ways trust is earned ---- */
.trust-ways {
  padding: var(--space-18, 72px) 0;
  background: var(--clr-cream, #FBF6EE);
}
.trust-ways-hdr {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 44px);
}
.trust-ways-sub {
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--clr-text-muted, #64696E);
  margin: 14px auto 0;
  max-width: 540px;
  text-wrap: pretty;
}
.trust-ways-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 20px;
  align-items: stretch;
  max-width: 920px;
  margin: 0 auto;
}
.tw-card {
  border-radius: 18px;
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
}
.tw-card-h {
  font-family: var(--font-display, 'Lora', Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.32rem, 2vw, 1.6rem);
  letter-spacing: -0.008em;
  color: var(--clr-ink, var(--clr-text, #1E1E1E));
  margin: 16px 0 10px;
  text-wrap: balance;
}
.tw-card-p {
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--clr-text-2, #383838);
  margin: 0 0 14px;
}
.tw-card-flag {
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
  margin: auto 0 0;
}

/* Strongest card — faint sage tint, accent bar, lifted */
.tw-card--rec {
  background: var(--clr-primary-soft, #F3FAF6);
  border: 1px solid rgba(44, 138, 110, 0.25);
  box-shadow: 0 10px 30px rgba(27, 94, 72, 0.08);
  position: relative;
}
.tw-card--rec::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: var(--clr-primary, #2C8A6E);
}
.tw-card--rec .tw-card-flag { color: var(--clr-primary-dk, #1B5E48); }

/* Secondary card — muted warm, flat, quieter */
.tw-card--ret {
  background: var(--clr-cream-dk, #F2EADc);
  border: 1px solid rgba(31, 42, 36, 0.08);
}
.tw-card-flag--muted { color: var(--clr-text-muted, #64696E); }

@media (max-width: 720px) {
  .trust-ways-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   PROFILE "TRUST SIGNALS" BLOCK  (profile-*.html)
   Shared so every profile uses one source of truth.
   .psig--rec = Employer Recommended (sage, primary)
   .psig--ret = Long-Term Retention (muted, secondary) — ready
                for when a retention helper exists.
   ═══════════════════════════════════════════════════════════ */
.profile-trust {
  padding: 30px 0 8px;
  background: var(--clr-white, #fff);
}
.psig {
  border-radius: 16px;
  padding: 20px 22px;
  margin-top: 4px;
}
.psig--rec {
  background: var(--clr-primary-soft, #F3FAF6);
  border: 1px solid rgba(44, 138, 110, 0.25);
  border-left: 3px solid var(--clr-primary, #2C8A6E);
}
.psig--ret {
  background: var(--clr-cream-dk, #F2EADc);
  border: 1px solid rgba(31, 42, 36, 0.10);
  border-left: 3px solid rgba(44, 138, 110, 0.45);
}
.psig-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.psig-list li {
  position: relative;
  padding-left: 22px;
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--clr-text-2, #383838);
}
.psig-list li:last-child { margin-bottom: 0; }
.psig-list li em { font-style: italic; color: var(--clr-text-muted, #64696E); }
.psig-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-primary, #2C8A6E);
}
.psig--ret .psig-list li::before { background: rgba(44, 138, 110, 0.55); }
.psig-note {
  margin: 13px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--clr-primary-dk, #1B5E48);
}
.psig-note--muted { color: var(--clr-text-muted, #64696E); }

/* ═══════════════════════════════════════════════════════════
   UNIFIED CARD TRUST BADGE  (rendered by helpers-data.js)
   Badge colour no longer cycles with the card accent — it now
   encodes the trust signal:
     .hc-badge--rec = ⭐ Employer Recommended  → solid sage (uniform)
     .hc-badge--ret = 🔄 Long-Term Retention   → outlined, muted
   Card-body accent (status / cta / chips) keeps its sage→peach→amber
   cadence; only the trust badge is unified. Appended last + scoped
   to .hc-card so it wins over .hc-card--peach/amber .hc-badge.
   ═══════════════════════════════════════════════════════════ */
.hc-card .hc-badge--rec {
  background: var(--clr-primary, #2C8A6E);
  color: #fff;
  box-shadow: 0 1px 6px rgba(31, 42, 36, 0.22);
}
.hc-card .hc-badge--ret {
  background: rgba(255, 255, 255, 0.94);
  color: var(--clr-primary-dk, #1B5E48);
  border: 1px solid rgba(44, 138, 110, 0.5);
}
.hc-card .hc-badge--rec::before,
.hc-card .hc-badge--ret::before { display: none; }

/* Trust badge on browse feature cards (sits at the top of the meta column) */
.preview-sig { margin: 0 0 10px; }

/* ═══════════════════════════════════════════════════════════
   MARKETPLACE BROWSE  —  compact cards, grid, filters
   Trust signal by colour:  🟢 referred = sage · 🔵 verified = blue
   ═══════════════════════════════════════════════════════════ */

/* Home-page photo badge variants (colour = signal) */
.hc-card .hc-badge--ref { background: var(--clr-primary, #2C8A6E); color: #fff; box-shadow: 0 1px 6px rgba(31,42,36,.22); }
.hc-card .hc-badge--ver { background: #2E6F95; color: #fff; box-shadow: 0 1px 6px rgba(31,42,36,.22); }
.hc-card .hc-badge--ref::before, .hc-card .hc-badge--ver::before { display: none; }

/* Grid — 2-column desktop marketplace of horizontal listing cards */
.mcard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; align-items: stretch;
}
.mcard-wrap { min-width: 0; }

/* Card — horizontal listing: photo left, details right */
.mcard {
  display: flex; flex-direction: row; height: 100%;
  background: var(--clr-white, #fff);
  border: 1px solid var(--clr-border-warm, #E8DFD0);
  border-left-width: 4px;
  border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease;
}
.mcard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31,42,36,.10); }
/* Distinct treatment by trust tier (left accent rail) */
.mcard--ref { border-left-color: var(--clr-primary, #2C8A6E); }
.mcard--ver { border-left-color: #2E6F95; }

/* Photo panel */
.mcard-media { position: relative; flex: 0 0 168px; align-self: stretch; min-height: 172px; background: var(--clr-cream, #FBF6EE); }
.mcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.mcard-placed {
  position: absolute; top: 8px; left: 8px;
  background: rgba(31,42,36,.74); color: #fff;
  font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
}

/* Details */
.mcard-body { display: flex; flex-direction: column; gap: 7px; padding: 13px 15px; flex: 1; min-width: 0; }
.mcard-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-size: .63rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.mcard-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.mcard-badge--ref { background: var(--clr-primary, #2C8A6E); color: #fff; }
.mcard-badge--ver { background: #2E6F95; color: #fff; }

.mcard-head { display: block; }
.mcard-name { font-family: var(--fd, 'Cormorant Garamond', serif); font-weight: 500; font-size: 1.28rem; line-height: 1.1; margin: 0; color: var(--clr-text, #1E1E1E); }
.mcard-init { color: var(--clr-text-muted, #64696E); }
.mcard-sub { font-size: .8rem; color: var(--clr-text-muted, #64696E); margin: 2px 0 0; }
.mcard-trust { font-size: .78rem; font-weight: 600; margin: 0; color: #1F4E6B; }
.mcard-skills { list-style: none; margin: 1px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mcard-skills li { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--clr-text-2, #383838); }
.mcard-skills svg { color: var(--clr-primary, #2C8A6E); flex: 0 0 auto; }
.mcard-summary {
  font-size: .85rem; line-height: 1.45; color: var(--clr-text-muted, #64696E); margin: 1px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mcard-foot {
  margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--clr-border-warm, #E8DFD0);
}
.mcard-salary { font-size: .84rem; font-weight: 600; color: var(--clr-text, #1E1E1E); }
.mcard-salary-x { font-weight: 500; font-size: .76rem; color: var(--clr-text-muted, #64696E); }
.mcard-cta { font-size: .82rem; font-weight: 600; color: var(--clr-primary, #2C8A6E); white-space: nowrap; }
.mcard--ver .mcard-cta { color: #2E6F95; }
.mcard:hover .mcard-cta { text-decoration: underline; }

/* List view = single wide column */
.mcard-grid.is-list { grid-template-columns: 1fr; }
.mcard-grid.is-list .mcard-media { flex-basis: 220px; }

/* Filter bar */
.browse-filters { margin: 0 0 22px; }
.bf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.bf-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--clr-text-muted, #64696E); min-width: 92px; white-space: nowrap; flex: 0 0 auto; }
.bf-chip {
  font: inherit; font-size: .82rem; cursor: pointer;
  background: var(--clr-white, #fff); color: var(--clr-text-2, #383838);
  border: 1px solid var(--clr-border-warm, #E8DFD0); border-radius: 999px; padding: 6px 13px;
  transition: background .15s, border-color .15s, color .15s;
}
.bf-chip:hover { border-color: rgba(44,138,110,.45); }
.bf-chip.is-on { background: var(--clr-primary, #2C8A6E); border-color: var(--clr-primary, #2C8A6E); color: #fff; }
.bf-chip.is-on.bf-chip--ver { background: #2E6F95; border-color: #2E6F95; }
.bf-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding-top: 6px; }
.bf-count { font-size: .86rem; color: var(--clr-text-muted, #64696E); }
.bf-actions { display: flex; align-items: center; gap: 12px; }
.bf-clear { font: inherit; font-size: .82rem; background: none; border: none; color: var(--clr-primary, #2C8A6E); cursor: pointer; text-decoration: underline; padding: 0; }
.bf-view { display: inline-flex; border: 1px solid var(--clr-border-warm, #E8DFD0); border-radius: 999px; overflow: hidden; }
.bf-view button { font: inherit; font-size: .8rem; background: var(--clr-white,#fff); border: none; padding: 6px 13px; cursor: pointer; color: var(--clr-text-muted,#64696E); }
.bf-view button.is-on { background: var(--clr-primary, #2C8A6E); color: #fff; }
.mcard-empty { grid-column: 1 / -1; text-align: center; color: var(--clr-text-muted, #64696E); padding: 28px 0; font-size: .95rem; }

@media (max-width: 900px) {
  .mcard-grid, .mcard-grid.is-list { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .mcard-media { flex-basis: 116px; min-height: 0; }
  .mcard-name { font-size: 1.16rem; }
  .bf-view { display: none; }
  .bf-group-label { width: 100%; min-width: 0; }
}

/* ── Profile pages: reserve space for the fixed 68px site-header ──
   Previously the fixed header overlapped the top of the hero (and clipped
   draft banners). One global offset fixes every profile page at once. */
body.profile-page { padding-top: 68px; }

/* Card trust badges: match the "how trust is built" tsig badge (title case, not uppercase) */
.hc-card .hc-badge--ref, .hc-card .hc-badge--ver,
.mcard-badge--ref, .mcard-badge--ver { text-transform: none; letter-spacing: .01em; }


/* ─────────────────────────────────────────────────────────────
   Recently-joined ("placed") row → swipe carousel ON MOBILE ONLY,
   mirroring the home-page .avail-grid behaviour (normal row on
   desktop, horizontal swipe + dots on narrow screens).
   Scoped to #success-row so the available grid is untouched.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #success-row {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    margin: 0 calc(-1 * var(--space-7));
    padding: 4px var(--space-7) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: var(--space-7);
    scrollbar-width: none;
  }
  #success-row::-webkit-scrollbar { display: none; }
  #success-row .mcard-wrap {
    flex: 0 0 86%;
    max-width: 360px;
    scroll-snap-align: start;
  }
  #success-row .mcard { height: 100%; }

  #success-row + .avail-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  #success-row + .avail-dots .avail-dot {
    width: 7px; height: 7px; padding: 0;
    border: none; border-radius: 50%;
    background: var(--clr-border, #D8D2C8);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  #success-row + .avail-dots .avail-dot.is-active {
    background: var(--clr-primary, #2C8A6E);
    transform: scale(1.25);
  }
}
/* Desktop: no dots (row is a normal grid, nothing to swipe) */
@media (min-width: 761px) {
  #success-row + .avail-dots { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   COMPLETED CONTRACT — third trust signal (added)
   Outlined white pill, sage border, ✅ check. Deliberately a step
   below the two solid pills (Employer Recommended / Long-Term Family
   Retention): credible and positive, but clearly the lower-emphasis
   signal. Shown only on helpers with no referrer.
   ═══════════════════════════════════════════════════════════ */
/* Third signal reads terracotta, not sage or blue, so it is distinct from both
   solid pills at a glance. Outline (not fill) keeps it below them in emphasis.
   --cc-line = border/rule, --cc-ink = text (darkened for AA contrast on white). */
:root { --cc-line:#C66740; --cc-ink:#9C4A22; }

.hc-card .hc-badge--cc { background:#fff; color:var(--cc-ink,#9C4A22); border:1.5px solid var(--cc-line,#C66740); box-shadow:0 1px 6px rgba(31,42,36,.14); }
.hc-card .hc-badge--cc::before { display:none; }

.mcard-badge--cc { background:#C66740; color:#fff; }
.mcard-badge--assess { background:#8A7440; color:#fff; }
.mcard-badge--neutral { background:#8C8C86; color:#fff; }
.mcard-badge--ref, .mcard-badge--ver, .mcard-badge--cc, .mcard-badge--assess, .mcard-badge--neutral { text-transform:none; letter-spacing:.01em; }
.mcard--cc { border-left-color:var(--cc-line,#C66740); }
.mcard--cc .mcard-cta { color:var(--cc-ink,#9C4A22); }
.mcard--assess { border-left-color:#8A7440; }
.mcard--assess .mcard-cta { color:#8A7440; }

.tsig--cc { background:#C66740; color:#fff; }
.tsig--assess { background:#8A7440; color:#fff; }

.bf-chip.is-on.bf-chip--cc { background:#C66740; color:#fff; border-color:#C66740; }
.bf-chip.is-on.bf-chip--assess { background:#8A7440; color:#fff; border-color:#8A7440; }

/* Fix (pre-existing): the retention badge on profile pages referenced
   .tsig--verified / .tsig--ver, but only .tsig--ret was ever styled — so
   it rendered unstyled. Alias all three to the solid blue so every
   Long-Term Employment badge renders consistently. */
.tsig--ver, .tsig--verified { background:#2E6F95; color:#fff; }

/* Solid trust pills must always render white text, even where a profile's own
   inline <style> block sets only the background (the pattern in the verified
   profiles). Specificity here beats a bare .tsig--verified inline rule.
   All four trust pills now render solid with white text to match the
   home-page and browse badge set. */
.tsig.tsig--rec, .tsig.tsig--ret, .tsig.tsig--ver, .tsig.tsig--verified, .tsig.tsig--cc, .tsig.tsig--assess { color: #fff; }

/* ═══════════════════════════════════════════════════════════
   FOUR-SIGNAL TRUST BADGES (home-page photo pills)
   Appended last so it wins over the legacy .hc-badge / --rec / --ret
   rules. homeBadge() in helpers-data.js emits hc-badge--ref / --ver /
   --cc / --assess. Colour encodes the signal; matches the browse cards.
     ref    Employer Recommended   → sage
     ver    Long-Term Employment   → blue
     cc     Completed Contracts    → terracotta
     assess Helper Circle Assessed → muted gold/sand
     neutral (unrecognised signal) → grey fail-safe
   ═══════════════════════════════════════════════════════════ */
.hc-badge--ref,    .hc-card .hc-badge--ref    { background:#2C8A6E; color:#fff; }
.hc-badge--ver,    .hc-card .hc-badge--ver    { background:#2E6F95; color:#fff; }
.hc-badge--cc,     .hc-card .hc-badge--cc     { background:#C66740; color:#fff; }
.hc-badge--assess, .hc-card .hc-badge--assess { background:#8A7440; color:#fff; }
.hc-badge--neutral,.hc-card .hc-badge--neutral{ background:#8C8C86; color:#fff; }
.hc-badge--ref::before, .hc-badge--ver::before, .hc-badge--cc::before,
.hc-badge--assess::before, .hc-badge--neutral::before { display:none; }


/* ═══════════════════════════════════════════════════════════════
   COMPLETED CONTRACTS — third trust signal
   APPEND to the END of styles.css. Do not replace the file.

   Colour is --terra (#C66740), NOT a new colour: index.html already
   styles `main.v19 .badge-done { background: var(--terra) }`, so the
   homepage pill is done. These rules bring the browse cards and the
   profile "Trust signals" block into line with that choice.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --clr-done: #C66740;      /* terra — matches index.html's badge-done */
  --clr-done-dk: #A9512E;
}

/* ── Browse / marketplace card badge ── */
.mcard-badge--done {
  background: var(--clr-done);
  color: #fff;
  border-color: var(--clr-done);
}

/* ── Card hover accent, matching .mcard--ref / .mcard--ver ── */
.mcard--done:hover,
.mcard--done:focus-visible {
  border-color: var(--clr-done);
}

/* ── Homepage pill, only for the pre-V19 .hc-badge markup.
      V19's index.html uses .badge-done and already has this. ── */
.hc-badge--done {
  background: var(--clr-done);
  color: #fff;
  border-color: var(--clr-done);
}

/* ── Profile page "Trust signals" block ──
   profile-elsie.html carries these inline too, so that page renders
   correctly even before this file is merged. Future Completed
   Contracts profiles can drop the inline copy once this is in. ── */
.psig--done {
  border-left: 3px solid var(--clr-done);
  padding-left: 18px;
}
.tsig--done {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--clr-done);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.tsig--done .tsig-mark { font-size: .95rem; line-height: 1; }