/* ===== WALO app cards — self-contained, drop-in for any page ===== */
/* Namespaced under .waloapp so it never collides with a page's own styles. */
.waloapp{--wsans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--wmono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;position:relative;overflow:hidden;border-radius:30px;border:2px solid #0b4da8;border-left:7px solid #8fdcff;background:linear-gradient(135deg,#061b3a 0%,#0b4da8 55%,#1595ff 100%);box-shadow:0 30px 90px rgba(11,77,168,.24);color:#fff;padding:clamp(24px,4vw,44px);margin:40px 0}
.waloapp *{box-sizing:border-box}
.waloapp-head{max-width:760px}
.waloapp .wa-eyebrow{font:900 12px/1 var(--wmono);letter-spacing:.13em;text-transform:uppercase;color:#bfe6ff;margin-bottom:8px}
.waloapp h2{margin:0;font:950 clamp(26px,4vw,40px)/1.05 var(--wsans);letter-spacing:-.03em;color:#fff}
.waloapp .wa-lead{font:400 clamp(15px,1.7vw,18px)/1.5 var(--wsans);color:#e4f4ff;max-width:64ch;margin:14px 0 0}
.waloapp .wa-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.waloapp .wa-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:12px;background:#fff;color:#0b4da8;font:900 14px var(--wsans);padding:11px 18px;text-decoration:none;border:2px solid #fff}
.waloapp .wa-btn.ghost{background:transparent;color:#fff;border-color:#8fdcff}

/* rail + arrows */
.appshow-railwrap{position:relative;margin-top:8px}
.appshow-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 4px 14px;margin:6px -4px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.appshow-rail::-webkit-scrollbar{display:none}
.rail-arrow{position:absolute;top:46%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;border:1px solid rgba(143,220,255,.55);background:rgba(9,38,90,.9);color:#fff;font:700 24px/1 var(--wsans);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px rgba(4,16,40,.55);transition:transform .15s ease,background .15s ease}
.rail-arrow:hover{background:#0b4da8;transform:translateY(-50%) scale(1.08)}
.rail-arrow.prev{left:-8px}.rail-arrow.next{right:-8px}
.rail-arrow[disabled]{opacity:.28;cursor:default}

/* phone card */
.appshot{scroll-snap-align:center;flex:0 0 auto;width:266px;text-decoration:none;display:block;transition:transform .25s ease;color:#fff}
.appshot:hover{transform:translateY(-6px)}
.appshot.featured{width:302px}
.as-phone{position:relative;height:566px;border-radius:42px;background:#08295c;padding:10px;box-shadow:0 34px 66px -20px rgba(4,16,40,.62);border:1px solid rgba(143,220,255,.28)}
.appshot.featured .as-phone{height:604px}
.as-screen{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;background:linear-gradient(178deg,#0a3f8f,#061b3e);color:#fff}
.as-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:104px;height:20px;background:#08295c;border-radius:0 0 14px 14px;z-index:6}
.as-status{display:flex;justify-content:space-between;padding:11px 18px 2px;font:700 12px var(--wsans);color:#fff}
.as-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 15px 6px}
.as-bar b{font:950 20px var(--wsans);letter-spacing:-.02em;color:#fff}
.as-bar .dot{color:#7fd0ff}
.as-ava{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#082f1a;font:900 11px var(--wsans)}
.as-body{position:absolute;top:76px;bottom:0;left:0;right:0;overflow:hidden;padding:2px 14px 62px}
.as-eyeb{font:900 9px var(--wmono);letter-spacing:.1em;text-transform:uppercase;color:#8fdcff;margin:4px 0 9px}
.as-ring{position:relative;width:148px;height:148px;margin:6px auto 12px;border-radius:50%;background:conic-gradient(#2fe0a0 0 37%,#35c8ff 37% 49%,rgba(255,255,255,.1) 49%);display:grid;place-items:center}
.as-ring:before{content:"";position:absolute;inset:14px;border-radius:50%;background:#081936}
.as-ring b{position:relative;font:950 37px/1 var(--wmono);color:#fff}
.as-ring span{position:relative;display:block;font:800 9px var(--wmono);letter-spacing:.1em;text-transform:uppercase;color:#8fdcff;text-align:center;margin-top:3px}
.as-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.as-lane{background:rgba(255,255,255,.07);border:1px solid rgba(143,220,255,.22);border-radius:12px;padding:8px 4px;text-align:center}
.as-lane b{display:block;font:950 17px var(--wmono);color:#35c8ff}
.as-lane span{display:block;font:800 9px var(--wsans);color:#c7ddf7;line-height:1.2}
.as-chips{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
.as-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(143,220,255,.24);border-radius:999px;background:rgba(255,255,255,.06);font:800 10.5px var(--wsans);color:#d8eaff;padding:5px 9px}
.as-chip.on{border-color:rgba(45,224,160,.5);background:rgba(45,224,160,.14);color:#fff}
a.as-chip.as-link{text-decoration:none;cursor:pointer;transition:border-color .15s ease,background .15s ease}
a.as-chip.as-link:hover{border-color:rgba(45,224,160,.7);background:rgba(45,224,160,.2)}
.as-led{width:6px;height:6px;border-radius:50%;background:#6b85aa}
.as-chip.on .as-led{background:#2fe0a0;box-shadow:0 0 7px #2fe0a0}
.as-card{border:1px solid rgba(143,220,255,.22);border-radius:15px;background:rgba(255,255,255,.06);padding:11px;margin-top:11px}
.as-chead{display:flex;justify-content:space-between;font:800 9px var(--wmono);letter-spacing:.08em;text-transform:uppercase;color:#8fdcff;margin-bottom:8px}
.as-b{width:max-content;max-width:90%;border-radius:13px;padding:8px 10px;margin:6px 0;font:500 11.5px/1.4 var(--wsans)}
.as-b.me{margin-left:auto;background:#25d366;color:#082f1a;font-weight:800}
.as-b.bot{background:rgba(255,255,255,.12);color:#eef7ff}
.as-big{font:950 40px/1 var(--wmono);color:#8fdcff;text-align:center;margin:8px 0 2px}
.as-sub{text-align:center;font:600 11px var(--wsans);color:#cfe6ff;margin:0 0 8px}
.as-inline{color:#9fd6ff;text-decoration:underline}
.as-pet{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0}
.as-pet figure{margin:0;border:1px solid rgba(143,220,255,.25);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06)}
.as-pet img{display:block;width:100%;height:98px;object-fit:cover}
.as-pet figcaption{font:800 9px var(--wsans);color:#c7ddf7;padding:5px 7px}
.as-pet .gen img{filter:saturate(1.32) contrast(1.06)}
.as-pet .gen figcaption{color:#8fdcff}
.as-brief{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid rgba(143,220,255,.14);font:600 11.5px var(--wsans);color:#dff0ff}
.as-brief:first-of-type{border-top:0;padding-top:2px}
.as-brief b{font:800 9px var(--wmono);letter-spacing:.04em;text-transform:uppercase;color:#7fd0ff;background:rgba(127,208,255,.12);border-radius:7px;padding:3px 8px}
.as-ask{margin-top:11px;border:1px solid rgba(143,220,255,.28);border-radius:12px;background:rgba(255,255,255,.05);color:#9fc2e8;font:500 12px var(--wsans);padding:11px 12px}
.as-lanegrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.as-lc{border:1px solid rgba(143,220,255,.2);border-radius:12px;background:rgba(255,255,255,.06);padding:9px 10px}
.as-lc b{display:block;font:800 12px var(--wsans);color:#fff}
.as-lc span{display:block;font:700 10px var(--wsans);color:#8fb8e6;margin-top:2px}
.as-approve{display:flex;gap:7px;margin-top:9px}
.as-appbtn{flex:1;text-align:center;border-radius:10px;background:#25d366;color:#082f1a;font:800 11px var(--wsans);padding:8px 0}
.as-appbtn.ghost{flex:0 0 auto;padding:8px 14px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(143,220,255,.3)}
.as-tabs{position:absolute;left:0;right:0;bottom:0;height:54px;background:rgba(7,20,46,.82);backdrop-filter:blur(12px);border-top:1px solid rgba(143,220,255,.2);display:flex;align-items:center;justify-content:space-around;padding-bottom:6px}
.as-tabs span{font:800 9px var(--wsans);color:rgba(255,255,255,.6)}
.as-tabs span.on{color:#35d6ff}
.as-live{margin:0 auto 2px;width:max-content}
.as-caplink{text-decoration:none}
.appshot-cap{margin-top:15px;color:#fff;text-decoration:none;display:block}
.appshot-cap b{display:block;font:950 16px var(--wsans);letter-spacing:-.01em}
.appshot-cap span{display:block;font:500 12.5px/1.4 var(--wsans);color:#cfe6ff;margin-top:3px}
.appshow-more{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:16px}
.appshow-swipe{display:inline-flex;align-items:center;gap:8px;font:900 12px var(--wmono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(143,220,255,.42);border-radius:999px;padding:9px 15px}
.appshow-swipe b{font-size:15px;animation:asnudge 1.3s ease-in-out infinite}
@keyframes asnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.appshow-note{margin:0;font:600 12.5px var(--wsans);color:#cfe6ff}
.appshow-note a{color:#fff}
@media(max-width:780px){.appshot{width:246px}.appshot.featured{width:266px}.as-phone{height:522px}.appshot.featured .as-phone{height:544px}.rail-arrow{width:38px;height:38px;font-size:20px}.rail-arrow.prev{left:-2px}.rail-arrow.next{right:-2px}}