/* =========================================================
   Sierra Madre — /ai page specifics (builds on /styles.css)
   Uses the shared desert-sunset tokens defined in :root there.
   ========================================================= */

section[id] { scroll-margin-top: 88px; }

/* ---------- AI hero (single column, left-aligned) ---------- */
.aihero__inner { position: relative; z-index: 5; padding-block: clamp(140px, 22vh, 220px) clamp(90px, 16vh, 160px); }
.aihero__copy { max-width: 780px; min-width: 0; }
.aihero .lede { color: oklch(0.92 0.02 80); margin-top: 26px; max-width: 56ch; }
.aihero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.glasschips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 42px; }
.glasschip {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 9px;
  background: oklch(0.98 0.012 80 / 0.08); border: 1px solid oklch(0.85 0.03 80 / 0.2);
  color: var(--cream); padding: 9px 15px; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.glasschip svg { width: 15px; height: 15px; color: var(--amber-soft); flex: none; }

/* ---------- overview cards ---------- */
.card__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); display: block; margin-bottom: 6px; }
.card--link h3 { font-size: 23px; }
.card--link h3 a { color: inherit; transition: color .2s; }
.card--link:hover h3 a { color: var(--clay-deep); }

/* ---------- product sections ---------- */
.prodhead { max-width: 780px; }
.prodtag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clay-deep); background: oklch(0.62 0.15 42 / 0.1);
  border: 1px solid oklch(0.62 0.15 42 / 0.22); padding: 7px 14px; border-radius: 100px;
  margin-bottom: 20px;
}
.prodtag svg { width: 15px; height: 15px; flex: none; }
.prodhead h2 { margin-top: 4px; }
.prodhead .lede { margin-top: 18px; }
.prose { max-width: 72ch; margin-top: 24px; }
.prose p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; }
.prose p + p { margin-top: 14px; }

/* ---------- feature list ---------- */
.featlist { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
@media (max-width: 760px) { .featlist { grid-template-columns: 1fr; } }
.feat { display: flex; gap: 13px; padding: 18px 2px; border-top: 1px solid var(--sand); }
.feat__ico { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--clay); color: var(--cream); margin-top: 2px; }
.feat__ico svg { width: 14px; height: 14px; }
.feat h5 { font-family: var(--sans); font-weight: 700; font-size: 15.5px; letter-spacing: -0.005em; color: var(--ink); }
.feat p { color: var(--ink-soft); font-size: 14px; margin-top: 4px; line-height: 1.5; }

/* ---------- benefit triple (reuses .cards/.card) ---------- */
.benefits { margin-top: 50px; }

/* ---------- "who benefits most" callout ---------- */
.whocard {
  margin-top: 30px; background: var(--cream); border: 1px solid var(--sand);
  border-radius: var(--radius); padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow-sm);
}
.whocard .card__ico { margin-bottom: 18px; }
.whocard h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.whocard p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; line-height: 1.65; max-width: 94ch; }
.whocard strong { color: var(--ink); font-weight: 700; }

/* ---------- AI CTA band (dark) ---------- */
.aicta { background: var(--night); color: var(--cream); text-align: center; }
.aicta__inner { max-width: 720px; margin-inline: auto; }
.aicta .eyebrow { color: var(--amber-soft); justify-content: center; }
.aicta .eyebrow::before { background: var(--amber); }
.aicta h2 { color: oklch(0.99 0.012 85); margin-top: 16px; }
.aicta p { color: oklch(0.9 0.02 80); margin-top: 18px; font-size: 18px; max-width: 56ch; margin-inline: auto; }
.aicta__btn { margin-top: 30px; display: flex; justify-content: center; }
.aicta__contact { margin-top: 28px; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.04em; color: oklch(0.82 0.03 80); display: inline-flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.aicta__contact a { color: var(--amber-soft); }

/* ---------- centered section head helper ---------- */
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lede { margin-inline: auto; }