/* ========== CollabX sections. 1440 design frame; values are Figma-exact. ========== */

.skip-link {
  position: absolute;
  left: 24px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  transition: top .2s ease;
}

.skip-link:focus {
  top: 16px;
}

.u-lime {
  color: var(--lime);
}

.u-lime-accent {
  color: var(--lime-accent);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lime);
  color: var(--ink-chip);
  padding: 9px 16px;
  border-radius: 20px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
}

.chip--sm {
  background: var(--green-pill);
  color: #0d0d0d;
  padding: 7px 16px 6px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* ---------- 01 Header ---------- */
.site-header {
  padding-top: 40px;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.site-header__brand img {
  width: 162.56px;
  height: 39.12px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav__list a {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ink-deep);
}

.site-nav__list a:hover {
  color: var(--green-text);
}

/* HD-1: Figma's nav text boxes are whole pixels; the browser's fractional
   widths drifted the right-aligned row up to 3px. From 1024 the header is
   the 1440 layout zoomed (D2), so the widths hold there too; below 1024 the
   nav font drops and these widths squeezed the logo to 54px */
@media (min-width: 1024px) {
  .site-nav__list li:nth-child(1) { width: 81px; }
  .site-nav__list li:nth-child(2) { width: 99px; }
  .site-nav__list li:nth-child(3) { width: 116px; }
  .site-nav__list li:nth-child(4) { width: 125px; }
  .site-nav__list li:nth-child(5) { width: 58px; }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  align-items: flex-end;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink-deep);
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 02 Hero ---------- */
.hero {
  position: relative;
  height: 883px;
  padding-top: 70px;
}

/* 70 gap + 813 frame */
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 616px 1fr;
  gap: 0;
}

.hero__copy {
  position: relative;
  padding-top: 0;
}

.hero__title {
  position: relative;
  margin-top: 20px;
  max-width: 607px;
  white-space: pre-wrap;
}

.hero__mark {
  position: relative;
  margin: 0 15px;
  left: -2.5px;
}

.hero__mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -17.5px;
  right: -20.5px;
  top: 20px;
  height: 72px;
  background: var(--lime);
  border-radius: 42px;
}

.hero__sub {
  margin-top: 35px;
  max-width: 406px;
  color: var(--text-body-light);
}

.hero__ctas {
  display: flex;
  gap: 35px;
  align-items: flex-start;
  margin-top: 141px;
}

/* Hero funnel — 531x573, card surfaces from exported vectors */
.funnel {
  position: relative;
  width: 531px;
  height: 573px;
  justify-self: end;
  margin-top: 0;
  margin-right: 27px;
}

.funnel__connector {
  position: absolute;
  left: 50%;
  top: 65px;
  bottom: 83px;
  width: 2.5px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, var(--green-text-alt) 0 5.5px, transparent 5.5px 7px);
}

.funnel__card {
  position: absolute;
  left: 0;
  right: 0;
  /* the exported card outlines: 18px corners, a 0.83px #ECECEC edge, no shadow */
  background: center/100% 100% no-repeat url("../assets/img/funnel-card-goal.svg");
  padding: 10px 14px;
}

.funnel__card--goal {
  top: 0;
  height: 65px;
}

.funnel__card--pool {
  top: 86.6px;
  height: 75px;
  background-image: url("../assets/img/funnel-card-pool.svg");
}

/* the tapered funnel card is narrower (526.5 of 531) and sits 3px in, so its
   chip and copy are pulled back 3px to stay on the column of the other cards */
.funnel__card--filtered {
  top: 182.7px;
  left: 3px;
  right: auto;
  width: 526.5px;
  height: 66px;
  background-image: url("../assets/img/funnel-card-filtered.svg");
}

.funnel__card--filtered::after {
  content: "";
  position: absolute;
  left: 339.5px;
  top: 15.5px;
  width: 1px;
  height: 34.5px;
  background: #dadada;
}

.funnel__card--filtered .funnel__chip {
  left: 11px;
}

.funnel__card--filtered .funnel__title {
  margin-left: 52px;
  margin-top: -2px;
}

.funnel__card--filtered .funnel__sub {
  margin-left: 52px;
  margin-top: -1.5px;
}

.funnel__card--bestfit {
  top: 270.8px;
  height: 66px;
  background-image: url("../assets/img/funnel-card-bestfit.svg");
}

.funnel__card--campaign {
  top: 360.5px;
  height: 109px;
  background-image: url("../assets/img/funnel-card-campaign.svg");
}

.funnel__card--results {
  top: 490.3px;
  height: 82px;
  background-image: url("../assets/img/funnel-card-results.svg");
}

.funnel__card--pool .funnel__title {
  margin-top: 4px;
}

.funnel__card--pool .funnel__sub {
  margin-top: -2.5px;
}

/* chips are 42.7px discs in Figma, not 34px rounded squares; rows 1 and 4 need
   their composed glyphs (ring+dot, person+body+star) or they render as bare outlines */
.funnel__chip {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42.73px;
  height: 42.73px;
  border-radius: 50%;
  background: center/19px no-repeat url("../assets/img/funnel-glyph-goal.svg"),
    center/100% 100% no-repeat url("../assets/img/funnel-chip-generic.svg");
}

/* glyph boxes carry export padding, so these sizes are set off the measured
   ink against the 2x comp, not the Figma frame sizes */
.funnel__chip--people {
  background-image: url("../assets/img/funnel-glyph-people.svg"), url("../assets/img/funnel-chip-generic.svg");
  background-size: 24px 15.5px, 100% 100%;
  background-position: calc(50% + 1px) calc(50% - 1px), center;
}

.funnel__chip--filter {
  background-image: url("../assets/img/funnel-glyph-filter.svg"), url("../assets/img/funnel-chip-generic.svg");
  background-size: 23px 26.2px, 100% 100%;
  background-position: calc(50% + 1px) calc(50% + 1px), center;
}

.funnel__chip--person {
  background-image: url("../assets/img/funnel-glyph-bestfit.svg"), url("../assets/img/funnel-chip-generic.svg");
  background-size: 26.5px 26.2px, 100% 100%;
  background-position: calc(50% + 2px) calc(50% + 1.5px), center;
}

.funnel__chip--play {
  background-image: url("../assets/img/funnel-glyph-play.svg"), url("../assets/img/funnel-chip-generic.svg");
  background-size: 14px 17.5px, 100% 100%;
  background-position: calc(50% + 3px) center, center;
  top: 27px;
  transform: none;
}

.funnel__chip--chart {
  background-image: url("../assets/img/funnel-glyph-chart.svg"), url("../assets/img/funnel-chip-results.svg");
  left: 13px;
  top: 17.5px;
  transform: none;
}

/* Tracked results: two icon discs and the rule between the metrics */
.funnel__icon {
  position: absolute;
  top: 20px;
  width: 42.73px;
  height: 42.73px;
  background: center/22px no-repeat, center/100% 100% no-repeat url("../assets/img/funnel-chip-results.svg");
}

.funnel__icon--cursor {
  left: 248.5px;
  background-image: url("../assets/img/funnel-glyph-cursor.svg"), url("../assets/img/funnel-chip-results.svg");
}

.funnel__icon--bag {
  left: 396.5px;
  background-image: url("../assets/img/funnel-glyph-bag-full.svg"), url("../assets/img/funnel-chip-results.svg");
}

.funnel__rowrule {
  position: absolute;
  left: 377.5px;
  top: 18px;
  width: 1px;
  height: 48.15px;
  background: #ffffff8c;
}

.funnel__title {
  margin-left: 55px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-funnel);
}

.funnel__title--sm {
  font-size: 16px;
  line-height: 20px;
  margin-top: 12px;
}

.funnel__title--xs {
  font-size: 12px;
  line-height: 16px;
  margin-top: 14px;
}

.funnel__sub {
  margin-left: 55px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--text-funnel-sub);
}

.funnel__sub--xs {
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  color: #2e2e2e;
}

.funnel__card--campaign .funnel__sub {
  max-width: 170px;
  margin-top: 6px;
  letter-spacing: -.24px;
}

.funnel__card--results .funnel__title,
.funnel__card--results .funnel__sub {
  margin-left: 51px;
}

.funnel__card--results .funnel__sub {
  margin-top: 3.5px;
}

.funnel__notes {
  position: absolute;
  right: 77px;
  top: 9px;
  text-align: left;
}

.funnel__notes li {
  font-size: 10px;
  line-height: 15px;
  font-weight: 400;
  color: var(--text-funnel-sub);
  letter-spacing: -.1px;
}

.funnel__avatars {
  position: absolute;
  display: flex;
}

.funnel__avatars img {
  width: 42.7px;
  height: 42.7px;
  border-radius: 50%;
  object-fit: cover;
}

.funnel__avatars--pool {
  right: 44px;
  top: 16px;
}

.funnel__avatars--pool img {
  margin-right: -1.6px;
}

.funnel__avatars--bestfit {
  right: 86px;
  top: 11px;
}

.funnel__avatars--bestfit img {
  width: 40px;
  height: 40px;
  margin-right: -7.3px;
}

.funnel__cut {
  position: absolute;
  right: 20px;
  top: 15.5px;
  text-align: center;
}

.funnel__cut {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--green-text-alt);
}

.funnel__cut span {
  display: block;
  font-size: 8px;
  line-height: 10px;
  font-weight: 400;
  color: #34543a;
  letter-spacing: -.24px;
}

/* asset is pre-cropped to the Figma clip window (node 2234:1505 CROP transform) */
.funnel__photo {
  position: absolute;
  right: 80.5px;
  top: 10px;
  width: 168px;
  height: 96px;
  border-radius: 11px;
  object-fit: cover;
}

.funnel__stats {
  position: absolute;
  left: 461px;
  top: 16px;
}

.funnel__stats li {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 25px;
  font-size: 10px;
  line-height: 25px;
  font-weight: 700;
  color: var(--ink-funnel);
  letter-spacing: -.5px;
}

/* Figma sets these three as colour-emoji glyphs in a text run, so they render
   differently on every OS and not at all in the PNG export. Cut from the 2x
   export instead, unmatted from white. */
.funnel__stat-icon {
  vertical-align: middle;
}

.funnel__stat-icon--likes {
  width: 10px;
  height: 9.5px;
}

.funnel__stat-icon--comments {
  width: 4.5px;
  height: 4.5px;
}

.funnel__stat-icon--views {
  width: 10.5px;
  height: 10.5px;
}

.funnel__metric {
  position: absolute;
  top: 24px;
  left: 303px;
}

.funnel__metric--2 {
  left: 448px;
}

.funnel__metric-l {
  display: block;
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  color: var(--ink-funnel);
  letter-spacing: -.1px;
}

.funnel__metric-v {
  display: block;
  margin-top: -1.5px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-funnel);
}

/* ---------- 03 Trust ---------- */
.trust {
  position: absolute;
  left: 100px;
  top: 599px;
  width: 1250px;
  height: 139px;
}

.trust__label {
  margin-top: 25px;
  line-height: 32px;
  color: var(--ink-deep);
}

.trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 36px;
  margin-top: 14px;
  max-width: 1240px;
}

.trust__logo {
  width: 123.33px;
  height: 59.72px;
  position: relative;
  overflow: hidden;
}

.trust__logo img {
  position: absolute;
  max-width: none;
}

/* each logo has its own crop transform in Figma — reproduced exactly */
.trust__logo--dominos img {
  height: 39.98%;
  left: 6.42%;
  top: 29.67%;
  width: 86.86%;
}

.trust__logo--subway img {
  height: 164.32%;
  left: 7.14%;
  top: -31.5%;
  width: 79.57%;
}

.trust__logo--mcdonalds img {
  height: 93.37%;
  left: 9.38%;
  top: 3.47%;
  width: 75.35%;
}

.trust__logo--kfc img {
  height: 65.92%;
  left: 14.05%;
  top: 17.3%;
  width: 71.54%;
}

.trust__logo--acko img {
  height: 38.89%;
  left: 20.68%;
  top: 30.24%;
  width: 59.07%;
}

.trust__logo--mpokket img {
  height: 60.58%;
  left: 3.94%;
  top: 20.1%;
  width: 91.89%;
}

.trust__logo--pizzahut img {
  height: 93.41%;
  left: 27.98%;
  top: 2.98%;
  width: 44.21%;
}

.trust__logo--chinesewok {
  width: 97.7px;
  height: 42.35px;
  border-radius: 5.61px;
}

.trust__logo--chinesewok img {
  height: 139.48%;
  left: -10.65%;
  top: -17.7%;
  width: 116.28%;
}

/* ---------- 04 How you pay ---------- */
.howpay {
  position: relative;
  height: 341px;
  margin-top: 10px;
  padding: 52px var(--card-pad) 56px;
}

.howpay__pill {
  position: absolute;
  left: 77px;
  top: 52px;
  padding-block: 4px;
}

.howpay__title {
  margin-top: 56px;
  max-width: 380px;
  color: #f6f8f5;
}

.howpay__aside {
  position: absolute;
  left: 671px;
  top: 94px;
  width: 523px;
}

.howpay__desc {
  color: var(--text-muted-dark-2);
}

.howpay__chips {
  display: flex;
  gap: 12.7px;
  margin-top: 36px;
  flex-wrap: wrap;
}

/* ---------- 05 Stats + 06 Problem shared surface ---------- */
.shared {
  position: relative;
  margin-top: 164px;
  height: 1652px;
  background: var(--ink);
  border-radius: var(--radius-section);
  padding: 0 var(--card-pad);
}

.stats {
  position: relative;
  top: -84px;
  left: -3px;
}

.stats__row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.stat {
  position: relative;
  width: 279px;
  height: 550px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  flex: 0 0 279px;
}

.stat--orders {
  background: var(--lime);
}

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

.stat__p {
  position: absolute;
  border-radius: 50%;
  object-fit: cover;
}

.stat__full {
  position: absolute;
  max-width: none;
}

.stat__fade {
  position: absolute;
  left: 1px;
  top: 141px;
  width: 278px;
  height: 410px;
  background: linear-gradient(to bottom, rgb(247 246 247 / 0) 0%, var(--surface-stat) 63.942%);
}

.stat--orders .stat__fade {
  display: none;
}

.stat__value {
  position: absolute;
  left: 21px;
  top: 378px;
  color: var(--ink-stat);
}

.stat__label {
  position: absolute;
  left: 21px;
  top: 450px;
  width: 160px;
  color: var(--ink-stat);
}

/* card 1 portrait positions (Figma exact) */
.stat__p--1 {
  left: 11px;
  top: -18px;
  width: 90px;
  height: 90px;
}

.stat__p--2 {
  left: 71px;
  top: 93px;
  width: 90px;
  height: 90px;
}

.stat__p--3 {
  left: 233px;
  top: 268px;
  width: 70px;
  height: 70px;
}

.stat__p--4 {
  left: 216px;
  top: 357px;
  width: 87px;
  height: 87px;
}

.stat__p--5 {
  left: 123px;
  top: 276px;
  width: 90px;
  height: 90px;
}

.stat__p--6 {
  left: 263px;
  top: 120px;
  width: 90px;
  height: 90px;
}

.stat__p--7 {
  left: -6px;
  top: 182px;
  width: 90px;
  height: 90px;
}

.stat__p--8 {
  left: -60px;
  top: 276px;
  width: 90px;
  height: 90px;
}

.stat__p--9 {
  left: -6px;
  top: 366px;
  width: 90px;
  height: 90px;
}

.stat__p--10 {
  left: 123px;
  top: 5px;
  width: 79px;
  height: 79px;
}

.stat__p--11 {
  left: 176px;
  top: 175px;
  width: 92px;
  height: 92px;
}

.stat__p--12 {
  left: 93px;
  top: 194px;
  width: 73px;
  height: 73px;
}

.stat__p--13 {
  left: 39px;
  top: 283px;
  width: 73px;
  height: 73px;
}

.stat__p--14 {
  left: -23px;
  top: 84px;
  width: 79px;
  height: 79px;
}

.stat__p--15 {
  left: 220px;
  top: 0;
  width: 74px;
  height: 74px;
}

.stat__p--16 {
  left: 181px;
  top: 84px;
  width: 77px;
  height: 77px;
}

.stat__p--36 {
  left: 123px;
  top: 382px;
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.stat__p--37 {
  left: 50px;
  top: 382px;
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.stat__full--orders {
  left: 0;
  top: -113px;
  width: 403px;
  height: 523px;
  object-fit: cover;
  object-position: bottom;
}

.stat__full--views {
  left: -77px;
  top: -79px;
  width: 473px;
  height: 629px;
  object-fit: cover;
}

.stat__full--roas {
  left: -191px;
  top: -38px;
  width: 470px;
  height: 626px;
  object-fit: cover;
}

.stats__caption {
  margin: 36px auto 0;
  width: 577px;
  text-align: left;
  color: var(--text-on-dark);
}

/* "how we count →" (B2): native popover, centred by the UA, light-dismiss */
.stats__how {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.stats__how:hover {
  color: var(--lime);
}

.how-count {
  width: min(440px, calc(100vw - 32px));
  padding: 32px 28px 28px;
  border: 1px solid var(--lime);
  border-radius: 20px;
  background: #000;
  color: var(--text-on-dark);
  font-size: 16px;
  line-height: 1.5;
}

.how-count::backdrop {
  background: rgb(0 0 0 / .5);
}

/* same fade/rise as the dialogs (.cstory) */
.how-count,
.how-count::backdrop {
  opacity: 0;
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1),
    transform .32s cubic-bezier(.22, .61, .36, 1),
    overlay .32s allow-discrete,
    display .32s allow-discrete;
}

.how-count {
  transform: translateY(24px) scale(.97);
}

.how-count:popover-open,
.how-count:popover-open::backdrop {
  opacity: 1;
  transform: none;
}

@starting-style {
  .how-count:popover-open,
  .how-count:popover-open::backdrop {
    opacity: 0;
  }

  .how-count:popover-open {
    transform: translateY(24px) scale(.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-count,
  .how-count::backdrop {
    transition: none;
  }
}

.how-count__title {
  margin-bottom: 12px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--lime);
}

.how-count__close {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 4px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* ---------- 06 Problem ---------- */
.problem {
  position: relative;
  margin-top: -10px;
}

.problem__title {
  position: relative;
  left: -3.5px;
  top: -1px;
  color: #fbfbfb;
  max-width: 1152px;
  margin-inline: auto;
  text-align: center;
}

.problem__intro {
  display: grid;
  grid-template-columns: 582px 1fr;
  gap: 148px;
  margin-top: 103px;
}

.problem__intro-left {
  position: relative;
  padding-left: 39px;
}

/* Figma draws this as a 2px lime rule flush with the section edge */
.problem__intro-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: -20px;
  bottom: -19px;
  width: 4px;
  background: var(--lime);
}

.problem__eyebrow {
  color: #c2c2c2;
}

.problem__lead {
  margin-top: 24px;
  max-width: 521px;
  color: var(--text-on-dark);
}

.problem__intro-right {
  max-width: 478px;
  padding-top: 24px;
  color: var(--text-on-dark);
}

.problem__cards {
  position: relative;
  display: grid;
  grid-template-columns: 389px 1fr 389px;
  margin-top: 147px;
  align-items: start;
}

.vcard {
  position: relative;
  height: 463px;
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 44px;
  background: #14181500;
}

.vcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgb(255 255 255 / .2);
  border-radius: inherit;
  /* Figma's Ellipse 14 glow; the export carries ~132px of blur padding */
  background: 126.2px -127.1px / 548.3px 540.5px no-repeat url("../assets/img/problem-card-glow.svg"),
    rgb(33 36 29 / .4);
}

.vcard--creators::before {
  background-position: -50.8px 168.9px, 0 0;
}

.vcard>* {
  position: relative;
}

.vcard__tag {
  display: inline-block;
  background: var(--lime);
  color: var(--ink-deep);
  padding: 4px 8px;
  border-radius: 7px;
}

.vcard__title {
  margin-top: 28px;
  max-width: 283px;
  color: var(--text-on-dark);
}

.vcard--brands .vcard__title {
  max-width: 200px;
}

.vcard__list {
  margin-top: 29px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 290px;
}

.vcard__list li {
  position: relative;
  padding-left: 39px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text-on-dark);
}

.vcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 17px;
  height: 17px;
  background: center/contain no-repeat url("../assets/img/problem-bullet-dot.svg");
}

.vcard__ctas {
  position: absolute;
  left: 43px;
  bottom: 33px;
  display: flex;
  gap: 10px;
}

/* 700-1297 the card is 378, not 389: Chrome sets the pair 11px wider than
   Figma (the arrow glyph), so the 43 inset and 10 gap would clip by 3px */
@media (min-width: 700px) and (max-width: 1297px) {
  .vcard__ctas {
    left: 40px;
    gap: 6px;
  }
}

.vcard__cta {
  white-space: nowrap;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--green-pill);
}

.engine {
  position: relative;
  height: 461px;
  display: grid;
  place-items: center;
}

.engine__core {
  position: relative;
  left: 4.5px;
  top: 1.5px;
  width: 273px;
  height: 273px;
  display: grid;
  place-items: center;
  align-content: center;
}

/* base.css caps every img at max-width:100%; these overflow their 273px core on purpose */
.engine__ring,
.engine__arc {
  position: absolute;
  max-width: none;
}

/* every ring and arc is drawn at its exported size; they were all scaled to ~0.89 */
.engine__ring--outer {
  width: 422.2px;
  height: 422.2px;
}

.engine__ring--mid {
  width: 325px;
  height: 325px;
}

.engine__ring--inner {
  width: 245px;
  height: 245px;
}

.engine__arc--top {
  width: 156.72px;
  height: 156.72px;
  left: 119px;
  top: -2.72px;
}

.engine__arc--right {
  width: 198.72px;
  height: 198.72px;
  left: 117px;
  top: 117px;
  transform: rotate(90deg);
}

.engine__arc--left {
  width: 198.72px;
  height: 198.72px;
  left: -42.72px;
  top: -42.72px;
  transform: rotate(-90deg);
}

.engine__arc--bottom {
  width: 150.69px;
  height: 150.69px;
  left: -1.69px;
  top: 125px;
  transform: rotate(180deg);
}

.engine__logo {
  position: relative;
  z-index: 2;
  top: 3px;
  margin-bottom: 12.5px;
}

.engine__caption {
  position: relative;
  top: 3px;
  z-index: 2;
  width: 133px;
  text-align: center;
  color: var(--text-on-dark);
}

/* The two rules are NOT a pair at the same height: Figma puts `Line 28` at
   y2802 running in from the graphic's left edge (x470) and `Line 27` at y2796
   running in from its right edge (x962). `.engine` is a 489..951 box, hence the
   asymmetric insets. */
.engine__line {
  position: absolute;
  width: 71px;
  height: 1px;
  background: #67BD20;
}

.engine__line--l {
  left: -19px;
  top: 227px;
}

.engine__line--r {
  right: -11px;
  top: 221px;
}

/* ---------- 07 About ---------- */
/* h is 840 in Figma; the team/video block intentionally overflows below it */
.about {
  position: relative;
  height: 840px;
  margin-top: 120px;
  padding: 52px 59px 0;
}

.about__title {
  margin-top: 20px;
  max-width: 635px;
  color: #fff;
}

.about__title2 {
  margin-top: -4px;
  max-width: 671px;
  color: #fff;
}

.about__desc {
  position: absolute;
  left: 801px;
  top: 228px;
  width: 499px;
  color: var(--text-on-dark);
}

.about__body {
  position: relative;
  margin-top: 72px;
  display: grid;
  grid-template-columns: 815px 387px;
  gap: 39px;
}

.about__preview {
  position: relative;
  height: 496px;
}

.about__team {
  position: absolute;
  left: 39px;
  top: 79px;
  width: 740px;
  height: 417px;
  border-radius: 24px;
  object-fit: cover;
}

.about__widget {
  position: absolute;
}

.about__widget-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about__widget--match {
  left: 0;
  top: 0;
  width: 212px;
  height: 159px;
}

.about__widget--perf {
  left: 494px;
  top: 36px;
  width: 321px;
  height: 229px;
}

.about__widget-title {
  position: relative;
  margin: 13px 0 0 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--surface-soft);
}

.about__widget-title--lg {
  font-size: 18px;
  line-height: 28px;
  margin: 21px 0 0 23px;
}

.about__match-avatars {
  position: relative;
  display: flex;
  align-items: center;
  gap: .3px;
  margin: 16px 0 0 15px;
}

.about__match-avatars img {
  width: 27.5px;
  height: 27.5px;
  border-radius: 50%;
}

.about__match-more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 7.5px;
  border-radius: 50%;
  background: #2c332e;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
}

.about__match-pct {
  position: absolute;
  left: 14px;
  bottom: 28px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
}

.about__match-pct span {
  margin-left: 6.5px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #cacdc8;
}

.about__perf-label {
  position: absolute;
  left: 23px;
  top: 72px;
  font-size: 14px;
  line-height: 20px;
  color: #d6d8d4;
}

.about__perf-value {
  position: absolute;
  left: 23px;
  top: 92px;
  color: #fff;
}

.about__perf-area {
  position: absolute;
  left: 22px;
  top: 62px;
  width: 275.14px;
  height: 137.57px;
}

.about__perf-spark {
  position: absolute;
  left: 22px;
  top: 62px;
  width: 277.44px;
  height: 115.41px;
}

/* badge is the Figma lime pill with a rise caret, not a flat green chip */
.about__perf-badge {
  position: absolute;
  left: 237px;
  top: 135.5px;
  width: 62.67px;
  height: 38.21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: center/100% 100% no-repeat url("../assets/img/about-perf-badge-bg.svg");
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
}

.about__perf-badge img {
  width: 9.17px;
  height: 7.64px;
}

/* status dot, hairlines and the alignment meter — all exported, all were missing */
/* Each status dot is TWO Figma vectors: a 9%-opacity halo and a solid #CFE100
   core. Both cores were exported (about-match-dot-a, about-perf-dot-b) and
   never placed, so the widgets showed only the halo — and both halos sat off
   their Figma origin as well. */
.about__widget-dot {
  position: absolute;
}

.about__widget-dot--match-halo {
  left: 192.73px;
  top: 13.97px;
  width: 9.64px;
  height: 9.64px;
}

.about__widget-dot--match-core {
  left: 195.14px;
  top: 16.38px;
  width: 4.82px;
  height: 4.82px;
}

.about__widget-dot--perf-halo {
  left: 290.43px;
  top: 22.16px;
  width: 15.29px;
  height: 15.29px;
}

.about__widget-dot--perf-core {
  left: 294.25px;
  top: 25.99px;
  width: 7.64px;
  height: 7.64px;
}

.about__rule {
  position: absolute;
  left: 14px;
  width: 183.09px;
  height: 1px;
}

.about__rule--1 {
  top: 38px;
}

.about__rule--2 {
  top: 93px;
}

.about__rule--perf {
  left: 22.5px;
  top: 56px;
  width: 275.14px;
}

.about__match-bar {
  position: absolute;
  left: 14px;
  top: 138.6px;
  width: 183.09px;
  height: 5.78px;
  border-radius: 2.89px;
  background: #474b46;
  overflow: hidden;
}

.about__match-bar i {
  display: block;
  width: 167.67px;
  height: 100%;
  background: linear-gradient(90deg, #4c9a2a 0%, #cfe100 100%);
}

.about__video {
  position: absolute;
  left: 64px;
  top: 361px;
  width: 696px;
  height: 121px;
}

.btn-play {
  position: absolute;
  left: 0;
  top: 0;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 58px;
  border: 1px solid var(--lime);
  background: linear-gradient(to right, #0f9928, var(--lime));
}

.btn-play:hover {
  border: 5px solid var(--button-hover-lime);
  background: linear-gradient(to right, #14d537, #ebff03);
  opacity: .9;
}

.btn-play:active {
  border: 5px solid var(--button-hover-lime);
  background: linear-gradient(to right, #10a32a, #e6f905);
  opacity: .9;
}

.btn-play[aria-disabled="true"] {
  pointer-events: none;
  border: 1px solid var(--button-muted-content);
  background: var(--button-muted-surface);
}

.btn-play[aria-disabled="true"] img {
  filter: brightness(0) invert(.73);
}

.about__video::before {
  content: "";
  position: absolute;
  left: 48px;
  top: 18px;
  width: 574px;
  height: 80px;
  border-radius: 40px;
  background: rgba(33, 36, 29, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.about__video-caption {
  position: absolute;
  left: 141px;
  top: 42px;
  width: 440px;
  color: #c2c2c2;
}

.about__video-chips {
  position: absolute;
  left: 352px;
  top: 88px;
  display: flex;
  gap: 9px;
}

.about__positioning {
  position: relative;
  height: 459px;
  margin-top: 37px;
  border-radius: var(--radius-card);
  background: var(--lime);
  overflow: hidden;
}

.about__positioning-text {
  padding: 32px 28px 0;
  color: var(--ink-stat);
}

/* AB-2: Figma sets "Not middlemen." as its own text block, 14px below */
.about__positioning-line2 {
  display: block;
  margin-top: 14px;
}

.about__positioning-img {
  position: absolute;
  left: 98px;
  top: 176px;
  width: 342px;
  height: 290px;
  object-fit: cover;
}

/* ---------- 08 How it works ----------
   Card grid measured off the export: 2 x 598x320, 42px column gap, 71px row gap.
   Fills sampled from the PNG: lime / white / #c1c9c6 / ink. The number badge is
   a dark disc notched into the cards top-left corner.
   ponytail: the notch is drawn as a plain rounded corner + overlapping disc
   rather than the exported concave path — visually equivalent, one shape fewer. */
.howitworks {
  position: relative;
  max-width: 1243px;
  margin: 244px auto 0;
  height: 1040px;
}

.howitworks__title {
  margin-top: 20px;
}

/* Figma wraps this line with a 758px box, not a hard break */
.howitworks__title-sub {
  display: block;
  max-width: 758px;
}

/* grid is absolutely placed: row 1 top is 327px into the section, rows are 326
   tall with a 61px gutter, so row 2 ends exactly on 1040 — the section height. */
.steps {
  position: absolute;
  left: 0;
  right: 0;
  top: 327px;
  display: grid;
  grid-template-columns: repeat(2, 600px);
  gap: 61px 42px;
  justify-content: space-between;
}

/* the card is the exported Figma shape — the number badge notch is a concave cut
   in the top-left corner, so a plain rounded rect cannot reproduce it */
.step {
  position: relative;
  width: 600px;
  height: 326px;
  background: center/100% 100% no-repeat;
}

.step--1 {
  background-image: url("../assets/img/step-card-01.svg");
}

.step--2 {
  background-image: url("../assets/img/step-card-02.svg");
}

.step--3 {
  background-image: url("../assets/img/step-card-03.svg");
}

.step--4 {
  background-image: url("../assets/img/step-card-04.svg");
}

/* HW-1: Figma's four cards sit at x 98 / 740 / 97 / 738, not on a clean grid */
@media (min-width: 1440px) {
  .step--1 { left: -.5px; }
  .step--2 { left: -1.5px; }
  .step--3 { left: -1.5px; }
  .step--4 { left: -3.5px; }
}

.step__num {
  position: absolute;
  left: 20px;
  top: 0;
  z-index: 2;
  width: 46px;
  height: 46px;
}

.step__num img {
  display: block;
  width: 46px;
  height: 46px;
}

.step__num b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #fff;
}

/* copy is 20/28 bold over 18/28 medium — NOT the page h4/body-l scale */
.step__copy {
  position: absolute;
  left: 36px;
  top: 96px;
  z-index: 1;
  width: 254px;
}

.step--2 .step__copy {
  left: 26px;
  top: 91px;
  width: 291px;
}

.step__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-deep);
}

.step__text {
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #000;
}

.step--2 .step__text,
.step--3 .step__text {
  color: #4b514c;
}

.step--2 .step__text {
  width: 256px;
}

.step--3 .step__text {
  width: 248px;
}

.step--4 .step__title,
.step--4 .step__text {
  color: #fbfbf8;
}

.step__art {
  position: absolute;
}

.step--1 .step__art {
  left: 344px;
  top: 56.5px;
  width: 208px;
  height: 252px;
  object-fit: fill;
}

.step--4 .step__art {
  left: 265px;
  top: 73px;
  width: 341px;
  height: 227px;
  object-fit: fill;
}

/* 02 + 03 diagrams: children carry Figma coordinates, so the layer is the card */
.step__art--pool {
  inset: 0;
}

.pool__cloud {
  position: absolute;
  inset: 0;
  width: 600px;
  height: 326px;
}

.pool__count {
  position: absolute;
  left: 296.64px;
  top: 149.6px;
  width: 112.02px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-align: center;
  color: #050606;
}

.pool__picks {
  position: absolute;
  left: 526.92px;
  top: 45.57px;
  display: flex;
  flex-direction: column;
  gap: 13.13px;
}

.pool__picks li {
  position: relative;
}

/* Figma: a 1.56px #E1E0DB ring, a 0.78px #A8AAA5 edge and a lime status dot */
.pool__picks img {
  display: block;
  width: 39.37px;
  height: 39.37px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1.56px #e1e0db;
  outline: .78px solid #a8aaa5;
  outline-offset: -.78px;
}

.pool__picks li::after {
  content: "";
  position: absolute;
  left: 31.73px;
  top: 29.83px;
  width: 6.56px;
  height: 6.56px;
  border-radius: 50%;
  background: #cfe100;
}

.step__art--map {
  left: 317px;
  top: 24px;
  width: 251px;
  height: 266.69px;
  overflow: hidden;
}

.step__art--map img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- CTA strip (08 + 11) ---------- */
.cta-strip {
  display: flex;
  align-items: center;
  gap: 58px;
  border: 2px solid var(--ink);
  border-radius: var(--button-radius);
  padding: 0 20px 0 0;
  height: 76px;
  margin-top: 61px;
}

/* CS-2: meta text sits 5px (strip 1) / 4px (strip 2) further right than the
   shared gap puts it */
.cta-strip--howitworks {
  gap: 63px;
  max-width: 1106px;
  margin: 61px auto 0;
}

.cta-strip--standalone {
  gap: 64px;
  max-width: 1231px;
  margin: 61px auto 0;
}

/* Each dot belongs to the phrase after it: grouped, a wrap can only break
   between phrases, never leave a separator dangling at the end of a line. */
.cta-strip__u {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cta-strip__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-deep);
}

/* ---------- 09 Results ----------
   Children placed off Figma insets against the 1392x563 card.
   The illustration is Figmas crop (h 127.29%, top 6.34%), not object-fit. */
.results {
  position: relative;
  max-width: var(--card-w);
  margin: 48px auto 0;
  height: 670px;
  padding-top: 107px;
}

.results__card {
  position: relative;
  background: var(--ink);
  border-radius: var(--radius-section);
  height: 563px;
  overflow: hidden;
}

.results__card>* {
  position: absolute;
}

.results .pill {
  left: 79px;
  top: 63px;
}

.results__title {
  left: 77px;
  top: 123px;
  width: 543px;
  color: #fff;
}

.results__lead {
  left: 73px;
  top: 287px;
  width: 353px;
  color: var(--text-on-dark);
}

/* the tinted card is an exported shape (304x153.289, #36403c) tilted ~2.2deg;
   its children ride the same rotation instead of each carrying their own */
.results__swap {
  left: 431.5px;
  top: 292.6px;
  width: 304px;
  height: 153.29px;
  background: center/100% 100% no-repeat url("../assets/img/results-strike-through.svg");
  transform: rotate(-3deg);
}

.results__struck {
  position: absolute;
  left: 19.5px;
  top: 98px;
  width: 275px;
  font-size: 20px;
  line-height: 28px;
  color: #889126;
}

/* RS-1: Figma's hand-drawn strike (2106:989, mirrored and turned 158.51deg),
   resolved into the card's own unrotated frame */
.results__swap::after {
  content: "";
  position: absolute;
  left: 19.06px;
  top: 72.87px;
  width: 261.97px;
  height: 85.54px;
  background: center/100% 100% no-repeat url("../assets/img/results-scribble-underline.svg");
  transform: rotate(161.51deg) scaleX(-1);
  pointer-events: none;
}

.results__revenue {
  position: absolute;
  left: 41.5px;
  top: 19.5px;
  font-size: 48px;
  line-height: 60px;
  font-weight: 800;
  letter-spacing: -.96px;
  color: var(--lime);
}

.results__outcomes {
  left: 77px;
  top: 506px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.results__outcomes li {
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  color: var(--text-muted-dark-6);
}

/* the rule trails its item, so a wrapped row keeps the dash on the line it
   belongs to instead of starting the next one with it */
.results__outcomes li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 33px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-left: 10px;
  position: relative;
  top: -3px;
}

.results__art {
  position: absolute;
  left: 799px;
  top: -29px;
  width: 593px;
  height: 699px;
  overflow: hidden;
  pointer-events: none;
}

.results__art img {
  position: absolute;
  left: 0;
  top: 6.34%;
  width: 100%;
  height: 127.29%;
  max-width: none;
}

/* ---------- 10 / 11 Case studies ----------
   Details children are absolutely placed exactly as Figma has them. The revenue
   metric overhangs the 598px details card onto the photo, so details must paint
   above .case__media (rule: later DOM sibling would otherwise win).
   Image crops are Figmas own transforms, NOT object-fit: cover (rule 3). */
.case {
  position: relative;
  display: grid;
  grid-template-columns: 598px 1fr;
  gap: 40px;
  max-width: 1238px;
  margin: 121px auto 0;
  height: 742px;
}

.case--acko {
  margin-top: 80px;
}

.case__details {
  position: relative;
  z-index: 2;
  background: var(--surface-card);
  border-radius: var(--radius-section);
  height: 742px;
}

.case__details>* {
  position: absolute;
}

.case .pill {
  left: 44px;
  top: 34px;
}

.case__logo {
  left: 376.6px;
  top: 5.1px;
  width: 174.7px;
  height: 84.7px;
  object-fit: contain;
}

/* new mark (2026-10-16), 800x192: the old 119x38 slot's right edge kept */
.case--acko .case__logo {
  left: 367px;
  top: 42px;
  width: 158px;
  height: 38px;
}

.case__brand {
  left: 44px;
  top: 96px;
  color: var(--ink-case);
}

.case__goal {
  left: 44px;
  top: 177px;
  font-weight: 700;
  color: var(--green-text);
}

.case__headline {
  left: 44px;
  /* CX-007: the design bottom-aligns 25L with the caption's second line -
     ink top measured at 297 from the section, 283 + the 14px half-leading. */
  top: 283px;
  color: var(--ink-case);
}

.case__headline--stack {
  top: 232px;
}

/* C7: the caption keeps the drawn 28px gap after the number - 44 + the
   145.6px "1.5M" (2026-10-16) + 28 */
.case__headline-sub {
  left: 217.6px;
  top: 301px;
  /* two caption lines tall, bottom-aligned, so a one-line caption ("ORDERS")
     still sits on the number's baseline in every band */
  height: 56px;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  color: var(--ink-case);
}

.case__metrics {
  left: 44px;
  top: 413px;
  display: flex;
  gap: 20px;
}

.metric {
  position: relative;
  height: 139px;
  border-radius: var(--radius-inner);
  overflow: hidden;
  padding: 20px 0 0 41px;
}

.metric--grey {
  width: 259px;
  background: var(--surface-metric);
}

.metric--green {
  width: 215px;
  background: var(--green-surface);
}

.metric--lime {
  width: 260px;
  background: var(--lime);
}

.metric__v {
  display: block;
  color: var(--ink-case);
}

.metric__v--green {
  color: var(--green-text);
}

.metric__l {
  display: block;
  margin-top: 8px;
  margin-left: 6px;
  color: var(--ink-case);
}

.metric--grey .metric__l {
  margin-left: 5px;
}

.case__list {
  left: 44px;
  top: 399px;
  width: 510px;
  display: flex;
  flex-direction: column;
}

.case__list li {
  padding: 21.5px 0 29.5px;
  border-top: 2px solid #cbd5cc;
  font-size: 20px;
  line-height: 28px;
  color: var(--ink-case);
}

.case__list li:last-child {
  border-bottom: 2px solid #cbd5cc;
}

.case__awards {
  left: 44px;
  top: 584px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.case--acko .case__awards {
  top: 933px;
}

.case--acko .case__awards img {
  position: relative;
  top: 4px;
}

/* 2026-10-16 content update: the reporting period sits under the tiles; Acko
   gained a tile row, so its card grows past the drawn 742 to keep the list
   and awards at their drawn spacing. */
.case__period {
  left: 44px;
  top: 568px;
  color: var(--text-award-muted);
}

.case--dominos .case__awards {
  top: 616px;
}

.case--acko,
.case--acko .case__details,
.case--acko .case__media {
  height: 1025px;
}

.case--acko .case__metrics {
  top: 400px;
}

/* two tiles inside the 510 list column; the long label wraps to two lines,
   so both tiles grow together (row stretch) instead of holding 139 */
.case--acko .metric {
  height: auto;
  min-height: 139px;
  padding-bottom: 20px;
}

.case--acko .metric--grey {
  width: 220px;
}

.metric--wide {
  width: 270px;
  padding-right: 24px;
}

.case--acko .case__period {
  top: 580px;
}

.case--acko .case__list {
  top: 632px;
}

.case__awards>div {
  position: static;
}

.case__awards-label {
  color: var(--text-award-muted);
}

.case__awards-value {
  margin-top: 8px;
  color: var(--ink-case);
}

.case__media {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-section);
  overflow: hidden;
  height: 742px;
}

.case__media>img {
  position: absolute;
  max-width: none;
}

/* Figma crop transforms, reproduced verbatim */
.case--dominos .case__media>img {
  width: 186.32%;
  height: 100.94%;
  left: -86.32%;
  top: -0.94%;
}

/* the drawn crop (221.84% x 100%, -60.92%) is the photo fitted to the frame's
   height and centred, i.e. cover - written as cover so the taller card keeps it */
.case--acko .case__media>img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 259x259 anchor-dot group; the lime disc, spokes and dashed ring are concentric
   inside it, composed into one asset. Label is centred on the disc, not the group. */
.case__badge {
  position: absolute;
  z-index: 2;
  right: 4.52%;
  bottom: 4.31%;
  width: 43.31%;
  aspect-ratio: 1;
  text-align: center;
  /* the label is drawn against a 259px badge; cqw keeps it a share of the
     disc once the card shrinks, instead of bursting out of it */
  container-type: inline-size;
}

.case__badge img {
  position: static;
  display: block;
  width: 100%;
}

.case__badge b,
.case__badge i {
  position: absolute;
  left: 0;
  right: 0;
  color: var(--ink-case);
}

.case__badge b {
  top: 36.25%;
  font-size: 13.9cqw;
  line-height: 16.99cqw;
  font-weight: 700;
  letter-spacing: -.139cqw;
}

.case__badge i {
  top: 50.2%;
  font-style: normal;
  font-size: 9.27cqw;
  line-height: 12.36cqw;
  font-weight: 700;
}

/* ---------- 12 Brand testimonials ---------- */
.tst {
  position: relative;
  margin-top: 120px;
  height: 1003px;
  padding: 69px var(--card-pad) 60px;
}

.tst__stage {
  position: relative;
  margin-top: 83px;
}

.tst__featured {
  display: grid;
  grid-template-columns: 312px 1fr;
  gap: 49px;
  margin: 0;
}

.tst__portrait {
  width: 312px;
  height: 397px;
  border-radius: var(--radius-inner);
  overflow: hidden;
}

.tst__portrait img {
  width: 129.81%;
  height: 102.02%;
  max-width: none;
  margin-left: -14.9%;
  margin-top: -2.02%;
  object-fit: cover;
}

.tst__portrait-img--cover {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 30%;
}

.tst__badge {
  position: absolute;
  left: 213px;
  top: 295px;
  width: 124px;
  height: 133px;
  z-index: 2;
}

.tst__card {
  background: var(--surface-quote);
  border: 1px solid var(--surface-quote-border);
  border-radius: var(--radius-inner);
  padding: 19px 23px 13.5px;
  min-height: 387px;
  display: flex;
  flex-direction: column;
}

.tst__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
}

.tst__partner {
  color: var(--green-text);
}

.tst__brandlogo {
  width: 117px;
  height: 26px;
  object-fit: contain;
}

.tst__quote {
  margin-top: 28px;
  color: var(--text-on-dark-soft);
  max-width: 776px;
}

.tst__rule {
  width: 100%;
  max-width: 780px;
  margin-top: auto;
}

.tst__card-bottom {
  max-width: 780px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.tst__name {
  color: var(--text-on-dark-soft);
}

.tst__role {
  margin-top: 4px;
  color: var(--text-muted-dark-3);
}

.tst__company {
  margin-top: 8px;
  color: var(--green-text);
}

.tst__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* the exported prev/next files are bare 9.7x17.6 chevrons — the ring is its own asset */
.tst__arrow {
  width: 43.64px;
  height: 43.64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #07100a;
  transition: background-color .18s ease;
}

.tst__arrow img {
  width: 9.7px;
  height: 17.58px;
}

.tst__arrow:hover {
  background: var(--button-hover-ink);
}

.tst__arrow:active {
  background: var(--button-ink);
}

.tst__arrow:disabled {
  background: var(--button-muted-surface);
}

.tst__arrow:disabled img {
  filter: brightness(0) invert(.73);
}

.tst__counter {
  position: relative;
  top: 2.5px;
  left: -2px;
  color: var(--text-on-dark-soft);
  margin-left: 13px;
}

.tst__nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 88.5px;
}

.tst__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  text-align: center;
}

/* The ring is a stroked circle on its OWN path in Figma -- 83.14px across,
   around a 69.56px photo -- so a real gap shows between ring and image. A
   box-shadow spread cannot do that; it fills the gap. `outline-offset` can.
   Measured off the 2x export: active stroke 7px #cfe100 (the --lime fill, not
   --lime-accent), idle stroke 2px, both centred on the 83.14 path. */
.tst__person-ring {
  position: relative;
  width: 69.56px;
  height: 69.56px;
  border-radius: 50%;
  overflow: hidden;
  outline: 2px solid #3a443c;
  outline-offset: 5.79px;
  transition: outline-color .18s ease, outline-width .18s ease, outline-offset .18s ease;
}

.tst__person[aria-pressed="true"] .tst__person-ring {
  outline: 7px solid var(--lime);
  outline-offset: 3.29px;
}

.tst__person-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tst__person-name {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-on-dark-soft);
}

/* Figma lets the longest company label overflow its 84px avatar column */
.tst__person-co {
  margin-top: -5.5px;
  width: 136px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-muted-dark-4);
}

.tst__person[data-pending="true"] .tst__person-ring {
  opacity: .55;
}

.tst__progress {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: #39443d;
  margin-top: 9px;
}

.tst__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 98px;
  border-radius: 2px;
  background: var(--green-text);
  transition: transform .2s ease;
}

/* Figma centres this row including 57px of trailing box on the WhatsApp item */
.tst__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin-top: 30.5px;
  padding-right: 57px;
}

/* TS-8: Figma's lime button here is flush lime, no dark outline */
.tst__ctas .btn--lime {
  border: 0;
}

.tst__ctas .btn--whatsapp {
  position: relative;
  left: -.5px;
}

.tst__pending {
  color: var(--text-muted-dark-4);
  font-style: italic;
}

/* crossfade — annotation point 5 */
.tst__portrait img,
.tst__card-top,
.tst__quote,
.tst__card-bottom .tst__author {
  transition: opacity .2s ease;
}

.tst.is-swapping .tst__portrait img,
.tst.is-swapping .tst__card-top,
.tst.is-swapping .tst__quote,
.tst.is-swapping .tst__author {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

  .tst__portrait img,
  .tst__card-top,
  .tst__quote,
  .tst__author,
  .tst__progress-fill {
    transition: none;
  }
}

/* ---------- 13 Creator value proposition ---------- */
/* this panel paints OVER the lime creator card below it — Figma stacks it on top,
   and its 0.9 alpha is what tints that overlap olive */
.cvp {
  position: relative;
  z-index: 4;
  left: -4px;
  max-width: 1232px;
  /* Figma runs this panel 9158..9484, i.e. 36px UP into the dark testimonials
     block above it and 43px down over the lime card below. It started at 9197
     before, which left a 3px strip of page background showing as a seam. */
  margin: -36px auto 0;
  height: 326px;
  background: var(--surface-creator-value);
  border-radius: var(--radius-section);
  padding: 63px 0 0 133px;
}

.cvp__line1 {
  display: block;
  color: var(--green-surface);
}

.cvp__line2 {
  display: block;
  margin-top: -5px;
  color: var(--lime-accent);
}

.cvp__rule {
  width: 1036px;
  max-width: 100%;
  margin-top: 28px;
  margin-left: 3px;
}

.cvp__lead {
  margin-top: 23px;
  margin-left: 3.5px;
  color: var(--text-muted-dark-9);
}

.cvp__strong {
  color: #fff;
}

/* ---------- 14 Creator testimonials ---------- */
.ctst {
  position: relative;
  z-index: 3;
  max-width: var(--card-w);
  margin: -43px auto 0;
  height: 760px;
  background: var(--lime);
  border-radius: var(--radius-section);
  overflow: hidden;
}

.ctst__header {
  position: absolute;
  left: 76px;
  right: 76px;
  top: 109px;
  z-index: 10;
  display: flex;
  /* CQ-1: the slider sits beside the label - at the far right it ran 22px
     into the quote bubble */
  justify-content: flex-start;
  gap: 16px;
  align-items: center;
  pointer-events: none;
}

.ctst__pill,
.ctst__controls {
  pointer-events: auto;
}

.ctst__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  padding: 6px 10px 6px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ctst__dots {
  display: flex;
  gap: 6px;
}

.ctst__dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}

.ctst__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.ctst__dot[aria-current="true"] {
  background: var(--lime);
  transform: scale(1.15);
}

.ctst__arrows {
  display: flex;
  gap: 4px;
  margin-left: 2px;
}

.ctst__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.15s;
}

.ctst__arrow:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ctst__arrow:active {
  transform: scale(0.92);
}

.ctst__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.ctst__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateY(10px);
  pointer-events: none;
}

.ctst__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.ctst__slide[hidden] {
  display: none;
}

/* Figma stacks both quote cards ABOVE both photos */
.ctst__quote {
  position: absolute;
  z-index: 2;
  margin: 0;
  border-radius: 48px;
}

.ctst__quote .t-quote {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ctst__quote figcaption {
  margin-top: 14px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  text-align: right;
}

.ctst__quote figcaption a {
  color: inherit;
  text-decoration: none;
}

.ctst__quote figcaption a:hover {
  text-decoration: underline;
}

.ctst__meta {
  white-space: nowrap;
}

.ctst__quote--light {
  left: 584px;
  top: 126px;
  width: 724px;
  min-height: 210px;
  padding: 32px 48px 24px;
  background: var(--surface-card);
  color: var(--ink-deep);
}

.ctst__quote--light figcaption {
  color: #050504;
}

.ctst__quote--dark {
  left: 223px;
  top: 436px;
  width: 660px;
  min-height: 252px;
  padding: 38px 44px 28px;
  background: var(--ink);
  color: #fff;
}

.ctst__quote--dark figcaption {
  color: var(--surface-card);
}

.ctst__quote--dark .u-lime {
  color: var(--lime);
  font-weight: 700;
}

.ctst__photo {
  position: absolute;
  overflow: hidden;
  border-radius: 48px;
  z-index: 1;
}

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

.ctst__photo--food {
  left: 76px;
  top: 222px;
  width: 238px;
  height: 289px;
}

.ctst__photo--lifestyle {
  left: 1070px;
  top: 368px;
  width: 238px;
  height: 289px;
}

/* ---------- 15 Awards & press ---------- */
.awards {
  position: relative;
  max-width: var(--card-w);
  margin: 120px auto 0;
  height: 645px;
  padding: 0 78px;
}

.awards__title {
  position: relative;
  left: -2px;
  margin-top: 20px;
  max-width: 340px;
  color: var(--ink-awards);
}

.awards__rule {
  width: 387px;
  margin-top: 29.5px;
  margin-left: -2px;
}

.awards__lead {
  margin-top: 29.5px;
  max-width: 380px;
  color: var(--ink-case);
}

.awards__visual {
  position: absolute;
  left: 635px;
  top: 15px;
  width: 655px;
  height: 469px;
  border-radius: 48px;
  overflow: hidden;
  background: var(--surface-trophy);
}

/* AW-6: cover alone leaves the trophy 2% under the design (scale search on
   the 2x export); grow it about the trophy so its position holds */
.awards__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transform-origin: 50.5% 43.5%;
}

.award {
  position: absolute;
  width: 276px;
  height: 132px;
  padding: 24px 0 0 40px;
}

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

/* AW-2: Figma lays a 9% sheen over the top of every card; the exports were
   never placed, so the cards read darker at the top */
.award::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 0;
  width: 250px;
  height: 41px;
  background: center/100% 100% no-repeat url("../assets/img/award-sheen-gold.svg");
  pointer-events: none;
}

.award--silver::after {
  background-image: url("../assets/img/award-sheen-silver.svg");
}

.award__label,
.award__brand,
.award__cat {
  z-index: 1;
}

.award__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.award__label img {
  position: relative;
  top: -1.5px;
  width: 37.7px;
  height: 20.8px;
}

.award__brand {
  position: relative;
  margin-top: 20px;
  color: #fff;
}

.award__cat {
  position: relative;
  color: #fff;
}

.award--gold {
  left: 573px;
  top: 60px;
}

.award--gold .t-eyebrow {
  color: var(--award-gold);
}

.award--silver {
  left: 1080px;
  top: 60px;
}

.award--silver .t-eyebrow {
  color: var(--award-silver);
}

.award--silver .award__brand {
  margin-top: 10px;
}

/* AW-3: the silver eyebrow colour was catching the category line too */
.award--silver .award__cat {
  color: #fff;
}

.award--bronze {
  left: 573px;
  top: 326px;
}

.award--bronze .t-eyebrow {
  color: var(--award-bronze);
}

.award--grandprix {
  left: 1080px;
  top: 326px;
}

.award--grandprix .t-eyebrow {
  color: var(--lime-accent);
}

.press {
  position: absolute;
  left: 78px;
  top: 532px;
  width: 1238px;
}

.press__label {
  color: #08100b;
}

.press__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 19px;
}

.press__logos img {
  object-fit: contain;
}

.press__logos li:nth-child(1) img {
  width: 76.9px;
  height: 21.1px;
}

.press__logos li:nth-child(2) img {
  width: 87.2px;
  height: 36.1px;
}

.press__logos li:nth-child(3) img {
  width: 99px;
  height: 27px;
}

.press__logos li:nth-child(4) img {
  width: 68.1px;
  height: 51px;
}

/* AW-4: Figma fills this 79.5x36.1 box with the 3:1 export, so the logo the
   comp shows is 72x37 - contain letterboxed it to 72x27 */
.press__logos li:nth-child(5) img {
  width: 79.5px;
  height: 36.1px;
  object-fit: fill;
}

/* ---------- 16 FAQ ---------- */
.faq {
  margin-top: 120px;
  height: 848px;
  padding: 69px var(--card-pad) 76px;
}

.faq__title {
  margin-top: 28px;
  max-width: 990px;
  color: var(--text-on-dark-alt);
}

.faq__grid {
  display: grid;
  grid-template-columns: 600px 561px;
  gap: 29px 80px;
  margin-top: 78px;
}

.faq__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item--ruled {
  padding-top: 20px;
  border-top: 1px solid #2a2f2b;
}

.faq__q {
  color: var(--text-on-dark-alt);
}

.faq__a {
  color: var(--text-muted-dark);
}

/* FQ-2/FQ-3 are 1440-frame shapes: the 30px pitch and the answer-3 break */
@media (min-width: 1298px) {
  .faq__a {
    line-height: 30px;
  }
}

@media (max-width: 1297px) {
  .faq__br-desk {
    display: none;
  }
}

/* ---------- 17 Closing ---------- */
.closing {
  position: relative;
  max-width: var(--card-w);
  margin: 120px auto 0;
  /* 94px is the Figma gap under the outline pill; it has to be real padding,
     not slack inside a fixed 608, or a wrapped title pushes the pill under the
     footer, which tucks 65px up over this section. */
  min-height: 608px;
  background: var(--green-surface);
  border-radius: var(--radius-section);
  padding: 58px 77px 94px;
}

.closing__title {
  max-width: 900px;
  color: #fff;
}

.closing__card {
  position: absolute;
  left: 900px;
  top: 41px;
  width: 407px;
  height: 334px;
}

.closing__accent {
  position: absolute;
  left: 0;
  top: 0;
  width: 56.7px;
  height: 56.7px;
  z-index: 2;
}

.closing__card-inner {
  position: absolute;
  left: 20.7px;
  top: 16.7px;
  width: 386px;
  height: 317px;
  border-radius: 36px;
  overflow: hidden;
  background: var(--surface-session);
  border: 1px solid var(--surface-session-border);
  padding: 30px 23px 30px 27px;
}

.closing__card-title {
  position: relative;
  top: 3px;
  color: var(--surface-soft);
}

.closing__card-rule {
  width: 100%;
  margin-top: 14px;
}

.closing__card-text {
  margin-top: 14px;
  color: var(--surface-soft);
}

.closing__contact {
  margin-top: 8px;
  color: var(--text-muted-dark-3);
}

/* CL-1: the gap Figma draws above the contact lines; a third text line used
   to fake it */
.closing__card-text + .closing__contact {
  margin-top: 36px;
}

.closing__ctas .btn--whatsapp {
  position: relative;
  left: -4px;
}

.closing__contact a:hover {
  color: #fff;
  text-decoration: underline;
}

.closing__ctas {
  display: flex;
  align-items: center;
  gap: 58px;
  margin-top: 55px;
}

.closing__outline {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1234px;
  height: 70px;
  margin-top: 83px;
  background: rgb(33 36 29 / .4);
  border: 2px solid rgb(255 255 255 / .2);
  border-radius: 999px;
  transition: background-color .2s ease;
}

.closing__outline:hover { background: rgb(33 36 29 / .55); }
.closing__outline:active { background: rgb(33 36 29 / .7); }

.closing__outline[aria-disabled="true"] {
  pointer-events: none;
  background: var(--button-muted-surface);
}

.closing__outline[aria-disabled="true"] .closing__outline-text { color: var(--button-muted-content); }

.closing__outline-text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 64px;
  left: -1.5px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--button-off-white);
}

/* ---------- 18 Footer ---------- */
.footer {
  position: relative;
  z-index: 2;
  max-width: var(--card-w);
  margin: -65px auto 0;
  height: 767px;
  background: var(--ink-deep);
  border-radius: var(--radius-section);
  padding: 84px 80px 0;
}

.footer__statement {
  position: relative;
}

.footer__title {
  position: relative;
  max-width: 641px;
  color: #fff;
}

.footer__title-mark {
  position: relative;
  color: var(--ink-deep);
}

.footer__title-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -19px;
  right: -34.5px;
  top: 7px;
  height: 72px;
  background: var(--lime);
  border-radius: 36.34px;
}

.footer__tag {
  position: absolute;
  left: 288px;
  top: 408px;
  color: var(--text-muted-dark-10);
}

.footer__logo {
  position: absolute;
  left: 80px;
  top: 391px;
  width: 177.5px;
  height: 42.7px;
}

.footer__nav {
  position: absolute;
  left: 823px;
  top: 84px;
  width: 578px;
}

.footer__heading {
  color: var(--text-muted-dark-5);
}

.footer__heading-rule {
  width: 100%;
  margin-top: 16px;
}

.footer__nav-cols {
  display: flex;
  gap: 176px;
  margin-top: 29px;
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.footer__nav-col a {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--text-on-dark-alt);
}

.footer__nav-col a:hover {
  color: var(--lime);
}

.footer__social {
  position: absolute;
  left: 76px;
  top: 543px;
}

/* pill shell is the exported Figma outline, so each keeps its own drawn width */
.footer__social-list {
  display: flex;
  gap: 19px;
  margin-top: 14.5px;
}

.social {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  /* FT-6: Figma sets the label 2px below the pill's centre line; the 4px top
     pad does that, and the icon's -4px margin keeps it centred */
  padding: 4px 20px 0 14px;
  background: center/100% 100% no-repeat;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--text-on-dark-alt);
  transition: filter .18s ease;
}

.social:hover {
  filter: brightness(1.25);
}

.social--linkedin {
  width: 201px;
  background-image: url("../assets/img/footer-social-pill-linkedin.svg");
}

.social--instagram {
  width: 224px;
  background-image: url("../assets/img/footer-social-pill-instagram.svg");
}

.social--youtube {
  width: 205px;
  background-image: url("../assets/img/footer-social-pill-youtube.svg");
}

.social__icon {
  margin-top: -4px;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: center/100% 100% no-repeat url("../assets/img/footer-social-icon-bg.svg");
}

.social__icon img {
  width: 20px;
  height: 20px;
}

/* FT-7: Figma turns the diagonal arrow 45deg into a horizontal one, and insets
   it differently in each pill */
.social__arrow {
  position: absolute;
  top: 50%;
  left: 164px;
  width: 16.8px;
  height: 16.8px;
  transform: translateY(-50%) rotate(45deg);
}

.social--instagram .social__arrow {
  left: 181px;
}

@media (min-width: 1440px) {
  .social--youtube {
    margin-left: -2px;
  }
}

.social--youtube .social__arrow {
  left: 166px;
}

/* Figma 2106:319: 3.02 dash / 14 gap, round cap, #DDF500 at 26%. Was an
   SVG <img> with preserveAspectRatio="none" - the dash pitch scaled with the
   container, so it only read correctly at its 1243px natural width and went
   sub-pixel on mobile. A gradient holds the pitch at every width.
   FT-5, measured on the 2x export: ink runs x 98.5-1341.5, 6px dashes at a
   16.986 pitch, phase -1.5 so both ends are clipped dashes (98.5-103,
   1337-1341.5). The gradient is written pre-shifted by that phase. */
.footer__divider {
  position: absolute;
  left: 74.5px;
  right: auto;
  top: 509.5px;
  width: calc(100% - 149px);
  height: 3px;
  background: repeating-linear-gradient(to right,
      rgba(221, 245, 0, .26) 0 4.5px, transparent 4.5px 15.486px,
      rgba(221, 245, 0, .26) 15.486px 16.986px);
}

.footer__legal {
  position: absolute;
  left: 76px;
  top: 709px;
  color: var(--text-muted-dark-7);
}

.footer__legal a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer__copy {
  position: absolute;
  right: 74px;
  top: 709px;
  color: var(--text-muted-dark-7);
}

/* ---------- Creator stories dialog ----------
   Figma 2243:2731 / 2243:2730 (desktop), 2243:2743 / 2243:2742 (mobile).
   Opened by "Creator stories →" on the For Creators card. */
html:has(.cstory[open]) {
  overflow: hidden;
}

.cstory {
  width: min(612px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  /* Figma sets most of this card in leading-normal; body is 28px */
  line-height: normal;
  overflow-y: auto;
}

/* open/close: fade + rise. @starting-style and allow-discrete let display and
   the top layer animate; browsers without them just snap open, as before. */
.cstory,
.cstory::backdrop {
  transition: opacity .32s cubic-bezier(.22, .61, .36, 1),
    transform .32s cubic-bezier(.22, .61, .36, 1),
    overlay .32s allow-discrete,
    display .32s allow-discrete;
}

.cstory {
  opacity: 0;
  transform: translateY(24px) scale(.97);
}

.cstory[open] {
  opacity: 1;
  transform: none;
}

.cstory::backdrop {
  background: rgb(5 5 4 / .72);
  opacity: 0;
}

.cstory[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .cstory[open] {
    opacity: 0;
    transform: translateY(24px) scale(.97);
  }

  .cstory[open]::backdrop {
    opacity: 0;
  }
}

.cstory__close {
  display: block;
  width: 35px;
  height: 15px;
  margin: 0 0 18px auto;
  border-radius: 50%;
}

.cstory__close img {
  display: block;
}

.cstory__slide {
  display: flex;
  gap: 28px;
  height: 488px;
  padding: 24px;
  border-radius: 28px;
  background: #000;
}

.cstory__slide[hidden] {
  display: none;
}

/* the dots swap slides with hidden, so the incoming one fades in */
.cstory__slide {
  animation: cstory-slide .36s cubic-bezier(.22, .61, .36, 1);
}

@keyframes cstory-slide {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cstory,
  .cstory::backdrop {
    transition: none;
  }

  .cstory__slide {
    animation: none;
  }
}

.cstory__photo {
  flex: 0 0 220px;
  width: 220px;
  height: 440px;
  border-radius: 20px;
  object-fit: cover;
}

.cstory__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 4px 4px 0;
}

.cstory__mark {
  width: 36px;
  height: 28px;
}

.cstory__quote {
  margin: 0;
  font-size: 17px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -.17px;
}

.cstory__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
}

.cstory__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cstory__name {
  font-size: 18px;
  font-weight: 700;
}

.cstory__handle {
  font-size: 14px;
}

.cstory__stats {
  display: flex;
  gap: 10px;
}

.cstory__stat {
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12px;
  color: #55594c;
}

.cstory__stat b {
  display: block;
  margin-bottom: 2px;
  font-size: 20px;
  font-weight: 800;
  color: #0e0f0c;
}

.cstory__stat--green {
  flex: 0 0 128.52px;
  background: var(--green-surface);
}

.cstory__stat--lime {
  flex: 0 0 173.48px;
  background: var(--lime);
}

.cstory__brands {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cstory__brands-label {
  flex: none;
  font-size: 12px;
  font-weight: 600;
}

.cstory__logos {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* logo boxes and crops are Figma's own, same source files as the trust row */
.cstory__logo {
  position: relative;
  flex: none;
  height: 30px;
  overflow: hidden;
}

.cstory__logo img {
  position: absolute;
  max-width: none;
}

.cstory__logo--dominos {
  width: 78px;
}

.cstory__logo--dominos img {
  left: 6.49%;
  top: 24.78%;
  width: 86.86%;
  height: 49.66%;
}

.cstory__logo--mcdonalds {
  width: 49px;
}

.cstory__logo--mcdonalds img {
  left: -3.32%;
  top: -.06%;
  width: 110.85%;
  height: 88.3%;
}

.cstory__logo--chinesewok {
  width: 75px;
  height: 29px;
  border-radius: 5.608px;
}

.cstory__logo--chinesewok img {
  left: -10.65%;
  top: -17.7%;
  width: 116.28%;
  height: 139.48%;
}

.cstory__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cstory__dots {
  display: flex;
  gap: 7px;
}

.cstory__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9d9d9;
}

/* 12px is the drawn dot; the hit area is 28px */
.cstory__dot::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.cstory__dot[aria-current="true"] {
  background: var(--lime);
}

.cstory__cta {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--green-pill);
}

@media (max-width: 699px) {
  .cstory {
    width: min(358px, calc(100% - 32px));
  }

  .cstory__close {
    margin-bottom: 22px;
  }

  .cstory__slide {
    flex-direction: column;
    gap: 0;
    height: auto;
    padding: 22px 16px 16px;
    border-radius: 24px;
  }

  .cstory__photo {
    flex: none;
    width: 100%;
    height: 197px;
    border-radius: 16px;
    object-position: 50% var(--face-y, 30%);
  }

  .cstory__body {
    gap: 0;
    padding: 0;
  }

  .cstory__mark {
    width: 28px;
    height: 22.7px;
    margin-top: 18px;
  }

  .cstory__quote {
    margin-top: 17px;
    line-height: 25.5px;
    letter-spacing: 0;
  }

  .cstory__foot {
    gap: 15px;
    margin-top: 19px;
  }

  .cstory__name {
    font-size: 17px;
  }

  .cstory__handle {
    font-size: 13px;
  }

  .cstory__stats {
    gap: 8px;
  }

  .cstory__stat {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .cstory__stat b {
    font-size: 18px;
  }

  .cstory__stat--green {
    flex: 141.38 1 0;
  }

  .cstory__stat--lime {
    flex: 176.63 1 0;
  }

  .cstory__brands {
    flex-direction: column;
    align-items: flex-start;
  }

  .cstory__logos {
    gap: 8px;
  }

  .cstory__logo--dominos {
    width: 85.78px;
  }

  .cstory__logo--dominos img {
    left: 6.88%;
    top: 22.53%;
    height: 54.29%;
  }

  .cstory__logo--mcdonalds {
    width: 80px;
  }

  .cstory__logo--mcdonalds img {
    left: 21.94%;
    width: 75.69%;
  }

  .cstory__logo--chinesewok {
    width: 107.91px;
    height: 30px;
  }

  .cstory__nav {
    margin-top: 18px;
  }
}

/* ---------- Legal pages (B5): /privacy-policy/, /terms-and-conditions/,
   /gdpr-privacy-policy/. No Figma frame; a reading column on the homepage
   type scale, between the shared header and footer. ---------- */
.legal {
  max-width: 880px;
  margin: 72px auto 120px;
  padding-inline: 20px;
  color: var(--ink);
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}

.legal__title {
  margin-bottom: 40px;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -1.68px;
  color: var(--ink-deep);
}

.legal h2 {
  margin: 48px 0 16px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: var(--ink-deep);
}

.legal h3 {
  margin: 32px 0 12px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--ink-deep);
}

.legal p,
.legal ul,
.legal ol {
  margin: 0 0 16px;
  color: var(--text-body-light);
}

.legal ul,
.legal ol {
  padding-left: 24px;
}

.legal ul {
  list-style: disc;
}

.legal ol {
  list-style: decimal;
}

.legal li + li {
  margin-top: 8px;
}

.legal strong {
  font-weight: 700;
  color: var(--ink);
}

.legal a {
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

@media (max-width: 699px) {
  .legal {
    margin: 40px auto 80px;
    font-size: 16px;
    line-height: 26px;
  }

  .legal__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1px;
  }

  .legal h2 {
    margin-top: 36px;
    font-size: 22px;
    line-height: 30px;
  }

  .legal h3 {
    font-size: 18px;
    line-height: 26px;
  }
}

/* ---------- Book a demo dialog (A2) ----------
   Figma 2344:303. Shell (612 wide, close above the card, fade/rise) is
   .cstory's; only the card is new. Mobile goes full-screen in media.css. */
.demo__card {
  padding: 53px 45px 48px;
  border: 1px solid var(--lime);
  border-radius: 28px;
  background: #000;
  text-align: center;
}

.demo__form,
.demo__done {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo__title {
  font-size: 27.43px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.82px;
  color: #fbfbfb;
  text-wrap: balance;
}

.demo__title span {
  color: var(--lime);
}

.demo__sub {
  margin: 17px 0 29px;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: #fbfbfb;
}

.demo__sub span {
  white-space: nowrap;
}

.demo__sub i {
  font-style: normal;
  color: var(--lime);
  padding-inline: 4px;
}

.demo__field {
  width: 100%;
  height: 53.3px;
  margin-bottom: 13.3px;
  padding: 0 28px;
  border: 2.05px solid var(--button-outline-border, rgb(255 255 255 / .2));
  border-radius: 36.9px;
  background: rgb(33 36 29 / .4);
  color: #fbfbfb;
  font: 600 16.4px/1 var(--font);
  letter-spacing: -0.49px;
  text-align: left;
}

.demo__field::placeholder,
.demo__field--tel,
.demo__select:invalid {
  color: rgb(251 251 251 / .79);
  /* Figma capitalizes the field labels */
  text-transform: capitalize;
}

.demo__field--tel input {
  text-transform: none;
}

.demo__field:focus-within {
  outline: none;
  border-color: var(--lime);
}

.demo__field--tel {
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: text;
}

.demo__field--tel input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: #fbfbfb;
  font: inherit;
  letter-spacing: inherit;
  outline: none;
}

.demo__select {
  appearance: none;
  color-scheme: dark;
  padding-right: 60px;
  background: rgb(33 36 29 / .4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' fill='none'%3E%3Cpath d='M1 1l8 8 8-8' stroke='%23fbfbfb' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 29px center;
  cursor: pointer;
}

.demo__select option {
  background: #000;
  color: #fbfbfb;
}

.demo__hp {
  position: absolute;
  left: -9999px;
}

/* Button/Dark at Figma's 52px size, hover-ink fill so it reads on black */
.demo__submit {
  margin-top: 18.9px;
}

.demo__btn {
  height: 52px;
  padding-inline: 25.28px;
  gap: 8.67px;
  background: var(--button-hover-ink);
  font-size: 14.44px;
  line-height: 20.22px;
}

.demo__btn .btn__icon {
  flex-basis: 28.89px;
  width: 28.89px;
  height: 28.89px;
}

.demo__submit:disabled {
  opacity: .6;
  cursor: progress;
}

.demo__note {
  margin-top: 19px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #fbfbfb;
}

.demo__note--error {
  color: #ff8a80;
  line-height: 1.4;
}

.demo__note a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Thank-you state, Figma 2344:347: same card height as the form, content
   pinned to the frame's offsets (title at 167 from the card top) */
.demo__done {
  min-height: 551.7px;
  padding-top: 113px;
  outline: none;
}

.demo__thanks {
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.92px;
  text-transform: uppercase;
  color: var(--lime);
}

.demo__done .demo__sub {
  margin: 23px 0 54px;
}

.demo__done .demo__note {
  margin: 16px 0 54px;
}

.demo__wa {
  display: inline-flex;
  align-items: center;
  gap: 8.54px;
  font-size: 10.28px;
  line-height: 14.19px;
  font-weight: 700;
  color: #fff;
}

.demo__wa img {
  width: 28.48px;
  height: 28.48px;
}

.demo__wa:hover {
  color: var(--lime);
}