/* ============================================================================
   /supplier-plans — Packaged Sustainable
   ----------------------------------------------------------------------------
   Every value here traces to docs/DESIGN-TOKENS.md. Nothing is invented.

   Two rules that carry the brand more than any colour:
     - border-radius is 0 everywhere except the mint eyebrow chip (3px), which
       is the only rounded element on the entire site.
     - headings are LIGHT (300) and large. Bolding them reads as off-brand.

   All classes are ps- prefixed so nothing collides with the site's own CSS.
   ========================================================================== */

.ps-scope {
  /* ---- Brand palette: the client's own Webflow Variables, verbatim ---- */
  --ps-green: #518a71;
  --ps-orange: #dd7c43;
  --ps-mint: #a6dfc6;
  --ps-mint-cream: #e7f5ef;
  --ps-white-smoke: #ebedee;
  --ps-subtle-hover: #fafafa;
  --ps-creme: #f1ead4;
  --ps-red: #db4b68;
  --ps-black: #000;
  --ps-white: #fff;

  /* Text: the site's true near-black, not pure #000 */
  --ps-ink: #18181d;
  --ps-ink-70: #18181db3;
  --ps-outline: rgba(170, 170, 170, 0.2);

  /* ---- Type ---- */
  --ps-font: Lexend, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Buttons (site .button) ---- */
  --ps-btn-h: 56px;
  --ps-btn-pad: 1rem 2rem;
  --ps-btn-size: 14px;
  --ps-btn-weight: 500;
  --ps-btn-hover: #272731;

  /* ---- Layout ---- */
  --ps-container: 1140px; /* narrower than the site's 1500px — see note below */
  --ps-pad-x: 36px;
  --ps-pad-y: 4rem;
  --ps-gap: 1.5rem;

  font-family: var(--ps-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--ps-ink);
  -webkit-font-smoothing: antialiased;
}

/* The site's .container is 1500px, which is right for full-bleed marketing
   sections. A decision page reads better constrained — 1140px keeps the plan
   cards from drifting apart on a wide monitor. Section padding, rhythm, and
   breakpoints are unchanged from the site. */

.ps-scope *,
.ps-scope *::before,
.ps-scope *::after {
  box-sizing: border-box;
}

.ps-container {
  width: 100%;
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-inline: var(--ps-pad-x);
}

.ps-section {
  padding-block: var(--ps-pad-y);
}
.ps-section--tight {
  padding-block: calc(var(--ps-pad-y) * 0.6);
}

/* ---------------------------------------------------------------- headings */

.ps-h1 {
  margin: 0 0 0.5rem;
  font-size: 44px;
  line-height: 52px;
  font-weight: 300; /* the site's h1 weight — do not bold */
  letter-spacing: -0.01em;
  color: var(--ps-ink);
}

.ps-lede {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: var(--ps-ink-70);
  max-width: 44ch;
}

.ps-h2 {
  margin: 0 0 1.5rem;
  font-size: 32px;
  line-height: 40px;
  font-weight: 300;
  color: var(--ps-ink);
}

.ps-h3 {
  margin: 0 0 0.5rem;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ps-ink);
}

/* The mint eyebrow chip — the site's .section-title. The ONLY rounded element. */
.ps-chip {
  display: inline-block;
  background-color: var(--ps-mint);
  color: var(--ps-ink);
  text-transform: uppercase;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- test mode */

.ps-testmode {
  background-color: #fff4d6;
  border: 1px solid #e8c766;
  color: #5c4813;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 20px;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  justify-content: center;
  text-align: center;
}
.ps-testmode strong {
  font-weight: 600;
}

/* --------------------------------------------------------------- progress */

.ps-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ps-progress__track {
  display: flex;
  gap: 6px;
  flex: none;
}
.ps-progress__dot {
  width: 28px;
  height: 4px;
  background-color: var(--ps-white-smoke);
}
.ps-progress__dot--done {
  background-color: var(--ps-green);
}
.ps-progress__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-ink-70);
}

/* ------------------------------------------------------------- notice bar */

.ps-notice {
  border-left: 3px solid var(--ps-green);
  background-color: var(--ps-mint-cream);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: 15px;
  line-height: 24px;
}
.ps-notice--warn {
  border-left-color: var(--ps-orange);
  background-color: #fdf1e9;
}

/* ------------------------------------------------------- how brands use it */

.ps-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ps-gap);
}

.ps-use {
  border-top: 2px solid var(--ps-green);
  padding-top: 1.25rem;
}
.ps-use p {
  margin: 0;
  color: var(--ps-ink-70);
  font-size: 15px;
  line-height: 24px;
}

/* ------------------------------------------------------------ brand demand */

.ps-proof {
  background-color: var(--ps-mint-cream);
}

.ps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ps-gap);
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.ps-stat {
  background-color: var(--ps-white);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--ps-outline);
}
.ps-stat__value {
  display: block;
  font-size: 36px;
  line-height: 44px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
  /* Tabular figures stop the three numbers optically disagreeing in width */
  font-variant-numeric: tabular-nums;
}
.ps-stat__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 14px;
  line-height: 22px;
  color: var(--ps-ink-70);
}

/* Methodology text stays visible. It is what makes "estimated" defensible. */
.ps-disclaimer {
  margin: 0 0 1rem;
  font-size: 13px;
  line-height: 21px;
  color: var(--ps-ink-70);
  max-width: 78ch;
}
.ps-industries {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
}
.ps-industries strong {
  font-weight: 600;
}

/* ------------------------------------------------------------- testimonial */

.ps-quote {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: start;
  background-color: var(--ps-white);
  border: 1px solid var(--ps-outline);
  padding: 3rem;
}
.ps-quote__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.ps-quote__logo picture,
.ps-quote__logo img {
  display: block;
  max-width: 100%;
  height: auto;
}
/* Width/height on the <img> reserve the box; this caps it without breaking the
   aspect ratio the browser derived from those attributes. */
.ps-quote__logo img {
  max-height: 72px;
  width: auto;
}
/* Text fallback, retained for any surface without the asset — see WEBFLOW-SETUP.md */
.ps-quote__logo-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ps-ink);
  text-align: center;
}
.ps-quote__text {
  margin: 0 0 1.5rem;
  font-size: 22px;
  line-height: 34px;
  font-weight: 300;
  color: var(--ps-ink);
}
.ps-quote__mark {
  color: var(--ps-green);
}
.ps-quote__cite {
  font-style: normal;
  font-size: 15px;
  line-height: 24px;
  color: var(--ps-ink-70);
}
.ps-quote__cite strong {
  display: block;
  font-weight: 600;
  color: var(--ps-ink);
}

/* ------------------------------------------------------------- plan cards */

.ps-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ps-gap);
  align-items: start;
}

.ps-plan {
  background-color: var(--ps-white);
  border: 1px solid var(--ps-white-smoke);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Pro is elevated with weight and depth, not colour. Black is the site's
   PRIMARY button, so the recommended tier using the primary treatment is more
   on-brand than a green variant — and white-on-black is 21:1. */
.ps-plan--pro {
  border: 2px solid var(--ps-ink);
  padding: 2rem;
  box-shadow: 0 2px 24px rgba(24, 24, 29, 0.08);
  position: relative;
}

.ps-plan__badge {
  position: absolute;
  top: 0;
  right: 2rem;
  transform: translateY(-50%);
  background-color: var(--ps-orange);
  color: var(--ps-ink); /* black on orange = 7.04:1. White would be 2.98:1. */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  line-height: 16px;
}

.ps-plan__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-ink-70);
}

.ps-plan__price {
  margin: 0.5rem 0 0;
  font-size: 44px;
  line-height: 52px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ps-ink);
}
.ps-plan__period {
  font-size: 16px;
  font-weight: 400;
  color: var(--ps-ink-70);
}

.ps-plan__tagline {
  margin: 0.5rem 0 1.5rem;
  font-size: 15px;
  line-height: 24px;
  color: var(--ps-ink-70);
}

.ps-features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--ps-white-smoke);
}
.ps-feature {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--ps-white-smoke);
  font-size: 15px;
  line-height: 22px;
}
.ps-feature__icon {
  width: 20px;
  height: 20px;
  align-self: center;
  flex: none;
}
.ps-feature__icon--yes {
  color: var(--ps-green);
}
/* NOT the site's --accessible-components--dark-grey (#9b9b9b): despite the name
   it is 2.78:1 on white, under the 3:1 floor for non-text UI. --70-black is
   6.87:1 and matches the muted text beside it. */
.ps-feature__icon--no {
  color: var(--ps-ink-70);
}
.ps-feature__name {
  color: var(--ps-ink);
}
.ps-feature__value {
  text-align: right;
  font-weight: 500;
  color: var(--ps-ink);
}
.ps-feature__value--muted {
  font-weight: 400;
  color: var(--ps-ink-70);
}

.ps-plan__cta {
  margin-top: auto;
}

/* ---------------------------------------------------------------- buttons */

.ps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: var(--ps-btn-h);
  padding: var(--ps-btn-pad);
  border: 2px solid transparent;
  border-radius: 0; /* square — the brand signal */
  font-family: inherit;
  font-size: var(--ps-btn-size);
  font-weight: var(--ps-btn-weight);
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.ps-btn--primary {
  background-color: var(--ps-black);
  color: var(--ps-white);
}
.ps-btn--primary:hover:not(:disabled) {
  background-color: var(--ps-btn-hover);
}

.ps-btn--outline {
  background-color: transparent;
  border-color: var(--ps-green);
  color: var(--ps-ink);
}
.ps-btn--outline:hover:not(:disabled) {
  background-color: var(--ps-mint-cream);
}

.ps-btn:disabled,
.ps-btn[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* The site's hover lift, suppressed for anyone who asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .ps-btn:hover:not(:disabled) {
    transform: scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ps-scope * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Focus: visible on every interactive element, and never removed */
.ps-scope :focus-visible {
  outline: 3px solid var(--ps-green);
  outline-offset: 2px;
}

.ps-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ps-spin 0.7s linear infinite;
  flex: none;
}
@keyframes ps-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------- trust row */

.ps-trust {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 13px;
  line-height: 20px;
  color: var(--ps-ink-70);
}
.ps-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ps-trust__sep {
  color: #c8c8c8;
}
/* Card brand marks intentionally absent — see the note in the Embed markup. */

/* ---------------------------------------------------------- jump to plans */

.ps-jump {
  margin: 0 0 1.25rem;
}
.ps-jump[hidden] {
  display: none;
}
.ps-jump__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px; /* touch target */
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ps-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ps-jump__link:hover {
  color: var(--ps-green);
}
.ps-jump__link svg {
  flex: none;
}

/* The plans section receives focus from the jump link. It is a scroll target,
   not a control, so it should never show a focus ring on mouse click. */
#plans:focus {
  outline: none;
}
#plans:focus-visible {
  outline: 3px solid var(--ps-green);
  outline-offset: 4px;
}

/* -------------------------------------------------------------- basic form */

.ps-form {
  margin-top: 1.5rem;
  border-top: 1px solid var(--ps-white-smoke);
  padding-top: 1.5rem;
}
.ps-form[hidden] {
  display: none;
}
.ps-field {
  margin-bottom: 1.25rem;
}
.ps-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--ps-ink);
}
.ps-hint {
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--ps-ink-70);
}
.ps-input,
.ps-select {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: var(--ps-white);
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  line-height: 24px;
  color: var(--ps-ink);
}
.ps-input:focus,
.ps-select:focus {
  border-color: var(--ps-green);
}
.ps-input[aria-invalid="true"] {
  border-color: var(--ps-red);
}

/* Identity we already captured at step 1, shown back rather than re-asked.
   Reassures the supplier we kept it, and proves they're mid-process. */
.ps-known {
  background-color: var(--ps-subtle-hover);
  border: 1px solid var(--ps-white-smoke);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.ps-known[hidden] {
  display: none;
}
.ps-known__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-size: 14px;
  line-height: 22px;
}
.ps-known__k {
  color: var(--ps-ink-70);
}
.ps-known__v {
  color: var(--ps-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ps-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}
.ps-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ps-white-smoke);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  min-height: 44px; /* touch target */
}
.ps-check:hover {
  background-color: var(--ps-subtle-hover);
}
.ps-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ps-green);
  flex: none;
}

/* Honeypot — off-screen rather than display:none, which some bots skip */
.ps-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ps-error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background-color: #ffdede;
  border-left: 3px solid var(--ps-red);
  color: #7a1728;
  font-size: 14px;
  line-height: 22px;
}
.ps-error:empty {
  display: none;
  padding: 0;
  border: 0;
}

.ps-fieldset {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}
.ps-legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--ps-ink);
}

/* -------------------------------------------------------------------- FAQ */

.ps-faq {
  border-top: 1px solid var(--ps-white-smoke);
  max-width: 820px;
}
.ps-faq__item {
  border-bottom: 1px solid var(--ps-white-smoke);
}
.ps-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  color: var(--ps-ink);
  text-align: left;
  cursor: pointer;
}
.ps-faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
}
.ps-faq__icon::before,
.ps-faq__icon::after {
  content: "";
  position: absolute;
  background-color: var(--ps-green);
  inset: 6px 0 auto 0;
  height: 2px;
}
.ps-faq__icon::after {
  transform: rotate(90deg);
  transition: transform 0.3s;
}
.ps-faq__q[aria-expanded="true"] .ps-faq__icon::after {
  transform: rotate(0deg);
}
.ps-faq__a {
  padding: 0 0 1.25rem;
  margin: 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 25px;
  color: var(--ps-ink-70);
}
.ps-faq__a[hidden] {
  display: none;
}
.ps-faq__a a {
  color: var(--ps-green);
}

/* ---------------------------------------------------------------- contact */

.ps-contact {
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  color: var(--ps-ink-70);
}
.ps-contact a {
  color: var(--ps-ink);
  font-weight: 500;
}

.ps-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ breakpoints
   Webflow's own: 991 / 767 / 479. Matching them exactly means this page
   reflows at the same widths as every other page on the site.
   ======================================================================== */

@media screen and (max-width: 991px) {
  .ps-scope {
    --ps-pad-x: 24px;
    --ps-pad-y: 3rem;
  }
  .ps-h1 {
    font-size: 38px;
    line-height: 46px;
  }
  .ps-h2 {
    font-size: 28px;
    line-height: 36px;
  }
  .ps-quote {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
  }
  .ps-quote__logo {
    justify-content: flex-start;
    min-height: 0;
  }
  .ps-quote__text {
    font-size: 20px;
    line-height: 31px;
  }
}

@media screen and (max-width: 767px) {
  .ps-scope {
    --ps-pad-x: 20px;
    --ps-pad-y: 2rem;
  }
  .ps-h1 {
    font-size: 32px;
    line-height: 40px;
  }
  .ps-lede {
    font-size: 18px;
    line-height: 28px;
  }
  .ps-grid3,
  .ps-stats {
    grid-template-columns: 1fr;
  }
  .ps-plans {
    grid-template-columns: 1fr;
  }
  /* Pro first on mobile — it is the recommended plan and the one most
     suppliers should see without scrolling. */
  .ps-plan--pro {
    order: -1;
  }
  .ps-plan__badge {
    right: 1.25rem;
  }
  .ps-stat {
    padding: 1.25rem;
  }
  .ps-stat__value {
    font-size: 30px;
    line-height: 38px;
  }
}

@media screen and (max-width: 479px) {
  .ps-scope {
    --ps-pad-x: 16px;
  }
  .ps-h1 {
    font-size: 28px;
    line-height: 36px;
  }
  .ps-plan,
  .ps-plan--pro {
    padding: 1.5rem 1.25rem;
  }
  .ps-quote {
    padding: 1.5rem 1.25rem;
  }
  .ps-quote__text {
    font-size: 18px;
    line-height: 28px;
  }
  .ps-feature {
    grid-template-columns: 20px 1fr;
    row-gap: 0.15rem;
  }
  .ps-feature__value {
    grid-column: 2;
    text-align: left;
  }
  .ps-checks {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Shared across /upgrade, /supplier-welcome, /supplier-signup
   ----------------------------------------------------------------------------
   Same tokens, same components. Everything below reuses the variables and
   button system defined above rather than restating any value.
   ========================================================================== */

/* ------------------------------------------------------- compact comparison
   /upgrade shows the plan difference as one table rather than two cards. A
   beta supplier already has Basic — they need the delta, not a re-pitch. */

.ps-compare {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
  font-size: 15px;
  line-height: 22px;
}
.ps-compare caption {
  text-align: left;
  padding-bottom: 0.75rem;
  font-size: 14px;
  color: var(--ps-ink-70);
}
.ps-compare th,
.ps-compare td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--ps-white-smoke);
  text-align: left;
  vertical-align: top;
}
.ps-compare thead th {
  border-bottom: 2px solid var(--ps-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-ink-70);
}
.ps-compare thead th:last-child {
  color: var(--ps-ink);
}
.ps-compare td:first-child {
  font-weight: 500;
  color: var(--ps-ink);
}
.ps-compare td:nth-child(2) {
  color: var(--ps-ink-70);
}
.ps-compare td:last-child {
  font-weight: 500;
  color: var(--ps-ink);
  background-color: var(--ps-mint-cream);
}
.ps-compare tbody tr:last-child th,
.ps-compare tbody tr:last-child td {
  border-bottom: 0;
}

.ps-upgrade-cta {
  max-width: 420px;
}

/* ---------------------------------------------------------------- welcome */

.ps-welcome {
  max-width: 680px;
}
.ps-welcome__mark {
  width: 56px;
  height: 56px;
  border: 2px solid var(--ps-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--ps-green);
}
.ps-welcome__mark svg {
  width: 28px;
  height: 28px;
}

/* Centred confirmation layout.
   The client's mockup for the Pro success screen is a short, centred column:
   mark, headline, one-line lede, one paragraph, one button. Mike asked for
   best-practice spacing rather than the mockup's, so the rhythm here is ours —
   generous space around the single call to action, nothing competing with it. */
.ps-welcome--center {
  margin: 0 auto;
  text-align: center;
}
.ps-welcome--center .ps-welcome__mark {
  margin-left: auto;
  margin-right: auto;
}
.ps-welcome--center .ps-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 34rem;
}
.ps-welcome--center .ps-actions {
  justify-content: center;
}
.ps-welcome--center .ps-notice {
  text-align: left;
}

/* The one instruction on the page. Sized between lede and body so it reads as
   the next thing to do rather than fine print. */
.ps-welcome__step {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: 17px;
  line-height: 28px;
  color: var(--ps-ink);
}

.ps-welcome__thanks {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 17px;
  line-height: 28px;
  font-weight: 500;
  color: var(--ps-ink);
}

@media screen and (max-width: 767px) {
  .ps-welcome__step { font-size: 16px; line-height: 26px; }
  .ps-welcome--center .ps-actions .ps-btn { width: 100%; }
}

/* Receipt-style facts. Tabular figures so amounts line up. */
.ps-facts {
  margin: 0 0 2rem;
  border-top: 1px solid var(--ps-white-smoke);
}
.ps-facts__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ps-white-smoke);
  font-size: 15px;
  line-height: 24px;
}
.ps-facts__k {
  color: var(--ps-ink-70);
}
.ps-facts__v {
  color: var(--ps-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* The next-step panel. This is the page's real job: tell them where to go. */
.ps-next {
  background-color: var(--ps-mint-cream);
  border-left: 3px solid var(--ps-green);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.ps-next h2 {
  margin: 0 0 0.5rem;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ps-ink);
}
.ps-next p {
  margin: 0 0 0.75rem;
  font-size: 15px;
  line-height: 24px;
  color: var(--ps-ink);
}
.ps-next p:last-child {
  margin-bottom: 0;
}
.ps-next ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: 15px;
  line-height: 24px;
  color: var(--ps-ink);
}
.ps-next li {
  margin-bottom: 0.35rem;
}

.ps-skeleton {
  color: transparent;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: ps-shimmer 1.4s linear infinite;
  border-radius: 2px;
  user-select: none;
}
@keyframes ps-shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ps-skeleton {
    animation: none;
    background: #eee;
  }
}

.ps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ps-actions .ps-btn {
  width: auto;
  min-width: 200px;
}

/* ---------------------------------------------- /supplier-signup additions
   The existing Webflow form keeps its own styling. We add only a progress
   indicator above it and an error region — nothing that restyles their form. */

.ps-signup-progress {
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 767px) {
  .ps-compare {
    font-size: 14px;
  }
  .ps-compare th,
  .ps-compare td {
    padding: 0.6rem 0.35rem;
  }
  .ps-facts__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .ps-actions .ps-btn {
    width: 100%;
    min-width: 0;
  }
}

@media screen and (max-width: 479px) {
  /* Drop the "Basic" column: an upgrading supplier knows what they have, and
     three columns at 320px makes every cell unreadable. */
  .ps-compare thead th:nth-child(2),
  .ps-compare tbody td:nth-child(2) {
    display: none;
  }
}

/* Closing line from the client's one-pager. Bold and centred, directly under the plan
   cards and above the contact line — the PDF's own placement. */
.ps-closing {
  margin: 0;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  color: var(--ps-ink);
}
@media screen and (max-width: 767px) {
  .ps-closing { font-size: 18px; line-height: 28px; }
}

/* Test-mode state switcher on /supplier-welcome. A reviewer should not have to
   hand-craft query strings to see what a supplier actually receives. Hidden in
   live mode by the same flag that hides the test banner. */
.ps-statebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 10px 16px;
  background-color: var(--ps-ink);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
}
.ps-statebar[hidden] { display: none; }
.ps-statebar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-statebar a:hover { color: var(--ps-mint); }

/* ============================================================================
   DESIGN PASS — density, hierarchy, and one real bug
   ----------------------------------------------------------------------------
   Brand rules unchanged: square corners, Lexend, light-300 headings, the
   client's palette. This tightens hierarchy and raises sizes that were too
   small to carry their weight.
   ========================================================================== */

/* BUG: any element with an explicit `display` beats the `hidden` attribute's UA
   rule, so `.ps-chip[hidden]` and friends rendered as empty pills. Seen live on
   /upgrade as a floating mint blob. */
.ps-scope [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- type scale */

/* The lede was the same weight as body copy and got lost under a 44px h1. */
.ps-lede {
  font-size: 21px;
  line-height: 32px;
  max-width: 52ch;
  color: #3a3a40;
}

/* 13px is below comfortable reading size for a methodology note that is doing
   real credibility work. */
.ps-disclaimer {
  font-size: 14px;
  line-height: 23px;
}
.ps-industries {
  font-size: 16px;
  line-height: 26px;
}
.ps-stat__label {
  font-size: 15px;
  line-height: 23px;
  color: #3a3a40;
}

/* --------------------------------------------------------------- plan cards */

.ps-plans {
  gap: 2rem;
  align-items: stretch;
}

.ps-plan {
  padding: 2.5rem 2.25rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ps-plan:not(.ps-plan--pro):hover {
  border-color: #c9c9c9;
}

/* Pro earns its weight with depth and a top rule, not a second brand colour. */
.ps-plan--pro {
  box-shadow: 0 4px 32px rgba(24, 24, 29, 0.1);
  position: relative;
}
.ps-plan--pro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ps-green), var(--ps-mint));
}

.ps-plan__name {
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* The number is the decision. Let it dominate. */
.ps-plan__price {
  font-size: 60px;
  line-height: 66px;
  margin: 0.75rem 0 0;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.ps-plan__period {
  font-size: 17px;
  color: #3a3a40;
}

.ps-plan__tagline {
  font-size: 16px;
  line-height: 25px;
  margin: 0.6rem 0 1.75rem;
  color: #3a3a40;
  font-weight: 500;
}

/* Badge sat on the border corner. Inset and squared off against the card edge. */
.ps-plan__badge {
  top: 0;
  right: 0;
  transform: none;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 0.5rem 0.9rem;
}

/* ------------------------------------------------------------ feature rows */

.ps-features {
  border-top: 0;
  margin-bottom: 2.25rem;
}
.ps-feature {
  padding: 0.85rem 0;
  font-size: 16px;
  line-height: 24px;
  align-items: center;
  border-bottom-color: #f0f0f0;
}
.ps-feature:first-child {
  border-top: 1px solid #f0f0f0;
}
.ps-feature__icon {
  width: 22px;
  height: 22px;
}
.ps-feature__name {
  font-weight: 400;
}
/* Rows the tier does NOT include should read as absent, not as equal weight. */
.ps-feature__icon--no ~ .ps-feature__name {
  color: #6b6b70;
}
.ps-feature__value .ps-hint {
  font-size: 13px;
  line-height: 19px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------- trust row */

.ps-trust {
  margin-top: 2rem;
  font-size: 14px;
  gap: 0.6rem 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ps-white-smoke);
}

/* --------------------------------------------------------------- stat cards */

.ps-stat {
  padding: 2rem 1.75rem;
  border: 0;
  border-top: 3px solid var(--ps-green);
  transition: transform 0.3s;
}
.ps-stat__value {
  font-size: 42px;
  line-height: 50px;
  letter-spacing: -0.03em;
}
@media (prefers-reduced-motion: no-preference) {
  .ps-stat:hover {
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------- upgrade comparison table */

.ps-compare {
  font-size: 16px;
}
.ps-compare caption {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ps-ink);
  padding-bottom: 1rem;
}
.ps-compare thead th {
  font-size: 13px;
  padding-bottom: 1rem;
}
.ps-compare th,
.ps-compare td {
  padding: 1.05rem 1rem;
}
.ps-compare td:first-child {
  padding-left: 0;
  font-weight: 500;
}
/* The Pro column is the point of the table — give it a spine. */
.ps-compare thead th:last-child {
  background-color: var(--ps-mint-cream);
  border-top: 3px solid var(--ps-green);
  color: var(--ps-ink);
}
.ps-compare td:last-child {
  font-weight: 600;
}

.ps-upgrade-cta {
  max-width: 480px;
}

/* ------------------------------------------------------------- how brands use */

.ps-use {
  border-top-width: 3px;
  padding-top: 1.5rem;
}
.ps-use p {
  font-size: 16px;
  line-height: 26px;
  color: #3a3a40;
}
.ps-h3 {
  font-size: 19px;
  line-height: 28px;
}

/* --------------------------------------------------------------- testimonial */

.ps-quote__text {
  font-size: 24px;
  line-height: 38px;
}
.ps-quote {
  border: 0;
  border-left: 3px solid var(--ps-green);
  background-color: var(--ps-white);
  box-shadow: 0 2px 24px rgba(24, 24, 29, 0.06);
}

/* ------------------------------------------------------------------ closing */

.ps-closing {
  font-size: 26px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------- buttons */

.ps-btn {
  font-size: 15px;
  letter-spacing: 0.06em;
  min-height: 60px;
}

@media screen and (max-width: 767px) {
  .ps-plan__price { font-size: 48px; line-height: 54px; }
  .ps-plan { padding: 2rem 1.5rem; }
  .ps-plans { gap: 1.5rem; }
  .ps-quote__text { font-size: 20px; line-height: 32px; }
  .ps-closing { font-size: 21px; line-height: 30px; }
  .ps-stat__value { font-size: 34px; line-height: 42px; }
  .ps-lede { font-size: 18px; line-height: 28px; }
}

/* ============================================================================
   BRAND DEMAND CHARTS
   ----------------------------------------------------------------------------
   The original spec dropped the PDF's pie charts because they "do not survive
   mobile". These are built so they do:
     - inline SVG, no library, no runtime drawing, so nothing shifts on load
     - a real legend carrying the percentage as TEXT, so the data reads without
       colour perception and without hovering
     - three columns on desktop collapsing to one on tablet, charts full width
   ========================================================================== */

.ps-demand {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2rem;
}

.ps-chart {
  margin: 0;
  min-width: 0;
}
.ps-chart__title {
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ps-ink);
  text-align: center;
  margin-bottom: 1rem;
}
.ps-chart__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ps-chart__svg {
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
  /* Lift the chart off the mint-cream section background */
  filter: drop-shadow(0 2px 8px rgba(24, 24, 29, 0.08));
}

/* Legend carries the number as text — the chart is not the only way to read it. */
.ps-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 260px;
}
.ps-legend__item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  font-size: 14px;
  line-height: 21px;
  color: #3a3a40;
}
.ps-legend__swatch {
  width: 12px;
  height: 12px;
  flex: none;
}
.ps-legend__name {
  min-width: 0;
}
.ps-legend__pct {
  font-weight: 600;
  color: var(--ps-ink);
  font-variant-numeric: tabular-nums;
}

/* Centre stats column between the two charts, matching the PDF's layout. */
.ps-stats--center {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 0;
  min-width: 220px;
}
.ps-stats--center .ps-stat {
  background-color: transparent;
  border-top: 0;
  padding: 0;
  text-align: center;
}
.ps-stats--center .ps-stat__label {
  order: -1;
  margin: 0 0 0.15rem;
  font-size: 15px;
}
.ps-stats--center .ps-stat {
  display: flex;
  flex-direction: column;
}
/* The PDF alternates green and orange down the stat column. */
.ps-stats--center .ps-stat:nth-child(1) .ps-stat__value { color: var(--ps-green); }
.ps-stats--center .ps-stat:nth-child(2) .ps-stat__value,
.ps-stats--center .ps-stat:nth-child(3) .ps-stat__value { color: var(--ps-orange); }
.ps-stats--center .ps-stat:hover { transform: none; }

@media screen and (max-width: 991px) {
  .ps-demand {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ps-stats--center {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .ps-chart__body {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .ps-chart__svg { max-width: 190px; }
}

@media screen and (max-width: 767px) {
  .ps-stats--center { grid-template-columns: 1fr; gap: 1.25rem; }
  .ps-chart__body { flex-direction: column; }
  .ps-legend { max-width: 320px; }
}

/* ============================================================================
   CHART INTERACTION + LEGEND POLISH
   ========================================================================== */

.ps-chart { display: flex; flex-direction: column; align-items: center; }
.ps-chart__title {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #3a3a40;
  margin-bottom: 1.25rem;
}
.ps-chart__svg {
  max-width: 240px;
  overflow: visible;          /* slices pop past the viewBox on hover */
  filter: none;
}

/* Each slice moves along its own bisector, so it separates from the pie rather
   than just scaling. --ox/--oy are emitted per slice by the generator. */
.ps-slice,
.ps-slice-pct {
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-box: fill-box;
}
.ps-slice {
  stroke: #fff;
  stroke-width: 2;
  cursor: default;
  transform-box: view-box;
}
.ps-slice-pct {
  font-size: 15px;
  font-weight: 600;
  transform-box: view-box;
  pointer-events: none;
}
.ps-chart:hover .ps-slice,
.ps-chart:hover .ps-slice-pct { opacity: 0.45; }

.ps-slice.is-active,
.ps-slice-pct.is-active {
  opacity: 1;
  transform: translate(var(--ox), var(--oy));
}
.ps-slice.is-active { filter: drop-shadow(0 4px 10px rgba(24,24,29,0.25)); }

@media (prefers-reduced-motion: reduce) {
  .ps-slice, .ps-slice-pct { transition: none; }
  .ps-slice.is-active, .ps-slice-pct.is-active { transform: none; }
}

/* ---- legend: a readable table, not a bullet list ---- */
.ps-legend {
  margin: 1.5rem 0 0;
  max-width: 300px;
  width: 100%;
  border-top: 1px solid rgba(24, 24, 29, 0.08);
}
.ps-legend__item {
  grid-template-columns: 10px 1fr auto;
  gap: 0.7rem;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid rgba(24, 24, 29, 0.08);
  font-size: 14px;
  line-height: 20px;
  cursor: default;
  transition: background-color 0.2s;
}
.ps-legend__item:hover,
.ps-legend__item.is-active { background-color: rgba(255, 255, 255, 0.7); }
.ps-legend__swatch { width: 10px; height: 10px; border-radius: 2px; }
.ps-legend__name { color: #3a3a40; }
.ps-legend__pct { font-size: 14px; }

/* ============================================================================
   PLAN CARD ALIGNMENT
   Feature rows wrapped to two lines on Pro and broke row-for-row alignment
   with Basic. A fixed min-height keeps the two columns readable side by side.
   ========================================================================== */

.ps-feature {
  min-height: 62px;
  align-items: center;
}
.ps-plan { justify-content: flex-start; }
.ps-plan__cta { margin-top: auto; padding-top: 0.5rem; }

/* Badge sat on top of the gradient rule. Inset it and drop the rule behind. */
.ps-plan--pro::before { height: 3px; }
.ps-plan__badge {
  top: 3px;
  right: 0;
  font-size: 10px;
  padding: 0.45rem 0.85rem;
}

/* Basic should read as a deliberate choice, not an afterthought. */
.ps-plan:not(.ps-plan--pro) {
  border-color: #dcdcde;
  background-color: #fcfcfc;
}

@media screen and (max-width: 767px) {
  .ps-feature { min-height: 0; }
  .ps-chart__svg { max-width: 210px; }
  .ps-legend { max-width: 340px; }
}

/* ============================================================================
   CHART HOVER — corrected
   Dimming every other slice washed the whole chart grey. The hovered slice now
   lifts on its own; the rest stay at full colour.
   ========================================================================== */

.ps-chart:hover .ps-slice,
.ps-chart:hover .ps-slice-pct { opacity: 1; }

.ps-slice.is-active {
  transform: translate(var(--ox), var(--oy));
  filter: drop-shadow(0 6px 14px rgba(24, 24, 29, 0.28));
}
.ps-slice-pct.is-active { transform: translate(var(--ox), var(--oy)); }

/* Non-hovered slices recede very slightly rather than going grey. */
.ps-chart:hover .ps-slice:not(.is-active) { opacity: 0.88; }

/* ============================================================================
   THE NUMBERS — this block is the proof, so it gets real weight
   ========================================================================== */

.ps-stats--center {
  background-color: #fff;
  padding: 2rem 1.75rem;
  border-top: 3px solid var(--ps-green);
  box-shadow: 0 2px 20px rgba(24, 24, 29, 0.06);
  gap: 0;
}
.ps-stats--center .ps-stat {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--ps-white-smoke);
}
.ps-stats--center .ps-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.ps-stats--center .ps-stat:first-child { padding-top: 0; }

/* Label above the number, small caps — the number is the thing being read. */
.ps-stats--center .ps-stat__label {
  order: -1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b70;
  margin-bottom: 0.4rem;
}
.ps-stats--center .ps-stat__value {
  font-size: 46px;
  line-height: 52px;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   METHODOLOGY + INDUSTRIES
   ========================================================================== */

.ps-disclaimer {
  margin: 2.5rem auto 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(24, 24, 29, 0.12);
  font-size: 13px;
  line-height: 22px;
  font-style: italic;
  color: #5a5a60;
  max-width: 74ch;
  text-align: center;
}

.ps-industries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.9rem;
  margin: 0;
}
.ps-industries__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b70;
}
.ps-industries__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.ps-industry {
  background-color: #fff;
  border: 1px solid rgba(81, 138, 113, 0.35);
  color: var(--ps-ink);
  padding: 0.4rem 0.85rem;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .ps-stats--center .ps-stat__value { font-size: 38px; line-height: 44px; }
  .ps-stats--center { padding: 1.5rem 1.25rem; }
  .ps-disclaimer { text-align: left; }
  .ps-industries { justify-content: flex-start; }
  .ps-industries__list { justify-content: flex-start; }
}

/* Charts have different legend lengths (6 rows vs 7), so centring the grid left
   their titles on different baselines. Align to the top and let the stats panel
   centre itself within the row instead. */
.ps-demand { align-items: start; }
.ps-demand .ps-stats--center { align-self: center; }
.ps-chart__title { min-height: 2.6em; display: flex; align-items: flex-end; }

/* ============================================================================
   HERO SPACING
   The heading block and the first content section each carried their own
   vertical padding, stacking into a ~150px void under the lede. Pull the hero's
   bottom padding in and let the next section own the gap.
   ========================================================================== */

.ps-section--tight:first-of-type { padding-bottom: 1.5rem; }

.ps-progress { margin-bottom: 2rem; }
.ps-progress__dot { width: 34px; height: 5px; }
.ps-progress__label { font-size: 12px; letter-spacing: 0.1em; }

/* The lede is the promise — give it room to breathe without a chasm below. */
.ps-h1 { margin-bottom: 0.75rem; }
.ps-lede { margin-bottom: 0; }

/* Three columns with different copy lengths left ragged bottoms. Equal heights
   keep the rules and headings on a shared baseline. */
.ps-grid3 { align-items: stretch; }
.ps-use { display: flex; flex-direction: column; }
.ps-use p { margin-top: auto; }
.ps-h3 { min-height: 2.2em; }

@media screen and (max-width: 767px) {
  .ps-h3 { min-height: 0; }
  .ps-use p { margin-top: 0; }
  .ps-section--tight:first-of-type { padding-bottom: 1rem; }
}

/* ============================================================================
   TESTIMONIAL — rebuilt
   Previously: two green rules (card edge + quote edge) competing, a logo
   floating in dead space, and the attribution centred and orphaned at the
   bottom. One accent, and the logo sits WITH the name because together they are
   the source.
   ========================================================================== */

.ps-quote {
  display: block;
  border: 0;
  border-left: 0;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 900px;
  margin: 0 auto;
}

.ps-quote__text {
  position: relative;
  margin: 0 0 2rem;
  padding: 0 0 0 3.25rem;
  font-size: 25px;
  line-height: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ps-ink);
}
/* One oversized quote mark instead of a rule — editorial rather than boxed. */
.ps-quote__text::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.18em;
  font-size: 84px;
  line-height: 1;
  color: var(--ps-green);
  opacity: 0.35;
  font-family: Georgia, "Times New Roman", serif;
}

.ps-quote__source {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-left: 3.25rem;
}
.ps-quote__source img {
  display: block;
  width: auto;
  max-height: 54px;
}
.ps-quote__who {
  font-size: 15px;
  line-height: 23px;
  color: #5a5a60;
  padding-left: 1.5rem;
  border-left: 1px solid var(--ps-white-smoke);
}
.ps-quote__who strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ps-ink);
}

@media screen and (max-width: 767px) {
  .ps-quote__text {
    font-size: 20px;
    line-height: 32px;
    padding-left: 0;
    padding-top: 2.25rem;
  }
  .ps-quote__text::before { font-size: 60px; top: -0.1em; }
  .ps-quote__source { padding-left: 0; gap: 1rem; }
  .ps-quote__who { padding-left: 1rem; }
}

/* ============================================================================
   GETTING STARTED — the three-step explainer on /supplier-plans
   ----------------------------------------------------------------------------
   An ordered list, because the steps genuinely are sequential and a screen
   reader should say so. The rule above each step reproduces the board's divider
   without needing a border image.
   ========================================================================== */

.ps-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ps-step;
}
.ps-step {
  border-top: 2px solid var(--ps-green);
  padding-top: 1.25rem;
  counter-increment: ps-step;
}
.ps-step .ps-h3 {
  margin: 0 0 0.5rem;
}
.ps-step .ps-h3::before {
  content: counter(ps-step) ". ";
  color: var(--ps-green);
}
.ps-step p {
  margin: 0;
  color: var(--ps-ink-70);
  font-size: 15px;
  line-height: 24px;
}

/* ============================================================================
   HOW PACKAGED SUSTAINABLE COMPARES
   ----------------------------------------------------------------------------
   Two panels with a "vs." pivot between them. The pivot is a real element rather
   than a pseudo-element on a container, so it can sit between the columns on
   desktop and between the stacked panels on mobile without being repositioned
   by hand at each breakpoint.

   The board draws this as one rounded outline around both halves. Reproduced
   with a single border on the wrapper and a divider between the sides, which
   collapses correctly when the layout stacks.
   ========================================================================== */

.ps-vs__intro {
  max-width: 62ch;
  margin: 0 0 2rem;
  font-size: 16px;
  line-height: 26px;
  color: var(--ps-ink);
}

.ps-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0;
  border: 2px solid var(--ps-ink);
  border-radius: 28px;
  padding: 2rem;
  margin-bottom: 2rem;
}
.ps-vs__side {
  padding: 0 1.75rem;
}
.ps-vs__side--them {
  border-left: 1px solid var(--ps-white-smoke);
}
.ps-vs__name {
  margin: 0 0 1.5rem;
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ps-ink);
}
.ps-vs__name--ps {
  color: var(--ps-ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ps-vs__tm {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 500;
}
.ps-vs__pivot {
  margin: 0;
  align-self: center;
  font-size: 30px;
  font-weight: 600;
  color: var(--ps-ink);
  padding: 0 0.5rem;
}

.ps-vs__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-vs__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.9rem;
  align-items: start;
  margin-bottom: 1.35rem;
  font-size: 15px;
  line-height: 23px;
  color: var(--ps-ink);
}
.ps-vs__item:last-child {
  margin-bottom: 0;
}
.ps-vs__icon {
  width: 26px;
  height: 26px;
  color: var(--ps-green);
  flex: none;
}
.ps-vs__side--them .ps-vs__icon {
  color: var(--ps-ink);
}
.ps-vs__cost {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--ps-ink);
  text-decoration: line-through;
}
.ps-vs__item strong {
  font-weight: 600;
}

.ps-vs__cta {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 17px;
  line-height: 28px;
  color: var(--ps-ink);
}
.ps-vs__cta a {
  font-weight: 600;
  color: var(--ps-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-underline-offset: 4px;
}

@media screen and (max-width: 900px) {
  .ps-steps { grid-template-columns: 1fr; }
  .ps-vs {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    border-radius: 20px;
  }
  .ps-vs__side { padding: 0; }
  .ps-vs__side--them {
    border-left: 0;
    border-top: 1px solid var(--ps-white-smoke);
    padding-top: 1.5rem;
  }
  .ps-vs__pivot {
    text-align: center;
    padding: 1.25rem 0 0.25rem;
  }
  .ps-vs__name { font-size: 22px; line-height: 28px; }
}

/* ============================================================================
   LAYOUT CORRECTIONS — 2026-08-13, from a review of the live page
   ----------------------------------------------------------------------------
   These override earlier rules deliberately, and sit at the end of the file so
   the cascade resolves them last. Each block records the defect it fixes, so a
   future reader can tell an intentional override from an accident.
   ========================================================================== */

/* ── Hero: the headline was breaking "by far." onto its own line ───────────
   Capping the measure lets it break at a sensible point instead of running the
   full 1140px container and orphaning two words. */
.ps-h1 {
  max-width: 20ch;
}
.ps-lede {
  max-width: 46ch;
}

/* Vertical rhythm was too loose between the hero and the steps, and again
   between the steps and the plans — big empty bands with nothing in them. */
.ps-section--tight {
  padding-block: calc(var(--ps-pad-y) * 0.45);
}

/* ── Getting started: the site stylesheet uppercases h3, which turned the
   client's sentence-case step titles into shouting. Restore their casing. ── */
.ps-step .ps-h3 {
  text-transform: none;
  font-size: 19px;
  line-height: 27px;
  letter-spacing: 0;
}
.ps-steps {
  gap: 2rem;
}
.ps-step p {
  font-size: 16px;
  line-height: 26px;
}

/* ── Audience: the real bug ────────────────────────────────────────────────
   .ps-demand was `1fr auto 1fr` — a THREE column grid holding TWO charts. The
   empty middle track is what pushed the pies off-centre and left the ragged
   right-hand gap. Two equal columns, centred as a pair. */
.ps-demand {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
  max-width: 900px;
  margin-inline: auto;
}
/* Chart title, pie and legend now share one width and one centre line. */
.ps-chart {
  align-items: center;
}
.ps-chart__title {
  min-height: 0;
  display: block;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.ps-chart__svg {
  max-width: 260px;
  width: 100%;
  height: auto;
}
.ps-legend {
  max-width: 340px;
  margin-top: 1.75rem;
}
.ps-legend__item {
  font-size: 15px;
  line-height: 22px;
}
.ps-legend__pct {
  font-size: 15px;
}

/* The industries row read as a stray label floating beside the pills.
   Label above, pills centred under it. */
.ps-industries {
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.ps-industries__label {
  font-size: 12px;
  letter-spacing: 0.14em;
}

.ps-h2--center {
  text-align: center;
}
.ps-section-lede {
  margin: -0.75rem auto 2.5rem;
  max-width: 52ch;
  text-align: center;
  font-size: 17px;
  line-height: 28px;
  color: var(--ps-ink-70);
}

/* ── How Packaged Sustainable Compares: everything was a size too small ──── */
.ps-vs__intro {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  font-size: 17px;
  line-height: 29px;
  margin-bottom: 2.5rem;
}
.ps-vs {
  max-width: 1040px;
  margin-inline: auto;
  padding: 2.5rem 1.5rem;
}
.ps-vs__item {
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 1.75rem;
  grid-template-columns: 34px 1fr;
}
.ps-vs__name {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 1.75rem;
}
.ps-vs__icon {
  width: 28px;
  height: 28px;
}
.ps-vs__cost {
  font-size: 16px;
}

/* Closing line + CTA: the link was a bolded run of text pretending to be a
   button. It is a button now. */
.ps-vs__cta {
  margin: 1.5rem auto 1.5rem;
  max-width: 60ch;
  font-size: 18px;
}
.ps-vs__actions {
  display: flex;
  justify-content: center;
}
.ps-vs__actions .ps-btn {
  width: auto;
  min-width: 260px;
}

/* ── FAQ: was left-aligned in a wide container and set too small ─────────── */
.ps-faq {
  max-width: 860px;
  margin-inline: auto;
}
.ps-faq__q {
  font-size: 19px;
  line-height: 28px;
  padding: 1.4rem 0.25rem;
}
.ps-faq__a {
  font-size: 16px;
  line-height: 27px;
  max-width: none;
  padding: 0 0.25rem 1.4rem;
}

@media screen and (max-width: 900px) {
  .ps-demand { grid-template-columns: 1fr; gap: 2.5rem; }
  .ps-h1 { max-width: none; }
  .ps-vs__cta { font-size: 17px; }
  .ps-vs__actions .ps-btn { width: 100%; min-width: 0; }
}

/* ── /supplier-welcome: the confirmation screen was cramped ────────────────
   Reviewed live 2026-08-13. Three specific faults:
     1. The lede and the next-step paragraph ran together with no gap, reading
        as one four-line block instead of a promise and an instruction.
     2. The button had almost no air around it — "Questions? Email…" sat right
        under it, so the one action on the page did not read as the one action.
     3. Everything was a size small for a page with this little on it. A screen
        someone reaches after paying $50 can afford to be generous.
   ========================================================================== */

.ps-welcome--center .ps-lede {
  font-size: 21px;
  line-height: 32px;
  margin-bottom: 2rem;
  max-width: 38ch;
}

.ps-welcome__step {
  font-size: 18px;
  line-height: 30px;
  max-width: 40ch;
  margin: 0 auto 3rem;
  color: var(--ps-ink-70);
}

/* The single action on the page. Give it room on both sides. */
.ps-welcome--center .ps-actions {
  margin: 0 0 3rem;
  gap: 1rem;
}
.ps-welcome--center .ps-actions .ps-btn {
  min-width: 280px;
}

.ps-welcome--center .ps-welcome__mark {
  margin-bottom: 2rem;
}
.ps-welcome--center .ps-h1 {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.ps-welcome--center .ps-contact {
  font-size: 16px;
  line-height: 26px;
  margin: 0 0 1.25rem;
}
.ps-welcome__thanks {
  font-size: 18px;
  line-height: 28px;
  margin-top: 0;
}

/* The pending-payment notice sits between the lede and the instruction; keep it
   from collapsing against either. */
.ps-welcome--center .ps-notice {
  margin: 0 auto 2rem;
  max-width: 44ch;
}

@media screen and (max-width: 767px) {
  .ps-welcome--center .ps-lede { font-size: 19px; line-height: 29px; }
  .ps-welcome__step { font-size: 17px; line-height: 28px; margin-bottom: 2.25rem; }
  .ps-welcome--center .ps-actions { margin-bottom: 2.25rem; }
  .ps-welcome--center .ps-actions .ps-btn { min-width: 0; }
}

/* ============================================================================
   TYPE SCALE — one consistent ramp for the whole plans page
   ----------------------------------------------------------------------------
   The page had accumulated sizes from three separate passes: 13, 14, 15, 16, 17
   and 18px all doing similar jobs, so nothing lined up and the Audience block in
   particular read as an afterthought. This settles a single ramp and applies it
   everywhere, replacing the earlier one-off values.

     Section heading     32px   (.ps-h2)
     Section sub-line    18px   (.ps-section-lede, .ps-vs__intro)
     Body / list item    16px   (legends, features, FAQ answers, vs items)
     Sub-heading         19px   (.ps-h3, chart titles, FAQ questions)
     Eyebrow / label     12px   uppercase, tracked
     Fine print          14px   (.ps-disclaimer)

   Chart titles were 13px — smaller than the legend beneath them, which inverted
   the hierarchy. They are now the sub-heading size.
   ========================================================================== */

/* ── Audience ─────────────────────────────────────────────────────────────── */

.ps-chart__title {
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ps-ink);
  text-align: center;
  margin-bottom: 1.5rem;
  min-height: 0;
  display: block;
}

.ps-legend {
  max-width: 360px;
  margin-top: 2rem;
}
.ps-legend__item {
  font-size: 16px;
  line-height: 24px;
  padding: 0.7rem 0.25rem;
  color: var(--ps-ink);
}
.ps-legend__name {
  color: var(--ps-ink);
}
.ps-legend__pct {
  font-size: 16px;
  font-weight: 600;
}

.ps-industries__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ps-ink-70);
}
.ps-industry {
  font-size: 15px;
  line-height: 22px;
  padding: 0.5rem 1rem;
}

.ps-section-lede {
  font-size: 18px;
  line-height: 29px;
}

.ps-disclaimer {
  font-size: 14px;
  line-height: 23px;
}

/* The charts sit as a matched pair on one centre line, with equal columns and
   equal internal rhythm. */
.ps-demand {
  max-width: 860px;
  margin-inline: auto;
  gap: 3.5rem;
  align-items: start;
}
.ps-chart__svg {
  max-width: 240px;
}

/* ── Everything else on the ramp ──────────────────────────────────────────── */

.ps-h3 {
  font-size: 19px;
  line-height: 27px;
}
.ps-feature__name {
  font-size: 16px;
  line-height: 24px;
}
.ps-faq__q {
  font-size: 19px;
  line-height: 28px;
}
.ps-faq__a {
  font-size: 16px;
  line-height: 27px;
}
.ps-vs__intro {
  font-size: 18px;
  line-height: 30px;
}
.ps-vs__item {
  font-size: 16px;
  line-height: 26px;
}
.ps-plan__tagline {
  font-size: 16px;
  line-height: 25px;
}
.ps-trust__item {
  font-size: 15px;
}

@media screen and (max-width: 900px) {
  .ps-legend { max-width: 100%; }
  .ps-chart__title { font-size: 14px; }
}

/* ============================================================================
   /supplier-signup — the app-served step 1
   ----------------------------------------------------------------------------
   Two columns on desktop, matching the client's own page: the value proposition
   on the left, the form on the right in a white card. Stacks on mobile with the
   pitch first, so the reason to fill it in arrives before the fields.
   ========================================================================== */

.ps-signup__title { text-align: center; max-width: none; margin-inline: auto; }
.ps-signup__sub {
  text-align: center;
  max-width: none;
  margin: 0 auto 0.5rem;
}

.ps-signup {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: start;
  background-color: var(--ps-white);
  border: 1px solid var(--ps-outline);
  padding: 3rem;
  max-width: 1040px;
  margin-inline: auto;
}

.ps-signup__pitch .ps-h3 {
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 1rem;
}
.ps-signup__pitch p {
  margin: 0 0 1rem;
  font-size: 16px;
  line-height: 26px;
  color: var(--ps-ink-70);
}
.ps-signup__help {
  margin-top: 2.5rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 15px;
}
.ps-signup__help span { font-weight: 600; color: var(--ps-ink); }
.ps-signup__help a { color: var(--ps-green); font-weight: 500; }

.ps-signup__form .ps-fieldset { margin-bottom: 1.75rem; }
.ps-legend-label {
  display: block;
  padding: 0;
  margin-bottom: 0.75rem;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ps-ink);
}
.ps-signup__form .ps-field { margin-bottom: 0.75rem; }
.ps-signup__cta { width: 100%; margin-top: 0.5rem; }

@media screen and (max-width: 900px) {
  .ps-signup {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.75rem;
  }
  .ps-signup__help { margin-top: 1rem !important; }
}

/* ============================================================================
   HOW PACKAGED SUSTAINABLE COMPARES — final pass
   ----------------------------------------------------------------------------
   Two defects from the live review:

   1. "vs." was a floating word in dead space between the columns. It read as
      leftover text rather than the pivot of the comparison. It is now a badge
      centred on the divider — the divider runs the full height of the box and
      the badge sits on it, which is what makes the two halves read as opposed
      rather than merely adjacent.

   2. Everything inside the box was undersized against a 32px section heading and
      a 26px closing line, so the substance of the argument was the quietest thing
      on screen. Body up to 17px, the two panel names matched to one treatment.
   ========================================================================== */

.ps-vs {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  padding: 3rem 2rem;
  gap: 0;
}

/* Both panel names get the SAME treatment. One was uppercase and tracked, the
   other title case — which made them look like different kinds of thing. */
.ps-vs__name,
.ps-vs__name--ps {
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ps-ink);
  margin-bottom: 2rem;
}

.ps-vs__side {
  padding: 0 2.5rem;
}
/* The divider now belongs to the pivot, not the right-hand panel. */
.ps-vs__side--them {
  border-left: 0;
}

.ps-vs__pivot {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  padding: 0;
  margin: 0;
}
.ps-vs__pivot::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: var(--ps-white-smoke);
}
.ps-vs__pivot span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid var(--ps-ink);
  background-color: var(--ps-white);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ps-ink);
}

.ps-vs__item {
  font-size: 17px;
  line-height: 28px;
  margin-bottom: 2rem;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
}
.ps-vs__item:last-child {
  margin-bottom: 0;
}
.ps-vs__icon {
  width: 30px;
  height: 30px;
  margin-top: 1px;
}
.ps-vs__cost {
  font-size: 17px;
  margin-top: 1px;
}

/* On the right, `strong` is a heading for the paragraph under it; on the left it
   is an inline lead-in. Only the right side gets the block treatment. */
.ps-vs__side--them .ps-vs__item strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 17px;
}

.ps-vs__intro {
  font-size: 19px;
  line-height: 31px;
  max-width: 68ch;
}

@media screen and (max-width: 900px) {
  .ps-vs {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
  }
  .ps-vs__side { padding: 0; }
  .ps-vs__pivot {
    width: auto;
    padding: 1.75rem 0;
  }
  .ps-vs__pivot::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .ps-vs__pivot span { width: 54px; height: 54px; font-size: 16px; }
  .ps-vs__item { font-size: 16px; line-height: 26px; }
  .ps-vs__intro { font-size: 17px; line-height: 28px; }
}

/* ============================================================================
   CLIENT TWEAKS — 2026-08-14, from the founders' annotated screenshots
   ----------------------------------------------------------------------------
   1. Hero: headline and lede fill the container width instead of wrapping in a
      narrow column (their arrows: "fill space"). Scoped to the plans page so
      the other pages' heroes keep their measure.
   2. Less dead air between the steps and the plan cards ("reduce white space").
   3. RECOMMENDED badge: larger box, WHITE text. The background is the brand
      orange darkened one step (#b45317) because white on #dd7c43 is 2.98:1 —
      unreadable, and the readability was the complaint. White on #b45317 is
      5.01:1, AA for the badge's size.
   4. Plan taglines carry the sales argument ("more emphasis: bold? or
      background color") — both, as a tinted band. Pro mint-cream, Basic grey,
      so the hierarchy reads at a glance.
   5. The vs pivot rendered as a squashed ellipse: the circle is a fixed-size
      span inside a width:0 flex container, and default flex-shrink crushed it.
      flex:none is the actual fix. Restyled while in here — solid deep green,
      white VS, a white halo where it crosses the divider — and the box itself
      gets a card treatment to match the plan cards.
   ========================================================================== */

[data-ps-plans] .ps-h1 {
  max-width: none;
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.14;
}
[data-ps-plans] .ps-lede {
  max-width: none;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
}

[data-ps-plans] #plans {
  padding-top: calc(var(--ps-pad-y) * 0.3);
}

.ps-plan__badge {
  background-color: #b45317;
  color: var(--ps-white);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.65rem 1.2rem;
}

.ps-plan__tagline {
  display: inline-block;
  font-weight: 600;
  color: var(--ps-ink);
  background-color: var(--ps-white-smoke);
  padding: 0.55rem 0.85rem;
  margin: 0.75rem 0 1.5rem;
}
.ps-plan--pro .ps-plan__tagline {
  background-color: var(--ps-mint-cream);
  color: #2f5d4a;
}

.ps-vs {
  border-width: 1.5px;
  background-color: var(--ps-white);
  box-shadow: 0 2px 24px rgba(24, 24, 29, 0.06);
}
.ps-vs__pivot span {
  flex: none;
  width: 58px;
  height: 58px;
  border: 0;
  background-color: #2f5d4a;
  color: var(--ps-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0 0 0 8px var(--ps-white);
}

/* The compare section's own checkout error, centred above its button. */
[data-ps-pro-cta-error] {
  text-align: center;
  margin: 0 0 0.75rem;
}

@media screen and (max-width: 900px) {
  .ps-vs__pivot span { width: 52px; height: 52px; font-size: 14px; }
}

/* ── Footer: the "For suppliers" links (2026-08-14) ────────────────────────
   The block used to be appended as a stray child of the footer grid, which
   dropped it into an empty slot at the bottom-left ("the footer is a mess").
   It now lives inside the logo column, directly under the PS logo — the
   client's suggested placement. */
.ps-footer-suppliers {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.75rem;
}
.ps-footer-suppliers .nav_group_title {
  margin-bottom: 0.2rem;
}

/* ============================================================================
   CLIENT TWEAKS — 2026-08-14, round 3
   ----------------------------------------------------------------------------
   1. Compares box: the two sides were independent stacks, so three short left
      items ended a full screen above the right column and the box was mostly
      air. The sides and lists are now display:contents and each item is placed
      on the SAME grid row as its opposite number, so every pair shares a top
      line and the left column spreads the full height. (The <br> after each
      right-side heading doubled the gap under it — strong is already
      display:block — and is gone from the markup.)
   2. Subtle hover on the Pro card.
   3. RECOMMENDED badge up another step.
   ========================================================================== */

.ps-vs {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  row-gap: 2.25rem;
  padding: 2.75rem 2rem;
}
.ps-vs__side,
.ps-vs__list {
  display: contents;
}
.ps-vs__name,
.ps-vs__name--ps {
  margin-bottom: 0;
}
.ps-vs__item {
  margin-bottom: 0;
}
.ps-vs__name--ps {
  grid-column: 1;
  grid-row: 1;
  padding-right: 2.5rem;
}
.ps-vs__side--them .ps-vs__name {
  grid-column: 3;
  grid-row: 1;
  padding-left: 2.5rem;
}
.ps-vs__side:not(.ps-vs__side--them) .ps-vs__item {
  grid-column: 1;
  padding-right: 2.5rem;
}
.ps-vs__side--them .ps-vs__item {
  grid-column: 3;
  padding-left: 2.5rem;
}
.ps-vs__side:not(.ps-vs__side--them) .ps-vs__item:nth-child(1),
.ps-vs__side--them .ps-vs__item:nth-child(1) { grid-row: 2; }
.ps-vs__side:not(.ps-vs__side--them) .ps-vs__item:nth-child(2),
.ps-vs__side--them .ps-vs__item:nth-child(2) { grid-row: 3; }
.ps-vs__side:not(.ps-vs__side--them) .ps-vs__item:nth-child(3),
.ps-vs__side--them .ps-vs__item:nth-child(3) { grid-row: 4; }
.ps-vs__pivot {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: stretch;
}

/* ── Pro card: subtle hover ── */
.ps-plan--pro {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ps-plan--pro:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(24, 24, 29, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .ps-plan--pro { transition: none; }
  .ps-plan--pro:hover { transform: none; }
}

/* ── RECOMMENDED badge, one more step up ── */
.ps-plan__badge {
  font-size: 14px;
  line-height: 20px;
  padding: 0.8rem 1.4rem;
}

@media screen and (max-width: 900px) {
  /* The aligned grid is a desktop layout. Stacked, the sides go back to
     normal flow and the pivot's existing horizontal-divider styling applies. */
  .ps-vs { display: block; padding: 2rem 1.5rem; }
  .ps-vs__side, .ps-vs__list { display: block; }
  .ps-vs__list { list-style: none; margin: 0; padding: 0; }
  .ps-vs__name--ps,
  .ps-vs__side--them .ps-vs__name { padding-left: 0; padding-right: 0; margin-bottom: 1.5rem; }
  .ps-vs__side:not(.ps-vs__side--them) .ps-vs__item,
  .ps-vs__side--them .ps-vs__item { padding-left: 0; padding-right: 0; margin-bottom: 1.5rem; }
  .ps-vs__item:last-child { margin-bottom: 0; }
}

/* ============================================================================
   CLIENT TWEAKS — 2026-08-14, round 4: the compares box, properly
   ----------------------------------------------------------------------------
   Round 3 put each pair on a shared grid row but TOP-aligned the cells, so a
   one-line left point sat beside a six-line right block with a void under it —
   which read as broken, not aligned. Now each row works like a table row:
   cells stretch to the row, their content centres vertically, and a hairline
   rule sits on every row boundary so the pairing is explicit. The rule lives
   on the stretched cell's top edge, which is the row line — putting it on a
   centred cell would float it mid-air.
   ========================================================================== */

.ps-vs {
  align-items: stretch;
  row-gap: 0;
}
.ps-vs__name--ps,
.ps-vs__side--them .ps-vs__name {
  padding-bottom: 1.5rem;
}
.ps-vs__side:not(.ps-vs__side--them) .ps-vs__item,
.ps-vs__side--them .ps-vs__item {
  align-self: stretch;
  align-content: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--ps-white-smoke);
}

@media screen and (max-width: 900px) {
  /* Stacked layout: no shared rows, so no row rules and no row padding. */
  .ps-vs__side:not(.ps-vs__side--them) .ps-vs__item,
  .ps-vs__side--them .ps-vs__item {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
  }
  .ps-vs__name--ps,
  .ps-vs__side--them .ps-vs__name { padding-bottom: 0; }
}

/* ============================================================================
   CLIENT TWEAKS — 2026-08-14, round 5
   ----------------------------------------------------------------------------
   1. "For Suppliers" dropdown in the top nav (CSS-only hover/focus menu — the
      shell carries no Webflow JS, so a w-dropdown would be dead markup).
      ⚠ This menu lives OUTSIDE .ps-scope, so no var(--ps-*) here: the tokens
      are literal on purpose.
   2. Stripe wordmark in the trust rows, in place of the word "Stripe".
      Official mark, inlined, currentColor so it stays as muted as the text.
   3. /supplier-signup: the pitch column becomes a mint-cream panel with the
      contact block pinned to its foot, the form gets its own padding instead
      of a floating rule (.ps-form's border-top), and the hero-to-card gap
      tightens.
   ========================================================================== */

.ps-nav-suppliers {
  position: relative;
  display: inline-block;
}
.ps-nav-suppliers__trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ps-nav-suppliers__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  min-width: 250px;
  background-color: #fff;
  border: 1px solid rgba(170, 170, 170, 0.25);
  box-shadow: 0 12px 32px rgba(24, 24, 29, 0.10);
  padding: 0.6rem 0;
  display: none;
  flex-direction: column;
}
.ps-nav-suppliers:hover .ps-nav-suppliers__menu,
.ps-nav-suppliers:focus-within .ps-nav-suppliers__menu {
  display: flex;
}
.ps-nav-suppliers__menu a {
  padding: 0.6rem 1.25rem;
  font-family: Lexend, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #18181d;
  text-decoration: none;
  white-space: nowrap;
}
.ps-nav-suppliers__menu a:hover {
  background-color: #fafafa;
  color: #518a71;
}

.ps-trust__stripe {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ps-stripe-mark {
  height: 15px;
  width: auto;
  display: inline-block;
  margin-top: 3px; /* optically centres the lowercase wordmark on the text line */
  opacity: 0.85;
}

[data-ps-signup-page] .ps-section--tight {
  padding-block: 1.25rem;
}
[data-ps-signup-page] .ps-signup__sub {
  margin-bottom: 0;
}
.ps-signup {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  padding: 0;
}
.ps-signup__pitch {
  background-color: var(--ps-mint-cream);
  padding: 2.75rem 2.5rem;
  display: flex;
  flex-direction: column;
}
.ps-signup__pitch .ps-h3 {
  font-size: 26px;
  line-height: 36px;
}
.ps-signup__help {
  margin-top: auto !important;
  padding-top: 2.5rem;
}
.ps-signup__form {
  padding: 2.75rem 2.5rem;
  margin-top: 0;
  border-top: 0;
}

@media screen and (max-width: 900px) {
  .ps-signup { grid-template-columns: 1fr; }
  .ps-signup__pitch { padding: 1.75rem 1.5rem; }
  .ps-signup__form { padding: 1.75rem 1.5rem; }
  .ps-signup__help { margin-top: 1.75rem !important; padding-top: 0; }
  .ps-nav-suppliers__menu { position: static; box-shadow: none; border: 0; }
}