/* ==========================================
   RocketToons OTO4 — Agent (MCP) (Figma 738:128 "RocketToons OTO4 -- MCP", 1920 wide, 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).
   Shared components (order bar, buy box, compare table, guarantee, pricing) follow the
   same code as elite/ pro/ studio/, restyled dark. "How it works", "Watch it work" and
   the eight bento tiles are merged in at the end (PARTS).
   ========================================== */

/* ============ PAGE THEME ============ */
:root {
  --page: #050507;
  --ink: #141826;                /* text on yellow */
  --gold: #ffd15e;               /* highlight boxes, numbers, accents */
  --muted: rgba(255, 255, 255, 0.55);
  --card: linear-gradient(180deg, #17181d 0%, #101115 100%);
  --card-line: rgba(255, 255, 255, 0.06);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 100%);
  --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);
}


/* ============ 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; }

/* Liquid glass (Figma "… — liquid glass" layers): frosted gradient, white hairline, inset light */
.glass {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: var(--glass-in);
}
/* Glass highlight box inside a headline: sized in em of the headline */
.glass--hl {
  display: inline-flex;
  align-items: center;
  height: 1.35em;                 /* 90.72 at 67.2 */
  padding: 0 0.2875em;            /* 19.32 */
  border-width: 0.0125em;
  border-radius: 0.4em;           /* 26.88 */
  box-shadow: var(--glass-in), 0 0.25em 0.5em -0.125em rgba(0, 0, 0, 0.55);
  line-height: 1;
  color: #fff;
}
/* Small glass chip above a section headline (Figma "Chip") */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-width: 1.2px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 1.5px 2px rgba(255, 255, 255, 0.35), 0 24px 24px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
}
@media (min-width: 1024px) { .chip { font-size: 13px; } }

/* Headline with a yellow highlight box on its second line (low payment, pricing, FAQ) */
.hl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  padding: 0 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
  color: #fff;
}
.hl-box {
  display: inline-block;
  padding: 0 0.34em;              /* 20.4 at 60 */
  border-radius: 0.36em;          /* 21.6 */
  background: var(--gold);
  line-height: 1.3167;            /* 79 box at 60 */
  white-space: nowrap;
  color: var(--ink);
}

/* Down chevrons (Figma "Down chevrons (animate)" 40 x 40) */
.chevrons {
  display: block;
  width: 36px;
  height: auto;
  margin: 48px auto 0;
  animation: chevrons 1.8s ease-in-out infinite;
}
@media (min-width: 1024px) { .chevrons { width: 40px; } }
@keyframes chevrons {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.6; }
}


/* ============ HERO (Figma "Hero — dark glass (minimal)" 1920 x 1480; order bar + steps on top) ============ */
.hero {
  position: relative;
  overflow-x: clip;               /* the top light is wider than a phone; vertical overflow (floor) stays */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 8px;
  text-align: center;
}
/* "Top light": white 9% ellipse 1500 x 520 at (210, -200), blur 100 */
.hero__light {
  position: absolute;
  left: 50%;
  top: -200px;
  width: min(1500px, 120%);
  height: 520px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  filter: blur(100px);
  pointer-events: none;
}

/* Order bar (Figma "Order status bar" 1920 x 52) and steps (496 x 52) */
.order-bar {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 52px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0b0f;
  font-size: 16px;
}
.order-bar img { width: 20px; height: 20px; flex: none; }
.order-bar strong { font-weight: 600; color: #ffd36b; }
.order-bar span { color: rgba(255, 255, 255, 0.6); }

.order-steps {
  position: relative;
  display: flex;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 16px auto 0;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
}
.order-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}
.order-step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.order-step__num img { width: 12px; height: 12px; }
.order-step--done .order-step__num { background: #1f9d5c; }
.order-step--now {
  background: linear-gradient(180deg, #fff 0%, #dadde4 100%);
  box-shadow: inset 0 1px 1px #fff, 0 4px 5px rgba(0, 0, 0, 0.4);
  font-weight: 600;
  color: #050507;
}
.order-step--now .order-step__num { background: #050507; color: #fff; }
@media (max-width: 639px) {
  .order-bar { font-size: 14px; }
  .order-steps { max-width: calc(100% - 24px); gap: 2px; padding: 4px; }
  .order-step { padding: 5px 7px 5px 5px; gap: 5px; font-size: 11px; }
  .order-step__num { width: 16px; height: 16px; font-size: 9px; }
  .order-step__num img { width: 10px; height: 10px; }
}

/* Product chip (Figma "Product chip" 321 x 38) */
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 48px;
  padding: 9px 16px 9px 14px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), inset 0 1.5px 1px rgba(255, 255, 255, 0.3), 0 24px 24px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.4;
}
.hero__chip i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.8); }
.hero__chip b { font-weight: 700; color: rgba(255, 255, 255, 0.95); }
.hero__chip-dot { font-weight: 700; color: rgba(255, 255, 255, 0.35); }
.hero__chip span:last-child { font-weight: 500; color: rgba(255, 255, 255, 0.6); }

/* Headline (Figma "Headline" 1428 x 184.8, 67.2px) */
.hero__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  padding: 0 16px;
  font-size: clamp(30px, 3.5vw, 67.2px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.hero__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.1em 0.225em;             /* 15.12 */
}
.hero__line--dim { gap: 0.1em 0.25em; color: rgba(255, 255, 255, 0.55); }  /* 16.8 */

/* Agent icon morph (Figma 745:131 + spec 745:139): glass tile 80.64 (1.2em), icons 55.44 */
.morph {
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  overflow: hidden;
  border: 0.01875em solid rgba(255, 255, 255, 0.7);   /* 1.26 */
  border-radius: 0.375em;                               /* 25.2 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow: var(--glass-in), 0 0.25em 0.5em -0.125em rgba(0, 0, 0, 0.55);
}
.morph__icon {
  position: absolute;
  left: 0.16875em;                /* 11.34 */
  top: 0.16875em;
  width: 0.825em;                 /* 55.44 */
  height: 0.825em;
  border-radius: 0.25em;          /* 16.8 */
  object-fit: cover;
  opacity: 0;
}
.morph__icon.is-on { opacity: 1; }
.morph__spec {
  position: absolute;
  left: 0.20625em;                /* 13.86 */
  top: 0.04375em;                 /* 2.94 */
  width: 0.75em;                  /* 50.4 */
  height: 0.1em;                  /* 6.72 */
  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);
}

.hero__sub {
  position: relative;
  margin-top: 14px;
  padding: 0 16px;
  font-size: clamp(15px, 1.146vw, 22px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.55);
}

/* Video card 1200 x 675 with its ambient light, floor reflection and the composer
   overlapping its bottom (composer top 1231 = video bottom 1285 - 54) */
.hero__stage {
  position: relative;
  container-type: inline-size;
  width: min(1200px, 100% - 32px);
  margin-top: 56px;
}
.hero__ambient {
  position: absolute;
  left: -4.1667%;                 /* 1300 x 700 at (-50, +20) of the card */
  top: 2.963%;
  width: 108.3333%;
  height: 103.7037%;
  object-fit: cover;
  opacity: 0.55;
  filter: blur(75px);
  pointer-events: none;
}
.hero__video {
  position: relative;
  aspect-ratio: 1200 / 675;
  overflow: hidden;
  border-radius: 28px;
  background: #000;
  box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7);
}
.hero__video::after {             /* "Rim light" */
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: inherit;
  pointer-events: none;
}
.hero__video button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  translate: -50% -50%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), inset 0 1.5px 1px rgba(255, 255, 255, 0.3), 0 24px 24px rgba(0, 0, 0, 0.5);
  transition: scale 0.2s;
}
.hero__play img { width: 28px; height: 32px; margin-left: 4px; }
.hero__video button:hover .hero__play { scale: 1.05; }
.hero__toast {                    /* "Toast — film ready" at (847, 24) */
  position: absolute;
  right: 2%;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), inset 0 1.5px 1px rgba(255, 255, 255, 0.3), 0 24px 24px rgba(0, 0, 0, 0.5);
  font-size: 15px;
  line-height: 1.2;
  white-space: pre;
}
.hero__toast b { font-weight: 700; color: #fff; }
.hero__toast > span:last-child { font-weight: 500; color: rgba(255, 255, 255, 0.65); }
.hero__toast-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: #34d399; }
.hero__toast-check img { width: 12px; height: 12px; }

.hero__floor {                    /* 1200 x 260, 14px under the 1200 x 675 card */
  position: absolute;
  left: 0;
  top: calc(100cqw * 675 / 1200 + 14px);
  width: 100%;
  height: calc(100cqw * 260 / 1200);
  overflow: hidden;
  pointer-events: none;
}
.hero__floor img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 675;
  object-fit: cover;
  border-radius: 28px;
  rotate: 180deg;
  opacity: 0.14;
  filter: blur(3px);
}
.hero__floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 7, 0.2) 0%, #050507 80%);
}

/* Composer — liquid glass (860 x 96, radius 48) */
.composer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(860px, 100% - 24px);
  height: 96px;
  margin: -54px auto 0;
  padding: 0 16px 0 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.07) 100%), rgba(11, 12, 18, 0.35);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 10px 18px rgba(255, 255, 255, 0.12), inset 0 2px 2px rgba(255, 255, 255, 0.5),
              0 10px 10px rgba(0, 0, 0, 0.35), 0 40px 40px rgba(0, 0, 0, 0.7);
  text-align: left;
}
.composer__spec {
  position: absolute;
  left: 7%;
  top: 4.5px;
  width: 86%;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  filter: blur(3px);
}
.composer__agents { display: flex; flex: none; }
.composer__agents img {
  width: 44px;
  height: 44px;
  border: 2.5px solid #14151c;
  border-radius: 13px;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
  object-fit: cover;
}
.composer__agents img + img { margin-left: -8px; }
.composer__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 25px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.92);
}
.composer__caret {
  display: inline-block;
  width: 2px;
  height: 24px;
  margin-left: 2px;
  vertical-align: -5px;
  background: rgba(255, 255, 255, 0.9);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.composer__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #d9dce3 100%);
  box-shadow: inset 0 1.5px 1px #fff, 0 8px 9px rgba(0, 0, 0, 0.4);
}
.composer__send img { width: 22px; height: 22px; }

.hero__works {
  position: relative;
  margin-top: 30px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 639px) {
  .hero__chip { margin-top: 32px; font-size: 12px; gap: 8px; }
  .hero__stage { margin-top: 32px; }
  .hero__video { border-radius: 16px; }
  .hero__play { width: 60px; height: 60px; }
  .hero__play img { width: 18px; height: 20px; }
  .hero__toast { top: 8px; right: 8px; gap: 5px; padding: 5px 9px 5px 6px; font-size: 10px; }
  /* headline flows as text on phones so the glass words sit inline instead of on their own rows */
  .hero__line { display: block; }
  .hero__title .glass--hl, .hero__title .morph { vertical-align: middle; margin: 0.06em 0; }
  .morph { position: relative; display: inline-block; }
  .hero__toast-check { width: 16px; height: 16px; }
  .hero__toast-check img { width: 9px; height: 9px; }
  .composer { height: 60px; gap: 10px; margin-top: -30px; padding: 0 8px 0 12px; border-radius: 30px; }
  .composer__agents img { width: 30px; height: 30px; border-width: 2px; border-radius: 9px; }
  .composer__agents img + img { margin-left: -10px; }
  .composer__text { font-size: 14px; }
  .composer__caret { height: 16px; vertical-align: -3px; }
  .composer__send { width: 42px; height: 42px; }
  .composer__send img { width: 16px; height: 16px; }
  .hero__works { margin-top: 20px; font-size: 12px; }
}
@media (min-width: 1024px) {
  .hero__chip { margin-top: 88px; }          /* chip top 208 */
  .hero__title { margin-top: 32px; }         /* headline top 278 */
  .hero__stage { margin-top: 105px; }        /* video top 610 */
}


/* ============ BUY BOX (Figma "Buy box" 627 x 617) ============ */
.buy-box {
  position: relative;             /* above the hero's floor reflection, which runs into it */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
  padding: 0 16px;
  text-align: center;
}
@media (min-width: 1024px) { .buy-box { gap: 28px; margin-top: 125px; } }

.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;
  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; 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% (Figma 762: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; }
@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-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: #fff; }

/* CTA with its soft ring (Figma "CTA — Buy (ring)" 627 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: transform 0.2s, filter 0.2s;
}
.cta:hover .cta__btn { transform: translateY(-2px); 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): four white cards, the seal, "30 Days Money Back Guarantee" */
.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; }
@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;
  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); }


/* ============ 02 URGENCY — AGENT VS COMMERCIAL (Figma "02 Urgency — Agent vs Commercial" 1920 x 970) ============ */
.vs { margin-top: 96px; text-align: center; }
@media (min-width: 1024px) { .vs { margin-top: 180px; } }
.vs__title { font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; color: #fff; }
.vs__offer { position: relative; display: inline-block; }
.vs__swoosh {
  position: absolute;
  left: 0;
  top: 1.15em;                   /* 69 at 60 */
  width: 100%;
  height: auto;
}
.vs__lead { margin-top: 28px; font-weight: 700; line-height: 1.3; color: #fff; }
.vs__elig { margin-top: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }
.vs__elig mark {
  margin: 0 2px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--gold);
  font-size: 0.78em;             /* 14 at 18 */
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}

/* Compare table: a grid of rows. The features panel and the two plan columns are
   absolutely placed in their grid areas so every cell sits on the same row tracks.
   Desktop: panel 780, columns 210, 35 apart; header 72, rows 64, foot 20. */
.cmp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px 82px;
  grid-template-rows: 56px repeat(9, minmax(56px, auto)) 14px;
  column-gap: 6px;
  max-width: 1312px;
  margin: 40px auto 0;
  padding: 0 12px;
  text-align: left;
}
@media (min-width: 1024px) {
  .cmp {
    grid-template-columns: 780px 210px 210px;
    grid-template-rows: 72px repeat(9, 64px) 20px;
    column-gap: 35px;
    justify-content: start;
    width: 1280px;
    max-width: calc(100% - 32px);
    margin-top: 18px;
    padding: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1319px) {
  .cmp { grid-template-columns: minmax(0, 1fr) 190px 190px; column-gap: 20px; }
}
.cmp__panel, .cmp__plan, .cmp__com { position: absolute; inset: 0; pointer-events: none; }
.cmp__panel {
  grid-column: 1 / 2;
  grid-row: 2 / -2;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: var(--card);
}
.cmp__plan {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffe08a 0%, #f5b83d 100%);
  box-shadow: 0 20px 25px rgba(245, 184, 61, 0.35);
}
.cmp__com {
  grid-column: 3 / 4;
  grid-row: 1 / -1;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: var(--card);
}
@media (min-width: 1024px) {
  .cmp__panel { border-radius: 24px; }
  .cmp__plan, .cmp__com { border-radius: 28px; }
}

.cmp__cell { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }
.cmp__head { font-weight: 700; line-height: 1.2; }
.cmp__head--plan { font-size: 13px; letter-spacing: 0.12em; color: var(--ink); }
.cmp__head--com { font-size: 10px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.5); }
@media (min-width: 1024px) {
  .cmp__head--plan { font-size: 18px; }
  .cmp__head--com { font-size: 15px; letter-spacing: 0.12em; }
}

.cmp__feat {
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  color: rgba(255, 255, 255, 0.55);
}
.cmp__feat::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.cmp__feat b { font-weight: 700; color: #fff; }
/* row separators inside the panel (Figma: 1px at 6% white, 23px in from the panel edges) */
.cmp__feat ~ .cmp__feat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
@media (min-width: 1024px) {
  .cmp__feat { gap: 17px; padding: 0 24px 0 27px; font-size: 18px; line-height: 23px; }
  .cmp__feat::before { width: 7px; height: 7px; }
  .cmp__feat ~ .cmp__feat::after { left: 23px; right: 23px; }
}

.cmp__plan-cell { font-size: 12px; font-weight: 700; color: var(--ink); }
.cmp__com-cell { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.4); }
.cmp__com-cell s { text-decoration-thickness: from-font; }
.cmp__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #141826;
}
.cmp__com-cell .cmp__mark { background: rgba(255, 255, 255, 0.08); }
.cmp__mark img { width: 12px; height: 12px; }
.cmp__com-cell .cmp__mark img { width: 10px; height: 10px; }
@media (min-width: 1024px) {
  .cmp__plan-cell, .cmp__com-cell { font-size: 16px; }
  .cmp__mark { width: 30px; height: 30px; }
  .cmp__mark img { width: 14px; height: 14px; }
  .cmp__com-cell .cmp__mark img { width: 12px; height: 12px; }
}


/* ============ 03 INSIDE AGENT — BENTO (Figma "03 Inside Agent — bento v2 (varied sizes)" 1920 x 1512) ============
   Chip, two-line headline, then a 1280-wide grid of eight tiles on 4 columns x 4 rows
   (columns 304.84, gaps 20.21; rows 1-3 252.63, row 4 353.68). Each tile slot is
     <div class="bt bt-NN" style="--tw: W; --th: H;">…tile part…</div>
   with W x H its Figma size. --f is one Figma px of that tile, worked out from the grid's
   width (the grid is the container), so it holds on the tile and everything inside it.
   Desktop: the whole grid is the Figma grid scaled to its width (--f = 100cqw / 1280).
   640-1023: two columns, wide tiles span both. Phones: one column. */
.bento { margin-top: 96px; text-align: center; container-type: inline-size; } /* container for the grid's own sizes below */
@media (min-width: 1024px) { .bento { margin-top: 160px; } }
.bento__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  margin-top: 21px;
  padding: 0 16px;
  font-weight: 700;
  font-size: clamp(28px, 3.15vw, 60.48px);
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.bento__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1em 0.25em; }
.bento__head .glass--hl { height: 1.3333em; padding: 0 0.2889em; border-radius: 0.3889em; }  /* 80.64 / 17.47 / 23.52 at 60.48 */
.bento__line--dim { color: rgba(255, 255, 255, 0.55); }

.bento__grid {
  --gap: 16px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--gap);
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
  text-align: left;
}
.bt {
  --tile-w: 100cqw;
  --f: calc(var(--tile-w) / var(--tw));
  position: relative;
  aspect-ratio: var(--tw) / var(--th);
  min-width: 0;
}
@media (min-width: 640px) {
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt { --tile-w: calc((100cqw - var(--gap)) / 2); }
  .bt-01, .bt-02, .bt-05, .bt-06 { grid-column: span 2; --tile-w: 100cqw; }
}
@media (min-width: 1024px) {
  /* The grid's own gap and rows can't use its own cqw (that would measure the section),
     so they are worked out from the grid width: min(1280px, section width - 32px). */
  .bento__grid {
    --gw: min(1280px, 100cqw - 32px);
    --gap: calc(var(--gw) * 20.21 / 1280);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, calc(var(--gw) * 252.63 / 1280)) calc(var(--gw) * 353.68 / 1280);
    align-items: stretch;
    margin-top: 80px;
  }
  .bt { --tile-w: calc(100cqw * var(--tw) / 1280); aspect-ratio: auto; }
  .bt-01 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bt-02 { grid-column: 3 / 5; grid-row: 1; }
  .bt-03 { grid-column: 3; grid-row: 2; }
  .bt-04 { grid-column: 4; grid-row: 2 / 4; }
  .bt-05 { grid-column: 1 / 4; grid-row: 3; }
  .bt-06 { grid-column: 1 / 3; grid-row: 4; }
  .bt-07 { grid-column: 3; grid-row: 4; }
  .bt-08 { grid-column: 4; grid-row: 4; }
}


/* ============ 03b WHAT YOU CAN RUN FROM CHAT (Figma "03b What you can run from chat — bento" 804:128, 1920 x 1198) ============
   Headline (64px, mint "From Chat" box 344 x 84), then a 1280-wide grid of six gradient tiles on
   4 columns x 3 rows (columns 302, gaps 24, rows 300). Each tile slot is
     <div class="rn rn-NN" style="--tw: W; --th: H;">…</div>
   with W x H its Figma size; --f is one Figma px of that tile (same scheme as the bento above).
   Desktop: the Figma grid scaled to its width. 640-1023: two columns, wide tiles span both. Phones: one column. */
.run { margin-top: 96px; text-align: center; container-type: inline-size; }
@media (min-width: 1024px) { .run { margin-top: 160px; } }
.run__head .hl-box {
  border-radius: 0.34em;         /* 21.76 at 64 */
  background: linear-gradient(166deg, #c8fbea 0%, #9ff0d5 71.43%);
  color: #161829;
}

.run__grid {
  --gap: 16px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--gap);
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
  text-align: left;
}
.rn {
  --tile-w: 100cqw;
  --f: calc(var(--tile-w) / var(--tw));
  position: relative;
  aspect-ratio: var(--tw) / var(--th);
  min-width: 0;
}
@media (min-width: 640px) {
  .run__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn { --tile-w: calc((100cqw - var(--gap)) / 2); }
  .rn-01, .rn-02, .rn-05, .rn-06 { grid-column: span 2; --tile-w: 100cqw; }
}
@media (min-width: 1024px) {
  .run__grid {
    --gw: min(1280px, 100cqw - 32px);
    --gap: calc(var(--gw) * 24 / 1280);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, calc(var(--gw) * 300 / 1280));
    align-items: stretch;
    margin-top: 80px;
  }
  .rn { --tile-w: calc(100cqw * var(--tw) / 1280); aspect-ratio: auto; }
  .rn-01 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .rn-02 { grid-column: 3 / 5; grid-row: 1; }
  .rn-03 { grid-column: 3; grid-row: 2; }
  .rn-04 { grid-column: 4; grid-row: 2; }
  .rn-05 { grid-column: 1 / 3; grid-row: 3; }
  .rn-06 { grid-column: 3 / 5; grid-row: 3; }
}

/* ---- tile parts (Figma: radius 44, padding 40; label 13/0.12em; pills 13 bold, 8 x 14, radius 99) ---- */
.rn .rn-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(44 * var(--f));
}
.rn .rn-card > * { position: absolute; margin: 0; }
.rn .rn-label {
  left: calc(40 * var(--f));
  top: calc(40 * var(--f));
  font-size: max(10px, calc(13 * var(--f)));
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(22, 24, 41, 0.55);
}
.rn .rn-title {
  left: calc(40 * var(--f));
  top: calc(76 * var(--f));
  width: calc(290 * var(--f));
  font-size: calc(40 * var(--f));
  font-weight: 700;
  line-height: calc(44 * var(--f));
  letter-spacing: -0.03em;
  color: #161829;
}
.rn .rn-pill {
  left: calc(40 * var(--f));
  top: calc(228 * var(--f));
  display: flex;
  align-items: center;
  padding: calc(8 * var(--f)) calc(14 * var(--f));
  border-radius: calc(99 * var(--f));
  background: #fff;
  font-size: max(11px, calc(13 * var(--f)));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: #161829;
  filter: drop-shadow(0 calc(8 * var(--f)) calc(9 * var(--f)) rgba(20, 24, 38, 0.18));
}
.rn .rn-pill--mint { background: linear-gradient(170deg, #c8fbea 0%, #9ff0d5 71.43%); }
.rn .rn-pill--dark { background: #161829; color: #fff; }
/* Photo in a white 6px frame, slightly tilted (Figma "Image — agent-N") */
.rn .rn-pic {
  box-sizing: border-box;
  overflow: hidden;
  border: calc(6 * var(--f)) solid #fff;
  border-radius: calc(26 * var(--f));
  box-shadow: 0 calc(24 * var(--f)) calc(48 * var(--f)) calc(-10 * var(--f)) rgba(20, 24, 38, 0.25);
}
.rn .rn-pic img { display: block; width: 100%; height: 100%; border-radius: calc(20 * var(--f)); object-fit: cover; }

/* 01 Daily channel (628 x 624): purple, 52px title, 470 x 330 photo at 4deg, mint pill */
.rn-01 .rn-card { background: linear-gradient(135deg, #7b74f0 0%, #4d3ed6 71.43%); }
.rn-01 .rn-label { color: rgba(255, 255, 255, 0.7); }
.rn-01 .rn-title { width: calc(420 * var(--f)); font-size: calc(52 * var(--f)); line-height: calc(57 * var(--f)); color: #fff; }
.rn-01 .rn-pic {
  left: calc(166 * var(--f));
  top: calc(340 * var(--f));
  width: calc(470 * var(--f));
  height: calc(330 * var(--f));
  border-radius: calc(34 * var(--f));
  rotate: 4deg;
}
.rn-01 .rn-pic img { border-radius: calc(28 * var(--f)); }
.rn-01 .rn-pill { top: calc(552 * var(--f)); }

/* 02 Client work (628 x 300): blue, 250 x 220 photo at -4deg */
.rn-02 .rn-card { background: linear-gradient(154deg, #c9ecff 0%, #8ed0ff 71.43%); }
.rn-02 .rn-pic { left: calc(355.4 * var(--f)); top: calc(31 * var(--f)); width: calc(250 * var(--f)); height: calc(220 * var(--f)); rotate: -4deg; }

/* 03 Batch (302 x 300): coral, 30px title, three tilted pills */
.rn-03 .rn-card { background: linear-gradient(135deg, #ffc2b0 0%, #ff9f8a 71.43%); }
.rn-03 .rn-title, .rn-04 .rn-title { top: calc(70 * var(--f)); width: calc(222 * var(--f)); font-size: calc(30 * var(--f)); line-height: calc(33 * var(--f)); }
.rn-03 .rn-pill--1 { left: calc(39.1 * var(--f)); top: calc(161.1 * var(--f)); rotate: 3deg; }
.rn-03 .rn-pill--2 { left: calc(54.5 * var(--f)); top: calc(195.6 * var(--f)); rotate: -2deg; }
.rn-03 .rn-pill--3 { left: calc(67.4 * var(--f)); top: calc(240.1 * var(--f)); rotate: 2deg; }

/* 04 Ads (302 x 300): yellow, 242 x 150 photo at 3deg hanging off the bottom */
.rn-04 .rn-card { background: linear-gradient(135deg, #fff3c4 0%, #ffe08a 71.43%); }
.rn-04 .rn-pic { left: calc(25.9 * var(--f)); top: calc(180.2 * var(--f)); width: calc(242 * var(--f)); height: calc(150 * var(--f)); border-radius: calc(22 * var(--f)); rotate: 3deg; }
.rn-04 .rn-pic img { border-radius: calc(16 * var(--f)); }

/* 05 Series (628 x 300): lime, 250 x 220 photo at 3deg */
.rn-05 .rn-card { background: linear-gradient(154deg, #e9ffb8 0%, #c6f99a 71.43%); }
.rn-05 .rn-pic { left: calc(342.1 * var(--f)); top: calc(46.4 * var(--f)); width: calc(250 * var(--f)); height: calc(220 * var(--f)); rotate: 3deg; }

/* 06 Quick fixes (628 x 300): pink, 250 x 170 photo at -4deg, dark pill */
.rn-06 .rn-card { background: linear-gradient(154deg, #ffd9e8 0%, #ffb3cf 71.43%); }
.rn-06 .rn-pic { left: calc(353.6 * var(--f)); top: calc(51.1 * var(--f)); width: calc(250 * var(--f)); height: calc(170 * var(--f)); rotate: -4deg; }

/* Phones: the wide tiles are drawn ~360 wide, so hold the 40px titles at a readable size */
@media (max-width: 639px) {
  .rn-02 .rn-title, .rn-05 .rn-title, .rn-06 .rn-title { font-size: max(21px, calc(40 * var(--f))); line-height: 1.1; }
}


/* ============ 04 LOW ONE-TIME PAYMENT (Figma "04 Low one-time payment" 1920 x 1063) ============
   Copy 560 on the left, the drop card 600 x 679 on the right, 120 apart, centred on each other. */
.lowpay { margin-top: 96px; }
@media (min-width: 1024px) { .lowpay { margin-top: 180px; } }
.lowpay__body {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 40px;
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
}
@media (min-width: 1024px) {
  .lowpay__body { flex-direction: row; justify-content: space-between; gap: 60px; margin-top: 80px; }
}
.lowpay__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.57;
  color: rgba(255, 255, 255, 0.62);
}
.lowpay__copy b { font-weight: 700; color: #fff; }
.lowpay__gold { font-weight: 500; color: var(--gold); }
@media (min-width: 1024px) { .lowpay__copy { gap: 22px; font-size: 21px; line-height: 33px; } }

/* Drop card: everything placed in Figma px of the 600 x 679 card (--u) */
.drop-card {
  --u: calc(100cqw / 600);
  position: relative;
  flex: none;
  width: min(600px, 100%);
  aspect-ratio: 600 / 679;
  container-type: inline-size;
  border: 1px solid var(--card-line);
  border-radius: 44px;
  background: radial-gradient(300px 261px at 50% 65.4%, rgba(255, 209, 94, 0.12), rgba(255, 209, 94, 0)), var(--card);
  text-align: center;
}
.drop-card > * { position: absolute; left: 0; right: 0; margin: 0 auto; white-space: nowrap; }
.drop-card__kicker {
  top: calc(47 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
}
.drop-card__kicker--gold { top: calc(257 * var(--u)); color: var(--gold); }
.drop-card__was {
  top: calc(73 * var(--u));
  font-size: calc(88 * var(--u));
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.35);
}
.drop-card__was s { position: relative; text-decoration: none; }
.drop-card__was s::after {        /* red strike 310 x 6, rotated 8deg */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(310 * var(--u));
  height: calc(6 * var(--u));
  translate: -50% -50%;
  rotate: 8deg;
  border-radius: calc(3 * var(--u));
  background: #ff6b6b;
}
.drop-card__arrow { top: calc(197 * var(--u)); width: calc(28 * var(--u)); height: calc(44 * var(--u)); }
.drop-card__price {
  top: calc(267 * var(--u));
  font-size: calc(220 * var(--u));
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -0.06em;
  color: var(--gold);
}
.drop-card__terms {
  top: calc(524 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.drop-card__pill {
  top: calc(584 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  width: max-content;
  padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  border-radius: 99px;
  background: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.drop-card__pill span { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--ink); }
.drop-card__pill img { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
@media (max-width: 639px) { .drop-card { border-radius: 28px; } }
.lowpay .chevrons { margin-top: 64px; }
@media (min-width: 1024px) { .lowpay .chevrons { margin-top: 80px; } }


/* ============ 05 GUARANTEE (Figma "05 Guarantee": card 1280 x 586) ============ */
.gtee { margin-top: 64px; }
@media (min-width: 1024px) { .gtee { margin-top: 120px; } }
.gtee__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: min(1280px, 100% - 32px);
  margin: 0 auto;
  padding: 40px 20px 44px;
  border: 1px solid var(--card-line);
  border-radius: 32px;
  background: radial-gradient(640px 225px at 50% 65.4%, rgba(255, 209, 94, 0.12), rgba(255, 209, 94, 0)), var(--card);
}
.gtee__coin {
  flex: none;
  width: min(240px, 70%);
  height: auto;
  filter: drop-shadow(0 38px 38px rgba(16, 12, 51, 0.35));
}
.gtee__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  font-size: 16px;
  line-height: 1.53;
  color: rgba(255, 255, 255, 0.62);
}
.gtee__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: clamp(22px, 2.19vw, 42px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #fff;
}
.gtee__head .hl-box { margin-left: -0.35em; padding: 0 0.34em; border-radius: 0.36em; font-size: 0.952em; line-height: 1.35; letter-spacing: -0.03em; }
.gtee__text b, .gtee__first { font-weight: 700; color: #fff; }
.gtee__sign { display: flex; gap: 14px; margin-top: 4px; font-size: 17px; color: rgba(255, 255, 255, 0.4); }
.gtee__sign b { color: rgba(255, 255, 255, 0.9); }
@media (min-width: 1024px) {
  .gtee__card {
    flex-direction: row;
    align-items: center;
    gap: 70px;
    padding: 69px 81px 67px 69px;
    border-radius: 48px;
  }
  .gtee__coin { width: min(380px, 30vw); }
  .gtee__text { gap: 16px; font-size: 19px; line-height: 29px; }
  .gtee__head { margin-bottom: 18px; }
}
.gtee .chevrons { margin-top: 48px; }
@media (min-width: 1024px) { .gtee .chevrons { margin-top: 60px; } }


/* ============ 06 PRICING (Figma "06 Pricing": card 760 x 1206.6) ============ */
.pricing { margin-top: 72px; }
@media (min-width: 1024px) { .pricing { margin-top: 130px; } }
.price-card {
  width: min(760px, 100% - 32px);
  margin: 48px auto 0;
  padding: 28px 18px 32px;
  border: 1px solid var(--card-line);
  border-radius: 32px;
  background: radial-gradient(380px 464px at 50% 65.4%, rgba(255, 209, 94, 0.12), rgba(255, 209, 94, 0)), var(--card);
}
@media (min-width: 640px) { .price-card { padding: 44px 47px 49px; border-radius: 44px; } }
@media (min-width: 1024px) { .price-card { margin-top: 70px; } }
.price-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 640px) { .price-card__head { padding-bottom: 33px; } }
.price-card__agents { display: flex; padding: 3px 0 0 0; }
.price-card__agents img {
  width: 64px;
  height: 64px;
  border: 4px solid #141418;
  border-radius: 19px;
  object-fit: cover;
}
.price-card__agents img:nth-child(1) { rotate: 6deg; translate: 0 7px; }
.price-card__agents img:nth-child(2) { margin-left: -14px; translate: 0 7px; position: relative; z-index: 1; }
.price-card__agents img:nth-child(3) { margin-left: -20px; rotate: -6deg; position: relative; z-index: 2; }
.price-chip {
  display: inline-block;
  margin-top: 26px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.price-card__name { margin-top: 12px; font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: #fff; }
@media (min-width: 640px) { .price-card__name { font-size: 30px; } }
.price-card__price { display: flex; align-items: flex-start; gap: 12px; margin-top: -14px; }
.price-card__price strong { font-size: 96px; font-weight: 700; line-height: 1.26; letter-spacing: -0.05em; color: var(--gold); }
.price-card__was { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 54px; }
.price-card__was s {
  position: relative;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.35);
}
.price-card__was s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; background: #ff6b6b; }
.price-card__was span { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
@media (min-width: 640px) {
  .price-card__price strong { font-size: 120px; }
  .price-card__price { margin-top: -15px; }
}

.price-list { display: flex; flex-direction: column; gap: 16px; margin-top: 35px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.price-list li {
  display: flex;
  gap: 16px;
  font-size: 16px;
  line-height: 1.47;
  color: rgba(255, 255, 255, 0.6);
}
.price-list li::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #c6f99a url("../images/icons/price-check.svg") center / 14px 14px no-repeat;
}
.price-list b { font-weight: 700; color: #fff; }
@media (min-width: 640px) { .price-list li { font-size: 19px; line-height: 28px; } }

.price-card__foot { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 40px; }
.price-card__foot .cta { margin-top: 6px; }
.price-card__foot .payments { margin-top: 2px; }


/* ============ 07 FAQ (Figma "07 FAQ" 1920 x 769) ============
   Decline link (Figma "Decline link": 17 Medium, white 40%, underlined) 60 under the pricing card,
   then the headline 120 lower. Two columns 610 wide, 60 apart; each item: hairline, number, question, answer. */
.faq { margin-top: 48px; padding-bottom: 120px; }
@media (min-width: 1024px) { .faq { margin-top: 60px; padding-bottom: 200px; } }
.faq__decline { padding: 0 16px; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; }
@media (min-width: 1024px) { .faq__decline { font-size: 17px; } }
.faq__decline a { color: rgba(255, 255, 255, 0.4); text-decoration: underline; text-underline-offset: 3px; }
.faq__decline a:hover { color: rgba(255, 255, 255, 0.7); }
.faq__head {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 0 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.faq__cols {
  display: grid;
  grid-template-columns: 1fr;
  width: min(1280px, 100% - 32px);
  margin: 40px auto 0;
}
@media (min-width: 900px) {
  .faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; margin-top: 90px; }
  .faq__head { margin-top: 120px; }
}
.faq__item {
  position: relative;
  padding: 24px 0 32px 50px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.faq__num {
  position: absolute;
  left: 0;
  top: 28px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.faq__item h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; color: #fff; }
.faq__item p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); }
@media (min-width: 1024px) {
  .faq__item { padding-bottom: 34px; }
  .faq__item h3 { font-size: 23px; }
  .faq__item p { font-size: 18px; line-height: 28px; }
}


/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .chevrons, .composer__caret { animation: none; }
}


/* ============ PARTS (How it works, bento tiles, Watch it work — merged from parts) ============ */
/* ---- part: how ---- */
/* ============ 02 HOW IT WORKS (Figma "02 How it works" 747:128, 1920 x 2050) ============
   Head: chip, two headline lines (the first with the liquid-glass "Ask"), sub line.
   Steps: rows of 560 (Figma), copy 560 + 20 gap + stage 700 = 1280 content; copy and stage
   are centred on each other. Below 1024px a row stacks: stage on top, copy under it.
   Each stage is drawn at Figma's 700 x 392.68; inside it --f is one Figma px.
   Spacing: --how-pt is the gap above the section (Figma: 200 under the urgency section). */
.how {
  --how-pt: 200px;
  position: relative;
  padding: calc(var(--how-pt) * 0.5) 16px 40px;
  color: #fff;
}
@media (min-width: 1024px) { .how { padding: var(--how-pt) 32px 40px; } }

/* ---- head ---- */
.how-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: 0 36px 35px -20px rgba(0, 0, 0, 0.65), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 10px 18px rgba(255, 255, 255, 0.08), inset 0 2px 2px rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
}
.how-title { display: flex; flex-direction: column; align-items: center; margin-top: 21px; font-weight: 700; letter-spacing: -0.035em; }
.how-title__line { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.25em; line-height: 1.25; }
.how-title__line--dim { margin-top: 0.03em; color: rgba(255, 255, 255, 0.55); }
/* Figma "Highlight — liquid glass": 141 x 80.6 at 60.5px type */
.how-glass {
  display: inline-flex;
  align-items: center;
  height: 1.3333em;
  padding: 0 0.285em;
  border: 0.0208em solid rgba(255, 255, 255, 0.6);
  border-radius: 0.389em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(13px);
          backdrop-filter: blur(13px);
  box-shadow: 0 0.278em 0.556em -0.139em rgba(0, 0, 0, 0.55), inset 0 -0.042em 0.083em rgba(0, 0, 0, 0.3), inset 0 -0.139em 0.278em rgba(255, 255, 255, 0.1), inset 0 0.028em 0.028em rgba(255, 255, 255, 0.45);
}
.how-sub { margin-top: 22px; line-height: 1.3; color: rgba(255, 255, 255, 0.55); }

/* ---- step rows ---- */
.how-steps { width: min(1280px, 100%); margin: 36px auto 0; }
.how-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 28px;
  padding: 44px 0;
}
.how-copy { width: min(700px, 100%); }
.how-copy__num { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.45); }
.how-copy__title { margin-top: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -0.03em; }
.how-copy__text { margin-top: 16px; max-width: 540px; line-height: 1.545; color: rgba(255, 255, 255, 0.55); }
@media (min-width: 1024px) {
  .how-steps { margin-top: 60px; }
  .how-row { flex-direction: row; gap: 20px; min-height: 560px; padding: 0; }
  .how-row--flip { flex-direction: row-reverse; }
  .how-copy { flex: 1 1 560px; min-width: 0; }
  .how-row--flip .how-copy { padding-left: 0; }
  .how-copy__title { margin-top: 15px; }
  .how-copy__text { margin-top: 18px; }
  .how-stage { flex: 0 1 700px; }
}

/* ---- stage (Figma "Stage — 0N": 700 x 392.68, radius 37.56) ---- */
.how-stage {
  position: relative;
  container-type: inline-size;
  width: min(700px, 100%);
  aspect-ratio: 700 / 392.683;
  -webkit-user-select: none;
          user-select: none;
}
.how-stage__in {
  --f: calc(100cqw / 700);
  position: absolute;
  inset: 0;
  border: 0.854px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(37.561 * var(--f));
  background: linear-gradient(180deg, #17181d 0%, #101115 100%);
}
.how-stage__in img { display: block; -webkit-user-drag: none; }
.how-stage--01 .how-stage__in,
.how-stage--02 .how-stage__in { overflow: hidden; }
.how-stage--01 .how-stage__in {
  background:
    radial-gradient(calc(350 * var(--f)) calc(140.24 * var(--f)) at calc(350 * var(--f)) calc(294.51 * var(--f)), rgba(52, 211, 153, 0.1), rgba(52, 211, 153, 0)),
    linear-gradient(180deg, #17181d 0%, #101115 100%);
}
.how-stage--02 .how-stage__in {
  background:
    radial-gradient(calc(350 * var(--f)) calc(140.24 * var(--f)) at calc(350 * var(--f)) calc(294.51 * var(--f)), rgba(255, 122, 69, 0.1), rgba(255, 122, 69, 0)),
    linear-gradient(180deg, #17181d 0%, #101115 100%);
}
/* the dark pill surface shared by the connector bar, prompt bubble, reply pill and dark button */
.hs01-bar, .hs02-bubble, .hs02-reply {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, #2a2b33 0%, #1e1f25 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 calc(18 * var(--f)) calc(18 * var(--f)) rgba(0, 0, 0, 0.45);
}

/* ---- stage 01: agent icons over the RocketToons connector bar ---- */
.hs01-glow { position: absolute; left: calc(67.44 * var(--f)); top: calc(24.75 * var(--f)); width: calc(563.415 * var(--f)); height: calc(409.756 * var(--f)); }
.hs01-bar { left: calc(121.14 * var(--f)); top: calc(212.56 * var(--f)); width: calc(512.195 * var(--f)); height: calc(109.268 * var(--f)); border-radius: calc(54.634 * var(--f)); }
.hs01-logo { position: absolute; left: calc(33.15 * var(--f)); top: calc(22.74 * var(--f)); width: calc(179.268 * var(--f)); height: calc(61.784 * var(--f)); object-fit: contain; filter: drop-shadow(0 calc(2.56 * var(--f)) calc(4.8 * var(--f)) rgba(0, 0, 0, 0.35)); }
.hs01-status { position: absolute; left: calc(287.54 * var(--f)); top: calc(43.39 * var(--f)); font-size: calc(16.22 * var(--f)); font-weight: 600; line-height: 1.25; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
/* Figma "Toggle (on)": 88.78 x 51.22 green track, white knob r 21.34 */
.hs01-toggle {
  position: absolute;
  left: calc(388.27 * var(--f));
  top: calc(28.02 * var(--f));
  width: calc(88.78 * var(--f));
  height: calc(51.22 * var(--f));
  border-radius: calc(25.61 * var(--f));
  background: #34d399;
  box-shadow: 0 0 calc(20.49 * var(--f)) rgba(52, 211, 153, 0.5), inset 0 calc(1.71 * var(--f)) calc(4.27 * var(--f)) rgba(0, 0, 0, 0.25);
}
.hs01-toggle i {
  position: absolute;
  left: calc(41.83 * var(--f));
  top: calc(4.27 * var(--f));
  width: calc(42.68 * var(--f));
  height: calc(42.68 * var(--f));
  border-radius: 50%;
  background: linear-gradient(180deg, #fff 0%, #e3e6ec 100%);
  box-shadow: 0 calc(2.56 * var(--f)) calc(6.83 * var(--f)) rgba(0, 0, 0, 0.35);
}
/* One agent icon: --cx/--cy its centre, --s its size, --r its tilt, --rad its corner (Figma) */
.hs01-icon {
  position: absolute;
  left: calc((var(--cx) - var(--s) / 2) * var(--f));
  top: calc((var(--cy) - var(--s) / 2) * var(--f));
  width: calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
  border: calc(3.415 * var(--f)) solid #0b0c10;
  border-radius: calc(var(--rad) * var(--f));
  object-fit: cover;
  rotate: calc(var(--r) * 1deg);
  box-shadow: 0 calc(13.66 * var(--f)) calc(27.32 * var(--f)) calc(-5.12 * var(--f)) rgba(0, 0, 0, 0.65);
}
.hs01-icon--cursor  { --cx: 103.43; --cy: 174.20; --s: 64.878; --r: 12;  --rad: 18.815; }
.hs01-icon--chatgpt { --cx: 181.62; --cy: 144.45; --s: 81.951; --r: 8;   --rad: 23.766; }
.hs01-icon--claude  { --cx: 312.36; --cy: 116.96; --s: 95.61;  --r: 0;   --rad: 27.727; }
.hs01-icon--gemini  { --cx: 444.00; --cy: 126.22; --s: 81.951; --r: -8;  --rad: 23.766; }
.hs01-icon--meta    { --cx: 569.36; --cy: 153.88; --s: 64.878; --r: -12; --rad: 18.815; }

/* ---- stage 02: the request bubble and the agent's reply ---- */
.hs02-glow { position: absolute; left: calc(50.35 * var(--f)); top: calc(16.23 * var(--f)); width: calc(597.561 * var(--f)); height: calc(426.829 * var(--f)); }
.hs02-bubble {
  left: calc(75.98 * var(--f));
  top: calc(97.74 * var(--f));
  width: calc(580.488 * var(--f));
  height: calc(105.854 * var(--f));
  border-radius: calc(30.732 * var(--f)) calc(30.732 * var(--f)) calc(8.537 * var(--f)) calc(30.732 * var(--f));
}
.hs02-bubble p {
  position: absolute;
  left: calc(24.61 * var(--f));
  top: calc(21.2 * var(--f));
  width: calc(536 * var(--f)); /* Figma 529.27; a little slack so small sizes still wrap to two lines */
  font-size: calc(21.341 * var(--f));
  font-weight: 500;
  line-height: calc(30.732 * var(--f));
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.95);
}
/* Small stages (phones): type that small sets a touch wider, so the request would spill to a
   third line and "Connected" would touch the toggle; ease both down slightly */
@container (max-width: 420px) {
  .hs02-bubble p { font-size: calc(20.2 * var(--f)); }
  .hs01-status { font-size: calc(15.2 * var(--f)); }
}
.hs02-reply {
  left: calc(41.83 * var(--f));
  top: calc(229.21 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(10.244 * var(--f));
  padding: calc(11.951 * var(--f)) calc(20.488 * var(--f)) calc(11.951 * var(--f)) calc(11.951 * var(--f));
  border-radius: calc(84.512 * var(--f));
  font-size: calc(17.073 * var(--f));
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}
.hs02-reply img { width: calc(37.561 * var(--f)); height: calc(37.561 * var(--f)); border-radius: calc(11.098 * var(--f)); object-fit: cover; }
/* Figma "Typing (animate)": three dots, 5.98 wide, 10.24 apart, fading 0.9 / 0.6 / 0.3 */
.hs02-dots { display: flex; gap: calc(4.26 * var(--f)); }
.hs02-dots i { width: calc(5.976 * var(--f)); height: calc(5.976 * var(--f)); border-radius: 50%; background: #fff; opacity: 0.9; }
.hs02-dots i:nth-child(2) { opacity: 0.6; }
.hs02-dots i:nth-child(3) { opacity: 0.3; }

/* ---- stage 03: the finished film, its two social cuts and the actions ---- */
.hs03-bg { position: absolute; left: calc(-0.85 * var(--f)); top: calc(-0.85 * var(--f)); width: calc(700 * var(--f)); height: calc(392.683 * var(--f)); overflow: hidden; border-radius: inherit; }
.hs03-bg img { width: 100%; height: 100%; }
.hs03-cut, .hs03-film {
  position: absolute;
  overflow: hidden;
  border: calc(6.25 * var(--f)) solid #fff;
  border-radius: calc(22.5 * var(--f));
  box-shadow: 0 calc(27.5 * var(--f)) calc(50 * var(--f)) calc(-10 * var(--f)) rgba(0, 0, 0, 0.6);
}
.hs03-cut img, .hs03-film > img { width: 100%; height: 100%; object-fit: cover; }
/* cuts: --cx/--cy centre, --w/--h size, --r tilt (Figma) */
.hs03-cut {
  left: calc((var(--cx) - var(--w) / 2) * var(--f));
  top: calc((var(--cy) - var(--h) / 2) * var(--f));
  width: calc(var(--w) * var(--f));
  height: calc(var(--h) * var(--f));
  rotate: calc(var(--r) * 1deg);
}
.hs03-cut--reels { --cx: 111.04; --cy: 179.40; --w: 147.5; --h: 262.5; --r: 9; }
.hs03-cut--feed  { --cx: 575.67; --cy: 127.34; --w: 200;   --h: 200;   --r: -8; }
.hs03-film { left: calc(196.73 * var(--f)); top: calc(116.23 * var(--f)); width: calc(375 * var(--f)); height: calc(211.25 * var(--f)); }
.hs03-play {
  position: absolute;
  left: calc(147.5 * var(--f));
  top: calc(65 * var(--f));
  display: grid;
  place-items: center;
  width: calc(67.5 * var(--f));
  height: calc(67.5 * var(--f));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 calc(7.5 * var(--f)) calc(4.4 * var(--f)) rgba(0, 0, 0, 0.35));
}
.hs03-play img { width: calc(22.5 * var(--f)); height: calc(25 * var(--f)); }
.hs03-tag {
  position: absolute;
  left: calc(210.74 * var(--f));
  top: calc(130.23 * var(--f));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--f));
  padding: calc(5 * var(--f)) calc(11 * var(--f)) calc(5 * var(--f)) calc(6 * var(--f));
  border-radius: 99px;
  background: rgba(20, 24, 38, 0.85);
  font-size: calc(11 * var(--f));
  font-weight: 700;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.hs03-tag img { width: calc(14 * var(--f)); height: calc(14 * var(--f)); }
.hs03-actions { position: absolute; left: calc(176.65 * var(--f)); top: calc(366.83 * var(--f)); display: flex; gap: calc(12 * var(--f)); }
.hs03-btn {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--f));
  padding: calc(14 * var(--f)) calc(22 * var(--f)) calc(14 * var(--f)) calc(18 * var(--f));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  box-shadow: 0 calc(16 * var(--f)) calc(32 * var(--f)) calc(-6 * var(--f)) rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  font-size: calc(16 * var(--f));
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.hs03-btn img { width: calc(18 * var(--f)); height: calc(18 * var(--f)); }
.hs03-btn--dark { background: linear-gradient(180deg, #2a2b33 0%, #1e1f25 100%); color: #fff; }
.hs03-btn--light { border-color: transparent; background: linear-gradient(180deg, #fff 0%, #dadde4 100%); box-shadow: 0 calc(16 * var(--f)) calc(32 * var(--f)) calc(-6 * var(--f)) rgba(0, 0, 0, 0.55), inset 0 1px 1px #fff; color: #141826; }
/* the buttons hang 22 Figma px below the stage: keep that clear of the next row on phones */
@media (max-width: 1023px) { .how-stage--03 { margin-bottom: calc(26 * 100% / 700); } }

/* ---- motion (only while the stage is on screen; none with reduced motion) ----
   01: the icons float out of step; every 6s the toggle flicks off, "Connected" dims, and it switches back on.
   02: the agent's typing dots pulse in turn.
   03: the two social cuts float; "Post now" presses every 4s. At rest every stage is the Figma frame. */
@media (prefers-reduced-motion: no-preference) {
  .how-stage.is-live .hs01-icon { animation: how-float 5s ease-in-out infinite; }
  .how-stage.is-live .hs01-icon--chatgpt { animation-delay: -1s; }
  .how-stage.is-live .hs01-icon--claude  { animation-delay: -2s; }
  .how-stage.is-live .hs01-icon--gemini  { animation-delay: -3s; }
  .how-stage.is-live .hs01-icon--meta    { animation-delay: -4s; }
  .how-stage.is-live .hs01-toggle   { animation: how-track 6s ease-in-out infinite; }
  .how-stage.is-live .hs01-toggle i { animation: how-knob 6s ease-in-out infinite; }
  .how-stage.is-live .hs01-status   { animation: how-status 6s ease-in-out infinite; }

  .how-stage.is-live .hs02-dots i { animation: how-dot 1.2s ease-in-out infinite; }
  .how-stage.is-live .hs02-dots i:nth-child(2) { animation-delay: 0.2s; }
  .how-stage.is-live .hs02-dots i:nth-child(3) { animation-delay: 0.4s; }

  .how-stage.is-live .hs03-cut { animation: how-float 6s ease-in-out infinite; }
  .how-stage.is-live .hs03-cut--feed { animation-delay: -3s; }
  .how-stage.is-live .hs03-btn--light { animation: how-press 4s ease-in-out infinite; }
}
@keyframes how-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-6 * var(--f)); }
}
@keyframes how-track {
  0%, 68%, 84%, 100% { background-color: #34d399; box-shadow: 0 0 calc(20.49 * var(--f)) rgba(52, 211, 153, 0.5), inset 0 calc(1.71 * var(--f)) calc(4.27 * var(--f)) rgba(0, 0, 0, 0.25); }
  72%, 80%           { background-color: #3a3c45; box-shadow: 0 0 0 rgba(52, 211, 153, 0), inset 0 calc(1.71 * var(--f)) calc(4.27 * var(--f)) rgba(0, 0, 0, 0.25); }
}
@keyframes how-knob {
  0%, 68%, 84%, 100% { translate: 0 0; }
  72%, 80%           { translate: calc(-37.56 * var(--f)) 0; }
}
@keyframes how-status {
  0%, 68%, 84%, 100% { opacity: 1; }
  72%, 80%           { opacity: 0.3; }
}
@keyframes how-dot {
  0%, 60%, 100% { translate: 0 0; }
  30%           { translate: 0 calc(-3 * var(--f)); }
}
@keyframes how-press {
  0%, 80%, 100% { scale: 1; }
  86%           { scale: 0.92; }
  92%           { scale: 1.03; }
}

/* ---- part: tile-01 ---- */
/* Tile 01 — Scripts (Figma 757:306, 629.89 x 525.47). --f = one Figma px of this tile. */
.bt-01 .bt01-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #17171a;
}
.bt-01 .bt01-card > * { position: absolute; margin: 0; }
.bt-01 .bt01-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;
}
.bt-01 .bt01-fade { left: calc(-10.105 * var(--f)); top: calc(53.895 * var(--f)); pointer-events: none; }
.bt-01 .bt01-fade--left { width: calc(218.947 * var(--f)); height: calc(515.368 * var(--f)); background: linear-gradient(90deg, #17171a, rgba(23, 23, 26, 0)); }
.bt-01 .bt01-fade--top { width: calc(690.526 * var(--f)); height: calc(134.737 * var(--f)); background: linear-gradient(180deg, #17171a, rgba(23, 23, 26, 0)); }
.bt-01 .bt01-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);
}
.bt-01 .bt01-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;
}
.bt-01 .bt01-prompt > * { position: absolute; margin: 0; }
.bt-01 .bt01-line { left: 0; top: 0; color: #fff; }
.bt-01 .bt01-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;
}
.bt-01 .bt01-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;
}
.bt-01 .bt01-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));
}
.bt-01 .bt01-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;
}
.bt-01 .bt01-check {
  position: relative;
  flex: none;
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #c6f99a;
}
.bt-01 .bt01-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) {
  .bt-01 .bt01-label { font-size: 11px; }
  .bt-01 .bt01-pill { font-size: 12px; }
}

/* Motion while on screen: caret blinks, the arrow nudges toward the book, the book drifts */
@media (prefers-reduced-motion: no-preference) {
  .bt-01.is-live .bt01-cursor { animation: bt01-blink 1.06s steps(1) infinite; }
  .bt-01.is-live .bt01-arrow { animation: bt01-nudge 2.4s ease-in-out infinite; }
  .bt-01.is-live .bt01-book { animation: bt01-drift 9s ease-in-out infinite alternate; }
}
@keyframes bt01-blink { 50% { opacity: 0; } }
@keyframes bt01-nudge { 50% { translate: calc(6 * var(--f)) calc(4 * var(--f)); } }
@keyframes bt01-drift { to { translate: calc(-8 * var(--f)) calc(3 * var(--f)); } } /* never moves up: the image's top edge stays under the top fade */

/* ---- part: tile-02 ---- */
/* Tile 02 — Characters (Figma 757:324, 629.89 x 252.63). */
.bt-02 .bt02-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #9fd8ff;
}
.bt-02 .bt02-card > * { position: absolute; margin: 0; }
.bt-02 .bt02-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);
}
.bt-02 .bt02-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;
}
.bt-02 .bt02-prompt > * { position: absolute; margin: 0; }
.bt-02 .bt02-line { left: 0; top: 0; }
.bt-02 .bt02-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;
}
.bt-02 .bt02-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;
}
.bt-02 .bt02-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);
}
.bt-02 .bt02-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;
}
.bt-02 .bt02-check {
  position: relative;
  flex: none;
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #c6f99a;
}
.bt-02 .bt02-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) {
  .bt.bt-02 { --f: calc(var(--tile-w) / 360); aspect-ratio: auto; height: calc(440 * var(--f)); }
  .bt-02 .bt02-sheet { left: calc(20 * var(--f)); top: calc(240 * var(--f)); width: calc(320 * var(--f)); height: calc(179.7 * var(--f)); }
}

/* Motion while on screen: caret blinks, the model sheet floats */
@media (prefers-reduced-motion: no-preference) {
  .bt-02.is-live .bt02-cursor { animation: bt02-blink 1.06s steps(1) infinite; }
  .bt-02.is-live .bt02-sheet { animation: bt02-float 5s ease-in-out infinite; }
}
@keyframes bt02-blink { 50% { opacity: 0; } }
@keyframes bt02-float { 50% { translate: 0 calc(-5 * var(--f)); } }

/* ---- part: tile-03 ---- */
/* Tile 03 — Credits (Figma 757:337, 304.84 x 252.63). */
.bt-03 .bt03-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #141826;
}
.bt-03 .bt03-card > * { position: absolute; margin: 0; font-weight: 700; line-height: normal; white-space: nowrap; }
.bt-03 .bt03-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);
}
.bt-03 .bt03-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;
}
.bt-03 .bt03-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;
}
.bt-03 .bt03-line--dim { top: calc(205.474 * var(--f)); color: rgba(255, 255, 255, 0.45); }
.bt-03 .bt03-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;
}

/* Motion while on screen: Approve is pressed every few seconds (the count-up is in tile-03.js) */
@media (prefers-reduced-motion: no-preference) {
  .bt-03.is-live .bt03-pill { animation: bt03-press 4s ease-in-out infinite; }
}
@keyframes bt03-press {
  0%, 70%, 100% { scale: 1; box-shadow: 0 0 0 0 rgba(255, 209, 94, 0); }
  76% { scale: 0.9; }
  84% { scale: 1.04; box-shadow: 0 0 0 calc(6 * var(--f)) rgba(255, 209, 94, 0.35); }
  92% { scale: 1; box-shadow: 0 0 0 calc(10 * var(--f)) rgba(255, 209, 94, 0); }
}

/* ---- part: tile-04 ---- */
/* Tile 04 — Takes (Figma 757:344, 304.84 x 525.47). */
.bt-04 .bt04-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #9ff0d5;
}
.bt-04 .bt04-card > * { position: absolute; margin: 0; }
.bt-04 .bt04-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);
}
.bt-04 .bt04-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;
}
.bt-04 .bt04-prompt > * { position: absolute; margin: 0; }
.bt-04 .bt04-line { left: 0; top: 0; }
.bt-04 .bt04-line--2 { top: calc(38.737 * var(--f)); }
.bt-04 .bt04-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 */
.bt-04 .bt04-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);
}
.bt-04 .bt04-take--1 { left: calc(27.34 * var(--f)); top: calc(240.47 * var(--f)); rotate: -8deg; opacity: 0.75; }
.bt-04 .bt04-take--3 { left: calc(115.94 * var(--f)); top: calc(296.43 * var(--f)); rotate: 8deg; opacity: 0.75; }
.bt-04 .bt04-take--2 {
  left: calc(72.421 * var(--f));
  top: calc(210.526 * var(--f));
  overflow: hidden;
  border: calc(3.368 * var(--f)) solid #141826;
}
.bt-04 .bt04-take--2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt-04 .bt04-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;
}
.bt-04 .bt04-check {
  position: relative;
  flex: none;
  width: calc(18.526 * var(--f));
  height: calc(18.526 * var(--f));
  border-radius: 50%;
  background: #c6f99a;
}
.bt-04 .bt04-check img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }

/* Motion while on screen (5 s loop, starts and ends on the Figma frame): the takes fan out,
   take 2 drops back and loses its outline, then springs forward again and "Take 2 in use" pops back */
@media (prefers-reduced-motion: no-preference) {
  .bt-04.is-live .bt04-take--1 { animation: bt04-t1 5s ease-in-out infinite; }
  .bt-04.is-live .bt04-take--3 { animation: bt04-t3 5s ease-in-out infinite; }
  .bt-04.is-live .bt04-take--2 { animation: bt04-t2 5s ease-in-out infinite; }
  .bt-04.is-live .bt04-pill { animation: bt04-pill 5s ease-in-out infinite; }
}
@keyframes bt04-t1 { 0%, 18%, 72%, 100% { translate: 0 0; rotate: -8deg; } 34%, 52% { translate: calc(-14 * var(--f)) calc(-6 * var(--f)); rotate: -12deg; } }
@keyframes bt04-t3 { 0%, 18%, 72%, 100% { translate: 0 0; rotate: 8deg; } 34%, 52% { translate: calc(14 * var(--f)) calc(-6 * var(--f)); rotate: 12deg; } }
@keyframes bt04-t2 {
  0%, 18% { scale: 1; border-color: #141826; }
  34%, 52% { scale: 0.92; border-color: rgba(20, 24, 38, 0); }
  62% { scale: 1.05; border-color: #141826; }
  72%, 100% { scale: 1; border-color: #141826; }
}
@keyframes bt04-pill {
  0%, 18% { opacity: 1; scale: 1; }
  28%, 56% { opacity: 0; scale: 0.8; }
  66% { opacity: 1; scale: 1.08; }
  74%, 100% { opacity: 1; scale: 1; }
}

/* ---- part: tile-05 ---- */
/* Tile 05 — Storyboard (Figma 757:359, 954.95 x 252.63). */
.bt-05 .bt05-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #ff9f8a;
}
.bt-05 .bt05-card > * { position: absolute; margin: 0; }
.bt-05 .bt05-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);
}
.bt-05 .bt05-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;
}
.bt-05 .bt05-prompt > * { position: absolute; margin: 0; }
.bt-05 .bt05-line { left: 0; top: 0; }
.bt-05 .bt05-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;
}
.bt-05 .bt05-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) */
.bt-05 .bt05-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;
}
.bt-05 .bt05-slider > * { position: absolute; margin: 0; }
.bt-05 .bt05-night { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-05 .bt05-day { left: 0; top: 0; width: calc(var(--d) * var(--f)); height: 100%; overflow: hidden; }
.bt-05 .bt05-day img { display: block; width: calc(618.105 * var(--f)); height: 100%; max-width: none; object-fit: cover; }
.bt-05 .bt05-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);
}
.bt-05 .bt05-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));
}
.bt-05 .bt05-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)); }
.bt-05 .bt05-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;
}
.bt-05 .bt05-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) {
  .bt.bt-05 { --f: calc(var(--tile-w) / 360); aspect-ratio: auto; height: calc((200 + 147.1) * var(--f)); }
  .bt-05 .bt05-slider {
    --f: calc(var(--tile-w) / 618.105);
    left: 0;
    top: calc(200 * var(--tile-w) / 360);
  }
}

/* Motion while on screen: the caret blinks and the divider is dragged left and right,
   starting and ending on Figma's spot. --d can't be animated, so each piece has its own keyframes. */
@media (prefers-reduced-motion: no-preference) {
  .bt-05.is-live .bt05-cursor { animation: bt05-blink 1.06s steps(1) infinite; }
  .bt-05.is-live .bt05-day { animation: bt05-day 7s ease-in-out infinite; }
  .bt-05.is-live .bt05-divider { animation: bt05-divider 7s ease-in-out infinite; }
  .bt-05.is-live .bt05-knob { animation: bt05-knob 7s ease-in-out infinite; }
}
@keyframes bt05-blink { 50% { opacity: 0; } }
@keyframes bt05-day     { 0%, 12%, 100% { width: calc(309.053 * var(--f)); } 40% { width: calc(470 * var(--f)); } 72% { width: calc(130 * var(--f)); } }
@keyframes bt05-divider { 0%, 12%, 100% { left: calc(307.369 * var(--f)); } 40% { left: calc(468.316 * var(--f)); } 72% { left: calc(128.316 * var(--f)); } }
@keyframes bt05-knob    { 0%, 12%, 100% { left: calc(285.474 * var(--f)); } 40% { left: calc(446.421 * var(--f)); } 72% { left: calc(106.421 * var(--f)); } }

/* ---- part: tile-06 ---- */
/* Tile 06 — Clip prompts (Figma 757:377, 629.89 x 353.68). */
.bt-06 .bt06-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #c6f99a;
}
.bt-06 .bt06-card > * { position: absolute; margin: 0; }
.bt-06 .bt06-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);
}
.bt-06 .bt06-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;
}
.bt-06 .bt06-prompt > * { position: absolute; margin: 0; }
.bt-06 .bt06-line { left: 0; top: 0; }
.bt-06 .bt06-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;
}
.bt-06 .bt06-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) */
.bt-06 .bt06-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;
}
.bt-06 .bt06-scene > * { position: absolute; margin: 0; }
.bt-06 .bt06-pic { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-06 .bt06-corner { width: calc(23.579 * var(--f)); height: calc(23.579 * var(--f)); }
.bt-06 .bt06-corner--tl { left: calc(13.474 * var(--f)); top: calc(13.474 * var(--f)); }
.bt-06 .bt06-corner--tr { left: calc(282.947 * var(--f)); top: calc(13.474 * var(--f)); }
.bt-06 .bt06-corner--bl { left: calc(13.474 * var(--f)); top: calc(249.263 * var(--f)); }
.bt-06 .bt06-corner--br { left: calc(282.947 * var(--f)); top: calc(249.263 * var(--f)); }
.bt-06 .bt06-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));
}
.bt-06 .bt06-tag,
.bt-06 .bt06-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;
}
.bt-06 .bt06-tag { left: calc(223.663 * var(--f)); top: calc(35.368 * var(--f)); background: #ffd15e; color: #141826; }
.bt-06 .bt06-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;
}
.bt-06 .bt06-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) {
  .bt.bt-06 { --f: calc(var(--tile-w) / 360); aspect-ratio: auto; height: calc(500 * var(--f)); }
  .bt-06 .bt06-scene { left: calc(20 * var(--f)); top: calc(194 * var(--f)); }
}

/* Motion while on screen: caret blinks, the camera "tracks left" across the scene,
   the close-up frame breathes and the arrow nudges left */
@media (prefers-reduced-motion: no-preference) {
  .bt-06.is-live .bt06-cursor { animation: bt06-blink 1.06s steps(1) infinite; }
  .bt-06.is-live .bt06-pic { animation: bt06-track 8s ease-in-out infinite; }
  .bt-06.is-live .bt06-box { animation: bt06-breathe 2.6s ease-in-out infinite; }
  .bt-06.is-live .bt06-track img { animation: bt06-nudge 1.6s ease-in-out infinite; }
}
@keyframes bt06-blink { 50% { opacity: 0; } }
@keyframes bt06-track { 0%, 100% { scale: 1; translate: 0 0; } 50% { scale: 1.12; translate: calc(-14 * var(--f)) 0; } }
@keyframes bt06-breathe { 50% { scale: 1.06; } }
@keyframes bt06-nudge { 50% { translate: calc(-4 * var(--f)) 0; } }

/* ---- part: tile-07 ---- */
/* Tile 07 — Render (Figma 757:404, 304.84 x 353.68). Clips 1-4 rendered (check), 5-6 rendering (shimmer + spinner). */
.bt-07 .bt07-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #ffd15e;
}
.bt-07 .bt07-card > * { position: absolute; margin: 0; }
.bt-07 .bt07-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);
}
.bt-07 .bt07-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;
}
.bt-07 .bt07-prompt > * { position: absolute; margin: 0; }
.bt-07 .bt07-line { left: 0; top: 0; }
.bt-07 .bt07-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;
}
.bt-07 .bt07-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;
}
.bt-07 .bt07-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));
}
.bt-07 .bt07-clip > * { position: absolute; margin: 0; }
.bt-07 .bt07-clip > img:first-child { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-07 .bt07-shimmer { inset: 0; background: rgba(255, 244, 204, 0.72); opacity: 0; transition: opacity 0.35s; }
.bt-07 .bt07-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; transition: opacity 0.25s; }
.bt-07 .bt07-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;
  transition: opacity 0.2s, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bt-07 .bt07-done img { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; }
.bt-07 .bt07-clip.is-busy .bt07-shimmer,
.bt-07 .bt07-clip.is-busy .bt07-spin { opacity: 1; }
.bt-07 .bt07-clip.is-done .bt07-done { opacity: 1; scale: 1; }

/* Motion while on screen: caret blinks and the spinners turn (the render sequence is in tile-07.js) */
@media (prefers-reduced-motion: no-preference) {
  .bt-07.is-live .bt07-cursor { animation: bt07-blink 1.06s steps(1) infinite; }
  .bt-07.is-live .bt07-spin { animation: bt07-spin 0.9s linear infinite; }
}
@keyframes bt07-blink { 50% { opacity: 0; } }
@keyframes bt07-spin { to { rotate: 360deg; } }

/* ---- part: tile-08 ---- */
/* 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. */
.bt-08 .bt08-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(33.684 * var(--f));
  background: #f6f1e6;
}
.bt-08 .bt08-card > * { position: absolute; margin: 0; }
.bt-08 .bt08-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);
}
.bt-08 .bt08-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;
}
.bt-08 .bt08-prompt > * { position: absolute; margin: 0; }
.bt-08 .bt08-line { left: 0; top: 0; }
.bt-08 .bt08-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;
}
.bt-08 .bt08-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;
}
.bt-08 .bt08-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);
}
.bt-08 .bt08-day--fri { color: #fff; }
.bt-08 .bt08-day--sat { color: #141826; }
.bt-08 .bt08-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);
}
.bt-08 .bt08-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));
}
.bt-08 .bt08-col--fri { left: calc(130.526 * var(--f)); background: #141826; }
.bt-08 .bt08-col--sat { left: calc(190.316 * var(--f)); background: rgba(20, 24, 38, 0.08); }
.bt-08 .bt08-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;
}
.bt-08 .bt08-post--fri { left: calc(137.263 * var(--f)); }
.bt-08 .bt08-post--sat { left: calc(197.053 * var(--f)); }
.bt-08 .bt08-time {
  top: calc(304.842 * var(--f));
  font-size: calc(11.789 * var(--f));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}
.bt-08 .bt08-time--fri { left: calc(143.158 * var(--f)); color: #fff; }
.bt-08 .bt08-time--sat { left: calc(202.526 * var(--f)); color: #141826; }

/* Motion while on screen (5 s loop, starts and ends on the Figma frame): the caret blinks,
   Friday's post lifts out and drops back into its slot, "6 PM" re-appears and the column pulses */
@media (prefers-reduced-motion: no-preference) {
  .bt-08.is-live .bt08-cursor { animation: bt08-blink 1.06s steps(1) infinite; }
  .bt-08.is-live .bt08-post--fri { animation: bt08-drop 5s ease-in-out infinite; }
  .bt-08.is-live .bt08-time--fri { animation: bt08-time 5s ease-in-out infinite; }
  .bt-08.is-live .bt08-col--fri { animation: bt08-pulse 5s ease-in-out infinite; }
}
@keyframes bt08-blink { 50% { opacity: 0; } }
@keyframes bt08-drop {
  0%, 18% { opacity: 1; translate: 0 0; scale: 1; }
  30% { opacity: 0; translate: 0 calc(-18 * var(--f)); scale: 0.92; }
  42% { opacity: 0; translate: 0 calc(-26 * var(--f)); scale: 1.08; }
  58% { opacity: 1; translate: 0 calc(3 * var(--f)); scale: 1.04; }
  66%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes bt08-time { 0%, 20%, 62%, 100% { opacity: 1; } 28%, 54% { opacity: 0; } }
@keyframes bt08-pulse {
  0%, 56%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 94, 0); }
  64% { box-shadow: 0 0 0 calc(4 * var(--f)) rgba(255, 209, 94, 0.9); }
  80% { box-shadow: 0 0 0 calc(8 * var(--f)) rgba(255, 209, 94, 0); }
}

/* ---- part: watch ---- */
/* ============ 03b WATCH IT WORK (Figma "03b Watch it work" 770:200, 1920 x 742) ============
   Head (chip, headline with the yellow "Chat" box, sub line), then two screen-recording
   slots of 620 x 349 side by side in the 1280 content width (40 gap); they stack on phones.
   The slots are .rt-play boxes (js/videos.js): a click swaps the poster for the recording.
   Spacing: --watch-pt is the gap above the section (Figma: 180 under the bento). */
.watch {
  --watch-pt: 180px;
  position: relative;
  padding: calc(var(--watch-pt) * 0.5) 16px 0;
  color: #fff;
}
@media (min-width: 1024px) { .watch { padding: var(--watch-pt) 32px 0; } }

.watch-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.watch-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
}
.watch-chip img { width: 8px; height: 8px; }
.watch-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.267em;
  row-gap: 0.1em;
  margin-top: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
/* Figma "Highlight box": #ffd15e, 172.8 x 79 at 60px type, radius 21.6 */
.watch-hl {
  display: inline-flex;
  align-items: center;
  height: 1.3167em;
  padding: 0 0.34em;
  border-radius: 0.36em;
  background: #ffd15e;
  color: #141826;
}
.watch-sub { margin-top: 22px; line-height: 1.25; color: rgba(255, 255, 255, 0.55); }

.watch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: min(1280px, 100%);
  margin: 48px auto 0;
}
@media (min-width: 768px) { .watch-grid { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 70px; } }
.watch-item { margin: 0; min-width: 0; }
.watch-label { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.watch-label img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }

/* Figma "VIDEO — Agent demo in … (needs screen recording)": 620 x 349, radius 28 */
.watch-video {
  position: relative;
  container-type: inline-size;
  margin-top: 22px;
  aspect-ratio: 620 / 349;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  background: #101115;
}
.watch-video button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.watch-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.65) 100%); }
/* play button: 88px on the 620 slot, centred */
.watch-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(88 * 100cqw / 620);
  height: calc(88 * 100cqw / 620);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  translate: -50% -50%;
  transition: scale 0.2s;
}
.watch-play img { width: 31.8%; height: 36.4%; margin-left: 6%; }
.watch-video button:hover .watch-play { scale: 1.06; }
.watch-rec {
  position: absolute;
  left: 17px;
  top: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.watch-rec img { width: 8px; height: 8px; }
.watch-caption { margin-top: 22px; font-weight: 500; line-height: 1.47; color: rgba(255, 255, 255, 0.8); }

/* the recording dot blinks while the slot is on screen */
@media (prefers-reduced-motion: no-preference) {
  .watch-rec.is-live img { animation: watch-rec 1.4s steps(1) infinite; }
}
@keyframes watch-rec { 50% { opacity: 0.25; } }

/* 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; 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; }
@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; }
}

/* JVZoo buy button (the embed image) */
.jvzoo-buy { display: block; width: min(100%, 380px); margin: 0 auto; line-height: 0; }
.jvzoo-buy img { display: block; width: 100%; height: auto; border: 0; }