/* PRO ADVERT live hardening + responsive polish - 2026-07-17 */
:root {
  --pa-ink: #101310;
  --pa-green: #58bd09;
  --pa-green-dark: #2d8700;
  --pa-soft: #f4faee;
  --pa-border: #dfe5dc;
}

html,
body {
  overflow-x: clip !important;
}

main > section {
  padding-block: clamp(3.25rem, 5.6vw, 5.75rem) !important;
}

main > section:first-child {
  min-height: min(820px, 88svh) !important;
  padding-top: clamp(5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(2.75rem, 4.8vw, 4.5rem) !important;
}

main h1,
main h2,
main h3 {
  text-wrap: balance;
  overflow-wrap: anywhere;
}

main h1 {
  max-width: 12.5ch;
  letter-spacing: -0.03em !important;
}

main h2 {
  letter-spacing: -0.025em !important;
}

main p {
  text-wrap: pretty;
}

[data-reveal] {
  transform: none;
}

[role="dialog"] {
  overscroll-behavior: contain;
}

[role="dialog"] form {
  gap: 1.1rem !important;
}

[role="dialog"] input,
[role="dialog"] select,
[role="dialog"] textarea,
[role="dialog"] button {
  min-height: 44px;
}

.workflow-node,
.group.cursor-pointer {
  min-width: 0;
}

.workflow-node p,
.group.cursor-pointer p {
  max-width: 70ch;
}

.pa-form-status {
  border: 1px solid var(--pa-border);
  padding: 1rem;
  font-size: .9rem;
  line-height: 1.45;
  font-weight: 700;
}

.pa-form-status[data-state="success"] {
  background: var(--pa-soft);
  border-color: var(--pa-green-dark);
  color: var(--pa-ink);
}

.pa-form-status[data-state="error"] {
  background: #fff1f1;
  border-color: #dc2626;
  color: #7f1d1d;
}

@media (min-width: 1024px) {
  #solutions > div > div:first-child,
  #faq > div > div:first-child,
  #security > div > div:first-child {
    max-width: none !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
    align-items: end;
  }

  #solutions > div > div:first-child h2,
  #faq > div > div:first-child h2,
  #security > div > div:first-child h2 {
    max-width: 15ch;
  }

  #how-it-works > div > div:first-child {
    align-items: center;
  }
}

@media (max-width: 767px) {
  main > section {
    padding-block: 3rem !important;
  }

  main > section:first-child {
    min-height: auto !important;
    padding-top: 5.25rem !important;
  }

  main h1 {
    font-size: clamp(2.45rem, 13vw, 3.75rem) !important;
    line-height: .98 !important;
    max-width: 100%;
  }

  main h2 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.02 !important;
  }

  main h3 {
    line-height: 1.12 !important;
  }

  .uppercase.tracking-widest,
  .uppercase.tracking-wider {
    letter-spacing: .045em !important;
  }

  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  #workflow-review,
  #contact-proadvert-modal {
    align-items: flex-start !important;
    padding: 1rem !important;
  }

  #workflow-review > div,
  #contact-proadvert-modal > div {
    margin-block: 1rem !important;
    max-height: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  video[autoplay] {
    display: none !important;
  }
}



/* Final production layout pass - remove WhatsApp widget and fix wide-screen heading/card collisions. */
#solutions,
#outcomes {
  overflow: clip !important;
}

#solutions > div > div:first-child,
#outcomes > div > div:first-child {
  max-width: none !important;
  width: 100% !important;
  gap: clamp(1.25rem, 3vw, 3.5rem) !important;
}

#solutions > div > div:first-child h2,
#outcomes > div > div:first-child h2 {
  display: block !important;
  max-width: 20ch !important;
  width: min(100%, 20ch) !important;
  background: transparent !important;
  box-decoration-break: initial !important;
  -webkit-box-decoration-break: initial !important;
  box-shadow: none !important;
  padding: 0 !important;
  line-height: 1.01 !important;
  text-transform: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

#solutions > div > div:first-child > div,
#outcomes > div > div:first-child > div,
#solutions > div > div:first-child p,
#outcomes > div > div:first-child p {
  min-width: 0 !important;
}

#solutions > div > div:nth-child(2),
#outcomes > div > div:nth-child(2) {
  align-items: stretch !important;
  grid-auto-rows: auto !important;
}

#solutions > div > div:nth-child(2) > *,
#outcomes > div > div:nth-child(2) > *,
#solutions [class*="col-span"],
#outcomes [class*="col-span"] {
  min-width: 0 !important;
  min-height: 0 !important;
}

#solutions .shadow-2xl,
#solutions .shadow-xl,
#outcomes .shadow-2xl,
#outcomes .shadow-xl {
  max-width: 100% !important;
  overflow: hidden !important;
}

#solutions pre,
#solutions code,
#outcomes pre,
#outcomes code,
#solutions .font-mono,
#outcomes .font-mono {
  overflow-wrap: anywhere !important;
}

#solutions p,
#outcomes p {
  max-width: 68ch !important;
}

@media (min-width: 1024px) {
  #solutions > div > div:first-child,
  #outcomes > div > div:first-child {
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .55fr) !important;
    align-items: end !important;
  }

  #solutions > div > div:first-child h2,
  #outcomes > div > div:first-child h2 {
    font-size: clamp(3.25rem, 4.7vw, 5.15rem) !important;
  }
}

@media (max-width: 1023px) {
  #solutions > div > div:first-child,
  #outcomes > div > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #solutions > div > div:first-child h2,
  #outcomes > div > div:first-child h2 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  #solutions > div > div:first-child h2,
  #outcomes > div > div:first-child h2 {
    font-size: clamp(2.2rem, 10vw, 3.25rem) !important;
  }
}

/* FAQ collision fix - restore the original 12-column FAQ layout after generic heading overrides. */
#faq {
  overflow: visible !important;
}

#faq > div > div:first-child {
  display: grid !important;
  align-items: start !important;
  gap: clamp(2.5rem, 4vw, 4rem) !important;
}

#faq > div > div:first-child > div {
  min-width: 0 !important;
}

#faq > div > div:first-child > div:first-child .border-2.bg-\[\#f4faee\] {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100% !important;
}

#faq > div > div:first-child > div:first-child .border-2.bg-\[\#f4faee\] > div:first-child {
  gap: .75rem !important;
}

#faq > div > div:first-child > div:first-child .border-2.bg-\[\#f4faee\] button {
  min-height: 44px !important;
  white-space: normal !important;
  gap: .75rem !important;
}

#faq details {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 1024px) {
  #faq > div > div:first-child {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  #faq > div > div:first-child > div:first-child {
    grid-column: span 5 / span 5 !important;
  }

  #faq > div > div:first-child > div:last-child {
    grid-column: span 7 / span 7 !important;
  }
}

@media (max-width: 1023px) {
  #faq > div > div:first-child {
    grid-template-columns: 1fr !important;
  }

  #faq > div > div:first-child > div:first-child,
  #faq > div > div:first-child > div:last-child {
    grid-column: auto !important;
  }
}

@media (max-width: 640px) {
  #faq > div > div:first-child > div:first-child .border-2.bg-\[\#f4faee\] > div:first-child {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}