/* ==========================================================================
   Zakaz Plus — B2B landing page sections.

   A phone (< 768) follows the Figma 375 frame (454:13537) and a desktop
   (≥ 1280) the 1440 frame (454:13037). Between them the page keeps the phone
   composition with more room, as the B2C page does. The page lies on a dark
   ground (#1A1C1E) with light section cards on it.
   ========================================================================== */

body.page-b2b { background: var(--night); }

.b2b {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
}
.b2b > section { width: 100%; max-width: var(--shell); margin-inline: auto; }

/* content starts 40px under the resting bar (phone bar 130px) */
.site-head--b2b + .b2b { padding-top: 170px; }
@media (min-width: 768px)  { .site-head--b2b + .b2b { padding-top: calc(var(--head-h) + 40px); } }
@media (min-width: 1280px) {
  .b2b { gap: 10px; padding-bottom: 30px; }
  /* the hero runs under the header, as in the design */
  .site-head--b2b + .b2b { padding-top: 0; }
}

/* ==========================================================================
   1. hero
   ========================================================================== */

/* phone: the dashboard at the top, the copy card overlapping it from 222px */
.b2b-hero {
  position: relative;
  overflow: hidden;
  padding-top: 222px;
}
.b2b-hero__media { position: absolute; top: 0; left: 22px; display: block; }
.b2b-hero__img { width: 420px; max-width: none; height: 312px; border-radius: 13px; }

.b2b-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 50px 20px 40px;
  border-radius: var(--r-section);
  background: var(--card);
  box-shadow: var(--shadow-up);
}
.b2b-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.b2b-hero__title { max-width: 319px; font: 600 30px/1 var(--font); color: var(--ink); }
.b2b-hero__text { display: flex; flex-direction: column; gap: 20px; font: var(--t1); color: var(--ink); }
/* the title's and the sub's line breaks are the desktop's */
.b2b-hero__title br,
.b2b-hero__sub br { display: none; }

.b2b-hero__actions { display: flex; flex-direction: column; gap: 10px; }
.b2b-hero__actions .btn { width: 100%; }
.b2b-hero__actions .btn--ghost { color: var(--ink); }

/* tablet: the phone composition, centred and larger */
@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-hero { padding-top: 400px; }
  .b2b-hero__media { left: 50%; transform: translateX(-50%); }
  .b2b-hero__img { width: 700px; height: 520px; border-radius: 20px; }
  .b2b-hero__card { align-items: center; padding: 60px 40px 50px; border-radius: 60px; text-align: center; }
  .b2b-hero__copy { align-items: center; max-width: 640px; }
  .b2b-hero__title { max-width: none; font-size: 48px; }
  .b2b-hero__text { max-width: 520px; font-size: 18px; }
  .b2b-hero__actions { flex-direction: row; justify-content: center; }
  .b2b-hero__actions .btn { width: auto; }
}

/* desktop: Figma's composition — copy on the left, the monitor render
   running off the section's bottom edge */
@media (min-width: 1280px) {
  .b2b-hero {
    height: 870px;
    padding: 0;
    border-radius: 0 0 60px 60px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F1 100%);
  }
  /* anchored where it starts at 1440, so a narrower screen crops its right
     side instead of sliding it under the copy */
  .b2b-hero__media { top: 338.3px; left: 567.6px; }
  .b2b-hero__img { width: 768.8px; height: 531.7px; border-radius: 0; }

  .b2b-hero__card {
    position: absolute;
    top: 146px;
    right: 60px;
    left: 60px;
    height: 664px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .b2b-hero__copy { gap: 40px; }
  .b2b-hero__title { max-width: none; font: 500 75px/1 var(--font); }
  .b2b-hero__title br,
  .b2b-hero__sub br { display: inline; }
  .b2b-hero__text { width: 448px; font: 400 18px/1.3 var(--font); }

  /* both buttons as wide as the wider one, 61px tall */
  .b2b-hero__actions { width: max-content; }
  .b2b-hero__actions .btn { padding-block: 18px; }
  .b2b-hero__actions .btn--ghost { color: var(--night); }
}

/* ==========================================================================
   2. what Zakaz+ Business is: three product cards
   ========================================================================== */

/* phone: a grey panel whose cards swipe one at a time, the next one waiting
   just past the screen edge */
.b2b-about {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 5px;
  border-radius: var(--r-section);
  background: var(--card);
}
.b2b-about__head { padding: 50px 15px 0; }
.b2b-about__heading { display: flex; flex-direction: column; gap: 12px; }
.b2b-about__title { font: var(--h2); color: var(--ink); }
.b2b-about__lead { font: var(--t14); color: #414540; }
.b2b-about__cta { display: none; }

.b2b-about__cards {
  display: flex;
  gap: 10px;
  margin-inline: -5px;
  padding-inline: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px;
  scrollbar-width: none;
}
.b2b-about__cards::-webkit-scrollbar { display: none; }
/* the desktop's grey columns don't exist here: the cards are the row */
.b2b-about__col,
.b2b-about__pair { display: contents; }
.b2b-about__flow--in { display: none; }

.b2b-about__flow {
  padding: 30px;
  border-radius: 45px;
  background: rgba(83, 99, 75, .07);
  font: var(--t14);
  color: #414540;
  text-align: center;
}

.product {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: 15px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* The photo card. Its pictures sit where Figma puts them in the 355px card
   and scale with the card on wider phones (cqw), so the crop holds. */
.product__card {
  position: relative;
  height: 415px;
  overflow: hidden;
  border-radius: 20px;
  /* overflow alone doesn't clip the blurred layers to the corners */
  clip-path: inset(0 round 20px);
  background: var(--white);
  container-type: inline-size;
}
.product--owner .product__card { background: #F9F9F9; }
.product__card > * { position: absolute; }
.product__img { max-width: none; }

.product__img--photo   { top: -144px; left: -2px; width: 379px; }
.product__img--cutout  { top: 54px; left: -102px; width: 444px; filter: blur(2px); }
.product__img--ipad    { bottom: -5px; left: 0; width: 100%; aspect-ratio: 345 / 466; object-fit: cover; }
.product__img--monitor { top: 0; left: -62px; width: 613px; }
.product__img--photo   { top: -40.563cqw; left: -.563cqw; width: 106.76cqw; }
.product__img--cutout  { top: 15.211cqw; left: -28.732cqw; width: 125.07cqw; }
.product__img--monitor { left: -17.465cqw; width: 172.68cqw; }

.product__shade { inset: 0; }
.product--app .product__shade   { background: linear-gradient(180deg, #1A1C1E 0%, rgba(26, 28, 30, 0) 49.038%, rgba(26, 28, 30, .8) 98.077%); }
.product--pos .product__shade   { background: linear-gradient(180deg, #333E2D 11.325%, rgba(51, 62, 45, 0) 30.843%, rgba(51, 62, 45, 0) 62.41%, #333E2D 111.21%); }
.product--owner .product__shade { background: linear-gradient(180deg, #21182F 0%, rgba(33, 18, 53, .3) 49.038%, rgba(33, 18, 53, .8) 98.077%); }

.product__head {
  top: 15px;
  right: 15px;
  left: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.product__title { font: 600 19px/1.2 var(--font-display); color: var(--white); white-space: nowrap; }
/* Figma gives this title a narrower box, so it takes two lines */
.product--pos .product__title { max-width: 184px; white-space: normal; }
.product__num {
  display: flex;
  flex: none;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(90, 93, 86, .4);
  font: var(--t14);
  color: var(--white);
}
.product__of { color: rgba(255, 255, 255, .38); }

/* the frosted caption along the bottom */
.product__text {
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 20px;
  border-radius: var(--r-button);
  background: rgba(77, 85, 69, .4);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font: var(--t1);
  color: #EEEFED;
}
.product--owner .product__text { background: rgba(49, 45, 55, .8); }

/* the app icon on the photographed phone's home screen */
.product__icon {
  top: 84px;
  left: 30px;
  width: 87px;
  height: 87px;
  filter: drop-shadow(0 4px 10px rgba(39, 37, 37, .1)) drop-shadow(0 -4px 10px rgba(39, 37, 37, .1));
}
.product__icon { top: 23.662cqw; left: 8.451cqw; width: 24.507cqw; height: 24.507cqw; }
.product__icon-backing { position: absolute; top: 17.98%; left: 15.77%; width: 68.14%; height: 64.04%; background: var(--white); }
.product__icon img { position: relative; width: 100%; height: 100%; }

/* under each card: its button and the round arrow to the next card */
.product__actions { display: flex; align-items: flex-start; gap: 5px; }
.product__cta { flex: 1 1 auto; min-width: 0; padding-inline: 18px; }
.product__cta-full { display: none; }

.product__go {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--green-dark);
  color: var(--white);
  transition: background-color .2s, box-shadow .2s, color .2s;
}
.product__go svg { width: 50px; height: 50px; }
/* the last card's arrow points back to the first */
.product__go--back svg { transform: scaleX(-1); }
@media (hover: hover) {
  .product__go:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--green-dark); color: var(--green-dark); }
}

/* tablet: the phone composition, two cards in view */
@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-about { padding: 10px; border-radius: 60px; }
  .b2b-about__head { padding: 50px 30px 0; }
  .b2b-about__cards { margin-inline: -10px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .product { flex-basis: calc((100% - 10px) / 2); max-width: 420px; }
}

/* desktop: two grey columns, the client app on the left, the POS and the
   owner's dashboard side by side on the right */
@media (min-width: 1280px) {
  .b2b > .b2b-about {
    width: calc(100% - 40px);
    max-width: 1400px;
  }
  .b2b-about {
    gap: 40px;
    padding: 60px;
    border-radius: 60px;
    background: var(--white);
  }
  /* as in Figma, the row runs 30px past the content box, so the button
     sits 30px in from the panel's edge */
  .b2b-about__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-right: -30px;
    padding: 0;
  }
  .b2b-about__heading { gap: 18px; }
  .b2b-about__title { font: 500 45px/1.3 var(--font); }
  .b2b-about__lead { max-width: 392px; font: var(--t1); }
  .b2b-about__cta { display: inline-flex; flex: none; margin-top: 10px; }

  .b2b-about__cards {
    align-items: flex-start;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .b2b-about__col { display: flex; flex-direction: column; padding: 10px; background: #F3F4F2; }
  /* shares of the width inside the columns' padding: 388 and 842 at 1440 */
  .b2b-about__col--app { flex: 388 1 0; gap: 21px; border-radius: 40px 40px 35px 35px; }
  .b2b-about__col--biz { flex: 842 1 0; gap: 20px; border-radius: 40px; }
  .b2b-about__pair { display: flex; gap: 10px; }
  .b2b-about__pair .product { flex: 1 1 0; }
  .b2b-about__flow { padding: 20px 30px; background: none; }
  .b2b-about__flow--in { display: block; }
  .b2b-about__flow--out { display: none; }

  .product { flex: none; gap: 21px; }
  .product__card { border-radius: var(--r-card); clip-path: inset(0 round 30px); }

  .product__img--photo   { top: -181px; left: -2px; width: 429px; }
  .product__img--cutout  { top: 45px; left: -102px; width: 467px; }
  .product__img--ipad    { bottom: -82px; left: calc(50% - .5px); width: 427px; aspect-ratio: auto; transform: translateX(-50%); }
  .product__img--monitor { top: 15px; left: -39px; width: 526px; }
  .product__icon { top: 99px; left: 25px; width: 87px; height: 87px; }

  .product__head { top: 30px; right: 30px; left: 30px; align-items: center; }
  /* Figma's rows on these two end 19px from the edge, and the owner's title
     sits on the row's bottom */
  .product--pos .product__head,
  .product--owner .product__head { right: 19px; }
  .product--owner .product__head { align-items: flex-end; }
  .product--pos .product__title { max-width: none; white-space: nowrap; }
  .product__of { display: none; }

  /* only the client app keeps a button: a full-width download, 61px tall */
  .product--pos .product__actions,
  .product--owner .product__actions,
  .product__go { display: none; }
  .product__cta { padding: 18px 28px; }
  .product__cta-full { display: inline; }
  .product__cta-short { display: none; }
}

/* ==========================================================================
   3. four problems, and the solution
   ========================================================================== */

/* phone: a white panel with the dark solution block set into its bottom */
.b2b-problems {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-top: 50px;
  border-radius: 50px 50px 40px 40px;
  background: var(--white);
}
.b2b-problems__panel { display: flex; flex-direction: column; gap: 30px; }
.b2b-problems__head { padding-inline: 20px; }
.b2b-problems__heading { display: flex; flex-direction: column; gap: 20px; }
/* Figma's text boxes: the lines break where the design breaks them */
.b2b-problems__title { max-width: 324px; font: var(--h2); color: var(--ink); }
.b2b-problems__lead { max-width: 234px; font: var(--t1); color: var(--ink); }
.b2b-problems__cta { display: none; }

.b2b-problems__list { display: flex; flex-direction: column; gap: 10px; padding-inline: 20px; }
.problem {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 25px;
  border-radius: 20px;
  background: var(--card);
  transition: background-color .3s;
}
.problem__head { display: flex; align-items: flex-start; gap: 5px; }
.problem__title { flex: 1 1 auto; font: var(--t5); color: var(--ink); }
.problem__num { flex: none; padding-block: 3px; font: 500 12px/1.3 var(--font); color: var(--ink-grey); transition: color .3s; }
.problem__text { font: var(--t14); color: var(--ink-grey); transition: color .3s; }

/* the card the reader has scrolled to (b2b.js); the first without script */
@media (max-width: 1279px) {
  .problem.is-active { background: #FFD2C7; }
  .problem.is-active .problem__head { gap: 0; }
  .problem.is-active .problem__title { font: 600 19px/1.2 var(--font-display); }
  .problem.is-active .problem__num { color: var(--ink); }
  .problem.is-active .problem__text { color: #6E6563; }
}
@media (prefers-reduced-motion: reduce) {
  .problem, .problem__num, .problem__text { transition: none; }
}

.b2b-solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 20px 20px;
  border-radius: 35px;
  background: var(--night);
  box-shadow: var(--shadow-up);
  color: var(--white);
  container-type: inline-size;
}
/* a phone runs everything down one column: copy, screens, button */
.b2b-solution__copy,
.b2b-solution__media { display: contents; }
.b2b-solution__text { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.b2b-solution__title { font: var(--h2); }
.b2b-solution__paras { display: flex; flex-direction: column; gap: 20px; font: var(--t1); }
.b2b-solution__summary .accent { color: var(--green); }
.b2b-solution__cta { order: 1; width: 100%; padding-inline: 18px; }
.b2b-solution__notes { display: none; }

/* The two cashier screens, cut off at 276px and faded out. The screens keep
   Figma's 154px at 375 and grow with the block; the strip's height follows
   them (cqw: the block's content width). */
.b2b-solution__shots {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: 276px;
  height: calc((100cqw - 26.71px) * .8953);
  padding-inline: 10px;
  overflow: hidden;
}
.b2b-solution__shot {
  flex: none;
  width: calc((100% - 6.71px) / 2);
  aspect-ratio: 154.143 / 333.977;
  border-radius: 11.048px;
  object-fit: cover;
}
.b2b-solution__fade { right: 0; bottom: 0; left: 0; height: 65px; }
.b2b-solution__fade,
.b2b-solution__fade::before,
.b2b-solution__fade::after { position: absolute; }
.b2b-solution__fade::before,
.b2b-solution__fade::after { content: ""; inset: 0; }
/* Figma's blur grows from nothing at the top edge to full at the bottom;
   the tint goes on top of it, unmasked */
.b2b-solution__fade::before {
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
          mask-image: linear-gradient(180deg, transparent, #000);
}
.b2b-solution__fade::after { background: linear-gradient(180deg, rgba(27, 29, 31, 0) 0%, rgba(26, 28, 30, .9) 80.29%, #1A1C1E 100%); }

/* tablet: the phone composition with more room; the screens stop growing */
@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-problems { padding-top: 60px; border-radius: 60px 60px 50px 50px; }
  .b2b-problems__head,
  .b2b-problems__list { padding-inline: 40px; }
  .b2b-solution { padding: 60px 40px 40px; border-radius: 45px; }
  .b2b-solution__text { max-width: 640px; }
  .b2b-solution__shots { justify-content: center; gap: 20px; height: 304px; padding: 0; }
  .b2b-solution__shot { width: 170px; border-radius: 12.179px; }
  .b2b-solution__cta { width: auto; padding-inline: 28px; }
}

/* desktop: the white panel inset like the other sections, the dark block
   full width below it with the screens and their captions on the right */
@media (min-width: 1280px) {
  .b2b-problems {
    align-items: center;
    gap: 20px;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .b2b-problems__panel {
    width: calc(100% - 40px);
    max-width: 1400px;
    gap: 40px;
    padding: 60px;
    border-radius: 60px;
    background: var(--white);
  }
  .b2b-problems__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 0; }
  .b2b-problems__title { max-width: 546px; }
  .b2b-problems__lead { max-width: 330px; }
  .b2b-problems__cta { display: inline-flex; flex: none; }
  .b2b-problems__list { flex-direction: row; gap: 15px; padding: 0; }
  .problem { flex: 1 1 0; }

  .b2b-solution {
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    width: 100%;
    padding: 60px 60px 120px;
    border-radius: 45px;
  }
  .b2b-solution__copy {
    display: flex;
    flex: 0 1 538px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    min-width: 463px;
    padding-block: 20px;
  }
  .b2b-solution__text { gap: 20px; }
  .b2b-solution__title { font: 500 35px/1.2 var(--font-display); white-space: nowrap; }
  .b2b-solution__paras p { max-width: 463px; }
  .b2b-solution__summary { display: none; }
  .b2b-solution__cta { order: 0; width: auto; padding-inline: 28px; }

  .b2b-solution__media { display: flex; flex: none; align-items: flex-start; gap: 20px; }
  .b2b-solution__shots { gap: 20px; width: auto; height: auto; padding: 0; overflow: visible; }
  .b2b-solution__shot { width: 170px; border-radius: 12.179px; }
  .b2b-solution__fade { display: none; }
  .b2b-solution__notes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 233px;
    height: 368px;
    padding-block: 20px;
    font: var(--t14);
  }
  .b2b-solution__note { max-width: 168px; color: #7F7F7F; }
  .b2b-solution__note--summary { max-width: none; color: #BEBDB8; }
}

/* ==========================================================================
   4. platform capabilities
   ========================================================================== */

/* phone: a grey panel of module status cards, a legend for the statuses */
.b2b-platform {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 20px;
  border-radius: var(--r-section);
  background: var(--card);
}
.b2b-platform__head { display: flex; flex-direction: column; gap: 15px; }
.b2b-platform__title { font: 600 30px/1 var(--font); color: var(--ink); }
.b2b-platform__services { display: none; }
.b2b-platform__legend { padding-top: 12px; font: var(--t14); color: var(--ink-grey); }
.b2b-platform__demo { display: none; }

.b2b-platform__band { display: flex; flex-direction: column; gap: 30px; }
.b2b-platform__modules { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1279px) {
  /* folded (b2b.js): the first three modules */
  .b2b-platform__modules.is-collapsed > .module--more { display: none; }
}

/* a module: white panel on a tinted card, "in development" underneath */
.module {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 3px;
  border-radius: 18px;
  /* the menu's module links land clear of the pinned bar */
  scroll-margin-top: 20px;
}
.module--light  { background: var(--mint); }
.module--dark   { background: var(--night); }
.module--simple { border-radius: 15px; background: var(--white); }

.module__panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 20px 15px 23px 20px;
  border-radius: 15px;
  background: var(--white);
}
.module__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.module__title { font: 600 19px/1.2 var(--font-display); color: var(--ink); }
.module__body { display: flex; flex-direction: column; gap: 15px; }

.badge {
  flex: none;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(206, 254, 70, .35);
  font: 500 12px/1.3 var(--font);
  color: var(--green);
  white-space: nowrap;
}
.badge--soon { background: var(--muted-fill); color: var(--ink); }

.module__list { display: flex; flex-direction: column; gap: 10px; }
.module__item { display: flex; align-items: center; gap: 8px; font: var(--t14); color: var(--ink); }
/* live: a 5px dot in an 8px box */
.module__item::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin: 1.5px;
  border-radius: 50%;
  background: var(--ink-grey);
}
/* soon: a small arrow, the "Скоро" badge above the list */
.module__soon { display: flex; flex-direction: column; gap: 10px; }
.module__soon > .badge { align-self: flex-end; margin-block: -2.5px; }
.module__list--soon { padding-right: 5px; }
.module__list--soon .module__item { color: var(--ink-grey); }
.module__list--soon .module__item::before {
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 0;
  background: url("../img/icon-arrow-sm-right.svg") center / 12px auto no-repeat;
}
/* in development: a dashed ring, on the card's tint */
.module__dev { display: flex; flex-direction: column; gap: 12px; padding: 15px; }
.module__dev-title { font: var(--t5); color: var(--ink); }
.module__list--dev .module__item { color: var(--ink-muted); }
.module__list--dev .module__item::before {
  width: 11px;
  height: 11px;
  margin: -.5px;
  border-radius: 0;
  background: url("../img/icon-point-dashed.svg") center / 11px 11px no-repeat;
}
.module--dark .module__dev-title { color: var(--white); }
.module--dark .module__list--dev .module__item { color: #CCCCCC; }
.module--dark .module__list--dev .module__item::before { background-image: url("../img/icon-point-dashed-light.svg"); }

/* "show all modules", then "hide" in the ghost style */
.b2b-platform__more { width: 100%; padding-inline: 18px; }
.b2b-platform__more[aria-expanded="true"] { background: var(--muted-fill); color: var(--ink); }
@media (hover: hover) {
  .b2b-platform__more[aria-expanded="true"]:hover { border-color: var(--night); color: var(--ink); }
}

/* tablet: the phone composition with more room */
@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-platform { padding: 60px 40px; border-radius: 60px; }
  .b2b-platform__title { font-size: 40px; }
  .b2b-platform__more { align-self: center; width: auto; min-width: 335px; }
}

/* desktop: the module tabs switch the dashboard; the service cards sit in a
   grey band across the bottom */
@media (min-width: 1280px) {
  /* Figma's frame, 1045 tall: title at 60, dashboard frame at 134 with the
     tabs 31px lower, service band at 730 */
  .b2b-platform {
    gap: 0;
    /* 20px under the solution block */
    margin-top: 10px;
    padding: 60px 0 0;
    overflow: hidden;
    border-radius: 60px;
    background: var(--white);
  }
  .b2b-platform__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-inline: 60px;
  }
  .b2b-platform__title { font: 500 45px/1 var(--font); }
  .b2b-platform__services { display: block; font: var(--t1); color: var(--ink-grey); }
  .b2b-platform__legend { display: none; }

  .b2b-platform__demo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-top: 29px;
    padding-inline: 60px;
  }
  .b2b-platform__tabs { display: flex; flex: none; flex-direction: column; gap: 5px; width: 305px; margin-top: 31px; }
  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 10px 10px 10px 15px;
    border-radius: 20px;
    background: var(--muted-fill);
    font: var(--t5);
    color: var(--ink);
    text-align: left;
    transition: background-color .2s, color .2s;
  }
  .tab__label { white-space: nowrap; }
  .tab__label br { display: none; }
  .tab__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color .2s, color .2s;
  }
  .tab__icon svg { width: 40px; height: 40px; }
  .tab[aria-selected="true"] { background: var(--green-dark); color: var(--white); }
  .tab[aria-selected="true"] .tab__icon { background: rgba(98, 185, 16, .3); color: var(--card); }
  @media (hover: hover) {
    .tab[aria-selected="false"]:hover { color: var(--night); }
    .tab[aria-selected="false"]:hover .tab__icon { background: var(--green); color: var(--card); }
  }

  /* the dashboard in a grey frame, 910 × 521 at 1440 */
  .b2b-platform__screen {
    flex: 0 1 910px;
    min-width: 0;
    padding: 21.5px 27px;
    border-radius: 40px;
    background: #949992;
  }
  .b2b-platform__panel { position: relative; }
  .b2b-platform__shot { width: 100%; border-radius: 20px; }
  /* the modules not open to guests: the dashboard dimmed and blurred */
  .b2b-platform__lock {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px;
    border-radius: 20px;
    background: rgba(1, 1, 1, .4);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    color: var(--white);
    text-align: center;
  }
  .b2b-platform__lock-text { max-width: 354px; font: 600 19px/1.2 var(--font-display); }

  /* the band runs 2px past the frame's bottom, which clips it */
  .b2b-platform__band { gap: 0; margin: 75px 0 -2px; padding: 60px; border-radius: 50px; background: var(--card); }
  .b2b-platform__modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .module--phone,
  .module__dev,
  .b2b-platform__more { display: none; }
  .module { gap: 0; min-height: 197px; border-radius: 20px; background: var(--white); }
  .module__panel { gap: 20px; }
}

/* ==========================================================================
   5. who the platform is for
   ========================================================================== */

/* phone: seven tall venue cards, one per swipe, words at the bottom */
.b2b-fit {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 5px 20px;
  border-radius: 50px 50px 40px 40px;
  background: var(--night);
  color: var(--white);
}
.b2b-fit__head { display: flex; flex-direction: column; gap: 12px; padding-inline: 15px; }
.b2b-fit__title { font: var(--h2); }
.b2b-fit__lead { font: var(--t14); color: var(--card); }

.b2b-fit__cards {
  display: flex;
  gap: 20px;
  margin-inline: -5px;
  padding-inline: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.b2b-fit__cards::-webkit-scrollbar { display: none; }
/* the desktop's two rows don't exist here, and the phone has its own order */
.b2b-fit__row { display: contents; }
.fit-card--restaurants { order: 1; }
.fit-card--cafe        { order: 2; }
.fit-card--flowers     { order: 3; }
.fit-card--coffee      { order: 4; }
.fit-card--shops       { order: 5; }
.fit-card--bakeries    { order: 6; }
.fit-card--fastfood    { order: 7; }

.fit-card {
  position: relative;
  flex: 0 0 100%;
  height: 496px;
  overflow: hidden;
  border-radius: var(--r-card);
  clip-path: inset(0 round 30px);
  container-type: inline-size;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Photo boxes as Figma draws them in the 335px card, in cqw so the crop
   holds when the card is wider; px first for browsers without cqw */
.fit-card__img { position: absolute; top: 0; left: 0; width: 335px; max-width: none; }
.fit-card--restaurants .fit-card__img { top: -9px; width: 345px; }
.fit-card--cafe .fit-card__img        { top: -224px; left: -168px; width: 633px; }
.fit-card--flowers .fit-card__img     { top: -9px; left: -52px; width: 403px; }
.fit-card--bakeries .fit-card__img    { top: -4px; height: 518px; object-fit: cover; }
.fit-card__img { width: 100cqw; }
.fit-card--restaurants .fit-card__img { top: -2.687cqw; width: 103.01cqw; }
.fit-card--cafe .fit-card__img        { top: -66.866cqw; left: -50.149cqw; width: 188.955cqw; }
.fit-card--flowers .fit-card__img     { top: -2.687cqw; left: -15.522cqw; width: 120.299cqw; }
.fit-card--bakeries .fit-card__img    { top: -1.194cqw; height: 154.627cqw; }

.fit-card__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
  padding: 30px;
  background: linear-gradient(180deg, rgba(52, 53, 54, 0) 0%, #1C1D1E 100%);
}
.fit-card__title { font: 600 19px/1.2 var(--font-display); color: var(--white); }
.fit-card__text { font: var(--t1); color: #BEBDB8; }

.b2b-fit__note {
  padding: 30px;
  border-radius: 35px;
  background: var(--card);
  font: var(--t14);
  color: #414540;
  text-align: center;
}

/* tablet: two cards in view, kept at phone size so the photos hold */
@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-fit { padding: 60px 10px 30px; border-radius: 60px; }
  .b2b-fit__head { padding-inline: 30px; }
  .b2b-fit__cards { margin-inline: -10px; padding-inline: 40px; scroll-padding-inline: 40px; }
  .fit-card { flex-basis: calc((100% - 20px) / 2); max-width: 335px; }
  .b2b-fit__note { align-self: center; padding-inline: 40px; }
}

/* desktop: the B2C venue grid on a dark panel, running off the right edge,
   the heading and a dark chip on the left */
@media (min-width: 1280px) {
  .b2b-fit {
    position: relative;
    display: block;
    height: 675px;
    /* 60px of dark ground above and below */
    margin-block: 50px;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
  }
  .b2b-fit__head { position: absolute; top: 80px; left: 120px; gap: 30px; width: 324px; padding: 0; }
  .b2b-fit__title { font: 500 35px/1 var(--font); }
  .b2b-fit__lead { font: var(--t1); color: var(--white); }
  .b2b-fit__note {
    position: absolute;
    top: 517px;
    left: 120px;
    border-radius: var(--r-card);
    background: #343536;
    color: var(--white);
    white-space: nowrap;
  }

  .b2b-fit__cards {
    position: absolute;
    top: calc(50% + 0.5px);
    left: 548px;
    flex-direction: column;
    gap: 10px;
    width: 1055px;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: translateY(-50%);
    scroll-snap-type: none;
  }
  .b2b-fit__row { display: flex; gap: 10px; }
  .b2b-fit__row--lower { padding-left: 60px; }

  .fit-card { flex: none; width: 305px; height: 353px; order: 0; container-type: normal; }
  .fit-card--coffee { display: none; }

  .fit-card__img,
  .fit-card--restaurants .fit-card__img  { top: 0; left: 0; width: 335px; height: auto; }
  .fit-card--flowers .fit-card__img      { top: -9px; left: -52px; width: 403px; height: 514px; }
  .fit-card--cafe .fit-card__img         { top: -224px; left: -168px; width: 633px; height: 729px; }
  .fit-card--restaurants .fit-card__img  { width: 305px; height: 353px; }
  .fit-card--shops .fit-card__img        { height: 500px; }
  .fit-card--fastfood .fit-card__img     { height: 514px; }
  .fit-card--bakeries .fit-card__img     { top: -4px; height: 518px; }

  /* upper row: words at the bottom over a dark fade; lower row: at the top */
  .fit-card__caption {
    top: auto;
    bottom: -0.5px;
    min-height: 200px;
    border-radius: var(--r-card);
  }
  .b2b-fit__row--lower .fit-card__caption {
    top: 0;
    bottom: 0;
    justify-content: flex-start;
    background: linear-gradient(180deg, #1C1D1E 0%, rgba(52, 53, 54, 0) 100%);
  }
  .fit-card--restaurants .fit-card__caption { min-height: 0; }
  .fit-card__title { font: var(--title-card); }
  .fit-card__text { font: var(--t14); }
  /* Figma's text boxes, per language */
  .fit-card--bakeries .fit-card__text { max-width: 170px; }
  :lang(en) .fit-card--restaurants .fit-card__text { max-width: 220px; }
  :lang(en) .fit-card--bakeries .fit-card__text { max-width: 158px; }
  :lang(uz) .fit-card--restaurants .fit-card__text { max-width: 217px; }
}

/* ==========================================================================
   6. how to connect
   ========================================================================== */

/* phone: a white panel, the three steps as an overlapping deck */
.b2b-connect {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 20px 20px;
  border-radius: var(--r-section);
  background: var(--white);
}
.b2b-connect__head { display: flex; flex-direction: column; gap: 20px; }
.b2b-connect__title { font: 600 30px/1 var(--font); color: var(--ink); }
.b2b-connect__lead { max-width: 192px; font: var(--t1); color: var(--ink); }

.b2b-connect__steps { display: flex; flex-direction: column; }
.connect-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 20px 20px 40px;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-up);
}
/* each card tucks 10px under the next, which paints on top */
.connect-step + .connect-step { margin-top: -10px; }
.connect-step--1 { background: linear-gradient(180deg, #F2F3F1 0%, #FFFFFF 100%); }
.connect-step--2 { background: linear-gradient(180deg, #E3E3E2 0%, #FFFFFF 100%); }
.connect-step--3 { background: linear-gradient(180deg, #CED6C7 0%, #FFFFFF 100%); }
.connect-step__dots { width: 49px; height: 25px; }
.connect-step__copy { display: flex; flex-direction: column; gap: 15px; }
.connect-step__title { font: 600 19px/1.2 var(--font-display); color: var(--ink); }
.connect-step__text { font: var(--t14); color: var(--ink-grey); }

.b2b-connect__cta { width: 100%; padding-inline: 18px; }

@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-connect { padding: 60px 40px 40px; border-radius: 60px; }
}

/* desktop: a 1400px panel, the lead beside the title, the steps in a row */
@media (min-width: 1280px) {
  .b2b > .b2b-connect { width: calc(100% - 40px); max-width: 1400px; }
  .b2b-connect { gap: 40px; padding: 60px 120px; border-radius: 60px; }
  .b2b-connect__head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .b2b-connect__title { font-size: 35px; }
  .b2b-connect__lead { flex: none; width: 192px; }
  /* equal heights, though Figma lets a longer UZ card run taller */
  .b2b-connect__steps { flex-direction: row; gap: 20px; }
  .connect-step { flex: 1 1 0; padding: 30px 40px 50px 30px; box-shadow: none; }
  .connect-step + .connect-step { margin-top: 0; }
  /* 20px under the cards, 61px tall */
  .b2b-connect__cta { margin-top: -20px; padding: 18px 28px; }
}

/* ==========================================================================
   7. services and pricing model
   ========================================================================== */

/* straight on the dark ground, no panel */
.b2b-pricing {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px 20px;
  background: var(--night);
  color: var(--white);
}
.b2b-pricing__head { display: flex; flex-direction: column; gap: 20px; }
.b2b-pricing__title { font: 600 30px/1 var(--font); }
.b2b-pricing__lead { max-width: 576px; padding-top: 12px; font: var(--t1); color: rgba(255, 255, 255, .7); }

.b2b-pricing__models { display: flex; flex-direction: column; gap: 10px; }
/* The words hold the top and bottom of the card: pinned apart on a
   desktop's equal-height cards, together on a phone's hugging ones. */
.price-model {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  padding: 20px;
  border-radius: var(--r-card);
  background: #343536;
}
.price-model__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  min-width: 0;
}
.price-model__title { font: var(--title-card); white-space: nowrap; }
.price-model__text { font: var(--t14); color: #BEBDB8; }
.price-model__go { flex: none; width: 40px; height: 40px; transition: transform .2s; }
@media (hover: hover) {
  .price-model:hover .price-model__go { transform: rotate(45deg); }
}

.b2b-pricing__note {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font: 500 12px/1.3 var(--font);
  color: rgba(255, 255, 255, .6);
}
/* the note's line breaks are the phone's */
@media (min-width: 768px) {
  .b2b-pricing__note br { display: none; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-pricing { padding: 60px 40px; }
}

@media (min-width: 1280px) {
  .b2b-pricing { gap: 40px; padding: 120px; }
  .b2b-pricing__models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .price-model { min-height: 117px; }
}

/* ==========================================================================
   8. FAQ (the rows themselves are shared, in site.css)
   ========================================================================== */

.b2b-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 20px;
  border-radius: var(--r-section);
  background: var(--card);
}
.b2b-faq__title { align-self: stretch; font: 600 30px/1 var(--font); color: var(--ink); }
.b2b-faq__title-wide { display: none; }
.b2b-faq__list { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 650px; }

@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-faq { padding: 60px 40px; border-radius: 60px; }
}

@media (min-width: 1280px) {
  .b2b > .b2b-faq { width: calc(100% - 40px); max-width: 1400px; }
  /* straight under the pricing block, which ends on the same dark ground */
  .b2b-faq { gap: 40px; margin-top: -10px; padding: 60px 120px 80px; border-radius: 60px; }
  .b2b-faq__title { align-self: center; font: 500 35px/1.3 var(--font); text-align: center; }
  .b2b-faq__title-wide { display: inline; }
  .b2b-faq__title-narrow { display: none; }
}

/* ==========================================================================
   9. request form
   ========================================================================== */

/* phone: the photo on top, the form card riding 44px up over it */
.b2b-request { display: flex; flex-direction: column; }
.b2b-request__photo {
  position: relative;
  order: -1;
  height: 430px;
  overflow: hidden;
  border-radius: 50px 50px 0 0;
}
.b2b-request__img { width: 100%; height: 100%; object-fit: cover; object-position: 17.71% 50%; }
/* a light wash of the page's dark from the right */
.b2b-request__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(26, 28, 30, .2) 8.71%, rgba(26, 28, 30, 0) 105.33%);
}

.b2b-request__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: -44px;
  padding: 50px 20px;
  border-radius: var(--r-section);
  background: var(--card);
}
.b2b-request__head { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.b2b-request__title { font: 600 30px/1 var(--font); color: var(--ink); }
.b2b-request__lead { font: var(--t14); color: var(--ink-grey); }

.request-form { display: flex; flex-direction: column; gap: 20px; width: 100%; }
/* the bots' field: out of sight and out of the tab order */
.request-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font: var(--t14); color: var(--ink-grey); }
.field__input {
  width: 100%;
  height: 49px;
  padding: 14px 15px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--white);
  font: var(--t1);
  color: var(--ink);
  transition: box-shadow .2s;
}
.field__input::placeholder { color: rgba(17, 24, 39, .5); opacity: 1; }
.field__input:focus { outline: none; }
.field__input:focus-visible { box-shadow: var(--focus); }

/* errors: a red line on the field and a note under it, once a send was tried */
.field__error,
.request-form__failure { display: none; font: 500 12px/1.3 var(--font); color: #C4320A; }
.field__error.is-shown,
.request-form__failure.is-shown,
.request-form__failure:target { display: block; }
.field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #C4320A; }
.field__input[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px #C4320A, var(--focus); }

.consent { display: flex; align-items: flex-start; gap: 12px; }
.consent__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 2px solid #E5E7EB;
  border-radius: 4px;
  background: transparent center / 20px 20px no-repeat;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color .2s, border-color .2s;
}
.consent__box:checked { border-color: var(--green); background-color: var(--green); background-image: url("../img/icon-checkbox-tick.svg"); }
.consent__box[aria-invalid="true"] { border-color: #C4320A; }
.consent__text { flex: 1 1 auto; min-width: 0; max-width: 322px; font: 500 12px/1.3 var(--font); color: var(--ink-grey); cursor: pointer; }

.request-form__submit { width: 100%; padding-inline: 18px; }
.request-form__submit:disabled { cursor: progress; opacity: .7; }

/* sent: the form gives way to a short confirmation */
.request-done {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 30px 20px;
  border-radius: var(--r-card);
  background: var(--white);
  text-align: center;
}
.request-done:focus { outline: none; }
.request-done__icon { width: 50px; height: 50px; }
.request-done__title { font: 600 19px/1.2 var(--font-display); color: var(--ink); }
.request-done__text { max-width: 335px; font: var(--t14); color: var(--ink-grey); }
.b2b-request.is-sent .request-form,
.b2b-request__body:has(.request-done:target) .request-form { display: none; }
.b2b-request.is-sent .request-done,
.request-done:target { display: flex; }

/* tablet: the phone composition, the form kept to the desktop's width */
@media (min-width: 768px) and (max-width: 1279px) {
  .b2b-request__photo { height: 520px; border-radius: 60px 60px 0 0; }
  .b2b-request__body { padding: 60px 40px; border-radius: 60px; }
  .b2b-request__head,
  .request-form,
  .request-done { max-width: 459px; }
}

/* desktop: the form on the left of a grey panel, the photo on the right */
@media (min-width: 1280px) {
  .b2b > .b2b-request { width: calc(100% - 40px); max-width: 1400px; }
  .b2b-request {
    flex-direction: row;
    align-items: flex-start;
    gap: 120px;
    /* 20px under the FAQ */
    margin-top: 10px;
    border-radius: 60px;
    background: var(--card);
  }
  .b2b-request__body {
    flex: none;
    align-items: stretch;
    width: 579px;
    margin: 0;
    padding: 60px 0 60px 120px;
    border-radius: 0;
    background: none;
  }
  .b2b-request__title { font: 500 35px/1 var(--font); }
  .b2b-request__lead { max-width: 335px; font: var(--t1); }
  .request-form__submit { padding-inline: 28px; }

  .b2b-request__photo {
    flex: 1 1 0;
    align-self: stretch;
    order: 0;
    height: auto;
    min-height: 630px;
    border-radius: var(--r-section);
  }
  .b2b-request__img { position: absolute; inset: 0; object-position: 21.02% 50%; }
  .b2b-request__photo::after { background: linear-gradient(270deg, rgba(26, 28, 30, .2) 25.65%, rgba(26, 28, 30, 0) 101.51%); }
}

/* ==========================================================================
   10. English on a desktop: bold, as Figma sets it
   ========================================================================== */

/* The English desktop page (Figma 512:10245) sets its Inter text in Bold
   where the Russian and Uzbek pages use Regular or Medium. The Manrope titles,
   the SemiBold section titles and the FAQ answers keep their weights, and the
   English phone page isn't bold, so this is desktop only. */
@media (min-width: 1280px) {
  /* header and hero */
  .site-head--b2b:lang(en) .site-nav__link,
  .site-head--b2b:lang(en) .lang-switch__item,
  .site-head--b2b:lang(en) .btn,
  :lang(en) .b2b-hero__title,
  :lang(en) .b2b-hero__text,
  :lang(en) .b2b-hero__actions .btn,
  /* what Zakaz+ Business is */
  :lang(en) .b2b-about__title,
  :lang(en) .b2b-about__lead,
  :lang(en) .b2b-about__cta,
  :lang(en) .product__num,
  :lang(en) .product__text,
  :lang(en) .product__cta,
  :lang(en) .b2b-about__flow,
  /* problems and the solution */
  :lang(en) .b2b-problems__title,
  :lang(en) .b2b-problems__lead,
  :lang(en) .b2b-problems__cta,
  :lang(en) .problem__title,
  :lang(en) .problem__num,
  :lang(en) .problem__text,
  :lang(en) .b2b-solution__title,
  :lang(en) .b2b-solution__paras,
  :lang(en) .b2b-solution__cta,
  :lang(en) .b2b-solution__note,
  /* platform */
  :lang(en) .b2b-platform__title,
  :lang(en) .tab,
  :lang(en) .b2b-platform__band .badge,
  :lang(en) .b2b-platform__band .module__item,
  /* who it's for */
  :lang(en) .b2b-fit__title,
  :lang(en) .b2b-fit__lead,
  :lang(en) .fit-card__text,
  :lang(en) .b2b-fit__note,
  /* how to connect */
  :lang(en) .b2b-connect__lead,
  :lang(en) .connect-step__text,
  :lang(en) .b2b-connect__cta,
  /* pricing */
  :lang(en) .b2b-pricing__lead,
  :lang(en) .price-model__text,
  :lang(en) .b2b-pricing__note,
  /* FAQ: the heading only */
  :lang(en) .b2b-faq__title,
  /* request form */
  :lang(en) .b2b-request__title,
  :lang(en) .b2b-request__lead,
  :lang(en) .field__label,
  :lang(en) .field__input,
  :lang(en) .consent__text,
  :lang(en) .field__error,
  :lang(en) .request-form__failure,
  :lang(en) .request-form__submit,
  /* footer */
  .site-foot--dark:lang(en) .foot-brand__tagline,
  .site-foot--dark:lang(en) .contact__value,
  .site-foot--dark:lang(en) .foot-links,
  .site-foot--dark:lang(en) .biz-banner__text,
  .site-foot--dark:lang(en) .biz-banner__btn { font-weight: 700; }
}

/* ==========================================================================
   11. motion on this page (the shared rules are in site.css)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* the round arrow under a product card gives when pressed */
  .product__go { transition: background-color .2s, box-shadow .2s, color .2s, scale .15s var(--ease-out); }
  .product__go:active { scale: .92; }

  /* a module tab's dashboard fades in over the last one */
  .b2b-platform__panel:not([hidden]) { animation: reveal-in .25s var(--ease-out); --reveal-shift: 0px; }

  /* the confirmation rises in where the form was */
  .b2b-request.is-sent .request-done { animation: reveal-in var(--reveal-time) var(--ease-out); }
}