/* Shared chrome for the comparison pages (compare.html and the pages it links to).

   The older landing pages each inline their own copy of these rules. The comparison pages share
   one file instead, served verbatim from public/ at /compare.css, because there are seven of them
   and the chrome must stay identical while the content of each page is deliberately different.
   Each page keeps its own layout rules in an inline <style>.

   The nav, footer and cookie rules are copied from pricing.html. If those change there, change
   them here too. */

:root {
    --brand: #4A8DDA;
    --primary: #4A8DDA;
    --primary-hover: #3B7BC6;
    --primary-pressed: #2F66AC;
    --on-primary: #FFFFFF;
    --primary-container: #D8E8FB;
    --on-primary-container: #0B3D6B;
    --ink: #0F172A;
    --on-surface: #16202C;
    --on-surface-variant: #4C5A6B;
    --muted-2: #64748B;
    --surface: #FFFFFF;
    --surface-page: #FAFCFF;
    --surface-1: #F4F7FC;
    --surface-container: #EEF3FB;
    --outline-variant: #E5EBF3;
    --dark: #0F1B2D;
    --good: #1E7F4F;
    --good-bg: #E6F4EC;
    --warn: #9A5B00;
    --warn-bg: #FFF4E0;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-full: 999px;
    --shadow: 0 2px 6px rgba(16, 32, 54, .08), 0 1px 2px rgba(16, 32, 54, .06);
    --shadow-lg: 0 16px 40px rgba(13, 27, 42, .14);
    --font-display: 'Google Sans', Roboto, sans-serif;
    --font-body: Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--on-surface);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }
.prose a, a.inline { color: var(--primary-pressed); text-decoration: underline; text-underline-offset: 2px; }

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

/* ── Nav ── */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 252, 255, .82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--outline-variant);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; color: var(--primary); line-height: 1; }
.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1px solid var(--outline-variant); border-radius: var(--radius-full);
    background: transparent; color: var(--on-surface); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--surface-1); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-menu { display: contents; }
.nav-links { display: flex; gap: 30px; color: var(--on-surface-variant); font-family: var(--font-display); font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.current { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.link-signin {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--on-surface-variant); font-family: var(--font-display); font-size: 14px; font-weight: 500;
    padding: 9px 16px; border-radius: var(--radius-full); transition: background .2s ease, color .2s ease;
}
.link-signin:hover { background: var(--surface-1); color: var(--ink); }
.getapp {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px;
    border-radius: var(--radius-full); background: var(--primary-container); color: var(--on-primary-container);
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
.getapp-label { margin-right: 2px; }
.getapp-store {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.getapp-store:hover { box-shadow: 0 0 0 2px var(--primary); transform: translateY(-1px); }
.getapp-store .icon-store { width: 16px; height: 16px; }

@media (max-width: 1100px) {
    .nav-toggle { display: inline-flex; }
    .nav-menu {
        display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--surface-page); border-bottom: 1px solid var(--outline-variant);
        box-shadow: var(--shadow-lg); padding: 14px 24px 18px;
    }
    .nav-inner.open .nav-menu { display: flex; }
    .nav-links { flex-direction: column; gap: 2px; font-size: 15px; }
    .nav-links a { padding: 11px 10px; border-radius: 10px; }
    .nav-links a:hover { background: var(--surface-1); }
    .nav-actions { margin-top: 8px; }
    .nav-actions .getapp { padding: 4px 4px 4px 16px; }
    .nav-actions .getapp-store { width: 38px; height: 38px; }
    .nav-actions .getapp-store .icon-store { width: 18px; height: 18px; }
}

/* ── Shared type ── */
.kicker {
    display: inline-flex; font-family: var(--font-display); font-size: 12px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--primary-pressed);
    background: var(--primary-container); padding: 6px 14px; border-radius: var(--radius-full); margin-bottom: 18px;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; line-height: 1.15; }
h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; margin: 0 0 12px; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.lede { font-size: 17px; line-height: 1.65; color: var(--on-surface-variant); }
.prose p, .prose li { font-size: 16px; line-height: 1.7; color: var(--on-surface); }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; }
.prose li { margin-bottom: 6px; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600;
    font-size: 14px; padding: 12px 22px; border-radius: var(--radius-full); cursor: pointer; border: none;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.btn-outline { background: var(--surface); color: var(--ink); border: 1px solid var(--outline-variant); }
.btn-outline:hover { background: var(--surface-1); }

/* ── A plain comparison table, used by some pages and not others ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: var(--surface); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--outline-variant); vertical-align: top; line-height: 1.5; }
.cmp-table thead th { font-family: var(--font-display); font-size: 14px; background: var(--surface-1); color: var(--ink); }
.cmp-table tbody th { font-weight: 500; color: var(--on-surface-variant); width: 30%; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; }
.cmp-table .us { background: #F5F9FF; }

/* ── Final CTA ── */
.final-cta {
    max-width: 640px; margin: 24px auto 72px; text-align: center; background: var(--surface);
    border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); padding: 40px 32px;
}
.final-cta h2 { font-size: 22px; margin: 0 0 10px; }
.final-cta p { font-size: 14.5px; line-height: 1.6; color: var(--on-surface-variant); margin: 0 0 22px; }
.final-cta-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* The "checked on" note: other companies' prices and features change, and saying when we looked
   is what keeps a comparison honest after it goes stale. */
.fine {
    font-size: 13px; line-height: 1.6; color: var(--muted-2);
    border-top: 1px solid var(--outline-variant); padding-top: 18px; margin: 48px 0 0;
}

.more-compare { margin: 56px 0 0; }
.more-compare h2 { font-size: 18px; }
.more-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.more-compare a {
    display: inline-block; padding: 8px 14px; border-radius: var(--radius-full); font-size: 14px;
    background: var(--surface); border: 1px solid var(--outline-variant); color: var(--on-surface-variant);
}
.more-compare a:hover { color: var(--ink); background: var(--surface-1); }

/* ── Footer ── */
footer { border-top: 1px solid var(--outline-variant); padding: 28px 0; background: var(--surface-page); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer .wordmark { font-size: 19px; }
.footer-meta { color: var(--muted-2); font-size: 13px; }
.footer-links { display: flex; gap: 18px; color: var(--on-surface-variant); font-size: 13px; }
.footer-links a:hover { color: var(--on-surface); }

/* ── Cookie banner ── */
.cookie {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 60;
    display: flex; align-items: center; gap: 14px; max-width: 560px; width: calc(100% - 32px);
    background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: 16px 20px; opacity: 0; visibility: hidden;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.cookie.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cookie-icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-container);
    color: var(--primary-pressed); display: flex; align-items: center; justify-content: center;
}
.cookie-icon svg { width: 17px; height: 17px; }
.cookie-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--on-surface-variant); margin: 0; }
.cookie-text strong { color: var(--ink); }
.cookie-actions { flex-shrink: 0; display: flex; gap: 8px; }
.cookie-actions .btn { padding: 9px 18px; font-size: 13px; }
.btn-cookie-cancel { background: transparent; color: var(--on-surface-variant); border: 1px solid var(--outline-variant); }
.btn-cookie-cancel:hover { background: var(--surface-1); }

@media (max-width: 600px) {
    .cookie { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-icon { align-self: center; }
    .cookie-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 640px) {
    .container, .narrow { padding: 0 16px; }
    .final-cta { padding: 32px 22px; }
    .footer-inner { flex-direction: column; text-align: center; }
}