/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 22px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fdfdff;
  --accent-2: #f7f9ff;
  --accent-3: #eef1ff;
  --accent-4: #e1e8ff;
  --accent-5: #d3ddff;
  --accent-6: #c3cfff;
  --accent-7: #adbbff;
  --accent-8: #909ffe;
  --accent-9: #4641d9;
  --accent-10: #3b2ec7;
  --accent-11: #4c4ed8;
  --accent-12: #24276a;

  --accent-a1: #0000ff02;
  --accent-a2: #0040ff08;
  --accent-a3: #002dff11;
  --accent-a4: #003cff1e;
  --accent-a5: #003aff2c;
  --accent-a6: #0033ff3c;
  --accent-a7: #002cff52;
  --accent-a8: #0023fd6f;
  --accent-a9: #0700ccbe;
  --accent-a10: #1000bbd1;
  --accent-a11: #0003c8b3;
  --accent-a12: #000452db;

  --accent-contrast: #fff;
  --accent-surface: #f5f8ffcc;
  --accent-indicator: #4641d9;
  --accent-track: #4641d9;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0028 275.6);
      --accent-2: oklch(98.2% 0.0107 275.6);
      --accent-3: oklch(96.1% 0.0207 275.6);
      --accent-4: oklch(93.5% 0.0415 275.6);
      --accent-5: oklch(90.4% 0.062 275.6);
      --accent-6: oklch(86.4% 0.083 275.6);
      --accent-7: oklch(80.8% 0.1046 275.6);
      --accent-8: oklch(72.9% 0.1393 275.6);
      --accent-9: oklch(48.6% 0.2228 275.6);
      --accent-10: oklch(43.5% 0.2228 275.6);
      --accent-11: oklch(51% 0.2054 275.6);
      --accent-12: oklch(31.4% 0.1145 275.6);

      --accent-a1: color(display-p3 0.0196 0.0196 1 / 0.008);
      --accent-a2: color(display-p3 0.0196 0.2667 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.1294 0.9412 / 0.063);
      --accent-a4: color(display-p3 0.0039 0.2118 0.9333 / 0.114);
      --accent-a5: color(display-p3 0.0039 0.1922 0.9294 / 0.165);
      --accent-a6: color(display-p3 0.0039 0.1765 0.9333 / 0.228);
      --accent-a7: color(display-p3 0.0039 0.1412 0.9373 / 0.31);
      --accent-a8: color(display-p3 0.0039 0.1137 0.9294 / 0.424);
      --accent-a9: color(display-p3 0.0235 0 0.7569 / 0.746);
      --accent-a10: color(display-p3 0.0549 0 0.6941 / 0.82);
      --accent-a11: color(display-p3 0 0.0118 0.7373 / 0.702);
      --accent-a12: color(display-p3 0 0.0078 0.298 / 0.855);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9725 1 / 0.8);
      --accent-indicator: oklch(48.6% 0.2228 275.6);
      --accent-track: oklch(48.6% 0.2228 275.6);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8e8c99;
  --grayscale-track: #8e8c99;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #080a16;
  --accent-2: #131625;
  --accent-3: #1d2347;
  --accent-4: #242b62;
  --accent-5: #2f3675;
  --accent-6: #3a4386;
  --accent-7: #47529c;
  --accent-8: #5662ba;
  --accent-9: #7b8cff;
  --accent-10: #7080f2;
  --accent-11: #9cadff;
  --accent-12: #d7dfff;

  --accent-a1: #0000eb07;
  --accent-a2: #7885f917;
  --accent-a3: #6073fe3b;
  --accent-a4: #5868fe58;
  --accent-a5: #6371ff6c;
  --accent-a6: #6c7cff7e;
  --accent-a7: #7283fe96;
  --accent-a8: #7485feb6;
  --accent-a9: #7b8cff;
  --accent-a10: #7686fef2;
  --accent-a11: #9cadff;
  --accent-a12: #d7dfff;

  --accent-contrast: #fff;
  --accent-surface: #1d213a80;
  --accent-indicator: #7b8cff;
  --accent-track: #7b8cff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(15% 0.0251 274.7);
      --accent-2: oklch(20.5% 0.0294 274.7);
      --accent-3: oklch(27% 0.067 274.7);
      --accent-4: oklch(31.6% 0.097 274.7);
      --accent-5: oklch(36.3% 0.1061 274.7);
      --accent-6: oklch(41.2% 0.1108 274.7);
      --accent-7: oklch(46.8% 0.1197 274.7);
      --accent-8: oklch(53.1% 0.1377 274.7);
      --accent-9: oklch(68% 0.1692 274.7);
      --accent-10: oklch(64.2% 0.1692 274.7);
      --accent-11: oklch(77% 0.129 274.7);
      --accent-12: oklch(90.8% 0.0474 274.7);

      --accent-a1: color(display-p3 0 0 1 / 0.021);
      --accent-a2: color(display-p3 0.549 0.5569 1 / 0.084);
      --accent-a3: color(display-p3 0.4078 0.4667 1 / 0.222);
      --accent-a4: color(display-p3 0.3686 0.4235 1 / 0.331);
      --accent-a5: color(display-p3 0.4157 0.4549 0.9961 / 0.406);
      --accent-a6: color(display-p3 0.4549 0.502 1 / 0.477);
      --accent-a7: color(display-p3 0.4824 0.5373 1 / 0.565);
      --accent-a8: color(display-p3 0.4863 0.5412 1 / 0.687);
      --accent-a9: color(display-p3 0.5098 0.5647 0.9961 / 0.967);
      --accent-a10: color(display-p3 0.4863 0.5451 1 / 0.917);
      --accent-a11: color(display-p3 0.6392 0.6902 1 / 0.975);
      --accent-a12: color(display-p3 0.8588 0.8863 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1176 0.1255 0.2196 / 0.5);
      --accent-indicator: oklch(68% 0.1692 274.7);
      --accent-track: oklch(68% 0.1692 274.7);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #696e77;
  --grayscale-track: #696e77;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(70, 65, 217, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(123, 140, 255, 1);
  --background: rgba(9, 11, 16, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #090b10;
}

/* FluxerList docs theme
   Brand: indigo #4641D9 (light) / #7B8CFF (dark) on near-black #090B10 */

:root {
  --fl-indigo: #4641d9;
  --fl-periwinkle: #7b8cff;
  --fl-glow: rgba(70, 65, 217, 0.18);
  --fl-border: rgba(70, 65, 217, 0.22);
}

:root.dark {
  --fl-glow: rgba(123, 140, 255, 0.14);
  --fl-border: rgba(123, 140, 255, 0.2);
}

/* Ambient page glow */
.fern-background-image {
  background-image:
    radial-gradient(60rem 28rem at 85% -10%, var(--fl-glow), transparent 60%),
    radial-gradient(40rem 24rem at 0% 0%, rgba(70, 65, 217, 0.05), transparent 60%);
}

/* Cards: lift and tint on hover */
.fern-card {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.fern-card:hover {
  transform: translateY(-2px);
  border-color: var(--fl-border);
  box-shadow: 0 10px 30px -14px var(--fl-glow);
}
.fern-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--fl-border);
  box-shadow: 0 10px 30px -14px var(--fl-glow);
}

/* Landing hero */
.fl-hero {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 64rem;
  padding: 4.5rem 1.5rem 3rem;
  text-align: center;
}

.fl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-glow);
  color: var(--fl-indigo);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

:root.dark .fl-eyebrow {
  color: var(--fl-periwinkle);
}

.fl-hero h1 {
  margin: 1.25rem 0 0.9rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.fl-accent-text {
  color: var(--fl-indigo);
}

:root.dark .fl-accent-text {
  color: var(--fl-periwinkle);
}

.fl-lede {
  margin: 0 auto;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.6;
  opacity: 0.78;
}

.fl-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Stat strip */
.fl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 2.5rem auto 0;
  max-width: 44rem;
}

.fl-stat {
  padding: 0.9rem 1rem;
  border: 1px solid var(--fl-border);
  border-radius: 0.9rem;
  background: var(--fl-glow);
  text-align: center;
}

.fl-stat strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fl-stat span {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* Landing body */
.fl-section {
  margin: 0 auto;
  max-width: 64rem;
  padding: 1.5rem 1.5rem 0;
}

.fl-section h2 {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fl-section > p {
  margin-bottom: 1.1rem;
  opacity: 0.72;
}

/* Closing CTA: lines up with the card grids above (sections pad 1.5rem) */
.fl-footer-cta {
  margin: 3.5rem auto 4rem;
  width: min(61rem, calc(100% - 3rem));
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--fl-border);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, var(--fl-glow), transparent 70%);
  text-align: center;
}

.fl-footer-cta h3 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fl-footer-cta p {
  margin: 0 auto 1.4rem;
  max-width: 34rem;
  opacity: 0.72;
}

/* Prose polish */
.fern-prose h2 {
  letter-spacing: -0.015em;
}

.fern-prose table {
  font-size: 0.925rem;
}

@media (max-width: 640px) {

  .fl-hero {
    padding: 3rem 1rem 2rem;
  }

}

/* ------------------------------------------------------------------
   Motion
   Everything below is disabled under prefers-reduced-motion.
   ------------------------------------------------------------------ */

@keyframes fl-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fl-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fl-drift {
  0%,
  100% {
    transform: translate3d(-6%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6%, 4%, 0) scale(1.12);
  }
}

@keyframes fl-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--fl-periwinkle);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Hero: ambient glow behind the content */
.fl-hero::before {
  content: "";
  position: absolute;
  inset: -20% 10% auto;
  height: 28rem;
  background: radial-gradient(
    closest-side,
    var(--fl-glow),
    transparent 70%
  );
  filter: blur(20px);
  pointer-events: none;
  animation: fl-drift 14s ease-in-out infinite;
}

.fl-hero > * {
  position: relative;
}

/* Hero: staggered entrance */
.fl-eyebrow,
.fl-hero h1,
.fl-lede,
.fl-cta {
  animation: fl-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fl-eyebrow {
  animation-delay: 0.05s;
}
.fl-hero h1 {
  animation-delay: 0.15s;
}
.fl-lede {
  animation-delay: 0.28s;
}
.fl-cta {
  animation-delay: 0.4s;
}

/* Live dot on the eyebrow */
.fl-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--fl-periwinkle);
  animation: fl-pulse 2.2s ease-out infinite;
}

/* Stat tiles: pop in one after another, then lift on hover */
.fl-stat {
  animation: fl-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.fl-stat:nth-child(1) {
  animation-delay: 0.55s;
}
.fl-stat:nth-child(2) {
  animation-delay: 0.65s;
}
.fl-stat:nth-child(3) {
  animation-delay: 0.75s;
}
.fl-stat:nth-child(4) {
  animation-delay: 0.85s;
}

.fl-stat:hover {
  transform: translateY(-3px);
  border-color: var(--fl-periwinkle);
}
.fl-stat:focus-visible {
  transform: translateY(-3px);
  border-color: var(--fl-periwinkle);
}

/* Buttons: small press and lift */
.fern-button {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.fern-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px var(--fl-glow);
}
.fern-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px var(--fl-glow);
}

.fern-button:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------------
   More motion
   ------------------------------------------------------------------ */

@keyframes fl-drift-alt {
  0%,
  100% {
    transform: translate3d(8%, 6%, 0) scale(1.05);
  }
  50% {
    transform: translate3d(-8%, -2%, 0) scale(0.92);
  }
}

@keyframes fl-ring {
  0% {
    box-shadow: 0 0 0 0 var(--fl-glow);
  }
  70% {
    box-shadow: 0 0 0 12px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes fl-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Hero: a second, violet orb drifting the other way */
.fl-hero::after {
  content: "";
  position: absolute;
  inset: 10% -5% auto auto;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(
    closest-side,
    rgba(139, 92, 246, 0.16),
    transparent 70%
  );
  filter: blur(24px);
  pointer-events: none;
  animation: fl-drift-alt 18s ease-in-out infinite;
}

/* Hero: primary button breathes */
.fl-cta .fern-button:first-child {
  animation: fl-ring 2.6s ease-out 1.4s infinite;
}

/* Guide pages: title and subtitle arrive in sequence */
.fern-page-heading {
  animation: fl-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fern-page-subtitle {
  animation: fl-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Sidebar: links slide over on hover */
.fern-sidebar-link {
  transition:
    transform 0.16s ease,
    background-color 0.16s ease;
}

.fern-sidebar-link:hover {
  transform: translateX(3px);
}
.fern-sidebar-link:focus-visible {
  transform: translateX(3px);
}

/* Block reveals (callouts, steps, tables, cards, headings) are handled by
   motion.js so they work in every browser. See "Scroll reveals" below. */

/* Reading progress bar, drawn with a scroll timeline where supported */
@supports (animation-timeline: view()) {

  /* Reading progress: a thin brand bar across the top of the window */
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: 3px;
    background: var(--fl-indigo);
    transform-origin: 0 50%;
    animation: fl-grow linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }

  :root.dark body::before {
    background: var(--fl-periwinkle);
  }

}

@media (prefers-reduced-motion: reduce) {

  .fl-hero::after,
  .fl-cta .fern-button,
  .fern-page-heading,
  .fern-page-subtitle,
  .fern-callout,
  .fern-step,
  .fern-table-root,
  .fern-card-group .fern-card,
  .fern-prose h2,
  body::before {
    animation: none !important;
  }

  .fern-sidebar-link,
  .fern-sidebar-link:hover {
    transition: none;
    transform: none;
  }
.fern-sidebar-link:focus-visible {
    transition: none;
    transform: none;
  }

  .fl-hero::before,
  .fl-eyebrow,
  .fl-eyebrow::before,
  .fl-hero h1,
  .fl-lede,
  .fl-cta,
  .fl-stat,
  .fl-section .fern-card,
  .fl-footer-cta,
  .fern-prose {
    animation: none;
  }

  .fern-card,
  .fl-stat,
  .fern-button {
    transition: none;
  }

  .fern-card:hover,
  .fl-stat:hover,
  .fern-button:hover {
    transform: none;
  }
.fern-card:focus-visible,
.fl-stat:focus-visible,
.fern-button:focus-visible {
    transform: none;
  }

}

/* ------------------------------------------------------------------
   Scrollbar, selection, and cursor
   Matches fluxerlist.com: a slim 6px scrollbar with a neutral thumb that
   turns brand indigo on hover.
   ------------------------------------------------------------------ */

:root {
  --fl-scroll-thumb: #4641d9;
  --fl-scroll-thumb-hover: #3a35b8;
  --fl-scroll-track: rgba(70, 65, 217, 0.1);
}

:root.dark {
  --fl-scroll-thumb: #7b8cff;
  --fl-scroll-thumb-hover: #9aa8ff;
  --fl-scroll-track: rgba(123, 140, 255, 0.1);
}

/* A bright accent thumb on a faint tinted track, fully rounded */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--fl-scroll-track);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: var(--fl-scroll-thumb);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fl-scroll-thumb-hover);
}
::-webkit-scrollbar-thumb:focus-visible {
  background: var(--fl-scroll-thumb-hover);
}

/* Firefox has no hover state for scrollbars, so it gets the accent colour flat */
@supports not selector(::-webkit-scrollbar) {

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--fl-scroll-thumb) var(--fl-scroll-track);
  }

}

::selection {
  background: rgba(70, 65, 217, 0.3);
}

:root.dark ::selection {
  background: rgba(123, 140, 255, 0.3);
}

/* ------------------------------------------------------------------
   Scroll reveals (behaviour in motion.js)
   The script adds .fl-reveal only to blocks that start below the fold, then
   .is-in as they scroll into view. Without the script nothing is hidden.
   ------------------------------------------------------------------ */

/* One direction only: everything rises from below and settles from a soft blur */
.fl-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fl-d, 0ms);
  will-change: opacity, transform, filter;
}

.fl-reveal[data-fl-fx="pop"] {
  transform: translateY(16px) scale(0.95);
}

.fl-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Section headings draw an accent underline once they arrive. Absolutely
   positioned, so it never shifts the text. */
.fern-prose h2 {
  position: relative;
}

.fern-prose h2.fl-drawn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 2.75rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--fl-indigo), var(--fl-periwinkle));
  transform-origin: 0 50%;
  animation: fl-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
  pointer-events: none;
}

/* Landing headline: the accent phrase shimmers through the brand gradient */
@keyframes fl-shift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@property --fl-angle {

  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;

}

@keyframes fl-spin {
  to {
    --fl-angle: 360deg;
  }
}

@media (prefers-reduced-motion: no-preference) {

  .fl-hero .fl-accent-text {
    background-image: linear-gradient(
      100deg,
      var(--fl-indigo),
      #8b5cf6,
      var(--fl-periwinkle),
      var(--fl-indigo)
    );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fl-shift 7s ease-in-out infinite alternate;
  }

  .fl-hero .fl-typewriter::after {
    background: var(--fl-indigo);
    -webkit-text-fill-color: initial;
  }

  :root.dark .fl-hero .fl-typewriter::after {
    background: var(--fl-periwinkle);
  }

  /* Landing cards: a light beam runs around the border while hovered */
  .fl-section .fern-card {
    position: relative;
  }

  .fl-section .fern-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--fl-angle),
      transparent 0 62%,
      var(--fl-periwinkle) 82%,
      transparent 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .fl-section .fern-card:hover::after {
    opacity: 1;
    animation: fl-spin 2.8s linear infinite;
  }
.fl-section .fern-card:focus-visible::after {
    opacity: 1;
    animation: fl-spin 2.8s linear infinite;
  }

}

/* Highlighter sweep behind bold text as it reaches the middle of the screen */
:root {
  --fl-mark: rgba(70, 65, 217, 0.16);
}

:root.dark {
  --fl-mark: rgba(123, 140, 255, 0.26);
}

.fern-prose strong.fl-mark {
  margin: 0 -0.12em;
  padding: 0 0.12em;
  border-radius: 3px;
  background-image: linear-gradient(transparent 58%, var(--fl-mark) 58%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.fern-prose strong.fl-mark.is-in {
  background-size: 100% 100%;
}

/* Landing headline: typewriter caret, and room so the layout doesn't jump */
.fl-hero h1 {
  min-height: 2.15em;
}

.fl-typewriter::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.85em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: currentColor;
  animation: fl-blink 1.05s steps(1) infinite;
}

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

@media (prefers-reduced-motion: no-preference) {

  /* Hero glow drifts with the mouse (variables set by motion.js) */
  .fl-hero::before {
    translate: calc(var(--fl-mx, 0) * 26px) calc(var(--fl-my, 0) * 16px);
    transition: translate 0.7s ease-out;
  }

  .fl-hero::after {
    translate: calc(var(--fl-mx, 0) * -32px) calc(var(--fl-my, 0) * -20px);
    transition: translate 0.7s ease-out;
  }

  /* Landing cards tilt toward the pointer and pick up a spotlight that follows it */
  .fl-section .fern-card:hover {
    transform: perspective(900px) rotateX(var(--fl-rx, 0deg))
      rotateY(var(--fl-ry, 0deg)) translateY(-3px);
    background-image: radial-gradient(
      260px circle at var(--fl-mx, 50%) var(--fl-my, 50%),
      var(--fl-glow),
      transparent 70%
    );
  }
.fl-section .fern-card:focus-visible {
    transform: perspective(900px) rotateX(var(--fl-rx, 0deg))
      rotateY(var(--fl-ry, 0deg)) translateY(-3px);
    background-image: radial-gradient(
      260px circle at var(--fl-mx, 50%) var(--fl-my, 50%),
      var(--fl-glow),
      transparent 70%
    );
  }

}

/* ------------------------------------------------------------------
   Charts (.fl-chart)
   Plain HTML and CSS, so they render without scripts. When motion.js runs it
   arms each chart (.is-armed) and draws it as it scrolls into view (.is-in).
   Bar sizes come from the generated .fl-w-N and .fl-h-N classes below.
   ------------------------------------------------------------------ */

.fl-chart {
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem 1.3rem;
  border: 1px solid var(--fl-border);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--fl-glow), transparent 85%);
}

.fl-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fl-chart-head span {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.65;
}

.fl-chart-note {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  opacity: 0.62;
}

/* Horizontal bars */
.fl-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) 1fr 3.8rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.28rem 0;
  font-size: 0.875rem;
}

.fl-label {
  opacity: 0.88;
}

.fl-track {
  height: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--fl-scroll-track);
}

.fl-fill {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fl-indigo), var(--fl-periwinkle));
  transform-origin: left center;
}

.fl-fill.is-hot {
  background: #f97316;
}

.fl-fill.is-neg {
  background: #ef4444;
}

.fl-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.fl-chart.is-armed .fl-fill {
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--i, 0) * 55ms);
}

.fl-chart.is-armed:not(.is-in) .fl-fill {
  transform: scaleX(0);
}

/* Vertical columns */
.fl-cols {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  height: 12.5rem;
  padding-top: 1.5rem;
}

.fl-col {
  display: grid;
  flex: 1 1 0;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.fl-colbar {
  position: relative;
  align-self: end;
  width: min(100%, 2.6rem);
  margin-inline: auto;
  border-radius: 0.5rem 0.5rem 0.2rem 0.2rem;
  background: linear-gradient(to top, var(--fl-indigo), var(--fl-periwinkle));
}

.fl-colbar.is-hot {
  background: #f97316;
}

.fl-colval {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}

.fl-collabel {
  padding-top: 0.4rem;
  font-size: 0.72rem;
  text-align: center;
  opacity: 0.7;
}

/* Bars wipe up from the baseline with a clip-path, which repaints without
   touching layout. The negative insets keep the value label above the bar
   from being clipped once the wipe finishes. */
.fl-chart.is-armed .fl-colbar {
  clip-path: inset(-2rem -1rem 0 -1rem);
  transition: clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1)
    calc(var(--i, 0) * 70ms);
}

.fl-chart.is-armed .fl-colval {
  transition: opacity 0.4s ease calc(0.5s + var(--i, 0) * 70ms);
}

.fl-chart.is-armed:not(.is-in) .fl-colbar {
  clip-path: inset(100% -1rem 0 -1rem);
}

.fl-chart.is-armed:not(.is-in) .fl-colval {
  opacity: 0;
}

/* Line chart: the path draws itself, then the area under it fades in */
.fl-lines svg {
  display: block;
  width: 100%;
  height: auto;
}

.fl-line-path {
  fill: none;
  stroke: var(--fl-scroll-thumb);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.fl-line-area {
  fill: var(--fl-glow);
  stroke: none;
}

.fl-line-axis {
  stroke: var(--fl-border);
  stroke-width: 1;
}

.fl-line-text {
  fill: currentColor;
  font-size: 10px;
  opacity: 0.65;
}

.fl-lines.is-armed .fl-line-path {
  transition: stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fl-lines.is-armed .fl-line-area {
  transition: opacity 1.1s ease 1.3s;
}

.fl-lines.is-armed .fl-line-text {
  transition: opacity 0.8s ease 1.6s;
}

.fl-lines.is-armed:not(.is-in) .fl-line-path {
  stroke-dashoffset: 1;
}

.fl-lines.is-armed:not(.is-in) .fl-line-area,
.fl-lines.is-armed:not(.is-in) .fl-line-text {
  opacity: 0;
}

/* Charts respond to the pointer: the hovered row or column stays lit while
   the others step back */
@media (prefers-reduced-motion: no-preference) {

  .fl-row,
  .fl-col {
    transition: opacity 0.2s ease;
  }

  .fl-chart:has(.fl-row:hover) .fl-row:not(:hover),
  .fl-chart:has(.fl-col:hover) .fl-col:not(:hover) {
    opacity: 0.45;
  }

  .fl-row:hover .fl-fill,
  .fl-col:hover .fl-colbar {
    filter: brightness(1.18) saturate(1.1);
  }
.fl-row:focus-within .fl-fill,
.fl-col:focus-within .fl-colbar {
    filter: brightness(1.18) saturate(1.1);
  }

}

/* End point of a line chart: it appears once the line has drawn, then pulses */
.fl-line-dot {
  fill: var(--fl-scroll-thumb);
}

.fl-line-ring {
  fill: none;
  stroke: var(--fl-scroll-thumb);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.fl-lines.is-armed .fl-line-dot {
  transition: opacity 0.5s ease 2s;
}

.fl-lines.is-armed:not(.is-in) .fl-line-dot {
  opacity: 0;
}

@keyframes fl-line-ring {
  0% {
    opacity: 0.75;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 3.4;
  }
}

@media (prefers-reduced-motion: no-preference) {

  .fl-lines.is-in .fl-line-ring {
    animation: fl-line-ring 2.4s ease-out 2.4s infinite;
  }

}

@media (max-width: 640px) {

  .fl-row {
    grid-template-columns: minmax(6rem, 8rem) 1fr 3.2rem;
    gap: 0.5rem;
    font-size: 0.8rem;
  }

  .fl-cols {
    gap: 0.3rem;
  }

}

/* Generated bar sizes: .fl-w-N (width) and .fl-h-N (height), N = 0-100 */
.fl-w-0{width:0%}
.fl-w-1{width:1%}
.fl-w-2{width:2%}
.fl-w-3{width:3%}
.fl-w-4{width:4%}
.fl-w-5{width:5%}
.fl-w-6{width:6%}
.fl-w-7{width:7%}
.fl-w-8{width:8%}
.fl-w-9{width:9%}
.fl-w-10{width:10%}
.fl-w-11{width:11%}
.fl-w-12{width:12%}
.fl-w-13{width:13%}
.fl-w-14{width:14%}
.fl-w-15{width:15%}
.fl-w-16{width:16%}
.fl-w-17{width:17%}
.fl-w-18{width:18%}
.fl-w-19{width:19%}
.fl-w-20{width:20%}
.fl-w-21{width:21%}
.fl-w-22{width:22%}
.fl-w-23{width:23%}
.fl-w-24{width:24%}
.fl-w-25{width:25%}
.fl-w-26{width:26%}
.fl-w-27{width:27%}
.fl-w-28{width:28%}
.fl-w-29{width:29%}
.fl-w-30{width:30%}
.fl-w-31{width:31%}
.fl-w-32{width:32%}
.fl-w-33{width:33%}
.fl-w-34{width:34%}
.fl-w-35{width:35%}
.fl-w-36{width:36%}
.fl-w-37{width:37%}
.fl-w-38{width:38%}
.fl-w-39{width:39%}
.fl-w-40{width:40%}
.fl-w-41{width:41%}
.fl-w-42{width:42%}
.fl-w-43{width:43%}
.fl-w-44{width:44%}
.fl-w-45{width:45%}
.fl-w-46{width:46%}
.fl-w-47{width:47%}
.fl-w-48{width:48%}
.fl-w-49{width:49%}
.fl-w-50{width:50%}
.fl-w-51{width:51%}
.fl-w-52{width:52%}
.fl-w-53{width:53%}
.fl-w-54{width:54%}
.fl-w-55{width:55%}
.fl-w-56{width:56%}
.fl-w-57{width:57%}
.fl-w-58{width:58%}
.fl-w-59{width:59%}
.fl-w-60{width:60%}
.fl-w-61{width:61%}
.fl-w-62{width:62%}
.fl-w-63{width:63%}
.fl-w-64{width:64%}
.fl-w-65{width:65%}
.fl-w-66{width:66%}
.fl-w-67{width:67%}
.fl-w-68{width:68%}
.fl-w-69{width:69%}
.fl-w-70{width:70%}
.fl-w-71{width:71%}
.fl-w-72{width:72%}
.fl-w-73{width:73%}
.fl-w-74{width:74%}
.fl-w-75{width:75%}
.fl-w-76{width:76%}
.fl-w-77{width:77%}
.fl-w-78{width:78%}
.fl-w-79{width:79%}
.fl-w-80{width:80%}
.fl-w-81{width:81%}
.fl-w-82{width:82%}
.fl-w-83{width:83%}
.fl-w-84{width:84%}
.fl-w-85{width:85%}
.fl-w-86{width:86%}
.fl-w-87{width:87%}
.fl-w-88{width:88%}
.fl-w-89{width:89%}
.fl-w-90{width:90%}
.fl-w-91{width:91%}
.fl-w-92{width:92%}
.fl-w-93{width:93%}
.fl-w-94{width:94%}
.fl-w-95{width:95%}
.fl-w-96{width:96%}
.fl-w-97{width:97%}
.fl-w-98{width:98%}
.fl-w-99{width:99%}
.fl-w-100{width:100%}
.fl-h-0{height:0%}
.fl-h-1{height:1%}
.fl-h-2{height:2%}
.fl-h-3{height:3%}
.fl-h-4{height:4%}
.fl-h-5{height:5%}
.fl-h-6{height:6%}
.fl-h-7{height:7%}
.fl-h-8{height:8%}
.fl-h-9{height:9%}
.fl-h-10{height:10%}
.fl-h-11{height:11%}
.fl-h-12{height:12%}
.fl-h-13{height:13%}
.fl-h-14{height:14%}
.fl-h-15{height:15%}
.fl-h-16{height:16%}
.fl-h-17{height:17%}
.fl-h-18{height:18%}
.fl-h-19{height:19%}
.fl-h-20{height:20%}
.fl-h-21{height:21%}
.fl-h-22{height:22%}
.fl-h-23{height:23%}
.fl-h-24{height:24%}
.fl-h-25{height:25%}
.fl-h-26{height:26%}
.fl-h-27{height:27%}
.fl-h-28{height:28%}
.fl-h-29{height:29%}
.fl-h-30{height:30%}
.fl-h-31{height:31%}
.fl-h-32{height:32%}
.fl-h-33{height:33%}
.fl-h-34{height:34%}
.fl-h-35{height:35%}
.fl-h-36{height:36%}
.fl-h-37{height:37%}
.fl-h-38{height:38%}
.fl-h-39{height:39%}
.fl-h-40{height:40%}
.fl-h-41{height:41%}
.fl-h-42{height:42%}
.fl-h-43{height:43%}
.fl-h-44{height:44%}
.fl-h-45{height:45%}
.fl-h-46{height:46%}
.fl-h-47{height:47%}
.fl-h-48{height:48%}
.fl-h-49{height:49%}
.fl-h-50{height:50%}
.fl-h-51{height:51%}
.fl-h-52{height:52%}
.fl-h-53{height:53%}
.fl-h-54{height:54%}
.fl-h-55{height:55%}
.fl-h-56{height:56%}
.fl-h-57{height:57%}
.fl-h-58{height:58%}
.fl-h-59{height:59%}
.fl-h-60{height:60%}
.fl-h-61{height:61%}
.fl-h-62{height:62%}
.fl-h-63{height:63%}
.fl-h-64{height:64%}
.fl-h-65{height:65%}
.fl-h-66{height:66%}
.fl-h-67{height:67%}
.fl-h-68{height:68%}
.fl-h-69{height:69%}
.fl-h-70{height:70%}
.fl-h-71{height:71%}
.fl-h-72{height:72%}
.fl-h-73{height:73%}
.fl-h-74{height:74%}
.fl-h-75{height:75%}
.fl-h-76{height:76%}
.fl-h-77{height:77%}
.fl-h-78{height:78%}
.fl-h-79{height:79%}
.fl-h-80{height:80%}
.fl-h-81{height:81%}
.fl-h-82{height:82%}
.fl-h-83{height:83%}
.fl-h-84{height:84%}
.fl-h-85{height:85%}
.fl-h-86{height:86%}
.fl-h-87{height:87%}
.fl-h-88{height:88%}
.fl-h-89{height:89%}
.fl-h-90{height:90%}
.fl-h-91{height:91%}
.fl-h-92{height:92%}
.fl-h-93{height:93%}
.fl-h-94{height:94%}
.fl-h-95{height:95%}
.fl-h-96{height:96%}
.fl-h-97{height:97%}
.fl-h-98{height:98%}
.fl-h-99{height:99%}
.fl-h-100{height:100%}

/* ------------------------------------------------------------------
   Full-screen landing hero
   The hero fills the first screen, everything else waits below the fold
   and reveals as you scroll. The page-level fade is dropped here so the
   hero only plays its own entrance once.
   ------------------------------------------------------------------ */

.fern-prose:has(.fl-hero) {
  animation: none;
}

.fl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 8rem);
  min-height: calc(100svh - 8rem);
  padding-bottom: 5rem;
}

.fl-hero h1,
.fl-hero .fl-cta,
.fl-hero .fl-stats {
  width: 100%;
}

.fl-hero .fl-scroll-cue {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 0;
  background: none;
  color: var(--fl-indigo);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  translate: -50% 0;
  opacity: 0.85;
  animation: fl-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
  transition: opacity 0.2s ease;
}

:root.dark .fl-hero .fl-scroll-cue {
  color: var(--fl-periwinkle);
}

.fl-hero .fl-scroll-cue:hover,
.fl-hero .fl-scroll-cue:focus-visible {
  opacity: 1;
}

/* Bob the chevron only, so the label stays put */
.fl-hero .fl-scroll-cue svg {
  animation: fl-bob 2.2s ease-in-out 2s infinite;
}

@keyframes fl-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Fern re-renders the server HTML on the client, which replaced the hero and
   replayed its entrance. Hold the entrance until motion.js marks the hero as
   stable (.fl-play), so it plays once. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

  .fl-hero:not(.fl-play) :is(.fl-eyebrow, h1, .fl-lede, .fl-cta, .fl-stat, .fl-scroll-cue) {
    animation: none;
    opacity: 0;
  }

}

@media (max-width: 640px) {

  .fl-hero {
    min-height: calc(100svh - 6rem);
  }

}

@media (prefers-reduced-motion: reduce) {

  .fl-hero .fl-scroll-cue,
  .fl-hero .fl-scroll-cue svg {
    animation: none;
  }

}

/* ------------------------------------------------------------------
   Card and tile life (landing page)
   Resting: icons float, a soft sheen sweeps across each card now and then,
   stat tiles drift. Hover: icon jellies and glows, title nudges, press sinks.
   Float uses `translate` and hover uses `transform`, so they never fight.
   ------------------------------------------------------------------ */

@keyframes fl-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

@keyframes fl-card-sheen {
  0% {
    background-position: 160% 0;
  }
  38%,
  100% {
    background-position: -60% 0;
  }
}

@keyframes fl-jelly {
  0% {
    transform: scale(1) rotate(0);
  }
  30% {
    transform: scale(1.28) rotate(-9deg);
  }
  55% {
    transform: scale(0.92) rotate(6deg);
  }
  78% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

@media (prefers-reduced-motion: no-preference) {

  .fl-section .fern-card:nth-child(1) { --k: 0; }
  .fl-section .fern-card:nth-child(2) { --k: 1; }
  .fl-section .fern-card:nth-child(3) { --k: 2; }
  .fl-section .fern-card:nth-child(4) { --k: 3; }
  .fl-section .fern-card:nth-child(5) { --k: 4; }
  .fl-section .fern-card:nth-child(6) { --k: 5; }

  /* Resting: icons bob, each on its own beat */
  .fl-section .fern-card .card-icon {
    display: inline-flex;
    animation: fl-float 5s ease-in-out infinite;
    animation-delay: calc(var(--k, 0) * -0.9s);
    transition: filter 0.25s ease, color 0.25s ease;
  }

  /* Resting: a faint sheen crosses each card, staggered so they don't sync */
  .fl-section .fern-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255, 255, 255, 0.07) 50%,
      transparent 60%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    animation: fl-card-sheen 9s ease-in-out infinite;
    animation-delay: calc(var(--k, 0) * -1.6s);
    pointer-events: none;
  }

  :root:not(.dark) .fl-section .fern-card::before {
    background-image: linear-gradient(
      105deg,
      transparent 40%,
      rgba(70, 65, 217, 0.07) 50%,
      transparent 60%
    );
  }

  /* Hover: the icon jellies once and glows; the title leans in */
  .fl-section .fern-card:hover .card-icon {
    animation: fl-jelly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 10px var(--fl-periwinkle));
    color: var(--fl-periwinkle);
  }
.fl-section .fern-card:focus-within .card-icon {
    animation: fl-jelly 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 10px var(--fl-periwinkle));
    color: var(--fl-periwinkle);
  }

  .fl-section .fern-card .text-body {
    transition: translate 0.25s ease, color 0.25s ease;
  }

  .fl-section .fern-card:hover .text-body {
    translate: 4px 0;
  }
.fl-section .fern-card:focus-within .text-body {
    translate: 4px 0;
  }

  /* Press: the card sinks a little */
  .fern-card:active {
    transform: perspective(900px) scale(0.975);
    transition-duration: 0.08s;
  }

  /* Stat tiles drift after they've arrived, and glow on hover */
  .fl-hero.fl-play .fl-stat {
    animation:
      fl-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
      fl-float 6s ease-in-out infinite;
  }

  .fl-hero.fl-play .fl-stat:nth-child(1) {
    animation-delay: 0.55s, 1.4s;
  }
  .fl-hero.fl-play .fl-stat:nth-child(2) {
    animation-delay: 0.65s, 2.3s;
  }
  .fl-hero.fl-play .fl-stat:nth-child(3) {
    animation-delay: 0.75s, 3.2s;
  }
  .fl-hero.fl-play .fl-stat:nth-child(4) {
    animation-delay: 0.85s, 4.1s;
  }

  .fl-stat:hover {
    box-shadow: 0 10px 28px -12px var(--fl-periwinkle);
  }
.fl-stat:focus-visible {
    box-shadow: 0 10px 28px -12px var(--fl-periwinkle);
  }

}

/* ------------------------------------------------------------------
   Bento tiles (.fl-tiles on the landing page)
   Each tile is a link with its own small animated picture. Four columns:
   a big leaderboard, a tall chart, and four smaller tiles around them.
   ------------------------------------------------------------------ */

.fl-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 13rem;
  gap: 1rem;
  margin-top: 1.25rem;
}

.fl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--fl-border);
  border-radius: 1.25rem;
  background-image: linear-gradient(160deg, var(--fl-glow), transparent 68%);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fl-tile:hover {
  border-color: var(--fl-periwinkle);
  box-shadow: 0 18px 40px -22px var(--fl-periwinkle);
}
.fl-tile:focus-visible {
  border-color: var(--fl-periwinkle);
  box-shadow: 0 18px 40px -22px var(--fl-periwinkle);
}

/* A dot grid that only exists around the pointer (--fl-mx/--fl-my come from
   motion.js) */
.fl-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--fl-periwinkle) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(
    150px circle at var(--fl-mx, 50%) var(--fl-my, 50%),
    #000,
    transparent 75%
  );
  mask-image: radial-gradient(
    150px circle at var(--fl-mx, 50%) var(--fl-my, 50%),
    #000,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fl-tile:hover::before {
  opacity: 0.55;
}
.fl-tile:focus-visible::before {
  opacity: 0.55;
}

.fl-t-bumps {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.fl-t-spot {
  grid-column: 3;
  grid-row: 1;
}
.fl-t-flat {
  grid-column: 4;
  grid-row: 1 / 3;
}
.fl-t-tokens {
  grid-column: 3;
  grid-row: 2;
}
.fl-t-awards {
  grid-column: 1 / 3;
  grid-row: 3;
}
.fl-t-up {
  grid-column: 3 / 5;
  grid-row: 3;
}

.fl-tile-copy {
  position: relative;
  z-index: 1;
}

.fl-tile-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fl-t-bumps .fl-tile-title {
  font-size: 1.4rem;
}

.fl-tile-desc {
  margin-top: 0.2rem;
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0.68;
}

.fl-tile-go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  color: var(--fl-periwinkle);
  opacity: 0;
  translate: -6px 6px;
  transition:
    opacity 0.2s ease,
    translate 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fl-tile:hover .fl-tile-go,
.fl-tile:focus-visible .fl-tile-go {
  opacity: 1;
  translate: 0 0;
}
.fl-tile:focus-within .fl-tile-go {
  opacity: 1;
  translate: 0 0;
}

/* The picture area sits above the copy */
.fl-tile-viz {
  position: absolute;
  inset: 0 0 5.6rem 0;
  display: grid;
  place-items: center;
  color: var(--fl-indigo);
  pointer-events: none;
}

:root.dark .fl-tile-viz {
  color: var(--fl-periwinkle);
}

/* Wide tiles put the picture on the right, copy on the left */
.fl-t-awards .fl-tile-viz,
.fl-t-up .fl-tile-viz {
  inset: 0 0 0 auto;
  width: 46%;
}

.fl-t-awards .fl-tile-copy,
.fl-t-up .fl-tile-copy {
  max-width: 48%;
}

/* ---- Leaderboard (bumps) ---- */
.fl-lb {
  position: relative;
  width: min(24rem, 86%);
  height: 12.5rem;
  margin-top: -0.5rem;
}

.fl-lb-top {
  position: absolute;
  top: -2.4rem;
  right: 0;
  left: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fl-lb-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(255, 138, 61, 0.35);
  border-radius: 999px;
  background: rgba(255, 138, 61, 0.12);
  color: #ff8a3d;
  font-size: 0.7rem;
  font-weight: 700;
}

.fl-lb-streak .roll {
  display: inline-grid;
  height: 1.1em;
  overflow: hidden;
  line-height: 1.1em;
  font-variant-numeric: tabular-nums;
}

.fl-lb-streak .roll b {
  grid-area: 1 / 1;
  text-align: center;
}

.fl-lb-streak .roll b:last-child {
  opacity: 0;
}

.fl-lb-toast {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe9a3, #f2b93b);
  color: #7a4d05;
  font-size: 0.7rem;
  font-weight: 800;
  opacity: 0;
}

.fl-lb-ranks {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.5rem;
}

.fl-lb-ranks b {
  display: grid;
  place-items: center;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.5;
}

.fl-lb-rows {
  position: absolute;
  inset: 0 0 0 1.75rem;
}

.fl-lb-row {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s, 0) * 3.25rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 2.75rem;
  padding: 0 0.8rem;
  border: 1px solid var(--fl-border);
  border-radius: 0.8rem;
  background: var(--fl-glow);
}

.fl-lb-row .av {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fl-periwinkle), var(--fl-indigo));
  opacity: 0.55;
}

.fl-lb-row .a2 {
  filter: hue-rotate(40deg);
}
.fl-lb-row .a3 {
  filter: hue-rotate(-40deg);
}

.fl-lb-row .nm {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.22;
}

.fl-lb-row em {
  margin-left: auto;
  font-size: 0.78rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.fl-lb-row.r1 { --s: 0; --d: 1; }
.fl-lb-row.r2 { --s: 1; --d: 1; }
.fl-lb-row.r3 { --s: 2; --d: 1; }
.fl-lb-row.r4 { --s: 3; --d: -3; }

.fl-lb-row.you {
  z-index: 1;
  border-color: var(--fl-periwinkle);
  box-shadow: 0 8px 24px -12px var(--fl-periwinkle);
}

.fl-lb-row.you b {
  font-size: 0.85rem;
}

.fl-lb-btn {
  position: relative;
  display: inline-grid;
  margin-left: auto;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  background: var(--fl-indigo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.fl-lb-btn > span {
  grid-area: 1 / 1;
  text-align: center;
}

.fl-lb-btn .l2 {
  opacity: 0;
}

.fl-lb-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--fl-periwinkle);
  border-radius: inherit;
  opacity: 0;
}

.fl-lb-burst {
  position: absolute;
  top: 1.375rem;
  left: 3.3rem;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fl-lb-burst i {
  position: absolute;
  width: 0.36rem;
  height: 0.36rem;
  margin: -0.18rem 0 0 -0.18rem;
  border-radius: 999px;
  background: var(--fl-periwinkle);
  opacity: 0;
}

.fl-lb-burst i:nth-child(3n + 1) {
  background: #f2b93b;
}

.fl-lb-burst i:nth-child(3n) {
  background: #2dd4bf;
}

/* ---- Spotlight: radar rings around a star ---- */
.fl-rings {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
}

.fl-rings span {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--fl-periwinkle);
  border-radius: 999px;
  opacity: 0.35;
}

.fl-rings svg {
  position: relative;
  filter: drop-shadow(0 0 10px var(--fl-periwinkle));
}

/* The radar wedge and orbiting sparks only exist when motion is allowed */
.fl-rings .sweep,
.fl-rings .orbit {
  display: none;
}

/* ---- FLAT: a live sparkline ---- */
.fl-spark {
  position: relative;
  width: 82%;
  height: 6.5rem;
  margin-top: 0.5rem;
}

.fl-t-flat .fl-spark {
  height: 11rem;
}

.fl-spark svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Faint chart grid, fading out toward the sides */
.fl-spark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 25%),
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 20%);
  opacity: 0.09;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.fl-spark .scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, currentColor, transparent);
  opacity: 0;
}

@property --fl-n {

  syntax: "<integer>";
  initial-value: 92;
  inherits: false;

}

.fl-flat-val {
  position: absolute;
  top: -1.75rem;
  right: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.fl-flat-val small {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

.fl-flat-val b {
  min-width: 1.4em;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  counter-reset: fln var(--fl-n);
}

.fl-flat-val b::after {
  content: counter(fln);
}

.fl-spark .line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.fl-spark .dot {
  position: absolute;
  top: 12.5%;
  right: 0;
  width: 0.6rem;
  height: 0.6rem;
  margin: -0.3rem -0.3rem 0 0;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.fl-live {
  position: absolute;
  top: -1.4rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fl-live::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}

/* ---- Tokens: coins and +N chips ---- */
.fl-coins {
  position: relative;
  width: 8rem;
  height: 6rem;
}

.fl-coins .coin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #ffe9a3, #f2b93b 62%, #c98a12);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.35),
    0 6px 14px -6px rgba(201, 138, 18, 0.7);
  color: #7a4d05;
  font-size: 0.72rem;
  font-weight: 800;
}

.fl-coins .c1 { left: 0.6rem; top: 2.4rem; }
.fl-coins .c2 { left: 2.7rem; top: 1rem; }
.fl-coins .c3 { left: 4.6rem; top: 2.8rem; }

.fl-coins .plus {
  position: absolute;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  color: var(--fl-periwinkle);
  opacity: 0;
}

.fl-coins .p1 { left: 1.4rem; top: 0.6rem; }
.fl-coins .p2 { left: 5rem; top: 1.4rem; }

/* ---- Awards: a trophy with a silver glint ---- */
.fl-trophy {
  position: relative;
  display: grid;
  place-items: center;
  color: #b9c2d6;
}

:root:not(.dark) .fl-trophy {
  color: #8a94ad;
}

.fl-trophy svg {
  filter: drop-shadow(0 0 12px rgba(190, 200, 225, 0.35));
}

.fl-trophy .tw {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--fl-periwinkle);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}

.fl-award {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}

.fl-medals {
  display: flex;
  gap: 0.4rem;
}

.fl-medals i {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  overflow: hidden;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, #f4f6fb, #b9c2d6 58%, #7c869d);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    0 4px 8px -4px rgba(0, 0, 0, 0.5);
}

.fl-medals i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.95) 50%, transparent 70%);
  translate: -130% 0;
}

.fl-trophy .t1 { top: -0.5rem; right: -0.9rem; }
.fl-trophy .t2 { top: 1.4rem; left: -1.5rem; width: 0.45rem; height: 0.45rem; }
.fl-trophy .t3 { bottom: 0.4rem; right: -1.6rem; width: 0.5rem; height: 0.5rem; }

/* ---- Upgrades: floating chips ---- */
.fl-t-up .fl-tile-viz {
  width: 52%;
}

.fl-t-up .fl-tile-copy {
  max-width: 44%;
}

.fl-chips {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
}

.fl-chips .row {
  display: flex;
  gap: 0.5rem;
}

.fl-chips .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 2.3rem;
  padding: 0 0.85rem;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-glow);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.fl-chips .chip {
  pointer-events: auto;
}

/* The vanity link types itself out. Its width is fixed so the chip doesn't
   resize (and shift) as the letters arrive. */
.fl-chips .vanity {
  width: min(100%, 15.6rem);
  justify-content: flex-start;
  overflow: hidden;
}

.fl-chips .vanity .txt {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.fl-chips .vanity .typed {
  display: inline-block;
  width: 8ch;
  overflow: hidden;
  color: var(--fl-indigo);
}

:root.dark .fl-chips .vanity .typed {
  color: var(--fl-periwinkle);
}

.fl-chips .vanity .caret {
  display: none;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  background: currentColor;
}

.fl-chips .ic {
  position: relative;
  width: 2.3rem;
  padding: 0;
}

/* Icon chips name themselves on hover */
.fl-chips .ic::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--fl-border);
  border-radius: 0.5rem;
  background: #0b0d14;
  color: #fff;
  font: 600 0.68rem/1.2 ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  transition:
    opacity 0.15s ease,
    translate 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.fl-chips .ic:hover::after {
  opacity: 1;
  translate: -50% 0;
}
.fl-chips .ic:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}

.fl-chips .flame {
  color: #ff8a3d;
  border-color: rgba(255, 138, 61, 0.4);
  background: rgba(255, 138, 61, 0.12);
}

.fl-chips .bg {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--fl-indigo), var(--fl-periwinkle) 55%, #c084fc);
}

.fl-chips .feat {
  color: #f2b93b;
  border-color: rgba(242, 185, 59, 0.4);
  background: rgba(242, 185, 59, 0.12);
}

.fl-chips .boost {
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.4);
  background: rgba(250, 204, 21, 0.1);
}

.fl-chips .reset {
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.1);
}

/* ---- Motion ---- */
/* The bump story: one 8s timeline shared by every part, so the pieces stay
   in step. Nothing changes a running animation's duration (hover speed is
   handled in motion.js), because that makes the progress jump. */
@keyframes fl-lb-move {
  0%,
  30% {
    translate: 0 0;
  }
  46%,
  84% {
    translate: 0 calc(var(--d) * 3.25rem);
  }
  100% {
    translate: 0 0;
  }
}

@keyframes fl-lb-you {
  0%,
  22% {
    translate: 0 0;
    scale: 1;
  }
  26% {
    translate: 0 0;
    scale: 0.97;
  }
  30% {
    translate: 0 -0.6rem;
    scale: 1.05;
    box-shadow: 0 14px 34px -8px var(--fl-periwinkle);
  }
  46% {
    translate: 0 -9.75rem;
    scale: 1.03;
    box-shadow: 0 14px 34px -8px var(--fl-periwinkle);
  }
  52%,
  84% {
    translate: 0 -9.75rem;
    scale: 1;
    box-shadow: 0 8px 24px -12px var(--fl-periwinkle);
  }
  100% {
    translate: 0 0;
    scale: 1;
  }
}

@keyframes fl-lb-press {
  0%,
  18% {
    scale: 1;
    background-color: var(--fl-indigo);
  }
  21% {
    scale: 1.07;
  }
  24% {
    scale: 1;
  }
  26% {
    scale: 0.88;
    background-color: var(--fl-indigo);
  }
  30% {
    scale: 1.12;
  }
  33%,
  86% {
    scale: 1;
    background-color: #10b981;
  }
  94%,
  100% {
    scale: 1;
    background-color: var(--fl-indigo);
  }
}

@keyframes fl-lb-ripple {
  0%,
  25% {
    opacity: 0;
    scale: 1;
  }
  26% {
    opacity: 0.9;
    scale: 1;
  }
  40%,
  100% {
    opacity: 0;
    scale: 2.2;
  }
}

@keyframes fl-lb-out {
  0%,
  27% {
    opacity: 1;
    translate: 0 0;
  }
  31%,
  88% {
    opacity: 0;
    translate: 0 -0.5rem;
  }
  94%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fl-lb-in {
  0%,
  27% {
    opacity: 0;
    translate: 0 0.5rem;
  }
  31%,
  88% {
    opacity: 1;
    translate: 0 0;
  }
  94%,
  100% {
    opacity: 0;
    translate: 0 0.5rem;
  }
}

@keyframes fl-lb-pop {
  0%,
  42% {
    opacity: 0;
    translate: 0 0;
    scale: 0.4;
  }
  46% {
    opacity: 1;
    scale: 1;
  }
  62%,
  100% {
    opacity: 0;
    translate: var(--x) var(--y);
    scale: 0.6;
  }
}

@keyframes fl-lb-toast {
  0%,
  44% {
    opacity: 0;
    translate: 0 0.5rem;
    scale: 0.8;
  }
  50% {
    opacity: 1;
    translate: 0 0;
    scale: 1.08;
  }
  54% {
    scale: 1;
  }
  74% {
    opacity: 1;
    translate: 0 -0.2rem;
  }
  82%,
  100% {
    opacity: 0;
    translate: 0 -0.8rem;
  }
}

@keyframes fl-lb-roll-out {
  0%,
  44% {
    opacity: 1;
    translate: 0 0;
  }
  50%,
  90% {
    opacity: 0;
    translate: 0 -100%;
  }
  96%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes fl-lb-roll-in {
  0%,
  44% {
    opacity: 0;
    translate: 0 100%;
  }
  50%,
  90% {
    opacity: 1;
    translate: 0 0;
  }
  96%,
  100% {
    opacity: 0;
    translate: 0 100%;
  }
}

@keyframes fl-lb-flare {
  0%,
  42%,
  62%,
  100% {
    scale: 1;
    filter: none;
  }
  48% {
    scale: 1.5;
    filter: drop-shadow(0 0 4px #ff8a3d);
  }
}

@keyframes fl-lb-crown {
  0%,
  44% {
    opacity: 0.5;
    scale: 1;
    text-shadow: none;
  }
  50% {
    opacity: 1;
    scale: 1.4;
    text-shadow: 0 0 10px #f2b93b;
  }
  60%,
  84% {
    opacity: 1;
    scale: 1;
    text-shadow: 0 0 8px #f2b93b;
  }
  94%,
  100% {
    opacity: 0.5;
    scale: 1;
    text-shadow: none;
  }
}

@keyframes fl-turn {
  to {
    rotate: 360deg;
  }
}

@keyframes fl-star-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.14;
  }
}

@keyframes fl-scan {
  0% {
    left: 0;
    opacity: 0.85;
  }
  55% {
    left: 100%;
    opacity: 0.85;
  }
  62%,
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes fl-flat-count {
  0% {
    --fl-n: 58;
  }
  55%,
  100% {
    --fl-n: 92;
  }
}

@keyframes fl-coin-flip {
  0%,
  68% {
    transform: perspective(240px) rotateY(0deg);
  }
  84%,
  100% {
    transform: perspective(240px) rotateY(360deg);
  }
}

@keyframes fl-medal-glint {
  0%,
  50% {
    translate: -130% 0;
  }
  72%,
  100% {
    translate: 130% 0;
  }
}

@keyframes fl-type {
  0%,
  8% {
    width: 0;
  }
  38%,
  78% {
    width: 8ch;
  }
  92%,
  100% {
    width: 0;
  }
}

@keyframes fl-ring-out {
  0% {
    transform: scale(0.45);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

@keyframes fl-draw {
  0% {
    stroke-dashoffset: 1;
  }
  55%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fl-area-in {
  0%,
  35% {
    opacity: 0;
  }
  70%,
  100% {
    opacity: 1;
  }
}

@keyframes fl-dot-in {
  0%,
  52% {
    opacity: 0;
    scale: 0.3;
  }
  62%,
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes fl-coin-bob {
  0%,
  100% {
    translate: 0 0;
    rotate: -4deg;
  }
  50% {
    translate: 0 -7px;
    rotate: 4deg;
  }
}

@keyframes fl-plus {
  0% {
    opacity: 0;
    translate: 0 8px;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -16px;
  }
}

@keyframes fl-twinkle {
  0%,
  100% {
    opacity: 0;
    scale: 0.3;
  }
  50% {
    opacity: 1;
    scale: 1.1;
  }
}

@keyframes fl-glint {
  0%,
  60%,
  100% {
    filter: drop-shadow(0 0 12px rgba(190, 200, 225, 0.3));
  }
  75% {
    filter: drop-shadow(0 0 22px rgba(230, 236, 255, 0.95));
  }
}

@media (prefers-reduced-motion: no-preference) {

  .fl-lb-row {
    animation: fl-lb-move 8s cubic-bezier(0.34, 1.35, 0.5, 1) infinite;
  }
  /* Rows step aside one after another as the bumped server passes them */
  .fl-lb-row.r3 {
    animation-delay: 0.04s;
  }
  .fl-lb-row.r2 {
    animation-delay: 0.14s;
  }
  .fl-lb-row.r1 {
    animation-delay: 0.24s;
  }
  .fl-lb-row.you {
    animation: fl-lb-you 8s cubic-bezier(0.34, 1.3, 0.5, 1) infinite;
  }

  .fl-lb-btn {
    animation: fl-lb-press 8s ease-in-out infinite;
  }
  .fl-lb-btn::after {
    animation: fl-lb-ripple 8s ease-out infinite;
  }
  .fl-lb-btn .l1 {
    animation: fl-lb-out 8s ease-in-out infinite;
  }
  .fl-lb-btn .l2 {
    animation: fl-lb-in 8s ease-in-out infinite;
  }

  .fl-lb-burst i {
    animation: fl-lb-pop 8s ease-out infinite;
  }
  .fl-lb-toast {
    animation: fl-lb-toast 8s ease-out infinite;
  }
  .fl-lb-streak .roll b:first-child {
    animation: fl-lb-roll-out 8s ease-in-out infinite;
  }
  .fl-lb-streak .roll b:last-child {
    animation: fl-lb-roll-in 8s ease-in-out infinite;
  }
  .fl-lb-streak svg {
    animation: fl-lb-flare 8s ease-out infinite;
  }
  .fl-lb-ranks b:first-child {
    animation: fl-lb-crown 8s ease-in-out infinite;
  }

  /* Parallax: each picture drifts a little toward the pointer, at its own depth */
  .fl-lb,
  .fl-rings,
  .fl-spark,
  .fl-coins,
  .fl-award,
  .fl-chips {
    translate: calc((var(--fl-mx, 50%) - 50%) * var(--fl-depth, 0.05))
      calc((var(--fl-my, 50%) - 50%) * var(--fl-depth, 0.05));
    transition: translate 0.35s ease-out;
  }
  .fl-rings {
    --fl-depth: 0.16;
  }
  .fl-coins {
    --fl-depth: 0.1;
  }
  .fl-award {
    --fl-depth: 0.14;
  }

  .fl-rings span {
    animation: fl-ring-out 3.2s ease-out infinite;
  }
  .fl-rings span:nth-child(2) {
    animation-delay: 1.07s;
  }
  .fl-rings span:nth-child(3) {
    animation-delay: 2.14s;
  }

  .fl-rings .sweep,
  .fl-rings .orbit {
    display: block;
    position: absolute;
    border-radius: 999px;
  }
  .fl-rings .sweep {
    inset: -0.35rem;
    background: conic-gradient(
      from 0deg,
      transparent 0 70%,
      color-mix(in srgb, var(--fl-periwinkle) 55%, transparent) 100%
    );
    -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 26%);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 26%);
    animation: fl-turn 3.6s linear infinite;
  }
  .fl-rings .orbit {
    inset: -0.15rem;
    animation: fl-turn 5.5s linear infinite;
  }
  .fl-rings .orbit::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.3rem;
    height: 0.3rem;
    margin-left: -0.15rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 8px 1px var(--fl-periwinkle);
  }
  .fl-rings .o2 {
    inset: -0.5rem;
    animation-duration: 8s;
    animation-direction: reverse;
  }
  .fl-rings .o3 {
    inset: 0.35rem;
    animation-duration: 3.4s;
    animation-delay: -1.2s;
  }
  .fl-rings svg {
    animation: fl-star-pulse 2.4s ease-in-out infinite;
  }

  .fl-spark .line {
    filter: drop-shadow(0 0 5px currentColor);
    animation: fl-draw 5s ease-in-out infinite;
  }
  .fl-spark .scan {
    animation: fl-scan 5s ease-in-out infinite;
  }
  .fl-flat-val b {
    animation: fl-flat-count 5s ease-in-out infinite;
  }
  .fl-spark .area {
    animation: fl-area-in 5s ease-in-out infinite;
  }
  .fl-spark .dot {
    animation: fl-dot-in 5s ease-in-out infinite;
  }
  .fl-live::before {
    animation: fl-pulse 2.2s ease-out infinite;
  }

  .fl-coins .coin {
    animation:
      fl-coin-bob 3.6s ease-in-out infinite,
      fl-coin-flip 7s ease-in-out infinite;
  }
  .fl-coins .c2 {
    animation-delay: -1.2s;
  }
  .fl-coins .c3 {
    animation-delay: -2.4s;
  }
  .fl-coins .plus {
    animation: fl-plus 3s ease-out infinite;
  }
  .fl-coins .p2 {
    animation-delay: 1.5s;
  }

  .fl-trophy svg {
    animation: fl-glint 4.5s ease-in-out infinite;
  }
  .fl-trophy .tw {
    animation: fl-twinkle 3s ease-in-out infinite;
  }
  .fl-trophy .t2 {
    animation-delay: 1s;
  }
  .fl-trophy .t3 {
    animation-delay: 2s;
  }
  .fl-medals i::after {
    animation: fl-medal-glint 4.2s ease-in-out infinite;
  }
  .fl-medals i:nth-child(2)::after { animation-delay: 0.28s; }
  .fl-medals i:nth-child(3)::after { animation-delay: 0.56s; }
  .fl-medals i:nth-child(4)::after { animation-delay: 0.84s; }
  .fl-medals i:nth-child(5)::after { animation-delay: 1.12s; }
  .fl-medals i:nth-child(6)::after { animation-delay: 1.4s; }

  .fl-chips .chip {
    animation: fl-float 4.5s ease-in-out infinite;
  }
  .fl-chips .vanity {
    animation-delay: -0.4s;
  }
  .fl-chips .flame {
    animation-delay: -1.1s;
  }
  .fl-chips .bg {
    animation-delay: -1.9s;
  }
  .fl-chips .feat {
    animation-delay: -2.7s;
  }
  .fl-chips .boost {
    animation-delay: -3.5s;
  }
  .fl-chips .reset {
    animation-delay: -4.2s;
  }

  .fl-chips .vanity .typed {
    animation: fl-type 7s steps(8) infinite;
  }
  .fl-chips .vanity .caret {
    display: inline-block;
    animation: fl-blink 1s steps(1) infinite;
  }
  .fl-chips .bg {
    background-size: 220% 100%;
    animation:
      fl-float 4.5s ease-in-out infinite,
      fl-shift 5s ease-in-out infinite alternate;
    animation-delay: -1.9s, 0s;
  }

  /* Hover: tilt the tile toward the pointer, spotlight */
  .fl-tile:hover {
    transform: perspective(1000px) rotateX(var(--fl-rx, 0deg))
      rotateY(var(--fl-ry, 0deg)) translateY(-3px);
    background-image:
      radial-gradient(
        280px circle at var(--fl-mx, 50%) var(--fl-my, 50%),
        var(--fl-glow),
        transparent 70%
      ),
      linear-gradient(160deg, var(--fl-glow), transparent 68%);
  }
.fl-tile:focus-visible {
    transform: perspective(1000px) rotateX(var(--fl-rx, 0deg))
      rotateY(var(--fl-ry, 0deg)) translateY(-3px);
    background-image:
      radial-gradient(
        280px circle at var(--fl-mx, 50%) var(--fl-my, 50%),
        var(--fl-glow),
        transparent 70%
      ),
      linear-gradient(160deg, var(--fl-glow), transparent 68%);
  }

  .fl-tile:active {
    transform: perspective(1000px) scale(0.985);
    transition-duration: 0.08s;
  }

  /* Hover quickens the pictures through motion.js, which eases each
     animation's playbackRate. Changing animation-duration here instead made
     a loop jump whenever the pointer arrived mid-animation. */

  /* The border beam, same as the cards */
  .fl-tile::after {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
      from var(--fl-angle),
      transparent 0 62%,
      var(--fl-periwinkle) 82%,
      transparent 100%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .fl-tile:hover::after {
    opacity: 1;
    animation: fl-spin 2.8s linear infinite;
  }
.fl-tile:focus-visible::after {
    opacity: 1;
    animation: fl-spin 2.8s linear infinite;
  }

}

/* When a wide tile stops having room for a picture beside its copy (its 46%
   and 52% columns get too narrow), it stacks like the small tiles: picture on
   top, copy underneath */
@media (max-width: 1100px) {

  .fl-t-awards .fl-tile-viz,
  .fl-t-up .fl-tile-viz {
    inset: 0 0 5.6rem 0;
    width: auto;
  }

  .fl-t-awards .fl-tile-copy,
  .fl-t-up .fl-tile-copy {
    max-width: none;
  }

  .fl-award {
    gap: 0.7rem;
  }

  .fl-award .fl-trophy svg {
    width: 4.2rem;
    height: 4.2rem;
  }

}

@media (max-width: 900px) {

  .fl-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fl-t-bumps {
    grid-column: 1 / -1;
    grid-row: span 2;
  }
  .fl-t-spot,
  .fl-t-tokens {
    grid-column: auto;
    grid-row: auto;
  }
  .fl-t-flat {
    grid-column: auto;
    grid-row: span 2;
  }
  .fl-t-awards,
  .fl-t-up {
    grid-column: 1 / -1;
    grid-row: auto;
  }

}

@media (max-width: 560px) {

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

  .fl-t-bumps,
  .fl-t-flat,
  .fl-t-spot,
  .fl-t-tokens,
  .fl-t-awards,
  .fl-t-up {
    grid-column: auto;
    grid-row: auto;
  }

  .fl-t-bumps {
    grid-row: span 2;
  }

}

/* ------------------------------------------------------------------
   Icon animations
   Header-tab icons play a small animation (sidebar and doc-page card icons stay still)
   on hover or keyboard focus that suits what the icon is: the bell rings,
   the globe spins, the dice roll, the bot flaps its ears. Fern renders each
   Font Awesome icon as an inline <svg icon="name"> with a front .fa-primary
   layer and a faded back .fa-secondary layer, so each icon is choreographed
   per layer, in CSS only. Every keyframe set ends on the resting state, so
   nothing snaps when it finishes. Any icon without its own animation gets a
   small pop. Skipped under prefers-reduced-motion.
   ------------------------------------------------------------------ */

@keyframes fl-ic-pop {
  40% {
    transform: scale(1.22);
  }
  70% {
    transform: scale(0.95);
  }
}

@keyframes fl-ic-arrow-up-right-dots-p {30%{transform:translate(-48px,48px) scale(.94)}55%{transform:translate(96px,-96px) scale(1.12)}80%{transform:translate(-16px,16px)}}
@keyframes fl-ic-arrow-up-right-dots-s {35%{transform:scale(.86)}65%{transform:scale(1.12)}85%{transform:scale(.98)}}
@keyframes fl-ic-arrows-rotate-root {to{transform:rotate(360deg)}}
@keyframes fl-ic-bell-root {12%{transform:rotate(16deg)}28%{transform:rotate(-14deg)}44%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}76%{transform:rotate(4deg)}90%{transform:rotate(-2deg)}}
@keyframes fl-ic-bell-p {15%{transform:translateX(64px)}30%{transform:translateX(-64px)}45%{transform:translateX(48px)}60%{transform:translateX(-32px)}80%{transform:translateX(16px)}}
@keyframes fl-ic-bolt-root {12%{transform:translate(-1px,0) scale(1.25) skewX(-8deg);filter: drop-shadow(0 0 3px currentColor);}20%{transform:translate(1.5px,0) scale(1.3) skewX(6deg);filter: drop-shadow(0 0 3px currentColor);}32%{transform:translate(-1px,0) scale(1.2);filter: drop-shadow(0 0 3px currentColor);}50%{transform:translate(.5px,0) scale(1.1)}}
@keyframes fl-ic-book-open-s {40%{transform:scaleX(.1) skewY(-9deg)}68%{transform:scaleX(1.07) skewY(2deg)}}
@keyframes fl-ic-book-open-p {40%{transform:scale(1.03)}}
@keyframes fl-ic-box-archive-p {25%{transform:translateY(-96px) rotate(-12deg)}55%{transform:translateY(-96px) rotate(-12deg)}75%{transform:translateY(32px) rotate(2deg)}}
@keyframes fl-ic-box-archive-s {25%{transform:scale(1.04,.96)}75%{transform:scale(1.03,.97)}}
@keyframes fl-ic-calendar-check-root {20%{transform:translateY(-4px) scale(1.05)}45%{transform:translateY(0) scale(1.08,.9)}65%{transform:translateY(-1px) scale(.98,1.03)}}
@keyframes fl-ic-chart-line-p {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fl-ic-chart-line-s {50%{transform:scale(1.04)}}
@keyframes fl-ic-circle-question-p {20%{transform:rotate(-18deg) scale(1.25)}45%{transform:rotate(14deg) scale(1.15)}70%{transform:rotate(-6deg) scale(1.05)}}
@keyframes fl-ic-circle-question-s {20%{transform:scale(1.06)}45%{transform:scale(.97)}70%{transform:scale(1.02)}}
@keyframes fl-ic-clipboard-list-root {25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-1.5deg)}}
@keyframes fl-ic-clipboard-list-p {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fl-ic-clock-rotate-left-s {to{transform:rotate(-360deg)}}
@keyframes fl-ic-clock-rotate-left-p {to{transform:rotate(-720deg)}}
@keyframes fl-ic-coins-s {20%{transform:translateY(-96px) scaleX(0)}40%{transform:translateY(-128px) scaleX(-1)}60%{transform:translateY(-96px) scaleX(0)}80%{transform:translateY(0) scaleX(1)}}
@keyframes fl-ic-coins-p {65%{transform:scale(1)}78%{transform:scale(1.06,.92)}90%{transform:scale(.99,1.02)}}
@keyframes fl-ic-diagram-project-s {from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fl-ic-diagram-project-p {30%{transform:scale(.9)}60%{transform:scale(1.1)}}
/* Cause and effect: the front die crouches, hops and thuds down, and only then does the faded die behind get knocked into its own toss (its animation is delayed to line up with the impact). Child transforms are in the icon's 512 unit space, about 32 units per screen px. */
@keyframes fl-ic-dice-p {14%{transform:translate(0,25px) scale(1.08,.9)}40%{transform:translate(-25px,-150px) rotate(240deg) scale(1.06)}58%{transform:translate(0,0) rotate(370deg) scale(1.14,.82)}72%{transform:translate(0,-40px) rotate(362deg) scale(.98,1.04)}86%{transform:translate(0,0) rotate(360deg) scale(1.04,.96)}to{transform:rotate(360deg)}}
@keyframes fl-ic-dice-s {12%{transform:translate(30px,12px) scale(.94,.94)}32%{transform:translate(-90px,-140px) rotate(-200deg) scale(1.08)}62%{transform:translate(0,0) rotate(-390deg) scale(1.12,.84)}78%{transform:translate(-20px,-40px) rotate(-362deg)}90%{transform:translate(0,0) rotate(-360deg) scale(1.03,.97)}to{transform:rotate(-360deg)}}
@keyframes fl-ic-gift-root {25%{transform:scale(1.06,.9)}50%{transform:translateY(-4px) scale(.98,1.06)}70%{transform:translateY(0) scale(1.04,.94)}85%{transform:translateY(-1px)}}
@keyframes fl-ic-gift-p {45%{transform:scale(1.08)}}
@keyframes fl-ic-globe-p {50%{transform:scaleX(-1)}}
@keyframes fl-ic-globe-s {50%{transform:scale(1.05)}}
@keyframes fl-ic-handshake-s {20%{transform:translate(-70px,-110px) rotate(-7deg)}40%{transform:translate(20px,80px) rotate(5deg)}60%{transform:translate(-60px,-80px) rotate(-6deg)}80%{transform:translate(0,40px) rotate(-1deg)}}
@keyframes fl-ic-handshake-p {20%{transform:translate(70px,110px) rotate(7deg)}40%{transform:translate(-20px,-80px) rotate(-5deg)}60%{transform:translate(60px,80px) rotate(6deg)}80%{transform:translate(0,-40px) rotate(1deg)}}
@keyframes fl-ic-headset-root {20%{transform:translateY(-2px) rotate(-4deg)}40%{transform:translateY(0) rotate(0)}60%{transform:translateY(-2px) rotate(4deg)}80%{transform:translateY(0)}}
@keyframes fl-ic-headset-p {20%,60%{transform:scale(1.14)}40%,80%{transform:scale(.98)}}
@keyframes fl-ic-key-root {25%{transform:rotate(-38deg)}55%{transform:rotate(22deg)}80%{transform:rotate(-6deg)}}
@keyframes fl-ic-pen-fancy-root {15%{transform:translate(-1px,1px) rotate(-8deg)}30%{transform:translate(2px,0) rotate(6deg)}45%{transform:translate(-1px,1px) rotate(-8deg)}60%{transform:translate(2px,0) rotate(6deg)}75%{transform:translate(-.5px,.5px) rotate(-3deg)}}
@keyframes fl-ic-robot-root {20%{transform:rotate(-9deg) translateY(-1.5px)}45%{transform:rotate(8deg) translateY(-1px)}70%{transform:rotate(-4deg)}}
@keyframes fl-ic-robot-s {25%,60%{transform:scale(1.28,1.12)}42%,80%{transform:scale(.94)}}
@keyframes fl-ic-rocket-launch-root {8%{transform:translate(-.5px,.5px)}12%{transform:translate(.5px,-.5px)}16%{transform:translate(-.5px,.5px)}20%{transform:translate(.5px,-.5px)}42%{transform:translate(8px,-8px);opacity:0}43%{transform:translate(-8px,8px);opacity:0}78%{transform:translate(0,0);opacity:1}}
@keyframes fl-ic-rocket-launch-s {10%{transform:scale(1.3)}20%{transform:scale(.9)}30%{transform:scale(1.35)}40%{transform:scale(1)}}
@keyframes fl-ic-rss-s {30%{transform:scale(1.16)}55%{transform:scale(.97)}75%{transform:scale(1.06)}}
@keyframes fl-ic-rss-p {25%{transform:scale(1.5)}55%{transform:scale(.9)}}
@keyframes fl-ic-server-root {25%{transform:translateY(-1.5px)}50%{transform:translateY(.5px)}}
@keyframes fl-ic-server-s {25%{transform:translateX(-96px)}55%{transform:translateX(96px)}80%{transform:translateX(-32px)}}
@keyframes fl-ic-sliders-p {25%{transform:translateX(96px)}55%{transform:translateX(-96px)}80%{transform:translateX(32px)}}
@keyframes fl-ic-star-root {35%{transform:rotate(50deg) scale(1.32);filter: drop-shadow(0 0 3px currentColor);}70%{transform:rotate(72deg) scale(.94)}to{transform:rotate(72deg) scale(1)}}
@keyframes fl-ic-store-p {25%{transform:scaleY(1.3) skewX(-4deg)}50%{transform:scaleY(.85) skewX(3deg)}75%{transform:scaleY(1.08) skewX(-1deg)}}
@keyframes fl-ic-store-s {25%{transform:scale(1.02,.97)}}
@keyframes fl-ic-terminal-p {30%{transform:translateX(64px)}60%{transform:translateX(0)}}
@keyframes fl-ic-terminal-s {15%{transform:scaleX(.15)}30%{transform:scaleX(1)}45%{transform:scaleX(.15)}60%{transform:scaleX(1)}75%{transform:scaleX(.15)}90%{transform:scaleX(1)}}
@keyframes fl-ic-trophy-root {25%{transform:translateY(-3px) rotate(-6deg)}50%{transform:translateY(0) rotate(5deg)}70%{transform:translateY(-1.5px) rotate(-2deg)}}
@keyframes fl-ic-trophy-s {25%,55%{transform:scale(1.18,1.05)}40%{transform:scale(.97)}}
@keyframes fl-ic-wand-magic-sparkles-root {25%{transform:rotate(-16deg)}55%{transform:rotate(12deg)}80%{transform:rotate(-4deg)}}
@keyframes fl-ic-wand-magic-sparkles-s {30%,70%{transform:scale(1.25)}50%{transform:scale(.92)}}
@keyframes fl-ic-wrench-root {30%{transform:rotate(-30deg)}60%{transform:rotate(22deg)}80%{transform:rotate(-8deg)}}

@media (prefers-reduced-motion: no-preference) {

  :is(.fern-header-tabs a) svg[icon] {
    transition:
      color 0.2s ease,
      filter 0.2s ease;
  }

  :root {
    --fl-icon-hover: var(--fl-indigo);
  }

  :root.dark {
    --fl-icon-hover: var(--fl-periwinkle);
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon] {
    color: var(--fl-icon-hover);
    filter: drop-shadow(0 0 6px var(--fl-glow));
    animation: fl-ic-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon] :is(.fa-primary, .fa-secondary) {
    transform-box: fill-box;
    transform-origin: center;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="arrow-up-right-dots"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="arrow-up-right-dots"] .fa-primary {
    animation: fl-ic-arrow-up-right-dots-p .8s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="arrow-up-right-dots"] .fa-secondary {
    animation: fl-ic-arrow-up-right-dots-s .8s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="arrows-rotate"] {
    animation: fl-ic-arrows-rotate-root .95s cubic-bezier(.6,-.25,.3,1.25) 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="bell"] {
    animation: fl-ic-bell-root .95s ease-in-out 0s backwards;
    transform-origin: 50% 8%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="bell"] .fa-primary {
    animation: fl-ic-bell-p .95s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="bolt"] {
    animation: fl-ic-bolt-root .75s ease-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="book-open"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="book-open"] .fa-secondary {
    animation: fl-ic-book-open-s 1s ease-in-out 0s backwards;
    transform-origin: 0% 50%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="book-open"] .fa-primary {
    animation: fl-ic-book-open-p 1s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="box-archive"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="box-archive"] .fa-primary {
    animation: fl-ic-box-archive-p .95s ease-in-out 0s backwards;
    transform-origin: 0% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="box-archive"] .fa-secondary {
    animation: fl-ic-box-archive-s .95s ease-in-out 0s backwards;
    transform-origin: 50% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="calendar-check"] {
    animation: fl-ic-calendar-check-root .75s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="chart-line"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="chart-line"] .fa-primary {
    animation: fl-ic-chart-line-p .8s ease-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="chart-line"] .fa-secondary {
    animation: fl-ic-chart-line-s .8s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="circle-question"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="circle-question"] .fa-primary {
    animation: fl-ic-circle-question-p .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="circle-question"] .fa-secondary {
    animation: fl-ic-circle-question-s .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="clipboard-list"] {
    animation: fl-ic-clipboard-list-root .8s ease-in-out 0s backwards;
    transform-origin: 50% 0%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="clipboard-list"] .fa-primary {
    animation: fl-ic-clipboard-list-p .7s ease-out .1s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="clock-rotate-left"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="clock-rotate-left"] .fa-secondary {
    animation: fl-ic-clock-rotate-left-s .95s cubic-bezier(.5,0,.2,1) 0s backwards;
    transform-box: view-box;
    transform-origin: 50% 50%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="clock-rotate-left"] .fa-primary {
    animation: fl-ic-clock-rotate-left-p .95s cubic-bezier(.5,0,.2,1) 0s backwards;
    transform-box: view-box;
    transform-origin: 50% 50%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="coins"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="coins"] .fa-secondary {
    animation: fl-ic-coins-s .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="coins"] .fa-primary {
    animation: fl-ic-coins-p .9s ease-in-out 0s backwards;
    transform-origin: 50% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="diagram-project"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="diagram-project"] .fa-secondary {
    animation: fl-ic-diagram-project-s .5s ease-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="diagram-project"] .fa-primary {
    animation: fl-ic-diagram-project-p .6s ease-in-out .15s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="dice"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="dice"] .fa-primary {
    animation: fl-ic-dice-p .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="dice"] .fa-secondary {
    animation: fl-ic-dice-s .9s ease-in-out .5s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="gift"] {
    animation: fl-ic-gift-root .75s ease-in-out 0s backwards;
    transform-origin: 50% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="gift"] .fa-primary {
    animation: fl-ic-gift-p .75s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="globe"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="globe"] .fa-primary {
    animation: fl-ic-globe-p 1.1s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="globe"] .fa-secondary {
    animation: fl-ic-globe-s 1.1s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="handshake"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="handshake"] .fa-secondary {
    animation: fl-ic-handshake-s .85s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="handshake"] .fa-primary {
    animation: fl-ic-handshake-p .85s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="headset"] {
    animation: fl-ic-headset-root .9s ease-in-out 0s backwards;
    transform-origin: 50% 90%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="headset"] .fa-primary {
    animation: fl-ic-headset-p .9s ease-in-out 0s backwards;
    transform-box: view-box;
    transform-origin: 50% 50%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="key"] {
    animation: fl-ic-key-root .85s ease-in-out 0s backwards;
    transform-origin: 74% 26%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="pen-fancy"] {
    animation: fl-ic-pen-fancy-root .95s ease-in-out 0s backwards;
    transform-origin: 12% 88%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="robot"] {
    animation: fl-ic-robot-root .95s ease-in-out 0s backwards;
    transform-origin: 50% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="robot"] .fa-secondary {
    animation: fl-ic-robot-s .95s ease-in-out 0s backwards;
    transform-box: view-box;
    transform-origin: 50% 55%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="rocket-launch"] {
    animation: fl-ic-rocket-launch-root 1.2s ease-in 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="rocket-launch"] .fa-secondary {
    animation: fl-ic-rocket-launch-s 1.2s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="rss"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="rss"] .fa-secondary {
    animation: fl-ic-rss-s .75s ease-in-out 0s backwards;
    transform-box: view-box;
    transform-origin: 18% 82%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="rss"] .fa-primary {
    animation: fl-ic-rss-p .75s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="server"] {
    animation: fl-ic-server-root .7s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="server"] .fa-secondary {
    animation: fl-ic-server-s .7s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="sliders"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="sliders"] .fa-primary {
    animation: fl-ic-sliders-p .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="star"] {
    animation: fl-ic-star-root .85s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="store"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="store"] .fa-primary {
    animation: fl-ic-store-p .85s ease-in-out 0s backwards;
    transform-origin: 50% 0%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="store"] .fa-secondary {
    animation: fl-ic-store-s .85s ease-in-out 0s backwards;
    transform-origin: 50% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="terminal"] {
    animation: none;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="terminal"] .fa-primary {
    animation: fl-ic-terminal-p .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="terminal"] .fa-secondary {
    animation: fl-ic-terminal-s .9s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="trophy"] {
    animation: fl-ic-trophy-root .85s ease-in-out 0s backwards;
    transform-origin: 50% 100%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="trophy"] .fa-secondary {
    animation: fl-ic-trophy-s .85s ease-in-out 0s backwards;
    transform-box: view-box;
    transform-origin: 50% 50%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="wand-magic-sparkles"] {
    animation: fl-ic-wand-magic-sparkles-root .95s ease-in-out 0s backwards;
    transform-origin: 20% 85%;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="wand-magic-sparkles"] .fa-secondary {
    animation: fl-ic-wand-magic-sparkles-s .95s ease-in-out 0s backwards;
  }

  :is(.fern-header-tabs a):is(:hover, :focus-visible) svg[icon="wrench"] {
    animation: fl-ic-wrench-root .85s ease-in-out 0s backwards;
    transform-origin: 70% 30%;
  }

}


/* ------------------------------------------------------------------
   Welcome page redo
   Hero lede highlights, three-step path, section kickers,
   the closing CTA, and the "bump" surprise (motion.js). Anything that moves
   is inside prefers-reduced-motion: no-preference.
   ------------------------------------------------------------------ */

/* ---- Hero lede: the three verbs get highlighted ---- */
.fl-lede {
  max-width: 43rem;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.65;
  opacity: 1;
  isolation: isolate;
}

.fl-lede {
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.fl-lede .fl-w {
  position: relative;
  display: inline-block;
  color: var(--fl-indigo);
  font-weight: 800;
  letter-spacing: -0.01em;
}

:root.dark .fl-lede .fl-w {
  color: #b8c2ff;
}

.fl-lede .fl-w::after {
  content: "";
  position: absolute;
  inset: auto -0.12em 0.02em;
  z-index: -1;
  height: 0.5em;
  border-radius: 0.25em;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--fl-periwinkle) 45%, transparent),
    color-mix(in srgb, #c084fc 35%, transparent)
  );
  transform-origin: left center;
}

@keyframes fl-w-draw {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

  .fl-hero:not(.fl-play) .fl-lede .fl-w::after {
    scale: 0 1;
  }

  .fl-hero.fl-play .fl-lede .fl-w::after {
    animation: fl-w-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(1s + var(--w, 0) * 0.3s);
  }

}

/* ---- Section kickers ---- */
.fl-section {
  padding-top: 2.5rem;
}

.fl-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  color: var(--fl-indigo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

:root.dark .fl-kicker {
  color: var(--fl-periwinkle);
}

.fl-kicker b {
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-glow);
  font-weight: 800;
}

.fl-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--fl-border), transparent);
}

/* ---- Three-step path ---- */
.fl-steps3 {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

/* The line that joins the three badges, with a light that travels along it */
.fl-steps3::before {
  content: "";
  position: absolute;
  top: 2.45rem;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--fl-border) 0 6px,
    transparent 6px 12px
  );
}

.fl-steps3::after {
  content: "";
  position: absolute;
  top: calc(2.45rem - 3px);
  left: 16.67%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 12px 3px var(--fl-periwinkle),
    0 0 26px 6px var(--fl-glow);
  opacity: 0;
}

.fl-step3 {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 1.2rem 1.1rem 1.4rem;
  border: 1px solid var(--fl-border);
  border-radius: 1.25rem;
  background-image: linear-gradient(170deg, var(--fl-glow), transparent 70%);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.fl-step3:hover {
  border-color: var(--fl-periwinkle);
  box-shadow: 0 18px 40px -22px var(--fl-periwinkle);
  transform: translateY(-3px);
}
.fl-step3:focus-visible {
  border-color: var(--fl-periwinkle);
  box-shadow: 0 18px 40px -22px var(--fl-periwinkle);
  transform: translateY(-3px);
}

.fl-step3 .n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--fl-periwinkle);
  border-radius: 999px;
  background: var(--fl-indigo);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fl-step3 strong {
  margin-top: 0.4rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fl-step3 .d {
  max-width: 17rem;
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.72;
}

@keyframes fl-j-dot {
  0% {
    left: 16.67%;
    opacity: 0;
  }
  5% {
    left: 16.67%;
    opacity: 1;
    animation-timing-function: linear;
  }
  70% {
    left: 83.33%;
    opacity: 1;
  }
  76%,
  100% {
    left: 83.33%;
    opacity: 0;
  }
}

@keyframes fl-j-glow {
  0% {
    box-shadow: 0 0 0 0 var(--fl-periwinkle);
    scale: 1;
  }
  8% {
    box-shadow: 0 0 0 0.5rem transparent;
    scale: 1.14;
  }
  20%,
  100% {
    box-shadow: 0 0 0 0 transparent;
    scale: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {

  .fl-steps3::after {
    animation: fl-j-dot 8s ease-in-out infinite;
  }

  /* The badges flash as the light reaches them (same 8s cycle) */
  .fl-step3 .n {
    animation: fl-j-glow 8s ease-out infinite;
    animation-delay: 0.4s;
  }
  .fl-step3:nth-child(2) .n {
    animation-delay: 3s;
  }
  .fl-step3:nth-child(3) .n {
    animation-delay: 5.6s;
  }

  .fl-step3:hover {
    transform: perspective(1000px) rotateX(var(--fl-rx, 0deg))
      rotateY(var(--fl-ry, 0deg)) translateY(-3px);
  }
.fl-step3:focus-visible {
    transform: perspective(1000px) rotateX(var(--fl-rx, 0deg))
      rotateY(var(--fl-ry, 0deg)) translateY(-3px);
  }

}

@media (max-width: 760px) {

  .fl-steps3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .fl-steps3::before,
  .fl-steps3::after {
    display: none;
  }

}

/* ---- Closing CTA ---- */
.fl-footer-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3.5rem 1.5rem 3.25rem;
  border-radius: 1.5rem;
}

.fl-footer-cta::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0 12%,
    color-mix(in srgb, var(--fl-indigo) 38%, transparent) 25%,
    transparent 40%,
    color-mix(in srgb, #c084fc 32%, transparent) 62%,
    transparent 78%,
    color-mix(in srgb, var(--fl-periwinkle) 34%, transparent) 90%,
    transparent
  );
  filter: blur(38px);
  opacity: 0.75;
}

.fl-footer-cta h3 {
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.fl-footer-cta p {
  font-size: 1.05rem;
  opacity: 0.8;
}

.fl-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---- The surprise: press B (or click the beta badge) to bump the page ---- */
.fl-eyebrow {
  cursor: pointer;
}

.fl-confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

/* Only used by cached copies of the old DOM-piece confetti */
.fl-confetti {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0.55rem;
  height: 0.9rem;
  border-radius: 2px;
  pointer-events: none;
}

.fl-bump-ring {
  position: fixed;
  z-index: 9998;
  width: 14rem;
  height: 14rem;
  border: 2px solid rgba(255, 214, 102, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 32px rgba(242, 185, 59, 0.55),
    inset 0 0 28px rgba(242, 185, 59, 0.35);
  pointer-events: none;
}

.fl-bump-toast {
  position: fixed;
  top: 5.5rem;
  left: 50%;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.2rem 0.5rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff1bd, #f2b93b 55%, #e29a17);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 18px 40px -14px rgba(201, 138, 18, 0.9),
    0 0 46px -6px rgba(242, 185, 59, 0.55);
  color: #6b4204;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  pointer-events: none;
  translate: -50% 0;
  perspective: 300px;
}

.fl-bump-toast b {
  font-variant-numeric: tabular-nums;
}

.fl-bump-coin {
  display: inline-block;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff8d6 0 18%, transparent 46%),
    linear-gradient(145deg, #ffe07a, #d68c0c);
  box-shadow:
    0 0 0 2px rgba(122, 77, 5, 0.35) inset,
    0 0 0 4px rgba(255, 255, 255, 0.25) inset;
}

/* The splash page sits outside the tabs, but Fern still marks the first tab
   (Guides) as selected there. Make it look unselected while the splash is
   showing: the muted inactive colour and no underline. */
html:has(.fl-hero) .fern-header-tabs a[data-state="active"] {
  color: var(--grayscale-a11);
}

html:has(.fl-hero) .fern-header-tabs a[data-state="active"]::after {
  opacity: 0;
}

/* ------------------------------------------------------------------
   Community awards bento (grow/awards.mdx)
   The docs column is only about 640px wide, so this is two columns: the
   featured award and The Encourager span the width with the icon beside the
   text, and the other four pair up. Tags get real spacing so they never touch.
   ------------------------------------------------------------------ */

.fl-awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0 2rem;
}

.fl-aw {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.3rem 1.2rem;
  overflow: hidden;
  border: 1px solid var(--fl-border);
  border-radius: 1.1rem;
  background-image: linear-gradient(160deg, var(--fl-glow), transparent 70%);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.fl-aw:hover {
  border-color: rgba(190, 200, 225, 0.6);
  box-shadow: 0 16px 36px -24px rgba(190, 200, 225, 0.7);
}
.fl-aw:focus-visible {
  border-color: rgba(190, 200, 225, 0.6);
  box-shadow: 0 16px 36px -24px rgba(190, 200, 225, 0.7);
}

/* The silver shine: a soft highlight in the corner of every tile */
.fl-aw::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(200, 210, 235, 0.16), transparent);
  pointer-events: none;
}

/* Full-width tiles: icon on the left, text on the right */
.fl-aw.is-hero,
.fl-aw.is-wide {
  display: grid;
  grid-column: span 2;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.2rem;
  align-items: start;
}

.fl-aw.is-hero {
  padding: 1.6rem 1.6rem 1.5rem;
}

.fl-aw.is-hero .fl-aw-icon,
.fl-aw.is-wide .fl-aw-icon {
  grid-row: 1 / span 3;
  margin: 0;
}

.fl-aw.is-hero .fl-aw-name,
.fl-aw.is-hero .fl-aw-desc,
.fl-aw.is-hero .fl-aw-tags,
.fl-aw.is-wide .fl-aw-name,
.fl-aw.is-wide .fl-aw-desc,
.fl-aw.is-wide .fl-aw-tags {
  grid-column: 2;
}

.fl-aw-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 0.4rem;
  border: 1px solid rgba(190, 200, 225, 0.35);
  border-radius: 0.8rem;
  background: rgba(190, 200, 225, 0.1);
  font-size: 1.45rem;
  line-height: 1;
}

.fl-aw.is-hero .fl-aw-icon {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 1.15rem;
  font-size: 2.4rem;
}

.fl-aw-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.fl-aw.is-hero .fl-aw-name {
  font-size: 1.4rem;
}

.fl-aw-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.78;
}

.fl-aw-desc b {
  opacity: 1;
}

.fl-aw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.fl-tag {
  padding: 0.18rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.fl-tag.is-servers {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.fl-tag.is-members {
  border-color: rgba(123, 140, 255, 0.4);
  background: rgba(123, 140, 255, 0.14);
  color: var(--fl-indigo);
}

.fl-tag.is-auto {
  border-color: rgba(190, 200, 225, 0.45);
  background: rgba(190, 200, 225, 0.14);
  color: #64708a;
}

:root.dark .fl-tag.is-servers {
  color: #4ade80;
}

:root.dark .fl-tag.is-members {
  color: var(--fl-periwinkle);
}

:root.dark .fl-tag.is-auto {
  color: #c4ccdf;
}

@media (max-width: 560px) {

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

  .fl-aw.is-hero,
  .fl-aw.is-wide {
    grid-column: auto;
    column-gap: 0.9rem;
  }

  .fl-aw.is-hero {
    padding: 1.3rem 1.2rem;
  }

  .fl-aw.is-hero .fl-aw-icon {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.8rem;
  }

}