@import url("./site-v6.css");

.nav-login {
  font-size: 14px;
  font-weight: 650;
}

.demo-only-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 10px 20px;
  color: #08111f;
  background: #f6c934;
  border-bottom: 1px solid #b9981f;
  font: 800 14px/1.4 Inter, ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}

#how-it-works, #review-controls { scroll-margin-top: 96px; }
.section-followup { margin-top: 28px; }

.control-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .control-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .control-summary-grid { grid-template-columns: 1fr; } }

/* Keep every single-page product dropdown label readable in all link states. */
.nav-links .nav-dropdown-menu a,
.nav-links .nav-dropdown-menu a:visited,
.nav-links .nav-dropdown-menu a[aria-current="page"] { color: #253247; }
.nav-links .nav-dropdown-menu a:hover,
.nav-links .nav-dropdown-menu a:focus-visible { color: #07111f; background: #e7eef2; }
@media (max-width: 760px) {
  .nav-links .nav-dropdown-menu a,
  .nav-links .nav-dropdown-menu a:visited,
  .nav-links .nav-dropdown-menu a[aria-current="page"] { color: #aebdd0; }
  .nav-links .nav-dropdown-menu a:hover,
  .nav-links .nav-dropdown-menu a:focus-visible { color: #ffffff; background: transparent; }
}

/* AI Bookkeeping demo 40/60 layout: contained copy and a dominant 16:9 video. */
.ai-bookkeeping-demo .proof-layout {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(44px, 4vw, 72px);
  align-items: center;
}
.ai-bookkeeping-demo .proof-copy,
.ai-bookkeeping-demo .product-video {
  min-width: 0;
}
.ai-bookkeeping-demo .proof-copy h2 {
  max-width: 12ch;
  font-size: clamp(42px, 3vw, 52px);
  overflow-wrap: anywhere;
}
.ai-bookkeeping-demo .proof-copy .lede {
  max-width: 34rem;
}
.ai-bookkeeping-demo .product-video {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  justify-self: stretch;
}
@media (max-width: 1100px) {
  .ai-bookkeeping-demo .proof-layout {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    gap: 38px;
  }
  .ai-bookkeeping-demo .proof-copy h2 {
    max-width: 13ch;
    font-size: 42px;
  }
}
@media (max-width: 760px) {
  .ai-bookkeeping-demo .proof-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ai-bookkeeping-demo .proof-copy h2 {
    max-width: 16ch;
    font-size: 36px;
  }
}
@media (max-width: 480px) {
  .ai-bookkeeping-demo .proof-copy h2 {
    max-width: none;
    font-size: 32px;
  }
}

/* AI Bookkeeping demo heading at 80% scale; supporting copy stays readable. */
.ai-bookkeeping-demo .proof-copy h2 {
  font-size: clamp(33.6px, 2.4vw, 41.6px);
}
@media (max-width: 1100px) {
  .ai-bookkeeping-demo .proof-copy h2 { font-size: 33.6px; }
}
@media (max-width: 760px) {
  .ai-bookkeeping-demo .proof-copy h2 { font-size: 28.8px; }
}
@media (max-width: 480px) {
  .ai-bookkeeping-demo .proof-copy h2 { font-size: 25.6px; }
}

/* AI Bookkeeping demo wider copy and 1.2x height target. */
.ai-bookkeeping-demo .shell {
  width: min(calc(100% - 80px), 1600px);
}
.ai-bookkeeping-demo .proof-layout {
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
}
.ai-bookkeeping-demo .proof-copy h2 {
  max-width: none;
}
@media (max-width: 1100px) {
  .ai-bookkeeping-demo .shell {
    width: min(calc(100% - 40px), 1600px);
  }
  .ai-bookkeeping-demo .proof-layout {
    grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  }
  .ai-bookkeeping-demo .proof-copy h2 {
    max-width: none;
  }
}
@media (max-width: 760px) {
  .ai-bookkeeping-demo .shell {
    width: min(calc(100% - 32px), 1600px);
  }
  .ai-bookkeeping-demo .proof-layout {
    grid-template-columns: 1fr;
  }
}

/* Desktop copy height tracks 1.2x video height from the 46/54 column ratio. */
@media (min-width: 1101px) {
  .ai-bookkeeping-demo .proof-copy {
    aspect-ratio: 1.262 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Desktop demo group reduced 7.5% and centered. */
@media (min-width: 1101px) {
  .ai-bookkeeping-demo .shell {
    width: min(calc(100% - 80px), 1480px);
    margin-inline: auto;
  }
}