/* ==================================================================
   AI Search / AEO block — dark ink, purple AI accent.
   Full-width leadership section + ChatGPT visibility tool.
   ================================================================== */

.ais {
  position: relative; overflow: hidden;
  background: var(--surface-ink, #0d0f0f);
  padding: 104px 80px 108px;
  color: #fff; font-family: var(--font-sans);
}
/* purple glow bleeding from the top-right, the AI signal colour */
.ais::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 100% 0%, rgba(140,72,230,0.28) 0%, transparent 62%);
}
.ais-inner {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
}
.ais-top {
  display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: center;
}

.ais-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--purple-300, #b98cf2); font-weight: 500;
}
.ais-title {
  margin: 18px 0 0; font-size: 46px; font-weight: 900; line-height: 1.06;
  letter-spacing: -0.025em; color: #fff; text-wrap: balance; max-width: 640px;
}
.ais-title mark {
  background: var(--gradient-berry, linear-gradient(90deg, #ff43a4, #8c48e6));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ais-lead {
  margin: 20px 0 0; font-size: 17px; line-height: 1.65; font-weight: 500;
  color: rgba(255,255,255,0.68); max-width: 620px; text-wrap: pretty;
}

/* Comparison cards removed — badge now lives on the tool card */
.ais-badge {
  position: absolute; top: -46px; right: -36px; width: 124px; height: auto;
  transform: rotate(8deg); z-index: 2;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.45));
}

.ais-ctas { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.ais-howlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 120ms var(--ease-out, ease);
}
.ais-howlink svg, .ais-howlink [data-lucide] { width: 16px; height: 16px; }
.ais-howlink:hover { color: #fff; text-decoration: none; }

/* Right column -------------------------------------------------------- */
.ais-right { display: flex; flex-direction: column; }

/* ChatGPT visibility tool — white card pops on ink -------------------- */
.ais-tool {
  position: relative;
  width: 100%; background: #fff; border-radius: var(--radius-xl, 20px);
  padding: 38px 38px 36px; color: var(--ink-900, #0d0f0f);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.ais-tool-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 12px; border-radius: 999px;
  border: 1.5px solid var(--fbf-purple, #8c48e6); color: var(--fbf-purple, #8c48e6);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
}
.ais-tool-title {
  margin: 14px 0 0; font-size: 27px; font-weight: 900; line-height: 1.1;
  letter-spacing: -0.02em; text-wrap: balance;
}
.ais-tool-sub {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; font-weight: 500;
  color: var(--text-secondary, #4c5252);
}
.ais-tool-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px;
}
.ais-tool-input {
  height: 52px; min-width: 0; padding: 0 22px; text-align: center;
  font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
  color: var(--ink-900, #0d0f0f);
  background: #ffffff;
  border: 1.5px solid var(--border-strong, #d4cebd); border-radius: 999px;
  outline: none;
  transition: border-color 140ms var(--ease-out, ease), box-shadow 140ms var(--ease-out, ease);
}
.ais-tool-input::placeholder { color: var(--text-muted, #8a908f); font-weight: 500; }
.ais-tool-input:focus, .ais-tool-input:focus-visible {
  outline: none;
  border-color: var(--fbf-purple, #8c48e6);
  box-shadow: 0 0 0 3px rgba(140,72,230,0.18);
}
.ais-tool-btns { display: flex; gap: 12px; }
.ais-tool-btns .ais-tool-go { flex: 1; justify-content: center; }
.ais-tool-go {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--ink-900, #0d0f0f); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(13,15,15,0.28);
  transition: background 140ms var(--ease-out, ease), transform 120ms var(--ease-out, ease), box-shadow 140ms var(--ease-out, ease);
}
/* hover-capable devices only — on touch, :hover sticks after tap and the
   green glow looks like a broken state */
@media (hover: hover) {
  .ais-tool-go:hover { background: #1a1f1e; box-shadow: 0 4px 18px rgba(40,220,154,0.55), 0 0 0 1px rgba(40,220,154,0.35); }
  .ais-tool-go-claude:hover { background: #c05f3c; box-shadow: 0 4px 16px rgba(217,119,87,0.4); }
}
.ais-tool-go-claude { background: #d97757; color: #fff; }
.ais-tool-go-claude.is-disabled { background: #d97757; }
.ais-tool-go:active { transform: translateY(1px) scale(0.99); }
.ais-tool-go.is-disabled { opacity: 1; background: var(--ink-900, #0d0f0f); }
.ais-tool-go, .ais-tool-go:hover { text-decoration: none; }
.ais-tool-go svg, .ais-tool-go [data-lucide] { width: 16px; height: 16px; }
.ais-tool-note {
  margin-top: 16px; font-size: 13px; line-height: 1.55; font-weight: 600;
  color: var(--text-muted, #8a908f);
}
.ais-platforms {
  width: 100%; max-width: 230px; height: 50px; margin: 22px auto 0;
  border-radius: 999px; overflow: hidden; position: relative;
}
.ais-platforms img {
  position: absolute; left: 50%; top: 50%;
  width: 106%; height: auto;
  transform: translate(-50%, -50%) scale(1.06);
  display: block;
}