/* ==========================================================================
   site-theme.css — One visual skin for every page.
   The nav partials link this file last, so it wins over page styles.
   Each page family keeps its own layout. This file changes only the tokens
   those layouts read (colour, type), plus the nav, footer, and buttons.
   The homepage (css/home.css) is the reference for all values here.
   ========================================================================== */

/* Token names differ by page family: none (marketing), cs (case studies),
   g (guides), cmp (compare), u (legacy Webflow), auto (blog posts). */
:root, body, .auto-article, .linked-page, .cost-experience {
  --at-paper: #F6F7FC;
  --at-tint: #E8EBFF;
  --at-ink: #0F1638;
  --at-ink-soft: #454D74;
  --at-ink-mute: #666E94;
  --at-blue: #3D4BCA;
  --at-blue-deep: #2B36A3;
  --at-line: rgba(15, 22, 56, 0.09);
  --at-line-strong: rgba(15, 22, 56, 0.16);
  --at-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;

  --bg: var(--at-paper) !important;
  --cs-bg: var(--at-paper) !important;
  --g-bg: var(--at-paper) !important;
  --cmp-bg: var(--at-paper) !important;
  --u-bg: var(--at-paper) !important;
  --cost-surface: var(--at-paper) !important;

  --bg-3: #ECEEFA !important;
  --cs-bg-3: #ECEEFA !important;
  --g-bg-3: #ECEEFA !important;
  --cmp-bg-3: #ECEEFA !important;

  /* The warm accents of the old cream scheme become blue tints. */
  --cream: var(--at-tint) !important;
  --cs-cream: var(--at-tint) !important;
  --cmp-cream: var(--at-tint) !important;
  --peach: #DDE6FF !important;
  --cs-peach: #DDE6FF !important;
  --yellow: #C5CEFF !important;
  --cs-yellow: #C5CEFF !important;
  --cmp-yellow: #C5CEFF !important;

  --ink: var(--at-ink) !important;
  --cs-ink: var(--at-ink) !important;
  --g-ink: var(--at-ink) !important;
  --cmp-ink: var(--at-ink) !important;
  --u-ink: var(--at-ink) !important;
  --cost-ink: var(--at-ink) !important;
  --auto-navy: var(--at-ink) !important;
  --auto-text: var(--at-ink) !important;
  --home-navy: var(--at-ink) !important;

  --ink-soft: var(--at-ink-soft) !important;
  --cs-ink-soft: var(--at-ink-soft) !important;
  --g-ink-soft: var(--at-ink-soft) !important;
  --cmp-ink-soft: var(--at-ink-soft) !important;
  --u-ink-soft: var(--at-ink-soft) !important;
  --auto-muted: var(--at-ink-soft) !important;
  --ink-mute: var(--at-ink-mute) !important;
  --cs-ink-mute: var(--at-ink-mute) !important;
  --g-ink-mute: var(--at-ink-mute) !important;
  --cmp-ink-mute: var(--at-ink-mute) !important;
  --u-ink-mute: var(--at-ink-mute) !important;

  /* Blog posts used a second blue. One brand blue everywhere. */
  --auto-blue: var(--at-blue) !important;
  --auto-blue-dark: var(--at-blue-deep) !important;
  --auto-soft-blue: var(--at-tint) !important;
  --blue-2: var(--at-blue-deep) !important;
  --cs-blue-2: var(--at-blue-deep) !important;
  --g-blue-2: var(--at-blue-deep) !important;
  --cmp-blue-2: var(--at-blue-deep) !important;
  --u-blue-2: var(--at-blue-deep) !important;
  --blue-soft: var(--at-tint) !important;
  --cmp-blue-soft: var(--at-tint) !important;

  --font-d: var(--at-display) !important;
  --font-display: var(--at-display) !important;
}

html, body { background-color: #F6F7FC; }
body { color: #0F1638; -webkit-font-smoothing: antialiased; }

/* ----- Type: the display face on the two top heading levels ----- */

body h1, body h2, body .h-1, body .h-2 { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
body h1 em, body h2 em { font-style: normal; }

/* ----- Nav ----- */

.navigation { height: 72px; background: rgba(246, 247, 252, 0.78) !important; -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid rgba(15, 22, 56, 0.09); box-shadow: none; z-index: 100; }
.navigation .nav-container { max-width: 1240px; }
.navigation .nav-shadow { display: none; }
.navigation .nav-demo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 42px; padding: 10px 20px; border-radius: 999px; background: #3D4BCA; color: #fff; font-size: 14.5px; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 18px -8px rgba(61, 75, 202, 0.6); transition: background-color 150ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.navigation .nav-demo:hover { background: #2B36A3; transform: translateY(-1px); }
@media (max-width: 991px) { .navigation .nav-actions > .nav-demo { min-height: 44px; } }
@media (max-width: 560px) { .navigation .nav-demo { padding: 9px 14px; font-size: 13px; } }

/* ----- Footer ----- */

.footer { background: #0F1638 !important; background-image: none !important; }
.footer .footer-section-label { color: #C9D2F5; }

@media (max-width: 1110px) {
  .footer .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer .grid-4 > .footer-content-wr._2:last-child { grid-column: 1 / -1; }
  .footer .footer-links { white-space: normal; overflow-wrap: anywhere; }
  .footer .div-block-9 { flex-wrap: wrap; gap: 12px 24px; }
  .footer .div-block-10 { flex-wrap: wrap; gap: 0 20px; margin-bottom: 0; }
}

@media (max-width: 767px) {
  .footer .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .footer .footer-content-wr._2 { grid-column: 1 / -1; }
  .footer .footer-content-wr { row-gap: 0; }
  .footer .footer-section-label { margin-bottom: 8px; }
  .footer .footer-links { display: flex; align-items: center; min-height: 44px; padding-block: 8px; line-height: 1.5; }
  .footer .form .text-field { min-width: 0; font-size: 16px; }
  .footer .form :is(.text-field, .submit-button) { min-height: 44px; }
}

/* ----- Content on narrow screens ----- */

.blog-content-wr > .rich-text-block { min-width: 0; }
.blog-content-wr .rich-text-block { overflow-wrap: anywhere; }
.rich-text-block :is(.auto-table-wrap, pre) { max-width: 100%; overflow-x: auto; }

@media (max-width: 991px) {
  .blog-content-wr > .rich-text-block { width: 100%; }
  .sol-page .feature-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .sol-page .feature-visual { padding: 20px; }
  .sol-page .feature-visual .mock-row { flex-wrap: wrap; gap: 8px; }
}

/* ----- Buttons: one pill shape ----- */

.btn, .cs-btn, .cmp-btn, .uc-btn, .demo-btn, .auto-cta-btn, .automatum-primary-cta, .rc-cta__btn, .lead-capture-btn, .te-box__btn, .at-pricing-btn, .lt-btn, .footer .submit-button, .footer .text-field { border-radius: 999px !important; }
.btn-primary, .cs-btn:not(.cs-btn-white):not(.cs-btn-outline), .cmp-btn-primary, .uc-btn-primary, .auto-cta-btn, .automatum-primary-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 24px -10px rgba(61, 75, 202, 0.6); }

:focus-visible { outline: 2px solid #3D4BCA; outline-offset: 3px; }

/* ----- Skip link: hidden until it has keyboard focus ----- */

.skip-to-content { position: absolute; left: 16px; top: -64px; z-index: 1000; padding: 12px 16px; border-radius: 10px; background: #0F1638; color: #fff; }
.skip-to-content:focus { top: 12px; }