/* Steady landing design system · revision 3
 * Sources: Origin's editorial restraint + Atlas's product-luxury typography.
 * Display: Instrument Sans · editorial accent: Instrument Serif
 * Body: Schibsted Grotesk · evidence/UI: Schibsted Grotesk (tabular figures)
 * One neutral-black canvas. White is the action color; green/red stay semantic. */

/* Steady landing v2 — Origin's exact grammar on Steady's canvas. One pitch-black
   page, centered serif chapter heads, hairline dividers, real Living Model state
   as the product imagery. Scoped under .sl; touches no other route. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap');

.sl {
  /* color roles */
  --canvas: #000000;
  --surface-1: #0c0c0e;
  --surface-2: #121214;
  --surface-3: #18181b;
  --surface-card: linear-gradient(145deg, #25262a 0%, #1b1c20 42%, #121317 100%);
  --surface-inset: linear-gradient(145deg, #1b1c20 0%, #111216 58%, #0d0e11 100%);
  --ink: #f6f6f2;
  --ink-muted: rgba(246, 246, 242, 0.7);
  --ink-faint: rgba(246, 246, 242, 0.48);
  --hairline: rgba(255, 255, 255, 0.1);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --positive: #42c98b;
  --negative: #e76876;
  --error: #f08a96;
  --accent: #6db9ff; /* the forecast blue, echoed sparingly page-wide */

  /* type roles: Atlas-like sans scale, Origin-like editorial restraint */
  --display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --editorial: 'Instrument Serif', Georgia, serif;
  --body: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* utility role: labels, tickers, timestamps. Sans with tabular figures so
     data still aligns. No monospace anywhere on this site. */
  --utility: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --type-display: clamp(3.55rem, 7.8vw, 7rem);
  --type-section: clamp(3rem, 6.2vw, 5.75rem);
  --type-card: clamp(1.8rem, 3vw, 2.65rem);
  --type-body: 1rem;
  --leading-display: 0.94;
  --leading-body: 1.6;

  /* layout and geometry */
  --container: 1180px;
  --container-wide: 1320px;
  --measure: 48ch;
  --r-control: 10px;
  --r-panel: 16px;
  --r-stage: 28px;
  --sp-chapter: clamp(7.5rem, 16vh, 12rem);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);

  /* compatibility aliases for the existing component layer */
  --night: var(--canvas);
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --snow: var(--ink);
  --snow-soft: var(--ink-muted);
  --snow-faint: var(--ink-faint);
  --line: var(--hairline);
  --green: var(--positive);
  --red: var(--negative);
  --danger: var(--error);
  --serif: var(--editorial);
  --sans: var(--body);
  --mono: var(--utility);
  --r-btn: var(--r-control);

  background: var(--night);
  color: var(--snow);
  font-family: var(--body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}
/* Tabular figures belong on columns of numbers only, never on prose: in
   Schibsted Grotesk the tnum feature widens the comma and full stop to a full
   digit advance so decimals line up, which reads as a space before every comma
   and period in running text. */
.sl-ticker,
.sl-conv,
.sl-ev,
.sl-scale-vals,
.sl-now,
.sl-tile-v,
.sl-row-d,
.sl-wall-conv,
.sl-wg-top b,
.sl-ask-fact,
.sl-loop-shifts,
.sl-loop-verdict,
.sl-loop-chart-value {
  font-variant-numeric: tabular-nums;
}
.sl *,
.sl *::before,
.sl *::after {
  box-sizing: border-box;
}
.sl a {
  color: inherit;
  text-decoration: none;
}
.sl :focus-visible {
  outline: 2px solid var(--snow);
  outline-offset: 3px;
  border-radius: 4px;
}
.sl-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 30;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border-radius: 8px;
  background: var(--snow);
  color: #08090a !important;
  font-size: 0.86rem;
  font-weight: 600;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.2s var(--ease);
}
.sl-skip:focus {
  transform: translateY(0);
}

.sl-wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 3.5vw, 2rem);
}
/* section dividers run the full width of the page, edge to edge */
.sl-divider {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* ── type roles ── */
.sl-display {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: -0.055em;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.sl-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--type-section);
  line-height: var(--leading-display);
  letter-spacing: -0.052em;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
  color: var(--snow);
}
.sl-h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.sl-support {
  margin: 1.1rem auto 0;
  font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.55;
  max-width: var(--measure);
  text-align: center;
  color: var(--snow-soft);
}
.sl-mono {
  font-family: var(--utility);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── chapters: one canvas, centered heads, hairline pacing ── */
.sl-chapter {
  padding: var(--sp-chapter) 0;
  background: var(--canvas);
}
.sl-chapter-head {
  max-width: 720px;
  margin: 0 auto clamp(2.2rem, 5vw, 3.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ── CTAs (Origin: white block button, 8px, mono) ── */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: none;
  cursor: pointer;
  border-radius: var(--r-btn);
  padding: 12px 18px;
  background: var(--snow);
  color: var(--night);
  font-family: var(--utility);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.sl a.sl-btn,
.sl button.sl-btn {
  color: var(--night);
}
.sl-btn:hover {
  opacity: 0.85;
}
.sl-btn:active {
  transform: translateY(1px);
}
.sl-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.sl-btn--ghost,
.sl a.sl-btn--ghost,
.sl button.sl-btn--ghost {
  background: transparent;
  color: var(--snow);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sl-btn--ghost:hover {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.sl-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--snow-soft);
  transition: color 0.18s var(--ease);
}
.sl-arrowlink:hover {
  color: var(--snow);
}

/* ── nav: quiet, floating over the hero ── */
/* floating frosted pill, inset from the viewport edges */
.sl-nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1240px;
  z-index: 50;
  background: rgba(12, 13, 16, 0.38);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-radius: 10px;
  transition: background 0.25s var(--ease);
}
.sl-nav.scrolled {
  background: rgba(14, 14, 17, 0.55);
}
/* Origin nav zones: logo left · links dead center · CTA right */
.sl-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 58px;
  padding: 0 10px 0 22px;
}
.sl-nav .sl-nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sl-nav-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sl-nav .sl-btn {
  padding: 10px 18px;
}
.sl-brand {
  display: inline-flex;
  align-items: center;
}
.sl-brand img {
  height: 24px;
  width: auto;
  object-fit: contain;
  display: block;
}
.sl-nav-links {
  display: flex;
  gap: 1.8rem;
}
.sl-nav-links a {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--snow-soft);
  transition: color 0.18s var(--ease);
}
.sl-nav-links a:hover {
  color: var(--snow);
}
.sl-nav-mob {
  display: none;
  position: relative;
}
.sl-nav-mob > summary {
  list-style: none;
  display: inline-flex;
  padding: 0.5rem;
  border-radius: var(--r-btn);
  cursor: pointer;
}
.sl-nav-mob > summary::-webkit-details-marker {
  display: none;
}
.sl-nav-mob[open] > summary {
  background: rgba(255, 255, 255, 0.08);
}
.sl-nav-mob-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.8);
  padding: 0.45rem;
  display: grid;
}
.sl-nav-mob-menu a {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--snow-soft);
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
}
.sl-nav-mob-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--snow);
}
@media (max-width: 880px) {
  .sl-nav-links {
    display: none;
  }
  .sl-nav-mob {
    display: inline-flex;
  }
}
@media (max-width: 400px) {
  .sl-nav .sl-btn {
    display: none;
  }
}

/* ── hero: full-viewport video stage, centered copy (Origin H1 grammar) ── */
.sl-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sl-hero-media {
  position: absolute;
  inset: 0;
  will-change: opacity;
}
.sl-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sl-hero-scrim {
  position: absolute;
  inset: 0;
  /* Keep the film ungraded; only bridge the final edge into the page canvas. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 88%,
    rgba(10, 10, 12, 0.08) 92%,
    rgba(10, 10, 12, 0.48) 98%,
    var(--night) 100%
  );
}
.sl-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 7rem clamp(1.1rem, 4vw, 2rem) 5.5rem;
  max-width: 860px;
}
@keyframes sl-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sl-hero-inner > * {
  animation: sl-rise 0.9s var(--ease) both;
}
.sl-hero-inner > *:nth-child(2) {
  animation-delay: 0.08s;
}
.sl-hero-inner > *:nth-child(3) {
  animation-delay: 0.16s;
}
.sl-hero-inner > *:nth-child(4) {
  animation-delay: 0.24s;
}
.sl-hero .sl-display {
  max-width: 9.5ch;
  font-size: var(--type-display);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.sl-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2rem;
}

/* Lithos-inspired dual-image reveal, adapted to Steady's existing content and
   chrome. The second image is exposed by a soft GPU-composited cursor mask. */
.sl-hero {
  height: 100dvh;
  min-height: 100dvh;
  background: #050607;
}
.sl-hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050607;
  cursor: crosshair;
}
.sl-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
}
.sl-hero-base {
  animation: sl-hero-zoom 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sl-hero-reveal {
  --spot-x: -520px;
  --spot-y: -520px;
  --spot-opacity: 0;
  position: absolute;
  inset: 0;
  opacity: var(--spot-opacity);
  transition: opacity 320ms ease;
  -webkit-mask-image: radial-gradient(
    circle 260px at var(--spot-x) var(--spot-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 1) 40%,
    rgb(0 0 0 / 0.75) 60%,
    rgb(0 0 0 / 0.4) 75%,
    rgb(0 0 0 / 0.12) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 260px at var(--spot-x) var(--spot-y),
    rgb(0 0 0 / 1) 0%,
    rgb(0 0 0 / 1) 40%,
    rgb(0 0 0 / 0.75) 60%,
    rgb(0 0 0 / 0.4) 75%,
    rgb(0 0 0 / 0.12) 88%,
    transparent 100%
  );
  will-change: mask-image, opacity;
}
@keyframes sl-hero-zoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}
@keyframes sl-hero-reveal-copy {
  from {
    opacity: 0;
    transform: translate(-50%, 28px);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
    filter: blur(0);
  }
}
.sl-hero-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  pointer-events: none;
}
.sl-hero-inner > .sl-display {
  position: absolute;
  top: 14%;
  left: 50%;
  width: min(calc(100% - 2.5rem), 1100px);
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  animation: sl-hero-reveal-copy 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
.sl-hero-inner > .sl-display span {
  display: block;
}
.sl-hero-lower {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(2.5rem, 6vh, 4.5rem);
  left: clamp(1.5rem, 4vw, 4rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  animation: sl-rise 1s var(--ease) 0.72s both;
}
.sl-hero-lower .sl-support {
  max-width: 34ch;
  margin: 0;
  text-align: left;
  font-size: 0.94rem;
  line-height: 1.55;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.72);
}
.sl-hero-lower .sl-hero-ctas {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
  pointer-events: auto;
}

@media (hover: none), (pointer: coarse) {
  .sl-hero-reveal {
    --spot-x: 68%;
    --spot-y: 56%;
    --spot-opacity: 0.78;
  }
  .sl-hero-visual {
    cursor: default;
  }
}

@media (max-width: 700px) {
  .sl-hero-inner > .sl-display {
    top: 17%;
    width: calc(100% - 2rem);
    font-size: clamp(3.25rem, 15vw, 5rem);
  }
  .sl-hero-lower {
    right: 1.25rem;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    left: 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .sl-hero-lower .sl-support {
    max-width: 38ch;
    font-size: 0.84rem;
  }
  .sl-hero-lower .sl-hero-ctas {
    justify-content: flex-start;
    width: 100%;
  }
  .sl-hero-lower .sl-btn {
    flex: 1 1 auto;
  }
  .sl-hero-reveal {
    -webkit-mask-image: radial-gradient(
      circle 190px at var(--spot-x) var(--spot-y),
      #000 0 40%, rgb(0 0 0 / 0.72) 62%, rgb(0 0 0 / 0.18) 88%, transparent 100%
    );
    mask-image: radial-gradient(
      circle 190px at var(--spot-x) var(--spot-y),
      #000 0 40%, rgb(0 0 0 / 0.72) 62%, rgb(0 0 0 / 0.18) 88%, transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-hero-base,
  .sl-hero-inner > .sl-display,
  .sl-hero-lower {
    animation: none;
  }
  .sl-hero-reveal {
    transition: none;
  }
}

/* The first chapter defines the product before the page asks the live proof to
   carry the story. Its scale mirrors the hero while the black canvas stays
   uninterrupted. */
.sl-living-intro {
  min-height: 86svh;
  display: grid;
  place-items: center;
  padding: clamp(7rem, 13vh, 10rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--canvas);
}
.sl-living-intro-inner {
  width: min(100%, 1040px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sl-living-intro h2 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6.8vw, 6.5rem);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.sl-living-definition {
  max-width: 760px;
  margin: clamp(2.5rem, 5vh, 4rem) 0 0;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  letter-spacing: -0.025em;
  color: var(--ink-muted);
  text-wrap: balance;
}
.sl-living-app {
  max-width: 600px;
  margin: 1.5rem 0 0;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--ink-faint);
  text-wrap: balance;
}

@media (max-width: 700px) {
  .sl-living-intro {
    min-height: 78svh;
    padding-block: 6rem;
  }
  .sl-living-definition {
    margin-top: 2rem;
  }
}

/* ── sources strip: sliding wordmarks (built-on, not fake backed-by) ── */
.sl-strip {
  padding: 2.4rem 0 2.6rem;
  overflow: hidden;
}
.sl-strip-label {
  display: block;
  text-align: center;
  margin-bottom: 1.4rem;
  color: var(--snow-faint);
}
.sl-strip-mask {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sl-strip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: sl-slide 38s linear infinite;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.sl-strip-group {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  gap: 3.2rem;
  min-width: 100vw;
  padding: 0 1.6rem;
}
@keyframes sl-slide {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.sl-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: var(--snow-faint);
}
.sl-strip-item img {
  height: 18px;
  width: auto;
  opacity: 0.75;
}

/* ── ask: Steady AI exchange grounded in the living model ── */
.sl-ask {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}
.sl-ask-q {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--snow);
  animation: sl-answer-in 0.55s var(--ease) both;
}
.sl-ask-q svg {
  margin-left: auto;
  flex: none;
  color: var(--snow-faint);
}
.sl-ask-a {
  margin-top: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  animation: sl-answer-in 0.65s var(--ease) 80ms both;
}
.sl-ask-a > p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--snow);
}
.sl-ask-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.sl-ask-fact {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-ask-fact b {
  color: var(--snow);
  font-weight: 600;
}
@keyframes sl-answer-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Gemini-vibes shell: hairline at rest, rotating color sweep while searching */
.sl-ai-shell {
  position: relative;
  border-radius: 999px;
  padding: 1.5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.11);
}
.sl-ai-shell::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #4b87ff 55deg,
    #9d6bff 120deg,
    #ff7ad9 175deg,
    #6bd3ff 235deg,
    transparent 300deg
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  animation: sl-ai-sweep 2.4s linear infinite;
}
.sl-ai-shell.is-submitting::before {
  opacity: 1;
}
@keyframes sl-ai-sweep {
  to { transform: rotate(360deg); }
}
.sl-ai-composer {
  position: relative;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 0.85rem 0.75rem 1.3rem;
  border-radius: 999px;
  background: #14161c;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
  transition: background 0.35s var(--ease);
}
/* attachment affordance on the left of the composer, Gemini-style */
.sl-ai-plus {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: rgba(246, 246, 242, 0.5);
  transition: color 0.3s var(--ease);
}
.sl-ai-shell.is-submitting .sl-ai-plus {
  color: rgba(246, 246, 242, 0.75);
}
.sl-ai-input {
  min-width: 0;
  color: var(--snow);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 500;
  line-height: 1.35;
}
.sl-ai-caret,
.sl-ai-stream-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: rgba(246, 246, 242, 0.82);
  animation: sl-ai-blink 0.8s steps(1, end) infinite;
}
.sl-ai-send {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f3f3ef;
  color: #0e1014;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.sl-ai-response-stage {
  min-height: 250px;
  margin-top: 0.8rem;
}
.sl-ai-response-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: rgba(246, 246, 242, 0.22);
  font-size: 0.78rem;
}
/* no panel, just a quiet loader while the model reads */
.sl-ai-thinking {
  min-height: 150px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem;
  color: var(--snow-soft);
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.sl-ai-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sl-ai-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8dcfff;
  animation: sl-ai-think 1.25s ease-in-out infinite;
}
.sl-ai-dots i:nth-child(2) {
  animation-delay: 0.16s;
}
.sl-ai-dots i:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes sl-ai-think {
  0%,
  100% {
    opacity: 0.22;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}
/* matches the inner demo blocks on the outcome cards (.sl-demo-core) */
.sl-ai-answer {
  position: relative;
  min-height: 228px;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(7, 9, 14, 0.56);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(82%);
  -webkit-backdrop-filter: blur(22px) saturate(82%);
}
.sl-ai-answer-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--snow-faint);
  font: 500 0.55rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-ai-answer-head strong {
  color: rgba(246, 246, 242, 0.88);
  font-weight: 600;
}
.sl-ai-answer-head > i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(246, 246, 242, 0.28);
}
.sl-ai-answer-logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.95;
}
.sl-ai-answer > p {
  max-width: 66ch;
  min-height: 4.8em;
  margin: 1.15rem 0 0;
  color: rgba(246, 246, 242, 0.92);
  font-size: clamp(0.94rem, 1.3vw, 1.04rem);
  line-height: 1.62;
}
.sl-ai-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.sl-ai-sources span {
  padding: 0 1.1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--snow-soft);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}
.sl-ai-sources span:first-child {
  padding-left: 0;
  border-left: 0;
}
@keyframes sl-ai-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes sl-ai-sweep-legacy {
  to { transform: rotate(360deg); }
}

/* ——— live forecast: a full-color product chapter with an inspectable flow ——— */
.sl-chapter-forecast {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5.5rem, 10vw, 9rem);
  background: var(--canvas);
}
.sl-chapter-forecast > .sl-wrap {
  max-width: 980px;
}
.sl-chapter-forecast .sl-chapter-head {
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.sl-intro .sl-h2 {
  max-width: 17ch;
  margin-inline: auto;
  font-family: var(--editorial);
  font-weight: 400;
  font-size: clamp(2.7rem, 5.2vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--snow-soft);
}
.sl-intro .sl-h2 b {
  font-weight: 400;
  color: var(--snow);
}

/* ── product stage: real model state ── */
.sl-stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-stage);
  padding: clamp(1.3rem, 2.6vw, 2rem);
}
.sl-stage-bar {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.sl-ticker {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.sl-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--snow-faint);
}
.sl-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.sl-live.off i {
  background: rgba(250, 250, 250, 0.35);
}
.sl-stance {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.26rem 0.7rem;
  border-radius: var(--r-btn);
}
.sl-stance.bullish {
  color: var(--green);
  background: rgba(53, 222, 143, 0.12);
}
.sl-stance.bearish {
  color: var(--red);
  background: rgba(246, 86, 106, 0.14);
}
.sl-stance.neutral {
  color: var(--snow-soft);
  background: rgba(250, 250, 250, 0.1);
}
.sl-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
  padding-top: 1.2rem;
}

/* ── hierarchy v4: proof first, then outcomes ── */
.sl-live-proof {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
}
.sl-live-proof .sl-wrap {
  max-width: 1060px;
}
.sl-live-proof .sl-stage {
  background: linear-gradient(145deg, #18181b, #101012 64%, #09090b);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.32);
}
.sl-proof-revision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin: 1px clamp(0.8rem, 3vw, 2rem) 0;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--line);
}
.sl-proof-revision p {
  max-width: 68ch;
  margin: 0;
  color: var(--snow-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}
.sl-proof-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--snow-faint);
  white-space: nowrap;
}
.sl-proof-meta .sl-arrowlink {
  font-size: 0.66rem;
  color: var(--snow);
}

/* three panels abreast on a wider measure than the reading column. The grid is
   wider than .sl-wrap, so symmetric negative margins keep it centred rather
   than letting it overflow to one side. */
.sl-outcome-grid {
  --grid-w: min(100vw - clamp(2rem, 5vw, 4rem), 1560px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.4vw, 1.25rem);
  width: var(--grid-w);
  margin-inline: calc((100% - var(--grid-w)) / 2);
}
.sl-outcome {
  position: relative;
  min-height: clamp(620px, 58vw, 720px);
  padding: clamp(2.5rem, 3.8vw, 3.6rem) clamp(1.5rem, 3.3vw, 3.25rem) clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.sl-outcome::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 1;
}
.sl-outcome-change::before {
  background: linear-gradient(156deg, #1b1b1e 0%, #121214 52%, #09090b 100%);
}
.sl-outcome-why::before {
  background: linear-gradient(155deg, #19191c 0%, #111113 52%, #08080a 100%);
}
.sl-outcome-next::before {
  background: linear-gradient(155deg, #18181a 0%, #101012 52%, #080809 100%);
}
.sl-outcome h3,
.sl-ask-intro h3 {
  margin: 0;
  font-family: var(--editorial);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sl-outcome-copy {
  position: relative;
  z-index: 2;
  text-align: center;
}
.sl-outcome-copy > p {
  max-width: 42ch;
  margin: 1rem auto 0;
  color: var(--snow-soft);
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.55;
}
.sl-outcome-demo {
  width: min(100%, 420px);
  margin: clamp(2.75rem, 5vw, 4.25rem) auto 0;
  padding: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
  color: rgba(246, 246, 242, 0.82);
  font-family: var(--body);
  transform: translateZ(0);
}
.sl-demo-core {
  min-height: 350px;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(7, 9, 14, 0.56);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(82%);
  -webkit-backdrop-filter: blur(22px) saturate(82%);
}
.sl-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-demo-bar b {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(246, 246, 242, 0.68);
  font-weight: 500;
}
.sl-demo-bar b > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(66, 201, 139, 0.72);
}
.sl-demo-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 1rem 0;
}
.sl-demo-event small,
.sl-impact-source small,
.sl-watch-event small {
  display: block;
  margin-bottom: 0.18rem;
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-demo-event strong,
.sl-impact-source strong,
.sl-watch-event strong {
  display: block;
  color: var(--snow);
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 600;
}
.sl-demo-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86c8ff;
  animation: sl-demo-pulse 2.4s ease-out infinite;
}
.sl-demo-source {
  padding: 0.2rem 0.38rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--snow-soft);
}
.sl-diff-state {
  position: relative;
  padding: 0.8rem 0.85rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}
.sl-diff-state > span {
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-diff-state > b {
  position: absolute;
  top: 0.62rem;
  right: 0.75rem;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--snow);
}
.sl-diff-state p,
.sl-impact-read {
  margin: 0.48rem 0 0;
  color: var(--snow-soft);
  font-size: 0.72rem;
  line-height: 1.45;
}
.sl-diff-state.is-before {
  opacity: 0.56;
}
.sl-diff-state.is-after {
  background: rgba(90, 153, 204, 0.11);
  box-shadow: inset 0 0 0 1px rgba(124, 190, 243, 0.14);
}
.sl-diff-state em {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.18rem 0.35rem;
  border-radius: 4px;
  background: rgba(231, 104, 118, 0.12);
  color: #ed9aa4;
  font-family: var(--mono);
  font-size: 0.46rem;
  font-style: normal;
  letter-spacing: 0.07em;
}
.sl-diff-shift {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 34px;
  color: var(--snow-faint);
  font-family: var(--mono);
  font-size: 0.45rem;
  letter-spacing: 0.08em;
}
.sl-diff-shift i {
  position: relative;
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.sl-diff-shift i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #8bc8f6, transparent);
  transform: translateX(-100%);
  animation: sl-demo-scan 3.2s var(--ease) infinite;
}
.sl-impact-source {
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 10px;
  background: rgba(87, 135, 177, 0.12);
  box-shadow: inset 0 0 0 1px rgba(126, 180, 224, 0.12);
}
.sl-impact-source > span {
  display: block;
  margin-top: 0.45rem;
  color: var(--snow-faint);
  font-size: 0.62rem;
}
.sl-impact-line {
  position: relative;
  width: 1px;
  height: 28px;
  margin-left: 1.25rem;
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
}
.sl-impact-line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #86c8ff, transparent);
  transform: translateY(-100%);
  animation: sl-demo-fall 2.8s ease-in-out infinite;
}
.sl-impact-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}
.sl-impact-list > div {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.72rem 0.8rem;
  background: rgba(8, 10, 13, 0.86);
  font-size: 0.68rem;
}
.sl-impact-list b {
  color: var(--snow);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  white-space: nowrap;
}
.sl-impact-list b.up-risk {
  color: #ed9aa4;
}
.sl-impact-list b i {
  padding: 0 0.18rem;
  color: var(--snow-faint);
  font-style: normal;
}
.sl-impact-read {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding-top: 0.85rem;
}
.sl-impact-read > span {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--green);
}
.sl-watch-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 0;
}
.sl-watch-date {
  width: 46px;
  height: 50px;
  border-radius: 9px;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(84, 159, 118, 0.14);
  box-shadow: inset 0 0 0 1px rgba(91, 191, 137, 0.14);
}
.sl-watch-date strong {
  color: var(--snow);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
}
.sl-watch-date span {
  margin-top: 0.18rem;
  color: var(--snow-faint);
  font-family: var(--mono);
  font-size: 0.45rem;
  letter-spacing: 0.1em;
}
.sl-watch-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.sl-watch-metrics > div {
  padding: 0.7rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
}
.sl-watch-metrics span,
.sl-watch-metrics strong {
  display: block;
}
.sl-watch-metrics span {
  color: var(--snow-faint);
  font-size: 0.56rem;
}
.sl-watch-metrics strong {
  margin-top: 0.22rem;
  color: var(--snow);
  font-family: var(--mono);
  font-size: 0.76rem;
}
.sl-watch-signals {
  display: grid;
  margin-top: 0.6rem;
}
.sl-watch-signals > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.48rem;
  align-items: center;
  padding: 0.58rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--snow-soft);
  font-size: 0.61rem;
}
.sl-watch-signals > div > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}
.sl-watch-signals > div > i.positive {
  background: var(--green);
  box-shadow: 0 0 8px rgba(66, 201, 139, 0.55);
}
.sl-watch-signals b {
  color: var(--snow-faint);
  font-family: var(--mono);
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.sl-watch-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.45rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--snow-soft);
  font-size: 0.62rem;
}
.sl-watch-alert i {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: rgba(66, 201, 139, 0.32);
}
.sl-watch-alert i::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
@keyframes sl-demo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(134, 200, 255, 0); }
  35% { box-shadow: 0 0 0 7px rgba(134, 200, 255, 0.11); }
}
@keyframes sl-demo-scan {
  0%, 18% { transform: translateX(-100%); }
  70%, 100% { transform: translateX(100%); }
}
@keyframes sl-demo-fall {
  0%, 15% { transform: translateY(-100%); }
  75%, 100% { transform: translateY(100%); }
}

/* Premium outcome stories: one clear product moment per card. */
.sl-demo-bar {
  padding-bottom: 0.9rem;
  font-size: 0.57rem;
  letter-spacing: 0.14em;
}
.sl-demo-event {
  gap: 0.8rem;
  padding: 1.15rem 0 1rem;
}
.sl-demo-event small,
.sl-impact-source small,
.sl-watch-event small {
  font-size: 0.52rem;
  letter-spacing: 0.13em;
}
.sl-demo-event strong,
.sl-impact-source strong,
.sl-watch-event strong {
  font-size: 0.92rem;
}
.sl-demo-pulse {
  width: 9px;
  height: 9px;
}
.sl-demo-source {
  padding: 0.28rem 0.48rem;
  border-radius: 7px;
  font-size: 0.55rem;
}
.sl-evidence-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.sl-evidence-line small,
.sl-evidence-line strong { display: block; }
.sl-evidence-line small {
  margin-bottom: 0.45rem;
  color: var(--snow-faint);
  font: 500 0.5rem/1 var(--mono);
  letter-spacing: 0.13em;
}
.sl-evidence-line strong {
  color: var(--snow);
  font-size: 0.96rem;
  font-weight: 550;
  line-height: 1.3;
}
.sl-evidence-line > span {
  flex: 0 0 auto;
  color: var(--snow-faint);
  font: 500 0.52rem/1 var(--mono);
  letter-spacing: 0.08em;
}
.sl-revision-compare {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 1.65rem;
}
.sl-revision-state {
  display: grid;
  gap: 0.25rem;
}
.sl-revision-state span {
  color: var(--snow-faint);
  font: 500 0.5rem/1 var(--mono);
  letter-spacing: 0.13em;
}
.sl-revision-state strong {
  color: var(--snow);
  font: 400 2.75rem/1 var(--body);
  letter-spacing: -0.05em;
}
.sl-revision-state.is-before { opacity: 0.38; }
.sl-revision-state.is-after strong { color: #a9dbff; }
.sl-revision-path {
  position: relative;
  height: 36px;
  overflow: hidden;
}
.sl-revision-path::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.sl-revision-path i {
  position: absolute;
  top: 14px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9dbff;
  box-shadow: 0 0 14px rgba(133, 205, 255, 0.8);
  animation: sl-demo-travel 3.8s var(--ease) infinite;
}
.sl-revision-path em {
  position: absolute;
  inset: auto 0 0;
  text-align: center;
  color: var(--snow-faint);
  font: 500 0.44rem/1 var(--mono);
  letter-spacing: 0.1em;
  font-style: normal;
}
.sl-demo-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  color: var(--snow-soft);
  font-size: 0.76rem;
  line-height: 1.55;
}
.sl-demo-summary > span {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(66, 201, 139, 0.35);
}
.sl-impact-source {
  margin-top: 0;
  padding: 1.45rem 0 1.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sl-impact-source strong { margin-top: 0.4rem; }
.sl-impact-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
.sl-impact-list > div {
  display: grid;
  justify-content: initial;
  gap: 0.5rem;
  padding: 1.3rem 0.9rem;
  border-right: 1px solid rgba(255, 255, 255, 0.075);
  background: transparent;
  font-size: 0.68rem;
}
.sl-impact-list > div:first-child { padding-left: 0; }
.sl-impact-list > div:last-child {
  padding-right: 0;
  border-right: 0;
}
.sl-impact-list span {
  color: var(--snow-faint);
  font: 500 0.48rem/1 var(--mono);
  letter-spacing: 0.11em;
}
.sl-impact-list b {
  color: var(--snow);
  font: 500 1.15rem/1.1 var(--body);
}
.sl-impact-list small {
  color: var(--snow-faint);
  font-size: 0.58rem;
}
.sl-impact-demo .sl-demo-summary { margin-top: 0.15rem; }
/* the third panel is now a peer in the row, not a full-width footer */
.sl-outcome-next {
  padding-inline: clamp(1.5rem, 3.3vw, 3.25rem);
}
.sl-outcome-next .sl-outcome-copy {
  max-width: none;
  margin-inline: auto;
}
.sl-outcome-next .sl-outcome-demo {
  width: min(100%, 420px);
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
}
/* stacked: this panel is a third of the row now, not a full-width stage */
.sl-watch-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  align-items: center;
  padding: clamp(1.4rem, 2.5vw, 2.25rem) 0;
}
.sl-watch-event {
  gap: 1rem;
  padding: 0;
}
.sl-watch-date {
  width: 64px;
  height: 68px;
  border-radius: 16px;
}
.sl-watch-date strong { font-size: 1.4rem; }
.sl-watch-date span { font-size: 0.5rem; }
.sl-watch-metrics { gap: 0.65rem; }
.sl-watch-metrics > div {
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0;
  background: transparent;
}
.sl-watch-metrics span { font-size: 0.62rem; }
.sl-watch-metrics strong { font-size: 0.92rem; }
.sl-watch-signals { margin-top: 0; }
.sl-watch-signals > div {
  padding: 0.82rem 0;
  font-size: 0.7rem;
}
.sl-watch-alert {
  margin-top: 0;
  justify-content: flex-start;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0;
  background: transparent;
  font-size: 0.7rem;
}
.sl-watch-alert i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(66, 201, 139, 0.4);
}
.sl-watch-alert i::after { display: none; }
.sl-watch-alert b {
  margin-left: auto;
  color: var(--snow-faint);
  font: 500 0.5rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@keyframes sl-demo-travel {
  0%, 14% { left: 0; opacity: 0; }
  22% { opacity: 1; }
  72% { opacity: 1; }
  82%, 100% { left: calc(100% - 7px); opacity: 0; }
}
/* the ask zone, Gemini-shaped: mark, one line of copy, the bar, and a soft
   light behind the whole thing */
.sl-ask-zone {
  position: relative;
  margin: clamp(5rem, 10vw, 8rem) 0 0;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}
/* one blue light rising off the bottom edge: a true radial bloom from the
   bottom centre, with two corner sources lifting the sides. It runs down past
   the section padding so it ends on the divider, not on a hard edge. It is
   dark while the question types and ignites when the model answers. */
/* the section owns the light and clips it, so it can never bleed past the
   divider into the next section */
.sl-outcomes {
  position: relative;
  overflow: hidden;
}
/* pinned to the section's own left, right and bottom edges: those three never
   move. Only opacity and brightness animate, never geometry. */
.sl-ask-glow {
  display: none;
}
/* the model is reading: the light starts to come up */
.sl-outcomes.is-warming .sl-ask-glow {
  opacity: 0.42;
}
/* the answer is arriving: full bloom, breathing on brightness alone */
.sl-outcomes.is-live .sl-ask-glow {
  opacity: 1;
  animation: sl-glow-breathe 7s ease-in-out 0.8s infinite;
}
@keyframes sl-glow-breathe {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.22);
  }
}
.sl-ask-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto 2.4rem;
  max-width: 720px;
}
.sl-ask-mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-bottom: 1.4rem;
}
.sl-ask-intro h3 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.sl-ask-intro p {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  color: var(--snow-soft);
  font-size: 1rem;
  line-height: 1.6;
}
/* sits under the exchange, clear of the composer's send button */
.sl-card-scenario {
  min-width: 0;
}
.sl-risk {
  margin-top: 1rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.sl-risk .sl-cite {
  margin: 0 0.55rem 0 0;
}
.sl-trust {
  background: var(--canvas);
}
.sl-trust-card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.sl-trust-card .sl-deep-detail {
  margin-top: 0.85rem;
}
.sl-thesis {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--snow);
}
.sl-conv {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-conv b {
  color: var(--snow);
  font-weight: 600;
}
.sl-claimrow {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--snow-soft);
}
.sl-cite {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  padding: 0.13rem 0.5rem;
  border-radius: var(--r-btn);
  background: rgba(250, 250, 250, 0.1);
  color: var(--snow-soft);
  white-space: nowrap;
}
.sl-skel {
  height: 10px;
  border-radius: 999px;
  background: rgba(250, 250, 250, 0.12);
  margin-top: 0.8rem;
}
.sl-skel.w2 {
  width: 70%;
}

/* computed range scale */
.sl-scale-lbl {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
  margin-bottom: 0.5rem;
}
.sl-scale-bar {
  position: relative;
  margin-top: 1.7rem;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 86, 106, 0.5), rgba(250, 250, 250, 0.22) 45%, rgba(53, 222, 143, 0.55));
}
.sl-needle {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 16px;
  background: var(--snow);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: left 0.9s var(--ease);
}
.sl-now {
  position: absolute;
  top: -1.45rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--snow);
  white-space: nowrap;
}
.sl-scale-vals {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--snow-soft);
}
.sl-ev {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  color: var(--snow-faint);
}
.sl-ev b {
  color: var(--snow);
}

/* ── signature: scattered evidence converges into the model ── */
.sl-chip {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-btn);
  background: var(--panel);
  color: var(--snow-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sl-converge {
  position: relative;
}
.sl-converge-field {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
  max-width: 720px;
  margin: 0 auto;
}
.sl-converge .sl-chip {
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.sl-converge:not(.is-converged) .sl-chip {
  transform: translate(var(--cx, 0), var(--cy, 0)) rotate(var(--cr, 0deg));
  opacity: 0.6;
}
.sl-converge.is-converged .sl-chip {
  transform: none;
  opacity: 1;
}
.sl-converge-model {
  max-width: 760px;
  margin: 1.4rem auto 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease) 0.75s, transform 0.7s var(--ease) 0.75s;
}
.sl-converge.is-converged .sl-converge-model {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .sl-converge:not(.is-converged) .sl-chip {
    transform: none;
    opacity: 1;
  }
  .sl-converge-model {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sl-hero-inner > * {
    animation: none;
  }
  .sl-needle {
    transition: none;
  }
}

/* ── capability cards (Origin boxed sections: title inside the card) ── */
.sl-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem);
}
.sl-card {
  background: var(--surface-card);
  border: 0;
  border-radius: var(--r-stage);
  box-shadow: none;
  padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem);
}
.sl-card-title {
  font-family: var(--editorial);
  font-weight: 400;
  font-size: clamp(2.15rem, 3.35vw, 3rem);
  line-height: 0.94;
  letter-spacing: -0.018em;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.sl-card-title em {
  font: inherit;
  font-style: italic;
}
.sl-card-sub {
  margin: 0.9rem auto 2rem;
  max-width: 40ch;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--snow-soft);
}
.sl-card .sl-panel {
  background: var(--surface-inset);
  border: 0;
  box-shadow: none;
}
.sl-card .sl-tile {
  background: var(--surface-inset);
  border: 0;
  box-shadow: none;
}
.sl-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 1.2rem 1.3rem;
}
.sl-panel-k {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--snow-faint);
}
.sl-panel p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--snow-soft);
}
.sl-rowlist {
  display: grid;
}
.sl-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
}
.sl-row:first-child {
  border-top: none;
  padding-top: 0;
}
.sl-row-t {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--snow-soft);
  min-width: 0;
}
.sl-row-t strong {
  color: var(--snow);
  font-weight: 700;
}
.sl-row-d {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--snow-faint);
  white-space: nowrap;
}
.sl-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.sl-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 1rem 1.1rem;
}
.sl-tile-k {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--snow-faint);
}
.sl-tile-v {
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.sl-deep-detail {
  max-width: 640px;
  margin: 0.7rem 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 1.2rem 1.3rem;
}
.sl-deep-detail p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--snow);
}

/* ── two-col chapter (Origin two-col-section) ── */
.sl-twocol {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.sl-twocol-copy .sl-h3,
.sl-twocol-copy .sl-card-title {
  margin-bottom: 0.8rem;
}
.sl-twocol-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--snow-soft);
  max-width: 44ch;
}
.sl-fresh {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
  margin-top: 1.2rem;
}
.sl-fresh b {
  color: var(--green);
  font-weight: 600;
}

/* ── memory timeline ── */
.sl-timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 1.5rem;
}
.sl-timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.sl-ms {
  position: relative;
  padding: 0.7rem 0;
}
.sl-ms::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 1.15rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--night);
  box-shadow: inset 0 0 0 1.6px rgba(250, 250, 250, 0.5);
}
.sl-ms.done::before {
  background: var(--green);
  box-shadow: none;
}
.sl-ms-t {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--snow);
}
.sl-ms-d {
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--snow-faint);
}
.sl-ms-s {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-ms.done .sl-ms-s {
  color: var(--green);
}
.sl-memory-note {
  margin: 1.8rem auto 0;
  max-width: 56ch;
  font-size: 0.98rem;
  color: var(--snow-soft);
  text-align: center;
}

/* ── footer-hero: repeat capture (Origin footer-hero) ── */
/* immersive footer scene */
.sl-footer-scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: clamp(0.65rem, 1.25vw, 1rem);
}
.sl-footer-video,
.sl-footer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sl-footer-video {
  z-index: -2;
  object-fit: cover;
}
.sl-footer-scrim {
  z-index: -1;
  background:
    linear-gradient(180deg, var(--canvas) 0%, rgba(9, 10, 11, 0.38) 20%, rgba(9, 10, 11, 0.28) 66%, rgba(9, 10, 11, 0.58) 100%),
    radial-gradient(80% 70% at 50% 35%, transparent 0%, rgba(9, 10, 11, 0.28) 100%);
}
.sl-close {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  text-align: center;
  padding: clamp(4.5rem, 8vh, 6rem) 0 clamp(1.75rem, 3.5vh, 2.75rem);
}
.sl-close > .sl-wrap {
  width: 100%;
}
.sl-close .sl-display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.055em;
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.42);
}
.sl-close-link {
  margin: 1.6rem 0 0;
}
.sl-wait {
  margin: 2rem auto 0;
  max-width: 460px;
}
.sl-wait-row {
  display: flex;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0.35rem 0.35rem 0.35rem 1rem;
}
.sl-wait-row:focus-within {
  border-color: rgba(255, 255, 255, 0.4);
}
.sl-wait input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--snow);
}
.sl-wait input::placeholder {
  color: var(--snow-faint);
}
.sl-wait-fine {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--snow-faint);
  text-align: center;
}
.sl-wait-msg {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  text-align: center;
}
.sl-wait-msg.ok {
  color: var(--green);
}
.sl-wait-msg.err {
  color: var(--danger);
}

/* ── footer ── */
/* liquid glass: adapted from the supplied footer brief */
.sl-liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.sl-liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.sl-foot {
  width: calc(100% - clamp(1.5rem, 5vw, 4rem));
  max-width: var(--container-wide);
  margin: 0 auto;
  border-radius: 24px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--snow-soft);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out 0.4s, transform 1s ease-out 0.4s;
}
.sl-foot.is-visible {
  opacity: 1;
  transform: none;
}
.sl-foot-top {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin-bottom: 2.5rem;
}
.sl-foot-brand {
  display: inline-flex;
  align-items: center;
}
.sl-foot-brand img {
  display: block;
  height: 26px;
  width: auto;
}
.sl-foot-intro p {
  max-width: 38ch;
  margin: 1.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--snow-soft);
}
.sl-foot-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.sl-foot-links > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.sl-foot-links h3 {
  margin: 0 0 0.7rem;
  font-family: var(--utility);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--snow);
}
.sl-foot-links a {
  font-size: 0.8rem;
  color: var(--snow-soft);
  transition: color 0.2s var(--ease);
}
.sl-foot-links a:hover {
  color: var(--snow);
}
.sl-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--utility);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--snow-faint);
}
.sl-foot-bottom p {
  margin: 0;
}
.sl-foot-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--snow-soft);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.sl-foot-bottom a:hover {
  color: var(--snow);
}

/* ── responsive ── */
@media (max-width: 960px) {
  .sl-stage-grid,
  .sl-cols,
  .sl-twocol {
    grid-template-columns: 1fr;
  }
  .sl-outcome-grid {
    grid-template-columns: 1fr;
    width: 100%;
    margin-inline: 0;
  }
  .sl-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sl-deep-detail {
    margin: 0.7rem 0 0;
  }
  .sl-foot-top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .sl-ai-composer {
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 1rem;
    border-radius: 15px;
  }
  .sl-ai-mark { display: none; }
  .sl-ai-send {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }
  .sl-ai-response-stage { min-height: 280px; }
  .sl-ai-answer {
    min-height: 260px;
    border-radius: 15px;
  }
  .sl-ai-answer > p { min-height: 8em; }
  .sl-ai-sources {
    gap: 0.65rem 0;
  }
  .sl-ai-sources span {
    padding-inline: 0.65rem;
    font-size: 0.5rem;
  }
  .sl-proof-revision {
    grid-template-columns: 1fr;
  }
  .sl-proof-meta {
    align-items: flex-start;
    white-space: normal;
  }
  .sl-outcome-grid {
    grid-template-columns: 1fr;
  }
  .sl-outcome-change,
  .sl-outcome-why,
  .sl-outcome-next {
    grid-column: auto;
    min-height: 540px;
  }
  .sl-outcome h3 { font-size: clamp(1.95rem, 10vw, 2.55rem); }
  .sl-outcome-copy { min-height: auto; margin-bottom: 2rem; }
  .sl-outcome-demo {
    min-height: 0;
    margin-top: 2rem;
  }
  .sl-demo-core { min-height: 340px; }
  .sl-outcome-next .sl-demo-core { min-height: auto; }
  .sl-watch-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-block: 1.5rem;
  }
  .sl-watch-signals { grid-column: auto; }
  .sl-tiles {
    grid-template-columns: 1fr;
  }
  .sl-wait-row {
    flex-direction: column;
    border-radius: var(--r-panel);
    padding: 0.8rem;
    gap: 0.7rem;
  }
  .sl-wait input {
    padding: 0.2rem 0.25rem;
  }
  .sl-wait .sl-btn {
    width: 100%;
  }
  .sl-strip-group {
    gap: 2rem;
    padding: 0 1rem;
  }
  .sl-foot-links {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }
  .sl-foot-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* the strip stays in motion even under reduced-motion: it is slow, linear,
   and the only way its content reads (founder call, 2026-07-31) */
@media (prefers-reduced-motion: reduce) {
  .sl-foot {
    transition: none;
  }
  .sl-ask-q,
  .sl-ask-a {
    animation: none;
  }
  .sl-demo-pulse,
  .sl-diff-shift i::after,
  .sl-impact-line i {
    animation: none;
  }
}

/* ── stage without the range column (the range lives in Scenario chapter) ── */
.sl-stage-solo {
  padding-top: 1.2rem;
  max-width: 62ch;
}

/* ── the app: device frames with drop-in screenshot slots ── */
.sl-devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 980px;
  margin: 0 auto;
}
.sl-device {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.sl-device-screen {
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: clamp(26px, 4vw, 40px);
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 clamp(6px, 1vw, 9px) #060708,
    0 30px 70px -30px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}
/* placeholder state: labeled slot until a real screenshot drops in */
.sl-device-screen[data-slot]::after {
  content: attr(data-slot);
  position: absolute;
  inset: clamp(6px, 1vw, 9px);
  border-radius: inherit;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  color: var(--snow-faint);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  line-height: 1.8;
}
.sl-device-screen img {
  position: absolute;
  inset: clamp(6px, 1vw, 9px);
  width: calc(100% - 2 * clamp(6px, 1vw, 9px));
  height: calc(100% - 2 * clamp(6px, 1vw, 9px));
  object-fit: cover;
  border-radius: inherit;
}
.sl-device figcaption {
  font-size: 0.88rem;
  color: var(--snow-soft);
}
.sl-device--solo {
  max-width: 250px;
  margin: 0 auto;
}

.sl-app .sl-wrap {
  max-width: 1280px;
}
.sl-app {
  padding-block: clamp(4.5rem, 8vh, 6rem);
}
.sl-app .sl-chapter-head {
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.sl-system-showcase {
  width: min(calc(100vw - 3rem), 1200px);
  margin: 0 auto;
}
.sl-system-media {
  position: relative;
  width: 100%;
  height: clamp(500px, 70vh, 1000px);
  overflow: hidden;
}
.sl-system-video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center top;
  clip-path: inset(0 0 16.5% 0);
}

@media (max-width: 700px) {
  .sl-app {
    padding-block: 5rem;
  }
  .sl-system-media {
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
  }
  .sl-system-showcase {
    width: calc(100vw - 1rem);
  }
  .sl-system-video {
    position: relative;
    width: 100%;
    height: auto;
    transform: scale(1.08);
    transform-origin: center top;
    clip-path: inset(0 0 9% 0);
  }
}

/* ── coverage wall: live models, real stances, real freshness ── */
.sl-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0.7rem;
  max-width: 880px;
  margin: 0 auto;
}
.sl-wall-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
}
.sl-wall-chip b {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--snow);
}
.sl-wall-stance {
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 250, 250, 0.35);
}
.sl-wall-stance.bullish {
  background: var(--positive);
}
.sl-wall-stance.bearish {
  background: var(--negative);
}
.sl-wall-conv {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--snow-soft);
}
.sl-wall-ago {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--snow-faint);
}
.sl-wall-chip--you {
  border-style: dashed;
  border-color: rgba(109, 185, 255, 0.4);
}
.sl-wall-chip--you b {
  color: var(--accent);
}

/* ── portfolio: brokers row ── */
.sl-brokers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 1.4rem;
  margin-top: 1.6rem;
}
.sl-brokers img {
  height: 26px;
  width: auto;
  opacity: 0.85;
}

/* ── versus: numbered ledger rows, a different form from the cards ── */
.sl-versus-list {
  max-width: 860px;
  margin: 0 auto;
}
.sl-versus-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}
.sl-versus-row:first-child {
  border-top: none;
}
.sl-versus-row .sl-mono {
  color: var(--accent);
}
.sl-versus-row h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
}
.sl-versus-row p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--snow-soft);
}

/* ── faq ── */
.sl-faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.sl-faq-item {
  border-top: 1px solid var(--line);
}
.sl-faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.sl-faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0.2rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.sl-faq-item summary::-webkit-details-marker {
  display: none;
}
.sl-faq-item summary svg {
  flex: none;
  color: var(--snow-faint);
  transition: transform 0.3s var(--ease);
}
.sl-faq-item[open] summary svg {
  transform: rotate(45deg);
}
.sl-faq-item > p {
  margin: 0;
  padding: 0 0.2rem 1.3rem;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--snow-soft);
}

/* ── memory: the story reads as an editorial pull-quote ── */
.sl-memory-note {
  font-family: var(--editorial);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.42;
  color: var(--snow-soft);
}
.sl-ms.progress::before {
  background: var(--accent);
  box-shadow: none;
}

/* ── responsive for the new sections ── */
@media (max-width: 900px) {
  .sl-devices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .sl-versus-row {
    grid-template-columns: 2.4rem minmax(0, 1fr);
  }
  .sl-versus-row p {
    grid-column: 2;
  }
}
@media (max-width: 620px) {
  .sl-devices {
    grid-template-columns: minmax(0, 1fr);
    max-width: 250px;
  }
  .sl-device:nth-child(n + 2) {
    display: none;
  }
}

/* ── wallscape: full-bleed drifting wall of live models behind the copy ── */
.sl-wallscape {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6rem, 12vh, 9rem) 0;
}
/* the grid itself: 1px hairline splits via gap over a line-colored backdrop,
   spanning the full bleed edge to edge */
.sl-wallscape-bg {
  --wg-row: 138px;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  grid-auto-rows: 1fr;
  align-content: stretch;
  gap: 1px;
  background: var(--line);
  /* close the grid: the outer row edges get the same hairline as the inner ones */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* the wall is atmosphere: it must always lose to the headline. No edge mask:
     rows divide the grid exactly, so every cell is whole and the wall ends on a
     clean row boundary instead of a fade. */
  opacity: 0.72;
}
.sl-wg-cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.62rem;
  padding: 1.3rem 1.35rem;
  background: var(--canvas);
  transition: background 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.sl-wg-cell.is-hot {
  background: rgba(66, 201, 139, 0.055);
  box-shadow: inset 0 0 0 1px rgba(66, 201, 139, 0.4);
}
/* the company mark, sunk into the cell: white-background logos are inverted to
   a monochrome mark and screened so only the artwork survives on black */
.sl-wg-logo {
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: grayscale(1) invert(1) contrast(1.15);
  mix-blend-mode: screen;
  opacity: 0.3;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.sl-wg-cell.is-hot .sl-wg-logo {
  opacity: 0.65;
}
.sl-wg-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sl-wg-top b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  color: rgba(246, 246, 242, 0.94);
}
.sl-wg-top .sl-wall-stance {
  width: 5px;
  height: 5px;
  opacity: 0.9;
}
.sl-wg-cap {
  font-size: 0.76rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: rgba(246, 246, 242, 0.38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-wg-cell.is-hot .sl-wg-cap {
  color: var(--positive);
}
.sl-wg-bar {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.sl-wg-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(250, 250, 250, 0.3);
  transition: width 0.7s var(--ease);
}
.sl-wg-bar i.bullish {
  background: var(--positive);
  opacity: 0.75;
}
.sl-wg-bar i.bearish {
  background: var(--negative);
  opacity: 0.75;
}
.sl-wallscape-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    34% 30% at 50% 50%,
    rgba(9, 10, 11, 0.78) 0%,
    rgba(9, 10, 11, 0.6) 55%,
    rgba(9, 10, 11, 0.24) 82%,
    transparent 100%
  );
}
.sl-wallscape-fg {
  position: relative;
  z-index: 1;
  max-width: 860px;
  padding: 0 clamp(1.1rem, 3.5vw, 2rem);
  text-align: center;
  pointer-events: none;
}
/* display type on a busy field: open the tracking (the global -0.052em collides
   at this size), add weight for presence, and carry legibility in the type
   itself rather than a heavy scrim */
.sl-wallscape-fg .sl-h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  text-shadow: 0 2px 26px rgba(9, 10, 11, 0.85);
}
.sl-wallscape-fg .sl-support {
  margin: 1.4rem auto 0;
  max-width: 40ch;
  color: rgba(246, 246, 242, 0.68);
  text-shadow: 0 1px 16px rgba(9, 10, 11, 0.9);
}
@media (max-width: 640px) {
  .sl-wallscape {
    min-height: 78vh;
  }
  .sl-wallscape-bg {
    --wg-row: 116px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .sl-wg-cell {
    padding: 1rem 1.05rem;
  }
}

/* ── scrollbar ──────────────────────────────────────────────────────────────
   The right-hand gutter is the scrollbar, but with the default styling it just
   reads as the page being cut off. Give it a real track, a hairline edge that
   matches the section dividers, and enough width to read as a control.
   Scoped with :has() so only pages that render the landing are affected. */
html:has(.sl) {
  scrollbar-width: auto;
  scrollbar-color: rgba(255, 255, 255, 0.24) #0e0f12;
}
html:has(.sl)::-webkit-scrollbar {
  width: 16px;
}
html:has(.sl)::-webkit-scrollbar-track {
  background: #0e0f12;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
html:has(.sl)::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 999px;
  min-height: 48px;
}
html:has(.sl)::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.36);
  background-clip: padding-box;
}
html:has(.sl)::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.45);
  background-clip: padding-box;
}

/* ── shared page shell: every non-home page uses this, so the rhythm and the
   chrome match the home page exactly ─────────────────────────────────────── */
.sl-page {
  padding-top: 96px;
}
.sl-page-hero {
  padding: clamp(3rem, 9vh, 6rem) 0 clamp(2rem, 5vh, 3.5rem);
}
.sl-page-hero .sl-display {
  text-align: left;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
}
.sl-page-hero .sl-support {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  max-width: 56ch;
}
.sl-page-hero .sl-kick {
  text-align: left;
}
.sl-section {
  padding: clamp(3.5rem, 8vh, 6rem) 0;
}
.sl-section > .sl-wrap > h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--type-section);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0 0 1rem;
  text-align: left;
  text-wrap: balance;
}
/* prose inside a page: quiet, narrow, generous */
.sl-prose {
  max-width: 68ch;
}
.sl-prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0.6rem;
}
.sl-prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1.6rem 0 0.3rem;
}
.sl-prose p,
.sl-prose li {
  margin: 0.7rem 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-muted);
}
.sl-prose ul,
.sl-prose ol {
  padding-left: 1.2rem;
}
.sl-prose strong {
  color: var(--ink);
  font-weight: 600;
}
.sl-prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
}
.sl-prose a:hover {
  border-bottom-color: var(--ink);
}
.sl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.sl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}
.sl-card--compact {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  text-align: left;
}
.sl-card--compact .sl-card-title {
  text-align: left;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}
.sl-card--compact .sl-card-sub {
  text-align: left;
  margin: 0.7rem 0 0;
  max-width: none;
}
@media (max-width: 900px) {
  .sl-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .sl-grid-2,
  .sl-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* in-page contents list (legal pages) */
.sl-toc {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.1rem;
}
.sl-toc li {
  break-inside: avoid;
  margin: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.sl-toc a {
  color: var(--ink-muted);
  border-bottom: none;
}
.sl-toc a:hover {
  color: var(--ink);
}
@media (max-width: 620px) {
  .sl-toc {
    columns: 1;
  }
}

/* ── page rhythm corrections ─────────────────────────────────────────────
   The hero's bottom padding and the following section's top padding were
   stacking into a dead void between the lede and the content. */
.sl-page-hero {
  padding: clamp(2.5rem, 7vh, 4.5rem) 0 0;
}
.sl-page-hero + .sl-section {
  padding-top: clamp(2rem, 4vh, 3rem);
}
/* an action inside a card sits clear of its copy */
.sl-card .sl-btn {
  align-self: flex-start;
  margin-top: 1.5rem;
}
.sl-card--compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* a closing note after a grid is a separate thought, not a caption */
.sl-grid-2 + .sl-prose,
.sl-grid-3 + .sl-prose {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hairline);
  max-width: 62ch;
}

/* ── page type hierarchy ─────────────────────────────────────────────────
   The section heads were inheriting the home page's --type-section, which is
   LARGER than the page h1, so h2 outranked h1 on screen. One descending
   scale: h1 > h2 > card title > body > detail. */
.sl-page-hero .sl-display {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 20ch;
}
.sl-page-hero .sl-support {
  font-size: 1.05rem;
  color: var(--ink-muted);
}
.sl-section > .sl-wrap > h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  letter-spacing: -0.032em;
  line-height: 1.08;
  max-width: 24ch;
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
}
.sl-card--compact .sl-card-title {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.2;
}
.sl-card--compact .sl-card-sub {
  font-size: 0.95rem;
  line-height: 1.55;
}
/* detail lists inside a card are the quietest level, not body copy */
.sl-card .sl-prose {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  max-width: none;
}
.sl-card .sl-prose p,
.sl-card .sl-prose li {
  margin: 0.55rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.sl-card .sl-prose strong {
  color: var(--ink-muted);
  font-weight: 600;
}
/* cards in a row share a height; keep their tops aligned and content honest */
.sl-grid-2 > .sl-card,
.sl-grid-3 > .sl-card {
  height: 100%;
}

/* a mono label inside a card is a footnote, not a headline: it sits clear of
   the copy above it and stays quieter than that copy */
.sl-card .sl-mono {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--ink-faint);
}
/* the section lede sits between the heading and its content, not against it */
.sl-section > .sl-wrap > p {
  margin: 0 0 clamp(1.8rem, 3.2vw, 2.6rem);
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.sl-section > .sl-wrap > h2 + p {
  margin-top: -0.4rem;
}


/* ── the loop: one filing followed through four linked step cards ────────
   Plain canvas behind. Outer cards are flat, light and compact with generous
   negative space; the product UI lives only in the darker translucent panel
   inside each card. Cards are joined by a drawn vertical line. */
.sl-loop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(100vw - clamp(2rem, 5vw, 4rem), 1320px);
  margin: 0 auto;
}
.sl-loop-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: clamp(720px, 62vw, 900px);
  padding: clamp(3rem, 5vw, 5.25rem) clamp(1.5rem, 3.4vw, 3.5rem) clamp(1.5rem, 3vw, 2.6rem);
  overflow: hidden;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(155deg, #19191c 0%, #111113 62%, #09090b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.sl-loop-card.is-live {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 30px 80px rgba(22, 20, 48, 0.22);
}
.sl-loop-wide {
  width: 100%;
}
/* header: label, title, one quiet line. Hierarchy through size and ink. */
.sl-loop-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.sl-loop-head span {
  display: none;
}
.sl-loop-head h3 {
  margin: 0;
  max-width: 13ch;
  font-family: var(--editorial);
  font-weight: 400;
  font-size: clamp(2.15rem, 4vw, 3.8rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--snow);
  text-wrap: balance;
}
.sl-loop-head p {
  max-width: 36ch;
  margin: 1.25rem auto 0;
  font-size: clamp(0.94rem, 1.15vw, 1.08rem);
  line-height: 1.55;
  color: rgba(246, 246, 242, 0.66);
}
/* the drawn link between cards */
.sl-loop-link {
  display: none;
}
.sl-loop-link i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
  animation: sl-loop-travel 2.6s ease-in-out infinite;
}
@keyframes sl-loop-travel {
  0% {
    top: -2px;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 3px);
    opacity: 0;
  }
}
/* the interior product panel: darker, semi transparent, its own quiet UI */
.sl-loop-ui {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(100%, 620px);
  min-height: clamp(340px, 30vw, 430px);
  margin: auto auto 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 0;
  border-radius: 26px;
  background: rgba(5, 6, 10, 0.76);
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px) saturate(82%);
  backdrop-filter: blur(20px) saturate(82%);
}
.sl-loop-ui-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--utility);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246, 246, 242, 0.54);
}
.sl-loop-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sl-loop-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--positive);
}
.sl-loop-count {
  color: var(--ink-faint);
}
.sl-loop-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-muted);
}
.sl-loop-brand img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* 01 · feed rows */
.sl-loop-feed {
  display: flex;
  flex-direction: column;
}
.sl-loop-feed-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.sl-loop-feed-row:last-child {
  border-bottom: 0;
  padding-bottom: 0.1rem;
}
.sl-loop-feed-src {
  font-family: var(--utility);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.sl-loop-feed-when {
  font-family: var(--utility);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-align: right;
}
.sl-loop-feed-row:first-child .sl-loop-feed-when {
  color: var(--positive);
}
.sl-loop-feed-row p {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(246, 246, 242, 0.78);
}

/* 02 · reasoning notes and probability shifts */
.sl-loop-note {
  padding: 0.85rem 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: transparent;
}
.sl-loop-note > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--utility);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sl-loop-note > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--positive);
}
.sl-loop-note p {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(246, 246, 242, 0.78);
}
.sl-loop-shifts {
  display: flex;
  flex-direction: column;
}
.sl-loop-shifts > div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
}
.sl-loop-shifts span {
  color: var(--ink-muted);
}
.sl-loop-shifts em {
  font-style: normal;
  color: var(--ink-faint);
  text-decoration: line-through;
}
.sl-loop-shifts b {
  font-weight: 600;
  color: var(--ink);
}

/* 03 · the chart, neutral ink on the panel */
.sl-loop-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.sl-loop-grid {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 7;
}
.sl-loop-origin {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}
.sl-loop-origin-dot {
  fill: var(--ink);
}
.sl-loop-scenario {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke: rgba(119, 190, 244, 0.38);
}
.sl-loop-scenario.is-1 {
  stroke: rgba(135, 202, 252, 0.54);
}
.sl-loop-scenario.is-2 {
  stroke: #9bd4ff;
  stroke-width: 2.5;
}
.sl-loop-scenario.is-3 {
  stroke: rgba(161, 217, 255, 0.72);
}
.sl-loop-scenario-dot {
  fill: #b7e0ff;
}
.sl-loop-scan {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.sl-loop-expected {
  fill: none;
  stroke: #d7efff;
  stroke-width: 3;
  stroke-linecap: round;
}
.sl-loop-chart-axis {
  fill: var(--ink-faint);
  font-family: var(--utility);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}
.sl-loop-chart-name {
  fill: var(--ink-faint);
  font-family: var(--utility);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}
.sl-loop-chart-value {
  fill: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
}

/* 04 · the delivered read */
.sl-loop-read {
  margin: 0.5rem 0 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(246, 246, 242, 0.78);
}
.sl-loop-verdict {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sl-loop-verdict span {
  font-family: var(--utility);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sl-loop-verdict em {
  font-style: normal;
  font-size: 1rem;
  color: var(--ink-faint);
  text-decoration: line-through;
}
.sl-loop-verdict b {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #9bd4ff;
}

/* under 700px the scaled SVG text is unreadable: swap the in-chart labels for
   a compact key row above the chart */
.sl-loop-key {
  display: none;
}
@media (max-width: 700px) {
  .sl-loop {
    grid-template-columns: 1fr;
    width: min(calc(100vw - 2rem), 680px);
  }
  .sl-loop-card {
    min-height: 610px;
    padding: 3rem 1.1rem 1.1rem;
    border-radius: 24px;
  }
  .sl-loop-head {
    margin-bottom: 2.5rem;
  }
  .sl-loop-ui {
    padding: 1.25rem;
    border-radius: 20px;
  }
  .sl-loop-chart-name,
  .sl-loop-chart-value,
  .sl-loop-chart-axis {
    display: none;
  }
  .sl-loop-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding-bottom: 0.3rem;
    font-family: var(--utility);
    font-size: 0.68rem;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
  }
  .sl-loop-key b {
    font-weight: 600;
    color: var(--ink-muted);
  }
}
@media (min-width: 701px) and (max-width: 980px) {
  .sl-loop {
    grid-template-columns: 1fr;
    width: min(calc(100vw - 3rem), 760px);
  }
  .sl-loop-card {
    min-height: 720px;
  }
}

/* Compact, connected process sequence. Each stage carries only the space its
   evidence needs, while the rail makes the final read visibly downstream. */
.sl-chapter-forecast .sl-chapter-head {
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.sl-loop {
  grid-template-columns:
    minmax(0, 0.95fr) 1.5rem
    minmax(0, 0.95fr) 1.5rem
    minmax(0, 1.35fr) 1.5rem
    minmax(0, 0.95fr);
  align-items: stretch;
  gap: 0;
  width: min(calc(100vw - clamp(2rem, 5vw, 5rem)), 1440px);
}
.sl-loop-card,
.sl-loop-card.is-live {
  height: 100%;
  min-height: 520px;
  padding: clamp(1.35rem, 1.8vw, 1.75rem);
  border-radius: 22px;
  transform: none;
  background: linear-gradient(155deg, #19191c 0%, #111113 62%, #09090b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sl-loop-card.is-live {
  box-shadow:
    inset 0 0 0 1px rgba(155, 212, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 54px rgba(0, 0, 0, 0.16);
}
.sl-loop-card:last-child {
  background: linear-gradient(155deg, #1c1c1f 0%, #121214 62%, #09090b 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sl-loop-head {
  align-items: flex-start;
  min-height: 128px;
  margin: 0 0 1.25rem;
  text-align: left;
}
.sl-loop-head span {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--utility);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(155, 212, 255, 0.68);
}
.sl-loop-head h3 {
  max-width: 14ch;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.04;
}
.sl-loop-head p {
  max-width: 31ch;
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.sl-loop-ui {
  width: 100%;
  min-height: 312px;
  margin: 0;
  padding: 1.15rem;
  border-radius: 17px;
  background: rgba(4, 6, 10, 0.72);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.sl-loop-link {
  position: relative;
  display: block;
  align-self: center;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(155, 212, 255, 0.18), rgba(155, 212, 255, 0.58));
}
.sl-loop-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(155, 212, 255, 0.72);
  border-right: 1px solid rgba(155, 212, 255, 0.72);
  transform: translateY(-50%) rotate(45deg);
}
.sl-loop-link i {
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  background: #9bd4ff;
  box-shadow: 0 0 10px rgba(155, 212, 255, 0.7);
  transform: translate(-50%, -50%);
  animation: sl-loop-travel-x 2.8s ease-in-out infinite;
}
.sl-loop-link:nth-of-type(2) i { animation-delay: 0.22s; }
.sl-loop-link:nth-of-type(3) i { animation-delay: 0.44s; }
@keyframes sl-loop-travel-x {
  0% { left: 0; opacity: 0; }
  18%, 82% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.sl-loop-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.65rem;
  padding-bottom: 0.35rem;
  font-family: var(--utility);
  font-size: 0.58rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.sl-loop-key b {
  font-weight: 600;
  color: var(--ink-muted);
}
.sl-loop-chart-name,
.sl-loop-chart-value,
.sl-loop-chart-axis {
  display: none;
}
.sl-loop-feed-row p,
.sl-loop-note p {
  font-size: 0.8rem;
}
.sl-loop-read {
  font-size: 0.86rem;
  line-height: 1.55;
}

@media (max-width: 1100px) {
  .sl-loop {
    grid-template-columns: minmax(0, 1fr);
    width: min(calc(100vw - 2rem), 680px);
  }
  .sl-loop-card,
  .sl-loop-card.is-live {
    height: auto;
    min-height: 0;
  }
  .sl-loop-head {
    min-height: 0;
  }
  .sl-loop-ui {
    min-height: 0;
  }
  .sl-loop-link {
    justify-self: center;
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, rgba(155, 212, 255, 0.18), rgba(155, 212, 255, 0.58));
  }
  .sl-loop-link::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .sl-loop-link i {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-name: sl-loop-travel-y;
  }
  @keyframes sl-loop-travel-y {
    0% { top: 0; opacity: 0; }
    18%, 82% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-loop-link i {
    animation: none;
    opacity: 1;
  }
}

/* Homepage compression and proof hierarchy. The definition, product media,
   verification details, and live evidence now form one short opening story. */
.sl-living-intro {
  min-height: auto;
  padding-block: clamp(5.5rem, 9vw, 8rem);
}
.sl-living-intro-inner {
  width: min(calc(100% - 2rem), 1320px);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(460px, 1.22fr);
  gap: clamp(3rem, 7vw, 7.5rem);
  align-items: center;
  text-align: left;
}
.sl-living-intro-copy {
  max-width: 590px;
}
.sl-living-intro h2 {
  max-width: 10.5ch;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
}
.sl-living-definition {
  max-width: 54ch;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  text-wrap: pretty;
}
.sl-living-app {
  max-width: 54ch;
  margin-top: 1.2rem;
  font-size: 0.98rem;
  text-wrap: pretty;
}
.sl-product-slot {
  position: relative;
  min-height: clamp(360px, 42vw, 560px);
  display: flex;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: #0c0d0f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sl-product-slot > * {
  position: relative;
  z-index: 1;
}
.sl-early-trust span {
  font: 600 0.68rem/1.2 var(--utility);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sl-preview-shell {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: #08090b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

/* Interactive scenario bento. The outer cards carry the editorial story;
   the inset frames behave like the Steady product rather than illustrations. */
.ssb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.ssb-card {
  min-width: 0;
  min-height: clamp(39rem, 54vw, 47rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 2.8vw, 2.35rem);
  border-radius: clamp(1.5rem, 2.7vw, 2rem);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018) 48%, rgba(255,255,255,0.03)),
    #111216;
  overflow: hidden;
}
.ssb-card-heading {
  min-height: 13rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: clamp(0.7rem, 2vw, 1.5rem) 0 clamp(1.6rem, 3vw, 2.5rem);
}
.ssb-kicker {
  display: block;
  margin-bottom: 1rem;
  color: rgba(245,245,242,0.42);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.ssb-card-heading h3 {
  margin: 0;
  color: var(--snow);
  font-family: var(--editorial);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  text-wrap: balance;
}
.ssb-card-heading h3 em {
  font: inherit;
  font-style: italic;
}
.ssb-card-heading p {
  max-width: 42ch;
  margin: 1rem auto 0;
  color: rgba(245,245,242,0.57);
  font-size: clamp(0.88rem, 1.25vw, 0.98rem);
  line-height: 1.55;
  text-wrap: balance;
}
.ssb-product-frame {
  position: relative;
  min-height: 24.5rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 1.35rem;
  background: rgba(5,7,10,0.78);
  box-shadow: 0 24px 70px rgba(0,0,0,0.24);
  overflow: hidden;
}
.ssb-product-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  pointer-events: none;
}
.ssb-product-bar {
  min-height: 3.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  color: rgba(245,245,242,0.43);
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ssb-product-bar span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ssb-product-bar i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #43d49b;
  box-shadow: 0 0 0.8rem rgba(67,212,155,0.45);
}
.ssb-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.45rem;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.ssb-tab {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  border: 0;
  border-radius: 0.78rem;
  background: transparent;
  color: rgba(245,245,242,0.42);
  font: 500 0.72rem/1 var(--sans);
  cursor: pointer;
  transition: color 180ms ease;
}
.ssb-tab:hover,
.ssb-tab[aria-selected='true'] {
  color: rgba(245,245,242,0.94);
}
.ssb-tab:focus-visible {
  outline: 2px solid rgba(146,205,255,0.9);
  outline-offset: 2px;
}
.ssb-tab > *:not(.ssb-tab-active) {
  position: relative;
  z-index: 1;
}
.ssb-tab-active {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: inherit;
  background: rgba(255,255,255,0.065);
}
.ssb-view {
  min-height: 17.4rem;
  padding: clamp(1.1rem, 2.1vw, 1.55rem);
}
.ssb-range-graphic {
  min-height: 14.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ssb-range-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.ssb-range-metrics div:last-child {
  text-align: right;
}
.ssb-range-metrics span,
.ssb-assumption-grid span {
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(245,245,242,0.35);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ssb-range-metrics strong {
  color: var(--snow);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.ssb-range-metrics div:last-child strong {
  color: #a6d8ff;
}
.ssb-range-track {
  position: relative;
  height: 4.5rem;
  margin: 2rem 0 0;
}
.ssb-range-spectrum {
  position: absolute;
  top: 2rem;
  right: 0;
  left: 0;
  height: 0.28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #954753 0%, #69646b 48%, #2d9e74 100%);
}
.ssb-outcome-pin,
.ssb-current-pin {
  position: absolute;
  top: 1.58rem;
  width: 1.1rem;
  height: 1.1rem;
  translate: -50% 0;
  border: 0.22rem solid #090b0f;
  border-radius: 50%;
  background: #eef1f4;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}
.ssb-current-pin {
  top: 1.25rem;
  z-index: 2;
  width: 0.14rem;
  height: 1.9rem;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0 1rem rgba(255,255,255,0.32);
}
.ssb-current-pin i {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  translate: -50% 0;
  color: rgba(245,245,242,0.72);
  font: normal 600 0.58rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ssb-range-scale {
  display: flex;
  justify-content: space-between;
  color: rgba(245,245,242,0.38);
  font-family: var(--mono);
  font-size: 0.66rem;
}
.ssb-data-list,
.ssb-watch-list,
.ssb-evidence-list {
  display: grid;
}
.ssb-data-row {
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: 1.8rem minmax(0,1fr) auto auto;
  gap: 0.7rem;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.ssb-data-row:last-child {
  border-bottom: 0;
}
.ssb-rank,
.ssb-data-number,
.ssb-data-row > strong,
.ssb-watch-index,
.ssb-watch-state {
  color: rgba(245,245,242,0.38);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.ssb-data-copy {
  min-width: 0;
  color: rgba(245,245,242,0.72);
  font-size: 0.78rem;
  line-height: 1.35;
}
.ssb-data-row > strong {
  color: rgba(245,245,242,0.9);
  font-size: 0.7rem;
}
.ssb-assumption-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.ssb-assumption-grid > div {
  min-height: 7rem;
  padding: 1.05rem;
  border-right: 1px solid rgba(255,255,255,0.055);
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.ssb-assumption-grid > div:nth-child(2n) { border-right: 0; }
.ssb-assumption-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.ssb-assumption-grid strong {
  color: rgba(245,245,242,0.78);
  font-size: 0.81rem;
  font-weight: 500;
  line-height: 1.42;
}
.ssb-watch-row {
  min-height: 4.7rem;
  display: grid;
  grid-template-columns: 1.7rem minmax(0,1fr) auto;
  gap: 0.8rem;
  align-items: start;
  padding: 0.82rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.ssb-watch-row:last-child { border-bottom: 0; }
.ssb-watch-index { padding-top: 0.12rem; }
.ssb-watch-row strong {
  display: block;
  color: rgba(245,245,242,0.91);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}
.ssb-watch-row p {
  margin: 0.28rem 0 0;
  color: rgba(245,245,242,0.45);
  font-size: 0.73rem;
  line-height: 1.42;
}
.ssb-watch-state {
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(67,212,155,0.09);
  color: #67dcb1;
  text-transform: uppercase;
}
.ssb-risk-view {
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.7rem, 2vw, 1.4rem);
}
.ssb-risk-label {
  color: #df8c96;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.ssb-risk-view p {
  max-width: 38ch;
  margin: 0.9rem 0 1.4rem;
  color: rgba(245,245,242,0.83);
  font-size: 1rem;
  line-height: 1.55;
}
.ssb-risk-meter {
  position: relative;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.ssb-risk-meter span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #87505a, #df8c96);
}
.ssb-risk-meter i {
  position: absolute;
  top: 0.75rem;
  left: 68%;
  translate: -50% 0;
  color: rgba(245,245,242,0.35);
  font: normal 600 0.59rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ssb-evidence-list > div {
  min-height: 4.55rem;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.ssb-evidence-list > div:last-child { border-bottom: 0; }
.ssb-evidence-list span,
.ssb-evidence-list i {
  color: rgba(245,245,242,0.38);
  font: normal 600 0.61rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ssb-evidence-list strong {
  color: rgba(245,245,242,0.78);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
}
.ssb-evidence-list i { color: #67dcb1; }

@media (max-width: 960px) {
  .ssb-grid { grid-template-columns: 1fr; }
  .ssb-card { min-height: 41rem; }
}
@media (max-width: 560px) {
  .ssb-card {
    min-height: 0;
    padding: 1.1rem;
    border-radius: 1.35rem;
  }
  .ssb-card-heading { min-height: 11.5rem; }
  .ssb-product-frame { min-height: 25rem; }
  .ssb-tab { gap: 0.35rem; font-size: 0.67rem; }
  .ssb-view { padding: 1rem; }
  .ssb-data-row { grid-template-columns: 1.5rem minmax(0,1fr) auto; }
  .ssb-data-number { display: none; }
  .ssb-watch-state { display: none; }
  .ssb-evidence-list > div { grid-template-columns: 4.5rem minmax(0,1fr); }
  .ssb-evidence-list i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ssb-tab,
  .ssb-tab-active,
  .ssb-outcome-pin,
  .ssb-current-pin { transition: none !important; }
}
.sl-preview-topbar,
.sl-preview-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
}
.sl-preview-company {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sl-preview-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #76b900;
  color: #071000;
  font: 700 0.65rem/1 var(--utility);
}
.sl-preview-company div {
  display: grid;
  gap: 0.12rem;
}
.sl-preview-company strong {
  color: var(--ink);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.sl-preview-company small,
.sl-preview-model small,
.sl-preview-feed-row small,
.sl-preview-feed-row time,
.sl-preview-kicker {
  color: var(--ink-faint);
  font: 600 0.58rem/1.3 var(--utility);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-preview-live,
.sl-preview-stance {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #58d6a0;
  font: 600 0.62rem/1 var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sl-preview-live i,
.sl-preview-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #42d392;
  box-shadow: 0 0 14px rgba(66, 211, 146, 0.55);
}
.sl-preview-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.55fr);
}
.sl-preview-feed {
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid var(--line);
}
.sl-preview-kicker {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.75rem;
}
.sl-preview-kicker span {
  color: #58d6a0;
}
.sl-preview-feed-row {
  position: relative;
  display: grid;
  gap: 0.38rem;
  padding: 0.85rem 0.75rem;
  border-top: 1px solid var(--line);
}
.sl-preview-feed-row.is-current {
  margin-inline: -0.25rem;
  padding-inline: 1rem 0.75rem;
  background: rgba(118, 185, 0, 0.055);
  box-shadow: inset 2px 0 #58d6a0;
}
.sl-preview-feed-row strong {
  padding-right: 2.2rem;
  color: rgba(246, 246, 242, 0.76);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
}
.sl-preview-feed-row time {
  position: absolute;
  top: 0.85rem;
  right: 0.7rem;
  font-size: 0.52rem;
}
.sl-preview-model {
  min-width: 0;
  display: grid;
  align-content: start;
  padding: 1rem 1.15rem;
}
.sl-preview-model-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
}
.sl-preview-model-head > div {
  display: grid;
  gap: 0.45rem;
}
.sl-preview-model-head strong {
  max-width: 24ch;
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.sl-preview-stance {
  flex: none;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  background: rgba(66, 211, 146, 0.1);
  text-transform: none;
  letter-spacing: 0;
}
.sl-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line);
}
.sl-preview-metrics > div {
  display: grid;
  gap: 0.38rem;
  padding: 0.8rem 0.7rem;
  border-left: 1px solid var(--line);
}
.sl-preview-metrics > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.sl-preview-metrics strong {
  color: var(--ink);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
}
.sl-preview-metrics strong span {
  color: var(--ink-faint);
  font-size: 0.62em;
}
.sl-preview-range {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.sl-preview-range-head,
.sl-preview-range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sl-preview-range-head span {
  color: var(--ink-faint);
  font: 600 0.54rem/1 var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sl-preview-range-line {
  position: relative;
  height: 1px;
  margin: 1.2rem 0 0.65rem;
  background: linear-gradient(90deg, #c95d68, #8d8d8d 48%, #42d392);
}
.sl-preview-range-line i {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #d6d6d2;
  border-radius: 50%;
  background: #08090b;
  transform: translate(-50%, -50%);
}
.sl-preview-range-line i.is-weighted {
  width: 11px;
  height: 11px;
  background: #f2f2ee;
  box-shadow: 0 0 0 4px rgba(242, 242, 238, 0.09);
}
.sl-preview-range-labels span {
  color: var(--ink-muted);
  font: 500 0.58rem/1 var(--utility);
}
.sl-preview-revision {
  padding-top: 0.85rem;
}
.sl-preview-revision p {
  max-width: 52ch;
  margin: 0.4rem 0 0;
  color: var(--ink-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}
.sl-preview-status {
  justify-content: flex-start;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.sl-preview-status span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-faint);
  font: 600 0.54rem/1 var(--utility);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sl-preview-status span:last-child {
  color: rgba(246, 246, 242, 0.72);
}
@media (max-width: 1100px) {
  .sl-preview-body {
    grid-template-columns: minmax(160px, 0.62fr) minmax(0, 1.38fr);
  }
  .sl-preview-feed-row strong {
    padding-right: 0;
  }
  .sl-preview-feed-row time {
    position: static;
  }
}
@media (max-width: 620px) {
  .sl-product-slot {
    min-height: 470px;
    padding: 0.5rem;
    border-radius: 18px;
  }
  .sl-preview-body {
    grid-template-columns: 1fr;
  }
  .sl-preview-feed {
    display: none;
  }
  .sl-preview-model {
    padding: 1rem;
  }
  .sl-preview-model-head strong {
    font-size: 1.05rem;
  }
  .sl-preview-status {
    gap: 0.8rem;
    overflow: hidden;
  }
  .sl-preview-status span {
    font-size: 0.48rem;
  }
}
.sl-early-trust {
  border-block: 1px solid var(--line);
  background: #050506;
  padding-block: clamp(5rem, 9vw, 8rem);
}
.sl-early-trust-statement {
  max-width: 880px;
  margin: 0 auto clamp(4rem, 7vw, 6.5rem);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(2.4rem, 4.5vw, 4.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-align: center;
  text-wrap: balance;
}
.sl-early-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1480px;
  margin: 0 auto;
}
.sl-early-trust-grid > div {
  min-width: 0;
  padding: 0.35rem clamp(1.4rem, 2.6vw, 2.6rem) 0.5rem;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.sl-early-trust-grid > div:first-child {
  border-left: 0;
  padding-left: 0;
}
.sl-early-trust-grid > div:last-child {
  padding-right: 0;
}
/* sized so every heading holds one line in its column; the subline carries
   the detail quietly underneath */
.sl-early-trust strong {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.55vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  white-space: normal;
}
.sl-early-trust-grid span {
  margin-top: 0.65rem;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: none;
  max-width: 26ch;
}
.sl-early-trust a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.15rem;
  color: var(--ink);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sl-live-proof {
  padding-block: clamp(5.5rem, 9vw, 8rem);
}
.sl-live-proof .sl-wrap {
  max-width: 1320px;
}
.sl-proof-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.sl-proof-copy .sl-h2 {
  max-width: 9ch;
  margin: 1.25rem 0 0;
  text-align: left;
  font-size: clamp(2.8rem, 5vw, 5rem);
}
.sl-proof-copy .sl-support {
  max-width: 51ch;
  margin: 1.8rem 0 0;
  text-align: left;
  text-wrap: pretty;
}
.sl-proof-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 2rem;
}
.sl-proof-actions > span {
  color: var(--ink-faint);
  font: 600 0.68rem/1.3 var(--utility);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sl-proof-product {
  min-width: 0;
  display: grid;
  gap: 0.9rem;
}
.sl-live-proof .sl-stage {
  box-shadow: none;
}
.sl-live-proof .sl-stage-solo {
  max-width: none;
}
.sl-live-proof .sl-thesis {
  font-size: clamp(1rem, 1.4vw, 1.14rem);
}
.sl-proof-feed {
  padding: clamp(1.15rem, 2.2vw, 1.65rem);
  border-radius: 18px;
  background: rgba(13, 14, 17, 0.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.sl-proof-feed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
  font: 600 0.68rem/1.2 var(--utility);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-proof-feed-list {
  display: grid;
}
.sl-proof-feed-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  min-height: 54px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sl-proof-feed-row:last-child {
  border-bottom: 0;
}
.sl-proof-feed-row span,
.sl-proof-feed-row time {
  color: var(--ink-faint);
  font: 600 0.67rem/1.2 var(--utility);
  letter-spacing: 0.08em;
}
.sl-proof-feed-row:first-child time {
  color: var(--positive);
}
.sl-proof-feed-row strong {
  color: var(--ink-muted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
}
.sl-loop-ask {
  max-width: 1000px;
  margin-top: clamp(4rem, 7vw, 6.5rem);
}

/* These chapters repeated the same evidence, memory, and reasoning already
   shown in the opening proof and connected flow. Keeping them out of layout
   shortens the homepage without removing any distinct product capability. */
.sl-outcomes,
.sl-trust,
.sl-legacy-memory,
.sl-versus {
  display: none;
}
.sl-outcomes + .sl-divider,
.sl-legacy-memory + .sl-divider,
.sl-versus + .sl-divider {
  display: none;
}

@media (max-width: 900px) {
  .sl-living-intro-inner,
  .sl-proof-grid {
    grid-template-columns: 1fr;
  }
  .sl-living-intro-copy {
    max-width: 720px;
  }
  .sl-early-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sl-early-trust-grid > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .sl-early-trust-grid > div:nth-child(n + 3) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .sl-living-intro {
    min-height: auto;
    padding-block: 4.5rem;
  }
  .sl-living-intro-inner {
    width: min(calc(100% - 2rem), 1320px);
    gap: 2.5rem;
  }
  .sl-product-slot {
    min-height: 300px;
    border-radius: 18px;
  }
  .sl-early-trust-grid {
    grid-template-columns: 1fr;
    padding-block: 0;
  }
  .sl-early-trust {
    padding-block: 4.5rem;
  }
  .sl-early-trust-statement {
    margin-bottom: 2.75rem;
  }
  .sl-early-trust-grid > div,
  .sl-early-trust-grid > div:first-child,
  .sl-early-trust-grid > div:last-child,
  .sl-early-trust-grid > div:nth-child(odd) {
    margin: 0;
    min-height: 0;
    padding: 1.75rem 0;
    border: 0;
    border-top: 1px solid var(--line);
    align-items: flex-start;
    text-align: left;
  }
  .sl-early-trust-grid > div:first-child {
    border-top: 0;
  }
  .sl-live-proof {
    padding-block: 4.5rem;
  }
  .sl-proof-grid {
    gap: 2.5rem;
  }
  .sl-proof-feed-row {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.8rem;
    padding-block: 0.75rem;
  }
  .sl-proof-feed-row strong {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .sl-proof-feed-row time {
    grid-column: 2;
    grid-row: 1;
  }
  .sl-btn,
  .sl-arrowlink,
  .sl-brand,
  .sl-foot-brand,
  .sl-nav-mob > summary,
  .sl-nav-mob-menu a,
  .sl-faq-item summary,
  .sl-foot-links a,
  .sl-foot-bottom a,
  .sl-early-trust a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sl-panel-k,
  .sl-live,
  .sl-loop-head span,
  .sl-loop-ui-bar,
  .sl-loop-feed-src,
  .sl-loop-feed-when,
  .sl-loop-note > span,
  .sl-loop-verdict span,
  .sl-proof-actions > span {
    font-size: max(0.68rem, 11px);
    line-height: 1.35;
  }
  .sl-ai-send {
    width: 44px;
    height: 44px;
  }
}

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

/* ── wallscape additions: SnapTrade caption in the overlay, brokerage marquee
   floating over the wall near its foot ── */
.sl-wallscape-brokers {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  pointer-events: none;
}
.sl-wallscape-brokers > span {
  display: inline-flex;
  align-items: center;
  font-family: var(--utility);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 246, 242, 0.62);
}
/* the marquee breaks out of the centred overlay column to run full bleed */
.sl-wallscape-strip {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 2rem;
  overflow: hidden;
  background: #000;
  border-block: 1px solid var(--hairline);
  padding-block: 1rem 1.35rem;
}
.sl-wallscape-strip-track {
  display: flex;
  width: max-content;
  animation: sl-wallscape-marquee 64s linear infinite;
}
.sl-wallscape-strip-group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.4vw, 2.4rem);
  padding-right: clamp(1.5rem, 2.4vw, 2.4rem);
  flex: none;
}
/* one chip per brokerage: square brand icon plus the name, so wordmark art and
   favicon art read as the same thing */
.sl-broker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: rgba(246, 246, 242, 0.82);
  white-space: nowrap;
}
.sl-broker-chip img {
  width: 26px;
  height: 26px;
  flex: none;
  object-fit: contain;
  border-radius: 6px;
}
@keyframes sl-wallscape-marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 640px) {
  .sl-wallscape-strip {
    margin-top: 1.2rem;
    padding-block: 0.85rem 1rem;
  }
  .sl-wallscape-brokers {
    margin-bottom: 0.8rem;
  }
  .sl-broker-chip {
    font-size: 0.9rem;
  }
  .sl-broker-chip img {
    width: 22px;
    height: 22px;
  }
}