/* AI Visibility Playbook funnel (/ai-visibility-playbook/, /get/, /thanks/).
   Layout and colour come from the site's Tailwind build; this file holds the
   few pieces Tailwind classes can't express cleanly. Palette matches
   tailwind.config.js and the fd-btn block in fade.css: navy, brand blue
   #4b7ce0, button blue #2f5fd8 and sky highlights. */

.pb-accent {
  background: linear-gradient(95deg, #e0f2fe 0%, #7dd3fc 38%, #4b7ce0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cover: a soft halo and a slow float, matching the hero motion elsewhere. */
.pb-cover {
  position: relative;
  border-radius: 18px;
  box-shadow: 0 40px 80px -30px rgba(2, 6, 23, 0.9), 0 0 0 1px rgba(148, 180, 255, 0.18);
}
.pb-cover-wrap { position: relative; }
.pb-cover-wrap::before {
  content: "";
  position: absolute;
  inset: 8% 0 -4%;
  background: radial-gradient(closest-side, rgba(75, 124, 224, 0.45), rgba(75, 124, 224, 0));
  filter: blur(30px);
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .pb-float { animation: pb-float 7s ease-in-out infinite; }
}
@keyframes pb-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}

/* Inside-the-playbook and step cards */
.pb-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.5rem;
}
.pb-num {
  font-family: 'Space Grotesk Label', 'Space Grotesk', 'Space Grotesk Fallback: Arial', Arial, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: #7dd3fc;
}

/* How AI picks: the connecting line between the three steps */
@media (min-width: 768px) {
  .pb-steps { position: relative; }
  .pb-steps::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    left: 16%;
    right: 16%;
    height: 1px;
    background: linear-gradient(90deg, rgba(125, 211, 252, 0), rgba(125, 211, 252, 0.5), rgba(75, 124, 224, 0.5), rgba(125, 211, 252, 0));
  }
}

/* FAQ: native <details>, styled */
.pb-faq summary {
  list-style: none;
  cursor: pointer;
}
.pb-faq summary::-webkit-details-marker { display: none; }
.pb-faq summary:focus-visible {
  outline: 3px solid #7aa2ff;
  outline-offset: 3px;
  border-radius: 1rem;
}
.pb-faq .pb-chev { transition: transform 0.3s ease; }
.pb-faq details[open] .pb-chev { transform: rotate(45deg); }

/* Form */
.pb-field {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.875rem;
  padding: 0.9rem 1rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pb-field::placeholder { color: #64748b; }
.pb-field:focus {
  outline: none;
  border-color: #7aa2ff;
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.35);
}
.pb-field[aria-invalid="true"] {
  border-color: #fb7185;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
}
select.pb-field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
select.pb-field option { background: #0f172a; color: #fff; }
.pb-error { color: #fda4af; font-size: 0.85rem; margin-top: 0.4rem; }
.pb-check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}
.pb-check:hover { border-color: rgba(122, 162, 255, 0.35); }
.pb-check input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  accent-color: #4b7ce0;
}
.pb-check input:focus-visible { outline: 3px solid #7aa2ff; outline-offset: 2px; }
.pb-status {
  border: 1px solid rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.08);
  color: #fecdd3;
  border-radius: 0.875rem;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
}
.pb-submit[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
.pb-submit[aria-busy="true"] .pb-spin { display: inline-block; }
.pb-spin { display: none; }
form[aria-busy="true"] .pb-spin { display: inline-block; animation: pb-spin 0.9s linear infinite; }
@keyframes pb-spin { to { transform: rotate(360deg); } }

/* Google rating badge (assets/playbook.js RATING). Only rendered when the
   real rating is filled in. */
.pb-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #e2e8f0;
  text-decoration: none;
  white-space: nowrap;
}
.pb-rating:hover { color: #fff; }
.pb-rating__stars { color: #fbbf24; letter-spacing: 0.05em; }
.pb-rating__g { width: 14px; height: 14px; display: inline-flex; flex: none; }
.pb-rating__g svg { width: 100%; height: 100%; }
.pb-rating__count { color: #94a3b8; }

/* Honeypot: off-screen and out of the tab order. Never display:none, which
   some bots detect and skip. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Visible keyboard focus on links and buttons in the funnel content */
.pb-main a:focus-visible,
.pb-main button:focus-visible {
  outline: 3px solid #7aa2ff;
  outline-offset: 3px;
  border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .pb-main .reveal-section,
  .pb-main .reveal-section.active { opacity: 1; transform: none; transition: none; }
  .pb-main .reveal-section.active [data-stagger] { animation: none; }
  .pb-faq .pb-chev { transition: none; }
  form[aria-busy="true"] .pb-spin { animation: none; }
}