/* ============================================================
   V5 — ELIGIBILITY CONCIERGE
   A summonable, conversational slide-over layered over the
   static (SEO) body. Uses the V3 palette tokens throughout.
   ============================================================ */

/* ---------- Persistent launcher ---------- */
.cc-launcher {
  position: fixed;
  z-index: 1400;
  bottom: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px 14px 18px;
  background: var(--accent-deep);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(31,42,38,0.22), 0 2px 6px rgba(31,42,38,0.14);
  /* opacity is in the transition because the launcher now comes and goes with
     scroll position — see .cc-parked below. Without it, it pops. */
  transition: background 160ms var(--ease), transform 200ms var(--ease),
              box-shadow 200ms var(--ease), opacity 180ms var(--ease);
}
.cc-launcher:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(31,42,38,0.26); }
.cc-launcher .arrow { transition: transform 180ms var(--ease);}
.cc-launcher:hover .arrow { transform: translateX(3px);}
.cc-launcher-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
.cc-launcher-dot::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  animation: cc-pulse 2.4s var(--ease) infinite;
}
@keyframes cc-pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* hide the launcher while the panel is open */
:root.cc-open .cc-launcher { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* ---------- Parked ----------
   `[DECISION — Jacob, 10 Aug 2026]` The launcher is fixed, so it sits on
   whatever happens to be bottom-right. Three places that mattered: the hero
   paragraph on condition pages, the homepage's own "Check your eligibility"
   button — the same words, twice, overlapping — and the footer's Privacy and
   Refund links at 430.

   So it stands down where the page is already offering the same thing, and
   comes back in between. Nothing is lost at either end: every hero carries its
   own eligibility CTA, and the footer carries an eligibility link. It is only
   ever hidden where a reader already has a way through.

   Set by concierge-v10.js from an IntersectionObserver on the hero and the
   footer. Same treatment as .cc-open above, so the two compose rather than
   fight — whichever reason applies, the launcher is out of the way. */
:root.cc-parked .cc-launcher { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* Compact (icon-only) launcher variant *//* Left dock */
/* ---------- Scrim ---------- */
.cc-scrim {
  position: fixed; inset: 0;
  z-index: 1450;
  background: rgba(20,26,23,0.34);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.cc-scrim.show { opacity: 1; }

/* ---------- Panel ---------- */
.cc-panel {
  position: fixed;
  z-index: 1500;
  top: 0; right: 0;
  height: 100dvh;
  width: min(464px, 100vw);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 64px rgba(31,42,38,0.22);
  transform: translateX(102%);
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.cc-panel.open { transform: translateX(0); }/* ---------- Head ---------- */
.cc-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 18px;
  background: var(--sage-pale);
  border-bottom: 1px solid var(--border-soft);
}
.cc-head-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cc-avatar {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sage-ink);
  color: var(--sage-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cc-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cc-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  color: var(--sage-ink);
  line-height: 1.1;
}
.cc-sub {
  font-size: var(--fs-note);
  letter-spacing: 0.04em;
  color: var(--sage-ink);
  opacity: 0.66;
}
.cc-close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--sage-ink) 22%, transparent);
  background: transparent;
  color: var(--sage-ink);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.cc-close:hover { background: color-mix(in oklab, var(--sage-ink) 12%, transparent); transform: rotate(90deg); }

/* ---------- Progress rail ---------- */
.cc-progress {
  flex-shrink: 0;
  height: 3px;
  background: color-mix(in oklab, var(--sage-pale) 70%, transparent);
}
.cc-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 380ms var(--ease);
}

/* ---------- Body (conversation transcript) ---------- */
.cc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

/* Message bubbles */
.cc-msg {
  max-width: 86%;
  font-size: var(--fs-sm);
  line-height: 1.5;
  border-radius: 14px;
  padding: 13px 16px;
  animation: cc-rise 360ms var(--ease) both;
}
.cc-msg.bot {
  align-self: flex-start;
  background: var(--sage-pale);
  color: var(--sage-ink);
  border-bottom-left-radius: 5px;
}
.cc-msg.bot em { font-style: italic; color: var(--accent-deep); }
.cc-msg.bot strong { font-weight: 600; }
.cc-msg.user {
  align-self: flex-end;
  background: var(--accent-deep);
  color: #fff;
  border-bottom-right-radius: 5px;
  font-weight: 500;
}
@keyframes cc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Typing indicator */
.cc-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 15px 16px;
  background: var(--sage-pale);
  border-radius: 14px;
  border-bottom-left-radius: 5px;
}
.cc-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sage-deep);
  opacity: 0.5;
  animation: cc-blink 1.3s var(--ease) infinite;
}
.cc-typing span:nth-child(2) { animation-delay: 0.18s; }
.cc-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cc-blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 0.9; transform: translateY(-3px); }
}

/* Option choices */
.cc-options {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 2px;
  animation: cc-rise 320ms var(--ease) both;
}
.cc-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-strong);
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease), transform 120ms var(--ease);
}
.cc-opt:hover { border-color: var(--accent-deep); transform: translateX(2px); }
.cc-opt .arrow { color: var(--accent); opacity: 0; transition: opacity 140ms var(--ease);}
.cc-opt:hover .arrow { opacity: 1;}
.cc-opt .sub { display: block; font-size: var(--fs-sm); color: var(--slate-mid); margin-top: 2px; }

/* ---------- Summary card ---------- */
.cc-summary {
  align-self: stretch;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  animation: cc-rise 420ms var(--ease) both;
}
.cc-verdict {
  padding: 22px 22px 20px;
  background: var(--sage-pale);
  border-bottom: 1px solid var(--border-soft);
}
.cc-verdict .lbl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 9px;
}
.cc-verdict h4 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 27px;
  /* 🔴 1.12 clipped the descender on "eligible". [Jacob, 11 Aug 2026]
     Cormorant Garamond has long descenders against a small x-height, so the
     rendered ink of one line is 33px at 27px type while 1.12 gives a 30px line
     box — the tail of the g sat 0.8px below it and the verdict panel's edge cut
     through it. Measured across candidates: 1.12 clips, 1.2 clears by 0.4px,
     1.25 by 0.7px, 1.3 by 1.1px. 1.3 chosen for margin rather than the minimum
     that happens to pass, since the verdict string is content and can change
     length. ⚠️ Do not tighten this back toward the display-heading ratios used
     elsewhere — this is the one place a serif italic descender meets a panel
     edge. */
  line-height: 1.3;
  color: var(--sage-ink);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.cc-verdict h4 em { font-style: italic; }
.cc-verdict p { font-size: var(--fs-sm); line-height: 1.55; color: var(--sage-ink); opacity: 0.86; margin: 0; }

.cc-sec {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
}
.cc-sec:last-of-type { border-bottom: 0; }
.cc-sec .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-mid);
  display: block;
  margin-bottom: 10px;
}
.cc-sec .pathway-target {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 500;
  color: var(--fg-strong);
  line-height: 1.15;
}
.cc-sec .pathway-target em { font-style: italic; color: var(--accent-deep); }
.cc-sec .pathway-desc { font-size: var(--fs-sm); color: var(--fg); margin: 5px 0 0; line-height: 1.5; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cc-chip {
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent-deep);
}

/* mini journey */
.cc-journey { display: flex; flex-direction: column; gap: 0; }
.cc-jstep {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  position: relative;
}
.cc-jstep + .cc-jstep { border-top: 1px dashed var(--border); }
.cc-jstep .jn {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--accent-deep);
  font-weight: 500;
  width: 18px;
}
.cc-jstep .jt { font-size: var(--fs-sm); color: var(--fg-strong); font-weight: 500; }
.cc-jstep .jt small { display: block; font-size: var(--fs-note); color: var(--slate-mid); font-weight: 400; margin-top: 1px; }
.cc-jstep .jd { font-size: var(--fs-note); color: var(--slate-mid); white-space: nowrap; }

/* cost */
.cc-cost { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cc-cost .price {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight:500;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
.cc-cost .tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep);
}
.cc-cost-note { font-size: var(--fs-note); color: var(--fg); line-height: 1.5; margin: 9px 0 0; }
.cc-cost-note strong { color: var(--fg-strong); font-weight: 600; }

/* next-step button inside summary / actions */
.cc-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 20px;
  background: var(--accent-deep);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms var(--ease);
}
.cc-cta:hover { background: var(--accent-deep); }
.cc-cta .arrow { transition: transform 160ms var(--ease);}
.cc-cta:hover .arrow { transform: translateX(3px);}

.cc-restart {
  align-self: center;
  margin: 4px 0 2px;
  background: none; border: 0; padding: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--slate-mid);
  cursor: pointer;
}
.cc-restart:hover { color: var(--fg-strong); }

/* ---------- Capture form (final hand-off) ---------- */
.cc-form {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cc-rise 360ms var(--ease) both;
}
.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.cc-field input {
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-strong);
  transition: border-color 140ms var(--ease);
}
.cc-field input:focus { outline: none; border-color: var(--accent-deep); }
.cc-form .cc-prefill {
  font-size: var(--fs-note);
  color: var(--fg);
  background: var(--sage-pale);
  color: var(--sage-ink);
  padding: 10px 13px;
  border-radius: 9px;
  line-height: 1.5;
}
.cc-form .cc-prefill strong { font-weight: 600; }

/* ---------- Capture: spam gate, notice, consent ----------
   Mirrors forms.css for the three static forms. Kept here rather than
   shared because forms.css is loaded only by index, eligibility and
   contact, while this panel exists on all 36 pages. Every selector is
   scoped under .cc-form so nothing can reach a page's own markup. */

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and that is the whole point of the field. */
.cc-form .cc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cc-form .cc-verify { min-height: 0; }
.cc-form .cc-verify:empty { display: none; }

/* Atkinson Hyperlegible on the consent label, matching forms.css — the form
   typography rule the work order names. ⛔ Never hide this label: since
   10 Aug 2026 it carries the collection notice as well as the consent, and the
   drawer is an intake surface exactly as the three page forms are. */
.cc-form .cc-consent {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 0 8px;
}
/* ⚠️ This carried the same rule and the same comment as forms.css — "a 44px box
   around an 18px control" — and had the same defect: width/height on a checkbox
   sizes the CONTROL, so the drawer drew a 51x51px box. Fixed in forms.css on
   10 Aug; this is the copy that fix missed. `[Jacob, 10 Aug 2026]`
   🔴 The target is the <label>, not the control — it is the whole consent
   sentence, far past 44px in both axes. The control is just a checkbox: 20px,
   aligned to the first line of a 13px/1.55 label. */
.cc-form .cc-consent input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--sage-deep);
  cursor: pointer;
  flex: none;
}
.cc-form .cc-consent label {
  font-family: 'Atkinson Hyperlegible', var(--font-sans);
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--fg);
  cursor: pointer;
}
.cc-form .cc-consent label a {
  color: var(--accent-deep);
  text-underline-offset: 2px;
}
/* Invalid state on the control itself, only once the user has tried. */
.cc-form .cc-consent[data-state='error'] input[type='checkbox'] {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.cc-form .cc-consent-error,
.cc-form .cc-status {
  font-family: 'Atkinson Hyperlegible', var(--font-sans);
  margin: 0;
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--accent-deep);
  border-left: 2px solid var(--accent-deep);
  padding-left: 12px;
}
.cc-form .cc-consent-error:empty,
.cc-form .cc-status:empty { display: none; }

.cc-form .cc-cta[disabled] { opacity: 0.6; cursor: default; }

/* ---------- Foot ---------- */
.cc-foot {
  flex-shrink: 0;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-card);
}
.cc-disclaimer {
  font-size: var(--fs-note);
  line-height: 1.5;
  color: var(--slate-mid);
  margin: 0;
  text-align: center;
}

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .cc-panel { width: 100vw; }
  .cc-launcher { bottom: 16px; right: 16px; }  .cc-msg { max-width: 90%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-launcher-dot::after { animation: none; }
  .cc-panel { transition: none; }
  .cc-msg, .cc-options, .cc-summary, .cc-form { animation: none; }
  .cc-typing span { animation: none; opacity: 0.55; }
}

/* Cost block link + the full-form escape hatch.
   ⛔ .cc-cost .price is now unused — the money figure it styled published
   US$210,000–250,000 on all 36 pages and was removed 6 Aug 2026. The rule
   is CLAUDE.md:56 and handoff:247, "NO FIGURE PUBLISHES ANYWHERE". The
   rule is left in place deliberately: deleting it would make reinstating
   a price a one-line change again. */
.cc-cost-link,
.cc-fulllink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--accent-deep);
  text-decoration: none;
}
.cc-cost-link:hover,
.cc-fulllink:hover { color: var(--accent-deep); }
.cc-fulllink { margin-top: 0; align-self: flex-start; }