/*
 * Intelligent Forms page — page-unique CSS only.
 * NOT part of the shared solutions.css design system: these power the
 * purple CTA band and the document-extraction HUD visuals.
 * The shared system (hero, bento, modules, FAQ, grids) lives in solutions.css.
 */

.apb-page .bg-cream { background: var(--gutsy-cream); }
.apb-page .gutsy-purple-bg { background-color: var(--gutsy-purple); }

/* ------------------------------------------------------------------
 * CTA buttons (page-wide)
 * The shared design system only defines the .apb-btn pill inside
 * `.apb-hero .hero-actions`. Any .apb-btn OUTSIDE the hero therefore had
 * no pill shape and no label colour — the final CTA band rendered as a
 * flat washed-out box with a faint label. These rules give every
 * .apb-btn on this page an explicit pill and correct colour pairing.
 * ------------------------------------------------------------------ */
.apb-page .apb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.25px;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              transform .3s ease, box-shadow .3s ease;
}

/* Purple pill on light / white sections */
.apb-page .apb-btn-primary {
  background-color: var(--gutsy-purple);
  border: 2px solid var(--gutsy-purple);
  color: var(--gutsy-cream);
}
.apb-page .apb-btn-primary:hover,
.apb-page .apb-btn-primary:focus-visible {
  background-color: var(--gutsy-purple-hover);
  border-color: var(--gutsy-purple-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(6, 60, 74, 0.18);
}

/* Inverted on the purple CTA band: cream pill with a purple label */
.apb-page .gutsy-purple-bg .apb-btn-primary {
  background-color: var(--gutsy-cream);
  border-color: var(--gutsy-cream);
  color: var(--gutsy-purple);
}
.apb-page .gutsy-purple-bg .apb-btn-primary:hover,
.apb-page .gutsy-purple-bg .apb-btn-primary:focus-visible {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--gutsy-purple-hover);
}

/* Keyboard focus ring */
.apb-page .apb-btn:focus-visible {
  outline: 3px solid var(--gutsy-purple);
  outline-offset: 3px;
}
.apb-page .gutsy-purple-bg .apb-btn:focus-visible {
  outline-color: var(--gutsy-cream);
}

/* Benefits list */
.apb-page .benefit-card {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  text-align: left;
}
.apb-page .icon-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gutsy-purple);
  color: #ffffff;
  font-weight: 900;
}
.apb-page .benefit-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gutsy-green);
}
.apb-page .benefit-card p { color: #64748b; }

/* UI card + HUD */
.apb-page .ui-card {
  background: #ffffff;
  border-radius: var(--radius-l);
  border: 1px solid rgba(155, 95, 250, 0.1);
  box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.05));
  overflow: hidden;
}
.apb-page .ui-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

.apb-page .floating-ui { animation: float 4s ease-in-out infinite; }
.apb-page .pulse-ui { animation: pulse-soft 3s ease-in-out infinite; }

.apb-page .glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--gutsy-purple);
  border-radius: 100px;
  background: rgba(252, 250, 237, 0.8);
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .apb-page .order-first-mobile { order: -1; }
}