/* GENERATED by add-profile-page-build/tools/build-theme-pricing.mjs: the Pricing page's sheets scoped under .ppx (the <main>
   of /vip-profile-page), keyframes prefixed ppx-, then the hand-written theme integration. Do not edit here. Inputs sha256 07eb3b45348efe6d6c10d46ac6eefce59e4f1f9b0982781f928fe1d969138cf6 (tools/theme-build-pricing.lock.json in add-profile-page-build). */

/* ==== css/page.css ==== */
/* Add-profile sale page - standalone build (2026-09-17). Step 1: header bar + Ledger hero + stats.
   Type: Söhne for titles and UI (300/400/500, never heavier), National 2 for body copy. */
.ppx{
  --ink:#141414; --ink2:rgba(20,20,20,.62); --ink3:rgba(20,20,20,.5); --hair:rgba(20,20,20,.12);
  --pink:#ff3366; --bar:#050505; --band:#F6F6F7;
  --so:"Söhne",system-ui,-apple-system,"Segoe UI",sans-serif;
  --na:"National 2","Söhne",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px; --gutter:20px;
}
.ppx,.ppx *{box-sizing:border-box;margin:0;padding:0}
.ppx{background:#fff}
/* owner 2026-09-22 (Apple's grey band): everything between the hero and the first dark section sits on #F5F5F7 */
.ppx .statement,.ppx .platform{background:#F5F5F7}
.ppx{font-family:var(--na);color:var(--ink);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip}
.ppx a{color:inherit;text-decoration:none}
.ppx img{display:block;max-width:100%}
.ppx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ppx .wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin:0 auto}

/* ---------- header bar ---------- */

/* ---------- buttons ---------- */
.ppx .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 28px;border-radius:999px;font-family:var(--so);font-size:16px;font-weight:400;letter-spacing:.15px;color:#fff;background:linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);box-shadow:0 4px 12px rgba(255,51,102,.3);white-space:nowrap;transition:filter .15s,transform .15s}
.ppx .btn:hover{filter:brightness(1.04)}
.ppx .btn:active{transform:scale(.985)}
.ppx .btn--lg{height:56px;padding:0 34px;font-size:17px}
.ppx .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-family:var(--so);font-size:16px;font-weight:400;color:var(--ink);border:1px solid rgba(20,20,20,.22);background:#fff;white-space:nowrap;transition:border-color .15s,background .15s}
.ppx .btn-ghost:hover{border-color:rgba(20,20,20,.45)}
.ppx .btn-ghost--lg{height:56px;padding:0 30px;font-size:17px}

/* ---------- type ---------- */
.ppx .kicker{font-family:var(--so);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.ppx .kicker b{font-weight:500;color:var(--ink);margin-right:8px}
.ppx .h-hero{font-family:var(--so);font-weight:500;font-size:68px;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.ppx .h-hero b{font-weight:500}
.ppx .lead{font-family:var(--na);font-size:21px;line-height:1.35;color:rgba(20,20,20,.66);text-wrap:pretty}
.ppx .small{font-family:var(--na);font-size:14px;line-height:1.4;color:var(--ink3)}

/* ---------- hero ---------- */
.ppx .hero{padding:80px 0 60px}
.ppx .hero__grid{display:grid;grid-template-columns:1fr 560px;gap:60px;align-items:center}
.ppx .hero__copy{display:flex;flex-direction:column;gap:24px}
.ppx .hero__copy .lead{max-width:520px}
.ppx .hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* right side: the film placeholder, Airbnb-style stage, desktop frame (the phone is saved for the Platform section) */
.ppx .hero__stage{position:relative;min-height:560px;display:flex;align-items:center;justify-content:center}
.ppx .stage__glow{position:absolute;inset:0;background:radial-gradient(58% 46% at 50% 58%,#E9EAED 0%,rgba(233,234,237,.55) 45%,rgba(255,255,255,0) 100%);pointer-events:none}
.ppx .frame{position:relative;width:100%;max-width:560px;aspect-ratio:560/420;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.08)}
.ppx .frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.ppx .vid{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 8px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-family:var(--so);font-size:12px;letter-spacing:.02em;backdrop-filter:blur(8px)}
.ppx .vid svg{width:12px;height:12px;fill:#fff}
.ppx .vid__bar{display:block;width:64px;height:2px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.ppx .vid__bar i{display:block;height:100%;width:0;background:#fff;animation:ppx-filmbar 6s linear infinite}
@keyframes ppx-filmbar{from{width:0}to{width:100%}}
.ppx .stage__pause{position:absolute;right:18px;bottom:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 2px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.ppx .stage__pause svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}

/* ---------- stats ---------- */
.ppx .stats{padding:20px 0 90px}
.ppx .stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ppx .stat-row .v{font-family:var(--so);font-weight:300;font-size:52px;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.ppx .stat-row .v b{font-weight:300;font-size:26px;vertical-align:top;margin-left:2px}
.ppx .stat-row .l{font-family:var(--na);font-size:14px;color:var(--ink2);margin-top:10px}

/* ---------- statement reveal ---------- */
.ppx .statement{padding:40px 0 120px}
.ppx .statement__inner{max-width:980px}
.ppx .reveal{font-family:var(--so);font-weight:400;font-size:56px;letter-spacing:-.025em;line-height:1.1;color:rgba(20,20,20,.22);text-wrap:pretty}
.ppx .reveal .w{color:inherit;transition:color .45s cubic-bezier(.22,1,.36,1)}
.ppx .reveal .w.on{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.ppx .reveal{color:var(--ink)}}
@media (max-width:1100px){.ppx .reveal{font-size:48px}}
@media (max-width:768px){.ppx .statement{padding:8px 0 64px}.ppx .reveal{font-size:32px;line-height:1.15}}

/* ---------- section 02: platform ---------- */
.ppx .platform{padding:120px 0 120px}
.ppx .platform__opener{display:flex;flex-direction:column;gap:22px;max-width:900px}
.ppx .kicker--line{display:flex;align-items:center;gap:12px}
.ppx .kicker--line b{margin:0}
.ppx .kicker--line i{display:block;width:28px;height:1px;background:rgba(20,20,20,.25)}
.ppx .h-platform{font-family:var(--so);font-weight:500;font-size:64px;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.ppx .platform__lead{max-width:620px}
.ppx .platform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px;align-items:stretch;margin-top:90px}
.ppx .platform__stagecol{position:relative}
.ppx .stage2{position:sticky;top:calc(var(--hdr) + 40px);height:calc(100vh - var(--hdr) - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.ppx .stage2__glow{position:absolute;left:-40px;right:-40px;top:8%;bottom:4%;border-radius:50%;background:radial-gradient(closest-side,#E9EAED 0%,rgba(233,234,237,.55) 50%,rgba(255,255,255,0) 100%);pointer-events:none}
.ppx .phone2{position:relative;width:354px;border-radius:50px;background:#0b0b0c;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.06) inset;flex:none}
.ppx .phone2__screen{position:relative;height:727px;border-radius:42px;overflow:hidden;background:#000}
.ppx .screen{position:absolute;inset:0;opacity:0;transition:opacity .45s cubic-bezier(.22,1,.36,1);will-change:opacity}
.ppx .screen.is-on{opacity:1;z-index:1}
.ppx .screen img,.ppx .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ppx .screen video{opacity:0;transition:opacity .2s}
.ppx .screen video.is-playing{opacity:1}
.ppx .stage2__meta{position:relative;display:flex;align-items:center;gap:14px;font-family:var(--so);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.ppx .dots{display:flex;gap:5px;align-items:center}
.ppx .dots i{display:block;width:6px;height:6px;border-radius:3px;background:rgba(20,20,20,.2);transition:width .3s cubic-bezier(.22,1,.36,1),background .3s}
.ppx .dots i.is-on{width:18px;background:var(--ink)}
/* room after the last caption (owner 2026-09-23: "Your blog and feed." stopped a little below the others). The phone stays
   pinned until the rail ends; with this room it lets go exactly when the last caption's centre is level with the phone's
   centre. Phone centre = (100vh + hdr + 40) / 2 - 23, 23 = half the gap and label row under the phone; the last caption's
   box is 70vh, so its centre sits 35vh above the rail's end: room = 15vh - (hdr + 40) / 2 + 23. Phones reset it (<= 900). */
.ppx .platform__rail{list-style:none;margin:0;padding:0 0 calc(15vh - (var(--hdr) + 40px) / 2 + 23px) 40px;display:flex;flex-direction:column}
.ppx .cap{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:0}
.ppx .cap:last-child{min-height:70vh}
.ppx .cap__title{margin:0;font-family:var(--so);font-weight:400;font-size:40px;line-height:1.08;letter-spacing:-.02em;color:rgba(20,20,20,.28);transition:color .35s cubic-bezier(.22,1,.36,1)}
.ppx .cap.is-on .cap__title{color:var(--ink);transition-duration:.45s}
.ppx .cap__desc{margin:0;max-width:380px;font-family:var(--na);font-size:17px;line-height:1.45;color:var(--ink2);opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;transition:opacity .25s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1),max-height .25s cubic-bezier(.22,1,.36,1),margin .25s}
.ppx .cap.is-on .cap__desc{opacity:1;transform:none;max-height:220px;margin-top:12px;transition-duration:.45s;transition-delay:.12s}
/* opener entrance, once, when the section is in view */
@media (prefers-reduced-motion:no-preference){
  .ppx .platform__opener>*{opacity:0;transform:translateY(14px)}
  .ppx .platform .phone2{opacity:0;transform:translateY(28px) scale(.98)}
  .ppx .platform.is-in .platform__opener>*{animation:ppx-rise .65s cubic-bezier(.22,1,.36,1) forwards}
  .ppx .platform.is-in .platform__opener>*:nth-child(1){animation-duration:.5s;animation-delay:0s}
  .ppx .platform.is-in .platform__opener>*:nth-child(2){animation-delay:.08s}
  .ppx .platform.is-in .platform__opener>*:nth-child(3){animation-delay:.16s}
  .ppx .platform.is-in .phone2{animation:ppx-rise .9s cubic-bezier(.22,1,.36,1) .25s forwards}
}
@media (prefers-reduced-motion:reduce){
  .ppx .screen,.ppx .cap__title,.ppx .cap__desc,.ppx .dots i{transition:none}
}
@media (max-width:1100px){
  .ppx .h-platform{font-size:56px}
  .ppx .phone2{width:318px}
  .ppx .phone2__screen{height:649px}
  .ppx .cap__title{font-size:34px}
}
@media (max-width:900px){
  .ppx .platform{padding:64px 0 80px}
  .ppx .h-platform{font-size:46px}
  .ppx .platform__grid{display:block;margin-top:56px}
  .ppx .platform__stagecol{position:sticky;top:calc(var(--hdr) + 12px);z-index:2;background:linear-gradient(#F5F5F7 82%,rgba(245,245,247,0))}
  .ppx .stage2{position:static;height:auto;padding:0 0 18px;gap:0}
  .ppx .stage2__glow{top:0;bottom:10%}
  .ppx .phone2{width:calc(min(54svh,546px) * .462 + 16px);padding:8px;border-radius:44px}
  .ppx .phone2__screen{height:min(54svh,546px);border-radius:37px}
  .ppx .stage2__meta{display:none}
  .ppx .platform__rail{padding:20px 0 0}
  .ppx .cap{min-height:44vh;justify-content:flex-start}
  .ppx .cap:last-child{min-height:64vh}
  .ppx .cap__title{font-size:30px}
  .ppx .cap__desc{font-size:16px;max-width:none}
}
@media (max-width:768px){
  .ppx .platform{padding:56px 0 64px}
  .ppx .h-platform{font-size:36px}
  .ppx .platform__lead{font-size:17px}
}

/* ---------- section 03: touring (the dark chapter: pinned stage, four scroll states) ---------- */
.ppx .touring{background:#0F0F0F;color:#F5F5F7;padding:120px 0 120px;margin-top:20px;--ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--tink:#F5F5F7;--tmute:rgba(245,245,247,.62);--tdim:rgba(245,245,247,.3)}
.ppx .touring__opener{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:900px;margin:0 auto}
.ppx .teyebrow{font-family:var(--so);font-weight:500;font-size:21px;letter-spacing:-.01em;color:rgba(245,245,247,.72)}
.ppx .h-touring{font-family:var(--so);font-weight:500;font-size:64px;letter-spacing:-.03em;line-height:1.05;color:var(--tink);text-wrap:balance;max-width:900px}
.ppx .touring__lead{max-width:640px;color:var(--tmute)}
/* the route strip, on dark */
.ppx .route{position:relative;width:100%;max-width:640px;margin:0 auto}
.ppx .route__line{position:absolute;left:12.5%;right:12.5%;top:2px;height:2px;background-image:repeating-linear-gradient(90deg,rgba(245,245,247,.28) 0 6px,transparent 6px 12px)}
.ppx .route__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--pink);transition:width .9s var(--ease)}
.ppx .route__mark{position:absolute;top:-4px;width:10px;height:10px;margin-left:-6px;border-radius:50%;border:2px solid rgba(245,245,247,.8);background:#0F0F0F;box-sizing:border-box}
.ppx .route__dot{position:absolute;top:-6px;left:12.5%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,51,102,.22);transition:left .9s var(--ease)}
.ppx .route__ghost{position:absolute;top:-4px;left:37.5%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:rgba(255,51,102,.35);opacity:0;transition:opacity .4s}
.ppx .route__stops{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
.ppx .route__stop{display:grid;grid-template-rows:auto auto 14px;row-gap:4px;justify-items:center}
.ppx .route__stop>b{grid-row:1;font-family:var(--so);font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--tink)}
.ppx .route__date{grid-row:2;font-family:var(--na);font-size:13px;color:var(--tmute)}
.ppx .route__state em{font-style:normal}
.ppx .route__state{grid-row:3;grid-column:1;font-family:var(--so);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);height:14px;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ppx [data-state="arrive"] .route__ghost{opacity:1}
.ppx [data-state="arrive"] .route__state--arrive,.ppx [data-state="here"] .route__state--here,.ppx [data-state="home"] .route__state--home{opacity:1;transform:none}
.ppx [data-state="here"] .route__dot{left:37.5%;animation:ppx-dotpulse 2.4s ease-in-out infinite}
.ppx [data-state="here"] .route__fill{width:33.4%}
@keyframes ppx-dotpulse{0%,100%{box-shadow:0 0 0 4px rgba(255,51,102,.22)}50%{box-shadow:0 0 0 9px rgba(255,51,102,.12)}}
/* the stage */
.ppx .touring__grid{display:grid;grid-template-columns:560px minmax(0,1fr);gap:80px;align-items:stretch;margin-top:72px}
.ppx .touring__stagecol{position:relative}
.ppx .tstage{position:sticky;top:calc(var(--hdr) + 40px);height:calc(100vh - var(--hdr) - 40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;--ph:min(727px,calc(100vh - var(--hdr) - 220px))}
.ppx .tstage__glow{position:absolute;left:-20%;right:-20%;top:20%;bottom:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,51,102,.16),rgba(255,51,102,0));pointer-events:none}
.ppx .tphone2{position:relative;width:calc(var(--ph) * .462 + 18px);border-radius:50px;background:#0b0b0c;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06) inset;flex:none}
.ppx .tphone2__screen{position:relative;height:var(--ph);border-radius:42px;overflow:hidden;background:#fff}
.ppx .tscreen{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);will-change:opacity}
.ppx .tscreen.is-on{opacity:1;z-index:1}
.ppx .tscreen img,.ppx .tscreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ppx .tscreen video{opacity:0;transition:opacity .2s}
.ppx .tscreen video.is-playing{opacity:1}
.ppx .touring__rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ppx .tcap{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.ppx .tcap:last-child{min-height:70vh}
.ppx .tcap__title{margin:0;font-family:var(--so);font-weight:500;font-size:32px;line-height:1.08;letter-spacing:-.02em;color:var(--tdim);transition:color .35s var(--ease)}
.ppx .tcap.is-on .tcap__title{color:var(--tink);transition-duration:.45s}
.ppx .tcap__desc{margin:0;max-width:440px;font-family:var(--na);font-size:17px;line-height:1.45;color:var(--tmute);opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),max-height .25s var(--ease),margin .25s}
.ppx .tcap.is-on .tcap__desc{opacity:1;transform:none;max-height:200px;margin-top:12px;transition-duration:.45s;transition-delay:.12s}
.ppx .touring__close{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:40px;max-width:820px;margin:0 auto}
.ppx .tclose{margin:0;font-family:var(--so);font-weight:500;font-size:48px;letter-spacing:-.03em;line-height:1.08;color:var(--tink)}
.ppx .tfacts{margin:0;font-family:var(--so);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,245,247,.5)}
/* entrance */
@media (prefers-reduced-motion:no-preference){
  .ppx .touring__opener>*{opacity:0;transform:translateY(14px)}
  .ppx .touring .route{opacity:0;transform:translateY(12px)}
  .ppx .touring .tphone2{opacity:0;transform:translateY(28px) scale(.98)}
  .ppx .touring.is-in .touring__opener>*{animation:ppx-rise .65s var(--ease) forwards}
  .ppx .touring.is-in .touring__opener>*:nth-child(1){animation-duration:.5s}
  .ppx .touring.is-in .touring__opener>*:nth-child(2){animation-delay:.08s}
  .ppx .touring.is-in .touring__opener>*:nth-child(3){animation-delay:.16s}
  .ppx .touring.is-in .route{animation:ppx-rise .7s var(--ease) .2s forwards}
  .ppx .touring.is-in .tphone2{animation:ppx-rise .9s var(--ease) .3s forwards}
}
@media (prefers-reduced-motion:reduce){
  .ppx .route__dot,.ppx .route__fill,.ppx .route__state,.ppx .tscreen,.ppx .tcap__title,.ppx .tcap__desc{transition:none;animation:none}
}
@media (max-width:1100px){
  .ppx .touring{padding:96px 0 100px}
  .ppx .h-touring{font-size:52px}
  .ppx .touring__grid{grid-template-columns:420px minmax(0,1fr);gap:48px}
  .ppx .tstage{--ph:min(649px,calc(100vh - var(--hdr) - 220px))}
  .ppx .route__stop>b{font-size:14px}
  .ppx .tcap__title{font-size:28px}
  .ppx .tclose{font-size:40px}
}
@media (max-width:900px){
  .ppx .touring{padding:64px 0 72px}
  .ppx .h-touring{font-size:44px}
  .ppx .teyebrow{font-size:17px}
  .ppx .touring__grid{display:block;margin-top:40px}
  .ppx .touring__stagecol{position:sticky;top:calc(var(--hdr) + 12px);z-index:2;background:linear-gradient(#0F0F0F 84%,rgba(15,15,15,0))}
  .ppx .tstage{position:static;height:auto;gap:22px;padding:0 0 18px}
  .ppx .tstage__glow{top:30%;bottom:0}
  .ppx .route__stop>b{font-size:12px}
  .ppx .route__date{font-size:11px}
  .ppx .route__state{font-size:9px;letter-spacing:.06em}
  .ppx .route__state em{display:none}
  .ppx .tphone2{width:calc(min(46svh,460px) * .462 + 16px);padding:8px;border-radius:40px}
  .ppx .tphone2__screen{height:min(46svh,460px);border-radius:33px}
  .ppx .touring__rail{padding:20px 0 0}
  .ppx .tcap{min-height:44vh;justify-content:flex-start}
  .ppx .tcap:last-child{min-height:64vh}
  .ppx .tcap__title{font-size:28px}
  .ppx .tcap__desc{font-size:16px;max-width:none}
  .ppx .touring__close{padding-top:16px}
  .ppx .tclose{font-size:34px}
}
@media (max-width:768px){
  .ppx .h-touring{font-size:40px}
  .ppx .touring__lead{font-size:17px}
}

/* ---------- temporary next-section placeholder ---------- */
.ppx .next-ph{padding:0 0 120px}
.ppx .next-ph__box{min-height:80vh;border:1px dashed rgba(20,20,20,.18);border-radius:24px;display:flex;align-items:center;justify-content:center;font-family:var(--so);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

/* ---------- entrance (once, on load) ---------- */
@media (prefers-reduced-motion:no-preference){
  .ppx .hero__copy>*{opacity:0;transform:translateY(14px);animation:ppx-rise .7s cubic-bezier(.22,1,.36,1) forwards}
  .ppx .hero__copy>*:nth-child(1){animation-delay:.05s}.ppx .hero__copy>*:nth-child(2){animation-delay:.12s}.ppx .hero__copy>*:nth-child(3){animation-delay:.2s}.ppx .hero__copy>*:nth-child(4){animation-delay:.28s}.ppx .hero__copy>*:nth-child(5){animation-delay:.36s}
  .ppx .frame{opacity:0;transform:translateY(28px);animation:ppx-rise .9s cubic-bezier(.22,1,.36,1) .25s forwards}
  .ppx .stat-row>*{opacity:0;transform:translateY(10px);animation:ppx-rise .6s cubic-bezier(.22,1,.36,1) forwards}
  .ppx .stat-row>*:nth-child(1){animation-delay:.5s}.ppx .stat-row>*:nth-child(2){animation-delay:.56s}.ppx .stat-row>*:nth-child(3){animation-delay:.62s}.ppx .stat-row>*:nth-child(4){animation-delay:.68s}
  @keyframes ppx-rise{to{opacity:1;transform:none}}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ppx .h-hero{font-size:58px}
  .ppx .hero__grid{grid-template-columns:1fr 460px;gap:40px}
  .ppx .hero__stage{min-height:480px}
}
@media (max-width:900px){
  .ppx .hero{padding:48px 0 32px}
  .ppx .hero__grid{grid-template-columns:1fr;gap:36px}
  .ppx .hero__stage{min-height:0;padding:24px 0}
  .ppx .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:768px){
  .ppx .h-hero{font-size:44px;line-height:1.07}
  .ppx .kicker b{display:block;margin:0 0 6px}
  .ppx .lead{font-size:18px}
  .ppx .hero__copy{gap:18px}
  .ppx .hero__cta .btn,.ppx .hero__cta .btn-ghost{height:52px;flex:1 1 auto}
  .ppx .hero__stage{padding:12px 0 8px}
  .ppx .frame{border-radius:14px}
  .ppx .stage__pause{right:6px;bottom:0}
  .ppx .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ppx .stat-row .v{font-size:44px}
  .ppx .stats{padding:8px 0 60px}
}

/* ===================================================================================================
   Apple type and spacing pass (httpdocs/docs/theme/apple-product-page-design-study.md, Part B, 2026-09-18).
   One block, appended last so it wins the cascade and can be removed as a unit to revert.
   Tokens: hero 64/68, story 56/60, section 40/44, stat 40, card 24/28, eyebrow 19/23, lead 21/29, body 17/25,
   ui 17/21, small 14/20; tablet <= 1068, phone <= 734; headline line-height = size + 4; Söhne 500 for anything
   that is a heading or label, 400 for anything you read; content 87.5% capped at 1260; story padding 128/96/80.
   =================================================================================================== */
.ppx{--t-hero:64px;--lh-hero:68px;--t-story:56px;--lh-story:60px;--t-section:40px;--lh-section:44px;--t-stat:40px;--t-card:24px;--lh-card:28px;--t-eyebrow:19px;--lh-eyebrow:23px;--t-lead:21px;--lh-lead:29px;--t-body:17px;--lh-body:25px;--t-ui:17px;--lh-ui:21px;--t-small:14px;--lh-small:20px;--pad-story:128px;--gap-eyebrow:20px;--gap-lead:26px;--gap-visual:64px;--wrap:1260px}
@media (max-width:1068px){.ppx{--t-hero:56px;--lh-hero:60px;--t-story:48px;--lh-story:52px;--t-section:34px;--lh-section:38px;--t-card:22px;--lh-card:26px;--t-lead:19px;--lh-lead:27px;--t-ui:16px;--lh-ui:20px;--pad-story:96px;--gap-eyebrow:18px;--gap-lead:24px;--gap-visual:54px}}
@media (max-width:734px){.ppx{--t-hero:40px;--lh-hero:44px;--t-story:34px;--lh-story:38px;--t-section:28px;--lh-section:32px;--t-stat:36px;--t-card:20px;--lh-card:24px;--t-eyebrow:17px;--lh-eyebrow:21px;--t-lead:18px;--lh-lead:26px;--t-body:16px;--lh-body:24px;--t-ui:15px;--lh-ui:20px;--pad-story:80px;--gap-eyebrow:10px;--gap-lead:18px;--gap-visual:36px}}
/* content width: 87.5% of the viewport, capped at 1260 (gutters 90 at 1440, 24 at 390) */
.ppx .wrap{width:min(var(--wrap),87.5%)}
/* eyebrows: the feature name, sentence case, Söhne 500 19/23, no full stop */
.ppx .kicker,.ppx .teyebrow{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:0;text-transform:none;color:var(--ink)}
.ppx .kicker b{font-weight:500;color:var(--ink);margin:0}
.ppx .kicker--line i{display:none}
.ppx .touring .teyebrow{color:rgba(245,245,247,.72)}
@media (max-width:734px){.ppx .kicker__sep{display:none}.ppx .kicker b{display:block;margin:0 0 4px}}
/* the scale */
.ppx .h-hero{font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:-.02em}
.ppx .h-platform,.ppx .h-touring,.ppx .tclose{font-size:var(--t-story);line-height:var(--lh-story);letter-spacing:-.02em}
.ppx .reveal{font-size:var(--t-story);line-height:var(--lh-story);font-weight:500;letter-spacing:-.02em}
.ppx .statement__inner{max-width:840px;margin:0 auto;text-align:center}
.ppx .cap__title,.ppx .tcap__title{font-size:var(--t-section);line-height:var(--lh-section);font-weight:500;letter-spacing:-.01em}
.ppx .lead{font-size:var(--t-lead);line-height:var(--lh-lead)}
.ppx .cap__desc,.ppx .tcap__desc{font-size:var(--t-body);line-height:var(--lh-body)}
.ppx .small{font-size:var(--t-small);line-height:var(--lh-small)}
/* grey copy, ink highlights: the 1-2 phrases that carry the argument are ink, same weight */
.ppx .ink{color:var(--ink);font-weight:inherit}
.ppx .touring .ink{color:var(--tink)}
/* stats: numbers are the proof, 40 / 500, caption 14/20 two pixels under */
.ppx .stat-row{gap:48px 24px}
.ppx .stat-row .v{font-weight:500;font-size:var(--t-stat);line-height:1;letter-spacing:-.01em}
.ppx .stat-row .v b{font-weight:500;font-size:20px;vertical-align:top;margin-left:1px}
.ppx .stat-row .l{font-size:var(--t-small);line-height:var(--lh-small);margin-top:2px}
/* labels in sentence case, no tracking caps in running copy */
.ppx .stage2__label,.ppx .tfacts{text-transform:none;letter-spacing:0;font-family:var(--na);font-size:var(--t-small);line-height:var(--lh-small)}
.ppx .route__state{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}
/* alignment: everything on one left edge, like Apple's story lockups that sit beside a visual (camera story);
   the reading measure stays 840 */
.ppx .statement__inner{margin:0;text-align:left;max-width:840px}
.ppx .platform__opener{align-items:flex-start;text-align:left;margin:0;max-width:840px}
.ppx .platform__opener .kicker{text-align:left}
.ppx .touring__opener{align-items:flex-start;text-align:left;margin:0;max-width:840px}
.ppx .touring__opener .teyebrow,.ppx .touring__opener .h-touring,.ppx .touring__opener .touring__lead{text-align:left}
.ppx .h-platform,.ppx .h-touring{max-width:840px}
.ppx .touring__close{align-items:flex-start;text-align:left;margin:0;max-width:840px}
.ppx .tclose{text-align:left}
/* lockup gaps: eyebrow -> headline 20, headline -> lead 26, lead -> visual 64 (tablet 18/24/54, phone 10/18/36) */
.ppx .hero__copy{gap:var(--gap-eyebrow)}
.ppx .hero__copy .lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow))}
.ppx .hero__cta{margin-top:12px}
.ppx .platform__opener,.ppx .touring__opener{gap:var(--gap-eyebrow)}
.ppx .platform__lead,.ppx .touring__lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow))}
.ppx .platform__grid,.ppx .touring__grid{margin-top:var(--gap-visual)}
/* vertical rhythm: story sections 128 / 96 / 80 */
.ppx .hero{padding:var(--pad-story) 0 var(--gap-visual)}
/* owner 2026-09-22: the stat row belongs to the hero, so it keeps the hero's white; the grey band starts at the statement */
.ppx .stats{padding:0 0 calc(var(--pad-story) / 2)}
.ppx .statement{padding:var(--gap-visual) 0 var(--pad-story)}
.ppx .platform{padding:var(--pad-story) 0}
.ppx .touring{padding:var(--pad-story) 0;margin-top:0}
.ppx .touring__close{padding-top:var(--gap-visual)}

/* ===================================================================================================
   Section 03: PLACEMENT, the tier switcher (build 2, 2026-09-19). Dark chapter after Platform. Built on the Apple tokens above.
   Three tabs (Diamond, VIP, Regular) over one frameless card of the real Auckland page. Four slides: Diamond has two
   (the strip, then its cards lit inside the VIP area), VIP and Regular one each. The line in the active tab fills while a
   slide shows, then the next slide comes in from the right. Nothing is pinned and nobody has to swipe.
   Markup: tools/build-placement-section.py (measured highlight positions). Behaviour: the last function in js/page.js.
   =================================================================================================== */
/* top padding is smaller than the other story sections (128): owner, 2026-09-19, the card has to be on screen together with the opener */
.ppx .placement{background:#0F0F0F;color:#F5F5F7;padding:80px 0 var(--pad-story,128px);--ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--travel:cubic-bezier(.65,0,.35,1);--tink:#F5F5F7;--tmute:rgba(245,245,247,.62);--tdim:rgba(245,245,247,.3);--sw-ms:4500ms}
.ppx .placement__opener{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--gap-eyebrow,20px);max-width:840px}
.ppx .peyebrow{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow,19px);line-height:var(--lh-eyebrow,23px);color:rgba(245,245,247,.72)}
.ppx .h-placement{font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--tink);text-wrap:balance;max-width:840px}
.ppx .placement__lead{max-width:640px;color:var(--tmute);margin-top:calc(var(--gap-lead,26px) - var(--gap-eyebrow,20px))}
.ppx .placement .ink{color:var(--tink)}

.ppx .sw{position:relative;margin-top:48px}
.ppx .sw__glow{position:absolute;left:14%;right:0;top:24%;bottom:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,51,102,.12),rgba(255,51,102,0));pointer-events:none}
/* tabs: the mark, the tier, its number. All three numbers stay in view, so the ladder reads even while one view is open */
.ppx .sw__tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ppx .sw__tab{position:relative;display:flex;align-items:center;gap:16px;min-width:0;height:88px;padding:0 24px;border-radius:20px;overflow:hidden;text-align:left;font:inherit;color:inherit;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .35s var(--ease),border-color .35s var(--ease);-webkit-tap-highlight-color:transparent}
.ppx .sw__tab:hover{background:rgba(255,255,255,.07)}
.ppx .sw__tab:focus-visible,.ppx .sw__pp:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.ppx .sw__tab.is-on{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.ppx .sw__mark{flex:none;width:auto;height:42px;opacity:.45;filter:saturate(.25);transform:scale(.94);transition:opacity .35s,filter .35s,transform .5s var(--pop)}
.ppx .sw__tab.is-on .sw__mark{opacity:1;filter:none;transform:none}
.ppx .sw__tabtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.ppx .sw__name{font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow,19px);line-height:var(--lh-eyebrow,23px);color:var(--tmute);transition:color .35s}
.ppx .sw__tab.is-on .sw__name{color:var(--tink)}
.ppx .sw__sub{font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:var(--tmute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppx .sw__sub--s{display:none}
/* the line: one segment per slide of the tier, so Diamond shows two */
.ppx .sw__bar{position:absolute;left:0;right:0;bottom:0;height:3px;display:flex;gap:3px}
.ppx .sw__seg{flex:1 1 0;display:block;background:rgba(255,255,255,.1);overflow:hidden}
.ppx .sw__seg b{display:block;height:100%;background:linear-gradient(to right,#E61E4D,#D70466);transform:scaleX(0);transform-origin:left center}
.ppx .sw__seg.is-done b{transform:scaleX(1)}
.ppx .sw__seg.is-run b{animation:ppx-swfill var(--sw-ms) linear forwards}
.ppx .sw.is-paused .sw__seg.is-run b{animation-play-state:paused}
.ppx .sw.is-still .sw__seg.is-run b{animation:none;transform:scaleX(1)}
@keyframes ppx-swfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.ppx .sw__stage{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);grid-template-areas:"media heads" "media bodies";column-gap:64px;row-gap:18px;align-items:center;margin-top:28px}
.ppx .sw__media{grid-area:media;min-width:0;display:flex;flex-direction:column;gap:14px}
.ppx .sw__card{position:relative;border-radius:28px;overflow:hidden;background:#0b0b0c;box-shadow:0 40px 90px rgba(0,0,0,.55);isolation:isolate}
.ppx .sw__view{position:relative;aspect-ratio:1600/1000;overflow:hidden}
/* the strip: one line on top of the picture saying where the tier sits. Shown at 900 and below, where the text column is gone */
.ppx .sw__strip{display:none}
.ppx .sw__card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none;z-index:3}
.ppx .sw__track{display:flex;width:100%;height:100%;transition:transform .8s var(--travel);will-change:transform}
.ppx .sw__slide{position:relative;flex:none;width:100%;height:100%;container-type:inline-size}
.ppx .sw__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ppx .sw__img--phone{display:none}
/* the lights: on the VIP area slides the other tier steps back and this tier's photos get a ring, after the slide has landed */
/* the layer keeps the PICTURE's proportions (not the card's): the phone card is shorter than its picture and crops it from the top,
   so percentages must be measured against the picture or the rings drift off the photos */
.ppx .sw__lights{position:absolute;left:0;top:0;width:100%;pointer-events:none;--rr:10px;--sr:12px}
.ppx .sw__lights--desktop{aspect-ratio:1600/1000;--rr:1.25cqw;--sr:1.5cqw}
.ppx .sw__lights--phone{display:none;aspect-ratio:1026/1263;--rr:4.1cqw;--sr:4.6cqw}
.ppx .sw__shade{position:absolute;border-radius:var(--sr);background:rgba(11,11,12,.68);opacity:0;transition:opacity .2s linear}
.ppx .sw__ring{position:absolute;border-radius:var(--rr);box-shadow:0 0 0 2px var(--pink),0 0 0 6px rgba(255,51,102,.22);opacity:0;transform:scale(1.03);transition:opacity .2s linear,transform .2s linear}
.ppx .sw__slide.is-on .sw__shade{opacity:1;transition:opacity .6s var(--ease) .75s}
.ppx .sw__slide.is-on .sw__ring{opacity:1;transform:none;transition:opacity .45s var(--ease) calc(.9s + var(--i,0) * .09s),transform .6s var(--pop) calc(.9s + var(--i,0) * .09s)}
.ppx .sw__caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px}
.ppx .sw__url{display:inline-flex;align-items:center;gap:7px;min-width:0;font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:rgba(245,245,247,.5)}
.ppx .sw__url svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ppx .sw__pp{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--tink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:background .25s}
.ppx .sw__pp:hover{background:rgba(255,255,255,.12)}
.ppx .sw__ico{width:16px;height:16px}
.ppx .sw__ico--pause{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ppx .sw__ico--play{fill:currentColor;display:none}
.ppx .sw__pp.is-paused .sw__ico--pause{display:none}
.ppx .sw__pp.is-paused .sw__ico--play{display:block}

/* the text follows the card: the old tier leaves, the new one arrives from the right. Heads (where it sits + the number) and bodies are two
   blocks, so a phone can show the head ABOVE the picture and the paragraph under it. Each block stacks its three texts in one grid cell
   and keeps the height of the longest, so nothing jumps */
.ppx .sw__heads{grid-area:heads;align-self:end;display:grid;min-width:0}
.ppx .sw__bodies{grid-area:bodies;align-self:start;display:grid;min-width:0}
.ppx .sw__head{grid-area:1/1;display:flex;flex-direction:column;gap:18px;align-self:end}
.ppx .sw__body{grid-area:1/1}
.ppx .sw__head,.ppx .sw__body{opacity:0;visibility:hidden;transform:translate3d(28px,0,0);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.ppx .sw__head.is-on,.ppx .sw__body.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .25s,transform .7s var(--ease) .25s,visibility 0s}
.ppx .sw__body.is-on{transition-delay:.32s,.32s,0s}
.ppx .sw__place{display:flex;align-items:center;gap:14px}
.ppx .sw__map{position:relative;flex:none;display:block;width:30px;height:64px;box-sizing:border-box;border-radius:7px;border:1.5px solid rgba(245,245,247,.3)}
.ppx .sw__band{position:absolute;left:4px;right:4px;border-radius:2px;background:rgba(245,245,247,.16);transition:opacity .4s var(--ease)}
.ppx .sw__band[data-band="0"]{top:9px;height:9px}
.ppx .sw__band[data-band="1"]{top:22px;height:14px}
.ppx .sw__band[data-band="2"]{top:40px;height:16px}
.ppx .sw__band.is-tier{background:linear-gradient(to right,#E61E4D,#D70466)}
/* Diamond owns two bands: the one in view is full, the other steps back */
.ppx .sw__head[data-step="0"] .sw__band.is-tier[data-band="1"],.ppx .sw__head[data-step="1"] .sw__band.is-tier[data-band="0"]{opacity:.38}
.ppx .sw__placetext{display:flex;flex-direction:column;gap:2px;min-width:0}
.ppx .sw__placek{font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:var(--tmute)}
.ppx .sw__placev{display:grid;font-family:var(--so);font-weight:500;font-size:var(--t-ui,17px);line-height:var(--lh-ui,21px);color:var(--tink)}
.ppx .sw__step{grid-area:1/1;opacity:0;transform:translate3d(10px,0,0);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.ppx .sw__step.is-on{opacity:1;transform:none;transition:opacity .45s var(--ease) .3s,transform .55s var(--ease) .3s}
.ppx .sw__title{font-family:var(--so);font-weight:500;font-size:var(--t-section,40px);line-height:var(--lh-section,44px);letter-spacing:-.01em;color:var(--tink);text-wrap:balance}
.ppx .sw__body{font-family:var(--na);font-size:var(--t-body,17px);line-height:var(--lh-body,25px);color:var(--tmute)}

.ppx .placement__close{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px;padding-top:var(--gap-visual,64px);max-width:840px}
.ppx .pclose{font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--tink);text-wrap:balance}
.ppx .pclose__l{display:block}
.ppx .pfacts{font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:rgba(245,245,247,.5)}

@media (prefers-reduced-motion:no-preference){
  .ppx .placement__opener>*{opacity:0;transform:translateY(14px)}
  .ppx .placement .sw__tabs,.ppx .placement .sw__stage{opacity:0;transform:translateY(24px)}
  .ppx .placement.is-in .placement__opener>*{animation:ppx-rise .65s var(--ease) forwards}
  .ppx .placement.is-in .placement__opener>*:nth-child(1){animation-duration:.5s}
  .ppx .placement.is-in .placement__opener>*:nth-child(2){animation-delay:.08s}
  .ppx .placement.is-in .placement__opener>*:nth-child(3){animation-delay:.16s}
  .ppx .placement.is-in .sw__tabs{animation:ppx-rise .8s var(--ease) .22s forwards}
  .ppx .placement.is-in .sw__stage{animation:ppx-rise .9s var(--ease) .32s forwards}
}
@media (prefers-reduced-motion:reduce){
  .ppx .sw__track,.ppx .sw__stripitem,.ppx .sw__stripitem.is-on,.ppx .sw__head,.ppx .sw__head.is-on,.ppx .sw__body,.ppx .sw__body.is-on,.ppx .sw__step,.ppx .sw__step.is-on,.ppx .sw__shade,.ppx .sw__ring,.ppx .sw__slide.is-on .sw__shade,.ppx .sw__slide.is-on .sw__ring,.ppx .sw__mark,.ppx .sw__band{transition:none!important}
}
@media (max-width:1100px){
  .ppx .placement{padding-top:64px}
  .ppx .sw{margin-top:40px}
  .ppx .sw__stage{gap:48px}
  .ppx .sw__tab{padding:0 18px;gap:12px}
  .ppx .sw__mark{height:36px}
}
/* 900 and below: one column, and the picture comes first. Its strip carries the one line that explains it ("Top of every page"),
   so tabs + message + picture are on a phone screen together. The number and the paragraph follow under the picture.
   Owner on a real iPhone: the picture started too low and its first quarter was the site's own intro card, which says nothing to an advertiser. */
@media (max-width:900px){
  .ppx .sw__stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "heads" "bodies";row-gap:18px;align-items:start}
  .ppx .sw__heads,.ppx .sw__bodies{align-self:start}
  .ppx .sw__head{align-self:start}
  .ppx .sw__place{display:none}
  .ppx .sw__strip{position:relative;display:grid;align-items:center;height:48px;padding:0 16px;background:rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.08)}
  .ppx .sw__stripitem{grid-area:1/1;display:flex;align-items:center;gap:10px;min-width:0;opacity:0;transform:translate3d(12px,0,0);transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .ppx .sw__stripitem.is-on{opacity:1;transform:none;transition:opacity .45s var(--ease) .35s,transform .55s var(--ease) .35s}
  .ppx .sw__striptext{min-width:0;font-family:var(--so);font-weight:500;font-size:15px;line-height:19px;color:var(--tink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ppx .sw__map--s{width:16px;height:34px;border-radius:5px;border-width:1.25px}
  .ppx .sw__map--s .sw__band{left:2.5px;right:2.5px;border-radius:1.5px}
  .ppx .sw__map--s .sw__band[data-band="0"]{top:4px;height:6px}
  .ppx .sw__map--s .sw__band[data-band="1"]{top:12px;height:8px}
  .ppx .sw__map--s .sw__band[data-band="2"]{top:22px;height:7px}
  .ppx .sw__band.is-dim{opacity:.38}
  .ppx .sw__glow{left:0;right:0;top:30%;bottom:20%}
  .ppx .placement__close{padding-top:var(--gap-visual,36px)}
}
/* 600 and below: stacked tabs, and the card shows the phone version of the page. No phone mockup: the card is the screen */
@media (max-width:600px){
  .ppx .sw__tabs{gap:8px}
  .ppx .sw__tab{flex-direction:column;justify-content:center;gap:5px;border-radius:18px;text-align:center}
  .ppx .sw__mark{height:24px}
  .ppx .sw__tabtext{align-items:center;gap:1px;max-width:100%}
  .ppx .sw__name{font-size:15px;line-height:19px}
  .ppx .sw__sub{font-size:12px;line-height:15px;max-width:100%}
  .ppx .sw__sub--l{display:none}
  .ppx .sw__sub--s{display:block}
  /* everything above the picture is as short as it can be, so the picture starts high on the screen */
  .ppx .placement{padding-top:32px}
  .ppx .placement .lead__long{display:none}
  .ppx .sw{margin-top:20px}
  .ppx .sw__tab{height:80px;padding:8px 6px 11px;gap:3px}
  .ppx .sw__stage{margin-top:12px;row-gap:16px}
  .ppx .sw__card{border-radius:24px}
  .ppx .sw__view{aspect-ratio:1026/1263}
  .ppx .sw__strip{height:46px;padding:0 14px}
  .ppx .sw__img--desktop,.ppx .sw__lights--desktop{display:none}
  .ppx .sw__img--phone,.ppx .sw__lights--phone{display:block}
  .ppx .sw__caption{padding:0 4px}
  .ppx .sw__url{font-size:13px;line-height:18px}
}

/* placeholder between the two dark chapters */
.ppx .between-ph{padding:var(--pad-story,128px) 0}
.ppx .between-ph__box{min-height:46vh}

/* The stage glows are wider than their column. Clip them at the section edge so a phone never gets a sideways scroll
   (measured 2026-09-18: Touring's glow reached 434 px on a 390 px screen and the page zoomed out to 0.9).
   clip, not hidden: hidden would turn the section into a scroll container and break the sticky stages. */
.ppx .platform,.ppx .placement,.ppx .touring{overflow-x:clip}
@media (max-width:900px){.ppx .stage2__glow,.ppx .tstage__glow{left:0;right:0}}

/* ==== css/pricing.css ==== */
/* 8. PRICING "The nine" (canvas "Pricing Directions", option 2 + headline option 2; owner 2026-09-23).
   One grid: tiers across, lengths down, all nine prices at once. One price is picked (VIP, 1 week to start) and the
   line under the grid and its button follow it. Copy and prices are the payment window's (item-activate-checkout.php).
   Own sheet and pn- class names, so nothing here touches page.css. Type and spacing use the page tokens from page.css. */

.ppx .pricing{
  --pn-ink:#141414; --pn-ink2:rgba(20,20,20,.64); --pn-ink3:rgba(20,20,20,.5); --pn-hair:rgba(20,20,20,.08);
  --pn-tray:#F5F5F7; --pn-pink:#ff3366; --pn-ease:cubic-bezier(.22,1,.36,1);
  --pn-r:24px; --pn-rows:96px; --pn-labels:168px; --pn-gap:16px; --pn-pad:24px; --pn-pad-top:36px; --pn-tray-r:40px;
  background:#fff; padding:var(--gap-visual,64px) 0 var(--pad-story,128px); /* 64 under Placement's own 128 = 192, like every other change of chapter */
}

/* ---------- head: eyebrow, headline, lead (left, like the other openers) ---------- */
.ppx .pn-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-eyebrow,20px);max-width:840px}
.ppx .pn-h{font-family:var(--so);font-weight:500;font-size:var(--t-story,56px);line-height:var(--lh-story,60px);letter-spacing:-.02em;color:var(--pn-ink);text-wrap:balance}
.ppx .pn-lead{max-width:640px;margin-top:calc(var(--gap-lead,26px) - var(--gap-eyebrow,20px))}
@media (min-width:735px){.ppx .pn-lead .ink{display:block}}

/* ---------- the nine ---------- */
.ppx .pn-board{
  display:grid; grid-template-columns:var(--pn-labels) repeat(3,minmax(0,1fr)); grid-template-rows:auto repeat(3,var(--pn-rows));
  column-gap:var(--pn-gap); margin-top:var(--gap-visual,64px); padding:var(--pn-pad-top) var(--pn-pad) var(--pn-pad); border-radius:var(--pn-tray-r); background:var(--pn-tray);
}
.ppx .pn-labels,.ppx .pn-col{grid-row:1 / -1;display:grid;grid-template-rows:subgrid}
@supports not (grid-template-rows:subgrid){
  .ppx .pn-labels,.ppx .pn-col{grid-template-rows:232px repeat(3,var(--pn-rows))}
}

.ppx .pn-len{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:0 8px 0 16px;font-family:var(--so);font-weight:500;font-size:18px;line-height:1.2;color:var(--pn-ink)}
.ppx .pn-bv{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:999px;background:var(--pn-ink);color:#fff;font-family:var(--so);font-weight:500;font-size:10.5px;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

.ppx .pn-col{position:relative;border-radius:var(--pn-r);background:#fff;box-shadow:0 1px 2px rgba(20,20,30,.04),0 14px 34px -22px rgba(20,20,30,.3)}
.ppx .pn-col--regular{--pn-acc:#141414;--pn-acc-ink:#141414;--pn-soft:#f7f7f4}
.ppx .pn-col--vip{--pn-acc:var(--pn-pink);--pn-acc-ink:#d8174c;--pn-soft:#fff0f4;z-index:1;box-shadow:0 0 0 2px var(--pn-pink),0 24px 50px -20px rgba(255,51,102,.4)}
.ppx .pn-col--diamond{--pn-acc:#c9a24e;--pn-acc-ink:#7b571d;--pn-soft:#fff7df}

.ppx .pn-top{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:30px 28px 26px}
.ppx .pn-cap{position:absolute;top:-14px;left:26px;display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;background:var(--pn-pink);color:#fff;font-family:var(--so);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(255,51,102,.7)}
.ppx .pn-mark{display:flex;align-items:flex-end;height:76px}
.ppx .pn-mark img{display:block;width:auto;height:62px;filter:drop-shadow(0 8px 14px rgba(15,23,42,.18))}
.ppx .pn-col--vip .pn-mark img{height:76px}
.ppx .pn-col--regular .pn-mark img{height:60px}
.ppx .pn-name{margin-top:18px;font-family:var(--so);font-weight:500;font-size:28px;line-height:1.1;letter-spacing:-.015em;color:var(--pn-ink)}
.ppx .pn-spot{margin-top:10px;font-family:var(--na);font-size:16px;line-height:23px;color:var(--pn-ink2);text-wrap:pretty}
.ppx .pn-spot b{display:block;margin-top:2px;font-weight:400;color:var(--pn-ink)}
.ppx .pn-short{display:none}

.ppx .pn-cell{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:0 26px 0 28px;border:0;border-top:1px solid var(--pn-hair);background:transparent;color:var(--pn-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .25s var(--pn-ease)}
/* the pick is a rounded tile set inside the column, clear of the column's own edge (owner 2026-09-23: a full-width ring
   sat on the VIP column's border and read as a doubled line with square corners) */
.ppx .pn-cell::before{content:"";position:absolute;z-index:-1;inset:7px 9px;border-radius:16px;background:transparent;transition:background-color .25s var(--pn-ease),box-shadow .25s var(--pn-ease)}
.ppx .pn-cell:hover::before{background:rgba(20,20,20,.035)}
.ppx .pn-cell:focus-visible{outline:none}
.ppx .pn-cell:focus-visible::before{box-shadow:inset 0 0 0 1.5px var(--pn-acc),0 0 0 3px rgba(255,51,102,.3)}
.ppx .pn-price{display:inline-flex;align-items:flex-start;font-family:var(--so);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.015em;font-variant-numeric:tabular-nums;transition:color .25s var(--pn-ease)}
.ppx .pn-price i{font-style:normal;font-size:.5em;line-height:1;margin:.12em .06em 0 0}
.ppx .pn-price small{font-size:.5em;line-height:1;margin-top:.12em}
.ppx .pn-dot{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(20,20,20,.2);transition:background-color .25s var(--pn-ease),border-color .25s var(--pn-ease)}
.ppx .pn-dot::after{content:"";position:absolute;left:7.5px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:opacity .2s,transform .3s var(--pn-ease)}
.ppx .pn-cell[aria-checked="true"],.ppx .pn-cell[aria-checked="true"] + .pn-cell{border-top-color:transparent}
.ppx .pn-cell[aria-checked="true"]::before{background:var(--pn-soft);box-shadow:inset 0 0 0 1.5px var(--pn-acc)}
.ppx .pn-cell[aria-checked="true"]:focus-visible::before{box-shadow:inset 0 0 0 1.5px var(--pn-acc),0 0 0 3px rgba(255,51,102,.3)}
.ppx .pn-cell[aria-checked="true"] .pn-price{color:var(--pn-acc-ink)}
.ppx .pn-cell[aria-checked="true"] .pn-dot{border-color:var(--pn-acc);background:var(--pn-acc)}
.ppx .pn-cell[aria-checked="true"] .pn-dot::after{opacity:1;transform:rotate(45deg) scale(1)}

/* ---------- the pick line + button ---------- */
.ppx .pn-pick{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:12px 12px 12px 30px;border-radius:999px;background:#fff;border:1px solid rgba(20,20,20,.1);box-shadow:0 18px 40px -26px rgba(20,20,30,.4)}
.ppx .pn-pick__vals{display:flex;align-items:baseline;gap:16px;min-width:0;font-family:var(--so)}
.ppx .pn-pick__k{font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pn-ink3)}
.ppx .pn-pick__v{font-weight:500;font-size:21px;line-height:1.2;color:var(--pn-ink)}
.ppx .pn-pick__p{font-weight:400;font-size:21px;line-height:1.2;color:var(--pn-ink2);font-variant-numeric:tabular-nums}
.ppx .pn-pick__cta{height:56px;padding:0 30px;font-size:17px}
.ppx .pn-pick__cta svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--pn-ease)}
.ppx .pn-pick__cta:hover svg{transform:translateX(3px)}
.ppx .pn-pick__vals.is-swap .pn-pick__v,.ppx .pn-pick__vals.is-swap .pn-pick__p{animation:ppx-pn-swap .38s var(--pn-ease)}
@keyframes ppx-pn-swap{from{opacity:.15;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- reassurance: the payment window's billing line, with the theme's 3D card ---------- */
.ppx .pn-trust{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;font-family:var(--na);font-size:var(--t-small,14px);line-height:var(--lh-small,20px);color:var(--pn-ink2);text-align:left}
.ppx .pn-trust img{width:40px;height:40px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(15,23,42,.14))}
.ppx .pn-trust b{font-family:var(--so);font-weight:500;color:var(--pn-ink)}
.ppx .pn-trust__more{display:block;margin-top:2px;color:var(--pn-ink3)}

/* ---------- entrance, once: the columns rise in a short stagger (only when JS runs and motion is allowed) ---------- */
.ppx .pricing.pn-anim .pn-col,.ppx .pricing.pn-anim .pn-labels{opacity:0;transform:translateY(16px)}
.ppx .pricing.pn-anim.is-in .pn-col,.ppx .pricing.pn-anim.is-in .pn-labels{opacity:1;transform:none;transition:opacity .7s var(--pn-ease),transform .9s var(--pn-ease)}
.ppx .pricing.pn-anim.is-in .pn-col--regular{transition-delay:.06s}
.ppx .pricing.pn-anim.is-in .pn-col--vip{transition-delay:.14s}
.ppx .pricing.pn-anim.is-in .pn-col--diamond{transition-delay:.22s}

/* ---------- tablet ---------- */
@media (max-width:1068px){
  .ppx .pricing{--pn-rows:84px;--pn-labels:112px;--pn-gap:12px;--pn-pad:16px;--pn-pad-top:30px;--pn-tray-r:34px;--pn-r:22px}
  .ppx .pn-top{padding:26px 20px 22px}
  .ppx .pn-cap{left:18px}
  .ppx .pn-mark{height:62px}
  .ppx .pn-mark img{height:50px}
  .ppx .pn-col--vip .pn-mark img{height:62px}
  .ppx .pn-col--regular .pn-mark img{height:48px}
  .ppx .pn-name{margin-top:14px;font-size:23px}
  .ppx .pn-spot{font-size:14.5px;line-height:21px}
  .ppx .pn-cell{padding:0 16px 0 20px}
  .ppx .pn-cell::before{inset:6px 7px;border-radius:14px}
  .ppx .pn-price{font-size:31px}
  .ppx .pn-dot{width:20px;height:20px}
  .ppx .pn-dot::after{left:5.8px;top:2.6px}
  .ppx .pn-len{padding-left:12px;font-size:16px}
}

/* ---------- small tablet: the long tier lines give way to the short ones ---------- */
@media (max-width:900px) and (min-width:735px){
  .ppx .pn-spot{display:none}
  .ppx .pn-short{display:block;margin-top:6px;font-family:var(--na);font-size:14px;line-height:19px;color:var(--pn-ink2)}
}

/* ---------- phone: the whole grid, the pick and the button fit the first screen ---------- */
@media (max-width:734px){
  .ppx .pricing{--pn-rows:64px;--pn-labels:62px;--pn-gap:6px;--pn-pad:8px;--pn-pad-top:20px;--pn-tray-r:26px;--pn-r:18px}
  .ppx .pn-h__l{display:block}
  .ppx .pn-board,.ppx .pn-pick{margin-inline:calc(12px - (100vw - 100%) / 2)}
  .ppx .pn-board{margin-top:28px}
  .ppx .pn-col--vip{box-shadow:0 0 0 1.5px var(--pn-pink),0 16px 32px -14px rgba(255,51,102,.45)}
  .ppx .pn-top{align-items:center;text-align:center;padding:19px 3px 12px}
  .ppx .pn-cap{left:50%;top:-10px;height:20px;padding:0 8px;font-size:8.5px;letter-spacing:.06em;transform:translateX(-50%)}
  .ppx .pn-mark{height:44px;justify-content:center}
  .ppx .pn-mark img{height:37px}
  .ppx .pn-col--vip .pn-mark img{height:44px}
  .ppx .pn-col--regular .pn-mark img{height:36px}
  .ppx .pn-name{margin-top:8px;font-size:16px;letter-spacing:-.01em}
  .ppx .pn-spot{display:none}
  .ppx .pn-short{display:block;margin-top:3px;font-family:var(--na);font-size:11.5px;line-height:14px;color:var(--pn-ink3);text-wrap:balance}
  .ppx .pn-cell{justify-content:center;padding:0}
  .ppx .pn-price{font-size:20px;letter-spacing:0}
  .ppx .pn-dot{display:none}
  .ppx .pn-cell::before{inset:5px;border-radius:12px}
  .ppx .pn-len{gap:5px;padding:0 0 0 8px;font-size:13px}
  .ppx .pn-bv{height:16px;padding:0 5px;font-size:7.2px;letter-spacing:.03em}
  .ppx .pn-pick{flex-direction:column;align-items:stretch;gap:12px;margin-top:12px;padding:16px;border-radius:22px}
  .ppx .pn-pick__vals{justify-content:space-between;gap:10px}
  .ppx .pn-pick__k{display:none}
  .ppx .pn-pick__v,.ppx .pn-pick__p{font-size:17px}
  .ppx .pn-pick__p{color:var(--pn-ink)}
  .ppx .pn-pick__cta{width:100%;height:52px;font-size:16px}
  .ppx .pn-trust{justify-content:flex-start;align-items:flex-start;margin-top:20px;font-size:13px;line-height:19px}
  .ppx .pn-trust img{width:34px;height:34px}
}

@media (prefers-reduced-motion:reduce){
  .ppx .pricing *{transition:none!important;animation:none!important}
  .ppx .pricing.pn-anim .pn-col,.ppx .pricing.pn-anim .pn-labels{opacity:1;transform:none}
}

/* ==== css/pricing-page.css ==== */
/* PRICING PAGE, direction 2 "The Staircase" (Pricing Page Designs canvas https://claude.ai/artifact/C8e9xkzaJtcz2SSaHwU32v,
   owner 2026-10-01: "we will build this first in html step by step combining different modules, first the header ... we will
   go for option 2 the staircase"). pp- names on the page.css tokens, like the sale page and How to advertise: eight sizes only
   (hero 64, story 56, section 40, card 24, lead 21, eyebrow 19, ui/body 17, small 14, stepping down at 1068 / 734), lockup gaps
   eyebrow 20 / lead 26 / visual 64, white story sections 128 / 96 / 80.
   Motion (js/pricing-page.js), the header being the first screen: the words rise in turn (the About page hero), the picture
   grows in as soon as it has loaded, then each tier's label pops in beside its step and floats; the float stops while the
   header is off screen. Reduced motion: nothing moves. */

.ppx.pp-body{background:#fff;--pp-mid:#FAFAFB}

/* ============ joins without a line (httpdocs/docs/theme/apple-section-transitions-study.md; owner 2026-10-01: "try also to
   implement so we dont have those hard lines") ============
   Where white meets the grey band, the colour moves through the empty padding on both sides of the join: white to #FAFAFB in
   the upper section's bottom padding, #FAFAFB to grey in the lower one's top padding. The two meet on the same colour, so no
   edge exists, and no content ever sits in the fade (192 px at least, even on a phone). Grey or white to dark stays a plain
   edge, as the study says (a fade into #0F0F0F turns muddy). Sections keep margin 0; all the space is padding. */
.ppx.pp-body .ink{color:var(--ink)}

/* ============ 1. header: the copy beside the staircase ============ */
.ppx .pp-hero{padding:var(--pad-story) 0;background:linear-gradient(#fff calc(100% - var(--pad-story)),var(--pp-mid));overflow:hidden}
.ppx .pp-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:". stairs" "copy stairs" "act stairs" ". stairs";column-gap:40px}
.ppx .pp-hero__copy{grid-area:copy;display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-eyebrow)}
.ppx .pp-hero__copy .lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow));max-width:520px}
.ppx .pp-h1{margin:0;font-family:var(--so);font-weight:500;font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ppx .pp-w{display:inline-block}
.ppx .pp-hero__act{grid-area:act;margin-top:32px}
.ppx .pp-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ppx .pp-ctas .btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-note{margin:18px 0 0;font-family:var(--na);font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink3)}

/* the staircase: the render on white (multiply, so its white never covers a label or a button); each label sits just left of
   its object, so the three climb with the steps (spots measured on the render: --x left edge, --y centre line; they clear the
   phone, the laurel and the diamond from the narrowest two-column picture, 589 px at 1200, up) */
.ppx .pp-stairs{grid-area:stairs;position:relative;margin:0}
.ppx .pp-stairs picture,.ppx .pp-stairs picture img{display:block;width:100%;height:auto}
.ppx .pp-stairs picture img{mix-blend-mode:multiply}
.ppx .pp-tags{margin:0;padding:0;list-style:none}
.ppx .pp-tag{position:absolute;z-index:1;left:var(--x);top:var(--y);transform:translateY(-50%)}
.ppx .pp-tag__in{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border-radius:18px;background:#fff;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(20,20,20,.06),0 16px 36px -16px rgba(20,20,30,.38)}
.ppx .pp-tag img{flex:none;width:auto;height:34px}
.ppx .pp-tag__t{display:flex;flex-direction:column}
.ppx .pp-tag b{font-family:var(--so);font-weight:500;font-size:var(--t-ui);line-height:var(--lh-ui);color:var(--ink)}
.ppx .pp-tag__t span{font-family:var(--so);font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink2)}

/* two columns from 1200 px; the narrowest of them (1200 to 1279 px) get slightly smaller labels */
@media (min-width:1200px) and (max-width:1279px){
  .ppx .pp-tag__in{gap:8px;padding:6px 14px 6px 8px;border-radius:16px}
  .ppx .pp-tag img{height:28px}
}

/* below 1200 px (the two columns would crowd the labels and wrap the buttons): the copy, then the staircase (its labels in it
   as on desktop), then the buttons */
@media (max-width:1199px){
  .ppx .pp-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"copy" "stairs" "act"}
  .ppx .pp-stairs{width:100%;max-width:720px;margin:calc(var(--gap-visual) - 47px) auto 0}   /* lead -> the first label = --gap-visual (the label sits 47 px into the picture) */
  .ppx .pp-hero__act{margin-top:24px}
}

/* phones: the labels become three cards under the picture, stepping up like the stairs (Regular lowest) */
@media (max-width:734px){
  .ppx .pp-stairs{margin-top:8px}
  .ppx .pp-tags{display:flex;align-items:flex-start;gap:8px;margin-top:-6px}
  .ppx .pp-tag{position:static;transform:none;flex:1 1 0;min-width:0;margin-top:calc((2 - var(--n)) * 12px)}
  .ppx .pp-tag__in{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:16px;white-space:normal;text-align:center;
    box-shadow:0 0 0 1px rgba(20,20,20,.06),0 12px 28px -14px rgba(20,20,30,.35)}
  .ppx .pp-tag img{height:26px}
  .ppx .pp-tag__t{align-items:center}
  .ppx .pp-tag b{font-size:var(--t-small);line-height:18px}
  .ppx .pp-tag__t span{line-height:18px}
  .ppx .pp-hero__act{margin-top:28px}
  .ppx .pp-ctas .btn,.ppx .pp-ctas .btn-ghost{flex:1 1 100%;height:52px}
}

/* ============ 2. every price: the sale page's "The nine" (css/pricing.css, js/pricing.js, the same markup) ============
   Phones keep the add-advertisement page's table exactly (owner 2026-10-01: "on mobile use the pricing table as in add
   advertisement page"). From 735 px it takes the canvas look the owner picked: a grey band, the head centred, the cards straight
   on the grey (no tray), each tier's line in one flow, the pick a soft row across its column, a plain pick line. Grey bands follow
   the page rhythm: 144 / 120 / 112. */
.ppx.pp-body{--pp-band:144px}
@media (max-width:1068px){.ppx.pp-body{--pp-band:120px}}
@media (max-width:734px){.ppx.pp-body{--pp-band:112px}}
.ppx.pp-body .pricing{padding:var(--pp-band) 0;background:linear-gradient(var(--pp-mid),#F5F5F7 var(--pp-band),#F5F5F7 calc(100% - var(--pp-band)),var(--pp-mid))}
@media (min-width:735px){
  .ppx.pp-body .pn-head{align-items:center;margin:0 auto;text-align:center}
  .ppx.pp-body .pn-lead{max-width:680px;text-wrap:balance}
  .ppx.pp-body .pn-lead .ink{display:inline}
  .ppx.pp-body .pn-board{padding:0;border-radius:0;background:transparent}
  .ppx.pp-body .pn-spot b{display:inline;margin-top:0}
  .ppx.pp-body .pn-cell::before{inset:0;border-radius:0}
  .ppx.pp-body .pn-cell:last-child::before{border-radius:0 0 var(--pn-r) var(--pn-r)}
  .ppx.pp-body .pn-cell[aria-checked="true"]::before{box-shadow:none}
  .ppx.pp-body .pn-cell[aria-checked="true"] .pn-price{color:var(--pn-ink)}
  .ppx.pp-body .pn-pick{margin-top:40px;padding:0 0 0 22px;border:0;border-radius:0;background:transparent;box-shadow:none}
  .ppx.pp-body .pn-pick__v{font-weight:400}
  .ppx.pp-body .pn-pick__p{font-weight:500;color:var(--pn-ink)}
  .ppx.pp-body .pn-trust{margin-top:44px}
}

/* ============ 3. the tiers, one by one (the Staircase canvas's chapters) ============
   Copy beside the Auckland page with the tier's band lit (the Placement section's stills); VIP is mirrored. White, grey, dark:
   the prices above are grey, so Regular opens on white. --acc colours the band line, --tick the checks (the tiers' own colours,
   as in the price table: ink, pink, gold). Below 1069 px: the head, the picture, then the rest. */
.ppx .pp-tier{--acc:var(--ink3);--tick:var(--ink);padding:var(--pad-story) 0;background:#fff;color:var(--ink)}
.ppx .pp-tier--regular{background:linear-gradient(var(--pp-mid),#fff var(--pad-story),#fff calc(100% - var(--pad-story)),var(--pp-mid))}
.ppx .pp-tier--vip{--acc:#d8174c;--tick:#ff3366;padding:var(--pp-band) 0;background:linear-gradient(var(--pp-mid),#F5F5F7 var(--pp-band))}
.ppx .pp-tier--diamond{--acc:#c9a24e;--tick:#c9a24e;background:#0F0F0F;color:#F5F5F7}
.ppx .pp-tier__grid{display:grid;grid-template-columns:420px minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:". pic" "head pic" "rest pic" ". pic";column-gap:72px}
.ppx .pp-tier--vip .pp-tier__grid{grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"pic ." "pic head" "pic rest" "pic ."}
.ppx .pp-tier__head{grid-area:head}
.ppx .pp-tier__rest{grid-area:rest}
.ppx .pp-tier__pic{grid-area:pic;align-self:center;margin:0}
.ppx .pp-tier__mark{display:block;width:auto;height:66px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.22))}
.ppx .pp-tier--vip .pp-tier__mark{height:84px}
.ppx .pp-tier--diamond .pp-tier__mark{height:68px}
.ppx .pp-tier__band{margin:22px 0 0;font-family:var(--so);font-weight:500;font-size:var(--t-eyebrow);line-height:var(--lh-eyebrow);color:var(--acc)}
.ppx .pp-tier__h{margin:var(--gap-eyebrow) 0 0;font-family:var(--so);font-weight:500;font-size:var(--t-story);line-height:var(--lh-story);letter-spacing:-.02em}
.ppx .pp-tier__spot{margin-top:var(--gap-lead)}
.ppx .pp-tier--diamond .lead{color:rgba(245,245,247,.64)}
.ppx .pp-tier--diamond .ink{color:#F5F5F7}
.ppx .pp-gets{display:flex;flex-direction:column;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.ppx .pp-gets li{display:flex;align-items:flex-start;gap:10px;font-family:var(--na);font-size:var(--t-body);line-height:var(--lh-body)}
.ppx .pp-gets svg{flex:none;width:18px;height:18px;margin-top:calc((var(--lh-body) - 18px) / 2);fill:none;stroke:var(--tick);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-lens{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.ppx .pp-len{height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(20,20,20,.18);font-family:var(--so);font-size:var(--t-ui);color:var(--ink);
  transition:background-color .25s,border-color .25s,color .25s}
.ppx .pp-len:hover{border-color:rgba(20,20,20,.42)}
.ppx .pp-len[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.ppx .pp-len:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.ppx .pp-tier--diamond .pp-len{border-color:rgba(245,245,247,.28);color:#F5F5F7}
.ppx .pp-tier--diamond .pp-len:hover{border-color:rgba(245,245,247,.6)}
.ppx .pp-tier--diamond .pp-len[aria-checked="true"]{border-color:#F5F5F7;background:#F5F5F7;color:var(--ink)}
.ppx .pp-tier__price{display:flex;align-items:baseline;gap:12px;margin:28px 0 0;font-family:var(--so)}
.ppx .pp-tier__price [data-pp-price]{font-size:var(--t-story);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ppx .pp-tier__for{font-family:var(--na);font-size:var(--t-ui);line-height:var(--lh-ui);color:var(--ink2)}
.ppx .pp-tier--diamond .pp-tier__for{color:rgba(245,245,247,.64)}
.ppx .pp-tier__price.is-swap > *{animation:ppx-pp-swap .38s cubic-bezier(.22,1,.36,1)}
.ppx .pp-tier__cta{margin-top:30px}
.ppx .pp-tier__cta svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-tier__pic picture,.ppx .pp-tier__pic img{display:block;width:100%;height:auto}
.ppx .pp-tier__pic img{border-radius:26px;box-shadow:0 40px 80px -44px rgba(0,0,0,.5)}
.ppx .pp-tier--diamond .pp-tier__pic img{box-shadow:0 0 0 1px rgba(255,255,255,.07)}

@media (max-width:1068px){
  .ppx .pp-tier__grid,.ppx .pp-tier--vip .pp-tier__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "pic" "rest"}
  .ppx .pp-tier__head{max-width:640px}
  .ppx .pp-tier__pic{margin-top:var(--gap-visual)}
  .ppx .pp-tier__rest{margin-top:8px}
}
@media (max-width:734px){
  .ppx .pp-tier__mark{height:48px}
  .ppx .pp-tier--vip .pp-tier__mark{height:62px}
  .ppx .pp-tier--diamond .pp-tier__mark{height:50px}
  .ppx .pp-tier__band{margin-top:14px}
  .ppx .pp-tier__pic img{border-radius:18px}
  .ppx .pp-gets{margin-top:28px;gap:8px}
  .ppx .pp-lens{margin-top:24px}
  .ppx .pp-len{flex:1 1 0;height:44px;padding:0 10px;font-size:15px}
  .ppx .pp-tier__price{justify-content:center;margin-top:22px}   /* owner 2026-10-01: centred between the full-width lengths and button */
  .ppx .pp-tier__cta{width:100%;height:52px;margin-top:22px}
}

/* ============ 4. paying: three steps, one payment (Secure Payments Section canvas, direction 2) ============
   A grey band of white boxes (the study: boxes take the other tone; no border, no shadow): three step cards, each with its
   Airbnb-style render (owner: no billing facts panel under them). Below 1069 px the steps become rows. */
.ppx .pp-pay{padding:var(--pp-band) 0;background:linear-gradient(#F5F5F7 calc(100% - var(--pp-band)),var(--pp-mid))}
.ppx .pp-pay__head{display:flex;flex-direction:column;align-items:center;gap:var(--gap-eyebrow);max-width:680px;margin:0 auto;text-align:center}
.ppx .pp-pay__head .lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow));text-wrap:balance}
.ppx .pp-pay__h{margin:0;font-family:var(--so);font-weight:500;font-size:var(--t-story);line-height:var(--lh-story);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ppx .pp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:var(--gap-visual) 0 0;padding:0;list-style:none}
.ppx .pp-step{display:flex;flex-direction:column;padding:0 0 36px;border-radius:28px;background:#fff}
.ppx .pp-step__art{display:flex;align-items:center;justify-content:center;height:270px;overflow:hidden}
.ppx .pp-step__art picture{display:contents}
.ppx .pp-step__art img{display:block;height:auto;mix-blend-mode:multiply}
.ppx .pp-step--pick .pp-step__art img{width:min(330px,88%)}
.ppx .pp-step--pay .pp-step__art img{width:240px}
.ppx .pp-step--live .pp-step__art img{width:220px}
.ppx .pp-step__text{padding:0 36px}
.ppx .pp-step__n{margin:0;font-family:var(--so);font-weight:500;font-size:var(--t-small);line-height:var(--lh-small);letter-spacing:.06em;color:var(--ink3)}
.ppx .pp-step__h{margin:10px 0 0;font-family:var(--so);font-weight:500;font-size:var(--t-card);line-height:var(--lh-card);letter-spacing:-.01em;color:var(--ink)}
.ppx .pp-step__p{margin:10px 0 0;font-family:var(--na);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink2)}

/* tablets: each step a row (its picture on the left) */
@media (max-width:1068px){
  .ppx .pp-steps{grid-template-columns:minmax(0,1fr);gap:12px}
  .ppx .pp-step{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:center;padding:16px 32px 16px 8px}
  .ppx .pp-step__art{height:200px}
  .ppx .pp-step--pick .pp-step__art img{width:240px}
  .ppx .pp-step--pay .pp-step__art img{width:180px}
  .ppx .pp-step--live .pp-step__art img{width:170px}
  .ppx .pp-step__text{padding:0}
}
/* phones: smaller rows */
@media (max-width:734px){
  .ppx .pp-pay__head{align-items:flex-start;text-align:left}
  .ppx .pp-step{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:16px 18px 16px 10px;border-radius:22px}
  .ppx .pp-step__art{height:112px}
  .ppx .pp-step--pick .pp-step__art img{width:126px;max-width:none}   /* the render's own side margins keep the three stands inside 112 px */
  .ppx .pp-step--pay .pp-step__art img{width:108px}
  .ppx .pp-step--live .pp-step__art img{width:104px}
  .ppx .pp-step__h{margin-top:6px}
  .ppx .pp-step__p{margin-top:6px}
}

/* ============ 5. superboost: your button to the top (Superboost Pricing Section canvas, option 3) ============
   White, after the grey Paying band (its top padding fades in from #FAFAFB). One grey stage: the dashboard card with the real
   SUPERBOOST button on the left, the Auckland page in a phone on the right, a pink line between them; then the credits window.
   The phone is drawn at --k x its 300 x 620 size: every length inside is a multiple of --k. Cards sit in slots: --c (column) and
   --r (row) set the transform, so moving a card = changing its slot, and the transition animates it. */
.ppx .pp-sb{--sb-ease:cubic-bezier(.22,1,.36,1);--sb-travel:cubic-bezier(.65,0,.35,1);--sb-pop:cubic-bezier(.34,1.56,.64,1);
  padding:var(--pad-story) 0;background:linear-gradient(var(--pp-mid),#fff var(--pad-story))}
.ppx .pp-sb.sb-still *,.ppx .pp-sb.sb-still *::before,.ppx .pp-sb.sb-still *::after{transition:none!important}
.ppx .pp-sb__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-eyebrow);max-width:680px}
.ppx .pp-sb__head .lead{margin-top:calc(var(--gap-lead) - var(--gap-eyebrow));max-width:640px}
.ppx .pp-sb__h{margin:0;font-family:var(--so);font-weight:500;font-size:var(--t-story);line-height:var(--lh-story);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}

.ppx .pp-sb__stage{position:relative;display:grid;grid-template-columns:minmax(320px,440px) 300px;justify-content:center;align-items:center;
  column-gap:clamp(96px,12vw,240px);margin-top:var(--gap-visual);padding:60px 40px 68px;border-radius:40px;background:#F5F5F7}
.ppx .pp-sb__dash{position:relative;z-index:2;min-width:0}
.ppx .pp-sb__vis{position:relative;z-index:2}
.ppx .pp-sb__label{margin:0 0 16px;font-family:var(--so);font-weight:500;font-size:15px;line-height:20px;color:var(--ink3)}
.ppx .pp-sb__vis .pp-sb__label{text-align:center}

/* the dashboard card and its button (the dashboard's own look) */
.ppx .pp-sb__card{padding:22px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 18px 40px -22px rgba(20,20,30,.35)}
.ppx .pp-sb__who{display:flex;align-items:center;gap:12px}
.ppx .pp-sb__who img{flex:none;width:52px;height:52px;border-radius:15px;object-fit:cover;object-position:50% 12%}
.ppx .pp-sb__who b{display:block;font-family:var(--so);font-weight:500;font-size:18px;line-height:22px;color:var(--ink)}
.ppx .pp-sb__who span{display:block;font-family:var(--na);font-size:14px;line-height:19px;color:var(--ink3)}
.ppx .pp-sb__btnwrap{position:relative;margin-top:18px}
.ppx .pp-sb__btn{display:flex;align-items:center;gap:14px;width:100%;height:64px;padding:0 12px 0 20px;border-radius:18px;overflow:hidden;
  color:#fff;font-family:var(--so);font-weight:500;font-size:20px;letter-spacing:.02em;
  background:linear-gradient(100deg,#6B66CD 0%,#7358B6 46%,#8F4DA2 74%,#AB4A90 100%);box-shadow:0 12px 30px rgba(108,102,204,.32);
  transition:transform .14s ease,box-shadow .2s ease}
.ppx .pp-sb__btn svg{flex:none;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-sb__btn:hover{box-shadow:0 14px 34px rgba(108,102,204,.4)}
.ppx .pp-sb__btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.ppx .pp-sb__btn.is-press{transform:scale(.965);box-shadow:0 6px 16px rgba(108,102,204,.3)}
.ppx .pp-sb__cnt{margin-left:auto;display:grid;place-items:center;min-width:72px;height:42px;border-radius:999px;background:rgba(255,255,255,.24);font-variant-numeric:tabular-nums}
.ppx .pp-sb__ptr{position:absolute;left:62%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1.5px rgba(20,20,20,.55),0 6px 16px rgba(0,0,0,.25);opacity:0;transform:translate3d(70px,110px,0);pointer-events:none;
  transition:transform .75s var(--sb-ease),opacity .3s ease}
.ppx .pp-sb__ptr::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,51,102,.9);opacity:0;transform:scale(.4)}
.ppx .pp-sb.is-ptr .pp-sb__ptr{opacity:1;transform:none}
.ppx .pp-sb.is-tap .pp-sb__ptr{background:rgba(255,255,255,.8)}
.ppx .pp-sb.is-tap .pp-sb__ptr::after{animation:ppx-pp-sbtap .5s ease-out}
@keyframes ppx-pp-sbtap{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
.ppx .pp-sb__flash{display:flex;align-items:flex-start;gap:8px;margin:18px 4px 0;font-family:var(--na);font-size:15px;line-height:21px;color:var(--ink);
  opacity:0;transform:translate3d(0,6px,0);transition:opacity .4s ease,transform .5s var(--sb-ease)}
.ppx .pp-sb__ok{flex:none;width:18px;height:18px;margin-top:1px}
.ppx .pp-sb__ok circle{fill:#16A34A}
.ppx .pp-sb__ok path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-sb.is-flash .pp-sb__flash{opacity:1;transform:none}
.ppx .pp-sb__hint{margin:14px 0 0;font-family:var(--na);font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink3)}

/* the line from the button to the phone (drawn by the script from the real positions) */
.ppx .pp-sb__sig{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ppx .pp-sb__sig path{fill:none;stroke:var(--pink);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset .75s var(--sb-travel),opacity .5s ease}
.ppx .pp-sb.is-sig .pp-sb__sig path{stroke-dashoffset:0;opacity:1}
.ppx .pp-sb.is-sig.is-sig-done .pp-sb__sig path{opacity:.28}

/* the phone on the Auckland page: the site's black bar, then "Auckland · VIP area" and the cards two by two */
.ppx .pp-sb__phone{--k:1;position:relative;width:calc(300px * var(--k));height:calc(620px * var(--k));border-radius:calc(48px * var(--k));background:#0b0b0b;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 40px 90px -30px rgba(20,20,30,.45)}
.ppx .pp-sb__screen{position:absolute;inset:calc(10px * var(--k));overflow:hidden;border-radius:calc(38px * var(--k));background:#fff;transform:translateZ(0)}
.ppx .pp-sb__bar{position:absolute;left:0;right:0;top:0;z-index:3;height:calc(44px * var(--k));display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(14px * var(--k));background:#050505}
.ppx .pp-sb__bar svg{width:calc(20px * var(--k));height:calc(20px * var(--k));fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-sb__bar img{width:calc(92px * var(--k));height:auto}
.ppx .pp-sb__lst{position:absolute;left:0;top:calc(44px * var(--k));width:100%;height:calc(1424px * var(--k));
  transform:translate3d(0,calc(-855.6px * var(--k)),0);transition:transform .8s var(--sb-travel)}
.ppx .pp-sb__lst.is-top{transform:translate3d(0,0,0)}
.ppx .pp-sb__title{position:absolute;left:calc(12px * var(--k));top:calc(12px * var(--k));margin:0;font-family:var(--so);font-weight:500;
  font-size:calc(15px * var(--k));line-height:calc(20px * var(--k));color:var(--ink);white-space:nowrap}
.ppx .pp-sb__title span{font-weight:400;color:var(--ink3)}
.ppx .pp-sb__cd{position:absolute;left:0;top:0;width:calc(124px * var(--k));height:calc(177.3px * var(--k));transform-origin:50% 40%;
  transform:translate3d(calc((12px + var(--c) * 132px) * var(--k)),calc((98.3px + var(--r) * 189.3px) * var(--k)),0) scale(var(--sc,1));
  transition:transform .8s var(--sb-travel),opacity .45s ease}
.ppx .pp-sb__cd.is-out{opacity:0}
.ppx .pp-sb__cd.is-nt{transition:none}
.ppx .pp-sb__im{position:absolute;inset:0;z-index:1;overflow:hidden;background:#fff}
.ppx .pp-sb__im img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ppx .pp-sb__cd.is-fly{--sc:1.06;z-index:5}
.ppx .pp-sb__cd.is-fly .pp-sb__im{box-shadow:0 22px 50px rgba(0,0,0,.3),0 0 0 2px var(--pink)}
.ppx .pp-sb__tab{position:absolute;left:0;right:0;bottom:100%;z-index:0;display:flex;align-items:center;justify-content:center;
  height:calc(22.3px * var(--k));border-radius:calc(10.5px * var(--k)) calc(10.5px * var(--k)) 0 0;background:#fff;color:#1c1c1c;
  font-family:var(--so);font-size:calc(7.2px * var(--k));letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 -4px 10px rgba(0,0,0,.05);opacity:0;transform:translate3d(0,100%,0);transition:transform .55s var(--sb-ease),opacity .3s ease}
.ppx .pp-sb__cd.is-tab .pp-sb__tab{opacity:1;transform:none}
.ppx .pp-sb__ago{position:absolute;z-index:2;left:calc(8.3px * var(--k));top:calc(127px * var(--k));height:calc(14.9px * var(--k));display:inline-flex;
  align-items:center;gap:.45em;padding:0 calc(6.8px * var(--k)) 0 calc(5.6px * var(--k));border-radius:999px;background:rgba(34,34,36,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;font-family:var(--so);font-weight:500;font-size:calc(8.2px * var(--k));white-space:nowrap;
  opacity:0;transform:scale(.85);transform-origin:0 50%;transition:opacity .35s ease,transform .45s var(--sb-pop)}
.ppx .pp-sb__ago i{display:block;flex:none;width:calc(3.5px * var(--k));height:calc(3.5px * var(--k));border-radius:50%;background:#34C759}
.ppx .pp-sb__cd.is-ago .pp-sb__ago{opacity:1;transform:none}
.ppx .pp-sb__rk{position:absolute;z-index:3;right:calc(-10.2px * var(--k));top:calc(-12.2px * var(--k));display:grid;place-items:center;box-sizing:border-box;
  min-width:calc(32px * var(--k));height:calc(32px * var(--k));padding:0 calc(7px * var(--k));border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--so);font-weight:500;font-size:calc(13.4px * var(--k));font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.25);transition:background-color .3s ease,transform .45s var(--sb-pop)}
.ppx .pp-sb__cd.is-first .pp-sb__rk{background:var(--pink);transform:translate3d(calc(3.2px * var(--k)),calc(-48.6px * var(--k)),0) scale(1.12)}

/* the credits window: the dashboard's four packs */
.ppx .pp-sb__credits{margin-top:20px;padding:40px 40px 36px;border-radius:40px;background:#F5F5F7}
.ppx .pp-sb__ch{display:flex;align-items:flex-start;justify-content:space-between;gap:32px}
.ppx .pp-sb__h3{margin:0;font-family:var(--so);font-weight:500;font-size:28px;line-height:32px;letter-spacing:-.01em;color:var(--ink)}
.ppx .pp-sb__sub{margin:8px 0 0;font-family:var(--na);font-size:var(--t-ui);line-height:25px;color:var(--ink2)}
.ppx .pp-sb__pill{flex:none;display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 16px;border-radius:14px;background:#fff;
  font-family:var(--so);font-weight:500;font-size:15px;line-height:20px;color:var(--ink)}
.ppx .pp-sb__pill svg{width:18px;height:18px;fill:none;stroke:var(--pink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:32px;padding-top:12px}
.ppx .pp-pack{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:28px 26px 24px;border-radius:24px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(20,20,20,.1);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow .25s ease,transform .2s ease}
.ppx .pp-pack:hover{transform:translate3d(0,-2px,0)}
.ppx .pp-pack:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.ppx .pp-pack[aria-checked="true"]{box-shadow:0 0 0 2px var(--ink),0 18px 40px -22px rgba(20,20,30,.45)}
.ppx .pp-pack__cap{position:absolute;top:-12px;left:24px;display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:var(--pink);
  color:#fff;font-family:var(--so);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ppx .pp-pack__cap--best{background:var(--ink)}
.ppx .pp-pack__ck{position:absolute;top:20px;right:20px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;box-sizing:border-box;
  border-radius:50%;border:1.5px solid rgba(20,20,20,.22);transition:background-color .25s ease,border-color .25s ease}
.ppx .pp-pack__ck svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s ease}
.ppx .pp-pack[aria-checked="true"] .pp-pack__ck{background:var(--ink);border-color:var(--ink)}
.ppx .pp-pack[aria-checked="true"] .pp-pack__ck svg{opacity:1}
.ppx .pp-pack__n{display:flex;align-items:baseline;gap:8px;font-family:var(--na);font-size:17px;color:var(--ink2)}
.ppx .pp-pack__n b{font-family:var(--so);font-weight:500;font-size:56px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ppx .pp-pack__price{display:inline-flex;align-items:flex-start;margin-top:16px;font-family:var(--so);font-weight:400;font-size:30px;line-height:1;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.ppx .pp-pack__price i{font-style:normal;font-size:.5em;line-height:1;margin:.12em .06em 0 0}
.ppx .pp-pack__price small{font-size:.5em;line-height:1;margin-top:.12em}
.ppx .pp-pack__per{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);
  font-family:var(--na);font-size:15px;line-height:22px;color:var(--ink2)}
.ppx .pp-pack__save{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#F5F5F7;font-family:var(--so);font-weight:500;
  font-size:12px;color:var(--ink)}
.ppx .pp-sb__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px}
.ppx .pp-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.ppx .pp-pick__k{font-family:var(--so);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.ppx .pp-pick__v{display:inline-flex;align-items:baseline;gap:12px;font-family:var(--so);font-size:21px;color:var(--ink)}
.ppx .pp-pick__v b{font-weight:500}
.ppx .pp-pick__per{font-family:var(--na);font-size:16px;color:var(--ink2)}
.ppx .pp-pick.is-swap .pp-pick__v{animation:ppx-pp-swap .38s cubic-bezier(.22,1,.36,1)}
.ppx .pp-sb__trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin:14px 0 0;padding:0;list-style:none}
.ppx .pp-sb__trust li{display:inline-flex;align-items:center;gap:8px;font-family:var(--na);font-size:15px;line-height:20px;color:var(--ink)}
.ppx .pp-sb__trust svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-sb__cta svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ppx .pp-sb__note{margin:18px 0 0}

/* narrower: the dashboard card above the phone, no line; two packs a row */
@media (max-width:1068px){
  .ppx .pp-packs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:959px){
  .ppx .pp-sb__stage{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:40px}
  .ppx .pp-sb__dash{width:100%;max-width:440px}
  .ppx .pp-sb__sig{display:none}
}
@media (max-width:860px){
  .ppx .pp-sb__ch{flex-direction:column;gap:16px}
  .ppx .pp-sb__foot{flex-direction:column;align-items:stretch}
  .ppx .pp-sb__cta{align-self:flex-start}
}
/* phones: a smaller phone, the credits on white */
@media (max-width:734px){
  .ppx .pp-sb__stage{padding:22px 16px 26px;border-radius:28px;row-gap:24px}   /* a rounded box inside the margins: no edge-to-edge band, so no hard line */
  .ppx .pp-sb__phone{--k:.74}
  .ppx .pp-sb__label{margin-bottom:10px;font-size:14px}
  .ppx .pp-sb__card{padding:16px}
  .ppx .pp-sb__who img{width:44px;height:44px;border-radius:12px}
  .ppx .pp-sb__who b{font-size:16px}
  .ppx .pp-sb__who span{font-size:13px}
  .ppx .pp-sb__btnwrap{margin-top:14px}
  .ppx .pp-sb__btn{height:56px;gap:10px;padding:0 10px 0 16px;border-radius:16px;font-size:17px}
  .ppx .pp-sb__btn svg{width:19px;height:19px}
  .ppx .pp-sb__cnt{min-width:58px;height:34px}
  .ppx .pp-sb__flash{margin-top:12px;font-size:13px;line-height:18px}
  .ppx .pp-sb__hint{text-align:center;margin-top:10px}
  .ppx .pp-sb__credits{margin-top:48px;padding:0;border-radius:0;background:transparent}
  .ppx .pp-sb__h3{font-size:24px;line-height:28px}
  .ppx .pp-sb__sub{font-size:15px;line-height:22px}
  .ppx .pp-sb__pill{padding:0;background:transparent;font-size:14px}
  .ppx .pp-packs{gap:12px;margin-top:20px}
  .ppx .pp-pack{padding:22px 16px 18px;border-radius:20px}
  .ppx .pp-pack__cap{left:16px}
  .ppx .pp-pack__ck{top:14px;right:14px}
  .ppx .pp-pack__n{font-size:15px}
  .ppx .pp-pack__n b{font-size:40px}
  .ppx .pp-pack__price{margin-top:12px;font-size:24px}
  .ppx .pp-pack__per{margin-top:10px;padding-top:10px;font-size:13px;line-height:20px}
  .ppx .pp-sb__foot{margin-top:22px;gap:18px}
  .ppx .pp-pick__v{font-size:17px}
  .ppx .pp-pick__per{font-size:14px}
  .ppx .pp-sb__trust{flex-direction:column;gap:10px}
  .ppx .pp-sb__trust li{font-size:14px}
  .ppx .pp-sb__cta{align-self:stretch;height:52px}
  .ppx .pp-sb__note{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){.ppx .pp-sb *,.ppx .pp-sb *::before,.ppx .pp-sb *::after{transition:none!important;animation:none!important}}

/* ---------- motion ---------- */
@keyframes ppx-pp-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes ppx-pp-fade{from{opacity:0}to{opacity:1}}
@keyframes ppx-pp-grow{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes ppx-pp-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes ppx-pp-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes ppx-pp-show{to{opacity:1}}
@keyframes ppx-pp-swap{from{opacity:.15;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .ppx .pp-hero .kicker{animation:ppx-pp-fade .8s cubic-bezier(.22,1,.36,1) both}
  .ppx .pp-w{animation:ppx-pp-up .9s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
  .ppx .pp-hero__copy .lead{animation:ppx-pp-up .9s cubic-bezier(.22,1,.36,1) .6s both}
  .ppx .pp-hero__act{animation:ppx-pp-up .9s cubic-bezier(.22,1,.36,1) .8s both}
  /* the picture and the labels wait for the picture (pp-js is set in the head); a failsafe shows them after 3 s regardless */
  .pp-js .ppx .pp-stairs picture,.pp-js .ppx .pp-tag__in{opacity:0;animation:ppx-pp-show .01s 3s forwards}
  .pp-js .ppx .pp-stairs.is-in picture{animation:ppx-pp-grow 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
  .pp-js .ppx .pp-stairs.is-in .pp-tag__in{animation:ppx-pp-pop .6s cubic-bezier(.34,1.56,.64,1) calc(.8s + var(--n) * .18s) both, ppx-pp-bob 5s ease-in-out calc(1.8s + var(--n) * .7s) infinite}
  .pp-js .ppx .pp-stairs.is-off .pp-tag__in{animation-play-state:paused}
  .ppx .pp-tier.pp-arm .pp-tier__head > *,.ppx .pp-tier.pp-arm .pp-tier__rest > *,.ppx .pp-tier.pp-arm .pp-tier__pic{opacity:0;transform:translate3d(0,28px,0)}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__head > *,.ppx .pp-tier.pp-arm.is-in .pp-tier__rest > *,.ppx .pp-tier.pp-arm.is-in .pp-tier__pic{opacity:1;transform:none;
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__pic{transition-delay:.12s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__head > :nth-child(2){transition-delay:.06s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__head > :nth-child(3){transition-delay:.12s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__head > :nth-child(4){transition-delay:.18s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__rest > :nth-child(1){transition-delay:.24s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__rest > :nth-child(2){transition-delay:.3s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__rest > :nth-child(3){transition-delay:.36s}
  .ppx .pp-tier.pp-arm.is-in .pp-tier__rest > :nth-child(4){transition-delay:.42s}
  /* 4. paying: the head, then the three steps rise in once; the pictures float while the section is on screen */
  .ppx .pp-pay.pp-arm .pp-pay__head,.ppx .pp-pay.pp-arm .pp-step{opacity:0;transform:translate3d(0,28px,0)}
  .ppx .pp-pay.pp-arm.is-in .pp-pay__head,.ppx .pp-pay.pp-arm.is-in .pp-step{opacity:1;transform:none;
    transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
  .ppx .pp-pay.pp-arm.is-in .pp-step:nth-child(1){transition-delay:.1s}
  .ppx .pp-pay.pp-arm.is-in .pp-step:nth-child(2){transition-delay:.18s}
  .ppx .pp-pay.pp-arm.is-in .pp-step:nth-child(3){transition-delay:.26s}
  .ppx .pp-pay .pp-step__art img{animation:ppx-pp-bob 5s ease-in-out infinite}
  .ppx .pp-pay .pp-step--pay .pp-step__art img{animation-delay:.8s}
  .ppx .pp-pay .pp-step--live .pp-step__art img{animation-delay:1.6s}
  .ppx .pp-pay.is-off .pp-step__art img{animation-play-state:paused}
}

/* ==== tools/theme/pricing-theme.css ==== */
/* ==== Theme integration (hand-written: tools/theme/pricing-theme.css). tools/build-theme-pricing.mjs appends this after the
   scoped page sheets; plan: httpdocs docs/plans/pricing-page-v2-plan-2026-10-01.md, Approach item 2. The add-profile page's
   blocks (tools/theme/add-profile-theme.css) with .ppx names; nothing on this page is pinned, so it has no phone fit. ==== */

/* 1. Site defence. The site's own sheets load after this one and style bare elements: body (main251-live.css :2-12, the
   Söhne / National 2 stylistic sets ss01 + ss02), img (:17, vertical-align), button (:746, and width 100% at :1979), h1-h5
   (:777), section (:3902) and video (:14). Inside the content these declarations roll exactly those properties back to the
   browser defaults the approved page has (revert), at one class + one element; the page's component rules (two classes)
   still win. tools/build-theme-pricing.mjs stops if a page rule of its own sets these properties on the same bare elements. */
.ppx{font-feature-settings:normal}
.ppx :is(h1,h2,h3,h4,h5){font-weight:revert;font-size:revert;font-family:revert;color:revert;letter-spacing:revert;line-height:revert}
.ppx button{width:revert;vertical-align:revert;text-shadow:revert;border-radius:revert}
.ppx section{width:revert}
.ppx video{display:revert}
.ppx img{vertical-align:revert}

/* 2. The site's fixed chrome. --hdr = the bottom edge of the header bar + category subnav (desktop) or of the phone header
   while it shows; the sheet holds the approved page's values until js/pricing-page-v2.js measures the real ones. "See every
   price" (#prices) and any other #id link land below it. */
.ppx{--hdr:74px}
@media (max-width:900px){.ppx{--hdr:56px}}
.ppx [id]{scroll-margin-top:var(--hdr)}

/* 3. Floating call-to-action bar, 1023 px and below, where the site's bottom ribbon would be (the ribbon is not printed on
   this page). A translucent white strip with one full-width pill (the page's own .btn.btn--lg), on the ribbon's layer
   (z-index 1000) so the site's menu (9999) and overlays still cover it. --ppx-bar = the strip's height incl. the
   home-indicator inset (0 above 1023 px); it sits on body because Chatwoot's holder lives outside <main>. It stays hidden
   over the header section, which has its own Add your profile and See every price buttons, and slides up once the price
   section rises above the bar's line (owner 2026-10-01: "Floating bar, like add advertisement"; js/pricing-page-v2.js adds
   .is-shown). Hidden = moved below the window and visibility:hidden, so it is never painted at load and never focusable. */
body.ppx-page{--ppx-bar:0px}
.ppx .ppx-bar{display:none}
@media (max-width:1023px){
  body.ppx-page{--ppx-bar:calc(80px + env(safe-area-inset-bottom, 0px));padding-bottom:var(--ppx-bar)}
  .ppx .ppx-bar{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 rgba(20,20,20,.08);transform:translateY(calc(100% + 2px));visibility:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s linear .35s}
  .ppx .ppx-bar.is-shown{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s}
  .ppx .ppx-bar .btn{width:100%;max-width:480px}
  /* Chatwoot shows no bubble on phones (header.php); its unread-message preview is lifted above the bar on this page */
  body.ppx-page .woot-widget-holder.has-unread-view{bottom:calc(var(--ppx-bar) + 12px) !important}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){.ppx .ppx-bar,.ppx .ppx-bar.is-shown{transition:none}}