/* The /business flow (Kedem 2026-10-26: the lab flow page moves into
   /business). One sheet, in cascade order: the frame, Rise (the
   dashboard assembling), the job films' shot world, the seven job
   cards, the journey that carries them, and Try Link. Every rule sits under its own root
   class (.bfl, .bfl-dash, .bfl-shot, .jw, .bfl-story, .bfl-chat), so the
   sheet only touches the /business body. Registered in
   modules/landing/routeStyles/landingStyles.ts like every landing sheet,
   so it is in the server's head on a fresh load and survives a click hop. */

/* The /business frame for the flow: Hero, Rise, the seven jobs, Try
   Link, then pricing. Each part styles itself in its own folder, every
   rule under its own root class (.bfl-dash, .bfl-story, .bfl-chat,
   .bfl-shot). The page sits in the 1280px rail; a part that wants the
   full width breaks out with .bfl-bleed, and the frame clips the
   sideways overflow a 100vw box makes next to a scrollbar. */
.bz2:has(.bfl) {
  overflow-x: clip;
}
.bfl {
  display: block;
  min-height: 100vh;
}
.bfl .bfl-bleed {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}
.bfl-wait {
  min-height: 60vh;
}
.bfl-wait-feel {
  min-height: 0;
}

/* #rise as the dashboard assembling (dash/FlowDash.tsx, Kedem
   2026-10-26 picked still A of the dashboard stills, then moved it here
   in place of the team chart). Everything is scoped to .bfl-dash.

   The controller scales one fixed world (1440 x 900 on desktop, 390 x 844
   on phones and tall screens) into the stage and places every piece from
   scroll. Pinned (.is-pin): the stage sticks while the track scrolls.
   Rest (reduced motion, or a screen too small to read the world): the
   finished dashboard at its natural height. Pieces the controller fades
   are never hidden here, since it clears visibility to show them. */

/* full bleed out of the 1280px rail (as .bfl-bleed), so the waiting
   cards are cut by the window edge, not the rail's */
.bfl-dash {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  isolation: isolate;
  background: var(--bg);
  padding: 0 0 96px;
}
.bfl-dash .bd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bfl-dash .bd-track {
  position: relative;
}
.bfl-dash .bd-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.bfl-dash.is-pin .bd-stage {
  position: sticky;
  top: 0;
}
.bfl-dash .bd-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  visibility: hidden;
}
.bfl-dash.is-ready .bd-world {
  visibility: visible;
}

/* ---- the 3D layer: frame, modules, trails, glint */
.bfl-dash .bd-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}
.bfl-dash[data-mode="p"] .bd-depth {
  perspective: 900px;
}
.bfl-dash .bd-frame {
  position: absolute;
  left: 163px;
  top: 186px;
  width: 1113.12px;
  height: 695.7px;
  z-index: 1;
  transform-origin: 50% 100%;
}
.bz2[data-theme="dark"] .bfl-dash .bd-frame > div {
  outline: 1px solid rgba(255, 255, 255, 0.12);
}
.bfl-dash .bd-sheet {
  position: absolute;
  left: 0;
  top: 60px;
  width: 390px;
  height: 1200px;
  z-index: 1;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background: #fafafa;
  transform-origin: 50% 0;
  box-shadow:
    0 0 0 1px rgba(24, 24, 27, 0.06),
    0 50px 100px -40px rgba(24, 24, 27, 0.38),
    0 16px 36px -16px rgba(24, 24, 27, 0.16);
}
.bz2[data-theme="dark"] .bfl-dash .bd-sheet {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 50px 100px -40px rgba(0, 0, 0, 0.7);
}
.bfl-dash .bd-mhead {
  position: absolute;
  inset: 0;
}

.bfl-dash .bd-card,
.bfl-dash .bd-ghost {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}
.bfl-dash .bd-sh,
.bfl-dash .bd-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  pointer-events: none;
}
.bfl-dash .bd-sh {
  z-index: -1;
  box-shadow: 0 40px 70px -30px rgba(24, 24, 27, 0.45);
}
.bfl-dash .bd-ring {
  opacity: 0;
  box-shadow:
    0 0 0 2px #abefc6,
    0 0 0 10px rgba(16, 179, 84, 0.14),
    0 8px 24px rgba(0, 0, 0, 0.05);
}
.bfl-dash.is-pin .bd-card[data-st="done"] .bd-ring {
  animation: bd-lock 1s ease-out;
}
@keyframes bd-lock {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.bfl-dash .bd-ghost {
  border-radius: var(--r);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.06);
}
.bfl-dash .bd-ghost.g1 {
  filter: blur(6px);
}
.bfl-dash .bd-ghost.g2 {
  filter: blur(12px);
}

/* the glint that crosses the finished dashboard */
.bfl-dash .bd-sweepclip {
  position: absolute;
  z-index: 99;
  overflow: hidden;
  border-radius: 22px;
  pointer-events: none;
}
.bfl-dash[data-mode="p"] .bd-sweepclip {
  border-radius: 28px 28px 0 0;
}
.bfl-dash .bd-sweep {
  position: absolute;
  top: -10%;
  left: 0;
  width: 30%;
  height: 120%;
  background: linear-gradient(
    90deg,
    rgba(16, 179, 84, 0) 0%,
    rgba(16, 179, 84, 0.07) 45%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(16, 179, 84, 0.07) 55%,
    rgba(16, 179, 84, 0) 100%
  );
}

/* ---- the flat layer: headlines, the close */
/* the opening line sits dead centre of the world (Kedem 2026-10-29: "make
   this in the middle and centered", then "it should be in the middle of
   the animation"). Its height is the world's, here and not inline: the
   controller's cleanup strips inline heights on every resize, which used
   to drop the line to the top of the scene, over the waiting cards. */
.bfl-dash .bd-big {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 900px;
  z-index: 3;
  display: grid;
  justify-items: center;
  align-content: center;
}
.bfl-dash[data-mode="p"] .bd-big {
  height: 844px;
}
/* docked over the dashboard: centred on it, the close row centred under it */
.bfl-dash .bd-hdr {
  position: absolute;
  left: 0;
  top: 64px;
  width: 100%;
  z-index: 3;
  display: grid;
  justify-items: center;
}
.bfl-dash .bd-end {
  position: absolute;
  left: 0;
  top: 120px;
  width: 100%;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
/* on phones the close sits on the light dashboard sheet, so its words
   and Book a demo keep the light theme's colours in the dark theme */
.bfl-dash .bd-pend {
  --ink: #18181b;
  --ink2: #2b2b2a;
  --bg: #fafafa;
  position: absolute;
  left: 18px;
  top: 76px;
  z-index: 3;
  display: grid;
  gap: 14px;
}
.bfl-dash .bd-prow {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .bfl-dash .bd-card[data-st="done"] .bd-ring {
    animation: none;
  }
}

/* Mall of America's day, one unbroken shot (the Business flow). Every
   rule is scoped to .bfl-shot. The world is authored in world px and
   moved by one camera transform; the narration band sits fixed in the
   stage, under the site header. The product cards stay light in the
   dark theme; only the page words flip. */

.bfl-shot {
  --bs-ink: #18181b;
  --bs-muted: #71717a;
  --bs-line: #e4e4e7;
  --bs-green: #10b354;
  --bs-blue: #4062ff;
  --bs-top: 112px;
  --bs-bg: var(--bg, #fff);
  --bs-dots: #dedee3;
  --bs-words: #18181b;
  --bs-words-mut: #71717a;
  --bs-track: #e4e4e7;
  position: relative;
  background: var(--bs-bg);
  color: var(--bs-ink);
}

.bfl-shot .bs-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bs-bg);
}

.bfl-shot .bs-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.bfl-shot .bs-world-in {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  color: var(--bs-ink);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

.bfl-shot .bs-world-in img,
.bfl-shot .bs-world-in video {
  max-width: none;
}

.bfl-shot .bs-grid {
  position: absolute;
  left: -600px;
  top: -560px;
  width: 5800px;
  height: 2000px;
  background-image: radial-gradient(
    circle,
    var(--bs-dots) 1.3px,
    transparent 1.8px
  );
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 55%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── type ─────────────────────────────────────────────────────────── */
.bfl-shot .bs-t13 {
  font-size: 13px;
  line-height: 18px;
}
.bfl-shot .bs-t14 {
  font-size: 14px;
  line-height: 20px;
}
.bfl-shot .bs-t15 {
  font-size: 15px;
  line-height: 20px;
}
.bfl-shot .bs-t16 {
  font-size: 16px;
  line-height: 22px;
}
.bfl-shot .bs-t18 {
  font-size: 18px;
  line-height: 24px;
}
.bfl-shot .bs-t20 {
  font-size: 20px;
  line-height: 26px;
}
.bfl-shot .bs-t22 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
}
.bfl-shot .bs-t26 {
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.02em;
}
.bfl-shot .bs-h18 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bfl-shot .bs-h20 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.bfl-shot .bs-m {
  font-weight: 500;
}
.bfl-shot .bs-b {
  font-weight: 600;
}
.bfl-shot .bs-bb {
  font-weight: 700;
}
.bfl-shot .bs-mut {
  color: var(--bs-muted);
}
.bfl-shot .bs-green {
  color: #0a9a46;
}
.bfl-shot .bs-link {
  color: var(--bs-blue);
}
.bfl-shot .bs-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bfl-shot .bs-sub {
  color: #52525b;
}
/* the directory prop's kicker (qr-pages brands.ts: DIRECTORY) */
.bfl-shot .bs-kick {
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #52525b;
}
.bfl-shot .bs-rim {
  background: #f4f4f5;
  border-radius: 14px;
}
.bfl-shot .bs-one {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── layout helpers ───────────────────────────────────────────────── */
.bfl-shot .bs-abs {
  position: absolute;
}
.bfl-shot .bs-fl {
  left: 0;
  top: 0;
}
.bfl-shot .bs-rel {
  position: relative;
  display: inline-flex;
}
.bfl-shot .bs-row {
  display: flex;
  align-items: center;
}
.bfl-shot .bs-col {
  display: flex;
  flex-direction: column;
}
.bfl-shot .bs-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bfl-shot .bs-fill {
  position: absolute;
  inset: 0;
}
.bfl-shot .bs-clip {
  position: relative;
  overflow: hidden;
}
.bfl-shot .bs-clip.bs-abs {
  position: absolute;
}
.bfl-shot .bs-pic {
  display: block;
  object-fit: cover;
  background: #eaeaea;
  max-width: none;
  flex: none;
}
.bfl-shot .bs-net {
  display: block;
  flex: none;
  object-fit: contain;
}
.bfl-shot .bs-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── cards ────────────────────────────────────────────────────────── */
.bfl-shot .bs-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: 22px;
  box-sizing: border-box;
  box-shadow:
    0 1px 2px rgba(16, 16, 20, 0.04),
    0 18px 40px -18px rgba(16, 16, 20, 0.16);
  overflow: hidden;
}
.bfl-shot .bs-rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bs-line);
}
.bfl-shot .bs-box {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: 12px;
  box-sizing: border-box;
}
.bfl-shot .bs-focus {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--bs-ink);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(24, 24, 27, 0.08);
  pointer-events: none;
}
.bfl-shot .bs-caret {
  display: inline-block;
  width: 2px;
  height: 17px;
  margin-left: 1px;
  vertical-align: -3px;
  background: var(--bs-ink);
}
.bfl-shot .bs-caret-s {
  height: 14px;
  vertical-align: -2px;
}
.bfl-shot .bs-c-btn {
  left: 16px;
  top: 510px;
  width: 312px;
  height: 40px;
}
.bfl-shot .bs-m-btn {
  left: 20px;
  top: 498px;
  width: 304px;
  height: 40px;
}
.bfl-shot .bs-ink-pill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--bs-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  white-space: nowrap;
}
.bfl-shot .bs-gcheck {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--bs-green);
  box-shadow: 0 0 0 2px #fff;
}
.bfl-shot .bs-toggle {
  position: relative;
  display: block;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--bs-line);
}
.bfl-shot .bs-toggle-on {
  background: #0d6fff;
}
.bfl-shot .bs-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.bfl-shot .bs-toggle-on .bs-knob {
  left: 18px;
}
.bfl-shot .bs-tag-green,
.bfl-shot .bs-tag-grey,
.bfl-shot .bs-tag-orange,
.bfl-shot .bs-tag-blue {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.bfl-shot .bs-tag-green {
  background: rgba(16, 179, 84, 0.12);
  color: #0a8f42;
}
.bfl-shot .bs-tag-grey {
  background: #f4f4f5;
  color: #52525b;
}
.bfl-shot .bs-tag-orange {
  background: #fff4e5;
  color: #c4560c;
}
.bfl-shot .bs-tag-blue {
  background: rgba(64, 98, 255, 0.1);
  color: #2f4ee0;
}
.bfl-shot .bs-gdot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bs-green);
}
.bfl-shot .bs-trig {
  position: absolute;
  inset: -4px;
  border: 2px solid var(--bs-blue);
  border-radius: 999px;
}
.bfl-shot .bs-badge {
  display: block;
  padding: 1.5px;
  border-radius: 999px;
  background: #fff;
  line-height: 0;
}

/* ── 1 · composer, post, networks ─────────────────────────────────── */
.bfl-shot .bs-slot {
  border: 1.5px dashed #d4d4d8;
  border-radius: 14px;
  background: #fafafa;
  box-sizing: border-box;
  overflow: hidden;
}
.bfl-shot .bs-upmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bs-line);
}
.bfl-shot .bs-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 152px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--bs-ink);
  background: #fff;
  box-sizing: border-box;
  white-space: nowrap;
}
.bfl-shot .bs-veil {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 22px;
}
.bfl-shot .bs-post {
  border-radius: 16px;
  overflow: hidden;
  background: #111;
  transform-origin: 0 0;
  box-shadow: 0 22px 44px -18px rgba(16, 16, 20, 0.5);
  z-index: 30;
}
.bfl-shot .bs-post-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 42%);
}
.bfl-shot .bs-pill {
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: 16px;
  box-shadow: 0 10px 24px -14px rgba(16, 16, 20, 0.22);
}
.bfl-shot .bs-pill-ring {
  position: absolute;
  inset: 0;
  border: 2px solid;
  border-radius: 16px;
  z-index: 1;
  pointer-events: none;
}
.bfl-shot .bs-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px #fff;
  z-index: 20;
}
.bfl-shot .bs-toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--bs-line);
  box-shadow: 0 12px 28px -14px rgba(16, 16, 20, 0.3);
  white-space: nowrap;
  width: 176px;
  z-index: 31;
}
.bfl-shot .bs-lines {
  overflow: visible;
  pointer-events: none;
}

/* ── 2 · inbox ────────────────────────────────────────────────────── */
.bfl-shot .bs-row-hi {
  position: absolute;
  inset: 3px 8px;
  border-radius: 14px;
  background: rgba(64, 98, 255, 0.07);
  border: 1px solid rgba(64, 98, 255, 0.28);
}
.bfl-shot .bs-row-line {
  position: absolute;
  left: 74px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: #f1f1f3;
}
.bfl-shot .bs-bub {
  width: 34px;
  height: 34px;
  z-index: 40;
}
.bfl-shot .bs-bub > .bs-pic {
  box-shadow:
    0 0 0 2px #fff,
    0 8px 18px -6px rgba(16, 16, 20, 0.4);
}

/* ── 3 · the DM ───────────────────────────────────────────────────── */
.bfl-shot .bs-dm {
  border-radius: 20px;
  background: #efefef;
  overflow: hidden;
  color: #0c1014;
}
.bfl-shot .bs-dm-tx {
  padding: 10px 14px;
  font-size: 15px;
  line-height: 20px;
  white-space: normal;
}
.bfl-shot .bs-dm-btn {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #0095f6;
  font-size: 15px;
  font-weight: 600;
  border-top: 1px solid #dbdbdb;
  background: #efefef;
}
.bfl-shot .bs-ink-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--bs-ink);
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}
.bfl-shot .bs-flight {
  transform-origin: 0 0;
  z-index: 45;
}

/* ── 4 · the phone ────────────────────────────────────────────────── */
.bfl-shot .bs-phone-tilt {
  position: relative;
  width: 284.4px;
  height: 599.4px;
}
/* the phone mock holds at about 0.88 on screen, so its type is 15px+ */
.bfl-shot .bs-phone-tilt .bs-t13,
.bfl-shot .bs-phone-tilt .bs-t14 {
  font-size: 15px;
  line-height: 20px;
}
.bfl-shot .bs-sb span {
  font-size: 15px !important;
}
.bfl-shot .bs-ig-btn {
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 8px;
  background: #efefef;
}
.bfl-shot .bs-quote {
  display: flex;
  gap: 8px;
  max-width: 228px;
  color: #0c1014;
}
.bfl-shot .bs-quote-bar {
  width: 3px;
  border-radius: 2px;
  background: #dbdbdb;
  flex: none;
}
.bfl-shot .bs-ig-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 280px;
  height: 44px;
  padding: 0 4px;
  border-radius: 22px;
  border: 1px solid #dbdbdb;
  box-sizing: border-box;
}
.bfl-shot .bs-ig-cam {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #0095f6;
}
.bfl-shot .bs-page {
  background: #fff;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
}
.bfl-shot .bs-field {
  display: flex;
  align-items: center;
  padding-left: 11px;
  box-sizing: border-box;
  border-radius: 12px 0 0 12px;
  background: #fff;
  color: #0c1014;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 2;
}
.bfl-shot .bs-tap {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(12, 16, 20, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  z-index: 40;
}

/* ── 5, 6 · leads, the email, the numbers ─────────────────────────── */
.bfl-shot .bs-tile {
  width: 148px;
  height: 78px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fafafa;
  border: 1px solid #f0f0f2;
  box-sizing: border-box;
}
/* ── the Business pieces ──────────────────────────────────────────── */
.bfl-shot .bs-cx {
  left: 0;
  right: 0;
  text-align: center;
  white-space: nowrap;
}
.bfl-shot .bs-out-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bs-line);
  border-radius: 999px;
  background: #fff;
  color: var(--bs-ink);
  font-weight: 600;
  box-sizing: border-box;
  white-space: nowrap;
}
.bfl-shot .bs-ok-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
}
.bfl-shot .bs-ok-pill .bs-gcheck {
  box-shadow: none;
}
.bfl-shot .bs-sendc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--bs-ink);
}
.bfl-shot .bs-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--bs-line);
  box-sizing: border-box;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: #3f3f46;
  white-space: nowrap;
}
.bfl-shot .bs-filter b {
  font-weight: 700;
  color: var(--bs-ink);
}
.bfl-shot .bs-filter-on {
  background: var(--bs-ink);
  border-color: var(--bs-ink);
  color: #fff;
}
.bfl-shot .bs-stars {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 1px;
  color: #f5a400;
}
.bfl-shot .bs-rsheet {
  background: #fff;
  border-top: 1px solid var(--bs-line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -14px 30px -18px rgba(16, 16, 20, 0.3);
  z-index: 3;
}
.bfl-shot .bs-done-box {
  background: #f4fbf7;
  border-color: rgba(16, 179, 84, 0.3);
}
.bfl-shot .bs-rslot {
  border-radius: 12px;
  background: #f4f4f5;
}
.bfl-shot .bs-rthumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.bfl-shot .bs-token {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: #f4f4f5;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.bfl-shot .bs-vsep {
  display: block;
  width: 1px;
  height: 14px;
  background: var(--bs-line);
}
.bfl-shot .bs-runs {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 8px;
  border: 1px solid var(--bs-line);
  border-radius: 999px;
  box-sizing: border-box;
}
.bfl-shot .bs-totem {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.6);
}
.bfl-shot .bs-pulse {
  border: 3px solid var(--bs-blue);
  border-radius: 18px;
  box-sizing: border-box;
}
.bfl-shot .bs-scan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 38px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  background: #ffd60a;
  color: #1c1c1e;
  white-space: nowrap;
  box-sizing: border-box;
}
.bfl-shot .bs-scan-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #1c1c1e;
}
.bfl-shot .bs-shutter {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 4px solid #fff;
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.85);
  box-sizing: border-box;
}
.bfl-shot .bs-mail {
  background: #fafafa;
  border: 1px solid var(--bs-line);
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
}
.bfl-shot .bs-mtile {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #f0f0f2;
  box-sizing: border-box;
}
.bfl-shot .bs-key {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* ── groups ───────────────────────────────────────────────────────── */
.bfl-shot .bs-g {
  position: absolute;
  left: 0;
  top: 0;
}
/* ── the narration band ───────────────────────────────────────────── */
.bfl-shot .bs-nar-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--bs-top) + 150px);
  background: linear-gradient(var(--bs-bg) calc(100% - 18px), transparent 100%);
  pointer-events: none;
  z-index: 5;
}
.bfl-shot .bs-nar {
  position: absolute;
  left: 16px;
  right: 16px;
  top: var(--bs-top);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  z-index: 6;
}
.bfl-shot .bs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  height: 22px;
  margin: 0 auto;
}
.bfl-shot .bs-brand img {
  display: block;
  flex: none;
  width: 23px;
  height: 22px;
  object-fit: contain;
}
.bfl-shot .bs-brand-still {
  max-width: none;
  margin: 0 0 14px;
}
.bfl-shot .bs-brand-name {
  flex: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--bs-words);
  white-space: nowrap;
}
.bfl-shot .bs-rail {
  display: flex;
  flex: 1;
  gap: 4px;
  height: 3px;
}
.bfl-shot .bs-rail > span {
  flex: 1;
  border-radius: 2px;
  background: var(--bs-track);
  overflow: hidden;
}
.bfl-shot .bs-rail i {
  display: block;
  height: 100%;
  background: var(--bs-words);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.bfl-shot .bs-nar-slot {
  position: relative;
  height: 96px;
  margin-top: 10px;
}
.bfl-shot .bs-nar-g {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.bfl-shot .bs-nar-k {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--bs-words-mut);
}
.bfl-shot .bs-nar-k b {
  color: var(--bs-words);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bfl-shot .bs-nar-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px;
  border-radius: 999px;
  background: #c4c4cc;
  vertical-align: 3px;
}
.bfl-shot .bs-nar-line {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bs-words);
  text-wrap: balance;
}
.bfl-shot .bs-nar-tag {
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--bs-words-mut);
}
.bfl-shot .bs-nar-short {
  display: none;
}

/* the last station: its tag and the call to action share one row */
.bfl-shot .bs-nar-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}
.bfl-shot .bs-nar-end .bs-nar-tag {
  margin-top: 0;
}
.bfl-shot .bs-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px 0 20px;
  border-radius: 999px;
  background: #0b0b0f;
  color: #fff;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(11, 11, 15, 0.16);
}
.bfl-shot .bs-cta:hover {
  background: #26262c;
}
/* the page's .bz2 a:hover would turn the words ink on the ink pill */
.bfl-shot a.bs-cta:hover,
.bfl-shot a.bs-cta:focus-visible {
  color: #fff;
}
.bfl-shot .bs-cta:focus-visible {
  outline: 2px solid #0b0b0f;
  outline-offset: 3px;
}

.bfl-shot .bs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── reduced motion: the storyboard ───────────────────────────────── */
.bfl-shot .bs-stills {
  max-width: 1180px;
  margin: 0 auto;
  padding: 128px 16px 96px;
}
.bfl-shot .bs-stills-h {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bs-words);
  text-wrap: balance;
}
.bfl-shot .bs-stills-sub {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--bs-words-mut);
}
.bfl-shot .bs-stills ol {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 56px;
}
.bfl-shot .bs-fig {
  margin: 0;
}
.bfl-shot .bs-fig figcaption {
  max-width: 680px;
}
.bfl-shot .bs-fig .bs-nar-line {
  font-size: 19px;
  line-height: 26px;
}
.bfl-shot .bs-still {
  position: relative;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--bs-line);
  background: #fff;
}
/* a station's second card, on phones only (desktop frames hold both) */
@media (min-width: 768px) {
  .bfl-shot .bs-still-phone {
    display: none;
  }
}
.bfl-shot .bs-stills-end {
  margin-top: 40px;
}
.bfl-shot .bs-still-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* phones frame the pill column at about 0.81, so its words go up */
@media (max-width: 767px) {
  .bfl-shot .bs-pill-tx {
    font-size: 16px;
    line-height: 20px;
  }
  .bfl-shot .bs-pill-off {
    display: none;
  }
  .bfl-shot .bs-post-av {
    display: none;
  }
  .bfl-shot .bs-post-tag .bs-t13 {
    font-size: 16px;
    line-height: 20px;
  }
  .bfl-shot .bs-toast {
    width: 188px;
    margin-left: 16px;
  }
  /* the press sits right on phones: the bottom left 76px of the screen
     belongs to the sound button */
  .bfl-shot .bs-c-btn {
    left: 136px;
    width: 192px;
  }
  .bfl-shot .bs-m-btn {
    left: 56px;
    width: 232px;
  }
  /* the last line drops to one row, so the call to action fits the
     band under it */
  .bfl-shot .bs-nar-long {
    display: none;
  }
  .bfl-shot .bs-nar-short {
    display: inline;
  }
}

@media (min-width: 768px) {
  .bfl-shot {
    --bs-top: 104px;
  }
  .bfl-shot .bs-nar-slot {
    height: 104px;
  }
  .bfl-shot .bs-nar-line {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.02em;
  }
  .bfl-shot .bs-stills-h {
    font-size: 44px;
    line-height: 50px;
  }
  .bfl-shot .bs-fig .bs-nar-line {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ── dark theme: the page words flip, the product cards stay light ── */
.bz2[data-theme="dark"] .bfl-shot {
  --bs-bg: var(--bg, #19191b);
  --bs-dots: #26262b;
  --bs-words: #f2f2f0;
  --bs-words-mut: #a3a39e;
  --bs-track: #2a2a30;
}
.bz2[data-theme="dark"] .bfl-shot .bs-card,
.bz2[data-theme="dark"] .bfl-shot .bs-pill,
.bz2[data-theme="dark"] .bfl-shot .bs-toast {
  border-color: transparent;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
/* X and Threads wires are near black ink: lift them on the dark ground */
.bz2[data-theme="dark"] .bfl-shot path.bs-ink {
  stroke: #d4d4d8;
}
/* the blue wires and the faint return wires read navy on near black:
   lift them to a lighter blue and a stronger line */
.bz2[data-theme="dark"] .bfl-shot path.bs-wire {
  stroke: #7fb0ff;
  stroke-opacity: 0.9;
}
.bz2[data-theme="dark"] .bfl-shot path.bs-back {
  stroke-opacity: 0.85;
}
.bz2[data-theme="dark"] .bfl-shot .bs-still {
  border-color: rgba(255, 255, 255, 0.1);
  background: #121214;
}
.bz2[data-theme="dark"] .bfl-shot .bs-cta {
  background: #fff;
  color: #0a0a0a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.bz2[data-theme="dark"] .bfl-shot .bs-cta:hover {
  background: #e7e7e4;
}
.bz2[data-theme="dark"] .bfl-shot a.bs-cta:hover,
.bz2[data-theme="dark"] .bfl-shot a.bs-cta:focus-visible {
  color: #0a0a0a;
}
.bz2[data-theme="dark"] .bfl-shot .bs-cta:focus-visible {
  outline-color: #fff;
}

/* on a phone the stats card's first date sits in the bottom left corner,
   where the sound button lives; the period line above already says it */
@media (max-width: 767px) {
  .bfl-shot .bs-film .bs-axis0 {
    visibility: hidden;
  }
}

/* the flow's cast: whose workspace the inbox is, and a labelled send */
.bfl-shot .bs-ws {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 4px;
  border: 1px solid var(--bs-line, #e4e4e7);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.bfl-shot .bs-sendp {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bs-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* The seven job cards of the Business checklist
   (JobWindows.tsx), in the old photo frame (Kedem 2026-10-25): a dark
   card over the brand's own place, blurred; Link's chip top left; the
   job's Linkme screen on a white panel flush on the bottom edge.
   Everything is scoped under .jw. The card is a size container, so the
   panel lays itself out for the room it gets (phones from 440px down).
   Primary text never drops under 13px, secondary under 12px. */

.jw {
  --ink: #111;
  --mute: #6b6963;
  --line: rgba(0, 0, 0, 0.08);
  --soft: #f6f4f0;
  --live: #0b6e4f;
  --dot: #16a34a;
  --bright: 0.82;
  container: jw / size;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: #1b1b1d;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 24px 48px -24px rgba(10, 10, 10, 0.28),
    0 64px 96px -48px rgba(10, 10, 10, 0.16);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.jw.is-desk {
  border-radius: 24px;
}

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

.jw img {
  display: block;
  max-width: none;
}

.jw b {
  font-weight: 600;
}

.jw small {
  font-size: 12px;
}

/* ── the frame ──────────────────────────────────────────────────────── */

/* the ground: the brand's own place, soft under the product */
.jw .jw-gw {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: brightness(var(--bright)) saturate(1.05);
}

.jw .jw-ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
}

/* Link's chip: the face at rest, three dots while Link works */
.jw .jw-face {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.jw .jw-face i {
  display: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0a0a0a;
  opacity: 0.28;
}

.jw .jw-face[data-typing] {
  padding: 0 10px 0 4px;
}

.jw .jw-face[data-typing] i {
  display: block;
  animation: jw-face 1.2s ease-in-out infinite;
}

.jw .jw-face i:nth-of-type(2) {
  animation-delay: 0.2s;
}

.jw .jw-face i:nth-of-type(3) {
  animation-delay: 0.4s;
}

/* the product: a white panel flush on the bottom edge, lit by a hairline */
.jw .jw-panel {
  position: absolute;
  top: 60px;
  right: 36px;
  bottom: 0;
  left: 36px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

.jw .jw-mhr {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.jw .jw-brand {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.jw .jw-mht {
  flex: 1;
  min-width: 0;
}

.jw .jw-mh {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.jw .jw-ms {
  margin-top: 2px;
  color: var(--mute);
  font-size: 12.5px;
}

.jw .jw-scene {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

/* ── shared parts ───────────────────────────────────────────────────── */

.jw .jw-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f2f0ec;
  color: var(--mute);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.jw .jw-pill.is-busy {
  color: #3a3935;
}

.jw .jw-pill.is-busy::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jw-spin 0.8s linear infinite;
}

.jw .jw-pill.is-live {
  background: rgba(11, 110, 79, 0.09);
  color: var(--live);
}

.jw .jw-pill.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}

.jw .jw-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: jw-blink 0.9s steps(1) infinite;
}

.jw .jw-btn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform 0.16s ease,
    background-color 0.3s ease;
}

.jw .jw-btn > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jw .jw-btn.is-wide {
  width: 100%;
  height: 38px;
}

.jw .jw-btn.is-press {
  transform: scale(0.96);
  background: #333;
}

.jw .jw-btn.is-done {
  background: var(--live);
}

.jw .jw-btn-fill {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  transform: scaleX(0);
  transform-origin: left center;
}

.jw .jw-btn.is-sending .jw-btn-fill {
  transform: scaleX(1);
  transition: transform 1.2s linear;
}

.jw .jw-btn.is-done .jw-btn-fill {
  opacity: 0;
}

.jw .jw-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #77756f;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.jw .jw-chip.on {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.jw .jw-chip.is-quiet.on {
  height: 24px;
  border-color: transparent;
  background: #f2f0ec;
  color: #3a3935;
  font-size: 12px;
}

.jw .jw-track {
  display: block;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #eceae6;
}

.jw .jw-track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--dot);
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.jw .jw-tiles {
  display: grid;
  gap: 8px;
}

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

.jw .jw-tiles.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jw .jw-tiles > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.jw .jw-tiles small {
  overflow: hidden;
  color: var(--mute);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jw .jw-tiles b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* the toast lands on the panel, under its title */
.jw .jw-toast {
  position: absolute;
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 48px);
  padding: 9px 14px 9px 9px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.jw .jw-toast.at-top {
  top: 120px;
}

.jw .jw-toast.at-bottom {
  bottom: 30px;
}

.jw .jw-toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.jw .jw-toast-ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dot);
}

.jw .jw-toast-tx {
  display: grid;
  min-width: 0;
}

.jw .jw-toast-tx b {
  font-size: 13px;
}

.jw .jw-toast-tx small {
  color: rgba(255, 255, 255, 0.72);
}

/* ── 0 Post to All ──────────────────────────────────────────────────── */

.jw .jw-comp {
  display: flex;
  flex: none;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.jw .jw-comp-media {
  flex: none;
  width: 66px;
  height: 104px;
  border-radius: 10px;
  object-fit: cover;
}

.jw .jw-comp-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.jw .jw-comp-cap {
  min-height: 3.9em;
  font-size: 13px;
  line-height: 1.3;
}

.jw .jw-comp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.jw .jw-comp-meta {
  padding: 3px 8px;
  border-radius: 6px;
  background: #f2f0ec;
  color: var(--mute);
  font-size: 12px;
  font-weight: 600;
}

.jw .jw-list {
  display: grid;
  gap: 5px;
}

.jw .jw-prow {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 8px 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.jw .jw-prow > b {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.jw .jw-prow.is-live {
  background: rgba(11, 110, 79, 0.035);
}

.jw .jw-meter {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  color: var(--mute);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 1 Social inbox ─────────────────────────────────────────────────── */

.jw .jw-ilist {
  display: grid;
  gap: 6px;
}

.jw .jw-irow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 10px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.jw .jw-irow.is-in {
  opacity: 1;
  transform: none;
}

.jw .jw-irow.hot {
  border-color: var(--ink);
  background: #fbfaf8;
}

/* answered: the row closes on "You: ..." with a Replied pill */
.jw .jw-irow.is-done {
  border-color: rgba(11, 110, 79, 0.18);
  background: #f5faf8;
}

/* the open message reads in full while it is being answered */
.jw .jw-irow.hot .jw-irow-pv {
  color: var(--ink);
  white-space: normal;
}

.jw .jw-irow-pv em {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

/* the sent reply drops into the row as a dark bubble, then folds away */
.jw .jw-irow-th {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.3, 0.7, 0.4, 1);
}

.jw .jw-irow.is-sent:not(.is-done) .jw-irow-th {
  grid-template-rows: 1fr;
}

.jw .jw-irow-th > span {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
}

.jw .jw-bub {
  max-width: 82%;
  margin: 7px 0 1px;
  padding: 7px 11px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: 100% 100%;
  transition:
    opacity 0.22s ease,
    transform 0.32s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.jw .jw-irow.is-sent .jw-bub {
  opacity: 1;
  transform: none;
}

.jw .jw-av {
  position: relative;
  width: 36px;
  height: 36px;
}

.jw .jw-av img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-av-net {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
}

.jw .jw-irow-tx {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.jw .jw-irow-tx b {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
}

/* a narrow row keeps the whole name and shortens the platform */
.jw .jw-irow-tx b small {
  min-width: 0;
  overflow: hidden;
  color: var(--mute);
  font-weight: 500;
  text-overflow: ellipsis;
}

.jw .jw-irow-tx > span {
  overflow: hidden;
  color: var(--mute);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jw .jw-irow-end small {
  color: var(--mute);
  white-space: nowrap;
}

.jw .jw-reply {
  display: flex;
  flex: none;
  margin-top: auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 7px 7px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  transition: border-color 0.25s ease;
}

.jw .jw-reply.is-typing {
  border-color: var(--ink);
}

.jw .jw-reply-tx {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.jw .jw-reply-tx small {
  display: block;
  color: var(--mute);
}

.jw .jw-ph-tx {
  color: #9a978f;
}

.jw .jw-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: transform 0.16s ease;
}

.jw .jw-send.is-press {
  transform: scale(0.88);
}

/* ── 2 DM automations ───────────────────────────────────────────────── */

.jw .jw-alist {
  display: grid;
  gap: 6px;
}

.jw .jw-arow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 50px 44px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition:
    opacity 0.35s ease,
    border-color 0.25s ease;
}

.jw .jw-arow.hot {
  border-color: var(--ink);
}

.jw .jw-alist.is-dim .jw-arow:not(.hot) {
  opacity: 0.4;
}

.jw .jw-arow-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f2f0ec;
}

.jw .jw-arow-tx {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.jw .jw-arow-tx b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.25;
}

.jw .jw-arow-tx > span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--mute);
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jw .jw-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}

.jw .jw-stat {
  display: grid;
  justify-items: end;
}

.jw .jw-stat b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.jw .jw-stat small {
  color: var(--mute);
}

/* the Instagram phone: the post, then the DM (a two-pane track) */
.jw .jw-ig {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.jw .jw-ig.is-dm {
  transform: translateX(-50%);
}

.jw .jw-ig-pane {
  display: flex;
  flex-direction: column;
  width: 50%;
  min-width: 0;
}

.jw .jw-ig-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 8px;
}

.jw .jw-ig-head img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-ig-head b {
  font-size: 12px;
}

.jw .jw-ig-post {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.jw .jw-ig-cap {
  padding: 8px 10px 4px;
  font-size: 12px;
  line-height: 1.35;
}

.jw .jw-ig-cmt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 6px 0;
  padding: 6px;
  border-radius: 10px;
  background: #f6f4f0;
  font-size: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.jw .jw-ig-cmt.is-in {
  opacity: 1;
  transform: none;
}

.jw .jw-ig-cmt img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.jw .jw-bin,
.jw .jw-bout {
  max-width: 88%;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.35;
  animation: jw-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-bin {
  border-radius: 16px 16px 16px 5px;
  background: #efedea;
}

.jw .jw-bout {
  align-self: flex-end;
  border-radius: 16px 16px 5px 16px;
  background: var(--ink);
  color: #fff;
}

.jw .jw-typing {
  display: flex;
  gap: 3px;
  padding: 10px 12px;
}

.jw .jw-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8f8c86;
  animation: jw-dots 1s ease-in-out infinite;
}

.jw .jw-typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.jw .jw-typing i:nth-child(3) {
  animation-delay: 0.3s;
}

.jw .jw-lc {
  display: grid;
  width: 88%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  animation: jw-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-lc img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.jw .jw-lc b {
  padding: 6px 10px 0;
  font-size: 12px;
}

.jw .jw-lc small {
  padding: 0 10px 8px;
  color: var(--mute);
}

/* ── 3 Capture leads: tap, fill, the line into Leads ───────────────── */

/* the visitor's Linkme page (the real Pure Green page). One element;
   the scene moves and scales it: alone, behind the popup, then aside. */
.jw .jw-ld-pg {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 50px -18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform-origin: 0 0;
  transition:
    opacity 0.45s ease,
    transform 0.75s cubic-bezier(0.65, 0, 0.25, 1);
}

.jw .jw-ld-pg.on {
  opacity: 1;
}

.jw .jw-ld-pg img {
  width: 100%;
  height: 100%;
}

/* the page's own Connect bar, ringed in green */
.jw .jw-ld-ring {
  position: absolute;
  border-radius: 999px;
  box-shadow:
    0 0 0 2.5px var(--dot),
    0 0 0 7px rgba(22, 163, 74, 0.22);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jw .jw-ld-ring.on {
  opacity: 1;
}

.jw .jw-ld-dim {
  position: absolute;
  inset: -40px;
  z-index: 3;
  background: rgba(10, 10, 10, 0.4);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.jw .jw-ld-dim.on {
  opacity: 1;
}

/* the real Share your info popup */
.jw .jw-ld-pop {
  position: absolute;
  z-index: 4;
  color: #18181b;
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transform-origin: 50% 100%;
  transition:
    opacity 0.3s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.jw .jw-ld-pop.on {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}

.jw .jw-ld-pav {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto -38px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 3px #fff,
    0 6px 16px -6px rgba(0, 0, 0, 0.35);
}

.jw .jw-ld-pav img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.jw .jw-ld-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 44px 22px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}

.jw .jw-ld-px {
  position: absolute;
  right: 16px;
  top: 14px;
  color: #52525b;
  font-size: 12px;
}

.jw .jw-ld-pt {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  text-wrap: balance;
}

.jw .jw-ld-pf {
  display: flex;
  align-items: center;
  height: 36px;
  margin-top: 9px;
  padding: 0 14px;
  border-radius: 12px;
  background: #f2f2f5;
  color: #8e8e93;
  font-size: 14px;
  white-space: nowrap;
  transition: box-shadow 0.2s ease;
}

.jw .jw-ld-pf.is-v {
  color: #18181b;
}

.jw .jw-ld-pf.on {
  box-shadow: inset 0 0 0 1.5px #18181b;
}

.jw .jw-ld-pf.is-notes {
  align-items: flex-start;
  height: 46px;
  padding-top: 11px;
}

.jw .jw-ld-pb {
  display: grid;
  place-items: center;
  height: 40px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(
    227.1deg,
    #ec008c 3.4%,
    #fc8b67 69.33%,
    #ffd46d 97.87%
  );
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: transform 0.16s ease;
}

.jw .jw-ld-pb.is-press {
  transform: scale(0.96);
}

.jw .jw-ld-pl {
  margin-top: 10px;
  color: #8e8e93;
  font-size: 9.5px;
  line-height: 12px;
  text-align: center;
}

/* Sam's cursor and name tag */
.jw .jw-ld-cur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
  pointer-events: none;
}

.jw .jw-ld-cur.on {
  opacity: 1;
}

.jw .jw-ld-cur svg {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.jw .jw-ld-cur path {
  fill: #fff;
  stroke: #111;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.jw .jw-ld-cn {
  position: absolute;
  left: 14px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px 0 3px;
  border-radius: 13px;
  background: #18181b;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.4);
}

.jw .jw-ld-cn img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-ld-rip {
  position: absolute;
  left: -13px;
  top: -13px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
  opacity: 0;
}

.jw .jw-ld-rip.on {
  animation: jw-ld-rip 0.6s ease-out 0.35s both;
}

@keyframes jw-ld-rip {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* the green line from the Connect bar into Leads, drawn as the page
   settles aside; Sam's face rides it */
.jw .jw-ld-line {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.jw .jw-ld-line path {
  fill: none;
  stroke: var(--dot);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.25s ease;
}

.jw .jw-ld-line.on path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.55s;
}

.jw .jw-ld-tok {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    0 0 0 2.5px #fff,
    0 0 0 5px var(--dot),
    0 10px 20px -6px rgba(0, 0, 0, 0.45);
  offset-anchor: 50% 50%;
  offset-distance: 0%;
  offset-rotate: 0deg;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    offset-distance 0.25s ease;
}

.jw .jw-ld-tok.on {
  opacity: 1;
  transition:
    opacity 0.25s ease 0.5s,
    offset-distance 0.9s cubic-bezier(0.45, 0, 0.25, 1) 0.55s;
}

.jw .jw-ld-tok.is-go {
  offset-distance: 100%;
}

.jw .jw-ld-tok img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jw .jw-ld-dot {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--dot);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.2s ease,
    transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.jw .jw-ld-dot.on,
.jw .jw-ld-badge.on {
  opacity: 1;
  transform: none;
}

.jw .jw-ld-badge {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px 0 6px;
  border-radius: 999px;
  background: #fff;
  color: #18181b;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition:
    opacity 0.25s ease 0.2s,
    transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) 0.2s;
}

.jw .jw-ld-badge i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--dot);
  color: #fff;
}

/* the business's Leads screen, up from below once Sam taps CONNECT */
.jw .jw-ld-panel {
  z-index: 5;
  padding: 16px 16px 6px;
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.4s ease 0.15s,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}

.jw .jw-ld-panel.on {
  opacity: 1;
  transform: none;
}

.jw .jw-ld-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 28px;
}

.jw .jw-ld-hd b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.jw .jw-ld-hd .jw-pill {
  margin-left: auto;
  animation: jw-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-ld-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #ececef;
}

.jw .jw-ld-logo img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.jw .jw-ld-tot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  margin: 14px 0 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f2;
}

.jw .jw-ld-tot small {
  color: #71717a;
  font-size: 12.5px;
}

.jw .jw-ld-tot b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.jw .jw-ld-plus {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--dot);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  animation: jw-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-ld-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 -8px;
  padding: 9px 8px;
  border-radius: 12px;
}

.jw .jw-ld-row img {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-ld-row > span {
  display: grid;
  flex: 1;
  min-width: 0;
}

.jw .jw-ld-row b {
  font-size: 13.5px;
  line-height: 17px;
}

.jw .jw-ld-row small {
  overflow: hidden;
  color: #71717a;
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jw .jw-ld-row .jw-ld-when {
  flex: none;
  padding-top: 1px;
  color: #a1a1aa;
  font-size: 11.5px;
}

/* the open slot on top of the list, then Sam in it */
.jw .jw-ld-new {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s;
}

.jw .jw-ld-new > div {
  min-height: 0;
  overflow: hidden;
}

.jw .jw-ld-new.is-open {
  grid-template-rows: 1fr;
}

.jw .jw-ld-nin {
  position: relative;
  height: 72px;
}

.jw .jw-ld-slot {
  position: absolute;
  inset: 4px 0 8px;
  border-radius: 12px;
  background: #f3fbf6;
  box-shadow: inset 0 0 0 1.5px rgba(22, 163, 74, 0.55);
  transition: opacity 0.3s ease;
}

.jw .jw-ld-slot.is-off {
  opacity: 0;
}

.jw .jw-ld-row.is-new {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: #effaf4;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.jw .jw-ld-row.is-new.is-in {
  opacity: 1;
  transform: none;
}

.jw .jw-ld-row.is-new .jw-ld-when {
  color: #15803d;
  font-weight: 600;
}

/* ── 4 Email marketing ──────────────────────────────────────────────── */

.jw .jw-swap {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.jw .jw-old {
  position: relative;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f2f0ec;
  color: #3a3935;
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.jw .jw-old::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  height: 1.5px;
  background: #d93d42;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.jw .jw-old.is-x {
  color: #a3a09a;
}

.jw .jw-old.is-x::after {
  transform: scaleX(1);
}

.jw .jw-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 650;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.jw .jw-new.on {
  opacity: 1;
  transform: none;
}

.jw .jw-new img {
  width: 20px;
  height: 20px;
}

.jw .jw-form {
  display: grid;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.jw .jw-frow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 12px;
}

.jw .jw-frow + .jw-frow {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.jw .jw-frow small {
  color: var(--mute);
}

.jw .jw-frow > span {
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jw .jw-frow em {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f2f0ec;
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jw .jw-frow em.on {
  opacity: 1;
}

.jw .jw-stack {
  display: grid;
  flex: 1;
  align-items: start;
  min-height: 0;
}

.jw .jw-stack > * {
  grid-area: 1 / 1;
}

.jw .jw-mail {
  display: grid;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.5, 0, 0.75, 0);
}

.jw .jw-mail.is-gone {
  opacity: 0;
  transform: translateY(-28px) scale(0.92);
}

.jw .jw-mail-from {
  display: flex;
  align-items: center;
  gap: 7px;
}

.jw .jw-mail-from img {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-mail-from b {
  font-size: 12.5px;
}

.jw .jw-mail-img {
  width: 100%;
  height: 112px;
  margin: 8px 0;
  border-radius: 10px;
  background: #f4f7ee;
  object-fit: contain;
}

.jw .jw-mail-h {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.jw .jw-mail-p {
  margin-top: 2px;
  color: var(--mute);
  font-size: 12.5px;
}

.jw .jw-mail-cta {
  justify-self: start;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.jw .jw-res {
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease 0.1s,
    transform 0.45s ease 0.1s;
}

.jw .jw-res.on {
  opacity: 1;
  transform: none;
}

/* ── 5 Run your ads ─────────────────────────────────────────────────── */

.jw .jw-thumbs {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.jw .jw-thumbs > span {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 0.25s ease;
}

.jw .jw-thumbs > span.on {
  box-shadow: 0 0 0 2px var(--ink);
}

.jw .jw-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jw .jw-thumbs i {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.jw .jw-thumbs > span.on i {
  opacity: 1;
  transform: none;
}

.jw .jw-adrow {
  display: grid;
  flex: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
}

.jw .jw-adlab {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.jw .jw-adlab > small {
  color: var(--mute);
}

.jw .jw-adnets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.jw .jw-adnets > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  opacity: 0;
  filter: grayscale(1);
  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    box-shadow 0.25s ease;
}

.jw .jw-adnets.is-in > span {
  opacity: 0.45;
}

.jw .jw-adnets.is-in > span.on {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px var(--ink);
}

.jw .jw-keys {
  display: grid;
  flex: none;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s ease,
    transform 0.45s ease;
}

.jw .jw-keys.on {
  opacity: 1;
  transform: none;
}

.jw .jw-keys-h {
  font-size: 12.5px;
}

/* ── 6 Analytics ────────────────────────────────────────────────────── */

.jw .jw-card {
  display: grid;
  flex: none;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.jw .jw-card-h {
  font-size: 12.5px;
}

.jw .jw-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: 92px;
}

.jw .jw-bars > span {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
}

.jw .jw-bars em {
  position: relative;
  display: block;
}

.jw .jw-bars i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 5px 5px 2px 2px;
  background: #d9d6d0;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-bars > span:nth-child(6) i {
  background: var(--ink);
}

.jw .jw-bars.is-in i {
  transform: none;
}

.jw .jw-bars small {
  color: var(--mute);
  line-height: 1;
  text-align: center;
}

.jw .jw-fols {
  display: grid;
  gap: 6px;
}

.jw .jw-fols > span {
  display: grid;
  grid-template-columns: 18px 74px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
}

.jw .jw-fols b {
  font-size: 12.5px;
  font-weight: 500;
}

.jw .jw-fols small {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.jw .jw-fols .jw-track i {
  background: var(--ink);
}

/* the widths are inline styles, so the closed state needs !important */
.jw .jw-fols:not(.is-in) .jw-track i {
  transform: scaleX(0) !important;
}

.jw .jw-links > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.jw .jw-links > span:nth-of-type(2) {
  transition-delay: 0.08s;
}

.jw .jw-links > span:nth-of-type(3) {
  transition-delay: 0.16s;
}

.jw .jw-links.is-in > span {
  opacity: 1;
  transform: none;
}

.jw .jw-links b {
  font-size: 12.5px;
}

.jw .jw-links small {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

/* ── room: tall windows give the inbox rows more air ───────────────── */

@container jw (min-height: 680px) {
  .jw .jw-ilist {
    gap: 8px;
  }

  .jw .jw-irow {
    padding: 11px 12px;
  }
}

/* ── room: shorter windows tighten up ──────────────────────────────── */

@container jw (max-height: 640px) {
  .jw .jw-panel {
    top: 52px;
    gap: 10px;
    padding: 14px;
  }

  .jw .jw-scene {
    gap: 8px;
  }

  .jw .jw-prow {
    height: 32px;
  }

  .jw .jw-comp-media {
    height: 92px;
  }

  .jw .jw-irow {
    padding: 5px 10px;
  }

  .jw .jw-arow {
    padding: 7px 10px;
  }

  .jw .jw-mail-img {
    height: 84px;
  }

  .jw .jw-bars {
    height: 72px;
  }

  .jw .jw-tiles > span {
    padding: 7px 10px;
  }

  .jw .jw-tiles b {
    font-size: 16px;
  }
}

@container jw (max-height: 560px) {
  .jw .jw-arow-tx > span {
    -webkit-line-clamp: 1;
  }

  .jw .jw-links > span:nth-of-type(3) {
    display: none;
  }
}

/* ── room: narrower cards pull the panel in ───────────────────────── */

@container jw (max-width: 520px) {
  .jw .jw-panel {
    right: 24px;
    left: 24px;
  }
}

/* ── phones: a wider panel, the phone sits in the middle ────────────── */

@container jw (max-width: 440px) {
  .jw .jw-panel {
    top: 52px;
    right: 12px;
    left: 12px;
    gap: 10px;
    padding: 12px;
    border-radius: 16px 16px 0 0;
  }

  .jw .jw-brand {
    width: 28px;
    height: 28px;
  }

  .jw .jw-mh {
    font-size: 16px;
  }

  .jw .jw-ms {
    font-size: 12px;
  }

  .jw .jw-prow {
    height: 31px;
  }

  .jw .jw-arow {
    grid-template-columns: 26px minmax(0, 1fr) 50px 40px;
    gap: 8px;
  }

  .jw .jw-arow-ic {
    width: 26px;
    height: 26px;
  }

  .jw .jw-arow-tx > span {
    display: none;
  }

  .jw .jw-adrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .jw .jw-toast {
    max-width: calc(100% - 32px);
  }

  .jw .jw-toast.at-top {
    top: 104px;
  }
}

/* ── 4 and 5: Linkme screens floating over the place ────────────────── */

/* a design-size stage (560 wide on desktop, 350 on phones) scaled to
   the card, so the films keep one layout at every width */
.jw .jw-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.jw .jw-stage-in {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

.jw .jw-stage-in.is-mid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.jw[data-k="3"] .jw-ground,
.jw[data-k="4"] .jw-ground,
.jw[data-k="5"] .jw-ground,
.jw[data-k="6"] .jw-ground {
  filter: blur(16px);
}

.jw .jw-float {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  color: var(--ink);
}

/* 4 Email: write it, send it, it lands, a tap, the results */

.jw .jw-em-new {
  left: 24px;
  top: 56px;
  width: 512px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jw .jw-em-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.jw .jw-em-hd b {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.jw .jw-em-hd span {
  font-size: 20px;
  line-height: 1;
  color: #a1a1aa;
}

.jw .jw-em-lbl {
  margin-top: 2px;
  color: #71717a;
  font-weight: 500;
}

.jw .jw-em-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #c7d0ff;
  border-radius: 12px;
  background: #f6f7ff;
}

.jw .jw-em-opt > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.jw .jw-em-opt > span b {
  font-weight: 500;
}

.jw .jw-em-opt small {
  color: var(--mute);
}

.jw .jw-em-radio {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid #0a0a0a;
  border-radius: 50%;
}

.jw .jw-em-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a0a0a;
}

.jw .jw-em-field {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.jw .jw-em-field.on {
  border-color: #7c8cff;
  box-shadow: 0 0 0 3px rgba(64, 98, 255, 0.12);
}

.jw .jw-em-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.jw .jw-em-foot small {
  color: var(--mute);
}

.jw .jw-em-btns {
  display: flex;
  gap: 8px;
}

.jw .jw-em-b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.jw .jw-em-b.is-o {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px #d4d4d8;
}

.jw .jw-em-b.is-press {
  transform: scale(0.95);
  box-shadow: 0 0 0 5px rgba(10, 10, 10, 0.12);
}

.jw .jw-em-arc {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.jw .jw-em-arc.on {
  opacity: 1;
}

.jw .jw-em-arc path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.jw .jw-em-env {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 8px 18px -4px rgba(0, 0, 0, 0.5);
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  animation: jw-em-fly 0.9s cubic-bezier(0.45, 0, 0.25, 1) both;
}

.jw .jw-em-phw {
  position: absolute;
  left: 28px;
  top: 352px;
  z-index: 2;
  opacity: 0;
  transform: translateY(110%);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s;
}

.jw .jw-em-phw.on {
  opacity: 1;
  transform: none;
}

.jw .jw-em-ph {
  width: 232px;
  height: 480px;
  padding: 7px;
  border-radius: 36px;
  background: #0a0a0a;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.jw .jw-em-scr {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 12px;
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
}

/* the email shows on the phone the moment it lands */
.jw .jw-em-scr > :not(.jw-em-st) {
  opacity: 0;
  transition: opacity 0.35s;
}

.jw .jw-em-phw.is-got .jw-em-scr > * {
  opacity: 1;
}

.jw .jw-em-st {
  padding-left: 6px;
  font-size: 12px;
  font-weight: 600;
}

.jw .jw-em-bk {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  color: #2563eb;
  font-size: 12px;
}

.jw .jw-em-snd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.jw .jw-em-snd img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px #e4e4e7;
}

.jw .jw-em-snd span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.jw .jw-em-snd small {
  color: var(--mute);
}

.jw .jw-em-sub {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.25;
}

.jw .jw-em-hero {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 10px;
  border-radius: 10px;
  object-fit: cover;
}

.jw .jw-em-cta {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  height: 34px;
  margin-top: 10px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.jw .jw-em-tap {
  position: absolute;
  left: 82%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.jw .jw-em-tap.on {
  animation: jw-em-tap 0.9s ease-out 2;
}

.jw .jw-em-ft {
  margin-top: auto;
  padding-top: 10px;
  color: var(--mute);
  text-align: center;
}

.jw .jw-em-res,
.jw .jw-em-bar {
  z-index: 3;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.4s,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-em-res.on,
.jw .jw-em-bar.on {
  opacity: 1;
  transform: none;
}

.jw .jw-em-res {
  right: 24px;
  bottom: 24px;
  width: 256px;
  padding: 14px;
}

.jw .jw-em-rh {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jw .jw-em-rh b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jw .jw-em-sent {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
}

.jw .jw-em-rs {
  display: block;
  margin-top: 2px;
  color: var(--mute);
}

.jw .jw-em-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.jw .jw-em-tiles > span {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
}

.jw .jw-em-tiles > span.is-up {
  border-color: #86efac;
  background: #f0fdf4;
}

.jw .jw-em-tiles small {
  color: var(--mute);
}

.jw .jw-em-tiles b {
  margin: 2px 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.jw .jw-em-bar {
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  white-space: nowrap;
}

.jw .jw-em-bar > small {
  margin-left: auto;
  color: var(--mute);
}

.jw.is-photo .jw-em-new {
  left: 14px;
  top: 48px;
  width: 322px;
  padding: 14px;
}

.jw.is-photo .jw-em-hd b {
  font-size: 15px;
}

.jw.is-photo .jw-em-opt {
  padding: 8px 10px;
}

.jw.is-photo .jw-em-field {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

.jw.is-photo .jw-em-b {
  height: 30px;
  padding: 0 14px;
}

.jw.is-photo .jw-em-phw {
  left: 22px;
  top: 262px;
}

.jw.is-photo .jw-em-ph {
  width: 200px;
  height: 420px;
  padding: 6px;
  border-radius: 32px;
}

.jw.is-photo .jw-em-scr {
  padding: 12px 10px;
  border-radius: 27px;
}

.jw.is-photo .jw-em-bk {
  display: none;
}

.jw.is-photo .jw-em-snd img {
  width: 24px;
  height: 24px;
}

.jw.is-photo .jw-em-sub {
  font-size: 13px;
}

/* 5 Ads: every account round the mall, then into the Ads screen */

.jw .jw-ad-lines {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.jw .jw-ad-lines.on {
  opacity: 1;
}

.jw .jw-ad-lines line {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.5;
}

.jw .jw-ad-dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  animation: jw-ad-flow 1.6s linear infinite;
}

.jw .jw-ad-hub {
  z-index: 2;
  padding: 14px 16px;
  opacity: 0;
  translate: -50% -50%;
  transform: scale(0.92);
  transition:
    opacity 0.4s,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-ad-hub.on {
  opacity: 1;
  transform: none;
}

.jw .jw-ad-hub.is-gone {
  opacity: 0;
  transform: scale(0.9);
}

.jw .jw-ad-hh,
.jw .jw-ad-ph {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jw .jw-ad-hh {
  margin-bottom: 8px;
}

.jw .jw-ad-hh img,
.jw .jw-ad-ph img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px #e4e4e7;
}

.jw .jw-ad-l {
  display: block;
  color: #71717a;
  font-weight: 500;
}

.jw .jw-ad-big {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.jw .jw-ad-two {
  display: flex;
  gap: 14px;
  margin: 8px 0 10px;
}

.jw .jw-ad-two span {
  display: flex;
  flex-direction: column;
}

.jw .jw-ad-two small,
.jw .jw-ad-keys small {
  color: #71717a;
}

.jw .jw-ad-two b {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.jw .jw-ad-hub .is-up {
  color: #15803d;
}

.jw .jw-ad-share {
  display: flex;
  gap: 3px;
  height: 8px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-ad-share.on {
  transform: none;
}

.jw .jw-ad-share i {
  border-radius: 3px;
}

.jw .jw-ad-node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s;
}

.jw .jw-ad-node.on {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.jw .jw-ad-node.is-fly {
  opacity: 0;
  transition:
    transform 0.65s cubic-bezier(0.6, 0, 0.2, 1),
    opacity 0.25s;
}

.jw .jw-ad-node span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.jw .jw-ad-node small {
  color: var(--mute);
}

.jw .jw-ad-node span b {
  font-size: 14px;
}

.jw .jw-ad-panel {
  position: relative;
  z-index: 2;
  width: 440px;
  padding: 16px;
  opacity: 0;
  transform: scale(0.54);
  transition:
    opacity 0.5s,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-ad-panel.on {
  opacity: 1;
  transform: none;
}

.jw .jw-ad-ph img {
  width: 22px;
  height: 22px;
}

.jw .jw-ad-ph b {
  font-size: 14px;
}

.jw .jw-ad-ph small {
  margin-left: auto;
  color: var(--mute);
}

.jw .jw-ad-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.jw .jw-ad-keys span {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
}

.jw .jw-ad-keys b {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.jw .jw-ad-by {
  display: block;
  margin: 14px 0 8px;
  font-size: 13.5px;
}

.jw .jw-ad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.jw .jw-ad-nt {
  position: relative;
  border-radius: 12px;
}

.jw .jw-ad-slot {
  position: absolute;
  inset: 0;
  border: 1.5px dashed #c4c4ca;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  transition: opacity 0.2s;
}

.jw .jw-ad-nt.on .jw-ad-slot {
  opacity: 0;
}

.jw .jw-ad-ntc {
  position: relative;
  padding: 8px 10px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
  opacity: 0;
  transition: opacity 0.25s;
}

.jw .jw-ad-nt.on .jw-ad-ntc {
  opacity: 1;
}

.jw .jw-ad-nth {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.jw .jw-ad-c {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.jw .jw-ad-ntc > b {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.jw .jw-ad-ntc > small,
.jw .jw-ad-ft {
  display: block;
  color: var(--mute);
}

.jw .jw-ad-ft {
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.4s;
}

.jw .jw-ad-ft.on {
  opacity: 1;
}

.jw.is-photo .jw-ad-node {
  gap: 6px;
  padding: 5px 9px 5px 5px;
}

.jw.is-photo .jw-ad-node span b {
  font-size: 13px;
}

.jw.is-photo .jw-ad-hub {
  padding: 12px;
}

.jw.is-photo .jw-ad-big {
  font-size: 24px;
}

.jw.is-photo .jw-ad-two {
  gap: 10px;
}

.jw.is-photo .jw-ad-two b {
  font-size: 15px;
}

.jw.is-photo .jw-ad-panel {
  width: 318px;
  padding: 12px;
}

.jw.is-photo .jw-ad-keys {
  gap: 6px;
  margin-top: 10px;
}

.jw.is-photo .jw-ad-keys span {
  justify-content: space-between;
  padding: 8px;
}

.jw.is-photo .jw-ad-keys b {
  font-size: 17px;
}

.jw.is-photo .jw-ad-by {
  margin: 12px 0 6px;
}

.jw.is-photo .jw-ad-grid {
  gap: 6px;
}

.jw.is-photo .jw-ad-ntc {
  padding: 7px 9px;
}

.jw.is-photo .jw-ad-ntc > b {
  font-size: 15px;
}

/* 6 Analytics: one fan on Hard Rock's page moves every number */

.jw .jw-an-win {
  left: 272px;
  top: 40px;
  z-index: 2;
  width: 264px;
  padding: 16px;
}

.jw .jw-an-win.is-sm {
  left: 14px;
  top: 50px;
  width: 322px;
  padding: 12px 14px;
}

.jw .jw-an-sec + .jw-an-sec {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f2;
}

.jw .jw-an-win.is-sm .jw-an-sec + .jw-an-sec {
  margin-top: 10px;
  padding-top: 10px;
}

.jw .jw-an-h {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.jw .jw-an-l {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}

.jw .jw-an-map {
  position: relative;
  margin-top: 8px;
  border-radius: 12px;
  background: #f7f8fa;
}

.jw .jw-an-win.is-sm .jw-an-map {
  margin-top: 6px;
}

.jw .jw-an-map img {
  display: block;
  width: 100%;
  border-radius: inherit;
  opacity: 0.9;
}

.jw .jw-an-pin {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s,
    background-color 0.3s,
    box-shadow 0.3s;
}

.jw .jw-an-pin.on {
  width: 12px;
  height: 12px;
  background: #0ea5a4;
  box-shadow:
    0 0 0 5px rgba(14, 165, 164, 0.22),
    0 0 0 11px rgba(14, 165, 164, 0.1);
}

.jw .jw-an-pin.on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #0ea5a4;
  border-radius: 50%;
  opacity: 0;
  animation: jw-an-ping 1.2s ease-out 3;
}

.jw .jw-an-tip {
  position: absolute;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 8px;
  background: #0a0a0a;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-14%, calc(-100% - 6px));
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-an-tip.on {
  opacity: 1;
  transform: translate(-14%, calc(-100% - 12px));
}

.jw .jw-an-tip b {
  font-weight: 600;
}

.jw .jw-an-tot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jw .jw-an-tot > b {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.jw .jw-an-win.is-sm .jw-an-tot > b {
  font-size: 22px;
}

.jw .jw-an-plus {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  animation: jw-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.jw .jw-an-fols {
  margin-top: 4px;
}

.jw .jw-an-fols span,
.jw .jw-an-fgrid span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -6px;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background-color 0.4s;
}

.jw .jw-an-fols span.is-hi,
.jw .jw-an-fgrid span.is-hi {
  background: #f0fdf4;
}

.jw .jw-an-fols img,
.jw .jw-an-fgrid img {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.jw .jw-an-fols b,
.jw .jw-an-fgrid b {
  font-size: 13px;
  font-weight: 600;
}

.jw .jw-an-fols b {
  flex: none;
  width: 66px;
}

.jw .jw-an-fols em {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #f0f0f2;
}

.jw .jw-an-fols em i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #0a0a0a;
}

.jw .jw-an-fols small,
.jw .jw-an-fgrid small {
  font-size: 12px;
  color: var(--mute);
}

.jw .jw-an-fols small {
  width: 42px;
  text-align: right;
}

.jw .jw-an-fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  margin-top: 4px;
}

.jw .jw-an-fgrid span {
  gap: 6px;
  padding: 3px 6px;
}

.jw .jw-an-fgrid img {
  width: 16px;
  height: 16px;
}

.jw .jw-an-fgrid small {
  margin-left: auto;
}

.jw .jw-an-lh {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jw .jw-an-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
}

.jw .jw-an-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.jw .jw-an-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.jw .jw-an-tiles > span {
  padding: 10px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 14px;
}

.jw .jw-an-tiles > span > small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}

.jw .jw-an-tiles b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.jw .jw-an-tiles b small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--mute);
}

.jw .jw-an-win.is-sm .jw-an-tiles {
  margin-top: 8px;
}

.jw .jw-an-win.is-sm .jw-an-tiles > span {
  padding: 7px 9px;
}

.jw .jw-an-win.is-sm .jw-an-tiles b {
  font-size: 17px;
}

.jw .jw-an-tick {
  display: inline-block;
  animation: jw-an-tick 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.jw .jw-an-arcs {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.jw .jw-an-arcs path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 7;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  opacity: 0;
  transition: opacity 0.6s;
}

.jw .jw-an-arcs path.on {
  opacity: 1;
  transition-duration: 0.3s;
}

.jw .jw-an-phw {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transform: translateY(40px);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s;
}

.jw .jw-an-phw.on {
  opacity: 1;
  transform: none;
}

.jw .jw-an-ph {
  width: 232px;
  height: 480px;
  padding: 7px;
  border-radius: 36px;
  background: #0a0a0a;
  transform-origin: 0 0;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.jw .jw-an-scr {
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
  background: #000;
}

.jw .jw-an-scr img {
  display: block;
  width: 100%;
  transition: transform 0.8s cubic-bezier(0.45, 0, 0.25, 1);
}

.jw .jw-an-tap {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
}

.jw .jw-an-tap.on {
  animation: jw-em-tap 0.8s ease-out 2;
}

.jw .jw-an-who {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(8px);
  transition:
    opacity 0.35s,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jw .jw-an-who.on {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.jw .jw-an-who img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.jw .jw-an-who span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.jw .jw-an-who b {
  font-size: 13px;
  font-weight: 600;
}

.jw .jw-an-who small {
  font-size: 12px;
  color: var(--mute);
  animation: jw-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.jw .jw-an-tok {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #fff,
    0 8px 18px -4px rgba(0, 0, 0, 0.5);
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  animation: jw-em-fly 0.9s cubic-bezier(0.45, 0, 0.25, 1) both;
}

.jw .jw-an-tok img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jw .jw-an-tok.is-plus {
  width: auto;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  animation-delay: 0.25s;
}

@keyframes jw-an-ping {
  0% {
    opacity: 0.9;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes jw-an-tick {
  from {
    opacity: 0;
    transform: translateY(40%);
  }
}

/* ── dark page: a dimmer ground, the product stays light ────────────── */

.bz2[data-theme="dark"] .jw {
  --bright: 0.72;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

/* a 1px inner ring, so the card has an edge, not a glare */
.bz2[data-theme="dark"] .jw::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 72px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.bz2[data-theme="dark"] .jw .jw-panel {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

.bz2[data-theme="dark"] .jw .jw-float,
.bz2[data-theme="dark"] .jw .jw-ad-node,
.bz2[data-theme="dark"] .jw .jw-an-who {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

.bz2[data-theme="dark"] .jw .jw-em-ph,
.bz2[data-theme="dark"] .jw .jw-an-ph {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ── rewind: the card slides back to its start, with no pops, pings or
   fliers on the way ─────────────────────────────────────────────────── */

.jw.is-rew *,
.jw.is-rew *::before,
.jw.is-rew *::after {
  animation: none !important;
}
.jw.is-rew .jw-em-env,
.jw.is-rew .jw-ad-dot,
.jw.is-rew .jw-ld-pop,
.jw.is-rew .jw-ld-dim,
.jw.is-rew .jw-ld-cur,
.jw.is-rew .jw-ld-tok,
.jw.is-rew .jw-an-tok,
.jw.is-rew .jw-caret {
  opacity: 0 !important;
}

/* ── still: the payoff with no motion ──────────────────────────────── */

.jw.is-still *,
.jw.is-still *::before,
.jw.is-still *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .jw *,
  .jw *::before,
  .jw *::after {
    transition: none !important;
    animation: none !important;
  }
}

@keyframes jw-em-fly {
  0% {
    offset-distance: 0%;
    opacity: 0;
    transform: scale(0.6);
  }
  15% {
    opacity: 1;
    transform: none;
  }
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
    transform: scale(0.7);
  }
}

@keyframes jw-em-tap {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes jw-ad-flow {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes jw-face {
  0%,
  100% {
    opacity: 0.28;
  }
  40% {
    opacity: 0.8;
  }
}

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

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

@keyframes jw-dots {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes jw-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
}

/* ── job 3: the homepage DM film (jobs/dms) in the photo frame ───────
   Not under .jw: the film brings its own type and boxes. The world is
   370 x 820 and fills the box's width; a box wider than that shape
   (Kedem 2026-10-29: "make it more zoomed") shows the world bigger and
   its camera pans to the action (Mobile.tsx, applyMob's CAM). */
.jw-dm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: #1b1b1d;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.06),
    0 24px 48px -24px rgba(10, 10, 10, 0.28),
    0 64px 96px -48px rgba(10, 10, 10, 0.16);
}
.jw-dm.is-desk {
  border-radius: 24px;
}
.jw-dm .jw-dm-gw {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: brightness(0.82) saturate(1.05);
}
.jw-dm .jw-dm-gw img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(4px);
}
.jw-dm .jw-dm-box {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 24px 48px -16px rgba(0, 0, 0, 0.45);
}

/* The Business story after Rise, as a journey (Kedem 2026-10-25:
   "make the site flow like the journey cash app has", then "Build C, the
   frame changes shape"). Every rule sits under .bfl-story. Desktop: a
   white sheet rises over Rise with the heading; then a tall track scrolls
   natively under a sticky stage on a warm wash: the job's number and
   headline left, one frame in the middle, its line and Book a demo right,
   a 7 step rail and the note below (FlowStory.tsx writes the track height
   and the rail fill). The frame's dark shape morphs to the job's shape
   (wide, phone, tall) and the job's approved film fades in on top.
   Phones: the jobs stacked, each over its film, with the rail and Book a
   demo stuck to the bottom. Reduced motion on desktop: each job beside its
   finished film. After the jobs: three customer quote cards and one Book
   a demo. The film's own cards (biz/shot) render inside .bfl-shot
   screens. The one
   rule outside .bfl-story is the Rise headline rule at the end. */

.bfl-story {
  /* the sheet over Rise is white (Kedem 2026-10-22); dark theme keeps
     a lifted ink */
  --fs-sheet: #ffffff;
  --fs-sheet-edge:
    0 0 0 1px rgba(10, 10, 10, 0.05), 0 -24px 64px -28px rgba(10, 10, 10, 0.18);
  --fs-sheet-ink: #0a0a0a;
  --fs-sheet-mute: rgba(10, 10, 10, 0.5);
  --fs-sheet-soft: rgba(10, 10, 10, 0.4);
  --fs-sheet-line: rgba(10, 10, 10, 0.68);
  --fs-sheet-rule: rgba(10, 10, 10, 0.2);
  --fs-edge-light:
    0 0 0 1px rgba(10, 10, 10, 0.06), 0 24px 48px -24px rgba(10, 10, 10, 0.28),
    0 64px 96px -48px rgba(10, 10, 10, 0.16);
  --fs-edge-dark:
    0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  --fs-cl-edge:
    0 -1px 0 rgba(10, 10, 10, 0.06), 0 -20px 48px -24px rgba(10, 10, 10, 0.16);
  --fs-todo: #949490;
  --fs-tick-track: rgba(10, 10, 10, 0.16);
  --fs-floor: #faf8f5;
  --fs-ribbon: #ede7de;
  --fs-mute3: #a1a19c;
  --fs-bright: 0.82;
  --fs-brand-bg: #ffffff;
  --fs-brand-edge:
    0 0 0 1px rgba(10, 10, 10, 0.06), 0 10px 28px -14px rgba(10, 10, 10, 0.2);
  --fs-brand-rule: rgba(10, 10, 10, 0.1);
  --fs-logo-ring: rgba(10, 10, 10, 0.08);
  /* the journey (still C) */
  --fs-say: #3a3a40;
  --fs-c-mute: #6e6e76;
  --fs-c-mid: #b9b9c0;
  --fs-c-line: rgba(10, 10, 10, 0.1);
  --fs-dot: #10b354;
  /* the soft glow in the Linkme pink and peach (Kedem 2026-11-04) */
  --fs-wash: radial-gradient(
    120% 60% at 50% 105%,
    #ffe8f2 0%,
    #fff5f0 38%,
    #ffffff 70%
  );
  /* the same wash upside down, so the tiles carry it on without a seam */
  --fs-wash-up: radial-gradient(
    120% 60% at 50% -5%,
    #ffe8f2 0%,
    #fff5f0 38%,
    #ffffff 70%
  );
  --side: 20px;
  position: relative;
  z-index: 2;
  margin-top: -80px;
  color: var(--ink);
}
.bz2[data-theme="dark"] .bfl-story {
  --fs-sheet: #28282b;
  --fs-sheet-edge:
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --fs-sheet-ink: #f2f2f0;
  --fs-sheet-mute: rgba(242, 242, 240, 0.56);
  --fs-sheet-soft: rgba(242, 242, 240, 0.46);
  --fs-sheet-line: rgba(242, 242, 240, 0.72);
  --fs-sheet-rule: rgba(242, 242, 240, 0.32);
  --fs-edge-light:
    0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  --fs-cl-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --fs-todo: #6e6e6a;
  --fs-tick-track: rgba(255, 255, 255, 0.2);
  --fs-floor: #121110;
  --fs-ribbon: rgba(255, 255, 255, 0.05);
  --fs-mute3: #5c5c58;
  --fs-bright: 0.72;
  --fs-brand-bg: rgba(255, 255, 255, 0.05);
  --fs-brand-edge: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --fs-brand-rule: rgba(255, 255, 255, 0.14);
  --fs-logo-ring: rgba(255, 255, 255, 0.12);
  --fs-say: rgba(242, 242, 240, 0.78);
  --fs-c-mute: rgba(242, 242, 240, 0.56);
  --fs-c-mid: rgba(242, 242, 240, 0.3);
  --fs-c-line: rgba(255, 255, 255, 0.14);
  --fs-wash:
    radial-gradient(
      120% 60% at 50% 105%,
      rgba(236, 0, 140, 0.08),
      transparent 70%
    ),
    #28282b;
  --fs-wash-up:
    radial-gradient(
      120% 60% at 50% -5%,
      rgba(236, 0, 140, 0.08),
      transparent 70%
    ),
    #28282b;
}
.bfl-story[data-mode="stack"],
.bfl-story[data-mode="rest-phone"] {
  margin-top: -40px;
}
.bfl-story .fs-wait {
  height: 100vh;
}
.bfl-story .fs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 992px) {
  .bfl-story {
    --side: clamp(40px, 8.9vw, 128px);
  }
}

/* ── the heading and the jobs ─────────────────────────────────────── */
.bfl-story .fs-head {
  margin: 0;
  font-weight: 600;
  font-size: clamp(32px, 2.95vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--fs-sheet-ink);
  text-wrap: pretty;
}
.bfl-story .fs-ha,
.bfl-story .fs-hb {
  display: block;
}
.bfl-story .fs-hb {
  color: var(--mute3-text);
}
/* "● 01 of 07 Post to All" */
.bfl-story .fs-kick {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--fs-c-mute);
}
.bfl-story .fs-kick i {
  flex: none;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--fs-dot);
}
.bfl-story .fs-kick b {
  font-weight: 700;
  color: var(--fs-sheet-ink);
}
.bfl-story .fs-kick span + span {
  margin-left: 3px;
}

/* ── desktop: the sheet, the track, the sticky stage ──────────────── */
.bfl-story .fs-cl {
  position: relative;
  padding-top: 80px;
  border-radius: 80px 80px 0 0;
  background: var(--fs-sheet);
  box-shadow: var(--fs-cl-edge);
}
.bfl-story .fs-cj {
  /* the frame: as wide as the screen's height allows, 4:5 at its widest */
  --fw: min(calc((100vh - 230px) * 0.8), 512px, 36vw);
  --fh: calc(var(--fw) * 1.25);
}
.bfl-story .fs-cj-intro {
  padding: 16px var(--side) 48px;
  text-align: center;
}
.bfl-story .fs-cj-track {
  position: relative;
}
.bfl-story .fs-cj-stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fw) minmax(0, 1fr);
  /* the frame and its rail sit together in the middle of the screen,
     so no empty band opens between them on tall screens */
  grid-template-rows: auto auto auto;
  align-content: safe center;
  column-gap: clamp(32px, 3.4vw, 56px);
  height: 100vh;
  /* the top clears the floating nav, so the block reads as centred */
  padding: 108px var(--side) 28px;
  background: var(--fs-wash);
}

/* left: the job's number and headline, one per job, crossfading */
.bfl-story .fs-cj-left {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  height: var(--fh);
  min-width: 0;
}
.bfl-story .fs-cj-ch {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    visibility 0s 0.25s;
}
.bfl-story .fs-cj-ch.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.45s 0.15s,
    transform 0.6s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s;
}
.bfl-story .fs-cj-h {
  margin: 22px 0 0;
  font-size: clamp(44px, 4.7vw, 68px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--fs-sheet-ink);
  text-wrap: balance;
}

/* middle: the frame. The dark shape morphs its width to the job's
   shape; each job's film sits in its own slot of that shape and fades in
   once the shape is nearly there */
.bfl-story .fs-cj-frame {
  --sw: var(--fw);
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: var(--fw);
  height: var(--fh);
}
.bfl-story .fs-cj-frame[data-shape="phone"],
.bfl-story .fs-cj-slot[data-shape="phone"] {
  --sw: calc(var(--fh) * 9 / 16);
}
.bfl-story .fs-cj-frame[data-shape="tall"],
.bfl-story .fs-cj-slot[data-shape="tall"] {
  --sw: calc(var(--fh) * 0.64);
}
.bfl-story .fs-cj-shape,
.bfl-story .fs-cj-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--sw);
  border-radius: 24px;
  transform: translateX(-50%);
}
.bfl-story .fs-cj-shape {
  background: #1b1b1d;
  box-shadow: var(--fs-edge-light);
  transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.bfl-story .fs-cj-slot {
  --sw: var(--fw);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0s 0.25s;
}
.bfl-story .fs-cj-slot.is-on {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s 0.3s,
    visibility 0s;
}
/* the job's card fills its slot; the shape carries the shadow */
.bfl-story .fs-cj-slot > .jw,
.bfl-story .fs-cj-slot > .jw-film {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  box-shadow: none;
}
.bfl-story .fs-cj-slot .fs-pc {
  border-radius: 24px;
  box-shadow: none;
}

/* right: the job's line and Book a demo, low beside the frame */
.bfl-story .fs-cj-right {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: var(--fh);
  min-width: 0;
  padding-bottom: calc(var(--fh) * 0.12);
}
.bfl-story .fs-cj-says {
  display: grid;
  align-items: end;
  width: 100%;
  max-width: 380px;
}
.bfl-story .fs-cj-say {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  color: var(--fs-say);
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s,
    transform 0.25s,
    visibility 0s 0.25s;
}
.bfl-story .fs-cj-say.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.45s 0.25s,
    transform 0.6s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s;
}
.bfl-story .btn.fs-cj-cta {
  height: 50px;
  margin-top: 26px;
  padding: 0 26px;
  font-size: 16px;
}

/* every job works two ways (Kedem 2026-10-26, still G): a switch under
   the headline, "Do it yourself" or "Let Link do it", Link lit. One
   choice runs every job; the job's line follows it */
.bfl-story .fs-sw {
  --sw-bg: #f4f4f5;
  --sw-edge: rgba(24, 24, 27, 0.08);
  --sw-off: #71717a;
  --sw-on: #18181b;
  --sw-on-ink: #ffffff;
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  margin: 30px 0 0;
  padding: 4px;
  border: 1px solid var(--sw-edge);
  border-radius: 999px;
  background: var(--sw-bg);
}
.bz2[data-theme="dark"] .bfl-story .fs-sw {
  --sw-bg: rgba(255, 255, 255, 0.06);
  --sw-edge: rgba(255, 255, 255, 0.1);
  --sw-off: rgba(242, 242, 240, 0.62);
  --sw-on: #f2f2f0;
  --sw-on-ink: #0a0a0a;
}
.bfl-story .fs-sw button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: var(--sw-off);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
.bfl-story .fs-sw button.fs-sw-link {
  padding-left: 7px;
}
.bfl-story .fs-sw button:hover:not(.is-on) {
  color: var(--sw-on);
}
.bfl-story .fs-sw button.is-on {
  background: var(--sw-on);
  color: var(--sw-on-ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: default;
}
.bfl-story .fs-sw button:focus-visible {
  outline: 2px solid var(--sw-on);
  outline-offset: 2px;
}
.bfl-story .fs-sw-face {
  flex: none;
}
.bfl-story .fs-sw-short {
  display: none;
}
/* desktop: the full switch is 291px. A narrower left column lets it
   reach into the gap before the film (32px or more), then takes 14px
   type, then the short words, "You" and "Link" */
.bfl-story .fs-cj-left {
  container: fs-left / inline-size;
}
.bfl-story .fs-cj-left .fs-sw {
  max-width: none;
}
@container fs-left (max-width: 278px) {
  .bfl-story .fs-sw button {
    padding: 0 12px;
    font-size: 14px;
  }
  .bfl-story .fs-sw button.fs-sw-link {
    padding-left: 7px;
  }
}
@container fs-left (max-width: 239px) {
  .bfl-story .fs-sw {
    margin-top: 24px;
  }
  .bfl-story .fs-sw button {
    padding: 0 18px;
    font-size: 15px;
  }
  .bfl-story .fs-sw button.fs-sw-link {
    padding-left: 7px;
  }
  .bfl-story .fs-sw-long {
    display: none;
  }
  .bfl-story .fs-sw-short {
    display: inline;
  }
}
/* the job's two lines share one spot; the chosen one shows */
.bfl-story .fs-ways {
  display: grid;
}
.bfl-story .fs-ways > p {
  grid-area: 1 / 1;
}

/* under the frame: the 7 step rail, then the note and the hint */
.bfl-story .fs-cj-rail {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0 10px;
  width: min(760px, 100%);
  margin-top: 32px;
}
.bfl-story .fs-cj-seg {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 12px 0 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  color: var(--fs-c-mute);
  cursor: pointer;
}
.bfl-story .fs-cj-seg i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  background: var(--fs-c-line);
}
.bfl-story .fs-cj-seg i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fs-sheet-ink);
  transform: scaleX(var(--f, 0));
  transform-origin: 0 50%;
}
.bfl-story .fs-cj-seg.is-done i::after {
  background: var(--fs-c-mid);
}
.bfl-story .fs-cj-seg span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bfl-story .fs-cj-seg.is-on {
  font-weight: 600;
  color: var(--fs-sheet-ink);
}
.bfl-story .fs-cj-seg:hover {
  color: var(--fs-sheet-ink);
}
.bfl-story .fs-cj-seg:focus-visible {
  outline: 2px solid var(--fs-sheet-ink);
  outline-offset: 4px;
  border-radius: 2px;
}
.bfl-story .fs-cj-note,
.bfl-story .fs-cj-hint {
  grid-row: 3;
  align-self: end;
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--fs-c-mute);
}
.bfl-story .fs-cj-note {
  grid-column: 1 / 3;
  animation: fs-in 0.5s 0.2s both;
}
.bfl-story .fs-cj-hint {
  grid-column: 3;
  justify-self: end;
}
@keyframes fs-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* job 1 is the old film card (PostFilm.tsx): it fills its frame */
.bfl-story .jw-film {
  position: relative;
  width: 100%;
}
.bfl-story .jw-film > .fs-pc {
  height: 100%;
}
/* the sheet melts into the warm floor the Link chat stands on */
.bfl-story .fs-cl-tail {
  height: 48px;
  background: linear-gradient(var(--fs-sheet), var(--fs-floor));
}

/* dark: a 1px inner ring, so the bright card has an edge, not a glare */
.bz2[data-theme="dark"] .bfl-story .fs-pc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 72px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}
.bz2[data-theme="dark"] .bfl-story .fs-pc .fs-screen.bfl-shot .bs-card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

/* the ground: a place in the mall per chapter, soft under the product.
   It runs 32px past both sides so its pan never shows an edge */
.bfl-story .fs-gw {
  position: absolute;
  inset: 0 -32px;
  z-index: 0;
  will-change: transform;
  overflow: hidden;
  filter: brightness(var(--fs-bright)) saturate(1.05);
  transition: filter 0.7s;
}
.bfl-story .fs-ground {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
}

/* the sharp reel, carried in from the sheet to the composer's slot */
.bfl-story .fs-flip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform;
}
.bfl-story .fs-reel {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* held, the reel stands whole in the middle of the wide card over a
   soft copy of itself (Kedem 2026-10-22: the card is the New post
   video). The script sizes it; it grows to cover as it seats */
.bfl-story .fs-reel.is-held,
.bfl-story .fs-reel.is-still {
  inset: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.bfl-story .fs-reel.is-held {
  border-radius: 18px;
}
.bfl-story .fs-reel.is-still {
  width: auto;
  height: calc(100% - 56px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
}
.bfl-story .fs-reel-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) brightness(0.92) saturate(1.1);
  /* a blur fades out at its own edge: that edge sits outside the box */
  scale: 1.4;
  pointer-events: none;
}

/* Link's chip: the face at rest, three dots while Link works */
.bfl-story .fs-chip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.bfl-story .fs-chip i {
  display: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #0a0a0a;
  opacity: 0.28;
}
.bfl-story .fs-chip[data-typing] {
  padding: 0 10px 0 4px;
}
.bfl-story .fs-chip[data-typing] i {
  display: block;
  animation: fs-dot 1.2s ease-in-out infinite;
}
.bfl-story .fs-chip i:nth-of-type(2) {
  animation-delay: 0.2s;
}
.bfl-story .fs-chip i:nth-of-type(3) {
  animation-delay: 0.4s;
}
@keyframes fs-dot {
  0%,
  100% {
    opacity: 0.28;
  }
  40% {
    opacity: 0.8;
  }
}

/* ── the film inside a card ───────────────────────────────────────── */
.bfl-story .fs-pc .fs-screen.bfl-shot {
  --bs-bg: transparent;
  --bs-dots: transparent;
  --bs-words: #f2f2f0;
  --bs-words-mut: #a3a39e;
  --bs-track: #2a2a30;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}
/* no panel ends on a hard cut at the card's sides or top (panels sit
   flush on the bottom edge) */
.bfl-story .fs-pc .fs-screen.bfl-shot {
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 24px,
      #000 calc(100% - 24px),
      transparent
    ),
    linear-gradient(180deg, transparent, #000 24px);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 24px,
      #000 calc(100% - 24px),
      transparent
    ),
    linear-gradient(180deg, transparent, #000 24px);
  mask-composite: intersect;
}
.bfl-story .fs-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.bfl-story .fs-screen.bfl-shot .bs-grid {
  display: none;
}
.bfl-story .fs-screen.bfl-shot path.bs-ink {
  stroke: #d4d4d8;
}
.bfl-story .fs-screen.bfl-shot path.bs-wire {
  stroke: #7fb0ff;
  stroke-opacity: 0.9;
}
.bfl-story .fs-screen.bfl-shot path.bs-back {
  stroke-opacity: 0.85;
}
/* the card frames the hub and pills at about 0.81 (as the film's phone
   cut does), so the film's own phone rules apply here at every width */
.bfl-story .fs-screen.bfl-shot .bs-pill-tx {
  font-size: 16px;
  line-height: 20px;
}
.bfl-story .fs-screen.bfl-shot .bs-pill-off,
.bfl-story .fs-screen.bfl-shot .bs-post-av {
  display: none;
}
.bfl-story .fs-screen.bfl-shot .bs-post-tag .bs-t13 {
  font-size: 16px;
  line-height: 20px;
}
.bfl-story .fs-screen.bfl-shot .bs-toast {
  width: 188px;
  margin-left: 16px;
}
/* panels sit flush on the card's bottom edge, lit by a hairline */
.bfl-story .fs-pc .fs-screen.bfl-shot .bs-card {
  border-radius: 18px 18px 0 0 !important;
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.bfl-story .fs-screen.bfl-shot .bs-phone-tilt {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
}

/* a chapter's own card */
.bfl-story .fs-pc {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: #1b1b1d;
  box-shadow: var(--fs-edge-light);
}
.bfl-story .fs-pc .fs-chip {
  left: 12px;
  top: 12px;
}
.bfl-story .fs-pc.is-desk {
  border-radius: 24px;
}

/* ── phones: the jobs stacked, the rail stuck to the bottom ───────── */
.bfl-story .fs-mj {
  padding-top: 48px;
  border-radius: 40px 40px 0 0;
  background: var(--fs-sheet);
  box-shadow: var(--fs-cl-edge);
}
.bfl-story .fs-mj-intro {
  padding: 0 var(--side);
}
.bfl-story .fs-mj .fs-head {
  font-size: 30px;
  line-height: 32px;
}
.bfl-story .fs-mj-run {
  position: relative;
}
.bfl-story .fs-mj-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bfl-story .fs-mj-ch {
  display: flex;
  flex-direction: column;
  padding: 40px 16px 48px;
}
.bfl-story .fs-mj-h {
  margin: 14px 0 0;
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--fs-sheet-ink);
  text-wrap: balance;
}
.bfl-story .fs-mj-say {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--fs-say);
  text-wrap: pretty;
}
.bfl-story .fs-mj-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--fs-c-mute);
}
.bfl-story .fs-mj-says > p {
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.bfl-story .fs-mj-says > p:not(.is-on) {
  opacity: 0;
  visibility: hidden;
}
.bfl-story .fs-mj-says > p.is-on {
  transition: opacity 0.3s 0.1s;
}
/* phones: the switch spans the column, under the job's line */
.bfl-story .fs-mj-ch .fs-sw {
  display: flex;
  margin: 18px 0 0;
}
.bfl-story .fs-mj-ch .fs-sw button {
  flex: 1 1 0;
  padding: 0 10px;
}
.bfl-story .fs-mj-ch .fs-sw button.fs-sw-link {
  padding-left: 7px;
}
@media (max-width: 359px) {
  .bfl-story .fs-mj-ch .fs-sw button {
    gap: 6px;
    font-size: 14px;
  }
  .bfl-story .fs-mj-ch .fs-sw-face {
    width: 24px;
    height: 24px;
  }
}
.bfl-story .fs-mj-ch > .jw,
.bfl-story .fs-mj-ch > .jw-film {
  align-self: center;
  width: 100%;
  height: auto;
  max-width: 440px;
  margin-top: 20px;
  aspect-ratio: 9 / 16;
}
/* job 3's film is a 370 x 820 world: its card takes the full width and
   that shape, cut to stay clear of the bar (its camera pans the rest) */
.bfl-story .fs-mj-ch > .jw-dm {
  width: min(100%, 440px);
  max-width: none;
  height: min(calc(100svh - 168px), calc(min(100vw - 32px, 440px) * 820 / 370));
  aspect-ratio: auto;
}
.bfl-story .fs-mj-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--fs-c-line);
  background: var(--fs-sheet);
}
.bfl-story .fs-mj-segs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.bfl-story .fs-mj-segs i {
  height: 3px;
  border-radius: 2px;
  background: var(--fs-c-line);
  transition: background-color 0.3s;
}
.bfl-story .fs-mj-segs i.is-on {
  background: var(--fs-sheet-ink);
}
.bfl-story .btn.fs-mj-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin-top: 12px;
  font-size: 16px;
}

/* ── reduced motion on desktop: each job beside its finished film ─── */
.bfl-story .fs-cj.is-still .fs-cj-intro {
  padding-bottom: 24px;
}
.bfl-story .fs-rs {
  max-width: calc(1184px + 2 * var(--side));
  margin: 0 auto;
  padding: 0 var(--side);
  list-style: none;
}
.bfl-story .fs-rs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--fs-c-line);
}
.bfl-story .fs-rs-text {
  min-width: 0;
}
.bfl-story .fs-rs-text .fs-cj-h {
  font-size: clamp(40px, 4vw, 56px);
}
.bfl-story .fs-rs-text .fs-cj-says {
  max-width: 440px;
}
.bfl-story .fs-rs-text .fs-cj-say {
  max-width: 440px;
  margin-top: 20px;
}
.bfl-story .fs-rs-text .fs-sw {
  margin-top: 24px;
}
.bfl-story .fs-rs-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--fs-c-mute);
}
.bfl-story .fs-rs-film {
  --rh: min(560px, calc(100vh - 120px));
  width: calc(var(--rh) * 0.8);
  height: var(--rh);
}
.bfl-story .fs-rs-film[data-shape="phone"] {
  width: calc(var(--rh) * 9 / 16);
}
.bfl-story .fs-rs-film[data-shape="tall"] {
  width: calc(var(--rh) * 0.64);
}
.bfl-story .fs-rs-film > .jw,
.bfl-story .fs-rs-film > .jw-film {
  width: 100%;
  height: 100%;
}

/* ── after the jobs: the businesses in their own words (still B) ──── */
.bfl-story .fs-vo {
  padding: 120px var(--side) 24px;
  background: var(--fs-wash-up);
}
/* straight after the pinned jobs, whose screen already ends in space */
.bfl-story .fs-cj:not(.is-still) .fs-vo {
  padding-top: 24px;
}
.bfl-story .fs-mj .fs-vo {
  padding-top: 72px;
  background: none;
}
.bfl-story .fs-vo-top,
.bfl-story .fs-vo-row {
  max-width: 1184px;
  margin: 0 auto;
}
.bfl-story .fs-vo-top {
  text-align: center;
}
.bfl-story .fs-vo-h {
  margin: 0;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--fs-sheet-ink);
  text-wrap: balance;
}
.bfl-story .fs-vo-sub {
  max-width: 600px;
  margin: 20px auto 0;
  font-size: 18px;
  line-height: 27px;
  color: var(--fs-c-mute);
  text-wrap: balance;
}
/* desktop: the three cards in one row */
.bfl-story .fs-vo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
  padding: 0;
  list-style: none;
}
.bfl-story .fs-vo-row:focus-visible {
  outline: 2px solid var(--fs-sheet-ink);
  outline-offset: 4px;
  border-radius: 28px;
}
.bfl-story .fs-vo-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #10192b;
  color: #ffffff;
}
.bfl-story .fs-vo-card[data-tone="wine"] {
  background: #2b100e;
}
.bfl-story .fs-vo-card[data-tone="sand"] {
  background: #f2ebe1;
  color: #0a0a0a;
}
.bz2[data-theme="dark"] .bfl-story .fs-vo-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bfl-story .fs-vo-ph {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.bfl-story .fs-vo-ph > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* no usable venue photo: the group's own mark on its sand ground */
.bfl-story .fs-vo-ph.is-mark {
  display: grid;
  place-items: center;
  background: #e9dfd1;
}
.bfl-story .fs-vo-ph.is-mark > img {
  width: 46%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: translateY(-22px);
}
.bfl-story .fs-vo-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.bfl-story .fs-vo-chip img {
  display: block;
  width: auto;
  height: 22px;
  max-width: 110px;
  object-fit: contain;
}
.bfl-story .fs-vo-chip img.is-sq {
  height: 26px;
}
/* a bare mark with its name under it, set small in capitals like the
   names in the wordmarks beside it */
.bfl-story .fs-vo-chip .fs-vo-lk {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bfl-story .fs-vo-chip .fs-vo-lk img {
  height: 21px;
}
.bfl-story .fs-vo-chip .fs-vo-lk span {
  font-size: 7.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2a2a2a;
}
.bfl-story .fs-vo-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 26px 28px;
}
.bfl-story .fs-vo-body h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.bfl-story .fs-vo-body blockquote {
  margin: 16px 0 0;
}
.bfl-story .fs-vo-body blockquote p {
  margin: 0;
  font-size: 15.5px;
  line-height: 24px;
  opacity: 0.86;
  text-wrap: pretty;
}
.bfl-story .fs-vo-card[data-tone="sand"] blockquote p {
  opacity: 0.78;
}
.bfl-story .fs-vo-by {
  margin: auto 0 0;
  padding-top: 24px;
}
.bfl-story .fs-vo-by b {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.bfl-story .fs-vo-by span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 19px;
  opacity: 0.62;
}
.bfl-story .fs-vo-dots {
  display: none;
}
.bfl-story .fs-vo-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.bfl-story .btn.fs-vo-btn {
  height: 52px;
  padding: 0 28px;
  font-size: 16px;
}
/* phones and tablets: one row you swipe, the next card peeking, and
   dots for where you are */
@media (max-width: 991px) {
  .bfl-story .fs-vo-row {
    display: flex;
    gap: 12px;
    max-width: none;
    margin: 32px calc(var(--side) * -1) 0;
    padding: 0 var(--side);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--side);
    scrollbar-width: none;
  }
  .bfl-story .fs-vo-row::-webkit-scrollbar {
    display: none;
  }
  .bfl-story .fs-vo-card {
    flex: none;
    width: min(340px, 78vw);
    scroll-snap-align: start;
  }
  .bfl-story .fs-vo-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
  }
  .bfl-story .fs-vo-dots i {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--fs-c-mid);
    transition:
      width 0.3s ease,
      background-color 0.3s ease;
  }
  .bfl-story .fs-vo-dots i.is-on {
    width: 18px;
    background: var(--fs-sheet-ink);
  }
  .bfl-story .fs-vo-cta {
    margin-top: 28px;
  }
}
@media (max-width: 599px) {
  .bfl-story .fs-vo-sub {
    margin-top: 14px;
    font-size: 16px;
    line-height: 24px;
  }
  .bfl-story .fs-vo-chip {
    left: 14px;
    bottom: 14px;
    gap: 7px;
    height: 38px;
    padding: 0 11px;
  }
  .bfl-story .fs-vo-chip img {
    height: 18px;
    max-width: 88px;
  }
  .bfl-story .fs-vo-chip img.is-sq {
    height: 22px;
  }
  .bfl-story .fs-vo-chip .fs-vo-lk img {
    height: 19px;
  }
  .bfl-story .fs-vo-chip .fs-vo-lk span {
    font-size: 6.5px;
  }
  .bfl-story .fs-vo-body {
    padding: 22px 20px 24px;
  }
  .bfl-story .fs-vo-body h3 {
    font-size: 21px;
  }
  .bfl-story .fs-vo-body blockquote p {
    font-size: 15px;
    line-height: 23px;
  }
  .bfl-story .btn.fs-vo-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bfl-story .fs-gw,
  .bfl-story .fs-cj-ch,
  .bfl-story .fs-cj-shape,
  .bfl-story .fs-cj-slot,
  .bfl-story .fs-cj-say,
  .bfl-story .fs-mj-says > p,
  .bfl-story .fs-sw button,
  .bfl-story .fs-mj-segs i,
  .bfl-story .fs-vo-dots i {
    transition: none;
  }
  .bfl-story .fs-chip i,
  .bfl-story .fs-cj-note {
    animation: none;
  }
}

/* Rise's headline reads in full the moment it is on screen (Kedem
   2026-10-24: a newcomer could not follow the scroll). Before, each word
   waited for its own scroll step and the first screen of Rise was a
   blurred ghost. The network and its four cards still build as you
   scroll. */
.bfl-flow .rise-words .rise-w {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Try Link, the tap-through chat under the seven jobs. Kedem
   2026-10-25: it must be the hero's own dashboard, so the sidebar, top
   bar, messages and composer all come from public/business-v2.css via
   the .bzh-meet wrapper. This file only adds the section head, a fixed
   height (the thread scrolls inside, so an answer never moves the page)
   and Link's week cards. Every rule sits under .bfl-chat. */

.bfl-chat {
  --lc-floor: #faf8f5;
  --lc-ink: #0a0a0a;
  --lc-mute: #6b6963;
  position: relative;
  padding: 112px 24px 128px;
  background: var(--lc-floor);
  color: var(--lc-ink);
}
.bz2[data-theme="dark"] .bfl-chat {
  --lc-floor: #121110;
  --lc-ink: #f2f0ec;
  --lc-mute: #a19f99;
}

.bfl-chat .lc-inner {
  max-width: 1232px;
  margin: 0 auto;
}
.bfl-chat .lc-head {
  text-align: center;
}
.bfl-chat .lc-h {
  margin: 0;
  font-weight: 600;
  font-size: clamp(32px, 2.95vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--lc-ink);
}
.bfl-chat .lc-sub {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 26px;
  color: var(--lc-mute);
}

/* ── the dashboard: a fixed height, the thread scrolls inside ─────── */
.bfl-chat .lc-meet {
  margin-top: 40px;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .app {
  height: clamp(640px, calc(100svh - 120px), 780px);
  min-height: 0;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .main {
  min-height: 0;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .main .chatbody {
  flex: 1 1 auto;
  min-height: 0;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .bzh-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--bzh-ft),
    #000 calc(100% - var(--bzh-fb)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--bzh-ft),
    #000 calc(100% - var(--bzh-fb)),
    transparent 100%
  );
}
.bz2 .bfl-chat .bzh-meet.lc-meet .bzh-thread::-webkit-scrollbar {
  display: none;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .bzh-thread[data-more-top] {
  --bzh-ft: 22px;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .bzh-thread[data-more-bottom] {
  --bzh-fb: 30px;
}
/* room under the last row so the bottom fade never covers it */
.bz2 .bfl-chat .bzh-meet.lc-meet .bzh-tin {
  padding-bottom: 8px;
}
.bz2 .bfl-chat .bzh-meet.lc-meet .composer {
  flex: none;
}

/* ── Link's week: four jobs, each with a tick ─────────────────────── */
.bz2 .bfl-chat .bzh-meet .areply {
  container-type: inline-size;
}
.bfl-chat .lc-plan {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bfl-chat .lc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.bfl-chat .lc-ic {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--panel2);
  color: var(--ink);
}
.bfl-chat .lc-rt {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
@container (min-width: 560px) {
  .bfl-chat .lc-plan {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── phones: the hero hides the sidebar; the card fits one screen ─── */
@media (max-width: 980px) {
  .bz2 .bfl-chat .bzh-meet.lc-meet .app {
    height: min(680px, calc(100svh - 120px));
  }
}
@media (max-width: 640px) {
  .bfl-chat {
    padding: 80px 16px 96px;
  }
  .bfl-chat .lc-meet {
    margin-top: 28px;
  }
}