/* Buy buttons (#pricing) scroll smoothly to the pricing table */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================
   RocketToons Complete Bundle (Figma 851:128 "RocketToons Bundle v1", 1920 x 30872, dark)
   Component styles that Tailwind utilities can't express cleanly.
   Sizes in px follow the 1920px Figma frame; content is 1280 wide (x 320–1600).
   STATIC PAGE BY REQUEST: nothing in the feature sections moves. Only the countdown timers,
   the Commercial samples carousel and click-to-play videos move.
   The eight middle sections (inside … value stack) are merged in at the end (PARTS).
   ========================================== */

/* ============ PAGE THEME ============ */
:root {
  --page: #06070a;
  --ink: #141826;                /* text on gold */
  --dark-ink: #0b0d14;           /* text on the light panels */
  --gold-grad: linear-gradient(90deg, #ffe6a8 0%, #ffc94d 100%);
  --gold-chip: linear-gradient(170deg, #ffe6a8 0%, #ffc94d 71.429%);
}

/* ============ BASE ============ */
html { background: var(--page); }
body { background: var(--page); color: #fff; overflow-x: clip; }
img { -webkit-user-drag: none; }
.rt-play, .rt-play button { cursor: pointer; }
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}


/* ============ HERO (Figma "Hero — bundle" 851:129, 1920 x 1126) ============
   --s is one Figma pixel of the 1920 frame (resolved against the hero, which is the container).
   Desktop: copy block 430 tall (chip at 80, headline at 140, sub line at 393), then the shelf,
   696 tall (Figma y 430–1126). Phones: copy flows at fixed sizes, the shelf zooms in on the
   stage (Figma x 232–1692) so the boxes stay large enough to read. */
.hero {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: var(--page);
  --s: min(1px, 100cqw / 1920);
}
/* Lights and shelf live in a 1920-wide frame centred in the hero, so wider screens stay centred */
.hero__lights { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(1920 * var(--s)); translate: -50% 0; pointer-events: none; }
.hero__light { position: absolute; display: block; max-width: none; }
/* Figma ellipse boxes grown by their blur bleed (the SVGs include it) */
.hero__light--rim  { left: calc(20 * var(--s));  top: calc(626 * var(--s));  width: calc(1880 * var(--s)); height: calc(580 * var(--s)); }
.hero__light--gold { left: calc(270 * var(--s)); top: calc(816 * var(--s));  width: calc(1380 * var(--s)); height: calc(380 * var(--s)); }
.hero__light--spot { left: calc(250 * var(--s)); top: calc(186 * var(--s));  width: calc(1420 * var(--s)); height: calc(820 * var(--s)); }
.hero__light--top  { left: calc(80 * var(--s));  top: calc(-480 * var(--s)); width: calc(1760 * var(--s)); height: calc(880 * var(--s)); }

.hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px 0;
  text-align: center;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border: 1px solid rgba(255, 230, 168, 0.7);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.hero-chip__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: linear-gradient(135deg, #ffe6a8 0%, #ffc94d 71.429%);
  font-size: 15px;
  color: var(--ink);
}
.hero-chip__tag {
  padding: 4px 10px;
  border-radius: 99px;
  background: linear-gradient(166.5deg, #ffe6a8 0%, #ffc94d 71.429%);
  font-size: 12px;
  color: var(--ink);
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.hero__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1em 0.214em; }
.hero__hl {
  position: relative;
  display: inline-block;
  padding: 0 0.286em;            /* 24 / 84 */
  border-radius: 0.333em;        /* 28 / 84 */
  background: linear-gradient(169.9deg, #ffe6a8 0%, #ffc94d 71.429%);
  box-shadow: 0 0 40px rgba(255, 201, 77, 0.45), inset 0 2px 2px rgba(255, 255, 255, 0.6);
  line-height: 1.2976;           /* box 109 / 84 */
  color: var(--ink);
}
.hero__line--2 { gap: 0 0.19em; }
.hero__line--2 .gold-text { background-image: linear-gradient(90deg, #ffe6a8 0%, #ffc94d 50%, #e0a526 100%); }
.hero__script {
  font-family: var(--font-script);
  font-size: 1.1429em;           /* 96 / 84 */
  font-weight: 400;
  letter-spacing: 0;
  background: linear-gradient(90deg, #ffe6a8 0%, #ffc94d 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hero__sub {
  max-width: 1120px;              /* Figma box 1054; a little slack so the line doesn't wrap with the live font */
  margin-top: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
}

/* The shelf. Children are placed in Figma px: --x from the hero's left, --y from y 430. */
.shelf {
  --k: calc(100cqw / 1460);      /* phones: zoom on the stage */
  --ox: 232;
  position: relative;
  height: calc(696 * var(--k));
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .shelf { --k: var(--s); --ox: 0; width: calc(1920 * var(--s)); margin: calc(4 * var(--s)) auto 0; }
}
.shelf > * { position: absolute; }
.shelf__stage {
  left: calc((242.3 - var(--ox)) * var(--k));
  top: calc(502 * var(--k));
  width: calc(1436.7 * var(--k));
  height: calc(110 * var(--k));
  background: linear-gradient(90deg, rgba(22, 23, 29, 0) 0%, #16171d 20%, #16171d 80%, rgba(22, 23, 29, 0) 100%);
}
.shelf__edge {
  left: calc((242.3 - var(--ox)) * var(--k));
  top: calc(502 * var(--k));
  width: calc(1436.7 * var(--k));
  height: max(1px, calc(2 * var(--k)));
  background: linear-gradient(90deg, rgba(255, 230, 168, 0) 0%, rgba(255, 230, 168, 0.75) 50%, rgba(255, 230, 168, 0) 100%);
}
.shelf__reflect {
  left: calc((242.3 - var(--ox)) * var(--k));
  top: calc(536 * var(--k));
  width: calc(1436.7 * var(--k));
  height: calc(104 * var(--k));
  overflow: hidden;
}
.shelf__ref {
  position: absolute;
  left: calc(var(--x) * var(--k));
  top: 0;
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  opacity: var(--o, 0.16);
  transform: rotate(180deg);     /* Figma: the box turned upside down */
}
.shelf__ref-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0) 0%, #0a0b0f 90%);
}
.shelf__box {
  left: calc((var(--x) - var(--ox)) * var(--k));
  top: calc(var(--y) * var(--k));
  width: calc(var(--w) * var(--k));
  height: calc(var(--h) * var(--k));
  filter: drop-shadow(0 calc(18 * var(--k)) calc(20 * var(--k)) rgba(0, 0, 0, 0.7));   /* Figma: 0 26 40 -8 */
}
.shelf__label {
  left: calc((var(--x) - var(--ox)) * var(--k));
  top: calc(532 * var(--k));
  padding: 0.43em 1em;           /* 6 / 14 */
  border-radius: 99px;
  font-size: max(9px, calc(14 * var(--k)));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: #fff;
}
.shelf__label--agent      { background: linear-gradient(180deg, #3a3b44, #141826); box-shadow: 0 6px 14px -4px rgba(20, 24, 38, 0.18); }
.shelf__label--studio     { background: linear-gradient(180deg, #2bd3ae, #0b8a6e); box-shadow: 0 6px 14px -4px rgba(11, 138, 110, 0.18); }
.shelf__label--elite      { background: linear-gradient(180deg, #5b8cff, #2457f0); box-shadow: 0 6px 14px -4px rgba(36, 87, 240, 0.18); }
.shelf__label--commercial { background: linear-gradient(180deg, #ffd15e, #f5a623); box-shadow: 0 6px 14px -4px rgba(245, 166, 35, 0.18); color: var(--ink); }
.shelf__label--pro        { background: linear-gradient(180deg, #8f86ff, #4d3ed6); box-shadow: 0 6px 14px -4px rgba(77, 62, 214, 0.18); }
.shelf__label--reseller   { background: linear-gradient(180deg, #1fa06a, #0a4a32); box-shadow: 0 6px 14px -4px rgba(10, 74, 50, 0.18); }
@media (max-width: 1023px) {
  /* labels are bigger than the zoomed scale here: centre them under their boxes */
  .shelf__label { translate: calc(-50% + 36 * var(--k)) 0; }
}

/* "Save 60% Today" sticker: a 190 circle turned -12deg (Figma 851:181) */
.sticker {
  left: calc((1146.59 - var(--ox)) * var(--k));
  top: calc(34.18 * var(--k));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(190 * var(--k));
  height: calc(190 * var(--k));
  border: max(1px, calc(2 * var(--k))) solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe6a8 0%, #ffc94d 39.286%, #d99a1f 71.429%);
  box-shadow: inset 0 calc(3 * var(--k)) calc(3 * var(--k)) rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 calc(16 * var(--k)) calc(18 * var(--k)) rgba(0, 0, 0, 0.5));
  rotate: -12deg;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}
.sticker__save  { font-size: calc(24 * var(--k)); letter-spacing: 0.1em; }
.sticker__pct   { font-size: calc(64 * var(--k)); letter-spacing: -0.04em; line-height: 1.1; }
.sticker__today { font-size: calc(14 * var(--k)); letter-spacing: 0.12em; }

@media (min-width: 640px) {
  .hero__title { font-size: 52px; }
  .hero__sub { font-size: 20px; }
}
@media (min-width: 1024px) {
  .hero__copy { padding: calc(80 * var(--s)) 0 0; }
  .hero-chip { gap: calc(10 * var(--s)); padding: calc(7 * var(--s)) calc(16 * var(--s)) calc(7 * var(--s)) calc(8 * var(--s)); font-size: calc(16 * var(--s)); }
  .hero-chip__icon { width: calc(30 * var(--s)); height: calc(30 * var(--s)); font-size: calc(15 * var(--s)); }
  .hero-chip__tag { padding: calc(4 * var(--s)) calc(10 * var(--s)); font-size: calc(12 * var(--s)); }
  .hero__title { margin-top: calc(14 * var(--s)); font-size: calc(84 * var(--s)); line-height: 1.2976; height: calc(227 * var(--s)); }
  .hero__line { flex-wrap: nowrap; white-space: nowrap; height: calc(108 * var(--s)); }
  .hero__line--2 { height: calc(119 * var(--s)); }
  .hero__sub { margin-top: calc(26 * var(--s)); font-size: calc(26 * var(--s)); line-height: calc(33 * var(--s)); }
}


/* ============ BUY BOX (Figma "Buy box" 859:128, 792 wide, y 1136) ============ */
.buy-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 16px 56px;
  text-align: center;
}
@media (min-width: 1024px) { .buy-box { gap: 28px; padding: 10px 0 67px; } }

.timer { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.timer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
  color: #a86a00;
}
.timer__label img { width: 18px; height: 18px; }
.timer__units { display: flex; align-items: flex-start; gap: 10px; }
.timer__unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.timer__box {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 24px -6px rgba(11, 42, 92, 0.08);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.timer__cap { font-size: 13px; font-weight: 500; line-height: 1.23; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); }
.timer__colon {
  width: 16px;
  height: 96px;
  font-size: 40px;
  font-weight: 700;
  line-height: 96px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
}
/* the price card's timer is drawn at 80% on the light panel (Figma 912:197) */
.timer--sm { gap: 9.6px; }
.timer--sm .timer__label { gap: 6.4px; font-size: 14.4px; }
.timer--sm .timer__label img { width: 14.4px; height: 14.4px; }
.timer--sm .timer__units { gap: 8px; }
.timer--sm .timer__unit { gap: 3.2px; }
.timer--sm .timer__box { width: 76.8px; height: 76.8px; border-radius: 17.6px; font-size: 41.6px; }
.timer--sm .timer__cap { font-size: 10.4px; }
.timer--sm .timer__colon { width: 12.8px; height: 76.8px; font-size: 32px; line-height: 76.8px; }
.timer--light .timer__box { border: 0; background: var(--dark-ink); }
.timer--light .timer__cap,
.timer--light .timer__colon { color: rgba(11, 13, 20, 0.45); }
@media (max-width: 639px) {
  .timer__box { width: 72px; height: 72px; border-radius: 18px; font-size: 38px; }
  .timer__colon { height: 72px; line-height: 72px; font-size: 30px; }
  .timer--sm .timer__box { width: 64px; height: 64px; border-radius: 15px; font-size: 34px; }
  .timer--sm .timer__colon { height: 64px; line-height: 64px; font-size: 26px; }
}

.buy-box__title { font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: #fff; }
@media (min-width: 640px) { .buy-box__title { font-size: 44px; } }
@media (min-width: 1024px) { .buy-box__title { font-size: 56px; white-space: nowrap; } }

/* Price row (Figma 859:194): struck $797, gold $317, "one-time payment" + save pill */
.price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.price-row__was { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.35); }
.price-row__now { font-size: 64px; font-weight: 700; line-height: 1.25; letter-spacing: -0.04em; }
.price-row__side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.price-row__save {
  padding: 4px 10px;
  border-radius: 99px;
  background: linear-gradient(169.3deg, #ffe6a8 0%, #ffc94d 71.429%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}
@media (min-width: 1024px) {
  .price-row__was { font-size: 40px; }
  .price-row__now { font-size: 84px; }
}

/* CTA with its soft ring (Figma "CTA — Buy (ring)" 598 x 139) */
.cta {
  display: inline-flex;
  max-width: 100%;
  padding: 8px;
  border-radius: 999px;
  background: rgba(242, 179, 61, 0.22);
  text-decoration: none;
}
.cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 12px 12px 24px;
  border: 1.5px solid #d98f12;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #f7be45 55%, #efa52a 100%);
  box-shadow: inset 0 -5px 6px rgba(184, 110, 0, 0.35), inset 0 3px 2px rgba(255, 255, 255, 0.8), 0 20px 22px rgba(194, 122, 0, 0.4);
  text-align: left;
  transition: filter 0.2s;
}
.cta:hover .cta__btn { filter: brightness(1.04); }
.cta__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cta__main { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #141418; }
.cta__sub { font-size: 13px; font-weight: 500; line-height: 1.25; color: rgba(20, 20, 24, 0.7); }
.cta__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #141418;
}
.cta__arrow img { width: 24px; height: 24px; }
@media (min-width: 640px) {
  .cta { padding: 12px; }
  .cta__btn { gap: 22px; padding: 18px 18px 18px 64px; }
  .cta__main { font-size: 34px; white-space: nowrap; }
  .cta__sub { font-size: 16px; }
  .cta__arrow { width: 76px; height: 76px; }
  .cta__arrow img { width: 32px; height: 32px; }
}

/* Payments row (Figma "Payments" 567 x 50) */
.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pay {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(14, 23, 38, 0.12);
  border-radius: 8px;
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
}
.pay--paypal { display: flex; justify-content: center; font-size: 15px; }
.pay--paypal b:first-child { color: #003087; }
.pay--paypal b:last-child { color: #009cde; }
.pay--visa { font-size: 17px; color: #1a1f71; }
.pay img { width: 38px; height: 24px; }
.pay--amex img { width: 56px; height: 30px; }
.pay--amex b { position: absolute; font-size: 13px; color: #fff; }
.payments__gtee {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  text-align: left;
}
.payments__gtee img { width: 48px; height: 48px; margin-right: 2px; }
.payments__gtee strong { font-size: 40px; font-weight: 700; line-height: 1.25; color: #fff; }
.payments__gtee span { font-size: 15px; font-weight: 600; line-height: 1.27; color: #fff; }
/* on the light panels (price card, sign-off) the text and the Amex label are dark (Figma 912:228, 916:148) */
.payments--light .payments__gtee strong,
.payments--light .payments__gtee span,
.payments--light .pay--amex b { color: var(--dark-ink); }
@media (max-width: 639px) {
  .payments { gap: 8px; }
  .pay { width: 58px; height: 38px; }
  .payments__gtee { margin-left: 0; }
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.75);
}
.trust-row strong { font-weight: 700; color: #fff; }
.trust-row i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.trust-row--light { border-color: rgba(11, 13, 20, 0.1); background: rgba(11, 13, 20, 0.05); color: rgba(11, 13, 20, 0.6); }
.trust-row--light strong { color: var(--dark-ink); }
.trust-row--light i { background: rgba(11, 13, 20, 0.3); }


/* ============ 10 GUARANTEE (Figma "10 Guarantee — bundle" 912:128, 1920 x 696; card 1280 x 586) ============ */
.gtee {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 10px;
  background: var(--page);
}
.gtee__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  padding: 40px 20px 44px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 32px;
  background:
    radial-gradient(64% 38.5% at 50% 65.4%, rgba(255, 209, 94, 0.12), rgba(255, 209, 94, 0)),
    linear-gradient(180deg, #17181d 0%, #101115 100%);
}
.gtee__coin {
  flex: none;
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 25px 38px rgba(16, 12, 51, 0.35));   /* Figma: 0 38 76 -12.7 on the coin */
}
.gtee__text { width: 100%; max-width: 680px; }
.gtee__head { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.gtee__hl {
  margin-left: -0.34em;          /* Figma: the box starts 14px left of the text column */
  padding: 0 0.34em;
  border-radius: 0.36em;
  background: #fff;
  font-size: 0.9524em;           /* 40 / 42 */
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--dark-ink);
}
.gtee__text p { margin-top: 16px; font-size: 17px; line-height: 1.53; color: rgba(255, 255, 255, 0.62); }
.gtee__text p b { font-weight: 700; color: #fff; }
.gtee__text .gtee__lead { margin-top: 28px; font-weight: 700; color: #fff; }
.gtee__text .gtee__sign { display: flex; gap: 14px; margin-top: 26px; font-size: 17px; line-height: 1.25; color: rgba(255, 255, 255, 0.4); }
.gtee__sign b { color: rgba(255, 255, 255, 0.9); }
.chevrons { width: 40px; height: 40px; margin-top: 40px; }
@media (min-width: 1024px) {
  .gtee__card {
    flex-direction: row;
    align-items: flex-start;
    gap: 70px;
    min-height: 586px;
    padding: 69px 81px 0 69px;
    border-radius: 48px;
  }
  .gtee__coin { width: 380px; height: 380px; margin-top: 33px; }
  .gtee__head { font-size: 42px; }
  .gtee__text p { margin-top: 16px; font-size: 19px; line-height: 29px; }
  .gtee__text p + p:not(.gtee__sign) { margin-top: 17px; }
  .gtee__text .gtee__lead { margin-top: 34px; }
  .gtee__text .gtee__sign { margin-top: 26px; }
  .chevrons { margin-top: 60px; }
}
@media (min-width: 1280px) { .gtee__head > span:first-child { white-space: nowrap; } }


/* ============ 11 PRICING (Figma "11 Pricing — bundle" 912:144, 1920 x 2629; card 1000 x 2255) ============ */
.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 80px;
  background: var(--page);
}
.pricing__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
}
.pricing__hl { padding: 0 0.34em; border-radius: 0.36em; background: #fff; line-height: 1.3167; color: var(--dark-ink); }   /* box 79 / 60 */

/* The card: violet top with the box lineup, then the light panel with the list and the buy area.
   --c is one Figma pixel of the 1000-wide card (the card is the container). */
.pcard {
  --c: calc(100cqw / 1000);
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin-top: 48px;
  padding-bottom: 31px;
  container-type: inline-size;        /* --c resolves against the card in its children */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 32px;
  background: linear-gradient(180deg, #2b1c61 0%, #170f33 35%, #0d0a1a 100%);
}
.pcard__top {
  position: relative;
  z-index: 2;
  height: calc(230.28 * var(--c));
  pointer-events: none;
}
.pcard__top > img { position: absolute; display: block; max-width: none; }
.pcard__spot  { left: calc((69 + 4.76) * var(--c)); top: calc((9 - 185.5) * var(--c)); width: calc(849.9 * var(--c)); height: calc(490.8 * var(--c)); }
.pcard__floor { left: calc((69 - 33.3) * var(--c)); top: calc((9 + 221.28) * var(--c)); width: calc(912.3 * var(--c)); height: calc(120 * var(--c)); }
.pcard__box {
  left: calc((69 + var(--x)) * var(--c));
  top: calc((9 + var(--y)) * var(--c));
  width: calc(var(--w) * var(--c));
  height: calc(var(--h) * var(--c));
  filter: drop-shadow(0 calc(11 * var(--c)) calc(12 * var(--c)) rgba(0, 0, 0, 0.7));   /* Figma: 0 15.6 23.9 -4.8 */
}
.pcard__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 calc(29 * var(--c));
  padding: 0 16px 24px;
  border-radius: 20px;
  background: #fcfcfd;
  box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, 0.35);
  color: var(--dark-ink);
  text-align: center;
}
.pcard__chip {
  position: relative;
  z-index: 3;
  margin-top: calc(80 * var(--c));
  padding: 6px 12px;
  border-radius: 99px;
  background: #ffd15e;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.pcard__title { margin-top: 14px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.pcard__sub { margin-top: 8px; font-size: 16px; line-height: 1.28; color: rgba(11, 13, 20, 0.55); }

.pcard__list { width: 100%; max-width: 856px; margin-top: 32px; border-bottom: 1px solid rgba(11, 13, 20, 0.09); text-align: left; }
.prow {
  display: grid;
  grid-template-columns: 52px 28px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid rgba(11, 13, 20, 0.09);
}
.prow__box { justify-self: center; width: auto; height: 64px; margin-top: 2px; }
.prow__check { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; background: #c6f99a; }
.prow__check img { width: 14px; height: 14px; }
.prow__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: 20px; line-height: 1.25; }
.prow__name > b { font-weight: 700; letter-spacing: -0.015em; }
.prow__name span { font-size: 15px; font-weight: 500; white-space: pre; color: rgba(11, 13, 20, 0.6); }
.prow__name span b { font-weight: 700; color: var(--dark-ink); }
.prow__desc { margin-top: 6px; font-size: 15px; line-height: 1.53; color: rgba(11, 13, 20, 0.6); }

/* bundle-only upgrades and bonuses rows in the pricing card (added Oct 29) */
.prow--head { display: block; padding: 16px 0 6px; text-align: center; }
.prow--head p { font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0.12em; color: rgba(11, 13, 20, 0.5); }
.prow--head p span { display: block; margin-top: 4px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(11, 13, 20, 0.45); }
.prow__tag {
  justify-self: center; align-self: start;
  margin-top: 6px; padding: 5px 7px; border-radius: 8px;
  background: #ffd34d;
  font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-align: center; color: #0b0d14;
}
.prow__tag--live { background: #8cf05a; color: #0b0d14; }
.prow--extra .prow__box { height: 56px; }
.prow--extra { padding: 12px 0; }
.prow--extra .prow__name { font-size: 18px; }
.prow--extra .prow__desc { margin-top: 3px; font-size: 14px; }

.pcard__plus { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.pcard__plus-label { font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: 0.12em; color: rgba(11, 13, 20, 0.5); }
.pcard__pill {
  padding: 8px 16px;
  border: 1px solid rgba(11, 13, 20, 0.12);
  border-radius: 999px;
  background: rgba(11, 13, 20, 0.05);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(11, 13, 20, 0.9);
}
.pcard__total { margin-top: 40px; font-size: 20px; font-weight: 500; line-height: 1.27; color: rgba(11, 13, 20, 0.6); }
.pcard__total s { font-weight: 700; }
.pcard__price { margin-top: 6px; font-size: 100px; font-weight: 700; line-height: 1.18; letter-spacing: -0.05em; }
.pcard__note { margin-top: 1px; font-size: 16px; font-weight: 500; line-height: 1.28; color: rgba(11, 13, 20, 0.65); }
.pcard__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 856px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(11, 13, 20, 0.09);
}
.pcard__foot .cta { margin-top: 28px; }
.pcard__foot .payments { margin-top: 20px; }
.pcard__foot .trust-row { margin-top: 20px; }

@media (min-width: 1024px) {
  .pricing { padding-bottom: 140px; }
  .pricing__head { font-size: 60px; }
  .pricing__hl { padding: 0 0.34em; border-radius: 0.36em; }
  .pcard { margin-top: 70px; padding-bottom: 31px; border-radius: 44px; }
  .pcard__panel { padding: 0 42px 24px; border-radius: 28px; }
  .pcard__title { margin-top: 14px; font-size: 44px; }
  .pcard__sub { margin-top: 8px; font-size: 18px; }
  .pcard__list { margin-top: 44px; }
  /* thumb cell 96 (box 5px in), check 28 + 12, text from 136 (Figma panel x 42 / 138 / 178) */
  .prow { grid-template-columns: 96px 40px 1fr; column-gap: 0; padding: 26px 0 25px; }   /* + the 1px rule = Figma's 145 / 136 rows */
  .prow__box { justify-self: start; margin-left: 5px; height: 84px; margin-top: 4.5px; }
  .prow--wide .prow__box { margin-left: -3px; margin-top: 0; }
  .prow__check { margin-top: 8px; }
  .prow__name { gap: 0 14px; height: 35px; font-size: 28px; line-height: 35px; }
  .prow__name span { font-size: 20px; }
  .prow__desc { margin-top: 6px; font-size: 17px; line-height: 26px; }
  .prow--head { padding: 18px 0 8px; }
  .prow--head p { font-size: 14px; }
  .prow--head p span { font-size: 15px; }
  .prow__tag { margin-left: 5px; justify-self: start; margin-top: 10px; padding: 6px 9px; font-size: 10px; }
  .prow--extra .prow__box { height: 72px; }
  .prow--extra { padding: 14px 0 13px; }
  .prow--extra .prow__name { height: auto; font-size: 22px; line-height: 28px; }
  .prow--extra .prow__desc { margin-top: 3px; font-size: 16px; line-height: 23px; }
  .prow--extra .prow__check { margin-top: 2px; }
  .prow--extra .prow__tag { margin-top: 4px; }
  .pcard__plus { margin-top: 30px; }
  .pcard__total { margin-top: 50px; font-size: 22px; }
  .pcard__price { margin-top: 6px; font-size: 150px; letter-spacing: -0.05em; }
  .pcard__note { margin-top: 1px; font-size: 18px; }
  .pcard__foot { margin-top: 40px; padding-top: 40px; }
  .pcard__foot .cta { margin-top: 36px; }
  .pcard__foot .payments { margin-top: 24px; }
  .pcard__foot .trust-row { margin-top: 24px; }
}


/* ============ 12 SIGN-OFF — WARNING (Figma "12 Sign-off — warning" 916:128, 1920 x 1067) ============ */
.signoff {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  --s: min(1px, 100cqw / 1920);
  background: linear-gradient(180deg, #ece8ff 0%, #fcfcfd 100%);
  color: var(--dark-ink);
}
.signoff__glow { position: absolute; display: block; max-width: none; pointer-events: none; }
.signoff__glow--l { left: calc((-300 - 180) * var(--s)); top: calc((200 - 180) * var(--s)); width: calc(1260 * var(--s)); height: calc(960 * var(--s)); }
.signoff__glow--r { left: calc((1500 - 180) * var(--s)); top: calc((400 - 180) * var(--s)); width: calc(1160 * var(--s)); height: calc(860 * var(--s)); }
.signoff__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 16px 90px;
  text-align: center;
}
.warn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 18px;
  border-radius: 14px;
  background: #e8231b;
  box-shadow: 0 14px 30px -6px rgba(232, 35, 27, 0.35);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.warn__icon { position: relative; display: grid; place-items: center; width: 32px; height: 29px; }
.warn__icon img { position: absolute; inset: 0; width: 100%; height: 100%; }
.warn__icon b { position: relative; margin-top: 4px; font-size: 19px; color: var(--dark-ink); }
.signoff__title { margin-top: 40px; font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; }
.signoff__p { max-width: 860px; margin-top: 20px; font-size: 17px; font-weight: 500; line-height: 1.55; color: rgba(11, 13, 20, 0.8); }
.signoff__title + .signoff__p { margin-top: 24px; }
.signoff__cta { margin-top: 40px; }
.signoff .payments { margin-top: 22px; }
.signoff__chevrons { width: 40px; height: 44px; margin-top: 56px; }
@media (min-width: 1024px) {
  .signoff__inner { padding: 150px 0 130px; }
  .warn { gap: 14px; padding: 14px 32px 14px 28px; border-radius: 16px; font-size: 46px; }
  .warn__icon { width: 44px; height: 40px; }
  .warn__icon b { margin-top: 6px; font-size: 26px; }
  .signoff__title { margin-top: 40px; font-size: 50px; white-space: nowrap; }
  .signoff__p { margin-top: 20px; font-size: 20px; line-height: 31px; }
  .signoff__title + .signoff__p { margin-top: 28px; }
  .signoff__cta { margin-top: 50px; }
  .signoff .payments { margin-top: 22px; }
  .signoff__chevrons { margin-top: 70px; }
}


/* ============ PARTS (inside, commercial, elite, pro, studio, agent, reseller, value — merged from parts) ============ */
/* ---- part: inside ---- */
/* ============ 02 EVERYTHING INSIDE THE BUNDLE (Figma 859:201, 1920 x 2885) ============
   Static by request: nothing in this section moves.
   Content is Figma's 1280 column. The section carries the 200px gap above it (buy box → section);
   it ends at the bottom of the total bar, as in Figma.
   Desktop (>= 1024): 3 columns, 24px gaps — Commercial spans 2, Reseller spans 3.
   640–1023: 2 columns (Commercial and Reseller span both). Below 640: 1 column. */
/* The buy box section already carries the 200px gap above; Figma's 200px gap to Part 1 sits below */
.bd-inside { padding-bottom: 120px; color: #fff; }
@media (min-width: 1024px) { .bd-inside { padding-bottom: 200px; } }
.bdinside-wrap { width: min(1280px, 100% - 32px); margin: 0 auto; }

/* ---- header ---- */
.bdinside-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bdinside-eyebrow {
  font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}
.bdinside-title {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; margin-top: 14px;
  font-size: 34px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em;
}
/* Figma "Highlight box": glass pill, 84 tall at 64px type */
.bdinside-glass {
  position: relative;
  padding: 0.016em 0.3em 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.344em;   /* 22 / 64 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.bdinside-lead { max-width: 782px; margin-top: 16px; font-size: 17px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
@media (min-width: 1024px) {
  .bdinside-eyebrow { font-size: 14px; }          /* top 0 */
  .bdinside-title { margin-top: 16px; font-size: 64px; }   /* top 34, box 84 */
  .bdinside-lead { margin-top: 20px; font-size: 22px; }    /* top 138 */
}

/* ---- tiles ---- */
.bdinside-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 76px 24px;           /* rows leave room for the boxes poking out of each tile's top */
  margin-top: 110px;
}
@media (min-width: 640px) {
  .bdinside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bdinside-tile--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bdinside-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 120px; margin-top: 140px; } /* grid top 306 */
  .bdinside-tile--commercial { grid-column: span 2; min-height: 845px; }
  .bdinside-tile--elite { min-height: 845px; }
  .bdinside-tile--pro, .bdinside-tile--studio, .bdinside-tile--agent { min-height: 958px; }
  .bdinside-tile--reseller { grid-column: span 3; min-height: 332px; }
}

.bdinside-tile {
  position: relative;
  padding: 26px 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.5));
}
@media (min-width: 1024px) { .bdinside-tile { padding: 38px 35px 25px; border-radius: 40px; } }   /* 845 / 958 tall at 1920 */
.bdinside-tile--commercial { background: linear-gradient(135.01deg, #ff8a5b 0%, #f2513a 39.286%, #c9302c 71.429%); }
.bdinside-tile--elite      { background: linear-gradient(115.92deg, #5b8cff 0%, #1f48e0 71.429%); }
.bdinside-tile--pro        { background: linear-gradient(113.2deg, #8f86ff 0%, #4d3ed6 71.429%); }
.bdinside-tile--studio     { background: linear-gradient(113.2deg, #2bd3ae 0%, #0b7a62 71.429%); }
.bdinside-tile--agent      { background: linear-gradient(113.2deg, #2a2b33 0%, #0e0f14 71.429%); }
.bdinside-tile--reseller   { background: linear-gradient(165.46deg, #1fa06a 0%, #08402b 71.429%); }

/* Product box: sits 25px in from the right edge and 71px above the tile (Figma) */
.bdinside-box {
  position: absolute;
  right: 18px;
  top: -50px;
  width: auto;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 20px 15px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
@media (min-width: 1024px) { .bdinside-box { right: 25px; top: -71px; height: 210px; } }

.bdinside-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.1em;
}
.bdinside-tile--commercial .bdinside-tag { background: rgba(255, 255, 255, 0.2); }
.bdinside-name { margin-top: 9px; font-size: 34px; font-weight: 700; line-height: 1.26; letter-spacing: -0.03em; }
.bdinside-sub {
  max-width: calc(100% - 150px);
  margin-top: 8px;
  font-size: 19px; font-weight: 700; line-height: 1.27; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
}
.bdinside-tile--commercial .bdinside-sub { color: #fff; }
.bdinside-count {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.04em;
}
.bdinside-rule { height: 1px; margin-top: 12px; background: rgba(255, 255, 255, 0.2); }
.bdinside-tile--commercial .bdinside-rule { background: rgba(255, 255, 255, 0.25); }
@media (min-width: 1024px) {
  .bdinside-name { font-size: 44px; }                                  /* top 73 */
  .bdinside-sub { max-width: none; margin-top: 19px; font-size: 22px; } /* top 147 (2 lines) */
  .bdinside-tile--wide .bdinside-sub { max-width: calc(100% - 180px); margin-top: 5px; } /* top 133 (1 line), clears the box */
}

/* Feature lists: 16/22, a white check disc 22px wide, 13px between items */
.bdinside-lists { display: grid; gap: 13px 32px; margin-top: 16px; }
.bdinside-list { display: flex; flex-direction: column; gap: 13px; }
.bdinside-list li {
  position: relative;
  padding-left: 34px;
  font-size: 15px; font-weight: 600; line-height: 22px;
  color: rgba(255, 255, 255, 0.95);
}
.bdinside-list li::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}
.bdinside-list img { position: absolute; left: 5.5px; top: 6.5px; z-index: 1; width: 11px; height: 11px; }
@media (min-width: 640px) {
  .bdinside-tile--commercial .bdinside-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Reseller: three columns filled top to bottom, two rows */
  .bdinside-tile--reseller .bdinside-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 13px 32px; }
}
@media (min-width: 1024px) { .bdinside-list li { font-size: 16px; } }

/* ---- total bar (Figma 860:470, 1280 x 150) ---- */
.bdinside-total {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 40px;
  padding: 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
}
.bdinside-total p { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; line-height: 1.26; }
.bdinside-total__was span { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.bdinside-total__was s { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.45); }
.bdinside-total__now span { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.bdinside-total__now b { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 768px) {
  .bdinside-total { flex-direction: row; justify-content: space-between; min-height: 150px; padding: 0 47px; border-radius: 40px; }
}
@media (min-width: 1024px) {
  .bdinside-total { margin-top: 54px; }   /* top 2735 */
  .bdinside-total__was span, .bdinside-total__now span { font-size: 26px; }
  .bdinside-total__was s { font-size: 40px; }
  .bdinside-total__now b { font-size: 64px; }
}

/* ---- part: commercial ---- */
/* ============ 03 PART 1 — COMMERCIAL FEATURES (Figma 867:128, 1920 x 4533) ============
   Everything is sized from the 1920 frame: --s is one Figma pixel (1px at 1920 and up).
   On phones a few things get a floor so they stay readable (max(...)).
   Motion: only the samples strip slides (and never with reduced motion). The feature
   cards are still pictures. */
.bd-commercial {
  --s: min(1px, 100cqw / 1920);
  --bdc-bg: #07090a;
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  background: var(--bdc-bg);
  color: #fff;
  text-align: center;
  /* Figma: the dark band runs ~190px past the pills before Elite starts (can't use own cqw here) */
  padding-bottom: min(190px, 9.9vw);
}
.bdcommercial-in {
  position: relative;
  width: min(100% - 32px, calc(1280 * var(--s)));
  margin: 0 auto;
  padding-top: calc(30 * var(--s));
}
@media (max-width: 1023px) { .bdcommercial-in { width: calc(100% - 32px); } }

/* ---- box on its floor (Figma y 0–592; positions are offsets from the frame centre, x 960) ---- */
.bdcommercial-stage {
  --k: max(var(--s), 0.5px);                     /* never smaller than half size on phones */
  position: relative;
  height: calc(586 * var(--k));
  pointer-events: none;
}
.bdcommercial-stage > * { position: absolute; display: block; max-width: none; }
.bdcommercial-stage__glow       { left: calc(50% + (270 - 960) * var(--k)); top: calc(-30 * var(--k)); width: calc(1380 * var(--k)); height: calc(800 * var(--k)); }
.bdcommercial-stage__floor-glow { left: calc(50% + (450 - 960) * var(--k)); top: calc(310 * var(--k)); width: calc(1020 * var(--k)); height: calc(260 * var(--k)); }
.bdcommercial-stage__shadow     { left: calc(50% + (768.85 - 960) * var(--k)); top: calc(402 * var(--k)); width: calc(382.3 * var(--k)); height: calc(66 * var(--k)); }
.bdcommercial-stage__line {
  left: calc(50% - 500 * var(--k)); top: calc(440 * var(--k));
  width: calc(1000 * var(--k)); height: 1px;
  background: linear-gradient(90deg, rgba(255, 138, 91, 0), rgba(255, 138, 91, 0.45) 50%, rgba(255, 138, 91, 0));
}
.bdcommercial-stage__box {
  left: calc(50% + (807.69 - 960) * var(--k)); top: 0;
  width: calc(304.615 * var(--k)); height: calc(440 * var(--k));
  filter: drop-shadow(0 calc(30 * var(--k)) calc(40 * var(--k)) rgba(0, 0, 0, 0.6));
}
/* Reflection: the box upside down under the floor, 30%, fading out over 150px */
.bdcommercial-stage__reflection {
  left: calc(50% + (807.69 - 960) * var(--k)); top: calc(442 * var(--k));
  width: calc(304.615 * var(--k)); height: calc(150 * var(--k));
  overflow: hidden;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}
.bdcommercial-stage__reflection img { display: block; width: 100%; height: calc(440 * var(--k)); transform: scaleY(-1); }

/* ---- chip, headline, sub line (Figma y 586 / 638 / 740) ---- */
.bdcommercial-chip {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}
.bdcommercial-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px calc(16 * var(--s));
  margin-top: max(16px, calc(20 * var(--s)));
  font-size: max(34px, calc(64 * var(--s)));
  font-weight: 700;
  line-height: 1.3125;                           /* 84 / 64 */
  letter-spacing: -0.03em;
}
.bdcommercial-head__hl {
  padding: 0 0.3125em;                           /* 20 / 64 */
  border-radius: 0.34375em;                      /* 22 / 64 */
  background: linear-gradient(168deg, #ff8a5b 0%, #e8402f 71.43%);
}
.bdcommercial-sub {
  max-width: 900px;
  margin: max(12px, calc(18 * var(--s))) auto 0;
  font-size: max(16px, calc(21 * var(--s)));
  line-height: 1.24;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- demo film (Figma 872:129: 1180 x 684 frame, 1140 x 644 screen, y 846) ---- */
.bdcommercial-demo {
  position: relative;
  width: min(100%, calc(1180 * var(--s)));
  margin: max(40px, calc(80 * var(--s))) auto 0;
  padding: max(8px, calc(19 * var(--s)));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: max(20px, calc(40 * var(--s)));
  background: linear-gradient(180deg, #14151a, #08090c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bdcommercial-demo__screen {
  position: relative;
  aspect-ratio: 1140 / 644;
  overflow: hidden;
  border-radius: max(14px, calc(26 * var(--s)));
  background: #000;
}
.bdcommercial-demo__btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.bdcommercial-demo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bdcommercial-demo__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6)); }
.bdcommercial-demo__play {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: max(56px, calc(110 * var(--s))); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
  transition: scale 0.15s;
}
.bdcommercial-demo__btn:hover .bdcommercial-demo__play { scale: 1.05; }
.bdcommercial-demo__play img { width: 31%; height: auto; margin-left: 7%; }
.bdcommercial-demo__badge {
  position: absolute; left: max(12px, calc(28 * var(--s))); top: max(12px, calc(28 * var(--s)));
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 14px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: max(10px, calc(13 * var(--s)));
  font-weight: 700; line-height: 1.25; letter-spacing: 0.12em;
}
.bdcommercial-demo__caption {
  position: absolute; left: max(12px, calc(28 * var(--s))); bottom: max(12px, calc(28 * var(--s)));
  max-width: 70%;
  font-size: max(13px, calc(26 * var(--s)));
  font-weight: 700; line-height: 1.25; letter-spacing: -0.015em;
}
.bdcommercial-demo__time {
  position: absolute; right: max(12px, calc(28 * var(--s))); bottom: max(12px, calc(30 * var(--s)));
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  font-size: max(11px, calc(14 * var(--s)));
  font-weight: 700; line-height: 1.25;
}

/* below the desktop the film takes the full column, and on phones the play button and
   caption shrink so the two never overlap */
@media (max-width: 1023px) { .bdcommercial-demo { width: 100%; } }
@media (max-width: 639px) {
  .bdcommercial-demo__play { width: 48px; }
  .bdcommercial-demo__caption { max-width: 62%; font-size: 12px; }
  .bdcommercial-demo__time { padding: 5px 9px; font-size: 10px; }
  .bdcommercial-demo__badge { padding: 6px 11px 6px 10px; gap: 7px; }
}

/* ---- "Made with" label + Rancho line (Figma y 1620 / 1646) ---- */
.bdcommercial-label {
  margin-top: max(36px, calc(90 * var(--s)));
  font-size: 13px; font-weight: 700; line-height: 16px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
}
.bdcommercial-script {
  margin-top: 10px;
  font-family: var(--font-script, "Rancho", cursive);
  font-size: max(26px, calc(40 * var(--s)));
  line-height: 1.25;
}

/* ---- samples strip (Figma 872:143: two rows of 230px cards, 16px gaps, y 1736) ----
   special/'s gallery carousel: each track holds its cards several times (copied by the
   script) and slides by half, so it loops without a jump. Rows run opposite ways. */
.bdcommercial-strip {
  --toon-h: max(120px, calc(230 * var(--s)));
  --toon-gap: max(10px, calc(16 * var(--s)));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--toon-gap);
  margin-top: max(24px, calc(40 * var(--s)));
  overflow: hidden;
}
.bdcommercial-track {
  display: flex;
  width: max-content;
  animation: bdcommercial-marquee 110s linear infinite;
}
.bdcommercial-track--1 { margin-left: calc(-40 * var(--s)); }
.bdcommercial-track--2 { margin-left: calc(-150 * var(--s)); animation-duration: 140s; animation-direction: reverse; }
@keyframes bdcommercial-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bdcommercial-track { animation: none; } }

.bdcommercial-toon {
  position: relative;
  flex: none;
  height: var(--toon-h);
  margin-right: var(--toon-gap);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: max(12px, calc(22 * var(--s)));
  background: #111;
}
.bdcommercial-toon--portrait  { width: calc(var(--toon-h) * 0.8); }     /* 184 */
.bdcommercial-toon--square    { width: var(--toon-h); }                  /* 230 */
.bdcommercial-toon--landscape { width: calc(var(--toon-h) * 1.4); }     /* 322 */
.bdcommercial-toon--wide      { width: calc(var(--toon-h) * 1.7348); }  /* 399 */
.bdcommercial-toon > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bdcommercial-toon__play {
  position: absolute; left: calc(var(--toon-h) * 0.0478); bottom: calc(var(--toon-h) * 0.0565);
  display: grid; place-items: center;
  width: calc(var(--toon-h) * 0.1739); aspect-ratio: 1;               /* 40 */
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.bdcommercial-toon__play img { width: 32.5%; height: auto; margin-left: 6%; }
.bdcommercial-strip__fade {
  position: absolute; top: 0; bottom: 0;
  width: calc(260 * var(--s));
  min-width: 40px;
  pointer-events: none;
}
.bdcommercial-strip__fade--l { left: 0; background: linear-gradient(90deg, #06070a, rgba(6, 7, 10, 0)); }
.bdcommercial-strip__fade--r { right: 0; background: linear-gradient(270deg, #06070a, rgba(6, 7, 10, 0)); }

/* ---- feature cards (Figma y 2332–4248): 3 columns of 410.67, gaps 24 / 56 ---- */
.bdcommercial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: calc(56 * var(--s)) calc(24 * var(--s));
  align-items: start;
  margin-top: max(56px, calc(88 * var(--s)));
  text-align: left;
}
.bdcommercial-feat { min-width: 0; }
.bdcommercial-feat__vis {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 821 / 730;
  border-radius: max(28px, calc(54.756 * var(--s)));
  background: #0c0d11;
}
.bdcommercial-feat__cap {
  display: grid;
  grid-template-columns: calc(36 * var(--s)) 1fr;
  margin-top: calc(14 * var(--s));
  padding-left: calc(4 * var(--s));
}
.bdcommercial-feat__num {
  padding-top: 6px;
  font-size: 13px; font-weight: 700; line-height: 16px;
  letter-spacing: 0.1em;
  color: #ff8a5b;
}
.bdcommercial-feat__title {
  display: flex;
  flex-direction: column;
  font-size: max(19px, calc(22 * var(--s)));
  font-weight: 700;
  line-height: 1.2727;                           /* 28 / 22 */
  letter-spacing: -0.015em;
}
.bdcommercial-feat__script {
  font-family: var(--font-script, "Rancho", cursive);
  font-size: 1.0909em;                           /* 24 / 22 */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

/* wide cards (01, 07): picture left, copy right (copy at x 446.67, 36px gap) */
.bdcommercial-feat--wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 410.67fr) minmax(0, 398.67fr);
  column-gap: calc(36 * var(--s));
}
.bdcommercial-feat--wide .bdcommercial-feat__vis { aspect-ratio: auto; }
.bdcommercial-feat__copy { padding-top: calc(24 * var(--s)); padding-right: calc(12 * var(--s)); }
.bdcommercial-feat--wide .bdcommercial-feat__num { display: block; padding-top: 0; font-size: 14px; line-height: 18px; }
.bdcommercial-feat--wide .bdcommercial-feat__title {
  margin-top: 8px;
  font-size: max(24px, calc(30 * var(--s)));
  line-height: 1.2;                              /* 36 / 30 */
  letter-spacing: -0.02em;
}
.bdcommercial-feat--wide .bdcommercial-feat__script { margin-top: 2px; font-size: 1em; }
.bdcommercial-feat__text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1023px) {
  .bdcommercial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .bdcommercial-feat__cap { grid-template-columns: 30px 1fr; margin-top: 12px; padding-left: 2px; }
  .bdcommercial-feat__copy { padding-top: 8px; }
}
@media (max-width: 639px) {
  .bdcommercial-grid { grid-template-columns: minmax(0, 1fr); }
  .bdcommercial-feat--wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .bdcommercial-feat__copy { padding: 0 2px; }
}

/* ---- "Also included" pills (Figma y 4314–4501): three rows, broken where Figma breaks them ---- */
.bdcommercial-label--also { margin-top: max(48px, calc(66 * var(--s))); }
.bdcommercial-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 8px;                                     /* rows are spaced by the pills' own margins, */
  margin: 18px 0 0;                               /* so the zero-height breaks add no extra gap */
  padding: 0 0 max(24px, calc(26 * var(--s)));
  list-style: none;
}
.bdcommercial-pills__break { flex-basis: 100%; height: 0; }
@media (max-width: 1279px) { .bdcommercial-pills__break { display: none; } }
.bdcommercial-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
}
.bdcommercial-pill__tick { font-size: 14px; font-weight: 700; color: #ff8a5b; }
@media (max-width: 639px) { .bdcommercial-pill { font-size: 13px; padding: 8px 12px; white-space: normal; } }

/* ---- part: elite ---- */
/* ============ 04 PART 2 — ELITE FEATURES (Figma 880:128, 1920 x 2726) ============
   Static by request: nothing in this section moves. Light section, #fcfcfd. */
/* Section scale: 1px at 1920 wide, smaller below. --hs keeps the stage legible on phones. */
.bd-elite { position: relative; container-type: inline-size; overflow-x: clip; background: #fcfcfd; color: #0b0d14; }
.bd-elite > * { --s: min(1px, 100cqw / 1920); --hs: max(var(--s), 0.5px); }

/* ---- stage (Figma section coords; x measured from the centre line at 960) ---- */
.bdelite-stage { position: relative; height: calc(706 * var(--hs)); pointer-events: none; }
.bdelite-stage > * { position: absolute; display: block; max-width: none; }
.bdelite-glow       { left: calc(50% - 690 * var(--hs)); top: calc(90 * var(--hs));  width: calc(1380 * var(--hs)); height: calc(800 * var(--hs)); }
.bdelite-floorglow  { left: calc(50% - 510 * var(--hs)); top: calc(430 * var(--hs)); width: calc(1020 * var(--hs)); height: calc(260 * var(--hs)); }
.bdelite-contact    { left: calc(50% - 197.97 * var(--hs)); top: calc(522 * var(--hs)); width: calc(395.93 * var(--hs)); height: calc(66 * var(--hs)); }
.bdelite-floorline  { left: calc(50% - 500 * var(--hs)); top: calc(560 * var(--hs)); width: calc(1000 * var(--hs)); height: 1px;
  background: linear-gradient(to right, rgba(91,140,255,0), rgba(91,140,255,.5) 50%, rgba(91,140,255,0)); }
.bdelite-box        { left: calc(50% - 158.23 * var(--hs)); top: calc(120 * var(--hs)); width: calc(316.46 * var(--hs)); height: calc(440 * var(--hs));
  filter: drop-shadow(0 calc(30 * var(--hs)) calc(36 * var(--hs)) rgba(11,13,20,.18)); }   /* Figma shadow 0 30 50 -10, follows the box outline */
.bdelite-reflection { left: calc(50% - 158.23 * var(--hs)); top: calc(562 * var(--hs)); width: calc(316.46 * var(--hs)); height: calc(150 * var(--hs)); }

/* ---- header: chip (top 706) → headline (+20) → sub (+18) ---- */
.bdelite-head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px; }
.bdelite-chip { padding: 7px 14px; border: 1px solid rgba(11,13,20,.28); border-radius: 99px;
  background: linear-gradient(180deg, rgba(11,13,20,.12), rgba(11,13,20,.05)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: 0.14em; color: rgba(11,13,20,.85); white-space: nowrap; }
.bdelite-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15em 0.25em;
  margin-top: max(16px, 20 * var(--s));
  font-size: max(35px, 64 * var(--s)); font-weight: 700; line-height: 1.3125; letter-spacing: -0.03em; color: #0b0d14; }
.bdelite-hl { min-width: 2.64em; padding: 0.03125em 0.3125em; line-height: 1.25; border-radius: 0.344em; color: #fff;   /* 169 x 84 box, text inset 20 / 2 */
  background: linear-gradient(153.57deg, #5b8cff 0%, #1f48e0 71.429%); }
.bdelite-sub { max-width: 860px; margin-top: max(12px, 18 * var(--s));
  font-size: max(16px, 21 * var(--s)); line-height: 1.24; color: rgba(11,13,20,.6); }

/* ---- feature cards ----
   Card internals are Figma px × --k (1px = Figma size). Phones/tablets: one or two columns in number order.
   Desktop (>= 1200): masonry at the Figma positions, --k = section scale. */
.bdelite-grid { --k: min(1px, (100cqw - 32px) / 410.67);
  display: grid; grid-template-columns: calc(410.67 * var(--k)); justify-content: center; align-items: start; gap: 24px;
  margin-top: max(56px, 90 * var(--s)); padding-bottom: 80px; }
@media (min-width: 880px) { .bdelite-grid { --k: 1px; grid-template-columns: repeat(2, calc(410.67 * var(--k))); } }
.bdelite-card { position: relative; overflow: hidden; height: calc(var(--h) * var(--k));
  padding: calc(30 * var(--k)) calc(28 * var(--k)) 0;
  border-radius: calc(32 * var(--k));
  background: linear-gradient(180deg, #fff, #f1f2f6);
  box-shadow: 0 calc(18 * var(--k)) calc(40 * var(--k)) calc(-10 * var(--k)) rgba(15,20,51,.08); }
.bdelite-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(11,13,20,.07), inset 0 1px 0 #fff; }   /* border drawn inside, as Figma */
.bdelite-num { font-size: calc(13 * var(--k)); font-weight: 700; line-height: calc(16 * var(--k)); letter-spacing: 0.1em; color: #2654e5; }
.bdelite-name { max-width: calc(354.67 * var(--k)); margin-top: calc(6 * var(--k));
  font-size: calc(23 * var(--k)); font-weight: 700; line-height: calc(28 * var(--k)); letter-spacing: -0.015em; color: #0b0d14; }
.bdelite-script { margin-top: calc(2 * var(--k)); font-family: "Rancho", cursive; font-size: calc(24 * var(--k)); line-height: calc(30 * var(--k)); color: #0b0d14; }
.bdelite-visual { position: absolute; left: 0; top: calc(var(--v) * var(--k)); width: calc(410.67 * var(--k)); height: calc(365.28 * var(--k)); max-width: none; }

@media (min-width: 1200px) {
  .bdelite-grid { --k: var(--s); display: block; position: relative;
    width: calc(1920 * var(--s)); height: calc(1629.83 * var(--s)); margin: calc(90 * var(--s)) auto calc(120 * var(--s));
    padding-bottom: 0; }   /* + 120 below the last card, as Figma */
  .bdelite-card { position: absolute; left: calc(var(--x) * var(--s)); top: calc(var(--y) * var(--s)); width: calc(410.67 * var(--s)); }
}

/* ---- part: pro ---- */
/* ============ 05 PART 3 — PRO FEATURES (Figma 888:128, 1920 x 2974) ============
   Static by request: nothing in this section moves. Dark section, #06070a. */
/* Section scale: 1px at 1920 wide, smaller below. --hs keeps the stage legible on phones. */
.bd-pro { position: relative; container-type: inline-size; overflow-x: clip; background: #06070a; color: #fff; }
.bd-pro > * { --s: min(1px, 100cqw / 1920); --hs: max(var(--s), 0.5px); }

/* ---- stage (Figma section coords; x measured from the centre line at 960) ---- */
.bdpro-stage { position: relative; height: calc(706 * var(--hs)); pointer-events: none; }
.bdpro-stage > * { position: absolute; display: block; max-width: none; }
.bdpro-glow       { left: calc(50% - 690 * var(--hs)); top: calc(90 * var(--hs));  width: calc(1380 * var(--hs)); height: calc(800 * var(--hs)); }
.bdpro-floorglow  { left: calc(50% - 510 * var(--hs)); top: calc(430 * var(--hs)); width: calc(1020 * var(--hs)); height: calc(260 * var(--hs)); }
.bdpro-contact    { left: calc(50% - 197.97 * var(--hs)); top: calc(522 * var(--hs)); width: calc(395.93 * var(--hs)); height: calc(66 * var(--hs)); }
.bdpro-floorline  { left: calc(50% - 500 * var(--hs)); top: calc(560 * var(--hs)); width: calc(1000 * var(--hs)); height: 1px;
  background: linear-gradient(to right, rgba(143,134,255,0), rgba(143,134,255,.45) 50%, rgba(143,134,255,0)); }
.bdpro-box        { left: calc(50% - 158.23 * var(--hs)); top: calc(120 * var(--hs)); width: calc(316.46 * var(--hs)); height: calc(440 * var(--hs));
  filter: drop-shadow(0 calc(30 * var(--hs)) calc(36 * var(--hs)) rgba(0,0,0,.6)); }   /* Figma shadow 0 30 50 -10, follows the box outline */
.bdpro-reflection { left: calc(50% - 158.23 * var(--hs)); top: calc(562 * var(--hs)); width: calc(316.46 * var(--hs)); height: calc(150 * var(--hs)); }

/* ---- header: chip (top 706) → headline (+20) → sub (+18) ---- */
.bdpro-head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 16px; }
.bdpro-chip { padding: 7px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 99px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: 0.14em; color: rgba(255,255,255,.85); white-space: nowrap; }
.bdpro-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15em 0.25em;
  margin-top: max(16px, 20 * var(--s));
  font-size: max(35px, 64 * var(--s)); font-weight: 700; line-height: 1.3125; letter-spacing: -0.03em; color: #fff; }
.bdpro-hl { min-width: 2.64em; padding: 0.03125em 0.3125em; line-height: 1.25; border-radius: 0.344em; color: #fff;   /* 169 x 84 box, text inset 20 / 2 */
  background: linear-gradient(153.57deg, #8f86ff 0%, #4d3ed6 71.429%); }
.bdpro-sub { max-width: 860px; margin-top: max(12px, 18 * var(--s));
  font-size: max(16px, 21 * var(--s)); line-height: 1.24; color: rgba(255,255,255,.6); }

/* ---- feature cards ----
   Card internals are Figma px × --k. Below 1200: one column (spine hidden); below 640 each card stacks picture over text.
   Desktop (>= 1200): spine down the centre, cards alternate at the Figma positions. */
.bdpro-list { --k: min(1px, (100cqw - 32px) / 610);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  margin-top: max(56px, 100 * var(--s)); padding: 0 16px 96px; }
.bdpro-spine, .bdpro-dot, .bdpro-link { display: none; }
.bdpro-card { position: relative; display: flex; align-items: center;
  width: calc(610 * var(--k)); height: calc(284.63 * var(--k)); border-radius: calc(32 * var(--k)); overflow: hidden;
  background: linear-gradient(180deg, #14151a, #08090c); }
.bdpro-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.08); }
.bdpro-visual { position: absolute; top: 0; width: calc(320 * var(--k)); height: calc(284.63 * var(--k)); max-width: none; }
.bdpro-card--left  .bdpro-visual { left: 0; }
.bdpro-card--right .bdpro-visual { left: calc(290 * var(--k)); }
.bdpro-text { position: absolute; width: calc(250 * var(--k)); }
.bdpro-card--left  .bdpro-text { right: calc(32 * var(--k)); text-align: right; }
.bdpro-card--right .bdpro-text { left: calc(32 * var(--k)); }
.bdpro-card--left .bdpro-num { text-align: left; }   /* Figma: number sits at the block's left even on right-aligned cards */
.bdpro-num { font-size: calc(13 * var(--k)); font-weight: 700; line-height: calc(16 * var(--k)); letter-spacing: 0.1em; color: #b4aeff; }
.bdpro-name { margin-top: calc(8 * var(--k)); font-size: calc(26 * var(--k)); font-weight: 700; line-height: calc(31 * var(--k)); letter-spacing: -0.015em; color: #fff; }
.bdpro-script { margin-top: calc(2 * var(--k)); font-family: "Rancho", cursive; font-size: calc(26 * var(--k)); line-height: calc(32 * var(--k)); color: #fff; }

@media (max-width: 639px) {   /* phones: picture on top, text below, left-aligned */
  .bdpro-card { flex-direction: column; align-items: stretch; width: 100%; max-width: 610px; height: auto; border-radius: 28px; }
  .bdpro-card .bdpro-visual { position: static; width: 100%; height: auto; aspect-ratio: 320 / 284.63; object-fit: cover; }
  .bdpro-card .bdpro-text { position: static; width: auto; padding: 20px 24px 26px; text-align: left; }
  .bdpro-num { font-size: 13px; line-height: 16px; }
  .bdpro-name { margin-top: 8px; font-size: 22px; line-height: 27px; }
  .bdpro-script { margin-top: 2px; font-size: 22px; line-height: 28px; }
}

@media (min-width: 1200px) {
  .bdpro-list { --k: var(--s); display: block; position: relative;
    width: calc(1920 * var(--s)); height: calc(1827.79 * var(--s)); margin: calc(100 * var(--s)) auto calc(160 * var(--s)); padding: 0; }
  .bdpro-spine { display: block; position: absolute; left: calc(959 * var(--s)); top: 0; width: calc(2 * var(--s)); height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 8%, rgba(255,255,255,.22) 92%, rgba(255,255,255,0) 100%); }
  .bdpro-card { position: absolute; top: calc(var(--y) * var(--s)); overflow: visible; }
  .bdpro-card--left  { left: calc(320 * var(--s)); }
  .bdpro-card--right { left: calc(990 * var(--s)); }
  .bdpro-visual { border-radius: calc(32 * var(--s)) 0 0 calc(32 * var(--s)); }
  .bdpro-card--right .bdpro-visual { border-radius: 0 calc(32 * var(--s)) calc(32 * var(--s)) 0; }
  /* dot (14px, centred on the spine) + 23px link to the card edge */
  .bdpro-dot { display: block; position: absolute; top: calc(119.32 * var(--s)); width: calc(46 * var(--s)); height: calc(46 * var(--s)); max-width: none; }
  .bdpro-card--left  .bdpro-dot { left: calc(617 * var(--s)); }    /* 937 - 320 */
  .bdpro-card--right .bdpro-dot { left: calc(-53 * var(--s)); }    /* 937 - 990 */
  .bdpro-link { display: block; position: absolute; top: calc(142.32 * var(--s)); width: calc(23 * var(--s)); height: 1px; background: rgba(255,255,255,.22); }
  .bdpro-card--left  .bdpro-link { left: calc(610 * var(--s)); }   /* 930 - 320 */
  .bdpro-card--right .bdpro-link { left: calc(-23 * var(--s)); }   /* 967 - 990 */
}

/* ---- part: studio ---- */
/* ============ 06 PART 4 — STUDIO FEATURES (Figma 892:128, 1920 x 3299, light) ============
   Sized from the 1920 frame: --s is one Figma px (1px at 1920 and wider). Phones get readable
   floors with max(...). Nothing in this section moves (Bundle rule: features are still). */
.bd-studio {
  --s: min(1px, 100cqw / 1920);
  --k: max(var(--s), 0.5px);                       /* stage: never below half size */
  --bds-ink: #0b0d14;
  --bds-mint: #2bd3ae;
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  padding-bottom: max(64px, calc(160 * var(--s)));
  background: #fcfcfd;
  color: var(--bds-ink);
  text-align: center;
}

/* ---- box on its floor (Figma y 0–712; x positions are offsets from the frame centre, 960) ---- */
.bdstudio-stage { position: relative; height: calc(706 * var(--k)); pointer-events: none; }
.bdstudio-stage > * { position: absolute; display: block; max-width: none; }
.bdstudio-stage__glow {
  left: calc(50% - 550 * var(--k)); top: calc(230 * var(--k));
  width: calc(1100 * var(--k)); height: calc(520 * var(--k));
  border-radius: 50%;
  background: rgba(43, 211, 174, 0.3);
  filter: blur(calc(70 * var(--k)));
}
.bdstudio-stage__floor-glow {
  left: calc(50% - 450 * var(--k)); top: calc(490 * var(--k));
  width: calc(900 * var(--k)); height: calc(140 * var(--k));
  border-radius: 50%;
  background: rgba(43, 211, 174, 0.35);
  filter: blur(calc(30 * var(--k)));
}
.bdstudio-stage__shadow {
  left: calc(50% + (778.03 - 960) * var(--k)); top: calc(538 * var(--k));
  width: calc(363.93 * var(--k)); height: calc(34 * var(--k));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(calc(8 * var(--k)));
}
.bdstudio-stage__line {
  left: calc(50% - 500 * var(--k)); top: calc(560 * var(--k));
  width: calc(1000 * var(--k)); height: 1px;
  background: linear-gradient(90deg, rgba(43, 211, 174, 0), rgba(43, 211, 174, 0.5) 50%, rgba(43, 211, 174, 0));
}
.bdstudio-stage__box {
  left: calc(50% + (801.77 - 960) * var(--k)); top: calc(120 * var(--k));
  width: calc(316.46 * var(--k)); height: calc(440 * var(--k));
  filter: drop-shadow(0 calc(30 * var(--k)) calc(25 * var(--k)) rgba(11, 13, 20, 0.18));
}
/* Reflection: the box upside down under the floor, 30%, fading out over 150px */
.bdstudio-stage__reflection {
  left: calc(50% + (801.77 - 960) * var(--k)); top: calc(562 * var(--k));
  width: calc(316.46 * var(--k)); height: calc(150 * var(--k));
  overflow: hidden;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}
.bdstudio-stage__reflection img { display: block; width: 100%; height: calc(440 * var(--k)); transform: scaleY(-1); }

/* ---- chip (Figma 864, 706; 194 x 32) ---- */
.bdstudio-chip {
  position: relative;
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(11, 13, 20, 0.28);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(11, 13, 20, 0.12), rgba(11, 13, 20, 0.05));
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.14em;
  color: rgba(11, 13, 20, 0.85);
}

/* ---- light board (Figma 896:3668 at 246.4, 662; 1446.4 x 1184). Its content is centred
   9.6px right of the frame centre, as in Figma. ---- */
.bdstudio-board {
  position: relative;
  margin-top: max(24px, calc(36 * var(--s)));
  translate: calc(9.6 * var(--s)) 0;
}
.bdstudio-board__glows { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; z-index: 0; }
.bdstudio-board__glows i {
  position: absolute;
  left: calc((var(--x) - 723.2) * var(--s));
  top: calc((var(--y) - 112) * var(--s));
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  border-radius: 50%;
  background: rgba(43, 211, 174, 0.14);
  filter: blur(calc(104 * var(--s)));
}
.bdstudio-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.175em;                                    /* 11.2 at 64 */
  margin: 0;
  padding: 0 16px;
  font-size: max(28px, calc(64 * var(--s)));
  font-weight: 700;
  line-height: 1.047;                              /* 67 / 64 */
  letter-spacing: -0.03em;
}
.bdstudio-title__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1em 0.25em; }
.bdstudio-title__hl {
  padding: 0.1em 0.325em 0.15em;                   /* 6.4 / 20.8 / 9.6 */
  border-radius: 0.325em;
  background: #d9f99d;
}
.bdstudio-sub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px max(8px, calc(11.2 * var(--s)));
  margin: max(16px, calc(22.8 * var(--s))) auto 0;
  padding: 0 16px;
  font-size: max(15px, calc(20.8 * var(--s)));
  font-weight: 500;
  line-height: 1.25;
  color: rgba(11, 13, 20, 0.75);
}
.bdstudio-sub__hl {
  padding: 0.25em 0.583em 0.292em;                 /* 4.8 / 11.2 / 5.6 at 19.2 */
  border-radius: 0.5em;
  background: #d9f99d;
  font-size: 0.923em;                              /* 19.2 / 20.8 */
  font-weight: 700;
  line-height: 1.0417;
  color: var(--bds-ink);
}

/* ---- node graph (studio/'s hero graph): drawn in its 1808-unit space, --g = 0.8 Figma px ---- */
.bdstudio-graph {
  --g: max(calc(0.8 * var(--s)), 0.5px);
  position: relative;
  left: 50%;
  width: calc(1808 * var(--g));
  height: calc(667 * var(--g));
  margin-top: max(32px, calc(56 * var(--s)));
  translate: -50% 0;
  text-align: left;
}
.bdstudio-graph > * { position: absolute; margin: 0; }
.bdstudio-graph__links { inset: 0; width: 100%; height: 100%; overflow: visible; }
.bdstudio-graph__links path {
  fill: none;
  stroke: #0b7a62;
  stroke-opacity: 0.55;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
}
.bdstudio-prompt {
  left: calc(584 * var(--g));
  top: 0;
  width: calc(640 * var(--g));
  height: calc(96 * var(--g));
  border: 1px solid rgba(11, 13, 20, 0.06);
  border-radius: calc(28 * var(--g));
  background: #fff;
  box-shadow: 0 calc(20 * var(--g)) calc(22 * var(--g)) rgba(8, 51, 38, 0.16);
}
.bdstudio-prompt > * { position: absolute; margin: 0; }
.bdstudio-prompt__icon {
  left: calc(22 * var(--g));
  top: calc(22 * var(--g));
  display: grid;
  place-items: center;
  width: calc(52 * var(--g));
  height: calc(52 * var(--g));
  border-radius: calc(16 * var(--g));
  background: linear-gradient(135deg, #1fb58f 0%, #0b4f44 71.429%);
}
.bdstudio-prompt__icon img { width: calc(26 * var(--g)); height: calc(26 * var(--g)); }
.bdstudio-prompt__text {
  left: calc(92 * var(--g));
  top: calc(33 * var(--g));
  max-width: calc(421 * var(--g));
  overflow: hidden;
  font-size: calc(22 * var(--g));
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  color: #121714;
}
.bdstudio-prompt__caret { color: #0d9e7d; }
@media (max-width: 639px) { .bdstudio-prompt__text { font-size: calc(20.5 * var(--g)); } }
.bdstudio-prompt__btn {
  left: calc(515 * var(--g));
  top: calc(26.5 * var(--g));
  padding: calc(12 * var(--g)) calc(16 * var(--g));
  border-radius: calc(16 * var(--g));
  background: #121614;
  font-size: calc(15 * var(--g));
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
/* Clip nodes: --x --y --w --h the node (graph units, y from the prompt), --iw --ih the picture,
   --px --py the play button, --ly the label */
.bdstudio-node {
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  width: calc(var(--w) * var(--g));
  height: calc(var(--h) * var(--g));
  overflow: hidden;
  border: 1px solid rgba(11, 13, 20, 0.08);
  border-radius: calc(22 * var(--g));
  background: #fff;
  box-shadow: 0 calc(16 * var(--g)) calc(36 * var(--g)) calc(-8 * var(--g)) rgba(8, 51, 38, 0.12);
}
.bdstudio-node > * { position: absolute; }
.bdstudio-node__img {
  left: calc(5 * var(--g));
  top: calc(5 * var(--g));
  width: calc(var(--iw) * var(--g));
  height: calc(var(--ih) * var(--g));
  border-radius: calc(16 * var(--g));
  object-fit: cover;
}
.bdstudio-node__play {
  left: calc(var(--px) * var(--g));
  top: calc(var(--py) * var(--g));
  width: calc(40 * var(--g));
  height: calc(40 * var(--g));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.bdstudio-node__play img { position: absolute; left: calc(15 * var(--g)); top: calc(12 * var(--g)); width: calc(13 * var(--g)); height: calc(15 * var(--g)); }
.bdstudio-node__ratio {
  left: calc(13 * var(--g));
  top: calc(13 * var(--g));
  padding: calc(6 * var(--g)) calc(12 * var(--g));
  border-radius: 99px;
  background: rgba(18, 22, 20, 0.75);
  font-size: calc(11 * var(--g));
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.bdstudio-node__label {
  left: calc(11 * var(--g));
  top: calc(var(--ly) * var(--g));
  font-size: calc(13 * var(--g));
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: rgba(11, 13, 20, 0.85);
}
.bdstudio-dot {
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  width: calc(12 * var(--g));
  height: calc(12 * var(--g));
  border: calc(3 * var(--g)) solid #0d1512;
  border-radius: 50%;
  background: #0b7a62;
}
.bdstudio-pill {
  left: calc(var(--x) * var(--g));
  top: calc(var(--y) * var(--g));
  padding: calc(10 * var(--g)) calc(16 * var(--g));
  border: 1px solid rgba(11, 13, 20, 0.1);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 calc(8 * var(--g)) calc(10 * var(--g)) rgba(8, 51, 38, 0.08);
  font-size: calc(15 * var(--g));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--bds-ink);
}

/* ---- "One canvas" heading (Figma y 1727.8 / 1816.8) ---- */
.bdstudio-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: max(64px, calc(149.8 * var(--s))) 0 0;
  padding: 0 16px;
}
.bdstudio-head span:first-child {
  font-size: max(32px, calc(76 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: #121614;
}
.bdstudio-head span:last-child {
  margin-top: -0.07em;
  font-family: var(--font-script);
  font-size: max(40px, calc(88 * var(--s)));
  font-weight: 400;
  line-height: 1.24;
  color: #0e9f7e;
}

/* ---- tile grid (Figma x 320, 1280 wide, gap 20; rows 402.66 / 362.25 / 360.45) ----
   Phones: one column. 640–1023: two columns, the two wide tiles span both. 1024+: the Figma rows. */
.bdstudio-grid {
  --gap: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: calc(100% - 32px);
  margin: max(32px, calc(48 * var(--s))) auto 0;
  text-align: left;
}
.bdstudio-bt {
  --tile-w: calc(100cqw - 32px);
  --f: calc(var(--tile-w) / var(--tw));
  position: relative;
  flex: none;
  width: var(--tile-w);
  aspect-ratio: var(--tw) / var(--th);
  min-width: 0;
}
@media (min-width: 640px) {
  .bdstudio-bt { --tile-w: calc((100cqw - 48px) / 2); }
  .bdstudio-bt--wide { --tile-w: calc(100cqw - 32px); }
}
@media (min-width: 1024px) {
  .bdstudio-grid { --gap: calc(20 * var(--s)); width: calc(1280 * var(--s)); }
  .bdstudio-bt, .bdstudio-bt--wide { --tile-w: calc(var(--bw) * var(--s)); }
}

/* ---- the ten tiles (studio/ bento parts, static; titles only, sized to the Bundle frame) ---- */
/* Bento tile 01: Animate any photo (Figma 715:134, 900 x 600)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bdstudio-t01-tile (inset 0), so .bd-studio .bdstudio-t01 keeps only what the shell gives it. */
.bd-studio .bdstudio-t01 .bdstudio-t01-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(146.31deg, #e3fff4 0%, #a8f0d6 35.714%, #5fd3b0 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bd-studio .bdstudio-t01 .bdstudio-t01-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-blob--a { left: calc(403.5 * var(--f)); top: calc(338.5 * var(--f)); width: calc(630 * var(--f)); height: calc(320 * var(--f)); background: rgba(43, 199, 155, 0.55); }
.bd-studio .bdstudio-t01 .bdstudio-t01-blob--b { left: calc(-81.5 * var(--f)); top: calc(398.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(198, 249, 154, 0.6); }

.bd-studio .bdstudio-t01 .bdstudio-t01-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(560 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bd-studio .bdstudio-t01 .bdstudio-t01-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

/* Still photo card, tilted 6deg (box centre at 200.44, 378.28) */
.bd-studio .bdstudio-t01 .bdstudio-t01-still {
  position: absolute;
  left: calc(50.44 * var(--f));
  top: calc(213.28 * var(--f));
  width: calc(300 * var(--f));
  height: calc(330 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
  rotate: 6deg;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-still img {
  position: absolute;
  left: calc(14 * var(--f));
  top: calc(14 * var(--f));
  width: calc(272 * var(--f));
  height: calc(262 * var(--f));
  border-radius: calc(12 * var(--f));
  object-fit: cover;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-still span {
  position: absolute;
  left: calc(16 * var(--f));
  top: calc(290 * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #6b746f;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-pill--still { left: calc(133.35 * var(--f)); top: calc(230.58 * var(--f)); translate: -50% -50%; rotate: 6deg; }
.bd-studio .bdstudio-t01 .bdstudio-t01-arc { position: absolute; left: calc(358.5 * var(--f)); top: calc(208.5 * var(--f)); width: calc(150 * var(--f)); height: calc(80 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-pill--go { left: calc(370.5 * var(--f)); top: calc(178.5 * var(--f)); background: #121614; font-size: calc(14 * var(--f)); color: #d9f99d; }

/* Animated clip */
.bd-studio .bdstudio-t01 .bdstudio-t01-clip {
  position: absolute;
  left: calc(448.5 * var(--f));
  top: calc(218.5 * var(--f));
  width: calc(400 * var(--f));
  height: calc(320 * var(--f));
  border-radius: calc(22 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t01 .bdstudio-t01-frame { position: absolute; top: calc(10 * var(--f)); width: calc(380 * var(--f)); height: calc(300 * var(--f)); border-radius: calc(16 * var(--f)); object-fit: cover; }
.bd-studio .bdstudio-t01 .bdstudio-t01-frame--g1 { left: calc(-32 * var(--f)); opacity: 0.12; }
.bd-studio .bdstudio-t01 .bdstudio-t01-frame--g2 { left: calc(-18 * var(--f)); opacity: 0.12; }
.bd-studio .bdstudio-t01 .bdstudio-t01-frame--g3 { left: calc(-4 * var(--f)); opacity: 0.12; }
.bd-studio .bdstudio-t01 .bdstudio-t01-frame--main { left: calc(10 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-spark { position: absolute; }
.bd-studio .bdstudio-t01 .bdstudio-t01-spark--1 { left: calc(60 * var(--f)); top: calc(60 * var(--f)); width: calc(18 * var(--f)); height: calc(18 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-spark--2 { left: calc(300 * var(--f)); top: calc(90 * var(--f)); width: calc(16 * var(--f)); height: calc(16 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-spark--3 { left: calc(250 * var(--f)); top: calc(40 * var(--f)); width: calc(14 * var(--f)); height: calc(14 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-spark--4 { left: calc(90 * var(--f)); top: calc(230 * var(--f)); width: calc(12 * var(--f)); height: calc(12 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-spark--5 { left: calc(330 * var(--f)); top: calc(240 * var(--f)); width: calc(10 * var(--f)); height: calc(10 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-play {
  position: absolute;
  left: calc(176 * var(--f));
  top: calc(126 * var(--f));
  width: calc(52 * var(--f));
  height: calc(52 * var(--f));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 calc(6 * var(--f)) calc(8 * var(--f)) rgba(0, 0, 0, 0.25));
}
.bd-studio .bdstudio-t01 .bdstudio-t01-play img { position: absolute; left: calc(19.76 * var(--f)); top: calc(16.12 * var(--f)); width: calc(17.68 * var(--f)); height: calc(19.76 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-pill--video { left: calc(24 * var(--f)); top: calc(24 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-track,
.bd-studio .bdstudio-t01 .bdstudio-t01-bar { position: absolute; left: calc(24 * var(--f)); top: calc(292 * var(--f)); height: calc(5 * var(--f)); border-radius: calc(3 * var(--f)); }
.bd-studio .bdstudio-t01 .bdstudio-t01-track { width: calc(352 * var(--f)); background: rgba(255, 255, 255, 0.3); }
.bd-studio .bdstudio-t01 .bdstudio-t01-bar { width: calc(210 * var(--f)); background: #d9f99d; }

.bd-studio .bdstudio-bt .bdstudio-t01-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; }

/* Bento tile 02: Extend any video (Figma 715:171, 440 x 600)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bdstudio-t02-tile (inset 0), so .bd-studio .bdstudio-t02 keeps only what the shell gives it. */
.bd-studio .bdstudio-t02 .bdstudio-t02-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(126.25deg, #e6f3ff 0%, #a9d3ff 35.714%, #5aa6f5 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bd-studio .bdstudio-t02 .bdstudio-t02-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-blob--a { left: calc(196.5 * var(--f)); top: calc(338.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(59, 139, 235, 0.55); }
.bd-studio .bdstudio-t02 .bdstudio-t02-blob--b { left: calc(-81.5 * var(--f)); top: calc(398.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(184, 241, 255, 0.6); }

.bd-studio .bdstudio-t02 .bdstudio-t02-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bd-studio .bdstudio-t02 .bdstudio-t02-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

.bd-studio .bdstudio-t02 .bdstudio-t02-upload,
.bd-studio .bdstudio-t02 .bdstudio-t02-ext {
  position: absolute;
  top: calc(188.5 * var(--f));
  width: calc(176 * var(--f));
  height: calc(250 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-upload { left: calc(34.5 * var(--f)); }
.bd-studio .bdstudio-t02 .bdstudio-t02-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-studio .bdstudio-t02 .bdstudio-t02-ext { left: calc(226.5 * var(--f)); border: calc(4 * var(--f)) dashed #0e9f7e; }
.bd-studio .bdstudio-t02 .bdstudio-t02-ext img { position: absolute; left: calc(-4 * var(--f)); top: calc(-4 * var(--f)); width: calc(176 * var(--f)); height: calc(250 * var(--f)); object-fit: cover; }
.bd-studio .bdstudio-t02 .bdstudio-t02-upload .bdstudio-t02-pill { left: calc(12 * var(--f)); top: calc(12 * var(--f)); font-size: calc(11 * var(--f)); }
.bd-studio .bdstudio-t02 .bdstudio-t02-ext .bdstudio-t02-pill { left: calc(8 * var(--f)); top: calc(8 * var(--f)); font-size: calc(11 * var(--f)); }
.bd-studio .bdstudio-t02 .bdstudio-t02-pill--lime { background: #d9f99d; color: #121614; }
.bd-studio .bdstudio-t02 .bdstudio-t02-seam {
  position: absolute;
  left: calc(200.5 * var(--f));
  top: calc(294.5 * var(--f));
  display: grid;
  place-items: center;
  width: calc(36 * var(--f));
  height: calc(36 * var(--f));
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 calc(4 * var(--f)) calc(5 * var(--f)) rgba(14, 42, 34, 0.2));
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: 1;
  color: #0e9f7e;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-length { position: absolute; left: calc(34.5 * var(--f)); top: calc(468.5 * var(--f)); width: calc(368 * var(--f)); height: calc(40 * var(--f)); }
.bd-studio .bdstudio-t02 .bdstudio-t02-len { position: absolute; top: 0; height: calc(12 * var(--f)); border-radius: calc(6 * var(--f)); }
.bd-studio .bdstudio-t02 .bdstudio-t02-len--up { left: 0; width: calc(140 * var(--f)); background: rgba(18, 22, 20, 0.18); }
.bd-studio .bdstudio-t02 .bdstudio-t02-len--ext { left: calc(144 * var(--f)); width: calc(224 * var(--f)); background: linear-gradient(90deg, #0e9f7e, #7fd8b8); }
.bd-studio .bdstudio-t02 .bdstudio-t02-len-label {
  position: absolute;
  left: 0;
  top: calc(20 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: #121714;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-len-label--ext { left: auto; right: 0; }
.bd-studio .bdstudio-t02 .bdstudio-t02-prompt {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(528.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(48 * var(--f));
  border-radius: calc(16 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-prompt-text {
  position: absolute;
  left: calc(16 * var(--f));
  top: calc(15 * var(--f));
  font-size: calc(14 * var(--f));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t02 .bdstudio-t02-pill--go { left: calc(292 * var(--f)); top: calc(10 * var(--f)); background: #121614; }

.bd-studio .bdstudio-bt .bdstudio-t02-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; }

/* Bento tile 03: Chain clips into scenes (Figma 715:195, 440 x 520)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bdstudio-t03-tile (inset 0), so .bd-studio .bdstudio-t03 keeps only what the shell gives it. */
.bd-studio .bdstudio-t03 .bdstudio-t03-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e6fffb 0%, #a6f1e6 35.714%, #4ccfc2 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bd-studio .bdstudio-t03 .bdstudio-t03-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bd-studio .bdstudio-t03 .bdstudio-t03-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bd-studio .bdstudio-t03 .bdstudio-t03-blob--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(19, 179, 166, 0.55); }
.bd-studio .bdstudio-t03 .bdstudio-t03-blob--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(217, 249, 157, 0.6); }

.bd-studio .bdstudio-t03 .bdstudio-t03-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bd-studio .bdstudio-t03 .bdstudio-t03-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bd-studio .bdstudio-t03 .bdstudio-t03-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

/* Three tilted shots (box centres from Figma's rotated bounds) */
.bd-studio .bdstudio-t03 .bdstudio-t03-shot {
  position: absolute;
  width: calc(180 * var(--f));
  height: calc(124 * var(--f));
  border-radius: calc(16 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t03 .bdstudio-t03-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-studio .bdstudio-t03 .bdstudio-t03-shot .bdstudio-t03-pill { left: calc(10 * var(--f)); top: calc(10 * var(--f)); font-size: calc(11 * var(--f)); }
.bd-studio .bdstudio-t03 .bdstudio-t03-shot--1 { left: calc(29.96 * var(--f)); top: calc(184.63 * var(--f)); rotate: 4deg; }
.bd-studio .bdstudio-t03 .bdstudio-t03-shot--2 { left: calc(132.61 * var(--f)); top: calc(255.32 * var(--f)); rotate: -2deg; }
.bd-studio .bdstudio-t03 .bdstudio-t03-shot--3 { left: calc(224.28 * var(--f)); top: calc(341.6 * var(--f)); rotate: 2deg; }
.bd-studio .bdstudio-t03 .bdstudio-t03-link {
  position: absolute;
  width: calc(38 * var(--f));
  height: calc(38 * var(--f));
  border: calc(3 * var(--f)) solid #fff;
  border-radius: 50%;
  background: #d9f99d;
  filter: drop-shadow(0 calc(4 * var(--f)) calc(5 * var(--f)) rgba(14, 42, 34, 0.2));
}
.bd-studio .bdstudio-t03 .bdstudio-t03-link img { position: absolute; left: calc(6 * var(--f)); top: calc(6 * var(--f)); width: calc(20 * var(--f)); height: calc(20 * var(--f)); }
.bd-studio .bdstudio-t03 .bdstudio-t03-link--1 { left: calc(198.5 * var(--f)); top: calc(234.5 * var(--f)); }
.bd-studio .bdstudio-t03 .bdstudio-t03-link--2 { left: calc(294.5 * var(--f)); top: calc(314.5 * var(--f)); }
.bd-studio .bdstudio-t03 .bdstudio-t03-pill--note { left: calc(34.5 * var(--f)); top: calc(468.5 * var(--f)); background: #121614; }

.bd-studio .bdstudio-bt .bdstudio-t03-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Bento tile 04: One photo → a video ad (Figma 715:222, 440 x 520)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bdstudio-t04-tile (inset 0), so .bd-studio .bdstudio-t04 keeps only what the shell gives it. */
.bd-studio .bdstudio-t04 .bdstudio-t04-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #eaf7ff 0%, #b8e4ff 35.714%, #6cc3f2 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bd-studio .bdstudio-t04 .bdstudio-t04-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bd-studio .bdstudio-t04 .bdstudio-t04-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bd-studio .bdstudio-t04 .bdstudio-t04-blob--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(46, 159, 224, 0.55); }
.bd-studio .bdstudio-t04 .bdstudio-t04-blob--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(198, 249, 154, 0.6); }

.bd-studio .bdstudio-t04 .bdstudio-t04-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bd-studio .bdstudio-t04 .bdstudio-t04-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bd-studio .bdstudio-t04 .bdstudio-t04-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

.bd-studio .bdstudio-t04 .bdstudio-t04-ad {
  position: absolute;
  left: calc(128.5 * var(--f));
  top: calc(168.5 * var(--f));
  width: calc(290 * var(--f));
  height: calc(300 * var(--f));
  border-radius: calc(24 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t04 .bdstudio-t04-ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-studio .bdstudio-t04 .bdstudio-t04-ad-fade { position: absolute; left: 0; top: calc(160 * var(--f)); width: 100%; height: calc(140 * var(--f)); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); }
.bd-studio .bdstudio-t04 .bdstudio-t04-ad-line {
  position: absolute;
  left: calc(18 * var(--f));
  top: calc(224 * var(--f));
  margin: 0;
  font-size: calc(20 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bd-studio .bdstudio-t04 .bdstudio-t04-pill--shop { left: calc(18 * var(--f)); top: calc(256 * var(--f)); background: #d9f99d; font-size: calc(13 * var(--f)); color: #121614; }
.bd-studio .bdstudio-t04 .bdstudio-t04-pill--sponsored { left: calc(18 * var(--f)); top: calc(16 * var(--f)); background: rgba(255, 255, 255, 0.9); font-size: calc(10 * var(--f)); color: #121614; }
/* Source photo, tilted 8deg (box centre at 78.38, 209.65) */
.bd-studio .bdstudio-t04 .bdstudio-t04-source {
  position: absolute;
  left: calc(30.38 * var(--f));
  top: calc(154.65 * var(--f));
  width: calc(96 * var(--f));
  height: calc(110 * var(--f));
  border-radius: calc(14 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
  rotate: 8deg;
}
.bd-studio .bdstudio-t04 .bdstudio-t04-source img { position: absolute; left: calc(6 * var(--f)); top: calc(6 * var(--f)); width: calc(84 * var(--f)); height: calc(84 * var(--f)); border-radius: calc(10 * var(--f)); object-fit: cover; }
.bd-studio .bdstudio-t04 .bdstudio-t04-source span {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(92 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.bd-studio .bdstudio-bt .bdstudio-t04-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Bento tile 05: Drop your cast into any clip (Figma 715:238, 440 x 520)
   Drawn in the tile's Figma pixels: calc(N * var(--f)), one Figma px of this tile (--f comes from .bt).
   The card itself is .bdstudio-t05-tile (inset 0), so .bd-studio .bdstudio-t05 keeps only what the shell gives it. */
.bd-studio .bdstudio-t05 .bdstudio-t05-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e8fbff 0%, #b2ecf7 35.714%, #6ad2ea 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
  -webkit-user-select: none;
          user-select: none;
}
.bd-studio .bdstudio-t05 .bdstudio-t05-tile img { display: block; -webkit-user-drag: none; }
/* Soft glows (Figma blurred ellipses, blur 50) */
.bd-studio .bdstudio-t05 .bdstudio-t05-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(50 * var(--f)));
  pointer-events: none;
  z-index: -1;
}
.bd-studio .bdstudio-t05 .bdstudio-t05-blob--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(34, 181, 216, 0.55); }
.bd-studio .bdstudio-t05 .bdstudio-t05-blob--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(168, 240, 214, 0.6); }

.bd-studio .bdstudio-t05 .bdstudio-t05-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #121614;
}
.bd-studio .bdstudio-t05 .bdstudio-t05-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  font-weight: 400;
  line-height: 1.45;
  color: #4a544f;
}
/* Pills (dark glass, light, lime) */
.bd-studio .bdstudio-t05 .bdstudio-t05-pill {
  position: absolute;
  display: flex;
  align-items: center;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}

.bd-studio .bdstudio-t05 .bdstudio-t05-cast {
  position: absolute;
  left: calc(88.5 * var(--f));
  top: calc(168.5 * var(--f));
  width: calc(260 * var(--f));
  height: calc(190 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t05 .bdstudio-t05-cast p { position: absolute; left: calc(62 * var(--f)); margin: 0; line-height: normal; white-space: nowrap; }
.bd-studio .bdstudio-t05 .bdstudio-t05-cast .bdstudio-t05-cast-label { left: calc(16 * var(--f)); top: calc(14 * var(--f)); font-size: calc(10 * var(--f)); font-weight: 700; letter-spacing: 0.1em; color: #6b746f; }
.bd-studio .bdstudio-t05 .bdstudio-t05-cast-hl { position: absolute; left: calc(8 * var(--f)); top: calc(32 * var(--f)); width: calc(244 * var(--f)); height: calc(46 * var(--f)); border-radius: calc(12 * var(--f)); background: rgba(14, 159, 126, 0.12); }
.bd-studio .bdstudio-t05 .bdstudio-t05-av { position: absolute; left: calc(16 * var(--f)); width: calc(36 * var(--f)); height: calc(36 * var(--f)); border-radius: 50%; object-fit: cover; }
.bd-studio .bdstudio-t05 .bdstudio-t05-av--1 { top: calc(36 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-av--2 { top: calc(86 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-av--3 { top: calc(136 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-name { font-size: calc(14 * var(--f)); font-weight: 700; color: #121614; }
.bd-studio .bdstudio-t05 .bdstudio-t05-sub { font-size: calc(11 * var(--f)); font-weight: 500; color: #6b746f; }
.bd-studio .bdstudio-t05 .bdstudio-t05-name--1 { top: calc(37 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-sub--1  { top: calc(55 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-name--2 { top: calc(87 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-sub--2  { top: calc(105 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-name--3 { top: calc(137 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-sub--3  { top: calc(155 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-prompt {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(388.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(64 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  overflow: hidden;
}
.bd-studio .bdstudio-t05 .bdstudio-t05-tokens { position: absolute; left: calc(14 * var(--f)); top: calc(16 * var(--f)); display: flex; align-items: center; gap: calc(6 * var(--f)); }
.bd-studio .bdstudio-t05 .bdstudio-t05-tok {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--f));
  padding: calc(3 * var(--f)) calc(8 * var(--f)) calc(3 * var(--f)) calc(3 * var(--f));
  border-radius: calc(99 * var(--f));
  background: rgba(14, 159, 126, 0.14);
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #0b6f57;
}
.bd-studio .bdstudio-t05 .bdstudio-t05-tok img { width: calc(22 * var(--f)); height: calc(22 * var(--f)); border-radius: 50%; object-fit: cover; }
.bd-studio .bdstudio-t05 .bdstudio-t05-word { font-size: calc(14 * var(--f)); font-weight: 500; line-height: normal; white-space: nowrap; }
.bd-studio .bdstudio-t05 .bdstudio-t05-caret { display: block; width: calc(2 * var(--f)); height: calc(18 * var(--f)); background: #0e9f7e; }

.bd-studio .bdstudio-bt .bdstudio-t05-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Tile 06 — 7 directed camera styles (Figma 716:128, 900 x 520, dark).
   Seven style cards with their camera path drawn on the still; Action is selected and
   shown in the preview bar. While on screen the dotted camera paths sweep (a bright band
   runs along each one, card after card) and the Generate pill pulses. */
.bd-studio .bdstudio-t06 .bdstudio-t06-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.08);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(149.98deg, #0f1b17 0%, #0d1512 35.714%, #123026 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #fff;
}
.bd-studio .bdstudio-t06 .bdstudio-t06-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(calc(50 * var(--f)));
}
.bd-studio .bdstudio-t06 .bdstudio-t06-glow--a { left: calc(498.5 * var(--f)); top: calc(278.5 * var(--f)); width: calc(460 * var(--f)); height: calc(260 * var(--f)); background: rgba(14, 159, 126, 0.35); }
.bd-studio .bdstudio-t06 .bdstudio-t06-glow--b { left: calc(-81.5 * var(--f)); top: calc(378.5 * var(--f)); width: calc(300 * var(--f)); height: calc(200 * var(--f)); background: rgba(217, 249, 157, 0.12); }
.bd-studio .bdstudio-t06 .bdstudio-t06-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bd-studio .bdstudio-t06 .bdstudio-t06-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(560 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

/* style cards: 108 x 168, still 108 x 130 under a 25% black wash, path 108 x 100 at y 15 */
.bd-studio .bdstudio-t06 .bdstudio-t06-style {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(194.5 * var(--f));
  width: calc(108 * var(--f));
  height: calc(168 * var(--f));
  overflow: hidden;
  border-radius: calc(18 * var(--f));
  background: #1a2420;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bd-studio .bdstudio-t06 .bdstudio-t06-shot {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(108 * var(--f));
  height: calc(130 * var(--f));
  object-fit: cover;
}
.bd-studio .bdstudio-t06 .bdstudio-t06-style::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(108 * var(--f));
  height: calc(130 * var(--f));
  background: rgba(0, 0, 0, 0.25);
}
.bd-studio .bdstudio-t06 .bdstudio-t06-path {
  position: absolute;
  z-index: 1;
  left: 0;
  top: calc(15 * var(--f));
  display: block;
  width: calc(108 * var(--f));
  height: calc(100 * var(--f));
}
.bd-studio .bdstudio-t06 .bdstudio-t06-name {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(140 * var(--f));
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t06 .bdstudio-t06-name--sm { font-size: calc(11 * var(--f)); }

/* selected card: 108 x 188, 3px lime border, 10px higher; contents sit 3px in from the border */
.bd-studio .bdstudio-t06 .bdstudio-t06-style--on {
  top: calc(184.5 * var(--f));
  height: calc(188 * var(--f));
  border: calc(3 * var(--f)) solid #d9f99d;
}
.bd-studio .bdstudio-t06 .bdstudio-t06-style--on .bdstudio-t06-shot,
.bd-studio .bdstudio-t06 .bdstudio-t06-style--on::after { left: calc(-3 * var(--f)); top: calc(-3 * var(--f)); }
.bd-studio .bdstudio-t06 .bdstudio-t06-style--on .bdstudio-t06-path { left: calc(-3 * var(--f)); top: calc(12 * var(--f)); }
.bd-studio .bdstudio-t06 .bdstudio-t06-style--on .bdstudio-t06-name { left: calc(7 * var(--f)); top: calc(137 * var(--f)); }
.bd-studio .bdstudio-t06 .bdstudio-t06-sel {
  position: absolute;
  left: calc(7 * var(--f));
  top: calc(157 * var(--f));
  font-size: calc(10 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #d9f99d;
}

/* preview bar: 828 x 110 */
.bd-studio .bdstudio-t06 .bdstudio-t06-preview {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(382.5 * var(--f));
  width: calc(828 * var(--f));
  height: calc(110 * var(--f));
  overflow: hidden;
  border-radius: calc(20 * var(--f));
  background: #1a2420;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bd-studio .bdstudio-t06 .bdstudio-t06-preview__img {
  position: absolute;
  left: calc(10 * var(--f));
  top: calc(10 * var(--f));
  display: block;
  width: calc(180 * var(--f));
  height: calc(90 * var(--f));
  object-fit: cover;
  border-radius: calc(14 * var(--f));
}
.bd-studio .bdstudio-t06 .bdstudio-t06-preview__title {
  position: absolute;
  left: calc(208 * var(--f));
  top: calc(22 * var(--f));
  margin: 0;
  font-size: calc(18 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t06 .bdstudio-t06-preview__text {
  position: absolute;
  left: calc(208 * var(--f));
  top: calc(50 * var(--f));
  margin: 0;
  font-size: calc(14 * var(--f));
  line-height: normal;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.7);
}
.bd-studio .bdstudio-t06 .bdstudio-t06-generate {
  position: absolute;
  left: calc(714 * var(--f));
  top: calc(36 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #d9f99d;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #121614;
}

.bd-studio .bdstudio-bt .bdstudio-t06-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; }

/* Tile 07 — Reactions, memes & talking characters (Figma 716:182, 440 x 520).
   A vertical meme clip with its caption, a speech bubble and three reaction pills.
   While on screen the pills float out of step and the speech bubble bobs. */
.bd-studio .bdstudio-t07 .bdstudio-t07-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #f3ffe0 0%, #cff79c 35.714%, #7fe0a0 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bd-studio .bdstudio-t07 .bdstudio-t07-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bd-studio .bdstudio-t07 .bdstudio-t07-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(43, 199, 155, 0.55); }
.bd-studio .bdstudio-t07 .bdstudio-t07-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(233, 255, 138, 0.6); }
.bd-studio .bdstudio-t07 .bdstudio-t07-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bd-studio .bdstudio-t07 .bdstudio-t07-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(102.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}
.bd-studio .bdstudio-t07 .bdstudio-t07-meme {
  position: absolute;
  left: calc(108.5 * var(--f));
  top: calc(195.5 * var(--f));
  width: calc(220 * var(--f));
  height: calc(330 * var(--f));
  overflow: hidden;
  border-radius: calc(24 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bd-studio .bdstudio-t07 .bdstudio-t07-meme img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-studio .bdstudio-t07 .bdstudio-t07-meme__cap {
  position: absolute;
  left: 50%;
  top: calc(16 * var(--f));
  translate: -50% 0;
  margin: 0;
  font-size: calc(17 * var(--f));
  font-weight: 700;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  /* meme caption outline, as in the Figma render */
  -webkit-text-stroke: calc(2.4 * var(--f)) #000;
  paint-order: stroke fill;
}
.bd-studio .bdstudio-t07 .bdstudio-t07-speech {
  position: absolute;
  left: calc(258.5 * var(--f));
  top: calc(365.5 * var(--f));
  width: calc(173 * var(--f));
  height: calc(62 * var(--f));
  border-radius: calc(18 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bd-studio .bdstudio-t07 .bdstudio-t07-speech p {
  position: absolute;
  left: calc(14 * var(--f));
  top: calc(var(--y) * var(--f));
  margin: 0;
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t07 .bdstudio-t07-pill {
  position: absolute;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(9 * var(--f)) rgba(14, 42, 34, 0.15));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t07 .bdstudio-t07-pill--a { left: calc(28.5 * var(--f)); top: calc(325.5 * var(--f)); }
.bd-studio .bdstudio-t07 .bdstudio-t07-pill--b { left: calc(298.5 * var(--f)); top: calc(445.5 * var(--f)); }
.bd-studio .bdstudio-t07 .bdstudio-t07-pill--c { left: calc(34.5 * var(--f)); top: calc(465.5 * var(--f)); }
.bd-studio .bdstudio-t07 .bdstudio-t07-heart { color: #e5383b; }

.bd-studio .bdstudio-bt .bdstudio-t07-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Tile 08 — Custom B-roll & cutaways (Figma 716:199, 440 x 520).
   A film timeline with an empty "Insert" gap and the generated cutaway clip above it.
   While on screen the arrow nudges down, then the clip drops into the gap (it shrinks and
   straightens to fit), holds there, fades and comes back to its Figma spot. */
.bd-studio .bdstudio-t08 .bdstudio-t08-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e9f1ff 0%, #b7cfff 35.714%, #6e9bf5 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bd-studio .bdstudio-t08 .bdstudio-t08-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bd-studio .bdstudio-t08 .bdstudio-t08-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(61, 116, 232, 0.55); }
.bd-studio .bdstudio-t08 .bdstudio-t08-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(169, 232, 255, 0.6); }
.bd-studio .bdstudio-t08 .bdstudio-t08-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bd-studio .bdstudio-t08 .bdstudio-t08-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}
.bd-studio .bdstudio-t08 .bdstudio-t08-timeline {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(358.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(90 * var(--f));
  border-radius: calc(16 * var(--f));
  background: rgba(255, 255, 255, 0.7);
}
.bd-studio .bdstudio-t08 .bdstudio-t08-shot {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(8 * var(--f));
  display: block;
  width: calc(80 * var(--f));
  height: calc(74 * var(--f));
  object-fit: cover;
  border-radius: calc(10 * var(--f));
}
.bd-studio .bdstudio-t08 .bdstudio-t08-gap {
  position: absolute;
  left: calc(184 * var(--f));
  top: calc(8 * var(--f));
  width: calc(88 * var(--f));
  height: calc(74 * var(--f));
  box-sizing: border-box;
  border: calc(2 * var(--f)) dashed #0e9f7e;
  border-radius: calc(10 * var(--f));
  background: rgba(14, 159, 126, 0.08);
}
/* the clip: 170 x 120 with a 3px lime border, turned 5deg; its box centre is Figma's (283.95, 255.68) */
.bd-studio .bdstudio-t08 .bdstudio-t08-clip {
  position: absolute;
  z-index: 1;
  left: calc(198.95 * var(--f));
  top: calc(195.68 * var(--f));
  width: calc(170 * var(--f));
  height: calc(120 * var(--f));
  box-sizing: border-box;
  overflow: hidden;
  border: calc(3 * var(--f)) solid #d9f99d;
  border-radius: calc(16 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  rotate: 5deg;
}
.bd-studio .bdstudio-t08 .bdstudio-t08-clip img {
  position: absolute;
  left: calc(-3 * var(--f));
  top: calc(-3 * var(--f));
  display: block;
  width: calc(170 * var(--f));
  height: calc(120 * var(--f));
  object-fit: cover;
}
.bd-studio .bdstudio-t08 .bdstudio-t08-clip__pill {
  position: absolute;
  left: calc(7 * var(--f));
  top: calc(7 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #d9f99d;
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t08 .bdstudio-t08-arrow {
  position: absolute;
  left: calc(254.5 * var(--f));
  top: calc(310.5 * var(--f));
  display: block;
  width: calc(24 * var(--f));
  height: calc(44 * var(--f));
}
.bd-studio .bdstudio-t08 .bdstudio-t08-label {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(454.5 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: #121714;
}

.bd-studio .bdstudio-bt .bdstudio-t08-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Tile 09 — Any shape, any length, any model (Figma 716:220, 440 x 520).
   A clip settings card: aspect (9:16 picked), a length slider at 10s and the model picker.
   While on screen the slider knob drags along the track and the "10s" pill follows it,
   counting the seconds (js: Studio tile 09). */
.bd-studio .bdstudio-t09 .bdstudio-t09-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e3fff4 0%, #b0f2da 35.714%, #62d6b4 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bd-studio .bdstudio-t09 .bdstudio-t09-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(34, 184, 142, 0.55); }
.bd-studio .bdstudio-t09 .bdstudio-t09-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(217, 249, 157, 0.6); }
.bd-studio .bdstudio-t09 .bdstudio-t09-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(102.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-controls {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(195.5 * var(--f));
  width: calc(368 * var(--f));
  height: calc(300 * var(--f));
  overflow: hidden;
  border-radius: calc(22 * var(--f));
  background: #fff;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
}
.bd-studio .bdstudio-t09 .bdstudio-t09-label {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(var(--y) * var(--f));
  margin: 0;
  font-size: calc(13 * var(--f));
  font-weight: 600;
  line-height: normal;
  color: #6b746f;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-aspect {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(40 * var(--f));
  width: calc(96 * var(--f));
  height: calc(58 * var(--f));
  box-sizing: border-box;
  border-radius: calc(14 * var(--f));
  background: rgba(18, 22, 20, 0.04);
}
.bd-studio .bdstudio-t09 .bdstudio-t09-aspect--on {
  border: calc(2 * var(--f)) solid #0e9f7e;
  background: rgba(14, 159, 126, 0.12);
}
.bd-studio .bdstudio-t09 .bdstudio-t09-shape {
  position: absolute;
  left: calc(var(--l) * var(--f));
  top: calc(var(--t) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  box-sizing: border-box;
  border: calc(2 * var(--f)) solid rgba(18, 22, 20, 0.5);
  border-radius: calc(4 * var(--f));
}
.bd-studio .bdstudio-t09 .bdstudio-t09-ratio {
  position: absolute;
  left: calc(var(--l) * var(--f));
  top: calc(var(--t) * var(--f));
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-aspect--on .bdstudio-t09-shape { border-color: #0e9f7e; }
.bd-studio .bdstudio-t09 .bdstudio-t09-aspect--on .bdstudio-t09-ratio { color: #0b6f57; }

/* slider: track 328 at x 20, fill 205 wide, knob 24 at x 213, pill at x 208 */
.bd-studio .bdstudio-t09 .bdstudio-t09-track,
.bd-studio .bdstudio-t09 .bdstudio-t09-fill {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(158 * var(--f));
  height: calc(8 * var(--f));
  border-radius: calc(4 * var(--f));
}
.bd-studio .bdstudio-t09 .bdstudio-t09-track { width: calc(328 * var(--f)); background: rgba(18, 22, 20, 0.08); }
.bd-studio .bdstudio-t09 .bdstudio-t09-fill { width: calc(205 * var(--f)); background: #0e9f7e; }
.bd-studio .bdstudio-t09 .bdstudio-t09-knob {
  position: absolute;
  left: calc(213 * var(--f));
  top: calc(150 * var(--f));
  width: calc(24 * var(--f));
  height: calc(24 * var(--f));
  box-sizing: border-box;
  border: calc(4 * var(--f)) solid #0e9f7e;
  border-radius: 50%;
  background: #fff;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-value {
  position: absolute;
  left: calc(208 * var(--f));
  top: calc(116 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #121614;
  font-size: calc(12 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-tick {
  position: absolute;
  left: calc(var(--x) * var(--f));
  top: calc(174 * var(--f));
  font-size: calc(11 * var(--f));
  font-weight: 500;
  line-height: normal;
  color: #6b746f;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-model {
  position: absolute;
  left: calc(20 * var(--f));
  top: calc(228 * var(--f));
  width: calc(328 * var(--f));
  height: calc(52 * var(--f));
  box-sizing: border-box;
  border: calc(1 * var(--f)) solid rgba(18, 22, 20, 0.1);
  border-radius: calc(14 * var(--f));
  background: rgba(18, 22, 20, 0.04);
}
.bd-studio .bdstudio-t09 .bdstudio-t09-model__dot {
  position: absolute;
  left: calc(11 * var(--f));
  top: calc(11 * var(--f));
  width: calc(28 * var(--f));
  height: calc(28 * var(--f));
  border-radius: calc(8 * var(--f));
  background: linear-gradient(135deg, #1fb58f 0%, #0b4f44 71.429%);
}
.bd-studio .bdstudio-t09 .bdstudio-t09-model__name,
.bd-studio .bdstudio-t09 .bdstudio-t09-model__caret {
  position: absolute;
  top: calc(15 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t09 .bdstudio-t09-model__name { left: calc(49 * var(--f)); font-size: calc(15 * var(--f)); }
.bd-studio .bdstudio-t09 .bdstudio-t09-model__caret { left: calc(303 * var(--f)); font-size: calc(14 * var(--f)); color: #6b746f; }

.bd-studio .bdstudio-bt .bdstudio-t09-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Tile 10 — Every take saved (Figma 716:249, 440 x 520).
   Three takes stacked as a fanned pile; the front one (lime pill, green check) is the pick.
   While on screen the takes swap: every few seconds the front take slides out and goes to
   the back of the pile, the others move forward (js: Studio tile 10). The pile's three
   spots (back / middle / front) are Figma's, by data-slot 0 / 1 / 2. */
.bd-studio .bdstudio-t10 .bdstudio-t10-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: calc(1.5 * var(--f)) solid rgba(255, 255, 255, 0.7);
  border-radius: calc(44 * var(--f));
  background: linear-gradient(130.24deg, #e6f5ff 0%, #abddfb 35.714%, #5db8ec 71.429%);
  box-shadow: 0 calc(24 * var(--f)) calc(50 * var(--f)) calc(-18 * var(--f)) rgba(14, 42, 34, 0.08);
  color: #121614;
}
.bd-studio .bdstudio-t10 .bdstudio-t10-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(calc(50 * var(--f))); }
.bd-studio .bdstudio-t10 .bdstudio-t10-glow--a { left: calc(196.5 * var(--f)); top: calc(258.5 * var(--f)); width: calc(308 * var(--f)); height: calc(320 * var(--f)); background: rgba(44, 147, 216, 0.55); }
.bd-studio .bdstudio-t10 .bdstudio-t10-glow--b { left: calc(-81.5 * var(--f)); top: calc(318.5 * var(--f)); width: calc(320 * var(--f)); height: calc(240 * var(--f)); background: rgba(189, 245, 228, 0.6); }
.bd-studio .bdstudio-t10 .bdstudio-t10-title {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(32.5 * var(--f));
  margin: 0;
  font-size: calc(28 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bd-studio .bdstudio-t10 .bdstudio-t10-text {
  position: absolute;
  left: calc(34.5 * var(--f));
  top: calc(75.5 * var(--f));
  width: calc(368 * var(--f));
  margin: 0;
  font-size: calc(16 * var(--f));
  line-height: 1.45;
  color: #4a544f;
}

/* takes: 250 x 200 cards; the still is drawn at 200% and shifted (-54%, -76%) as in Figma */
.bd-studio .bdstudio-t10 .bdstudio-t10-take {
  position: absolute;
  left: calc(var(--cx) * var(--f) - 125 * var(--f));
  top: calc(var(--cy) * var(--f) - 100 * var(--f));
  width: calc(250 * var(--f));
  height: calc(200 * var(--f));
  overflow: hidden;
  border-radius: calc(18 * var(--f));
  background: #0d1512;
  box-shadow: 0 calc(2 * var(--f)) calc(6 * var(--f)) rgba(14, 42, 34, 0.05), 0 calc(20 * var(--f)) calc(40 * var(--f)) calc(-10 * var(--f)) rgba(14, 42, 34, 0.16);
  rotate: var(--r);
}
.bd-studio .bdstudio-t10 .bdstudio-t10-take[data-slot="0"] { --cx: 172.36; --cy: 281.02; --r: 6deg; z-index: 1; }
.bd-studio .bdstudio-t10 .bdstudio-t10-take[data-slot="1"] { --cx: 209.93; --cy: 294.80; --r: 2deg; z-index: 2; }
.bd-studio .bdstudio-t10 .bdstudio-t10-take[data-slot="2"] { --cx: 248.56; --cy: 305.83; --r: -3deg; z-index: 3; }
.bd-studio .bdstudio-t10 .bdstudio-t10-take img {
  position: absolute;
  left: -54%;
  top: -76%;
  display: block;
  width: 200%;
  height: 200%;
  max-width: none;
  object-fit: cover;
}
.bd-studio .bdstudio-t10 .bdstudio-t10-take__pill {
  position: absolute;
  left: calc(12 * var(--f));
  top: calc(12 * var(--f));
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: rgba(18, 22, 20, 0.7);
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bd-studio .bdstudio-t10 .bdstudio-t10-take[data-slot="2"] .bdstudio-t10-take__pill { background: #d9f99d; color: #121614; }

.bd-studio .bdstudio-t10 .bdstudio-t10-check {
  position: absolute;
  z-index: 4;
  left: calc(348.5 * var(--f));
  top: calc(230.5 * var(--f));
  display: block;
  width: calc(34 * var(--f));
  height: calc(34 * var(--f));
}
.bd-studio .bdstudio-t10 .bdstudio-t10-pill {
  position: absolute;
  z-index: 4;
  padding: calc(6 * var(--f)) calc(12 * var(--f));
  border-radius: 99px;
  background: #fff;
  font-size: calc(13 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-studio .bdstudio-t10 .bdstudio-t10-pill--swap { left: calc(298.5 * var(--f)); top: calc(168.5 * var(--f)); filter: drop-shadow(0 calc(8 * var(--f)) calc(9 * var(--f)) rgba(14, 42, 34, 0.15)); }
.bd-studio .bdstudio-t10 .bdstudio-t10-pill--send { left: calc(34.5 * var(--f)); top: calc(438.5 * var(--f)); padding-block: calc(10 * var(--f)); background: #121614; color: #fff; }
.bd-studio .bdstudio-t10 .bdstudio-t10-pill--dl { left: calc(175.5 * var(--f)); top: calc(438.5 * var(--f)); padding-block: calc(10 * var(--f)); }

.bd-studio .bdstudio-bt .bdstudio-t10-title { left: calc(36 * var(--f)); top: calc(34 * var(--f)); font-size: calc(36.4 * var(--f)); line-height: 1.1; letter-spacing: -0.02em; width: calc(368 * var(--f)); white-space: normal; }

/* Phones: the two wide tiles (01, 06) are drawn 900 wide, so their titles would shrink to ~14px.
   Below 640px the title gets a readable fixed size and the art under it moves down 64px
   (the tile grows by the same amount). */
@media (max-width: 639px) {
  .bd-studio .bdstudio-bt--wide { aspect-ratio: auto; height: calc(var(--th) * var(--f) + 64px); }
  .bd-studio .bdstudio-t01 .bdstudio-t01-tile > :not(.bdstudio-t01-title):not(.bdstudio-t01-blob),
  .bd-studio .bdstudio-t06 .bdstudio-t06-card > :not(.bdstudio-t06-title):not(.bdstudio-t06-glow) { margin-top: 64px; }
  .bd-studio .bdstudio-t01 .bdstudio-t01-title,
  .bd-studio .bdstudio-t06 .bdstudio-t06-title { left: 16px; top: 16px; font-size: 19px; }
}

/* ---- part: agent ---- */
/* ============ 07 PART 5 — AGENT FEATURES (Figma 899:128, 1920 x 3382, dark) ============
   Sized from the 1920 frame: --s is one Figma px (1px at 1920 and wider). Phones get readable
   floors with max(...). Nothing in this section moves (Bundle rule: features are still). */
.bd-agent {
  --s: min(1px, 100cqw / 1920);
  --k: max(var(--s), 0.5px);                       /* stage: never below half size */
  --bda-bg: #06070a;
  --bda-glass-in: inset 0 -2.52px 5.04px rgba(0, 0, 0, 0.3), inset 0 -8.4px 16.8px rgba(255, 255, 255, 0.1), inset 0 1.68px 1.68px rgba(255, 255, 255, 0.45);
  position: relative;
  container-type: inline-size;
  overflow-x: clip;
  padding-bottom: max(64px, calc(160 * var(--s)));
  background: var(--bda-bg);
  color: #fff;
  text-align: center;
}
/* Hero top light (Figma: 1500 x 520 at 210, 296; white 9%, blur 100) */
.bdagent-toplight {
  position: absolute;
  left: calc(50% - 750 * var(--s));
  top: calc(296 * var(--s));
  width: calc(1500 * var(--s));
  height: calc(520 * var(--s));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  filter: blur(calc(100 * var(--s)));
  pointer-events: none;
}

/* ---- box on its floor (Figma y 0–712; x positions are offsets from the frame centre, 960) ---- */
.bdagent-stage { position: relative; height: calc(706 * var(--k)); pointer-events: none; }
.bdagent-stage > * { position: absolute; display: block; max-width: none; }
.bdagent-stage__glow {
  left: calc(50% - 550 * var(--k)); top: calc(230 * var(--k));
  width: calc(1100 * var(--k)); height: calc(520 * var(--k));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(calc(70 * var(--k)));
}
.bdagent-stage__floor-glow {
  left: calc(50% - 450 * var(--k)); top: calc(490 * var(--k));
  width: calc(900 * var(--k)); height: calc(140 * var(--k));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(calc(30 * var(--k)));
}
.bdagent-stage__shadow {
  left: calc(50% + (705.12 - 960) * var(--k)); top: calc(538 * var(--k));
  width: calc(509.76 * var(--k)); height: calc(34 * var(--k));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  filter: blur(calc(8 * var(--k)));
}
.bdagent-stage__line {
  left: calc(50% - 500 * var(--k)); top: calc(560 * var(--k));
  width: calc(1000 * var(--k)); height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0));
}
.bdagent-stage__box {
  left: calc(50% + (738.37 - 960) * var(--k)); top: calc(120 * var(--k));
  width: calc(443.27 * var(--k)); height: calc(440 * var(--k));
  object-fit: cover;
  filter: drop-shadow(0 calc(30 * var(--k)) calc(25 * var(--k)) rgba(0, 0, 0, 0.6));
}
.bdagent-stage__reflection {
  left: calc(50% + (738.37 - 960) * var(--k)); top: calc(562 * var(--k));
  width: calc(443.27 * var(--k)); height: calc(150 * var(--k));
  overflow: hidden;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
          mask-image: linear-gradient(180deg, #000, transparent);
}
.bdagent-stage__reflection img { display: block; width: 100%; height: calc(440 * var(--k)); object-fit: cover; transform: scaleY(-1); }

/* ---- chip (Figma 864, 706; 194 x 32) ---- */
.bdagent-chip {
  position: relative;
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- liquid-glass boxes (headline highlight, icon tile) ---- */
.bdagent-glass {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 100%);
  box-shadow: var(--bda-glass-in), 0 0.25em 0.5em -0.125em rgba(0, 0, 0, 0.55);
}
.bdagent-glass--hl {                               /* "Chatting": 305.76 x 90.72 at 67.2 */
  display: inline-flex;
  align-items: center;
  height: 1.35em;
  padding: 0 0.2875em;
  border-width: 0.0125em;
  border-radius: 0.4em;
  line-height: 1;
  color: #fff;
}

/* ---- hero headline + sub (Figma hero y 278 / 476.8) ---- */
.bdagent-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: max(24px, calc(36 * var(--s))) 0 0;
  padding: 0 16px;
  font-size: max(28px, calc(67.2 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.bdagent-title__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1em 0.225em; }
.bdagent-title__line--dim { gap: 0.1em 0.25em; margin-top: -0.025em; color: rgba(255, 255, 255, 0.55); }
/* Agent icon in its glass tile (80.64 = 1.2em; icon 55.44), the first frame of the Figma icon set */
.bdagent-icon {
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  overflow: hidden;
  border: 0.01875em solid rgba(255, 255, 255, 0.7);
  border-radius: 0.375em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
}
.bdagent-icon img {
  position: absolute;
  left: 0.16875em;
  top: 0.16875em;
  width: 0.825em;
  height: 0.825em;
  border-radius: 0.25em;
  object-fit: cover;
}
.bdagent-icon__spec {
  position: absolute;
  left: 0.20625em;
  top: 0.04375em;
  width: 0.75em;
  height: 0.1em;
  border-radius: 0.05em;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
  filter: blur(2.1px);
}
.bdagent-sub {
  position: relative;
  margin: max(14px, calc(25.76 * var(--s))) auto 0;
  padding: 0 16px;
  font-size: max(16px, calc(22 * var(--s)));
  line-height: 1.27;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- illustration (Figma 903:128 at 320, 1106; 1280 x 494) ---- */
.bdagent-illus {
  position: relative;
  width: calc(100% - 32px);
  margin: 40px auto 0;
  text-align: left;
}
.bdagent-illus__copy { position: relative; z-index: 1; }
.bdagent-agents { position: relative; height: 72px; }
.bdagent-agents img {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 3.2px solid #14151c;
  border-radius: 16.5px;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
  max-width: none;
  object-fit: cover;
}
.bdagent-agents__a1 { left: 4px; top: 8px; rotate: 10deg; }
.bdagent-agents__a2 { left: 44px; top: 0; rotate: -4deg; }
.bdagent-agents__a3 { left: 84px; top: 8px; rotate: -12deg; }
.bdagent-hint { margin: 8px 0 0; font-size: 15px; line-height: 1.24; color: rgba(255, 255, 255, 0.5); }
.bdagent-quote {
  margin: 10px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.174;                              /* 54 / 46 */
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.5);
}
.bdagent-quote b { font-weight: 700; color: #fff; }
.bdagent-quote__br { display: none; }            /* Figma's line breaks, from 768px up */
.bdagent-quote__cursor {
  display: inline-block;
  width: 0.087em;                                  /* 4 at 46 */
  height: 0.957em;                                 /* 44 */
  margin-left: 0.13em;
  vertical-align: -0.12em;
  border-radius: 1px;
  background: #fff;
}
/* The bubble picture with its four dark fades (Figma 1120 x 625.74; fades in % of it) */
.bdagent-bubble {
  position: relative;
  width: 200%;
  margin: -8% 0 -26% -62%;                         /* the faded top/bottom bands overlap the copy and the line below */
  aspect-ratio: 1120 / 625.74;
  pointer-events: none;
}
.bdagent-bubble > * { position: absolute; display: block; max-width: none; }
.bdagent-bubble img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bdagent-bubble__fade--b { left: 0; right: 0; top: 70%; height: 30.4%; background: linear-gradient(180deg, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, 0.9) 60%, #06070a 100%); }
.bdagent-bubble__fade--t { left: 0; right: 0; top: -0.39%; height: 25%; background: linear-gradient(0deg, rgba(6, 7, 10, 0) 0%, #06070a 100%); }
.bdagent-bubble__fade--r { top: 0; bottom: 0; left: 72%; width: 28.22%; background: linear-gradient(90deg, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, 0.85) 55%, #06070a 100%); }
.bdagent-bubble__fade--l { top: 0; bottom: 0; left: -0.22%; width: 38%; background: linear-gradient(90deg, #06070a 0%, rgba(6, 7, 10, 0.85) 55%, rgba(6, 7, 10, 0) 100%); }
/* 768+: the Figma composition, absolutely placed in its 1280 x 494 box */
@media (min-width: 768px) {
  .bdagent-illus {
    width: calc(1280 * var(--s));
    height: calc(494 * var(--s));
    margin-top: calc(105.2 * var(--s));
  }
  .bdagent-illus__copy { position: absolute; left: 0; top: 0; width: calc(500 * var(--s)); z-index: 1; }
  .bdagent-agents { position: absolute; left: 0; top: 0; height: 0; }
  .bdagent-agents img {
    width: calc(68 * var(--s));
    height: calc(68 * var(--s));
    border-width: calc(3.864 * var(--s));
    border-radius: calc(20.09 * var(--s));
    box-shadow: 0 calc(6 * var(--s)) calc(12 * var(--s)) calc(-2 * var(--s)) rgba(0, 0, 0, 0.45);
  }
  /* centres of the tilted cards: (39.39, 73.39) (90.29, 62.29) (148.33, 74.33) */
  .bdagent-agents__a1 { left: calc(5.39 * var(--s)); top: calc(39.39 * var(--s)); }
  .bdagent-agents__a2 { left: calc(56.29 * var(--s)); top: calc(28.29 * var(--s)); }
  .bdagent-agents__a3 { left: calc(114.33 * var(--s)); top: calc(40.33 * var(--s)); }
  .bdagent-hint { position: absolute; left: calc(200 * var(--s)); top: calc(58 * var(--s)); margin: 0; font-size: calc(17 * var(--s)); white-space: nowrap; }
  .bdagent-quote__br { display: inline; }
  .bdagent-quote { position: absolute; left: 0; top: calc(130 * var(--s)); width: calc(500 * var(--s)); margin: 0; font-size: calc(46 * var(--s)); }
  .bdagent-bubble { position: absolute; left: calc(330 * var(--s)); top: calc(-110 * var(--s)); width: calc(1120 * var(--s)); margin: 0; }
}

.bdagent-works {
  position: relative;
  margin: max(24px, calc(50 * var(--s))) auto 0;
  padding: 0 16px;
  font-size: max(12px, calc(14 * var(--s)));
  line-height: 1.286;
  color: rgba(255, 255, 255, 0.4);
}

/* ---- Inside Agent headline (Figma 899:182 y 58 / 144.64) ---- */
.bdagent-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  margin: max(72px, calc(140 * var(--s))) 0 0;
  padding: 0 16px;
  font-size: max(28px, calc(60.48 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.bdagent-head__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1em 0.25em; }
.bdagent-head__line--dim { font-size: 0.992em; color: rgba(255, 255, 255, 0.55); }
.bdagent-glass--chat {                             /* "Chat": 168.84 x 80.64, radius 23.52 at 60.48 */
  display: inline-flex;
  align-items: center;
  height: 1.3333em;
  padding: 0 0.3056em;
  border-width: 0.0167em;
  border-radius: 0.3889em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: var(--bda-glass-in), 0 0.2778em 0.5556em -0.1389em rgba(0, 0, 0, 0.55);
  line-height: 1;
}

/* ---- tile grid (Figma x 320, 1280 wide: 4 columns of 304.84, gap 20.21; rows 252.63 x 3 + 353.68) ----
   Phones: one column. 640–1023: two columns, the wide tiles span both. 1024+: the Figma grid.
   (The grid is not a size container: every cqw here measures the section.) */
.bdagent-grid {
  --gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--gap);
  width: calc(100% - 32px);
  margin: max(40px, calc(80.36 * var(--s))) auto 0;
  text-align: left;
}
.bdagent-bt {
  --tile-w: calc(100cqw - 32px);
  --f: calc(var(--tile-w) / var(--tw));
  position: relative;
  aspect-ratio: var(--tw) / var(--th);
  min-width: 0;
}
@media (min-width: 640px) {
  .bdagent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bdagent-bt { --tile-w: calc((100cqw - 48px) / 2); }
  .bdagent-t01, .bdagent-t02, .bdagent-t05, .bdagent-t06 { grid-column: span 2; --tile-w: calc(100cqw - 32px); }
}
@media (min-width: 1024px) {
  .bdagent-grid {
    --gap: calc(20.21 * var(--s));
    width: calc(1280 * var(--s));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, calc(252.63 * var(--s))) calc(353.68 * var(--s));
    align-items: stretch;
  }
  .bdagent-bt { --tile-w: calc(var(--tw) * var(--s)); aspect-ratio: auto; }
  .bdagent-t01 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bdagent-t02 { grid-column: 3 / 5; grid-row: 1; }
  .bdagent-t03 { grid-column: 3; grid-row: 2; }
  .bdagent-t04 { grid-column: 4; grid-row: 2 / 4; }
  .bdagent-t05 { grid-column: 1 / 4; grid-row: 3; }
  .bdagent-t06 { grid-column: 1 / 3; grid-row: 4; }
  .bdagent-t07 { grid-column: 3; grid-row: 4; }
  .bdagent-t08 { grid-column: 4; grid-row: 4; }
}

/* ---- the eight tiles (agent/ bento parts, static) ---- */
/* Tile 01 — Scripts (Figma 757:306, 629.89 x 525.47). --f = one Figma px of this tile. */
.bd-agent .bdagent-t01 .bdagent-t01-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #17171a;
}
.bd-agent .bdagent-t01 .bdagent-t01-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t01 .bdagent-t01-book {
  left: calc(-10.105 * var(--f));
  top: calc(53.895 * var(--f));
  width: calc(690.526 * var(--f));
  height: calc(515.368 * var(--f));
  object-fit: cover;
}
.bd-agent .bdagent-t01 .bdagent-t01-fade { left: calc(-10.105 * var(--f)); top: calc(53.895 * var(--f)); pointer-events: none; }
.bd-agent .bdagent-t01 .bdagent-t01-fade--left { width: calc(218.947 * var(--f)); height: calc(515.368 * var(--f)); background: linear-gradient(90deg, #17171a, rgba(23, 23, 26, 0)); }
.bd-agent .bdagent-t01 .bdagent-t01-fade--top { width: calc(690.526 * var(--f)); height: calc(134.737 * var(--f)); background: linear-gradient(180deg, #17171a, rgba(23, 23, 26, 0)); }
.bd-agent .bdagent-t01 .bdagent-t01-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(255, 255, 255, 0.5);
}
.bd-agent .bdagent-t01 .bdagent-t01-prompt {
  left: calc(33.684 * var(--f));
  top: calc(77.474 * var(--f));
  width: calc(378.947 * var(--f));
  height: calc(123.789 * var(--f));
  font-size: calc(50.526 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.bd-agent .bdagent-t01 .bdagent-t01-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t01 .bdagent-t01-line { left: 0; top: 0; color: #fff; }
.bd-agent .bdagent-t01 .bdagent-t01-hl {
  left: calc(-15.157 * var(--f));
  top: calc(57.263 * var(--f));
  width: calc(174.316 * var(--f));
  height: calc(66.526 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(15.157 * var(--f));
  box-sizing: border-box;
  border-radius: calc(17.179 * var(--f));
  background: #ffd15e;
  color: #141826;
}
.bd-agent .bdagent-t01 .bdagent-t01-cursor {
  left: calc(170.274 * var(--f));
  top: calc(63.327 * var(--f));
  width: calc(4.042 * var(--f));
  height: calc(53.053 * var(--f));
  background: #2563eb;
}
.bd-agent .bdagent-t01 .bdagent-t01-arrow {
  left: calc(210.526 * var(--f));
  top: calc(225.684 * var(--f));
  width: calc(126.316 * var(--f));
  height: calc(67.368 * var(--f));
}
.bd-agent .bdagent-t01 .bdagent-t01-pill {
  left: calc(33.684 * var(--f));
  top: calc(458.105 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7.579 * var(--f));
  padding: calc(6.737 * var(--f)) calc(12.632 * var(--f)) calc(6.737 * var(--f)) calc(7.579 * var(--f));
  border-radius: calc(83.368 * var(--f));
  background: #fff;
  font-size: max(11px, calc(12.632 * var(--f)));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t01 .bdagent-t01-check {
  position: relative;
  flex: none;
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #c6f99a;
}
.bd-agent .bdagent-t01 .bdagent-t01-check img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }

/* Phones: the tile is drawn ~360 wide, so lift the small label and pill to readable sizes */
@media (max-width: 639px) {
  .bd-agent .bdagent-t01 .bdagent-t01-label { font-size: 11px; }
  .bd-agent .bdagent-t01 .bdagent-t01-pill { font-size: 12px; }
} /* never moves up: the image's top edge stays under the top fade */

/* Tile 02 — Characters (Figma 757:324, 629.89 x 252.63). */
.bd-agent .bdagent-t02 .bdagent-t02-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #9fd8ff;
}
.bd-agent .bdagent-t02 .bdagent-t02-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t02 .bdagent-t02-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(20, 24, 38, 0.5);
}
.bd-agent .bdagent-t02 .bdagent-t02-prompt {
  left: calc(33.684 * var(--f));
  top: calc(70.737 * var(--f));
  width: calc(240.842 * var(--f));
  height: calc(82.526 * var(--f));
  font-size: calc(33.684 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t02 .bdagent-t02-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t02 .bdagent-t02-line { left: 0; top: 0; }
.bd-agent .bdagent-t02 .bdagent-t02-hl {
  left: calc(-10.105 * var(--f));
  top: calc(37.053 * var(--f));
  width: calc(240.842 * var(--f));
  height: calc(45.474 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(10.105 * var(--f));
  box-sizing: border-box;
  border-radius: calc(11.453 * var(--f));
  background: #fff;
}
.bd-agent .bdagent-t02 .bdagent-t02-cursor {
  left: calc(238.149 * var(--f));
  top: calc(41.095 * var(--f));
  width: calc(2.695 * var(--f));
  height: calc(35.368 * var(--f));
  background: #2563eb;
}
.bd-agent .bdagent-t02 .bdagent-t02-sheet {
  left: calc(294.737 * var(--f));
  top: calc(48.842 * var(--f));
  width: calc(395.789 * var(--f));
  height: calc(222.316 * var(--f));
  object-fit: cover;
  border-radius: calc(21.895 * var(--f));
  box-shadow: 0 calc(16.842 * var(--f)) calc(33.684 * var(--f)) calc(-8.421 * var(--f)) rgba(20, 24, 38, 0.25);
}
.bd-agent .bdagent-t02 .bdagent-t02-pill {
  left: calc(33.684 * var(--f));
  top: calc(186.947 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7.579 * var(--f));
  padding: calc(6.737 * var(--f)) calc(12.632 * var(--f)) calc(6.737 * var(--f)) calc(7.579 * var(--f));
  border-radius: calc(83.368 * var(--f));
  background: #141826;
  font-size: max(11px, calc(12.632 * var(--f)));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bd-agent .bdagent-t02 .bdagent-t02-check {
  position: relative;
  flex: none;
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #c6f99a;
}
.bd-agent .bdagent-t02 .bdagent-t02-check img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }

/* Phones: drawn 630 wide the copy would be ~6px. Below 640px the tile is re-drawn on a
   360-px-wide canvas: copy on top, the model sheet under it, and the tile grows to fit. */
@media (max-width: 639px) {
  .bd-agent .bdagent-t02 { --f: calc(var(--tile-w) / 360); aspect-ratio: auto; height: calc(440 * var(--f)); }
  .bd-agent .bdagent-t02 .bdagent-t02-sheet { left: calc(20 * var(--f)); top: calc(240 * var(--f)); width: calc(320 * var(--f)); height: calc(179.7 * var(--f)); }
}

/* Tile 03 — Credits (Figma 757:337, 304.84 x 252.63). */
.bd-agent .bdagent-t03 .bdagent-t03-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #141826;
}
.bd-agent .bdagent-t03 .bdagent-t03-card > * { position: absolute; margin: 0; font-weight: 700; line-height: normal; white-space: nowrap; }
.bd-agent .bdagent-t03 .bdagent-t03-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(255, 255, 255, 0.5);
}
.bd-agent .bdagent-t03 .bdagent-t03-num {
  left: calc(26.947 * var(--f));
  top: calc(50.526 * var(--f));
  font-size: calc(107.789 * var(--f));
  letter-spacing: -0.06em;
  color: #ffd15e;
  font-variant-numeric: tabular-nums;
}
.bd-agent .bdagent-t03 .bdagent-t03-line {
  left: calc(33.684 * var(--f));
  top: calc(181.895 * var(--f));
  font-size: calc(18.526 * var(--f));
  letter-spacing: -0.02em;
  color: #fff;
}
.bd-agent .bdagent-t03 .bdagent-t03-line--dim { top: calc(205.474 * var(--f)); color: rgba(255, 255, 255, 0.45); }
.bd-agent .bdagent-t03 .bdagent-t03-pill {
  left: calc(194.526 * var(--f));
  top: calc(190.316 * var(--f));
  padding: calc(6.737 * var(--f)) calc(12.632 * var(--f));
  border-radius: calc(83.368 * var(--f));
  background: #fff;
  font-size: calc(11.789 * var(--f));
  color: #141826;
}

/* Tile 04 — Takes (Figma 757:344, 304.84 x 525.47). */
.bd-agent .bdagent-t04 .bdagent-t04-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #9ff0d5;
}
.bd-agent .bdagent-t04 .bdagent-t04-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t04 .bdagent-t04-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(20, 24, 38, 0.5);
}
.bd-agent .bdagent-t04 .bdagent-t04-prompt {
  left: calc(33.684 * var(--f));
  top: calc(70.737 * var(--f));
  width: calc(186.239 * var(--f));
  height: calc(79.158 * var(--f));
  font-size: calc(32 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t04 .bdagent-t04-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t04 .bdagent-t04-line { left: 0; top: 0; }
.bd-agent .bdagent-t04 .bdagent-t04-line--2 { top: calc(38.737 * var(--f)); }
.bd-agent .bdagent-t04 .bdagent-t04-hl {
  left: calc(77.777 * var(--f));
  top: calc(-3.368 * var(--f));
  width: calc(108.463 * var(--f));
  height: calc(43.789 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(9.598 * var(--f));
  box-sizing: border-box;
  border-radius: calc(10.88 * var(--f));
  background: #fff;
}
/* The three takes: 160 x 210.53 cards; 1 and 3 tilted -8° / 8° at 75% behind take 2 */
.bd-agent .bdagent-t04 .bdagent-t04-take {
  width: calc(160 * var(--f));
  height: calc(210.526 * var(--f));
  box-sizing: border-box;
  border-radius: calc(18.526 * var(--f));
  object-fit: cover;
  box-shadow: 0 calc(16.842 * var(--f)) calc(33.684 * var(--f)) calc(-8.421 * var(--f)) rgba(20, 24, 38, 0.25);
}
.bd-agent .bdagent-t04 .bdagent-t04-take--1 { left: calc(27.34 * var(--f)); top: calc(240.47 * var(--f)); rotate: -8deg; opacity: 0.75; }
.bd-agent .bdagent-t04 .bdagent-t04-take--3 { left: calc(115.94 * var(--f)); top: calc(296.43 * var(--f)); rotate: 8deg; opacity: 0.75; }
.bd-agent .bdagent-t04 .bdagent-t04-take--2 {
  left: calc(72.421 * var(--f));
  top: calc(210.526 * var(--f));
  overflow: hidden;
  border: calc(3.368 * var(--f)) solid #141826;
}
.bd-agent .bdagent-t04 .bdagent-t04-take--2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-agent .bdagent-t04 .bdagent-t04-pill {
  left: calc(89.263 * var(--f));
  top: calc(402.526 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(7.579 * var(--f));
  padding: calc(6.737 * var(--f)) calc(12.632 * var(--f)) calc(6.737 * var(--f)) calc(7.579 * var(--f));
  border-radius: calc(83.368 * var(--f));
  background: #141826;
  font-size: calc(12.632 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #fff;
}
.bd-agent .bdagent-t04 .bdagent-t04-check {
  position: relative;
  flex: none;
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #c6f99a;
}
.bd-agent .bdagent-t04 .bdagent-t04-check img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }

/* Tile 05 — Storyboard (Figma 757:359, 954.95 x 252.63). */
.bd-agent .bdagent-t05 .bdagent-t05-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #ff9f8a;
}
.bd-agent .bdagent-t05 .bdagent-t05-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t05 .bdagent-t05-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(20, 24, 38, 0.5);
}
.bd-agent .bdagent-t05 .bdagent-t05-prompt {
  left: calc(33.684 * var(--f));
  top: calc(80.842 * var(--f));
  width: calc(249.263 * var(--f));
  height: calc(90.947 * var(--f));
  font-size: calc(37.053 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t05 .bdagent-t05-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t05 .bdagent-t05-line { left: 0; top: 0; }
.bd-agent .bdagent-t05 .bdagent-t05-hl {
  left: calc(-11.115 * var(--f));
  top: calc(41.263 * var(--f));
  width: calc(171.284 * var(--f));
  height: calc(49.684 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(11.114 * var(--f));
  box-sizing: border-box;
  border-radius: calc(12.598 * var(--f));
  background: #141826;
  color: #fff;
}
.bd-agent .bdagent-t05 .bdagent-t05-cursor {
  left: calc(168.32 * var(--f));
  top: calc(45.709 * var(--f));
  width: calc(2.964 * var(--f));
  height: calc(38.905 * var(--f));
  background: #2563eb;
}

/* Day / night slider: the night picture underneath, the day picture clipped to the
   left of the divider (--d = divider position in slider px; Figma: 309.05) */
.bd-agent .bdagent-t05 .bdagent-t05-slider {
  --d: 309.053;
  left: calc(336.842 * var(--f));
  top: 0;
  width: calc(618.105 * var(--f));
  height: calc(252.632 * var(--f));
  overflow: hidden;
}
.bd-agent .bdagent-t05 .bdagent-t05-slider > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t05 .bdagent-t05-night { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-agent .bdagent-t05 .bdagent-t05-day { left: 0; top: 0; width: calc(var(--d) * var(--f)); height: 100%; overflow: hidden; }
.bd-agent .bdagent-t05 .bdagent-t05-day img { display: block; width: calc(618.105 * var(--f)); height: 100%; max-width: none; object-fit: cover; }
.bd-agent .bdagent-t05 .bdagent-t05-divider {
  left: calc((var(--d) - 1.684) * var(--f));
  top: 0;
  width: calc(3.368 * var(--f));
  height: 100%;
  background: #fff;
  box-shadow: 0 0 calc(8.421 * var(--f)) rgba(0, 0, 0, 0.4);
}
.bd-agent .bdagent-t05 .bdagent-t05-knob {
  left: calc((var(--d) - 23.579) * var(--f));
  top: calc(102.737 * var(--f));
  width: calc(47.158 * var(--f));
  height: calc(47.158 * var(--f));
  border-radius: 50%;
  background: #fff;
  filter: drop-shadow(0 calc(5.053 * var(--f)) calc(6.737 * var(--f)) rgba(0, 0, 0, 0.4));
}
.bd-agent .bdagent-t05 .bdagent-t05-knob img { position: absolute; left: calc(11.789 * var(--f)); top: calc(16.842 * var(--f)); width: calc(23.579 * var(--f)); height: calc(13.474 * var(--f)); }
.bd-agent .bdagent-t05 .bdagent-t05-pill {
  left: calc(20.211 * var(--f));
  top: calc(20.211 * var(--f));
  padding: calc(6.737 * var(--f)) calc(12.632 * var(--f));
  border-radius: calc(83.368 * var(--f));
  background: #fff;
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t05 .bdagent-t05-pill--night { left: auto; right: calc(20.211 * var(--f)); background: #141826; color: #fff; }

/* Phones: drawn 955 wide the copy would be ~4px. Below 640px the copy is drawn on a
   360-px canvas and the slider runs full width under it; the tile grows to fit. */
@media (max-width: 639px) {
  .bd-agent .bdagent-t05 { --f: calc(var(--tile-w) / 360); aspect-ratio: auto; height: calc((200 + 147.1) * var(--f)); }
  .bd-agent .bdagent-t05 .bdagent-t05-slider {
    --f: calc(var(--tile-w) / 618.105);
    left: 0;
    top: calc(200 * var(--tile-w) / 360);
  }
}

/* Tile 06 — Clip prompts (Figma 757:377, 629.89 x 353.68). */
.bd-agent .bdagent-t06 .bdagent-t06-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #c6f99a;
}
.bd-agent .bdagent-t06 .bdagent-t06-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t06 .bdagent-t06-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(20, 24, 38, 0.5);
}
.bd-agent .bdagent-t06 .bdagent-t06-prompt {
  left: calc(33.684 * var(--f));
  top: calc(77.474 * var(--f));
  width: calc(199.579 * var(--f));
  height: calc(90.947 * var(--f));
  font-size: calc(37.053 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t06 .bdagent-t06-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t06 .bdagent-t06-line { left: 0; top: 0; }
.bd-agent .bdagent-t06 .bdagent-t06-hl {
  left: calc(-11.115 * var(--f));
  top: calc(41.263 * var(--f));
  width: calc(194.021 * var(--f));
  height: calc(49.684 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(11.114 * var(--f));
  box-sizing: border-box;
  border-radius: calc(12.598 * var(--f));
  background: #fff;
}
.bd-agent .bdagent-t06 .bdagent-t06-cursor {
  left: calc(191.057 * var(--f));
  top: calc(45.709 * var(--f));
  width: calc(2.964 * var(--f));
  height: calc(38.905 * var(--f));
  background: #2563eb;
}

/* The scene with the director overlays (320 x 286.32) */
.bd-agent .bdagent-t06 .bdagent-t06-scene {
  left: calc(282.947 * var(--f));
  top: calc(33.684 * var(--f));
  width: calc(320 * var(--f));
  height: calc(286.316 * var(--f));
  overflow: hidden;
  border-radius: calc(21.895 * var(--f));
  box-shadow: 0 calc(16.842 * var(--f)) calc(33.684 * var(--f)) calc(-8.421 * var(--f)) rgba(20, 24, 38, 0.25);
  isolation: isolate;
}
.bd-agent .bdagent-t06 .bdagent-t06-scene > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t06 .bdagent-t06-pic { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-agent .bdagent-t06 .bdagent-t06-corner { width: calc(23.579 * var(--f)); height: calc(23.579 * var(--f)); }
.bd-agent .bdagent-t06 .bdagent-t06-corner--tl { left: calc(13.474 * var(--f)); top: calc(13.474 * var(--f)); }
.bd-agent .bdagent-t06 .bdagent-t06-corner--tr { left: calc(282.947 * var(--f)); top: calc(13.474 * var(--f)); }
.bd-agent .bdagent-t06 .bdagent-t06-corner--bl { left: calc(13.474 * var(--f)); top: calc(249.263 * var(--f)); }
.bd-agent .bdagent-t06 .bdagent-t06-corner--br { left: calc(282.947 * var(--f)); top: calc(249.263 * var(--f)); }
.bd-agent .bdagent-t06 .bdagent-t06-box {
  left: calc(115.874 * var(--f));
  top: calc(35.368 * var(--f));
  width: calc(101.053 * var(--f));
  height: calc(101.053 * var(--f));
  box-sizing: border-box;
  border: calc(2.526 * var(--f)) dashed #ffd15e;
  border-radius: calc(6.737 * var(--f));
}
.bd-agent .bdagent-t06 .bdagent-t06-tag,
.bd-agent .bdagent-t06 .bdagent-t06-track {
  padding: calc(6.737 * var(--f)) calc(12.632 * var(--f));
  border-radius: calc(83.368 * var(--f));
  font-size: calc(10.105 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-agent .bdagent-t06 .bdagent-t06-tag { left: calc(223.663 * var(--f)); top: calc(35.368 * var(--f)); background: #ffd15e; color: #141826; }
.bd-agent .bdagent-t06 .bdagent-t06-track {
  left: calc(20.211 * var(--f));
  top: calc(223.158 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(6.737 * var(--f));
  padding: calc(6.737 * var(--f)) calc(11.789 * var(--f)) calc(6.737 * var(--f)) calc(10.105 * var(--f));
  background: rgba(20, 24, 38, 0.85);
  letter-spacing: 0.08em;
  color: #fff;
}
.bd-agent .bdagent-t06 .bdagent-t06-track img { flex: none; width: calc(28.632 * var(--f)); height: calc(11.789 * var(--f)); }

/* Phones: copy on a 360-px canvas, the scene under it */
@media (max-width: 639px) {
  .bd-agent .bdagent-t06 { --f: calc(var(--tile-w) / 360); aspect-ratio: auto; height: calc(500 * var(--f)); }
  .bd-agent .bdagent-t06 .bdagent-t06-scene { left: calc(20 * var(--f)); top: calc(194 * var(--f)); }
}

/* Tile 07 — Render (Figma 757:404, 304.84 x 353.68). Clips 1-4 rendered (check), 5-6 rendering (shimmer + spinner). */
.bd-agent .bdagent-t07 .bdagent-t07-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #ffd15e;
}
.bd-agent .bdagent-t07 .bdagent-t07-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t07 .bdagent-t07-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(20, 24, 38, 0.5);
}
.bd-agent .bdagent-t07 .bdagent-t07-prompt {
  left: calc(33.684 * var(--f));
  top: calc(70.737 * var(--f));
  width: calc(179.942 * var(--f));
  height: calc(70.737 * var(--f));
  font-size: calc(28.632 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t07 .bdagent-t07-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t07 .bdagent-t07-line { left: 0; top: 0; }
.bd-agent .bdagent-t07 .bdagent-t07-hl {
  left: calc(-8.588 * var(--f));
  top: calc(31.158 * var(--f));
  width: calc(179.705 * var(--f));
  height: calc(39.579 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(8.59 * var(--f));
  box-sizing: border-box;
  border-radius: calc(9.735 * var(--f));
  background: #141826;
  color: #ffd15e;
}
.bd-agent .bdagent-t07 .bdagent-t07-cursor {
  left: calc(177.415 * var(--f));
  top: calc(34.594 * var(--f));
  width: calc(2.526 * var(--f));
  height: calc(30.063 * var(--f));
  background: #2563eb;
}
.bd-agent .bdagent-t07 .bdagent-t07-clip {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(74.667 * var(--f));
  height: calc(80.64 * var(--f));
  overflow: hidden;
  border-radius: calc(11.789 * var(--f));
}
.bd-agent .bdagent-t07 .bdagent-t07-clip > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t07 .bdagent-t07-clip > img:first-child { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd-agent .bdagent-t07 .bdagent-t07-shimmer { inset: 0; background: rgba(255, 244, 204, 0.72); opacity: 0; }
.bd-agent .bdagent-t07 .bdagent-t07-spin { left: calc(25.544 * var(--f)); top: calc(28.53 * var(--f)); width: calc(23.579 * var(--f)); height: calc(23.579 * var(--f)); opacity: 0; }
.bd-agent .bdagent-t07 .bdagent-t07-done {
  left: calc(51.088 * var(--f));
  top: calc(5.053 * var(--f));
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #141826;
  opacity: 0;
  scale: 0.4;
}
.bd-agent .bdagent-t07 .bdagent-t07-done img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }
.bd-agent .bdagent-t07 .bdagent-t07-clip.is-busy .bdagent-t07-shimmer,
.bd-agent .bdagent-t07 .bdagent-t07-clip.is-busy .bdagent-t07-spin { opacity: 1; }
.bd-agent .bdagent-t07 .bdagent-t07-clip.is-done .bdagent-t07-done { opacity: 1; scale: 1; }

/* Tile 08 — Export & schedule (Figma 757:437, 304.84 x 353.68). A week strip: Friday holds the
   6 PM post (dark column), Saturday a 9 AM post; the other days show empty slots. */
.bd-agent .bdagent-t08 .bdagent-t08-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #f6f1e6;
}
.bd-agent .bdagent-t08 .bdagent-t08-card > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t08 .bdagent-t08-label {
  left: calc(33.684 * var(--f));
  top: calc(33.684 * var(--f));
  font-size: max(10px, calc(10.947 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: pre;
  color: rgba(20, 24, 38, 0.5);
}
.bd-agent .bdagent-t08 .bdagent-t08-prompt {
  left: calc(33.684 * var(--f));
  top: calc(70.737 * var(--f));
  width: calc(184.152 * var(--f));
  height: calc(70.737 * var(--f));
  font-size: calc(28.632 * var(--f));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #141826;
}
.bd-agent .bdagent-t08 .bdagent-t08-prompt > * { position: absolute; margin: 0; }
.bd-agent .bdagent-t08 .bdagent-t08-line { left: 0; top: 0; }
.bd-agent .bdagent-t08 .bdagent-t08-hl {
  left: calc(-8.588 * var(--f));
  top: calc(31.158 * var(--f));
  width: calc(183.916 * var(--f));
  height: calc(39.579 * var(--f));
  padding: calc(1.684 * var(--f)) 0 0 calc(8.59 * var(--f));
  box-sizing: border-box;
  border-radius: calc(9.735 * var(--f));
  background: #ffd15e;
}
.bd-agent .bdagent-t08 .bdagent-t08-cursor {
  left: calc(181.626 * var(--f));
  top: calc(34.594 * var(--f));
  width: calc(2.526 * var(--f));
  height: calc(30.063 * var(--f));
  background: #2563eb;
}
.bd-agent .bdagent-t08 .bdagent-t08-day {
  left: calc(var(--x) * var(--f));
  top: calc(166.737 * var(--f));
  font-size: calc(12.632 * var(--f));
  font-weight: 700;
  line-height: normal;
  color: rgba(20, 24, 38, 0.4);
}
.bd-agent .bdagent-t08 .bdagent-t08-day--fri { color: #fff; }
.bd-agent .bdagent-t08 .bdagent-t08-day--sat { color: #141826; }
.bd-agent .bdagent-t08 .bdagent-t08-dot {
  left: calc(var(--x) * var(--f));
  top: calc(var(--y) * var(--f));
  width: calc(4.211 * var(--f));
  height: calc(4.211 * var(--f));
  border-radius: 50%;
  background: rgba(20, 24, 38, 0.15);
}
.bd-agent .bdagent-t08 .bdagent-t08-col {
  top: calc(158.316 * var(--f));
  width: calc(54.737 * var(--f));
  height: calc(173.474 * var(--f));
  border-radius: calc(15.158 * var(--f));
}
.bd-agent .bdagent-t08 .bdagent-t08-col--fri { left: calc(130.526 * var(--f)); background: #141826; }
.bd-agent .bdagent-t08 .bdagent-t08-col--sat { left: calc(190.316 * var(--f)); background: rgba(20, 24, 38, 0.08); }
.bd-agent .bdagent-t08 .bdagent-t08-post {
  top: calc(190.316 * var(--f));
  width: calc(41.263 * var(--f));
  height: calc(104.421 * var(--f));
  border-radius: calc(10.105 * var(--f));
  object-fit: cover;
}
.bd-agent .bdagent-t08 .bdagent-t08-post--fri { left: calc(137.263 * var(--f)); }
.bd-agent .bdagent-t08 .bdagent-t08-post--sat { left: calc(197.053 * var(--f)); }
.bd-agent .bdagent-t08 .bdagent-t08-time {
  top: calc(304.842 * var(--f));
  font-size: calc(11.789 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bd-agent .bdagent-t08 .bdagent-t08-time--fri { left: calc(143.158 * var(--f)); color: #fff; }
.bd-agent .bdagent-t08 .bdagent-t08-time--sat { left: calc(202.526 * var(--f)); color: #141826; }

/* ---- Bundle colours for the tiles (Figma 899:182): every card is the dark glass card,
   labels 50% white, prompts white with white highlight boxes ---- */
.bd-agent .bdagent-bt [class$="-card"] {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, #14151a 0%, #08090c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.bd-agent .bdagent-bt [class*="-label"] { color: rgba(255, 255, 255, 0.5); }
.bd-agent .bdagent-bt [class$="-line"],
.bd-agent .bdagent-bt .bdagent-t04-line--2 { color: #fff; }
.bd-agent .bdagent-bt [class$="-hl"] { background: #fff; color: #141826; }
.bd-agent .bdagent-bt [class$="-cursor"] { background: #2563eb; }

.bd-agent .bdagent-bt .bdagent-t01-fade--left { background: linear-gradient(90deg, #0f1014, rgba(15, 16, 20, 0)); }
.bd-agent .bdagent-bt .bdagent-t01-fade--top { background: linear-gradient(180deg, #0f1014, rgba(15, 16, 20, 0)); }

.bd-agent .bdagent-bt .bdagent-t02-pill,
.bd-agent .bdagent-bt .bdagent-t04-pill,
.bd-agent .bdagent-bt .bdagent-t05-pill--night {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.bd-agent .bdagent-bt .bdagent-t03-num { color: #fff; }

.bd-agent .bdagent-bt .bdagent-t08-day { color: rgba(255, 255, 255, 0.4); }
.bd-agent .bdagent-bt .bdagent-t08-day--fri,
.bd-agent .bdagent-bt .bdagent-t08-day--sat,
.bd-agent .bdagent-bt .bdagent-t08-time--fri,
.bd-agent .bdagent-bt .bdagent-t08-time--sat { color: #fff; }

/* ---- part: reseller ---- */
/* ============ 08 PART 6 — RESELLER (25 ACCOUNTS) (Figma 908:128, 1920 x 2959.48, light #fcfcfd) ============
   STATIC: nothing here animates (user rule for the bundle page).
   Desktop (>= 1024px): Figma's layout, every size N * --s (one Figma px; 1px at 1920 and up).
   The box stage uses --st (never smaller than 0.45px) so the box stays a usable size on phones;
   it is laid out from the frame's centre line (x 960). Below 1024px the copy, cards and tags reflow. */
.bd-reseller {
  --s: min(1px, 100cqw / 1920);
  --st: max(var(--s), 0.45px);
  container-type: inline-size;
  position: relative;
  overflow-x: clip;
  padding-bottom: max(72px, calc(160 * var(--s)));
  background: #fcfcfd;
  color: #0b0d14;
  text-align: center;
}

/* ---- box on the lit floor ---- */
.bd-reseller .bdreseller-stage {
  position: relative;
  height: calc(706 * var(--st));
  pointer-events: none;
}
.bd-reseller .bdreseller-stage > * {
  position: absolute;
  display: block;
  max-width: none;
}
/* --x --y --w --h in Figma px; x measured in the 1920 frame, placed from the centre */
.bd-reseller .bdreseller-glow       { left: calc(50% + (270 - 960) * var(--st)); top: calc(90 * var(--st));  width: calc(1380 * var(--st)); height: calc(800 * var(--st)); }
.bd-reseller .bdreseller-floorglow  { left: calc(50% + (450 - 960) * var(--st)); top: calc(430 * var(--st)); width: calc(1020 * var(--st)); height: calc(260 * var(--st)); }
.bd-reseller .bdreseller-shadow     { left: calc(50% + (716.3 - 960) * var(--st)); top: calc(522 * var(--st)); width: calc(487.4 * var(--st)); height: calc(66 * var(--st)); }
.bd-reseller .bdreseller-floorline {
  left: calc(50% - 500 * var(--st));
  top: calc(560 * var(--st));
  width: calc(1000 * var(--st));
  height: 1px;
  background: linear-gradient(90deg, rgba(31, 160, 106, 0) 0%, rgba(31, 160, 106, 0.5) 50%, rgba(31, 160, 106, 0) 100%);
}
.bd-reseller .bdreseller-box {
  left: calc(50% - 198 * var(--st));
  top: calc(120 * var(--st));
  width: calc(396 * var(--st));
  height: calc(440 * var(--st));
  box-shadow: 0 calc(30 * var(--st)) calc(50 * var(--st)) calc(-10 * var(--st)) rgba(11, 13, 20, 0.18);
}
/* Figma crops the raw box picture: 126.58% wide, 113.64% tall, shifted -6.33% / -10.8% */
.bd-reseller .bdreseller-boxart { position: absolute; inset: 0; overflow: hidden; }
.bd-reseller .bdreseller-boxart img {
  position: absolute;
  left: -6.33%;
  top: -10.8%;
  width: 126.58%;
  height: 113.64%;
  max-width: none;
}
/* Mirror of the box under the floor line: flipped, 30%, fading out over 150px */
.bd-reseller .bdreseller-reflection {
  left: calc(50% - 198 * var(--st));
  top: calc(562 * var(--st));
  width: calc(396 * var(--st));
  height: calc(150 * var(--st));
  overflow: hidden;
  opacity: 0.3;
  -webkit-mask: linear-gradient(#000, transparent);
          mask: linear-gradient(#000, transparent);
}
.bd-reseller .bdreseller-reflection .bdreseller-boxart {
  inset: auto 0 auto 0;
  top: 0;
  height: calc(440 * var(--st));
  transform: scaleY(-1);
  transform-origin: 50% 50%;
  translate: 0 0;
}

/* ---- chip, headline, sub line ---- */
.bd-reseller .bdreseller-chip {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(11, 13, 20, 0.28);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(11, 13, 20, 0.12), rgba(11, 13, 20, 0.05));
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 0.14em;
  color: rgba(11, 13, 20, 0.85);
}
.bd-reseller .bdreseller-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0 16px;
  font-size: max(30px, calc(84 * var(--s)));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.bd-reseller .bdreseller-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 0.262em;                     /* 22 at 84 */
}
/* Figma "Highlight box": green gradient, white text, inner top highlight, soft navy drop shadow */
.bd-reseller .bdreseller-hl {
  display: inline-block;
  padding: 0.095em 0.31em 0.143em;      /* 8 / 26 / 12 at 84 */
  border-radius: 0.31em;                /* 26 */
  background: linear-gradient(180deg, #1fa06a, #08402b);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 12px 15px rgba(11, 31, 92, 0.3));
  color: #fff;
}
.bd-reseller .bdreseller-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 20px 0 0;
  padding: 0 16px;
  font-size: max(17px, calc(28 * var(--s)));
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: rgba(11, 13, 20, 0.75);
}
.bd-reseller .bdreseller-hl--sm {
  padding: 0.214em 0.571em 0.357em;     /* 6 / 16 / 10 at 28 */
  border-radius: 0.43em;                /* 12 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

@media (min-width: 1024px) {
  .bd-reseller .bdreseller-chip {
    padding: calc(7 * var(--s)) calc(14 * var(--s));
    font-size: calc(13 * var(--s));
  }
  .bd-reseller .bdreseller-head { gap: calc(14 * var(--s)); margin-top: calc(36 * var(--s)); padding: 0; }
  .bd-reseller .bdreseller-line { flex-wrap: nowrap; gap: calc(22 * var(--s)); white-space: nowrap; }
  .bd-reseller .bdreseller-hl {
    padding: calc(8 * var(--s)) calc(26 * var(--s)) calc(12 * var(--s));
    border-radius: calc(26 * var(--s));
    box-shadow: inset 0 calc(2 * var(--s)) calc(2 * var(--s)) rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 calc(12 * var(--s)) calc(15 * var(--s)) rgba(11, 31, 92, 0.3));
  }
  .bd-reseller .bdreseller-sub { flex-wrap: nowrap; gap: calc(14 * var(--s)); margin-top: calc(26 * var(--s)); padding: 0; white-space: nowrap; }
  .bd-reseller .bdreseller-hl--sm {
    padding: calc(6 * var(--s)) calc(16 * var(--s)) calc(10 * var(--s));
    border-radius: calc(12 * var(--s));
  }
}

/* ---- Three Steps From Client To Cash (Figma 908:144, 1920 x 770; 130 below the sub line) ---- */
.bd-reseller .bdreseller-how { padding: max(64px, calc(130 * var(--s))) 16px 0; color: #161829; }
.bd-reseller .bdreseller-how-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.03125em;
  margin: 0;
  font-size: max(34px, calc(64 * var(--s)));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.bd-reseller .bdreseller-how-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;                     /* 84 at 64 */
  padding: 0 0.3em;                     /* 19.2 */
  border-radius: 0.34em;                /* 21.76 */
  background: linear-gradient(162.56deg, #ffe6a8 0%, #ffc94d 71.429%);
}
.bd-reseller .bdreseller-how-cards {
  display: grid;
  grid-template-columns: minmax(0, 410.667px);
  justify-content: center;
  gap: 20px;
  margin-top: max(36px, calc(80 * var(--s)));
}
@media (min-width: 1024px) {
  .bd-reseller .bdreseller-how { padding-left: 0; padding-right: 0; }
  .bd-reseller .bdreseller-how-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(24 * var(--s));
    width: calc(1280 * var(--s));
    margin-left: auto;
    margin-right: auto;
  }
}
/* Each card is its own container: --c = one Figma px of the 410.67 x 520 card (used by its children) */
.bd-reseller .bdreseller-how-card {
  --c: calc(100cqw / 410.667);
  position: relative;
  container-type: inline-size;
  aspect-ratio: 410.667 / 520;
  overflow: hidden;
  border-radius: 10.7143% / 8.4615%;    /* 44 x 44 */
  text-align: left;
}
.bd-reseller .bdreseller-how-card > * { position: absolute; margin: 0; }
.bd-reseller .bdreseller-how-card--01 { background: linear-gradient(128.3deg, #14875a 0%, #08402b 71.429%); color: #fff; }
.bd-reseller .bdreseller-how-card--02 { background: linear-gradient(128.3deg, #ffe6a8 0%, #ffc94d 71.429%); color: #161829; }
.bd-reseller .bdreseller-how-card--03 { background: #161829; color: #fff; }
.bd-reseller .bdreseller-how-num {
  left: calc(32 * var(--c));
  top: calc(10 * var(--c));
  font-size: calc(120 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.25);
}
.bd-reseller .bdreseller-how-card--02 .bdreseller-how-num { color: rgba(22, 24, 41, 0.12); }
.bd-reseller .bdreseller-how-title {
  left: calc(40 * var(--c));
  top: calc(150 * var(--c));
  width: calc(330.667 * var(--c));
  font-size: calc(36 * var(--c));
  font-weight: 700;
  line-height: calc(40 * var(--c));
  letter-spacing: -0.03em;
}
.bd-reseller .bdreseller-how-text {
  left: calc(40 * var(--c));
  top: calc(202 * var(--c));
  width: calc(330.667 * var(--c));
  font-size: calc(18 * var(--c));
  font-weight: 500;
  line-height: 1.26;
  color: rgba(255, 255, 255, 0.75);
}
.bd-reseller .bdreseller-how-text--low { top: calc(242 * var(--c)); }
.bd-reseller .bdreseller-how-card--01 .bdreseller-how-text { color: rgba(255, 255, 255, 0.85); }
.bd-reseller .bdreseller-how-card--02 .bdreseller-how-text { color: rgba(22, 24, 41, 0.7); }

/* card 01: the client */
.bd-reseller .bdreseller-how-avatar {
  left: calc(40 * var(--c));
  top: calc(320 * var(--c));
  width: calc(150 * var(--c));
  height: calc(150 * var(--c));
  box-sizing: border-box;
  border: calc(6 * var(--c)) solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 calc(16 * var(--c)) calc(32 * var(--c)) calc(-6 * var(--c)) rgba(10, 71, 43, 0.3);
}
.bd-reseller .bdreseller-how-client {
  left: calc(206 * var(--c));
  top: calc(350 * var(--c));
  font-size: calc(22 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  white-space: nowrap;
}
.bd-reseller .bdreseller-how-pill {
  left: calc(206 * var(--c));
  top: calc(390 * var(--c));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--c));
  padding: calc(8 * var(--c)) calc(14 * var(--c)) calc(8 * var(--c)) calc(8 * var(--c));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--c)) calc(9 * var(--c)) rgba(20, 24, 38, 0.18));
  font-size: calc(14 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  color: #161829;
  white-space: nowrap;
}
.bd-reseller .bdreseller-how-check {
  display: grid;
  place-items: center;
  width: calc(22 * var(--c));
  height: calc(22 * var(--c));
  border-radius: 50%;
  background: #c6f99a;
}
.bd-reseller .bdreseller-how-check img { width: calc(11 * var(--c)); height: calc(11 * var(--c)); }

/* card 02: tilted step pills; --x --y --w --h = Figma's box around each tilted pill */
.bd-reseller .bdreseller-how-tag {
  left: calc(var(--x) * var(--c));
  top: calc(var(--y) * var(--c));
  width: calc(var(--w) * var(--c));
  height: calc(var(--h) * var(--c));
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-reseller .bdreseller-how-tag__pill {
  flex: none;
  padding: calc(8 * var(--c)) calc(14 * var(--c));
  border-radius: 99px;
  background: #fff;
  filter: drop-shadow(0 calc(8 * var(--c)) calc(9 * var(--c)) rgba(20, 24, 38, 0.18));
  rotate: var(--r);
  font-size: calc(17 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  color: #161829;
  white-space: nowrap;
}
.bd-reseller .bdreseller-how-tag--dark .bdreseller-how-tag__pill { background: #161829; color: #fff; }

/* card 03 */
.bd-reseller .bdreseller-how-big {
  left: calc(30 * var(--c));
  top: calc(320 * var(--c));
  font-size: calc(140 * var(--c));
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.06em;
  color: #ffc94d;
  white-space: nowrap;
}

/* ---- You Collect The Money (Figma 908:175, 1497.6 x 714.48 at x 211.2; 120 below the cards)
   It is the reseller page's "Price it your way" at 78%: on desktop --p = 0.78 Figma px. ---- */
.bd-reseller .bdreseller-price {
  --p: calc(0.78 * var(--s));
  position: relative;
  padding-top: 64px;
  color: #161829;
}
.bd-reseller .bdreseller-price-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.bd-reseller .bdreseller-price-line { display: block; }
.bd-reseller .bdreseller-price-line--2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 0.25em;
  margin-top: 4px;
}
.bd-reseller .bdreseller-price-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3125em;
  padding: 0 0.3em;
  border-radius: 0.34em;
  background: linear-gradient(168.65deg, #ffe6a8 0%, #ffc94d 71.429%);
}
.bd-reseller .bdreseller-price-sub {
  max-width: 670px;
  margin: 16px auto 0;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1.52;
  color: #545c6b;
}

/* tags (phones/tablets: a column, each still on its string) */
.bd-reseller .bdreseller-price-tags {
  --k: min(0.72px, (100cqw - 80px) / 360);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(70 * var(--k));
  margin-top: 40px;
  padding-top: calc(90 * var(--k));
}
.bd-reseller .bdreseller-price-wrap {
  position: relative;
  flex: none;
  width: calc(360 * var(--k));
  height: calc(470 * var(--k));
  margin-top: calc(40 * var(--k));
}
.bd-reseller .bdreseller-price-wrap:first-child { margin-top: 0; }
/* string: 2px dotted, #161829 at 35%, 3.07 dashes every 8.18, 90 tall */
.bd-reseller .bdreseller-price-string {
  position: absolute;
  left: calc(var(--sx) * var(--k));
  top: calc(var(--sy) * var(--k));
  width: calc(4 * var(--k));
  height: calc(90 * var(--k));
  background: repeating-linear-gradient(to bottom, rgba(22, 24, 41, 0.35) 0 calc(3.07 * var(--k)), transparent calc(3.07 * var(--k)) calc(8.18 * var(--k)))
              center / max(1.5px, calc(2 * var(--k))) 100% no-repeat;
}
.bd-reseller .bdreseller-price-tilt { position: absolute; inset: 0; rotate: var(--r); }
.bd-reseller .bdreseller-price-tag {
  position: absolute;
  inset: 0;
  border-radius: calc(36 * var(--k));
  filter: drop-shadow(0 calc(30 * var(--k)) calc(15 * var(--k)) rgba(20, 24, 38, 0.18));
}
.bd-reseller .bdreseller-price-tag--gold  { background: linear-gradient(127.45deg, #ffe6a8 0%, #ffc94d 71.429%); --ink: #161829; --ink-rgb: 22, 24, 41; }
.bd-reseller .bdreseller-price-tag--green { background: linear-gradient(127.45deg, #14875a 0%, #08402b 71.429%); --ink: #fff;    --ink-rgb: 255, 255, 255; }
.bd-reseller .bdreseller-price-tag--white { background: #fff; box-shadow: inset 0 0 0 1px rgba(22, 24, 41, 0.08); --ink: #161829; --ink-rgb: 22, 24, 41; }
.bd-reseller .bdreseller-price-hole {
  position: absolute;
  left: calc(165 * var(--k));
  top: calc(28 * var(--k));
  width: calc(30 * var(--k));
  height: calc(30 * var(--k));
}
.bd-reseller .bdreseller-price-label,
.bd-reseller .bdreseller-price-amount,
.bd-reseller .bdreseller-price-per,
.bd-reseller .bdreseller-price-desc {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}
.bd-reseller .bdreseller-price-label {
  top: calc(92 * var(--k));
  font-size: calc(14 * var(--k));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: rgba(var(--ink-rgb), 0.6);
}
.bd-reseller .bdreseller-price-amount {
  top: calc(120 * var(--k));
  font-size: calc(120 * var(--k));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.06em;
  color: var(--ink);
}
.bd-reseller .bdreseller-price-per {
  top: calc(256 * var(--k));
  font-family: "Rancho", cursive;
  font-size: calc(44 * var(--k));
  line-height: 1.25;
  color: rgba(var(--ink-rgb), 0.85);
}
.bd-reseller .bdreseller-price-rule {
  position: absolute;
  left: calc(40 * var(--k));
  top: calc(341 * var(--k));
  width: calc(280 * var(--k));
  height: calc(1.5 * var(--k));
  background: rgba(var(--ink-rgb), 0.15);
}
.bd-reseller .bdreseller-price-desc {
  top: calc(369 * var(--k));
  left: calc(40 * var(--k));
  right: auto;
  width: calc(280 * var(--k));
  font-size: calc(19 * var(--k));
  font-weight: 500;
  line-height: calc(28 * var(--k));
  white-space: normal;
  color: rgba(var(--ink-rgb), 0.8);
}
.bd-reseller .bdreseller-price-note {
  margin: 28px 0 0;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(84, 92, 107, 0.8);
}

@media (min-width: 1024px) {
  .bd-reseller .bdreseller-price { padding-top: calc(120 * var(--s)); }
  .bd-reseller .bdreseller-price-head { padding: 0; font-size: calc(64 * var(--p)); line-height: calc(80 * var(--p)); }
  .bd-reseller .bdreseller-price-line { white-space: nowrap; }
  .bd-reseller .bdreseller-price-line--2 { flex-wrap: nowrap; gap: calc(16 * var(--p)); margin-top: calc(6 * var(--p)); }
  .bd-reseller .bdreseller-price-hl { height: calc(84 * var(--p)); padding: 0 calc(19.2 * var(--p)); border-radius: calc(21.76 * var(--p)); }
  .bd-reseller .bdreseller-price-sub {
    max-width: none;
    width: calc(860 * var(--p));
    margin-top: calc(22 * var(--p));
    padding: 0;
    font-size: calc(21 * var(--p));
    line-height: calc(32 * var(--p));
  }
  .bd-reseller .bdreseller-price-tags {
    --k: var(--p);
    display: block;
    position: relative;
    width: calc(1920 * var(--p));
    height: calc(607 * var(--p));
    margin: calc(8 * var(--p)) auto 0;
    padding: 0;
  }
  .bd-reseller .bdreseller-price-wrap {
    position: absolute;
    left: calc(var(--x) * var(--p));
    top: calc(var(--y) * var(--p));
    margin: 0;
  }
  .bd-reseller .bdreseller-price-note { margin-top: calc(25 * var(--p)); padding: 0; font-size: calc(16 * var(--p)); line-height: calc(20 * var(--p)); }
}

/* ---- part: value ---- */
/* ============ 09 VALUE STACK — ADD IT UP (Figma 911:128, 1920 x 1349) ============
   Static by request. Sits directly under the Reseller part (edge to edge, as in Figma).
   Desktop: six 180px items 40px apart with "+" in the gaps (Figma x 320..1600).
   Below 1024 the row wraps (3 per row, 2 on phones) and the "+" signs are hidden. */
.bd-value {
  position: relative;
  overflow: hidden;
  padding: 96px 0 110px;
  background: #06070a;
  color: #fff;
  text-align: center;
}
@media (min-width: 1024px) { .bd-value { padding: 150px 0 170px; } }
/* Figma: white 6% ellipse 1300 x 520 at y -200, blurred (exported with its blur) */
.bdvalue-glow {
  position: absolute; left: 50%; top: -360px;
  width: 1620px; max-width: none; height: 840px;
  translate: -50% 0;
  pointer-events: none;
}
.bdvalue-wrap { position: relative; width: min(1280px, 100% - 32px); margin: 0 auto; }

.bdvalue-chip {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.8);
}
.bdvalue-title {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  margin-top: 22px;
  font-size: 32px; font-weight: 700; line-height: 1.26; letter-spacing: -0.03em;
}
.bdvalue-hl { padding: 0.034em 0.38em 0.138em; border-radius: 0.31em; background: #fff; color: #0b0d14; }  /* 2 / 22 / 8, radius 18 at 58px */
.bdvalue-lead { margin-top: 18px; font-size: 17px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
@media (min-width: 1024px) {
  .bdvalue-title { margin-top: 28px; font-size: 58px; }   /* top 211 */
  .bdvalue-lead { margin-top: 20px; font-size: 20px; }    /* top 314 */
}

/* ---- the six products ---- */
.bdvalue-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: center;
  gap: 40px 24px;
  margin-top: 56px;
}
@media (min-width: 640px) { .bdvalue-row { grid-template-columns: repeat(3, 180px); gap: 48px 40px; } }
.bdvalue-plus { display: none; }
@media (min-width: 1024px) {
  .bdvalue-row { display: flex; justify-content: center; gap: 0; margin-top: 90px; }   /* items top 429 */
  .bdvalue-plus {
    display: block; flex: none; width: 40px; margin-top: 77px;   /* "+" top 506.5 */
    font-size: 36px; font-weight: 700; line-height: 1.26; color: rgba(255, 255, 255, 0.35);
  }
}
.bdvalue-item { display: flex; flex: none; flex-direction: column; align-items: center; width: 100%; max-width: 180px; }
@media (min-width: 1024px) { .bdvalue-item { width: 180px; height: 363px; } }
.bdvalue-art { position: relative; width: 100%; height: 200px; }
/* Figma: 144 x 22 black 70% ellipse at y 190 under each box, blurred */
.bdvalue-floor { position: absolute; left: 50%; top: 176px; width: 172px; max-width: none; height: 50px; translate: -50% 0; }
.bdvalue-box {
  position: relative;
  display: block;
  width: auto; max-width: 100%; height: 200px;
  margin: 0 auto;
  object-fit: contain;
}
.bdvalue-name { margin-top: 26px; font-size: 22px; font-weight: 700; line-height: 1.26; letter-spacing: -0.01em; }   /* top 226 */
.bdvalue-desc { min-height: 40px; margin-top: 6px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.55); }  /* top 260, 2 lines */
.bdvalue-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px;                                   /* top 320 */
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  font-size: 13px; font-weight: 500; line-height: 1.26; color: rgba(255, 255, 255, 0.55);
}
.bdvalue-pill b { font-size: 20px; font-weight: 700; color: #fff; }

/* ---- bundle-only upgrades and bonuses (added Oct 29) ---- */
.bdextra {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1120px;
  margin: 48px auto 0;
  text-align: left;
}
@media (min-width: 640px) { .bdextra { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .bdextra { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; } }
.bdextra-item {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}
.bdextra-tag {
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 11px; font-weight: 700; line-height: 1.26; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.8);
}
.bdextra-tag--only { background: #ffd34d; color: #0b0d14; }
.bdextra-name { margin-top: 14px; font-size: 22px; font-weight: 700; line-height: 1.26; letter-spacing: -0.01em; }
.bdextra-desc { flex: 1; margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.bdextra-item .bdvalue-pill { margin-top: 18px; }
@media (min-width: 1024px) {
  .bdextra-item { padding: 28px 30px 30px; }
  .bdextra-name { font-size: 26px; }
  .bdextra-desc { font-size: 17px; }
}

/* ---- "=" divider: a 1px line fading at both ends with a ringed disc in the middle ---- */
.bdvalue-eq { position: relative; height: 56px; margin-top: 40px; }
.bdvalue-eq::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 28px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0));
}
.bdvalue-eq span {
  position: relative;
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto;
  background: url("../images/icons/bd-value-equals-ring.svg") center / 56px 56px no-repeat;   /* #06070a disc, 25% white ring */
  font-size: 30px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 1024px) { .bdvalue-eq { margin-top: 53px; } }   /* line at y 873 */

.bdvalue-label { margin-top: 32px; font-size: 13px; font-weight: 700; line-height: 1.26; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); }
.bdvalue-total { margin-top: 10px; font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.bdvalue-today { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 16px; line-height: 1.26; }
.bdvalue-today span { font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
.bdvalue-today b { font-size: 28px; font-weight: 700; }
.bdvalue-today em { padding: 6px 14px; border-radius: 999px; background: #fff; font-size: 15px; font-style: normal; font-weight: 700; color: #0b0d14; }
@media (min-width: 1024px) {
  .bdvalue-label { margin-top: 42px; font-size: 14px; }   /* top 943 */
  .bdvalue-total { margin-top: 24px; font-size: 140px; }  /* $797, top 967 (normal line box) */
  .bdvalue-today { margin-top: 11px; }                    /* top 1136 */
  .bdvalue-today span { font-size: 24px; }
  .bdvalue-today b { font-size: 34px; }
}

/* JVZoo buy button (JVZoo's own embed: a link wrapping their button image) */
.jvzoo-buy { display: block; width: min(100%, 520px); margin: 28px auto 0; line-height: 0; }
.jvzoo-buy img { display: block; width: 100%; height: auto; border: 0; }

/* Launch Kit timers (launch.askankit.com/timer.js). It fills each empty [data-lk-timer] with
   .lk-cd > .lk-cd__unit > .lk-cd__num + .lk-cd__label and keeps it hidden until its time arrives.
   These rules give that markup the look of the .timer / .mini-timer boxes above (copied from them),
   with the colons drawn between units. The days unit only shows while more than 24 hours are left. */
.timer .lk-cd { display: flex; align-items: flex-start; gap: 10px; }
.timer .lk-cd__unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.timer .lk-cd__num { display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: rgba(255, 255, 255, 0.07); box-shadow: 0 10px 24px -6px rgba(11, 42, 92, 0.08); font-size: 52px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; }
.timer .lk-cd__label { font-size: 13px; font-weight: 500; line-height: 1.23; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); }
.timer .lk-cd__unit + .lk-cd__unit::before { width: 16px; height: 96px; font-size: 40px; font-weight: 700; line-height: 96px; text-align: center; color: rgba(255, 255, 255, 0.3); }
.timer--sm .lk-cd { gap: 8px; }
.timer--sm .lk-cd__unit { gap: 3.2px; }
.timer--sm .lk-cd__num { width: 76.8px; height: 76.8px; border-radius: 17.6px; font-size: 41.6px; }
.timer--sm .lk-cd__label { font-size: 10.4px; }
.timer--sm .lk-cd__unit + .lk-cd__unit::before { width: 12.8px; height: 76.8px; font-size: 32px; line-height: 76.8px; }
.timer--light .lk-cd__num { border: 0; background: var(--dark-ink); }
.timer--light .lk-cd__label, .timer--light .lk-cd__unit + .lk-cd__unit::before { color: rgba(11, 13, 20, 0.45); }
@media (max-width: 639px) {
  .timer .lk-cd__num { width: 72px; height: 72px; border-radius: 18px; font-size: 38px; }
  .timer .lk-cd__unit + .lk-cd__unit::before { height: 72px; line-height: 72px; font-size: 30px; }
  .timer--sm .lk-cd__num { width: 64px; height: 64px; border-radius: 15px; font-size: 34px; }
  .timer--sm .lk-cd__unit + .lk-cd__unit::before { height: 64px; line-height: 64px; font-size: 26px; }
}
.timer:has([data-lk-timer][hidden]), .mini-timer:has([data-lk-timer][hidden]) { display: none; }
.timer .lk-cd { gap: 36px; }
.timer--sm .lk-cd { gap: 28.8px; }
.timer .lk-cd__unit, .mini-timer .lk-cd__unit { position: relative; min-width: 0; }
.timer .lk-cd__num { line-height: 1; }
.timer .lk-cd__label { text-transform: uppercase; opacity: 1; }
.timer .lk-cd__unit + .lk-cd__unit::before, .mini-timer .lk-cd__unit + .lk-cd__unit::before { content: ":"; position: absolute; top: 0; }
.timer .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 10px); }
.timer--sm .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 8px); }
.lk-cd__unit--days[hidden] + .lk-cd__unit::before { content: none !important; }
.mini-timer .lk-cd { display: flex; align-items: center; gap: 22px; }
.mini-timer .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); line-height: 1; }
.mini-timer .lk-cd__num { line-height: 1.2; }
.mini-timer .lk-cd__label { display: none; }
.mini-timer { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
.mini-timer > span:first-child { white-space: nowrap; }
/* phones: four boxes (with days) must fit in 358px */
@media (max-width: 639px) {
  .timer .lk-cd { gap: 22px; }
  .timer .lk-cd__num { width: 64px; height: 64px; border-radius: 15px; font-size: 34px; }
  .timer .lk-cd__unit + .lk-cd__unit::before { right: calc(100% + 3px); left: auto; width: 16px; height: 64px; font-size: 26px; line-height: 64px; }
}

/* ============ PRODUCT BOXES: bigger in every product section ============
   Each stage (glow, floor, contact shadow, box, reflection) is scaled as one piece by
   --box-zoom, so the box keeps its floor and glow. 1 = the Figma size. */
:root { --box-zoom: 1.4; }
.bdcommercial-stage { --k: calc(max(var(--s), 0.5px) * var(--box-zoom)); }
.bdelite-stage,
.bdpro-stage { --hs: calc(max(var(--s), 0.5px) * var(--box-zoom)); }
.bd-studio .bdstudio-stage,
.bd-agent .bdagent-stage { --k: calc(max(var(--s), 0.5px) * var(--box-zoom)); }
.bd-reseller .bdreseller-stage { --st: calc(max(var(--s), 0.45px) * var(--box-zoom)); }

/* ============ PRODUCT SECTIONS: chip + headline first, the box under them ============
   Each section now opens with its chip, headline and sub line; the box stage follows.
   The stage's empty top (120 Figma px above the box) is pulled up so the gap from the sub
   line to the box is --box-gap. Text sits above the stage glow (z-index). */
:root { --box-gap: clamp(20px, 2.2vw, 44px); --part-top: clamp(64px, 7.3vw, 140px); }
.bd-elite, .bd-pro, .bd-studio, .bd-agent, .bd-reseller { padding-top: var(--part-top); }
.bdcommercial-in { padding-top: var(--part-top); }
.bdcommercial-stage { margin-top: var(--box-gap); }
.bdelite-stage { margin-top: calc(var(--box-gap) - 120 * var(--hs)); }
.bdpro-stage { margin-top: calc(var(--box-gap) - 120 * var(--hs)); }
.bd-studio .bdstudio-stage,
.bd-agent .bdagent-stage { margin-top: calc(var(--box-gap) - 120 * var(--k)); }
.bd-reseller .bdreseller-stage { margin-top: calc(var(--box-gap) - 120 * var(--st)); }
.bdcommercial-chip, .bdcommercial-head, .bdcommercial-sub,
.bdelite-head, .bdpro-head,
.bdstudio-chip, .bdstudio-title, .bdstudio-sub,
.bdagent-chip, .bdagent-title, .bdagent-sub,
.bd-reseller .bdreseller-chip, .bd-reseller .bdreseller-head, .bd-reseller .bdreseller-sub { position: relative; z-index: 1; }

/* ---- box fixes after the boxes grew ---- */
/* Reseller: the shadow follows the box outline, not its rectangle (the rectangle showed as a pale panel) */
.bd-reseller .bdreseller-box {
  box-shadow: none;
  filter: drop-shadow(0 calc(30 * var(--st)) calc(30 * var(--st)) rgba(11, 13, 20, 0.18));
}
/* Agent: the kitten bubble fades out at its edges (a mask), instead of painted dark bands,
   so it blends with the lit floor of the box above it */
.bdagent-bubble__fade { display: none; }
.bdagent-bubble img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 76%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 76%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
          mask-composite: intersect;
}

/* ============ COUPON STRIP: floating glass bar at the bottom, as wide as its content, at most 80% (js/coupon-strip.js) ============
   Coupon code(s) (click to copy), the Launch Kit "rockettoons" countdown and a buy button.
   It slides up once the hero is scrolled past. The countdown part hides itself while the
   timer isn't running (timer.js keeps [data-lk-timer] hidden). Not shown on phones for now. */
.cstrip {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 900;
  width: max-content;
  max-width: 80vw;
  padding: 12px 14px 12px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(14, 16, 36, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: inherit;
  transform: translate(-50%, calc(100% + 40px));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cstrip.is-on { transform: translate(-50%, 0); }
.cstrip__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.cstrip__codes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.cstrip__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.cstrip__code {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1.5px dashed rgba(255, 214, 102, 0.8);
  border-radius: 10px;
  background: rgba(255, 214, 102, 0.1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cstrip__code:hover { background: rgba(255, 214, 102, 0.2); }
.cstrip__code b { font-weight: 800; letter-spacing: 0.04em; color: #ffd666; }
.cstrip__code small { font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.cstrip__code.is-copied b { color: #7dffa8; }
.cstrip__time { display: flex; align-items: center; gap: 8px; }
.cstrip__time:has([data-lk-timer][hidden]) { display: none; }
.cstrip__time-label { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.cstrip .lk-cd { gap: 10px; align-items: baseline; }
.cstrip .lk-cd__unit { flex-direction: row; align-items: baseline; gap: 1px; min-width: 0; }
.cstrip .lk-cd__num {
  min-width: 0;
  padding: 0;
  background: none;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #ffd666;
}
.cstrip .lk-cd__label { margin-left: 2px; font-size: 14px; font-weight: 700; text-transform: lowercase; letter-spacing: 0; opacity: 0.7; }
.cstrip__buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe08a 0%, #ffc94d 55%, #f5a623 100%);
  color: #141826;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cstrip__buy:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245, 166, 35, 0.45); }
.cstrip__buy i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #141826;
  color: #ffd666;
  font-style: normal;
  font-size: 13px;
}
/* phones and small tablets: not shown for now */
@media (max-width: 899px) {
  .cstrip { display: none; }
}
/* the page can scroll to its very end without the strip covering it */
@media (min-width: 900px) {
  body.has-cstrip { padding-bottom: calc(var(--cstrip-h, 0px) + 32px); }
}
@media (min-width: 900px) {
  /* coupon and countdown sit together on the left, a thin line between them; the button on the right */
  .cstrip__in { flex-wrap: nowrap; justify-content: flex-start; gap: 28px; }
  .cstrip__time { padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
  .cstrip__buy { margin-left: 8px; }
  .cstrip__codes { justify-content: flex-start; flex-wrap: nowrap; }
  .cstrip__code { font-size: 16px; padding: 8px 14px; }
  .cstrip__time-label { font-size: 16px; }
  .cstrip .lk-cd__num { font-size: 30px; }
  .cstrip__buy { font-size: 16px; padding: 11px 12px 11px 22px; }
}


/* ============ REPLAY: the live premiere replay in the hero, between the headline and the product
   boxes (Vimeo embed). Its height is --rp-h, so the shelf's lights (Figma px from the hero top)
   move down by the same amount on .hero--replay. ============ */
.hero--replay {
  --rp-w: min(960px, 100cqw - 32px);
  --rp-h: calc(40px + 20px + 16px + var(--rp-w) * 9 / 16 + 24px);
}
.hero--replay .hero__light--rim,
.hero--replay .hero__light--gold,
.hero--replay .hero__light--spot { translate: 0 var(--rp-h); }
.replay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: var(--rp-w);
  margin: 40px auto 24px;
}
.replay__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.replay__label i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e5242c; box-shadow: 0 0 0 4px rgba(229, 36, 44, 0.25); }
.replay__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: #000;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 90px rgba(255, 190, 60, 0.12);
}
.replay__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 639.98px) { .replay__label { font-size: 11px; letter-spacing: 0.06em; } .replay__screen { border-radius: 14px; } }