/* ============================================================
   THE RAFFLE — SALES SITE (platform.html)
   The B2B page that sells the platform rather than a draw. It sits
   on the design system as designed (tokens, base, components,
   chrome) and adds only what a product-marketing page needs: its
   own nav and footer, the section shapes, and faithful miniatures
   of the two things it sells — the admin console and the branded
   storefront.

   Three rules this file keeps:
   · Every colour is a token. The console miniature restates the
     console's own OKLCH set (css/console.css → TOKENS) inside
     `.pf-console`, because console.css cannot load beside
     components.css. The storefront miniature paints only through
     the seven --color-brand-* anchors, exactly as the real one
     does, which is what lets `[data-sl-brand]` re-brand it.
   · A miniature is sized in `em` off a container-relative font
     size (`--pf-base` design pixels across its frame), so it
     scales like a screenshot and stays sharp.
   · Motion is transform / opacity / filter / clip-path only, and
     every loop stops under prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   PAGE TOKENS
   Layout constants for this page only — measures, not design
   decisions. Colour, type and spacing all come from tokens.css.
   ============================================================ */
.sl-page {
  --sl-nav-h: 64px;
  --sl-content: 1200px;
  --sl-copy: 880px;
  --sl-gutter: var(--spacing-40);
  --sl-section: var(--spacing-120);
  --sl-hairline: rgba(var(--color-brand-primary-rgb), 0.10);
  --sl-hairline-dark: rgba(var(--color-brand-highlight-rgb), 0.14);
  /* The two Glass Card recipes (DESIGN.md → Glass Card), one per
     ground. Glass only reads over something to be glass over, so
     every grid that carries it stands on an aura (GLASS, below). */
  --sl-glass-light: var(--glass-fill-light);
  --sl-glass-light-edge: var(--sl-hairline);
  --sl-glass-dark: var(--glass-fill-dark);
  --sl-glass-dark-edge: var(--deck-glass-border);
  /* Parchment at a fifth of its strength: what an activated tile is
     tinted with. Full Parchment stays for grounds and small pills. */
  --sl-parchment-soft: color-mix(in srgb, var(--color-parchment) 20%, var(--color-snow));
  /* Motion. Every small state that appears or leaves in place — a
     toast, a badge, a swapped value, a confirmation — fades on one
     duration and settles on another, both on the strong ease-out
     (--ease-deck-out), so no two of them move at different speeds. */
  --sl-fade: 240ms;
  --sl-settle: 380ms;
  /* The page draws its own nav, so only the dev bar is paid back. */
  padding-top: var(--dev-bar-h);
  background: var(--color-mist);
  color: var(--color-ink);
}
.sl-page main { padding-bottom: 0; }
@media (max-width: 768px) {
  .sl-page { --sl-gutter: var(--spacing-20); --sl-section: var(--spacing-80); --sl-nav-h: 56px; }
}

.sl-container {
  width: 100%;
  max-width: calc(var(--sl-content) + 2 * var(--sl-gutter));
  margin-inline: auto;
  padding-inline: calc(var(--sl-gutter) + env(safe-area-inset-left, 0px)) calc(var(--sl-gutter) + env(safe-area-inset-right, 0px));
}

.sl-skip {
  position: fixed; top: calc(var(--dev-bar-h) + var(--spacing-8)); left: var(--spacing-8);
  z-index: var(--z-modal);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pill);
  background: var(--color-snow); color: var(--color-ink);
}
.sl-skip:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sl-skip:focus-visible { outline: 2px solid var(--color-brand-primary); }

/* Anchored sections land clear of the fixed dev bar and nav. */
.sl-page section[id] { scroll-margin-top: calc(var(--dev-bar-h) + var(--sl-nav-h)); }

/* ============================================================
   TYPE
   Switzer Light carries every headline, with one to three Bold
   Italic (.hatton) words; the tracking tightens with the size
   (--ls-* ladder). The lead is set in the display face at a
   reading weight, one step up from body, so a section's single
   sentence reads as a statement rather than as a caption.
   ============================================================ */
.sl-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: clamp(var(--text-heading-lg), 5.4vw, var(--text-display));
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.sl-h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: clamp(var(--text-heading), 4.2vw, var(--text-display-sm));
  line-height: 1.1;
  letter-spacing: var(--ls-heading-lg);
  color: var(--color-obsidian);
  text-wrap: balance;
}
.sl-display .hatton, .sl-h2 .hatton { padding-right: 0.04em; }
.sl-lead {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: clamp(var(--text-subheading), 1.7vw, var(--text-heading-sm));
  line-height: 1.45;
  letter-spacing: var(--ls-heading-sm);
  color: var(--color-slate);
  text-wrap: pretty;
}
.sl-lead--dark { color: var(--dark-body); }

.sl-eyebrow {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  font-size: var(--text-body-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
}
.sl-eyebrow .icon { color: var(--color-brand-primary); }
.sl-eyebrow--dark {
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-dark);
  border: 1px solid var(--deck-glass-border);
  color: var(--dark-heading);
}
.sl-eyebrow--dark .icon { color: var(--dark-accent); }

/* Card titles: one size for every large card on the page — the bento
   and growth tiles, the revenue cards, the plans and the flow nodes —
   so a card reads as a card wherever it stands. The 32px heading
   step, in the page's headline voice (Switzer Light). Colour stays
   with each card, because it follows the ground. */
.sl-tile-copy h3,
.sl-rev-safe-copy h3,
.sl-rev-type h3,
.sl-plan h3,
.sl-node > b {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: var(--text-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1.15;
  text-wrap: balance;
}
/* The small cards a step down, at 24px, in the same voice: the setup
   steps and the storefront features come in runs of three and six,
   where 32px titles outweigh the section heading above them. */
.sl-step-copy b,
.sl-features b {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: var(--text-heading-md);
  letter-spacing: var(--ls-heading-md);
  line-height: 1.2;
  text-wrap: balance;
}

.sl-fine { font-size: var(--text-body-xs); line-height: var(--leading-body-xs, 1.64); color: var(--color-steel); }
.sl-fine--dark { color: var(--dark-body-quiet); }

/* A section head: eyebrow, headline, one sentence. Centred by
   default; `--start` for a head that shares its row. */
.sl-head {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-16);
  max-width: var(--sl-copy);
  margin: 0 auto var(--spacing-64);
  text-align: center;
}
.sl-head .sl-lead { max-width: 640px; }
.sl-head--start { align-items: flex-start; text-align: left; margin-inline: 0; }
.sl-head--dark .sl-h2 { color: var(--dark-heading); }
@media (max-width: 768px) { .sl-head { margin-bottom: var(--spacing-40); } }

.sl-ctas { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.sl-ctas--center { justify-content: center; }

/* ============================================================
   SECTION SHAPES
   ============================================================ */
.sl-section { padding-block: var(--sl-section); }
.sl-section--snow { background: var(--color-snow); }

/* ============================================================
   GLASS
   Every grid of cards on the page is drawn in the Glass Card
   recipe for its ground: the light one over Snow, Mist and
   Parchment, the dark one over the dark surface. A translucent card over a flat colour
   is only a paler card, so each of those grids stands on an aura —
   a few soft pools of its ground's brand colours behind the cards,
   for the frost to catch. The aura is the grid's own layer (::before
   under an isolated grid), reaching into the section's air and out
   to the gutter and no further, so it can never widen the page.
   ============================================================ */
.sl-rev-grid, .sl-features, .sl-flow, .sl-bento, .sl-growth-grid {
  position: relative;
  isolation: isolate;
  /* Each pool is sized so it has faded out before it reaches the
     edge of the aura's box — centre ± radius stays inside 0–100% —
     so no pool is ever cut off in a straight line. */
  --sl-aura:
    radial-gradient(28% 40% at 28% 44%, rgba(var(--color-brand-highlight-rgb), 0.95), transparent),
    radial-gradient(26% 40% at 72% 42%, rgba(var(--color-brand-secondary-rgb), 0.62), transparent),
    radial-gradient(30% 32% at 52% 64%, rgba(var(--color-brand-highlight-rgb), 0.75), transparent);
}
.sl-rev-grid::before, .sl-features::before, .sl-flow::before, .sl-bento::before, .sl-growth-grid::before {
  content: "";
  position: absolute; z-index: -1;
  inset: calc(-1 * var(--spacing-64)) calc(-1 * var(--sl-gutter));
  background: var(--sl-aura);
  pointer-events: none;
}
/* The revenue grid's top tile is solid, so its pools sit under the
   two glass cards below it. */
.sl-rev-grid {
  --sl-aura:
    radial-gradient(26% 30% at 27% 70%, rgba(var(--color-brand-highlight-rgb), 0.95), transparent),
    radial-gradient(26% 30% at 73% 66%, rgba(var(--color-brand-secondary-rgb), 0.62), transparent),
    radial-gradient(22% 20% at 50% 78%, rgba(var(--color-brand-highlight-rgb), 0.7), transparent);
}
/* Over the dark surface the pools are the dark set's own two inks,
   kept low so the section stays dark rather than turning neon. */
.sl-growth-grid {
  --sl-aura:
    radial-gradient(22% 22% at 24% 26%, color-mix(in srgb, var(--dark-heading) 18%, transparent), transparent),
    radial-gradient(24% 20% at 74% 50%, color-mix(in srgb, var(--dark-accent) 18%, transparent), transparent),
    radial-gradient(26% 20% at 36% 78%, color-mix(in srgb, var(--dark-heading) 14%, transparent), transparent);
}

/* The two materials. No shadow on either — glass is a flat
   translucent layer, not a raised object (DESIGN.md). And no
   backdrop blur on the cards: what stands behind them is the aura,
   soft pools that a blur leaves looking exactly as they were, so the
   blur would buy nothing and cost a GPU layer per card, re-blurred
   every frame the meters and counters inside them move — the frames
   a phone drops while scrolling. The translucency is the glass. Blur
   stays on the nav, where the page really does pass under it. */
.sl-rev-grid > .sl-rev-type,
.sl-features > li,
.sl-flow > .sl-node:not(.sl-node--core),
.sl-bento > .sl-tile {
  background: var(--sl-glass-light);
  border: 1px solid var(--sl-glass-light-edge);
}
.sl-growth-grid > .sl-tile {
  background: var(--sl-glass-dark);
  border: 1px solid var(--sl-glass-dark-edge);
}

/* ============================================================
   NAV
   Fixed under the dev bar. Over the hero it is transparent with
   the dark-ground inks; past the hero it becomes a translucent
   Mist material (its ::after layer fades in — the chrome.css
   recipe), because content scrolling under a floating bar should
   stay faintly visible rather than be cut off by an opaque strip.
   ============================================================ */
.sl-nav {
  position: fixed;
  top: var(--dev-bar-h); left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--sl-nav-h);
  color: var(--dark-heading);
  transition: color var(--duration-micro) ease;
  --sl-nav-ink: rgba(var(--color-brand-highlight-rgb), 0.72);
  --sl-nav-hover: rgba(255, 255, 255, 0.08);
}
.sl-nav::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-mist) 76%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--sl-hairline);
  opacity: 0;
  transition: opacity var(--duration-micro) ease;
}
.sl-nav.is-solid, .sl-page.is-menu-open .sl-nav {
  color: var(--color-ink);
  --sl-nav-ink: var(--color-slate);
  --sl-nav-hover: rgba(var(--color-brand-primary-rgb), 0.05);
}
.sl-nav.is-solid::after, .sl-page.is-menu-open .sl-nav::after { opacity: 1; }

.sl-nav-inner {
  height: 100%;
  max-width: calc(var(--sl-content) + 2 * var(--sl-gutter));
  margin-inline: auto;
  padding-inline: calc(var(--sl-gutter) + env(safe-area-inset-left, 0px)) calc(var(--sl-gutter) + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: var(--spacing-24);
}

.sl-brand { display: inline-flex; align-items: center; gap: var(--spacing-12); color: inherit; }
@media (hover: hover) and (pointer: fine) { .sl-brand:hover { text-decoration: none; } }
/* The wordmark is one file drawn in whatever ink the ground calls
   for: a mask over currentColor rather than a recoloured image. */
.sl-logo {
  display: block;
  width: 104px;
  aspect-ratio: 1620 / 348;
  background: currentColor;
  -webkit-mask: url('../images/logo.svg') center / contain no-repeat;
  mask: url('../images/logo.svg') center / contain no-repeat;
}
.sl-brand-tag {
  padding: 3px var(--spacing-8);
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.sl-nav-links { display: flex; align-items: center; gap: var(--spacing-4); margin-left: var(--spacing-16); }
.sl-nav-links a, .sl-nav-link-btn {
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--sl-nav-ink);
  transition: color var(--duration-micro) ease, background var(--duration-micro) ease, transform 160ms var(--ease-deck-out);
}
.sl-nav-links a:active, .sl-nav-link-btn:active { transform: scale(0.97); }
.sl-nav-links a[aria-current="true"] { color: inherit; background: var(--sl-nav-hover); }
/* On the light material the section you are in is the activated
   link, and activated is Parchment on this page. */
.sl-nav.is-solid .sl-nav-links a[aria-current="true"] { background: var(--color-parchment); }
@media (hover: hover) and (pointer: fine) {
  .sl-nav-links a:hover, .sl-nav-link-btn:hover { color: inherit; background: var(--sl-nav-hover); text-decoration: none; }
}
.sl-nav-link-btn { display: none; border: 0; background: none; font-family: inherit; cursor: pointer; }

.sl-nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-8); }
.sl-nav-talk {
  padding: var(--spacing-8) var(--spacing-12);
  border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-body); font-weight: var(--font-weight-medium);
  color: var(--sl-nav-ink);
  transition: color var(--duration-micro) ease, background var(--duration-micro) ease, transform 160ms var(--ease-deck-out);
}
.sl-nav-talk:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sl-nav-talk:hover { color: inherit; background: var(--sl-nav-hover); } }

/* The nav's CTA wears the material its ground calls for: Blush
   Secondary over the Deep Forest hero, Primary once the bar is on
   the light material (DESIGN.md → Button System Principles). */
.sl-nav-cta { background: var(--color-brand-secondary); color: var(--color-brand-on-secondary); border-color: rgba(var(--color-brand-on-secondary-rgb), 0.10); }
.sl-nav.is-solid .sl-nav-cta, .sl-page.is-menu-open .sl-nav-cta {
  background: var(--color-brand-primary-strong); color: var(--color-brand-highlight); border-color: rgba(var(--color-brand-highlight-rgb), 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .sl-nav-cta:hover { color: var(--color-brand-on-secondary); }
  .sl-nav.is-solid .sl-nav-cta:hover { color: var(--color-brand-highlight); }
}
.sl-nav :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.sl-burger {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--sl-nav-hover);
  color: inherit; cursor: pointer;
  transition: transform 160ms var(--ease-deck-out);
}
.sl-burger:active { transform: scale(0.94); }
.sl-burger span {
  position: absolute; left: 12px; right: 12px; top: calc(50% - 0.75px); height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 260ms var(--ease-move);
}
.sl-burger span:first-child { transform: translateY(-3.5px); }
.sl-burger span:last-child { transform: translateY(3.5px); }
.sl-burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.sl-burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .sl-burger { display: inline-flex; }
  .sl-nav-actions .sl-nav-talk { display: none; }
  /* The links fold into a sheet that grows from the bar it belongs
     to (transform-origin top), and leaves faster than it arrives. */
  .sl-nav-links {
    position: absolute;
    top: calc(100% + var(--spacing-8));
    left: var(--sl-gutter); right: var(--sl-gutter);
    margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--spacing-8);
    border-radius: var(--radius-cards-compact);
    background: var(--color-snow);
    border: 1px solid var(--sl-hairline);
    color: var(--color-ink);
    transform-origin: top center;
    opacity: 0; transform: translateY(-8px) scale(0.98);
    visibility: hidden;
    transition: opacity 150ms ease, transform 150ms var(--ease-deck-out), visibility 0s linear 150ms;
  }
  .sl-page.is-menu-open .sl-nav-links {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity 220ms ease, transform 280ms var(--ease-deck-out), visibility 0s;
  }
  .sl-nav-links a, .sl-nav-link-btn {
    display: block; text-align: left;
    padding: var(--spacing-12) var(--spacing-16);
    border-radius: var(--radius-inputs);
    font-size: var(--text-body-lg);
    color: var(--color-ink);
  }
  .sl-nav-link-btn { display: block; width: 100%; }
}
@media (max-width: 480px) {
  .sl-brand-tag { display: none; }
  .sl-logo { width: 92px; }
}
@media (pointer: coarse) {
  .sl-burger { width: var(--touch-target); height: var(--touch-target); }
  .sl-burger span { left: 14px; right: 14px; }
  .sl-nav-cta { min-height: var(--touch-target); }
}

/* ============================================================
   HERO
   A Deep Forest band that stops short of the section's foot, so
   the product composition straddles it and reads as one object
   standing on the page below — two background layers rather than
   a negative margin, so nothing has to fight over paint order.
   ============================================================ */
.sl-hero {
  --sl-overlap: clamp(var(--spacing-96), 16vw, 220px);
  position: relative;
  padding-top: calc(var(--sl-nav-h) + clamp(var(--spacing-40), 5.4vw, var(--spacing-80)));
  padding-bottom: var(--spacing-48);
  background:
    radial-gradient(52% 44% at 50% 100%, rgba(var(--color-brand-primary-rgb), 0.95), transparent 72%) top / 100% calc(100% - var(--sl-overlap)) no-repeat,
    linear-gradient(var(--dark-surface), var(--dark-surface)) top / 100% calc(100% - var(--sl-overlap)) no-repeat,
    var(--color-mist);
  color: var(--dark-heading);
}
.sl-hero-copy {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--spacing-20);
  max-width: calc(var(--sl-copy) + 2 * var(--sl-gutter));
  text-align: center;
}
.sl-hero-copy .sl-display { color: var(--dark-heading); }
.sl-hero-copy .sl-lead { max-width: 600px; }
.sl-hero .sl-ctas { justify-content: center; margin-top: var(--spacing-8); }

.sl-hero-stage { margin-top: clamp(var(--spacing-40), 4.4vw, var(--spacing-64)); }
.sl-hero-comp {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  container-type: inline-size;
  padding-bottom: 3cqi;
}
.sl-hero-window { width: 78.5%; }
.sl-hero-window .pf-ui { --pf-base: 1180; }
.sl-hero-window .pf-screen { aspect-ratio: 1180 / 740; }
/* The phone stands lower than the window's top edge and a size
   smaller, so it reads as held in front of the admin rather than
   floating above it. */
.sl-hero-comp .sl-hero-phone { position: absolute; right: 0; top: 7%; width: 21%; }
.sl-hero-comp .sl-swatches { position: absolute; right: 18.5%; bottom: 0; width: 25.5%; font-size: calc(100cqi * 13 / 1000); }
/* The brand demo loops freely, so it has no control; its timer is
   this empty bar, which the cycle advances on (js/sales.js → cycle). */
.sl-cycle-timer { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.sl-cycle-timer > i { display: block; }

@media (max-width: 768px) {
  .sl-hero { padding-bottom: var(--spacing-48); --sl-overlap: 30%; }
  .sl-hero-copy { gap: var(--spacing-20); }
  .sl-hero .sl-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .sl-hero .sl-ctas .btn { width: 100%; }
  /* The admin stays on a phone — it is half of what is being sold.
     The window keeps its desktop drawing and simply runs off the
     right edge (the hero clips it, so the page never scrolls
     sideways), with the phone and the colour card laid over it: the
     same composition, cropped the way a photograph of a desk would
     be, rather than a desktop shrunk to illegibility. */
  .sl-hero { overflow-x: clip; }
  .sl-hero-comp { padding-bottom: 8cqi; }
  .sl-hero-window { width: 124%; }
  .sl-hero-window .pf-ui { --pf-base: 980; }
  .sl-hero-window .pf-screen { aspect-ratio: 980 / 700; }
  .sl-hero-comp .sl-hero-phone { top: 24%; right: -3%; width: 34%; }
  .sl-hero-comp .sl-swatches { right: auto; left: -2%; bottom: 0; width: 58%; font-size: calc(100cqi * 13 / 600); }
}

/* The colour card: Settings › Brand › Colours, floated. */
.sl-swatches {
  z-index: 2;
  padding: 1em 1.1em 0.6em;
  border-radius: 1.1em;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  box-shadow: 0 1.6em 3.6em -1em rgba(var(--color-brand-primary-strong-rgb), 0.34);
}
.sl-swatches-head {
  display: flex; align-items: center; gap: 0.5em;
  padding-bottom: 0.7em; margin-bottom: 0.2em;
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--font-weight-semibold);
}
.sl-swatches-head .icon { width: 1.15em; height: 1.15em; color: var(--c-fg-muted); }
.sl-swatches-head small { color: var(--c-fg-faint); font-size: 1em; }
.sl-swatches-head .pfc-badge { margin-left: auto; }
.sl-swatch { display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0; }
.sl-swatch + .sl-swatch { border-top: 1px solid var(--c-border); }
.sl-swatch i {
  flex: none; width: 1.7em; height: 1.7em; border-radius: 0.45em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: background-color 600ms var(--ease-move);
}
.sl-swatch[data-role="--color-brand-primary-strong"] i { background: var(--color-brand-primary-strong); }
.sl-swatch[data-role="--color-brand-secondary"] i { background: var(--color-brand-secondary); }
.sl-swatch[data-role="--color-brand-highlight"] i { background: var(--color-brand-highlight); }
.sl-swatch[data-role="--color-brand-action"] i { background: var(--color-brand-action); }
.sl-swatch span { flex: 1; min-width: 0; color: var(--c-fg); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-swatch code {
  font-family: var(--font-mono); font-size: 0.86em; color: var(--c-fg-muted);
  padding: 0.25em 0.5em; border-radius: 0.4em; border: 1px solid var(--c-border);
  transition: filter 200ms ease, opacity 200ms ease;
}
/* The hex swaps under a quick blur, so the change reads as one
   value becoming another rather than two strings trading places. */
.sl-swatch code.is-swapping { filter: blur(2px); opacity: 0.3; }

/* ============================================================
   PRODUCT FRAMES
   A browser window and a phone. The screen is the container a
   miniature measures itself against.
   ============================================================ */
.pf-window {
  position: relative;
  margin: 0;
  border-radius: var(--radius-2xl-2);
  background: var(--color-snow);
  border: 1px solid rgba(var(--color-brand-primary-strong-rgb), 0.12);
  box-shadow:
    0 2px 4px rgba(var(--color-brand-primary-strong-rgb), 0.04),
    0 24px 64px -24px rgba(var(--color-brand-primary-strong-rgb), 0.32);
  overflow: hidden;
}
.pf-chrome {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 36px; padding: 0 var(--spacing-12);
  background: var(--color-mist);
  border-bottom: 1px solid var(--color-fog);
}
.pf-lights { display: flex; gap: 6px; }
.pf-lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-pebble); }
.pf-url {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--spacing-12);
  border-radius: var(--radius-pill);
  background: var(--color-snow);
  border: 1px solid var(--color-fog);
  font-size: var(--text-body-xs); color: var(--color-steel);
  white-space: nowrap;
}
.pf-url .icon { width: 12px; height: 12px; }
.pf-screen { position: relative; container-type: inline-size; overflow: hidden; }
@media (max-width: 480px) {
  .pf-chrome { height: 28px; }
  .pf-lights i { width: 8px; height: 8px; }
  .pf-url { font-size: var(--text-caption); padding: 2px var(--spacing-8); }
}

/* The phone: an iPhone 15 Pro at its own proportions, drawn by a
   2px rim and nothing else. Every measure is Apple's, in points of
   a 393pt-wide screen, so the device scales like a photograph of
   one at any size it is drawn: the 393 × 852 screen, its 55pt
   display corners, and the Dynamic Island — 126 × 37.33pt, 11pt from
   the top edge. The frame is a container, so the screen's corner can
   be read off its width (cqi); the rim is a spread shadow on the
   screen, which follows the corner out by exactly its own width, so
   the outer radius is the display's plus 2px with nothing to keep in
   step. */
.pf-phone {
  --pf-rim: var(--color-pebble);
  --pf-lift: 0 36px 80px -32px rgba(var(--color-brand-primary-strong-rgb), 0.45);
  position: relative;
  margin: 0;
  container-type: inline-size;
}
.pf-phone-screen {
  position: relative;
  aspect-ratio: 393 / 852;
  border-radius: calc(100cqi * 55 / 393);
  overflow: hidden;
  container-type: inline-size;
  background: var(--color-mist);
  isolation: isolate;
  box-shadow: 0 0 0 2px var(--pf-rim), var(--pf-lift);
}
.pf-island {
  position: absolute; z-index: 5;
  top: calc(100cqi * 11 / 393);
  left: 50%;
  width: calc(100cqi * 126 / 393);
  height: calc(100cqi * 37.33 / 393);
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-obsidian);
  pointer-events: none;
}
.pf-phone--flat { --pf-lift: 0 12px 28px -16px rgba(var(--color-brand-primary-strong-rgb), 0.3); }

/* ============================================================
   AUTOPLAY CONTROL
   Every demo that moves on its own carries one: WCAG 2.2.2, and
   a reader who is reading a frame should be able to stop it. The
   bar inside it IS the timer — the cycle advances on the bar's
   animationend, so pausing the animation pauses the cycle.
   ============================================================ */
.sl-cycle-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-8) var(--spacing-8);
  border-radius: var(--radius-pill);
  border: 1px solid var(--sl-hairline);
  background: var(--color-snow);
  color: var(--color-slate);
  font: inherit; font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms var(--ease-deck-out), color var(--duration-micro) ease;
}
.sl-cycle-toggle:active { transform: scale(0.97); }
.sl-cycle-toggle:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sl-cycle-toggle:hover { color: var(--color-ink); } }
.sl-cycle-icon {
  position: relative; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-fog); color: var(--color-ink);
}
.sl-cycle-icon > i { grid-area: 1 / 1; transition: opacity 150ms ease, transform 200ms var(--ease-deck-out); }
.sl-cycle-icon .is-play { opacity: 0; transform: scale(0.6); }
.sl-cycle-toggle[data-paused="true"] .is-pause { opacity: 0; transform: scale(0.6); }
.sl-cycle-toggle[data-paused="true"] .is-play { opacity: 1; transform: none; }
.sl-cycle-progress { position: absolute; left: var(--spacing-16); right: var(--spacing-16); bottom: 0; height: 2px; }
.sl-cycle-progress i {
  display: block; height: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
}
.sl-cycle-progress { color: var(--color-brand-primary); }
/* The timer — one keyframe, duration from the cycle's data-sl-dwell. */
.is-running .is-ticking > i, .is-running.is-ticking > i { animation: sl-progress var(--sl-dwell, 5000ms) linear forwards; }
.is-paused .is-ticking > i, .is-paused.is-ticking > i { animation-play-state: paused; }
@keyframes sl-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sl-cycle-toggle[hidden] { display: none; }
@media (pointer: coarse) { .sl-cycle-toggle { min-height: var(--touch-target); } }

/* ============================================================
   2 · REVENUE — the go-live threshold and the two odds models
   The threshold card is the section's one dark surface, because it
   is the one idea a buyer of the platform has to leave with: a draw
   does not go ahead until it has reached its minimum. Its bar is the
   draw page's own bar, filled once, crossing the marker it is about.
   ============================================================ */
.sl-earn { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-8) var(--spacing-12); margin-top: var(--spacing-8); }
.sl-earn li {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pill);
  background: var(--color-parchment);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); color: var(--color-ink);
}
.sl-earn .icon { width: 16px; height: 16px; color: var(--color-brand-primary); }

.sl-rev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-20); }
.sl-tile.sl-rev-safe {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--spacing-40); align-items: center;
  padding: var(--spacing-40);
  background: var(--dark-surface); border-color: transparent;
}
.sl-rev-safe-copy { display: flex; flex-direction: column; gap: var(--spacing-12); }
.sl-rev-safe-copy h3 { color: var(--dark-heading); }
.sl-rev-safe-copy p { font-size: var(--text-body-md); line-height: 1.55; color: var(--dark-body); }
.sl-rev-safe-copy .sl-rev-fall { margin-top: var(--spacing-4); font-size: var(--text-body-sm); color: var(--dark-body-quiet); }
.sl-rev-fallbacks { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.sl-rev-fallbacks li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--spacing-12);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-dark); border: 1px solid var(--deck-glass-border);
  font-size: var(--text-body-sm); color: var(--dark-heading);
}
.sl-rev-fallbacks .icon { width: 15px; height: 15px; color: var(--dark-accent); }

/* The card answers to its own width (it is half a tile on a desktop
   and the whole of one on a phone), so its figures rearrange by
   container query rather than by the window. */
.sl-thr-card {
  container-type: inline-size;
  padding: 22px 24px 20px;
  border-radius: var(--radius-deck-stage);
  background: var(--c-card);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
  font-size: 14px;
}
.sl-thr-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); }
/* The prize is a kind of prize, not a product: an icon, not a photo. */
.sl-thr-prize {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--c-muted); color: var(--c-fg);
}
.sl-thr-prize .icon { width: 22px; height: 22px; }
/* The line under the prize wraps rather than cutting a number in half. */
.sl-thr-head .pfc-row-copy > small { white-space: normal; flex-wrap: wrap; }
.sl-thr-head .pfc-row-copy small { font-size: 12px; }
.sl-thr-status { display: inline-grid; flex: none; }
.sl-thr-status > span { grid-area: 1 / 1; justify-self: end; font-size: 12px; transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out); }
.sl-thr-status > span:last-child { opacity: 0; transform: scale(0.9); }
.sl-thr-card.is-reached .sl-thr-status > span:first-child { opacity: 0; transform: scale(0.9); }
.sl-thr-card.is-reached .sl-thr-status > span:last-child { opacity: 1; transform: none; }
.sl-thr-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 0 18px; }
.sl-thr-figs small { display: block; font-size: 12px; color: var(--c-fg-muted); }
.sl-thr-figs b { font-size: 22px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sl-thr-bar {
  --thr: 0.2;                          /* €110,000 of €550,000 */
  position: relative; height: 10px; border-radius: 999px;
  background: var(--c-muted-2);
  margin-top: 26px;
}
.sl-thr-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--c-warning);
  transform-origin: left center; transform: scaleX(var(--fill, 0.76));
  transition: background-color 300ms ease;
}
.sl-thr-card.is-reached .sl-thr-fill { background: var(--c-primary); }
.sl-thr-mark {
  position: absolute; top: -6px; bottom: -6px; left: calc(var(--thr) * 100%);
  width: 2px; margin-left: -1px; background: var(--c-fg);
}
.sl-thr-mark em {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--c-fg);
}
.sl-thr-note { display: grid; margin-top: 14px; font-size: 13px; color: var(--c-fg-muted); }
.sl-thr-note > span { grid-area: 1 / 1; transition: opacity var(--sl-fade) var(--ease-deck-out); }
.sl-thr-note > span:last-child { opacity: 0; color: var(--c-success); font-weight: 600; }
.sl-thr-card.is-reached .sl-thr-note > span:first-child { opacity: 0; }
.sl-thr-card.is-reached .sl-thr-note > span:last-child { opacity: 1; }
/* The draw's other figures, climbing with the bar. */
.sl-thr-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--c-border);
}
.sl-thr-stats > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; }
.sl-thr-stats > span > i {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--c-muted); color: var(--c-fg-muted);
}
.sl-thr-stats > span > i .icon { width: 16px; height: 16px; }
.sl-thr-stats small { font-size: 12px; color: var(--c-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-thr-stats b { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 480px) {
  .sl-thr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
}
/* Seven-figure sums do not fit three across a narrow card, so there
   each one takes a line, label to the left and figure to the right. */
@container (max-width: 460px) {
  .sl-thr-figs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sl-thr-figs > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .sl-thr-figs b { font-size: 18px; }
}

.sl-tile.sl-rev-type { padding: var(--spacing-28); gap: var(--spacing-16); }
.sl-rev-type-head { display: flex; align-items: center; gap: var(--spacing-12); }
.sl-rev-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--radius-xl);
  background: var(--color-brand-primary-strong); color: var(--color-brand-highlight);
}
.sl-rev-type h3 { color: var(--color-obsidian); }
.sl-rev-model { font-size: var(--text-body-xs); color: var(--color-steel); }
.sl-rev-type > p { font-size: var(--text-body-md); line-height: 1.55; color: var(--color-slate); }
.sl-rev-type .sl-rev-best { margin-top: auto; font-size: var(--text-body-sm); color: var(--color-steel); }

.sl-tv {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius-xl);
  background: var(--c-card); border: 1px solid var(--c-border);
  font-size: 14px;
}
.sl-tv-row { display: flex; justify-content: space-between; gap: 12px; color: var(--c-fg-muted); font-size: 13px; }
.sl-tv-row b { color: var(--c-fg); font-variant-numeric: tabular-nums; }
.sl-tv-odds { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--c-border); }
.sl-tv-odds small { display: block; font-size: 12px; color: var(--c-fg-muted); }
.sl-tv-odds b { font-size: 20px; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sl-tv-odds > span:last-child { text-align: right; }
.sl-tv-odds .icon { color: var(--c-fg-faint); }
.sl-tv-count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.sl-tv-count b { font-size: 28px; font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sl-tv-count > span { color: var(--c-fg-muted); font-size: 13px; }
.sl-tv-count .pfc-badge { margin-left: auto; font-size: 12px; }
.sl-tv-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.sl-tv-bars span { flex: 1; height: calc(var(--fill, 1) * 100%); border-radius: 4px 4px 2px 2px; background: var(--c-muted-2); transform-origin: bottom center; transition: transform 800ms var(--ease-deck-out); }
.sl-tv-bars span:last-child { background: var(--c-primary); }
.sl-tv-bars span:nth-child(n+6) { transition-delay: 120ms; }
.sl-tv-bars span:nth-child(n+9) { transition-delay: 240ms; }
.sl-js .sl-tile:not(.is-played) .sl-tv-bars span { transform: scaleY(0); }

@media (max-width: 900px) {
  .sl-tile.sl-rev-safe { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-28); }
}
@media (max-width: 768px) {
  .sl-rev-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); }
  .sl-tile.sl-rev-safe { padding: var(--spacing-28) var(--spacing-20); }
  .sl-tile.sl-rev-type { padding: var(--spacing-24); }
  .sl-thr-card { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-tv-bars span { transition: none; }
}

/* ============================================================
   2 · SETUP → LAUNCH
   ============================================================ */
.sl-setup { padding-top: var(--spacing-80); }
.sl-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--spacing-40);
  align-items: start;
}
.sl-steps { display: flex; flex-direction: column; gap: var(--spacing-24); position: sticky; top: calc(var(--dev-bar-h) + var(--sl-nav-h) + var(--spacing-24)); }
/* The steps are cards, and the one on screen is the activated one:
   it takes the soft Parchment tint — faded in on a layer of its own,
   so the card changes colour without the page animating a
   background — its edge warms to Parchment, and its number fills.
   The timer is a ring drawn round the number (below), not a line
   along the card. Anatomy as the feature cards: a numbered chip, a
   title, one line of what the step does. */
.sl-steps-list { display: flex; flex-direction: column; gap: var(--spacing-12); }
.sl-step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-12);
  padding: var(--spacing-20) var(--spacing-24) var(--spacing-24);
  border-radius: var(--radius-cards-compact);
  border: 1px solid var(--sl-hairline);
  background: var(--color-snow);
  text-align: left; cursor: pointer;
  font: inherit; color: var(--color-slate);
  transition: color var(--duration-micro) ease, border-color var(--duration-micro) ease, transform 160ms var(--ease-deck-out);
}
.sl-step::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--sl-parchment-soft);
  opacity: 0;
  transition: opacity 300ms var(--ease-deck-out);
}
/* A card is wide, so it presses less far than a button does. */
.sl-step:active { transform: scale(0.98); }
.sl-step:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; }
.sl-step-num {
  position: relative;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: 5px;   /* room for the ring */
  border-radius: 50%;
  border: 1px solid var(--sl-hairline);
  background: var(--color-mist);
  color: var(--color-steel);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-micro) ease, color var(--duration-micro) ease, border-color var(--duration-micro) ease;
}
.sl-step-copy { display: flex; flex-direction: column; gap: var(--spacing-8); }
.sl-step-copy b { color: inherit; }
.sl-step-copy > span { font-size: var(--text-body-md); line-height: 1.5; color: var(--color-steel); }
.sl-step[aria-selected="true"] { color: var(--color-obsidian); border-color: var(--color-parchment); }
.sl-step[aria-selected="true"]::before { opacity: 1; }
.sl-step[aria-selected="true"] .sl-step-copy > span { color: var(--color-slate); }
.sl-step[aria-selected="true"] .sl-step-num { background: var(--color-brand-primary-strong); border-color: var(--color-brand-primary-strong); color: var(--color-brand-highlight); }
@media (hover: hover) and (pointer: fine) {
  .sl-step:not([aria-selected="true"]):hover { color: var(--color-ink); border-color: rgba(var(--color-brand-primary-rgb), 0.2); }
}

/* The ring: the step's timer, drawn round the number's own circle a
   hair outside it. Transform and clip-path only — two half-rings,
   each seen through a half-window and turned into it: the right half
   fills over the first half of the dwell, the left over the second.
   The left half's animation is the one the cycle listens for
   (sl-ring), so the step advances exactly as the circle closes. It
   shows only while the walkthrough is running; paused, it holds
   where it stopped. */
.sl-step-ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.sl-step-ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--color-brand-primary-rgb), 0.12);
}
.sl-ring-a, .sl-ring-b { position: absolute; inset: 0; }
.sl-ring-a { clip-path: inset(0 0 0 50%); }
.sl-ring-b { clip-path: inset(0 50% 0 0); }
.sl-ring-a > i, .sl-ring-b > i {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-brand-primary-strong);
}
.sl-ring-a > i { clip-path: inset(0 50% 0 0); }
.sl-ring-b > i { clip-path: inset(0 0 0 50%); }
.is-running .sl-step[aria-selected="true"] .sl-step-ring { opacity: 1; }
.is-running .sl-step-ring.is-ticking .sl-ring-a > i { animation: sl-ring-a var(--sl-dwell, 5000ms) linear forwards; }
.is-running .sl-step-ring.is-ticking .sl-ring-b > i { animation: sl-ring var(--sl-dwell, 5000ms) linear forwards; }
.is-paused .sl-step-ring.is-ticking i { animation-play-state: paused; }
@keyframes sl-ring-a { 0% { transform: rotate(0deg); } 50%, 100% { transform: rotate(180deg); } }
@keyframes sl-ring { 0%, 50% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }

.sl-setup-window .pf-ui { --pf-base: 1100; }
/* A little taller than the console's usual 1100 × 650, so the window
   stands about as tall as the column of step cards beside it. */
.sl-setup-window .pf-screen { aspect-ratio: 1100 / 720; }
.sl-setup-window .pfc-shell { height: 100%; }
/* The sidebar follows the state being shown. */
.pfc-shell[data-sl-state="0"] [data-sl-nav="0"],
.pfc-shell[data-sl-state="1"] [data-sl-nav="1"],
.pfc-shell[data-sl-state="2"] [data-sl-nav="2"] { background: var(--c-muted-2); color: var(--c-fg); font-weight: var(--font-weight-semibold); }
.pfc-crumb [data-sl-crumb] { display: none; }
.pfc-shell[data-sl-state="0"] [data-sl-crumb="0"],
.pfc-shell[data-sl-state="1"] [data-sl-crumb="1"],
.pfc-shell[data-sl-state="2"] [data-sl-crumb="2"] { display: inline; }

/* The three states share one cell. The outgoing one leaves fast;
   the incoming one arrives slower, rising out of a light blur so
   the change reads as one screen becoming the next. Both are
   transitions, so a click mid-change simply retargets. */
.sl-states { display: grid; flex: 1; min-height: 0; overflow: hidden; }
.sl-state { grid-area: 1 / 1; min-width: 0; }
.sl-state[hidden] { display: flex; visibility: hidden; }
.sl-state {
  transition: opacity 360ms var(--ease-deck-out), transform 420ms var(--ease-deck-out), filter 360ms var(--ease-deck-out), visibility 0s;
}
.sl-state[hidden] {
  opacity: 0; transform: translateY(10px); filter: blur(6px);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease, visibility 0s linear 180ms;
}
.sl-state { display: flex; flex-direction: column; }
.sl-state > div[aria-hidden] { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.sl-state:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -4px; }

@media (max-width: 1024px) {
  .sl-setup-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-32); }
  .sl-steps { position: static; }
  .sl-steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Full width under the cards, the window no longer has a column of
     steps to stand as tall as, so it takes its screen's own shape. */
  .sl-setup-window .pf-screen { aspect-ratio: 1100 / 650; }
}
@media (max-width: 768px) {
  .sl-steps-list { grid-template-columns: minmax(0, 1fr); }
  .sl-step { padding: var(--spacing-16) var(--spacing-20) var(--spacing-20); }
  .sl-step-copy > span { font-size: var(--text-body); }
  /* One panel, no sidebar, drawn larger: the phone reader sees the
     screen a hand would be working in, not a desktop at 30%. */
  .sl-setup-window .pf-ui { --pf-base: 600; }
  .sl-setup-window .pf-screen { aspect-ratio: 600 / 640; }
  .sl-setup-window .pfc-shell { grid-template-columns: minmax(0, 1fr); }
  .sl-setup-window .pfc-side { display: none; }
}

/* ============================================================
   3 · STOREFRONT — feature cards and the gallery
   ============================================================ */
/* Six cards across the full measure: three by two on a desktop, two
   by three below the small-tablet step. A card, not a bare list,
   because each one is a thing that comes in the box. */
.sl-features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-64);
}
.sl-features li {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-8);
  padding: var(--spacing-28);
  border-radius: var(--radius-cards-compact);
}
.sl-feature-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: var(--spacing-8);
  border-radius: var(--radius-xl);
  background: var(--color-snow);
  border: 1px solid var(--sl-hairline);
  color: var(--color-brand-primary);
}
.sl-features b { color: var(--color-obsidian); }
.sl-features li > span:last-child { font-size: var(--text-body-md); line-height: 1.5; color: var(--color-slate); }
@media (max-width: 900px) {
  .sl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .sl-features { gap: var(--spacing-12); margin-bottom: var(--spacing-40); }
  .sl-features li { padding: var(--spacing-20); }
  .sl-feature-icon { width: 36px; height: 36px; margin-bottom: var(--spacing-4); }
}
/* On a phone a card needs the whole width for its title and line. */
@media (max-width: 480px) {
  .sl-features { grid-template-columns: minmax(0, 1fr); }
}

/* The gallery: storefronts for different brands, in different
   layouts and on different screens, carried past on two rows that
   run against each other. Each row is its set twice over, moved by
   exactly half its own width, so the loop has no seam at any
   viewport width; a row's items are padded rather than gapped so
   "half" is exact. Constant motion, so linear, and slow — the page's
   own marquee band. It keeps moving under a pointer; it stops on
   focus, off screen, with the pause control, and under reduced motion,
   where the rows become ordinary sideways scrollers instead. */
.sl-mq {
  --mq-dw: 750px;           /* a desktop frame */
  /* A phone stands exactly as tall as a desktop frame beside it —
     the window's screen plus its 36px chrome and 1px edges, less the
     phone's own 2px rim above and below — so the width is worked
     out from the desktop's rather than kept in step with it. */
  --mq-frame: 34px;
  --mq-pw: calc((var(--mq-dw) * 760 / 1280 + var(--mq-frame)) * 393 / 852);
  --mq-gap: var(--spacing-32);
  display: flex; flex-direction: column; gap: var(--mq-gap);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding-block: var(--spacing-8) var(--spacing-24);
}
.sl-mq-row { overflow: hidden; }
.sl-mq-track {
  display: flex; align-items: center; width: max-content;
  animation: sl-marquee var(--mq-dur, 105s) linear infinite;
  will-change: transform;
}
.sl-mq-row--rev .sl-mq-track { --mq-dur: 126s; animation-direction: reverse; }
@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sl-mq.is-paused .sl-mq-track, .sl-mq.is-idle .sl-mq-track, .sl-mq:focus-within .sl-mq-track { animation-play-state: paused; }
.sl-mq-item { flex: none; padding-right: var(--mq-gap); }
.sl-mq-window { width: var(--mq-dw); box-shadow: 0 2px 4px rgba(var(--color-brand-primary-strong-rgb), 0.04), 0 18px 40px -22px rgba(var(--color-brand-primary-strong-rgb), 0.35); }
.sl-mq-window .pf-screen { aspect-ratio: 1280 / 760; }
.sl-mq-phone { width: var(--mq-pw); --pf-lift: 0 18px 40px -22px rgba(var(--color-brand-primary-strong-rgb), 0.4); }

.sl-mq-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--spacing-12) var(--spacing-20); margin-top: var(--spacing-8); }
.sl-mq-note { font-size: var(--text-body-sm); color: var(--color-steel); text-align: center; }

@media (max-width: 768px) {
  /* A desktop frame never grows wider than most of the screen it is
     passing across, so on a phone the row is only as tall as that. */
  .sl-mq { --mq-dw: min(480px, 86vw); --mq-gap: var(--spacing-16); }
}
@media (max-width: 480px) {
  .sl-mq { --mq-frame: 26px; }  /* the chrome is 28px here */
}
@media (prefers-reduced-motion: reduce) {
  .sl-mq { -webkit-mask: none; mask: none; }
  .sl-mq-row { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--sl-gutter); }
  .sl-mq-row::-webkit-scrollbar { display: none; }
  .sl-mq-track { animation: none; }
  .sl-mq-item { scroll-snap-align: start; }
  .sl-mq-item[data-dup] { display: none; }
  [data-sl-mq-toggle] { display: none; }
}

/* ============================================================
   4 · ADMIN BENTO
   ============================================================ */
/* The admin stands on Parchment: a light ground, because this is
   the section whose subject is the admin's own light screens, and a
   warm one, so it reads as its own band between the Snow sections
   either side. The tiles are light glass over the mint and accent
   pools, and the console crops sit on them as they sit in the app. */
.sl-admin { background: var(--color-parchment); }
.sl-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spacing-20);
}
.sl-tile {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-cards);
  background: var(--color-snow);
  border: 1px solid var(--sl-hairline);
  overflow: hidden;
  isolation: isolate;
}
.sl-tile--dash { grid-column: span 7; }
.sl-tile--draws { grid-column: span 5; }
.sl-tile--entries, .sl-tile--content, .sl-tile--media { grid-column: span 4; }
.sl-tile--hosts, .sl-tile--users { grid-column: span 6; }
.sl-tile--notify { grid-column: span 5; }
.sl-tile--settings { grid-column: span 7; }


.sl-tile-copy { padding: var(--spacing-28) var(--spacing-28) 0; display: flex; flex-direction: column; gap: var(--spacing-8); }
.sl-tile-copy > i { align-self: flex-start; color: var(--color-brand-primary); margin-bottom: var(--spacing-8); }
.sl-tile-copy h3 { color: var(--color-obsidian); }
.sl-tile-copy p { font-size: var(--text-body-md); line-height: 1.5; color: var(--color-steel); max-width: 44ch; }
.sl-tile-copy .sl-tile-note { font-size: var(--text-body-sm); color: var(--color-steel); display: inline-flex; align-items: center; gap: var(--spacing-8); }
.sl-tile-copy .sl-tile-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-primary); flex: none; }
/* On the dark band (growth): the dark set's inks, Blush icons
   (DESIGN.md → Glass Card, dark surface). */
.sl-growth-grid .sl-tile-copy h3 { color: var(--dark-heading); }
.sl-growth-grid .sl-tile-copy p { color: var(--dark-body); }
.sl-growth-grid .sl-tile-copy > i { color: var(--dark-accent); }

/* The crop: a slice of the console bleeding off the tile's foot
   (and, for the dashboard, its right edge) — a screenshot framed
   by the card rather than a picture pasted on it. */
.sl-crop {
  position: relative;
  flex: 1;
  min-height: 240px;
  margin: var(--spacing-24) var(--spacing-28) 0;
  container-type: inline-size;
  overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, #000 72%, transparent);
  mask: linear-gradient(to bottom, #000 72%, transparent);
}
.sl-crop--br { margin-right: 0; }
.sl-crop > .pf-ui { position: absolute; top: 0; left: 0; right: 0; }
.sl-crop--br > .pf-ui { right: -18%; }
.sl-tile--dash .sl-crop { min-height: 330px; }
.sl-tile--dash .pf-ui { --pf-base: 700; }
.sl-tile--draws .pf-ui { --pf-base: 480; }
.sl-tile--entries .pf-ui, .sl-tile--content .pf-ui, .sl-tile--media .pf-ui { --pf-base: 400; }
.sl-tile--hosts .pf-ui, .sl-tile--users .pf-ui { --pf-base: 560; }
.sl-tile--notify .pf-ui { --pf-base: 480; }
.sl-tile--settings .pf-ui { --pf-base: 700; }

@media (hover: hover) and (pointer: fine) {
  .sl-crop > .pf-ui { transition: transform 360ms var(--ease-deck-out); }
  .sl-tile:hover .sl-crop > .pf-ui { transform: translateY(-6px); }
}

@media (max-width: 1024px) {
  .sl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-bento > .sl-tile { grid-column: span 1; }
  .sl-bento > .sl-tile--dash { grid-column: span 2; }
  .sl-tile:not(.sl-tile--dash) .pf-ui { --pf-base: 440; }
}
@media (max-width: 768px) {
  .sl-bento { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); }
  .sl-bento > .sl-tile { grid-column: auto; }
  .sl-bento > .sl-tile--dash, .sl-bento > .sl-tile--settings { grid-column: auto; }
  .sl-tile-copy { padding: var(--spacing-24) var(--spacing-24) 0; }
  .sl-crop { margin: var(--spacing-20) var(--spacing-24) 0; min-height: 220px; }
  .sl-crop--br { margin-right: 0; }
  .sl-bento .sl-tile .pf-ui { --pf-base: 400; }
  .sl-tile--dash .sl-crop { min-height: 280px; }
}

/* ── Tile specifics ──────────────────────────────────────────── */
.pfc-surface { display: flex; flex-direction: column; gap: 0.85em; color: var(--c-fg); }
/* Console cards standing on dark glass carry a little more of their
   own shadow, so their edges hold against the ground. */
.sl-growth-grid .pfc-surface { --c-shadow: 0 0.3em 1.2em rgba(0, 0, 0, 0.22); }
/* The draws list carries its tabs inside its card, so the strip reads
   as the console's own rather than as loose type on the glass. */
.pfc-tabs--card { padding: 0 1.25em; }
.pfc-tabs--card + .pfc-row { border-top: 0; }

.sl-entries .pfc-card { padding-bottom: 0.4em; }
.sl-ladder { display: flex; flex-direction: column; }
.sl-ladder > span {
  position: relative;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.6em;
  padding: 0.6em 1.1em;
  border-top: 1px solid var(--c-border);
}
.sl-ladder > span:first-child { border-top: 0; }
.sl-ladder small { justify-self: end; color: var(--c-fg-muted); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.sl-ladder b { font-weight: var(--font-weight-semibold); }
.sl-tag {
  position: absolute; right: 1.1em; top: -0.8em;
  padding: 0.1em 0.5em; border-radius: 0.4em;
  background: var(--color-brand-action); color: var(--color-snow);
  font-size: 0.72em; font-weight: var(--font-weight-semibold); font-style: normal;
}
.sl-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; padding: 0.4em 1.1em 0.6em; }
.sl-decks > span {
  display: flex; align-items: center; gap: 0.15em; flex-wrap: wrap;
  padding: 0.55em 0.7em; border-radius: 0.6em;
  background: var(--c-sunken); border: 1px solid var(--c-border);
}
.sl-decks .icon { width: 0.95em; height: 0.95em; color: var(--c-fg-muted); }
.sl-decks b { width: 100%; font-size: 0.86em; font-weight: var(--font-weight-semibold); margin-top: 0.25em; }
.sl-entry-chips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.sl-entry-chips span {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.7em; border-radius: 999px;
  background: var(--c-card); border: 1px solid var(--c-border);
  font-size: 0.82em; font-weight: var(--font-weight-medium);
}
.sl-entry-chips .icon { width: 1em; height: 1em; }

.sl-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
.sl-sheet > span {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.7em;
  background: var(--c-sunken);
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.sl-sheet img { width: 100%; height: 100%; object-fit: cover; }
.sl-sheet em {
  position: absolute; left: 0.45em; top: 0.45em;
  padding: 0.05em 0.4em; border-radius: 0.35em;
  background: rgba(255, 255, 255, 0.9); color: var(--c-fg);
  font-size: 0.68em; font-weight: 700; font-style: normal; letter-spacing: 0.02em;
}
.sl-sheet .is-picked { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.sl-sheet .icon { position: absolute; right: 0.5em; bottom: 0.5em; width: 1.4em; height: 1.4em; color: var(--color-snow); }
.sl-used {
  position: absolute; left: 0.45em; bottom: 0.45em;
  padding: 0.1em 0.45em; border-radius: 0.35em;
  background: var(--c-primary); color: var(--c-primary-fg);
  font-size: 0.68em; font-weight: 600; font-style: normal;
}

.sl-chain { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.4em; }
.sl-chain-step { padding: 0.8em 0.85em; display: flex; flex-direction: column; gap: 0.2em; }
.sl-chain-step small { color: var(--c-fg-muted); font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-chain-step b { font-size: 1.6em; font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sl-chain-step > span { font-size: 0.78em; color: var(--c-fg-muted); }
.sl-chain-step .pfc-badge { align-self: flex-start; }
/* The link of the chain that answers is ringed in the console's own
   primary — this is a console screen, so only the console's colours. */
.sl-chain-step.is-override { box-shadow: 0 0 0 1.5px var(--c-primary); }
.sl-chain-link { color: var(--c-fg-faint); }
.sl-chain-link .icon { width: 1.2em; height: 1.2em; }

.sl-limit { padding: 1em 1.2em 1.1em; }
.sl-limit .pfc-card-head { padding: 0 0 0.6em; border: 0; }
.sl-limit .pfc-card-head .icon { width: 1.3em; height: 1.3em; color: var(--c-fg-muted); }
.sl-limit-figure { color: var(--c-fg-muted); margin-bottom: 0.7em; }
.sl-limit-figure b { font-size: 1.9em; font-weight: 680; letter-spacing: -0.03em; color: var(--c-fg); margin-right: 0.2em; }
.sl-limit .pfc-meter-meta { margin-top: 0.5em; }

.sl-mail { padding: 1.2em 1.3em 1.3em; display: flex; flex-direction: column; gap: 0.8em; }
.sl-mail-from { display: flex; align-items: center; gap: 0.7em; padding-bottom: 0.8em; border-bottom: 1px solid var(--c-border); }
.sl-mail-from b { display: block; font-weight: 600; }
.sl-mail-from small { color: var(--c-fg-muted); font-size: 0.82em; }
.sl-mail-channels { margin-left: auto; display: flex; gap: 0.35em; }
.sl-mail-subject { font-size: 1.2em; font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; }
.sl-mail-body { color: var(--c-fg-muted); line-height: 1.55; }
.sl-mail .pfc-btn { align-self: flex-start; }
/* A variable resolves: the template line stands, then gives way to
   the line a real draw supplies — the editor's preview, in one beat.
   Whole lines cross, so neither leaves the other's width behind. */
.sl-mail-subject { display: grid; }
.sl-subj { grid-area: 1 / 1; transition: opacity 360ms ease, filter 360ms ease, transform 460ms var(--ease-deck-out); }
.sl-subj--val { opacity: 0; filter: blur(3px); transform: translateY(0.25em); }
.sl-var {
  padding: 0 0.3em; border-radius: 0.35em;
  background: var(--c-info-bg); color: var(--c-info);
  font-family: var(--font-mono); font-size: 0.8em; font-weight: 500;
}
.sl-tile.is-played .sl-subj--raw { opacity: 0; filter: blur(3px); transform: translateY(-0.25em); transition-delay: 900ms; }
.sl-tile.is-played .sl-subj--val { opacity: 1; filter: none; transform: none; transition-delay: 960ms; }

.sl-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7em; align-items: start; }
.sl-settings .pfc-card-head { padding: 0.8em 1em; }
@container (max-width: 520px) {
  .sl-settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sl-settings > :last-child { display: none; }
}

/* Once-only plays, keyed off the tile reaching the screen. */
.sl-js .sl-tile:not(.is-played) .pfc-meter > i,
.sl-js .sl-hero-comp:not(.is-played) .pfc-meter > i { transform: scaleX(0); }
.sl-js .sl-tile:not(.is-played) .pfc-bars i,
.sl-js .sl-hero-comp:not(.is-played) .pfc-bars i { transform: scaleY(0); }
.pfc-meter > i { transition: transform 1100ms var(--ease-deck-out) 250ms; }
.pfc-bars i { transition: transform 900ms var(--ease-deck-out); }
.pfc-bars span:nth-child(2) i { transition-delay: 60ms; }
.pfc-bars span:nth-child(3) i { transition-delay: 120ms; }
.pfc-bars span:nth-child(4) i { transition-delay: 180ms; }
.pfc-bars span:nth-child(5) i { transition-delay: 240ms; }
.pfc-bars span:nth-child(6) i { transition-delay: 300ms; }
.sl-flip .pfc-switch { transition-delay: 900ms; }
.sl-flip .pfc-switch::after { transition-delay: 900ms; }
.sl-tile.is-played .sl-flip .pfc-switch { background: var(--c-primary); }
.sl-tile.is-played .sl-flip .pfc-switch::after { transform: translateX(1em); }
.sl-approve-row .sl-swap > span { transition-delay: 1100ms; }
/* Two badges share one cell; each keeps its own width, right-aligned,
   rather than the shorter stretching to the longer's. */
.sl-swap--badge > span { justify-self: end; }
.sl-tile.is-played .sl-approve-row .sl-swap > span:first-child { opacity: 0; transform: translateY(-0.4em); filter: blur(2px); }
.sl-tile.is-played .sl-approve-row .sl-swap > span:last-child { opacity: 1; transform: none; filter: none; }

/* ============================================================
   5 · GROWTH — gamification & marketing
   The same tile language as the admin bento, arranged around the
   one thing on this page that is an object rather than a screen:
   the golden ticket, played exactly as a buyer sees it (the real
   GOLDEN TICKET REVEAL block from components.css, re-inserted to
   replay, so its rise, halo and sheen are the product's own).
   ============================================================ */
.sl-growth-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spacing-20); }
/* The golden ticket across the top, then two pairs: the freeroll
   beside "And more", and the card decks beside the creator codes. One
   order at every width; only the columns change. */
.sl-tile--gold { grid-column: 1 / -1; }
.sl-tile--free, .sl-tile--more { grid-column: span 6; }
.sl-tile--deck { grid-column: span 5; }
.sl-tile--codes { grid-column: span 7; }

/* The card decks tile carries the product's own deck tile
   (js/deck.js → createDeckTile) — the fan, the tilt toward the
   pointer and the foil as the Plus layout draws them — under its
   copy, centred in the room the row gives it. It is a showpiece and
   nothing is bought here, so there is no buy row and no View deck. */
.sl-deck-slot { flex: 1; display: grid; place-items: center; padding: var(--spacing-24) var(--spacing-28) var(--spacing-28); }
.sl-deck-slot .deck-instance { width: min(100%, 272px); }
.sl-deck-slot .premium-deck-card { width: 100%; }
.sl-deck-slot .view-deck-button { display: none; }

/* The creator codes table is a fluid table rather than a screenshot,
   so its type is held to a readable size (never above 15px) and the
   table takes whatever width it is given; the code column steps out
   when the table's own box is too narrow for it. The table closes the
   tile, level with the deck beside it. */
.sl-growth-grid > .sl-tile--codes .pf-ui { font-size: min(calc(100cqi * 14 / 380), 15px); }
.sl-growth-grid > .sl-tile--codes .sl-crop { margin-top: auto; padding-top: var(--spacing-24); }
@container (max-width: 340px) {
  .sl-codes > .sl-codes-head, .sl-codes > .sl-code { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .sl-codes-head span:nth-child(2), .sl-code > em { display: none; }
}

/* Confetti — the golden ticket's moment, over the whole section. It
   rains across the full width of whatever part of the section is on
   screen, with a small burst out of the ticket itself as it lands
   (js/sales.js → confetti sets each piece's path). Every piece is two
   layers, so no motion is ever cut into segments: the piece itself
   falls at a steady speed and turns, and its ::before sways and
   flutters on its own loop. Transform and opacity only; each piece
   removes itself when it lands. */
.sl-growth { position: relative; }
.sl-confetti { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.sl-confetti i {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  animation: sl-confetti-fall var(--dur) linear var(--delay) forwards;
}
.sl-confetti i::before {
  content: ""; display: block;
  width: var(--w); height: var(--h);
  border-radius: 2px;
  background: var(--c);
  animation: sl-confetti-sway var(--sway-dur) ease-in-out var(--delay) infinite alternate;
}
.sl-confetti i.is-burst { animation-name: sl-confetti-burst; }
@keyframes sl-confetti-fall {
  0%   { transform: translate(var(--x0), var(--y0)) rotate(0deg); opacity: 0; }
  4%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--fall))) rotate(var(--spin)); opacity: 0; }
}
@keyframes sl-confetti-sway {
  from { transform: translateX(calc(-1 * var(--sway))) rotateY(0deg); }
  to   { transform: translateX(var(--sway)) rotateY(var(--flip)); }
}
@keyframes sl-confetti-burst {
  0% {
    transform: translate(var(--x0), var(--y0)) rotate(0deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1);
  }
  5% { opacity: 1; }
  28% {
    transform: translate(calc(var(--x0) + var(--dx) * 0.5), calc(var(--y0) - var(--rise))) rotate(calc(var(--spin) * 0.35));
    animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.55);
  }
  86% { opacity: 1; }
  100% {
    transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) + var(--fall))) rotate(var(--spin));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) { .sl-confetti { display: none; } }

/* The section is a dark band: the moment a buyer plays is the one
   the page stages, so the tiles are dark glass over the dark set's
   own pools, the golden ticket's stage is at home on it, and the
   screens and the claim card inside the tiles are lit against it. */
.sl-growth { background: var(--dark-surface); color: var(--dark-heading); }
/* Two dark bands in a row still read as two sections. */
.sl-growth + .sl-brands { border-top: 1px solid var(--dark-line); }

.sl-gold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--spacing-8); height: 100%; padding-bottom: var(--spacing-28); }
.sl-gtag {
  align-self: flex-start;
  margin-bottom: var(--spacing-8);
  padding: 4px var(--spacing-12);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-dark);
  border: 1px solid var(--deck-glass-border);
  font-size: var(--text-body-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dark-heading);
}
.sl-gold-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-12); margin-top: var(--spacing-12); padding-top: var(--spacing-16); border-top: 1px solid var(--dark-line); }
.sl-gold-facts dt { font-size: var(--text-body-xs); color: var(--dark-body-quiet); }
.sl-gold-facts dd { margin-top: 2px; font-family: var(--font-display); font-size: var(--text-subheading); font-weight: var(--font-weight-medium); letter-spacing: var(--ls-subheading); color: var(--dark-heading); font-variant-numeric: tabular-nums; }
.sl-replay {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  margin-top: var(--spacing-16);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pill);
  border: 1px solid var(--deck-glass-border);
  background: var(--glass-fill-dark);
  color: var(--dark-heading);
  font: inherit; font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: transform 160ms var(--ease-deck-out), background var(--duration-micro) ease;
}
.sl-replay:active { transform: scale(0.97); }
.sl-replay:focus-visible { outline: 2px solid var(--dark-heading); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sl-replay:hover { background: rgba(255, 255, 255, 0.12); } }
/* The icon turns once per press, whole, rather than twitching while
   the finger is down (js/sales.js adds .is-spun on click). */
.sl-replay.is-spun .icon { animation: sl-spin 560ms var(--ease-deck-out); }
@keyframes sl-spin { to { transform: rotate(-360deg); } }
.sl-gold-slot { justify-self: center; width: 100%; max-width: 340px; margin: var(--spacing-28) var(--spacing-28) 0 0; }
.sl-gold-slot .golden-stage { width: 100%; }

/* The freeroll claim: the storefront's own promo-code moment, typed
   out once — code in, Claim pressed, the free ticket confirmed. */
.sl-claim { padding: var(--spacing-24) var(--spacing-28) var(--spacing-28); margin-top: auto; }
.sl-claim-card {
  display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: var(--spacing-16); align-items: center;
  padding: var(--spacing-16);
  border-radius: var(--radius-deck-stage);
  background: var(--color-snow);
  border: 1px solid var(--sl-hairline);
}
.sl-claim-art { width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius-xl); object-fit: cover; }
.sl-claim-body { display: flex; flex-direction: column; gap: var(--spacing-4); min-width: 0; }
.sl-claim-body > b { font-family: var(--font-display); font-size: var(--text-subheading); font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-subheading); color: var(--color-obsidian); }
.sl-claim-body > small { font-size: var(--text-body-xs); color: var(--color-steel); }
/* The code field keeps room for the code it holds: where the card is
   too narrow for the field and the button side by side, the button
   drops under it rather than the code running beneath the button. */
.sl-claim-field { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-8); }
.sl-claim-input {
  position: relative; flex: 1 1 9em; min-width: 0; overflow: hidden; white-space: nowrap;
  display: flex; align-items: center;
  height: 40px; padding: 0 var(--spacing-12);
  border-radius: var(--radius-inputs);
  border: 1px solid var(--color-pebble);
  background: var(--color-snow);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em;
  color: var(--color-ink);
  transition: border-color var(--duration-micro) ease;
}
.sl-claim-ph { position: absolute; left: var(--spacing-12); color: var(--color-ash); font-weight: var(--font-weight-regular); letter-spacing: 0; }
.sl-claim.is-typing .sl-claim-ph, .sl-claim.is-claimed .sl-claim-ph { opacity: 0; }
.sl-claim.is-typing .sl-claim-input { border-color: var(--color-brand-primary); }
.sl-caret { display: none; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--color-brand-primary); }
.sl-claim.is-typing .sl-caret { display: inline-block; animation: sl-caret 1s steps(1) infinite; }
@keyframes sl-caret { 50% { opacity: 0; } }
.sl-claim-btn {
  flex: none;
  display: inline-flex; align-items: center; height: 40px; padding: 0 var(--spacing-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand-primary-strong); color: var(--color-brand-highlight);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
}
.sl-claim.is-pressed .sl-claim-btn { animation: sl-press 320ms var(--ease-deck-out); }
.sl-claim-done {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--spacing-4);
  font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
  color: var(--success);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out);
}
.sl-claim.is-claimed .sl-claim-done { opacity: 1; transform: none; }
.sl-claim.is-claimed .sl-claim-input { border-color: color-mix(in srgb, var(--success) 45%, var(--color-pebble)); }

/* Creator codes: the draw page's claim-code table, most claimed first. */
.sl-tile--codes .pf-ui { --pf-base: 620; }
.sl-codes { display: flex; flex-direction: column; }
.sl-codes-head, .sl-code { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); align-items: center; gap: 1em; padding: 0.7em 1.25em; }
.sl-codes-head { font-size: 0.72em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-fg-faint); background: var(--c-sunken); border-bottom: 1px solid var(--c-border); }
.sl-codes-head span:last-child { text-align: right; }
.sl-code + .sl-code { border-top: 1px solid var(--c-border); }
.sl-code-name { display: flex; align-items: center; gap: 0.6em; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-code-name .pfc-avatar { width: 2.3em; height: 2.3em; }
.sl-code-name .pfc-avatar .icon { width: 1.25em; height: 1.25em; }
.sl-code > em { font-style: normal; font-family: var(--font-mono); font-size: 0.82em; padding: 0.2em 0.5em; border-radius: 0.4em; background: var(--c-muted); color: var(--c-fg-muted); }
.sl-code-meter { display: flex; flex-direction: column; gap: 0.35em; }
.sl-code-meter small { font-size: 0.8em; color: var(--c-fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.sl-code-meter small b { color: var(--c-fg); }
/* The table is the whole crop, so it sizes the tile rather than
   bleeding off it — no fade, no dead band under the last row. */
.sl-tile--codes .sl-crop { flex: 0 0 auto; min-height: 0; margin-bottom: var(--spacing-28); -webkit-mask: none; mask: none; }
.sl-tile--codes .sl-crop > .pf-ui { position: relative; }

.sl-more { display: flex; flex-direction: column; gap: var(--spacing-16); padding: var(--spacing-20) var(--spacing-28) var(--spacing-28); }
.sl-more li { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-12); align-items: start; }
.sl-more li > i {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-xl);
  background: var(--glass-fill-dark); border: 1px solid var(--deck-glass-border);
  color: var(--dark-accent);
}
.sl-more li > i .icon { width: 18px; height: 18px; }
.sl-more span { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-body); line-height: 1.5; color: var(--dark-body); }
.sl-more b { font-size: var(--text-body-md); font-weight: var(--font-weight-semibold); color: var(--dark-heading); }

@media (max-width: 1024px) {
  .sl-growth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-growth-grid > .sl-tile--free, .sl-growth-grid > .sl-tile--more,
  .sl-growth-grid > .sl-tile--deck, .sl-growth-grid > .sl-tile--codes { grid-column: span 1; }
}
@media (max-width: 768px) {
  .sl-growth-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); }
  .sl-growth-grid > .sl-tile--free, .sl-growth-grid > .sl-tile--more,
  .sl-growth-grid > .sl-tile--deck, .sl-growth-grid > .sl-tile--codes { grid-column: auto; }
  .sl-deck-slot { padding: var(--spacing-20) var(--spacing-24) var(--spacing-24); }
  /* The ticket comes first on a phone: it is the thing to look at,
     and the copy reads just as well under it. */
  .sl-gold { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .sl-gold-slot { order: -1; margin: var(--spacing-20) auto 0; max-width: 300px; }
  .sl-gold .sl-tile-copy { padding-bottom: var(--spacing-24); }
  .sl-claim, .sl-more { padding-inline: var(--spacing-24); }
}
@media (max-width: 480px) {
  .sl-claim-card { grid-template-columns: minmax(0, 72px) minmax(0, 1fr); gap: var(--spacing-12); padding: var(--spacing-12); }
  .sl-gold-facts dd { font-size: var(--text-body-md); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-claim.is-typing .sl-caret { animation: none; }
  .sl-claim-done { transition: opacity 200ms ease; transform: none; }
}

/* ============================================================
   5 · BRANDS
   ============================================================ */
.sl-brands { background: var(--dark-surface); color: var(--dark-heading); }
.sl-brand-rail {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-32);
  align-items: start;
}
.sl-brandcard { margin: 0; display: flex; flex-direction: column; gap: var(--spacing-20); }
/* A little stagger in height, so four phones read as a row of
   objects on a table rather than a grid of screenshots. */
.sl-brandcard:nth-child(even) { margin-top: var(--spacing-48); }
/* On the dark band the rim is what separates the device from the
   ground, so the shadow goes deeper and the ring stays light. */
.sl-brandcard .pf-phone { --pf-lift: 0 40px 90px -30px rgba(0, 0, 0, 0.75); }
.sl-brandcard figcaption { display: flex; flex-direction: column; gap: var(--spacing-8); padding-inline: var(--spacing-4); }
.sl-brandcard-logo { font-size: 17px; color: var(--dark-heading); }
.sl-brandcard-logo .bl-mark { color: var(--color-brand-secondary); }
.sl-brandcard-meta { font-size: var(--text-body-sm); color: var(--dark-body); }
.sl-palette { display: flex; gap: 6px; }
.sl-palette i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.sl-palette i:nth-child(1) { background: var(--color-brand-primary); }
.sl-palette i:nth-child(2) { background: var(--color-brand-primary-strong); }
.sl-palette i:nth-child(3) { background: var(--color-brand-action); }
.sl-palette i:nth-child(4) { background: var(--color-brand-highlight); }
.sl-palette i:nth-child(5) { background: var(--color-brand-on-highlight); }
.sl-palette i:nth-child(6) { background: var(--color-brand-secondary); }
.sl-palette i:nth-child(7) { background: var(--color-brand-on-secondary); }

.sl-control {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-20);
  margin-top: var(--spacing-80);
  padding-top: var(--spacing-48);
  border-top: 1px solid var(--dark-line);
  text-align: center;
}
.sl-control-title { font-size: var(--text-body-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-body); }
.sl-control-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-8) var(--spacing-12); max-width: 820px; }
.sl-control-list li {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-dark);
  border: 1px solid var(--deck-glass-border);
  font-size: var(--text-body); color: var(--dark-heading);
}
.sl-control-list .icon { width: 16px; height: 16px; color: var(--dark-accent); }

@media (max-width: 1024px) {
  .sl-brand-rail { gap: var(--spacing-20); }
}
@media (max-width: 900px) {
  /* A browsing row on a phone is a rail, not a column: four
     storefronts one per screen is four screens of scrolling. */
  .sl-brand-rail {
    display: flex; gap: var(--spacing-16);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--sl-gutter));
    padding: 0 var(--sl-gutter) var(--spacing-8);
    scroll-padding-inline: var(--sl-gutter);
    scrollbar-width: none;
  }
  .sl-brand-rail::-webkit-scrollbar { display: none; }
  .sl-brandcard { flex: 0 0 min(62%, 260px); scroll-snap-align: start; }
  .sl-brandcard:nth-child(even) { margin-top: 0; }
  .sl-control { margin-top: var(--spacing-48); }
}

/* ============================================================
   6 · TODAY / TOMORROW
   On Parchment, like the admin: the two light bands the page
   stands its product on are the warm one, between the Snow ones.
   ============================================================ */
.sl-api { background: var(--color-parchment); }
.sl-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); align-items: stretch; }
.sl-plan {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-16);
  padding: var(--spacing-40);
  border-radius: var(--radius-cards);
}
.sl-plan h3 { color: var(--color-obsidian); }
.sl-plan > p { font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-slate); max-width: 46ch; }
.sl-plan .btn { margin-top: auto; }
.sl-plan--now { background: var(--color-snow); border: 1px solid var(--sl-hairline); }
.sl-plan--soon { background: transparent; border: 1px dashed var(--color-ash); }
.sl-plan--soon h3, .sl-plan--soon > p { color: var(--color-slate); }

.sl-status {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: 5px var(--spacing-12);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-xs); font-weight: var(--font-weight-semibold);
}
.sl-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sl-status--now { background: color-mix(in srgb, var(--success) 12%, var(--color-snow)); color: var(--success); }
.sl-status--soon { background: var(--color-fog); color: var(--color-slate); }

.sl-checks { display: flex; flex-direction: column; gap: var(--spacing-12); width: 100%; }
.sl-checks li { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-12); font-size: var(--text-body-md); line-height: 1.45; color: var(--color-slate); }
.sl-checks b { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
.sl-checks li > i { align-self: start; padding-top: 2px; }
.sl-checks .icon { width: 18px; height: 18px; color: var(--success); }
.sl-checks--soon .icon { color: var(--color-steel); }

.sl-plan-visual { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-8); width: 100%; margin: var(--spacing-8) 0 var(--spacing-16); }
.sl-layerbox {
  display: flex; align-items: center; gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-inputs);
  font-size: var(--text-body); font-weight: var(--font-weight-medium);
}
.sl-layerbox .icon { width: 18px; height: 18px; }
.sl-layerbox--brand { background: var(--color-parchment); color: var(--color-brand-primary-strong); }
.sl-layerbox--core { background: var(--color-brand-primary-strong); color: var(--color-brand-highlight); }
.sl-layerbox--core .icon { color: var(--color-brand-secondary); }
.sl-layerbox--yours { border: 1px dashed var(--color-ash); color: var(--color-slate); background: var(--color-snow); }
.sl-plan--soon .sl-layerbox--core { background: var(--color-fog); color: var(--color-slate); }
.sl-plan--soon .sl-layerbox--core .icon { color: var(--color-steel); }
.sl-layerbox-link {
  align-self: center;
  position: relative;
  padding: 2px var(--spacing-8);
  font-size: var(--text-caption); font-weight: var(--font-weight-semibold); letter-spacing: 0.08em;
  color: var(--color-steel);
}
.sl-layerbox-link::before, .sl-layerbox-link::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: 6px;
  border-left: 1px dashed var(--color-ash);
}
.sl-layerbox-link::before { bottom: 100%; }
.sl-layerbox-link::after { top: 100%; }

@media (max-width: 768px) {
  .sl-compare { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); }
  .sl-plan { padding: var(--spacing-28) var(--spacing-24); }
  .sl-plan .btn { width: 100%; }
}

/* ============================================================
   7 · ONE PLATFORM — flow diagram
   Four nodes and three links. Each link carries two dots that
   travel its length (translateX by the link's own container
   width), so the loop is a transform however wide the link is.
   ============================================================ */
.sl-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(64px, 0.45fr) minmax(0, 1.25fr) minmax(64px, 0.45fr) minmax(0, 1fr) minmax(64px, 0.45fr) minmax(0, 1fr);
  align-items: center;
}
.sl-node {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-8);
  padding: var(--spacing-24);
  border-radius: var(--radius-cards-compact);
  min-height: 100%;
}
.sl-node > b { color: var(--color-obsidian); }
.sl-node > span:not(.sl-node-icon):not(.sl-node-tags):not(.sl-node-branch) { font-size: var(--text-body); line-height: 1.5; color: var(--color-steel); }
.sl-node-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-xl);
  background: var(--color-snow); border: 1px solid var(--sl-hairline);
  color: var(--color-brand-primary);
  margin-bottom: var(--spacing-4);
}
.sl-node-branch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--spacing-4);
  padding: 4px var(--spacing-8);
  border-radius: var(--radius-badges);
  background: var(--color-snow); border: 1px solid var(--color-fog);
  font-size: var(--text-body-xs); color: var(--color-slate);
}
.sl-node-branch .icon { width: 14px; height: 14px; }
.sl-node--core { background: var(--dark-surface); border-color: transparent; padding: var(--spacing-28); }
.sl-node--core > b { color: var(--dark-heading); }
.sl-node--core .sl-node-icon { background: var(--glass-fill-dark); border-color: var(--deck-glass-border); color: var(--dark-accent); }
.sl-node-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--spacing-4); }
.sl-node-tags em {
  font-style: normal; font-size: var(--text-body-xs); color: var(--dark-heading);
  padding: 3px var(--spacing-8); border-radius: var(--radius-pill);
  background: var(--glass-fill-dark); border: 1px solid var(--deck-glass-border);
}

.sl-link { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); padding-inline: var(--spacing-4); }
.sl-link em { font-style: normal; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-steel); text-align: center; }
.sl-link-line {
  position: relative; width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-pebble) 0 4px, transparent 4px 8px);
  container-type: inline-size;
}
.sl-link-line::after {
  content: ""; position: absolute; right: -2px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--color-pebble); border-right: 2px solid var(--color-pebble);
  transform: translateY(-50%) rotate(45deg);
}
.sl-link-line i {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; margin-top: -4px; margin-left: -4px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  opacity: 0;
}
.sl-flow.is-flowing .sl-link-line i { animation: sl-travel 2600ms linear infinite; }
.sl-flow.is-flowing .sl-link-line i:nth-child(2) { animation-delay: 1300ms; }
.sl-flow.is-flowing .sl-link:nth-child(4) .sl-link-line i { animation-delay: 430ms; }
.sl-flow.is-flowing .sl-link:nth-child(4) .sl-link-line i:nth-child(2) { animation-delay: 1730ms; }
.sl-flow.is-flowing .sl-link:nth-child(6) .sl-link-line i { animation-delay: 860ms; }
.sl-flow.is-flowing .sl-link:nth-child(6) .sl-link-line i:nth-child(2) { animation-delay: 2160ms; }
.sl-flow.is-idle .sl-link-line i { animation-play-state: paused; }
@keyframes sl-travel {
  0% { transform: translateX(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(100cqi); opacity: 0; }
}

.sl-return {
  display: flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  margin-top: var(--spacing-40);
  font-size: var(--text-body-md); color: var(--color-slate); text-align: center;
}
.sl-return .icon { color: var(--color-brand-primary); flex: none; }

/* The row needs every node wide enough for a 32px title's longest
   word, which is a question about the diagram's own box rather than
   the window — so the column it folds into is a container query. */
.sl-flow-section > .sl-container { container: sl-flow / inline-size; }
@keyframes sl-travel-y {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(100cqb); opacity: 0; }
}
@container sl-flow (max-width: 1150px) {
  .sl-flow {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px; margin-inline: auto;
  }
  .sl-node { min-height: 0; }
  .sl-link { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); align-items: stretch; height: 64px; column-gap: var(--spacing-12); padding: 0; }
  .sl-link-line { grid-column: 2; }
  .sl-link-line {
    width: 2px; height: 100%;
    background: repeating-linear-gradient(180deg, var(--color-pebble) 0 4px, transparent 4px 8px);
    container-type: size;
  }
  .sl-link-line::after { right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%) rotate(135deg); }
  .sl-link-line i { left: 50%; top: 0; margin-top: -4px; }
  .sl-link em { grid-column: 3; align-self: center; text-align: left; min-width: 0; }
  .sl-flow.is-flowing .sl-link-line i { animation-name: sl-travel-y; }
  .sl-return { flex-direction: column; }
}

/* ============================================================
   8 · CTA + FOOTER
   ============================================================ */
.sl-cta-section { padding-top: 0; }
.sl-cta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-24);
  padding: clamp(var(--spacing-48), 8vw, var(--spacing-120)) var(--spacing-40);
  border-radius: var(--radius-cards);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(var(--color-brand-primary-rgb), 0.95), transparent 70%),
    var(--dark-surface);
  text-align: center;
  overflow: hidden;
}
.sl-cta .sl-h2 { color: var(--dark-heading); max-width: 760px; }
.sl-cta .sl-lead { max-width: 560px; }
@media (max-width: 768px) {
  .sl-cta { padding-inline: var(--spacing-24); border-radius: var(--radius-cards-compact); }
  .sl-cta .sl-ctas { flex-direction: column; align-items: stretch; width: 100%; }
}

.sl-footer { border-top: 1px solid var(--sl-hairline); background: var(--color-mist); padding: var(--spacing-48) 0 calc(var(--spacing-48) + env(safe-area-inset-bottom, 0px)); }
.sl-footer-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--spacing-16) var(--spacing-40);
  color: var(--color-brand-primary-strong);
}
.sl-footer-line { font-size: var(--text-body-sm); color: var(--color-steel); }
.sl-footer-links { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-20); }
.sl-footer-links a { font-size: var(--text-body-sm); color: var(--color-slate); }
.sl-footer-copy { grid-column: 1 / -1; font-size: var(--text-body-xs); color: var(--color-steel); padding-top: var(--spacing-20); border-top: 1px solid var(--sl-hairline); }
@media (max-width: 768px) {
  .sl-footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   DEMO DIALOG
   Native <dialog> wearing the MODAL block's box. Enters from
   0.96 with a fade (@starting-style), leaves at once; a bottom
   sheet below the tablet step, rising from the edge it sits on.
   ============================================================ */
.sl-dialog {
  padding: 0; border: 0; background: transparent;
  max-width: none; max-height: none;
  width: 100%; height: 100%;
  overflow: visible;
  display: none;
}
.sl-dialog[open] { display: grid; place-items: center; padding: var(--spacing-24); }
.sl-dialog::backdrop {
  background: rgba(var(--color-brand-primary-strong-rgb), 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sl-dialog[open]::backdrop { transition: opacity 200ms ease; }
@starting-style { .sl-dialog[open]::backdrop { opacity: 0; } }
.sl-dialog-box {
  max-width: 560px;
  overscroll-behavior: contain;
  transition: opacity 200ms ease, transform 240ms var(--ease-deck-out);
}
@starting-style { .sl-dialog[open] .sl-dialog-box { opacity: 0; transform: scale(0.96) translateY(8px); } }
.sl-dialog .modal-header { gap: var(--spacing-16); }
.sl-dialog .modal-title { font-size: var(--text-heading-md); letter-spacing: var(--ls-heading-md); }
.sl-dialog-sub { margin-top: var(--spacing-4); font-size: var(--text-body); color: var(--color-steel); }
.sl-dialog .modal-body { display: flex; flex-direction: column; }
.sl-optional { font-weight: var(--font-weight-regular); color: var(--color-steel); margin-left: var(--spacing-4); }
.sl-textarea { resize: vertical; min-height: 84px; font-family: inherit; }
.sl-plan-pick { border: 0; padding: 0; margin: 0; }
.sl-plan-pick legend { margin-bottom: var(--spacing-8); }
.sl-pick {
  display: flex; align-items: center; gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-inputs);
  border: 1px solid var(--color-fog);
  cursor: pointer;
  transition: border-color var(--duration-micro) ease, background var(--duration-micro) ease;
}
.sl-pick + .sl-pick { margin-top: var(--spacing-8); }
.sl-pick input { accent-color: var(--color-brand-primary-strong); width: 18px; height: 18px; flex: none; margin: 0; }
.sl-pick span { display: flex; flex-direction: column; }
.sl-pick b { font-size: var(--text-body); font-weight: var(--font-weight-semibold); }
.sl-pick small { font-size: var(--text-body-xs); color: var(--color-steel); }
/* The chosen option is the activated one: Parchment, as a step card is. */
.sl-pick:has(input:checked) { border-color: var(--color-parchment); background: var(--sl-parchment-soft); }
.sl-pick:has(input:focus-visible) { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
.sl-dialog-foot { align-items: center; justify-content: space-between; }
.sl-dialog-foot .sl-fine { margin-right: auto; }

/* The submit morphs rather than swaps: label and busy state share
   one cell and cross under a blur, so the button never resizes. */
.sl-submit { display: inline-grid; }
.sl-submit > span { grid-area: 1 / 1; transition: opacity 180ms ease, filter 180ms ease; }
.sl-submit-busy { opacity: 0; filter: blur(2px); }
.sl-submit.is-busy { pointer-events: none; }
.sl-submit.is-busy .sl-submit-label { opacity: 0; filter: blur(2px); }
.sl-submit.is-busy .sl-submit-busy { opacity: 1; filter: none; }

.sl-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-12); padding: var(--spacing-48) var(--spacing-28) var(--spacing-28); }
.sl-done[hidden] { display: none; }
.sl-done-mark { color: var(--success); }
.sl-done .modal-title:focus { outline: none; }
.sl-done p { color: var(--color-slate); }
.sl-done .btn { margin-top: var(--spacing-12); min-width: 160px; }
.sl-done:not([hidden]) { animation: sl-done-in 420ms var(--ease-deck-out); }
@keyframes sl-done-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 768px) {
  .sl-dialog[open] { place-items: end stretch; padding: 0; }
  .sl-dialog-box { max-width: none; width: 100%; border-radius: var(--radius-cards) var(--radius-cards) 0 0; max-height: calc(100dvh - var(--spacing-48)); }
  @starting-style { .sl-dialog[open] .sl-dialog-box { opacity: 1; transform: translateY(100%); } }
  .sl-dialog-box { transition: transform 360ms var(--ease-deck-out); }
  .sl-dialog-foot { flex-direction: column-reverse; align-items: stretch; padding-bottom: calc(var(--spacing-28) + env(safe-area-inset-bottom, 0px)); }
  .sl-dialog-foot .sl-fine { margin: 0; text-align: center; }
  .sl-done { padding-bottom: calc(var(--spacing-28) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   TOUCH
   What a phone needs that a mouse never notices. A control's label
   is not content, so a long press on it must not select it; the
   product miniatures are pictures of screens, so a long press on
   them must not select their words or raise the image callout. Page
   copy stays selectable. Under a coarse pointer the page's own small
   controls reach the 44px touch floor.
   ============================================================ */
.sl-step, .sl-cycle-toggle, .sl-replay, .sl-burger, .sl-nav-links a, .sl-nav-link-btn,
.sl-nav-talk, .sl-brand, .sl-pick, .sl-footer-links a {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.pf-window, .pf-phone, .sl-swatches, .sl-crop, .sl-thr, .sl-tv, .sl-mq, .sl-claim, .sl-gold-slot {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.sl-pick { transition: border-color var(--duration-micro) ease, background var(--duration-micro) ease, transform 160ms var(--ease-deck-out); }
.sl-pick:active { transform: scale(0.98); }
@media (pointer: coarse) {
  .sl-replay { min-height: var(--touch-target); }
  .sl-footer-links a { display: inline-block; padding-block: 12px; }
}

/* ============================================================
   ENTRANCES
   The hero plays once on load: copy rises line by line, then the
   frames arrive from a little below and a little smaller. Every
   other block reveals once on first sight, JS-gated so nothing is
   hidden if the script never runs.
   ============================================================ */
.sl-rise { animation: sl-rise 900ms var(--ease-deck-out) both; }
.sl-hero-copy > :nth-child(2) { animation-delay: 70ms; }
.sl-hero-copy > :nth-child(3) { animation-delay: 140ms; }
.sl-hero-copy > :nth-child(4) { animation-delay: 210ms; }
@keyframes sl-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }

.sl-frame-in { animation: sl-frame 1100ms var(--ease-deck-out) both; animation-delay: 260ms; }
.sl-hero-phone.sl-frame-in { animation-delay: 420ms; }
.sl-swatches.sl-frame-in { animation-delay: 580ms; }
@keyframes sl-frame { from { opacity: 0; transform: translateY(40px) scale(0.98); } }

/* The frame the script arrives on sets every "not yet played" state
   at once; .sl-boot holds transitions off for that frame, so a chart
   drawn full by the HTML does not visibly shrink to zero before it
   grows. js/sales.js lifts it two frames later. */
.sl-boot .sl-reveal, .sl-boot .pfc-meter > i, .sl-boot .pfc-bars i, .sl-boot .sl-tv-bars span { transition: none !important; }

.sl-js .sl-reveal {
  transition: opacity 600ms var(--ease-deck-out), transform 800ms var(--ease-deck-out), filter 600ms var(--ease-deck-out);
  transition-delay: var(--sl-delay, 0ms);
}
.sl-js .sl-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
.sl-js .sl-head.sl-reveal:not(.is-in) { filter: blur(4px); }
.sl-bento > :nth-child(2), .sl-brand-rail > :nth-child(2), .sl-compare > :nth-child(2) { --sl-delay: 80ms; }
.sl-bento > :nth-child(3), .sl-brand-rail > :nth-child(3) { --sl-delay: 160ms; }
.sl-bento > :nth-child(4), .sl-brand-rail > :nth-child(4) { --sl-delay: 240ms; }
.sl-bento > :nth-child(5) { --sl-delay: 80ms; }
.sl-bento > :nth-child(6) { --sl-delay: 160ms; }
.sl-bento > :nth-child(8) { --sl-delay: 80ms; }
.sl-bento > :nth-child(9) { --sl-delay: 80ms; }
/* Every grid staggers the way the bento does: a card arrives a beat
   after the one beside it, never all at once and never in a queue. */
.sl-rev-grid > :nth-child(3), .sl-growth-grid > :nth-child(3), .sl-growth-grid > :nth-child(5) { --sl-delay: 70ms; }
.sl-features > :nth-child(3n + 2) { --sl-delay: 70ms; }
.sl-features > :nth-child(3n) { --sl-delay: 140ms; }

/* The hero phone rises a little faster than the page as it
   scrolls away — depth, not parallax for its own sake. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
    .sl-hero-phone.is-settled {
      animation: sl-depth linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    @keyframes sl-depth { to { transform: translateY(-56px); } }
  }
}

/* ============================================================
   REDUCED MOTION / TRANSPARENCY
   Fewer and gentler, never nothing: every state is still
   reachable by hand, and what remains is a cross-fade.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sl-rise, .sl-frame-in { animation: sl-fade 300ms ease both; }
  @keyframes sl-fade { from { opacity: 0; } }
  .sl-js .sl-reveal { transition: opacity 300ms ease; transform: none !important; filter: none !important; }
  .sl-state, .sl-state[hidden] { transform: none; filter: none; }
  .sl-burger span { transition-duration: 0ms; }
  .sl-flow .sl-link-line i { animation: none !important; opacity: 0; }
  .pfc-meter > i, .pfc-bars i { transition: none; }
  .sl-crop > .pf-ui { transition: none; }
  .sl-cycle-progress, .sl-step-ring { display: none; }
  /* What still changes, changes in place: the brand swap in the
     setup demo fades rather than wipes, the email subject line
     crossfades without moving, and Replay's icon does not turn. */
  .sl-stack-layer--next { clip-path: none; opacity: 0; transition: opacity 300ms ease; }
  .sl-stack-layer--next.is-in { opacity: 1; }
  .sl-subj, .sl-tile.is-played .sl-subj--raw { transform: none; }
  .sl-replay.is-spun .icon { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sl-nav::after { background: var(--color-mist); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sl-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--color-brand-primary-strong-rgb), 0.8); }
  /* Glass becomes the solid it was standing in for. */
  .sl-rev-grid > .sl-rev-type, .sl-features > li, .sl-flow > .sl-node:not(.sl-node--core), .sl-bento > .sl-tile {
    background: var(--color-snow); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .sl-growth-grid > .sl-tile {
    background: color-mix(in srgb, var(--dark-heading) 6%, var(--dark-surface)); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ============================================================
   CONSOLE MINIATURE  (.pf-console · .pfc-*)
   The admin as it is drawn in css/console.css, restated at
   miniature scale. The tokens are the console's own, copied from
   css/console.css → TOKENS, because that sheet cannot be loaded
   beside components.css (the class names collide).
   ============================================================ */
.pf-console {
  --c-bg:            oklch(0.985 0.004 165);
  --c-sunken:        oklch(0.972 0.005 165);
  --c-card:          oklch(0.999 0.0015 165);
  --c-sidebar:       oklch(0.977 0.005 165);
  --c-muted:         oklch(0.963 0.006 165);
  --c-muted-2:       oklch(0.944 0.007 165);
  --c-fg:            oklch(0.235 0.014 168);
  --c-fg-muted:      oklch(0.515 0.014 166);
  --c-fg-subtle:     oklch(0.605 0.012 166);
  --c-fg-faint:      oklch(0.70 0.010 166);
  --c-border:        oklch(0.916 0.007 165);
  --c-border-strong: oklch(0.878 0.009 165);
  --c-primary:       oklch(0.205 0.033 168);
  --c-primary-fg:    oklch(0.975 0.018 150);
  --c-mint:          var(--color-mint-ice-cream);
  --c-live:          oklch(0.66 0.205 40);
  --c-live-bg:       oklch(0.955 0.045 45);
  --c-live-border:   oklch(0.88 0.09 45);
  --c-success:       oklch(0.505 0.088 162);
  --c-success-bg:    oklch(0.955 0.032 162);
  --c-success-border:oklch(0.88 0.05 162);
  --c-warning:       oklch(0.585 0.098 74);
  --c-warning-bg:    oklch(0.962 0.042 78);
  --c-warning-border:oklch(0.88 0.07 78);
  --c-danger:        oklch(0.525 0.15 25);
  --c-danger-bg:     oklch(0.955 0.03 25);
  --c-danger-border: oklch(0.88 0.055 25);
  --c-info:          oklch(0.545 0.075 244);
  --c-info-bg:       oklch(0.955 0.03 244);
  --c-info-border:   oklch(0.88 0.045 244);
  --c-shadow:        0 1px 2px oklch(0.2 0.03 165 / 0.05);
  font-family: var(--font-inter);
  color: var(--c-fg);
  letter-spacing: -0.006em;
  line-height: 1.45;
  text-align: left;
}
/* base.css colours every paragraph Ink; inside a miniature a line
   of copy takes the colour of the surface it is drawn on. :where()
   keeps this at element weight, so a component's own ink wins. */
:where(.sf, .pf-console) p { color: inherit; }
/* 1em = 14 design pixels, whatever size the frame is drawn at. */
.pf-ui { font-size: calc(100cqi * 14 / var(--pf-base, 1200)); }
.pf-console .icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.pf-console i[data-icon] { display: inline-flex; }
.pf-console b { font-weight: var(--font-weight-semibold); }

.pfc-shell { display: grid; grid-template-columns: 16em minmax(0, 1fr); background: var(--c-bg); min-height: 100%; height: 100%; }
.pfc-side { background: var(--c-sidebar); border-right: 1px solid var(--c-border); padding: 1.1em 0.85em; display: flex; flex-direction: column; gap: 0.9em; }
.pfc-brand { display: flex; align-items: center; gap: 0.65em; padding: 0.15em 0.35em; }
.pfc-mark {
  flex: none; display: grid; place-items: center;
  width: 2.3em; height: 2.3em; border-radius: 0.6em;
  background: var(--c-mint); color: var(--c-primary);
  font-family: var(--font-display); font-weight: 700; font-size: 1em;
  transition: filter 200ms ease, opacity 200ms ease;
}
.pfc-brand-name { min-width: 0; display: flex; flex-direction: column; }
.pfc-brand-name b { font-size: 0.97em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter 200ms ease, opacity 200ms ease; }
.pfc-brand-name small { font-size: 0.78em; color: var(--c-fg-muted); }
.is-swapping { filter: blur(2px); opacity: 0.3; }
.pfc-nav { display: flex; flex-direction: column; gap: 0.12em; }
.pfc-group { padding: 1.1em 0.75em 0.4em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-fg-faint); }
.pfc-link, .pfc-sub-link {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.72em;
  border-radius: 0.6em;
  color: var(--c-fg-muted); font-weight: 500;
  transition: background 300ms ease, color 300ms ease;
}
.pfc-sub-link { padding-left: 2.45em; font-size: 0.93em; }
.pfc-link.is-active { background: var(--c-muted-2); color: var(--c-fg); font-weight: 600; }
.pfc-count {
  margin-left: auto; min-width: 1.6em; padding: 0 0.45em;
  border-radius: 999px; font-style: normal; text-align: center;
  font-size: 0.75em; font-weight: 600;
  background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid var(--c-warning-border);
}

.pfc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pfc-top {
  flex: none; height: 4.3em; padding: 0 1.7em;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-card);
}
.pfc-crumb { font-weight: 500; }
.pfc-crumb small { color: var(--c-fg-faint); margin: 0 0.3em; font-size: 1em; }
.pfc-top-end { display: flex; align-items: center; gap: 1em; color: var(--c-fg-muted); }
.pfc-avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: var(--c-muted-2); color: var(--c-fg);
  font-size: 0.8em; font-weight: 600; font-style: normal; letter-spacing: 0;
}
.pfc-avatar--sq { border-radius: 0.55em; width: 2.6em; height: 2.6em; background: var(--c-sunken); border: 1px solid var(--c-border); }
.pfc-avatar--brand { background: var(--c-mint); color: var(--c-primary); font-family: var(--font-display); font-weight: 700; width: 2.6em; height: 2.6em; font-size: 0.9em; }
.pfc-content { padding: 1.6em 1.7em; display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.pfc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.pfc-title { font-size: 1.72em; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.pfc-sub { margin-top: 0.2em; color: var(--c-fg-muted); font-size: 0.93em; }
.pfc-chips { display: flex; gap: 0.4em; flex-wrap: wrap; justify-content: flex-end; }

.pfc-btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  height: 2.6em; padding: 0 1em;
  border-radius: 0.6em;
  border: 1px solid var(--c-border-strong);
  background: var(--c-card); color: var(--c-fg);
  font-size: 0.93em; font-weight: 500; white-space: nowrap;
  box-shadow: var(--c-shadow);
  transition: transform 160ms var(--ease-deck-out), opacity 300ms ease, background 300ms ease;
}
.pfc-btn--primary { background: var(--c-primary); color: var(--c-primary-fg); border-color: transparent; }
.pfc-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; }
.pfc-btn--sm { height: 2.2em; padding: 0 0.8em; font-size: 0.85em; }
.pfc-link-btn { color: var(--c-fg-muted); font-size: 0.9em; font-weight: 500; }

.pfc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); gap: 0.85em; }
.pfc-kpi {
  display: flex; flex-direction: column; gap: 0.3em;
  padding: 1.1em 1.25em;
  border-radius: 0.85em;
  background: var(--c-card); border: 1px solid var(--c-border); box-shadow: var(--c-shadow);
  min-width: 0;
}
.pfc-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; color: var(--c-fg-muted); font-size: 0.93em; }
.pfc-kpi-label .icon { width: 2.1em; height: 2.1em; padding: 0.45em; border-radius: 0.55em; background: var(--c-muted); flex: none; }
.pfc-kpi-value { font-size: 2.15em; font-weight: 680; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pfc-delta { color: var(--c-success); font-size: 0.85em; font-weight: 600; }
.pfc-delta small, .pfc-note { color: var(--c-fg-muted); font-size: 0.85em; font-weight: 400; }
.pfc-delta small { font-size: 1em; }

.pfc-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0.85em; }
.pfc-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: 0.85em; box-shadow: var(--c-shadow); min-width: 0; overflow: hidden; }
.pfc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; padding: 0.95em 1.25em; border-bottom: 1px solid var(--c-border); }
.pfc-card-head b { display: block; font-size: 1.02em; }
.pfc-card-head small { display: block; color: var(--c-fg-muted); font-size: 0.85em; }
.pfc-pill { font-style: normal; display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 0.4em; border-radius: 0.45em; font-size: 0.8em; font-weight: 600; }
.pfc-pill--warning { background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid var(--c-warning-border); }

.pfc-row { display: flex; align-items: center; gap: 0.8em; padding: 0.75em 1.25em; border-top: 1px solid var(--c-border); min-width: 0; }
.pfc-card-head + .pfc-row, .pfc-list > .pfc-row:first-child { border-top: 0; }
.pfc-thumb { flex: none; width: 2.8em; height: 2.8em; border-radius: 0.55em; object-fit: cover; background: var(--c-muted); }
.pfc-row-copy { flex: 1; min-width: 0; }
.pfc-row-copy > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfc-row-copy > small { display: flex; align-items: center; gap: 0.35em; color: var(--c-fg-muted); font-size: 0.85em; white-space: nowrap; overflow: hidden; }
.pfc-row .pfc-btn--sm + .pfc-btn--sm { margin-left: -0.35em; }
.pfc-row-meter { flex: 0 0 38%; display: flex; flex-direction: column; gap: 0.35em; }
.pfc-meter-meta { display: flex; justify-content: space-between; gap: 0.5em; font-size: 0.8em; color: var(--c-fg-muted); white-space: nowrap; }
.pfc-meter-meta b { color: var(--c-fg); }

.pfc-meter { display: block; height: 0.42em; border-radius: 999px; background: var(--c-muted-2); overflow: hidden; }
.pfc-meter--lg { height: 0.6em; }
.pfc-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--c-primary); transform-origin: left center; transform: scaleX(var(--fill, 0)); }

.pfc-bars { display: flex; align-items: flex-end; gap: 0.7em; height: 10.5em; padding: 1em 1.25em 0.8em; }
.pfc-bars > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.45em; height: 100%; }
/* A bar's value is its scale, not its height: a transform moves on
   the compositor and transitions, so a chart can move to new values
   (the hero's brand change) as smoothly as it first grows in. */
.pfc-bars i { display: block; width: 100%; height: 7em; border-radius: 0.35em 0.35em 0.15em 0.15em; background: var(--c-muted-2); transform-origin: bottom center; transform: scaleY(var(--fill, 1)); }
.pfc-bars .is-accent i { background: var(--c-primary); }
.pfc-bars small { font-size: 0.75em; color: var(--c-fg-muted); }

.pfc-mini { display: flex; flex-direction: column; gap: 0.9em; padding: 1em 1.25em 1.2em; }
.pfc-mini > span { display: grid; grid-template-columns: 1fr auto; gap: 0.35em 0.6em; align-items: center; }
.pfc-mini b { font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfc-mini small { font-size: 0.78em; color: var(--c-fg-muted); font-variant-numeric: tabular-nums; }
.pfc-mini .pfc-meter { grid-column: 1 / -1; grid-row: 2; }

.pfc-badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  height: 1.65em; padding: 0 0.5em;
  border-radius: 0.45em; border: 1px solid;
  font-size: 0.8em; font-weight: 600; font-style: normal; white-space: nowrap; letter-spacing: 0;
}
.pfc-badge .icon { width: 1.05em; height: 1.05em; }
.pfc-badge--live { color: var(--c-live); background: var(--c-live-bg); border-color: var(--c-live-border); }
.pfc-badge--warning { color: var(--c-warning); background: var(--c-warning-bg); border-color: var(--c-warning-border); }
.pfc-badge--success { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success-border); }
.pfc-badge--info { color: var(--c-info); background: var(--c-info-bg); border-color: var(--c-info-border); }
.pfc-badge--destructive { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-border); }
.pfc-badge--neutral { color: var(--c-fg-muted); background: var(--c-muted); border-color: var(--c-border); }
.pfc-badge--mint { color: var(--color-brand-on-highlight); background: var(--color-brand-highlight); border-color: transparent; }
.pfc-dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; font-style: normal; }

.pfc-tabs { display: flex; gap: 1.4em; border-bottom: 1px solid var(--c-border); }
.pfc-tabs > span { padding: 0.55em 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--c-fg-muted); font-weight: 500; white-space: nowrap; }
.pfc-tabs > span.is-active { color: var(--c-fg); border-color: var(--c-primary); font-weight: 600; }
.pfc-tabs em { font-style: normal; margin-left: 0.3em; padding: 0 0.4em; border-radius: 0.4em; background: var(--c-muted); font-size: 0.8em; color: var(--c-fg-muted); }
.pfc-tabs--tight { gap: 1em; font-size: 0.93em; overflow: hidden; }

.pfc-switch {
  position: relative; flex: none;
  width: 2.3em; height: 1.35em; border-radius: 999px;
  background: var(--c-border-strong);
  font-style: normal;
  transition: background 300ms ease;
}
.pfc-switch::after {
  content: ""; position: absolute; top: 0.175em; left: 0.175em;
  width: 1em; height: 1em; border-radius: 50%;
  background: var(--color-snow);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 360ms var(--ease-deck-out);
}
.pfc-switch.is-on { background: var(--c-primary); }
.pfc-switch.is-on::after { transform: translateX(0.95em); }

.pfc-sec { display: flex; align-items: center; gap: 0.75em; padding: 0.7em 1.1em; border-top: 1px solid var(--c-border); }
.pfc-sec:first-child { border-top: 0; }
.pfc-sec > em { font-style: normal; width: 1.2em; text-align: center; color: var(--c-fg-faint); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.pfc-sec > .icon { width: 2.2em; height: 2.2em; padding: 0.5em; border-radius: 0.55em; background: var(--c-muted); color: var(--c-fg-muted); flex: none; }
.pfc-sec > span { flex: 1; min-width: 0; }
.pfc-sec b { display: block; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfc-sec small { display: block; color: var(--c-fg-muted); font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pfc-dl > span { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.6em 1em; border-top: 1px solid var(--c-border); font-size: 0.9em; }
.pfc-dl > span:first-child { border-top: 0; }
.pfc-dl > span > span { display: inline-flex; align-items: center; gap: 0.5em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-fg-muted); }
.pfc-dl b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pfc-dl .pfc-avatar { width: 1.9em; height: 1.9em; font-size: 0.72em; }

/* Layouts screen (setup state 1) */
.pfc-editbar {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.8em 1em 0.8em 1.25em;
  border-radius: 0.85em;
  background: var(--c-card); border: 1px solid var(--c-border);
  box-shadow: 0 0.5em 1.4em -0.8em oklch(0.2 0.03 165 / 0.2);
}
.pfc-editbar > div { margin-right: auto; display: flex; flex-direction: column; }
.pfc-editbar small { color: var(--c-fg-muted); font-size: 0.8em; }
.pfc-editbar b { font-size: 1.05em; }
.sl-swap { display: inline-grid; }
.sl-swap > span { grid-area: 1 / 1; transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out), filter var(--sl-fade) var(--ease-deck-out); }
.sl-swap > span:last-child { opacity: 0; transform: translateY(0.4em); filter: blur(2px); }
.sl-swap > span.is-on { opacity: 1; transform: none; filter: none; }
.sl-swap > span:first-child:has(+ .is-on) { opacity: 0; transform: translateY(-0.4em); filter: blur(2px); }
.sl-pop { opacity: 0; transform: scale(0.92); transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out); }
.sl-pop.is-on { opacity: 1; transform: none; }
.sl-pop.is-on.is-off { opacity: 0; transform: scale(0.92); }
.sl-save { opacity: 0.45; }
.sl-save.is-ready { opacity: 1; }
.sl-save.is-pressed, .sl-publish.is-pressed { animation: sl-press 320ms var(--ease-deck-out); }
@keyframes sl-press { 40% { transform: scale(0.95); } }

.pfc-radios { padding: 0.3em 0; }
.pfc-radio-row { display: flex; gap: 0.9em; padding: 0.95em 1.25em; border-top: 1px solid var(--c-border); transition: background 300ms ease; }
.pfc-radio-row:first-child { border-top: 0; }
.pfc-radio-row b { display: flex; align-items: center; gap: 0.5em; font-size: 1.02em; }
.pfc-radio-row p { color: var(--c-fg-muted); font-size: 0.9em; margin-top: 0.15em; }
.pfc-radio {
  flex: none; position: relative; margin-top: 0.15em;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  border: 1.5px solid var(--c-border-strong);
  font-style: normal;
  transition: border-color 260ms ease;
}
.pfc-radio::after {
  content: ""; position: absolute; inset: 0.22em; border-radius: 50%;
  background: var(--c-primary);
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out);
}
.pfc-radio-row.is-checked { background: var(--c-sunken); }
.pfc-radio-row.is-checked .pfc-radio { border-color: var(--c-primary); }
.pfc-radio-row.is-checked .pfc-radio::after { opacity: 1; transform: scale(1); }
.pfc-radio-row.is-checked.is-unchecked { background: transparent; }
.pfc-radio-row.is-checked.is-unchecked .pfc-radio { border-color: var(--c-border-strong); }
.pfc-radio-row.is-checked.is-unchecked .pfc-radio::after { opacity: 0; transform: scale(0.4); }
.sl-livemark { transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out); }
.sl-livemark.is-gone { opacity: 0; transform: scale(0.85); }
.sl-livemark.is-gone.is-back { opacity: 1; transform: none; }

.pfc-toast {
  align-self: center;
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.7em 1.1em;
  border-radius: 0.8em;
  background: var(--c-primary); color: var(--c-primary-fg);
  font-weight: 500;
  box-shadow: 0 0.8em 2em -0.8em oklch(0.2 0.03 165 / 0.5);
  opacity: 0; transform: translateY(0.8em) scale(0.97);
  transition: opacity var(--sl-fade) var(--ease-deck-out), transform var(--sl-settle) var(--ease-deck-out);
}
.pfc-toast.is-on { opacity: 1; transform: none; }
.pfc-toast .icon { color: var(--c-mint); }
.pfc-toast .pfc-badge { margin-left: 0.2em; }

/* Brand screen (setup state 2) */
.sl-brandset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12em); gap: 1.2em; align-items: start; }
.sl-roles .pfc-card-head { padding: 0.8em 1.1em; }
.sl-role { display: flex; align-items: center; gap: 0.75em; padding: 0.5em 1.1em; border-top: 1px solid var(--c-border); }
.sl-role:first-of-type { border-top: 0; }
.sl-role b { flex: 1; font-size: 0.92em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-role-chip { position: relative; flex: none; width: 1.75em; height: 1.75em; border-radius: 0.45em; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.sl-role-chip i { position: absolute; inset: 0; transition: opacity 420ms ease; }
.sl-role-chip i + i { opacity: 0; }
.sl-role.is-set .sl-role-chip i + i { opacity: 1; }
.sl-role-chip [data-r="primary"] { background: var(--color-brand-primary); }
.sl-role-chip [data-r="primary-strong"] { background: var(--color-brand-primary-strong); }
.sl-role-chip [data-r="action"] { background: var(--color-brand-action); }
.sl-role-chip [data-r="highlight"] { background: var(--color-brand-highlight); }
.sl-role-chip [data-r="on-highlight"] { background: var(--color-brand-on-highlight); }
.sl-role-chip [data-r="secondary"] { background: var(--color-brand-secondary); }
.sl-role-chip [data-r="on-secondary"] { background: var(--color-brand-on-secondary); }
.sl-role code {
  display: inline-grid; flex: none;
  font-family: var(--font-mono); font-size: 0.8em; color: var(--c-fg-muted);
  padding: 0.3em 0.5em; border-radius: 0.4em; border: 1px solid var(--c-border); background: var(--c-card);
}
.sl-role code span { grid-area: 1 / 1; transition: opacity 240ms ease, filter 240ms ease; }
.sl-role code span + span { opacity: 0; filter: blur(2px); }
.sl-role.is-set code span:first-child { opacity: 0; filter: blur(2px); }
.sl-role.is-set code span + span { opacity: 1; filter: none; }
.sl-brandset-preview { display: flex; flex-direction: column; align-items: center; gap: 0.7em; }
.sl-brandset-preview .pf-phone { width: 100%; }
.sl-stack { display: grid; height: 100%; }
.sl-stack-layer--next { clip-path: inset(0 100% 0 0); transition: clip-path 700ms var(--ease-move); }
.sl-stack-layer--next.is-in { clip-path: inset(0 0 0 0); }

/* Create draw (setup state 3) */
.pfc-wizard { display: flex; align-items: center; gap: 0.6em; padding: 1.1em 1.25em; border-bottom: 1px solid var(--c-border); }
.pfc-wstep { display: inline-flex; align-items: center; gap: 0.5em; color: var(--c-fg-muted); font-weight: 600; font-size: 0.9em; white-space: nowrap; transition: color 300ms ease; }
.pfc-wstep + .pfc-wstep::before { content: ""; width: 1.6em; height: 1px; background: var(--c-border-strong); margin-right: 0.1em; }
.pfc-wstep > i {
  display: grid; place-items: center;
  width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--c-muted-2); color: var(--c-fg-muted);
  font-style: normal; font-size: 0.9em; font-variant-numeric: tabular-nums;
  transition: background 300ms ease, color 300ms ease;
}
.pfc-wstep.is-current { color: var(--c-fg); }
.pfc-wstep.is-current > i { background: var(--c-primary); color: var(--c-primary-fg); }
.pfc-wstep.is-done { color: var(--c-fg); }
.pfc-wstep.is-done > i { background: var(--c-success-bg); color: var(--c-success); }
.pfc-review { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1.2em; padding: 1.2em 1.25em; }
.pfc-review img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.7em; }
.pfc-review dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85em 1.2em; }
.pfc-review dt { font-size: 0.8em; color: var(--c-fg-muted); }
.pfc-review dd { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfc-foot { display: flex; justify-content: flex-end; gap: 0.5em; padding: 0.9em 1.25em; border-top: 1px solid var(--c-border); background: var(--c-sunken); }

@container (max-width: 520px) {
  .pfc-split { grid-template-columns: minmax(0, 1fr); }
  .sl-brandset { grid-template-columns: minmax(0, 1fr) minmax(0, 10em); }
  .pfc-review { grid-template-columns: minmax(0, 1fr); }
  .pfc-review img { display: none; }
  .pfc-wizard { gap: 0.35em; }
  .pfc-wstep { font-size: 0.8em; }
  .pfc-wstep + .pfc-wstep::before { width: 0.6em; }
  .pfc-chips { display: none; }
}

/* ============================================================
   STOREFRONT MINIATURE  (.sf · .sf-*)
   The three layouts as their own stylesheets draw them — Plus
   (components.css + chrome.css), Efficiency and Base
   (css/layouts/) — at miniature scale. Every colour is one of the
   seven brand anchors or a neutral, so the brand blocks below can
   re-brand any of them. Rendered by js/sales.js → storefront().
   ============================================================ */
.sf {
  --pf-base: 393;
  font-size: calc(100cqi * 14 / var(--pf-base));
  height: 100%;
  overflow: hidden;
  background: var(--color-mist);
  color: var(--color-ink);
  font-family: var(--font-inter);
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  /* Each miniature is its own stacking context, so a layer's raised
     hero copy can never show through the layer drawn over it. */
  isolation: isolate;
}
.sf--desktop { --pf-base: 1280; }
.sf img, .sf video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf b { font-weight: 600; }

/* Brand marks on the bar — artwork a tenant uploads, drawn here
   as simple invented marks. The theRaffle one is the real file. */
.bl { display: inline-flex; align-items: center; gap: 0.42em; line-height: 1; white-space: nowrap; }
.bl-mark { width: 1.45em; height: 1.45em; flex: none; }
.bl-word { font-family: var(--font-display); font-size: 1.1em; font-weight: 700; letter-spacing: -0.01em; }
.bl-raffle { display: block; width: 6.4em; aspect-ratio: 1620 / 348; background: currentColor; -webkit-mask: url('../images/logo.svg') center / contain no-repeat; mask: url('../images/logo.svg') center / contain no-repeat; }
.bl--kestrel .bl-word { font-weight: 700; letter-spacing: 0.14em; font-size: 0.98em; }
.bl--kestrel .bl-sub { font-size: 0.5em; letter-spacing: 0.22em; font-weight: 600; opacity: 0.75; display: block; margin-top: 0.3em; }
.bl--oriel .bl-word { font-weight: 300; letter-spacing: 0; }
.bl--oriel .bl-word em { font-family: var(--font-hatton); font-weight: 700; font-style: italic; }
.bl--lanternfield .bl-word { font-weight: 500; letter-spacing: -0.02em; }
.bl--saltmarsh .bl-word { font-weight: 700; letter-spacing: 0.08em; font-size: 0.98em; }

.sf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 3.5em 1.15em 0.9em; font-size: 1em; }
.sf--desktop .sf-bar { padding: 1.3em 2.9em; }
.sf-bar-links { display: flex; gap: 1.6em; margin-left: 2em; margin-right: auto; font-size: 0.95em; font-weight: 500; opacity: 0.86; }
.sf-bar-end { display: flex; align-items: center; gap: 0.5em; }
.sf-wallet { padding: 0.4em 0.75em; border-radius: 999px; font-size: 0.8em; font-weight: 600; border: 1px solid currentColor; opacity: 0.9; }
.sf-av {
  display: grid; place-items: center;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: var(--color-brand-highlight); color: var(--color-brand-on-highlight);
  font-size: 0.85em; font-weight: 700;
}
.sf-burger { display: flex; flex-direction: column; gap: 0.25em; width: 1.3em; }
.sf-burger i { height: 0.13em; border-radius: 1em; background: currentColor; }

/* ── Plus ─────────────────────────────────────────────────── */
.sf--plus .sf-hero { position: relative; height: 35em; color: var(--color-snow); overflow: hidden; }
.sf--plus.sf--desktop .sf-hero { height: 31em; }
/* The Plus hero plays the prize's clip where it has one, postered
   with the still it replaces (js/sales.js → media). */
.sf--plus .sf-hero > img, .sf--plus .sf-hero > video { position: absolute; inset: 0; }
.sf-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 42%,
    rgba(var(--color-brand-primary-strong-rgb), 0.9) 100%);
}
.sf--desktop .sf-scrim {
  background:
    linear-gradient(90deg, rgba(var(--color-brand-primary-strong-rgb), 0.85) 0%, rgba(var(--color-brand-primary-strong-rgb), 0) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 25%);
}
.sf--plus .sf-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; color: var(--color-snow); }
.sf--plus .sf-bar .sf-wallet { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); }
.sf-hero-copy { position: absolute; z-index: 2; left: 1.15em; right: 1.15em; bottom: 1.5em; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75em; }
.sf--desktop .sf-hero-copy { left: 2.9em; right: auto; bottom: 2.6em; max-width: 34em; gap: 1em; }
.sf-eyebrow {
  display: inline-flex; align-items: baseline; gap: 0.35em;
  padding: 0.4em 0.85em; border-radius: 999px;
  background: var(--color-brand-highlight); color: var(--color-brand-on-highlight);
  font-size: 0.72em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.sf-eyebrow b { font-family: var(--font-hatton); font-style: italic; font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 1.3em; }
.sf-title { font-family: var(--font-display); font-weight: 300; font-size: 2.35em; line-height: 1.04; letter-spacing: -0.03em; }
.sf-title em { font-family: var(--font-hatton); font-style: italic; font-weight: 700; }
.sf--desktop .sf-title { font-size: 3.6em; }
.sf-actions { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.sf-cta {
  display: inline-flex; align-items: center;
  padding: 0.85em 1.25em; border-radius: 999px;
  background: var(--color-brand-secondary); color: var(--color-brand-on-secondary);
  font-size: 0.92em; font-weight: 600; white-space: nowrap;
}
.sf-count { display: inline-flex; gap: 0.35em; padding: 0.8em 1em; border-radius: 999px; font-size: 0.8em; white-space: nowrap; }
.sf--plus .sf-count { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24); color: var(--color-snow); }
.sf-count b { font-variant-numeric: tabular-nums; }
.sf-strip { display: flex; gap: 1em; padding: 0.95em 1.15em 1.1em; background: var(--color-brand-primary-strong); color: var(--color-brand-highlight); overflow: hidden; }
.sf--desktop .sf-strip { padding: 1em 2.9em 1.15em; gap: 1.6em; }
.sf-strip-item { position: relative; flex: 0 0 72%; display: flex; align-items: center; gap: 0.65em; opacity: 0.5; min-width: 0; }
.sf--desktop .sf-strip-item { flex-basis: 22%; }
.sf-strip-item.is-active { opacity: 1; }
.sf-strip-item img { width: 2.9em; height: 2.9em; flex: none; border-radius: 0.65em; }
.sf-strip-item > span { min-width: 0; display: flex; flex-direction: column; }
.sf-strip-item b { font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-strip-item small { font-size: 0.72em; opacity: 0.72; }
.sf-strip-bar { position: absolute; left: 0; right: 0; bottom: -0.6em; height: 0.16em; border-radius: 1em; background: rgba(var(--color-brand-highlight-rgb), 0.18); overflow: hidden; }
.sf-strip-bar::after { content: ""; position: absolute; inset: 0; background: var(--color-brand-highlight); transform: scaleX(0.6); transform-origin: left; }

.sf-sec { padding: 1.5em 1.15em; }
.sf--desktop .sf-sec { padding: 2.2em 2.9em; }
.sf-h { font-family: var(--font-display); font-weight: 300; font-size: 1.6em; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-obsidian); margin-bottom: 0.7em; }
.sf-h em { font-family: var(--font-hatton); font-style: italic; font-weight: 700; }
.sf--desktop .sf-h { font-size: 2.1em; }
.sf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75em; }
.sf--desktop .sf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2em; }
.sf-tile { position: relative; aspect-ratio: 4 / 5; border-radius: 1.6em; overflow: hidden; color: var(--color-snow); }
.sf--desktop .sf-tile { border-radius: 2em; }
.sf-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%); }
.sf-tile > span { position: absolute; z-index: 1; left: 0.85em; right: 0.85em; bottom: 0.8em; display: flex; flex-direction: column; }
.sf-tile b { font-family: var(--font-display); font-size: 0.95em; line-height: 1.2; }
.sf-tile small { font-size: 0.72em; opacity: 0.85; }
.sf-live {
  position: absolute; z-index: 1; left: 0.7em; top: 0.7em;
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.25em 0.55em; border-radius: 0.6em;
  background: var(--color-brand-action); color: var(--color-snow);
  font-size: 0.66em; font-weight: 600; font-style: normal;
}
.sf-live::before { content: ""; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; }

/* ── Efficiency ──────────────────────────────────────────── */
.sf--efficiency, .sf--base { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.sf--efficiency .sf-bar, .sf--base .sf-bar { background: var(--color-brand-primary-strong); color: var(--color-brand-highlight); }
.sf--efficiency .sf-wallet, .sf--base .sf-wallet { border-color: rgba(var(--color-brand-highlight-rgb), 0.3); }
.sf-band { display: flex; flex-direction: column; gap: 1.05em; padding: 0.4em 1.15em 1.6em; background: var(--color-brand-primary-strong); color: var(--color-brand-highlight); }
.sf--desktop .sf-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3em; align-items: center; padding: 2.4em 2.9em 2.8em; }
.sf-band > img { aspect-ratio: 4 / 3; height: auto; border-radius: 1.15em; }
.sf--desktop .sf-band > img { order: 2; aspect-ratio: 16 / 10; }
.sf-band-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7em; }
.sf-kicker { font-size: 0.74em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.82; }
.sf--efficiency .sf-title { font-family: var(--font-display); font-weight: 700; font-style: normal; font-size: 2.05em; line-height: 1.08; letter-spacing: -0.02em; }
.sf--efficiency.sf--desktop .sf-title { font-size: 3.1em; }
.sf-text { font-size: 0.86em; line-height: 1.5; color: rgba(var(--color-brand-highlight-rgb), 0.72); }
.sf--efficiency .sf-cta, .sf--base .sf-cta { border-radius: 0.72em; }
.sf--efficiency .sf-count { border: 1px solid rgba(var(--color-brand-highlight-rgb), 0.3); border-radius: 0.72em; color: var(--color-brand-highlight); }
.sf-dots { display: flex; align-items: center; gap: 0.35em; margin-top: 0.3em; }
.sf-dots i { width: 0.45em; height: 0.45em; border-radius: 1em; background: rgba(var(--color-brand-highlight-rgb), 0.32); }
.sf-dots i.is-on { width: 1.5em; background: var(--color-brand-highlight); }
.sf--efficiency .sf-h, .sf--base .sf-h { font-family: var(--font-display); font-weight: 700; font-size: 1.35em; letter-spacing: -0.015em; }
.sf--base .sf-h { font-family: inherit; }
.sf--efficiency.sf--desktop .sf-h, .sf--base.sf--desktop .sf-h { font-size: 1.8em; }
.sf-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7em; }
.sf--desktop .sf-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; }
.sf-cat { display: flex; flex-direction: column; border-radius: 0.86em; overflow: hidden; background: var(--color-snow); border: 1px solid var(--color-fog); }
.sf-cat > img { aspect-ratio: 16 / 10; height: auto; }
.sf-cat > span { display: flex; flex-direction: column; gap: 0.1em; padding: 0.6em 0.7em 0.7em; }
.sf-cat b { font-size: 0.86em; }
.sf-cat small { font-size: 0.7em; color: var(--color-steel); display: flex; justify-content: space-between; gap: 0.4em; }
.sf-cat small em { font-style: normal; color: var(--color-ink); font-weight: 600; }

/* ── Base ─────────────────────────────────────────────────── */
.sf--base .sf-sec + .sf-sec { padding-top: 0.2em; }
.sf-sub { font-size: 0.8em; color: var(--color-steel); margin: -0.4em 0 0.9em; }
.sf-draws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7em; }
.sf--desktop .sf-draws { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1em; }
.sf-draw { display: flex; flex-direction: column; border-radius: 0.86em; overflow: hidden; background: var(--color-snow); border: 1px solid var(--color-fog); }
.sf-draw > img { aspect-ratio: 1; height: auto; }
.sf-draw > span { display: flex; flex-direction: column; gap: 0.35em; padding: 0.6em 0.7em 0.75em; }
.sf-draw b { font-size: 0.82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-draw small { display: flex; justify-content: space-between; font-size: 0.7em; color: var(--color-steel); }
.sf-draw small em { font-style: normal; font-weight: 700; color: var(--color-ink); }
.sf-meter { height: 0.28em; border-radius: 1em; background: var(--color-fog); overflow: hidden; }
.sf-meter i { display: block; height: 100%; width: 100%; background: var(--color-brand-primary); transform-origin: left; transform: scaleX(0.62); }
.sf-draw:nth-child(2n) .sf-meter i { transform: scaleX(0.38); }
/* Base's dark page is the fixed neutral one (IMPLEMENTATION.md):
   the brand keeps the bar and the actions, the page goes dark. */
.sf--dark { background: var(--color-obsidian); color: var(--color-snow); }
.sf--dark .sf-h { color: var(--color-snow); }
.sf--dark .sf-sub { color: var(--color-ash); }
.sf--dark .sf-cat, .sf--dark .sf-draw { background: var(--color-ink); border-color: rgba(255, 255, 255, 0.08); }
.sf--dark .sf-cat b, .sf--dark .sf-draw b { color: var(--color-snow); }
.sf--dark .sf-cat small, .sf--dark .sf-draw small { color: var(--color-ash); }
.sf--dark .sf-cat small em, .sf--dark .sf-draw small em { color: var(--color-snow); }
.sf--dark .sf-meter { background: rgba(255, 255, 255, 0.1); }
.sf--dark .sf-meter i { background: var(--color-brand-highlight); }

/* The hero wipe: one layer per brand, the incoming one revealed
   left to right over the outgoing (js/sales.js → wipe). */
.sl-wipe { position: absolute; inset: 0; }
.sl-wipe-layer { position: absolute; inset: 0; z-index: 1; }
.sl-wipe-layer.is-top { z-index: 2; }
[data-sf] { height: 100%; }

/* ============================================================
   BRAND PALETTES
   Each block is a tenant's seven roles, the way the brand record
   stores them (js/settings-data.js → COLOR_ROLES). The storefront
   miniature reads nothing else. theRaffle is restated so a layer
   inside another brand can return to it. The other four are
   invented names for illustration.
   ============================================================ */
[data-sl-brand="theraffle"] {
  --color-brand-primary: #002518;        --color-brand-primary-rgb: 0, 37, 24;
  --color-brand-primary-strong: #00160F; --color-brand-primary-strong-rgb: 0, 22, 15;
  --color-brand-action: #FF5A00;         --color-brand-action-rgb: 255, 90, 0;
  --color-brand-highlight: #D9F9D0;      --color-brand-highlight-rgb: 217, 249, 208;
  --color-brand-on-highlight: #005638;   --color-brand-on-highlight-rgb: 0, 86, 56;
  --color-brand-secondary: #FDCDFE;      --color-brand-secondary-rgb: 253, 205, 254;
  --color-brand-on-secondary: #40001F;   --color-brand-on-secondary-rgb: 64, 0, 31;
}
[data-sl-brand="kestrel"] {
  --color-brand-primary: #13294B;        --color-brand-primary-rgb: 19, 41, 75;
  --color-brand-primary-strong: #0A1830; --color-brand-primary-strong-rgb: 10, 24, 48;
  --color-brand-action: #F2A20C;         --color-brand-action-rgb: 242, 162, 12;
  --color-brand-highlight: #DCEAF7;      --color-brand-highlight-rgb: 220, 234, 247;
  --color-brand-on-highlight: #123B6B;   --color-brand-on-highlight-rgb: 18, 59, 107;
  --color-brand-secondary: #F9C9A0;      --color-brand-secondary-rgb: 249, 201, 160;
  --color-brand-on-secondary: #4A1F02;   --color-brand-on-secondary-rgb: 74, 31, 2;
}
[data-sl-brand="oriel"] {
  --color-brand-primary: #3A1F3D;        --color-brand-primary-rgb: 58, 31, 61;
  --color-brand-primary-strong: #221024; --color-brand-primary-strong-rgb: 34, 16, 36;
  --color-brand-action: #D4572A;         --color-brand-action-rgb: 212, 87, 42;
  --color-brand-highlight: #F3E6D2;      --color-brand-highlight-rgb: 243, 230, 210;
  --color-brand-on-highlight: #5C3B12;   --color-brand-on-highlight-rgb: 92, 59, 18;
  --color-brand-secondary: #EBC6D8;      --color-brand-secondary-rgb: 235, 198, 216;
  --color-brand-on-secondary: #4B1235;   --color-brand-on-secondary-rgb: 75, 18, 53;
}
[data-sl-brand="lanternfield"] {
  --color-brand-primary: #0E4540;        --color-brand-primary-rgb: 14, 69, 64;
  --color-brand-primary-strong: #082C29; --color-brand-primary-strong-rgb: 8, 44, 41;
  --color-brand-action: #E4572E;         --color-brand-action-rgb: 228, 87, 46;
  --color-brand-highlight: #D5F0EB;      --color-brand-highlight-rgb: 213, 240, 235;
  --color-brand-on-highlight: #0B4F48;   --color-brand-on-highlight-rgb: 11, 79, 72;
  --color-brand-secondary: #FFDF7E;      --color-brand-secondary-rgb: 255, 223, 126;
  --color-brand-on-secondary: #4A3500;   --color-brand-on-secondary-rgb: 74, 53, 0;
}
[data-sl-brand="saltmarsh"] {
  --color-brand-primary: #5A1223;        --color-brand-primary-rgb: 90, 18, 35;
  --color-brand-primary-strong: #330914; --color-brand-primary-strong-rgb: 51, 9, 20;
  --color-brand-action: #FFB000;         --color-brand-action-rgb: 255, 176, 0;
  --color-brand-highlight: #FBE3E7;      --color-brand-highlight-rgb: 251, 227, 231;
  --color-brand-on-highlight: #6E1424;   --color-brand-on-highlight-rgb: 110, 20, 36;
  --color-brand-secondary: #F6D36B;      --color-brand-secondary-rgb: 246, 211, 107;
  --color-brand-on-secondary: #3F2E00;   --color-brand-on-secondary-rgb: 63, 46, 0;
}

/* Standalone marketing site: no wireframe dev bar, so its offset is zero. */
.sl-page { --dev-bar-h: 0px; }

/* Demo form: the spam honeypot stays out of sight, and a send failure
   sits where the wireframe note used to. */
.sl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sl-send-err { margin: 0; margin-right: auto; }