/* ============================================================
   landing.css — Ana sayfa (index.html) page-specific styles
   Inherits: shared.css
   ============================================================ */

/* Local tokens — landing-page specific palette */
:root {
  --guide-card-bg: var(--surface2);
  --guide-card-border: var(--border);
  --guide-card-featured-border: var(--color-warning);
}

/* --- Hero -------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-120) var(--space-lg) var(--space-5xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-6) var(--space-md) var(--space-6) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--space-40);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: fadeUp var(--anim-fade) both;
}

.hero-badge .dot {
  width: var(--space-6); height: var(--space-6);
  border-radius: 50%;
  background: var(--accent);
  animation: pulse var(--anim-pulse);
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(3.25rem, 9vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
  max-width: 900px;
  animation: fadeUp var(--anim-fade) 0.1s ease both;
}

.hero h1 em { font-style: italic; color: var(--accent); }

.hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--muted);
  max-width: var(--width-prose);
  margin: var(--space-xl) auto 0;
  font-weight: 300;
  animation: fadeUp var(--anim-fade) 0.2s both;
}

.hero-cta {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp var(--anim-fade) 0.3s both;
}

/* --- Buttons ----------------------------------------------- */
.btn-primary {
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  padding: var(--space-14) var(--space-xl);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base), transform var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-light); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: 400;
  padding: var(--space-14) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--text); border-color: rgba(var(--text-light-rgb),0.2); }

/* --- Chat preview ------------------------------------------ */
.chat-preview {
  margin-top: var(--space-5xl);
  width: 100%;
  max-width: var(--width-sm);
  animation: fadeUp var(--anim-fade) 0.4s ease both;
}

.chat-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  text-align: left;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.avatar {
  width: var(--size-avatar); height: var(--size-avatar);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--white);
  flex-shrink: 0;
}

.chat-name   { font-weight: 500; font-size: var(--text-base); }
.chat-status { font-size: var(--text-2xs); color: var(--color-success); margin-top: 1px; }

.bubble {
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-card);
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 85%;
  margin-bottom: var(--space-sm);
  opacity: 0;
  animation: bubbleIn var(--anim-bubble) forwards;
}
.bubble.bot  { background: var(--surface2); border-radius: var(--radius-xs) var(--radius-card) var(--radius-card) var(--radius-card); color: var(--text); }
.bubble.user { background: var(--accent); border-radius: var(--radius-card) var(--radius-xs) var(--radius-card) var(--radius-card); color: var(--white); margin-left: auto; }
.bubble:nth-child(1) { animation: bubbleIn var(--anim-bubble) 0.8s forwards; }
.bubble:nth-child(2) { animation: bubbleIn var(--anim-bubble) 1.4s forwards; }
.bubble:nth-child(3) { animation: bubbleIn var(--anim-bubble) 2.0s forwards; }
.bubble:nth-child(4) { animation: bubbleIn var(--anim-bubble) 2.6s forwards; }

/* --- Section overrides for landing ------------------------- */
.section {
  padding: 100px var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.09em;
  color: var(--text);
  max-width: 600px;
}
.section-title em { font-style: italic; color: var(--accent); }

/* --- Steps (grid layout for landing) ----------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin-top: var(--space-60);
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.step {
  background: var(--surface);
  padding: var(--space-40) var(--space-xl);
  position: relative;
  display: block;
}

.step-num {
  font-family: var(--font-serif);
  font-size: var(--text-disp-7);
  font-weight: 900;
  color: rgba(var(--accent-rgb),0.12);
  line-height: 1;
  margin-bottom: var(--space-20);
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}

.step h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--text);
  margin-bottom: var(--space-10);
  letter-spacing: -0.03em;
}

.step p { font-size: var(--text-base); color: var(--muted); line-height: 1.65; }

/* --- Filter buttons ---------------------------------------- */
.filter-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-10) var(--space-md);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.filter-btn:hover, .filter-btn:focus-visible, .filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* --- Character cards (landing) ----------------------------- */
.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.character-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  cursor: pointer;
  transition: border-color var(--transition-slow), transform var(--transition-slow), background var(--transition-slow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.character-card:hover, .character-card:focus-visible { border-color: rgba(var(--accent-rgb),0.4); transform: translateY(-2px); }
.character-card.selected { border-color: var(--accent); background: rgba(var(--accent-rgb),0.05); }

.character-card .check {
  position: absolute;
  top: var(--space-md); right: var(--space-md);
  width: var(--space-20); height: var(--space-20);
  background: var(--accent);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
}
.character-card.selected .check { display: flex; }

/* character avatar circle */
.char-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl-sm);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
  background: var(--char-color, var(--accent));
}
/* per-character colors — tokens defined in shared.css :root{} */
.char-avatar.km         { --char-color: var(--char-km-color); }
.char-avatar.lezen      { --char-color: var(--char-lezen-color); }
.char-avatar.luisteren  { --char-color: var(--char-luisteren-color); }
.char-avatar.spreken    { --char-color: var(--char-spreken-color); }
.char-avatar.schrijven  { --char-color: var(--char-schrijven-color); }
.char-avatar.okt        { --char-color: var(--char-okt-color); }
.char-avatar.dokter     { --char-color: var(--char-dokter-color); }
.char-avatar.winkelier  { --char-color: var(--char-winkelier-color); }
.char-avatar.collega    { --char-color: var(--char-collega-color); }
.char-avatar.ambtenaar  { --char-color: var(--char-ambtenaar-color); }

.char-name  { font-weight: 600; font-size: var(--text-md); margin-bottom: 2px; }
.char-role  { font-size: var(--text-xs); color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-12); }
.char-desc  { font-size: var(--text-xs); color: var(--muted); line-height: 1.6; margin-top: var(--space-6); flex: 1; }
.btn-ghost--muted { color: var(--muted); }
.char-price {
  margin-top: var(--space-12);
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 600;
}


.free-chip {
  display: inline-block;
  font-size: var(--text-3xs); font-weight: 600;
  letter-spacing: 0.025em; text-transform: uppercase;
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid rgba(var(--success-rgb),0.28);
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  margin-left: var(--space-6);
  vertical-align: middle;
}

.char-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-12);
}
.btn-try-free {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs); font-weight: 500;
  background: rgba(var(--accent-rgb),0.10);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-12);
  color: var(--accent);
  text-decoration: none;
  transition: background var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
}
.btn-try-free:hover, .btn-try-free:focus-visible { background: rgba(var(--accent-rgb),0.20); border-color: var(--accent); }

/* --- Trust bar --------------------------------------------- */
.trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  flex-wrap: wrap;
  padding: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-item { text-align: center; }

.trust-num {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--text-disp-3);
  color: var(--text);
  letter-spacing: -0.06em;
}

.trust-label { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

.guarantee-note {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  background: rgba(var(--accent-rgb),0.07);
  border: 1px solid rgba(var(--accent-rgb),0.18);
  border-radius: var(--radius-md);
  padding: var(--space-14) var(--space-20);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-md);
  text-align: left;
}
.guarantee-note strong { color: var(--text); }

/* --- Features grid ----------------------------------------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-60);
}

.feature-item { background: var(--surface); padding: var(--space-36) var(--space-xl); }
.feature-icon { font-size: var(--text-3xl); margin-bottom: var(--space-md); display: block; color: var(--accent); }
.feature-item h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-xl-sm);
  color: var(--text);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}
.feature-item p { font-size: var(--text-base); color: var(--muted); line-height: 1.65; }

/* --- FAQ --------------------------------------------------- */
.faq-list  { margin-top: var(--space-2xl); max-width: var(--width-lg); }
.faq-item  { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-22) 0;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text);
  gap: var(--space-md);
  user-select: none;
  /* button reset — works for both <div> and <button> */
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  transition: color var(--transition-base);
}
.faq-q:hover, .faq-q:focus-visible { color: var(--accent); }
.faq-icon { font-size: var(--text-xl); color: var(--accent); flex-shrink: 0; transition: transform var(--transition-slow); line-height: 1; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.7;
  padding-bottom: var(--space-20);
  display: none;
  max-width: var(--width-faq);
}
.faq-item.open .faq-a { display: block; }

/* --- Auth modal -------------------------------------------- */
#auth-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
#auth-modal.hidden { display: none; }

#auth-modal .auth-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

#auth-modal .auth-box {
  position: relative;
  z-index: var(--z-raised);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-36) var(--space-xl);
  width: 100%;
  max-width: 400px;
  animation: modalIn var(--anim-modal) both;
}

#auth-modal h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-disp-1);
  color: var(--text);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
}

#auth-modal .auth-sub { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-lg); }

#auth-modal .auth-message {
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-input);
  display: none;
}
#auth-modal .auth-message.error   { background: var(--color-error-bg-md); border: 1px solid var(--color-error-border); color: var(--color-error); display: block; }
#auth-modal .auth-message.success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success); display: block; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-13) var(--space-20);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.btn-google:hover, .btn-google:focus-visible { border-color: rgba(var(--text-light-rgb),0.2); background: var(--surface2); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin: var(--space-20) 0;
  color: var(--muted);
  font-size: var(--text-xs);
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-13) var(--space-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  outline: none;
  margin-bottom: var(--space-10);
  transition: border-color var(--transition-base);
}
.auth-input::placeholder { color: var(--muted); }
.auth-input:focus-visible { border-color: var(--accent); }

.btn-auth-submit {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  padding: var(--space-14);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  margin-top: var(--space-xs);
  transition: background var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.btn-auth-submit:hover, .btn-auth-submit:focus-visible { background: var(--accent-light); }
.btn-auth-submit:disabled  { opacity: 0.6; cursor: not-allowed; }

.auth-note {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  margin-top: var(--space-md);
  line-height: 1.5;
}

.auth-close {
  position: absolute;
  top: var(--space-md); right: var(--space-18);
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-2xl);
  cursor: pointer;
  line-height: 1;
  padding: var(--space-xs);
  transition: color var(--transition-mid);
}
.auth-close:hover, .auth-close:focus-visible { color: var(--text); }

/* --- Spinner ----------------------------------------------- */
.spinner {
  width: var(--space-18); height: var(--space-18);
  border: 2px solid rgba(var(--white-rgb),0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin var(--anim-spin);
}

/* --- Nav utilities ----------------------------------------- */
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-avatar {
  width: var(--space-xl); height: var(--space-xl); border-radius: 50%;
  background: var(--accent); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-base); cursor: pointer;
}
.nav-sep { width: 1px; height: var(--space-40); background: var(--border); }
.pt-0 { padding-top: 0 !important; }

/* --- Animations -------------------------------------------- */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes modalIn  { from { opacity: 0; transform: scale(0.96);      } to { opacity: 1; transform: scale(1);      } }
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes spin     { to { transform: rotate(360deg); } }

/* nav dropdown */
.nav-dropdown-wrapper { position: relative; }
.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: opacity var(--transition-fast);
}
.nav-dropdown-btn:hover, .nav-dropdown-btn:focus-visible { opacity: 0.75; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: var(--space-40);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: var(--space-sm);
  min-width: 160px;
  z-index: var(--z-dropdown);
}
.nav-dropdown-email {
  color: var(--muted);
  font-size: var(--text-2xs);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.nav-dropdown-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}
.nav-dropdown-link {
  display: block;
  padding: var(--space-6) var(--space-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--transition-base);
}
.nav-dropdown-link:hover, .nav-dropdown-link:focus-visible { background: var(--surface2); border-radius: var(--radius-badge); }
.nav-dropdown-action {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-6) var(--space-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-badge);
  transition: background var(--transition-base);
}
.nav-dropdown-action:hover, .nav-dropdown-action:focus-visible { background: var(--surface2); }

/* trust bar separator */
.trust-sep {
  width: 1px;
  height: var(--space-40);
  background: var(--border);
}

/* ref banner */
.ref-banner {
  display: none;
  background: rgba(var(--accent-rgb),0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.2);
  padding: var(--space-10) var(--space-lg);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text);
}

/* --- inburgering-v2 / article page utilities -------------- */
.section--no-top   { padding-top: 0; }

/* quiz result grade text */
.quiz-result-grade { color: var(--muted); margin: var(--space-sm) 0 var(--space-20); font-size: var(--text-base); }

/* btn-buy inline variant (used inside quiz result) */
.btn-buy--inline   { display: inline-block; width: auto; padding: var(--space-12) var(--space-lg); }

/* reset quiz button */
.btn-reset {
  background: none; border: none;
  color: var(--muted); font-size: var(--text-sm);
  cursor: pointer; margin-top: var(--space-12);
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.btn-reset:hover, .btn-reset:focus-visible { color: var(--text); }

/* en.html modal box — .modal is the dialog container */
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: var(--width-sm);
  width: 100%;
  position: relative;
}

/* form field group — label + input/select */
.form-group { margin-bottom: var(--space-md); }
.form-group label {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.form-group input,
.form-group select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--text);
  font-size: var(--text-md);
  padding: var(--space-sm) var(--space-md);
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}
.form-group input:focus-visible,
.form-group select:focus-visible { outline: none; border-color: var(--accent); }

/* modal actions row — Cancel + Buy buttons */
.modal-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.btn-close-modal {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-md);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.btn-close-modal:hover,
.btn-close-modal:focus-visible { color: var(--text); border-color: var(--text); }

/* modal overlay — replaces inline style on #buyModal */
.modal-page-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-onboarding);
  background: var(--overlay-light);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.modal-page-overlay.open { display: flex; }

/* modal per-month label */
.modal-per-month { font-size: var(--text-base); font-weight: 400; color: var(--muted); }

/* modal error message */
.modal-err {
  display: none;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-sm);
  text-align: center;
}
.modal-err.visible { display: block; }

/* modal secure line */
.modal-secure-note { font-size: var(--text-2xs); color: var(--muted); text-align: center; margin-top: var(--space-10); }

/* modal success block */
.modal-success-block { display: none; text-align: center; }
.modal-success-block--open { display: block; }

/* modal success icon / title / sub */
.modal-success-icon  { font-size: var(--text-disp-5); margin-bottom: var(--space-12); }
.modal-success-title { margin-bottom: var(--space-sm); }
.modal-success-sub   { color: var(--muted); font-size: var(--text-base); margin-bottom: var(--space-md); }

/* modal deep link item */
.modal-link-item {
  display: block;
  padding: var(--space-11) var(--space-14);
  background: var(--surface2);
  border-radius: var(--radius-sm);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

/* --- hero sub-caption */
.hero-caption {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-md);
}

/* =============================================
   Chat Preview Demo Component (demo section)
   ============================================= */
.chat-preview-demo {
  max-width: var(--width-sm);
  margin: 0 auto;
  background: var(--surface2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(var(--text-light-rgb),0.08);
}
.chat-preview-header {
  background: var(--surface);
  padding: var(--space-14) var(--space-18);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  border-bottom: 1px solid rgba(var(--text-light-rgb),0.06);
}
.chat-preview-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg);
  font-family: var(--font-serif);
  flex-shrink: 0;
}
.chat-preview-name {
  font-weight: 500;
  font-size: var(--text-base);
}
.chat-preview-status {
  font-size: var(--text-2xs);
  color: var(--color-success);
}
.chat-preview-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.chat-bubble {
  padding: var(--space-10) var(--space-14);
  max-width: 85%;
  color: var(--text);
}
.chat-bubble--bot {
  align-self: flex-start;
  background: var(--surface);
  border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-md);
}
.chat-bubble--user {
  align-self: flex-end;
  background: var(--accent);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md);
  max-width: 80%;
  color: var(--white);
}
.chat-bubble-tr {
  color: var(--muted);
  font-size: var(--text-2xs);
  display: block;
  margin-top: var(--space-xs);
}

/* =============================================
   Character Filter Section
   ============================================= */
.char-section-sub {
  color: var(--muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-lg);
  margin-top: calc(-1 * var(--space-sm));
}
.char-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-bottom: var(--space-lg);
}
.filter-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}
.filter-label {
  font-size: var(--text-xs);
  color: var(--muted);
  align-self: center;
  padding-right: var(--space-xs);
}

/* =============================================
   Pricing Section Enhancements
   ============================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-20);
  max-width: var(--width-section);
  margin: var(--space-40) auto 0;
}
.pricing-card--featured {
  position: relative;
  border-color: rgba(var(--accent-rgb),0.4);
}
.pricing-badge {
  position: absolute;
  top: calc(-1 * var(--space-12));
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: var(--space-xs) var(--space-14);
  border-radius: var(--radius-lg);
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.pricing-label {
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}
.pricing-label--muted {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}
.price-cents {
  font-size: var(--text-disp-4);
}
.features--spaced {
  margin: var(--space-20) 0;
}
.pricing-cta {
  width: 100%;
  justify-content: center;
  font-size: var(--text-lg);
  padding: var(--space-md);
}
.pricing-cta--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  transition: background var(--transition-base), color var(--transition-base);
}
.pricing-cta--ghost:hover, .pricing-cta--ghost:focus-visible {
  background: var(--surface);
}
.guarantee-icon {
  font-size: var(--text-xl-sm);
  flex-shrink: 0;
}
.guarantee-text {
  font-size: var(--text-sm);
}
.pricing-footer {
  text-align: center;
  margin-top: var(--space-12);
}
.pricing-footer-link {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition-fast);
}
.pricing-footer-link:hover, .pricing-footer-link:focus-visible { opacity: 0.7; }
.pricing-perks {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  color: var(--muted);
  font-size: var(--text-sm);
}
.accent-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.section-title--center {
  text-align: center;
  max-width: 100%;
}
.section-sub {
  text-align: center;
  color: var(--muted);
  font-size: var(--text-base);
  margin-top: calc(-1 * var(--space-sm));
}

/* =============================================
   Coming Soon Card
   ============================================= */
.coming-soon-card {
  margin-top: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-28) var(--space-xl);
  display: flex;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
}
.cs-emoji { font-size: var(--text-3xl); }
.cs-body { flex: 1; }
.cs-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-xl-sm);
  color: var(--text);
  margin-bottom: var(--space-xs);
}
.cs-desc {
  font-size: var(--text-sm);
  color: var(--muted);
}
.cs-badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  padding: var(--space-xs) var(--space-12);
  border-radius: var(--radius-lg);
}

/* Accent strong text */
strong.accent { color: var(--accent); }

/* =============================================
   Testimonial Cards
   ============================================= */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-20);
  margin-top: var(--space-40);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.testimonial-stars {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-12);
}
.testimonial-body {
  color: var(--text);
  font-size: var(--text-rg);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.testimonial-avatar {
  width: var(--space-36);
  height: var(--space-36);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--white);
  flex-shrink: 0;
}
.testimonial-avatar--accent  { background: var(--accent); }
.testimonial-avatar--purple  { background: var(--avatar-purple); }
.testimonial-avatar--green   { background: var(--avatar-green); }
.testimonial-name {
  font-size: var(--text-base);
  font-weight: 500;
}
.testimonial-meta {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* =============================================
   Guide Cards (blog link cards)
   ============================================= */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-12);
  max-width: 900px;
  margin: 0 auto var(--space-20);
}
.guide-grid--no-bottom { margin-bottom: 0; }
.guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-18);
  text-decoration: none;
  color: var(--text);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.guide-card:hover, .guide-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.guide-card--featured {
  background: rgba(var(--warning-rgb),0.08);
  border: 2px solid rgba(var(--warning-rgb),0.4);
}
.guide-card--dark {
  background: var(--bg);
  border-color: var(--border);
}
.guide-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}
.guide-title {
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}
.guide-desc {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* =============================================
   Section modifiers
   ============================================= */
.section--surface { background: var(--surface); }
.section-sub--narrow {
  max-width: var(--width-prose);
  margin: 0 auto var(--space-xl);
}

/* btn-ghost accent variant */
.btn-ghost--accent {
  border-color: rgba(var(--accent-rgb),0.4);
  color: var(--accent);
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.btn-ghost--accent:hover, .btn-ghost--accent:focus-visible { background: rgba(var(--accent-rgb),0.08); }

/* btn-ghost small */
.btn-ghost--sm { font-size: var(--text-sm); }

/* btn-nav small */
.btn-nav--sm { font-size: var(--text-xs); }

/* margin utility */
.mb-md { margin-bottom: var(--space-lg); }

/* Guide card — all guides link */
.guide-card--all {
  border-style: dashed;
  color: var(--muted);
  align-items: center;
  justify-content: center;
}
.guide-card--all span {
  font-size: var(--text-base);
  font-weight: 500;
}

/* Modal — tab switcher */
.modal-tabs {
  display: flex;
  gap: var(--space-xs);
  margin: var(--space-12) 0 var(--space-20);
  background: var(--surface2);
  border-radius: var(--radius-input);
  padding: var(--space-xs);
}
.modal-tab {
  flex: 1;
  padding: var(--space-sm);
  border-radius: var(--radius-badge);
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: inherit;
  background: transparent;
  color: var(--muted);
  transition: background var(--transition-base), color var(--transition-base);
}
.modal-tab--active {
  background: var(--accent);
  color: var(--white);
}

/* Modal — package info box */
.modal-pack-group { margin-bottom: var(--space-md); }
.modal-pack-info {
  background: var(--surface2);
  border: 1px solid rgba(var(--accent-rgb),0.3);
  border-radius: var(--radius-input);
  padding: var(--space-14);
}
.modal-pack-title {
  font-weight: 500;
  margin-bottom: var(--space-6);
}
.modal-pack-chars {
  font-size: var(--text-sm);
  color: var(--muted);
}
.modal-pack-savings {
  font-size: var(--text-xs);
  color: var(--accent);
  margin-top: var(--space-6);
}

/* Modal — deep link area */
.modal-tg-hint {
  display: block;
  margin-bottom: var(--space-6);
  color: var(--muted);
  font-size: var(--text-2xs);
}
.modal-start-cmd {
  color: var(--accent);
  font-size: var(--text-base);
  font-weight: 600;
}
.modal-copy-btn {
  display: block;
  margin-top: var(--space-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: var(--space-xs) var(--space-12);
  border-radius: var(--radius-badge);
  cursor: pointer;
  font-size: var(--text-xs);
  transition: background var(--transition-base);
}
.modal-copy-btn:hover, .modal-copy-btn:focus-visible { background: var(--surface); }

/* Modal — buy/deeplink buttons */
.btn-flex { flex: 1; justify-content: center; }

/* Modal group notice */
.modal-group-notice {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-input);
  padding: var(--space-10) var(--space-14);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--green);
}

/* Modal dashboard button */
.modal-dash-btn {
  width: 100%;
  text-align: center;
  padding: var(--space-12);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--muted);
  font-size: var(--text-base);
  text-decoration: none;
  margin-bottom: var(--space-12);
  display: block;
  transition: background var(--transition-base);
}
.modal-dash-btn:hover, .modal-dash-btn:focus-visible { background: var(--surface); }

/* Modal start command box */
.modal-cmd-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-12);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-xs);
}

/* Deep link item in JS-generated list */
.deeplink-item {
  display: block;
  margin: var(--space-6) 0;
  padding: var(--space-10) var(--space-14);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.deeplink-item:hover, .deeplink-item:focus-visible { opacity: 0.85; }
.btn-w-full-mb { width: 100%; justify-content: center; margin-bottom: var(--space-12); }

/* =============================================
   Responsive — Mobile (≤600px)
   ============================================= */
@media (max-width: 600px) {
  /* Hero: shrink top padding (nav is ~60px on mobile) */
  .hero { padding: var(--space-88) var(--space-20) var(--space-3xl); }
  .hero h1 { letter-spacing: -0.09em; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-primary,
  .hero-cta .btn-ghost { text-align: center; justify-content: center; }

  /* Section vertical rhythm */
  .section { padding: 64px var(--space-20); }

  /* Trust bar: tighten gap, hide vertical separators */
  .trust-bar { gap: var(--space-20); padding: var(--space-lg) var(--space-20); }
  .trust-sep { display: none; }

  /* Step + feature cards: reduce inner padding */
  .step { padding: var(--space-28) var(--space-20); }
  .feature-item { padding: var(--space-28) var(--space-20); }

  /* Coming soon card: stack vertically */
  .coming-soon-card { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .cs-badge { margin-left: 0; }

  /* Pricing perks: stack */
  .pricing-perks { gap: var(--space-12); flex-direction: column; align-items: center; }
}