/* =====================================================================
   theme-av.css: AI Voice flagship layer. Loads after theme.css on /aivoice/ pages only.
   Owns: hero visual + premium call cards, rhythm of AI Voice bands, AI Voice-only components.
   ===================================================================== */
:root { --av-glow: rgba(59,130,246,.22); --av-ring: linear-gradient(140deg, rgba(96,165,250,.7), rgba(167,139,250,.35) 45%, rgba(34,211,238,.55)); }

/* ---------- hero ---------- */
.hero { overflow: hidden; }
.hero .split--hero { align-items: center; gap: 56px; }
.hero h1 { text-wrap: balance; }
.hero .lead { max-width: 60ch; }
.hero-visual { position: relative; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; z-index: -1; inset: 6% -6% -2%; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(59,130,246,.38), rgba(99,102,241,.18) 55%, transparent 80%); filter: blur(30px); pointer-events: none; }
.hero-visual::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -30px; top: -40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(34,211,238,.28), transparent); filter: blur(10px); pointer-events: none; }
.hero-trust { gap: 10px 22px; }
.hero-trust span { display: inline-flex; align-items: baseline; gap: 6px; }
.hero .tags .tag--white, .hero .tag--white { background: rgba(148,163,184,.08); color: var(--m-text); border: 1px solid var(--m-line-2); }
.hero .ticks li { color: var(--m-text); }
.hero .answer { max-width: 760px; }

/* ---------- premium call card ---------- */
.callcard { position: relative; max-width: 470px; border-radius: 24px; overflow: hidden; color: var(--m-text);
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(20,29,52,.96), rgba(10,15,30,.98)) padding-box, var(--av-ring) border-box;
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.7), 0 0 70px -10px var(--av-glow); }
.callcard__head { background: linear-gradient(180deg, rgba(59,130,246,.10), transparent); border-bottom: 1px solid var(--m-line); padding: 16px 18px; }
.callcard__avatar { position: relative; background: var(--m-grad); color: #fff; box-shadow: 0 0 0 4px rgba(99,102,241,.18), 0 0 24px rgba(99,102,241,.55); }
.callcard__avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(34,211,238,.55); animation: av-ring 2.4s ease-out infinite; }
@keyframes av-ring { 0% { transform: scale(.9); opacity: .9 } 70%, 100% { transform: scale(1.35); opacity: 0 } }
.callcard__who strong { color: var(--m-strong); }
.callcard__who span { color: #93C5FD; }
.callcard__lang { background: rgba(34,211,238,.10); color: #A5F3FC; border: 1px solid rgba(34,211,238,.35); }
.callcard .wave i { width: 3px; background: linear-gradient(180deg, var(--m-cyan), var(--m-violet)); box-shadow: 0 0 6px rgba(34,211,238,.5); }
.callcard__body { background: radial-gradient(400px 220px at 100% 0%, rgba(99,102,241,.08), transparent 70%), transparent; padding: 18px; gap: 12px; }
.bubble { box-shadow: none; }
.bubble--ai { background: rgba(148,163,184,.09); border: 1px solid var(--m-line-2); color: var(--m-strong); }
.bubble--ai small { color: var(--m-text-2); opacity: 1; }
.bubble--caller { background: linear-gradient(135deg, #2563EB, #4F46E5); color: #fff; border: 0; box-shadow: 0 8px 22px -8px rgba(79,70,229,.7); }
.bubble--caller small { color: rgba(255,255,255,.82); opacity: 1; }
.callcard__result { background: rgba(52,211,153,.08); border-top: 1px solid rgba(52,211,153,.22); color: #6EE7B7; }
.callcard__result .ico { color: var(--m-good); }
/* bubbles arrive one by one (static under reduced motion: site.css turns animations off) */
.callcard__body .bubble { animation: av-in .5s cubic-bezier(.2,.7,.2,1) both; }
.callcard__body .bubble:nth-child(2) { animation-delay: .25s } .callcard__body .bubble:nth-child(3) { animation-delay: .5s }
.callcard__body .bubble:nth-child(4) { animation-delay: .75s } .callcard__body .bubble:nth-child(5) { animation-delay: 1s }
.callcard__body .bubble:nth-child(n+6) { animation-delay: 1.2s }
.callcard__result { animation: av-in .5s 1.3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes av-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.hero-visual .callcard { animation: av-float 7s ease-in-out infinite; }
@keyframes av-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@media (prefers-reduced-motion: reduce) { .callcard__avatar::after { display: none; } }
.float-chip { background: rgba(15,23,42,.92); border: 1px solid var(--m-line-2); box-shadow: 0 20px 40px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.float-chip strong { color: var(--m-strong); } .float-chip span { color: var(--m-text-2); }

/* more sample calls (language pages): cards sit in a grid, not floating */
.band .grid--2 > .callcard { max-width: none; margin: 0; }
.band .grid--2:has(> .callcard:only-child) { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* ---------- language strip ---------- */
.langs { background: linear-gradient(90deg, rgba(59,130,246,.06), rgba(167,139,250,.06)), var(--m-bg-2); }
.lang-chip { transition: border-color .15s, background .15s; }
a.lang-chip:hover { background: rgba(59,130,246,.14); border-color: rgba(96,165,250,.45); }
.lang-chip b { color: var(--m-strong); }
.lang-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.lang-grid a { padding: 14px 16px; transition: border-color .15s, background .15s, transform .15s; }
.lang-grid a:hover { border-color: rgba(96,165,250,.55); background: rgba(59,130,246,.08); transform: translateY(-1px); }
@media (min-width: 1000px) { .lang-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* beside text, languages sit as a wrap of pills so the last row never strands one tile */
.split .lang-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.split .lang-grid a { flex-direction: row; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 999px; }
.split .lang-grid b { font-size: 17px; }
.split .lang-grid span { font-size: 12.5px; }

/* ---------- "what is" + stats ---------- */
.av-what { border-bottom: 1px solid var(--m-line); }
.av-what .split { align-items: center; }
.av-what .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stat { background: linear-gradient(180deg, rgba(19,28,49,.9), rgba(11,17,32,.9)); border: 1px solid var(--m-line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.stat strong { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.1; }

/* ---------- timeline ---------- */
.timeline li::before { background: linear-gradient(90deg, rgba(96,165,250,.55), rgba(96,165,250,.25)); }
.timeline li.is-late::before { background: linear-gradient(90deg, rgba(251,191,36,.45), rgba(251,191,36,.2)); }
.timeline li::after { background: var(--m-bg-2); border-color: var(--m-blue-2); }
.timeline li.is-due::after { background: var(--m-cyan); border-color: var(--m-cyan); box-shadow: 0 0 0 5px rgba(34,211,238,.18), 0 0 16px rgba(34,211,238,.7); }
.timeline li.is-late::after, .band--dark .timeline li.is-late::after { border-color: var(--m-amber); }
.timeline .when, .band--dark .timeline .when { color: #67E8F9; }
.timeline li.is-late .when, .band--dark .timeline li.is-late .when { color: #FCD34D; }
.timeline span.d, .band--dark .timeline span.d { color: var(--m-text); }
/* a timeline in a half-width column reads as a vertical list, not a wrapped row */
.split .timeline { grid-template-columns: 1fr; }
.split .timeline li { padding: 0 0 22px 34px; }
.split .timeline li::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, rgba(96,165,250,.8), rgba(96,165,250,.35)); }
.split .timeline li.is-late::before { background: linear-gradient(180deg, rgba(251,191,36,.45), rgba(251,191,36,.15)); }
.split .timeline li:last-child::before { bottom: auto; height: 16px; }
.split .timeline li::after { top: 2px; }
.band--dark .split > div:last-child:has(> .timeline) { padding: 26px 26px 6px; border-radius: 20px; background: rgba(7,11,22,.55); border: 1px solid var(--m-line-2); }

/* two schedules on the payment page read as one dark block */
.band--dark + .band--joined { border-top: 0; padding-top: 0; background: var(--m-bg-2); }
.band--dark + .band--joined .wrap { border-top: 1px solid var(--m-line); padding-top: 56px; }

/* ---------- section heads ---------- */
.section-head h2 { text-wrap: balance; }
.section-head .lead { max-width: 64ch; }
.eyebrow .ico { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- cards ---------- */
.card { transition: border-color .18s, transform .18s, box-shadow .18s; }
a.card:hover { border-color: rgba(96,165,250,.5); transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(96,165,250,.12); }
.card .small.included { color: #67E8F9; font-weight: 600; margin-top: auto; }
.card-head .tag { background: rgba(148,163,184,.10); color: var(--m-text); border: 1px solid var(--m-line); }
.card .kicker { letter-spacing: .08em; }
.card--lg h3 { color: var(--m-strong); }

/* agent cards: the opener is the sample of the voice, so it gets the call-card look */
.agent-card .opener { position: relative; background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(99,102,241,.06)); border: 1px solid rgba(96,165,250,.22); border-radius: 14px; padding: 14px 16px 14px 18px; }
.agent-card .opener::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--m-cyan), var(--m-violet)); }
.agent-card .opener small { color: var(--m-text-2); }
.agent-card .captures { color: var(--m-text-2); } .agent-card .captures strong { color: var(--m-text); }
.agent-card .tags .tag { background: rgba(148,163,184,.08); border: 1px solid var(--m-line); color: var(--m-text); }

/* filter chips */
.chips { gap: 8px; }
.chip { transition: background .15s, border-color .15s, color .15s; }
.chip:hover { border-color: rgba(96,165,250,.5); color: var(--m-strong); }
.chip[aria-pressed="true"] { box-shadow: 0 6px 18px -6px rgba(99,102,241,.7); }

/* tag links (who uses it, industries, other channels) */
a.tag, .tags a.tag--white { background: rgba(148,163,184,.07); color: var(--m-text); border: 1px solid var(--m-line-2); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
a.tag:hover, .tags a.tag--white:hover { border-color: rgba(96,165,250,.55); color: #fff; background: rgba(59,130,246,.12); }

/* data figures */
.figure { background: linear-gradient(180deg, rgba(19,28,49,.85), rgba(11,17,32,.85)); border-color: var(--m-line-2); }
.figure .num { background: var(--m-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em; }
.figure figcaption span { color: var(--m-text); }
.figure figcaption a { color: var(--m-text-2); }

/* product image */
.media--wide img { border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 60px -20px var(--av-glow); }
.media figcaption { color: var(--m-text-2); }

/* ---------- home ---------- */
.hero--home { padding-block: 72px 80px; }
.hero--home h1 { font-size: clamp(40px, 5.2vw, 64px); }
.av-start .steps { counter-reset: none; }
.av-start-cards { margin-top: 8px; }
.av-start-cards .card { background: linear-gradient(180deg, rgba(19,28,49,.9), rgba(11,17,32,.9)); }
.av-start-cards .h2-sm { font-size: 22px; }
.grid--tiles .card--highlight { background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(167,139,250,.18)); border-color: rgba(96,165,250,.5); }
.grid--tiles .card--highlight .tile { background: var(--m-grad); color: #fff; border: 0; }

/* use cases rail on phones: swipe instead of a 10-card scroll */
@media (max-width: 640px) {
  .av-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -24px; padding: 4px 24px 14px; scrollbar-width: none; }
  .av-rail::-webkit-scrollbar { display: none; }
  .av-rail > .card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- industries hub: one catalogue, not six bands ---------- */
.band--group { padding-block: 28px; border: 0; background: transparent; }
.band--group-first { padding-top: 80px; }
.band--group + .band--group { padding-top: 12px; }
.band--group + .band:not(.band--group) { border-top: 1px solid var(--m-line); }
.band--group:last-of-type { padding-bottom: 72px; }
.band--group .section-head h2 { font-size: clamp(22px, 2.2vw, 28px); display: flex; align-items: center; gap: 12px; }
.band--group .section-head h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--m-line-2), transparent); }
.band--group .wrap { gap: 18px !important; }
@media (min-width: 1100px) { .av-ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- code, tables, forms ---------- */
.code-card { background: linear-gradient(180deg, #0A1022, #060A18) !important; border: 1px solid var(--m-line-2); position: relative; }
.code-card::before { content: ""; display: block; height: 34px; border-bottom: 1px solid var(--m-line);
  background: radial-gradient(circle at 18px 17px, #F87171 5px, transparent 6px), radial-gradient(circle at 36px 17px, #FBBF24 5px, transparent 6px), radial-gradient(circle at 54px 17px, #34D399 5px, transparent 6px); }
.code-card:has(.tabs)::before, .code-card:has([role="tablist"])::before { display: none; }
.code-card pre { color: #C7D2FE; }
.table-wrap { background: rgba(11,17,32,.7); }
.table-wrap thead th { background: rgba(59,130,246,.08); color: var(--m-strong); }
.table-wrap td { color: var(--m-text); }
.form-card, .demo-form, form.card { background: linear-gradient(180deg, rgba(19,28,49,.95), rgba(11,17,32,.95)); border: 1px solid var(--m-line-2); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 0 60px -20px var(--av-glow); }

/* ---------- FAQ + CTA ---------- */
.faq details { transition: background .15s; }
.faq details[open] { background: rgba(148,163,184,.04); }
.cta-panel { position: relative; overflow: hidden; }
.cta-panel::after { content: ""; position: absolute; right: 40px; top: 50%; width: 220px; height: 80px; transform: translateY(-50%); opacity: .35; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 4px, transparent 4px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), radial-gradient(ellipse 100% 60% at 50% 50%, #000 40%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 30%, transparent 75%); }
@media (max-width: 860px) { .cta-panel::after { display: none; } }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .hero .split--hero { gap: 36px; }
  .hero-visual::after { display: none; }
  .hero-visual .callcard { animation: none; }
}
@media (max-width: 600px) {
  .hero--home { padding-block: 40px 56px; }
  .callcard { border-radius: 20px; }
  .callcard__body { padding: 14px; }
  .bubble { max-width: 94%; }
  .band--group-first { padding-top: 56px; }
  .lang-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
/* AI Voice page directory above the footer (internal links) */
.av-directory { background: #04070F; border-top: 1px solid var(--m-line); padding: 40px 0 8px; }
.av-directory .wrap { display: flex; flex-direction: column; gap: 10px; }
.av-directory .footer-heading a { color: var(--m-strong); text-decoration: none; }
.av-directory div > div { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; margin-bottom: 14px; }
.av-directory div > div a { color: var(--m-text-2); text-decoration: none; }
.av-directory div > div a:hover { color: #fff; text-decoration: underline; }

/* final UX: AI Voice section heads, FAQ and rhythm match the main site */
main > .band:not(.band--group):not(.band--tight):not(.band--joined) { padding-block: 88px; }
main > .band--tight { padding-block: 56px; }
.section-head > h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -0.032em; }
.section-head > h2::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--m-blue), var(--m-cyan)); box-shadow: 0 0 16px rgba(34,211,238,.45); }
.section-head--center > h2::before { margin-inline: auto; }
.section-head:has(> .eyebrow) > h2::before, .band--group .section-head > h2::before, .cta-panel h2::before, .hero .section-head > h2::before { display: none; }
.band--group .section-head > h2 { font-size: clamp(22px, 2.2vw, 28px); }
section[aria-labelledby="faq-title"] .faq { border-top: 0; display: grid; gap: 10px; }
section[aria-labelledby="faq-title"] .faq details { border: 1px solid rgba(148,163,184,.13); border-radius: 14px; padding: 4px 20px;
  background: linear-gradient(180deg, rgba(30,41,66,.55), rgba(15,23,42,.55)); transition: border-color .2s, background .2s; }
section[aria-labelledby="faq-title"] .faq details[open] { border-color: rgba(96,165,250,.4); background: linear-gradient(180deg, rgba(59,130,246,.10), rgba(15,23,42,.55)); }
section[aria-labelledby="faq-title"] .faq summary { font-size: 16px; font-weight: 600; }
@media (min-width: 1000px) {
  section[aria-labelledby="faq-title"] > .wrap { display: grid !important; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 56px !important; align-items: start; }
  section[aria-labelledby="faq-title"] .section-head { position: sticky; top: 96px; }
  section[aria-labelledby="faq-title"] .narrow { max-width: none; }
}
.code-card pre { font-size: 13px; }
@media (max-width: 700px) {
  main > .band:not(.band--group):not(.band--tight):not(.band--joined) { padding-block: 60px; }
  .section-head > h2::before { margin-bottom: 14px; }
}
/* AI Voice page directory sits on the footer surface, so it reads as part of the footer */
.av-directory { background: #04070F; border-top: 1px solid var(--m-line); padding-top: 48px; }
.av-directory .wrap { display: flex; flex-direction: column; gap: 6px; }
.av-directory .footer-heading { margin-top: 18px; } .av-directory .footer-heading:first-child { margin-top: 0; }
.av-directory .footer-heading a { color: var(--m-strong); text-decoration: none; }
.av-directory + .site-footer { border-top: 0; }
.av-directory + .site-footer .wrap { padding-top: 40px; }
@media (max-width: 700px) { .av-directory div a { display: inline-flex; min-height: 32px; align-items: center; } }
/* hero top spacing matches the main home hero (was ~110px of empty space above the pill) */
.hero--home { padding-block: 36px 16px; }
@media (max-width: 600px) { .hero--home { padding-block: 0; } }