/* Listings finale: a full-screen client page, a real-looking Telegram chat, a typing zoom and the price. */
.ws, .tg-scene { padding: 80px var(--gut); background: var(--surface-app); position: relative; overflow: hidden; }
.ws { display: grid; gap: 28px; max-width: 1240px; margin: 0 auto; align-items: center; } @media (min-width: 900px) { .ws { grid-template-columns: 5fr 7fr; gap: 48px; } }
.ws-copy h3, .tg-copy h3 { font-size: clamp(26px, 3vw, 42px); line-height: 1.1; margin: -18px 0 12px; } .ws-copy p, .tg-copy p { font-size: 17px; max-width: 46ch; } .ws-copy p + p, .tg-copy p + p { margin-top: 12px; }
.ws-browser { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; min-height: 0; }
.ws-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ECE8E1; flex: none; } .ws-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c9c3b8; } .ws-bar span { margin-left: 10px; font: 12px var(--font-mono); color: #7a7568; background: #fff; border-radius: 99px; padding: 3px 14px; }
.ws-view { height: 460px; overflow: hidden; background: var(--surface-app); } .ws-img { display: block; width: 100%; height: auto; will-change: transform; }
.ws-pin { height: 100vh; padding: 0; max-width: none; display: block; background: var(--surface-app); }
.ws-pin .ws-copy { position: absolute; left: 4%; top: 50%; width: 40%; transform: translateY(-50%); opacity: 0; z-index: 2; }
.ws-pin .ws-browser { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; border: 0; z-index: 3; }
.ws-pin .ws-view { flex: 1; height: auto; }

/* Telegram */
.tg-scene { display: grid; gap: 30px; max-width: 1240px; margin: 0 auto; align-items: center; } @media (min-width: 900px) { .tg-scene { grid-template-columns: 5fr 6fr; gap: 56px; } }
.tg-phone { width: min(100%, 410px); justify-self: center; height: min(78vh, 700px); min-height: 540px; border-radius: 34px; background: #111f2f; padding: 10px; box-shadow: 0 60px 100px -40px rgba(0,0,0,.55), 0 0 0 2px #26384f; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.tg-head { display: flex; align-items: center; gap: 12px; margin: 4px 4px 8px; padding: 8px 14px; border-radius: 99px; background: #fff; color: #17212b; z-index: 2; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); } .tg-head b { display: block; font: 600 15px var(--font-sans); } .tg-head span { font-size: 12px; color: #6b7a89; } .tg-head svg { margin-left: auto; color: #6b7a89; }
.tg-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, #5cc88a, #2f9e6a); color: #fff; font: 600 14px var(--font-sans); display: grid; place-items: center; font-style: normal; }
.tg-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px 6px 10px; overflow: hidden; border-radius: 22px; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.35), transparent 40%), linear-gradient(160deg, #b9d6a1, #8fc08b 55%, #a9c98a); position: relative; }
.tg-chat::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, #3d6b3d 1px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; }
.tg-msg { position: relative; max-width: 86%; padding: 7px 10px 18px; border-radius: 14px; font: 14.5px/1.38 var(--font-sans); box-shadow: 0 1px 1px rgba(0,0,0,.15); color: #14202b; background: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.tg-msg.me { align-self: flex-end; background: #e1fec6; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.tg-msg time { position: absolute; right: 9px; bottom: 3px; font-size: 11px; color: #6d8a6a; } .tg-msg.bot time { color: #98a2ac; }
.tg-photo { padding: 3px 3px 18px; } .tg-photo img { display: block; width: 100%; border-radius: 11px 11px 4px 4px; aspect-ratio: 3 / 2; object-fit: cover; } .tg-photo p { margin: 5px 7px 0; }
.tg-file { display: flex; align-items: center; gap: 10px; padding-right: 64px; } .tg-file i { width: 40px; height: 40px; border-radius: 50%; background: #4aa8e0; color: #fff; font: 700 11px var(--font-sans); display: grid; place-items: center; font-style: normal; flex: none; } .tg-file b { display: block; font: 600 14px var(--font-sans); } .tg-file span { font-size: 12px; color: #5f8a5a; }
.tg-btnrow { display: flex; gap: 6px; align-self: stretch; max-width: 86%; } .tg-btn { flex: 1; text-align: center; padding: 8px 6px; border-radius: 10px; background: rgba(33,60,40,.45); color: #fff; font: 600 13.5px var(--font-sans); backdrop-filter: blur(4px); transition: background .25s, transform .25s; } .tg-btn.tap { background: rgba(33,60,40,.8); transform: scale(.96); }
.tg-long { font-size: 13.5px; padding-bottom: 22px; } .tg-link { align-self: stretch; max-width: 86%; text-align: center; padding: 9px; border-radius: 10px; background: rgba(33,60,40,.45); color: #fff; font: 600 13.5px var(--font-sans); }
.tg-input { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 99px; background: #fff; color: #8a97a3; font-size: 14.5px; } .tg-input svg { flex: none; } .tg-input span { flex: 1; } .tg-mic { width: 34px; height: 34px; border-radius: 50%; background: #2f9bdc; display: block; flex: none; }
.tg-pin .tg-phone { transform: scale(1); } .tg-pin .tg-scene-lock { display: none; }
.js-tg .tg-msg, .js-tg .tg-btnrow, .js-tg .tg-link { display: none; } .js-tg .tg-show { display: block; animation: tg-in .35s var(--ease); } .js-tg .tg-btnrow.tg-show { display: flex; } .js-tg .tg-msg.tg-file.tg-show { display: flex; }
@keyframes tg-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.tg-pin { height: 100vh; padding-top: 70px; padding-bottom: 20px; align-content: center; }

/* Less typing */
.tz { background: var(--gradient-navy); color: #fff; text-align: center; padding: 120px var(--gut); overflow: hidden; display: grid; place-items: center; align-content: center; gap: 6px; }
.tz-line { font: 300 clamp(40px, 8vw, 128px)/1.05 var(--font-display); color: #fff; margin: 0; } .tz-line.soft { opacity: .55; }
.tz-line .caret { display: inline-block; width: .06em; height: .9em; margin-left: .04em; vertical-align: -.08em; background: var(--zw-lime-500); animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } }
.tz-pin { height: 100vh; }

/* The price */
.px { background: var(--gradient-navy); color: #fff; text-align: center; padding: 110px var(--gut); display: grid; gap: 4px; justify-items: center; position: relative; overflow: hidden; }
.px::before { content: ""; position: absolute; left: 50%; top: 50%; width: 110vw; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(216,242,63,.16), transparent 55%); pointer-events: none; }
.px p { margin: 0; position: relative; } .px-1 { font: 300 clamp(36px, 6vw, 84px) var(--font-display); color: #DDE3EC; }
.px-2 { font: 300 clamp(110px, 24vw, 380px)/.95 var(--font-display); color: var(--zw-lime-500); letter-spacing: -.03em; text-shadow: 0 0 90px rgba(216,242,63,.35); } .px-2 span { font-size: .28em; letter-spacing: 0; color: #fff; }
.px-3 { font: 400 clamp(18px, 2.2vw, 28px) var(--font-sans); color: #DDE3EC; } .px-4 { margin-top: 26px !important; } .px-4 .btn { height: 56px; font-size: 18px; padding: 0 34px; color: var(--zw-navy-900); }
.px-pin { height: 100vh; align-content: center; padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { .tz-line .caret { animation: none; } }

.px-not { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; position: relative; max-width: 1200px; }
.px-not li { position: relative; font: 300 clamp(16px, 2.1vw, 30px) var(--font-display); color: #B9C4D4; padding: 0 4px; white-space: nowrap; }
.px-not li::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 3px; background: var(--zw-lime-500); transform-origin: left; transform: rotate(-9deg) scaleX(var(--k, 1)); box-shadow: 0 0 12px rgba(216,242,63,.7); }
.px-not li { opacity: calc(1 - var(--f, 0) * .65); }

.px-not { flex-wrap: nowrap; gap: 0 clamp(30px, 6vw, 100px); margin-bottom: 0; } .px-not li { font: 300 clamp(40px, 6.5vw, 96px)/1 var(--font-display); color: #8195B5; padding: 0 10px; } .px-not li b { font-weight: 300; } .px-not li::after { height: 6px; left: -10px; right: -10px; transform: rotate(-12deg) scaleX(var(--k, 1)); }
.px-note { font-size: 12px !important; color: #8195B5; margin-top: 10px !important; }
.offer-navy { padding-top: 70px; padding-bottom: 80px; } .offer-navy .offer-inner > .zw-eyebrow + .sr-only + .st-lede { margin-top: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 899px) {
  .ws-pin .ws-copy { left: 6%; width: 88%; top: auto; bottom: 4%; transform: none; background: rgba(251,250,247,.94); border-radius: 18px; padding: 14px 16px; } .ws-pin .ws-copy .as-n { display: none; } .ws-pin .ws-copy h3 { margin: 0 0 6px; font-size: 22px; } .ws-pin .ws-copy p { font-size: 13.5px; } .ws-pin .ws-copy p + p { display: none; }
  .tg-pin { padding-top: 64px; gap: 14px; align-content: start; } .tg-pin .tg-copy h3 { font-size: 22px; margin: 0 0 6px; } .tg-pin .tg-copy .as-n, .tg-pin .tg-copy p + p { display: none; } .tg-pin .tg-copy p { font-size: 13.5px; } .tg-pin .tg-phone { height: calc(100svh - 250px); min-height: 380px; }
  .px-not li { font-size: clamp(34px, 10vw, 48px); } .px-not { gap: 0 24px; } .px-2 { font-size: clamp(120px, 40vw, 190px); } .px-note { padding: 0 var(--gut); }
}

/* Footer */
.ft { background: var(--zw-navy-900); color: #B9C4D4; padding: 56px var(--gut) 34px; }
.ft-in { max-width: 1180px; margin: 0 auto; display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; }
.ft-brand { display: flex; align-items: center; gap: 14px; } .ft-brand b { display: block; color: #fff; font: 500 20px var(--font-display); letter-spacing: .32em; } .ft-brand span { font-size: 13px; color: #8195B5; }
.ft-col { display: grid; gap: 4px; align-content: start; } .ft-col h3 { margin: 0 0 6px; font: 600 11px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--zw-lime-500); }
.ft-col a { color: #DDE3EC; text-decoration: none; font-size: 14.5px; display: inline-flex; align-items: center; min-height: 36px; } .ft-col a:hover { color: var(--zw-lime-500); } .ft-col a:focus-visible { outline: 2px solid var(--zw-lime-500); outline-offset: 2px; border-radius: 4px; }
.ft-fine { max-width: 1180px; margin: 34px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: #8195B5; }
@media (max-width: 760px) { .ft-in { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } .ft-col a { min-height: 44px; } }
.tg-photo img { max-height: 150px; }