.hero { min-height: max(590px, calc(100svh - 76px)); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 64px 24px 190px; }
.hero h1 { color: var(--text); text-shadow: 0 0 30px rgba(71,115,51,.04); font-size: clamp(38px, 4.14vw, 60px); line-height: 1.4; font-weight: 460; letter-spacing: .01em; white-space: nowrap; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 { background-image: linear-gradient(110deg, #263027 36%, #364633 44%, #608347 50%, #364633 56%, #263027 64%); background-size: 240% 100%; background-position: 100% 50%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: hero-light 16s ease-in-out infinite; }
}
@keyframes hero-light { 0%, 12%, 100% { background-position: 100% 50%; } 50%, 62% { background-position: 0% 50%; } }
html[data-page-hidden="true"] .hero h1 { animation-play-state: paused; }
.hero-heading { text-align: center; }
.hero-subtitle { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 16px; margin-top: 22px; color: var(--muted); font-size: 16px; line-height: 1.8; font-weight: 400; }
.hero-subtitle span { white-space: nowrap; }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(1060px, 100%); margin-top: 68px; }
.product-entry { text-align: center; padding: 0 22px; }
.product-entry + .product-entry { border-left: 1px solid var(--line); }
.product-icon { width: 54px; height: 54px; border-radius: 13px; object-fit: contain; display: block; margin: 0 auto 22px; box-shadow: 0 3px 7px rgba(24,40,19,.10), 0 13px 25px rgba(24,40,19,.10); }
.product-icon-mark { position: relative; width: 54px; height: 54px; margin: 0 auto 22px; }
.product-icon-mark .product-icon { margin: 0; }
.product-icon-badge { position: absolute; top: -9px; left: 39px; padding: 3px 7px; border: 1px solid #cedfc5; border-radius: 5px; background: #f1f8ed; box-shadow: 0 3px 10px rgba(35,70,27,.10); color: #426a34; font-size: 10px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.product-entry h2 { font-size: 22px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.product-entry p { margin-top: 11px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.product-entry .platform { margin-top: 10px; font-size: 12px; color: var(--quiet); }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.product-entry .actions { justify-content: center; margin-top: 25px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13px; line-height: 1.6; transition: color .2s; }
.text-link:hover { color: #355927; }
.text-link img { width: 13px; height: 13px; filter: invert(39%) sepia(29%) saturate(843%) hue-rotate(52deg); }
.product-entry > .text-link { margin-top: 19px; }
html.mobile-download-open { overflow: hidden; }
.mobile-download-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--text); box-shadow: 0 24px 80px rgba(24,40,19,.22); }
.mobile-download-dialog::backdrop { background: rgba(24,32,22,.38); backdrop-filter: blur(5px); }
.mobile-download-content { position: relative; padding: 28px 24px 20px; text-align: center; }
.mobile-download-close { position: sticky; z-index: 1; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; margin: -20px -16px -24px auto; padding: 0; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); font-size: 28px; line-height: 1; }
.mobile-download-close:hover { background: #edf2e8; color: var(--text); }
.mobile-download-product { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 13px; }
.mobile-download-product img { border-radius: 8px; }
.mobile-download-dialog h2 { margin-top: 12px; font-size: 26px; font-weight: 550; line-height: 1.4; }
#mobile-download-description { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.mobile-download-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
.mobile-download-platform { min-width: 0; padding: 0 20px; }
.mobile-download-platform + .mobile-download-platform { border-left: 1px solid var(--line); }
.mobile-download-platform h3 { font-size: 20px; font-weight: 550; line-height: 1.4; }
.mobile-download-platform h3 span { font-size: 17px; font-weight: 450; }
.mobile-download-method { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.mobile-download-visual { display: grid; place-items: center; width: min(240px, 100%); aspect-ratio: 1; margin: 20px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mobile-download-visual img { display: block; width: 100%; height: auto; }
.android-download-qr { padding: 7px; }
.android-download-qr p { padding: 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.ios-download-guide { position: relative; }
.ios-download-guide .ios-app-store-icon { position: absolute; top: calc(100% * 26 / 240); left: 50%; width: calc(100% * 68 / 240); transform: translateX(-50%); }
.mobile-download-instructions { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 24px; }
.mobile-download-caption { margin-top: 8px; color: var(--quiet); font-size: 12px; line-height: 1.6; }
[data-android-download-retry] { margin-top: 16px; }
.android-download-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.mobile-download-dialog .button { min-height: 40px; }
.android-download-actions .text-link { min-height: 32px; }
.android-download-copy-status { min-height: 18px; margin-top: 4px; color: var(--accent); font-size: 12px; line-height: 1.5; }
.ios-download-steps { display: grid; justify-content: center; padding: 0; list-style: none; text-align: left; }
.ios-download-steps li { display: flex; align-items: center; gap: 7px; }
.ios-download-steps li > span { display: grid; flex: 0 0 18px; place-items: center; height: 18px; border-radius: 50%; background: #eaf0e4; color: var(--accent); font-size: 11px; font-weight: 600; line-height: 1; }
.ios-download-steps strong { margin-inline: 2px; color: var(--text); font-weight: 550; }
.ios-download-app { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; text-align: left; }
.ios-download-app > img { border: 1px solid var(--line); border-radius: 10px; }
.ios-download-app strong { display: block; font-size: 13px; font-weight: 550; line-height: 1.6; }
.ios-download-app p > span { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media (max-width: 680px) {
  .mobile-download-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .mobile-download-content { padding: 28px 20px 24px; }
  .mobile-download-close { margin-right: -12px; }
  .mobile-download-dialog h2 { font-size: 24px; }
  .mobile-download-platforms { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 26px; }
  .mobile-download-platform { padding: 0; }
  .mobile-download-platform + .mobile-download-platform { padding-top: 26px; border-top: 1px solid var(--line); border-left: 0; }
  .mobile-download-visual { width: min(224px, 100%); margin-top: 16px; }
}
.chapter { width: min(1220px, calc(100% - 96px)); margin: auto; border-top: 1px solid var(--line); }
.product-section { min-height: 760px; display: flex; align-items: center; padding: 100px 0; }
.split { width: min(1100px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 80px; align-items: center; }
.split-reverse { grid-template-columns: 700px minmax(0, 1fr); gap: 60px; }
.split-reverse .product-visual { width: 700px; }
.split-reverse .section-copy { text-align: right; }
.split-reverse .section-copy .actions { justify-content: flex-end; }
.split-wa { grid-template-columns: 390px minmax(0, 1fr); gap: 100px; }
.split-wa .product-visual { width: 390px; align-items: center; }
.split-wa .section-copy { text-align: right; }
.split-wa .section-product, .split-wa .actions { justify-content: flex-end; }
.split-chat { grid-template-columns: minmax(0, 1fr) 700px; gap: 60px; }
.split-chat .product-visual { width: 700px; }
.wa-platform-note { color: var(--quiet); font-size: 13px; white-space: nowrap; }
.section-product { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: #547d3f; font-size: 20px; font-weight: 500; line-height: 1.5; }
.section-product img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; box-shadow: 0 2px 5px rgba(24,40,19,.09), 0 7px 14px rgba(24,40,19,.08); }
.split-reverse .section-product { justify-content: flex-end; }
.section-copy h2 { font-size: clamp(26px, 2.35vw, 34px); line-height: 1.5; font-weight: 460; letter-spacing: -.015em; white-space: nowrap; }
.section-lead { margin-top: 22px; min-height: 54px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.section-copy .actions { margin-top: 28px; gap: 18px; }
.section-copy > .text-link { margin-top: 20px; }
.product-visual { width: 420px; max-width: 100%; min-height: 580px; display: flex; flex-direction: column; justify-content: center; }
.demo { border: 1px solid rgba(24,40,19,.12); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(24,40,19,.08), 0 24px 58px rgba(24,40,19,.12); font-size: 13px; }
.demo img.ui-icon { width: 15px; height: 15px; opacity: .6; filter: invert(1); }
.interpreter-demo { background: #1c1c1e; }
.demo-toolbar { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.55); font-size: 12px; }
.demo-toolbar strong { color: rgba(255,255,255,.92); font-weight: 600; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #30d158; flex: 0 0 auto; }
.toolbar-dot { color: rgba(255,255,255,.35); }
.demo-clock { font-variant-numeric: tabular-nums; font-size: 12px; }
.toolbar-spacer { flex: 1; }
.demo-control { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.92); font-size: 12px; }
.demo-control img.ui-icon { width: 11px; height: 11px; }
.demo-control:hover { background: rgba(255,255,255,.16); }
.transcript-lane { padding: 0 16px 20px; min-height: 236px; }
.transcript-pair { min-height: 48px; }
.transcript-pair + .transcript-pair { margin-top: 9px; }
.transcript-lane + .transcript-lane { border-top: 1px solid rgba(255,255,255,.06); }
.lane-header { height: 50px; display: flex; align-items: center; gap: 7px; color: #7eb9ff; font-size: 12px; }
.lane-pill { padding: 4px 7px; border-radius: 5px; background: rgba(10,132,255,.16); font-weight: 600; white-space: nowrap; }
.outbound .lane-pill { background: rgba(48,209,88,.14); color: #7ee69a; }
.language-chip { padding: 4px 7px; border-radius: 5px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); white-space: nowrap; }
.language-arrow { color: rgba(255,255,255,.45); }
.lane-activity { margin-left: auto; color: rgba(255,255,255,.45); font-size: 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.demo img.lane-chevron { width: 12px; height: 12px; }
.listening-mode { font-size: 12px; color: rgba(255,255,255,.45); gap: 4px; }
.level-bars { display: flex; align-items: center; height: 12px; gap: 2px; }
.level-bars i { width: 2px; height: 5px; background: #0a84ff; border-radius: 1px; }
.outbound .level-bars i { background: #30d158; }
.demo[data-speaking="outbound"] .outbound .level-bars i { animation: levels 1s ease-in-out infinite alternate; }
.demo:not([data-speaking="outbound"]) .outbound .level-bars { opacity: 0; }
.demo[data-speaking="outbound"] img.mic-icon { opacity: .9; filter: invert(84%) sepia(23%) saturate(1163%) hue-rotate(71deg); }
.level-bars i:nth-child(2n) { animation-delay: -.35s !important; }
.level-bars i:nth-child(3n) { animation-delay: -.7s !important; }
.transcript-translation { margin-top: 0; min-height: 23px; color: rgba(255,255,255,.92); font-size: 17px; font-weight: 600; line-height: 1.5; }
.transcript-original { margin-top: 3px; min-height: 18px; font-size: 13px; font-style: italic; line-height: 1.5; color: rgba(255,255,255,.45); }
.demo-caption { margin-top: 17px; display: flex; align-items: center; justify-content: space-between; color: var(--quiet); font-size: 11px; }
/* WhatsApp host chrome; injected cards below use the extension's own tokens. */
.chat-demo { position: relative; background: #161717; border-color: #2a2d2b; border-radius: 12px; }
.chat-header { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #242626; }
.contact-initial { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #54656f; color: #d1d7db; font-size: 16px; }
.contact-name { font-size: 15px; line-height: 1.5; color: #e9edef; }
.contact-name small { display: block; color: #8696a0; font-size: 11px; }
.chat-content { min-height: 470px; padding: 13px 19px 24px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(ellipse at 18% 8%, rgba(72,96,84,.07), transparent 65%), #101817; }
.chat-day { align-self: center; padding: 4px 9px; border-radius: 6px; background: #182229; color: #8696a0; font-size: 10px; }
.message { flex-shrink: 0; position: relative; align-self: flex-start; max-width: 94%; padding: 8px 9px; background: #242626; border-radius: 0 8px 8px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.message.outgoing { align-self: flex-end; background: #144d37; border-radius: 8px 0 8px 8px; }
.message-source { font-size: 15px; color: #e9edef; }
.message-time { float: right; padding: 5px 0 0 10px; font-size: 9px; color: #8696a0; }
.message-time img { vertical-align: middle; filter: invert(77%) sepia(66%) saturate(1200%) hue-rotate(160deg); }
.plugin-translation { position: relative; margin: 6px 0 1px; padding: 8px 24px 8px 10px; border-top: 1px solid rgba(146,226,99,.7); border-radius: 0 0 8px 8px; background: rgba(12,17,14,.96); color: #f5f7f2; font-size: 13px; line-height: 1.5; box-shadow: 0 5px 14px rgba(7,10,8,.14); }
/* Keep the complete translation in the same grid cell as the typed text.
   The invisible reserve preserves the bubble's natural width and wrapped height
   during empty, loading, typing and loop-reset frames at every breakpoint. */
.demo-text-slot { display: grid; }
.demo-text-slot > span { grid-area: 1 / 1; min-width: 0; }
.demo-text-reserve { visibility: hidden; pointer-events: none; user-select: none; }
.translation-label { display: block; color: #92e263; font-size: 9px; font-weight: 800; letter-spacing: .06em; margin-bottom: 4px; }
.card-close { position: absolute; top: 7px; right: 8px; color: #858f83; font-size: 16px; }
.voice-message { width: 88%; }
.voice-avatar { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: #59696d; font-size: 12px; color: #d1d7db; }
.voice-timestamp { display: block; text-align: right; font-size: 9px; color: #8696a0; }
.voice-line { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.voice-play { border: 0; display: grid; place-items: center; width: 28px; height: 28px; background: transparent; }
.voice-play img.ui-icon { width: 22px; height: 22px; }
.voice-wave { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.voice-wave i { width: 2px; height: 6px; background: #8696a0; border-radius: 2px; }
.voice-wave i:nth-child(3n) { height: 15px; }
.voice-wave i:nth-child(3n + 1) { height: 9px; }
.voice-wave i:nth-child(5n) { height: 20px; }
.voice-line small { color: #8696a0; font-size: 10px; }
.voice-transcribe { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 8px; border: 1px solid rgba(55,84,64,.44); border-radius: 999px; background: rgba(247,250,245,.96); color: #173021; font-size: 10px; font-weight: 600; }
.voice-mark { display: grid; place-items: center; width: 15px; height: 15px; background: #102d1f; color: #92e263; border-radius: 50%; }
.wa-mobile-demo { width: 318px; max-width: 100%; }
.wa-phone { width: 100%; height: 600px; padding: 5px; border: 1px solid #1b2321; border-radius: 39px; background: #151a19; box-shadow: 0 3px 9px rgba(24,40,19,.1), 0 25px 50px rgba(24,40,19,.19); }
.wa-phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: #0b1117; }
.wa-mobile-scene { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; transition: opacity .55s ease, transform .55s ease; }
.wa-mobile-call { background: linear-gradient(135deg, #172532, #0b1117 63%, #14232b); color: #fff; }
.wa-mobile-chat { background: #f3f4f6; color: #111b21; }
.wa-mobile-demo[data-wa-scene="call"] .wa-mobile-chat { opacity: 0; transform: translateX(14px); }
.wa-mobile-demo[data-wa-scene="chat"] .wa-mobile-call { opacity: 0; transform: translateX(-14px); }
.wa-mobile-status { display: flex; justify-content: space-between; align-items: center; flex: 0 0 30px; padding: 5px 21px 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.wa-mobile-status-signals { display: flex; gap: 3px; align-items: flex-end; }
.wa-mobile-status-signals i { display: block; width: 3px; height: 5px; border-radius: 2px; background: currentColor; }
.wa-mobile-status-signals i:nth-child(2) { height: 8px; }
.wa-mobile-status-signals i:nth-child(3) { width: 12px; height: 7px; margin-left: 4px; border-radius: 3px; }
.wa-call-header { display: flex; align-items: center; gap: 6px; min-height: 58px; margin: 4px 9px 0; padding: 8px 8px 8px 13px; border: 1px solid #344149; border-radius: 16px; background: rgba(22,32,39,.91); }
.wa-call-header > div:first-child { flex: 1; min-width: 0; }
.wa-call-header strong, .wa-app-contact strong { display: block; font-size: 14px; line-height: 1.4; }
.wa-call-header small { display: block; color: #aebbc4; font-size: 10px; line-height: 1.5; }
.wa-call-route { display: grid; place-items: center; height: 29px; padding: 0 7px; border: 1px solid #43505a; border-radius: 16px; background: #26343b; font-size: 10px; font-weight: 600; white-space: nowrap; }
.wa-call-voice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 35px; height: 42px; }
.wa-call-voice img { width: 16px; height: 16px; }
.wa-call-voice small { font-size: 9px; color: #fff; }
.wa-call-stage { display: flex; flex: 1; min-height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; }
.wa-call-halo { display: grid; place-items: center; width: 95px; height: 95px; border-radius: 50%; background: rgba(43,113,148,.14); }
.wa-call-avatar { display: block; width: 64px; height: 64px; overflow: hidden; border: 2px solid rgba(255,255,255,.18); border-radius: 50%; background: #6a8290; box-shadow: 0 5px 18px rgba(0,0,0,.25); }
.wa-call-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.wa-call-stage p { color: #dce4e7; font-size: 11px; }
.wa-call-dock { padding: 0 9px 12px; }
.wa-call-captions { padding: 6px 8px 5px; border: 1px solid #34434d; border-radius: 17px; background: rgba(21,33,43,.94); }
.wa-call-lane { position: relative; min-height: 76px; padding: 4px 8px 8px 17px; }
.wa-call-lane::before { content: ''; position: absolute; left: 4px; top: 5px; bottom: 7px; width: 3px; border-radius: 2px; background: #4a9dff; }
.wa-call-me::before { background: #54df8d; }
.wa-call-me { border-top: 1px solid rgba(78,89,98,.28); }
.wa-call-lane-head { display: flex; justify-content: space-between; align-items: center; min-height: 24px; color: #77b8ff; font-size: 11px; font-weight: 700; }
.wa-call-me .wa-call-lane-head { color: #6eeba3; }
.wa-call-lane-head span:last-child:not(:first-child) { color: rgba(255,255,255,.8); font-size: 10px; }
.wa-call-sentence { margin-top: 3px; height: 38px; overflow: hidden; transition: opacity .25s ease; }
.wa-call-me .wa-call-sentence { height: 52px; }
.wa-call-sentence strong { display: block; color: #fff; font-size: 12px; line-height: 1.45; font-weight: 650; }
.wa-call-sentence small { display: block; margin-top: 2px; color: #c0cbd2; font-size: 10px; line-height: 1.4; }
.wa-call-later { opacity: 0; }
.wa-mobile-demo[data-wa-stage="call-second"] .wa-call-later { opacity: 1; }
.wa-mobile-demo[data-wa-speaking="peer-first"] [data-wa-peer-translation-first]::after,
.wa-mobile-demo[data-wa-speaking="peer-second"] [data-wa-peer-translation-second]::after,
.wa-mobile-demo[data-wa-speaking="me"] [data-wa-me-translation]::after { content: '▍'; margin-left: 2px; color: #78b9ff; animation: wa-stream-caret .7s steps(1, end) infinite; }
.wa-mobile-demo[data-wa-speaking="me"] [data-wa-me-translation]::after { color: #6eeba3; }
@keyframes wa-stream-caret { 50% { opacity: .2; } }
.wa-call-controls { display: flex; justify-content: space-between; gap: 3px; padding-top: 12px; }
.wa-call-controls > span { display: flex; align-items: center; flex-direction: column; gap: 4px; width: 25%; font-size: 10px; color: #fff; }
.wa-call-controls i { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #202b31; }
.wa-call-controls > span:first-child i { background: #20854d; }
.wa-call-controls > span:last-child i { background: #ff0050; }
.wa-call-controls img { width: 22px; height: 22px; object-fit: contain; }
.wa-app-chat-header { display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 0 9px; border-bottom: 1px solid #e7ece6; background: #fff; }
.wa-app-chat-header > img { width: 19px; height: 19px; opacity: .8; }
.wa-app-chat-header > img:first-child { margin-right: 2px; }
.wa-app-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #738a42; color: white; font-size: 15px; }
.wa-app-contact { flex: 1; min-width: 0; }
.wa-app-contact small { display: block; color: #637067; font-size: 10px; }
.wa-app-conversation { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 12px 12px; }
.wa-app-day { align-self: center; margin-bottom: 5px; color: #84908a; font-size: 10px; }
.wa-app-bubble { position: relative; width: fit-content; max-width: 94%; padding: 11px 12px 6px; border-radius: 14px; background: #e4e6e9; font-size: 11px; line-height: 1.5; }
.wa-app-bubble.incoming { align-self: flex-start; border-top-left-radius: 3px; }
.wa-app-bubble.outgoing { align-self: flex-end; border-top-right-radius: 3px; background: #1976d2; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.wa-app-bubble.outgoing.wa-app-previous { opacity: 1; transform: none; }
.wa-mobile-demo[data-wa-stage="chat-sent"] .wa-app-bubble.outgoing { opacity: 1; transform: none; }
.wa-app-bubble::before { content: ''; position: absolute; top: 0; width: 8px; height: 9px; background: inherit; }
.wa-app-bubble.incoming::before { left: -4px; border-radius: 2px 0 0 0; }
.wa-app-bubble.outgoing::before { right: -4px; border-radius: 0 2px 0 0; }
.wa-app-translation { min-width: 0; margin-top: 8px; padding: 6px 0 0; border-top: 1px solid #bec4cc; opacity: 0; transition: opacity .4s ease; }
.wa-app-bubble.outgoing .wa-app-translation { border-color: #5ea0e0; opacity: 1; }
.wa-mobile-demo[data-wa-stage="chat-translated"] .wa-app-bubble.incoming .wa-app-translation, .wa-mobile-demo[data-wa-stage="chat-draft"] .wa-app-bubble.incoming .wa-app-translation, .wa-mobile-demo[data-wa-stage="chat-sent"] .wa-app-bubble.incoming .wa-app-translation { opacity: 1; }
.wa-app-translation small { display: block; margin-bottom: 3px; color: #59656e; font-size: 9px; font-weight: 650; }
.wa-app-bubble.outgoing .wa-app-translation small { color: #fff; }
.wa-app-bubble time { display: block; margin-top: 4px; text-align: right; color: #59656e; font-size: 9px; }
.wa-app-bubble.outgoing time { color: #fff; }
.wa-app-composer { padding: 8px 8px 12px; background: #fff; }
.wa-app-compose-tools { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 7px; color: #1976d2; font-size: 10px; font-weight: 650; }
.wa-app-compose-tools > span:first-child { padding: 6px 8px; border-radius: 14px; background: #f2f6fc; }
.wa-app-compose-tools > span:last-child { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.wa-app-compose-tools i { display: block; width: 20px; height: 11px; border-radius: 9px; background: #1976d2; }
.wa-app-compose-tools i::after { content: ''; display: block; width: 9px; height: 9px; margin: 1px 0 0 10px; border-radius: 50%; background: #fff; }
.wa-app-compose-row { display: flex; align-items: center; gap: 4px; }
.wa-app-compose-plus { display: grid; place-items: center; width: 27px; height: 34px; font-size: 19px; }
.wa-app-compose-row img { width: 17px; height: 17px; }
.wa-app-input { flex: 1; min-width: 0; height: 37px; padding: 10px 8px; border-radius: 17px; background: #f3f5f8; color: #111b21; font-size: 10px; white-space: nowrap; overflow: hidden; }
.wa-app-send { display: grid; place-items: center; height: 37px; padding: 0 9px; border-radius: 17px; background: #1976d2; color: #fff; font-size: 11px; font-weight: 650; }
.wa-mobile-demo[data-wa-stage="chat-sent"] .wa-app-input { color: #96a0a7; }
.voice-detail-label { display: block; margin-top: 7px; font-size: 9px; color: #858f83; }
.voice-source { margin: 2px 0 3px; color: #c3c9c0; font-size: 11px; }
.chat-demo[data-stage="voice"] .voice-wave i { animation: levels .8s ease-in-out infinite alternate; background: #92e263; }
/* Draft popup is anchored above the icon at the end of the input text. */
.draft-panel { transition: opacity .25s ease, transform .25s ease; position: absolute; right: 15px; bottom: 67px; width: 280px; padding: 13px; border: 1px solid #283029; border-radius: 18px 18px 6px 18px; color: #f5f7f2; background: radial-gradient(circle at 88% -8%, rgba(146,226,99,.12), transparent 32%), #070a08; box-shadow: 0 15px 40px rgba(7,10,8,.4); }
.chat-demo[data-draft-ready="false"] .draft-panel, .chat-demo[data-draft-dismissed="true"] .draft-panel { visibility: hidden; opacity: 0; transform: translateY(6px); }
.draft-head { display: flex; align-items: center; gap: 8px; }
.draft-head img { border-radius: 50%; }
.draft-head div { flex: 1; }
.draft-head div span { display: block; color: #92e263; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.draft-head strong { display: block; font-size: 16px; font-weight: 700; }
.draft-head small { padding: 4px 6px; border: 1px solid rgba(146,226,99,.2); border-radius: 999px; font-size: 8px; color: #92e263; background: rgba(146,226,99,.06); }
.draft-direction { display: flex; justify-content: space-between; margin: 11px 0 7px; color: #858f83; font-size: 9px; }
.draft-direction span:last-child { color: #c3c9c0; }
.draft-preview { padding: 9px 10px; border: 1px solid #3a463b; border-radius: 10px; background: #0c110e; }
.draft-preview p { min-height: 32px; color: #f5f7f2; font-size: 13px; line-height: 1.55; }
.draft-actions { display: flex; gap: 7px; margin-top: 10px; }
.cancel-draft { width: 50%; min-height: 30px; border: 1px solid #3a463b; border-radius: 999px; background: transparent; color: #c3c9c0; font-size: 11px; }
.cancel-draft:hover { border-color: #657166; }
.write-draft { width: 50%; min-height: 30px; border: 1px solid #92e263; border-radius: 999px; background: #92e263; color: #0a1508; font-size: 11px; font-weight: 650; }
.write-draft:disabled { opacity: .38; cursor: default; }
.composer { padding: 8px 10px; background: #161717; }
.composer-line { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; background: #242626; border-radius: 24px; }
.composer-line p { flex: 1; min-width: 0; color: #d1d7db; font-size: 13px; }
.draft-launcher { flex-shrink: 0; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 50%; }
.composer-line .extension-mark { width: 24px; height: 24px; border: 1px solid rgba(146,226,99,.5); border-radius: 50%; object-fit: cover; }
.languages { padding: 96px 0 82px; text-align: center; }
.languages h2 { font-weight: 460; font-size: 29px; line-height: 1.5; white-space: nowrap; }
.language-marquee { margin: 52px auto 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.language-track { display: flex; width: max-content; animation: marquee 105s linear infinite; }
.language-group { display: flex; align-items: center; gap: 58px; padding: 0 58px 0 0; list-style: none; margin: 0; }
.language-group li { flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; color: #697665; font-size: 17px; font-weight: 400; white-space: nowrap; }
.language-chinese { color: #3a493c; font-size: 18px; }
.language-marquee:hover .language-track, .language-marquee:focus-within .language-track { animation-play-state: paused; }
.language-note { margin-top: 36px; color: var(--quiet); font-size: 12px; }
.motion-control { margin-top: 17px; background: transparent; color: #7e8a7e; border: 0; padding: 6px 10px; font-size: 12px; }
.motion-control:hover { color: var(--text); }
.reveal { transition: opacity .7s ease, transform .7s ease; }
.motion-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(10px); }
[data-motion="paused"] .language-track, [data-motion="paused"] .level-bars i, [data-motion="paused"] .voice-wave i { animation-play-state: paused !important; }
.demo[data-paused="true"] .level-bars i { animation-play-state: paused !important; }
@keyframes levels { from { transform: scaleY(.65); } to { transform: scaleY(1.65); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (min-width: 1600px) { .product-section { min-height: 800px; } }
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0,1fr) 360px; gap: 48px; }
  .split-reverse { grid-template-columns: 560px minmax(0,1fr); gap: 36px; }
  .split-reverse .product-visual { width: 560px; }
  .split-wa { grid-template-columns: 360px minmax(0,1fr); gap: 50px; }
  .split-wa .product-visual { width: 360px; }
  .split-chat { grid-template-columns: minmax(0,1fr) 560px; gap: 36px; }
  .split-chat .product-visual { width: 560px; }
  .product-visual { width: 360px; }
  .section-copy h2 { font-size: 27px; }
}
@media (max-width: 850px) {
  .chapter { width: calc(100% - 48px); }
  .split, .split-reverse, .split-wa, .split-chat { grid-template-columns: minmax(0,1fr); gap: 46px; justify-items: center; }
  .split-reverse .section-copy { text-align: center; }
  .split-reverse .section-copy .actions { justify-content: center; }
  .split-reverse .product-visual { width: min(700px, 100%); min-height: 0; }
  .section-product, .split-reverse .section-product { justify-content: center; }
  .section-copy { width: 100%; max-width: 510px; text-align: center; }
  .section-copy .actions { justify-content: center; }
  .split-reverse .section-copy { grid-row: 1; }
  .split-wa .section-copy { grid-row: 1; text-align: center; }
  .split-wa .section-product, .split-wa .actions { justify-content: center; }
  .split-wa .product-visual { width: min(420px, 100%); }
  .split-chat .product-visual { width: min(700px, 100%); }
  .product-section { min-height: 720px; padding: 84px 0; }
  .product-entry > p:not(.platform) { min-height: 51px; }
  .product-visual { width: 420px; min-height: 0; }
}
@media (max-width: 700px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(500px, 100%); row-gap: 32px; }
  .products .product-entry-chat { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--line); padding-top: 32px; }
  .product-entry-chat > p:not(.platform) { min-height: 0; }
}
@media (max-width: 480px) {
  .hero { min-height: calc(100svh - 64px); padding: 52px 16px 132px; }
  .hero h1 { font-size: clamp(31px, 9.52vw, 43px); }
  .hero-subtitle { font-size: 13px; margin-top: 18px; gap: 0 12px; }
  .products { margin-top: 52px; }
  .section-product { font-size: 18px; margin-bottom: 22px; }
  .section-product img { width: 30px; height: 30px; }
  .product-entry { padding: 0 10px; }
  .product-icon { width: 46px; height: 46px; margin-bottom: 22px; }
  .product-icon-mark { width: 46px; height: 46px; }
  .product-icon-mark .product-icon { margin: 0; }
  .product-icon-badge { left: 33px; font-size: 9px; }
  .product-entry h2 { font-size: 17px; }
  .product-entry p { font-size: 12px; min-height: 40px; }
  .product-entry .platform { min-height: 0; font-size: 10px; }
  .product-entry .actions { margin-top: 20px; gap: 8px; }
  .product-entry > .text-link { font-size: 11px; }
  .chapter { width: calc(100% - 36px); }
  .section-copy h2 { font-size: clamp(19px, 5.49vw, 26px); }
  .section-lead { font-size: 13px; max-width: 340px; margin-left: auto; margin-right: auto; }
  .eyebrow { margin-bottom: 17px; }
  .product-visual, .split-reverse .product-visual, .split-wa .product-visual, .split-chat .product-visual { width: min(360px, 100%); }
  .demo-toolbar { padding: 0 10px; gap: 5px; }
  .demo-toolbar > img.ui-icon:first-of-type { display: none; }
  .transcript-lane { padding-left: 12px; padding-right: 12px; }
  .lane-header { gap: 5px; font-size: 11px; }
  .lane-activity { font-size: 9px; gap: 4px; }
  .lane-pill, .language-chip { padding: 4px 5px; }
  .transcript-translation { font-size: 16px; }
  .chat-content { padding-left: 12px; padding-right: 12px; }
  .draft-panel { width: 260px; right: 10px; }
  .composer-line { gap: 6px; padding: 0 7px; }
  .composer-line p { font-size: 12px; }
  .demo-caption { font-size: 10px; }
  .product-section { min-height: 710px; padding: 74px 0; }
  .languages { padding: 80px 0 60px; }
  .languages h2 { font-size: 22px; }
  .language-group { gap: 36px; padding-right: 36px; }
  .language-group li { font-size: 15px; }
  .language-note { padding: 0 20px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal:not(.is-visible) { opacity: 1; transform: none; }
  .language-marquee { overflow-x: auto; mask-image: none; padding-bottom: 10px; }
  .language-group[aria-hidden="true"] { display: none; }
}

/* Web layout follows the dark WhatsApp Web shell; all names and messages are demo data. */
.wa-browser-bar { height: 28px; display: flex; align-items: center; justify-content: center; position: relative; color: #78827b; font-size: 10px; background: #1d201f; border-bottom: 1px solid #292c2b; }
.window-controls { position: absolute; left: 12px; display: flex; gap: 5px; }
.window-controls i { width: 5px; height: 5px; border-radius: 50%; background: #4a504c; }
.wa-workspace { display: grid; grid-template-columns: 34px 144px minmax(0,1fr); }
.wa-rail { display: flex; flex-direction: column; align-items: center; gap: 19px; padding: 15px 0 12px; background: #1d1f1f; border-right: 1px solid #2a2d2b; }
.wa-rail-active { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #35463d; }
.wa-self { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #52615a; color: #d1d7db; font-size: 10px; }
.wa-sidebar { border-right: 1px solid #2a2d2b; background: #161717; }
.wa-sidebar-title { display: flex; align-items: center; justify-content: space-between; padding: 17px 10px 14px; color: #e9edef; font-size: 15px; font-weight: 650; }
.wa-search { margin: 0 9px; padding: 8px 9px; display: flex; align-items: center; gap: 9px; background: #242626; border-radius: 18px; color: #8a9390; font-size: 11px; }
.wa-filters { display: flex; gap: 5px; padding: 10px 9px; color: #89938c; font-size: 10px; }
.wa-filters span { padding: 4px 8px; border: 1px solid #303632; border-radius: 12px; }
.wa-filters span:first-child { background: #183a28; color: #a1e4b4; border-color: transparent; }
.wa-chat-row { position: relative; display: flex; align-items: center; gap: 7px; margin: 2px 5px; padding: 12px 6px; border-radius: 7px; }
.wa-chat-row.selected { background: #2a302d; }
.wa-chat-row .contact-initial { flex: 0 0 27px; width: 27px; height: 27px; font-size: 12px; }
.wa-chat-row .alternate { background: #695b6b; }
.wa-chat-row .group { background: #526d69; }
.wa-chat-row strong { display: block; color: #dce2df; font-size: 11px; font-weight: 500; }
.wa-chat-row small { display: block; margin-top: 5px; color: #85938b; font-size: 9px; }
.wa-chat-row time { position: absolute; right: 5px; top: 8px; font-size: 8px; color: #849289; }
.wa-chat-stage { position: relative; min-width: 0; }
.message::before { content: ''; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top-color: #242626; border-right-color: #242626; }
.message.outgoing::before { left: auto; right: -5px; border-right-color: transparent; border-left-color: #144d37; border-top-color: #144d37; }
@media (min-width: 851px) and (max-width: 1100px) { .wa-workspace { grid-template-columns: 30px 116px minmax(0,1fr); } .wa-chat-row { gap: 5px; padding-left: 4px; } .wa-sidebar-title { font-size: 12px; } }
@media (max-width: 600px) { .wa-workspace { grid-template-columns: 30px 112px minmax(0,1fr); } }
@media (max-width: 480px) { .wa-workspace { display: block; } .wa-rail, .wa-sidebar { display: none; } .message { max-width: 96%; } .chat-content { min-height: 490px; } }

/* Native scroll snapping lets each chapter settle like a page without capturing
   wheel/touch input. Oversized chapters retain normal scrolling within them. */
@media (min-width: 851px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html.homepage { scroll-snap-type: y mandatory; scroll-padding-top: 76px; }
  .hero, .product-section, .languages { scroll-snap-align: start; scroll-snap-stop: always; }
  .product-section { min-height: max(760px, calc(100svh - 76px)); padding: clamp(40px, 8vh, 80px) 0; }
  .languages { min-height: calc(100svh - 160px); display: flex; flex-direction: column; justify-content: center; }
  .language-marquee { width: 100%; }
  .footer { scroll-snap-align: end; }
}