/* talktome promo (promo.js): a square 1080x1080 stage, scaled to the box by promo.js */
.promo { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #f5f7f6; border: 1px solid var(--line, #e2e8e4); direction: rtl; }
.pv-stage { position: absolute; top: 0; right: 0; width: 1080px; height: 1080px; transform-origin: top right; font-family: "Rubik", system-ui, sans-serif; color: #111827; background: #f5f7f6; }
.pv-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 90px 70px 0; gap: 34px; visibility: hidden; }
.pv-scene.bad { background: radial-gradient(800px 600px at 50% 0%, #fde3e6 0%, transparent 70%), #f7f4f4; }
.pv-scene.good { background: radial-gradient(800px 600px at 50% 0%, #d4f5e2 0%, transparent 70%), #f3f8f5; }
.pv-pill { font-size: 34px; font-weight: 800; padding: 10px 30px; border-radius: 999px; }
.pv-pill.bad { background: #c62b3a; color: #fff; }
.pv-pill.good { background: #04210f; color: #dff7e9; }
.pv-cap { font-size: 74px; font-weight: 900; letter-spacing: -0.015em; text-align: center; margin: 0; line-height: 1.12; text-wrap: balance; }
.pv-cap em, .pv-end-title em { font-style: normal; color: #04804a; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* 1: the problem */
.pv-clock-card { margin-top: 20px; width: 620px; background: #fff; border-radius: 40px; padding: 50px 30px 44px; box-shadow: 0 40px 80px -40px rgba(120, 20, 30, 0.35); display: grid; justify-items: center; gap: 10px; }
.pv-clock-time { font-size: 210px; font-weight: 900; line-height: 1; color: #c62b3a; font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: -0.03em; }
.pv-clock-note { font-size: 44px; font-weight: 700; color: #5b6761; }
.pv-stamp { position: absolute; bottom: 120px; font-size: 64px; font-weight: 900; color: #c62b3a; border: 8px solid #c62b3a; border-radius: 24px; padding: 14px 40px; background: rgba(255, 255, 255, 0.92); }

/* 2: the fix */
.pv-phone { width: 700px; background: #fff; border-radius: 48px; padding: 24px; box-shadow: 0 40px 80px -36px rgba(4, 33, 15, 0.4); }
.pv-phone-head { display: flex; align-items: center; gap: 16px; padding: 4px 8px 20px; border-bottom: 2px solid #e2e8e4; font-size: 36px; }
.pv-timer { margin-inline-start: auto; background: #00c466; color: #04210f; font-weight: 900; font-size: 40px; padding: 6px 22px; border-radius: 999px; direction: ltr; font-variant-numeric: tabular-nums; }
.pv-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; background: #dff7e9; color: #04804a; display: grid; place-items: center; font-weight: 800; font-size: 32px; }
.pv-chat { background: #eaf6e4; border-radius: 30px; margin-top: 20px; padding: 30px 24px; min-height: 290px; display: flex; flex-direction: column; justify-content: center; }
.pv-bubble { max-width: 92%; padding: 22px 28px; border-radius: 28px; font-size: 42px; line-height: 1.35; font-weight: 500; }
.pv-bubble.out { background: #c9f0d6; color: #0b2a17; align-self: flex-end; border-start-end-radius: 8px; }

/* 3: the board */
.pv-board { width: 820px; background: #fff; border-radius: 40px; padding: 26px; box-shadow: 0 40px 80px -36px rgba(4, 33, 15, 0.4); display: grid; gap: 12px; }
.pv-board-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; direction: ltr; font-weight: 800; font-size: 38px; padding: 0 10px 12px; border-bottom: 2px solid #e2e8e4; }
.pv-board-head svg { width: 50px; height: 43px; }
.pv-row { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border-radius: 26px; }
.pv-row.new { background: #dff7e9; }
.pv-row b { display: block; font-size: 38px; }
.pv-row small { color: #5b6761; font-size: 30px; }
.pv-new { margin-inline-start: auto; background: #00c466; color: #04210f; font-style: normal; font-weight: 800; font-size: 28px; padding: 6px 18px; border-radius: 999px; }

/* 4: the end card */
.pv-scene.end { justify-content: center; padding-top: 0; gap: 40px; background: radial-gradient(900px 700px at 50% 40%, #d4f5e2 0%, transparent 70%), #f5f7f6; }
.pv-end-logo { display: flex; align-items: center; gap: 18px; direction: ltr; font-weight: 800; font-size: 80px; letter-spacing: -0.03em; }
.pv-end-logo svg { width: 100px; height: 85px; }
.pv-end-title { font-size: 92px; font-weight: 900; line-height: 1.1; margin: 0; text-align: center; }
.pv-end-sub { font-size: 40px; color: #5b6761; margin: 0; }
.pv-cta { background: #00c466; color: #04210f; font-size: 48px; font-weight: 900; padding: 22px 60px; border-radius: 999px; direction: ltr; }

/* Pro: sources, the hub, the result */
.pv-mess { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 900px; }
.pv-src { height: 120px; background: #fff; border-radius: 28px; box-shadow: 0 24px 50px -30px rgba(120, 20, 30, 0.35); display: flex; align-items: center; gap: 18px; padding: 0 26px; font-size: 38px; font-weight: 800; position: relative; }
.pv-ic { width: 64px; height: 64px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 36px; }
.pv-ic.fb { background: #1877f2; } .pv-ic.ig { background: #d6249f; } .pv-ic.gg { background: #ea4335; } .pv-ic.web { background: #5b6761; }
.pv-miss { position: absolute; top: -14px; inset-inline-end: 18px; background: #c62b3a; color: #fff; font-style: normal; font-size: 24px; font-weight: 800; padding: 4px 14px; border-radius: 999px; }
.pv-flow { margin-top: 40px; display: flex; align-items: center; gap: 30px; }
.pv-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px; background: #fff; border-radius: 30px; box-shadow: 0 24px 50px -30px rgba(4, 33, 15, 0.4); }
.pv-mini .pv-ic { width: 80px; height: 80px; font-size: 44px; border-radius: 20px; }
.pv-arrow { font-size: 80px; color: #04804a; font-weight: 900; }
.pv-hub { width: 250px; height: 250px; border-radius: 48px; background: #fff; border: 5px solid #00c466; box-shadow: 0 30px 60px -30px rgba(4, 33, 15, 0.45); display: grid; place-items: center; align-content: center; gap: 12px; direction: ltr; font-weight: 800; font-size: 36px; }
.pv-hub svg { width: 96px; height: 82px; }
.pv-wa { width: 190px; height: 190px; border-radius: 50%; background: #00c466; display: grid; place-items: center; font-size: 90px; }
.pv-zoom { margin-top: 30px; background: #04210f; color: #dff7e9; font-size: 38px; font-weight: 800; padding: 16px 36px; border-radius: 999px; }
.pv-tag { margin-inline-start: auto; font-style: normal; font-weight: 800; font-size: 28px; padding: 6px 18px; border-radius: 999px; color: #fff; }
.pv-tag.fb { background: #1877f2; } .pv-tag.gg { background: #ea4335; } .pv-tag.web { background: #5b6761; }
.pv-pro { font-size: 44px; background: #04210f; color: #00d26e; padding: 6px 20px; border-radius: 18px; letter-spacing: 0; }

/* controls */
.pv-controls { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(transparent, rgba(4, 33, 15, 0.18)); opacity: 0; transition: opacity 0.2s; }
.promo:hover .pv-controls, .promo:focus-within .pv-controls { opacity: 1; }
@media (hover: none) { .pv-controls { opacity: 1; } }
.pv-play { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #04210f; color: #fff; font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.pv-play:focus-visible { outline: 2px solid #04804a; outline-offset: 2px; }
.pv-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.7); cursor: pointer; overflow: hidden; }
.pv-bar i { display: block; height: 100%; width: 0; background: #00c466; }
.promo.recording { border: 0; border-radius: 0; }
.promo.recording .pv-controls { display: none; }

/* promo.html: the video alone (also the page an MP4 is recorded from) */
body.promo-page { margin: 0; background: #f5f7f6; }
.promo-page main { max-width: 1080px; margin: 0 auto; }