/*
 * Quindlee Brand Tokens V2.0 — patient website authority.
 *
 * shared.css still supplies the structural shell used by both patient and staff
 * pages. Patient routes load this file afterwards, so every legacy alias used by
 * the shell is deliberately rebound to the V2 system here. Do not add patient
 * colours to shared.css or page-local styles; extend the semantic roles below.
 */
:root {
  /* Brand palette */
  --color-orange: #FD7C56;
  --color-orange-tint: #FFE7D8;
  --color-orange-deep: #E9633C;
  --color-orange-hover: #FF9070;
  --color-orange-press: #CE5230;
  --color-peach-line: #F6C9AE;
  --color-mint: #54D8A8;
  --color-mint-deep: #1E9E73;
  --color-mint-text: #177A5A;
  --color-mint-tint: #E4F6EE;
  --color-mint-pale: #F2FBF7;
  --color-ink: #1F2421;
  --color-white: #FFFFFF;

  /* Semantic and surface colours */
  --color-success: #54D8A8;
  --color-success-bg: #E4F6EE;
  --color-success-text: #177A5A;
  --color-warning: #EFB01A;
  --color-warning-bg: #FFF8E6;
  --color-warning-text: #906811;
  --color-warning-glyph: #EFB01A;
  --color-error: #E0553A;
  --color-error-bg: #FCEAE3;
  --color-error-text: #B23A24;
  --color-error-glyph: #C13E28;
  --color-info: #3B9EE5;
  --color-info-bg: #EFF8FF;
  --color-info-text: #1D6FB0;
  --color-surface-white: #FFFFFF;
  --color-surface-warm: #FAFAF8;
  --color-surface-mint: #E4F6EE;
  --color-surface-peach: #FFE7D8;
  --color-border: #E2E8E4;
  --color-border-strong: #B0C4BB;
  --color-text-primary: #1F2421;
  --color-text-secondary: #4A5E55;
  --color-text-tertiary: #7A9488;
  --color-text-disabled: #A8BDB6;

  /* Type, spacing, shape and motion */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* V2 site radius scale: five values, with compatibility aliases below. */
  --site-radius-sm: 10px;
  --site-radius-md: 14px;
  --site-radius-lg: 18px;
  --site-radius-xl: 22px;
  --site-radius-pill: 999px;
  --site-radius-row: var(--site-radius-sm);
  --site-radius-card: var(--site-radius-md);
  --site-radius-float: var(--site-radius-lg);
  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(31, 36, 33, .05);
  --shadow-sm: 0 1px 3px rgba(31, 36, 33, .1), 0 1px 2px -1px rgba(31, 36, 33, .1);
  --shadow-md: 0 4px 6px -1px rgba(31, 36, 33, .1), 0 2px 4px -2px rgba(31, 36, 33, .1);
  --shadow-lg: 0 10px 15px -3px rgba(31, 36, 33, .1), 0 4px 6px -4px rgba(31, 36, 33, .1);
  --shadow-raised: 0 1px 4px rgba(31, 36, 33, .07);
  --shadow-card: 0 4px 18px rgba(31, 36, 33, .09);
  --shadow-float: 0 8px 28px rgba(31, 36, 33, .12);
  --shadow-dock: 0 -3px 14px rgba(31, 36, 33, .09);
  --shadow-focus: 0 5px 16px rgba(31, 36, 33, .30);
  --site-shadow-raised: 0 2px 10px rgba(31, 36, 33, .05);
  --site-shadow-card: 0 4px 18px rgba(31, 36, 33, .09);
  --site-shadow-float: 0 8px 30px rgba(31, 36, 33, .14);
  --focus-lift: translateY(-1.5px);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-spring: 300ms cubic-bezier(.34, 1.56, .64, 1);

  /* Website roles */
  --btn-primary-bg: var(--color-orange);
  --btn-primary-text: var(--color-ink);
  --btn-primary-border: var(--color-orange-deep);
  --btn-primary-bg-hover: var(--color-orange-hover);
  --btn-primary-bg-focus: var(--color-orange-deep);
  --btn-primary-bg-active: var(--color-orange-press);
  --btn-tertiary-bg: var(--color-white);
  --btn-tertiary-text: var(--color-ink);
  --btn-tertiary-border: var(--color-orange-deep);
  --btn-tertiary-bg-hover: #FFF7F3;
  --btn-tertiary-bg-focus: #FFF3EC;
  --btn-secondary-bg: var(--color-mint-tint);
  --btn-secondary-text: var(--color-mint-text);
  --btn-secondary-border: var(--color-mint-text);
  --btn-secondary-bg-hover: #CFEDE0;
  --btn-secondary-text-hover: var(--color-ink);
  --btn-secondary-bg-focus: #CFEDE0;
  --btn-secondary-border-focus: #0F5E44;
  --link-color: var(--color-mint-text);
  --link-color-hover: #12654A;
  --input-border: var(--color-border);
  --input-border-focus: var(--color-mint-text);
  --input-bg: var(--color-white);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-tertiary);
  --quinn-bubble-bg: var(--color-orange-tint);
  --quinn-bubble-text: var(--color-ink);
  --user-bubble-bg: var(--color-mint-tint);
  --user-bubble-text: var(--color-ink);
  --listrow-bg: var(--color-mint-pale);
  --listrow-glyph: var(--color-mint-text);
  --listrow-radius: var(--site-radius-sm);
  --row-bg: var(--listrow-bg);
  --row-glyph: var(--listrow-glyph);
  --row-text: var(--color-ink);
  --fit-online-bg: var(--color-orange-tint);
  --fit-online-glyph: var(--color-orange-deep);
  --fit-inperson-bg: var(--color-mint-tint);
  --fit-inperson-glyph: var(--color-mint-text);
  --chip-bg: var(--color-orange-tint);
  --chip-glyph: var(--color-orange-deep);
  --tab-underline: var(--color-orange);
  --search-bg: var(--color-white);
  --search-shadow: 0 3px 14px rgba(31, 36, 33, .10);
  --search-glyph: var(--color-mint-text);
  --search-clear-bg: var(--color-orange-tint);
  --search-clear-glyph: var(--color-orange-deep);
  --faq-toggle-bg: var(--color-orange-tint);
  --faq-toggle-glyph: var(--color-orange-deep);
  --site-ground-white: var(--color-surface-white);
  --site-ground-mint: var(--color-mint-tint);
  --site-ground-peach: var(--color-orange-tint);
  --site-hero-ground: radial-gradient(70% 116% at 78% 4%, #FFE0CC 0%, #FFF2E9 44%, #FFFFFF 86%);
  --closing-ground: var(--color-orange-tint);
  --closing-card-bg: var(--color-surface-white);
  --footer-ground: var(--color-mint-tint);
  --claim-bg: var(--color-orange-tint);
  --claim-glyph: var(--color-orange-deep);
  --aside-border: var(--color-peach-line);
  --on-peach-label: var(--color-ink);
  --on-peach-body: var(--color-text-secondary);
  --carerow-bg: var(--color-surface-white);
  --carerow-border: var(--color-border);
  --carerow-bg-hover: var(--color-orange-tint);
  --carerow-arrow: var(--color-orange);
  --carerow-soon-title: var(--color-text-secondary);
  --carerow-soon-desc: var(--color-text-disabled);
  --soon-pill-bg: var(--color-mint-tint);
  --soon-pill-text: var(--color-mint-text);
  --soon-card-bg: var(--color-mint-tint);
  --site-title-tracking: -.028em;
  --site-section-tracking: -.028em;
  --site-h1: 44px;
  --site-h2: 24px;
  --site-h3: 17px;
  --site-body: 15px;
  --site-small: 14px;
  --site-fine: 13px;
  --site-eyebrow: 12px;
  --site-max: 1180px;
  --site-gutter: 52px;
  --site-measure: 40em;
  --site-section-y: 52px;
  --alert-bg: var(--color-error-bg);
  --alert-ring: var(--color-error);
  --alert-text: var(--color-error-text);
  --alert-glyph: var(--color-error-glyph);
  --caution-bg: var(--color-warning-bg);
  --caution-ring: var(--color-warning);
  --caution-text: var(--color-warning-text);
  --routine-bg: var(--color-mint-tint);
  --routine-ring: var(--color-mint);
  --routine-text: var(--color-mint-text);

  /* Map the current patient component API onto V2.0. */
  --sage: var(--color-mint-text);
  --sage-dark: #12654A;
  --sage-light: var(--color-mint-tint);
  --sage-pale: var(--color-mint-tint);
  --terracotta: var(--color-orange-deep);
  --terracotta-light: var(--color-orange-tint);
  --honey: var(--color-orange-deep);
  --honey-light: var(--color-orange-tint);
  --cream: var(--color-surface-warm);
  --cream-2: var(--color-mint-pale);
  --cream-3: var(--color-border);
  --white: var(--color-white);
  --ink: var(--color-ink);
  --ink-2: var(--color-text-secondary);
  --ink-3: var(--color-text-secondary);
  --ink-4: var(--color-text-tertiary);
  --red: var(--color-error);
  --red-light: var(--color-error-bg);
  --red-dark: var(--color-error-text);
  --amber: var(--color-warning);
  --amber-light: var(--color-warning-bg);
  --amber-dark: var(--color-warning-text);
  --success: var(--color-success);
  --info: var(--color-info);
  --info-light: var(--color-info-bg);
  --warn: var(--color-warning);
  --warn-light: var(--color-warning-bg);
  --danger: var(--color-error);
  --danger-light: var(--color-error-bg);
  --teal: var(--color-mint-text);
  --teal-light: var(--color-mint-tint);
  --sans: var(--font-body);
  --serif: var(--font-display);
  --r: var(--site-radius-md);
  --r-lg: var(--site-radius-lg);
  --r-xl: var(--site-radius-xl);
  --sh: var(--site-shadow-raised);
  --sh-md: var(--site-shadow-card);
  --sh-lg: var(--site-shadow-float);
}

body {
  background: var(--color-surface-white);
  color: var(--color-ink);
  font-family: var(--font-body);
}

h1, h2, h3, h4, .hero-greet, .hero-ask, .section-title, .modal-title {
  display: block;
  font-family: var(--font-display) !important;
}

h1 {
  font-size: var(--site-h1) !important;
  font-weight: 700 !important;
  letter-spacing: var(--site-title-tracking) !important;
  line-height: 1.15 !important;
}

h2 {
  font-size: var(--site-h2) !important;
  font-weight: 700 !important;
  letter-spacing: var(--site-section-tracking) !important;
  line-height: 1.2 !important;
}

h3 { font-size: var(--site-h3); }

.q-dot {
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 0;
  background: transparent;
  color: var(--color-orange);
  line-height: inherit;
  vertical-align: baseline;
}

.q-title-end { white-space: nowrap; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-ink) !important;
  outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}

input,
select,
textarea,
.field-input,
.field-select,
.field-textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

input::placeholder,
textarea::placeholder { color: var(--input-placeholder); }

/* Existing primary actions adopt the V2 orange construction. */
.nav-btn-primary,
.nav-cta-new,
.btn-primary,
.hero-start-cta,
.hero-go,
.sticky-go,
.mdhook-btn,
.mvp-care-btn,
.submit-btn,
.intake-start-btn,
.disp-btn-primary,
.confirm-cta button:not(.cta-secondary),
.ab-cta .btn {
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.nav-btn-primary:hover,
.nav-cta-new:hover,
.btn-primary:hover,
.hero-start-cta:hover,
.hero-go:hover,
.sticky-go:hover,
.mdhook-btn:hover,
.mvp-care-btn:hover,
.submit-btn:hover:not(:disabled),
.intake-start-btn:hover:not(:disabled),
.disp-btn-primary:hover,
.confirm-cta button:not(.cta-secondary):hover,
.ab-cta .btn:hover {
  background: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
}

.nav-btn-primary:focus-visible,
.nav-cta-new:focus-visible,
.btn-primary:focus-visible,
.hero-start-cta:focus-visible,
.hero-go:focus-visible,
.sticky-go:focus-visible,
.mdhook-btn:focus-visible,
.mvp-care-btn:focus-visible,
.submit-btn:focus-visible,
.intake-start-btn:focus-visible,
.disp-btn-primary:focus-visible,
.confirm-cta button:not(.cta-secondary):focus-visible,
.ab-cta .btn:focus-visible {
  background: var(--btn-primary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  transform: var(--focus-lift);
  outline: none !important;
}

.nav-btn-primary:active,
.nav-cta-new:active,
.btn-primary:active,
.hero-start-cta:active,
.hero-go:active,
.sticky-go:active,
.mdhook-btn:active,
.mvp-care-btn:active,
.submit-btn:active,
.intake-start-btn:active,
.disp-btn-primary:active,
.confirm-cta button:not(.cta-secondary):active,
.ab-cta .btn:active {
  background: var(--btn-primary-bg-active) !important;
  transform: none;
}

.nav-btn-primary:disabled,
.nav-cta-new:disabled,
.btn-primary:disabled,
.hero-start-cta:disabled,
.hero-go:disabled,
.sticky-go:disabled,
.mvp-care-btn:disabled,
.submit-btn:disabled,
.intake-start-btn:disabled,
.disp-btn-primary:disabled,
.confirm-cta button:not(.cta-secondary):disabled {
  background: var(--color-surface-warm) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
  color: var(--color-text-disabled) !important;
  cursor: not-allowed;
}

.hero-start-cta svg,
.hero-go svg,
.sticky-go svg,
.mdhook-btn svg,
.mvp-care-btn svg {
  stroke: var(--color-ink) !important;
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action) {
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action):hover:not(:disabled) {
  background: var(--btn-primary-bg-hover) !important;
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action):focus-visible {
  background: var(--btn-primary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
  transform: var(--focus-lift);
}

:is(.oc-confirm, .exp-continue, #send-btn, .rep-addf-add, .resume-primary,
  .thread-send, .home-start-cta, .patient-message-launcher, #session-timeout-action):active {
  background: var(--btn-primary-bg-active) !important;
  transform: none;
}

/* Secondary actions use the complete V2 mint construction. */
.btn-secondary,
.confirm-cta .cta-secondary,
.disp-btn-secondary,
.resume-card .btn-secondary {
  background: var(--btn-secondary-bg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text) !important;
  border-radius: var(--site-radius-md);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.btn-secondary:hover,
.confirm-cta .cta-secondary:hover,
.disp-btn-secondary:hover,
.resume-card .btn-secondary:hover {
  background: var(--btn-secondary-bg-hover) !important;
  border-color: var(--btn-secondary-border) !important;
  color: var(--btn-secondary-text-hover) !important;
}

.btn-secondary:focus-visible,
.confirm-cta .cta-secondary:focus-visible,
.disp-btn-secondary:focus-visible,
.resume-card .btn-secondary:focus-visible {
  background: var(--btn-secondary-bg-focus) !important;
  border-color: var(--btn-secondary-border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  color: var(--btn-secondary-text-hover) !important;
  outline: none !important;
  transform: var(--focus-lift);
}

.btn-secondary:active,
.confirm-cta .cta-secondary:active,
.disp-btn-secondary:active,
.resume-card .btn-secondary:active {
  background: var(--color-mint-tint) !important;
  transform: none;
}

/* White/orange tertiary actions replace the legacy colourless ghost style. */
.btn-ghost {
  background: var(--btn-tertiary-bg) !important;
  border: 1.5px solid var(--btn-tertiary-border) !important;
  color: var(--btn-tertiary-text) !important;
}

.btn-ghost:hover { background: var(--btn-tertiary-bg-hover) !important; }
.btn-ghost:focus-visible {
  background: var(--btn-tertiary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
  transform: var(--focus-lift);
}

/* Clinical escalation actions must never be recoloured as ordinary orange CTAs. */
.disp-emergency .disp-btn-primary,
a.btn-primary[href^='tel:111'] {
  background: var(--color-error) !important;
  border-color: var(--color-error-glyph) !important;
  color: var(--color-white) !important;
}

.disp-inperson .disp-btn-primary {
  background: var(--color-warning) !important;
  border-color: var(--color-warning-text) !important;
  color: var(--color-ink) !important;
}

/* Shared patient shell */
.topnav { height: 64px; border-color: var(--color-border); padding-inline: clamp(16px, 3vw, 30px); }
.nav-logo { min-width: 133px; height: 44px; gap: 0; }
.nav-logo .logo-mark { width: 133px; height: 34px; background: url('quindlee-logo.svg') left center / contain no-repeat; flex: none; }
.nav-logo .logo-mark > *, .nav-logo .logo-text, .nav-logo .logo-stack { display: none !important; }
.nav-drawer-logo { display: block; width: 126px; height: 34px; background: url('quindlee-logo.svg') left center / contain no-repeat; font-size: 0 !important; }
.nav-drawer-logo > * { display: none !important; }
.nav-btn { min-height: 44px; border-radius: var(--site-radius-pill); font-family: var(--font-body); font-weight: 600; }
.nav-hamburger { width: 44px; height: 44px; border-radius: var(--site-radius-card); border-color: var(--color-border); }
.nav-drawer-close, .modal-x { width: 44px; height: 44px; background: var(--color-surface-warm); color: var(--color-text-secondary); }
.ebar { background: var(--color-ink); font-family: var(--font-body); }
.modal { border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.field-input, .field-select, .field-textarea, input, textarea, select { font-family: var(--font-body); }
.wc-cara{background:transparent!important;color:var(--color-orange)!important;box-shadow:none!important}
.hero-badge { background: var(--color-mint-tint) !important; border-color: #C9EBDC !important; color: var(--color-mint-text) !important; }
.hero-dot { background: var(--color-mint-text) !important; }
.trust { background: var(--color-mint-tint) !important; }
.trust-num { color: var(--color-mint-text) !important; font-family: var(--font-display) !important; }
.foot-brand .f-logo, .f-logo { font-family: var(--font-display) !important; font-weight: 600; }
.foot-brand .f-logo span, .f-logo span { color: var(--color-mint-text) !important; }

/* The existing care catalogue keeps its structure and receives V2 roles. */
.mvp-care-hero { background: var(--site-hero-ground) !important; }
.mvp-care-tab[aria-selected='true'] { color: var(--color-ink) !important; }
.mvp-care-tab[aria-selected='true']::after { background: var(--tab-underline) !important; }
.mvp-care-search input { background: var(--search-bg) !important; border-radius: var(--site-radius-pill) !important; box-shadow: var(--search-shadow) !important; }
.mvp-care-search svg { stroke: var(--search-glyph) !important; }
.mvp-care-clear { background: var(--search-clear-bg) !important; color: var(--search-clear-glyph) !important; border-radius: var(--site-radius-pill) !important; }
.mvp-care-icon,
.mvp-care-card:nth-child(3n+2) .mvp-care-icon,
.mvp-care-category__icon,
.mvp-care-quick-link__icon,
.mvp-care-area-link__icon,
.mvp-care-group__icon,
.mvp-service-symbol {
  background: var(--chip-bg) !important;
  color: var(--chip-glyph) !important;
  border-radius: var(--site-radius-row) !important;
}

.mvp-care-fit-card--yes { background: var(--fit-online-bg) !important; border-color: var(--color-peach-line) !important; }
.mvp-care-fit-card--yes .mvp-care-pattern-list li::before { color: var(--fit-online-glyph) !important; }
.mvp-care-fit-card--no { background: var(--fit-inperson-bg) !important; border-color: var(--color-border-strong) !important; }
.mvp-care-fit-card--no h3 { color: var(--color-mint-text) !important; }
.mvp-care-fit-card--no .mvp-care-pattern-list li::before { background: var(--color-white) !important; color: var(--fit-inperson-glyph) !important; }

.mvp-care-pattern-list,
.mvp-care-list,
.mvp-service-symptoms ul,
.mvp-service-guidance__list,
.mvp-service-outcomes__list {
  gap: var(--space-2) !important;
  border: 0 !important;
}

.mvp-care-pattern-list li,
.mvp-care-list li,
.mvp-service-symptoms li,
.mvp-service-guidance__list li,
.mvp-service-outcomes__list li {
  background: var(--row-bg) !important;
  border: 0 !important;
  border-radius: var(--site-radius-row) !important;
  color: var(--row-text) !important;
  margin: 0 !important;
  padding-block: var(--space-3) !important;
  padding-right: var(--space-4) !important;
}

.mvp-care-pattern-list li::before,
.mvp-care-list li::before,
.mvp-service-symptoms li::before,
.mvp-service-outcomes__list li::before { color: var(--row-glyph) !important; }
.mvp-service-guidance__list li { padding-left: var(--space-4) !important; }
.mvp-care-faq__item summary::after { background: var(--faq-toggle-bg) !important; color: var(--faq-toggle-glyph) !important; }

/* Conversation colours stay readable and identify the speaker without dark fills. */
.msg.ai .bubble,
.mdq-message.is-quinn .mdq-bubble {
  background: var(--quinn-bubble-bg) !important;
  border-color: var(--color-peach-line) !important;
  color: var(--quinn-bubble-text) !important;
}

.msg.user .bubble,
.mdq-message.is-user .mdq-bubble,
.thread-msg.you {
  background: var(--user-bubble-bg) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--user-bubble-text) !important;
}

.thread-msg.you .thread-msg-body { color: var(--user-bubble-text) !important; }

.hero-visual .cc-cara,
.how .cc-cara { background: var(--quinn-bubble-bg) !important; border-color: var(--color-peach-line) !important; }
.hero-visual .cc-user,
.how .cc-user { background: var(--user-bubble-bg) !important; color: var(--user-bubble-text) !important; }

/* V2: the hero is the only gradient. Every other ground is flat. */
.hero { background: var(--site-hero-ground) !important; }
.hero::before, .hero::after { display: none !important; }
.hero-greet { letter-spacing: var(--site-title-tracking) !important; }
.section-title { font-weight: 700 !important; letter-spacing: var(--site-section-tracking) !important; }

/* V2 keeps the How-it-works panel on a flat mint ground with white cards.
   Step discs follow the ring/glyph rule (white
   disc, orange ring, deep-orange numeral); the approved pill and seal use
   the success family instead of solid dark green. */
.how { background: var(--color-mint-tint) !important; }
.how::before { display: none !important; }
.how .eyebrow { color: var(--color-mint-text) !important; }
.how .sec-title { color: var(--color-ink) !important; }
.how .sec-sub, .how .demo-note { color: var(--color-text-secondary) !important; }
.how .flow { background: var(--color-white) !important; border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-card) !important; }
.how .flow-h { color: var(--color-ink) !important; }
.how .flow-n { background: var(--color-white) !important; color: var(--color-orange-deep) !important; box-shadow: 0 0 0 2px var(--color-orange) !important; }
@media (min-width: 861px) { .how .flow-step:not(:last-child)::after { border-top-color: var(--color-border-strong) !important; } }
.how .chatcard, .how .card { box-shadow: var(--shadow-card) !important; }
.how .card-stage::before { display: none !important; }
.how .card-pill.is-approved { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; border-color: var(--color-success) !important; }
.how .card-pill.is-approved svg { stroke: var(--color-success-text) !important; }
.how .card-foot .seal { background: var(--color-white) !important; box-shadow: 0 0 0 2px var(--color-success); }
.how .card-foot .seal svg { stroke: var(--color-success-text) !important; }

/* V2 flat-ground reconciliation for page-local legacy components. */
.ab-intro { background: var(--site-ground-mint) !important; }
.ab-vision { background: var(--site-ground-peach) !important; }
.ab-vision .eyebrow { color: var(--on-peach-label) !important; }
.ab-vision blockquote {
  background: var(--color-white) !important;
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow-raised);
  color: var(--color-ink) !important;
  padding: clamp(24px, 4vw, 40px);
}
.home-meddirect,
.mdhook-card { background: var(--color-white) !important; }
.mdhook-card { border-color: var(--color-peach-line) !important; }
.mdhook-card::before { display: none !important; }
.skel-text, .skel-pill, .skel-block {
  animation: none !important;
  background: var(--color-surface-warm) !important;
}

.finalcta { background: var(--closing-ground) !important; }
.finalcta-card { background: var(--closing-card-bg) !important; box-shadow: var(--site-shadow-card); }
.finalcta-card h2, .finalcta-card p { color: var(--color-ink) !important; }
.finalcta-card::before, .finalcta-card::after { display: none !important; }
/* The closing card's action is a primary button — orange fill, ink
   label, deep-orange border — not the old white-on-green pill. */
.finalcta .btn {
  background: var(--btn-primary-bg) !important;
  border: 1.5px solid var(--btn-primary-border) !important;
  color: var(--btn-primary-text) !important;
  border-radius: var(--site-radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.finalcta .btn:hover { background: var(--btn-primary-bg-hover) !important; }
.finalcta .btn:focus-visible {
  background: var(--btn-primary-bg-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  transform: var(--focus-lift);
}
.finalcta .btn:active { background: var(--btn-primary-bg-active) !important; transform: none; }
.finalcta .btn svg { stroke: var(--color-ink) !important; }

.foot {
  background: var(--footer-ground) !important;
  color: var(--color-text-secondary) !important;
  border-top: 1px solid var(--color-border);
}
.foot-brand .foot-brand-logo { content: url('quindlee-logo.svg'); opacity: 1 !important; }
.foot-brand .lg, .foot-col h4 { color: var(--color-ink) !important; }
.foot-brand p, .foot-bot { color: var(--color-text-secondary) !important; }
.foot-col a { color: var(--color-mint-text) !important; }
.foot-col a:hover { color: var(--color-ink) !important; }
.foot-bot { border-top-color: var(--color-border-strong) !important; }

::selection { background: var(--color-orange-tint); color: var(--color-ink); }

@media (max-width: 760px) {
  h1 { font-size: 30px !important; }
  h2 { font-size: 21px !important; }
}

@media (max-width: 560px) {
  .topnav { height: 60px; }
  .nav-logo { min-width: 116px; }
  .nav-logo .logo-mark { width: 116px; height: 30px; }
}

@media (max-width: 420px) {
  .topnav { gap: 8px; padding-inline: 14px; }
  .topnav [data-nav='account'] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-btn-primary:focus-visible,
  .nav-cta-new:focus-visible,
  .btn-primary:focus-visible,
  .hero-start-cta:focus-visible,
  .hero-go:focus-visible,
  .sticky-go:focus-visible,
  .mdhook-btn:focus-visible,
  .mvp-care-btn:focus-visible,
  .submit-btn:focus-visible,
  .intake-start-btn:focus-visible,
  .disp-btn-primary:focus-visible,
  .confirm-cta button:not(.cta-secondary):focus-visible,
  .ab-cta .btn:focus-visible { transform: none; }
}

@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px;
    box-shadow: none !important;
  }
}