/* ===========================================================================
   E-chereta landing page.
   Built on the app's own tokens so the marketing page and the product do not
   look like two different companies. Every animation is CSS-driven with a
   couple of tiny IntersectionObservers — no animation library — because the
   audience is on Ethiopian mobile networks and a 200KB library to move some
   boxes is a bad trade.
   =========================================================================== */

.lp {
  --lp-navy: #0A1F44;
  --lp-navy-2: #12305f;
  --lp-accent: #E8842C;
  --lp-accent-2: #ffb56b;
  --lp-ink: #0b1424;
  --lp-body: #475569;
  --lp-line: rgba(10, 31, 68, 0.1);
  --lp-card: rgba(255, 255, 255, 0.72);
  --lp-telegram: #229ED9;
  --lp-telegram-2: #2AABEE;

  font-family: var(--font-sans);
  color: var(--lp-ink);
  background: #f6f8fc;
  overflow-x: hidden;
}

/* The landing page is light, always.
   The app follows the visitor's theme, but this page does not: it is the first
   thing anyone sees, its palette carries the brand, and a dark variant of a
   marketing page is a second design to keep correct for no benefit. The theme
   bootstrap still runs so the *app* remembers the choice — it just does not
   repaint this page. */

.lp * { box-sizing: border-box; }
/* overflow-x on <body> alone does not constrain the document. */
html:has(.lp) { overflow-x: hidden; }
.lp-wrap { width: min(1200px, calc(100vw - 40px)); margin: 0 auto; }

/* ---- scroll progress ------------------------------------------------------ */

.lp-progress {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--lp-accent), #ffd7a8, var(--lp-accent));
  z-index: 90;
}

/* ---- nav ------------------------------------------------------------------ */

.lp-nav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--lp-card) 70%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, padding .3s;
}
.lp-nav.is-stuck { border-bottom-color: var(--lp-line); padding: 9px 0; }

.lp-brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.lp-brand img { width: 38px; height: 38px; border-radius: 11px; }
.lp-navlinks { display: flex; gap: 4px; margin-left: auto; }
.lp-navlinks a {
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--lp-body); text-decoration: none; transition: background .2s, color .2s;
}
.lp-navlinks a:hover { background: var(--lp-line); color: var(--lp-ink); }
.lp-nav-cta { display: flex; gap: 9px; align-items: center; }

/* The header is sticky, so its "Start 30 days free" is the call to action at
   every scroll position — which only helps if it is not clipped. At 390px the
   full label pushed the row past the viewport and `overflow-x: hidden` on the
   page quietly cut the right edge off the button. Two labels rather than a
   truncation: a half-word button reads as breakage, and Amharic and Tigrinya
   set wider than English, so a CSS ellipsis would strand them first. */
.lp-cta-short { display: none; }

@media (max-width: 860px) { .lp-navlinks { display: none; } .lp-nav-cta { margin-left: auto; } }

/* ---- buttons -------------------------------------------------------------- */

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px;
  font: inherit; font-size: 14.5px; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s;
}
.lp-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--lp-accent), #f0a04b);
  box-shadow: 0 10px 26px -10px rgba(232, 132, 44, .85);
}
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(232,132,44,.95); }
/* Sheen sweeps across on hover — pure transform, no repaint of the gradient. */
.lp-btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
}
.lp-btn-primary:hover::after { transform: translateX(120%); transition: transform .7s; }

.lp-btn-ghost {
  color: var(--lp-ink); background: transparent; border-color: var(--lp-line);
}
.lp-btn-ghost:hover { background: var(--lp-line); transform: translateY(-1px); }

/* No ::after sheen, unlike .lp-btn-primary: the orange "Get access" has to stay
   the single loudest thing on this page, and two sweeping buttons read as two
   competing calls to action. */
.lp-btn-telegram {
  color: #fff;
  background: linear-gradient(135deg, var(--lp-telegram), var(--lp-telegram-2));
  box-shadow: 0 10px 26px -10px rgba(34, 158, 217, 0.85);
}
.lp-btn-telegram:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(34, 158, 217, 0.95); }
.lp-btn-lg { padding: 16px 30px; font-size: 15.5px; }

/* ---- hero ------------------------------------------------------------------ */

.lp-hero {
  position: relative;
  padding: 78px 0 90px;
  /* Contains the aurora. body's overflow-x:hidden does NOT stop <html> from
     scrolling, so the oversized blobs were widening the document: 1574px on a
     1440 screen, 561 on a 390 phone. Clipping them here is invisible (they are
     blurred to nothing at the edges) and fixes both. */
  overflow: hidden;
}

/* Drifting aurora. Two blurred blobs on long, offset animations — cheap, and
   it reads as depth rather than as a video. */
.lp-aurora { position: absolute; inset: -20% -10% auto -10%; height: 780px; pointer-events: none; z-index: 0; filter: blur(70px); opacity: .55; }
.lp-blob { position: absolute; border-radius: 50%; will-change: transform; }
.lp-blob-1 { width: min(520px, 78vw); height: min(520px, 78vw); left: 4%; top: 2%;  background: radial-gradient(circle, #7aa7ff, transparent 68%); animation: lp-drift-a 22s ease-in-out infinite; }
.lp-blob-2 { width: min(460px, 70vw); height: min(460px, 70vw); right: 6%; top: 16%; background: radial-gradient(circle, var(--lp-accent-2), transparent 66%); animation: lp-drift-b 26s ease-in-out infinite; }
.lp-blob-3 { width: min(400px, 62vw); height: min(400px, 62vw); left: 42%; top: 30%; background: radial-gradient(circle, #9be7d4, transparent 70%); animation: lp-drift-c 30s ease-in-out infinite; }
@keyframes lp-drift-a { 50% { transform: translate3d(90px, 60px, 0) scale(1.14); } }
@keyframes lp-drift-b { 50% { transform: translate3d(-110px, 40px, 0) scale(1.08); } }
@keyframes lp-drift-c { 50% { transform: translate3d(40px, -70px, 0) scale(.9); } }

/* Faint grid, masked to fade out — grounds the aurora. */
.lp-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--lp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
}

.lp-hero-inner { position: relative; z-index: 2; text-align: center; }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 8px; border-radius: 999px;
  background: var(--lp-card); border: 1px solid var(--lp-line);
  font-size: 12.5px; font-weight: 650; color: var(--lp-body);
  backdrop-filter: blur(10px);
}
.lp-eyebrow b { color: var(--lp-ink); }
.lp-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #10b981; flex: none;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: lp-pulse 2.2s infinite;
}
@keyframes lp-pulse {
  70% { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.lp-h1 {
  font-size: clamp(38px, 6.4vw, 74px);
  line-height: 1.03; letter-spacing: -.035em; font-weight: 850;
  margin: 22px auto 0; max-width: 15ch;
}
.lp-h1 .lp-gradient {
  background: linear-gradient(100deg, var(--lp-accent) 10%, #ffcf9a 40%, var(--lp-accent) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lp-shimmer 6s linear infinite;
}
@keyframes lp-shimmer { to { background-position: 220% 0; } }

/* Rotating noun under the headline. Each word is absolutely stacked and
   cycled by a single class swap, so no layout thrash per tick. */
.lp-rotator { display: inline-grid; vertical-align: bottom; text-align: center; }
.lp-rotator span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(16px) rotateX(-40deg);
  transition: opacity .5s, transform .5s; transform-origin: 50% 0;
  /* The gradient is applied per word, never to the wrapper. background-clip:
     text builds its mask from every descendant glyph, so a gradient on the
     wrapper painted all four words at once no matter what opacity the hidden
     children had — they came out overlapping. */
  background: linear-gradient(100deg, var(--lp-accent) 10%, #ffcf9a 40%, var(--lp-accent) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lp-shimmer 6s linear infinite;
}
.lp-rotator span.is-on { opacity: 1; transform: none; }
/* The outgoing word leaves upward while the next arrives from below. Without
   a separate exit direction both crossfaded through the same space and the
   two words read as one garbled string for half a second. */
.lp-rotator span.is-out {
  opacity: 0;
  transform: translateY(-18px) rotateX(40deg);
  transition: opacity .32s, transform .32s;
}

.lp-sub {
  font-size: clamp(15px, 1.8vw, 18.5px); line-height: 1.65; color: var(--lp-body);
  max-width: 58ch; margin: 22px auto 0;
}
.lp-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.lp-note { font-size: 12.5px; color: var(--lp-body); margin-top: 14px; opacity: .85; }

/* ---- live counters --------------------------------------------------------- */

.lp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-top: 54px; position: relative; z-index: 2;
}
.lp-stat {
  padding: 22px 18px; border-radius: 18px; text-align: center;
  background: var(--lp-card); border: 1px solid var(--lp-line);
  backdrop-filter: blur(12px);
}
.lp-stat-n { font-size: clamp(26px, 3.6vw, 40px); font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lp-stat-l { font-size: 12px; font-weight: 650; color: var(--lp-body); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* ---- floating tender cards -------------------------------------------------- */

.lp-float { position: relative; z-index: 2; margin-top: 62px; perspective: 1400px; }
.lp-float-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lp-tcard {
  width: 300px; padding: 16px 17px; border-radius: 18px; text-align: left;
  background: var(--lp-card); border: 1px solid var(--lp-line);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -26px rgba(10, 31, 68, .5);
  animation: lp-bob 7s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.lp-tcard:nth-child(2) { animation-delay: -2.3s; }
.lp-tcard:nth-child(3) { animation-delay: -4.6s; }
.lp-tcard:hover { transform: translateY(-8px) rotateX(4deg); box-shadow: 0 34px 60px -28px rgba(10,31,68,.6); }
@keyframes lp-bob { 50% { transform: translateY(-13px); } }

.lp-tcard-top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.lp-tcard-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 800; flex: none; }
.lp-tcard-org { font-size: 11.5px; font-weight: 750; color: var(--lp-body); line-height: 1.3; }
.lp-tcard-title { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.lp-tcard-meta { display: flex; gap: 7px; margin-top: 12px; }
.lp-chipmini { font-size: 10px; font-weight: 750; padding: 4px 9px; border-radius: 999px; background: var(--lp-line); color: var(--lp-body); }
.lp-chipmini.is-urgent { background: rgba(232,132,44,.16); color: #b45309; }

/* ---- section furniture ------------------------------------------------------ */

.lp-section { padding: 92px 0; position: relative; }
.lp-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-accent); }
.lp-h2 { font-size: clamp(27px, 3.6vw, 42px); font-weight: 830; letter-spacing: -.03em; line-height: 1.14; margin: 12px 0 0; max-width: 20ch; }
.lp-lede { font-size: 16px; line-height: 1.7; color: var(--lp-body); max-width: 62ch; margin-top: 15px; }
.lp-center { text-align: center; }
.lp-center .lp-h2, .lp-center .lp-lede { margin-left: auto; margin-right: auto; }

/* ---- feature grid ------------------------------------------------------------ */

.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 46px; }
.lp-feat {
  position: relative; overflow: hidden;
  padding: 26px 24px 28px; border-radius: 22px;
  background: var(--lp-card); border: 1px solid var(--lp-line);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.lp-feat:hover { transform: translateY(-5px); border-color: rgba(232,132,44,.4); box-shadow: 0 26px 50px -30px rgba(10,31,68,.55); }
/* Cursor-tracked glow: two CSS vars set from JS, so hover costs one paint. */
.lp-feat::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(232,132,44,.16), transparent 62%);
}
.lp-feat:hover::before { opacity: 1; }
.lp-feat-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 21px; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(232,132,44,.18), rgba(122,167,255,.18));
  border: 1px solid var(--lp-line);
}
.lp-feat h3 { font-size: 17px; font-weight: 780; margin: 0 0 8px; letter-spacing: -.015em; }
.lp-feat p { font-size: 14px; line-height: 1.68; color: var(--lp-body); margin: 0; }
.lp-feat-tag {
  display: inline-block; margin-top: 13px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--lp-accent);
}

/* ---- marquee ----------------------------------------------------------------- */

.lp-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp-marquee-track { display: flex; gap: 11px; width: max-content; animation: lp-slide 46s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lp-slide { to { transform: translateX(-50%); } }
.lp-mchip {
  padding: 9px 17px; border-radius: 999px; white-space: nowrap;
  background: var(--lp-card); border: 1px solid var(--lp-line);
  font-size: 13px; font-weight: 650; color: var(--lp-body);
}

/* ---- steps -------------------------------------------------------------------- */

.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 46px; counter-reset: step; }
.lp-step { position: relative; padding: 26px 22px; border-radius: 20px; background: var(--lp-card); border: 1px solid var(--lp-line); }
.lp-step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -15px; left: 22px;
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 14px; font-weight: 850; color: #fff;
  background: linear-gradient(135deg, var(--lp-navy), var(--lp-navy-2));
  box-shadow: 0 8px 18px -8px rgba(10,31,68,.7);
}
.lp-step h3 { font-size: 16px; font-weight: 760; margin: 16px 0 7px; }
.lp-step p { font-size: 14px; line-height: 1.65; color: var(--lp-body); margin: 0; }

/* ---- split feature ------------------------------------------------------------- */

.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
@media (max-width: 900px) { .lp-split { grid-template-columns: 1fr; gap: 34px; } }

.lp-panel {
  border-radius: 24px; padding: 26px; border: 1px solid var(--lp-line);
  background: linear-gradient(160deg, rgba(122,167,255,.12), rgba(232,132,44,.09));
}
.lp-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 13px; }
.lp-list li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.6; color: var(--lp-body); }
.lp-tick { width: 21px; height: 21px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(16,185,129,.16); color: #059669; font-size: 12px; font-weight: 800; }

/* ---- CTA ------------------------------------------------------------------------ */

.lp-cta {
  position: relative; overflow: hidden; text-align: center;
  padding: 74px 30px; border-radius: 32px;
  background: linear-gradient(135deg, var(--lp-navy), var(--lp-navy-2) 60%, #1c4488);
  color: #fff;
}
.lp-cta::before {
  content: ""; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, rgba(232,132,44,.28), transparent 40%);
  animation: lp-spin 14s linear infinite;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-cta > * { position: relative; z-index: 1; }
.lp-cta h2 { font-size: clamp(27px, 3.8vw, 44px); font-weight: 850; letter-spacing: -.03em; margin: 0 auto; max-width: 18ch; }
.lp-cta p { color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.65; max-width: 52ch; margin: 16px auto 0; }

/* ---- footer ---------------------------------------------------------------------- */

.lp-footer { padding: 46px 0 60px; border-top: 1px solid var(--lp-line); }
.lp-footer-in { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.lp-footer small { color: var(--lp-body); font-size: 12.5px; }
.lp-footer nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.lp-footer nav a { font-size: 13px; color: var(--lp-body); text-decoration: none; }
.lp-footer nav a:hover { color: var(--lp-accent); }

/* ---- scroll reveal ---------------------------------------------------------------- */

.lp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.lp-reveal.is-in { opacity: 1; transform: none; }
.lp-reveal[data-d="1"] { transition-delay: .09s; }
.lp-reveal[data-d="2"] { transition-delay: .18s; }
.lp-reveal[data-d="3"] { transition-delay: .27s; }
.lp-reveal[data-d="4"] { transition-delay: .36s; }
.lp-reveal[data-d="5"] { transition-delay: .45s; }

/* ---- motion preferences -------------------------------------------------------------
   Everything decorative stops. The page still reveals — content must never be
   stuck invisible because someone asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .lp-reveal { opacity: 1; transform: none; }
  .lp-rotator span { opacity: 0; }
  .lp-rotator span.is-on { opacity: 1; }
}

/* ---- nav on small screens ---------------------------------------------------
   At 390px the brand and both buttons each wrapped onto two lines. Shrink the
   type and padding rather than dropping a control: "Sign in" is how a returning
   customer gets in, and it should not be the thing that disappears. */
@media (max-width: 560px) {
  .lp-nav .lp-wrap { gap: 8px; }
  .lp-brand { font-size: 15px; gap: 8px; white-space: nowrap; }
  .lp-brand img { width: 30px; height: 30px; border-radius: 9px; }
  .lp-nav-cta { gap: 6px; }
  .lp-cta-full { display: none; }
  .lp-cta-short { display: inline; }
  .lp-btn { padding: 9px 13px; font-size: 12.5px; white-space: nowrap; }
  .lp-btn-lg { padding: 14px 24px; font-size: 14.5px; }
  .lp-hero { padding: 46px 0 64px; }
  /* Nine sections at 64px top and bottom is 1,152px of a 17,000px page spent on
     nothing — about a screen and a half of empty. 44px still separates them. */
  .lp-section { padding: 44px 0; }
  .lp-stats { gap: 10px; margin-top: 40px; }
  .lp-tcard { width: 100%; }
}

/* Below ~400px even that is tight — the wordmark is the one thing the logo
   already says, so it goes last.
   Raised from 379px: with the shortened CTA the row still measures about 340px
   of nowrap content, and a 390px phone gives it a 350px box. Ten pixels is not
   slack, it is luck, and `html:has(.lp) { overflow-x: hidden }` means the way
   you find out is the "Start free" button being quietly clipped at the right
   edge — on the one control the whole page is asking the visitor to press. */
@media (max-width: 400px) {
  .lp-brand span { display: none; }
}

/* ===========================================================================
   Delivery scene — the van drives in, the box opens, the document lifts out.
   Plain CSS on inline SVG: the whole thing is transforms and opacity, so it
   composites on the GPU and costs nothing on a mid-range Android.
   The sequence starts only when the section scrolls into view (.is-running),
   otherwise it would have finished before anyone reached it.
   =========================================================================== */

.lp-scene {
  position: relative;
  height: 200px;
  margin: 26px 0 4px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(122,167,255,.10), rgba(232,132,44,.08));
  border: 1px solid var(--lp-line);
}

/* road */
.lp-road { position: absolute; left: 0; right: 0; bottom: 44px; height: 2px; background: var(--lp-line); }
.lp-road::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--lp-accent) 0 18px, transparent 18px 40px);
  opacity: .5;
}
.lp-scene.is-running .lp-road::after { animation: lp-road 1.1s linear infinite; }
@keyframes lp-road { to { transform: translateX(-40px); } }

/* van */
.lp-van {
  position: absolute; bottom: 30px; left: -190px;
  width: 168px; height: 78px;
  transform: translateX(0);
}
.lp-scene.is-running .lp-van { animation: lp-van-in 2.4s cubic-bezier(.16,.9,.3,1) forwards; }
@keyframes lp-van-in {
  0%   { transform: translateX(0); }
  70%  { transform: translateX(330px); }
  78%  { transform: translateX(322px); }   /* little settle as it stops */
  100% { transform: translateX(326px); }
}
/* a gentle bounce over the road while it moves */
.lp-scene.is-running .lp-van-body { animation: lp-van-bounce .42s ease-in-out 6; }
@keyframes lp-van-bounce { 50% { transform: translateY(-2.5px); } }

.lp-wheel { transform-origin: center; transform-box: fill-box; }
.lp-scene.is-running .lp-wheel { animation: lp-roll .5s linear 5; }
@keyframes lp-roll { to { transform: rotate(360deg); } }

/* parcel: appears at the van's door, hops to the ground, then opens */
.lp-parcel {
  position: absolute; bottom: 40px; left: 300px;
  width: 62px; height: 58px;
  opacity: 0;
}
.lp-scene.is-running .lp-parcel { animation: lp-parcel-out .7s ease-out 2.3s forwards; }
@keyframes lp-parcel-out {
  0%   { opacity: 0; transform: translate(-26px, -14px) scale(.7); }
  60%  { opacity: 1; transform: translate(6px, -22px) scale(1); }
  100% { opacity: 1; transform: translate(14px, 0) scale(1); }
}

/* the two flaps swing open */
.lp-flap-l, .lp-flap-r { transform-box: fill-box; transform-origin: bottom center; }
.lp-scene.is-running .lp-flap-l { animation: lp-flap-l .6s ease-out 3.1s forwards; }
.lp-scene.is-running .lp-flap-r { animation: lp-flap-r .6s ease-out 3.1s forwards; }
@keyframes lp-flap-l { to { transform: rotate(-118deg) translateY(1px); } }
@keyframes lp-flap-r { to { transform: rotate(118deg) translateY(1px); } }

/* the document rises out of the open box */
/* Scoped to the scene on purpose. Unscoped, this `opacity: 0` also caught the
   twelve .lp-doc chips in the workspace section — a different thing that
   happens to share the class name — and rendered every one of them invisible,
   leaving two rows of blank page where the document list should be. */
.lp-scene .lp-doc { transform-box: fill-box; transform-origin: bottom center; opacity: 0; }
.lp-scene.is-running .lp-doc { animation: lp-doc-rise 1s cubic-bezier(.2,.9,.25,1) 3.5s forwards; }
@keyframes lp-doc-rise {
  0%   { opacity: 0; transform: translateY(10px) scale(.85); }
  55%  { opacity: 1; transform: translateY(-20px) scale(1); }
  100% { opacity: 1; transform: translateY(-16px) scale(1); }
}

/* sparkle ring when it lands */
.lp-pop { position: absolute; bottom: 62px; left: 330px; width: 12px; height: 12px; opacity: 0; }
.lp-scene.is-running .lp-pop { animation: lp-pop 1s ease-out 3.6s; }
@keyframes lp-pop {
  0%   { opacity: .9; transform: scale(.3); box-shadow: 0 0 0 0 rgba(232,132,44,.6); border-radius: 50%; }
  100% { opacity: 0;  transform: scale(1);  box-shadow: 0 0 0 40px rgba(232,132,44,0); border-radius: 50%; }
}

/* the caption that lands with the document */
.lp-scene-label {
  position: absolute; top: 16px; left: 20px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--lp-accent); opacity: 0;
}
.lp-scene.is-running .lp-scene-label { animation: lp-fade-in .6s ease-out 3.9s forwards; }
@keyframes lp-fade-in { to { opacity: 1; } }

@media (max-width: 560px) {
  .lp-scene { height: 168px; }
  .lp-van { width: 132px; bottom: 26px; }
  @keyframes lp-van-in { 0% { transform: translateX(0); } 70% { transform: translateX(240px); } 100% { transform: translateX(236px); } }
  .lp-parcel { left: 218px; width: 50px; }
  .lp-pop { left: 240px; }
}

/* ---- pulse rows (coverage panel) ------------------------------------------- */

.lp-pulse-row {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 13px;
  background: rgba(255,255,255,.5); border: 1px solid var(--lp-line);
}
/* Little equaliser: says "this is live" without naming anything. */
.lp-bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.lp-bars i { width: 3px; border-radius: 2px; background: var(--lp-accent); opacity: .65; height: 5px; }
.lp-bars i:nth-child(1) { animation: lp-eq 1.1s ease-in-out infinite; }
.lp-bars i:nth-child(2) { animation: lp-eq 1.1s ease-in-out .18s infinite; }
.lp-bars i:nth-child(3) { animation: lp-eq 1.1s ease-in-out .36s infinite; }
.lp-bars i:nth-child(4) { animation: lp-eq 1.1s ease-in-out .54s infinite; }
@keyframes lp-eq { 50% { height: 15px; } }

@media (prefers-reduced-motion: reduce) {
  /* The scene has a resting state worth showing: van parked, box open. */
  .lp-van { transform: translateX(326px); }
  .lp-parcel { opacity: 1; transform: translate(14px, 0); }
  .lp-flap-l { transform: rotate(-118deg); }
  .lp-flap-r { transform: rotate(118deg); }
  .lp-scene .lp-doc { opacity: 1; transform: translateY(-16px); }
  .lp-scene-label { opacity: 1; }
}

/* The scene and the tracking card are one story: the van arrives, and the card
   below is the request that produced it. Grouping them into a single grid
   child also stops the card wrapping onto its own row. */
.lp-delivery-col { display: flex; flex-direction: column; gap: 14px; }
.lp-track-card { margin: 0; }

/* The rail fills as the card reveals, so "requested → delivered" reads as
   progress rather than as a static diagram. */
.lp-rail-fill { position: relative; height: 4px; border-radius: 9px; background: var(--lp-line); overflow: hidden; }
.lp-rail-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: 9px;
  background: var(--lp-accent); transform: scaleX(0); transform-origin: 0 50%;
}
.lp-reveal.is-in .lp-rail-fill::after { animation: lp-rail 900ms cubic-bezier(.2,.8,.2,1) forwards; }
.lp-reveal.is-in [data-rail="1"]::after { animation-delay: .15s; }
.lp-reveal.is-in [data-rail="2"]::after { animation-delay: .5s; }
.lp-reveal.is-in [data-rail="3"]::after { animation-delay: .85s; }
.lp-reveal.is-in [data-rail="4"]::after { animation-delay: 1.2s; }
@keyframes lp-rail { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .lp-rail-fill::after { transform: scaleX(1); }
}
.lp-rail-label {
  font-size: 9px; margin-top: 5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--lp-body); transition: color .3s, font-weight .3s;
}
.lp-reveal.is-in .lp-rail-label { animation: lp-label-on .4s ease-out forwards; }
.lp-reveal.is-in [data-rail="1"] + .lp-rail-label { animation-delay: .5s; }
.lp-reveal.is-in [data-rail="2"] + .lp-rail-label { animation-delay: .85s; }
.lp-reveal.is-in [data-rail="3"] + .lp-rail-label { animation-delay: 1.2s; }
.lp-reveal.is-in [data-rail="4"] + .lp-rail-label { animation-delay: 1.55s; }
@keyframes lp-label-on { to { color: var(--lp-accent); font-weight: 800; } }

/* ===========================================================================
   Merge scene — scattered notices fly in, a duplicate is caught and dropped,
   the rest stack into one feed. Shows the de-duplication claim rather than
   asserting it.

   Everything sits on a FIXED-WIDTH stage centred in the panel. The first
   attempt animated by fixed pixel distances inside a fluid container, so the
   notices stopped short of the feed box on any width but the one I guessed.
   =========================================================================== */

.lp-merge {
  position: relative; height: 150px; margin-bottom: 14px;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.5); border: 1px solid var(--lp-line);
}
.lp-merge-stage { position: absolute; inset: 0; width: 300px; margin: 0 auto; }

.lp-merge-feed {
  position: absolute; left: 186px; top: 18px; width: 104px; height: 96px;
  border-radius: 10px; border: 1.5px dashed rgba(232,132,44,.5);
  background: rgba(232,132,44,.05);
}
.lp-merge-feed span {
  position: absolute; left: 0; right: 0; top: -14px; text-align: center;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lp-accent);
}

.lp-note-card {
  position: absolute; left: 6px; width: 92px; height: 20px;
  border-radius: 6px; background: #fff; border: 1px solid var(--lp-line);
  box-shadow: 0 4px 10px -6px rgba(10,31,68,.45);
  display: flex; align-items: center; gap: 5px; padding: 0 7px;
  opacity: 0;
}
.lp-note-card::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--lp-accent); opacity: .85; flex: none; }
.lp-note-card::after  { content: ""; height: 3px; border-radius: 2px; background: var(--lp-line); flex: 1; }

/* One keyframe, three landing slots set per card via --slot. 186 - 6 = 180px
   of travel puts each card's left edge on the feed box's left edge. */
.lp-merge.is-running .lp-note-card { animation: lp-fly 3.6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes lp-fly {
  0%   { opacity: 0; transform: translate(-40px, 0) scale(.9); }
  16%  { opacity: 1; transform: translate(0, 0) scale(1); }
  50%  { opacity: 1; transform: translate(120px, 0) scale(1); }
  70%, 100% { opacity: 1; transform: translate(186px, var(--slot)) scale(.92); }
}
.lp-note-card:nth-child(2) { top: 16px; --slot: 12px;  animation-delay: 0s; }
.lp-note-card:nth-child(3) { top: 52px; --slot: 2px;   animation-delay: .4s; }
.lp-note-card:nth-child(4) { top: 88px; --slot: -8px;  animation-delay: .8s; }

/* The duplicate flies in like the rest, is caught at the gate, and drops. */
.lp-note-dupe { top: 118px; border-color: rgba(244,63,94,.55); }
.lp-merge.is-running .lp-note-dupe { animation: lp-dupe 3.6s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: 1.2s; }
@keyframes lp-dupe {
  0%   { opacity: 0; transform: translate(-40px, 0) scale(.9); }
  16%  { opacity: 1; transform: translate(0, 0) scale(1); }
  50%  { opacity: 1; transform: translate(120px, 0) scale(1); }
  60%  { opacity: 1; transform: translate(150px, 0) scale(1.04); }
  80%  { opacity: 0; transform: translate(140px, 30px) scale(.7) rotate(-10deg); }
  100% { opacity: 0; transform: translate(-40px, 0) scale(.9); }
}
.lp-dupe-tag {
  position: absolute; left: 96px; top: 122px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #e11d48; opacity: 0; white-space: nowrap;
}
.lp-merge.is-running .lp-dupe-tag { animation: lp-dupe-tag 3.6s linear infinite; animation-delay: 1.2s; }
@keyframes lp-dupe-tag {
  0%, 55% { opacity: 0; }
  62%, 78% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-note-card { opacity: 1; transform: translate(186px, var(--slot)) scale(.92); }
  .lp-note-dupe { opacity: .3; transform: translate(140px, 20px) scale(.8); }
  .lp-dupe-tag { opacity: 1; }
}

/* ---- the workspace flow ------------------------------------------------------
   Numbered like .lp-steps but with the number inline rather than as a counter,
   because these three are a sequence the reader follows rather than a set of
   equal features. */

.lp-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 46px;
}

.lp-flow-step {
  position: relative;
  padding: 26px 22px;
  border-radius: 20px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
}

.lp-flow-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 850;
  color: #fff;
  background: linear-gradient(135deg, var(--lp-accent), #f0a04b);
  box-shadow: 0 8px 18px -8px rgba(232, 132, 44, .7);
}

.lp-flow-step h3 { font-size: 16px; font-weight: 760; margin: 16px 0 7px; }
.lp-flow-step p { font-size: 14px; line-height: 1.65; color: var(--lp-body); margin: 0; }

/* ---- language picker ---------------------------------------------------------
   On the landing page specifically, because a first-time visitor has nothing
   stored and this is the page that has to speak to them before they sign up. */

.lp-lang { position: relative; }

.lp-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.lp-lang-btn:hover { border-color: var(--lp-accent); }
.lp-lang-btn svg { width: 17px; height: 17px; }

.lp-lang-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 168px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--lp-line);
  background: var(--lp-card);
  box-shadow: 0 18px 40px -18px rgba(10, 31, 68, .55);
}
.lp-lang-pop[hidden] { display: none; }

.lp-lang-opt {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.lp-lang-opt:hover { background: rgba(10, 31, 68, .07); }
.lp-lang-opt[aria-current="true"] { font-weight: 800; color: var(--lp-accent); }

@media (max-width: 520px) {
  .lp-lang-btn span { display: none; }
  .lp-lang-btn { padding: 9px; }
}

/* ---- collapsed sections on phones -------------------------------------------
 * Every grid on this page is `repeat(auto-fit, minmax(290px, 1fr))`, which at a
 * 350px content width becomes one column without saying so: a desktop row of
 * four cards turns into four full-height blocks. Eighteen of them in one section
 * is close to seven phone screens of scrolling before the next argument starts.
 * js/landing-collapse.js hides the overflow behind a button below 560px.
 *
 * landing.html loads no app.css, so there is no global `[hidden]` rule to lean
 * on here. The UA stylesheet's own `[hidden] { display: none }` loses to any
 * author `display` — `.lp-pricing .lp-feat` sets `display: flex` — so this is
 * stated explicitly rather than assumed.
 */
.lp [hidden] { display: none !important; }

.lp-showall {
  display: none;                 /* only ever shown by the script, on a phone */
  margin: 18px auto 0;
  width: min(320px, 100%);
}
/* flex, not inline-flex: `margin: 18px auto 0` above only centres a
   block-level box, and .lp-btn is inline-flex. */
.lp-showall:not([hidden]) { display: flex; }

/* The workspace's document list. Twelve items is too many for cards and too
   few for a table, so it reads as a dense scannable row - the point is the
   length of the list, which a reader takes in at a glance. */
.lp-doclist {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 36px;
}

.lp-doc {
  font-size: 13px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  color: var(--lp-body);
  white-space: nowrap;
}

/* ---- pricing ------------------------------------------------------------
 * Reuses .lp-feat so the cards inherit the section's hover lift and the
 * cursor-tracked glow js/landing.js attaches to every .lp-feat. Only the
 * price, the list and the featured treatment are new.
 */
.lp-pricing .lp-feat { display: flex; flex-direction: column; }

.lp-price {
  font-size: 30px;
  font-weight: 820;
  letter-spacing: -0.03em;
  color: var(--lp-ink);
  margin: 4px 0 10px;
}
.lp-price span { font-size: 16px; font-weight: 780; }
.lp-price small { font-size: 13px; font-weight: 700; color: var(--lp-body); }

.lp-plan-list {
  list-style: none;
  margin: 14px 0 20px;
  padding: 0;
  flex: 1;
}
.lp-plan-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-body);
}
.lp-plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #16a34a;
}

/* The featured tier. A border, a warm wash and a flag rather than a scale
   transform: the cards sit in a responsive grid and enlarging one reflows the
   row. The price is larger and the saving is said in birr, which is the
   number a buyer compares. */
.lp-pricing .lp-feat.is-featured {
  border: 2px solid rgba(232, 132, 44, 0.75);
  background:
    linear-gradient(180deg, rgba(232, 132, 44, 0.10), rgba(232, 132, 44, 0) 55%),
    var(--lp-card);
  box-shadow: 0 30px 64px -28px rgba(232, 132, 44, 0.65),
              0 0 0 6px rgba(232, 132, 44, 0.08);
}
.lp-pricing .lp-feat.is-featured .lp-price { font-size: 38px; }
.lp-pricing .lp-feat.is-featured .lp-plan-list li { color: var(--lp-ink); }
.lp-pricing .lp-feat.is-featured .lp-btn-primary {
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 15px;
}

/* "Save 900 ETB" under the year's price. Hidden while an offer link is
   showing the struck-through price: the offer's own saving is bigger, and two
   different savings on one card would contradict each other. */
.lp-save {
  align-self: flex-start;
  margin: -4px 0 8px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 820;
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.35);
}
.lp-was:not([hidden]) ~ .lp-save { display: none; }
.lp-feat-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--lp-accent), #f0a04b);
  padding: 4px 9px;
  border-radius: 999px;
}

/* On a phone the tiers stack, and the year led by "Most popular" would
   otherwise be the last thing reached, under both cheaper ones. It leads
   instead. Only where the grid is one column: side by side, moving it would
   break the row. */
@media (max-width: 620px) {
  .lp-pricing .lp-feat.is-featured { order: -1; }
}

.lp-pricing .lp-btn { width: 100%; }

/* The free-month banner above the tiers. Leads the section because it is the
   strongest thing this page can say to somebody who has not signed up. */
.lp-trial {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 42px;
  padding: 16px 22px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(232, 132, 44, 0.35);
  background: linear-gradient(135deg, rgba(232, 132, 44, 0.12), rgba(122, 167, 255, 0.1));
}
.lp-trial strong { font-size: 15px; font-weight: 820; color: var(--lp-ink); }
.lp-trial span { font-size: 13.5px; color: var(--lp-body); }

/* The banner sits between the heading and the grid, so the grid's own top
   margin would double the gap. */
.lp-trial + .lp-pricing { margin-top: 18px; }

/* The offer banner, under the free-month one. This page does not load
   app.css, whose [hidden] rule would otherwise beat `display: flex`. */
.lp-promo[hidden] { display: none; }
.lp-trial + .lp-promo { margin-top: 12px; }
.lp-promo { border-color: rgba(22, 163, 74, 0.45);
            background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(122, 167, 255, 0.08)); }

/* The price before the offer, struck through above the one charged. */
.lp-was {
  font-size: 15px;
  font-weight: 750;
  color: var(--lp-body);
  text-decoration: line-through;
  margin-top: 4px;
}
.lp-was[hidden] { display: none; }
.lp-was + .lp-price { margin-top: 0; }

/* The one feature with a page of its own. */
.lp-feat-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ebid-accent, #229ed9);
  text-decoration: none;
}
.lp-feat-link:hover { text-decoration: underline; }