/* Live product pages (/apilox, /atlas): Minpilot-style sections and motions around live HTML copies
   of the Apilox apps. Site look (General Sans, black pill buttons, Apilox greens) comes from
   apilox.css; app screens use each app's own tokens (from the apps' source) inside .lv-device. */

:root {
  --lv-black: #0c0407;
  --lv-ink: #1d1d1f;
  --lv-gray: #76767c;
  --lv-line: #ececef;
  --lv-soft: #f6f6f6;
  --lv-green: #28b424;
  --lv-forest: #1f4842;
  --lv-mint: #bcf49d;
  --lv-lime: #bfff37;
  --lv-cumulus: #ecf4e9;
  --lv-radius: 1.5rem;
  --lv-container: 83rem;
}
.lv-page { background: #fff; overflow-x: clip; }
.lv-page .page-wrapper { overflow: visible; }
.lv-container { width: 100%; max-width: var(--lv-container); margin: 0 auto; padding: 0 2.5rem; box-sizing: border-box; }
.lv-section { position: relative; padding: 7.5rem 0; }
.lv-section.is-tight { padding: 4.5rem 0; }
.lv-section.is-dark { background: var(--lv-ink); color: #fff; }
.lv-center { text-align: center; }

/* ── type (Minpilot scale; sizes come from apilox.css variables) ───────── */
.lv-h1 { font-size: var(--_typography---font-size--h1); line-height: 1.2; font-weight: 600; color: var(--lv-black); margin: 0; letter-spacing: -.01em; }
.lv-h2 { font-size: var(--_typography---font-size--h2); line-height: 1.2; font-weight: 600; color: var(--lv-black); margin: 0; letter-spacing: -.01em; }
.lv-h3 { font-size: 1.75rem; line-height: 1.2; font-weight: 600; color: var(--lv-black); margin: 0; }
.lv-h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; color: var(--lv-black); margin: 0; }
.is-dark .lv-h1, .is-dark .lv-h2, .is-dark .lv-h3, .is-dark .lv-h4, .lv-dark .lv-h2, .lv-dark .lv-h3 { color: #fff; }
.lv-p { color: var(--lv-gray); font-size: 1rem; line-height: 1.5; margin: 0; }
.lv-p.is-lg { font-size: 1.25rem; }
.is-dark .lv-p, .lv-dark .lv-p { color: #a3a3ae; }
.lv-max-35 { max-width: 35rem; }
.lv-max-50 { max-width: 50rem; }
.lv-mx-auto { margin-left: auto; margin-right: auto; }
.lv-head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.lv-head.is-left { align-items: flex-start; text-align: left; }

/* badge: a pill with a round mark and a label */
.lv-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem .375rem .375rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--lv-line); font-size: .875rem; font-weight: 500; color: var(--lv-black); }
.lv-badge-mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--lv-black); display: grid; place-items: center; overflow: hidden; }
.lv-badge-mark img { width: 100%; height: 100%; object-fit: cover; }
.lv-badge-mark .lv-i { color: var(--lv-lime); font-size: .95rem; }
.is-dark .lv-badge, .lv-dark .lv-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; }
.lv-eyebrow { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lv-forest); }

/* buttons: Minpilot's black pill with a rolling label and an arrow that slides out and back in */
.lv-btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.lv-head .lv-btns { justify-content: center; }
.lv-head.is-left .lv-btns { justify-content: flex-start; }
.lv-btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .875rem 1.5rem; border-radius: 999px;
  font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none; overflow: hidden; isolation: isolate;
  background: var(--lv-black); color: #fff; border: 2px solid var(--lv-black); transition: transform .3s ease, box-shadow .3s ease; }
.lv-btn.is-light { background: #fff; color: var(--lv-black); border-color: var(--lv-line); }
.lv-btn.is-lime { background: var(--lv-lime); color: var(--lv-black); border-color: var(--lv-lime); }
.lv-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(12,4,7,.16); }
.lv-btn-label { position: relative; display: inline-block; overflow: hidden; height: 1.5em; white-space: nowrap; }
.lv-btn-label > span { display: block; transition: transform .55s cubic-bezier(.7,0,.2,1); }
.lv-btn-label > span + span { position: absolute; left: 0; top: 100%; }
.lv-btn:hover .lv-btn-label > span { transform: translateY(-100%); }
.lv-btn-arrow { position: relative; width: 1rem; height: 1rem; overflow: hidden; flex: none; }
.lv-btn-arrow img, .lv-btn-arrow svg { position: absolute; inset: 0; width: 1rem; height: 1rem; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.lv-btn-arrow > :last-child { transform: translateX(-120%); }
.lv-btn:hover .lv-btn-arrow > :first-child { transform: translateX(120%); }
.lv-btn:hover .lv-btn-arrow > :last-child { transform: translateX(0); }
.lv-btn .lv-i { font-size: 1.15rem; }

/* soft brand-coloured mesh behind heroes (Minpilot's blurred colour shapes, in Apilox greens) */
.lv-mesh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.lv-mesh i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: lv-drift 18s ease-in-out infinite alternate; }
.lv-mesh .m1 { width: 34rem; height: 22rem; left: 8%; top: 4rem; background: var(--lv-lime); }
.lv-mesh .m2 { width: 30rem; height: 24rem; right: 6%; top: 2rem; background: #5bffc3; animation-delay: -6s; }
.lv-mesh .m3 { width: 26rem; height: 18rem; left: 34%; top: 14rem; background: var(--lv-green); opacity: .35; animation-delay: -12s; }
.lv-mesh .m4 { width: 22rem; height: 16rem; right: 26%; top: 6rem; background: #97f05e; opacity: .45; animation-delay: -3s; }
@keyframes lv-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(3rem,1.5rem,0) scale(1.08); } }
.lv-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(12,4,7,.09) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); pointer-events: none; }

/* ═══ motion kit ═══════════════════════════════════════════════════════
   [data-reveal]            fade + rise 60px when it enters (children with [data-reveal-child] stagger)
   [data-words]             heading words rise out of a mask, one after another
   [data-blur]              words come in from a 10px blur
   [data-type]              typed text with a blinking cursor
   [data-count]             number counts up (keeps prefix/suffix/separators)
   [data-float]             gentle endless bob (out of phase via --lv-delay)
   [data-tilt-scroll]       device tilts back in 3D as the page scrolls past
   [data-parallax]          moves at a fraction of the scroll speed
   Everything is still when the visitor prefers reduced motion. */
[data-reveal] { opacity: 0; transform: translateY(60px); transition: opacity .85s cubic-bezier(.45,0,.2,1), transform .85s cubic-bezier(.45,0,.2,1);
  transition-delay: var(--lv-delay, 0s); }
[data-reveal].lv-in { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: scale(.94) translateY(40px); }
[data-reveal="left"] { transform: translateX(-10%) rotateY(40deg) scale(.85); transform-origin: right center; }
[data-reveal="right"] { transform: translateX(10%) rotateY(-40deg) scale(.85); transform-origin: left center; }
[data-reveal="pop"] { transform: scale(.4); transition-timing-function: cubic-bezier(.34,1.56,.64,1); }
.lv-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.lv-word > span { display: inline-block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--lv-delay, 0s); }
.lv-in .lv-word > span, .lv-word.lv-in > span { transform: none; }
.lv-blur > span { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(8px);
  transition: opacity .8s ease, filter .8s ease, transform .8s ease; transition-delay: var(--lv-delay, 0s); }
.lv-in .lv-blur > span, .lv-blur.lv-in > span { opacity: 1; filter: none; transform: none; }
.lv-typed::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: .15em; vertical-align: -.12em;
  background: currentColor; animation: lv-caret 1s steps(1) infinite; }
@keyframes lv-caret { 50% { opacity: 0; } }
[data-float] { animation: lv-float var(--lv-float-dur, 4.4s) ease-in-out infinite; animation-delay: var(--lv-delay, 0s); }
@keyframes lv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--lv-float, -18px); } }
[data-tilt-scroll] { transform-origin: 50% 0; will-change: transform; }
.lv-perspective { perspective: 1800px; }

/* marquee (horizontal, endless, faded edges) */
.lv-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lv-marquee-track { display: flex; width: max-content; gap: 1rem; animation: lv-marquee var(--lv-speed, 40s) linear infinite; }
.lv-marquee.is-reverse .lv-marquee-track { animation-direction: reverse; }
.lv-marquee:hover .lv-marquee-track { animation-play-state: paused; }
@keyframes lv-marquee { to { transform: translateX(-50%); } }
/* vertical marquee columns (reviews) */
.lv-vmarquee { overflow: hidden; height: 40rem; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.lv-vmarquee-track { display: flex; flex-direction: column; gap: 1.25rem; animation: lv-vmarquee var(--lv-speed, 36s) linear infinite; }
.lv-vmarquee.is-reverse .lv-vmarquee-track { animation-direction: reverse; }
.lv-vmarquee:hover .lv-vmarquee-track { animation-play-state: paused; }
@keyframes lv-vmarquee { to { transform: translateY(-50%); } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .lv-word > span, .lv-blur > span { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  [data-float], .lv-mesh i, .lv-marquee-track, .lv-vmarquee-track, .lv-orbit { animation: none !important; }
}

/* ═══ hero ══════════════════════════════════════════════════════════════ */
.lv-hero { position: relative; padding: 9.5rem 0 0; overflow: hidden; }
.lv-hero .lv-container { position: relative; z-index: 1; }
.lv-hero .lv-head { gap: 1.5rem; }
.lv-hero .lv-p.is-lg { max-width: 44rem; }
.lv-stage { position: relative; margin: 4.5rem auto 0; max-width: 72rem; padding-bottom: 0; }
.lv-stage-desktop { position: relative; z-index: 1; }
.lv-stage-phone { position: absolute; z-index: 3; right: -2.5rem; bottom: -3rem; width: 17.5rem; }
.lv-stage-card { position: absolute; z-index: 4; }
.lv-stage-card.is-left { left: -3.5rem; top: 30%; width: 17rem; }
.lv-stage-card.is-top { right: -4.5rem; top: 3.5rem; width: 14.5rem; }
.lv-hero-fade { position: relative; height: 7rem; margin-top: -7rem; z-index: 5; background: linear-gradient(transparent, #fff); pointer-events: none; }

/* a floating white card (Minpilot's satellite cards) */
.lv-float-card { background: #fff; border-radius: 1.25rem; padding: 1rem; box-shadow: 0 24px 60px -12px rgba(12,4,7,.22), 0 0 0 1px rgba(12,4,7,.05);
  font-size: .875rem; color: var(--lv-black); text-align: left; }
.lv-fc-head { display: flex; align-items: center; gap: .625rem; }
.lv-fc-ico { width: 2.25rem; height: 2.25rem; border-radius: .75rem; display: grid; place-items: center; flex: none; background: var(--lv-cumulus); color: var(--lv-forest); font-size: 1.15rem; }
.lv-fc-ico.is-red { background: #fdeceb; color: #f73540; }
.lv-fc-ico.is-amber { background: #fff2df; color: #c47a00; }
.lv-fc-title { font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.lv-fc-sub { color: var(--lv-gray); font-size: .8125rem; line-height: 1.35; }
.lv-fc-row { display: flex; align-items: center; gap: .5rem; margin-top: .875rem; }
.lv-fc-btn { flex: 1; text-align: center; border-radius: 999px; padding: .5rem .75rem; font-weight: 600; font-size: .8125rem; background: var(--lv-soft); color: var(--lv-black); }
.lv-fc-btn.is-go { background: var(--lv-forest); color: #fff; }
.lv-fc-meter { height: .375rem; border-radius: 999px; background: var(--lv-soft); overflow: hidden; margin-top: .75rem; }
.lv-fc-meter > i { display: block; height: 100%; width: var(--v, 30%); background: linear-gradient(90deg, #f5a524, #f73540); border-radius: inherit; }
.lv-fc-big { font-size: 1.75rem; font-weight: 600; line-height: 1.1; margin-top: .625rem; font-variant-numeric: tabular-nums; }
.lv-fc-up { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 600; color: #1f9254; background: #e7f8ec; padding: .15rem .45rem; border-radius: 999px; margin-left: .35rem; vertical-align: middle; }

/* ═══ device frames ════════════════════════════════════════════════════ */
.lv-device { position: relative; font-synthesis: none; -webkit-font-smoothing: antialiased; }
.lv-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.lv-fit { position: relative; overflow: hidden; }

/* desktop window: dark rounded bezel like Minpilot's dashboard frame */
.lv-desktop { padding: .75rem; border-radius: 1.75rem; background: var(--lv-ink);
  box-shadow: 0 50px 100px -30px rgba(12,4,7,.45), 0 0 0 1px rgba(255,255,255,.06) inset; }
.lv-desktop .lv-fit { border-radius: 1.1rem; background: #fbfbfd; }
.lv-desktop .lv-screen { width: 1280px; height: 780px; }

/* phone: black bezel, island, rounded screen */
.lv-phone { padding: .55rem; border-radius: 3rem; background: #0d0d0e;
  box-shadow: 0 40px 80px -20px rgba(12,4,7,.5), 0 0 0 2px #2a2a2c inset, 0 0 0 1px rgba(255,255,255,.08); }
.lv-phone .lv-fit { border-radius: 2.5rem; background: #fbfbfd; }
.lv-phone .lv-screen { width: 390px; height: 844px; }
.lv-phone .lv-island { position: absolute; z-index: 30; top: 11px; left: 50%; width: 112px; height: 32px; margin-left: -56px; border-radius: 20px; background: #000; }
.lv-phone.is-dark .lv-fit { background: #121212; }

/* status bar inside a phone screen */
.lv-status { height: 50px; padding: 0 30px 0 34px; display: flex; align-items: center; justify-content: space-between; font: 600 15px/1 -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif; color: #000; position: relative; z-index: 20; }
.lv-status-r { display: flex; gap: 6px; align-items: center; }
.lv-status-r i { display: inline-block; }
.lv-sig { width: 17px; height: 11px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 4.5px, currentColor 4.5px 7.5px, transparent 7.5px 9px, currentColor 9px 12px, transparent 12px 13.5px, currentColor 13.5px);
  -webkit-mask: linear-gradient(transparent 62%, #000 62%) 0 0/3px 100% no-repeat, linear-gradient(transparent 42%, #000 42%) 4.5px 0/3px 100% no-repeat, linear-gradient(transparent 22%, #000 22%) 9px 0/3px 100% no-repeat, linear-gradient(#000,#000) 13.5px 0/3.5px 100% no-repeat;
  mask: linear-gradient(transparent 62%, #000 62%) 0 0/3px 100% no-repeat, linear-gradient(transparent 42%, #000 42%) 4.5px 0/3px 100% no-repeat, linear-gradient(transparent 22%, #000 22%) 9px 0/3px 100% no-repeat, linear-gradient(#000,#000) 13.5px 0/3.5px 100% no-repeat; }
.lv-batt { width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .9; position: relative; box-sizing: border-box; }
.lv-batt::before { content: ""; position: absolute; inset: 1.5px; width: 70%; background: currentColor; border-radius: 1.5px; }
.lv-batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; opacity: .5; }
.is-dark .lv-status { color: #fff; }

/* the finger and the tap ripple */
.lv-finger { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 50; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0 30%, rgba(255,255,255,.25) 31% 100%);
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.28); opacity: 0;
  transition: transform .5s cubic-bezier(.45,0,.2,1), opacity .3s ease, scale .14s ease; backdrop-filter: blur(1px); }
.lv-finger.lv-on { opacity: 1; }
.lv-finger.lv-press { scale: .78; }
.lv-desktop .lv-finger, .lv-w .lv-finger, .lv-laptop .lv-finger { width: 22px; height: 22px; left: -4px; top: -2px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L9.6 19z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.lv-desktop .lv-finger.lv-press, .lv-w .lv-finger.lv-press, .lv-laptop .lv-finger.lv-press { scale: .9; }
.lv-ripple { position: absolute; z-index: 49; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: rgba(40,180,36,.35); border: 2px solid rgba(40,180,36,.6); animation: lv-ripple .65s ease-out forwards; }
@keyframes lv-ripple { to { transform: scale(4.2); opacity: 0; } }
.lv-pressed { filter: brightness(.94); }

/* ═══ Apilox PRO (web/desktop) — tokens from APILOX_PRO/index.html :root ═══ */
.lv-pro { --tf: #1f4842; --cu: #ecf4e9; --mint: #bcf49d; --bg: #fbfbfd; --line: #e6e6e6; --red: #f73540; --t1: #1a1a1a; --t2: #6b6f6e; --t3: #9a9c9b;
  --green: #1f9254; --green-bg: #e7f8ec; --amber: #f5a524; --amber-bg: #fff2df; --blue: #1d5fd6; --violet: #8b5cf6;
  font-family: "LvSans", -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--t1); background: var(--bg);
  display: flex; font-size: 14px; line-height: 1.35; }
@font-face { font-family: "LvSans"; src: url("../fonts/live/GoogleSansFlex.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
.lv-pro * { box-sizing: border-box; }
.pro-side { width: 232px; flex: none; background: var(--cu); padding: 18px 0 14px; display: flex; flex-direction: column; height: 100%; }
.pro-logo { padding: 0 22px 18px; }
.pro-logo img { height: 50px; display: block; }
.pro-nav { list-style: none; margin: 0; padding: 0; flex: 1; }
.pro-nav li { display: flex; align-items: center; gap: 12px; padding: 11px 22px; color: #2c3e3a; font-size: 14px; font-weight: 500; position: relative; }
.pro-nav li.is-on { background: var(--mint); color: var(--tf); font-weight: 600; }
.pro-nav .pro-caret { margin-left: auto; font-size: 12px; opacity: .55; }
.pro-ico { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; opacity: .9; }
.pro-badge { margin-left: auto; min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.pro-switch { margin: 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--mint); display: flex; align-items: center; gap: 10px; }
.pro-switch-logo { width: 34px; height: 34px; border-radius: 50%; background: var(--tf); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pro-switch b { display: block; font-size: 13px; color: var(--tf); }
.pro-switch small { font-size: 11px; color: #3f6158; }
.pro-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.pro-top { height: 66px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 26px; }
.pro-top h1 { font-size: 19px; font-weight: 700; margin: 0 auto 0 4px; color: var(--t1); }
.pro-iconbtn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 1px 2px rgba(20,22,31,.06);
  display: grid; place-items: center; color: #2c2f2e; font-size: 17px; position: relative; }
.pro-iconbtn .pro-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 1.5px solid #fff; }
.pro-newsale { background: var(--tf); color: #fff; border-radius: 22px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; }
.pro-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2a5a52, #1f4842); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.pro-body { flex: 1; min-height: 0; padding: 4px 26px 26px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.pro-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.pro-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.pro-kpi { padding: 18px 20px; border-left: 1px solid var(--line); }
.pro-kpi:first-child { border-left: 0; }
.pro-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--t2); }
.pro-kpi-val { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pro-kpi-val b { font-size: 24px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pro-delta { font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 8px; background: var(--green-bg); color: var(--green); display: inline-flex; gap: 3px; align-items: center; }
.pro-delta.is-down { background: #fdeceb; color: var(--red); }
.pro-kpi-sub { font-size: 11.5px; color: var(--t3); margin-top: 6px; font-weight: 500; }
.pro-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; flex: 1; min-height: 0; }
.pro-panel { padding: 18px 20px; display: flex; flex-direction: column; min-height: 0; }
.pro-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pro-panel-title { font-size: 15px; font-weight: 700; }
.pro-pill { border: 1px solid var(--line); border-radius: 10px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--t2); display: inline-flex; gap: 6px; align-items: center; }
.pro-bars { flex: 1; display: flex; align-items: flex-end; gap: 14px; padding: 8px 4px 0; min-height: 0; border-bottom: 1px solid var(--line); }
.pro-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.pro-bar i { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: var(--tf); height: var(--h, 10%); transition: height 1s cubic-bezier(.2,.7,.2,1); }
.pro-bar i.is-mint { background: var(--mint); }
.pro-bar span { font-size: 11px; color: var(--t3); font-weight: 600; }
.pro-donut { position: relative; width: 168px; height: 168px; margin: 4px auto 10px; }
.pro-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pro-donut circle { fill: none; stroke-width: 22; transition: stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1); }
.pro-donut-mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.pro-donut-mid b { display: block; font-size: 17px; font-weight: 800; }
.pro-donut-mid small { font-size: 11px; color: var(--t3); }
.pro-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.pro-legend div { display: flex; align-items: center; gap: 8px; }
.pro-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pro-legend b { margin-left: auto; font-weight: 700; }
.pro-feed { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.pro-feed-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f0f2; font-size: 12.5px;
  animation: lv-feed-in .6s cubic-bezier(.2,.7,.2,1); }
.pro-feed-row:first-child { border-top: 0; }
.pro-feed-row img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--cu); }
.pro-feed-row b { font-weight: 700; }
.pro-feed-row small { display: block; color: var(--t3); font-size: 11px; }
.pro-feed-row .pro-amt { margin-left: auto; font-weight: 800; color: var(--tf); font-variant-numeric: tabular-nums; }
@keyframes lv-feed-in { from { opacity: 0; transform: translateY(-14px); background: var(--cu); } to { opacity: 1; transform: none; } }
.pro-toast { position: absolute; right: 26px; top: 76px; z-index: 10; background: var(--tf); color: #fff; border-radius: 14px; padding: 12px 16px;
  font-size: 13px; font-weight: 600; display: flex; gap: 10px; align-items: center; box-shadow: 0 16px 36px rgba(20,22,31,.25);
  transform: translateY(-12px); opacity: 0; transition: .35s ease; }
.pro-toast.is-on { transform: none; opacity: 1; }

/* ═══ Apilox app (Flutter, light) — tokens from apps/apilox/lib/core/theme/app_colors.dart ═══ */
.lv-ax { --tf: #1f4842; --cu: #ecf4e9; --mint: #bcf49d; --bg: #fbfbfd; --line: #e6e6e6; --sep: #c6c6c8; --t1: #1a1a1a; --t2: #6b6f6e; --t3: #9a9c9b;
  --ios: #8e8e93; --red: #f73540; --green: #1f9254; --green-bg: #e7f8ec;
  font-family: "LvSans", -apple-system, Roboto, sans-serif; color: #000; background: var(--bg); width: 390px; height: 844px; position: relative; font-size: 14px; line-height: 1.3; }
.lv-ax * { box-sizing: border-box; }
.ax-head { display: flex; align-items: center; gap: 8px; padding: 6px 16px 8px; }
.ax-round { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 19px; color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(15,20,22,.12); border: 1px solid rgba(0,0,0,.04); flex: none; }
.ax-title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; margin-right: auto; margin-left: 4px; }
.ax-search { margin: 4px 24px 6px; height: 44px; border-radius: 12px; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--ios); font-size: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03); }
.ax-search .lv-i { font-size: 18px; }
.ax-search-text { flex: 1; color: #000; white-space: nowrap; overflow: hidden; }
.ax-search-text:empty::before { content: attr(data-ph); color: var(--ios); }
.ax-search-x { font-size: 17px; color: #c7c7cc; opacity: 0; transition: opacity .2s; }
.ax-search.has-text .ax-search-x { opacity: 1; }
.ax-seg { margin: 8px 12px 4px; background: #f2f2f7; border-radius: 11px; padding: 3px; display: flex; }
.ax-seg > div { flex: 1; text-align: center; padding: 8px 0; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--ios); transition: background .25s, color .25s, box-shadow .25s; }
.ax-seg > div.is-on { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ax-tools { display: flex; align-items: center; gap: 8px; padding: 6px 12px; height: 48px; overflow: hidden; }
.ax-toggle { display: flex; padding: 3px; border-radius: 10px; background: #fff; border: 1px solid var(--sep); flex: none; }
.ax-toggle > span { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 15px; color: var(--ios); }
.ax-toggle > span.is-on { background: var(--mint); color: var(--tf); }
.ax-chip { flex: none; padding: 0 16px; height: 34px; display: grid; place-items: center; border-radius: 20px; border: 1px solid var(--sep); background: #fff;
  font-size: 12.5px; font-weight: 700; color: #000; white-space: nowrap; transition: background .25s, border-color .25s, color .25s; }
.ax-chip.is-on { background: var(--mint); border-color: var(--mint); color: var(--tf); }
.ax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 12px 8px; }
.ax-tile { background: #fff; border: 1px solid var(--sep); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: .82;
  transition: opacity .3s, transform .3s; }
.ax-tile.is-out { display: none; }
.ax-tile-img { flex: 1; min-height: 0; background: #fbfbfd center/cover no-repeat; }
.ax-tile-body { padding: 8px 10px 10px; }
.ax-tile-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-tile-stock { font-size: 10px; color: var(--ios); margin-top: 2px; }
.ax-tile-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.ax-tile-price { font-size: 12.5px; font-weight: 800; }
.ax-plus { width: 20px; height: 20px; border-radius: 50%; background: var(--tf); color: #fff; display: grid; place-items: center; font-size: 12px; }
.ax-scroll { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; }
.ax-pane { position: absolute; left: 0; right: 0; top: 268px; bottom: 0; overflow: hidden; transition: opacity .3s ease, transform .35s ease; }
.ax-pane.is-hidden { opacity: 0; pointer-events: none; transform: translateX(18px); }
.ax-home-ind { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; background: #000; border-radius: 3px; z-index: 40; }

/* center alert (shared ApiloxCenterAlert): the add-to-cart quantity dialog */
.ax-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ax-scrim.is-on { opacity: 1; }
.ax-alert { position: absolute; z-index: 31; left: 28px; right: 28px; top: 50%; background: #fafcfb; border-radius: 28px; padding: 24px 24px 20px; text-align: center;
  transform: translate(0, -46%) scale(.92); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease; }
.ax-alert.is-on { transform: translate(0, -50%) scale(1); opacity: 1; }
.ax-alert h4 { font-size: 19px; font-weight: 800; color: #17181c; margin: 0; }
.ax-alert p { font-size: 15px; font-weight: 500; color: var(--t2); margin: 4px 0 0; }
.ax-alert-img { width: 92px; height: 92px; border-radius: 16px; margin: 16px auto 0; background: #fff center/cover no-repeat; }
.ax-alert-stock { font-size: 12px; font-weight: 600; color: var(--ios); margin-top: 10px; }
.ax-step { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 14px; }
.ax-step span { width: 34px; height: 34px; border-radius: 50%; background: rgba(31,72,66,.1); color: var(--tf); display: grid; place-items: center; font-size: 16px; }
.ax-step b { width: 68px; text-align: center; font-size: 18px; font-weight: 800; }
.ax-alert-total { display: flex; justify-content: space-between; align-items: center; border-top: .5px solid var(--sep); margin-top: 14px; padding-top: 12px; }
.ax-alert-total span { font-size: 13px; color: var(--ios); }
.ax-alert-total b { font-size: 17px; font-weight: 800; }
.ax-alert-btns { display: flex; gap: 10px; margin-top: 16px; }
.ax-alert-btns > div { flex: 1; border-radius: 24px; padding: 13px 0; font-size: 15px; font-weight: 700; }
.ax-btn-cancel { background: #e9f8ef; color: #1c6b2a; }
.ax-btn-add { background: #1c6b2a; color: #fff; }

/* cart */
.ax-cart { padding: 10px 16px; }
.ax-cart-head { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.ax-count { margin-left: auto; background: var(--cu); color: var(--tf); border-radius: 20px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; }
.ax-line { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: .5px solid var(--sep); animation: lv-feed-in .5s ease; }
.ax-line img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #fff; }
.ax-line-name { font-size: 14px; font-weight: 700; }
.ax-line-sub { font-size: 11.5px; color: var(--ios); margin-top: 2px; }
.ax-line-amt { margin-left: auto; font-size: 14px; font-weight: 800; }
.ax-sum { margin-top: 14px; background: #ebebec; border-radius: 14px; padding: 14px; font-size: 13px; }
.ax-sum div { display: flex; justify-content: space-between; padding: 3px 0; color: #3c3c43; }
.ax-sum div.is-total { border-top: .5px solid var(--sep); margin-top: 6px; padding-top: 9px; font-size: 15px; font-weight: 800; color: #000; }
.ax-process { margin: 16px 0 0; background: var(--tf); color: #fff; border-radius: 16px; padding: 15px; text-align: center; font-size: 15px; font-weight: 800; display: flex; justify-content: center; gap: 6px; align-items: center; }

/* payment sheet */
.ax-sheet { position: absolute; z-index: 32; left: 0; right: 0; bottom: 0; height: 690px; background: var(--bg); border-radius: 16px 16px 0 0;
  transform: translateY(100%); transition: transform .45s cubic-bezier(.2,.8,.2,1); padding: 8px 16px 0; box-shadow: 0 -10px 30px rgba(0,0,0,.08); }
.ax-sheet.is-on { transform: none; }
.ax-grab { width: 36px; height: 4px; border-radius: 2px; background: #c7c7cc; margin: 0 auto 10px; }
.ax-sheet-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px 12px; }
.ax-sheet-head b { font-size: 18px; font-weight: 700; }
.ax-sheet-head .ax-total { color: var(--tf); font-size: 18px; font-weight: 700; margin-left: auto; }
.ax-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--ios); text-transform: uppercase; margin: 10px 4px 8px; }
.ax-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.ax-method { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 0 0 1px rgba(0,0,0,.05);
  transition: background .25s, color .25s; }
.ax-method img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.ax-method .lv-i { font-size: 16px; }
.ax-method.is-on { background: var(--tf); color: #fff; }
.ax-amount { background: #fff; border: 1px solid var(--sep); border-radius: 14px; padding: 16px 20px; text-align: center; }
.ax-amount b { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ax-amount b.is-ph { color: #c7c7cc; }
.ax-amount small { display: block; font-size: 15px; font-weight: 700; color: var(--tf); margin-top: 4px; min-height: 20px; }
.ax-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ax-keys > div { background: #fff; border-radius: 12px; height: 52px; display: grid; place-items: center; font-size: 18px; font-weight: 700; box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.ax-keys .is-c { color: #ff3b30; }
.ax-keys .is-del { color: #ff9500; }
.ax-complete { margin-top: 14px; background: #000; color: #fff; border-radius: 14px; padding: 16px; text-align: center; font-size: 16px; font-weight: 700; }

/* sale complete receipt */
.ax-receipt { position: absolute; z-index: 33; left: 18px; right: 18px; top: 50%; background: #fafcfb; border-radius: 28px; padding: 18px 0 18px;
  transform: translateY(-46%) scale(.92); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.15), opacity .25s; pointer-events: none; }
.ax-receipt.is-on { transform: translateY(-50%); opacity: 1; }
.ax-receipt-head { display: flex; justify-content: space-between; align-items: center; padding: 0 22px 12px; font-size: 17px; font-weight: 800; }
.ax-ticket { background: #fff; margin: 0 18px; border-radius: 20px; padding: 18px; text-align: center; }
.ax-ticket h5 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 1.2px; }
.ax-ticket .ax-done-msg { font-size: 14px; font-weight: 800; margin-top: 8px; }
.ax-ticket .ax-thanks { font-size: 12px; color: var(--ios); margin-top: 2px; }
.ax-tlines { margin-top: 12px; border-top: .5px solid var(--sep); padding-top: 8px; text-align: left; }
.ax-tline { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.ax-tline b { font-weight: 700; }
.ax-tline small { display: block; color: var(--ios); font-size: 11.5px; font-weight: 400; }
.ax-paid { margin-top: 10px; background: var(--cu); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--tf); }
.ax-acts { display: flex; gap: 8px; padding: 12px 18px 0; }
.ax-acts > div { flex: 1; background: #fff; border: 1px solid var(--sep); border-radius: 14px; padding: 8px 0; text-align: center; font-size: 11.5px; font-weight: 700; }
.ax-acts .lv-i { display: block; font-size: 18px; margin: 0 auto 3px; }
.ax-done { margin: 12px 18px 0; background: var(--tf); color: #fff; border-radius: 16px; padding: 14px; text-align: center; font-size: 15px; font-weight: 800; }

/* ═══ responsive ═══════════════════════════════════════════════════════ */
@media screen and (max-width: 991px) {
  .lv-section { padding: 5.5rem 0; }
  .lv-stage-phone { width: 14rem; right: -1rem; }
  .lv-stage-card.is-left { left: -1rem; width: 14.5rem; }
  .lv-stage-card.is-top { display: none; }
}
@media screen and (max-width: 767px) {
  .lv-container { padding: 0 1.25rem; }
  .lv-hero { padding-top: 8rem; }
  .lv-stage { margin-top: 3rem; }
  .lv-stage { margin-bottom: 5rem; }
  .lv-stage-phone { width: 36%; right: -.25rem; bottom: -5.5rem; }
  .lv-stage-card.is-left { top: auto; bottom: -4.5rem; left: -.25rem; width: 58%; }
  .lv-stage-card.is-left .lv-float-card { padding: .75rem; }
  .lv-float-card .lv-fc-row, .lv-float-card .lv-fc-meter, .lv-stage-card .lv-fc-sub { display: none; }
  .lv-p.is-lg { font-size: 1.0625rem; }
  .lv-desktop { padding: .4rem; border-radius: 1rem; }
  .lv-desktop .lv-fit { border-radius: .7rem; }
}
@media screen and (max-width: 479px) {
  .lv-btns { width: 100%; flex-direction: column; }
  .lv-btns .lv-btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ═══ section: PRO features bento (Minpilot "bank anytime" grid) ═══════════ */
.lv-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; margin-top: 4rem; position: relative; }
.lv-bento::before { content: ""; position: absolute; left: 4%; right: 4%; top: 49%; height: 4px; border-radius: 4px; z-index: 0; filter: blur(6px);
  background: linear-gradient(90deg, #bfff37, #5bffc3, #28b424, #97f05e); opacity: .8; }
.lv-tile { position: relative; z-index: 1; background: #fff; border-radius: 1.5rem; border: 1px solid var(--lv-line); padding: 1.75rem 1.75rem 0;
  display: flex; flex-direction: column; overflow: hidden; min-height: 27rem; grid-column: span 2; }
.lv-tile.is-wide { grid-column: span 3; }
.lv-tile-ico { width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: var(--lv-soft); display: grid; place-items: center; font-size: 1.35rem; color: var(--lv-black); margin-bottom: 1.25rem; }
.lv-tile .lv-p { margin-top: .625rem; max-width: 28rem; }
.lv-tile-link { display: inline-flex; align-items: center; gap: .375rem; margin-top: .875rem; font-weight: 600; font-size: .9375rem; color: var(--lv-black); text-decoration: none; }
.lv-tile-link svg { width: 1rem; height: 1rem; transition: transform .3s ease; }
.lv-tile-link:hover svg { transform: translateX(4px); }
.lv-tile-stage { flex: 1; position: relative; margin: 1.5rem -1.75rem 0; padding: 0 1.75rem 1.75rem; display: flex; align-items: flex-end; justify-content: center; min-height: 15rem; }
.lv-tile-stage.is-tint { background: linear-gradient(180deg, transparent, var(--lv-cumulus) 55%); }

/* the live widgets inside the tiles (PRO look: Google Sans Flex, PRO tokens) */
.lv-w { --tf: #1f4842; --cu: #ecf4e9; --mint: #bcf49d; --line: #e6e6e6; --t2: #6b6f6e; --t3: #9a9c9b; --red: #f73540; --amber: #f5a524; --green: #1f9254;
  font-family: "LvSans", -apple-system, "Segoe UI", sans-serif; color: #1a1a1a; font-size: 13px; line-height: 1.35; width: 100%;
  background: #fff; border-radius: 18px; box-shadow: 0 20px 50px -18px rgba(12,4,7,.25), 0 0 0 1px rgba(12,4,7,.06); padding: 14px; position: relative; }
.lv-w * { box-sizing: border-box; }
.lv-w-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lv-w-title { font-weight: 700; font-size: 14px; }
.lv-w-tabs { position: relative; display: flex; background: var(--cu); border-radius: 999px; padding: 3px; }
.lv-w-tabs span { position: relative; z-index: 1; padding: 5px 11px; font-size: 11.5px; font-weight: 600; color: #3f6158; border-radius: 999px; transition: color .3s; white-space: nowrap; }
.lv-w-tabs span.is-on { color: #1a1a1a; }
.lv-w-tabs i { position: absolute; z-index: 0; top: 3px; bottom: 3px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: left .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1); }
.lv-w-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid #f0f0f2; transition: opacity .35s, transform .35s; }
.lv-w-row:first-of-type { border-top: 0; }
.lv-w-row.is-gone { opacity: 0; transform: translateX(14px); height: 0; padding: 0; overflow: hidden; border: 0; }
.lv-w-row img, .lv-w-av { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; background: var(--cu); flex: none; }
.lv-w-av { border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--tf); }
.lv-w-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-w-sub { color: var(--t3); font-size: 11px; margin-top: 1px; white-space: nowrap; }
.lv-w-end { margin-left: auto; text-align: right; flex: none; }
.lv-w-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: #e7f8ec; color: var(--green); white-space: nowrap; transition: background .3s, color .3s; }
.lv-w-pill.is-amber { background: #fff2df; color: #b26b00; }
.lv-w-pill.is-red { background: #fdeceb; color: var(--red); }
.lv-w-pill.is-blue { background: #e8f0ff; color: #1d5fd6; }
.lv-w-pill.is-dark { background: var(--tf); color: #fff; }
.lv-w-amt { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.lv-w-note { margin-top: 10px; background: var(--cu); color: var(--tf); border-radius: 12px; padding: 9px 12px; font-weight: 700; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.lv-w-btn { display: inline-block; background: var(--tf); color: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 11.5px; transition: background .3s; }
.lv-w-btn.is-done { background: var(--green); }
.lv-w-toast { position: absolute; left: 14px; right: 14px; top: -14px; transform: translateY(-8px); opacity: 0; transition: .35s ease; z-index: 3;
  background: #1a1a1a; color: #fff; border-radius: 12px; padding: 9px 12px; font-size: 12px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.lv-w-toast img { width: 20px; height: 20px; border-radius: 5px; }
.lv-w-toast.is-on { transform: none; opacity: 1; }

/* order card (Apilox app order list) */
.lv-w-order .lv-w-badges { display: flex; gap: 6px; margin: 6px 0 10px; }
.lv-w-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 12px; }
.lv-w-steps > div i { display: block; height: 4px; border-radius: 2px; background: #e0e0e2; transition: background .4s; }
.lv-w-steps > div span { display: block; font-size: 9.5px; color: #9c9c9f; margin-top: 5px; font-weight: 600; transition: color .4s; }
.lv-w-steps > div.is-done i { background: var(--tf); }
.lv-w-steps > div.is-done span { color: var(--tf); }
.lv-w-steps > div.is-now span { font-weight: 800; }
.lv-w-foot { display: flex; justify-content: space-between; align-items: center; border-top: .5px solid #c6c6c8; margin-top: 12px; padding-top: 10px;
  color: var(--tf); font-weight: 600; font-size: 13px; }

/* prescription paper */
.lv-w-rx { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.lv-w-paper { background: #fffdf6; border: 1px solid #efe7cf; border-radius: 10px; padding: 10px 9px; position: relative; overflow: hidden; }
.lv-w-paper b { font: italic 800 22px/1 Georgia, serif; color: #2c5a8c; }
.lv-w-paper i { display: block; height: 3px; border-radius: 2px; background: #c9d4e6; margin-top: 7px; }
.lv-w-paper i:nth-child(odd) { width: 70%; }
.lv-w-stamp { position: absolute; right: 6px; bottom: 8px; transform: rotate(-12deg) scale(1.6); opacity: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  border: 2px solid var(--green); color: var(--green); font: 800 10px/1 "LvSans", sans-serif; letter-spacing: .08em; padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.8); }
.lv-w-stamp.is-on { transform: rotate(-12deg) scale(1); opacity: 1; }
.lv-w-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c6c6c8; display: grid; place-items: center; color: #fff; font-size: 11px; flex: none; transition: .3s; }
.lv-w-check.is-on { background: var(--green); border-color: var(--green); }

/* ═══ section: dark Apilox app band (Minpilot dark "cards around the phone") ═══ */
.lv-dark { position: relative; background: #0b0c0c; color: #fff; overflow: hidden; padding: 7.5rem 0 0; }
.lv-dark-glow { position: absolute; left: 50%; top: 40%; width: 64rem; height: 64rem; margin-left: -32rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(40,180,36,.32), rgba(40,180,36,.08) 40%, transparent 68%); }
.lv-orbit { position: absolute; left: 50%; top: 58%; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); pointer-events: none;
  animation: lv-spin var(--lv-speed, 60s) linear infinite; }
.lv-orbit::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--lv-lime); box-shadow: 0 0 12px var(--lv-lime); }
@keyframes lv-spin { to { transform: rotate(360deg); } }
.lv-dark-stage { position: relative; margin-top: 4rem; display: grid; grid-template-columns: 1fr 19rem 1fr; gap: 3rem; align-items: center; }
.lv-dark-col { display: flex; flex-direction: column; gap: 6rem; }
.lv-dark-col.is-right { padding-top: 8rem; }
.lv-dcard { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; padding: 1.5rem;
  backdrop-filter: blur(10px); overflow: hidden; }
.lv-dcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--lv-lime), #5bffc3, #28b424); }
.lv-dcard.is-b::after { background: linear-gradient(90deg, #5bffc3, #235dfe, #a713fd); }
.lv-dcard.is-c::after { background: linear-gradient(90deg, #f36600, #bfff37); }
.lv-dcard .lv-i { font-size: 1.5rem; color: var(--lv-lime); }
.lv-dcard h4 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 .5rem; color: #fff; }
.lv-dcard p { color: #a3a3ae; font-size: .9375rem; line-height: 1.5; margin: 0; }
.lv-dark-phone { position: relative; z-index: 2; }
.lv-bigword { margin-top: 5rem; font-size: clamp(5rem, 12vw, 11rem); font-weight: 700; line-height: 1; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.22); letter-spacing: -.02em; padding-bottom: 2rem; }
.lv-bigword .lv-marquee-track { gap: 4rem; }

/* Apilox app dashboard (light) + the offline banner */
.ax-kpis { margin: 4px 16px 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.ax-kpi { padding: 16px 18px; border-top: 1px solid var(--line); }
.ax-kpi:first-child { border-top: 0; }
.ax-kpi-label { font-size: 14px; font-weight: 600; color: var(--t2); }
.ax-kpi-val { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ax-kpi-val b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ax-badge { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 9px; background: var(--green-bg); color: var(--green); }
.ax-kpi-cap { font-size: 13px; color: var(--t3); margin-top: 6px; font-weight: 500; }
.ax-actions { display: flex; gap: 10px; padding: 4px 16px 10px; align-items: center; }
.ax-pillbtn { background: var(--tf); color: #fff; border-radius: 999px; padding: 11px 18px; font-size: 14px; font-weight: 700; }
.ax-period { font-size: 13px; color: var(--t2); font-weight: 500; padding: 4px 20px 10px; }
.ax-net { margin: 0 16px 10px; border-radius: 14px; padding: 0 14px; height: 0; overflow: hidden; display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; transition: height .35s ease, background .35s, color .35s; background: #fff2df; color: #8a5300; }
.ax-net.is-on { height: 46px; }
.ax-net.is-sync { background: #e8f0ff; color: #1d5fd6; }
.ax-net.is-ok { background: var(--green-bg); color: var(--green); }
.ax-net .lv-i { font-size: 18px; }
.ax-net .ax-spin { animation: lv-spin 1s linear infinite; }
.ax-net small { margin-left: auto; font-weight: 600; opacity: .8; }

@media screen and (max-width: 991px) {
  .lv-bento { grid-template-columns: 1fr 1fr; }
  .lv-tile, .lv-tile.is-wide { grid-column: span 1; }
  .lv-tile.is-wide:first-child { grid-column: span 2; }
  .lv-bento::before { display: none; }
  .lv-dark-stage { grid-template-columns: 1fr 17rem 1fr; gap: 1.5rem; }
}
@media screen and (max-width: 767px) {
  .lv-bento { grid-template-columns: 1fr; }
  .lv-tile, .lv-tile.is-wide, .lv-tile.is-wide:first-child { grid-column: span 1; min-height: 0; }
  .lv-dark-stage { grid-template-columns: 1fr; }
  .lv-dark-phone { order: -1; width: 16rem; margin: 0 auto; }
  .lv-dark-col, .lv-dark-col.is-right { gap: 1rem; padding-top: 0; }
  .lv-dark { padding-top: 5rem; }
}

/* ═══ download cards ═══ */
.lv-dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
.lv-dl-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; border-radius: 1.5rem; border: 1px solid var(--lv-line); background: #fff;
  text-decoration: none; color: inherit; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.lv-dl-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(12,4,7,.3); border-color: transparent; }
.lv-dl-card img { width: 3rem; height: 3rem; object-fit: contain; border-radius: .8rem; margin-bottom: 1rem; }
.lv-dl-card .lv-p { flex: 1; }
.lv-dl-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-weight: 600; font-size: .9375rem; color: var(--lv-black); }
.lv-dl-card.is-dark { background: var(--lv-ink); border-color: var(--lv-ink); }
.lv-dl-card.is-dark .lv-h4, .lv-dl-card.is-dark .lv-dl-go { color: #fff; }
.lv-dl-card.is-dark .lv-dl-go { color: var(--lv-lime); }
.lv-dl-card.is-dark .lv-p { color: #a3a3ae; }

/* ═══ FAQ (Minpilot accordion, topic tabs with a sliding pill) ═══ */
.lv-faq { background: var(--lv-soft); }
.lv-faq-grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: 4rem; align-items: start; }
.lv-faq-side { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.lv-faq-help { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: 1.25rem; padding: 1.25rem; margin-top: 1rem; border: 1px solid var(--lv-line); }
.lv-faq-help b { font-size: 1.0625rem; }
.lv-faq-help .lv-p { margin-top: .25rem; }
.lv-faq-tabs { position: relative; display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: #fff; border: 1px solid var(--lv-line); margin-bottom: 1.5rem; }
.lv-faq-tabs button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: .55rem 1.1rem; border-radius: 999px;
  font: 600 .9375rem/1.2 var(--apx-font); color: var(--lv-gray); transition: color .3s; }
.lv-faq-tabs button.is-on { color: #fff; }
.lv-faq-tabs i { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; border-radius: 999px; background: var(--lv-black);
  transition: left .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1); }
.lv-faq-list { display: flex; flex-direction: column; gap: .75rem; }
.lv-faq-item { background: #fff; border-radius: 1.25rem; border: 1px solid var(--lv-line); transition: box-shadow .3s; }
.lv-faq-item[hidden] { display: none; }
.lv-faq-item.is-open { box-shadow: 0 16px 40px -24px rgba(12,4,7,.25); }
.lv-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 1.35rem 1.5rem; font: 600 1.125rem/1.35 var(--apx-font); color: var(--lv-black); }
.lv-faq-ico { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--lv-soft); transition: background .3s; }
.lv-faq-ico::before, .lv-faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: .875rem; height: 1.5px; margin: -.75px 0 0 -.4375rem;
  background: var(--lv-black); border-radius: 2px; transition: transform .35s ease, background .3s; }
.lv-faq-ico::after { transform: rotate(90deg); }
.lv-faq-item.is-open .lv-faq-ico { background: var(--lv-lime); }
.lv-faq-item.is-open .lv-faq-ico::after { transform: rotate(0deg); }
.lv-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
.lv-faq-a > * { overflow: hidden; padding: 0 1.5rem; }
.lv-faq-item.is-open .lv-faq-a { grid-template-rows: 1fr; }
.lv-faq-item.is-open .lv-faq-a > * { padding-bottom: 1.35rem; }
.lv-faq-a a { color: var(--lv-forest); font-weight: 600; }

@media screen and (max-width: 991px) {
  .lv-dl { grid-template-columns: 1fr 1fr; }
  .lv-faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .lv-faq-side { position: static; }
}
@media screen and (max-width: 479px) {
  .lv-dl { grid-template-columns: 1fr; }
  .lv-faq-tabs button { padding: .5rem .8rem; font-size: .875rem; }
  .lv-faq-q { font-size: 1rem; padding: 1.1rem 1.15rem; }
}

/* ═══ WhatsApp chat (dark WhatsApp, as on the customer's phone) ═══════════ */
.lv-wa { --wa-bg: #0b141a; --wa-bar: #1f2c34; --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef; --wa-sub: #8696a0; --wa-link: #21c063; --wa-green: #25d366;
  width: 390px; height: 844px; position: relative; background: var(--wa-bg); color: var(--wa-text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.35; display: flex; flex-direction: column; overflow: hidden; }
.lv-wa * { box-sizing: border-box; }
.lv-wa .lv-status { color: var(--wa-text); background: var(--wa-bar); }
.wa-bar { background: var(--wa-bar); display: flex; align-items: center; gap: 10px; padding: 6px 12px 10px 8px; flex: none; position: relative; z-index: 3; }
.wa-bar .lv-i { font-size: 22px; color: var(--wa-text); }
.wa-av { width: 38px; height: 38px; border-radius: 50%; background: #28b424; display: grid; place-items: center; overflow: hidden; flex: none; }
.wa-av img { width: 82%; }
.wa-who b { display: block; font-size: 16.5px; font-weight: 600; }
.wa-who small { font-size: 12.5px; color: var(--wa-sub); }
.wa-bar-r { margin-left: auto; display: flex; gap: 20px; }
.wa-feed { flex: 1; min-height: 0; overflow: hidden; position: relative;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(255,255,255,.035) 1.2px, transparent 1.3px), radial-gradient(rgba(255,255,255,.025) 1px, transparent 1.1px);
  background-size: 26px 26px, 17px 17px; background-position: 0 0, 8px 11px; }
.wa-scroll { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 8px; display: flex; flex-direction: column; gap: 6px;
  transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.wa-day { align-self: center; background: #182229; color: var(--wa-sub); font-size: 12px; padding: 5px 12px; border-radius: 8px; margin: 2px 0 6px; }
.wa-msg { max-width: 84%; padding: 6px 8px 6px 9px; border-radius: 9px; background: var(--wa-in); align-self: flex-start; position: relative;
  box-shadow: 0 1px .5px rgba(0,0,0,.13); animation: wa-in .32s cubic-bezier(.2,.8,.2,1); }
.wa-msg.is-out { background: var(--wa-out); align-self: flex-end; }
.wa-msg.is-tail::before { content: ""; position: absolute; top: 0; left: -7px; border: 8px solid transparent; border-top-color: var(--wa-in); border-right-color: var(--wa-in); border-width: 0 8px 10px 0; }
.wa-msg.is-out.is-tail::before { left: auto; right: -7px; border-color: transparent; border-top-color: var(--wa-out); border-left-color: var(--wa-out); border-width: 0 0 10px 8px; }
@keyframes wa-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.wa-msg b { font-weight: 700; }
.wa-meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: rgba(233,237,239,.6); display: inline-flex; gap: 3px; align-items: center; }
.wa-ticks { color: #53bdeb; font-size: 14px; letter-spacing: -6px; padding-right: 6px; }
.wa-img { display: block; width: 236px; height: 200px; border-radius: 6px; background: #fff center/contain no-repeat; margin: -2px -4px 6px -5px; }
.wa-img.is-photo { background-size: cover; }
.wa-acts { border-top: 1px solid rgba(255,255,255,.08); margin: 6px -8px -6px -9px; }
.wa-act { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--wa-link); font-size: 14.5px; font-weight: 500; padding: 10px; }
.wa-act + .wa-act { border-top: 1px solid rgba(255,255,255,.08); }
.wa-act .lv-i { font-size: 17px; }
.wa-quote { border-left: 4px solid #06cf9c; background: rgba(0,0,0,.18); border-radius: 6px; padding: 5px 8px; margin: -1px -3px 6px -4px; font-size: 13px; color: rgba(233,237,239,.75); }
.wa-quote b { display: block; color: #06cf9c; font-size: 12.5px; }
.wa-card { display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,.18); border-radius: 7px; padding: 6px; margin: -2px -4px 6px -5px; }
.wa-card i.wa-thumb { width: 56px; height: 56px; border-radius: 6px; background: #fff center/cover no-repeat; flex: none; display: block; }
.wa-card b { display: block; font-size: 14px; }
.wa-card small { color: var(--wa-sub); font-size: 12.5px; }
.wa-typing { align-self: flex-start; background: var(--wa-in); border-radius: 9px; padding: 11px 14px; display: flex; gap: 4px; animation: wa-in .25s ease; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-sub); animation: wa-dot 1.2s infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; } .wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.wa-input { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px 26px; background: var(--wa-bg); position: relative; z-index: 3; }
.wa-field { flex: 1; min-height: 46px; border-radius: 24px; background: var(--wa-in); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--wa-sub); font-size: 16px; }
.wa-field .lv-i { font-size: 22px; }
.wa-field-text { flex: 1; color: var(--wa-text); white-space: nowrap; overflow: hidden; }
.wa-field-text:empty::before { content: "Message"; color: var(--wa-sub); }
.wa-send { width: 46px; height: 46px; border-radius: 50%; background: var(--wa-green); display: grid; place-items: center; color: #0b141a; font-size: 21px; flex: none; }
/* list message sheet ("Choose pharmacy", "Menu") */
.wa-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: #1f2c34; border-radius: 16px 16px 0 0; padding: 10px 0 30px;
  transform: translateY(105%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.wa-sheet.is-on { transform: none; }
.wa-sheet-head { display: flex; align-items: center; gap: 12px; padding: 4px 18px 12px; font-size: 17px; font-weight: 600; }
.wa-sheet-head .lv-i { color: var(--wa-sub); font-size: 20px; }
.wa-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.06); }
.wa-row b { display: block; font-size: 15px; font-weight: 500; }
.wa-row small { color: var(--wa-sub); font-size: 12.5px; }
.wa-row .wa-radio { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--wa-sub); flex: none; transition: .2s; }
.wa-row.is-on .wa-radio { border: 6px solid var(--wa-green); }
.wa-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.wa-scrim.is-on { opacity: 1; }

/* ═══ home: hero (Minpilot Home 01 layout, Apilox greens) ═══════════════ */
.lv-home-hero { position: relative; padding: 9rem 0 0; overflow: hidden; }
.lv-home-hero .lv-container { position: relative; z-index: 1; }
.lv-home-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; min-height: 40rem; }
.lv-home-copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; padding-bottom: 3rem; }
.lv-home-copy .lv-h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); }
.lv-wa-line { display: inline-flex; align-items: center; gap: .6rem; font-size: .9375rem; color: var(--lv-gray); }
.lv-wa-line b { color: var(--lv-black); font-weight: 600; }
.lv-btn.is-wa { background: #25d366; border-color: #25d366; color: #06301a; }
.lv-btn.is-wa .lv-i { font-size: 1.3rem; }
.lv-orbit-stage { position: relative; height: 46rem; display: grid; place-items: center; }
.lv-orbit-stage .lv-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(31,72,66,.14);
  animation: lv-spin var(--lv-speed, 40s) linear infinite; }
.lv-ring > b { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--lv-green); box-shadow: 0 0 0 5px rgba(40,180,36,.15); }
.lv-ring > b.is-lime { background: #9be15d; } .lv-ring > b.is-dark { background: var(--lv-forest); }
.lv-hero-phone { position: relative; z-index: 2; width: 19rem; }
.lv-hero-phone:not(.is-3d) .lv-device { transform: rotate(-7deg); }
.lv-orbit-stage .lv-stage-card { z-index: 3; }
.lv-orbit-stage .is-a { left: -14%; top: 8%; width: 15.5rem; }
.lv-orbit-stage .is-b { right: -14%; top: 50%; }
.lv-orbit-stage .is-c { left: auto; right: calc(50% + 10rem); bottom: 16%; }
.lv-trust { position: relative; z-index: 1; padding: 2.5rem 0 3rem; }
.lv-trust-label { text-align: center; font-size: .9375rem; color: var(--lv-gray); margin-bottom: 1.25rem; }
.lv-trust-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 4.5rem; padding: 0 1.25rem; }
.lv-trust-row img { height: 3.25rem; width: auto; transition: transform .3s ease; }
.lv-trust-row img:hover { transform: translateY(-3px) scale(1.04); }
@media screen and (max-width: 479px) { .lv-trust-row { gap: 1.75rem 2.5rem; } .lv-trust-row img { height: 2.5rem; } }

@media screen and (max-width: 991px) {
  .lv-home-grid { grid-template-columns: 1fr; }
  .lv-home-copy { align-items: center; text-align: center; padding-bottom: 0; }
  .lv-orbit-stage { height: 40rem; }
}
@media screen and (max-width: 767px) {
  .lv-home-hero { padding-top: 8rem; }
  .lv-orbit-stage { height: 34rem; }
  .lv-hero-phone { width: 15.5rem; }
  .lv-orbit-stage .is-a { left: 0; top: 4%; width: 12.5rem; }
  .lv-orbit-stage .is-b { right: 0; top: auto; bottom: 16%; width: 12rem; }
  .lv-orbit-stage .is-c { display: none; }
}

/* ═══ Atlas (Flutter, dark Spotify-style) — tokens from apps/atlas/lib/core/spotify/sp_theme.dart ═══ */
@font-face { font-family: "LvFigtree"; src: url("../fonts/live/Figtree-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LvFigtree"; src: url("../fonts/live/Figtree-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "LvFigtree"; src: url("../fonts/live/Figtree-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "LvFigtree"; src: url("../fonts/live/Figtree-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "LvFigtree"; src: url("../fonts/live/Figtree-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
.lv-at { --bg: #121212; --el: #1f1f1f; --hi: #2a2a2a; --sub: #b3b3b3; --muted: #939393; --green: #1ed760;
  width: 390px; height: 844px; position: relative; background: var(--bg); color: #fff; font-family: "LvFigtree", -apple-system, sans-serif; overflow: hidden; }
.lv-at * { box-sizing: border-box; }
.lv-at .lv-status { color: #fff; background: #000; }
.at-head { height: 56px; background: #000; display: flex; align-items: center; padding: 0 16px; gap: 14px; position: relative; z-index: 4; transition: background .4s; }
.at-head img { height: 28px; }
.at-head .lv-i { margin-left: auto; font-size: 22px; }
.at-head .at-me { width: 30px; height: 30px; border-radius: 50%; background: #e91e8c; display: grid; place-items: center; font-size: 15px; }
.at-view { position: absolute; left: 0; right: 0; top: 106px; bottom: 0; transition: opacity .35s ease, transform .4s ease; overflow: hidden; }
.at-view.is-hidden { opacity: 0; transform: translateX(24px); pointer-events: none; }
.at-title { font-size: 24px; font-weight: 800; letter-spacing: -.24px; padding: 24px 16px 16px; }
.at-search { margin: 0 16px 24px; height: 48px; background: #fff; border-radius: 6px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: #121212; }
.at-search .lv-i { font-size: 22px; }
.at-search-text { font-size: 16px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; }
.at-search-text:empty::before { content: "What medicine are you looking for?"; color: #535353; }
.at-h { font-size: 16px; font-weight: 700; padding: 0 16px 14px; }
.at-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px; }
.at-tile { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; padding: 12px; font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.16px; }
.at-tile span { display: block; max-width: 58%; position: relative; z-index: 1; }
.at-tile i { position: absolute; width: 48%; aspect-ratio: 1; right: -14%; bottom: -6%; transform: rotate(25deg); border-radius: 4px; background: #fff center/cover no-repeat; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.at-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; animation: wa-in .3s ease; }
.at-row img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; background: var(--hi); flex: none; }
.at-row.is-ph img { border-radius: 50%; }
.at-row b { display: block; font-size: 16px; font-weight: 500; line-height: 22px; }
.at-row small { display: block; font-size: 14px; color: var(--sub); line-height: 20px; }
.at-row .at-price { margin-left: auto; font-size: 14px; font-weight: 700; flex: none; }
.at-hero { padding: 16px 16px 0; background: linear-gradient(180deg, var(--tint, #6b5a1e) 0%, rgba(18,18,18,0) 100%); }
.at-back { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.54); display: grid; place-items: center; font-size: 17px; margin-bottom: 8px; }
.at-cover { width: 230px; height: 230px; margin: 0 auto; background: #fff center/cover no-repeat; box-shadow: 0 4px 60px rgba(0,0,0,.5); }
.at-name { font-size: 24px; font-weight: 700; letter-spacing: -.24px; margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.at-name img { width: 20px; height: 20px; }
.at-meta { font-size: 13px; color: #fff; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.at-rx { background: rgba(255,255,255,.6); color: #000; font-size: 10px; font-weight: 800; border-radius: 2px; padding: 1px 4px; }
.at-actions { display: flex; align-items: center; gap: 18px; padding: 10px 16px 4px; color: var(--sub); font-size: 24px; }
.at-wa { margin-left: auto; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #000; display: grid; place-items: center; font-size: 28px; }
.at-sec { font-size: 20px; font-weight: 700; padding: 12px 16px 8px; }
.at-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 5; display: flex; justify-content: space-around; padding-top: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.9) 40%, #121212 100%); }
.at-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--sub); }
.at-tab .lv-i { font-size: 24px; }
.at-tab.is-on { color: #fff; }
.at-cart { position: absolute; right: 16px; bottom: 106px; z-index: 6; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #000;
  display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 24px rgba(0,0,0,.5); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.at-cart b { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: #fff; color: #000; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #121212; transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.at-cart.has b { transform: scale(1); }
.at-cart.bump { transform: scale(1.15); }
.lv-at .ax-home-ind { background: #fff; }
.wa-qrs { display: flex; flex-direction: column; gap: 4px; align-self: flex-start; width: 84%; animation: wa-in .32s cubic-bezier(.2,.8,.2,1); }
.wa-qr { background: var(--wa-in); border-radius: 9px; text-align: center; padding: 10px; color: var(--wa-link); font-weight: 500; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.wa-qrs.is-row { flex-direction: row; } .wa-qrs.is-row .wa-qr { flex: 1; }
.wa-doc { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.18); border-radius: 7px; padding: 10px; margin: -2px -4px 4px -5px; }
.wa-doc i.wa-pdf { width: 30px; height: 36px; border-radius: 3px; background: #e5484d; color: #fff; font: 700 9px/36px sans-serif; text-align: center; flex: none; font-style: normal; }
.wa-doc b { display: block; font-size: 13.5px; } .wa-doc small { color: var(--wa-sub); font-size: 12px; }
.wa-rxphoto { width: 220px; height: 250px; border-radius: 6px; margin: -2px -4px 4px -5px; background: #f7f2e3; position: relative; overflow: hidden; padding: 18px 16px; color: #2c5a8c; }
.wa-rxphoto::before { content: "℞"; font: italic 800 34px/1 Georgia, serif; }
.wa-rxphoto i { display: block; height: 4px; border-radius: 2px; background: #b9c8de; margin-top: 12px; transform: rotate(-1deg); }
.wa-rxphoto i:nth-child(2n) { width: 72%; } .wa-rxphoto i:nth-child(3n) { width: 54%; }
.wa-rxphoto b { position: absolute; right: 16px; bottom: 18px; font: italic 600 15px/1 Georgia, serif; color: #1f3f6b; transform: rotate(-6deg); }

/* ═══ home: pharmacies near you (dotted Tanzania map + pins) and the four steps ═══ */
.lv-map { position: relative; max-width: 46rem; margin: 3.5rem auto 0; }
.lv-map-dots { display: block; width: 100%; height: auto; }
.lv-map-dots circle { fill: var(--lv-forest); opacity: .16; }
.lv-map-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }
.lv-pin { position: absolute; transform: translate(-50%, -100%); z-index: 2; width: max-content; }
.lv-pin-card { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: .875rem; padding: .45rem .75rem .45rem .45rem;
  box-shadow: 0 14px 30px -12px rgba(12,4,7,.3), 0 0 0 1px rgba(12,4,7,.05); white-space: nowrap; font-size: .8125rem; position: relative; }
.lv-pin-card::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.lv-pin-card img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; background: var(--lv-cumulus); }
.lv-pin-card b { display: block; font-weight: 600; color: var(--lv-black); }
.lv-pin-card small { color: var(--lv-gray); font-size: .75rem; }
.lv-pin-dot { position: absolute; left: 50%; bottom: -1.1rem; width: .75rem; height: .75rem; margin-left: -.375rem; border-radius: 50%; background: var(--lv-green);
  box-shadow: 0 0 0 0 rgba(40,180,36,.5); animation: lv-ping 2.2s ease-out infinite; }
@keyframes lv-ping { 0% { box-shadow: 0 0 0 0 rgba(40,180,36,.55); } 100% { box-shadow: 0 0 0 16px rgba(40,180,36,0); } }
.lv-steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 4rem; }
.lv-step4 { display: flex; flex-direction: column; gap: .75rem; }
.lv-step4-ico { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--lv-forest); color: var(--lv-lime); display: grid; place-items: center; font-size: 1.35rem; }
.lv-step4 .lv-num { font-size: .8125rem; font-weight: 600; color: var(--lv-gray); }

/* ═══ home: prescription section (sticky phone, steps fill as you scroll) ═══ */
.lv-rx { background: var(--lv-ink); color: #fff; overflow: hidden; position: relative; }
.lv-rx .lv-h2, .lv-rx .lv-h4 { color: #fff; } .lv-rx .lv-p { color: #a3a3ae; }
.lv-rx-grid { display: grid; grid-template-columns: 1fr 22rem; gap: 5rem; align-items: center; }
.lv-rx-steps { position: relative; margin-top: 2.5rem; padding-left: 2.25rem; display: flex; flex-direction: column; gap: 1.75rem; }
.lv-rx-line { position: absolute; left: .7rem; top: .5rem; bottom: .5rem; width: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.lv-rx-line i { display: block; width: 100%; height: var(--p, 0%); background: linear-gradient(var(--lv-lime), var(--lv-green)); transition: height .2s linear; }
.lv-rx-step { position: relative; opacity: .45; transition: opacity .4s; }
.lv-rx-step.is-on { opacity: 1; }
.lv-rx-step::before { content: ""; position: absolute; left: -2.05rem; top: .3rem; width: .9rem; height: .9rem; border-radius: 50%; background: #2a2b2d;
  border: 2px solid rgba(255,255,255,.2); transition: .4s; }
.lv-rx-step.is-on::before { background: var(--lv-lime); border-color: var(--lv-lime); box-shadow: 0 0 14px rgba(191,255,55,.6); }
.lv-rx-step .lv-p { margin-top: .35rem; }
.lv-rx-note { margin-top: 2.25rem; display: flex; gap: .75rem; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; padding: 1rem 1.15rem; font-size: .9375rem; color: #d7dbd9; line-height: 1.5; }
.lv-rx-note .lv-i { color: var(--lv-lime); font-size: 1.3rem; flex: none; margin-top: .1rem; }

/* ═══ home: split section (copy + live phone with satellite cards) ═══ */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.lv-split.is-flip > :first-child { order: 2; }
.lv-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .875rem 1.5rem; }
.lv-checks li { display: flex; gap: .6rem; align-items: flex-start; font-size: 1rem; color: var(--lv-black); line-height: 1.4; }
.lv-checks li::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; border-radius: 50%; background: var(--lv-forest)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%23bfff37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.lv-phone-stage { position: relative; display: grid; place-items: center; padding: 2rem 0; }
.lv-phone-stage .lv-device { width: 19rem; position: relative; z-index: 2; }
.lv-phone-stage .lv-blob { position: absolute; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, rgba(191,255,55,.55), rgba(40,180,36,.18) 50%, transparent 70%); filter: blur(10px); }
.lv-phone-stage .lv-stage-card { z-index: 3; }
.lv-phone-stage .is-a { left: 0; top: 18%; width: 15rem; }
.lv-phone-stage .is-b { right: 0; bottom: 16%; width: 15rem; }

/* ═══ home: for pharmacies (Minpilot numbered tabs on our gradient panel) ═══ */
.lv-ops { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: center; margin-top: 3.5rem; }
.lv-op { border-bottom: 1px solid var(--lv-line); cursor: pointer; padding: 1.1rem 0; position: relative; }
.lv-op-head { display: flex; gap: 1rem; align-items: baseline; font-size: 1.25rem; font-weight: 600; color: var(--lv-gray); transition: color .3s; }
.lv-op-head small { font-size: .8125rem; font-weight: 600; color: var(--lv-gray); }
.lv-op.is-on .lv-op-head { color: var(--lv-black); }
.lv-op-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.lv-op-body > p { overflow: hidden; margin: 0; padding-left: 2.1rem; }
.lv-op.is-on .lv-op-body { grid-template-rows: 1fr; }
.lv-op.is-on .lv-op-body > p { padding-top: .6rem; }
.lv-op-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--lv-forest); }
.lv-op.is-on .lv-op-bar { animation: lv-opbar var(--lv-op-dur, 7s) linear forwards; }
@keyframes lv-opbar { to { width: 100%; } }
.lv-ops-panel { position: relative; border-radius: 1.75rem; padding: 3rem 2.5rem; min-height: 32rem; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 15% 15%, #bfff37 0%, transparent 60%), radial-gradient(55% 60% at 90% 25%, #5bffc3 0%, transparent 60%),
    radial-gradient(60% 70% at 70% 100%, #28b424 0%, transparent 65%), radial-gradient(50% 60% at 10% 95%, #97f05e 0%, transparent 60%), #e9f8e4; }
.lv-ops-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(circle, #000, transparent 75%);
  mask-image: radial-gradient(circle, #000, transparent 75%); }
.lv-ops-pane { width: 100%; max-width: 25rem; display: none; animation: lv-pane .5s cubic-bezier(.2,.7,.2,1); }
.lv-ops-pane.is-on { display: block; }
@keyframes lv-pane { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }

/* ═══ home: video (the card widens to full width as you scroll; plays in the pop-up) ═══ */
.lv-video { padding: 3rem 0 7rem; overflow: hidden; }
.lv-video-card { position: relative; margin: 3rem auto 0; width: var(--w, 38%); max-width: 100%; aspect-ratio: 16 / 8; border-radius: var(--r, 2rem); overflow: hidden;
  cursor: pointer; background: #0b1a14 center/cover no-repeat; transition: width .15s linear, border-radius .15s linear; }
.lv-video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.45)); }
.lv-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem; margin: -2.75rem 0 0 -2.75rem; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: lv-ping-w 2.4s ease-out infinite; transition: transform .3s; }
.lv-play svg { width: 1.6rem; height: 1.6rem; margin-left: .25rem; fill: var(--lv-black); }
.lv-video-card:hover .lv-play { transform: scale(1.08); }
@keyframes lv-ping-w { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 26px rgba(255,255,255,0); } }
.lv-video-cap { position: absolute; z-index: 1; left: 2rem; bottom: 1.75rem; color: #fff; font-size: 1.125rem; font-weight: 500; }

@media screen and (max-width: 991px) {
  .lv-rx-grid, .lv-split, .lv-ops { grid-template-columns: 1fr; gap: 3rem; }
  .lv-split.is-flip > :first-child { order: 0; }
  .lv-steps4 { grid-template-columns: 1fr 1fr; }
  .lv-rx-grid .lv-device { max-width: 19rem; margin: 0 auto; }
}
@media screen and (max-width: 767px) {
  .lv-steps4, .lv-checks { grid-template-columns: 1fr; }
  .lv-pin-card small { display: none; }
  .lv-pin-card { font-size: .6875rem; padding: .3rem .5rem .3rem .3rem; }
  .lv-pin-card img { width: 1.4rem; height: 1.4rem; }
  .lv-video-card { --w: 100% !important; aspect-ratio: 4 / 3; }
  .lv-phone-stage .lv-stage-card { display: none; }
  .lv-ops-panel { padding: 2rem 1rem; min-height: 26rem; }
}
/* a pin near the right edge: card opens to the left of its dot */
.lv-pin.is-right { transform: translate(-88%, -100%); }
.lv-pin.is-right .lv-pin-dot { left: 88%; }
.lv-pin.is-right .lv-pin-card::after { left: 88%; }

/* a photographed phone (live_assets.device_mockup): the live screen sits in its window, in perspective */
.lv-phone3d .lv-fit { position: relative; overflow: visible; }
.lv-phone3d .lv-screen { z-index: 1; transform-origin: 0 0; border-radius: 0; }
.lv-phone3d .lv-shell { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.lv-phone3d .lv-fit::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 8%; top: 6%; bottom: 2%; border-radius: 18%/8%;
  box-shadow: 0 50px 80px -10px rgba(12,40,20,.35), 0 12px 24px rgba(12,40,20,.18); }
.lv-hero-phone.is-3d { width: 19rem; margin-left: 1rem; }
@media screen and (max-width: 767px) { .lv-hero-phone.is-3d { width: 16rem; margin-left: 0; } }

/* WhatsApp light theme (white screen) */
.lv-wa.is-light { --wa-bg: #efeae2; --wa-bar: #ffffff; --wa-in: #ffffff; --wa-out: #d9fdd3; --wa-text: #111b21; --wa-sub: #667781; --wa-link: #008069; --wa-green: #00a884; }
.lv-wa.is-light .wa-feed { background-image: radial-gradient(rgba(17,27,33,.06) 1.2px, transparent 1.3px), radial-gradient(rgba(17,27,33,.04) 1px, transparent 1.1px); }
.lv-wa.is-light .wa-bar { box-shadow: 0 1px 0 rgba(17,27,33,.08); }
.lv-wa.is-light .wa-day { background: #ffffff; color: #54656f; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.lv-wa.is-light .wa-meta { color: #667781; }
.lv-wa.is-light .wa-acts { border-top-color: rgba(17,27,33,.1); }
.lv-wa.is-light .wa-act + .wa-act { border-top-color: rgba(17,27,33,.1); }
.lv-wa.is-light .wa-card, .lv-wa.is-light .wa-doc, .lv-wa.is-light .wa-quote { background: rgba(11,20,26,.05); }
.lv-wa.is-light .wa-doc b { color: #111b21; }
.lv-wa.is-light .wa-input { background: var(--wa-bg); }
.lv-wa.is-light .wa-field { background: #ffffff; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.lv-wa.is-light .wa-send { color: #fff; }
.lv-wa.is-light .wa-sheet { background: #ffffff; color: #111b21; box-shadow: 0 -8px 30px rgba(0,0,0,.12); }
.lv-wa.is-light .wa-row { border-top-color: rgba(17,27,33,.08); }
.lv-wa.is-light .wa-row .wa-radio { border-color: #8696a0; }
.lv-wa.is-light .wa-scrim.is-on { opacity: .6; }
.lv-wa.is-light .wa-img { box-shadow: 0 0 0 1px rgba(11,20,26,.06); }
.lv-wa.is-light .wa-msg.is-tail::before { border-top-color: var(--wa-in); border-right-color: var(--wa-in); }
.lv-wa.is-light .wa-msg.is-out.is-tail::before { border-top-color: var(--wa-out); border-left-color: var(--wa-out); border-right-color: transparent; }
.lv-wa.is-light .lv-status { color: #111b21; }
.lv-wa.is-light .wa-typing { box-shadow: 0 1px .5px rgba(11,20,26,.13); }

/* a floating card as a pill: round ends, the icon in a black circle, one line of text */
.lv-float-card.is-pill { border-radius: 999px; padding: .5rem 1.25rem .5rem .5rem; display: inline-flex; }
.lv-float-card.is-pill .lv-fc-head { gap: .75rem; }
.lv-float-card.is-pill .lv-fc-title { white-space: nowrap; font-size: 1rem; }
.lv-fc-ico.is-black { background: var(--lv-black); color: #fff; border-radius: 50%; width: 2.5rem; height: 2.5rem; }
.lv-orbit-stage .is-a { width: auto; }

/* the pill that peeks out from behind the hero phone (by its volume buttons) and hides again */
.lv-hero-phone .lv-device { position: relative; z-index: 2; }
.lv-peek { position: absolute; z-index: 1; left: 0; top: 19%; }
.lv-peek .lv-float-card { transform: translateX(-3.35rem); background-color: transparent; box-shadow: none; animation: lv-peek 9s cubic-bezier(.65,0,.35,1) infinite; animation-delay: 2s; }
@keyframes lv-peek {        /* hidden: only the black icon shows -- the pill's white and shadow fade away */
  0%, 12% { transform: translateX(-3.35rem); background-color: rgba(255,255,255,0); box-shadow: none; }
  20%, 64% { transform: translateX(calc(-100% - 1.25rem)); background-color: #fff;
             box-shadow: 0 24px 60px -12px rgba(12,4,7,.22), 0 0 0 1px rgba(12,4,7,.05); }
  74%, 100% { transform: translateX(-3.35rem); background-color: rgba(255,255,255,0); box-shadow: none; }
}
.lv-peek .lv-fc-ico.is-black { box-shadow: 0 6px 16px -4px rgba(12,4,7,.4); }
@media (prefers-reduced-motion: reduce) { .lv-peek .lv-float-card { animation: none; transform: translateX(calc(-100% - 1.25rem)); } }

/* ═══ hero: Atlas's after-delivery rating, as a white square card. The faces "tap" themselves one after
   another (live.js ratings), then Thanks!; a visitor can tap one too. ═══ */
.lv-rate { width: 15.5rem; aspect-ratio: 1; position: relative; }
.lv-rate-in { position: relative; width: 100%; height: 100%; }
.lv-rate-front, .lv-rate-back { position: absolute; inset: 0; border-radius: 1.5rem; background: #fff; color: var(--lv-black); font-family: var(--apx-font);
  box-shadow: 0 30px 60px -20px rgba(12,4,7,.28), 0 0 0 1px rgba(12,4,7,.05); transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.3,.64,1); }
.lv-rate-front { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.2rem .75rem .75rem; text-align: center; }
.lv-rate-back { opacity: 0; transform: scale(.9); pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 1rem; }
.lv-rate.is-done .lv-rate-front { opacity: 0; transform: scale(.94); }
.lv-rate.is-done .lv-rate-back { opacity: 1; transform: none; }
.lv-rate-q { font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.lv-rate-sub { font-size: .75rem; color: var(--lv-gray); margin-top: .2rem; }
.lv-rate-faces { display: flex; justify-content: space-around; width: 100%; }
.lv-mood { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font: 600 .72rem/1 var(--apx-font); color: var(--tint); transition: opacity .35s, transform .35s, filter .35s; }
.lv-face { width: 3.6rem; height: 3.6rem; border-radius: 50%; filter: drop-shadow(0 8px 10px rgba(120,70,0,.28)) drop-shadow(0 2px 2px rgba(120,70,0,.25));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); animation: lv-bob 3.2s ease-in-out infinite; }
.lv-mood:nth-child(2) .lv-face { animation-delay: -1.05s; } .lv-mood:nth-child(3) .lv-face { animation-delay: -2.1s; }
@keyframes lv-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-6deg); } }
.lv-mood:hover .lv-face, .lv-mood:focus-visible .lv-face { animation: none; transform: translateY(-6px) scale(1.12) rotate(-8deg); }
.lv-mood:focus-visible { outline: none; }
.lv-rate.is-picking .lv-mood:not(.is-on) { opacity: .3; filter: grayscale(.85); transform: scale(.9); }
.lv-rate.is-picking .lv-mood.is-on .lv-face { animation: lv-pick .9s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes lv-pick { 0% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.32) translateY(-8px) rotate(-12deg); } 100% { transform: scale(1.2) translateY(-6px) rotate(0); } }
.lv-tap-ring { position: absolute; left: 50%; top: 1.8rem; width: 3.6rem; height: 3.6rem; margin-left: -1.8rem; border-radius: 50%; border: 2px solid var(--tint);
  pointer-events: none; animation: lv-ring .7s ease-out forwards; }
@keyframes lv-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.lv-mood { position: relative; }
.lv-rate-later { font-size: .72rem; font-weight: 500; color: var(--lv-gray); }
.lv-rate-check { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #e7f8ec; display: grid; place-items: center; color: #1f9254; font-size: 2.5rem; }
.lv-rate.is-done .lv-rate-check { animation: lv-check .6s .2s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes lv-check { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lv-rate-back b { font-size: 1.25rem; font-weight: 600; }
.lv-rate-back small { font-size: .78rem; color: var(--lv-gray); line-height: 1.35; max-width: 11rem; }
.lv-orbit-stage .is-b { width: auto; }

/* ═══ hero: scannable receipt -- a tiny QR by the phone that opens into the full card when clicked ═══ */
.lv-qrcard { appearance: none; border: 0; cursor: pointer; font: inherit; text-align: center; background: #fff; border-radius: 1rem; padding: .45rem;
  box-shadow: 0 18px 40px -12px rgba(12,4,7,.25), 0 0 0 1px rgba(12,4,7,.05); display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 3.9rem; transition: width .55s cubic-bezier(.34,1.3,.64,1), padding .45s ease, border-radius .45s ease, gap .45s ease; }
.lv-qrcard.is-open { width: 12.5rem; padding: 1rem 1rem .9rem; border-radius: 1.5rem; gap: .7rem; }
.lv-qrbox { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; transition: padding .45s ease; }
.lv-qrcard.is-open .lv-qrbox { padding: .7rem; }
.lv-qrbox img { display: block; width: 100%; height: 100%; }
.lv-qrbox > i { position: absolute; width: 1.4rem; height: 1.4rem; border: 3px solid var(--lv-green); opacity: 0; transition: opacity .3s .2s; }
.lv-qrcard.is-open .lv-qrbox > i { opacity: 1; }
.lv-qrbox > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: .55rem 0 0 0; }
.lv-qrbox > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 .55rem 0 0; }
.lv-qrbox > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 .55rem; }
.lv-qrbox > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 .55rem 0; }
.lv-qrscan { position: absolute; left: .4rem; right: .4rem; height: 2px; top: .6rem; background: linear-gradient(90deg, transparent, var(--lv-green), transparent);
  box-shadow: 0 0 10px var(--lv-green); animation: sx-scan 2.8s ease-in-out infinite; opacity: 0; transition: opacity .3s; }
.lv-qrcard.is-open .lv-qrscan { opacity: 1; }
.lv-qrlabel { display: block; max-height: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-weight: 600; font-size: 1rem; color: var(--lv-black);
  transition: max-height .45s ease, opacity .3s ease; }
.lv-qrcard.is-open .lv-qrlabel { max-height: 1.6rem; opacity: 1; transition-delay: .15s; }
.lv-qrcard:not(.is-open):hover { transform: scale(1.06); }
.lv-orbit-stage .is-c { width: auto; }
@keyframes sx-scan { 0%, 100% { top: .6rem; } 50% { top: calc(100% - .6rem); } }
@media screen and (max-width: 767px) {
  .lv-rate { width: 12.5rem; } .lv-face { width: 2.9rem; height: 2.9rem; } .lv-rate-q { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .lv-face, .lv-qrscan { animation: none; } }

/* the tiny receipt: a sharp little square with a chat-bubble tail pointing at the phone */
.lv-qrcard { position: relative; }
.lv-qrcard:not(.is-open) { width: 2.6rem; padding: .25rem; border-radius: 0; }
.lv-qrcard::after { content: ""; position: absolute; right: -9px; top: 0; border-left: 10px solid #fff; border-bottom: 10px solid transparent;
  filter: drop-shadow(2px 1px 1px rgba(12,4,7,.06)); transition: opacity .25s; }
.lv-qrcard.is-open::after { opacity: 0; }

/* the rating card comes out from behind the phone for each tap, and goes back in between */
.lv-orbit-stage .lv-stage-card.is-b { z-index: 1; transition: z-index 0s .35s; }
.lv-orbit-stage .lv-stage-card.is-b.is-front { z-index: 3; transition: z-index 0s .25s; }
.lv-rate { transform: translateX(-62%) scale(.62); opacity: 0;
  transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .5s ease; }
.lv-stage-card.is-front .lv-rate { transform: none; opacity: 1; transition: transform .75s cubic-bezier(.34,1.25,.64,1), opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { .lv-rate { transform: none; opacity: 1; } }
/* programmes strip: one screen-wide set of four slots, so each logo shows once at a time while it moves */
.lv-trust-flow .lv-marquee-track { gap: 0; }
.lv-trust-flow span { width: 25vw; display: flex; justify-content: center; align-items: center; flex: none; }
.lv-trust-flow img { height: 3.25rem; width: auto; max-width: 70%; object-fit: contain; }
@media screen and (max-width: 767px) { .lv-trust-flow span { width: 50vw; } .lv-trust-flow img { height: 2.6rem; } }
.lv-trust { padding: 5.5rem 0 3.5rem; }
.lv-trust-label { margin-bottom: 2rem; }
.lv-trust-flow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.lv-trust-flow img { height: 4.25rem; max-width: 80%; }
@media screen and (max-width: 767px) { .lv-trust { padding-top: 3.5rem; } .lv-trust-flow img { height: 3rem; } }

/* ═══ home: the zoom map (pinned while the camera flies from the world into Tanzania) ═══ */
.lv-zoom { position: relative; height: 320vh; }
.lv-zoom-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.lv-zoom-head { padding-top: 6.5rem; gap: 1rem; flex: none; }
.lv-zoom-head .lv-h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.lv-zoom-stage { position: relative; flex: 1; min-height: 0; margin: 1rem 0 1.5rem; }
.lv-zoom-stage canvas { position: absolute; inset: 0; display: block; }
.lv-zoom-label { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; background: var(--lv-black); color: #fff; font-weight: 600; font-size: .9375rem;
  padding: .45rem .9rem; border-radius: 999px; box-shadow: 0 10px 24px -8px rgba(12,4,7,.4); white-space: nowrap; }
.lv-zoom-stage .lv-pin { opacity: 0; transition: opacity .4s ease; }
.lv-zoom-stage .lv-pin .lv-pin-card { transform: scale(.4) translateY(10px); transition: transform .55s cubic-bezier(.34,1.56,.64,1); transform-origin: 50% 100%; }
.lv-zoom-stage .lv-pin.is-on { opacity: 1; }
.lv-zoom-stage .lv-pin.is-on .lv-pin-card { transform: none; }
@media screen and (max-width: 767px) {
  .lv-zoom { height: 260vh; }
  .lv-zoom-head { padding-top: 5.5rem; }
  .lv-zoom-head .lv-p { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lv-zoom { height: auto; } .lv-zoom-sticky { position: relative; height: 90vh; } }
/* a pin whose card opens to the right of its dot */
.lv-pin.is-left { transform: translate(-12%, -100%); }
.lv-pin.is-left .lv-pin-dot { left: 12%; }
.lv-pin.is-left .lv-pin-card::after { left: 12%; }
@media screen and (max-width: 767px) {   /* no room on the right on phones: Dar es Salaam's card opens to the left */
  .lv-zoom-stage .lv-pin.is-left { transform: translate(-88%, -100%); }
  .lv-zoom-stage .lv-pin.is-left .lv-pin-dot, .lv-zoom-stage .lv-pin.is-left .lv-pin-card::after { left: 88%; }
  .lv-zoom-stage .lv-pin.is-right { transform: translate(-50%, -100%); }
  .lv-zoom-stage .lv-pin.is-right .lv-pin-dot, .lv-zoom-stage .lv-pin.is-right .lv-pin-card::after { left: 50%; }
}
.lv-rx-phone { width: 19rem; margin: 0 auto; }
.lv-rx-phone .lv-fit::before { box-shadow: 0 50px 90px -10px rgba(0,0,0,.6), 0 0 60px rgba(40,180,36,.12); }

/* ═══ home: prescriptions as a Minpilot grid ═══════════════════════════ */
.lv-rxb { background: var(--lv-soft); }
.lv-rxb .lv-tile { min-height: 25rem; }
/* 1. the camera viewfinder over a prescription: scan, flash, "Photo 1 received" */
.lv-snap { position: relative; width: 100%; max-width: 26rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lv-snap-view { position: relative; width: 13rem; height: 11rem; border-radius: 1rem; background: #1a1d1b; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 20px 40px -18px rgba(12,4,7,.5); }
.lv-snap-view > i { position: absolute; width: 1.5rem; height: 1.5rem; border: 3px solid var(--lv-lime); z-index: 2; }
.lv-snap-view > i:nth-child(1) { left: .7rem; top: .7rem; border-right: 0; border-bottom: 0; border-radius: .5rem 0 0 0; }
.lv-snap-view > i:nth-child(2) { right: .7rem; top: .7rem; border-left: 0; border-bottom: 0; border-radius: 0 .5rem 0 0; }
.lv-snap-view > i:nth-child(3) { left: .7rem; bottom: .7rem; border-right: 0; border-top: 0; border-radius: 0 0 0 .5rem; }
.lv-snap-view > i:nth-child(4) { right: .7rem; bottom: .7rem; border-left: 0; border-top: 0; border-radius: 0 0 .5rem 0; }
.lv-rxpaper { width: 7.5rem; height: 8.5rem; background: #f7f2e3; border-radius: .25rem; padding: .7rem .65rem; transform: rotate(-4deg); position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,.35); animation: lv-rxsettle 6s ease-in-out infinite; }
.lv-rxpaper b { font: italic 800 1.5rem/1 Georgia, serif; color: #2c5a8c; }
.lv-rxpaper span { display: block; height: 3px; border-radius: 2px; background: #b9c8de; margin-top: .55rem; }
.lv-rxpaper span:nth-of-type(2n) { width: 70%; } .lv-rxpaper span:nth-of-type(3n) { width: 52%; }
.lv-rxpaper em { position: absolute; right: .55rem; bottom: .5rem; font: italic 600 .65rem/1 Georgia, serif; color: #1f3f6b; transform: rotate(-6deg); }
@keyframes lv-rxsettle { 0%, 100% { transform: rotate(-6deg) translateY(4px) scale(.96); } 30%, 70% { transform: rotate(-3deg) translateY(0) scale(1); } }
.lv-snap .lv-qrscan { opacity: 1; z-index: 2; left: 1.2rem; right: 1.2rem; animation: lv-snapscan 6s ease-in-out infinite; }
@keyframes lv-snapscan { 0%, 10% { top: 1rem; opacity: 0; } 15% { opacity: 1; } 40% { top: calc(100% - 1rem); } 45%, 100% { opacity: 0; top: calc(100% - 1rem); } }
.lv-snap-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 3; animation: lv-flash 6s ease-out infinite; }
@keyframes lv-flash { 0%, 46% { opacity: 0; } 48% { opacity: .9; } 60%, 100% { opacity: 0; } }
.lv-snap-chip { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 1rem; padding: .6rem .7rem; box-shadow: 0 16px 36px -16px rgba(12,4,7,.3);
  animation: lv-snapchip 6s cubic-bezier(.34,1.3,.64,1) infinite; }
@keyframes lv-snapchip { 0%, 50% { opacity: 0; transform: translateY(12px) scale(.95); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
.lv-snap-thumb { width: 2.4rem; height: 2.8rem; border-radius: .3rem; background: #f7f2e3 linear-gradient(transparent 30%, #b9c8de 30% 36%, transparent 36% 52%, #b9c8de 52% 58%, transparent 58%); flex: none; }
.lv-snap-chip b { display: block; font-size: .9375rem; } .lv-snap-chip small { color: var(--lv-gray); font-size: .8125rem; }
.lv-snap-done { margin-left: auto; color: #008069; font-weight: 600; font-size: .875rem; padding: .35rem .7rem; border-radius: .6rem; background: #e7f8ec; }
/* 3. the approval as WhatsApp bubbles (dark) */
.lv-bubbles { width: 100%; display: flex; flex-direction: column; gap: .4rem; padding: 1rem; border-radius: 1rem; background: #0b141a;
  background-image: radial-gradient(rgba(255,255,255,.035) 1.2px, transparent 1.3px); background-size: 22px 22px; }
.lv-bubble { position: relative; max-width: 92%; background: #202c33; color: #e9edef; border-radius: .6rem; padding: .55rem .7rem 1.1rem; font: .8125rem/1.4 "Segoe UI", Roboto, sans-serif; }
.lv-bubble b { display: block; margin-bottom: .25rem; }
.lv-bubble span { position: absolute; right: .55rem; bottom: .3rem; font-size: .65rem; color: #8696a0; }
.lv-tile.lv-in .lv-bubble { animation: wa-in .5s .6s both cubic-bezier(.2,.8,.2,1); }
.lv-tile.lv-in .lv-bubble.is-2 { animation-delay: 1.2s; }
/* 4. pay */
.lv-pay { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.lv-pay-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.lv-pay-logos img, .lv-pay-logos span { width: 3.1rem; height: 3.1rem; border-radius: .8rem; object-fit: cover; background: #fff; box-shadow: 0 8px 18px -10px rgba(12,4,7,.35), 0 0 0 1px rgba(12,4,7,.05);
  animation: lv-bob 3.4s ease-in-out infinite; }
.lv-pay-logos > :nth-child(2) { animation-delay: -.7s; } .lv-pay-logos > :nth-child(3) { animation-delay: -1.4s; } .lv-pay-logos > :nth-child(4) { animation-delay: -2.1s; } .lv-pay-logos > :nth-child(5) { animation-delay: -2.8s; }
.lv-pay-logos span { display: grid; place-items: center; font-size: 1.5rem; color: var(--lv-forest); background: var(--lv-cumulus); }
.lv-pay-btn { background: var(--lv-forest); color: #fff; font-weight: 600; border-radius: 999px; padding: .7rem 2rem; animation: lv-ping-g 2.2s ease-out infinite; }
@keyframes lv-ping-g { 0% { box-shadow: 0 0 0 0 rgba(31,72,66,.45); } 100% { box-shadow: 0 0 0 16px rgba(31,72,66,0); } }
/* 5. pickup */
.lv-pickup { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lv-pickup-note { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 1rem; padding: .7rem .9rem; width: 100%;
  box-shadow: 0 16px 36px -18px rgba(12,4,7,.3), 0 0 0 1px rgba(12,4,7,.04); }
.lv-pickup-note b { display: block; font-size: .9375rem; } .lv-pickup-note small { color: var(--lv-gray); font-size: .8125rem; }
.lv-pickup-qr { display: flex; align-items: center; gap: .7rem; font-size: .8125rem; color: var(--lv-gray); }
.lv-pickup-qr img { width: 4.25rem; height: 4.25rem; padding: .3rem; background: #fff; border-radius: .5rem; box-shadow: 0 0 0 1px rgba(12,4,7,.06); }
@media (prefers-reduced-motion: reduce) { .lv-rxpaper, .lv-snap .lv-qrscan, .lv-snap-flash, .lv-snap-chip, .lv-pay-logos > *, .lv-pay-btn { animation: none; } .lv-snap-chip { opacity: 1; } }

/* Pathways: a full-width tile, copy on the left, the two cards floating on the right */
.lv-tile.is-full { grid-column: 1 / -1; }
.lv-pathways { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding: 2.5rem 2.5rem 2.5rem 3rem; min-height: 0; overflow: hidden;
  background: radial-gradient(70% 90% at 85% 50%, #eaf8e3 0%, #fff 70%); }
.lv-pathways-copy { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.lv-pathways .lv-checks { margin-top: .5rem; }
.lv-soon { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; color: var(--lv-forest); background: var(--lv-cumulus);
  border-radius: 999px; padding: .35rem .8rem; }
.lv-soon i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lv-green); animation: lv-ping 2s ease-out infinite; }
.lv-pathways-art { position: relative; display: grid; place-items: center; perspective: 1000px; }
.lv-pathways-art .lv-blob { position: absolute; width: 22rem; height: 22rem; border-radius: 50%; filter: blur(30px); opacity: .7;
  background: radial-gradient(circle, rgba(191,255,55,.6), rgba(40,180,36,.15) 55%, transparent 70%); }
.lv-pathways-art img { position: relative; width: 100%; max-width: 30rem; height: auto; transform-style: preserve-3d;
  animation: lv-cards 7s ease-in-out infinite; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.lv-pathways:hover .lv-pathways-art img { animation-play-state: paused; transform: rotateY(-12deg) rotateX(8deg) scale(1.04); }
@keyframes lv-cards { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(-2deg); } }
@media screen and (max-width: 991px) { .lv-pathways { grid-template-columns: 1fr; padding: 2rem; } .lv-pathways-art { order: -1; } }
@media (prefers-reduced-motion: reduce) { .lv-pathways-art img, .lv-soon i { animation: none; } }

/* ═══ Apilox PRO prescription review (APILOX_PRO/prescription-review.html "book" panel) ═══ */
.lv-prx { --tf: #1f4842; --cu: #ecf4e9; --line: #e6e6e6; --t2: #6b6f6e; --t3: #9a9c9b; --amber: #c88a2c; --green: #1f9254; --green-bg: #e7f8ec; --red: #f73540; --red-bg: #fdeceb;
  position: relative; width: 100%; background: #fff; border: 1px solid var(--line); font-family: "LvSans", -apple-system, "Segoe UI", sans-serif; color: #1a1a1a;
  font-size: 12px; line-height: 1.35; box-shadow: 0 24px 50px -24px rgba(12,4,7,.3); overflow: hidden; text-align: left; }
.lv-prx * { box-sizing: border-box; }
.prx-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--t2); }
.prx-head b { color: #1a1a1a; }
.prx-x { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; }
.prx-book { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 21.5rem; perspective: 900px; }
.prx-left { padding: 11px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); }
.prx-photo { display: block; width: 46px; height: 60px; background: #f7f2e3; border: 1px solid var(--line); padding: 5px; position: relative; overflow: hidden; }
.prx-photo b { font: italic 800 13px/1 Georgia, serif; color: #2c5a8c; }
.prx-photo i { display: block; height: 2px; background: #b9c8de; margin-top: 4px; }
.prx-photo i:nth-of-type(2n) { width: 70%; }
.prx-photo em { position: absolute; right: 3px; bottom: 3px; font: italic 600 5px/1 Georgia, serif; color: #1f3f6b; }
.prx-sum { background: var(--cu); border: 1px solid var(--line); padding: 8px 9px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.prx-sum b { display: block; font-size: 12px; font-weight: 800; }
.prx-sum small { font-size: 10px; color: var(--t2); }
.prx-pill { color: #fff; font-size: 9.5px; font-weight: 800; padding: 5px 9px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; transition: background .4s; }
.prx-pill.is-pending { background: var(--amber); } .prx-pill.is-approved { background: var(--green); }
.prx-contact { display: flex; gap: 8px; align-items: center; }
.prx-av { width: 28px; height: 28px; border-radius: 50%; background: var(--cu); color: var(--tf); font-weight: 700; font-size: 11px; display: grid; place-items: center; flex: none; }
.prx-contact b { display: block; font-size: 11.5px; } .prx-contact small { font-size: 9.5px; color: var(--t3); }
.prx-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid rgba(31,72,66,.1); }
.prx-row b { display: block; font-size: 11.5px; font-weight: 600; } .prx-row small { font-size: 9.5px; color: var(--t2); }
.prx-reject { background: var(--red-bg); color: var(--red); font-size: 10px; font-weight: 700; padding: 5px 9px; }
.prx-lock { color: var(--tf); background: rgba(31,72,66,.1); font-size: 9px; font-weight: 800; padding: 3px 6px; border-radius: 6px; display: inline-flex; gap: 3px; align-items: center; margin-left: auto; }
.prx-approve { display: flex; justify-content: center; align-items: center; gap: 5px; background: var(--tf); color: #fff; border-radius: 6px; padding: 9px 0; font-size: 12px; font-weight: 700; margin-top: auto; }
.prx-right { position: relative; padding: 11px; }
.prx-right > [data-page] { position: absolute; inset: 11px; opacity: 0; transform: rotateY(18deg); transform-origin: left center; pointer-events: none;
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); display: flex; flex-direction: column; gap: 7px; }
.prx-right > [data-page].is-on { opacity: 1; transform: none; }
.prx-title { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--t3); display: flex; gap: 5px; align-items: center; }
.prx-title.is-green { color: var(--green); }
.prx-placeholder p { font-size: 11px; color: var(--t2); margin: 0; }
.prx-form label { display: flex; flex-direction: column; gap: 3px; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--t2); }
.prx-in { display: block; min-height: 25px; border: 1.5px solid var(--line); border-radius: 6px; padding: 5px 7px; font-size: 11px; font-weight: 500; color: #1a1a1a;
  text-transform: none; letter-spacing: 0; transition: border-color .25s; white-space: nowrap; overflow: hidden; }
.prx-in.lv-pressed, .prx-in:not(:empty):not(.is-num) { border-color: var(--tf); }
.prx-line { border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.prx-line-head { font-size: 11px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.prx-line-head small { font-weight: 400; color: var(--t2); }
.prx-check { width: 15px; height: 15px; border-radius: 3px; background: var(--tf); color: #fff; display: grid; place-items: center; font-size: 10px; flex: none; }
.prx-qty { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.prx-done .prx-title { font-size: 11px; }
.prx-done { background: var(--green-bg); border: 1px solid #bfe8cd; padding: 10px; }
.prx-dl { display: grid; grid-template-columns: 60px 1fr; gap: 4px 6px; font-size: 11px; }
.prx-dl span { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--t2); padding-top: 2px; }
.prx-small { font-size: 9px; font-weight: 800; text-transform: uppercase; color: var(--t2); margin-top: 4px; }
.prx-dline { font-size: 11px; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.prx-by { font-size: 10px; color: var(--t2); margin-top: auto; }
.prx-toast { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 20px); opacity: 0; background: #1a1a1a; color: #fff; border-radius: 14px; padding: 7px 12px;
  font-size: 11px; font-weight: 600; white-space: nowrap; transition: .35s ease; z-index: 5; }
.prx-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.lv-prx .lv-finger { width: 22px; height: 22px; left: -4px; top: -2px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L9.6 19z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.lv-ops-pane.is-wide { max-width: 31rem; }
/* a live demo inside a lifted Minpilot card, in place of its image */
/* the demo fills the card from its top edge down to the bottom, side to side -- no margin, no padding */
.mp-scope .mp-feature-card:has(.mp-live-wrap) { overflow: hidden; }
.mp-scope .mp-live-wrap { flex: 1; display: flex; align-items: stretch; padding: 0;
  margin: 0 calc(-1 * var(--_spacing---spacer--spacing-9xl)) calc(-1 * var(--_spacing---spacer--spacing-9xl)); }
.mp-scope .mp-live-wrap .lv-prx { flex: 1; max-width: none; display: flex; flex-direction: column; border: 0; border-top: 1px solid #e6e6e6; box-shadow: none; }
.mp-scope .mp-live-wrap .prx-book { flex: 1; }
img.prx-av, img.lv-w-av { object-fit: cover; border-radius: 50%; }
.mp-scope .lv-soon-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--lv-forest); cursor: default; }
.lv-soon-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lv-green); animation: lv-ping 2s ease-out infinite; }
/* lifted Minpilot sections: the badge text in Apilox green instead of Minpilot's blue */
.mp-scope .mp-badge-text { color: var(--lv-forest); }

/* mobile money logos in round badges that flip 180° one after another, left to right (back: a green tick) */
.mp-scope .lv-coins { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 2.5rem 0; min-height: 14rem; perspective: 700px; }
.lv-coin { width: 4.5rem; height: 4.5rem; display: block; }
.lv-coin-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: lv-coinflip 6s cubic-bezier(.65,0,.35,1) infinite; animation-delay: calc(var(--i) * .45s); }
@keyframes lv-coinflip { 0%, 12% { transform: rotateY(0); } 24%, 55% { transform: rotateY(180deg); } 67%, 100% { transform: rotateY(360deg); } }
.lv-coin-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; box-shadow: 0 10px 22px -10px rgba(12,4,7,.35), 0 0 0 1px rgba(12,4,7,.06); display: grid; place-items: center; }
.lv-coin-face img { width: 100%; height: 100%; object-fit: cover; }
.lv-coin-face.is-back { transform: rotateY(180deg); background: var(--lv-forest); color: var(--lv-lime); font-size: 1.9rem; }
@media (prefers-reduced-motion: reduce) { .lv-coin-in { animation: none; } }

/* ═══ Apilox app CareBook (carebook_screen.dart) ═══ */
.lv-ax.cb { overflow: hidden; }
.cb-stage { position: absolute; left: 0; right: 0; top: 110px; padding: 6px 16px; opacity: 0; transform: translateX(20px); pointer-events: none;
  transition: opacity .35s ease, transform .4s ease; }
.cb-stage.is-on { opacity: 1; transform: none; }
.cb-stage h4 { font-size: 18px; font-weight: 700; margin: 4px 0 0; color: #1a1a1a; }
.cb-stage p { font-size: 13.5px; color: var(--t2); margin: 6px 0 0; line-height: 1.4; }
.cb-muted { font-size: 12.5px; color: var(--t3); }
.cb-field { margin-top: 18px; height: 46px; border-radius: 10px; background: #fff; border: 1px solid var(--line); padding: 13px 14px; font-size: 15px; }
.cb-field:empty::before { content: "Phone number, e.g. 0712345678"; color: #b5b7b6; }
.cb-btn { margin-top: 14px; background: var(--tf); color: #fff; border-radius: 9px; text-align: center; padding: 13px; font-size: 15px; font-weight: 600; transition: opacity .3s; }
.cb-btn.is-off { opacity: .4; }
.cb-label { font-family: "LvSans", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--t2); text-transform: uppercase; margin: 16px 2px 8px; }
.cb-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cb-reasons span { border-radius: 10px; padding: 12px 10px; color: #fff; font-size: 12.5px; font-weight: 800; opacity: .62; transition: opacity .3s, box-shadow .3s; }
.cb-reasons span.is-on { opacity: 1; box-shadow: 0 3px 10px var(--g); }
.cb-otp { display: flex; gap: 8px; margin: 18px 0 8px; }
.cb-otp span { flex: 1; height: 52px; border: 1.5px solid var(--line); border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: #fff; }
.cb-otp span:not(:empty) { border-color: var(--tf); }
.cb-sms { position: absolute; z-index: 40; left: 10px; right: 10px; top: 60px; background: rgba(250,250,250,.96); border-radius: 18px; padding: 10px 14px; font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); transform: translateY(-140%); transition: transform .45s cubic-bezier(.2,.8,.2,1); color: #1a1a1a; }
.cb-sms b { display: block; font-size: 11px; color: #6b6f6e; margin-bottom: 2px; }
.cb-sms.is-on { transform: none; }
.cb-card { background: #fff; border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,.05); padding: 13px 14px; }
.cb-id { display: flex; gap: 12px; align-items: center; }
.cb-id img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.cb-id b { display: block; font-size: 16px; font-weight: 800; } .cb-id small { font-size: 12px; color: var(--t2); }
.cb-session { margin-top: 10px; background: var(--cu); border-radius: 14px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.cb-session span { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--tf); }
.cb-session b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tf); }
.cb-k { font-size: 10.5px; font-weight: 800; color: var(--t3); margin: 2px 0 6px; }
.cb-chips { display: flex; gap: 6px; margin-bottom: 8px; }
.cb-chips span { border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 700; }
.cb-chips .is-red { color: #f73540; background: #fdeceb; } .cb-chips .is-amber { color: #c88a2c; background: #fbf1e0; }
.cb-med { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.cb-med-h { display: flex; justify-content: space-between; margin-bottom: 4px; }
.cb-med-h b { font-size: 12.5px; font-weight: 700; } .cb-med-h small { font-size: 10.5px; color: var(--t3); font-weight: 500; }
/* the half phone in the integration card */
.lv-phone3d.is-half .lv-fit { overflow: hidden; }
.lv-phone3d.is-half .lv-fit::before { display: none; }

/* "Backed across Africa" (Minpilot testimonials, adapted): Apilox colours, name labels, programme logos */
.mp-scope .mp-section.mp-testimonial { background-color: #f3f7f1; }
/* the stat boxes keep Minpilot's own colours (orange / lilac) */
.mp-scope .mp-testimonial-card-wrap { position: relative; }
.lv-person { position: absolute; left: .9rem; bottom: .9rem; z-index: 2; background: rgba(12,4,7,.72); color: #fff; border-radius: .9rem; padding: .5rem .8rem;
  backdrop-filter: blur(6px); font-size: .8125rem; line-height: 1.25; max-width: calc(50% - 1.8rem); }
.lv-person b { display: block; font-size: .9375rem; } .lv-person small { opacity: .8; }
.lv-strip-logo { height: 2.6rem; width: auto; filter: brightness(0); }   /* the Apilox logo with its tagline, all black */
.lv-prog-logos { display: flex; gap: 1.25rem; align-items: center; }
.lv-prog-logos img { height: 2.6rem; width: auto; }

/* Minpilot FAQ (_mp-faq.html): Webflow's open/close interaction, redone in CSS -- the answer
   slides open, the plus turns into a minus */
.mp-scope .mp-faq-tab-link { display: block; cursor: pointer; }
.mp-scope .mp-faq-p-wrap { max-height: 0; opacity: 0; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
.mp-scope .mp-faq-tab-link.mp-w--current .mp-faq-p-wrap { max-height: 16rem; opacity: 1; }
.mp-scope .mp-faq-arrow-wrap { position: relative; flex: none; }
.mp-scope .mp-faq-arrow.mp-absolute { transition: transform .35s ease, opacity .35s ease; }
.mp-scope .mp-faq-tab-link.mp-w--current .mp-faq-arrow.mp-absolute { transform: rotate(90deg); opacity: 0; }

/* Minpilot's tilted laptop (_mp-dashboard.html, live_assets.laptop): the live PRO dashboard in its screen */
.mp-scope .lv-laptop { display: block; height: auto; }
.lv-laptop .lv-screen { width: 1440px; height: 900px; background: #fbfbfd; }
.lv-laptop .lv-fit::before { display: none; }

#faq .mp-section { padding-bottom: 8rem; }   /* Minpilot leaves this space to the next section's top spacer */
@media screen and (max-width: 767px) { #faq .mp-section { padding-bottom: 4.5rem; } }

/* ═══ Atlas widgets (live/demos/atlas-widgets.js): Atlas's dark look (apps/atlas spotify/ screens) ═══ */
.lv-w.is-at { --g: #1ed760; background: #121212; color: #fff; font-family: "LvFigtree", -apple-system, sans-serif;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.at-w-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.at-w-head.is-flat { margin: 0 0 8px; }
.at-w-head img { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: #2a2a2a; flex: none; }
.at-w-head b, .at-w-row b, .at-w-ph b { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-w-head small, .at-w-row small, .at-w-ph small, .at-w-status small, .at-w-done small { display: block; color: #b3b3b3; font-size: 11.5px; margin-top: 2px; }
.at-w-head .at-w-pill { margin-left: auto; }
.at-w-sec { font-weight: 800; font-size: 15px; letter-spacing: -.2px; margin-bottom: 10px; }
.at-w-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.at-w-bar .at-w-sec { margin: 0; font-size: 13px; }
.at-w-tabs { display: flex; gap: 6px; }
.at-w-tabs span { padding: 5px 11px; border-radius: 999px; background: #2a2a2a; font-size: 11.5px; font-weight: 700; transition: background .3s, color .3s; }
.at-w-tabs span.is-on { background: var(--g); color: #000; }
.at-w-list { position: relative; }
.at-w-row { position: absolute; left: 0; right: 0; top: 0; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 6px; border-radius: 8px;
  transition: transform .6s cubic-bezier(.22,1,.36,1), background .4s; }
.at-w-row > div { min-width: 0; }
.at-w-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
.at-w-price { margin-left: auto; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.at-w-row.is-best { background: rgba(30,215,96,.12); }
.at-w-row.is-best .at-w-price { color: var(--g); }
.at-w-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(30,215,96,.16); color: var(--g); white-space: nowrap; }
.at-w-pill.is-amber { background: rgba(245,165,36,.16); color: #f5a524; }
.at-w-status b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.at-w-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0; }
.at-w-steps i { height: 4px; border-radius: 2px; background: #2a2a2a; transition: background .5s; }
.at-w-steps i.is-on { background: var(--g); }
.at-w-timeline { display: grid; gap: 7px; }
.at-w-tl { display: flex; align-items: center; gap: 9px; color: #6a6a6a; font-size: 12.5px; transition: color .4s; }
.at-w-tl span { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #3a3a3a; transition: background .4s, border-color .4s; }
.at-w-tl.is-on { color: #fff; }
.at-w-tl.is-on span { background: var(--g); border-color: var(--g); }
.at-w-rx { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: center; }
.at-w-paper { position: relative; height: 96px; background: #fffdf6; border-radius: 8px; padding: 9px 8px; overflow: hidden; }
.at-w-paper b { font: italic 800 20px/1 Georgia, serif; color: #2c5a8c; }
.at-w-paper i { display: block; height: 3px; border-radius: 2px; background: #c9d4e6; margin-top: 7px; }
.at-w-paper span { position: absolute; right: 4px; bottom: 8px; transform: rotate(-12deg) scale(1.4); opacity: 0; border: 2px solid #1f9254; color: #1f9254;
  font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 2px 5px; border-radius: 4px; text-transform: uppercase; transition: .4s cubic-bezier(.22,1,.36,1); }
.at-w-paper.is-ok span { opacity: 1; transform: rotate(-12deg); }
.at-w-cta { margin-top: 12px; text-align: center; padding: 11px; border-radius: 999px; background: #2a2a2a; color: #b3b3b3; font-weight: 800; font-size: 13px; transition: background .4s, color .4s; }
.at-w-cta.is-go { background: var(--g); color: #000; }
.at-w-wallets { display: grid; gap: 8px; }
.at-w-wallet { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #1f1f1f; border: 1.5px solid transparent; transition: border-color .3s; }
.at-w-wallet img { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; background: #fff; }
.at-w-wallet b { font-size: 13px; }
.at-w-wallet i { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #535353; transition: .3s; }
.at-w-wallet.is-on { border-color: var(--g); }
.at-w-wallet.is-on i { border: 5px solid var(--g); }
.at-w-done { position: absolute; inset: auto 14px 14px; display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: #1f1f1f;
  opacity: 0; transform: translateY(10px); transition: .4s cubic-bezier(.22,1,.36,1); }
.at-w-done.is-on { opacity: 1; transform: none; }
.at-w-done .lv-i { font-size: 26px; color: var(--g); }
.at-w-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.at-w-ph { padding: 10px 8px; border-radius: 10px; background: #1a1a1a; text-align: center; transition: background .35s, transform .35s; min-width: 0; }
.at-w-ph img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; display: block; margin: 0 auto 6px; }
.at-w-ph b { font-size: 12px; }
.at-w-ph small { font-size: 10.5px; }
.at-w-ph.is-on { background: #2a2a2a; transform: translateY(-3px); }
.lv-tile-stage.is-night { background: linear-gradient(180deg, transparent, #e9f7ee 55%); }
/* a real web app in the desktop frame (app-frame demo): designed at 1440x900 */
.lv-desktop.is-web .lv-screen { width: 1440px; height: 900px; }
.lv-desktop.is-web .lv-fit { background: #000; }
/* the photographed iPhone in a dark band */
.lv-dark-phone.is-3d { width: 19rem; }
@media screen and (max-width: 991px) { .lv-dark-phone.is-3d { width: 16rem; } }

/* ═══ the company page (live/pages/company.html: Minpilot's company page, adapted) ═══ */
/* programme logos: Webflow's marquee, redone in CSS (each list holds the logos twice) */
.mp-scope .mp-logo-marque-main { overflow: hidden; display: flex; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mp-scope .mp-marque-list { animation: lv-marquee 30s linear infinite; padding-right: var(--_spacing---spacer--spacing-9xl); }
.mp-scope .co-logo { height: 2.5rem; width: auto; flex: none; }
/* the wide photo plays our story video */
.mp-scope .mp-image-wrapper[data-apx-video] { position: relative; cursor: pointer; }
.mp-scope .mp-image-wrapper[data-apx-video]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); }
.mp-scope .mp-image-wrapper:hover .lv-play { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .mp-scope .mp-marque-list { animation: none; } }
/* the timeline's year cards in Apilox colours (Minpilot: blue / lemon / violet) */
.mp-scope .mp-journey-card-top { background-color: #1f4842; }
.mp-scope .mp-journey-card-top.mp-_02 { background-color: #bfff37; }
.mp-scope .mp-journey-card-top.mp-_03 { background-color: #28b424; }
/* the team: seven people, Minpilot's four columns on a wide screen */
#team .mp-team-grid { grid-template-columns: repeat(4, 1fr); }
@media screen and (max-width: 991px) { #team .mp-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 479px) { #team .mp-team-grid { grid-template-columns: 1fr 1fr; } }
/* a template page's hero with the Apilox gradient behind it (content.py: pricing) */
.apx-mesh-hero { position: relative; overflow: hidden; isolation: isolate; }
.apx-mesh-hero > .lv-mesh, .apx-mesh-hero > .lv-dots { z-index: -1; }

/* ═══ the Atlas page (Minpilot's Solutions + Accounting Automation sections, adapted) ═══ */
/* Minpilot's rainbow cards in Apilox's greens */
.mp-scope .mp-operator-tab-content, .mp-scope .mp-feateru-right {
  background: radial-gradient(60% 55% at 18% 12%, #bfff37 0, transparent 70%), radial-gradient(55% 50% at 88% 18%, #5bffc3 0, transparent 70%),
              radial-gradient(65% 60% at 75% 92%, #28b424 0, transparent 70%), radial-gradient(55% 55% at 8% 88%, #97f05e 0, transparent 70%), #ecf4e9; }
/* hero: the Atlas web on the laptop, the Atlas app in front of it */
.at-hero-btns { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.at-hero-stage { position: relative; width: 100%; padding-bottom: 3rem; }
.at-hero-stage .lv-laptop { width: 112%; margin-left: -4%; }
.at-hero-phone { position: absolute; left: -2%; bottom: 0; width: 26%; z-index: 3; }
.at-hero-phone .lv-phone { padding: .35rem; border-radius: 2rem; }
.at-hero-phone .lv-phone .lv-fit { border-radius: 1.7rem; }
/* numbered list: only the picked item shows its text (Webflow did this with an interaction) */
.mp-scope .mp-operator-tab-link { cursor: pointer; }
.mp-scope .mp-operator-p-wrap { max-height: 0; opacity: 0; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
.mp-scope .mp-operator-tab-link.mp-w--current .mp-operator-p-wrap { max-height: 12rem; opacity: 1; }
.mp-scope .mp-operator-tab-content .mp-w-tab-pane { padding: 2.5rem 1.5rem; }
.mp-scope .mp-operator-tab-content .mp-w-tab-pane.mp-w--tab-active { display: flex; justify-content: center; align-items: center; min-height: 28.75rem;
  animation: at-pane-in .5s cubic-bezier(.22,1,.36,1); }
@keyframes at-pane-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.at-op-w { max-width: 24rem; }
/* dark notes: an icon in place of a customer's logo */
.at-note-ico { font-size: 1.75rem; color: #bfff37; }
/* the two rows: the real iPhone on the gradient card */
.mp-scope .mp-feateru-right { display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.at-row-phone { width: 17rem; margin-bottom: -6rem; }
@media screen and (max-width: 991px) {
  .at-hero-stage { max-width: 40rem; margin: 2rem auto 0; }
  .at-row-phone { width: 15rem; }
}
@media screen and (max-width: 479px) {
  .at-hero-phone { width: 30%; }
  .at-row-phone { width: 12.5rem; margin-bottom: -4rem; }
}
.mp-scope .mp-transactions-card-bottom.mp-full .mp-counter-text { white-space: nowrap; font-size: clamp(2rem, 4vw, 3.5rem); }
/* How it works (_mp-how.html) stacked on a phone: the two columns become one list in step order (01 02 03 04) */
@media screen and (max-width: 479px) {
  .mp-scope .mp-how-it-work-left, .mp-scope .mp-how-it-work-right { display: contents; }
  .mp-scope .mp-how-it-work-line { display: none; }
  .mp-scope .mp-how-it-work-left .mp-how-it-work-card:nth-child(1) { order: 1; }
  .mp-scope .mp-how-it-work-right .mp-how-it-work-card:nth-child(1) { order: 2; }
  .mp-scope .mp-how-it-work-left .mp-how-it-work-card:nth-child(2) { order: 3; }
  .mp-scope .mp-how-it-work-right .mp-how-it-work-card:nth-child(2) { order: 4; }
}
/* the company page's dark "future" button: white text on black (Minpilot's variant, which a later section's
   black-text rule would otherwise override) */
#future .mp-_2ndry-button .mp-button-item-main { background-color: #000; }
#future .mp-_2ndry-button .mp-button-text { color: #fff; }

/* ═══ the contact page (Minpilot's contact page, adapted) ═══ */
/* the map: our dotted world (live_assets.contact_map), so the pin sits on the real place */
.mp-scope .mp-map-wrapper.ct-map { position: relative; display: block; height: auto; background: none; }
.ct-map-img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 165.6; }
.mp-scope .mp-country-card.ct-pin { position: absolute; inset: auto; transform: translate(-50%, calc(-100% - 1.1rem)); white-space: nowrap; max-width: none;
  box-shadow: 0 14px 30px -12px rgba(12,40,20,.35); }
.mp-scope .ct-pin .mp-cube { inset: auto auto -.75rem 50%; margin-left: -.75rem; }
.ct-flag { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.ct-dot { position: absolute; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%; background: #28b424; z-index: 8;
  box-shadow: 0 0 0 0 rgba(40,180,36,.55); animation: ct-ping 2s ease-out infinite; }
@keyframes ct-ping { to { box-shadow: 0 0 0 1.25rem rgba(40,180,36,0); } }
.mp-scope .ct-map .mp-map-color { background-color: #bfff37; }
.mp-scope .ct-map .mp-map-color.mp-_03 { background-color: #5bffc3; }
/* the round social buttons in the help card */
.mp-scope .mp-social-wrapper .sx-social { background: #fff; border: 1px solid #e6e8e7; color: #0c0407; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mp-scope .mp-social-wrapper .sx-social:hover { color: #0c0407; }
@media screen and (max-width: 767px) {
  .mp-scope .mp-country-card.ct-pin { padding: .5rem .75rem .75rem; }
  .ct-flag { width: 1.6rem; height: 1.6rem; }
}
/* home map, far away: Tanzania's flag card (the contact page's map card), pointing at Tanzania */
.lv-zoom-flag { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem .55rem; border-radius: .9rem; background: #fff; color: var(--lv-black);
  box-shadow: 0 14px 30px -12px rgba(12,40,20,.35); white-space: nowrap; font-size: 1rem; font-weight: 600; opacity: 1; z-index: 3; }
.lv-zoom-flag-ico { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none; }
.lv-zoom-flag > i { position: absolute; left: 50%; bottom: -.7rem; width: 1.4rem; height: .75rem; margin-left: -.7rem; background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* close up: every other Apilox pharmacy as a dot on its town */
.lv-zoom-stage .lv-pin.is-mini { transform: translate(-50%, -50%); width: .75rem; height: .75rem; }
.lv-zoom-stage .lv-pin.is-mini .lv-pin-dot { position: static; display: block; margin: 0; }
@media screen and (max-width: 767px) { .lv-zoom-flag { font-size: .875rem; } .lv-zoom-flag-ico { width: 1.75rem; height: 1.75rem; } }
/* on a phone the two northern cards (Mwanza, Arusha) would touch: Arusha's hangs just below its dot */
@media screen and (max-width: 767px) {
  .lv-zoom-stage .lv-pin.is-below { transform: translate(-88%, .9rem); }
  .lv-zoom-stage .lv-pin.is-below .lv-pin-dot { top: -.9rem; bottom: auto; }
  .lv-zoom-stage .lv-pin.is-below .lv-pin-card::after { display: none; }
}
/* home map, close up: the other pharmacies as small chips (logo + name) above their dot */
.lv-zoom-stage .lv-pin.is-chip .lv-pin-card { padding: .3rem .6rem .3rem .3rem; gap: .4rem; border-radius: 999px; }
.lv-zoom-stage .lv-pin.is-chip .lv-pin-card img { width: 1.5rem; height: 1.5rem; }
.lv-zoom-stage .lv-pin.is-chip .lv-pin-card b { font-size: .75rem; white-space: nowrap; }
.lv-zoom-stage .lv-pin.is-chip .lv-pin-dot { width: .6rem; height: .6rem; margin-left: -.3rem; bottom: -.9rem; }
@media screen and (max-width: 767px) {                      /* a phone: chips show the logo only */
  .lv-zoom-stage .lv-pin.is-chip .lv-pin-card { padding: .2rem; }
  .lv-zoom-stage .lv-pin.is-chip .lv-pin-card b { display: none; }
  .lv-zoom-stage .lv-pin.is-chip .lv-pin-card img { width: 1.25rem; height: 1.25rem; }
}
/* a chip that hangs below its dot (Health First, under the Apilox pharma card in Dar es Salaam) */
.lv-zoom-stage .lv-pin.is-chip.is-below { transform: translate(-50%, .9rem); }
.lv-zoom-stage .lv-pin.is-chip.is-below .lv-pin-dot { top: -.9rem; bottom: auto; }
.lv-zoom-stage .lv-pin.is-chip.is-below .lv-pin-card::after { display: none; }

/* ═══ the closing banner (Minpilot's, before every footer: site_chrome.apply) ═══ */
/* frame and background: Minpilot's own (its colours are Apilox's too) */
/* the hand holding the phone, where Minpilot's hand with the cards is: out of the card's bottom-right corner */
/* (wholesale.png, its screen cut out: live_assets.hand_phone) it comes up from behind the footer as you scroll */
.mp-scope .mp-cta-absolute-image.cta-hand { width: 21rem; max-width: none; inset: auto -2rem -16rem auto; z-index: 2;
  transform: translateY(calc(var(--rise, 0) * 45%)); will-change: transform; }
.cta-hand { aspect-ratio: 700 / 1073; }
.sx-banner { position: relative; z-index: 1; }
.sx-footer { z-index: 3; }
.cta-hand .cta-hand-dev { position: absolute; inset: 0; }
.cta-hand .lv-fit::before { display: none; }
.cta-hand .cta-hand-dev:last-child .lv-screen { transition: opacity .9s ease; }
.cta-hand:not(.is-b) .cta-hand-dev:last-child .lv-screen { opacity: 0; }
.mp-scope .mp-cta-wrapper { margin-bottom: 4rem; }
@media screen and (max-width: 991px) { .mp-scope .mp-cta-absolute-image.cta-hand { width: 14rem; inset: auto -1rem -11rem auto; } }
@media screen and (max-width: 767px) {
  .mp-scope .mp-cta-absolute-image.cta-hand { position: relative; inset: auto; display: block; margin: 2rem auto -14rem; width: 14rem; }
  .mp-scope .mp-cta-wrapper { margin-bottom: 0; }
}

/* the /apilox bento: real Apilox PRO pages (pro-demo/, app-frame) at phone width in a phone, cut by the tile's edge */
.lv-phone.is-pro-m .lv-screen { width: 420px; height: 760px; }
.lv-phone.is-pro-m .lv-fit { background: #fbfbfd; }
.tile-phone { width: 15rem; height: 19rem; overflow: hidden; margin-bottom: -1.75rem; border-radius: 2.6rem 2.6rem 0 0; flex: none; }
.lv-tile.is-wide .tile-phone { width: 17rem; height: 21rem; }
@media screen and (max-width: 479px) { .tile-phone, .lv-tile.is-wide .tile-phone { width: 15rem; height: 19rem; } }
/* a real PRO page at desktop width (1180x760) in a desktop frame, rising out of a wide tile */
.lv-desktop.is-pro-d .lv-screen { width: 1180px; height: 760px; }
.lv-desktop.is-pro-d .lv-fit { background: #fbfbfd; }
.tile-desk { width: 100%; max-width: 34rem; margin-bottom: -1.75rem; flex: none; }
.tile-desk .lv-desktop { border-radius: 1.25rem 1.25rem 0 0; padding-bottom: 0; }
.lv-tile:not(.is-wide) .tile-phone { height: 24rem; }
/* the PRO pages in the /apilox tiles, now in the photographed iPhone: its window is 420x912 at phone width */
.lv-phone3d.is-pro-m .lv-screen { width: 420px; height: 912px; background: #fbfbfd; }
.tile-phone { border-radius: 0; }
.tile-phone .lv-phone3d .lv-fit::before { display: none; }
/* a PRO page in the iPhone starts below the camera island, like an app under the status bar */
.lv-phone3d.is-pro-m .lv-screen { padding-top: 58px; box-sizing: border-box; }
.at-hero-phone .lv-phone3d { width: 100%; }
/* the full-width Prescription review tile: the PRO page on a wide screen, the app's screen in the iPhone on a phone */
.rx-stage .rx-desk { max-width: 52rem; }
.rx-stage .rx-phone { display: none; }
@media screen and (max-width: 767px) {
  .rx-stage .rx-desk { display: none; }
  .rx-stage .rx-phone { display: block; }
}
/* data-under (phone-16-pro-max.png): the live screen over the phone's own white glass, the island redrawn on top */
.lv-phone3d[data-under] .lv-shell { z-index: 0; }
.lv-phone3d[data-under] .lv-screen { z-index: 1; overflow: hidden; }
.lv-island-ov { position: absolute; z-index: 3; background: #0b0b0c; border-radius: 999px; pointer-events: none; }
/* home: the four steps on a phone get a bit more room at the sides */
@media screen and (max-width: 767px) {
  #steps .lv-steps4 { padding: 0 .75rem; gap: 2.5rem; }
}
/* the gradient shape behind the laptop (home, for pharmacies) stays inside the section */
#pharmacies .mp-section { overflow-x: clip; }
/* Atlas "promises" icons: Apilox forest green on the white tile */
.at-note-ico { color: #1f4842; }
/* the company hero's two buttons stay side by side on a phone (Minpilot stacks them) */
@media screen and (max-width: 479px) {
  .mp-scope .mp-home-hero-btn-wrap { flex-flow: row; flex-wrap: nowrap; gap: .625rem; }
}
/* the FAQ's +/- buttons stay round at every screen size (Minpilot makes them 2rem x 1.5rem on phones) */
.mp-scope .mp-faq-arrow-wrap { width: 1.75rem !important; height: 1.75rem !important; aspect-ratio: 1; flex: none; border-radius: 50%; }
/* home video: square corners at every scroll position */
#video .lv-video-card { border-radius: 0 !important; }
/* the team on a phone: a swipe carousel -- one big card, the next one peeking in, dots under it */
@media screen and (max-width: 767px) {
  #team .mp-team-grid { display: flex; gap: .875rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -1.25rem; padding: 0 1.25rem .25rem; scroll-padding-left: 1.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #team .mp-team-grid::-webkit-scrollbar { display: none; }
  #team .mp-team-card { flex: 0 0 72%; scroll-snap-align: start; }
  #team .mp-team-image { aspect-ratio: 618 / 730; object-fit: cover; }
  .team-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.25rem; }
  .team-dots i { width: .5rem; height: .5rem; border-radius: 999px; background: #d9dcd9; transition: width .3s, background .3s; }
  .team-dots i.is-on { width: 1.5rem; background: #1f4842; }
}
@media screen and (min-width: 768px) { .team-dots { display: none; } }
/* the team: each person's qualification right after their name, above the role */
#team .team-edu { font-size: .875rem; line-height: 1.4; font-weight: 500; color: #1f4842; }