/* ==========================================================================
   USEO – ChatGPT Ads + AI Search Optimization pages
   Loaded only on those two pages via @section('custom_css').
   Every class is prefixed "aip-" so nothing clashes with style.min.css.
   ========================================================================== */

:root {
  --aip-pink: #d4217f;
  --aip-pink-text: #c01c6c;
  --aip-pink-soft: #fdeef5;
  --aip-dark: #1d1d1f;
  --aip-body: #4a4a4a;
  --aip-muted: #6b6b6b;
  --aip-grey: #f4f4f4;
  --aip-line: #e6e6e6;
  --aip-grad: linear-gradient(135deg, #f21d55 0%, #ae24af 100%);
}

.aip-page { font-family: 'Poppins', sans-serif; color: var(--aip-dark); }
.aip-page p { color: var(--aip-body); font-size: 15.5px; line-height: 1.8; margin: 0; }
.aip-page img { max-width: 100%; height: auto; }
.aip-section { padding: 96px 0; }
.aip-section.bg-off-white { background: var(--aip-grey); }

/* ---------- Headings ---------- */
.aip-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aip-muted);
  margin-bottom: 10px;
}
.aip-title {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--aip-dark);
  margin: 0 0 18px;
}
.aip-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  background: var(--aip-dark);
  margin-top: 14px;
}
.aip-title.aip-center { text-align: center; }
.aip-title.aip-center::after { margin-left: auto; margin-right: auto; }
.aip-title.aip-light { color: #fff; }
.aip-title.aip-light::after { background: #fff; }
.aip-copy > p + p { margin-top: 16px; }
.aip-copy .button { margin-top: 24px; }
.aip-copy a:not(.button) { color: var(--aip-pink-text); font-weight: 600; }

/* ---------- Buttons (site uses .button .button-cta; this is the outline partner) ---------- */
.aip-btn-outline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.aip-btn-outline:hover { background: #fff; color: var(--aip-dark); }

/* ---------- Hero ---------- */
.aip-hero {
  position: relative;
  overflow: hidden;
  background: #000 url('../images/ai-pages/hero-city.svg') center / cover no-repeat;
  padding: 120px 0 88px;
  color: #fff;
}
.aip-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.aip-hero .container { position: relative; }
.aip-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #d9d9d9; margin-bottom: 18px; }
.aip-crumbs a { color: #fff; text-decoration: none; }
.aip-hero h1 {
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}
.aip-hero h1 span { color: #ff3d8b; }
.aip-hero p { color: #f2f2f2; font-size: 16px; font-weight: 500; max-width: 560px; }
.aip-hero-ctas { margin-top: 26px; }
.aip-hero-img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }

/* ---------- Partner strip ---------- */
.aip-partners { background: #111; border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0; }
.aip-partners .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; }
.aip-partners span { color: #d9d9d9; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Key facts ---------- */
.aip-facts { background: var(--aip-grey); padding: 80px 0; }
.aip-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.aip-fact { background: #fff; border-radius: 10px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aip-fact svg { width: 40px; height: 40px; }
.aip-fact strong { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.aip-fact span { font-size: 13px; color: var(--aip-body); }

/* ---------- Process band (sits on the site's .bg-gradient) ---------- */
.aip-process { padding: 72px 0; color: #fff; }
.aip-process-head { text-align: center; margin-bottom: 32px; }
.aip-process-head span { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; color: #fff; }
.aip-process-head h2 { color: #fff; font-weight: 700; font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; margin: 0; }
.aip-steps-nav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.aip-steps-nav a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 10px; background: #fff; color: var(--aip-dark); text-decoration: none; min-height: 44px; }
.aip-steps-nav b { font-size: 22px; font-weight: 700; color: var(--aip-pink-text); }
.aip-steps-nav em { font-style: normal; font-size: 14px; font-weight: 600; text-transform: uppercase; }

/* ---------- Step images ---------- */
.aip-step-img { display: block; width: 100%; border-radius: 12px; }
.aip-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-top: 14px; }
.aip-checks div { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 8px; background: var(--aip-grey); font-size: 13px; font-weight: 500; }
.aip-checks .yes::before { content: "✓"; color: #1f8a5b; font-weight: 700; }
.aip-checks .no::before { content: "✕"; color: var(--aip-pink-text); font-weight: 700; }

.aip-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--aip-grey);
  margin-top: 22px;
}
.aip-note i { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--aip-pink); color: #fff; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; }
.aip-note p { font-size: 14.5px; color: var(--aip-dark); }

/* ---------- Packages ---------- */
.aip-packages { padding: 80px 0; color: #fff; }
.aip-packages .aip-pkg-head p { color: #fff; font-weight: 500; font-size: 15px; max-width: 600px; }
.aip-packages .aip-pkg-head span { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.aip-packages h2 { color: #fff; font-weight: 700; font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; margin: 0 0 10px; }
.aip-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.22); }
.aip-tabs .nav-link {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  background: transparent;
  border: 0;
}
.aip-tabs .nav-link.active { background: #fff; color: var(--aip-dark); }

.aip-plan {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: 10px;
  background: #fff;
  color: var(--aip-dark);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.45);
}
.aip-plan.is-plus { background: var(--aip-dark); color: #fff; }
.aip-plan h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; margin: 0; color: inherit; }
.aip-plan .aip-tag { font-size: 10.5px; font-weight: 600; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--aip-grey); color: var(--aip-dark); }
.aip-plan.is-plus .aip-tag { background: var(--aip-pink); color: #fff; }
.aip-price { display: flex; align-items: baseline; gap: 6px; }
.aip-price small { font-size: 14px; font-weight: 600; }
.aip-price strong { font-size: 46px; font-weight: 700; line-height: 1; }
.aip-price em { font-style: normal; font-size: 13px; opacity: .8; }
.aip-plan p { color: inherit; opacity: .9; font-size: 14px; line-height: 1.6; }
.aip-rows { margin: 0; padding: 0; list-style: none; }
.aip-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-top: 1px solid var(--aip-line); font-size: 13.5px; line-height: 1.45; }
.aip-plan.is-plus .aip-rows li { border-top-color: rgba(255,255,255,.14); }
.aip-rows li span { opacity: .85; }
.aip-rows li b { max-width: 60%; text-align: right; font-weight: 600; }
.aip-plan .button { margin-top: auto; justify-content: center; text-align: center; }

.aip-included, .aip-addons { border-radius: 10px; padding: 22px 24px; height: 100%; }
.aip-included { background: #fff; color: var(--aip-dark); }
.aip-addons { background: var(--aip-dark); color: #fff; }
.aip-included h3, .aip-addons h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 0 12px; color: inherit; }
.aip-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.aip-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; background: var(--aip-grey); }
.aip-chips span::before { content: "✓"; color: var(--aip-pink-text); font-weight: 700; }
.aip-chips span.is-hl { background: var(--aip-pink-soft); }
.aip-addons div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; }
.aip-addons small { display: block; margin-top: 10px; font-size: 11.5px; color: #c9c9c9; }
.aip-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aip-terms div { padding: 14px 16px; border-radius: 10px; background: rgba(0,0,0,.22); font-size: 13px; line-height: 1.6; color: #fff; }
.aip-terms b { display: block; font-size: 12px; text-transform: uppercase; }

/* ---------- Proof (AI Search page) ---------- */
.aip-stat { padding: 20px 22px; border-radius: 10px; background: var(--aip-grey); height: 100%; }
.aip-stat strong { display: block; font-size: 40px; font-weight: 700; line-height: 1; color: var(--aip-pink-text); }
.aip-stat b { display: block; font-size: 13.5px; font-weight: 600; text-transform: uppercase; margin-top: 6px; }
.aip-stat span { font-size: 12.5px; color: var(--aip-body); }
.aip-proof figure { margin: 0; }
.aip-proof img { display: block; width: 100%; border-radius: 12px; }
.aip-proof figcaption { margin-top: 12px; font-size: 13px; color: var(--aip-body); }
.aip-proof figcaption b { color: var(--aip-dark); text-transform: uppercase; }

/* ---------- Visual panel for HTML mockups (AI Search page, until real images arrive) ---------- */
.aip-panel { border-radius: 10px; padding: clamp(18px, 3vw, 32px); background: var(--aip-grad); }
.aip-card { background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.35); }

/* ---------- Related services ---------- */
.aip-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.aip-related a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 22px;
  border-radius: 10px;
  background: #fff;
  color: var(--aip-dark);
  text-align: center;
  text-decoration: none;
}
.bg-white .aip-related a, .aip-related.on-white a { background: var(--aip-grey); }
.aip-related svg { width: 40px; height: 40px; }
.aip-related strong { font-size: 15px; font-weight: 600; text-transform: uppercase; }
.aip-related span { font-size: 13.5px; line-height: 1.6; color: var(--aip-body); }
.aip-related em { margin-top: auto; font-style: normal; font-size: 12.5px; font-weight: 600; text-transform: uppercase; color: var(--aip-pink-text); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .aip-section { padding: 64px 0; }
  .aip-hero { padding: 96px 0 64px; }
  .aip-rows li b { max-width: 55%; }
}