/* Imforia public landing page.
   Self-contained: no Bootstrap, no icon script. Every colour comes from the
   --l-* variables the page prints for the theme the superadmin chose
   (base/landing_themes.py). Content is visible without JavaScript; motion is
   added on top only when the visitor's device has not asked for less. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.lp {
  margin: 0; background: var(--l-bg); color: var(--l-text);
  font: 400 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--l-primary-text); }
h1, h2, h3 { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; color: var(--l-heading); line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--l-accent); outline-offset: 2px; border-radius: 6px; }

.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; fill: currentColor; }
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--l-primary); color: var(--l-primary-ink); padding: 8px 14px; border-radius: 8px; }
.lp-skip:focus { top: 12px; }
.lp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .lp-container { padding: 0 24px; } }
.lp-narrow { max-width: 860px; }
.lp-center { text-align: center; }

/* ── Buttons ─────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .7em 1.3em; border-radius: 12px; border: 2px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  min-height: 44px;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn-lg { padding: .9em 1.6em; font-size: 16px; }
.lp-btn-block { width: 100%; }
.lp-btn-primary { background: var(--l-primary); color: var(--l-primary-ink); box-shadow: 0 8px 24px -10px var(--l-primary); }
.lp-btn-primary:hover { box-shadow: 0 14px 30px -12px var(--l-primary); }
.lp-btn-outline { border-color: var(--l-primary); color: var(--l-primary-text); background: transparent; }
.lp-btn-outline:hover { background: var(--l-primary-soft); }
.lp-btn-ghost { color: var(--l-heading); background: transparent; }
.lp-btn-ghost:hover { background: var(--l-primary-soft); }
.lp-btn-light { background: #fff; color: #1d2540; }
.lp-btn-outline-light { border-color: currentColor; color: inherit; }
.lp-btn-outline-light:hover { background: rgba(255,255,255,.12); }
.lp-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: .35em; align-items: center; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lp-actions.lp-center { justify-content: center; }

/* ── Preview bar, banner ─────────────────────────────────── */
.lp-preview-bar { background: #111; color: #ffd400; text-align: center; font-size: 14px; padding: 8px 16px; }
.lp-preview-bar a { color: #fff; }

/* ── Navigation ──────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--l-bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .lp-nav { background: var(--l-bg); } }
.lp-nav.is-scrolled { border-bottom-color: var(--l-border); box-shadow: 0 6px 24px -18px rgba(0,0,0,.35); }
.lp-nav-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 22px/1 'Plus Jakarta Sans', sans-serif; color: var(--l-primary-text); }
.lp-brand img { width: 36px; height: 36px; object-fit: contain; }
.lp-brand-light { color: #fff; }
.lp-nav-toggle { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--l-border); background: var(--l-surface); color: var(--l-heading); cursor: pointer; }
.lp-nav-toggle .ic { width: 24px; height: 24px; }
.lp-menu { display: none; }
.lp-menu ul { list-style: none; margin: 0; padding: 0; }
.lp-menu a:not(.lp-btn) { color: var(--l-heading); text-decoration: none; font-weight: 500; }
.lp-menu a:not(.lp-btn):hover { color: var(--l-primary-text); }
.lp-menu-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 8px 10px; border-radius: 10px; }
.no-js .lp-menu, .lp-menu.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--l-bg); border-bottom: 1px solid var(--l-border); padding: 8px 16px 18px; box-shadow: 0 18px 30px -24px rgba(0,0,0,.4); }
.no-js .lp-nav-toggle { display: none; }
.lp-menu.is-open li a, .no-js .lp-menu li a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--l-border); }
.lp-menu.is-open .lp-menu-actions, .no-js .lp-menu .lp-menu-actions { margin-top: 14px; }
@media (min-width: 992px) {
  .lp-nav-toggle { display: none; }
  .lp-menu, .lp-menu.is-open, .no-js .lp-menu { display: flex !important; position: static; align-items: center; gap: 28px; margin-left: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .lp-menu ul { display: flex; gap: 26px; }
  .lp-menu li a { padding: 0 !important; border: 0 !important; font-size: 15px; }
  .lp-menu-actions { margin: 0 !important; }
}

/* ── Hero ────────────────────────────────────────────────── */
.lp-hero { position: relative; overflow: hidden; padding: 48px 0 64px; background: var(--l-hero-from); }
.lp-hero-pattern { position: absolute; inset: 0; background: var(--l-primary); opacity: .09; pointer-events: none;
  -webkit-mask: url(hero-pattern.svg) 0 0 / 240px 240px repeat; mask: url(hero-pattern.svg) 0 0 / 240px 240px repeat; }
.lp-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Softens the text side of a photo so the headline stays readable. */
.lp-hero-photo ~ .lp-hero-grid::before { content: ''; position: absolute; z-index: -1; inset: -48px -100vw; background: color-mix(in srgb, var(--l-bg) 72%, transparent); }
@media (min-width: 992px) { .lp-hero-photo ~ .lp-hero-grid::before { right: 46%; background: color-mix(in srgb, var(--l-bg) 86%, transparent); } }
.lp-hero-bg-plain { background: var(--l-bg); }
.lp-hero-grid { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 992px) { .lp-hero { padding: 80px 0 96px; } .lp-hero-grid { grid-template-columns: 1.05fr 1fr; } }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--l-primary-soft); color: var(--l-primary-text); font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
.lp-hero-title { font-size: clamp(32px, 6vw, 56px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; }
.lp-grad { color: var(--l-primary); }
.lp-hero-sub { font-size: clamp(16px, 2vw, 19px); color: var(--l-muted); max-width: 40em; margin-bottom: 24px; }
.lp-note { display: flex; align-items: center; gap: 8px; color: var(--l-muted); font-size: 14px; margin-top: 18px; }
.lp-note .ic { color: var(--l-success); }
.lp-hero-visual { position: relative; }
.lp-float { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--l-surface); color: var(--l-heading); border: 1px solid var(--l-border); border-radius: 14px; padding: 10px 14px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.35); font-size: 13px; line-height: 1.25; }
.lp-float .ic { width: 28px; height: 28px; color: var(--l-primary); }
.lp-float strong { display: block; }
.lp-float span { color: var(--l-muted); }
.lp-float-1 { left: -8px; bottom: -18px; }
.lp-float-2 { right: -8px; top: -18px; }
@media (max-width: 575px) { .lp-float { display: none; } }

/* ── Sections ────────────────────────────────────────────── */
.lp-section { padding: 64px 0; }
@media (min-width: 992px) { .lp-section { padding: 96px 0; } }
.lp-alt { background: var(--l-surface-alt); }
.lp-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.lp-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.015em; }
.lp-sub { color: var(--l-muted); font-size: 17px; }
.lp-text { color: var(--l-muted); }
.lp-back { padding-bottom: 48px; }

.lp-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--l-primary-soft); color: var(--l-primary); margin-bottom: 16px; }
.lp-icon-tile .ic { width: 28px; height: 28px; }

.lp-stats { padding: 28px 0; border-top: 1px solid var(--l-border); border-bottom: 1px solid var(--l-border); background: var(--l-surface); }
.lp-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 768px) { .lp-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.lp-stat { text-align: center; }
.lp-stat-icon { width: 30px; height: 30px; color: var(--l-primary); }
.lp-stat-value { font: 800 clamp(26px, 4vw, 36px)/1.1 'Plus Jakarta Sans', sans-serif; color: var(--l-heading); margin-top: 6px; font-variant-numeric: tabular-nums; }
.lp-stat-label { color: var(--l-muted); font-size: 14px; }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: s; }
@media (min-width: 768px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step { position: relative; background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 20px; padding: 28px; }
.lp-step-num { position: absolute; top: 18px; right: 22px; font: 800 40px/1 'Plus Jakarta Sans', sans-serif; color: var(--l-primary-soft); -webkit-text-stroke: 1px var(--l-border); }
.lp-step h3, .lp-feature h3 { font-size: 18px; }
.lp-step p, .lp-feature p { color: var(--l-muted); font-size: 15px; margin: 0; }

.lp-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lp-cards-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.lp-cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lp-card { background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 20px; padding: 26px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.lp-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(0,0,0,.4); border-color: color-mix(in srgb, var(--l-primary) 35%, var(--l-border)); }
.lp-feature-row { display: flex; gap: 16px; align-items: flex-start; }
.lp-feature-row .lp-icon-tile { margin: 0; }

.lp-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 992px) { .lp-split { grid-template-columns: 1fr 1fr; gap: 64px; } .lp-split-rev .lp-split-visual { order: 2; } }
.lp-visual-img { border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); display: block; width: 100%; }
.lp-ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.lp-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.lp-ticks .ic { color: var(--l-success); margin-top: 3px; }

/* ── Pricing ─────────────────────────────────────────────── */
.lp-plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: stretch; }
.lp-plan { position: relative; display: flex; flex-direction: column; background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 22px; padding: 28px 24px; }
.lp-plan .lp-ticks { flex: 1; font-size: 15px; }
.lp-plan-featured { border: 2px solid var(--l-primary); box-shadow: 0 30px 60px -36px var(--l-primary); }
@media (min-width: 992px) { .lp-plan-featured { transform: scale(1.03); } }
.lp-plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--l-primary); color: var(--l-primary-ink); font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.lp-plan-type { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--l-primary-text); margin: 0 0 4px; }
.lp-plan h3 { font-size: 22px; }
.lp-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 4px; color: var(--l-heading); }
.lp-cur { font-weight: 600; }
.lp-amount { font: 800 36px/1.1 'Plus Jakarta Sans', sans-serif; }
.lp-per, .lp-annual, .lp-plan-desc { color: var(--l-muted); font-size: 14px; }

/* ── Comparison table ────────────────────────────────────── */
.lp-table-wrap { overflow-x: auto; border: 1px solid var(--l-border); border-radius: 18px; background: var(--l-surface); }
.lp-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
.lp-table th, .lp-table td { padding: 13px 16px; border-bottom: 1px solid var(--l-border); text-align: center; }
.lp-table th[scope="row"], .lp-table thead th:first-child { text-align: left; font-weight: 500; color: var(--l-text); }
.lp-table thead th { font-weight: 700; color: var(--l-heading); background: var(--l-surface-alt); }
.lp-table .lp-cat th { text-align: left; background: var(--l-surface-alt); color: var(--l-heading); font-weight: 700; }
.lp-table .lp-hl { background: color-mix(in srgb, var(--l-primary-soft) 70%, transparent); }
.lp-yes { color: var(--l-success); width: 22px; height: 22px; }
.lp-no { color: var(--l-muted); opacity: .55; width: 22px; height: 22px; }

/* ── Testimonials, logos ─────────────────────────────────── */
.lp-pharmacies { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.lp-pharmacy { display: flex; align-items: center; gap: 12px; background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 16px; padding: 10px 18px 10px 10px; font-weight: 600; color: var(--l-heading); }
.lp-pharmacy img, .lp-pharmacy .lp-avatar { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; flex: none; }
.lp-pharmacy .lp-avatar { font-size: 22px; border-radius: 12px; }
.lp-quote { margin: 0; display: flex; flex-direction: column; }
.lp-quote blockquote { margin: 0 0 20px; font-size: 16px; color: var(--l-text); flex: 1; }
.lp-quote figcaption { display: flex; align-items: center; gap: 12px; }
.lp-quote figcaption img, .lp-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lp-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--l-primary-soft); color: var(--l-primary-text); font-weight: 800; }
.lp-quote strong { display: block; color: var(--l-heading); }
.lp-quote small { color: var(--l-muted); }
.lp-logos { padding: 36px 0; }
.lp-logos-title { text-align: center; color: var(--l-muted); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.lp-logos-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 44px; align-items: center; }
.lp-logos-row img { height: 40px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.lp-logos-row img:hover { filter: none; opacity: 1; }
.lp-logos-row span { font-weight: 700; color: var(--l-muted); }

/* ── FAQ ─────────────────────────────────────────────────── */
.lp-faq { display: grid; gap: 12px; }
.lp-faq-item { background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 16px; }
.lp-faq-item summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; font-weight: 600; color: var(--l-heading); position: relative; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.lp-faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lp-faq-body { padding: 0 20px 18px; color: var(--l-muted); }

/* ── CTA, footer ─────────────────────────────────────────── */
.lp-cta { padding: 24px 0 72px; }
.lp-cta-inner { background: var(--l-primary); color: var(--l-primary-ink); border-radius: 28px; padding: 56px 24px; text-align: center; position: relative; overflow: hidden; }
.lp-cta-inner::before { content: ''; position: absolute; inset: auto -10% -60% auto; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.08); }
.lp-cta h2 { color: inherit; font-size: clamp(26px, 4vw, 40px); }
.lp-cta p { color: inherit; opacity: .92; max-width: 620px; margin: 0 auto 24px; font-size: 17px; }
body[data-theme="contrast"] .lp-cta-inner { background: #111; }

.lp-footer { background: var(--l-footer-bg); color: var(--l-footer-text); padding: 56px 0 24px; font-size: 15px; }
.lp-footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .lp-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } }
.lp-footer h2 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-footer a { color: var(--l-footer-text); text-decoration: none; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }
.lp-footer p { margin-top: 14px; }
.lp-contact li { display: flex; gap: 10px; align-items: center; word-break: break-word; }
.lp-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; text-align: center; font-size: 14px; }
body[data-theme="contrast"] .lp-footer h2 { color: #ffd400; }

/* ── WhatsApp ────────────────────────────────────────────── */
.lp-whatsapp { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; background: #1a7f45; color: #fff; text-decoration: none; border-radius: 999px; padding: 12px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); font-weight: 600; }
.lp-whatsapp svg { width: 28px; height: 28px; }
.lp-whatsapp span { display: none; padding-right: 6px; }
@media (min-width: 768px) { .lp-whatsapp span { display: inline; } }

/* ── Product tour ────────────────────────────────────────── */
.lp-tour { position: relative; background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 26px; padding: 14px; box-shadow: 0 40px 80px -60px rgba(0,0,0,.5); }
@media (min-width: 768px) { .lp-tour { padding: 22px; } }
.lp-tour-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: 14px; }
.lp-tour-tabs::-webkit-scrollbar { display: none; }
.lp-tour-tab { position: relative; flex: none; border: 1px solid var(--l-border); background: var(--l-bg); color: var(--l-heading); border-radius: 999px; padding: 10px 18px; font: 600 14px/1 'Inter', sans-serif; cursor: pointer; overflow: hidden; min-height: 44px; }
.lp-tour-tab[aria-selected="true"] { background: var(--l-primary); border-color: var(--l-primary); color: var(--l-primary-ink); }
.lp-tour-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.lp-tour-progress i { display: block; height: 100%; width: 0; background: var(--l-primary-ink); opacity: .7; }
.lp-tour-stage { position: relative; }
.lp-tour-scene { display: grid; gap: 22px; align-items: center; }
.lp-tour-scene[hidden] { display: none; }
@media (min-width: 992px) { .lp-tour-scene { grid-template-columns: .8fr 1.2fr; gap: 36px; padding: 8px; } }
.lp-tour-copy h3 { font-size: clamp(20px, 2.6vw, 28px); }
.lp-tour-copy p { color: var(--l-muted); }
.lp-tour-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: st; }
.lp-tour-steps li { counter-increment: st; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: var(--l-muted); border: 1px solid transparent; transition: background-color .3s, color .3s, border-color .3s; font-size: 15px; }
.lp-tour-steps li::before { content: counter(st); flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--l-surface-alt); color: var(--l-heading); }
.lp-tour-steps li.is-current { background: var(--l-primary-soft); color: var(--l-heading); border-color: color-mix(in srgb, var(--l-primary) 30%, transparent); }
.lp-tour-steps li.is-current::before { background: var(--l-primary); color: var(--l-primary-ink); }
.lp-tour-play { position: absolute; right: 16px; bottom: 16px; display: none; align-items: center; gap: 6px; border: 1px solid var(--l-border); background: var(--l-surface); color: var(--l-heading); border-radius: 999px; padding: 8px 14px; font-size: 13px; cursor: pointer; min-height: 40px; }
.js .lp-motion .lp-tour-play { display: inline-flex; }
@media (max-width: 991px) { .lp-tour-play { position: static; margin-top: 12px; } }

/* ── Device frame + mock screens ─────────────────────────── */
.lp-device { background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 18px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.45); overflow: hidden; }
.lp-device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--l-surface-alt); border-bottom: 1px solid var(--l-border); font-size: 12px; color: var(--l-muted); }
.lp-device-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--l-border); }
.lp-device-bar i:nth-child(1) { background: #ff5f57; } .lp-device-bar i:nth-child(2) { background: #febc2e; } .lp-device-bar i:nth-child(3) { background: #28c840; }
.lp-device-bar span { margin-left: 8px; }
.lp-screen { position: relative; padding: 16px; min-height: 300px; font-size: 13px; color: var(--l-text); }
@media (min-width: 768px) { .lp-screen { min-height: 330px; padding: 20px; } }
.lp-screen .ic { width: 18px; height: 18px; }
.lp-cursor { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--l-primary) 70%, transparent); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: transform .7s cubic-bezier(.6,.05,.3,1), opacity .3s; z-index: 3; }
.lp-cursor.is-on { opacity: 1; }
.lp-cursor.is-click::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--l-primary); animation: lp-ripple .6s ease-out; }
@keyframes lp-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Animated states. Without JS (or with reduced motion) the final step shows. */
.lp-screen:not(.lp-anim) [data-until] { display: none; }
.lp-anim [data-at], .lp-anim [data-until] { transition: opacity .45s ease, transform .45s ease; }
.lp-anim .is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.lp-anim .is-hidden .sc-typed, .lp-anim .sc-typed.is-hidden { opacity: 0; }

.sc { display: grid; gap: 12px; }
/* Charts use the app's own chart colours in every theme: sales blue, purchases teal. */
.lp-screen { --l-chart-1: #0d6efd; --l-chart-2: #20c997; }
.sc-area { background: var(--l-surface); border: 1px solid var(--l-border); border-radius: 12px; padding: 8px 10px 6px; }
.sc-area svg { display: block; width: 100%; height: 92px; }
.sc-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--l-muted); margin-bottom: 4px; }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sc-dot + .sc-dot, .sc-legend .sc-c2 { margin-left: 8px; }
.sc-dot.sc-c1 { background: var(--l-chart-1); } .sc-dot.sc-c2 { background: var(--l-chart-2); }
.sc-grid path { stroke: var(--l-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sc-stroke { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease; }
.sc-stroke.sc-c1 { stroke: var(--l-chart-1); } .sc-stroke.sc-c2 { stroke: var(--l-chart-2); }
.sc-fill { opacity: .16; transition: opacity 1s ease .4s; }
.sc-fill.sc-c1 { fill: var(--l-chart-1); } .sc-fill.sc-c2 { fill: var(--l-chart-2); }
.lp-anim .sc-area.is-hidden .sc-stroke { stroke-dashoffset: 600; }
.lp-anim .sc-area.is-hidden .sc-fill { opacity: 0; }
.sc mark { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
mark.ok { background: color-mix(in srgb, var(--l-success) 16%, transparent); color: var(--l-success); }
mark.warn { background: color-mix(in srgb, var(--l-warning) 18%, transparent); color: var(--l-warning); }
mark.bad { background: color-mix(in srgb, var(--l-danger) 15%, transparent); color: var(--l-danger); }
mark.info { background: color-mix(in srgb, var(--l-accent) 15%, transparent); color: var(--l-accent); }
.sc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-kpi { background: var(--l-surface-alt); border-radius: 12px; padding: 12px; display: grid; }
.sc-kpi small { color: var(--l-muted); }
.sc-kpi b { font: 800 20px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--l-heading); }
.sc-kpi em { font-style: normal; font-size: 12px; color: var(--l-muted); }
.sc-kpi em.up { color: var(--l-success); font-weight: 700; }
.sc-list, .sc-results, .sc-people, .sc-queue, .sc-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-list li, .sc-queue li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--l-border); border-radius: 10px; background: var(--l-surface); }
.sc-list li span, .sc-queue li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-list .ic { color: var(--l-primary); }

.sc-pos { grid-template-columns: 1fr; }
@media (min-width: 576px) { .sc-pos { grid-template-columns: 1.1fr 1fr; } }
.sc-search { display: flex; align-items: center; gap: 8px; border: 2px solid var(--l-primary); border-radius: 10px; padding: 8px 10px; background: var(--l-bg); margin-bottom: 10px; }
.sc-caret { width: 2px; height: 16px; background: var(--l-primary); animation: lp-blink 1s steps(1) infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }
.sc-results li { display: grid; grid-template-columns: 1fr auto; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--l-border); }
.sc-results li small { grid-column: 1; color: var(--l-muted); }
.sc-results li span { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 700; color: var(--l-heading); }
.sc-results li:first-child { border-color: var(--l-primary); background: var(--l-primary-soft); }
.sc-cart { background: var(--l-surface-alt); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.sc-label { margin: 0; font-weight: 700; color: var(--l-heading); }
.sc-cart-row, .sc-total { display: flex; justify-content: space-between; gap: 8px; }
.sc-total { border-top: 1px dashed var(--l-border); padding-top: 8px; font-size: 15px; color: var(--l-heading); }
.sc-pay { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-chip { border: 1px solid var(--l-border); border-radius: 999px; padding: 4px 10px; background: var(--l-surface); }
.sc-chip.on { background: var(--l-primary); color: var(--l-primary-ink); border-color: var(--l-primary); }
.sc-receipt, .sc-toast, .sc-push { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 10px 12px; font-weight: 600; background: color-mix(in srgb, var(--l-success) 14%, var(--l-surface)); color: var(--l-heading); }
.sc-receipt .ic, .sc-toast .ic { color: var(--l-success); }
.sc-push { background: var(--l-heading); color: var(--l-bg); font-weight: 500; }
.sc-push .ic { color: var(--l-primary); }
.sc-push b { margin-right: 6px; }

.sc-tabs { display: flex; gap: 6px; }
.sc-tabs span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--l-border); }
.sc-tabs span.on { background: var(--l-primary-soft); color: var(--l-primary-text); border-color: transparent; font-weight: 700; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--l-muted); padding: 6px 8px; }
.sc-table td { padding: 8px; border-top: 1px solid var(--l-border); }
.sc-field { display: grid; background: var(--l-surface-alt); border-radius: 10px; padding: 10px 12px; }
.sc-field small { color: var(--l-muted); }
.sc-short { color: var(--l-warning); }
.sc-row-end { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sc-note { display: inline-flex; gap: 6px; align-items: center; color: var(--l-warning); font-weight: 600; }
.sc-btn { background: var(--l-primary); color: var(--l-primary-ink); border-radius: 10px; padding: 8px 16px; font-weight: 700; }

.sc-transfer { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 576px) { .sc-transfer { grid-template-columns: 1fr 1.1fr 1fr; } .sc-transfer .sc-toast { grid-column: 1 / -1; } }
.sc-shop { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 16px 10px; border: 1px solid var(--l-border); border-radius: 14px; background: var(--l-surface-alt); }
.sc-shop .ic { width: 32px; height: 32px; color: var(--l-primary); }
.sc-shop small { color: var(--l-muted); }
.sc-route { position: relative; height: 44px; }
.sc-route::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--l-border); }
.sc-parcel { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); display: inline-flex; gap: 4px; align-items: center; background: var(--l-primary); color: var(--l-primary-ink); border-radius: 999px; padding: 4px 10px; font-weight: 700; }
.lp-anim .sc-route:not(.is-hidden) .sc-parcel { animation: lp-parcel 2.4s ease-in-out both; }
@keyframes lp-parcel { from { right: 0; } to { right: calc(100% - 64px); } }
.sc-transfer .sc-shop:first-child { order: 0; }
@media (min-width: 576px) { .sc-transfer > .sc-shop:nth-of-type(1) { order: 3; } .sc-transfer > .sc-route { order: 2; } .sc-transfer > .sc-shop:nth-of-type(2) { order: 1; } .sc-transfer > .sc-toast { order: 4; } }

.sc-rank li { display: grid; gap: 4px; }
.sc-rank i { display: block; height: 8px; width: var(--w); border-radius: 999px; background: var(--l-chart-1); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.lp-anim .is-hidden .sc-rank i { transform: scaleX(.05); }

.sc-people li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 10px; border: 1px solid var(--l-border); border-radius: 10px; }
.sc-people small { grid-column: 2; color: var(--l-muted); }
.sc-check { grid-row: 1 / 3; align-self: center; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--l-border); }
.sc-check.on { background: var(--l-primary); border-color: var(--l-primary); box-shadow: inset 0 0 0 3px var(--l-surface); }
.sc-bubble { background: var(--l-primary-soft); color: var(--l-heading); padding: 12px 14px; border-radius: 16px 16px 16px 4px; max-width: 92%; }

.sc-status { display: grid; }
.sc-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-weight: 700; }
.sc-online, .sc-synced { background: color-mix(in srgb, var(--l-success) 14%, var(--l-surface)); color: var(--l-success); }
.sc-offline-badge { background: color-mix(in srgb, var(--l-warning) 16%, var(--l-surface)); color: var(--l-warning); }
.sc-syncing { background: color-mix(in srgb, var(--l-accent) 14%, var(--l-surface)); color: var(--l-accent); }
.sc-syncing .ic { animation: lp-spin 1s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.sc-queue mark { margin-left: auto; }
.sc-queue li { position: relative; }
.sc-queue mark[data-at], .sc-queue mark[data-until] { grid-area: auto; }

/* ── Reveal on scroll ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .lp-motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .lp-motion .rv.in { opacity: 1; transform: none; }
  .lp-motion .lp-float-1 { animation: lp-bob 6s ease-in-out infinite; }
  .lp-motion .lp-float-2 { animation: lp-bob 7s ease-in-out infinite reverse; }
}
@keyframes lp-bob { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Announcements ───────────────────────────────────────── */
.lp-ann { --ann: var(--l-primary); --ann-ink: var(--l-primary-ink); }
.lp-acc-festive { --ann: #b3122e; --ann-ink: #fff; }
.lp-acc-green { --ann: #1f7a3a; --ann-ink: #fff; }
.lp-acc-blue { --ann: #0b63b6; --ann-ink: #fff; }
.lp-acc-gold { --ann: #8a5a00; --ann-ink: #fff; }
.lp-acc-dark { --ann: #111827; --ann-ink: #fff; }
.lp-ann .lp-btn-primary { background: var(--ann); color: var(--ann-ink); box-shadow: none; }
.lp-ann h2 { font-size: 22px; margin-bottom: 8px; }
.lp-ann p { color: var(--l-muted); margin-bottom: 14px; }
.lp-ann-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.06); color: var(--l-heading); font-size: 24px; line-height: 1; cursor: pointer; }
.lp-ann-close:hover { background: rgba(0,0,0,.12); }
.lp-ann-dialog { border: 0; padding: 0; border-radius: 22px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--l-surface); color: var(--l-text); box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); overflow: auto; }
.lp-ann-dialog::backdrop { background: rgba(10, 14, 25, .55); }
.lp-ann-dialog .lp-ann-inner { position: relative; }
.lp-ann-dialog .lp-ann-copy { padding: 22px 24px 24px; border-top: 6px solid var(--ann); }
.lp-ann-img { display: block; width: 100%; max-height: 52vh; object-fit: cover; }
.lp-ann-dialog .lp-ann-img + .lp-ann-copy { border-top: 0; }
@media (max-width: 575px) {
  .lp-ann-dialog { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-ann-dialog[open] { animation: lp-pop .45s cubic-bezier(.2,.9,.25,1.2); }
  @media (max-width: 575px) { .lp-ann-dialog[open] { animation: lp-sheet .4s cubic-bezier(.2,.9,.3,1); } }
  .lp-ann-dialog[open]::backdrop { animation: lp-fade .3s ease; }
  .lp-ann-card:not([hidden]) { animation: lp-slide .45s cubic-bezier(.2,.9,.3,1); }
  .lp-ann-banner:not([hidden]) { animation: lp-down .35s ease; }
}
@keyframes lp-pop { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes lp-sheet { from { transform: translateY(100%); } }
@keyframes lp-fade { from { opacity: 0; } }
@keyframes lp-slide { from { opacity: 0; transform: translateY(24px); } }
@keyframes lp-down { from { transform: translateY(-100%); } }
.lp-ann-card { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(360px, calc(100vw - 32px)); background: var(--l-surface); border: 1px solid var(--l-border); border-left: 6px solid var(--ann); border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.5); overflow: hidden; }
.lp-ann-card .lp-ann-copy { padding: 18px 48px 16px 18px; }
.lp-ann-card .lp-ann-img { max-height: 160px; }
.lp-ann-card h2 { font-size: 18px; }
.lp-ann-banner { background: var(--ann); color: var(--ann-ink); }
.lp-ann-banner .lp-ann-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 10px 56px 10px 16px; }
.lp-ann-banner .lp-ann-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.lp-ann-banner h2 { font-size: 15px; margin: 0; color: inherit; }
.lp-ann-banner p { margin: 0; color: inherit; opacity: .92; font-size: 14px; }
.lp-ann-banner .lp-btn-primary { background: var(--ann-ink); color: var(--ann); min-height: 36px; padding: 6px 14px; font-size: 14px; }
.lp-ann-banner .lp-ann-close { top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.18); color: inherit; width: 36px; height: 36px; font-size: 20px; }
.lp-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media print { .lp-nav, .lp-whatsapp, .lp-ann, .lp-tour-play { display: none !important; } }