/**
 * Toket /pricing — credits packs (aligned with homepage i18n)
 * Theme: has-v2-user-chrome pages do not get lite-theme.css aliases — define fallbacks here.
 */

html.site-unified-chrome.page-pricing:not(.page-cost-v2),
html.site-unified-chrome.has-v2-user-chrome body.pricing-doc {
  /* Phase 02c: exact Core aliases (zero-visual). Keep dark primary/#635bff untouched. */
  --bg: var(--dt-page-bg, #f7f7fa);
  --surface: var(--dt-card-bg, #ffffff);
  --text: var(--dt-text, #111827);
  --muted: var(--dt-text-muted, #4b5563);
  --border: var(--dt-border, #ececf1);
  --primary: var(--dt-color-brand, #6d5ae6);
  --text-main: var(--text, var(--dt-text, #111827));
  --text-sub: var(--muted, var(--dt-text-muted, #4b5563));
  --card-bg: var(--surface, var(--dt-card-bg, #ffffff));
  --line: var(--border, var(--dt-border, #ececf1));
  --primary-2: #7c6cf5;
  --site-cta-gradient: linear-gradient(135deg, #6d5efc 0%, #8b5cf6 100%);
  --site-cta-shadow: 0 8px 24px rgba(109, 94, 252, 0.24);
  --site-btn-h: 44px;
  --site-btn-radius: 12px;
}

html.site-unified-chrome.page-pricing[data-theme="dark"]:not(.page-cost-v2),
html.site-unified-chrome.page-pricing.dark:not(.page-cost-v2),
html.site-unified-chrome.has-v2-user-chrome[data-theme="dark"] body.pricing-doc,
html.site-unified-chrome.has-v2-user-chrome.dark body.pricing-doc {
  --bg: var(--dt-page-bg, #0b0d12);
  --surface: var(--dt-card-bg, #161b22);
  --text: var(--dt-text, #f3f4f6);
  --muted: var(--dt-text-muted, #b8c0cc);
  --border: var(--dt-border, rgba(255, 255, 255, 0.1));
  /* Dark lift — not Core brand; leave literal. */
  --primary: #8b7cf8;
  --text-main: var(--text, var(--dt-text, #f3f4f6));
  --text-sub: var(--muted, var(--dt-text-muted, #b8c0cc));
  --card-bg: var(--surface, var(--dt-card-bg, #161b22));
  --line: var(--border, var(--dt-border, rgba(255, 255, 255, 0.1)));
  --primary-2: #a5b4fc;
  color-scheme: dark;
}

.pricing-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 72px;
  color: var(--text-main, var(--dt-text, #111827));
}

.pricing-page__hero {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-page__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  background: color-mix(in srgb, var(--card-bg, var(--dt-card-bg, #ffffff)) 88%, var(--text-sub, var(--dt-text-muted, #4b5563)) 12%);
  border: 1px solid var(--line, var(--dt-border, #ececf1));
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 18px;
}

.pricing-page__hero h1 {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--text-main, var(--dt-text, #111827));
  margin: 0 0 12px;
}

.pricing-page__lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  max-width: 640px;
  margin: 0 auto;
}

.pricing-page__expect {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  max-width: 640px;
  margin: 10px auto 0;
  opacity: 0.92;
}

.pricing-section {
  margin-bottom: 36px;
  scroll-margin-top: calc(var(--site-header-h, 64px) + 16px);
}

.pricing-section__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pricing-page__grid {
  margin-bottom: 32px;
}

/* —— Pricing cards: unified public visual system (Public Lab direction; /pricing only) —— */
body.pricing-doc {
  --pricing-card-radius: 10px;
  --pricing-card-gap: 16px;
  --pricing-card-pad-y: 20px;
  --pricing-card-pad-x: 18px;
  --pricing-card-border: var(--line, var(--dt-border, #ececf1));
  --pricing-featured-ring: 0 0 0 1px color-mix(in srgb, var(--primary, #635bff) 12%, transparent);
  --pricing-featured-bg-top: rgba(99, 91, 255, 0.06);
  --pricing-btn-primary-shadow: 0 6px 20px rgba(99, 91, 255, 0.28);
  --pricing-btn-primary-shadow-hover: 0 8px 24px rgba(99, 91, 255, 0.36);
}

html.site-unified-chrome.page-pricing:not([data-theme="dark"]):not(.dark) body.pricing-doc,
html.site-unified-chrome.has-v2-user-chrome:not([data-theme="dark"]):not(.dark) body.pricing-doc {
  --pricing-card-border: var(--dt-border, #ececf1);
  --pricing-featured-bg-top: #fafbff;
  --pricing-btn-primary-shadow: none;
  --pricing-btn-primary-shadow-hover: none;
}

html.site-unified-chrome.page-pricing[data-theme="dark"] body.pricing-doc,
html.site-unified-chrome.page-pricing.dark body.pricing-doc,
html.site-unified-chrome.has-v2-user-chrome[data-theme="dark"] body.pricing-doc,
html.site-unified-chrome.has-v2-user-chrome.dark body.pricing-doc {
  --pricing-card-border: rgba(255, 255, 255, 0.07);
}

body.pricing-doc .pricing-page__grid {
  gap: var(--pricing-card-gap);
}

body.pricing-doc .home-pricing-card {
  min-height: 100%;
  border-radius: var(--pricing-card-radius);
  padding: var(--pricing-card-pad-y) var(--pricing-card-pad-x) calc(var(--pricing-card-pad-y) - 2px);
  box-shadow: none;
  border: 1px solid var(--pricing-card-border);
  background: var(--card-bg, var(--dt-card-bg, #ffffff));
  transition: border-color 0.15s ease;
}

body.pricing-doc .home-pricing-card--featured {
  border-color: color-mix(in srgb, var(--primary, #635bff) 45%, var(--pricing-card-border));
  background: linear-gradient(to top, var(--pricing-featured-bg-top), var(--card-bg, var(--dt-card-bg, #ffffff)));
  box-shadow: var(--pricing-featured-ring);
}

html.site-unified-chrome.page-pricing:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card--featured,
html.site-unified-chrome.has-v2-user-chrome:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card--featured {
  border-color: color-mix(in srgb, var(--primary, #635bff) 35%, var(--pricing-card-border));
}

body.pricing-doc .home-pricing-card__badge {
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-2, #8b7cf8);
  background: color-mix(in srgb, var(--primary, #635bff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary, #635bff) 28%, transparent);
  border-radius: 999px;
  box-shadow: none;
}

html.site-unified-chrome.page-pricing:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card__badge,
html.site-unified-chrome.has-v2-user-chrome:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card__badge {
  color: var(--primary, var(--dt-color-brand, #6d5ae6));
  background: #f5f3ff;
  border-color: #e9e5ff;
}

body.pricing-doc .home-pricing-card h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  margin: 0 0 6px;
}

body.pricing-doc .home-pricing-card--featured h3 {
  padding-right: 4.5rem;
}

body.pricing-doc .home-pricing-card__price {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--text-main, var(--dt-text, #111827));
  margin: 0 0 8px;
}

body.pricing-doc .home-pricing-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
}

body.pricing-doc .home-pricing-card .home-btn {
  margin-top: auto;
}

body.pricing-doc .pricing-card__credits {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, var(--dt-text, #111827));
  margin: 0 0 8px;
}

body.pricing-doc .pricing-card__bonus {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--primary, var(--dt-color-brand, #6d5ae6));
  margin: -4px 0 14px;
}

/* Featured Starter CTA — stronger hierarchy on /pricing only */
body.pricing-doc .home-pricing-card--featured .home-btn--primary {
  color: var(--text-on-primary, #ffffff) !important;
  -webkit-text-fill-color: var(--text-on-primary, #ffffff) !important;
  opacity: 1 !important;
  background: var(--site-cta-gradient, linear-gradient(135deg, #6d5efc 0%, #8b5cf6 100%)) !important;
  border: none !important;
  box-shadow: var(--pricing-btn-primary-shadow) !important;
}

body.pricing-doc .home-pricing-card--featured .home-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--pricing-btn-primary-shadow-hover, var(--site-cta-shadow, 0 8px 24px rgba(109, 94, 252, 0.24))) !important;
  color: var(--text-on-primary, #ffffff) !important;
}

html.site-unified-chrome.page-pricing:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card--featured .home-btn--primary:hover,
html.site-unified-chrome.has-v2-user-chrome:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card--featured .home-btn--primary:hover {
  transform: none;
}

body.pricing-doc .home-pricing-card .home-btn--outline {
  color: var(--text-main, var(--dt-text, #111827));
  border-color: var(--pricing-card-border);
  background: transparent;
}

body.pricing-doc .home-pricing-card .home-btn--outline:hover {
  border-color: color-mix(in srgb, var(--primary, #635bff) 40%, var(--pricing-card-border));
  background: color-mix(in srgb, var(--primary, #635bff) 8%, transparent);
  color: var(--text-main, var(--dt-text, #111827));
}

@media (max-width: 860px) {
  body.pricing-doc {
    --pricing-card-pad-y: 18px;
    --pricing-card-pad-x: 16px;
  }

  body.pricing-doc .pricing-page__grid {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  body.pricing-doc .home-pricing-card--featured h3 {
    padding-right: 0;
    padding-top: 1.75rem;
  }
}

.pricing-usage {
  margin-bottom: 28px;
  padding: 22px 20px;
  border: 1px solid var(--line, var(--dt-border, #ececf1));
  border-radius: 14px;
  background: var(--card-bg, var(--dt-card-bg, #ffffff));
}

.pricing-usage__title {
  font-size: 15px;
  font-weight: 650;
  color: var(--text-main, var(--dt-text, #111827));
  margin: 0 0 8px;
}

.pricing-usage__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  margin: 0 0 12px;
}

.pricing-usage__list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  font-size: 14px;
  line-height: 1.65;
}

.pricing-usage__list li + li {
  margin-top: 4px;
}

.pricing-reassurance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.pricing-reassurance li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
}

.pricing-reassurance li::before {
  content: "✔ ";
  color: color-mix(in srgb, var(--text-sub, var(--dt-text-muted, #4b5563)) 80%, var(--text-main, var(--dt-text, #111827)) 20%);
  font-size: 11px;
}

.pricing-page__note {
  text-align: center;
  font-size: 13px;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

.pricing-page__note a {
  color: var(--text-main, var(--dt-text, #111827));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pricing-page__email {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text-main, var(--dt-text, #111827));
  word-break: break-all;
}

.pricing-page__faq h2 {
  font-size: 20px;
  font-weight: 650;
  color: var(--text-main, var(--dt-text, #111827));
  text-align: center;
  margin-bottom: 20px;
}

.pricing-faq-item {
  border: 1px solid var(--line, var(--dt-border, #ececf1));
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--card-bg, var(--dt-card-bg, #ffffff));
}

.pricing-faq-item h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main, var(--dt-text, #111827));
  margin: 0 0 6px;
}

.pricing-faq-item p {
  font-size: 14px;
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .pricing-page {
    padding: 24px 16px 56px;
  }

  .pricing-reassurance {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
}

/* —— Mobile card density (≤640px, ~390px) —— */
@media (max-width: 640px) {
  body.pricing-doc {
    --pricing-card-pad-y: 14px;
    --pricing-card-pad-x: 14px;
    --pricing-card-gap: 10px;
  }

  .pricing-page {
    padding: 18px 14px 44px;
  }

  .pricing-page__hero {
    margin-bottom: 24px;
  }

  .pricing-page__hero h1 {
    font-size: clamp(22px, 6.2vw, 28px);
    margin-bottom: 10px;
  }

  .pricing-page__lead {
    font-size: 14px;
    line-height: 1.6;
  }

  .pricing-page__expect {
    font-size: 12px;
    margin-top: 8px;
  }

  body.pricing-doc .home-pricing-card__price {
    font-size: 26px;
    margin-bottom: 6px;
  }

  body.pricing-doc .home-pricing-card h3 {
    font-size: 14px;
  }

  body.pricing-doc .home-pricing-card p,
  body.pricing-doc .pricing-card__credits {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 6px;
  }

  body.pricing-doc .pricing-card__bonus {
    font-size: 11px;
    margin: 0 0 10px;
  }

  body.pricing-doc .home-pricing-card .home-btn {
    min-height: 38px;
    font-size: 13px;
  }

  body.pricing-doc .home-pricing-card--featured {
    box-shadow: none;
  }

  body.pricing-doc .home-pricing-card--featured .home-btn--primary {
    box-shadow: none !important;
  }

  body.pricing-doc .home-pricing-card--featured .home-btn--primary:hover {
    transform: none;
    box-shadow: none !important;
  }

  body.pricing-doc .home-pricing-card .home-btn--outline {
    min-height: 36px;
    font-weight: 500;
  }

  .pricing-page__grid {
    margin-bottom: 24px;
  }

  .pricing-usage {
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 10px;
  }

  .pricing-usage__title {
    font-size: 14px;
  }

  .pricing-usage__body,
  .pricing-usage__list {
    font-size: 13px;
  }

  .pricing-reassurance li {
    font-size: 11px;
  }

  .pricing-page__note {
    font-size: 12px;
    margin-bottom: 24px;
  }

  .pricing-faq-item {
    padding: 14px;
  }
}

html.site-unified-chrome.page-pricing[data-theme="dark"] body.pricing-doc .home-pricing-card .home-btn--outline,
html.site-unified-chrome.page-pricing.dark body.pricing-doc .home-pricing-card .home-btn--outline,
html.site-unified-chrome.has-v2-user-chrome[data-theme="dark"] body.pricing-doc .home-pricing-card .home-btn--outline,
html.site-unified-chrome.has-v2-user-chrome.dark body.pricing-doc .home-pricing-card .home-btn--outline {
  border-color: color-mix(in srgb, var(--line) 88%, transparent);
}

html.site-unified-chrome.page-pricing:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card .home-btn--outline,
html.site-unified-chrome.has-v2-user-chrome:not([data-theme="dark"]):not(.dark) body.pricing-doc .home-pricing-card .home-btn--outline {
  color: var(--text-sub, var(--dt-text-muted, #4b5563));
}