/* Compact, on-page phone CTA from src/app/cta; independent of Bootstrap. */
.tw-phone-demo { box-sizing: border-box; width: 100%; max-width: 520px; min-width: 0; margin-inline: auto; padding: 1.5rem; border-radius: 1rem; background: rgba(255,255,255,.7); color: #271b38; box-shadow: 0 .125rem .25rem #00000013; text-align: center; scroll-margin-top: 2rem; }
.tw-phone-demo *, .tw-phone-demo *::before, .tw-phone-demo *::after { box-sizing: border-box; }
.tw-phone-demo [hidden] { display: none !important; }
.tw-phone-demo .tw-phone-demo-label { margin: 0 0 .5rem; color: #5713bf; font-size: .85rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; }
.tw-phone-demo h2 { margin: 0 0 .5rem; color: #271b38; font-size: clamp(1.5rem, 2vw, 1.75rem); line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.tw-phone-demo .tw-phone-demo-description { margin: 0 0 1rem; color: #271b38; line-height: 1.65; }
.tw-phone-demo .tw-phone-demo-call { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; max-width: 100%; min-height: 48px; margin: 0 0 1rem; padding: .65rem 1rem; border: 1px solid #d50000; border-radius: .5rem; background: #d50000; color: #fff; font: inherit; font-size: 1.15rem; line-height: 1.5; text-decoration: none; }
.tw-phone-demo-call > span:last-child { min-width: 0; }
.tw-phone-demo .tw-phone-demo-call:hover { background: #b50000; border-color: #aa0000; color: #fff; }
.tw-phone-demo .tw-phone-demo-call:focus-visible { outline: 3px solid #5713bf; outline-offset: 4px; }
.tw-phone-demo-wave { display: inline-flex; align-items: center; justify-content: center; gap: 3px; flex: 0 0 39px; height: 26px; direction: ltr; }
.tw-phone-demo-wave > span { display: block; width: 3px; height: var(--tw-wave-height,14px); border-radius: 3px; background: currentColor; transform-origin: center; animation: tw-phone-demo-wave 1.1s ease-in-out infinite; animation-delay: var(--tw-wave-delay,0s); animation-play-state: paused; }
.tw-phone-demo-wave.is-playing > span { animation-play-state: running; }
.tw-phone-demo-wave > span:nth-child(1), .tw-phone-demo-wave > span:nth-child(7) { --tw-wave-height: 8px; --tw-wave-delay: .3s; }
.tw-phone-demo-wave > span:nth-child(2), .tw-phone-demo-wave > span:nth-child(6) { --tw-wave-height: 15px; --tw-wave-delay: .2s; }
.tw-phone-demo-wave > span:nth-child(3), .tw-phone-demo-wave > span:nth-child(5) { --tw-wave-height: 21px; --tw-wave-delay: .1s; }
.tw-phone-demo-wave > span:nth-child(4) { --tw-wave-height: 26px; }
.tw-phone-demo-motion-control { margin: -.3rem 0 1rem; }
.tw-phone-demo-motion { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: #554464; font: inherit; font-size: .8rem; padding: .35rem .5rem; border-radius: 5px; cursor: pointer; }
.tw-phone-demo-motion:hover { color: #5713bf; text-decoration: underline; text-underline-offset: .2em; }
.tw-phone-demo-motion:focus-visible { outline: 2px solid #5713bf; outline-offset: 2px; }
.tw-phone-demo-motion-symbol { font-size: .95rem; line-height: 1; width: 1em; }
.tw-phone-demo .tw-phone-demo-number-label { margin: 0 0 .25rem; font-size: .875rem; color: #554464; }
.tw-phone-demo .tw-phone-demo-number { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 700; line-height: 1.4; color: #271b38; white-space: nowrap; }
.tw-phone-demo .tw-phone-demo-disclaimer { margin: 1rem 0 0; font-size: .8rem; line-height: 1.6; color: #44394e; }
@keyframes tw-phone-demo-wave { 0%,100% { transform: scaleY(.45); } 40% { transform: scaleY(1); } 70% { transform: scaleY(.65); } }
@media (prefers-reduced-motion: reduce) { .tw-phone-demo-wave:not(.is-explicit) > span { animation: none; } }
@media (max-width: 420px) { .tw-phone-demo { padding: 1.25rem; } .tw-phone-demo .tw-phone-demo-call { font-size: 1rem; } }