/* Partner / creator-program landing page. Layered on top of the shared
   style.css design tokens. Keep palette + spacing consistent with /about. */

/* Body background uses rgba stops so the /lib/audit-backdrop.js
   ledger canvas (position: fixed; z-index: -1) shows through. Opaque
   hex stops would hide the backdrop behind the body paint. */
.partner-page {
  background: radial-gradient(ellipse at top, rgba(10, 31, 40, 0.92) 0%, rgba(5, 12, 17, 0.94) 60%, rgba(2, 5, 8, 0.96) 100%);
  color: #e4f4f7;
  min-height: 100vh;
}

/* Override style.css's global `html, body { overflow: hidden }` so
   the long-form partner landing actually scrolls. Same escape hatch
   /shared-preview.css already uses for the same reason. */
html:has(body.partner-page),
body.partner-page {
  overflow: auto !important;
}

.partner-main {
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.partner-main .hero h1 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.6rem);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.partner-main .hero .subhead {
  font-size: 1.05rem;
  color: #b9e7f0;
  margin-bottom: 2rem;
  max-width: 60ch;
}

.partner-main h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
  color: var(--accent, #7ef0ff);
}

.partner-main .benefits ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.partner-main .benefits li {
  padding: 0.75rem 1rem;
  border: 1px solid rgba(126, 240, 255, 0.15);
  border-radius: 8px;
  background: rgba(4, 22, 34, 0.55);
}

.partner-main .benefits li strong {
  color: var(--accent, #7ef0ff);
}

.partner-main form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.partner-main form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.95rem;
}

.partner-main form input {
  background: rgba(2, 12, 18, 0.8);
  color: #e4f4f7;
  border: 1px solid rgba(126, 240, 255, 0.25);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
}

.partner-main form input:focus {
  outline: 2px solid var(--accent, #7ef0ff);
  outline-offset: 1px;
}

.partner-main .partner-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(126, 240, 255, 0.18);
  background: rgba(4, 22, 34, 0.4);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #cdeef4;
}

.partner-main .partner-consent input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent, #7ef0ff);
}

.partner-main .partner-consent a {
  color: var(--accent, #7ef0ff);
}

.partner-main form button {
  justify-self: start;
  padding: 0.75rem 1.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: #001018;
  background: var(--accent, #7ef0ff);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.partner-main form button[disabled] {
  opacity: 0.65;
  cursor: wait;
}

.partner-main .partner-feedback {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: #ffb4b4;
}

.partner-main .apply-note {
  color: #8fd4df;
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
}

.partner-main .after-apply {
  background: rgba(4, 22, 34, 0.7);
  border: 1px solid rgba(126, 240, 255, 0.25);
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.partner-main .success-links a {
  color: var(--accent, #7ef0ff);
  display: inline-block;
  margin-top: 0.25rem;
}

.partner-main .faq details {
  border-top: 1px solid rgba(126, 240, 255, 0.1);
  padding: 0.75rem 0;
}

.partner-main .faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #c5eef4;
}

.partner-main code {
  background: rgba(126, 240, 255, 0.08);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  font-size: 0.9em;
}

.partner-main .breadcrumb-trail {
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #9cc9d4;
}

.partner-main .breadcrumb-link {
  color: inherit;
}

.partner-main .breadcrumb-separator {
  margin: 0 0.4rem;
  opacity: 0.5;
}

/* ---------- Scrollbar styling ----------
   Matches the on-brand scrollbar the audit pages use
   (auto-audit.css:596-620). Keeps the styled thumb visible whenever
   the page actually scrolls (enabled by the overflow override above). */
.partner-page::-webkit-scrollbar,
body.partner-page ::-webkit-scrollbar {
  width: 10px;
}
.partner-page::-webkit-scrollbar-track,
body.partner-page ::-webkit-scrollbar-track {
  background: rgba(126, 240, 255, 0.04);
}
.partner-page::-webkit-scrollbar-thumb,
body.partner-page ::-webkit-scrollbar-thumb {
  background: var(--accent, #7ef0ff);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background 0.3s ease;
}
.partner-page::-webkit-scrollbar-thumb:hover,
body.partner-page ::-webkit-scrollbar-thumb:hover {
  background: limegreen;
}
html:has(body.partner-page) {
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #7ef0ff) rgba(126, 240, 255, 0.05);
}