/* ============================================================
   GMB Optimizer - premium theme layer (landing site + customer dashboard)

   Loaded by index.html AFTER the built bundle CSS (index-*.css), so it only
   overrides: design tokens first, then a few components. Nothing in the
   built JS/CSS is edited - to roll back, delete this file's <link> (and the
   Inter font <link> next to it) from index.html.
   Backup of the site before this layer:
   /home/runcloud/backups/gmboptimizer-site-before-landing-redesign-20261102.tar.gz

   Direction: the logo's own colours (green primary, navy for dark
   surfaces, red/yellow as small accents) instead of Google blue, Inter for
   body text, softer layered shadows, and the same white premium look as
   the staff CRM.
   ============================================================ */

:root {
    --brand-green: #019f46;
    --brand-red: #f04438;
    --brand-yellow: #fdbd01;
    --brand-navy: #111823;

    --primary: #019f46;
    --primary-hover: #018a3d;
    --primary-press: #017534;
    --primary-container: #e8f7ef;
    --on-primary-container: #016c32;
    --ring: 0 0 0 4px rgba(1, 159, 70, 0.16);

    --surface: #ffffff;
    --surface-variant: #f6f8fa;
    --surface-variant-2: #eef1f5;
    --surface-inverse: #0b1220;
    --outline: #d5dae3;
    --outline-variant: #e7eaf0;

    --text-primary: #0f1728;
    --text-secondary: #525c6e;
    --text-tertiary: #8a94a6;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
    --shadow-2: 0 6px 16px -4px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
    --shadow-3: 0 18px 36px -10px rgba(16, 24, 40, 0.16), 0 4px 10px -4px rgba(16, 24, 40, 0.06);
    --shadow-4: 0 28px 56px -14px rgba(16, 24, 40, 0.24), 0 6px 14px -6px rgba(16, 24, 40, 0.08);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --font-body: "Inter", Roboto, Arial, sans-serif;

    --brand-stripe: linear-gradient(90deg, #019f46 0 25%, #f92019 25% 50%, #fdbd01 50% 75%, #111823 75% 100%);
}

::selection { background: #c9f0da; color: #014d24; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 700; color: var(--text-primary); }
h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.012em; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; letter-spacing: -0.005em; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
    background: linear-gradient(180deg, #0bb453 0%, #019f46 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 1px 2px rgba(1, 80, 35, 0.25), 0 8px 20px -8px rgba(1, 159, 70, 0.55);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #03a84c 0%, #018a3d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 2px 4px rgba(1, 80, 35, 0.25), 0 12px 26px -10px rgba(1, 159, 70, 0.65);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:disabled { transform: none; box-shadow: none; }
.btn-outline { color: var(--text-primary); border-color: var(--outline); box-shadow: var(--shadow-1); }
.btn-outline .material-symbols-outlined { color: var(--primary); }
.btn-outline:hover { background: var(--surface-variant); border-color: #c3cad6; }
.btn-outline.on-dark .material-symbols-outlined { color: inherit; }
.btn-text:hover { background: var(--primary-container); color: var(--primary-press); }

/* ---------- Badges / chips ---------- */
.eyebrow {
    background: #fff;
    color: var(--primary-press);
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: inset 0 0 0 1px rgba(1, 159, 70, 0.22), 0 1px 2px rgba(16, 24, 40, 0.05);
}
.chip { font-weight: 600; }
.chip.green { color: #067647; background: #ecfdf3; box-shadow: inset 0 0 0 1px #abefc6; }
.chip.red { color: #b42318; background: #fef3f2; box-shadow: inset 0 0 0 1px #fecdca; }
.chip.yellow { color: #b54708; background: #fffaeb; box-shadow: inset 0 0 0 1px #fedf89; }

/* ---------- Header + mega menu ---------- */
.site-header {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
}
.site-header.scrolled { box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04), 0 10px 28px -16px rgba(16, 24, 40, 0.18); }
.nav-links a, .nav-trigger { color: #1d2939; }
.nav-links a:hover { background: var(--surface-variant-2); color: var(--text-primary); }
.nav-panel-inner { border-radius: 20px; overflow: hidden; }
.nav-panel-inner:before { background: var(--brand-stripe); }

/* ---------- Hero ---------- */
.hero, .page-hero { position: relative; isolation: isolate; }
.hero {
    background:
        radial-gradient(720px 420px at 88% -8%, rgba(1, 159, 70, 0.13), transparent 70%),
        radial-gradient(560px 360px at 2% 4%, rgba(253, 189, 1, 0.13), transparent 70%),
        radial-gradient(520px 300px at 55% 108%, rgba(240, 68, 56, 0.06), transparent 70%),
        var(--surface);
}
.page-hero {
    background:
        radial-gradient(640px 320px at 86% -12%, rgba(1, 159, 70, 0.11), transparent 70%),
        radial-gradient(520px 300px at 6% 0%, rgba(253, 189, 1, 0.10), transparent 70%),
        var(--surface);
}
/* A faint dot grid that fades out toward the edges. */
.hero::before, .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(15, 23, 40, 0.08) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000 30%, transparent 100%);
}
.hero-accent {
    color: var(--primary);
    background: linear-gradient(95deg, #019f46 0%, #17b866 55%, #08864a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.hero-accent:after {
    background: linear-gradient(90deg, #019f46, #fdbd01, #f04438);
    opacity: 0.35;
    height: 6px;
    bottom: 0;
}
.hero-sub { color: var(--text-secondary); }
.hero-trust li { color: #475467; font-weight: 500; }
.hero-trust .material-symbols-outlined { color: var(--primary); font-variation-settings: 'FILL' 1; }
.mock-card {
    border-radius: 24px;
    box-shadow: 0 32px 64px -24px rgba(16, 24, 40, 0.28), 0 0 0 1px rgba(16, 24, 40, 0.06);
}
.hero-float-badge { box-shadow: 0 14px 30px -10px rgba(16, 24, 40, 0.25), 0 0 0 1px rgba(16, 24, 40, 0.06); font-weight: 600; }

/* ---------- Stats band (dark navy) ---------- */
.stats {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(620px 320px at 12% 0%, rgba(1, 159, 70, 0.38), transparent 70%),
        radial-gradient(520px 280px at 92% 100%, rgba(253, 189, 1, 0.16), transparent 70%),
        linear-gradient(135deg, #0b1220 0%, #101b2d 55%, #0b2a1f 100%);
}
.stats::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 20%, transparent 100%);
    mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 20%, transparent 100%);
}
.stats-kicker { color: rgba(255, 255, 255, 0.66); font-size: 13px; letter-spacing: 0.12em; font-weight: 600; }
.stat-value {
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(180deg, #ffffff 35%, #b6efce 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-label { color: rgba(255, 255, 255, 0.68); }

/* ---------- Section heads ---------- */
.section-head p { color: var(--text-secondary); }

/* ---------- Cards (every marketing card shares .g-card) ---------- */
.g-card {
    border-color: var(--outline-variant);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.g-card.hoverable:hover {
    transform: translateY(-4px);
    border-color: rgba(1, 159, 70, 0.28);
    box-shadow: 0 22px 44px -18px rgba(16, 24, 40, 0.20), 0 2px 6px rgba(16, 24, 40, 0.04);
}
.audience-icon, .feature-item-icon, .tool-icon, .product-item-icon {
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.05);
}
.feature-item-icon, .product-item-icon { background: linear-gradient(180deg, #effaf4, #e2f5ea); }
.tool-icon { background: linear-gradient(180deg, #f6f8fa, #eef1f5); }
.audience-link, .insight-link { font-weight: 600; }

/* Segmented tabs (Manage / Improve / Grow, billing toggle). */
.tabs { box-shadow: var(--shadow-1); }
.tabs-indicator { background: linear-gradient(180deg, #0bb453, #019f46); box-shadow: 0 6px 14px -6px rgba(1, 159, 70, 0.6); }
.tab { font-weight: 600; }

/* Testimonials. */
.testimonial-rating { color: #f5b400; }
.testimonial-rating .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
.testimonial-quote { color: #1d2939; }
.testimonial-avatar { background: linear-gradient(135deg, #e8f7ef, #d3f0df); color: var(--primary-press); font-weight: 700; }

/* Pricing. */
.plan-card.highlighted { border-color: rgba(1, 159, 70, 0.55); box-shadow: 0 24px 48px -20px rgba(1, 159, 70, 0.35), 0 0 0 1px rgba(1, 159, 70, 0.35); }
.plan-badge { background: linear-gradient(180deg, #0bb453, #019f46); font-weight: 600; box-shadow: 0 6px 14px -6px rgba(1, 159, 70, 0.6); }
.plan-price { font-weight: 700; letter-spacing: -0.03em; }
.plan-features .material-symbols-outlined { color: var(--primary); }
.faq-item { border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.faq-item:hover { border-color: #d0d6df; box-shadow: var(--shadow-1); }
.faq-question { font-weight: 600; }

/* Newsletter strip. */
.newsletter {
    background:
        radial-gradient(500px 220px at 100% 0%, rgba(1, 159, 70, 0.08), transparent 70%),
        var(--surface-variant);
    border-top: 1px solid var(--outline-variant);
}
.newsletter-kicker { color: var(--primary-press); font-weight: 600; }

/* Final CTA: a dark navy panel. */
.final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(640px 320px at 50% 0%, rgba(1, 159, 70, 0.35), transparent 70%),
        radial-gradient(420px 260px at 8% 100%, rgba(253, 189, 1, 0.14), transparent 70%),
        radial-gradient(420px 260px at 94% 100%, rgba(240, 68, 56, 0.12), transparent 70%),
        linear-gradient(180deg, #0d1626 0%, #0b1220 100%);
}
.final-cta h2 { color: #fff; }
.final-cta-inner p { color: rgba(255, 255, 255, 0.72); }
.final-cta .btn-outline { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.28); box-shadow: none; }
.final-cta .btn-outline .material-symbols-outlined { color: inherit; }
.final-cta .btn-outline:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }

/* Footer. */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, #0b1220 0%, #080e19 100%);
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    /* The navy quarter of the brand stripe would vanish on the navy footer. */
    background: linear-gradient(90deg, #019f46 0 33.3%, #f92019 33.3% 66.6%, #fdbd01 66.6% 100%);
    opacity: 0.9;
}
.footer-col h4 { color: rgba(255, 255, 255, 0.5); font-weight: 600; letter-spacing: 0.1em; font-size: 12px; }
.footer-col a { color: rgba(255, 255, 255, 0.78); }
.footer-col a:hover { color: #6ee7a8; }

/* Misc marketing bits. */
.pill-link { box-shadow: var(--shadow-1); background: var(--surface); }
.survey-choice-card { border-width: 1px; box-shadow: var(--shadow-1); }
.survey-choice-card:hover { box-shadow: var(--shadow-2); }
.survey-choice-card.selected { box-shadow: var(--ring); }
.login-card, .checkout-card { box-shadow: var(--shadow-4); border-radius: 24px; position: relative; overflow: hidden; }
.login-card::before, .checkout-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--brand-stripe);
}

/* ---------- Form controls (marketing pages + dashboard) ---------- */
:is(.login-card, .demo-field, .survey-field, .biz-field, .dash-field, .checkout-field, .newsletter-form, .dash-reply-box, .lp-date, .biz-hours-row, .account-card, .composer-card, .live-lookup-form)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select, textarea),
.lp-textarea {
    border: 1px solid var(--outline);
    background-color: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: border-color .15s, box-shadow .15s;
}
:is(.login-card, .demo-field, .survey-field, .biz-field, .dash-field, .checkout-field, .newsletter-form, .dash-reply-box, .lp-date, .biz-hours-row, .account-card, .composer-card, .live-lookup-form)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select, textarea):hover:not(:focus),
.lp-textarea:hover:not(:focus) { border-color: #b8c0cc; }
:is(.login-card, .demo-field, .survey-field, .biz-field, .dash-field, .checkout-field, .newsletter-form, .dash-reply-box, .lp-date, .biz-hours-row, .account-card, .composer-card, .live-lookup-form)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select, textarea):focus,
.lp-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 1; }

/* Every select gets the same chevron. */
select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px !important;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}
select:not([multiple]):focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23019f46' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); }

input[type=date]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .75;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 17px no-repeat;
}
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

input[type=checkbox]:not(.biz-check-chip input), input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #c3cad5;
    border-radius: 5px;
    background: #fff center / 12px no-repeat;
    vertical-align: -4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--primary); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: var(--ring); }
input[type=checkbox]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
input[type=radio]:checked { background-color: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 3.5px #fff; }

/* ============================================================
   Customer dashboard
   ============================================================ */
.dash-shell { background: #f5f7fa; }

.dash-sidebar { border-right-color: var(--outline-variant); }
.dash-sidebar-head { padding: 22px 20px 18px; border-bottom: 1px solid #eef0f4; }
.dash-nav { padding: 12px 12px; }
.dash-nav-item { position: relative; color: #475467; font-weight: 500; }
.dash-nav-item .material-symbols-outlined { color: #667085; transition: color .15s; }
.dash-nav-item:hover { background: #f2f4f7; color: var(--text-primary); }
.dash-nav-item:hover .material-symbols-outlined { color: var(--text-primary); }
.dash-nav-item.active { background: var(--primary-container); color: var(--primary-press); font-weight: 600; }
.dash-nav-item.active .material-symbols-outlined { color: var(--primary); font-variation-settings: 'FILL' 1, 'wght' 500; }
.dash-nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}
/* "Log out" (the first footer item) warns in red on hover. */
.dash-sidebar-foot .dash-nav-item:first-child:hover { background: #fef3f2; color: #b42318; }
.dash-sidebar-foot .dash-nav-item:first-child:hover .material-symbols-outlined { color: #b42318; }

.dash-topbar {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}
.dash-business-switch {
    background: #fff;
    border-color: var(--outline);
    box-shadow: var(--shadow-1);
    font-weight: 600;
    transition: border-color .15s, box-shadow .15s;
}
.dash-business-switch:hover { border-color: #b8c0cc; box-shadow: var(--shadow-2); }
.dash-icon-btn { border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.dash-icon-btn:hover { background: #fff; border-color: var(--outline-variant); box-shadow: var(--shadow-1); }
.dash-avatar { background: linear-gradient(135deg, #0bb453, #017534); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(1, 159, 70, 0.25); }

.trial-banner { border-bottom-color: var(--outline-variant); font-weight: 500; }
.trial-banner.active { color: #067647; background: linear-gradient(90deg, #ecfdf3 0%, #f4fcf7 60%, #ffffff 100%); border-bottom-color: #d1f2df; }
.trial-banner.expired { color: #b42318; background: linear-gradient(90deg, #fef3f2 0%, #fff8f7 60%, #ffffff 100%); border-bottom-color: #fde2df; }
.dash-banner { box-shadow: inset 0 0 0 1px rgba(1, 159, 70, 0.18); }

.dash-welcome h1 { letter-spacing: -0.03em; }
.dash-welcome p { color: var(--text-secondary); }
.dash-section-head h2 { letter-spacing: -0.02em; }
.dash-section-link { font-weight: 600; }

.dash-stat-card { transition: transform .15s, box-shadow .15s, border-color .15s; }
.dash-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.dash-stat-icon { border-radius: 13px; background: linear-gradient(180deg, #effaf4, #e2f5ea); box-shadow: inset 0 0 0 1px rgba(1, 159, 70, 0.10); }
.dash-stats-grid > :nth-child(2) .dash-stat-icon { background: linear-gradient(180deg, #fff8e1, #ffefc2); color: #c68a00; box-shadow: inset 0 0 0 1px rgba(245, 180, 0, 0.18); }
.dash-stats-grid > :nth-child(3) .dash-stat-icon { background: linear-gradient(180deg, #eef1f6, #e3e8f0); color: var(--brand-navy); box-shadow: inset 0 0 0 1px rgba(17, 24, 35, 0.08); }
.dash-stats-grid > :nth-child(4) .dash-stat-icon { background: linear-gradient(180deg, #fef3f2, #fde4e1); color: var(--brand-red); box-shadow: inset 0 0 0 1px rgba(240, 68, 56, 0.14); }
.dash-stat-value { font-weight: 700; letter-spacing: -0.02em; }

.dash-table th { background: #f8fafc; color: #667085; font-weight: 600; font-size: 11.5px; letter-spacing: .05em; }
.dash-table tbody tr { transition: background-color .12s; }
.dash-table tbody tr:hover { background: #f8fafc; }

.biz-global-tabs { background: #f2f4f7; border-color: var(--outline-variant); }
.biz-gtab { font-weight: 600; }
.biz-gtab.active { color: var(--text-primary); box-shadow: var(--shadow-1); }
.biz-gtab.active .material-symbols-outlined { color: var(--primary); }

.lp-kpi { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }

@media (prefers-reduced-motion: reduce) {
    .btn-primary:hover, .g-card.hoverable:hover, .dash-stat-card:hover { transform: none; }
}