/* Public marketing skin modeled on javascriptconverter.com (Material-style).
   Loaded LAST on the public masters so it overrides earlier skins.
   Visual only: no dashboard, admin, payment or protection behavior. */
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets2/fonts/google-sans-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets2/fonts/google-sans-600-latin.woff2') format('woff2'); }

.site-body {
    --cv-bg: #f8fafd;          /* page background */
    --cv-surface: #f0f4f9;     /* alternate gray sections */
    --cv-surface-hover: #e8eaed;
    --cv-panel: #ffffff;       /* cards / header */
    --cv-fg: #1f1f1f;
    --cv-muted: #444746;
    --cv-subtle: #5f6368;
    --cv-border: #c4c7c5;
    --cv-line: #e3e3e3;
    --cv-accent: #0b57d0;
    --cv-accent-hover: #0842a0;
    --cv-accent-soft: #d3e3fd;
    font-family: 'Google Sans', 'Segoe UI', Roboto, system-ui, -apple-system, Arial, sans-serif !important;
    background: var(--cv-bg) !important;
    color: var(--cv-fg) !important;
}

/* ---- Page + section backgrounds: soft gray page, alternating gray bands ---- */
.site-body .site-main,
.site-body .site-main > *,
.site-body .site-main section,
.site-body .site-main :is(.page-hero,.docs-page,.page-surface) {
    background: transparent !important; background-image: none !important;
}
.site-body .site-main > section:nth-of-type(even),
.site-body .site-main .page-surface > section:nth-of-type(even) {
    background: var(--cv-surface) !important;
}

/* ---- Header: white bar, thin bottom rule, blue bold brand ---- */
.site-body .site-header,
.site-body .site-header .site-header-bar,
.site-body .site-header .site-header-shell {
    background: var(--cv-panel) !important; background-image: none !important;
    backdrop-filter: none !important;
}
.site-body .site-header { border-bottom: 1px solid var(--cv-line) !important; }
.site-body .site-header :is(nav a, .site-nav a) { color: var(--cv-fg) !important; font-weight: 400; }
.site-body .site-header :is(nav a, .site-nav a):hover { color: var(--cv-accent) !important; }

/* ---- Type ---- */
.site-body .site-main :is(h1,h2,h3,h4),
.site-body .site-main .page-hero-copy h1 {
    font-family: 'Google Sans', 'Segoe UI', Roboto, system-ui, Arial, sans-serif !important;
    color: var(--cv-fg) !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
}
.site-body .site-main .page-hero-copy h1,
.site-body .site-main h1 { line-height: 1.2 !important; }
.site-body .site-main :is(h1,.page-hero-copy h1) .heading-keyword {
    color: var(--cv-accent) !important; -webkit-text-fill-color: var(--cv-accent);
    background: none !important; font: inherit !important;
}
.site-body .site-main :is(p, li, .page-hero-copy > p) { color: var(--cv-muted); }
.site-body .site-main .page-hero-copy > p { font-size: 1.125rem; line-height: 1.625; }
.site-body .site-main a:not(.ls-cta):not(.page-hero-secondary):not(.ls-secondary):not([class*=btn]) { color: var(--cv-accent); }
.site-body .site-main a:not(.ls-cta):not(.page-hero-secondary):not(.ls-secondary):not([class*=btn]):hover { color: var(--cv-accent-hover); }

/* ---- Eyebrow chip: soft-blue pill, small caps ---- */
.site-body .site-main .page-hero-chip {
    display: inline-block;
    background: var(--cv-accent-soft) !important;
    color: var(--cv-accent) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: .25rem .75rem !important;
    font-size: .75rem !important;
    font-weight: 500 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

/* ---- Buttons: 8px radius, solid blue primary, outlined secondary ---- */
.site-body :is(.site-main, .site-header-actions, .site-footer) :is(.ls-cta, .page-hero-secondary, .ls-secondary, .btn, button[type=submit], input[type=submit]) {
    border-radius: 8px !important;
    background-image: none !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    transition: background-color .15s cubic-bezier(.4,0,.2,1), color .15s, border-color .15s;
}
.site-body :is(.site-main, .site-header-actions, .site-footer) :is(.ls-cta, .btn-primary, button[type=submit], input[type=submit]) {
    background-color: var(--cv-accent) !important;
    border: 1px solid var(--cv-accent) !important;
    color: #fff !important;
}
.site-body :is(.site-main, .site-header-actions, .site-footer) :is(.ls-cta, .btn-primary, button[type=submit], input[type=submit]):hover {
    background-color: var(--cv-accent-hover) !important;
    border-color: var(--cv-accent-hover) !important;
    filter: none !important;
}
.site-body :is(.site-main, .site-header-actions) :is(.page-hero-secondary, .ls-secondary, .btn-secondary, .btn-default) {
    background-color: var(--cv-panel) !important;
    color: var(--cv-accent) !important;
    border: 1px solid var(--cv-border) !important;
}
.site-body :is(.site-main, .site-header-actions) :is(.page-hero-secondary, .ls-secondary, .btn-secondary, .btn-default):hover {
    background-color: var(--cv-surface) !important;
    filter: none !important;
}
.site-body .site-header-actions .ls-cta { min-height: 0; padding: .5rem 1rem !important; font-size: .875rem; }

/* ---- Cards / panels: white, hairline gray border, 12px radius, flat ---- */
.site-body .site-main :is(.strategy-card,.page-section-panel,.doc-surface,.doc-sidebar,.page-hero-panel,.card,article) {
    background: var(--cv-panel) !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.site-body .site-main :is(.strategy-card,.card):hover { border-color: var(--cv-accent) !important; }

/* ---- Form fields ---- */
.site-body .site-main :is(input[type=text],input[type=email],input[type=password],input[type=search],select,textarea) {
    border: 1px solid var(--cv-border) !important;
    border-radius: 8px !important;
    background: var(--cv-panel) !important;
    color: var(--cv-fg) !important;
}
.site-body .site-main :is(input,select,textarea):focus {
    outline: 2px solid var(--cv-accent-soft) !important;
    border-color: var(--cv-accent) !important;
}

/* ---- Code: white window, hairline border, mono font ---- */
.site-body .site-main :is(pre, .hero-install-code) {
    background: var(--cv-panel) !important;
    color: var(--cv-fg) !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: 12px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
}
.site-body .site-main :not(pre) > code {
    background: var(--cv-surface) !important; color: var(--cv-fg) !important;
    border-radius: 4px; padding: .1em .35em;
}

/* ---- Normalize leftovers from earlier skins ---- */
/* All section badges/kickers -> one soft-blue chip (the reference uses one chip style). */
.site-body .site-main :is(.ls-section-badge, [class*="ls-section-badge-"], .home-plan-kicker) {
    background: var(--cv-accent-soft) !important; background-image: none !important;
    color: var(--cv-accent) !important; border: 0 !important; border-radius: 999px !important;
    font-weight: 500 !important; letter-spacing: .05em !important;
}
/* The featured plan's kicker stays filled, but flat blue instead of a gradient. */
.site-body .site-main .home-plan-card-featured .home-plan-kicker {
    background: var(--cv-accent) !important; color: #fff !important;
}
/* Gradient "shell" slabs -> flat; sections read as full-width bands like the reference. */
.site-body .site-main :is(.home-pricing-shell, .home-ops-shell, .home-desktop-shell, .home-entry-shell, [class*="home-"][class*="-shell"]) {
    background: transparent !important; background-image: none !important;
    border: 0 !important; box-shadow: none !important;
}
/* Plan cards: flat white, hairline border, 12px. Featured = blue outline. */
.site-body .site-main :is(.home-plan-card, [class*="plan-card"]) {
    background: var(--cv-panel) !important; background-image: none !important;
    border: 1px solid var(--cv-border) !important; border-radius: 12px !important; box-shadow: none !important;
}
.site-body .site-main .home-plan-card-featured { border: 2px solid var(--cv-accent) !important; }
/* Tailwind slate text -> reference ink. */
.site-body .site-main { color: var(--cv-fg) !important; }
/* Soft gradient backgrounds from utility classes -> flat surface. */
.site-body .site-main :is(.bg-gradient-soft, [class*="bg-gradient-"]) { background-image: none !important; }

/* ---- Footer: gray surface band ---- */
.site-body .site-footer { background: var(--cv-surface) !important; color: var(--cv-muted) !important; border-top: 1px solid var(--cv-line) !important; }
.site-body .site-footer :is(h2,h3,h4,h5) { color: var(--cv-fg) !important; font-weight: 700 !important; }
.site-body .site-footer a:hover { color: var(--cv-accent) !important; }