/* ============================================================
   Chen Advisory — AI page components (v7)
   Extends styles.css (same navy + gold + Cormorant/Manrope system).
   Loaded only on the AI pages.
   ============================================================ */

/* hero statement */
.ai-statement {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.35;
  color: rgba(255,255,255,.86);
  max-width: 40ch;
  margin: 18px 0 0;
}
.ai-statement em { color: var(--gold); font-style: italic; }

/* big pull quote band */
.ai-quote-band { background: linear-gradient(135deg, var(--navy-deep), #0d326f); color: #fff; }
.ai-quote-band .wrap-narrow { max-width: 1000px; margin: 0 auto; text-align: center; }
.ai-bigquote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.06; letter-spacing: -.02em; margin: 0 auto; max-width: 20ch;
}
.ai-bigquote em { color: var(--gold); font-style: italic; }
.ai-quote-sub { margin: 22px auto 0; max-width: 60ch; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.7; }

/* stat trio */
.ai-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 14px; }
.ai-stat { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius-lg); padding: 26px; }
.ai-stat strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(34px,4vw,46px); color: var(--navy); line-height: 1; margin-bottom: 10px; }
.ai-stat span { color: var(--muted); line-height: 1.6; }

/* value equation */
.ai-equation { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.eq-item { flex: 1 1 170px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.eq-item h3 { margin: 0 0 8px; font-size: 22px; color: var(--navy); }
.eq-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.eq-op { display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; color: var(--gold); flex: 0 0 22px; }
.eq-result {
  flex: 1 1 100%; margin-top: 6px; text-align: center;
  background: var(--navy); color: #fff; border-radius: var(--radius-md); padding: 18px;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(22px,2.4vw,30px); letter-spacing: -.02em;
}
.eq-result em { color: var(--gold); font-style: normal; }

/* use-case quadrants */
.usecase-card { display: flex; flex-direction: column; }
.usecase-card .uc-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.usecase-card .uc-list li { padding-left: 20px; position: relative; color: var(--muted); line-height: 1.5; }
.usecase-card .uc-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.usecase-card .uc-outcome { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--navy); font-weight: 800; font-size: 14px; }

/* barriers */
.barriers-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.barrier { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 22px; }
.barrier span { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.16); color: var(--gold); font-weight: 800; margin-bottom: 16px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 20px; }
.barrier p { margin: 0; color: rgba(255,255,255,.86); font-weight: 700; line-height: 1.4; }

/* offer ladder */
.offer-ladder { display: grid; gap: 14px; }
.offer-row {
  display: grid; grid-template-columns: 60px 1.6fr 1fr; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-lg); padding: 24px 28px;
}
.offer-row .offer-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px; color: var(--gold); line-height: 1; }
.offer-row h3 { margin: 0 0 6px; font-size: clamp(22px,2vw,27px); }
.offer-row .offer-desc { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }
.offer-meta { text-align: right; }
.offer-meta .offer-dur { font-weight: 800; color: var(--navy); }
.offer-meta .offer-fee { color: var(--muted); font-size: 14px; margin-top: 4px; }
.offer-meta .offer-fmt { display: inline-block; margin-top: 8px; padding: 5px 11px; border-radius: 999px; background: var(--soft); color: var(--navy); font-size: 12px; font-weight: 800; }
.offer-note { margin-top: 18px; color: var(--muted); font-size: 13.5px; }
.ai-sources { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.ai-sources strong { color: var(--ink); font-weight: 800; }

/* artefacts */
.artefact { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.artefact h3 { margin: 0 0 8px; font-size: 21px; }
.artefact p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* why-ai grid */
.whyai-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.whyai { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.whyai h3 { margin: 0 0 8px; font-size: 21px; }
.whyai p { margin: 0; color: var(--muted); line-height: 1.6; }

/* start steps */
.start-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 10px; }
.start-step { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 24px; }
.start-step span { font-family: "Cormorant Garamond", Georgia, serif; color: var(--gold); font-size: 30px; }
.start-step h3 { margin: 8px 0 8px; color: #fff; }
.start-step p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.6; }

/* home teaser */
.ai-teaser { background: var(--ivory); }
.ai-teaser-inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: center; background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #fff; border-radius: var(--radius-xl); padding: clamp(28px,4vw,48px); box-shadow: var(--shadow); }
.ai-teaser-inner h2 { color: #fff; margin: 10px 0 12px; font-size: clamp(30px,3.4vw,44px); line-height: 1; letter-spacing: -.03em; }
.ai-teaser-inner p { color: rgba(255,255,255,.82); margin: 0; line-height: 1.7; }
.ai-teaser-inner .eyebrow { color: var(--gold); }
.ai-teaser-cta { display: flex; justify-content: flex-end; }

@media (max-width: 1100px) {
  .ai-stats, .start-steps { grid-template-columns: 1fr; }
  .barriers-grid { grid-template-columns: repeat(2,1fr); }
  .whyai-grid { grid-template-columns: 1fr; }
  .offer-row { grid-template-columns: 48px 1fr; }
  .offer-meta { grid-column: 2; text-align: left; }
  .ai-teaser-inner { grid-template-columns: 1fr; }
  .ai-teaser-cta { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .barriers-grid { grid-template-columns: 1fr; }
  .ai-equation .eq-op { display: none; }
}