/* Carried over from the app, unchanged except where marked: this file is a copy of
   web-v3/src/widgets/sales-landing/sales-landing.css (the sales landing kit), which was
   written to mirror this site and defines every colour, font and radius it needs inside
   `.sl`. Nothing here reaches for an app theme token, an asset or a build step, so it
   ports as it stands.

   Three differences from the app copy, each marked in place below:
     1. the price figure, the billing toggle and the ROI calculator are gone. The site
        does not publish price, so the rules that draw one have no markup to style here
        and keeping them would invite that markup back.
     2. a `SITE ONLY` block at the end: the caption inside the window chrome, the spacing
        of the illustration sentence beside it, the story rail on narrow screens (the app
        puts a replica inside every chapter there; this page has one rail stage for all
        of them) and room under the footer for the mobile bar.
     3. the reduced-motion block does more than the app's. `css/evolution.css`, which
        every page of this site loads, sets `* { animation: none !important }` under
        reduced motion. That kills `animation-name` outright, so the kit's own trick of
        collapsing every timeline to 1ms cannot land a final frame, and the states that
        only exist at the end of a timeline would sit stacked on top of the ones they
        replace. They are written out explicitly instead.

*/

/* Sales landing kit: a MARKETING surface, not a product screen. Shared by
   every offer page under `pages/sales-*`, so nothing here may be named after
   one offer.

   It mirrors the brand site's language (public-website: cream ground, deep
   ink, cyan and orange light, Familjen Grotesk + Instrument Sans) so an ad,
   the site and this page read as one company. Everything is scoped under
   `.sl`: the app's theme tokens must not leak in, and these pages commit to a
   single light look regardless of the app theme.

   Motion rule: every animation demonstrates the product doing a job (the
   replica of the workspace), answers the visitor's action, or is the single
   page-load sequence. Reduced motion collapses all of it to the final frame.

   A rule only one offer can ever match does NOT belong here: it goes in
   `pages/sales-<offer>/<offer>.css`, under the `sl-offer-<offer>` class that
   page adds beside `.sl`. */

@property --sl-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root:has(.sl) body {
  background: #f5f6f8;
}

@media (prefers-reduced-motion: no-preference) {
  :root:has(.sl) {
    scroll-behavior: smooth;
  }
}

:root:has(.sl) {
  scroll-padding-top: 84px;
}

.sl {
  --cream: #f5f6f8;
  --paper: #ffffff;
  --ink: #040321;
  --text: rgba(4, 3, 33, 0.7);
  --text-2: rgba(4, 3, 33, 0.52);
  --line: rgba(4, 3, 33, 0.1);
  --line-2: rgba(4, 3, 33, 0.18);
  --cyan: #00b2e9;
  --cyan-deep: #046c8e;
  --cyan-tint: #e6f6fc;
  --orange: #f68b35;
  --orange-tint: #fff0e3;
  --violet: #7c6bf0;
  --violet-tint: #efedff;
  --green: #16a36b;
  --green-tint: #e4f6ee;
  --night: #07061f;
  --night-2: #110f33;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Familjen Grotesk", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --app: "Inter", ui-sans-serif, system-ui, sans-serif;

  min-height: 100vh;
  background: var(--cream);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

.sl a {
  color: inherit;
}

.sl :focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

.sl-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(18px, 4vw, 48px);
}

.sl-section {
  position: relative;
  padding-block: clamp(72px, 10vw, 128px);
}

/* ---------- type ---------- */

.sl-h1,
.sl-h2,
.sl-h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  text-wrap: balance;
}

.sl-h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* A headline whose longest line runs past the slot keeps every word and gives up
   six percent of its size. Measured at the 497px desktop column: these turn over
   between 65px and 68px, so the ceiling drops one step rather than the copy. */
.sl-h1.is-long {
  font-size: clamp(2.45rem, 5vw, 4rem);
}

.sl-h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.sl-h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.sl-lead {
  margin: 0;
  max-width: 36em;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--text);
}

/* One phrase inside a heading or a lead, marked as the turn of the sentence.
   Shared by every offer page, so it is named for the job and never for a page.

   Colour is not the only signal. `--cyan-deep` reads 5.55:1 on the cream
   ground, past AA for body text and well past the 3:1 a headline needs, but a
   reader who cannot separate it from the ink still gets the weight and the
   rule under the phrase. That rule is `text-decoration`, not a drawn bar, so
   it follows the phrase when the headline wraps on a phone, and it is shallow
   enough to clear the `overflow: hidden` that `.sl-line` needs for the rise.

   `font-style: inherit` because the display face ships upright only: an <em>
   left on its default would be synthesised into a slanted headline. */
.sl-emphasis {
  color: var(--cyan-deep);
  font-weight: 700;
  font-style: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.07em;
}

.sl-head {
  display: grid;
  gap: 18px;
  max-width: 780px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.sl-head.is-center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

/* ---------- buttons ---------- */

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 700 0.97rem/1.2 var(--body);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.sl-btn.is-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 28px rgba(4, 3, 33, 0.2);
}

.sl-btn.is-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(4, 3, 33, 0.26);
}

.sl-btn.is-ghost {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

.sl-btn.is-ghost:hover {
  border-color: var(--cyan);
  color: var(--cyan-deep);
}

.sl-btn.is-big {
  min-height: 56px;
  padding: 16px 28px;
  font-size: 1.04rem;
}

.sl-btn.is-small {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.9rem;
}

.sl-btn.is-block {
  width: 100%;
}

.sl-btn-arrow {
  transition: transform 0.2s var(--ease);
}

.sl-btn:hover .sl-btn-arrow {
  transform: translateX(4px);
}

/* ---------- header ---------- */

.sl-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.sl-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(245,246,248, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
}

.sl-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(18px, 4vw, 48px);
}

.sl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 700 1.28rem/1 var(--display);
  letter-spacing: -0.03em;
}

.sl-nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.sl-nav-links a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
}

.sl-nav-links a:hover {
  background: rgba(4, 3, 33, 0.05);
  color: var(--ink);
}

.sl-lang {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 99px;
}

.sl-lang button {
  border: 0;
  border-radius: 99px;
  padding: 5px 9px;
  background: transparent;
  color: var(--text-2);
  font: 700 0.7rem/1 var(--body);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.sl-lang button.is-on {
  background: var(--ink);
  color: #fff;
}

/* ---------- hero ---------- */

.sl-hero {
  position: relative;
  padding-block: clamp(36px, 6vw, 72px) clamp(64px, 8vw, 104px);
  overflow: hidden;
}

.sl-orbs,
.sl-night-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sl-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  animation: sl-drift 18s ease-in-out infinite alternate;
}

.sl-orb.is-a {
  top: -220px;
  right: -180px;
  width: 860px;
  height: 860px;
  opacity: 0.75;
  background:
    radial-gradient(45% 45% at 38% 32%, rgba(0, 178, 233, 0.7) 0%, rgba(0, 178, 233, 0) 66%),
    radial-gradient(55% 55% at 72% 62%, rgba(246, 139, 53, 0.58) 0%, rgba(246, 139, 53, 0) 64%),
    radial-gradient(70% 70% at 50% 50%, rgba(124, 107, 240, 0.28) 0%, rgba(245,246,248, 0) 76%);
}

.sl-orb.is-b {
  bottom: -320px;
  left: -300px;
  width: 700px;
  height: 700px;
  opacity: 0.55;
  animation-duration: 22s;
  background:
    radial-gradient(50% 50% at 60% 40%, rgba(0, 178, 233, 0.5) 0%, rgba(0, 178, 233, 0) 67%),
    radial-gradient(60% 60% at 35% 65%, rgba(246, 139, 53, 0.34) 0%, rgba(246, 139, 53, 0) 62%);
}

.sl-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.sl-hero-copy {
  display: grid;
  gap: 26px;
  justify-items: start;
}

.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 9px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(4, 3, 33, 0.05);
}

/* The Bluey mark, drawn: three stacked bars in the brand gradient. */
.sl-mark {
  display: inline-grid;
  gap: 2px;
  width: 16px;
}

.sl-mark i {
  display: block;
  height: 4.4px;
  border-radius: 3px;
}

.sl-mark i:nth-child(1) {
  background: var(--orange);
  width: 80%;
}

.sl-mark i:nth-child(2) {
  background: var(--ink);
}

.sl-mark i:nth-child(3) {
  background: var(--cyan);
}

.sl-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.sl-line > .sl-rise {
  display: block;
}

.sl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sl-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 0.92rem;
}

.sl-assure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sl-assure svg {
  color: var(--green);
}

.sl-rise {
  animation: sl-rise 0.9s var(--ease-out) calc(var(--i, 0) * 90ms + 80ms) both;
}

.sl-line > .sl-rise {
  animation-name: sl-rise-line;
}

/* No filter on the stage: a lingering filter layer softens its small text. */
.sl-hero-stage.sl-rise {
  animation-name: sl-rise-soft;
}

.sl-hero-stage {
  position: relative;
  display: grid;
  gap: 16px;
  perspective: 1400px;
}

.sl-stage-frame {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 30%;
  position: relative;
  border-radius: 22px;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
  box-shadow:
    0 40px 90px -30px rgba(4, 3, 33, 0.38),
    0 12px 30px -12px rgba(4, 3, 33, 0.2);
}

.sl-stage-frame.is-flat {
  transform: none;
}

.sl-stage-spot {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.22),
    transparent 60%
  );
  mix-blend-mode: soft-light;
}

.sl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.sl-tab {
  display: grid;
  gap: 7px;
  min-width: 88px;
  padding: 8px 10px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font: 600 0.84rem/1 var(--body);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.sl-tab:hover {
  background: rgba(4, 3, 33, 0.04);
  color: var(--ink);
}

.sl-tab.is-active {
  color: var(--ink);
}

.sl-tab-track {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(4, 3, 33, 0.1);
}

.sl-tab.is-active .sl-tab-track {
  background: rgba(4, 3, 33, 0.14);
}

.sl-tab-fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--orange));
  transform-origin: left;
  animation: sl-fill var(--dur, 7000ms) linear both;
}

.sl-tab-fill.is-paused {
  animation-play-state: paused;
}

.sl-tab-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  cursor: pointer;
}

/* ---------- workspace replica ---------- */

.sl-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  height: clamp(400px, 38vw, 470px);
  overflow: hidden;
  border: 1px solid rgba(4, 3, 33, 0.12);
  border-radius: 22px;
  background: #f3f3f6;
  color: #1c1b29;
  font-family: var(--app);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

.sl-app-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid #e6e6ec;
  background: #fff;
}

.sl-app-dots {
  display: inline-flex;
  gap: 5px;
}

.sl-app-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2e1e8;
}

.sl-app-ws {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}

.sl-app-ws b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ececf1;
  font-size: 10px;
}

.sl-app-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-width: 260px;
  padding: 5px 10px;
  border: 1px solid #e6e6ec;
  border-radius: 8px;
  background: #f7f7f9;
  color: #8d8b9c;
}

.sl-app-search svg {
  color: var(--cyan);
}

.sl-app-body {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  min-height: 0;
}

.sl-side {
  --row-h: 27px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  border-right: 1px solid #e6e6ec;
  background: #fff;
}

.sl-side-pill {
  position: absolute;
  top: calc(10px + var(--row, 1) * var(--row-h));
  left: 8px;
  right: 8px;
  height: var(--row-h);
  border-radius: 8px;
  background: #ececf1;
  transition: top 0.55s var(--ease-out);
}

.sl-side-section,
.sl-side-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--row-h);
  flex: none;
  padding-inline: 8px;
  white-space: nowrap;
}

.sl-side-section {
  align-items: flex-end;
  padding-bottom: 5px;
  color: #8d8b9c;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sl-side-item {
  color: #3a3947;
  font-weight: 500;
  transition: color 0.3s ease;
}

.sl-side-item svg {
  flex: none;
  color: #6e6c7e;
}

.sl-side-item.is-nested {
  padding-left: 20px;
  font-size: 11px;
}

.sl-side-item.is-active {
  color: #0f0e1d;
  font-weight: 600;
}

.sl-side-item.is-active svg {
  color: var(--cyan-deep);
}

.sl-side-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-side-caret {
  margin-left: auto;
}

.sl-app-main {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/* ---------- scene primitives ---------- */

.sl-s {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  animation: sl-fade 0.35s ease both;
}

.sl-s-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0f0e1d;
  font-size: 13px;
  font-weight: 700;
}

.sl-s-head svg {
  color: var(--cyan-deep);
}

/* The tab inside the row, drawn as the active pill of the real tab strip: a
   module with tabs puts several scenes on one menu row, and without this they
   would all read as the same screen. */
.sl-s-tab {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--cyan-tint);
  color: var(--cyan-deep);
  font-size: 11px;
  font-weight: 600;
}


.sl-w {
  animation: sl-word 0.38s ease var(--d, 0ms) both;
}

.sl-pop {
  animation: sl-pop 0.5s var(--ease-out) var(--d, 0ms) both;
}

.sl-fly {
  animation: sl-fly 0.7s var(--ease-out) var(--d, 0ms) both;
}

.sl-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(0, 178, 233, 0.25);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation:
    sl-rotate 0.8s linear infinite,
    sl-hide 0.2s ease var(--d, 99s) forwards;
}

.sl-spin.is-small {
  width: 10px;
  height: 10px;
}

/* `--d` inherits: inside a timed state the spinner must keep turning instead
   of hiding on the parent's delay. */
.sl-state .sl-spin {
  animation: sl-rotate 0.8s linear infinite;
}

.sl-bubble {
  align-self: flex-end;
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px 14px 4px 14px;
  background: #040321;
  color: #fff;
  font-size: 12px;
}

.sl-bubble.is-compact {
  max-width: 100%;
}

.sl-activity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 11px;
  border: 1px solid #e3e3ea;
  border-radius: 99px;
  background: #fff;
  color: #5d5b6d;
  font-size: 11px;
}

.sl-activity-icons {
  display: inline-grid;
  place-items: center;
}

.sl-activity-icons > * {
  grid-area: 1 / 1;
}

.sl-activity-done {
  color: var(--green);
  animation: sl-pop 0.4s var(--ease-out) var(--d, 0ms) both;
}

.sl-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.sl-answer {
  padding: 12px 14px;
  border: 1px solid #e6e6ec;
  border-radius: 14px;
  background: #fff;
  color: #2c2b3a;
  box-shadow: 0 6px 18px rgba(4, 3, 33, 0.04);
}

.sl-answer p {
  margin: 0 0 6px;
  font-weight: 600;
}

.sl-answer ul {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding-left: 16px;
  list-style: disc;
}

.sl-answer li::marker {
  color: var(--cyan);
}

.sl-li {
  animation: sl-fade 0.25s ease var(--d, 0ms) both;
}

.sl-source,
.sl-chip-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(0, 178, 233, 0.35);
  border-radius: 99px;
  background: var(--cyan-tint);
  color: var(--cyan-deep);
  font-size: 10.5px;
  font-weight: 600;
}

.sl-chip-file {
  margin-left: auto;
  border-color: #e3e3ea;
  background: #fff;
  color: #5d5b6d;
}

.sl-composer {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e3e3ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(4, 3, 33, 0.06);
}

.sl-composer-text {
  display: grid;
  min-height: 18px;
}

.sl-composer-text > * {
  grid-area: 1 / 1;
}

.sl-composer-typed {
  color: #1c1b29;
  animation: sl-hide 0.2s ease var(--d, 0ms) forwards;
}

.sl-composer-placeholder {
  color: #9b99a8;
  animation: sl-fade 0.3s ease var(--d, 0ms) both;
}

.sl-composer-placeholder.is-static {
  animation: none;
}

.sl-caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--cyan);
  animation: sl-blink 0.9s steps(1) infinite;
}

.sl-composer-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8d8b9c;
}

.sl-composer-at {
  font-weight: 600;
}

.sl-composer-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.sl-composer-send {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  background: #ececf1;
  color: #6e6c7e;
  animation: sl-press 0.5s ease var(--d, 99s) both;
}

.sl-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 99px;
  background: #040321;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(4, 3, 33, 0.25);
}

.sl-toast svg {
  color: var(--orange);
}

.sl-file-ext {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.sl-file-ext.is-cyan {
  background: var(--cyan-tint);
  color: var(--cyan-deep);
}

.sl-file-ext.is-orange {
  background: var(--orange-tint);
  color: #c4621a;
}

.sl-file-ext.is-green {
  background: var(--green-tint);
  color: #0f7a50;
}

.sl-file-ext.is-violet {
  background: var(--violet-tint);
  color: #5a48cf;
}

/* ---------- scene: memory ---------- */

.sl-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 1.5px dashed rgba(0, 178, 233, 0.45);
  border-radius: 12px;
  background: rgba(0, 178, 233, 0.05);
  color: var(--cyan-deep);
  font-weight: 600;
}

.sl-files {
  display: grid;
  gap: 8px;
}

.sl-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 56px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e6e6ec;
  border-radius: 10px;
  background: #fff;
}

.sl-file-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-file-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #ececf1;
}

.sl-file-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform-origin: left;
  animation: sl-fill 1.25s var(--ease) var(--d, 0ms) both;
}

.sl-file-status {
  display: grid;
  min-width: 64px;
  font-size: 10.5px;
  font-weight: 600;
}

.sl-file-status > * {
  grid-area: 1 / 1;
}

.sl-file-reading {
  color: #8d8b9c;
  animation: sl-hide 0.2s ease var(--d, 0ms) forwards;
}

.sl-file-ready {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
}

/* ---------- scene: connect ---------- */

.sl-conn-field {
  position: relative;
  flex: 1;
  min-height: 0;
}

.sl-conn-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sl-conn-lines line {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.sl-conn-base {
  stroke: rgba(4, 3, 33, 0.08);
  stroke-width: 1.5;
}

.sl-conn-draw {
  stroke: rgba(4, 3, 33, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sl-draw 0.8s var(--ease) var(--d, 0ms) forwards;
}

.sl-conn-flow {
  stroke-width: 2.5;
  stroke-dasharray: 6 10;
  opacity: 0;
  animation:
    sl-fade 0.3s ease var(--d, 0ms) forwards,
    sl-dash 0.9s linear var(--d, 0ms) infinite;
}

.sl-conn-flow.is-cyan {
  stroke: var(--cyan);
}

.sl-conn-flow.is-orange {
  stroke: var(--orange);
}

.sl-conn-flow.is-green {
  stroke: var(--green);
}

.sl-conn-flow.is-violet {
  stroke: var(--violet);
}

.sl-conn-hub {
  position: absolute;
  top: 48%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 2px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 210deg, var(--cyan), var(--violet), var(--orange), var(--cyan)) border-box;
  box-shadow:
    0 0 0 7px rgba(0, 178, 233, 0.1),
    0 14px 30px rgba(4, 3, 33, 0.14);
  transform: translate(-50%, -50%);
}

.sl-conn-hub.sl-pop {
  animation-name: sl-pop-centered;
}

.sl-conn-hub .sl-mark {
  width: 22px;
}

.sl-conn-hub .sl-mark i {
  height: 6px;
}

.sl-conn-hub b {
  font-size: 11px;
}

.sl-conn-node {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
}

.sl-conn-node.sl-pop {
  animation-name: sl-pop-centered;
}

.sl-conn-tile {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e3e3ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(4, 3, 33, 0.08);
}

.sl-conn-node.is-cyan .sl-conn-tile {
  color: var(--cyan-deep);
}

.sl-conn-node.is-orange .sl-conn-tile {
  color: #d9621a;
}

.sl-conn-node.is-green .sl-conn-tile {
  color: var(--green);
}

.sl-conn-node.is-violet .sl-conn-tile {
  color: var(--violet);
}

.sl-conn-name {
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.sl-conn-ok {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--green-tint);
  color: #0f7a50;
  font-size: 9px;
  font-weight: 700;
}

/* A destination that is connected and cannot carry anything yet. Quiet on
   purpose: the green chip beside it is a promise, and this one is not. */
.sl-conn-ok.is-waiting {
  background: rgba(4, 3, 33, 0.06);
  color: rgba(4, 3, 33, 0.55);
}

/* ---------- scene: data lab ---------- */

.sl-lab-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.sl-sheet {
  align-self: start;
  overflow: hidden;
  border: 1px solid #e3e3ea;
  border-radius: 10px;
  background: #fff;
  font-size: 11px;
}

.sl-sheet-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 6px 10px;
  border-top: 1px solid #f0f0f4;
}

.sl-sheet-row.is-head {
  border-top: 0;
  background: #f7f7f9;
  color: #6e6c7e;
  font-weight: 700;
}

.sl-scan {
  animation: sl-scan 0.9s ease var(--d, 0ms) both;
}

.sl-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sl-chart {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 10px;
  min-height: 120px;
  padding: 14px 14px 8px;
  border: 1px solid #e3e3ea;
  border-radius: 12px;
  background:
    repeating-linear-gradient(to top, #f1f1f5 0 1px, transparent 1px 25%),
    #fff;
}

.sl-bar-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
  justify-content: flex-end;
}

.sl-bar {
  width: 100%;
  max-width: 34px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #7dd7f5, var(--cyan));
  transform-origin: bottom;
  animation: sl-grow 0.7s var(--ease-out) var(--d, 0ms) both;
}

.sl-bar.is-hot {
  background: linear-gradient(180deg, #ffc38f, var(--orange));
  box-shadow: 0 6px 16px -6px rgba(246, 139, 53, 0.7);
}

.sl-bar-label {
  color: #8d8b9c;
  font-size: 10px;
  text-transform: capitalize;
}

.sl-insight {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 7px 12px;
  border: 1px solid rgba(246, 139, 53, 0.4);
  border-radius: 10px;
  background: var(--orange-tint);
  color: #a54d0e;
  font-weight: 600;
}

/* ---------- scene: deliver ---------- */

.sl-deck {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
}

.sl-slide {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  width: min(78%, 330px);
  aspect-ratio: 16 / 9;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid #e3e3ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(4, 3, 33, 0.14);
}

.sl-slide.is-back {
  position: absolute;
  padding: 0;
  background: #fbfbfd;
  box-shadow: 0 10px 24px rgba(4, 3, 33, 0.1);
}

.sl-slide.is-one {
  --fan-x: -22%;
  --fan-r: -7deg;
}

.sl-slide.is-two {
  --fan-x: 22%;
  --fan-r: 7deg;
}

.sl-fan {
  animation: sl-fan 0.8s var(--ease-out) var(--d, 0ms) both;
}

.sl-slide-brand {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--orange), var(--violet), var(--cyan));
  transform-origin: top;
  animation: sl-grow 0.6s var(--ease) var(--d, 0ms) both;
}

.sl-slide-title {
  color: #0f0e1d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  animation: sl-pop 0.5s var(--ease-out) var(--d, 0ms) both;
}

.sl-slide-line {
  display: block;
  width: 80%;
  height: 6px;
  border-radius: 99px;
  background: #ececf1;
  transform-origin: left;
  animation: sl-fill 0.6s var(--ease) var(--d, 0ms) both;
}

.sl-slide-line.is-short {
  width: 55%;
}

.sl-slide-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 42px;
  margin-top: 4px;
}

.sl-slide-bars i {
  flex: 1;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #7dd7f5, var(--cyan));
  transform-origin: bottom;
  animation: sl-grow 0.6s var(--ease-out) var(--d, 0ms) both;
}

.sl-slide-bars i:last-child {
  background: linear-gradient(180deg, #ffc38f, var(--orange));
}

.sl-outputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sl-output {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border: 1px solid #e3e3ea;
  border-radius: 99px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
}

.sl-output-ok {
  color: var(--green);
}

/* ---------- scene: automate ---------- */

.sl-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 99px;
  background: #040321;
  color: #fff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sl-clock-face {
  display: grid;
}

.sl-clock-face > * {
  grid-area: 1 / 1;
}

.sl-clock-a {
  animation: sl-roll-out 0.35s var(--ease) 0.9s forwards;
}

.sl-clock-b {
  animation: sl-roll-in 0.35s var(--ease) var(--d, 0ms) both;
}

.sl-routines {
  display: grid;
  gap: 8px;
}

.sl-routine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6e6ec;
  border-radius: 12px;
  background: #fff;
}

.sl-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.sl-avatar.is-cyan {
  background: linear-gradient(135deg, #3cc8f2, var(--cyan-deep));
}

.sl-avatar.is-orange {
  background: linear-gradient(135deg, #ffb070, #e06c14);
}

.sl-avatar.is-violet {
  background: linear-gradient(135deg, #a497ff, #5a48cf);
}

.sl-avatar.is-green {
  background: linear-gradient(135deg, #4fd19c, #0f7a50);
}

.sl-routine-text {
  display: grid;
  min-width: 0;
}

.sl-routine-text b {
  color: #0f0e1d;
  font-size: 12px;
}

.sl-routine-text span {
  overflow: hidden;
  color: #6e6c7e;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-routine-state {
  display: grid;
  justify-items: end;
}

.sl-routine-state > * {
  grid-area: 1 / 1;
}

.sl-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-state.is-scheduled {
  background: #f1f1f5;
  color: #6e6c7e;
  animation: sl-hide 0.2s ease var(--d, 0ms) forwards;
}

.sl-state.is-running {
  opacity: 0;
  background: var(--cyan-tint);
  color: var(--cyan-deep);
  animation: sl-window 0.9s linear var(--d, 0ms) forwards;
}

.sl-state.is-done {
  background: var(--green-tint);
  color: #0f7a50;
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

/* The `gate` block's denied chip. The three chips above all mean progress, and
   "this one does not get through" is not a step in a pipeline: dressing it in
   the green `is-done` would say the opposite of what happens. */
.sl-state.is-blocked {
  background: rgba(4, 3, 33, 0.06);
  color: rgba(4, 3, 33, 0.55);
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

.sl-state.is-blocked svg {
  opacity: 0.65;
}

/* The `queue` block's refusal: the destination answered no. It is NOT the
   muted `is-blocked` above, which means "this one was never let through" and
   is the end of that row; a refused piece is still in the offer's hands, so
   the chip is warm and the retry sits beside it, the way the product puts
   "try again" on the piece itself. */
.sl-refusal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: sl-pop 0.45s var(--ease-out) var(--d, 0ms) both;
}

.sl-state.is-refused {
  background: var(--orange-tint);
  color: #a54d0e;
}

.sl-retry {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: #fff;
  color: #3a3947;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.sl-gate .sl-routine-text b {
  font-size: 12.5px;
}

/* ---------- before / after ---------- */

.sl-ba {
  --pos: 50%;
  position: relative;
  height: clamp(380px, 42vw, 500px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 30px 70px -40px rgba(4, 3, 33, 0.45);
  user-select: none;
}

.sl-ba-layer {
  position: absolute;
  inset: 0;
}

.sl-ba-before {
  background:
    radial-gradient(circle at 30% 30%, rgba(4, 3, 33, 0.05), transparent 60%),
    #e9e6e1;
}

.sl-ba-after {
  display: grid;
  place-items: center;
  clip-path: inset(0 0 0 var(--pos));
  background:
    radial-gradient(60% 70% at 70% 30%, rgba(0, 178, 233, 0.16), transparent 70%),
    radial-gradient(50% 60% at 30% 80%, rgba(246, 139, 53, 0.12), transparent 70%),
    var(--cream);
}

.sl-mess-window {
  position: absolute;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(4, 3, 33, 0.12);
  border-radius: 12px;
  background: #fbfaf8;
  color: #57556a;
  font-size: 0.8rem;
  box-shadow: 0 14px 30px rgba(4, 3, 33, 0.12);
  animation: sl-jitter 5s ease-in-out infinite alternate;
}

.sl-mess-window.is-tabs {
  top: 9%;
  left: 5%;
  width: 46%;
  rotate: -3deg;
}

.sl-mess-tabs {
  display: flex;
  gap: 3px;
}

.sl-mess-tabs i {
  flex: 1;
  height: 14px;
  border-radius: 4px 4px 0 0;
  background: #d9d6d0;
}

.sl-mess-tabs i:nth-child(3n) {
  background: #cfcbc3;
}

.sl-mess-note {
  color: #c2410c;
  font-weight: 700;
}

.sl-mess-window.is-files {
  top: 36%;
  left: 12%;
  width: 40%;
  rotate: 2.5deg;
  animation-delay: -1.5s;
}

.sl-mess-file {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  white-space: nowrap;
}

.sl-mess-file:last-child {
  color: #0f0e1d;
  font-weight: 700;
}

.sl-mess-window.is-search {
  display: flex;
  align-items: center;
  top: 68%;
  left: 4%;
  gap: 9px;
  rotate: -1.5deg;
  animation-delay: -3s;
}

.sl-mess-window.is-paste {
  top: 20%;
  left: 36%;
  width: 34%;
  rotate: 5deg;
  animation-delay: -2.2s;
}

.sl-mess-window.is-paste i {
  display: block;
  height: 7px;
  border-radius: 99px;
  background: #dedbd5;
}

.sl-mess-window.is-paste i.is-short {
  width: 60%;
}

.sl-mess-window.is-late {
  display: flex;
  align-items: center;
  top: 70%;
  left: 38%;
  gap: 8px;
  rotate: 3deg;
  animation-delay: -0.8s;
}

.sl-mess-window.is-late b {
  color: #0f0e1d;
  font-family: var(--display);
  font-size: 1.1rem;
}

.sl-mess-badge {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(229, 72, 77, 0.4);
  animation: sl-nag 2.4s ease-in-out infinite;
}

.sl-mess-badge.is-a {
  top: 7%;
  left: 49%;
}

.sl-mess-badge.is-b {
  top: 66%;
  left: 36%;
  animation-delay: -1.2s;
}

.sl-calm {
  display: grid;
  gap: 12px;
  width: min(460px, 44%);
  margin-left: 52%;
  font-family: var(--app);
  font-size: 0.82rem;
}

.sl-calm .sl-bubble {
  max-width: 100%;
  font-size: 0.82rem;
}

.sl-calm-answer {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid #e6e6ec;
  border-radius: 16px;
  background: #fff;
  color: #2c2b3a;
  box-shadow: 0 24px 50px -24px rgba(4, 3, 33, 0.3);
}

.sl-calm-answer p {
  margin: 0;
  line-height: 1.5;
}

.sl-calm-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--orange);
}

.sl-calm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sl-ba-tag {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
}

.sl-ba-tag.is-before {
  left: 16px;
  background: rgba(4, 3, 33, 0.72);
  color: #fff;
}

.sl-ba-tag.is-after {
  right: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(4, 3, 33, 0.1);
}

.sl-ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(4, 3, 33, 0.08);
  transform: translateX(-1px);
  pointer-events: none;
}

.sl-ba-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 210deg, var(--cyan), var(--violet), var(--orange), var(--cyan)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 24px rgba(4, 3, 33, 0.22);
  transform: translate(-50%, -50%);
}

.sl-ba-handle span::before,
.sl-ba-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.sl-ba-handle span::before {
  left: 11px;
  transform: translateY(-50%) rotate(-45deg);
}

.sl-ba-handle span::after {
  right: 11px;
  transform: translateY(-50%) rotate(135deg);
}

.sl-ba-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.sl-ba:has(.sl-ba-range:focus-visible) .sl-ba-handle span {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- story ---------- */

.sl-story {
  background: linear-gradient(180deg, var(--cream) 0%, #eef6fa 45%, var(--cream) 100%);
}

.sl-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
}

.sl-story-chapters {
  display: grid;
}

.sl-chapter {
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 62vh;
  padding-block: 32px;
  opacity: 0.32;
  transition: opacity 0.45s ease;
}

.sl-chapter.is-active {
  opacity: 1;
}

.sl-chapter:first-child {
  align-content: start;
  min-height: 52vh;
  padding-top: 0;
}

.sl-chapter p {
  margin: 0;
  max-width: 34em;
}

.sl-module {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: var(--cyan-deep);
  font-size: 0.85rem;
  font-weight: 600;
}

.sl-points {
  display: grid;
  gap: 9px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.sl-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink);
  font-weight: 500;
}

.sl-points svg {
  flex: none;
  margin-top: 4px;
  color: var(--green);
}

.sl-story-sticky {
  position: sticky;
  top: calc(50vh - 250px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.sl-story-dots {
  display: grid;
  gap: 8px;
}

.sl-story-dots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--line-2);
  transition:
    height 0.35s var(--ease),
    background-color 0.35s ease;
}

.sl-story-dots i.is-on {
  height: 26px;
  background: linear-gradient(180deg, var(--cyan), var(--orange));
}

.sl-chapter-stage {
  min-height: 460px;
  margin-top: 10px;
}

.sl-chapter-stage .sl-app {
  height: 460px;
}

/* ---------- start ---------- */

.sl-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) 0.2s;
}

.sl-steps.is-seen::before {
  transform: scaleX(1);
}

.sl-step {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
}

.sl-step p {
  margin: 0;
}

.sl-step-n {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  font: 700 1.5rem/1 var(--display);
  box-shadow: 0 10px 24px rgba(4, 3, 33, 0.06);
}


.sl-hint,
.sl-note {
  margin: 0;
  color: var(--text-2);
  font-size: 0.85rem;
}

/* ---------- pricing ---------- */
/* The app's price figure, its monthly/yearly toggle and its loading skeleton
   were removed here: the site never publishes a price, and the card shows the
   written line that sends the reader to the app for it (`.sl-price-sub`). */

.sl-pricing {
  overflow: hidden;
  background: var(--night);
  color: rgba(255, 255, 255, 0.74);
}

.sl-pricing .sl-h2 {
  color: #fff;
}

.sl-pricing .sl-lead {
  color: rgba(255, 255, 255, 0.7);
}

.sl-orb.is-c {
  top: -260px;
  left: 50%;
  width: 900px;
  height: 700px;
  opacity: 0.4;
  translate: -50% 0;
  background:
    radial-gradient(45% 50% at 35% 50%, rgba(0, 178, 233, 0.55), transparent 70%),
    radial-gradient(45% 50% at 65% 50%, rgba(124, 107, 240, 0.5), transparent 70%);
}

.sl-plans {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

/* One card on sale: the two-column grid would hang it off centre. How many
   plans an offer sells is data, not a look, so this reads the cards instead of
   waiting for each page to say it again under its own `sl-offer-*` class. */
.sl-plans:has(.sl-plan:only-child) {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

.sl-plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 26px;
}

.sl-plan.is-plain {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.sl-plan.is-featured {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(124, 107, 240, 0.28), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(0, 178, 233, 0.2), transparent 60%),
    var(--night-2);
  box-shadow:
    0 40px 100px -30px rgba(124, 107, 240, 0.55),
    0 20px 50px -20px rgba(0, 178, 233, 0.35);
}

.sl-plan-ring {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--sl-angle),
    var(--cyan),
    var(--violet),
    var(--orange),
    #ffd2ad,
    var(--cyan)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: sl-orbit 7s linear infinite;
  pointer-events: none;
}

.sl-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 6px 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), #ffb070);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 800;
}

.sl-plan-name {
  margin: 0;
  color: #fff;
  font: 700 1.6rem/1.1 var(--display);
  letter-spacing: -0.02em;
}

.sl-plan-caption {
  margin: -10px 0 0;
  color: rgba(255, 255, 255, 0.62);
}

.sl-price-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.sl-price-sub.is-unavailable {
  color: rgba(255, 255, 255, 0.78);
}

.sl-plan-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-plan-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.86);
}

.sl-plan-list svg {
  flex: none;
  margin-top: 4px;
  color: #5ee0a8;
}

.sl-plan.is-plain .sl-plan-list li {
  color: rgba(255, 255, 255, 0.68);
}

.sl-plan.is-plain .sl-plan-list svg {
  color: rgba(255, 255, 255, 0.45);
}

.sl-btn.is-ghost-light {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
}

.sl-btn.is-ghost-light:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.sl-plan.is-featured .sl-btn.is-primary {
  background: linear-gradient(90deg, var(--orange), #ffa65e);
  color: var(--ink);
  box-shadow: 0 16px 40px -12px rgba(246, 139, 53, 0.7);
}

.sl-plan.is-featured .sl-btn.is-primary:hover {
  box-shadow: 0 22px 48px -12px rgba(246, 139, 53, 0.85);
}

.sl-plan-how {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.86rem;
}

.sl-guarantee {
  margin: 36px 0 0;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ---------- trust ---------- */

.sl-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.sl-trust-list {
  display: grid;
  gap: 22px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.sl-trust-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sl-trust-list li > span:last-child {
  display: grid;
  gap: 3px;
}

.sl-trust-list b {
  color: var(--ink);
  font: 700 1.1rem/1.3 var(--display);
}

.sl-trust-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--cyan-tint);
  color: var(--cyan-deep);
}

.sl-quote {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 30px 70px -40px rgba(4, 3, 33, 0.35);
}

.sl-quote-mark {
  color: var(--orange);
}

.sl-quote blockquote {
  margin: 0;
  color: var(--ink);
  font: 600 clamp(1.25rem, 2vw, 1.55rem)/1.35 var(--display);
  letter-spacing: -0.015em;
}

.sl-quote figcaption {
  display: grid;
  gap: 2px;
  font-size: 0.92rem;
}

.sl-quote figcaption b {
  color: var(--ink);
}

.sl-press {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.sl-onair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.sl-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  animation: sl-onair 1.6s ease-in-out infinite;
}

/* ---------- faq ---------- */

.sl-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.sl-faq-list details {
  border-bottom: 1px solid var(--line);
}

.sl-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  color: var(--ink);
  font: 600 1.08rem/1.4 var(--body);
  list-style: none;
  cursor: pointer;
}

.sl-faq-list summary::-webkit-details-marker {
  display: none;
}

.sl-faq-caret {
  flex: none;
  transition: transform 0.3s var(--ease);
}

.sl-faq-list details[open] .sl-faq-caret {
  transform: rotate(180deg);
}

.sl-faq-list details p {
  margin: -6px 0 22px;
  max-width: 40em;
  animation: sl-pop 0.4s var(--ease-out) both;
}

/* ---------- final + footer ---------- */

.sl-final {
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 50% 100%, rgba(0, 178, 233, 0.18), transparent 70%),
    radial-gradient(40% 50% at 80% 20%, rgba(246, 139, 53, 0.14), transparent 70%),
    var(--cream);
}

.sl-final-inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}

.sl-final-inner .sl-lead {
  max-width: 34em;
}

.sl-final-blu {
  width: clamp(130px, 16vw, 190px);
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(4, 3, 33, 0.22));
  animation: sl-float 7s ease-in-out infinite;
}

.sl-footer {
  padding-block: 36px 110px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.sl-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sl-footer p {
  margin: 0;
}

.sl-sticky {
  position: fixed;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border-radius: 16px;
  background: rgba(4, 3, 33, 0.94);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 18px 40px rgba(4, 3, 33, 0.3);
  transform: translateY(140%);
  transition: transform 0.35s var(--ease-out);
}

.sl-sticky.is-on {
  transform: none;
}

.sl-sticky .sl-btn.is-primary {
  background: var(--orange);
  color: var(--ink);
  box-shadow: none;
}

/* ---------- keyframes ---------- */

@keyframes sl-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
}

@keyframes sl-rise-soft {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes sl-rise-line {
  from {
    opacity: 0;
    transform: translateY(105%);
  }
}

@keyframes sl-drift {
  to {
    transform: translate(-40px, 30px) scale(1.06);
  }
}

@keyframes sl-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sl-word {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes sl-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    filter: blur(3px);
  }
}

@keyframes sl-pop-centered {
  from {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes sl-fly {
  from {
    opacity: 0;
    transform: translate(60px, -40px) rotate(8deg) scale(0.92);
  }
}

@keyframes sl-hide {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes sl-window {
  0%,
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sl-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sl-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes sl-grow {
  from {
    transform: scaleY(0);
  }
}

@keyframes sl-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sl-dash {
  to {
    stroke-dashoffset: -32;
  }
}

@keyframes sl-blink {
  50% {
    opacity: 0;
  }
}

@keyframes sl-press {
  0% {
    background: #ececf1;
    color: #6e6c7e;
  }
  40% {
    transform: scale(0.85);
    background: var(--ink);
    color: #fff;
  }
  100% {
    transform: none;
    background: var(--ink);
    color: #fff;
  }
}

@keyframes sl-scan {
  0% {
    background: transparent;
  }
  30% {
    background: var(--cyan-tint);
  }
  100% {
    background: transparent;
  }
}

@keyframes sl-fan {
  from {
    opacity: 0;
    transform: none;
  }
  to {
    opacity: 1;
    transform: translateX(var(--fan-x)) rotate(var(--fan-r)) scale(0.9);
  }
}

@keyframes sl-roll-out {
  to {
    opacity: 0;
    transform: translateY(-80%);
  }
}

@keyframes sl-roll-in {
  from {
    opacity: 0;
    transform: translateY(80%);
  }
}

@keyframes sl-jitter {
  from {
    translate: 0 0;
  }
  to {
    translate: 3px -4px;
  }
}

@keyframes sl-nag {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.16);
  }
}

@keyframes sl-orbit {
  to {
    --sl-angle: 360deg;
  }
}

@keyframes sl-onair {
  50% {
    opacity: 0.35;
  }
}

@keyframes sl-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .sl-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-hero-copy {
    max-width: 680px;
  }
}

@media (max-width: 999px) {
  .sl-story-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-chapter {
    min-height: 0;
    padding-block: 28px;
    opacity: 1;
  }

  .sl-trust-grid,
  .sl-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-plan.is-featured {
    order: -1;
  }
}

@media (max-width: 860px) {
  .sl-nav-links {
    display: none;
  }

  .sl-lang {
    margin-left: auto;
  }

  .sl-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-steps::before {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }

  .sl-steps.is-seen::before {
    transform: scaleY(1);
  }

  .sl-step {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 18px;
  }

  .sl-step > :not(.sl-step-n) {
    grid-column: 2;
  }

  .sl-step-n {
    grid-row: 1 / span 2;
  }

  .sl-calm {
    width: min(320px, 46%);
    font-size: 0.74rem;
  }

  .sl-mess-window {
    font-size: 0.68rem;
  }
}

@media (max-width: 640px) {
  .sl {
    font-size: 16px;
  }

  .sl-nav .sl-btn {
    display: none;
  }

  .sl-app {
    height: 500px;
  }

  .sl-app-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-side {
    display: none;
  }

  .sl-app-search {
    display: none;
  }

  .sl-tab {
    min-width: 0;
    flex: 1 1 28%;
  }

  .sl-lab-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-sheet {
    display: none;
  }

  .sl-file {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sl-file-bar {
    display: none;
  }

  .sl-ba {
    height: 460px;
  }

  .sl-mess-window.is-paste,
  .sl-mess-window.is-late {
    display: none;
  }

  .sl-mess-window.is-tabs,
  .sl-mess-window.is-files {
    width: 70%;
  }

  .sl-calm {
    width: 46%;
    margin-left: 52%;
    font-size: 0.68rem;
  }

  .sl-calm .sl-bubble {
    font-size: 0.68rem;
  }

  .sl-calm-chips .sl-source {
    display: none;
  }

  .sl-sticky > span {
    font-size: 0.85rem;
    line-height: 1.25;
  }

  .sl-sticky {
    display: flex;
  }
}

/* ---------- reduced motion: jump every timeline to its final frame ---------- */

@media (prefers-reduced-motion: reduce) {
  .sl *,
  .sl *::before,
  .sl *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .sl-stage-frame {
    transform: none;
  }

  /* SITE ONLY. `css/evolution.css` answers reduced motion with
     `*, *::before, *::after { animation: none !important }`, which removes the
     animation NAME, not just its duration: the rule above can no longer land a
     final frame. Every state below is one a timeline only reaches at its end —
     without this the "Reading" label sits on top of "Ready", the scheduled chip
     on top of the done chip, and the typed prompt on top of the placeholder. */
  .sl-composer-typed,
  .sl-file-reading,
  .sl-state.is-scheduled,
  .sl-clock-a,
  .sl-spin {
    display: none !important;
  }

  .sl-state.is-running {
    opacity: 0 !important;
  }

  .sl-conn-draw,
  .sl-conn-flow {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==================== SITE ONLY ====================
   Rules that exist because this page is a static page on bluey.digital and not
   the React route. Nothing above this line was added. */

/* The replica says it is a replica twice: here, on its own strip of the window
   chrome under the title bar, and again as a full sentence in the text flow
   (`.sl-note` beside the stage). A strip rather than a corner of the title bar
   because the title bar already carries the workspace and the ask box, and a
   caption squeezed in beside them is a caption nobody finishes reading. */
.sl-app {
  grid-template-rows: auto auto 1fr;
}

.sl-app-note {
  margin: 0;
  padding: 4px 14px 5px;
  border-bottom: 1px solid #e6e6ec;
  background: #fbfbfd;
  color: #8d8b9c;
  font-size: 10px;
  line-height: 1.3;
}

/* The pause control carries both glyphs and swaps which one is shown, so the
   button never has to be rebuilt. */
.sl-tab-toggle [data-icon] {
  display: inline-flex;
}

.sl-tab-toggle [data-icon][hidden] {
  display: none;
}

/* The trust card holds no testimonial here, so the press line is its whole
   content and the rule that separates it from a quotation has nothing to
   separate it from. */
.sl-quote > .sl-press:first-child {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.sl-hero-stage > .sl-note,
.sl-story-rail > .sl-note,
.sl-contrast .sl-note {
  margin-top: 12px;
}

.sl-story-rail > .sl-note {
  max-width: 420px;
}

/* On narrow screens the app drops the rail and puts a replica inside each
   chapter. One rail stage serves every chapter here, so instead of trailing the
   text it is pinned above it and follows the chapter being read. */
@media (max-width: 999px) {
  .sl-story-rail {
    order: -1;
  }

  .sl-story-sticky {
    top: 70px;
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-story-sticky .sl-app {
    height: clamp(330px, 64vw, 420px);
  }

  .sl-story-dots {
    grid-auto-flow: column;
    justify-content: center;
    gap: 6px;
  }

  .sl-story-dots i.is-on {
    width: 26px;
    height: 6px;
  }
}

/* The mobile bar is fixed over the bottom of the page, and the site's footer is
   the house footer, which knows nothing about it. */
@media (max-width: 640px) {
  body:has(.sl) footer {
    padding-bottom: 96px;
  }
}