/* A quiet phone silhouette, a conversation, and the work in the foreground. */
.showcase { padding-top: 18px; padding-bottom: 65px; scroll-margin-top: 0; }
.industry-picker { display: flex; align-items: center; justify-content: center; margin: 0 0 42px; }
.industry-tabs { display: flex; align-items: center; justify-content: center; gap: 32px; }
.industry-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; border-bottom: 1.5px solid transparent; color: #747973; font: 400 14px/1.4 var(--sans); white-space: nowrap; transition: color .2s, border-color .2s; }
.industry-tab:hover { color: var(--ink); }
.industry-tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.story-layout { display: grid; grid-template-columns: minmax(0, 550px) minmax(0, 455px); justify-content: center; align-items: center; gap: clamp(45px, 6.5vw, 95px); }
.story-visual { position: relative; min-width: 0; width: 100%; height: 785px; }
.story-copy { padding-bottom: 36px; }
.story-copy h2 { max-width: 455px; margin: 0; color: #252925; font: 550 clamp(38px, 3.6vw, 50px)/1.1 var(--sans); letter-spacing: -1.8px; text-wrap: balance; }
.story-copy > p { max-width: 425px; margin-top: 26px; color: #636963; font: 400 18px/1.7 var(--sans); }
.hero-demo { position: relative; width: 100%; height: 100%; }
.hero-phone { position: absolute; top: 42px; left: 105px; z-index: 1; width: 310px; height: 720px; padding: 5px; overflow: visible; border: 1px solid #eeefec; border-radius: 46px; background: #fcfcfb; box-shadow: 0 3px 7px #283a3010, 0 18px 45px -25px #4053452b, 0 0 0 2px #fff inset; }
.phone-screen { position: relative; height: 100%; min-height: 0; overflow: visible; border-radius: 40px; background: linear-gradient(155deg, #fff 0%, #fdfefd 70%, #fcfcfb 100%); }
.phone-status-bar, .phone-back, .phone-contact, .thread-time, .phone-home-area { display: none; }
.phone-top { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: max-content; min-width: 180px; max-width: 245px; padding: 24px 19px 12px; border: 1px solid #f5f5f2; border-radius: 22px; background: #fff; box-shadow: 0 10px 25px -8px #2d403329, 0 2px 5px #3c493509; text-align: center; }
.phone-top .teammate-avatar { position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; filter: drop-shadow(0 4px 5px #24322516); }
.phone-top strong { display: block; color: #202620; font: 650 16px/1.25 var(--sans); white-space: nowrap; }
.phone-top .teammate-activity { display: block; margin-top: 3px; color: #7a817a; font: 400 13px/1.35 var(--sans); white-space: nowrap; }
.phone-thread { position: absolute; top: 61px; left: -42px; display: flex; flex-direction: column; gap: 13px; width: 370px; padding: 0; }
.bubble { position: relative; width: fit-content; max-width: 285px; padding: 12px 16px; border-radius: 20px; font: 400 16px/1.45 var(--sans); letter-spacing: -.18px; }
.message-reaction { position: absolute; z-index: 2; top: -12px; left: -19px; display: grid; place-items: center; width: 34px; height: 30px; border: 2px solid #fff; border-radius: 18px; background: #f0f1ef; box-shadow: 0 2px 5px #30403610; font: 20px/1 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; pointer-events: none; }
.message-reaction::before { content: ''; position: absolute; bottom: -5px; left: 2px; width: 8px; height: 8px; border: 1.5px solid #fff; border-radius: 50%; background: #f0f1ef; }
.message-reaction::after { content: ''; position: absolute; bottom: -8px; left: -2px; width: 4px; height: 4px; border-radius: 50%; background: #e7eae5; }
.message-reaction > span { position: relative; z-index: 1; }
.bubble-customer { align-self: flex-end; border-bottom-right-radius: 7px; background: #cee6ff; color: #233b52; box-shadow: 0 7px 18px -10px #497fa63b; }
.bubble-agent { align-self: flex-start; border: 1px solid #f0f1ee; border-bottom-left-radius: 7px; background: #fff; color: #303932; box-shadow: 0 8px 23px -8px #354b3624, 0 2px 5px #354b3607; }
.hero-response { display: flex; flex-direction: column; gap: 13px; }
.phone-composer { position: absolute; bottom: -17px; left: -29px; display: flex; align-items: center; gap: 14px; width: 355px; height: 50px; padding: 10px 16px; border: 1px solid #f3f3f0; border-radius: 28px; background: #fffffff5; color: #a2a8a2; box-shadow: 0 10px 28px -10px #364b3529; }
.phone-add { flex: none; color: #515d53; font: 300 28px/1 var(--sans); }
.phone-composer > div { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; color: #9aa19a; font-size: 15px; }
.phone-voice-input { display: flex; align-items: center; gap: 17px; margin-left: 12px; }
.phone-voice-input svg { flex: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.phone-microphone { width: 21px; height: 25px; color: #a0a5a3; }
.phone-waveform { width: 27px; height: 28px; color: #303631; }
.work-card { position: absolute; z-index: 3; top: 365px; left: 48px; width: 400px; }
.browser-frame { position: relative; z-index: 2; overflow: hidden; border: 1px solid #e7ebe6; border-radius: 18px; background: #fff; box-shadow: 0 22px 55px -22px #334c393b, 0 4px 12px #27372a08; }
.scene-details { position: absolute; inset: 0; pointer-events: none; user-select: none; }
.scene-detail { position: absolute; z-index: 3; left: calc(100% + var(--detail-x)); top: var(--detail-y); width: var(--detail-size); height: var(--detail-size); max-width: none; object-fit: contain; opacity: var(--detail-opacity, 1); transform: rotate(var(--detail-rotation)); filter: drop-shadow(0 6px 7px #2c3f2514); }
.detail-1 { --detail-x: 2px; --detail-y: -124px; --detail-size: 36px; --detail-rotation: -16deg; }
.detail-2 { --detail-x: 35px; --detail-y: -68px; --detail-size: 23px; --detail-rotation: 20deg; --detail-opacity: .6; filter: blur(.3px); }
.detail-3 { --detail-x: 3px; --detail-y: 7px; --detail-size: 49px; --detail-rotation: 12deg; }
.detail-4 { --detail-x: 56px; --detail-y: 88px; --detail-size: 24px; --detail-rotation: -25deg; --detail-opacity: .65; filter: blur(.4px); }
.detail-5 { --detail-x: -10px; --detail-y: 151px; --detail-size: 39px; --detail-rotation: -18deg; }
.detail-6 { --detail-x: 29px; --detail-y: 218px; --detail-size: 24px; --detail-rotation: 22deg; --detail-opacity: .7; }
.detail-7 { --detail-x: -20px; --detail-y: 256px; --detail-size: 80px; --detail-rotation: 16deg; z-index: 1; }
.work-card-header { display: flex; align-items: center; gap: 13px; height: 45px; padding: 8px 13px; border-bottom: 1px solid #edf0ec; background: #fafbf9; }
.window-dots { display: flex; gap: 4px; flex: none; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #cdd3cc; }
.browser-address { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; gap: 5px; height: 27px; padding: 0 6px; border: 1px solid #edf0eb; border-radius: 6px; background: #fff; color: #657266; font: 400 11px/1 var(--sans); }
.browser-address .icon { width: 10px; height: 10px; }
.browser-more { width: 13px; height: 13px; color: #8b978a; }
.workspace-content { color: #26352a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width:1150px) {
  .story-layout { grid-template-columns: minmax(0,480px) minmax(0,410px); gap: 45px; }
  .hero-phone { left: 68px; }
  .work-card { left: 12px; width: 390px; }
  .story-copy h2 { font-size: 45px; }
}
@media (max-width:1000px) {
  .story-layout { grid-template-columns: minmax(0,440px) minmax(0,350px); gap: 32px; }
  .hero-phone { left: 44px; }
  .work-card { left: 0; width: 365px; }
  .story-copy h2 { font-size: 40px; }
  .story-copy > p { font-size: 17px; }
}
@media (max-width:850px) {
  .showcase { padding-bottom: 40px; }
  .industry-picker { margin-bottom: 42px; }
  .story-layout { display: flex; flex-direction: column; gap: 45px; }
  .story-copy { order: -1; width: 100%; max-width: 555px; padding: 0; text-align: center; }
  .story-copy h2 { max-width: 510px; margin-inline: auto; font-size: 43px; }
  .story-copy > p { max-width: 465px; margin: 21px auto 0; font-size: 17px; line-height: 1.7; }
  .story-visual { width: 100%; max-width: 480px; }
  .hero-phone { left: 88px; }
  .work-card { left: 31px; width: 400px; }
}
@media (max-width:600px) {
  .showcase { padding-inline: 22px; }
  .industry-picker { margin-bottom: 30px; }
  .industry-tabs { gap: 21px; }
  .industry-tab { font-size: 12px; }
  .story-copy h2 { font-size: 38px; letter-spacing: -1.2px; }
  .story-copy > p { font-size: 16px; }
  .story-visual { max-width: 410px; height: 780px; }
  .hero-phone { left: calc(50% - 145px); width: 290px; }
  .phone-thread { left: -24px; width: 330px; }
  .bubble { max-width: 265px; font-size: 15px; }
  .phone-composer { left: -21px; width: 320px; }
  .work-card { top: 365px; left: 50%; width: min(365px, 100%); transform: translateX(-50%); }
  .scene-detail { left: auto; right: -12px; z-index: 1; --detail-size: 26px; }
  .detail-1 { --detail-y: -205px; right: -6px; --detail-size: 28px; }
  .detail-2 { --detail-y: -76px; right: -13px; --detail-size: 17px; }
  .detail-3, .detail-4, .detail-5 { display: none; }
  .detail-6 { --detail-y: 150px; right: -8px; --detail-size: 20px; z-index: 3; }
  .detail-7 { --detail-y: -52px; right: 3px; --detail-size: 44px; z-index: 3; }
}
@media (max-width:450px) {
  .industry-tabs { gap: 24px; }
  .industry-tab { min-height: 42px; font-size: 12px; }
  .story-layout { gap: 36px; }
  .story-copy h2 { font-size: 35px; }
  .story-copy > p { font-size: 16px; }
  .story-visual { height: 780px; }
  .hero-phone { left: calc(50% - 137px); width: 274px; }
  .phone-thread { left: -24px; width: 310px; }
  .bubble { max-width: 256px; padding: 12px 15px; }
  .phone-composer { left: -20px; width: 302px; }
  .work-card { width: 100%; top: 365px; }
  .work-card-header { gap: 9px; padding-inline: 11px; }
}
@media (max-width:370px) {
  .showcase { padding-inline: 17px; }
  .industry-tabs { gap: 12px; }
  .industry-tab { font-size: 11px; }
  .story-copy h2 { font-size: 32px; }
  .story-copy > p { font-size: 15px; }
  .hero-phone { width: 250px; left: calc(50% - 125px); }
  .phone-top { min-width: 174px; padding-inline: 15px; }
  .phone-top strong { font-size: 15px; }
  .phone-thread { left: -17px; width: 280px; }
  .bubble { max-width: 248px; font-size: 14px; }
  .phone-composer { left: -17px; width: 274px; }
  .browser-address { font-size: 10px; }
  .window-dots { gap: 3px; }
  .window-dots i { width: 4px; height: 4px; }
}
/* Give the complete illustration one screen, with the navigation above it. */
@media (min-width:851px) {
  html { scroll-padding-top: 20px; }
  .site-header { position: relative; }
  .showcase { padding-bottom: 28px; }
  .industry-picker { margin-bottom: 24px; }
  .story-visual { --scene-base-height: 785px; height: min(var(--scene-base-height), calc(100svh - 135px)); }
  .hero-demo { height: var(--scene-base-height); transform: scale(var(--scene-scale, 1)); transform-origin: top center; }
  .story-copy { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .industry-tab { transition: none; } }