/* The public front page (app/views/landing.php). Loaded only there; app.css still applies,
   so every rule is scoped to .landing or an lp- class. */

.landing {
  --ink: #0d1716;
  --soft: #55625f;
  --faint: #8a9693;
  --teal: #0f766e;
  --teal-deep: #0b4f4a;
  --teal-tint: #e6f2ef;
  --canvas: #f5f5f3;
  --card: #ffffff;
  --line: #e3e7e5;
  --mpesa: #1d8a4b;
  --warn: #b45309;
  --warn-tint: #fdf3e3;
  --wrap: 1080px;
  --gutter: clamp(16px, 5vw, 40px);
  --spring: cubic-bezier(.22, 1, .36, 1);
}
.landing * { margin: 0; }
.landing {
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); -webkit-font-smoothing: antialiased;
  background: #fff;
}
body.bare:has(> .landing) { background: #fff; }
.landing a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; border-radius: 8px; }
.lp-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.lp-num { font-variant-numeric: tabular-nums; }

.landing h1, .landing h2, .landing h3 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; font-weight: 700; }
.landing h1 { font-size: clamp(2.4rem, 5.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em; }
.landing h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.06; letter-spacing: -0.03em; }
.landing h3 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.lp-lead { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.4; color: var(--soft); letter-spacing: -0.01em; }

/* ------------------------------------------------ buttons */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--teal); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none;
  transition: background .2s, transform .12s ease-out; touch-action: manipulation;
}
.lp-btn:hover { background: var(--teal-deep); }
.lp-btn:active { transform: scale(.97); }
.lp-btn-sm { min-height: 38px; padding: 0 16px; font-size: .92rem; }
.lp-btn-light { background: #fff; color: var(--teal-deep); }
.lp-btn-light:hover { background: var(--teal-tint); }
.lp-link { font-weight: 600; color: var(--teal); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.lp-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.lp-link svg { transition: transform .2s var(--spring); }
.lp-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------ nav: translucent material */
.lp-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.lp-nav .lp-wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.lp-brand img { display: block; border-radius: 8px; }
.lp-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }
.lp-nav-links { display: flex; align-items: center; gap: 20px; font-size: .95rem; }
.lp-nav-links a:not(.lp-btn) { text-decoration: none; color: var(--soft); min-height: 44px; display: inline-flex; align-items: center; }
.lp-nav-links a:not(.lp-btn):hover { color: var(--ink); }
.lp-brand, .lp-nav-links a { white-space: nowrap; }
@media (max-width: 560px) { .lp-nav-hide { display: none !important; } .lp-nav .lp-wrap { gap: 12px; } .lp-nav-links { gap: 12px; } .lp-brand { font-size: .88rem; gap: 8px; } .lp-nav .lp-btn-sm { padding: 0 14px; } }

/* ------------------------------------------------ hero: text left, devices right */
.lp-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(16px, 2vw, 24px); overflow: hidden; }
.lp-hero .lp-wrap { max-width: 1240px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.lp-hero h1 { font-size: clamp(2.4rem, 4.3vw, 3.9rem); text-wrap: balance; }
.lp-hero .lp-lead { max-width: 30ch; margin-top: 18px; }
.lp-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.lp-fine { margin-top: 12px; font-size: .9rem; color: var(--faint); }
.lp-proof { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--soft); list-style: none; padding-left: 0; }
.lp-proof li { display: inline-flex; align-items: center; gap: 7px; }
.lp-proof svg { color: var(--teal); }
@media (max-width: 960px) {
  .lp-hero .lp-wrap { grid-template-columns: 1fr; }
  .lp-hero-text { text-align: center; }
  .lp-hero h1, .lp-hero .lp-lead { margin-left: auto; margin-right: auto; }
  .lp-hero-cta, .lp-proof { justify-content: center; }
}

/* ------------------------------------------------ devices: everything in em, scaled to the column */
.lp-devices { position: relative; container-type: inline-size; padding: 0 0 4% 0; }
.lp-devices::before {
  content: ""; position: absolute; inset: 8% 6% 0 10%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(15,118,110,.22), transparent 72%);
  filter: blur(30px);
}
.lp-laptop, .lp-phone { font-size: 11px; font-size: 1.42cqw; text-align: left; line-height: 1.35; }

.lp-laptop { width: 90%; }
.lp-lid {
  position: relative; background: #0c1110; border-radius: 1.5em 1.5em .4em .4em; padding: 1.5em 1.1em 1.6em;
  box-shadow: inset 0 0 0 .12em #2b3332, 0 2.5em 5em -1.5em rgba(13,23,22,.38);
}
.lp-lid::before { content: ""; position: absolute; top: .55em; left: 50%; width: .45em; height: .45em; margin-left: -.22em; border-radius: 50%; background: #26302f; }
.lp-screen { aspect-ratio: 16 / 10; overflow: hidden; border-radius: .25em; background: #fff; display: grid; grid-template-columns: 12.5em 1fr; grid-template-rows: 3.6em 1fr; }
.lp-base {
  position: relative; width: 112%; margin-left: -6%; height: 1.3em;
  background: linear-gradient(#e4e7e6 0%, #c9cecc 55%, #a8aeac 100%);
  border-radius: .2em .2em 1.4em 1.4em / .2em .2em 1em 1em;
  box-shadow: 0 1.6em 2.4em -1.2em rgba(13,23,22,.45);
}
.lp-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: .5em; transform: translateX(-50%); background: #b3b9b7; border-radius: 0 0 .6em .6em; }

.lp-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2em; padding: 0 1.4em; border-bottom: 1px solid var(--line); }
.lp-shop { display: flex; align-items: center; gap: .6em; width: 10.4em; font-weight: 700; font-size: 1.05em; }
.lp-shop i { width: 1.7em; height: 1.7em; border-radius: .45em; background: var(--teal); }
.lp-find { flex: 1; max-width: 26em; height: 2.3em; border-radius: .6em; background: var(--canvas); display: flex; align-items: center; gap: .5em; padding: 0 .8em; color: var(--faint); }
.lp-me { margin-left: auto; display: flex; align-items: center; gap: .6em; color: var(--soft); }
.lp-me b { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--teal-tint); color: var(--teal); display: grid; place-items: center; font-size: .9em; }

.lp-sidebar { border-right: 1px solid var(--line); padding: 1em .8em; display: flex; flex-direction: column; gap: .15em; }
.lp-sidebar span { display: flex; align-items: center; gap: .7em; padding: .6em .7em; border-radius: .55em; color: var(--soft); }
.lp-sidebar span.lp-on { background: var(--teal-tint); color: var(--teal); font-weight: 600; }
.lp-sidebar svg { width: 1.25em; height: 1.25em; flex: none; }

.lp-main { padding: 1.3em 13.5em 1.3em 1.5em; overflow: hidden; }
.lp-main-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.lp-main-head h4 { font-size: 1.6em; letter-spacing: -0.02em; line-height: 1.1; }
.lp-main-head p { color: var(--faint); margin-top: .2em; }
.lp-acts { display: flex; gap: .5em; }
.lp-acts span { height: 2.4em; padding: 0 1em; border-radius: .6em; display: inline-flex; align-items: center; font-weight: 600; border: 1px solid var(--line); }
.lp-acts span.lp-go { background: var(--teal); border-color: var(--teal); color: #fff; }
.lp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin: 1.2em 0 1em; }
.lp-kpis div { border: 1px solid var(--line); border-radius: .7em; padding: .7em .85em; }
.lp-kpis small { display: block; color: var(--faint); font-size: .88em; }
.lp-kpis b { display: block; font-size: 1.3em; letter-spacing: -0.01em; margin-top: .1em; }
.lp-kpis .lp-warn b { color: var(--warn); }
.lp-chips { display: flex; gap: .4em; margin-bottom: .6em; }
.lp-chips span { padding: .3em .8em; border-radius: 999px; background: var(--canvas); color: var(--soft); font-size: .92em; }
.lp-chips span.lp-on { background: var(--ink); color: #fff; }
.lp-grid { width: 100%; border-collapse: collapse; }
.lp-grid th { text-align: left; font-weight: 600; color: var(--faint); font-size: .82em; text-transform: uppercase; letter-spacing: .05em; padding: .55em .6em; background: var(--canvas); }
.lp-grid th:first-child { border-radius: .5em 0 0 .5em; } .lp-grid th:last-child { border-radius: 0 .5em .5em 0; }
.lp-grid td { padding: .62em .6em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lp-grid td small { display: block; color: var(--faint); font-size: .85em; }
.lp-grid .lp-r { text-align: right; }
.lp-grid .lp-buy, .lp-grid tr td:nth-child(4) { display: none; }
.lp-pill { display: inline-block; margin-left: .4em; font-weight: 600; font-size: .82em; padding: .1em .55em; border-radius: 999px; background: var(--teal-tint); color: var(--teal); }
.lp-pill.lp-low { background: var(--warn-tint); color: var(--warn); }

.lp-phone {
  position: absolute; right: 0; bottom: 0; width: 29%; aspect-ratio: 9 / 19.2;
  background: #0c1110; border-radius: 4.2em; padding: .55em;
  box-shadow: inset 0 0 0 .14em #2b3332, 0 2.6em 5em -1.4em rgba(13,23,22,.55);
}
.lp-phone-in { height: 100%; border-radius: 3.7em; background: var(--canvas); overflow: hidden; display: flex; flex-direction: column; padding: 0 1em; }
.lp-phone-in > * { flex: none; }
.lp-status { display: flex; justify-content: space-between; align-items: center; height: 3.6em; padding: 0 1.2em; font-weight: 600; font-size: .95em; position: relative; }
.lp-island { position: absolute; left: 50%; top: .9em; width: 7.4em; height: 2.1em; margin-left: -3.7em; border-radius: 999px; background: #0c1110; }
.lp-status svg { height: .95em; width: auto; }
.lp-phone-in h4 { font-size: 2em; letter-spacing: -0.03em; line-height: 1.1; margin-top: .25em; }
.lp-phone-in .lp-date { color: var(--faint); font-size: .95em; }
.lp-stat { background: #fff; border-radius: 1.3em; padding: 1em 1.1em; margin-top: .7em; }
.lp-stat small { display: block; color: var(--soft); font-size: .92em; }
.lp-stat b { display: block; font-size: 1.75em; letter-spacing: -0.03em; line-height: 1.15; margin-top: .1em; }
.lp-stat em { font-style: normal; font-size: .88em; font-weight: 600; color: var(--mpesa); }
.lp-stat.lp-lead-stat { background: var(--teal); color: #fff; margin-top: 1em; }
.lp-stat.lp-lead-stat small, .lp-stat.lp-lead-stat em { color: rgba(255,255,255,.82); }
.lp-spark { display: flex; align-items: flex-end; gap: .35em; height: 3.4em; margin-top: .7em; }
.lp-spark i { flex: 1; border-radius: .25em; background: rgba(255,255,255,.3); }
.lp-spark i:last-child { background: #fff; }
.lp-meter { height: .45em; border-radius: 999px; background: var(--canvas); margin-top: .6em; overflow: hidden; }
.lp-meter i { display: block; height: 100%; width: 68%; background: var(--teal); border-radius: inherit; }
.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.lp-pair .lp-stat b { font-size: 1.3em; }
.lp-pair .lp-warn b { color: var(--warn); }
.lp-tabs { margin: auto -1em 0; padding: .8em 1em 1.6em; background: rgba(255,255,255,.92); border-top: 1px solid var(--line); display: flex; justify-content: space-around; font-size: .8em; color: var(--faint); }
.lp-tabs span { display: flex; flex-direction: column; align-items: center; gap: .25em; }
.lp-tabs span.lp-on { color: var(--teal); font-weight: 600; }
.lp-tabs svg { width: 1.9em; height: 1.9em; }

@container (max-width: 560px) {
  .lp-laptop { width: 100%; }
  .lp-laptop, .lp-phone { font-size: 2.05cqw; }
  .lp-screen { grid-template-columns: 1fr; }
  .lp-sidebar, .lp-find, .lp-kpis div:nth-child(n+3), .lp-grid .lp-opt { display: none; }
  .lp-main { padding-right: 1.5em; }
  .lp-kpis { grid-template-columns: 1fr 1fr; }
  .lp-phone { position: relative; width: 46%; margin: -34% 2% 0 auto; font-size: 2.35cqw; aspect-ratio: 9 / 18.4; }
}

/* ------------------------------------------------ sections */
section.lp-block { padding: clamp(56px, 7vw, 88px) 0 0; }
.lp-section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.lp-section-head .lp-lead { margin-top: 10px; font-size: 1.15rem; }

.lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.lp-panel { background: var(--canvas); border-radius: 24px; padding: clamp(24px, 3vw, 32px); overflow: hidden; display: flex; flex-direction: column; }
.lp-panel .lp-lead { font-size: 1.02rem; margin-top: 8px; }
.lp-panel-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--teal); }
.lp-panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 8px; }
.lp-checks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.lp-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.lp-checks svg { flex: none; margin-top: 3px; color: var(--teal); }
.lp-panel-visual { margin-top: 20px; background: #fff; border-radius: 18px; border: 1px solid var(--line); padding: 18px; }
.lp-split { display: flex; gap: 6px; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.lp-split i:nth-child(1) { flex: 5; background: var(--teal); }
.lp-split i:nth-child(2) { flex: 3; background: var(--mpesa); }
.lp-split i:nth-child(3) { flex: 2; background: #c9d3d0; }
.lp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .82rem; color: var(--soft); }
.lp-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.lp-kv { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--soft); }
.lp-kv b { font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
.lp-bar { height: 8px; border-radius: 999px; background: var(--canvas); overflow: hidden; margin-top: 6px; }
.lp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.lp-bar.lp-lowbar i { background: var(--warn); }
.lp-stockrow { margin-top: 14px; font-size: .85rem; }
.lp-stockrow div:first-child { display: flex; justify-content: space-between; }
@media (max-width: 820px) { .lp-duo { grid-template-columns: 1fr; } }

/* simple */
.lp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 40px); margin-top: 32px; }
.lp-trio-item .lp-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--teal-tint); color: var(--teal); display: grid; place-items: center; }
.lp-trio-item h3 { font-size: 1.2rem; margin-top: 14px; }
.lp-trio-item p { color: var(--soft); margin-top: 8px; font-size: 1rem; }
@media (max-width: 760px) { .lp-trio { grid-template-columns: 1fr; } }

/* steps */
.lp-steps { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-steps li { padding: 24px; border-radius: 20px; border: 1px solid var(--line); counter-increment: s; }
.lp-steps li::before { display: block; margin-bottom: 10px; content: counter(s, decimal-leading-zero); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--teal); font-variant-numeric: tabular-nums; }
.lp-steps h3 { font-size: 1.15rem; }
@media (max-width: 760px) { .lp-steps { grid-template-columns: 1fr; } .lp-final { margin-left: var(--gutter); margin-right: var(--gutter); } }
.lp-steps p { color: var(--soft); font-size: 1rem; margin-top: 6px; }

/* final */
.lp-final { max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: clamp(56px, 7vw, 88px) auto 0; border-radius: 28px; background: var(--teal-deep); color: #fff; text-align: center; padding: clamp(44px, 6vw, 64px) var(--gutter); position: relative; overflow: hidden; }
.lp-final::before { content: ""; position: absolute; inset: -40% -10% auto; height: 120%; background: radial-gradient(50% 50% at 50% 0%, rgba(94,234,212,.25), transparent 70%); pointer-events: none; }
.lp-final h2 { max-width: 24ch; margin: 0 auto; position: relative; }
.lp-final p { color: rgba(255,255,255,.78); margin: 12px auto 24px; max-width: 40ch; font-size: 1.15rem; position: relative; }
.lp-final .lp-btn { position: relative; }
.lp-final .lp-fine a { color: #fff; }
.lp-final .lp-fine { color: rgba(255,255,255,.6); position: relative; margin: 16px auto 0; }

.lp-footer { padding: 28px 0 36px; font-size: .88rem; color: var(--faint); }
.lp-footer .lp-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.lp-footer a { color: var(--soft); text-decoration: none; }

/* ------------------------------------------------ motion: the hero rises once on load */
@keyframes lp-rise { from { opacity: 0; transform: translateY(24px); } }
.lp-rise { animation: lp-rise .9s var(--spring) both; }
.lp-d1 { animation-delay: .06s; } .lp-d2 { animation-delay: .12s; } .lp-d3 { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .lp-rise { animation: none; }
  .lp-btn, .lp-link svg, .tile { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .lp-nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}