/* feet.panty.com: the portal's look over the source's design (kit step 52_look, generated — edit sites/feet.yaml) */
@font-face { font-family: 'Nunito'; src: url(/pnew/assets/fonts/Nunito-var.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
:root, [data-theme] {
  --r-s: 14px; --r-m: 22px; --r-l: 32px;
  --r-btn: 999px; --r-btn-sm: 999px; --r-chip: 999px; --r-field: 16px;
  --portal-display: 'Nunito', var(--body), system-ui, sans-serif;
  /* owner 11.11.: THE brand colours (electric blue main · second · deep). Media Studio reads them at runtime for its default palette
     (assets/js/studio/studio-core.js MS.paletteFromTokens): change them here and every post follows. */
  --brand-main: #00b3ff; --brand-second: #0062ff; --brand-deep: #0a2a6b;
}
/* headings in the portal's own face; body text stays the source's */
h1, h2, .pc-h1, .pc-h2, .pn-hm-hero__h { font-family: var(--portal-display); letter-spacing: -0.02em; }
:root, [data-theme] { --display: var(--portal-display); --display-tape: var(--portal-display); --display-lc: var(--portal-display); }
h1, h2, h3, h4, h5, h6, .pc-h1, .pc-h2, .pc-h3, .pc-h4 { font-family: var(--portal-display) !important; }
/* the wordmark in the portal's face; the dot after the word as a small heart */
.pc-logo { font: 900 30px/1 var(--portal-display) !important; letter-spacing: -0.045em; text-transform: lowercase; }
body.pc-guest .pc-logo { color: var(--ink); }   /* colour pass 10.11. #71: the page ink (dark: #2C3236 vanished at 1.5:1) */
.pc-logo__dot { width: .42em !important; height: .42em !important; border-radius: 0 !important; background: #0062ff !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C1 8.6 3 5 6.6 5c2.1 0 3.6 1.2 4.4 2.6h2C13.8 6.2 15.3 5 17.4 5 21 5 23 8.6 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C1 8.6 3 5 6.6 5c2.1 0 3.6 1.2 4.4 2.6h2C13.8 6.2 15.3 5 17.4 5 21 5 23 8.6 21.6 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; margin-left: .08em !important; transform: translateY(-.02em); }
/* home hero: the split stage in the portal's light colours, less height, the picture in an arch frame */
.pn-hm-hero.pn-hm-hero--b {
  --hero-night: #e8f4ff; --hero-night-ink: #0a2a6b; --hero-night-ink-2: #3c465d; --hero-night-key: #FFFFFF; --hero-night-key-2: #FFFFFF;
  --ink: #0a2a6b; --ink-2: #3c465d; --sunken: #FFFFFF; --surface-2: #FFFFFF; --t-tint: #FFFFFF;
  background: #e8f4ff !important; background-image: none !important; color: #0a2a6b;
}
.pn-hm-hero.pn-hm-hero--b .pn-hm-hero__h { font-size: clamp(44px, 6vw, 76px); line-height: 1.02; }
.pn-hm-hero.pn-hm-hero--b .pn-hm-hero__wrap { padding-block: 40px; min-height: 0; }
.pn-hm-hero.pn-hm-hero--b .pn-hm-stage { border-radius: 240px 240px 32px 32px; overflow: hidden; background: none !important;
  box-shadow: none !important; height: auto; max-height: 560px; align-self: center; }
.pn-hm-hero.pn-hm-hero--b .pn-hm-stage::before, .pn-hm-hero.pn-hm-hero--b .pn-hm-stage::after { display: none; }
.pn-hm-hero.pn-hm-hero--b img.pn-hm-hero__img { display: block; width: 100%; height: 100%; max-height: 560px;
  object-fit: cover; border-radius: 240px 240px 32px 32px; }
/* the accent words on the light stage in the deep accent (the light mint has no contrast there) */
.pn-hm-hero.pn-hm-hero--b .pn-hm-hero__hl, .pn-hm-hero.pn-hm-hero--b .pn-hm-hero__hl .pn-hm-hero__tx, .pn-hm-hero.pn-hm-hero--b .pn-hm-hero__kick { color: #0050d0; }

/* feet home hero, 1:1 after the owner's mockup (08.11.2026) */
@font-face { font-family: 'Nunito'; src: url(/pnew/assets/fonts/Nunito-var.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
.fp-hero { --fp-ink: var(--ink); --fp-ink-2: var(--ink-2); --fp-mint: #0062ff; --fp-mint-deep: #0062ff; --fp-mint-soft: rgb(0 98 255 / .08);
  position: relative; overflow: hidden; isolation: isolate; background: #FFFFFF; color: var(--fp-ink); font-family: 'Nunito', var(--body), sans-serif; }
.fp-hero__art { position: absolute; inset: 0; z-index: -1; }
.fp-hero__disc { position: absolute; width: 74vw; max-width: 1100px; aspect-ratio: 1; left: 44%; top: 14%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgb(0 179 255 / .30), rgb(0 179 255 / .16) 55%, rgb(0 179 255 / 0) 72%); }
.fp-hero__img { position: absolute; right: 0; top: 0; height: 100%; width: 66%; object-fit: cover; object-position: 62% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 18%, #000 38%);
          mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / .55) 18%, #000 38%); }
.fp-hero__doodle { position: absolute; right: 5.5%; top: 34%; width: 104px; color: #00b3ff; transform: rotate(14deg); opacity: .9; }
.fp-hero__doodle .fp-heart { width: 100%; height: auto; }
.fp-hero__wrap { position: relative; min-height: min(720px, 86vh); display: flex; align-items: center; padding-block: 72px 56px; }
.fp-hero__copy { max-width: 600px; }
.fp-hero__tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 22px 10px 18px; border-radius: 999px;
  background: var(--fp-mint-soft); font: 700 16px/1.2 'Nunito', sans-serif; color: #0050d0; }
.fp-hero__tag .fp-ico { color: #0062ff; }
.fp-hero__h { margin: 30px 0 0; font: 900 clamp(46px, 5.6vw, 82px)/1.04 'Nunito', sans-serif; letter-spacing: -.02em; color: var(--fp-ink); }
.fp-hero__h span { display: block; }
.fp-hero__h em { font-style: normal; color: var(--fp-mint); }
.fp-hero__h .fp-heart { display: inline-block; width: .7em; height: .7em; margin-left: .18em; vertical-align: -.02em; color: var(--fp-mint); transform: rotate(-8deg); }
.fp-hero__lede { margin: 28px 0 0; font: 500 clamp(19px, 1.7vw, 23px)/1.42 'Nunito', sans-serif; color: var(--fp-ink-2); }
.fp-hero__lede span { display: block; }
.fp-hero__keys { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 40px; }
.fp-key { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 30px; border-radius: 999px;
  font: 800 19px/1 'Nunito', sans-serif; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.fp-key--sell { background: #0062ff; color: #FFFFFF; box-shadow: 0 12px 28px rgb(0 98 255 / .28); }   /* colour pass 10.11. #89 #90: the key rule, #0062ff + white */
.fp-key--sell:hover { background: #0050d0; }
.fp-key--find { background: #FFFFFF; color: var(--fp-ink); border: 0; box-shadow: inset 0 0 0 2px rgb(0 98 255 / .16); }   /* #91: no grey, no edge */
.fp-key--find:hover { background: rgb(0 98 255 / .06); }
.fp-key:hover { transform: translateY(-1px); }
.fp-key:focus-visible { outline: 3px solid #0050d0; outline-offset: 3px; }
.fp-hero__facts { display: flex; margin: 54px 0 0; padding: 0; list-style: none; }
.fp-hero__facts li { flex: 1 1 0; display: flex; justify-content: center; padding: 0 18px; border-left: 1px solid rgb(14 26 51 / .12); }
.fp-hero__facts li:first-child { border-left: 0; padding-left: 0; }
.fp-hero__facts a, .fp-hero__facts li > span { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  color: var(--fp-ink-2); text-decoration: none; font: 600 16px/1.25 'Nunito', sans-serif; }
.fp-hero__facts .fp-ico { color: var(--fp-mint-deep); }
@media (max-width: 760px) {
  .fp-hero__img { width: 100%; height: 56%; object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
  .fp-hero__disc { width: 120vw; left: -10vw; top: 4%; }
  .fp-hero__doodle { width: 64px; right: 6%; top: 6%; }
  .fp-hero__wrap { min-height: 0; padding-block: calc(56vh - 40px) 40px; align-items: flex-end; }
  .fp-hero__h { margin-top: 20px; }
  .fp-hero__keys { flex-direction: column; gap: 12px; }
  .fp-key { justify-content: center; }
  .fp-hero__facts { flex-wrap: wrap; row-gap: 22px; margin-top: 36px; }
  .fp-hero__facts li { flex: 1 1 50%; border-left: 0; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .fp-key { transition: none; } }
/* the source's guest pages set every h1 / em / list with very specific selectors; inside the feet hero ours win */
.fp-hero .fp-hero__h { font: 900 clamp(46px, 5.6vw, 82px)/1.04 'Nunito', sans-serif !important; letter-spacing: -.02em !important;
  color: var(--fp-ink) !important; margin: 30px 0 0 !important; text-transform: none !important; }
.fp-hero .fp-hero__h em { color: var(--fp-mint) !important; }
.fp-hero .fp-hero__h .fp-heart { color: var(--fp-mint) !important; }
.fp-hero .fp-hero__facts { margin: 54px 0 0 !important; }
.fp-hero .fp-hero__tag { margin: 0 !important; }
.fp-hero .fp-hero__lede { margin: 28px 0 0 !important; }
.fp-hero .fp-hero__disc { background: radial-gradient(circle at 50% 50%, rgb(0 179 255 / .22), rgb(0 179 255 / .10) 55%, rgb(0 179 255 / 0) 71%); }
@media (max-width: 760px) {
  .fp-hero .fp-hero__h { margin: 18px 0 0 !important; }
  .fp-hero .fp-hero__facts { margin: 34px 0 0 !important; }
}
.pn-hm-head__p:empty { display: none; }   /* a heading line the portal left out */

/* owner 08.11.: an empty hand note (feet sets member.hand to nothing) takes no space */
.pc-hand:empty { display: none; }

/* ==== colour pass 08.11. ===================================================================================
   The source paints guest pages from panty's tokens: the duck-egg grounds (#e7eaf2 / #d5dbe9 / #c1cadd), the warm
   paper (#FFFDF8 / #FBF5EC), the anthracite ink (#0b1020 / #0a0f1d / #121a2b), the teal greys (#495060 / #596072 /
   #686f7f), a near-miss mint (#00b3ff / #0094e0 / #a6e4ff / #0a4fb5) and panty's pink in glows, photo grading and
   shadows (rgb 255 157 178, 255 211 221, 244 132 157, #D9A99C). Here every token is pointed at the feet palette.
   Light theme only (guests are always light); the dark member area keeps its own blocks.
   ink #2C3236 · stage ink #0a2a6b · ink-2 #494e5a · mint #00b3ff · deep mint #0062ff · accent text #0050d0
   mint soft #e3f4ff · stage bg #e8f4ff · page #FFFFFF · white
   10.11. (colour pass guest): the green-black scrims (18 36 29), the mint glows (79 191 154), the mint whites and the
   anthracite shadows (44 50 54) of this block in the blue-black / electric blue; guest pages get their own full set below                                                   */
html[data-theme="light"] {
  /* primitives (the mockup :root block) */
  /* the ladder: ground = the stage mint #e8f4ff, panel = white, well = deep-mint veil (one step down on any ground) */
  --duck: #e8f4ff; --duck-2: rgb(0 179 255 / .25); --duck-3: rgb(0 179 255 / .4); --duck-egg: rgb(0 179 255 / .25);
  --pink: #00b3ff; --pink-press: #0062ff; --pink-soft: #e3f4ff;
  --pink-ink: #0050d0; --pink-text: #0050d0; --pink-glyph: #0050d0; --lp-num-ink: #0050d0; --obj-alarm: #0050d0;
  --anthracite: #2C3236; --card-dk: #2C3236;
  --cream: #FFFFFF; --paper: #FFFFFF; --obj-paper: #FFFFFF; --obj-cream: #FFFFFF; --sticker-cream: #FFFFFF;
  --on-dark: #e3f4ff; --muted-dk: rgb(232 244 255 / .78); --muted-lt: #494e5a;
  --obj-ink: #2C3236; --obj-ink-2: #494e5a; --obj-ink-3: #2C3236; --obj-muted: #e3f4ff; --obj-muted-2: #494e5a;
  --obj-fill: rgb(14 26 51 / .1); --obj-line: rgb(14 26 51 / .28); --obj-line-2: rgb(14 26 51 / .35);
  --live: #0062ff; --ph-a: #e3f4ff; --ph-b: #e8f4ff; --ph-ink: #494e5a; --ph-arch: #00b3ff;
  --dash: rgb(14 26 51 / .28); --dash-2: rgb(14 26 51 / .35); --cut-band: rgb(14 26 51 / .35);
  --stamp-fill: rgb(232 244 255 / .55); --mt-light: rgb(232 244 255 / .85); --mt-dark: rgb(14 26 51 / .85);
  --tape: rgb(232 244 255 / .85);
  --rim-pink: drop-shadow(0 0 1px #00b3ff) drop-shadow(0 20px 40px rgb(14 26 51 / .3));
  --fig-shadow: drop-shadow(0 24px 40px rgb(14 26 51 / .18)); --sh-cut: var(--fig-shadow); --sh-tag: var(--fig-shadow);
  --btn-edge-ink: #0a2a6b;
  --peg: #00b3ff; --peg-2: #0062ff; --rope: #494e5a; --star: #0062ff; --ring-story: #00b3ff; --hand-ink: #0062ff;

  /* roles (the light theme block) */
  --accent: #0062ff; --accent-press: #0052d6; --accent-soft: #e3f4ff; --accent-text: #0050d0;
  --on-accent: #ffffff; --on-blush: #0a2a6b; --blush: #00b3ff; --star-edge: #0050d0;
  --focus-ring: #0050d0;
  --canvas: rgb(0 179 255 / .25); --bg: #e8f4ff; --surface: #FFFFFF; --sunken: rgb(0 179 255 / .25); --app-ground: #e8f4ff;
  --field: #FFFFFF; --field-in: #FFFFFF; --bubble-in: #FFFFFF; --surface-3: rgb(0 179 255 / .4);
  --ink: #2C3236; --ink-2: #494e5a; --ink-3: #494e5a; --glyph-off: #494e5a; --rule-ink: #2C3236;
  --chrome: #0a2a6b; --chrome-2: #2C3236; --prem-bg: #2C3236;
  --online: #0a7f55; --success: #0a7f55; --scard-online: #0a7f55; --scard-online-halo: 0 0 0 3px rgb(10 127 85 / .25);
  --btn-ink: #2C3236; --on-btn-ink: #FFFFFF; --btn-ink-edge: #0a2a6b;
  --dk-ink-2: #494e5a; --av-ink: #2C3236; --av-ink-light: #e3f4ff;
  --av-g0: #e3f4ff; --av-g1: #e8f4ff; --av-g2: #e3f4ff; --av-g3: #e8f4ff; --av-g4: #e3f4ff; --av-g5: #e8f4ff; --av-g6: #e3f4ff; --av-g7: #2C3236;
  --scrim: rgb(6 14 34 / .45); --glass: rgb(6 14 34 / .36); --glass-strong: rgb(6 14 34 / .6);
  --chip-glass: rgb(6 14 34 / .42); --scard-glass: rgb(6 14 34 / .32); --scard-glass-hover: rgb(6 14 34 / .52);
  --scard-ink: #FFFFFF; --scard-ink-2: rgb(255 255 255 / .82); --scard-ink-3: rgb(255 255 255 / .6);
  --scard-tshadow: 0 1px 2px rgb(6 14 34 / .4);
  --card-cap-scrim: linear-gradient(180deg, transparent 0%, rgb(6 14 34 / .22) 60%, rgb(6 14 34 / .3) 100%);
  --card-cap-scrim-strong: linear-gradient(180deg, transparent 0%, rgb(6 14 34 / .5) 45%, rgb(6 14 34 / .78) 100%);
  --card-overlay: linear-gradient(to bottom, transparent 35%, rgb(6 14 34 / .12) 55%, rgb(6 14 34 / .78) 100%);
  --card-rim: none;
  /* shadows in the feet ink, softer */
  --sh-float: 0 24px 64px rgb(14 26 51 / .16); --sh-sheet: 0 -16px 48px rgb(14 26 51 / .16); --shadow-e1: 0 24px 64px rgb(14 26 51 / .16);
  --sh-frame: 0 30px 80px rgb(14 26 51 / .16); --sh-floating: 0 18px 48px rgb(14 26 51 / .14);
  --sh-card: 0 8px 24px rgb(14 26 51 / .08); --sh-card-hover: 0 14px 36px rgb(14 26 51 / .12);
  --sh-band: 0 6px 16px rgb(14 26 51 / .1); --sh-lift: 0 10px 24px rgb(14 26 51 / .1); --sh-note: 0 10px 24px rgb(14 26 51 / .1);
  --sh-pola: 0 10px 24px rgb(14 26 51 / .1); --sh-print: 0 20px 40px rgb(14 26 51 / .1); --sh-receipt: 0 20px 40px rgb(14 26 51 / .1);
  --sh-sticker: 0 6px 16px rgb(14 26 51 / .12); --sh-tape: 0 1px 3px rgb(14 26 51 / .14); --sh-tape-hl: 0 10px 24px rgb(14 26 51 / .1);
  --sh-hand: 0 2px 10px rgb(14 26 51 / .2); --sh-knob: 0 2px 6px rgb(14 26 51 / .2); --sh-label: 0 18px 30px rgb(14 26 51 / .25);
  --lp-card-lift: 0 22px 44px -22px rgb(14 26 51 / .25); --lp-step-sh: 0 12px 32px -12px rgb(14 26 51 / .2);
  --sh-pink: 0 6px 18px rgb(0 98 255 / .28); --sh-pink-hover: 0 8px 22px rgb(0 98 255 / .32);
  /* panty's pink glows and washes, as faint mint */
  --art-glow: radial-gradient(closest-side, rgb(0 179 255 / .2), rgb(0 179 255 / .06) 55%, rgb(0 179 255 / 0));
  --hero-blush: rgb(0 179 255 / .22); --alt-spot: rgb(0 179 255 / .36); --alt-spot-2: rgb(0 179 255 / .2);
  --do-glow: none; --lp-arch-glow: 0 40px 90px -30px rgb(0 98 255 / .4);
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(0 179 255 / .22), transparent 72%), #FFFFFF;
  --lp-real-bg: radial-gradient(34% 40% at 96% 46%, rgb(0 179 255 / .16), transparent 72%), #FFFFFF;
  --lp-real-bg-l: radial-gradient(34% 40% at 4% 50%, rgb(0 179 255 / .16), transparent 72%), #FFFFFF;
  --lp-real2-bg: #e8f4ff; --lp-guides-bg: #e8f4ff; --lp-hero-end: #e8f4ff;
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(0 179 255 / .22), transparent 72%), #e8f4ff;
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(0 179 255 / .18), transparent 72%), #FFFFFF;
  --lp-lace: #FFFFFF;
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(0 179 255 / .2), transparent 72%), #FFFFFF;
  --lp-row-hover: linear-gradient(90deg, rgb(0 179 255 / .25), rgb(0 179 255 / 0) 80%);
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(0 179 255 / .16), transparent 72%), #0a2a6b;
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(0 179 255 / .12), transparent 70%), #0a2a6b;
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(0 179 255 / .16), transparent 70%), #0a2a6b;
  --lp-box-cr: #FFFFFF;
  --lp-sell-bg: linear-gradient(180deg, #4dcaff 0%, #00b3ff 100%);
  --lp-door-sell: linear-gradient(180deg, #4dcaff 0%, #00b3ff 100%);
  --lp-arch: linear-gradient(165deg, #4dcaff 0%, #00b3ff 55%, #0062ff 100%);
  --lp-tape: #00b3ff; --lp-marker: #00b3ff; --lp-chip-ink: #2C3236; --lp-fav-bg: rgb(255 255 255 / .8);
  --lp-host-arch: linear-gradient(180deg, #e3f4ff 0%, rgb(232 244 255 / .35) 100%);
  --btn-pink-grad: linear-gradient(180deg, #4dcaff 0%, #00b3ff 45%, #0062ff 100%);
  --do-ladder: linear-gradient(#e3f4ff, #00b3ff, #0062ff);
  --app-head-bg: #FFFFFF; --bg-veil: rgb(232 244 255 / .9); --do-top-veil: rgb(232 244 255 / .92);
  --ph-media: #e3f4ff; --ph-media-2: #e8f4ff; --ph-text: #494e5a; --ph-landing: none;
  /* the photo grading: panty's pink colour pull and warm vignette out, a neutral one in */
  --photo-tint: transparent;
  --photo-shade: radial-gradient(125% 100% at 50% 40%, #FFFFFF 40%, #dbe9ff 100%);
  --photo-foot: linear-gradient(180deg, #FFFFFF 58%, #dbe9ff 100%);
  /* Premium label: no bronze, the ink label with the mint mark */
  --prem-metal: linear-gradient(135deg, #4dcaff 0%, #e3f4ff 45%, #00b3ff 100%); --prem-metal-ink: #0a2a6b;
  --prem-metal-dk: #0a2a6b; --prem-metal-dk-ink: #e3f4ff;
  --prem-metal-bevel: inset 0 1px 0 rgb(255 255 255 / .6); --prem-metal-ring: inset 0 0 0 1px #00b3ff;
  --prem-sheen: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .6) 50%, transparent 62%);
}
/* the body-level ladder (.pc-root sets these as literals) */
html[data-theme="light"] body.pc-root:not(.pn-adm) {
  --t-band: #FFFFFF; --t-over: #FFFFFF; --t-over-2: rgb(0 179 255 / .25); --t-over-3: rgb(0 179 255 / .4);
  --sunken: rgb(0 179 255 / .25); --field-in: #FFFFFF; --ink-3: #494e5a;
  --t-field-edge: #494e5a; --t-field-edge-over: #2C3236; --t-hair: rgb(14 26 51 / .1);
  --t-card-edge: transparent; --t-card-edge-hover: transparent;   /* no card edges inside: separation by surfaces */
  --sh-float: 0 24px 64px rgb(14 26 51 / .16); --sh-sheet: 0 -16px 48px rgb(14 26 51 / .16);
}
/* the light chrome (header, footer, bars): white bar, mint wells, feet ink */
html[data-theme="light"] body.pc-root:not(.pn-adm) :is(.pc-header,.pn-joinnav,.pn-tabbar,.pc-tabbar,.pc-footer,.pn-gfooter,.pn-cp-bar,.pn-dtbar,.pn-lbsticky) {
  --lc-bar: #FFFFFF; --lc-well: #e3f4ff; --lc-well-hover: rgb(0 179 255 / .4); --lc-ink: #2C3236; --lc-ink-2: #494e5a;
}

/* device mockups (home, landings): light feet frames instead of panty's black bezels and dark app rail */
.pk-dev--laptop .pk-dev__screen, .pk-dev--phone .pk-dev__screen {
  border-color: #FFFFFF; background: #FFFFFF;
  box-shadow: 0 24px 60px rgb(14 26 51 / .14), 0 2px 8px rgb(14 26 51 / .06);
}
.pk-dev--laptop .pk-dev__screen { border-radius: var(--r-l) var(--r-l) var(--r-s) var(--r-s); }
.pk-dev--phone .pk-dev__screen { border-radius: var(--r-l); }
.pk-dev--phone .pk-dev__screen::before { background: #0e1a33; }
.pk-dev__base { background: #e3f4ff; box-shadow: 0 10px 24px rgb(14 26 51 / .1); }
.pk-dev__base::after { background: #00b3ff; opacity: .45; }
.pk-ui-rail { background: #e3f4ff; }
.pk-ui-rail > span { color: #4a5878; }
.pk-ui-rail > span.is-on { background: #0062ff; color: #FFFFFF; }
.pk-ui-rail em { background: #0062ff; color: #FFFFFF; }
/* the drawn wordmark in the laptop says «panty» in the template (templates/partials, .pk-ui-logo): the feet word instead */
.pk-ui-logo { font-size: 0 !important; color: #0e1a33; }
.pk-ui-logo::before { content: "feetpics"; font: 900 15px/1 var(--portal-display); letter-spacing: -.03em; color: #0e1a33; }
.pk-ui-logo i { background: #0062ff; }
.pk-ui-bar { border-bottom: 0; background: #FFFFFF; }
/* the content-hero phone on the guides, trust and buy pages (.pk-chero__body is a dark island, data-theme="dark"):
   the same light frame, ink notch, no mint ring */
html[data-theme="light"] .pk-site .pk-chero__body { background: #FFFFFF; box-shadow: 0 24px 60px rgb(14 26 51 / .14), 0 2px 8px rgb(14 26 51 / .06); }
html[data-theme="light"] .pk-site .pk-chero__body::after { background: #0e1a33; }
html[data-theme="light"] .pk-site .pk-chero__body video { background: #e3f4ff; }
/* the join stage: the veil under the claim in the stage ink, not panty's anthracite */
html[data-theme="light"] .pk-site .pkj-x__stage::after { background: linear-gradient(180deg, transparent 30%, rgb(6 14 34 / .72)); }
/* the live-feed variant of that phone (lib/chero.php, .pk-chfeed): light feed UI, the feet word instead of «panty» */
html[data-theme="light"] .pk-site .pk-chero__body { --dk-card: #FFFFFF; --dk-bg: #e3f4ff; --on-dark: #2C3236; --muted-dk: #494e5a;
  --accent: #0062ff; --on-accent: #ffffff; --accent-soft: #e3f4ff; --glass: rgb(6 14 34 / .62); }
html[data-theme="light"] .pk-site .pk-chero__snd { color: #FFFFFF; }
html[data-theme="light"] .pk-site .pk-chfeed__top b { font-size: 0; }
html[data-theme="light"] .pk-site .pk-chfeed__top b::before { content: "feetpics"; font: 900 17px/1 var(--portal-display); letter-spacing: -.03em; color: #0e1a33; }
/* ==== end colour pass 08.11. ==== */

/* ==== colour pass 10.11. guest (electric blue) ==========================================================
   Owner 10.11. («Farbexperte»): the guest pages (body .pc-guest / .pn-joinbody / .fp-cp-body) in the electric blue look,
   light AND dark. Findings: docs colour audit color-guest.md (numbers in brackets). The tokens are set twice — on <html>
   (via :has, so the tokens the source derives from them on :root recompute) and on <body> (the source sets its ladders
   there) — with !important so the very specific plastik blocks cannot put the neutral greys / panty pink back.
   Light: ink #0e1a33 · #4a5878 · #5d6b88, ground #e8f4ff, panels white, wells rgb(0 98 255 / .08), key #0062ff + white.
   Dark: #0b1020 · chrome #080c18 · cards #121a2b · wells #172238 · hover #1e2b45, ink #eaf0fa · #9fb0c8, key #00b3ff + #061024. */
html[data-theme="light"]:has(> body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm)),
html[data-theme="light"] > body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm) {
  --ink: #0e1a33 !important; --ink-2: #4a5878 !important; --ink-3: #5d6b88 !important; --glyph-off: #5d6b88 !important;
  --muted-lt: #4a5878 !important; --anthracite: #0e1a33 !important; --card-dk: #0e1a33 !important; --obj-ink: #0e1a33 !important;
  --obj-ink-2: #4a5878 !important; --obj-ink-3: #0e1a33 !important; --obj-muted: #4a5878 !important; --obj-muted-2: #4a5878 !important;
  --dk-ink: #0e1a33 !important; --dk-ink-2: #4a5878 !important; --on-sticker: #0e1a33 !important; --av-ink: #0e1a33 !important;
  --lp-chip-ink: #0e1a33 !important; --ph-ink: #4a5878 !important; --ph-text: #4a5878 !important; --rope: #4a5878 !important;
  --rule-ink: rgb(14 26 51 / .12) !important; --oxblood: rgb(14 26 51 / .12) !important; --t-hair: rgb(14 26 51 / .10) !important;
  --chrome-2: #0a2a6b !important; --prem-bg: #0a2a6b !important; --on-dark: #eaf0fa !important; --muted-dk: rgb(234 240 250 / .78) !important;
  --on-chrome-2: rgb(234 240 250 / .78) !important; --accent: #0062ff !important; --accent-press: #0050d0 !important;
  --accent-text: #0050d0 !important; --focus-ring: #0050d0 !important; --on-accent: #ffffff !important;
  --accent-soft: rgb(0 98 255 / .10) !important; --pink-soft: rgb(0 98 255 / .10) !important; --success: #0a7f55 !important;
  --on-success: #ffffff !important; --online: #0a7f55 !important; --scard-online: #0a7f55 !important; --live: #0a7f55 !important;
  --scard-online-halo: 0 0 0 3px rgb(0 98 255 / .25) !important; --t-sel: #0062ff !important; --on-t-sel: #ffffff !important;
  --chip-sel: #0062ff !important; --on-chip-sel: #ffffff !important; --seg-on: #0062ff !important; --on-seg-on: #ffffff !important;
  --check-on: #0062ff !important; --on-check-on: #ffffff !important; --btn-ink: rgb(0 98 255 / .10) !important; --on-btn-ink: #0050d0 !important;
  --btn-ink-hover: rgb(0 98 255 / .16) !important; --btn-ink-edge: transparent !important; --btn-edge-ink: transparent !important;
  --btn-line-bg: rgb(0 98 255 / .10) !important; --btn-line-edge: transparent !important; --btn-ink-hover-fx: none !important;
  --sunken: rgb(0 98 255 / .08) !important; --duck-2: rgb(0 98 255 / .08) !important; --duck-egg: rgb(0 98 255 / .08) !important;
  --duck-3: rgb(0 98 255 / .14) !important; --surface-2: rgb(0 98 255 / .08) !important; --surface-3: rgb(0 98 255 / .14) !important;
  --t-tint: rgb(0 98 255 / .08) !important; --t-tint-2: rgb(0 98 255 / .14) !important; --t-over-2: rgb(0 98 255 / .08) !important;
  --t-over-3: rgb(0 98 255 / .14) !important; --lp-chip-bg: rgb(0 98 255 / .08) !important; --chrome-well: rgb(0 98 255 / .08) !important;
  --chrome-well-hover: rgb(0 98 255 / .14) !important; --canvas: #e8f4ff !important; --field: #f0f6ff !important; --field-in: #f0f6ff !important;
  --t-field-edge: transparent !important; --t-field-edge-over: transparent !important; --stamp-fill: rgb(232 244 255 / .55) !important;
  --mt-light: rgb(232 244 255 / .85) !important; --tape: rgb(232 244 255 / .85) !important; --mt-dark: rgb(14 26 51 / .85) !important;
  --bg-veil: rgb(232 244 255 / .9) !important; --do-top-veil: rgb(232 244 255 / .92) !important; --app-head-bg: #ffffff !important;
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(0 179 255 / .18), transparent 72%), #ffffff !important;
  --lp-real-bg: radial-gradient(34% 40% at 96% 46%, rgb(0 179 255 / .14), transparent 72%), #ffffff !important;
  --lp-real-bg-l: radial-gradient(34% 40% at 4% 50%, rgb(0 179 255 / .14), transparent 72%), #ffffff !important;
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(0 179 255 / .16), transparent 72%), #ffffff !important;
  --lp-host-arch: linear-gradient(180deg, #e3f4ff 0%, rgb(232 244 255 / .35) 100%) !important; --scrim: rgb(6 14 34 / .45) !important;
  --glass: rgb(6 14 34 / .40) !important; --glass-strong: rgb(6 14 34 / .6) !important; --chip-glass: rgb(6 14 34 / .42) !important;
  --scard-glass: rgb(6 14 34 / .36) !important; --scard-glass-hover: rgb(6 14 34 / .55) !important;
  --scard-tshadow: 0 1px 2px rgb(6 14 34 / .45) !important;
  --card-cap-scrim: linear-gradient(180deg, transparent 0%, rgb(6 14 34 / .22) 60%, rgb(6 14 34 / .32) 100%) !important;
  --card-cap-scrim-strong: linear-gradient(180deg, transparent 0%, rgb(6 14 34 / .5) 45%, rgb(6 14 34 / .78) 100%) !important;
  --card-overlay: linear-gradient(to bottom, transparent 35%, rgb(6 14 34 / .12) 55%, rgb(6 14 34 / .78) 100%) !important;
  --rim-pink: drop-shadow(0 0 1px #00b3ff) drop-shadow(0 20px 40px rgb(14 26 51 / .26)) !important;
  --fig-shadow: drop-shadow(0 24px 40px rgb(14 26 51 / .16)) !important; --sh-cut: drop-shadow(0 24px 40px rgb(14 26 51 / .16)) !important;
  --sh-tag: drop-shadow(0 24px 40px rgb(14 26 51 / .16)) !important; --sh-float: 0 24px 64px rgb(14 26 51 / .14) !important;
  --sh-sheet: 0 -16px 48px rgb(14 26 51 / .14) !important; --shadow-e1: 0 24px 64px rgb(14 26 51 / .14) !important;
  --sh-frame: 0 30px 80px rgb(14 26 51 / .14) !important; --sh-floating: 0 18px 48px rgb(14 26 51 / .12) !important;
  --sh-card: 0 8px 24px rgb(14 26 51 / .07) !important; --sh-card-hover: 0 14px 36px rgb(14 26 51 / .11) !important;
  --sh-band: 0 6px 16px rgb(14 26 51 / .09) !important; --sh-lift: 0 10px 24px rgb(14 26 51 / .09) !important;
  --sh-note: 0 10px 24px rgb(14 26 51 / .09) !important; --sh-pola: 0 10px 24px rgb(14 26 51 / .09) !important;
  --sh-print: 0 20px 40px rgb(14 26 51 / .09) !important; --sh-receipt: 0 20px 40px rgb(14 26 51 / .09) !important;
  --sh-sticker: 0 6px 16px rgb(14 26 51 / .11) !important; --sh-tape: 0 1px 3px rgb(14 26 51 / .13) !important;
  --sh-tape-hl: 0 10px 24px rgb(14 26 51 / .09) !important; --sh-hand: 0 2px 10px rgb(14 26 51 / .18) !important;
  --sh-knob: 0 2px 6px rgb(14 26 51 / .18) !important; --sh-label: 0 18px 30px rgb(14 26 51 / .22) !important;
  --lp-card-lift: 0 22px 44px -22px rgb(14 26 51 / .22) !important; --lp-step-sh: 0 12px 32px -12px rgb(14 26 51 / .18) !important;
  --sh-pink: 0 6px 18px rgb(0 98 255 / .28) !important; --sh-pink-hover: 0 8px 22px rgb(0 98 255 / .34) !important;
  --lp-arch-glow: 0 40px 90px -30px rgb(0 179 255 / .35) !important; --obj-fill: rgb(14 26 51 / .08) !important;
  --obj-line: rgb(14 26 51 / .26) !important; --obj-line-2: rgb(14 26 51 / .32) !important; --dash: rgb(14 26 51 / .26) !important;
  --dash-2: rgb(14 26 51 / .32) !important; --cut-band: rgb(14 26 51 / .32) !important;
  --photo-shade: radial-gradient(125% 100% at 50% 40%, #ffffff 40%, #dbe9ff 100%) !important;
  --photo-foot: linear-gradient(180deg, #ffffff 58%, #dbe9ff 100%) !important; --hero-bg: #cfe3ff !important; --av-g0: #dbe9ff !important;
  --av-g1: #e3f4ff !important; --av-g2: #cfe3ff !important; --av-g3: #dbe9ff !important; --av-g4: #e3f4ff !important; --av-g5: #cfe3ff !important;
  --av-g6: #dbe9ff !important; --av-g7: #0a2a6b !important; --prem-metal: linear-gradient(135deg, #0062ff 0%, #00b3ff 100%) !important;
  --prem-metal-ink: #ffffff !important; --btn-pink-grad: linear-gradient(180deg, #0062ff 0%, #0062ff 100%) !important;
  --lp-sell-bg: linear-gradient(180deg, #0062ff 0%, #0050d0 100%) !important;
  --lp-door-sell: linear-gradient(180deg, #0062ff 0%, #0050d0 100%) !important;
}
html[data-theme="dark"]:has(> body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm)),
html[data-theme="dark"] > body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm),
html[data-theme="dark"] > body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm) [data-theme="dark"] {
  --md-bg: #0b1020 !important; --md-header: #080c18 !important; --md-card: #121a2b !important; --md-input: #172238 !important;
  --md-hover: #1e2b45 !important; --md-ink: #eaf0fa !important; --md-ink-2: #9fb0c8 !important; --md-ink-3: #8394b0 !important;
  --md-glyph-off: #7d8fab !important; --md-on-pink: #061024 !important; --md-pink-soft: rgb(0 179 255 / .14) !important;
  --md-glass: rgb(8 12 24 / .55) !important; --md-white: #eaf0fa !important; --md-meta: #9fb0c8 !important; --md-sep: #1e2b45 !important;
  --canvas: #0b1020 !important; --bg: #0b1020 !important; --app-ground: #0b1020 !important; --app-head-bg: #080c18 !important;
  --chrome: #080c18 !important; --chrome-2: #121a2b !important; --t-chrome: #080c18 !important; --footer-bg: #080c18 !important;
  --lp-footer-bg: #080c18 !important; --prem-bg: #080c18 !important; --surface: #121a2b !important; --surface-2: #172238 !important;
  --surface-3: #1e2b45 !important; --sunken: #172238 !important; --field: #172238 !important; --field-in: #172238 !important;
  --t-band: #0b1020 !important; --t-over: #172238 !important; --t-over-2: #1e2b45 !important; --t-over-3: #1e2b45 !important;
  --t-mute: #1e2b45 !important; --dkbox: #121a2b !important; --dkbox-tile: #172238 !important; --bubble-in: #172238 !important;
  --toast-bg: #172238 !important; --lp-chip-bg: #172238 !important; --pola-edge: #172238 !important; --dk-bg: #080c18 !important;
  --dk-card: #121a2b !important; --dk-ink: #eaf0fa !important; --dk-ink-2: #9fb0c8 !important; --card-dk: #121a2b !important;
  --anthracite: #061024 !important; --ink: #eaf0fa !important; --ink-2: #9fb0c8 !important; --ink-3: #8394b0 !important;
  --glyph-off: #7d8fab !important; --on-chrome: #eaf0fa !important; --on-chrome-2: #9fb0c8 !important; --white: #eaf0fa !important;
  --tile-num: #eaf0fa !important; --glass-key-ink: #eaf0fa !important; --rope: #8394b0 !important; --peg-spring: #8394b0 !important;
  --obj-muted-2: #8394b0 !important; --ph-media: #172238 !important; --ph-media-2: #172238 !important; --ph-text: #9fb0c8 !important;
  --ph-ink: #8394b0 !important; --ph-landing: none !important; --chrome-well: #172238 !important; --chrome-well-hover: #1e2b45 !important;
  --accent: #00b3ff !important; --accent-press: #0094e0 !important; --accent-soft: rgb(0 179 255 / .14) !important;
  --pink-soft: rgb(0 179 255 / .14) !important; --accent-text: #5cc8ff !important; --on-accent: #061024 !important; --focus-ring: #5cc8ff !important;
  --t-sel: #00b3ff !important; --on-t-sel: #061024 !important; --chip-sel: #00b3ff !important; --on-chip-sel: #061024 !important;
  --seg-on: #00b3ff !important; --on-seg-on: #061024 !important; --check-on: #00b3ff !important; --on-check-on: #061024 !important;
  --switch-on: #00b3ff !important; --switch-off: #1e2b45 !important; --switch-knob: #eaf0fa !important; --switch-knob-on: #ffffff !important;
  --btn-ink: rgb(0 179 255 / .14) !important; --on-btn-ink: #eaf0fa !important; --btn-ink-hover: rgb(0 179 255 / .22) !important;
  --btn-ink-edge: transparent !important; --btn-line-bg: rgb(0 179 255 / .14) !important; --btn-line-edge: transparent !important;
  --btn-ink-hover-fx: none !important; --t-tint: rgb(0 179 255 / .10) !important; --t-tint-2: rgb(0 179 255 / .16) !important;
  --t-hair: rgb(234 240 250 / .10) !important; --av-g0: #172238 !important; --av-g1: #1e2b45 !important; --av-g2: #172238 !important;
  --av-g3: #1e2b45 !important; --av-g4: #172238 !important; --av-g5: #1e2b45 !important; --av-g6: #172238 !important; --av-g7: #1e2b45 !important;
  --success: #3ddc97 !important; --on-success: #061024 !important; --danger: #ff6b6b !important; --on-danger: #061024 !important;
  --online: #3ddc97 !important; --live: #3ddc97 !important; --scard-online: #3ddc97 !important;
  --scard-online-halo: 0 0 0 3px rgb(0 179 255 / .25) !important; --glass: rgb(8 12 24 / .55) !important; --scrim: rgb(4 8 18 / .66) !important;
  --shadow-e1: 0 16px 48px rgb(0 0 0 / .5) !important; --cream: #eaf0fa !important; --paper: #121a2b !important; --obj-cream: #eaf0fa !important;
  --sticker-cream: #eaf0fa !important; --on-media: #ffffff !important; --on-media-2: rgb(255 255 255 / .78) !important;
  --scard-ink: #ffffff !important; --scard-ink-2: rgb(255 255 255 / .82) !important; --scard-ink-3: rgb(255 255 255 / .6) !important;
  --photo-tint: transparent !important; --photo-shade: radial-gradient(125% 100% at 50% 40%, #1e2b45 40%, #121a2b 100%) !important;
  --photo-foot: linear-gradient(180deg, #1e2b45 58%, #121a2b 100%) !important; --hero-bg: #0a2a6b !important;
  --tape: rgb(234 240 250 / .2) !important; --mt-light: rgb(234 240 250 / .85) !important; --stamp-fill: #172238 !important;
  --art-glow: radial-gradient(closest-side, rgb(0 179 255 / .16), rgb(0 179 255 / .05) 55%, rgb(0 179 255 / 0)) !important;
  --alt-spot: rgb(0 179 255 / .30) !important; --alt-spot-2: rgb(0 179 255 / .12) !important; --hero-blush: rgb(0 179 255 / .14) !important;
  --do-glow: none !important; --lp-arch-glow: 0 40px 100px -30px rgb(0 179 255 / .30) !important; --lp-host-rim: rgb(0 179 255 / .25) !important;
  --lp-marker: rgb(0 179 255 / .45) !important; --lp-row-hover: linear-gradient(90deg, rgb(0 179 255 / .12), rgb(0 179 255 / 0) 80%) !important;
  --sh-pink: 0 6px 18px rgb(0 179 255 / .18) !important; --sh-pink-hover: 0 8px 22px rgb(0 179 255 / .28) !important;
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(0 179 255 / .12), transparent 72%), #0b1020 !important;
  --lp-real-bg: radial-gradient(ellipse 48% 46% at 100% 50%, rgb(0 179 255 / .08), transparent 75%), #0b1020 !important;
  --lp-real-bg-l: radial-gradient(ellipse 55% 46% at 0% 50%, rgb(0 179 255 / .08), transparent 75%), #0b1020 !important;
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(0 179 255 / .12), transparent 72%), #121a2b !important;
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(0 179 255 / .10), transparent 72%), #121a2b !important;
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(0 179 255 / .10), transparent 72%), #0b1020 !important;
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(0 179 255 / .18), transparent 72%), #0a2a6b !important;
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(0 179 255 / .18), transparent 70%), #0a2a6b !important;
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(0 179 255 / .12), transparent 70%), #121a2b !important; --lp-box-cr: #172238 !important;
  --prem-metal: linear-gradient(135deg, #0062ff 0%, #00b3ff 100%) !important; --prem-metal-ink: #ffffff !important;
  --prem-metal-dk: linear-gradient(135deg, #0a2a6b 0%, #0062ff 100%) !important; --prem-metal-dk-ink: #eaf0fa !important;
  --prem-metal-bevel: inset 0 1px 0 rgb(255 255 255 / .25) !important; --prem-metal-ring: inset 0 0 0 1px #00b3ff !important;
  --prem-sheen: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .35) 50%, transparent 62%) !important;
  --btn-pink-grad: linear-gradient(180deg, #00b3ff 0%, #00b3ff 100%) !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme]):has(> body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm)),
html:not([data-theme]) > body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body):not(.pn-adm) {
  --md-bg: #0b1020 !important; --md-header: #080c18 !important; --md-card: #121a2b !important; --md-input: #172238 !important;
  --md-hover: #1e2b45 !important; --md-ink: #eaf0fa !important; --md-ink-2: #9fb0c8 !important; --md-ink-3: #8394b0 !important;
  --md-glyph-off: #7d8fab !important; --md-on-pink: #061024 !important; --md-pink-soft: rgb(0 179 255 / .14) !important;
  --md-glass: rgb(8 12 24 / .55) !important; --md-white: #eaf0fa !important; --md-meta: #9fb0c8 !important; --md-sep: #1e2b45 !important;
  --canvas: #0b1020 !important; --bg: #0b1020 !important; --app-ground: #0b1020 !important; --app-head-bg: #080c18 !important;
  --chrome: #080c18 !important; --chrome-2: #121a2b !important; --t-chrome: #080c18 !important; --footer-bg: #080c18 !important;
  --lp-footer-bg: #080c18 !important; --prem-bg: #080c18 !important; --surface: #121a2b !important; --surface-2: #172238 !important;
  --surface-3: #1e2b45 !important; --sunken: #172238 !important; --field: #172238 !important; --field-in: #172238 !important;
  --t-band: #0b1020 !important; --t-over: #172238 !important; --t-over-2: #1e2b45 !important; --t-over-3: #1e2b45 !important;
  --t-mute: #1e2b45 !important; --dkbox: #121a2b !important; --dkbox-tile: #172238 !important; --bubble-in: #172238 !important;
  --toast-bg: #172238 !important; --lp-chip-bg: #172238 !important; --pola-edge: #172238 !important; --dk-bg: #080c18 !important;
  --dk-card: #121a2b !important; --dk-ink: #eaf0fa !important; --dk-ink-2: #9fb0c8 !important; --card-dk: #121a2b !important;
  --anthracite: #061024 !important; --ink: #eaf0fa !important; --ink-2: #9fb0c8 !important; --ink-3: #8394b0 !important;
  --glyph-off: #7d8fab !important; --on-chrome: #eaf0fa !important; --on-chrome-2: #9fb0c8 !important; --white: #eaf0fa !important;
  --tile-num: #eaf0fa !important; --glass-key-ink: #eaf0fa !important; --rope: #8394b0 !important; --peg-spring: #8394b0 !important;
  --obj-muted-2: #8394b0 !important; --ph-media: #172238 !important; --ph-media-2: #172238 !important; --ph-text: #9fb0c8 !important;
  --ph-ink: #8394b0 !important; --ph-landing: none !important; --chrome-well: #172238 !important; --chrome-well-hover: #1e2b45 !important;
  --accent: #00b3ff !important; --accent-press: #0094e0 !important; --accent-soft: rgb(0 179 255 / .14) !important;
  --pink-soft: rgb(0 179 255 / .14) !important; --accent-text: #5cc8ff !important; --on-accent: #061024 !important; --focus-ring: #5cc8ff !important;
  --t-sel: #00b3ff !important; --on-t-sel: #061024 !important; --chip-sel: #00b3ff !important; --on-chip-sel: #061024 !important;
  --seg-on: #00b3ff !important; --on-seg-on: #061024 !important; --check-on: #00b3ff !important; --on-check-on: #061024 !important;
  --switch-on: #00b3ff !important; --switch-off: #1e2b45 !important; --switch-knob: #eaf0fa !important; --switch-knob-on: #ffffff !important;
  --btn-ink: rgb(0 179 255 / .14) !important; --on-btn-ink: #eaf0fa !important; --btn-ink-hover: rgb(0 179 255 / .22) !important;
  --btn-ink-edge: transparent !important; --btn-line-bg: rgb(0 179 255 / .14) !important; --btn-line-edge: transparent !important;
  --btn-ink-hover-fx: none !important; --t-tint: rgb(0 179 255 / .10) !important; --t-tint-2: rgb(0 179 255 / .16) !important;
  --t-hair: rgb(234 240 250 / .10) !important; --av-g0: #172238 !important; --av-g1: #1e2b45 !important; --av-g2: #172238 !important;
  --av-g3: #1e2b45 !important; --av-g4: #172238 !important; --av-g5: #1e2b45 !important; --av-g6: #172238 !important; --av-g7: #1e2b45 !important;
  --success: #3ddc97 !important; --on-success: #061024 !important; --danger: #ff6b6b !important; --on-danger: #061024 !important;
  --online: #3ddc97 !important; --live: #3ddc97 !important; --scard-online: #3ddc97 !important;
  --scard-online-halo: 0 0 0 3px rgb(0 179 255 / .25) !important; --glass: rgb(8 12 24 / .55) !important; --scrim: rgb(4 8 18 / .66) !important;
  --shadow-e1: 0 16px 48px rgb(0 0 0 / .5) !important; --cream: #eaf0fa !important; --paper: #121a2b !important; --obj-cream: #eaf0fa !important;
  --sticker-cream: #eaf0fa !important; --on-media: #ffffff !important; --on-media-2: rgb(255 255 255 / .78) !important;
  --scard-ink: #ffffff !important; --scard-ink-2: rgb(255 255 255 / .82) !important; --scard-ink-3: rgb(255 255 255 / .6) !important;
  --photo-tint: transparent !important; --photo-shade: radial-gradient(125% 100% at 50% 40%, #1e2b45 40%, #121a2b 100%) !important;
  --photo-foot: linear-gradient(180deg, #1e2b45 58%, #121a2b 100%) !important; --hero-bg: #0a2a6b !important;
  --tape: rgb(234 240 250 / .2) !important; --mt-light: rgb(234 240 250 / .85) !important; --stamp-fill: #172238 !important;
  --art-glow: radial-gradient(closest-side, rgb(0 179 255 / .16), rgb(0 179 255 / .05) 55%, rgb(0 179 255 / 0)) !important;
  --alt-spot: rgb(0 179 255 / .30) !important; --alt-spot-2: rgb(0 179 255 / .12) !important; --hero-blush: rgb(0 179 255 / .14) !important;
  --do-glow: none !important; --lp-arch-glow: 0 40px 100px -30px rgb(0 179 255 / .30) !important; --lp-host-rim: rgb(0 179 255 / .25) !important;
  --lp-marker: rgb(0 179 255 / .45) !important; --lp-row-hover: linear-gradient(90deg, rgb(0 179 255 / .12), rgb(0 179 255 / 0) 80%) !important;
  --sh-pink: 0 6px 18px rgb(0 179 255 / .18) !important; --sh-pink-hover: 0 8px 22px rgb(0 179 255 / .28) !important;
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(0 179 255 / .12), transparent 72%), #0b1020 !important;
  --lp-real-bg: radial-gradient(ellipse 48% 46% at 100% 50%, rgb(0 179 255 / .08), transparent 75%), #0b1020 !important;
  --lp-real-bg-l: radial-gradient(ellipse 55% 46% at 0% 50%, rgb(0 179 255 / .08), transparent 75%), #0b1020 !important;
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(0 179 255 / .12), transparent 72%), #121a2b !important;
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(0 179 255 / .10), transparent 72%), #121a2b !important;
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(0 179 255 / .10), transparent 72%), #0b1020 !important;
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(0 179 255 / .18), transparent 72%), #0a2a6b !important;
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(0 179 255 / .18), transparent 70%), #0a2a6b !important;
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(0 179 255 / .12), transparent 70%), #121a2b !important; --lp-box-cr: #172238 !important;
  --prem-metal: linear-gradient(135deg, #0062ff 0%, #00b3ff 100%) !important; --prem-metal-ink: #ffffff !important;
  --prem-metal-dk: linear-gradient(135deg, #0a2a6b 0%, #0062ff 100%) !important; --prem-metal-dk-ink: #eaf0fa !important;
  --prem-metal-bevel: inset 0 1px 0 rgb(255 255 255 / .25) !important; --prem-metal-ring: inset 0 0 0 1px #00b3ff !important;
  --prem-sheen: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .35) 50%, transparent 62%) !important;
  --btn-pink-grad: linear-gradient(180deg, #00b3ff 0%, #00b3ff 100%) !important;
}
}
/* -- chrome: the wordmark in the page ink (dark: it vanished at 1.5:1), the heart in the brand blue (#71–#74, #122–#124) -- */
body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) .pc-logo { color: var(--ink) !important; }
html[data-theme="dark"] body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) .pc-logo__dot { background: #00b3ff !important; }
/* the header / footer wells: tonal blue, the feet ink (#75–#77); the auth header's «Sign up» gets the same well in light (#81) */
html[data-theme="light"] body.pc-root:is(.pc-guest,.pn-joinbody) :is(.pc-header,.pn-joinnav,.pn-tabbar,.pc-tabbar,.pc-footer,.pn-gfooter,.pn-cp-bar,.pn-dtbar,.pn-lbsticky) {
  --lc-bar: #FFFFFF; --lc-well: rgb(0 98 255 / .08); --lc-well-hover: rgb(0 98 255 / .14); --lc-ink: #0e1a33; --lc-ink-2: #4a5878;
}
html[data-theme="light"] body.pc-root.pn-joinbody .pn-joinnav__login { background: rgb(0 98 255 / .08) !important; }
html[data-theme="light"] body.pc-root.pn-joinbody .pn-joinnav__login:hover { background: rgb(0 98 255 / .14) !important; }

/* -- home hero (#83–#97 edited in place above, .fp-hero): the dark variant — no light island in the dark theme (#156–#159) -- */
html[data-theme="dark"] body.pc-root .fp-hero { --fp-mint: #00b3ff; --fp-mint-deep: #00b3ff; --fp-mint-soft: rgb(0 179 255 / .14); background: #0b1020; }
html[data-theme="dark"] body.pc-root .fp-hero .fp-hero__tag { color: #5cc8ff; }
html[data-theme="dark"] body.pc-root .fp-hero .fp-hero__tag .fp-ico { color: #00b3ff; }
html[data-theme="dark"] body.pc-root .fp-hero .fp-key--sell { background: #00b3ff; color: #061024; box-shadow: 0 12px 28px rgb(0 179 255 / .22); }
html[data-theme="dark"] body.pc-root .fp-hero .fp-key--sell:hover { background: #33c3ff; }
html[data-theme="dark"] body.pc-root .fp-hero .fp-key--find { background: #172238; box-shadow: none; }
html[data-theme="dark"] body.pc-root .fp-hero .fp-key--find:hover { background: #1e2b45; }
html[data-theme="dark"] body.pc-root .fp-hero .fp-hero__facts li { border-left-color: rgb(234 240 250 / .12); }
html[data-theme="dark"] body.pc-root .fp-hero .fp-key:focus-visible { outline-color: #5cc8ff; }

/* -- home: the illustration glows (pink in dark, #151–#155) and the two doors (#104–#106, #150) -- */
body.pc-root:is(.pc-guest,.pn-joinbody) .pn-hm-art::before { background: var(--art-glow) !important; }
body.pc-root.pc-guest .pn-hm-reg__door--sell { background: var(--surface) !important; }
body.pc-root.pc-guest .pn-hm-reg__door .pn-hm-reg__tick { background: var(--surface-2) !important; color: var(--accent-text) !important; }

/* -- home device mockups (#99–#103, #160–#166, #173): light frames in light, blue-black frames in dark, one selected style -- */
html[data-theme="dark"] body.pc-root .pk-dev--laptop .pk-dev__screen, html[data-theme="dark"] body.pc-root .pk-dev--phone .pk-dev__screen {
  border-color: #1e2b45; background: #0b1020; box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
html[data-theme="dark"] body.pc-root .pk-dev--phone .pk-dev__screen::before { background: #1e2b45; }
html[data-theme="dark"] body.pc-root .pk-dev__base { background: #172238; box-shadow: 0 10px 24px rgb(0 0 0 / .4); }
html[data-theme="dark"] body.pc-root .pk-ui-rail { background: #121a2b; }
html[data-theme="dark"] body.pc-root .pk-ui-rail > span { color: #9fb0c8; }
html[data-theme="dark"] body.pc-root .pk-ui-bar { background: #121a2b; }
html[data-theme="dark"] body.pc-root .pk-ui-logo, html[data-theme="dark"] body.pc-root .pk-ui-logo::before { color: #eaf0fa; }
html[data-theme="dark"] body.pc-root .pk-ui-logo i { background: #00b3ff; }
html[data-theme="dark"] body.pc-root .pk-ui-rail > span.is-on, html[data-theme="dark"] body.pc-root .pk-ui-rail em { background: #00b3ff; color: #061024; }

/* -- creator cards (/creators/, the 404 rail): the media placeholder and its grain were panty peach + a pink matrix (#178–#186) -- */
body.pc-root.pc-guest .pc-scard__media::before { background-color: #0a2a6b !important; }
body.pc-root.pc-guest .pc-scard__media::after { background-image: none !important; }
html[data-theme="dark"] body.pc-root.pc-guest .pc-scard__media::before { background-color: #172238 !important; }

/* -- content heroes: the phone island (#194–#198), the sound key on its video, the join stage veil (#249, #250) -- */
body.pc-root:is(.pc-guest,.pn-joinbody) :is(.pk-chero__fx, .pk-chero__body)::before { background-image: var(--art-glow) !important; }
html[data-theme="light"] body.pc-root:is(.pc-guest,.pn-joinbody) .pk-chero__body { --art-glow: radial-gradient(closest-side, rgb(0 179 255 / .2), rgb(0 179 255 / .06) 55%, rgb(0 179 255 / 0)); }
body.pc-root:is(.pc-guest,.pn-joinbody) .pk-chero__snd { background: rgb(6 14 34 / .62) !important; color: #FFFFFF !important; }
html[data-theme="dark"] body.pc-root:is(.pc-guest,.pn-joinbody) .pk-chero__body video { background: #172238; }
html[data-theme="dark"] body.pc-root.pn-joinbody .pkj-x__stage::after { background: linear-gradient(180deg, transparent 30%, rgb(6 14 34 / .72)); }
body.pc-root.pn-joinbody .pkj-x__claim, body.pc-root.pn-joinbody .pkj-x__claim :is(b, span) { color: #FFFFFF !important; }
body.pc-root.pn-joinbody .pkj-x__claim { text-shadow: 0 1px 12px rgb(6 14 34 / .45); }

/* -- join: the current step is the one filled accent (#247, #248); the role tiles (#245, #246) -- */
body.pc-root:is(.pc-guest,.pn-joinbody) .pkj-step[aria-current] { background: var(--accent) !important; }
body.pc-root:is(.pc-guest,.pn-joinbody) .pkj-step[aria-current] * { color: var(--on-accent) !important; }
body.pc-root:is(.pc-guest,.pn-joinbody) .pkj-role__t:not([aria-current]) { background: var(--surface) !important; color: var(--ink); }
html[data-theme="light"] body.pc-root:is(.pc-guest,.pn-joinbody) .pkj-step:not([aria-current]) { background: #FFFFFF; }

/* -- keys and fields on guest pages: secondary = tonal blue, no edges; fields borderless (#8, #15, #231, #232, #240–#242, #256, #275) -- */
body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) :is(.pc-btn--secondary, .pc-btn--soft, .pc-btn--ink):not(.pc-btn--primary) {
  background: var(--btn-ink) !important; color: var(--on-btn-ink) !important; border-color: transparent !important; box-shadow: none !important; }
body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) :is(.pc-btn--secondary, .pc-btn--soft, .pc-btn--ink):not(.pc-btn--primary):hover { background: var(--btn-ink-hover) !important; }
body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) :is(input.pc-input, select.pc-input, textarea.pc-input, .pn-help__searchbox) {
  background-color: var(--field) !important; border-color: transparent !important; color: var(--ink); }
body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) :is(input.pc-input, select.pc-input, textarea.pc-input):focus { box-shadow: 0 0 0 2px var(--accent) !important; }
body.pc-root:is(.pc-guest,.pn-joinbody,.fp-cp-body) .pn-help__q { background: transparent !important; }
body.pc-root:is(.pc-guest,.pn-joinbody) .pc-badge.pn-help__aud { background: var(--accent-soft); color: var(--accent-text); }

/* -- content pages: the step numerals (#201), the promo examples (#203–#207), the price strip (#209–#213) -- */
body.pc-root.pc-guest .pk-gsx-n { color: var(--accent) !important; opacity: .28 !important; }
html[data-theme="dark"] body.pc-root .fp-promo-tile img { box-shadow: 0 14px 36px rgb(0 0 0 / .4); }
body.pc-root.pc-guest .pc-strip__bar { background: linear-gradient(90deg, var(--surface-3) 0 18%, var(--accent) 18% 78%, var(--surface-3) 78%) !important; }
body.pc-root.pc-guest .pc-strip__tg:not(.is-med) { background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--sh-card); }
body.pc-root.pc-guest .pc-strip__tg.is-med { background: var(--accent) !important; color: var(--on-accent) !important; }
body.pc-root.pc-guest .pc-strip__tg small { color: inherit !important; }

/* -- creator page /@name (#260–#272): cover in the brand gradient, the ask card flat, the poster ground dark -- */
body.pc-root.fp-cp-body .fp-cp__cover.is-tone { background: linear-gradient(120deg, #0062ff 0%, #00b3ff 100%); }
html[data-theme="dark"] body.pc-root.fp-cp-body .fp-cp__cover.is-tone { background: linear-gradient(120deg, #0a2a6b 0%, #0062ff 100%); }
body.pc-root.fp-cp-body .fn-ask { background: var(--accent-soft) !important; }
html[data-theme="light"] body.pc-root.fp-cp-body .fn-ask { background: #FFFFFF !important; box-shadow: inset 0 0 0 2px rgb(0 98 255 / .14); }
body.pc-root.fp-cp-body .fp-cp__video { background: #0e1a33; }
@media (min-width: 761px) {
  html[data-theme="dark"] body.pc-root .fp-hero .fp-hero__img { filter: brightness(.86);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 24%, rgb(0 0 0 / .45) 44%, #000 64%);
            mask-image: linear-gradient(to right, transparent 0, transparent 24%, rgb(0 0 0 / .45) 44%, #000 64%); }
}
@media (max-width: 760px) {
  html[data-theme="dark"] body.pc-root .fp-hero .fp-hero__img { filter: brightness(.86);
    -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 82%); mask-image: linear-gradient(to bottom, #000 38%, transparent 82%); }
  html[data-theme="dark"] body.pc-root .fp-hero .fp-hero__tag { background: rgb(11 16 32 / .86); }
}
/* the creator card ground under the photo (white names stay readable while it loads, #178) and the mockup composer line (#102) */
html[data-theme="light"] body.pc-root.pc-guest .pc-scard { background-color: #0a2a6b; }
html[data-theme="dark"] body.pc-root.pc-guest .pc-scard { background-color: #172238; }
body.pc-root.pc-guest .pk-ui-compose > span { color: var(--ink-2); }
html[data-theme="dark"] body.pc-root.pc-guest .pc-card .pc-card__fav { background: rgb(8 12 24 / .6) !important; }
/* ==== end colour pass 10.11. guest ==== */

/* ==== promo studio examples (owner 08.11.) ======================================================================
   /seller-pricing/#promo (templates/sellpricing.php, 4 feed + 1 story) and the band on the selling guide
   (templates/plastik/guide_sell_ad.php, 2 feed + 1 story); tiles from templates/partials/promo_tiles.php.
   The story column is .703 of a feed column (4:5 next to 9:16), so every picture in a row has the same height.
   Desktop a row; phones (and the five on tablets) a scroll-snap strip that runs to the screen edge. No edges, a soft shadow. */
.fp-promo-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); align-items: start; }
.fp-promo-strip--five { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .703fr); }
.fp-promo-strip--three { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .703fr); }
.fp-promo-tile { margin: 0; }
.fp-promo-tile figure { margin: 0; display: grid; gap: var(--space-3); }
.fp-promo-tile img { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: var(--surface-2, #e3f4ff);
  box-shadow: 0 14px 36px rgb(14 26 51 / .12), 0 2px 6px rgb(14 26 51 / .06); }
.fp-promo-tile figcaption { display: grid; gap: 2px; padding: 0 var(--space-1); }
.fp-promo-tile figcaption b { font: 800 17px/1.2 var(--portal-display); letter-spacing: -.01em; color: var(--ink); }
.fp-promo-tile figcaption span { font: var(--type-meta); color: var(--ink-2); }
.fp-promo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); }
.fp-promo__foot .pn-sp-fine { margin: 0; max-width: 46ch; }
/* the band on the selling guide: the words left, the three pictures right */
.pk-site .fp-promo__band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); align-items: center;
  padding: var(--space-10); background: var(--surface, #FFFFFF); }
.pk-site .fp-promo__copy .pk-gsx-big { max-width: 14ch; }
.pk-site .fp-promo__copy .pk-small { max-width: 40ch; }
@media (max-width: 1000px) {
  .fp-promo-strip--five { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-4); scrollbar-width: none; }
  .fp-promo-strip--five::-webkit-scrollbar { display: none; }
  .fp-promo-strip--five > .fp-promo-tile { flex: 0 0 38vw; scroll-snap-align: start; }
  .fp-promo-strip--five > .fp-promo-tile--story { flex-basis: calc(38vw * .703); }
  .pk-site .fp-promo__band { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8); }
}
@media (max-width: 700px) {
  .fp-promo-strip--five > .fp-promo-tile, .fp-promo-strip--three > .fp-promo-tile { flex: 0 0 72vw; scroll-snap-align: start; }
  .fp-promo-strip--five > .fp-promo-tile--story, .fp-promo-strip--three > .fp-promo-tile--story { flex-basis: calc(72vw * .703); }
  .fp-promo-strip--three { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-6); margin-inline: calc(-1 * var(--space-6)); padding: 0 var(--space-6) var(--space-4); scrollbar-width: none; }
  .fp-promo-strip--three::-webkit-scrollbar { display: none; }
  .pk-site .fp-promo__band { padding: var(--space-6); overflow: hidden; }
  .fp-promo__foot { flex-direction: column; align-items: stretch; }
  .fp-promo__foot .pc-btn { justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) { .fp-promo-strip { scroll-behavior: smooth; } }
/* ==== end promo studio examples ==== */

/* ==== FP2 creator dashboard (feet 09.11., lib/creator_stats.php) ===========================================================
   Member area only: tonal surfaces, no card edges, the mint accent from the theme's own tokens (light + dark).
   Dashboard top (templates/lhome.php): .fp-home__nums (the four 7-day numbers, the pn-lhstat tiles) and .fp-step (ONE next
   step). Stats page (templates/creator_stats.php): .fp-cs. Menu (lib/medrawer.php): the head-less Home group. */
.fp-home__nums .pc-sechead { margin-bottom: var(--space-3); }
.fp-home__nums .pn-lhstat__n, .fp-cs__tile .pn-lhstat__n { font-size: 26px; }
.fp-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }   /* #128 */
.fp-step__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--fp-tint-2, color-mix(in srgb, var(--accent) 24%, transparent)); color: var(--ink); }   /* #129 */
.fp-step__t { min-width: 0; }
.fp-step__kick { margin: 0 0 2px; font: 600 13px/1.3 var(--body); color: var(--ink-2); }
.fp-step__t .pc-h-card { margin: 0; }
.fp-step__t .pc-sub { margin: var(--space-1) 0 0; }
@media (max-width: 700px) {
  .fp-step { grid-template-columns: auto minmax(0, 1fr); }
  .fp-step__btn { grid-column: 1 / -1; justify-content: center; }
  .fp-home__nums .pn-lhstats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the head-less Home group of a seller's menu: its Corner row is phone-hidden (the Corner tab), so no empty section */
  .pn-md__sec--top:not(:has(.pn-row:not(.pc-hide-sm))) { display: none; }
}
.fp-cs__stack { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .fp-cs__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .fp-cs__stack > .fp-cs__tiles, .fp-cs__stack > .fp-cs__chart, .fp-cs__stack > .fp-cs__empty { grid-column: 1 / -1; }
}
.fp-cs__stack > .pn-panel { margin: 0; }
.fp-cs__grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 701px) { .fp-cs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-cs__tile { grid-template-areas: "ico n" "l l" "c c"; align-content: start; }
.fp-cs__tile:has(.pn-lhstat__sub) { grid-template-areas: "ico n" "l l" "s s" "c c"; }
.fp-cs__cmp { grid-area: c; font: 600 13px/1.3 var(--body); color: var(--ink-2); }
.fp-cs__cmp--up, .fp-cs__cmp--new { color: var(--accent-text, var(--accent)); }
.fp-cs__fig { margin: var(--space-3) 0 0; }
.fp-cs__bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: var(--space-2); border-radius: var(--r-m); background: var(--surface-2); }
.fp-cs__bar { flex: 1 1 0; min-width: 2px; height: max(var(--h), 3px); border-radius: 4px 4px 1px 1px; background: var(--accent); }
.fp-cs__bar.is-zero { background: var(--surface-3); }   /* #124 */
.fp-cs__axis { display: flex; justify-content: space-between; margin-top: var(--space-1); font: 500 12px/1.3 var(--body); color: var(--ink-2); }
.fp-cs__list { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.fp-cs__list > div, .fp-cs__list > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--r-m); background: var(--surface-2); }
.fp-cs__list dt, .fp-cs__list dd { margin: 0; }
.fp-cs__list dt { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.fp-cs__list dt span { color: var(--ink-2); font-size: 14px; }
.fp-cs__list dd, .fp-cs__ranks li > span { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.fp-cs__list > .is-sum { background: var(--fp-tint, color-mix(in srgb, var(--accent) 14%, var(--surface-2))); }   /* #244 */
.fp-cs__ranks { counter-reset: fpcs; }
.fp-cs__ranks li { counter-increment: fpcs; }
.fp-cs__ranks li > a { min-width: 0; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-cs__ranks li > a::before { content: counter(fpcs) ". "; color: var(--ink-2); }
.fp-cs__ranks li > a:hover { text-decoration: underline; }
.fp-cs__meter { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.fp-cs__meter li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; align-items: center; gap: var(--space-3); }
.fp-cs__meterl { color: var(--ink); }
.fp-cs__meterbar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fp-cs__meterbar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--accent); }
.fp-cs__metern { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.fp-cs__metern small { font-weight: 500; color: var(--ink-2); }
.fp-cs__tip { margin: var(--space-3) 0 0; }
.fp-cs__empty, .fp-cs__door { display: grid; justify-items: start; gap: var(--space-2); }
.fp-cs__empty .pc-h-card, .fp-cs__door .pc-h-card, .fp-cs__empty .pc-sub { margin: 0; }
.fp-cs__emptyico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--fp-tint); color: var(--accent-text); }   /* #245 */
.fp-cs__addr { margin: var(--space-2) 0 0; }
.fp-cs__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.fp-cs__more { margin: var(--space-1) 0 0; }
.fp-cs__doorlist { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.fp-cs__doorlist li { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.fp-cs__doorlist svg { flex: none; color: var(--accent); }
@media (max-width: 700px) {
  .fp-cs__meter li { grid-template-columns: 88px minmax(0, 1fr) 60px; gap: var(--space-2); }
  .fp-cs__acts .pc-btn { flex: 1 1 auto; justify-content: center; }
}
/* ==== end FP2 creator dashboard ==== */
/* ==== feet 09.11. specialties «What I offer» (lib/specialties.php, partials/spec_pick.php): the picker in her profile
   editor — option tiles on surfaces (no edges inside), the chip turns ink when picked, the description under it ==== */
.pn-specpick { margin-top: var(--space-4); }
.pn-specpick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.pn-specopt { position: relative; display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-m);
  background: var(--surface-2); cursor: pointer; transition: background-color .15s ease; }
.pn-specopt:hover { background: var(--surface-3); }
.pn-specopt:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pn-specopt__chip { display: inline-flex; align-items: center; justify-self: start; gap: var(--space-1); min-height: 30px; padding: 0 var(--space-3) 0 var(--space-2);
  border-radius: var(--r-chip, 999px); background: var(--sunken); color: var(--ink); font: var(--type-label); font-weight: 700; }
.pn-specopt__tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); }   /* #126 */
.pn-specopt__tick .pc-ico { width: 12px; height: 12px; opacity: 0; }
.pn-specopt:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.pn-specopt:has(input:checked) .pn-specopt__chip { background: var(--btn-ink); color: var(--on-btn-ink); }
.pn-specopt:has(input:checked) .pn-specopt__tick { background: var(--accent); color: var(--on-btn-ink); }
.pn-specopt:has(input:checked) .pn-specopt__tick .pc-ico { opacity: 1; }
.pn-specopt__d { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.pn-specpick__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; }
.pn-specpick__lock { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.pn-specpick__state { margin: 0; min-height: 1.4em; }
/* PM 200 #67 (feet 09.11.): label-only chips — a wrapping row of pills instead of tiles with a sentence each */
.pn-specpick__list:has(.pn-specopt--chip) { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pn-specopt.pn-specopt--chip { padding: 0; background: none; border-radius: var(--r-chip, 999px); }
.pn-specopt--chip:hover { background: none; }
.pn-specopt--chip:hover .pn-specopt__chip { background: var(--surface-3); }
.pn-specopt--chip:has(input:checked) { background: none; }
.pn-specopt--chip .pn-specopt__chip { min-height: 40px; background: var(--surface-2); }
.pn-specpick__foot .pc-btn[hidden] { display: none; }
@media (max-width: 520px) {
  .pn-specpick__list { grid-template-columns: 1fr; }
  .pn-specopt { grid-template-columns: auto; padding: var(--space-3); }
}
/* ==== end specialties ==== */
/* ==== feet 09.11. member social (lib/social.php, lib/purchases.php): the hearts of the feed (partials/soc_heart.php), the
   feed's two tabs, the empty Following tab with suggestions, «My purchases». Member look: surfaces, no edges inside, Inter
   heads in sentence case, one pink key per view (none here: the heart's pink is a state, not a key) ==== */
.pn-soclike { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: var(--control-md); height: var(--control-md);
  padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-weight: 700;
  font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s ease, background-color .15s ease; }
.pn-soclike:hover { background: var(--surface-3); color: var(--ink); }
.pn-soclike:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pn-soclike .pc-ico { width: 20px; height: 20px; }
.pn-soclike.is-on, .pn-soclike.is-on:hover { color: var(--accent); }
.pn-soclike.is-on .pc-ico { fill: currentColor; animation: pn-md-like var(--dur-2, .25s) ease-out; }
.pn-soclike__n:empty { display: none; }
.pn-soclike:has(.pn-soclike__n:empty) { padding: 0; width: var(--control-md); }
.pn-soclike.is-static { cursor: default; background: transparent; padding: 0 var(--space-1); color: var(--ink-2); }
.pn-soclike.is-static .pc-ico { color: var(--accent); fill: currentColor; }
.pn-lf__acts > .pn-soclike, .pn-lf__acts > .pn-soclike:first-child { flex: none; width: auto; }
.pn-lf__acts.fp-soc-own { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .pn-soclike.is-on .pc-ico { animation: none; } }
/* the feed's two tabs (For you · Following) */
.fp-soc-tabs { margin: 0 0 var(--space-3); }
.fp-soc-tabs > a { flex: 1 1 0; min-height: var(--control-md); background: var(--surface-1, var(--sunken)); color: var(--ink-2); font-weight: 700; }
.fp-soc-tabs > a.is-active, .fp-soc-tabs > a[aria-current="page"] { background: var(--accent); border-color: transparent; color: var(--on-accent); }   /* #130 */
@media (min-width: 701px) { .fp-soc-tabs > a { flex: 0 0 auto; min-width: 140px; } }
/* the empty Following tab */
.fp-soc-empty { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5) var(--space-4); }
.fp-soc-empty .pc-h-card, .fp-soc-empty .pc-sub { margin: 0; }
.fp-soc-empty__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.fp-soc-empty__h { margin: var(--space-3) 0 0; font: var(--type-label); font-weight: 700; color: var(--ink-2); }
.fp-soc-sugg { display: grid; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.fp-soc-sugg__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-m); background: var(--surface-2); }
.fp-soc-sugg__who { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-3); min-width: 0; color: var(--ink); text-decoration: none; }
.fp-soc-sugg__who > span { display: grid; min-width: 0; }
.fp-soc-sugg__who b, .fp-soc-sugg__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-soc-sugg__who small { color: var(--ink-2); font-size: 13px; }
.fp-soc-sugg__row .pn-followform, .fp-soc-sugg__row .pn-follow { flex: none; }
.fp-soc-sugg__row .pc-avatar { background: var(--surface-3); }
.fp-soc-sugg__row .pc-btn.pn-follow, .fp-soc-sugg__row .pc-btn.pn-follow:is(:hover,:focus-visible) { background: var(--surface-3); color: var(--ink); }
.fp-soc-sugg__row .pc-btn.pn-follow:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface-3)); }
.fp-soc-empty__more { margin: var(--space-2) 0 0; }
/* «My purchases» */
.fp-pur__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fp-pur__item { display: grid; gap: var(--space-3); }
.fp-pur__who { display: flex; align-items: flex-start; gap: var(--space-3); }
.fp-pur__face { flex: none; }
.fp-pur__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.fp-pur__title { margin: 0; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.fp-pur__by, .fp-pur__meta { margin: 0; color: var(--ink-2); font-size: 14px; }
.fp-pur__by a { color: var(--ink); font-weight: 600; text-decoration: none; }
.fp-pur__by a:hover { text-decoration: underline; }
.fp-pur__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.fp-pur__meta > span + span::before { content: "·"; margin-right: var(--space-2); }
.fp-pur__price { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.fp-pur__state { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.fp-pur__state--done, .fp-pur__state--received { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.fp-pur__files { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); font-size: 14px; }
.fp-pur__files .pc-ico { flex: none; color: var(--ink-2); }
.fp-pur__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fp-pur__empty { display: grid; justify-items: start; gap: var(--space-2); }
.fp-pur__empty .pc-h-card, .fp-pur__empty .pc-sub { margin: 0; }
.fp-pur__emptyico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
@media (max-width: 520px) {
  .fp-pur__who { flex-wrap: wrap; }
  .fp-pur__state { order: 3; margin-left: calc(var(--control-md, 44px) + var(--space-3)); }
  .fp-pur__acts .pc-btn { flex: 1 1 auto; justify-content: center; }
}
/* ==== end member social ==== */
/* ==== feet 09.11. FP2 creator journey (lib/creator_journey.php, templates/journey.php) and challenges (templates/challenges.php):
   the onboarding in four steps inside the wizard shell (PM 200: one card, no welcome screen, no side list), «Finish your
   setup» bar on the dashboard, Spotlight line. Member area: tonal surfaces, no card edges, mint accent. ==== */
.pn-phase--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pn-phase--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .pn-phase--6 .pn-phase__lbl { font-size: 11px; letter-spacing: 0; }
  .pn-phase--6 .pn-phase__seg:not([aria-current]) .pn-phase__lbl { opacity: .72; }
}
.fp-jr { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); box-sizing: border-box; }
.fp-jr__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: 700 13px/1.2 var(--body);
  background: var(--fp-tint); color: var(--ink); }
.fp-jr__badge svg { color: var(--accent); }
.fp-jr__h { margin: var(--space-2) 0 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.08; color: var(--ink); text-transform: none; }
.fp-jr__kick { display: flex; align-items: center; gap: var(--space-1); margin: 0; font: 600 13px/1.3 var(--body); color: var(--ink-2); }
.fp-jr__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text, var(--accent)); }
.fp-jr__lede { margin: var(--space-2) 0 0; max-width: 56ch; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.fp-jr__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0 0; color: var(--ink-2); }
/* bars (the dashboard's setup, the challenges) */
.fp-jr__bar, .fp-step__bar, .fp-ch__bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fp-jr__bar i, .fp-step__bar i, .fp-ch__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.fp-step__bar { margin-top: var(--space-2); max-width: 320px; background: var(--surface-3); }   /* #125 */
/* rows of a step */
.fp-jr__rows { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.fp-jr__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--r-m); background: var(--surface-2); }
.fp-jr__ri, .fp-jr__av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sunken); color: var(--ink-2); overflow: hidden; }
.fp-jr__av img { width: 100%; height: 100%; object-fit: cover; }
.fp-jr__row.is-done .fp-jr__ri { background: var(--fp-tint-2); color: var(--ink); }   /* #327 */
.fp-jr__rt { display: grid; gap: 2px; min-width: 0; }
.fp-jr__rt b { color: var(--ink); overflow-wrap: anywhere; }
.fp-jr__rt span { color: var(--ink-2); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.fp-jr__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.fp-jr__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }
.fp-jr__skipform { margin-right: auto; }
button.fp-jr__skip { border: 0; background: none; cursor: pointer; }
.fp-jr__share { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--r-m); background: var(--surface-2); }
.fp-jr__share .fp-jr__addr { margin-top: 0; }
.fp-jr__card .pn-specpick { margin-top: var(--space-4); padding: 0; background: none; }
/* share */
.fp-jr__addr { display: grid; gap: 2px; margin: var(--space-4) 0 0; }
.fp-jr__addrl { color: var(--ink-2); font-size: 13px; font-weight: 600; }
@media (max-width: 700px) {
  .fp-jr { padding: var(--space-4) var(--space-3) var(--space-10); }
  .fp-jr__row { grid-template-columns: 40px minmax(0, 1fr); }
  .fp-jr__ri, .fp-jr__av { width: 40px; height: 40px; }
  .fp-jr__rb, .fp-jr__clipform { grid-column: 2; justify-self: start; }
  .fp-jr__foot .fp-jr__next { flex: 1 1 100%; justify-content: center; order: -1; }
  .fp-jr__skipform { margin: 0 auto; }
}
/* dashboard: Spotlight line under the numbers */
.fp-home__spot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--r-m); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--ink); font-weight: 600; }
.fp-home__spot svg { color: var(--accent); }
/* challenges */
.fp-ch__stack { display: grid; gap: var(--space-4); }
.fp-ch__stack > .pn-panel { margin: 0; }
.fp-ch__spot { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(200px, 280px); align-items: center; gap: var(--space-3) var(--space-5); }
.fp-ch__spot.is-on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.fp-ch__spotico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); }
.fp-ch__spott .pc-h-card, .fp-ch__spott .pc-sub { margin: 0; }
.fp-ch__spots { margin: 2px 0 var(--space-1); font: 800 20px/1.25 var(--portal-display); color: var(--ink); }
.fp-ch__sum { display: grid; gap: var(--space-2); }
.fp-ch__sum b { color: var(--ink); }
.fp-ch__earned { color: var(--ink-2); font-size: 14px; }
.fp-ch__gh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fp-ch__gh .pc-h-card { margin: 0; }
.fp-ch__gn { color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.fp-ch__group > .pc-sub { margin: var(--space-1) 0 0; }
.fp-ch__list { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.fp-ch__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--r-m); background: var(--surface-2); }
.fp-ch__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sunken); color: var(--ink-2); }
.fp-ch__item.is-done .fp-ch__ico { background: var(--accent); color: var(--on-accent); }   /* #127 */
.fp-ch__t { min-width: 0; }
.fp-ch__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; font: 700 16px/1.3 var(--body) !important; color: var(--ink); }
.fp-ch__p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.fp-ch__prog { display: grid; grid-template-columns: minmax(0, 200px) auto; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.fp-ch__prog .fp-ch__bar { background: var(--surface-3); }
.fp-ch__end { display: grid; justify-items: end; gap: var(--space-1); }
.fp-ch__rew { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fp-ch__rew svg { color: var(--accent); }
.fp-ch__ok { color: var(--accent-text, var(--accent)); font-weight: 700; font-size: 14px; }
.fp-ch__new { background: var(--accent); color: var(--on-accent); }
@media (max-width: 700px) {
  .fp-ch__spot { grid-template-columns: auto minmax(0, 1fr); }
  .fp-ch__sum { grid-column: 1 / -1; }
  .fp-ch__item { grid-template-columns: 40px minmax(0, 1fr); }
  .fp-ch__ico { width: 40px; height: 40px; }
  .fp-ch__end { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: space-between; }
}
/* the second keys on a surface: a tonal mint fill (visible, never a pale white key; the pink one stays the full mint) */
:is([data-theme], :root) body.pc-root:not(.pc-guest) :is(.fp-jr, .fp-ch) .pc-btn.pc-btn--ink { background-color: var(--fp-tint); color: var(--ink); border-color: transparent; }   /* #132 */
:is([data-theme], :root) body.pc-root:not(.pc-guest) :is(.fp-jr, .fp-ch) .pc-btn.pc-btn--ink:hover { background-color: var(--fp-tint-2); }
.fp-ch__end .pc-btn, .fp-jr__rb { white-space: nowrap; }
/* ==== end FP2 creator journey + challenges ==== */
/* ==== feet fix pack 1 (09.11.): ONE design system for the member area =========================================
   Owner decisions 1–2 + audits docs/audit2-0911 (AD mobile, AD desktop "Direction"). Members only (guests stay light).
   Dark is the members' default (lib/fp2_shell.php pnew_fp2s_member_theme), "Member Modern Dark" in the mockups' teal:
   (colour audit 10.11.: chrome #070b16 · canvas #0b1020 · card #121a2b · inset #172238 · hover #1f2c47 · ink #eaf0fa / #9fb0c8 / #8494ae, electric blue
   accent. Light keeps the feet colour pass above (white chrome, mint canvas, white cards, mint-veil insets).
   The components: page title (one scale, sentence case), card (radius 24, inner 16, tonal, no edges), buttons (primary
   mint / secondary tonal / ghost; 44 and 36), ONE selected style (mint fill + on-accent, never black), switches mint when
   on, fields borderless fills with a mint focus ring, chips, badges, empty state, links. --btn-ink is never an accent. */
:where(html) body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm) {
  --r-box: 24px; --r-l: 24px; --r-m: 16px;
  --t-sel: var(--accent); --on-t-sel: var(--on-accent); --chip-sel: var(--accent); --on-chip-sel: var(--on-accent);
  --seg-on: var(--accent); --on-seg-on: var(--on-accent); --check-on: var(--accent); --on-check-on: var(--on-accent);
  --switch-on: var(--accent); --switch-knob-on: #FFFFFF; --switch-off: var(--surface-3); --switch-knob: #FFFFFF;
  --btn-ink: var(--fp-tint, color-mix(in srgb, var(--accent) 18%, var(--surface-2)));   /* colour audit #110 */ --on-btn-ink: var(--ink); --btn-ink-edge: transparent;
  --btn-ink-hover: var(--fp-tint-2, color-mix(in srgb, var(--accent) 28%, var(--surface-2))); --btn-line-bg: var(--btn-ink); --btn-line-edge: transparent;
  --t-field-edge: transparent; --t-field-edge-over: transparent; --t-card-edge: transparent; --t-card-edge-hover: transparent;
  --hline: transparent; --mline: transparent; --t-hair: transparent; --chrome-line: transparent;
}
/* ---- colour audit 10.11. (r1011 color-member #1-#75): the member colour tokens, ONE source per role -----------------------
   Electric blue: main #00b3ff, second #0062ff, deep #0a2a6b. Dark = blue-black ladder, light = white + light-blue ladder.
   --fp-tint / --fp-tint-2 = the tonal blue fill (secondary keys, tinted rows, icon discs) and its hover; the selected state is
   always the full accent. No green, cream, pink or grey-teal value in either theme. Mirror in sites/feet.yaml (member). */
/* inside wave 12.11.: a member who picks Dark gets the outside home's navy ladder (#040a1f bar · #060f2b ground · #0b1a3d cards ·
   #11234d insets · #173062 hover, inks #eef3ff / #b4c3e0 / #9aaccd, sky #6fd2ff words); the bright accent stays for fills. */
html[data-theme="dark"] body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm) {
  --md-bg: #060f2b; --md-header: #040a1f; --md-card: #0b1a3d; --md-input: #11234d; --md-hover: #173062;
  --md-ink: #eef3ff; --md-ink-2: #b4c3e0; --md-ink-3: #9aaccd; --md-glyph-off: #9aaccd; --md-on-pink: #061331;
  --md-pink-soft: rgb(0 179 255 / .14); --md-glass: rgb(4 10 31 / .55);
  --canvas: #060f2b; --bg: #060f2b; --app-ground: #060f2b; --app-head-bg: #060f2b;
  --chrome: #040a1f; --chrome-2: #040a1f; --t-chrome: #040a1f; --footer-bg: #040a1f; --lp-footer-bg: #040a1f; --prem-bg: #040a1f;
  --surface: #0b1a3d; --surface-2: #11234d; --surface-3: #173062; --sunken: #11234d; --field: #11234d; --field-in: #11234d;
  --t-band: #060f2b; --t-over: #0d1d44; --t-over-2: #132a57; --t-over-3: #193566; --dkbox: #0b1a3d; --dkbox-tile: #11234d; --bubble-in: #11234d;
  --ink: #eef3ff; --ink-2: #b4c3e0; --ink-3: #9aaccd; --glyph-off: #9aaccd; --on-chrome: #eef3ff; --on-chrome-2: #b4c3e0;
  --chrome-well: #0b1a3d; --chrome-well-hover: #11234d;
  --accent: #00b3ff; --accent-2: #0062ff; --accent-deep: #0a2a6b; --accent-press: #0098db; --accent-soft: rgb(0 179 255 / .14);
  --accent-text: #6fd2ff; --on-accent: #061331; --focus-ring: #6fd2ff;
  --fp-tint: #12306a; --fp-tint-2: #183b80;
  --t-tint: #11234d; --t-tint-2: #173062;
  --success: #3ddc97; --on-success: #061024; --online: #3ddc97; --live: #3ddc97; --scard-online: #3ddc97;
  --danger: #ff5d57; --on-danger: #061331; --danger-soft: color-mix(in srgb, #ff5d57 12%, #0b1a3d); --warning: #f2b84b;
  --glass: rgb(4 10 31 / .55); --scrim: rgb(2 6 20 / .7); --dk-veil: rgb(2 6 20 / .6);
  --scard-glass: rgb(4 10 31 / .55); --scard-glass-hover: rgb(4 10 31 / .7); --chip-glass: rgb(4 10 31 / .55); --glass-key: rgb(4 10 31 / .55);
  --scard-ink: #FFFFFF; --scard-ink-2: rgb(255 255 255 / .82); --scard-ink-3: rgb(255 255 255 / .62); --cream: #FFFFFF;
  --sh-pink: 0 6px 18px rgb(0 179 255 / .22); --sh-pink-hover: 0 8px 22px rgb(0 179 255 / .28);
  --art-glow: radial-gradient(closest-side, rgb(0 179 255 / .18), rgb(0 179 255 / 0)); --alt-spot-2: rgb(0 179 255 / .16); --hero-blush: rgb(0 179 255 / .12);
  --photo-tint: transparent;
  --av-g0: #11234d; --av-g1: #173062; --av-g2: #11234d; --av-g3: #173062; --av-g4: #11234d; --av-g5: #173062; --av-g6: #11234d; --av-g7: #173062;
  --sh-chrome: none; --card-rim: none;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm) {
    --md-bg: #060f2b; --md-header: #040a1f; --md-card: #0b1a3d; --md-input: #11234d; --md-hover: #173062;
    --md-ink: #eef3ff; --md-ink-2: #b4c3e0; --md-ink-3: #9aaccd; --md-glyph-off: #9aaccd; --md-on-pink: #061331;
    --md-pink-soft: rgb(0 179 255 / .14); --md-glass: rgb(4 10 31 / .55);
    --canvas: #060f2b; --bg: #060f2b; --app-ground: #060f2b; --app-head-bg: #060f2b;
    --chrome: #040a1f; --chrome-2: #040a1f; --t-chrome: #040a1f; --footer-bg: #040a1f; --prem-bg: #040a1f;
    --surface: #0b1a3d; --surface-2: #11234d; --surface-3: #173062; --sunken: #11234d; --field: #11234d; --field-in: #11234d;
    --t-band: #060f2b; --t-over: #0d1d44; --t-over-2: #132a57; --t-over-3: #193566; --bubble-in: #11234d;
    --ink: #eef3ff; --ink-2: #b4c3e0; --ink-3: #9aaccd; --glyph-off: #9aaccd; --on-chrome: #eef3ff; --on-chrome-2: #b4c3e0;
    --chrome-well: #0b1a3d; --chrome-well-hover: #11234d;
    --accent: #00b3ff; --accent-2: #0062ff; --accent-deep: #0a2a6b; --accent-press: #0098db; --accent-soft: rgb(0 179 255 / .14);
    --accent-text: #6fd2ff; --on-accent: #061331; --focus-ring: #6fd2ff; --fp-tint: #12306a; --fp-tint-2: #183b80;
    --t-tint: #11234d; --t-tint-2: #173062;
    --success: #3ddc97; --on-success: #061024; --online: #3ddc97; --live: #3ddc97; --scard-online: #3ddc97;
    --danger: #ff5d57; --on-danger: #061331; --warning: #f2b84b;
    --glass: rgb(4 10 31 / .55); --scrim: rgb(2 6 20 / .7); --scard-glass: rgb(4 10 31 / .55); --chip-glass: rgb(4 10 31 / .55);
    --scard-ink: #FFFFFF; --scard-ink-2: rgb(255 255 255 / .82); --cream: #FFFFFF; --photo-tint: transparent;
    --sh-pink: 0 6px 18px rgb(0 179 255 / .22); --card-rim: none;
  }
}
/* ---- inside wave 12.11. (owner «source of truth muss farblich die aussen seite sein», docs/fp2/inside-12-11/theme.md): the
   light member block IS the outside reference home's palette (assets/css/fp-ref.css --fr-*): the day ground #f4f7fe, white
   cards, the ink #0a1430 / #55617c, the blue #1a5cff keys (white text 5.2:1), the deep blue #0a43d6 for blue words (7.5:1),
   the tint #eaf1ff for second keys and insets, sky #6fd2ff and mint as small accents only. The shell (top bar, sidebar, tab
   bar, footer) is light since the owner's 12.11. afternoon note (fp-system.css §11). The --fr-* names are set here too so member sheets can use them. */
html[data-theme="light"] body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm) {
  --fr-navy: #040a1f; --fr-navy-2: #071537; --fr-navy-3: #0b2058; --fr-navy-4: #12307a;
  --fr-blue: #1a5cff; --fr-blue-2: #3b7bff; --fr-blue-3: #0a43d6; --fr-sky: #6fd2ff; --fr-sky-2: #a8e6ff; --fr-mint: #19c39a; --fr-mint-ink: #08795a;
  --fr-day: #f4f7fe; --fr-day-2: #e9f0fd; --fr-card: #FFFFFF; --fr-tint: #eaf1ff; --fr-tint-2: #d9e6ff;
  --fr-ink: #0a1430; --fr-ink-2: #55617c; --fr-ink-3: #5e6a85;
  --fr-shadow: 0 1px 2px rgb(16 32 80 / .05), 0 12px 32px -10px rgb(20 56 150 / .18);
  --fr-key: linear-gradient(180deg, #4a88ff 0%, #1a5cff 55%, #1450ef 100%);
  --canvas: #f4f7fe; --bg: #f4f7fe; --app-ground: #f4f7fe; --app-head-bg: #f4f7fe; --t-band: #f4f7fe;
  --chrome: #FFFFFF; --chrome-2: #FFFFFF; --t-chrome: #FFFFFF; --footer-bg: #f4f7fe; --prem-bg: #0b2058;
  --on-chrome: #0a1430; --on-chrome-2: #55617c; --chrome-well: #eef1f6; --chrome-well-hover: #e3e8f1;
  --surface: #FFFFFF; --surface-2: #eef1f6; --surface-3: #e3e8f1; --sunken: #f1f3f8; --field: #eef1f6; --field-in: #eef1f6; --fp-field-bg: #eef1f6; --fp-field-bg-h: #e6eaf2;
  --duck: #f4f7fe; --duck-2: #e9f0fd; --duck-3: #d9e6ff; --duck-egg: #e9f0fd;
  --t-over: #FFFFFF; --t-over-2: #eef1f6; --t-over-3: #e3e8f1; --bubble-in: #FFFFFF;
  --ink: #0a1430; --ink-2: #55617c; --ink-3: #5e6a85; --glyph-off: #5e6a85; --rule-ink: #0a1430; --av-ink: #0a1430; --obj-ink: #0a1430; --btn-edge-ink: #0b2058;
  --accent: #1a5cff; --accent-2: #6fd2ff; --accent-deep: #0b2058; --accent-press: #0a43d6; --accent-soft: #eaf1ff;
  --accent-text: #0a1430; --on-accent: #FFFFFF; --focus-ring: #1a5cff;
  --fp-tint: #eef1f6; --fp-tint-2: #e3e8f1;
  --t-tint: #eef1f6; --t-tint-2: #e3e8f1;
  --success: #08795a; --online: #19c39a; --live: #19c39a; --scard-online: #19c39a; --scard-online-halo: 0 0 0 3px rgb(25 195 154 / .25);
  --danger: #b8342a; --on-danger: #FFFFFF; --danger-soft: #fdeceb;
  --scrim: rgb(4 10 31 / .55); --glass: rgb(4 10 31 / .36); --glass-strong: rgb(4 10 31 / .6); --glass-key: rgb(4 10 31 / .36);
  --chip-glass: rgb(4 10 31 / .42); --scard-glass: rgb(4 10 31 / .32); --scard-glass-hover: rgb(4 10 31 / .52); --dk-veil: rgb(4 10 31 / .6);
  --scard-tshadow: 0 1px 2px rgb(4 10 31 / .4);
  --card-cap-scrim: linear-gradient(180deg, transparent 0%, rgb(4 10 31 / .22) 60%, rgb(4 10 31 / .3) 100%);
  --card-cap-scrim-strong: linear-gradient(180deg, transparent 0%, rgb(4 10 31 / .5) 45%, rgb(4 10 31 / .8) 100%);
  --card-overlay: linear-gradient(to bottom, transparent 35%, rgb(4 10 31 / .12) 55%, rgb(4 10 31 / .8) 100%);
  --muted-dk: rgb(238 243 255 / .78); --stamp-fill: rgb(244 247 254 / .55); --mt-light: rgb(244 247 254 / .85); --tape: rgb(244 247 254 / .85);
  --bg-veil: rgb(244 247 254 / .92); --do-top-veil: rgb(244 247 254 / .92);
  --sh-pink: 0 12px 28px -8px rgb(26 92 255 / .55); --sh-pink-hover: 0 16px 34px -8px rgb(26 92 255 / .7); --lp-arch-glow: 0 40px 90px -30px rgb(26 92 255 / .3);
  --sh-float: 0 2px 4px rgb(16 32 80 / .05), 0 24px 56px -16px rgb(20 56 150 / .28); --sh-sheet: 0 -16px 48px rgb(16 32 80 / .16); --shadow-e1: 0 24px 56px -16px rgb(20 56 150 / .28);
  --sh-card: 0 1px 2px rgb(16 32 80 / .05), 0 12px 32px -10px rgb(20 56 150 / .18); --sh-card-hover: 0 2px 4px rgb(16 32 80 / .05), 0 24px 56px -16px rgb(20 56 150 / .28);
  --sh-floating: 0 18px 48px rgb(16 32 80 / .14); --sh-lift: 0 10px 24px rgb(16 32 80 / .1);
  --photo-tint: transparent; --photo-shade: radial-gradient(125% 100% at 50% 40%, #FFFFFF 40%, #eaf1ff 100%); --photo-foot: linear-gradient(180deg, #FFFFFF 58%, #eaf1ff 100%);
  --av-g0: #eaf1ff; --av-g1: #d9e6ff; --av-g2: #e9f0fd; --av-g3: #d9e6ff; --av-g4: #eaf1ff; --av-g5: #d9e6ff; --av-g6: #e9f0fd; --av-g7: #0b2058;
  --switch-off: #c9d6ee;
  /* the colour pass primitives that member components still read (photo placeholders, the old «pink» accent aliases) */
  --ph-a: #eaf1ff; --ph-b: #f4f7fe; --ph-ink: #55617c; --ph-arch: #6fd2ff; --ph-media: #e9f0fd; --ph-media-2: #eaf1ff; --ph-text: #55617c;
  --pink: #1a5cff; --pink-press: #0a43d6; --pink-soft: #eaf1ff; --pink-ink: #0a43d6; --pink-text: #0a43d6; --pink-glyph: #0a43d6; --obj-muted: #eaf1ff; --av-ink-light: #eaf1ff;
  --anthracite: #0a1430; --card-dk: #0a1430; --on-dark: #eef3ff; --muted-lt: #55617c; --obj-ink-2: #55617c; --obj-ink-3: #0a1430; --obj-muted-2: #55617c; --dk-ink-2: #55617c;
  --lp-num-ink: #0a43d6; --obj-alarm: #0a43d6; --star: #1a5cff; --star-edge: #0a43d6; --hand-ink: #1a5cff; --ring-story: #6fd2ff; --peg: #6fd2ff; --peg-2: #1a5cff; --blush: #6fd2ff; --on-blush: #0b2058;
  --btn-pink-grad: linear-gradient(180deg, #4a88ff 0%, #1a5cff 55%, #1450ef 100%);
  --art-glow: radial-gradient(closest-side, rgb(26 92 255 / .16), rgb(26 92 255 / .05)); --hero-blush: rgb(111 210 255 / .22); --alt-spot: rgb(111 210 255 / .32); --alt-spot-2: rgb(26 92 255 / .16);
  --prem-metal: linear-gradient(135deg, #6fd2ff 0%, #eaf1ff 45%, #1a5cff 100%); --prem-metal-ink: #0b2058; --prem-metal-dk: #0b2058; --prem-metal-dk-ink: #eaf1ff; --prem-metal-ring: inset 0 0 0 1px #1a5cff;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm) {
    --canvas: #f4f7fe; --bg: #f4f7fe; --chrome: #FFFFFF; --on-chrome: #0a1430; --on-chrome-2: #55617c;
    --surface: #FFFFFF; --surface-2: #eaf1ff; --surface-3: #d9e6ff; --sunken: #e9f0fd; --field: #FFFFFF; --t-over: #FFFFFF; --t-over-2: #eaf1ff; --t-over-3: #d9e6ff;
    --ink: #0a1430; --ink-2: #55617c; --ink-3: #5e6a85; --accent: #1a5cff; --accent-text: #0a43d6; --on-accent: #FFFFFF; --focus-ring: #1a5cff;
    --fp-tint: #eaf1ff; --fp-tint-2: #d9e6ff; --t-tint: #eaf1ff; --t-tint-2: #d9e6ff; --scrim: rgb(4 10 31 / .55); --glass: rgb(4 10 31 / .36);
  }
}
/* the shell's own tokens (top bar, tab bar, footer) on the navy: fp-system.css §11 sets them, so the light chrome rule of the
   colour pass (white bars) is gone */

/* -- page title: one scale, Nunito 800, sentence case; an icon in a hub head is gone (all heads alike, audit AD m56) -- */
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pn-apphead h1, .fp-hub__h1, .pn-apphead .pc-h1, .fp-req__h1) {
  font: 800 26px/1.15 var(--portal-display) !important; letter-spacing: -.015em !important; text-transform: none !important; color: var(--ink); }
@media (min-width: 701px) {
  body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pn-apphead h1, .fp-hub__h1, .pn-apphead .pc-h1, .fp-req__h1) { font-size: 32px !important; line-height: 1.2 !important; }
}
body.pc-root:not(.pc-guest):not(.pn-adm) .fp-hub__h1 > .pc-ico { display: none; }
/* card heads: Nunito 800 20/26 */
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-h-card, .fp-hub__h2, .pn-panel > .pc-sechead h2, .pn-panel > h2) {
  font: 800 20px/1.3 var(--portal-display) !important; letter-spacing: -.01em; text-transform: none; color: var(--ink); }

/* -- cards and insets: radius 24 / 16, tonal, no edges, no shadow -- */
body.pc-root:not(.pc-guest):not(.pn-adm) .pn-panel { border: 0; border-radius: 24px; box-shadow: none; }
body.pc-root:not(.pc-guest):not(.pn-adm) .pn-panel .pc-card:not(.pn-prodcard) { border-radius: 16px; }

/* -- buttons: primary mint, secondary tonal mint, ghost text; md 44 / sm 36 -- */
:where(body.pc-root:not(.pc-guest):not(.pn-adm)) .pc-btn { min-height: 44px; border-color: transparent; }
:where(body.pc-root:not(.pc-guest):not(.pn-adm)) .pc-btn.pc-btn--sm { min-height: 36px; }
:where(body.pc-root:not(.pc-guest):not(.pn-adm)) .pc-btn:where(:not(.pc-btn--primary, .pc-btn--ghost, .pc-btn--quiet, .pc-btn--danger, .pc-btn--premium, .pn-header__pay)) {
  background-color: var(--btn-ink); color: var(--ink); }
:where(body.pc-root:not(.pc-guest):not(.pn-adm)) .pc-btn:where(:not(.pc-btn--primary, .pc-btn--ghost, .pc-btn--quiet, .pc-btn--danger, .pc-btn--premium, .pn-header__pay)):hover {
  background-color: var(--btn-ink-hover); }
:where(body.pc-root:not(.pc-guest):not(.pn-adm)) .pc-btn.pc-btn--primary { background-color: var(--accent); color: var(--on-accent); }
body.pc-root:not(.pc-guest):not(.pn-adm) .pc-btn:is(:disabled, [aria-disabled="true"]) {
  background-color: var(--surface-3); color: var(--ink-2); cursor: not-allowed; box-shadow: none; transform: none; opacity: 1; }

/* -- ONE selected style: segments, tabs, chips, pills = mint fill + on-accent (never the black ink); unselected = inset -- */
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg, .pc-tabs) > :is(a, button, label):not(.is-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]):not(:has(input:checked)) {
  background: var(--surface-2); color: var(--ink); border-color: transparent; }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg, .pc-tabs) > :is(.is-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]),
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg) > label:has(input:checked),
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-tab.is-active, .pc-tab:has(input:checked)),
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-chip, .pc-chip--sm):is(.is-selected, [aria-current], [aria-pressed="true"], :has(input:checked)),
body.pc-root:not(.pc-guest):not(.pn-adm) .fp-soc-tabs > :is(a.is-active, a[aria-current="page"]) {
  background: var(--accent); color: var(--on-accent); border-color: transparent; }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg) > :is(.is-active, [aria-current="page"], [aria-pressed="true"]) :is(.pn-chipn, .pc-count) {
  background: color-mix(in srgb, var(--on-accent) 85%, transparent); color: var(--accent); }

/* the underline tab rows (Sellers · Listings · Videos, search tabs) become the same pill segments (audit AD m12, d40) */
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg, .pc-tabs) { gap: 8px; }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg, .pc-tabs) > :is(a, button, label) { min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-weight: 700; }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg, .pc-tabs) > :is(a, button, label):not(.is-active, [aria-current="page"], [aria-current="true"], [aria-selected="true"], [aria-pressed="true"]):hover { background: var(--surface-3); }

/* -- switches: mint when on, the inset when off, a white knob -- */
body.pc-root:not(.pc-guest):not(.pn-adm) .pc-switch { background: var(--surface-3); border-color: transparent; }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-switch:checked, button.pc-switch.is-on, button.pc-switch[aria-checked="true"], [aria-pressed="true"] > i.pc-switch) { background: var(--accent); border-color: transparent; }

/* -- fields: one borderless fill, a 2 px mint focus ring; textareas grow, no grip on phones -- */
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-input, .pc-select, select.pc-input, textarea.pc-input) { border-color: transparent; background-color: var(--field, var(--surface-2)); box-shadow: none; }
body.pc-root:not(.pc-guest):not(.pn-adm) .pn-panel :is(.pc-input, .pc-select) { background-color: var(--surface-2); }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-input, .pc-select):focus-visible, body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-input, .pc-select):focus {
  outline: 0; box-shadow: 0 0 0 2px var(--focus-ring, var(--accent)); border-color: transparent; }
body.pc-root:not(.pc-guest):not(.pn-adm) select.pc-input { text-overflow: ellipsis; }
@media (max-width: 700px) { body.pc-root:not(.pc-guest):not(.pn-adm) textarea.pc-input { resize: none; } }

/* -- badges: one look, h22, 12/700, accent tint -- */
:where(body.pc-root:not(.pc-guest):not(.pn-adm)) .pc-badge:where(:not(.pc-badge--premium)) { min-height: 22px; padding: 0 8px; border-radius: 999px; font: 700 12px/1 var(--body);
  letter-spacing: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text, var(--ink)); }
.fp-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: 999px; font: 700 12px/1 var(--body);
  background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.fp-badge--accent { background: var(--accent); color: var(--on-accent); }

/* -- settings: no rules between rows, rows breathe (audit AD m17 / m18, d61) -- */
body.pc-root:not(.pc-guest):not(.pn-adm) .pn-setnav .pn-row { padding: 12px 16px; border-radius: 16px; }
body.pc-root:not(.pc-guest):not(.pn-adm) .pn-setnav .pn-rows { display: grid; gap: 4px; }
body.pc-root:not(.pc-guest):not(.pn-adm) .pn-setnav .pn-row:hover { background: var(--surface-2); }

/* -- the floating save bar of the editors: solid, full width of the column, above the home indicator; a focused field
      scrolls clear of it (owner decision 7, audit AD d47) -- */
body.pc-root:not(.pc-guest):not(.pn-adm) .pc-actionbar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
  padding-bottom: calc(var(--space-3, 12px) + env(safe-area-inset-bottom)); box-shadow: 0 -12px 28px -18px rgb(0 0 0 / .45); }
html:has(body.pc-root:not(.pc-guest) .pc-actionbar) { scroll-padding-bottom: 120px; }
body.pc-root:not(.pc-guest):not(.pn-adm) form:has(> .pc-actionbar) { padding-bottom: 8px; }

/* -- tap targets: hearts and follow keys 44 px (owner decision 8, audit AD m49) -- */
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pn-soclike, .pn-follow.pc-iconbtn) { min-width: 44px; min-height: 44px; }
body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-card__fav, .pc-card .pc-card__fav) { width: 40px; height: 40px; }   /* a 40 px key on the card ... */
body.pc-root:not(.pc-guest):not(.pn-adm) .pc-card .pc-card__fav::after { inset: -2px; }   /* ... in a 44 px hit area */

/* -- one empty state (audit AD m24, d69): centred, a 52 px mint circle, a title, a line, one primary key -- */
.fp-empty { display: grid; justify-items: center; gap: 10px; padding: 32px 20px; text-align: center; }
.fp-empty__ico, body.pc-root:not(.pc-guest) :is(.fp-cs__emptyico, .fp-pur__emptyico, .fp-soc-empty__ico, .fp-act__emptyico) {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--fp-tint); color: var(--accent-text, var(--accent)); }   /* #123 */
.fp-empty__h { margin: 4px 0 0; font: 800 18px/1.3 var(--portal-display) !important; color: var(--ink); text-transform: none; }
.fp-empty__p { margin: 0; max-width: 46ch; font: 400 15px/1.5 var(--body); color: var(--ink-2); }
.fp-empty .pc-btn { margin-top: 6px; }

/* -- links: accent text, 600, an arrow, no rule under it -- */
.fp-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text, var(--accent)); font-weight: 600; text-decoration: none; }
.fp-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* -- an info note: no fill, an icon (audit AD d32) -- */
.fp-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 4px 2px; color: var(--ink-2); font: 400 15px/1.5 var(--body); }
.fp-note > .pc-ico { flex: none; margin-top: 2px; color: var(--accent-text, var(--accent)); }
.fp-note b { color: var(--ink); }

/* -- progress: one track (inset), the mint fill (audit AD m63) -- */
body.pc-root:not(.pc-guest) :is(.fp-jr__bar, .fp-step__bar, .fp-ch__bar, .fp-ch__prog .fp-ch__bar) { background: var(--surface-3); }

/* -- onboarding: step labels readable (owner decision 8, audit AD m33), the current step and its number mint -- */
:is(.pn-phase--4, .pn-phase--6) .pn-phase__lbl { font-size: 13px; opacity: 1; color: var(--ink-2); }
:is(.pn-phase--4, .pn-phase--6) .pn-phase__seg[aria-current] .pn-phase__lbl { color: var(--ink); font-weight: 700; }
@media (max-width: 520px) {
  .pn-phase--6 .pn-phase__lbl { font-size: 13px; letter-spacing: 0; }
  .pn-phase--6 .pn-phase__seg:not([aria-current]) .pn-phase__lbl { opacity: 1; }
}
/* specialties: the picked chip mint, never the black ink (audit AD m10, d54) */
.pn-specopt:has(input:checked) .pn-specopt__chip { background: var(--accent); color: var(--on-accent); }
.pn-specopt:has(input:checked) .pn-specopt__tick { background: var(--on-accent); color: var(--accent); }

/* -- the plans page (templates/fp2_plans.php, owner decision 5) -- */
.fp-plans { display: grid; gap: 20px; padding-bottom: 40px; }
.fp-plans__grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .fp-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
@media (min-width: 860px) { .fp-plans__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* owner 11.11.: Free + Premium only (no Creator Pro card) */
.fp-plan-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; margin: 0; }
.fp-plan-card.is-pop { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.fp-plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fp-plan-card__h { margin: 0; font: 800 22px/1.2 var(--portal-display) !important; color: var(--ink); text-transform: none; }
.fp-plan-card__price { margin: 0; color: var(--ink-2); font: 500 14px/1.3 var(--body); }
.fp-plan-card__price b { font: 800 32px/1 var(--portal-display); color: var(--ink); letter-spacing: -.02em; margin-right: 4px; }
.fp-plan-card__p { margin: 0; color: var(--ink-2); font: 400 15px/1.45 var(--body); }
.fp-plan-card__list { display: grid; gap: 8px; align-content: start; margin: 4px 0 0; padding: 0; list-style: none; }
.fp-plan-card__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font: 500 15px/1.4 var(--body); }
.fp-plan-card__list .pc-ico { flex: none; margin-top: 2px; color: var(--accent-text, var(--accent)); }
.fp-plan-card__btn { width: 100%; justify-content: center; margin-top: 8px; }
.fp-plans__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; color: var(--ink-2); }
/* ==== end fix pack 1 design system ==== */

/* feet audit 500 (buyer #4): the guest burger panel was see-through (--surface-2 is a 25 % mint veil in the light look) — the veil on the solid bar colour */
html[data-theme] body.pc-root.pc-guest.pk .pc-burger__menu { background: linear-gradient(var(--surface-2), var(--surface-2)), var(--chrome); }

/* ==== audit 500 #2, guest chrome (10.11., r1011/q-guest.md #36–#50) ============================================================ */
/* #36: the open burger panel is a solid sheet on every guest page (it was the 8 % header well, see-through over the hero) */
html[data-theme="light"] body.pc-root.pc-guest .pc-burger[open] .pc-burger__menu { background: #FFFFFF; }
html[data-theme="dark"] body.pc-root.pc-guest .pc-burger[open] .pc-burger__menu { background: #121a2b; }
/* #37: a scrim over the page beside the open sheet */
body.pc-root.pc-guest .pc-burger[open]::before { content: ""; position: fixed; inset: calc(var(--header-h, 76px) + env(safe-area-inset-top)) 0 0 0; z-index: calc(var(--z-nav, 50) - 1);
  background: rgb(6 14 34 / .45); pointer-events: none; }
/* #38 / #42: a language picker with one language is no choice (feet is English only) */
body.pc-root .pc-burger__lang:not(:has(li + li)), body.pc-root .pn-gfooter__bar.pn-lang:not(:has(li + li)) { display: none; }
/* #39: the header's «Start selling» steps aside while the menu (which carries it) is open */
body.pc-root.pc-guest .pc-header:has(.pc-burger[open]) .pn-header__end > .pn-header__join,
body.pc-root.pc-guest .pc-header:has(.pc-burger[open]) .pc-header__icons > .pn-header__join { visibility: hidden; }
/* #40: «Log in» stays in the bar on tablets (it lived only in the burger under 1100 px) */
@media (min-width: 600px) {
  body.pc-root.pc-guest .pc-header .pc-header__icons > a.pc-btn--ghost.pc-hide-sm[href*="/account/login"] { display: inline-flex; }
}
/* #41: the doors first, the theme key last */
body.pc-root.pc-guest .pc-header .pc-header__icons > .pn-themebtn { order: 9; }
body.pc-root.pc-guest .pc-header .pc-header__icons > .pc-burger { order: 10; }
/* #46: footer links a 24 px target on desktop (WCAG 2.2 target size) */
@media (min-width: 701px) {
  body.pc-root .pn-gfooter__col a { display: inline-flex; align-items: center; min-height: 24px; }
}
/* #49: breadcrumb links a 24 px target */
body.pc-root .pn-crumbs a { display: inline-flex; align-items: center; min-height: 24px; }
/* #30 / #50: the skip link is a 44 px key on guest pages too */
body.pc-root .pc-skip { min-height: 44px; display: inline-flex; align-items: center; }
/* ==== end audit 500 #2 guest chrome ==== */

/* ==== audit 500 #2, guest pages (10.11., r1011/q-guest.md) ==================================================================== */
/* #137–#141: the 404's creators row (partials/nf_people.php): round photos with the name, its own block (not the link row) */
.pn-nf__people { max-width: 760px; margin: var(--space-10, 40px) auto var(--space-4, 16px); padding: 0 var(--gutter, 16px); text-align: center; }
.pn-nf__peopleh { margin: 0 0 18px; font: 800 20px/1.2 var(--portal-display, var(--font-display)) !important; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.pn-nf__peoplelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 701px) { .pn-nf__peoplelist { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pn-nf__person { display: grid; justify-items: center; gap: 8px; min-height: 44px; color: var(--ink); text-decoration: none; }
.pn-nf__ph { display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--surface-2, #e3f4ff); }
.pn-nf__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pn-nf__pname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--font-sans); }
.pn-nf__person:hover .pn-nf__pname { color: var(--accent-text, #0050d0); text-decoration: underline; }
.pn-nf__person:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 4px; border-radius: 12px; }
/* #92: the follow / save heart on guest cards is a 44 px target (the glyph stays its size) */
body.pc-root.pc-guest .pc-card__fav::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* #93: the country line on creator cards at a readable size */
body.pc-root.pc-guest .pc-scard__meta { font-size: 12.5px; }
/* #101: the content heroes' «Sound on» key; #102: the in-page chips on phones — 44 px targets */
body.pc-root.pc-guest .pk-chero__snd { min-height: 44px; }
@media (max-width: 700px) { body.pc-root.pc-guest a.pk-chip { min-height: 44px; } }
/* #117: the legal pages' contents links */
body.pc-root .pn-lpm-toc a { display: flex; align-items: center; min-height: 44px; }
/* #125: the password «Show» key; #126: the consent check is a rounded square (a round check read as a radio button) */
body.pc-root .pn-pwtoggle { min-height: 44px; min-width: 64px; }
body.pc-root:is(.pc-guest, .pn-joinbody) input.pc-check[type="checkbox"] { width: 22px; height: 22px; border-radius: 6px; }
/* #132: her intro clip block leaves when the file does not load (bio_feet.php onerror) */
.fp-cp__clip[hidden] { display: none !important; }
/* #134 / #135: her page's footer key and wordmark are 44 px targets */
.fp-cp__create { min-height: 44px; }
.fp-cp__logo { min-height: 44px; display: inline-flex; align-items: center; }
/* #136: a lone fact tile spans the card */
.fp-cp__facts > div:only-child { grid-column: 1 / -1; }
/* ==== end audit 500 #2 guest pages ==== */
/* #127: the slim footer row on the join / login / password pages (partials/footer.php pn-gfooter--slim), every width */
body.pc-root .pc-footer.pn-gfooter--slim { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 20px var(--gutter, 16px) calc(24px + env(safe-area-inset-bottom)); }
body.pc-root .pn-gfooter--slim .pn-gfooter__row ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
body.pc-root .pn-gfooter--slim .pn-gfooter__row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font: 500 14px/1.2 var(--font-sans); text-decoration: none; }
body.pc-root .pn-gfooter--slim .pn-gfooter__row a:hover { color: var(--ink); text-decoration: underline; }
/* buyer team request (audit 500 #2): her page for guests (body.fp-cp-body) — the online dot in the green online token (was the blue
   accent), and her avatar never stretched (a non-square picture is cropped, not squeezed) */
body.pc-root.fp-cp-body .fp-cp__dot { background: var(--online, #0a7f55); }
body.pc-root.fp-cp-body .fp-cp__avatar img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }

/* ==== q2-mobile (audit 500 #2 round 2, 10.11.; scratchpad r1011/q2-mobile.md): guest pages on phones and touch screens ==== */
/* G1: footer links were 40 px (columns) and 36 px (Terms · Privacy · Legal notice · Copyright) on phones, 24 px on a phone on
   its side; G2: the column heads (Browse · Guides · Help) are 16 px tall above 700 px; every one is 44 px on touch */
@media (pointer: coarse) {
  body.pc-root .pn-gfooter li > a { min-height: 44px; display: inline-flex; align-items: center; }
  body.pc-root .pn-gfooter summary.pn-gfooter__h { display: flex; align-items: center; min-height: 44px; margin-block: -14px; }
  /* G3: the FAQ questions of the content pages were 24 px rows above 700 px */
  body.pc-root .pks-faq > summary { min-height: 44px; align-items: center; }
  /* G4: the in-page chips (pk-chip) and every small key of the guest pages (Yes / No under a help article, «Create your own
     page», «Sign up free», the back chips) were 36 px on a phone on its side and on tablets */
  body.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body) :is(a.pk-chip, .pc-btn--sm) { min-height: 44px; }
  /* G4b: the members' segment pills (Creators filter Premium · All · Recently active · New, chats and settings tabs) were 40 px */
  body.pc-root:not(.pc-guest):not(.pn-adm) :is(.pc-seg, .pn-seg, .pc-tabs) > :is(a, button, label) { min-height: 44px; }
}
/* G4c: the breadcrumb links were 24 px above 700 px on touch (the 44 px rule stops at 700 px); same layout */
@media (pointer: coarse) and (min-width: 701px) {
  body.pc-root .pn-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
}
/* G5: the wordmark link was a 118 x 30 target in the guest header, the join / login bar and the journey bar */
body.pc-root:is(.pc-guest, .pn-joinbody) a.pc-logo, .pc-header.pn-wizbar .pc-logo.pn-wizbar__logo { min-height: 44px; display: inline-flex; align-items: center; }
/* G6: on a phone on its side the content pages opened on a full screen of photo (the hero picture is 40 vw = 338 px high)
   and the sign-up pages on a full screen of the side picture before the form */
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  .pk-site.pc-guest *:has(> .pk-chero) { --chero-h: 150px; padding-top: calc(var(--chero-h) - 16px); }
  body.pc-root .pkj-x__stage { display: none; }
}
/* G7: the notch side in landscape (viewport-fit=cover): the guest page, its header and footer keep clear of it */
@media (orientation: landscape) and (max-width: 1100px) {
  body.pc-root.pc-guest > :is(.pn-main, .pc-footer) { margin-left: env(safe-area-inset-left, 0px); margin-right: env(safe-area-inset-right, 0px); }
}
/* ==== end q2-mobile guest ==== */

/* ==== m500 shell + guest (Mobile 500, 10.11. evening; scratchpad m500/shell.md): the app feel on phones ======================== */
/* #20: the page's scheme follows its theme (pnew-plastik-site sets html[data-plk] dark on light pages too: dark native selects,
   pickers, scrollbars and autofill on a light page) */
html[data-plk][data-theme="light"] { color-scheme: light; }
html[data-plk][data-theme="dark"] { color-scheme: dark; }
/* #59: a short page fits the visible screen on every feet page (100vh is the large viewport on iOS) */
body.pc-root { min-height: 100dvh; }
/* #31: no double-tap zoom on a control (two quick taps on Follow / Show more / a tab zoomed the page on iOS) */
:where(a, button, summary, label, input, select, textarea, [role="button"]) { touch-action: manipulation; }
/* #38–#40: keys, chips and the chrome never select their words, open the link preview or drag their picture on a long press */
:where(.pc-btn, .pc-chip, .pk-chip, .fp-key, .pc-iconbtn, .pn-pwtoggle, .pkj-role__t, .pc-burger > summary) { -webkit-user-select: none; user-select: none; }
:where(.pc-header, .pc-tabbar, .fp-menu, .pc-burger__menu, .fp-cp__bar, .fn-reqbar) { -webkit-touch-callout: none; }
:where(.pc-header, .pc-tabbar, .fp-menu, .pc-burger__menu, .fp-cp__bar) :is(a, button, img) { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* #35 / #36: a press state under the finger (the tap highlight is off everywhere): keys shrink a little and darken, rows tint */
@media (hover: none) {
  body.pc-root :is(.fp-key, .pk-chip, .pc-btn, .pc-iconbtn, .pc-burger > summary, .pkj-role__t):not(:disabled, [aria-disabled="true"]):active { filter: brightness(.92); }
  body.pc-root :is(.pc-burger__menu > a, .pc-burger__theme, .pn-gfooter a, .pc-footer a, .fp-cp__legal a):active { background-color: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  body.pc-root :is(.fp-key, .pk-chip, .pc-btn, .pc-iconbtn, .pc-burger > summary, .pkj-role__t):not(:disabled, [aria-disabled="true"]):active { transform: scale(.97); transition: transform .08s ease, filter .08s ease; }
}
/* #72 / #37: hover tints and lifts only for a pointer that hovers (iOS keeps :hover after a tap: the row stayed tinted, the
   join card stayed lifted) */
@media (hover: none) {
  html[data-plk] body.pc-root.pk-site .pc-burger__menu > a:hover:not([aria-current]) { background: transparent; }
  .pk-site .pkj-role__t:hover { transform: none; }
  .pk-site .pkj-role__t:not([aria-current]):hover { background: var(--surface-2); }
}

/* ---- guest chrome ---- */
/* #64 / #65: the guest header is 60 px on phones (it was 76: 11–13 % of the screen) and 56 px on a phone on its side; the
   variable lives on the root so the scroll padding, the menu's scrim and the sticky parts read the same height */
@media (max-width: 700px) {
  html:has(> body.pc-root:is(.pc-guest, .pn-joinbody)) { --header-h: 60px; --hdr-h: 60px; }
  html[data-theme][data-theme] body.pc-root:is(.pc-guest, .pn-joinbody):not(.pn-adm):not(.pn-x) { --header-h: 60px !important; --hdr-h: 60px !important; }   /* the look sets 76 px per theme with stronger selectors */
}
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  html:has(> body.pc-root:is(.pc-guest, .pn-joinbody)) { --header-h: 56px; --hdr-h: 56px; }
  html[data-theme][data-theme] body.pc-root:is(.pc-guest, .pn-joinbody):not(.pn-adm):not(.pn-x) { --header-h: 56px !important; --hdr-h: 56px !important; }
}
/* #67: at 320 px the header ran to 351 px (the menu key cut by 31 px): a smaller wordmark and a tighter key there */
@media (max-width: 359px) {
  body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header .pc-logo { font-size: 24px !important; }
  body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header { gap: 8px; }
  body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header :is(.pn-header__join, .pn-header__fan, .pn-joinnav__login) { padding-inline: 12px; }
}
/* #73: in-page anchors (legal contents, help «On this page», /#how-it-works) stop under the sticky header, with motion */
html:has(> body.pc-root:is(.pc-guest, .pn-joinbody)) { scroll-padding-top: calc(var(--header-h, 76px) + env(safe-area-inset-top, 0px) + 12px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(> body.pc-root:is(.pc-guest, .pn-joinbody)) { scroll-behavior: smooth; }
}
/* #97: long guest pages: the header slides away on scroll down and comes back on scroll up (assets/js/fpapp.js sets the class) */
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  body.pc-root.pc-guest > .pc-header { transition: transform .22s ease; }
  body.pc-root.pc-guest.fp-hd-away > .pc-header { transform: translateY(-110%); }
}
/* #43 / #44 / #46 / #125: the guest menu slides in, the page under it stays put, one mark for the current page; on a phone on
   its side the links run in two columns and the keys share one row */
@media (prefers-reduced-motion: no-preference) {
  body.pc-root .pc-burger[open] .pc-burger__menu { animation: fp-m500-in .22s cubic-bezier(.2, .8, .2, 1); }
  body.pc-root .pc-burger[open]::before { animation: fp-m500-fade .22s ease; }
}
@keyframes fp-m500-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fp-m500-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1100px) {
  html:has(body.pc-root .pc-burger[open]) body > :not(.pc-header) { touch-action: none; }   /* no drag moves the page under the scrim (overflow: hidden on the root jumped it to the top) */
}
html[data-plk] body.pc-root:is(.pc-guest, .pn-joinbody).pk-site .pc-burger__menu > a[aria-current] { text-decoration: none !important; }
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  html[data-plk] body.pc-root.pk-site .pc-burger[open] .pc-burger__menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(640px, calc(100vw - 24px)); align-content: start; column-gap: 12px; }
  html[data-plk] body.pc-root:is(.pc-guest, .pn-joinbody).pk-site .pc-burger[open] .pc-burger__menu > .pc-burger__foot { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
  html[data-plk] body.pc-root:is(.pc-guest, .pn-joinbody).pk-site .pc-burger[open] .pc-burger__foot > :is(a, button) { flex: 1 1 180px; width: auto; margin: 0; }
}
/* #123: the menu key's label follows its state (fpapp.js), nothing to style */
/* #69 / #70: the footer's short links («Help», «Terms») and the breadcrumb's «Home» get 44 px wide targets (padding the
   margin gives back, so nothing moves) */
body.pc-root .pc-footer :is(li, p) > a { padding-inline: 8px; margin-inline: -8px; }
body.pc-root .pn-crumbs li > a { padding-inline: 6px; margin-inline: -6px; }
/* #81: the breadcrumb is one line on phones; it scrolls sideways (the current page is scrolled into view by fpapp.js) */
@media (max-width: 700px) {
  body.pc-root .pn-crumbs { flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap; }
  body.pc-root .pn-crumbs::-webkit-scrollbar { display: none; }
  body.pc-root .pn-crumbs > li { flex: none; }
}
/* #71: the footer's last row clears the home indicator */
body.pc-root:is(.pc-guest, .pn-joinbody) .pc-footer:not(.pn-gfooter--slim) { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
/* #118: the footer folds (Browse · Guides · Help) are 52 px rows on phones (the −14 px margins squeezed three rows into 150 px) */
@media (pointer: coarse) and (max-width: 700px) {
  body.pc-root .pn-gfooter summary.pn-gfooter__h { min-height: 52px; margin-block: 0; }
}

/* ---- guest pages ---- */
/* #74–#77: the home's first screen holds «Start selling»: less photo above the head on phones (svh, so the iOS toolbar does
   not make the hero jump), a smaller tag, tighter steps */
@media (max-width: 760px) and (orientation: portrait) {
  .fp-hero .fp-hero__wrap { padding-block: calc(36svh - 40px) 28px; }
  .fp-hero .fp-hero__img { height: 50%; }
  .fp-hero .fp-hero__tag { padding: 6px 14px 6px 12px; font-size: 14px; gap: 8px; }
  .fp-hero .fp-hero__h { font-size: 40px !important; margin: 12px 0 0 !important; }
  .fp-hero .fp-hero__lede { margin: 12px 0 0 !important; font-size: 17px; }
  .fp-hero .fp-hero__keys { margin-top: 20px; gap: 10px; }
  .fp-hero .fp-key { min-height: 56px; }
  .fp-hero .fp-hero__facts { margin: 24px 0 0 !important; }
}
/* #78: the content heroes (sell, buy, guides, help, safety, legal) are 150 px photos on portrait phones (58 vw = 226 px put the
   head at 358 px and the first key under the screen) */
@media (max-width: 700px) and (orientation: portrait) {
  .pk-site.pc-guest *:has(> .pk-chero) { --chero-h: 150px; padding-top: calc(var(--chero-h) - 16px); }
}
/* #79 / #80 / #99 / #113: one head scale on phones — content h1 32 px, utility pages (login, sign-up, creators, 404) 28 px
   (above their 22.5 px h2); a phone on its side 28 px (the desktop 40–44 px came back there); the home keeps its own display heads */
@media (max-width: 700px) {
  html[data-plk] body.pc-root.pc-guest.pk-site:not(.pk) main h1:not(.pc-sr):not(.fp-hero__h) { font-size: 32px !important; line-height: 1.1 !important; }
  html[data-plk] body.pc-root.pc-guest.pk-site:not(.pk) main :is(h1.pc-h-m, .pn-nf h1, .pc-empty > h1):not(.pc-sr),
  html[data-plk] body.pc-root.pn-joinbody.pk-site main h1:not(.pc-sr) { font-size: 28px !important; line-height: 1.12 !important; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  html[data-plk] body.pc-root:is(.pc-guest, .pn-joinbody).pk-site:not(.pk) main h1:not(.pc-sr):not(.fp-hero__h) { font-size: 28px !important; line-height: 1.12 !important; }
}
/* #84: the price strip's «Low / Median / High» 11 → 12 px */
body.pc-root .pc-strip__tg small { font-size: 12px; }
/* #85: a long guide chip wraps inside its card (it ran 176 px past the screen) */
body.pc-root.pc-guest a.pk-chip { max-width: 100%; white-space: normal; height: auto; padding-block: 10px; line-height: 1.25; text-align: left; }
/* #87–#93, #105: links in guest text get a taller hit area (padding on an inline box moves no line); the standalone ones a
   44 px row */
body.pc-root:is(.pc-guest, .pn-joinbody, .fp-cp-body) main :is(p, li) > a:not([class*="pc-btn"]):not(.pk-chip):not(.pc-more) { padding-block: 10px; }
body.pc-root:is(.pc-guest, .pn-joinbody) :is(a.tpg-more, .pn-gdx__h > a, .pn-cg__join > a.pc-link:only-child, .pn-gd-fan > a) { display: inline-flex; align-items: center; min-height: 44px; }
body.pc-root.pc-guest .pk-small > a { display: inline-flex; align-items: center; min-height: 44px; }
body.pc-root.fp-cp-body .fp-cp__legal a { display: inline-flex; align-items: center; min-height: 44px; }
body.pc-root:is(.pc-guest, .fp-cp-body) :is(.pk-small > a, .fp-cp__legal a) { padding-inline: 5px; margin-inline: -5px; min-width: 44px; justify-content: center; }   /* «Help», «Terms»: 44 px wide too; night 1000 handover (guest #87): 8 px sides made neighbours in «a · b · c» rows overlap by 5 px, 5 px sides + a 44 px floor keep them apart */
/* ---- AD 400 content (10.11. late, team content: help center, guides, sell / buy / safety / protect / about / FAQ) ----
   C1 the guides index rows on phones: 20 px inside the card (the old «between lines» rule left 0, the text touched the edge),
   the arrow beside the title instead of a «01 →» row of its own;
   C2 their lead clamps to three lines on phones (the rows ran 7 lines each); C3 the explainer phone is 220 px wide on phones
   (it took 700 px before the first guide / the buyer guide's first section); C4 the help center and a guide are reading pages:
   the content hero's scene is a band (180–280 px, 120 px on phones) so the search / the answer sits in the first screen;
   C5 the help crumbs stay one line like every other crumb (help.css wrapped each crumb into two lines); C6 the figures keep
   their room inside a 20 px phone card (#111 took it: the sell quote and the safety answers were hidden behind the figure);
   C7 the price strip's Low / High sit under the bar as plain labels (the median tag ran over «Low» on a phone, the shadow drew
   card edges); C8 help articles are short: no «On this page» box on phones, the guide's box is compact; C9 the help topic
   tiles are compact rows on phones (8 tiles took 1,300 px); C10 arrows after a text link get their space («safely→»). */
@media (max-width: 700px) {
  body.pc-root.pc-guest .pn-gdx__row { padding: 18px 16px 18px 20px; grid-template-areas: "b go"; align-items: start; column-gap: 12px; }
  body.pc-root.pc-guest .pn-gdx__row::before { display: none; }   /* the «01» had a row of its own above every title */
  body.pc-root.pc-guest .pn-gdx__p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  body.pc-root.pc-guest.pk-site .pk-chero--phone .pk-chero__body { width: min(176px, 46vw); }
  body.pc-root.pc-guest.pk-site .pk-chero--phone .pk-chero__snd { top: 40px; bottom: auto; right: 12px; padding-inline: 12px; font-size: 13px; }   /* over the photo, not over the clip's own words */
}
body.pc-root.pc-guest.pk-site:is(.pk-r-help, .pk-r-guide) .pn-gd :is(.pn-gd-hero__wrap, .pn-gdx__head):has(> .pk-chero:not(.pk-chero--phone)) { --chero-h: clamp(180px, 20vw, 280px); padding-top: calc(var(--chero-h) - 24px); }
body.pc-root.pc-guest.pk-site:is(.pk-r-help, .pk-r-guide) .pn-gd :is(.pn-gd-hero__wrap, .pn-gdx__head) > .pk-chero:not(.pk-chero--phone) .pk-chero__stage > img { object-position: 50% 22%; }   /* the band keeps the scene's people whole */
@media (max-width: 700px) {
  body.pc-root.pc-guest.pk-site:is(.pk-r-help, .pk-r-guide) .pn-gd :is(.pn-gd-hero__wrap, .pn-gdx__head):has(> .pk-chero:not(.pk-chero--phone)) { --chero-h: 120px; padding-top: calc(var(--chero-h) - 16px); }
  body.pc-root .pn-help .pn-gcrumbs .pn-crumbs { flex-wrap: nowrap !important; }
  body.pc-root .pn-help .pn-gcrumbs .pn-crumbs > li { flex: none; }
  body.pc-root .pn-help .pn-gcrumbs .pn-crumbs > li:last-child { flex: 0 1 auto; min-width: 0; }
  body.pc-root .pn-help .pn-gcrumbs .pn-crumbs :is(a, [aria-current]) { white-space: nowrap; }
  body.pc-root .pn-help .pn-gcrumbs .pn-crumbs > li:last-child > [aria-current] { overflow: hidden; text-overflow: ellipsis; }
  body.pc-root.pk-r-guide .pn-gcrumbs .pn-crumbs > li:last-child > [aria-current] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* a guide's long title ran three lines in the crumb under the h1 that repeats it */
  html[data-plk] body.pc-root.pc-guest.pk-site main .pk-gsx-quote.pk-panel { padding-top: 200px; }
  html[data-plk] body.pc-root.pc-guest.pk-site main .pks--ad .pks-qs:not(.pks-rows) > .pks-q.pk-panel { padding-top: 84px; }
  html[data-plk] body.pc-root.pc-guest.pk-site main .pks--ad .pks-qs:not(.pks-rows) .pks-q .pk-hm { max-width: none; }
  body.pc-root .pn-help__article .pn-lpm-toc { display: none; }
  body.pc-root .pn-help__article .pn-help__videocol { display: block; }
  body.pc-root.pc-guest .pn-gd-main .pn-gd-toc ol { gap: 0; }
  body.pc-root.pc-guest .pn-gd-main .pn-gd-toc li a { min-height: 40px; padding-block: 6px; font-size: 15px; }
  body.pc-root .pn-help__grid { gap: 10px; }
  body.pc-root .pn-help__cat { padding: 14px 16px; column-gap: 14px; }
  body.pc-root .pn-help__cat .pn-help__ico :is(img, svg) { width: 44px; height: 44px; }
  body.pc-root .pn-help__cat > span:not(.pn-help__ico) { font-size: 14px; }
}
body.pc-root.pc-guest .pn-gd-fig .pc-strip__tg:not(.is-med) { top: 90px; transform: translateX(-50%); padding: 0; background: transparent !important; box-shadow: none; clip-path: none; font-size: 16px; text-align: center; }
body.pc-root.pc-guest .pn-gd-fig .pc-strip__tg.is-med { top: 0; }
body.pc-root.pc-guest .pn-gd-fig .pc-strip { height: 128px; }
body.pc-root.pc-guest :is(.tpg-more, .pk-more, a.tpg-card__more) { gap: 4px; }
/* C11 one section-head scale on the content pages: safety and protect drew their section heads at 18 / 24 px (the size of a
   card head) while sell and about draw them at 24 / 44 px — the same scale now, card heads one step under it on phones */
body.pc-root.pc-guest.pk-site:is(.pk-r-safety, .pk-r-protect) main h2.pk-hl { font: var(--type-title); font-size: var(--fs-l); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; max-width: 18ch; }
@media (max-width: 700px) {
  body.pc-root.pc-guest.pk-site:is(.pk-r-safety, .pk-r-protect) main h2.pk-hl { font-size: var(--fs-m); }
  body.pc-root.pc-guest.pk-site.pk-r-safety main .pks-q h2.pk-hm { font-size: 20px; line-height: 1.2; }
}
/* #100: the 404's photo leaves room for «Home» on small phones */
@media (max-width: 700px) {
  body.pc-root .pn-lp-404__art img { max-height: 180px; width: 100%; object-fit: cover; }
}
/* #101: the sign-up and login copy is 15 px (14 / 13 px lead and notes) */
@media (max-width: 700px) {
  body.pc-root.pn-joinbody main :is(.pc-sub, .pn-join__lede, .pn-join__note, .pn-auth__lede, p.pc-t-small, .pn-joinform__note) { font-size: 15px; line-height: 1.45; }
  body.pc-root.pn-joinbody main :is(.pc-help, .pn-authgoogle__or) { font-size: 14px; line-height: 1.4; }
}
/* #102: a focused field on the guest forms keeps its help line above the keyboard */
@media (max-width: 1023.98px) {
  html:has(> body.pc-root:is(.pc-guest, .pn-joinbody)) { scroll-padding-bottom: 96px; }
}
/* #106: the password «Show» key sits inside its field (it hung 4 px out at the bottom right) */
body.pc-root .pn-joinaffix--pw > .pn-pwtoggle { top: 0; bottom: 0; height: auto; }
/* #111 / #112: one card on phones — 20 px inside, 24 px corners (16 / 20 / 24 px and 32 px corners before) */
@media (max-width: 700px) {
  html[data-plk] body.pc-root:is(.pc-guest, .pn-joinbody).pk-site main :is(.pk-panel, .pn-panel) { padding: 20px; border-radius: 24px; }
}
/* #126: the sign-up role cards are one 48 px line on a phone on its side (84 px with their second line and figure) */
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  .pk-site .pkj-role__t { min-height: 48px; padding-block: 8px; padding-right: var(--space-5); }
  .pk-site .pkj-role__t span > :not(b) { display: none; }
  .pk-site .pkj-role__fig { display: none; }
}

/* ---- her page /@ (bio_feet.php, guests and members) ---- */
/* #96: the sticky bar clears the status bar in the installed app */
body.pc-root.fp-cp-body .fp-cp__bar { padding-top: env(safe-area-inset-top, 0px); min-height: calc(60px + env(safe-area-inset-top, 0px)); }
/* #94: the request block has no edge (tonal, like every card) */
body.pc-root.fp-cp-body .fp-cp__panel.fn-ask { border: 0; box-shadow: none !important; outline: 0; }   /* a 2 px inset ring came from a stronger rule */
/* #95: a lone Follow key takes the row */
body.pc-root.fp-cp-body .fp-cp__keys > .fp-cp__follow:only-child { grid-column: 1 / -1; width: 100%; justify-content: center; }
/* #98 / #128: on a phone on its side the request bar is one 52 px line and her picture 80 px */
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 4/3) {
  body.pc-root.fp-cp-body .fn-reqbar { padding-block: 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  body.pc-root.fp-cp-body .fn-reqbar__t small { display: none; }
  body.pc-root.fp-cp-body .fp-cp__avatar { width: 80px; height: 80px; }
}
/* #116: the bar steps away while the in-page request block is on screen (fpapp.js sets the class) */
body.pc-root.fp-cp-body .fn-reqbar { transition: transform .2s ease, opacity .2s ease; }
body.pc-root.fp-cp-body .fn-reqbar.fp-away { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body.pc-root.fp-cp-body .fn-reqbar { transition: none; } }

/* #135: a member keeps the tab bar on her page (bio_feet.php adds it under 1024 px): the request bar rides above it, the page
   end keeps both free, the «Link copied» toast rises above both */
@media (max-width: 1023.98px) {
  body.pc-root.fp-cp-tabs .fn-reqbar { bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
  body.pc-root.fp-cp-tabs .bio.fp-cp { padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px); }
  body.pc-root.fp-cp-tabs .bio.fp-cp.has-reqbar { padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 84px); }
  body.pc-root.fp-cp-tabs .fp-cp__toast { bottom: calc(var(--tabbar-h, 64px) + 96px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  body.pc-root.fp-cp-tabs .bio.fp-cp.has-reqbar { padding-bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + 16px); }
}

/* ---- page to page (every feet page) ---- */
/* #23: a cross-fade between pages of the site (Chrome 126+, Safari 18.2+), the bars stand still; none with reduced motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }
  body.pc-root > .pc-header { view-transition-name: fp-top; }
  body.pc-root > .pc-tabbar { view-transition-name: fp-tabs; }
  ::view-transition-group(fp-top), ::view-transition-group(fp-tabs) { animation-duration: 0s; }
}
/* #28: the progress line under the bar after a tap on a slow connection (fpapp.js adds it) */
.fp-navbar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 1000; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #0062ff, #00b3ff); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.fp-navbar.is-on { opacity: 1; animation: fp-m500-nav 6s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes fp-m500-nav { from { transform: scaleX(.08); } to { transform: scaleX(.9); } }
@media (prefers-reduced-motion: reduce) { .fp-navbar.is-on { animation: none; transform: scaleX(.6); } }
/* #26 / #119: the back key of the installed app (fpapp.js puts it in front of the wordmark when the page runs standalone) */
.fp-appback { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 -4px 0 -8px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; }
.fp-appback:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
/* ==== end m500 shell + guest ==== */
/* ==== AD 400 per page, team GUEST (10.11. late; scratchpad ad400/guest.md): the guest pages at pixel level ==================== */
/* -- chrome -- */
/* #G11: the owner's rule for the chrome lines is grey 50 % — the footer had it, the guest and sign-up header drew 20 % */
body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header { border-bottom-color: rgba(128, 128, 128, .5) !important; }
/* #G10: the menu's «Dark mode» is a setting, not a fourth key — a plain row under the three keys, not one more tonal pill */
body.pc-root.pc-guest .pc-header .pc-burger__foot > .pc-burger__theme { background: transparent !important; padding-inline: 12px 4px; font-weight: 600; }
/* #G3: six nav links (Requests joined) keep air beside the wordmark and the keys on small laptops */
@media (min-width: 1101px) and (max-width: 1260px) { body.pc-root.pc-guest .pc-header .pc-nav { gap: 16px; } }
/* -- home -- */
/* #H2: the hero facts — «Free to join» (a plain line) sat 10 px higher than the three linked facts (their 44 px hit area pads 10 px) */
.fp-hero .fp-hero__facts li > span { padding-block: 10px; }
/* #H24: the hero's second key «Discover feet pics» was the one outlined key on the site (a 2 px blue ring on white): the tonal
   secondary every other page uses */
html:not([data-theme="dark"]) body.pc-root .fp-hero .fp-key--find { background: rgb(0 98 255 / .10); box-shadow: none; color: #0050d0; }
html:not([data-theme="dark"]) body.pc-root .fp-hero .fp-key--find:hover { background: rgb(0 98 255 / .16); }
/* -- /requests/ (guest board) -- */
/* #R6: the page sat 32 px in on phones and 64 px on desktop (main's own padding plus the wrap's): the gutters of every other guest page */
body.pc-root.pk-r-guest_requests main.pn-main { padding-inline: 0; }
/* #R8: «No open requests right now» was 26 px, larger than the page's other section heads (22 px) */
.fgb-page .fgb-empty .fgb__h { font-size: 22px !important; }
/* -- sign-up, login, password -- */
/* #J4 / #L5: «or» between Google and the form is a rule with the word in it, not a lone grey word in 40 px of air */
body.pc-root.pn-joinbody .pn-authgoogle__or { display: flex; align-items: center; gap: 12px; }
body.pc-root.pn-joinbody .pn-authgoogle__or::before, body.pc-root.pn-joinbody .pn-authgoogle__or::after { content: ""; flex: 1 1 0; height: 1px; background: rgb(14 26 51 / .12); }
html[data-theme="dark"] body.pc-root.pn-joinbody .pn-authgoogle__or::before, html[data-theme="dark"] body.pc-root.pn-joinbody .pn-authgoogle__or::after { background: rgb(234 240 250 / .12); }
body.pc-root.pn-joinbody .pn-authgoogle__or--after { margin: 16px 0 20px; }
/* #L3: the one «New here?» line under the login card */
body.pc-root.pn-joinbody .pn-authalt--join { gap: 0 6px; }
/* #P1: the password page's card opened with 56 px of air (the card's 20 + the open block's 12 + its form's 24) */
body.pc-root.pn-joinbody .pn-authmore.is-fixed, body.pc-root.pn-joinbody .pn-authmore.is-fixed > .pn-authmore__form { margin-top: 0; }
/* #P2: «Prefer a new password?» is the second way — a rule above it and the label's weight, not one more grey help line */
body.pc-root.pn-joinbody .pn-authlost__instead { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgb(14 26 51 / .12); color: var(--ink); font-weight: 600; }
html[data-theme="dark"] body.pc-root.pn-joinbody .pn-authlost__instead { border-top-color: rgb(234 240 250 / .12); }
/* #J7: on a portrait phone the sign-up's scene came after the form — 200 px of photo between the key and the footer, its words hidden */
@media (max-width: 760px) and (orientation: portrait) { body.pc-root.pn-joinbody .pkj-x__stage { display: none; } }
/* #J8: the scene's claim «Your feet pics, your terms» broke into three 44 px lines in 46 % of the picture */
.pk-site.pn-joinbody .pkj-x__claim { max-width: min(72%, 440px); }
/* #J3 / #L6: one head size on sign-up, login and password on desktop (the sign-up said it at 48 px, the login at 24 px) */
@media (min-width: 761px) {
  html[data-plk] body.pc-root.pn-joinbody main h1.pn-joinhead__h { font-size: 36px !important; line-height: 1.1 !important; }
}
/* -- 404 -- */
/* #N1: the photo was cut to 180 px on phones but its frame kept 250 px: 70 px of nothing above «Page not found» */
@media (max-width: 700px) { body.pc-root .pn-lp-404__art { height: auto; min-height: 0; aspect-ratio: auto; } }
/* #N2: four creators in three columns (one alone in a second row) and names cut to «@Big_Red_J…» even on desktop */
body.pc-root .pn-nf__peoplelist { grid-template-columns: repeat(auto-fit, minmax(120px, 140px)); justify-content: center; }
@media (max-width: 700px) { body.pc-root .pn-nf__peoplelist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* -- legal pages (terms, privacy, legal notice) -- */
/* #LG1: a 512 px photo over the terms on desktop put «Terms of use» at the fold and the first sentence under it — a reading page
   gets a band, not a poster */
@media (min-width: 701px) {
  body.pc-root.pc-guest.pk-site:is(.pk-r-legal_page, .pk-r-imprint) *:has(> .pk-chero) { --chero-h: clamp(220px, 20vw, 280px); }
}
/* #LG3: the contents of a legal page fold on phones (closed there by the page's line after them; open on wider screens) */
.pn-lg-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; }
.pn-lg-fold > summary::-webkit-details-marker { display: none; }
.pn-lg-fold__chev { flex: none; transition: transform .18s ease; }
.pn-lg-fold[open] .pn-lg-fold__chev { transform: rotate(180deg); }
@media (min-width: 701px) { .pn-lg-fold > summary { pointer-events: none; min-height: 0; } .pn-lg-fold__chev { display: none; } }
@media (prefers-reduced-motion: reduce) { .pn-lg-fold__chev { transition: none; } }
/* -- her page /@ for guests -- */
/* #B3: «Log in» beside Share in her bar */
.fp-cp__bar .fp-cp__login { margin-left: auto; }
.fp-cp__bar .fp-cp__login + .fp-cp__share { margin-left: 4px; }
@media (pointer: coarse) { .fp-cp__bar .fp-cp__login { min-height: 44px; } }
/* ==== end AD 400 guest ==== */
/* ---- sellers 20 creator #8 (10.11.) -------------------------------------------------------------------------------------
   320 px (Galaxy S9+ in the focus group): the header still ran 7 px past the edge, the menu key's circle cut — a tighter gutter,
   gap and join key there. The one-line breadcrumb cut «Home» to «ome» (fpapp.js scrolls an overflowing line to its end): the
   current page's title now takes the room that is left and ends in «…», so the line fits and nothing scrolls. The sell guide's
   step stickers covered the step titles (the 20 px phone panel padding beat the sticker's room): the sticker's room is back. */
@media (max-width: 359px) {
  html[data-theme] body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header { gap: 6px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  html[data-theme] body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header :is(.pn-header__end, .pc-header__icons) { gap: 4px; }
  body.pc-root:is(.pc-guest, .pn-joinbody) .pc-header :is(.pn-header__join, .pn-header__fan, .pn-joinnav__login) { padding-inline: 10px; }
}
@media (max-width: 700px) {
  body.pc-root .pn-crumbs > li:last-child { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; }
  body.pc-root .pn-crumbs > li:last-child > :is(span, a):last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html[data-plk] body.pc-root:is(.pc-guest, .pn-joinbody).pk-site main li.pk-panel:has(> .pk-chfig) { padding-top: 84px; }
}

/* ---------------------------------------------------------------- the Tokens story on the guest home (home narrative 11.11.,
   lib/portal_feet.php pnew_home_has_tokens): the trust row under «Buy and sell safely» with the portal's SVG objects (always),
   the partner line, the payout line in «For creators», the shield badge and the held line on the deal scene (story on).
   Electric blue, tonal surfaces, no card edges, Nunito for the short bold words. */
body.pc-root .pn-lb--cm .fp-obj { object-fit: contain; filter: none; }
body.pc-root .pn-lb--cm .fp-trust { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 30px 0 0; padding: 0; list-style: none; }
body.pc-root .pn-lb--cm .fp-trust__i { display: flex; align-items: center; gap: 10px; min-width: 0; font: 700 15px/1.3 'Nunito', var(--body, system-ui), sans-serif; color: var(--ink, #0b1020); }
body.pc-root .pn-lb--cm .fp-trust__obj { width: 40px; height: 40px; flex: none; }
body.pc-root .pn-lb--cm .fp-trust__partners { max-width: 780px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2, #4b5872); }
body.pc-root .pn-lb--cm .fp-trust + .pn-hm-links, body.pc-root .pn-lb--cm .fp-trust__partners + .pn-hm-links { margin-top: 18px; }
body.pc-root .pn-lb--cm .fp-payout { display: flex; align-items: center; gap: 12px; }
body.pc-root .pn-lb--cm .fp-payout__obj { width: 56px; height: 56px; flex: none; }
body.pc-root .pn-lb--cm .pn-hm-tile .fp-obj, body.pc-root .pn-lb--cm .pn-hm-gcard .fp-obj { width: 88px; height: 88px; }
/* the deal scene (templates/plastik/hs_deal.php): «protected» beside Offer, «25 Tokens held …» under the steps */
body.pc-root .pk-tkbadge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px 1px 4px; border-radius: 999px; background: #e8f4ff; color: #0062ff; font: 800 8px/1.5 'Nunito', var(--body, system-ui), sans-serif; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
body.pc-root .pk-held { display: flex; align-items: center; gap: 4px; margin-top: 5px; font: 700 9px/1.3 'Nunito', var(--body, system-ui), sans-serif; color: #0062ff; }
body.pc-root .pk-held svg { flex: none; }
@media (max-width: 700px) {
  /* phones: the trust row is a rail (like the tiles above it), each item its own width, never the tiles' 296 px */
  body.pc-root .pn-lb--cm .fp-trust { flex-wrap: nowrap; gap: 20px; margin-top: 22px; padding-bottom: 6px; }
  body.pc-root .pn-lb--cm .fp-trust > li { flex: 0 0 auto; }
  body.pc-root .pn-lb--cm .fp-trust__i { font-size: 14px; }
  body.pc-root .pn-lb--cm .fp-trust__obj { width: 34px; height: 34px; }
  body.pc-root .pn-lb--cm .fp-payout { align-items: flex-start; }
  body.pc-root .pn-lb--cm .fp-payout__obj { width: 44px; height: 44px; }
}
html[data-theme="dark"] body.pc-root .pn-lb--cm .fp-trust__i { color: #eaf0fa; }
html[data-theme="dark"] body.pc-root .pn-lb--cm .fp-trust__partners { color: #9fb0c8; }
html[data-theme="dark"] body.pc-root .pk-tkbadge { background: #172238; color: #5cc8ff; }
html[data-theme="dark"] body.pc-root .pk-held { color: #5cc8ff; }
/* the four hero facts stay one line each on a desktop (home narrative 11.11.: «No face needed» broke in two at 1280 px) */
@media (min-width: 761px) { body.pc-root .fp-hero__facts a > span:last-child, body.pc-root .fp-hero__facts li > span > span:last-child { white-space: nowrap; } }

/* ---------------------------------------------------------------- the night hero (owner mockup 11.11., «das nachbauen für Hero») and the sellers'
   how-it-works band (mockup 2): one dark block under the guest header — deep navy to blue-black, electric-blue glows, the 28 px edge
   towards the light sections; the header sits inside the band on the home (body.pk = the plastik home, templates/plastik/layout.php). Nunito for the display, Inter for the
   lines; 44 px targets; no horizontal overflow (every row wraps or scrolls). */
body.pc-root .fp-hero.fp-hero--night { --fp-ink: #eaf0fa; --fp-ink-2: #aab8d0; --fp-blue: #00b3ff; --fp-key: #0062ff; --fp-glass: rgb(255 255 255 / .06); --fp-line: rgb(255 255 255 / .12);
  background: linear-gradient(180deg, #0b1020 0%, #121a2b 100%); color: var(--fp-ink); overflow: hidden; }
body.pc-root .fp-hero--night .fp-hero__glow { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(40px); }
body.pc-root .fp-hero--night .fp-hero__glow--a { width: 52vw; max-width: 820px; aspect-ratio: 1; right: -8%; top: -18%; background: radial-gradient(circle, rgb(0 179 255 / .34), rgb(0 98 255 / .12) 50%, transparent 72%); }
body.pc-root .fp-hero--night .fp-hero__glow--b { width: 38vw; max-width: 560px; aspect-ratio: 1; left: -12%; bottom: -30%; background: radial-gradient(circle, rgb(0 98 255 / .28), transparent 70%); }
body.pc-root .fp-hero--night .fp-hero__wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; min-height: 0; padding-block: 56px 64px; }
body.pc-root .fp-hero--night .fp-hero__copy { max-width: 640px; min-width: 0; }
body.pc-root .fp-hero--night .fp-hero__tag { margin: 0 !important; padding: 9px 18px 9px 14px; background: rgb(0 179 255 / .14); color: #5cc8ff; font: 700 15px/1.2 'Nunito', sans-serif; }
body.pc-root .fp-hero--night .fp-hero__tag .fp-ico { color: #00b3ff; }
body.pc-root .fp-hero--night .fp-hero__h { margin: 26px 0 0 !important; font: 900 clamp(44px, 5.2vw, 74px)/1.04 'Nunito', sans-serif !important; color: var(--fp-ink) !important; letter-spacing: -.02em !important; }
body.pc-root .fp-hero--night .fp-hero__l1, body.pc-root .fp-hero--night .fp-hero__l2 { display: block; position: relative; }
body.pc-root .fp-hero--night .fp-hero__acc { position: relative; display: inline-block; font-style: normal; color: var(--fp-blue) !important; }
body.pc-root .fp-hero--night .fp-under { position: absolute; left: 0; right: 0; bottom: -.14em; width: 100%; height: .22em; color: var(--fp-blue); opacity: .85; }
body.pc-root .fp-hero--night .fp-spark { position: absolute; width: .5em; height: .5em; top: -.32em; right: -.42em; color: var(--fp-blue); }
body.pc-root .fp-hero--night .fp-hero__lede { margin: 24px 0 0 !important; max-width: 560px; font: 500 clamp(17px, 1.35vw, 20px)/1.5 var(--body, 'Inter', system-ui, sans-serif); color: var(--fp-ink-2); }
/* the three steps: icon tiles with arrows between */
body.pc-root .fp-steps { display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: none; }
body.pc-root .fp-step { display: flex; align-items: center; gap: 12px; min-width: 0; }
body.pc-root .fp-step__arrow { display: inline-flex; color: rgb(170 184 208 / .7); margin-right: 2px; }
body.pc-root .fp-step__tile { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgb(0 179 255 / .14); color: #5cc8ff; box-shadow: inset 0 0 0 1px rgb(0 179 255 / .22); }
body.pc-root .fp-step__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.pc-root .fp-step__txt b { font: 800 15px/1.25 'Nunito', sans-serif; color: var(--fp-ink); }
body.pc-root .fp-step__txt small { font: 500 13px/1.3 var(--body, 'Inter', sans-serif); color: var(--fp-ink-2); }
body.pc-root .fp-hero--night .fp-hero__keys { margin-top: 32px; gap: 14px; }
body.pc-root .fp-hero--night .fp-key { min-height: 56px; padding: 0 24px; font-size: 17px; gap: 10px; }
body.pc-root .fp-hero--night .fp-key--sell { background: #0062ff; color: #fff; box-shadow: 0 14px 34px rgb(0 98 255 / .35); }
body.pc-root .fp-hero--night .fp-key--sell:hover { background: #0050d0; }
body.pc-root .fp-hero--night .fp-key--find { background: var(--fp-glass); color: var(--fp-ink); box-shadow: inset 0 0 0 1.5px var(--fp-line); }
body.pc-root .fp-hero--night .fp-key--find:hover { background: rgb(255 255 255 / .1); }
body.pc-root .fp-hero--night .fp-hero__buy { margin: 16px 0 0; }
body.pc-root .fp-hero--night .fp-hero__buy .pn-hm-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--fp-ink-2); font: 600 15px/1.3 var(--body, 'Inter', sans-serif); text-decoration-color: rgb(170 184 208 / .5); }
body.pc-root .fp-hero--night .fp-hero__buy .pn-hm-link:hover { color: var(--fp-ink); }
body.pc-root .fp-hero--night .fp-hero__facts { margin: 34px 0 0 !important; flex-wrap: wrap; row-gap: 14px; }
body.pc-root .fp-hero--night .fp-hero__facts li { flex: 1 1 auto; padding: 0 16px; border-left: 1px solid var(--fp-line); justify-content: flex-start; }
body.pc-root .fp-hero--night .fp-hero__facts li:first-child { padding-left: 0; border-left: 0; }
body.pc-root .fp-hero--night .fp-hero__facts a, body.pc-root .fp-hero--night .fp-hero__facts li > span { flex-direction: row; gap: 8px; min-height: 44px; color: var(--fp-ink-2); font: 600 14px/1.25 var(--body, 'Inter', sans-serif); text-align: left; }
body.pc-root .fp-hero--night .fp-hero__facts .fp-ico { color: #5cc8ff; flex: none; }
/* the photo with its glow, the neon heart, the three floating cards */
body.pc-root .fp-hero--night .fp-hero__side { position: relative; min-width: 0; }
body.pc-root .fp-hero--night .fp-hero__pic { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; background: #121a2b; box-shadow: 0 30px 80px rgb(0 98 255 / .28), 0 0 0 1px rgb(255 255 255 / .08); }
body.pc-root .fp-hero--night .fp-hero__pic::before { content: ''; position: absolute; inset: -30%; z-index: 0; background: radial-gradient(circle at 70% 30%, rgb(0 179 255 / .45), rgb(120 80 255 / .25) 45%, transparent 70%); }
body.pc-root .fp-hero--night .fp-hero__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; mask-image: none; -webkit-mask-image: none; }
body.pc-root .fp-hero--night .fp-hero__doodle { position: absolute; z-index: 2; right: 5%; top: 6%; width: 64px; color: #00b3ff; transform: rotate(12deg); filter: drop-shadow(0 0 10px rgb(0 179 255 / .9)); opacity: 1; }
body.pc-root .fp-cards { position: absolute; z-index: 3; right: -10px; bottom: -18px; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; width: min(300px, 78%); }
body.pc-root .fp-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px;
  background: rgb(18 26 43 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(255 255 255 / .1); }
body.pc-root .fp-card--1 { transform: translateX(-34px); }
body.pc-root .fp-card--3 { transform: translateX(-16px); }
body.pc-root .fp-card__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(0 179 255 / .16); color: #5cc8ff; }
body.pc-root .fp-card__txt { display: flex; flex-direction: column; min-width: 0; }
body.pc-root .fp-card__txt b { font: 800 13.5px/1.25 'Nunito', sans-serif; color: #eaf0fa; }
body.pc-root .fp-card__txt span { font: 500 12.5px/1.3 var(--body, 'Inter', sans-serif); color: #aab8d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.pc-root .fp-card__t { font: 500 11px/1.2 var(--body, 'Inter', sans-serif); color: #7f8fab; white-space: nowrap; }
/* the header inside the band on the home: dark, the nav as quiet pills, the keys as in the mockup */
body.pc-root.pc-guest.pk .pc-header { background: #0b1020 !important; color: #eaf0fa; border-bottom: 0 !important; box-shadow: none !important; }
body.pc-root.pc-guest.pk .pc-header .pc-logo { color: #eaf0fa !important; }
body.pc-root.pc-guest.pk .pc-header .pc-logo__dot { background: #00b3ff !important; }
body.pc-root.pc-guest.pk .pc-header .pc-nav__link { color: #c3cde0; border-radius: 999px; padding-inline: 12px; }
body.pc-root.pc-guest.pk .pc-header .pc-nav__link:hover { color: #fff; background: rgb(255 255 255 / .08); }
body.pc-root.pc-guest.pk .pc-header .pc-nav__link[aria-current="page"] { color: #fff; background: rgb(0 179 255 / .16); }
body.pc-root.pc-guest.pk .pc-header .pc-btn--ghost { color: #eaf0fa; background: rgb(255 255 255 / .08); }
body.pc-root.pc-guest.pk .pc-header .pc-btn--line { color: #eaf0fa; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .18); }
body.pc-root.pc-guest.pk .pc-header .pn-header__join { background: #0062ff !important; color: #fff !important; box-shadow: 0 10px 24px rgb(0 98 255 / .3); }
body.pc-root.pc-guest.pk .pc-header .pn-header__join::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15.5c-1.5 1.5-2 5-2 5s3.5-.5 5-2'/%3E%3Cpath d='M9.5 14.5L5 10l3-3 4.5 4.5'/%3E%3Cpath d='M14.5 19.5L10 15l6-6c2.5-2.5 5-2.5 5-2.5s0 2.5-2.5 5z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15.5c-1.5 1.5-2 5-2 5s3.5-.5 5-2'/%3E%3Cpath d='M9.5 14.5L5 10l3-3 4.5 4.5'/%3E%3Cpath d='M14.5 19.5L10 15l6-6c2.5-2.5 5-2.5 5-2.5s0 2.5-2.5 5z'/%3E%3Ccircle cx='15.5' cy='8.5' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
body.pc-root.pc-guest.pk .pc-header .pc-burger summary, body.pc-root.pc-guest.pk .pc-header .pc-iconbtn { color: #eaf0fa; background: rgb(255 255 255 / .08); }
/* the sellers' how-it-works band, the second half of the dark block (rounded 28 px edge to the light sections) */
body.pc-root .fp-hws { --fp-ink: #eaf0fa; --fp-ink-2: #aab8d0; --fp-blue: #00b3ff; position: relative; overflow: hidden; margin: 0; padding: 0; border-radius: 0 0 28px 28px;
  background: linear-gradient(180deg, #121a2b 0%, #0b1020 100%); color: var(--fp-ink); font-family: var(--body, 'Inter', system-ui, sans-serif); }
body.pc-root .fp-hws__glow { position: absolute; z-index: 0; left: 50%; top: -10%; width: 70vw; max-width: 1000px; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50%; filter: blur(50px); background: radial-gradient(ellipse, rgb(0 179 255 / .22), transparent 70%); pointer-events: none; }
body.pc-root .fp-hws__wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--fp-sec-t) var(--fp-sec-b); }
body.pc-root .fp-hws__pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 18px 9px 14px; border-radius: 999px; background: rgb(0 179 255 / .14); color: #5cc8ff; font: 700 15px/1.2 'Nunito', sans-serif; }
body.pc-root .fp-hws__h { position: relative; margin: 22px 0 0 !important; font: 900 clamp(34px, 4.6vw, 62px)/1.08 'Nunito', sans-serif !important; letter-spacing: -.02em !important; color: var(--fp-ink) !important; }
body.pc-root .fp-hws__arr { color: #5cc8ff; opacity: .8; margin: 0 .08em; }
body.pc-root .fp-hws__acc { position: relative; display: inline-block; font-style: normal; color: var(--fp-blue) !important; }
body.pc-root .fp-hws .fp-under { position: absolute; left: 0; right: 0; bottom: -.14em; width: 100%; height: .22em; color: var(--fp-blue); opacity: .85; }
body.pc-root .fp-hws .fp-spark { position: absolute; width: .5em; height: .5em; top: -.3em; right: -.5em; color: var(--fp-blue); }
body.pc-root .fp-hws__sub { margin: 18px 0 0; max-width: 620px; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--body, 'Inter', sans-serif); color: var(--fp-ink-2); }
body.pc-root .fp-hws__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; margin: 40px 0 0; padding: 0; list-style: none; text-align: left; }
body.pc-root .fp-hws__card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 26px 24px 24px; border-radius: 22px;
  background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 20px 50px rgb(0 0 0 / .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.pc-root .fp-hws__arrow { position: absolute; left: -33px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0b1020; color: #5cc8ff; box-shadow: 0 0 0 1px rgb(0 179 255 / .35), 0 0 24px rgb(0 179 255 / .55); }
body.pc-root .fp-hws__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #0062ff; color: #fff; font: 800 16px/1 'Nunito', sans-serif; box-shadow: 0 8px 20px rgb(0 98 255 / .35); }
body.pc-root .fp-hws__ch { margin: 10px 0 0 !important; font: 800 22px/1.2 'Nunito', sans-serif !important; color: var(--fp-ink) !important; }
body.pc-root .fp-hws__cp { margin: 0; font: 500 15px/1.5 var(--body, 'Inter', sans-serif); color: var(--fp-ink-2); }
body.pc-root .fp-hws__mini { margin-top: 18px; border-radius: 16px; background: rgb(11 16 32 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); padding: 12px 14px; }
body.pc-root .fp-hws__mini--req { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
body.pc-root .fp-hws__mini-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgb(0 179 255 / .16); color: #5cc8ff; }
body.pc-root .fp-hws__mini-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.pc-root .fp-hws__mini-head b { font: 800 13.5px/1.2 'Nunito', sans-serif; color: var(--fp-ink); }
body.pc-root .fp-hws__mini-head small { font: 500 11.5px/1.2 var(--body, 'Inter', sans-serif); color: #7f8fab; }
body.pc-root .fp-hws__mini--req q { grid-column: 1 / -1; quotes: none; font: 500 13.5px/1.4 var(--body, 'Inter', sans-serif); color: var(--fp-ink-2); }
body.pc-root .fp-hws__mini--pics { position: relative; height: 128px; padding: 0; background: none; box-shadow: none; }
body.pc-root .fp-hws__pic { position: absolute; width: 56%; height: 110px; object-fit: cover; border-radius: 14px; box-shadow: 0 12px 30px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(255 255 255 / .1); }
body.pc-root .fp-hws__pic--1 { left: 6%; top: 10px; transform: rotate(-6deg); object-position: 50% 20%; }
body.pc-root .fp-hws__pic--2 { left: 38%; top: 2px; transform: rotate(5deg); object-position: 50% 60%; }
body.pc-root .fp-hws__plus { position: absolute; right: 4%; bottom: 2px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #0062ff; color: #fff; box-shadow: 0 10px 24px rgb(0 98 255 / .4); }
body.pc-root .fp-hws__mini--pay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
body.pc-root .fp-hws__payobj { width: 44px; height: 44px; grid-row: 1 / 3; }
body.pc-root .fp-hws__mini--pay .fp-hws__mini-head b { font-size: 20px; }
body.pc-root .fp-hws__paid { display: inline-flex; align-items: center; gap: 5px; font: 700 12.5px/1.2 var(--body, 'Inter', sans-serif); color: #3ddc97; }
body.pc-root .fp-hws__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; width: 100%; margin: 34px 0 0; padding: 14px 22px; list-style: none; border-radius: 999px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
body.pc-root .fp-hws__trust li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 600 14px/1.25 var(--body, 'Inter', sans-serif); color: var(--fp-ink-2); white-space: nowrap; }
body.pc-root .fp-hws__trust .fp-ico { color: #5cc8ff; flex: none; }
body.pc-root .fp-hws__keys { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
body.pc-root .fp-hws__keys .fp-key { min-height: 56px; padding: 0 26px; gap: 10px; font: 800 17px/1 'Nunito', sans-serif; }
body.pc-root .fp-hws__guide { color: var(--fp-ink-2); min-height: 44px; display: inline-flex; align-items: center; }
/* the light section after the dark block breathes */
body.pc-root .fp-hws + * { margin-top: 0; }   /* the tools band carries its own 96 px */
@media (max-width: 899px) {
  body.pc-root .fp-hero--night .fp-hero__wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 28px 40px; }
  body.pc-root .fp-hero--night .fp-hero__h { font-size: clamp(38px, 11vw, 50px) !important; }
  body.pc-root .fp-steps { flex-direction: column; gap: 12px; }
  body.pc-root .fp-step__arrow { display: none; }
  body.pc-root .fp-hero--night .fp-hero__keys { flex-direction: column; gap: 12px; }
  body.pc-root .fp-hero--night .fp-key { width: 100%; justify-content: center; }
  body.pc-root .fp-hero--night .fp-hero__facts { flex-wrap: nowrap; overflow-x: auto; row-gap: 0; gap: 0; margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); scrollbar-width: none; }
  body.pc-root .fp-hero--night .fp-hero__facts::-webkit-scrollbar { display: none; }
  body.pc-root .fp-hero--night .fp-hero__facts li { flex: 0 0 auto; }
  body.pc-root .fp-hero--night .fp-hero__facts a, body.pc-root .fp-hero--night .fp-hero__facts li > span { white-space: nowrap; }
  body.pc-root .fp-hero--night .fp-hero__pic { aspect-ratio: 4 / 3; }
  body.pc-root .fp-cards { position: static; width: 100%; margin-top: 14px; }
  body.pc-root .fp-card--1, body.pc-root .fp-card--3 { transform: none; }
  body.pc-root .fp-hws { border-radius: 0 0 22px 22px; }
  body.pc-root .fp-hws__cards { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 30px; }
  body.pc-root .fp-hws__arrow { left: 50%; top: -22px; transform: translateX(-50%) rotate(90deg); }
  body.pc-root .fp-hws__trust { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 22px; border-radius: 22px; scrollbar-width: none; }
  body.pc-root .fp-hws__trust::-webkit-scrollbar { display: none; }
  body.pc-root .fp-hws__keys { width: 100%; }
  body.pc-root .fp-hws__keys .fp-key { width: 100%; justify-content: center; }
}
@media (min-width: 900px) and (max-width: 1100px) { body.pc-root .fp-steps { flex-direction: column; } body.pc-root .fp-step__arrow { display: none; } }
/* the night hero over the source's own rules: the header's words, the step tiles (the home's list rules gave them a surface), the seam */
body.pc-root.pc-guest.pk .pc-header .pc-nav__link { color: #c3cde0 !important; }
body.pc-root.pc-guest.pk .pc-header .pc-nav__link:hover, body.pc-root.pc-guest.pk .pc-header .pc-nav__link[aria-current="page"] { color: #fff !important; }
body.pc-root.pc-guest.pk .pc-header .pc-btn--ghost, body.pc-root.pc-guest.pk .pc-header .pc-btn--line { color: #eaf0fa !important; }
body.pc-root.pc-guest.pk .pc-header .pc-iconbtn, body.pc-root.pc-guest.pk .pc-header .pc-burger summary { color: #eaf0fa !important; }
body.pc-root .fp-hero--night { border-radius: 0 !important; }
body.pc-root .fp-hero--night .fp-steps, body.pc-root .fp-hero--night .fp-step { background: none !important; box-shadow: none !important; border: 0 !important; }
body.pc-root .fp-hero--night .fp-step { padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
body.pc-root .fp-hero--night .fp-step__tile { background: rgb(0 179 255 / .14) !important; color: #5cc8ff !important; }
body.pc-root .fp-hero--night .fp-step__txt b { color: #eaf0fa !important; }
body.pc-root .fp-hero--night .fp-step__txt small { color: #aab8d0 !important; }
body.pc-root .fp-hero--night .fp-hero__facts { gap: 6px 0; }
body.pc-root .fp-hero--night .fp-hero__facts li { padding: 0 12px; }
body.pc-root .fp-hero--night .fp-hero__facts a, body.pc-root .fp-hero--night .fp-hero__facts li > span { font-size: 13.5px; white-space: nowrap; }
body.pc-root .fp-hws { margin-top: -1px !important; }
body.pc-root .pn-hm .fp-hws__cards, body.pc-root .pn-hm .fp-hws__card, body.pc-root .pn-hm .fp-hws__trust { background-color: transparent; }
body.pc-root .pn-hm .fp-hws__card { background: rgb(255 255 255 / .05) !important; }
body.pc-root .pn-hm .fp-hws__trust { background: rgb(255 255 255 / .05) !important; }
/* the trust row of the hero in one line on a desktop (five words, thin dividers), the facts a little smaller */
@media (min-width: 900px) { body.pc-root .fp-hero--night .fp-hero__facts li { padding: 0 10px; } body.pc-root .fp-hero--night .fp-hero__facts a, body.pc-root .fp-hero--night .fp-hero__facts li > span { font-size: 13px; gap: 6px; } }

/* ---------------------------------------------------------------- the seller-first landing (owner brief 11.11.): the hero's process indicator,
   the how-it-works previews, 3 your tools to grow (light, the studio mockup a dark glass panel), 4 your content, your rules (split),
   5 get discovered (the creator rail + the floating card), 7 the final key (blue gradient). Alternating layouts, no second 3-card grid
   of the same kind, electric blue, tonal surfaces, 44 px targets. */
body.pc-root .fp-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 18px 9px 14px; border-radius: 999px; background: rgb(0 179 255 / .12); color: #0050d0; font: 700 15px/1.2 'Nunito', sans-serif; }
body.pc-root .fp-pill .fp-ico { color: #0062ff; }
/* 1 · the process indicator at the hero's foot */
body.pc-root .fp-pi { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
body.pc-root .fp-pi__step { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; font: 800 14px/1.2 'Nunito', sans-serif; color: #eaf0fa; text-transform: uppercase; letter-spacing: .08em; }
body.pc-root .fp-pi__step + .fp-pi__step::before { content: ''; position: absolute; left: -22px; top: 50%; width: 44px; height: 2px; background: linear-gradient(90deg, rgb(0 179 255 / .2), #00b3ff); }
body.pc-root .fp-pi__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(0 179 255 / .18); color: #5cc8ff; font: 800 13px/1 'Nunito', sans-serif; box-shadow: 0 0 0 1px rgb(0 179 255 / .35); }
/* 2 · the previews in the how-it-works cards */
body.pc-root .fp-hws__mini--req { display: block; padding: 10px; }
body.pc-root .fp-hws__mini--req .fp-hws__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 0; background: none; box-shadow: none; }
body.pc-root .fp-hws__mini--req .fgb-card__pic { width: 72px; height: 54px; border-radius: 10px; overflow: hidden; }
body.pc-root .fp-hws__mini--req .fgb-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.pc-root .fp-hws__mini--req .fgb-card__body { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-content: center; color: #eaf0fa; font: 600 12px/1.3 var(--body, 'Inter', sans-serif); }
body.pc-root .fp-hws__mini--req .fgb-card__budget { font: 800 16px/1.2 'Nunito', sans-serif; color: #5cc8ff; }
body.pc-root .fp-hws__mini--req .fgb-card__type { color: #aab8d0; }
body.pc-root .fp-hws__mini--req .fgb-card__left { display: inline-flex; align-items: center; gap: 4px; color: #aab8d0; font-size: 11.5px; }
body.pc-root .fp-hws__mini--req q { display: block; margin-top: 8px; quotes: none; font: 500 13px/1.4 var(--body, 'Inter', sans-serif); color: #aab8d0; }
body.pc-root .fp-hws__mini--form { display: grid; gap: 8px; }
body.pc-root .fp-hws__pics { position: relative; height: 84px; }
body.pc-root .fp-hws__pics .fp-hws__pic { height: 70px; width: 48%; }
body.pc-root .fp-hws__pics .fp-hws__pic--1 { left: 2%; top: 6px; }
body.pc-root .fp-hws__pics .fp-hws__pic--2 { left: 34%; top: 0; }
body.pc-root .fp-hws__pics .fp-hws__plus { right: 6%; bottom: 0; width: 32px; height: 32px; }
body.pc-root .fp-hws__field { display: grid; gap: 3px; }
body.pc-root .fp-hws__field small { font: 600 11px/1.2 var(--body, 'Inter', sans-serif); color: #7f8fab; }
body.pc-root .fp-hws__input { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(0 179 255 / .45); color: #eaf0fa; font: 800 16px/1 'Nunito', sans-serif; }
body.pc-root .fp-hws__input i { font-style: normal; color: #5cc8ff; }
body.pc-root .fp-hws__teaser { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--body, 'Inter', sans-serif); color: #3ddc97; }
body.pc-root .fp-hws__send { display: grid; place-items: center; height: 36px; border-radius: 999px; background: #0062ff; color: #fff; font: 800 13px/1 'Nunito', sans-serif; }
/* 3 · your tools to grow (owner 11.11.: «gequetscht … rumpelig» → one rhythm: 96 / 56 px band padding, the pill clear of the edge,
   a 24 px gap scale, 28 px radii like the hero cards, the showcase and the wide «Reach buyers» card aligned to the same columns) */
body.pc-root .pn-hm-sec.fp-tl { position: relative; overflow: hidden; padding: var(--fp-sec-t) 0 var(--fp-sec-b) !important; background: #f3f8ff; color: #0b1020; }   /* the home's one scale (--fp-sec-*, set on .pn-hm below); !important: the base zeroes a section's top after another section */
body.pc-root .fp-tl__glow { position: absolute; z-index: 0; right: -10%; top: -10%; width: 50vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; filter: blur(50px); background: radial-gradient(circle, rgb(0 179 255 / .16), transparent 70%); pointer-events: none; }
body.pc-root .fp-tl__wrap { position: relative; z-index: 1; }
body.pc-root .fp-tl__head { max-width: 760px; margin: 0; }
body.pc-root .fp-tl__head .fp-pill { margin: 0; }
body.pc-root .fp-tl__h { margin: 22px 0 0 !important; font: 900 clamp(32px, 4vw, 52px)/1.08 'Nunito', sans-serif !important; letter-spacing: -.02em !important; color: #0b1020 !important; }
body.pc-root .fp-tl__sub { margin: 16px 0 0; max-width: 640px; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-tl__show { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 48px; padding: 40px; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px rgb(10 42 107 / .08); }
body.pc-root .fp-tl__copy { min-width: 0; }
body.pc-root .fp-tl__k { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 800 13px/1.2 'Nunito', sans-serif; color: #0050d0; text-transform: uppercase; letter-spacing: .08em; }
body.pc-root .fp-tl__h3 { margin: 12px 0 0 !important; font: 800 clamp(24px, 2.4vw, 32px)/1.15 'Nunito', sans-serif !important; letter-spacing: -.01em !important; color: #0b1020 !important; }
body.pc-root .fp-tl__h4 { display: flex; align-items: center; gap: 8px; margin: 0 !important; font: 800 19px/1.2 'Nunito', sans-serif !important; color: #0b1020 !important; }
body.pc-root .fp-tl__h4 .fp-ico { color: #0062ff; flex: none; }
body.pc-root .fp-tl__p { margin: 12px 0 0; font: 500 16px/1.55 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-tl__list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
body.pc-root .fp-tl__list li { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--body, 'Inter', sans-serif); color: #0b1020; }
body.pc-root .fp-tl__list .fp-ico { color: #0062ff; flex: none; }
/* the studio mockup: a dark glass panel — the template rail, the editor tabs, the post preview */
body.pc-root .fp-studio { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, #121a2b, #0b1020); color: #eaf0fa; box-shadow: 0 24px 60px rgb(11 16 32 / .35); }
body.pc-root .fp-studio__tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
body.pc-root .fp-studio__lbl { grid-column: 1 / -1; font: 700 11px/1.2 'Nunito', sans-serif; color: #7f8fab; text-transform: uppercase; letter-spacing: .08em; }
body.pc-root .fp-studio__tpl { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; opacity: .7; }
body.pc-root .fp-studio__tpl.is-on { opacity: 1; box-shadow: 0 0 0 2px #00b3ff; }
body.pc-root .fp-studio__main { display: grid; gap: 12px; min-width: 0; align-content: start; }
body.pc-root .fp-studio__tabs { display: flex; gap: 6px; }
body.pc-root .fp-studio__tabs span { align-self: start; padding: 7px 12px; border-radius: 999px; background: rgb(255 255 255 / .06); font: 700 12px/1.2 'Nunito', sans-serif; color: #aab8d0; }
body.pc-root .fp-studio__tabs span.is-on { background: #0062ff; color: #fff; }
body.pc-root .fp-studio__post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 16px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
body.pc-root .fp-studio__canvas { grid-row: 1 / 3; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
body.pc-root .fp-studio__meta { display: flex; align-items: center; gap: 8px; }
body.pc-root .fp-studio__av { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #5cc8ff, #0062ff); flex: none; }
body.pc-root .fp-studio__meta b { display: block; font: 800 13px/1.2 'Nunito', sans-serif; color: #eaf0fa; }
body.pc-root .fp-studio__meta small { display: block; font: 500 11.5px/1.2 var(--body, 'Inter', sans-serif); color: #5cc8ff; }
body.pc-root .fp-studio__cap { margin: 0; font: 500 13px/1.45 var(--body, 'Inter', sans-serif); color: #aab8d0; }
/* the wide «Reach buyers» card: the head with the real number, two ways side by side */
body.pc-root .fp-tl__reach { display: grid; gap: 28px; margin-top: 24px; padding: 40px; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px rgb(10 42 107 / .08); }
body.pc-root .fp-tl__reach-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
body.pc-root .fp-tl__count { display: grid; justify-items: end; gap: 2px; margin: 0; padding: 14px 22px; border-radius: 20px; background: #e8f4ff; text-align: right; }
body.pc-root .fp-tl__count b { font: 900 clamp(28px, 2.6vw, 36px)/1 'Nunito', sans-serif; letter-spacing: -.02em; color: #0050d0; }
body.pc-root .fp-tl__count span { font: 600 13px/1.3 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-tl__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
body.pc-root .fp-tl__way { display: flex; flex-direction: column; min-width: 0; padding: 28px; border-radius: 22px; background: #f3f8ff; }
body.pc-root .fp-tl__way .fp-tl__p { margin-top: 10px; }
body.pc-root .fp-tl__board { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
body.pc-root .fp-tl__board > li { list-style: none; }
body.pc-root .fp-tl__note { margin: 12px 0 0; font: 600 11px/1.3 var(--body, 'Inter', sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #7f8fab; }
/* the Broadcast send-to preview (the creator app's control, static) */
body.pc-root .fp-cast { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgb(10 42 107 / .08); }
body.pc-root .fp-cast__file { display: flex; align-items: center; gap: 12px; font: 800 14px/1.2 'Nunito', sans-serif; color: #0b1020; }
body.pc-root .fp-cast__thumb { display: block; width: 48px; height: 60px; border-radius: 10px; overflow: hidden; flex: none; }
body.pc-root .fp-cast__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.pc-root .fp-cast__lbl { margin: 0; font: 700 11px/1.2 'Nunito', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7f8fab; }
body.pc-root .fp-cast__opts { display: flex; flex-wrap: wrap; gap: 8px; }
body.pc-root .fp-cast__opts span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #f3f8ff; font: 700 13px/1.2 'Nunito', sans-serif; color: #3c465d; box-shadow: inset 0 0 0 1.5px rgb(10 42 107 / .08); }
body.pc-root .fp-cast__opts span.is-on { background: #0062ff; color: #fff; box-shadow: none; }
body.pc-root .fp-cast__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; background: #0b1020; color: #fff; font: 800 13.5px/1 'Nunito', sans-serif; justify-self: start; }
body.pc-root .fp-tl__keys { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; }
body.pc-root .fp-tl__keys .fp-key { min-height: 56px; padding: 0 26px; gap: 10px; font: 800 17px/1 'Nunito', sans-serif; }
body.pc-root .fp-tl__line { margin: 0; font: 600 14px/1.3 var(--body, 'Inter', sans-serif); color: #3c465d; }
@media (max-width: 1100px) {
  body.pc-root .fp-tl__show { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.pc-root .fp-tl__ways { grid-template-columns: minmax(0, 1fr); }
}
/* 4 · your content, your rules (the light split) */
body.pc-root .fp-rl { padding: var(--fp-sec-t) 0 var(--fp-sec-b) !important; background: #fff; color: #0b1020; }
body.pc-root .fp-rl__wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
body.pc-root .fp-rl__pic { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 24px 60px rgb(10 42 107 / .14); }
body.pc-root .fp-rl__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
body.pc-root .fp-rl__card { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgb(10 42 107 / .18); }
body.pc-root .fp-rl__av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #e8f4ff; color: #0062ff; grid-row: 1 / 3; }
body.pc-root .fp-rl__who b { display: block; font: 800 14px/1.2 'Nunito', sans-serif; color: #0b1020; }
body.pc-root .fp-rl__who small { display: block; font: 500 12px/1.3 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-rl__chips { display: flex; gap: 6px; }
body.pc-root .fp-rl__chips span { padding: 3px 9px; border-radius: 999px; background: #e8f4ff; font: 700 11px/1.3 'Nunito', sans-serif; color: #0050d0; }
body.pc-root .fp-rl__kick { color: #0050d0; }
body.pc-root .fp-rl__h { margin: 10px 0 0 !important; font: 900 clamp(32px, 4vw, 52px)/1.08 'Nunito', sans-serif !important; letter-spacing: -.02em !important; color: #0b1020 !important; }
body.pc-root .fp-rl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 28px 0 0; padding: 0; list-style: none; }
body.pc-root .fp-rl__list li { display: flex; gap: 12px; align-items: flex-start; }
body.pc-root .fp-rl__list li > span:last-child { display: grid; gap: 3px; }
body.pc-root .fp-rl__list b { font: 800 16px/1.25 'Nunito', sans-serif; color: #0b1020; }
body.pc-root .fp-rl__list li > span:last-child > span { font: 500 14px/1.45 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-rl__well { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: #e8f4ff; color: #0062ff; }
body.pc-root .fp-rl__payout { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font: 500 15px/1.45 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-rl__keys { margin-top: 24px; }
body.pc-root .fp-rl__keys .fp-key { min-height: 56px; padding: 0 26px; gap: 10px; font: 800 17px/1 'Nunito', sans-serif; }
body.pc-root .fp-rl__fine { margin-top: 14px; }
/* 5 · get discovered (the creator rail + the floating profile card) */
body.pc-root .fp-dc { padding: var(--fp-sec-t) 0 var(--fp-sec-b) !important; background: #f3f8ff; color: #0b1020; }
body.pc-root .fp-dc__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: center; margin-top: 32px; }
body.pc-root .fp-dc__rail { display: flex; gap: 16px; margin: 0; padding: 6px 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
body.pc-root .fp-dc__rail::-webkit-scrollbar { display: none; }
body.pc-root .fp-dc__tile { flex: 0 0 200px; scroll-snap-align: start; transition: transform .2s ease; }
body.pc-root .fp-dc__tile:hover { transform: translateY(-3px); }
body.pc-root .fp-dc__card { display: grid; gap: 10px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgb(10 42 107 / .12); }
body.pc-root .fp-dc__av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #e8f4ff; color: #0062ff; }
body.pc-root .fp-dc__ch { font: 800 18px/1.2 'Nunito', sans-serif; color: #0b1020; }
body.pc-root .fp-dc__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.pc-root .fp-dc__list li { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--body, 'Inter', sans-serif); color: #3c465d; }
body.pc-root .fp-dc__list .fp-ico { color: #0062ff; }
body.pc-root .fp-dc__key { min-height: 48px; padding: 0 20px; font: 800 15px/1 'Nunito', sans-serif; justify-content: center; }
body.pc-root .fp-dc__all { margin-top: 18px; }
body.pc-root .fp-dc__all .pn-hm-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
/* 7 · the final key */
body.pc-root .fp-fn { padding: var(--fp-sec-t) 0 var(--fp-sec-b) !important; background: linear-gradient(135deg, #0062ff 0%, #00b3ff 100%); color: #fff; text-align: center; }
body.pc-root .fp-fn__wrap { display: flex; flex-direction: column; align-items: center; }
body.pc-root .fp-fn__h { margin: 0 !important; font: 900 clamp(34px, 4.6vw, 60px)/1.06 'Nunito', sans-serif !important; letter-spacing: -.02em !important; color: #fff !important; }
body.pc-root .fp-fn__sub { max-width: 620px; margin: 16px 0 0; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--body, 'Inter', sans-serif); color: rgb(255 255 255 / .88); }
body.pc-root .fp-fn__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
body.pc-root .fp-fn .fp-key { min-height: 56px; padding: 0 26px; gap: 10px; font: 800 17px/1 'Nunito', sans-serif; }
body.pc-root .fp-fn .fp-key--onblue { background: #0b1020; color: #fff; box-shadow: 0 14px 34px rgb(11 16 32 / .35); }
body.pc-root .fp-fn .fp-key--onblue:hover { background: #121a2b; }
body.pc-root .fp-fn .fp-key--ghost { background: rgb(255 255 255 / .16); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); }
body.pc-root .fp-fn .fp-key--ghost:hover { background: rgb(255 255 255 / .26); }
body.pc-root .fp-fn__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 26px 0 0; padding: 0; list-style: none; }
body.pc-root .fp-fn__trust li { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--body, 'Inter', sans-serif); color: rgb(255 255 255 / .92); }
/* motion: a fade-in as a section scrolls into view (scroll-driven, CSS only, where the browser has it), the hero cards float, hover lifts */
@supports (animation-timeline: view()) {
  body.pc-root .fp-reveal { animation: fp-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 28%; }
}
@keyframes fp-reveal { from { opacity: .001; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fp-float { 0%, 100% { transform: translateY(0) translateX(var(--fp-fx, 0)); } 50% { transform: translateY(-6px) translateX(var(--fp-fx, 0)); } }
body.pc-root .fp-card { animation: fp-float 6s ease-in-out infinite; }
body.pc-root .fp-card--1 { --fp-fx: -34px; transform: none; animation-delay: 0s; }
body.pc-root .fp-card--2 { animation-delay: 1.2s; }
body.pc-root .fp-card--3 { --fp-fx: -16px; transform: none; animation-delay: 2.4s; }
body.pc-root .fp-key { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  body.pc-root .fp-reveal, body.pc-root .fp-card { animation: none !important; opacity: 1; transform: translateX(var(--fp-fx, 0)); }
  body.pc-root .fp-key, body.pc-root .fp-tl__card, body.pc-root .fp-dc__tile { transition: none; }
}
/* dark theme twins of the light sections */
html[data-theme="dark"] body.pc-root .pn-hm-sec.fp-tl, html[data-theme="dark"] body.pc-root .fp-dc { background: #0f1626; color: #eaf0fa; }
html[data-theme="dark"] body.pc-root .fp-rl { background: #0b1020; color: #eaf0fa; }
html[data-theme="dark"] body.pc-root :is(.fp-tl__h, .fp-tl__h3, .fp-rl__h, .fp-dc__h, .fp-dc__ch, .fp-rl__list b, .fp-tl__list li, .fp-rl__who b) { color: #eaf0fa !important; }
html[data-theme="dark"] body.pc-root :is(.fp-tl__sub, .fp-tl__p, .fp-tl__line, .fp-rl__list li > span:last-child > span, .fp-rl__payout, .fp-dc__list li, .fp-rl__who small) { color: #aab8d0; }
html[data-theme="dark"] body.pc-root :is(.fp-tl__show, .fp-tl__card, .fp-tl__reach, .fp-dc__card) { background: #172238; box-shadow: 0 20px 50px rgb(0 0 0 / .35); }
html[data-theme="dark"] body.pc-root :is(.fp-tl__way, .fp-cast__opts span) { background: #1e2b45; }
html[data-theme="dark"] body.pc-root .fp-cast { background: #121a2b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
html[data-theme="dark"] body.pc-root :is(.fp-cast__file, .fp-tl__h4, .fp-cast__opts span) { color: #eaf0fa; }
html[data-theme="dark"] body.pc-root .fp-cast__opts span.is-on { background: #0062ff; color: #fff; }
html[data-theme="dark"] body.pc-root .fp-tl__count { background: #1e2b45; }
html[data-theme="dark"] body.pc-root .fp-tl__count b { color: #5cc8ff; }
html[data-theme="dark"] body.pc-root .fp-tl__count span { color: #aab8d0; }
html[data-theme="dark"] body.pc-root :is(.fp-tl__board .fgb-card, .fp-page, .fp-rl__well, .fp-dc__av, .fp-rl__chips span, .fp-rl__av) { background: #1e2b45; color: #eaf0fa; }
html[data-theme="dark"] body.pc-root .fp-tl__board .fgb-card__body { color: #aab8d0; }
html[data-theme="dark"] body.pc-root .fp-rl__card { background: rgb(18 26 43 / .9); }
html[data-theme="dark"] body.pc-root .fp-pill { background: rgb(0 179 255 / .16); color: #5cc8ff; }
html[data-theme="dark"] body.pc-root :is(.fp-tl__k, .fp-rl__kick, .fp-tl__board .fgb-card__budget) { color: #5cc8ff; }
@media (max-width: 899px) {
  body.pc-root .fp-pi { flex-wrap: wrap; justify-content: flex-start; gap: 8px 0; margin-top: 4px; }
  body.pc-root .fp-pi__step { padding: 0 14px 0 0; font-size: 12px; }
  body.pc-root .fp-pi__step + .fp-pi__step::before { display: none; }
  body.pc-root .fp-tl__show { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; margin-top: 32px; border-radius: 22px; }
  body.pc-root .fp-studio { grid-template-columns: minmax(0, 1fr); }
  body.pc-root .fp-studio__tpls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.pc-root .fp-studio__lbl { grid-column: 1 / -1; }
  body.pc-root .fp-tl__reach { gap: 20px; margin-top: 16px; padding: 20px; border-radius: 22px; }
  body.pc-root .fp-tl__reach-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  body.pc-root .fp-tl__count { justify-items: start; text-align: left; justify-self: start; }
  body.pc-root .fp-tl__ways { gap: 16px; }
  body.pc-root .fp-tl__way { padding: 20px; }
  body.pc-root .fp-tl__keys { margin-top: 32px; }
  body.pc-root .fp-tl__keys .fp-key, body.pc-root .fp-rl__keys .fp-key, body.pc-root .fp-fn .fp-key { width: 100%; justify-content: center; }
  body.pc-root .fp-rl__wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.pc-root .fp-rl__pic { aspect-ratio: 4 / 3; }
  body.pc-root .fp-rl__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.pc-root .fp-dc__stage { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body.pc-root .fp-dc__rail { margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); }
  body.pc-root .fp-dc__tile { flex: 0 0 170px; }
  body.pc-root .fp-fn__keys { flex-direction: column; width: 100%; }
}
/* the previews over the board's own card rules (assets/css/pnew-fpboard.css lays the body over the picture): a plain row here */
body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; align-items: center; gap: 10px; width: auto !important; min-height: 0 !important; padding: 8px !important; border-radius: 14px !important; aspect-ratio: auto !important; }
body.pc-root .pn-hm .fp-hws__mini--req .fgb-card { grid-template-columns: 72px minmax(0, 1fr) !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card__pic { position: static !important; width: 64px !important; height: 48px !important; aspect-ratio: auto !important; border-radius: 10px; overflow: hidden; }
body.pc-root .pn-hm .fp-hws__mini--req .fgb-card__pic { width: 72px !important; height: 54px !important; }
body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card__pic::before, body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card__pic::after, body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card::after { display: none !important; }
body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card__body { position: static !important; display: grid !important; grid-template-columns: auto auto !important; gap: 2px 10px !important; padding: 0 !important; background: none !important; color: #3c465d !important; text-shadow: none !important; opacity: 1 !important; }
body.pc-root .pn-hm .fp-hws__mini--req .fgb-card__body { color: #eaf0fa !important; }
body.pc-root .pn-hm :is(.fp-tl__board, .fp-hws__mini--req) .fgb-card__body > * { margin: 0 !important; color: inherit; }
body.pc-root .pn-hm .fp-tl__board .fgb-card__budget { color: #0050d0 !important; font: 800 16px/1.2 'Nunito', sans-serif !important; }
body.pc-root .pn-hm .fp-hws__mini--req .fgb-card__budget { color: #5cc8ff !important; font: 800 16px/1.2 'Nunito', sans-serif !important; }
body.pc-root .pn-hm .fp-tl__board.fgb__cards { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; gap: 8px !important; overflow: visible !important; margin: 18px 0 0 !important; padding: 0 !important; }
/* the studio mockup: the template rail two by two, the editor's rows at the top */
body.pc-root .fp-studio { grid-template-columns: 150px minmax(0, 1fr); align-items: start; }
body.pc-root .fp-studio__tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.pc-root .fp-studio__lbl { grid-column: 1 / -1; }
body.pc-root .fp-studio__tpl { aspect-ratio: 4 / 5; }
body.pc-root .fp-studio__main { align-content: start; }
body.pc-root .fp-studio__tabs span { align-self: start; line-height: 1.2; }
/* get discovered without a rail (the discover gate closed for guests, the local render): the profile card alone, centred and narrow */
body.pc-root .fp-dc__stage:not(:has(.fp-dc__rail)) { grid-template-columns: minmax(0, 420px); justify-content: center; }
html[data-theme="dark"] body.pc-root .pn-hm .fp-tl__board .fgb-card__body { color: #aab8d0 !important; }
html[data-theme="dark"] body.pc-root .pn-hm .fp-tl__board .fgb-card__budget { color: #5cc8ff !important; }
/* the creator rail (coordinator 11.11.): the picture untinted — the card's full shade becomes a bottom gradient (the lower 45 %) for the name line */
body.pc-root .fp-dc__tile .pc-scard > .pn-card-link::after { background: linear-gradient(180deg, transparent 55%, rgb(11 16 32 / .78) 100%) !important; }
body.pc-root .fp-dc__tile .pc-scard__media::before { background: none !important; }
body.pc-root .fp-dc__tile .pc-scard__cap::before { background: none !important; }
body.pc-root .fp-dc__tile .pc-scard__media > img { object-position: 50% 35%; }
/* the illustration labels (COPY-FACTS): the hero's notification cards and the previews say what they are */
body.pc-root .fp-cards__illu { align-self: flex-end; margin: 0 4px 2px 0; font: 700 10px/1.2 var(--body, 'Inter', sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #7f8fab; }
body.pc-root .fp-mini__illu { grid-column: 1 / -1; font: 700 9.5px/1.2 var(--body, 'Inter', sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #7f8fab; }
body.pc-root .fp-rl__intro { margin: 14px 0 0; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--body, 'Inter', sans-serif); color: #3c465d; }
html[data-theme="dark"] body.pc-root .fp-rl__intro { color: #aab8d0; }
body.pc-root .fp-fn__foot { margin: 22px 0 0; font: 500 13px/1.4 var(--body, 'Inter', sans-serif); color: rgb(255 255 255 / .8); }
/* the studio preview on a phone (owner 11.11. «gequetscht»): one column, the tabs wrap, the post preview stacks — nothing clipped */
body.pc-root .fp-studio { overflow: hidden; min-width: 0; }
@media (max-width: 899px) {
  body.pc-root .fp-studio { grid-template-columns: minmax(0, 1fr); }
  body.pc-root .fp-studio__tpls { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  body.pc-root .fp-studio__tabs { flex-wrap: wrap; }
  body.pc-root .fp-studio__post { grid-template-columns: minmax(0, 1fr); }
  body.pc-root .fp-studio__canvas { grid-row: auto; max-height: 300px; }
}
/* the tools key in the dark theme: the light key's white face would swallow the light ink — a navy face with the same inset line */
html[data-theme="dark"] body.pc-root .fp-tl__keys .fp-key--find { background: #172238; color: #eaf0fa; box-shadow: inset 0 0 0 2px rgb(92 200 255 / .28); }
html[data-theme="dark"] body.pc-root .fp-tl__keys .fp-key--find:hover { background: #1e2b45; }
/* home rhythm (owner 11.11. «da fehlt auch Abstand»): one vertical scale for every band, 96 px above and 88 px below the content
   on desktop, 64/56 on phones. The base drops a section's top padding after another section (.pn-hm-sec + .pn-hm-sec) — right
   when neighbours share a colour, wrong here where every band has its own; the night band «how it works» carries the scale on
   its wrap (the section stays flush for its rounded bottom); the home meets the footer without the main's bottom padding */
body.pc-root .pn-hm { --fp-sec-t: 96px; --fp-sec-b: 88px; }
body.pc-root .pn-hm .pn-hm-sec { padding: var(--fp-sec-t) 0 var(--fp-sec-b) !important; }
body.pc-root .pn-hm .fp-hws { padding: 0 !important; }
body.pc-root main.pn-main:has(.pn-hm) { padding-bottom: 0 !important; }
@media (max-width: 899px) {
  body.pc-root .pn-hm { --fp-sec-t: 64px; --fp-sec-b: 56px; }
}