/* ==========================================================================
   Responsive. Two designed frames: 1440 desktop and 393 mobile (2181:109).

   1298-1439  fluid desktop. Every layer whose children carry 1440-frame
              offsets pins its far edge here instead, or it overhangs the
              narrower wrap: that was 76px of horizontal scroll at 1280.
   700-1297   tablet. Fixed heights and absolute insets are released. 1297 is
              measured, not chosen: the 2x600 step grid and the 4x279 stat row
              are the widest fixed tracks and they stop fitting just under 1250
              of CONTENT, which is now 1298 of viewport across the 24px gutter.
   <=699      the 393 mobile frame. Its type, insets, order and vertical
              rhythm are transcribed. Its HEIGHTS are not: a comp height is
              the content of that comp at 393, so pinning it clips at 360 and
              leaves a hole at 430. Boxes stay auto.
   ========================================================================== */

@media (max-width: 1439px) {
   @media (max-width: 1023px) {
      .hero__inner {
         grid-template-columns: minmax(0, 1fr) 531px;
         gap: 32px;
      }
   }

   /* left:799 + 593 lands exactly on the 1392 card, so the far edge is the
     offset that survives a narrower card - keep it and drop the left. */
   .results__art {
      left: auto;
      right: 0;
      width: min(593px, 44%);
   }

   .case {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   }

   .faq__grid {
      grid-template-columns: minmax(0, 600fr) minmax(0, 561fr);
   }

   /* left 823 + 578 overhangs the 1392 card by 9 - pin that far edge and the
     drawn footer holds down to 1298, where the flow layout below takes over */
   .footer__nav {
      right: -9px;
      width: auto;
   }

   /* the 176 between the link columns gives way first, so the second column
     keeps the card's 80px right padding (154 + 96 columns + 9 + 80 = 339) */
   .footer__nav-cols {
      gap: min(176px, calc(100% - 339px));
   }

   /* An absolute box measured as left+width is only correct at 1440. Pinning
     the far edge instead keeps the same desktop geometry and stops the
     overhang at every width below it. */
   .trust {
      left: 100px;
      right: 90px;
      width: auto;
   }

   .awards__visual {
      left: 635px;
      right: 102px;
      width: auto;
      height: auto;
      aspect-ratio: 655/469;
   }

   .award--silver,
   .award--grandprix {
      left: auto;
      right: 36px;
   }

   .press {
      left: 78px;
      right: 76px;
      width: auto;
   }

   .closing__card {
      left: auto;
      right: 85px;
   }

   .closing__title {
      max-width: min(900px, calc(100% - 430px));
   }

   @media (max-width: 1023px) {
      .site-nav__list {
         gap: 30px;
      }
   }

}


@media (max-width:1340px) {
   @media (max-width: 1023px) {
      .hero__ctas {
         margin-top: 65px;
      }
   }

   .btn.btn--ghost {
      padding-left: 0;
   }

   .about__body {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 46px;
   }

   /* the body stacks here, so the 840px drawn height and the desc's
     absolute box both go with it */
   .about {
      height: auto;
      padding-bottom: 35px;
   }

   .about__desc {
      position: static;
      width: auto;
      max-width: none;
      margin-top: 28px;
   }

   .about__title,
   .about__title2 {
      max-width: none;
   }

   /* The drawn 244px gap counts the ~124px the about cards hang below the
     dark panel. With the panel wrapping them (35px pad) that overhang is gone,
     so 85px keeps the 120px cards-to-section gap the frame shows. */
   .howitworks {
      margin-top: 85px;
   }
}

/* 1341-1439 keeps the 1440 about composition. The 1241px body only fits the
  card from 1407 up, so it scales to the card's content box from its
  bottom-left, which holds the 124px overhang and the 120px gap under it. The
  desc keeps its right edge on the body's (59 + 1241 - 499 = the drawn 801). */
@media (min-width: 1341px) and (max-width: 1439px) {
   .about {
      container-type: inline-size;
   }

   .about__desc {
      left: calc(min(1241px, 100cqw) - 440px);
   }

   .about__body {
      transform: scale(min(1, calc(100cqw / 1241px)));
      transform-origin: left bottom;
   }
}


@media (max-width: 1297px) {

   /* Footer goes to flow here with the rest of the page, so the 767px drawn
     height has to go or the nav, socials and fine print fall out of the
     card. 30px keeps the gap the drawing had under the legal line. */
   .footer {
      height: auto;
      padding-bottom: 30px;
   }

   .footer__nav {
      position: static;
      width: auto;
      margin-top: 56px;
   }

   .footer__social {
      position: static;
      margin-top: 48px;
   }

   /* three drawn pills, 668px of them - nowrap they ran out of the card */
   .footer__social-list {
      flex-wrap: wrap;
   }

   .footer__tag,
   .footer__logo,
   .footer__divider,
   .footer__legal,
   .footer__copy {
      position: static;
   }

   .footer__divider {
      width: 100%;
      margin: 40px 0 0;
   }

   /* Off the absolute grid these two stacked. The wrapper puts them back on
     one row, legal left and copy right, and only wraps if they truly cannot
     share the width. */
   .footer__fine {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px 24px;
      margin-top: 16px;
   }

   .footer__logo {
      margin-top: 40px;
   }

   .footer__tag {
      margin-top: 12px;
   }


   /* Desktop fidelity uses Figma-exact fixed heights and absolute insets.
     Below 1200 the layout becomes flow, so every one of those must be undone
     or sections clip their own content. */
   .howpay,
   .shared,
   .about,
   .howitworks,
   .results,
   .results__card,
   .case,
   .case__details,
   .case__media,
   .case--acko,
   .case--acko .case__details,
   .case--acko .case__media,
   .tst,
   .cvp,
   .ctst,
   .awards,
   .faq,
   .closing,
   .footer,
   .cta-strip,
   .step {
      height: auto;
   }

   /* the hero keeps its desktop height from 1024 up (D2 laptop zoom) */
   @media (max-width: 1023px) {
      .hero {
         height: auto;
      }
   }

   @media (max-width: 1023px) {
      .site-nav__list {
         gap: 15px;
      }
   }

   @media (max-width: 1023px) {
      .site-nav__list a {
         font-size: 17px;
      }
   }

   @media (max-width: 1023px) {
      .btn--dark-sm {
         height: 50px;
         font-size: 17px;
      }
   }

   .btn__icon {
      flex: none;
      width: 30px;
      height: 30px;
   }

   .btn--dark,
   .btn--ghost {
      height: 60px;
   }


   .results {
      padding-top: 0;
      background: var(--ink);
      border-radius: var(--radius-section);
      overflow: hidden;
   }

   .results__card {
      background: none;
      border-radius: 0;
   }

   /* .results__card>* goes static below, so the card has to carry the insets
     its absolutes were holding, and the stack needs its own rhythm back. */
   .results__card {
      padding: 63px var(--card-pad) 60px;
   }

   .results__title {
      margin-top: 28px;
   }

   .results__lead {
      margin-top: 31px;
   }

   .results__outcomes {
      margin-top: 32px;
   }

   /* The step card is a 600x326 drawing whose number, copy and art are placed
      against it. Letting it stretch to the section width blew the background
      SVG out and stranded the art below the copy, so it keeps its own size and
      the four of them become a centred column. */
   .steps {
      position: static;
      grid-template-columns: 600px;
      justify-content: center;
      gap: 61px;
   }

   .step {
      width: 600px;
      height: 326px;
   }

   .case__details>*,
   .results__card>* {
      position: static;
   }

   /* Same as .results__card: the children go static here, so the card has to
     carry the 44/34 insets its absolutes held, and the stack needs its gaps
     back. The margins are the desktop tops differenced, so a card that does
     not wrap lands exactly where 1440 puts it. */
   .case__details {
      padding: 34px 44px 44px;
   }

   .case__brand {
      margin-top: 22px;
   }

   .case__goal {
      margin-top: 9px;
   }

   .case__headline {
      margin-top: 47px;
   }

   .case__metrics,
   .case__list {
      margin-top: 56px;
   }

   .case__awards {
      margin-top: 48px;
   }

   .case__period {
      margin-top: 16px;
   }

   /* one caption line now, so it no longer needs the two-line box */
   .case__headline-sub {
      height: auto;
   }

   /* The logo is a brand mark bled to the card's top-right, not part of the
     stack. 200px is 34% of the 598 card, so keep it a share of the card - held
     at 200 it grew back over the pill once the column dropped under ~420. */
   .case .case__logo {
      position: absolute;
      left: auto;
      right: 44px;
      top: -1px;
      width: 34%;
      height: auto;
      aspect-ratio: 200 / 97;
   }

   /* the new mark is wide: below ~580 of card it yields to the pill
      (232 = pill 44+131, a 13 gap, the 44 right inset); contain keeps it centred */
   .case--acko .case__logo {
      left: auto;
      right: 44px;
      top: 42px;
      width: min(158px, calc(100% - 232px));
      height: 38px;
   }

   .case__metrics {
      flex-wrap: wrap;
      gap: 16px;
   }

   .metric {
      flex: none;
   }

   .case__list {
      width: auto;
      max-width: 100%;
   }

   .results__art,
   .results__art img {
      position: static;
      width: 100%;
      height: auto;
      left: auto;
      top: auto;
   }

   /* The crop is width/height percentages of a 600x742 frame. Here the frame
     takes the details card's height, so those two percentages stopped being
     one scale and squashed the photo (1.50 natural rendering at 0.80 by
     1000). Same window, expressed as a focal point instead: dominos shows
     from 46.3% to 100% across, centred at 73%; acko's window is centred. */
   .case .case__media>img {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   /* CX-009: the Figma window is 46.3%-100% across, and 73% is its CENTRE, not
      its object-position. For a window 54.3% as wide as the source, the start
      offset 46.3% resolves to object-position 100% - i.e. flush right, which is
      what both the desktop and the 393 export show. */
   .case--dominos .case__media>img {
      object-position: 100% 50%;
   }

   .case--acko .case__media>img {
      object-position: 50% 50%;
   }

   /* The photo is a Figma crop: an oversized img offset inside the frame, and
     .case--x .case__media>img outranks anything written here, so listing
     .case__media img above only stripped its position - it kept the 186%
     width, lost the -86% offset and showed the wrong half of the photo. The
     frame stretches to the row, so the percentage crop resolves on its own. */

   .problem__lead,
   .problem__intro-right {
      max-width: none;
   }

   /* it is a 593px illustration, not a full-bleed one */
   .results__art {
      max-width: 593px;
      margin: 32px 0 0 auto;
   }

   @media (max-width: 1023px) {
      .hero__inner {
         grid-template-columns: minmax(0, 1fr);
      }
   }

   @media (max-width: 1023px) {
      .funnel {
         justify-self: start;
         margin-top: 40px;
      }
   }

   @media (max-width: 1023px) {
      .trust {
         position: static;
         width: auto;
         height: auto;
         margin-top: 28px;
      }

      /* trust left the 883px hero box, so the 10px drawn under it is all
        that is left - 95 puts the logo row 59 above the panel, as at 1440 */
      .howpay {
         margin-top: 95px;
      }
   }

   /* The tint is one exported 304x153.289 drawing with its text riding the
     same rotation. Stretched to the card width the SVG smeared across it. */
   .results__swap {
      position: relative;
      left: auto;
      top: auto;
      width: 304px;
      height: 153.29px;
      margin-top: 24px;
      transform: rotate(-2.2deg);
   }

   .results__title,
   .results__lead {
      width: auto;
      max-width: 100%;
   }

   .results__struck,
   .results__revenue {
      position: absolute;
   }

   .case__badge {
      position: absolute;
   }

   .about__desc {
      position: static;
   }

   .howpay__aside {
      position: static;
      width: auto;
      max-width: 560px;
      margin-top: 28px;
   }

   .howpay__title {
      max-width: none;
   }

   /* 4 x 279 + 3 x 40 needs 1236 of card; wrapping it freely gives 3 + 1, so
      it is capped to two per row */
   .stats__row {
      flex-wrap: wrap;
      justify-content: center;
      max-width: 598px;
      margin-inline: auto;
   }

   .problem__intro {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .problem__cards {
      grid-template-columns: 1fr;
      gap: 40px;
      justify-items: center;
   }

   .engine {
      height: auto;
      padding: 40px 0;
   }

   /* the rings are wider than their 273px core by design; scale rather than squash */
   .engine__core {
      transform: scale(.7);
   }


   /* cards stack, so the connector turns vertical and spans the 40px grid gap */
   .engine__line {
      left: 50%;
      right: auto;
      top: auto;
      width: 1px;
      height: 40px;
   }

   .engine__line--l {
      top: -40px;
   }

   .engine__line--r {
      bottom: -40px;
   }


   /* the inner goes static here, so the card carries the 20.7/16.7 inset it
     used to hold as absolute offsets - that keeps the accent straddling the
     inners top-left corner exactly as it does at 1440 */
   .closing__card {
      position: relative;
      inset: auto;
      width: 100%;
      max-width: 407px;
      height: auto;
      margin-top: 40px;
      padding: 16.7px 0 0 20.7px;
   }

   .closing__title {
      max-width: none;
   }

   .closing__card-inner {
      position: static;
      width: 100%;
      height: auto;
   }

   /* the cards are absolutely placed on a 1392 canvas; released into flow they
      stacked one per row. A wrap row fits as many 276px cards as the width has. */
   /* 15 + the faq's 120 is the 135 the press row has above the faq at 1440 */
   .awards {
      min-height: 0;
      padding-bottom: 15px;
   }

   /* the cards are absolutely placed on a 1392 canvas; released into flow they
      stacked one per row. inline-block flows as many 276px cards as fit without
      making .awards a flex container, which stretched the pill and the rule. */
   .award {
      display: inline-block;
      vertical-align: top;
      margin-right: 24px;
   }

   .awards__visual,
   .press {
      position: static;
   }

   .award {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
   }

   .awards__visual {
      width: 100%;
      max-width: 655px;
      margin-top: 40px;
   }

   .award {
      width: 100%;
      max-width: 276px;
      min-width: 0;
      margin-top: 24px;
   }

   .press {
      width: 100%;
      margin-top: 48px;
   }

   .tst__featured {
      grid-template-columns: 1fr;
   }

   .tst__badge {
      display: none;
   }

   .tst__nav {
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 16px;
   }

   /* Figma lets this label overrun its 84px column; off-canvas that is a
     12-16px horizontal scroll at every width, so it wraps instead. */
   .tst__person-co {
      width: 100%;
   }

   .ctst {
      height: auto;
      min-height: 0;
      padding: 48px 40px 56px;
      overflow: visible;
   }

   .ctst__header {
      position: static;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
   }

   .ctst__track {
      position: relative;
      height: auto;
   }

   .ctst__slide {
      position: relative;
      inset: auto;
      display: none;
      transform: none;
   }

   .ctst__slide.is-active {
      display: grid;
      grid-template-columns: minmax(0, clamp(180px, 34%, 340px)) minmax(0, 1fr);
      gap: 24px 32px;
      align-items: start;
   }

   .ctst__photo,
   .ctst__quote {
      position: static;
      width: auto;
      max-width: 100%;
      margin: 0;
   }

   .ctst__photo--food {
      grid-column: 1;
      grid-row: 1;
   }

   .ctst__quote--dark {
      grid-column: 2;
      grid-row: 1;
   }

   .ctst__photo--lifestyle {
      grid-column: 1;
      grid-row: 2;
   }

   .ctst__quote--light {
      grid-column: 2;
      grid-row: 2;
   }

   .ctst__quote {
      padding: 28px 32px;
   }

   /* CQ-2's 28/40 is the 1440 frame; in the stacked grid it ran ~6 words a line */
   .ctst__quote .t-quote {
      font-size: 24px;
      line-height: 35px;
   }

   .ctst__photo {
      max-width: 340px;
   }

   .cvp {
      padding: 48px 40px;
      /* the -36px pull-up is a 1440-frame overlap; below that the panel is
         height:auto and the neighbours no longer line up for it */
      margin-top: 3px;
   }
}

@media (max-width: 1100px) {
   @media (max-width: 1023px) {
      .site-nav {
         gap: 15px;
      }
   }

   /* NEW-1: logo + five links + button need ~850px; at 1024 the row has 824,
     and flex was squashing the logo. Scale it instead and keep links unbroken. */
   @media (max-width: 1023px) {
      .site-header__brand {
         flex-shrink: 0;
      }
   }

   @media (max-width: 1023px) {
      .site-header__brand img {
         width: 130px;
         height: 31.3px;
      }
   }

   @media (max-width: 1023px) {
      .site-nav__list a {
         font-size: 16px;
         white-space: nowrap;
      }
   }

   /* The preview is a fixed 815px composition on absolute insets. Below ~1015
     the card's 685px of content no longer holds it and it pushed the page
     13px wide; scale it the way <=899 already does, just not as far. */
   .about__preview {
      zoom: .84;
   }
}


/* ==========================================================================
   <= 699 — the 393 mobile frame, node 2181:109.
   It is a 393 design and it only holds near 393: stretched to 899 the hero CTA
   ran the full page width, the funnel stranded 500px of dead column and the
   logo marquee became a 3-up grid. So the frame is capped at 480 and centred -
   past a phone's width it keeps its proportions instead of smearing. 700 is
   the line because the flow layout above is measured clean down to exactly
   there; 640 is where its funnel, steps and hero tour button start to overrun.
   481-699 is a designed gap: two frames were drawn, 1440 and 393, and this is
   the phone one held at its own size rather than a third frame invented here.
   Page gutter 20. Section cards inset 6 from the page, radius 60, 14 of inner
   padding, so their content also lands on the 20px column.
   ========================================================================== */
@media (max-width: 699px) {
   :root {
      --gutter: 6px;
      --card-pad: 14px;
      --radius-section: 60px;
      --radius-card: 32px;
      --radius-inner: 24px;
   }

   .wrap,
   .wrap--flush {
      padding-inline: 20px;
   }

   .section,
   .howitworks,
   .results,
   .case,
   .cvp,
   .ctst,
   .awards,
   .closing,
   .footer {
      max-width: none;
   }

   /* ---- type. The mobile frame keeps the desktop text styles; only the two
     headings the designer re-set, the body sizes and the pill change. The old
     build ramped the whole scale down to 44/34, which is why mobile read
     cramped — Figma keeps 25L at 72/80 and every metric at 48/60. ---- */
   .t-h2,
   .t-statement {
      font-size: 48px;
      line-height: 56px;
   }

   /* body-l drops to Body M, not to 16 -- the frame only sets 16/24 on the four
     section lead paragraphs, and keeps 18/28 for FAQ answers and 20/28 for the
     case-study goal line. Ramping all of it to 16 shortened the FAQ by 215px. */
   .t-body-l {
      font-size: 18px;
      line-height: 28px;
   }

   .t-lead {
      font-size: 16px;
      line-height: 24px;
   }

   .hero__sub,
   .howpay__desc,
   .results__lead,
   .about__desc,
   .stats__caption {
      font-size: 16px;
      line-height: 24px;
   }

   .case__goal {
      font-size: 20px;
      line-height: 28px;
   }

   .hero__title {
      font-size: 52px;
      line-height: 64px;
   }

   /* the case brand names are the one H2 the mobile frame leaves at 56 */
   .case__brand {
      font-size: 56px;
      line-height: 72px;
   }

   .case__headline--stack {
      font-size: 56px;
      line-height: 72px;
   }

   .pill {
      font-size: 16px;
      line-height: 20px;
      padding: 4px 12px;
   }

   .btn--dark,
   .btn--lime,
   .btn--ghost {
      height: 60px;
   }

   .closing .btn {
      height: 72px;
   }

}

/* The desktop nav is 801px beside a 163px brand: it stops fitting at ~1000,
   which is above the layout breakpoint, so it collapses on its own. */
/* 815 * .84 = 685 stops fitting the card's content once the page is under 900. */
@media (max-width: 900px) {
   .about__preview {
      zoom: .67;
   }
}

/* "registrations" is one 380px word at 64px, and the case card is two columns
   through this whole band, so its content box crosses under 380 around 1039
   (1045 leaves room for a wider scrollbar) and the word hangs out of the card.
   Each step is the largest size whose 380px word still fits the narrowest
   column the band reaches: 40 holds to 768, 34 holds to 700. The phone frame
   re-sets it to 48 below 700, where the card is full width again. */
@media (min-width: 700px) and (max-width: 1045px) {
   .case__headline--stack {
      font-size: 40px;
      line-height: 48px;
   }
}

@media (min-width: 700px) and (max-width: 899px) {
   .case__headline--stack {
      font-size: 34px;
      line-height: 40px;
   }

   /* same story one line up: "Domino's" is 236px at 56 and the column is 211
     by the bottom of the band */
   .case__brand {
      font-size: 48px;
      line-height: 56px;
   }
}

/* The 4 x 279 row wraps to 2 + 2 above this and there is no width between
   that and the phone frame where four fit, so under 992 it becomes a track:
   one card per view, native scroll-snap, no JS. */
@media (max-width: 991px) {
   .stats__row {
      flex-wrap: nowrap;
      justify-content: flex-start;
      max-width: none;
      gap: 20px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      /* 2.5 cards of the fixed 279 composition - 279+20+279+20+139 - so the
        third peeks and the track reads as scrollable. min() because the
        section's own 76px gutters leave less than 737 below ~950. */
      width: min(100%, 737px);
      margin-inline: auto;
      padding-inline: 0;
   }

   .stats__row::-webkit-scrollbar {
      display: none;
   }

   .stat {
      scroll-snap-align: start;
      scroll-snap-stop: always;
   }
}


/* Below here 2.5 cards no longer fit the gutters, so the peek drops to
   1.5: 279 + 20 + 139. */
@media (max-width: 786px) {
   .stats__row {
      width: min(100%, 438px);
   }
}

@media (max-width: 1023px) {
   .site-header {
      position: relative;
   }

   .nav-toggle {
      display: flex;
   }

   .site-nav {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 80px;
      z-index: 40;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      background: #fff;
      border-radius: 24px;
      padding: 20px;
      box-shadow: 0 18px 50px rgb(5 5 4 / .18);
   }

   .site-nav[hidden] {
      display: none;
   }

   .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
   }

   .site-nav__list a {
      display: block;
      padding: 10px 6px;
   }

   .site-nav .btn {
      justify-content: center;
      margin-top: 8px;
   }

   .site-header {
      padding-top: 10px;
   }

   .site-header__inner {
      position: relative;
      min-height: 40px;
   }

}

@media (min-width: 699px) {

   .cta-strip a.btn.btn--lime {
      border: none;
   }
}

@media (max-width: 699px) {
   .site-header__brand img {
      width: 110px;
      height: auto;
   }

   /* ---- 01 header. 393x60: 10 + a 40 inner + 10 ---- */
   .site-header {
      padding-bottom: 10px;
   }

   /* Figma ships the menu as a 34 box holding three 16x2 rounded rules on a
     6px pitch. The 44 button was taller than the 40 inner and pushed the
     header to 54. */
   .nav-toggle {
      width: 34px;
      height: 34px;
      gap: 4px;
      align-items: center;
   }

   .nav-toggle__bar {
      width: 16px;
      border-radius: 1px;
   }

   /* ---- 02 hero. pill 0, title +20, sub +35, ctas +40, funnel +40 ---- */
   .hero {
      padding-top: 36px;
   }

   .hero__inner {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 40px;
   }

   /* the hero pill alone is 33 tall (324x33); every other section pill is 28 */
   .hero .pill {
      padding-block: 6.5px;
   }

   .hero__title {
      margin-top: 20px;
      max-width: none;
   }

   .hero__sub {
      margin-top: 35px;
      max-width: none;
   }

   .hero__ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      margin-top: 40px;
   }

   .hero__ctas .btn {
      justify-content: center;
      width: 100%;
   }

   .hero__mark::before {
      left: -13px;
      right: -13px;
      top: 11px;
      height: 56px;
      border-radius: 42px;
   }

   /* Figma ships the funnel at 353 in a 353 column - it is the column width,
     whatever that is. zoom scales the layout box too, so nothing has to be
     re-measured, and dividing the column by the drawn 531 is a continuous
     ramp: no step goes stale and 353/531 = .6648 still falls out at 393. */
   .hero__inner {
      container-type: inline-size;
   }

   .funnel {
      zoom: calc(100cqw / 531px);
      justify-self: start;
      /* the 40 gap belongs on the grid row, not here: zoom scales a margin
        and would land it at 27 */
      margin: 0;
      transform-origin: top left;
   }

   /* ---- 03 trust. label +25, 3-up logo grid ----
     60 under the funnel, of which 40 is the hero__inner row gap. */
   .trust {
      margin-top: 20px;
   }

   /* 16/20 centred in a 32 box: the 32 is what puts the logo row at +71 */
   .trust__label {
      font-size: 16px;
      line-height: 32px;
   }

   /* CX-003: Figma draws the mobile row as a static 3-up grid, so the marquee
     stops here - the motion kit's own .mk-marquee--off behaviour, applied by
     width instead of by class, clones hidden and all. */
   .trust .mk-marquee {
      overflow: visible;
   }

   .trust .mk-marquee::before,
   .trust .mk-marquee::after {
      display: none;
   }

   .trust__logos.mk-marquee__track {
      display: grid;
      grid-template-columns: repeat(3, auto);
      justify-content: space-between;
      justify-items: center;
      align-items: center;
      width: auto;
      animation: none;
      gap: 15.537px 27.966px;
      margin-top: 14px;
   }

   .trust__logos>[aria-hidden="true"] {
      display: none;
   }

   /* the whole row is the desktop box at 353/454.66 = .7768 */
   .trust__logo {
      width: 95.806px;
      height: 46.39px;
   }

   .trust__logo--chinesewok {
      width: 75.899px;
      height: 32.901px;
      border-radius: 4.358px;
   }

   /* ---- 04 how you pay ---- */
   .howpay {
      margin-top: 80px;
      padding: 52px 34px 54px;
   }

   .howpay__pill {
      position: static;
   }

   .howpay__title {
      margin-top: 29px;
   }

   .howpay__aside {
      margin-top: 32px;
   }

   /* 25 in Figma, less the 2px the 56 line-height adds over the drawn 55.05 */
   .howpay__chips {
      margin-top: 22px;
      gap: 12px;
      max-width: 300px;
   }

   /* ---- 05 stats. The frame lays the four cards on a 1176px row inside a 393
     page: a horizontal strip, not a stack. Card geometry is unchanged. ---- */
   /* flow-root, or the negative margin below collapses through the zero top
     padding and drags the whole section up instead of lifting the cards out
     of it. Measured off the frame: surface at howpay+170, cards at +64. */
   .shared {
      display: flow-root;
      margin-top: 170px;
      padding: 0 14px 72px;
   }

   .stats {
      top: 0;
      margin-top: -106px;
   }

   /* the frame runs the strip off the right edge - the peeking card is cut by
     the screen, not by the section's own inset */
   .stats__row {
      width: auto;
      margin-right: calc((var(--gutter) + var(--card-pad)) * -1);
   }

   .stats__caption {
      width: auto;
      margin-top: 20px;
      text-align: center;
   }

   /* ---- 06 problem. title, intro, card, rule, engine, rule, card ---- */
   .problem {
      margin-top: 89px;
   }

   .problem__title {
      max-width: none;
      text-align: left;
   }

   .problem__intro {
      margin-top: 13px;
      gap: 24px;
   }

   /* Figma: the intro column is 298 wide, inset 24 from the section edge */
   .problem__intro-left {
      padding-left: 24px;
      margin: 46px 0 48px;
   }

   /* mobile frame 2186:1454 / 1455: eyebrow 16px in its 32 box, lead 14/24 */
   .problem__eyebrow {
      font-size: 16px;
      line-height: 32px;
   }

   .problem__lead {
      font-size: 14px;
      margin-top: 20px;
      max-width: 298px;
      padding-right: 0;
   }

   .problem__intro-left::before {
      left: 0;
   }

   .problem__intro-right {
      padding-top: 0;
      max-width: none;
   }

   .problem__cards {
      margin-top: 46px;
      gap: 0;
      justify-items: stretch;
   }

   .vcard {
      width: auto;
      max-width: none;
      height: auto;
      padding: 44px 21px 39px;
   }

   /* the tag is a 32 line box with 7 of horizontal padding, no vertical */
   /* the label text box is a fixed 124 wide (2186:1523 / 1567) */
   .vcard__tag {
      min-width: 138px;
      padding: 0 7px;
      font-size: 16px;
      line-height: 32px;
   }

   .vcard__title,
   .vcard--brands .vcard__title {
      max-width: none;
      margin-top: 28px;
   }

   .vcard__list {
      margin-top: 30px;
      gap: 16px;
      max-width: 289px;
   }

   .vcard__list li {
      font-size: 16px;
      line-height: 24px;
   }

   /* Figma gives each brand benefit its own text width (250 / 191 / 171);
     that is what puts "can forecast" and "not one-off bursts" on line 2 */
   .vcard--brands .vcard__list li:nth-child(2) { max-width: calc(39px + 191px); }
   .vcard--brands .vcard__list li:nth-child(3) { max-width: calc(39px + 171px); }

   /* Figma breaks every creator bullet onto two lines; 170 of text is the
     only column that lands all three breaks where the comp puts them. The
     card is drawn tighter than the brands one below its two-line title. */
   .vcard--creators {
      padding-bottom: 31px;
   }

   /* 2186:1565 is a 266 text box, which breaks after "income," */
   .vcard--creators .vcard__title {
      max-width: 266px;
   }

   .vcard--creators .vcard__list {
      max-width: 209px;
      margin-top: 21px;
   }

   .vcard--creators .vcard__ctas {
      margin-top: 16px;
   }

   /* the CTA sits on the bullet text, not the card padding.
     relative, not static: .vcard--creators::before is a full-bleed
     rgba(33,36,29,.4) scrim in the positioned layer. Static dropped the link
     into flow content underneath it, painting #29d53b as #258e2f. The list
     and tag were already relative, which is why only this one looked dim. */
   .vcard__ctas {
      position: relative;
      inset: auto;
      flex-wrap: wrap;
      gap: 4px 16px;
      margin-top: 17px;
      padding-left: 39px;
   }

   /* clip-x only keeps the oversized rings off the page gutter while letting
     them (and the connector) bleed into the 40px margin */
   /* 44 is the connector rule Figma draws between the card and the graphic */
   .engine {
      height: 289px;
      padding: 0;
      margin: 44px 0;
      overflow-x: clip;
   }

   .engine__core {
      transform: none;
      zoom: .77;
   }

   /* 2186:1555 is 15.407/21.569 in a 102.45 box; under zoom .77 that is the
     desktop 20/28 in 133, so the caption must not take the mobile 18px */
   .engine__caption {
      font-size: 20px;
      line-height: 28px;
   }

   /* the rings fill the whole 289px box, so the connector runs in the margin */
   .engine__line {
      left: 50%;
      right: auto;
      top: auto;
      width: 1px;
      height: 40px;
   }

   .engine__line--l {
      top: -40px;
   }

   .engine__line--r {
      bottom: -40px;
   }

   /* ---- 07 about ---- */
   .about {
      margin-top: 80px;
      padding: 52px 14px 52px;
   }

   .about__title,
   .about__title2 {
      max-width: none;
   }

   .about__title {
      margin-top: 52px;
   }

   .about__title2 {
      margin-top: 12px;
   }

   .about__desc {
      margin-top: 48px;
      max-width: 342px;
   }

   .about__body {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 54px;
   }

   /* same ramp, off the 815x496 desktop preview: .4332 at 393, and it keeps
     filling the column up to 699 instead of stranding it */
   .about__body {
      container-type: inline-size;
   }

   .about__preview {
      zoom: calc(100cqw / 815px);
      height: 496px;
   }

   /* The mobile frame redraws three pieces of the preview instead of just
     scaling them: the match card and the chips are drawn larger than the
     ramp gives, and the video block sits higher and further left. Every
     number below is in the preview's own (pre-zoom) 815-wide space. */
   .about__widget--match {
      zoom: 1.234;
   }

   .about__video {
      left: 55.4px;
      top: 327.8px;
      height: 154.7px;
   }

   .about__video-chips {
      zoom: 1.5;
      left: 120.1px;
      top: 58.7px;
      gap: 7.7px;
   }

   .about__positioning {
      height: 259px;
      margin-top: 20px;
      border-radius: 30px;
   }

   .about__positioning-text {
      padding: 22px 0 0 19px;
      font-size: 24.5px;
      line-height: 30px;
   }

   .about__positioning-img {
      left: 50%;
      top: 106px;
      width: 232.6px;
      height: 196.9px;
      transform: translateX(-50%);
   }

   /* ---- 08 how it works. The mobile frame drops the step illustrations and
     keeps the card, the number and the copy. ---- */
   .howitworks {
      margin-top: 44px;
      padding: 52px 14px 0;
   }

   .howitworks__title {
      margin-top: 50px;
   }

   /* Figma runs both sentences on one 56 leading, no paragraph gap */
   .howitworks__title-sub {
      max-width: none;
      margin-top: 0;
   }

   .steps {
      grid-template-columns: minmax(0, 1fr);
      justify-content: stretch;
      margin-top: 52px;
      gap: 40px;
   }

   /* releases the fixed 600x326 card the tablet band pins */
   .step {
      width: auto;
      height: auto;
      min-height: 326px;
      padding: 0 0 32px;

      /* The card is one 600x326 SVG whose badge notch is a concave sweep 110
        wide in its top-left. Any horizontal scale squeezes that sweep into a
        hook the 46px badge no longer sits in - 170% centred, which this was,
        also pushed the rounded corners clean off the box. So do not scale it
        horizontally at all: draw it at its own width from the left, which
        keeps the notch and both left corners exact, and let the box's own
        radius clip the overhanging right side back into corners. */
      background-size: auto 100%;
      background-position: left top;
      /* CX-006: the mobile frame draws these corners at 16, not the 32 the
         page cards use - measured off the 393 export (extreme-row inset 16.2,
         arc span 12). The clip handles the two right corners; the SVG is drawn
         at its own width from the left, so the two LEFT ones are its own and
         need the 16px drawing, not the 1440 frame's 38px one. */
      border-radius: 16px;
      overflow: hidden;
   }

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

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

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

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

   .step__num {
      position: absolute;
      left: 20px;
      top: 0;
      margin: 0;
   }

   /* Figma: 299 of copy at 36 in, so 18 of slack on the right - not 36.
     Step 01 is the exception, drawn at 254. */
   .step__copy,
   .step--2 .step__copy {
      position: absolute;
      left: 36px;
      top: 96px;
      width: 299px;
      right: auto;
   }

   .step--1 .step__copy {
      width: 254px;
   }

   .step--2 .step__text {
      width: auto;
   }

   .step__art {
      display: none;
   }

   /* ---- 08 / 11 CTA strips ---- */
   /* 2 + 72 button + 38 + 156 of meta = the 268 frame */
   .cta-strip {
      flex-direction: column;
      align-items: center;
      gap: 38px;
      text-align: center;
      height: auto;
      padding: 2px 0 0;
      margin-top: 48px;
      border: 0;
   }

   /* 244 is the Figma pill; a longer label has to widen it rather than let
     nowrap text spill past the lime border.
     Mobile 2190:2908 pads 18, not the desktop token's 35. At 35 the longest
     label ("See your category's numbers") measured 392 natural against a 378
     column, so max-width clamped it flat to 100% and the pill lost its inset. */
   .cta-strip .btn {
      justify-content: center;
      width: auto;
      min-width: 244px;
      max-width: 100%;
      height: 72px;
      padding-inline: 18px;
   }

   .cta-strip__u {
      display: contents;
   }

   .cta-strip__meta {
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      line-height: 28px;
   }

   /* ---- 09 results ---- */
   .results {
      margin-top: 96px;
      background: var(--ink);
      border-radius: var(--radius-section);
      overflow: hidden;
   }

   .results__card {
      background: none;
      border-radius: 0;
      overflow: visible;
      padding: 52px 14px 0;
   }

   .results__title {
      margin-top: 51px;
   }

   .results__lead {
      margin-top: 31px;
      max-width: 342px;
   }

   /* the margin is inside the .839 zoom and the -2.2deg rotation grows the
     box ~5 above the frame, so 42.8 here is the 31 Figma draws */
   .results__swap {
      zoom: .839;
      margin: 42.8px auto 0;
      transform: rotate(-2.2deg);
      width: 304px;
      height: 153.29px;
   }

   .results__outcomes {
      margin-top: 42px;
      gap: 10px;
      max-width: 335px;
   }

   .results__art {
      position: relative;
      width: calc(100% + 27px);
      height: auto;
      aspect-ratio: 408 / 481;
      margin: 45px -9px 0 -18px;
      overflow: hidden;
   }

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

   /* ---- 10 / 11 case studies ---- */
   .case {
      grid-template-columns: 1fr;
      gap: 0;
      margin-top: 64px;
      margin-inline: 5px;
      background: var(--surface-card);
      border-radius: var(--radius-section);
      overflow: hidden;
   }

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

   .case__details {
      background: none;
      padding: 36px 24px 8px;
      border-radius: 0;
   }

   /* details dissolves into the card grid, so the pill is a grid item and
     gets stretched to the column unless it is told to shrink */
   .case .pill {
      position: static;
      justify-self: start;
   }

   .case .case__logo {
      position: absolute;
      left: auto;
      right: 25px;
      top: -1px;
      width: 200px;
      height: 97px;
   }

   .case--acko .case__logo {
      left: auto;
      right: 41px;
      top: 22px;
      width: 158px;
      height: 38px;
   }

   .case__brand {
      margin-top: 32px;
   }

   .case__goal {
      margin-top: 9px;
   }

   .case__headline {
      margin-top: 32px;
   }

   .case__headline--stack {
      margin-top: 24px;
   }

   .case .case__headline-sub {
      position: absolute;
      height: 56px;
      /* 24 + the 145.6px "1.5M" + the drawn 28 gap */
      left: 197.6px;
      top: 256px;
      flex-direction: column;
      gap: 0;
   }

   .case__list {
      width: auto;
      margin-top: 53px;
   }

   /* rule, 22, two lines of 28, 22 - a 100 row, four rules over 343 */
   .case__list li {
      padding: 22px 0;
      font-size: 20px;
      line-height: 28px;
   }

   .case__metrics {
      flex-direction: column;
      gap: 22px;
      margin-top: 24px;
   }

   .metric {
      width: 259px !important;
      max-width: 100%;
   }

   .metric--green {
      width: 215px !important;
   }

   .metric--lime {
      width: 260px !important;
   }

   /* the long Acko label wraps to two lines at the grey tile's width */
   .metric--wide {
      width: 259px !important;
   }

   .case--acko .case__metrics {
      margin-top: 32px;
   }

   .case__awards {
      margin-top: 48px;
   }

   /* the frame puts the photo below the copy on both cards, bled to the edge */
   .case .case__media>img {
      position: absolute;
   }

   .case__media {
      order: 2;
      margin: 20px 8px 0;
      border-radius: 48px;
      aspect-ratio: 365/448;
      height: auto;
   }

   /* Acko threads the photo between the benefit list and the awards, so its
     details has to dissolve into the card grid the same way Domino's does. */
   .case--acko .case__media--left {
      order: 2;
      margin: 60px 12px 0 4px;
      aspect-ratio: 365/452;
   }

   .case--acko .case__details {
      display: contents;
   }

   .case--acko {
      padding: 36px 0;
   }

   .case--acko .case__details>* {
      order: 1;
      margin-inline: 24px 14px;
   }

   /* the logo is absolute against the card; a margin would push it off */
   .case--acko .case__logo {
      margin-inline: 0;
   }

   .case--acko .case__awards {
      order: 3;
      margin-top: 32px;
   }

   .case--acko .case__headline--stack {
      margin-top: 35px;
   }

   /* The Domino's frame threads the photo between the headline and the metrics.
     They live in different parents, so details dissolves into the card grid and
     hands its padding to .case - sides as child margins, so .case keeps its
     width and the two absolutes (logo, headline-sub) keep their containing box. */
   .case--dominos .case__details {
      display: contents;
   }

   .case--dominos {
      padding: 36px 0 57px;
   }

   .case--dominos .case__details>* {
      order: 1;
      margin-inline: 24px;
   }

   .case--dominos .case__logo,
   .case--dominos .case__headline-sub {
      margin-inline: 0;
   }

   .case--dominos .case__metrics,
   .case--dominos .case__period {
      order: 3;
   }

   .case--dominos .case__awards {
      order: 4;
   }

   /* ---- 12 brand testimonials ----
     The card is the widest thing in the frame (365 at an 8 inset), so the
     section pads to 8 and everything else offsets off that. */
   .tst {
      margin-top: 96px;
      margin-inline: 6px;
      padding: 52px 8px 99px;
   }

   .tst__pill {
      position: static;
      margin-left: 32px;
   }

   .tst__stage {
      margin-top: 28px;
   }

   .tst__featured {
      position: relative;
      gap: 0;
      justify-items: center;
   }

   .tst__portrait {
      width: 214px;
      height: 272px;
   }

   .tst__badge {
      display: block;
      left: auto;
      right: 19px;
      top: 181px;
      width: 91px;
      height: 91px;
      z-index: 2;
   }

   .tst__card {
      padding: 0 13px 23px 14px;
      min-height: 0;
   }

   /* the brand logo stays on the partner line, flush right, at 113x54 */
   .tst__card-top {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 0;
      height: 54px;
   }

   .tst__brandlogo {
      width: 113px;
      height: 54px;
      object-fit: contain;
      object-position: right center;
   }

   .tst__quote {
      font-size: 18px;
      line-height: 28px;
      max-width: 315px;
      margin-top: 8px;
   }

   /* 88 under the quote, then the rule bled to the card edges */
   .tst__rule {
      margin: 68px -13px 0 0;
      width: calc(100% + 13px);
      max-width: none;
   }

   .tst__card-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
      margin-top: 20px;
   }

   /* Figma centres the pager and puts the counter between the two arrows */
   .tst__controls {
      align-self: center;
      justify-content: center;
      gap: 30px;
   }

   .tst__controls [data-tst-next] {
      order: 1;
   }

   /* 10 avatars on a 1236px row inside a 393 page: a strip, like the stats */
   .tst__nav {
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 8px;
      margin-top: 22px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x proximity;
      margin-inline: -8px;
      /* overflow-x makes this a scroll box in both axes, so the active ring
        (a 7px outline at 3.29px offset) needs room inside it, not above it */
      padding: 11px 12px;
      scrollbar-width: none;
   }

   .tst__nav::-webkit-scrollbar {
      display: none;
   }

   .tst__progress {
      width: min(360px, 100%);
      height: 1.16px;
      margin: 15px auto 0;
   }

   /* Figma widens the column to whatever the company label needs (154 at the
     widest) instead of wrapping it to four lines inside 84 */
   .tst__person {
      flex: 0 0 auto;
      width: auto;
      min-width: 84px;
      scroll-snap-align: center;
   }

   .tst__person-co {
      width: max-content;
      max-width: 154px;
   }

   /* Figma: a 244x72 lime over a 234x40 WhatsApp, 16 apart, in a 246 column */
   .tst__ctas {
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 246px;
      margin: 43px auto 0;
      padding-right: 0;
   }

   .tst__ctas .btn {
      justify-content: center;
      width: 244px;
      height: 72px;
   }

   .tst__ctas .btn--whatsapp {
      width: 234px;
      height: 40px;
   }

   /* ---- 13 creator value proposition. Not in the mobile frame. ---- */
   .cvp {
      display: none;
   }

   /* ---- 14 what creators say ---- */
   .ctst {
      height: auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      margin: 96px 6px 0;
      padding: 52px 14px 64px;
      border-radius: 60px;
   }

   .ctst__header {
      position: static;
      left: auto;
      right: auto;
      top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding: 0 15px;
   }

   .ctst__controls {
      padding: 5px 8px 5px 12px;
      gap: 8px;
   }

   .ctst__track {
      position: relative;
      height: auto;
   }

   .ctst__slide {
      position: relative;
      inset: auto;
      display: none;
      transform: none;
      opacity: 1;
      visibility: visible;
   }

   .ctst__slide.is-active {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
   }

   .ctst__photo {
      position: static;
      left: auto;
      top: auto;
      width: 238px;
      height: 289px;
      max-width: 100%;
      border-radius: 54px;
   }

   .ctst__photo--food {
      order: 1;
      margin: 0 0 0 15px;
   }

   .ctst__quote {
      position: relative;
      left: auto;
      top: auto;
      right: auto;
      bottom: auto;
      min-height: 0;
      box-sizing: border-box;
   }

   .ctst__quote--dark {
      order: 2;
      z-index: 2;
      width: 100%;
      max-width: 480px;
      margin: -41px 0 0 0;
      padding: 28px 24px;
      border-radius: 48px;
   }

   .ctst__photo--lifestyle {
      order: 3;
      margin: 44px 0 0 15px;
      border-radius: 48px;
   }

   .ctst__quote--light {
      order: 4;
      z-index: 2;
      width: calc(100% - 15px);
      max-width: 480px;
      margin: -31px 0 0 15px;
      padding: 28px 24px;
      border-radius: 48px;
   }

   .ctst__quote .t-quote {
      font-size: 18px;
      line-height: 28px;
   }

   .ctst__quote figcaption {
      font-size: 15px;
      line-height: 22px;
      margin-top: 12px;
   }

   .ctst__meta {
      white-space: nowrap;
   }

   /* ---- 15 awards. The frame drops the trophy panel and the press row; the
     press logos are content, so they stay — see the README. ---- */
   .awards {
      margin-top: 36px;
      padding: 52px 14px 0;
   }

   .awards__title {
      margin-top: 28px;
      max-width: none;
   }

   /* the mobile frame has no rule between the heading and the lead */
   .awards__rule {
      display: none;
   }

   .awards__lead {
      margin-top: 35px;
      max-width: 303px;
      font-size: 16px;
      line-height: 24px;
   }

   .awards__visual {
      display: none;
   }

   /* the card list is inset 47, not centred */
   .award {
      width: 276px;
      max-width: calc(100% - 33px);
      margin: 60px 0 0 33px;
   }

   .award+.award {
      margin-top: 32px;
   }

   .press {
      display: none;
   }

   .press__logos {
      justify-content: flex-start;
      gap: 20px 24px;
   }

   /* ---- 16 FAQ ---- */
   .faq {
      margin-top: 72px;
      padding: 52px 14px 52px;
   }

   .faq__title {
      margin-top: 51px;
      max-width: none;
   }

   .faq__grid {
      grid-template-columns: 1fr;
      gap: 40px;
      margin-top: 52px;
   }

   /* the mobile frame separates the items with the 40 gap alone */
   .faq__item--ruled {
      padding-top: 0;
      border-top: 0;
   }

   /* the question column is 238.5, the answer runs the full 354 */
   .faq__q {
      max-width: 238.5px;
   }

   .faq__a {
      font-size: 20px;
      line-height: 28px;
   }

   /* the hard breaks are desktop column shapes; the mobile answer runs full */
   .faq__a br {
      display: none;
   }

   /* ---- 17 closing ---- */
   .closing {
      margin-top: 72px;
      padding: 52px 14px 34px;
      text-align: left;
   }

   .closing__title {
      max-width: none;
   }

   /* the accent disc overlaps the card instead of indenting it, so the inner
     panel runs the full 357 and only drops 21.2 for the disc */
   .closing__card {
      margin: 36px 0 0 -4px;
      max-width: none;
      width: 357px;
      padding: 21.2px 0 0;
   }

   .closing__card-inner {
      padding: 31.45px 18.35px 0 24.97px;
      border-radius: 33.3px;
      height: 293.18px;
   }

   /* the card is one scaled component in the frame: 22.2/29.6 bold title,
     16.6/25.9 body, 18.5/25.9 contact lines, 33.3 radius */
   .closing__card-title {
      font-size: 22.2px;
      line-height: 29.6px;
   }

   .closing__card-rule {
      margin-top: 10.65px;
      width: 306px;
   }

   .closing__card-text {
      margin-top: 11.1px;
      font-size: 16.65px;
      line-height: 25.9px;
      max-width: 311.68px;
   }

   .closing__contact {
      font-size: 18.5px;
      line-height: 25.9px;
      margin-top: 7.4px;
   }

   .closing__card-text+.closing__contact {
      margin-top: 33.1px;
   }

   .closing__ctas {
      flex-direction: column;
      align-items: center;
      gap: 24px;
      margin-top: 45px;
   }

   .closing__ctas .btn {
      justify-content: center;
      width: 244px;
   }

   .closing__ctas .btn--whatsapp {
      width: 234px;
      height: 40px;
   }

   .closing__outline {
      height: auto;
      width: min(357px, 100%);
      margin: 78px 0 0 -2px;
   }

   /* the label needs two lines in a 320px column; the pill is a CSS
     border-radius, so it grows with the text instead of the text breaking
     out of a fixed 70px box */
   .closing__outline-text {
      height: auto;
      min-height: 72px;
      padding: 14px 20px;
      flex-wrap: wrap;
   }

   /* ---- 18 footer ---- */
   /* grid so the logo can hop the nav and land on top of the socials; the
     single column keeps every block full width, and the logo keeps its drawn
     177.5px because stretch only applies to an auto cross size */
   .footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      margin: 72px 6px 0;
      padding: 72px 14px 41px;
   }

   /* Figma puts the tagline under the wordmark, not under the statement */
   .footer__logo {
      order: 1;
   }

   .footer__tag {
      order: 2;
   }

   /* the rule sits above the socials in the frame, not below them */
   .footer__divider {
      order: 3;
   }

   .footer__social {
      order: 4;
   }

   .footer__fine {
      order: 5;
   }

   .footer__title {
      max-width: none;
   }

   .footer__title-mark::before {
      left: -7px;
      right: -13px;
      height: 60px;
      border-radius: 36.34px;
   }

   .footer__nav {
      margin-top: 86px;
   }

   .footer__nav-cols {
      flex-direction: column;
      gap: 24px;
      margin-top: 30px;
   }

   .footer__nav-col {
      gap: 24px;
   }

   /* 34 line box on a 58 pitch, seven links over 382 */
   .footer__nav-col a {
      line-height: 34px;
   }

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

   /* the wordmark is centred in a 64.56 box, not cropped to its own 42.7 */
   .footer__logo {
      height: 64.56px;
      object-fit: contain;
      object-position: left center;
      margin-top: 73px;
   }

   .footer__tag {
      margin-top: 9px;
   }

   .footer__social {
      margin-top: 38.8px;
   }

   .footer__social-list {
      flex-direction: column;
      align-items: flex-start;
      gap: 19px;
      margin-top: 15px;
   }

   .footer__divider {
      margin-top: 46.6px;
   }

   /* the mobile comp stacks them, so the one-row wrapper stands down */
   .footer__fine {
      display: block;
      margin-top: 0;
   }

   .footer__legal {
      margin-top: 186px;
      max-width: 219px;
   }

   .footer__copy {
      margin-top: 40px;
   }

   /* the mobile frame ends 37 under the footer card, not 80 */
   body {
      padding-bottom: 37px;
   }
}

/* Two 276px cards plus the 24px gutter stop fitting just under 620px; from
   there down they are a single column, and inline-block ignores the auto
   margins that were meant to centre them. */
@media (max-width: 619px) {
   .award {
      display: block;
   }
}

@media (max-width: 576px) {

   .howpay__title,
   .howpay__aside {
      max-width: 303px;
   }
}

/* ---- 425 frame ---- */
@media (max-width: 425px) {
   .stats__caption {
      padding: 0 21px;
   }

   .problem__intro-right {
      display: none;
   }

}

/* Below 393 there is no comp. The two px-fixed drawings - the hero funnel and
   the About preview - now ride the cqw ramp in the 699 block, so only the type
   the column can no longer hold is re-set here. */
@media (max-width: 392px) {
   .case__headline--stack {
      font-size: 50px;
      line-height: 64px;
   }
}

@media (max-width: 340px) {
   .case__headline--stack {
      font-size: 44px;
      line-height: 56px;
   }
}

/* ---- below the 393 frame: the column gives up its fixed widths ----
   CX-004/010/014: this used to start at 392, so a 390 phone - the width the
   frame is actually drawn for, give or take 3px - lost every fixed width the
   design sets. It now starts below 375, the narrowest phone still in the
   reference set. ---- */
@media (max-width: 374px) {
   /* the 3-up logo grid is three fixed crop windows - 287.4 plus gaps needs a
      343 column, and below 375 there is not one. Scale the row rather than
      crop the logos; space-between still spreads it to the full width. */
   .trust__logos.mk-marquee__track {
      zoom: .79;
   }

   .howpay {
      padding-inline: 20px;
   }

   .howpay__title,
   .howpay__aside,
   .howpay__chips {
      max-width: none;
   }

   /* no width left for the nowrap label beside the icon */
   .cta-strip .btn {
      white-space: normal;
      height: auto;
      padding: 14px 20px;
   }

   .case__logo {
      right: 8px;
      width: 150px;
      height: 73px;
   }

   .metric,
   .metric--green,
   .metric--lime {
      width: 100% !important;
   }

   .closing__card {
      width: 100%;
   }

}

/* ==========================================================================
   Motion — project layer. The generic half is css/motion.css, vendored from
   DWS/in-house/motion-kit; selectors that name CollabX components live here.
   ========================================================================== */
html {
   scroll-behavior: smooth;
}

.mk-marquee {
   --mk-fade: var(--page);
   --mk-marquee-dur: 38s;
}

.trust__logo img {
   transition: transform .3s var(--mk-ease);
}

.trust__logo:hover img {
   transform: scale(1.07);
}

.btn,
.social,
.step,
.vcard,
.metric,
.stat,
.press__logos img,
.tst__person-ring {
   transition: transform .28s var(--mk-ease), box-shadow .28s var(--mk-ease), opacity .28s ease, background-color .2s ease, color .2s ease;
}

.btn:hover {
   transform: translateY(-2px);
}

.btn:active {
   transform: translateY(0);
}

.btn--lime:hover,
.btn--dark:hover {
   box-shadow: 0 10px 26px rgb(11 18 14 / .22);
}

.step:hover,
.vcard:hover {
   transform: translateY(-4px);
}

.metric:hover {
   transform: translateY(-3px);
}

.stat:hover {
   transform: translateY(-6px);
}

.press__logos li:hover img {
   transform: scale(1.05);
}

.tst__person:hover .tst__person-ring {
   transform: scale(1.08);
}

.site-nav__list a {
   transition: color .2s ease;
}

.btn__icon,
.social__arrow {
   transition: transform .28s var(--mk-ease);
}

.btn:hover .btn__icon {
   transform: translateX(3px);
}

.social:hover .social__arrow {
   transform: translate(3px, -50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   .btn,
   .social,
   .step,
   .vcard,
   .metric,
   .stat,
   .press__logos img,
   .tst__person-ring,
   .btn__icon,
   .social__arrow,
   .trust__logo img {
      transition: none;
   }

   .btn:hover,
   .step:hover,
   .vcard:hover,
   .metric:hover,
   .stat:hover {
      transform: none;
   }
}

/* CX-008: the caption keeps its designed spot beside 25L down to the width
   where 169 + its own ~107 no longer fits the column; only there does it
   rejoin the flow, taking the same inset as its siblings. */
@media (max-width: 340px) {
   .case .case__headline-sub {
      position: static;
      height: auto;
      justify-content: flex-start;
      flex-direction: row;
      gap: 8px;
      margin-top: 8px;
   }

   .case--dominos .case__headline-sub {
      margin-inline: 24px;
   }
}

/* HR-13: Figma draws the desktop logo row static and unfaded. All eight need
   1238px of the 1440 layout; from 1024 the hero is that layout zoomed (D2),
   so the row stays static there too. Narrower, the marquee carries on. */
@media (min-width: 1024px) {
   .trust .mk-marquee {
      overflow: visible;
   }

   .trust .mk-marquee::before,
   .trust .mk-marquee::after {
      display: none;
   }

   .trust__logos.mk-marquee__track {
      width: auto;
      animation: none;
      transform: none;
   }

   .trust__logos [aria-hidden="true"] {
      display: none;
   }
}

/* Pixel-audit nudges (1 Oct 2026) are 1440-frame corrections. Below it these
   blocks are fluid or centred, so a fixed offset would only push them off-centre. */
@media (max-width: 1439px) {
   .stats,
   .problem__title,
   .cvp,
   .awards__title,
   .tst__ctas .btn--whatsapp,
   .closing__ctas .btn--whatsapp,
   .closing__outline-text {
      left: 0;
   }

   .engine__core {
      left: 0;
      top: 0;
   }

   .cvp__rule,
   .cvp__lead {
      margin-left: 0;
   }
}

/* Verification round (1 Oct 2026): more 1440-frame shapes */
@media (min-width: 1440px) {
   .vcard--brands {
      left: -2px;
   }

   /* Figma spaces a one-line benefit 48px from the next, a two-line one 80px;
     at 1440 only the creators' second item is one line */
   .vcard--creators .vcard__list li:nth-child(3) {
      margin-top: -4px;
   }
}

@media (max-width: 1439px) {
   .awards__rule {
      margin-left: 0;
   }
}

/* D2 laptop (Figma 2314:20): between 1024 and 1439 the header and hero are the
   1440 desktop composition scaled to the viewport (the frame is the desktop
   at .823), not the stacked tablet layout. Zoom scales the layout box, so the
   desktop's absolute geometry holds unchanged. Where calc() cannot divide
   lengths (Firefox) the declaration is dropped and the steps below apply,
   each the floor of its band so nothing overflows. */
@media (min-width: 1024px) and (max-width: 1439px) {
   .site-header,
   .hero {
      zoom: .711;
      zoom: calc(100vw / 1440px);
   }

   /* the 1297 band shrinks every button page-wide; header and hero keep the
     desktop sizes because they are zoomed instead */
   .site-header .btn__icon,
   .hero .btn__icon {
      width: 40px;
      height: 40px;
   }

   .site-header .btn--dark-sm {
      height: 60px;
      font-size: 20px;
   }

   .hero .btn--dark,
   .hero .btn--ghost {
      height: 72px;
   }

   .hero .btn--ghost {
      padding-inline: var(--button-padding-inline);
   }
}

@supports not (zoom: calc(100vw / 1440px)) {
   @media (min-width: 1100px) and (max-width: 1439px) {
      .site-header, .hero { zoom: .763; }
   }
   @media (min-width: 1200px) and (max-width: 1439px) {
      .site-header, .hero { zoom: .833; }
   }
   @media (min-width: 1300px) and (max-width: 1439px) {
      .site-header, .hero { zoom: .902; }
   }
   @media (min-width: 1400px) and (max-width: 1439px) {
      .site-header, .hero { zoom: .972; }
   }
}

/* Mobile frame 2181:109 re-check (8 Oct). Kept last so it wins over the
   1297 band and the desktop rules that leaked into the phone layout. */
@media (max-width: 699px) {
   /* the 1297 band's 30px icons; every phone button draws a 40 icon */
   .btn__icon {
      width: 40px;
      height: 40px;
   }

   /* 2189:1753: all four step copies are #050504 18/28 in a 254/299/299
     box; the desktop grey (HW-3) and the 248 step-03 column (HW-4) are 1440
     corrections that leaked here */
   .step--1 .step__text,
   .step--2 .step__text,
   .step--3 .step__text {
      color: #050504;
   }

   .step--3 .step__text {
      width: auto;
   }

   /* lime card: line 2 sits 6.116 under line 1 (36.1 pitch) */
   .about__positioning-line2 {
      margin-top: 6px;
   }

   /* the logo fill is 174x38.8 at (168.9, 27.8) of the 381 card */
   .case--dominos .case__logo {
      right: 38px;
      top: 28px;
      width: 174px;
      height: 39px;
   }

   /* 683.8x456.2 fill, right-aligned, 6.3 above the 365x448 frame */
   .case--dominos .case__media > img {
      transform-origin: 100% 0;
      transform: translateY(-6.3px) scale(1.0176);
   }

   /* text boxes 307 / 280 inside the 343 rules, which stay full width; the
      third bullet's copy changed (2026-10-16), so it takes the full width */
   .case--acko .case__list li:nth-child(1) { padding-right: 36px; }
   .case--acko .case__list li:nth-child(2) { padding-right: 63px; }

   /* ring centres at 41.6 + n x 128.1: 84 columns 44.1 apart; a wide company
     label overhangs its column centred, as Figma draws it, instead of
     widening the column and pushing the rest along */
   .tst__nav {
      gap: 44.1px;
      margin-top: 27px;
   }

   .tst__progress {
      margin-top: 7px;
   }

   .tst__person {
      flex: 0 0 84px;
      width: 84px;
   }

   /* 357 wide from x12 (2px past the 353 column each side), 70 tall */
   .closing__outline {
      width: calc(100% + 4px);
   }

   .closing__outline-text {
      min-height: 66px;
   }
}

/* A2 Book a demo: full-screen on phones, one field per row (no Figma mobile
   frame; follows the client brief). */
@media (max-width: 699px) {
  .demo {
    width: 100%;
    height: 100dvh;
    max-height: none;
    background: #000;
  }

  .demo .cstory__close {
    position: absolute;
    top: 16px;
    right: 16px;
    margin: 0;
    z-index: 1;
  }

  .demo__card {
    min-height: 100%;
    padding: 64px 16px 32px;
    border: 0;
    border-radius: 0;
  }

  .demo__title { font-size: 24px; }

  .demo__sub {
    line-height: 1.5;
  }

  .demo__sub i { padding-inline: 3px; }

  .demo__done {
    min-height: 0;
    padding-top: 96px;
  }

  .demo__thanks { font-size: 52px; }

  .demo__done .demo__btn {
    height: auto;
    min-height: 52px;
    padding-block: 12px;
    white-space: normal;
    text-align: left;
    text-wrap: balance;
  }
}