/* ReBoost Voice AI (owner, Oct 2 2026): the pieces the Voice AI page adds on top of hvac-phone.css. Loaded by the /temp
   Voice AI page (public/temp/_source/features-phone.html) AND the after-checkout upsell (src/pages/checkout/VoiceAiUpsell.jsx),
   which render the same body (src/pages/temp/voiceAi/voiceAiBody.html). Same identity as the phone page: graphite night,
   answer green as the accent. Brand rule: the word ReBoost is always brand blue, the product word Voice AI its red
   (lighter tints on dark). */

.ph { --rb: #1565d8; --rb-voice: #dc2626; }
.ph :is(.ph-hero, .ph-dark, .va-hear, .ph-plan, .ph-close, .vu-hero, .vu-close) { --rb: #5aa9ff; --rb-voice: #ff6b6b; }
.ph .rb { color: var(--rb); }
.ph .rb-voice { color: var(--rb-voice); }
.ph h1 em .rb, .ph h1 em .rb-voice { font-weight: 700; }

/* The Voice AI logo: the robot receptionist with a headset (same artwork as /hvac-ads-builder). */
.ph .ra-bot { overflow: visible; }
.ra-bot__mic { fill: #22c55e; }
.ra-bot__halo { fill: #22c55e; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ra-bot__waves { opacity: 0; }
.ra-bot__eyes { transform-box: fill-box; transform-origin: center; animation: va-bot-blink 5.5s ease-in-out infinite; }
@keyframes va-bot-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
:is(.ph-hero, .ph-dark, .ph-plan, .vu-hero, .vu-close, .vu-top) .ra-bot__band,
:is(.ph-hero, .ph-dark, .ph-plan, .vu-hero, .vu-close, .vu-top) .ra-bot > path:not([class]) { stroke: #c9d6ea; }
.va-logo .ra-bot { width: 40px; height: 38px; }
.ph-brand__logo.va-logo { gap: 12px; }

.va-kicker { justify-self: start; padding: 5px 12px; border-radius: 999px; background: #e7f8ee; color: #15803d; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.va-kicker--dark { justify-self: center; background: rgba(34, 197, 94, .16); color: #86efac; }

/* ---------------------------------------------------------------- set up and trained for you */
.va-trained {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 30px;
  padding: 48px 16px 52px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
  border-bottom: 1px solid rgba(20, 27, 43, .06);
  scroll-margin-top: 186px;
}
.va-trained__copy { display: grid; gap: 14px; align-content: start; max-width: 640px; }
.va-trained h2 { font-size: clamp(28px, 6.8vw, 40px); line-height: 1.06; letter-spacing: -0.02em; }
.va-trained h2 em { color: var(--green-deep); }
.va-trained .ph-sub { font-size: 17px; }
.va-knows { display: grid; gap: 14px; margin-top: 6px; }
.va-knows li { display: flex; align-items: flex-start; gap: 14px; }
.va-knows__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; background: #e7f8ee; color: #15803d; }
.va-knows__ico .ph-i { width: 22px; height: 22px; }
.va-knows li > span:last-child { color: var(--ink2); font-size: 15.5px; line-height: 1.42; }
.va-knows b { display: block; margin-bottom: 1px; color: var(--ink); font-size: 17px; }

.va-trained__visual { position: relative; display: grid; gap: 14px; align-content: start; justify-items: center; }
.va-ready { width: 100%; max-width: 520px; display: grid; gap: 14px; padding: 18px; }
.va-ready__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.va-ready__bot { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.va-ready__bot .ra-bot { width: 34px; height: 33px; }
.va-ready__head b { display: block; font: 700 18px/1.15 "Space Grotesk", sans-serif; }
.va-ready__head small { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; }
.va-ready__list { display: grid; gap: 8px; }
.va-ready__list li { display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: opacity .35s ease, transform .35s ease, background .35s ease; }
.va-ready__list i { display: block; flex: 0 0 auto; width: 22px; height: 22px; color: #22c55e; }
.va-ready__list i svg { width: 22px; height: 22px; }
.va-ready__list b { display: block; color: #fff; font-size: 15px; }
.va-ready__list small { display: block; color: #aab4c2; font-size: 13.5px; line-height: 1.35; }
.va-ready__done { display: inline-flex; align-items: center; justify-self: start; gap: 9px; padding: 8px 14px; border-radius: 999px; background: #22c55e; color: #06140b; font-size: 14.5px; font-weight: 800; transition: opacity .35s ease, transform .35s ease; }
.va-ready__dot { width: 9px; height: 9px; border-radius: 50%; background: #06140b; box-shadow: 0 0 0 3px rgba(6, 20, 11, .18); }
.va-ready__note { justify-self: end; margin-right: 10px; transform: rotate(-4deg); }
/* Motion (voice-ai.js): the setup items tick on one at a time, then "Ready to answer". No JS / reduced motion = all on. */
.va-ready.is-armed .va-ready__list li:not(.is-on) { opacity: .28; transform: translateX(-6px); }
.va-ready.is-armed .va-ready__list li:not(.is-on) i { color: #4b5563; }
.va-ready.is-armed:not(.is-done) .va-ready__done { opacity: 0; transform: translateY(6px); }

/* ---------------------------------------------------------------- hear it: three recordings + the demo line */
.va-hear {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 26px;
  padding: 52px 16px 56px;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(34, 197, 94, .14), transparent 70%),
    linear-gradient(180deg, #10151c 0%, #0c1016 100%);
  color: #eef3f0;
  scroll-margin-top: 186px;
}
.va-hear__head { display: grid; justify-items: center; gap: 10px; max-width: 760px; margin: 0 auto; text-align: center; }
.va-hear h2 { color: #fff; font-size: clamp(28px, 6.6vw, 40px); line-height: 1.06; }
.va-hear__sub { color: #c4cfdc; font-size: 17px; line-height: 1.45; }
.va-hear__grid { display: grid; gap: 16px; width: 100%; max-width: 1180px; margin: 0 auto; }
.va-rec { --tag: #86efac; --tag-bg: rgba(34, 197, 94, .16); display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid rgba(134, 239, 172, .16); border-radius: 18px; background: linear-gradient(160deg, #1c222b 0%, #141920 100%); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
.va-rec--amber { --tag: #fcd34d; --tag-bg: rgba(245, 158, 11, .16); }
.va-rec--blue { --tag: #93c5fd; --tag-bg: rgba(59, 130, 246, .16); }
.va-rec__tag { justify-self: start; padding: 4px 11px; border-radius: 999px; background: var(--tag-bg); color: var(--tag); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; }
.va-rec h3 { color: #fff; font-size: 21px; line-height: 1.15; }
.va-rec__what { color: #c9d3e0; font-size: 15.5px; line-height: 1.45; }
.va-player { margin-top: 4px; }
.va-rec__tx { gap: 6px; margin-top: 4px; }
.va-rec__tx li { max-width: 94%; font-size: 14px; }
.va-player audio { display: block; width: 100%; height: 42px; color-scheme: dark; }

.va-demo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(34, 197, 94, .2), rgba(20, 184, 166, .1)); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .35); }
.va-demo__ring { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #22c55e; color: #06140b; }
.va-demo__ring::before, .va-demo__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: ph-ring 1.6s ease-out infinite; }
.va-demo__ring::after { animation-delay: .55s; }
.va-demo__ring .ph-i { width: 24px; height: 24px; }
.va-demo__copy { display: grid; gap: 4px; }
.va-demo h3 { color: #fff; font-size: 22px; line-height: 1.15; }
.va-demo__copy p { color: #d3dbe2; font-size: 15.5px; line-height: 1.4; }
.va-demo__num { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: start; gap: 10px; padding: 12px 20px; border-radius: 14px; background: #fff; color: #06140b; font: 700 24px/1 "Space Grotesk", sans-serif; letter-spacing: -0.01em; text-decoration: none; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6); }
.va-demo__num .ph-i { width: 22px; height: 22px; color: #15803d; }
a.va-demo__num:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------------- what it costs: two plans (each price stated once) */
.va-plans { display: grid; gap: 16px; width: 100%; max-width: 980px; margin: 0 auto; }
.va-plancard { display: grid; gap: 10px; align-content: start; padding: 24px 22px; border-radius: 18px; background: linear-gradient(160deg, #1c222b 0%, #161b22 60%, #0e1218 100%); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45); color: #eef2fa; --rb: #5aa9ff; --rb-voice: #ff6b6b; }
.va-plancard:nth-child(2) { box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45), 0 0 0 2px #22c55e; }
.va-plancard__name { display: flex; align-items: center; gap: 10px; color: #fff; font: 700 21px/1.1 "Space Grotesk", sans-serif; }
.va-plancard__name .va-ready__bot { width: 40px; height: 40px; border-radius: 12px; }
.va-plancard__name .ra-bot { width: 29px; height: 28px; }
.va-plan__amt { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.va-plan__amt b { color: #fff; font: 700 clamp(50px, 12vw, 64px)/1 "Space Grotesk", sans-serif; letter-spacing: -0.03em; }
.va-plan__amt span { color: #b9c6de; font-size: 18px; font-weight: 600; }
.va-plancard__min { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(34, 197, 94, .12); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .3); }
.va-plancard__min b { color: #fff; font-size: 17px; }
.va-plancard__min > span { color: #86efac; font-size: 15px; font-weight: 700; }
.va-plancard__rate { color: #c9d3e0; font-size: 15px; }
.va-plancard .ph-btn { justify-self: start; margin-top: 6px; }
.va-both { display: grid; gap: 12px; width: 100%; max-width: 980px; margin: 0 auto; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px rgba(20, 27, 43, .08), 0 0 0 1px rgba(20, 27, 43, .07); }
.va-both h3 { font-size: 19px; }
.va-both .ph-plan__list li { color: var(--ink2); }
.va-both .ph-plan__list .ph-ok { color: var(--go); }
@media (min-width: 760px) {
  .va-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .va-both .ph-plan__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

/* ---------------------------------------------------------------- missed-call calculator (first under the hero) */
.va-calc { position: relative; z-index: 3; padding: 28px 16px 32px; background: #f3f5f9; border-bottom: 1px solid rgba(20, 27, 43, .06); }
.va-calc__in { display: grid; gap: 14px; justify-items: start; width: 100%; max-width: 1180px; margin: 0 auto; }
.va-calc__title { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.va-calc__card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 14px 30px rgba(20, 27, 43, .08), 0 0 0 1px rgba(20, 27, 43, .07); }
.va-calc__f { display: grid; align-content: space-between; gap: 6px; padding: 10px 10px; border-radius: 14px; background: #f3f5f9; color: var(--ink2); font-size: 12px; font-weight: 600; line-height: 1.25; cursor: text; }
.va-calc__f input { width: 100%; min-width: 0; padding: 2px 0 4px; border: 0; border-bottom: 2px dashed #c3cad6; background: transparent; color: var(--ink); font: 700 22px/1.1 "Space Grotesk", sans-serif; -moz-appearance: textfield; appearance: textfield; }
.va-calc__f input::-webkit-outer-spin-button, .va-calc__f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.va-calc__f input:focus { outline: none; border-bottom-color: var(--green); }
.va-calc__f:focus-within { box-shadow: inset 0 0 0 2px #86efac; }
.va-calc__unit { display: flex; align-items: baseline; gap: 2px; border-bottom: 2px dashed #c3cad6; }
.va-calc__unit input { border-bottom: 0; }
.va-calc__unit:focus-within { border-bottom-color: var(--green); }
.va-calc__unit i { color: var(--ink); font: 700 22px/1.1 "Space Grotesk", sans-serif; font-style: normal; }
.va-calc__f [data-va-calc-in="rate"] { max-width: 3.4ch; }
.va-calc__out { grid-column: 1 / -1; display: grid; align-content: center; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #0f1318; color: #c9d3e0; font-size: 13.5px; font-weight: 600; }
.va-calc__out b { color: #fff; font: 700 34px/1.05 "Space Grotesk", sans-serif; letter-spacing: -0.02em; }
.va-calc__cta { margin-top: 4px; }
@media (min-width: 900px) {
  .va-calc { padding: 34px clamp(24px, 4vw, 64px) 38px; }
  .va-calc__card { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 10px; }
  .va-calc__f { padding: 12px 14px; font-size: 13.5px; }
  .va-calc__f input, .va-calc__unit i { font-size: 26px; }
  .va-calc__out { grid-column: auto; }
  .va-calc__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; }
  .va-calc__title { grid-column: 1 / -1; }
  .va-calc__cta { margin: 0 0 14px; }
}

/* ---------------------------------------------------------------- use it everywhere (you pick your local number) */
.va-everywhere { position: relative; z-index: 3; display: grid; gap: 22px; padding: 44px 16px 48px; background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%); border-top: 1px solid rgba(20, 27, 43, .06); }
.va-everywhere__copy { display: grid; gap: 12px; max-width: 720px; }
.va-everywhere h2 { font-size: clamp(26px, 6.2vw, 36px); line-height: 1.08; }
.va-everywhere h2 em { color: var(--green-deep); }
.va-everywhere__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.va-everywhere__list li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px rgba(20, 27, 43, .06), 0 0 0 1px rgba(20, 27, 43, .07); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.25; }
.va-everywhere__list li:last-child { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .va-everywhere { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 4vw, 72px); padding: 60px clamp(40px, 5vw, 96px) 64px; }
  .va-everywhere__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- wider screens */
@media (min-width: 1100px) {
  .va-trained { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; column-gap: clamp(40px, 5vw, 96px); padding: 72px clamp(40px, 5vw, 96px) 76px; }
  .va-trained__copy { max-width: 680px; }
  .va-hear { padding: 72px clamp(40px, 5vw, 96px) 76px; }
}
@media (min-width: 980px) {
  .va-hear__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .va-demo { grid-template-columns: auto minmax(0, 1fr) auto; padding: 22px 26px; }
  .va-demo__num { grid-column: auto; justify-self: end; }
}
@media (max-width: 1180px) { .va-trained, .va-hear { scroll-margin-top: 236px; } }

@media (prefers-reduced-motion: reduce) {
  .ra-bot__eyes, .va-demo__ring::before, .va-demo__ring::after { animation: none !important; }
  .va-ready__list li, .va-ready__done { transition: none !important; }
}