/*
 * Lingivo — Warm Productivity design system
 * Loaded after the legacy website/app styles so both experiences share one
 * coherent set of type, color, spacing, focus, and component decisions.
 */

:root {
  --brand-ink: #172033;
  --brand-ink-soft: #344054;
  --brand-muted: #667085;
  --brand-subtle: #8a94a6;
  --brand-canvas: #fbfaf7;
  --brand-surface: #ffffff;
  --brand-surface-soft: #f5f6fb;
  --brand-line: #e5e8f0;
  --brand-primary: #5367f6;
  --brand-primary-dark: #3f4fd0;
  --brand-primary-soft: #eef0ff;
  --brand-mint: #0f8f79;
  --brand-mint-soft: #e8f8f4;
  --brand-coral: #d85f50;
  --brand-coral-soft: #fff0ec;
  --brand-violet: #8b5cf6;
  --brand-violet-soft: #f3efff;
  --brand-amber: #a86700;
  --brand-amber-soft: #fff7dc;
  --brand-danger: #c94040;
  --brand-danger-soft: #fff0f0;
  --brand-radius-sm: 10px;
  --brand-radius: 16px;
  --brand-radius-lg: 22px;
  --brand-shadow-sm: 0 8px 24px rgba(35, 47, 79, .06);
  --brand-shadow: 0 18px 50px rgba(35, 47, 79, .1);
  --brand-font-display: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --brand-font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Existing modules consume these variables. */
  --ink: var(--brand-ink) !important;
  --muted: var(--brand-muted) !important;
  --line: var(--brand-line) !important;
  --paper: var(--brand-canvas) !important;
  --white: var(--brand-surface) !important;
  --navy: var(--brand-ink) !important;
  --tool-analyzer: #5571e8 !important;
  --tool-glossary: #0f8f79 !important;
  --tool-style: #8b5cf6 !important;
  --tool-translate: #d85f50 !important;
  --tool-qa: #a86700 !important;
  --brand-blue: var(--brand-primary) !important;
}

html { color-scheme: light; }

body,
button,
input,
select,
textarea {
  font-family: var(--brand-font-body) !important;
}

body {
  background: var(--brand-canvas) !important;
  color: var(--brand-ink) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
strong,
.logo,
.brand,
.button,
.site-header nav a,
.nav-item,
.modal h2,
.page-title h1,
.welcome-row h1,
.section-heading h2,
.tool-card h2,
.score-summary h3,
.faq-list summary {
  font-family: var(--brand-font-display) !important;
}

p,
li,
small,
label,
input,
select,
textarea {
  letter-spacing: -.01em;
}

button,
a,
summary,
input,
select,
textarea {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(83, 103, 246, .28) !important;
  outline-offset: 3px !important;
}

/* Shared brand */
.logo,
.brand {
  color: var(--brand-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.055em !important;
}

.logo em,
.brand em,
.brand > span:last-child > span,
.site-header .logo em,
.site-footer .logo em {
  color: var(--brand-primary) !important;
}

.eyebrow,
.section-kicker,
.modal-kicker,
.nav-label {
  color: var(--brand-primary) !important;
  font-family: var(--brand-font-display) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

.button,
.nav-cta,
.primary-button,
.run-button,
.project-card-action,
.filter.active,
.target-upload button,
.inline-download {
  min-height: 44px;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 12px !important;
  background: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(83, 103, 246, .18) !important;
}

.button:hover,
.nav-cta:hover,
.primary-button:hover,
.run-button:hover,
.project-card-action:hover {
  border-color: var(--brand-primary-dark) !important;
  background: var(--brand-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(83, 103, 246, .24) !important;
}

.secondary-button,
.text-button,
.tour-button,
.filter:not(.active) {
  color: var(--brand-ink) !important;
}

/* Marketing website */
.site-header {
  height: 72px !important;
  border-bottom: 1px solid rgba(229, 232, 240, .86) !important;
  background: rgba(251, 250, 247, .9) !important;
  box-shadow: 0 1px 0 rgba(23, 32, 51, .02) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

.site-header nav { gap: 30px !important; }
.site-header nav a { color: var(--brand-ink-soft) !important; font-size: 12px !important; }
.site-header nav a:not(.nav-cta):hover { color: var(--brand-primary) !important; }
.site-header .nav-cta { padding: 11px 17px !important; }

.hero {
  position: relative;
  max-width: 1200px !important;
  min-height: 600px !important;
  padding: 48px 26px 56px !important;
  grid-template-columns: minmax(470px, .88fr) minmax(0, 1.12fr) !important;
  gap: 42px !important;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  left: -260px;
  top: 70px;
  border-radius: 50%;
  background: rgba(255, 214, 154, .24);
  filter: blur(10px);
  pointer-events: none;
}

.trial-pill {
  padding: 6px 12px 6px 7px !important;
  border-color: #f0dfaa !important;
  background: #fffaf0 !important;
  color: var(--brand-ink-soft) !important;
  font-size: 10px !important;
  box-shadow: 0 5px 16px rgba(108, 82, 22, .05);
}

.trial-pill span {
  border: 0 !important;
  background: var(--brand-amber-soft) !important;
  color: #7b5605 !important;
}

.hero h1 {
  max-width: 590px;
  margin: 22px 0 18px !important;
  color: var(--brand-ink) !important;
  font-size: clamp(48px, 4.7vw, 62px) !important;
  line-height: .99 !important;
  letter-spacing: -.064em !important;
}

.hero h1 em {
  position: relative;
  color: var(--brand-primary) !important;
  font-style: normal;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -7px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-coral), #ffb067 48%, var(--brand-mint));
  opacity: .88;
}

.hero-answer {
  max-width: 555px !important;
  color: var(--brand-muted) !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
}

.hero-actions { gap: 18px !important; margin-top: 28px !important; }
.hero-actions .button { padding: 13px 20px !important; }
.text-link { color: var(--brand-ink) !important; font-size: 12px !important; }
.text-link:hover { color: var(--brand-primary) !important; }

.trust-list { gap: 22px !important; color: var(--brand-muted) !important; font-size: 10px !important; }
.trust-list li::before { color: var(--brand-mint) !important; }

.hero-image {
  position: relative;
  isolation: isolate;
}

.hero-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 2% 5% 8%;
  border-radius: 44% 56% 48% 52%;
  background: linear-gradient(145deg, rgba(83, 103, 246, .12), rgba(24, 169, 143, .12) 52%, rgba(249, 115, 98, .11));
  filter: blur(16px);
}

.hero-image img { background: transparent !important; filter: drop-shadow(0 22px 30px rgba(35, 47, 79, .09)); }

.proof-strip {
  border-color: var(--brand-line) !important;
  background: var(--brand-surface) !important;
  padding: 18px 24px !important;
}

.proof-strip > p { color: var(--brand-subtle) !important; }
.proof-strip strong { color: var(--brand-primary) !important; }
.proof-strip span { color: var(--brand-muted) !important; }

.role-jump-nav {
  top: 78px !important;
  margin-top: 8px !important;
  border-color: var(--brand-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--brand-shadow-sm) !important;
}

.role-jump-nav a {
  min-height: 36px !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--brand-ink-soft) !important;
  font-family: var(--brand-font-body) !important;
  font-size: 11px !important;
}

.role-jump-nav a:hover {
  border-color: transparent !important;
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary-dark) !important;
}

.section { max-width: 1140px !important; padding-top: 62px !important; padding-bottom: 62px !important; }
.section h2,
.lqa-copy h2,
.security-grid h2,
.final-cta h2,
.showcase-copy h2,
.page-hero h1 {
  color: inherit;
  font-size: clamp(32px, 3.5vw, 46px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.045em !important;
}

.section-lead { max-width: 720px !important; color: var(--brand-muted) !important; font-size: 16px !important; line-height: 1.65 !important; }

.role-adapt-visual,
.feature-card,
.answer-grid article,
.enterprise-grid article,
.evidence-grid article,
.steps article,
.price-card,
.compare-column,
.feedback-card,
.security-copy,
.credit-table,
.usage-table {
  border-color: var(--brand-line) !important;
  border-radius: var(--brand-radius-lg) !important;
  background: var(--brand-surface) !important;
  box-shadow: var(--brand-shadow-sm) !important;
}

.role-switch-column span,
.role-output-column article {
  border-color: var(--brand-line) !important;
  border-radius: 13px !important;
  background: var(--brand-surface) !important;
}

.role-switch-column .active-role {
  border-color: #cdd3ff !important;
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary-dark) !important;
}

.role-core-card {
  border-radius: 20px !important;
  background: linear-gradient(145deg, var(--brand-primary-dark), #485de0 62%, #5d72f7) !important;
  box-shadow: 0 18px 44px rgba(83, 103, 246, .24) !important;
}

.role-audience-grid article { border-radius: var(--brand-radius-lg) !important; }
.role-audience-grid article::before { width: 4px !important; }
.role-audience-grid article:nth-child(1)::before { background: var(--brand-violet) !important; }
.role-audience-grid article:nth-child(2)::before { background: var(--brand-primary) !important; }
.role-audience-grid article:nth-child(3)::before { background: var(--brand-coral) !important; }
.role-audience-grid span { border-color: transparent !important; background: var(--brand-surface-soft) !important; }
.role-audience-grid article:nth-child(1) span { color: var(--brand-violet) !important; background: var(--brand-violet-soft) !important; }
.role-audience-grid article:nth-child(2) span { color: var(--brand-primary) !important; background: var(--brand-primary-soft) !important; }
.role-audience-grid article:nth-child(3) span { color: var(--brand-coral) !important; background: var(--brand-coral-soft) !important; }
.role-audience-note { border-color: #d8dcff !important; background: var(--brand-primary-soft) !important; }
.compact-role-link a { color: var(--brand-primary-dark); font-weight: 800; text-decoration: none; }
.compact-role-link a:hover { text-decoration: underline; }

main#top .role-adapt-visual { margin-top: 26px !important; }
main#top .role-audience-grid,
main#top .feature-grid,
main#top .answer-grid,
main#top .enterprise-grid,
main#top .evidence-grid,
main#top .steps { margin-top: 24px !important; }
main#top .feature-card { min-height: 300px !important; }
main#top .role-audience-grid article { min-height: 235px !important; }

.feature-card,
.answer-grid article,
.enterprise-grid article,
.evidence-grid article,
.steps article,
.price-card,
.compare-column,
.feedback-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.feature-card:hover,
.answer-grid article:hover,
.enterprise-grid article:hover,
.evidence-grid article:hover,
.steps article:hover,
.price-card:hover {
  transform: translateY(-3px) !important;
  border-color: #d6daf1 !important;
  box-shadow: var(--brand-shadow) !important;
}

.feature-card { --tool-accent: var(--brand-primary); overflow: hidden !important; }
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--tool-accent);
}
.analyzer-tile { --tool-accent: var(--tool-analyzer); }
.glossary-tile { --tool-accent: var(--tool-glossary); }
.style-tile { --tool-accent: var(--tool-style); }
.translation-tile { --tool-accent: var(--tool-translate); }
.lqa-tile { --tool-accent: var(--tool-qa); }
.feature-icon {
  border: 0 !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--tool-accent) 12%, #fff) !important;
  color: var(--tool-accent) !important;
}
.feature-card li::before,
.price-card li::before { color: var(--brand-mint) !important; }

.product-showcase { max-width: 1140px !important; padding-top: 48px !important; padding-bottom: 40px !important; }
.hero-product { border-color: var(--brand-line) !important; border-radius: 20px !important; box-shadow: var(--brand-shadow) !important; }
.preview-feature { background: linear-gradient(135deg, var(--brand-primary-dark), #5c71f7) !important; }
.pv-yellow { background: var(--brand-amber-soft) !important; }
.pv-lavender { background: var(--brand-violet-soft) !important; }
.pv-coral { background: var(--brand-coral-soft) !important; }
.pv-teal { background: var(--brand-mint-soft) !important; color: var(--brand-ink) !important; }

.lqa-section,
.outcomes,
.final-cta {
  color: #fff !important;
  background: #1c2640 !important;
}

.lqa-section { background: linear-gradient(135deg, #1c2640, #263667 72%, #35506d) !important; }
.scorecard { border-color: rgba(255,255,255,.14) !important; border-radius: var(--brand-radius-lg) !important; }
.score-circle { border-color: #8c9aff !important; }
.score-line i b { background: linear-gradient(90deg, var(--brand-primary), #7d8cff) !important; }

.steps article > span {
  border-color: transparent !important;
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary-dark) !important;
  box-shadow: none !important;
}

.security-section,
.evidence-section,
.usage-section { background: #f4f5fb !important; }
.security-panel { background: linear-gradient(145deg, #25304d, #303e6c) !important; border-radius: var(--brand-radius-lg) !important; }
.security-badges span::before { background: var(--brand-mint) !important; }

.faq-list details { border-color: var(--brand-line) !important; }
.faq-list summary { color: var(--brand-ink) !important; font-size: 15px !important; }
.faq-list summary::after { color: var(--brand-primary) !important; }
.faq-list details p { color: var(--brand-muted) !important; font-size: 13px !important; }
.faq-more-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 18px;
  color: var(--brand-primary-dark);
  font-family: var(--brand-font-display);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.faq-more-link:hover { text-decoration: underline; }

/* Short homepage trust strip */
.home-trust-section {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 36px;
  align-items: center;
}
.home-trust-copy > p:not(.eyebrow) { margin: 14px 0 16px; color: var(--brand-muted); font-size: 14px; line-height: 1.65; }
.home-trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-trust-grid article {
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  background: var(--brand-surface);
  box-shadow: var(--brand-shadow-sm);
}
.home-trust-grid article > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
  font-weight: 900;
}
.home-trust-grid strong,
.home-trust-grid small { display: block; }
.home-trust-grid strong { color: var(--brand-ink); font-size: 12px; }
.home-trust-grid small { margin-top: 4px; color: var(--brand-muted); font-size: 10px; line-height: 1.45; }

/* Why Lingivo evidence and detailed role content */
.detailed-role-grid article { min-height: 330px !important; }
.detailed-role-grid li { line-height: 1.45; }
.lqa-detail-link { color: #fff !important; opacity: .82; }
.case-study-roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.case-study-roadmap article {
  padding: 18px;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  background: var(--brand-surface);
  box-shadow: var(--brand-shadow-sm);
}
.case-study-roadmap span,
.case-study-roadmap strong { display: block; }
.case-study-roadmap span { color: var(--brand-primary); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.case-study-roadmap strong { margin-top: 12px; color: var(--brand-ink); font-size: 13px; }
.case-study-roadmap p { margin: 7px 0 0; color: var(--brand-muted); font-size: 11px; line-height: 1.55; }

.final-cta {
  position: relative;
  overflow: hidden;
  padding-top: 52px !important;
  padding-bottom: 52px !important;
  background: linear-gradient(130deg, #4356db 0%, #5367f6 55%, #6f7df7 100%) !important;
}
.final-cta::before,
.final-cta::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.final-cta::before { left: -100px; top: -150px; background: rgba(255, 184, 103, .22); }
.final-cta::after { right: -90px; bottom: -160px; background: rgba(24, 169, 143, .22); }
.final-cta > * { position: relative; z-index: 1; }
.final-cta .button { border-color: #fff !important; background: #fff !important; color: var(--brand-primary-dark) !important; box-shadow: 0 12px 28px rgba(24, 32, 69, .18) !important; }
.home-final-cta {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 8px;
  border-radius: var(--brand-radius-lg);
}

.site-footer { border-top: 1px solid var(--brand-line) !important; }
.site-footer > div > a:not(.logo),
.site-footer > div > p,
.copyright { color: var(--brand-muted) !important; }

/* Secondary website pages */
.page-hero {
  background: radial-gradient(circle at 50% 0, rgba(83, 103, 246, .13), rgba(255, 255, 255, 0) 55%), var(--brand-canvas) !important;
}
.page-hero h1 em { color: var(--brand-primary) !important; }
.compare-column.after { border-color: #cdd3ff !important; background: #f7f8ff !important; }
.compare-column.after header span,
.best-badge { background: var(--brand-primary-soft) !important; color: var(--brand-primary-dark) !important; }
.pricing-grid .price-card.featured { border-color: var(--brand-primary) !important; box-shadow: 0 20px 46px rgba(83, 103, 246, .13) !important; }
.pricing-grid .price-card .button.secondary-price { border-color: var(--brand-line) !important; background: var(--brand-surface-soft) !important; color: var(--brand-ink) !important; box-shadow: none !important; }
.pricing-grid .price-card .button.secondary-price:hover { border-color: #cdd3ff !important; background: var(--brand-primary-soft) !important; color: var(--brand-primary-dark) !important; }

/* Product application */
.app-shell {
  grid-template-columns: 252px minmax(0, 1fr) !important;
  background: var(--brand-canvas) !important;
}
.sidebar {
  width: 252px !important;
  border-right: 1px solid var(--brand-line) !important;
  background: rgba(255, 255, 255, .96) !important;
  padding: 26px 16px 18px !important;
  box-shadow: 8px 0 30px rgba(35, 47, 79, .025);
}
.main {
  grid-column: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}
.brand { font-size: 20px !important; }

.side-nav { margin-top: 28px !important; }
.nav-label { margin: 22px 12px 9px !important; color: var(--brand-subtle) !important; }
.nav-item {
  min-height: 42px !important;
  margin: 2px 0 !important;
  border-radius: 11px !important;
  color: var(--brand-muted) !important;
  font-family: var(--brand-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.nav-item .icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: transparent;
  color: var(--brand-subtle);
}
.nav-item:hover { background: #f7f8fc !important; color: var(--brand-ink) !important; }
.nav-item.active {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary-dark) !important;
  box-shadow: none !important;
}
.nav-item.active::before { content: none !important; }
.nav-item.active .icon { background: rgba(83,103,246,.1); color: var(--brand-primary); }
.sidebar-bottom { border-top-color: var(--brand-line) !important; }

.topbar {
  height: 68px !important;
  border-bottom: 1px solid var(--brand-line) !important;
  background: rgba(251, 250, 247, .86) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
}
.secure-note { color: var(--brand-muted) !important; font-size: 10px !important; }
.secure-note span { color: var(--brand-mint) !important; }
.icon-button {
  width: 38px !important;
  height: 38px !important;
  border-color: var(--brand-line) !important;
  border-radius: 11px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-ink-soft) !important;
}
.icon-button:hover { border-color: #cdd3ff !important; background: var(--brand-primary-soft) !important; color: var(--brand-primary) !important; }

.content { width: 100% !important; max-width: 1240px !important; padding: 46px 38px 72px !important; }
.welcome-row { margin-bottom: 30px !important; }
.welcome-row h1,
.page-title h1 {
  color: var(--brand-ink) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  letter-spacing: -.045em !important;
}
.welcome-row p:last-child,
.page-title p:last-child { color: var(--brand-muted) !important; font-size: 14px !important; }

.usage-summary { gap: 14px !important; margin: -6px 0 26px !important; }
.usage-summary article {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 18px !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--brand-radius) !important;
  background: var(--brand-surface) !important;
  box-shadow: var(--brand-shadow-sm) !important;
}
.usage-summary article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--summary-accent, var(--brand-primary));
}
.usage-summary article:nth-child(2) { --summary-accent: var(--brand-mint); }
.usage-summary article:nth-child(3) { --summary-accent: var(--brand-coral); }
.usage-summary article:nth-child(4) { --summary-accent: var(--brand-violet); }
.usage-summary small,
.usage-summary span { color: var(--brand-muted) !important; font-size: 10px !important; }
.usage-summary strong { color: var(--brand-ink) !important; font-family: var(--brand-font-display) !important; font-size: 25px !important; }

.role-dashboard { grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr) !important; gap: 18px !important; }
.role-dashboard-copy,
.role-dashboard-path {
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--brand-radius-lg) !important;
  background: var(--brand-surface) !important;
  box-shadow: var(--brand-shadow-sm) !important;
}
.role-dashboard-copy {
  position: relative;
  overflow: hidden;
  padding: 30px !important;
  color: var(--brand-ink) !important;
  background: linear-gradient(145deg, #f1f3ff 0%, #fff 68%) !important;
}
.role-dashboard-copy::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  bottom: -100px;
  border-radius: 50%;
  background: rgba(249, 115, 98, .12);
}
.role-dashboard-copy h2 { color: var(--brand-ink) !important; font-size: 26px !important; }
.role-dashboard-copy p,
.role-dashboard-copy small { color: var(--brand-muted) !important; font-size: 12px !important; }
.role-dashboard-path { padding: 22px !important; }
.role-path-head span { border-color: #d8dcff !important; background: var(--brand-primary-soft) !important; color: var(--brand-primary-dark) !important; }
.role-path-head button { color: var(--brand-primary) !important; }
.role-step {
  border-color: var(--brand-line) !important;
  border-radius: 13px !important;
  background: #fafbfe !important;
}
.role-step:hover,
.role-step:focus-visible { border-color: #cdd3ff !important; background: var(--brand-primary-soft) !important; }
.role-step i { background: var(--brand-primary) !important; }
.role-step b { color: var(--brand-ink) !important; }
.role-step small { color: var(--brand-muted) !important; }

.tool-command-center {
  padding: 24px !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: var(--brand-radius-lg) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: var(--brand-shadow-sm) !important;
}
.tool-section-head { margin-bottom: 18px !important; }
.tool-section-head h2 { color: var(--brand-ink) !important; font-size: 23px !important; }
.tool-section-head > p { color: var(--brand-muted) !important; }
.tool-grid { gap: 16px !important; }
.tool-card {
  min-height: 236px !important;
  padding: 22px !important;
  border: 1px solid var(--brand-line) !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 108% 112%, color-mix(in srgb, var(--tool-accent) 9%, transparent) 0 72px, transparent 73px), var(--brand-surface) !important;
  color: var(--brand-ink) !important;
  box-shadow: 0 8px 26px rgba(35, 47, 79, .055) !important;
}
.tool-card::before {
  inset: 0 0 auto !important;
  width: auto !important;
  height: 4px !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--tool-accent) !important;
}
.tool-card.translate-card::before {
  inset: 0 0 auto !important;
  width: auto !important;
  height: 4px !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--tool-translate) !important;
}
.tool-card:hover { transform: translateY(-3px) !important; border-color: color-mix(in srgb, var(--tool-accent) 35%, var(--brand-line)) !important; box-shadow: var(--brand-shadow) !important; }
.tool-card h2 { color: var(--brand-ink) !important; font-size: 18px !important; }
.tool-card p,
.tool-card[data-tool] p,
.tool-footer > span,
.translate-meta > span { color: var(--brand-muted) !important; font-size: 11px !important; }
.tool-card .tool-icon,
.tool-card[data-tool] .tool-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--tool-accent) 12%, #fff) !important;
  color: var(--tool-accent) !important;
  font-size: 20px !important;
}
.tool-card .pill,
.tool-card[data-tool] .pill { border-color: color-mix(in srgb, var(--tool-accent) 24%, #fff) !important; background: color-mix(in srgb, var(--tool-accent) 9%, #fff) !important; color: var(--tool-accent) !important; }
.tool-footer button,
.tool-card[data-tool] .tool-footer button,
.tool-card[data-tool="translate"] .translate-meta button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid color-mix(in srgb, var(--tool-accent) 24%, #fff) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--tool-accent) 9%, #fff) !important;
  color: var(--tool-accent) !important;
}
.tool-footer button:hover,
.tool-card[data-tool="translate"] .translate-meta button:hover { border-color: var(--tool-accent) !important; background: var(--tool-accent) !important; color: #fff !important; }
.translate-card { padding-left: 22px !important; }

.recent-section { margin-top: 34px !important; }
.project-table,
.project-card {
  border-color: var(--brand-line) !important;
  border-radius: var(--brand-radius) !important;
  background: var(--brand-surface) !important;
  box-shadow: var(--brand-shadow-sm) !important;
}
.table-head { background: #f7f8fc !important; color: var(--brand-subtle) !important; }

.modal {
  border: 1px solid rgba(229, 232, 240, .9) !important;
  border-radius: var(--brand-radius-lg) !important;
  background: var(--brand-surface) !important;
  box-shadow: 0 28px 80px rgba(23, 32, 51, .22) !important;
}
.modal-backdrop { background: rgba(29, 38, 62, .46) !important; backdrop-filter: blur(8px) !important; }
.modal-close { border-radius: 10px !important; background: var(--brand-surface-soft) !important; color: var(--brand-ink) !important; }
.auth-form input,
input,
select,
textarea {
  min-height: 44px;
  border-color: var(--brand-line) !important;
  border-radius: 11px !important;
  background: var(--brand-surface) !important;
  color: var(--brand-ink) !important;
}
.auth-form input:focus,
input:focus,
select:focus,
textarea:focus { border-color: #aeb7ff !important; box-shadow: 0 0 0 4px rgba(83, 103, 246, .09) !important; }

.result-sequence-section,
.result-panel,
.scorecard-results,
.score-hero,
.insight,
.feedback-panel,
.upload-zone,
.selected-file,
.target-upload,
.reference-upload,
.reference-grid label,
.translation-pane,
.lqa-options,
.plans article {
  border-color: var(--brand-line) !important;
  border-radius: var(--brand-radius) !important;
  background: var(--brand-surface) !important;
}
.result-sequence-heading { background: #f7f8fc !important; }
.result-sequence-heading > span { background: var(--brand-primary) !important; }
.toast { border-radius: 14px !important; background: var(--brand-ink) !important; }

.trial-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 20px 0 4px;
  padding: 15px 17px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background: #f7f8fc;
  text-align: left;
}
.trial-plan-summary > div { flex: 0 0 auto; }
.trial-plan-summary strong,
.trial-plan-summary span { display: block; }
.trial-plan-summary strong { color: var(--brand-ink); font-size: 14px; }
.trial-plan-summary span { margin-top: 3px; color: var(--brand-primary); font-size: 11px; font-weight: 800; }
.trial-plan-summary p { max-width: 560px; margin: 0; color: var(--brand-muted); font-size: 11px; line-height: 1.55; }

@media (max-width: 640px) {
  .trial-plan-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* In-page profile and workspace settings */
.settings-page .page-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
}
.settings-page-card {
  padding: 24px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  background: var(--brand-surface);
  box-shadow: var(--brand-shadow-sm);
}
.settings-page-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--brand-line);
}
.settings-page-card-head h2,
.settings-section-heading h2 {
  margin: 2px 0 0;
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.settings-page-card-head > span {
  max-width: 330px;
  color: var(--brand-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}
.settings-page .settings-grid { margin: 20px 0 4px !important; }
.settings-page .settings-grid label,
.settings-page .team-field { color: var(--brand-ink-soft) !important; font-size: 11px !important; }
.settings-page .settings-grid label small { color: var(--brand-muted) !important; }
.settings-page .settings-actions { margin-top: 20px !important; }
.settings-page .settings-actions .primary-button:disabled,
.settings-page .settings-actions .primary-button[data-form-state="pristine"] {
  border-color: #D9DEE7 !important;
  background: #E9ECF1 !important;
  color: #8B93A1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none;
}
.workspace-identity-grid { grid-template-columns: minmax(260px, 520px) !important; }
.workspace-settings-card .team-field { margin-top: 18px !important; }
.workspace-settings-card .team-field textarea { min-height: 78px !important; max-height: 220px; }
.settings-page .invite-panel {
  margin-top: 18px !important;
  padding: 16px !important;
  border-color: var(--brand-line) !important;
  border-radius: 14px !important;
  background: #f8f9fd !important;
}
.settings-page .invite-panel.permission-limited { border-style: dashed !important; }
.settings-section-heading { margin: 34px 0 15px; }
.settings-section-heading .eyebrow { margin-bottom: 6px !important; }
.settings-page .admin-customer-card { border-color: var(--brand-line) !important; box-shadow: var(--brand-shadow-sm) !important; }
.admin-collapsible-section.is-collapsed .admin-collapsible-content { display: none !important; }
.admin-collapsible-section.is-collapsed > header,
.admin-collapsible-section.is-collapsed > .settings-page-card-head { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom-color: transparent !important; }
.admin-collapsible-section:not(.is-collapsed) {
  border-color: #D8DEE8 !important;
  background: #FCFDFE !important;
}
.admin-customer-card > header {
  align-items: center !important;
  margin-bottom: 12px !important;
}
.admin-card-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}
.admin-card-header-actions > button:not(.admin-section-toggle) {
  min-height: 32px;
  padding: 7px 10px !important;
}
.admin-section-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  margin-left: auto;
  border: 1px solid var(--brand-line) !important;
  border-radius: 9px !important;
  background: var(--brand-surface) !important;
  padding: 7px 10px !important;
  color: var(--brand-ink-soft) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
.admin-section-toggle b { font-size: 13px; line-height: 1; transition: transform .18s ease; }
.admin-section-toggle[aria-expanded="true"] b { transform: rotate(180deg); }
.billing-addon-note {
  margin: 14px 0 0;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: var(--brand-surface-soft);
  padding: 10px 12px;
  color: var(--brand-muted);
  font-size: 10px;
  line-height: 1.45;
}

/* Expanded Admin dashboard: compact metrics without breaking native grids. */
.admin-health-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.admin-health-grid article {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 58px;
  border: 1px solid #E3E8EF;
  border-radius: 10px !important;
  background: #F8FAFC !important;
  padding: 9px 10px !important;
}
.admin-health-grid strong {
  font-size: 19px !important;
  line-height: 1 !important;
}
.admin-health-grid span {
  margin-top: 0 !important;
  font-size: 8px !important;
  line-height: 1.3 !important;
}
.credit-log-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.credit-log-summary article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  min-height: 58px;
  padding: 9px 11px !important;
}
.credit-log-summary small { grid-column: 1; grid-row: 1; }
.credit-log-summary span { grid-column: 1; grid-row: 2; }
.credit-log-summary strong {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.admin-quality-summary,
.admin-team-list,
.admin-activity-list,
.admin-data-controls,
.credit-log-toolbar {
  display: grid !important;
}
.admin-quality-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px !important;
}
.admin-quality-score strong { font-size: 21px !important; }
.admin-quality-score span { margin-top: 0 !important; }
.admin-team-list {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 3px;
}
.admin-team-list article,
.admin-activity-list article,
.admin-data-controls article { min-height: 52px; }

/* Analyze result factors: four compact signals on one scan line. */
.factors-section .result-evidence-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.factors-section .result-evidence-grid article {
  min-height: 68px !important;
  padding: 10px !important;
}
.factors-section .result-evidence-grid strong {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
.factors-section .result-evidence-grid span:empty { display: none !important; }

@media (max-width: 720px) {
  .factors-section .result-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-card-header-actions { flex-wrap: wrap; }
  .credit-log-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 430px) {
  .factors-section .result-evidence-grid { grid-template-columns: 1fr !important; }
  .admin-health-grid,
  .credit-log-summary { grid-template-columns: 1fr !important; }
}

@media (max-width: 980px) {
  .hero { min-height: 0 !important; grid-template-columns: 1fr !important; }
  .hero-copy { text-align: center; }
  .hero-answer { margin-inline: auto; }
  .hero-actions,
  .trust-list { justify-content: center; }
  .hero-image { max-width: 760px; margin-inline: auto !important; }
  .role-dashboard { grid-template-columns: 1fr !important; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .content { padding-inline: 28px !important; }
  .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-dashboard { grid-template-columns: 1fr !important; }
  .role-dashboard-copy,
  .role-dashboard-path { min-height: auto !important; }
  .tool-grid,
  .tool-grid.balance-last-row,
  .tool-grid.three-card-row,
  .tool-grid.business-simple-tools,
  .tool-grid.business-simple-tools.three-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .tool-grid.balance-last-row .tool-card,
  .tool-grid.balance-last-row .tool-card.balance-wide,
  .tool-grid.three-card-row .tool-card,
  .tool-grid.business-simple-tools .tool-card {
    grid-column: auto !important;
  }
}

@media (max-width: 900px) {
  .app-shell { display: block !important; }
  .sidebar {
    width: min(84vw, 292px) !important;
    transform: translateX(-100%) !important;
    transition: transform .22s ease !important;
    box-shadow: 12px 0 34px rgba(23, 32, 51, .14) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .main { grid-column: auto !important; width: 100% !important; margin-left: 0 !important; }
  .mobile-menu { display: block !important; }
  .secure-note { display: none !important; }
  .top-actions { right: 16px !important; }
  .content { padding-inline: 24px !important; }
  .settings-page-card-head { display: block; }
  .settings-page-card-head > span { display: block; margin-top: 8px; max-width: none; text-align: left; }
  .home-trust-section { grid-template-columns: 1fr; gap: 24px; }
  .case-study-roadmap { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-header { height: 64px !important; }
  .hero { padding: 38px 18px 48px !important; }
  .hero h1 { font-size: clamp(39px, 12vw, 54px) !important; }
  .hero-answer { font-size: 15px !important; }
  .hero-actions { align-items: stretch !important; }
  .hero-actions .button,
  .hero-actions .text-link { width: 100%; justify-content: center; text-align: center; }
  .trust-list { gap: 10px 16px !important; }
  .role-jump-nav { top: 64px !important; border-radius: 0 !important; }
  .section { padding: 56px 18px !important; }
  .section-lead { font-size: 14px !important; }

  .sidebar { width: min(84vw, 292px) !important; }
  .content { padding: 30px 18px 56px !important; }
  .topbar { height: 62px !important; }
  .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .role-dashboard-copy,
  .role-dashboard-path,
  .tool-command-center { padding: 18px !important; }
  .tool-grid { grid-template-columns: 1fr !important; }
  .tool-card { min-height: 205px !important; }
  .settings-page .page-title { display: block !important; }
  .settings-page .page-title > button { width: 100%; margin-top: 16px; }
  .settings-page-card { padding: 18px; }
  .home-trust-grid { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .usage-summary { grid-template-columns: 1fr !important; }
  .usage-summary article { min-height: 98px; }
  .role-dashboard-copy h2 { font-size: 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Plan-aware billing and workspace governance */
.pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: 1180px !important; }
.price-card { min-width: 0; }
.custom-credit-cta { max-width: 780px; margin: 18px auto 0; padding: 18px 20px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-md); background: linear-gradient(135deg, var(--brand-surface), var(--brand-primary-soft)); display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; box-shadow: var(--brand-shadow-sm); }
.custom-credit-cta strong,.custom-credit-cta span { display: block; }
.custom-credit-cta strong { color: var(--brand-ink); font-family: var(--brand-display); font-size: 16px; }
.custom-credit-cta span { margin-top: 4px; color: var(--brand-muted); font-size: 12px; line-height: 1.55; }
.custom-credit-cta .button { flex: 0 0 auto; margin: 0 !important; }
.dashboard-credit-alert,.billing-alert { border: 1px solid #f2c36b; border-radius: var(--brand-radius-md); background: #fff8e8; color: #6d4710; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; margin: 0 0 20px; }
.dashboard-credit-alert div,.billing-alert div { display: grid; gap: 3px; }
.dashboard-credit-alert strong,.billing-alert strong { color: #513407; font-size: 13px; }
.dashboard-credit-alert span,.billing-alert span { font-size: 11px; line-height: 1.45; }
.dashboard-credit-alert button,.billing-alert button { border: 0; border-radius: 9px; background: #513407; color: white; padding: 9px 12px; font-weight: 750; white-space: nowrap; }
.billing-overview-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; margin-bottom: 18px; }
.billing-plan-card,.billing-balance-card { border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: var(--brand-surface); padding: 24px; box-shadow: var(--brand-shadow-sm); }
.billing-plan-card { background: linear-gradient(145deg, #fff, var(--brand-primary-soft)); }
.billing-balance-card { background: linear-gradient(145deg, #fff, var(--brand-mint-soft)); }
.billing-card-label { display: block; color: var(--brand-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.billing-plan-name { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 13px 0 7px; }
.billing-plan-name h2 { margin: 0; font-size: 28px; }
.billing-plan-name > strong { color: var(--brand-primary-dark); font-family: var(--brand-display); font-size: 16px; }
.billing-plan-card > p,.billing-balance-card > p { color: var(--brand-muted); font-size: 12px; line-height: 1.55; }
.billing-meta-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(79,94,125,.12); font-size: 11px; }
.billing-meta-row span { color: var(--brand-muted); }
.billing-meta-row strong { text-transform: capitalize; }
.billing-credit-breakdown { margin-top: 14px; border-bottom: 1px solid rgba(79,94,125,.12); }
.billing-credit-breakdown .billing-meta-row { padding: 9px 0; }
.billing-credit-breakdown .billing-meta-row strong { font-variant-numeric: tabular-nums; }
.billing-credit-breakdown .billing-expired-row span,
.billing-credit-breakdown .billing-expired-row strong { color: var(--brand-muted); }
.billing-credit-number { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 14px; }
.billing-credit-number strong { font-family: var(--brand-display); font-size: 38px; line-height: 1; letter-spacing: -.04em; }
.billing-credit-number span { color: var(--brand-muted); font-size: 11px; }
.billing-balance-card .secondary-button { margin-top: 12px; }
.billing-actions-card,.billing-invoices-card { margin-top: 18px; }
.billing-plan-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.billing-addon-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.billing-plan-options article,.billing-addon-options article { min-width: 0; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-md); background: var(--brand-surface-soft); padding: 17px; display: flex; flex-direction: column; gap: 7px; }
.billing-plan-options article.current { border-color: #c9d0ff; background: var(--brand-primary-soft); }
.billing-plan-options small,.billing-addon-options small { color: var(--brand-muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.billing-plan-options h3,.billing-addon-options h3 { margin: 0; font-size: 16px; }
.billing-plan-options article > strong,.billing-addon-options article > strong { font-family: var(--brand-display); font-size: 21px; }
.billing-plan-options article > strong span { color: var(--brand-muted); font-family: var(--brand-body); font-size: 9px; }
.billing-plan-options p,.billing-addon-options p { flex: 1; margin: 0; color: var(--brand-muted); font-size: 10px; line-height: 1.5; }
.billing-plan-options button,.billing-addon-options button,.billing-custom-credits a { margin-top: 8px; border: 0; border-radius: 9px; background: var(--brand-ink); color: white; padding: 10px; text-align: center; font-size: 10px; font-weight: 750; text-decoration: none; }
.billing-plan-options button:disabled { background: #d9dce5; color: #666d7c; cursor: default; }
.billing-custom-credits { border-style: dashed !important; background: #fff !important; }
.billing-invoice-list { margin-top: 17px; }
.billing-invoice-list > article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--brand-line); }
.billing-invoice-list > article:first-child { border-top: 0; }
.billing-invoice-list article > div:first-child { display: grid; gap: 3px; }
.billing-invoice-list article span { color: var(--brand-muted); font-size: 10px; text-transform: capitalize; }
.billing-invoice-list article > b { font-size: 12px; }
.invoice-actions { display: flex; gap: 8px; }
.invoice-actions a { border: 1px solid var(--brand-line); border-radius: 8px; color: var(--brand-ink); padding: 7px 9px; font-size: 9px; font-weight: 750; text-decoration: none; }
.billing-empty { display: grid; gap: 5px; padding: 24px 0; text-align: center; color: var(--brand-muted); }
.team-role-select { max-width: 150px; border: 1px solid var(--brand-line); border-radius: 8px; background: white; padding: 7px 9px; color: var(--brand-ink); font-size: 9px; font-weight: 700; }
@media (max-width: 1050px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .billing-addon-options { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .pricing-grid,.billing-overview-grid,.billing-plan-options,.billing-addon-options { grid-template-columns: 1fr !important; } .custom-credit-cta,.dashboard-credit-alert,.billing-alert { align-items: stretch; flex-direction: column; } .custom-credit-cta .button,.dashboard-credit-alert button,.billing-alert button { width: 100%; } .billing-invoice-list > article { grid-template-columns: 1fr auto; gap: 10px; } .invoice-actions { grid-column: 1 / -1; } }

/* Public website release review — scoped so the application can be audited
   independently during the next pass. */
body.marketing-page,
body.marketing-page button,
body.marketing-page input,
body.marketing-page select,
body.marketing-page textarea {
  font-family: var(--brand-font-body) !important;
}

body.marketing-page h1,
body.marketing-page h2,
body.marketing-page h3,
body.marketing-page strong,
body.marketing-page .logo,
body.marketing-page .button,
body.marketing-page .site-header nav a,
body.marketing-page .eyebrow,
body.marketing-page .section-kicker,
body.marketing-page .faq-list summary,
body.marketing-page .tour-button {
  font-family: var(--brand-font-display) !important;
}

body.marketing-page h1,
body.marketing-page h2,
body.marketing-page h3 {
  text-wrap: balance;
}

body.marketing-page p,
body.marketing-page li,
body.marketing-page small,
body.marketing-page a,
body.marketing-page summary {
  overflow-wrap: break-word;
}

body.marketing-page .site-header nav a[aria-current="page"] {
  color: var(--brand-ink) !important;
  font-weight: 700 !important;
}

body.marketing-page .site-header nav a:not(.nav-cta),
body.marketing-page .text-link,
body.marketing-page .faq-more-link,
body.marketing-page .card-actions a,
body.marketing-page .tour-button,
body.marketing-page .faq-list summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

body.marketing-page .faq-list summary {
  width: 100%;
}

body.marketing-page .menu-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--brand-ink);
  cursor: pointer;
  line-height: 1;
}

body.marketing-page .menu-button:hover,
body.marketing-page .menu-button[aria-expanded="true"] {
  border-color: var(--brand-line);
  background: var(--brand-surface-soft);
}

body.marketing-page .role-jump-nav {
  top: 72px !important;
}

body.marketing-page #comparison,
body.marketing-page #roles,
body.marketing-page #buyer-questions,
body.marketing-page #lqa-details,
body.marketing-page #enterprise,
body.marketing-page #languages,
body.marketing-page #security-details,
body.marketing-page #buyer-faq {
  scroll-margin-top: 136px;
}

@media (min-width: 621px) {
  body.marketing-page .menu-button {
    display: none !important;
  }
}

@media (max-width: 620px) {
  body.marketing-page .menu-button {
    display: inline-flex !important;
    margin-left: auto;
  }

  body.marketing-page .site-header.open nav {
    top: 64px !important;
    left: 12px !important;
    right: 12px !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 12px !important;
  }

  body.marketing-page .site-header.open nav a {
    width: 100%;
    min-height: 44px;
    padding: 10px 6px;
  }

  body.marketing-page .site-header.open nav .nav-cta {
    margin-top: 4px;
  }

  body.marketing-page .role-jump-nav {
    top: 64px !important;
  }

  body.marketing-page #comparison,
  body.marketing-page #roles,
  body.marketing-page #buyer-questions,
  body.marketing-page #lqa-details,
  body.marketing-page #enterprise,
  body.marketing-page #languages,
  body.marketing-page #security-details,
  body.marketing-page #buyer-faq {
    scroll-margin-top: 116px;
  }

  body.marketing-page .site-footer > div > a:not(.logo) {
    min-height: 40px;
    padding-block: 7px;
  }
}

/* Decision metrics: every circular score is high-is-good. Risk and difficulty
   remain separately labeled negative metrics in the result factors. */
.score-ring.score-tone-good { background: conic-gradient(#2E9B62 calc(var(--score) * 1%), #E4E9E6 0) !important; }
.score-ring.score-tone-caution { background: conic-gradient(#D79217 calc(var(--score) * 1%), #EEE9DE 0) !important; }
.score-ring.score-tone-risk { background: conic-gradient(#C74848 calc(var(--score) * 1%), #F0E4E4 0) !important; }
.score-ring.score-tone-neutral { background: conic-gradient(var(--brand-primary) calc(var(--score) * 1%), #E5E7EB 0) !important; }
.score-ring small { max-width: 62px; margin: 2px auto 0; line-height: 1.1; letter-spacing: .04em; }
.score-guide-intro { margin-top: 18px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-md); background: linear-gradient(135deg, var(--brand-primary-soft), var(--brand-surface)); padding: 18px 20px; }
.score-guide-intro span,.score-guide-intro strong,.score-guide-intro p { display: block; }
.score-guide-intro span { color: var(--brand-primary-dark); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.score-guide-intro strong { margin-top: 6px; color: var(--brand-ink); font-family: var(--brand-display); font-size: 16px; }
.score-guide-intro p { max-width: 760px; margin: 6px 0 0; color: var(--brand-muted); font-size: 11px; line-height: 1.6; }
.score-guide-list { margin-top: 12px; }
.score-guide-list article { border-left: 3px solid var(--brand-primary) !important; }
.score-guide-list article span b { color: var(--brand-ink); font-weight: 800; }