/* /cloud-telephony (7 Nov 2026): sky blue (cloud-telephony.svg) on top of product-v3.css + voice-v3.css scenes.
   voice-v3.css is gold for /voice-call, so the scene colours it hard-codes are set back to blue here. */

.pv-page--telephony .vc-demo__phone { filter: drop-shadow(0 24px 40px rgba(14, 165, 233, 0.18)); }
.pv-page--telephony .vc-float__icon--shot { background: #E8F6FD; }
.pv-page--telephony .vc-float__dot { background: #0EA5E9; animation-name: ct-ping; }
@keyframes ct-ping { 0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(14, 165, 233, 0); } }
.pv-page--telephony .vc-play { background: #E8F6FD; color: #0369A1; }

/* nine features, three per row */
.ct-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ct-feature { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; border-radius: 18px; }
.ct-feature__head { display: flex; align-items: center; gap: 14px; }
.ct-ico { flex: 0 0 52px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #E8F6FD; border: 1px solid #C4E8F9; color: #0EA5E9; }
.ct-feature h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--f2h-ink); }
.ct-feature p { margin: 0; font-size: 14.5px; line-height: 22px; color: #475467; }
.ct-feature .pv-points { margin: 0; padding: 0; list-style: none; }
.ct-feature .pv-points li { margin-top: 6px; font-size: 13.5px; line-height: 20px; }
.ct-feature .pv-points svg { color: #0EA5E9; }

/* "for bulk outbound campaigns" cross-link card */
.ct-cross { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: 18px; }
.ct-cross__body { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; } /* text wraps instead of pushing the button out */
.ct-cross > .f2h-btn { flex: 0 0 auto; }
.ct-cross__body .pv-tile { flex: 0 0 auto; }
.ct-cross h2 { margin: 0 0 4px; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--f2h-ink); }
.ct-cross p { margin: 0; font-size: 14.5px; line-height: 22px; color: #475467; }

/* routing strategies strip */
.ct-strategies { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ct-strategy { padding: 14px 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E4E7EC; }
.ct-strategy b { display: block; font-size: 14px; color: var(--f2h-ink); }
.ct-strategy span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 18px; color: #667085; }

/* web phone mock */
.ct-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px; }
.ct-phone__dial, .ct-phone__live { padding: 14px; border-radius: 12px; background: #F8F9FC; border: 1px solid #EEF0F4; }
.ct-phone small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #98A2B3; }
.ct-phone__num { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--f2h-ink); white-space: nowrap; }
.ct-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ct-keypad span { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 8px; background: #FFFFFF; border: 1px solid #E4E7EC; font-size: 13px; font-weight: 600; color: #344054; }
.ct-phone__call { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; height: 34px; border-radius: 9px; background: #0EA5E9; color: #FFFFFF; font-size: 13px; font-weight: 700; }
.ct-live { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 8px 0; border-top: 1px solid #EEF0F4; font-size: 12.5px; }
.ct-live:first-of-type { border-top: 0; margin-top: 6px; }
.ct-live b { font-weight: 600; color: var(--f2h-ink); }
.ct-live em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: #98A2B3; }
.ct-live__btns { display: flex; gap: 6px; margin-top: 10px; }
.ct-live__btns span { flex: 1; display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 8px; background: #FFFFFF; border: 1px solid #E4E7EC; font-size: 12px; font-weight: 600; color: #344054; }
.ct-live__btns span.is-end { background: #FEF3F2; border-color: #FDA29B; color: #B42318; }

@media (max-width: 1024px) {
    .ct-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-strategies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .ct-features { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ct-feature { padding: 20px 18px; }
    .ct-cross { flex-direction: column; align-items: flex-start; padding: 20px; }
    .ct-strategies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-phone { grid-template-columns: 1fr; }
}

/* three pillars in one row on desktop (product-v3 lays out four as 2 x 2) */
@media (min-width: 1025px) {
    .pv-pillars.ct-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ct-pillars .pv-pillar { padding: 26px 24px 24px; }
    .ct-pillars .pv-pillar h3 { font-size: 20px; }
}

/* ---- call journey: five steps lit one after another, a pulse runs along the track (6 s loop) ---- */
.ct-journey { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 28px 24px; border-radius: 20px; }
.ct-journey__track { position: absolute; left: 10%; right: 10%; top: 54px; height: 3px; border-radius: 3px; background: #E0F2FE; overflow: hidden; }
.ct-journey__pulse { position: absolute; top: 0; left: -20%; width: 20%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(14, 165, 233, 0), #0EA5E9); animation: ct-pulse 6s linear infinite; }
@keyframes ct-pulse { 0% { left: -20%; } 85% { left: 100%; } 100% { left: 100%; } }
.ct-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ct-step__ico { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #FFFFFF; border: 1px solid #C4E8F9; color: #0EA5E9; box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06);
    animation: ct-step 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.02s); }
@keyframes ct-step { 0%, 18%, 100% { background: #FFFFFF; color: #0EA5E9; transform: scale(1); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); }
    6%, 12% { background: #0EA5E9; color: #FFFFFF; transform: scale(1.08); box-shadow: 0 10px 24px rgba(14, 165, 233, 0.35); } }
.ct-step__txt { display: flex; flex-direction: column; gap: 4px; }
.ct-step b { font-size: 15px; line-height: 20px; color: var(--f2h-ink); }
.ct-step__txt > span { font-size: 13px; line-height: 19px; color: #667085; }

/* ---- sales + support: live feed plays line by line (10 s loop) ---- */
.ct-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ct-team { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border-radius: 20px; }
.ct-team .f2h-pill { align-self: flex-start; }
.ct-team h3 { margin: 0; font-size: 20px; line-height: 27px; font-weight: 700; color: var(--f2h-ink); }
.ct-feed { margin: 0; padding: 12px 14px; list-style: none; border-radius: 14px; background: #FFFFFF; border: 1px solid #EEF0F4; min-height: 206px; }
.ct-feed li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; color: #344054; border-top: 1px dashed #EEF0F4;
    opacity: 0; transform: translateY(6px); animation: ct-feed 10s ease-out infinite; animation-delay: calc(var(--i) * 1.3s); }
.ct-feed li:first-child { border-top: 0; }
.ct-feed .pv-status { flex: 0 0 92px; justify-content: flex-start; }
@keyframes ct-feed { 0% { opacity: 0; transform: translateY(6px); } 4%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: none; } }
.ct-team .pv-points { margin: 0; padding: 0; list-style: none; }
.ct-team .pv-points li { margin-top: 6px; font-size: 14px; line-height: 21px; }
.ct-team .pv-points svg { color: #0EA5E9; }

/* ---- agent web phone: the incoming call pops in, is answered, then talking (7 s loop) ---- */
.ct-agent__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 14px; }
.ct-agent__list, .ct-agent__pop { padding: 14px; border-radius: 12px; background: #F8F9FC; border: 1px solid #EEF0F4; }
.ct-agent small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #98A2B3; }
.ct-agent__list div { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid #EEF0F4; }
.ct-agent__list div:first-of-type { border-top: 0; margin-top: 4px; }
.ct-agent__list b, .ct-agent__pop b { font-size: 14px; color: var(--f2h-ink); }
.ct-agent em { font-style: normal; font-size: 11.5px; color: #667085; }
.ct-agent__pop { position: relative; display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; border-color: #C4E8F9; animation: ct-pop 7s ease-in-out infinite; }
.ct-agent__pop b { margin-top: 4px; font-size: 18px; }
@keyframes ct-pop { 0% { opacity: 0; transform: translateY(14px); } 8%, 92% { opacity: 1; transform: none; box-shadow: 0 12px 28px rgba(14, 165, 233, 0.18); } 100% { opacity: 0; transform: translateY(-6px); } }
/* Answer / Decline, then "Talking": both in the same grid cell, swapped with opacity */
.ct-agent__act { display: grid; margin-top: 6px; }
.ct-agent__btns, .ct-agent__talk { grid-area: 1 / 1; }
.ct-agent__btns { display: flex; gap: 8px; animation: ct-btns 7s ease-in-out infinite; }
.ct-agent__btns span { flex: 1; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 9px; font-size: 12.5px; font-weight: 700; }
.ct-agent__btns .is-ok { background: #12B76A; color: #FFFFFF; }
.ct-agent__btns .is-end { background: #FEF3F2; color: #B42318; border: 1px solid #FDA29B; }
@keyframes ct-btns { 0%, 40% { opacity: 1; visibility: visible; } 46%, 100% { opacity: 0; visibility: hidden; } }
.ct-agent__talk { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 9px; background: #ECFDF3; color: #027A48; font-size: 12.5px; font-weight: 700; opacity: 0; animation: ct-talk 7s ease-in-out infinite; }
@keyframes ct-talk { 0%, 42% { opacity: 0; visibility: hidden; } 48%, 100% { opacity: 1; visibility: visible; } }
.ct-agent__dot { width: 8px; height: 8px; border-radius: 50%; background: #12B76A; animation: ct-ping-green 1.2s ease-out infinite; }
@keyframes ct-ping-green { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0); } }

/* ---- PBX vs SIP trunk vs cloud PBX ---- */
.ct-pbx { padding: 8px; border-radius: 20px; overflow-x: auto; }
.ct-pbx table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.ct-pbx th, .ct-pbx td { padding: 14px 16px; text-align: left; vertical-align: top; line-height: 21px; border-top: 1px solid #EEF0F4; }
.ct-pbx thead th { border-top: 0; font-size: 13px; font-weight: 700; color: var(--f2h-ink); }
.ct-pbx tbody th { width: 18%; font-weight: 600; color: var(--f2h-ink); }
.ct-pbx td { color: #475467; }
.ct-pbx .is-us { background: #F0F9FF; color: #0C4A6E; }
.ct-pbx thead .is-us { color: #0369A1; border-radius: 12px 12px 0 0; }
.ct-note { margin: 14px 0 0; text-align: center; font-size: 14.5px; color: #475467; }
/* the site table style stripes rows grey: plain rows here, only the Fast2SMS column is tinted */
.ct-pbx tbody tr, .ct-pbx tbody tr > th, .ct-pbx tbody tr > td { background: transparent !important; }
.ct-pbx tbody tr > td.is-us { background: #F0F9FF !important; }
/* phones: the table scrolls inside its card; the row labels stay put */
@media (max-width: 767px) {
    .ct-pbx table { min-width: 640px; font-size: 13px; }
    .ct-pbx tbody th, .ct-pbx thead th:first-child { position: sticky; left: 0; z-index: 1; width: 120px; background: #FBF8FD !important; box-shadow: 1px 0 0 #EEF0F4; }
}

@media (max-width: 1024px) {
    .ct-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
    .ct-journey__track { display: none; }
    .ct-teams { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .ct-journey { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
    .ct-step { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
    .ct-step__ico { flex: 0 0 48px; width: 48px; height: 48px; }
    .ct-agent__body { grid-template-columns: 1fr; }
    .ct-team { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-journey__pulse, .ct-step__ico, .ct-feed li, .ct-agent__pop, .ct-agent__btns, .ct-agent__talk, .ct-agent__dot { animation: none !important; }
    .ct-feed li { opacity: 1; transform: none; }
}