/* ============================================================================
   LimaxLock — brand tokens + site chrome + homepage sections
   Source of truth: documents/theme.md. Brand ramp is named --brand-* (not teal-*)
   so components stay portable across Limax products (§10).
   ========================================================================== */

:root {
  /* Brand — teal */
  --brand-50:  #EFF9FC;
  --brand-100: #D3EDF5;
  --brand-300: #8FCEE2;
  --brand-500: #2FA3C9;
  --brand-600: #0F7CA3;  /* primary */
  --brand-700: #0B5F80;  /* hover   */
  --brand-800: #0A4A63;

  /* Dark register — harbor ink */
  --ink-900: #002D3F;
  --ink-800: #0A3648;

  /* Neutrals — slate (shared with LimaxPay) */
  --slate-900: #0F172A;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* Neutral text on ink backgrounds (hero, CTA, footer) — off-white / light
     gray from the slate scale, no teal tint. Teal stays interactive-only,
     headings stay pure white, and brightening to #fff is the hover/active cue. */
  --ink-text:       var(--slate-200);  /* #E2E8F0 — body copy, links, descriptions */
  --ink-text-muted: var(--slate-300);  /* #CBD5E1 — secondary meta, fine print, icons */

  /* Logo red — brand accent ONLY, taken from the LimaxLock wordmark.
     Permitted: security/lock/enforcement cues, notification badges, status
     indicators, the active nav underline, tiny decorative marks, and the rare
     key metric. Never: buttons, links, nav text, headings, body copy, card or
     section backgrounds. Teal stays the interactive colour. Target weighting is
     roughly 75% white / 18% slate / 5% teal / 2% red. */
  --logo-red: #E01A28;

  /* Semantic / status */
  --danger:      #DC2626;  --danger-bg:  #FEF2F2;  --danger-text:  #791F1F;
  --success:     #059669;  --success-bg: #ECFDF5;  --success-text: #065F46;
  --warning:     #D97706;  --warning-bg: #FFFBEB;  --warning-text: #78350F;

  /* Effects */
  --shadow-sm: 0 1px 3px  rgba(6, 42, 58, 0.08);
  --shadow-md: 0 4px 16px rgba(6, 42, 58, 0.10);
  --shadow-lg: 0 12px 30px rgba(6, 42, 58, 0.12);
  --shadow-xl: 0 20px 48px rgba(6, 42, 58, 0.14);
  --radius-control: 8px;
  --radius-card: 12px;

  /* Shared page shell — the ONE content width the header, hero and every
     section read, so they always line up. This is the whole site's single grid:
     the header, the homepage sections, the solution-page sections, the mid-page
     security band, the FAQ, the CTA, the footer and the hero all resolve to this
     width, so their left and right edges land on the same vertical line and the
     content block sits centered with equal gutters at every viewport. Held at
     1280px on laptops and widened in two steps on large desktops (see the
     min-width block below the container primitive). Side padding steps up off
     mobile (below) so the gutter stays generous without crowding the edge.
     Driving all of this off variables means a breakpoint change moves the
     navbar, every section and the hero visual together, with no per-element
     margins to keep in sync. */
  --ll-shell: 1280px;       /* header + section container max-width */
  --ll-shell-pad: 24px;     /* container horizontal padding (-> 32px >= 768px) */
  --ll-hero-visual: 1120px; /* console image cap (sits inside the shell) */

  --ll-font-heading: var(--font-jakarta, 'Plus Jakarta Sans'), sans-serif;
  --ll-font-body: var(--font-manrope, 'Manrope'), sans-serif;
  --ll-font-ui: var(--font-inter, 'Inter'), sans-serif;
}

/* ── Layout primitives ──────────────────────────────────────────────────── */

.ll-container {
  max-width: var(--ll-shell);
  margin: 0 auto;
  padding: 0 var(--ll-shell-pad);
}

/* Off mobile, widen the shared side gutter from 24px to 32px so the centered
   content block keeps an even, generous margin on laptops and desktops rather
   than running close to the browser edge. Phones stay at 24px (base) so small
   screens keep as much usable width as possible. */
@media (min-width: 768px) {
  :root { --ll-shell-pad: 32px; }
}

/* Large-desktop shell. At 1600–1920px+ the 1280px shell strips ~300px of dead
   space down each side and the whole page reads narrow. Widen the shared shell
   in two steps — only the :root variables move, so the header, every section
   container and the hero visual grow together and stay aligned. Kept as
   min-width queries above the laptop range so 1280–1440px is untouched. */
@media (min-width: 1536px) {
  :root {
    --ll-shell: 1400px;
    --ll-hero-visual: 1320px;
  }
}

@media (min-width: 1800px) {
  :root {
    --ll-shell: 1520px;
    --ll-hero-visual: 1440px;
  }
}

.ll-eyebrow {
  display: inline-block;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 16px;
}

.ll-eyebrow--on-ink { color: var(--brand-300); }

/* Wider than the 720px it used to be: section titles are the longest strings on
   the page and 720px inside a 1152px container forced the keyword-bearing H2s to
   three lines while leaving ~430px of usable width unused. The sub-paragraph
   keeps its own narrower cap below, so the extra width buys shorter headings
   without stretching body copy past a comfortable measure. */
.ll-section-head {
  max-width: 920px;
  margin: 0 auto 48px;
  text-align: center;
}

.ll-section-title {
  font-family: var(--ll-font-heading);
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 16px;
}

/* Held at the old 720px so widening .ll-section-head buys the title more room
   without pushing body copy past a readable measure (~75 characters at 18px). */
.ll-section-sub {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate-600);
  max-width: 720px;
  margin: 0 auto;
}

/* ── Buttons (theme.md §7) ──────────────────────────────────────────────────
   One system, three variants × two sizes. Everything button-related lives in
   this block — variants used to be scattered (`.ll-btn-outline` sat 800 lines
   down in the hero section), which let source order silently beat the size
   modifier and shipped mismatched 48px/40px CTA pairs in the hero and closing
   band. Rules are ordered base → variants → sizes, and the size modifier is
   chained per variant so it can never lose on specificity again.

   Sizes:  default 40px (header, drawer)  ·  .ll-btn--lg 48px (hero, CTA band)
   Ranks:  primary  = filled teal + lift       (one per view)
           outline  = light teal border on white   (secondary, light bg)
           on-ink   = translucent white on harbor ink (secondary, dark bg)   */

.ll-btn-primary,
.ll-btn-outline,
.ll-btn-onink-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  /* Transparent border on every variant so filled and outlined buttons share
     an identical box — otherwise their labels sit 1px apart when side by side. */
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--ll-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out,
              color 0.18s ease-out, box-shadow 0.18s ease-out,
              transform 0.06s ease-out;
}

/* Icons size with the button and never squash, whatever the inline
   width/height attributes on the SVG say. */
.ll-btn-primary > svg,
.ll-btn-outline > svg,
.ll-btn-onink-secondary > svg {
  width: 17px;
  height: 17px;
  flex: none;
}

/* Primary — filled, carries a shadow so it reads as the single strongest action */

.ll-btn-primary {
  color: #fff;
  background-color: var(--brand-600);
  /* Explicitly flat. The legacy template stylesheet is loaded globally and its
     anchor/button rules are a standing risk of painting a gradient or sheen
     behind our CTAs, so the fill is pinned to a solid colour here. */
  background-image: none;
  /* Border stays transparent (from the base rule): the fill paints under it
     (background-clip: border-box), so the button looks identical edge to edge
     but there is no separately rasterized border ring. A same-colour ring can
     seam into hairline artifacts at fractional display scaling on Windows. */
  box-shadow: 0 1px 2px rgba(6, 42, 58, 0.12);
}

.ll-btn-primary:hover {
  color: #fff;
  background-color: var(--brand-700);
  box-shadow: 0 4px 12px rgba(15, 124, 163, 0.28);
}

.ll-btn-primary:active {
  background-color: var(--brand-800);
  box-shadow: none;
  transform: translateY(1px);
}

/* Secondary — neutral slate per theme.md §7, not a teal outline. A teal border
   next to the teal primary flattens the hierarchy; keeping the secondary
   neutral makes the primary unmistakably the main action. */

.ll-btn-outline {
  color: var(--slate-900);
  background-color: #fff;
  border-color: var(--slate-300);
}

.ll-btn-outline:hover {
  color: var(--slate-900);
  background-color: var(--slate-50);
  border-color: var(--slate-400);
}

.ll-btn-outline:active {
  background-color: var(--slate-100);
  transform: translateY(1px);
}

/* On-ink secondary — for the dark closing band */

.ll-btn-onink-secondary {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
}

.ll-btn-onink-secondary:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

.ll-btn-onink-secondary:active {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(1px);
}

/* Focus — teal ring on light surfaces, white ring on ink (teal on ink-900
   fails contrast) */

.ll-btn-primary:focus-visible,
.ll-btn-outline:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.ll-btn-onink-secondary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Disabled — covers <button disabled>, aria-disabled anchors and .is-disabled */

.ll-btn-primary:disabled,
.ll-btn-outline:disabled,
.ll-btn-onink-secondary:disabled,
.ll-btn-primary[aria-disabled='true'],
.ll-btn-outline[aria-disabled='true'],
.ll-btn-onink-secondary[aria-disabled='true'],
.ll-btn-primary.is-disabled,
.ll-btn-outline.is-disabled,
.ll-btn-onink-secondary.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Large — chained per variant so it wins regardless of declaration order */

.ll-btn-primary.ll-btn--lg,
.ll-btn-outline.ll-btn--lg,
.ll-btn-onink-secondary.ll-btn--lg {
  height: 52px;
  padding: 0 32px;
  font-size: 17px;
}

.ll-btn-primary.ll-btn--lg > svg,
.ll-btn-outline.ll-btn--lg > svg,
.ll-btn-onink-secondary.ll-btn--lg > svg {
  width: 18px;
  height: 18px;
}

/* Full-width — mobile CTA stacks and the mobile drawer */

.ll-btn-primary.ll-btn--block,
.ll-btn-outline.ll-btn--block,
.ll-btn-onink-secondary.ll-btn--block {
  width: 100%;
}

/* ── Header (HubSpot-style bar + mega menus, LimaxLock branding) ────────── */

.ll-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  transition: box-shadow 0.2s ease-out;
}

.ll-header.is-scrolled { box-shadow: var(--shadow-md); }

/* With a menu open, the bar and the panel are one surface: the header drops its
   own shadow so nothing is cast into the join. The panel carries the shadow for
   the combined shape. */
.ll-header.is-menu-open { box-shadow: none; }

.ll-header__inner {
  max-width: var(--ll-shell);
  margin: 0 auto;
  padding: 0 var(--ll-shell-pad);
  height: 76px;
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.ll-header__logo {
  display: flex;
  align-items: center;
  flex: none;
}

.ll-header__logo img { height: 46px; width: auto; display: block; }

.ll-header__nav { display: flex; flex: 1; min-width: 0; }

.ll-header__menu {
  display: flex;
  align-items: stretch;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ll-header__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.ll-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-family: var(--ll-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-600);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease-out;
}

.ll-header__link:hover,
.ll-header__item.is-open .ll-header__link {
  color: var(--brand-600);
}

.ll-header__link:active { color: var(--brand-700); }

.ll-header__link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -4px;
  border-radius: 6px;
}

.ll-header__chevron {
  flex: none;
  transition: transform 0.18s ease-out;
}

.ll-header__item.is-open .ll-header__chevron { transform: rotate(180deg); }

/* No underline bar on the open nav item — the label turning teal, the rotated
   chevron and the attached panel are enough to signal the open state. */

.ll-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* Tertiary action — reads as a link, but shares the buttons' 40px box so all
   three header actions sit on one baseline and clear the 40px touch target. */
.ll-header-login {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 10px;
  font-family: var(--ll-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--slate-600);
  text-decoration: none;
  border-radius: var(--radius-control);
  transition: color 0.18s ease-out, background-color 0.18s ease-out;
}
.ll-header-login:hover { color: var(--brand-600); background-color: var(--brand-50); }
.ll-header-login:active { background-color: var(--brand-100); }
.ll-header-login:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.ll-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  margin: auto 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.ll-header__burger:hover { background: var(--slate-100); }
.ll-header__burger:active { background: var(--slate-200); }

.ll-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--slate-900);
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.ll-header__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ll-header__burger.is-active span:nth-child(2) { opacity: 0; }
.ll-header__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ll-header__burger:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Mega menu panels */

.ll-megamenu {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 490;
  background: #fff;
  /* Same join as the Solutions panel: the top border continues the header's
     divider across this panel instead of covering it (see .ll-mega__inner for
     why the panel is not offset downward instead). Square at the join, shadow
     cast downward only. */
  border: 1px solid var(--slate-200);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 20px 36px -12px rgba(6, 42, 58, 0.2);
  opacity: 0;
  visibility: hidden;
  /* Fade only — no slide. A translate would lift the panel off the trigger's
     bottom edge mid-animation, and the pointer crossing that gap would leave
     the trigger's <li> and close the menu (flicker). Same reasoning as .ll-mega. */
  transition: opacity 0.18s ease-out, visibility 0s linear 0.18s;
}

.ll-header__item.is-open .ll-megamenu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease-out, visibility 0s;
}

/* ── Solutions mega panel ───────────────────────────────────────────────────
   Same three-part structure as the LimaxPay header panel (intro + platform
   card / solution cards / highlight strip), rebuilt on LimaxLock tokens. The
   panel spans the container rather than the nav item, so the item goes static
   and the panel anchors to the sticky header. Card tints stay white →
   slate-50/brand-50 on hover: teal is an accent here, never a large fill
   (documents/theme.md §2).                                                        */

.ll-header__item--mega { position: static; }

/* No caret/pointer: the panel is attached directly to the bar rather than
   floating below it, so a pointer would read as a detached popover. */

.ll-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 490;
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  /* No padding-top: the panel's surface starts exactly at the header's bottom
     edge so the two read as one connected component. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Deliberately NOT transformed: this element is the hover region, and it must
     stay flush with the trigger's bottom edge at all times. If it slid, the gap
     it opened mid-animation would sit outside the trigger's <li> and the pointer
     crossing it would fire mouseleave — i.e. flicker. The slide lives on
     .ll-mega__inner instead, which is purely visual. */
  /* Visibility is stepped, never interpolated: it flips to visible the instant
     the menu opens (0s delay) and back to hidden only after the fade-out
     completes. Animating it would leave the panel un-hittable while opening. */
  transition: opacity 0.18s ease-out, visibility 0s linear 0.18s;
}

.ll-header__item--mega.is-open .ll-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease-out, visibility 0s;
}

.ll-mega__inner {
  background: #fff;
  /* The top border is what keeps the header's divider unbroken while the panel
     is open. `.ll-mega` is absolutely positioned at top:100%, and for an
     abspos box that resolves against the header's PADDING box — which excludes
     the border — so the panel's surface starts on the divider's top edge and
     used to paint white straight over it. This border re-draws the same 1px in
     the same colour across the panel's width, so header border + panel border
     read as one continuous line rather than two, and the divider looks
     identical open or closed.

     Deliberately NOT fixed by nudging the panel to top: calc(100% + 1px): the
     trigger <li> ends at the same y as the panel top, and the <li> carries
     onMouseLeave={closeMenus} (Header.js). A 1px offset would open a dead band
     belonging to the header's border — outside both the <li> and the panel —
     and the pointer crossing it on the way to the menu would close it.

     Side and bottom edges keep the hairline so the hanging card has definition;
     top corners stay square so the border runs straight across. */
  border: 1px solid var(--slate-200);
  border-radius: 0 0 16px 16px;
  /* Downward-only: y-offset plus a negative spread keeps the blur from bleeding
     up into the join, so the shadow wraps the combined shape's outer edges. */
  box-shadow: 0 24px 44px -12px rgba(6, 42, 58, 0.22);
  /* Clips the capability strip to the rounded corners; the panel is tall, so on
     short laptop viewports it scrolls internally rather than running off-screen. */
  overflow: hidden;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Deliberately no slide: translating the surface would open a gap at the join
     mid-animation and expose the page behind it. The fade on .ll-mega is the
     whole transition. */
}

/* Everything except the capability strip, which runs edge to edge. */
/* Keep the top padding tight — breathing room around the heading comes from the
   eyebrow/title margins, not from dead space above the first element. */
.ll-mega__body { padding: 16px 26px 22px; }

/* Intro + platform card */

.ll-mega__top {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 30px;
}

.ll-mega__eyebrow {
  display: inline-block;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-800);
  background: var(--brand-50);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.ll-mega__title {
  font-family: var(--ll-font-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 12px;
}

.ll-mega__desc {
  font-family: var(--ll-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate-500);
  max-width: 420px;
  margin: 0;
}

.ll-mega__platform {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.18s ease-out, border-color 0.18s ease-out;
}

.ll-mega__platform:hover {
  background: #fff;
  border-color: var(--brand-300);
}

.ll-mega__platform:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.ll-mega__platform-art { width: 104px; height: auto; flex: none; }

.ll-mega__platform-body { min-width: 0; }

.ll-mega__platform-title {
  display: block;
  font-family: var(--ll-font-heading);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  margin-bottom: 5px;
}

.ll-mega__platform-desc {
  display: block;
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate-600);
  margin-bottom: 10px;
}

.ll-mega__platform-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ll-font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-600);
  /* Explicit, else the legacy `a { transition: all 0.3s }` applies. */
  transition: color 0.18s ease-out;
}

.ll-mega__platform-link > svg { width: 15px; height: 15px; flex: none; }

.ll-mega__platform:hover .ll-mega__platform-link { color: var(--brand-700); }

/* Six solutions in a clean 3 x 2 grid — no group headings, so the panel reads
   as one focused set (owner feedback, 2026-07-21). */
.ll-mega__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Card grid:   [icon] [title]
                [  description  ]
                [         arrow ]   */
.ll-mega__card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 13px;
  padding: 15px;
  background: #fff;
  /* No hard border: cards sit on subtle elevation and lift on hover. The
     transparent border reserves the hover border's space so nothing shifts. */
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: background 0.18s ease-out, border-color 0.18s ease-out,
              box-shadow 0.18s ease-out, transform 0.18s ease-out;
}

.ll-mega__card:hover {
  background: var(--brand-50);
  border-color: var(--brand-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ll-mega__card:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.ll-mega__card-icon {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 13px;
  background: var(--brand-50);
  color: var(--brand-600);
  transition: background 0.18s ease-out;
}

.ll-mega__card:hover .ll-mega__card-icon { background: #fff; }

.ll-mega__card-icon img { width: 27px; height: 27px; display: block; }
.ll-mega__card-icon svg { width: 27px; height: 27px; }

.ll-mega__card-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--ll-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
}

.ll-mega__card-text {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 9px;
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate-500);
}

.ll-mega__card-arrow {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: end;
  margin-top: 6px;
  display: inline-flex;
  color: var(--brand-600);
  transition: transform 0.18s ease-out;
}

.ll-mega__card:hover .ll-mega__card-arrow { transform: translateX(3px); }

.ll-mega__card-arrow svg { width: 16px; height: 16px; }

/* Full-width capability strip — the panel's closing summary. */
.ll-mega__strip {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: 22px;
  align-items: center;
  padding: 13px 24px;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
}

.ll-mega__strip-label {
  max-width: 130px;
  padding-right: 24px;
  border-right: 1px solid var(--slate-200);
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--brand-600);
}

.ll-mega__cap { display: flex; align-items: center; gap: 11px; }

.ll-mega__cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
}

.ll-mega__cap-icon svg { width: 17px; height: 17px; }

.ll-mega__cap-body { min-width: 0; }

.ll-mega__cap-title {
  display: block;
  font-family: var(--ll-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
}

.ll-mega__cap-text {
  display: block;
  margin-top: 1px;
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--slate-500);
}

/* Below the container width the panel just insets from the viewport edges. */
@media (max-width: 1200px) {
  .ll-mega { left: 16px; right: 16px; width: auto; max-width: none; }
}

.ll-megamenu--features {
  width: 660px;
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr;
  gap: 28px;
  padding: 24px 28px;
}

.ll-megamenu__heading {
  display: block;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 10px;
  min-height: 14px;
}

.ll-megamenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ll-megamenu__list a {
  display: block;
  padding: 6px 0;
  font-family: var(--ll-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  transition: color 0.15s ease-out;
}

.ll-megamenu__list a:hover { color: var(--brand-600); }

.ll-megamenu__list a:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Mobile drawer + overlay ────────────────────────────────────────────── */

.body-overlay-1 {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(6, 42, 58, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

body.mobile-menu-active .body-overlay-1 {
  opacity: 1;
  pointer-events: auto;
}

.ll-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 700;
  width: min(360px, 92vw);
  height: 100dvh;
  background: #fff;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform 0.25s ease-out;
}

.ll-sidebar.sidebar-visible { transform: translateX(0); }

.ll-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
  margin-bottom: 8px;
}

.ll-sidebar__head img { height: 36px; width: auto; display: block; }

.ll-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--slate-600);
  cursor: pointer;
}

.ll-sidebar__close:hover { background: var(--slate-100); color: var(--slate-900); }
.ll-sidebar__close:active { background: var(--slate-200); }

.ll-sidebar__close:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.ll-sidebar__nav { display: flex; flex-direction: column; }

.ll-sidebar__group { border-bottom: 1px solid var(--slate-100); }

.ll-sidebar__group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ll-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
}

.ll-sidebar__group summary::-webkit-details-marker { display: none; }

.ll-sidebar__group summary:hover { color: var(--brand-600); }

.ll-sidebar__group summary:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -2px;
  border-radius: var(--radius-control);
}

.ll-sidebar__chevron {
  flex: none;
  color: var(--slate-400);
  transition: transform 0.2s ease-out;
}

.ll-sidebar__group[open] > summary .ll-sidebar__chevron { transform: rotate(180deg); }

.ll-sidebar__group ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px 12px;
}

.ll-sidebar__group ul a {
  display: block;
  padding: 7px 0;
  font-family: var(--ll-font-body);
  font-size: 15px;
  color: var(--slate-600);
  text-decoration: none;
}

.ll-sidebar__group ul a:hover { color: var(--brand-600); }

/* Solutions rows carry the same icon + one-liner as the desktop mega panel. */
.ll-sidebar__solution {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: var(--slate-900);
}

.ll-sidebar__solution img {
  flex: none;
  margin-top: 2px;
  width: 20px;
  height: 20px;
}

.ll-sidebar__solution-desc {
  display: block;
  margin-top: 1px;
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--slate-500);
}

.ll-sidebar__subheading {
  display: block;
  padding: 8px 0 2px 12px;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.ll-sidebar__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--slate-100);
  font-family: var(--ll-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
  text-decoration: none;
}

.ll-sidebar__link:hover { color: var(--brand-600); }

.ll-sidebar__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.ll-sidebar__copyright {
  margin: 24px 0 0;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  color: var(--slate-400);
}

@media (max-width: 1024px) {
  .ll-header__nav,
  .ll-header-login,
  .ll-header__cta.ll-btn-outline {
    display: none;
  }

  .ll-header__burger { display: flex; }

  .ll-header__inner { height: 66px; gap: 16px; }

  .ll-header__actions { margin-left: auto; }
}

@media (max-width: 480px) {
  .ll-header__cta.ll-btn-primary { display: none; }
}

/* ── Status badges (theme.md §3.4) ──────────────────────────────────────── */

.ll-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ll-badge--locked    { background: var(--danger-bg);  color: var(--danger-text); }
.ll-badge--compliant { background: var(--success-bg); color: var(--success-text); }
.ll-badge--pending   { background: var(--warning-bg); color: var(--warning-text); }

/* ── Hero (light centered variant — owner reference design) ─────────────── */

/* Two-tone hero wash — same idea as the LimaxPay hero (diagonal base ramp plus a
   soft off-centre glow), rebuilt on the teal palette:

     · base    diagonal ramp, near-white -> brand-50 -> brand-100
     · tone 1  cyan-teal glow (brand-500) drifting in from the top right
     · tone 2  harbor-ink shade (ink-900) settling into the bottom left

   The two tones sit on opposite corners so the section reads as dual-toned
   rather than a single flat fade, but both are held at low alpha so the
   headline, CTAs and console image stay the focus. Everything is expressed as
   background layers rather than ::before/::after on purpose: the hero must stay
   an unpositioned, non-stacking-context element or it would trap
   .ll-hero__visual and break the overlap layering with .ll-logos. Radial stops
   are percentage-based, so the wash scales with the section at every width. */
/* Hero + logo strip share one continuous teal wash so they read as a single
   section (owner request, 2026-07-22). The gradient lives here on the wrapper —
   applying it to each section separately would seam at the boundary. The teal
   glow sits top-right (over the hero) and a faint ink shade bottom-left (over the
   logo strip); the linear ramp spans the full height of both. Stays position:
   static so it never becomes a stacking context that would trap
   .ll-hero__visual (z-index 2) above .ll-logos (z-index 1). */
.ll-heroband {
  background-color: var(--brand-50);
  background-image:
    radial-gradient(58% 52% at 88% 10%, rgba(47, 163, 201, 0.20) 0%, rgba(47, 163, 201, 0) 62%),
    radial-gradient(52% 48% at 6% 94%, rgba(6, 42, 58, 0.07) 0%, rgba(6, 42, 58, 0) 64%),
    linear-gradient(152deg, #F5FBFD 0%, var(--brand-50) 42%, var(--brand-100) 100%);
  background-repeat: no-repeat;
}

.ll-hero {
  /* Wash lives on .ll-heroband so the hero and logo strip share one gradient. */
  background: transparent;
  /* No bottom padding: the hero ends flush with the console image and the logo
     section below pulls up over it (see --ll-hero-overlap). */
  padding: 88px 0 0;
  text-align: center;
  overflow: hidden;
}

.ll-hero__title {
  font-family: var(--ll-font-heading);
  font-size: clamp(40px, 5.4vw, 70px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  max-width: 18.5em;
  margin: 0 auto 24px;
  text-wrap: balance;
}

.ll-hero__sub {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate-600);
  max-width: 44em;
  margin: 0 auto 32px;
}

.ll-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 26px;
}

.ll-hero__trustline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--ll-font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-900);
  margin: 0 0 28px;
}

/* Brand accent: the decorative separator mark only — the trust copy either side
   stays slate. Matches the logo-red separators in the closing CTA band. */
.ll-hero__spark { width: 15px; height: 15px; color: var(--logo-red); flex: none; }

/* Google EMM Partner credential pill — owner-confirmed status. Sits under the
   trust line; inline-flex so it centres via the hero's text-align. Text + a
   brand-teal shield only (no third-party logo; logo-red reserved for danger). */
.ll-hero__cred {
  display: flex;          /* block-level → drops onto its own line under the trust line */
  width: fit-content;     /* shrink-wrap the pill instead of stretching full width */
  margin: 0 auto 30px;    /* auto margins centre it */
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--slate-900);
}

.ll-hero__cred-icon { width: 16px; height: 16px; color: var(--brand-600); flex: none; }

/* Console collage visual (uploads/mdm-dashboard.png, 1967×980).

   The artwork already contains its own browser window frame and its own
   purple/yellow decorative shapes, so it is rendered bare — no CSS frame, no
   shadow, no blob elements. Wrapping it would show two window chromes.
   It is a 2:1 landscape asset, so it runs wider than the old 1.4:1 collage to
   keep the dashboard panels legible. Transparent PNG, so it sits directly on
   the hero's blue wash. */

/* Lifted above the logo section's white background, which is pulled up behind
   the image's lower portion. .ll-hero itself stays unpositioned so its blue wash
   still paints *under* that white. */
.ll-hero__visual {
  position: relative;
  z-index: 2;
  /* Grows with the shell on large desktops (var set in :root) so the console
     collage — the widest thing in the hero — uses the reclaimed side space
     instead of stranding it. The centred text above keeps its own readable
     measure, so the effect reads as the visual gaining room, not everything
     scaling up. */
  max-width: var(--ll-hero-visual);
  margin: 0 auto;
}

.ll-hero__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Feature grid ───────────────────────────────────────────────────────── */

/* Capabilities — slate-50 surface sitting between the two white sections either
   side, so the pure-white capability cards still read as distinct (owner
   background-rhythm update, 2026-07-22). */
.ll-features {
  background: var(--slate-50);
  padding: 96px 0;
}

/* On this slate-50 section the cards stay flat at rest (the bg step + border
   carry them) and lift with a stronger shadow on hover. Scoped so the white-bg
   cards elsewhere (e.g. the Why section) keep their subtle resting shadow. */
.ll-features .ll-card { box-shadow: none; }

.ll-features .ll-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--slate-300);
}

.ll-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ll-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

.ll-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
  transform: translateY(-2px);
}

.ll-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  margin-bottom: 20px;
}

.ll-card__chip svg { width: 24px; height: 24px; }

.ll-card__title {
  font-family: var(--ll-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 0 0 10px;
}

.ll-card__text {
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-600);
  margin: 0;
}

/* ── Inner-page hero (light teal wash, theme.md §6) + contact ───────────── */

.ll-page-hero {
  background: linear-gradient(140deg, #EFF9FC 0%, #F0FAFD 40%, #E4F3F9 100%);
  padding: 112px 0 64px;
  text-align: center;
}

.ll-page-hero__title {
  font-family: var(--ll-font-heading);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 16px;
}

.ll-page-hero__sub {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate-600);
  max-width: 38em;
  margin: 0 auto;
}

.ll-contact {
  background: #fff;
  padding: 72px 0 112px;
}

/* Inline link-style action. Sets its own transition so it doesn't inherit the
   legacy stylesheet's blanket `a { transition: all 0.3s }`. */
.ll-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--ll-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-600);
  text-decoration: none;
  transition: color 0.18s ease-out;
}

/* A trailing arrow needs an explicit box: an inline SVG with no width/height
   falls back to its 300x150 default and, as a flex child, swallows the line —
   which wrapped "Book a demo" onto three lines beside a giant arrow. */
.ll-card__link svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.ll-card__link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.ll-card__link:active { color: var(--brand-800); }

.ll-card__link:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Closing CTA band (ink register) ────────────────────────────────────── */

.ll-cta {
  background: var(--ink-900);
  padding: 96px 0;
  text-align: center;
}

.ll-cta__title {
  font-family: var(--ll-font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}

.ll-cta__sub {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-text);
  max-width: 34em;
  margin: 0 auto 32px;
}

.ll-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ── Footer (theme.md §7) ───────────────────────────────────────────────── */

.ll-footer {
  background: var(--ink-900);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 72px 0 32px;
}

.ll-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}

.ll-footer__wordmark {
  font-family: var(--ll-font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}

.ll-footer__wordmark span { color: var(--brand-300); }

.ll-footer__brand-desc {
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-text-muted);
  max-width: 30em;
  margin: 0 0 24px;
}

.ll-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ll-footer__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ll-font-ui);
  font-size: 14px;
  color: var(--ink-text-muted);
}

.ll-footer__contact a {
  color: var(--ink-text);
  text-decoration: none;
}
.ll-footer__contact a:hover { color: #fff; }

.ll-footer__contact-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-text-muted);
}

.ll-footer__contact-icon svg { width: 18px; height: 18px; }

.ll-footer__col-title {
  font-family: var(--ll-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}

.ll-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ll-footer__links a {
  font-family: var(--ll-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-text);
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.ll-footer__links a:hover { color: #fff; }

.ll-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.ll-footer__company-line,
.ll-footer__copyright {
  font-family: var(--ll-font-ui);
  font-size: 13px;
  color: var(--ink-text-muted);
  margin: 0;
}

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

@media (max-width: 1024px) {
  .ll-features__grid { grid-template-columns: repeat(2, 1fr); }

  .ll-footer__grid { grid-template-columns: repeat(3, 1fr); }
  .ll-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .ll-container { padding: 0 16px; }

  .ll-hero { padding: 64px 0 0; }
  .ll-features { padding: 64px 0; }
  .ll-cta { padding: 64px 0; }

  .ll-features__grid { grid-template-columns: 1fr; }

  .ll-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ll-footer__bottom { flex-direction: column; }
}

/* Phones: CTA pairs stack to equal-width buttons instead of wrapping into a
   ragged 2-then-1 row. Capped so they read as buttons, not full-bleed bars. */
@media (max-width: 560px) {
  .ll-hero__ctas,
  .ll-cta__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .ll-hero__ctas > .ll-btn-primary,
  .ll-hero__ctas > .ll-btn-outline,
  .ll-hero__ctas > .ll-btn-onink-secondary,
  .ll-cta__actions > .ll-btn-primary,
  .ll-cta__actions > .ll-btn-outline,
  .ll-cta__actions > .ll-btn-onink-secondary {
    width: 100%;
    max-width: 320px;
  }
}

/* ── On-ink section-head modifiers ──────────────────────────────────────── */

.ll-section-title--on-ink { color: #fff; }
.ll-section-sub--on-ink { color: var(--ink-text); }

/* ── Customer logo marquee ──────────────────────────────────────────────────
   Continuous right-to-left auto-scroll. The track holds the logo list twice and
   animates to exactly -50%, so the end frame is pixel-identical to the start
   and the loop is seamless. Only "transform" is animated, so it stays on the
   compositor — no layout, no repaint, no CLS.

   Speed: one full pass is 44s for the current 12 logos (12 x 196px = 2352px per
   run, ~53px/s). If the list length changes, adjust the duration to keep that
   pixel speed — it is not derived automatically.                              */

.ll-logos {
  /* --ll-logo-h is the target *visible ink* height. The item box is taller so
     that logos with built-in whitespace (scaled up by --ll-logo-k) still fit
     without being clipped by the viewport's overflow. */
  --ll-logo-h: 32px;
  /* Width cap for wide wordmarks. Sized so the widest ratio in the set (Appalt,
     ~5:1) still lands inside the 28-36px ink band rather than being squashed. */
  --ll-logo-w: 148px;
  /* Base ink opacity. Per-logo --ll-logo-o trims this up or down so every mark
     composites to the same perceived weight (see .ll-logos__img). */
  --ll-logo-a: 0.68;

  /* How far this section's background rises behind the hero console image, so
     the image's lower portion visually sits inside this section. The extra
     padding-top cancels the negative margin out for the content, keeping the
     heading a fixed distance below the image rather than moving with it. */
  --ll-hero-overlap: 56px;

  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--ll-hero-overlap));
  /* Transparent so the shared .ll-heroband wash shows through and the logo strip
     reads as a continuation of the hero, not a separate section (owner request,
     2026-07-22). */
  background: transparent;
  padding-top: calc(64px + var(--ll-hero-overlap));
  padding-bottom: 56px;
}

.ll-logos__title {
  font-family: var(--ll-font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  text-align: center;
  margin: 0 0 48px;
}

/* Full-bleed viewport with a soft fade at both edges so logos enter and leave
   rather than being hard-clipped. */
.ll-logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ll-logos__track {
  display: flex;
  width: max-content;
  animation: ll-logo-marquee 44s linear infinite;
  /* Keeps the marquee on its own compositing layer so its continuous repaints
     stay off the surrounding hero band. */
  will-change: transform;
}

/* Optional desktop nicety — pause while the visitor is reading a logo. */
@media (hover: hover) {
  .ll-logos__viewport:hover .ll-logos__track { animation-play-state: paused; }
}

@keyframes ll-logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.ll-logos__run {
  display: flex;
  align-items: center;
  flex: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ll-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* Equal slots, so the gap rhythm stays constant no matter how wide each mark
     is. Sized to leave ~48px of clear air either side of the widest logo. */
  width: 196px;
  /* Tall enough for the most heavily padded logo (k = 2.27). */
  height: calc(var(--ll-logo-h) * 2.4);
  padding: 0 8px;
}

/* Every logo is capped to the same ink height and vertically centred whatever
   its own aspect ratio. --ll-logo-k (set inline per logo) cancels out built-in
   whitespace; wide wordmarks hit the width cap first and sit shorter, which is
   the normal and correct result for a mixed-aspect logo strip.

   Colour: fully desaturated and dropped to ~68% so the strip reads as one quiet
   band of slate rather than twelve competing brand palettes. Neutral grayscale
   rather than a slate-tinted mask is deliberate — two of these files (Telioni,
   Waldemarsudde) ship an opaque white background instead of transparency, and
   any tint or brightness filter would paint those backgrounds into visible
   rectangles. Composited over the #EFF9FC hero wash this lands around
   slate-500/600, which is the intended weight. */
.ll-logos__img {
  width: auto;
  height: auto;
  max-height: calc(var(--ll-logo-h) * var(--ll-logo-k, 1));
  max-width: calc(var(--ll-logo-w) * var(--ll-logo-k, 1));
  object-fit: contain;
  filter: grayscale(1);
  opacity: calc(var(--ll-logo-a) * var(--ll-logo-o, 1));
  transition: opacity 0.2s ease-out, filter 0.2s ease-out;
}

/* Hover restores the real brand colours at full strength. Flat values, so they
   override the per-logo weighting rather than being scaled by it. */
.ll-logos__item:hover .ll-logos__img { opacity: 1; filter: grayscale(0); }

/* Overlap tracks the shrinking console image. These overrides must stay AFTER
   the .ll-logos base rule — same single-class specificity, so source order
   decides, and sitting them up in the shared responsive block silently lost. */
@media (max-width: 1024px) {
  .ll-logos { --ll-hero-overlap: 38px; }
}

@media (max-width: 767px) {
  .ll-logos {
    --ll-logo-h: 28px;
    --ll-logo-w: 128px;
    /* A 56px bite would swallow a third of the image on a phone. */
    --ll-hero-overlap: 20px;
    padding-top: calc(40px + var(--ll-hero-overlap));
    padding-bottom: 52px;
  }
  .ll-logos__title { margin-bottom: 32px; }
  /* Same horizontal scroll on small screens — never wrap to multiple rows. */
  .ll-logos__item { width: 168px; }
  .ll-logos__track { animation-duration: 38s; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-logos__track { animation: none; }
  /* Without motion the strip becomes a manually scrollable row. */
  .ll-logos__viewport {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ll-logos__viewport::-webkit-scrollbar { display: none; }
}

/* ── Shared point rows (fleet + kiosk sections) ─────────────────────────── */

.ll-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.ll-point__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
}

.ll-point__chip svg { width: 24px; height: 24px; }

.ll-point__title {
  font-family: var(--ll-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 0 0 6px;
}

.ll-point__text {
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-600);
  margin: 0;
}

/* ── Fleet command center ───────────────────────────────────────────────── */

.ll-fleet {
  background: var(--slate-50);
  padding: 96px 0;
}

.ll-fleet__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.ll-fleet__mock {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.ll-fleet__mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--slate-200);
}

.ll-fleet__mock-title {
  font-family: var(--ll-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
}

.ll-fleet__mock-count {
  font-family: var(--ll-font-ui);
  font-size: 13px;
  color: var(--slate-500);
}

.ll-fleet__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--slate-100);
}

.ll-fleet__stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
}

.ll-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.ll-dot--success { background: var(--success); }
.ll-dot--muted   { background: var(--slate-300); }
.ll-dot--warning { background: var(--warning); }

.ll-fleet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.ll-fleet__row + .ll-fleet__row {
  border-top: 1px solid var(--slate-100);
}

.ll-fleet__row-name {
  font-family: var(--ll-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
  flex: none;
}

.ll-fleet__row-note {
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  color: var(--slate-500);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ll-fleet__points {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Kiosk lockdown spotlight ───────────────────────────────────────────── */

.ll-kiosk {
  background: #fff;
  padding: 96px 0;
}

/* The "Explore Android kiosk mode" link runs inline at the end of the section
   sub, so the base .ll-card__link block margin has to go. */
.ll-kiosk__more { margin-top: 0; }

.ll-kiosk__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.ll-kiosk__points {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ll-kiosk__mockwrap {
  display: flex;
  justify-content: center;
}

/* Real kiosk-mode device mockup (uploads/2024/06/single_and_multi_app_kiosk_mode.png). */
.ll-kiosk__shot {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* ── How it works ───────────────────────────────────────────────────────── */

.ll-how {
  background: var(--slate-50);
  padding: 96px 0;
}

.ll-how__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ll-step__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-family: var(--ll-font-heading);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 12px rgba(15, 124, 163, 0.28);
}

.ll-step__title {
  font-family: var(--ll-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 16px 0 8px;
}

.ll-step__text {
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-600);
  margin: 0;
}

/* Enrollment visuals (uploads/QR-Code-Enrollment.png, Zero-touch-Enrollment.png) */

.ll-how__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}

.ll-how__shot {
  margin: 0;
  padding: 24px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
}

.ll-how__shot img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto 20px;
}

.ll-how__shot-title {
  display: block;
  font-family: var(--ll-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 6px;
}

.ll-how__shot-text {
  display: block;
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-600);
}

/* ── Industries ─────────────────────────────────────────────────────────── */

.ll-industries {
  background: #fff;
  padding: 96px 0;
}

/* ── Security & compliance band ─────────────────────────────────────────── */

.ll-security {
  background: var(--ink-900);
  padding: 96px 0;
}

/* This band's H2 runs a step smaller than the light sections'. At the shared 48px
   it out-shouted the six cards it introduces; on ink, large white type already
   carries more weight than the same size on white. */
.ll-security .ll-section-title {
  font-size: clamp(28px, 3.6vw, 42px);
}

/* Tighter than the global 48px so the heading group reads as attached to the
   grid rather than floating above it. */
.ll-security .ll-section-head {
  margin-bottom: 38px;
}

.ll-security__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Border is a low-alpha teal rather than white: on the ink-900 backdrop a white
   hairline reads as six separate boxes, while the teal tint lets the cards sit
   inside the section. Hover lifts it just enough to confirm the card is a unit. */
.ll-security__item {
  background: var(--ink-800);
  border: 1px solid rgba(143, 206, 226, 0.15);
  border-radius: 16px;
  padding: 22px;
  transition: border-color 0.2s ease-out;
}

.ll-security__item:hover {
  border-color: rgba(143, 206, 226, 0.32);
}

/* No status pip. This used to carry a small logo-red dot on all six chips, which
   spent the page's danger colour decoratively: red here means locked / blocked /
   destructive, and painting it on every control drained the signal from the
   places that need it. Teal on a lifted ink chip is the accent instead. */
.ll-security__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--brand-300);
  margin-bottom: 14px;
}

.ll-security__chip svg { width: 24px; height: 24px; }

.ll-security__title {
  font-family: var(--ll-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 8px;
}

/* Neutral slate, one step below the white title, so the two stop competing.
   Not teal-100: see the --ink-text* tokens - ink body copy is neutral by
   decision, teal stays an interactive/accent colour. */
.ll-security__text {
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-text-muted);
  margin: 0;
}

/* ── Why LimaxLock ──────────────────────────────────────────────────────── */

.ll-why {
  background: #fff;
  padding: 96px 0;
}

.ll-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.ll-faq {
  background: var(--slate-50);
  padding: 96px 0;
}

.ll-faq--white { background: #fff; }

.ll-faq__list {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 14px;
}

.ll-faq__item {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.ll-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ll-font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--slate-900);
}

.ll-faq__question::-webkit-details-marker { display: none; }

.ll-faq__question:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-card);
}

.ll-faq__chevron {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--brand-600);
  transition: transform 0.2s ease-out;
}

.ll-faq__item[open] .ll-faq__chevron { transform: rotate(180deg); }

.ll-faq__answer {
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--slate-600);
  margin: 0;
  padding: 0 24px 20px;
}

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

@media (max-width: 1024px) {
  .ll-fleet__grid,
  .ll-kiosk__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ll-how__grid,
  .ll-security__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {

  .ll-fleet,
  .ll-kiosk,
  .ll-how,
  .ll-industries,
  .ll-security,
  .ll-why,
  .ll-faq {
    padding: 64px 0;
  }

  .ll-how__grid,
  .ll-security__grid,
  .ll-why__grid,
  .ll-how__shots {
    grid-template-columns: 1fr;
  }

  .ll-how__shots { margin-top: 40px; }
  .ll-how__shot { padding: 20px; }

  .ll-fleet__row-note { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-btn-primary,
  .ll-btn-onink-secondary,
  .ll-btn-outline,
  .ll-header-login,
  .ll-card,
  .ll-card__link,
  .ll-security__item,
  .ll-faq__chevron,
  .ll-mega,
  .ll-mega__card,
  .ll-mega__platform,
  .ll-mega__platform-link {
    transition: none;
  }

  /* Panels are fade-only, so nothing further to disable here. */

  /* Arrow still appears on hover, it just doesn't slide in. */
  .ll-mega__card-arrow { transition: none; transform: none; }

  /* Keep the hover tint and shadow, drop the lift. */
  .ll-mega__card:hover { transform: none; }

  /* Keep the press feedback, drop the movement. */
  .ll-btn-primary:active,
  .ll-btn-outline:active,
  .ll-btn-onink-secondary:active {
    transform: none;
  }

  .ll-card,
  .ll-ind__card,
  .ll-logos__img { transition: none; }
}

/* ============================================================================
   Design polish pass — 14-point review (2026-07-20)
   Hero two-tone, prominent header CTA, product tour, stats band, "who it's for"
   industries, connected how-it-works, stronger CTA + footer. Appended so these
   land after the base rules they build on.
   ========================================================================== */

/* Hero — two-tone headline (P1). Key phrases pick up brand teal against the
   slate ink of the rest of the H1. */
.ll-hero__hl { color: var(--brand-600); }

/* Header — CTAs inherit the 48px base height; the primary gets extra width so
   "Get Started Free" carries more weight than the rest of the bar (P2). */
.ll-header__cta.ll-btn-primary { padding: 0 26px; }

/* Owner report (2026-07-22): thin horizontal raster lines inside this button on
   Windows. The element has no decorative layers (solid fill, no gradient, no
   pseudo-elements), so the artifacts come from rasterization: shadow blending
   and the button being rastered inside the sticky header's shared GPU layer.
   Dead-flat fill at every state, and its own compositing layer so it rasters
   atomically. */
.ll-header__cta.ll-btn-primary,
.ll-header__cta.ll-btn-primary:hover,
.ll-header__cta.ll-btn-primary:active {
  box-shadow: none;
}

.ll-header__cta.ll-btn-primary { will-change: transform; }

/* ── Product tour — screenshot-led split rows (P4/P5) ───────────────────── */

.ll-tour {
  background: #fff;
  padding: 96px 0;
}

.ll-tour__rows {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin-top: 8px;
}

.ll-tour__row {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 56px;
  align-items: center;
}

/* Alternate the image side so the section reads as a story, not a stack. */
.ll-tour__row:nth-child(even) .ll-tour__shotwrap { order: -1; }

.ll-tour__copy { min-width: 0; }

.ll-tour__title {
  font-family: var(--ll-font-heading);
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 10px 0 12px;
}

.ll-tour__text {
  font-family: var(--ll-font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--slate-600);
  margin: 0 0 18px;
}

.ll-tour__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ll-tour__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate-600);
}

.ll-tour__list svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--brand-600);
}

.ll-tour__shotwrap { min-width: 0; }

/* Shared framed screenshot — border + depth so the product UI feels tangible (P14) */
.ll-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-xl);
}

/* Transparent artwork (its own floating cards + baked shadows) sits bare on the
   section — the frame would draw an empty box behind it. */
.ll-shot--bare {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ── Social-proof stats band (P9) — real figures, static (no counters) ───── */

.ll-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 920px;
  margin: 0 auto 56px;
}

.ll-stat {
  text-align: center;
  padding: 26px 16px;
  border-radius: 16px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
}

.ll-stat__value {
  display: block;
  font-family: var(--ll-font-heading);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--brand-600);
}

/* Brand accent: the rating star only — the number stays teal. */
.ll-stat__star { color: var(--logo-red); }

.ll-stat__label {
  display: block;
  margin-top: 8px;
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-600);
}

/* ── Industries — "who it's for", horizontal cards, filled teal icon (P8) ── */

.ll-ind__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ll-ind__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

.ll-ind__card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
  transform: translateY(-2px);
}

.ll-ind__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 13px;
  background: var(--brand-600);
  color: #fff;
}

.ll-ind__icon svg { width: 24px; height: 24px; }

.ll-ind__title {
  font-family: var(--ll-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 2px 0 6px;
}

.ll-ind__text {
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0;
}

/* ── How it works — 01→02→03→04 connected process (P7) ──────────────────── */

.ll-step { position: relative; }

/* Dashed connector from each number to the next; only on the 4-across layout. */
.ll-step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 64px;
  right: -24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--brand-300) 0 7px, transparent 7px 15px);
  z-index: 0;
}

/* ── Closing CTA trust line (P11) ───────────────────────────────────────── */

.ll-cta__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 26px 0 0;
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-text);
}

/* Brand accent: decorative separator dots only — copy stays neutral off-white. */
.ll-cta__trust i { color: var(--logo-red); font-style: normal; }

/* ── "Get it on Google Play" badge (shared: closing CTA + footer) ───────── */

.ll-gplay {
  display: inline-flex;
  border-radius: 8px;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.ll-gplay__img { display: block; height: 52px; width: auto; }

.ll-gplay:hover { opacity: 0.92; transform: translateY(-1px); }
.ll-gplay:active { transform: translateY(0); }

.ll-gplay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ll-gplay { transition: none; }
  .ll-gplay:hover, .ll-gplay:active { transform: none; }
}

/* Closing CTA: badge sits below the trust line as the "get the app" option. */
.ll-cta__app { margin-top: 28px; }

/* Footer: badge under the brand block, slightly smaller. */
.ll-footer__app { margin-top: 22px; }
.ll-footer__app .ll-gplay__img { height: 46px; }

/* ── Footer — social + legal (P12) ──────────────────────────────────────── */

.ll-footer__social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.ll-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-text-muted);
  transition: background 0.2s ease-out, color 0.2s ease-out;
}

.ll-footer__social a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.ll-footer__social a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ll-footer__social svg { width: 18px; height: 18px; }

.ll-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.ll-footer__legal a {
  font-family: var(--ll-font-ui);
  font-size: 13px;
  color: var(--ink-text-muted);
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.ll-footer__legal a:hover { color: #fff; }

/* ── Responsive for the polish-pass sections ────────────────────────────── */

/* Connector only makes sense on the 4-across step layout. */
@media (max-width: 1024px) {
  .ll-step:not(:last-child)::before { display: none; }
}

@media (max-width: 860px) {
  .ll-tour__row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Stacked: screenshot always above its copy, whatever the row parity. */
  .ll-tour__shotwrap { order: -1; }
  .ll-tour__row:nth-child(even) .ll-tour__shotwrap { order: -1; }

  .ll-ind__grid { grid-template-columns: 1fr; }
  .ll-faq__list { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ll-tour { padding: 64px 0; }
  .ll-tour__rows { gap: 48px; }
  .ll-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ll-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 440px) {
  .ll-footer__grid { grid-template-columns: 1fr; }
}

/* ══ Solution landing pages (inner SEO pages) ════════════════════════════ */

/* Hero — same three-layer teal wash formula as the homepage .ll-heroband so the
   inner pages read as siblings. Two-column when a visual is supplied. */
.ll-pagehero {
  background-color: var(--brand-50);
  background-image:
    radial-gradient(58% 52% at 88% 10%, rgba(47, 163, 201, 0.20) 0%, rgba(47, 163, 201, 0) 62%),
    radial-gradient(52% 48% at 6% 94%, rgba(6, 42, 58, 0.07) 0%, rgba(6, 42, 58, 0) 64%),
    linear-gradient(152deg, #F5FBFD 0%, var(--brand-50) 42%, var(--brand-100) 100%);
  background-repeat: no-repeat;
  padding: 88px 0 76px;
  text-align: center;
}

.ll-pagehero__grid { display: grid; }

/* Split hero — copy left, CSS console mockup right (design review 2026-07-22:
   the text-only hero left too much empty wash on the most important page). */
.ll-pagehero--split { text-align: left; padding: 76px 0 84px; }

.ll-pagehero--split .ll-pagehero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 56px;
  align-items: center;
}

.ll-pagehero--split .ll-pagehero__title,
.ll-pagehero--split .ll-pagehero__sub { margin-left: 0; margin-right: 0; }

.ll-pagehero--split .ll-pagehero__ctas { justify-content: flex-start; }

.ll-pagehero__title {
  font-family: var(--ll-font-heading);
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  max-width: 21em;
  margin: 0 auto 20px;
  text-wrap: balance;
}

.ll-pagehero__sub {
  font-family: var(--ll-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--slate-600);
  max-width: 44em;
  margin: 0 auto 30px;
}

.ll-pagehero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
}

/* The primary CTA outweighs the base --lg size so it reads as the one action. */
.ll-pagehero__ctas > .ll-btn-primary.ll-btn--lg,
.ll-pagehero__ctas > .ll-btn-outline.ll-btn--lg {
  height: 54px;
  font-size: 16.5px;
}

.ll-pagehero__ctas > .ll-btn-primary.ll-btn--lg {
  padding: 0 32px;
  box-shadow: 0 6px 18px rgba(15, 124, 163, 0.28);
}

.ll-pagehero__note {
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-600);
  margin: 0;
}

/* Section wrapper — background register plus a three-level size hierarchy, so
   primary (product) sections breathe and supporting sections tighten up rather
   than every band carrying identical weight (design review 2026-07-22). */
.ll-solsec--primary { padding: 112px 0; }
.ll-solsec--default { padding: 96px 0; }
.ll-solsec--compact { padding: 74px 0; }
.ll-solsec--white { background: #fff; }
.ll-solsec--slate { background: var(--slate-50); }
.ll-solsec--brand { background: var(--brand-50); }

.ll-solsec--compact .ll-section-head { margin-bottom: 38px; }

/* Solution-page sections deliberately carry NO width override: they inherit the
   shared shell (.ll-container / --ll-shell) so the pagehero, every section, the
   mid-page security band, the FAQ, the CTA and the footer all sit on one grid
   line with the header. A per-page 1280px floor used to live here; it created a
   second, wider grid that pulled section content ~40px left of the header anchor
   and left the FAQ/CTA/footer 40px narrower — the whole page read left-heavy.
   The shell itself is now 1280px (see :root), so widen there, never here. */

/* Prose — long-form definition copy ("What is X?") */
.ll-prose { max-width: 800px; margin: 0 auto; }

.ll-prose p {
  font-family: var(--ll-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--slate-600);
  margin: 0 0 18px;
}

.ll-prose p:last-child { margin-bottom: 0; }
.ll-prose strong { color: var(--slate-900); font-weight: 600; }

.ll-prose a { color: var(--brand-600); text-decoration: none; }
.ll-prose a:hover { color: var(--brand-700); text-decoration: underline; }

/* Split row — standalone counterpart of the homepage tour rows. Flip is an
   explicit modifier (not nth-child) so MDX controls the alternation.
   The screenshot cell is deliberately the wider of the two: the product shots
   were under-sized for the available desktop width. Column sizes are declared
   per direction so the image keeps the larger cell when the row is flipped. */
.ll-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 52px;
  align-items: center;
}

.ll-split--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }

.ll-split + .ll-split { margin-top: 78px; }
.ll-split__copy { min-width: 0; }
.ll-split__shotwrap { min-width: 0; }

/* Portrait / small-native assets are centred and capped so they are never
   upscaled past their own pixel width (which reads as soft). */
.ll-split__shotwrap--narrow .ll-shot { max-width: 500px; margin: 0 auto; }
.ll-split--flip .ll-split__copy { order: 2; }
.ll-split--flip .ll-split__shotwrap { order: 1; }

/* Checklist — compact confirmations, two-up */
.ll-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  max-width: 980px;
  margin: 0 auto;
}

.ll-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 16px 18px;
}

.ll-checklist__item > svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--brand-600);
}

.ll-checklist__title {
  font-family: var(--ll-font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0;
}

.ll-checklist__text {
  font-family: var(--ll-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 4px 0 0;
}

/* Comparison table — LimaxLock column carries a brand tint */
.ll-compare__wrap {
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  background: #fff;
}

.ll-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.55;
}

.ll-compare th,
.ll-compare td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--slate-200);
}

.ll-compare thead th {
  border-top: 0;
  background: var(--slate-50);
  font-family: var(--ll-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
}

.ll-compare thead th.is-brand { background: var(--brand-100); color: var(--brand-800); }
.ll-compare tbody th { font-weight: 600; color: var(--slate-900); width: 24%; }
.ll-compare td { color: var(--slate-600); }
.ll-compare td.is-brand { background: var(--brand-50); }

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

/* Related-solutions cluster */
.ll-related__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ll-related__card {
  display: block;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

.ll-related__card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
  transform: translateY(-2px);
}

.ll-related__card:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.ll-related__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--ll-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 6px;
}

.ll-related__title svg { width: 16px; height: 16px; flex: none; color: var(--brand-600); }

.ll-related__text {
  font-family: var(--ll-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0;
}

/* ── Hero visual — real console capture on a CSS dot grid ───────────────── */

.ll-pagehero__visual { position: relative; }

/* Decorative dot field behind the screenshot (CSS, not an image asset). */
.ll-pagehero__visual::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -24px;
  width: 132px;
  height: 132px;
  background-image: radial-gradient(var(--brand-300) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.5;
  pointer-events: none;
}

.ll-pagehero__visual .ll-shot { position: relative; }

/* Hero proof chips — replaces the single note line when `proof` is supplied. */
.ll-pagehero__proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.ll-pagehero--split .ll-pagehero__proof { justify-content: flex-start; }
.ll-pagehero__proof { justify-content: center; }

.ll-pagehero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ll-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--slate-900);
}

.ll-pagehero__proof svg { width: 17px; height: 17px; flex: none; color: var(--brand-600); }

/* Trust credential pill under the hero proof line (e.g. "Google EMM Partner").
   Mirrors the homepage .ll-hero__cred treatment but left-aligned for the split
   solution hero. Teal shield + text only — no third-party logo, logo-red stays
   reserved for real danger states. */
.ll-pagehero__cred {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 7px 15px 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--slate-900);
}
.ll-pagehero__cred-icon { width: 16px; height: 16px; color: var(--brand-600); flex: none; }

/* Full-width capability strip below the hero grid — one rounded white container
   split into equal columns (icon + title + one-line description) with hairline
   dividers. Sits inside .ll-container so it spans nearly the full content width
   and reads as a premium SaaS feature strip. Collapses to 2×2 on mobile. */
.ll-pagehero__strip {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ll-pagehero__stripitem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  min-width: 0;
}
.ll-pagehero__stripitem + .ll-pagehero__stripitem { border-left: 1px solid var(--slate-200); }
.ll-pagehero__stripicon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  background: var(--brand-50);
  color: var(--brand-600);
  align-items: center;
  justify-content: center;
}
.ll-pagehero__stripicon svg { width: 22px; height: 22px; }
.ll-pagehero__striptext { min-width: 0; }
.ll-pagehero__striptext b {
  display: block;
  font-family: var(--ll-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 3px;
  line-height: 1.25;
}
.ll-pagehero__striptext span {
  display: block;
  font-family: var(--ll-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate-600);
}

/* Stacked hero: tighten the strip so four columns stay comfortable. */
@media (max-width: 940px) {
  .ll-pagehero__strip { margin-top: 40px; }
  .ll-pagehero__stripitem { padding: 20px; gap: 13px; }
}

/* Small screens: switch to a 2×2 grid with a clean cross divider rather than
   squeezing four items into one row. */
@media (max-width: 820px) {
  .ll-pagehero__strip { grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .ll-pagehero__stripitem + .ll-pagehero__stripitem { border-left: none; }
  .ll-pagehero__stripitem:nth-child(even) { border-left: 1px solid var(--slate-200); }
  .ll-pagehero__stripitem:nth-child(n+3) { border-top: 1px solid var(--slate-200); }
}

@media (max-width: 400px) {
  .ll-pagehero__stripitem { padding: 16px 14px; gap: 11px; }
  .ll-pagehero__stripicon { width: 40px; height: 40px; }
}

/* ── Star rating — text glyphs, clipped overlay for halves ──────────────── */

.ll-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 1.5px;
  white-space: nowrap;
  flex: none;
}

.ll-stars__off { color: var(--slate-300); }

.ll-stars__on {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #F5A623;
}

/* ── Compact capability cards — four across, icon beside the title ──────── */

.ll-features__grid--compact { grid-template-columns: repeat(4, 1fr); gap: 16px; }

.ll-solsec .ll-card--compact {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  row-gap: 5px;
  align-content: start;
  padding: 20px 20px 22px;
  border-radius: 14px;
  box-shadow: none;
}

.ll-solsec .ll-card--compact .ll-card__chip {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin: 0;
}

.ll-solsec .ll-card--compact .ll-card__chip svg { width: 20px; height: 20px; }

.ll-solsec .ll-card--compact .ll-card__title {
  align-self: center;
  font-size: 15.5px;
  line-height: 1.3;
  margin: 0;
}

.ll-solsec .ll-card--compact .ll-card__text {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* ── Industry icon row — no card chrome ─────────────────────────────────── */

.ll-iconrow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 14px;
}

.ll-iconrow__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.ll-iconrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: var(--brand-50);
  color: var(--brand-600);
}

.ll-iconrow__icon svg { width: 25px; height: 25px; }

.ll-iconrow__label {
  font-family: var(--ll-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--slate-900);
}

/* ── Benefits beside the customer quote ─────────────────────────────────── */

.ll-whyproof {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.ll-whyproof__benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 26px;
}

.ll-quote {
  margin: 0;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  padding: 28px 30px 30px;
  box-shadow: var(--shadow-sm);
}

.ll-quote__eyebrow {
  display: inline-block;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 14px;
}

.ll-quote__text {
  font-family: var(--ll-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-900);
  margin: 0 0 20px;
  quotes: '\201C' '\201D';
}

.ll-quote__text::before { content: open-quote; }
.ll-quote__text::after { content: close-quote; }

.ll-quote__by { display: flex; align-items: center; gap: 13px; }

.ll-quote__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-800);
  font-family: var(--ll-font-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ll-quote__by b {
  display: block;
  font-family: var(--ll-font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--slate-900);
}

.ll-quote__by i {
  display: block;
  font-family: var(--ll-font-body);
  font-size: 13.5px;
  font-style: normal;
  color: var(--slate-500);
}

.ll-quote__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--slate-200);
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
}

/* ── Closing CTA — Play Store proof beside the badge ────────────────────── */

.ll-cta__app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 22px;
}

.ll-cta__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--ll-font-ui);
  font-size: 14px;
  color: var(--ink-text-muted);
}

.ll-cta__rating b { color: var(--ink-text); font-weight: 700; }
.ll-cta__rating .ll-stars__off { color: rgba(255, 255, 255, 0.28); }

/* ══ MDM page compositions ═══════════════════════════════════════════════ */
/* Real LimaxLock product visuals, composed differently from the homepage, with
   the surrounding cards / chips / charts built in CSS (owner request
   2026-07-22). Shared primitives first. */

/* Coloured app tiles — abstract stand-ins, never imitations of real logos. */
.ll-tile {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: none;
}

.ll-tile.is-a { background: linear-gradient(150deg, #3DA9E0, var(--brand-600)); }
.ll-tile.is-b { background: linear-gradient(150deg, #63D2B0, #0E9C74); }
.ll-tile.is-c { background: linear-gradient(150deg, #FFC46B, #E8912B); }
.ll-tile.is-d { background: linear-gradient(150deg, #9AA6F5, #5560D8); }
.ll-tile.is-e { background: linear-gradient(150deg, #F58FA6, #D94A6B); }
.ll-tile.is-f { background: linear-gradient(150deg, #9EDCEC, var(--brand-500)); }

/* Compliance donut — conic-gradient ring, no chart library, no image */
.ll-donut {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--success) 0 92%, var(--warning) 92% 97%, var(--danger) 97% 100%);
}

.ll-donut::after {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
}

.ll-donut b {
  position: relative;
  z-index: 1;
  font-family: var(--ll-font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--slate-900);
}

.ll-donut--sm { width: 46px; height: 46px; }
.ll-donut--sm::after { width: 32px; height: 32px; }
.ll-donut--sm b { font-size: 11px; }

.ll-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.ll-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate-600);
}

.ll-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ll-legend i.is-ok { background: var(--success); }
.ll-legend i.is-warn { background: var(--warning); }
.ll-legend i.is-bad { background: var(--danger); }

/* ── Hero — LimaxLock fleet console ──────────────────────────────────────
   An enterprise device-management console, not an analytics illustration:
   every figure carries MDM meaning (fleet size, reachability, compliance,
   exceptions, OEM mix, per-device state). Refinements that sell "real
   product": tabular figures so columns align, hairline dividers instead of
   boxes, 5px progress tracks, and semantic badges — green healthy, amber
   warning, red critical. */

.ll-console {
  /* Single accent knob. LimaxLock's brand accent is teal (--brand-600);
     theme.md §3 reserves indigo #4338CA for LimaxPay. Swap this one line if
     the indigo direction is confirmed for this page. */
  --console-accent: var(--brand-600);
  /* Softer hairline than slate-200 for the interior rules, so the density
     reads as refinement rather than a grid of boxes. */
  --console-line: rgba(15, 23, 42, 0.08);

  position: relative;
  /* Padding leaves room for the two floating chips to straddle the card edges. */
  padding: 18px 0 30px;
  font-variant-numeric: tabular-nums;
}

/* Window title bar. Tinted like the shared .ll-mock chrome so it reads as a
   browser frame; the body below supplies the single dividing hairline. */
.ll-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--slate-200);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--slate-50);
}

.ll-console__env {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--success-bg);
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--success-text);
  white-space: nowrap;
}

.ll-console__env i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }

.ll-console__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--slate-200);
  border-radius: 0 0 16px 16px;
  background: var(--slate-50);
  /* Softer, wider falloff than --shadow-xl so the card floats without a hard edge. */
  box-shadow: 0 18px 42px rgba(6, 42, 58, 0.10);
}

/* KPI row — the four numbers that define fleet health */
.ll-console__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }

.ll-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px 10px;
  border: 1px solid var(--console-line);
  border-radius: 11px;
  background: #fff;
}

.ll-kpi__label {
  font-family: var(--ll-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.ll-kpi__value {
  font-family: var(--ll-font-heading);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--slate-900);
}

.ll-kpi__value.is-ok { color: var(--success-text); }
.ll-kpi__value.is-warn { color: var(--warning-text); }

.ll-kpi__meta {
  font-family: var(--ll-font-ui);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--slate-500);
}

.ll-kpi__meta.is-ok { color: var(--success); }
.ll-kpi__meta.is-bad { color: var(--danger); }

.ll-kpi__bar { display: block; height: 5px; border-radius: 3px; background: var(--slate-200); overflow: hidden; }
.ll-kpi__bar i { display: block; height: 100%; border-radius: 3px; background: var(--success); }

/* Panels */
.ll-console__panel {
  padding: 10px 13px 11px;
  border: 1px solid var(--console-line);
  border-radius: 12px;
  background: #fff;
}

.ll-console__ptitle {
  font-family: var(--ll-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin: 0 0 8px;
}

/* OEM mix — counts sum to the 248 total */
.ll-makers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.ll-makers li { display: flex; align-items: center; gap: 12px; }

.ll-makers__name {
  width: 76px;
  flex: none;
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate-600);
}

.ll-makers__track { flex: 1; height: 5px; border-radius: 3px; background: var(--slate-100); overflow: hidden; }
.ll-makers__track i { display: block; height: 100%; border-radius: 3px; background: var(--console-accent); }

.ll-makers__n {
  width: 26px;
  flex: none;
  text-align: right;
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--slate-900);
}

/* Per-device state */
.ll-devices { list-style: none; margin: 0; padding: 0; }

.ll-devices li { display: flex; align-items: center; gap: 11px; padding: 6px 0; }
.ll-devices li + li { border-top: 1px solid var(--console-line); }

.ll-devices__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--slate-300);
}

.ll-devices__dot.is-on { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }

.ll-devices__id { flex: 1; min-width: 0; }

.ll-devices__id b {
  display: block;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-devices__id i {
  display: block;
  font-family: var(--ll-font-ui);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--slate-500);
}

.ll-devices__badge {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ll-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ll-devices__badge.is-ok { background: var(--success-bg); color: var(--success-text); }
.ll-devices__badge.is-warn { background: var(--warning-bg); color: var(--warning-text); }
.ll-devices__badge.is-kiosk { background: var(--brand-50); color: var(--brand-800); }

/* Floating status chips. Both deliberately straddle a card edge so they read as
   product notifications attached to the console, not as cards sitting beside it:
   each is ~36px tall and sits 12px from the container edge against 30px/18px of
   padding, so roughly half the chip overlaps the card. */
.ll-console__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--console-line);
  box-shadow: 0 10px 26px rgba(6, 42, 58, 0.12);
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-900);
  white-space: nowrap;
}

.ll-console__chip svg { width: 14px; height: 14px; flex: none; }

.ll-console__chip--kiosk { left: 14px; bottom: 12px; }
.ll-console__chip--kiosk svg { color: var(--console-accent); }

/* Balances the kiosk badge diagonally. Parked on the seam between the KPI row
   and the manufacturers panel: that band is padding on both sides, and the
   panel's title is left-aligned, so the chip covers no figure or label. */
.ll-console__chip--sync { top: 160px; right: -14px; }
.ll-console__chip--sync svg { color: var(--success); }

/* ── Product mockups — shared "browser chrome" shell ─────────────────────
   Real product interfaces built entirely in HTML/CSS (owner request
   2026-07-23): a framed window with a dot-bar header, reused by the hero
   fleet overview, the console dashboard and the app management editor so
   all three read as one consistent product, not three different styles. */

.ll-mock {
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  background: #fff;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.ll-mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.ll-mock__dots { display: inline-flex; gap: 5px; flex: none; }
.ll-mock__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-300); }

.ll-mock__crumb {
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-500);
}

.ll-mock__crumb b { font-weight: 400; color: var(--slate-300); margin: 0 1px; }

.ll-mock__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
}
.ll-mock__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* Mini horizontal bar — a lightweight chart primitive reused across all three
   mockups (battery, OS/manufacturer share, per-device battery cells). */
.ll-mbar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--slate-100);
  overflow: hidden;
}

.ll-mbar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
}

.ll-mbar--cell { width: 64px; }

.ll-mbar__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
}

.ll-mbar__row + .ll-mbar__row { margin-top: 8px; }

.ll-mbar__row span:first-child {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
}

/* ── Console mockup — sidebar, KPI stats and a live device table ────────── */

.ll-consolemock__body { display: grid; grid-template-columns: 56px 1fr; }

.ll-consolemock__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 0;
  background: var(--slate-900);
}

.ll-consolemock__nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--slate-400);
}

.ll-consolemock__nav span svg { width: 17px; height: 17px; }
.ll-consolemock__nav span.is-active { background: var(--brand-600); color: #fff; }

.ll-consolemock__main { padding: 18px 20px 20px; min-width: 0; }

.ll-consolemock__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.ll-consolemock__stat {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}

.ll-consolemock__stat b {
  display: block;
  font-family: var(--ll-font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--slate-900);
}

.ll-consolemock__stat i {
  display: block;
  font-style: normal;
  font-family: var(--ll-font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-500);
  margin-top: 2px;
}

.ll-consolemock__stat.is-brand b { color: var(--brand-600); }
.ll-consolemock__stat.is-ok b { color: var(--success); }
.ll-consolemock__stat.is-warn b { color: var(--warning); }

.ll-consolemock__tablewrap { overflow-x: auto; }

.ll-consolemock__table { width: 100%; min-width: 440px; border-collapse: collapse; }

.ll-consolemock__table th {
  text-align: left;
  padding: 0 10px 8px;
  font-family: var(--ll-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-400);
  border-bottom: 1px solid var(--slate-100);
}

.ll-consolemock__table td {
  padding: 10px;
  border-bottom: 1px solid var(--slate-100);
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate-600);
  vertical-align: middle;
}

.ll-consolemock__table tr:last-child td { border-bottom: none; }

/* ── App management mockup — approved / blocked profile editor ──────────── */

.ll-appmock__body { padding: 16px 18px; display: grid; gap: 16px; }

.ll-appmock__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
}

.ll-appmock__label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: 10.5px;
}

.ll-appmock__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.ll-appmock__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}

.ll-appmock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-600);
}

.ll-appmock__icon svg { width: 15px; height: 15px; }
.ll-appmock__icon--off { background: var(--danger-bg); color: var(--danger); }

.ll-appmock__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-appmock__name i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--slate-500); }

.ll-appmock__pill {
  margin-left: auto;
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
}

.ll-appmock__pill.is-on { background: var(--success-bg); color: var(--success-text); }
.ll-appmock__pill.is-off { background: var(--danger-bg); color: var(--danger-text); }

/* ── Kiosk — the two dedicated product visuals, overlapped ──────────────── */

.ll-kioskviz { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.ll-kioskviz__stack { position: relative; width: 100%; max-width: 460px; }

.ll-kioskviz__single { display: block; width: 74%; height: auto; margin-left: auto; }

.ll-kioskviz__multi {
  position: absolute;
  left: 0;
  bottom: -6%;
  width: 54%;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(6, 42, 58, 0.18));
}

.ll-kioskviz__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.ll-kioskviz__chips li {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--slate-200);
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
}

/* ── App management — real Apps UI + capability chips ───────────────────── */

.ll-appshot__chips {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ll-appshot__chips li {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-800);
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 700;
}

/* ── Dashboard showcase — big capture + live CSS side panels ────────────── */

.ll-showcase {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ll-showcase__main { min-width: 0; }
.ll-showcase__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.ll-mini {
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
}

.ll-mini__title {
  font-family: var(--ll-font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 12px;
}

.ll-mini__row { display: flex; align-items: center; gap: 18px; }
.ll-mini__apps { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }

.ll-mini__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.ll-mini__feed li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ll-font-ui);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--slate-600);
}

.ll-mini__feed i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ll-mini__feed i.is-ok { background: var(--success); }
.ll-mini__feed i.is-warn { background: var(--warning); }
.ll-mini__feed em { margin-left: auto; font-style: normal; color: var(--slate-400); }

.ll-showcase__points {
  grid-column: 1 / -1;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 22px;
}

.ll-showcase__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate-600);
}

.ll-showcase__points svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand-600); }

/* ══ Device hub — "What is MDM?" ═════════════════════════════════════════
   One console controlling four device classes. All HTML/CSS/SVG: no
   screenshot, so it stays sharp and reflows, and reads as a different idea
   from the hero console (owner request 2026-07-23).

   Colours come from the site-wide tokens, not a palette of their own, so this
   section always matches the rest of LimaxLock (owner decision 2026-07-23). */

.ll-solsec--hub {
  --wm-primary: var(--brand-600);
  --wm-secondary: var(--brand-500);
  --wm-accent: var(--brand-700);
  --wm-tint: var(--brand-50);
  --wm-card: var(--slate-50);
  --wm-line: var(--slate-200);
  --wm-ink: var(--slate-900);
}

/* Eyebrow becomes a pill, and the accented word in the heading. */
.ll-solsec--hub .ll-eyebrow {
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--wm-tint);
  color: var(--wm-primary);
}

.ll-solsec--hub .ll-section-title { color: var(--wm-ink); }
.ll-solsec--hub .ll-title-hl { color: var(--wm-primary); }

/* Heading container is widened past the shared 920px: the H2 measures 985px on
   one line at its 48px cap, and the shorter font sizes below 1100px scale down
   faster than the container does, so it stays a single line across desktop. */
.ll-solsec--hub .ll-section-head {
  max-width: 1040px;
  margin-bottom: 18px;
}

.ll-solsec--hub .ll-section-sub { max-width: 950px; }

/* Lead line — the platform sentence, directly above the diagram it explains.
   Matches the definition's measure so the two read as one stacked block. */
.ll-hub__lead {
  max-width: 950px;
  margin: 0 auto 26px;
  text-align: center;
}

.ll-hub__lead p {
  font-family: var(--ll-font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--wm-ink);
  margin: 0;
}

.ll-hub__lead a { color: var(--wm-primary); font-weight: 600; text-decoration: none; }
.ll-hub__lead a:hover { color: var(--wm-accent); text-decoration: underline; }

/* Grid: two device cards | hub | two device cards */
.ll-hub__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.ll-hub__col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }

/* Dotted connectors, stretched across the grid */
.ll-hub__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.ll-hub__wires path {
  fill: none;
  stroke: var(--wm-secondary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
  opacity: 0.6;
}

.ll-hub__wires circle { fill: var(--wm-secondary); opacity: 0.75; }

/* Device cards */
.ll-hub__card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--wm-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}

.ll-hub__card:hover {
  border-color: var(--slate-300);
  box-shadow: var(--shadow-md);
}

.ll-hub__device {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 16px;
  background: var(--wm-card);
  border: 1px solid var(--wm-line);
}

.ll-hub__device svg { width: 38px; height: 38px; }

/* Shared SVG device parts — every drawing inherits the section palette */
.ll-art-body { fill: var(--wm-tint); stroke: var(--wm-primary); stroke-width: 2; }
.ll-art-screen { fill: #fff; }
.ll-art-dot { fill: var(--wm-secondary); }
.ll-art-dot2 { fill: var(--brand-100); }
.ll-art-badge { fill: var(--wm-primary); }
.ll-art-bumper { fill: var(--wm-secondary); }
/* Green is reserved for the secured / compliant state. */
.ll-art-ok { fill: var(--success); }

.ll-hub__cardbody { min-width: 0; }

.ll-hub__cardtitle {
  font-family: var(--ll-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--wm-ink);
  margin: 0 0 5px;
}

.ll-hub__cardtext {
  font-family: var(--ll-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0;
}

/* Centre hub */
.ll-hub__center { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.ll-hub__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--wm-line);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  font-family: var(--ll-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--wm-primary);
  white-space: nowrap;
}

.ll-hub__pill svg { width: 15px; height: 15px; flex: none; }

.ll-hub__pill--ready { background: var(--success-bg); border-color: #A7F3D0; color: var(--success-text); }

.ll-hub__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 226px;
  height: 226px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 58%, var(--wm-tint) 100%);
  border: 1px solid var(--wm-line);
  box-shadow: var(--shadow-xl);
}

/* Concentric ring, purely structural — no extra element cost */
.ll-hub__ring {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px dashed var(--brand-100);
}

.ll-hub__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--wm-secondary), var(--wm-primary));
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 124, 163, 0.30);
  margin-bottom: 14px;
}

.ll-hub__mark svg { width: 26px; height: 26px; }

.ll-hub__name {
  font-family: var(--ll-font-heading);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--wm-ink);
  margin: 0;
}

.ll-hub__role {
  font-family: var(--ll-font-ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wm-primary);
  margin: 4px 0 0;
}

/* Capability row */
.ll-hub__caps {
  list-style: none;
  margin: 34px 0 0;
  padding: 26px 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  border: 1px solid var(--wm-line);
  border-radius: 18px;
  background: var(--wm-card);
}

.ll-hub__caps li { text-align: center; min-width: 0; }

.ll-hub__capicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--wm-tint);
  color: var(--wm-primary);
  margin-bottom: 12px;
}

.ll-hub__capicon svg { width: 22px; height: 22px; }

.ll-hub__captitle {
  font-family: var(--ll-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--wm-ink);
  margin: 0 0 5px;
}

.ll-hub__captext {
  font-family: var(--ll-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate-600);
  margin: 0;
}

@media (max-width: 1024px) {
  .ll-hub__caps { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
}

@media (max-width: 900px) {
  /* Stacked: hub first, then the four device cards as a plain grid. */
  .ll-hub__grid { grid-template-columns: 1fr; gap: 22px; }
  .ll-hub__wires { display: none; }
  .ll-hub__center { order: -1; }
  .ll-hub__col { gap: 18px; }
}

@media (max-width: 600px) {
  .ll-hub__caps { grid-template-columns: 1fr 1fr; padding: 22px 16px; }
  .ll-hub__core { width: 194px; height: 194px; }
  .ll-hub__card { padding: 16px 16px; gap: 14px; }
  .ll-hub__device { width: 54px; height: 54px; border-radius: 14px; }
  .ll-hub__device svg { width: 32px; height: 32px; }
}

@media (max-width: 400px) {
  .ll-hub__caps { grid-template-columns: 1fr; }
}

/* ── "What is X" — 60/40 explanation + capability panel ─────────────────── */

.ll-proseaside {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.ll-proseaside .ll-prose { max-width: none; margin: 0; }

.ll-panel {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 16px;
  padding: 24px 26px;
}

.ll-panel__title {
  font-family: var(--ll-font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-800);
  margin: 0 0 14px;
}

.ll-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

.ll-panel__list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ll-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate-900);
}

.ll-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--brand-100);
  color: var(--brand-600);
}

.ll-panel__icon svg { width: 17px; height: 17px; }

/* ── Enrollment blocks — larger tinted panels with CSS/SVG art ──────────── */

.ll-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.ll-block {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-content: start;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 24px 24px 26px;
}

.ll-block__art {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--brand-50);
}

.ll-art { width: 32px; height: 32px; }
.ll-block__icon { display: inline-flex; color: var(--brand-600); }
.ll-block__icon svg { width: 26px; height: 26px; }

.ll-block__title {
  align-self: center;
  font-family: var(--ll-font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 0;
}

.ll-block__text {
  grid-column: 2;
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--slate-600);
  margin: 0;
}

/* ── Benefit columns — borderless, deliberately lighter than cards ──────── */

.ll-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 28px; }

.ll-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--brand-100);
  color: var(--brand-600);
  margin-bottom: 14px;
}

.ll-benefit__icon svg { width: 22px; height: 22px; }

.ll-benefit__title {
  font-family: var(--ll-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
  margin: 0 0 7px;
}

.ll-benefit__text {
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--slate-600);
  margin: 0;
}

/* ── Scoped refinements — solution pages only, homepage untouched ───────── */

/* Feature cards get more breathing room and a stronger icon/title/text ramp. */
.ll-solsec .ll-card { padding: 30px 28px 32px; }
.ll-solsec .ll-card__chip { margin-bottom: 18px; }
.ll-solsec .ll-card__title { font-size: 18.5px; margin-bottom: 9px; }
.ll-solsec .ll-card__text { font-size: 15px; line-height: 1.68; }

/* Industry rows read as their own register: bigger icon, more padding. */
.ll-solsec .ll-ind__card { gap: 18px; padding: 24px 26px; border-radius: 18px; }
.ll-solsec .ll-ind__icon { width: 58px; height: 58px; border-radius: 14px; }
.ll-solsec .ll-ind__icon svg { width: 27px; height: 27px; }
.ll-solsec .ll-ind__title { font-size: 19px; margin-bottom: 7px; }
.ll-solsec .ll-ind__text { font-size: 15px; line-height: 1.65; }

/* The connector is inherited from the homepage steps; on solution pages it runs
   as a continuous rule so the four steps read as one journey rather than four
   separate cards (design review + reference layout). */
.ll-journey .ll-step:not(:last-child)::before {
  top: 25px;
  height: 2px;
  background: var(--brand-100);
}

/* Wider FAQ — two narrow columns made longer questions hard to scan. */
.ll-faq__list--wide { max-width: 1180px; }

/* Responsive — solution pages */
@media (max-width: 1100px) {
  .ll-features__grid--compact { grid-template-columns: repeat(2, 1fr); }
  .ll-whyproof { grid-template-columns: 1fr; gap: 36px; }
  /* Showcase: capture on top, the live panels become a row beneath it. */
  .ll-showcase { grid-template-columns: 1fr; }
  .ll-showcase__side { flex-direction: row; }
  .ll-showcase__side .ll-mini { flex: 1; min-width: 0; }
  .ll-showcase__points { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .ll-related__grid { grid-template-columns: repeat(2, 1fr); }
  .ll-benefits { grid-template-columns: repeat(2, 1fr); }
  .ll-blocks { grid-template-columns: 1fr; }
  .ll-iconrow { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 940px) {
  .ll-pagehero--split { text-align: center; padding: 72px 0 76px; }
  .ll-pagehero--split .ll-pagehero__grid { grid-template-columns: 1fr; gap: 44px; }
  .ll-pagehero--split .ll-pagehero__title,
  .ll-pagehero--split .ll-pagehero__sub { margin-left: auto; margin-right: auto; }
  .ll-pagehero--split .ll-pagehero__ctas { justify-content: center; }
  .ll-proseaside { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  .ll-split,
  .ll-split--flip {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Stacked: screenshot above its copy, whichever side it sits on desktop. */
  .ll-split__shotwrap { order: -1; }
  .ll-split--flip .ll-split__shotwrap { order: -1; }
  .ll-checklist { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .ll-pagehero,
  .ll-pagehero--split { padding: 64px 0 58px; }

  .ll-solsec--primary,
  .ll-solsec--default,
  .ll-solsec--compact { padding: 64px 0; }

  .ll-split + .ll-split { margin-top: 48px; }
  .ll-block { padding: 22px 20px 24px; }
  .ll-showcase__side { flex-direction: column; }
  .ll-consolemock__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .ll-pagehero__ctas {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .ll-pagehero__ctas > .ll-btn-primary,
  .ll-pagehero__ctas > .ll-btn-outline {
    width: 100%;
    max-width: 320px;
  }

  .ll-related__grid { grid-template-columns: 1fr; }
  .ll-benefits { grid-template-columns: 1fr; }
  .ll-features__grid--compact { grid-template-columns: 1fr; }
  .ll-iconrow { grid-template-columns: repeat(2, 1fr); }
  .ll-whyproof__benefits { grid-template-columns: 1fr; }
  .ll-pagehero__visual::before { display: none; }
  .ll-quote { padding: 24px 22px 26px; }
  .ll-showcase__points { grid-template-columns: 1fr; }
  /* Console: KPIs go two-up and the floating chip has nowhere to sit. */
  .ll-console { padding: 0; }
  .ll-console__chip { display: none; }
  .ll-console__kpis { grid-template-columns: 1fr 1fr; }
  /* No room for the address text beside the Android Enterprise pill. */
  .ll-console .ll-mock__crumb { display: none; }
}

/* ============================================================================
   Sticky sections — MDM page (owner request 2026-07-23, from a reference video)
   Two variations on one mechanic: a left column that holds its position while
   the right column scrolls past it.

     .ll-stickyfeat  core capabilities — rail + a two-up grid of benefit cards
     .ll-story       device restrictions — rail + chapter list + media panels

   Both are `position: sticky` only. The travel happens because `__railinner`
   sticks inside `__rail`, which the grid stretches to the full height of the
   taller column — sticky never escapes its own parent, so the parent has to be
   the column and not the copy. The one piece of JS on the page is the chapter
   list in LLStoryNav, which marks the panel crossing the middle of the viewport.

   --ll-stick-top clears the 77px sticky header (76px bar + hairline) with room
   to breathe. If the header height changes, this is the single place to follow.
   ========================================================================== */

.ll-stickyfeat,
.ll-story {
  --ll-stick-top: 104px;
  /* Both are anchor targets (the "See the controls" card link lands on
     #device-control), and the header is sticky rather than fixed — without this
     the section heading arrives underneath it. */
  scroll-margin-top: 90px;
}

.ll-stickyfeat__grid,
.ll-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 64px;
  /* No `align-items: start` — the rail column has to stretch or the sticky box
     has nothing to travel through. */
}

.ll-stickyfeat__railinner,
.ll-story__railinner {
  position: sticky;
  top: var(--ll-stick-top);
}

/* The rail is a column, not a centred section head: titles left-align, and the
   sub-paragraph drops the 720px auto-centred measure it inherits. */
.ll-stickyfeat__title,
.ll-story__title {
  font-size: clamp(28px, 2.6vw, 38px);
  margin-bottom: 18px;
}

.ll-stickyfeat__sub,
.ll-story__sub {
  max-width: none;
  margin: 0;
  font-size: 16.5px;
}

/* Stacked, not side by side (owner request, 2026-07-23): filled primary above
   an outlined secondary of the same size. `fit-content` sizes the stack to its
   widest button and `stretch` matches the other one to it, so the pair share a
   width without hardcoding a number that would break when the labels change. */
.ll-stickyfeat__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  gap: 12px;
  margin-top: 30px;
}

/* ── Capability cards — two up, scrolling past the rail ─────────────────── */

/* One row rhythm for the whole capability grid. The revealed extras live in a
   separate grid row (see .ll-stickyfeat__grid below), so without this the gap
   between card row 3 and card row 4 was the grid's 64px column gutter plus two
   stacked margins — the expansion read as a separate block bolted on underneath
   rather than a continuation of the grid (owner report, 2026-07-24). Every
   vertical gap in the section derives from this one number: the gaps between
   card rows, the gap before the revealed extras, and the gap before the toggle. */
.ll-stickyfeat { --ll-featrow: 20px; }

.ll-stickyfeat__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ll-featrow);
}

.ll-featcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

.ll-featcard:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
  transform: translateY(-2px);
}

.ll-featcard__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  margin-bottom: 16px;
}

.ll-featcard__chip svg { width: 22px; height: 22px; }

.ll-featcard__title {
  font-family: var(--ll-font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 0 0 14px;
}

.ll-featcard__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ll-featcard__points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--ll-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate-600);
}

.ll-featcard__points svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--brand-600);
}

/* Pushed to the bottom edge so the links line up across a row of uneven cards.
   The arrow is sized by the base .ll-card__link rule. */
.ll-featcard__link { margin-top: auto; padding-top: 16px; }

/* "View all features" — CSS-only progressive disclosure (checkbox hack). The
   extra cards stay real grid items inside .ll-stickyfeat__cards, so they line up
   with the first six instead of stacking in a separate box. */
/* Toggling "View all features" changes this column's height, which is what made
   the section jump (owner report 2026-07-23). Three separate causes, all fixed
   here:

   1. The sticky rail beside it is bottom-pinned when its container runs out —
      it needs `--ll-stick-top` + its own height of room. Expanding the cards
      gave it that room back, so it un-pinned and snapped down ~82px. Now handled
      structurally instead: the rail spans both grid rows (see below), so its
      container is always far taller than the rail needs and it stays freely
      stuck in both states. Expanding moves only the container's bottom edge.
   2. Browser scroll anchoring compensates for content growing above its chosen
      anchor by adjusting scrollTop — which read as the section sliding up. This
      was originally killed with `overflow-anchor: none` on the whole grid, which
      turned out to be far too blunt: excluding every node in the section meant
      the browser anchored on the section BELOW instead and held that still, so
      collapsing dumped the reader into the next section (owner report,
      2026-07-24). Anchoring is what should absorb a collapse — it is only the
      sticky rail that makes a bad anchor, so the exclusion now sits on the rail
      alone and cards/toggle stay eligible.
   3. The toggle's hidden checkbox used to render at its static position (the
      top of this column, ~880px above the label). A real click on the <label>
      focuses that control, and browsers scroll a focused off-screen element
      into view. Anchored to the toggle it is already on screen. */
.ll-stickyfeat__col { min-width: 0; }

/* Two rows, and the rail spans BOTH of them.

   A sticky box can never travel outside its own containing block, which here is
   .ll-stickyfeat__rail. When the rail occupied row 1 only, its height was the
   height of the six visible cards — so after "View all features" the rail ran
   out of container part-way down and scrolled away while the revealed cards were
   still going past (owner report, 2026-07-24). Spanning it to row 2 makes the
   containing block the full section: cards + extras + toggle.

   This also keeps the toggle from jumping. Expanding only extends the rail's
   BOTTOM edge — its top edge is row 1's start either way — so a rail that is
   freely stuck at --ll-stick-top does not move at all when the extras appear;
   it simply gains travel. (The earlier row-1-only structure defended against a
   jump by freezing row 1's height; spanning defends against it by never moving
   the rail's top. Same protection, and the sticky actually reaches the end.) */
.ll-stickyfeat__grid {
  position: relative;
  grid-template-areas: 'rail cards' 'rail more';
  /* Row gap only — the 64px from the shared rule above stays as the rail/cards
     column gutter. This is the seam between the visible cards and the extras,
     so it has to match the gap between card rows exactly. */
  row-gap: var(--ll-featrow);
}

/* A sticky element is a poor scroll anchor: it holds its viewport position by
   design, so the browser can pick it and then "correct" for a shift that never
   happened. Excluding just the rail leaves the cards and the toggle eligible,
   which is what keeps the toggle under the reader's cursor when "Show fewer"
   removes the extras above it. Do not move this back up to the grid. */
.ll-stickyfeat__rail { grid-area: rail; overflow-anchor: none; }
.ll-stickyfeat__col { grid-area: cards; }

/* No margin-top: the grid's row-gap is the only thing separating this row from
   the cards above it, so the seam cannot drift out of step with the card rows. */
.ll-stickyfeat__more {
  grid-area: more;
  min-width: 0;
}

/* Anchored to the toggle, not its static position at the top of the grid: a
   real click on the <label> focuses this control, and browsers scroll a focused
   off-screen element into view. */
.ll-featmore__cb {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ll-stickyfeat__more .ll-stickyfeat__cards { display: none; }
.ll-featmore__cb:checked ~ .ll-stickyfeat__more .ll-stickyfeat__cards { display: grid; }

.ll-featmore__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  /* Collapsed, the grid's row-gap alone separates the toggle from the cards, so
     it needs no margin of its own. Expanded it sits under the extras grid inside
     this row and has to supply that gap itself — see the :checked rule below.
     Either way the toggle ends up exactly one --ll-featrow below the last card. */
  margin: 0 auto;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--slate-300);
  background: #fff;
  font-family: var(--ll-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-900);
  cursor: pointer;
  transition: border-color 0.2s ease-out, background 0.2s ease-out;
}

.ll-featmore__toggle:hover { border-color: var(--brand-500); background: var(--brand-50); }

.ll-featmore__chev { width: 17px; height: 17px; color: var(--brand-600); transition: transform 0.2s ease-out; }

.ll-featmore__less { display: none; }
.ll-featmore__cb:checked ~ .ll-stickyfeat__more .ll-featmore__toggle { margin-top: var(--ll-featrow); }
.ll-featmore__cb:checked ~ .ll-stickyfeat__more .ll-featmore__more { display: none; }
.ll-featmore__cb:checked ~ .ll-stickyfeat__more .ll-featmore__less { display: inline; }
.ll-featmore__cb:checked ~ .ll-stickyfeat__more .ll-featmore__chev { transform: rotate(180deg); }

.ll-featmore__cb:focus-visible ~ .ll-stickyfeat__more .ll-featmore__toggle {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
}

/* ── Story panels — real product media, one chapter at a time ───────────── */

.ll-story__nav {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--brand-100);
}

.ll-story__nav li { position: relative; }

/* The active marker is a second rule drawn over the track, so changing chapter
   moves a highlight rather than reflowing the list. */
.ll-story__nav li::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-600);
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.ll-story__nav li.is-active::before { opacity: 1; }

.ll-story__nav a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0 11px 18px;
  font-family: var(--ll-font-body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--slate-500);
  text-decoration: none;
  transition: color 0.25s ease-out;
}

.ll-story__nav a:hover { color: var(--brand-700); }

.ll-story__nav li.is-active a { color: var(--slate-900); font-weight: 600; }

.ll-story__nav a:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.ll-story__navnum {
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand-500);
  flex: none;
}

.ll-story__panels {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ll-story__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  align-items: center;
  gap: 26px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  padding: 28px 28px 30px;
  box-shadow: var(--shadow-sm);
  /* Clears the sticky header when the chapter list jumps to a panel. */
  scroll-margin-top: 100px;
}

/* A console capture earns the full width — the UI in it is unreadable at 220px. */
.ll-story__panel--wide { grid-template-columns: minmax(0, 1fr); }

.ll-story__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ll-story__step {
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-300);
}

.ll-story__paneltitle {
  font-family: var(--ll-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slate-900);
  margin: 0 0 10px;
}

.ll-story__text {
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.68;
  color: var(--slate-600);
  margin: 0;
}

.ll-story__video {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  background: var(--slate-900);
}

/* Transparent illustrations sit unframed beside the copy. */
.ll-story__art {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────────
   Sticky is a desktop affordance. On tablet and phone a pinned rail costs a
   third of the viewport and fights the page scroll, so from 1024px down both
   sections become ordinary stacked content — and the chapter list, which only
   means anything while the rail is pinned, goes with it. Short desktop windows
   get the same treatment: a rail taller than the space above the fold cannot
   stick without clipping its own CTA.                                        */

@media (max-width: 1160px) {
  .ll-stickyfeat__grid,
  .ll-story__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 44px; }

  /* The `gap` shorthand above resets both axes, so the card-row rhythm has to be
     restored after it at every breakpoint that touches the gutter. */
  .ll-stickyfeat__grid { row-gap: var(--ll-featrow); }
}

@media (max-width: 1024px) {
  .ll-stickyfeat__grid,
  .ll-story__grid { grid-template-columns: 1fr; gap: 40px; }

  /* Areas have to collapse with the columns, or the two-column template keeps
     forcing a second track and the cards overflow. */
  .ll-stickyfeat__grid { grid-template-areas: 'rail' 'cards' 'more'; row-gap: var(--ll-featrow); }

  /* Stacked, the single row-gap would also govern the space under the heading
     block, which needs more air than a card seam. Restore it on the rail rather
     than widening the gap the card rows share. */
  .ll-stickyfeat__rail { margin-bottom: 20px; }

  .ll-stickyfeat__railinner,
  .ll-story__railinner { position: static; }

  .ll-stickyfeat__title,
  .ll-story__title { font-size: clamp(28px, 4vw, 40px); }

  .ll-story__nav { display: none; }
}

/* Short desktop windows. The taller of the two rails (story, with its chapter
   list) runs ~390px, so it needs roughly 104 + 390 + margin before pinning it
   starts pushing the CTA off the bottom edge. Below that, let it scroll. */
@media (max-height: 600px) and (min-width: 1025px) {
  .ll-stickyfeat__railinner,
  .ll-story__railinner { position: static; }
}

@media (max-width: 760px) {
  .ll-stickyfeat__cards { grid-template-columns: 1fr; }

  /* Illustration above its copy rather than a 220px column beside it. */
  .ll-story__panel { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px 26px; }
  .ll-story__copy { order: 2; }
  .ll-story__art { order: 1; max-width: 190px; }
}

@media (max-width: 560px) {
  /* Both buttons run full width; the stack stays left-aligned under the
     left-aligned heading and description. */
  .ll-stickyfeat__ctas { gap: 14px; width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-featcard,
  .ll-featcard:hover { transition: none; transform: none; }

  .ll-story__nav a,
  .ll-story__nav li::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KIOSK PAGE — device-centric section compositions (owner request 2026-07-24).
   Reuses the LimaxLock tokens (colours, type, radii, shadows); the layouts are
   new so the kiosk page stops reading as an MDM clone. All visuals are CSS/SVG.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Android device frame + app-screen mock-ups */
.ll-kdev { background: #0b1220; border-radius: 26px; padding: 9px; box-shadow: var(--shadow-xl); width: 200px; max-width: 100%; }
.ll-kdev__screen { border-radius: 18px; overflow: hidden; background: #fff; aspect-ratio: 3 / 4.4; display: flex; flex-direction: column; }
.ll-kdev--wide { width: 360px; border-radius: 22px; }
.ll-kdev--wide .ll-kdev__screen { aspect-ratio: 4 / 3; border-radius: 14px; }

/* Portrait kiosk tablet — used by the hero's foreground device */
.ll-kdev--tab { width: 100%; border-radius: 30px; padding: 8px; }
.ll-kdev--tab .ll-kdev__screen { aspect-ratio: 3 / 4.1; border-radius: 22px; }

/* Dedicated-app kiosk screen (Food Order Kiosk + Kiosk Mode Active bar) */
.ll-kscr--kiosk { background: linear-gradient(168deg, #F7A23A 0%, #EF7A2E 52%, #E4571F 100%); }
.ll-kscr__sysbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 2px; color: rgba(255, 255, 255, 0.92); font-family: var(--ll-font-ui); font-size: 8.5px; font-weight: 600; }
.ll-kscr__sysbar svg { width: 17px; height: 10px; flex: none; }
.ll-kscr__kbody { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 8px 10px; text-align: center; }
.ll-kscr__kicon { display: inline-flex; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); align-items: center; justify-content: center; color: #fff; }
.ll-kscr__kicon svg { width: 30px; height: 30px; }
.ll-kscr__ktitle { font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: #fff; }
.ll-kscr__ktap { font-family: var(--ll-font-ui); font-size: 10px; font-weight: 600; font-style: normal; color: rgba(255, 255, 255, 0.9); }
.ll-kscr__klock { display: flex; align-items: center; gap: 8px; margin: 0 8px 10px; padding: 8px 10px; border-radius: 12px; background: rgba(12, 20, 33, 0.3); color: #fff; }
.ll-kscr__klock svg { width: 15px; height: 15px; flex: none; color: #fff; }
.ll-kscr__klock b { display: block; font-family: var(--ll-font-heading); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; }
.ll-kscr__klock i { display: block; font-family: var(--ll-font-ui); font-size: 7.5px; font-weight: 500; font-style: normal; color: rgba(255, 255, 255, 0.82); line-height: 1.2; }

.ll-kscr { display: flex; flex-direction: column; height: 100%; font-family: var(--ll-font-ui); overflow: hidden; }
.ll-kscr__bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--brand-600); color: #fff; font-size: 11px; font-weight: 700; }
.ll-kscr__bar span { font-weight: 500; opacity: 0.85; font-size: 9.5px; }
.ll-kscr__bar--dark { background: #1e293b; }

.ll-kscr--pos { background: #fff; }
.ll-kscr__pos { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; }
.ll-kscr__photo { width: 82%; aspect-ratio: 16 / 10; border-radius: 12px; background: linear-gradient(135deg, #f6b64c, #e5793a); box-shadow: inset 0 -16px 22px rgba(0,0,0,0.13); }
.ll-kscr__name { font-family: var(--ll-font-heading); font-size: 12.5px; color: var(--slate-900); }
.ll-kscr__price { font-size: 12px; color: var(--brand-600); font-weight: 700; font-style: normal; }
.ll-kscr__cta { margin: 0 12px 12px; padding: 9px; border-radius: 10px; background: var(--brand-600); color: #fff; text-align: center; font-size: 11.5px; font-weight: 700; }
.ll-kscr__cta--sm { margin: 6px 0 0; padding: 7px 16px; font-size: 10.5px; border-radius: 8px; }

.ll-kscr--launch { background: linear-gradient(160deg, #eef4f7, #dde9ef); }
.ll-kscr__lbar { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-size: 11px; font-weight: 700; color: var(--slate-900); }
.ll-kscr__lbar i { font-style: normal; font-size: 9px; font-weight: 600; color: var(--slate-500); }
.ll-kscr__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 16px; align-content: center; }
.ll-kscr__app { aspect-ratio: 1; border-radius: 12px; box-shadow: var(--shadow-sm); }
.ll-kscr__app.is-a { background: #4285F4; }
.ll-kscr__app.is-b { background: #34A853; }
.ll-kscr__app.is-c { background: #FBBC05; }
.ll-kscr__app.is-d { background: var(--brand-600); }
.ll-kscr__app.is-e { background: #EA4335; }
.ll-kscr__app.is-f { background: #7C4DFF; }
.ll-kscr__dock { display: flex; justify-content: center; gap: 14px; padding: 8px 0 12px; }
.ll-kscr__dock i { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-300); }

/* Multi-app launcher — approved business apps, then the blocked remainder.
   Tiles are drawn from the LimaxLock brand/slate ramp on purpose: the app names
   are text references to what IT can allowlist, never vendor marks, so nothing
   here should be recoloured to imitate a real product icon. */
.ll-kapps { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 6px; padding: 4px 12px; align-content: center; }
.ll-kapp { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ll-kapp__tile { display: inline-flex; width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 11px; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-sm); }
.ll-kapp__tile svg { width: 21px; height: 21px; }
.ll-kapp b { max-width: 100%; font-size: 7.5px; font-weight: 600; line-height: 1; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-kapp__tile.is-brand { background: var(--brand-600); }
.ll-kapp__tile.is-ink   { background: var(--ink-900); }
.ll-kapp__tile.is-deep  { background: var(--brand-800); }
.ll-kapp__tile.is-slate { background: var(--slate-600); }
.ll-kapp__tile.is-sky   { background: var(--brand-500); }
.ll-kapp__tile.is-mute  { background: var(--slate-500); }

.ll-kapps__ok { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 12px 9px; padding: 5px; border-radius: 7px; background: var(--success-bg); color: var(--success-text); font-size: 8.5px; font-weight: 700; }
.ll-kapps__ok svg { width: 10px; height: 10px; flex: none; color: var(--success); }

.ll-kapps__blocked { padding: 9px 12px 11px; border-top: 1px solid var(--slate-200); background: rgba(241, 245, 249, 0.75); }
.ll-kapps__brow { display: flex; justify-content: center; gap: 15px; margin-bottom: 8px; }
.ll-kapps__brow .ll-kapp { opacity: 0.42; }
/* Fixed width, not 100%: these sit in a flex row where the parent is sized by
   its label, so a percentage width makes each tile a different size. */
.ll-kapps__brow .ll-kapp__tile { width: 26px; max-width: none; border-radius: 8px; background: var(--slate-400); box-shadow: none; }
.ll-kapps__brow .ll-kapp__tile svg { width: 14px; height: 14px; }
.ll-kapps__brow .ll-kapp b { font-size: 6.5px; }
.ll-kapps__blabel { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; font-size: 8px; font-weight: 600; color: var(--slate-500); }
.ll-kapps__blabel svg { width: 9px; height: 9px; flex: none; }
.ll-kapps__blabel--web { padding: 8px 12px 11px; border-top: 1px solid var(--slate-200); background: var(--slate-50); }

.ll-kscr--web { background: #fff; }
.ll-kscr__url { display: flex; align-items: center; gap: 6px; margin: 10px; padding: 7px 10px; border-radius: 8px; background: var(--slate-100); color: var(--slate-600); font-size: 10px; }
.ll-kscr__url svg { width: 12px; height: 12px; color: var(--brand-600); flex: none; }
.ll-kscr__web { flex: 1; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.ll-kscr__whead { height: 44px; border-radius: 10px; background: linear-gradient(120deg, var(--brand-500), var(--brand-700)); }
.ll-kscr__wline { height: 8px; border-radius: 4px; background: var(--slate-200); }
.ll-kscr__wline--short { width: 62%; }
.ll-kscr__wtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.ll-kscr__wtiles i { aspect-ratio: 1; border-radius: 8px; background: var(--slate-100); }

.ll-kscr--single { background: #fff; }
.ll-kscr__form { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.ll-kscr__field { width: 100%; height: 30px; border-radius: 8px; background: var(--slate-100); border: 1px solid var(--slate-200); }

.ll-kscr--scan { background: #0f172a; }
.ll-kscr__scanbox { flex: 1; display: flex; align-items: center; justify-content: center; }
.ll-kscr__barcode { width: 72%; height: 46px; background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 6px, #fff 6px 8px, transparent 8px 13px); }
.ll-kscr__scanmeta { padding: 8px 12px 14px; color: #cbd5e1; font-size: 10px; text-align: center; }

/* Toggle row — shared by the config + restriction panels */
.ll-ktog { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--slate-100); }
.ll-ktog__label { flex: 1; font-family: var(--ll-font-ui); font-size: 14px; font-weight: 500; color: var(--slate-900); }
.ll-ktog__note { font-size: 11px; font-weight: 700; color: var(--brand-600); text-transform: uppercase; letter-spacing: 0.03em; }
.ll-ktog--off .ll-ktog__note { color: var(--slate-600); }
.ll-ktog__sw { position: relative; width: 40px; height: 23px; border-radius: 999px; background: var(--brand-600); flex: none; }
.ll-ktog__sw::after { content: ''; position: absolute; top: 2.5px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.ll-ktog--off .ll-ktog__sw { background: var(--slate-300); }
.ll-ktog--off .ll-ktog__sw::after { left: 2.5px; }

/* Hero — kiosk dashboard with a self-order tablet + lockdown checklist floating
   over it (comp, 2026-07-24). The dashboard is the flow element; the tablet and
   checklist card are absolutely positioned overlays. */
/* Three-column flex composition: [kiosk device] [dashboard] [status card].
   The cards flank the console — each intersects its edge by only 8px so the
   dashboard content stays fully visible. Negative side margins widen the
   canvas: -56px left uses the hero grid gap, -22px right stays inside the
   container's own 24px padding, so neither can cause page overflow. */
.ll-khero { position: relative; display: flex; align-items: center; padding: 20px 0 34px; margin-left: -56px; margin-right: -22px; }

/* ── Console window (center layer): dark sidebar + main dashboard ──────────── */
.ll-khero__dash { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; box-shadow: var(--shadow-xl); overflow: hidden; }

.ll-khero__side { flex: none; width: 112px; background: var(--ink-900); padding: 14px 11px; display: flex; flex-direction: column; gap: 15px; }
.ll-khero__brand { display: flex; align-items: center; gap: 7px; }
.ll-khero__brandmark { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(150deg, var(--brand-500), var(--brand-700)); color: #fff; align-items: center; justify-content: center; flex: none; }
.ll-khero__brandmark svg { width: 12px; height: 12px; }
.ll-khero__brandname { font-family: var(--ll-font-heading); font-size: 12px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.ll-khero__nav { display: flex; flex-direction: column; gap: 2px; }
.ll-khero__navitem { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 600; color: rgba(226, 232, 240, 0.6); }
.ll-khero__navitem svg { width: 13px; height: 13px; flex: none; }
.ll-khero__navitem.is-active { background: rgba(47, 163, 201, 0.2); color: #fff; }
.ll-khero__navitem.is-active svg { color: var(--brand-300); }

.ll-khero__main { flex: 1; min-width: 0; padding: 14px 15px 15px; }
.ll-khero__topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ll-khero__dashtitle { font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: var(--slate-900); }
.ll-khero__tools { display: inline-flex; gap: 8px; color: var(--slate-400); }
.ll-khero__tools svg { width: 15px; height: 15px; }

.ll-khero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 11px; }
.ll-khero__stat { border: 1px solid var(--slate-200); border-radius: 11px; padding: 8px 7px; background: var(--slate-50); }
.ll-khero__stat b { display: block; font-family: var(--ll-font-heading); font-size: 18px; font-weight: 800; color: var(--slate-900); line-height: 1; }
.ll-khero__stat i { display: block; margin-top: 4px; font-family: var(--ll-font-ui); font-size: 9px; font-weight: 600; font-style: normal; color: var(--slate-500); line-height: 1.2; }
.ll-khero__stat.is-ok b { color: var(--success); }
.ll-khero__stat.is-bad b { color: var(--danger); }
.ll-khero__stat.is-brand b { color: var(--brand-600); }

.ll-khero__dashcols { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ll-khero__panel { border: 1px solid var(--slate-200); border-radius: 12px; padding: 11px 12px; background: #fff; min-width: 0; }
.ll-khero__ptitle { font-family: var(--ll-font-heading); font-size: 11px; font-weight: 700; color: var(--slate-900); margin: 0 0 10px; }
.ll-khero__statusrow { display: flex; align-items: center; gap: 11px; }
.ll-khero__panel .ll-donut { width: 74px; height: 74px; }
.ll-khero__panel .ll-donut::after { width: 52px; height: 52px; }
.ll-khero__panel .ll-donut b { font-size: 13px; }

.ll-khero__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ll-khero__feed li { display: flex; align-items: center; gap: 8px; font-family: var(--ll-font-ui); font-size: 10px; font-weight: 600; color: var(--slate-600); }
.ll-khero__feedicon { display: inline-flex; width: 21px; height: 21px; border-radius: 6px; align-items: center; justify-content: center; flex: none; background: var(--brand-50); color: var(--brand-600); }
.ll-khero__feedicon svg { width: 11px; height: 11px; }
.ll-khero__feedicon.is-ok { background: var(--success-bg); color: var(--success); }
.ll-khero__feedicon.is-warn { background: var(--warning-bg); color: var(--warning); }
.ll-khero__feedicon.is-brand { background: var(--brand-50); color: var(--brand-600); }
.ll-khero__feed span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-khero__feed em { font-style: normal; color: var(--slate-400); flex: none; font-size: 9px; }

/* Multi-segment status donut + its legend counts */
.ll-donut--status { background: conic-gradient(var(--brand-500) 0 62%, var(--danger) 62% 80%, var(--warning) 80% 92%, var(--slate-300) 92% 100%); }
.ll-legend--status li span { margin-left: auto; color: var(--slate-900); font-weight: 700; }
.ll-legend i.is-online { background: var(--brand-500); }
.ll-legend i.is-idle { background: var(--slate-300); }

/* ── Growth card (floating over the dashboard's top-right corner) ─────────── */
.ll-khero__growth { position: absolute; top: -14px; right: 208px; z-index: 5; width: 66px; height: 66px; background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: var(--shadow-lg); display: grid; place-items: center; animation: llKfloatB 5s ease-in-out infinite 0.4s; }
.ll-khero__growth svg { width: 36px; height: 36px; }

/* ── Decorative teal sparkles ─────────────────────────────────────────────── */
.ll-khero__spark { position: absolute; z-index: 0; color: var(--brand-500); pointer-events: none; line-height: 0; }
.ll-khero__spark svg { width: 100%; height: 100%; display: block; }
.ll-khero__spark--a { top: 6px; right: 70px; width: 26px; opacity: 0.5; }
.ll-khero__spark--b { top: -10px; left: 22%; width: 16px; opacity: 0.4; }
.ll-khero__spark--c { bottom: 46px; left: 51%; width: 12px; opacity: 0.45; }

/* ── Android kiosk device (left column — intersects the console edge by 8px,
   pinned to hang just below the console's bottom edge) ─────────────────────── */
.ll-khero__device { position: relative; z-index: 3; flex: none; order: -1; align-self: flex-end; width: 150px; margin-right: -8px; margin-bottom: -14px; }

/* ── Kiosk Status card (right column — intersects the console edge by 8px) ─── */
.ll-khero__status { position: relative; z-index: 4; flex: none; width: 198px; margin-left: -8px; margin-top: 48px; background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: var(--shadow-xl); padding: 11px 12px; animation: llKfloat 6s ease-in-out infinite; }
.ll-khero__statuslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ll-khero__statuslist li { display: flex; align-items: center; gap: 10px; padding: 5px 3px; }
.ll-khero__sicon { display: inline-flex; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; flex: none; }
.ll-khero__sicon svg { width: 15px; height: 15px; }
.ll-khero__stext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ll-khero__stext b { font-family: var(--ll-font-heading); font-size: 11.5px; font-weight: 700; color: var(--slate-900); line-height: 1.2; }
.ll-khero__stext i { font-family: var(--ll-font-ui); font-size: 9.5px; font-weight: 500; font-style: normal; color: var(--slate-500); line-height: 1.2; }
.ll-khero__scheck { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--success); color: #fff; align-items: center; justify-content: center; flex: none; }
.ll-khero__scheck svg { width: 11px; height: 11px; }

@keyframes llKfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes llKfloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .ll-khero__status, .ll-khero__growth { animation: none; }
}

/* What is — three mode devices */
.ll-kmodes__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.ll-kmode { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ll-kmode .ll-kdev { width: 172px; }
.ll-kmode__title { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 700; color: var(--slate-900); margin: 20px 0 6px; }
.ll-kmode__text { font-family: var(--ll-font-body); font-size: 14.5px; line-height: 1.55; color: var(--slate-600); margin: 0; max-width: 22em; }
.ll-kmodes__note { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 34px auto 0; padding: 15px 22px; max-width: 660px; border-radius: 14px; background: var(--slate-50); border: 1px solid var(--slate-200); font-family: var(--ll-font-body); font-size: 14.5px; line-height: 1.5; color: var(--slate-600); }
.ll-kmodes__note b { color: var(--slate-900); }
.ll-kmodes__noteicon { display: inline-flex; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; flex: none; }
.ll-kmodes__noteicon svg { width: 17px; height: 17px; }

/* Core capabilities — kiosk profile configuration panel */
.ll-kconfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: center; }
.ll-kconfig__panel { background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; }
.ll-kconfig__head, .ll-krestr__head { display: flex; align-items: center; gap: 7px; padding: 14px 16px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.ll-kconfig__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-300); }
.ll-kconfig__crumb { margin-left: 8px; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-600); }
.ll-kconfig__lead { font-family: var(--ll-font-body); font-size: 17px; line-height: 1.6; color: var(--slate-600); margin: 0 0 20px; }
.ll-kconfig__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ll-kconfig__list li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--ll-font-body); font-size: 15.5px; line-height: 1.5; color: var(--slate-900); }
.ll-kconfig__list svg { width: 20px; height: 20px; flex: none; color: var(--brand-600); margin-top: 1px; }

/* Single app — device with restriction callouts */
.ll-kshow { display: flex; justify-content: center; padding: 16px 0; }
.ll-kshow__stage { position: relative; padding: 6px 168px; }
.ll-kshow__device { width: 206px; }
.ll-kshow__call { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-md); font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-900); white-space: nowrap; }
.ll-kshow__call svg { width: 15px; height: 15px; color: var(--brand-600); flex: none; }
.ll-kshow__call--1 { top: 4%; left: 8px; }
.ll-kshow__call--2 { top: 40%; left: -14px; }
.ll-kshow__call--3 { bottom: 6%; left: 12px; }
.ll-kshow__call--4 { top: 20%; right: 4px; }
.ll-kshow__call--5 { bottom: 22%; right: -10px; }

/* Multi-app — approved launcher + faded blocked apps */
.ll-klaunch { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.ll-klaunch__device { width: 200px; }
.ll-klaunch__blocked { width: 250px; }
.ll-klaunch__blabel { font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-300); margin: 0 0 14px; }
.ll-klaunch__blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ll-klaunch__blist li { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; background: var(--slate-50); border: 1px dashed var(--slate-200); font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 500; color: var(--slate-300); text-decoration: line-through; }
.ll-klaunch__bicon { display: inline-flex; width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--slate-200); color: var(--slate-300); align-items: center; justify-content: center; flex: none; }
.ll-klaunch__bicon svg { width: 15px; height: 15px; }

/* Browser kiosk — wide device + browser policy panel */
.ll-kbrowse { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }
.ll-kbrowse__device { width: 400px; }
.ll-kbrowse__panel { width: 262px; background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: var(--shadow-md); padding: 18px 20px; }
.ll-kbrowse__ptitle { font-family: var(--ll-font-heading); font-size: 14px; font-weight: 700; color: var(--slate-900); margin: 0 0 12px; }
.ll-kbrowse__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ll-kbrowse__rows li { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--slate-100); }
.ll-kbrowse__rows li:last-child { border-bottom: 0; }
.ll-kbrowse__k { font-family: var(--ll-font-ui); font-size: 14px; color: var(--slate-600); }
.ll-kbrowse__v { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--brand-600); }
.ll-kbrowse__v.is-off { color: var(--slate-300); }

/* Device restrictions — admin control panel */
.ll-krestr { max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; }
.ll-krestr__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.ll-krestr__grid .ll-ktog { border-right: 1px solid var(--slate-100); }
.ll-krestr__grid .ll-ktog:nth-child(2n) { border-right: 0; }

/* In action — real-world kiosk gallery */
.ll-kgallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ll-kgcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-kgcard__stage { margin-bottom: 18px; }
.ll-kgcard .ll-kdev { width: 138px; }
.ll-kgcard__title { font-family: var(--ll-font-heading); font-size: 16.5px; font-weight: 700; color: var(--slate-900); margin: 0 0 6px; }
.ll-kgcard__text { font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.5; color: var(--slate-600); margin: 0; }

@media (max-width: 980px) {
  .ll-kconfig { grid-template-columns: 1fr; gap: 30px; }
  .ll-kgallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .ll-kmodes__row { grid-template-columns: 1fr; gap: 30px; }
  .ll-kshow__stage { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .ll-kshow__call { position: static; box-shadow: var(--shadow-sm); }
  .ll-krestr__grid { grid-template-columns: 1fr; }
  .ll-krestr__grid .ll-ktog { border-right: 0; }
  .ll-kbrowse__device { width: 100%; max-width: 380px; }
}

/* Mid band: the visual column is too narrow to flank the console, so switch
   composition — dashboard full width, device + status side by side below it,
   nudged up 10px so the layers stay visually connected. */
@media (max-width: 1180px) {
  .ll-khero { flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0 18px; margin-left: 0; margin-right: 0; padding: 20px 0 26px; }
  .ll-khero__dash { flex: 1 1 100%; }
  .ll-khero__device { order: 2; align-self: flex-start; margin: -10px 0 0; }
  .ll-khero__status { order: 3; margin: -10px 0 0; }
  .ll-khero__growth { right: -6px; }
  .ll-khero__spark--a { right: -4px; top: 34%; }
  .ll-khero__stats { grid-template-columns: repeat(4, 1fr); }
  .ll-khero__dashcols { grid-template-columns: 1fr 1fr; }
}

/* Mobile: keep the dashboard + the two primary cards, drop the secondary
   floating elements (sidebar, growth card, sparkles) and tighten the cards. */
@media (max-width: 600px) {
  .ll-khero { padding: 12px 0 22px; }
  .ll-khero__side { display: none; }
  .ll-khero__growth,
  .ll-khero__spark { display: none; }
  .ll-khero__stats { grid-template-columns: repeat(2, 1fr); }
  .ll-khero__dashcols { grid-template-columns: 1fr; }
  .ll-khero__device { width: 140px; }
  .ll-khero__status { width: 176px; padding: 9px 10px; }
}

@media (max-width: 560px) {
  .ll-kgallery { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KIOSK PAGE — comp section layouts (owner request, 2026-07-24). New two- and
   three-column compositions on top of the shared LimaxLock design system.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The "What is kiosk lockdown software?" lede runs wider than the shared
   measure (owner request, 2026-07-24). At the global 720px it broke to five
   lines while most of the section's width sat empty. This is a definition
   sentence people scan once, not body copy they read for minutes, so the wider
   measure is worth it HERE — the 720px default on .ll-section-sub stays the
   rule everywhere else and should not be raised globally. Both caps have to
   move: .ll-section-head is capped at 920px and would otherwise bind first.
   Below ~1180px the container is narrower than these caps, so the paragraph
   reflows to more lines on tablet and phone on its own. */
.ll-solsec--khub .ll-section-head { max-width: 1180px; }
.ll-solsec--khub .ll-section-sub {
  max-width: 1120px;
  /* Just under the 2-line threshold (~1130px viewport) the tail drops a short
     third line. Balancing evens the lines out instead of leaving a stub;
     ignored by browsers that don't support it, which just get the stub back. */
  text-wrap: balance;
}
/* Kept narrower than the lede above it so the cross-links still read as a
   secondary line rather than a second paragraph of equal weight. */
.ll-solsec--khub .ll-kintro-links { max-width: 900px; }

/* Kiosk-control hub — set the hub's --wm-* palette without turning the eyebrow
   into a pill (that treatment belongs to the MDM "what is MDM" section). */
.ll-solsec--khub {
  --wm-primary: var(--brand-600);
  --wm-secondary: var(--brand-500);
  --wm-accent: var(--brand-700);
  --wm-tint: var(--brand-50);
  --wm-card: var(--slate-50);
  --wm-line: var(--slate-200);
  --wm-ink: var(--slate-900);
}
/* Tint the line-icon fallback in hub node cards (device drawings ignore it). */
.ll-hub__device { color: var(--wm-primary); }

/* Terminal app-screen for the single-app column */
.ll-kterm { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 12px; }
.ll-kterm__label { font-family: var(--ll-font-ui); font-size: 8.5px; font-weight: 600; color: var(--slate-400); }
.ll-kterm__amt { font-family: var(--ll-font-heading); font-size: 20px; font-weight: 800; color: var(--slate-900); margin-bottom: 6px; }
.ll-kterm__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; }
.ll-kterm__pad span { display: flex; align-items: center; justify-content: center; height: 19px; border-radius: 6px; background: var(--slate-100); font-family: var(--ll-font-ui); font-size: 11px; font-weight: 600; color: var(--slate-600); }
.ll-kscr__cta--ok { background: var(--success); }

/* Enlarged dashboard mock for the centralized-control section */
.ll-khero__dash--lg { padding: 20px 22px 22px; }
.ll-khero__dash--lg .ll-khero__dashtitle { font-size: 16px; }
.ll-khero__dash--lg .ll-khero__stat b { font-size: 24px; }
.ll-khero__dash--lg .ll-khero__stat i { font-size: 11px; }
.ll-khero__dash--lg .ll-khero__ptitle { font-size: 13px; }
.ll-khero__dash--lg .ll-khero__feed li { font-size: 11.5px; }
.ll-khero__dash--lg .ll-legend li { font-size: 12.5px; }

/* ── 3. Capability split ─────────────────────────────────────────────────── */
/* Core capabilities lives in .ll-stickyfeat now — the kiosk page renders the
   same LLStickyFeatures section as the MDM page, so the old .ll-capsplit
   intro-beside-a-card-grid composition is gone. */

/* Contextual cross-links under the intro definition — centred and constrained to
   the section-head width so they read as part of the lede, not a separate block. */
.ll-kintro-links {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
  font-family: var(--ll-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-600);
}
.ll-kintro-links a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.ll-kintro-links a:hover { color: var(--brand-700); text-decoration: underline; }

/* ── 4. Centralized-control dashboard ────────────────────────────────────── */
.ll-kdash { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 52px; align-items: center; }
.ll-kdash__copy .ll-section-title { text-align: left; margin: 0 0 18px; }
.ll-kdash__sub { font-family: var(--ll-font-body); font-size: 17px; line-height: 1.7; color: var(--slate-600); margin: 0 0 28px; }
.ll-kdash__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.ll-kdash__points li { display: flex; align-items: flex-start; gap: 15px; }
.ll-kdash__picon { display: inline-flex; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; }
.ll-kdash__picon svg { width: 22px; height: 22px; }
.ll-kdash__points b { display: block; font-family: var(--ll-font-heading); font-size: 16.5px; font-weight: 700; color: var(--slate-900); margin-bottom: 3px; }
.ll-kdash__points div > span { display: block; font-family: var(--ll-font-body); font-size: 14.5px; line-height: 1.55; color: var(--slate-600); }

/* ── 5. Three lockdown-mode columns ──────────────────────────────────────────
   Very light containers (a white wash + hairline, not a hard card) so the three
   modes are visually separated without turning the brand band into a card grid.
   The device is the dominant element in each column. */
.ll-kcol3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.ll-kcol { display: flex; flex-direction: column; padding: 32px 28px 34px; border: 1px solid rgba(15, 124, 163, 0.12); border-radius: 20px; background: rgba(255, 255, 255, 0.6); }
.ll-kcol .ll-eyebrow { margin-bottom: 10px; }
.ll-kcol__title { font-family: var(--ll-font-heading); font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--slate-900); margin: 0 0 22px; min-height: 66px; }
.ll-kcol__device { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 26px; }
.ll-kcol__device .ll-kdev { width: 225px; }
.ll-kcol__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ll-kcol__checks li { display: flex; align-items: flex-start; gap: 11px; font-family: var(--ll-font-body); font-size: 15px; line-height: 1.5; color: var(--slate-600); }
.ll-kcol__checks svg { width: 18px; height: 18px; flex: none; color: var(--brand-600); margin-top: 2px; }

/* Kiosk-state pill — names the lock the device is actually under. */
.ll-kstate { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 15px 8px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); box-shadow: var(--shadow-sm); }
.ll-kstate__icon { display: inline-flex; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; }
.ll-kstate__icon svg { width: 13px; height: 13px; }
.ll-kstate b { font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--slate-900); }

/* ── 6. Control cards ────────────────────────────────────────────────────── */
.ll-kctrl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ll-kctrl__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px 24px; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.ll-kctrl__icon { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; margin-bottom: 16px; }
.ll-kctrl__icon svg { width: 24px; height: 24px; }
.ll-kctrl__title { font-family: var(--ll-font-heading); font-size: 15.5px; font-weight: 700; color: var(--slate-900); margin: 0 0 8px; line-height: 1.3; }
.ll-kctrl__text { font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.55; color: var(--slate-600); margin: 0; }

/* ── 7. Deploy at scale + use cases ──────────────────────────────────────── */
.ll-kdeploy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; margin-bottom: 40px; }
.ll-kdeploy__cards { display: flex; flex-direction: column; gap: 14px; }
.ll-kdeploy__visual { min-width: 0; }
.ll-kenroll { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.ll-kenroll__icon { display: inline-flex; width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; }
.ll-kenroll__icon svg { width: 22px; height: 22px; }
.ll-kenroll__title { font-family: var(--ll-font-heading); font-size: 16px; font-weight: 700; color: var(--slate-900); margin: 0 0 4px; }
.ll-kenroll__text { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.55; color: var(--slate-600); margin: 0; }
.ll-kflow { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 18px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-kflow__step { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 1; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 600; color: var(--slate-900); text-align: center; }
.ll-kflow__dot { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; }
.ll-kflow__dot svg { width: 19px; height: 19px; }
.ll-kflow__dot--ok { background: var(--success-bg); color: var(--success); }
.ll-kflow__arrow { display: inline-flex; color: var(--slate-300); flex: none; }
.ll-kflow__arrow svg { width: 18px; height: 18px; }
/* Batch-enrollment console — the deploy section's visual. Distinct from the
   device-detail mock in the centralized-control section on purpose. */
.ll-kenr__body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.ll-kenr__token { display: flex; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--slate-200); border-radius: 14px; background: var(--slate-50); }
.ll-kenr__qr { display: inline-flex; flex: none; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--slate-200); color: var(--ink-900); }
.ll-kenr__qr svg { width: 68px; height: 68px; shape-rendering: crispEdges; }
.ll-kenr__meta { min-width: 0; }
.ll-kenr__label { font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--slate-500); margin: 0 0 5px; }
.ll-kenr__code { font-family: var(--ll-font-ui); font-size: 17px; font-weight: 800; letter-spacing: 0.02em; color: var(--slate-900); margin: 0 0 10px; }
.ll-kenr__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ll-kenr__facts li { display: flex; align-items: center; gap: 7px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 500; color: var(--slate-600); }
.ll-kenr__facts svg { width: 13px; height: 13px; flex: none; color: var(--success); }

.ll-kenr__proghead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-family: var(--ll-font-ui); font-size: 12.5px; color: var(--slate-500); }
.ll-kenr__proghead b { font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-kenr__track { display: block; height: 7px; border-radius: 999px; background: var(--slate-200); overflow: hidden; }
.ll-kenr__track i { display: block; width: 48%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); }

.ll-kenr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-kenr__list li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--slate-200); border-radius: 11px; background: #fff; }
.ll-kenr__tick { display: inline-flex; width: 24px; height: 24px; flex: none; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; }
.ll-kenr__tick.is-done { background: var(--success-bg); color: var(--success); }
.ll-kenr__tick svg { width: 13px; height: 13px; }
.ll-kenr__dname { flex: 1; min-width: 0; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-kenr__pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; }
.ll-kenr__pill.is-done { background: var(--success-bg); color: var(--success-text); }

.ll-kuse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ll-kuse__card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--slate-200); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.ll-kuse__icon { display: inline-flex; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; }
.ll-kuse__icon svg { width: 21px; height: 21px; }
.ll-kuse__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ll-kuse__label { font-family: var(--ll-font-heading); font-size: 15px; font-weight: 700; color: var(--slate-900); }
.ll-kuse__text { font-family: var(--ll-font-body); font-size: 13px; line-height: 1.5; color: var(--slate-600); }

/* ── 8. Why LimaxLock + CTA card ─────────────────────────────────────────── */
/* Enterprise readiness — six cards, three across. Replaced a benefits grid that
   sat beside a CTA aside; the section is full width now and the page's closing
   CTA band does that job instead. */
.ll-kready { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 28px; }
.ll-kready .ll-benefit { padding: 26px 24px 28px; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }

/* ── 9. Numbered steps with connectors ───────────────────────────────────── */
.ll-ksteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ll-kstep { position: relative; text-align: center; padding: 0 6px; }
.ll-kstep__num { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-600); color: #fff; align-items: center; justify-content: center; font-family: var(--ll-font-heading); font-size: 20px; font-weight: 800; margin-bottom: 18px; box-shadow: 0 6px 16px rgba(15, 124, 163, 0.28); }
.ll-kstep__title { font-family: var(--ll-font-heading); font-size: 17px; font-weight: 700; color: var(--slate-900); margin: 0 0 8px; }
.ll-kstep__text { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.6; color: var(--slate-600); margin: 0; }
.ll-kstep:not(:last-child)::after { content: ''; position: absolute; top: 18px; right: -14px; width: 11px; height: 11px; border-top: 2px solid var(--slate-300); border-right: 2px solid var(--slate-300); transform: rotate(45deg); }

/* ── 11. Explore more solutions + FAQ ────────────────────────────────────── */
/* Explore more solutions — the page's main internal links out, so they get
   full card weight in a 2x2 grid instead of the old narrow sidebar list. */
.ll-ksol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1000px; margin: 0 auto; }
.ll-ksol__card { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 30px 26px; border: 1px solid var(--slate-200); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out; }
.ll-ksol__card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ll-ksol__icon { display: inline-flex; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--brand-50); color: var(--brand-600); align-items: center; justify-content: center; margin-bottom: 18px; }
.ll-ksol__icon svg { width: 25px; height: 25px; }
.ll-ksol__title { font-family: var(--ll-font-heading); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--slate-900); margin: 0 0 9px; }
.ll-ksol__text { font-family: var(--ll-font-body); font-size: 14.5px; line-height: 1.6; color: var(--slate-600); margin: 0 0 18px; }
.ll-ksol__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-family: var(--ll-font-body); font-size: 15px; font-weight: 600; color: var(--brand-600); }
.ll-ksol__link svg { width: 16px; height: 16px; transition: transform 0.2s ease-out; }
.ll-ksol__card:hover .ll-ksol__link { color: var(--brand-700); }
.ll-ksol__card:hover .ll-ksol__link svg { transform: translateX(3px); }

/* FAQ lives in .ll-faq__list--wide now — the kiosk page renders the same
   two-column LLFAQSection as the MDM page. */

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ll-kdash { grid-template-columns: 1fr; gap: 40px; }
  .ll-kdeploy { grid-template-columns: 1fr; gap: 40px; }
  .ll-kready { grid-template-columns: repeat(2, 1fr); }
  .ll-kuse { grid-template-columns: repeat(2, 1fr); }
  .ll-kctrl { grid-template-columns: repeat(2, 1fr); }
  /* Tighten the containers rather than the devices: the launcher screen packs a
     fixed stack (apps + approved bar + blocked strip) into a 3/4.4 aspect box,
     so shrinking the device below ~225px overflows it. */
  .ll-kcol3 { gap: 18px; }
  .ll-kcol { padding: 26px 16px 28px; }
}

@media (max-width: 900px) {
  .ll-kcol3 { grid-template-columns: 1fr; gap: 30px; max-width: 460px; margin: 0 auto; }
  .ll-kcol { padding: 30px 26px 32px; }
  .ll-kcol__title { min-height: 0; }
  .ll-ksteps { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .ll-kstep:not(:last-child)::after { display: none; }
  .ll-ksol { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 620px) {
  .ll-kctrl { grid-template-columns: 1fr; }
  .ll-kuse { grid-template-columns: 1fr; }
  .ll-kready { grid-template-columns: 1fr; }
  .ll-ksteps { grid-template-columns: 1fr; }
  .ll-kenr__token { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ll-kflow { flex-wrap: wrap; gap: 14px; }
  .ll-kflow__arrow { transform: rotate(90deg); }
}

/* ============================================================================
   Mobile Application Management (MAM) page — app-first compositions
   The visual object on this page is the APPLICATION: app libraries, deployment
   flows, managed-config screens and allow/block lists. Built on the shared mock
   primitives (.ll-mock, .ll-appmock, .ll-mbar, .ll-appshot__chips, .ll-security)
   so it stays part of the same family, with .ll-mam* only for the new pieces.
   Third-party apps appear as their real NAMES on LimaxLock category-glyph tiles
   — never redrawn vendor logos (brand memory + documents/theme.md).
   ========================================================================== */

/* App icon tile — one box for every app in every MAM visual, driven by
   <AppIcon> (components/sections/limaxlock/LLAppIcon.tsx). Real business apps
   render the vendor's own artwork; features, device groups and private APKs get
   a LimaxLock glyph on a brand/slate/ink fill. */
.ll-mamtile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}
.ll-mamtile svg { width: 18px; height: 18px; }
.ll-mamtile--brand   { background: var(--brand-50);  color: var(--brand-600); border: 1px solid var(--brand-100); }
.ll-mamtile--slate   { background: #fff;             color: var(--slate-500); border: 1px solid var(--slate-200); }
.ll-mamtile--ink     { background: var(--ink-900);   color: var(--brand-300); }
.ll-mamtile--private { background: var(--brand-600); color: #fff; }

/* Size steps — sm in tables and lists, md by default, lg/xl in app libraries and
   device visuals. Declared after the base so the modifier wins on equal
   specificity; the component is the only thing that picks a step. */
.ll-mamtile--sm { width: 30px; height: 30px; border-radius: 8px; }
.ll-mamtile--sm svg { width: 15px; height: 15px; }
.ll-mamtile--md { width: 34px; height: 34px; border-radius: 9px; }
.ll-mamtile--md svg { width: 18px; height: 18px; }
.ll-mamtile--lg { width: 40px; height: 40px; border-radius: 11px; }
.ll-mamtile--lg svg { width: 21px; height: 21px; }
.ll-mamtile--xl { width: 44px; height: 44px; border-radius: 12px; }
.ll-mamtile--xl svg { width: 22px; height: 22px; }

/* A real app icon already ships its own shape, padding and brand colours, so the
   tile gets out of its way — no fill, border or shadow behind the artwork, and
   `contain` keeps every icon at its native aspect ratio. */
.ll-mamtile--img { background: none; border: 0; box-shadow: none; }
.ll-mamtile--img img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── Hero — light-blue band, App Management console + device + controls ────── */
.ll-mamhero-sec {
  background-color: var(--brand-50);
  background-image:
    radial-gradient(60% 52% at 90% 8%, rgba(47, 163, 201, 0.18) 0%, rgba(47, 163, 201, 0) 60%),
    linear-gradient(160deg, #F5FBFD 0%, var(--brand-50) 55%, var(--brand-100) 100%);
  background-repeat: no-repeat;
}

.ll-mamhero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.ll-mamhero__spark { display: none; position: absolute; color: var(--brand-300); }
.ll-mamhero__spark svg { width: 100%; height: 100%; }
.ll-mamhero__spark--a { width: 20px; height: 20px; top: 2%; left: 4%; opacity: 0.8; }
.ll-mamhero__spark--b { width: 13px; height: 13px; bottom: 8%; right: 6%; opacity: 0.7; }

.ll-mamhero__dash { width: 100%; max-width: 440px; }
.ll-mamhero__dashbody { padding: 14px 16px 16px; }
.ll-mamhero__dashhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ll-mamhero__dashtitle { font-family: var(--ll-font-heading); font-size: 15px; font-weight: 700; color: var(--slate-900); }
.ll-mamhero__dashpill {
  font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; color: var(--brand-800);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; padding: 4px 10px;
}

.ll-mamapp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-mamapp { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-mamapp__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ll-mamapp__id b { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-mamapp__id i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--slate-500); }
.ll-mamapp__bar { width: 64px; height: 6px; border-radius: 999px; background: var(--slate-200); overflow: hidden; flex: none; }
.ll-mamapp__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), var(--brand-600)); }

.ll-mamhero__device { width: 100%; max-width: 220px; }
.ll-mamdev {
  position: relative; background: var(--ink-900); border-radius: 26px; padding: 10px;
  box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14);
}
.ll-mamdev__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.18); }
.ll-mamdev__screen { background: #fff; border-radius: 18px; padding: 20px 12px 14px; }
.ll-mamdev__label { display: block; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-400); margin-bottom: 10px; }
.ll-mamdev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px; }
.ll-mamdev__app { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ll-mamdev__app i { font-style: normal; font-size: 8.5px; font-weight: 600; color: var(--slate-500); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ll-mamhero__controls {
  width: 100%; max-width: 300px; background: #fff; border: 1px solid var(--slate-200);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 14px 16px;
}
.ll-mamctrl__title { font-family: var(--ll-font-heading); font-size: 13px; font-weight: 700; color: var(--slate-900); margin: 0 0 10px; }
.ll-mamctrl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-mamctrl__list li { display: flex; align-items: center; gap: 9px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-mamctrl__check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 999px; background: var(--success-bg); color: var(--success); }
.ll-mamctrl__check svg { width: 11px; height: 11px; }

@media (min-width: 1080px) {
  .ll-mamhero { display: block; min-height: 476px; padding: 16px 0 26px; }
  .ll-mamhero__spark { display: block; }
  /* Dashboard is the base card, left-aligned so the two floats frame it on a
     diagonal — the Controls card clips only the top-right corner and the device
     the bottom-left, keeping the app rows in the middle readable. */
  .ll-mamhero__dash { margin: 0; max-width: 398px; }
  .ll-mamhero__controls { position: absolute; right: 0; top: 22px; width: 256px; z-index: 4; }
  .ll-mamhero__device { position: absolute; left: 8px; bottom: 0; width: 166px; z-index: 3; }
}

/* ── What is MAM — sources → LimaxLock → devices flow + verb row ───────────── */
.ll-mamflow { display: flex; flex-direction: column; gap: 26px; }
.ll-mamflow__rail { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ll-mamflow__stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ll-mamflow__stagelabel { font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-mamflow__sources { display: flex; flex-direction: column; gap: 10px; }
.ll-mamflow__source, .ll-mamflow__dev {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);
  font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-700, var(--slate-600));
}
.ll-mamflow__devices { display: flex; gap: 10px; }
.ll-mamflow__dev { padding: 10px; }
.ll-mamflow__arrow { color: var(--brand-500); flex: none; }
.ll-mamflow__arrow svg { width: 30px; height: 30px; }
.ll-mamflow__hub {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 20px 24px; border-radius: 18px; background: var(--brand-600); color: #fff;
  box-shadow: var(--shadow-lg); min-width: 180px;
}
.ll-mamflow__hubmark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.16); margin-bottom: 6px; }
.ll-mamflow__hubmark svg { width: 22px; height: 22px; }
.ll-mamflow__hub b { font-family: var(--ll-font-heading); font-size: 17px; font-weight: 800; }
.ll-mamflow__hub i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.82); }
.ll-mamflow__verbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ll-mamflow__verbs li {
  padding: 8px 16px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100);
  color: var(--brand-800); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700;
}

@media (max-width: 767px) {
  .ll-mamflow__rail { flex-direction: column; }
  .ll-mamflow__arrow { transform: rotate(90deg); }
}

/* ── App management console — big app inventory table + supporting points ──── */
.ll-mamconsole { display: grid; gap: 26px; }
.ll-mamconsole__tablewrap { padding: 6px; overflow-x: auto; }
.ll-mamconsole__table { width: 100%; border-collapse: collapse; min-width: 460px; }
.ll-mamconsole__table th {
  text-align: left; padding: 12px 14px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); border-bottom: 1px solid var(--slate-200);
}
.ll-mamconsole__table th.is-num, .ll-mamconsole__table td.is-num { text-align: right; }
.ll-mamconsole__table td {
  padding: 12px 14px; border-bottom: 1px solid var(--slate-100);
  font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-700, var(--slate-600)); vertical-align: middle;
}
.ll-mamconsole__table tr:last-child td { border-bottom: none; }
.ll-mamconsole__app { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; color: var(--slate-900); }
.ll-mamconsole__ver { color: var(--slate-500); font-variant-numeric: tabular-nums; }
.ll-mamconsole__table td.is-num { font-weight: 700; color: var(--slate-900); font-variant-numeric: tabular-nums; }
.ll-badge--private { background: var(--brand-50); color: var(--brand-800); }

.ll-mamconsole__points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ll-mamconsole__points li { display: flex; gap: 12px; }
.ll-mamconsole__picon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); }
.ll-mamconsole__picon svg { width: 19px; height: 19px; }
.ll-mamconsole__ptext { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.5; color: var(--slate-600); }
.ll-mamconsole__ptext b { display: block; font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 700; color: var(--slate-900); margin-bottom: 2px; }

@media (max-width: 767px) {
  .ll-mamconsole__points { grid-template-columns: 1fr; gap: 14px; }
}

/* ── App deployment — choose app → select devices → deploy (progress) ──────── */
.ll-mamdeploy { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ll-mamdeploy__flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; width: 100%; }
.ll-mamdeploy__card {
  flex: 1; min-width: 0; max-width: 280px; background: #fff; border: 1px solid var(--slate-200);
  border-radius: 16px; box-shadow: var(--shadow-md); padding: 16px;
}
.ll-mamdeploy__card--go { background: var(--brand-600); border-color: var(--brand-700); color: #fff; }
.ll-mamdeploy__step { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 700; color: var(--slate-900); }
.ll-mamdeploy__card--go .ll-mamdeploy__step { color: #fff; }
.ll-mamdeploy__step span {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border-radius: 999px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700;
}
.ll-mamdeploy__card--go .ll-mamdeploy__step span { background: rgba(255,255,255,0.2); }
.ll-mamdeploy__pick, .ll-mamdeploy__groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ll-mamdeploy__pick li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--slate-100); background: var(--slate-50); font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-mamdeploy__pick li.is-on { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-800); }
.ll-mamdeploy__pick li span:not(.ll-mamtile):not(.ll-mamdeploy__tick) { flex: 1; }
.ll-mamdeploy__tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 999px; background: var(--brand-600); color: #fff; }
.ll-mamdeploy__tick svg { width: 11px; height: 11px; }
.ll-mamdeploy__groups li { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 10px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-600); }
.ll-mamdeploy__groups li.is-on { color: var(--brand-800); font-weight: 700; }
.ll-mamdeploy__radio { display: inline-flex; width: 16px; height: 16px; flex: none; border-radius: 999px; border: 2px solid var(--slate-300); }
.ll-mamdeploy__groups li.is-on .ll-mamdeploy__radio { border-color: var(--brand-600); background: radial-gradient(circle, var(--brand-600) 0 40%, transparent 46%); }
.ll-mamdeploy__arrow { display: inline-flex; align-items: center; color: var(--brand-500); flex: none; }
.ll-mamdeploy__arrow svg { width: 26px; height: 26px; }
.ll-mamdeploy__count { text-align: center; margin-bottom: 14px; }
.ll-mamdeploy__count b { display: block; font-family: var(--ll-font-heading); font-size: 30px; font-weight: 800; line-height: 1; }
.ll-mamdeploy__count i { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.82); }
.ll-mamdeploy__prog { display: flex; flex-direction: column; gap: 7px; }
.ll-mamdeploy__proglabel { display: flex; align-items: center; justify-content: space-between; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.9); }
.ll-mamdeploy__card--go .ll-mbar { background: rgba(255,255,255,0.24); }
.ll-mamdeploy__card--go .ll-mbar span { background: #fff; }
.ll-mamdeploy__chips { justify-content: center; }

@media (max-width: 860px) {
  .ll-mamdeploy__flow { flex-direction: column; align-items: center; }
  .ll-mamdeploy__card { max-width: 340px; width: 100%; }
  .ll-mamdeploy__arrow { transform: rotate(90deg); }
}

/* ── Managed Google Play — curated store tablet + admin approval list ──────── */
.ll-mamplay { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.ll-mamplay__tablet { background: var(--ink-900); border-radius: 22px; padding: 14px; box-shadow: var(--shadow-xl); }
.ll-mamplay__store { background: #fff; border-radius: 14px; overflow: hidden; }
.ll-mamplay__storehead { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--slate-100); background: var(--slate-50); }
.ll-mamplay__storemark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-600); color: #fff; }
.ll-mamplay__storemark svg { width: 16px; height: 16px; }
.ll-mamplay__storename { display: flex; flex-direction: column; font-family: var(--ll-font-heading); font-size: 13.5px; font-weight: 700; color: var(--slate-900); }
.ll-mamplay__storename i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--slate-500); }
.ll-mamplay__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 18px 16px; }
.ll-mamplay__app { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ll-mamplay__app i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--slate-700, var(--slate-600)); }
.ll-mamplay__app em { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--brand-600); text-transform: uppercase; letter-spacing: 0.04em; }
.ll-mamplay__adminbody { padding: 16px 18px; }
.ll-mamplay__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-mamplay__list li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-100); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-mamplay__lname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-mamplay__lcheck { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 999px; background: var(--success-bg); color: var(--success); }
.ll-mamplay__lcheck svg { width: 11px; height: 11px; }

@media (max-width: 860px) {
  .ll-mamplay { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

/* ── Private app management — upload APK → LimaxLock → device groups ───────── */
.ll-mamprivate { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 440px; margin: 0 auto; }
.ll-mamprivate__step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ll-mamprivate__steplabel { font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-mamprivate__file {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px;
  background: #fff; border: 1px dashed var(--brand-300); box-shadow: var(--shadow-sm);
  font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; color: var(--slate-900);
}
.ll-mamprivate__fileicon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-600); color: #fff; }
.ll-mamprivate__fileicon svg { width: 16px; height: 16px; }
.ll-mamprivate__arrow { color: var(--brand-500); }
.ll-mamprivate__arrow svg { width: 26px; height: 26px; }
.ll-mamprivate__hub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; width: 100%; padding: 18px 22px; border-radius: 16px; background: var(--brand-600); color: #fff; box-shadow: var(--shadow-lg); }
.ll-mamprivate__hubmark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.16); margin-bottom: 4px; }
.ll-mamprivate__hubmark svg { width: 20px; height: 20px; }
.ll-mamprivate__hub b { font-family: var(--ll-font-heading); font-size: 16px; font-weight: 800; }
.ll-mamprivate__hub i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.82); max-width: 30ch; }
.ll-mamprivate__targets { display: flex; gap: 14px; justify-content: center; }
.ll-mamprivate__target { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ll-mamprivate__target i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--slate-700, var(--slate-600)); }

/* ── Allow / block — approved apps beside restricted apps ──────────────────── */
.ll-mamrestrict { display: flex; flex-direction: column; gap: 22px; }
.ll-mamrestrict__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ll-mamrestrict__foot { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.ll-mamrestrict__foot li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ll-font-ui); font-size: 14px; font-weight: 700; color: var(--slate-900); }
.ll-mamrestrict__foot li svg { width: 17px; height: 17px; color: var(--brand-600); flex: none; }

@media (max-width: 767px) {
  .ll-mamrestrict__cols { grid-template-columns: 1fr; }
}

/* ── Managed app configuration — config panel + push flow ──────────────────── */
.ll-mamconfig { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ll-mamconfig__panel { width: 100%; max-width: 520px; }
.ll-mamconfig__body { padding: 16px 18px 18px; }
.ll-mamconfig__apphead { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--slate-100); }
.ll-mamconfig__apphead span { display: flex; flex-direction: column; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 700; color: var(--slate-900); }
.ll-mamconfig__apphead i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--slate-500); }
.ll-mamconfig__rows { margin: 0; }
.ll-mamconfig__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--slate-100); }
.ll-mamconfig__row:last-child { border-bottom: none; }
.ll-mamconfig__row dt { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-600); }
.ll-mamconfig__row dd { margin: 0; }
.ll-mamconfig__val { font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--slate-900); background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 7px; padding: 5px 11px; }
.ll-mamconfig__toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; padding: 5px 11px 5px 8px; border-radius: 999px; }
.ll-mamconfig__toggle i { width: 8px; height: 8px; border-radius: 999px; }
.ll-mamconfig__toggle.is-on { background: var(--success-bg); color: var(--success-text); }
.ll-mamconfig__toggle.is-on i { background: var(--success); }
.ll-mamconfig__toggle.is-off { background: var(--slate-100); color: var(--slate-600); }
.ll-mamconfig__toggle.is-off i { background: var(--slate-400); }
.ll-mamconfig__flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ll-mamconfig__flow li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-mamconfig__flownum { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--brand-600); color: #fff; font-size: 12px; font-weight: 700; }

/* ── App lifecycle — horizontal six-stage timeline ────────────────────────── */
.ll-mamcycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: none; }
.ll-mamcycle__stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-mamcycle__stage:not(:last-child)::after {
  content: ""; position: absolute; right: -10px; top: 50%; width: 12px; height: 12px; z-index: 2;
  transform: translateY(-50%) rotate(45deg); border-top: 2px solid var(--brand-300); border-right: 2px solid var(--brand-300); background: transparent;
}
.ll-mamcycle__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--brand-50); color: var(--brand-600); margin-bottom: 12px; }
.ll-mamcycle__icon svg { width: 20px; height: 20px; }
.ll-mamcycle__n { font-family: var(--ll-font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--brand-500); }
.ll-mamcycle__title { font-family: var(--ll-font-heading); font-size: 15px; font-weight: 700; color: var(--slate-900); margin: 3px 0 6px; }
.ll-mamcycle__text { font-family: var(--ll-font-body); font-size: 13px; line-height: 1.5; color: var(--slate-600); margin: 0; }

@media (max-width: 1024px) {
  .ll-mamcycle { grid-template-columns: repeat(3, 1fr); }
  .ll-mamcycle__stage:nth-child(3n)::after { display: none; }
}
@media (max-width: 620px) {
  .ll-mamcycle { grid-template-columns: 1fr 1fr; }
  .ll-mamcycle__stage::after { display: none !important; }
}

/* ── Why LimaxLock — four differentiators + a CTA card ─────────────────────── */
.ll-mamwhy { display: flex; flex-direction: column; gap: 30px; }
.ll-mamwhy__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ll-mamwhy__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 32px; border-radius: 20px; background: var(--brand-50); border: 1px solid var(--brand-100);
}
.ll-mamwhy__ctatitle { font-family: var(--ll-font-heading); font-size: 22px; font-weight: 800; color: var(--slate-900); margin: 0 0 4px; }
.ll-mamwhy__ctatext { font-family: var(--ll-font-body); font-size: 15px; color: var(--slate-600); margin: 0; }
.ll-mamwhy__ctabtns { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .ll-mamwhy__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ll-mamwhy__cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .ll-mamwhy__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Secure Browser / Kiosk Browser page — browser-first compositions
   The visual object on this page is the BROWSER WINDOW and the URL inside it
   (owner brief, 2026-07-24), so nearly every section is assembled from one
   primitive: .ll-sbwin — a chrome bar with a padlocked address pill over a
   viewport — in two states, allowed and blocked. Built on the shared shells
   (.ll-mock, .ll-badge, .ll-appshot__chips, .ll-security, .ll-mamwhy) so the
   page stays part of the solution-page family, with .ll-sb* for the new pieces.
   Red is the semantic --danger ramp and only ever marks a real block state.
   ========================================================================== */

/* ── The browser window ────────────────────────────────────────────────────── */
.ll-sbwin {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  background: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ll-sbwin__bar {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 9px 12px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200);
}
.ll-sbwin__dots { display: inline-flex; gap: 4px; flex: none; }
.ll-sbwin__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-300); }
.ll-sbwin__url {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1;
  padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--slate-200);
  font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; color: var(--slate-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ll-sbwin__url svg { width: 13px; height: 13px; flex: none; color: var(--success); }
.ll-sbwin__view { flex: 1; min-height: 0; background: #fff; }

/* Verdict pill on the right of the bar — the loudest of the four state cues, so
   "approved" and "blocked" land before any surrounding copy is read. */
.ll-sbwin__state {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 11px 4px 5px; border-radius: 999px;
  font-family: var(--ll-font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  background: var(--success-bg); color: var(--success-text);
}
.ll-sbwin__stateicon {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  flex: none; border-radius: 999px; background: var(--success); color: #fff;
}
.ll-sbwin__stateicon svg { width: 11px; height: 11px; }

/* Allowed — a green frame and a mint chrome bar. */
.ll-sbwin { border-color: rgba(5, 150, 105, 0.26); }
.ll-sbwin .ll-sbwin__bar { background: var(--success-bg); border-bottom-color: rgba(5, 150, 105, 0.16); }
.ll-sbwin .ll-sbwin__url { border-color: rgba(5, 150, 105, 0.22); }

/* Blocked — the same treatment on the danger ramp. */
.ll-sbwin--blocked { border-color: rgba(220, 38, 38, 0.3); }
.ll-sbwin--blocked .ll-sbwin__bar { background: var(--danger-bg); border-bottom-color: rgba(220, 38, 38, 0.18); }
.ll-sbwin--blocked .ll-sbwin__url { border-color: rgba(220, 38, 38, 0.26); color: var(--danger-text); text-decoration: line-through; }
.ll-sbwin--blocked .ll-sbwin__url svg { color: var(--danger); }
.ll-sbwin--blocked .ll-sbwin__state { background: var(--danger); color: #fff; }
.ll-sbwin--blocked .ll-sbwin__stateicon { background: rgba(255, 255, 255, 0.24); color: #fff; }

/* At `sm` the dots go and the verdict pill collapses to its icon — the bar is
   only wide enough for the hostname and one unmistakable mark. */
.ll-sbwin--sm .ll-sbwin__bar { padding: 7px 8px; gap: 7px; }
.ll-sbwin--sm .ll-sbwin__dots { display: none; }
.ll-sbwin--sm .ll-sbwin__url { padding: 4px 9px; font-size: 10.5px; gap: 5px; }
.ll-sbwin--sm .ll-sbwin__url svg { width: 10px; height: 10px; }
.ll-sbwin--sm .ll-sbwin__state { padding: 0; background: none; }
.ll-sbwin--sm .ll-sbwin__state b { display: none; }
.ll-sbwin--sm .ll-sbwin__stateicon { width: 17px; height: 17px; }
.ll-sbwin--sm .ll-sbwin__view { min-height: 196px; }
.ll-sbwin--md .ll-sbwin__view { min-height: 236px; }
.ll-sbwin--lg .ll-sbwin__view { min-height: 344px; }

/* ── Populated web-app screens ─────────────────────────────────────────────── */
/* The realistic screens that render inside an allowed window (POS, dashboard,
   check-in, inventory …). One shared shell — a titled app bar over a flexing
   body — so the same screen reads at handset, tablet and terminal size. Semantic
   colour lives inside the UI: green = in stock / online / done, amber =
   attention, red stays for blocked, brand = actions. */
.ll-scr { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; font-family: var(--ll-font-ui); }

.ll-scr__bar { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 11px; background: var(--slate-50); border-bottom: 1px solid var(--slate-100); }
.ll-scr__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); }
.ll-scr__mark svg { width: 13px; height: 13px; }
.ll-scr__name { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 800; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-scr__tag { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; }
.ll-scr__tag.is-ok, .ll-scr__tag.is-live { background: var(--success-bg); color: var(--success-text); }
.ll-scr__tag.is-brand { background: var(--brand-50); color: var(--brand-700); }
.ll-scr__tag.is-warn { background: var(--warning-bg); color: var(--warning-text); }
.ll-scr__livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); animation: ll-scrpulse 2s infinite; }
@keyframes ll-scrpulse { 0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); } 70% { box-shadow: 0 0 0 5px rgba(5, 150, 105, 0); } 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); } }
@media (prefers-reduced-motion: reduce) { .ll-scr__livedot { animation: none; } }

.ll-scr__nav { display: flex; gap: 2px; flex: none; padding: 6px 9px; background: #fff; border-bottom: 1px solid var(--slate-100); overflow: hidden; }
.ll-scr__nav span { padding: 4px 9px; border-radius: 7px; font-size: 10px; font-weight: 700; color: var(--slate-500); white-space: nowrap; }
.ll-scr__nav span.is-active { background: var(--brand-50); color: var(--brand-700); }

.ll-scr__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 9px; padding: 11px 12px 12px; }
.ll-scr__welcome { margin: 0; font-size: 11.5px; color: var(--slate-500); }
.ll-scr__welcome b { color: var(--slate-900); font-weight: 800; }

/* Stat tiles — shared by the portal and the dashboard. */
.ll-scr__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; }
.ll-scr__stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-scr__stat b { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 800; line-height: 1; color: var(--slate-900); }
.ll-scr__stat i { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--slate-500); }
.ll-scr__stat.is-ok b { color: var(--success); }
.ll-scr__stat.is-warn b { color: var(--warning); }

/* Order / record rows with a status badge. */
.ll-scr__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ll-scr__rows li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--slate-100); background: #fff; }
.ll-scr__rowmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ll-scr__rowmain b { font-size: 11px; font-weight: 700; color: var(--slate-900); }
.ll-scr__rowmain i { font-style: normal; font-size: 9.5px; color: var(--slate-500); }
.ll-scr__badge { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.ll-scr__badge.is-ok { background: var(--success-bg); color: var(--success-text); }
.ll-scr__badge.is-warn { background: var(--warning-bg); color: var(--warning-text); }

/* Dashboard chart. */
.ll-scr__chart { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 9px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-scr__chartlabel { font-size: 9.5px; font-weight: 700; color: var(--slate-500); }
/* Bars are pinned to the bottom of the card; their heights are explicit px
   (set inline) so they render without a definite-height parent. */
.ll-scr__bars { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; }
.ll-scr__bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--brand-300); }
.ll-scr__bars i:nth-child(4), .ll-scr__bars i:last-child { background: var(--brand-500); }

/* POS — product grid + a live cart. */
.ll-scr__prods { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; align-content: start; }
.ll-scr__prod { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 9px; background: #fff; border: 1px solid var(--slate-100); }
.ll-scr__prodsw { height: 22px; border-radius: 6px; background: var(--brand-100); }
.ll-scr__prod:nth-child(even) .ll-scr__prodsw { background: var(--slate-100); }
.ll-scr__prod em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-scr__prod b { font-size: 11px; font-weight: 800; color: var(--brand-700); }

/* Shared cart / order footer (POS + restaurant). */
.ll-scr__cartbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-scr__carttotal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }
.ll-scr__carttotal i { font-style: normal; font-size: 9px; font-weight: 600; color: var(--slate-500); }
.ll-scr__carttotal b { font-family: var(--ll-font-heading); font-size: 15px; font-weight: 800; color: var(--slate-900); }

/* Primary action button (brand = action, per the semantic rule). */
.ll-scr__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 8px; background: var(--brand-600); color: #fff; font-size: 11px; font-weight: 800; }
.ll-scr__btn--full { width: 100%; padding: 11px; }
.ll-scr__btn--big { width: 100%; max-width: 210px; padding: 13px; font-size: 13px; border-radius: 11px; }
.ll-scr__btn--ghost { background: #fff; color: var(--brand-700); border: 1.5px solid var(--brand-300); }

/* Restaurant — category chips + menu. */
.ll-scr__chips { display: flex; gap: 6px; flex: none; }
.ll-scr__chips span { padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--slate-500); background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-scr__chips span.is-active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.ll-scr__menu { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ll-scr__menu li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--slate-100); background: #fff; }
.ll-scr__menuname { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 700; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-scr__menu li b { font-size: 11px; font-weight: 800; color: var(--brand-700); }
.ll-scr__add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); }
.ll-scr__add svg { width: 13px; height: 13px; }

/* Healthcare — check-in form. */
.ll-scr__form { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-scr__form li { display: flex; flex-direction: column; gap: 4px; }
.ll-scr__flabel { font-size: 9.5px; font-weight: 700; color: var(--slate-500); }
.ll-scr__field { padding: 8px 11px; border-radius: 8px; background: var(--slate-50); border: 1px solid var(--slate-200); font-size: 11px; font-weight: 600; color: var(--slate-900); }

/* Education — next class + course progress. */
.ll-scr__next { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.ll-scr__nextlabel { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-700); }
.ll-scr__next b { font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: var(--slate-900); }
.ll-scr__next i { font-style: normal; font-size: 10px; color: var(--slate-500); }
.ll-scr__courses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-scr__courses li { display: flex; align-items: center; gap: 9px; }
.ll-scr__coursename { flex: none; width: 66px; font-size: 10px; font-weight: 700; color: var(--slate-900); }
.ll-scr__prog { flex: 1; height: 7px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
.ll-scr__prog i { display: block; height: 100%; border-radius: 999px; background: var(--brand-500); }
.ll-scr__courses em { font-style: normal; flex: none; font-size: 10px; font-weight: 800; color: var(--brand-700); }

/* Warehouse — SKU lookup + live stock. */
.ll-scr__search { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px 11px; border-radius: 8px; background: var(--slate-50); border: 1px solid var(--slate-200); font-size: 10.5px; font-weight: 600; color: var(--slate-500); }
.ll-scr__search svg { width: 13px; height: 13px; color: var(--slate-400); }
.ll-scr__result { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-scr__resulttop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ll-scr__resulttop b { font-size: 12.5px; font-weight: 800; color: var(--slate-900); letter-spacing: 0.01em; }
.ll-scr__resultname { margin: 0; font-size: 10.5px; font-weight: 600; color: var(--slate-600); }
.ll-scr__resultmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ll-scr__units { font-size: 11px; font-weight: 800; color: var(--success); }
.ll-scr__resultmeta i { font-style: normal; font-size: 9.5px; color: var(--slate-500); }
.ll-scr__stock { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ll-scr__stock li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--slate-50); border: 1px solid var(--slate-100); font-size: 10.5px; font-weight: 700; color: var(--slate-600); }
.ll-scr__stock em { font-style: normal; font-weight: 800; }
.ll-scr__stock em.is-ok { color: var(--success); }
.ll-scr__stock em.is-warn { color: var(--warning); }

/* Hospitality — guest-service tiles with large touch targets. */
.ll-scr__services { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: center; }
.ll-scr__service { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12px 8px; border-radius: 11px; background: var(--brand-50); border: 1px solid var(--brand-100); }
.ll-scr__serviceicon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: #fff; color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-scr__serviceicon svg { width: 17px; height: 17px; }
.ll-scr__service i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--slate-600); }

/* Custom web kiosk — branded welcome with big touch controls. */
.ll-scr--kiosk { align-items: center; justify-content: center; gap: 9px; padding: 22px 20px; text-align: center; background: linear-gradient(165deg, #F6FCFE 0%, var(--brand-50) 100%); }
.ll-scr__logo { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-600); color: #fff; box-shadow: var(--shadow-md); }
.ll-scr__logo svg { width: 24px; height: 24px; }
.ll-scr__khead { font-family: var(--ll-font-heading); font-size: 17px; font-weight: 800; color: var(--slate-900); }
.ll-scr__ksub { font-style: normal; font-size: 11px; color: var(--slate-500); margin-bottom: 4px; }

/* ── The refusal behind a blocked URL ──────────────────────────────────────── */
.ll-sbblock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 100%; padding: 24px 18px; text-align: center; background: var(--danger-bg);
}
.ll-sbblock__mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 999px; background: #fff; color: var(--danger); box-shadow: var(--shadow-sm); }
.ll-sbblock__mark svg { width: 23px; height: 23px; }
.ll-sbblock__title { font-family: var(--ll-font-heading); font-size: 17px; font-weight: 800; color: var(--danger-text); margin: 2px 0 0; }
.ll-sbblock__text { font-family: var(--ll-font-body); font-size: 12.5px; line-height: 1.5; color: var(--danger-text); opacity: 0.78; margin: 0; max-width: 26ch; }
.ll-sbblock__url { font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; color: var(--danger); background: #fff; border: 1px solid rgba(220, 38, 38, 0.22); border-radius: 999px; padding: 4px 12px; }
.ll-sbblock--compact { gap: 5px; padding: 14px 10px; }
.ll-sbblock--compact .ll-sbblock__mark { width: 32px; height: 32px; }
.ll-sbblock--compact .ll-sbblock__mark svg { width: 16px; height: 16px; }
.ll-sbblock--compact .ll-sbblock__title { font-size: 13px; }
.ll-sbblock--compact .ll-sbblock__text { font-size: 10.5px; }

/* ── Android device frame ──────────────────────────────────────────────────── */
.ll-sbslate {
  position: relative; background: var(--ink-900); border-radius: 24px; padding: 16px 10px 12px;
  box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14);
}
.ll-sbslate--wide { border-radius: 20px; padding: 14px 12px 12px; }
.ll-sbslate__cam { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.ll-sbslate__screen { border-radius: 14px; overflow: hidden; background: #fff; }
.ll-sbslate__screen .ll-sbwin { border: none; border-radius: 0; box-shadow: none; }

/* Terminal / kiosk pedestal — turns the tablet frame into a stood POS or kiosk
   terminal, so the page varies its device language instead of repeating one
   tablet in every section. The stand is drawn below the frame and the slate
   reserves the room with a bottom margin. */
.ll-sbslate--stand { margin-bottom: 28px; }
.ll-sbslate__stand { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); display: block; width: 42%; height: 28px; }
.ll-sbslate__stand::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 24px; height: 20px; background: linear-gradient(180deg, var(--ink-900), #071019); }
.ll-sbslate__stand::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 9px; border-radius: 6px; background: var(--ink-900); box-shadow: var(--shadow-md); }

/* ── 1 · Hero — light-blue band, landscape tablet + three floating cards ───── */
.ll-sbhero-sec {
  background-color: var(--brand-50);
  background-image:
    radial-gradient(38% 46% at 99% 3%, rgba(47, 163, 201, 0.16) 0%, rgba(47, 163, 201, 0) 62%),
    linear-gradient(165deg, #F6FCFE 0%, var(--brand-50) 72%);
  background-repeat: no-repeat;
}

/* Brand-blue accent on the hero H1 keyword ("approved websites"). */
.ll-sbhero__hl { color: var(--brand-600); }

/* Trust row — one dot-separated line of proof items + the EMM credential,
   matching the mockup. Middots are drawn between items, not after the last. */
.ll-sbtrust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.ll-sbtrust li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ll-font-ui); font-size: 14px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-sbtrust li svg { width: 16px; height: 16px; flex: none; color: var(--success); }
.ll-sbtrust li:not(:last-child)::after { content: "·"; margin: 0 14px; color: var(--slate-300); font-weight: 800; }

.ll-sbhero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ll-sbhero__device { width: 100%; max-width: 460px; }

/* The tablet: a near-black landscape shell around a white browser screen. */
.ll-sbtab {
  position: relative; background: #0B1420; border-radius: 20px; padding: 11px;
  box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14);
}
.ll-sbtab__screen { border-radius: 11px; overflow: hidden; background: #fff; }

/* Browser chrome — neutral, so "allowed" green is reserved for the policy and
   status cards; the padlock stays a subtle grey secure indicator. */
.ll-sbtab__bar { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.ll-sbtab__nav { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--slate-400); }
.ll-sbtab__nav svg { width: 17px; height: 17px; }
.ll-sbtab__addr { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 6px 8px 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--slate-200); }
.ll-sbtab__addr > svg { width: 12px; height: 12px; flex: none; color: var(--slate-400); }
.ll-sbtab__addr b { flex: 1; min-width: 0; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 600; color: var(--slate-700, var(--slate-600)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-sbtab__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; color: var(--slate-400); }
.ll-sbtab__x svg { width: 12px; height: 12px; }

/* The company web app behind the approved URL. Kept vertically tight so the
   tablet reads as landscape (~16:10) rather than square. */
.ll-sbtab__page { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 13px; background: #fff; }
.ll-sbport__head { display: flex; align-items: center; gap: 10px; }
.ll-sbport__brand { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-100); }
.ll-sbport__brand svg { width: 16px; height: 16px; }
.ll-sbport__head b { font-family: var(--ll-font-heading); font-size: 16px; font-weight: 800; color: var(--slate-900); }
.ll-sbport__welcome { margin: -7px 0 0; font-family: var(--ll-font-body); font-size: 12.5px; color: var(--slate-500); }

.ll-sbport__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ll-sbport__tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 6px; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-sbport__tileicon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-sbport__tileicon svg { width: 16px; height: 16px; }
.ll-sbport__tile i { font-style: normal; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; color: var(--slate-600); }

.ll-sbport__chart { border: 1px solid var(--slate-200); border-radius: 12px; padding: 9px 13px 6px; background: #fff; }
.ll-sbport__charthead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.ll-sbport__charthead b { font-family: var(--ll-font-heading); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-sbport__chartpill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--success-bg); color: var(--success-text); font-family: var(--ll-font-ui); font-size: 11px; font-weight: 800; }
.ll-sbport__chartpill svg { width: 12px; height: 12px; }
.ll-sbport__spark { display: block; width: 100%; height: 46px; }
.ll-sbport__area { fill: var(--brand-100); opacity: 0.55; stroke: none; }
.ll-sbport__line { fill: none; stroke: var(--brand-600); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* The three floating cards share the white-card shell. */
.ll-sbhero__policy, .ll-sbhero__status, .ll-sbhero__blocked {
  width: 100%; max-width: 300px; background: #fff; border: 1px solid var(--slate-200);
  border-radius: 15px; box-shadow: var(--shadow-xl); padding: 15px 17px;
}

.ll-sbcard__title { font-family: var(--ll-font-heading); font-size: 14px; font-weight: 700; color: var(--slate-900); margin: 0 0 12px; }
.ll-sbcard__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ll-sbcard__checks li { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-sbcard__tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-sbcard__tick svg { width: 12px; height: 12px; }

/* Browsing Status — plain green/red figures on the white card (no tinted tiles). */
.ll-sbstat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ll-sbstat__cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ll-sbstat__cell b { font-family: var(--ll-font-heading); font-size: 32px; font-weight: 800; line-height: 1; }
.ll-sbstat__cell i { font-style: normal; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; color: var(--slate-500); }
.ll-sbstat__cell.is-ok b { color: var(--success); }
.ll-sbstat__cell.is-no b { color: var(--danger); }

/* Access Blocked — red tile + the offending host in link blue, per the mockup. */
.ll-sbhero__blocked { display: flex; flex-direction: column; gap: 5px; }
.ll-sbhero__blockedhead { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.ll-sbhero__blockedicon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--danger); color: #fff; }
.ll-sbhero__blockedicon svg { width: 16px; height: 16px; }
.ll-sbhero__blockedhead b { font-family: var(--ll-font-heading); font-size: 15px; font-weight: 800; color: var(--slate-900); }
.ll-sbhero__blocked em { font-style: normal; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--brand-600); }
.ll-sbhero__blocked i { font-style: normal; font-family: var(--ll-font-body); font-size: 11.5px; line-height: 1.45; color: var(--slate-500); max-width: 30ch; }

@media (min-width: 1080px) {
  /* The tablet is the base layer; the three cards clip its three outer corners
     on a diagonal — Browser Policy upper-right, Browsing Status lower-right,
     Access Blocked lower-left — matching the owner mockup. */
  .ll-sbhero { display: block; min-height: 428px; padding: 8px 0 18px; }
  .ll-sbhero__device { position: absolute; right: 20px; top: 44px; width: 524px; max-width: none; }
  .ll-sbhero__policy { position: absolute; right: 0; top: 0; width: 244px; z-index: 5; }
  .ll-sbhero__status { position: absolute; right: 12px; bottom: 6px; width: 220px; z-index: 5; }
  .ll-sbhero__blocked { position: absolute; left: 0; bottom: 42px; width: 238px; z-index: 6; }
}

/* ── 2 · What is a secure kiosk browser — URLs → browser → devices ─────────── */
.ll-sbflow { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ll-sbflow__stage { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.ll-sbflow__label { font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-sbflow__urls, .ll-sbflow__devices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ll-sbflow__urls li, .ll-sbflow__devices li {
  display: inline-flex; align-items: center; gap: 11px; padding: 13px 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);
  font-family: var(--ll-font-ui); font-size: 15px; font-weight: 700; color: var(--slate-900);
}
.ll-sbflow__urls li { border-color: rgba(5, 150, 105, 0.24); }
.ll-sbflow__urls li > svg { width: 15px; height: 15px; color: var(--success); }
.ll-sbflow__tick { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-sbflow__tick svg { width: 12px; height: 12px; }
.ll-sbflow__devices li { border-radius: 14px; }
.ll-sbflow__devicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); }
.ll-sbflow__devicon svg { width: 18px; height: 18px; }
.ll-sbflow__arrow { color: var(--brand-500); }
.ll-sbflow__arrow svg { width: 32px; height: 32px; }
.ll-sbflow__hub {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px;
  padding: 26px 38px; border-radius: 20px; background: var(--brand-600); color: #fff; box-shadow: var(--shadow-lg);
}
.ll-sbflow__hubmark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); margin-bottom: 8px; }
.ll-sbflow__hubmark svg { width: 27px; height: 27px; }
.ll-sbflow__hub b { font-family: var(--ll-font-heading); font-size: 21px; font-weight: 800; }
.ll-sbflow__hub i { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.82); }
.ll-sbflow__strip { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.ll-sbflow__strip li { padding: 10px 20px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-800); font-family: var(--ll-font-ui); font-size: 14px; font-weight: 700; }

/* ── 4 · Website whitelisting — allowlist editor beside a managed handset ──── */
.ll-sbwl { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.66fr); gap: 32px; align-items: center; }
.ll-sbwl__body { padding: 20px 22px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.ll-sbwl__grouphead { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-sbwl__grouphead span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 21px; padding: 0 7px; border-radius: 999px; background: var(--slate-100); color: var(--slate-600); font-size: 11.5px; }

.ll-sburls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-sburls li { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--slate-100); background: var(--slate-50); }
.ll-sburls li.is-ok { background: var(--success-bg); border-color: rgba(5, 150, 105, 0.22); }
.ll-sburls li.is-no { background: var(--danger-bg); border-color: rgba(220, 38, 38, 0.2); }
.ll-sburls__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 999px; color: #fff; }
.ll-sburls__mark svg { width: 13px; height: 13px; }
.ll-sburls li.is-ok .ll-sburls__mark { background: var(--success); }
.ll-sburls li.is-no .ll-sburls__mark { background: var(--danger); }
.ll-sburls__host { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-sburls__host svg { width: 13px; height: 13px; flex: none; color: var(--success); }
.ll-sburls li.is-no .ll-sburls__host { color: var(--danger-text); text-decoration: line-through; }
.ll-sburls__pill { flex: none; padding: 4px 11px; border-radius: 999px; background: #fff; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
.ll-sburls__pill.is-ok { color: var(--success-text); }
.ll-sburls__pill.is-no { color: var(--danger-text); }

.ll-sbwl__controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 17px; border-top: 1px solid var(--slate-100); }
.ll-sbwl__add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; }
.ll-sbwl__add svg { width: 14px; height: 14px; }
.ll-sbwl__opt { display: inline-flex; align-items: center; gap: 9px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-600); }
.ll-sbwl__apply { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-200); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-500); }
.ll-sbwl__apply b { font-weight: 700; color: var(--slate-900); }

.ll-sbwl__device { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ll-sbwl__device .ll-sbslate { width: 100%; max-width: 252px; }
.ll-sbwl__caption { font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--slate-600); max-width: 24ch; }

@media (max-width: 1024px) {
  .ll-sbwl { grid-template-columns: 1fr; justify-items: center; }
  .ll-sbwl__mock { width: 100%; }
}
@media (max-width: 620px) {
  .ll-sbwl__body { grid-template-columns: 1fr; }
}

/* ── 5 · Allowed vs blocked — the signature side-by-side ───────────────────── */
.ll-sbgate { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ll-sbgate__col { margin: 0; display: flex; flex-direction: column; gap: 14px; }
/* The page's loudest verdict — a full-width banner over each window, not a chip,
   so the approved/blocked contrast is the first thing the section reads out. */
.ll-sbgate__verdict {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px 14px 14px; border-radius: 14px;
  font-family: var(--ll-font-heading); font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
}
.ll-sbgate__verdict.is-ok { background: var(--success-bg); color: var(--success-text); border: 1px solid rgba(5, 150, 105, 0.24); }
.ll-sbgate__verdict.is-no { background: var(--danger-bg); color: var(--danger-text); border: 1px solid rgba(220, 38, 38, 0.24); }
.ll-sbgate__vicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 999px; color: #fff; }
.ll-sbgate__verdict.is-ok .ll-sbgate__vicon { background: var(--success); }
.ll-sbgate__verdict.is-no .ll-sbgate__vicon { background: var(--danger); }
.ll-sbgate__vicon svg { width: 21px; height: 21px; }

@media (max-width: 860px) {
  .ll-sbgate { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ── 6 · Web kiosk mode — three distinct modes, each with its policy ────────── */
.ll-sbkiosk { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.ll-sbkiosk__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; align-items: start; }
.ll-sbkiosk__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ll-sbkiosk__item .ll-sbslate { width: 100%; max-width: 384px; margin-bottom: 28px; }
/* These are landscape tablets / a terminal, so the viewport runs taller than the
   default `sm` step or the frames read as letterboxed. The shared bottom margin
   keeps the policy row and caption aligned across the tablets and the terminal. */
.ll-sbkiosk__item .ll-sbwin__view { min-height: 244px; }
/* The mode this device demonstrates — a small eyebrow above the frame. */
.ll-sbkiosk__mode { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-700); box-shadow: var(--shadow-sm); }
/* Browser-policy indicators — the settings that produced the screen above. */
.ll-sbpolicy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ll-sbpolicy li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; }
.ll-sbpolicy li svg { width: 12px; height: 12px; }
.ll-sbpolicy li.is-ok { background: var(--success-bg); color: var(--success-text); }
.ll-sbpolicy li.is-ok svg { color: var(--success); }
.ll-sbpolicy li.is-lock { background: var(--brand-50); color: var(--brand-700); }
.ll-sbpolicy li.is-lock svg { color: var(--brand-600); }
.ll-sbkiosk__cap { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.ll-sbkiosk__cap b { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 700; color: var(--slate-900); }
.ll-sbkiosk__cap i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--brand-800); }
.ll-sbkiosk__cap i svg { width: 13px; height: 13px; color: var(--success); }
.ll-sbkiosk__chips { justify-content: center; }

@media (max-width: 900px) { .ll-sbkiosk__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ll-sbkiosk__grid { grid-template-columns: 1fr; } }

/* ── 7 · Browser experience — admin config beside the browser it produces ──── */
.ll-sbexp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 36px; align-items: center; }
.ll-sbexp__body { padding: 20px 24px 22px; }
.ll-sbexp__label { font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); margin: 0 0 14px; }
.ll-sbexp__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }

/* Each row is a settings control, not a table cell: a padded card whose tint and
   toggle position both carry the state (owner review, 2026-07-24). */
.ll-sbexp__rows li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 11px; border: 1px solid var(--slate-100); background: var(--slate-50);
}
.ll-sbexp__rows li.is-on { background: var(--success-bg); border-color: rgba(5, 150, 105, 0.2); }
.ll-sbexp__k { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; color: var(--slate-900); }
.ll-sbexp__k i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--slate-500); }
.ll-sbexp__rows li.is-on .ll-sbexp__k i { color: var(--success-text); opacity: 0.75; }

.ll-sbexp__switch { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.ll-sbexp__switch b { font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--slate-400); }
.ll-sbexp__rows li.is-on .ll-sbexp__switch b { color: var(--success); }

/* The switch itself — a track with a knob that sits left when off, right when
   on, so the setting is readable at a glance without the ON/OFF text. */
.ll-sbtoggle {
  position: relative; display: inline-block; width: 40px; height: 23px; flex: none;
  border-radius: 999px; background: var(--slate-300); transition: background 0.15s ease;
}
.ll-sbtoggle i {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform 0.15s ease;
}
.ll-sbexp__rows li.is-on .ll-sbtoggle { background: var(--success); }
.ll-sbexp__rows li.is-on .ll-sbtoggle i { transform: translateX(17px); }

.ll-sbexp__result { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ll-sbexp__result .ll-sbslate { width: 100%; max-width: 268px; }
.ll-sbexp__caption { font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--slate-600); max-width: 28ch; }

.ll-sbkioskview { display: flex; flex-direction: column; height: 100%; min-height: 320px; }
.ll-sbkioskview .ll-scr { flex: 1; }
.ll-sbkioskview__nav { display: flex; justify-content: center; gap: 34px; flex: none; padding: 10px 0; background: var(--slate-50); border-top: 1px solid var(--slate-100); }
.ll-sbkioskview__nav span { width: 22px; height: 22px; color: var(--slate-500); }
.ll-sbkioskview__nav svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .ll-sbexp { grid-template-columns: 1fr; justify-items: center; }
  .ll-sbexp__panel { width: 100%; }
}
@media (max-width: 560px) {
  .ll-sbexp__rows { grid-template-columns: 1fr; }
}

/* ── 8 · Remote management — the console table + supporting points ─────────── */
.ll-sbremote { display: grid; gap: 26px; }
.ll-sbremote__tablewrap { padding: 6px; overflow-x: auto; }
.ll-sbremote__table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ll-sbremote__table th {
  text-align: left; padding: 15px 18px; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); border-bottom: 1px solid var(--slate-200);
}
.ll-sbremote__table td { padding: 16px 18px; border-bottom: 1px solid var(--slate-100); font-family: var(--ll-font-ui); font-size: 14px; font-weight: 600; color: var(--slate-600); vertical-align: middle; }
.ll-sbremote__table tr:last-child td { border-bottom: none; }
.ll-sbremote__dev { font-weight: 700; color: var(--slate-900); }
.ll-sbremote__site { white-space: nowrap; color: var(--brand-700); font-weight: 700; }
.ll-sbremote__site svg { width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; color: var(--success); }

.ll-sbpoints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ll-sbpoints li { display: flex; gap: 12px; }
.ll-sbpoints__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-sbpoints__icon svg { width: 19px; height: 19px; }
.ll-sbpoints__text { font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.5; color: var(--slate-600); }
.ll-sbpoints__text b { display: block; font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 700; color: var(--slate-900); margin-bottom: 2px; }

@media (max-width: 1024px) { .ll-sbpoints { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ll-sbpoints { grid-template-columns: 1fr; gap: 14px; } }

/* ── 9 · Web app deployment — URL in, secure kiosk out ─────────────────────── */
.ll-sbdeploy { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.ll-sbdeploy__card { flex: 1; min-width: 0; max-width: 288px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-md); }
.ll-sbdeploy__card--go { background: var(--brand-600); border-color: var(--brand-700); color: #fff; }
.ll-sbdeploy__step { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 700; color: var(--slate-900); }
.ll-sbdeploy__card--go .ll-sbdeploy__step { color: #fff; }
.ll-sbdeploy__step span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 999px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; }
.ll-sbdeploy__card--go .ll-sbdeploy__step span { background: rgba(255, 255, 255, 0.2); }
.ll-sbdeploy__field { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-200); font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; color: var(--slate-900); word-break: break-all; }
.ll-sbdeploy__field svg { width: 13px; height: 13px; flex: none; color: var(--success); }
.ll-sbdeploy__checks, .ll-sbdeploy__groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-sbdeploy__checks li { display: flex; align-items: center; gap: 9px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-sbdeploy__groups li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--brand-800); }
.ll-sbdeploy__radio { display: inline-flex; width: 15px; height: 15px; flex: none; border-radius: 999px; border: 2px solid var(--brand-600); background: radial-gradient(circle, var(--brand-600) 0 40%, transparent 46%); }
.ll-sbdeploy__arrow { display: inline-flex; align-items: center; flex: none; color: var(--brand-500); }
.ll-sbdeploy__arrow svg { width: 24px; height: 24px; }
.ll-sbdeploy__count { text-align: center; margin-bottom: 12px; }
.ll-sbdeploy__count b { display: block; font-family: var(--ll-font-heading); font-size: 32px; font-weight: 800; line-height: 1; }
.ll-sbdeploy__count i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.ll-sbdeploy__done { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; }
.ll-sbdeploy__done svg { width: 14px; height: 14px; }

@media (max-width: 980px) {
  .ll-sbdeploy { flex-wrap: wrap; }
  .ll-sbdeploy__card { max-width: 300px; flex: 1 1 240px; }
  .ll-sbdeploy__arrow { display: none; }
}

/* ── 11 · Use cases — every card carries a browser, not an icon ────────────── */
.ll-sbcases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ll-sbcase { padding: 18px 18px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-sbcase__visual { margin-bottom: 20px; }
.ll-sbcase__visual .ll-sbslate { padding: 13px 11px 11px; border-radius: 18px; }
/* Larger device viewport so the populated screen inside reads on a laptop —
   ~20% taller than the default `sm` step (owner review, 2026-07-26). */
.ll-sbcase__visual .ll-sbwin__view { min-height: 236px; }
.ll-sbcase__title { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 700; color: var(--slate-900); margin: 0 0 8px; }
.ll-sbcase__url {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--brand-800);
}
.ll-sbcase__url svg { width: 12px; height: 12px; flex: none; color: var(--success); }
.ll-sbcase__text { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.6; color: var(--slate-600); margin: 0; }

@media (max-width: 900px) { .ll-sbcases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ll-sbcases { grid-template-columns: 1fr; } }

/* ── 14 · How it works — four steps on one connected rail ─────────────────── */
.ll-sbsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ll-sbstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* The rail: a hairline from this node to the next, drawn at the node's centre
   line and sitting behind it, so the four steps read as one continuous run. */
.ll-sbstep:not(:last-child)::before {
  content: ""; position: absolute; top: 33px; left: calc(50% + 42px); right: calc(-50% + 42px);
  height: 2px; background: var(--brand-100); z-index: 0;
}
.ll-sbstep__chev {
  position: absolute; top: 22px; left: calc(100% + 13px); transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-500); z-index: 2;
}
.ll-sbstep__chev svg { width: 14px; height: 14px; }

.ll-sbstep__node {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; margin-bottom: 18px; border-radius: 20px;
  background: var(--brand-600); color: #fff; box-shadow: var(--shadow-md);
}
.ll-sbstep__node svg { width: 30px; height: 30px; }
.ll-sbstep__node em {
  position: absolute; top: -7px; right: -9px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: #fff;
  border: 1px solid var(--brand-100); box-shadow: var(--shadow-sm);
  font-style: normal; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 800; color: var(--brand-700);
}
.ll-sbstep__title { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 700; color: var(--slate-900); margin: 0 0 8px; }
.ll-sbstep__text { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.6; color: var(--slate-600); margin: 0; max-width: 26ch; }

@media (max-width: 900px) {
  .ll-sbsteps { grid-template-columns: 1fr 1fr; gap: 32px 26px; }
  .ll-sbstep:nth-child(2n)::before, .ll-sbstep:nth-child(2n) .ll-sbstep__chev { display: none; }
}
@media (max-width: 520px) {
  .ll-sbsteps { grid-template-columns: 1fr; }
  .ll-sbstep::before, .ll-sbstep__chev { display: none !important; }
}

/* ── 12 · Managed web apps — an Android home screen + the approved-apps panel ── */
.ll-sbquick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 40px; align-items: center; }
.ll-sbquick__slate { width: 100%; max-width: 470px; margin: 0 auto; }
.ll-sbquick__home { padding: 0 0 20px; background: linear-gradient(165deg, #F5FBFD 0%, var(--brand-50) 100%); }
.ll-sbquick__statusbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; color: var(--slate-500); }
.ll-sbquick__statusicons { display: inline-flex; align-items: center; gap: 6px; }
.ll-sbquick__statusicons svg { width: 14px; height: 14px; }
.ll-sbquick__label { font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); margin: 6px 0 16px; padding: 0 18px; }
.ll-sbquick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; padding: 0 16px; }
.ll-sbquick__tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.ll-sbquick__app { position: relative; display: inline-flex; }
/* Real app icons arrive via the shared AppIcon (.ll-mamtile); scale them up a
   touch here so the home screen reads at a glance. In-house destinations fall
   back to a brand glyph tile of the same size. */
.ll-sbquick__app .ll-mamtile { width: 50px; height: 50px; border-radius: 14px; }
.ll-sbquick__app .ll-mamtile svg { width: 24px; height: 24px; }
.ll-sbquick__glyph { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-sbquick__glyph svg { width: 24px; height: 24px; }
.ll-sbquick__mgd { position: absolute; right: -5px; bottom: -5px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 999px; background: var(--brand-600); color: #fff; border: 2px solid #fff; }
.ll-sbquick__mgd svg { width: 10px; height: 10px; }
.ll-sbquick__tile > b { font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; color: var(--slate-700, var(--slate-600)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Approved-apps admin panel — the console side of the same shortcuts. */
.ll-sbquick__panel { background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: var(--shadow-md); padding: 18px 18px 16px; }
.ll-sbquick__panelhead { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-family: var(--ll-font-heading); font-size: 15px; font-weight: 800; color: var(--slate-900); }
.ll-sbquick__panelhead span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 21px; padding: 0 7px; border-radius: 999px; background: var(--success-bg); color: var(--success-text); font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 800; }
.ll-sbquick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-sbquick__list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-sbquick__listicon { display: inline-flex; flex: none; }
.ll-sbquick__listicon .ll-mamtile { width: 28px; height: 28px; }
.ll-sbquick__glyph--sm { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.ll-sbquick__glyph--sm svg { width: 15px; height: 15px; }
.ll-sbquick__listname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ll-sbquick__listname b { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-sbquick__listname i { font-style: normal; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 600; color: var(--slate-500); }
.ll-sbquick__listcheck { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-sbquick__listcheck svg { width: 12px; height: 12px; }
.ll-sbquick__add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px; border-radius: 11px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; }
.ll-sbquick__add svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .ll-sbquick { grid-template-columns: 1fr; }
  .ll-sbquick__panel { max-width: 470px; width: 100%; margin: 0 auto; }
}

/* ── Large desktop ─────────────────────────────────────────────────────────
   The shared shell widens to 1400/1520 at these breakpoints (see :root), which
   pushes every visual column out by 60px+. Grow the device art with it, or the
   hero's floating cards drift off the frame they are meant to be clipping and
   the columns fill with wash instead of product. Kept at the END of this block
   so it outranks the per-section caps above at equal specificity. */
@media (min-width: 1536px) {
  .ll-sbwin--lg .ll-sbwin__view { min-height: 384px; }
  .ll-sbhero { min-height: 470px; }
  .ll-sbhero__device { width: 574px; top: 40px; }
  .ll-sbhero__policy { width: 256px; }
  .ll-sbhero__status { width: 232px; }
  .ll-sbhero__blocked { width: 252px; }
  .ll-sbwl__device .ll-sbslate { max-width: 288px; }
  .ll-sbkiosk__item .ll-sbslate { max-width: 428px; }
  .ll-sbexp__result .ll-sbslate { max-width: 300px; }
  .ll-sbquick__slate { max-width: 500px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   RUGGED DEVICE MANAGEMENT PAGE
   Visual object: the rugged handheld — a bumpered scanner with a physical scan
   trigger, running a barcode work app — against warehouse / logistics / field
   operations. Built from the <Rugged> frame + <ScanScreen>, reusing the shared
   .ll-mock console chrome, .ll-badge statuses, .ll-security band and .ll-mamwhy
   CTA. Semantic colours only: success/green = online & approved, warning/amber =
   attention, danger/red = an enforcement/blocked state (never decorative), brand
   teal = interactive & configuration.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── The rugged device frame + its work-app screens ────────────────────────── */
.ll-rugdev {
  position: relative; padding: 14px 20px 16px 14px; border-radius: 20px;
  background-color: #0e1a26;
  background-image:
    radial-gradient(circle at 9px 9px, #2a3a49 5.5px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #2a3a49 5.5px, transparent 6.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #2a3a49 5.5px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #2a3a49 5.5px, transparent 6.5px),
    linear-gradient(160deg, #16232f, #0b141d);
  background-repeat: no-repeat;
  box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14);
}
.ll-rugdev--sm { padding: 10px 15px 11px 10px; border-radius: 16px; }
.ll-rugdev--lg { padding: 16px 22px 18px 15px; border-radius: 22px; }
.ll-rugdev__cam { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
/* Physical scan trigger down the right edge — the "rugged" tell. */
.ll-rugdev__trigger {
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 6px; height: 52px;
  border-radius: 4px; background: linear-gradient(180deg, #FBBF24, #D97706);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), var(--shadow-sm);
}
.ll-rugdev--sm .ll-rugdev__trigger { height: 38px; }
.ll-rugdev__screen { position: relative; border-radius: 11px; overflow: hidden; background: #fff; }
.ll-rugdev--sm .ll-rugdev__screen { border-radius: 8px; }

/* Barcode scanner work app */
.ll-rugscr { display: flex; flex-direction: column; gap: 11px; padding: 14px 14px 16px; background: #fff; }
.ll-rugscr__head { display: flex; align-items: center; gap: 9px; }
.ll-rugscr__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-rugscr__mark svg { width: 16px; height: 16px; }
.ll-rugscr__head b { font-family: var(--ll-font-heading); font-size: 14.5px; font-weight: 800; color: var(--slate-900); }
.ll-rugscr__scan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 17px 14px 19px; border-radius: 12px; background: var(--brand-50); border: 1.5px dashed var(--brand-300); }
.ll-rugscr__prompt { font-family: var(--ll-font-ui); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); }
.ll-rugscr__code { width: 78%; height: 34px; fill: var(--slate-900); }
/* Aiming line — brand teal, NOT red (red stays reserved for danger). */
.ll-rugscr__beam { position: absolute; left: 14%; right: 14%; top: 58%; height: 2px; border-radius: 2px; background: var(--brand-500); box-shadow: 0 0 8px 1px rgba(47, 163, 201, 0.55); }
.ll-rugscr__sku { margin: 0; text-align: center; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; color: var(--slate-600); }
.ll-rugscr__ok { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; align-self: center; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--success-bg); color: var(--success-text); font-family: var(--ll-font-ui); font-size: 12px; font-weight: 800; }
.ll-rugscr__oktick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-rugscr__oktick svg { width: 11px; height: 11px; }

.ll-rugscr--compact { gap: 8px; padding: 10px 10px 12px; }
.ll-rugscr--compact .ll-rugscr__mark { width: 24px; height: 24px; border-radius: 7px; }
.ll-rugscr--compact .ll-rugscr__mark svg { width: 13px; height: 13px; }
.ll-rugscr--compact .ll-rugscr__head b { font-size: 12px; }
.ll-rugscr--compact .ll-rugscr__scan { padding: 12px 10px 14px; gap: 8px; }
.ll-rugscr--compact .ll-rugscr__code { height: 26px; }
.ll-rugscr--compact .ll-rugscr__sku { font-size: 10.5px; }
.ll-rugscr--compact .ll-rugscr__ok { font-size: 10.5px; padding: 5px 11px 5px 6px; }

/* Kiosk lock screen — a tinted app grid + a lock bar */
.ll-ruglock { display: flex; flex-direction: column; gap: 12px; padding: 14px 13px; min-height: 196px; background: linear-gradient(160deg, #F5FBFD, var(--brand-50)); }
.ll-ruglock__grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: center; }
.ll-ruglock--single .ll-ruglock__grid { grid-template-columns: 1fr; place-items: center; }
.ll-ruglock__app { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ll-ruglock__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-ruglock__icon svg { width: 21px; height: 21px; }
.ll-ruglock--single .ll-ruglock__icon { width: 58px; height: 58px; border-radius: 16px; }
.ll-ruglock--single .ll-ruglock__icon svg { width: 28px; height: 28px; }
.ll-ruglock__app i { font-style: normal; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; color: var(--slate-600); }
.ll-ruglock__bar { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; border-radius: 9px; background: var(--ink-900); color: #fff; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; }
.ll-ruglock__bar svg { width: 13px; height: 13px; color: var(--brand-300); }

/* Web-kiosk portal screen */
.ll-rugportal { display: flex; flex-direction: column; min-height: 196px; background: #fff; }
.ll-rugportal__bar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: var(--slate-50); border-bottom: 1px solid var(--slate-100); }
.ll-rugportal__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-300); }
.ll-rugportal__bar b { margin-left: 6px; font-family: var(--ll-font-ui); font-size: 10px; font-weight: 700; color: var(--slate-500); }
.ll-rugportal__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; background: linear-gradient(160deg, #F5FBFD, var(--brand-50)); }
.ll-rugportal__mark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-rugportal__mark svg { width: 24px; height: 24px; }
.ll-rugportal__body i { font-style: normal; font-family: var(--ll-font-heading); font-size: 13px; font-weight: 800; color: var(--slate-900); }
.ll-rugportal__body em { font-style: normal; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; color: var(--brand-700); }

/* ── 1 · Hero — light-blue band, rugged scanner over the fleet console ──────── */
.ll-rughero-sec {
  background-color: var(--brand-50);
  background-image:
    radial-gradient(40% 46% at 98% 4%, rgba(47, 163, 201, 0.16) 0%, rgba(47, 163, 201, 0) 62%),
    linear-gradient(165deg, #F6FCFE 0%, var(--brand-50) 72%);
  background-repeat: no-repeat;
}
.ll-rughero__hl { color: var(--brand-600); }

.ll-rugtrust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.ll-rugtrust li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ll-font-ui); font-size: 14px; font-weight: 600; color: var(--slate-600); }
.ll-rugtrust li svg { width: 16px; height: 16px; flex: none; color: var(--success); }
.ll-rugtrust li:not(:last-child)::after { content: "·"; margin: 0 14px; color: var(--slate-300); font-weight: 800; }

.ll-rughero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ll-rughero__dash { width: 100%; max-width: 470px; }
.ll-rughero__dashbody { padding: 16px 16px 18px; }
.ll-rughero__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.ll-rughero__kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-rughero__kpi b { font-family: var(--ll-font-heading); font-size: 22px; font-weight: 800; line-height: 1; color: var(--slate-900); }
.ll-rughero__kpi i { font-style: normal; font-family: var(--ll-font-ui); font-size: 10px; font-weight: 700; color: var(--slate-500); }
.ll-rughero__kpi.is-ok b { color: var(--success); }
.ll-rughero__kpi.is-warn b { color: var(--warning); }
.ll-rughero__kpi.is-idle b { color: var(--slate-400); }
.ll-rughero__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-rughero__rows li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--slate-100); }
.ll-rughero__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--slate-300); }
.ll-rughero__dot.is-ok { background: var(--success); }
.ll-rughero__dot.is-warn { background: var(--warning); }
.ll-rughero__dot.is-idle { background: var(--slate-300); }
.ll-rughero__rowid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ll-rughero__rowid b { font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--slate-900); }
.ll-rughero__rowid i { font-style: normal; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 600; color: var(--slate-500); }
.ll-rughero__device { width: 176px; }
.ll-rughero__status, .ll-rughero__tag { background: #fff; border: 1px solid var(--slate-200); border-radius: 15px; box-shadow: var(--shadow-xl); }
.ll-rughero__status { width: 100%; max-width: 260px; padding: 15px 17px; }
.ll-rugcard__title { margin: 0 0 12px; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 700; color: var(--slate-900); }
.ll-rugcard__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ll-rugcard__checks li { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-600); }
.ll-rugcard__tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-rugcard__tick svg { width: 12px; height: 12px; }
.ll-rughero__tag { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; }
.ll-rughero__tagdot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14); }
.ll-rughero__tagid { display: flex; flex-direction: column; }
.ll-rughero__tagid b { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-rughero__tagid i { font-style: normal; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 600; color: var(--slate-500); }

@media (min-width: 1080px) {
  .ll-rughero { min-height: 496px; padding-left: 24px; }
  .ll-rughero__dash { position: absolute; top: 22px; right: 0; width: 78%; max-width: none; }
  .ll-rughero__device { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 196px; z-index: 3; }
  .ll-rughero__status { position: absolute; top: 0; right: 0; width: 240px; z-index: 4; }
  .ll-rughero__tag { position: absolute; bottom: 26px; left: 96px; z-index: 4; }
}

/* ── 2 · What is rugged management — environments → console → verbs ─────────── */
.ll-rugflow { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 740px; margin: 0 auto; }
.ll-rugflow__stage { width: 100%; text-align: center; }
.ll-rugflow__label { display: block; margin-bottom: 12px; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); }
.ll-rugflow__envs, .ll-rugflow__verbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ll-rugflow__envs li, .ll-rugflow__verbs li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 9px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; }
.ll-rugflow__envs li { background: #fff; border: 1px solid var(--slate-200); color: var(--slate-800, var(--slate-900)); box-shadow: var(--shadow-sm); }
.ll-rugflow__envicon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-rugflow__envicon svg { width: 16px; height: 16px; }
.ll-rugflow__verbs li { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-800); }
.ll-rugflow__verbicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 999px; background: #fff; color: var(--brand-600); }
.ll-rugflow__verbicon svg { width: 15px; height: 15px; }
.ll-rugflow__arrow { display: inline-flex; color: var(--brand-300); }
.ll-rugflow__arrow svg { width: 26px; height: 26px; }
.ll-rugflow__hub { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 30px; border-radius: 16px; background: var(--ink-900); color: #fff; box-shadow: var(--shadow-lg); }
.ll-rugflow__hubmark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 5px; border-radius: 13px; background: rgba(143, 206, 226, 0.14); color: var(--brand-300); }
.ll-rugflow__hubmark svg { width: 24px; height: 24px; }
.ll-rugflow__hub b { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 800; }
.ll-rugflow__hub i { font-style: normal; font-family: var(--ll-font-body); font-size: 12.5px; color: var(--ink-text-muted); }

/* ── 4 · Fleet dashboard — the rugged-device table + supporting points ──────── */
.ll-rugfleet { display: grid; gap: 26px; }
.ll-rugfleet__tablewrap { padding: 6px; overflow-x: auto; }
.ll-rugfleet__table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ll-rugfleet__table th { text-align: left; padding: 15px 18px; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); border-bottom: 1px solid var(--slate-200); }
.ll-rugfleet__table td { padding: 15px 18px; border-bottom: 1px solid var(--slate-100); font-family: var(--ll-font-ui); font-size: 14px; font-weight: 600; color: var(--slate-600); vertical-align: middle; }
.ll-rugfleet__table tr:last-child td { border-bottom: none; }
.ll-rugfleet__dev { font-weight: 700; color: var(--slate-900); white-space: nowrap; }
.ll-rugfleet__dev .ll-rughero__dot { display: inline-block; margin-right: 9px; vertical-align: middle; }

.ll-rugpoints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ll-rugpoints li { display: flex; gap: 12px; }
.ll-rugpoints__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-rugpoints__icon svg { width: 19px; height: 19px; }
.ll-rugpoints__text { font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.5; color: var(--slate-600); }
.ll-rugpoints__text b { display: block; font-family: var(--ll-font-ui); font-size: 14.5px; font-weight: 700; color: var(--slate-900); margin-bottom: 2px; }

@media (max-width: 760px) { .ll-rugpoints { grid-template-columns: 1fr; gap: 14px; } }

/* ── 5 · Warehouse operations — device ringed by policy callouts ────────────── */
.ll-rugware { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ll-rugware__device { width: 208px; }
.ll-rugware__callouts { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ll-rugware__callout { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 13px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-rugware__calloticon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-rugware__calloticon svg { width: 18px; height: 18px; }
.ll-rugware__callout b { font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; color: var(--slate-900); }

@media (min-width: 960px) {
  .ll-rugware { display: grid; grid-template-columns: 1fr 232px 1fr; grid-template-rows: repeat(3, auto); align-items: center; column-gap: 22px; row-gap: 14px; }
  .ll-rugware__device { grid-column: 2; grid-row: 1 / 4; justify-self: center; }
  .ll-rugware__callouts { display: contents; }
  .ll-rugware__callout.is-a { grid-column: 1; grid-row: 1; }
  .ll-rugware__callout.is-b { grid-column: 1; grid-row: 2; }
  .ll-rugware__callout.is-c { grid-column: 1; grid-row: 3; }
  .ll-rugware__callout.is-d { grid-column: 3; grid-row: 1; }
  .ll-rugware__callout.is-e { grid-column: 3; grid-row: 2; }
  .ll-rugware__callout.is-f { grid-column: 3; grid-row: 3; }
}

/* ── 6 · App management — operational category tiles + allow / block split ──── */
.ll-rugapps { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ll-rugapps__cats { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ll-rugapps__cat { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.ll-rugapps__caticon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-rugapps__caticon svg { width: 27px; height: 27px; }
.ll-rugapps__cat i { font-style: normal; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; color: var(--slate-700, var(--slate-600)); }
.ll-rugapps__split { width: 100%; max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ll-rugapps__col { padding: 18px 20px; border-radius: 15px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-rugapps__collabel { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: var(--slate-900); }
.ll-rugapps__collabel span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 800; }
.ll-rugapps__collabel.is-ok span { background: var(--success-bg); color: var(--success-text); }
.ll-rugapps__collabel.is-no span { background: var(--danger-bg); color: var(--danger-text); }
.ll-rugapps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ll-rugapps__list li { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-rugapps__list li.is-no { color: var(--slate-500); }
.ll-rugapps__tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-rugapps__tick svg { width: 12px; height: 12px; }
.ll-rugapps__ban { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--danger-bg); color: var(--danger); }
.ll-rugapps__ban svg { width: 13px; height: 13px; }
.ll-rugapps__link { align-self: center; }

@media (max-width: 720px) {
  .ll-rugapps__cats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ll-rugapps__split { grid-template-columns: 1fr; }
}

/* ── 7 · Rugged kiosk — three devices, three lockdown modes ─────────────────── */
.ll-rugkiosk { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ll-rugkiosk__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; justify-items: center; }
.ll-rugkiosk__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 15px; max-width: 240px; }
.ll-rugkiosk__item .ll-rugdev { width: 190px; }
.ll-rugkiosk__cap { text-align: center; }
.ll-rugkiosk__cap b { display: block; font-family: var(--ll-font-heading); font-size: 17px; font-weight: 700; color: var(--slate-900); margin-bottom: 4px; }
.ll-rugkiosk__cap i { font-style: normal; font-family: var(--ll-font-body); font-size: 13px; color: var(--slate-500); }
.ll-rugkiosk__chips { justify-content: center; }
.ll-rugkiosk__link { align-self: center; }

@media (max-width: 860px) { .ll-rugkiosk__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ll-rugkiosk__grid { grid-template-columns: 1fr; } }

/* ── 8 · Device restrictions — the settings panel ──────────────────────────── */
.ll-rugrestrict { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ll-rugrestrict__body { padding: 16px 18px; }
.ll-rugrestrict__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ll-rugrestrict__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-rugrestrict__k { display: flex; flex-direction: column; gap: 2px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; color: var(--slate-900); }
.ll-rugrestrict__k i { font-style: normal; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 500; color: var(--slate-500); }
.ll-rugrestrict__state { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 11px 5px 6px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.ll-rugrestrict__lock { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 999px; }
.ll-rugrestrict__lock svg { width: 10px; height: 10px; }
.ll-rugrestrict__state.is-blocked { background: var(--danger-bg); color: var(--danger-text); }
.ll-rugrestrict__state.is-blocked .ll-rugrestrict__lock { background: var(--danger); color: #fff; }
.ll-rugrestrict__state.is-restricted { background: var(--warning-bg); color: var(--warning-text); }
.ll-rugrestrict__state.is-restricted .ll-rugrestrict__lock { background: var(--warning); color: #fff; }
.ll-rugrestrict__state.is-controlled { background: var(--brand-50); color: var(--brand-800); }
.ll-rugrestrict__state.is-controlled .ll-rugrestrict__lock { background: var(--brand-600); color: #fff; }
.ll-rugrestrict__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.ll-rugrestrict__legend li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-600); }
.ll-rugrestrict__legend i { width: 11px; height: 11px; border-radius: 3px; }
.ll-rugrestrict__legend .is-blocked i { background: var(--danger); }
.ll-rugrestrict__legend .is-restricted i { background: var(--warning); }
.ll-rugrestrict__legend .is-controlled i { background: var(--brand-600); }

@media (max-width: 620px) { .ll-rugrestrict__rows { grid-template-columns: 1fr; } }

/* ── 9 · Device health — operational monitoring board ──────────────────────── */
.ll-rughealth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ll-rughealth__card { padding: 18px 18px 20px; border-radius: 15px; background: #fff; border: 1px solid var(--slate-200); border-top: 3px solid var(--slate-300); box-shadow: var(--shadow-sm); }
.ll-rughealth__card.is-ok { border-top-color: var(--success); }
.ll-rughealth__card.is-warn { border-top-color: var(--warning); }
.ll-rughealth__card.is-idle { border-top-color: var(--slate-400); }
.ll-rughealth__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ll-rughealth__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--slate-300); }
.ll-rughealth__card.is-ok .ll-rughealth__dot { background: var(--success); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14); }
.ll-rughealth__card.is-warn .ll-rughealth__dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14); }
.ll-rughealth__card.is-idle .ll-rughealth__dot { background: var(--slate-400); }
.ll-rughealth__name { font-family: var(--ll-font-heading); font-size: 14.5px; font-weight: 700; color: var(--slate-900); line-height: 1.25; }
.ll-rughealth__status { display: inline-block; margin-bottom: 12px; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 800; }
.ll-rughealth__card.is-ok .ll-rughealth__status { color: var(--success); }
.ll-rughealth__card.is-warn .ll-rughealth__status { color: var(--warning); }
.ll-rughealth__card.is-idle .ll-rughealth__status { color: var(--slate-400); }
.ll-rughealth__rows { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--slate-100); display: flex; flex-direction: column; gap: 7px; }
.ll-rughealth__rows li { font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-600); }

@media (max-width: 900px) { .ll-rughealth { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .ll-rughealth { grid-template-columns: 1fr; } }

/* ── 10 · Remote support — device actions + command history ─────────────────── */
.ll-rugsupport { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.ll-rugsupport__body { padding: 18px 20px 20px; }
.ll-rugsupport__label { margin: 0 0 14px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-rugsupport__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ll-rugsupport__action { display: inline-flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 11px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-800, var(--slate-900)); }
.ll-rugsupport__actionicon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-rugsupport__actionicon svg { width: 16px; height: 16px; }
.ll-rugsupport__history { padding: 18px 20px; border-radius: 16px; background: var(--ink-900); box-shadow: var(--shadow-lg); }
.ll-rugsupport__historyhead { margin: 0 0 14px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-300); }
.ll-rugsupport__log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ll-rugsupport__log li { display: flex; align-items: center; gap: 11px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--ink-text); }
.ll-rugsupport__logtick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 999px; background: rgba(5, 150, 105, 0.2); color: #34D399; }
.ll-rugsupport__logtick svg { width: 12px; height: 12px; }

@media (max-width: 860px) {
  .ll-rugsupport { grid-template-columns: 1fr; }
  .ll-rugsupport__actions { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) { .ll-rugsupport__actions { grid-template-columns: 1fr 1fr; } }

/* ── 11 · Deployment at scale — enrollment paths → provisioning pipeline ────── */
.ll-rugdeploy { display: flex; flex-direction: column; gap: 26px; }
.ll-rugdeploy__paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ll-rugdeploy__path { padding: 22px 22px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-rugdeploy__pathicon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 13px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-rugdeploy__pathicon svg { width: 24px; height: 24px; }
.ll-rugdeploy__path b { display: block; font-family: var(--ll-font-heading); font-size: 17px; font-weight: 700; color: var(--slate-900); margin-bottom: 6px; }
.ll-rugdeploy__path i { font-style: normal; font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.55; color: var(--slate-600); }
.ll-rugdeploy__pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ll-rugdeploy__pipe li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ll-rugdeploy__pipestep { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 14px; font-weight: 700; color: var(--brand-800); }
.ll-rugdeploy__pipe li:last-child .ll-rugdeploy__pipestep { background: var(--brand-600); border-color: var(--brand-700); color: #fff; }
.ll-rugdeploy__pipecheck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.ll-rugdeploy__pipecheck svg { width: 12px; height: 12px; }
.ll-rugdeploy__pipearrow { display: inline-flex; color: var(--brand-400, var(--brand-500)); }
.ll-rugdeploy__pipearrow svg { width: 22px; height: 22px; }

@media (min-width: 820px) {
  .ll-rugdeploy__pipe { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ll-rugdeploy__pipe li { flex-direction: row; }
  .ll-rugdeploy__pipearrow { transform: rotate(-90deg); }
}
@media (max-width: 760px) { .ll-rugdeploy__paths { grid-template-columns: 1fr; } }

/* ── 12 · Industries — each card carries a mini rugged device ───────────────── */
.ll-rugind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ll-rugind__card { padding: 22px 22px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-rugind__device { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 62px; margin-bottom: 16px; padding: 6px; border-radius: 12px; background: linear-gradient(160deg, #16232f, #0b141d); box-shadow: var(--shadow-md); }
.ll-rugind__device::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, #FBBF24, #D97706); }
.ll-rugind__deviceicon { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 8px; background: #fff; color: var(--brand-600); }
.ll-rugind__deviceicon svg { width: 22px; height: 22px; }
.ll-rugind__title { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 700; color: var(--slate-900); margin: 0 0 8px; }
.ll-rugind__text { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.6; color: var(--slate-600); margin: 0; }

@media (max-width: 900px) { .ll-rugind { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ll-rugind { grid-template-columns: 1fr; } }

/* ── 13 · A day in the life — time-stamped horizontal story ─────────────────── */
.ll-rugday { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 0; overflow-x: auto; }
.ll-rugday__stop { position: relative; flex: 1 0 150px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.ll-rugday__time { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 800; color: var(--brand-700); margin-bottom: 12px; }
.ll-rugday__node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 14px; border-radius: 18px; background: var(--brand-600); color: #fff; box-shadow: var(--shadow-md); }
.ll-rugday__node svg { width: 26px; height: 26px; }
.ll-rugday__stop:not(:last-child)::before { content: ""; position: absolute; top: 55px; left: calc(50% + 37px); right: calc(-50% + 37px); height: 2px; background: var(--brand-100); z-index: 0; }
.ll-rugday__arrow { position: absolute; top: 44px; left: calc(100% - 11px); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-500); z-index: 2; }
.ll-rugday__arrow svg { width: 13px; height: 13px; }
.ll-rugday__title { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-800, var(--slate-900)); margin: 0; max-width: 16ch; }

/* ── 16 · How it works — four steps on one connected rail ───────────────────── */
.ll-rugsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ll-rugstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ll-rugstep:not(:last-child)::before { content: ""; position: absolute; top: 33px; left: calc(50% + 42px); right: calc(-50% + 42px); height: 2px; background: var(--brand-100); z-index: 0; }
.ll-rugstep__chev { position: absolute; top: 22px; left: calc(100% + 13px); transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-500); z-index: 2; }
.ll-rugstep__chev svg { width: 14px; height: 14px; }
.ll-rugstep__node { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-bottom: 18px; border-radius: 20px; background: var(--brand-600); color: #fff; box-shadow: var(--shadow-md); }
.ll-rugstep__node svg { width: 30px; height: 30px; }
.ll-rugstep__node em { position: absolute; top: -7px; right: -9px; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); box-shadow: var(--shadow-sm); font-style: normal; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 800; color: var(--brand-700); }
.ll-rugstep__title { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 700; color: var(--slate-900); margin: 0 0 8px; }
.ll-rugstep__text { font-family: var(--ll-font-body); font-size: 14px; line-height: 1.6; color: var(--slate-600); margin: 0; max-width: 26ch; }

@media (max-width: 900px) {
  .ll-rugsteps { grid-template-columns: 1fr 1fr; gap: 32px 26px; }
  .ll-rugstep:nth-child(2n)::before, .ll-rugstep:nth-child(2n) .ll-rugstep__chev { display: none; }
}
@media (max-width: 520px) {
  .ll-rugsteps { grid-template-columns: 1fr; }
  .ll-rugstep::before, .ll-rugstep__chev { display: none !important; }
}

/* ── Large desktop — grow the hero art with the widened shell ───────────────── */
@media (min-width: 1536px) {
  .ll-rughero { min-height: 470px; }
  .ll-rughero__device { width: 210px; }
  .ll-rughero__status { width: 250px; }
  .ll-rughero__tag { left: 110px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   POS & FRONTLINE DEVICE MANAGEMENT PAGE
   Visual object: the countertop POS terminal running a live checkout, inside a
   multi-location operations dashboard. Built from four device frames (posterm,
   poskiosk, poshandset, postablet) + screens, reusing .ll-mock, .ll-badge,
   .ll-security and .ll-mamwhy. Semantic colour carries state: success/green =
   online/approved/active, danger/red = offline/blocked/failure, warning/amber =
   attention. Red is a real status/enforcement signal here, never decoration.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shared status dot ───────────────────────────────────────────────────────── */
.ll-posdot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--slate-300); }
.ll-posdot.is-ok { background: var(--success); }
.ll-posdot.is-warn { background: var(--warning); }
.ll-posdot.is-bad { background: var(--danger); }
.ll-posdot.is-lg { width: 11px; height: 11px; }

/* ── Device frames ───────────────────────────────────────────────────────────── */
.ll-posterm { display: inline-flex; flex-direction: column; align-items: center; }
.ll-posterm__frame { padding: 12px; border-radius: 18px; background: linear-gradient(160deg, #16232f, #0b141d); box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14); }
.ll-posterm__screen { width: 172px; border-radius: 9px; overflow: hidden; background: #fff; }
.ll-posterm--sm .ll-posterm__screen { width: 118px; border-radius: 7px; }
.ll-posterm--lg .ll-posterm__screen { width: 196px; }
.ll-posterm__neck { width: 26px; height: 15px; background: linear-gradient(180deg, #1b2a38, #0e1a26); }
.ll-posterm__foot { width: 118px; height: 10px; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #1b2a38, #0b141d); box-shadow: var(--shadow-md); }
.ll-posterm--sm .ll-posterm__neck { height: 11px; }
.ll-posterm--sm .ll-posterm__foot { width: 84px; height: 8px; }

.ll-poskiosk { display: inline-flex; flex-direction: column; align-items: center; }
.ll-poskiosk__frame { padding: 11px; border-radius: 16px; background: linear-gradient(160deg, #16232f, #0b141d); box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14); }
.ll-poskiosk__screen { width: 150px; min-height: 208px; border-radius: 8px; overflow: hidden; background: #fff; }
.ll-poskiosk__pillar { width: 24px; height: 34px; background: linear-gradient(180deg, #1b2a38, #0e1a26); }
.ll-poskiosk__base { width: 92px; height: 12px; border-radius: 3px; background: linear-gradient(180deg, #1b2a38, #0b141d); box-shadow: var(--shadow-md); }

.ll-poshandset { position: relative; width: 152px; padding: 11px 9px; border-radius: 22px; background: linear-gradient(160deg, #16232f, #0b141d); box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14); }
.ll-poshandset__notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.ll-poshandset__screen { border-radius: 14px; overflow: hidden; background: #fff; margin-top: 6px; }

.ll-postablet { display: inline-flex; flex-direction: column; align-items: center; }
.ll-postablet__frame { padding: 10px; border-radius: 15px; background: linear-gradient(160deg, #16232f, #0b141d); box-shadow: var(--shadow-xl); border: 1px solid rgba(143, 206, 226, 0.14); }
.ll-postablet__screen { width: 216px; border-radius: 7px; overflow: hidden; background: #fff; }
.ll-postablet__stand { width: 74px; height: 11px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #1b2a38, #0b141d); box-shadow: var(--shadow-md); }

/* ── Device screens ──────────────────────────────────────────────────────────── */
/* Checkout */
.ll-poschk { display: flex; flex-direction: column; gap: 9px; padding: 13px 13px 14px; background: #fff; }
.ll-poschk__head { display: flex; align-items: center; gap: 8px; }
.ll-poschk__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-poschk__mark svg { width: 14px; height: 14px; }
.ll-poschk__head b { font-family: var(--ll-font-heading); font-size: 13.5px; font-weight: 800; color: var(--slate-900); }
.ll-poschk__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ll-poschk__items li { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--slate-200); font-family: var(--ll-font-ui); font-size: 12px; }
.ll-poschk__items li span { color: var(--slate-600); font-weight: 600; }
.ll-poschk__items li i { font-style: normal; color: var(--slate-900); font-weight: 700; }
.ll-poschk__total { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 2px; }
.ll-poschk__total span { font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-500); }
.ll-poschk__total b { font-family: var(--ll-font-heading); font-size: 20px; font-weight: 800; color: var(--slate-900); }
.ll-poschk__pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 9px; border-radius: 9px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ll-poschk__pay svg { width: 15px; height: 15px; }
.ll-poschk--compact { gap: 6px; padding: 10px 10px 11px; }
.ll-poschk--compact .ll-poschk__items li { padding: 5px 0; font-size: 10.5px; }
.ll-poschk--compact .ll-poschk__total b { font-size: 16px; }
.ll-poschk--compact .ll-poschk__pay { font-size: 10.5px; padding: 7px; }

/* Kiosk welcome */
.ll-poswelcome { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 208px; padding: 22px 16px; text-align: center; background: linear-gradient(165deg, #F5FBFD, var(--brand-50)); }
.ll-poswelcome__mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 17px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-poswelcome__mark svg { width: 28px; height: 28px; }
.ll-poswelcome__title { font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: var(--slate-900); }
.ll-poswelcome__tap { font-style: normal; padding: 6px 14px; border-radius: 999px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; }

/* App launcher */
.ll-poslauncher { padding: 12px 12px 14px; background: linear-gradient(160deg, #F5FBFD, var(--brand-50)); }
.ll-poslauncher__label { display: block; margin-bottom: 11px; font-family: var(--ll-font-ui); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-poslauncher__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.ll-poslauncher__app { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ll-poslauncher__app i { font-style: normal; font-family: var(--ll-font-ui); font-size: 9px; font-weight: 700; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Web screen */
.ll-posweb { display: flex; flex-direction: column; background: #fff; min-height: 150px; }
.ll-posweb__bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--slate-50); border-bottom: 1px solid var(--slate-100); }
.ll-posweb__lock { display: inline-flex; color: var(--slate-400); }
.ll-posweb__lock svg { width: 11px; height: 11px; }
.ll-posweb__bar b { font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; color: var(--slate-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-posweb__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px; background: linear-gradient(160deg, #F5FBFD, var(--brand-50)); }
.ll-posweb__mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-posweb__mark svg { width: 22px; height: 22px; }
.ll-posweb__body i { font-style: normal; font-family: var(--ll-font-heading); font-size: 12.5px; font-weight: 800; color: var(--slate-900); }
.ll-posweb__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 78%; }
.ll-posweb__tiles span { height: 14px; border-radius: 4px; background: var(--brand-100); }

/* ── 1 · Hero — light band, POS terminal over the operations dashboard ───────── */
.ll-poshero-sec {
  background-color: var(--brand-50);
  background-image:
    radial-gradient(40% 46% at 98% 4%, rgba(47, 163, 201, 0.16) 0%, rgba(47, 163, 201, 0) 62%),
    linear-gradient(165deg, #F6FCFE 0%, var(--brand-50) 72%);
  background-repeat: no-repeat;
}
.ll-poshero__hl { color: var(--brand-600); }
.ll-postrust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.ll-postrust li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ll-font-ui); font-size: 14px; font-weight: 600; color: var(--slate-600); }
.ll-postrust li svg { width: 16px; height: 16px; flex: none; color: var(--success); }
.ll-postrust li:not(:last-child)::after { content: "·"; margin: 0 14px; color: var(--slate-300); font-weight: 800; }

.ll-poshero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ll-poshero__dash { width: 100%; max-width: 480px; }
.ll-poshero__dashbody { padding: 16px 16px 18px; }
.ll-poshero__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.ll-poshero__kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 11px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-poshero__kpi b { font-family: var(--ll-font-heading); font-size: 22px; font-weight: 800; line-height: 1; color: var(--slate-900); }
.ll-poshero__kpi i { font-style: normal; font-family: var(--ll-font-ui); font-size: 10px; font-weight: 700; color: var(--slate-500); }
.ll-poshero__kpi.is-ok b { color: var(--success); }
.ll-poshero__kpi.is-warn b { color: var(--warning); }
.ll-poshero__kpi.is-bad b { color: var(--danger); }
.ll-poshero__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-poshero__rows li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--slate-100); }
.ll-poshero__rows b { flex: 1; min-width: 0; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-poshero__device { width: 188px; }
.ll-poshero__lockdown, .ll-poshero__store { background: #fff; border: 1px solid var(--slate-200); border-radius: 15px; box-shadow: var(--shadow-xl); }
.ll-poshero__lockdown { width: 100%; max-width: 264px; padding: 15px 17px; }
.ll-poscard__title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--ll-font-heading); font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--success-text); }
.ll-poscard__on { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-poscard__on svg { width: 11px; height: 11px; }
.ll-poscard__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ll-poscard__checks li { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-600); }
.ll-poscard__tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-poscard__tick svg { width: 12px; height: 12px; }
.ll-poshero__store { display: inline-flex; align-items: center; gap: 11px; padding: 11px 15px; }
.ll-poshero__storeicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-poshero__storeicon svg { width: 17px; height: 17px; }
.ll-poshero__storeid { display: flex; flex-direction: column; }
.ll-poshero__storeid b { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-poshero__storeid i { font-style: normal; font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 600; color: var(--success); }

@media (min-width: 1080px) {
  .ll-poshero { min-height: 508px; }
  .ll-poshero__dash { position: absolute; top: 20px; right: 0; width: 80%; max-width: none; }
  .ll-poshero__device { position: absolute; left: 0; bottom: 0; width: 196px; z-index: 3; }
  .ll-poshero__lockdown { position: absolute; top: 0; right: 0; width: 244px; z-index: 4; }
  .ll-poshero__store { position: absolute; bottom: 40px; right: 8px; z-index: 4; }
}

/* ── 2 · What is POS management — endpoints → console → verbs ─────────────────── */
.ll-posflow { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; }
.ll-posflow__stage { width: 100%; text-align: center; }
.ll-posflow__label { display: block; margin-bottom: 12px; font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); }
.ll-posflow__devices, .ll-posflow__verbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ll-posflow__devices li, .ll-posflow__verbs li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 9px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; }
.ll-posflow__devices li { background: #fff; border: 1px solid var(--slate-200); color: var(--slate-900); box-shadow: var(--shadow-sm); }
.ll-posflow__devicon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-posflow__devicon svg { width: 16px; height: 16px; }
.ll-posflow__verbs li { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-800); }
.ll-posflow__verbicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 999px; background: #fff; color: var(--brand-600); }
.ll-posflow__verbicon svg { width: 15px; height: 15px; }
.ll-posflow__arrow { display: inline-flex; color: var(--brand-300); }
.ll-posflow__arrow svg { width: 26px; height: 26px; }
.ll-posflow__hub { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 30px; border-radius: 16px; background: var(--ink-900); color: #fff; box-shadow: var(--shadow-lg); }
.ll-posflow__hubmark { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 5px; border-radius: 13px; background: rgba(143, 206, 226, 0.14); color: var(--brand-300); }
.ll-posflow__hubmark svg { width: 24px; height: 24px; }
.ll-posflow__hub b { font-family: var(--ll-font-heading); font-size: 18px; font-weight: 800; }
.ll-posflow__hub i { font-style: normal; font-family: var(--ll-font-body); font-size: 12.5px; color: var(--ink-text-muted); }

/* ── 4 · Multi-location dashboard ────────────────────────────────────────────── */
.ll-posloc { max-width: 860px; margin: 0 auto; }
.ll-posloc__body { padding: 16px 18px 18px; }
.ll-posloc__ptitle { margin: 0 0 12px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-posloc__ptitle--sub { margin-top: 20px; }
.ll-posloc__tablewrap { overflow-x: auto; }
.ll-posloc__table { width: 100%; border-collapse: collapse; min-width: 460px; }
.ll-posloc__table th { text-align: left; padding: 11px 14px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate-500); border-bottom: 1px solid var(--slate-200); }
.ll-posloc__table th.is-num, .ll-posloc__table td.is-num { text-align: right; }
.ll-posloc__table td { padding: 12px 14px; border-bottom: 1px solid var(--slate-100); font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-posloc__table tr:last-child td { border-bottom: none; }
.ll-posloc__loc { font-weight: 700; color: var(--slate-900); white-space: nowrap; }
.ll-posloc__locicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 9px; vertical-align: middle; border-radius: 7px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-posloc__locicon svg { width: 14px; height: 14px; }
.ll-posloc__table td.is-ok { color: var(--success); font-weight: 800; }
.ll-posloc__attn { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--warning-bg); color: var(--warning-text); font-weight: 800; }
.ll-posloc__zero { color: var(--slate-400); }
.ll-posloc__devices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ll-posloc__devices li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-100); }
.ll-posloc__devid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ll-posloc__devid b { font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--slate-900); }
.ll-posloc__devid i { font-style: normal; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 600; color: var(--slate-500); }

@media (max-width: 620px) { .ll-posloc__devices { grid-template-columns: 1fr; } }

/* ── 5 · POS lockdown — terminal ringed by callouts ──────────────────────────── */
.ll-poslock { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ll-poslock__stage { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.ll-poslock__callouts { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ll-poslock__callout { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 13px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-poslock__calloticon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-poslock__calloticon svg { width: 18px; height: 18px; }
.ll-poslock__callout b { font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 700; color: var(--slate-900); }
.ll-poslock__link { align-self: center; }

@media (min-width: 960px) {
  .ll-poslock__stage { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: repeat(3, auto); align-items: center; column-gap: 22px; row-gap: 14px; }
  .ll-poslock__device { grid-column: 2; grid-row: 1 / 4; }
  .ll-poslock__callouts { display: contents; }
  .ll-poslock__callout.is-a { grid-column: 1; grid-row: 1; }
  .ll-poslock__callout.is-b { grid-column: 1; grid-row: 2; }
  .ll-poslock__callout.is-c { grid-column: 1; grid-row: 3; }
  .ll-poslock__callout.is-d { grid-column: 3; grid-row: 1; }
  .ll-poslock__callout.is-e { grid-column: 3; grid-row: 2; }
  .ll-poslock__callout.is-f { grid-column: 3; grid-row: 3; }
}

/* ── 6 · Frontline workflows — four form factors ─────────────────────────────── */
.ll-poswf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ll-poswf__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-poswf__visual { display: flex; align-items: flex-end; justify-content: center; min-height: 244px; margin-bottom: 18px; }
.ll-poswf__mode { display: inline-flex; padding: 5px 12px; margin-bottom: 12px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 800; color: var(--brand-800); }
.ll-poswf__title { font-family: var(--ll-font-heading); font-size: 17px; font-weight: 700; color: var(--slate-900); margin: 0 0 6px; }
.ll-poswf__text { font-family: var(--ll-font-body); font-size: 13px; line-height: 1.55; color: var(--slate-600); margin: 0; }

@media (max-width: 900px) { .ll-poswf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ll-poswf { grid-template-columns: 1fr; } }

/* ── 7 · App management — launcher device + allow / block lists ───────────────── */
.ll-posapps { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ll-posapps__device { display: flex; justify-content: center; }
.ll-posapps__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ll-posapps__list { padding: 18px 20px; border-radius: 15px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-posapps__listlabel { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: var(--slate-900); }
.ll-posapps__listlabel span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 800; }
.ll-posapps__listlabel.is-ok span { background: var(--success-bg); color: var(--success-text); }
.ll-posapps__listlabel.is-no span { background: var(--danger-bg); color: var(--danger-text); }
.ll-posapps__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ll-posapps__list li { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-posapps__list li.is-no { color: var(--slate-500); }
.ll-posapps__tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-posapps__tick svg { width: 12px; height: 12px; }
.ll-posapps__ban { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--danger-bg); color: var(--danger); }
.ll-posapps__ban svg { width: 13px; height: 13px; }
.ll-posapps__link { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .ll-posapps { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .ll-posapps__lists { width: 100%; max-width: 560px; }
}
@media (max-width: 480px) { .ll-posapps__lists { grid-template-columns: 1fr; } }

/* ── 8 · Web-based POS — allowed terminal + blocked site ─────────────────────── */
.ll-posbrowser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 34px; align-items: center; }
.ll-posbrowser__allowed { margin: 0; display: flex; align-items: center; gap: 26px; }
.ll-posbrowser__checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ll-posbrowser__checks li { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-posbrowser__tick { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: var(--success); color: #fff; }
.ll-posbrowser__tick svg { width: 12px; height: 12px; }
.ll-posbrowser__blocked { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: 16px; background: var(--danger-bg); border: 1px solid rgba(220, 38, 38, 0.18); }
.ll-posbrowser__banner { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ll-font-heading); font-size: 14px; font-weight: 800; color: var(--danger-text); }
.ll-posbrowser__banner svg { width: 18px; height: 18px; color: var(--danger); }
.ll-posbrowser__url { padding: 5px 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(220, 38, 38, 0.22); font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--danger); }
.ll-posbrowser__note { margin: 0; font-family: var(--ll-font-body); font-size: 13px; line-height: 1.5; color: var(--danger-text); opacity: 0.82; }
.ll-posbrowser__link { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .ll-posbrowser { grid-template-columns: 1fr; gap: 26px; justify-items: center; }
  .ll-posbrowser__allowed { flex-direction: column; }
  .ll-posbrowser__blocked { width: 100%; max-width: 420px; }
}

/* ── 9 · Remote management — config panel + HQ fan-out ───────────────────────── */
.ll-posremote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; align-items: center; }
.ll-posremote__panelbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.ll-posremote__field { display: flex; flex-direction: column; gap: 7px; }
.ll-posremote__flabel { font-family: var(--ll-font-ui); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); }
.ll-posremote__fval { display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-200); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--slate-900); }
.ll-posremote__fval svg { width: 15px; height: 15px; color: var(--brand-600); }
.ll-posremote__fval--count { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-800); }
.ll-posremote__changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-posremote__changes li { display: flex; align-items: center; gap: 9px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-posremote__cb { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--brand-600); color: #fff; }
.ll-posremote__cb svg { width: 11px; height: 11px; }
.ll-posremote__deploy { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; }
.ll-posremote__deploy svg { width: 16px; height: 16px; }
.ll-posremote__flow { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 16px; }
.ll-posremote__hq { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--ink-900); color: #fff; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 700; }
.ll-posremote__hqicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(143, 206, 226, 0.16); color: var(--brand-300); }
.ll-posremote__hqicon svg { width: 18px; height: 18px; }
.ll-posremote__fan { color: var(--brand-400, var(--brand-500)); }
.ll-posremote__fan svg { width: 24px; height: 24px; }
.ll-posremote__stores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ll-posremote__stores li { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--slate-900); }
.ll-posremote__storeicon { display: inline-flex; color: var(--brand-600); }
.ll-posremote__storeicon svg { width: 15px; height: 15px; }
.ll-posremote__storecheck { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--success-bg); color: var(--success); }
.ll-posremote__storecheck svg { width: 11px; height: 11px; }
.ll-posremote__result { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; padding: 16px; margin-top: 4px; border-radius: 14px; background: var(--brand-600); color: #fff; }
.ll-posremote__result b { font-family: var(--ll-font-heading); font-size: 30px; font-weight: 800; line-height: 1; }
.ll-posremote__result i { font-style: normal; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; margin-top: 3px; color: rgba(255, 255, 255, 0.86); }

@media (max-width: 900px) {
  .ll-posremote { grid-template-columns: 1fr; }
  .ll-posremote__flow { grid-template-columns: auto 1fr; }
  .ll-posremote__fan { transform: rotate(90deg); }
}
@media (max-width: 520px) {
  .ll-posremote__flow { grid-template-columns: 1fr; justify-items: center; }
  .ll-posremote__fan { display: none; }
  .ll-posremote__stores { width: 100%; }
}

/* ── 10 · Device visibility — health board + summary ─────────────────────────── */
.ll-poshealth { display: flex; flex-direction: column; gap: 22px; }
.ll-poshealth__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ll-poshealth__card { padding: 18px 18px 20px; border-radius: 15px; background: #fff; border: 1px solid var(--slate-200); border-left: 4px solid var(--slate-300); box-shadow: var(--shadow-sm); }
.ll-poshealth__card.is-ok { border-left-color: var(--success); }
.ll-poshealth__card.is-warn { border-left-color: var(--warning); }
.ll-poshealth__card.is-bad { border-left-color: var(--danger); }
.ll-poshealth__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ll-poshealth__card.is-ok .ll-posdot { background: var(--success); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14); }
.ll-poshealth__card.is-warn .ll-posdot { background: var(--warning); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14); }
.ll-poshealth__card.is-bad .ll-posdot { background: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14); }
.ll-poshealth__head b { flex: 1; font-family: var(--ll-font-heading); font-size: 15px; font-weight: 800; color: var(--slate-900); }
.ll-poshealth__status { font-family: var(--ll-font-ui); font-size: 11.5px; font-weight: 800; }
.ll-poshealth__card.is-ok .ll-poshealth__status { color: var(--success); }
.ll-poshealth__card.is-warn .ll-poshealth__status { color: var(--warning); }
.ll-poshealth__card.is-bad .ll-poshealth__status { color: var(--danger); }
.ll-poshealth__note { margin: 0 0 4px; font-family: var(--ll-font-ui); font-size: 13px; font-weight: 600; color: var(--slate-700, var(--slate-600)); }
.ll-poshealth__seen { margin: 0; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 600; color: var(--slate-500); }
.ll-poshealth__summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 620px; width: 100%; margin: 0 auto; }
.ll-poshealth__summary li { display: flex; flex-direction: column; align-items: center; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-poshealth__summary b { font-family: var(--ll-font-heading); font-size: 30px; font-weight: 800; line-height: 1; }
.ll-poshealth__summary i { font-style: normal; margin-top: 4px; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 700; color: var(--slate-500); }
.ll-poshealth__summary .is-ok b { color: var(--success); }
.ll-poshealth__summary .is-warn b { color: var(--warning); }
.ll-poshealth__summary .is-bad b { color: var(--danger); }

@media (max-width: 900px) { .ll-poshealth__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .ll-poshealth__grid { grid-template-columns: 1fr; } .ll-poshealth__summary { grid-template-columns: 1fr; } }

/* ── 11 · Device restrictions — the policy control table ─────────────────────── */
.ll-posrestrict { max-width: 620px; margin: 0 auto; }
.ll-posrestrict__table { width: 100%; border-collapse: collapse; }
.ll-posrestrict__table th { text-align: left; padding: 13px 20px; font-family: var(--ll-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); border-bottom: 1px solid var(--slate-200); }
.ll-posrestrict__table th:last-child { text-align: right; }
.ll-posrestrict__table td { padding: 13px 20px; border-bottom: 1px solid var(--slate-100); font-family: var(--ll-font-ui); font-size: 14px; font-weight: 700; color: var(--slate-900); }
.ll-posrestrict__table td:last-child { text-align: right; }
.ll-posrestrict__table tr:last-child td { border-bottom: none; }
.ll-posrestrict__state { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; font-family: var(--ll-font-ui); font-size: 12px; font-weight: 800; }
.ll-posrestrict__dot { width: 8px; height: 8px; border-radius: 50%; }
.ll-posrestrict__state.is-no { background: var(--danger-bg); color: var(--danger-text); }
.ll-posrestrict__state.is-no .ll-posrestrict__dot { background: var(--danger); }
.ll-posrestrict__state.is-ok { background: var(--success-bg); color: var(--success-text); }
.ll-posrestrict__state.is-ok .ll-posrestrict__dot { background: var(--success); }

/* ── 12 · Multi-location — organization → regions → grouping chain ───────────── */
.ll-posorg { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ll-posorg__root { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 14px; background: var(--ink-900); color: #fff; font-family: var(--ll-font-heading); font-size: 16px; font-weight: 800; }
.ll-posorg__rooticon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(143, 206, 226, 0.16); color: var(--brand-300); }
.ll-posorg__rooticon svg { width: 17px; height: 17px; }
.ll-posorg__arrow { display: inline-flex; color: var(--brand-300); }
.ll-posorg__arrow svg { width: 24px; height: 24px; }
.ll-posorg__regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: 720px; }
.ll-posorg__region { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 18px; border-radius: 15px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); text-align: center; }
.ll-posorg__regionicon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-posorg__regionicon svg { width: 21px; height: 21px; }
.ll-posorg__region b { font-family: var(--ll-font-heading); font-size: 16px; font-weight: 700; color: var(--slate-900); }
.ll-posorg__region i { font-style: normal; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 600; color: var(--slate-500); }
.ll-posorg__chain { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ll-posorg__chain li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; color: var(--brand-800); }
.ll-posorg__chainicon { display: inline-flex; color: var(--brand-600); }
.ll-posorg__chainicon svg { width: 15px; height: 15px; }
.ll-posorg__chainarrow { display: inline-flex; align-items: center; color: var(--brand-400, var(--brand-500)); margin-left: 4px; }
.ll-posorg__chainarrow svg { width: 15px; height: 15px; }

@media (max-width: 620px) { .ll-posorg__regions { grid-template-columns: 1fr; max-width: 320px; } }

/* ── 13 · Use cases — a device form factor per card ──────────────────────────── */
.ll-posuc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ll-posuc__card { padding: 22px 20px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-posuc__ff { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; background: linear-gradient(160deg, #16232f, #0b141d); box-shadow: var(--shadow-md); }
.ll-posuc__ffscreen { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--brand-600); }
.ll-posuc__ffscreen svg { width: 20px; height: 20px; }
/* Four silhouettes: countertop terminal, tall kiosk, wide tablet, phone. */
.ll-posuc__ff--term { width: 52px; height: 46px; border-radius: 11px; padding: 6px; }
.ll-posuc__ff--term .ll-posuc__ffscreen { width: 100%; height: 100%; border-radius: 6px; }
.ll-posuc__ff--kiosk { width: 40px; height: 56px; border-radius: 10px; padding: 6px; }
.ll-posuc__ff--kiosk .ll-posuc__ffscreen { width: 100%; height: 100%; border-radius: 5px; }
.ll-posuc__ff--tablet { width: 58px; height: 44px; border-radius: 10px; padding: 6px; }
.ll-posuc__ff--tablet .ll-posuc__ffscreen { width: 100%; height: 100%; border-radius: 5px; }
.ll-posuc__ff--handset { width: 36px; height: 54px; border-radius: 11px; padding: 5px; }
.ll-posuc__ff--handset .ll-posuc__ffscreen { width: 100%; height: 100%; border-radius: 7px; }
.ll-posuc__ff--term::after, .ll-posuc__ff--kiosk::after, .ll-posuc__ff--tablet::after { content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 60%; height: 5px; border-radius: 0 0 4px 4px; background: #16232f; }
.ll-posuc__title { font-family: var(--ll-font-heading); font-size: 16px; font-weight: 700; color: var(--slate-900); margin: 0 0 7px; }
.ll-posuc__text { font-family: var(--ll-font-body); font-size: 13px; line-height: 1.55; color: var(--slate-600); margin: 0; }

@media (max-width: 900px) { .ll-posuc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ll-posuc { grid-template-columns: 1fr; } }

/* ── 14 · Business continuity — a four-stage recovery story ──────────────────── */
.ll-poscont { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ll-poscont__stage { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ll-poscont__head { display: flex; align-items: center; gap: 10px; font-family: var(--ll-font-heading); font-size: 14.5px; font-weight: 700; color: var(--slate-900); }
.ll-poscont__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border-radius: 9px; }
.ll-poscont__stage.is-bad .ll-poscont__icon { background: var(--danger-bg); color: var(--danger); }
.ll-poscont__stage.is-brand .ll-poscont__icon { background: var(--brand-50); color: var(--brand-600); }
.ll-poscont__stage.is-ok .ll-poscont__icon { background: var(--success-bg); color: var(--success); }
.ll-poscont__icon svg { width: 16px; height: 16px; }
.ll-poscont__card { display: flex; flex-direction: column; gap: 5px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); border-top: 3px solid var(--slate-300); }
.ll-poscont__stage.is-bad .ll-poscont__card { border-top-color: var(--danger); }
.ll-poscont__stage.is-brand .ll-poscont__card { border-top-color: var(--brand-500); }
.ll-poscont__stage.is-ok .ll-poscont__card { border-top-color: var(--success); }
.ll-poscont__device { display: flex; align-items: center; gap: 8px; }
.ll-poscont__device b { font-family: var(--ll-font-ui); font-size: 13.5px; font-weight: 800; color: var(--slate-900); }
.ll-poscont__status { font-family: var(--ll-font-ui); font-size: 13px; font-weight: 700; }
.ll-poscont__stage.is-bad .ll-poscont__status { color: var(--danger); }
.ll-poscont__stage.is-ok .ll-poscont__status { color: var(--success); }
.ll-poscont__stage.is-brand .ll-poscont__status { color: var(--brand-700); }
.ll-poscont__meta { font-family: var(--ll-font-ui); font-size: 12px; font-weight: 600; color: var(--slate-500); }
.ll-poscont__arrow { position: absolute; top: 34px; right: -19px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: #fff; border: 1px solid var(--slate-200); color: var(--brand-500); z-index: 2; }
.ll-poscont__arrow svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .ll-poscont { grid-template-columns: 1fr 1fr; gap: 30px 34px; }
  .ll-poscont__stage:nth-child(2n) .ll-poscont__arrow { display: none; }
}
@media (max-width: 520px) {
  .ll-poscont { grid-template-columns: 1fr; gap: 20px; }
  .ll-poscont__arrow { display: none; }
}

/* ── 16 · Deployment — enrollment paths + provisioning pipeline ──────────────── */
.ll-posdeploy { display: flex; flex-direction: column; gap: 26px; }
.ll-posdeploy__paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ll-posdeploy__path { padding: 22px 22px 24px; border-radius: 16px; background: #fff; border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm); }
.ll-posdeploy__pathicon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 13px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-600); }
.ll-posdeploy__pathicon svg { width: 24px; height: 24px; }
.ll-posdeploy__path b { display: block; font-family: var(--ll-font-heading); font-size: 17px; font-weight: 700; color: var(--slate-900); margin-bottom: 6px; }
.ll-posdeploy__path i { font-style: normal; font-family: var(--ll-font-body); font-size: 13.5px; line-height: 1.55; color: var(--slate-600); }
.ll-posdeploy__pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ll-posdeploy__pipe li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ll-posdeploy__pipestep { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); font-family: var(--ll-font-ui); font-size: 14px; font-weight: 700; color: var(--brand-800); }
.ll-posdeploy__pipe li:last-child .ll-posdeploy__pipestep { background: var(--brand-600); border-color: var(--brand-700); color: #fff; }
.ll-posdeploy__pipecheck { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); }
.ll-posdeploy__pipecheck svg { width: 12px; height: 12px; }
.ll-posdeploy__pipearrow { display: inline-flex; color: var(--brand-400, var(--brand-500)); }
.ll-posdeploy__pipearrow svg { width: 22px; height: 22px; }

@media (min-width: 820px) {
  .ll-posdeploy__pipe { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ll-posdeploy__pipe li { flex-direction: row; }
  .ll-posdeploy__pipearrow { transform: rotate(-90deg); }
}
@media (max-width: 760px) { .ll-posdeploy__paths { grid-template-columns: 1fr; } }

/* ── 18 · How it works — a POS terminal through four states ──────────────────── */
.ll-possteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.ll-posstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ll-posstep:not(:last-child)::before { content: ""; position: absolute; top: 118px; left: calc(50% + 78px); right: calc(-50% + 78px); height: 2px; background: var(--brand-100); z-index: 0; }
.ll-posstep__num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 9px; margin-bottom: 14px; border-radius: 999px; background: var(--brand-600); color: #fff; font-family: var(--ll-font-ui); font-size: 12.5px; font-weight: 800; }
.ll-posstep__device { margin-bottom: 16px; }
.ll-posstep__screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 12px; background: linear-gradient(160deg, #F5FBFD, var(--brand-50)); }
.ll-posstep__screenicon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-600); box-shadow: var(--shadow-sm); }
.ll-posstep__screenicon svg { width: 18px; height: 18px; }
.ll-posstep__screen i { font-style: normal; font-family: var(--ll-font-ui); font-size: 9.5px; font-weight: 700; color: var(--slate-700, var(--slate-600)); }
.ll-posstep__chev { position: absolute; top: 108px; left: calc(100% + 13px); transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); color: var(--brand-500); z-index: 2; }
.ll-posstep__chev svg { width: 14px; height: 14px; }
.ll-posstep__title { font-family: var(--ll-font-heading); font-size: 16px; font-weight: 700; color: var(--slate-900); margin: 0; }

@media (max-width: 900px) {
  .ll-possteps { grid-template-columns: 1fr 1fr; gap: 34px 26px; }
  .ll-posstep::before, .ll-posstep__chev { display: none !important; }
}
@media (max-width: 480px) { .ll-possteps { grid-template-columns: 1fr; } }

/* ── Large desktop — grow the hero art with the widened shell ───────────────── */
@media (min-width: 1536px) {
  .ll-poshero { min-height: 480px; }
  .ll-poshero__device { width: 210px; }
  .ll-poshero__lockdown { width: 252px; }
}