/* Lingivo SaaS design system — final presentation layer */
:root {
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, sans-serif;
  --saas-ink: #2a2118;
  --saas-heading: #2a2118;
  --saas-muted: #74695d;
  --saas-subtle: #9a8e80;
  --saas-bg: #fdf8f0;
  --saas-warm: #fdf8f0;
  --saas-surface: #ffffff;
  --saas-surface-soft: #faf4ea;
  --saas-line: #ded2c1;
  --saas-line-strong: #cfc2af;
  --saas-primary: #c05621;
  --saas-primary-dark: #a94718;
  --saas-primary-soft: #f9e9de;
  --saas-teal: #2f5d3a;
  --saas-teal-soft: #eaf1e8;
  --saas-amber: #a66a22;
  --saas-amber-soft: #f7ecdd;
  --saas-danger: #a33a2b;
  --saas-danger-soft: #f7e5df;
  --saas-radius-sm: 10px;
  --saas-radius: 14px;
  --saas-radius-lg: 20px;
  --saas-shadow-xs: 0 1px 2px rgba(42, 33, 24, .04);
  --saas-shadow-sm: 0 8px 22px rgba(42, 33, 24, .07);
  --saas-shadow-md: 0 18px 44px rgba(42, 33, 24, .11);
  --saas-ring: 0 0 0 4px rgba(192, 86, 33, .18);
}

html { font-size: 16px; }
body {
  color: var(--saas-ink);
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: var(--font-sans) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) !important; }
a, button, input, select, textarea { transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--saas-ring);
}

/* Public website */
.marketing-page {
  --ink: var(--saas-ink);
  --muted: var(--saas-muted);
  --paper: var(--saas-warm);
  --white: var(--saas-surface);
  --line: var(--saas-line);
  --navy: var(--saas-heading);
  background: var(--saas-warm);
  color: var(--saas-ink);
  font-size: 15px;
}
.marketing-page .site-header {
  width: min(100%, 1240px);
  max-width: none;
  height: 76px;
  padding: 0 28px;
  gap: 36px;
  border-bottom: 1px solid rgba(228, 231, 236, .9);
  background: rgba(251, 250, 247, .9);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 30;
}
.marketing-page .logo {
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 750 !important;
  letter-spacing: -.65px !important;
}
.marketing-page .logo-mark { width: 34px !important; height: 34px !important; margin-right: 10px !important; }
.marketing-page .site-header nav { gap: 8px; }
.marketing-page .site-header nav > a,
.marketing-page .login-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 10px;
  color: #62584d;
  font-size: 13px;
  font-weight: 600;
}
.marketing-page .site-header nav > a:hover { background: #f7f0e6; color: var(--saas-heading); }
.marketing-page .site-header .nav-cta,
.marketing-page .site-header nav > a:last-child {
  border-color: #2a2118 !important;
  padding: 0 18px !important;
  background: var(--saas-heading) !important;
  color: #fff !important;
  box-shadow: var(--saas-shadow-sm) !important;
}

.marketing-page .compact-role-link a,
.marketing-page .role-audience-note a,
.marketing-page .enterprise-note a,
.marketing-page .legal-section a:not(.button) {
  border-color: transparent !important;
  color: #c05621 !important;
}

.marketing-page .analyzer-tile .feature-icon { background: #eaf1e8 !important; color: #2f5d3a !important; }
.marketing-page .glossary-tile .feature-icon { background: #f0f3e9 !important; color: #637a4f !important; }
.marketing-page .style-tile .feature-icon { background: #f7ecdd !important; color: #9a7048 !important; }
.marketing-page .translation-tile .feature-icon { background: #fbe9de !important; color: #c05621 !important; }
.marketing-page .lqa-tile .feature-icon { background: #f7e5df !important; color: #8f402a !important; }
.marketing-page .analyzer-tile::before { background: #2f5d3a !important; }
.marketing-page .glossary-tile::before { background: #637a4f !important; }
.marketing-page .style-tile::before { background: #9a7048 !important; }
.marketing-page .translation-tile::before { background: #c05621 !important; }
.marketing-page .lqa-tile::before { background: #8f402a !important; }
.marketing-page .button,
.marketing-page .addon-button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 20px;
  background: var(--saas-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(192, 86, 33, .2);
}
.marketing-page .button:hover { background: var(--saas-primary-dark); transform: translateY(-1px); }
.marketing-page .button.small { min-height: 40px; padding: 0 15px; font-size: 12px; }
.marketing-page .text-link { color: var(--saas-heading); font-size: 13px; font-weight: 700; }
.marketing-page .hero {
  width: min(100%, 1240px);
  max-width: none;
  min-height: 560px;
  padding: 58px 32px 64px;
  grid-template-columns: minmax(0, .96fr) minmax(480px, 1.04fr);
  gap: 48px;
}
.marketing-page .trial-pill {
  min-height: 34px;
  padding: 4px 12px 4px 5px;
  border-color: #e5dec9;
  background: #fffdf7;
  color: #74695d;
  font-size: 12px;
  box-shadow: var(--saas-shadow-xs);
}
.marketing-page .trial-pill span { padding: 6px 9px; font-size: 11px; }
.marketing-page .hero h1 {
  max-width: 620px;
  margin: 24px 0 18px;
  color: var(--saas-heading);
  font-family: var(--font-display);
  font-size: clamp(46px, 5vw, 60px);
  font-weight: 750;
  line-height: 1.035;
  letter-spacing: -3px;
}
.marketing-page .hero h1 em { color: var(--saas-primary); }
.marketing-page .hero-answer {
  max-width: 590px;
  color: #74695d;
  font-size: 17px;
  line-height: 1.72;
}
.marketing-page .hero-actions { gap: 18px; margin-top: 30px; }
.marketing-page .trust-list { gap: 20px; margin-top: 24px; color: #74695d; font-size: 12px; }
.marketing-page .hero-image {
  min-height: 450px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}
.marketing-page .hero-image img { min-height: 450px; object-fit: contain; mix-blend-mode: multiply; }
.marketing-page .proof-strip { padding: 22px 28px; background: rgba(255,255,255,.8); }
.marketing-page .proof-strip > p { font-size: 11px; letter-spacing: 1px; }
.marketing-page .proof-strip > div { max-width: 1120px; margin-top: 14px; }
.marketing-page .proof-strip span { gap: 10px; color: #74695d; font-size: 12px; }
.marketing-page .proof-strip strong { color: var(--saas-heading); font-size: 22px; }
.marketing-page .section,
.marketing-page .product-showcase {
  width: min(100%, 1160px);
  max-width: none;
  padding: 68px 28px;
}
.marketing-page .product-showcase { gap: 58px; }
.marketing-page .eyebrow {
  margin-bottom: 12px;
  color: var(--saas-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.25px;
}
.marketing-page .section h2,
.marketing-page .lqa-copy h2,
.marketing-page .security-grid h2,
.marketing-page .final-cta h2,
.marketing-page .showcase-copy h2,
.marketing-page .page-hero h1 {
  color: var(--saas-heading);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -1.8px;
}
.marketing-page .section-lead,
.marketing-page .page-hero > p:not(.eyebrow) {
  color: var(--saas-muted);
  font-size: 16px;
  line-height: 1.72;
}
.marketing-page .feature-grid,
.marketing-page .role-audience-grid,
.marketing-page .answer-grid,
.marketing-page .evidence-grid,
.marketing-page .enterprise-grid,
.marketing-page .steps,
.marketing-page .feedback-grid,
.marketing-page .outcome-grid { gap: 16px; margin-top: 36px; }
.marketing-page .feature-card,
.marketing-page .role-audience-grid article,
.marketing-page .answer-grid article,
.marketing-page .evidence-grid article,
.marketing-page .enterprise-grid article,
.marketing-page .steps article,
.marketing-page .feedback-card,
.marketing-page .price-card,
.marketing-page .compare-column,
.marketing-page .legal-section article {
  border: 1px solid var(--saas-line);
  border-radius: var(--saas-radius-lg);
  background: var(--saas-surface);
  box-shadow: var(--saas-shadow-xs);
}
.marketing-page .feature-card { min-height: 292px; padding: 24px; }
.marketing-page .feature-icon { width: 44px; height: 44px; border-radius: 13px; }
.marketing-page .feature-card h3,
.marketing-page .role-audience-grid h3,
.marketing-page .answer-grid h3,
.marketing-page .evidence-grid h3,
.marketing-page .steps h3 { color: var(--saas-heading); font-size: 19px; letter-spacing: -.45px; }
.marketing-page .feature-card > p,
.marketing-page .role-audience-grid p,
.marketing-page .answer-grid p,
.marketing-page .evidence-grid p,
.marketing-page .steps p,
.marketing-page .feedback-card p,
.marketing-page .enterprise-grid p {
  color: var(--saas-muted);
  font-size: 13px;
  line-height: 1.68;
}
.marketing-page .feature-card li,
.marketing-page .role-audience-grid li { color: #62584d; font-size: 12px; line-height: 1.55; }
.marketing-page .role-audience-grid article { padding: 26px; }
.marketing-page .role-audience-note { padding: 16px 18px; border-radius: 14px; font-size: 13px; }
.marketing-page .lqa-section { background: #2a2118; }
.marketing-page .lqa-section h2 { color: #fff; }
.marketing-page .lqa-copy > p:not(.eyebrow) { color: #e8dccb; font-size: 14px; }
.marketing-page .lqa-points strong { font-size: 13px; }
.marketing-page .lqa-points small { color: #d7c8b5; font-size: 11px; }
.marketing-page .scorecard { border-radius: 20px; padding: 24px; }
.marketing-page .score-line { grid-template-columns: 150px 1fr 36px; padding: 10px 4px; font-size: 11px; }
.marketing-page .scorecard header small { font-size: 11px; }
.marketing-page .scorecard header strong { font-size: 15px; }
.marketing-page .steps article { min-height: 150px; padding: 24px; }
.marketing-page .steps article > span { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.marketing-page .security-section { background: #f7f0e6; }
.marketing-page .security-copy { border-radius: 24px; }
.marketing-page .security-panel { border-radius: 24px; background: #2a2118; }
.marketing-page .faq-list details { padding: 18px 0; }
.marketing-page .faq-list summary { color: var(--saas-heading); font-family: var(--font-display); font-size: 14px; }
.marketing-page .faq-list details p { color: var(--saas-muted); font-size: 13px; line-height: 1.7; }
.marketing-page .page-hero { padding-top: 78px; padding-bottom: 74px; }
.marketing-page .pricing-grid { gap: 18px; }
.marketing-page .price-card { padding: 28px; }
.marketing-page .price-card h2 { font-size: 34px; }
.marketing-page .price-card > p,
.marketing-page .price-card li { font-size: 13px; line-height: 1.62; }
.marketing-page .price-card.featured { border-color: rgba(192,86,33,.5); box-shadow: 0 18px 44px rgba(192,86,33,.12); }
.marketing-page .best-badge { background: var(--saas-primary-soft); color: var(--saas-primary-dark); }
.marketing-page .addon-grid { gap: 14px; }
.marketing-page .addon-grid article { border-radius: 16px; box-shadow: var(--saas-shadow-xs); }
.marketing-page .final-cta { padding: 64px 28px; background: linear-gradient(135deg, #2a2118, #49382a); }
.marketing-page .final-cta h2 { color: #fff; }
.marketing-page .site-footer { max-width: 1160px; padding: 60px 28px 28px; }
.marketing-page .site-footer > div > p,
.marketing-page .site-footer > div > a:not(.logo) { font-size: 12px; line-height: 1.6; }
.marketing-page .site-footer > div > strong { font-size: 12px; }

/* Application shell */
.app-shell {
  --ink: var(--saas-ink);
  --muted: var(--saas-muted);
  --line: var(--saas-line);
  --paper: var(--saas-bg);
  --white: var(--saas-surface);
  --navy: var(--saas-heading);
  min-height: 100vh;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--saas-bg);
}
.app-shell .sidebar {
  width: 232px;
  padding: 22px 14px 16px;
  border-right: 1px solid var(--saas-line);
  background: var(--saas-surface);
  box-shadow: none;
}
.app-shell .brand {
  min-height: 42px;
  padding: 0 10px;
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 750 !important;
  letter-spacing: -.65px !important;
}
.app-shell .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.app-shell .side-nav { margin-top: 20px; }
.app-shell .nav-label {
  margin: 18px 12px 7px;
  color: #9a8e80;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .9px;
}
.app-shell .nav-item {
  min-height: 42px;
  gap: 11px;
  margin: 3px 0;
  padding: 9px 11px;
  border-radius: 10px;
  color: #62584d;
  font-size: 13px;
  font-weight: 550;
}
.app-shell .nav-item .icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #74695d;
  font-size: 12px;
}
.app-shell .nav-item:hover { background: #f7f0e6; color: var(--saas-heading); box-shadow: none; }
.app-shell .nav-item.active {
  background: var(--saas-primary-soft);
  color: #a94718;
  box-shadow: none;
  font-weight: 700;
}
.app-shell .nav-item.active .icon { background: rgba(192,86,33,.12); color: var(--saas-primary); }
.app-shell .nav-submenu { margin-left: 21px; padding-left: 10px; border-left-color: #ded2c1; }
.app-shell .nav-subitem { min-height: 38px; padding: 8px 9px; font-size: 12.5px; }
.app-shell .signout-nav { padding-top: 14px; color: #74695d; }
.app-shell .main { min-width: 0; background: var(--saas-bg); }
.app-shell .topbar {
  height: 66px;
  border-bottom: 1px solid var(--saas-line);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
}
.app-shell .secure-note { color: #74695d; font-size: 11px; }
.app-shell .secure-note span { color: var(--saas-teal); }
.app-shell .top-actions { right: 28px; gap: 9px; }
.app-shell .icon-button,
.app-shell .mobile-menu {
  width: 38px;
  height: 38px;
  border: 1px solid var(--saas-line);
  border-radius: 11px;
  background: var(--saas-surface);
  color: #62584d;
  box-shadow: var(--saas-shadow-xs);
}
.app-shell .icon-button:hover,
.app-shell .mobile-menu:hover { border-color: var(--saas-line-strong); background: #fdf9f3; }
.app-shell .content {
  width: min(100%, 1360px);
  max-width: none;
  padding: 32px 36px 56px;
}
.app-shell .welcome-row { margin-bottom: 20px; }
.app-shell .eyebrow,
.modal-kicker {
  margin-bottom: 8px;
  color: var(--saas-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.05px;
}
.app-shell .welcome-row h1,
.app-shell .page-title h1 {
  margin-bottom: 7px;
  color: var(--saas-heading);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -1.35px;
}
.app-shell .welcome-row h1 span { font-size: inherit; }
.app-shell .welcome-row p:last-child,
.app-shell .page-title p:last-child { color: var(--saas-muted); font-size: 14px; line-height: 1.55; }
.app-shell .usage-summary { gap: 12px; margin: 0 0 20px; }
.app-shell .usage-summary article {
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--saas-line);
  border-radius: 16px;
  background: var(--saas-surface);
  box-shadow: var(--saas-shadow-xs);
}
.app-shell .usage-summary small,
.app-shell .usage-summary span { color: var(--saas-muted); font-size: 12px; }
.app-shell .usage-summary strong { margin: 6px 0 3px; color: var(--saas-heading); font-size: 25px; letter-spacing: -1px; }
.app-shell .role-dashboard { gap: 16px !important; margin-bottom: 24px !important; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr) !important; align-items: stretch !important; }
.app-shell .role-dashboard-copy,
.app-shell .role-dashboard-path {
  min-height: 0 !important;
  padding: 24px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 18px !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-xs) !important;
}
.app-shell .role-dashboard-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(192,86,33,.1), transparent 30%),
    var(--saas-surface) !important;
  color: var(--saas-ink) !important;
}
.app-shell .role-dashboard-copy .eyebrow { color: var(--saas-primary) !important; }
.app-shell .role-dashboard-copy h2 { color: var(--saas-heading) !important; font-size: 24px !important; line-height: 1.18 !important; letter-spacing: -.85px !important; }
.app-shell .role-dashboard-copy p { color: var(--saas-muted) !important; font-size: 14px !important; }
.app-shell .role-dashboard-copy small { color: #62584d !important; font-size: 12px !important; }
.app-shell .role-dashboard-path { display: flex !important; flex-direction: column !important; }
.app-shell .role-path-head span { padding: 6px 9px; color: #62584d; font-size: 11px; }
.app-shell .role-path-head button { color: var(--saas-primary); font-size: 12px; }
.app-shell .role-dashboard-path > strong { font-size: 15px; }
.app-shell .role-step-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.app-shell .role-step { padding: 10px !important; border-radius: 12px !important; background: #fdf9f3 !important; }
.app-shell .role-step b { color: var(--saas-heading); font-size: 12px; }
.app-shell .role-step small { display: none; color: var(--saas-muted); font-size: 11px !important; line-height: 1.45 !important; }
.app-shell .role-step i { background: var(--saas-heading); }
.app-shell .tool-command-center {
  margin-top: 0 !important;
  padding: 24px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 20px !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-xs) !important;
}
.app-shell .tool-section-head { margin-bottom: 20px !important; }
.app-shell .tool-section-head h2 { color: var(--saas-heading); font-size: 24px !important; letter-spacing: -.8px !important; }
.app-shell .tool-section-head > p { color: var(--saas-muted) !important; font-size: 13px !important; }
.app-shell .tool-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense;
  gap: 14px !important;
}
.app-shell .tool-card,
.app-shell .tool-card.translate-card,
.app-shell .tool-card.qa-card,
.app-shell .tool-card:not(.translate-card) {
  grid-column: span 2 !important;
  min-height: 224px !important;
  padding: 20px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 16px !important;
  background: var(--saas-surface) !important;
  box-shadow: none !important;
}
.app-shell .tool-grid[data-persona="manager"] .tool-card[data-tool="translate"],
.app-shell .tool-grid[data-persona="manager"] .tool-card[data-tool="qa"],
.app-shell .tool-grid[data-persona="linguist"] .tool-card[data-tool="translate"],
.app-shell .tool-grid[data-persona="linguist"] .tool-card[data-tool="qa"] { grid-column: span 3 !important; }
.app-shell .tool-grid[data-persona="customer"] .tool-card[data-tool="translate"],
.app-shell .tool-grid[data-persona="customer"] .tool-card[data-tool="qa"],
.app-shell .tool-grid[data-persona="customer"] .tool-card[data-tool="analyzer"] { grid-column: span 2 !important; }
.app-shell .tool-grid[data-persona="customer"] .tool-card[data-tool="glossary"],
.app-shell .tool-grid[data-persona="customer"] .tool-card[data-tool="style"] { grid-column: span 3 !important; }
.app-shell .tool-card:hover { transform: translateY(-2px) !important; border-color: #cfc2af !important; box-shadow: var(--saas-shadow-sm) !important; }
.app-shell .tool-card::before,
.app-shell .tool-card.translate-card::before { width: 4px !important; border-radius: 16px 0 0 16px !important; }
.app-shell .tool-card::after { width: 108px !important; height: 108px !important; right: -38px !important; top: -42px !important; }
.app-shell .tool-heading,
.app-shell .translate-copy .tool-heading { margin-bottom: 16px !important; }
.app-shell .tool-icon,
.app-shell .translate-copy .tool-icon,
.app-shell .tool-card[data-tool] .tool-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  font-size: 18px !important;
}
.app-shell .tool-card h2,
.app-shell .tool-card.translate-card h2,
.app-shell .tool-card.qa-card h2 { margin-bottom: 8px !important; color: var(--saas-heading) !important; font-size: 18px !important; line-height: 1.2 !important; letter-spacing: -.5px !important; }
.app-shell .tool-card p,
.app-shell .tool-card.translate-card p,
.app-shell .tool-card.qa-card p { color: var(--saas-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
.app-shell .tool-footer { padding-top: 16px !important; }
.app-shell .tool-footer > span { color: #74695d !important; font-size: 11px !important; font-weight: 650 !important; }
.app-shell .tool-footer button { width: 36px !important; height: 36px !important; border-radius: 11px !important; }
.app-shell .recent-section { margin-top: 28px; }
.app-shell .section-heading { margin-bottom: 14px; }
.app-shell .section-heading h2 { color: var(--saas-heading); font-size: 20px; }
.app-shell .section-heading p,
.app-shell .text-button { font-size: 12px; }
.app-shell .project-table { border-radius: 16px; box-shadow: var(--saas-shadow-xs); }
.app-shell .table-head,
.app-shell .project-row { grid-template-columns: minmax(260px,2.2fr) minmax(130px,1fr) 110px 110px 86px; padding: 13px 18px; }
.app-shell .table-head { color: #8b7d6d; font-size: 11px; font-weight: 750; }
.app-shell .project-row { min-height: 66px; color: #2a2118; font-size: 12px; }
.app-shell .document-cell strong { color: var(--saas-heading); font-size: 13px; }
.app-shell .document-cell small { font-size: 11px; }
.app-shell .project-details-link { padding: 7px 11px; font-size: 11px; }
.app-shell .project-score-pill { min-width: 76px; padding: 6px 9px; font-size: 11px; }
.app-shell .project-score-pill small { font-size: 11px; }
.app-shell .page-title { align-items: flex-start; margin-bottom: 24px; }
.app-shell .filter-row { gap: 10px; margin-bottom: 20px; }
.app-shell .filter-row input,
.app-shell .filter { min-height: 42px; border-radius: 10px; font-size: 13px; }
.app-shell .filter-row input { width: min(360px, 100%); padding: 10px 13px; }
.app-shell .filter.active { background: var(--saas-heading); }
.app-shell .project-cards { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.app-shell .project-card { padding: 20px; border-radius: 16px; box-shadow: var(--saas-shadow-xs); }
.app-shell .project-card h3 { font-size: 16px; }
.app-shell .project-card p { font-size: 12px; line-height: 1.55; }
.app-shell .project-card footer { font-size: 11px; }
.app-shell .project-card-action { min-height: 38px; margin-top: 10px; border-radius: 10px; padding: 8px 11px; font-size: 11px; }
.app-shell .project-download-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.app-shell .settings-page-card,
.app-shell .admin-customer-card,
.app-shell .billing-plan-card,
.app-shell .billing-balance-card,
.app-shell .feedback-review-panel {
  border: 1px solid var(--saas-line) !important;
  border-radius: 18px !important;
  background: var(--saas-surface) !important;
  box-shadow: var(--saas-shadow-xs) !important;
}
.app-shell .settings-page-card { padding: 24px; }
.app-shell .settings-page-card h2,
.app-shell .admin-customer-card h2 { color: var(--saas-heading); font-size: 18px; }
.app-shell .admin-customer-grid { gap: 14px; }
.app-shell .admin-customer-card { padding: 20px; }
.app-shell .admin-card-description,
.app-shell .admin-customer-card p,
.app-shell .billing-page p { color: var(--saas-muted); font-size: 12px; }
.app-shell .admin-usage-grid article,
.app-shell .credit-log-summary article,
.app-shell .admin-health-grid article { border-radius: 12px; background: var(--saas-surface-soft); }
.app-shell .admin-usage-grid strong,
.app-shell .credit-log-summary strong,
.app-shell .admin-health-grid strong { color: var(--saas-heading); font-size: 24px; }
.app-shell .credit-log-toolbar label,
.app-shell .credit-log-table th { font-size: 11px; }
.app-shell .credit-log-table td { padding: 12px; font-size: 11px; }
.app-shell .credit-log-table td > strong { font-size: 12px; }
.app-shell .billing-overview-grid,
.app-shell .billing-plan-options,
.app-shell .billing-addon-options { gap: 14px; }
.app-shell .billing-plan-card,
.app-shell .billing-balance-card { padding: 22px; }
.app-shell .billing-plan-options article,
.app-shell .billing-addon-options article { border-radius: 14px; }

/* Forms, modals and results */
.modal-backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(8px); }
.modal {
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  padding: 30px;
  background: #fdfdfd;
  box-shadow: 0 28px 90px rgba(15,23,42,.26);
}
.modal h2 { color: var(--saas-heading); font-size: 26px; line-height: 1.2; letter-spacing: -.85px; }
.modal > div > p,
.pricing-modal > p,
.role-modal > p:not(.modal-kicker) { color: var(--saas-muted); font-size: 14px; line-height: 1.62; }
.modal-close { width: 34px; height: 34px; border-radius: 10px; background: #f7f0e6; color: #62584d; }
.form-grid,
.settings-grid { gap: 14px; }
.form-grid label,
.settings-grid label,
.team-field,
.auth-form label,
.style-reference-grid label,
.glossary-language-selector > label { color: #62584d; font-size: 12px; font-weight: 650; }
.form-grid select,
.form-grid input,
.form-grid textarea,
.settings-grid input,
.settings-grid select,
.team-field textarea,
.auth-form input,
.style-reference-grid input,
.style-reference-grid textarea,
.invite-grid input,
.invite-grid select {
  min-height: 44px;
  border: 1px solid var(--saas-line-strong);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--saas-ink);
  font-size: 13px;
}
.form-grid select:focus,
.form-grid input:focus,
.form-grid textarea:focus,
.settings-grid input:focus,
.settings-grid select:focus,
.auth-form input:focus { border-color: var(--saas-primary); box-shadow: var(--saas-ring); outline: none; }
.upload-zone { padding: 32px 22px; border-color: #cfc2af; border-radius: 14px; background: #fff; }
.upload-zone strong { color: var(--saas-heading); font-size: 15px; }
.upload-zone p { color: var(--saas-muted); font-size: 13px; }
.upload-zone small { color: #8b7d6d; font-size: 11px; }
.selected-file { padding: 12px; border-radius: 12px; }
.selected-file strong { font-size: 13px; }
.selected-file small { font-size: 11px; }
.credit-estimate { grid-template-columns: 130px 1fr; padding: 16px; border-radius: 12px; }
.credit-estimate span { font-size: 11px; }
.credit-estimate strong { font-size: 28px; }
.credit-estimate p { font-size: 12px; }
.primary-button,
.secondary-button,
.google-auth-button,
.advanced-toggle {
  min-height: 42px;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
}
.primary-button { background: var(--saas-primary); box-shadow: 0 7px 16px rgba(192,86,33,.18); }
.primary-button:hover { background: var(--saas-primary-dark); }
.secondary-button { border-color: var(--saas-line-strong); }
.result-head { margin-bottom: 20px; }
.result-head h2 { color: var(--saas-heading); font-size: 25px; }
.result-head p { font-size: 11px; }
.success-check { width: 44px; height: 44px; background: var(--saas-teal-soft); color: var(--saas-teal); }
.result-panel { margin-top: 14px; padding: 18px; border-radius: 14px; }
.result-panel h3 { color: var(--saas-heading); font-size: 15px; }
.result-panel li { padding: 9px 0 9px 18px; font-size: 13px; line-height: 1.55; }
.score-hero { grid-template-columns: 116px 1fr; padding: 20px; border-radius: 16px; }
.score-summary h3 { font-size: 18px; }
.score-summary p { font-size: 13px; }
.score-grade { padding: 6px 9px; font-size: 11px; }
.scorecard-results { border-radius: 14px; }
.scorecard-results header { font-size: 11px; }
.score-row { min-height: 54px; font-size: 12px; }
.score-method { font-size: 11px; }
.score-severity,
.score-issue-hint { font-size: 11px; }
.lqa-category-chip { padding: 7px 10px; font-size: 11px; }
.lqa-priority-top strong { font-size: 13px; }
.lqa-priority-finding small { font-size: 11px; }
.lqa-priority-finding > em { font-size: 12px; }
.feedback-panel,
.feedback-purpose-card,
.feedback-review-card,
.lqa-modal-issue { border-radius: 14px; }
.feedback-panel p,
.feedback-purpose-card p,
.feedback-review-card p { font-size: 12px; line-height: 1.58; }

/* Standalone admin page */
body:not(.marketing-page) > .site-header { height: 76px; padding: 0 28px; border-bottom: 1px solid var(--saas-line); background: rgba(255,255,255,.92); }
body:not(.marketing-page) .page-hero { padding: 70px 28px; }
body:not(.marketing-page) .admin-card { border-radius: 18px; box-shadow: var(--saas-shadow-xs); }

@media (max-width: 1100px) {
  .marketing-page .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 52px; }
  .marketing-page .hero-copy { text-align: center; }
  .marketing-page .hero h1, .marketing-page .hero-answer { margin-left: auto; margin-right: auto; }
  .marketing-page .hero-image { width: min(100%, 760px); margin: 0 auto; }
  .app-shell .content { padding-left: 28px; padding-right: 28px; }
  .app-shell .role-dashboard { grid-template-columns: 1fr !important; }
  .app-shell .role-dashboard-copy, .app-shell .role-dashboard-path { min-height: auto; }
  .app-shell .role-step small { display: block; }
  .app-shell .tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .app-shell .tool-card, .app-shell .tool-card.translate-card, .app-shell .tool-card.qa-card { grid-column: auto !important; }
  .app-shell .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .app-shell .sidebar { width: min(84vw, 284px); z-index: 40; box-shadow: 18px 0 48px rgba(15,23,42,.16); }
  .app-shell .mobile-menu { display: grid; place-items: center; left: 16px; }
  .app-shell .top-actions { right: 16px; }
  .app-shell .content { padding-top: 32px; }
  .app-shell .project-table { overflow-x: auto; }
  .app-shell .table-head, .app-shell .project-row { min-width: 820px; }
}

@media (max-width: 720px) {
  .marketing-page .site-header { height: 66px; padding: 0 18px; }
  .marketing-page .site-header.open nav { top: 66px; left: 12px; right: 12px; gap: 4px; padding: 12px; border-radius: 14px; }
  .marketing-page .site-header nav > a { width: 100%; min-height: 42px; }
  .marketing-page .hero { padding: 44px 20px 56px; gap: 36px; }
  .marketing-page .hero h1 { font-size: 41px; letter-spacing: -2.4px; }
  .marketing-page .hero-answer { font-size: 15px; }
  .marketing-page .hero-actions { width: 100%; gap: 12px; }
  .marketing-page .hero-actions .button { width: 100%; }
  .marketing-page .trust-list { gap: 12px 16px; font-size: 11px; }
  .marketing-page .hero-image, .marketing-page .hero-image img { min-height: 330px; }
  .marketing-page .section, .marketing-page .product-showcase { padding: 62px 20px; }
  .marketing-page .section h2, .marketing-page .lqa-copy h2, .marketing-page .security-grid h2, .marketing-page .final-cta h2, .marketing-page .showcase-copy h2, .marketing-page .page-hero h1 { font-size: 31px; }
  .marketing-page .section-lead { font-size: 14px; }
  .marketing-page .feature-card { min-height: auto; padding: 22px; }
  .marketing-page .role-audience-grid, .marketing-page .feature-grid, .marketing-page .answer-grid, .marketing-page .evidence-grid, .marketing-page .steps, .marketing-page .security-cards { grid-template-columns: 1fr; }
  .marketing-page .score-line { grid-template-columns: 115px 1fr 32px; }
  .marketing-page .site-footer { padding-left: 20px; padding-right: 20px; }
  .app-shell .topbar { height: 62px; }
  .app-shell .content { padding: 28px 18px 48px; }
  .app-shell .welcome-row { align-items: flex-start; }
  .app-shell .welcome-row h1, .app-shell .page-title h1 { font-size: 27px; letter-spacing: -1px; }
  .app-shell .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .app-shell .usage-summary article { min-height: 108px; padding: 15px; }
  .app-shell .usage-summary strong { font-size: 24px; }
  .app-shell .role-dashboard-copy, .app-shell .role-dashboard-path { padding: 19px; }
  .app-shell .role-dashboard-copy h2 { font-size: 21px; }
  .app-shell .role-step-list { grid-template-columns: 1fr !important; }
  .app-shell .tool-command-center { padding: 16px !important; border-radius: 17px !important; }
  .app-shell .tool-section-head { display: block !important; }
  .app-shell .tool-section-head > p { margin-top: 6px !important; text-align: left !important; }
  .app-shell .tool-grid { grid-template-columns: 1fr !important; }
  .app-shell .tool-card, .app-shell .tool-card.translate-card, .app-shell .tool-card.qa-card, .app-shell .tool-card:not(.translate-card) { grid-column: auto !important; min-height: 210px !important; }
  .app-shell .tool-grid.balance-last-row .tool-card.balance-wide,
  .app-shell .tool-grid.three-card-row .tool-card,
  .app-shell .tool-grid.business-simple-tools .tool-card { grid-column: auto !important; }
  .app-shell .project-cards { grid-template-columns: 1fr; }
  .app-shell .project-download-actions { grid-template-columns: 1fr; }
  .app-shell .filter-row { flex-wrap: wrap; }
  .app-shell .filter-row input { width: 100%; flex: 1 0 100%; }
  .app-shell .admin-customer-grid, .app-shell .billing-overview-grid { grid-template-columns: 1fr; }
  .modal { width: min(100%, 96vw); padding: 24px 18px; border-radius: 16px; }
  .modal h2 { padding-right: 32px; font-size: 23px; }
  .form-grid, .settings-grid, .style-reference-grid { grid-template-columns: 1fr; }
  .credit-estimate, .score-hero { grid-template-columns: 1fr; }
  .result-actions { align-items: stretch; flex-direction: column-reverse; }
  .result-actions > * { width: 100%; }
}

@media (max-width: 430px) {
  .marketing-page .hero h1 { font-size: 38px; }
  .marketing-page .hero-image, .marketing-page .hero-image img { min-height: 280px; }
  .app-shell .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-shell .usage-summary article { min-height: 100px; }
  .app-shell .tool-card p { font-size: 12.5px !important; }
}

@media (max-width: 350px) {
  .app-shell .usage-summary { grid-template-columns: 1fr !important; }
}

/* Readability floor: keep functional text legible on compact screens. */
.marketing-page small,
.marketing-page .eyebrow,
.marketing-page .trial-pill,
.marketing-page .trust-list,
.marketing-page .feature-number,
.marketing-page .tour-button,
.marketing-page .card-actions a,
.marketing-page .credit-table header,
.marketing-page .credit-table > div,
.marketing-page .credit-table footer,
.marketing-page .usage-table header,
.marketing-page .usage-table > div,
.marketing-page .best-badge,
.marketing-page .price-card h2 span {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.app-shell small,
.app-shell .eyebrow,
.app-shell .nav-label,
.app-shell .role-step i,
.app-shell .pill,
.app-shell .score-issue-hint,
.app-shell .score-severity {
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.app-shell .tool-card .pill,
.app-shell .tool-card .pill.role-pill,
.app-shell .secure-note,
.app-shell .secure-note span,
.marketing-page .lqa-copy span > b {
  font-size: 11px !important;
}

/* 2026 product UI reset — authoritative component layer */
html body,
html body.marketing-page {
  color: var(--saas-ink) !important;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  color: var(--saas-heading);
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-wrap: balance;
}

.marketing-page .logo em,
.marketing-page .footer-logo em,
.app-shell .brand > span:last-child > span {
  color: #c05621 !important;
  font-style: normal !important;
}

html body p,
html body li,
html body span,
html body small,
html body label,
html body td,
html body th,
html body summary {
  font-family: var(--font-sans) !important;
}

/* Marketing: concise, warm and product-led */
.marketing-page .site-header {
  max-width: 1240px !important;
  height: 70px !important;
  padding-inline: 28px !important;
  background: rgba(253, 248, 240, .94) !important;
}

.marketing-page .site-header nav > a,
.marketing-page .login-link {
  min-height: 38px !important;
  padding-inline: 12px !important;
  color: #62584d !important;
  font-size: 13px !important;
}

.marketing-page .site-header .nav-cta,
.marketing-page .site-header nav > a:last-child {
  border-radius: 10px !important;
  background: var(--saas-heading) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.marketing-page .hero-copy { align-self: center; }
.marketing-page .hero h1 { text-wrap: balance; }
.marketing-page .hero-answer { max-width: 570px; }
.marketing-page .hero-actions .button { box-shadow: 0 8px 18px rgba(192, 86, 33, .18); }
.marketing-page .trust-list span::before { color: var(--saas-teal) !important; }
.marketing-page .proof-strip { border-block: 1px solid var(--saas-line); }

.marketing-page .section > .eyebrow,
.marketing-page .section > h2,
.marketing-page .section > .section-lead,
.marketing-page .intro > .eyebrow,
.marketing-page .intro > h2,
.marketing-page .intro > .section-lead,
.marketing-page .workflow > .eyebrow,
.marketing-page .workflow > h2 {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.marketing-page .section h2,
.marketing-page .lqa-copy h2,
.marketing-page .security-grid h2,
.marketing-page .final-cta h2,
.marketing-page .showcase-copy h2,
.marketing-page .page-hero h1 {
  font-size: clamp(32px, 3.6vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: -1.45px !important;
}

.marketing-page .section-lead,
.marketing-page .page-hero > p:not(.eyebrow) {
  max-width: 760px;
  color: var(--saas-muted) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.marketing-page .feature-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 30px !important;
}

.marketing-page .feature-card {
  grid-column: span 2 !important;
  min-width: 0;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 23px !important;
  overflow: hidden;
  border: 1px solid var(--saas-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.marketing-page .feature-card:nth-last-child(-n + 2) { grid-column: span 3 !important; }
.marketing-page .feature-card:hover { transform: translateY(-2px); border-color: var(--saas-line-strong) !important; box-shadow: var(--saas-shadow-sm) !important; }
.marketing-page .feature-card::after { display: none !important; }
.marketing-page .feature-number { color: var(--saas-subtle) !important; }
.marketing-page .feature-icon {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.marketing-page .analyzer-tile { border-top: 3px solid #2f5d3a !important; }
.marketing-page .glossary-tile { border-top: 3px solid #637a4f !important; }
.marketing-page .style-tile { border-top: 3px solid #9a7048 !important; }
.marketing-page .translation-tile { border-top: 3px solid #c05621 !important; }
.marketing-page .lqa-tile { border-top: 3px solid #8f402a !important; }
.marketing-page .feature-card h3 { margin: 18px 0 8px !important; font-size: 18px !important; }
.marketing-page .feature-card > p { margin: 0 !important; font-size: 13px !important; line-height: 1.6 !important; }
.marketing-page .feature-card ul { margin: 14px 0 0 !important; padding-left: 18px !important; }
.marketing-page .feature-card li { margin: 4px 0 !important; color: #62584d !important; }
.marketing-page .card-actions { margin-top: auto !important; padding-top: 16px !important; }
.marketing-page .tour-button { color: #74695d !important; font-size: 11px !important; }

.marketing-page .role-adapt-visual,
.marketing-page .role-audience-note,
.marketing-page .scorecard,
.marketing-page .home-trust-grid,
.marketing-page .faq-list,
.marketing-page .credit-table,
.marketing-page .usage-table {
  border-color: var(--saas-line) !important;
  box-shadow: none !important;
}

.marketing-page .role-adapt-visual {
  margin-top: 30px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #ffffff 0%, #faf4ea 100%) !important;
}

.marketing-page .role-switch-column span,
.marketing-page .role-output-column article {
  min-height: 58px;
  border: 1px solid var(--saas-line) !important;
  border-left: 3px solid #ded2c1 !important;
  border-radius: 12px !important;
  background: #fff !important;
}
.marketing-page .role-switch-column span:nth-child(1),
.marketing-page .role-output-column article:nth-child(1) { border-left-color: #c05621 !important; }
.marketing-page .role-switch-column span:nth-child(2),
.marketing-page .role-output-column article:nth-child(2) { border-left-color: #2f5d3a !important; }
.marketing-page .role-switch-column span:nth-child(3),
.marketing-page .role-output-column article:nth-child(3) { border-left-color: #9a7048 !important; }
.marketing-page .role-switch-column .active-role { color: var(--saas-heading) !important; box-shadow: none !important; }
.marketing-page .role-core-card { border-radius: 18px !important; background: #2a2118 !important; }

.marketing-page .lqa-section { background: #2a2118 !important; }
.marketing-page .lqa-layout { gap: 56px !important; }
.marketing-page .scorecard { background: #fff !important; }
.marketing-page .steps { gap: 14px !important; margin-top: 28px !important; }
.marketing-page .steps article {
  min-height: 132px !important;
  padding: 22px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.marketing-page .steps article > span {
  flex: 0 0 38px;
  background: var(--saas-primary-soft) !important;
  color: var(--saas-primary-dark) !important;
}
.marketing-page .home-trust-section { gap: 34px !important; }
.marketing-page .home-trust-grid { gap: 10px !important; padding: 16px !important; border-radius: 18px !important; background: #fff !important; }
.marketing-page .home-trust-grid article { min-height: 88px !important; padding: 14px !important; border-radius: 12px !important; background: #faf4ea !important; }
.marketing-page .faq-section { padding-bottom: 68px !important; }
.marketing-page .faq-list details { padding: 16px 0 !important; }
.marketing-page .faq-list summary { font-size: 14px !important; }
.marketing-page .final-cta { border-radius: 24px; }
.marketing-page .site-footer { padding-top: 48px !important; }

.marketing-page .page-hero { padding: 62px 28px 56px !important; }
.marketing-page .page-hero > p { margin-inline: auto; }
.marketing-page .role-jump-nav { top: 70px; }
.marketing-page .price-card,
.marketing-page .compare-column,
.marketing-page .role-audience-grid article,
.marketing-page .answer-grid article,
.marketing-page .evidence-grid article,
.marketing-page .enterprise-grid article,
.marketing-page .feedback-card,
.marketing-page .legal-section article,
.marketing-page .addon-grid article {
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* App: compact navigation and clear work surfaces */
.app-shell {
  grid-template-columns: 232px minmax(0, 1fr) !important;
  background: var(--saas-bg) !important;
}
.app-shell .sidebar {
  width: 232px !important;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 35;
  overflow-y: auto;
  background: #fff !important;
}
.app-shell .main { min-height: 100vh; margin-left: 0 !important; }
.app-shell .brand { color: var(--saas-heading) !important; }
.app-shell .side-nav { padding-bottom: 8px; }
.app-shell .nav-item {
  min-height: 40px !important;
  margin: 2px 0 !important;
  border-radius: 9px !important;
  color: #62584d !important;
  font-size: 13px !important;
}
.app-shell .nav-item .icon { font-size: 13px !important; }
.app-shell .nav-item:hover { background: #f7f0e6 !important; color: var(--saas-heading) !important; }
.app-shell .nav-item.active { background: var(--saas-primary-soft) !important; color: var(--saas-primary-dark) !important; }
.app-shell .nav-submenu { margin-left: 20px !important; }
.app-shell .sidebar-bottom { margin-top: auto; }

.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 25;
  height: 64px !important;
  background: rgba(255, 255, 255, .9) !important;
}
.app-shell .secure-note { left: 32px !important; color: var(--saas-muted) !important; font-size: 12px !important; }
.app-shell .content { margin: 0 auto; }
.app-shell .welcome-row h1,
.app-shell .page-title h1 { font-size: 29px !important; letter-spacing: -1px !important; }
.app-shell .welcome-row h1 > span:last-child { font-size: 24px !important; }
.app-shell .eyebrow { font-size: 10px !important; letter-spacing: 1.1px !important; }

.app-shell .usage-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.app-shell .usage-summary article {
  min-width: 0;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.app-shell .usage-summary article:nth-child(1) { border-top: 2px solid #c05621; }
.app-shell .usage-summary article:nth-child(2) { border-top: 2px solid #2f5d3a; }
.app-shell .usage-summary article:nth-child(3) { border-top: 2px solid #9a7048; }
.app-shell .usage-summary article:nth-child(4) { border-top: 2px solid #637a4f; }

.app-shell .role-dashboard {
  display: grid !important;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr) !important;
  gap: 22px !important;
  align-items: center !important;
  margin: 0 0 24px !important;
  padding: 20px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff, #faf4ea) !important;
  box-shadow: none !important;
}
.app-shell .role-dashboard-copy,
.app-shell .role-dashboard-path {
  min-width: 0;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell .role-dashboard-copy { display: block !important; }
.app-shell .role-dashboard-copy::before,
.app-shell .role-dashboard-copy::after,
.app-shell .role-dashboard-path::before,
.app-shell .role-dashboard-path::after { display: none !important; content: none !important; }
.app-shell .role-mode-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.app-shell .role-mode-line span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--saas-primary-soft);
  color: #a94718;
  font-size: 11px;
  font-weight: 700;
}
.app-shell .role-mode-line button,
.app-shell .role-path-head button {
  border: 0;
  background: transparent;
  color: var(--saas-primary-dark);
  font-size: 11px;
  font-weight: 700;
}
.app-shell .role-dashboard-copy h2 { margin: 0 0 5px !important; font-size: 20px !important; letter-spacing: -.55px !important; }
.app-shell .role-dashboard-copy p { margin: 0 !important; color: var(--saas-muted) !important; font-size: 13px !important; line-height: 1.5 !important; }
.app-shell .role-dashboard-path > strong { display: block; margin-bottom: 8px; color: #62584d; font-size: 11px; font-weight: 700; }
.app-shell .role-step-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 7px !important;
}
.app-shell .role-step {
  min-height: 36px;
  flex: 1 1 135px;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  text-align: left;
}
.app-shell .role-step:hover { border-color: var(--saas-line-strong) !important; transform: translateY(-1px); }
.app-shell .role-step i {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border-radius: 6px !important;
  background: var(--saas-primary-soft) !important;
  color: var(--saas-primary-dark) !important;
  font-style: normal;
  font-size: 10px !important;
}
.app-shell .role-step b { display: block; color: var(--saas-heading) !important; font-size: 11px !important; line-height: 1.25; }
.app-shell .advanced-toggle { min-height: 34px !important; margin-top: 9px; padding: 7px 10px !important; background: transparent !important; color: var(--saas-primary-dark) !important; }

.app-shell .tool-command-center {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.app-shell .tool-section-head { align-items: end !important; margin-bottom: 14px !important; }
.app-shell .tool-section-head h2 { font-size: 21px !important; letter-spacing: -.6px !important; }
.app-shell .tool-section-head > p { max-width: 400px; margin: 0 !important; font-size: 12px !important; text-align: right; }
.app-shell .tool-grid { gap: 12px !important; }
.app-shell .tool-card,
.app-shell .tool-card.translate-card,
.app-shell .tool-card.qa-card,
.app-shell .tool-card:not(.translate-card) {
  min-height: 196px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.app-shell .tool-card::after { display: none !important; }
.app-shell .tool-card::before { inset: 0 0 auto !important; width: 100% !important; height: 3px !important; border-radius: 14px 14px 0 0 !important; }
.app-shell .tool-card[data-tool="analyzer"]::before { background: #2f5d3a !important; }
.app-shell .tool-card[data-tool="glossary"]::before { background: #637a4f !important; }
.app-shell .tool-card[data-tool="style"]::before { background: #9a7048 !important; }
.app-shell .tool-card[data-tool="translate"]::before { background: #c05621 !important; }
.app-shell .tool-card[data-tool="qa"]::before { background: #8f402a !important; }
.app-shell .tool-card:hover { border-color: var(--saas-line-strong) !important; box-shadow: 0 8px 22px rgba(42, 33, 24, .07) !important; }
.app-shell .tool-heading { margin-bottom: 13px !important; }
.app-shell .tool-icon,
.app-shell .translate-copy .tool-icon,
.app-shell .tool-card[data-tool] .tool-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}
.app-shell .tool-card[data-tool="analyzer"] .tool-icon { background: #eaf1e8 !important; color: #2f5d3a !important; }
.app-shell .tool-card[data-tool="glossary"] .tool-icon { background: #f0f3e9 !important; color: #637a4f !important; }
.app-shell .tool-card[data-tool="style"] .tool-icon { background: #f7ecdd !important; color: #9a7048 !important; }
.app-shell .tool-card[data-tool="translate"] .tool-icon { background: #fbe9de !important; color: #c05621 !important; }
.app-shell .tool-card[data-tool="qa"] .tool-icon { background: #f7e5df !important; color: #8f402a !important; }
.app-shell .tool-card h2,
.app-shell .tool-card.translate-card h2,
.app-shell .tool-card.qa-card h2 { margin: 0 0 7px !important; font-size: 17px !important; letter-spacing: -.35px !important; }
.app-shell .tool-card p,
.app-shell .tool-card.translate-card p,
.app-shell .tool-card.qa-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 !important;
  color: var(--saas-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}
.app-shell .tool-footer { margin-top: auto !important; padding-top: 13px !important; }
.app-shell .tool-footer > span { font-size: 10.5px !important; }
.app-shell .tool-footer button { width: 34px !important; height: 34px !important; border-radius: 10px !important; box-shadow: none !important; }
.app-shell .tool-card .pill { padding: 4px 7px !important; background: #f7f0e6 !important; color: #62584d !important; }

.app-shell .recent-section { margin-top: 28px !important; }
.app-shell .recent-section .section-heading h2 { font-size: 19px !important; }
.app-shell .project-table { overflow: hidden; border: 1px solid var(--saas-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.app-shell .table-head { background: #faf4ea !important; }
.app-shell .project-row { background: #fff !important; }
.app-shell .project-row:hover { background: #fdf9f3 !important; }
.app-shell .project-cards { gap: 12px !important; }
.app-shell .project-card { border: 1px solid var(--saas-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; }
.app-shell .project-card-action { margin-top: 0 !important; }
.app-shell .project-download-actions { gap: 6px !important; }

.app-shell .page-title { margin-bottom: 20px !important; }
.app-shell .settings-page-card,
.app-shell .admin-customer-card,
.app-shell .billing-plan-card,
.app-shell .billing-balance-card,
.app-shell .feedback-review-panel,
.app-shell .onboarding-center,
.app-shell .sample-card,
.app-shell .help-list article {
  border-radius: 14px !important;
  box-shadow: none !important;
}
.app-shell .admin-customer-card { padding: 18px !important; }
.app-shell .admin-customer-card details > summary { min-height: 48px; cursor: pointer; }
.app-shell .admin-usage-grid,
.app-shell .credit-log-summary,
.app-shell .admin-health-grid { gap: 10px !important; }
.app-shell .admin-usage-grid article,
.app-shell .credit-log-summary article,
.app-shell .admin-health-grid article { min-height: 82px !important; padding: 14px !important; }

/* Forms and results: keep the task, decision and action visually dominant */
.modal-backdrop { background: rgba(42, 33, 24, .52) !important; }
.modal {
  width: min(900px, calc(100vw - 32px));
  max-height: min(90vh, 920px);
  overflow-y: auto;
  padding: 26px !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(42, 33, 24, .24) !important;
}
.modal h2 { font-size: 24px !important; letter-spacing: -.7px !important; }
.modal > div > p,
.pricing-modal > p,
.role-modal > p:not(.modal-kicker) { max-width: 720px; font-size: 13px !important; }
.modal-close { position: sticky; top: 0; z-index: 2; border: 0 !important; }
.form-grid,
.settings-grid,
.style-reference-grid { gap: 12px !important; }
.form-grid label,
.settings-grid label,
.team-field,
.auth-form label,
.style-reference-grid label,
.glossary-language-selector > label { color: #62584d !important; font-size: 12px !important; }
.form-grid select,
.form-grid input,
.form-grid textarea,
.settings-grid input,
.settings-grid select,
.team-field textarea,
.auth-form input,
.style-reference-grid input,
.style-reference-grid textarea,
.invite-grid input,
.invite-grid select {
  min-height: 42px !important;
  border-color: var(--saas-line-strong) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
}
.upload-zone {
  min-height: 138px;
  padding: 26px 20px !important;
  border: 1px dashed #c7b7a1 !important;
  border-radius: 13px !important;
  background: #fdf9f3 !important;
}
.upload-zone:hover { border-color: var(--saas-primary) !important; background: #fff5ec !important; }
.credit-estimate { padding: 14px !important; border-radius: 11px !important; background: #faf4ea !important; }
.primary-button,
.secondary-button,
.google-auth-button,
.advanced-toggle { min-height: 40px !important; border-radius: 9px !important; box-shadow: none !important; }
.primary-button { background: var(--saas-primary) !important; }
.primary-button:hover { background: var(--saas-primary-dark) !important; }
.secondary-button { background: #fff !important; color: #2a2118 !important; }
.result-head { margin-bottom: 16px !important; }
.result-head h2 { font-size: 23px !important; }
.result-panel,
.score-hero,
.scorecard-results,
.feedback-panel,
.feedback-purpose-card,
.feedback-review-card,
.lqa-modal-issue {
  border: 1px solid var(--saas-line) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.result-panel { padding: 16px !important; }
.result-panel h3 { margin-bottom: 8px !important; font-size: 14px !important; }
.score-hero { padding: 17px !important; }
.score-row { min-height: 50px !important; }
.feedback-panel { display: grid; gap: 12px; }

@media (max-width: 1180px) {
  .marketing-page .hero { grid-template-columns: 1fr !important; }
  .marketing-page .hero-copy { text-align: center; }
  .marketing-page .hero h1,
  .marketing-page .hero-answer { margin-inline: auto; }
  .marketing-page .hero-image { width: min(760px, 100%); margin-inline: auto; }
  .app-shell .role-dashboard { grid-template-columns: 1fr !important; }
  .app-shell .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .app-shell .main { margin-left: 0; }
  .app-shell .sidebar { transform: translateX(-104%); }
  .app-shell .sidebar.open { transform: translateX(0); }
  .app-shell .content { padding-inline: 24px !important; }
  .app-shell .secure-note { left: 64px !important; }
  .marketing-page .feature-card,
  .marketing-page .feature-card:nth-last-child(-n + 2) { grid-column: span 3 !important; }
}

@media (max-width: 720px) {
  .marketing-page .hero { padding-top: 40px !important; }
  .marketing-page .hero h1 { font-size: 40px !important; letter-spacing: -2px !important; }
  .marketing-page .section,
  .marketing-page .product-showcase { padding: 52px 20px !important; }
  .marketing-page .feature-card,
  .marketing-page .feature-card:nth-last-child(-n + 2) { grid-column: 1 / -1 !important; min-height: auto !important; }
  .marketing-page .role-adapt-visual { padding: 16px !important; }
  .marketing-page .final-cta { border-radius: 18px; }
  .app-shell .content { padding: 24px 16px 44px !important; }
  .app-shell .secure-note { display: none !important; }
  .app-shell .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app-shell .usage-summary article { min-height: 96px !important; }
  .app-shell .role-dashboard { gap: 16px !important; padding: 16px !important; }
  .app-shell .role-step-list { display: grid !important; grid-template-columns: 1fr !important; }
  .app-shell .tool-section-head { display: block !important; }
  .app-shell .tool-section-head > p { margin-top: 4px !important; text-align: left; }
  .app-shell .tool-card,
  .app-shell .tool-card.translate-card,
  .app-shell .tool-card.qa-card,
  .app-shell .tool-card:not(.translate-card) { min-height: 184px !important; }
  .modal { width: calc(100vw - 20px); padding: 20px 16px !important; }
}

@media (max-width: 420px) {
  .app-shell .usage-summary { grid-template-columns: 1fr !important; }
  .app-shell .usage-summary article { min-height: 88px !important; }
  .marketing-page .hero h1 { font-size: 36px !important; }
}

/* Terracotta, sand and forest — final theme seal */
body.marketing-page {
  background: #fdf8f0 !important;
  color: #2a2118 !important;
}

.marketing-page .hero h1 em,
.marketing-page .eyebrow,
.marketing-page .proof-strip strong,
.marketing-page .text-link,
.marketing-page .card-actions a,
.marketing-page .faq-more-link,
.marketing-page .logo em,
.marketing-page .footer-logo em {
  color: #c05621 !important;
}

.marketing-page .eyebrow.light,
.marketing-page .lqa-section .eyebrow,
.marketing-page .final-cta > p {
  color: #efe2ce !important;
}

.marketing-page .button:not(.light-button),
.marketing-page .addon-button,
.marketing-page .price-card .button,
.marketing-page .tour-dialog .button {
  border-color: #c05621 !important;
  background: #c05621 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(192, 86, 33, .18) !important;
}

.marketing-page .button:not(.light-button):hover,
.marketing-page .addon-button:hover,
.marketing-page .price-card .button:hover,
.marketing-page .tour-dialog .button:hover {
  border-color: #a94718 !important;
  background: #a94718 !important;
}

.marketing-page .lqa-section .light-button,
.marketing-page .final-cta .light-button {
  border-color: #efe2ce !important;
  background: #fdf8f0 !important;
  color: #2a2118 !important;
  box-shadow: none !important;
}

.marketing-page .trial-pill,
.marketing-page .best-badge {
  border-color: #ded2c1 !important;
  background: #faf4ea !important;
  color: #62584d !important;
}

.marketing-page .trial-pill span,
.marketing-page .best-badge {
  background: #f9e9de !important;
  color: #a94718 !important;
}

.marketing-page .score-line i b,
.marketing-page .usage-table i b,
.marketing-page .credit-table i b {
  background: #c05621 !important;
}

.marketing-page .score-circle,
.marketing-page .lqa-points span > b,
.marketing-page .home-trust-grid article > span,
.marketing-page .security-badges span {
  border-color: #d7e2d4 !important;
  background: #eaf1e8 !important;
  color: #2f5d3a !important;
}

.marketing-page .role-core-card,
.marketing-page .lqa-section,
.marketing-page .security-panel {
  background: #2a2118 !important;
}

.marketing-page .page-hero,
.marketing-page .pricing-hero {
  background-color: #fdf8f0 !important;
  background-image: radial-gradient(circle at 50% 0%, rgba(239, 226, 206, .8), transparent 54%) !important;
}

.marketing-page .page-hero h1 em { color: #c05621 !important; }
.marketing-page .compare-column:not(.after) .compare-list b { color: #a33a2b !important; }
.marketing-page .compare-column.after {
  border-color: #c7d5c3 !important;
  background: #f7faf5 !important;
}
.marketing-page .compare-column.after header span,
.marketing-page .compare-column.after .compare-list b { color: #2f5d3a !important; }

.marketing-page .detailed-role-grid article::before { background: #c05621 !important; }
.marketing-page .detailed-role-grid article:nth-child(2)::before { background: #2f5d3a !important; }
.marketing-page .detailed-role-grid article:nth-child(3)::before { background: #9a7048 !important; }
.marketing-page .detailed-role-grid article > span { color: #c05621 !important; }
.marketing-page .detailed-role-grid article:nth-child(2) > span { color: #2f5d3a !important; }
.marketing-page .detailed-role-grid article:nth-child(3) > span { color: #9a7048 !important; }

.marketing-page .outcome-grid article > span,
.marketing-page .enterprise-grid article > span,
.marketing-page .evidence-grid article > span,
.marketing-page .case-study-roadmap article > span,
.marketing-page .security-cards article > span,
.marketing-page .feedback-card > span {
  border-color: #ded2c1 !important;
  background: #faf4ea !important;
  color: #c05621 !important;
}
.marketing-page .enterprise-grid article:nth-child(even) > span,
.marketing-page .evidence-grid article:nth-child(even) > span,
.marketing-page .security-cards article:nth-child(even) > span,
.marketing-page .feedback-card:nth-child(even) > span { color: #2f5d3a !important; }

.marketing-page .security-badges > span {
  border-color: #c7d5c3 !important;
  background: #eaf1e8 !important;
  color: #2f5d3a !important;
}
.marketing-page .security-badges > span::before { background: #2f5d3a !important; }

.marketing-page .faq-list summary::after {
  border-color: transparent !important;
  color: #c05621 !important;
}

.marketing-page .price-card.featured {
  border-color: #c05621 !important;
  box-shadow: 0 18px 44px rgba(192, 86, 33, .12) !important;
}

body:not(.marketing-page) .logo em { color: #c05621 !important; }
body:not(.marketing-page) { background: #fdf8f0 !important; }
body:not(.marketing-page) .nav-cta {
  border-color: #2a2118 !important;
  background: #2a2118 !important;
  color: #fff !important;
}
body:not(.marketing-page) .button {
  border-color: #c05621 !important;
  background: #c05621 !important;
  color: #fff !important;
}

.app-shell,
.app-shell .main {
  background: #fdf8f0 !important;
}

.app-shell .eyebrow,
.app-shell .text-button,
.app-shell .role-mode-line button,
.app-shell .role-path-head button,
.app-shell .advanced-toggle,
.app-shell .brand > span:last-child > span {
  color: #c05621 !important;
}

.app-shell .nav-item.active {
  background: #f9e9de !important;
  color: #a94718 !important;
}

.app-shell .nav-item.active .icon {
  background: rgba(192, 86, 33, .12) !important;
  color: #a94718 !important;
}

.app-shell .primary-button,
.app-shell button.primary-button,
.modal .primary-button,
.auth-form .primary-button {
  border-color: #c05621 !important;
  background: #c05621 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.app-shell .primary-button:hover,
.modal .primary-button:hover {
  border-color: #a94718 !important;
  background: #a94718 !important;
}

.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: #c05621 !important;
  box-shadow: 0 0 0 4px rgba(192, 86, 33, .16) !important;
}

.app-shell .project-score-pill.good,
.app-shell .status-ready,
.app-shell .status-completed,
.app-shell .success-check,
.app-shell .feedback-success {
  background: #eaf1e8 !important;
  color: #2f5d3a !important;
}

.app-shell .project-score-pill.warning,
.app-shell .status-processing,
.app-shell .warning-banner {
  background: #f7ecdd !important;
  color: #8a571b !important;
}

.app-shell .project-score-pill.critical,
.app-shell .status-failed,
.app-shell .error-banner {
  background: #f7e5df !important;
  color: #a33a2b !important;
}

.app-shell .usage-summary article:nth-child(1)::before { background: #c05621 !important; }
.app-shell .usage-summary article:nth-child(2)::before { background: #2f5d3a !important; }
.app-shell .usage-summary article:nth-child(3)::before { background: #9a7048 !important; }
.app-shell .usage-summary article:nth-child(4)::before { background: #637a4f !important; }

.app-shell .tool-card[data-tool="analyzer"] .tool-footer button { border-color: #d7e2d4 !important; background: #eaf1e8 !important; color: #2f5d3a !important; }
.app-shell .tool-card[data-tool="glossary"] .tool-footer button { border-color: #dce5d4 !important; background: #f0f3e9 !important; color: #637a4f !important; }
.app-shell .tool-card[data-tool="style"] .tool-footer button { border-color: #ead9c1 !important; background: #f7ecdd !important; color: #9a7048 !important; }
.app-shell .tool-card[data-tool="translate"] .tool-footer button { border-color: #efd1c0 !important; background: #fbe9de !important; color: #c05621 !important; }
.app-shell .tool-card[data-tool="qa"] .tool-footer button { border-color: #e9cfc6 !important; background: #f7e5df !important; color: #8f402a !important; }

.app-shell .filter.active,
.app-shell .run-button,
.app-shell .target-upload button,
.modal .run-button,
.modal .target-upload button {
  border-color: #c05621 !important;
  background: #c05621 !important;
  color: #fff !important;
}

.app-shell .score-guide-intro {
  border-color: #ded2c1 !important;
  background: linear-gradient(135deg, #f9e9de, #fff) !important;
}
.app-shell .score-guide-intro > span { color: #a94718 !important; }
.app-shell .score-guide-list article { border-left-color: #c05621 !important; }

.app-shell .admin-learning-priority::before { background: #c05621 !important; }
.app-shell .badge,
.app-shell .feedback-pending-count {
  border-color: #efd1c0 !important;
  background: #f9e9de !important;
  color: #a94718 !important;
}
.app-shell .read-only-badge {
  border-color: #ded2c1 !important;
  background: #faf4ea !important;
  color: #62584d !important;
}

.modal-kicker,
.modal .modal-kicker,
.app-shell .modal-kicker {
  color: #c05621 !important;
}

.modal .source-only-note,
.modal .engine-note,
.modal .privacy-line {
  border-color: #ded2c1 !important;
  background: #faf4ea !important;
  color: #2f5d3a !important;
}
.modal .source-only-note > span,
.modal .privacy-line > span { color: #2f5d3a !important; }
.modal .engine-note > span { color: #c05621 !important; }

.modal .criteria-grid label {
  border-color: #ded2c1 !important;
  background: #fff !important;
}
.modal .criteria-grid label:has(input:checked) {
  border-color: #c7b7a1 !important;
  background: #faf4ea !important;
}
.modal .criteria-grid input { accent-color: #c05621 !important; }

.modal .trial-plan-summary,
.modal .plans article {
  border-color: #ded2c1 !important;
  background: #fff !important;
}
.modal .trial-plan-summary span { color: #2f5d3a !important; }
.modal .plans article.featured {
  border-color: #c05621 !important;
  box-shadow: 0 10px 24px rgba(192, 86, 33, .1) !important;
}
.modal .plans article.featured > i {
  background: #f9e9de !important;
  color: #a94718 !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; }
}

/* AI tool card layout — balanced, compact, and scannable */
.app-shell .tool-command-center {
  padding: 22px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .64) !important;
}

.app-shell .tool-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.app-shell .tool-card,
.app-shell .tool-card.translate-card,
.app-shell .tool-card.qa-card,
.app-shell .tool-card:not(.translate-card) {
  display: flex !important;
  flex-direction: column !important;
  grid-column: span 2 !important;
  min-width: 0 !important;
  min-height: 204px !important;
  padding: 18px !important;
  border: 1px solid var(--saas-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(42, 33, 24, .035) !important;
}

.app-shell .tool-grid[data-persona] .tool-card[data-tool] {
  grid-column: span 2 !important;
}

.app-shell .tool-grid[data-persona].three-card-row .tool-card[data-tool],
.app-shell .tool-grid[data-persona].business-simple-tools .tool-card[data-tool] {
  grid-column: auto !important;
}

.app-shell .tool-grid[data-persona].balance-last-row .tool-card[data-tool].balance-wide {
  grid-column: span 3 !important;
}

.app-shell .tool-card .tool-footer {
  width: 100% !important;
  margin-top: auto !important;
}

@media (max-width: 1100px) {
  .app-shell .tool-grid,
  .app-shell .tool-grid.balance-last-row,
  .app-shell .tool-grid.three-card-row,
  .app-shell .tool-grid.business-simple-tools,
  .app-shell .tool-grid.business-simple-tools.three-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .app-shell .tool-card,
  .app-shell .tool-card.translate-card,
  .app-shell .tool-card.qa-card,
  .app-shell .tool-card:not(.translate-card),
  .app-shell .tool-grid.balance-last-row .tool-card,
  .app-shell .tool-grid.balance-last-row .tool-card.balance-wide,
  .app-shell .tool-grid.three-card-row .tool-card,
  .app-shell .tool-grid.business-simple-tools .tool-card {
    grid-column: auto !important;
  }

  .app-shell .tool-grid[data-persona] .tool-card[data-tool],
  .app-shell .tool-grid[data-persona].balance-last-row .tool-card[data-tool].balance-wide,
  .app-shell .tool-grid[data-persona].three-card-row .tool-card[data-tool],
  .app-shell .tool-grid[data-persona].business-simple-tools .tool-card[data-tool] {
    grid-column: auto !important;
  }

  .app-shell .tool-grid[data-persona] .tool-card[data-tool].mobile-balance-wide,
  .app-shell .tool-grid[data-persona].balance-last-row .tool-card[data-tool].balance-wide.mobile-balance-wide {
    grid-column: span 2 !important;
  }
}

@media (max-width: 720px) {
  .app-shell .tool-command-center {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .app-shell .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .app-shell .tool-card,
  .app-shell .tool-card.translate-card,
  .app-shell .tool-card.qa-card,
  .app-shell .tool-card:not(.translate-card) {
    grid-column: auto !important;
    min-height: 190px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .app-shell .tool-grid[data-persona] .tool-card[data-tool],
  .app-shell .tool-grid[data-persona].balance-last-row .tool-card[data-tool].balance-wide,
  .app-shell .tool-grid[data-persona].three-card-row .tool-card[data-tool],
  .app-shell .tool-grid[data-persona].business-simple-tools .tool-card[data-tool] {
    grid-column: auto !important;
  }

  .app-shell .tool-grid[data-persona] .tool-card[data-tool].mobile-balance-wide,
  .app-shell .tool-grid[data-persona].balance-last-row .tool-card[data-tool].balance-wide.mobile-balance-wide {
    grid-column: span 2 !important;
    min-height: 170px !important;
  }

  .app-shell .tool-card h2,
  .app-shell .tool-card.translate-card h2,
  .app-shell .tool-card.qa-card h2 {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  .app-shell .tool-card p,
  .app-shell .tool-card.translate-card p,
  .app-shell .tool-card.qa-card p {
    -webkit-line-clamp: 4 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .app-shell .tool-card[data-tool] .tool-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  .app-shell .tool-footer > span {
    max-width: calc(100% - 40px);
    overflow: hidden;
    font-size: 9.5px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell .tool-footer button {
    width: 32px !important;
    height: 32px !important;
  }

  .marketing-page .feature-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 320px) !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    margin-inline: -20px !important;
    padding: 4px 20px 18px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 20px;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  .marketing-page .feature-card,
  .marketing-page .feature-card:nth-last-child(-n + 2) {
    grid-column: auto !important;
    min-height: 420px !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 340px) {
  .app-shell .tool-grid {
    grid-auto-flow: column !important;
    grid-auto-columns: min(84vw, 250px) !important;
    grid-template-columns: none !important;
    padding-bottom: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
  }

  .app-shell .tool-grid[data-persona] .tool-card[data-tool],
  .app-shell .tool-grid[data-persona] .tool-card[data-tool].mobile-balance-wide {
    grid-column: auto !important;
    scroll-snap-align: start;
  }
}

/* Sidebar AI tools — compact role-aware navigation rows */
.app-shell .side-tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 0;
}

.app-shell .side-tool-grid .side-tool-card {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 42px !important;
  margin: 2px 0 !important;
  padding: 9px 11px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #62584d !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.3;
  text-align: left;
}

.app-shell .side-tool-grid .side-tool-card > span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell .side-tool-grid .side-tool-card .icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px;
  border-radius: 7px !important;
  font-size: 12px !important;
}

.app-shell .side-tool-grid .side-tool-card[data-tool="analyzer"] .icon { background: #eaf1e8; color: #2f5d3a; }
.app-shell .side-tool-grid .side-tool-card[data-tool="glossary"] .icon { background: #f0f3e9; color: #637a4f; }
.app-shell .side-tool-grid .side-tool-card[data-tool="style"] .icon { background: #f7ecdd; color: #9a7048; }
.app-shell .side-tool-grid .side-tool-card[data-tool="translate"] .icon { background: #fbe9de; color: #c05621; }
.app-shell .side-tool-grid .side-tool-card[data-tool="qa"] .icon { background: #f7e5df; color: #8f402a; }

.app-shell .side-tool-grid .side-tool-card:hover {
  background: #f7f0e6 !important;
  color: var(--saas-heading) !important;
  transform: none;
}

.app-shell .side-tool-grid .side-tool-card.active {
  background: #f9e9de !important;
  color: #8f402a !important;
  font-weight: 700 !important;
}