/* AEOTrack design system v2 (Nov 2026): Lexend + Nunito Sans, purple #6a1fe0, ink #121633, lilac tints. Loaded last on every page. */
@font-face{font-family:"Lexend";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/lexend-latin-wght-v26.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/nunitosans-latin-wght-v19.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root,[data-theme],[data-theme="light"],[data-theme="dark"]{
--primary:#6a1fe0;--primary-hover:#5a12c9;--secondary:#a874ff;--text:#121633;--text-muted:#545a6e;--bg:#ffffff;--bg-alt:#f4f6fb;
--card-bg:#ffffff;--card-border:#e7e8f0;--border:#e7e8f0;--badge-bg:#efe6ff;--badge-text:#6a1fe0;--glow:rgba(106,31,224,.18);
--nav-bg:rgba(255,255,255,.94);--footer-bg:#0c0f2b;--footer-text:#a9abc6;--footer-heading:#ffffff;--footer-border:#1f2347;
--va-ink:#121633;--va-tint:#f4f6fb;--va-line:#e7e8f0;
--font-heading:"Lexend",system-ui,-apple-system,sans-serif;--font-body:"Nunito Sans",system-ui,-apple-system,sans-serif;
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px}
body{font-family:var(--font-body)!important;color:#545a6e;background:#fff}
h1,h2,h3,h4,.section-title,.cta-title{font-family:var(--font-heading)!important;color:#121633;letter-spacing:-.01em}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4{color:#fff}
a{color:inherit}
p a,li a,.faq-answer a{color:#6a1fe0}
/* header */
.site-header{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(8px);border-bottom:1px solid #eceef4!important;box-shadow:none!important}
.site-nav a{font-weight:700;color:#121633!important}.site-nav a:hover{color:#6a1fe0!important}
.site-logo img.desktop-logo,img[data-logo-img]{width:auto!important;object-fit:contain;max-width:none}
.site-logo img.desktop-logo{height:32px!important}
@media (min-width:640px){.auth-buttons{display:flex;gap:12px;align-items:center}}
/* buttons */
.btn,.btn-primary,.btn-outline,.cta-btn,.site-header-cta,button[type=submit]{font-family:var(--font-body);font-weight:700;border-radius:40px!important;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;white-space:nowrap;letter-spacing:.02em;transition:background .2s,transform .2s,box-shadow .2s}
.btn-primary,.btn.btn-primary,.site-header-cta,button[type=submit]{background:#6a1fe0!important;color:#fff!important;border:2px solid #6a1fe0!important;box-shadow:0 8px 20px rgba(106,31,224,.22)}
.btn-primary:hover,.site-header-cta:hover,button[type=submit]:hover{background:#5a12c9!important;border-color:#5a12c9!important;transform:translateY(-1px)}
.btn-outline,.btn.btn-outline{background:transparent!important;color:#6a1fe0!important;border:2px solid #6a1fe0!important}
.btn-outline:hover{background:#efe6ff!important}
.btn-sm{min-height:40px;padding:8px 18px!important}
.hero-ctas,.cta-buttons,.hero-buttons,.btn-row,.cta-row,.hero-actions,.va-ctas,[class*="cta-group"],[class*="-ctas"]{display:flex!important;flex-wrap:wrap;gap:12px!important;align-items:center}
/* sections, cards */
.section-header .eyebrow,.eyebrow,.badge,.section-badge,.kicker{color:#6a1fe0!important;background:transparent!important;font-weight:700;display:inline-flex;align-items:center;gap:10px}
.section-header .eyebrow:after,.eyebrow:after,.section-badge:after,.kicker:after{content:"";width:28px;height:2px;background:#6a1fe0}
.feature-card,.step-card,.why-card,.worth-card,.plan,.pricing-card,.card,.faq-item,.blog-card,.post-card,.intg-card,.hiw-card,[class$="-card"]:where(:not(.trial-cta-card,.final-cta-card,.ai-visibility-card)){background:#fff;border:1px solid #eceef4!important;border-radius:12px!important;box-shadow:0 6px 24px rgba(20,20,60,.05)}
.feature-icon,[class*="icon-wrap"]{color:#6a1fe0;background:#efe6ff!important;border-radius:12px}
.gradient-hero,.hero,.hero-v2,.va-hero,.page-hero,[class*="hero-section"]{background:radial-gradient(900px 500px at 15% 10%,#ece2ff,transparent),radial-gradient(700px 500px at 85% 60%,#efe7ff,transparent),#fff!important}
section.section:nth-of-type(even),.bg-alt{background:#f4f6fb}
.plan.featured,.plan.popular,.pricing-card.featured,.plan.is-popular{background:#0c0f2b!important;color:#c9c8e0}
.plan.featured h3,.plan.popular h3,.pricing-card.featured h3{color:#fff}
.faq-question{font-family:var(--font-heading);color:#121633}
/* product illustration replacement */
.v2-ill{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
/* footer */
.site-footer{background:#0c0f2b!important;color:#a9abc6!important}
.site-footer a{color:#a9abc6!important}.site-footer a:hover{color:#fff!important}
.site-footer img[data-logo-img],.footer-logo img{height:30px!important;width:auto!important}
img{max-width:100%;height:auto}
@media (max-width:640px){.btn,.btn-primary,.btn-outline{white-space:normal;text-align:center}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* homepage */
.hero-v2-grid{display:grid!important;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero-v2-visual .v2-ill{max-width:540px}
.va-ill{max-width:620px;margin:32px auto 0}
.engine-logos{gap:40px!important}
.aeo-embed-form{display:flex;gap:12px;flex-wrap:wrap}
.aeo-embed-form input{border-radius:40px!important;border:1px solid #d9dbe6!important;padding:12px 18px!important;min-height:48px}
@media (max-width:900px){.hero-v2-grid{grid-template-columns:1fr}.hero-v2-visual .v2-ill{max-width:420px}}
/* dark footer: white logo variant (same 4:1 file set) */
.site-footer .site-logo img,#footer-logo-img{content:url(/images/primary-logo-white.webp);height:32px!important;width:auto!important;aspect-ratio:4/1}
/* ── Consistency layer (6 Nov 2026) ─────────────────────────────────────
   One look on every page, measured across 78 pages at 390, 820 and 1366 px:
   header buttons came in five sizes (36 to 60 px tall), headings from 30 to
   60 px for the same role, and FAQs in four layouts. */
:root{color-scheme:only light}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* header: the same buttons, 40 px tall, on every page. /about and
   /what-is-aeo-tracking sized them content-box (59 px tall). */
.site-header *,.sidebar-drawer *,.btn,.btn-primary,.btn-outline{box-sizing:border-box}
.site-header .auth-buttons a{height:40px;min-height:40px!important;padding:0 18px!important;font-size:14px!important;font-weight:700!important;line-height:1!important;border-radius:999px!important;letter-spacing:.01em;white-space:nowrap}
.site-header .auth-buttons .btn-outline{background:#fff!important;color:#6a1fe0!important;border:2px solid #6a1fe0!important;box-shadow:none}
.site-header .auth-buttons .btn-primary{box-shadow:0 6px 16px rgba(106,31,224,.22)}
.site-header .hamburger-btn{width:40px;height:40px;border-radius:999px;border:1px solid #e1dcf3;color:#121633}
@media (max-width:639.98px){.site-header .auth-buttons{display:none!important}}
/* a filled purple button always has white text (old "inherit the section's
   colour" rules turned two of them grey on purple) */
:is(.btn-primary,.cta-primary,.hero-btn-primary,a.cta-btn):not(.site-header *){color:#fff!important}
/* the coloured cards the catch-all above leaves alone */
.trial-cta-card{background:linear-gradient(135deg,#6a1fe0,#4b14b8)!important;border:0!important;color:#fff;box-shadow:0 24px 56px -18px rgba(106,31,224,.45)}
.trial-cta-card :is(.trial-cta-title,.trial-cta-title span,.trial-cta-desc,.trial-cta-note,.trial-cta-note span,.trial-feature-chip){color:#fff!important}
.trial-cta-card .trial-feature-chip{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.24)!important}
.trial-cta-card .trial-cta-btn{background:#fff!important;color:#5a12c9!important}
/* pricing: the featured plan is dark, so its text is light */
.pricing-card.featured :is(.plan-name,.price-main,.feature-section-title,strong,h2,h3,h4){color:#fff!important}
.pricing-card.featured :is(.plan-tagline,.price-sub,.price-note,.plan-note,p,li,span:not(.featured-badge):not([class*="price-main"])){color:#d4d2ea!important}
.pricing-card.featured a:not([class*="btn"]){color:#cbb1ff!important}
/* headings: one scale for page titles and section titles. Titles inside
   cards, plans, FAQs, tables and calls to action keep their own size. */
main h1,html .v2page .phero h1,html .pricing-hero h1{font-size:clamp(2rem,1.25rem + 2.6vw,3rem)!important;line-height:1.12!important}
main h2:not(:is([class*="card"],[class*="plan"],[class*="cta"],[class*="tile"],[class*="step"],[class*="faq"],details,li,aside,table,form,#results-container) *):not([class*="faq-q"]){font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem)!important;line-height:1.2!important}
/* body text: 16 px for running text, 15 px inside cards (12 to 14 px on
   older pages). Notes, labels, badges and the audit result keep theirs. */
main p:not(:is([class*="note"],[class*="caption"],[class*="meta"],[class*="hint"],[class*="label"],[class*="badge"],[class*="small"],[class*="fine"],[class*="disclaimer"],[class*="eyebrow"],[class*="kicker"],[class*="stat"],[class*="price"])):not(:is(#results-container,[class*="badge"],[class*="chip"],[class*="pill"],[class*="stat"],[class*="price"],footer,form) *){font-size:16px;line-height:1.65}
main :is([class*="card"],.plan) p:not(:is([class*="note"],[class*="caption"],[class*="meta"],[class*="hint"],[class*="label"],[class*="badge"],[class*="small"],[class*="price"],[class*="stat"])):not(#results-container *){font-size:15px;line-height:1.6}
/* FAQs: the older pages' three layouts get the v2 accordion's card look,
   with room around the question and the answer and 12 px between items. */
:is(.faq-wrap,.faq-wrapper,.faq-list,.faq-box):not(.v2home *,.v2page *){display:flex!important;flex-direction:column;gap:12px;max-width:820px;margin-left:auto;margin-right:auto}
.faq-item:not(.v2home *,.v2page *){text-align:left;background:#fff!important;border:1px solid #eceef4!important;border-radius:12px!important;box-shadow:0 6px 24px rgba(20,20,60,.05);margin:0!important;padding:0!important;overflow:hidden}
.faq-item:not(.v2home *,.v2page *) > .faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 22px!important;margin:0!important;background:transparent;border:0;text-align:left;font:600 16px/1.4 var(--font-heading)!important;color:#121633!important;cursor:pointer}
.faq-item:not(.v2home *,.v2page *) > .faq-question svg{flex:none;width:18px;height:18px}
.faq-item:not(.v2home *,.v2page *) .faq-answer-inner{padding:0 22px 18px!important;font-size:15px;line-height:1.65;color:#545a6e}
.faq-item:not(.v2home *,.v2page *) > :is(h3,h4,.faq-q){padding:18px 22px 6px!important;margin:0!important;font:600 16px/1.4 var(--font-heading)!important;color:#121633!important}
.faq-item:not(.v2home *,.v2page *) > :is(p,.faq-a){padding:0 22px 18px!important;margin:0!important;font-size:15px!important;line-height:1.65!important;color:#545a6e}
main details:not(.acc):not(.v2page *,.v2home *,#results-container *){text-align:left;background:#fff;border:1px solid #eceef4;border-radius:12px;box-shadow:0 6px 24px rgba(20,20,60,.05);padding:0!important;margin:0 0 12px;overflow:hidden}
:is(.faq-wrap,.faq-wrapper,.faq-list,.faq-box) > details:not(.acc){margin:0!important}
main details:not(.acc):not(.v2page *,.v2home *,#results-container *) > summary{padding:18px 22px!important;font:600 16px/1.4 var(--font-heading);color:#121633;cursor:pointer}
main details:not(.acc):not(.v2page *,.v2home *,#results-container *) > :not(summary){padding:0 22px 18px;margin:0;font-size:15px;line-height:1.65;color:#545a6e}
@media (max-width:640px){
.faq-item:not(.v2home *,.v2page *) > .faq-question,.faq-item:not(.v2home *,.v2page *) > :is(h3,h4,.faq-q),main details:not(.acc):not(.v2page *,.v2home *) > summary{padding:16px 18px!important;font-size:15px!important}
.faq-item:not(.v2home *,.v2page *) .faq-answer-inner,.faq-item:not(.v2home *,.v2page *) > :is(p,.faq-a),main details:not(.acc):not(.v2page *,.v2home *) > :not(summary){padding:0 18px 16px!important}
}
/* small text that failed 4.5:1 on its tint (blog badges, pills, steps) */
[class*="category-badge-guide"],[class*="category-badge-metrics"]{color:#047857!important}
[class*="category-badge-methodology"],.geo-badge,.why-geo-badge,.hiw-step-num,.geo-footer{color:#6d28d9!important}
[class*="category-badge-strategy"]{color:#0e7490!important}
[class*="category-badge-comparison"]{color:#c2410c!important}
[class*="category-badge-aeo"]{color:#4338ca!important}
.req{color:#dc2626!important}
.ex-pill.warn{color:#92400e!important}
[class*="category-badge-brand"]{color:#b45309!important}
[class*="category-badge-geo"]{color:#6d28d9!important}
.aeo-badge{color:#4338ca!important}
.mistake strong{color:#be123c!important}
/* calls to action in the page body: one size (48 px, 15 px text, pill).
   The v2 pages' own .btn already is; the older pages had 40 to 63 px. */
:is(.cta-primary,.hero-btn-primary,.trial-cta-btn,.cta-btn,.btn-lg):not(.site-header *){min-height:48px;padding:12px 28px!important;font-size:15px!important;font-weight:700!important;border-radius:999px!important;line-height:1.2}
/* the phone menu's buttons match the header's (they were square, grey-bordered) */
.sidebar-footer a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px!important;font-weight:700!important;font-size:15px!important;text-decoration:none}
.sidebar-footer a.sidebar-footer-secondary{background:#fff!important;color:#6a1fe0!important;border:2px solid #6a1fe0!important}
.sidebar-footer a:not(.sidebar-footer-secondary){background:#6a1fe0!important;color:#fff!important;border:2px solid #6a1fe0!important}
/* visible FAQ at the end of a post, rendered from its FAQPage JSON-LD (6 Nov 2026) */
.post-faq{margin:2.5rem 0 1.5rem;padding-top:1.75rem;border-top:1px solid #eceef4}
.post-faq h2{margin:0 0 .25rem!important;scroll-margin-top:88px}
.post-faq h3{font-size:1.0625rem!important;line-height:1.4!important;margin:1.5rem 0 .4rem!important;color:#121633}
.post-faq p{margin:0!important}
main pre:not([class]){background:#f6f5fb;border:1px solid #eceef4;border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.55}
/* phone widths (6 Nov 2026 QA, 320 to 360 px) */
/* a long code sample or URL wraps instead of widening its card (/integrations scrolled sideways) */
:is(p,li,td,dd,figcaption) code{overflow-wrap:anywhere}
/* a grid card never grows past its column */
:is(.intg-grid,.result-cta-grid)>*{min-width:0}
/* the compare hero's tint is a box inside the page column, so it needs padding of its own */
#compare-main .hero-section{padding:2rem 1.25rem;border-radius:16px}
@media (max-width:600px){
.kick:after,.kicker:after{display:none}
.result-cta-box .aeo-embed{padding:0;border:0;background:none;box-shadow:none}
.report-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}