:where(.lz-app, .lz-auth, .lz-site, .lz-landing),
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) *,
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) *::before,
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) *::after { box-sizing: border-box; }

/* Every page of every app: the document itself carries the platform face, ink and
   ground, so a public page with no shell can never fall back to browser serif. */
:where(html) { font-family: var(--lz-font-sans); }
:where(body) {
  margin: 0;
  font-family: var(--lz-font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.lz-app, .lz-auth, .lz-site, .lz-landing {
  --lz-ui-on-dark: var(--card);
  --lz-ui-on-dark-muted: rgb(var(--lz-surface-rgb) / 0.72);
  --lz-ui-on-dark-quote: rgb(var(--lz-surface-rgb) / 0.55);
  --lz-ui-on-dark-faint: rgb(var(--lz-surface-rgb) / 0.45);
  --lz-ui-on-dark-legal: rgb(var(--lz-surface-rgb) / 0.4);
  --lz-ui-on-dark-edge: rgb(var(--lz-surface-rgb) / 0.06);
  --lz-ui-on-dark-wash: rgb(var(--lz-surface-rgb) / 0.08);
  --lz-ui-sidebar-fill: var(--primary-900);
  --lz-ui-nav-ink: var(--card);
  --lz-ui-nav-label-ink: rgb(var(--lz-surface-rgb) / 0.45);
  --lz-ui-nav-hover-fill: rgb(var(--lz-primary-rgb) / 0.12);
  --lz-ui-nav-active-fill: rgb(var(--lz-primary-rgb) / 0.12);
  --lz-ui-hero-fill: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 55%, var(--primary-700) 100%);
  --lz-ui-page-hero-fill: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 60%, var(--primary-600) 100%);
  --lz-ui-dark-band: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 100%);
  --lz-ui-bar-fill: linear-gradient(90deg, var(--primary-700), var(--primary-900));
  --lz-ui-dark-fill: linear-gradient(145deg, var(--primary-800), var(--primary-900));
  --lz-ui-stat-bar: var(--accent);
  --lz-ui-tile-orange: var(--accent-tint);
  --lz-ui-tile-neutral: linear-gradient(145deg, var(--card-2), var(--bg-2));
  --lz-ui-tile-success: linear-gradient(145deg, var(--card-2), var(--ok-bg));
  --lz-ui-lift: var(--neu-out);
  --lz-ui-lift-sm: var(--neu-out-md);
  --lz-ui-topbar-edge: 0 6px 16px -10px rgba(173,156,133,.5), 0 1px 0 rgba(173,156,133,.25);
  --lz-ui-rail-edge: inset 8px 0 22px -10px rgba(173,156,133,.35), inset 1px 0 0 rgba(173,156,133,.25);
  --lz-ui-news-divider: 1px solid rgba(173,156,133,.2);
  --lz-ui-tile-highlight: inset 0 1px 0 rgba(255,255,255,.7);
  --lz-ui-avatar-ring: 4px 4px 10px rgb(var(--lz-ink-black-rgb) / 0.4), -3px -3px 8px rgba(255,255,255,.7), 0 0 0 2px var(--card), 0 0 0 3px var(--accent);
  --lz-ui-avatar-lg-shadow: 8px 8px 18px rgb(var(--lz-primary-rgb) / 0.5), -6px -6px 14px rgba(255,255,255,.9), inset 0 2px 4px rgba(255,255,255,.55), inset 0 -2px 4px rgb(var(--lz-ink-black-rgb) / 0.12);
  --lz-ui-glow-accent-lg: 0 12px 24px -8px rgb(var(--lz-primary-rgb) / 0.55), inset 0 1px 0 rgba(255,255,255,.4);
  --lz-ui-dark-btn-shadow: 4px 4px 10px rgb(var(--lz-ink-black-rgb) / 0.35), -3px -3px 8px rgba(255,255,255,.7);
  --lz-ui-focus-ring: 0 0 0 3px rgb(var(--lz-primary-rgb) / 0.35);
  --lz-ui-input-ring: 0 0 0 3px rgb(var(--lz-primary-rgb) / 0.18);
  --lz-ui-slideover-edge: -20px 0 60px rgb(var(--lz-ink-black-rgb) / 0.2);
  --lz-ui-backdrop: rgb(var(--lz-ink-black-rgb) / 0.42);
  --lz-ui-control-size: 42px;
  --lz-ui-touch-min: 44px;
  --lz-ui-stat-icon: 46px;
  --lz-ui-hero-icon: 60px;
  --lz-ui-hero-mark: 72px;
  --lz-ui-avatar: 42px;
  --lz-ui-avatar-lg: 92px;
  --lz-ui-tile-icon: 42px;
  --lz-ui-empty-icon: 72px;
  --lz-ui-side-col: 360px;
  --lz-ui-icon-rail: 64px;
  --lz-ui-meter-height: 8px;
  --lz-ui-swatch-radius: 3px;
  --lz-ui-heat-radius: 4px;
  --lz-ui-funnel-radius: 8px;
  --lz-ui-role-avatar-radius: 14px;
  --lz-ui-round: 50%;
  --shadow-rgb: 173,156,133;
  --primary-rgb: 11,11,12;
  --accent-rgb: 255,103,0;
  --font: var(--lz-font-sans);
  --font-logo: var(--lz-font-display);
  --font-mono: var(--lz-font-mono);
  color: var(--ink);
  font-family: var(--lz-font-sans);
  font-size: var(--lz-text-body-size);
  font-weight: var(--lz-text-body-weight);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.lz-app {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rightpanel-w);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar topbar topbar"
    "sidebar main   right"
    "footer  footer footer";
  min-height: 100vh;
  max-width: 100%;
  background: var(--bg);
}

/* The sidebar column is black for its full height, not only for the first
   screen the sticky sidebar covers: the footer now runs under it (§5). */
.lz-app::before {
  content: "";
  grid-area: sidebar;
  background: var(--lz-ui-sidebar-fill);
}

:where(.lz-app, .lz-auth, .lz-site, .lz-landing) :is(h1, h2, h3, h4) { margin: 0; text-wrap: balance; }
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) :is(p, ul, ol) { margin: 0; }
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) :is(ul, ol) { padding: 0; list-style: none; }
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) a { color: inherit; text-decoration: none; }
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
:where(.lz-app, .lz-auth, .lz-site, .lz-landing) :focus-visible { outline: none; box-shadow: var(--lz-ui-focus-ring); }

/* Every numeric value in the platform carries this. */
.lz-num { font-variant-numeric: var(--lz-font-numeric); }
/* IDs and codes only (§0.1 rule 9). */
.lz-mono { font-family: var(--lz-font-mono); font-variant-numeric: var(--lz-font-numeric); }

/* §8 — content padding 20px 24px 40px, sections 22px apart. */
.lz-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lz-block-gap);
  padding: 20px var(--lz-space-6) 40px;
}

/* §9 — the right panel: --bg, an inset left edge, scrolls with the page. */
.lz-rail {
  grid-area: right;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--lz-space-6) var(--lz-space-4) 28px;
  background: var(--bg);
  box-shadow: var(--lz-ui-rail-edge);
}


.lz-sidebar {
  grid-area: sidebar;
  align-self: stretch;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  overflow-x: hidden;
  background: var(--lz-ui-sidebar-fill);
  color: var(--on-dark);
  z-index: 40;
}

/* The sidebar owns the wordmark. The header never repeats it. */
.lz-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px var(--lz-space-3) var(--lz-space-3);
  border-bottom: 1px solid var(--lz-ui-on-dark-edge);
  text-align: center;
}
/* §0.1 rule 4 — Droid Serif 700, 24px: "LOANZ" white, " 360" orange. */
.lz-brand__mark {
  font-family: var(--lz-font-display);
  font-size: 24px;
  font-weight: var(--lz-weight-bold);
  line-height: 1.1;
  color: var(--lz-ui-on-dark);
}
.lz-brand__suffix { color: var(--accent); }
/* §5 logo block: the uploaded logo at 32px high, at most 70% of the width. */
.lz-brand__logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 70%;
  object-fit: contain;
}
.lz-brand__tag {
  font-size: 9.5px;
  font-weight: var(--lz-weight-semibold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lz-ui-nav-label-ink);
}

.lz-nav { display: flex; flex-direction: column; padding-top: 6px; }

/* SECTIONS FOLD (owner, 10 Nov 2026; rules 5 and 24). The heading is a button:
   pressing it slides its menus down and closes the open section. One section
   is open at a time; the one holding the current page opens by itself. */
.lz-nav__section + .lz-nav__section { border-top: 1px solid var(--lz-ui-on-dark-edge); }

/* §6 type kept (11/700/.12em, uppercase). As a control it needs AA contrast, so
   white at .72 at rest (white at .45 was 4.4:1, under AA for 11px text), full
   white when open, and orange on hover like a menu row (rule 15). A 44px row:
   the project's touch target. */
.lz-nav__label {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  width: 100%;
  min-height: var(--lz-ui-touch-min);
  padding: 0 18px;
  text-align: left;
  font-size: var(--lz-text-nav-section-label-size);
  font-weight: var(--lz-text-nav-section-label-weight);
  letter-spacing: var(--lz-text-nav-section-label-tracking);
  text-transform: var(--lz-text-nav-section-label-transform);
  color: var(--lz-ui-on-dark-muted);
  transition: background-color .15s ease, color .15s ease;
}
.lz-nav__section--open > .lz-nav__label { color: var(--lz-ui-on-dark); }
.lz-nav__label:hover { background: var(--lz-ui-nav-hover-fill); color: var(--accent); }
.lz-nav__label:focus-visible { box-shadow: inset var(--lz-ui-focus-ring); }
.lz-nav__label-text { flex: 1 1 auto; min-width: 0; }
/* Flat orange, like every sidebar icon (rule 15); turns over when open. */
.lz-nav__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--accent);
  transition: transform .3s ease;
}
.lz-nav__section--open .lz-nav__chevron { transform: rotate(180deg); }

/* §6 sub-menu motion (.3s ease, opacity .25s), by grid rows so no height is
   hard-coded. A closed panel is also inert (SidebarNav). */
.lz-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s ease, opacity .25s ease;
}
.lz-nav__section--open > .lz-nav__panel { grid-template-rows: 1fr; opacity: 1; }
.lz-nav__panel > .lz-nav__list { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lz-nav__panel, .lz-nav__chevron { transition: none; }
}

.lz-nav__list { display: flex; flex-direction: column; }
/* §6 — menu row: 6px 18px, 15/600 WHITE (the owner's override of §6's orange),
   3px left border (transparent until active). 44px tall rather than v1.0's
   36px floor: the project's WCAG target. */
.lz-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  min-height: var(--lz-ui-touch-min);
  padding: 6px 18px 6px 15px;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: transparent;
  font-size: var(--lz-text-nav-item-size);
  font-weight: var(--lz-text-nav-item-weight);
  color: var(--lz-ui-nav-ink);
  transition: background-color .15s ease, color .15s ease;
}
/* White at rest; ORANGE on hover and on the active page (owner, 25 Oct 2026). */
.lz-nav__item:hover { background: var(--lz-ui-nav-hover-fill); color: var(--accent); }
.lz-nav__item--active {
  background: var(--lz-ui-nav-active-fill);
  border-left-color: var(--accent);
  color: var(--accent);
}
.lz-nav__item:focus-visible { box-shadow: inset var(--lz-ui-focus-ring); }
/* Icons are ORANGE at rest in every portal (owner, 28 Oct 2026); the label
   stays white. Orange on the black sidebar is allowed (§0.1 rule 3). */
.lz-nav__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.lz-nav__item--active .lz-nav__icon { color: var(--accent); }
.lz-nav__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Text on orange is black, never white (§0.1 rule 2). */
.lz-nav__badge {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  font-size: var(--lz-text-micro-size);
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
}


.lz-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--lz-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lz-space-4);
  padding: var(--lz-space-3) 28px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--lz-ui-topbar-edge);
}
/* The greeting: 20/700/-.01em. ONE LINE in every portal: a long name is cut
   with an ellipsis rather than doubling the header's height. */
.lz-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--lz-text-topbar-title-size);
  font-weight: var(--lz-text-topbar-title-weight);
  letter-spacing: var(--lz-text-topbar-title-tracking);
  color: var(--ink);
}
.lz-topbar__cluster { flex: 0 0 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--lz-space-3); }

/* The header's search: box and button on the header's one line, never wrapped
   under each other. Two classes, because the component rules come later. */
.lz-topbar .lz-topbar__find { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--lz-space-2); }
.lz-topbar .lz-topbar__find input { width: 260px; }
/* The phone form of the same search: the button alone, opening the Find page. */
.lz-topbar .lz-topbar__find-link { display: none; }

/* The width is reserved so nothing shifts when the client-side time arrives. */
.lz-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 96px;
  min-height: var(--lz-ui-touch-min);
}
.lz-clock__time {
  font-size: var(--lz-text-clock-size);
  font-weight: var(--lz-text-clock-weight);
  letter-spacing: var(--lz-text-clock-tracking);
  line-height: 1;
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
}
.lz-clock__date {
  margin-top: 4px;
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-text-card-footer-weight);
  color: var(--ink-3);
}

.lz-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--lz-ui-touch-min);
  padding: 8px var(--lz-space-3);
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--neu-out-xs);
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-weight-bold);
  color: var(--ink);
}
.lz-lang:hover { box-shadow: var(--neu-in-sm); }

/* §7 — 42px black avatar, orange initials, orange outer ring. */
.lz-avatar {
  flex: 0 0 var(--lz-ui-avatar);
  width: var(--lz-ui-avatar);
  height: var(--lz-ui-avatar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--lz-ui-dark-fill);
  color: var(--accent);
  box-shadow: var(--lz-ui-avatar-ring);
  font-size: 13.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .02em;
}
/* §9.1 — 92px solid orange, black initials. Text on orange is black. */
.lz-avatar--lg {
  flex-basis: var(--lz-ui-avatar-lg);
  width: var(--lz-ui-avatar-lg);
  height: var(--lz-ui-avatar-lg);
  background: var(--accent);
  color: var(--primary-900);
  box-shadow: var(--lz-ui-avatar-lg-shadow);
  font-size: 32px;
  font-weight: var(--lz-weight-extrabold);
}

/* §7 — the avatar is the button that opens the user menu. */
.lz-avatar-btn {
  position: relative;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
}
.lz-avatar-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--lz-ui-touch-min);
  height: var(--lz-ui-touch-min);
  transform: translate(-50%, -50%);
}
.lz-avatar-btn:focus-visible { outline: none; box-shadow: var(--lz-ui-focus-ring); }

/* §7 — the user menu: 240px, radius 18, black head, Sign out at its foot. */
.lz-usermenu {
  position: fixed;
  inset: auto;
  top: calc(var(--lz-topbar-height) + 6px);
  right: 20px;
  width: 240px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--lz-r-tile);
  overflow: hidden;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg), var(--neu-out);
}
.lz-usermenu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--lz-ui-dark-band);
  color: var(--lz-ui-on-dark);
}
.lz-usermenu__avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  font-size: 13px;
  font-weight: var(--lz-weight-extrabold);
}
.lz-usermenu__who { display: flex; flex-direction: column; min-width: 0; }
.lz-usermenu__name { font-size: 13.5px; font-weight: var(--lz-weight-bold); }
.lz-usermenu__email {
  font-size: 11.5px;
  color: var(--lz-ui-on-dark-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lz-usermenu__list { margin: 0; padding: 6px; list-style: none; }
.lz-usermenu__item, .lz-usermenu__signout {
  width: 100%;
  min-height: var(--lz-ui-touch-min);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.lz-usermenu__item:hover { background: var(--bg); color: var(--primary-900); }
.lz-usermenu__signout {
  width: calc(100% - 12px);
  margin: 0 6px 6px;
  border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--danger);
}
.lz-usermenu__signout:hover { background: var(--danger-bg); }
.lz-usermenu__item:focus-visible, .lz-usermenu__signout:focus-visible { outline: none; box-shadow: var(--lz-ui-focus-ring); }


.lz-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lz-space-6);
  padding: 26px 30px;
  border-radius: var(--r-xl);
  background: var(--lz-ui-page-hero-fill);
  color: var(--lz-ui-on-dark);
  box-shadow: var(--shadow-lg);
}
.lz-hero--dashboard {
  gap: var(--lz-space-5);
  padding: 30px 36px;
  border-radius: var(--r-2xl);
  background: var(--lz-ui-hero-fill);
  box-shadow: var(--neu-out-md);
}
/* The lead wrapper dissolves so icon and text sit in the grid directly. */
.lz-hero__lead { display: contents; }
.lz-hero--no-icon { grid-template-columns: minmax(0, 1fr) auto; }
.lz-hero__icon {
  width: var(--lz-ui-hero-icon);
  height: var(--lz-ui-hero-icon);
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--primary-900);
}
/* §11.2 — a 28px glyph in the tile, whatever size the menu drew it at. */
.lz-hero__icon svg { width: 28px; height: 28px; }
.lz-hero--dashboard .lz-hero__icon svg { width: 32px; height: 32px; }
.lz-hero--dashboard .lz-hero__icon {
  width: var(--lz-ui-hero-mark);
  height: var(--lz-ui-hero-mark);
  border-radius: var(--lz-r-tile);
}
.lz-hero__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lz-hero__kicker {
  font-size: var(--lz-text-hero-kicker-size);
  font-weight: var(--lz-text-hero-kicker-weight);
  letter-spacing: var(--lz-text-hero-kicker-tracking);
  text-transform: var(--lz-text-hero-kicker-transform);
  color: var(--accent);
}
.lz-hero__title {
  font-size: var(--lz-text-page-hero-title-size);
  font-weight: var(--lz-text-page-hero-title-weight);
  letter-spacing: var(--lz-text-page-hero-title-tracking);
  line-height: 1.05;
  color: var(--lz-ui-on-dark);
}
.lz-hero--dashboard .lz-hero__title {
  font-size: var(--lz-text-hero-title-size);
  font-weight: var(--lz-text-hero-title-weight);
  letter-spacing: var(--lz-text-hero-title-tracking);
  line-height: 1.1;
}
.lz-hero__subtitle {
  max-width: 560px;
  font-size: var(--lz-text-hero-subtitle-size);
  font-weight: var(--lz-text-hero-subtitle-weight);
  color: var(--lz-ui-on-dark-muted);
}
.lz-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* §11.1 — "Live · N tabs": black on solid orange. */
.lz-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lz-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--primary-900);
}


/* §9.1 — the profile card: 24px radius, --neu-out, centred, no top tint. */
.lz-profile-card {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 22px;
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--neu-out);
}
.lz-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lz-profile .lz-avatar--lg { margin-bottom: 16px; }
.lz-profile__name {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: -.01em;
  color: var(--ink);
}
.lz-profile__role {
  margin-bottom: var(--lz-space-3);
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-text-card-footer-weight);
  color: var(--ink-3);
}
/* The verified pill: --bg well, black text, an orange dot with a halo. */
.lz-profile__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
  color: var(--primary-900);
  font-size: 12px;
  font-weight: var(--lz-weight-bold);
}
.lz-profile__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lz-profile__status--pending::before { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }

.lz-profile__rows {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  margin-top: 6px;
  padding: var(--lz-space-3) 4px 4px;
  border-top: 1px dashed var(--line);
  text-align: left;
}
.lz-profile__row { display: flex; align-items: center; gap: var(--lz-space-2); }
.lz-profile__row:first-child .lz-profile__tile { background: var(--primary-900); color: var(--accent); }
/* A row with no icon draws no box: an empty tile reads as a missing image. */
.lz-profile__tile:empty { display: none; }
.lz-profile__tile {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
  color: var(--primary-900);
}
.lz-profile__field { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.lz-profile__label {
  order: 2;
  font-size: 10.5px;
  font-weight: var(--lz-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lz-profile__value {
  order: 1;
  font-size: 12.5px;
  font-weight: var(--lz-weight-bold);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.lz-profile__completion { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: var(--lz-space-3); }
.lz-profile__completion .lz-profile__label { order: 0; }

.lz-copy {
  flex: 0 0 auto;
  min-width: 26px;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
  font-size: var(--lz-text-micro-size);
  font-weight: var(--lz-weight-semibold);
  color: var(--primary-900);
}
.lz-copy:hover { box-shadow: var(--neu-in-sm); }

/* A short note in the rail: an inset well, so it reads as "nothing here yet". */
.lz-rail-note {
  padding: var(--lz-space-4);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* §13.13 — progress bar: an inset track and a SOLID orange fill (§0.1 rule 1). */
.lz-meter {
  width: 100%;
  height: var(--lz-ui-meter-height);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  box-shadow: var(--neu-in-sm);
  overflow: hidden;
}
.lz-meter__fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); }

.lz-target {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  padding: 20px 22px;
  border-radius: var(--r-2xl);
  background: var(--lz-ui-dark-band);
  box-shadow: var(--neu-out);
}
.lz-target__label {
  font-size: var(--lz-text-kpi-label-size);
  font-weight: var(--lz-text-kpi-label-weight);
  letter-spacing: var(--lz-text-kpi-label-tracking);
  text-transform: var(--lz-text-kpi-label-transform);
  color: var(--accent);
}
.lz-target__value {
  font-size: 24px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: -.02em;
  font-variant-numeric: var(--lz-font-numeric);
  line-height: 1.1;
  color: var(--lz-ui-on-dark);
}
.lz-target__of { font-size: var(--lz-text-card-footer-size); font-weight: var(--lz-weight-medium); color: var(--lz-ui-on-dark-faint); }
.lz-target__percent {
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--accent);
}
/* No data is a designed state, never a fabricated number. */
.lz-target__pending { font-size: var(--lz-text-card-footer-size); color: var(--lz-ui-on-dark-muted); }
.lz-target .lz-meter { background: var(--lz-ui-on-dark-edge); box-shadow: none; }

/* §9.2 — quick links: a black-gradient header over a --bg two-column grid. */
.lz-quicklinks__block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-2xl);
  box-shadow: var(--neu-out);
}
.lz-quicklinks__head {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  padding: 16px 20px;
  background: var(--lz-ui-dark-band);
  color: var(--lz-ui-on-dark);
  font-size: 14px;
  font-weight: var(--lz-weight-bold);
}
.lz-quicklinks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lz-space-2);
  padding: 16px var(--lz-space-3);
  background: var(--bg);
}


.lz-app--no-rail {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main"
    "footer  footer";
}
/* Keeps the last column of a page clear of the floating tab. */
@media (min-width: 1024px) {
  .lz-app--no-rail .lz-main { padding-right: 72px; }
}

.lz-panel-handle {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 45;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lz-space-2);
  padding: 12px 8px 14px 10px;
  border-radius: var(--lz-r-tile) 0 0 var(--lz-r-tile);
  background: var(--primary-900);
  color: var(--lz-ui-on-dark);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: padding .2s ease, background-color .2s ease;
}
.lz-app:not(.lz-app--no-rail) .lz-panel-handle { display: none; }
.lz-panel-handle:hover { padding-right: 14px; background: var(--primary-800); }
.lz-panel-handle:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 3px var(--accent); }
.lz-panel-handle__avatar {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  font-size: 12px;
  font-weight: var(--lz-weight-extrabold);
}
.lz-panel-handle__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lz-ui-on-dark-muted);
}
.lz-panel-handle:hover .lz-panel-handle__label { color: var(--accent); }
.lz-panel-handle__chev { color: var(--accent); font-size: 16px; line-height: 1; }

.lz-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 340px;
  max-width: 92vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.16,1,.3,1), overlay .4s allow-discrete, display .4s allow-discrete;
}
.lz-drawer[open] { transform: none; }
@starting-style { .lz-drawer[open] { transform: translateX(100%); } }
.lz-drawer::backdrop { background: var(--lz-ui-backdrop); backdrop-filter: blur(4px); }
html:has(.lz-drawer[open]) { overflow: hidden; }
.lz-drawer__inner { display: flex; flex-direction: column; height: 100%; }
.lz-drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--lz-ui-dark-band);
  color: var(--lz-ui-on-dark);
}
.lz-drawer__kicker {
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lz-drawer__title { margin-top: 2px; font-size: 16px; font-weight: var(--lz-weight-bold); }
.lz-drawer__close {
  margin-left: auto;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--lz-ui-on-dark-wash);
  color: var(--lz-ui-on-dark);
  font-size: 20px;
  line-height: 1;
}
.lz-drawer__close:hover { background: var(--accent); color: var(--primary-900); }
.lz-drawer__close:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.lz-drawer__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px var(--lz-space-4) 28px;
}
.lz-drawer__body > * { flex-shrink: 0; }


.lz-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lz-space-4);
  flex-wrap: wrap;
  padding: var(--lz-space-3) 28px;
  background: var(--lz-ui-dark-band);
  color: var(--lz-ui-on-dark-quote);
}
.lz-footer__quote { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lz-footer__tile { display: inline-flex; font-size: 12px; color: var(--lz-ui-on-dark-quote); }
.lz-footer__text {
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-weight-medium);
  font-style: italic;
  color: var(--lz-ui-on-dark-quote);
}
.lz-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--lz-space-4);
  flex-wrap: wrap;
  font-size: var(--lz-text-micro-size);
  color: var(--lz-ui-on-dark-legal);
}
.lz-footer__sep { color: var(--lz-ui-on-dark-edge); }
.lz-footer__suffix { color: var(--accent); font-weight: var(--lz-weight-semibold); }
@media (max-width: 760px) {
  .lz-footer { flex-direction: column; justify-content: center; text-align: center; }
}


.lz-trail { display: flex; flex-direction: column; gap: var(--lz-space-3); }
.lz-trail__row { display: flex; align-items: center; justify-content: space-between; gap: var(--lz-space-3); flex-wrap: wrap; }
.lz-trail__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lz-trail__crumbs li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lz-text-meta-size); color: var(--ink-3); }
.lz-trail__crumbs li + li::before { content: "\203A"; color: var(--ink-4); }
.lz-trail__crumbs a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.lz-trail__crumbs [aria-current="page"] { color: var(--ink); font-weight: var(--lz-weight-semibold); }
.lz-back-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lz-ui-touch-min);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--lz-ui-dark-fill);
  color: var(--card);
  font-size: 14px;
  font-weight: var(--lz-weight-bold);
  box-shadow: var(--lz-ui-dark-btn-shadow);
  text-decoration: none;
  white-space: nowrap;
}
.lz-back-btn__arrow { color: var(--accent); font-size: 16px; line-height: 1; }
.lz-back-btn:hover { box-shadow: var(--neu-out-xs); }
.lz-trail__pills > a { flex: 1 1 auto; justify-content: center; text-decoration: none; }

.lz-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--lz-block-gap); align-items: start; }
.lz-hub__card { min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--neu-out-sm); }
.lz-hub__head { padding: var(--lz-space-4) 20px 10px; }
.lz-hub__title { margin: 0; font-size: 16px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-hub__list { margin: 0; padding: 0; list-style: none; }
.lz-hub__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.lz-hub__row:hover { background: var(--bg-2); }
.lz-hub__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--neu-out-xs);
  color: var(--primary-900);
}
.lz-hub__icon svg { width: 16px; height: 16px; }
.lz-hub__name { display: block; font-size: 14px; font-weight: var(--lz-weight-semibold); }
.lz-hub__note { display: block; font-size: 12px; color: var(--ink-3); }
.lz-hub__count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  font-size: 12px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  text-align: center;
  color: var(--ink);
}
.lz-hub__arrow { color: var(--ink-3); font-size: 16px; }


.lz-grid { display: grid; gap: var(--lz-space-4); }
.lz-g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.lz-c3 { grid-column: span 3; }
.lz-c4 { grid-column: span 4; }
.lz-c5 { grid-column: span 5; }
.lz-c6 { grid-column: span 6; }
.lz-c7 { grid-column: span 7; }
.lz-c8 { grid-column: span 8; }
.lz-c12 { grid-column: span 12; }

.lz-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--neu-out-sm);
}
.lz-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lz-space-3);
  padding: 16px 20px 12px;
}
.lz-card__kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: var(--lz-weight-extrabold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.lz-card__kicker::before { content: ""; width: 14px; height: 1px; background: currentColor; }
.lz-card__title {
  margin-top: 4px;
  font-size: var(--lz-text-card-title-size);
  font-weight: var(--lz-text-card-title-weight);
  letter-spacing: var(--lz-text-card-title-tracking);
  color: var(--ink);
}
.lz-card__title small { font-size: var(--lz-text-card-footer-size); font-weight: var(--lz-weight-medium); color: var(--ink-3); }
.lz-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-3);
  padding: 8px 20px 20px;
}
.lz-card__body--flush { padding: 0 0 8px; gap: 0; }

/* §12.4 — a list row: lead mark, text, figure on the right. */
.lz-row-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lz-space-3);
  padding: 12px 20px;
  border-top: 1px solid var(--line-2);
}
.lz-row-item:first-child { border-top: 0; }
.lz-row-item:hover { background: var(--bg-2); }
.lz-row-item__name { display: block; font-size: 13px; font-weight: var(--lz-weight-semibold); color: var(--ink); }
.lz-row-item__meta { display: block; font-size: var(--lz-text-micro-size); color: var(--ink-3); }
.lz-row-item__right { text-align: right; }
.lz-row-item__right strong { display: block; font-size: 14.5px; font-weight: var(--lz-weight-semibold); font-variant-numeric: var(--lz-font-numeric); color: var(--ink); }
.lz-row-item__right span { font-size: 10.5px; color: var(--ink-3); }
.lz-ini {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-900);
  color: var(--card);
  font-size: 11.5px;
  font-weight: var(--lz-weight-bold);
}
.lz-ini--accent { background: var(--accent); color: var(--primary-900); }
.lz-rank {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  box-shadow: var(--neu-in-sm);
  color: var(--ink-2);
  font-size: 15px;
  font-style: italic;
  font-weight: var(--lz-weight-semibold);
}

/* §12.4 — the dashboard-list status: a dot and sentence-case words. */
.lz-badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .02em;
  white-space: nowrap;
}
.lz-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.lz-badge-dot--new { background: var(--accent-tint); color: var(--lz-primary-ink); }
.lz-badge-dot--info { background: var(--info-bg); color: var(--info); }
.lz-badge-dot--warn { background: var(--warn-bg); color: var(--warn); }
.lz-badge-dot--ok { background: var(--ok-bg); color: var(--ok); }
.lz-badge-dot--danger { background: var(--danger-bg); color: var(--danger); }

.lz-legend { display: flex; flex-wrap: wrap; gap: var(--lz-space-3); font-size: var(--lz-text-card-footer-size); font-weight: var(--lz-weight-medium); color: var(--ink-2); }
.lz-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--r-xs); vertical-align: -1px; }
.lz-legend__s1 { background: var(--chart-1); }
.lz-legend__s2 { background: var(--chart-2); }

/* §12.4 — a progress bar: inset track, black fill; the orange one is the active measure. */
.lz-bar { height: 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: var(--neu-in-sm); }
.lz-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--lz-ui-bar-fill); }
.lz-bar--accent > i { background: var(--accent); }

/* §12.4 — stat wells inside a card. */
.lz-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lz-space-2); }
.lz-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lz-stats__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  box-shadow: var(--neu-in-sm);
}
.lz-stats__label { font-size: 10px; font-weight: var(--lz-weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lz-stats__value { font-size: 18px; font-weight: var(--lz-weight-bold); font-variant-numeric: var(--lz-font-numeric); color: var(--ink); white-space: nowrap; }

/* Chart text, gridlines and series (§12.4). */
.lz-chart { width: 100%; height: auto; display: block; }
.lz-chart__axis { font-size: 10px; font-weight: var(--lz-weight-medium); fill: var(--ink-3); }
.lz-chart__grid { stroke: var(--line-2); stroke-width: 1; }
.lz-chart__s1 { fill: var(--chart-1); }
.lz-chart__s2 { fill: var(--chart-2); }


/* §12 — the fixed dashboard rhythm, under the shell's hero. */
.lz-dashboard { display: flex; flex-direction: column; gap: var(--lz-block-gap); min-width: 0; }

.lz-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lz-space-4);
}

.lz-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  padding: var(--lz-space-5);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--neu-out-md);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* A 3px SOLID orange top border fades in on hover. Not a gradient. */
.lz-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lz-ui-stat-bar);
  opacity: 0;
  transition: opacity .25s ease;
}
.lz-stat:hover, .lz-stat:focus-within { transform: translateY(-3px); box-shadow: var(--lz-ui-lift); }
.lz-stat:hover::before, .lz-stat:focus-within::before { opacity: 1; }

.lz-stat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lz-space-2); }
.lz-stat__label {
  font-size: var(--lz-text-stat-label-size);
  font-weight: var(--lz-text-stat-label-weight);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  line-height: 1.4;
  color: var(--ink-3);
}
.lz-stat__icon {
  flex: 0 0 var(--lz-ui-stat-icon);
  width: var(--lz-ui-stat-icon);
  height: var(--lz-ui-stat-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--primary-900);
  box-shadow: var(--neu-out-xs);
}
/* §13.2 — the icon tile takes the semantic tint of what the figure means. */
.lz-stat__icon--accent { background: var(--accent); color: var(--primary-900); }
.lz-stat__icon--ok { background: var(--ok-bg); color: var(--ok); }
.lz-stat__icon--warn { background: var(--warn-bg); color: var(--warn); }
.lz-stat__icon--danger { background: var(--danger-bg); color: var(--danger); }
.lz-stat__icon--info { background: var(--info-bg); color: var(--info); }
.lz-stat__value {
  font-size: var(--lz-text-stat-value-size);
  font-weight: var(--lz-text-stat-value-weight);
  letter-spacing: var(--lz-text-stat-value-tracking);
  font-variant-numeric: var(--lz-font-numeric);
  line-height: 1;
  color: var(--ink);
}
.lz-stat__foot {
  display: flex;
  align-items: center;
  gap: var(--lz-space-1);
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-text-card-footer-weight);
  color: var(--ink-3);
}
.lz-stat__pip {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
/* §12.2 — the delta chip: up ok, down danger, flat a neutral well. */
.lz-stat__delta {
  display: inline-flex;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
}
.lz-stat__delta--up { background: var(--ok-bg); color: var(--ok); }
.lz-stat__delta--critical { background: var(--danger-bg); color: var(--danger); }
.lz-stat__delta--neutral { background: var(--bg-2); color: var(--ink-2); }

/* §12.2 — the dashboard KPI strip and card. */
.lz-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--lz-space-4); }
.lz-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  padding: var(--lz-space-4) 20px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--neu-out-sm);
}
.lz-kpi__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lz-space-2); }
.lz-kpi__label {
  font-size: var(--lz-text-kpi-label-size);
  font-weight: var(--lz-text-kpi-label-weight);
  letter-spacing: var(--lz-text-kpi-label-tracking);
  text-transform: var(--lz-text-kpi-label-transform);
  color: var(--ink-3);
}
.lz-kpi__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--primary-900);
  box-shadow: var(--neu-in-sm);
}
.lz-kpi__icon--accent { background: var(--accent); color: var(--primary-900); box-shadow: var(--glow-accent); }
.lz-kpi__icon--warn { background: var(--warn-bg); color: var(--warn); box-shadow: none; }
.lz-kpi__icon--danger { background: var(--danger-bg); color: var(--danger); box-shadow: none; }
.lz-kpi__value {
  font-size: var(--lz-text-kpi-value-size);
  font-weight: var(--lz-text-kpi-value-weight);
  letter-spacing: var(--lz-text-kpi-value-tracking);
  line-height: 1;
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
}
.lz-kpi__unit { margin-left: 2px; font-size: 14px; font-weight: var(--lz-weight-medium); color: var(--ink-3); }
.lz-kpi__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lz-space-2);
  margin-top: auto;
  font-size: var(--lz-text-card-footer-size);
  color: var(--ink-2);
}


.lz-panel {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--neu-out-md);
}
.lz-panel--inset { background: var(--bg-2); box-shadow: var(--neu-in-sm); }
/* §13.1 — 24px all round, 16px from the header to what it heads. */
.lz-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lz-space-2);
  padding: var(--lz-space-6) var(--lz-space-6) 0;
}
.lz-panel__lead { display: flex; align-items: center; gap: var(--lz-space-2); min-width: 0; }
.lz-panel__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--primary-900);
  box-shadow: var(--neu-out-xs);
}
.lz-panel__sub {
  margin-top: 2px;
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-weight-medium);
  color: var(--ink-3);
}
.lz-panel__title {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  min-width: 0;
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-text-panel-title-weight);
  color: var(--ink);
}
.lz-panel__body { padding: 16px var(--lz-space-6) var(--lz-space-6); }
.lz-panel__body--flush { padding: 16px 0 0; }

/* §12.3 — the link button: "View all", 11.5/700, black. */
.lz-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--lz-ui-touch-min);
  padding: 0 4px;
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-weight-bold);
  letter-spacing: -.005em;
  color: var(--primary-900);
  white-space: nowrap;
}
.lz-view-all:hover { color: var(--accent-deep); }


.lz-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lz-ui-side-col);
  gap: var(--lz-block-gap);
  align-items: start;
}
.lz-two-col__main { min-width: 0; }
.lz-two-col__side { min-width: 0; display: flex; flex-direction: column; gap: var(--lz-block-gap); }


.lz-board {
  /*  =======================================================================
   *   THE BOARD SCROLLS, THE PAGE DOES NOT.                          (§9)
   *  =======================================================================
   *  Twenty-one stages will not fit in any viewport, and a page that scrolls
   *  sideways to show them makes every other page on the portal feel broken.
   *  The overflow lives here, in the board's own container.
   */
  display: flex;
  gap: var(--lz-space-3);
  overflow-x: auto;
  padding-bottom: var(--lz-space-2);
  scroll-snap-type: x proximity;
}

.lz-board__column {
  /*  A COLUMN RECEIVES CARDS, so it is an inset well - §3, "a surface that
   *  GIVES info is raised; one that RECEIVES/contains is inset". */
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  padding: var(--lz-space-3);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--neu-in);
  scroll-snap-align: start;
}

.lz-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lz-space-2);
  padding-bottom: var(--lz-space-2);
  border-bottom: 1px solid var(--line);
}

.lz-board__title {
  font-size: var(--lz-text-stat-label-size);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lz-board__count {
  font-size: var(--lz-text-stat-label-size);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.lz-board__card {
  /*  A CARD GIVES INFO, so it is raised against the well it sits in. */
  display: block;
  padding: var(--lz-space-3);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--neu-out-sm);
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lz-board__card:hover, .lz-board__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--lz-ui-lift-sm);
}

.lz-board__name { font-weight: 600; }

.lz-board__meta {
  margin-top: var(--lz-space-1);
  font-size: var(--lz-text-micro-size);
  color: var(--ink-3);
}

/*  THE COLUMN THAT IS EMPTY STILL EXISTS. A board that hides empty stages
 *  redraws itself every time a file moves, and "where did that column go" is
 *  a worse question than an empty one. */
.lz-board__empty {
  font-size: var(--lz-text-micro-size);
  color: var(--ink-3);
  padding: var(--lz-space-2) 0;
}

.lz-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--lz-space-3);
}

/* §9.2 — a quick-action tile: radius 18, lifts 2px on hover, presses in. */
.lz-tile {
  aspect-ratio: 1.2 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  padding: var(--lz-space-4);
  border-radius: var(--lz-r-tile);
  background: var(--card);
  box-shadow: var(--neu-out-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lz-tile:hover, .lz-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--lz-ui-lift-sm); }
.lz-tile:active { box-shadow: var(--neu-in-sm); transform: none; }
.lz-tile__icon {
  flex: 0 0 var(--lz-ui-tile-icon);
  width: var(--lz-ui-tile-icon);
  height: var(--lz-ui-tile-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--neu-out-xs);
  color: var(--primary-900);
}
/* In the right panel the tiles are compact and centred (§9.2). */
.lz-quicklinks .lz-tile {
  aspect-ratio: auto;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 8px 13px;
  text-align: center;
}
.lz-quicklinks .lz-tile__name { font-size: 11px; font-weight: var(--lz-weight-semibold); line-height: 1.25; }
.lz-quicklinks .lz-tile__meta { display: none; }
.lz-tile__body { display: flex; flex-direction: column; gap: var(--lz-space-1); min-width: 0; }
.lz-tile__name {
  display: block;
  font-size: var(--lz-text-body-size);
  font-weight: var(--lz-weight-bold);
  color: var(--ink);
}
.lz-tile__meta {
  display: block;
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-text-card-footer-weight);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink-2);
}
.lz-tile--orange { background: var(--lz-ui-tile-orange); }
/* The orange tile's ring is SOLID accent with a black glyph (§9.2, §0.1 rule 2). */
.lz-tile--orange .lz-tile__icon { background: var(--accent); color: var(--primary-900); box-shadow: var(--glow-accent); }
.lz-tile--neutral { background: var(--lz-ui-tile-neutral); }
.lz-tile--success { background: var(--lz-ui-tile-success); }


.lz-icon-btn {
  position: relative;
  flex: 0 0 var(--lz-ui-control-size);
  width: var(--lz-ui-control-size);
  height: var(--lz-ui-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-2);
  box-shadow: var(--neu-out-sm);
  transition: box-shadow .2s ease, color .2s ease;
}
/*
 * §5.5 draws a 42px circle; §9 requires a 44px minimum touch target. The circle
 * stays 42px and the hit area is grown to 44px with a transparent overlay, so
 * both hold at once.
 */
.lz-icon-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--lz-ui-touch-min);
  height: var(--lz-ui-touch-min);
  transform: translate(-50%, -50%);
}
.lz-icon-btn:hover { box-shadow: var(--neu-in-sm); color: var(--primary-900); }
/* §7 — the voice button: SOLID accent, black glyph. */
.lz-icon-btn--accent { background: var(--accent); color: var(--primary-900); box-shadow: var(--glow-accent); }
.lz-icon-btn--accent:hover { background: var(--accent-2); color: var(--primary-900); }
.lz-icon-btn__unread {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 2px solid var(--card);
}

/* §13.3 — the soft button: --bg, radius 10, a 3/7 lift that presses in. */
.lz-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lz-space-2);
  min-height: var(--lz-ui-touch-min);
  padding: var(--lz-space-2) 16px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--neu-out-xs);
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  transition: box-shadow .15s ease, background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.lz-pill-btn:hover { box-shadow: var(--neu-in-sm); color: var(--primary-900); }
/*  §13.3 — THE PRIMARY BUTTON: solid orange, BLACK text, a pill, the soft
 *  orange drop shadow under it. White on orange is 2.9:1 and v1.0 forbids it
 *  (§0.1 rule 2); black is 6.8:1. Hover darkens to --accent-2, flat.
 *
 *  NO BACKTICKS IN THIS FILE. Every comment here sits inside a template
 *  literal, so a backtick ends the string and the parse error lands lines
 *  away from the cause. */
.lz-pill-btn--primary {
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  box-shadow: var(--glow-accent);
  font-size: var(--lz-text-button-size);
  font-weight: var(--lz-text-button-weight);
}
.lz-pill-btn--primary:hover { background: var(--accent-2); box-shadow: var(--glow-accent); }
/* §13.3 — the dark button: black gradient, orange label. */
.lz-pill-btn--dark {
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--lz-ui-dark-fill);
  color: var(--accent);
  font-weight: var(--lz-weight-bold);
  box-shadow: var(--lz-ui-dark-btn-shadow);
}
.lz-pill-btn--dark:hover { color: var(--card); box-shadow: var(--neu-out-xs); }
/* §13.3 — destructive: a red tint, never a solid red block. */
.lz-pill-btn--danger {
  border-radius: var(--r-pill);
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: var(--lz-weight-bold);
  box-shadow: none;
}
.lz-pill-btn--danger:hover { box-shadow: var(--neu-in-sm); color: var(--danger); }
/* §13.3 — Cancel beside Save: the soft shape in the secondary ink. */
.lz-pill-btn--discard { color: var(--ink-2); }
/* §13.3 — the small button inside a table row: 12/600, 36px tall. */
.lz-pill-btn--row {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--ink-2);
}
/* §13.3 — the large primary (with --primary), for a hero: 48px tall, a deeper drop shadow. */
.lz-pill-btn--lg { min-height: 48px; padding: 14px 22px; }
.lz-pill-btn--lg, .lz-pill-btn--lg:hover { box-shadow: var(--lz-ui-glow-accent-lg); }
/* 0.1 rule 1 — the orange drop shadow is for light surfaces only. Inside the black hero the orange button stays flat. */
.lz-hero .lz-pill-btn--primary, .lz-hero .lz-pill-btn--primary:hover,
.lz-hero .lz-pill-btn--lg, .lz-hero .lz-pill-btn--lg:hover { box-shadow: none; }

/*  A DISABLED BUTTON HAS TO LOOK DISABLED (§13.3: opacity .5, not-allowed).
 *
 *  Every shape keeps its own colours at half strength, so a disabled primary
 *  is a faded orange rather than a confident one - the Communication screen
 *  once offered a bright orange "Switch on" for a template that could not
 *  lawfully be activated. The hover rules are cancelled too, so a disabled
 *  button does not darken or press in under the pointer, which is the other
 *  half of the same lie.
 */
.lz-pill-btn[aria-disabled="true"], .lz-pill-btn:disabled { opacity: .5; cursor: not-allowed; }
.lz-pill-btn[aria-disabled="true"]:hover, .lz-pill-btn:disabled:hover { box-shadow: var(--neu-out-xs); color: var(--ink); }
.lz-pill-btn--discard[aria-disabled="true"]:hover, .lz-pill-btn--discard:disabled:hover,
.lz-pill-btn--row[aria-disabled="true"]:hover, .lz-pill-btn--row:disabled:hover { color: var(--ink-2); }
.lz-pill-btn--primary[aria-disabled="true"]:hover, .lz-pill-btn--primary:disabled:hover {
  background: var(--accent);
  color: var(--primary-900);
  box-shadow: var(--glow-accent);
}
.lz-pill-btn--dark[aria-disabled="true"]:hover, .lz-pill-btn--dark:disabled:hover { color: var(--accent); box-shadow: var(--lz-ui-dark-btn-shadow); }
.lz-pill-btn--danger[aria-disabled="true"]:hover, .lz-pill-btn--danger:disabled:hover { color: var(--danger); box-shadow: none; }


.lz-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: var(--lz-text-pill-size);
  font-weight: var(--lz-text-pill-weight);
  letter-spacing: var(--lz-text-pill-tracking);
  text-transform: var(--lz-text-pill-transform);
  line-height: 1.3;
  white-space: nowrap;
}
.lz-status::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.lz-status--new { background: var(--accent-tint); color: var(--lz-primary-ink); }
.lz-status--new::before { background: var(--accent); }
.lz-status--info { background: var(--info-bg); color: var(--info); }
.lz-status--warning { background: var(--warn-bg); color: var(--warn); }
.lz-status--success { background: var(--ok-bg); color: var(--ok); }
.lz-status--rejected, .lz-status--critical { background: var(--danger-bg); color: var(--danger); }
.lz-status--waiting { background: var(--bg); color: var(--ink-3); box-shadow: var(--neu-in-sm); }

/* §12.4 — chips: a neutral well; the accent chip is a flat tint. */
.lz-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--lz-weight-semibold);
  letter-spacing: .01em;
  background: var(--bg-2);
  color: var(--ink-2);
  box-shadow: var(--neu-in-sm);
}
.lz-chip--verified { background: var(--ok-bg); color: var(--ok); box-shadow: none; }
.lz-chip--neutral {
  background: var(--bg-2);
  color: var(--ink-2);
  box-shadow: var(--neu-in-sm);
}
.lz-chip--accent { background: var(--accent-tint); color: var(--primary-900); box-shadow: none; }


.lz-table-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--neu-out-md);
}
/* Wide tables scroll inside this, never by widening the page. Positioned, so a
   visually hidden header label (position: absolute) stays inside the scroll box
   instead of escaping it and widening the page on a phone. */
.lz-table-scroll { position: relative; overflow-x: auto; max-width: 100%; }
.lz-table { width: 100%; border-collapse: collapse; font-size: var(--lz-text-table-cell-size); }
.lz-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lz-table th {
  padding: 12px 16px;
  background: var(--primary-900);
  color: var(--lz-status-critical-ink);
  font-size: var(--lz-text-table-head-size);
  font-weight: var(--lz-text-table-head-weight);
  letter-spacing: var(--lz-text-table-head-tracking);
  text-transform: var(--lz-text-table-head-transform);
  text-align: left;
  white-space: nowrap;
}
.lz-table td {
  padding: var(--lz-space-3) 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: var(--lz-text-table-cell-size);
  color: var(--ink);
}
.lz-table tbody tr:hover td { background: var(--bg); }

/* The second line inside a cell: the channel under the template code, the
   reason under a status, the version under a name. It exists because the
   alternative is a second column for something that is not a second fact - and
   because without it every author reaches for whichever muted class is nearest,
   which is how a portal ends up wearing the public site's typography. */
.lz-cell-note {
  margin-top: var(--lz-space-1);
  font-size: var(--lz-text-meta-size);
  color: var(--ink-2);
}
.lz-table th.lz-cell--num, .lz-table td.lz-cell--num {
  text-align: right;
  font-variant-numeric: var(--lz-font-numeric);
}
/* §13.7 — the compact table: 10px rows. */
.lz-table--compact td { padding: 10px 16px; }

/* §13.7 — under the table: "Showing 1–20 of N" on the left, soft buttons on the right. */
.lz-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lz-space-2);
  padding: var(--lz-space-3) 16px;
}
.lz-pager__count { font-size: 12px; color: var(--ink-3); font-variant-numeric: var(--lz-font-numeric); }
.lz-pager__nav { display: flex; gap: var(--lz-space-2); }


.lz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--lz-space-3);
  padding: 50px 30px;
}
.lz-empty__icon svg { width: 28px; height: 28px; }
.lz-empty__icon {
  flex: 0 0 var(--lz-ui-empty-icon);
  width: var(--lz-ui-empty-icon);
  height: var(--lz-ui-empty-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  background: var(--bg);
  color: var(--ink-3);
  box-shadow: var(--neu-in);
}
.lz-empty__title {
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-weight-semibold);
  color: var(--ink);
}
.lz-empty__text { font-size: 12.5px; color: var(--ink-3); max-width: 42ch; }

/*  THE LOADING SKELETON. Blocks the shape of what is coming - never a bare
 *  spinner for a whole page. Heights from the standard: hero 180, tabs 52,
 *  rows 140. */
.lz-skeleton {
  display: block;
  min-height: 16px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  animation: lz-skeleton-pulse 1.4s ease-in-out infinite;
}
.lz-skeleton--hero { height: 180px; border-radius: var(--r-xl); }
.lz-skeleton--tabs { height: 52px; border-radius: var(--r-pill); }
.lz-skeleton--row { height: 140px; }
.lz-skeleton-stack { display: flex; flex-direction: column; gap: var(--lz-block-gap); }
@keyframes lz-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/*  THE TOAST. Bottom right, a raised white card with a 4px left edge in the
 *  colour of what happened. Hides itself after four seconds. */
.lz-toast {
  position: fixed;
  right: var(--lz-space-6);
  bottom: var(--lz-space-6);
  z-index: 61;
  display: flex;
  align-items: flex-start;
  gap: var(--lz-space-2);
  max-width: min(380px, calc(100vw - 32px));
  padding: var(--lz-space-3) 16px;
  border-left: 4px solid var(--info);
  border-radius: calc(var(--r-md) + 2px);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--neu-out);
  font-size: 13px;
  animation: lz-toast-in .25s ease;
}
.lz-toast--success { border-left-color: var(--ok); }
.lz-toast--error { border-left-color: var(--danger); }
.lz-toast__close { margin-left: auto; color: var(--ink-3); font-size: 16px; line-height: 1; }
.lz-toast__close:hover { color: var(--ink); }
@keyframes lz-toast-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


.lz-tabs { display: flex; flex-wrap: wrap; gap: var(--lz-space-2); }
.lz-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lz-ui-touch-min);
  padding: 8px 18px;
  border: 1px solid var(--card);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--neu-out-xs);
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.lz-tab:hover { border-color: var(--accent-soft); }
.lz-tab--active, .lz-tab--active:hover {
  background: var(--primary-900);
  border-color: var(--primary-900);
  color: var(--card);
}
/*  Rule 20 — the page tab's count chip: --bg-2 with ink at rest, solid orange
 *  with black on the active pill. (__index is the older name for the same chip.) */
.lz-tab__count, .lz-tab__index {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 10px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  text-align: center;
}
.lz-tab--active .lz-tab__count, .lz-tab--active .lz-tab__index { background: var(--accent); color: var(--primary-900); }
.lz-tab[aria-disabled="true"] { color: var(--ink-4); cursor: not-allowed; }

/* §13.6 — the filter bar: status tabs, search, dropdowns, dates, then actions on the right. */
.lz-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: var(--lz-space-3) var(--lz-space-4);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--neu-out-md);
}
.lz-filter-bar__search { flex: 1 1 220px; min-width: 0; }
.lz-filter-bar__actions { display: flex; flex-wrap: wrap; gap: var(--lz-space-2); margin-left: auto; }

.lz-tabstrip { display: flex; gap: var(--lz-space-2); }
.lz-tabstrip__btn {
  /* Sized from its own label, then the spare width is shared, so a long label
     such as "Performance" is not cut while short ones sit beside it. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  min-height: var(--lz-ui-touch-min);
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--card);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--neu-out-xs);
  color: var(--ink);
  text-align: left;
  transition: border-color .2s ease, background-color .2s ease;
}
.lz-tabstrip__btn:hover { border-color: var(--accent-soft); }
.lz-tabstrip__icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--primary-900);
}
.lz-tabstrip__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lz-tabstrip__num { display: none; }
.lz-tabstrip__label {
  font-size: 13.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lz-tabstrip__count {
  font-size: var(--lz-text-micro-size);
  font-weight: var(--lz-weight-semibold);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lz-tabstrip__btn--active, .lz-tabstrip__btn--active:hover { background: var(--primary-900); border-color: var(--primary-900); }
.lz-tabstrip__btn--active .lz-tabstrip__icon { background: var(--accent); color: var(--primary-900); }
.lz-tabstrip__btn--active .lz-tabstrip__label { color: var(--card); }
.lz-tabstrip__btn--active .lz-tabstrip__count { color: var(--accent); }


.lz-money { font-variant-numeric: var(--lz-font-numeric); color: inherit; white-space: nowrap; }
.lz-money__symbol { color: inherit; font-weight: inherit; }
.lz-money--on-dark { color: var(--lz-ui-on-dark); }


/* §13.5 — label 12.5/600 sentence case, 6px above its input. */
.lz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.lz-label {
  font-size: var(--lz-text-field-label-size);
  font-weight: var(--lz-text-field-label-weight);
  color: var(--ink-2);
}

/* §13.5 — the input is a WELL: --bg, a 1.5px line, radius 10, an inset shadow. */
.lz-input {
  width: 100%;
  min-height: var(--lz-ui-touch-min);
  padding: 11px var(--lz-space-3);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
  color: var(--ink);
  font-family: var(--lz-font-sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color .15s ease, box-shadow .2s ease, color .2s ease;
}
.lz-input::placeholder { color: var(--ink-4); }
/* §0.1 rule 6 — the focus ring is orange, worn with the inset shadow. */
.lz-input:focus, .lz-input:focus-visible {
  border-color: var(--primary-700);
  box-shadow: var(--neu-in-sm), var(--lz-ui-input-ring);
}
.lz-input[aria-invalid="true"] { border-color: var(--danger); background: var(--card); }
.lz-input:disabled { color: var(--ink-4); cursor: not-allowed; }

/*  §13.5 — "apply the .inp look globally to unstyled input (except checkbox,
 *  radio, range, file and buttons), select and textarea". Only a control with
 *  NO class at all, so this can never fight a component that styles its own. */
:where(.lz-app, .lz-auth, .lz-site) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="color"], [type="image"]), select, textarea):not([class]) {
  width: 100%;
  min-height: var(--lz-ui-touch-min);
  padding: 11px var(--lz-space-3);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
  color: var(--ink);
  font-family: var(--lz-font-sans);
  font-size: 13.5px;
  outline: none;
}
:where(.lz-app, .lz-auth, .lz-site) :where(input, select, textarea):not([class]):focus {
  border-color: var(--primary-700);
  box-shadow: var(--neu-in-sm), var(--lz-ui-input-ring);
}

/* Digits in a form line up in columns exactly as they do in a table. */
.lz-input--num { font-variant-numeric: var(--lz-font-numeric); }

.lz-field__hint { font-size: var(--lz-text-meta-size); color: var(--ink-3); }
/* §13.5 — the required mark, and the inline message under a field that failed. */
.lz-req { color: var(--danger); font-weight: var(--lz-weight-bold); }
.lz-field__error { font-size: var(--lz-text-meta-size); color: var(--danger); }
/* §13.5 — two columns, 14px apart; a full-width field spans both. One column below 768px. */
.lz-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lz-space-3); }
.lz-field--full { grid-column: 1 / -1; }

/* §13.9 — the danger alert strip: red tint, red text. */
.lz-form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--lz-space-2);
  padding: 16px 20px;
  border-radius: var(--r-lg);
  border: 1px solid rgb(var(--lz-danger-rgb) / 0.3);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
}

.lz-form-note {
  padding: 16px 20px;
  border-radius: var(--r-lg);
  border: 1px solid rgb(var(--lz-success-rgb) / 0.25);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
}

/*  ENROLLING A SECOND FACTOR (0154).
 *
 *  The QR code sits on a WHITE plate whatever the portal's tokens say, because
 *  a camera reads a QR code by contrast and a cream or dark ground under a dark
 *  code is the difference between scanning first time and somebody giving up
 *  and typing 32 characters by hand.
 */
.lz-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto var(--lz-space-4);
  padding: var(--lz-space-3);
  border-radius: var(--r-lg);
  background: var(--lz-qr-plate);
  box-shadow: var(--lz-shadow-drop);
}

/*  The same secret as text, for an authenticator that cannot scan. Monospace
 *  and generously spaced: this is read aloud or copied character by character,
 *  and l/1 and O/0 have to be told apart. It wraps rather than scrolling, so
 *  nothing is hidden off the edge on a phone.
 */
.lz-code-block {
  display: block;
  padding: var(--lz-space-3) var(--lz-space-4);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--lz-font-mono);
  font-size: var(--lz-text-body-size);
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}


.lz-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--lz-space-6);
  background: var(--bg);
}

/* THE SIGN-IN PAGE AS A LANDING PAGE.
 *
 * Somebody arriving from a partner's link or an advert has not decided yet, and
 * a bare form tells them nothing about what is behind it. This puts the case
 * BESIDE the card — it does not touch the card, which is still the only thing
 * that signs anybody in.
 *
 * The password is entered on the portal that validates it and nowhere else.
 * That is why this is a layout modifier here rather than a form on the public
 * site: a credential box on a different origin trains people to type their
 * password wherever it is asked. */
.lz-auth--split {
  grid-template-columns: minmax(0, 34rem) 420px;
  justify-content: center;
  justify-items: stretch;
  align-items: center;
  gap: var(--lz-space-6);
}

.lz-auth__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-4);
}

.lz-auth__pitch h2 {
  margin: 0;
  font-size: var(--lz-text-hero-title-size);
  font-weight: var(--lz-weight-semibold);
  letter-spacing: -.01em;
  color: var(--ink);
}

.lz-auth__pitch p {
  margin: 0;
  font-size: var(--lz-text-body-size);
  line-height: 1.62;
  color: var(--ink-2);
}

.lz-auth__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
}

.lz-auth__points li {
  display: flex;
  gap: var(--lz-space-2);
  font-size: var(--lz-text-body-size);
  line-height: 1.55;
  color: var(--ink-2);
}

.lz-auth__points li::before { content: '\2022'; color: var(--accent); font-weight: var(--lz-weight-bold); }

/* THE CARD COMES FIRST ON A PHONE. Somebody who came to sign in should not
   scroll past the pitch to reach the form. */
@media (max-width: 1000px) {
  .lz-auth--split { grid-template-columns: minmax(0, 420px); }
  .lz-auth__pitch { order: 2; }
}

.lz-auth__card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-5);
  padding: var(--lz-space-6);
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--neu-out);
}

.lz-auth__brand {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-1);
  align-items: center;
  text-align: center;
}
.lz-auth__wordmark {
  font-family: var(--lz-font-display);
  font-size: var(--lz-text-hero-title-size);
  font-weight: var(--lz-weight-bold);
  color: var(--primary-900);
  letter-spacing: -.01em;
}
.lz-auth__wordmark span { color: var(--accent); }
.lz-auth__tagline {
  font-size: var(--lz-text-meta-size);
  font-weight: var(--lz-weight-semibold);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  color: var(--ink-3);
}

.lz-auth__title {
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-text-panel-title-weight);
  color: var(--ink);
  text-wrap: balance;
}

.lz-auth__form { display: flex; flex-direction: column; gap: var(--lz-space-4); }

.lz-auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--lz-space-3); }

/* Orange text on a light surface is --accent-deep, never --accent (§0.1 rule 3). */
.lz-auth__link {
  font-size: var(--lz-text-meta-size);
  font-weight: var(--lz-weight-semibold);
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lz-auth__link:hover { color: var(--primary-900); }

/* --ink-3, not --ink-4: ink-4 is for disabled text and placeholders, and on the
   white card it is 2.44:1. This is real text somebody reads (the legal name). */
.lz-auth__footer {
  text-align: center;
  font-size: var(--lz-text-meta-size);
  color: var(--ink-3);
}


.lz-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lz-space-3);
  padding-bottom: var(--lz-space-2);
}
.lz-detail-head__text { display: flex; flex-direction: column; gap: var(--lz-space-1); min-width: 0; }
.lz-detail-head__eyebrow {
  font-size: var(--lz-text-stat-label-size);
  font-weight: var(--lz-weight-semibold);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  color: var(--ink-3);
}
.lz-detail-head__title {
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-text-panel-title-weight);
  color: var(--primary-900);
  text-wrap: balance;
}
.lz-detail-head__meta { font-size: var(--lz-text-meta-size); color: var(--ink-2); }
.lz-detail-head__actions { display: flex; align-items: center; gap: var(--lz-space-2); }


/*
 * =============================================================================
 *  A CHECKBOX, AND A LABEL THAT SITS BESIDE IT
 * =============================================================================
 *  The native control, restyled rather than replaced. A div pretending to be a
 *  checkbox loses the keyboard behaviour, the form participation and the
 *  screen-reader announcement that come free with the real one, and every
 *  reimplementation gets at least one of those wrong.
 */
.lz-checkbox {
  width: var(--lz-space-4);
  height: var(--lz-space-4);
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.lz-checkbox:focus-visible { box-shadow: var(--lz-ui-focus-ring); }

.lz-label--inline {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  cursor: pointer;
  font-weight: 400;
}

/*
 * A field holding STRUCTURED text — JSON facts, a rule value, a MIME list.
 * Monospaced because the alignment carries meaning: a missing brace is visible
 * in a monospaced block and invisible in a proportional one.
 */
.lz-input--code {
  font-family: var(--lz-font-mono);
  font-size: var(--lz-text-meta-size);
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

/*
 * =============================================================================
 *  THE IMPORT PROBLEM LIST
 * =============================================================================
 *  Numbered, because the count is the first thing somebody needs and a bullet
 *  hides it. Scrolls within itself rather than pushing the form off the screen:
 *  a fifty-problem list beside a file input that has scrolled away is a list
 *  nobody can act on.
 */
.lz-import__problems {
  margin: 0;
  padding-left: var(--lz-space-5);
  max-height: 18rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  font-size: var(--lz-text-meta-size);
  line-height: 1.5;
  color: var(--ink-2);
}
.lz-import__problems li { padding-left: var(--lz-space-1); }
.lz-import__problems strong { color: var(--primary-900); }

/*
 * =============================================================================
 *  A MATCHED LENDER, AND ITS REASONS
 * =============================================================================
 *  Not a table. A table would give every entry the same four columns, and what
 *  matters here is a variable-length explanation — three lists of rules, of
 *  which any may be empty. A row of mostly blank cells reads as "nothing to
 *  say" when the truth is "nothing failed".
 */
.lz-match__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-4);
}
.lz-match {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  padding: var(--lz-space-4);
  border-radius: var(--r-lg);
  background: var(--card-2);
  box-shadow: var(--neu-in);
}
.lz-match__head { line-height: 1.3; }
.lz-match__rules {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--lz-space-2);
  font-size: var(--lz-text-meta-size);
  color: var(--ink-2);
}

/*
 * =============================================================================
 *  A SLAB BAND — THREE FIELDS THAT ONLY MEAN ANYTHING TOGETHER
 * =============================================================================
 *  "80", "100" and "5000" stacked in a column are three unrelated numbers. On
 *  one line separated by an en dash they read as the sentence they are: from
 *  eighty to a hundred per cent, pays five thousand. The two mistakes that
 *  matter here are a GAP between bands and an OVERLAP, and both are visible in
 *  a ladder of lines and invisible in a column of boxes.
 *
 *  It WRAPS rather than scrolling. A band that runs off the side of a narrow
 *  panel is a band somebody cannot check, and these sit in the aside column.
 */
.lz-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--lz-space-2);
  margin-bottom: var(--lz-space-2);
  font-size: var(--lz-text-meta-size);
  color: var(--ink-2);
}
.lz-band .lz-input { flex: 1 1 6rem; min-width: 0; }

/*
 * A field holding a number of two or three digits — a percentage, a count, a
 * year. Sized to its content: a full-width box for "12" invites somebody to
 * check whether they have missed something off the end.
 */
.lz-input--narrow {
  flex: 0 0 auto;
  width: 6rem;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/*
 * A group of fields that belong together, with the browser's default border
 * removed. The legend element carries the group's name for a screen reader,
 * which is the whole reason to use a real fieldset instead of a div plus a
 * heading.
 */
.lz-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
}
.lz-fieldset legend { padding: 0; margin-bottom: var(--lz-space-2); }

/*
 * =============================================================================
 *  A LINK INSIDE A TABLE
 * =============================================================================
 *  Underlined, always. An accent-coloured word with no underline is a link only
 *  to somebody who can see the accent, and §5 of the standard puts the burden on
 *  the component rather than on the reader. The underline sits a little below
 *  the baseline so a row of names does not read as struck through.
 */
.lz-link {
  color: var(--primary-900);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 500;
}
/* Hover turns the WORD dark orange, --accent-deep, never --accent (§0.1 rule 3). */
.lz-link:hover { color: var(--accent-deep); }
.lz-link:focus-visible {
  box-shadow: var(--lz-ui-focus-ring);
  border-radius: var(--r-sm);
}

/*
 * =============================================================================
 *  THE WORKINGS BEHIND A NUMBER
 * =============================================================================
 *  A definition list, because that is what it is: each row is a term and the
 *  figure the platform used for it. A table would imply the rows are comparable
 *  to one another, and they are not - income, existing EMIs and outstanding debt
 *  are three different kinds of thing that together produce one ratio.
 *
 *  The figures use tabular numerals and sit right, so a column of rupees lines
 *  up on the decimal, which is the only way somebody checks arithmetic by eye.
 */
.lz-workings {
  margin: var(--lz-space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-2);
  font-size: var(--lz-text-meta-size);
}
.lz-workings__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lz-space-4);
  padding-bottom: var(--lz-space-2);
  border-bottom: 1px solid var(--line);
}
.lz-workings__row:last-child { border-bottom: 0; padding-bottom: 0; }
.lz-workings dt { flex: 0 1 40%; min-width: 0; color: var(--ink-2); }
/*  WRAPS, and sits right. Written for figures, which are short, it was set
    to never wrap — and the CRO's contacts page puts a sentence here, which
    ran off the edge of the card and was clipped mid-word. */
.lz-workings dd {
  flex: 1 1 60%;
  min-width: 0;
  margin: 0;
  color: var(--primary-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/*
 * =============================================================================
 *  THE ONE SENTENCE A CUSTOMER CAME FOR
 * =============================================================================
 *  Set large, because it is the answer and everything else on the page is
 *  supporting detail. A status told in the same size as a reference number is a
 *  status somebody has to hunt for.
 */
.lz-story {
  margin: 0 0 var(--lz-space-4);
  font-size: var(--lz-text-panel-title-size);
  line-height: 1.35;
  font-weight: 500;
  color: var(--primary-900);
  text-wrap: balance;
}

/*  THE JOURNEY (.lz-journey) is the 13.14 stage tracker. It lives in
    loan-styles.ts with the other loan components. */


.lz-modal {
  width: min(480px, 92vw);
  max-height: 90dvh;
  margin: auto;
  padding: 28px;
  border: 0;
  border-radius: var(--r-2xl);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg), var(--neu-out);
}
.lz-modal::backdrop { background: var(--lz-ui-backdrop); backdrop-filter: blur(6px); }
html:has(.lz-modal[open]) { overflow: hidden; }
.lz-modal__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: var(--lz-r-tile);
}
.lz-modal__icon--danger { background: var(--danger-bg); color: var(--danger); }
.lz-modal__icon--save { background: var(--accent-tint); color: var(--primary-900); }
.lz-modal__title { margin: 0 0 6px; font-size: 18px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-modal__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.lz-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.lz-modal__actions form { display: contents; }


.lz-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--warn) 25%, var(--card));
  border-radius: var(--r-lg);
  background: var(--warn-bg);
}
.lz-alert--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, var(--card)); }
.lz-alert--info { background: var(--accent-tint); border-color: var(--accent-soft); }
.lz-alert--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 25%, var(--card)); }
.lz-alert__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--warn);
}
.lz-alert--danger .lz-alert__icon { color: var(--danger); }
.lz-alert--info .lz-alert__icon { color: var(--primary-900); }
.lz-alert--ok .lz-alert__icon { color: var(--ok); }
.lz-alert__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lz-alert__title { font-size: 13px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-alert__detail { font-size: var(--lz-text-meta-size); color: var(--ink-2); }
.lz-alert__action { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--lz-space-2); }

/*
 * Announcements (0767): an optional 1200x300 image above the alert strip, and
 * up to five of them turning in place. No slide animation: a slide is shown or
 * hidden, so prefers-reduced-motion has nothing to switch off but the turning,
 * which the component never starts for such a reader.
 */
.lz-banner-slide { display: flex; flex-direction: column; gap: var(--lz-space-2); min-width: 0; }
.lz-banner-slide__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--neu-out-sm);
}
.lz-banner-carousel { display: flex; flex-direction: column; gap: var(--lz-space-2); min-width: 0; }
.lz-banner-carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--lz-space-2);
}
.lz-banner-carousel__count {
  min-width: 4.5em;
  text-align: center;
  font-size: var(--lz-text-meta-size);
  color: var(--ink-2);
  font-variant-numeric: var(--lz-font-numeric);
}
.lz-banner-preview { display: flex; flex-direction: column; gap: var(--lz-space-3); min-width: 0; }
.lz-banner-preview__frame {
  padding: var(--lz-space-3);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
  min-width: 0;
}
.lz-banner-preview__frame--phone { max-width: 375px; }
.lz-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lz-space-2); }
.lz-banner-preview__label {
  margin: 0 0 var(--lz-space-2);
  font-size: var(--lz-text-meta-size);
  font-weight: var(--lz-weight-semibold);
  color: var(--ink-2);
}


.lz-slideover {
  position: fixed;
  inset: 0 0 0 auto;
  width: 520px;
  max-width: 95vw;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--lz-ui-slideover-edge);
  animation: lz-slide-in .35s cubic-bezier(.16,1,.3,1);
}
.lz-slideover[open] { display: flex; flex-direction: column; }
.lz-slideover::backdrop { background: var(--lz-ui-backdrop); backdrop-filter: blur(6px); }
html:has(.lz-slideover[open]) { overflow: hidden; }
@keyframes lz-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.lz-slideover__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lz-slideover__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--lz-space-3);
  padding: 22px 28px;
  background: var(--lz-ui-dark-band);
  color: var(--lz-ui-on-dark);
}
.lz-slideover__headtext { flex: 1 1 auto; min-width: 0; }
.lz-slideover__kicker {
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lz-slideover__title { margin-top: 2px; font-size: 18px; font-weight: var(--lz-weight-bold); }
.lz-slideover__desc { margin-top: 4px; font-size: 12.5px; color: var(--lz-ui-on-dark-muted); }
.lz-slideover__close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--lz-ui-on-dark-wash);
  color: var(--lz-ui-on-dark);
}
.lz-slideover__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--lz-space-6) 28px;
}
.lz-slideover__section h4 {
  display: flex;
  align-items: center;
  gap: var(--lz-space-2);
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: var(--lz-weight-bold);
}
.lz-slideover__num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--primary-900);
  font-size: 11px;
  font-weight: var(--lz-weight-extrabold);
}
.lz-slideover__foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: var(--lz-space-4) 28px;
  border-top: 1px solid var(--line);
}


.lz-dash-panel { display: flex; flex-direction: column; gap: var(--lz-space-4); min-width: 0; animation: lz-dash-fade .35s ease; }
@keyframes lz-dash-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lz-tabstrip__icon svg { width: 16px; height: 16px; }
.lz-tabstrip__btn { cursor: pointer; font: inherit; }
.lz-tabstrip__btn:focus-visible { outline: none; box-shadow: var(--lz-ui-focus-ring); }

/* §12.2 — the KPI icon glyph, the delta chip and the sparkline. */
.lz-kpi__icon svg { width: 18px; height: 18px; }
.lz-kpi__note { text-align: right; font-variant-numeric: var(--lz-font-numeric); }
.lz-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  white-space: nowrap;
}
.lz-delta--up { background: var(--ok-bg); color: var(--ok); }
.lz-delta--down { background: var(--danger-bg); color: var(--danger); }
.lz-delta--flat { background: var(--bg-2); color: var(--ink-2); }
.lz-kpi__spark { flex: 0 0 80px; width: 80px; height: 24px; }
.lz-kpi__spark polyline { fill: none; stroke: var(--primary-900); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* §12.3 — the one action in a card head, and a card with nothing to show. */
.lz-card__action { flex: 0 0 auto; display: flex; align-items: center; gap: var(--lz-space-2); }
.lz-linkbtn { font-size: 11.5px; font-weight: var(--lz-weight-bold); letter-spacing: -.005em; color: var(--primary-900); white-space: nowrap; text-decoration: none; }
.lz-linkbtn:hover { color: var(--accent-deep); }
.lz-linkbtn:focus-visible { outline: none; border-radius: var(--r-xs); box-shadow: var(--lz-ui-focus-ring); }
.lz-card-empty { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.lz-card-empty__title { font-size: 13px; font-weight: var(--lz-weight-semibold); color: var(--ink); }
.lz-card-empty__text { font-size: 12px; color: var(--ink-3); }
.lz-card__note { font-size: var(--lz-text-micro-size); color: var(--ink-3); }
.lz-card__meter { display: flex; flex-direction: column; gap: 6px; }
.lz-card__meter-head { display: flex; justify-content: space-between; gap: var(--lz-space-2); font-size: 11.5px; color: var(--ink-2); }
.lz-card__meter-head strong { font-variant-numeric: var(--lz-font-numeric); color: var(--ink); }

/* §12.4 — a list of rows, each with a 38px icon box tinted by what it means. */
.lz-row-list { list-style: none; margin: 0; padding: 0; }
.lz-row-item__text { min-width: 0; }
.lz-row-item__aside { display: flex; align-items: center; gap: var(--lz-space-2); justify-content: flex-end; text-align: right; font-variant-numeric: var(--lz-font-numeric); }
.lz-row-item__figure { font-size: 12px; font-weight: var(--lz-weight-semibold); color: var(--ink); white-space: nowrap; }
.lz-row-item__name a { color: inherit; text-decoration: none; }
.lz-row-item__name a:hover { color: var(--accent-deep); }
.lz-row-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  box-shadow: var(--neu-out-xs);
  background: var(--bg);
  color: var(--primary-900);
}
.lz-row-icon svg { width: 16px; height: 16px; }
.lz-row-icon--ok { background: var(--ok-bg); color: var(--ok); }
.lz-row-icon--warn { background: var(--warn-bg); color: var(--warn); }
.lz-row-icon--danger { background: var(--danger-bg); color: var(--danger); }
.lz-row-icon--info { background: var(--info-bg); color: var(--info); }
.lz-row-item__meter { display: block; margin-top: 6px; }

/* §12.4 — chart series 3-8 and "other" (0); the legend is a real list. */
.lz-chart__s3 { fill: var(--chart-3); }
.lz-chart__s4 { fill: var(--chart-4); }
.lz-chart__s5 { fill: var(--chart-5); }
.lz-chart__s6 { fill: var(--chart-6); }
.lz-chart__s7 { fill: var(--chart-7); }
.lz-chart__s8 { fill: var(--chart-8); stroke: var(--accent-deep); stroke-width: 1; }
.lz-chart__s0 { fill: var(--line); stroke: var(--ink-3); stroke-width: 1; }
.lz-chart__base { stroke: var(--line); stroke-width: 1; }
.lz-chart__seg:hover { opacity: .85; }
ul.lz-legend { list-style: none; margin: 0; padding: 0; }
.lz-legend li { display: inline-flex; align-items: center; }
.lz-legend__s3 { background: var(--chart-3); }
.lz-legend__s4 { background: var(--chart-4); }
.lz-legend__s5 { background: var(--chart-5); }
.lz-legend__s6 { background: var(--chart-6); }
.lz-legend__s7 { background: var(--chart-7); }
/* Rule 12: the credit-card dot carries a 1px --accent-deep ring. */
.lz-legend__s8 { background: var(--chart-8); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.lz-legend__s0 { background: var(--line); box-shadow: inset 0 0 0 1px var(--ink-3); }
.lz-chart-empty { padding: 18px 0; font-size: 12.5px; color: var(--ink-3); }

/* §9.2 — the quick-links header: 32px tinted icon box, title, muted line. No glow. */
.lz-quicklinks__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgb(var(--lz-primary-rgb) / 0.18);
  color: var(--accent);
}
.lz-quicklinks__titles { display: flex; flex-direction: column; min-width: 0; }
.lz-quicklinks__title { font-size: 14px; font-weight: var(--lz-weight-bold); color: var(--lz-ui-on-dark); }
.lz-quicklinks__sub { font-size: 10px; font-weight: var(--lz-weight-medium); color: var(--lz-ui-on-dark-quote); }
.lz-quicklinks .lz-tile--orange .lz-tile__name { color: var(--lz-hue-accent-ink); }
.lz-tile--blue { background: var(--lz-hue-blue-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-blue-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--blue .lz-tile__icon { background: var(--lz-hue-blue); color: var(--card); box-shadow: none; }
.lz-tile--blue .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-blue) 55%, var(--primary-900)); }
.lz-tile--amber { background: var(--lz-hue-amber-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-amber-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--amber .lz-tile__icon { background: var(--lz-hue-amber); color: var(--card); box-shadow: none; }
.lz-tile--amber .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-amber) 55%, var(--primary-900)); }
.lz-tile--teal { background: var(--lz-hue-teal-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-teal-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--teal .lz-tile__icon { background: var(--lz-hue-teal); color: var(--card); box-shadow: none; }
.lz-tile--teal .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-teal) 55%, var(--primary-900)); }
.lz-tile--violet { background: var(--lz-hue-violet-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-violet-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--violet .lz-tile__icon { background: var(--lz-hue-violet); color: var(--card); box-shadow: none; }
.lz-tile--violet .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-violet) 55%, var(--primary-900)); }
.lz-tile--sky { background: var(--lz-hue-sky-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-sky-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--sky .lz-tile__icon { background: var(--lz-hue-sky); color: var(--card); box-shadow: none; }
.lz-tile--sky .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-sky) 55%, var(--primary-900)); }
.lz-tile--green { background: var(--lz-hue-green-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-green-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--green .lz-tile__icon { background: var(--lz-hue-green); color: var(--card); box-shadow: none; }
.lz-tile--green .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-green) 55%, var(--primary-900)); }
.lz-tile--pink { background: var(--lz-hue-pink-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-pink-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--pink .lz-tile__icon { background: var(--lz-hue-pink); color: var(--card); box-shadow: none; }
.lz-tile--pink .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-pink) 55%, var(--primary-900)); }
.lz-tile--ochre { background: var(--lz-hue-orange-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-orange-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--ochre .lz-tile__icon { background: var(--lz-hue-orange); color: var(--card); box-shadow: none; }
.lz-tile--ochre .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-orange) 55%, var(--primary-900)); }
.lz-tile--forest { background: var(--lz-hue-forest-bg); box-shadow: 5px 5px 12px rgb(var(--lz-hue-forest-rgb) / 0.18), var(--lz-ui-tile-highlight); }
.lz-tile--forest .lz-tile__icon { background: var(--lz-hue-forest); color: var(--card); box-shadow: none; }
.lz-tile--forest .lz-tile__name { color: color-mix(in srgb, var(--lz-hue-forest) 55%, var(--primary-900)); }

/* §9.3 — Updates & News: a 380px card, a ticker rendered twice, 35s, paused on hover. */
.lz-news {
  display: flex;
  flex-direction: column;
  height: 380px;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--neu-out);
}
.lz-news__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px 14px;
  border-bottom: var(--lz-ui-news-divider);
}
.lz-news__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--lz-ui-dark-fill);
  color: var(--accent);
}
.lz-news__heading { font-size: 14px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-news__viewport { position: relative; flex: 1; min-height: 0; overflow-y: auto; }
.lz-news__viewport--moving { overflow: hidden; }
.lz-news__viewport--moving .lz-news__track { animation: lz-ticker-down 35s linear infinite; }
.lz-news__viewport--moving:hover .lz-news__track,
.lz-news__viewport--moving:focus-within .lz-news__track { animation-play-state: paused; }
@keyframes lz-ticker-down { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
.lz-news__list { list-style: none; margin: 0; padding: 4px 20px; }
.lz-news__item { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
.lz-news__item:last-child { border-bottom: 0; }
.lz-news__tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lz-news__tag--new-lender { background: var(--accent); color: var(--primary-900); }
.lz-news__tag--rbi-update { background: var(--primary-900); color: var(--accent); }
.lz-news__tag--rate-change { background: var(--lz-news-rate-bg); color: var(--lz-news-rate-ink); }
.lz-news__tag--policy { background: var(--lz-news-policy-bg); color: var(--lz-news-policy-ink); }
.lz-news__tag--offer { background: var(--lz-news-offer-bg); color: var(--lz-news-offer-ink); }
.lz-news__tag--credit-tip { background: var(--lz-news-tip-bg); color: var(--lz-news-tip-ink); }
.lz-news__tag--new-feature { background: var(--lz-news-feature-bg); color: var(--lz-news-feature-ink); }
.lz-news__tag--alert { background: var(--lz-news-alert-bg); color: var(--lz-news-alert-ink); }
.lz-news__title { display: block; margin-top: 6px; font-size: 13.5px; font-weight: var(--lz-weight-bold); color: var(--ink); text-decoration: none; }
a.lz-news__title:hover { color: var(--accent-deep); }
a.lz-news__title:focus-visible { outline: none; border-radius: var(--r-xs); box-shadow: var(--lz-ui-focus-ring); }
.lz-news__text { display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; color: var(--ink-3); }
.lz-news__empty { padding: 18px 22px; font-size: 12.5px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .lz-news__viewport--moving { overflow-y: auto; }
  .lz-news__viewport--moving .lz-news__track { animation: none; }
  .lz-news__copy { display: none; }
  .lz-dash-panel { animation: none; }
}


/* §12.4 — donut: 170px (hero 200px), stroke 16 on a --line-2 track. */
.lz-donut { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--lz-space-4); min-width: 0; }
.lz-donut__ring { position: relative; width: 170px; height: 170px; flex: 0 0 auto; }
.lz-donut--hero .lz-donut__ring { width: 200px; height: 200px; }
.lz-donut__ring svg { display: block; width: 100%; height: 100%; }
.lz-donut__track { fill: none; stroke: var(--line-2); stroke-width: 16; }
.lz-donut__seg { fill: none; stroke-width: 16; }
.lz-donut__seg--accent { stroke: var(--accent); }
.lz-donut__seg--dark { stroke: var(--primary-900); }
.lz-donut__seg--ok { stroke: var(--ok); }
.lz-donut__seg--warn { stroke: var(--warn); }
.lz-donut__seg--danger { stroke: var(--danger); }
.lz-donut__seg--info { stroke: var(--info); }
.lz-donut__seg--muted { stroke: var(--ink-4); }
.lz-donut__seg--chart-1 { stroke: var(--chart-1); }
.lz-donut__seg--chart-2 { stroke: var(--chart-2); }
.lz-donut__seg--chart-3 { stroke: var(--chart-3); }
.lz-donut__seg--chart-4 { stroke: var(--chart-4); }
.lz-donut__seg--chart-5 { stroke: var(--chart-5); }
.lz-donut__seg--chart-6 { stroke: var(--chart-6); }
.lz-donut__seg--chart-7 { stroke: var(--chart-7); }
.lz-donut__seg--chart-8 { stroke: var(--chart-8); }
.lz-donut__centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.lz-donut__value { font-size: 26px; font-weight: var(--lz-weight-bold); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: var(--lz-font-numeric); }
.lz-donut__label { margin-top: 2px; font-size: 10.5px; font-weight: var(--lz-weight-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lz-donut__legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.lz-donut__item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-2); }
.lz-donut__swatch { width: 10px; height: 10px; border-radius: var(--lz-ui-swatch-radius); }
.lz-donut__swatch--accent { background: var(--accent); }
.lz-donut__swatch--dark { background: var(--primary-900); }
.lz-donut__swatch--ok { background: var(--ok); }
.lz-donut__swatch--warn { background: var(--warn); }
.lz-donut__swatch--danger { background: var(--danger); }
.lz-donut__swatch--info { background: var(--info); }
.lz-donut__swatch--muted { background: var(--ink-4); }
.lz-donut__swatch--chart-1 { background: var(--chart-1); }
.lz-donut__swatch--chart-2 { background: var(--chart-2); }
.lz-donut__swatch--chart-3 { background: var(--chart-3); }
.lz-donut__swatch--chart-4 { background: var(--chart-4); }
.lz-donut__swatch--chart-5 { background: var(--chart-5); }
.lz-donut__swatch--chart-6 { background: var(--chart-6); }
.lz-donut__swatch--chart-7 { background: var(--chart-7); }
.lz-donut__swatch--chart-8 { background: var(--chart-8); box-shadow: inset 0 0 0 1px var(--accent-deep); }
.lz-donut__name { min-width: 0; overflow-wrap: anywhere; }
.lz-donut__figure { font-weight: var(--lz-weight-semibold); color: var(--ink); font-variant-numeric: var(--lz-font-numeric); text-align: right; }
.lz-donut__share { min-width: 36px; text-align: right; color: var(--ink-3); font-variant-numeric: var(--lz-font-numeric); }

/* §12.4 — ageing bars: label | 14px bar | count. */
.lz-ageing { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lz-ageing__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 12px; }
.lz-ageing__label { color: var(--ink-2); }
.lz-ageing__bar { display: block; height: 14px; overflow: hidden; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: var(--neu-in-sm); }
.lz-ageing__bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--lz-ui-bar-fill); }
.lz-ageing__count { text-align: right; font-weight: var(--lz-weight-bold); color: var(--ink); font-variant-numeric: var(--lz-font-numeric); }

/* §12.4 — funnel: rows 110px 1fr 90px, bar 34px, radius 8, black bar fill. */
.lz-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lz-funnel__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px; gap: 12px; align-items: center; }
.lz-funnel__label { font-size: 12.5px; font-weight: var(--lz-weight-semibold); color: var(--ink-2); }
.lz-funnel__track { display: block; height: 34px; border-radius: var(--lz-ui-funnel-radius); background: var(--bg-2); box-shadow: var(--neu-in-sm); overflow: hidden; }
.lz-funnel__track > i { display: block; height: 100%; border-radius: var(--lz-ui-funnel-radius); background: var(--lz-ui-bar-fill); }
.lz-funnel__figure { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: var(--lz-font-numeric); }
.lz-funnel__figure strong { font-size: 14.5px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-funnel__figure span { font-size: 10.5px; color: var(--ink-3); }

/* §12.4 — heatmap: 7 columns, gap 5, cells 28px with radius 4, a neutral ramp. */
.lz-heatmap { display: flex; flex-direction: column; gap: 8px; }
.lz-heatmap__rows { display: flex; flex-direction: column; gap: 14px; }
.lz-heatmap__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; }
.lz-heatmap__name { padding-top: 6px; font-size: 12px; font-weight: var(--lz-weight-semibold); color: var(--ink-2); }
.lz-heatmap__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.lz-heatmap__day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lz-heatmap__cell { display: block; width: 100%; height: 28px; border-radius: var(--lz-ui-heat-radius); }
.lz-heatmap__cell--l0 { background: var(--bg-2); }
.lz-heatmap__cell--l1 { background: var(--chart-7); }
.lz-heatmap__cell--l2 { background: var(--chart-3); }
.lz-heatmap__cell--l3 { background: var(--primary-700); }
.lz-heatmap__cell--l4 { background: var(--primary-900); }
.lz-heatmap__cell--none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lz-heatmap__day-label { font-size: 10px; font-weight: var(--lz-weight-medium); color: var(--ink-3); }
.lz-heatmap__figure { font-size: 11px; font-weight: var(--lz-weight-semibold); color: var(--ink); font-variant-numeric: var(--lz-font-numeric); }
.lz-heatmap__key { margin: 0; display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); }

/* §12.4 — day timeline: rows 80px 1fr 90px, dashed dividers. */
.lz-timeline { list-style: none; margin: 0; padding: 0; }
.lz-timeline__row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px dashed var(--line); }
.lz-timeline__row:first-child { border-top: none; }
.lz-timeline__time { font-size: 12.5px; font-weight: var(--lz-weight-bold); color: var(--ink); font-variant-numeric: var(--lz-font-numeric); }
.lz-timeline__what { display: flex; flex-direction: column; min-width: 0; }
.lz-timeline__title { font-size: 12.5px; font-weight: var(--lz-weight-bold); color: var(--ink); overflow-wrap: anywhere; }
a.lz-timeline__title { text-decoration: none; }
a.lz-timeline__title:hover { color: var(--accent-deep); text-decoration: underline; }
.lz-timeline__note { font-size: 11px; color: var(--ink-3); }
.lz-timeline__kind { display: flex; justify-content: flex-end; }

/* §12.4 .ini in the loan product's series colour (rule 12); text on orange is black (rule 2). */
.lz-ini--s1 { background: var(--chart-1); color: var(--card); }
.lz-ini--s2 { background: var(--chart-2); color: var(--primary-900); }
.lz-ini--s3 { background: var(--chart-3); color: var(--card); }
.lz-ini--s4 { background: var(--chart-4); color: var(--primary-900); }
.lz-ini--s5 { background: var(--chart-5); color: var(--card); }
.lz-ini--s6 { background: var(--chart-6); color: var(--card); }
.lz-ini--s7 { background: var(--chart-7); color: var(--primary-900); }
.lz-ini--s8 { background: var(--chart-8); color: var(--primary-900); }
.lz-ini--s0 { background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }

/* StageTracker: a reached step's date, and the state-free outline (website, owner W3). */
.lz-journey__date { display: block; margin-top: 2px; font-size: 10.5px; font-weight: var(--lz-weight-medium); color: var(--ink-3); font-variant-numeric: var(--lz-font-numeric); }
.lz-journey--outline .lz-journey__step { color: var(--ink); font-weight: var(--lz-weight-semibold); }

/* SignInForm presentation props: the forgot link beside the Password label, and a note under the button. */
.lz-auth__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lz-space-2); }
.lz-auth__note { margin: 0; font-size: 12px; color: var(--ink-3); }

/* EmiCalculator: one action inside the black result well. */
.lz-emi__action { margin-top: 14px; }

/* Profile rows: an ID in the mono face (rule 9). */
.lz-profile__value--mono { font-family: var(--lz-font-mono); font-weight: var(--lz-weight-semibold); letter-spacing: .02em; }

@media (max-width: 480px) {
  .lz-funnel__row { grid-template-columns: 84px minmax(0, 1fr) 64px; gap: 8px; }
  .lz-heatmap__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lz-timeline__row { grid-template-columns: 64px minmax(0, 1fr); padding: 12px 14px; }
  .lz-timeline__kind { grid-column: 2; justify-content: flex-start; }
  /* A row with several actions: on a phone the buttons go under the text (CRO desk, 1901). */
  .lz-row-item--actions { grid-template-columns: auto minmax(0, 1fr); }
  .lz-row-item--actions .lz-row-item__aside { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}


.lz-journey {
  list-style: none;
  margin: 0 0 var(--lz-space-4);
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.lz-journey__step {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  text-align: center;
  font-size: var(--lz-text-meta-size);
  font-weight: var(--lz-weight-medium);
  line-height: 1.35;
  overflow-wrap: anywhere;
  color: var(--ink-3);
}
.lz-journey__step--done, .lz-journey__step--now, .lz-journey__step--rejected { color: var(--ink); }
.lz-journey__step--now, .lz-journey__step--rejected { font-weight: var(--lz-weight-bold); }

.lz-journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(16px - 1.5px);
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line);
}
.lz-journey__step--done:not(:last-child)::after { background: var(--primary-900); }

/* Upcoming: an inset well on the page ground. */
.lz-journey__mark {
  position: relative;
  z-index: 1;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
/* Done: a black circle with an orange tick, drawn as two borders of a turned box. */
.lz-journey__step--done .lz-journey__mark { background: var(--primary-900); box-shadow: none; }
.lz-journey__step--done .lz-journey__mark::after {
  content: "";
  width: 8px;
  height: 14px;
  margin-top: -3px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
}
/* Current: SOLID accent and a soft accent halo. Not a ring, not a glow. */
.lz-journey__step--now .lz-journey__mark {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgb(var(--lz-primary-rgb) / 0.2);
}
/* Rejected: the current dot turns red, and nothing after it is drawn. */
.lz-journey__step--rejected .lz-journey__mark { background: var(--danger); box-shadow: none; }
.lz-journey__step--rejected ~ .lz-journey__step { display: none; }
.lz-journey__step--rejected:not(:last-child)::after { display: none; }

/* "In progress" — orange text on a light card is --accent-deep (rule 3). */
.lz-journey__note {
  display: block;
  margin-top: -5px;
  font-size: 10.5px;
  font-weight: var(--lz-weight-semibold);
  color: var(--accent-deep);
}
.lz-journey__step--rejected .lz-journey__note { color: var(--danger); }

/* §15 — below 480px everything is one column: the tracker reads top to bottom. */
@media (max-width: 479.98px) {
  .lz-journey { grid-auto-flow: row; grid-auto-columns: auto; }
  .lz-journey__step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    justify-items: start;
    padding: 0 0 var(--lz-space-4);
    text-align: left;
  }
  .lz-journey__step:last-child { padding-bottom: 0; }
  .lz-journey__mark { grid-row: 1 / span 2; align-self: start; }
  .lz-journey__note { grid-column: 2; margin-top: 0; }
  .lz-journey__step:not(:last-child)::after {
    top: 32px;
    bottom: 0;
    left: calc(16px - 1.5px);
    width: 3px;
    height: auto;
  }
}


.lz-offer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--card);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--neu-out-md);
}
.lz-offer--best { border-color: var(--accent); }
.lz-offer__head {
  display: flex;
  align-items: center;
  gap: var(--lz-space-3);
  padding: 20px 20px 0;
}
.lz-offer__avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: calc(var(--r-md) + 2px);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 15px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .02em;
}
.lz-offer__who { min-width: 0; flex: 1 1 auto; }
.lz-offer__name {
  margin: 0;
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-weight-bold);
  color: var(--ink);
}
.lz-offer__product {
  margin: 2px 0 0;
  font-size: var(--lz-text-card-footer-size);
  font-weight: var(--lz-weight-medium);
  color: var(--ink-3);
}
/* The "Best rate" tag: solid accent, black text, radius 6. */
.lz-offer__tag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--primary-900);
  font-size: 10px;
  font-weight: var(--lz-weight-extrabold);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The stat well: 2 x 2, an inset well on the page ground. */
.lz-offer__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--lz-space-3);
  margin: 16px 20px 20px;
  padding: 12px var(--lz-space-3);
  border-radius: var(--r-sm);
  background: var(--bg);
  box-shadow: var(--neu-in-sm);
}
.lz-offer__stat { min-width: 0; }
.lz-offer__stat dt {
  font-size: 9.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lz-offer__stat dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: var(--lz-weight-extrabold);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* The action bar: --card-2 under a --line-2 rule, the quote left, the button right. */
.lz-offer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--lz-space-2);
  margin-top: auto;
  padding: var(--lz-space-3) 20px;
  border-top: 1px solid var(--line-2);
  background: var(--card-2);
}
.lz-offer__eta {
  margin-right: auto;
  font-size: 12px;
  font-weight: var(--lz-weight-semibold);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink-2);
}


.lz-emi {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--lz-block-gap);
  align-items: start;
}
.lz-emi__controls { display: flex; flex-direction: column; gap: var(--lz-block-gap); min-width: 0; }
.lz-emi__field { display: flex; flex-direction: column; gap: var(--lz-space-2); }
.lz-emi__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lz-space-2); }
.lz-emi__label {
  font-size: var(--lz-text-field-label-size);
  font-weight: var(--lz-text-field-label-weight);
  color: var(--ink-2);
}
.lz-emi__value {
  font-size: 15px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
  white-space: nowrap;
}

.lz-emi__track {
  position: relative;
  height: 8px;
  margin: 6px 0;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  box-shadow: var(--neu-in-sm);
}
.lz-emi__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.lz-emi__input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--lz-ui-touch-min);
  margin: 0;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.lz-emi__input::-webkit-slider-runnable-track { height: 8px; background: transparent; border: 0; }
.lz-emi__input::-moz-range-track { height: 8px; background: transparent; border: 0; }
.lz-emi__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 3px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--neu-out-xs);
}
.lz-emi__input::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 3px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--neu-out-xs);
}
/* §16 — the ring goes on the thumb, where the eye already is. */
.lz-emi__input:focus-visible { outline: none; }
.lz-emi__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--lz-ui-focus-ring); }
.lz-emi__input:focus-visible::-moz-range-thumb { box-shadow: var(--lz-ui-focus-ring); }

.lz-emi__outcome { display: flex; flex-direction: column; gap: var(--lz-space-4); min-width: 0; }
/* The result well: black, an orange kicker (accent on black is 6.8:1), white figure. */
.lz-emi__result {
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--primary-900);
  color: var(--card);
}
.lz-emi__result-label {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.lz-emi__result-value {
  margin: 0;
  font-size: 30px;
  font-weight: var(--lz-weight-extrabold);
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: var(--lz-font-numeric);
}
.lz-emi__per {
  margin-left: 2px;
  font-size: 14px;
  font-weight: var(--lz-weight-medium);
  letter-spacing: 0;
  color: var(--lz-ui-on-dark-muted);
}
.lz-emi__result-empty { margin: 0; font-size: 13px; color: var(--lz-ui-on-dark-muted); }

/* §12.4 — the donut: 170px, stroke 16, --line-2 track, principal chart-1, interest chart-2. */
.lz-emi__chart {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lz-space-4);
}
.lz-emi__donut { position: relative; flex: 0 0 170px; width: 170px; height: 170px; }
.lz-emi__donut svg { display: block; width: 100%; height: 100%; }
.lz-emi__arc { fill: none; stroke-width: 16; }
.lz-emi__arc--track { stroke: var(--line-2); }
.lz-emi__arc--principal { stroke: var(--chart-1); }
.lz-emi__arc--interest { stroke: var(--chart-2); }
.lz-emi__centre {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.lz-emi__centre-value {
  font-size: 26px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
}
.lz-emi__centre-label {
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* §12.4 — the legend: 10px swatches, radius 3 (half of r-xs), 11.5px labels. */
.lz-emi__legend { margin: 0; display: flex; flex-direction: column; gap: var(--lz-space-2); min-width: 0; }
.lz-emi__legend-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--lz-space-3); }
.lz-emi__legend dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: var(--lz-weight-medium);
  color: var(--ink-2);
}
.lz-emi__legend dd {
  margin: 0;
  font-size: 13px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
}
.lz-emi__swatch { flex: 0 0 10px; width: 10px; height: 10px; border-radius: calc(var(--r-xs) / 2); }
.lz-emi__swatch--principal { background: var(--chart-1); }
.lz-emi__swatch--interest { background: var(--chart-2); }

@media (max-width: 767.98px) {
  .lz-emi { grid-template-columns: minmax(0, 1fr); }
}


.lz-gauge {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lz-space-3);
}
.lz-gauge__dial { position: relative; width: 200px; max-width: 100%; }
.lz-gauge__svg { display: block; width: 100%; height: auto; }
.lz-gauge__track, .lz-gauge__value { fill: none; stroke-width: 16; }
.lz-gauge__track { stroke: var(--line-2); }
.lz-gauge__value { stroke: var(--accent); }
.lz-gauge__reading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.lz-gauge__score {
  font-size: 32px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: -.02em;
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink);
}
.lz-gauge__of { margin-top: 4px; font-size: 10px; font-weight: var(--lz-weight-medium); color: var(--ink-3); }
.lz-gauge__caption { display: flex; flex-direction: column; align-items: center; gap: var(--lz-space-2); }
/* The four-step text legend. The band's colour rides on a dot; the words carry the meaning. */
.lz-gauge__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px var(--lz-space-3);
}
.lz-gauge__band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: var(--lz-weight-medium);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink-2);
}
.lz-gauge__band::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.lz-gauge__band--now { font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-gauge__band--success::before { background: var(--ok); }
.lz-gauge__band--info::before { background: var(--info); }
.lz-gauge__band--warning::before { background: var(--warn); }
.lz-gauge__band--critical::before { background: var(--danger); }


.lz-doclist { list-style: none; margin: 0; padding: 0; }
.lz-doclist__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: var(--lz-space-3);
  align-items: center;
  padding: var(--lz-space-3) 20px;
  border-top: 1px solid var(--line-2);
}
.lz-doclist__row:first-child { border-top: 0; }
.lz-doclist__row--missing { background: var(--card-2); }
.lz-doclist__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: calc(var(--r-md) - 1px);
  box-shadow: var(--neu-out-xs);
}
.lz-doclist__icon--verified { background: var(--ok-bg); color: var(--ok); }
.lz-doclist__icon--review { background: var(--info-bg); color: var(--info); }
.lz-doclist__icon--missing { background: var(--warn-bg); color: var(--warn); }
.lz-doclist__text { min-width: 0; }
.lz-doclist__name {
  margin: 0;
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  color: var(--ink);
}
.lz-doclist__note { margin: 2px 0 0; font-size: var(--lz-text-card-footer-size); color: var(--ink-2); }
.lz-doclist__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--lz-space-2);
}

@media (max-width: 479.98px) {
  .lz-doclist__row { grid-template-columns: 38px minmax(0, 1fr); padding: var(--lz-space-3) 16px; }
  .lz-doclist__end { grid-column: 2; justify-content: flex-start; }
}


.lz-ledger { list-style: none; margin: 0; padding: 0; }
.lz-ledger-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: var(--lz-space-3);
  align-items: center;
  padding: var(--lz-space-3) var(--lz-space-5);
  border-bottom: 1px solid var(--line-2);
  transition: background-color .2s ease;
}
.lz-ledger-row:hover { background: var(--card-2); }
.lz-ledger-row__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  box-shadow: var(--neu-out-xs);
}
.lz-ledger-row--received .lz-ledger-row__icon { background: var(--ok-bg); color: var(--ok); }
.lz-ledger-row--charge .lz-ledger-row__icon { background: var(--danger-bg); color: var(--danger); }
.lz-ledger-row--upcoming .lz-ledger-row__icon { background: var(--bg); color: var(--ink-3); box-shadow: var(--neu-in-sm); }
.lz-ledger-row__text { min-width: 0; }
.lz-ledger-row__title {
  margin: 0;
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  color: var(--ink);
}
.lz-ledger-row__meta {
  margin: 2px 0 0;
  font-size: var(--lz-text-micro-size);
  font-weight: var(--lz-weight-medium);
  font-variant-numeric: var(--lz-font-numeric);
  color: var(--ink-3);
}
.lz-ledger-row__amount {
  margin: 0;
  font-size: 14.5px;
  font-weight: var(--lz-weight-bold);
  font-variant-numeric: var(--lz-font-numeric);
  text-align: right;
  white-space: nowrap;
  color: var(--ink);
}
.lz-ledger-row--received .lz-ledger-row__amount { color: var(--ok); }
.lz-ledger-row--charge .lz-ledger-row__amount { color: var(--danger); }

@media (max-width: 479.98px) {
  .lz-ledger-row { grid-template-columns: 42px minmax(0, 1fr) auto; padding: var(--lz-space-3) 16px; }
  .lz-ledger-row > .lz-status { grid-column: 2 / -1; justify-self: start; }
}


/* The ground. Cream, full height, and the footer sits at the bottom of a short
   page rather than halfway up it. */
.lz-site {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* One measure for the whole site, so the bar, the content and the footer all
   line up on the same left and right edges. */
.lz-site__inner {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--lz-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lz-block-gap);
}

/* Flex-grow so the footer is pushed down; min-width 0 so a wide table inside a
   panel scrolls in its own box instead of widening the page (§9). */
.lz-site__body { flex: 1 1 auto; min-width: 0; }

/* The bar. The portals put the wordmark in the sidebar; there is no sidebar
   here, so this is the one place on the public site that uses the display
   face — the same exception the sign-in page takes, for the same reason. */
.lz-site__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lz-space-4);
  padding-bottom: var(--lz-space-4);
  border-bottom: 1px solid var(--line);
}

.lz-site__wordmark {
  font-family: var(--lz-font-display);
  font-size: var(--lz-text-hero-title-size);
  font-weight: var(--lz-weight-bold);
  color: var(--primary-900);
  letter-spacing: -.01em;
  line-height: 1;
}
.lz-site__wordmark span { color: var(--accent); }

.lz-site__tagline {
  display: block;
  font-family: var(--lz-font-sans);
  font-size: var(--lz-text-meta-size);
  font-weight: var(--lz-weight-semibold);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  color: var(--ink-3);
}

.lz-site__doors { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lz-space-2); }

/* auto-fit rather than a fixed column count: the public site has no fixed
   number of anything, and a hard grid would leave a hole when there are two. */
.lz-site__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--lz-block-gap);
}

.lz-site__note {
  font-size: var(--lz-text-meta-size);
  color: var(--ink-2);
}

/* The body of a page an editor published. The body column is plain text
   from a textarea and is rendered as escaped paragraphs - there is no markdown
   renderer and no sanitiser in this repository, so the column never goes near
   dangerouslySetInnerHTML. This is the measure that makes it readable: a line
   length, and space between paragraphs. */
.lz-site__prose {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-4);
  /* 65-ish characters. Longer and the eye loses the start of the next line. */
  max-width: 68ch;
  font-size: var(--lz-text-body-size);
  /* A LITERAL, because the type scale carries size and weight and has no
     leading token. Inventing a leading token here would define it
     nowhere, and CSS discards a declaration referencing an undefined
     variable in silence - which is what the gate caught. Prose wants more
     air than a dense portal table does. */
  line-height: 1.7;
  color: var(--ink);
}
.lz-site__prose p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The index of published pages on the front page. A list rather than cards,
   because it is a table of contents and its length is not known - an editor may
   publish three pages or thirty. */
.lz-site__links {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lz-site__links li {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-1);
}

/* Definition list for the statutory disclosures. Inset, because a well is the
   surface that CONTAINS rather than gives (§3), and these are a record being
   quoted rather than a claim being made. */
.lz-site__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lz-space-4);
  margin: 0;
}
.lz-site__fact {
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-1);
  padding: var(--lz-space-4);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  box-shadow: var(--neu-in);
}
.lz-site__fact dt {
  font-size: var(--lz-text-stat-label-size);
  font-weight: var(--lz-weight-bold);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  color: var(--ink-3);
}
.lz-site__fact dd {
  margin: 0;
  font-size: var(--lz-text-body-size);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The footer. Visually the portals' footer and made of the same children; only
   the outer element is different, because .lz-footer is placed by grid-area and
   this page has no shell grid. */
/* HOW IT WORKS — four numbered beats. Its own grid rather than .lz-site__grid,
   which is three-up: four steps wrapping to 3+1 reads as a mistake. */
.lz-site__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lz-block-gap);
}

.lz-site__step { display: flex; flex-direction: column; gap: var(--lz-space-2); }

.lz-site__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--lz-ui-tile-icon);
  height: var(--lz-ui-tile-icon);
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: var(--lz-text-body-size);
  font-weight: var(--lz-weight-bold);
}

.lz-site__step h3 {
  margin: 0;
  font-size: var(--lz-text-panel-title-size);
  font-weight: var(--lz-weight-bold);
  color: var(--ink);
}

.lz-site__step p { margin: 0; font-size: var(--lz-text-body-size); line-height: 1.6; color: var(--ink-2); }

/* A list of plain assurances. The marker is a bullet the browser cannot restyle
   badly, and the text stays readable at ink-muted rather than ink-faint. */
.lz-site__ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--lz-space-2); }

.lz-site__ticks li {
  display: flex;
  gap: var(--lz-space-2);
  font-size: var(--lz-text-body-size);
  line-height: 1.55;
  color: var(--ink-2);
}

.lz-site__ticks li::before { content: '\2022'; color: var(--accent); font-weight: var(--lz-weight-bold); }

@media (max-width: 1100px) {
  .lz-site__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .lz-site__steps { grid-template-columns: minmax(0, 1fr); }
}

.lz-site__foot {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-6);
  padding: var(--lz-space-6);
  background: var(--primary-900);
  color: var(--lz-ui-on-dark-quote);
}

/* No orange bloom on black (standard v1.0 §0.1 rule 1). The foot is plain
   --primary-900, which is what §10 specifies for the public footer. */

.lz-site__foot > * { position: relative; }

.lz-site__foot-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--lz-space-6);
}

.lz-site__foot-brand { display: flex; flex-direction: column; gap: var(--lz-space-4); }

.lz-site__foot-mark {
  font-family: var(--lz-font-display);
  font-size: var(--lz-text-hero-title-size);
  font-weight: var(--lz-weight-bold);
  color: var(--lz-ui-on-dark);
  line-height: 1;
}

.lz-site__foot-mark span { color: var(--accent); }

.lz-site__foot-blurb {
  margin: 0;
  font-size: var(--lz-text-body-size);
  line-height: 1.62;
  color: var(--lz-ui-on-dark-muted);
  max-width: 34ch;
}

.lz-site__foot-contact { display: flex; flex-direction: column; gap: var(--lz-space-2); }

.lz-site__foot-contact span {
  font-size: var(--lz-text-body-size);
  font-weight: var(--lz-weight-semibold);
  color: var(--accent);
}

.lz-site__foot-col { display: flex; flex-direction: column; }

.lz-site__foot-head {
  font-size: var(--lz-text-stat-label-size);
  font-weight: var(--lz-weight-bold);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  color: var(--lz-ui-nav-label-ink);
  padding-bottom: var(--lz-space-2);
}

/* A footer link is still a hit target, so it carries the same minimum as every
   other control rather than the tight leading a footer usually gets away with. */
.lz-site__foot-link {
  display: flex;
  align-items: center;
  min-height: var(--lz-ui-touch-min);
  font-size: var(--lz-text-body-size);
  font-weight: var(--lz-weight-semibold);
  color: var(--lz-ui-on-dark-muted);
  text-decoration: none;
}

.lz-site__foot-link:hover { color: var(--lz-ui-on-dark); }

.lz-site__rule { height: 1px; background: var(--line); opacity: .16; }

.lz-site__disclosures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lz-space-2);
  margin: 0;
}

/* Each disclosure is a RECORD, not a sentence: the label and the value are a
   dt/dd pair, so a screen reader reads "CIN — not published yet" as one fact. */
.lz-site__record {
  display: flex;
  align-items: baseline;
  gap: var(--lz-space-3);
  padding: var(--lz-space-2) var(--lz-space-3);
  border-radius: var(--r-md);
  background: var(--lz-ui-nav-hover-fill);
}

.lz-site__record dt {
  flex: 0 0 15ch;
  font-size: var(--lz-text-stat-label-size);
  font-weight: var(--lz-weight-bold);
  letter-spacing: var(--lz-text-stat-label-tracking);
  text-transform: var(--lz-text-stat-label-transform);
  color: var(--lz-ui-on-dark-faint);
}

.lz-site__record dd {
  margin: 0;
  font-size: var(--lz-text-body-size);
  line-height: 1.5;
  color: var(--lz-ui-on-dark);
}

/* NOT YET RECORDED reads as the accent, never as a value. Somebody scanning the
   footer has to be able to see at a glance what the register is still missing. */
.lz-site__record--absent dd { color: var(--accent); }

.lz-site__foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lz-space-4);
}

.lz-site__foot-bottom p {
  margin: 0;
  font-size: var(--lz-text-meta-size);
  color: var(--lz-ui-on-dark-faint);
}

.lz-site__foot-bottom b { font-weight: inherit; color: var(--accent); }

@media (max-width: 1100px) {
  .lz-site__foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .lz-site__inner { padding: var(--lz-space-4); }
  .lz-site__bar { align-items: flex-start; flex-direction: column; }
  .lz-site__foot-top { grid-template-columns: minmax(0, 1fr); }
  .lz-site__disclosures { grid-template-columns: minmax(0, 1fr); }
  .lz-site__record { flex-direction: column; align-items: flex-start; gap: var(--lz-space-1); }
  .lz-site__record dt { flex: 0 0 auto; }
}

/* THE COOKIE CHOICE (owner Q11, 0771): the toast's card (13.12), kept on the
   LEFT because the chat button holds the bottom right, and it stays until the
   visitor answers - it does not hide itself. Shown only when Super Admin has
   chosen an analytics tool. */
.lz-site__cookies {
  position: fixed;
  left: var(--lz-space-6);
  bottom: var(--lz-space-6);
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: var(--lz-space-3);
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--lz-space-4) 16px;
  border-left: 4px solid var(--info);
  border-radius: calc(var(--r-md) + 2px);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--neu-out);
  font-size: 13px;
}
.lz-site__cookies-title { margin: 0; font-size: 14px; font-weight: 700; }
.lz-site__cookies-text { margin: 0; color: var(--ink-2); }
.lz-site__cookies-actions { display: flex; flex-wrap: wrap; gap: var(--lz-space-2); }

/* "Cookie choices" in the footer is a button styled as the footer's links. */
.lz-site__foot-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 640px) {
  .lz-site__cookies { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}


/* ---- The header: sticky, black, 72px ------------------------------------- */
.lz-pub-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--primary-900);
  border-bottom: 1px solid var(--lz-ui-on-dark-wash);
}
.lz-pub-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.lz-pub-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.lz-pub-wordmark {
  font-family: var(--lz-font-display);
  font-weight: var(--lz-weight-bold);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--lz-ui-on-dark);
  white-space: nowrap;
}
.lz-pub-wordmark__suffix { color: var(--accent); }
.lz-pub-brand__portal {
  padding-left: 12px;
  border-left: 1px solid rgb(var(--lz-surface-rgb) / 0.25);
  font-size: 10.5px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lz-ui-on-dark-muted);
  white-space: nowrap;
}

.lz-pub-nav { display: flex; align-items: center; gap: 22px; }
.lz-pub-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: var(--lz-weight-semibold);
  color: rgb(var(--lz-surface-rgb) / 0.78);
  text-decoration: none;
  cursor: pointer;
}
.lz-pub-nav__link:hover, .lz-pub-nav__link[aria-expanded="true"] { color: var(--accent); }

.lz-pub-header__actions { display: flex; align-items: center; gap: 10px; }
.lz-pub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1.5px solid rgb(var(--lz-surface-rgb) / 0.25);
  border-radius: var(--r-pill);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  color: var(--lz-ui-on-dark);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.lz-pub-btn:hover, .lz-pub-btn[aria-expanded="true"] { border-color: var(--accent); }
/* The one orange CTA. FLAT on black: no glow (rule 1). Black text on orange (rule 2). */
.lz-pub-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--primary-900);
  font-size: 13.5px;
  font-weight: var(--lz-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}
.lz-pub-cta:hover { background: var(--accent-2); color: var(--primary-900); }
.lz-pub-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgb(var(--lz-surface-rgb) / 0.2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--lz-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lz-ui-on-dark-muted);
  white-space: nowrap;
}
.lz-pub-btn:focus-visible, .lz-pub-cta:focus-visible, .lz-pub-nav__link:focus-visible, .lz-pub-brand:focus-visible, .lz-pub-burger:focus-visible {
  outline: none;
  box-shadow: var(--lz-ui-focus-ring);
}

/* ---- The two disclosures (Loans mega-menu, Sign in menu): z 50 ----------- */
.lz-pub-menu { position: relative; }
.lz-pub-menu__chevron { transition: transform .2s ease; }
.lz-pub-menu__button[aria-expanded="true"] .lz-pub-menu__chevron { transform: rotate(180deg); }
.lz-pub-menu__panel { position: absolute; z-index: 50; top: calc(100% + 14px); }
.lz-pub-menu__panel[hidden] { display: none; }
.lz-pub-menu__panel--menu {
  right: 0;
  min-width: 200px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.lz-pub-menu__list { list-style: none; margin: 0; padding: 0; }
.lz-pub-menu__list a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: var(--lz-weight-semibold);
  color: var(--ink);
  text-decoration: none;
}
.lz-pub-menu__list a:hover { background: var(--bg-2); color: var(--primary-900); }
.lz-pub-menu--mega { position: static; }
.lz-pub-menu__panel--mega { left: 0; right: 0; top: 72px; }

/* The mega-menu: a white card under a 3px flat orange rule. */
.lz-pub-mega {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  border-top: 3px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.lz-pub-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.lz-pub-mega__group { min-width: 0; }
.lz-pub-mega__title { margin: 0 0 8px; font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lz-pub-mega__links { list-style: none; margin: 0; padding: 0; }
.lz-pub-mega__links a { display: block; padding: 5px 0; font-size: 13px; font-weight: var(--lz-weight-medium); color: var(--ink); text-decoration: none; }
.lz-pub-mega__links a:hover { color: var(--accent-deep); }
.lz-pub-mega__aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: var(--lz-r-tile);
  background: var(--primary-900);
  color: var(--card);
  text-decoration: none;
}
.lz-pub-mega__kicker { font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lz-pub-mega__aside-title { font-size: 15px; font-weight: var(--lz-weight-semibold); line-height: 1.3; }
.lz-pub-mega__aside-text { font-size: 12px; color: rgb(var(--lz-surface-rgb) / 0.65); }
.lz-pub-mega__aside-link { margin-top: auto; font-size: 12.5px; font-weight: var(--lz-weight-bold); color: var(--accent); }
.lz-pub-mega__all { display: inline-block; margin-top: 18px; font-size: 12.5px; font-weight: var(--lz-weight-bold); color: var(--accent-deep); text-decoration: none; }
.lz-pub-mega__all:hover { color: var(--primary-900); }

/* ---- Below 1024px: the ☰ drawer, z 60/61 --------------------------------- */
.lz-pub-burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(var(--lz-surface-rgb) / 0.2);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--lz-ui-on-dark);
  cursor: pointer;
}
.lz-pub-drawer {
  position: fixed;
  z-index: 61;
  inset: 0 0 0 auto;
  width: min(360px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--primary-900);
  color: var(--card);
}
.lz-pub-drawer::backdrop { background: rgb(var(--lz-ink-black-rgb) / 0.42); }
.lz-pub-drawer[open] { display: block; }
.lz-pub-drawer__inner { display: flex; flex-direction: column; gap: 18px; min-height: 100%; padding: 18px 20px 28px; overflow-y: auto; }
.lz-pub-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.lz-pub-drawer__head .lz-pub-burger { display: inline-flex; }
.lz-pub-drawer__title { margin: 0; font-size: 11px; font-weight: var(--lz-weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lz-pub-drawer__nav, .lz-pub-drawer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lz-pub-drawer__nav a { display: block; padding: 10px 0; font-size: 14px; font-weight: var(--lz-weight-semibold); color: rgb(var(--lz-surface-rgb) / 0.85); text-decoration: none; }
.lz-pub-drawer__nav a:hover { color: var(--accent); }
.lz-pub-drawer__nav ul a { padding: 7px 0 7px 12px; font-size: 13px; font-weight: var(--lz-weight-medium); }
.lz-pub-drawer__group { margin: 10px 0 2px; font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--lz-ui-on-dark-faint); }
.lz-pub-drawer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.lz-pub-drawer__actions .lz-pub-btn, .lz-pub-drawer__actions .lz-pub-cta { justify-content: center; }

@media (max-width: 1023px) {
  .lz-pub-nav, .lz-pub-hide { display: none !important; }
  .lz-pub-burger { display: inline-flex; }
}
@media (max-width: 480px) {
  .lz-pub-header__inner { padding: 0 16px; gap: 12px; }
  .lz-pub-wordmark { font-size: 26px; }
  .lz-pub-brand__portal { display: none; }
}


/* ---- The footer (§10 marketing footer) ----------------------------------- */
.lz-pub-footer { background: var(--primary-900); color: var(--lz-ui-on-dark); }
.lz-pub-footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; }
.lz-pub-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px 24px; }
.lz-pub-footer__brand { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lz-pub-footer__home { text-decoration: none; align-self: flex-start; }
.lz-pub-footer__brand .lz-pub-wordmark { font-size: 38px; }
.lz-pub-footer__blurb { margin: 0; max-width: 320px; font-size: 13px; color: rgb(var(--lz-surface-rgb) / 0.6); }
.lz-pub-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--lz-ui-on-dark-muted); }
.lz-pub-footer__contact a { color: var(--lz-ui-on-dark-muted); text-decoration: none; }
.lz-pub-footer__contact a:hover { color: var(--lz-ui-on-dark); text-decoration: underline; }
.lz-pub-footer__social, .lz-pub-footer__apps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lz-pub-social {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--lz-surface-rgb) / 0.12);
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: var(--lz-weight-bold);
  color: var(--lz-ui-on-dark-muted);
  text-decoration: none;
}
.lz-pub-social:hover { border-color: var(--accent); color: var(--accent); }
.lz-pub-footer__apps a { display: inline-flex; padding: 7px 12px; border: 1px solid rgb(var(--lz-surface-rgb) / 0.12); border-radius: var(--r-sm); font-size: 12px; font-weight: var(--lz-weight-semibold); color: var(--lz-ui-on-dark-muted); text-decoration: none; }
.lz-pub-footer__apps a:hover { border-color: var(--accent); color: var(--lz-ui-on-dark); }
.lz-pub-footer__stack { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.lz-pub-footer__title { margin: 0 0 14px; font-size: 11px; font-weight: var(--lz-weight-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lz-pub-footer__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lz-pub-footer__group a, .lz-pub-footer__legal a { font-size: 13px; line-height: 1.4; color: rgb(var(--lz-surface-rgb) / 0.5); text-decoration: none; }
.lz-pub-footer__group a:hover, .lz-pub-footer__legal a:hover { color: var(--lz-ui-on-dark); }
.lz-pub-footer__group a:focus-visible, .lz-pub-footer__legal a:focus-visible, .lz-pub-footer__box a:focus-visible, .lz-pub-social:focus-visible { outline: none; box-shadow: var(--lz-ui-focus-ring); border-radius: var(--r-xs); }

.lz-pub-footer__boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 40px; }
.lz-pub-footer__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--lz-ui-on-dark-wash);
  border-radius: var(--r-lg);
  background: rgb(var(--lz-surface-rgb) / 0.04);
}
.lz-pub-footer__kicker { margin: 0; font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lz-pub-footer__box-title { margin: 0; font-size: 13px; font-weight: var(--lz-weight-semibold); color: var(--lz-ui-on-dark); overflow-wrap: anywhere; }
.lz-pub-footer__box-title a, .lz-pub-footer__box-links a, .lz-pub-footer__box-link { color: var(--lz-ui-on-dark-muted); font-size: 11.5px; }
.lz-pub-footer__box-title a:hover, .lz-pub-footer__box-links a:hover, .lz-pub-footer__box-link:hover { color: var(--lz-ui-on-dark); }
.lz-pub-footer__box-links, .lz-pub-footer__box-text { margin: 0; font-size: 11.5px; color: rgb(var(--lz-surface-rgb) / 0.5); }

.lz-pub-footer__disclosures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 24px; margin: 28px 0 0; }
.lz-pub-footer__disclosures dt { font-size: 10.5px; font-weight: var(--lz-weight-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--lz-ui-on-dark-faint); }
.lz-pub-footer__disclosures dd { margin: 2px 0 0; font-size: 12px; color: var(--lz-ui-on-dark-muted); overflow-wrap: anywhere; }
.lz-pub-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(var(--lz-surface-rgb) / 0.1); }
.lz-pub-footer__legal button { color: rgb(var(--lz-surface-rgb) / 0.5); font-size: 13px; }
.lz-pub-footer__para { margin: 14px 0 0; max-width: 900px; font-size: 11.5px; color: var(--lz-ui-on-dark-legal); }
.lz-pub-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgb(var(--lz-surface-rgb) / 0.1);
  font-size: 11px;
  color: rgb(var(--lz-surface-rgb) / 0.3);
}
.lz-pub-footer__quote { font-size: 11.5px; font-weight: var(--lz-weight-medium); color: var(--lz-ui-on-dark-quote); }
.lz-pub-footer__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lz-pub-footer__mono { font-family: var(--lz-font-mono); }
.lz-pub-footer__brandmark { font-weight: var(--lz-weight-semibold); color: var(--accent); }

@media (max-width: 1100px) {
  .lz-pub-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lz-pub-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lz-pub-footer__inner { padding: 36px 16px 24px; }
  .lz-pub-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .lz-pub-footer__bottom { flex-direction: column; align-items: center; text-align: center; }
}


/* ---- The portal landing page --------------------------------------------- */
.lz-landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.lz-landing__main { flex: 1 1 auto; min-width: 0; }
.lz-landing__notice { max-width: 1200px; width: 100%; margin: 12px auto 0; padding: 0 24px; }
/* §11.2 tokens on a full-bleed band: black to --primary-700 only. No stripes, no glow. */
.lz-landing__hero { background: var(--lz-ui-dark-band); color: var(--lz-ui-on-dark); }
.lz-landing__hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.lz-landing__hero-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lz-landing__kicker { margin: 0; font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.lz-landing__title { margin: 0; font-size: 44px; font-weight: var(--lz-weight-extrabold); letter-spacing: -.02em; line-height: 1.05; color: var(--lz-ui-on-dark); }
.lz-landing__subtitle { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--lz-ui-on-dark-muted); }
.lz-landing__trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--lz-ui-on-dark); }
.lz-landing__trust li { display: flex; align-items: center; gap: 10px; }
/* A flat orange TINT well on black - a tint, not a glow (rule 1). */
.lz-landing__tick, .lz-trust-band__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgb(var(--lz-primary-rgb) / 0.18);
  color: var(--accent);
}
.lz-landing__extra { margin-top: 12px; }
.lz-landing__card {
  min-width: 0;
  padding: 28px;
  border-radius: var(--r-2xl);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--neu-out), var(--shadow-lg);
  scroll-margin-top: 96px;
}
.lz-landing { overflow-x: clip; }
.lz-landing__sections { max-width: 1200px; margin: 0 auto; padding: 64px 24px 72px; display: flex; flex-direction: column; gap: 64px; }
/* A section that must run the full width of the page (the trust band) steps out of the 1200px column. */
.lz-landing__sections > .lz-trust-band--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -8px; margin-bottom: -8px; }

/* Card head: a 50px role avatar, radius 14 (rule 13). */
.lz-landing-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lz-landing-head__text { min-width: 0; }
.lz-landing-head__title { margin: 0; font-size: 20px; font-weight: var(--lz-weight-extrabold); letter-spacing: -.01em; color: var(--ink); }
.lz-landing-head__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.lz-role-avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--lz-ui-role-avatar-radius);
  font-size: 15px;
  font-weight: var(--lz-weight-bold);
}
.lz-role-avatar--customer { background: var(--accent); color: var(--primary-900); }
.lz-role-avatar--partner { background: var(--primary-900); color: var(--accent); }
.lz-role-avatar--employee { background: var(--lz-role-employee-bg); color: var(--lz-role-employee); }
.lz-role-avatar--lender { background: var(--lz-role-lender-bg); color: var(--lz-role-lender); }
.lz-role-avatar--admin { background: var(--lz-role-admin-bg); color: var(--lz-role-admin); }
.lz-landing-tabs { margin-bottom: 18px; }

/* Sections. */
.lz-landing-sect { display: flex; flex-direction: column; gap: 24px; }
.lz-landing-sect__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lz-landing-sect__action { flex: 0 0 auto; }
.lz-landing-sect__head--center { justify-content: center; text-align: center; }
.lz-landing-sect__head--center .lz-landing-sect__intro { margin-left: auto; margin-right: auto; }
.lz-landing-sect__kicker { margin: 0; font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); }
.lz-landing-sect__title { margin: 8px 0 0; font-size: 30px; font-weight: var(--lz-weight-extrabold); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.lz-landing-sect__intro { margin: 10px 0 0; max-width: 640px; font-size: 14px; color: var(--ink-2); }

/* FeatureGrid: page cards, radius 20, a 46px black tile with an orange glyph (the first orange with black). */
.lz-feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lz-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--neu-out-md);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lz-feature:hover { transform: translateY(-3px); box-shadow: var(--neu-out); }
.lz-feature-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lz-feature__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lz-feature-grid--inline .lz-feature { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
.lz-feature-grid--inline .lz-feature__icon { flex: 0 0 46px; }
.lz-feature__icon { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--lz-ui-role-avatar-radius); background: var(--primary-900); color: var(--accent); }
.lz-feature__icon--accent { background: var(--accent); color: var(--primary-900); }
.lz-feature__title { margin: 0; font-size: 15px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-feature__text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

/* StepList: numbered steps, a black dot with an orange number. */
.lz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lz-steps__item { display: flex; flex-direction: column; gap: 10px; }
.lz-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lz-steps__art { border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--neu-in-sm); overflow: hidden; min-height: 96px; display: grid; place-items: center; }
.lz-steps__art img, .lz-steps__art svg { display: block; max-width: 100%; height: auto; }
.lz-landing-sect--panel { padding: 28px; border-radius: var(--r-2xl); background: var(--card); box-shadow: var(--neu-out-md); }
.lz-steps__num { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--lz-ui-round); background: var(--primary-900); color: var(--accent); font-size: 12px; font-weight: var(--lz-weight-extrabold); }
.lz-steps__title { margin: 0; font-size: 15px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-steps__text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

/* TrustBand: a black band of short facts. */
.lz-trust-band { padding: 28px; border-radius: var(--r-2xl); background: var(--lz-ui-dark-band); color: var(--lz-ui-on-dark); }
.lz-trust-band--bleed { padding: 40px 0; border-radius: 0; background: var(--lz-ui-dark-band); }
.lz-trust-band--bleed .lz-trust-band__list { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lz-trust-band__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lz-trust-band__item { display: flex; align-items: center; gap: 10px; }
.lz-trust-band__title { display: block; font-size: 13px; font-weight: var(--lz-weight-bold); }
.lz-trust-band__text { display: block; font-size: 11.5px; color: var(--lz-ui-on-dark-muted); }

/* FaqList — §13.13: native details, 28px numbered icon, answer indented 42px. */
.lz-faq { display: flex; flex-direction: column; padding: 4px 24px; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--neu-out-md); }
.lz-faq__item { padding: 16px 0; border-top: 1px solid var(--line-2); }
.lz-faq__item:first-child { border-top: none; }
.lz-faq__question { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: var(--lz-weight-semibold); color: var(--ink); cursor: pointer; list-style: none; }
.lz-faq__question::-webkit-details-marker { display: none; }
.lz-faq__question:focus-visible { outline: none; box-shadow: var(--lz-ui-focus-ring); border-radius: var(--r-xs); }
.lz-faq__num { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg); box-shadow: var(--neu-out-xs); font-size: 12px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-faq__answer { padding: 8px 0 0 42px; font-size: 13px; color: var(--ink-2); }
.lz-faq__answer p { margin: 0 0 8px; }
.lz-faq__question::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: var(--lz-weight-medium); color: var(--ink-3); transition: transform .2s ease; }
.lz-faq__item[open] > .lz-faq__question::after { content: "\2212"; }
.lz-landing-sect--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.lz-landing-sect--split .lz-landing-sect__head { flex-direction: column; align-items: flex-start; }

/* AreaChips: the Super Admin landing's control areas. */
.lz-area-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.lz-area-chips__chip { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--lz-ui-on-dark-wash); border-radius: var(--r-md); background: rgb(var(--lz-surface-rgb) / 0.04); font-size: 13px; font-weight: var(--lz-weight-medium); color: var(--lz-ui-on-dark); }
.lz-area-chips__chip::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: var(--lz-ui-round); background: var(--accent); }

/* LandingSketch (owner A1): real component shapes, labels only - no numbers. */
.lz-sketch { position: relative; margin: 0; padding: 20px; border-radius: var(--r-xl); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); max-width: 460px; }
.lz-sketch__chip { position: absolute; top: 12px; right: 14px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-2); font-size: 10px; font-weight: var(--lz-weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lz-sketch__body { min-width: 0; }
.lz-sketch__steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.lz-sketch__steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 10.5px; font-weight: var(--lz-weight-semibold); color: var(--ink-2); }
.lz-sketch__steps i { width: 22px; height: 22px; border-radius: var(--lz-ui-round); background: var(--bg); box-shadow: var(--neu-in-sm); }
.lz-sketch__steps li:first-child i { background: var(--primary-900); box-shadow: none; }
.lz-sketch__bars, .lz-sketch__rows { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lz-sketch__bars li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12px; font-weight: var(--lz-weight-semibold); color: var(--ink-2); }
.lz-sketch__bars i { display: block; height: 12px; border-radius: var(--r-pill); background: var(--lz-ui-bar-fill); }
.lz-sketch__rows li { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, .6fr) auto; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line-2); }
.lz-sketch__rows li:first-child { padding-top: 0; border-top: none; }
.lz-sketch__row-label { font-size: 12px; font-weight: var(--lz-weight-semibold); color: var(--ink); }
.lz-sketch__rows i { display: block; height: 8px; border-radius: var(--r-pill); background: var(--bg-2); }
.lz-sketch__tag { padding: 3px 9px; border-radius: var(--r-pill); background: var(--info-bg); font-size: 10.5px; font-weight: var(--lz-weight-bold); color: var(--info); }

.lz-sketch__heading { margin: 0; font-size: 10.5px; font-weight: var(--lz-weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lz-sketch__heading::before { content: "\2014\00a0"; }
.lz-sketch__stack { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lz-sketch__stackbar { display: flex; height: 12px; gap: 2px; border-radius: var(--r-pill); overflow: hidden; }
.lz-sketch__stackbar i { flex: 1 1 0; background: var(--primary-900); }
.lz-sketch__stackbar i:nth-child(2) { background: var(--accent); }
.lz-sketch__stackbar i:nth-child(3) { background: var(--accent-soft); }
.lz-sketch__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.lz-sketch__legend li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--lz-weight-semibold); color: var(--ink-2); }
.lz-sketch__legend b { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--primary-900); }
.lz-sketch__legend li:nth-child(2) b { background: var(--accent); }
.lz-sketch__legend li:nth-child(3) b { background: var(--accent-soft); }

.lz-photo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lz-photo-split--reverse .lz-photo-split__photo { order: 2; }
.lz-photo-split__photo { min-width: 0; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--neu-out); }
.lz-photo-split__photo .lz-photo-slot { border-radius: 0; }
.lz-photo-split__text { min-width: 0; }

.lz-landing-note { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info); font-size: 12px; line-height: 1.5; }

.lz-float-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--neu-out-md); max-width: 260px; }
.lz-float-card__icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--primary-900); color: var(--accent); }
.lz-float-card__title { margin: 0; font-size: 12px; font-weight: var(--lz-weight-bold); color: var(--ink); }
.lz-float-card__text { margin: 2px 0 0; font-size: 11px; color: var(--ink-2); }

.lz-photo-slot { display: block; width: 100%; height: auto; border-radius: var(--r-xl); }

@media (prefers-reduced-motion: no-preference) {
  .lz-landing__kicker, .lz-landing__title, .lz-landing__subtitle, .lz-landing__trust li, .lz-landing__extra, .lz-landing__card,
  .lz-landing-sect, .lz-photo-split, .lz-trust-band { animation: lz-landing-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  .lz-landing__trust li:nth-child(2), .lz-feature:nth-child(2), .lz-steps__item:nth-child(2) { animation-delay: .08s; }
  .lz-landing__trust li:nth-child(3), .lz-feature:nth-child(3), .lz-steps__item:nth-child(3) { animation-delay: .16s; }
  .lz-feature, .lz-steps__item { animation: lz-landing-rise .7s cubic-bezier(.16, 1, .3, 1) both; }
  .lz-feature:nth-child(4), .lz-steps__item:nth-child(4) { animation-delay: .24s; }
  .lz-feature:nth-child(5) { animation-delay: .3s; }
  .lz-feature:nth-child(6) { animation-delay: .36s; }
}
@keyframes lz-landing-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lz-feature, .lz-pub-menu__chevron { transition: none; }
  .lz-feature:hover { transform: none; }
}

@media (max-width: 1100px) {
  .lz-feature-grid, .lz-feature-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lz-steps, .lz-steps--3, .lz-trust-band__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lz-landing-sect--split, .lz-photo-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* Below 1024px the card comes BEFORE the hero text (card first on phones). */
@media (max-width: 1023px) {
  .lz-landing__hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px 40px; }
  .lz-landing__card { order: -1; }
  .lz-landing__title { font-size: 34px; }
}
@media (max-width: 640px) {
  .lz-landing__hero-inner, .lz-landing__sections, .lz-landing__notice { padding-left: 16px; padding-right: 16px; }
  .lz-landing__card { padding: 20px; }
  .lz-landing__title { font-size: 28px; }
  .lz-landing-sect__title { font-size: 24px; }
  .lz-feature-grid, .lz-feature-grid--4, .lz-steps, .lz-steps--3, .lz-trust-band__list, .lz-area-chips { grid-template-columns: minmax(0, 1fr); }
  .lz-landing-sect--panel { padding: 20px; }
  .lz-sketch__legend { grid-auto-flow: row; }
  .lz-sketch__rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .lz-sketch__rows i { display: none; }
}


.lz-app :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lz-sidebar :focus-visible, .lz-hero :focus-visible, .lz-footer :focus-visible, .lz-target :focus-visible {
  outline-color: var(--accent);
}

/* Available to keyboard users, invisible until focused. */
.lz-skip-link {
  position: absolute;
  left: var(--lz-space-2);
  top: var(--lz-space-2);
  z-index: 40;
  padding: var(--lz-space-2) var(--lz-space-4);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--neu-out-sm);
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.lz-skip-link:focus-visible { transform: translateY(0); }

.lz-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


@media (prefers-reduced-motion: reduce) {
  .lz-app *,
  .lz-app *::before,
  .lz-app *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .lz-stat:hover,
  .lz-stat:focus-within,
  .lz-tile:hover,
  .lz-tile:focus-visible {
    transform: none;
  }
}


.lz-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.lz-menu-btn, .lz-nav-scrim { display: none; }

@media (max-width: 1099.98px) {
  .lz-kpi-strip, .lz-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lz-c4, .lz-c5, .lz-c6, .lz-c7, .lz-c8 { grid-column: span 12; }
  .lz-c3 { grid-column: span 6; }
}

@media (max-width: 1023.98px) {
  .lz-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main"
      "footer";
  }
  .lz-app::before { display: none; }
  .lz-rail { display: none; }
  /* The docked panel is hidden here, so a dashboard reaches it by the tab
     too — set low on the edge, compact, clear of the header. */
  .lz-app .lz-panel-handle,
  .lz-app:not(.lz-app--no-rail) .lz-panel-handle {
    display: flex;
    top: auto;
    bottom: 96px;
    transform: none;
    padding: 10px 8px 10px 10px;
  }
  .lz-panel-handle__label { display: none; }
  .lz-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: auto;
    width: var(--rightpanel-w);
    z-index: 61;
    /* The drawer covers the page, so it keeps a scroll of its own. */
    overflow-y: auto;
    scrollbar-width: none;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.16,1,.3,1);
  }
  .lz-nav-toggle:checked ~ .lz-sidebar { transform: none; }
  .lz-nav-toggle:checked ~ .lz-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--lz-ui-backdrop);
  }
  .lz-nav-toggle:focus-visible ~ .lz-topbar .lz-menu-btn { box-shadow: var(--lz-ui-focus-ring); }
  .lz-menu-btn {
    flex: 0 0 var(--lz-ui-control-size);
    width: var(--lz-ui-control-size);
    height: var(--lz-ui-control-size);
    display: inline-grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--bg);
    box-shadow: var(--neu-out-xs);
    color: var(--ink);
    cursor: pointer;
  }
  .lz-clock, .lz-lang { display: none; }
}

@media (max-width: 767.98px) {
  .lz-main { padding: var(--lz-space-4) var(--lz-space-4) 28px; }
  .lz-topbar { padding: var(--lz-space-2) var(--lz-space-4); }
  .lz-topbar__title { font-size: 16px; }
  .lz-topbar .lz-topbar__find { display: none; }
  .lz-topbar .lz-topbar__find-link { display: inline-flex; }
  .lz-hero, .lz-hero--dashboard { grid-template-columns: auto minmax(0, 1fr); padding: 22px; }
  .lz-hero__actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lz-tabstrip { flex-wrap: wrap; }
  .lz-tabstrip__btn, .lz-tab { flex: 1 1 45%; justify-content: center; }
  .lz-form-grid { grid-template-columns: minmax(0, 1fr); }
  .lz-filter-bar { align-items: stretch; }
  .lz-two-col { grid-template-columns: minmax(0, 1fr); }
  .lz-two-col__side { flex-direction: column; }
  .lz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lz-c3 { grid-column: span 12; }
}

@media (max-width: 479.98px) {
  .lz-main { padding: 12px 12px 24px; }
  .lz-kpi-strip, .lz-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .lz-footer { justify-content: flex-start; }
  .lz-toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}