/* What we make: BrandFocus, RocketFuel and JetLoop cards (homepage).
   Ported from the wireframes' Packages Stripe option; package dialogs are not included. */

/* Packages, Stripe option: the Platea card language (dark), three bento cards. */
.cjb {
  --bg: #08090a;
  --surface: #0e0f11;
  --ink: #f7f8f8;
  --ink-2: #d0d6e0;
  --ink-soft: #a3abb8;
  --ink-mute: #8a8f98;
  --ink-faint: #5d636c;
  --line: #1f2124;
  --line-soft: rgba(255, 255, 255, .07);
  --wash: #16171a;
  --panel: #151619;
  --panel-2: #1a1b1f;
  --panel-shadow: 0 18px 36px rgba(0, 0, 0, .5);
  --bubble-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
  --act: #d8fc14;
  --act-tint: rgba(216, 252, 20, .09);
  --act-icon-hover: #08090a;
  --glow-a: #1292fe;
  --glow-b: #e08af4;
  --glow-opacity: .75;
  --good: #3ee7c0;
  --good-bg: rgba(2, 209, 173, .14);
  --bad: #ffa043;
  --bad-bg: rgba(255, 142, 27, .14);
  --veil: #0e0f11;
  --bf-a: #b39bff;
  --bf-b: #ec95fe;
  --bf-c: #fe9fda;
  --rf-a: #1292fe;
  --rf-b: #02d1ad;
  --rf-c: #00e950;
  --jl-a: #bfff0c;
  --jl-b: #d8fc14;
  --jl-c: #fbe74e;
  --font-display: "Sohne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Sohne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
  --ease-swift: cubic-bezier(.2, 0, 0, 1);
  color-scheme: dark;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 120px 24px 128px;
}

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

.cjb__inner {
  max-width: 1232px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.cjb__heading {
  margin: 0;
  max-width: 980px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.cjb__heading span {
  color: var(--ink-mute);
}

.cjb__bento {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cjb .tabular {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Card shell (Platea): border layer + glow, surface clipped with clip-path
   that opens on hover, title and button pinned to their corners.
   ========================================================================== */
.cjb-card {
  --card-ease: var(--ease-out-quart);
  --card-duration: 800ms;
  --card-radius: 6px;
  --grow-x: 0px;
  --grow-y: 0px;
  --shift-x: 0px;
  --shift-y: 0px;
  position: relative;
  display: flex;
  flex: 1;
  flex-basis: 100%;
  aspect-ratio: 344 / 504;
  max-height: 576px;
  contain: layout style;
  color: var(--ink);
}

.cjb-card img,
.cjb-card svg,
.cjb-card canvas {
  pointer-events: none;
}

.cjb-card__inner {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: calc(var(--card-radius) - 1px);
  background: var(--surface);
}

.cjb-card__content {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: calc(var(--card-radius) - 1px);
  overflow: hidden;
}

.cjb-card__content-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.cjb-card__graphic {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.cjb-card__border {
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: var(--card-radius);
  background: var(--line);
  overflow: hidden;
  pointer-events: none;
}

.cjb-card__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 80%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  display: none;
}

.cjb-card__glow-gradient {
  position: absolute;
  inset: 0;
  opacity: var(--glow-opacity);
  background: radial-gradient(circle, var(--glow-a), var(--glow-b) 33%, var(--line) 66%);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
}

.pk-card--wide .cjb-card__glow,
.pk-card--banner .cjb-card__glow {
  width: 130%;
  height: auto;
}

.pk-card--wide .cjb-card__glow-gradient {
  inset: 15%;
}

.pk-card--banner .cjb-card__glow-gradient {
  inset: 30%;
}

.cjb-card__text {
  pointer-events: none;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  max-width: min(calc(100% - 80px), 21ch);
  font-family: var(--font-display);
  font-size: 26px;
}

.cjb-card__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: inherit;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* package label above the title */
.pk-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: -0.003em;
  color: var(--ink);
  white-space: nowrap;
}

.pk-label span {
  font-weight: 400;
  color: var(--ink-mute);
}

.pk-dot {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  flex: none;
}

.pk-dot--bf { background: linear-gradient(135deg, var(--bf-a), var(--bf-b) 55%, var(--bf-c)); }
.pk-dot--rf { background: linear-gradient(135deg, var(--rf-a), var(--rf-b) 55%, var(--rf-c)); }
.pk-dot--jl { background: linear-gradient(135deg, var(--jl-a), var(--jl-c)); }

/* whole-card trigger (opens the package dialog) */
.pk-trigger {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.pk-trigger:focus-visible {
  outline: none;
}

.cjb-card:has(.pk-trigger:focus-visible) .cjb-card__border {
  outline: 3px solid color-mix(in srgb, var(--rf-a) 75%, transparent);
  outline-offset: 2px;
}

/* Expand control (38×38, radius 4) */
.cjb-card__expand {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 38px;
  height: 38px;
  z-index: 4;
  display: block;
  border-radius: 4px;
  color: var(--act);
  pointer-events: none;
}

.cjb-card__expand::before,
.cjb-card__expand::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 4px;
}

.cjb-card__expand::before {
  opacity: 0;
  background: var(--act);
}

.cjb-card__expand::after {
  background: var(--act-tint);
}

.cjb-card__expand-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cjb-card__expand svg {
  width: 20px;
  height: 20px;
}

.cjb-card__expand path {
  fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .cjb-card__text,
  .cjb-card__expand,
  .cjb-card__inner,
  .cjb-card__border {
    transition-duration: var(--card-duration);
    transition-timing-function: var(--card-ease);
  }

  .cjb-card__text,
  .cjb-card__expand {
    transition-property: transform;
  }

  .cjb-card__inner,
  .cjb-card__border {
    transition-property: clip-path;
  }

  .cjb-card__expand::before,
  .cjb-card__expand::after {
    transition: opacity .6s var(--ease-out-expo);
  }

  .cjb-card__expand path {
    transition: transform .6s var(--ease-out-expo);
  }

  .cjb-card__glow {
    transition: opacity .25s linear;
  }

  .cjb-card__glow-gradient {
    transition: transform 1s var(--ease-out-expo);
    will-change: transform;
  }
}

@media (min-width: 640px) {
  .cjb-card {
    flex-basis: calc(50% - 16px);
    max-height: 100%;
  }
}

@media (min-width: 940px) {
  .cjb-card {
    aspect-ratio: 400 / 676;
    max-width: 400px;
    flex-basis: calc(33.333% - 12px);
  }

  .pk-card--wide {
    aspect-ratio: 816 / 676;
    max-width: 816px;
    flex-basis: calc(66.666% - 8px);
  }

  .pk-card--banner {
    aspect-ratio: 1232 / 450;
    max-width: 1232px;
    flex-basis: 100%;
  }

  .cjb-card__text {
    max-width: 21ch;
    top: 24px;
    left: 24px;
  }

  .pk-card--wide .cjb-card__text {
    max-width: 30ch;
  }

  .pk-card--banner .cjb-card__text {
    max-width: 24ch;
  }

  .cjb-card__glow {
    display: block;
  }

  .cjb-card__inner {
    inset: calc(-1 * var(--grow-y)) calc(-1 * var(--grow-x));
    border-radius: 0;
    clip-path: inset(var(--grow-y) var(--grow-x) round calc(var(--card-radius) - 1px));
  }

  .cjb-card__border {
    inset: calc(-1 * var(--grow-y) - 1px) calc(-1 * var(--grow-x) - 1px);
    clip-path: inset(var(--grow-y) var(--grow-x) round var(--card-radius));
  }
}

@media (pointer: fine) {
  .cjb-card:hover .cjb-card__expand {
    color: var(--act-icon-hover);
  }

  .cjb-card:hover .cjb-card__expand path:first-child {
    transform: translate(1px, -1px);
  }

  .cjb-card:hover .cjb-card__expand path:nth-child(2) {
    transform: translate(-1px, 1px);
  }

  .cjb-card:hover .cjb-card__expand::before {
    opacity: 1;
  }

  .cjb-card:hover .cjb-card__expand::after {
    opacity: 0;
  }
}

@media (min-width: 940px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cjb-card:hover .cjb-card__glow {
    opacity: 1;
  }

  .cjb-card:hover .cjb-card__expand path:first-child {
    transform: translate(2px, -2px);
  }

  .cjb-card:hover .cjb-card__expand path:nth-child(2) {
    transform: translate(-2px, 2px);
  }

  .cjb-card:hover .cjb-card__text {
    transform: translate(var(--shift-x), var(--shift-y));
  }

  .cjb-card:hover .cjb-card__expand {
    transform: translate(calc(var(--shift-x) * -1), var(--shift-y));
  }

  .cjb-card:hover .cjb-card__inner {
    clip-path: inset(0 round calc(var(--card-radius) - 1px));
  }

  .cjb-card:hover .cjb-card__border {
    clip-path: inset(0 round var(--card-radius));
  }
}

/* Fixed design canvas, scaled down only: min(1, width / design width) */
.cjb-dg {
  position: relative;
  width: 100%;
  max-width: calc(var(--dg-w) * 1px);
  margin: 0 auto;
  aspect-ratio: var(--dg-w) / var(--dg-h);
}

.cjb-dg__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--dg-w) * 1px);
  height: calc(var(--dg-h) * 1px);
  transform: scale(var(--dg-scale, 1));
  transform-origin: top left;
}

/* Simulated UI: small type, light weights */
.cjb-ui {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.003em;
}

.cjb-panel {
  background: var(--panel);
  border-radius: 6px;
  outline: 1px solid var(--line-soft);
  box-shadow: var(--panel-shadow);
}

/* Odometer slot: a fixed window, two stacked values */
.cjb-roll {
  position: relative;
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  vertical-align: bottom;
}

.cjb-roll__strip {
  display: flex;
  flex-direction: column;
}

.cjb-roll__strip > span {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  white-space: nowrap;
}

.cjb-roll--end .cjb-roll__strip > span {
  text-align: right;
}

/* shared bits */
.pk-blob {
  position: absolute;
  left: 50%;
  border-radius: 100%;
  filter: blur(14px);
  transform: translate3d(-50%, 0, 0) scale(2);
  opacity: .42;
}

.pk-veil {
  position: absolute;
  left: 50%;
  width: 90%;
  aspect-ratio: 680 / 309;
  border-radius: 100%;
  filter: blur(15px);
  transform: translate3d(-50%, 0, 0) scale(2);
  background: linear-gradient(180deg, var(--veil) 41%, color-mix(in srgb, var(--veil) 0%, transparent));
}

.pk-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

.pk-av--bf { background: linear-gradient(135deg, var(--bf-a), var(--bf-c)); color: #22102c; }
.pk-av--rf { background: linear-gradient(135deg, var(--rf-a), var(--rf-c)); color: #021a14; }

.pk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 400;
  white-space: nowrap;
  background: var(--wash);
  color: var(--ink-2);
}

.pk-check {
  position: relative;
  width: 15px;
  height: 15px;
  flex: none;
}

.pk-check svg {
  display: block;
  width: 15px;
  height: 15px;
  overflow: visible;
}

.pk-check circle {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1.2;
}

.pk-check path {
  fill: none;
  stroke: #0b0b10;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
}

/* ==========================================================================
   BrandFocus: one premium creator video, reviewed and approved
   ========================================================================== */
.bf {
  position: absolute;
  inset: 0;
}

.bf__bg {
  position: absolute;
  inset: 0;
}

.bf__bg .pk-blob--a {
  width: 84%;
  aspect-ratio: 672 / 431;
  bottom: -16%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(179, 155, 255, .72) 55%, rgba(179, 155, 255, 0) 100%);
}

.bf__bg .pk-blob--b {
  width: 86%;
  aspect-ratio: 685 / 407;
  bottom: 6%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(236, 149, 254, .6) 50%, rgba(236, 149, 254, 0) 100%);
}

.bf__bg .pk-blob--c {
  width: 80%;
  aspect-ratio: 700 / 419;
  bottom: 22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(254, 159, 218, .36) 40%, rgba(254, 159, 218, 0) 100%);
}

.bf__bg .pk-veil {
  bottom: 46%;
}

.bf__stage {
  position: absolute;
  inset: 150px 0 0;
  display: flex;
  justify-content: center;
}

.bf__host {
  width: 88%;
}

.bf-phone {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 196px;
  height: 392px;
  padding: 6px;
  border-radius: 26px;
  background: linear-gradient(160deg, #2b2e35, #0f1012 58%, #22242a);
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .8), 0 12px 24px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.bf-phone__screen {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0b0c0d;
}

.bf-phone__screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bf-raw {
  filter: saturate(.2) contrast(.92) brightness(.74);
}

.bf-graded {
  filter: saturate(1.12) contrast(1.05);
  clip-path: inset(0 0 0 0);
}

.bf-wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 14px 1px rgba(255, 255, 255, .45);
  opacity: 0;
}

.bf-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, 0) 20%, rgba(8, 9, 10, 0) 62%, rgba(8, 9, 10, .85) 100%);
}

.bf-ig {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  line-height: 1.25;
  color: #f7f8f8;
}

.bf-ig__av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
  flex: none;
}

.bf-ig b {
  display: block;
  font-weight: 600;
}

.bf-ig span {
  display: block;
  font-size: 8.5px;
  color: rgba(255, 255, 255, .7);
}

.bf-cap {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  font-size: 10px;
  line-height: 1.35;
  color: #f7f8f8;
}

.bf-cap b {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
}

.bf-prog {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .2);
  overflow: hidden;
}

.bf-prog i {
  display: block;
  width: 100%;
  height: 100%;
  background: #f7f8f8;
  transform-origin: left;
  transform: scaleX(.62);
}

.bf-glint {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 236, 252, .28) 48%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-14deg);
  opacity: 0;
}

.bf-ring {
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--bf-a), var(--bf-b) 50%, var(--bf-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}

.bf-halo {
  position: absolute;
  inset: 10% -6%;
  border-radius: 40px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(236, 149, 254, .35), rgba(236, 149, 254, 0) 70%);
  filter: blur(18px);
  opacity: 0;
}

/* creative-direction note */
.bf-note {
  position: absolute;
  left: 150px;
  top: 34px;
  width: 196px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 11px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  outline: 1px solid var(--line-soft);
  box-shadow: var(--bubble-shadow);
}

.bf-note__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--ink-mute);
  white-space: nowrap;
}

.bf-note__head b {
  font-weight: 600;
  color: var(--ink);
}

.bf-note__time {
  margin-left: auto;
  height: 15px;
  padding: 0 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 600;
  color: #f2b8ff;
  background: rgba(236, 149, 254, .14);
}

.bf-note__text {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.38;
  color: var(--ink-2);
}

/* review checklist */
.bf-review {
  position: absolute;
  left: 140px;
  top: 150px;
  width: 206px;
  padding: 11px 12px 6px;
  font-size: 10.5px;
}

.bf-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  font-size: 10.5px;
  color: var(--ink-mute);
}

.bf-review__head b {
  font-weight: 600;
  color: var(--ink);
}

.pk-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 8px 0 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--wash);
}

.pk-status__dot {
  position: relative;
  width: 6px;
  height: 6px;
  flex: none;
}

.pk-status__dot i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.pk-status__dot i:first-child {
  background: #ff8e1b;
}

.pk-status__dot i:last-child {
  opacity: 0;
}

.bf .pk-status__dot i:last-child { background: linear-gradient(135deg, var(--bf-a), var(--bf-c)); }
.jl .pk-status__dot i:first-child { background: transparent; box-shadow: inset 0 0 0 1.4px var(--jl-c); }
.jl .pk-status__dot i:last-child { background: var(--jl-b); }

.bf-row {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  height: 29px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.bf-row__val {
  font-size: 9.5px;
  color: var(--ink-mute);
}

.bf-row__bar {
  position: relative;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: var(--wash);
  overflow: hidden;
}

.bf-row__bar i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bf-a), var(--bf-c));
  transform-origin: left;
  transform: scaleX(0);
}

.bf .pk-check.is-on circle { fill: var(--bf-b); stroke: rgba(236, 149, 254, 0); }
.bf .pk-check.is-on path { stroke-dashoffset: 0; }

/* approval toast */
.bf-toast {
  position: absolute;
  left: 44px;
  top: 426px;
  width: 268px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
}

.bf-toast__icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bf-a), var(--bf-b) 55%, var(--bf-c));
  color: #22102c;
}

.bf-toast__icon svg {
  width: 15px;
  height: 15px;
}

.bf-toast b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.bf-toast span {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  color: var(--ink-mute);
}

/* hover: the floating panels drift apart from the phone */
.bf-note,
.bf-review,
.bf-toast,
.bf-phone {
  transition: translate .7s var(--ease-in-out-cubic);
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pk-card--bf:hover .bf-note { translate: 8px -4px; }
  .pk-card--bf:hover .bf-review { translate: 12px 2px; }
  .pk-card--bf:hover .bf-toast { translate: 0 6px; }
  .pk-card--bf:hover .bf-phone { translate: -4px 0; }
}

/* ==========================================================================
   RocketFuel: matrix cell -> HookLab race -> winner -> next batch
   ========================================================================== */
.rf {
  position: absolute;
  inset: 0;
}

.rf__bg {
  position: absolute;
  inset: 0;
}

.rf__bg .pk-blob--a {
  left: 70%;
  width: 62%;
  aspect-ratio: 672 / 431;
  bottom: -34%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(18, 146, 254, .5) 55%, rgba(18, 146, 254, 0) 100%);
}

.rf__bg .pk-blob--b {
  left: 54%;
  width: 66%;
  aspect-ratio: 685 / 407;
  bottom: -22%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(2, 209, 173, .42) 45%, rgba(2, 209, 173, 0) 100%);
}

.rf__bg .pk-blob--c {
  left: 30%;
  width: 52%;
  aspect-ratio: 700 / 419;
  bottom: -12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 233, 80, .22) 40%, rgba(0, 233, 80, 0) 100%);
}

.rf__bg .pk-veil {
  left: 50%;
  width: 110%;
  bottom: 30%;
}

.rf__stage {
  position: absolute;
  inset: 136px 0 0;
  display: flex;
  justify-content: center;
}

.rf__host {
  width: 94%;
}

.rf-link {
  position: absolute;
  inset: 0;
  overflow: visible;
}

/* matrix */
.rf-matrix {
  position: absolute;
  left: 0;
  top: 34px;
  width: 316px;
  padding: 11px 12px 12px;
  font-size: 10px;
}

.rf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 9px;
  font-size: 10.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}

.rf-head b {
  font-weight: 600;
  color: var(--ink);
}

.rf-grid {
  display: grid;
  grid-template-columns: 74px repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.rf-grid__col {
  font-size: 8.5px;
  line-height: 14px;
  color: var(--ink-mute);
  text-align: center;
  white-space: nowrap;
}

.rf-grid__row {
  font-size: 9px;
  line-height: 1.2;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
}

.rf-cell {
  position: relative;
  height: 34px;
  border-radius: 4px;
  background: var(--wash);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ink-2);
}

.rf-cell__heat {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(18, 146, 254, .5), rgba(0, 233, 80, .55));
  opacity: var(--heat, .1);
}

.rf-cell__ring {
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px var(--rf-c), 0 0 16px rgba(0, 233, 80, .35);
  opacity: 0;
}

.rf-cell .cjb-roll {
  position: relative;
}

/* HookLab */
.rf-lab {
  position: absolute;
  left: 326px;
  top: 0;
  width: 434px;
  padding: 11px 14px 14px;
  font-size: 10px;
}

.rf-hooks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rf-hook {
  min-width: 0;
}

.rf-tile {
  position: relative;
  height: 162px;
  border-radius: 10px;
  overflow: hidden;
  background: #0b0c0d;
}

.rf-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rf-tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 10, .4) 0%, rgba(8, 9, 10, 0) 30%, rgba(8, 9, 10, 0) 64%, rgba(8, 9, 10, .66) 100%);
}

.rf-tile__h {
  position: absolute;
  left: 7px;
  top: 7px;
  height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 600;
  color: #f7f8f8;
  background: rgba(8, 9, 10, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rf-tile__win {
  position: absolute;
  left: 7px;
  bottom: 7px;
  height: 18px;
  padding: 0 7px 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #03210f;
  background: var(--rf-c);
  opacity: 0;
}

.rf-tile__win svg {
  width: 9px;
  height: 9px;
}

.rf-tile__ring {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(135deg, var(--rf-a), var(--rf-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}

.rf-hook__text {
  margin-top: 8px;
  height: 28px;
  overflow: hidden;
  font-size: 9.5px;
  line-height: 14px;
  color: var(--ink-2);
}

.rf-hook__ctr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 8.5px;
  color: var(--ink-faint);
}

.rf-hook__ctr b {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink);
}

.rf-hook__bar {
  position: relative;
  height: 3px;
  margin-top: 5px;
  border-radius: 3px;
  background: var(--wash);
  overflow: hidden;
}

.rf-hook__bar i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rf-a), var(--rf-c));
  transform-origin: left;
  transform: scaleX(0);
}

/* strategist (agentic) */
.rf-agent {
  position: absolute;
  left: 0;
  top: 296px;
  width: 316px;
  padding: 11px 12px 12px;
  border-radius: 10px;
}

.rf-agent__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--ink-mute);
}

.rf-agent__head b {
  font-weight: 600;
  color: var(--ink);
}

.rf-agent__dots {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.rf-agent__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.rf-skel {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 47px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rf-skel i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .04) 80%);
  background-size: 300% 100%;
  animation: pk-shimmer 1.6s linear infinite;
}

.rf-skel i:nth-child(2) { width: 86%; }
.rf-skel i:nth-child(3) { width: 58%; }

@keyframes pk-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}

.rf-agent__text {
  min-height: 44px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.42;
  color: var(--ink-2);
}

.rf-agent__text span {
  display: inline;
  opacity: 0;
}

.rf-agent__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.rf-agent__chips .pk-chip {
  height: 20px;
  border-radius: 5px;
  color: #b9f5cf;
  background: rgba(0, 233, 80, .08);
  box-shadow: inset 0 0 0 1px rgba(0, 233, 80, .18);
  opacity: 0;
}

/* CPA chart */
.rf-chart {
  position: absolute;
  left: 340px;
  top: 300px;
  width: 408px;
  padding: 12px 14px 10px;
}

.rf-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--ink-mute);
}

.rf-chart__val {
  display: block;
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rf-delta {
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #5cf08f;
  background: rgba(0, 233, 80, .1);
}

.rf-chart svg {
  display: block;
  width: 100%;
  height: 116px;
  margin-top: 6px;
  overflow: visible;
}

.rf-chart circle {
  transform-box: fill-box;
  transform-origin: center;
}

.rf-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 8.5px;
  color: var(--ink-faint);
}

/* hover: panels separate a little */
.rf-matrix,
.rf-lab,
.rf-agent,
.rf-chart {
  transition: translate .7s var(--ease-in-out-cubic);
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pk-card--rf:hover .rf-matrix { translate: -6px -4px; }
  .pk-card--rf:hover .rf-lab { translate: 4px -6px; }
  .pk-card--rf:hover .rf-agent { translate: -6px 6px; }
  .pk-card--rf:hover .rf-chart { translate: 6px 6px; }
}

/* ==========================================================================
   JetLoop: studio -> weekly drop -> ads manager, on a conveyor of weeks
   ========================================================================== */
.jl {
  position: absolute;
  inset: 0;
}

.jl__bg {
  position: absolute;
  inset: 0;
}

.jl__bg .pk-blob--a {
  left: 80%;
  width: 40%;
  aspect-ratio: 672 / 431;
  bottom: -58%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(191, 255, 12, .24) 50%, rgba(191, 255, 12, 0) 100%);
}

.jl__bg .pk-blob--b {
  left: 44%;
  width: 34%;
  aspect-ratio: 685 / 407;
  bottom: -62%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(251, 231, 78, .14) 45%, rgba(251, 231, 78, 0) 100%);
}

.jl__bg .pk-veil {
  width: 120%;
  bottom: 30%;
  opacity: .9;
}

.jl__dg {
  position: absolute;
  inset: 0;
}

.jl__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.jl-path {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.jl-studio {
  position: absolute;
  left: 40px;
  top: 158px;
  width: 290px;
  padding: 11px 12px 6px;
  font-size: 10.5px;
}

.jl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  font-size: 10.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}

.jl-head b {
  font-weight: 600;
  color: var(--ink);
}

.jl-step {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 64px;
  align-items: center;
  column-gap: 8px;
  height: 28px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.jl-step__bar {
  position: relative;
  height: 3px;
  border-radius: 3px;
  background: var(--wash);
  overflow: hidden;
}

.jl-step__bar i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--jl-a), var(--jl-c));
  transform-origin: left;
  transform: scaleX(0);
}

.jl .pk-check.is-on circle { fill: var(--jl-b); stroke: rgba(216, 252, 20, 0); }
.jl .pk-check.is-on path { stroke-dashoffset: 0; }

/* the weekly drop that travels to the ad account */
.jl-packet {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 92px;
  margin: -46px 0 0 -32px;
  opacity: 0;
  will-change: transform, opacity;
}

.jl-packet__card {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  padding: 2.5px;
  background: linear-gradient(160deg, #2b2e35, #0f1012 60%, #22242a);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .8);
}

.jl-packet__card img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}

.jl-packet__card:nth-child(1) { transform: translate(-9px, 4px) rotate(-8deg); }
.jl-packet__card:nth-child(2) { transform: translate(9px, 4px) rotate(8deg); }

.jl-packet__badge {
  position: absolute;
  right: -10px;
  top: -9px;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #141a00;
  background: var(--jl-b);
  box-shadow: 0 0 0 3px var(--surface);
}

.jl-ads {
  position: absolute;
  left: 770px;
  top: 84px;
  width: 420px;
  padding: 11px 14px 14px;
  font-size: 10.5px;
}

.jl-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 0 10px;
  border-top: 1px solid var(--line);
}

.jl-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  color: var(--ink-mute);
}

.jl-stat b {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.jl-grid {
  position: relative;
  height: 160px;
}

.jl-tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 43px;
  height: 77px;
  border-radius: 6px;
  overflow: hidden;
  background: #0b0c0d;
  will-change: transform, opacity;
}

.jl-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jl-tile__tag {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(8, 9, 10, .7);
  opacity: 0;
}

.jl-tile__tag--new { background: var(--jl-b); }
.jl-tile__tag--old { background: #ff8e1b; }

.jl-tile__dim {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 10, .45);
  opacity: 0;
}

/* conveyor of weeks */
.jl-ruler {
  position: absolute;
  left: 40px;
  right: 40px;
  top: 398px;
  height: 30px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.jl-ruler__track {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 2000px;
  will-change: transform;
}

.jl-tick {
  position: absolute;
  top: 0;
  width: 96px;
  height: 30px;
  border-left: 1px solid var(--line);
  padding: 4px 0 0 7px;
  font-size: 9px;
  line-height: 1.25;
  color: var(--ink-faint);
  white-space: nowrap;
}

.jl-tick b {
  display: block;
  font-weight: 600;
  color: var(--ink-mute);
}

.jl-today {
  position: absolute;
  top: 378px;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #141a00;
  background: var(--jl-b);
}

.jl-today::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--jl-b), rgba(216, 252, 20, 0));
}

.jl-studio,
.jl-ads {
  transition: translate .7s var(--ease-in-out-cubic);
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pk-card--jl:hover .jl-studio { translate: -6px 0; }
  .pk-card--jl:hover .jl-ads { translate: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cjb-card *,
  .cjb-card *::before,
  .cjb-card *::after,
  .pk-dialog,
  .pk-dialog * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }

  .pk-reveal {
    opacity: 1;
  }
}

/* ---------- homepage fit ---------- */
.cjb.pk {
  --bg: #030405;
  padding: 7.5rem 11.3125rem 8rem;
}
.cjb.pk .cjb__inner { max-width: none; }
.cjb.pk .pk-heading { max-width: 40.625rem; margin: 0 0 4rem; text-wrap: balance; }
@media (min-width: 1441px) {
  .cjb.pk .cjb__bento { width: 1232px; }
}
@media (min-width: 1921px) {
  .cjb.pk { padding-left: calc(11.3125rem + var(--wide-edge)); padding-right: calc(11.3125rem + var(--wide-edge)); }
}
@media (max-width: 1279px) { .cjb.pk { padding-left: 4rem; padding-right: 4rem; } }
/* the card titles don't scale with the graphic: keep JetLoop's studio clear of its title */
@media (min-width: 940px) and (max-width: 1279px) {
  .cjb.pk .jl__dg { transform: translateY(14px); }
}

/* Below 940px the wireframe's fixed-ratio bento doesn't fit: every card goes full width with
   its own height, the text sits above the graphic, and the two wide graphics get a larger,
   cropped scale instead of shrinking to an unreadable thumbnail. */
@media (max-width: 939px) {
  .cjb.pk .cjb-card { flex-basis: 100%; aspect-ratio: auto; max-height: none; }
  .cjb.pk .pk-card--bf { height: 580px; }
  .cjb.pk .pk-card--rf { height: 450px; }
  .cjb.pk .pk-card--jl { height: 450px; }
  .cjb.pk .rf__stage { inset: 160px 0 0; justify-content: flex-start; padding-left: 16px; }
  .cjb.pk .rf__host { width: max(94%, 418px); flex-shrink: 0; }
  .cjb.pk .jl__dg { inset: auto; top: 140px; left: 0; width: 100%; }
}
@media (min-width: 640px) and (max-width: 939px) {
  .cjb.pk .pk-card--bf { height: 650px; }
  .cjb.pk .pk-card--rf { height: auto; aspect-ratio: 760 / 690; }
  .cjb.pk .pk-card--jl { height: auto; aspect-ratio: 1232 / 760; }
}
@media (max-width: 639px) {
  /* JetLoop: zoom on the Ads Manager, where fresh ads land and fatigued ones leave */
  .cjb.pk .jl__dg { width: 986px; left: -604px; top: 88px; }
}
@media (max-width: 767px) {
  .cjb.pk { padding: 5rem 1.25rem 5.5rem; }
  .cjb.pk .pk-heading { font-size: 2.5rem; margin-bottom: 2.5rem; }
}