/* ============================================================
   LiveWebAgent site custom CSS (brand layer)
   Served at /custom.css, linked from every page head.
   2026-09-21: header layout matched to old-site reference
   (120px bar, 100px logo, 22px link gaps, centered nav, coral CTA).
   ============================================================ */

/* --- brand fonts/heads --- */
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: LIGHT like origin (white bg, #383838 text, #2E5BFF hover) --- */
.site-header { background: #ffffff; }
.site-header .site-nav a { color: #383838; }
.site-header .site-nav a:hover { color: #2E5BFF; }
.site-footer { background: #ffffff; color: #383838; border-top: 1px solid #e5e8ee; }
.site-footer a { color: #383838; }
.site-footer a:hover { color: #2E5BFF; }

/* --- header layout: match old-site reference -------------------------------
   Reference (old.livewebagent.com @1280): 120px white bar, 300x100 logo at the
   left edge, six Poppins 500 links with 22px text gaps centered between the
   logo and the CTA, coral Get Started (18px/700, square corners, 12x32 pad)
   flush right at 32px from the viewport edge. Not width-clamped.
   Structure: .site-nav holds the link UL (flex-grown, links centered) and the
   .header-cta anchor as a right-anchored sibling - same flex model as origin.
   ---------------------------------------------------------------------------- */
.site-header-inner { max-width: none; padding: 10px 32px; gap: 0; }
.site-nav { flex: 1 1 auto; display: flex; align-items: center; }
.site-nav > ul { flex: 1 1 auto; justify-content: center; gap: 44px; }
.site-nav > ul > li { margin: 0; }
.site-nav > ul > li > a { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; display: inline-block; padding: 11px 0; }
/* the "Get Started" menu item renders as .header-cta, a sibling of the UL */
.site-header .site-nav .header-cta { margin-left: 21px; background: #FF6B4A; color: #ffffff; font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; padding: 12px 32px; border-radius: 0; }
.site-header .site-nav .header-cta:hover { background: #E55A3A; color: #ffffff; }

/* --- 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; }

/* --- homepage hero section (rebuilt from old hero widget): match old title/subtitle scale --- */
.site-main > .container > section:first-child .stack.align-center > .heading--h1 { font-size: 3rem; line-height: 1.1; letter-spacing: -.01em; }
.site-main > .container > section:first-child .stack.align-center > .rich-text:nth-child(2) p { font-size: 1.25rem; color: #3f4b5b; max-width: 46rem; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  .site-main > .container > section:first-child .stack.align-center > .heading--h1 { font-size: 2rem; }
  .site-main > .container > section:first-child .stack.align-center > .rich-text:nth-child(2) p { font-size: 1rem; }
}

/* --- heading ladder: match old-site responsive scale (32/48/60 hero, 24 comparison h2,
       30/36 band h2, 36 fcta h2; breakpoints 767/1024 like origin) --- */
/* comparison columns + knowledge-gap h2 = old h3: 24px at every width */
.site-main > .container > section:nth-of-type(2) .heading--h2 { font-size: 1.5rem; }
/* centered band titles (features grid, pricing, faq): 30px, 36px from 1024 up */
.site-main > .container > section:nth-of-type(3) .heading--h2,
.site-main > .container > section:nth-of-type(8) .heading--h2,
.site-main > .container > section:nth-of-type(9) .heading--h2 { font-size: 1.875rem; }
/* final CTA band: 36px at every width */
.site-main > .container > section:nth-of-type(10) .heading--h2 { font-size: 2.25rem; }
@media (min-width: 1024px) {
  .site-main > .container > section:nth-of-type(3) .heading--h2,
  .site-main > .container > section:nth-of-type(8) .heading--h2,
  .site-main > .container > section:nth-of-type(9) .heading--h2 { font-size: 2.25rem; }
  .site-main > .container > section:first-child .stack.align-center > .heading--h1 { font-size: 3.75rem; }
}

/* --- header responsive ------------------------------------------------------
   Logo ramps like brand-extras (40px <=860, 64px 861-1199, 100px >=1200).
   Nav gaps tighten stepwise so the bar never crowds: 44 >=1200 (reference),
   32 for the 1024-1199 band, 24 for 861-1023. Below 860 the inline nav is
   replaced by the CSS-only hamburger (mobile-nav.css); the CTA stays in the
   bar next to it.
   ---------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .site-header .site-logo { max-height: 100px; }
}
@media (max-width: 1199px) {
  .site-nav > ul { gap: 32px; }
}
@media (max-width: 1023px) {
  .site-nav > ul { gap: 24px; }
}
@media (min-width: 861px) and (max-width: 1199px) {
  .site-header .site-logo { max-height: 64px; }
}
@media (max-width: 860px) {
  /* header row never wraps on phones: logo left, burger right */
  .site-header-inner { flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 10px 16px; }
  .site-nav { flex: 0 1 auto; }
  .site-nav > ul { display: none; }
  /* Get Started hidden on phones (Mike 2026-09-22); desktop/tablet keep it */
  .site-header .site-nav .header-cta { display: none; }
  /* Burger pushed to the right edge; panel pinned to the VIEWPORT just
     under the header (fixed = immune to ancestor overflow/transform and
     flex-item drift). Header math: burger 44 + pad 20 + border 1 = 65px. */
  .mobile-nav { margin-left: auto; position: static; }
  .mobile-nav-panel {
    position: fixed; top: 66px; left: 12px; right: 12px; z-index: 9999;
    box-shadow: 0 12px 32px rgba(26, 27, 31, .16);
  }
}
/* ============================================================
   Compare section (S2): green check vs red X lists + balanced columns
   Scoped to homepage section 2 (.grid.cols-md-2 comparison stacks)
   ============================================================ */

/* Both lists: strip default dots, flush to column edge */
main section:nth-of-type(2) .grid > .stack > .rich-text > ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 16px;
}

/* Hanging indent: marker hangs left, wrapped text stays aligned */
main section:nth-of-type(2) .grid > .stack > .rich-text > ul > li {
  position: relative;
  padding-left: 34px;
  min-height: 25px;
}

/* Left (good) list = green check */
main section:nth-of-type(2) .grid > .stack:first-child > .rich-text > ul > li {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5L6.2 12.7L14 4' fill='none' stroke='%231f8f4e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 4px;
  background-size: 16px 16px;
}

/* Right (bad) list = red X */
main section:nth-of-type(2) .grid > .stack:last-child > .rich-text > ul > li {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 2.5L11.5 11.5M11.5 2.5L2.5 11.5' fill='none' stroke='%23d43a2e' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 5px;
  background-size: 14px 14px;
}

/* Right heading is the wrap offender at desktop widths — fluid clamp keeps it to one line */
main section:nth-of-type(2) .grid > .stack:last-child > .heading {
  font-size: clamp(20px, 1.8vw, 24px);
}

/* Mobile stacks to one column — restore full size */
@media (max-width: 767px) {
  main section:nth-of-type(2) .grid > .stack:last-child > .heading {
    font-size: 24px;
  }
}

/* --- desktop page gutter: global 2rem minimum (Mike, 2026-09-21) ---
   Inner section containers were pinned at 24px by the typed-root rule
   below; desktop now enforces the 2rem minimum globally.
   Mobile (<=640px) keeps its existing 24px — intentionally unchanged. */
.site-main > .container > * > .container { padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 640px) {
  .site-main > .container > * > .container { padding-left: 24px; padding-right: 24px; }
}
/* --- form submit buttons: match .btn--primary CTA style (platform renders class-less submit) --- */
.form button[type="submit"] {
  display: inline-block; padding: 10px 22px; border-radius: var(--radius-pill);
  font: inherit; font-weight: 600; cursor: pointer; border: 2px solid transparent;
  background: #FF6B4A; color: #ffffff;
}
.form button[type="submit"]:hover { background: #E55A3A; }
.form button[type="submit"]:focus-visible { outline: 2px solid #0B1C30; outline-offset: 2px; }
/* Icon sizing — R1 (2026-09-29): widget SVGs ship unsized; cap card + button icons */
.card-icon svg { width: 32px; height: 32px; }
.btn svg { width: 16px; height: 16px; }/* Dropdown caret indicators (2026-10-01): parent menu items with children show a caret — desktop inline, mobile right-aligned. Platform-wide nav affordance rule (Mike directive). */
.site-nav li.has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transform: translateY(-2px);
}
@media (max-width: 860px) {
  .mobile-nav-panel li.has-children > a {
    position: relative;
    padding-right: 40px;
  }
  .mobile-nav-panel li.has-children > a::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -4px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    opacity: .5;
  }
}
/* Button font always white (2026-10-01, Mike directive): dark strong sections color their links, which outranked the button white. Re-assert at higher specificity. */
.section--bg-strong .btn--primary, .section--bg-strong a.btn--primary { color: #ffffff; }
.section--bg-strong .btn--primary:hover, .section--bg-strong a.btn--primary:hover { color: #ffffff; }