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

/* WiseTalk component styles. Every value comes from tokens.css.
   Grid rule: every size, gap, padding, offset and radius is a multiple of 4px.
   Only line weights (1px, 1.5px, 2px borders and strokes) sit outside it. */

.wt-root, .wt-root * { box-sizing: border-box; }
.wt-root { font-family: var(--font-sans); color: var(--text-primary); -webkit-font-smoothing: antialiased; }

/* ---------- Button ---------- */
.wt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12);
  min-height: var(--control-height); padding: calc(var(--space-12) - 1.5px) var(--space-24);
  border-radius: var(--radius-button); border: 1.5px solid transparent;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600;
  text-decoration: none; cursor: pointer; background: transparent; white-space: nowrap;
  transition: background-color var(--duration-hover) ease-out, color var(--duration-hover) ease-out, border-color var(--duration-hover) ease-out;
}
.wt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wt-btn--pill { border-radius: var(--radius-pill); padding-left: var(--space-32); padding-right: var(--space-32); }
.wt-btn--lg { min-height: 48px; padding: calc(var(--space-12) - 1.5px) var(--space-24); font-size: 15px; }
.wt-btn--sm { min-height: var(--touch-target); padding: calc(var(--space-8) - 1.5px) var(--space-20); font-size: 15px; line-height: 24px; }
.wt-btn--block { display: flex; width: 100%; }

.wt-btn--primary { background: var(--primary); color: var(--on-primary); }
.wt-btn--primary:hover, .wt-btn--primary:active { background: var(--primary-deep); }

.wt-btn--secondary { border-color: var(--primary); color: var(--primary); }
.wt-btn--secondary:hover { background: var(--primary-tint); }
.wt-btn--secondary:active { background: var(--primary-tint); color: var(--primary-deep); border-color: var(--primary-deep); }

.wt-btn--tertiary { color: var(--primary); padding-left: var(--space-4); padding-right: var(--space-4); }
.wt-btn--tertiary:hover { text-decoration: underline; text-underline-offset: 4px; }
.wt-btn--tertiary:active { color: var(--primary-deep); }

.wt-btn[disabled], .wt-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.wt-btn__icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.wt-btn__spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: wt-spin 0.8s linear infinite; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wt-btn__spinner { animation-duration: 2.4s; } }

/* ---------- Form fields: TextField, Select ---------- */
.wt-field { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.wt-field__label { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text-primary); }
@media (min-width: 1024px) { .wt-field__label { font-size: 20px; line-height: 28px; } }
.wt-field__control { position: relative; }
.wt-field__input {
  display: block; width: 100%; height: var(--control-height); padding: calc(var(--space-12) - 1px) var(--space-16);
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-input);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  transition: border-color var(--duration-hover) ease-out, box-shadow var(--duration-hover) ease-out;
}
textarea.wt-field__input { height: auto; min-height: 120px; resize: vertical; }
select.wt-field__input { appearance: none; -webkit-appearance: none; padding-right: var(--space-48); cursor: pointer; }
.wt-field__chevron { position: absolute; right: var(--space-16); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-secondary); pointer-events: none; }
.wt-field__input::placeholder { color: var(--text-muted); }
.wt-field__input:hover { border-color: var(--primary-light); }
.wt-field__input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.wt-field__input:disabled { background: var(--skeleton); color: var(--text-secondary); cursor: not-allowed; }
.wt-field--error .wt-field__input { border-color: var(--danger); }
.wt-field--error .wt-field__input:focus { box-shadow: 0 0 0 1px var(--danger); }
.wt-field__hint { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 0; }
.wt-field__error { display: flex; align-items: center; gap: var(--space-8); font-size: 14px; line-height: 20px; color: var(--danger); margin: 0; }
.wt-field__error svg { width: 16px; height: 16px; flex: none; }

/* ---------- Checkbox ---------- */
.wt-check { display: flex; align-items: flex-start; gap: var(--space-12); min-height: var(--touch-target); padding: var(--space-8) 0; cursor: pointer; font-size: 16px; line-height: 24px; color: var(--text-primary); }
.wt-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wt-check__box {
  flex: none; width: 24px; height: 24px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--text-secondary); background: var(--surface); color: var(--on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--duration-hover) ease-out, border-color var(--duration-hover) ease-out;
}
.wt-check__box svg { width: 16px; height: 16px; opacity: 0; }
.wt-check:hover .wt-check__box { border-color: var(--primary); }
.wt-check input:checked + .wt-check__box { background: var(--primary); border-color: var(--primary); }
.wt-check input:checked + .wt-check__box svg { opacity: 1; }
.wt-check input:focus-visible + .wt-check__box { outline: 2px solid var(--primary); outline-offset: 2px; }
.wt-check input:disabled + .wt-check__box { opacity: 0.45; }
.wt-check__text { display: flex; flex-direction: column; }
.wt-check__desc { font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* ---------- Card ---------- */
.wt-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: var(--space-20); transition: border-color var(--duration-hover) ease-out; color: inherit; text-decoration: none;
}
@media (min-width: 640px) { .wt-card { padding: var(--space-24); } }
@media (min-width: 1024px) { .wt-card--roomy { padding: var(--space-24); } }
.wt-card--cream { background: var(--cream); }
.wt-card--tint { background: var(--primary-tint); border-color: var(--primary-tint); }
.wt-card--lg { border-radius: var(--radius-card-lg); }
.wt-card--hero { border-radius: var(--radius-hero); }
#top .wt-card--hero { font-size: 0.92em; }
.wt-card--elevated { box-shadow: var(--shadow-card); }
.wt-card--interactive { cursor: pointer; }
.wt-card--interactive:hover { border-color: var(--primary-light); }
.wt-card--interactive:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wt-card--selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* ---------- Badge ---------- */
.wt-badge {
  display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap;
}
.wt-badge svg { width: 16px; height: 16px; flex: none; }
.wt-badge--purple { background: var(--primary-tint); color: var(--primary); }
.wt-badge--neutral { background: var(--skeleton); color: var(--text-secondary); }
.wt-badge--success { background: var(--success-tint); color: var(--text-primary); }
.wt-badge--success svg { color: var(--success); }
.wt-badge--warning { background: var(--warning-tint); color: var(--text-primary); }
.wt-badge--warning svg { color: var(--warning); }
.wt-badge--danger { background: var(--danger-tint); color: var(--text-primary); }
.wt-badge--danger svg { color: var(--danger); }

/* ---------- Alert ---------- */
.wt-alert { display: flex; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-button); color: var(--text-primary); }
.wt-alert > svg { flex: none; width: 24px; height: 24px; }
.wt-alert__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.wt-alert__body { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-primary); }
.wt-alert--info { background: var(--primary-tint); }
.wt-alert--info > svg { color: var(--primary); }
.wt-alert--success { background: var(--success-tint); }
.wt-alert--success > svg { color: var(--success); }
.wt-alert--warning { background: var(--warning-tint); }
.wt-alert--warning > svg { color: var(--warning); }
.wt-alert--danger { background: var(--danger-tint); }
.wt-alert--danger > svg { color: var(--danger); }

/* ---------- Avatar ---------- */
.wt-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary); font-weight: 700; letter-spacing: 0.02em; overflow: hidden;
}
.wt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wt-avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.wt-avatar--md { width: 48px; height: 48px; font-size: 16px; }
.wt-avatar--lg { width: 64px; height: 64px; font-size: 20px; }
.wt-avatar--xl { width: 96px; height: 96px; font-size: 32px; }

/* ---------- ChatBubble ---------- */
.wt-bubble-row { display: flex; width: 100%; }
.wt-bubble-row--outgoing { justify-content: flex-end; }
.wt-bubble {
  max-width: min(460px, 85%); padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-card-lg); font-size: 16px; line-height: 24px; margin: 0;
}
.wt-bubble--incoming { background: var(--bubble-incoming); color: var(--text-primary); border-bottom-left-radius: var(--radius-xs); }
.wt-bubble--outgoing { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: var(--radius-xs); }
.wt-bubble__meta { display: block; margin-top: var(--space-8); font-size: 12px; line-height: 16px; font-weight: 500; opacity: 0.8; }
.wt-bubble--incoming .wt-bubble__meta { color: var(--text-secondary); opacity: 1; }

/* ---------- Eyebrow, headings, highlight, quote ---------- */
.wt-eyebrow { display: block; margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
@media (min-width: 1024px) { .wt-eyebrow { font-size: 14px; } }

.wt-heading { display: flex; flex-direction: column; gap: var(--space-16); max-width: var(--width-text); }
.wt-heading--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.wt-heading__title { margin: 0; font-weight: 700; color: var(--text-primary); }
.wt-heading__title--xl { font-size: 34px; line-height: 40px; letter-spacing: -0.02em; text-wrap: balance; }
.wt-heading__title--l { font-size: 28px; line-height: 34px; letter-spacing: -0.015em; text-wrap: balance; }
.wt-heading__title--m { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
  .wt-heading__title--xl { font-size: var(--type-hero); line-height: var(--type-hero-lh); }
  .wt-heading__title--l { font-size: var(--type-display); line-height: var(--type-display-lh); }
  .wt-heading__title--m { font-size: var(--type-section); line-height: var(--type-section-lh); }
}
.wt-heading__sub { margin: 0; font-size: 16px; line-height: 26px; color: var(--text-secondary); }
@media (min-width: 1024px) { .wt-heading__sub { font-size: var(--type-sub); line-height: var(--type-sub-lh); } }
.wt-heading__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); padding-top: var(--space-8); }
.wt-heading--center .wt-heading__actions { justify-content: center; }

.wt-accent { color: var(--primary); }
.wt-highlight {
  background: var(--primary-tint); color: inherit; border-radius: var(--radius-button);
  padding: 0.08em var(--space-8); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wt-highlight--accent { color: var(--primary); }

.wt-quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 28px; color: var(--text-secondary); }
@media (min-width: 1024px) { .wt-quote { font-size: 24px; line-height: 36px; } }

/* ---------- MentorCard ---------- */
.wt-mentor { display: flex; flex-direction: column; gap: var(--space-16); }
.wt-mentor__head { display: flex; align-items: center; gap: var(--space-16); }
.wt-mentor__name { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-8); }
.wt-mentor__name svg { color: var(--primary); }
.wt-mentor__role { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.wt-mentor__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.wt-mentor__quote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 24px; color: var(--text-secondary); }
.wt-mentor__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-top: var(--space-16); border-top: 1px solid var(--border); }
.wt-mentor__price { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.wt-mentor__price strong { display: block; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--text-primary); }

/* ---------- PricingCard ---------- */
.wt-price { display: flex; flex-direction: column; gap: var(--space-24); height: 100%; }
.wt-price__top { display: flex; flex-direction: column; gap: var(--space-8); }
.wt-price__name { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.wt-price__desc { margin: 0; font-size: 15px; line-height: 24px; color: var(--text-secondary); }
.wt-price__amount { margin: 0; display: flex; align-items: baseline; gap: var(--space-8); }
.wt-price__amount strong { font-size: 44px; line-height: 52px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.wt-price__amount span { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.wt-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); flex: 1; }
.wt-price__list li { display: flex; gap: var(--space-12); font-size: 15px; line-height: 24px; color: var(--text-primary); }
.wt-price__list svg { flex: none; color: var(--primary); }
.wt-price--featured .wt-price__amount strong { color: var(--primary); }

/* ---------- EmptyState ---------- */
.wt-empty { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: var(--space-40) var(--space-24); border-radius: var(--radius-card-lg); background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 1024px) { .wt-empty { padding: var(--space-64) var(--space-48); } }
.wt-empty--center { align-items: center; text-align: center; }
.wt-empty__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.wt-empty__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; max-width: 480px; position: relative; }
.wt-empty__body { margin: 0; font-size: 15px; line-height: 24px; color: var(--text-secondary); max-width: 480px; position: relative; }
.wt-empty > * { position: relative; }
.wt-empty > .wt-orbit { position: absolute; }

/* ---------- NavBar ---------- */
.wt-nav { position: relative; background: var(--surface); border-bottom: 1px solid var(--border); }
.wt-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); height: var(--nav-height-mobile); max-width: var(--width-page); margin: 0 auto; padding: 0 var(--page-margin-mobile); }
@media (min-width: 1024px) { .wt-nav__inner { height: var(--nav-height-desktop); padding: 0 var(--page-margin-desktop); } }
.wt-nav__logo { display: inline-flex; align-items: center; gap: 8px; padding: var(--space-8) 0; text-decoration: none; }
.wt-nav__logo-mark { display: block; height: var(--logo-nav-mark); width: auto; flex: none; }
.wt-nav__logo-word { display: block; height: var(--logo-nav-wordmark); width: auto; }
@media (min-width: 1024px) {
  .wt-nav__logo { gap: 8px; }
  .wt-nav__logo-mark { height: 22px; }
  .wt-nav__logo-word { height: 18px; }
}
.wt-nav__links { display: none; align-items: center; gap: var(--space-32); list-style: none; margin: 0; padding: 0; }
.wt-nav__links a { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: var(--space-8) 0; transition: color var(--duration-hover) ease-out; }
.wt-nav__links a:hover, .wt-nav__links a[aria-current="page"] { color: var(--primary); }
.wt-nav__links a:focus-visible, .wt-nav__menu:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }
.wt-nav__actions { display: none; align-items: center; gap: var(--space-12); }
.wt-nav__menu { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target); height: var(--touch-target); border: 0; background: transparent; color: var(--text-primary); border-radius: var(--radius-button); cursor: pointer; }
@media (min-width: 1024px) {
  .wt-nav__links, .wt-nav__actions { display: flex; }
  .wt-nav__menu { display: none; }
}

/* ---------- OrbitRings ---------- */
.wt-orbit { position: absolute; pointer-events: none; color: var(--primary); }
.wt-orbit circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.wt-orbit--top-right { top: 0; right: 0; transform: translate(40%, -40%); }
.wt-orbit--top-left { top: 0; left: 0; transform: translate(-40%, -40%); }
.wt-orbit--bottom-right { bottom: 0; right: 0; transform: translate(40%, 40%); }
.wt-orbit--bottom-left { bottom: 0; left: 0; transform: translate(-40%, 40%); }
.wt-orbit--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ---------- Skeleton ---------- */
.wt-skeleton { display: block; background: var(--skeleton); border-radius: var(--radius-xs); }

/* ---------- Icon ---------- */
.wt-icon { display: inline-block; flex: none; vertical-align: middle; }
.wt-price--featured .wt-badge--purple { background: var(--surface); }