/* =====================================================================
   RIVET product pages: /pricing and /plans/* (round 3, owner, 28 Oct 2026).
   One template for every product: a membership plan, a course, a training.
   Light mode (membership and courses). Type is the site's own system (round 4 review, 28 Oct 2026):
   Plex Sans 600 sentence-case headlines and Sans 700 prices; Plex Mono only for eyebrows, meta and labels.
   Brand OS v1.2: magenta = one action (plus at most one insight) per screen,
   registered duos only on bounded cards, cards without borders, AA contrast,
   purple focus ring (white on dark cards), reduced motion honoured.
   Phone first: every rule is written for 402px, then widened.
   Loads LAST (after mobile.css), scoped to main.pp, so it touches no other page.
   ===================================================================== */

.pp{
  --pp-ground:#FFFFFF; --pp-ghost:#F8F8FA; --pp-ink:#000000; --pp-muted:#4A4A68; --pp-hair:#E4E4EB;
  --pp-purple:#3B06D4; --pp-purple-50:#F6F8FF; --pp-magenta:#FF00D4; --pp-green:#00D982; --pp-slate-600:#727293;
  --pp-focus:#3B06D4; --pp-focus-dark:#FFFFFF;
  --pp-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --pp-shadow-lift:0 1px 2px rgba(0,0,0,.06), 0 24px 48px -24px rgba(17,12,46,.32);
  --pp-mono:'IBM Plex Mono', ui-monospace, monospace;
  --pp-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --pp-hand:'Square Peg', cursive;
  --pp-ease:cubic-bezier(.2,0,0,1);
  --pp-gut:16px;
  background:var(--pp-ground); color:var(--pp-ink); font-family:var(--pp-sans);
  font-size:14px; line-height:1.6;
}
.pp *, .pp *::before, .pp *::after{ box-sizing:border-box; }
.pp :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){ margin:0; }
.pp :where(ul,ol){ padding:0; list-style:none; }
:where(.pp) a{ color:inherit; }
.pp :where(a,button,summary,[tabindex]):focus-visible{ outline:3px solid var(--pp-focus); outline-offset:2px; border-radius:8px; }
.pp .sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* layout */
.pp-wrap{ width:100%; max-width:1328px; margin-inline:auto; padding-inline:var(--pp-gut); }
.pp-sec{ padding-block:56px; scroll-margin-top:84px; }
.pp-sec--ghost{ background:var(--pp-ghost); }
.pp-sec--tight{ padding-block:40px; }
@media (min-width:600px){ .pp{ --pp-gut:24px; font-size:16px; } .pp-sec{ padding-block:80px; } }
@media (min-width:1024px){ .pp{ --pp-gut:40px; } .pp-sec{ padding-block:112px; } .pp-sec--tight{ padding-block:64px; } }

/* type */
.pp-eyebrow{ display:block; font:500 12px/1.4 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pp-muted); }
/* H1: the membership .display scale (--step-5), sentence case, the last phrase in purple */
.pp-h1{ font:600 var(--step-5, clamp(2.3rem, 1.95rem + 1.5vw, 3.3rem))/1.04 var(--pp-sans); letter-spacing:-.03em; color:var(--pp-ink); text-wrap:balance; }
.pp-h1 > span{ display:block; }
.pp-h1 > span:last-child{ color:var(--slate, #4A4A68); }   /* the tail recedes in slate (type.css agrees); purple is the focus ring here */
/* H2: the same section-title scale as the product pages (assets/product.css) */
.pp-h2{ font:600 clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem)/1.08 var(--pp-sans); letter-spacing:-.03em; color:var(--pp-ink); text-wrap:balance; }
.pp-h3{ font:600 20px/1.25 var(--pp-sans); letter-spacing:-.01em; color:inherit; }
/* every product name on the page (plans, courses, teams, free courses) in one style: Sans 600, h3 */
.pp-course .pp-h3, .pp-team .pp-h3, .pp-free .pp-h3, .pp-inc__course .pp-h3{ font:600 var(--step-2, 24px)/1.12 var(--pp-sans); letter-spacing:-.018em; }
.pp-lead{ font-size:16px; line-height:1.55; color:var(--pp-muted); text-wrap:pretty; max-width:38rem; }
.pp-small{ font-size:14px; line-height:1.5; color:var(--pp-muted); }
.pp-head{ display:grid; gap:12px; margin-bottom:28px; max-width:46rem; }
.pp-head--center{ margin-inline:auto; text-align:center; justify-items:center; }
@media (min-width:600px){ .pp-h3{ font-size:24px; } .pp-lead{ font-size:18px; } .pp-head{ margin-bottom:40px; } }
@media (min-width:1024px){ .pp-head{ margin-bottom:56px; } }

/* buttons: magenta = the one action; ink = every other action */
.pp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px;
  border-radius:8px; border:0; font:600 16px/1.2 var(--pp-sans); text-decoration:none; text-align:center; cursor:pointer;
  transition:background-color .12s var(--pp-ease), transform .12s var(--pp-ease); }
.pp-btn svg{ flex:none; width:18px; height:18px; }
.pp-btn:active{ transform:translateY(1px); }
.pp-btn--magenta{ background:var(--pp-magenta); color:#fff; }
.pp-btn--magenta:hover{ background:#E600BF; }
.pp-btn--ink{ background:var(--pp-ink); color:#fff; }
.pp-btn--ink:hover{ background:#22222C; }
.pp-btn--white{ background:#fff; color:var(--pp-ink); }
.pp-btn--white:hover{ background:#EDEDF2; }
.pp-btn--block{ width:100%; }
.pp-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:5px; }
.pp-link svg{ width:16px; height:16px; flex:none; transition:transform .12s var(--pp-ease); }
.pp-link:hover svg{ transform:translateX(3px); }
.pp-ic{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* =========================== PRICING =========================== */
.pp-phero{ background:var(--pp-ghost); padding-block:32px 8px; }
.pp-phero__grid{ display:grid; gap:20px; }
.pp-phero__side{ display:grid; gap:18px; align-content:start; }
.pp-members{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--pp-muted); }
.pp-members__faces{ display:flex; }
.pp-members__faces img{ width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--pp-ghost); margin-left:-8px; background:#ddd; }
.pp-members__faces img:first-child{ margin-left:0; }
.pp-members b{ font-family:var(--pp-sans); font-weight:700; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.pp-jump{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--pp-gut)); padding:2px var(--pp-gut) 4px; }
.pp-jump::-webkit-scrollbar{ display:none; }
.pp-jump a{ flex:none; display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:999px; background:#fff; box-shadow:var(--pp-shadow);
  font:500 12px/1 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--pp-ink); }
.pp-jump a:hover{ background:var(--pp-purple-50); }
@media (max-width:599px){ .pp-jump{ display:none; } }
@media (min-width:1024px){
  .pp-phero{ padding-block:56px 16px; }
  .pp-phero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start; }
  .pp-jump{ margin-inline:0; padding-inline:0; flex-wrap:wrap; overflow:visible; }
}
/* at 96px the three H1 lines need 8 of 12 columns */
@media (min-width:1440px){
  .pp-phero{ padding-block:72px 16px; }
  .pp-phero__grid{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
}

/* plan cards */
.pp-plans-sec{ background:var(--pp-ghost); padding-block:24px 56px; }
.pp-plans{ display:grid; gap:16px; }
.pp-plan{ position:relative; display:flex; flex-direction:column; gap:16px; padding:24px 20px; border-radius:24px; background:#fff; box-shadow:var(--pp-shadow); scroll-margin-top:96px; }
.pp-plan__k{ font:500 12px/1.4 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pp-muted); }
.pp-plan__name{ font:600 var(--step-2, 24px)/1.12 var(--pp-sans); letter-spacing:-.018em; }
.pp-plan__name a{ text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }  /* F3: 44px tap target */
.pp-plan__name a:hover{ text-decoration:underline; text-underline-offset:4px; }
.pp-plan__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
/* .pp-plan__price b takes .t-price from type.css (Plex Mono 500, 24 → 32, tabular): no size here */
.pp-plan__price > span{ font-size:1em; color:var(--pp-muted); }
.pp-plan__for{ font-size:14px; line-height:1.5; color:var(--pp-muted); }
.pp-plan__for b{ color:var(--pp-ink); font-weight:600; }
.pp-plan__cta{ display:grid; gap:8px; align-content:start; }   /* the button keeps its height when a sibling card's row is taller */
.pp-plan__fine{ font-size:14px; line-height:1.45; color:var(--pp-muted); text-align:center; }
.pp-plan__inc{ border-top:1px solid var(--pp-hair); padding-top:16px; display:grid; gap:12px; }
.pp-plan__plus{ display:flex; align-items:center; gap:8px; font:600 12px/1.4 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; }
.pp-plus{ flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pp-plan__more{ margin-top:auto; }

.pp-ticks{ display:grid; gap:10px; }
.pp-ticks li{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:1em; line-height:1.45; }
.pp-ticks li::before{ content:""; width:22px; height:22px; margin-top:0; border-radius:50%;
  background:var(--pp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; }
.pp-ticks a{ font-weight:600; text-underline-offset:3px; }

/* the featured plan: the Depth duo (black -> purple, full-field safe for white ink). Purple at the top edge only,
   black from the middle down, where the one magenta action sits (magenta needs >= 3:1 behind it: black, not purple) */
.pp-plan--feat{ color:#fff; background:linear-gradient(to bottom, #3B06D4 0%, #000000 52% 100%); box-shadow:var(--pp-shadow-lift); }
.pp-plan--feat .pp-plan__k, .pp-plan--feat .pp-plan__price > span, .pp-plan--feat .pp-plan__for, .pp-plan--feat .pp-plan__fine{ color:#D1D1D9; }
.pp-plan--feat .pp-plan__for b, .pp-plan--feat .pp-plan__name{ color:#fff; }
.pp-plan--feat .pp-plan__inc{ border-top-color:rgba(255,255,255,.18); }
.pp-plan--feat :where(a,button):focus-visible{ outline-color:var(--pp-focus-dark); }
.pp-plan--feat .pp-link, .pp-plan--feat .pp-plan__name a, .pp-plan--feat .pp-ticks a{ color:#fff; }

.pp-plans-note{ margin-top:24px; display:grid; gap:6px; text-align:center; font-size:14px; color:var(--pp-muted); }
.pp-plans-note a{ color:var(--pp-ink); font-weight:600; text-underline-offset:3px; }

/* four memberships: Free · Pro · Max · Infinite (owner, 30 Oct 2026; Teams is the Individual / Team switch below).
   One column (phones): Pro, the recommended membership, and its Apply come first; 2 x 2 from 760px; four across from 1280px. */
.pp-anchor{ position:absolute; top:0; left:0; width:1px; height:1px; scroll-margin-top:96px; }   /* out of the card grid */
.pp-plan__pricing{ display:grid; gap:6px; }
/* the bundle's course value, struck (FACTS price.anchor: memberships only, worded as value, never "you save") */
.pp-plan__value{ font-size:14px; line-height:1.4; color:var(--pp-muted); }
.pp-plan__vnote{ display:block; font-size:13px; }
.pp-plan__value s{ text-decoration-thickness:1.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pp-plan__note{ font-size:14px; line-height:1.45; color:var(--pp-muted); }
.pp-ticks small{ display:block; margin-top:4px; font:500 12px/1.3 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pp-muted); }
.pp-plan--feat .pp-ticks small, .pp-plan--feat .pp-plan__value, .pp-plan--feat .pp-plan__note{ color:#D1D1D9; }
/* phones keep the ladder order Free, Pro, Max, Infinite (review fix 8); Pro stays highlighted by its card */
@media (min-width:600px){ .pp-plans{ max-width:560px; margin-inline:auto; } .pp-plan{ padding:32px 28px; } }
@media (min-width:760px){ .pp-plans{ max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; } }
@media (min-width:1024px){
  .pp-plans-sec{ padding-block:56px 112px; }
}
@media (min-width:1280px){ .pp-plans{ grid-template-columns:repeat(4,minmax(0,1fr)); } .pp-plan{ padding:28px 24px; } }
/* the cards share one row structure (object or room, eyebrow, name, for, price, action, inside, link), so their rows line up across a row */
@supports (grid-template-rows:subgrid){
  @media (min-width:760px){
    .pp-plan{ display:grid; grid-row:span 8; grid-template-rows:subgrid; row-gap:16px; align-content:start; }
    .pp-plan__pricing{ align-self:end; }
    .pp-plan__inc{ align-self:start; }
    .pp-plan__more{ align-self:end; justify-self:start; }
    .pp-room{ grid-row:1; }   /* the object row; the eyebrow and name auto-place into rows 2 and 3 */
  }
}
.pp-plans-sec{ scroll-margin-top:84px; }

/* ---- PREMIUM MEMBERSHIP CARDS (build spec C4.1, 30 Oct 2026). The card object itself is assets/mcard.css. ---- */
.pp-plans-head{ display:grid; gap:12px; margin-bottom:24px; max-width:46rem; }
@media (min-width:1024px){ .pp-plans-head{ margin-bottom:40px; } }
.pp-plan > .mcardobj{ justify-self:start; align-self:start; }
.pp-plan__title{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; }
/* No label on any membership card (owner, 30 Oct 2026): the Pro card's pill is gone. */

/* the Free card's top slot: where the room lives (spec C3 pricing row). Tool chips are dim at rest and full colour on
   hover: the owner's dimming exception (29 Oct 2026) for third-party marks inside features. WhatsApp keeps its own green. */
.pp-room{ display:grid; align-content:start; gap:12px; padding:16px; border-radius:12px; background:var(--pp-ghost); order:-1; }   /* after the name in the DOM (reading order), first on screen */
.pp-room__note{ margin:0; font-size:14px; line-height:1.5; color:var(--pp-muted); }
.pp-stack{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.pp-stack .tchip{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; background:#fff; box-shadow:var(--pp-shadow);
  font:500 14px/1 var(--pp-sans); color:var(--pp-ink); }
.pp-stack .tchip__logo{ flex:none; width:20px; height:20px; filter:grayscale(1); opacity:.7;
  transition:filter var(--dur-instant, 120ms) var(--ease-standard, ease), opacity var(--dur-instant, 120ms) var(--ease-standard, ease); }
.pp-stack .tchip__logo--wa{ color:#25D366; }   /* WhatsApp's own mark colour, unmodified */
.pp-stack .tchip:hover .tchip__logo{ filter:none; opacity:1; }

/* .t-price holds words on two cards ("Price to be announced", "Custom"): Plex Mono has no Arabic glyphs, so the Arabic twin
   sets those in Almarai with no negative tracking. Numeral prices elsewhere stay Plex Mono. */
:lang(ar) .pp-next__price b{ font-family:var(--font-ar); letter-spacing:0; }

/* ---- THE FIFTH MEMBERSHIP: online + in person (build spec C4.2). Honor duo, bounded, copy in the purple anchor. ---- */
.pp-next{ position:relative; display:grid; gap:24px; margin-top:12px; padding:24px; border-radius:24px; scroll-margin-top:96px;
  color:var(--on-duo-ink, #fff); box-shadow:var(--pp-shadow-lift);
  /* phones: the anchor is held in pixels under the whole copy block (mcard.js sets --copy-h), gold at the foot behind the panel */
  background:linear-gradient(to bottom, var(--purple, #3B06D4) 0 var(--copy-h, 52%), var(--gold, #F5C24B) 100%); }
.pp-next__copy{ display:grid; gap:12px; align-content:start; justify-items:start; }
.pp-next .pp-next__k{ color:var(--on-duo-ink, #fff); }
.pp-next__name{ margin:0; color:var(--on-duo-ink, #fff); }
.pp-next .pp-next__lead{ margin:0; max-width:30rem; color:var(--on-duo-ink, #fff); text-wrap:balance; }
.pp-next__price{ margin:4px 0 0; }
.pp-next__price b{ display:block; color:var(--on-duo-ink, #fff); }
.pp-next__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:8px; }
.pp-next .pp-btn--white{ font-size:14px; font-weight:600; }
.pp-next :where(a,button):focus-visible{ outline-color:var(--focus-ring-on-duo, #fff); }
.pp-soon{ display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:999px; background:var(--scrim, rgba(0,0,0,.55)); color:#fff; }

.pp-next__panel{ display:grid; gap:16px; padding:12px; border-radius:16px; background:#fff; color:var(--pp-ink); box-shadow:var(--pp-shadow); }
.pp-next__below{ display:grid; gap:16px; padding:0 4px 4px; }
.pp-next__panel .mcardobj{ width:200px; max-width:100%; margin-top:-56px; z-index:1; }
.pp-next__cols{ display:grid; gap:12px; margin:0; }
.pp-next__cols div{ display:grid; gap:4px; }
.pp-next__cols dt{ color:var(--pp-muted); }
.pp-next__cols dd{ margin:0; font:600 16px/1.4 var(--pp-sans); color:var(--pp-ink); }

/* photo slots (spec C6): radius 12 inside a card, no border, ghost while loading */
.pp .shot{ position:relative; margin:0; overflow:hidden; background:var(--pp-ghost); }
.pp .shot--3x2{ aspect-ratio:3 / 2; }
.pp .shot picture, .pp .shot img{ display:block; width:100%; height:100%; }
.pp .shot img{ object-fit:cover; }
.pp-next__shot{ border-radius:12px; }
.shot__cap{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; min-height:24px; padding:4px 10px; border-radius:999px; background:var(--scrim-strong, rgba(0,0,0,.75)); color:#fff; }
.pp-team__shot{ border-radius:0; background:var(--elev-1, #0A0A0C) !important; }

@media (min-width:760px){
  .pp-next{ grid-column:1 / -1; margin-top:20px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; padding:32px; align-items:center;
    background:linear-gradient(100deg, var(--purple, #3B06D4) 0 40%, var(--gold, #F5C24B) 100%); }
  .pp-next__panel{ padding:16px; }
}
@media (min-width:1024px){ .pp-next{ gap:40px; padding:40px; } }
@media (min-width:1280px){
  .pp-next__below{ grid-template-columns:200px minmax(0,1fr); gap:24px; align-items:start; }
  .pp-next__cols{ padding-top:16px; }
}
[dir="rtl"] .pp-next{ background:linear-gradient(to bottom, var(--purple, #3B06D4) 0 var(--copy-h, 52%), var(--gold, #F5C24B) 100%); }
@media (min-width:760px){ [dir="rtl"] .pp-next{ background:linear-gradient(260deg, var(--purple, #3B06D4) 0 40%, var(--gold, #F5C24B) 100%); } }
[dir="rtl"] .shot__cap{ left:auto; right:10px; }

/* ---- PHONES: the five memberships are one scroll-snap row, with dots and a "Compare all" link (mcard.js builds the dots) ---- */
.pp-dots-row{ display:none; }
@media (max-width:759px){
  .pp-plans{ grid-auto-flow:column; grid-auto-columns:86%; grid-template-columns:none; max-width:none; gap:12px; align-items:start;
    margin-inline:calc(-1 * var(--pp-gut)); padding:8px var(--pp-gut) 24px; scroll-padding-inline:var(--pp-gut);
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
  .pp-plans::-webkit-scrollbar{ display:none; }
  .pp-plans > article{ scroll-snap-align:center; }
  .pp-next{ margin-top:0; }   /* each card keeps its natural height (align-items:start): no stretched purple or white gaps when swiped to */
  .pp-dots-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:-8px; }
  .pp-dots{ display:flex; }
  .pp-dot{ display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer; }
  .pp-dot::before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--slate-600, #727293);
    transition:width var(--dur-quick, 200ms) var(--ease-standard, ease), background-color var(--dur-quick, 200ms) var(--ease-standard, ease); }
  .pp-dot[aria-current="true"]::before{ width:20px; background:var(--pp-ink); }
  .pp-dot:focus-visible{ outline:3px solid var(--pp-focus); outline-offset:0; border-radius:999px; }
}
@media (max-width:759px) and (prefers-reduced-motion:reduce){
  .pp-plans{ scroll-behavior:auto; }
  .pp-dot::before{ transition:none; }
}

/* questions answered in place (the product template's Q -> A pattern): visible text, not accordions */
.pp-qa-set{ display:grid; gap:24px 48px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top:40px; }
.pp-qa{ padding-block:16px 4px; border-block-start:1px solid var(--pp-hair); max-width:62ch; }   /* a hairline above, no side stripe (brand law) */
.pp-qa__q{ margin:0 0 6px; font:600 var(--step-1, 18px)/1.2 var(--pp-sans); letter-spacing:-.018em; text-wrap:balance; }
.pp-qa__a{ margin:0; font-size:16px; line-height:1.62; color:var(--pp-muted); text-wrap:pretty; }

/* ---- COMPARE (build spec F1 S11, 30 Oct 2026). Collapsed behind one "Compare all features" button (assets/compare.js; #compare
   opens it, and so does any link to it). A sticky header row holds each membership's name, price (the visitor's currency; per seat
   in Team mode) and its Apply or Join button. Rows are grouped by FACTS benefit.groups under rowgroup headers. A blank is an en dash
   with "Not included" for screen readers; a tick is an icon with "Included". Phones (<760px) show one membership at a time, picked
   with a segmented control. Without JS the table stays open, and phones scroll it sideways. ---- */
.pp{ --cmp-top:64px; }                                    /* the fixed site header (nav.css --nv-h) */
html.has-notif:not(.notif-up) .pp{ --cmp-top:106px; }     /* plus the notification bar while it shows */
.pp-cmp-sec:not([data-mode="team"]) [data-show="team"],
.pp-cmp-sec[data-mode="team"] [data-show="ind"]{ display:none !important; }

.pp-cmp-head{ margin-bottom:28px; }
.pp-cmp__toggle{ display:none; justify-self:start; margin-top:12px; gap:10px; background:#fff; color:var(--pp-ink); box-shadow:var(--pp-shadow);
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.js .pp-cmp__toggle{ display:inline-flex; }
.pp-cmp__toggle:hover{ background:var(--pp-ghost); }
.pp-cmp__toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--dur-base, 320ms) var(--ease-standard, ease); }
.pp-cmp__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* closed: before compare.js runs (unless #compare is the target), and whenever the visitor closes it */
.js .pp-cmp-sec[data-cmp="closed"]:not(:target) .pp-cmp,
.pp-cmp-sec[data-cmp="shut"] .pp-cmp{ display:none; }
.pp-cmp-sec[data-cmp="shut"]{ padding-block-end:clamp(40px, 5vw, 64px); }   /* closed, the section is only its head and the button */
.pp-cmp-sec[data-cmp="open"] .pp-cmp{ animation:pp-cmp-in var(--dur-base, 320ms) var(--ease-emphasized, ease) backwards; }
@keyframes pp-cmp-in{ from{ opacity:0; transform:translateY(8px); } }

/* the card: white, shadow, no border. overflow:clip (not hidden) keeps the radius without making a scroll box, so the header can stick */
.pp-cmp{ position:relative; background:#fff; border-radius:24px; box-shadow:var(--pp-shadow); overflow:hidden; overflow:clip; }
.pp-cmp__pick[hidden]{ display:none; }
@media (min-width:760px){ .pp-cmp__pick{ display:none; } }
.pp-cmp table{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:16px; line-height:1.4; }
.pp-cmp :is(th,td){ padding:16px 12px; border-bottom:1px solid var(--pp-hair); text-align:center; vertical-align:middle; }
.pp-cmp tbody:last-child tr:last-child > *{ border-bottom:0; }
.pp-cmp :is(th,td) small{ display:block; margin-top:2px; font-weight:400; font-size:12px; line-height:1.35; color:var(--pp-muted); }
.pp-cmp th[scope="row"]{ padding-inline:24px 16px; text-align:start; font-weight:500; }
.pp-cmp th[scope="row"] small{ font-size:14px; }
.pp-cmp td.pp-cmp__txt{ font-weight:500; line-height:1.3; }
.pp-cmp td.is-feat{ background:var(--pp-purple-50); }
.pp-cmp tbody tr:not(.pp-cmp__grp):hover > :is(th,td){ background:var(--pp-ghost); }
.pp-cmp tbody tr:not(.pp-cmp__grp):hover > td.is-feat{ background:#EEF1FF; }

/* the sticky header row */
.pp-cmp thead th{ position:sticky; top:var(--cmp-top); z-index:2; padding:24px 12px 16px; vertical-align:bottom; background:#fff;
  border-bottom:0; box-shadow:inset 0 -1px 0 var(--pp-hair); }
.pp-cmp thead th.is-feat{ background:var(--pp-purple-50); box-shadow:inset 0 3px 0 var(--pp-purple), inset 0 -1px 0 var(--pp-hair); }
.pp-cmp.is-stuck thead th{ box-shadow:inset 0 -1px 0 var(--pp-hair), 0 12px 16px -14px rgba(17,12,46,.28); }
.pp-cmp.is-stuck thead th.is-feat{ box-shadow:inset 0 3px 0 var(--pp-purple), inset 0 -1px 0 var(--pp-hair), 0 12px 16px -14px rgba(17,12,46,.28); }
.pp-cmp .pp-cmp__corner{ width:32%; padding-inline:24px 16px; text-align:start; }
.pp-cmp__corner .t-meta{ display:block; color:var(--pp-muted); }
.pp-cmp__plan{ display:grid; gap:4px; justify-items:center; }
.pp-cmp__name{ font:600 var(--t-h4, 20px)/1.2 var(--pp-sans); letter-spacing:-.01em; color:var(--pp-ink); }
.pp-cmp__price{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0 6px; }
.pp-cmp__amt{ font:500 var(--t-lead, 18px)/1.2 var(--pp-mono); letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--pp-ink); }
.pp-cmp thead .pp-cmp__price small{ display:inline; margin:0; font-size:12px; font-weight:400; color:var(--pp-muted); }
.pp-cmp__cta{ display:block; width:100%; margin-top:10px; }
.pp-cmp__cta .pp-btn{ width:100%; min-height:44px; padding:8px 12px; font-size:14px; line-height:1.2; }

/* rowgroup headers: FACTS benefit.groups, in t-meta */
/* the Pro column's tint runs on through the group rows (corner 32%, then four equal columns: Pro spans 49%-66%) */
.pp-cmp{ --cmp-feat-a:49%; --cmp-feat-b:66%; }
.pp-cmp__grp th{ padding:32px 24px 10px; text-align:start; color:var(--pp-muted);
  background:linear-gradient(to right, #fff var(--cmp-feat-a), var(--pp-purple-50) var(--cmp-feat-a) var(--cmp-feat-b), #fff var(--cmp-feat-b)); }
[dir="rtl"] .pp-cmp__grp th{ background:linear-gradient(to left, #fff var(--cmp-feat-a), var(--pp-purple-50) var(--cmp-feat-a) var(--cmp-feat-b), #fff var(--cmp-feat-b)); }
.pp-cmp tbody:first-of-type .pp-cmp__grp th{ padding-top:24px; }

/* a tick (icon + "Included") and a blank (an en dash + "Not included") */
.pp-yes{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; vertical-align:middle; background:var(--pp-green); color:#000; }
.pp-yes svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.pp-dash{ display:inline-block; min-width:26px; font:500 18px/26px var(--pp-sans); color:var(--pp-slate-600); }

/* phones: one membership at a time. The picker sticks under the site header and the chosen column's header sticks under it.
   compare.js gives the table explicit ARIA roles, because these display changes would otherwise drop its table semantics. */
@media (max-width:759px){
  .pp-cmp-head{ margin-bottom:20px; }
  .pp-cmp__toggle{ width:100%; }
  .pp-cmp:not([data-col]) .pp-cmp__scroll{ overflow-x:auto; overscroll-behavior-x:contain; }
  .pp-cmp:not([data-col]) table{ min-width:640px; }
  .pp-cmp:not([data-col]) thead th{ position:static; }
  .pp-cmp__pick{ position:sticky; top:var(--cmp-top); z-index:3; height:60px; padding:8px; background:#fff; box-shadow:inset 0 -1px 0 var(--pp-hair); }
  .pp-cmp__seg{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2px; padding:2px; border-radius:999px; background:var(--pp-ghost); }
  .pp-cmp__opt{ min-width:0; min-height:40px; padding:0 4px; border:0; border-radius:999px; background:transparent; cursor:pointer;
    font:600 14px/1 var(--pp-sans); color:var(--pp-ink); transition:background-color var(--dur-quick, 200ms) var(--ease-standard, ease), color var(--dur-quick, 200ms) var(--ease-standard, ease); }
  .pp-cmp__opt[aria-checked="true"]{ background:var(--pp-ink); color:#fff; }
  .pp .pp-cmp__opt:focus-visible{ outline:3px solid var(--pp-focus); outline-offset:1px; border-radius:999px; }

  .pp-cmp[data-col] :is(table, thead, tbody){ display:block; }
  .pp-cmp[data-col] thead{ position:sticky; top:calc(var(--cmp-top) + 60px); z-index:2; background:#fff; }
  .pp-cmp[data-col] tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,42%); }
  .pp-cmp[data-col] :is(td, thead th){ display:none; }
  .pp-cmp[data-col="free"] :is(td:nth-child(2), thead th:nth-child(2)),
  .pp-cmp[data-col="pro"] :is(td:nth-child(3), thead th:nth-child(3)),
  .pp-cmp[data-col="max"] :is(td:nth-child(4), thead th:nth-child(4)),
  .pp-cmp[data-col="infinite"] :is(td:nth-child(5), thead th:nth-child(5)){ display:block; }
  .pp-cmp[data-col] thead th{ grid-column:1 / -1; position:static; padding:12px 16px; text-align:start; background:#fff; box-shadow:inset 0 -1px 0 var(--pp-hair); }
  .pp-cmp[data-col].is-stuck thead th{ box-shadow:inset 0 -1px 0 var(--pp-hair), 0 12px 16px -14px rgba(17,12,46,.28); }
  .pp-cmp[data-col] .pp-cmp__plan{ grid-template-columns:minmax(0,1fr) auto; align-items:center; justify-items:start; gap:0 12px; }
  .pp-cmp[data-col] .pp-cmp__name{ grid-column:1; }
  .pp-cmp[data-col] .pp-cmp__price{ grid-column:1; justify-content:start; }
  .pp-cmp[data-col] .pp-cmp__cta{ grid-column:2; grid-row:1 / span 2; width:auto; margin:0; }
  .pp-cmp[data-col] .pp-cmp__cta .pp-btn{ width:auto; padding-inline:16px; }
  .pp-cmp[data-col] th[scope="row"]{ padding-block:14px; padding-inline:16px 8px; font-size:14px; }
  .pp-cmp[data-col] th[scope="row"] small{ font-size:12px; }
  .pp-cmp[data-col] td{ padding-block:14px; padding-inline:8px 16px; font-size:14px; }
  .pp-cmp[data-col] td.is-feat{ background:transparent; }
  .pp-cmp[data-col] .pp-cmp__grp th{ grid-column:1 / -1; padding:24px 16px 8px; background:#fff; }
  .pp-cmp[data-col] tbody tr:not(.pp-cmp__grp):hover > :is(th,td){ background:transparent; }
}
@media (max-width:759px){
  .pp-cmp[data-col="free"] td:nth-child(2),
  .pp-cmp[data-col="pro"] td:nth-child(3),
  .pp-cmp[data-col="max"] td:nth-child(4),
  .pp-cmp[data-col="infinite"] td:nth-child(5){ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
}
@media (min-width:760px) and (max-width:1023px){
  .pp-cmp .pp-cmp__corner, .pp-cmp th[scope="row"]{ padding-inline:16px 12px; }
  .pp-cmp .pp-cmp__corner{ width:28%; }
  .pp-cmp{ --cmp-feat-a:46%; --cmp-feat-b:64%; }
  .pp-cmp :is(th,td){ padding-inline:8px; }
  .pp-cmp__grp th{ padding-inline:16px; }
  .pp-cmp__cta .pp-btn{ padding-inline:8px; min-height:50px; }   /* room for a two-line label, so every button is one height */
}
/* the header cells hang from the top, so names, prices and buttons sit on the same rows in every column. Below 1280px, and in
   Team mode at any width, the price and its "a year" stack, so every price is two rows whatever its length */
@media (min-width:760px){
  .pp-cmp thead th[data-membership]{ vertical-align:top; }
  .pp-cmp-sec[data-mode="team"] .pp-cmp__price{ flex-direction:column; align-items:center; }
}
@media (min-width:760px) and (max-width:1279px){
  .pp-cmp__price{ flex-direction:column; align-items:center; }
}
@media (prefers-reduced-motion:reduce){
  .pp-cmp-sec[data-cmp="open"] .pp-cmp{ animation:none; }
  .pp-cmp__toggle, .pp-cmp__toggle svg, .pp-cmp__opt{ transition:none; }
}

/* the voice button steps aside while it would cover a magenta action (assets/product.js; review fix 9) */
html[data-pp-voice-off] .rv-voice{ visibility:hidden; pointer-events:none; }

/* course products: a card per course, a black iPhone with a real course screen on a Haze panel */
.pp-courses{ display:grid; gap:16px; }
.pp-course{ display:grid; background:#fff; border-radius:24px; box-shadow:var(--pp-shadow); overflow:hidden; scroll-margin-top:96px; }
.pp-course__media{ --iphone-w:200px; --iphone-fit:.48; --dev-card-pt:24px; margin:8px 8px 0; border-radius:18px; }
.pp-course__body{ display:flex; flex-direction:column; gap:14px; padding:22px 20px 24px; }
.pp-course__meta{ display:flex; flex-wrap:wrap; gap:6px; }
.pp-chip{ display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:999px; background:var(--pp-ghost);
  font:500 12px/1.2 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pp-ink); font-variant-numeric:tabular-nums; }
.pp-chip--gold{ background:#F5C24B; color:#000; }
.pp-course__desc{ font-size:1em; line-height:1.55; color:var(--pp-muted); }
.pp-course__buy{ display:grid; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--pp-hair); }
.pp-course__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.pp-course__price b{ font:700 30.4px/1 var(--pp-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pp-course__price > span{ font-size:14px; color:var(--pp-muted); }
.pp-course__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; }
.pp-refund{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--pp-muted); }
.pp-refund svg{ width:16px; height:16px; }
@media (min-width:760px){ .pp-courses{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .pp-course__media{ --iphone-w:240px; --iphone-fit:.576; --dev-card-pt:32px; } .pp-course__body{ padding:28px; } }

/* the courses: "Open now" (with the real course screens) and "Coming November-December 2026" (compact cards) */
.pp-row-label{ margin:0 0 12px; font:500 12px/1.4 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pp-muted); }
.pp-courses + .pp-row-label{ margin-top:32px; }
.pp-course .pp-h3 a{ text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }  /* F3 */
.pp-course .pp-h3 a:hover{ text-decoration:underline; text-underline-offset:4px; }
.pp-course--soon .pp-course__body{ height:100%; }
.pp-course__fine{ font-size:14px; line-height:1.45; color:var(--pp-muted); }
.pp-free{ margin-top:24px; padding:20px; border-radius:24px; background:#fff; box-shadow:var(--pp-shadow); display:grid; gap:14px; }
.pp-free__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.pp-free__list{ display:grid; gap:8px; }
.pp-free__list a{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px; min-height:56px; padding:12px 14px; border-radius:12px; background:var(--pp-ghost); text-decoration:none; }
.pp-free__list a:hover{ background:var(--pp-purple-50); }
.pp-free__list b{ font-weight:600; font-size:16px; line-height:1.3; }
.pp-free__list small{ grid-column:1; font:500 12px/1.3 var(--pp-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--pp-muted); }
.pp-free__list svg{ grid-row:1 / span 2; grid-column:2; width:18px; height:18px; }
@media (min-width:760px){ .pp-free{ padding:28px; } .pp-free__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* teams and partners */
.pp-teams{ display:grid; gap:16px; }
.pp-team{ display:flex; flex-direction:column; border-radius:24px; overflow:hidden; scroll-margin-top:96px; }
.pp-team__body{ display:flex; flex-direction:column; gap:14px; padding:24px 20px; }
.pp-team__price{ font:600 16px/1.4 var(--pp-sans); }   /* F5: prices are never Mono */
/* the company card: the Graphite duo (black -> slate), full-field safe for white ink, so the card sizes to its copy.
   Black is held at the foot (to top), under the one magenta action: magenta on black is >= 3:1 (5.5:1). */
.pp-team--command{ color:#fff; background:linear-gradient(to top, #000000 0 40%, #4A4A68 100%); }
.pp-team--command .pp-eyebrow{ color:#D1D1D9; }
.pp-team--command p{ color:#fff; }
.pp-team--command :where(a,button):focus-visible{ outline-color:var(--pp-focus-dark); }
.pp-team--light{ background:#fff; box-shadow:var(--pp-shadow); }
.pp-team .pp-team__body{ height:100%; }
.pp-team--light p{ color:var(--pp-muted); }
.pp-team .pp-ticks{ margin-top:4px; }
.pp-team__acts{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; padding-top:6px; }
/* Each card sizes to its own copy (no stretch, so no dead band above the buttons, R1-9). Stacked below 1024px, where
   two columns made the shorter Corporate card stretch to the License card's height; side by side from 1024px.
   The magenta button stays at the foot of the Corporate card, inside its black hold. */
.pp-teams{ align-items:start; }
.pp-team .pp-team__body{ height:auto; }
@media (min-width:760px){ .pp-teams{ gap:20px; } .pp-team__body{ padding:32px; } }
@media (min-width:1024px){ .pp-teams{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* From 1024px the P-01 photo sits beside the Corporate copy, full card height, so the card stays close to the License
   card's height (a 3:2 photo on top made it twice as tall). Phones and tablets keep the photo on top at 3:2. */
@media (min-width:1024px){
  .pp-team--command{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .pp .pp-team__shot.shot--3x2{ aspect-ratio:auto; height:100%; min-height:260px; }
  .pp .pp-team__shot img{ object-position:57% 40%; }   /* the facilitator */
}

/* FAQ: native details, works without JS */
.pp-faq-grid{ display:grid; gap:24px; }
.pp-faq{ border-top:1px solid var(--pp-hair); }
.pp-faq details{ border-bottom:1px solid var(--pp-hair); }
.pp-faq summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:16px 0; cursor:pointer;
  font:600 16px/1.4 var(--pp-sans); color:var(--pp-ink); border-radius:4px; }
.pp-faq summary::-webkit-details-marker{ display:none; }
.pp-faq summary::after{ content:""; flex:none; width:28px; height:28px; border-radius:50%; background:var(--pp-ghost)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .2s var(--pp-ease); }
.pp-sec--ghost .pp-faq summary::after{ background-color:#fff; }
.pp-faq details[open] summary::after{ transform:rotate(45deg); }
.pp-faq details p{ padding:0 0 20px; max-width:62ch; color:var(--pp-muted); font-size:1em; line-height:1.6; }
.pp-faq details p a{ color:var(--pp-ink); font-weight:600; text-underline-offset:3px; }
@media (min-width:1024px){ .pp-faq-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:start; } .pp-faq-grid .pp-head{ position:sticky; top:120px; } .pp-faq summary{ font-size:18px; } }

/* close: one bounded card before the footer's community card. The Depth duo (black -> purple) is full-field safe
   for white ink; its black anchor is held under the buttons (bottom on phones, bottom-left from 760px), so the
   one magenta action sits on black (5.5:1). Honor (purple -> gold) is not used: magenta on its purple is 2.9:1. */
.pp-close-sec{ padding-block:40px; }
@media (min-width:1024px){ .pp-close-sec{ padding-block:64px; } }
.pp-close{ display:grid; gap:20px; justify-items:start; padding:28px 20px; border-radius:24px; color:#fff;
  background:linear-gradient(to top, #000000 0 40%, #3B06D4 100%); box-shadow:var(--pp-shadow-lift); }
.pp-close .pp-eyebrow{ color:#D1D1D9; }
.pp-close .pp-h2{ color:#fff; max-width:18ch; }
.pp-close .pp-members{ color:#D1D1D9; }
.pp-close .pp-members b{ color:#fff; }
.pp-close .pp-members__faces img{ border-color:#1A1A22; }
.pp-close .pp-link{ color:#fff; }
.pp-close :where(a,button):focus-visible{ outline-color:var(--pp-focus-dark); }
.pp-close__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; width:100%; }
@media (max-width:599px){ .pp-close__acts .pp-btn{ width:100%; } }
@media (min-width:760px){ .pp-close{ padding:48px; background:linear-gradient(45deg, #000000 0 40%, #3B06D4 100%); } }
/* wide: the copy on the left two-thirds (over the black anchor), the members on the right, so the card has no empty half */
@media (min-width:1024px){
  .pp-close{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:48px; align-items:center; padding:56px 64px; }
  .pp-close > *{ grid-column:1; }
  .pp-close .pp-members{ grid-column:2; grid-row:1 / span 3; justify-self:end; flex-direction:column; align-items:flex-start; gap:16px; font-size:16px; }
  .pp-close .pp-members__faces img{ width:64px; height:64px; margin-left:-14px; border-width:3px; }
  .pp-close .pp-members__faces img:first-child{ margin-left:0; }
  .pp-close .pp-members b{ display:block; margin-bottom:4px; font-size:48px; line-height:1; letter-spacing:-.03em; }
}

/* ====================== PRODUCT LANDING (plans/*) ====================== */
.pp-hero{ padding-block:28px 56px; background:var(--pp-ghost); overflow:hidden; }
.pp-hero__grid{ display:grid; gap:36px; }
.pp-hero__copy{ display:grid; gap:16px; align-content:start; }
.pp-hero__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding-top:4px; }
.pp-hero__price b{ font:700 30.4px/1 var(--pp-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pp-hero__price > span{ font-size:1em; color:var(--pp-muted); }
.pp-hero__acts{ display:grid; gap:4px; justify-items:start; }
.pp-hero__acts .pp-btn{ width:100%; }
.pp-hero__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:var(--pp-muted); }
.pp-hero__meta span{ display:inline-flex; align-items:center; gap:6px; }
.pp-hero__meta svg{ width:16px; height:16px; color:var(--pp-ink); }
@media (min-width:600px){ .pp-hero__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; } .pp-hero__acts .pp-btn{ width:auto; } }
@media (min-width:1024px){
  .pp-hero{ padding-block:64px 96px; }
  .pp-hero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
  .pp-hero__copy{ gap:22px; }
  .pp-hero__price b{ font-size:40px; }
}

/* the room and the screen: a member portrait (4:5) with a black iPhone over its corner */
.pp-hv{ position:relative; width:100%; max-width:440px; margin-inline:auto; min-height:470px; }
.pp-hv__photo{ position:relative; width:74%; aspect-ratio:4 / 5; max-height:40svh; min-height:300px; border-radius:24px; overflow:hidden; background:#000; }
.pp-hv__photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
/* --pw is the phone width; the photo is 74% of the figure, so the phone covers (pw - 26% of the figure) of it:
   26/74 = 35.14% of the photo. The caption stops 12px short of the phone at every width. */
.pp-hv{ --pw:156px; }
.pp-hv__cap{ position:absolute; left:10px; right:calc(var(--pw) + 12px - 35.14%); bottom:10px; display:grid; gap:2px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.75); color:#fff; }
.pp-hv__cap b{ font:600 12px/1.3 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; }
.pp-hv__cap span{ font:400 11px/1.35 var(--pp-mono); letter-spacing:.04em; text-transform:uppercase; color:#D1D1D9; }
.pp-hv__phone{ position:absolute; right:0; top:34%; --iphone-w:var(--pw); --iphone-fit:.3744; }
.pp-hv__phone .iphone{ box-shadow:inset 0 0 0 1px #2A2A30, 0 30px 60px -24px rgba(0,0,0,.5); }
.pp-hand{ position:absolute; left:4px; bottom:6px; max-width:52%; font:400 20px/1 var(--pp-hand); color:var(--pp-purple); display:flex; align-items:flex-end; gap:4px; }
.pp-hand svg{ width:40px; height:28px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:600px){ .pp-hv{ --pw:200px; max-width:480px; min-height:560px; } .pp-hv__photo{ max-height:none; } .pp-hv__phone{ --iphone-fit:.48; } }
@media (min-width:1024px){
  .pp-hv{ --pw:220px; max-width:520px; min-height:640px; margin-right:0; } .pp-hv__phone{ --iphone-fit:.528; top:30%; }
  /* the hand note sits just left of the phone, so its arrow lands on the screen */
  .pp-hand{ font-size:24px; left:auto; right:calc(var(--pw) + 8px); max-width:none; white-space:nowrap; }
}
/* 1024-1279: give the portrait half the row, so the caption is not squeezed */
@media (min-width:1024px) and (max-width:1279px){ .pp-hero__grid{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); } }
@media (prefers-reduced-motion:no-preference){
  .pp-hv__phone{ animation:pp-rise .56s cubic-bezier(.3,0,0,1) both .12s; }
  @keyframes pp-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
}

/* what's included */
.pp-inc{ display:grid; gap:16px; }
/* the course tile: Prestige (black -> gold, certificates), held black under the text, gold only behind the credential mark */
.pp-inc__course{ display:flex; flex-direction:column; border-radius:24px; overflow:hidden; color:#fff; background:linear-gradient(to bottom, #000000 0 40%, #F5C24B 100%); }
.pp-inc__course-body{ display:grid; gap:14px; padding:24px 20px; }
.pp-inc__course .pp-eyebrow{ color:#D1D1D9; }
.pp-inc__course p{ color:#fff; }
.pp-inc__course a{ color:#fff; font-weight:600; text-underline-offset:3px; }
.pp-inc__course :where(a):focus-visible{ outline-color:var(--pp-focus-dark); }
.pp-inc__list{ display:grid; gap:10px; }
.pp-inc__list li{ display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; font-size:1em; line-height:1.45; }
.pp-inc__list .pp-ic{ color:#fff; }
.pp-inc__art{ height:120px; display:grid; place-items:end start; padding:0 20px 20px; color:#000; }
.pp-inc__art svg{ width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pp-inc__art div{ display:flex; align-items:center; gap:12px; }
.pp-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pp-tile{ display:grid; gap:10px; align-content:start; padding:18px 16px; border-radius:16px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-tile .pp-ic{ color:var(--pp-purple); }
.pp-tile b{ font-size:16px; line-height:1.3; font-weight:600; }
.pp-tile p{ font-size:14px; line-height:1.45; color:var(--pp-muted); }
.pp-inc__plus{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; padding:6px 2px 2px; font:600 12px/1.3 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; }
@media (min-width:760px){ .pp-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .pp-tile{ padding:22px 20px; } .pp-inc__course-body{ padding:32px; } .pp-inc__art{ padding:0 32px 28px; } }
@media (min-width:1024px){
  .pp-inc{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:20px; align-items:stretch; }
  .pp-inc__course{ background:linear-gradient(to bottom, #000000 0 40%, #F5C24B 100%); }
  .pp-inc__art{ margin-top:auto; height:150px; }
}

/* how it works */
.pp-steps{ display:grid; gap:12px; counter-reset:pp; }
.pp-step{ counter-increment:pp; display:grid; align-content:start; grid-template-columns:44px 1fr; gap:4px 14px; padding:18px 16px; border-radius:16px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-step::before{ content:counter(pp, decimal-leading-zero); grid-row:span 2; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#000; color:#fff;
  font:600 14px/1 var(--pp-mono); font-variant-numeric:tabular-nums; }
.pp-step b{ font-size:16px; line-height:1.35; font-weight:600; }
.pp-step span{ font-size:14px; line-height:1.5; color:var(--pp-muted); }
@media (min-width:760px){ .pp-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .pp-step{ grid-template-columns:1fr; padding:24px; gap:8px; } .pp-step::before{ grid-row:auto; margin-bottom:8px; } }

/* inside the app: the dev-trio from device.css, captioned */
.pp-app .plattrio{ margin:0; }
.pp-app__caps{ display:grid; gap:10px; margin-top:16px; counter-reset:cap; }
.pp-app__caps li{ display:grid; gap:2px; padding:14px 16px; border-radius:12px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-app__caps b{ font:600 12px/1.3 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; }
.pp-app__caps span{ font-size:14px; line-height:1.5; color:var(--pp-muted); }
@media (min-width:760px){ .pp-app__caps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px; } }

/* fit: who it is for, who it is not for. Depth (black -> purple) is full-field safe for white text. */
.pp-fit{ display:grid; border-radius:24px; overflow:hidden; color:#fff; background:linear-gradient(135deg, #000000 0%, #3B06D4 100%); }
.pp-fit__col{ display:grid; gap:14px; align-content:start; padding:24px 20px; }
.pp-fit__col + .pp-fit__col{ border-top:1px solid rgba(255,255,255,.16); }
.pp-fit .pp-eyebrow{ color:#D1D1D9; }
.pp-fit h3{ color:#fff; font:600 var(--step-2, 24px)/1.12 var(--pp-sans); letter-spacing:-.018em; }
.pp-fit ul{ display:grid; gap:12px; }
.pp-fit li{ display:grid; grid-template-columns:24px 1fr; gap:12px; font-size:1em; line-height:1.5; }
.pp-fit li .pp-ic{ width:22px; height:22px; margin-top:1px; }
.pp-fit a{ color:#fff; font-weight:600; text-underline-offset:3px; }
.pp-fit :where(a):focus-visible{ outline-color:var(--pp-focus-dark); }
.pp-fit__roles{ display:flex; flex-wrap:wrap; gap:6px; }
.pp-fit__roles span{ display:inline-flex; min-height:28px; align-items:center; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.12); font:500 12px/1.2 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; }
.pp-upgrade{ display:flex; align-items:flex-start; gap:12px; margin-top:16px; padding:16px; border-radius:16px; background:#fff; box-shadow:var(--pp-shadow); font-size:1em; line-height:1.5; }
.pp-upgrade .pp-ic{ color:var(--pp-purple); }
.pp-upgrade b{ font-weight:600; }
.pp-upgrade a{ font-weight:600; text-underline-offset:3px; }
@media (min-width:760px){ .pp-fit{ grid-template-columns:1fr 1fr; } .pp-fit__col{ padding:36px 32px; } .pp-fit__col + .pp-fit__col{ border-top:0; border-left:1px solid rgba(255,255,255,.16); } .pp-upgrade{ padding:20px 24px; align-items:center; } }

/* the application: the course wizard (forms.js, unchanged) on an elev-1 card */
.pp-apply{ display:grid; gap:24px; grid-template-areas:'head' 'card' 'facts'; }
.pp-apply__copy{ grid-area:head; display:grid; gap:16px; align-content:start; }
.pp-apply__more{ grid-area:facts; display:grid; gap:12px; align-content:start; }
.pp-apply .rfa__card{ grid-area:card; }
.pp-apply__facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pp-apply__facts div{ padding:14px; border-radius:12px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-apply__facts dt{ font:500 11px/1.4 var(--pp-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pp-muted); }
.pp-apply__facts dd{ margin:4px 0 0; font-weight:600; font-size:16px; line-height:1.35; font-variant-numeric:tabular-nums; }
.pp-apply__talk{ font-size:14px; color:var(--pp-muted); }
.pp-apply__talk a{ color:var(--pp-ink); font-weight:600; text-underline-offset:3px; display:inline-flex; min-height:44px; align-items:center; }
.pp .rfa__card{ background:#0A0A0C; box-shadow:0 40px 80px -48px rgba(0,0,0,.55); border-radius:24px; scroll-margin-top:96px; }
.pp .rfa__glow{ display:none; }
@media (min-width:1024px){ .pp-apply{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); grid-template-areas:'head card' 'facts card'; grid-template-rows:auto 1fr; gap:24px 64px; align-items:start; } }

/* phone sticky bar: shown only after the hero action leaves the screen, hidden again over the form and the close */
.pp-sticky{ position:fixed; z-index:80; left:12px; right:calc(76px + env(safe-area-inset-right, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 16px; border-radius:16px; background:#000; color:#fff;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5); transform:translateY(0); transition:transform .2s var(--pp-ease), opacity .2s var(--pp-ease); }
.pp-sticky[hidden]{ display:none; }
.pp-sticky__t{ display:grid; min-width:0; }
.pp-sticky__t b{ font:700 16px/1.2 var(--pp-sans); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pp-sticky__t span{ font-size:12px; line-height:1.3; color:#D1D1D9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-sticky .pp-btn{ min-height:44px; padding:10px 16px; font-size:16px; }
.pp-sticky :where(a):focus-visible{ outline-color:#7B87FF; }
@media (min-width:760px){ .pp-sticky{ display:none !important; } }

@media (prefers-reduced-motion:reduce){
  .pp *, .pp *::before, .pp *::after{ transition:none !important; animation:none !important; }
  .pp-sticky{ transition:none; }
}

/* ---- INDIVIDUAL / TEAM (owner, 30 Oct 2026: "make teams like a toggle or add-on, like individual or team, and add the number of
   [seats] starting with minimum of 3"; from 1 seat since the seat caps of 30 Oct 2026). A segmented switch (a radiogroup) and a seat stepper above the cards; assets/mcard.js sets
   data-mode on the section, keeps it in the URL hash (#team) and writes the per-seat totals in the visitor's currency.
   Without JS the switch stays hidden and the cards read as Individual. ---- */
.pp-plans-sec:not([data-mode="team"]) [data-show="team"],
.pp-plans-sec[data-mode="team"] [data-show="ind"]{ display:none !important; }
.pp-mode{ position:relative; display:grid; gap:16px; margin-bottom:16px; }
.pp-mode[hidden]{ display:none; }
.pp-mode__row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.pp-seg{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-seg__opt{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:116px; padding:0 20px; border:0; border-radius:999px;
  background:transparent; font:600 16px/1 var(--pp-sans); color:var(--pp-ink); cursor:pointer;
  transition:background-color var(--dur-quick, 200ms) var(--ease-standard, ease), color var(--dur-quick, 200ms) var(--ease-standard, ease); }
.pp-seg__opt:hover:not([aria-checked="true"]){ background:var(--pp-ghost); }
.pp-seg__opt[aria-checked="true"]{ background:var(--pp-ink); color:#fff; }
.pp .pp-seg__opt:focus-visible{ outline:3px solid var(--pp-focus); outline-offset:2px; border-radius:999px; }
.pp-seats{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.pp-seats__label{ color:var(--pp-muted); }
.pp-seatstep{ display:inline-flex; align-items:center; padding:2px; border-radius:999px; background:#fff; box-shadow:var(--pp-shadow); }
.pp-seatstep__btn{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--pp-ink); cursor:pointer;
  transition:background-color var(--dur-instant, 120ms) var(--ease-standard, ease); }
.pp-seatstep__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.pp-seatstep__btn:hover:not(:disabled){ background:var(--pp-ghost); }
.pp-seatstep__btn:disabled{ color:var(--pp-slate-600); cursor:not-allowed; }
.pp-seatstep__n{ width:64px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; text-align:center;
  font:600 20px/1 var(--pp-sans); font-variant-numeric:tabular-nums; color:var(--pp-ink); -moz-appearance:textfield; appearance:textfield; }
.pp-seatstep__n::-webkit-inner-spin-button, .pp-seatstep__n::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.pp .pp-seatstep__btn:focus-visible{ outline:3px solid var(--pp-focus); outline-offset:2px; border-radius:999px; }
.pp-seatstep__n:focus-visible{ outline:3px solid var(--pp-focus); outline-offset:2px; }
.pp-seats__note{ margin:0; font-size:14px; line-height:1.45; color:var(--pp-muted); }
/* what a team adds: one quiet white strip, no border (cards have none), green ticks like the cards' lists */
.pp-teamadds{ display:grid; gap:12px; margin-bottom:24px; padding:16px 20px; border-radius:12px; background:#fff; box-shadow:var(--pp-shadow); }
/* phones: the strip follows the swipe row (and its dots), so the four cards come first */
@media (max-width:759px){
  .pp-plans-sec > .pp-wrap{ display:flex; flex-direction:column; }
  .pp-plans-sec .pp-teamadds{ order:1; margin:16px 0 0; }
  .pp-plans-sec :is(.pp-plans-note, .pp-qa-set){ order:2; }
}
.pp-teamadds__k{ margin:0; color:var(--pp-muted); }
.pp-teamadds__list{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.pp-teamadds__list li{ display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:start; font-size:14px; line-height:1.45; }
.pp-teamadds__list li::before{ content:""; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--pp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.pp-teamadds .pp-link{ justify-self:start; font-size:14px; }
@media (min-width:1024px){
  .pp-teamadds{ grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px 24px; }
  .pp-teamadds__list{ display:flex; flex-wrap:wrap; gap:8px 24px; }
}
/* the team total under each per-seat price: Sans 700 tabular, like the other prices on this page */
.pp-plan__total{ font-size:14px; line-height:1.4; color:var(--pp-muted); }
.pp-plan__total b{ font:700 16px/1.3 var(--pp-sans); font-variant-numeric:tabular-nums; color:var(--pp-ink); white-space:nowrap; }
.pp-plan--feat .pp-plan__total{ color:#D1D1D9; }
.pp-plan--feat .pp-plan__total b{ color:#fff; }
@media (prefers-reduced-motion:reduce){ .pp-seg__opt, .pp-seatstep__btn{ transition:none; } }
/* the four questions under the cards: two by two, then four across */
@media (min-width:760px){ .pp-plans-sec .pp-qa-set{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .pp-plans-sec .pp-qa-set{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 32px; } }

/* ---- SEAT CAPS (owner, 30 Oct 2026; FACTS membership.teams): Pro up to 3 seats, Max up to 10, Infinite any number, each seat at its
   membership's price. assets/mcard.js sets data-fits="no" on a card whose cap is below the seats, and assets/compare.js on its compare
   column header: the total and the team button hide, and .pp-fitnote names the memberships that fit. Without JS: Individual. ---- */
.pp-plans-sec[data-mode="team"] .pp-plan[data-fits="no"] [data-fit-show="yes"],
.pp-cmp-sec[data-mode="team"] th[data-fits="no"] [data-fit-show="yes"]{ display:none !important; }
.pp-fitnote{ display:none; }
.pp-plans-sec[data-mode="team"] .pp-plan[data-fits="no"] .pp-fitnote{ display:flex; }
.pp-cmp-sec[data-mode="team"] th[data-fits="no"] .pp-fitnote{ display:block; }
/* in a card the note takes the button's place: same height, ghost fill, ink text, an info mark (not colour alone) */
.pp-plan .pp-fitnote{ align-items:center; gap:10px; min-height:48px; margin:0; padding-block:10px; padding-inline:14px; border-radius:8px;
  background:var(--pp-ghost); font-size:14px; line-height:1.45; color:var(--pp-ink); text-align:start; }
.pp-plan .pp-fitnote::before{ content:""; flex:none; width:18px; height:18px; border-radius:50%; background:var(--pp-ink)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center/12px no-repeat; }
.pp-plan .pp-fitnote a{ font-weight:600; color:inherit; text-underline-offset:3px; }
.pp-plan--feat .pp-fitnote{ background:#12121A; color:#fff; }
.pp-plan--feat .pp-fitnote::before{ background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); }
.pp-cmp-sec .pp-cmp__cta .pp-fitnote{ max-width:18ch; margin-inline:auto; font:400 13px/1.35 var(--pp-sans); letter-spacing:0; text-transform:none; color:var(--pp-muted); text-align:center; }
/* Team mode, more seats than Pro's cap: the featured treatment steps down to a plain card (the visitor cannot choose Pro), and the
   lift moves to the first membership that fits ([data-fit-first], set by assets/mcard.js). Button colours stay as they are. */
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"]{ color:var(--pp-ink); background:#fff; box-shadow:var(--pp-shadow); }
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] :where(.pp-plan__k, .pp-plan__price > span, .pp-plan__for, .pp-plan__fine, .pp-ticks small, .pp-plan__value, .pp-plan__note, .pp-plan__cap){ color:var(--pp-muted); }
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] :where(.pp-plan__for b, .pp-plan__name, .pp-plan__name a, .pp-link, .pp-ticks a){ color:var(--pp-ink); }
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] .pp-plan__inc{ border-top-color:var(--pp-hair); }
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] :where(a,button):focus-visible{ outline-color:var(--pp-focus); }
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] .pp-fitnote{ background:var(--pp-ghost); color:var(--pp-ink); }
.pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] .pp-fitnote::before{ background-color:var(--pp-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E"); }
.pp-plans-sec[data-mode="team"] .pp-plan[data-fit-first="yes"]:not(.pp-plan--feat){ box-shadow:var(--pp-shadow-lift); }
/* the cap under the per-seat price, in every team card */
.pp-plan__cap{ margin:0; color:var(--pp-muted); }
.pp-plan--feat .pp-plan__cap{ color:#D1D1D9; }
/* the strip under the seat stepper: one item per paid membership, its cap, and in words whether it fits the seats */
.pp-caps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:640px; margin:0; padding:0; list-style:none; }
.pp-caps__i{ display:grid; align-content:start; gap:2px; padding-block:10px; padding-inline:12px; border-radius:12px; background:#fff; box-shadow:var(--pp-shadow);
  transition:background-color var(--dur-quick, 200ms) var(--ease-standard, ease), box-shadow var(--dur-quick, 200ms) var(--ease-standard, ease); }
.pp-caps__n{ color:var(--pp-muted); }
.pp-caps__v{ font:600 14px/1.35 var(--pp-sans); color:var(--pp-ink); }
.pp-caps__s{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; line-height:1.3; color:var(--pp-ink); }
.pp-caps__s:empty{ display:none; }
.pp-caps__s::before{ content:""; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--pp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.pp-caps__i[data-fits="no"]{ background:transparent; box-shadow:none; }
.pp-caps__i[data-fits="no"] .pp-caps__s{ color:var(--pp-muted); }
.pp-caps__i[data-fits="no"] .pp-caps__s::before{ background:var(--pp-slate-600)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/10px no-repeat; }
/* phones: one row per membership (name, cap, fit), so nothing wraps into a column of single words */
@media (max-width:759px){
  .pp-caps{ grid-template-columns:1fr; gap:4px; }
  .pp-caps__i{ grid-template-columns:minmax(0,5.5em) minmax(0,1fr) auto; align-items:center; gap:4px 12px; padding-block:8px; }
  .pp-caps__s{ margin-top:0; }
}
@media (min-width:760px){ .pp-caps__i{ padding-block:12px; padding-inline:16px; } .pp-caps__v{ font-size:16px; } .pp-caps__s{ font-size:14px; } }
@media (prefers-reduced-motion:reduce){ .pp-caps__i{ transition:none; } }