/* One continuous backdrop for every public page. The desktop composition stays
   at its designed width and is fitted to the available height by site.js. */
html {
  background-color: #020c20;
  background-image:
    radial-gradient(ellipse 50% 72% at 50% 54%, rgba(1, 8, 25, .84), rgba(1, 8, 25, .58) 54%, transparent 100%),
    url('site-atmosphere.png');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body {
  width: 100%;
  max-width: 1448px;
  min-height: 100vh;
  margin-inline: auto;
  background: transparent;
}

@media (min-width: 1100px) {
  html.desktop-fit body {
    position: relative;
    left: 50%;
    width: 1448px;
    max-width: none;
    margin-left: -724px;
    margin-right: 0;
  }
  html.desktop-fit { overflow: hidden; }
  html.desktop-fit body {
    transform: scale(var(--page-scale, 1));
    transform-origin: top center;
  }
}

@media (min-width: 1100px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: max(1120px, 100vh);
  }
  body > main { flex: 1; }
}

.site-header,
.source-ribbon,
.home-proof,
.site-footer,
.source-catalog,
.section-levels {
  background: rgba(4, 21, 46, .34);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

.site-header { background: rgba(3, 16, 39, .46); }
.site-footer { background: rgba(2, 13, 32, .48); }
.source-ribbon { background: rgba(6, 30, 60, .40); }
.home-proof { background: rgba(5, 26, 52, .35); }
.ambient:before { display: none; }

.home-level-card,
.source-level-card,
.price-card,
.faq-item,
.help-card,
.pricing-summary,
.option-section,
.pricing-individual,
.catalog-card,
.info-card,
.source-flow-card,
.flow-card,
.flow-core,
.flow-output {
  background: linear-gradient(135deg, rgba(13, 47, 84, .78), rgba(5, 24, 50, .68));
  box-shadow: inset 0 1px rgba(146, 206, 255, .08), 0 12px 28px rgba(0, 8, 31, .13);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

.source-chips span,
.source-logos .source-chips span,
.connection-options label,
.ai-options label,
.addon-row {
  background: rgba(7, 30, 58, .70);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.closing-card,
.home-closing .closing-card {
  background: linear-gradient(105deg, rgba(9, 38, 76, .70), rgba(6, 28, 57, .58) 58%, rgba(10, 47, 87, .70));
  backdrop-filter: blur(13px) saturate(120%);
  -webkit-backdrop-filter: blur(13px) saturate(120%);
}
.closing-card:before { opacity: .10; }

@media (min-width: 1100px) {
  body[data-page="home"] .hero-home,
  body[data-page="pricing"] .pricing-hero {
    background: transparent;
  }
  body[data-page="pricing"] .formula-card {
    width: 648px;
    height: 187px;
    margin-left: -13px;
    padding: 17px 20px;
    border: 1px solid #197cdc;
    background: linear-gradient(135deg, rgba(7, 37, 72, .88), rgba(5, 26, 53, .79)), url('waves.svg') center / cover no-repeat;
    box-shadow: 0 0 27px rgba(15, 110, 224, .19);
  }
  body[data-page="pricing"] .formula-card > * { opacity: 1; }
  body[data-page="pricing"] .pricing-summary {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;
    height: auto;
  }
  body[data-page="pricing"] .pricing-summary .summary-benefits { margin-top: 0; }
  body[data-page="home"] .hero-home:after { display: none; }
  body[data-page="home"] .hero-home,
  body[data-page="home"] .hero-grid,
  body[data-page="home"] .hero-copy,
  body[data-page="home"] .hero-visual { height: 436px; }
  body[data-page="home"] .reference-dashboard { height: 430px; }
  body[data-page="home"] .hero-copy .button-row .btn.btn-primary {
    width: 256px;
    min-height: 46px;
  }
  body[data-page="home"] .home-levels { background: transparent; }
  body[data-page="home"] .home-proof { background: rgba(5, 26, 52, .35); }
  body[data-page="home"] .home-closing {
    width: min(1244px, calc(100% - 100px)) !important;
  }
  body[data-page="home"] .home-closing:after {
    left: calc(100% + 8px);
    font-size: 13px;
  }
  body[data-page="home"] .site-footer .container {
    width: min(1244px, calc(100% - 100px));
    max-width: 1244px;
  }
  .site-footer .footer-inner {
    display: flex;
    min-height: 72px;
    gap: 28px;
  }
  .site-footer nav { margin-left: auto; }
  .site-footer .footer-inner > small { margin-left: 0; }
}

@media (min-width: 1100px) and (max-width: 1447px) {
  body[data-page="home"] .home-closing {
    width: min(1244px, calc(100% - 100px)) !important;
  }
  body[data-page="home"] .site-footer .footer-inner { display: flex; }
}

@media (max-width: 1099px) {
  html { background-image: none; }
  body { isolation: isolate; }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(1, 8, 25, .58), rgba(1, 8, 25, .58)), url('site-atmosphere.png');
    background-position: center;
    background-size: cover, 100% 100%;
    background-repeat: no-repeat;
  }
  body { min-height: 100vh; }
  .hero-home { background: transparent; }
  .home-proof { background: rgba(5, 26, 52, .40); }
  body[data-page="home"] .reference-dashboard { aspect-ratio: 813 / 430; }
}

/* Without JavaScript, keep the narrower desktop layout readable by scrolling. */
@media (min-width: 1100px) and (max-width: 1447px) {
  html:not(.desktop-fit) body[data-page="home"] .hero-copy {
    width: calc(50% - 50px);
  }
  html:not(.desktop-fit) body[data-page="home"] .hero-copy h1 {
    font-size: clamp(34px, 3.15vw, 44px);
    white-space: normal;
  }
  html:not(.desktop-fit) body[data-page="home"] .hero-visual {
    left: calc(50% + 10px);
    top: 48px;
    width: calc(50% - 10px);
    height: auto;
  }
  html:not(.desktop-fit) body[data-page="home"] .reference-dashboard {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 813 / 430;
    background-size: 178.105% auto;
    background-position: 100% 10.27%;
  }
  html:not(.desktop-fit) body[data-page="home"] .source-ribbon .source-chips {
    grid-template-columns: repeat(7, minmax(0, 1fr)) 100px;
    gap: 6px;
  }
  html:not(.desktop-fit) body[data-page="home"] .source-ribbon .source-chips span {
    min-width: 0;
    padding-inline: 4px;
    font-size: 10px;
  }
  html:not(.desktop-fit) body[data-page="home"] .source-ribbon .source-chips a { margin-left: 0; }
  html:not(.desktop-fit) body[data-page="home"] .home-proof .container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html:not(.desktop-fit) body[data-page="home"] .home-proof .container > div,
  html:not(.desktop-fit) body[data-page="home"] .home-proof .container > div:not(:first-child),
  html:not(.desktop-fit) body[data-page="home"] .home-proof .container > div:first-child {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 10px;
    padding-inline: 8px;
  }
  html:not(.desktop-fit) body[data-page="home"] .closing-bars {
    left: auto;
    right: 17px;
  }
  html:not(.desktop-fit) body[data-page="home"] .home-closing:after { display: none; }
  html:not(.desktop-fit) body[data-page="sources"] .source-flow {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1312 / 210;
    background: url('sources-reference.png') 50% 23.97% / 110.366% auto no-repeat;
  }
  html:not(.desktop-fit) body[data-page="sources"] .source-flow > * { display: none; }
}

@media (min-width: 1100px) and (max-width: 1447px) {
  body[data-page="home"] .reference-dashboard {
    height: auto;
    aspect-ratio: 813 / 430;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Let the shared artwork show through section spacing. Keep the actual cards
   and source chips as the visual grouping elements. */
.source-ribbon,
body[data-page="home"] .home-proof,
body[data-page="sources"] .page-hero,
body[data-page="faq"] .page-hero {
  background: transparent;
  border-block: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The artwork was cropped from a full-page mockup. Follow the contour of the
   actual dashboard and its callout so the old rectangular backdrop disappears. */
body[data-page="home"] .reference-dashboard {
  mask-image: none;
  clip-path: polygon(5.2% 4.5%, 91.5% 0, 90.5% 82%, 96.5% 81%, 96.5% 94.5%, 72.5% 100%, 0 88%, 0 73%);
}
@media (min-width: 1100px) {
  body[data-page="sources"] .source-flow {
    mask-image: linear-gradient(transparent 0, #000 6px, #000 calc(100% - 18px), transparent 100%);
  }
}

/* Header, section spacing and footer sit directly on the continuous artwork. */
.site-header,
.site-footer {
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.footer-legal { display: flex; align-items: center; gap: 32px; }
.footer-legal a { color: #b5cdea; font-size: 13px; white-space: nowrap; }
.footer-legal a:hover { color: #fff; }
@media (min-width: 1100px) {
  .site-footer .footer-inner { justify-content: space-between; gap: 16px; }
  .site-footer nav { margin-left: 0; gap: 16px; }
  .site-footer .footer-brand { gap: 12px; }
  .site-footer .footer-brand small { display: none; }
  .site-footer .footer-inner > small { margin-left: 0; white-space: nowrap; }
}
@media (max-width: 1099px) {
  .site-footer .footer-inner { flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding-block: 17px; }
  .site-footer nav { margin-left: 0; }
  .site-footer .footer-inner > small { margin-left: 0; }
  .footer-legal { flex-wrap: wrap; gap: 7px 16px; }
}