/* ============================================================
   A FITTING FAREWELL — Site Design System
   Mood: quiet, warm, dignified, trustworthy, human
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Brand — monochrome + purple leaf (matches client site) */
  --evergreen:      #141414;   /* primary = near-black (buttons, links) */
  --evergreen-700:  #000000;   /* hover black */
  --evergreen-900:  #141414;   /* dark sections = near-black */
  --sage:           #9ca3af;   /* cool gray */
  --sage-tint:      #f2f3f5;   /* very light cool gray */
  --brass:          #8f74c4;   /* PURPLE accent (leaf) */
  --brass-soft:     #efeaf9;   /* soft purple */
  --leaf:           #8f74c4;   /* purple leaf logo */

  /* Neutrals — white dominant, cool grays */
  --bone:           #ffffff;   /* main white background */
  --cream:          #f7f8fa;   /* very light gray alt sections */
  --sand:           #f2f3f5;   /* light gray */
  --card:           #ffffff;
  --ink:            #141414;   /* near-black headings/text */
  --muted:          #6b7280;   /* cool gray body text */
  --line:           #e6e8ec;   /* light gray border */
  --line-soft:      #eef0f2;

  /* Semantic */
  --bg:             var(--bone);
  --fg:             var(--ink);

  /* Type — Inter only (matches live site) */
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Display only — the homepage headline. Everything else stays Inter, so
     this cannot quietly change the look of the rest of the site. */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius — smaller, simpler */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadow (soft, warm) */
  --sh-sm: 0 1px 2px rgba(20,20,20,.04);
  --sh-md: 0 4px 16px rgba(20,20,20,.06);
  --sh-lg: 0 12px 34px rgba(20,20,20,.09);

  /* Layout */
  --container: 1260px;
  --gutter: clamp(24px, 5vw, 56px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* z */
  --z-nav: 50;
  --z-menu: 60;
  --z-top: 90;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brass-soft); color: var(--evergreen-900); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); font-weight: 800; }
h3 { font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-weight: 700; }
h4 { font-size: .98rem; font-weight: 700; }
p  { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--brass);
  display: inline-block;
}
.eyebrow--center::before { display: none; }
.lead { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--muted); line-height: 1.65; }
.accent { color: var(--ink); font-style: normal; }
.serif { font-family: var(--serif); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--evergreen-900); color: #f2f2f2; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: #c4c4c4; }

.section-head { max-width: 680px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 14px 0 16px; }

.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.split--reverse .split__media { order: -1; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: #8f74c4;
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  padding: .8rem 1.4rem;
  border-radius: var(--r-md);
  font-weight: 600; font-size: .95rem;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  box-shadow: var(--sh-sm);
  white-space: nowrap;
}
.btn:hover { background: #7a5cad; box-shadow: var(--sh-md); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--sm { padding: .6rem 1.1rem; font-size: .88rem; }
.btn--block { width: 100%; }
.btn--outline { background: transparent; color: var(--evergreen); border-color: var(--line); box-shadow: none; }
.btn--outline:hover { background: #fff; border-color: var(--sage); box-shadow: var(--sh-sm); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--cream); }
.btn--gold { background: #8f74c4; color: #fff; }
.btn--gold:hover { background: #7a5cad; }
.btn--light { background: #fff; color: var(--evergreen-900); }
.btn--light:hover { background: #ededed; }
.btn--onDark { background: #fff; color: var(--evergreen-900); }
.btn--onDark:hover { background: #f2f2f2; }
.btn--linkArrow { background: transparent; box-shadow: none; color: var(--evergreen); padding-inline: 0; }
.btn--linkArrow:hover { background: transparent; gap: .8rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height: 100%;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--sage-tint); }
.card__icon {
  width: 28px; height: 28px; border-radius: 0;
  display: grid; place-items: center;
  background: none; color: #8f74c4;
  margin-bottom: 14px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .96rem; }
.card--brass .card__icon { background: none; color: var(--ink); }

/* number badge */
.num {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.15rem; font-weight: 700;
  background: var(--ink); color: #fff;
}

/* pills / tags */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--sage-tint); color: var(--evergreen-700);
  font-size: .82rem; font-weight: 600;
}
.tag--brass { background: var(--brass-soft); color: #6b4fa0; }
.tag--outline { background: transparent; border: 1px solid var(--line); color: var(--muted); }

.chiprow { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(245,242,234,.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { border-color: var(--line); box-shadow: var(--sh-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 76px; flex-wrap: nowrap; max-width: 1340px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; flex: none; }
.brand__mark { width: 30px; height: 30px; border-radius: 0; background: transparent; display: grid; place-items: center; color: var(--leaf); flex: none; }
.brand__mark svg { width: 20px; height: 20px; }
.brand small { display: block; font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) { .brand__logo { height: 28px !important; } }
.nav__inner { display: flex; align-items: center; justify-content: flex-start; gap: 20px; height: 72px; flex-wrap: nowrap; max-width: 1340px; }
.nav__links { display: flex; align-items: center; gap: 2px; flex: 1; flex-wrap: nowrap; min-width: 0; }
.nav__links a {
  padding: .45rem .7rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__actions { flex: none; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav__links a:hover { background: var(--cream); color: var(--evergreen); }
.nav__links a.is-active { color: var(--evergreen); font-weight: 600; }
/* Standard header auth cluster — text links + one FH CTA + primary button */
.nav__auth {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.nav__auth-link {
  display: inline-flex;
  align-items: center;
  padding: .45rem .65rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__auth-link:hover { color: var(--evergreen); background: var(--cream); }
.nav__auth-sep {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 2px;
  flex-shrink: 0;
}
.nav__auth-join {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: .42rem .85rem;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #7a5cad;
  background: #f5f2fb;
  border: 1px solid #d8c9f0;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nav__auth-join:hover {
  background: #8f74c4;
  color: #fff;
  border-color: #8f74c4;
}
.mlink.mlink--join {
  background: #f5f2fb;
  color: #7a5cad !important;
  font-weight: 600;
  border-radius: var(--r-sm);
}
.mlink.mlink--join:hover { background: #ede6fb; }
.nav__toggle { display: none; background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 44px; height: 44px; place-items: center; color: var(--ink); }
.nav__toggle svg { width: 22px; height: 22px; }

/* Raised from 1120px when nav links overflow — auth CTAs stay visible */
@media (max-width: 1220px) {
  .nav__links, .nav__actions .nav__plan-btn { display: none; }
  .nav__auth { display: none; }
  .nav__toggle { display: grid; }
}
@media (max-width: 900px) {
  .nav__auth-join { margin-left: 4px; padding: .38rem .65rem; font-size: .75rem; }
  .nav__auth-link { font-size: .8rem; padding: .38rem .5rem; }
}

/* mobile menu */
.mobile {
  position: fixed; inset: 0; z-index: var(--z-menu);
  visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility .25s;
}
.mobile.is-open { visibility: visible; opacity: 1; }
.mobile__scrim { position: absolute; inset: 0; background: rgba(26,53,44,.35); }
.mobile__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(88%, 360px);
  background: var(--bone); box-shadow: var(--sh-lg);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%); transition: transform .3s var(--ease);
  overflow-y: auto;
}
.mobile.is-open .mobile__panel { transform: translateX(0); }
.mobile__panel a.mlink { padding: .85rem .4rem; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.mobile__panel a.mlink:hover { color: var(--evergreen); }
.mobile__close { align-self: flex-end; background: transparent; border: none; color: var(--muted); width: 44px; height: 44px; }
.mobile__actions { margin-top: 18px; display: grid; gap: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(56px, 7vw, 108px) 0 clamp(64px, 8vw, 116px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 55% at 82% 8%, rgba(0,0,0,.03), transparent 62%);
}
.hero__grid { display: grid; grid-template-columns: 13fr 7fr; gap: clamp(32px, 4vw, 56px); align-items: center; max-width: 1340px; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin: 18px 0 20px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; }
.hero__meta span { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--muted); font-weight: 500; }
.hero__meta svg { width: 18px; height: 18px; color: var(--evergreen); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* chat mock */
.chatmock {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: 28px; position: relative;
}
.chatmock__bar { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.chatmock__ava { width: 44px; height: 44px; border-radius: 50%; background: var(--sage-tint); display: grid; place-items: center; color: var(--evergreen); flex: none; overflow: hidden; }
.chatmock__ava svg { width: 22px; height: 22px; }
.chatmock__ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chatmock__who strong { display: block; font-size: .95rem; }
.chatmock__who span { font-size: .78rem; color: var(--sage); display: inline-flex; align-items: center; gap: .35rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); display: inline-block; }
.bubble { max-width: 86%; padding: .8rem 1.15rem; border-radius: 16px; font-size: .95rem; line-height: 1.55; margin-bottom: 12px; }
.bubble--ai { background: var(--cream); color: var(--ink); border-bottom-left-radius: 5px; }
.bubble--me { background: var(--evergreen); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; }
.bubble--me strong { color: #fff; }
.chatmock__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chatmock__chips button { background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .45rem .9rem; font-size: .82rem; color: var(--evergreen-700); font-weight: 500; }
.chatmock__chips button:hover { border-color: var(--sage); background: var(--cream); }

/* animated hero chat demo */
.chatmock__msgs { height: 264px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.chatmock__msgs .bubble { flex: none; }
.bubble.enter { animation: bubbleIn .38s var(--ease) both; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.typing { align-self: flex-start; display: inline-flex; gap: 4px; align-items: center; padding: .75rem 1rem; background: var(--cream); border-radius: 16px; border-bottom-left-radius: 5px; margin-bottom: 12px; animation: bubbleIn .3s var(--ease) both; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); display: inline-block; animation: typedot 1.1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typedot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.chatmock__input { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.chatmock__input input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: .62rem .85rem; font-size: .9rem; background: #fff; color: var(--ink); }
.chatmock__input input::placeholder { color: var(--sage); }
.chatmock__input input:focus { outline: none; border-color: #8f74c4; box-shadow: 0 0 0 3px rgba(143,116,196,.16); }
.chatmock__input button { flex: none; width: 42px; border: none; border-radius: var(--r-md); background: #8f74c4; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease); }
.chatmock__input button:hover { background: #7a5cad; }
.chatmock__input button svg { width: 18px; height: 18px; }

/* chat message with timestamp + double-tick */
.msg { display: flex; margin-bottom: 10px; }
.msg--ai { justify-content: flex-start; }
.msg--user { justify-content: flex-end; }
.msg__col { max-width: 86%; display: flex; flex-direction: column; }
.msg--user .msg__col { align-items: flex-end; }
.msg__bub { padding: .7rem 1rem; border-radius: 14px; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.msg--ai .msg__bub { background: #f2f3f5; border-bottom-left-radius: 5px; }
.msg--user .msg__bub { background: #e7e1d5; border-bottom-right-radius: 5px; }
.msg__meta { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; color: var(--sage); margin-top: 3px; padding: 0 3px; }
.msg__meta svg { width: 15px; height: 15px; color: #53bdeb; }
.msg.enter { animation: bubbleIn .42s var(--ease) both; }

/* floating stat card */
.floatcard {
  position: absolute; background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--sh-md); padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.floatcard b { font-family: var(--serif); font-size: 1.25rem; color: var(--evergreen); }
.floatcard small { display: block; font-size: .72rem; color: var(--muted); }

/* ---------- Steps ---------- */
.step { display: flex; gap: 18px; align-items: flex-start; }
.step__body h3 { margin-bottom: 6px; }
.step__body p { font-size: .96rem; }

/* connected vertical steps */
.steps-line { display: grid; gap: 34px; position: relative; }

/* ---------- Pricing / tiers ---------- */
.tier { display: flex; flex-direction: column; height: 100%; position: relative; }
.tier--feature { border-color: #8f74c4; border-width: 2px; box-shadow: var(--sh-lg); }
.tier__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #7a5cad; color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .9rem; border-radius: var(--r-pill); }
.tier__name { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.tier__price { font-family: var(--serif); font-size: 2.6rem; color: var(--ink); margin: 8px 0 2px; }
.tier__price span { font-family: var(--sans); font-size: .95rem; color: var(--muted); font-weight: 500; }
.tier__desc { font-size: .92rem; margin-bottom: 20px; }
.tier ul { list-style: none; padding: 0; display: grid; gap: 12px; margin: 8px 0 26px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--ink); }
.tier li svg { width: 20px; height: 20px; color: var(--evergreen); flex: none; margin-top: 1px; }
.tier li.off { color: var(--muted); }
.tier li.off svg { color: var(--line); }
.tier .btn { margin-top: auto; }

/* ---------- FAQ accordion ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; background: transparent; border: none; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.faq__q svg { width: 22px; height: 22px; color: var(--evergreen); flex: none; transition: transform .3s var(--ease); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding: 0 4px 24px; font-size: .98rem; }

/* ---------- Marketplace cards ---------- */
.fh-card { display: flex; flex-direction: column; gap: 10px; }
.fh-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fh-card__logo { width: 52px; height: 52px; border-radius: 12px; background: var(--sage-tint); display: grid; place-items: center; color: var(--evergreen); font-family: var(--serif); font-size: 1.2rem; font-weight: 600; flex: none; }
.fh-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--muted); }
.fh-card__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.fh-card__meta svg { width: 15px; height: 15px; color: var(--sage); }
.stars { display: inline-flex; gap: 1px; color: var(--ink); }
.stars svg { width: 15px; height: 15px; }
.verified { display: inline-flex; align-items: center; gap: .3rem; color: var(--evergreen); font-size: .8rem; font-weight: 600; }
.verified svg { width: 16px; height: 16px; }

.searchbar { display: flex; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 8px 8px 20px; box-shadow: var(--sh-md); max-width: 560px; }
.searchbar input { flex: 1; border: none; background: transparent; font-size: 1rem; }
.searchbar input:focus { outline: none; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.input, .textarea, .select {
  width: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .8rem 1rem; font-size: 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(111,147,132,.18); }
.textarea { min-height: 140px; resize: vertical; }

/* ---------- Stat band ---------- */
.stat { text-align: center; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--evergreen); line-height: 1; }
.section--dark .stat b { color: var(--brass-soft); }
.stat span { font-size: .9rem; color: var(--muted); }
.section--dark .stat span { color: #c4c4c4; }

/* ---------- Quote / testimonial ---------- */
.quote { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.4; color: var(--ink); font-weight: 500; }
.quote__by { margin-top: 22px; font-family: var(--sans); font-size: .92rem; color: var(--muted); }
.quote__by strong { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--evergreen-900); color: #fff; border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% 0%, rgba(255,255,255,.12), transparent 70%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfcfcf; max-width: 560px; margin: 14px auto 28px; }
.cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--evergreen-900); color: #c4c4c4; padding: clamp(56px, 7vw, 88px) 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer .brand { color: #fff; }
.footer h5 { color: #fff; font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer a { display: block; color: #c4c4c4; padding: 6px 0; font-size: .93rem; transition: color .2s var(--ease); }
.footer a:hover { color: #fff; }
.footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #8f8f8f; }
.footer__note { max-width: 300px; font-size: .9rem; color: #b5b5b5; margin: 14px 0 20px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }
.maxw-60 { max-width: 640px; } .maxw-70 { max-width: 720px; }
.hr { border: none; border-top: 1px solid var(--line); }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.trust { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); }
.trust svg { width: 18px; height: 18px; color: var(--evergreen); }
.list-check { list-style: none; padding: 0; display: grid; gap: 14px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.list-check li svg { width: 22px; height: 22px; color: var(--evergreen); flex: none; margin-top: 1px; }

/* ══ HOMEPAGE HERO ════════════════════════════════════════════════════
   Two columns: the pitch and the opening questions on the left, Sara and a
   sample of her manner on the right. The headline is the one place the site
   uses a display serif — it carries the whole section, and Inter at that size
   reads as a notice rather than an invitation.
   ═══════════════════════════════════════════════════════════════════════ */

.hero--v2{padding:clamp(34px,6vw,72px) 0 clamp(48px,7vw,86px);background:var(--bone)}

.hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,54px);align-items:start}
@media (max-width:1000px){ .hero2{grid-template-columns:minmax(0,1fr)} }

.hero2__h{
  font-family:var(--display);
  /* Sized so "Click Before You Call." sits on one line from about 1080px
     up, which is how the sentence is meant to land. It wraps below that
     rather than shrinking to illegibility. */
  font-size:clamp(2.4rem,4.1vw,3.5rem);
  line-height:1.06;letter-spacing:-.02em;font-weight:800;
  color:var(--ink);margin:0 0 16px;text-wrap:balance;
}
.hero2__p{
  font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.6;
  color:#4a5568;max-width:46ch;margin:0 0 24px;
}

/* ── The opening questions ─────────────────────────────────────────── */
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--sh-sm)}
.qcard__h{font-size:1.22rem;font-weight:700;letter-spacing:-.015em;margin:0 0 18px;color:var(--ink)}

.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
@media (max-width:560px){ .qgrid{grid-template-columns:1fr} }

.qf label{display:block;font-size:.82rem;font-weight:500;color:#4a5568;margin-bottom:6px}
.qf input,.qf select{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-md);
  /* 44px tall: the smallest a control can be and still be reliably tappable. */
  min-height:44px;padding:10px 12px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.qf select{cursor:pointer;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.qf input::placeholder{color:#9aa1ad}
.qf input:focus,.qf select:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px var(--brass-soft)}
.qf input:focus-visible,.qf select:focus-visible{outline:2px solid var(--brass);outline-offset:1px}

/* ── Veteran ───────────────────────────────────────────────────────── */
.qvet{border:0;padding:0;margin:16px 0 0;min-width:0}
.qvet legend{font-size:.82rem;font-weight:500;color:#4a5568;margin-bottom:6px;padding:0}
.qvet__row{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.qvet__o{margin:0;cursor:pointer}
.qvet__o input{position:absolute;opacity:0;width:0;height:0}
.qvet__o span{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 12px;font-size:.95rem;color:var(--ink);background:#fff;
  transition:background .18s var(--ease),color .18s var(--ease)}
.qvet__o:first-child span{border-right:1px solid var(--line)}
.qvet__o span svg{width:17px;height:17px;color:var(--brass);flex:none}
.qvet__o:hover span{background:var(--brass-soft)}
.qvet__o input:checked + span{background:var(--brass);color:#fff}
.qvet__o input:checked + span svg{color:#fff}
.qvet__o input:focus-visible + span{outline:2px solid var(--brass);outline-offset:-2px}

.qcard__go{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.qcard__go svg{width:18px;height:18px;flex:none}
.qcard__note{font-size:.8rem;line-height:1.5;color:var(--muted);margin:12px 0 0;text-align:center}

/* ── The introduction film ─────────────────────────────────────────── */
.vcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:22px;
  align-items:center;margin-top:22px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:18px;box-shadow:var(--sh-sm)}
@media (max-width:640px){ .vcard{grid-template-columns:1fr} }

.vcard__play{position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:0;padding:0;cursor:pointer;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(140deg,#241f2e,#4a3a63)}
.vcard__play img{width:100%;height:100%;object-fit:cover;display:block}
.vcard__btn{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(20,20,20,.28);
  transition:background .18s var(--ease),box-shadow .18s var(--ease)}
.vcard__btn svg{width:26px;height:26px;color:var(--brass);margin-left:3px}
/* Colour and shadow rather than scale: a growing button nudges the layout. */
.vcard__play:hover .vcard__btn{background:var(--brass);box-shadow:0 8px 26px rgba(143,116,196,.5)}
.vcard__play:hover .vcard__btn svg{color:#fff}
.vcard__play:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.vcard__k{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);margin-bottom:6px}
.vcard__t h3{font-size:1.08rem;margin:0 0 6px;letter-spacing:-.015em}
.vcard__t p{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 10px}
.vcard__m{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}
.vcard__m svg{width:14px;height:14px}

/* The player replaces the poster in place, so nothing below it moves. */
.vcard__frame{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-lg);display:block}

/* ── Sara ──────────────────────────────────────────────────────────── */
/* A soft lavender panel rather than a white card: it separates Sara from the
   form beside her without another hard border on a page that already has
   several. */
.sara{background:#faf8fe;border:1px solid #ece7f7;border-radius:20px;
  padding:clamp(20px,2.4vw,26px);box-shadow:0 6px 26px rgba(90,60,150,.06)}
.sara__top{display:flex;align-items:center;gap:16px;padding-bottom:18px;
  border-bottom:1px solid #e7e1f4}
.sara__ava{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--brass-soft)}
.sara__n{font-size:1.45rem;margin:0;letter-spacing:-.015em}
.sara__r{font-size:.88rem;color:var(--brass);margin:2px 0 0;font-weight:500}

.sara__help{padding:18px 0}
.sara__help h3{font-size:.95rem;margin:0 0 10px;letter-spacing:-.01em}
.sara__help ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sara__help li{position:relative;padding-left:26px;font-size:.88rem;line-height:1.5;color:#4a5568}
/* Drawn, not a character: a tick glyph shifts baseline between platforms. */
.sara__help li::before{content:'';position:absolute;left:2px;top:.34em;width:11px;height:6px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(-45deg)}

.sara__chat{display:flex;flex-direction:column;gap:14px;padding:18px 0 10px;
  border-top:1px solid #e7e1f4;min-height:230px}
.hb{max-width:84%;font-size:.89rem;line-height:1.58;padding:12px 15px;border-radius:15px}
.hb--sara{align-self:flex-start;background:#eeedf2;color:var(--ink);border-bottom-left-radius:5px}
.hb--me{align-self:flex-end;background:#e9e2f8;color:var(--ink);border-bottom-right-radius:5px}
.hb__block{display:flex;flex-direction:column;max-width:88%}
.hb__block--me{align-self:flex-end;align-items:flex-end}
.hb__row{display:flex;gap:9px;align-items:flex-end}
.hb__row--me{flex-direction:row-reverse}
.hb__ava{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:var(--brass-soft)}
/* Read receipts on the visitor's own line, as in the design. Drawn rather
   than a character so they do not shift baseline between platforms. */
.hb__t{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--muted);margin:5px 0 0 37px}
.hb__tick{display:inline-flex;color:#5b9dd9}
.hb__tick svg{width:14px;height:9px}
.hb__t--me{margin:5px 0 0 0;justify-content:flex-end}

.hb--dots{display:inline-flex;gap:4px;align-items:center;padding:13px 14px}
.hb--dots i{width:5px;height:5px;border-radius:50%;background:#a8afbb;display:block;
  animation:hbd 1.3s infinite}
.hb--dots i:nth-child(2){animation-delay:.18s}
.hb--dots i:nth-child(3){animation-delay:.36s}
@keyframes hbd{0%,60%,100%{opacity:.34}30%{opacity:1}}

.sara__in{display:flex;gap:10px;align-items:center;padding-top:16px;
  border-top:1px solid #e7e1f4}
.sara__in input{flex:1;min-width:0;min-height:46px;padding:11px 16px;font-family:inherit;
  font-size:.92rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.sara__in input::placeholder{color:#9aa1ad}
.sara__in input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.sara__in button{width:46px;height:46px;flex:none;border:0;border-radius:13px;cursor:pointer;
  background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .18s var(--ease)}
.sara__in button svg{width:19px;height:19px}
.sara__in button:hover{background:#7a5cad}
.sara__in button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .hb--dots i{animation:none;opacity:.6}
  .qf input,.qf select,.qvet__o span,.vcard__btn,.sara__in input,.sara__in button{transition:none}
}