/* StyleLift Design System — components.
   Load after tokens.css. Every value comes from a token; the few literals left are geometry
   (percentages, 1fr, 4ch, 0.08em, scale, rotate) and are listed in MIGRATION.md.
   Class prefix: sl-. Sections: Base · Page layout · Typography helpers · Button · Kbd · StatusPill ·
   Banner · Card · TextInput · ShortcutList · Instrument (InspectorPanel, CodeBlock, Swatch, TagLabel,
   HighlightOverlay, Toast, Notice) · Stage + BrowserFrame · Landing additions (SiteHeader, Hero,
   FeatureGrid, PricingCard, FAQ, Footer, BrowserBadge) · Motion. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  font: var(--fs-14)/var(--lh-body) var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

/* Graph paper: the ground of every Leanora page. Put it on <body> (or any paper region). */
body.sl-paper { min-height: 100vh; }
.sl-paper {
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) var(--border-hair), transparent var(--border-hair)),
    linear-gradient(90deg, var(--grid) var(--border-hair), transparent var(--border-hair));
  background-size: var(--size-grid) var(--size-grid);
  background-position: calc(var(--border-hair) * -1) calc(var(--border-hair) * -1);
}

/* ---------- Page layout ---------- */
.sl-page { max-width: var(--size-page); margin: 0 auto; padding: var(--space-36) var(--space-28) var(--space-72); }
.sl-page > .sl-banner { margin-top: var(--space-28); }
.sl-section { margin-top: var(--space-64); }

/* ---------- Typography helpers ---------- */
.sl-h2 { margin: 0; font: var(--fw-400) var(--fs-34)/var(--lh-title) var(--font-serif); }
.sl-eyebrow {
  margin: 0 0 var(--space-20);
  font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--soft);
}
.sl-lede { max-width: var(--size-measure); margin: var(--space-26) 0 0; color: var(--soft); }
.sl-fine { font-size: var(--fs-12); color: var(--soft); }
.sl-note { margin-top: var(--space-16); font-size: var(--fs-12); color: var(--soft); }
.sl-code-inline {
  font: var(--fs-code) var(--font-mono);
  padding: var(--space-1) var(--space-6); border-radius: var(--radius-5);
  background: var(--card); border: var(--border-hair) solid var(--line);
}
.sl-link { color: var(--ink); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.sl-link:hover { text-decoration-thickness: var(--border-key); }
.sl-link:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }

/* Highlighter: <mark> inside display type. A lime band in light, lime words in dark. */
.sl-display mark, .sl-price mark, .sl-mark {
  color: var(--mark-ink); font-style: italic; padding: 0 0.08em;
  background: linear-gradient(transparent 60%, var(--mark-band) 60%, var(--mark-band) 90%, transparent 90%);
}

/* ---------- Button ---------- */
.sl-button {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  height: var(--size-control); padding: 0 var(--space-20); border-radius: var(--radius-12);
  border: var(--border-strong) solid var(--ink); background: transparent; color: var(--ink);
  font: var(--fw-600) var(--fs-13) var(--font-mono); text-decoration: none; cursor: pointer;
  transition:
    transform var(--duration-120) var(--ease-standard),
    box-shadow var(--duration-120) var(--ease-standard),
    background-color var(--duration-150) var(--ease-standard);
}
.sl-button:hover { transform: translate(calc(var(--space-1) * -1), calc(var(--space-2) * -1)); box-shadow: var(--shadow-lift); }
.sl-button:active { transform: none; box-shadow: none; }
.sl-button:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.sl-button--primary { background: var(--accent); color: var(--on-accent); border-color: var(--on-accent); }
.sl-button[disabled], .sl-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled); cursor: progress; transform: none; box-shadow: none;
}

/* Icon button (ghost): the instrument's close button. Dark grounds only. */
.sl-icon-button {
  all: unset; cursor: pointer; width: var(--size-icon-button); height: var(--size-icon-button);
  display: grid; place-items: center; border-radius: var(--radius-7);
  color: var(--panel-muted); font-size: var(--fs-15);
}
.sl-icon-button:hover { background: var(--panel-ink-3); color: var(--panel-text); }

/* Link button: the instrument's "Buy $9" / "Unlock". Dark grounds only. */
.sl-link-button {
  all: unset; cursor: pointer; color: var(--accent);
  text-decoration: underline; text-underline-offset: var(--underline-offset);
}

/* ---------- Kbd ---------- */
.sl-kbd {
  display: inline-block; margin: 0 var(--space-2); padding: var(--space-3) var(--space-7);
  font: var(--fw-600) var(--fs-kbd)/var(--lh-none) var(--font-mono); color: var(--ink);
  background: var(--card); border: var(--border-hair) solid var(--line);
  border-bottom-width: var(--border-key); border-radius: var(--radius-6);
}

/* ---------- StatusPill ---------- */
.sl-pill {
  display: inline-block; font-size: var(--fs-12); padding: var(--space-5) var(--space-12);
  border-radius: var(--radius-pill); border: var(--border-hair) solid var(--line);
  background: var(--card); color: var(--ink); white-space: nowrap;
}
.sl-pill--pro { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: var(--fw-600); }
.sl-pill--expired { color: var(--err); border-color: currentColor; }

/* ---------- Banner ---------- */
.sl-banner {
  margin: 0; padding: var(--space-14) var(--space-18); border-radius: var(--radius-14);
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-13);
}
.sl-banner strong { font-weight: var(--fw-600); }

/* ---------- Card ---------- */
.sl-card {
  padding: var(--space-30); border-radius: var(--radius-20);
  background: var(--card); border: var(--border-hair) solid var(--line); box-shadow: var(--shadow-card);
}
.sl-card--pro { border-color: var(--ink); }
.sl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); }
.sl-card__count { font-size: var(--fs-12); color: var(--soft); white-space: nowrap; }
.sl-card p { margin: var(--space-12) 0 0; max-width: var(--size-measure-card); color: var(--soft); }
.sl-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-14) var(--space-18); margin-top: var(--space-26); }
.sl-card__form { margin-top: var(--space-30); padding-top: var(--space-24); border-top: var(--border-hair) dashed var(--line); }

/* ---------- TextInput ---------- */
.sl-label { display: block; margin-bottom: var(--space-8); font-size: var(--fs-12); color: var(--soft); }
.sl-row { display: flex; gap: var(--space-10); }
.sl-input {
  flex: 1; min-width: 0; height: var(--size-control); padding: 0 var(--space-14); border-radius: var(--radius-12);
  border: var(--border-strong) solid var(--soft); background: var(--paper); color: var(--ink);
  font: var(--fs-13) var(--font-mono);
}
.sl-input:focus { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset-input); border-color: var(--ink); }
.sl-msg { min-height: calc(var(--lh-body) * 1em); margin: var(--space-12) 0 0; font-size: var(--fs-13); }
.sl-msg--error { color: var(--err); }
.sl-msg--ok { color: var(--ok); }

/* ---------- ShortcutList ---------- */
.sl-keys { margin: var(--space-22) 0 0; border-top: var(--border-hair) solid var(--line); }
.sl-keys > div {
  display: grid; grid-template-columns: var(--size-keys-col) 1fr; gap: var(--space-18);
  padding: var(--space-14) 0; border-bottom: var(--border-hair) solid var(--line);
}
.sl-keys dt { font-weight: var(--fw-600); }
.sl-keys dd { margin: 0; color: var(--soft); }

/* ---------- Instrument: the in-page UI (always dark) ---------- */
.sl-instrument {
  color: var(--panel-text);
  font: var(--fs-12)/var(--lh-panel) var(--font-mono-system);
  -webkit-font-smoothing: antialiased;
}

/* InspectorPanel */
.sl-panel {
  position: fixed; top: var(--space-16); right: var(--space-16);
  width: var(--size-panel); max-height: calc(100vh - var(--space-16) * 2);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  background: var(--panel-ink); color: var(--panel-text);
  border: var(--border-hair) solid var(--panel-line); border-radius: var(--radius-14);
  box-shadow: var(--shadow-panel);
  font: var(--fs-12)/var(--lh-panel) var(--font-mono-system);
  animation: sl-rise var(--duration-220) var(--ease-out);
}
.sl-panel[data-side="left"] { right: auto; left: var(--space-16); }
.sl-panel--static { position: relative; top: auto; right: auto; max-height: none; }
.sl-panel__head {
  display: flex; align-items: center; gap: var(--space-10);
  padding: var(--space-12) var(--space-10) var(--space-10) var(--space-14);
  border-bottom: var(--border-hair) solid var(--panel-line);
}
.sl-panel__mark {
  flex: none; width: var(--size-mark); height: var(--size-mark); border-radius: var(--radius-2);
  background: var(--accent); box-shadow: 0 0 0 var(--halo-mark) var(--accent-glow);
}
.sl-panel__sel {
  flex: 1; min-width: 0; color: var(--accent); font-weight: var(--fw-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-panel__dim { color: var(--panel-muted); white-space: nowrap; }
.sl-panel__pin {
  display: none; font-size: var(--fs-badge); letter-spacing: var(--ls-badge);
  padding: var(--space-1) var(--space-6); border-radius: var(--radius-pill);
  background: var(--panel-ink-3); color: var(--accent);
}
.sl-panel--pinned .sl-panel__pin { display: inline-block; }
.sl-panel__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16);
  padding: var(--space-9) var(--space-14); border-bottom: var(--border-hair) solid var(--panel-line);
  color: var(--panel-muted);
}
.sl-panel__meta b { color: var(--panel-text); font-weight: var(--fw-500); }
.sl-panel__actions { display: flex; gap: var(--space-8); padding: var(--space-10) var(--space-12); }
.sl-panel__foot {
  display: flex; justify-content: space-between; gap: var(--space-10);
  padding: 0 var(--space-14) var(--space-11); color: var(--panel-muted); font-size: var(--fs-11);
}
.sl-panel .sl-notice { display: none; }
.sl-panel--locked-hint .sl-notice { display: block; }
.sl-panel--locked .sl-copy::before { content: "🔒 "; }

/* Panel buttons */
.sl-panel-btn {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; text-align: center;
  padding: var(--space-8) var(--space-10); border-radius: var(--radius-9);
  border: var(--border-hair) solid var(--panel-line); color: var(--panel-text);
  font: inherit; font-weight: var(--fw-600);
  transition: background-color var(--duration-150) var(--ease-standard), transform var(--duration-100) var(--ease-standard);
}
.sl-panel-btn:hover { background: var(--panel-ink-3); }
.sl-panel-btn:active { transform: translateY(var(--space-1)); }
.sl-panel-btn--primary { background: var(--accent); color: var(--panel-ink); border-color: transparent; }
.sl-panel-btn--primary:hover { background: var(--accent-hover); }
.sl-panel-btn kbd {
  font: inherit; font-size: var(--fs-10); font-weight: var(--fw-500);
  margin-left: var(--space-6); padding: 0 var(--space-5);
  border: var(--border-hair) solid currentColor; border-radius: var(--radius-4); opacity: var(--opacity-hint);
}
.sl-panel-btn:focus-visible, .sl-icon-button:focus-visible, .sl-link-button:focus-visible, .sl-code:focus-visible {
  outline: var(--outline-focus-panel) solid var(--accent); outline-offset: var(--outline-offset);
}
/* The CodeBlock spans the panel, whose overflow: hidden would clip an outside ring on the left and right. */
.sl-code:focus-visible { outline-offset: calc(var(--outline-focus-panel) * -1); }

/* CodeBlock */
.sl-code {
  flex: 1; min-height: var(--size-code-min); margin: 0; padding: var(--space-12) var(--space-14);
  overflow: auto; background: var(--panel-ink-2); color: var(--panel-text);
  font: var(--fs-12)/var(--lh-panel) var(--font-mono-system);
}
.sl-code > div { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 4ch; text-indent: -4ch; }
.sl-code .p { color: var(--code-property); }
.sl-code .v { color: var(--code-value); }
.sl-code .s { color: var(--code-selector); }
.sl-code .pu { color: var(--code-punct); }
.sl-code .cm { color: var(--code-comment); font-style: italic; }

/* Swatch: set the colour with style="--c: #ccff4d" (el.style.setProperty('--c', value)). */
.sl-swatch {
  display: inline-block; width: var(--size-swatch); height: var(--size-swatch);
  margin-right: var(--space-6); border-radius: var(--radius-3); vertical-align: calc(var(--space-1) * -1);
  background: var(--c); box-shadow: var(--shadow-swatch);
}
.sl-code .sl-swatch { width: var(--size-swatch-code); height: var(--size-swatch-code); margin-right: var(--space-5); }

/* TagLabel */
.sl-tag {
  display: inline-block; white-space: nowrap; padding: var(--space-2) var(--space-7); border-radius: var(--radius-6);
  background: var(--accent); color: var(--panel-ink);
  font: var(--fw-600) var(--fs-11)/var(--lh-panel) var(--font-mono-system); box-shadow: var(--shadow-tag);
}
.sl-tag span { font-weight: var(--fw-400); opacity: var(--opacity-dim); margin-left: var(--space-6); }

/* HighlightOverlay: three boxes laid over the inspected element. */
.sl-hl { position: fixed; top: 0; left: 0; pointer-events: none; }
.sl-hl--margin { background: var(--hl-margin); }
.sl-hl--border { background: var(--hl-border); box-shadow: 0 0 0 var(--border-strong) var(--accent); }
.sl-hl--content { background: var(--hl-content); }
.sl-tag--floating { position: fixed; top: 0; left: 0; pointer-events: none; }
/* Live: hidden until the instrument has a target. */
.sl-instrument .sl-hl, .sl-instrument .sl-tag--floating { display: none; }
.sl-instrument.sl-on .sl-hl, .sl-instrument.sl-on .sl-tag--floating { display: block; }
/* Static illustration (docs, landing page): position inside a relative frame. */
.sl-overlay-frame { position: relative; }
.sl-overlay-frame .sl-hl, .sl-overlay-frame .sl-tag--floating { position: absolute; display: block; }

/* Toast */
.sl-toast {
  position: fixed; left: 50%; bottom: var(--space-28); max-width: min(var(--size-measure), calc(100vw - var(--space-16) * 2));
  transform: translate(-50%, var(--space-14)); opacity: 0; pointer-events: none; text-align: center;
  padding: var(--space-9) var(--space-16); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--panel-ink);
  font: var(--fw-600) var(--fs-12)/var(--lh-panel) var(--font-mono-system); box-shadow: var(--shadow-toast);
  transition: opacity var(--duration-200) var(--ease-standard), transform var(--duration-250) var(--ease-out);
}
.sl-toast--show { opacity: 1; transform: translate(-50%, 0); }
.sl-toast--bad { background: var(--peach); }
.sl-toast--static { position: static; display: inline-block; transform: none; opacity: 1; }

/* Notice: the upsell inside the panel. */
.sl-notice {
  margin: var(--space-10) var(--space-12) 0; padding: var(--space-12); border-radius: var(--radius-10);
  background: var(--accent-wash); border: var(--border-hair) solid var(--accent-edge);
}
.sl-notice strong { display: block; color: var(--panel-text); margin-bottom: var(--space-3); }
.sl-notice p { margin: 0 0 var(--space-10); color: var(--panel-muted); }

/* ---------- Stage + BrowserFrame (store artwork, always dark) ---------- */
.sl-stage {
  position: relative; overflow: hidden;
  background-color: var(--stage); color: var(--stage-text); font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(var(--stage-grid) var(--border-hair), transparent var(--border-hair)),
    linear-gradient(90deg, var(--stage-grid) var(--border-hair), transparent var(--border-hair));
  background-size: var(--size-grid-stage) var(--size-grid-stage);
}
.sl-stage em { font-style: italic; color: var(--accent); }
.sl-caption { width: var(--size-caption); }
.sl-caption__eyebrow {
  margin: 0 0 var(--space-22); font-size: var(--fs-13); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--stage-eyebrow);
}
.sl-caption__eyebrow::before {
  content: ""; display: inline-block; width: var(--size-swatch); height: var(--size-swatch);
  border-radius: var(--radius-2); background: var(--accent); margin-right: var(--space-12); vertical-align: 0;
}
.sl-caption__title { margin: 0; font: var(--fw-400) var(--fs-58)/var(--lh-stage) var(--font-serif); letter-spacing: var(--ls-stage); }
.sl-caption__sub { margin: var(--space-26) 0 0; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--stage-sub); }
.sl-stage-brand { font: var(--fw-400) var(--fs-26) var(--font-serif); color: var(--stage-text); }
.sl-stage-brand small {
  display: block; margin-top: var(--space-6); font: var(--fs-12) var(--font-mono);
  color: var(--stage-faint); letter-spacing: var(--ls-tagline);
}
.sl-frame {
  width: var(--size-frame); max-width: 100%; border-radius: var(--radius-14); overflow: hidden;
  background: var(--frame-page); box-shadow: var(--shadow-window);
}
.sl-frame__bar {
  height: var(--size-frame-bar); background: var(--frame-bar);
  display: flex; align-items: center; gap: var(--space-7); padding: 0 var(--space-14);
}
.sl-frame__bar i { width: var(--size-frame-dot); height: var(--size-frame-dot); border-radius: var(--radius-circle); background: var(--frame-dot); }
.sl-frame img { display: block; width: 100%; }

/* ---------- Landing additions ---------- */
/* SiteHeader / Nav */
.sl-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); }
.sl-brand {
  display: inline-flex; align-items: center; gap: var(--space-12);
  font: var(--fw-400) var(--fs-30)/var(--lh-none) var(--font-serif); color: var(--ink); text-decoration: none;
}
.sl-brand img { width: var(--size-logo); height: var(--size-logo); border-radius: var(--radius-8); box-shadow: var(--shadow-logo); }
.sl-brand:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.sl-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-20); font-size: var(--fs-13); }
.sl-nav a:not(.sl-button) { color: var(--soft); text-decoration: none; text-underline-offset: var(--underline-offset); }
.sl-nav a:not(.sl-button):hover, .sl-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.sl-nav a:not(.sl-button):focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }

/* Hero */
.sl-hero { padding: var(--space-76) 0 var(--space-44); }
.sl-display { margin: 0; font: var(--fw-400) var(--fs-display)/var(--lh-none) var(--font-serif); letter-spacing: var(--ls-display); }
.sl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin-top: var(--space-30); }

/* FeatureGrid */
.sl-features {
  list-style: none; margin: var(--space-22) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-28);
}
.sl-feature { padding-top: var(--space-14); border-top: var(--border-hair) solid var(--line); }
.sl-feature .sl-feature__kicker { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--soft); }
.sl-feature__title { margin: var(--space-8) 0 0; font: var(--fw-400) var(--fs-26)/var(--lh-heading) var(--font-serif); }
.sl-feature p { margin: var(--space-12) 0 0; color: var(--soft); }

/* PricingCard: a Card with a price, a list of what the price buys, and actions. */
.sl-price, .sl-card .sl-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-14);
  margin: var(--space-22) 0 0; font: var(--fw-400) var(--fs-80)/var(--lh-none) var(--font-serif);
  letter-spacing: var(--ls-display); max-width: none; color: var(--ink);
}
.sl-price small { font: var(--fs-13)/var(--lh-body) var(--font-mono); letter-spacing: 0; color: var(--soft); }
.sl-includes { list-style: none; margin: var(--space-26) 0 0; padding: 0; border-top: var(--border-hair) solid var(--line); }
.sl-includes li { padding: var(--space-12) 0; border-bottom: var(--border-hair) solid var(--line); }

/* FAQ */
.sl-faq { margin: var(--space-22) 0 0; border-top: var(--border-hair) solid var(--line); }
.sl-faq details { border-bottom: var(--border-hair) solid var(--line); }
.sl-faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-18);
  padding: var(--space-14) 0; font-weight: var(--fw-600); cursor: pointer; list-style: none;
}
.sl-faq summary::-webkit-details-marker { display: none; }
.sl-faq summary::after {
  content: "+"; flex: none; color: var(--soft); font-weight: var(--fw-400);
  transition: transform var(--duration-150) var(--ease-out);
}
.sl-faq details[open] > summary::after { transform: rotate(45deg); }
.sl-faq summary:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.sl-faq details > :not(summary) { margin: 0 0 var(--space-14); max-width: var(--size-measure); color: var(--soft); }

/* Footer */
.sl-footer { margin-top: var(--space-64); font-size: var(--fs-12); color: var(--soft); }
.sl-footer p { margin: var(--space-4) 0; }
.sl-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-18); margin-bottom: var(--space-12); }

/* BrowserBadge: "Add to Chrome / Edge / Safari", type only (no browser logos). */
.sl-badges { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.sl-badge {
  display: inline-flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  min-height: var(--size-control); padding: var(--space-8) var(--space-20); border-radius: var(--radius-12);
  border: var(--border-strong) solid var(--ink); background: transparent; color: var(--ink); text-decoration: none;
  transition:
    transform var(--duration-120) var(--ease-standard),
    box-shadow var(--duration-120) var(--ease-standard),
    background-color var(--duration-150) var(--ease-standard);
}
.sl-badge:hover { transform: translate(calc(var(--space-1) * -1), calc(var(--space-2) * -1)); box-shadow: var(--shadow-lift); }
.sl-badge:active { transform: none; box-shadow: none; }
.sl-badge:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.sl-badge__kicker { font-size: var(--fs-11); line-height: var(--lh-none); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--soft); }
.sl-badge__name { font: var(--fw-400) var(--fs-26)/var(--lh-none) var(--font-serif); }
.sl-badge--primary { background: var(--accent); color: var(--on-accent); border-color: var(--on-accent); }
.sl-badge--primary .sl-badge__kicker { color: var(--on-accent); }
.sl-badge[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; }

/* ---------- Motion ---------- */
@keyframes sl-rise { from { opacity: 0; transform: translateY(var(--space-6)) scale(0.985); } }
@keyframes sl-up { from { opacity: 0; transform: translateY(var(--space-10)); } }
.sl-hero > *, .sl-reveal { animation: sl-up var(--duration-700) var(--ease-out) both; }
.sl-hero > :nth-child(2), .sl-reveal--1 { animation-delay: var(--delay-1); }
.sl-hero > :nth-child(3), .sl-reveal--2 { animation-delay: var(--delay-2); }
.sl-hero > :nth-child(4), .sl-reveal--3 { animation-delay: var(--delay-3); }
.sl-reveal--4 { animation-delay: var(--delay-4); }

@media (max-width: 600px) {
  .sl-hero { padding-top: var(--space-48); }
  .sl-keys > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .sl-row { flex-direction: column; }
  .sl-card { padding: var(--space-22); }
  .sl-features { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}