/* Form components for the AI Visibility Report page.
   style.css is shared with the Amazon title audit and owns the brand tokens,
   layout and typography; this file only adds what a text-input form needs.
   Keep it additive so the two tools can't drift apart visually. */

/* The headline is long enough that greedy line-breaking leaves a near-orphan
   ("category,") on its own line. Balance evens the line lengths out. */
.hero h1 { text-wrap: balance; }

.text-input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.text-input::placeholder { color: var(--ink-soft); }
.text-input:hover { border-color: #d8dae6; }
.text-input:focus {
  outline: none;
  border-color: var(--so-blue);
  box-shadow: 0 0 0 3px rgba(63, 86, 205, .13);
}
textarea.text-input { resize: vertical; min-height: 96px; line-height: 1.55; }

.field-hint {
  margin: 8px 2px 0;
  font-size: .875rem;
  color: var(--ink-soft-text);
  line-height: 1.5;
}

/* Primary CTA is emerald #10B981, per so-brand.md v2.15 (2026-07-24): emerald is
   the single site-wide action color and it REPLACED the pink/orange gradient
   primary button. The gradient is revealed on hover only. */
.btn {
  display: inline-block;
  width: 100%;
  margin-top: 8px;
  padding: 16px 24px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--so-emerald);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease, transform .08s ease, box-shadow .2s ease;
}
.btn:hover:not(:disabled) {
  background: var(--so-cta-hover);
  box-shadow: 0 8px 24px rgba(237, 70, 145, .28);
}

/* Context sentence above the button - required by CTA Guidance, removes the
   "am I signing up for a sales call" objection before it forms. */
.cta-context {
  margin: 18px 0 0;
  font-size: .925rem;
  color: var(--ink-soft-text);
  text-align: center;
}

.inline-links {
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 0 20px;
  font-size: .95rem;
  color: var(--ink-soft-text);
  line-height: 1.7;
}
.inline-links a { color: var(--so-blue); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.form-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: .925rem;
  color: var(--negative);
  background: rgba(220, 53, 69, .07);
  border: 1px solid rgba(220, 53, 69, .2);
  border-radius: 10px;
}

.cf-turnstile { margin: 20px 0 4px; }

.success-title {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--positive-text);
}
.success-body { margin: 0; color: var(--ink); line-height: 1.65; }

.explainer {
  max-width: 720px;
  margin: 40px auto 64px;
  padding: 0 20px;
}
.explainer h2 {
  margin: 0 0 18px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.explainer ul { margin: 0; padding-left: 22px; }
.explainer li { margin-bottom: 12px; color: var(--ink); line-height: 1.65; }
.explainer li b { color: var(--so-blue); }

/* ---- content sections below the form: case study, FAQ, crosslinks.
   Mirrors the title-audit vertical pages' structure (case studies + FAQ +
   "Keep going"), restyled with this page's tokens. ---- */
.vsec {
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 20px;
}
.vsec h2 {
  margin: 0 0 18px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}

.case {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color .15s ease;
}
.case:hover { border-color: var(--so-pink); }
.case-stat {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--so-pink-text);
  letter-spacing: -.01em;
}
.case-what { font-weight: 700; margin: 4px 0 10px; }
.case-body { margin: 0 0 12px; color: var(--ink-soft-text); line-height: 1.65; font-size: .95rem; }
.case-link { font-weight: 700; color: var(--so-blue); font-size: .95rem; }

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq summary {
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--so-pink-text);
  font-weight: 700;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 20px 16px; }
.faq .answer p { margin: 0; color: var(--ink-soft-text); line-height: 1.65; font-size: .95rem; }
.faq .answer a { color: var(--so-blue); }

.crosslinks {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 0 20px;
}
.crosslinks h2 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.crosslinks ul { margin: 0; padding-left: 22px; }
.crosslinks li { margin-bottom: 10px; line-height: 1.6; }
.crosslinks a { color: var(--so-blue); font-weight: 700; }
.crosslinks .cl-note { color: var(--ink-soft-text); font-size: .95rem; }

/* Thank-you page link list - same voice as .crosslinks, inside the card. */
.ty-links { margin: 14px 0 0; padding-left: 22px; }
.ty-links li { margin-bottom: 10px; line-height: 1.6; }
.ty-links a { color: var(--so-blue); font-weight: 700; }
.ty-links .cl-note { color: var(--ink-soft-text); font-size: .95rem; }

@media (max-width: 640px) {
  .btn { font-size: 1rem; padding: 15px 20px; }
  .explainer { margin: 28px auto 48px; }
  .vsec { margin-bottom: 44px; }
  .case { padding: 20px 22px; }
}