/**
 * Lumos components. Requires tokens.css. Scope: body.ls.
 * Vercel-style: one ink primary action, hairline borders, stacked soft shadows, weight ≤ 600.
 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body.ls {
  margin: 0;
  font: 400 16px/var(--ls-lh) var(--ls-font);
  background: var(--ls-bg);
  color: var(--ls-text);
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
body.ls ::selection { background: var(--ls-text); color: #f2f2f2; }
:where(body.ls) a { color: var(--ls-link); text-underline-offset: 3px; }
:where(body.ls) a:hover { color: var(--ls-link-hover); }
body.ls :focus-visible { outline: 2px solid var(--ls-link); outline-offset: 2px; }
body.ls img { max-width: 100%; height: auto; }

.ls-skip { position: absolute; left: -9999px; top: 0; z-index: var(--ls-z-skip); background: var(--ls-card); color: var(--ls-text); padding: 8px 12px; border-radius: var(--ls-radius-sm); box-shadow: var(--ls-lift); text-decoration: none; }
.ls-skip:focus { left: 12px; top: 8px; }

/* —— Nav —— */
.ls-nav {
  position: sticky; top: 0; z-index: var(--ls-z-nav);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--ls-border);
}
.ls-nav__inner { max-width: var(--ls-wrap-wide); margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 24px; }
.ls-brand { font-weight: 600; letter-spacing: -0.4px; color: var(--ls-text) !important; text-decoration: none; flex: none; }
.ls-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; font-size: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ls-nav ul::-webkit-scrollbar { display: none; }
.ls-nav li a { display: block; padding: 6px 10px; border-radius: var(--ls-radius-pill); color: var(--ls-muted); text-decoration: none; white-space: nowrap; }
.ls-nav li a:hover, .ls-nav li a[aria-current="page"] { color: var(--ls-text); background: var(--ls-bg-elevated); }

.language-toolbar { max-width: var(--ls-wrap-wide); margin: 12px auto 0; padding: 0 24px; display: flex; justify-content: flex-end; }
.ls-nav .language-toolbar { margin: 0 0 0 auto; padding: 0; }
/* Pages place the toolbar right after the nav; lift it into the nav row. */
body.ls > .language-toolbar { position: absolute; top: 15px; right: max(24px, calc((100vw - var(--ls-wrap-wide)) / 2 + 24px)); z-index: calc(var(--ls-z-nav) + 1); margin: 0; padding: 0; }
body.ls > .ls-nav .ls-nav__inner { padding-right: 140px; }
.language-selector { display: inline-flex; gap: 2px; padding: 2px; background: var(--ls-bg-elevated); border-radius: var(--ls-radius-sm); }
.lang-btn { height: 26px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ls-muted); font: 500 12px var(--ls-font); cursor: pointer; }
.lang-btn:hover { color: var(--ls-text); }
.lang-btn.active { background: var(--ls-card); color: var(--ls-text); box-shadow: var(--ls-ring); }

/* —— Layout —— */
.ls-wrap { max-width: var(--ls-wrap); margin: 0 auto; padding: 56px 24px 72px; }
.ls-wrap--wide, .ls-wrap--product { max-width: var(--ls-wrap-wide); }
.ls-wrap h1, .ls-wrap h2, .ls-wrap h3 { text-wrap: balance; }
.ls-wrap p, .ls-wrap li { text-wrap: pretty; }
.ls-section, .ls-wrap > section { margin-top: 56px; }
.ls-section:first-of-type { margin-top: 0; }

/* —— Type —— */
.ls-wrap h1 { font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -1.4px; margin: 0 0 16px; color: var(--ls-text); }
.ls-wrap h2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.8px; margin: 56px 0 16px; color: var(--ls-text); }
.ls-wrap h3 { font-size: 17px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 6px; color: var(--ls-text); }
.ls-wrap p { color: var(--ls-muted); margin: 0 0 14px; }
.ls-wrap li { color: var(--ls-muted); }
.ls-wrap strong, .ls-wrap b { font-weight: 600; color: var(--ls-text); }
.ls-lead { font-size: 18px; line-height: 28px; color: var(--ls-muted) !important; }
.ls-kicker { font-size: 13px; font-weight: 500; color: var(--ls-faint); margin: 0 0 8px; letter-spacing: 0; text-transform: none; }
.ls-muted { color: var(--ls-muted); }
.ls-fine { font-size: 13px; color: var(--ls-faint) !important; }
.ls-code, .ls-wrap code, .ls-mono { font-family: var(--ls-font-mono); font-size: 0.88em; color: var(--ls-code); }
.ls-wrap code { background: var(--ls-bg-elevated); padding: 1px 5px; border-radius: 4px; }

/* —— Badge —— */
.ls-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin: 0 0 16px; border-radius: var(--ls-radius-pill); background: var(--ls-bg-elevated); color: var(--ls-muted); font-size: 12px; font-weight: 500; }
.ls-badge--ok, .ls-badge--accent { color: var(--ls-text); }
.ls-badge__dot { display: none; }
.ls-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ls-badge-row .ls-badge { margin: 0; }

/* —— Callout —— */
.ls-callout { margin: 24px 0; padding: 16px 20px; border-radius: var(--ls-radius); background: var(--ls-card); box-shadow: var(--ls-lift); }
.ls-callout strong { display: block; font-size: 15px; font-weight: 600; color: var(--ls-text); }
.ls-callout p { margin: 4px 0 0; font-size: 15px; }
.ls-callout--warn { background: var(--ls-warn-soft); box-shadow: none; }
.ls-callout--warn strong { color: var(--ls-warn); }
.ls-callout--ok { box-shadow: var(--ls-lift); }
.ls-out { border-left: 2px solid var(--ls-border-strong); padding: 2px 0 2px 14px; margin: 8px 0 0; }

/* —— Buttons —— */
.ls-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.ls-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border: 0; border-radius: var(--ls-radius-sm);
  font: 500 15px/1 var(--ls-font); letter-spacing: -0.2px; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--ls-card); color: var(--ls-text) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: background var(--ls-duration) var(--ls-ease);
}
.ls-btn:hover { background: var(--ls-bg-elevated); }
.ls-btn--primary { background: var(--ls-accent); color: var(--ls-accent-ink) !important; box-shadow: none; }
.ls-btn--primary:hover { background: var(--ls-accent-hover); }
.ls-btn--ghost { background: var(--ls-card); }
.ls-btn--warn { background: var(--ls-danger); color: #fff !important; box-shadow: none; }
.ls-btn--sm { height: 32px; padding: 0 12px; font-size: 14px; }

/* —— Lists —— */
ul.ls-trust, ul.ls-dash { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--ls-border); }
ul.ls-trust li, ul.ls-dash li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--ls-border); font-size: 15px; color: var(--ls-muted); }
ul.ls-trust li::before, ul.ls-dash li::before { content: none; }
ul.ls-trust--x li { color: var(--ls-faint); }

/* —— Grid + cards —— */
.ls-grid { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 680px) {
  .ls-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ls-card { position: relative; background: var(--ls-card); border-radius: var(--ls-radius); padding: 20px; box-shadow: var(--ls-lift); color: var(--ls-text); }
.ls-card > :last-child { margin-bottom: 0; }
.ls-card--featured { box-shadow: 0 0 0 1px var(--ls-text), 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.04); }
.ls-card__tag { position: static; display: inline-block; margin: 0 0 8px; padding: 0 8px; height: 22px; line-height: 22px; border-radius: var(--ls-radius-pill); background: var(--ls-bg-elevated); color: var(--ls-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ls-card__tag--warn { color: var(--ls-warn); background: var(--ls-warn-soft); }
.ls-card__tag--muted { color: var(--ls-faint); }
.ls-card__title { display: block; font-size: 17px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 6px; color: var(--ls-text); }
.ls-card ul { margin: 8px 0 0; padding-left: 18px; color: var(--ls-muted); }
.ls-card li { margin: 4px 0; font-size: 15px; }
.ls-price { font: 500 20px/1.3 var(--ls-font-mono); color: var(--ls-text); font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.ls-price span { font: 400 13px var(--ls-font); color: var(--ls-faint); }
.ls-price s { color: var(--ls-faint); font-size: 0.75em; margin-right: 6px; }
.ls-price--muted { color: var(--ls-faint); }
.ls-step { display: inline-block; margin-bottom: 6px; font: 400 12px var(--ls-font-mono); color: var(--ls-faint); }

/* —— Chips —— */
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ls-chip { height: 22px; line-height: 22px; padding: 0 8px; border-radius: var(--ls-radius-pill); background: var(--ls-bg-elevated); color: var(--ls-muted); font-size: 12px; }
.ls-chip--ok { color: var(--ls-text); }
.ls-chip--warn { color: var(--ls-warn); background: var(--ls-warn-soft); }
.ls-chip--danger { color: var(--ls-danger); }

/* —— Tables —— */
.ls-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ls-radius); box-shadow: var(--ls-lift); background: var(--ls-card); margin: 16px 0; }
.ls-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 30rem; }
.ls-table th, .ls-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ls-border); }
.ls-table tr:last-child td { border-bottom: 0; }
.ls-table th { background: var(--ls-bg); color: var(--ls-muted); font-weight: 500; font-size: 13px; }
.ls-table td { color: var(--ls-muted); }
.ls-table tr.is-primary td { color: var(--ls-text); background: var(--ls-bg); }

/* —— FAQ —— */
.ls-faq { border-top: 1px solid var(--ls-border); }
.ls-faq details { border-bottom: 1px solid var(--ls-border); padding: 14px 0; }
.ls-faq summary { cursor: pointer; font-weight: 500; color: var(--ls-text); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after { content: "+"; color: var(--ls-faint); font-weight: 400; }
.ls-faq details[open] summary::after { content: "−"; }
.ls-faq details p { margin: 10px 0 0; font-size: 15px; }

/* —— Steps strip —— */
.ls-funnel { display: grid; gap: 1px; margin: 16px 0; background: var(--ls-border); border-radius: var(--ls-radius); overflow: hidden; box-shadow: var(--ls-ring); }
@media (min-width: 680px) { .ls-funnel { grid-template-columns: repeat(4, 1fr); } }
.ls-funnel__step { background: var(--ls-card); padding: 16px; }
.ls-funnel__n { font: 400 12px var(--ls-font-mono); color: var(--ls-faint); }
.ls-funnel__step strong { display: block; margin: 4px 0; font-size: 15px; font-weight: 600; color: var(--ls-text); }
.ls-funnel__step p { margin: 0; font-size: 14px; }

.ls-sources { font-size: 13px; color: var(--ls-faint); margin-top: 12px; }
.ls-sources a { color: var(--ls-muted); }

/* —— Footer —— */
.ls-foot { margin-top: 0; padding: 32px 24px 48px; border-top: 1px solid var(--ls-border); background: var(--ls-card); font-size: 13px; color: var(--ls-faint); }
.ls-foot nav, .ls-foot p { max-width: var(--ls-wrap-wide); margin: 0 auto; }
.ls-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.ls-foot a { color: var(--ls-muted); text-decoration: none; }
.ls-foot a:hover { color: var(--ls-text); }
.ls-wrap .ls-foot { margin-top: 64px; padding: 24px 0 0; background: transparent; }

/* Floating CTA bars are retired; one primary action lives in the page itself. */
.ls-sticky { display: none !important; }

/* —— System page helpers —— */
.ls-demo-block { border: 1px dashed var(--ls-border-strong); border-radius: var(--ls-radius); padding: 16px; margin: 12px 0 28px; }
.ls-demo-label { font: 400 12px var(--ls-font-mono); color: var(--ls-faint); margin: 0 0 10px; }
.ls-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ls-swatch { width: 88px; border-radius: var(--ls-radius-sm); overflow: hidden; box-shadow: var(--ls-ring); font-size: 12px; color: var(--ls-muted); }
.ls-swatch i { display: block; height: 48px; }
.ls-swatch span { display: block; padding: 6px; }

/* —— Screenshot figure —— */
.ls-shot { max-width: 640px; margin: 24px auto; border-radius: var(--ls-radius); overflow: hidden; background: var(--ls-card); box-shadow: var(--ls-lift); }
.ls-shot img { display: block; width: 100%; height: auto; }
.ls-shot figcaption { padding: 10px 14px; font-size: 13px; color: var(--ls-faint); border-top: 1px solid var(--ls-border); }

@media (max-width: 720px) {
  .ls-nav__inner { padding: 0 16px; gap: 12px; }
  .ls-wrap { padding: 36px 16px 56px; }
  .ls-wrap h1 { font-size: 28px; line-height: 36px; letter-spacing: -0.9px; }
  .ls-wrap h2 { font-size: 21px; line-height: 28px; margin-top: 44px; }
  .language-toolbar { padding: 0 16px; }
}