/* ============================================================================
   partner.css — REUSABLE co-branded partner landing template
   ----------------------------------------------------------------------------
   One stylesheet drives every partner activation page (T-Mobile, Kia, …). The
   structure is fixed; the BRAND is a handful of CSS variables set per-partner
   on the `.pp[data-partner="…"]` wrapper. To add a partner you only:

     1. add ONE entry to the PARTNERS array in tools/build-account.mjs
        (slug, brand colours, hero or null, wordmark, copy), then rebuild.
     There is NO per-brand HTML file — every partner renders from the single
     partials-account/partner-template.html. A brand can launch with no art at
     all: leave hero:null and the panel shows the brand colour + dot motif.

   Layout (Mobbin "split auth" — Runway / Mercury / Retool):
     · desktop ≥992px → two full-height columns: LEFT brand panel,
                         RIGHT the (shared, re-themed) activation form
     · mobile         → stacked: compact brand hero, then the form
   How-it-works is a quiet link that opens a polished modal (not a buried
   scroll section) — see `.pp-modal`.

   The activation form is the DRY shared `flow-activate-body` partial. We don't
   restyle it element-by-element for colour — the per-partner <style> block
   REMAPS the shared green token family to the brand, so the CTA, selected ring,
   progress and success tick all recolor from one lever. The rules under
   "PREMIUM FORM" below only restyle the *shape* (flatten cards, refine inputs).
   ========================================================================== */

/* default brand tokens (neutral slate) — every partner overrides these ------ */
.pp {
  --pp-brand: #2A2D31;
  --pp-brand-deep: #16181A;
  --pp-brand-ink: #ffffff;
  --pp-brand-tint: #F1F2F4;
  --pp-brand-soft: rgba(20, 22, 26, 0.30);
  --pp-on-brand: rgba(255, 255, 255, 0.94);
  --pp-on-brand-dim: rgba(255, 255, 255, 0.66);
  --pp-ink: #16181A;
  --pp-ink-soft: #44474B;
  --pp-ink-muted: #6B6F73;
  --pp-line: rgba(16, 24, 26, 0.12);
  --pp-field: rgba(16, 24, 26, 0.16);
  --pp-page-zoom: 0.9;
  --pp-cta-bg: #B4D465;
  --pp-cta-bg-hover: #C0DE78;
  --pp-cta-ink: #16181A;
  display: block;
  position: relative;
}

/* ── ABOVE-FOLD SPLIT ─────────────────────────────────────────────────────── */
.pp-split {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh / var(--pp-page-zoom));
}

@supports (height: 100dvh) {
  .pp-split {
    min-height: calc(100dvh / var(--pp-page-zoom));
  }
}

@media (min-width: 992px) {
  .pp-split {
    flex-direction: row;
    align-items: stretch;
  }
}

/* LEFT — partner brand marketing panel ------------------------------------- */
.pp-brandside {
  position: relative;
  overflow: hidden;
  background: var(--pp-brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(26px, 4vw, 52px);
  min-height: 52vh;
}

@media (min-width: 992px) {
  .pp-brandside {
    flex: 1.04 1 0;
    min-height: 100vh;
  }
}

/* the swappable hero image / video (asset slot) sits behind everything */
.pp-brand-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pp-hero, none);
  background-size: var(--pp-hero-size, cover);
  background-position: var(--pp-hero-pos, center);
  background-repeat: no-repeat;
  background-color: var(--pp-brand);
}

/* faint dot motif so the empty (pre-media) panel still has texture.
   Set --pp-motif-opacity:0 on a partner that supplies a real hero image. */
.pp-brand-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.4px, transparent 1.6px);
  background-size: 28px 28px;
  opacity: var(--pp-motif-opacity, 1);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
}

/* DEFAULT brand graphic — a large, faint ReturnMe swoosh watermark shown when a
   partner launches with NO hero image (so the panel never reads as a flat slab).
   Rendered via mask so it's white on ANY brand colour; hidden once a real hero is
   supplied (--pp-motif-opacity flips to 0). */
.pp-brand-media::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: clamp(-48px, -4vw, -8px);
  bottom: clamp(-40px, -4vw, 8px);
  width: min(540px, 72%);
  height: min(540px, 60%);
  background: #fff;
  -webkit-mask: url('/assets/brand/returnme-mark.png') center / contain no-repeat;
  mask: url('/assets/brand/returnme-mark.png') center / contain no-repeat;
  opacity: calc(var(--pp-motif-opacity, 1) * 0.1);
}

/* success-screen avatar tick: white on the brand-coloured disc (the default dark
   ink is low-contrast on a saturated brand colour like Kia red). */
[data-partner] [data-flow-success] .acct-avatar {
  color: #fff !important;
}

/* legibility scrim — darkens the logo (top-left), copy (left) and foot (bottom)
   zones for white text. Subtle, so a real hero photo stays vibrant; over the
   plain brand fill (no photo) it just adds depth. */
.pp-brand-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 0, 6, 0.34) 0%, rgba(8, 0, 6, 0) 20%, rgba(8, 0, 6, 0) 58%, rgba(8, 0, 6, 0.52) 100%),
    linear-gradient(102deg, rgba(8, 0, 6, 0.46) 0%, rgba(8, 0, 6, 0.08) 42%, rgba(8, 0, 6, 0) 72%);
}

/* lift the CONTENT above the absolute media + scrim — but NOT the media/scrim
   themselves (this `> *` would otherwise override their position:absolute). */
.pp-brandside>*:not(.pp-brand-media):not(.pp-brand-scrim) {
  position: relative;
  z-index: 2;
}

/* top: partner wordmark (only — no ReturnMe attribution per brand brief) */
.pp-brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pp-wordmark {
  font-family: var(--font-display, "Inter Display", Inter, system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(22px, 2.4vw, 30px);
  color: #fff;
  display: inline-flex;
  align-items: center;
}

.pp-wordmark img {
  height: clamp(24px, 2.6vw, 34px);
  width: auto;
  display: block;
}

/* centre copy block — wide + free, never crushed into a narrow column */
.pp-brand-copy {
  max-width: clamp(360px, 40vw, 600px);
}

.pp-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pp-on-brand-dim);
  margin: 0 0 16px;
}

.pp-h1 {
  font-family: var(--font-display, "Inter Display", Inter, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.08;
  font-size: clamp(38px, 4.2vw, 60px);
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 26px rgba(8, 0, 6, 0.35);
  text-wrap: balance;
}

.pp-h1 em {
  font-style: normal;
}

.pp-sub {
  margin: 18px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--pp-on-brand);
  max-width: 36ch;
  text-shadow: 0 1px 16px rgba(8, 0, 6, 0.3);
}

/* foot: a single quiet "How it works" affordance + one-line trust */
.pp-brand-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.pp-how-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.pp-how-link:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.48);
}

.pp-how-link svg {
  width: 16px;
  height: 16px;
}

.pp-brand-trust {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pp-on-brand-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pp-brand-trust svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.85;
}

/* pre-media placeholder hint (delete the node once real media is dropped in) */
.pp-media-slot {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 44px);
  bottom: clamp(20px, 4vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

/* RIGHT — activation panel (hosts the shared wizard) ----------------------- */
.pp-formside {
  position: relative;
  flex: 0.96 1 0;
  background: var(--acct-bg, #fff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4.4vw, 60px) clamp(22px, 4vw, 56px);
}

.pp-form-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/* quiet top links pinned to the top-right of the form panel */
.pp-form-top {
  position: absolute;
  z-index: 3;
  top: clamp(20px, 3vh, 30px);
  right: clamp(22px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: 22px;
}

.pp-toplink {
  font-size: 13px;
  font-weight: 500;
  color: var(--pp-ink-muted);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: color 0.16s ease;
}

.pp-toplink:hover {
  color: var(--pp-ink);
}

.pp-toplink.is-strong {
  color: var(--pp-ink);
  font-weight: 600;
}

/* our own premium form header (built-in wizard intro is hidden) */
.pp-form-head {
  margin-bottom: clamp(22px, 3vh, 30px);
}

.pp-form-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
  font-weight: 700;
  /* AA contrast: the raw brand magenta (#E20074) is only ~4.35:1 on the paper bg
     at this small size; --pp-eyebrow is a darker brand-matched variant (~6:1).
     Falls back to the brand colour for any partner that doesn't define one. */
  color: var(--pp-eyebrow, #A80057);
  margin: 0 0 12px;
}

.pp-form-title {
  font-family: var(--font-display, "Inter Display", Inter, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(26px, 2.8vw, 34px);
  margin: 0;
  color: var(--pp-ink);
}

.pp-form-sub {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pp-ink-soft);
}

/* ── Tag-type grid: larger icons + always 4-col when widget is rendered inline ── */
.flow-typecards--inline {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.flow-typecards--inline .flow-option-icon {
  width: 52px !important;
  height: 52px !important;
}

.flow-typecards--inline .flow-option {
  padding: 12px 10px;
  gap: 10px;
}

/* hide the wizard's own centred intro; we render .pp-form-head instead */
.pp-form-wrap .flow-body>.acct-rise:first-child {
  display: none;
}

/* hide the details step's duplicate heading + lede (the header covers it) */
.pp-form-wrap [data-step="details"]>h3,
.pp-form-wrap [data-step="details"]>p {
  display: none;
}

/* slim, flat step indicator (no boxed card) */
.pp-form-wrap [data-flow-rail-wrap] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 0 14px !important;
  margin: 0 0 22px !important;
  border-bottom: 1px solid var(--pp-line);
}

.pp-form-wrap [data-flow-stepname] {
  font-size: 12px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pp-ink-muted) !important;
}

.pp-form-wrap [data-flow-stepcount] {
  color: var(--pp-ink-muted) !important;
}

/* flatten the step card — fields sit directly on the white panel */
.pp-form-wrap [data-flow-card],
.pp-form-wrap [data-flow-success] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.pp-form-wrap [data-flow-card] .acct-card-body,
.pp-form-wrap [data-flow-success] .acct-card-body {
  padding: 0 !important;
}

/* labels + inputs */
.pp .flow-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pp-ink);
  margin-bottom: 8px;
}

.pp .flow-input {
  border-radius: 12px;
  padding: 14px 15px;
  font-size: 15px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pp-field);
  border: 0;
  transition: box-shadow 0.16s ease;
}

.pp .flow-input::placeholder {
  color: #9A9DA1;
}

.pp .flow-input:focus {
  box-shadow: inset 0 0 0 1.6px var(--pp-brand), 0 0 0 4px color-mix(in srgb, var(--pp-brand) 14%, transparent);
  outline: none;
}

.pp .flow-input-lg {
  border-radius: 13px;
  padding: 16px 16px;
  font-size: 17px;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* refined type picker — clean selectable cards (no cheap photo-tile feel) */
.pp .flow-typecards {
  gap: 10px;
}

.pp .flow-typecards .flow-option {
  padding: 12px 13px;
  border-radius: 13px;
  gap: 11px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--pp-line);
  transition: box-shadow 0.16s ease, background 0.16s ease;
}

.pp .flow-typecards .flow-option:hover {
  box-shadow: inset 0 0 0 1px var(--pp-field);
  background: #fff;
}

.pp .flow-typecards .flow-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  /* background: var(--pp-brand-tint); */
  box-shadow: none;
}

.pp .flow-typecards .flow-option-icon img {
  mix-blend-mode: multiply;
}

.pp .flow-option[data-selected="true"] {
  background: var(--pp-brand-tint) !important;
  box-shadow: inset 0 0 0 2px var(--pp-brand) !important;
}

.pp .flow-option[data-selected="true"] .flow-option-icon {
  background: #fff;
}

.pp .flow-option[data-selected="true"] .flow-option-check {
  background: var(--pp-brand);
  color: #fff;
}

/* PARTNER item picker — six co-branded item types in a clean 3 × 2 grid.
   Scoped to .pp so the shared wizard on return.me keeps all eight options. */
.pp .flow-typecards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pp .flow-typecards [data-flow-value="Pet"],
.pp .flow-typecards [data-flow-value="Other"] {
  display: none;
}

[data-partner="audi"] .flow-typecards {
  grid-template-columns: 1fr;
}

[data-partner="audi"] .flow-typecards [data-flow-value]:not([data-flow-value="Keys"]) {
  display: none;
}

/* "?" ID helper — a legible, on-brand help chip (not a heavy gray-on-black dot).
   Also reset the label's margin inside the row: the standalone .pp .flow-label
   margin-bottom leaks in and pushes the label up, so the chip reads "too low". */
.pp .flow-labelrow .flow-label {
  margin-bottom: 0;
}

.pp .flow-qhelp>summary {
  background: var(--pp-brand-tint);
  color: var(--pp-brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pp-brand) 32%, transparent);
}

.pp .flow-qhelp>summary:hover,
.pp .flow-qhelp[open]>summary {
  background: color-mix(in srgb, var(--pp-brand) 16%, #fff);
}

/* CTAs — one dominant primary, "add another" demoted to a quiet secondary */
.pp .acct-btn-lg {
  padding: 15px 20px;
  font-size: 15.5px;
  border-radius: 12px;
}

.pp .acct-btn-primary {
  background: var(--pp-cta-bg);
  color: var(--pp-cta-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 26, 0.08), 0 8px 22px -10px color-mix(in srgb, var(--pp-brand) 70%, transparent);
}

.pp .acct-btn-primary:hover {
  background: var(--pp-cta-bg-hover);
}

/* "Add another tag" stays the solid black ink button (secondary to the brand CTA) */
.pp .flow-addtag.acct-btn-ink {
  background: var(--pp-ink);
  color: #fff;
}

.pp .flow-addtag.acct-btn-ink:hover {
  background: #000;
}

/* the shared wizard's trailing "Don't have a tag? Shop tags" line is suppressed
   on partner pages — we replace it with our own .pp-form-foot how-it-works link
   (a storefront hand-off doesn't belong on a co-branded activation page). */
.pp-form-wrap .flow-body>p.acct-rise:last-child {
  display: none !important;
}

/* partner foot — "New to ReturnMe? See how it works" (reopens the modal) */
.pp-form-foot {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--pp-line);
  text-align: center;
  font-size: 12.5px;
  color: var(--pp-ink-muted);
}

.pp-form-foot-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-weight: 600;
  color: var(--pp-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.16s ease;
}

.pp-form-foot-link:hover {
  color: var(--pp-brand);
}

/* ── HOW-IT-WORKS MODAL (native <dialog>) ─────────────────────────────────── */
.pp-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  color: var(--pp-ink);
  background: var(--acct-bg, #fff);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.pp-modal::backdrop {
  background: rgba(12, 14, 16, 0.46);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.pp-modal[open] {
  display: flex;
  flex-direction: column;
  animation: pp-modal-in 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes pp-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* top image banner — flush to the card's rounded top (clipped by overflow:hidden) */
.pp-modal-banner {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  height: clamp(132px, 19vw, 188px);
  object-fit: cover;
  object-position: 50% 28%;
}

.pp-modal-inner {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(24px, 4vw, 34px);
  overflow-y: auto;
}

.pp-modal-x {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(12, 14, 16, 0.5);
  color: #fff;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.pp-modal-x:hover {
  background: rgba(12, 14, 16, 0.72);
}

.pp-modal-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pp-brand);
  margin: 0 0 12px;
}

.pp-modal-title {
  font-family: var(--font-display, "Inter Display", Inter, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(24px, 3vw, 30px);
  margin: 0;
  color: var(--pp-ink);
  text-wrap: balance;
}

.pp-modal-title em {
  font-style: normal;
}

.pp-modal-sub {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pp-ink-soft);
  max-width: 56ch;
}

/* "Powered by ReturnMe" lockup inside the modal (white surface → wordmark reads
   directly). Reinforces that ReturnMe, not the partner, operates the recovery. */
.pp-modal-powered {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}

.pp-modal-powered span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-ink-muted);
}

.pp-modal-powered img {
  display: block;
  height: 19px;
  width: auto;
}

/* steps as a connected vertical timeline (icon nodes + linking line) */
.pp-modal-steps {
  list-style: none;
  margin: clamp(24px, 3vw, 30px) 0 0;
  padding: 0;
}

.pp-modal-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding-bottom: 24px;
}

.pp-modal-step:last-child {
  padding-bottom: 0;
}

.pp-modal-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 52px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(var(--pp-brand), color-mix(in srgb, var(--pp-brand) 18%, #fff));
  opacity: 0.5;
  border-radius: 2px;
  transform: translateX(-1px);
}

.pp-modal-ic {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-brand-tint);
  color: var(--pp-brand);
}

.pp-modal-ic svg {
  width: 23px;
  height: 23px;
}

/* number labels removed — the icon nodes + linking line carry the sequence.
   nudge the body down so the title sits optically centred on the icon node. */
.pp-modal-step-body {
  padding-top: 9px;
}

.pp-modal-step h3 {
  font-family: var(--font-display, "Inter Display", Inter, system-ui, sans-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--pp-ink);
}

.pp-modal-step p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.55;
  color: var(--pp-ink-soft);
}

/* trust facts — a calm inline row with hairline dividers (not boxed stat-chips,
   which the brand anti-references flag). Ink numerals, muted labels. */
.pp-modal-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: clamp(22px, 3vw, 28px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pp-line);
}

.pp-modal-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 16px;
}

.pp-modal-fact+.pp-modal-fact {
  border-left: 1px solid var(--pp-line);
}

.pp-modal-fact:first-child {
  padding-left: 0;
}

.pp-modal-fact:last-child {
  padding-right: 0;
}

.pp-modal-fact-v {
  font-family: var(--font-display, "Inter Display", Inter, sans-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--pp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pp-modal-fact-l {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--pp-ink-muted);
}

.pp-modal-cta {
  margin-top: clamp(20px, 3vw, 24px);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display, "Inter Display", Inter, sans-serif);
  font-weight: 600;
  font-size: 15.5px;
  background: var(--pp-brand);
  color: var(--pp-brand-ink);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--pp-brand) 70%, transparent);
  transition: background 0.16s ease;
}

.pp-modal-cta:hover {
  background: var(--pp-brand-deep);
}

/* reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
  .pp-modal[open] {
    animation: none;
  }

  .pp [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── MOBILE refinements ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .pp-form-top {
    position: static;
    right: auto;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 18px;
    justify-content: center;
    gap: 26px;
  }

  /* the hero "How it works" pill is redundant on mobile — the top link covers it */
  .pp-how-link {
    display: none;
  }

  .pp-brandside {
    gap: 22px;
  }

  .pp-brand-copy {
    max-width: 100%;
  }
}