.wa-receive-page { --wa-deep:#071f45; --wa-blue:#087cec; --wa-cyan:#25c7e6; --wa-mint:#e9faf5; --wa-ink:#173a54; --wa-muted:#60788e; overflow:hidden; color:var(--wa-ink); }
.wa-receive-hero { position:relative; padding:clamp(64px,9vw,112px) 0 48px; overflow:hidden; background:radial-gradient(circle at 78% 5%,rgba(42,214,221,.3),transparent 28%),radial-gradient(circle at 0% 64%,rgba(14,142,248,.25),transparent 34%),linear-gradient(142deg,#061b3c,#074f95 61%,#087dc9); color:#fff; }.wa-receive-hero::after { position:absolute; inset:auto -12% -60px 48%; height:190px; border-radius:50%; background:rgba(255,255,255,.06); content:""; filter:blur(1px); }
.wa-receive-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr); gap:54px; align-items:center; }.wa-receive-hero .eyebrow { color:#a8eefe; }.wa-receive-hero h1 { max-width:780px; margin:8px 0 19px; color:#fff; font-size:clamp(35px,4.3vw,65px); letter-spacing:-.062em; line-height:1.02; }.wa-receive-lead { max-width:690px; margin:0; color:rgba(255,255,255,.87); font-size:clamp(16px,1.5vw,19px); line-height:1.66; }.wa-receive-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }.wa-receive-hero .button-primary { border-color:#fff; background:#fff; color:#086ab7; }.wa-receive-hero .button-secondary { border-color:rgba(255,255,255,.4); background:rgba(6,26,59,.16); color:#fff; }.wa-receive-note { margin:18px 0 0; color:#bceefa; font-size:12px; font-weight:700; line-height:1.5; }
.wa-receive-visual { position:relative; min-height:390px; margin:0; }.wa-phone { position:absolute; z-index:2; top:4px; left:0; width:203px; min-height:347px; padding:19px 14px 13px; border:6px solid #d6edf7; border-radius:29px; background:linear-gradient(160deg,#fff,#e6f6fb); box-shadow:0 25px 55px rgba(0,8,31,.3); color:#173a54; transform:rotate(-4deg); }.wa-phone header { display:flex; align-items:center; gap:6px; margin-bottom:18px; font-size:9px; }.wa-phone header i { width:10px; height:10px; border-radius:50%; background:#25d366; }.wa-phone header strong { font-size:10px; }.wa-phone header span { margin-left:auto; color:#149d66; font-size:7px; font-weight:900; }.wa-bubble { position:relative; margin:10px 0; padding:10px; border-radius:4px 11px 11px; background:#fff; box-shadow:0 4px 12px rgba(21,70,91,.11); animation:wa-bubble-in 5.6s ease-in-out infinite; }.wa-bubble.second { animation-delay:1.15s; }.wa-bubble small { display:block; color:#159667; font-size:6px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.wa-bubble p { margin:4px 0; color:#31536a; font-size:8px; line-height:1.45; }.wa-bubble time { display:block; color:#8ba5b2; font-size:6px; text-align:right; }.wa-phone-safe { position:absolute; bottom:13px; left:15px; right:15px; padding:7px; border-radius:7px; background:#daf6e9; color:#16885a; font-size:7px; font-weight:900; text-align:center; }
.wa-flow { position:absolute; z-index:1; top:134px; left:173px; display:grid; width:165px; gap:5px; padding:12px 8px; border-radius:12px; background:rgba(255,255,255,.11); color:#fff; text-align:center; }.wa-flow::before { position:absolute; top:31px; left:-8px; width:calc(100% + 26px); height:2px; background:linear-gradient(90deg,#44e0e4,#fff,#44e0e4); content:""; }.wa-flow b { font-size:9px; }.wa-flow i { color:#b8eff8; font-size:7px; font-style:normal; }.wa-flow-dot { position:absolute; z-index:1; top:26px; width:10px; height:10px; border-radius:50%; background:#e7fdff; box-shadow:0 0 0 5px rgba(85,226,239,.15); animation:wa-flow-move 2.6s ease-in-out infinite; }.wa-flow-dot.one { left:5px; }.wa-flow-dot.two { left:70px; animation-delay:.55s; }.wa-flow-dot.three { right:-13px; animation-delay:1.05s; }
.wa-destination { position:absolute; right:0; bottom:17px; width:260px; padding:14px; border:1px solid rgba(255,255,255,.42); border-radius:16px; background:rgba(250,254,255,.95); box-shadow:0 20px 50px rgba(1,17,48,.25); color:#173a54; transform:rotate(2deg); }.wa-destination-tabs { display:flex; gap:8px; margin-bottom:10px; }.wa-destination-tabs span { padding:4px 7px; border-radius:6px; background:#e5f5ff; color:#087cec; font-size:7px; font-weight:900; }.wa-destination article { margin:7px 0; padding:10px; border:1px solid #dcecf2; border-radius:9px; background:#fff; }.wa-destination article small { color:#087cec; font-size:6px; font-weight:900; letter-spacing:.08em; }.wa-destination article strong { display:block; margin-top:4px; font-size:9px; }.wa-destination article p { margin:4px 0; color:#5e788b; font-size:8px; }.wa-destination article time { color:#8ba0ae; font-size:7px; }.wa-destination article.api { background:#edf9ff; }.wa-destination code { display:block; margin-top:5px; color:#087cec; font-size:7px; }.wa-receive-visual figcaption { position:absolute; right:0; bottom:-15px; max-width:272px; color:#bfeefa; font-size:9px; line-height:1.4; text-align:right; }
.wa-receive-proof-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:44px; }.wa-receive-proof-grid article { display:grid; grid-template-columns:35px 1fr; gap:11px; min-height:102px; padding:17px; border:1px solid rgba(208,244,255,.28); border-radius:13px; background:rgba(1,25,56,.22); }.wa-receive-proof-grid article>span { color:#84eafa; font-size:10px; font-weight:900; }.wa-receive-proof-grid h2 { margin:0 0 5px; color:#fff; font-size:13px; }.wa-receive-proof-grid p { margin:0; color:#caedf6; font-size:10px; line-height:1.55; }
.wa-receive-flow { background:#f6fcff; }.wa-receive-flow-grid { display:grid; grid-template-columns:minmax(0,.94fr) minmax(500px,1.06fr); gap:48px; align-items:center; }.wa-receive-flow h2,.wa-section-heading h2,.wa-receive-dashboard h2,.wa-receive-api h2,.wa-receive-important h2,.wa-receive-final h2 { margin:6px 0 13px; color:var(--wa-deep); font-size:clamp(27px,3vw,43px); letter-spacing:-.048em; line-height:1.1; }.wa-receive-flow p,.wa-receive-dashboard p,.wa-receive-api p,.wa-receive-important p,.wa-receive-final p { color:var(--wa-muted); font-size:15px; line-height:1.72; }.wa-expiry-note { display:grid; gap:4px; margin-top:18px; padding:13px 15px; border-left:3px solid #11b9dd; border-radius:0 8px 8px 0; background:#e8f9fd; color:#467184; font-size:11px; line-height:1.5; }.wa-expiry-note b { color:#0878b7; }.wa-receive-flow ol { display:flex; align-items:stretch; margin:0; padding:0; list-style:none; }.wa-receive-flow li { position:relative; display:grid; flex:1; gap:8px; padding:18px 12px; border:1px solid #d9ebf3; background:#fff; text-align:center; }.wa-receive-flow li:first-child { border-radius:13px 0 0 13px; }.wa-receive-flow li:last-child { border-radius:0 13px 13px 0; }.wa-receive-flow li>span { display:grid; width:25px; height:25px; place-items:center; margin:auto; border-radius:50%; background:#e3f6fc; color:#0785bf; font-size:10px; font-weight:900; }.wa-receive-flow li strong { color:#24495f; font-size:10px; line-height:1.45; }.wa-receive-flow li>b { position:absolute; z-index:1; top:42%; right:-9px; color:#11a9d0; font-size:17px; }
.wa-receive-setup { background:linear-gradient(135deg,#fff,#f4fbff); }.wa-section-heading { max-width:720px; margin-bottom:24px; }.wa-step-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin:0; padding:0; list-style:none; }.wa-step-grid li { min-height:193px; padding:19px; border:1px solid #d8e9f2; border-radius:13px; background:#fff; box-shadow:0 9px 24px rgba(34,91,122,.06); }.wa-step-grid li>span { display:grid; width:27px; height:27px; place-items:center; margin-bottom:28px; border-radius:8px; background:#e8f7fc; color:#0984bd; font-size:9px; font-weight:900; }.wa-step-grid h3 { margin:0 0 8px; color:#193c54; font-size:14px; }.wa-step-grid p { margin:0; color:#648095; font-size:11px; line-height:1.58; }
.wa-receive-dashboard { background:#fff; }.wa-receive-dashboard-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(490px,1.15fr); gap:55px; align-items:center; }.wa-check-list { display:grid; gap:10px; margin:22px 0; padding:0; list-style:none; }.wa-check-list li { position:relative; padding-left:24px; color:#49697e; font-size:12px; line-height:1.5; }.wa-check-list li::before { position:absolute; top:3px; left:0; width:14px; height:14px; border-radius:50%; background:#dff7ee; color:#118459; content:'✓'; font-size:10px; font-weight:900; line-height:14px; text-align:center; }.wa-dashboard-mockup { margin:0; overflow:hidden; border:1px solid #d0e7ef; border-radius:16px; background:#fff; box-shadow:0 22px 50px rgba(8,72,110,.14); }.wa-dashboard-mockup>header { display:flex; justify-content:space-between; align-items:center; padding:15px 18px; border-bottom:1px solid #dcebf2; }.wa-dashboard-mockup header div { display:flex; align-items:center; gap:8px; }.wa-dashboard-mockup header span { width:13px; height:13px; border-radius:4px; background:linear-gradient(135deg,#0c8fe0,#24d5cb); }.wa-dashboard-mockup header strong { font-size:11px; }.wa-dashboard-mockup header em { padding:5px 7px; border-radius:5px; background:#e7fbf1; color:#16865a; font-size:7px; font-style:normal; font-weight:900; }.wa-dashboard-summary { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; background:#f4fbff; color:#57768a; font-size:9px; }.wa-dashboard-summary b { color:#087cec; font-size:17px; }.wa-dashboard-summary button { padding:8px 10px; border:0; border-radius:6px; background:#087cec; color:#fff; font-size:8px; font-weight:800; }.wa-dashboard-body { display:grid; grid-template-columns:135px 1fr; min-height:218px; }.wa-dashboard-body aside { display:grid; align-content:start; gap:4px; padding:14px 9px; border-right:1px solid #e0ecf2; background:#fbfdff; }.wa-dashboard-body aside strong { margin:0 5px 8px; color:#35566c; font-size:9px; }.wa-dashboard-body aside span { display:flex; justify-content:space-between; gap:2px; padding:8px 6px; border-radius:6px; color:#6d879a; font-size:7px; }.wa-dashboard-body aside span.active { background:#e1f6ff; color:#087cec; font-weight:900; }.wa-dashboard-body aside b { font-size:7px; }.wa-dashboard-body>div { padding:17px; }.wa-dashboard-body>div>p { display:flex; justify-content:space-between; margin:7px 0 3px; color:#658093; font-size:8px; }.wa-dashboard-body>div>article { max-width:84%; padding:10px; border-radius:5px 10px 10px; background:#e5f8ef; color:#29654d; font-size:9px; line-height:1.4; }.wa-dashboard-mockup figcaption { padding:9px 15px; border-top:1px solid #e5eff4; color:#7f96a6; font-size:8px; }
.wa-receive-send { padding-block:0 76px; background:#fff; }.wa-receive-send .container { display:flex; justify-content:space-between; align-items:center; gap:26px; padding:27px 31px; border:1px solid #cde9f4; border-radius:16px; background:linear-gradient(110deg,#edfaff,#fff); }.wa-receive-send h2 { margin:5px 0 7px; color:var(--wa-deep); font-size:clamp(22px,2.4vw,32px); letter-spacing:-.04em; }.wa-receive-send p:not(.eyebrow) { max-width:760px; margin:0; color:var(--wa-muted); font-size:13px; line-height:1.65; }.wa-receive-send .button { white-space:nowrap; }
.wa-receive-api { background:linear-gradient(135deg,#061f45,#063b76); color:#fff; }.wa-receive-api-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(470px,1.2fr); gap:54px; align-items:center; }.wa-receive-api h2 { color:#fff; }.wa-receive-api p { color:#c3e2ef; }.wa-receive-api .button-primary { background:#28c8df; border-color:#28c8df; color:#062c55; }.wa-receive-api ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; counter-reset:steps; }.wa-receive-api li { min-height:116px; padding:16px; border:1px solid rgba(198,239,250,.23); border-radius:12px; background:rgba(255,255,255,.08); }.wa-receive-api h3 { margin:0 0 8px; color:#76e5f4; font-size:12px; }.wa-receive-api li p { margin:0; font-size:10px; line-height:1.55; }
.wa-receive-use { background:#f6fbfe; }.wa-use-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }.wa-use-grid article { min-height:150px; padding:20px; border:1px solid #d9e9f2; border-radius:13px; background:#fff; }.wa-use-grid h3 { margin:0 0 9px; color:#19425c; font-size:15px; }.wa-use-grid p { margin:0; color:#668196; font-size:11px; line-height:1.6; }
.wa-receive-important { background:#fff; }.wa-receive-important .container { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr); gap:60px; align-items:start; }.wa-receive-important aside { padding:20px; border:1px solid #cde8f3; border-radius:13px; background:#effaff; }.wa-receive-important aside>b { color:#087cbc; font-size:12px; }.wa-receive-important aside ul { display:grid; gap:9px; margin:13px 0 0; padding-left:17px; color:#547488; font-size:10px; line-height:1.5; }.wa-receive-final { padding:88px 0; background:radial-gradient(circle at 86% 0,rgba(53,211,228,.25),transparent 30%),linear-gradient(135deg,#062044,#075495); color:#fff; text-align:center; }.wa-receive-final .container { max-width:810px; }.wa-receive-final h2 { color:#fff; }.wa-receive-final p:not(.eyebrow) { color:#d3ecf7; }.wa-receive-final .wa-receive-actions { justify-content:center; }.wa-receive-final .button-primary { background:#fff; border-color:#fff; color:#0876bc; }.wa-receive-final .button-secondary { border-color:rgba(255,255,255,.45); color:#fff; }
@keyframes wa-bubble-in { 0%,12%,100% { opacity:.5; transform:translateY(9px); } 28%,72% { opacity:1; transform:translateY(0); } } @keyframes wa-flow-move { 0%,100% { opacity:.25; transform:translateX(-6px) scale(.7); } 50% { opacity:1; transform:translateX(8px) scale(1); } }
@media (prefers-reduced-motion:reduce) { .wa-bubble,.wa-flow-dot { animation:none; } }.wa-receive-page [hidden] { display:none!important; }
@media (max-width:1000px) { .wa-receive-hero-grid,.wa-receive-flow-grid,.wa-receive-dashboard-grid,.wa-receive-api-grid,.wa-receive-important .container { grid-template-columns:1fr; }.wa-receive-visual { width:min(100%,560px); margin:0 auto; }.wa-step-grid,.wa-use-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.wa-receive-flow ol { max-width:650px; }.wa-receive-proof-grid { margin-top:14px; } }
@media (max-width:640px) { .wa-receive-hero { padding-top:55px; }.wa-receive-hero-grid { gap:34px; }.wa-receive-hero h1 { font-size:38px; }.wa-receive-visual { min-height:355px; transform:scale(.89); transform-origin:top left; width:112%; margin-bottom:-34px; }.wa-receive-proof-grid,.wa-step-grid,.wa-use-grid,.wa-receive-api ol { grid-template-columns:1fr; }.wa-receive-flow ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.wa-receive-flow li { border-radius:10px!important; }.wa-receive-flow li>b { display:none; }.wa-receive-proof-grid article { min-height:auto; }.wa-dashboard-body { grid-template-columns:112px 1fr; }.wa-dashboard-summary { gap:8px; }.wa-receive-send { padding-bottom:55px; }.wa-receive-send .container { display:block; padding:23px; }.wa-receive-send .button { width:100%; margin-top:18px; text-align:center; }.wa-receive-actions .button { width:100%; text-align:center; }.wa-receive-final { padding:64px 0; } }

/* Keep the final documentation CTA readable on the dark blue closing panel. */
.wa-receive-final .button-secondary { border-color:rgba(255,255,255,.65); background:transparent; color:#fff; }
.wa-receive-final .button-secondary:hover { border-color:#fff; background:rgba(255,255,255,.12); color:#fff; }