/* ==========================================================================
   LUMORA PRO - application layer
   Swiss industrial precision meets a trading-desk control room.
   Single dark theme, one lime accent, one 4px radius scale, tabular numerals.
   ========================================================================== */

:root {
  /* Surfaces run cool-neutral so the warm lime stays the only saturated note. */
  --lm-obsidian:   #0E100D;
  --lm-surface-1:  #15170F;
  --lm-surface-2:  #1C1E19;
  --lm-surface-3:  #24261F;
  --lm-border:     #2A2C25;
  --lm-border-hi:  #3A3D33;

  --lm-ivory:      #F3EFE6;
  --lm-steel:      #868D82;
  /* The old #5E645B sat at 2.97:1 on surface-1, well under WCAG AA, and it
     was carrying real text: captions, SKUs, hints, placeholders. Raised until
     it clears 4.5:1 on every surface we paint on. The two grey tiers are now
     close, so hierarchy is carried by size and weight rather than by contrast,
     which is the sturdier way to do it anyway. */
  --lm-steel-dim:  #82897D;

  --lm-lime:       #C7FF4A;
  --lm-lime-dim:   #9ECC33;
  --lm-orange:     #F2633A;
  --lm-success:    #2BD576;
  --lm-warning:    #FFB547;

  --lm-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --lm-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lm-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* One radius scale: 4px structural, 2px micro, 999px only for pills. */
  --lm-r:    4px;
  --lm-r-lg: 8px;
  --lm-r-sm: 2px;

  --lm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lm-t:    220ms var(--lm-ease);

  --lm-gutter: clamp(1.25rem, 4vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--lm-obsidian);
  color: var(--lm-ivory);
  font-family: var(--lm-sans);
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--lm-display); letter-spacing: -0.03em; }

::selection { background: var(--lm-lime); color: var(--lm-obsidian); }

.lm-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A ring rather than a slab: readable on both dark surfaces and the lime CTA. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lm-obsidian), 0 0 0 4px var(--lm-lime);
  border-radius: var(--lm-r-sm);
}


::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lm-obsidian); }
::-webkit-scrollbar-thumb { background: var(--lm-border-hi); border-radius: 999px; border: 3px solid var(--lm-obsidian); }
::-webkit-scrollbar-thumb:hover { background: var(--lm-steel-dim); }

/* ==========================================================================
   Primitives
   ========================================================================== */

.lm-eyebrow {
  font-family: var(--lm-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-steel);
  margin: 0;
}

.lm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--lm-sans);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--lm-r);
  cursor: pointer; line-height: 1;
  transition: background var(--lm-t), border-color var(--lm-t), color var(--lm-t), transform 90ms ease;
}
.lm-btn:active { transform: translateY(1px); }
.lm-btn:disabled { opacity: 0.5; cursor: progress; }

.lm-btn-primary { background: var(--lm-lime); color: #12140F; }
.lm-btn-primary:hover:not(:disabled) { background: #D6FF74; }

.lm-btn-secondary { background: transparent; color: var(--lm-ivory); border-color: var(--lm-border-hi); }
.lm-btn-secondary:hover:not(:disabled) { border-color: var(--lm-lime); color: var(--lm-lime); }

.lm-btn-ghost { background: transparent; color: var(--lm-steel); border-color: transparent; }
.lm-btn-ghost:hover:not(:disabled) { color: var(--lm-orange); }

.lm-btn-sm { padding: 0.55rem 0.9rem; font-size: 0.75rem; }

.lm-badge {
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.6rem;
  font-family: var(--lm-mono);
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--lm-r-sm); line-height: 1.3;
  border: 1px solid transparent;
}
.lm-badge-lime    { background: rgba(199,255,74,.12); color: var(--lm-lime);    border-color: rgba(199,255,74,.28); }
.lm-badge-orange  { background: rgba(242,99,58,.12);  color: var(--lm-orange);  border-color: rgba(242,99,58,.28); }
.lm-badge-success { background: rgba(43,213,118,.12); color: var(--lm-success); border-color: rgba(43,213,118,.28); }
.lm-badge-warning { background: rgba(255,181,71,.12); color: var(--lm-warning); border-color: rgba(255,181,71,.28); }
.lm-badge-steel   { background: rgba(134,141,130,.1); color: var(--lm-steel);   border-color: rgba(134,141,130,.24); }

.lm-avatar {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: var(--lm-r);
  background: var(--lm-surface-3);
  border: 1px solid var(--lm-border-hi);
  font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 500;
  color: var(--lm-lime); letter-spacing: 0.04em;
}

.lm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.lm-table th {
  text-align: left;
  font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-steel);
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--lm-border-hi);
}
.lm-table td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--lm-border); vertical-align: top; }
.lm-table tr:last-child td { border-bottom: none; }
.lm-table td.num, .lm-table th.num { text-align: right; font-family: var(--lm-mono); }

/* ==========================================================================
   States: loading, empty, error, toast
   ========================================================================== */

.lm-skeleton {
  background: linear-gradient(90deg, var(--lm-surface-1) 25%, var(--lm-surface-2) 50%, var(--lm-surface-1) 75%);
  background-size: 200% 100%;
  animation: lm-shimmer 1.5s linear infinite;
  border-radius: var(--lm-r);
}
@keyframes lm-shimmer { to { background-position: -200% 0; } }

.lm-state {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem;
  border: 1px dashed var(--lm-border-hi);
  border-radius: var(--lm-r-lg);
  background: var(--lm-surface-1);
}
.lm-state__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--lm-r);
  font-family: var(--lm-mono); font-weight: 500;
}
.lm-state--error .lm-state__icon { background: rgba(242,99,58,.14); color: var(--lm-orange); }
.lm-state--empty .lm-state__icon { background: rgba(134,141,130,.12); color: var(--lm-steel); }
.lm-state__body { flex: 1; min-width: 0; }
.lm-state__title { margin: 0 0 0.25rem; font-family: var(--lm-display); font-size: 0.9375rem; font-weight: 600; }
.lm-state__msg { margin: 0; font-size: 0.8125rem; color: var(--lm-steel); line-height: 1.5; }

.lm-toasts {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none; width: min(440px, calc(100vw - 2rem));
}
.lm-toast {
  padding: 0.85rem 1.1rem;
  background: var(--lm-surface-2);
  border: 1px solid var(--lm-border-hi);
  border-left-width: 3px;
  border-radius: var(--lm-r);
  font-size: 0.8125rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(10px);
  transition: opacity 280ms var(--lm-ease), transform 280ms var(--lm-ease);
}
.lm-toast.is-in { opacity: 1; transform: translateY(0); }
.lm-toast--lime    { border-left-color: var(--lm-lime); }
.lm-toast--success { border-left-color: var(--lm-success); }
.lm-toast--warning { border-left-color: var(--lm-warning); }
.lm-toast--orange  { border-left-color: var(--lm-orange); }

/* ==========================================================================
   Account bar
   ========================================================================== */

.lm-accountbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem var(--lm-gutter);
  background: var(--lm-surface-1);
  border-bottom: 1px solid var(--lm-border);
  font-size: 0.75rem;
}
.lm-accountbar__crumbs {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; color: var(--lm-steel);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.lm-accountbar__crumbs a { color: var(--lm-steel); text-decoration: none; }
.lm-accountbar__crumbs a:hover { color: var(--lm-lime); }
.lm-accountbar__crumbs [aria-current] { color: var(--lm-ivory); }
.lm-accountbar__sep { color: var(--lm-steel-dim); }

.lm-accountbar__right { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.lm-accountbar__anon { color: var(--lm-steel); font-size: 0.6875rem; letter-spacing: 0.04em; }

/* Language switch.
   Two letters, the current one lit and the target one dimmed, so the control
   states what it will do rather than what it already is. A dropdown for two
   options would be a menu that always has one useful entry. */
.lm-langswitch {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-decoration: none;
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-sm);
  overflow: hidden; flex-shrink: 0;
}
/* 32px is the touch minimum, and the switch is one of the few controls a
   phone visitor is likely to reach for on this page. */
.lm-langswitch { min-height: 32px; }
.lm-langswitch__on,
.lm-langswitch__off {
  display: inline-flex; align-items: center;
  padding: 0 0.5rem; min-height: 32px; line-height: 1;
}
.lm-langswitch__on  { color: var(--lm-obsidian); background: var(--lm-lime); font-weight: 500; }
.lm-langswitch__off { color: var(--lm-steel); }
.lm-langswitch:hover .lm-langswitch__off,
.lm-langswitch:focus-visible .lm-langswitch__off { color: var(--lm-ivory); }
.lm-langswitch:focus-visible { outline: 2px solid var(--lm-lime); outline-offset: 2px; }


.lm-accountbar__credit { display: flex; align-items: center; gap: 0.5rem; font-family: var(--lm-mono); font-size: 0.6875rem; }
.lm-accountbar__credit-label { color: var(--lm-steel); letter-spacing: 0.1em; text-transform: uppercase; }
.lm-accountbar__credit-value { color: var(--lm-ivory); }
.lm-accountbar__credit-track {
  width: 56px; height: 3px; border-radius: 999px;
  background: var(--lm-border-hi); overflow: hidden; display: block;
}
.lm-accountbar__credit-track > span { display: block; height: 100%; background: var(--lm-lime); }

.lm-accountbar__user { display: flex; align-items: center; gap: 0.6rem; }
.lm-accountbar__user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.lm-accountbar__name { font-weight: 500; font-size: 0.75rem; }
.lm-accountbar__org { color: var(--lm-steel); font-family: var(--lm-mono); font-size: 0.625rem; letter-spacing: 0.06em; }

@media (max-width: 720px) {
  .lm-accountbar__credit, .lm-accountbar__anon { display: none; }
  .lm-langswitch { font-size: 0.5625rem; min-height: 36px; }
  .lm-langswitch__on,
  .lm-langswitch__off { min-height: 36px; }
}

/* ==========================================================================
   Hero
   The product is light, so the page opens with a lit fixture rather than a
   block of copy. The scene is full bleed, the words sit over it, and the live
   deal panel floats as a HUD card instead of owning half the grid.
   ========================================================================== */

.lm-hero {
  position: relative;
  min-height: min(940px, 100dvh);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--lm-border);
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 42%, rgba(255, 214, 150, .10), transparent 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(199, 255, 74, .05), transparent 60%),
    #0A0C09;
}

/* The WebGL stage. Sits behind everything and bleeds off the right edge so the
   fixture is cropped like a photograph rather than centred like a catalogue
   thumbnail. */
.lm-hero__scene {
  position: absolute;
  inset: 0 -6% -6% 20%;
  z-index: 0;
  /* Widoczna od razu, bo niesie plakat. Wczesniej caly kontener czekal na
     WebGL i przez ten czas prawa strona hero byla pusta. */
  opacity: 1;
  pointer-events: none;
}
/* Przenikanie robia teraz plakat i plotno osobno, patrz nizej. */

/* A canvas is a replaced element: insets position it but never size it,
   because width:auto resolves to its intrinsic 300x150. The wrapper owns the
   box, the canvas fills the wrapper. */
.lm-hero__scene > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 1100px) {
  .lm-hero__scene { inset: auto -10% -4% -10%; height: 56%; }
}

/* Light spilling from the fixture onto the layout. Decorative, and it is what
   stops the copy reading as pasted on top of a render. */
.lm-hero__spill {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46% 42% at 72% 46%, rgba(255, 206, 138, .16), transparent 70%);
  mix-blend-mode: screen;
  animation: lm-spill 7s ease-in-out infinite;
}
@keyframes lm-spill {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

.lm-hero__content {
  position: relative; z-index: 2;
  padding: clamp(4rem, 9vh, 8rem) var(--lm-gutter) clamp(3rem, 6vh, 5rem);
  max-width: min(46rem, 64%);
  display: flex; flex-direction: column;
}

@media (max-width: 1100px) {
  .lm-hero { min-height: auto; }
  .lm-hero__content { max-width: none; padding-bottom: 54vw; }
}

.lm-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--lm-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--lm-lime); margin: 0 0 1.75rem;
}
.lm-hero__eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: var(--lm-lime);
  animation: lm-beacon 2s ease-in-out infinite;
}
@keyframes lm-beacon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 255, 74, .5); }
  70%      { box-shadow: 0 0 0 9px rgba(199, 255, 74, 0); }
}

/* Bigger and tighter than the old scale. At this size the headline carries the
   composition, which is what lets the render beside it breathe. */
.lm-hero__headline {
  font-size: clamp(2.75rem, 6.4vw, 5.75rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.045em;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}
.lm-hero__headline em {
  font-style: normal;
  color: var(--lm-lime);
  text-shadow: 0 0 42px rgba(199, 255, 74, .28);
}

.lm-hero__sub {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6; color: var(--lm-steel);
  max-width: 46ch; margin: 0 0 2.5rem;
}

.lm-hero__cta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

/* Specification of the fixture actually on screen. */
.lm-hero__spec {
  display: flex; gap: 2rem; flex-wrap: wrap;
  margin: 2.75rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--lm-border);
}
.lm-hero__spec > div { display: flex; flex-direction: column; gap: .3rem; }
.lm-hero__spec dt {
  font-family: var(--lm-mono); font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-hero__spec dd {
  margin: 0; font-family: var(--lm-mono); font-size: .875rem; color: var(--lm-ivory);
}

/* ---- Live panel jako fixed HUD nad PersonaSwitcher, collapsible pill ---- */

.lm-hero__stage {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + 56px + 0.5rem);
  z-index: 9998;
  width: 272px;
  padding: 0;
  border-radius: var(--lm-r-lg);
  border: 1px solid rgba(243, 239, 230, .12);
  background: rgba(14, 16, 13, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(243, 239, 230, .07),
    0 20px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
  display: block;
}

/* Header/toggle - zawsze widoczny (kompaktowy pill) */
.lm-hero__stage-toggle {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.75rem 0.9rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--lm-ivory); text-align: left;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.lm-hero__stage-toggle:hover { background: rgba(243, 239, 230, .04); }
.lm-hero__stage-toggle-num {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--lm-steel);
}
.lm-hero__stage-chevron {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 1.5px solid var(--lm-steel);
  border-bottom: 1.5px solid var(--lm-steel);
  transform: rotate(-135deg) translateY(-2px);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}
.lm-hero__stage.is-expanded .lm-hero__stage-chevron {
  transform: rotate(45deg) translateY(-2px);
}

/* Body ze split - toggle przez native [hidden] atrybut (bez max-height/transition
   ktore w hostingu shared-cache mialy dziwne zachowanie z computed value = 0). */
.lm-hero__stage-body {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 0.75rem 0.9rem 0.9rem;
  border-top: 1px solid rgba(243, 239, 230, .07);
  max-height: 60vh; overflow-y: auto; overflow-x: hidden;
}
.lm-hero__stage-body[hidden] {
  display: none;
}

/* W waskim widoku split single-column zeby czytelnie */
.lm-hero__stage .lm-hero__stage-split { grid-template-columns: 1fr; }

@supports not (backdrop-filter: blur(4px)) {
  .lm-hero__stage { background: rgba(14, 16, 13, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  .lm-hero__stage {
    background: var(--lm-surface-1);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (max-width: 1100px) {
  .lm-hero__stage {
    right: 1.1rem;
    width: min(272px, calc(100vw - 2.2rem));
  }
}

.lm-hero__stage-label {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--lm-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-live-dot { display: inline-flex; align-items: center; gap: .45rem; color: var(--lm-lime); }
.lm-live-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lm-lime); animation: lm-beacon 2s ease-in-out infinite;
}

.lm-hero__stage-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(243, 239, 230, .07);
  border: 1px solid rgba(243, 239, 230, .07);
  border-radius: var(--lm-r); overflow: hidden;
}
.lm-hero__stage-panel {
  background: rgba(10, 12, 9, .72);
  padding: .85rem;
  display: flex; flex-direction: column; gap: .5rem;
  min-height: 0; min-width: 0; overflow: hidden;
}
.lm-hero__stage-panel__head {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  font-family: var(--lm-mono); font-size: .5625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lm-steel);
  padding-bottom: .45rem; border-bottom: 1px solid rgba(243, 239, 230, .07);
  white-space: nowrap; overflow: hidden;
}
.lm-hero__stage-panel__head .role-buyer { color: var(--lm-orange); }
.lm-hero__stage-panel__head .role-sales { color: var(--lm-lime); }

.lm-hero__stage-locked {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem;
  border: 1px dashed rgba(243, 239, 230, .14); border-radius: var(--lm-r);
}
.lm-hero__stage-locked-title { margin: 0; font-family: var(--lm-display); font-size: .9375rem; font-weight: 600; }
.lm-hero__stage-locked-msg { margin: 0; font-size: .75rem; color: var(--lm-steel); line-height: 1.55; }
.lm-hero__stage-locked .lm-btn { align-self: flex-start; }

/* Anonimowy widz nie dostaje panelu, tylko dyskretny pigulkowy skrot do
   Deal Roomu, wcisniety w rog. Nie zaslania hero. */
.lm-hero__stage--pill {
  width: auto; padding: 0; background: none; border: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.lm-hero__pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(14, 16, 13, .72);
  border: 1px solid rgba(243, 239, 230, .12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--lm-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--lm-ivory); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.lm-hero__pill:hover {
  border-color: rgba(199, 255, 74, .35);
  background: rgba(14, 16, 13, .88);
  transform: translateY(-1px);
}
.lm-hero__pill-label { color: var(--lm-steel); }
@supports not (backdrop-filter: blur(4px)) {
  .lm-hero__pill { background: rgba(14, 16, 13, .94); }
}

.lm-mini-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .4rem 0; border-bottom: 1px solid rgba(243, 239, 230, .06);
  font-size: .6875rem; min-width: 0;
}
.lm-mini-line__name { color: var(--lm-ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-mini-line__meta { color: var(--lm-steel); font-family: var(--lm-mono); font-size: .5625rem; letter-spacing: .05em; }
.lm-mini-line__price { color: var(--lm-lime); font-family: var(--lm-mono); font-weight: 500; white-space: nowrap; }

.lm-mini-total {
  margin-top: auto; padding-top: .6rem; border-top: 1px solid rgba(243, 239, 230, .1);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--lm-mono); font-size: .6875rem;
}
.lm-mini-total__label {
  color: var(--lm-steel); letter-spacing: .1em; text-transform: uppercase; font-size: .5625rem;
}
.lm-mini-total__value { color: var(--lm-lime); font-weight: 500; }

@media (max-width: 620px) {
  .lm-hero__stage-split { grid-template-columns: 1fr; }
}

/* Film grain over the whole document. One fixed layer with pointer events off,
   so it never repaints on scroll. Without it the flat panels read as vector
   art rather than as a lit surface. */
.lm-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@media (prefers-reduced-motion: reduce) {
  .lm-hero__spill { animation: none; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.lm-section {
  padding: clamp(3rem, 7vw, 6rem) var(--lm-gutter);
  border-bottom: 1px solid var(--lm-border);
}
.lm-section__number {
  display: block;
  font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lm-steel); margin: 0 0 0.9rem;
}
.lm-section__title {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -0.035em;
  margin: 0 0 2.5rem; max-width: 22ch; text-wrap: balance;
}
.lm-section__title em { font-style: normal; color: var(--lm-lime); }
.lm-section__lead {
  font-size: 1rem; line-height: 1.6; color: var(--lm-steel);
  max-width: 62ch; margin: -1.5rem 0 2.5rem;
}

/* Metrics strip */
.lm-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--lm-border);
  border-bottom: 1px solid var(--lm-border);
}
.lm-metric { background: var(--lm-obsidian); padding: clamp(1.5rem, 3vw, 2.5rem) var(--lm-gutter); }
.lm-metric__val {
  font-family: var(--lm-mono); font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--lm-ivory);
}
.lm-metric__label {
  font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lm-steel); margin: 0.85rem 0 0; line-height: 1.5;
}
@media (max-width: 860px) { .lm-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lm-metrics { grid-template-columns: 1fr; } }

/* Feature bento */
.lm-features {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--lm-border);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
  overflow: hidden;
}
.lm-feature {
  background: var(--lm-surface-1);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.9rem;
  transition: background var(--lm-t);
  position: relative;
}
.lm-feature:hover { background: var(--lm-surface-2); }
.lm-feature--wide { grid-column: span 3; }
.lm-feature--med  { grid-column: span 3; }
.lm-feature--sm   { grid-column: span 2; }
.lm-feature--tinted {
  background:
    linear-gradient(150deg, rgba(199,255,74,.06), transparent 58%),
    var(--lm-surface-1);
}
.lm-feature__num {
  font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; color: var(--lm-lime);
}
.lm-feature__title { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.lm-feature__body { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--lm-steel); }
.lm-feature__accent {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--lm-border);
  font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--lm-lime-dim);
}
@media (max-width: 980px) {
  .lm-features { grid-template-columns: 1fr; }
  .lm-feature--wide, .lm-feature--med, .lm-feature--sm { grid-column: span 1; }
}

/* ==========================================================================
   Scrollytelling - the life of one order
   ========================================================================== */

.lm-story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  position: relative;
}

.lm-story__steps { display: flex; flex-direction: column; position: relative; }
.lm-story__steps::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--lm-border);
}
.lm-story__steps::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 2px; height: var(--story-progress, 0%);
  background: var(--lm-lime);
  transition: height 480ms var(--lm-ease);
}

.lm-story__step {
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(2rem, 6vh, 4rem) 2rem;
  opacity: 0.32;
  transition: opacity 420ms var(--lm-ease);
}
.lm-story__step.is-active { opacity: 1; }
.lm-story__step h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; letter-spacing: -0.025em;
}
.lm-story__step p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--lm-steel); max-width: 46ch; }
.lm-story__step-num {
  font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; color: var(--lm-lime); display: block; margin-bottom: 0.5rem;
}

.lm-story__stage {
  position: sticky; top: 6rem;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-lg);
  background: var(--lm-surface-1);
  overflow: hidden;
  min-height: 420px;
}
.lm-story__panel {
  position: absolute; inset: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms var(--lm-ease), transform 380ms var(--lm-ease);
  pointer-events: none;
}
.lm-story__panel.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lm-story__panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--lm-border);
}


.lm-story.is-static .lm-story__stage { position: static; min-height: 0; }
.lm-story.is-static .lm-story__panel { position: static; opacity: 1; transform: none; border-bottom: 1px solid var(--lm-border); }

@media (max-width: 980px) {
  .lm-story { grid-template-columns: 1fr; }
  .lm-story__stage { position: static; min-height: 340px; }
}

/* --------------------------------------------------------------------------
   Story panels
   These used to print raw JSON, which reads as debug output that leaked onto
   the page rather than as something anyone designed. Each step now gets a
   built view of what actually happens at that point in the flow.
   -------------------------------------------------------------------------- */

.lm-story__head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--lm-border);
}
.lm-story__tag {
  font-family: var(--lm-mono); font-size: .625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-story__label {
  margin: .4rem 0 0;
  font-family: var(--lm-mono); font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-story__note {
  margin: auto 0 0; font-size: .75rem; line-height: 1.55; color: var(--lm-steel);
}
.lm-story__note--internal {
  padding: .6rem .75rem; border-left: 2px solid var(--lm-lime-dim);
  background: rgba(199, 255, 74, .05); border-radius: var(--lm-r-sm);
  color: var(--lm-lime-dim);
}

/* ---- 01 request document ---- */
.lm-doc {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem; background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r);
}
.lm-doc__num {
  font-family: var(--lm-mono); font-size: 1.25rem;
  color: var(--lm-lime); letter-spacing: -.01em;
}
.lm-doc__rows { display: flex; flex-direction: column; gap: .55rem; }
.lm-doc__rows > div {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--lm-border);
}
.lm-doc__rows > div:last-child { border-bottom: none; padding-bottom: 0; }
.lm-doc__rows span { color: var(--lm-steel); }
.lm-doc__rows b { font-weight: 500; }
.lm-doc__line {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem .9rem; background: var(--lm-surface-2);
  border-radius: var(--lm-r-sm); font-family: var(--lm-mono); font-size: .75rem;
}
.lm-doc__sku { color: var(--lm-ivory); }
.lm-doc__qty { color: var(--lm-lime); }

/* ---- 02 price ladder ---- */
.lm-ladder { display: flex; flex-direction: column; gap: .55rem; }
.lm-ladder__row {
  display: grid; grid-template-columns: 62px 1fr 78px;
  align-items: center; gap: .75rem;
  font-family: var(--lm-mono); font-size: .75rem;
}
.lm-ladder__qty { color: var(--lm-steel); }
.lm-ladder__bar {
  height: 22px; background: var(--lm-obsidian);
  border-radius: var(--lm-r-sm); overflow: hidden;
}
.lm-ladder__bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(199,255,74,.18), rgba(199,255,74,.32));
  border-right: 2px solid var(--lm-lime-dim);
}
.lm-ladder__price { text-align: right; color: var(--lm-ivory); }

/* The tier the story is standing on. */
.lm-ladder__row.is-active .lm-ladder__qty,
.lm-ladder__row.is-active .lm-ladder__price { color: var(--lm-lime); }
.lm-ladder__row.is-active .lm-ladder__bar > i {
  background: linear-gradient(90deg, rgba(199,255,74,.3), rgba(199,255,74,.6));
  border-right-color: var(--lm-lime);
}

/* ---- 03 quotation ---- */
.lm-quote {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.15rem; background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r);
}
.lm-quote__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.lm-quote__total span {
  font-family: var(--lm-mono); font-size: .625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-quote__total b {
  font-family: var(--lm-mono); font-size: 1.5rem;
  color: var(--lm-lime); letter-spacing: -.02em;
}
.lm-quote__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  padding-top: .9rem; border-top: 1px solid var(--lm-border);
}
.lm-quote__meta > div { display: flex; flex-direction: column; gap: .25rem; }
.lm-quote__meta span {
  font-family: var(--lm-mono); font-size: .5625rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-quote__meta b { font-family: var(--lm-mono); font-size: .8125rem; font-weight: 500; }

/* Delivery split across warehouses. */
.lm-split { display: flex; flex-direction: column; gap: .6rem; }
.lm-split__bar {
  display: flex; height: 30px; border-radius: var(--lm-r-sm); overflow: hidden;
  border: 1px solid var(--lm-border);
}
.lm-split__seg {
  display: grid; place-items: center;
  font-family: var(--lm-mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--lm-obsidian);
}
.lm-split__seg--waw { background: var(--lm-lime); }
.lm-split__seg--ber { background: var(--lm-lime-dim); opacity: .62; }
.lm-split__legend {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  font-family: var(--lm-mono); font-size: .625rem; color: var(--lm-steel);
}
.lm-split__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.lm-split__dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.lm-split__dot--waw { background: var(--lm-lime); }
.lm-split__dot--ber { background: var(--lm-lime-dim); opacity: .62; }

/* ---- 04 sync ---- */
.lm-sync {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
  padding: 1.15rem; background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r);
}
.lm-sync__side { display: flex; flex-direction: column; gap: .35rem; text-align: center; }
.lm-sync__who {
  font-family: var(--lm-mono); font-size: .5625rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-sync__val { font-family: var(--lm-mono); font-size: 1.125rem; color: var(--lm-lime); }

/* Three dots travelling between the two panels: the channel, made visible. */
.lm-sync__link { display: flex; gap: .3rem; }
.lm-sync__link i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--lm-lime-dim);
  animation: lm-sync-pulse 1.6s ease-in-out infinite;
}
.lm-sync__link i:nth-child(2) { animation-delay: .18s; }
.lm-sync__link i:nth-child(3) { animation-delay: .36s; }
@keyframes lm-sync-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.lm-seq { display: flex; flex-direction: column; gap: .3rem; }
.lm-seq__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem .75rem; border-radius: var(--lm-r-sm);
  background: var(--lm-obsidian);
  font-family: var(--lm-mono); font-size: .75rem; color: var(--lm-steel);
}
.lm-seq__row b { color: var(--lm-ivory); font-weight: 500; }
.lm-seq__row.is-active {
  background: rgba(199, 255, 74, .08);
  color: var(--lm-lime);
}
.lm-seq__row.is-active b { color: var(--lm-lime); }

/* ---- 05 order ---- */
.lm-order {
  display: flex; flex-direction: column; gap: .9rem;
  padding: 1.15rem; background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r);
}
.lm-order__num {
  font-family: var(--lm-mono); font-size: 1.125rem; color: var(--lm-success);
}
.lm-order__rows { display: flex; flex-direction: column; gap: .5rem; }
.lm-order__rows > div {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem;
}
.lm-order__rows span { color: var(--lm-steel); }
.lm-order__rows b { font-family: var(--lm-mono); font-weight: 500; font-size: .75rem; }

.lm-credit { display: flex; flex-direction: column; gap: .6rem; }
.lm-credit__track {
  height: 8px; border-radius: 999px; background: var(--lm-obsidian); overflow: hidden;
}
.lm-credit__track > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--lm-warning), var(--lm-orange));
}
.lm-credit__row {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--lm-mono); font-size: .6875rem; color: var(--lm-steel);
}
.lm-credit__row b.is-over { color: var(--lm-orange); }
.lm-credit__row b.is-ok { color: var(--lm-success); }

@media (prefers-reduced-motion: reduce) {
  .lm-sync__link i { animation: none; opacity: .7; }
}

/* ==========================================================================
   Solutions
   ========================================================================== */

.lm-solutions {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1px;
  background: var(--lm-border);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
  overflow: hidden;
}
.lm-solution {
  background: var(--lm-obsidian);
  padding: clamp(1.5rem, 2.5vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: background var(--lm-t);
}
.lm-solution:hover { background: var(--lm-surface-1); }
.lm-solution--hero {
  background: linear-gradient(150deg, rgba(199,255,74,.055), transparent 55%), var(--lm-obsidian);
}
.lm-solution__title { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.lm-solution--hero .lm-solution__title { font-size: 1.75rem; }
.lm-solution__body { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--lm-steel); }
.lm-solution__spec {
  display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem;
  margin: auto 0 0; padding-top: 1.1rem; border-top: 1px solid var(--lm-border);
  font-family: var(--lm-mono); font-size: 0.75rem;
}
.lm-solution__spec dt { color: var(--lm-steel); letter-spacing: 0.06em; }
.lm-solution__spec dd { margin: 0; color: var(--lm-ivory); text-align: right; }
@media (max-width: 980px) { .lm-solutions { grid-template-columns: 1fr; } }

/* ==========================================================================
   Comparison
   ========================================================================== */

.lm-compare {
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
  overflow: hidden; background: var(--lm-surface-1);
}
.lm-compare__scroll { overflow-x: auto; }
.lm-compare table { width: 100%; min-width: 680px; border-collapse: collapse; }
.lm-compare th, .lm-compare td { padding: 1rem 1.25rem; text-align: left; font-size: 0.875rem; }
.lm-compare thead th {
  font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-steel);
  border-bottom: 1px solid var(--lm-border-hi); background: var(--lm-surface-2);
}
.lm-compare thead th:last-child { color: var(--lm-lime); }
.lm-compare tbody tr { border-bottom: 1px solid var(--lm-border); }
.lm-compare tbody tr:last-child { border-bottom: none; }
.lm-compare tbody th { font-weight: 500; color: var(--lm-ivory); font-family: var(--lm-sans); }
.lm-compare td { color: var(--lm-steel); vertical-align: top; line-height: 1.5; }
.lm-compare td:last-child { color: var(--lm-ivory); background: rgba(199,255,74,.03); }

/* ==========================================================================
   Pricing packages
   ========================================================================== */

.lm-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lm-package {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-lg);
  transition: border-color var(--lm-t), transform var(--lm-t);
}
.lm-package:hover { border-color: var(--lm-border-hi); transform: translateY(-2px); }
.lm-package--featured {
  border-color: var(--lm-lime);
  background: linear-gradient(165deg, rgba(199,255,74,.06), transparent 45%), var(--lm-surface-1);
}
.lm-package__name { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.lm-package__price {
  font-family: var(--lm-mono); font-size: 1.75rem; font-weight: 500;
  color: var(--lm-lime); letter-spacing: -0.02em; line-height: 1;
}
.lm-package__price small {
  display: block; font-size: 0.6875rem; color: var(--lm-steel);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.45rem; font-weight: 400;
}
.lm-package__desc { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--lm-steel); }
.lm-package__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.lm-package__list li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--lm-ivory);
}
.lm-package__list li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 7px; height: 7px; border: 1px solid var(--lm-lime);
  transform: rotate(45deg);
}
.lm-package__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--lm-border); }
.lm-package__foot .lm-btn { width: 100%; }
@media (max-width: 900px) { .lm-packages { grid-template-columns: 1fr; } }

/* ==========================================================================
   Marquee
   ========================================================================== */

.lm-marquee {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--lm-surface-1);
  border-bottom: 1px solid var(--lm-border);
  overflow: hidden; position: relative;
}
.lm-marquee::before, .lm-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.lm-marquee::before { left: 0;  background: linear-gradient(90deg,  var(--lm-surface-1), transparent); }
.lm-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--lm-surface-1), transparent); }
.lm-marquee__label {
  text-align: center; font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lm-steel);
  margin: 0 0 1.75rem;
}
.lm-marquee__track {
  display: flex; align-items: center; gap: 3.5rem;
  width: max-content;
  animation: lm-marquee 46s linear infinite;
}
.lm-marquee:hover .lm-marquee__track { animation-play-state: paused; }
@keyframes lm-marquee { to { transform: translateX(-50%); } }

.lm-logo {
  display: inline-flex; align-items: center; gap: 0.65rem;
  color: var(--lm-steel); opacity: 0.75;
  transition: opacity var(--lm-t), color var(--lm-t);
  white-space: nowrap;
}
.lm-logo:hover { opacity: 1; color: var(--lm-ivory); }
.lm-logo svg { width: 26px; height: 26px; flex: 0 0 26px; }
.lm-logo__name {
  font-family: var(--lm-display); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Architecture
   ========================================================================== */

.lm-arch {
  display: grid; grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
}
.lm-arch__layers { display: flex; flex-direction: column; gap: 0.5rem; }
.lm-arch__layer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r);
  transition: border-color var(--lm-t);
}
.lm-arch__layer:hover { border-color: var(--lm-lime); }
.lm-arch__layer-title { font-size: 0.9375rem; font-weight: 500; }
.lm-arch__layer-sub {
  font-family: var(--lm-mono); font-size: 0.6875rem;
  letter-spacing: 0.06em; color: var(--lm-steel); margin-top: 3px;
}
.lm-arch__layer-tag {
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.08em; color: var(--lm-lime-dim); white-space: nowrap;
}
.lm-arch__viz { width: 100%; height: auto; }
@media (max-width: 980px) { .lm-arch { grid-template-columns: 1fr; } }

/* ==========================================================================
   Deal Room
   ========================================================================== */

.lm-deal-room {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--lm-border);
  min-height: calc(100dvh - 190px);
}
.lm-deal-panel {
  background: var(--lm-obsidian);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.lm-deal-panel--full { grid-column: 1 / -1; }
.lm-deal-panel--sales { background: linear-gradient(180deg, rgba(199,255,74,.02), transparent 240px), var(--lm-obsidian); }

.lm-deal-panel__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--lm-surface-1);
  border-bottom: 1px solid var(--lm-border);
  position: sticky; top: 0; z-index: 3;
}
/* Rendered as an h2 for heading order; the display treatment stays a small
   mono label rather than inheriting the heading scale. */
.lm-deal-panel__role {
  margin: 0 0 0.2rem;
  font-family: var(--lm-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3;
}
.lm-deal-panel__role--buyer { color: var(--lm-orange); }
.lm-deal-panel__role--sales { color: var(--lm-lime); }
.lm-deal-panel__org { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.lm-deal-panel__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; }
.lm-deal-panel__hint { margin: 0; font-size: 0.8125rem; color: var(--lm-steel-dim); line-height: 1.5; font-style: italic; }

.lm-deal-panel__body {
  flex: 1; overflow-y: auto;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}

.lm-deal-lines {
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg); overflow: hidden;
}
.lm-deal-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 110px 118px;
  gap: 0.9rem; align-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--lm-surface-1);
  border-bottom: 1px solid var(--lm-border);
}
.lm-deal-line:last-child { border-bottom: none; }
.lm-deal-line__main { min-width: 0; }
.lm-deal-line__name { font-size: 0.875rem; font-weight: 500; line-height: 1.35; }
.lm-deal-line__sku {
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.06em; color: var(--lm-steel); margin-top: 3px;
}
.lm-deal-line__cell { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.lm-deal-line__cap {
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-steel-dim);
}
.lm-deal-line__val { font-family: var(--lm-mono); font-size: 0.875rem; }
.lm-deal-line__val--accent { color: var(--lm-lime); }
.lm-deal-line__val.is-flash { animation: lm-flash 700ms var(--lm-ease); }
@keyframes lm-flash {
  0%   { background: rgba(199,255,74,.28); color: var(--lm-obsidian); }
  100% { background: transparent; }
}

.lm-deal-line input {
  width: 100%;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border-hi);
  border-radius: var(--lm-r-sm);
  color: var(--lm-ivory);
  font-family: var(--lm-mono); font-size: 0.875rem;
  padding: 0.4rem 0.5rem; text-align: right;
  transition: border-color var(--lm-t);
}
.lm-deal-line input:hover { border-color: var(--lm-steel-dim); }
.lm-deal-line input:focus { border-color: var(--lm-lime); }
.lm-deal-line input.is-under-moq { border-color: var(--lm-orange); color: var(--lm-orange); }

.lm-deal-summary {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.35rem;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
}
.lm-deal-summary__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--lm-mono); font-size: 0.8125rem;
}
.lm-deal-summary__row .label { color: var(--lm-steel); letter-spacing: 0.06em; }
.lm-deal-summary__row .value { color: var(--lm-ivory); }
.lm-deal-summary__row--internal {
  padding: 0.5rem 0.7rem; margin: 0 -0.7rem;
  background: rgba(199,255,74,.05);
  border-left: 2px solid var(--lm-lime-dim);
  border-radius: var(--lm-r-sm);
}
.lm-deal-summary__row--total {
  margin-top: 0.35rem; padding-top: 0.8rem;
  border-top: 1px solid var(--lm-border-hi);
  font-size: 1.0625rem;
}
.lm-deal-summary__row--total .value { color: var(--lm-lime); font-weight: 500; }
.lm-deal-summary__unsaved {
  margin: 0.35rem 0 0; font-family: var(--lm-mono); font-size: 0.6875rem;
  color: var(--lm-warning); letter-spacing: 0.04em;
}

.lm-deal-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }

.lm-note-form {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.1rem;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border);
  border-left: 2px solid var(--lm-lime-dim);
  border-radius: var(--lm-r);
}
.lm-note-form__label {
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-note-form textarea {
  width: 100%; resize: vertical;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border-hi);
  border-radius: var(--lm-r-sm);
  color: var(--lm-ivory);
  font-family: var(--lm-sans); font-size: 0.8125rem; line-height: 1.5;
  padding: 0.6rem 0.7rem;
}
.lm-note-form textarea::placeholder { color: var(--lm-steel-dim); }
.lm-note-form textarea:focus { border-color: var(--lm-lime); outline: none; }
.lm-note-form button { align-self: flex-start; }

.lm-deal-history { display: flex; flex-direction: column; gap: 0.9rem; }

.lm-timeline {
  list-style: none; margin: 0; padding: 0 0 0 1.35rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  border-left: 1px solid var(--lm-border-hi);
}
.lm-timeline--compact { gap: 0.6rem; padding-left: 1.1rem; }
.lm-timeline__event { position: relative; }
.lm-timeline__event::before {
  content: ""; position: absolute;
  left: -1.35rem; top: 0.35rem;
  transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lm-steel-dim);
  outline: 3px solid var(--lm-obsidian);
}
.lm-timeline--compact .lm-timeline__event::before { left: -1.1rem; }
.lm-timeline__event--submit::before  { background: var(--lm-orange); }
.lm-timeline__event--review::before  { background: var(--lm-warning); }
.lm-timeline__event--quote::before   { background: var(--lm-lime); }
.lm-timeline__event--counter::before { background: var(--lm-warning); }
.lm-timeline__event--accept::before  { background: var(--lm-success); box-shadow: 0 0 0 3px rgba(43,213,118,.22); }
.lm-timeline__event--reject::before  { background: var(--lm-orange); }
.lm-timeline__event--note::before    { background: var(--lm-lime-dim); }

.lm-timeline__meta {
  display: flex; gap: 0.6rem; align-items: center;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-timeline__flag {
  padding: 0.1rem 0.4rem; border-radius: var(--lm-r-sm);
  background: rgba(199,255,74,.1); color: var(--lm-lime-dim);
  letter-spacing: 0.08em;
}
.lm-timeline__msg { margin: 0.2rem 0 0; font-size: 0.8125rem; line-height: 1.5; }

@media (max-width: 1080px) {
  .lm-deal-room { grid-template-columns: 1fr; }
  .lm-deal-panel__head { position: static; }
}
@media (max-width: 620px) {
  .lm-deal-line { grid-template-columns: 1fr 1fr; row-gap: 0.75rem; }
  .lm-deal-line__main { grid-column: 1 / -1; }
}

/* Configuration string carried from the 3D configurator into the quotation. */
.lm-deal-line__config {
  font-family: var(--lm-mono); font-size: 0.625rem;
  color: var(--lm-lime-dim); letter-spacing: 0.04em; margin-top: 3px;
}

.lm-deal-line__drop {
  margin-top: 0.35rem; padding: 0.2rem 0.45rem;
  background: transparent;
  border: 1px solid var(--lm-border-hi); border-radius: var(--lm-r-sm);
  color: var(--lm-steel);
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: color var(--lm-t), border-color var(--lm-t);
}
.lm-deal-line__drop:hover { color: var(--lm-orange); border-color: var(--lm-orange); }

/* Add a catalog product to the working quotation. */
.lm-deal-addline {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem;
  background: var(--lm-surface-1);
  border: 1px dashed var(--lm-border-hi);
  border-radius: var(--lm-r);
}
.lm-deal-addline__label {
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-deal-addline__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px auto; gap: 0.4rem;
}
.lm-deal-addline select,
.lm-deal-addline input {
  min-height: 40px;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border-hi); border-radius: var(--lm-r-sm);
  color: var(--lm-ivory);
  font-family: var(--lm-sans); font-size: 0.8125rem;
  padding: 0.45rem 0.55rem;
}
.lm-deal-addline input { font-family: var(--lm-mono); text-align: right; }
.lm-deal-addline select:focus,
.lm-deal-addline input:focus { border-color: var(--lm-lime); outline: none; }

@media (max-width: 620px) {
  .lm-deal-addline__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Portal
   ========================================================================== */

.lm-portal {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.75rem;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--lm-gutter);
  align-items: start;
}
.lm-portal__side {
  position: sticky; top: 1.5rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.35rem;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
}
.lm-portal__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.lm-portal__nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  color: var(--lm-ivory); text-decoration: none; font-size: 0.875rem;
  border: 1px solid transparent; border-radius: var(--lm-r);
  transition: background var(--lm-t), border-color var(--lm-t), color var(--lm-t);
}
.lm-portal__nav a:hover { background: var(--lm-obsidian); border-color: var(--lm-border); }
.lm-portal__nav a[aria-current="page"] {
  background: var(--lm-obsidian); border-color: var(--lm-lime); color: var(--lm-lime);
}
.lm-portal__nav .n { font-family: var(--lm-mono); font-size: 0.625rem; color: var(--lm-steel); }

.lm-portal__main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.lm-portal__body { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

/* Page-level heading for the gated dashboards. Both used to open straight
   into h2 cards, leaving a screen reader with nothing naming the view. */
.lm-portal__header { display: flex; flex-direction: column; gap: 0.4rem; }
.lm-portal__header h1 {
  margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.875rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
}
.lm-portal__header p {
  margin: 0; font-size: 0.875rem; line-height: 1.55;
  color: var(--lm-steel); max-width: 62ch;
}
.lm-portal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* Column-count modifiers. These exist so page content never has to inline a
   grid-template-columns: an inline style cannot answer a media query, and a
   four-column grid that keeps four columns at 375px collapses into unreadable
   65px slivers and pushes the document sideways. */
.lm-portal__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lm-portal__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .lm-portal__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lm-portal__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lm-portal__grid--3,
  .lm-portal__grid--4 { grid-template-columns: 1fr; }
}

.lm-portal__card {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.25rem, 2.2vw, 1.65rem);
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
  min-width: 0;
}
.lm-portal__card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
}
.lm-portal__card-head h2 { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }

.lm-bignum {
  margin: 0 0 0.85rem;
  font-family: var(--lm-mono); font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--lm-ivory);
}
.lm-bignum__of {
  display: block; margin-top: 0.5rem;
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lm-steel);
}

.lm-meter { height: 6px; border-radius: 999px; background: var(--lm-obsidian); overflow: hidden; }
.lm-meter__fill { display: block; height: 100%; border-radius: inherit; transition: width 900ms var(--lm-ease); }
.lm-meter__fill--success { background: var(--lm-success); }
.lm-meter__fill--warning { background: var(--lm-warning); }
.lm-meter__fill--orange  { background: var(--lm-orange); }

.lm-microstats, .lm-statgrid {
  display: grid; gap: 0.9rem 1.25rem; margin: 0;
  font-family: var(--lm-mono);
}
.lm-microstats { grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
.lm-statgrid   { grid-template-columns: repeat(2, 1fr); }
.lm-microstats dt, .lm-statgrid dt {
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lm-steel); margin-bottom: 0.3rem;
}
.lm-microstats dd { margin: 0; font-size: 0.8125rem; color: var(--lm-ivory); }
.lm-statgrid dd   { margin: 0; font-size: 1.375rem; color: var(--lm-ivory); letter-spacing: -0.02em; }

.lm-rfq-list { display: flex; flex-direction: column; gap: 0.4rem; }
.lm-rfq-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 62px 118px 118px;
  gap: 1rem; align-items: center;
  padding: 0.8rem 1rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r);
  text-decoration: none; color: inherit;
  transition: border-color var(--lm-t), background var(--lm-t);
}
.lm-rfq-row:hover { border-color: var(--lm-lime); background: var(--lm-surface-2); }
.lm-rfq-row__num  { font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-lime); }
.lm-rfq-row__name { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-rfq-row__date { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-steel); }
.lm-rfq-row__total{ font-family: var(--lm-mono); font-size: 0.8125rem; text-align: right; }
.lm-rfq-row__status { text-align: right; }

.lm-wh-list, .lm-ledger { display: flex; flex-direction: column; }
.lm-wh-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 56px auto;
  gap: 1rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid var(--lm-border);
}
.lm-wh-row:last-child { border-bottom: none; }
.lm-wh-row__name { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-wh-row__code {
  font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-lime);
  border: 1px solid var(--lm-border-hi); border-radius: var(--lm-r-sm);
  padding: 0.15rem 0.35rem; text-align: center;
}
.lm-wh-row__city { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-steel); text-align: right; }

.lm-ledger__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 110px;
  gap: 1rem; align-items: center;
  padding: 0.7rem 0; border-bottom: 1px solid var(--lm-border);
  font-size: 0.8125rem;
}
.lm-ledger__row:last-child { border-bottom: none; }
.lm-ledger__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-ledger__date { font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-steel); }
.lm-ledger__amt  { font-family: var(--lm-mono); text-align: right; }
.lm-ledger__amt--debit  { color: var(--lm-orange); }
.lm-ledger__amt--credit { color: var(--lm-success); }

@media (max-width: 980px) {
  .lm-portal { grid-template-columns: 1fr; }
  .lm-portal__side { position: static; }
  .lm-portal__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .lm-rfq-row { grid-template-columns: 1fr auto; row-gap: 0.5rem; }
  .lm-rfq-row__name { grid-column: 1 / -1; }
  .lm-rfq-row__date { display: none; }
}

/* Sales desk: quotations grouped by the company they belong to. */
.lm-desk-group { margin-bottom: 1.25rem; }
.lm-desk-group:last-child { margin-bottom: 0; }
.lm-desk-group__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--lm-border); margin-bottom: 0.5rem;
}
.lm-desk-group__name { font-size: 0.875rem; font-weight: 600; color: var(--lm-ivory); }
.lm-desk-group__meta {
  font-family: var(--lm-mono); font-size: 0.6875rem;
  color: var(--lm-steel); letter-spacing: 0.04em; white-space: nowrap;
}

/* Notification log. Nothing is sent in demo mode; this is the receipt. */
.lm-notes { display: flex; flex-direction: column; }
.lm-note {
  padding: 0.7rem 0; border-bottom: 1px solid var(--lm-border);
}
.lm-note:last-child { border-bottom: none; }
.lm-note__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.08em; color: var(--lm-steel);
}
.lm-note__to { color: var(--lm-lime-dim); }
.lm-note__subject {
  margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--lm-ivory);
}

/* ==========================================================================
   Catalog
   ========================================================================== */

.lm-catalog { padding: clamp(1.5rem, 3vw, 2.5rem) var(--lm-gutter); }
.lm-catalog__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; margin-bottom: 1.75rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--lm-border);
}
.lm-catalog__note {
  margin: 0; font-family: var(--lm-mono); font-size: 0.6875rem;
  color: var(--lm-steel); letter-spacing: 0.04em; max-width: 46ch; line-height: 1.6;
}

.lm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lm-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border);
  border-radius: 999px;
  color: var(--lm-ivory);
  font-family: var(--lm-sans); font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--lm-t), border-color var(--lm-t), color var(--lm-t);
}
.lm-chip:hover { border-color: var(--lm-border-hi); }
.lm-chip__n { font-family: var(--lm-mono); font-size: 0.625rem; color: var(--lm-steel); }
.lm-chip[aria-pressed="true"] { background: var(--lm-lime); border-color: var(--lm-lime); color: #12140F; }
.lm-chip[aria-pressed="true"] .lm-chip__n { color: rgba(18,20,15,.62); }

/* Catalog search and sort. */
.lm-catalog__tools {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
.lm-search { position: relative; display: flex; align-items: center; }
.lm-search input {
  min-width: 240px; min-height: 40px;
  padding: 0.5rem 2.2rem 0.5rem 0.85rem;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: 999px;
  color: var(--lm-ivory);
  font-family: var(--lm-sans); font-size: 0.8125rem;
}
.lm-search input::placeholder { color: var(--lm-steel); }
.lm-search input:focus { border-color: var(--lm-lime); outline: none; }
.lm-search input::-webkit-search-cancel-button { display: none; }
.lm-search button {
  position: absolute; right: 0.5rem;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--lm-border); border: none; border-radius: 50%;
  color: var(--lm-ivory);
  font-family: var(--lm-mono); font-size: 0.6875rem; cursor: pointer;
}
.lm-search button:hover { background: var(--lm-orange); color: #12140F; }

.lm-sort select {
  min-height: 40px; padding: 0.5rem 0.75rem;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: 999px;
  color: var(--lm-ivory);
  font-family: var(--lm-sans); font-size: 0.8125rem;
  cursor: pointer;
}
.lm-sort select:focus { border-color: var(--lm-lime); outline: none; }

@media (max-width: 700px) {
  .lm-catalog__tools { width: 100%; }
  .lm-search { flex: 1; }
  .lm-search input { min-width: 0; width: 100%; }
}

.lm-catalog__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1.25rem;
}
.lm-product {
  display: flex; flex-direction: column;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
  overflow: hidden;
  transition: transform var(--lm-t), border-color var(--lm-t);
}
.lm-product:hover { transform: translateY(-3px); border-color: var(--lm-border-hi); }
.lm-product__visual {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  color: var(--lm-lime);
  background:
    radial-gradient(circle at 50% 42%, rgba(199,255,74,.1), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 26px),
    var(--lm-obsidian);
  border-bottom: 1px solid var(--lm-border);
}
.lm-product__visual svg { width: 52%; height: auto; opacity: 0.85; }
.lm-product__badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  padding: 0.22rem 0.5rem;
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--lm-r-sm);
  background: rgba(242,99,58,.14); color: var(--lm-orange);
  border: 1px solid rgba(242,99,58,.3);
}
.lm-product__badge--cfg {
  left: auto; right: 0.7rem;
  background: rgba(199,255,74,.12); color: var(--lm-lime);
  border-color: rgba(199,255,74,.3);
}
/* Rendered fixtures replace the drawn glyphs. They fade in as the render farm
   produces them, so a first visit fills the grid rather than blinking. */
.lm-product__render {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.04);
  transition: opacity 520ms var(--lm-ease), transform 700ms var(--lm-ease);
}
.lm-product__render.is-in { opacity: 1; transform: none; }

.lm-product:hover .lm-product__render { transform: scale(1.03); }
.lm-product__rendered {
  position: absolute; bottom: 0.7rem; right: 0.7rem;
  padding: 0.2rem 0.45rem;
  background: rgba(199, 255, 74, .14); color: var(--lm-lime);
  border: 1px solid rgba(199, 255, 74, .3); border-radius: var(--lm-r-sm);
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.lm-product__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.15rem; flex: 1; }
.lm-product__cat {
  margin: 0; font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-product__name { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.lm-product__sku { margin: 0; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-steel-dim); }

.lm-product__tiers {
  display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem;
}
.lm-product__tiers span {
  font-family: var(--lm-mono); font-size: 0.625rem;
  padding: 0.2rem 0.4rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-sm);
  color: var(--lm-steel);
}
.lm-product__tiers b { color: var(--lm-lime); font-weight: 500; }

.lm-product__foot {
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid var(--lm-border);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem;
}
.lm-product__price { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.lm-product__price-label {
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-product__price-value { font-family: var(--lm-mono); font-size: 1rem; color: var(--lm-lime); }
.lm-product__price-value--locked { font-size: 0.75rem; color: var(--lm-steel); }
.lm-product__price-value--rfq { color: var(--lm-orange); }
.lm-product__stock {
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.06em; white-space: nowrap;
}
.lm-product__stock.is-in  { color: var(--lm-success); }
.lm-product__stock.is-out { color: var(--lm-steel); }

/* ==========================================================================
   Configurator
   ========================================================================== */

.lm-cfg {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  min-height: 620px;
  background: var(--lm-surface-1);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-lg);
  overflow: hidden;
}
.lm-cfg__canvas {
  position: relative; min-width: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(199,255,74,.045), transparent 70%),
    var(--lm-obsidian);
  display: grid; place-items: center;
}
.lm-cfg__canvas canvas { display: block; width: 100%; height: 100%; }
.lm-cfg__hint {
  position: absolute; bottom: 1rem; left: 1rem;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lm-steel-dim); pointer-events: none; z-index: 2;
}
.lm-cfg__loading { display: grid; place-items: center; gap: 1rem; color: var(--lm-steel); }
.lm-cfg__loading p { margin: 0; font-family: var(--lm-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.lm-cfg__loading-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--lm-border-hi);
  border-top-color: var(--lm-lime);
  animation: lm-spin 900ms linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }

.lm-cfg__panel {
  display: flex; flex-direction: column; gap: 1.35rem;
  padding: 1.5rem;
  background: var(--lm-surface-2);
  border-left: 1px solid var(--lm-border);
  overflow-y: auto;
}
.lm-cfg__panel-head { display: flex; flex-direction: column; gap: 0.4rem; }
.lm-cfg__panel-head h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.lm-cfg__panel-head p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--lm-steel); }

.lm-cfg__group { display: flex; flex-direction: column; gap: 0.6rem; }
.lm-cfg__group-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-cfg__group-label .value { color: var(--lm-lime); text-transform: none; letter-spacing: 0.04em; }

.lm-cfg__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.lm-cfg__opt {
  padding: 0.6rem 0.4rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-sm);
  color: var(--lm-ivory);
  font-family: var(--lm-mono); font-size: 0.6875rem; letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--lm-t), border-color var(--lm-t), color var(--lm-t);
}
.lm-cfg__opt:hover { border-color: var(--lm-border-hi); }
.lm-cfg__opt[aria-pressed="true"] { background: var(--lm-lime); border-color: var(--lm-lime); color: #12140F; }

.lm-cfg__opts--swatch { grid-template-columns: repeat(6, 1fr); gap: 0.45rem; }
.lm-cfg__swatch {
  aspect-ratio: 1; padding: 0;
  border: 1px solid var(--lm-border-hi);
  border-radius: var(--lm-r-sm);
  cursor: pointer;
  transition: transform var(--lm-t), box-shadow var(--lm-t);
}
.lm-cfg__swatch:hover { transform: scale(1.08); }
.lm-cfg__swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--lm-surface-2), 0 0 0 3px var(--lm-lime);
}

.lm-cfg__sku {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding-top: 1.1rem; border-top: 1px solid var(--lm-border);
}
.lm-cfg__sku-code {
  font-family: var(--lm-mono); font-size: 0.8125rem;
  color: var(--lm-ivory); letter-spacing: 0.03em; word-break: break-all;
}
.lm-cfg__sku-msg { font-family: var(--lm-mono); font-size: 0.625rem; color: var(--lm-steel); line-height: 1.6; }

.lm-cfg__cta { margin-top: auto; }

/* Quantity stepper and the live contract price inside the configurator. */
.lm-cfg__qty {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.35rem;
}
.lm-cfg__qty-btn {
  min-width: 44px; padding: 0.55rem 0.5rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border); border-radius: var(--lm-r-sm);
  color: var(--lm-ivory);
  font-family: var(--lm-mono); font-size: 0.75rem;
  cursor: pointer; transition: border-color var(--lm-t), color var(--lm-t);
}
.lm-cfg__qty-btn:hover { border-color: var(--lm-lime); color: var(--lm-lime); }
.lm-cfg__qty-input {
  width: 100%; min-height: 44px;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border-hi); border-radius: var(--lm-r-sm);
  color: var(--lm-ivory);
  font-family: var(--lm-mono); font-size: 0.9375rem;
  text-align: center; padding: 0.4rem;
}
.lm-cfg__qty-input:focus { border-color: var(--lm-lime); outline: none; }

.lm-cfg__moq {
  margin: 0; font-family: var(--lm-mono); font-size: 0.625rem;
  color: var(--lm-warning); letter-spacing: 0.04em;
}

.lm-cfg__price {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.9rem 1rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border);
  border-left: 2px solid var(--lm-lime);
  border-radius: var(--lm-r);
}
.lm-cfg__price-label {
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-cfg__price-value {
  font-family: var(--lm-mono); font-size: 1.375rem;
  color: var(--lm-lime); letter-spacing: -0.02em; line-height: 1.1;
}
.lm-cfg__price-value--locked { font-size: 0.875rem; color: var(--lm-steel); }
.lm-cfg__price-total {
  font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-steel);
}
.lm-cfg__price-total b { color: var(--lm-ivory); font-weight: 500; }

/* Dimension overlay drawn on top of the WebGL canvas. */
.lm-cfg__dims {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity 320ms var(--lm-ease);
}
.lm-cfg__dims.is-on { opacity: 1; }
.lm-cfg__dims line, .lm-cfg__dims path { stroke: rgba(199,255,74,.55); stroke-width: 1; }
.lm-cfg__dims text {
  fill: var(--lm-lime); font-family: var(--lm-mono); font-size: 10px; letter-spacing: 0.08em;
}
.lm-cfg__toggle {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  padding: 0.4rem 0.7rem;
  background: rgba(14,16,13,.82);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lm-border-hi); border-radius: var(--lm-r-sm);
  color: var(--lm-steel);
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  transition: color var(--lm-t), border-color var(--lm-t);
}
.lm-cfg__toggle[aria-pressed="true"] { color: var(--lm-lime); border-color: var(--lm-lime); }

@media (max-width: 980px) {
  .lm-cfg { grid-template-columns: 1fr; min-height: auto; }
  .lm-cfg__canvas { min-height: 360px; }
  .lm-cfg__panel { border-left: none; border-top: 1px solid var(--lm-border); }
}

/* ==========================================================================
   Persona switcher
   ========================================================================== */

.lm-personas {
  position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 9998;
  width: 272px;
  background: var(--lm-surface-2);
  border: 1px solid var(--lm-border-hi);
  border-radius: var(--lm-r-lg);
  box-shadow: 0 20px 48px rgba(0,0,0,.55);
  overflow: hidden;
}
.lm-personas__toggle {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.75rem 0.9rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--lm-ivory);
  font-family: var(--lm-sans); font-size: 0.8125rem; text-align: left;
}
.lm-personas__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: var(--lm-lime);
  animation: lm-beacon 2s ease-in-out infinite;
}
.lm-personas__toggle-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-personas__chevron {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 1.5px solid var(--lm-steel);
  border-bottom: 1.5px solid var(--lm-steel);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--lm-t);
}
.lm-personas.is-collapsed .lm-personas__chevron { transform: rotate(-135deg) translateY(-2px); }

.lm-personas__panel {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--lm-border);
  max-height: 420px; overflow: hidden;
  transition: max-height 320ms var(--lm-ease), opacity 240ms var(--lm-ease), padding 320ms var(--lm-ease);
}
.lm-personas.is-collapsed .lm-personas__panel {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent;
}
.lm-personas__title {
  margin: 0.75rem 0 0;
  font-family: var(--lm-mono); font-size: 0.5625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-personas__list { display: flex; flex-direction: column; gap: 0.3rem; }
.lm-personas__btn {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r);
  color: var(--lm-ivory);
  cursor: pointer; text-align: left;
  font-family: var(--lm-sans);
  transition: border-color var(--lm-t), background var(--lm-t);
}
.lm-personas__btn:hover { border-color: var(--lm-border-hi); }
.lm-personas__btn[aria-current="true"] { border-color: var(--lm-lime); background: rgba(199,255,74,.06); }
.lm-personas__btn.is-busy { opacity: 0.6; cursor: progress; }
.lm-personas__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lm-personas__name { font-size: 0.8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-personas__role { font-family: var(--lm-mono); font-size: 0.5625rem; letter-spacing: 0.08em; color: var(--lm-steel); }

/* While a switch is in flight the panel dims, so the click has an answer
   even before the page comes back. */
.lm-personas.is-switching { pointer-events: none; }
.lm-personas.is-switching .lm-personas__list { opacity: 0.45; }
.lm-personas__btn.is-busy {
  border-color: var(--lm-lime);
  background: rgba(199, 255, 74, .08);
}
.lm-toast--steel { border-left-color: var(--lm-steel); }

.lm-personas__reset {
  padding: 0.5rem;
  background: transparent;
  border: 1px dashed var(--lm-border-hi); border-radius: var(--lm-r);
  color: var(--lm-steel);
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.08em; cursor: pointer;
  transition: color var(--lm-t), border-color var(--lm-t);
}
.lm-personas__reset:hover { color: var(--lm-orange); border-color: var(--lm-orange); }

@media (max-width: 520px) {
  .lm-personas { left: 1.1rem; right: 1.1rem; width: auto; }
}

/* ==========================================================================
   Auto demo
   ========================================================================== */

.lm-autodemo {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 9997; width: min(560px, calc(100vw - 2rem));
  background: rgba(21,23,15,.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--lm-border-hi);
  border-radius: var(--lm-r-lg);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  overflow: hidden;
  transition: opacity 300ms var(--lm-ease), transform 300ms var(--lm-ease);
}
.lm-autodemo.is-out { opacity: 0; transform: translateX(-50%) translateY(-10px); }
.lm-autodemo__bar { height: 2px; background: var(--lm-border); }
.lm-autodemo__bar-fill { display: block; height: 100%; width: 0; background: var(--lm-lime); transition: width 600ms linear; }
.lm-autodemo__row { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; }
.lm-autodemo__step {
  font-family: var(--lm-mono); font-size: 0.75rem; font-weight: 500;
  color: var(--lm-lime); letter-spacing: 0.06em; flex: 0 0 auto;
}
.lm-autodemo__text { margin: 0; flex: 1; font-size: 0.8125rem; line-height: 1.45; }
.lm-autodemo__stop {
  flex: 0 0 auto; padding: 0.4rem 0.7rem;
  background: var(--lm-obsidian);
  border: 1px solid var(--lm-border-hi); border-radius: var(--lm-r-sm);
  color: var(--lm-steel);
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; cursor: pointer;
  transition: color var(--lm-t), border-color var(--lm-t);
}
.lm-autodemo__stop:hover { color: var(--lm-orange); border-color: var(--lm-orange); }

/* ==========================================================================
   Agencies CTA / footer / 404
   ========================================================================== */

.lm-agencies {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(3rem, 6vw, 5rem) var(--lm-gutter);
  border-bottom: 1px solid var(--lm-border);
  background:
    radial-gradient(ellipse 55% 60% at 18% 25%, rgba(199,255,74,.08), transparent 70%),
    radial-gradient(ellipse 50% 55% at 85% 80%, rgba(242,99,58,.05), transparent 70%),
    var(--lm-obsidian);
}
.lm-agencies__pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem; margin-bottom: 1.4rem;
  border: 1px solid var(--lm-border-hi); border-radius: 999px;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-lime);
}
.lm-agencies__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lm-lime); }
.lm-agencies__title {
  margin: 0 0 1.25rem;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance;
}
.lm-agencies__title em { font-style: normal; color: var(--lm-lime); }
.lm-agencies__body { margin: 0 0 1.85rem; font-size: 1rem; line-height: 1.6; color: var(--lm-steel); max-width: 58ch; }
.lm-agencies__side {
  display: flex; flex-direction: column; gap: 1.1rem; margin: 0;
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  border-left: 1px solid var(--lm-border);
}
.lm-agencies__side dt {
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-steel); margin-bottom: 0.3rem;
}
.lm-agencies__side dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 900px) {
  .lm-agencies { grid-template-columns: 1fr; }
  .lm-agencies__side { border-left: none; border-top: 1px solid var(--lm-border); padding-left: 0; padding-top: 1.75rem; }
}

.lm-footer {
  padding: clamp(2.5rem, 5vw, 4rem) var(--lm-gutter) 2rem;
  background: var(--lm-surface-1);
  border-top: 1px solid var(--lm-border);
}
.lm-footer__grid {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--lm-border);
}
.lm-footer__brand-name {
  margin: 0 0 0.6rem;
  font-family: var(--lm-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--lm-lime);
}
.lm-footer__brand-desc { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--lm-steel); max-width: 34ch; }
.lm-footer__col h3 {
  margin: 0 0 0.9rem;
  font-family: var(--lm-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-steel);
}
.lm-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lm-footer__col a, .lm-footer__col li {
  color: var(--lm-ivory); text-decoration: none; font-size: 0.8125rem;
  transition: color var(--lm-t);
}
.lm-footer__col a:hover { color: var(--lm-lime); }
.lm-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; flex-wrap: wrap; padding-top: 1.5rem;
  font-family: var(--lm-mono); font-size: 0.625rem;
  letter-spacing: 0.06em; color: var(--lm-steel-dim); line-height: 1.6;
}
.lm-footer__bottom a { color: var(--lm-lime-dim); text-decoration: none; }
@media (max-width: 900px) { .lm-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lm-footer__grid { grid-template-columns: 1fr; } }

.lm-404 {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1.25rem; min-height: 60dvh;
  padding: clamp(3rem, 8vw, 6rem) var(--lm-gutter);
}
.lm-404__code {
  font-family: var(--lm-mono); font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 500; line-height: 0.9; letter-spacing: -0.05em;
  color: var(--lm-surface-3);
}
.lm-404__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; }
.lm-404__msg { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--lm-steel); max-width: 52ch; }
.lm-404__links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.75rem; }

/* The brand link is the first thing a keyboard user lands on; give it a real
   hit area rather than the bare height of its text. */
.lm-header .wp-block-site-title a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}

/* ==========================================================================
   Touch targets
   WCAG 2.5.8 asks for 24x24 CSS px minimum; on a phone that is still a fiddly
   target, so interactive elements get real vertical room below 768px. The
   footer link list and the block theme's menu toggle were the two places that
   failed: 16px tall links and a 24px button.
   ========================================================================== */

@media (pointer: coarse), (max-width: 768px) {
  .lm-footer__col a,
  .lm-footer__col li,
  .lm-portal__nav a,
  .lm-accountbar__crumbs a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .lm-footer__col ul { gap: 0; }

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .lm-chip { min-height: 40px; }

  .lm-btn { min-height: 44px; }
  .lm-btn-sm { min-height: 40px; }

  .lm-personas__btn { min-height: 48px; }
  .lm-personas__reset { min-height: 40px; }

  /* A tap target that sits flush against the next one is easy to mis-hit. */
  .lm-catalog__chips .lm-chip + .lm-chip { margin-left: 2px; }
}

/* The block theme's skip link collapses to 1x1 until focused, which is the
   intended pattern. Core's own .screen-reader-text:focus rule matches at the
   same specificity and can win on load order, so we qualify with both classes
   to make sure the link actually becomes visible when a keyboard reaches it. */
a.skip-link:focus,
a.skip-link:focus-visible,
a.skip-link.screen-reader-text:focus,
a.skip-link.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  margin: 0 !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  z-index: 100000;
  padding: 0.85rem 1.4rem;
  background: var(--lm-lime);
  color: #12140F;
  font-family: var(--lm-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--lm-r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   Reveal + reduced motion
   ========================================================================== */

/* Content is visible by default. The entrance animation is opt-in: the root
   only gets .lm-anim once JS has confirmed IntersectionObserver actually
   fires. Without that guard a throttled or unsupported observer would leave
   the entire page sitting at opacity 0, which is how a hidden tab, a print
   job or an old browser ends up rendering a blank document. */
.lm-anim [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--lm-ease), transform 700ms var(--lm-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.lm-anim [data-reveal].is-revealed {
  opacity: 1; transform: none; will-change: auto;
}
.lm-anim [data-reveal="fade"] { transform: none; }

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lm-personas, .lm-autodemo, .lm-toasts, .lumora-demo-badge { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lm-anim [data-reveal] { opacity: 1; transform: none; }
  .lm-marquee__track { animation: none; transform: none; }
}

/* Plakat oprawy.
   Render z Cyclesa tego samego modelu, ktory za chwile wejdzie w WebGL.
   Pokazuje sie razem z tekstem, wiec hero nigdy nie jest puste, a scena
   przenika przez niego dopiero gdy naprawde jest gotowa. Nie ma tu zadnego
   sztucznego opoznienia: klasa is-live pada po pierwszej narysowanej klatce. */
.lm-hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: 1; transition: opacity .55s ease;
  pointer-events: none;
}
/* Plakat zawsze widoczny - scena WebGL zdjeta z hero. */



@media (prefers-reduced-motion: reduce) {
  .lm-hero__poster,
  .lm-hero__scene canvas { transition: none; }
}

/* Baner nad portalem.
   Uzywany w dwoch sytuacjach: kiedy odwiedzajacy oglada przyklad pokazowy
   i kiedy handlowiec oglada portal swojego klienta. W obu chodzi o to samo,
   zeby nikt nie wzial tego widoku za wlasne dane. */
.lm-sample { display: flex; flex-direction: column; gap: 1.25rem; }
.lm-sample__note {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1.1rem;
  border: 1px dashed var(--lm-border);
  border-radius: var(--lm-r);
  background: rgba(255, 255, 255, .015);
}
.lm-sample__note p { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--lm-steel); }
.lm-sample__note b { color: var(--lm-ivory); font-weight: 500; }
.lm-sample__note .lm-badge { flex-shrink: 0; margin-top: .1rem; }
.lm-sample__note--staff {
  border-style: solid;
  border-color: var(--lm-lime-dim);
  background: rgba(199, 255, 74, .05);
  margin-bottom: 1.25rem;
}
.lm-sample .lm-portal__card { opacity: .82; }

@media (max-width: 640px) {
  .lm-sample__note { flex-direction: column; gap: .55rem; }
}

/* Interaktywny podglad 3D w karcie katalogu.
   Canvas wypelnia kontener wizualny, kursor sygnalizuje ze mozna chwycic. */
.lm-product__visual { position: relative; cursor: grab; }
.lm-product__visual:active { cursor: grabbing; }
.lm-product__canvas {
  display: block;
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}