/* ==========================================================================
   BD AI Solutions additions
   Styles for the catalog, the offer boxes, plain language summaries on the
   policy pages, and the footer lines. Uses the same colors and type as
   styles.css, so both themes work.
   ========================================================================== */

/* ---------- Catalog cards ---------- */
.offer-grid {
  margin-top: 1.5rem;
}
.offer-card {
  gap: 0.75rem;
}
.offer-card h3 {
  font-size: 1.3rem;
}
.offer-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--fg);
}
.offer-benefits li {
  font-style: italic;
}
.offer-for,
.offer-note {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.offer-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-right: 0.35rem;
}
.offer-price {
  font-weight: 600;
  color: var(--fg);
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}
.offer-note-ai {
  border-left: 3px solid var(--accent);
  padding-left: 0.75rem;
}
.offer-cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
.offer-card[hidden] {
  display: none;
}
.plan-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}
.plan-list dt {
  font-weight: 600;
  color: var(--fg);
}
.plan-list dd {
  margin: 0.15rem 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-small);
}
.price-list-line,
.packages-line,
.no-guarantee {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: var(--measure);
}
.packages-line {
  color: var(--fg);
  margin-top: 0.5rem;
}
.offer-filter {
  margin-top: 1rem;
}
.filter-status {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
}
.area-empty {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* ---------- Notes inside cards ---------- */
.card-note {
  font-size: var(--fs-small);
  color: var(--fg-muted);
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

/* ---------- First System Promise and Founding Client boxes ---------- */
.offer-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.offer-box-firstSystem {
  border-color: var(--accent);
}
.offer-box h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin: 0.25rem 0 0.5rem;
}
.offer-box .eyebrow {
  color: var(--success);
}
.offer-box-body > p + p {
  margin-top: 0.5rem;
}
.offer-box-small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
@media (max-width: 760px) {
  .offer-box {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Plain language summaries on the policy pages ---------- */
.policy-plain {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.policy-plain > p:first-child {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.4rem;
}
.policy-plain ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.policy-plain li + li {
  margin-top: 0.3rem;
}
.policy-reserved {
  color: var(--fg-muted);
}

/* ---------- Notices with lists ---------- */
.notice ul {
  margin: 0;
  padding-left: 1.25rem;
}
.notice li + li {
  margin-top: 0.35rem;
}
.faq-list details ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.faq-list details li + li {
  margin-top: 0.35rem;
}
.faq-list details p + ul {
  margin-top: 0.75rem;
}

/* ---------- Footer lines ---------- */
.footer-contact {
  margin-top: 1rem;
}
.footer-contact p + p {
  margin-top: 0.25rem;
}
.footer-contact a {
  color: var(--band-fg);
  text-underline-offset: 3px;
}
.footer-referral {
  margin-top: 2rem;
  color: var(--band-fg);
  font-size: var(--fs-small);
}
.footer-notice strong {
  color: var(--band-fg);
}

/* ---------- Contact sidebar ---------- */
.ways a {
  color: inherit;
  text-underline-offset: 3px;
}
.aside-note {
  font-size: 0.9rem;
}
.field-notice {
  font-weight: 600;
  margin: 0.25rem 0 0.5rem;
}

/* ---------- Home page headline on small phones ---------- */
@media (max-width: 480px) {
  .hero h1.hero-stack .hs-line {
    white-space: normal;
  }
}

/* The no guarantee line inside dark bands. */
.band .no-guarantee {
  color: var(--band-muted);
}

/* ---------- Consent boxes and the security check on the forms ---------- */
.consent-boxes {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.75rem;
}
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg);
  cursor: pointer;
}
.consent input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--accent-ink);
}
.consent input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.consent input[aria-invalid="true"] {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}
.turnstile-box {
  margin-top: 1rem;
  min-height: 65px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Links inside the dark bands stay bright cyan in both themes, for contrast. */
.band .text-link {
  color: var(--accent-hover);
}

/* The link in the green "Built before you pay" card uses the main text color for contrast. */
.aside-card-promise .text-link {
  color: var(--fg);
}