/* A readable lead handoff inside the device; example navigation stays outside. */
.crm-showcase { padding: clamp(48px, 6svh, 72px) 0; color: #1d1d1f; background: #fff; }
.crm-showcase-heading { width: min(1240px, calc(100% - 80px)); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 56px; }
.crm-showcase h2 { margin: 0; font-size: clamp(42px, min(4.3vw, 6.5svh), 64px); letter-spacing: -.055em; line-height: 1.08; }
.crm-showcase h2 span { color: #77777e; }
.crm-benefits { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.crm-benefits li { display: flex; align-items: center; gap: 11px; font-size: 18px; letter-spacing: -.025em; line-height: 1.4; }
.crm-benefits svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: #1758f5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* A front-facing device keeps the handoff readable at desktop sizes. */
.crm-showcase-figure { --crm-device-width: min(960px, calc(100vw - 440px), max(720px, calc((100svh - var(--nav-height) - 260px) * 1.6))); --crm-device-gap: clamp(36px, 5svh, 56px); position: relative; margin: 0; padding-top: var(--crm-device-gap); }
.crm-example-tabs { position: absolute; z-index: 2; top: calc(var(--crm-device-gap) + var(--crm-device-width) * .42); left: calc(50% + var(--crm-device-width) * .5 + 40px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; width: clamp(180px, 13vw, 240px); }
.crm-example-tabs button { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 66px; padding: 18px 20px; border: 1px solid #dedee3; border-radius: 14px; background: transparent; color: #77777e; cursor: pointer; font: inherit; font-size: 16px; font-weight: 500; line-height: 1.35; text-align: left; letter-spacing: -.025em; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.crm-example-tabs button[aria-selected="true"] { border-color: #fff; background: #fff; color: #1d1d1f; box-shadow: 0 4px 18px #20213b09, 0 1px 2px #20213b05; }
.crm-example-tabs button:hover { border-color: #c7c7ce; color: #1d1d1f; }
.crm-example-tabs button:active { background: #f0f2f7; }
.crm-example-tabs button:focus-visible { outline: 2px solid #1758f5; outline-offset: 4px; }
.crm-device-stage { position: relative; width: var(--crm-device-width); margin: 0 auto; container-type: inline-size; }
.crm-device { position: relative; padding: 12px 12px 24px; border: 2px solid #828589; border-radius: 24px 24px 10px 10px; background: #0d0e10; box-shadow: inset 0 0 0 1px #47494d, 0 1px 2px #10182830; }
.crm-device::before { content: ""; position: absolute; z-index: 3; top: 12px; left: 50%; width: 10%; height: 18px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0d0e10; }
.crm-device::after { content: ""; position: absolute; z-index: 4; left: calc(50% - 2px); top: 17px; width: 4px; height: 4px; border-radius: 50%; background: #151b22; box-shadow: inset 0 0 1px #43515e; }
.crm-device-base { position: relative; height: clamp(15px, 2.2cqw, 22px); margin: -2px -7% 0; border-radius: 1px 1px 5% 5% / 1px 1px 85% 85%; background: linear-gradient(90deg, #9c9fa3, #e8eaed 2%, #b4b7bc 7%, #eceef1 25%, #c7c9cd 50%, #e6e8ec 77%, #aeb1b5 94%, #e5e7e9 98%, #999ca0); box-shadow: inset 0 -4px 4px #3b404752, 0 9px 15px -9px #242d3f60; }
.crm-device-base::before { content: ""; position: absolute; left: 42%; top: 0; width: 16%; height: 40%; border-radius: 0 0 9px 9px; background: linear-gradient(90deg, #7f8388, #c8cbd0 12%, #d5d7da 50%, #c5c8cd 88%, #7f8388); box-shadow: inset 0 -1px 2px #5c606544; }
.crm-screen { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 5% 7%; overflow: hidden; border-radius: 12px 12px 1px 1px; color: #30343a; background: #2724a5 url('./crm-wallpaper.svg') center / cover; }
.crm-screen [hidden] { display: none !important; }
.crm-window { display: grid; grid-template-rows: 42px minmax(0, 1fr); width: 100%; height: 100%; overflow: hidden; border: 1px solid #ffffffb3; border-radius: 13px; background: #f4f6fbe8; backdrop-filter: blur(32px) saturate(.8); -webkit-backdrop-filter: blur(32px) saturate(.8); box-shadow: 0 14px 36px #0926473d, 0 1px 3px #0926471f, inset 0 1px 0 #ffffffb3; }
.crm-window-bar { position: relative; display: flex; align-items: center; justify-content: center; color: #4e5c6d; background: #edf3fb8c; border-bottom: 1px solid #6e8eac26; font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.crm-window-dots { position: absolute; left: 16px; display: flex; gap: 8px; }
.crm-window-dots i { display: block; width: 12px; height: 12px; border: 1px solid #00000012; border-radius: 50%; background: #ff5f57; }
.crm-window-dots i:nth-child(2) { background: #febc2e; }
.crm-window-dots i:nth-child(3) { background: #28c840; }
.crm-window-content { min-height: 0; }
.crm-lead { height: 100%; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: clamp(9px, 1.3cqw, 14px); padding: clamp(17px, 2.5cqw, 28px); font-size: clamp(13px, 1.75cqw, 17px); font-weight: 400; line-height: 1.45; letter-spacing: -.018em; }
.crm-lead:focus-visible { outline: 2px solid #1758f5; outline-offset: -3px; }
.crm-lead-heading { flex: 0 0 auto; }
.crm-lead-summary { margin: 0; }
.crm-lead-facts { flex: 0 0 auto; margin: 0; }
.crm-lead-facts > div, .crm-lead-next { display: grid; grid-template-columns: 32% minmax(0, 1fr); gap: 16px; }
.crm-lead-facts > div { padding: 7px 0; border-bottom: 1px solid #5066811c; }
.crm-lead-facts dt, .crm-lead-next > span { margin: 0; color: #5c6b7d; }
.crm-lead-facts dd, .crm-lead-next p { margin: 0; }
.crm-lead-next { flex: 0 0 auto; }
.crm-recording { flex: 0 0 auto; display: flex; justify-content: center; margin-top: auto; padding-top: 8px; }
.crm-audio-player { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.crm-recording-play { position: relative; display: grid; place-items: center; width: clamp(60px, 8cqw, 76px); height: clamp(60px, 8cqw, 76px); padding: 0; border: 1px solid #ffffffb3; border-radius: 50%; background: linear-gradient(150deg, #ffffff80, #ffffff26 60%, #ffffff59); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); color: #202632; cursor: pointer; box-shadow: 0 4px 14px #1b24551c, 0 1px 3px #1b24550d, inset 0 1px 1px #ffffffcc, inset 0 -1px 1px #ffffff80; -webkit-tap-highlight-color: transparent; }
.crm-recording-play:focus-visible, .crm-recording-skip:focus-visible { outline: 2px solid #1758f5; outline-offset: 4px; }
.crm-recording-play svg { grid-area: 1 / 1; width: 31px; height: 31px; fill: currentColor; }
.crm-recording-play .crm-icon-play { transform: translateX(1px); }
.crm-icon-pause, .crm-audio-player[data-playing="true"] .crm-icon-play { display: none; }
.crm-audio-player[data-playing="true"] .crm-icon-pause { display: block; }
.crm-playback-tools { display: flex; align-items: center; gap: 9px; min-height: 44px; }
.crm-recording-skip { display: grid; place-items: center; width: 44px; height: 44px; padding: 7px; border: 0; border-radius: 50%; background: transparent; color: #495261; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.crm-recording-skip:hover { color: #1d1d1f; background: #ffffff6b; }
.crm-recording-skip:active { color: #1758f5; }
.crm-recording-skip svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.crm-recording-skip .skip-arrow { fill: currentColor; stroke: none; }
.crm-recording-skip text { fill: currentColor; stroke: none; font-family: inherit; font-size: 11px; font-weight: 600; text-anchor: middle; }
.crm-recording-duration { min-width: 84px; color: #59616e; text-align: center; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-recording-error { max-width: 240px; margin: 0; color: #52677f; text-align: center; font-size: 12px; }
@container (max-width: 800px) {
 .crm-lead { padding: 16px; gap: 8px; }
 .crm-lead-facts > div { padding: 5px 0; }
 .crm-recording { padding-top: 0; }
 .crm-audio-player { gap: 6px; }
 .crm-recording-play { width: 60px; height: 60px; }
}
.crm-call-audio { display: block; width: 100%; height: 48px; }
.crm-showcase figcaption { width: calc(100% - 44px); max-width: 680px; margin: 32px auto 0; color: #77777e; text-align: center; font-size: 14px; line-height: 1.5; }
.crm-showcase-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: calc(100% - 44px); margin: 18px auto 0; color: #1758f5; font-size: 17px; line-height: 1.4; }
.crm-showcase-link svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.crm-showcase-link:focus-visible { outline: 2px solid #1758f5; outline-offset: 6px; }
@media (max-width: 1400px) { .crm-example-tabs { left: calc(50% + var(--crm-device-width) * .5 + 20px); } .crm-example-tabs button { padding: 15px; font-size: 15px; } }
@media (max-width: 1200px) {
 .crm-showcase-figure { --crm-device-width: min(800px, calc(100vw - 100px)); }
 .crm-example-tabs { position: static; width: fit-content; min-width: 210px; transform: none; margin: 0 auto 30px; }
}
@media (max-width: 900px) {
 .crm-showcase-heading { width: min(560px, calc(100% - 44px)); display: block; }
 .crm-benefits { margin-top: 24px; }
}
@media (max-width: 700px) {
 .crm-showcase { padding: 64px 20px; }
 .crm-showcase-heading { width: min(560px, 100%); }
 .crm-showcase h2 { font-size: clamp(34px, 8.7vw, 48px); }
 .crm-benefits { gap: 12px; }
 .crm-benefits li { font-size: 17px; }
 .crm-showcase-figure { --crm-device-width: 100%; width: min(560px, 100%); margin: 32px auto 0; padding-top: 0; }
 .crm-example-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; gap: 8px; margin-bottom: 20px; }
 .crm-example-tabs button { min-height: 56px; padding: 12px; font-size: 14px; text-align: center; justify-content: center; }
 .crm-device { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
 .crm-device::before, .crm-device::after, .crm-device-base { display: none; }
 .crm-screen { aspect-ratio: auto; padding: 0; background: transparent; overflow: visible; }
 .crm-window { grid-template-rows: 44px auto; box-shadow: 0 8px 28px #09264712, 0 1px 3px #0926470a; }
 .crm-lead { min-height: 485px; padding: 20px 18px; overflow: visible; gap: 20px; font-size: 16px; line-height: 1.5; }
 .crm-lead-facts > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; padding: 9px 0; }
 .crm-lead-facts dt, .crm-lead-next > span { font-size: 14px; }
 .crm-lead-next { display: block; }
 .crm-lead-next p { margin-top: 5px; }
 .crm-recording { padding-top: 4px; }
 .crm-showcase-link { min-height: 44px; max-width: 100%; margin-top: 20px; font-size: 16px; }
 .crm-showcase figcaption { width: 100%; margin-top: 24px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .crm-example-tabs button, .crm-recording-play, .crm-recording-skip { transition: none; } }