/* ──────────────────────────────────────────────────────────────────────
   Leasystream — marketing theme  ·  "warm, trustworthy, capable"
   ──────────────────────────────────────────────────────────────────────
   Register: BRAND. Loaded after leaseness.css on every public page
   (base-out.html). Self-contained `lm-` namespace so it never collides
   with the app's `ln-` system. Committed-warm-calm: a grounded clay
   carries the hero accents, CTAs and key moments; clean warm-white
   surfaces; a warm green for money-positive states; warm-espresso for the
   final band + footer. Indigo is deliberately dropped here — that is the
   marketing↔product distinction. WCAG AA throughout.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Fonts: Spectral (warm serif display) + Inter (body, app-continuous) ── */

:root {
  /* brand — plum / wine. Leasystream's hue in the Neptunes family palette
     (see docs/NEPTUNES_BRAND_PALETTE.md). Token names stay --lm-clay* for
     continuity; treat them as "the brand-accent ramp", not literally clay. */
  --lm-clay:        oklch(0.585 0.118 345);  /* bright / decorative accent */
  --lm-clay-deep:   oklch(0.495 0.122 345);  /* primary button bg (AA white) */
  --lm-clay-press:  oklch(0.435 0.118 345);  /* active/press */
  --lm-clay-tint:   oklch(0.952 0.032 348);  /* soft tint surface */
  --lm-clay-line:   oklch(0.890 0.055 348);  /* tinted hairline */
  --lm-clay-ink:    oklch(0.385 0.095 345);  /* text on tint, AA on tint */

  /* warm ink ramp (low chroma, warm hue) */
  --lm-ink:         oklch(0.255 0.014 58);  /* body / strong text */
  --lm-ink-2:       oklch(0.405 0.014 58);  /* secondary text (AA on white) */
  --lm-ink-3:       oklch(0.498 0.012 58);  /* captions (≥4.5:1 on white) */
  --lm-line:        oklch(0.905 0.008 64);
  --lm-line-2:      oklch(0.845 0.010 64);

  /* surfaces — clean warm-white (deliberately NOT cream: chroma kept tiny) */
  --lm-bg:          oklch(0.992 0.0035 75);
  --lm-surface:     #ffffff;
  --lm-sand:        oklch(0.967 0.012 74);  /* sparing warm section tint */
  --lm-sand-2:      oklch(0.948 0.016 72);

  /* warm espresso — final band + footer */
  --lm-espresso:    oklch(0.268 0.026 47);
  --lm-espresso-2:  oklch(0.318 0.028 47);
  --lm-on-dark:     oklch(0.955 0.012 70);
  --lm-on-dark-2:   oklch(0.795 0.016 68);

  /* money-positive (paid / collected) */
  --lm-green:       oklch(0.555 0.102 152);
  --lm-green-deep:  oklch(0.452 0.092 152);
  --lm-green-tint:  oklch(0.945 0.040 152);
  /* attention (due / overdue) — warm amber, not red where possible */
  --lm-amber:       oklch(0.700 0.140 64);
  --lm-amber-tint:  oklch(0.950 0.050 74);
  --lm-amber-ink:   oklch(0.46 0.10 56);

  /* type */
  --lm-serif: "Spectral", Georgia, "Times New Roman", serif;
  --lm-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fluid type scale (≥1.25) */
  --lm-fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  --lm-fs-h2:      clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  --lm-fs-h3:      clamp(1.22rem, 1.04rem + 0.8vw, 1.5rem);
  --lm-fs-lead:    clamp(1.075rem, 1rem + 0.42vw, 1.28rem);
  --lm-fs-body:    1.0625rem;
  --lm-fs-sm:      0.9375rem;

  /* shape — warmer = a touch rounder */
  --lm-r-sm:   10px;
  --lm-r-md:   16px;
  --lm-r-lg:   24px;
  --lm-r-xl:   32px;
  --lm-r-pill: 999px;

  /* warm-tinted soft shadows */
  --lm-shadow-xs: 0 1px 2px oklch(0.42 0.04 50 / 0.05);
  --lm-shadow-sm: 0 1px 2px oklch(0.42 0.04 50 / 0.07);
  --lm-shadow-md: 0 10px 30px oklch(0.40 0.05 50 / 0.09), 0 2px 6px oklch(0.40 0.05 50 / 0.05);
  --lm-shadow-lg: 0 30px 70px oklch(0.34 0.06 50 / 0.14), 0 8px 20px oklch(0.34 0.06 50 / 0.07);
  --lm-shadow-clay: 0 14px 34px oklch(0.585 0.118 345 / 0.32);

  /* motion */
  --lm-ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --lm-ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --lm-dur:       320ms;
  --lm-dur-fast:  180ms;

  /* layout */
  --lm-container: 1140px;
  --lm-gutter:    clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* z-scale */
  --lm-z-nav:    100;
  --lm-z-mobile: 200;
}

/* ── Page reset for the marketing surface ────────────────────────────── */

.lm {
  margin: 0;
  background: var(--lm-bg);
  color: var(--lm-ink);
  font-family: var(--lm-sans);
  font-size: var(--lm-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05", "ss01";
}
.lm *,
.lm *::before,
.lm *::after { box-sizing: border-box; }

.lm img { max-width: 100%; display: block; }
/* :where() keeps the base link color at zero specificity so every styled
   component (buttons, brand, nav, footer) wins by its own class + source order.
   Without this, `.lm a` (0,1,1) outranks single-class button rules and every
   <a> button inherits the link colour. */
.lm :where(a) { color: var(--lm-clay-deep); text-decoration: none; }
.lm :where(a):hover { color: var(--lm-clay-press); }

.lm ::selection { background: var(--lm-clay-tint); color: var(--lm-clay-ink); }

.lm-container {
  width: 100%;
  max-width: var(--lm-container);
  margin-inline: auto;
  padding-inline: var(--lm-gutter);
}
.lm-container--wide { max-width: 1280px; }

/* headings */
.lm h1, .lm h2, .lm h3 {
  font-family: var(--lm-serif);
  color: var(--lm-ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.lm h2 { font-size: var(--lm-fs-h2); }
.lm h3 { font-size: var(--lm-fs-h3); letter-spacing: -0.01em; line-height: 1.2; }
.lm p  { text-wrap: pretty; }

/* focus visibility — consistent across the surface */
.lm :focus-visible {
  outline: 2.5px solid var(--lm-clay);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.lm-btn {
  --_bg: var(--lm-clay);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--lm-sans);
  font-size: var(--lm-fs-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.78em 1.3em;
  border: 1px solid transparent;
  border-radius: var(--lm-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--lm-dur-fast) var(--lm-ease),
              background var(--lm-dur-fast) var(--lm-ease),
              box-shadow var(--lm-dur-fast) var(--lm-ease),
              border-color var(--lm-dur-fast) var(--lm-ease);
}
.lm-btn .bi { font-size: 1.05em; }
.lm-btn:active { transform: translateY(1px); }

.lm-btn--primary {
  /* clay-deep (not bright clay) so the white label clears AA 4.5:1; bright
     clay stays for decorative accents, tints and glows. */
  background: var(--lm-clay-deep);
  color: #fff;
  box-shadow: var(--lm-shadow-sm);
}
.lm-btn--primary:hover { background: var(--lm-clay-press); color: #fff; box-shadow: var(--lm-shadow-clay); transform: translateY(-1px); }

.lm-btn--ghost {
  background: transparent;
  color: var(--lm-ink);
  border-color: var(--lm-line-2);
}
.lm-btn--ghost:hover { background: var(--lm-surface); border-color: var(--lm-ink-3); color: var(--lm-ink); box-shadow: var(--lm-shadow-sm); }

.lm-btn--on-dark { background: #fff; color: var(--lm-espresso); }
.lm-btn--on-dark:hover { background: var(--lm-clay-tint); color: var(--lm-clay-ink); }

.lm-btn--ghost-dark { background: transparent; color: var(--lm-on-dark); border-color: oklch(1 0 0 / 0.28); }
.lm-btn--ghost-dark:hover { background: oklch(1 0 0 / 0.08); color: #fff; border-color: oklch(1 0 0 / 0.5); }

.lm-btn--lg { font-size: 1rem; padding: 0.95em 1.6em; }
.lm-btn--block { width: 100%; }

/* ── Top nav ─────────────────────────────────────────────────────────── */

.lm-nav {
  position: sticky;
  top: 0;
  z-index: var(--lm-z-nav);
  background: oklch(0.992 0.0035 75 / 0.82);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--lm-dur) var(--lm-ease), background var(--lm-dur) var(--lm-ease);
}
.lm-nav[data-scrolled="true"] {
  border-bottom-color: var(--lm-line);
  background: oklch(0.992 0.0035 75 / 0.94);
}
.lm-nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 70px;
}

/* brand wordmark — CSS, no logo asset needed */
.lm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--lm-serif);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--lm-ink);
}
.lm-brand:hover { color: var(--lm-ink); }
.lm-brand__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--lm-clay);
  color: #fff;
  box-shadow: var(--lm-shadow-clay);
  flex: none;
}
.lm-brand__mark .bi { font-size: 1.06rem; }
.lm-brand b { font-weight: 600; }
.lm-brand i { color: var(--lm-clay); font-style: normal; }

.lm-nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 auto 0 1.5rem;
  padding: 0;
  list-style: none;
}
.lm-nav__links a {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--lm-r-pill);
  color: var(--lm-ink-2);
  font-size: var(--lm-fs-sm);
  font-weight: 500;
  transition: color var(--lm-dur-fast) var(--lm-ease), background var(--lm-dur-fast) var(--lm-ease);
}
.lm-nav__links a:hover { color: var(--lm-ink); background: var(--lm-sand); }

.lm-nav__actions { display: flex; align-items: center; gap: 0.6rem; }
.lm-nav__login { color: var(--lm-ink-2); font-weight: 500; font-size: var(--lm-fs-sm); padding: 0.5rem 0.5rem; }
.lm-nav__login:hover { color: var(--lm-ink); }

/* mobile nav — checkbox toggle, no JS framework needed */
.lm-nav__toggle, .lm-nav__check { display: none; }
.lm-nav__burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--lm-line-2);
  border-radius: 12px;
  background: var(--lm-surface);
  color: var(--lm-ink);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 1.3rem;
}

@media (max-width: 860px) {
  .lm-nav__links, .lm-nav__actions { display: none; }
  .lm-nav__burger { display: inline-flex; margin-left: auto; }

  .lm-nav__check:checked ~ .lm-nav__panel { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .lm-nav__panel {
    position: fixed;
    inset: 70px 0 auto 0;
    z-index: var(--lm-z-mobile);
    background: var(--lm-surface);
    border-bottom: 1px solid var(--lm-line);
    box-shadow: var(--lm-shadow-lg);
    padding: 1rem var(--lm-gutter) 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--lm-dur) var(--lm-ease), opacity var(--lm-dur) var(--lm-ease);
  }
  .lm-nav__panel a {
    padding: 0.85rem 0.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--lm-ink);
    border-bottom: 1px solid var(--lm-line);
  }
  .lm-nav__panel a:last-of-type { border-bottom: 0; }
  .lm-nav__panel .lm-btn { margin-top: 0.75rem; }
}
@media (min-width: 861px) { .lm-nav__panel { display: none; } }

/* ── Section scaffolding ─────────────────────────────────────────────── */

.lm-section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.lm-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.lm-section--sand { background: var(--lm-sand); }

.lm-head { max-width: 44rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.lm-head--center { margin-inline: auto; text-align: center; }
.lm-head__kicker {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--lm-sans);
  font-size: 0.9rem; font-weight: 600;
  color: var(--lm-clay-deep);
  margin-bottom: 0.9rem;
}
.lm-head__kicker .bi { font-size: 1em; }
.lm-head h2 { margin-bottom: 0.85rem; }
.lm-head__lead { font-size: var(--lm-fs-lead); color: var(--lm-ink-2); line-height: 1.55; max-width: 40ch; }
.lm-head--center .lm-head__lead { max-width: 52ch; margin-inline: auto; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.lm-hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6rem); overflow: clip; }
.lm-hero::before {
  /* soft warm wash behind the headline column */
  content: "";
  position: absolute; inset: -20% -10% auto auto;
  width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(closest-side, var(--lm-clay-tint), transparent 72%);
  opacity: 0.7; z-index: 0; pointer-events: none;
}
.lm-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.lm-hero__pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem 0.4rem 0.5rem;
  background: var(--lm-surface);
  border: 1px solid var(--lm-clay-line);
  border-radius: var(--lm-r-pill);
  font-size: 0.86rem; font-weight: 500; color: var(--lm-clay-ink);
  box-shadow: var(--lm-shadow-sm);
  margin-bottom: 1.4rem;
}
.lm-hero__pill b { background: var(--lm-clay-tint); color: var(--lm-clay-ink); font-weight: 600; padding: 0.15rem 0.5rem; border-radius: var(--lm-r-pill); }
.lm-hero h1 {
  font-size: var(--lm-fs-display);
  letter-spacing: -0.03em;
  margin-bottom: 1.15rem;
}
.lm-hero h1 em { font-style: italic; color: var(--lm-clay-deep); font-weight: 600; }
.lm-hero__lead {
  font-size: var(--lm-fs-lead);
  color: var(--lm-ink-2);
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 1.8rem;
}
.lm-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.lm-hero__note {
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem;
  margin-top: 1.6rem;
  font-size: 0.9rem; color: var(--lm-ink-3);
}
.lm-hero__note span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lm-hero__note .bi { color: var(--lm-green); font-size: 1.05em; }

/* hero media: real photo + floating product card */
.lm-hero__media { position: relative; }
.lm-hero__photo {
  position: relative;
  border-radius: var(--lm-r-xl);
  overflow: hidden;
  box-shadow: var(--lm-shadow-lg);
  aspect-ratio: 4 / 4.4;
  background: var(--lm-sand-2);
}
.lm-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.lm-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, oklch(0.26 0.03 47 / 0.28));
}
.lm-hero__float {
  position: absolute;
  left: clamp(-1rem, -2vw, -2.5rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  z-index: 2;
  width: min(300px, 76%);
}

/* ── Product-UI mock (credibility) ───────────────────────────────────── */

.lm-ui {
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-md);
  box-shadow: var(--lm-shadow-md);
  overflow: hidden;
}
.lm-ui__bar {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--lm-line);
  background: var(--lm-bg);
}
.lm-ui__title { font-size: 0.82rem; font-weight: 600; color: var(--lm-ink); margin-left: 0.2rem; }
.lm-ui__title .bi { color: var(--lm-clay); margin-right: 0.3rem; }
.lm-ui__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lm-line-2); flex: none; }
.lm-ui__rows { padding: 0.35rem 0.4rem; }
.lm-ui__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.7rem;
  border-radius: var(--lm-r-sm);
}
.lm-ui__row + .lm-ui__row { border-top: 1px solid var(--lm-line); }
.lm-ui__name { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 500; color: var(--lm-ink); min-width: 0; }
.lm-ui__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-ui__name .bi { color: var(--lm-ink-3); }
.lm-ui__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lm-clay-tint); color: var(--lm-clay-ink);
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 700; flex: none;
  font-family: var(--lm-sans);
}
.lm-ui__val { font-size: 0.9rem; font-weight: 600; color: var(--lm-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-ui__tag {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: var(--lm-r-pill);
  background: var(--lm-green-tint); color: var(--lm-green-deep);
  white-space: nowrap;
}
.lm-ui__tag--due { background: var(--lm-amber-tint); color: var(--lm-amber-ink); }
.lm-ui__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1.05rem;
  border-top: 1px solid var(--lm-line);
  background: var(--lm-bg);
  font-size: 0.82rem; color: var(--lm-ink-2);
}
.lm-ui__foot b { color: var(--lm-green-deep); font-variant-numeric: tabular-nums; }

/* small floating stat card */
.lm-statcard {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-md);
  box-shadow: var(--lm-shadow-lg);
  padding: 0.85rem 1.05rem;
}
.lm-statcard__icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--lm-green-tint); color: var(--lm-green-deep);
}
.lm-statcard__k, .lm-statcard__v { display: block; }
.lm-statcard__v { font-size: 1.15rem; font-weight: 700; color: var(--lm-ink); font-family: var(--lm-serif); line-height: 1.1; }
.lm-statcard__k { font-size: 0.78rem; color: var(--lm-ink-3); }

/* ── Trust strip ─────────────────────────────────────────────────────── */

.lm-trust { border-block: 1px solid var(--lm-line); background: var(--lm-surface); }
.lm-trust__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem clamp(1.5rem, 1rem + 3vw, 4rem);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.lm-trust__lead { font-size: 0.9rem; color: var(--lm-ink-3); font-weight: 500; max-width: 13rem; }
.lm-trust__items { display: flex; flex-wrap: wrap; gap: 1.25rem clamp(1.5rem, 1rem + 2.5vw, 3rem); margin-left: auto; }
.lm-trust__item { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; font-weight: 500; color: var(--lm-ink-2); }
.lm-trust__item .bi { font-size: 1.15rem; color: var(--lm-clay); }

/* ── Feature moments (alternating, NOT an identical grid) ─────────────── */

.lm-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.lm-feature + .lm-feature { margin-top: clamp(3.5rem, 2rem + 6vw, 7rem); }
.lm-feature--flip .lm-feature__body { order: 2; }
.lm-feature__icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--lm-clay-tint); color: var(--lm-clay-deep);
  margin-bottom: 1.15rem;
}
.lm-feature h3 { margin-bottom: 0.7rem; }
.lm-feature__lead { color: var(--lm-ink-2); font-size: 1.06rem; line-height: 1.6; margin-bottom: 1.25rem; max-width: 42ch; }
.lm-feature__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.lm-feature__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 1rem; color: var(--lm-ink); }
.lm-feature__list .bi { color: var(--lm-green); font-size: 1.15rem; margin-top: 0.06rem; flex: none; }
.lm-feature__media { position: relative; }

/* photo media variant */
.lm-feature__photo {
  border-radius: var(--lm-r-lg);
  overflow: hidden;
  box-shadow: var(--lm-shadow-md);
  aspect-ratio: 5 / 4;
  background: var(--lm-sand-2);
}
.lm-feature__photo img { width: 100%; height: 100%; object-fit: cover; }
.lm-feature__media .lm-statcard { position: absolute; right: clamp(-0.5rem, -1.5vw, -1.5rem); bottom: -1.25rem; }

/* ── "Also includes" — compact capability list, deliberately not cards ── */

.lm-also {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.4rem 1.5rem;
  max-width: 56rem;
  margin-inline: auto;
}
.lm-also li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lm-ink);
  border-bottom: 1px solid var(--lm-line);
}
.lm-also .bi {
  font-size: 1.15rem;
  color: var(--lm-clay);
  flex: none;
}

/* ── How it works (true 3-step sequence — numbers earn their place) ───── */

.lm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.25rem);
  counter-reset: step;
}
.lm-step {
  position: relative;
  padding: 1.75rem 1.5rem 1.6rem;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-lg);
  box-shadow: var(--lm-shadow-sm);
}
.lm-step__n {
  counter-increment: step;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--lm-clay); color: #fff;
  font-family: var(--lm-serif); font-size: 1.25rem; font-weight: 600;
  box-shadow: var(--lm-shadow-clay);
  margin-bottom: 1.1rem;
}
.lm-step__n::before { content: counter(step); }
.lm-step h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.lm-step p { color: var(--lm-ink-2); font-size: 0.98rem; line-height: 1.55; margin: 0; }
.lm-step__line { display: none; }
@media (min-width: 781px) {
  .lm-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(1.75rem + 22px); right: -10px;
    width: 20px; height: 2px; background: var(--lm-clay-line); z-index: 1;
  }
}

/* ── Warm dark CTA band ──────────────────────────────────────────────── */

.lm-band {
  background:
    radial-gradient(120% 140% at 85% 0%, var(--lm-espresso-2), transparent 55%),
    var(--lm-espresso);
  color: var(--lm-on-dark);
  border-radius: var(--lm-r-xl);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lm-band::before {
  content: ""; position: absolute; inset: auto auto -30% -10%;
  width: 50%; height: 80%;
  background: radial-gradient(closest-side, oklch(0.585 0.118 345 / 0.42), transparent 70%);
  pointer-events: none;
}
.lm-band > * { position: relative; }
.lm-band h2 { color: #fff; margin-bottom: 0.85rem; }
.lm-band__lead { color: var(--lm-on-dark-2); font-size: var(--lm-fs-lead); max-width: 48ch; margin: 0 auto 1.8rem; line-height: 1.55; }
.lm-band__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ── Pricing teaser ──────────────────────────────────────────────────── */

.lm-pricing-teaser {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 0.5rem + 4vw, 4rem);
  align-items: center;
  background: var(--lm-clay-tint);
  border: 1px solid var(--lm-clay-line);
  border-radius: var(--lm-r-xl);
  padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}
.lm-pricing-teaser h2 { color: var(--lm-clay-ink); margin-bottom: 0.75rem; }
.lm-pricing-teaser__lead { color: var(--lm-clay-ink); opacity: 0.88; font-size: var(--lm-fs-lead); line-height: 1.55; }
.lm-pricing-teaser__price { text-align: center; }
.lm-pricing-teaser__amt { font-family: var(--lm-serif); font-size: clamp(2.6rem, 1.8rem + 3vw, 3.6rem); font-weight: 600; color: var(--lm-clay-ink); line-height: 1; }
.lm-pricing-teaser__amt sup { font-size: 0.42em; top: -1.1em; font-weight: 500; }
.lm-pricing-teaser__per { color: var(--lm-clay-ink); opacity: 0.8; font-size: 0.95rem; margin-top: 0.4rem; }
.lm-pricing-teaser__actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.25rem; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.lm-footer { background: var(--lm-espresso); color: var(--lm-on-dark-2); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.lm-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding-bottom: 2.75rem;
}
.lm-footer__brand .lm-brand { color: #fff; margin-bottom: 1rem; }
.lm-footer__brand .lm-brand i { color: var(--lm-clay); }
.lm-footer__blurb { font-size: 0.95rem; line-height: 1.6; max-width: 32ch; color: var(--lm-on-dark-2); }
.lm-footer__col h4 { font-family: var(--lm-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lm-on-dark); margin: 0 0 1rem; }
.lm-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lm-footer__col a { color: var(--lm-on-dark-2); font-size: 0.95rem; }
.lm-footer__col a:hover { color: #fff; }
.lm-footer__bar {
  border-top: 1px solid oklch(1 0 0 / 0.1);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; align-items: center;
  font-size: 0.86rem; color: var(--lm-on-dark-2);
}
.lm-footer__bar a { color: var(--lm-on-dark); }

/* ── Scroll-reveal (enhances an already-visible default) ─────────────── */

/* Default (no JS / reduced motion): fully visible. The hidden start state is
   gated behind `.lm-js` (set by an inline head script) so content never ships
   blank when JS is slow, disabled, or the page is rendered headless. */
@media (prefers-reduced-motion: no-preference) {
  .lm-js .lm-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--lm-ease), transform 0.7s var(--lm-ease); }
  .lm-js .lm-reveal.is-in { opacity: 1; transform: none; }
  .lm-js .lm-reveal[data-delay="1"] { transition-delay: 0.08s; }
  .lm-js .lm-reveal[data-delay="2"] { transition-delay: 0.16s; }
  .lm-js .lm-reveal[data-delay="3"] { transition-delay: 0.24s; }
  .lm-js .lm-hero__float { animation: lm-float-in 0.9s var(--lm-ease) 0.35s both; }
  @keyframes lm-float-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .lm-pricing-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .lm-hero__grid { grid-template-columns: 1fr; }
  .lm-hero__media { max-width: 460px; margin-inline: auto; width: 100%; }
  .lm-feature { grid-template-columns: 1fr; gap: 2rem; }
  .lm-feature--flip .lm-feature__body { order: 0; }
  .lm-feature__media .lm-statcard { right: 1rem; }
  .lm-footer__grid { grid-template-columns: 1fr 1fr; }
  .lm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .lm-steps { grid-template-columns: 1fr; gap: 1rem; }
  .lm-trust__items { margin-left: 0; }
}
@media (max-width: 560px) {
  .lm-hero__note { gap: 0.6rem 1.25rem; }
  .lm-footer__grid { grid-template-columns: 1fr; }
  .lm-band { border-radius: var(--lm-r-lg); }
}

/* ══════════════════════════════════════════════════════════════════════
   INNER MARKETING PAGES  (features · pricing · about · contact)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Inner-page head ─────────────────────────────────────────────────── */

.lm-pagehead {
  position: relative;
  overflow: clip;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  background: linear-gradient(180deg, var(--lm-clay-tint), transparent);
  border-bottom: 1px solid var(--lm-line);
}
.lm-pagehead::before {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(closest-side, oklch(0.585 0.118 345 / 0.18), transparent 72%);
  pointer-events: none;
}
.lm-pagehead__inner { position: relative; max-width: 50rem; }
.lm-pagehead--center .lm-pagehead__inner { margin-inline: auto; text-align: center; }
.lm-pagehead h1 {
  font-family: var(--lm-serif);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.025em;
  color: var(--lm-ink); text-wrap: balance; margin: 0 0 1rem;
}
.lm-pagehead__lead { font-size: var(--lm-fs-lead); color: var(--lm-ink-2); line-height: 1.55; max-width: 52ch; margin: 0; }
.lm-pagehead--center .lm-pagehead__lead { margin-inline: auto; }

/* ── Capability cards (understated; varied per section, not slop grid) ── */

.lm-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1rem;
}
.lm-cap {
  display: flex; flex-direction: column;
  padding: 1.55rem;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-lg);
  box-shadow: var(--lm-shadow-xs);
  transition: transform var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease), border-color var(--lm-dur) var(--lm-ease);
}
.lm-cap:hover { transform: translateY(-3px); box-shadow: var(--lm-shadow-md); border-color: var(--lm-clay-line); }
.lm-cap__icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--lm-clay-tint); color: var(--lm-clay-deep);
  margin-bottom: 1rem;
}
.lm-cap h3 { font-size: 1.12rem; margin-bottom: 0.45rem; }
.lm-cap p { color: var(--lm-ink-2); font-size: 0.97rem; line-height: 1.55; margin: 0; }

/* Checked capability list — denser alternative to cards (breaks monotony) */
.lm-checklist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.5rem 2rem;
}
.lm-checklist li { display: flex; gap: 0.75rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--lm-line); align-items: flex-start; }
.lm-checklist .bi { color: var(--lm-green); font-size: 1.15rem; margin-top: 0.1rem; flex: none; }
.lm-checklist b { display: block; font-weight: 600; color: var(--lm-ink); font-size: 1rem; }
.lm-checklist span { color: var(--lm-ink-2); font-size: 0.93rem; }

/* ── Pricing: billing toggle + currency ──────────────────────────────── */

.lm-billing {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: center;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.lm-toggle {
  display: inline-flex; gap: 0.2rem; padding: 0.28rem;
  background: var(--lm-sand); border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-pill);
}
.lm-toggle__opt {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--lm-sans); font-size: var(--lm-fs-sm); font-weight: 600;
  color: var(--lm-ink-2);
  padding: 0.5rem 1rem; border-radius: var(--lm-r-pill);
  transition: background var(--lm-dur-fast) var(--lm-ease), color var(--lm-dur-fast) var(--lm-ease), box-shadow var(--lm-dur-fast) var(--lm-ease);
}
.lm-toggle__opt.is-active { background: var(--lm-surface); color: var(--lm-ink); box-shadow: var(--lm-shadow-sm); }
.lm-toggle__save { font-size: 0.72rem; font-weight: 600; color: var(--lm-green-deep); background: var(--lm-green-tint); padding: 0.1rem 0.45rem; border-radius: var(--lm-r-pill); }
.lm-currency select {
  font-family: var(--lm-sans); font-size: var(--lm-fs-sm); font-weight: 500;
  color: var(--lm-ink); background: var(--lm-surface);
  border: 1px solid var(--lm-line-2); border-radius: var(--lm-r-pill);
  padding: 0.55rem 2.2rem 0.55rem 1rem; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2352525b' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center;
}
.lm-currency select:focus-visible { outline: 2.5px solid var(--lm-clay); outline-offset: 2px; }

/* ── Pricing: plan cards ─────────────────────────────────────────────── */

.lm-plans {
  display: grid;
  /* 240px keeps four plans 4-up on desktop, 2-up on tablet, 1-up on mobile
     (258px dropped the 4th plan onto a lonely second row). */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}
.lm-plan {
  display: flex; flex-direction: column;
  position: relative;
  padding: 1.85rem 1.6rem;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-xl);
  box-shadow: var(--lm-shadow-sm);
}
.lm-plan--popular {
  border-color: var(--lm-clay);
  box-shadow: 0 0 0 1px var(--lm-clay), var(--lm-shadow-lg);
}
.lm-plan__badge {
  position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%);
  background: var(--lm-clay-deep); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.25rem 0.8rem; border-radius: var(--lm-r-pill);
  white-space: nowrap; box-shadow: var(--lm-shadow-clay);
}
.lm-plan__name { font-size: 1.3rem; margin-bottom: 0.3rem; }
.lm-plan__desc { color: var(--lm-ink-2); font-size: 0.92rem; line-height: 1.45; margin: 0 0 1.1rem; min-height: 2.6em; }
.lm-plan__price { display: flex; align-items: baseline; gap: 0.3rem; }
.lm-plan__amount { font-family: var(--lm-serif); font-size: 2.5rem; font-weight: 600; color: var(--lm-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.lm-plan__period { color: var(--lm-ink-3); font-size: 0.95rem; font-weight: 500; }
.lm-plan__hint { color: var(--lm-ink-3); font-size: 0.82rem; margin: 0.5rem 0 0; min-height: 1.2em; }
.lm-plan__features { list-style: none; margin: 1.3rem 0; padding: 1.3rem 0 0; border-top: 1px solid var(--lm-line); display: grid; gap: 0.65rem; flex: 1; }
.lm-plan__features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.94rem; color: var(--lm-ink); }
.lm-plan__features .bi { font-size: 1.05rem; margin-top: 0.06rem; flex: none; color: var(--lm-green); }
.lm-plan__features li.is-off { color: var(--lm-ink-3); }
.lm-plan__features li.is-off .bi { color: var(--lm-line-2); }
.lm-plan__cta { margin-top: auto; }

/* ── FAQ (accordion) ─────────────────────────────────────────────────── */

.lm-faq { max-width: 46rem; margin-inline: auto; }
.lm-faq__item { border-bottom: 1px solid var(--lm-line); }
.lm-faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none; cursor: pointer;
  font-family: var(--lm-sans); font-size: 1.05rem; font-weight: 600; color: var(--lm-ink);
  padding: 1.15rem 0.25rem;
}
.lm-faq__q::-webkit-details-marker { display: none; }
.lm-faq__q::after {
  content: "\F64D"; font-family: "bootstrap-icons"; font-size: 1.1rem;
  color: var(--lm-clay); flex: none;
  transition: transform var(--lm-dur) var(--lm-ease);
}
.lm-faq__item[open] .lm-faq__q::after { transform: rotate(45deg); }
.lm-faq__a { color: var(--lm-ink-2); font-size: 1rem; line-height: 1.6; margin: 0; padding: 0 0.25rem 1.2rem; max-width: 62ch; }

/* ── Panels + forms (contact, about value cards) ─────────────────────── */

.lm-panel {
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-lg);
  box-shadow: var(--lm-shadow-sm);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.lm-panel--tint { background: var(--lm-sand); }

.lm-contact-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.25rem, 0.5rem + 2.5vw, 2.25rem); align-items: start; }

.lm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lm-field { display: flex; flex-direction: column; gap: 0.4rem; }
.lm-field--full { grid-column: 1 / -1; }
.lm-label { font-size: 0.9rem; font-weight: 600; color: var(--lm-ink); }
.lm-label .lm-opt { color: var(--lm-ink-3); font-weight: 400; }
.lm-input, .lm-textarea {
  width: 100%;
  font-family: var(--lm-sans); font-size: 1rem; color: var(--lm-ink);
  background: var(--lm-bg);
  border: 1px solid var(--lm-line-2); border-radius: var(--lm-r-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--lm-dur-fast) var(--lm-ease), box-shadow var(--lm-dur-fast) var(--lm-ease), background var(--lm-dur-fast) var(--lm-ease);
}
.lm-textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.lm-input::placeholder, .lm-textarea::placeholder { color: var(--lm-ink-3); }
.lm-input:focus, .lm-textarea:focus {
  outline: none; background: var(--lm-surface);
  border-color: var(--lm-clay); box-shadow: 0 0 0 3px var(--lm-clay-tint);
}

.lm-alert {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.85rem 1rem; border-radius: var(--lm-r-sm);
  font-size: 0.95rem; margin-bottom: 1.25rem; border: 1px solid transparent;
}
.lm-alert .bi { font-size: 1.1rem; margin-top: 0.05rem; flex: none; }
.lm-alert--success { background: var(--lm-green-tint); color: var(--lm-green-deep); border-color: oklch(0.555 0.102 152 / 0.25); }
.lm-alert--danger { background: var(--lm-danger-soft, oklch(0.95 0.04 25)); color: oklch(0.45 0.14 25); border-color: oklch(0.55 0.18 25 / 0.25); }

.lm-contact__aside h2 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.lm-contact__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.lm-contact__list li { display: flex; align-items: center; gap: 0.7rem; color: var(--lm-ink); font-size: 0.97rem; }
.lm-contact__list .bi { color: var(--lm-clay); font-size: 1.15rem; flex: none; }
.lm-contact__note { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--lm-line); font-size: 0.85rem; color: var(--lm-ink-3); }

/* ── Inner-page responsive ───────────────────────────────────────────── */

@media (max-width: 820px) {
  .lm-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .lm-form-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   AUTH  (login · signup · password reset)
   ══════════════════════════════════════════════════════════════════════ */

.lm-auth {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) var(--lm-gutter);
  position: relative; overflow: clip;
}
.lm-auth::before {
  content: ""; position: absolute; inset: -30% -10% auto auto;
  width: 55vw; height: 55vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(closest-side, var(--lm-clay-tint), transparent 72%);
  opacity: 0.8; z-index: 0; pointer-events: none;
}
.lm-auth__brand { position: relative; z-index: 1; }
.lm-auth__brand.lm-brand { font-size: 1.5rem; }

.lm-auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-xl);
  box-shadow: var(--lm-shadow-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.lm-auth-card--wide { max-width: 540px; }
.lm-auth-card__head { margin-bottom: 1.5rem; }
.lm-auth-card__head h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem); margin-bottom: 0.4rem; }
.lm-auth-card__sub { color: var(--lm-ink-2); font-size: 0.95rem; margin: 0; }

.lm-auth__foot { position: relative; z-index: 1; text-align: center; color: var(--lm-ink-2); font-size: 0.93rem; margin: 0; }

/* form rows inside auth cards reuse lm-field / lm-input / lm-label */
.lm-fieldset { display: grid; gap: 1.05rem; }
.lm-label__row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.lm-label__row a { font-size: 0.85rem; font-weight: 500; }
.lm-hint { font-size: 0.82rem; color: var(--lm-ink-3); }
.lm-field--invalid .lm-input,
.lm-field--invalid .lm-textarea,
.lm-field--invalid .lm-tel { border-color: oklch(0.55 0.18 25); }
.lm-field__err { font-size: 0.82rem; color: oklch(0.5 0.16 25); }

/* WhatsApp opt-in checkbox */
.lm-check {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 0.6rem; cursor: pointer;
  font-size: 0.9rem; color: var(--lm-ink-2);
}
.lm-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--lm-clay); flex: none; }
.lm-check b { color: var(--lm-ink); font-weight: 600; }

/* ── Phone field with country-code picker (lm-tel) ───────────────────── */

.lm-tel {
  display: flex; position: relative;
  border: 1px solid var(--lm-line-2); border-radius: var(--lm-r-sm);
  background: var(--lm-bg);
  transition: border-color var(--lm-dur-fast) var(--lm-ease), box-shadow var(--lm-dur-fast) var(--lm-ease), background var(--lm-dur-fast) var(--lm-ease);
}
.lm-tel:focus-within { background: var(--lm-surface); border-color: var(--lm-clay); box-shadow: 0 0 0 3px var(--lm-clay-tint); }
.lm-tel__btn {
  display: flex; align-items: center; gap: 0.4rem;
  border: 0; border-right: 1px solid var(--lm-line); background: transparent;
  padding: 0 0.75rem; cursor: pointer;
  font-family: var(--lm-sans); font-size: 0.95rem; color: var(--lm-ink); white-space: nowrap;
  border-radius: var(--lm-r-sm) 0 0 var(--lm-r-sm);
}
.lm-tel__flag { font-size: 1.05rem; line-height: 1; }
.lm-tel__caret { color: var(--lm-ink-3); font-size: 0.65rem; }
.lm-tel__num {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 0.7rem 0.85rem; font-family: var(--lm-sans); font-size: 1rem; color: var(--lm-ink);
}
.lm-tel__num::placeholder { color: var(--lm-ink-3); }
.lm-tel__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--lm-surface); border: 1px solid var(--lm-line);
  border-radius: var(--lm-r-md); box-shadow: var(--lm-shadow-lg); overflow: hidden;
}
.lm-tel__menu[hidden] { display: none; }
.lm-tel__search {
  width: 100%; border: 0; border-bottom: 1px solid var(--lm-line); outline: none;
  padding: 0.7rem 0.85rem; font-family: var(--lm-sans); font-size: 0.92rem;
  background: var(--lm-bg); color: var(--lm-ink);
}
.lm-tel__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.lm-tel__list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; cursor: pointer; font-size: 0.92rem; }
.lm-tel__list li:hover, .lm-tel__list li.is-active { background: var(--lm-sand); }
.lm-tel__list .fl { font-size: 1.05rem; line-height: 1; }
.lm-tel__list .nm { flex: 1; color: var(--lm-ink); }
.lm-tel__list .dc { font-size: 0.82rem; color: var(--lm-ink-3); font-variant-numeric: tabular-nums; }

/* select inside auth cards reuse the currency-select styling shape */
.lm-select {
  width: 100%;
  font-family: var(--lm-sans); font-size: 1rem; color: var(--lm-ink);
  background: var(--lm-bg);
  border: 1px solid var(--lm-line-2); border-radius: var(--lm-r-sm);
  padding: 0.7rem 2.2rem 0.7rem 0.85rem; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2352525b' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center;
  transition: border-color var(--lm-dur-fast) var(--lm-ease), box-shadow var(--lm-dur-fast) var(--lm-ease);
}
.lm-select:focus { outline: none; border-color: var(--lm-clay); box-shadow: 0 0 0 3px var(--lm-clay-tint); }

/* ══════════════════════════════════════════════════════════════════════
   PHOTO-LED HERO  (image carries the hero; product proof sits below)
   Deliberately not the copy-left + floating-card split.
   ══════════════════════════════════════════════════════════════════════ */

.lm-hero-photo {
  position: relative;
  overflow: clip;
  min-height: min(82vh, 740px);
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.lm-hero-photo__bg { position: absolute; inset: 0; z-index: 0; }
.lm-hero-photo__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.lm-hero-photo__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(94deg,
      oklch(0.19 0.03 342 / 0.88) 0%,
      oklch(0.19 0.03 342 / 0.62) 30%,
      oklch(0.19 0.03 342 / 0.16) 56%,
      transparent 74%),
    linear-gradient(0deg, oklch(0.15 0.02 342 / 0.62) 0%, transparent 44%);
}
.lm-hero-photo__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(3rem, 2rem + 8vw, 7rem) clamp(2.5rem, 1.5rem + 5vw, 5rem);
}
.lm-hero-photo__copy { max-width: 40rem; }
.lm-hero-photo__kick {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; color: #fff;
  background: oklch(1 0 0 / 0.14); backdrop-filter: blur(6px);
  border: 1px solid oklch(1 0 0 / 0.26); border-radius: var(--lm-r-pill);
  padding: 0.42rem 0.95rem; margin-bottom: 1.35rem;
}
.lm-hero-photo__kick .bi { font-size: 1em; }
.lm-hero-photo h1 {
  color: #fff;
  font-size: clamp(2.6rem, 1.55rem + 4.7vw, 4.8rem);
  line-height: 1.02; letter-spacing: -0.032em; margin: 0 0 1.1rem;
  text-wrap: balance; text-shadow: 0 2px 20px oklch(0.15 0.02 342 / 0.35);
}
.lm-hero-photo h1 em { font-style: italic; color: oklch(0.85 0.095 345); font-weight: 600; }
.lm-hero-photo__lead {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  color: oklch(1 0 0 / 0.94); line-height: 1.55; max-width: 36ch; margin: 0 0 1.9rem;
  text-shadow: 0 1px 3px oklch(0.15 0.02 342 / 0.4);
}
.lm-hero-photo__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.lm-hero-photo__note {
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.6rem; margin-top: 1.7rem;
  font-size: 0.92rem; color: oklch(1 0 0 / 0.92);
}
.lm-hero-photo__note span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lm-hero-photo__note .bi { color: oklch(0.84 0.14 150); font-size: 1.05em; }

/* Nav over the photo hero: transparent + white until scrolled, then solid.
   Applied only on pages that set the lm-nav--over modifier (the home page),
   so inner pages keep the solid nav. Fixed (not sticky) so the photo is truly
   full-bleed behind it. */
.lm-nav--over { position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.lm-nav--over .lm-brand,
.lm-nav--over .lm-nav__links a,
.lm-nav--over .lm-nav__login { color: #fff; }
.lm-nav--over .lm-brand i { color: oklch(0.86 0.09 345); }
.lm-nav--over .lm-nav__links a:hover { background: oklch(1 0 0 / 0.16); color: #fff; }
.lm-nav--over .lm-nav__login:hover { color: #fff; }
.lm-nav--over .lm-nav__burger { background: oklch(1 0 0 / 0.14); border-color: oklch(1 0 0 / 0.34); color: #fff; }
.lm-nav--over[data-scrolled="true"] {
  background: oklch(0.992 0.0035 75 / 0.94);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--lm-line);
}
.lm-nav--over[data-scrolled="true"] .lm-nav__links a,
.lm-nav--over[data-scrolled="true"] .lm-nav__login { color: var(--lm-ink-2); }
.lm-nav--over[data-scrolled="true"] .lm-brand { color: var(--lm-ink); }
.lm-nav--over[data-scrolled="true"] .lm-brand i { color: var(--lm-clay); }
.lm-nav--over[data-scrolled="true"] .lm-nav__burger { background: var(--lm-surface); border-color: var(--lm-line-2); color: var(--lm-ink); }

/* Product proof — the credibility that used to float in the hero, now a band */
.lm-proof { background: var(--lm-bg); border-bottom: 1px solid var(--lm-line); }
.lm-proof__inner { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.lm-proof__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.lm-proof__head h2 { margin-bottom: 0.55rem; }
.lm-proof__head p { color: var(--lm-ink-2); font-size: var(--lm-fs-lead); line-height: 1.55; max-width: 48ch; }
.lm-proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.15rem; }

@media (max-width: 600px) {
  .lm-hero-photo { min-height: min(88vh, 640px); }
  /* Copy nearly fills the hero on mobile, so scrim the whole frame (strong at
     top for the headline and bottom for the CTAs, lighter mid to keep the
     house visible) rather than only the bottom. */
  .lm-hero-photo__scrim {
    background:
      linear-gradient(180deg,
        oklch(0.15 0.02 342 / 0.66) 0%,
        oklch(0.16 0.02 342 / 0.40) 42%,
        oklch(0.15 0.02 342 / 0.68) 100%);
  }
  .lm-hero-photo__lead { max-width: none; }
}