/* Pro page — "The Pro Pass".
   Deliberately the sister of reports-hero.css: same always-dark band, same tilted hero
   object with leaves fanned behind it, same chip rail underneath. The differences are
   only what the object IS (a membership pass, drawn in CSS, not a photographed book)
   and that the pass never swaps — only the copy and the leaves behind it do.

   The foil surface is CSS by default. To layer a generated metal texture over it, save
   the file as wwwroot/images/pro/_hero/foil.webp and uncomment the one line below —
   nothing else changes, and the pass keeps its live, localizable text. */
/* .pp-band, .pp-close { --pp-foil-img: url('/images/pro/_hero/foil.webp') } */

.pp-band {
  --p200: var(--color-primary-200);
  --p300: var(--color-primary-300);
  --p400: var(--color-primary-400);
  --p500: var(--color-primary-500);
  --p600: var(--color-primary-600);
  --p700: var(--color-primary-700);
}

.pp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; width: 100% }

.pp-band { position: relative; isolation: isolate; background: #0b1018; color: #fff; overflow: hidden; padding: 0 }
/* decorative atmospheric glow — a CSS background (no <img>) so it carries no alt obligation */
.pp-photo {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-image: url('/images/pro/_hero/backdrop-glow.webp');
  background-size: cover; background-position: 68% 46%;
}
/* scrim — darken the LEFT for text legibility; let the glow on the right read through */
.pp-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #0b1018 0%, rgba(11,16,24,.92) 25%, rgba(11,16,24,.5) 45%, rgba(11,16,24,.08) 66%, transparent 88%);
}
.pp-stage {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3vw, 46px); align-items: center; min-height: clamp(440px, 46vw, 570px);
}

/* ── left text column ───────────────────────────────────────────── */
.pp-copy { position: relative; z-index: 3; grid-column: 1; grid-row: 1; align-self: center; max-width: 29rem; padding: clamp(36px, 6vw, 72px) 0 }
/* The swappable text group fades as one, and reserves the tallest state's height so the
   price + CTA below never jump on a swap. Reserving it on the GROUP (not on .pp-h and
   .pp-sub separately) matters: a short state — Hindi headlines are usually one line where
   English wraps to two — then pads at the bottom instead of opening a hole mid-copy. */
.pp-swap { transition: opacity .34s ease, transform .34s ease; will-change: opacity, transform }
@media (min-width: 901px) { .pp-swap { min-height: 14rem } } /* measured: tallest state is 219px @1440 */
.pp-band.is-swapping .pp-swap { opacity: 0; transform: translateY(10px) }

.pp-tag {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--p300); background: color-mix(in srgb, var(--color-primary-400) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary-400) 42%, transparent);
  padding: .34rem .72rem; border-radius: 999px;
}
.pp-tag svg { width: 13px; height: 13px; flex: none }
.pp-h {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: -.8px; line-height: 1.08;
  font-size: clamp(1.95rem, 4.2vw, 3.05rem); margin: 0; color: #fff; text-wrap: balance;
}
.pp-h em { font-style: italic; color: var(--p300) }
.pp-sub { margin: 1.05rem 0 0; max-width: 26rem; font-size: 1.02rem; line-height: 1.6; color: rgba(233,240,250,.74) }

/* price + CTAs — these do NOT swap: one pass, one price */
.pp-act { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.9rem }
.pp-price { font-family: var(--font-serif); font-size: 1.85rem; color: #fff; white-space: nowrap; line-height: 1.05 }
.pp-price s { font-size: .62em; color: rgba(233,240,250,.42); margin-right: .35rem; text-decoration-thickness: 1px }
.pp-price small {
  display: block; font-family: var(--font-sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: rgba(233,240,250,.55); margin-top: 4px;
}
.pp-cta { min-width: 11.5rem }
.pp-alt {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700;
  color: var(--p300); transition: gap .2s;
}
.pp-alt svg { width: 16px; height: 16px; transition: transform .2s }
.pp-alt:hover { gap: .7rem } .pp-alt:hover svg { transform: translateX(3px) }

/* member state — replaces the price block when the visitor already has Pro */
.pp-member {
  display: inline-flex; align-items: center; gap: .85rem; margin-top: 1.9rem;
  padding: .8rem 1.15rem .8rem .9rem; border-radius: 14px;
  background: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary-400) 40%, transparent);
}
.pp-member__txt { display: block; font-weight: 600; color: #fff; font-size: .96rem }
.pp-member a { display: block; font-size: .82rem; color: var(--p300); text-wrap: balance }
.pp-member a:hover { color: var(--p200) }

/* ── the pass + the two leaves fanned behind it ─────────────────── */
/* top:54% rather than 50%: the fan reaches ~1.3 pass-heights ABOVE the pass, so centring
   the pass centres the wrong thing and the top leaf grazes the band's overflow:hidden.
   There is 126px of slack below, so the group rides low and clears comfortably. */
.pp-float {
  position: absolute; z-index: 3; left: 66%; top: 54%; width: clamp(252px, 26vw, 340px);
  transform: translate(-50%, -50%); transition: transform .25s ease-out;
}
/* warm glow halo centred on the pass — keeps it lit on every layout */
.pp-float::before {
  content: ""; position: absolute; left: 46%; top: 52%; width: 196%; height: 230%;
  transform: translate(-50%, -50%); z-index: -2;
  background: radial-gradient(ellipse at center, rgba(249,162,78,.5), rgba(244,138,58,.17) 42%, transparent 68%);
  filter: blur(24px); pointer-events: none;
}
.pp-floatwrap { position: relative; transition: opacity .34s ease, transform .34s ease; will-change: opacity, transform }
/* The pass belongs to the overview state only. On a capability state it fades out but keeps
   its layout box — it is the wrapper's only in-flow child, so the leaves' percentage offsets
   stay valid — and the leaves slide down into the space it vacated.
   The shift rides a custom property rather than a second `transform` rule so the swap fade
   below (opacity only) can never fight it and snap the leaves mid-transition. */
.pp-leaves {
  position: absolute; inset: 0; --leaf-shift: none; transform: var(--leaf-shift);
  transition: opacity .34s ease, transform .34s ease; will-change: opacity, transform;
}
.pp-band.is-cap .pp-leaves { --leaf-shift: translate(-9%, 52%) }
.pp-band.is-cap .pp-pass { opacity: 0 }
.pp-band.is-swapping .pp-leaves,
.pp-band.is-swapping .pp-pass { opacity: 0 }

.pp-leaf {
  position: absolute; width: 96%; border-radius: 9px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.06);
}
.pp-leaf img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top }
.pp-leaf1 { top: -38%; right: -16%; z-index: 1; transform: rotate(6.5deg) }
.pp-leaf2 { top: -62%; right: -33%; z-index: 0; transform: rotate(13deg) }

/* the pass itself — brushed foil drawn in CSS, credit-card proportions */
.pp-pass {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between;
  transition: opacity .34s ease;
  aspect-ratio: 1.586; padding: clamp(13px, 1.5vw, 18px) clamp(15px, 1.7vw, 20px);
  border-radius: clamp(11px, 1.2vw, 15px); transform: rotate(-7deg) translate(-6%, 14%);
  color: #33240f; border: 1px solid rgba(255,250,236,.5);
  background:
    /* brushed micro-lines */
    repeating-linear-gradient(112deg, rgba(255,255,255,.11) 0 1px, transparent 1px 4px),
    /* foil body */
    linear-gradient(135deg, #fbeed0 0%, #e9c88b 17%, #cf9f55 38%, #ab7a35 56%, #8d6127 70%, #cfa460 87%, #f7e7bf 100%);
  box-shadow:
    0 26px 52px -20px rgba(0,0,0,.68),
    0 4px 14px -4px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,252,242,.7),
    inset 0 -1px 0 rgba(90,60,20,.35);
}
/* milled inner edge — the detail that separates "metal card" from "gold rectangle" */
.pp-pass::before {
  content: ""; position: absolute; inset: 5px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(88,58,20,.22);
  box-shadow: inset 0 0 0 1px rgba(255,250,235,.34);
}
/* diagonal sheen */
.pp-pass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(122deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.03) 26%, transparent 44%, rgba(255,255,255,.15) 72%, transparent 90%);
}
/* optional generated foil texture — drops in over the CSS foil, nothing else changes */
.pp-pass__foil {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: var(--pp-foil-img, none); background-size: cover; background-position: center;
  mix-blend-mode: overlay; opacity: .55;
}
.pp-pass__row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.pp-pass__row--end { align-items: flex-end }
.pp-pass__brand { font-size: clamp(.47rem, .6vw, .6rem); font-weight: 800; letter-spacing: .2em }
.pp-pass__mark {
  display: grid; place-items: center; width: clamp(19px, 2vw, 25px); aspect-ratio: 1; border-radius: 30%;
  background: rgba(38,27,12,.86); color: #ecd0a4; font-family: var(--font-serif); font-size: clamp(.7rem, .95vw, .9rem); line-height: 1;
}
.pp-pass__word {
  position: relative; z-index: 1; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1; letter-spacing: 1px; margin: 0;
}
.pp-pass__since { font-size: clamp(.45rem, .56vw, .56rem); font-weight: 700; letter-spacing: .14em; line-height: 1.5; opacity: .88 }
/* Devanagari clusters break up under Latin-scale tracking, and this one sits in a fixed-width graphic */
html[lang="hi"] .pp-pass__since { letter-spacing: .02em }
.pp-pass__mandala { width: clamp(30px, 3.6vw, 46px); height: auto; opacity: .5; flex: none }

/* ── the capability rail ─────────────────────────────────────────── */
.pp-rail { position: relative; z-index: 3; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.36)) }
.pp-railin { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 34px); padding: clamp(22px, 3vw, 30px) 0 }
.pp-raillab { flex: none; max-width: 8.5rem }
.pp-raillab .e { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--p300); display: block }
.pp-raillab .t { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.25; color: #fff; margin-top: .35rem; display: block }

.pp-pick { display: flex; gap: clamp(12px, 1.6vw, 18px); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; scroll-snap-type: x mandatory }
.pp-pick::-webkit-scrollbar { display: none }
.pp-chip {
  flex: 1 1 0; min-width: 174px; scroll-snap-align: start; display: flex; align-items: center; gap: .6rem;
  text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px; padding: .6rem .75rem; cursor: pointer; color: #fff; font-family: inherit;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; position: relative;
}
.pp-chip:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2) }
.pp-chip:focus-visible { outline: 2px solid var(--p400); outline-offset: 2px }
.pp-chip .ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--color-primary-400) 16%, transparent); color: var(--p300) }
.pp-chip .ico svg { width: 16px; height: 16px }
.pp-chip .meta { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.pp-chip .nm { font-family: var(--font-serif); font-size: .85rem; line-height: 1.2; color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden }
.pp-chip .nt { font-size: .75rem; font-weight: 500; line-height: 1.3; color: rgba(233,240,250,.58); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden }
.pp-chip[aria-pressed="true"] { background: rgba(var(--shadow-tint), .18); border-color: transparent; box-shadow: 0 0 0 2px var(--p400), 0 12px 28px -12px rgba(var(--shadow-tint), .6) }
.pp-chip[aria-pressed="true"] .ico { background: var(--p400); color: #26190a }
.pp-chip[aria-pressed="true"] .nt { color: rgba(255,255,255,.78) }
.pp-chip .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--p400); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s }
.pp-chip[aria-pressed="true"] .dot { opacity: 1; transform: scale(1) }

.pp-browse { flex: none; display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--p300); padding-left: clamp(6px, 1vw, 12px) }
.pp-browse svg { width: 16px; height: 16px; transition: transform .2s } .pp-browse:hover svg { transform: translateX(4px) }

/* CTA — self-contained, same shape as the reports hero's */
.pp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; border: 0;
  border-radius: 10px; font-family: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 1.4px;
  font-size: .75rem; padding: .82rem 1.5rem; background: linear-gradient(135deg, var(--p500), var(--p700));
  color: #fff; box-shadow: 0 2px 12px rgba(var(--shadow-tint), .28); transition: transform .25s, box-shadow .25s;
}
.pp-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--shadow-tint), .38) }

/* ── capability sections ────────────────────────────────────────── */
.pp-cap { position: relative; padding: clamp(56px, 7vw, 92px) 0 }
.pp-cap + .pp-cap { border-top: 1px solid var(--color-surface-300) }
.dark .pp-cap + .pp-cap { border-top-color: var(--color-surface-700) }
/* the alternating tint carries the reading rhythm; the flip class already marks every other row */
.pp-cap--flip { background: var(--color-surface-100) }
.dark .pp-cap--flip { background: var(--color-surface-900) }
/* Side alternation comes from the MARKUP (art-first in B1/B3, text-first in B2/B4).
   Do not add an `order` rule here — one did, and it pulled every row's art to the left. */
.pp-cap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center }

.pp-cap__art { position: relative; isolation: isolate }
.pp-cap__art::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 118%; height: 128%; transform: translate(-50%, -50%);
  z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-primary-400) 26%, transparent), transparent 66%);
  filter: blur(30px);
}
/* the shot is presented as a physical card with a page-block edge — the same
   "you can pick this up" language as the pass and the /reports covers */
.pp-shot { display: block; width: 100%; border-radius: 12px; transform: rotate(-1.5deg) }
.pp-cap--flip .pp-shot { transform: rotate(1.5deg) }
.pp-shot img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow:
    4px 3px 0 #f3ead8, 8px 6px 0 #e9dcc4, 12px 9px 0 #ddceb0,
    -1px 0 0 rgba(0,0,0,.12),
    0 20px 36px -18px rgba(0,0,0,.42), 0 48px 70px -34px rgba(0,0,0,.4);
}
.dark .pp-shot img {
  box-shadow:
    4px 3px 0 #2b2419, 8px 6px 0 #241e15, 12px 9px 0 #1c1811,
    -1px 0 0 rgba(0,0,0,.5),
    0 20px 36px -18px rgba(0,0,0,.7), 0 48px 70px -34px rgba(0,0,0,.75);
}

.pp-list { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem }
.pp-list li { display: flex; align-items: flex-start; gap: .65rem; color: var(--color-stone-700); line-height: 1.55 }
.dark .pp-list li { color: var(--color-stone-300) }
.pp-list svg { width: 18px; height: 18px; flex: none; margin-top: .22rem; color: var(--color-primary-600) }
.dark .pp-list svg { color: var(--color-primary-400) }

/* ── perks strip: one object with three cells, not three cards ───── */
.pp-perks {
  display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: center; gap: clamp(16px, 3vw, 34px);
  border: 1px solid var(--color-surface-300); border-left: 3px solid var(--color-primary-500);
  border-radius: 0 16px 16px 0; padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 34px);
  background: var(--color-surface-50);
}
.dark .pp-perks { border-color: var(--color-surface-700); border-left-color: var(--color-primary-500); background: color-mix(in srgb, var(--color-surface-800) 90%, #fff) }
.pp-perks__lab { font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--color-primary-700); max-width: 7rem; line-height: 1.5 }
.dark .pp-perks__lab { color: var(--color-primary-400) }
.pp-perk { position: relative; padding-left: clamp(16px, 3vw, 34px); border-left: 1px solid var(--color-surface-300) }
.dark .pp-perk { border-left-color: var(--color-surface-700) }
.pp-perk b { display: block; font-weight: 600; color: var(--color-stone-900); margin-bottom: .15rem }
.dark .pp-perk b { color: var(--color-stone-100) }
.pp-perk span { font-size: .88rem; line-height: 1.5; color: var(--color-stone-600) }
.dark .pp-perk span { color: var(--color-stone-400) }

/* ── closing band ───────────────────────────────────────────────── */
.pp-close {
  position: relative; overflow: hidden; border-radius: 24px; padding: clamp(34px, 5vw, 58px);
  /* primary-900 direct reads muddy; mixing the gold into the dark surface keeps the corner
     warm and on-scheme whichever colour scheme the visitor picked */
  background: linear-gradient(135deg, var(--color-surface-950) 0%, var(--color-surface-900) 48%, color-mix(in srgb, var(--color-primary-700) 40%, var(--color-surface-950)) 100%);
  color: #fff; display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center;
}
.pp-close__art { width: clamp(150px, 17vw, 208px); flex: none }
.pp-close .pp-pass { transform: rotate(-7deg) }
.pp-close__h { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.1; letter-spacing: -.5px; margin: 0; color: #fffbf0 }
.pp-close__sub { margin: .9rem 0 0; font-size: 1.02rem; line-height: 1.6; color: rgba(255,251,240,.76); max-width: 34rem }
.pp-close__act { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.7rem }
.pp-close__fine { margin: 1.1rem 0 0; font-size: .82rem; color: rgba(255,251,240,.5) }

/* ── motion / responsive ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pp-swap, .pp-leaves, .pp-pass, .pp-float { transition: opacity .12s ease }
  .pp-band.is-swapping .pp-swap { transform: none }
}

@media (max-width: 1100px) {
  .pp-float { left: 68% }
}

@media (max-width: 900px) {
  /* tablet + mobile: stack and CENTRE — the pass sits centred in its own halo, text below */
  .pp-stage { display: flex; flex-direction: column; align-items: center; min-height: 0 }
  .pp-photo { background-position: 60% 24% }
  .pp-band::after { background: linear-gradient(180deg, transparent 0%, rgba(11,16,24,.1) 26%, rgba(11,16,24,.82) 50%, #0b1018 72%) }
  .pp-float {
    /* the top margin has to clear the fanned leaves, which sit ~1.3 pass-heights above the
       pass itself; the nudge left keeps the whole fan inside the band's overflow:hidden */
    order: -1; position: relative; left: auto; top: auto; transform: translateX(-5%);
    margin: clamp(120px, 31vw, 150px) auto clamp(24px, 5vw, 34px); width: clamp(230px, 46vw, 290px);
  }
  .pp-copy { max-width: 34rem; margin: 0 auto; padding: 0 22px 32px; text-align: center }
  .pp-h { font-size: clamp(1.72rem, 7.6vw, 2.3rem) }
  .pp-sub { margin-left: auto; margin-right: auto }
  .pp-act { justify-content: center; gap: 1rem 1.25rem; margin-top: 1.6rem }
  .pp-cta { min-width: 0; flex: 1 1 100%; max-width: 20rem; margin: 0 auto }
  .pp-member { margin-top: 1.6rem; text-align: left }
  .pp-railin { flex-direction: column; align-items: stretch; gap: 14px }
  .pp-raillab { max-width: none; text-align: center }
  .pp-pick { padding-bottom: 10px; gap: 12px }
  .pp-chip { flex: none; min-width: 178px }
  .pp-browse { align-self: center; padding-left: 0; margin-top: 2px }

  .pp-cap__grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px) }
  /* stacked: the art leads every row, whichever side it took on desktop */
  .pp-cap__art { order: -1 }
  .pp-shot, .pp-cap--flip .pp-shot { transform: none }
  .pp-shot img { box-shadow: 3px 2px 0 #f3ead8, 6px 4px 0 #e9dcc4, 0 16px 30px -16px rgba(0,0,0,.4) }
  .dark .pp-shot img { box-shadow: 3px 2px 0 #2b2419, 6px 4px 0 #241e15, 0 16px 30px -16px rgba(0,0,0,.7) }

  .pp-perks { grid-template-columns: 1fr; border-radius: 0 16px 16px 0; gap: 18px }
  .pp-perk { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--color-surface-300) }
  .dark .pp-perk { border-top-color: var(--color-surface-700) }

  .pp-close { grid-template-columns: 1fr; text-align: center; justify-items: center }
  .pp-close__art { order: -1; width: clamp(140px, 42vw, 180px); margin-bottom: 8px }
  .pp-close__sub { margin-left: auto; margin-right: auto }
  .pp-close__act { justify-content: center }
}

@media (max-width: 420px) {
  .pp-h { font-size: clamp(1.6rem, 8vw, 2rem) }
  .pp-chip { min-width: 164px }
  .pp-float { margin-top: clamp(104px, 30vw, 124px) }
}