/* ============================================================
   Stackpeek — design tokens + page styles
   Plain CSS. No build step, no external requests.
   The :root block below is the shared contract with the
   Svelte extension panel: copy it verbatim, nothing in it is
   page-specific.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Typefaces — system stacks, no network fonts.
     Sans: the platform UI face. Mono: the platform coding face.
     All data (versions, counts, domains, permissions) uses mono. */
  --sp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --sp-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
    "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale */
  --sp-fs-micro: 0.6875rem; /* 11px — caps labels, markers */
  --sp-fs-xs: 0.75rem;      /* 12px — panel data, meta */
  --sp-fs-sm: 0.8125rem;    /* 13px — dense UI, table data */
  --sp-fs-md: 0.9375rem;    /* 15px — body copy */
  --sp-fs-lg: 1.0625rem;    /* 17px — lead copy, item titles */
  --sp-fs-xl: 1.375rem;     /* 22px — section headings */
  --sp-fs-2xl: 1.75rem;     /* 28px — large headings */
  --sp-fs-3xl: 2.5rem;      /* 40px — page title */

  --sp-lh-tight: 1.15;
  --sp-lh-snug: 1.35;
  --sp-lh-normal: 1.6;

  --sp-fw-regular: 400;
  --sp-fw-medium: 500;
  --sp-fw-semibold: 600;

  --sp-tracking-caps: 0.08em;  /* small-caps label tracking */
  --sp-tracking-tight: -0.015em;

  /* Spacing — 4px base */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 48px;
  --sp-space-8: 64px;
  --sp-space-9: 96px;

  /* Shape — hairlines and small radii only */
  --sp-hairline: 1px;
  --sp-radius-sm: 2px;
  --sp-radius-md: 4px;
  --sp-radius-lg: 6px;

  /* Surfaces */
  --sp-bg: #ffffff;
  --sp-bg-subtle: #f7f8f9;
  --sp-bg-inset: #f1f3f5;
  --sp-surface: #ffffff;

  /* Lines */
  --sp-border: #e3e6ea;
  --sp-border-strong: #c9ced6;

  /* Text */
  --sp-text: #14161a;
  --sp-text-muted: #545c6a;
  --sp-text-faint: #6b7280;

  /* Accent — the only chromatic color. Primary CTA and the
     detected-theme highlight. Nothing else. */
  --sp-accent: #2b5ce6;
  --sp-accent-hover: #1f47bd;
  --sp-accent-on: #ffffff;
  --sp-accent-bg: #eef2ff;
  --sp-accent-border: #c3cffa;
  /* Accent-tinted page bands (hero, closing) */
  --sp-accent-wash: oklch(97.5% 0.018 265);

  /* Category tints — panel category markers only. Desaturated siblings
     of the accent hue, never used for text, fills, or CTAs. */
  --sp-tint-1: oklch(62% 0.13 265);
  --sp-tint-2: oklch(64% 0.11 200);
  --sp-tint-3: oklch(66% 0.10 155);
  --sp-tint-4: oklch(68% 0.11 75);
  --sp-tint-5: oklch(62% 0.12 320);

  /* Lightness and chroma for every category marker; the hue comes from
     the [data-sp-cat] rules further down. */
  --sp-cat-l: 64%;
  --sp-cat-c: 0.11;

  /* Focus */
  --sp-focus-ring: 2px solid var(--sp-accent);
  --sp-focus-offset: 2px;

  /* Motion — functional only */
  --sp-dur-fast: 90ms;
  --sp-dur-med: 160ms;
  --sp-ease: cubic-bezier(0.2, 0, 0.3, 1);
}

/* Dark palette. Applied by system preference unless the host has opted
   into light, and by an explicit [data-sp-theme="dark"] on the root. */
:root[data-sp-theme="dark"] {
  color-scheme: dark;
  --sp-bg: #0e1013;
  --sp-bg-subtle: #14171c;
  --sp-bg-inset: #1a1e24;
  --sp-surface: #12151a;

  --sp-border: #262b33;
  --sp-border-strong: #3a4150;

  --sp-text: #e8ebef;
  --sp-text-muted: #a2aab6;
  --sp-text-faint: #8b939f;

  --sp-accent: #7d9bff;
  --sp-accent-hover: #9ab0ff;
  --sp-accent-on: #0b0e13;
  --sp-accent-bg: #161c2c;
  --sp-accent-border: #2c3a5e;
  --sp-accent-wash: oklch(20% 0.03 265);

  --sp-tint-1: oklch(72% 0.13 265);
  --sp-tint-2: oklch(74% 0.11 200);
  --sp-tint-3: oklch(76% 0.10 155);
  --sp-tint-4: oklch(78% 0.11 75);
  --sp-tint-5: oklch(72% 0.12 320);
  --sp-cat-l: 74%;
}

:root[data-sp-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-sp-theme="light"]) {
    --sp-bg: #0e1013;
    --sp-bg-subtle: #14171c;
    --sp-bg-inset: #1a1e24;
    --sp-surface: #12151a;

    --sp-border: #262b33;
    --sp-border-strong: #3a4150;

    --sp-text: #e8ebef;
    --sp-text-muted: #a2aab6;
    --sp-text-faint: #8b939f;

    --sp-accent: #7d9bff;
    --sp-accent-hover: #9ab0ff;
    --sp-accent-on: #0b0e13;
    --sp-accent-bg: #161c2c;
    --sp-accent-border: #2c3a5e;
    --sp-accent-wash: oklch(20% 0.03 265);

    --sp-tint-1: oklch(72% 0.13 265);
    --sp-tint-2: oklch(74% 0.11 200);
    --sp-tint-3: oklch(76% 0.10 155);
    --sp-tint-4: oklch(78% 0.11 75);
    --sp-tint-5: oklch(72% 0.12 320);
    --sp-cat-l: 74%;
  }
}

/* Theme switch — enhancement only, revealed once JS marks the root.
   Copied from the extension panel's .sp-iconbtn (panel.css) so one control
   looks the same everywhere; every token it uses is already in the :root
   contract above.

   panel.css ships on these pages too and defines the same class, but every rule
   there is scoped `.sp-panel .sp-iconbtn`, so the two coexist: the panel's own
   buttons keep the panel's rules, and this unscoped copy dresses the masthead. */
.sp-iconbtn { display: none; }
:root[data-sp-js] .sp-iconbtn { display: inline-flex; }
.sp-iconbtn {
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: var(--sp-hairline) solid transparent;
  border-radius: var(--sp-radius-md);
  background: transparent;
  color: var(--sp-text-muted);
  cursor: pointer;
  transition: background-color var(--sp-dur-fast) var(--sp-ease),
              color var(--sp-dur-fast) var(--sp-ease);
}
.sp-iconbtn:hover { background: var(--sp-bg-inset); color: var(--sp-text); }
.sp-iconbtn svg { width: 14px; height: 14px; }

/* Which icon shows is the same three-way question the palette answers above:
   an explicit choice wins, its absence follows the system. The icon names where
   the button takes you, so it is the opposite of the theme in force.

   These rules own `display` outright, and the sizing rule above deliberately
   sets none. Both icons are in the DOM — the panel's Svelte version renders one
   at a time and can afford a `display` on its descendant selector, this one
   cannot: at (0,1,1) it would outrank these and show both at once. */
.sp-iconbtn__moon { display: block; }
.sp-iconbtn__sun { display: none; }
:root[data-sp-theme="dark"] .sp-iconbtn__moon { display: none; }
:root[data-sp-theme="dark"] .sp-iconbtn__sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-sp-theme="light"]) .sp-iconbtn__moon { display: none; }
  :root:not([data-sp-theme="light"]) .sp-iconbtn__sun { display: block; }
}

/* ============================================================
   Page — resets and shell
   ============================================================ */

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

/* Host document reset. The page itself is scoped to .sp-page, so the
   fragment can be pasted into any ERB layout. */
html, body { margin: 0; background: var(--sp-bg); }

.sp-page {
  background: var(--sp-bg);
  color: var(--sp-text);
  font-family: var(--sp-font-sans);
  font-size: var(--sp-fs-md);
  line-height: var(--sp-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sp-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-space-5);
}

.sp-section {
  border-top: var(--sp-hairline) solid var(--sp-border);
  padding: var(--sp-space-8) 0;
}

.sp-section--flush { border-top: 0; }

h1, h2, h3, p, ul, ol, dl, dd, dt, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--sp-accent); text-decoration: none; }
a:hover { color: var(--sp-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

:where(a, button, input, summary):focus-visible {
  outline: var(--sp-focus-ring);
  outline-offset: var(--sp-focus-offset);
  border-radius: var(--sp-radius-sm);
}

.sp-mono {
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sp-eyebrow {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-accent);
}

.sp-h2 {
  font-size: var(--sp-fs-xl);
  font-weight: var(--sp-fw-semibold);
  line-height: var(--sp-lh-snug);
  letter-spacing: var(--sp-tracking-tight);
}

.sp-lede {
  color: var(--sp-text-muted);
  font-size: var(--sp-fs-md);
  max-width: 62ch;
  text-wrap: pretty;
}

.sp-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  margin-bottom: var(--sp-space-6);
  max-width: 68ch;
}

/* ============================================================
   Masthead
   ============================================================ */

.sp-masthead {
  border-bottom: var(--sp-hairline) solid var(--sp-border);
  background: var(--sp-bg);
}

.sp-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  height: 56px;
}

.sp-brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  color: var(--sp-text);
  font-weight: var(--sp-fw-semibold);
  letter-spacing: var(--sp-tracking-tight);
}
.sp-brand:hover { text-decoration: none; color: var(--sp-text); }
.sp-brand__tag {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  font-weight: var(--sp-fw-regular);
  color: var(--sp-text-faint);
}

.sp-navlinks {
  display: flex;
  align-items: center;
  gap: var(--sp-space-5);
  font-size: var(--sp-fs-sm);
}
.sp-navlinks a:not(.sp-btn) { color: var(--sp-text-muted); }
.sp-navlinks a:not(.sp-btn):hover { color: var(--sp-text); }

/* ============================================================
   Buttons and fields
   ============================================================ */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-space-2);
  padding: 10px var(--sp-space-4);
  border: var(--sp-hairline) solid transparent;
  border-radius: var(--sp-radius-md);
  font: inherit;
  font-size: var(--sp-fs-sm);
  font-weight: var(--sp-fw-medium);
  cursor: pointer;
  transition: background-color var(--sp-dur-fast) var(--sp-ease),
              border-color var(--sp-dur-fast) var(--sp-ease),
              color var(--sp-dur-fast) var(--sp-ease);
}

.sp-btn--primary {
  background: var(--sp-accent);
  color: var(--sp-accent-on);
}
.sp-btn--primary:hover {
  background: var(--sp-accent-hover);
  color: var(--sp-accent-on);
  text-decoration: none;
}

.sp-btn--quiet {
  background: transparent;
  border-color: var(--sp-border-strong);
  color: var(--sp-text);
}
.sp-btn--quiet:hover {
  background: var(--sp-bg-inset);
  color: var(--sp-text);
  text-decoration: none;
}

.sp-field {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px var(--sp-space-3);
  border: var(--sp-hairline) solid var(--sp-border-strong);
  border-radius: var(--sp-radius-md);
  background: var(--sp-surface);
  color: var(--sp-text);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-sm);
}
.sp-field::placeholder { color: var(--sp-text-faint); }

/* ============================================================
   1 — Hero
   ============================================================ */

.sp-hero {
  padding: var(--sp-space-9) 0 var(--sp-space-8);
  background: linear-gradient(var(--sp-accent-wash), var(--sp-bg));
  border-bottom: var(--sp-hairline) solid var(--sp-border);
}

.sp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-space-8);
  align-items: start;
}

.sp-h1 {
  font-size: var(--sp-fs-3xl);
  line-height: var(--sp-lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--sp-fw-semibold);
  max-width: 22ch;
  text-wrap: balance;
}

.sp-hero__sub {
  margin-top: var(--sp-space-4);
  font-size: var(--sp-fs-lg);
  line-height: var(--sp-lh-snug);
  color: var(--sp-text-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-3);
  margin-top: var(--sp-space-6);
}

.sp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-1) var(--sp-space-5);
  margin-top: var(--sp-space-6);
  padding-top: var(--sp-space-4);
  border-top: var(--sp-hairline) solid var(--sp-border);
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sp-fs-xs);
  color: var(--sp-text-faint);
}
.sp-hero__facts b {
  font-weight: var(--sp-fw-medium);
  color: var(--sp-text);
}

/* ============================================================
   2 — Live demo panel (≈360px, extension proportions)
   ============================================================ */

.sp-panel-slot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-3);
}

/* Placement of the panel on the marketing page. Everything inside it is styled
   by panel.css, the same file the extension ships. */
.sp-panel {
  width: 100%;
  max-width: 360px;
  min-height: auto;
  border: var(--sp-hairline) solid var(--sp-border-strong);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
}

/* Category markers. Every category carries a hue; lightness and chroma are one
   pair of tokens, so the whole set reads as one system and switches with the
   scheme automatically. Hues are spaced so categories that display next to each
   other land at least 40 degrees apart -- that separation is what the eye
   actually uses, since neighbouring groups are what get compared.

   Keyed to the category, never to DOM position, so a category keeps its colour
   whether or not the others are present. A category with no rule here sets no
   --sp-cat-tint at all, so .sp-cat__label::before falls back to the neutral
   marker -- which is why these are written out per category rather than composed
   from a hue variable: an unset hue makes the colour function invalid, and an
   invalid substitution drops the background entirely instead of falling back.

   Written one declaration per line because colour literals belong on token
   lines; check_colour_literals enforces it.

   The first five hues are the original --sp-tint-1..5 values, unchanged, so the
   established categories keep the colours the design settled on.
   Shared convention: same attribute values in panel.css. */
[data-sp-cat="email-sms"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 265);
}
[data-sp-cat="page-builder"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 200);
}
[data-sp-cat="reviews"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 155);
}
[data-sp-cat="upsell"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 75);
}
[data-sp-cat="subscriptions"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 320);
}
[data-sp-cat="sales"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 0);
}
[data-sp-cat="marketing"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 133);
}
[data-sp-cat="store-design"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 293);
}
[data-sp-cat="customer-service"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 67);
}
[data-sp-cat="social-media"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 227);
}
[data-sp-cat="analytics"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 13);
}
[data-sp-cat="advertising"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 147);
}
[data-sp-cat="discounts"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 307);
}
[data-sp-cat="payments"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 93);
}
[data-sp-cat="shipping-delivery"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 240);
}
[data-sp-cat="orders"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 27);
}
[data-sp-cat="product-management"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 173);
}
[data-sp-cat="search-navigation"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 333);
}
[data-sp-cat="localization"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 107);
}
[data-sp-cat="loyalty"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 253);
}
[data-sp-cat="trust-security"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 40);
}
[data-sp-cat="privacy-compliance"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 187);
}
[data-sp-cat="dropshipping"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 347);
}
[data-sp-cat="seo"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 120);
}
[data-sp-cat="store-management"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 280);
}
[data-sp-cat="performance"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 53);
}
[data-sp-cat="accessibility"] {
  --sp-cat-tint: oklch(var(--sp-cat-l) var(--sp-cat-c) 213);
}
.sp-panel-caption {
  font-size: var(--sp-fs-xs);
  color: var(--sp-text-faint);
  max-width: 360px;
  text-wrap: pretty;
}

/* ============================================================
   3 — What it detects
   ============================================================ */

.sp-detects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: var(--sp-hairline) solid var(--sp-border);
}
.sp-detects__item {
  padding: var(--sp-space-5) var(--sp-space-5) var(--sp-space-5) 0;
  border-right: var(--sp-hairline) solid var(--sp-border);
}
.sp-detects__item:first-child { padding-left: 0; }
.sp-detects__item + .sp-detects__item { padding-left: var(--sp-space-5); }
.sp-detects__item:last-child { border-right: 0; padding-right: 0; }
.sp-detects__title {
  font-size: var(--sp-fs-lg);
  font-weight: var(--sp-fw-semibold);
  letter-spacing: var(--sp-tracking-tight);
  margin-bottom: var(--sp-space-2);
}
.sp-detects__item:nth-child(1) { --sp-cat-tint: var(--sp-tint-1); }
.sp-detects__item:nth-child(2) { --sp-cat-tint: var(--sp-tint-2); }
.sp-detects__item:nth-child(3) { --sp-cat-tint: var(--sp-tint-3); }
.sp-detects__item { position: relative; }
.sp-detects__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--sp-cat-tint);
}
.sp-detects__item + .sp-detects__item::before { left: var(--sp-space-5); }
.sp-detects__body {
  font-size: var(--sp-fs-sm);
  color: var(--sp-text-muted);
  text-wrap: pretty;
}
.sp-detects__body code {
  font-family: var(--sp-font-mono);
  font-size: 0.95em;
  color: var(--sp-text);
}

/* ============================================================
   4 — Product export
   ============================================================ */

/* Desktop-first, matching .sp-perms and .sp-states. Do not author this
   mobile-first: at exactly 860px the two conventions disagree, one
   collapsing while the other expands. */
.sp-export {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-space-7);
  align-items: start;
}
@media (max-width: 860px) {
  .sp-export { grid-template-columns: 1fr; gap: var(--sp-space-6); }
}
.sp-export__copy { display: grid; gap: var(--sp-space-4); color: var(--sp-text-muted); }
.sp-export__copy p { margin: 0; font-size: var(--sp-fs-md); text-wrap: pretty; }
.sp-export__note {
  padding-top: var(--sp-space-4);
  border-top: var(--sp-hairline) solid var(--sp-border);
  font-size: var(--sp-fs-sm);
  color: var(--sp-text-faint);
}

/* ============================================================
   5 — Permissions
   ============================================================ */

.sp-perms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--sp-space-8);
  align-items: start;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--sp-hairline) solid var(--sp-border-strong);
  text-align: left;
}
.sp-table th,
.sp-table td {
  padding: var(--sp-space-3) var(--sp-space-4) var(--sp-space-3) 0;
  border-bottom: var(--sp-hairline) solid var(--sp-border);
  vertical-align: baseline;
}
.sp-table thead th {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  font-weight: var(--sp-fw-regular);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-text-faint);
  padding-top: var(--sp-space-2);
  padding-bottom: var(--sp-space-2);
}
.sp-table td:last-child, .sp-table th:last-child { padding-right: 0; }
.sp-table__key {
  width: 34%;
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-sm);
  color: var(--sp-text);
  white-space: nowrap;
}
.sp-table__val {
  font-size: var(--sp-fs-sm);
  color: var(--sp-text-muted);
}
.sp-table__n {
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sp-fs-sm);
  color: var(--sp-text);
  text-align: right;
  white-space: nowrap;
}

.sp-negations {
  border: var(--sp-hairline) solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  padding: var(--sp-space-5);
  background: var(--sp-bg-subtle);
}
.sp-negations__title {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-text-faint);
  margin-bottom: var(--sp-space-3);
}
.sp-negations__list {
  display: grid;
  gap: var(--sp-space-2);
  font-size: var(--sp-fs-sm);
  color: var(--sp-text);
}
.sp-negations__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--sp-space-2);
  align-items: baseline;
}
.sp-negations__list li::before {
  content: "no";
  font-family: var(--sp-font-mono);
  font-size: 10px;
  color: var(--sp-text-faint);
}
.sp-negations__note {
  margin-top: var(--sp-space-4);
  padding-top: var(--sp-space-4);
  border-top: var(--sp-hairline) solid var(--sp-border);
  font-size: var(--sp-fs-sm);
  color: var(--sp-text-muted);
  text-wrap: pretty;
}

/* ============================================================
   6 — How it works
   ============================================================ */

.sp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-space-5);
  counter-reset: sp-step;
}
.sp-steps li {
  counter-increment: sp-step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-space-3);
  align-items: baseline;
  padding-top: var(--sp-space-3);
  border-top: 2px solid var(--sp-accent-border);
  font-size: var(--sp-fs-md);
}
.sp-steps li::before {
  content: counter(sp-step, decimal-leading-zero);
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--sp-fs-xs);
  color: var(--sp-accent);
}

/* ============================================================
   7 — Store Intelligence — one reserved container, two states
   ============================================================ */

.sp-states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-5);
  align-items: start;
}

.sp-state { display: flex; flex-direction: column; gap: var(--sp-space-2); }
.sp-state__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-text-faint);
}

/* The reserved slot itself — identical shell in both states */
.sp-slot {
  display: flex;
  flex-direction: column;
  border: var(--sp-hairline) solid var(--sp-border-strong);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-surface);
  min-height: 268px;
}
.sp-slot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3) var(--sp-space-4);
  border-bottom: var(--sp-hairline) solid var(--sp-border);
  background: var(--sp-bg-subtle);
}
.sp-slot__title {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  /* Weight and full-strength colour so a section head outranks the rows
     beneath it; at 10px uppercase mono, weight alone is too slight. */
  font-weight: var(--sp-fw-semibold);
  color: var(--sp-text);
}
.sp-slot__state {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-fs-micro);
  color: var(--sp-text-faint);
}
.sp-slot__body {
  flex: 1;
  padding: var(--sp-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-4);
}
.sp-slot__copy {
  font-size: var(--sp-fs-sm);
  color: var(--sp-text-muted);
  text-wrap: pretty;
}
.sp-slot__foot {
  margin-top: auto;
  padding-top: var(--sp-space-3);
  border-top: var(--sp-hairline) solid var(--sp-border);
}

/* Metric rows — the row structure the v2 data drops into */
.sp-metrics { display: grid; }
.sp-metrics li,
.sp-metrics__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-space-4);
  align-items: baseline;
  padding: var(--sp-space-3) 0;
  border-bottom: var(--sp-hairline) solid var(--sp-border);
  font-size: var(--sp-fs-sm);
}
.sp-metrics li:first-child { padding-top: 0; }
.sp-metrics li:last-child { border-bottom: 0; }
.sp-metrics__k { color: var(--sp-text-muted); }
.sp-metrics__v {
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sp-text);
}
.sp-metrics__v span { color: var(--sp-text-faint); }

.sp-notify {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-2);
}
.sp-notify__hint {
  flex: 1 0 100%;
  font-size: var(--sp-fs-xs);
  color: var(--sp-text-faint);
}

/* ============================================================
   8 — FAQ
   ============================================================ */

.sp-faq {
  border-top: var(--sp-hairline) solid var(--sp-border-strong);
  columns: 2;
  column-gap: var(--sp-space-8);
}
.sp-faq__item {
  break-inside: avoid;
  padding: var(--sp-space-4) 0;
  border-bottom: var(--sp-hairline) solid var(--sp-border);
}
.sp-faq__q {
  font-size: var(--sp-fs-md);
  font-weight: var(--sp-fw-semibold);
  margin-bottom: var(--sp-space-2);
}
.sp-faq__a {
  font-size: var(--sp-fs-sm);
  color: var(--sp-text-muted);
  text-wrap: pretty;
}
.sp-faq__a code {
  font-family: var(--sp-font-mono);
  color: var(--sp-text);
}

/* ============================================================
   Closing CTA + footer
   ============================================================ */

.sp-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-5);
}
.sp-section--wash {
  background: linear-gradient(var(--sp-bg), var(--sp-accent-wash));
}
.sp-closing__title {
  font-size: var(--sp-fs-2xl);
  font-weight: var(--sp-fw-semibold);
  letter-spacing: var(--sp-tracking-tight);
  line-height: var(--sp-lh-snug);
  max-width: 24ch;
}

.sp-footer {
  border-top: var(--sp-hairline) solid var(--sp-border);
  padding: var(--sp-space-5) 0 var(--sp-space-7);
}
.sp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-space-3) var(--sp-space-5);
  font-size: var(--sp-fs-xs);
  color: var(--sp-text-faint);
}
.sp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-space-4);
}
.sp-footer__links a { color: var(--sp-text-muted); }
.sp-footer__links a:hover { color: var(--sp-text); }
.sp-footer__legal { text-wrap: pretty; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1040px) {
  .sp-hero__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-space-6); }
  .sp-perms { gap: var(--sp-space-6); }
}

@media (max-width: 860px) {
  :root { --sp-fs-3xl: 2rem; --sp-fs-2xl: 1.5rem; --sp-fs-xl: 1.25rem; }
  .sp-hero { padding: var(--sp-space-7) 0 var(--sp-space-6); }
  .sp-hero__grid,
  .sp-perms,
  .sp-states { grid-template-columns: minmax(0, 1fr); }
  .sp-hero__grid { gap: var(--sp-space-7); }
  .sp-detects,
  .sp-steps { grid-template-columns: minmax(0, 1fr); }
  .sp-detects__item {
    border-right: 0;
    border-bottom: var(--sp-hairline) solid var(--sp-border);
    padding: var(--sp-space-4) 0;
  }
  .sp-detects__item + .sp-detects__item { padding-left: 0; }
  .sp-detects__item + .sp-detects__item::before { left: 0; }
  .sp-detects__item:last-child { border-bottom: 0; }
  .sp-faq { columns: 1; }
  .sp-navlinks a:not(.sp-navlinks__cta) { display: none; }
}

@media (max-width: 560px) {
  :root { --sp-fs-3xl: 1.75rem; }
  .sp-wrap { padding: 0 var(--sp-space-4); }
  .sp-section { padding: var(--sp-space-7) 0; }
  .sp-h1 { max-width: none; }
  .sp-hero__actions .sp-btn { flex: 1 1 100%; }
  .sp-table__key { width: auto; white-space: normal; }
  .sp-table th, .sp-table td { padding-right: var(--sp-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}