/* Final generator visual safety layer. */
:root {
  /* Main pages use --bg/--text while legacy policy templates use
     --page-bg/--color-text. These aliases make the final layer valid on both. */
  --ui-bg: var(--bg, var(--page-bg, #ffffff));
  --ui-surface: var(--surface, var(--page-surface, #ffffff));
  --ui-text: var(--text, var(--color-text, #172033));
  --ui-muted: var(--muted, #5f6b7a);
  --ui-primary: var(--primary, var(--color-accent, #176b87));
  --ui-accent: var(--accent, var(--ui-primary));
  --ui-border: var(--border, 1px solid color-mix(in srgb, var(--ui-text), transparent 86%));
  --ui-shadow: var(--shadow, 0 12px 32px rgba(15, 23, 42, .10));
  --ui-radius: var(--radius, var(--page-radius, 16px));
  /* Do not darken the primary token here. On dark palettes it turned already
     light links into nearly-black text, especially in the footer. */
  --ui-action: var(--ui-primary);
  --ui-action-hover: var(--ui-accent, var(--ui-primary));
  --ui-focus: color-mix(in srgb, var(--ui-primary), transparent 50%);
}
html, body {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  opacity: 1 !important;
  filter: none !important;
  min-width: 0;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; line-height: 1.55; text-rendering: optimizeLegibility; }
body::before, body::after { display: none !important; }
main, main > section {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: none !important;
}
/* The model is allowed to style individual components, but never the document
   flow itself. A grid/flex/absolute rule on <main> was placing whole sections
   in distant columns and created the giant empty canvases from the reports. */
main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  inset: auto !important;
}
main > section {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  position: relative;
  inset: auto !important;
  float: none !important;
  clear: both !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  isolation: isolate;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) !important;
}
/* Generated decorative overlays occasionally covered entire sections and made
   otherwise valid text look disabled. Keep the visual hierarchy in the actual
   background/surface colours instead of pseudo-element veils. */
main > section::before, main > section::after { display: none !important; }
.container {
  width: calc(100% - 32px) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
main > section > .container {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  inset: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  transform: none !important;
}
main > section > .container > * {
  min-height: 0 !important;
  max-width: 100% !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: auto !important;
}
main > section.auto-two > .container,
main > section.hero > .container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(1.5rem, 4vw, 4rem) !important;
}
/* Hero markup comes from the model and can nest its image differently on
   every run. The QA step marks two stable direct children below. */
main > section.hero.qa-hero-layout > .container {
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
  align-items: center !important;
}
main > section.hero.qa-hero-layout .qa-hero-copy {
  order: 1 !important;
  grid-column: 1 !important;
  min-width: 0 !important;
}
main > section.hero.qa-hero-layout .qa-hero-media {
  display: block !important;
  order: 2 !important;
  grid-column: 2 !important;
  width: 100% !important;
  max-width: min(100%, 560px) !important;
  margin: 0 0 0 auto !important;
  min-width: 0 !important;
}
main > section.hero.qa-hero-layout .qa-hero-media img {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: 480px !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
}
/* A safe composition may vary from build to build; this is deliberately not
   a single hero template. The variants only constrain the document flow. */
main > section.hero.qa-hero-media-left .qa-hero-media {
  order: 1 !important;
  grid-column: 1 !important;
  margin: 0 auto 0 0 !important;
}
main > section.hero.qa-hero-media-left .qa-hero-copy {
  order: 2 !important;
  grid-column: 2 !important;
}
main > section.hero.qa-hero-stacked > .container {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(1.5rem, 3vw, 3rem) !important;
}
main > section.hero.qa-hero-stacked .qa-hero-media {
  order: 1 !important;
  grid-column: 1 !important;
  max-width: min(100%, 820px) !important;
  margin-inline: auto !important;
}
main > section.hero.qa-hero-stacked .qa-hero-copy {
  order: 2 !important;
  grid-column: 1 !important;
  max-width: 760px !important;
}
/* Text-only pairs must flow vertically. The model can still use intentional
   media/text pairs, but no longer gets a sparse two-column editorial layout. */
.qa-stack-layout > .container { display: block !important; }
.qa-stack-layout > .container > * + * { margin-top: clamp(1.5rem, 3vw, 3rem) !important; }
body :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend) {
  color: var(--ui-text) !important;
}
main :where(section,div,article,aside,blockquote,figcaption) { color: var(--ui-text) !important; }
body :where(h1,h2,h3) { overflow-wrap: anywhere; text-wrap: balance; }
body :where(p,li) { overflow-wrap: break-word; font-size: clamp(.975rem, .3vw + .82rem, 1.125rem) !important; line-height: 1.7 !important; }
main :where(h2) { font-size: clamp(1.7rem, 2.1vw, 2.6rem) !important; line-height: 1.16 !important; }
main :where(h3) { font-size: clamp(1.15rem, 1vw, 1.45rem) !important; line-height: 1.25 !important; }
body :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: var(--ui-muted) !important;
}
body a:not(.btn) { color: var(--ui-action) !important; text-underline-offset: .16em; }
body a:not(.btn):hover { color: var(--ui-action-hover) !important; }
body :where(a,button,input,select,textarea):focus-visible {
  outline: 3px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}
header, footer { color: var(--ui-text) !important; }
header { background: color-mix(in srgb, var(--ui-bg), var(--ui-surface) 82%) !important; }
header .container { min-height: 68px; }
header .logo img, footer .logo img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: contain !important;
  background: transparent !important;
}
.hero__inner, .contact__inner {
  display: flex !important;
  align-items: center !important;
  gap: clamp(1.5rem, 4vw, 4rem) !important;
}
.hero__content, .contact__info,
.hero__media, .contact__media { min-width: 0 !important; flex: 1 1 0 !important; }
.hero__actions { display: flex !important; flex-wrap: wrap !important; gap: .75rem !important; }
.grid { display: grid !important; gap: clamp(1rem, 2vw, 1.5rem) !important; align-items: start !important; }
.grid--1 { grid-template-columns: minmax(0, 1fr) !important; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.card, article, .feature, .service, .benefit, .pricing-card, .testimonial, .faq-item {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border: var(--ui-border) !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: start !important;
  overflow: hidden;
}
.card :where(p,li,.card__text), .feature :where(p,li), .service :where(p,li),
.benefit :where(p,li), .testimonial :where(p,li) { color: var(--ui-muted) !important; }
.btn, button.btn, input[type="submit"] {
  background: var(--ui-action) !important;
  border: 1px solid var(--ui-action) !important;
  color: #fff !important;
  min-height: 44px;
  font-weight: 700;
  box-shadow: none !important;
  transition: background-color .18s ease, transform .18s ease !important;
}
.btn:hover, button.btn:hover, input[type="submit"]:hover {
  background: var(--ui-action-hover) !important;
  color: #fff !important;
  filter: none !important;
  transform: translateY(-1px);
}
.btn :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong),
button.btn :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong) { color: #fff !important; }
.btn--ghost, .btn--secondary, .btn--outline {
  background: transparent !important;
  border-color: var(--ui-action) !important;
  color: var(--ui-action) !important;
}
.btn--ghost :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong),
.btn--secondary :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong),
.btn--outline :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong) { color: var(--ui-action) !important; }
.btn--ghost:hover, .btn--secondary:hover, .btn--outline:hover {
  background: color-mix(in srgb, var(--ui-action), transparent 90%) !important;
  color: var(--ui-action-hover) !important;
}
img, svg, video, iframe { max-width: 100% !important; }
figure.img, .img { min-width: 0; background: color-mix(in srgb, var(--ui-surface), #000 8%) !important; }
figure.img img, .img img { width: 100% !important; height: auto !important; object-fit: cover !important; }
.form, .contact-form, .contact-layout__form form { width: min(100%, 520px) !important; max-width: 100% !important; }
.form input, .form textarea, .form select {
  width: 100% !important;
  min-height: 44px;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
}
footer .footer__top { gap: 1rem 1.5rem !important; }
.footer-nav { gap: .5rem !important; }
.footer-nav__link { color: var(--ui-primary) !important; }

/* The policy templates predate the generated theme system. Keep their content
   readable even when a dark index theme is synchronized into them. */
.policySection, .policyContainer, .main-content, .content {
  color: var(--ui-text) !important;
}
.policySection, .main-content, .content {
  background: var(--ui-surface) !important;
  border-radius: var(--ui-radius) !important;
}
.main-nav { background: color-mix(in srgb, var(--ui-bg), var(--ui-surface) 82%) !important; }
.nav-links a, .main-nav a { color: var(--ui-text) !important; }

/* Never let the pricing image occupy an empty full-height side column next to
   a long stack of offers. QA marks the actual generated wrapper at build time. */
.qa-pricing-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: clamp(1.25rem, 3vw, 2.5rem) !important;
}
.qa-pricing-layout > figure,
.qa-pricing-layout > .img {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-inline: auto !important;
}
.qa-pricing-layout > figure img,
.qa-pricing-layout > .img img {
  max-height: 420px !important;
  aspect-ratio: 16 / 9;
}

/* Cookie consent is an independent, neutral overlay. It must never inherit a
   dark page's white typography or an oversized generic button/text rule. */
.cookie-consent { background: rgba(2, 6, 23, .62) !important; }
.cookie-consent__card {
  width: min(480px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  background: #fff !important;
  color: #172033 !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  border-radius: 20px !important;
  padding: 26px !important;
}
body.qa-contrast-ready .cookie-consent__card {
  --qa-local-text: #172033;
  --qa-local-muted: #4b5563;
  --qa-local-action: #1d4ed8;
}
body.qa-contrast-ready .cookie-consent__card :where(h1,h2,h3,p,span,strong,label) { color: #172033 !important; }
body.qa-contrast-ready .cookie-consent__text { color: #374151 !important; font-size: 15px !important; line-height: 1.6 !important; }
body.qa-contrast-ready .cookie-consent__more { color: #4b5563 !important; font-size: 14px !important; }
body.qa-contrast-ready .cookie-consent__link { color: #1d4ed8 !important; }
body.qa-contrast-ready .cookie-consent__btn { min-height: 48px !important; font-size: 15px !important; background: #f8fafc !important; color: #172033 !important; }
body.qa-contrast-ready .cookie-consent__btn--primary { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }

/* Runtime QA marks every actual visual surface after the browser resolves the
   model's CSS variables, gradients and inherited backgrounds. This prevents a
   bad palette such as #f0f0f2 + #ffffff from making a whole generated page
   unreadable. Nested cards inherit their own surface variables. */
body.qa-contrast-ready :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend):not(.btn *) {
  color: var(--qa-local-text, var(--ui-text)) !important;
}
body.qa-contrast-ready :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: var(--qa-local-muted, var(--ui-muted)) !important;
}
body.qa-contrast-ready a:not(.btn) { color: var(--qa-local-action, var(--ui-action)) !important; }
.qa-surface-light {
  --qa-local-text: #172033;
  --qa-local-muted: #4b5563;
  --qa-local-action: #0e7490;
}
.qa-surface-dark {
  --qa-local-text: #f8fafc;
  --qa-local-muted: #cbd5e1;
  --qa-local-action: #7dd3fc;
}
body.qa-contrast-ready .btn,
body.qa-contrast-ready .btn :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong) { color: #fff !important; }
body.qa-contrast-ready .btn--ghost,
body.qa-contrast-ready .btn--secondary,
body.qa-contrast-ready .btn--outline,
body.qa-contrast-ready .btn--ghost :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong),
body.qa-contrast-ready .btn--secondary :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong),
body.qa-contrast-ready .btn--outline :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong) {
  color: var(--qa-local-action, var(--ui-action)) !important;
}
/* The document surface is the reliable fallback. A transparent generated card
   must never turn a dark page back to dark text merely because its own palette
   token happens to be light. Explicit painted cards below may still override
   this through .qa-surface-light/.qa-surface-dark. */
body.qa-contrast-ready.qa-page-dark :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend):not(.btn *) {
  color: #f8fafc !important;
}
body.qa-contrast-ready.qa-page-dark :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: #cbd5e1 !important;
}
body.qa-contrast-ready.qa-page-dark a:not(.btn) { color: #7dd3fc !important; }
body.qa-contrast-ready.qa-page-light :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend):not(.btn *) {
  color: #172033 !important;
}
body.qa-contrast-ready.qa-page-light :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: #4b5563 !important;
}
body.qa-contrast-ready.qa-page-light a:not(.btn) { color: #0e7490 !important; }
/* Do not rely only on inherited variables here: a generated wrapper may have
   its own palette. These explicit surface rules are the final contrast gate. */
body.qa-contrast-ready .qa-surface-dark :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend):not(.btn *) {
  color: #f8fafc !important;
}
body.qa-contrast-ready .qa-surface-dark :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: #cbd5e1 !important;
}
body.qa-contrast-ready .qa-surface-dark a:not(.btn) { color: #7dd3fc !important; }
body.qa-contrast-ready .qa-surface-light :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend):not(.btn *) {
  color: #172033 !important;
}
body.qa-contrast-ready .qa-surface-light :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: #4b5563 !important;
}
body.qa-contrast-ready .qa-surface-light a:not(.btn) { color: #0e7490 !important; }
/* Gradients are often reported by browsers as a transparent/light first stop.
   On a dark document they must not override the safe page-level contrast.
   Cookie consent is intentionally excluded: it is a genuinely white overlay. */
body.qa-contrast-ready.qa-page-dark .qa-surface-light:not(.cookie-consent__card) :where(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,td,th,label,legend):not(.btn *) {
  color: #f8fafc !important;
}
body.qa-contrast-ready.qa-page-dark .qa-surface-light:not(.cookie-consent__card) :where(.muted,.text-muted,.eyebrow,.section-eyebrow,.lead,.hero p) {
  color: #cbd5e1 !important;
}
body.qa-contrast-ready.qa-page-dark .qa-surface-light:not(.cookie-consent__card) a:not(.btn) { color: #7dd3fc !important; }
body.qa-contrast-ready .cookie-consent__card :where(h1,h2,h3,p,span,strong,label) { color: #172033 !important; }
body.qa-contrast-ready .cookie-consent__text { color: #374151 !important; }
body.qa-contrast-ready .cookie-consent__more { color: #4b5563 !important; }
body.qa-contrast-ready .cookie-consent__link { color: #1d4ed8 !important; }
body.qa-contrast-ready .cookie-consent__btn { color: #172033 !important; }
body.qa-contrast-ready .cookie-consent__btn--primary { color: #fff !important; }
@media (max-width: 900px) {
  .hero__inner, .contact__inner { flex-direction: column !important; align-items: stretch !important; }
  .hero__media, .contact__media { width: 100% !important; }
  main > section.hero.qa-hero-layout > .container { grid-template-columns: minmax(0, 1fr) !important; }
  main > section.hero.qa-hero-layout .qa-hero-copy,
  main > section.hero.qa-hero-layout .qa-hero-media { grid-column: 1 !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr) !important; }
  header { position: relative !important; }
}
@media (max-width: 520px) {
  .container { width: min(calc(100% - 24px), var(--mxw, 1200px)) !important; }
  section { padding-block: clamp(2.5rem, 10vw, 4rem) !important; }
  nav.nav { gap: .5rem !important; }
  nav.nav a { font-size: .875rem !important; }
  .btn { width: 100%; }
}