/* =========================================================================
   partner.css: /partner, the one page for restaurants (rebuilt 22 Oct 2026
   from the app's own pitch, put in the homepage's look the next night, and
   made lighter on 23 Oct: one idea a section, shown more than said). Layout
   only, like every page sheet: colours, type sizes and corners are site.css
   tokens (PublicDesignGuardTest), the shared pieces are site.css classes in
   the markup, and home.css brings the homepage's own parts: the hero and its
   wall of the partners' photos, the drawn phone, the deal tickets, the phone
   that plays the app and the rise into place. pages.css still draws the plan
   cards and the Boost row (#pricing), which the pricing tests pin; this sheet
   lays them out and restyles them here only (/prices keeps pages.css's own).

   Motion, below the fold only and once: a section rises into place, the
   day's bars grow and the deal's hours light up, the phone lifts out of its
   card and the partners' names arrive one after another. Reduced motion stops all of it (home.js never adds
   .js-motion then, and the block at the end holds anything left).
   Breakpoints: 480, 768, 1024 only.
   ========================================================================= */

.pxv__inner,
.pxm__inner,
.pxr__inner,
.pxg__inner,
.pxp__inner {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------ hero */

/* Its own, not the homepage's (23 Oct 2026): the words on one side and the
   partner film on the other (26 Oct), on the page's own black, with no panel
   round them, so the film's black is the page's and it blends in. */
.pxh {
  padding-block: var(--space-16) var(--space-24);
}

.pxh__inner {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pxh__panel {
  position: relative;
  display: grid;
  gap: var(--space-32);
  padding-top: var(--space-16);
}

.pxh__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.pxh__kicker {
  margin: 0 0 var(--space-16);
  background: var(--raised);
}

.pxh__title {
  margin: 0 0 var(--space-24);
}

.pxh__line {
  display: block;
}

/* "empty" on the green mark, black on green like the deal ticket. */
.pxh__mark {
  display: inline-block;
  padding: 0 var(--space-8) var(--space-4);
  border-radius: var(--radius-thumb);
  background: var(--green);
  color: var(--on-green);
  transform: rotate(-2deg);
}

.pxh__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* The partner film, where an owner's day was drawn until 26 Oct 2026: its
   own 9:16 frame, a poster and one button until it is asked for, then the
   browser's controls (the script at the page's foot). */
.pxh__stage {
  display: grid;
  place-items: center;
  padding-bottom: var(--space-32);
}

.pxf {
  width: min(280px, 100%);
  margin: 0;
}

.pxf__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--canvas);
}

.pxf__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--canvas);
}

/* The poster's one button is the whole frame: the green disc and the words
   at its foot, over a scrim so they read on any frame. */
.pxf__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-16);
  border: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.pxf__play[hidden] {
  display: none;
}

.pxf__disc {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--on-green);
  transition: transform var(--dur-fast) var(--ease-enter), background-color var(--dur-fast) var(--ease-enter);
}

.pxf__play:hover .pxf__disc,
.pxf__play:focus-visible .pxf__disc {
  background: var(--green-press);
  transform: scale(1.06);
}

.pxf__play:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -4px;
}

.pxf__label {
  display: grid;
  gap: 2px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.pxf__label small {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-2);
}

/* Playing muted by itself: the button is a small disc and its words at the
   film's foot, with no scrim over the picture. */
.pxf.is-auto .pxf__play {
  padding-bottom: var(--space-16);
  background: none;
}

.pxf.is-auto .pxf__disc {
  width: 44px;
  height: 44px;
}

.pxf.is-auto .pxf__disc svg {
  width: 22px;
  height: 22px;
}

.pxf.is-auto .pxf__label {
  padding: var(--space-8) 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
  .pxh__stage {
    padding-bottom: var(--space-48);
  }

  .pxf {
    width: 300px;
  }
}

@media (min-width: 1024px) {
  .pxh {
    padding-block: var(--space-24) var(--space-32);
  }

  .pxh__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: center;
    min-height: min(640px, calc(100vh - var(--header-h) - var(--space-48)));
    padding: 0;
  }

  .pxh__stage {
    padding: 0 var(--space-48);
  }

  .pxf {
    width: min(320px, 100%);
  }
}

/* ------------------------------------------- what BiteOut does for you */

.pxv,
.pxm {
  padding-block: var(--space-48);
}

.pxv__title,
.pxm__title {
  margin: 0 0 var(--space-24);
}

.pxv__cards,
.pxm__cards {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pxv__card,
.pxm__card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-12) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* Each card's picture: a grey panel the drawing sits in. */
.pxv__art,
.pxm__art {
  position: relative;
  height: 208px;
  margin-bottom: var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-field);
  background: var(--raised);
}

.pxv__name,
.pxm__name {
  margin: 0;
  padding-inline: var(--space-8);
  font-size: var(--fs-headline);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.pxv__text,
.pxm__text {
  margin: 0;
  padding-inline: var(--space-8);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-2);
}

/* Diners find you: the app's own Home, on a phone rising out of the panel. */
.pxv__art--find {
  display: grid;
  justify-items: center;
}

.pxv__phone {
  width: 172px;
  margin-top: var(--space-24);
  transition: transform var(--dur-slow) var(--ease-enter);
}

.pxv__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pxv__card:hover .pxv__phone {
  transform: translateY(calc(var(--space-12) * -1));
}

/* In your quiet hours: a day's rush and lull from 11 AM to 10 PM, drawn (a
   bar an hour), with the hours a deal runs in green under "Your deal". The
   band is laid on the bars' own twelve columns (six pixel gaps). */
.pxv__bars {
  position: absolute;
  top: 60px;
  right: var(--space-16);
  bottom: 34px;
  left: var(--space-16);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.pxv__bars i {
  display: block;
  height: var(--h);
  border-radius: var(--radius-thumb) var(--radius-thumb) 0 0;
  background: var(--line-strong);
  transform-origin: bottom;
}

.pxv__bars i.is-quiet {
  background: var(--green);
}

.pxv__band {
  position: absolute;
  top: var(--space-12);
  bottom: 30px;
  left: calc(var(--space-16) - 3px + (100% - 2 * var(--space-16) + 6px) * var(--from) / 12);
  width: calc((100% - 2 * var(--space-16) + 6px) * var(--span) / 12);
  border-radius: var(--radius-thumb);
  background: var(--green-tint);
}

.pxv__band-pill {
  position: absolute;
  top: var(--space-8);
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}

.pxv__clock {
  position: absolute;
  right: var(--space-16);
  bottom: var(--space-8);
  left: var(--space-16);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-3);
}

/* No commission: the figure itself, on the deal ticket's green. */
.pxv__art--zero {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-12);
}

.pxv__zero {
  padding: var(--space-8) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--green);
  color: var(--on-green);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  transform: rotate(-3deg);
}

.pxv__zero-of {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-2);
}

/* As the cards arrive: the bars grow one hour after another, then the
   deal's hours light up; the phone lifts; the figure lands. */
html.js-motion .pxv__card[data-reveal] .pxv__bars i {
  transform: scaleY(0.08);
  transition: transform var(--dur-slow) var(--ease-enter) calc(var(--d, 0ms) + 200ms + var(--i, 0) * 45ms);
}

html.js-motion .pxv__card[data-reveal] .pxv__band {
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: bottom;
  transition:
    opacity var(--dur-slow) var(--ease-enter) calc(var(--d, 0ms) + 800ms),
    transform var(--dur-slow) var(--ease-enter) calc(var(--d, 0ms) + 800ms);
}

html.js-motion .pxv__card[data-reveal] .pxv__phone {
  transform: translateY(var(--space-48));
  transition: transform 700ms var(--ease-enter) calc(var(--d, 0ms) + 150ms);
}

html.js-motion .pxv__card[data-reveal] .pxv__zero {
  opacity: 0;
  transform: rotate(-3deg) scale(1.25);
  transition:
    opacity var(--dur-med) var(--ease-enter) calc(var(--d, 0ms) + 300ms),
    transform var(--dur-slow) var(--ease-enter) calc(var(--d, 0ms) + 300ms);
}

html.js-motion .pxv__card[data-reveal].is-in .pxv__bars i,
html.js-motion .pxv__card[data-reveal].is-in .pxv__band,
html.js-motion .pxv__card[data-reveal].is-in .pxv__phone {
  opacity: 1;
  transform: none;
}

html.js-motion .pxv__card[data-reveal].is-in .pxv__zero {
  opacity: 1;
  transform: rotate(-3deg);
}

html.js-motion .pxv__card[data-reveal].is-in:hover .pxv__phone {
  transform: translateY(calc(var(--space-12) * -1));
  transition-delay: 0ms;
}

@media (min-width: 768px) {
  .pxv__cards,
  .pxm__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pxv {
    padding-block: calc(var(--space-32) * 2) var(--space-24);
  }

  .pxm {
    padding-block: var(--space-24) var(--space-48);
  }

  .pxv__art,
  .pxm__art {
    height: 232px;
  }

  .pxv__phone {
    width: 196px;
  }
}

/* --------------------------------------------------- we do your marketing */

/* A platform's own mark (partials/brand), never resized out of shape. */
.bo-brand {
  display: block;
  flex: none;
}

.pxm__logos {
  display: flex;
  gap: var(--space-8);
  margin: 0 var(--space-8) var(--space-8);
}

/* Found on Google: a search, and the page it finds. */
.pxm__art--google {
  display: grid;
  align-content: center;
  gap: var(--space-12);
  padding: var(--space-16);
}

.pxm__search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 40px;
  padding: 0 var(--space-12) 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--line);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text);
}

.pxm__query {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pxm__lens {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-2);
}

.pxm__result {
  display: grid;
  gap: 2px;
  padding: var(--space-12);
  border-radius: var(--radius-field);
  background: var(--canvas);
}

.pxm__url {
  overflow: hidden;
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-3);
}

.pxm__result-title {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.pxm__stars {
  font-size: var(--fs-caption);
  letter-spacing: 1px;
  color: var(--promo);
}

.pxm__snippet {
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
}

/* Reels about you: a Reel of a partner's own photo, playing. */
.pxm__art--reel {
  display: grid;
  place-items: center;
}

.pxm__reel {
  position: relative;
  display: grid;
  width: 116px;
  aspect-ratio: 9 / 16;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-field);
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.pxm__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pxm__play {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--text);
}

.pxm__play svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}

.pxm__reel-bar {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  left: var(--space-8);
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.3);
}

.pxm__reel-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--text);
  transform: scaleX(0.35);
  transform-origin: left;
}

/* Ads on Facebook and Instagram: a sponsored post of a partner's photo. */
.pxm__art--ad {
  display: grid;
  place-items: center;
}

.pxm__ad {
  display: grid;
  width: 152px;
  overflow: hidden;
  border-radius: var(--radius-field);
  background: var(--canvas);
  box-shadow: 0 0 0 1px var(--line);
}

.pxm__ad-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-8);
}

.pxm__ad-logo {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.pxm__ad-who {
  display: grid;
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
}

.pxm__ad-who small {
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-3);
}

.pxm__ad-pic {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--line);
}

.pxm__ad-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px var(--space-8);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
}

/* As they arrive: the search types itself and its page comes up under it;
   the Reel plays; the ad floats. */
html.js-motion .pxm__card[data-reveal] .pxm__query {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1100ms steps(23, end) calc(var(--d, 0ms) + 300ms);
}

html.js-motion .pxm__card[data-reveal] .pxm__result {
  opacity: 0;
  transform: translateY(var(--space-12));
  transition:
    opacity var(--dur-slow) var(--ease-enter) calc(var(--d, 0ms) + 1500ms),
    transform var(--dur-slow) var(--ease-enter) calc(var(--d, 0ms) + 1500ms);
}

html.js-motion .pxm__card[data-reveal].is-in .pxm__query {
  clip-path: inset(0 0 0 0);
}

html.js-motion .pxm__card[data-reveal].is-in .pxm__result {
  opacity: 1;
  transform: none;
}

html.js-motion .pxm__reel-bar i {
  animation: pxm-play 6s linear infinite;
}

html.js-motion .pxm__reel .pxm__photo {
  animation: pxm-zoom 6s ease-in-out infinite alternate;
}

html.js-motion .pxm__ad {
  animation: pxm-float 4.5s ease-in-out infinite alternate;
}

@keyframes pxm-play {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes pxm-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

@keyframes pxm-float {
  from {
    transform: translateY(var(--space-4));
  }

  to {
    transform: translateY(calc(var(--space-4) * -1));
  }
}

/* ---------------------------------------------------- the deals, used */

/* Under the tickets: how a guest uses one, in three numbered lines. */
.pxd__flow {
  display: grid;
  gap: var(--space-12);
  margin: var(--space-24) 0 0;
  padding: 0;
  list-style: none;
}

.pxd__step {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.pxd__step .bo-step-n {
  flex: none;
}

@media (min-width: 768px) {
  .pxd__flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
    margin-top: var(--space-32);
  }
}

/* -------------------------------------------- the app, screen by screen */

.pxr {
  padding-block: var(--space-48);
}

.pxr__title {
  margin: 0;
}

.pxr__lede {
  margin: var(--space-8) 0 0;
}

/* The app tour under the heading (26 Oct 2026): the hero film's frame and
   button (.pxf), below the words on a phone, beside them on a computer. */
.pxr__film {
  margin-top: var(--space-24);
}

/* Six of the app's screens, each under what it does: a row that scrolls
   sideways on a phone, and stands staggered across the page on a computer. */
.pxr__screens {
  display: flex;
  gap: var(--space-16);
  margin: var(--space-32) 0 0;
  padding: 0 var(--gutter) var(--space-16);
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.pxr__screen {
  display: grid;
  flex: none;
  justify-items: center;
  gap: var(--space-12);
  width: min(56vw, 220px);
  scroll-snap-align: start;
}

.pxr__phone {
  width: 100%;
  transition: transform var(--dur-slow) var(--ease-enter);
}

.pxr__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pxr__name {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.pxr__screen:hover .pxr__phone {
  transform: translateY(calc(var(--space-8) * -1));
}

@media (min-width: 1024px) {
  .pxr {
    padding-block: calc(var(--space-32) * 2);
  }

  .pxr__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-48);
    align-items: center;
  }

  .pxr__film {
    margin-top: 0;
  }

  .pxr__screens {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-24);
    width: 100%;
    max-width: calc(var(--max-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 0 var(--gutter);
    overflow: visible;
  }

  .pxr__screen {
    width: auto;
  }

  .pxr__screen:nth-child(even) {
    margin-top: var(--space-48);
  }
}

/* --------------------------------------------------- you're in good hands */

.pxg {
  padding-block: var(--space-48);
}

.pxg__head {
  max-width: 760px;
}

.pxg__title {
  margin: 0;
  font-size: var(--fs-hero-phone);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.pxg__lede {
  margin: var(--space-12) 0 0;
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-2);
}

.pxg__num {
  color: var(--text);
  font-weight: 800;
}

/* The places, by name, gliding past in rows the width of the page (the
   homepage's .vx__row loop): a chip each with its photo, a link to its page. */
.pxg__rows {
  margin-top: var(--space-32);
}

.pxg__track {
  gap: var(--space-8);
}

html.js-motion .pxg__track {
  animation-name: pxg-glide;
}

@keyframes pxg-glide {
  to {
    transform: translateX(calc(-50% - var(--space-8) / 2));
  }
}

.pxg__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 48px;
  padding: var(--space-4) var(--space-16) var(--space-4) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-enter),
    border-color var(--dur-fast) var(--ease-enter);
}

.pxg__chip:hover,
.pxg__chip:focus-visible {
  border-color: var(--line-strong);
  background: var(--raised);
  color: var(--text);
  text-decoration: none;
}

.pxg__img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .pxg__title {
    font-size: var(--fs-hero);
  }
}

@media (min-width: 1024px) {
  .pxg {
    padding-block: calc(var(--space-32) * 2);
  }
}

/* ------------------------------------------------------------ the plans */

/* pages.css draws the cards (and /prices keeps them as it has them); here
   they are wider, the price is the loudest thing on each, the estimate sits
   in its own grey panel with a mark for each booking, the three highlights
   carry the plan, and the rest folds under them. */
.pxp {
  padding-block: var(--space-48);
}

.pxp__head {
  max-width: 680px;
  margin-bottom: var(--space-24);
}

.pxp__head .bo-section-heading {
  margin-top: 0;
}

.pxp .pricing__plans {
  max-width: none;
  gap: var(--space-12);
  align-items: stretch;
}

.pxp__card {
  padding: var(--space-20);
  border: 1px solid var(--line);
}

.pxp__top {
  margin-bottom: var(--space-16);
}

.pxp .pricing__card-title {
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.pxp__summary {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-2);
}

/* The price on one line, the figure first. */
.pxp .pricing__price-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  text-align: left;
}

.pxp .pricing__price-figure {
  font-size: var(--fs-hero-phone);
  letter-spacing: -0.03em;
}

.pxp .pricing__price-unit {
  font-size: var(--fs-body);
}

.pxp .pricing__billed {
  margin: var(--space-8) 0 0;
}

.pxp .pricing__plans .pricing__billed {
  min-height: 0;
}

.pxp .pricing__cta {
  margin: var(--space-20) 0;
}

.pxp__estimate {
  padding: var(--space-16);
  border-radius: var(--radius-field);
  background: var(--raised);
}

.pxp__highlights {
  display: grid;
  gap: var(--space-12);
  margin: var(--space-20) 0 0;
  padding: 0;
  list-style: none;
}

.pxp__highlight {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.pxp__hl-ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--text-2);
}

/* A platform's own marks in place of a row's icon, or after a creator's
   film: the platforms it goes on. */
.pxp__brands {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
}

.pxp__brands--trail {
  margin-left: calc(var(--space-4) * -1);
}

.pxp .check-list .bo-brand {
  width: 16px;
  height: 16px;
  margin: 0;
}

.pxp .check-list .pxp__brands {
  margin-top: 4px;
}

/* Everything the plan includes, folded: the app's own rows. */
.pxp__more {
  margin-top: auto;
  padding-top: var(--space-20);
}

.pxp__more-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 44px;
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.pxp__more-q::-webkit-details-marker {
  display: none;
}

.pxp__more-q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: var(--space-4);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-med) var(--ease-enter);
}

.pxp__more[open] .pxp__more-q::after {
  transform: translateY(2px) rotate(-135deg);
}

.pxp__more .pricing__features {
  margin: var(--space-8) 0 var(--space-4);
}

.pxp__more .check-list li {
  font-size: var(--fs-caption);
}

/* The Boost: a week on top of either plan, so an add-on, not a third card. */
.pxp .pricing__boost {
  max-width: none;
  margin-top: var(--space-12);
}

.pxp__boost-card {
  display: grid;
  gap: var(--space-16);
  padding: var(--space-20);
  border: 1px dashed var(--line-strong);
}

.pxp__boost-main .pricing__boost-head {
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.pxp .pricing__boost-price {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-8);
  text-align: left;
}

.pxp__boost-main .pricing__billed {
  margin: 0;
}

.pxp__boost-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pxp__boost-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--raised);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.pxp__boost-item .pxp__hl-ico {
  width: 18px;
  height: 18px;
}

.pxp__fine {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-3);
}

@media (min-width: 768px) {
  .pxp .pricing__plans {
    gap: var(--space-16);
  }

  .pxp__card,
  .pxp__boost-card {
    padding: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .pxp {
    padding-block: calc(var(--space-32) * 2);
  }

  .pxp .pricing__price-figure {
    font-size: var(--fs-hero);
  }

  .pxp__boost-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: var(--space-32);
    align-items: center;
  }

  .pxp__fine {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------- the end */

/* The deal ticket's green (26 Oct 2026: fewer words): the offer in two
   lines, centred, then the ticket's own button (black, green label) beside a
   WhatsApp button drawn in black on the green, and the time it takes. */
.pxc {
  padding: var(--space-24) var(--gutter) var(--space-48);
}

.pxc__block {
  display: grid;
  justify-items: center;
  gap: var(--space-24);
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-48) var(--space-20);
  border-radius: var(--radius-card);
  background: var(--green);
  color: var(--on-green);
  text-align: center;
}

.pxc__title {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.pxc__line {
  display: block;
}

.pxc__line--soft {
  color: rgba(0, 0, 0, 0.55);
}

.pxc__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
}

.pxc__btn {
  background: var(--canvas);
  color: var(--green);
}

.pxc__btn:hover {
  background: var(--surface);
  color: var(--green);
}

.pxc__wa {
  gap: var(--space-8);
  background: transparent;
  color: var(--on-green);
  box-shadow: inset 0 0 0 2px var(--on-green);
}

.pxc__wa:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--on-green);
}

.pxc__wa-mark {
  flex: none;
}

.pxc__note {
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.62);
}

@media (min-width: 768px) {
  .pxc__block {
    padding: calc(var(--space-32) * 2) var(--space-48);
  }

  .pxc__title {
    font-size: var(--fs-hero);
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
}

@media (min-width: 1024px) {
  .pxc {
    padding-bottom: calc(var(--space-32) * 2);
  }
}

/* ------------------------------------------------------------- stillness */

@media (prefers-reduced-motion: reduce) {
  .pxv__phone,
  .pxr__phone,
  .pxm__query,
  .pxm__result,
  .pxv__bars i,
  .pxv__band,
  .pxv__zero,
  .pxg__chip,
  .pxp__more-q::after {
    transition: none !important;
  }

  .pxv__bars i,
  .pxv__band,
  .pxv__phone,
  .pxm__result {
    opacity: 1 !important;
    transform: none !important;
  }

  .pxm__query {
    clip-path: none !important;
  }

  .pxm__reel-bar i,
  .pxm__reel .pxm__photo,
  .pxm__ad {
    animation: none !important;
  }

  .pxf__disc {
    transition: none !important;
  }
}