/* ═══════════════════════════════════════════════════════════ MARKETING THEME — Forest Green design tokens Shared by all static marketing pages (index, SEO landing pages, upgrade, terms, privacy, ai-transparency). Mirrors src/global.css so the public site matches the app's light/dark mode exactly. Toggle via [data-theme="dark"] on . ═══════════════════════════════════════════════════════════ */ :root { color-scheme: light; --surface: #F7F5F0; --surface-muted: #EEEAE2; --surface-raised: #FFFFFF; --border: #D8D3C8; --border-strong: #C0B898; --text-primary: #2A2C28; --text-secondary: #6B6A58; --text-muted: #A09880; --primary: #4A6741; --primary-tint: #DFF0D8; --primary-text: #2D5224; --amber: #C8912A; --amber-tint: #FDF0D8; --amber-text: #8A5C10; --teal: #6AA898; --teal-tint: #EAF0EE; --teal-text: #3A5850; --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-heavy: 0 8px 28px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05); } [data-theme="dark"] { color-scheme: dark; --surface: #1A1D1A; --surface-muted: #141614; --surface-raised: #222520; --border: #2C302C; --border-strong: #4A5048; --text-primary: #E8E6DF; --text-secondary: #C0BDB0; --text-muted: #6B7260; --primary: #5A8050; --primary-tint: #1E2A1C; --primary-text: #8EC87E; --amber: #C8912A; --amber-tint: #2A2010; --amber-text: #C8912A; --teal: #6AA898; --teal-tint: #182022; --teal-text: #6AA898; --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.4); } /* ── Base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-secondary); background: var(--surface); min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 160ms ease, color 160ms ease; } a { color: var(--primary-text); text-decoration: none; } a:hover { color: var(--primary); text-decoration: underline; } ul { list-style: none; } img { display: block; max-width: 100%; } .container { max-width: 980px; margin: 0 auto; padding: 0 24px; } /* ── Nav ──────────────────────────────────────────────────────── */ .site-nav { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; text-decoration: none; } .logo:hover { color: var(--primary-text); text-decoration: none; } .logo img { width: 26px; height: 26px; border-radius: 6px; } .nav-links { display: flex; align-items: center; gap: 18px; } .nav-links a:not(.btn) { color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; } .nav-links a:not(.btn):hover { color: var(--text-primary); text-decoration: none; } /* ── Theme toggle ─────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--text-secondary); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-toggle__icon { width: 16px; height: 16px; } .theme-toggle__icon--moon { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: none; } [data-theme="dark"] .theme-toggle__icon--moon { display: block; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; padding: 11px 24px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease; white-space: nowrap; line-height: 1; } .btn:active { transform: scale(0.975); } .btn:hover { text-decoration: none; } .btn-primary { background: linear-gradient(45deg, var(--primary), var(--teal)); color: #ffffff; box-shadow: 0 4px 22px color-mix(in srgb, var(--primary) 40%, transparent); } .btn-primary:hover { box-shadow: 0 6px 32px color-mix(in srgb, var(--primary) 55%, transparent); transform: translateY(-1px); color: #ffffff; } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); border-color: var(--text-muted); color: var(--text-primary); } .btn-lg { padding: 13px 28px; font-size: 1rem; border-radius: 10px; } .btn-xl { padding: 15px 36px; font-size: 1.05rem; border-radius: 10px; } /* ── Hero ─────────────────────────────────────────────────────── */ .hero { position: relative; padding: clamp(64px, 11vh, 130px) 24px; text-align: center; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 68%); pointer-events: none; } .hero-inner { position: relative; max-width: 780px; margin: 0 auto; } .eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal-text); background: var(--teal-tint); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); border-radius: 999px; padding: 5px 14px; margin-bottom: 18px; } .hero .eyebrow { margin-bottom: 22px; } .hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; color: var(--text-primary); margin: 0 0 22px; } .hero h1 .grad { background: linear-gradient(90deg, var(--primary) 0%, var(--teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-secondary); max-width: 600px; margin: 0 auto 36px; line-height: 1.72; } .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero p.hero-note { margin-top: 36px; font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; } /* ── Page hero (SEO landing pages) ───────────────────────────────── */ .page-hero { position: relative; text-align: center; padding: clamp(56px, 9vh, 110px) 24px clamp(44px, 7vh, 88px); overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 68%); pointer-events: none; } .page-hero-inner { position: relative; max-width: 600px; margin: 0 auto; } .page-hero h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.025em; } .page-hero p { font-size: 1.05rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto; line-height: 1.65; } .page-hero p.hero-note { margin-top: 16px; font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; } /* ── Trust strip ──────────────────────────────────────────────── */ .trust-strip { background: var(--surface-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 16px 24px; } .trust-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; align-items: center; } .trust-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); } .trust-item .icon { font-size: 1rem; } /* ── Sections ─────────────────────────────────────────────────── */ .section { background: var(--surface-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(56px, 9vh, 110px) 0; } .section.dark { background: var(--surface); } .section-title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); text-align: center; margin-bottom: 12px; } .section-sub { color: var(--text-secondary); text-align: center; max-width: 520px; margin: 0 auto 52px; font-size: 1.05rem; line-height: 1.65; } /* ── Features grid ────────────────────────────────────────────── */ .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .feature-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: border-color 160ms, transform 160ms; } .feature-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); transform: translateY(-2px); } .feature-icon { font-size: 26px; display: block; margin-bottom: 12px; } .feature-title { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 7px; } .feature-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.62; margin: 0; } .badge-pro { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--teal-text); background: var(--teal-tint); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); padding: 2px 7px; border-radius: 5px; margin-left: 6px; vertical-align: middle; } /* ── Pricing ──────────────────────────────────────────────────── */ .pricing-section { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-muted) 100%); padding: clamp(56px, 9vh, 110px) 0; } .pricing-section-inline { max-width: 980px; margin: 0 auto; padding: 56px 24px 80px; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 0 auto; } .plan-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 20px; padding: 34px 30px; display: flex; flex-direction: column; } .plan-card.featured { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: linear-gradient(175deg, var(--primary-tint) 0%, var(--surface-raised) 50%); box-shadow: 0 0 60px color-mix(in srgb, var(--primary) 10%, transparent); } .plan-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; background: linear-gradient(45deg, var(--primary), var(--teal)); border-radius: 999px; padding: 4px 13px; margin-bottom: 14px; width: fit-content; } .plan-name { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 10px; } .plan-price { font-size: 40px; font-weight: 900; color: var(--text-primary); letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; } .plan-price sub { font-size: 16px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; vertical-align: baseline; } .featured .plan-price { background: linear-gradient(90deg, var(--primary), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .plan-annual { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 24px; } .plan-annual.muted { color: var(--text-muted); } .featured .plan-annual { color: var(--teal-text); } .plan-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; } .plan-feature { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.45; } .plan-feature .check { color: var(--primary); font-weight: 900; flex-shrink: 0; margin-top: 1px; } .featured .plan-feature .check { color: var(--primary-text); } .plan-cta { margin-top: auto; padding-top: 20px; } /* ── SEO links grid ───────────────────────────────────────────── */ .seo-links-section { background: var(--surface-muted); border-top: 1px solid var(--border); padding: clamp(48px, 8vh, 90px) 0; } .seo-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .seo-link-card { display: block; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; transition: border-color 140ms, transform 140ms; text-decoration: none; } .seo-link-card:hover { border-color: color-mix(in srgb, var(--teal) 45%, transparent); transform: translateY(-2px); text-decoration: none; } .seo-link-card .slc-title { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; line-height: 1.3; } .seo-link-card .slc-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin: 0; } /* ── Footer ───────────────────────────────────────────────────── */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 32px 0; } .footer-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-inner p { color: var(--text-muted); font-size: 0.8rem; margin: 0; } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-links a { color: var(--text-muted); font-size: 0.8rem; } .footer-links a:hover { color: var(--text-secondary); text-decoration: none; } /* ── CTA section ──────────────────────────────────────────────── */ .cta-section { padding: clamp(56px, 9vh, 110px) 24px; text-align: center; } .cta-section h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; color: var(--text-primary); margin-bottom: 14px; } .cta-section p { color: var(--text-secondary); max-width: 480px; margin: 0 auto 32px; line-height: 1.7; } /* ── Legal page content (terms / privacy) ────────────────────────── */ .content { max-width: 900px; margin: 0 auto; padding: 56px 24px 80px; } .content h1 { font-size: 2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.025em; } .content .meta { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 40px; } .content h2 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .content h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin: 20px 0 6px; } .content p { color: var(--text-secondary); margin-bottom: 12px; font-size: 0.9375rem; } .content ul { padding-left: 20px; margin-bottom: 12px; } .content li { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: 6px; list-style: disc; } /* ── Prose (long-form SEO content) ───────────────────────────────── */ .prose { max-width: 680px; margin: 0 auto; } .prose h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; color: var(--text-primary); margin: 0 0 16px; letter-spacing: -0.02em; } .prose p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.75; font-size: 1rem; } .prose ul { margin: 0 0 20px 0; } .prose ul li { color: var(--text-secondary); font-size: 0.95rem; padding: 5px 0 5px 22px; position: relative; line-height: 1.6; } .prose ul li::before { content: '✓'; position: absolute; left: 0; color: var(--primary-text); font-weight: 700; } /* ── Callout ──────────────────────────────────────────────────── */ .callout { background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 10px; padding: 16px 20px; margin: 20px 0; } .callout p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); } .callout strong { color: var(--text-primary); } /* ── Checklist ────────────────────────────────────────────────── */ .checklist { max-width: 680px; margin: 0 auto; } .checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); } .checklist-item:last-child { border-bottom: none; } .check-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .check-body h3 { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; } .check-body p { font-size: 0.84rem; color: var(--text-muted); margin: 0; line-height: 1.55; } /* ── Steps / workflow ─────────────────────────────────────────── */ .steps { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin: 0 auto; } .step { display: flex; gap: 20px; align-items: flex-start; } .step-num { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(45deg, var(--primary), var(--teal)); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 800; color: #ffffff; flex-shrink: 0; margin-top: 2px; } .step-body h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .step-body p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin: 0; } /* ── FAQ list (definition-list style) ────────────────────────────── */ .faq-list { margin-top: 32px; } .faq-list dt { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 20px 0 8px; } .faq-list div:first-child dt { margin-top: 0; } .faq-list dd { color: var(--text-secondary); line-height: 1.75; margin: 0; } .faq-q { font-weight: 600; color: var(--text-primary); margin-bottom: 8px; font-size: 0.9375rem; } .faq-a { color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; } /* ── FAQ (heading + item list style) ─────────────────────────────── */ .faq { max-width: 780px; margin: 0 auto 80px; padding: 0 24px; } .faq h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-bottom: 32px; text-align: center; } .faq-item { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 20px; } .faq-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } /* ── Chat demo ────────────────────────────────────────────────── */ .chat-demo { max-width: 600px; margin: 0 auto; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .chat-demo h3 { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; } .chat-q { background: linear-gradient(45deg, color-mix(in srgb, var(--primary) 16%, transparent), color-mix(in srgb, var(--teal) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); border-radius: 10px 10px 2px 10px; padding: 12px 16px; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 10px; font-style: italic; } .chat-a { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 2px 10px 10px 10px; padding: 12px 16px; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; } .chat-a strong { color: var(--primary-text); } /* ── Criteria / role / view / workload cards ─────────────────────── */ .criteria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .criteria-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .criteria-card .c-icon { font-size: 22px; margin-bottom: 10px; display: block; } .criteria-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .criteria-card p { font-size: 0.84rem; color: var(--text-muted); line-height: 1.62; margin: 0; } .criteria-card .verdict { margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--primary-text); } .roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .role-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .role-card .role-title { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; } .role-card .role-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: 0; } .views-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .view-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; text-align: center; } .view-card .view-icon { font-size: 28px; margin-bottom: 10px; } .view-card .view-name { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; } .view-card .view-use { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } .workload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 24px; } .workload-pill { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); } .workload-pill .pill-icon { font-size: 1.2rem; flex-shrink: 0; } /* ── Tables: comparison / comp / feature ─────────────────────────── */ .comparison { max-width: 980px; margin: 0 auto 80px; padding: 0 24px; } .comparison h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-bottom: 24px; text-align: center; } .comp-table, .comparison-table, .feature-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .comparison-table { max-width: 720px; margin: 0 auto; } .feature-table { margin: 16px 0 24px; } .comp-table th, .feature-table th { padding: 10px 16px; text-align: left; background: var(--surface-raised); border: 1px solid var(--border); font-weight: 600; color: var(--text-primary); } .comp-table th:nth-child(2), .comp-table th:nth-child(3) { text-align: center; width: 100px; } .comp-table td, .feature-table td { padding: 10px 16px; border: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; } .comp-table td:nth-child(2), .comp-table td:nth-child(3) { text-align: center; } .comp-table tr:nth-child(even) td, .feature-table tr:nth-child(even) td { background: var(--surface-muted); } .comp-table .yes, .comparison-table .yes { color: var(--primary); font-weight: 700; } .comp-table .no { color: var(--text-muted); } .comparison-table th { padding: 14px 18px; text-align: left; font-size: 0.875rem; font-weight: 700; border-bottom: 2px solid var(--border-strong); color: var(--text-primary); } .comparison-table td { padding: 12px 18px; font-size: 0.875rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); } .comparison-table th:nth-child(2) { text-align: center; color: var(--text-muted); } .comparison-table th:nth-child(3) { text-align: center; background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 8px 8px 0 0; color: var(--primary-text); } .comparison-table td:nth-child(2) { text-align: center; } .comparison-table td:nth-child(3) { text-align: center; background: color-mix(in srgb, var(--primary) 4%, transparent); } .comparison-table .no { color: var(--text-muted); font-size: 1rem; } .comparison-table .yes { font-size: 1rem; } .comparison-table .partial { color: var(--amber); font-size: 0.8rem; font-weight: 600; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 720px) { .features-grid, .pricing-grid, .roles-grid { grid-template-columns: 1fr; } .criteria-grid { grid-template-columns: 1fr; } .nav-hide-mobile { display: none; } .plan-card { max-width: 100%; } .comp-table, .comparison-table { font-size: 0.8rem; } .comparison-table th, .comparison-table td { padding: 10px 10px; } } @media (max-width: 480px) { .hero-ctas { flex-direction: column; align-items: center; } .hero-ctas .btn { width: 100%; max-width: 320px; text-align: center; justify-content: center; } }