/* ============================================================
   AI Service Brand landing pages — movewell / mindwell / fuelwell
   / livewell (+ the ai-health-services hub). Shared across all 5
   pages; loaded after main.v3.css.

   ── The accent-override trick ──────────────────────────────
   Every existing component (.btn, .card, .steps-row, .faq-*,
   .pricing-card) already keys its color off the --teal / --teal-*
   custom properties defined on :root in main.v3.css. Rather than
   re-implement buttons/cards/steps for four brands, each page
   wraps its content (everything EXCEPT #nav-placeholder, which
   must stay the site's own teal) in one of the .svc-page--<brand>
   scopes below, which locally redeclare those custom properties.
   The One Accent Rule (DESIGN.md) still holds everywhere else on
   the site — this is a deliberate, page-scoped, spec-approved
   override (vesey-ai-brand-landing-spec.md §1/§8), not a site-wide
   change.

   FuelWell is the one case where the literal spec hex (#c98a3e)
   fails 4.5:1 with white button text (~2.9:1) — --teal below is a
   darkened, contrast-safe "action" shade instead; --teal-mid
   carries the true spec amber for decorative use (card-top bar,
   brand dot) where it's judged as a 3:1 graphical object, not text.
   ============================================================ */

.svc-page{ --accent-rgb: 13,122,110; }

.svc-page--movewell{
  --teal:#0d7a6e; --teal-dark:#0b6860; --teal-mid:#0f8f80;
  --teal-pale:#e8f7f5; --teal-xpale:#f0fbf9; --teal-rgb:13,122,110;
}
.svc-page--mindwell{
  --teal:#4a6fa5; --teal-dark:#3a5883; --teal-mid:#6a8cc0;
  --teal-pale:#eaf0f8; --teal-xpale:#f4f7fb; --teal-rgb:74,111,165;
}
.svc-page--fuelwell{
  --teal:#96631f; --teal-dark:#7c521a; --teal-mid:#c98a3e;
  --teal-pale:#f8ecd8; --teal-xpale:#fdf7ee; --teal-rgb:150,99,31;
}
.svc-page--livewell{
  --teal:#7a5c9e; --teal-dark:#61497d; --teal-mid:#9478b8;
  --teal-pale:#f1eaf7; --teal-xpale:#f8f5fb; --teal-rgb:122,92,158;
}

/* Re-scope the few hardcoded rgba(13,122,110,…) spots main.v3.css
   uses (button hover glow, hover border) so the takeover is total. */
.svc-page .btn--primary:hover{box-shadow:0 4px 14px rgba(var(--teal-rgb),.35)}
.svc-page a.card:hover{border-color:rgba(var(--teal-rgb),.2)}
.svc-page .card--teal{border-color:rgba(var(--teal-rgb),.2)}

/* ── Hero ─────────────────────────────────────────────────── */
.svc-hero{
  background:linear-gradient(155deg,var(--navy) 0%,#0d1b30 60%,var(--navy) 100%);
  color:#fff;padding:4.5rem 1.5rem 4rem;text-align:center;
  position:relative;overflow:hidden
}
.svc-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 75% at 50% 115%,rgba(var(--teal-rgb),.28) 0%,transparent 65%),
    radial-gradient(ellipse 55% 55% at 88% 8%,rgba(var(--teal-rgb),.16) 0%,transparent 60%)
}
.svc-hero>*{position:relative;z-index:1}
.svc-mark{
  width:64px;height:64px;margin:0 auto 1.5rem;color:var(--teal-mid);
  filter:drop-shadow(0 2px 10px rgba(var(--teal-rgb),.35))
}
.svc-hero .eyebrow{
  color:rgba(255,255,255,.62);display:flex;align-items:center;
  justify-content:center;gap:.5rem;margin-bottom:1.1rem
}
.svc-hero .eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--teal-mid)
}
.svc-hero h1{
  color:#fff;max-width:760px;margin:0 auto .95rem;
  font-size:clamp(2.1rem,4.6vw,3.3rem);letter-spacing:-.02em
}
.svc-hero__tagline{
  color:rgba(255,255,255,.72);max-width:620px;margin:0 auto 2rem;
  font-size:1.08rem;line-height:1.72
}
.svc-hero__ctas{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:2.5rem;width:100%}
.svc-hero__meta{
  display:flex;gap:0;flex-wrap:wrap;justify-content:center;
  border-top:1px solid rgba(255,255,255,.12);padding-top:2rem;max-width:640px;margin:0 auto
}
.svc-hero__meta-item{padding:.5rem 1.6rem;border-right:1px solid rgba(255,255,255,.12);text-align:center}
.svc-hero__meta-item:last-child{border-right:none}
.svc-hero__meta-val{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:#fff;display:block;line-height:1.2}
.svc-hero__meta-lbl{font-size:.72rem;color:rgba(255,255,255,.55);margin-top:.2rem;display:block;letter-spacing:.03em}

/* ── Governance disclosure (spec §0 — appears near hero + footer) ── */
.svc-governance{
  background:var(--cream);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:1.15rem 1.5rem
}
.svc-governance__inner{
  max-width:820px;margin:0 auto;display:flex;gap:.85rem;align-items:flex-start;
  font-size:.83rem;line-height:1.65;color:var(--muted)
}
.svc-governance__inner svg{flex-shrink:0;color:var(--teal);margin-top:.2rem}
.svc-governance strong{color:var(--navy)}
.svc-governance a{color:var(--teal);font-weight:600;text-decoration:underline}
.svc-governance--footer{background:var(--navy);border-color:rgba(255,255,255,.1)}
.svc-governance--footer .svc-governance__inner{color:rgba(255,255,255,.68)}
.svc-governance--footer strong{color:#fff}
.svc-governance--footer a{color:var(--teal-mid)}
.svc-governance--footer svg{color:var(--teal-mid)}

/* ── Crisis strip (MindWell; reused as a note in LiveWell's safety) ── */
.svc-crisis{
  background:var(--navy);color:#fff;padding:.85rem 1.5rem;
  border-top:2px solid var(--teal-mid)
}
.svc-crisis__inner{
  max-width:760px;margin:0 auto;display:flex;gap:1.25rem;flex-wrap:wrap;
  align-items:center;justify-content:center;text-align:center;font-size:.87rem
}
.svc-crisis strong{color:#fff}
.svc-crisis a{color:var(--teal-mid);font-weight:700;text-decoration:none}
.svc-crisis a:hover{text-decoration:underline}

/* ── Safety section (elevated — the brief's highest-weight section) ── */
.svc-safety{background:var(--teal-xpale);padding:5.5rem 1.5rem}
.svc-safety__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem}
@media(max-width:760px){.svc-safety__grid{grid-template-columns:1fr}}
.svc-safety__col{
  background:#fff;border-radius:var(--radius-lg);padding:1.75rem;
  border:1px solid rgba(var(--teal-rgb),.15)
}
.svc-safety__col h3{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;font-size:1.05rem}
.svc-safety__col h3 svg{flex-shrink:0}
.svc-safety__col--will h3{color:var(--teal-dark)}
.svc-safety__col--will h3 svg{color:var(--teal)}
.svc-safety__col--wont h3{color:var(--muted)}
.svc-safety__col--wont h3 svg{color:var(--muted-light)}
.svc-safety__list{display:flex;flex-direction:column;gap:.65rem}
.svc-safety__list li{
  display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;
  line-height:1.55;color:var(--navy)
}
.svc-safety__list svg{flex-shrink:0;margin-top:2px}
.svc-safety__col--will .svc-safety__list svg{color:var(--teal)}
.svc-safety__col--wont .svc-safety__list svg{color:var(--muted-light)}

/* ── Evidence strip ───────────────────────────────────────── */
.svc-evidence{padding:3.5rem 1.5rem;text-align:center}
.svc-evidence__chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.5rem}
.svc-evidence__chip{
  font-size:.78rem;font-weight:600;color:var(--navy);background:var(--teal-pale);
  border:1px solid rgba(var(--teal-rgb),.2);border-radius:999px;padding:.4rem 1rem
}

/* ── Pricing / bottom CTA band ────────────────────────────── */
.svc-cta{
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);
  padding:3rem 1.5rem;text-align:center
}
.svc-cta__inner{max-width:600px;margin:0 auto}
.svc-cta__eyebrow{color:rgba(255,255,255,.82);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem}
.svc-cta h2{color:#fff;font-size:1.55rem;margin-bottom:.6rem}
.svc-cta p{color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.7;margin-bottom:1.5rem}
.svc-cta .btn--primary{background:#fff;color:var(--teal-dark);border-color:#fff}
.svc-cta .btn--primary:hover{background:rgba(255,255,255,.9);box-shadow:none}

/* ── Waitlist join form (all 4 services are still behind their
   kill-switch — every CTA collects interest here instead of linking to
   /my-health's subscribe/apply flow; see ai-waitlist-join.mjs) ─────── */
/* Deliberately a vertical stack, not an input+button pill row — full-width
   input above a full-width button reads cleaner at the 420px column this
   sits in than a cramped side-by-side row, and holds up at every
   viewport without a breakpoint. */
.svc-waitlist{width:100%;max-width:420px;margin:0 auto}
.svc-waitlist-form{display:block;width:100%}
.svc-waitlist__row{display:flex;flex-direction:column;gap:.6rem;width:100%}
.svc-waitlist__row .btn{width:100%}
.svc-waitlist__input{
  width:100%;padding:.72rem 1rem;border-radius:7px;
  border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);
  color:#fff;font-family:var(--sans);font-size:.95rem
}
.svc-waitlist__input::placeholder{color:rgba(255,255,255,.55)}
.svc-waitlist__input:focus-visible{outline:2px solid var(--teal-mid);outline-offset:1px;border-color:var(--teal-mid)}
.svc-waitlist__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.svc-waitlist .cf-turnstile{margin:.6rem 0 0}
.svc-waitlist__msg{margin-top:.65rem;font-size:.82rem;min-height:1.2em}
.svc-waitlist__msg[data-state="error"]{color:#ffb4b0}
.svc-waitlist__msg[data-state="success"]{color:var(--teal-mid);font-weight:600}
.svc-waitlist__legal{margin-top:.6rem;font-size:.72rem;color:rgba(255,255,255,.5);line-height:1.55}
.svc-waitlist__legal a{color:rgba(255,255,255,.7);text-decoration:underline}
/* Light-surface variant — the bottom CTA band sits on the accent fill,
   not navy, so the field needs a lighter, on-brand treatment. */
.svc-cta .svc-waitlist__input{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)
}
.svc-cta .svc-waitlist__input::placeholder{color:rgba(255,255,255,.75)}
.svc-cta .svc-waitlist__legal{color:rgba(255,255,255,.72)}
.svc-cta .svc-waitlist__legal a{color:#fff}
.svc-cta .svc-waitlist__msg[data-state="error"]{color:#fff3d6}
.svc-cta .svc-waitlist__msg[data-state="success"]{color:#fff}

/* ── Icon marks (inline SVG, hand-drawn, no icon-library reach) ── */
.svc-icon{width:15px;height:15px;flex-shrink:0}

/* ── Hub page (ai-health-services.html) ──────────────────── */
.svc-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.svc-hub-card{
  display:block;text-decoration:none;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:2rem 1.75rem;position:relative;overflow:hidden;
  transition:box-shadow .22s,transform .22s,border-color .22s
}
.svc-hub-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.4,0,.2,1)
}
.svc-hub-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.svc-hub-card:hover::before{transform:scaleX(1)}
.svc-hub-card__mark{width:38px;height:38px;margin-bottom:1.1rem}
.svc-hub-card__name{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--navy);margin-bottom:.35rem}
.svc-hub-card__tag{font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}
.svc-hub-card__arrow{font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem}

.svc-hub-card--movewell::before{background:linear-gradient(90deg,#0d7a6e,#0f8f80)}
.svc-hub-card--movewell .svc-hub-card__mark,.svc-hub-card--movewell .svc-hub-card__arrow{color:#0d7a6e}
.svc-hub-card--mindwell::before{background:linear-gradient(90deg,#4a6fa5,#6a8cc0)}
.svc-hub-card--mindwell .svc-hub-card__mark,.svc-hub-card--mindwell .svc-hub-card__arrow{color:#4a6fa5}
.svc-hub-card--fuelwell::before{background:linear-gradient(90deg,#96631f,#c98a3e)}
.svc-hub-card--fuelwell .svc-hub-card__mark,.svc-hub-card--fuelwell .svc-hub-card__arrow{color:#96631f}
.svc-hub-card--livewell::before{background:linear-gradient(90deg,#7a5c9e,#9478b8)}
.svc-hub-card--livewell .svc-hub-card__mark,.svc-hub-card--livewell .svc-hub-card__arrow{color:#7a5c9e}

/* ── Motion — hero entrance (reuses the homepage's --i stagger idea) ── */
.svc-el{opacity:1;transform:none}
.svc-armed .svc-el{opacity:0;transform:translateY(16px)}
.svc-armed.svc-revealed .svc-el{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms),
             transform .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms)
}
@media (prefers-reduced-motion: reduce){
  .svc-armed .svc-el,.svc-armed.svc-revealed .svc-el{opacity:1!important;transform:none!important;transition:none!important}
}

@media(max-width:640px){
  .svc-hero{padding:3.5rem 1.25rem 3rem}
  .svc-safety{padding:3.5rem 1.25rem}
  .svc-hero__meta-item{padding:.5rem 1rem}
}