/* AI overview, using the shared TelePlan shell and blue wave background. */
.ai-page .ai-intro { padding-block: clamp(36px, 4.3vw, 65px) 32px; max-width: 850px; }
.ai-page .ai-intro h1 { font-size: clamp(2.7rem, 4.5vw, 4.3rem); max-width: 17ch; }
.ai-page .ai-intro .voice-lead { max-width: 630px; }
.ai-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 8px clamp(50px, 5vw, 76px); }
.ai-product { min-width: 0; display: flex; flex-direction: column; padding: clamp(25px, 3.1vw, 44px); border: 1px solid #d3e4ef; border-radius: 24px; background: #fffffff2; box-shadow: 0 12px 40px #143e5e08; }
.ai-product-top { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.ai-product-icon { display: grid; place-items: center; flex: 0 0 50px; height: 50px; color: #0077b5; background: #e3f5ff; border-radius: 15px; }
.ai-product-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.ai-product--agent .ai-product-icon { color: #178275; background: #e4f6f0; }
.ai-product-top > p { color: #4c6478; font-size: .83rem; font-weight: 600; margin: 0; line-height: 1.45; }
.ai-page .ai-product h2 { font-size: clamp(2rem, 3vw, 2.7rem); margin-bottom: 14px; }
.ai-product > p { color: var(--vp-muted); font-size: 1rem; line-height: 1.65; margin-bottom: 22px; }
.ai-product-list { display: grid; gap: 11px; list-style: none; padding: 0; margin: 0 0 29px; color: #274e69; font-size: .94rem; line-height: 1.5; }
.ai-product-list li { padding-left: 20px; position: relative; }
.ai-product-list li::before { content: ""; position: absolute; top: .56em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #0098d6; }
.ai-product--agent .ai-product-list li::before { background: #258e7d; }
.ai-product .voice-actions { margin-top: auto; padding-top: 5px; gap: 12px 22px; }
.ai-agent-section { border-block: 1px solid #cddfeab3; background: #e9f5fc75; padding-block: clamp(48px, 6vw, 80px); }
.ai-agent-section > .voice-wrap { display: grid; grid-template-columns: minmax(0, .93fr) minmax(0, 1fr); align-items: center; gap: clamp(30px, 5.5vw, 76px); }
.ai-agent-copy h2 { margin-bottom: 20px; max-width: 16ch; }
.ai-agent-copy > p:not(.voice-kicker) { color: var(--vp-muted); line-height: 1.75; max-width: 510px; margin-bottom: 16px; }
.ai-agent-timeline { position: relative; display: grid; gap: 18px; }
.ai-agent-timeline::before { content: ""; position: absolute; left: 46px; width: 1px; top: 36px; bottom: 36px; background: #8cc8dc; }
.ai-agent-scenario { position: relative; display: flex; align-items: start; gap: 19px; padding: 25px; background: #fffffff2; border: 1px solid #cbdfea; border-radius: 20px; }
.ai-scenario-icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; padding: 10px; background: #e6f6fd; stroke: #087fae; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ai-agent-scenario:nth-child(2) .ai-scenario-icon { stroke: #6758a4; background: #f0edfa; }
.ai-agent-scenario h3 { font-size: 1.18rem; line-height: 1.3; font-weight: 650; letter-spacing: -.02em; margin: 1px 0 9px; }
.ai-agent-scenario p { color: var(--vp-muted); line-height: 1.65; font-size: .94rem; margin: 0; }
.ai-page #voiceagent { scroll-margin-top: 110px; }
.ai-next-step { padding-block: clamp(45px, 5vw, 72px); }
.ai-next-step h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.ai-next-step .voice-demo-layout > div:first-child { max-width: 640px; }
@media (max-width: 800px) {
  .ai-products { gap: 18px; }
  .ai-product { padding: 26px; }
  .ai-agent-section > .voice-wrap { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .ai-agent-copy h2 { max-width: 24ch; }
  .ai-agent-copy > p:not(.voice-kicker) { max-width: 640px; }
}
@media (max-width: 620px) {
  .ai-products { grid-template-columns: minmax(0, 1fr); }
  .ai-page .ai-intro { padding-block: 32px 24px; }
  .ai-page .ai-intro h1 { font-size: clamp(2.55rem, 8.5vw, 3.3rem); }
  .ai-page .ai-product h2 { font-size: 2.15rem; }
  .ai-product-top { margin-bottom: 20px; }
  .ai-agent-scenario { gap: 14px; padding: 21px; }
  .ai-agent-timeline::before { left: 42px; }
}
@media (max-width: 370px) {
  .ai-product { padding: 22px; }
  .ai-agent-scenario { padding: 19px; gap: 12px; }
  .ai-agent-timeline::before { left: 40px; }
  .ai-scenario-icon { flex-basis: 36px; width: 36px; height: 36px; padding: 8px; }
}