/* ============================================================
   LiveWebAgent site custom CSS (brand layer)
   Served at /custom.css — linked by base.html via {{.CustomCSSLink}}
   Palette: #2E5BFF blue / #0B1C30 navy / #FF6B4A coral
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- fonts + layout tokens (new base reads these) --- */
:root {
  --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --container-max: 1280px;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body { font-family: var(--font-body); }

h1, h2, h3, h4, h5, h6, .heading, .card-title, .hero-title { font-family: var(--font-heading); }

/* --- links --- */
a { color: var(--color-primary-600); }
a:hover { color: var(--color-primary-800); }

/* --- buttons: coral solid --- */
.btn--primary, .section--bg-primary .btn--primary, .hero .btn, .hero a.btn { background: #FF6B4A; color: #ffffff; border-color: #FF6B4A; }
.btn--primary:hover, .hero .btn:hover { background: #E55A3A; color: #ffffff; }
.btn--secondary { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.btn--secondary:hover { background: var(--color-primary-50); color: var(--color-primary-800); }
.btn--ghost { color: var(--color-primary-600); }

/* --- hero: LIGHT like origin (#f8f9ff, dark ink) --- */
.hero { background-color: #f8f9ff !important; background-image: none !important; color: #0B1C30; }
.hero::before { display: none !important; content: none !important; background: none !important; }
.hero-title { color: #0B1C30; font-weight: 700; letter-spacing: -.01em; }
.hero-subtitle { color: #3f4b5b; font-size: 1.25rem; }
.hero-inner { max-width: 1100px; }

/* --- sections --- */
.section--bg-strong { background: var(--color-accent-900); }
.section--bg-strong, .section--bg-strong .heading { color: #ffffff; }
.section--bg-strong a { color: #9aaeff; }

/* --- header/footer navy --- */
.site-header { background: #0B1C30; }
.site-header a, .site-header .site-title { color: #ffffff; }
.site-header a:hover { color: #FF6B4A; }
.site-footer { background: #0B1C30; }
.site-footer, .site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: #FF6B4A; }

/* --- eyebrow + accent bits --- */
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; color: var(--color-primary-600); }

/* --- forms on brand --- */
.form input:focus, .form textarea:focus { border-color: var(--color-primary-600); }

/* --- pricing card emphasis --- */
.card .btn--primary { width: 100%; }

/* --- hero sizing: origin hero is content-sized, not 80vh --- */
.hero, .hero--sm, .hero--md, .hero--lg { min-height: auto; }
.hero .hero-inner, .hero--sm .hero-inner, .hero--md .hero-inner, .hero--lg .hero-inner { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 720px) { .hero .hero-inner { padding-top: 48px; padding-bottom: 48px; } }

/* --- typed-root container fix: root wrapper must not clamp full-bleed heroes/sections --- */
.site-main > .container { max-width: none; padding-left: 0; padding-right: 0; }
.site-main > .container > * > .container { max-width: var(--container-max); padding-left: 24px; padding-right: 24px; }

/* --- accordion --- */
.accordion summary { font-weight: 600; }