/* pnew.css — generated by tools/build_css.sh, do not edit */
/* Self-hosted Google Fonts (OFL). Generated by tools/fetch_fonts.sh. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/Anton-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/Anton-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/Caveat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/Caveat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/InterTight-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/InterTight-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* panty.com v3 tokens: a literal port of the :root of design/v2/cast-mockup.html (owner 30.09.: the mockup is the spec).
   docs/design-v3-system.md §1 has the table. Every colour is a token; outside this file a colour is only ever var(--x).
   Block 1 = the mockup's own names and values (constants, the same in light and dark: brand objects keep their colour).
   Block 2 = the pnew role names every template and page file uses, pointed at the mockup values.
   The dark block and the auto-dark block are identical (tests/theme_test.php checks it). */
:root{
  /* ============ 1 · MOCKUP :root (cast-mockup.html l.11-21), 1:1 ============ */
  --duck: #E8F1F0; --duck-2: #D7E7E5; --duck-3: #C4DAD7;
  --pink: #FF9DB2; --pink-press: #F4849D; --pink-soft: #FFD3DD;
  --anthracite: #101719;            /* mockup --ink: the dark blocks, the ink button, text on paper objects */
  --card-dk: #172124;               /* mockup --card-dk: tiles and boxes on a dark block */
  --cream: #FBF5EC; --paper: #FFFDF8;
  --on-dark: #EAF2F2; --muted-dk: #9FB0B2; --muted-lt: #4B5B5E;
  --mline: rgba(128,128,128,.5);    /* mockup --line: THE line (owner: grey 50 %, never white), on paper and on chrome */
  --live: #1FA37A;                  /* mockup .chip b: the live dot */
  --ph-a: #D9E4E2; --ph-b: #CFDCDA; --ph-ink: #6A7B7D;   /* mockup .ph stripes: a missing photo */
  --fig-shadow: drop-shadow(0 24px 40px rgb(16 23 25 / .22));
  --rim-pink: drop-shadow(0 0 1px #FF9DB2) drop-shadow(0 20px 40px rgb(0 0 0 / .45));
  --dash: rgb(16 23 25 / .28);      /* the dashed seam inside care labels, the arch */
  --dash-2: rgb(16 23 25 / .35);    /* the dashed seam inside the big care label */
  --stamp-fill: rgb(232 241 240 / .55);
  --mt-light: rgb(232 241 240 / .85); --mt-dark: rgb(16 23 25 / .85);   /* masking tape on notes */
  --btn-edge-ink: #000000;          /* .btn--ink box-shadow 0 6px 0 #000 */
  --btn-edge-on-accent: color-mix(in srgb, var(--pink) 58%, var(--anthracite));   /* owner 05.10.: the black button on a pink card needs an edge that is not its own face */
  --white: #FFFFFF;                 /* .btn--ink / .real / .sticker--black text */
  /* TYPE SYSTEM "SLEEK" (owner 08.10., variant C of docs/variants-08-10.md; replaces the Anton poster system of 06.10.).
     One face for everything: Inter Tight. Heads 700-800 in sentence case with tight tracking, buttons 600, numerals 700
     tabular, labels 600 without caps. --display and --display-tape stay as names (every rule that asked for the display
     face now gets Inter Tight); --display-lc is the wordmark only (the logo keeps Anton, lowercase, the one brand face). */
  --display: var(--body); --display-lc: "Anton", "Anton FBL", system-ui, sans-serif; --display-tape: var(--body);
  --body: "Inter Tight", system-ui, sans-serif; --label: var(--body); --hand: "Caveat", "Caveat FA", "Caveat FR", cursive;

  /* Mockup geometry (not in its :root, read off its selectors) */
  --wrap-max: 1280px; --wrap-pad: 56px;           /* .wrap */
  --hdr-h: 69px;                                  /* .hdr: .wrap 68 + the 1 px line under it */
  /* The scale: six sizes (phone values in the 700 block below; the 06.10. poster sizes in brackets). */
  --fs-xl: clamp(40px, 4.4vw, 58px);   /* 1 hero        .pc-h-xl            phone clamp(34px, 10.4vw, 44px)   [86 / 72] */
  --fs-l: 44px;                        /* 2 statement   .pc-h-l             phone 32                          [92 / 54] */
  --fs-m: 34px;                        /* 3 page head   .pc-h-m, page h1    phone 27                          [58 / 40] */
  /*   the page h1 is --fs-h1, one step per tier: outside 34 / phone 27, inside 24 / phone 22, the selling moments inside
       (wizards, membership, Premium wall) 30 / phone 26 (UX 17.10. #81; the INSIDE TIER below sets it, no page sets its own) */
  --fs-section: 21px;                  /* 4 section     .pc-h-card, card and panel heads, prose h2/h3   phone 18 [34 / 30] */
  --fs-subhead: 16px;                  /* 5 sub head    FAQ questions, notes, reviews, plan names       phone 15 [24 / 22] */
  --btn-fs: 14px; --btn-sm-fs: 13px;   /* 6 action      buttons 600, sentence case                              [18 / 15] */
  --lh-hero: 1.04; --lh-head: 1.12; --lh-sub: 1.2; --lh-tape: 1.28;   /* tape: the line pitch is the tape box (Inter Tight content area 1.21 + pad .06), so the next line's tape never covers a descender (N4 #82) */
  --tr-h: -.025em; --tr-head: -.018em; --tr-btn: 0em; --tr-num: -.01em;
  --tape-pad: .02em .14em .04em;
  --r-label: 6px; --r-stamp: 8px; --r-icon: 10px; --r-rules: 10px; --r-pcard: 12px; --r-tile: 12px;
  --r-box: 14px; --r-door: 14px; --r-empty: 14px; --r-note: 4px;

  /* ============ 2 · pnew role names (aliases onto the mockup) ============ */
  /* photo house look (owner 06.10., docs/photo-look-06-10.md): ONE dial, --photo-look 0 off · 1 subtle · 1.6 medium (default) ·
     2.2 strong. Every amount below is "per 1.0 of the dial" and the rules multiply it by --photo-look, so the three strengths
     are one number. The server still normalises each card photo (lib/grade.php); the CSS then pulls the whole set together:
     img filter  = owner 09.10. ("washed out, needs more power"): a little MORE saturation and contrast, no lift
     ::before    = colour pull: --photo-tint in blend mode "color" (hue + saturation of the tint, the photo keeps its light)
     ::after     = tone: one multiply layer of warm paper x vignette x foot shade x fine grain (--photo-shade/-foot/-grain)
     --photo-ease is the hover multiplier (cards show more true colour under the pointer, --photo-hover).
     Same values in light and dark (the theme blocks below do not touch them). */
  --photo-look: 1.6; --photo-ease: 1; --photo-hover: .4;
  --photo-desat: -.06; --photo-contrast: .1; --photo-lift: -.02; --photo-wash: .05; --photo-tone: .12;   /* owner 09.10.: was .07 / -.05 / .04 / .09 / .3 (faded) — the light pink pull stays */
  --photo-tint: #D9A99C; --photo-blend: color; --photo-tone-blend: multiply;
  --photo-shade: radial-gradient(125% 100% at 50% 40%, #FFEFE8 40%, #B9B4B6 100%);
  --photo-foot: linear-gradient(180deg, #FFFFFF 58%, #D8D2D2 100%);
  --photo-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='.3 0 0 0 .81  .3 0 0 0 .81  .3 0 0 0 .81  0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Premium: the ink label with the pink mark (mockup .real). --prem-bg is themed below. */
  --on-prem: var(--white);
  --prem-stripe: color-mix(in srgb, var(--prem-bg) 88%, var(--accent));
  /* The gold-bronze Premium pill (owner 15.10.: "goldbronze mässig und animiert", components.css .pc-chip--premium): a brand
     object, the same in light and dark. Rest = light metal with the dark bronze ink (>= 5.2:1 on every stop); chosen =
     dark bronze with the pale gold ink (>= 6.4:1); the sheen is the slow light that sweeps over the rest state. */
  --prem-metal: linear-gradient(135deg, #C89B4A 0%, #F3DA94 38%, #D9AE5C 62%, #B9863A 100%);
  --prem-metal-ink: #2A1904;
  --prem-metal-dk: linear-gradient(135deg, #3B2609 0%, #6E4A17 50%, #3B2609 100%);
  --prem-metal-dk-ink: #FCE6A6;
  --prem-metal-bevel: inset 0 1px 0 rgb(255 246 214 / .75), inset 0 -1px 0 rgb(110 70 20 / .35);
  --prem-metal-ring: inset 0 0 0 1px #D9AE5C;
  --prem-sheen: linear-gradient(105deg, transparent 38%, rgb(255 250 232 / .7) 50%, transparent 62%);
  /* Chrome inks (header, footer, tabbar: mockup .hdr/.ftr) and the 50 % grey chrome line. */
  --on-chrome: var(--on-dark); --on-chrome-2: var(--muted-dk);
  --chrome-line: rgba(128,128,128,.5);   /* = --mline */
  --chrome-press: color-mix(in srgb, var(--chrome-2) 80%, var(--on-chrome));
  --chrome-tint: color-mix(in srgb, var(--on-chrome) 16%, transparent);
  --chrome-tint-press: color-mix(in srgb, var(--on-chrome) 26%, transparent);
  /* Cream stickers, knobs, text on photos (mockup .sticker--cream). On-sticker = the anthracite ink. */
  --sticker-cream: var(--cream); --on-sticker: var(--anthracite);

  /* Tonal steps (owner 05.10.: "alles durch unterschiedlich helle Flächen, nicht durch Linien"). The member area is
     built from four tones, never from borders: ground (--bg / --app-ground) → panel (--surface, one step up in dark,
     paper in light) → well (--sunken: the in-panel tile, the chat bubble in, the pill at rest, the alert) → hover
     (--surface-2). Fields are filled, not outlined: --field on the ground, --field-in inside a panel (components.css
     re-points --field there); the ring on focus is the only edge a field gets. --chrome-well = the tonal square /
     search pill on the chrome (header icon squares, header search). No borders (owner 18.10.): --line (grey 50 %) is
     transparent on every page except admin (the NO BORDERS block at the foot); separation is a surface step. Only
     fields (3:1 edge), focus rings, error states and the quiet listing-card edge (--t-card-edge) draw a line. */
  --chrome-well: color-mix(in srgb, var(--on-chrome) 9%, var(--chrome));
  --chrome-well-hover: color-mix(in srgb, var(--on-chrome) 16%, var(--chrome));
  /* State layers (one hover/press step per surface, never a new colour). */
  --surface-2: color-mix(in srgb, var(--sunken) 89%, var(--ink));
  --ink-press: color-mix(in srgb, var(--ink) 86%, var(--bg));
  --accent-soft-press: color-mix(in srgb, var(--accent-soft) 85%, var(--accent));
  --on-accent-2: color-mix(in srgb, var(--on-accent) 75%, transparent);
  --on-accent-press: color-mix(in srgb, var(--on-accent) 12%, transparent);
  --accent-well: color-mix(in srgb, var(--sticker-cream) 55%, var(--accent));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --danger-line: color-mix(in srgb, var(--danger) 40%, transparent);
  --hand-ink: var(--pink);          /* mockup .hand: Caveat notes are pink (ink on a pink block) */
  /* T41: pink that carries information (median prices, stars, proof %, draft band) on light grounds: >= 5:1 on paper
     and duck. Decorative Caveat notes stay --pink. Dark theme: plain --pink (it reads on the dark grounds). */
  --pink-ink: #B03357;       /* the same on paper objects in both themes (they keep their light colours) */
  --pink-text: var(--pink-ink);
  /* v2 glow is gone (mockup buttons have a hard edge, no glow). Kept as a no-op shadow for page files. */
  --glow: 0 0 0 0 transparent;
  --pulse-ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --on-blush: var(--on-accent);
  --ring-story: var(--accent);
  --star: var(--accent);

  /* Overlays */
  --bg-veil: color-mix(in srgb, var(--bg) 90%, transparent);
  /* direct order wizard (owner 06.10., pages/order.css; mockup design/v2/direct-order-wizard.html): the page glow that warms
     with every step (--do-heat is set by order.js, 0 to 22), the sticky bars' veils, the card shade, the level ladder's fill */
  --do-heat: 0;
  --do-glow: radial-gradient(60% 60% at 50% 0%, rgb(255 157 178 / calc(var(--do-heat, 0) * 1%)), transparent 70%);
  --do-top-veil: color-mix(in srgb, var(--bg) 92%, transparent);
  --do-dock-veil: color-mix(in srgb, var(--chrome) 94%, transparent);
  --do-card-shade: linear-gradient(180deg, rgb(16 23 25 / .4) 0%, transparent 26%, transparent 52%, rgb(16 23 25 / .9) 100%);
  --do-foot-2: color-mix(in srgb, var(--on-dark) 78%, transparent);
  --do-ladder: linear-gradient(var(--pink-soft), var(--pink), var(--pink-press));
  --surface-veil: color-mix(in srgb, var(--surface) 65%, transparent);
  --dk-veil: color-mix(in srgb, var(--dk-bg) 72%, transparent);     /* a cast label on anthracite (art-director round 30.09.) */
  --pink-veil: color-mix(in srgb, var(--pink) 82%, transparent);    /* a cast label on pink */
  --glass: rgba(9,13,14,.36);
  --glass-strong: rgba(9,13,14,.6);
  --backdrop: color-mix(in srgb, var(--prem-bg) 95%, transparent);
  --on-media: var(--sticker-cream);
  --on-media-2: color-mix(in srgb, var(--on-media) 75%, transparent);
  --media-track: color-mix(in srgb, var(--on-media) 30%, transparent);
  --media-rule: color-mix(in srgb, var(--on-media) 45%, transparent);
  --media-dim: color-mix(in srgb, var(--on-sticker) 16%, transparent);
  --media-shade: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--prem-bg) 75%, transparent));
  --shade-card: linear-gradient(to bottom, var(--glass), transparent 22%, transparent 52%, color-mix(in srgb, var(--prem-bg) 72%, transparent));
  /* Seller card portrait (docs/sellercard-02-10.md): the caption sits on the photo, so these are the same in light and dark.
     --scard-shade = the faint top veil (glass like) + ambient foot; --scard-cap-shade rides on the caption, so a taller
     caption (premium kicker, a wrapped status) always carries its own shade (many stops, no band). */
  --scard-shade: linear-gradient(180deg, rgb(16 23 25 / .14) 0%, rgb(16 23 25 / 0) 16%, rgb(16 23 25 / 0) 55%, rgb(16 23 25 / .12) 75%, rgb(16 23 25 / .2) 100%);
  --scard-cap-shade: linear-gradient(180deg, rgb(16 23 25 / 0) 0%, rgb(16 23 25 / .1) 14%, rgb(16 23 25 / .32) 32%, rgb(16 23 25 / .58) 52%, rgb(16 23 25 / .76) 74%, rgb(16 23 25 / .84) 100%);
  /* adcard2 03.10.: the listing card's caption shade, lighter than the portrait's: only the foot of a product photo
     darkens (title + "@name" stay readable), the item's colour above it stays judgeable. */
  --pcard-cap-shade: linear-gradient(180deg, rgb(16 23 25 / 0) 0%, rgb(16 23 25 / .16) 22%, rgb(16 23 25 / .44) 50%, rgb(16 23 25 / .64) 78%, rgb(16 23 25 / .7) 100%);
  /* cards3 05.10. (owner: no box under the photo): Premium = a blush tint over the caption shade, on both card kinds. */
  --pcard-cap-blush: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 42%, transparent) 100%), var(--pcard-cap-shade);
  --scard-cap-blush: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 42%, transparent) 100%), var(--scard-cap-shade);
  --scard-ink: var(--cream); --scard-ink-2: rgb(251 245 236 / .76); --scard-ink-3: rgb(251 245 236 / .55);
  --scard-tshadow: 0 1px 2px rgb(16 23 25 / .4);
  --scard-glass: rgb(16 23 25 / .32); --scard-glass-hover: rgb(16 23 25 / .52);
  --ground-shadow: color-mix(in srgb, var(--anthracite) 55%, transparent);   /* 05.10.: a cut-out's soft ground shadow (hero) */
  --scard-online: #2FD27A; --scard-online-halo: 0 0 0 3px rgb(47 210 122 / .25);
  --shade-hero: linear-gradient(100deg, color-mix(in srgb, var(--chrome) 88%, transparent) 0%, color-mix(in srgb, var(--chrome) 64%, transparent) 55%, color-mix(in srgb, var(--chrome) 78%, transparent) 100%);
  --shade-hero-blur: linear-gradient(100deg, color-mix(in srgb, var(--chrome) 72%, transparent) 0%, color-mix(in srgb, var(--chrome) 44%, transparent) 55%, color-mix(in srgb, var(--chrome) 62%, transparent) 100%);
  --shade-hero-plain: linear-gradient(100deg, color-mix(in srgb, var(--chrome) 90%, transparent) 0%, color-mix(in srgb, var(--chrome) 55%, transparent) 70%, color-mix(in srgb, var(--chrome) 30%, transparent) 100%);
  --shade-paygate: linear-gradient(to bottom, transparent 45%, color-mix(in srgb, var(--scrim) 60%, transparent));
  /* Profile cover banner (detail.css .pn-dtcover): the foot shade on a photo, the brand-stripe fallback and its shade. */
  --shade-cover: linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--scrim) 70%, transparent));
  --shade-cover-plain: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--bg) 55%, transparent));
  --stripes-cover: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pink) 16%, var(--surface)) 0 14px, color-mix(in srgb, var(--pink) 30%, var(--surface)) 14px 28px);

  /* Skin ramp: avatar fallbacks only (never a surface or text). */
  --skin-50: #FCE0D0; --skin-100: #F9D3C0; --skin-200: #F2C4AE; --skin-300: #E2A98C; --skin-400: #D0907A;
  --skin-500: #C98767; --skin-600: #9A5A40; --skin-650: #8A5140; --skin-700: #7A4535; --skin-800: #5E3021; --skin-900: #2A120C;
  --skin: var(--skin-200);
  --hero-bg: #B08670;
  /* The pink arch (mockup .arch: flat --pink with a dashed seam). */
  --ph-arch: var(--pink);
  --duck-egg: var(--duck-2);
  --ph-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --ph-vignette: none;
  --ph-landing: linear-gradient(90deg, color-mix(in srgb, var(--skin) 75%, transparent) 0%, transparent 58%);
  /* Avatar fallbacks: the initial on a toned circle, toned by member id. A17 (owner 18.10., innen-50): ONE placeholder system —
     the initial in ink (--ink) on six muted tonal fills over --sunken (teal, slate, sand, sage, lilac, stone), never pink
     (pink is the one key and the unread mark), so it reads in both themes. g6 / g7 stay for the buyer masks (lock tokens). */
  --av-g0: color-mix(in srgb, #5FA8A0 26%, var(--sunken)); --av-g1: color-mix(in srgb, #8FA6C8 26%, var(--sunken));
  --av-g2: color-mix(in srgb, #C8B48F 26%, var(--sunken)); --av-g3: color-mix(in srgb, #9FBF8A 24%, var(--sunken));
  --av-g4: color-mix(in srgb, #B39FCC 26%, var(--sunken)); --av-g5: color-mix(in srgb, #A0A8AE 24%, var(--sunken));
  --av-g6: var(--av-g0); --av-g7: var(--anthracite);
  --av-ink: var(--ink); --av-ink-light: var(--on-dark);
  /* A14 (owner 18.10.): a key on a photo (remove X, turn, swap) — dark glass, never pale cream on the picture */
  --photo-key-bg: color-mix(in srgb, var(--anthracite) 62%, transparent);

  /* Paper objects (keep their colour in light and dark: care labels, notes, receipts, stamps, tape, pegs). */
  --obj-paper: var(--paper); --obj-cream: var(--cream); --obj-ink: var(--anthracite); --obj-ink-2: var(--muted-lt); --obj-ink-3: #2B3B3E;
  --obj-muted: #B9CCCB; --obj-muted-2: #788B8D; --obj-alarm: #B8324F;
  --obj-line: var(--dash); --obj-line-2: var(--dash-2); --obj-fill: rgba(16,23,25,.1);
  --tape-pink: color-mix(in srgb, var(--accent) 78%, transparent);
  --peg: var(--accent); --peg-2: #E56F8B; --peg-spring: #8F8F96; --rope: #7F9294;
  --cut-band: rgba(16,23,25,.35); --cut-bow: color-mix(in srgb, var(--sticker-cream) 55%, transparent);
  --cut-seam: color-mix(in srgb, currentColor 70%, #101719);

  /* Elevation. The mockup's cards carry NO shadow (a 1 px --mline border instead); only objects, notes, stickers,
     receipts and the frame float. --sh-1 / --sh-2 are therefore none; floating chrome uses the frame shadow. */
  --sh-knob: 0 2px 6px rgb(16 23 25 / .25);
  --sh-sticker: 0 6px 16px rgb(16 23 25 / .15);                 /* .sticker */
  --sh-cut: drop-shadow(0 24px 40px rgb(16 23 25 / .22));       /* .fig / .obj (= --fig-shadow) */
  --sh-band: 0 6px 16px rgb(16 23 25 / .15);
  --sh-print: 0 20px 40px rgb(16 23 25 / .12);                  /* .receipt */
  --sh-pola: 0 10px 24px rgb(16 23 25 / .14);
  --sh-label: 0 18px 30px rgb(0 0 0 / .4);                      /* .clabel-big */
  --sh-tag: drop-shadow(0 24px 40px rgb(16 23 25 / .22));
  --sh-receipt: 0 20px 40px rgb(16 23 25 / .12);                /* .receipt */
  --sh-note: 0 10px 24px rgb(16 23 25 / .14);                   /* .note */
  --sh-tape: 0 1px 3px rgb(16 23 25 / .18);
  --sh-lift: 0 10px 24px rgb(16 23 25 / .14);
  --sh-tape-hl: 0 10px 24px rgb(16 23 25 / .14);
  --sh-hand: 0 2px 10px rgb(16 23 25 / .3);
  --sh-frame: 0 30px 80px rgb(16 23 25 / .25);                  /* .frame: menus, sheets, dialogs, toasts */
  /* premium editorial pass (owner 27.10., outside only): photo cards float on a soft diffuse shadow instead of the 1 px
     edge, lift 3 px on hover; one overlay darkens the lower half of every photo card so the name always reads. */
  --sh-card: 0 8px 24px rgb(16 23 25 / .10);
  --sh-card-hover: 0 14px 36px rgb(16 23 25 / .16);
  --sh-floating: 0 18px 48px rgb(16 23 25 / .20);
  --sh-pink: 0 6px 18px rgb(244 132 157 / .28);
  --card-rim: inset 0 0 0 1px rgb(16 23 25 / .05);
  --r-card-x: 16px;
  --dur-card: 220ms;
  --card-overlay: linear-gradient(to bottom, transparent 35%, rgb(0 0 0 / .12) 55%, rgb(0 0 0 / .78) 100%);
  --card-cap-scrim: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .22) 60%, rgb(0 0 0 / .3) 100%);
  --btn-pink-grad: linear-gradient(180deg, #FFB0C1 0%, var(--pink) 45%, var(--pink-press) 100%);
  --btn-dk-grad: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .04));
  --btn-dk-grad-hover: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .06));
  --sh-pink-hover: 0 8px 22px rgb(244 132 157 / .3);
  --chip-glass: rgb(16 23 25 / .42);   /* the card's metadata chips on the photo */
  --chrome-grad: linear-gradient(180deg, #131C1F 0%, var(--chrome) 100%);
  --sh-chrome-soft: 0 1px 0 rgb(255 255 255 / .03), 0 10px 28px rgb(0 0 0 / .28);
  --font-hand: var(--hand);
  /* Care-label pictograms (mask shapes painted with currentColor). */
  --mask-tub: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.5c1.5-1.4 3-1.4 4.5 0s3 1.4 4.5 0 3-1.4 4.5 0 3 1.4 4.5 0L19 19H5z'/><path d='M4 4l16 17M20 4 4 21'/></svg>");
  --mask-bleach: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4 21 19H3z'/><path d='M5 5l14 15M19 5 5 20'/></svg>");
  --mask-iron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 17h16c0-4-2.5-7-7-7H8l-1-3'/><path d='M5 5l14 15M19 5 5 20'/></svg>");
  --mask-scribble: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M4 40C18 38 34 30 44 18c4-5 6-10 6-14M50 4l-8 6M50 4l4 9'/></svg>");
  --mask-stamp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.5 1.72'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --mask-zigzag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'><path d='M0 16V8l7-3 6 5 6-6 8 5 6-6 8 6 6-3 8 5 7-8 7 6 8-4 6 5 8-6 7 4 7-3 8 5 7-2v16z'/></svg>");
  --mask-rope: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M-2 2 Q 50 26 102 2' fill='none' stroke='black' stroke-width='2.5' vector-effect='non-scaling-stroke' stroke-linecap='round'/></svg>");
  /* Type: Inter Tight (heads, body, labels; --font-display = the head role), Anton (the wordmark), Caveat (notes only). */
  --font-display: var(--display);
  --font-sans: var(--body); --font-label: var(--label);
  --fs-h1: var(--fs-m); --fs-price-card: 15px;   /* --fs-h1: the page h1 step (scale, 3 above) */
  /* Numerals and pieces that carried their own size (Sleek 08.10.: set outside too, so no rule falls back to a poster size;
     the inside tier sets its own below): tile numeral, the listing's price, stat numerals, plan name, empty-state head,
     FAQ question / review head. */
  --fs-tile: 28px; --fs-price-l: 28px; --fs-price-m: 22px; --fs-num: 20px; --fs-plan: 18px; --fs-empty: 20px; --fs-sub-s: 16px;
  /* Shape (mockup radii) */
  --radius-sticker: var(--r-stamp); --radius-tile: var(--r-rules); --radius-card: var(--r-pcard); --radius-panel: var(--r-box);
  --radius-sheet: var(--r-empty); --radius-bubble: var(--r-pcard); --radius-full: 999px;
  /* Space + controls (Sleek 08.10.). Button: Inter Tight 600 14, padding 10/16 + 1 px border = 40 tall (phone 44); small
     34 (phone 40); radius 10; flat (no hard edge). Fields 42 (phone 44). */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --control-sm: 36px; --control-md: 40px; --control-btn: 42px; --control-field: 42px;   /* visual audit VM-008: keys as tall as fields */
  --control-lg: 48px;   /* art director 27.10. D-039: the large key was smaller than the 42 px fields */
  --btn-py: 10px; --btn-px: 16px;
  --btn-sm-py: 8px; --btn-sm-px: 12px;
  --r-btn: 10px; --r-btn-sm: 10px; --r-field: 10px; --r-field-foot: var(--r-field); --r-chip: 10px;   /* --r-field-foot: the filled field's lower corners (no borders 18.10.; round again since the underline went, owner 18.10.) */
  /* The column (mockup .wrap: max 1280 incl. 2 x 56 padding = 1168 content). Header, main and footer share it. */
  --panel-pad: 20px; --section-gap: 28px; --page-head-gap: 30px; --main-max: 1168px;
  --gutter: var(--wrap-pad);
  --col-pad: max(var(--gutter), calc((100% - var(--main-max)) / 2));
  /* Shell geometry (one phone breakpoint: <=700 / >=701, the mockup's container 700) */
  --header-h: var(--hdr-h);
  --flush-top: calc(var(--header-h) + env(safe-area-inset-top));
  --sticky-top: calc(var(--header-h) + var(--space-3));
  /* Wide member grid pages (owner 30.09.: "nicht so viel freie Flächen"): .pn-wide on the page root (layout.css) widens
     header, main and footer to --wide-max with --wide-gutter and tightens the page head (docs/design-v3-system.md §4.2a). */
  --wide-max: 1680px; --wide-gutter: 32px; --wide-head-gap: 18px; --wide-grid-gap: 16px;
  /* Member shell (docs/inner-grounding-01-10.md): every member page sits on the wide column; the page head is a band
     under the chrome (.pc-apphead), blocks below it keep one gap, page sections one bigger gap. */
  --app-top: 24px;          /* main top when the first block is its own anchor (profile cover, membership hero, chat panes) */
  --app-head-pb: 18px;      /* the head band's padding under its last line (above it: --app-top) */
  --app-gap: 16px;          /* between panels, cards and bars inside a page */
  --app-sec-gap: 28px;      /* between page sections (Premium row, New today, grid; profile blocks) */
  /* Row lists in a paper card (flush panels, alerts, chats, orders): the card keeps --list-pad, the rows are inset by
     --row-inset, so a row's avatar, the line between rows and the card head all start on the --panel-pad edge. */
  --list-pad: 8px; --row-inset: calc(var(--panel-pad) - var(--list-pad));
  --tabbar-h: 64px;
  --dock: calc(var(--space-4) + env(safe-area-inset-bottom));
  --dock-flush: env(safe-area-inset-bottom);   /* T17: a sticky bar that sits flush on the tab bar (no 16px air) */
  /* Motion */
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --ease-snap: cubic-bezier(.2,.9,.1,1);
  --ease-sheet: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-sway: cubic-bezier(.45,0,.55,1);
  --dur-press: 140ms; --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 450ms; --dur-enter: 600ms; --dur-print: 1400ms;
  --stagger: 70ms; --reveal-y: 16px;
  /* Vertical rhythm (mockup section paddings) */
  --sec-gap: 56px;        /* between landing sections (06.10.: 72) */
  --sec-gap-mega: 72px;   /* the big buy / sell blocks (06.10.: 96) */
  --sec-gap-stack: 32px;
  --sec-head-gap: 16px;   /* .sec-head margin-bottom */
  --mega-pad-top: 72px; --mega-pad-bot: 64px;
  --edge-h: 16px;
  /* Measures */
  --measure-prose: 640px; --measure-lede: 560px; --measure-note: 340px; --measure-mega: 14ch;
  /* Brand type scale */
  --fs-lede: 16px; --fs-sub: 14px; --fs-prose: 15.5px;
  /* art director 27.10.: the editorial family (buy, sell, about, safety, rules, FAQ, imprint, terms, guides) on one
     scale: lede, body, h2, h3, the gap between blocks, the extra room before a section head */
  --fs-ed-lede: 19px; --fs-ed-body: 17px; --fs-ed-h2: 26px; --fs-ed-h3: 19px; --ed-gap: 16px; --ed-sec: 32px;
  --fs-hand-s: 21px; --fs-hand: 24px; --fs-hand-l: 24px;
  --tr-label: 0em;   /* labels are sentence case, untracked (Sleek 08.10.; was .14em caps) */
  /* Tilts the mockup itself uses (stamp -9, sticker 7, note -1.2 / 1, care label -5, receipt 1.5, hand -2 / -3) */
  --tilt-xs: 0deg; --tilt-s: 0deg; --tilt-m: 0deg; --tilt-l: 0deg;   /* v3: no free tilt; only the mockup's own rotations (literal degrees on their components) */
  --tap: 44px;
  /* Landing glam pass (owner 30.09.: "sanfte Verläufe, mehr Glam, weniger KI-Slop"): geometry of the soft section edges */
  --lp-dome-h: 64px;                /* the flat arch a dark / pink block rises with over the section before it */
  --lp-lace-r: 11px;                /* the scalloped lace hem under the pink block */
  --lp-reveal-dur: 900ms;
}
/* Accented capitals (Á É Í Ê Ñ) rise above the cap line, Ç and ¿ hang: the head line-heights open up a little in
   es/fr/it/pt, and the tape gets head room so the accent stays on the pink. */
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)){--lh-hero: 1.12; --lh-head: 1.18; --lh-sub: 1.24; --lh-tape: 1.32; --tape-pad: .04em .14em .06em}   /* the tape opens with the lines: pitch 1.32 = box (content area + pad .1), so no tape covers the line above (N4 #82) */
/* Colour roles per theme. Light = the mockup page (duck egg, paper cards, anthracite ink). */
:root, [data-theme="light"]{
  color-scheme: light;
  --accent: #FF9DB2;
  --accent-press: #F4849D;
  --accent-soft: #FFD3DD;
  --accent-text: #B8324F;
  --on-accent: #101719;
  --pink-glyph: #A82D49;   /* visual audit VG-015 (26.10.): #CC3D63 was 4.14:1 on the page ground, this is AA (4.5+) on bg, canvas and surface. night N8 #83: stars, step numbers, the price median on paper: 4.7:1 on surface, >= 3.7:1 on bg and canvas (pink-press is 2.4:1) */
  --blush: var(--accent);
  --focus-ring: var(--anthracite);
  --canvas: #D7E7E5; --bg: #E8F1F0; --surface: #FFFDF8; --sunken: #D7E7E5;
  --field: #FFFDF8; --field-in: #EEF4F3;   /* tonal fields: paper on the duck ground, a duck tint inside a paper panel */
  --dkbox: #101719; --dkbox-tile: #172124;   /* the dark box (reach, hero stat, order card, go-live) and its tiles: anthracite on paper */
  --bubble-in: #FFFDF8;                      /* the chat in-bubble, day label, system line: paper on the duck-2 log */
  --ink: #101719; --ink-2: #4B5B5E; --ink-3: #6A7B7D;
  --line: rgba(128,128,128,.5); --line-2: rgba(128,128,128,.5);
  --line-3: var(--ink-3);
  --btn-line-edge: var(--ink);   /* outline-button frame: ink on light */
  --btn-line-bg: var(--surface);   /* UX 17.10. #41: the outline key's fill: paper on light */
  --pola-edge: var(--obj-paper);   /* UX 17.10. #43: the photo frame of the join wizard: the paper polaroid on light */
  --chrome: #0F1618; --chrome-2: #172124; --prem-bg: #101719;
  --online: #1FA37A; --success: #0A763C; --on-success: #FFFFFF;
  --warning: #8A5A00;
  --danger: #B8342A; --on-danger: #FFFFFF;
  --oxblood: var(--chrome-2);
  --ph-media: repeating-linear-gradient(135deg, #D9E4E2 0 10px, #CFDCDA 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #D9E4E2 0 10px, #CFDCDA 10px 20px);
  --ph-text: #6A7B7D;
  --prem-ring: transparent;
  --chrome-ring: transparent;
  --btn-ink: #273437; --on-btn-ink: #FFFFFF; --btn-ink-edge: #070C0D;   /* owner 01.10.: face lifted off the edge so the 6px hard shadow reads (was #101719 on #000) */
  --dk-bg: #101719; --dk-card: #172124; --dk-ink: #EAF2F2; --dk-ink-2: #9FB0B2;
  --tape: rgba(232,241,240,.85); --rule-ink: var(--ink); --star-edge: var(--accent-text);
  --scrim: rgba(16,23,25,.45);
  --sh-1: none;
  --sh-2: none;
  --sh-float: 0 30px 80px rgb(16 23 25 / .25);
  --sh-sheet: 0 -20px 60px rgb(16 23 25 / .25);
  /* Admin dashboard (design/v2/admin-mockup.html; dataviz-validated: CVD + normal-vision pass, Bestand hatched) */
  --adm-good: #1B7446; --adm-good-bg: #DDF1E5; --adm-bad: #B42336; --adm-bad-bg: #FBE1E4; --adm-neutral-bg: #E3ECEB;
  --adm-hover: #F1F7F6; --adm-grid: rgba(16,23,25,.08); --adm-hatch: rgba(255,255,255,.55);
  --adm-c-best: #9DB3B5; --adm-c-leg: #465A5C; --adm-c-pnew: #D9577B;
  --adm-av-a: #EEF5F4; --adm-av-b: #C9D9D8; --adm-tip-sh: 0 8px 24px rgba(0,0,0,.25); --adm-dlg-sh: 0 24px 64px rgba(0,0,0,.35);
  /* ---- landing glam pass (owner 30.09.): soft layered surfaces, satin, grain, sheen. Light. ---- */
  --lp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .06  0 0 0 0 .09  0 0 0 0 .1  0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(255 157 178 / .30), transparent 72%), radial-gradient(48% 60% at 6% 0%, rgb(255 253 248 / .95), transparent 70%), linear-gradient(180deg, #EEF5F4 0%, #E8F1F0 62%, #E6EFEE 100%);
  --lp-real-bg: radial-gradient(34% 40% at 96% 46%, rgb(255 211 221 / .34), transparent 72%), linear-gradient(180deg, #E6EFEE 0%, #E8F1F0 30%, #E8F1F0 100%);
  --lp-real-bg-l: radial-gradient(34% 40% at 4% 50%, rgb(255 211 221 / .34), transparent 72%), linear-gradient(180deg, #E8F1F0 0%, #E8F1F0 100%);   /* owner 27.10.: the light from the other side on every second section */
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(255 157 178 / .20), transparent 72%), radial-gradient(40% 55% at 6% 4%, rgb(126 196 196 / .16), transparent 70%), radial-gradient(60% 40% at 50% 104%, rgb(255 157 178 / .08), transparent 70%), linear-gradient(172deg, #1A2629 0%, #111A1C 48%, #0B1113 100%);
  --lp-buy-line: var(--mline);   /* owner rule: grey 50 %, never white (was white .09) */
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(255 211 221 / .72), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgb(255 253 248 / .8), transparent 70%), linear-gradient(180deg, #E6EFEE 0%, #EEF2F0 100%);
  --lp-sell-bg: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .20) 34%, rgb(255 255 255 / .04) 44%, transparent 52%, rgb(255 255 255 / .12) 70%, transparent 82%), radial-gradient(62% 70% at 12% 8%, #FFC3D0 0%, transparent 72%), radial-gradient(56% 64% at 96% 96%, #F2839D 0%, transparent 72%), linear-gradient(180deg, #FFA6B9 0%, #FF9DB2 55%, #F994AB 100%);
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(255 211 221 / .55), transparent 72%), linear-gradient(180deg, #FFF7F5 0%, #FFFDF8 260px, #FFFDF8 calc(100% - 220px), #E8F1F0 100%);
  --lp-lace: #FFF7F5;              /* the lace hem = the laundry room's first paper tone */
  --lp-guides-bg: linear-gradient(180deg, #E8F1F0 0%, #E8F1F0 100%);
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(255 211 221 / .45), transparent 72%), linear-gradient(180deg, #E8F1F0 0%, #E3EDEB 100%);
  --lp-arch: radial-gradient(70% 55% at 32% 18%, #FFCBD6 0%, transparent 70%), radial-gradient(60% 50% at 88% 90%, #EE7F99 0%, transparent 70%), linear-gradient(165deg, #FFB2C3 0%, #FF9DB2 50%, #F68CA5 100%);
  --lp-arch-glow: 0 40px 90px -30px rgb(244 132 157 / .55);
  --lp-tape: linear-gradient(100deg, #FFB0C1 0%, #FF9DB2 38%, #FFC0CD 52%, #FF9DB2 66%, #F894AC 100%);
  --lp-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .42) 48%, rgb(255 255 255 / .06) 56%, transparent 66%);
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(255 157 178 / .12), transparent 70%), linear-gradient(165deg, #1C292C 0%, #111A1C 100%);
  --lp-box-cr: radial-gradient(80% 70% at 0% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(165deg, #FFFBF4 0%, #F7EEE2 100%);
  --lp-inner-hi: inset 0 1px 0 rgb(255 255 255 / .75);
  --lp-inner-hi-dk: inset 0 1px 0 rgb(255 255 255 / .07);
  --lp-card-lift: 0 22px 44px -22px rgb(16 23 25 / .35);
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(255 157 178 / .22), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgb(126 196 196 / .14), transparent 70%), linear-gradient(160deg, #1B282B 0%, #0F1618 100%);
  --lp-door-sell: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 38%, transparent 54%), radial-gradient(80% 90% at 0% 0%, #FFC3D0 0%, transparent 70%), linear-gradient(160deg, #FFA9BB 0%, #FF9DB2 55%, #F48CA5 100%);
  --lp-row-hover: linear-gradient(90deg, rgb(255 211 221 / .55), rgb(255 211 221 / 0) 80%);
  --lp-real2-bg: linear-gradient(180deg, #E8F1F0 0%, #E6EFEE 100%);
  --lp-fav-bg: rgb(255 255 255 / .72);
  --lp-chip-bg: rgb(255 253 248 / .72); --lp-chip-ink: var(--anthracite);
  --lp-step-sh: 0 1px 0 rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .35);
  --lp-marker: var(--pink);
  --lp-host-arch: linear-gradient(180deg, #D7E7E5 0%, rgb(215 231 229 / .35) 100%); --lp-host-rim: transparent;
  --lp-cut-rim: none;
  --alt-spot: rgb(255 122 150 / .46); --alt-spot-2: rgb(255 157 178 / .26);   /* alt-look hero: the light cone and its soft edge (owner 12.10. evening) */
  --lp-footer-bg: var(--chrome);
  --lp-num-ink: var(--pink-ink);
  --lp-hero-end: #E6EFEE;
  /* Member head band (docs/inner-grounding-01-10.md): the landing hero surface, quieter: paper with a soft pink glow on
     the right. One image (it is painted as a border-image across the full bleed, see layout.css). */
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #FFE6EC 0%, #FFF4F2 40%, #FFFDF8 100%);
  --app-ground: #E8F1F0;   /* the member page under the band (light: the duck egg, unchanged) */
}
[data-theme="dark"]{
  color-scheme: dark;
  --accent: #FF9DB2;
  --accent-press: #F4849D;
  --accent-soft: #3A1E2A;
  --accent-text: #FF9DB2;
  --on-accent: #101719;
  --pink-glyph: var(--pink-press);   /* night N8 #83: the brand pink reads on the dark grounds (light: a deeper pink) */
  --blush: var(--accent);
  --focus-ring: var(--accent);
  --canvas: #0B1113; --bg: #101719; --surface: #172124; --sunken: #243337;   /* tonal pass 05.10.: the well one clear step over the panel */
  --field: #1D292C; --field-in: #2A3A3E;   /* tonal fields: one step up on the ground, one more inside a panel */
  --dkbox: #172124; --dkbox-tile: #2A3A3E;   /* dark: the dark box IS the panel tone, its tiles the field step (everything is anthracite here) */
  --bubble-in: #243337;                      /* the chat in-bubble: the well tone on the deep log */
  --ink: #EAF2F2; --ink-2: #9FB0B2; --ink-3: #6E8386;
  --line: rgba(128,128,128,.5); --line-2: rgba(128,128,128,.5);
  --line-3: var(--ink-3);
  --btn-line-edge: var(--line);   /* dark: grey 50 %, never a white frame (owner rule) */
  --btn-line-bg: var(--sunken);   /* dark: the tonal well */
  --pola-edge: var(--chrome-well-hover);   /* dark: a tonal frame, never white on black (owner rule) */
  --chrome: #0F1618; --chrome-2: #172124; --prem-bg: #0F1618;
  --online: #2FD27A; --success: #2FD27A; --on-success: #101719;
  --warning: #F2B84B;
  --danger: #FF8A7A; --on-danger: #101719;
  --oxblood: var(--line-2);
  --ph-media: repeating-linear-gradient(135deg, #1D292C 0 10px, #223034 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #1D292C 0 10px, #223034 10px 20px);
  --ph-text: #9FB0B2;
  --stamp-fill: #E8F1F0;   /* T43: paper objects keep their light look in dark (opaque, not 55 % over the dark ground) */
  --pink-text: var(--pink);
  --prem-ring: rgba(128,128,128,.5);
  --chrome-ring: rgba(128,128,128,.5);
  --btn-ink: #2B3639; --on-btn-ink: #FFFFFF; --btn-ink-edge: #080D0E;   /* owner 05.10.: no pale white buttons on dark — slate face, white text */
  --dk-bg: #0F1618; --dk-card: #172124; --dk-ink: #EAF2F2; --dk-ink-2: #9FB0B2;
  --tape: rgba(232,241,240,.45); --rule-ink: var(--chrome-line); --star-edge: var(--accent);
  --scrim: rgba(5,8,9,.65);
  --sh-1: none;
  --sh-2: none;
  --sh-float: 0 0 0 1px rgba(128,128,128,.5), 0 30px 80px rgb(0 0 0 / .6);
  --sh-sheet: 0 0 0 1px rgba(128,128,128,.5), 0 -20px 60px rgb(0 0 0 / .6);
  --adm-good: #5CCB90; --adm-good-bg: rgba(92,203,144,.14); --adm-bad: #FF7F8B; --adm-bad-bg: rgba(255,127,139,.14); --adm-neutral-bg: #1F2B2E;
  --adm-hover: #1A2427; --adm-grid: rgba(234,242,242,.07); --adm-hatch: rgba(0,0,0,.35);
  --adm-c-best: #43585B; --adm-c-leg: #7C9497; --adm-c-pnew: #FF9DB2;
  --adm-av-a: #253236; --adm-av-b: #172124; --adm-tip-sh: 0 8px 24px rgba(0,0,0,.5); --adm-dlg-sh: 0 24px 64px rgba(0,0,0,.65);
  /* ---- landing glam pass (owner 30.09.). Dark: deep anthracite with a faint cyan / pink glow, the pink block stays satin. ---- */
  --lp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .95  0 0 0 0 .95  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(255 157 178 / .16), transparent 72%), radial-gradient(48% 60% at 6% 0%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(180deg, #141E21 0%, #111A1C 60%, #101719 100%);
  --lp-real-bg: radial-gradient(ellipse 48% 46% at 100% 50%, rgb(255 157 178 / .075), transparent 75%), linear-gradient(180deg, #101719 0%, #101719 100%);
  --lp-real-bg-l: radial-gradient(ellipse 55% 46% at 0% 50%, rgb(255 157 178 / .085), transparent 75%), linear-gradient(180deg, #101719 0%, #101719 100%);   /* owner 27.10.: ambient pink from the left, centred so it fades before the section's edges (no seam) */
  --sh-card: 0 8px 24px rgb(0 0 0 / .18); --sh-card-hover: 0 14px 36px rgb(0 0 0 / .28); --sh-floating: 0 18px 48px rgb(0 0 0 / .32);
  --sh-pink: 0 6px 18px rgb(255 157 178 / .16); --card-rim: inset 0 0 0 1px rgb(255 255 255 / .045);
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(255 157 178 / .17), transparent 72%), radial-gradient(40% 55% at 6% 4%, rgb(126 196 196 / .14), transparent 70%), radial-gradient(60% 40% at 50% 104%, rgb(255 157 178 / .07), transparent 70%), linear-gradient(172deg, #1B282B 0%, #121B1D 48%, #0B1113 100%);
  --lp-buy-line: rgba(128,128,128,.5);
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(255 157 178 / .11), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgb(126 196 196 / .08), transparent 70%), linear-gradient(180deg, #172124 0%, #131C1F 100%);
  --lp-sell-bg: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .03) 44%, transparent 52%, rgb(255 255 255 / .07) 70%, transparent 82%), radial-gradient(62% 70% at 12% 8%, #F1A2B4 0%, transparent 72%), linear-gradient(160deg, #E98BA0 0%, #D67E94 55%, #C9738A 100%);
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(255 157 178 / .10), transparent 72%), linear-gradient(180deg, #1A2528 0%, #172124 260px, #172124 calc(100% - 220px), #101719 100%);
  --lp-lace: #1A2528;
  --lp-guides-bg: linear-gradient(180deg, #101719 0%, #101719 100%);
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(255 157 178 / .08), transparent 72%), linear-gradient(180deg, #101719 0%, #0E1517 100%);
  --lp-arch: radial-gradient(70% 55% at 32% 18%, #FFCBD6 0%, transparent 70%), radial-gradient(60% 50% at 88% 90%, #EE7F99 0%, transparent 70%), linear-gradient(165deg, #FFB2C3 0%, #FF9DB2 50%, #F68CA5 100%);
  --lp-arch-glow: 0 40px 100px -30px rgb(255 157 178 / .35);
  --lp-tape: linear-gradient(100deg, #FFB0C1 0%, #FF9DB2 38%, #FFC0CD 52%, #FF9DB2 66%, #F894AC 100%);
  --lp-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .32) 48%, rgb(255 255 255 / .05) 56%, transparent 66%);
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(255 157 178 / .10), transparent 70%), linear-gradient(165deg, #1E2B2E 0%, #121B1D 100%);
  --lp-box-cr: radial-gradient(80% 70% at 0% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(165deg, #FFFBF4 0%, #F7EEE2 100%);
  --lp-inner-hi: inset 0 1px 0 rgb(255 255 255 / .10);
  --lp-inner-hi-dk: inset 0 1px 0 rgb(255 255 255 / .07);
  --lp-card-lift: 0 22px 44px -22px rgb(0 0 0 / .7);
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(255 157 178 / .18), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(160deg, #1E2B2E 0%, #121B1D 100%);
  --lp-door-sell: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 38%, transparent 54%), radial-gradient(80% 90% at 0% 0%, #FFC3D0 0%, transparent 70%), linear-gradient(160deg, #FFA9BB 0%, #FF9DB2 55%, #F48CA5 100%);
  --lp-row-hover: linear-gradient(90deg, rgb(255 157 178 / .12), rgb(255 157 178 / 0) 80%);
  --lp-real2-bg: linear-gradient(180deg, #101719 0%, #0F1618 100%);
  --lp-fav-bg: rgb(16 23 25 / .55);
  --lp-chip-bg: rgb(255 255 255 / .06); --lp-chip-ink: var(--dk-ink);
  --lp-step-sh: 0 1px 0 rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .6);
  --lp-marker: rgb(255 157 178 / .45);
  --lp-host-arch: linear-gradient(180deg, #22343A 0%, rgb(34 52 58 / .4) 100%); --lp-host-rim: rgb(255 157 178 / .25);
  --lp-cut-rim: drop-shadow(0 0 1px rgb(255 255 255 / .35));
  --alt-spot: rgb(255 157 178 / .52); --alt-spot-2: rgb(255 157 178 / .16);
  --lp-footer-bg: #0A0F10;
  --lp-num-ink: var(--pink);
  --lp-hero-end: #101719;
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1E2529 40%, #172124 100%);
  --app-ground: #0B1113;   /* dark: one step under the chrome, so chrome, band, page and paper read as layers */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  color-scheme: dark;
  --accent: #FF9DB2;
  --accent-press: #F4849D;
  --accent-soft: #3A1E2A;
  --accent-text: #FF9DB2;
  --on-accent: #101719;
  --pink-glyph: var(--pink-press);   /* night N8 #83: the brand pink reads on the dark grounds (light: a deeper pink) */
  --blush: var(--accent);
  --focus-ring: var(--accent);
  --canvas: #0B1113; --bg: #101719; --surface: #172124; --sunken: #243337;   /* tonal pass 05.10.: the well one clear step over the panel */
  --field: #1D292C; --field-in: #2A3A3E;   /* tonal fields: one step up on the ground, one more inside a panel */
  --dkbox: #172124; --dkbox-tile: #2A3A3E;   /* dark: the dark box IS the panel tone, its tiles the field step (everything is anthracite here) */
  --bubble-in: #243337;                      /* the chat in-bubble: the well tone on the deep log */
  --ink: #EAF2F2; --ink-2: #9FB0B2; --ink-3: #6E8386;
  --line: rgba(128,128,128,.5); --line-2: rgba(128,128,128,.5);
  --line-3: var(--ink-3);
  --btn-line-edge: var(--line);
  --btn-line-bg: var(--sunken);
  --pola-edge: var(--chrome-well-hover);
  --chrome: #0F1618; --chrome-2: #172124; --prem-bg: #0F1618;
  --online: #2FD27A; --success: #2FD27A; --on-success: #101719;
  --warning: #F2B84B;
  --danger: #FF8A7A; --on-danger: #101719;
  --oxblood: var(--line-2);
  --ph-media: repeating-linear-gradient(135deg, #1D292C 0 10px, #223034 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #1D292C 0 10px, #223034 10px 20px);
  --ph-text: #9FB0B2;
  --stamp-fill: #E8F1F0;   /* T43: paper objects keep their light look in dark (opaque, not 55 % over the dark ground) */
  --pink-text: var(--pink);
  --prem-ring: rgba(128,128,128,.5);
  --chrome-ring: rgba(128,128,128,.5);
  --btn-ink: #2B3639; --on-btn-ink: #FFFFFF; --btn-ink-edge: #080D0E;   /* owner 05.10.: no pale white buttons on dark — slate face, white text */
  --dk-bg: #0F1618; --dk-card: #172124; --dk-ink: #EAF2F2; --dk-ink-2: #9FB0B2;
  --tape: rgba(232,241,240,.45); --rule-ink: var(--chrome-line); --star-edge: var(--accent);
  --scrim: rgba(5,8,9,.65);
  --sh-1: none;
  --sh-2: none;
  --sh-float: 0 0 0 1px rgba(128,128,128,.5), 0 30px 80px rgb(0 0 0 / .6);
  --sh-sheet: 0 0 0 1px rgba(128,128,128,.5), 0 -20px 60px rgb(0 0 0 / .6);
  --adm-good: #5CCB90; --adm-good-bg: rgba(92,203,144,.14); --adm-bad: #FF7F8B; --adm-bad-bg: rgba(255,127,139,.14); --adm-neutral-bg: #1F2B2E;
  --adm-hover: #1A2427; --adm-grid: rgba(234,242,242,.07); --adm-hatch: rgba(0,0,0,.35);
  --adm-c-best: #43585B; --adm-c-leg: #7C9497; --adm-c-pnew: #FF9DB2;
  --adm-av-a: #253236; --adm-av-b: #172124; --adm-tip-sh: 0 8px 24px rgba(0,0,0,.5); --adm-dlg-sh: 0 24px 64px rgba(0,0,0,.65);
  /* ---- landing glam pass (owner 30.09.). Dark: deep anthracite with a faint cyan / pink glow, the pink block stays satin. ---- */
  --lp-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .95  0 0 0 0 .95  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lp-hero-bg: radial-gradient(50% 56% at 74% 52%, rgb(255 157 178 / .16), transparent 72%), radial-gradient(48% 60% at 6% 0%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(180deg, #141E21 0%, #111A1C 60%, #101719 100%);
  --lp-real-bg: radial-gradient(ellipse 48% 46% at 100% 50%, rgb(255 157 178 / .075), transparent 75%), linear-gradient(180deg, #101719 0%, #101719 100%);
  --lp-real-bg-l: radial-gradient(ellipse 55% 46% at 0% 50%, rgb(255 157 178 / .085), transparent 75%), linear-gradient(180deg, #101719 0%, #101719 100%);   /* owner 27.10.: ambient pink from the left, centred so it fades before the section's edges (no seam) */
  --sh-card: 0 8px 24px rgb(0 0 0 / .18); --sh-card-hover: 0 14px 36px rgb(0 0 0 / .28); --sh-floating: 0 18px 48px rgb(0 0 0 / .32);
  --sh-pink: 0 6px 18px rgb(255 157 178 / .16); --card-rim: inset 0 0 0 1px rgb(255 255 255 / .045);
  --lp-buy-bg: radial-gradient(46% 58% at 80% 34%, rgb(255 157 178 / .17), transparent 72%), radial-gradient(40% 55% at 6% 4%, rgb(126 196 196 / .14), transparent 70%), radial-gradient(60% 40% at 50% 104%, rgb(255 157 178 / .07), transparent 70%), linear-gradient(172deg, #1B282B 0%, #121B1D 48%, #0B1113 100%);
  --lp-buy-line: rgba(128,128,128,.5);
  --lp-proof-bg: radial-gradient(46% 60% at 84% 42%, rgb(255 157 178 / .11), transparent 72%), radial-gradient(40% 50% at 0% 100%, rgb(126 196 196 / .08), transparent 70%), linear-gradient(180deg, #172124 0%, #131C1F 100%);
  --lp-sell-bg: linear-gradient(112deg, transparent 18%, rgb(255 255 255 / .12) 34%, rgb(255 255 255 / .03) 44%, transparent 52%, rgb(255 255 255 / .07) 70%, transparent 82%), radial-gradient(62% 70% at 12% 8%, #F1A2B4 0%, transparent 72%), linear-gradient(160deg, #E98BA0 0%, #D67E94 55%, #C9738A 100%);
  --lp-laundry-bg: radial-gradient(60% 40% at 50% 0%, rgb(255 157 178 / .10), transparent 72%), linear-gradient(180deg, #1A2528 0%, #172124 260px, #172124 calc(100% - 220px), #101719 100%);
  --lp-lace: #1A2528;
  --lp-guides-bg: linear-gradient(180deg, #101719 0%, #101719 100%);
  --lp-join-bg: radial-gradient(70% 55% at 30% 0%, rgb(255 157 178 / .08), transparent 72%), linear-gradient(180deg, #101719 0%, #0E1517 100%);
  --lp-arch: radial-gradient(70% 55% at 32% 18%, #FFCBD6 0%, transparent 70%), radial-gradient(60% 50% at 88% 90%, #EE7F99 0%, transparent 70%), linear-gradient(165deg, #FFB2C3 0%, #FF9DB2 50%, #F68CA5 100%);
  --lp-arch-glow: 0 40px 100px -30px rgb(255 157 178 / .35);
  --lp-tape: linear-gradient(100deg, #FFB0C1 0%, #FF9DB2 38%, #FFC0CD 52%, #FF9DB2 66%, #F894AC 100%);
  --lp-sheen: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .32) 48%, rgb(255 255 255 / .05) 56%, transparent 66%);
  --lp-box-dk: radial-gradient(80% 60% at 100% 0%, rgb(255 157 178 / .10), transparent 70%), linear-gradient(165deg, #1E2B2E 0%, #121B1D 100%);
  --lp-box-cr: radial-gradient(80% 70% at 0% 0%, #FFFFFF 0%, transparent 70%), linear-gradient(165deg, #FFFBF4 0%, #F7EEE2 100%);
  --lp-inner-hi: inset 0 1px 0 rgb(255 255 255 / .10);
  --lp-inner-hi-dk: inset 0 1px 0 rgb(255 255 255 / .07);
  --lp-card-lift: 0 22px 44px -22px rgb(0 0 0 / .7);
  --lp-door-buy: radial-gradient(70% 80% at 100% 0%, rgb(255 157 178 / .18), transparent 70%), radial-gradient(60% 70% at 0% 100%, rgb(126 196 196 / .12), transparent 70%), linear-gradient(160deg, #1E2B2E 0%, #121B1D 100%);
  --lp-door-sell: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 38%, transparent 54%), radial-gradient(80% 90% at 0% 0%, #FFC3D0 0%, transparent 70%), linear-gradient(160deg, #FFA9BB 0%, #FF9DB2 55%, #F48CA5 100%);
  --lp-row-hover: linear-gradient(90deg, rgb(255 157 178 / .12), rgb(255 157 178 / 0) 80%);
  --lp-real2-bg: linear-gradient(180deg, #101719 0%, #0F1618 100%);
  --lp-fav-bg: rgb(16 23 25 / .55);
  --lp-chip-bg: rgb(255 255 255 / .06); --lp-chip-ink: var(--dk-ink);
  --lp-step-sh: 0 1px 0 rgb(0 0 0 / .04), 0 12px 32px -12px rgb(0 0 0 / .6);
  --lp-marker: rgb(255 157 178 / .45);
  --lp-host-arch: linear-gradient(180deg, #22343A 0%, rgb(34 52 58 / .4) 100%); --lp-host-rim: rgb(255 157 178 / .25);
  --lp-cut-rim: drop-shadow(0 0 1px rgb(255 255 255 / .35));
  --alt-spot: rgb(255 157 178 / .52); --alt-spot-2: rgb(255 157 178 / .16);
  --lp-footer-bg: #0A0F10;
  --lp-num-ink: var(--pink);
  --lp-hero-end: #101719;
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1E2529 40%, #172124 100%);
  --app-ground: #0B1113;   /* dark: one step under the chrome, so chrome, band, page and paper read as layers */
  }
}
/* PHONE (mockup @container page (max-width:700px)) */
@media (max-width:700px){
  :root{
    --wrap-pad: 16px; --hdr-h: 59px;
    --fs-xl: clamp(34px, 10.4vw, 44px); --fs-l: 32px; --fs-m: 27px; --fs-section: 18px; --fs-subhead: 15px;
    --btn-py: 12px; --btn-px: 16px; --control-btn: 44px; --control-lg: 48px; --control-sm: 44px; --control-field: 44px;   /* touch: primary 44, small 44 (visual audit VM-020: every tap target 44) */
    --panel-pad: 16px;
    --section-gap: 22px;
    --header-h: var(--hdr-h); --gutter: var(--wrap-pad);
    --sticky-top: calc(var(--header-h) + env(safe-area-inset-top));
    --dock: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
    --dock-flush: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    --sec-gap: 36px; --sec-gap-mega: 44px; --sec-gap-stack: 28px;
    --mega-pad-top: 44px; --mega-pad-bot: 40px;
    --fs-lede: 15px; --fs-sub: 14px; --fs-prose: 15px;
    --fs-ed-lede: 17px; --fs-ed-body: 16px; --fs-ed-h2: 22px; --fs-ed-h3: 18px; --ed-sec: 24px;
    --fs-hand-l: 21px;
    --lp-dome-h: 30px; --lp-lace-r: 8px;
    --app-top: 14px; --app-head-pb: 12px; --app-gap: 12px; --app-sec-gap: 22px;
    --list-pad: 4px;
  }
}
/* INSIDE TIER (owner 06.10.: the member area is a tool people use every day; Sleek 08.10.: the same face, a quieter scale).
   Set here, on the body, by overriding the scale tokens — no page sets its own size. Scope: every page of a logged-in
   member (the body without .pc-guest and .pn-joinbody), the wizards (.pn-wizbody) and the wish step of the buyer signup.
     page head   --fs-m        24 / phone 22   (outside 34 / 27)
     section     --fs-section  17 / phone 16   (outside 21 / 18)
     sub head    --fs-subhead  15              (outside 16 / 15)
     action      --btn-fs      14, small 13    (outside 14 / 13)
   Line-heights 1.15 / 1.2 (accented languages 1.2 / 1.24). */
body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm),body.pn-joinbody:has(.pn-wishpanel){
  --fs-m: 24px; --fs-section: 17px; --fs-subhead: 15px; --btn-fs: 14px; --btn-sm-fs: 13px;
  --fs-h1: var(--fs-m); --lh-head: 1.15; --lh-sub: 1.2; --tr-h: -.02em; --tr-head: -.012em; --tr-btn: 0em;
  /* Numerals and the pieces that carried their own size: a step of the inside scale, never more than the page head. */
  --fs-tile: 26px; --fs-price-l: 26px;                                                  /* dashboard tile numeral, the listing's price */
  --fs-num: 18px; --fs-price-m: 18px; --fs-plan: 17px; --fs-empty: 17px;                /* stat numerals, price, plan name, empty-state head */
  --fs-price-card: 14px; --fs-sub-s: 15px;                                               /* card price, FAQ question, review head */
  /* Badges and status tags (Free, In review, Premium): the label voice, several stand on one screen. */
  --badge-font: 600 11px/1 var(--font-label); --badge-tr: .02em;
}
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) :is(body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm),body.pn-joinbody:has(.pn-wishpanel)){--lh-head: 1.2; --lh-sub: 1.24}
/* Selling moments inside (the wizards after the signup, the membership page, the Premium wall): one step louder than a
   tool page — the page head 30 / phone 26; everything else stays on the inside scale. */
body.pn-wizbody,body.pn-joinbody:has(.pn-wishpanel),body.pc-root:not(.pc-guest):has(.pn-main > :is(.pn-paysite,.pn-premwall)){--fs-m: 30px; --fs-h1: var(--fs-m); --btn-fs: 14px; --lh-head: 1.12; --tr-h: -.022em}
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) :is(body.pn-wizbody,body.pn-joinbody:has(.pn-wishpanel),body.pc-root:not(.pc-guest):has(.pn-main > :is(.pn-paysite,.pn-premwall))){--lh-head: 1.18}
@media (max-width:700px){
  body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-adm),body.pn-joinbody:has(.pn-wishpanel){--fs-m: 22px; --fs-section: 16px}
  body.pn-wizbody,body.pn-joinbody:has(.pn-wishpanel),body.pc-root:not(.pc-guest):has(.pn-main > :is(.pn-paysite,.pn-premwall)){--fs-m: 26px}
}
/* NO BORDERS (owner 18.10.: "die ganzen Border überall scheiße […] mit Flächen machen, die sich unterscheiden"; specs
   design/v7/noborder/ad-report.md + color-report.md). Since 09.10. the member area separated by tone (the block below the
   member marker); since 18.10. every page does: guest pages, join and login, the member area, header and footer. This block
   sits OUTSIDE the member marker, so tools/css_guest.php keeps it in every guest bundle; admin (.pn-adm) keeps its lines.
   The ladder, each step readable without a line (dark: 1.12 to 1.26 between neighbours, measured by
   tools/look/tonal_shots.mjs measure and measure --on=guest):
     ground   --app-ground / --bg   the page (dark: member #0B1113, guest #101719)
     band     --t-band              the page head band
     panel    --surface             panels, boxes, the join box, the chat page
     raised   --sunken              wells and tiles in a panel, the row under the pointer, the chat in-bubble
     overlay  --t-over              sheets, menus, dialogs (plus a soft shadow, never a ring)
   Controls are a veil of ink over whatever they stand on (--t-tint rest, --t-tint-2 pointer, --t-sel chosen), so a key is
   one step up from ANY surface without knowing it (src-css/tonal.css).
   Lines: --line, --line-2, --line-3, the outline key's edge, the chrome line and the rings are transparent, so every rule
   that drew its 1 px frame from them keeps its box and loses the line. What keeps an edge: text fields and selects
   (--t-field-edge, >= 3:1 against their surface, WCAG 1.4.11), focus rings, error states, checkboxes / radios / switches,
   the dashed drop outline while dragging, and --t-card-edge: the quiet ring on listing and seller cards (about 1.3:1;
   set it to transparent here, one line, and the cards lose it too). Header and footer: no line; dark = the near-black
   bar (--t-chrome) with a soft shadow under it (--sh-chrome), the footer one step off the page (--footer-bg). */
.pc-root:not(.pn-adm){
  --line: transparent; --line-2: transparent; --line-3: transparent; --btn-line-edge: transparent; --btn-line-bg: var(--t-tint);
  --chrome-line: transparent; --lp-buy-line: transparent; --prem-ring: transparent; --chrome-ring: transparent;
  --t-mute: rgba(128,128,128,.5);   /* the grey that was a line and is a fill here: the sheet's grab, an offline dot, a track */
  --t-band: #FFFDF8; --t-over: #FFFDF8; --t-over-2: #D2E3E1; --t-over-3: #C9DBD9;
  --sunken: #D2E3E1; --field-in: #E8F1F0; --ink-3: #5B6C6F;   /* light: the well 1.16 on the page, 1.31 on paper; the quiet ink 4.8:1 on the page */
  --t-tint: color-mix(in srgb, var(--ink) 7%, transparent); --t-tint-2: color-mix(in srgb, var(--ink) 12%, transparent);
  --t-sel: var(--btn-ink); --on-t-sel: var(--on-btn-ink);
  --t-field-edge: #6A7B7D; --t-field-edge-over: #6A7B7D; --t-hair: rgb(16 23 25 / .1);
  --t-danger: color-mix(in srgb, var(--danger) 10%, transparent); --t-danger-2: color-mix(in srgb, var(--danger) 16%, transparent);
  --surface-2: color-mix(in srgb, var(--sunken) 89%, var(--ink));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --t-card-edge: rgb(128 128 128 / .22); --t-card-edge-hover: rgb(128 128 128 / .35);   /* listing + seller cards only: transparent = no edge */
  --t-chrome: var(--chrome); --footer-bg: var(--chrome); --sh-chrome: none;   /* light: the dark chrome on the light page separates itself */
  --lp-chip-bg: var(--t-tint);   /* the hero's chips: a veil one step up from any hero ground (was paper 72 % + a grey frame) */
  --sh-float: 0 24px 64px rgb(16 23 25 / .22); --sh-sheet: 0 -16px 48px rgb(16 23 25 / .22);
}
[data-theme="dark"] .pc-root:not(.pn-adm){
  --surface: #1C282C; --sunken: #253439; --t-band: #151E21; --t-over: #2C3C42; --t-over-2: #32444A; --t-over-3: #3C4F56;
  --ink-3: #839799;   /* the quiet ink, lifted with the panel: 4.9:1 on the panel, 6.2:1 on the page (colour report 18.10.) */
  --field: #151E21; --field-in: #10181A;
  --dkbox: #1C282C; --dkbox-tile: #253439; --bubble-in: #253439;
  --btn-ink: #3A4B51; --accent-soft: #4A2534;   /* the chosen fill: 1.16:1 on the panel (was #3A1E2A, 1.01: it vanished) */
  --t-tint: color-mix(in srgb, var(--ink) 10%, transparent); --t-tint-2: color-mix(in srgb, var(--ink) 16%, transparent);
  --t-sel: var(--btn-ink); --on-t-sel: var(--on-btn-ink);   /* visual audit VM-016: the same chosen fill as light (was a pale 26 % veil) */
  --t-field-edge: #788D90; --t-field-edge-over: #7F9498; --t-hair: rgb(234 242 242 / .08);
  --prem-ring: transparent; --chrome-ring: transparent;
  --t-chrome: #030506; --footer-bg: #151E21; --sh-chrome: 0 14px 28px -20px rgb(0 0 0 / .9);
  --lp-chip-bg: var(--t-tint);
  --sh-float: 0 24px 64px rgb(0 0 0 / .55); --sh-sheet: 0 -16px 48px rgb(0 0 0 / .55);
}
[data-theme="dark"] .pc-root:is(.pc-guest,.pn-joinbody){
  --app-ground: #101719; --field: #1A2528; --footer-bg: #030506;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pc-root:not(.pn-adm){
  --surface: #1C282C; --sunken: #253439; --t-band: #151E21; --t-over: #2C3C42; --t-over-2: #32444A; --t-over-3: #3C4F56;
  --ink-3: #839799;   /* the quiet ink, lifted with the panel: 4.9:1 on the panel, 6.2:1 on the page (colour report 18.10.) */
  --field: #151E21; --field-in: #10181A;
  --dkbox: #1C282C; --dkbox-tile: #253439; --bubble-in: #253439;
  --btn-ink: #3A4B51; --accent-soft: #4A2534;   /* the chosen fill: 1.16:1 on the panel (was #3A1E2A, 1.01: it vanished) */
  --t-tint: color-mix(in srgb, var(--ink) 10%, transparent); --t-tint-2: color-mix(in srgb, var(--ink) 16%, transparent);
  --t-sel: var(--btn-ink); --on-t-sel: var(--on-btn-ink);   /* visual audit VM-016: the same chosen fill as light (was a pale 26 % veil) */
  --t-field-edge: #788D90; --t-field-edge-over: #7F9498; --t-hair: rgb(234 242 242 / .08);
  --prem-ring: transparent; --chrome-ring: transparent;
  --t-chrome: #030506; --footer-bg: #151E21; --sh-chrome: 0 14px 28px -20px rgb(0 0 0 / .9);
  --lp-chip-bg: var(--t-tint);
  --sh-float: 0 24px 64px rgb(0 0 0 / .55); --sh-sheet: 0 -16px 48px rgb(0 0 0 / .55);
  }
  :root:not([data-theme="light"]) .pc-root:is(.pc-guest,.pn-joinbody){
  --app-ground: #101719; --field: #1A2528; --footer-bg: #030506;
  }
}
/* @member-only */
/* The member area's own head band (layout.css .pc-apphead): dark, the band ends on --t-band. Member only (the guest
   bundles never carry it). The rest of the member tone (tonal surfaces inside, owner 09.10.) is the block above. */
[data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1D2328 40%, #151E21 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
  --app-head-bg: radial-gradient(24% 300px at 66% 0%, #2A2630 0%, #1D2328 40%, #151E21 100%);
  }
}
/* Modern Dark + Signature Pink (owner 01.11.2026): the member dark theme's roles; the rules are src-css/dark.css. */
/* ---- 1. tokens -------------------------------------------------------------------------------------------------- */
[data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
  --md-bg: #101114; --md-header: #0B0C0E; --md-card: #1B1D22; --md-input: #26282E; --md-hover: #303239; --md-line: #303138;
  --md-ink: #F5F5F7; --md-ink-2: #A2A4AD; --md-ink-3: #777A84;
  --md-pink-soft: rgb(255 157 178 / .12); --md-pink-line: rgb(255 157 178 / .25);
  --md-shadow: 0 4px 24px rgb(0 0 0 / .15); --md-shadow-hover: 0 8px 28px rgb(0 0 0 / .22);
  --md-r-card: 24px; --md-r-media: 18px; --md-ease: .18s ease;
  --md-on-pink: #101114; --md-white: #FFFFFF; --md-meta: rgb(245 245 247 / .78);
  --md-glass: rgb(11 12 14 / .45); --md-row-line: rgb(48 49 56 / .6);

  --canvas: var(--md-bg); --bg: var(--md-bg); --app-ground: var(--md-bg); --app-head-bg: var(--md-header);
  --surface: var(--md-card); --sunken: var(--md-input); --field: var(--md-input); --field-in: var(--md-hover);
  --dkbox: var(--md-card); --dkbox-tile: var(--md-input); --bubble-in: var(--md-input);
  --ink: var(--md-ink); --ink-2: var(--md-ink-2); --ink-3: var(--md-ink-3);
  --line: var(--md-line); --line-2: var(--md-line); --oxblood: var(--md-line);
  --chrome: var(--md-header); --chrome-2: var(--md-card); --prem-bg: var(--md-header);
  --chrome-well: var(--md-input); --chrome-well-hover: var(--md-hover);
  --accent-soft: var(--md-pink-soft); --on-accent: var(--md-on-pink);
  --btn-ink: var(--md-input); --on-btn-ink: var(--md-white); --btn-ink-edge: var(--md-line);
  --btn-line-bg: transparent; --btn-line-edge: var(--md-line);
  --dk-bg: var(--md-header); --dk-card: var(--md-card); --dk-ink: var(--md-ink); --dk-ink-2: var(--md-ink-2);
  --t-tint: rgb(255 255 255 / .05); --t-tint-2: rgb(255 255 255 / .08); --t-sel: var(--md-hover); --on-t-sel: var(--md-ink);
  --t-mute: var(--md-line);
  --ph-media: repeating-linear-gradient(135deg, #1B1D22 0 10px, #202228 10px 20px);
  --ph-media-2: repeating-linear-gradient(135deg, #1B1D22 0 10px, #202228 10px 20px);
  --ph-text: var(--md-ink-2);
  --scrim: rgb(5 5 7 / .66);
  --sh-card: var(--md-shadow); --sh-card-hover: var(--md-shadow-hover);
  --sh-float: 0 0 0 1px var(--md-line), 0 24px 64px rgb(0 0 0 / .55);
  --sh-sheet: 0 0 0 1px var(--md-line), 0 -18px 56px rgb(0 0 0 / .55);
  /* photos: a quiet dark foot for the caption, never a pink wash (premium included) */
  --scard-shade: linear-gradient(180deg, rgb(11 12 14 / .12) 0%, rgb(11 12 14 / 0) 18%, rgb(11 12 14 / 0) 60%, rgb(11 12 14 / .14) 100%);
  --scard-cap-shade: linear-gradient(180deg, rgb(11 12 14 / 0) 0%, rgb(11 12 14 / .28) 30%, rgb(11 12 14 / .62) 62%, rgb(11 12 14 / .86) 100%);
  --scard-cap-blush: var(--scard-cap-shade); --pcard-cap-blush: var(--scard-cap-shade);
  --scard-glass: rgb(11 12 14 / .42); --scard-glass-hover: rgb(11 12 14 / .6);
  /* the plastik look's warm roles, neutral in the member dark theme (its CI remap made them bordeaux) */
  --card-dk: var(--md-card); --chrome-grad: var(--md-header); --t-band: var(--md-header); --footer-bg: var(--md-header);
  --t-over: #303239; --t-over-2: #34363D; --t-over-3: #3A3C44; --t-field-edge: var(--md-line); --t-field-edge-over: #3A3C44;
  --pola-edge: var(--md-input); --surface-2: var(--md-input); --chip-glass: rgb(11 12 14 / .5);
  --av-g0: #3A3C44; --av-g1: #34363D; --av-g2: #2E3036; --av-g3: #3F414A;
  --t-chrome: var(--md-header); --chrome-line: var(--md-line); --t-card-edge: var(--md-line); --t-card-edge-hover: #3A3C44; --t-hair: var(--md-line);
  --av-g4: #303239; --av-g5: #2B2D33; --av-g6: #383A41; --av-g7: #33353B; --dk-veil: rgb(11 12 14 / .6); --sh-chrome: none;
  --main-max: 1372px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){
    --md-bg: #101114; --md-header: #0B0C0E; --md-card: #1B1D22; --md-input: #26282E; --md-hover: #303239; --md-line: #303138;
    --md-ink: #F5F5F7; --md-ink-2: #A2A4AD; --md-ink-3: #777A84;
    --md-pink-soft: rgb(255 157 178 / .12); --md-pink-line: rgb(255 157 178 / .25);
    --md-shadow: 0 4px 24px rgb(0 0 0 / .15); --md-shadow-hover: 0 8px 28px rgb(0 0 0 / .22);
    --md-r-card: 24px; --md-r-media: 18px; --md-ease: .18s ease;
    --md-on-pink: #101114; --md-white: #FFFFFF; --md-meta: rgb(245 245 247 / .78);
    --md-glass: rgb(11 12 14 / .45); --md-row-line: rgb(48 49 56 / .6);
    --canvas: var(--md-bg); --bg: var(--md-bg); --app-ground: var(--md-bg); --app-head-bg: var(--md-header);
    --surface: var(--md-card); --sunken: var(--md-input); --field: var(--md-input); --field-in: var(--md-hover);
    --dkbox: var(--md-card); --dkbox-tile: var(--md-input); --bubble-in: var(--md-input);
    --ink: var(--md-ink); --ink-2: var(--md-ink-2); --ink-3: var(--md-ink-3);
    --line: var(--md-line); --line-2: var(--md-line); --oxblood: var(--md-line);
    --chrome: var(--md-header); --chrome-2: var(--md-card); --prem-bg: var(--md-header);
    --chrome-well: var(--md-input); --chrome-well-hover: var(--md-hover);
    --accent-soft: var(--md-pink-soft); --on-accent: var(--md-on-pink);
    --btn-ink: var(--md-input); --on-btn-ink: var(--md-white); --btn-ink-edge: var(--md-line);
    --btn-line-bg: transparent; --btn-line-edge: var(--md-line);
    --dk-bg: var(--md-header); --dk-card: var(--md-card); --dk-ink: var(--md-ink); --dk-ink-2: var(--md-ink-2);
    --t-tint: rgb(255 255 255 / .05); --t-tint-2: rgb(255 255 255 / .08); --t-sel: var(--md-hover); --on-t-sel: var(--md-ink);
    --t-mute: var(--md-line);
    --ph-media: repeating-linear-gradient(135deg, #1B1D22 0 10px, #202228 10px 20px);
    --ph-media-2: repeating-linear-gradient(135deg, #1B1D22 0 10px, #202228 10px 20px);
    --ph-text: var(--md-ink-2);
    --scrim: rgb(5 5 7 / .66);
    --sh-card: var(--md-shadow); --sh-card-hover: var(--md-shadow-hover);
    --sh-float: 0 0 0 1px var(--md-line), 0 24px 64px rgb(0 0 0 / .55);
    --sh-sheet: 0 0 0 1px var(--md-line), 0 -18px 56px rgb(0 0 0 / .55);
    --scard-shade: linear-gradient(180deg, rgb(11 12 14 / .12) 0%, rgb(11 12 14 / 0) 18%, rgb(11 12 14 / 0) 60%, rgb(11 12 14 / .14) 100%);
    --scard-cap-shade: linear-gradient(180deg, rgb(11 12 14 / 0) 0%, rgb(11 12 14 / .28) 30%, rgb(11 12 14 / .62) 62%, rgb(11 12 14 / .86) 100%);
    --scard-cap-blush: var(--scard-cap-shade); --pcard-cap-blush: var(--scard-cap-shade);
    --scard-glass: rgb(11 12 14 / .42); --scard-glass-hover: rgb(11 12 14 / .6);
    /* the plastik look's warm roles, neutral in the member dark theme (its CI remap made them bordeaux) */
    --card-dk: var(--md-card); --chrome-grad: var(--md-header); --t-band: var(--md-header); --footer-bg: var(--md-header);
    --t-over: #303239; --t-over-2: #34363D; --t-over-3: #3A3C44; --t-field-edge: var(--md-line); --t-field-edge-over: #3A3C44;
    --pola-edge: var(--md-input); --surface-2: var(--md-input); --chip-glass: rgb(11 12 14 / .5);
    --av-g0: #3A3C44; --av-g1: #34363D; --av-g2: #2E3036; --av-g3: #3F414A;
    --t-chrome: var(--md-header); --chrome-line: var(--md-line); --t-card-edge: var(--md-line); --t-card-edge-hover: #3A3C44; --t-hair: var(--md-line);
    --av-g4: #303239; --av-g5: #2B2D33; --av-g6: #383A41; --av-g7: #33353B; --dk-veil: rgb(11 12 14 / .6); --sh-chrome: none;
    --main-max: 1372px;
  }
}

/* @end-member-only */

/* visual audit VD-024 (26.10.): the layer ladder — bars, header, phone nav, menus / sheets, drawers / overlays, toasts on top */
:root{--z-bar:20;--z-header:30;--z-nav:40;--z-menu:60;--z-drawer:75;--z-toast:80}
/* visual audit VD-011 round 6 (26.10.): one toast rule set: the gap over whatever it clears, and the floor on wide screens
   (no dock there). A page toast only says what it clears: calc(var(--dock) + <bar> + var(--toast-gap)). */
:root{--toast-gap:12px;--toast-low:32px}
/* panty.com v3 components: a literal port of design/v2/cast-mockup.html (<style> l.42-318, phone l.320-405) onto the
   pnew class names. docs/design-v3-system.md §2 maps every mockup selector to its class here. Every colour is a token.
   Archivo = display, heads, prices, labels, stickers, buttons (always an explicit font-stretch AFTER the font shorthand).
   Inter Tight = everything you read. Caveat = the handwritten notes only. The one line is --line (grey 50 %).
   Rotation only where the mockup rotates: stamp -9, sticker 7, care label -5, note -1.2 / 1, receipt 1.5, hand notes. */
.pc-root, .pc-root *, [class^="pc-"], [class^="pc-"] *{box-sizing:border-box}
.pc-root{font:400 15px/1.5 var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.pc-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.pc-stack{display:grid;gap:var(--space-4)}
/* Icons: Hugeicons sprite via pnew_icon()/pnewIco(). 24 nav/tabbar/icon buttons, 20 buttons, 16 inline meta. */
.pc-ico{display:inline-block;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-0.2em;flex-shrink:0}
.pc-ico--16{width:16px;height:16px}
.pc-ico--20{width:20px;height:20px}
.pc-ico--24{width:24px;height:24px}
.pc-muted{color:var(--ink-2)}
.pc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-nw{white-space:nowrap}

/* ==========================================================================
   Brand atoms (mockup "brand atoms")
   ========================================================================== */
/* .wrap: the column. max 1280 incl. 56 padding (phone 16). */
.pc-wrap{width:100%;max-width:calc(var(--main-max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
/* .logo: Archivo 900 26 wdth 80, the pink dot winks. Header 26 (phone 22), footer 22. */
/* The display face's stand-ins (docs/typo-system-06-10.md). Until Anton is there the Archivo file plays it, pinned to
   its narrowest width and heaviest weight and size-adjusted to Anton's measure, so a late swap moves neither a line
   break nor a box: 'Anton FB' for caps (measured with tools/type_verify.mjs: Anton's letters run .93x Archivo 900 at wdth
   62, its digits and currency signs 1.12x, its word space 2.13x — one face per group, by unicode-range), 'Anton FBL'
   for the lowercase wordmark (1.11x). Every stand-in carries Anton's own ascent and descent (1.18 / .33em, divided by
   its size-adjust), so the baseline of a button or a stamp sits where it will sit once Anton is there. 'Anton Tape' is Anton with its content box cut to the caps (Anton's own is 1.5em: ascent
   1.18, descent .33), so the pink of a taped line hugs the words and two taped lines never cover each other. */
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:93%;ascent-override:126.9%;descent-override:35.5%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:112%;ascent-override:105.4%;descent-override:29.5%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0023-0024,U+002C,U+0030-003A,U+003F,U+00B7,U+00BF,U+2019,U+20AC}   /* digits, $ €, ? ¿ and the small marks run wider in Anton */
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:133%;ascent-override:88.7%;descent-override:24.8%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0025,U+002D,U+002F,U+0040}   /* % - / @ */
@font-face{font-family:'Anton FB';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:213%;ascent-override:55.4%;descent-override:15.5%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2');unicode-range:U+0020,U+00A0}   /* Anton's word space is 2.2x Archivo's */
@font-face{font-family:'Anton FBL';font-style:normal;font-weight:900;font-stretch:62%;font-display:swap;size-adjust:111%;ascent-override:106.3%;descent-override:29.7%;line-gap-override:0%;src:url(../fonts/Archivo-normal-latin.woff2) format('woff2')}
@font-face{font-family:'Anton Tape';font-style:normal;font-weight:400 900;font-display:swap;ascent-override:92%;descent-override:7%;line-gap-override:0%;src:url(../fonts/Anton-normal-latin.woff2) format('woff2')}
.pc-logo{display:inline-flex;align-items:baseline;font:900 36px/1 var(--display-lc);letter-spacing:.012em;text-transform:lowercase;color:inherit;text-decoration:none;white-space:nowrap}
.pc-logo__dot{display:inline-block;flex:none;width:.3em;height:.3em;border-radius:50%;background:var(--pink);margin-left:.06em;animation:pc-wink 5s infinite}
@keyframes pc-wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
/* .kicker + .tub: the label voice (text face 600, 11 px, .2em caps), the drawn wash tub in currentColor. */
.pc-kicker,.pn-kicker{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.2 var(--font-label);letter-spacing:0;color:inherit}
.pc-tub{flex:none;width:18px;height:12px;border:2px solid currentColor;border-top:none;border-radius:0 0 6px 6px;position:relative}
.pc-tub::before{content:"";position:absolute;left:-4px;right:-4px;top:-2px;border-top:2px solid currentColor}
.pn-kicker .pn-tub{color:currentColor}
/* Heads (the display scale, tokens.css): .h-xl hero, .h-l statement, .h-m page head. Anton caps; the line-height comes with the size. */
.pc-h-xl,.pc-h-l,.pc-h-m,.pc-t-mega,.pc-t-display,.pc-t-h1{font-family:var(--font-display);font-weight:800;line-height:var(--lh-hero);letter-spacing:var(--tr-h);margin:0;overflow-wrap:break-word;hyphens:manual}
.pc-h-xl,.pc-t-mega{font-size:var(--fs-xl)}
.pc-h-l,.pc-t-display{font-size:var(--fs-l)}
.pc-h-m,.pc-t-h1{font-size:var(--fs-m);line-height:var(--lh-head)}
/* art director 27.10. (docs/variants-08-10.md: heads 700, hero / h1 800): a display class on a section head (h2, h3) is 700 */
:is(h2,h3):is(.pc-h-xl,.pc-h-l,.pc-h-m){font-weight:700}
/* Section head (card and panel heads): Anton caps, 34 (phone 30). */
.pc-h-card,.pc-t-section{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head);overflow-wrap:break-word;hyphens:manual}
.pc-t-h2{font:800 22px/1.15 var(--font-sans);letter-spacing:-.01em}
.pc-t-title{font:700 17px/1.25 var(--font-sans);letter-spacing:-.01em}
/* Small caps label (.pbox b.t / .care .n): the label voice, 11-12 px, tracked caps. */
.pc-t-label,.pc-overline{font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pc-sub{margin:0;color:var(--ink-2);font:400 15px/1.5 var(--font-sans)}
.pc-lede{margin:0;color:var(--ink-2);font:400 var(--fs-lede)/1.45 var(--font-sans);max-width:var(--measure-lede)}
/* .strike + .fix: the struck word (aria-hidden) with a pink pen line, the Caveat correction after it. */
.pc-strike{position:relative;display:inline-block;white-space:nowrap;text-decoration:none;opacity:.55}
.pc-strike::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:.12em;background:var(--pink);transform:rotate(-4deg)}
.pc-fix{display:inline-block;font-family:var(--font-hand);font-weight:700;text-transform:none;color:var(--pink);font-size:.9em;letter-spacing:0;transform:rotate(-5deg) translateY(-.08em)}
.pc-on-pink .pc-strike::after{background:var(--anthracite)}
.pc-on-pink .pc-fix{color:var(--anthracite)}
/* .tape: the pink highlighter band behind a head line. */
.pc-hl{display:inline;background:var(--pink);color:var(--anthracite);font-family:var(--display-tape);padding:var(--tape-pad);-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:var(--lh-tape)}
/* .hand: the Caveat note (always aria-hidden or a restatement). */
.pc-hand,.pn-hand{display:block;margin:0;font:700 var(--fs-hand)/1.1 var(--font-hand);color:var(--hand-ink);text-transform:none;letter-spacing:0}
.pc-on-pink .pc-hand{color:var(--anthracite)}
/* T13: a Caveat note inside a dark box stays pink, also when the box sits in a pink block (mockup .dk .hand). */
.pc-on-pink .pc-box--dk .pc-hand,.pc-box--dk .pc-hand{color:var(--pink)}
/* .illu: "Brand illustration · not a seller" (11 px Inter Tight, 60 %). */
.pc-illu{font:500 11px/1.2 var(--font-sans);letter-spacing:.02em;color:var(--ink-2);margin:0}   /* art director 27.10.: was opacity .6 (2.3–2.9:1) *
/* .fig / .obj: cut-outs float with the figure shadow; on anthracite the pink rim. */
.pc-fig,.pc-obj{filter:var(--fig-shadow)}
.pc-dk .pc-fig{filter:var(--rim-pink)}
.pc-obj{position:absolute;pointer-events:none;height:auto}
/* .arch: the pink arch with its dashed seam. */
.pc-arch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:560px;height:470px;background:var(--ph-arch);border-radius:280px 280px 0 0}
.pc-arch::after{content:"";position:absolute;inset:14px 14px 0;border:2px dashed var(--dash);border-bottom:none;border-radius:266px 266px 0 0}
/* .ptag: price type printed on the blank tag of an object (container units of the object box). */
.pc-ptag{position:absolute;left:50%;top:65%;transform:translate(-50%,-50%) rotate(var(--r,-14deg));font:700 16cqw/1 var(--font-display);color:var(--anthracite);letter-spacing:var(--tr-num);text-align:center;white-space:nowrap}
.pc-ptag small{display:block;font:700 max(10px,1.05cqw)/1 var(--font-sans);letter-spacing:0;margin-top:.35em;opacity:1}

/* ==========================================================================
   Buttons (mockup .btn): Archivo 800 15 wdth 95, .06em caps, pill, 17/26 padding + 2 px border = 53 tall
   (phone 15/20, 14 px = 48). --primary = .btn--pink (hard 6 px pink-press edge), --ink = .btn--ink (black edge),
   --line = .btn--line, --on-chrome = .btn--line-dk, --sm = .hdr .btn (12/18, 13 px, no edge). The label is optically
   centred: the trailing .06em letter-spacing is given back on the left (padding-left − padding-right = .06em).
   ========================================================================== */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-btn);padding:var(--btn-py) var(--btn-px);border:1px solid transparent;border-radius:var(--r-btn);background:var(--sunken);color:var(--ink);font:600 var(--btn-fs)/1.1 var(--font-sans);letter-spacing:var(--tr-btn);text-decoration:none;white-space:nowrap;max-width:100%;cursor:pointer;transition:transform var(--dur-press) var(--ease-snap),box-shadow var(--dur-press) var(--ease-snap),background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pc-btn .pc-ico{width:16px;height:16px;margin-block:-2px;stroke-width:2.2}
.pc-btn .pc-arr{font-family:var(--font-sans);font-weight:700;letter-spacing:0}
/* visual audit VD-006 (26.10.): one fallback focus ring for every control without its own (zero specificity, so every
   component's own focus style still wins); the browser's thin default ring never shows */
:where(.pc-root) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pc-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
/* Primary = the one main action (.btn--pink); premium = primary plus a lock or star icon; ink = .btn--ink.
   The mockup's hard 6 px edge, literally: box-shadow 0 6px 0 (pink-press / black), 2 px transparent border, the label
   centred on the 53 px face (it is the box). Press = the key goes down onto its edge. */
.pc-btn--primary,.pc-btn--premium,.pc-btn--ink,.pc-btn--on-accent{border-color:transparent}
.pc-btn--primary,.pc-btn--premium{background:var(--accent);color:var(--on-accent)}
.pc-btn--primary:hover,.pc-btn--premium:hover{background:var(--accent-press)}
.pc-btn--ink{background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--line)}
.pc-btn--ink:hover{filter:brightness(1.18)}
.pc-btn--primary:active,.pc-btn--premium:active,.pc-btn--ink:active,.pc-btn--on-accent:active{transform:translateY(1px)}
.pc-btn--line,.pc-btn--secondary{background:var(--sunken);color:var(--ink);border-color:var(--line)}
/* UX 17.10. #41: on light the outline key is an ink frame on paper (it read as a washed-out mint pill); dark keeps the
   tonal well with the grey 50 % edge, the member area its tonal surfaces (tokens.css --btn-line-bg / --btn-line-edge). */
.pc-btn--line{background:var(--btn-line-bg);border-color:var(--btn-line-edge)}
.pc-btn--line:hover,.pc-btn--secondary:hover,.pc-btn--secondary.is-hover{background:var(--surface-2);color:var(--ink)}
.pc-btn--ghost{background:transparent;color:var(--ink);border-color:transparent}
.pc-btn--ghost:hover,.pc-btn--ghost.is-hover{border-color:transparent;background:var(--t-tint)}
/* --soft is not a mockup button: it renders as .btn--line (secondary actions are line buttons, one pink per view). */
.pc-btn--soft{background:var(--sunken);color:var(--ink);border-color:var(--line)}
.pc-btn--soft:hover{background:var(--surface-2);color:var(--ink)}
.pc-btn--white{background:var(--cream);color:var(--anthracite);border-color:transparent}
.pc-btn--on-chrome{background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
.pc-btn--on-chrome:hover{border-color:transparent;background:var(--chrome-well-hover)}
.pc-btn--on-accent{background:var(--anthracite);color:var(--white)}
.pc-btn--danger{background:transparent;color:var(--danger);border-color:var(--danger-line)}
.pc-btn--danger:hover{background:var(--danger-soft)}
.pc-btn--danger.is-confirm{background:var(--danger);color:var(--on-danger);border-color:transparent}
/* Sizes. --sm = the header button (and .more): no edge. --lg = the mockup's content button (= default). */
.pc-btn--sm,.pc-btn--sm:is(.pc-btn--primary,.pc-btn--premium,.pc-btn--ink,.pc-btn--on-accent){min-height:var(--control-sm);padding:var(--btn-sm-py) var(--btn-sm-px);border-width:1px;border-radius:var(--r-btn-sm);font-size:var(--btn-sm-fs);gap:6px;box-shadow:none}
.pc-btn--sm .pc-ico{width:16px;height:16px;margin-block:-2px}
.pc-btn--sm:active{transform:none}
.pc-btn--lg{min-height:var(--control-lg)}
.pc-btn--block{display:flex;width:100%}
.pc-btn__t{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* ui_btn clip: a long member name ends in … instead of pushing the key wider */
/* Phones: a big or full-width button whose label outgrows its box takes a second line instead of clipping. */
@media (max-width:700px){
  .pc-btn{white-space:normal;text-align:center;text-wrap:balance}
  /* Full-width buttons wrap as one inline run, so an icon stays next to the first word instead of pinned to the edge
     (a flex row keeps the wrapped text box full width and centres the lines away from the icon). */
  .pc-btn--block{display:block}
  .pc-btn--block > .pc-ico{display:inline-block;vertical-align:-4px;margin-inline:calc(var(--space-2) / 2)}   /* symmetric: works for a leading and a trailing icon */
  .pc-btn--block > .pc-count{vertical-align:1px;margin-left:var(--space-2)}
}
.pc-btn:disabled,.pc-btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
/* polish v3: a disabled pink key is a neutral waiting key (pink at .45 turned muddy mauve on dark, 1.41:1). */
.pc-btn:is(.pc-btn--primary,.pc-btn--premium):is(:disabled,.is-disabled){opacity:1;background:var(--surface-2);color:var(--ink-2);box-shadow:none}
.pc-spin{width:16px;height:16px;border-radius:var(--radius-full);border:2px solid currentColor;border-right-color:transparent;animation:pc-spin .7s linear infinite}
@keyframes pc-spin{to{transform:rotate(360deg)}}
/* Busy button (items / profile / chat JS set .is-busy while a request runs): a small spinner before the label. */
.pc-btn.is-busy{pointer-events:none}
.pc-btn.is-busy::before{content:"";width:14px;height:14px;border-radius:var(--radius-full);border:2px solid currentColor;border-right-color:transparent;animation:pc-spin .7s linear infinite}

/* Icon button: the mockup's round control (.calc__row button: 44 circle, 1 px line, transparent). On chrome the
   burger square (.burger: 40, radius 12). On photos a paper circle. */
/* Secondary link = link tier 3 (ui_more, §2.6; .pn-seeall is its alias): Inter Tight 700 14, a 2px underline in pink,
   the arrow glued to the last word (.pc-more__end never wraps), nudging 3px on hover. Tones: dk (anthracite: on-dark
   text, pink line), pink (on pink: ink text, ink line; never pink on pink). 44 tap via the ::after at the end of this file. */
.pc-more{display:inline;position:relative;font:700 14px/1.5 var(--font-sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color var(--dur-fast)}
.pc-more__end{white-space:nowrap}
.pc-more .pc-arr{display:inline-block;text-decoration:none;transition:transform var(--dur-fast)}
.pc-more:hover{text-decoration-color:currentColor}
.pc-more:hover .pc-arr{transform:translateX(3px)}
.pc-more:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pc-more--dk{color:var(--dk-ink)}
.pc-more--pink{color:var(--anthracite);text-decoration-color:var(--anthracite)}
@media (prefers-reduced-motion:reduce){.pc-more,.pc-more .pc-arr{transition:none}.pc-more:hover .pc-arr{transform:none}}
/* Tonal pass 05.10.: the round control is a sunken disc (no line); hover = one tone up. --plain is bare until hover,
   --glass (on photos) keeps the paper disc with the 50 % frame, --on-chrome is the chrome well. */
.pc-iconbtn{display:inline-grid;place-items:center;width:var(--control-md);height:var(--control-md);aspect-ratio:1;padding:0;flex:none;border-radius:50%;border:1px solid transparent;background:var(--sunken);color:var(--ink);cursor:pointer;position:relative;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pc-iconbtn .pc-ico{width:22px;height:22px}
.pc-iconbtn:hover{background:var(--surface-2)}
.pc-iconbtn--raised{background:var(--surface)}
.pc-iconbtn--plain{background:transparent}
.pc-iconbtn--plain:hover{background:var(--sunken)}
.pc-iconbtn--glass{background:var(--paper);color:var(--anthracite);border-color:var(--line)}
.pc-iconbtn--glass:hover{border-color:transparent;background:var(--cream)}
.pc-iconbtn--on-chrome{width:40px;height:40px;border-radius:var(--r-icon);background:var(--chrome-well);color:var(--on-chrome)}
.pc-iconbtn--on-chrome:hover{background:var(--chrome-well-hover)}
.pc-iconbtn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.pc-iconbtn--primary:hover{background:var(--accent-press)}
.pc-iconbtn:focus-visible,.pc-remove:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Count dot: pink, ink numerals, ringed in the parent background (--count-ring). */
.pc-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--accent);color:var(--on-accent);font:700 10px/18px var(--font-display);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--count-ring,var(--bg))}
/* Remove on upload tiles: an ink 28 circle with a drawn X. */
.pc-remove{position:absolute;top:6px;right:6px;z-index:4;display:grid;place-items:center;width:28px;height:28px;min-width:28px;aspect-ratio:1;padding:0;flex:none;border-radius:50%;border:0;background:var(--anthracite);color:var(--white);cursor:pointer}
.pc-remove .pc-ico{width:16px;height:16px;stroke-width:2.2}
.pc-remove:hover{background:var(--danger);color:var(--on-danger)}

/* ==========================================================================
   Pills (mockup .tabs-app span / .chip / .tabs button): size to content, never clipped, 1 px line.
   ========================================================================== */
/* Filter / choice pill = .tabs-app span: Inter Tight 600 13, 10/14, selected = ink. */
.pc-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pc-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:8px 12px;border:1px solid transparent;border-radius:var(--r-chip);background:var(--sunken);color:var(--ink);font:600 13px/1 var(--font-sans);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pc-chip:hover{background:var(--surface-2)}
.pc-chip.is-selected,.pc-chip[aria-current],.pc-chip[aria-pressed="true"],.pc-chip:has(input:checked){background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--btn-ink)}
.pc-chip--accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
/* .chip: the small paper pill (700 12, 8/12) with an optional live dot <b>. */
.pc-chip--sm,.pc-chip--live{min-height:30px;padding:8px 12px;font:700 12px/1 var(--font-sans);background:var(--paper);color:var(--anthracite)}
.pc-chip--sm:has(input:checked),.pc-chip--sm.is-selected,.pc-chip--sm[aria-pressed="true"],.pc-chip--sm[aria-current]{background:var(--btn-ink);color:var(--on-btn-ink)}
.pc-chip--live{gap:8px;cursor:default}
/* a live chip that is a link (the hero count → the hub): the same look plus a chevron, pointer and the ink border on hover */
a.pc-chip--live{cursor:pointer}
a.pc-chip--live > .pc-ico{width:14px;height:14px;margin:0 -2px 0 -2px;transition:transform var(--dur-fast)}
a.pc-chip--live:hover{border-color:transparent;background:var(--t-tint-2)}
a.pc-chip--live:hover > .pc-ico{transform:translateX(2px)}
/* T42: chips are UI, not paper objects (design doc §3.10): in dark the small pill takes the dark surface like every other pill. */
[data-theme="dark"] .pc-chip--sm:not(.is-selected):not([aria-pressed="true"]):not([aria-current]):not(:has(input:checked)){background:var(--sunken);border-color:transparent;color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-chip--sm:not(.is-selected):not([aria-pressed="true"]):not([aria-current]):not(:has(input:checked)){background:var(--sunken);border-color:transparent;color:var(--ink)}}
.pc-chip--live > b{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live)}
.pc-chip input[type=radio],.pc-chip input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pc-chip:has(input:focus-visible),.pc-chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-chipn{font-weight:600;opacity:.72}
@media (max-width:700px){
  .pc-chips--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .pc-chips--scroll::-webkit-scrollbar{display:none}
  .pc-chips--scroll > *{flex:none}
}
/* Segmented tabs = .tabs-app: a row of pills, gap 8, the active one ink. Children: a, button, label, .pc-tab. */
.pc-seg,.pn-seg,.pc-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;margin:0;padding:0;border:0;background:transparent}
.pc-seg--md{min-height:var(--control-md)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label),.pc-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--control-sm);margin:0;padding:8px 12px;border:1px solid transparent;border-radius:var(--r-chip);background:var(--sunken);color:var(--ink);font:600 13px/1 var(--font-sans);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label):hover,.pc-tab:hover{background:var(--surface-2)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(.is-active,[aria-current="page"],[aria-current="true"],[aria-selected="true"],[aria-pressed="true"]),:is(.pc-seg,.pn-seg) > label:has(input:checked),.pc-tab.is-active,.pc-tab:has(input:checked){background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--btn-ink)}
:is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label):focus-visible,.pc-tab:focus-visible,.pc-tab:has(input:focus-visible),:is(.pc-seg,.pn-seg) > label:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
:is(.pc-seg,.pn-seg) > label > input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
:is(.pc-seg,.pn-seg) > :is(button,a) .pc-ico,.pc-chip .pc-ico{width:18px;height:18px;margin-block:-3px}
/* A count or an icon inside a pill never makes it taller than the mockup's 35 (13 px line + 10/10 + 1/1). */
:is(.pc-seg,.pn-seg) > button:disabled{opacity:.45;cursor:not-allowed}
/* Chrome seg = the mockup tool bar (.tool .tabs): a chrome track, on-dark pills, the active one pink. */
.pc-seg.pc-seg--chrome{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:12px;background:var(--chrome);border:1px solid transparent}
.pc-seg.pc-seg--chrome > :is(a,button,label){min-height:33px;padding:9px 14px;color:var(--on-chrome);background:var(--chrome-well)}
.pc-seg.pc-seg--chrome > :is(a,button,label):hover{background:var(--chrome-well-hover)}
.pc-seg.pc-seg--chrome > :is(.is-active,[aria-current="page"],[aria-selected="true"],[aria-pressed="true"]){background:var(--pink);color:var(--anthracite);border-color:transparent}
/* Inline counts inside pills. */
.pc-count.pc-count--inline,.pn-seg__n{position:static;display:inline-block;min-width:18px;height:18px;margin-block:-3px;padding:0 5px;border-radius:var(--radius-full);background:var(--accent);color:var(--on-accent);font:700 10px/18px var(--font-display);text-align:center;box-shadow:none}
:is(.pc-seg,.pn-seg) > .is-active :is(.pc-count--inline,.pn-seg__n),:is(.pc-seg,.pn-seg) > [aria-current] :is(.pc-count--inline,.pn-seg__n){background:var(--accent);color:var(--on-accent)}
/* Gold-bronze pill (owner 15.10.: the Premium choice on /ads/ and /sellers/): a modifier of the kit pill or chip, never its
   own component. Rest = light metal + dark bronze ink, chosen = dark bronze + pale gold ink and a gold ring, so the chosen
   state still reads at a glance. The slow sheen sweeps the first layer; no motion under prefers-reduced-motion. The
   selectors carry :hover so the kit's hover fill never replaces the metal. */
:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(a,button,label),:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(a,button,label):hover,.pc-chip.pc-chip--premium,.pc-chip.pc-chip--premium:hover{border-color:transparent;background:var(--prem-sheen) 100% 0/300% 100% no-repeat,var(--prem-metal);color:var(--prem-metal-ink);box-shadow:var(--prem-metal-bevel)}
:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(.is-active,[aria-current],[aria-pressed="true"]),:is(.pc-seg,.pn-seg) > .pc-chip--premium:is(.is-active,[aria-current],[aria-pressed="true"]):hover,.pc-chip.pc-chip--premium:is(.is-selected,[aria-current],[aria-pressed="true"]),.pc-chip.pc-chip--premium:is(.is-selected,[aria-current],[aria-pressed="true"]):hover{background:var(--prem-sheen) 100% 0/300% 100% no-repeat,var(--prem-metal-dk);color:var(--prem-metal-dk-ink);box-shadow:var(--prem-metal-ring)}
@media (hover:hover){.pc-chip--premium:hover{filter:brightness(1.05)}}
@media (prefers-reduced-motion:no-preference){.pc-chip--premium{animation:pc-prem-sheen 5s ease-in-out 1s infinite}}
@keyframes pc-prem-sheen{0%{background-position:100% 0,0 0}45%,100%{background-position:0 0,0 0}}

/* ==========================================================================
   Labels, badges, stamps, stickers (mockup .real / .stamp / .sticker)
   ========================================================================== */
/* Badge = .real: ink label, radius 6, Archivo 800 11 wdth 90 .12em caps, 6/9. The generic badge is its duck twin. */
.pc-badge{display:inline-flex;align-items:center;gap:6px;min-height:23px;padding:6px 9px;border-radius:var(--r-label);font:var(--badge-font,600 11px/1 var(--font-label));letter-spacing:var(--badge-tr,.02em);white-space:nowrap;background:var(--sunken);color:var(--ink)}
.pc-badge .pc-ico{width:12px;height:12px}
.pc-real{background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pc-real::before{content:"✓";color:var(--pink)}
/* Premium = the same ink label with the pink star (--prem-ring on dark). */
.pc-badge--premium{background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pc-badge--premium .pc-ico{color:var(--pink);fill:currentColor;stroke:none}
.pc-badge--verified{background:var(--accent-soft);color:var(--ink)}
.pc-badge--accent{background:var(--accent);color:var(--on-accent)}
/* SH-01: the card chip stays off. N7 #93: the seal = legacy's fake / ID check */
.pc-verified{flex:none;width:16px;height:16px;color:var(--pink);vertical-align:-3px}
:not(.pc-scard__name)>.pc-verified{margin-left:4px}
.pn-vbadge .pc-ico{color:var(--pink)}
.pc-badge--verified:has(.pc-verified){display:none}
.pc-badge--online{background:transparent;padding:0;min-height:0;color:var(--ink-2);font:600 12px/1.3 var(--font-sans);letter-spacing:0;text-transform:none}
.pc-badge--online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--online)}
.pc-badge--danger{background:transparent;padding:0;color:var(--danger)}
/* Lock pill on gated media: the ink label on the photo. */
.pc-lockpill{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:7px 11px;border-radius:var(--r-label);background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring);font:700 11px/1 var(--font-display);letter-spacing:0;white-space:nowrap}
.pc-lockpill .pc-ico{width:14px;height:14px;stroke-width:2.2}
/* .stamp: the rubber stamp, -9deg, ink on a duck veil. */
.pc-stamp,.pn-stamp{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:3px solid var(--anthracite);border-radius:var(--r-stamp);background:var(--stamp-fill);color:var(--anthracite);font:700 19px/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap;transform:rotate(-9deg)}
.pc-stamp .pc-tub,.pn-stamp .pn-tub{border-color:var(--anthracite);color:var(--anthracite)}
.pc-stamp--sm{padding:6px 8px;border-width:2px;font-size:15px}
/* .sticker: Archivo 800 12 wdth 90 .1em caps pill, +7deg, soft drop. Cream / black. */
.pc-sticker,.pn-sticker{display:inline-block;padding:10px 14px;border-radius:var(--radius-full);font:700 12px/1 var(--font-display);letter-spacing:0;white-space:nowrap;transform:rotate(7deg);box-shadow:var(--sh-sticker);background:var(--cream);color:var(--anthracite)}
.pn-sticker{position:absolute;z-index:3}
.pc-sticker--cream,.pn-sticker--cream,.pn-sticker--blush{background:var(--cream);color:var(--anthracite)}
.pc-sticker--black,.pn-sticker--black{background:var(--anthracite);color:var(--white)}
.pn-sticker--accent{background:var(--pink);color:var(--anthracite)}
.pn-sticker--static{position:static}
.pn-sticker--tilt{transform:rotate(7deg)}
/* Reserved: the stamp across the photo (the photo desaturated 40 %). */
.pn-tape{position:absolute;left:50%;top:50%;z-index:3;display:inline-flex;align-items:center;padding:8px 12px;border:3px solid var(--anthracite);border-radius:var(--r-stamp);background:var(--stamp-fill);color:var(--anthracite);font:700 15px/1 var(--font-display);letter-spacing:-.01em;white-space:nowrap;transform:translate(-50%,-50%) rotate(-9deg);pointer-events:none}
.pn-tape > span + span{display:none}
/* adult (owner 05.10.): a porn cover comes pre-blurred from legacy; the lock pill names the way out (Premium). */
.pn-lock{position:absolute;left:50%;top:50%;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--accent);color:var(--ink);font:700 11px/1 var(--font-display);letter-spacing:0;transform:translate(-50%,-50%);box-shadow:var(--sh-float);pointer-events:none}
.pn-lock svg{width:14px;height:14px}
.is-locked .pc-media > img,.is-locked .pc-media > picture > img{transform:scale(1.04)}   /* hides the blur's soft edge */
.is-reserved .pc-media > img,.is-reserved .pc-media > picture > img{filter:grayscale(.4)}
/* Live pill = .chip with the live dot. */

.pn-livedot{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--live);animation:pn-pulse 1.6s ease-out infinite}
@keyframes pn-pulse{0%{box-shadow:0 0 0 0 var(--pulse-ring)}100%{box-shadow:0 0 0 10px transparent}}
.pn-ondot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2px var(--dot-ring,var(--surface))}

/* ==========================================================================
   Avatar (mockup .seller .av): a circle with the 1 px line on duck egg; photo or Archivo initial.
   ========================================================================== */
.pc-avatar{position:relative;flex:none;align-self:center;display:inline-grid;place-items:center;width:40px;height:40px;min-width:0;max-width:none;aspect-ratio:1;overflow:hidden;border-radius:50%;border:1px solid transparent;background:var(--av-g0);color:var(--av-ink);font:700 16px/1 var(--font-display);text-decoration:none}
.pc-avatar img{width:100%;height:100%;aspect-ratio:1;border-radius:inherit;object-fit:cover;object-position:50% 35%}
/* A17 (owner 18.10.): six muted tones, the initial in ink (pnew_avatar_tone: id % 6); g6 / g7 only for markup cached before */
.pc-avatar--g0{background:var(--av-g0);color:var(--av-ink)}
.pc-avatar--g1{background:var(--av-g1);color:var(--av-ink)}
.pc-avatar--g2{background:var(--av-g2);color:var(--av-ink)}
.pc-avatar--g3{background:var(--av-g3);color:var(--av-ink)}
.pc-avatar--g4{background:var(--av-g4);color:var(--av-ink)}
.pc-avatar--g5{background:var(--av-g5);color:var(--av-ink)}
.pc-avatar--g6{background:var(--av-g0);color:var(--av-ink)}
.pc-avatar--g7{background:var(--av-g1);color:var(--av-ink)}
.pc-avatar--sm{width:28px;height:28px;font-size:12px}
.pc-avatar--xs{width:22px;height:22px;font-size:10px}
.pc-avatar--lg{width:84px;height:84px;font-size:32px}
.pc-avatar--xl{width:118px;height:118px;font-size:44px}
/* Pink ring = "this is the seller" / online. */
.pc-avatar--ring{border:0}
.pc-avatar__dot{position:absolute;right:0;bottom:0;width:28%;height:28%;min-width:9px;min-height:9px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2px var(--surface)}
/* Story row: 64 rings (pink when new/online, line otherwise). */



/* Ticker: a flat pink band (no tilt), kicker type. Real facts only. */
.pn-ticker{display:flex;align-items:center;height:36px;margin:14px 0;overflow:hidden;background:var(--pink);color:var(--anthracite);border-radius:var(--radius-full)}
.pn-ticker__track{display:flex;flex:none;gap:26px;padding-inline-end:26px;white-space:nowrap;font:600 12px/1 var(--font-label);letter-spacing:0;animation:pn-marquee 26s linear infinite}
.pn-ticker__track > span{display:inline-flex;align-items:center;gap:26px}
.pn-ticker__track > span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--anthracite);opacity:.55}
@keyframes pn-marquee{to{transform:translateX(-50%)}}

/* ==========================================================================
   Notes, alerts, toast (mockup .rules is the info box)
   ========================================================================== */
.pc-rules{background:var(--surface);border:0;border-radius:var(--r-rules);padding:18px 22px;font-size:13px;color:var(--ink-2)}
.pc-rules b{color:var(--ink)}
/* Tonal pass 05.10.: an alert is a tonal note (surface on the ground, sunken in a panel: app.css), no line; danger = the
   danger-soft fill with the danger icon. */
.pc-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:16px 20px;border-radius:var(--r-rules);border:1px solid transparent;background:var(--surface);color:var(--ink);font:400 14px/1.45 var(--font-sans)}
.pc-alert b{font-weight:700}
.pc-alert .pc-ico{margin-top:1px}
.pc-alert--success .pc-ico{color:var(--success)}
.pc-alert--warning .pc-ico{color:var(--warning)}
.pc-alert--danger{background:var(--danger-soft)}
.pc-alert--danger .pc-ico{color:var(--danger)}
.pc-alert[hidden]{display:none}   /* adml 03.10.: a hidden error box (data-lp-err …) showed as an empty red frame */
.pc-toast{display:inline-flex;align-items:center;gap:var(--space-3);min-height:48px;padding:0 20px;border-radius:var(--radius-full);border:1px solid transparent;background:var(--chrome);color:var(--on-chrome);box-shadow:var(--sh-float);font:600 14px/1.3 var(--font-sans)}
.pc-toast button,.pc-toast a{border:0;background:transparent;color:var(--pink);font:700 var(--btn-sm-fs)/1.2 var(--font-display);letter-spacing:var(--tr-btn);text-decoration:none;cursor:pointer;padding:0}

/* ==========================================================================
   Page head (mockup .app .h-m + .sub) and progress steps
   ========================================================================== */


/* ==========================================================================
   Fields (tonal pass 05.10.: filled pills, not outlined boxes. The fill is --field on the ground and --field-in inside
   a panel / sheet / card (re-pointed below); the border stays declared, transparent, so focus and error colour it.
   Focus = the ink edge + the 3 px pink-soft ring. The label is the mockup small caps label.)
   ========================================================================== */
.pc-field{display:grid;gap:8px;min-width:0}
.pc-label{font:600 13px/1.2 var(--font-label);letter-spacing:0;color:var(--ink)}
:is(.pn-panel,.pn-chatpage,.pn-chatrail,.pn-sheet,.pn-menu,.pc-box,.pc-card,.pc-list,.pc-actionbar,.pn-phead,.pn-composer,.pn-mksheet,.pc-empty,.pn-empty){--field:var(--field-in)}
.pc-input{width:100%;min-height:var(--control-field);padding:0 14px;border-radius:var(--r-field);border:1px solid var(--line);background:var(--field);color:var(--ink);font:400 15px/1.3 var(--font-sans);appearance:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background-color var(--dur-fast)}
.pc-input::placeholder{color:var(--ink-2);opacity:1}
.pc-input:focus,.pc-input.is-focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.pc-input{height:auto;min-height:120px;padding:14px 20px;border-radius:var(--r-pcard);resize:vertical;line-height:1.5}
.pc-help{font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pc-field.is-error .pc-input{border-color:var(--danger)}
.pc-field.is-error .pc-input:focus{box-shadow:0 0 0 3px var(--danger-soft)}
.pc-field.is-error .pc-help{color:var(--danger)}
.pc-input:disabled{background:var(--sunken);color:var(--ink-2);opacity:.7;cursor:not-allowed}
.pc-input[readonly]{background:transparent;border-color:var(--mline);color:var(--ink-2)}   /* visual audit VM-019: read-only reads as text in a frame, not as a disabled well */
.pc-affix{position:relative}
.pc-affix .pc-input{padding-right:52px}
.pc-affix > .pc-affix__btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-2);border-radius:var(--radius-full);cursor:pointer}
.pc-affix > .pc-affix__btn:hover{color:var(--ink)}
.pc-select{position:relative}
.pc-select .pc-input{padding-right:44px;cursor:pointer}
.pc-select::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
/* .pc-selchip: a native select in the pill geometry (35, Inter Tight 600 13, the line; set = ink like a chosen pill). */
.pc-selchip{position:relative;display:inline-block;flex:none}
.pc-selchip .pc-input{width:auto;min-height:35px;padding:0 38px 0 14px;background:var(--sunken);font:600 13px/1 var(--font-sans)}
.pc-selchip::after{right:16px;width:7px;height:7px}
.pc-selchip.is-set .pc-input{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pc-selchip.is-set::after{border-color:var(--on-btn-ink)}
/* Choice: 22 box / circle with the line, checked = ink. Toggle: 52x30 line track, pink when on, paper knob. */
.pc-choice{display:inline-flex;align-items:center;gap:10px;font:400 15px/1.4 var(--font-sans);color:var(--ink);cursor:pointer}
.pc-check,.pc-radio{appearance:none;margin:0;flex:none;width:22px;height:22px;border:1px solid var(--ink-3);background:var(--surface);display:inline-grid;place-items:center;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.pc-check{border-radius:6px}
.pc-radio{border-radius:50%}
.pc-check:checked,.pc-radio:checked{background:var(--btn-ink);border-color:var(--btn-ink)}
.pc-check:checked::after{content:"";width:10px;height:5px;border-left:2.5px solid var(--on-btn-ink);border-bottom:2.5px solid var(--on-btn-ink);transform:translateY(-1px) rotate(-45deg)}
.pc-radio:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-btn-ink)}
.pc-switch{appearance:none;margin:0;flex:none;position:relative;width:52px;height:30px;padding:0;border:1px solid transparent;border-radius:var(--radius-full);background:var(--surface-2);cursor:pointer;transition:background-color var(--dur-base),border-color var(--dur-base)}
.pc-switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-knob);transition:transform var(--dur-base) var(--ease-snap)}
/* A8 (owner 18.10., innen-50): a switch that is on is ink (its knob the surface), not pink — pink stays for the one key per
   view and for unread; Settings had more pink than the pay page */
.pc-switch:checked{background:var(--ink);border-color:transparent}   /* visual audit VM-004: the ink fill alone; in dark the 1px ink edge read as a white line */
.pc-switch:checked::after{background:var(--surface)}
.pc-switch:checked::after{transform:translateX(22px)}
button.pc-switch,i.pc-switch{margin-left:auto}
button.pc-switch::after,i.pc-switch::after{content:none}
button.pc-switch i,i.pc-switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-knob);transition:transform var(--dur-base) var(--ease-snap)}
button.pc-switch.is-on,button.pc-switch[aria-checked="true"],[aria-pressed="true"] > i.pc-switch{background:var(--ink);border-color:var(--ink)}
button.pc-switch.is-on i,button.pc-switch[aria-checked="true"] i,[aria-pressed="true"] > i.pc-switch i{background:var(--surface)}
button.pc-switch.is-on i,button.pc-switch[aria-checked="true"] i,[aria-pressed="true"] > i.pc-switch i{transform:translateX(22px)}
/* UX 17.10. #76: one switch everywhere. A row that is itself the control (the light / dark toggle in the member drawer and
   the guest menu: a link with aria-pressed) draws it as <i class="pc-switch" aria-hidden="true"><i></i></i>. */
@media (prefers-reduced-motion:reduce){.pc-switch,.pc-switch::after,.pc-switch i{transition:none}}
.pc-check:focus-visible,.pc-radio:focus-visible,.pc-switch:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Photo upload: dashed pcard slots. */


.pc-slot{position:relative;aspect-ratio:1;max-width:100%;border-radius:var(--r-pcard);overflow:hidden;background:var(--surface);border:1.5px dashed var(--line);display:grid;place-items:center;align-content:center;gap:4px;color:var(--ink-2);font:600 12px/1.3 var(--font-sans);cursor:pointer}
.pc-slot:hover{border-color:var(--line-3);color:var(--ink)}
.pc-slot.is-filled{border:1px solid var(--line);cursor:default}
.pc-slot__cover{position:absolute;left:6px;bottom:6px;z-index:3}

/* ==========================================================================
   Media + the missing-photo care label (mockup .ph stripes + .clabel-big). Never a drawn panty, never a woman.
   ========================================================================== */
.pc-media{position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:var(--ph-media);color:var(--ph-text)}
/* photo house look (docs/photo-look-06-10.md): filter on the photo, ::before = colour pull, ::after = tone (paper x vignette x foot x grain).
   Every amount is its token x --photo-look x --photo-ease; no size, no layout, nothing to load.
   08.10. (#85): a pipeline photo may sit in a <picture> (an AVIF <source> in front of the same <img>, lib/imgvariant.php
   pnew_img_picture). The picture box is display:contents and every "> img" rule of a photo box also names "> picture > img". */
:is(.pc-media,.pc-scard__media,.pc-story__av,.pn-do-card) > picture{display:contents}
.pc-media > img,.pc-media > picture > img{z-index:2;object-position:50% 35%;transition:filter var(--dur-slow) var(--ease-out);filter:saturate(calc(1 - var(--photo-desat) * var(--photo-look) * var(--photo-ease))) contrast(calc(1 + var(--photo-contrast) * var(--photo-look) * var(--photo-ease))) brightness(calc(1 + var(--photo-lift) * var(--photo-look) * var(--photo-ease)))}
.pc-media:has(> img,> picture > img)::before,.pc-media:has(> img,> picture > img)::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;transition:opacity var(--dur-slow) var(--ease-out)}
.pc-media:has(> img,> picture > img)::before{opacity:calc(var(--photo-wash) * var(--photo-look) * var(--photo-ease));background:var(--photo-tint);mix-blend-mode:var(--photo-blend)}
.pc-media:has(> img,> picture > img)::after{opacity:calc(var(--photo-tone) * var(--photo-look) * var(--photo-ease));background:var(--photo-grain) 0 0/120px 120px,var(--photo-foot),var(--photo-shade);background-blend-mode:multiply;mix-blend-mode:var(--photo-tone-blend)}
@media (hover:hover){.pn-card-link:hover .pc-media{--photo-ease:var(--photo-hover)}}
@media (prefers-reduced-motion:reduce){.pc-media > img,.pc-media > picture > img,.pc-media::before,.pc-media::after{transition:none}}
.pn-gal__slide,.pn-gal__thumb,.pn-snap{--photo-look:0}   /* true colour where buyers judge the item: ad gallery, orders, offers, reviews (grading = cards and rails only) */
:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media::before,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media::after,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media::before,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media::after{content:none}   /* and no idle layers there */
:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media > img,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap).pc-media > picture > img,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media > img,:is(.pn-gal__slide,.pn-gal__thumb,.pn-snap) .pc-media > picture > img{filter:none}
.pc-media:has(> .pc-nophoto){container-type:inline-size}
/* The care label (.clabel-big): cream, radius 6, dashed seam 5 px in, -5deg, logo + "no photo yet" + three symbols. */
.pc-nophoto{position:relative;z-index:1;display:grid;justify-items:start;gap:0;width:min(62%,190px);padding:12px 12px 11px;border-radius:var(--r-label);background:var(--cream);color:var(--anthracite);transform:rotate(-5deg);box-shadow:var(--sh-pola);font-size:14px}
.pc-nophoto::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--dash-2);border-radius:4px;pointer-events:none}
.pc-nophoto .pc-logo{font-size:1.15em;color:var(--anthracite)}
.pc-nophoto .pc-logo__dot{animation:none}
.pc-nophoto b{display:block;margin-top:.5em;font:600 .72em/1.15 var(--font-label);letter-spacing:0}
.pc-nophoto__syms{display:flex;gap:6px;margin-top:.6em}
.pc-nophoto__syms i{position:relative;width:14px;height:14px;border:2px solid var(--anthracite);border-radius:3px}
.pc-nophoto__syms i::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;background:var(--anthracite);transform:rotate(45deg)}
.pc-nophoto__syms i:nth-child(2){border-radius:50%}
.pc-nophoto__syms i:nth-child(3){border-radius:0;border-width:0 0 2px;width:12px}
@container (max-width:150px){.pc-nophoto{padding:8px;width:70%;font-size:11px}.pc-nophoto b,.pc-nophoto__syms{display:none}}
@container (max-width:80px){.pc-nophoto{padding:5px 6px;font-size:9px;transform:none}.pc-nophoto::before{inset:2px;border-width:1px}}
/* Retired: the drawn garment (svg_cut) now renders the care label; the class stays inert for old markup. */


/* ==========================================================================
   Listing card (adcard2 03.10., docs/adcard-03-10.md; the seller portrait's sibling). The photo IS the card: the 4:5
   photo fills the rounded frame (radius 20), the 50 % grey edge drawn over it (the link's ::after, the same edge on
   every card and in every state). On the photo: the price ticket top left (ink, cream tabular numerals; a label, not a
   button), the glass like top right, the RESERVED stamp, and the caption at the foot on a soft shade only as tall as it
   needs: PREMIUM (pink kicker) / the title, 2 lines max / a 22 px round avatar + "@name" and the glass photo count.
   Nothing under the photo, so every card in a row is the same size. The upper part of the photo stays unshaded, so the
   item's colour can still be judged (the ad page gallery stays true colour anyway).
   .pc-card alone stays the plain paper card for the wizard's storefront preview (.pn-wizcard).
   ========================================================================== */
.pc-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pcard);overflow:hidden;color:var(--ink);min-width:0}
.pc-card > .pn-card-link{display:flex;flex-direction:column;flex:1;min-width:0;color:inherit;text-decoration:none}
.pc-card .pc-media{aspect-ratio:4/5;width:100%;max-width:100%;flex:none;border-radius:0}
.pc-card .pc-media > img,.pc-card .pc-media > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc-card.pn-prodcard{display:block;background:none;border:0;border-radius:var(--r-pcard);overflow:visible;container:pc-card / inline-size}
.pn-prodcard > .pn-card-link{position:relative;display:block;min-width:0;border-radius:inherit;overflow:hidden;isolation:isolate;color:var(--scard-ink)}
.pn-prodcard > .pn-card-link::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--t-card-edge,transparent);transition:box-shadow var(--dur-fast);pointer-events:none}
.pn-prodcard .pc-media{border-radius:inherit}
.pn-prodcard .pc-media > img,.pn-prodcard .pc-media > picture > img{transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out)}
/* A missing photo: the care label rides a little higher, clear of the caption. */
.pn-prodcard .pc-media:has(> .pc-nophoto){padding-bottom:24%}
/* The price ticket: top left, never under the like (its width stops short of the like's column). */
.pc-card__ticket{position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 64px);min-height:28px;padding:4px 9px 4px 7px;border-radius:var(--r-label);background:var(--anthracite);color:var(--cream);box-shadow:0 0 0 1px var(--line),var(--scard-tshadow)}
.pc-card__ticket::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--scard-ink-3)}   /* the punched hole: a tag, not a button */
.pc-card__ticket .pc-price{line-height:1;color:inherit}
.pc-card__ticket .pn-askprice{min-width:0;font:600 11.5px/1.15 var(--font-sans);color:inherit;overflow-wrap:anywhere}
.pn-prodcard.is-reserved .pc-card__ticket{background:var(--scard-glass-hover);color:var(--scard-ink-2)}
/* The caption: bottom-anchored, so a kicker or a second title line grows it upwards; the card keeps its size. */
.pn-prodcard .pn-tape{top:40%}   /* the stamp sits above the caption */
.pc-card__cap{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;gap:5px;padding:14px 12px 11px;min-width:0;color:var(--scard-ink);text-shadow:var(--scard-tshadow)}
.pc-card__cap::before{content:"";position:absolute;inset:-26px 0 0;z-index:-1;background:var(--pcard-cap-shade);pointer-events:none}
.pn-prodcard .pc-card__title{margin:0;font:600 15px/1.25 var(--font-sans);color:var(--scard-ink);min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}   /* 2 lines max, the title attribute has the rest */
.pn-prodcard .pc-card__tier{order:-1;margin-bottom:-1px;font:600 11px/1 var(--font-label);letter-spacing:0;color:var(--pink);white-space:nowrap}
.pc-card__by{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px;font:500 12.5px/1.2 var(--font-sans);color:var(--scard-ink-2);white-space:nowrap}
.pc-card__by > .pc-avatar{width:22px;height:22px;border-color:var(--line);font-size:10px;text-shadow:none}
.pc-card__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* The mockup's "@nickname": the @ is drawn, never text (an @handle in text reads as contact data: pnew_item_contact). */
.pc-card__name::before{content:"@"}
.pc-card__detail{flex:none;white-space:pre}
/* The like: the seller portrait's glass disc (34, phone 32, 44+ hit area). Product photos are mostly light, so the
   glass rests one step darker (the portrait's hover glass) and the heart carries the caption shadow. */
.pc-card__fav,.pc-card .pc-card__fav{position:absolute;top:10px;right:10px;z-index:6;display:grid;place-items:center;padding:0;border-radius:50%;line-height:0;width:34px;height:34px;border:1px solid var(--line);background:var(--scard-glass-hover);color:var(--scard-ink);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transition:background-color var(--dur-fast),color var(--dur-fast),transform var(--dur-press)}
.pc-card__fav .pc-ico,.pc-card .pc-card__fav .pc-ico{display:block;width:18px;height:18px;margin:0;stroke-width:2.2;filter:drop-shadow(var(--scard-tshadow))}
.pc-card .pc-card__fav::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pc-card .pc-card__fav:hover{background:var(--glass-strong);border-color:var(--line)}
.pc-card .pc-card__fav:active{transform:scale(.92)}
.pc-card .pc-card__fav.is-on,.pc-card .pc-card__fav[aria-pressed="true"]{background:var(--scard-glass-hover);border-color:var(--line);color:var(--pink)}
.pc-card .pc-card__fav.is-on .pc-ico,.pc-card .pc-card__fav[aria-pressed="true"] .pc-ico{fill:currentColor}
.pc-card .pc-card__fav:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-prodcard:focus-within:has(.pn-card-link:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-prodcard .pn-card-link:focus-visible{outline:none}
@media (hover:hover){.pn-prodcard:hover .pc-media > img,.pn-prodcard:hover .pc-media > picture > img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pn-prodcard .pc-media > img,.pn-prodcard .pc-media > picture > img,.pc-card .pc-card__fav{transition:none}}
/* Photo count: the small paper chip bottom right (gallery, feed); on a listing card a small glass chip at the end of
   the "@name" line (the name shortens first). */
.pn-photocount{position:absolute;right:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:5px 8px;border-radius:var(--radius-full);background:var(--paper);color:var(--anthracite);border:1px solid var(--line);font:700 11px/1 var(--font-sans)}
.pn-photocount .pc-ico{width:14px;height:14px}
.pn-prodcard .pn-photocount{position:static;flex:none;gap:3px;min-height:20px;margin-left:auto;padding:3px 7px 3px 6px;background:var(--scard-glass);color:var(--scard-ink);font:700 10.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-prodcard .pn-photocount .pc-ico{width:12px;height:12px}
@media (max-width:700px){
  .pc-card .pc-card__fav{top:8px;right:8px;width:32px;height:32px}.pc-card .pc-card__fav .pc-ico{width:17px;height:17px}
  .pn-photocount{right:8px;bottom:8px}
  .pc-card__ticket{top:8px;left:8px;min-height:26px;max-width:calc(100% - 58px)}
  .pc-card__cap{padding:12px 10px 9px;gap:4px}
  .pc-card__by{font-size:12px}
  .pn-prodcard .pc-card__tier{font-size:11px;letter-spacing:.06em}
}
/* Compact cards (rails and narrow grids, < 176 px): smaller type, the avatar 20, the photo count gives way. */
@container pc-card (max-width:175px){
  .pc-card__ticket{padding:3px 8px 3px 6px;gap:5px}
  .pc-card__ticket .pn-askprice{font-size:11px}
  .pc-card__cap{padding:10px 9px 8px;gap:4px}
  .pc-card__by{gap:5px;min-height:20px;font-size:11.5px}
  .pc-card__by > .pc-avatar{width:20px;height:20px;font-size:9px}
  .pn-prodcard .pc-card__by > .pn-photocount{display:none}
}
/* Top listing (owner 08.10., lib/top_data.php): the card's quiet glass label over the title — the photo count's glass,
   the 50 % grey edge, ink text; never pink (pink stays the one key). The listing page head shows .pn-topbadge (a .pc-badge). */
.pc-card__top{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:20px;padding:3px 7px 3px 6px;border-radius:var(--r-label);border:1px solid var(--line);background:var(--scard-glass);color:var(--scard-ink);font:600 10.5px/1 var(--font-sans);white-space:nowrap;text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pc-card__top .pc-ico{flex:none;width:12px;height:12px}
.pc-card__top > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pn-topbadge .pc-ico{width:12px;height:12px}
/* Ships first (09.10.): her badge in the profile head (quiet, never pink); on cards it is the .pc-card__top glass label */
.pn-sfbadge .pc-ico{width:14px;height:14px}
.pc-card__top + .pc-card__sf{margin-top:-2px}
/* The "Top listings" area over a grid (guest hub / facet / /ads/, member market): the section head and one row of
   listing cards as a snap scroller; half a card peeks out at the end, so the row reads as more. */
.pn-toparea{display:grid;gap:12px;min-width:0;margin:0 0 28px}
.pn-toparea > .pc-sechead{margin:0}
.pn-toparea__row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(168px,calc((100% - 4 * 16px) / 4.5),260px);gap:16px;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px}
.pn-toparea__row > *{min-width:0;scroll-snap-align:start}
/* The member market's wide column (layout.css .pn-wide: 4 / 5 / 6 / 7 columns): the area's cards keep the grid's width. */
@media (min-width:1280px){.pn-main > .pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 4 * 16px) / 5.4)}}
@media (min-width:1440px){.pn-main > .pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 5 * 16px) / 6.4)}}
@media (min-width:1800px){.pn-main > .pn-wide .pn-toparea__row{grid-auto-columns:calc((100% - 6 * 16px) / 7.4)}}
@media (max-width:700px){
  .pn-toparea{margin-bottom:20px}
  .pn-toparea__row{grid-auto-columns:calc((100% - 2 * 12px) / 2.3);gap:12px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
}
/* Price: Archivo 900 wdth 80 tabular; the currency sits on the baseline at the same size ($38). */
.pc-price{font:700 var(--fs-price-card)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num);color:var(--ink);white-space:nowrap}
.pc-price__cur{font-size:1em;font-weight:inherit;vertical-align:baseline;line-height:inherit;margin:0}
.pc-price--l{font-size:var(--fs-price-l,40px)}
.pc-price--m{font-size:var(--fs-price-m,30px)}

/* ==========================================================================
   Seller card = a portrait (art-director pass 02.10., docs/sellercard-02-10.md). One surface: the photo fills the
   rounded 4:5 frame (object-position high: faces, not crops), the 50 % grey frame line is drawn over the photo (::after,
   the same edge on every card and in every state, premium included), the caption sits on the soft anthracite foot shade:
   PREMIUM kicker (pink, premium only), "@name" (Archivo 800, the @ quiet), meta (online dot + status / the country),
   "★ 4.9 · 14 listings". The like = a small glass disc top right, 44 px hit area. Hover: the photo zooms 3.5 %, the frame
   stays. No shadow (mockup cards carry none).
   ========================================================================== */
.pc-sellers{display:flex;gap:16px;flex-wrap:wrap}
.pc-sellers > .pc-scard{flex:none;width:176px}
.pc-scard{position:relative;display:block;min-width:0;aspect-ratio:4/5;border-radius:var(--r-pcard);overflow:hidden;isolation:isolate;background:var(--ph-media);color:var(--scard-ink)}
.pc-scard::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--t-card-edge,transparent);transition:box-shadow var(--dur-fast);pointer-events:none}
.pc-scard > .pn-card-link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.pc-scard > .pn-card-link::after{content:"";position:absolute;inset:0;z-index:3;background:var(--scard-shade);pointer-events:none}
.pc-scard__media{position:absolute;inset:0}
.pc-scard__media > img,.pc-scard__media > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform var(--dur-slow) var(--ease-out)}
.pc-scard__media:has(> .pc-nophoto){place-items:start center;padding-top:26%}
/* The caption: bottom-anchored, so a premium kicker or a second meta line grows it upwards; every card keeps its height. */
.pc-scard__cap{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;justify-content:flex-start;min-height:86px;gap:3px;padding:14px 14px 13px;min-width:0;text-shadow:var(--scard-tshadow)}
.pc-scard__cap::before{content:"";position:absolute;inset:-56px 0 0;z-index:-1;background:var(--scard-cap-shade);pointer-events:none}
.pc-scard__tier{margin-bottom:2px;font:600 11px/1 var(--font-label);letter-spacing:0;color:var(--pink)}
.pc-scard__name{display:flex;align-items:center;gap:5px;min-width:0;font:700 17px/1.15 var(--font-sans);letter-spacing:0;color:var(--scard-ink)}
.pc-scard__name > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-scard__name > span::before{content:"@";margin-right:1px;font:500 .9em/1 var(--font-sans);color:var(--scard-ink-3)}
.pc-scard__meta,.pc-scard__score{display:block;min-width:0;font:500 12.5px/1.3 var(--font-sans);color:var(--scard-ink-2);overflow-wrap:anywhere}
.pc-scard__meta.is-online{color:var(--scard-ink);font-weight:600}
.pc-scard__meta.is-online::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--scard-online);box-shadow:var(--scard-online-halo);vertical-align:1px}
.pc-scard__score{color:var(--scard-ink);font-weight:600;font-variant-numeric:tabular-nums}
.pc-scard__star{color:var(--pink)}
/* The like: glass over the photo (blur), the grey 50 % rim, cream heart; on = the pink heart. */
.pc-scard .pc-card__fav{position:absolute;top:10px;right:10px;z-index:6;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--scard-glass);color:var(--scard-ink);line-height:0;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transition:background-color var(--dur-fast),color var(--dur-fast),transform var(--dur-press)}
.pc-scard .pc-card__fav .pc-ico{display:block;width:18px;height:18px;margin:0;stroke-width:2.2}
.pc-scard .pc-card__fav::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.pc-scard .pc-card__fav:hover{background:var(--scard-glass-hover);border-color:var(--line)}
.pc-scard .pc-card__fav:active{transform:scale(.92)}
/* owner 12.10.: a blurred profile picture carries its reason, centred above the caption: the lock on the heart's glass, the label, one quiet line */
.pc-scard__private{position:absolute;left:50%;top:41%;z-index:6;display:grid;justify-items:center;gap:5px;width:max-content;max-width:calc(100% - 20px);transform:translate(-50%,-50%);color:var(--scard-ink);text-align:center;text-decoration:none;text-shadow:var(--scard-tshadow)}
.pc-scard__private::before{content:"";position:absolute;inset:-16px -22px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--scard-glass-hover),transparent)}   /* a soft dark halo: the cream type stays readable on a bright blurred photo */
.pc-scard__lock{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border:1px solid var(--line);border-radius:50%;background:var(--scard-glass);line-height:0;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);transition:background-color var(--dur-fast),transform var(--dur-press)}
.pc-scard__lock .pc-ico{display:block;width:20px;height:20px;margin:0;stroke-width:2.2}
.pc-scard__private > b{font:700 14px/1.15 var(--font-sans)}
.pc-scard__private > small{font:500 12px/1.2 var(--font-sans);color:var(--scard-ink-2)}
.pc-scard__private:hover .pc-scard__lock{background:var(--scard-glass-hover)}
.pc-scard__private:active .pc-scard__lock{transform:scale(.92)}
.pc-scard__private:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:12px}
@media (max-width:700px){.pc-scard__lock{width:38px;height:38px}.pc-scard__lock .pc-ico{width:18px;height:18px}.pc-scard__private > b{font-size:13px}.pc-scard__private > small{font-size:11px}}
@media (prefers-reduced-motion:reduce){.pc-scard__lock{transition:none}}
.pc-scard .pc-card__fav.is-on,.pc-scard .pc-card__fav[aria-pressed="true"]{background:var(--scard-glass);border-color:var(--line);color:var(--pink)}
.pc-scard .pc-card__fav.is-on .pc-ico,.pc-scard .pc-card__fav[aria-pressed="true"] .pc-ico{fill:currentColor}
.pc-scard .pc-card__fav:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pc-scard:focus-within:has(.pn-card-link:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.pc-scard .pn-card-link:focus-visible{outline:none}
@media (hover:hover){.pc-scard:hover .pc-scard__media > img,.pc-scard:hover .pc-scard__media > picture > img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pc-scard__media > img,.pc-scard__media > picture > img,.pc-scard .pc-card__fav{transition:none}}
/* The star disc on a video poster (video_item.php: .pc-scard__prem.pn-vitem__prem); the seller card itself shows Premium
   as the caption kicker since 02.10. */
.pc-scard__prem{position:absolute;top:14px;left:14px;z-index:4;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pink);color:var(--anthracite);box-shadow:0 0 0 2px var(--paper);line-height:0}
.pc-scard__prem .pc-ico{display:block;width:16px;height:16px;fill:currentColor}
@media (max-width:700px){
  .pc-sellers{gap:12px}.pc-sellers > .pc-scard{width:148px}
  .pc-scard .pc-card__fav{top:8px;right:8px;width:32px;height:32px}.pc-scard .pc-card__fav .pc-ico{width:17px;height:17px}
  .pc-scard .pc-card__fav::after{inset:-6px}
  .pc-scard__prem{top:12px;left:12px;width:26px;height:26px}.pc-scard__prem .pc-ico{width:14px;height:14px}
  .pc-scard__cap{padding:12px 12px 11px;gap:2px;min-height:74px}   /* visual audit VM-011: the name starts at the same height in every card of a row */
  .pc-scard__tier{font-size:11px;letter-spacing:.06em}
  .pc-scard__meta,.pc-scard__score{font-size:11.5px}
}

/* ==========================================================================
   Premium row (owner 30.09.): story-style round avatars, the pink ring = premium, "@name" under it, the online dot for
   members. One line that slides sideways (snap, edge fade inside the gutter); the padding keeps ring + focus unclipped.
   ========================================================================== */
.pc-stories{display:flex;gap:18px;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 8px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,black var(--gutter),black calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,black var(--gutter),black calc(100% - var(--gutter)),transparent)}
.pc-stories::-webkit-scrollbar{display:none}
.pc-story{flex:none;width:88px;scroll-snap-align:start}
.pc-story__link{display:grid;justify-items:center;gap:8px;color:var(--ink);text-decoration:none;border-radius:var(--r-label)}
.pc-story__av{position:relative;display:block;width:80px;height:80px;padding:3px;border-radius:50%;border:2px solid transparent;background:var(--sunken);box-sizing:border-box}
.pc-story__av > img,.pc-story__av > picture > img,.pc-story__av > span[aria-hidden]{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 25%;background:var(--ph-media);color:var(--ph-text);font:700 20px/1 var(--font-display);}
.pc-story__dot{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--online);box-shadow:0 0 0 2.5px var(--bg)}
.pc-story__name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12.5px/1.3 var(--font-sans)}
.pc-story__name::before{content:"@"}
.pc-story__link:focus-visible{outline:none}
.pc-story__link:focus-visible .pc-story__av{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (hover:hover){.pc-story__link:hover .pc-story__av{border-color:transparent}.pc-story__link:hover .pc-story__name{text-decoration:underline;text-underline-offset:2px}}
@media (max-width:700px){.pc-stories{gap:14px}.pc-story{width:74px}.pc-story__av{width:68px;height:68px}.pc-story__av > span[aria-hidden]{font-size:24px}}
/* Seller row on a paper list (tonal pass 05.10.: no line around the list, none between rows). */
.pc-list{background:var(--surface);border:1px solid transparent;border-radius:var(--r-box);padding:var(--space-2) var(--panel-pad)}
.pc-seller{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:10px 0}
.pc-seller__who{flex:1;min-width:0;display:grid;gap:2px}
.pc-seller__who b{display:flex;align-items:center;gap:6px;min-width:0;font:600 15px/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-seller__who span{font:400 12.5px/1.3 var(--font-sans);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================================
   Paper objects: care card (.care), big care label (.clabel-big), note (.note + .mt), boxes, receipt, price box,
   doors, dark tiles, FAQ, strip, calculator, prose / masthead / toc
   ========================================================================== */
/* .care: cream, radius 8 8 18 18, dashed seam 6 px in. .n = step label, h3 = card head, p = 14 muted. */
.pc-care{position:relative;background:var(--cream);color:var(--anthracite);border-radius:8px 8px 18px 18px;padding:22px 20px 20px;list-style:none}
.pc-care::before{content:"";position:absolute;inset:6px;border:1.5px dashed var(--dash);border-radius:5px 5px 14px 14px;pointer-events:none}
.pc-care__n{display:flex;align-items:baseline;gap:10px;font:600 11px/1 var(--font-label);letter-spacing:0;color:var(--muted-lt)}
.pc-care h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:10px 0 8px}
.pc-care p{margin:0;font-size:14px;color:var(--muted-lt)}
.pc-care .pc-obj{right:-14px;top:-58px;width:118px}
.pc-steps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pc-steps-grid--3{grid-template-columns:repeat(3,1fr)}
/* .clabel-big: the sewn-in label (logo, "Contents", a big word, three symbols, a line). -5deg. */
.pc-carelabel{position:relative;width:190px;background:var(--cream);color:var(--anthracite);border-radius:var(--r-label);padding:16px 16px 14px;transform:rotate(-5deg);box-shadow:var(--sh-label)}
.pc-carelabel::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--dash-2);border-radius:4px;pointer-events:none}
.pc-carelabel .pc-logo{font-size:18px}
.pc-carelabel p{margin:8px 0 0;font:600 12px/1.1 var(--font-label);letter-spacing:0}
.pc-carelabel__v{font:700 27px/var(--lh-head) var(--font-display);margin-top:2px}
.pc-carelabel small{font:600 12px/1.2 var(--font-sans)}
.pc-carelabel .pc-nophoto__syms{margin:10px 0 6px;gap:8px}
.pc-carelabel .pc-nophoto__syms i{width:18px;height:18px}
.pc-carelabel .pc-nophoto__syms i:nth-child(3){width:16px}
/* .note: paper, radius 4, taped (.mt), -1.2 / 0 / 1 deg in a row of three. */
.pc-notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc-note{position:relative;background:var(--paper);color:var(--anthracite);border-radius:var(--r-note);padding:26px 22px 20px;box-shadow:var(--sh-note)}
.pc-notes > .pc-note:nth-child(3n+1){transform:rotate(-1.2deg)}
.pc-notes > .pc-note:nth-child(3n){transform:rotate(1deg)}
.pc-mt{position:absolute;top:-12px;left:50%;width:86px;height:24px;margin-left:-43px;background:var(--mt-light);transform:rotate(-3deg)}
.pc-notes > .pc-note:nth-child(3n+2) .pc-mt{background:var(--mt-dark)}
.pc-care__num,.pc-note__n{font:700 33px/1 var(--font-display);letter-spacing:-.01em}
@media (max-width:700px){.pc-care__num,.pc-note__n{font-size:27px}}
.pc-note__n{display:block;color:var(--pink-press)}
.pc-note h3{font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);margin:4px 0 8px}
.pc-note p{margin:0;font-size:14px;color:var(--muted-lt)}
/* .box: radius 24, padding 26. Tonal (05.10.): no line; --dk anthracite (--dkbox, in dark the panel tone), --cr cream. */
.pc-box{position:relative;border-radius:var(--r-box);padding:var(--panel-pad);border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:0}
.pc-box h3,.pc-box__h{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:0 0 16px}
.pc-box--dk{background:var(--dkbox);color:var(--dk-ink)}
.pc-box--cr{background:var(--cream);color:var(--anthracite)}
.pc-box--cr p{color:var(--muted-lt)}
/* T14: zero specificity, so a page class inside a dark box (the calculator's pink result) keeps its own colour. */
:where(.pc-box--dk) p,:where(.pc-box--dk) small{color:var(--dk-ink-2)}
.pc-box .pc-hand{margin-top:14px}
.pc-priv{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px}
.pc-priv b{display:block;color:inherit}
.pc-priv small{color:var(--ink-2);font-size:12.5px}
.pc-box--dk .pc-priv b{color:var(--white)}
.pc-box--dk .pc-priv small{color:var(--dk-ink-2)}
/* Dark stat tile (.tile): card-dk, line, radius 22, 20/22. b = Archivo 900 54 wdth 75 pink. */
.pc-tiles{display:flex;gap:16px;flex-wrap:wrap}
.pc-tile{background:var(--dkbox-tile);color:var(--dk-ink);border:1px solid transparent;border-radius:var(--r-tile);padding:20px 22px;min-width:230px}
.pc-tile b{display:block;font:700 var(--fs-tile,39px)/1 var(--font-display);letter-spacing:-.01em;color:var(--pink)}
.pc-tile p{margin:6px 0 0;font-size:14px}
.pc-tile small{color:var(--dk-ink-2);font-size:12px}
/* mockup phone .tile: min-width 0, flex 1 1 140px, padding 16, number 40 */
@media (max-width:700px){.pc-tile{min-width:0;flex:1 1 140px;padding:16px}.pc-tile b{font-size:var(--fs-tile,40px)}}
/* Receipt (.receipt): paper, line, zigzag foot, 1.5deg. Monospace like a till roll. */
.pc-receipt{position:relative;background:var(--paper);color:var(--anthracite);border:0;padding:28px 28px 36px;font:500 14px/1.45 ui-monospace,Menlo,monospace;transform:rotate(1.5deg);box-shadow:var(--sh-receipt)}
.pc-receipt::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:var(--paper);-webkit-mask-image:conic-gradient(from -45deg at 50% 100%,black 90deg,transparent 0);mask-image:conic-gradient(from -45deg at 50% 100%,black 90deg,transparent 0);-webkit-mask-size:16px 100%;mask-size:16px 100%;-webkit-mask-position:50% 0;mask-position:50% 0}
/* polish v3: one mask for the torn edge (the two stacked gradient tiles left a hairline seam every 16px, dark ticks on dark). */
.pc-receipt__top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--line);padding-bottom:12px}
.pc-receipt .pc-logo{font-size:22px}
.pc-receipt__cnt{font:700 32px/1 var(--font-display);letter-spacing:var(--tr-num);margin:16px 0 4px}
.pc-receipt ul{list-style:none;margin:14px 0 0;padding:0}
.pc-receipt li{padding:10px 0;border-top:1px dashed var(--line)}
.pc-receipt li small{display:block;color:var(--muted-lt);font-size:11px;margin-top:4px}
.pc-receipt__foot{margin:14px 0 0;font-size:11px;color:var(--muted-lt)}
/* Price box (.pbox): paper, line, radius 22; rows dashed; the median row pink-press 40. */
.pc-pbox{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-tile);padding:30px 22px 22px}
.pc-pbox__t{font:600 12px/1.2 var(--font-label);letter-spacing:0}
.pc-pbox__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:0;padding:10px 0;margin:0;font-size:14px}
.pc-pbox__row b{font:700 22px/1 var(--font-display);letter-spacing:var(--tr-num)}
.pc-pbox__row.is-med b{color:var(--pink-glyph);font-size:29px}   /* night N8 #83: light 4.7:1 (pink-press was 2.3:1), dark unchanged */
.pc-pbox small{display:block;color:var(--ink-2);font-size:12px;margin-top:10px}
/* the price box foot (link tier 2, a content door): a caption and the full-width ink button, over a dashed rule */
.pc-pbox__foot{margin-top:18px;padding-top:16px;border-top:0}
.pc-pbox__more{margin:0 0 12px;font:500 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pc-pbox__foot .pc-btn{display:block;min-height:40px;padding-block:10px;white-space:normal;text-wrap:balance;text-align:center;line-height:1.15}   /* block: a wrapped label keeps the arrow on its last line, centred */
/* Doors (.door): radius 26, 28, line; buy = anthracite, sell = pink. */
.pc-doors{display:grid;grid-template-columns:1fr 1fr;gap:32px}   /* owner 05.10.: air between the two doors */
.pc-door{border-radius:var(--r-door);padding:28px;border:0;display:flex;flex-direction:column;gap:12px;text-align:left;background:var(--surface);color:var(--ink)}
.pc-door h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:0}
.pc-door p{margin:0;font-size:14px}
.pc-door--buy{background:var(--dk-bg);color:var(--dk-ink)}
.pc-door--buy p{color:var(--dk-ink-2)}
/* art director 27.10. (C-050, D-016): in dark the buy door was the page colour (1.0:1), an invisible card with padding */
[data-theme="dark"] .pc-door--buy{background:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pc-door--buy{background:var(--surface)}}
.pc-door--sell{background:var(--pink);color:var(--anthracite)}
.pc-door .pc-btn{align-self:flex-start;margin-top:6px}
/* FAQ (.faq details): line under each, summary = card head 26. */
.pc-faq details{margin:0 0 8px;padding:16px 18px;border-radius:var(--r-tile);background:var(--surface);max-width:860px}
.pc-faq summary{font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);cursor:pointer}
@media (max-width:700px){.pc-faq summary{font-size:var(--fs-sub-s,21px)}}
.pc-faq p{color:var(--ink-2);margin:10px 0 0}
/* Price strip (.strip): p25 / median / p75 tags on a bar. */
.pc-strip{position:relative;height:120px;margin:40px 0 20px;max-width:640px}
.pc-strip__bar{position:absolute;left:0;right:0;top:66px;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--chrome-2) 0 18%,var(--pink) 18% 78%,var(--chrome-2) 78%)}
.pc-strip__tg{position:absolute;top:0;transform:translateX(-50%);background:var(--cream);color:var(--anthracite);padding:8px 10px 7px 16px;border-radius:4px 10px 10px 4px;font:700 19px/1 var(--font-display);clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.pc-strip__tg small{display:block;font:700 9px/1 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;margin-top:3px;opacity:.7;color:inherit}   /* night QA D6: inside a dark box (guide price figure) :where(.pc-box--dk) small painted the tag label dk-ink-2 on cream / pink (1.1:1) */
.pc-strip__tg.is-med{background:var(--pink);top:-6px;font-size:20px}
/* Stepper (.calc__row): 44 round buttons with the line, Archivo output. */
.pc-stepper{display:flex;align-items:center;gap:12px;margin:10px 0}
.pc-stepper button{width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:var(--sunken);color:inherit;font:700 20px/1 var(--font-sans);cursor:pointer}
.pc-stepper output{font:700 29px/1 var(--font-display);letter-spacing:var(--tr-num);min-width:36px;text-align:center}
/* Editorial: masthead (.mast), toc, prose with the pink-press drop cap. */
.pc-mast{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;font:600 12px/1 var(--font-sans);color:var(--ink-2);letter-spacing:0}
/* TOC = link tier 4 (list link, §2.6): a numbered index, no underline at rest; the number (01…) in Archivo pink-press,
   dashed rows, the text gets the 2px pink underline on hover, the 3px focus ring. */
.pc-toc{padding:16px 18px;border-radius:var(--r-tile);background:var(--surface);margin-top:30px}
.pc-toc b{font:600 12px/1 var(--font-label);letter-spacing:0}
.pc-toc ol{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:0;counter-reset:pc-toc}
.pc-toc li{counter-increment:pc-toc;border-bottom:0}
.pc-toc li a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;min-height:40px;padding:10px 0;font:600 14px/1.35 var(--font-sans);color:var(--ink);text-decoration:none;box-sizing:border-box}
.pc-toc li a::before{content:counter(pc-toc,decimal-leading-zero);font:700 12px/1.35 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--pink-glyph)}
.pc-toc li a:hover > span,.pc-toc li a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
.pc-toc li a[aria-current]{color:var(--pink-press)}
.pc-toc li a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pc-prose{font-size:var(--fs-prose);line-height:1.65;max-width:var(--measure-prose)}
.pc-prose h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:30px 0 8px}

/* ==========================================================================
   Section head (mockup .sec-head): label or kicker, h-m, muted line; action right, bottom aligned.
   ========================================================================== */
.pc-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:var(--sec-head-gap);flex-wrap:wrap}
.pc-sechead > div{min-width:0}
.pc-sechead .pc-h-m,.pc-sechead h2{margin:12px 0 0}
.pc-sechead > div > :first-child:is(h2,h1){margin-top:0}
.pc-sechead p{margin:6px 0 0;color:var(--ink-2)}
.pc-sechead--sm{margin-bottom:18px}
.pc-sechead--sm .pc-h-card{margin:10px 0 0}
.pc-sechead--sm p{font:400 13px/1.45 var(--font-sans)}   /* the panel head's one muted line (the .pc-help size) */

/* ==========================================================================
   The app frame (mockup .app "Your corner"): page head, pill tabs, card grid, empty state cards, rules box
   ========================================================================== */

.pc-tabs-app{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pc-empties{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* Empty state (.empty): a paper card, radius 28, 56/32/44, centred. Object 150 (shadow-fig), Archivo head 40,
   one sentence, one Caveat note, one button. Objects only: envelope, tag on a peg (with "$ ?"), empty peg, basket. */
.pc-empty,.pn-empty{background:var(--surface);border:1px solid transparent;border-radius:var(--r-empty);padding:56px 32px 44px;text-align:center;display:flex;flex-direction:column;align-items:center;color:var(--ink)}
.pc-empty__ob{position:relative;width:150px;margin-bottom:18px;filter:var(--fig-shadow);container-type:inline-size}
.pc-empty__ob img{display:block;width:100%;height:auto}
.pc-empty__ob .pc-ptag{left:50%;top:65%;--r:-14deg;font-size:16cqw}
.pc-empty h1,.pc-empty h2,.pc-empty h3,.pn-empty h1,.pn-empty h2,.pn-empty h3{font:700 var(--fs-section)/var(--lh-head) var(--font-display);margin:0 0 10px;color:var(--ink);text-wrap:balance;overflow-wrap:break-word;hyphens:manual;max-width:100%}
.pc-empty p,.pn-empty p{margin:0;color:var(--ink-2);max-width:340px}
.pc-empty .pc-hand,.pn-empty .pc-hand{margin:14px 0 22px;transform:rotate(-3deg)}
.pc-empty > .pc-btn:last-child,.pn-empty > .pc-btn:last-child{margin-bottom:6px}
/* Brand objects in the empty state (legacy class names from pnew_object). */

/* mockup phone .empty: padding 40/22/32, head 32 */
@media (max-width:700px){.pc-empty,.pn-empty{padding:40px 22px 32px}:is(.pc-empty,.pn-empty) :is(h1,h2,h3){font-size:var(--fs-empty,32px)}}

/* ==========================================================================
   Chat (derived: bubbles are pill-cards; in = paper with the line, out = pink)
   ========================================================================== */

.pc-day{align-self:center;min-height:24px;padding:6px 10px;border-radius:var(--r-label);border:1px solid transparent;background:var(--bubble-in);font:600 10px/1 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pc-bubble{max-width:78%;padding:10px 14px;border-radius:var(--r-pcard);font:400 15px/1.4 var(--font-sans);overflow-wrap:anywhere}
.pc-bubble--in{align-self:flex-start;background:var(--bubble-in);color:var(--ink);border:1px solid transparent;border-bottom-left-radius:6px}
.pc-bubble--out{align-self:flex-end;background:var(--pink);color:var(--anthracite);border-bottom-right-radius:6px}
.pc-bubble__time{display:block;margin-top:3px;font:600 11px/1.2 var(--font-sans);opacity:.7;text-align:right}
.pc-overline{color:var(--ink-2)}
.pc-composer{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-3);background:var(--surface)}
.pc-composer .pc-input{min-height:44px}

/* ==========================================================================
   Header geometry (skin in chrome.css): mockup .hdr: chrome, line under it, 68 (phone 58), gap 32 (phone 12).
   ========================================================================== */
.pc-header{position:sticky;top:0;z-index:var(--z-header);display:flex;flex-wrap:nowrap;align-items:center;gap:32px;height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--col-pad) 0}
/* nav: Inter Tight 600 14, gap 26, on-dark at 85 %. */
.pc-nav{display:flex;align-items:center;gap:26px;font:600 14px/1 var(--font-sans)}
.pc-nav a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);text-decoration:none;white-space:nowrap}
.pc-search{flex:1;min-width:0;max-width:360px;display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;border-radius:var(--r-btn);font:600 13px/1 var(--font-sans)}
.pc-search .pc-ico{width:18px;height:18px}
.pc-search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-header__icons{display:flex;align-items:center;gap:10px}
.pn-header__avatar{width:40px;height:40px;font-size:15px;text-decoration:none}
@media (max-width:700px){.pc-nav,.pc-hide-sm,.pc-header .pc-hide-sm{display:none}.pc-header{gap:12px;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}}
@media (min-width:701px){.pc-show-sm{display:none !important}}
/* Burger (mockup .burger: 40, radius 12, line; the three bars drawn in CSS). A <details> menu on phones. */
.pc-burger{position:relative;flex:none}
.pc-burger > summary{list-style:none;position:relative;display:block;width:40px;height:40px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--r-icon);cursor:pointer}
.pc-burger > summary::-webkit-details-marker{display:none}
.pc-burger > summary::before,.pc-burger > summary::after{content:"";position:absolute;left:11px;right:11px;height:2px;background:var(--on-chrome);top:14px;box-shadow:0 5px 0 var(--on-chrome)}
.pc-burger > summary::after{top:24px;box-shadow:none}
.pc-burger[open] > summary::before{top:18px;box-shadow:none;transform:rotate(45deg)}
.pc-burger[open] > summary::after{top:18px;transform:rotate(-45deg)}
.pc-burger > summary:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pc-burger__menu{position:absolute;right:0;top:calc(100% + 10px);z-index:var(--z-nav);display:grid;min-width:220px;max-width:calc(100vw - 2 * var(--gutter));padding:8px;border-radius:var(--r-rules);background:var(--chrome);border:1px solid transparent;box-shadow:var(--sh-float)}
.pc-burger__menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-icon);color:var(--on-chrome);font:600 15px/1 var(--font-sans);text-decoration:none}
.pc-burger__menu a[aria-current]{color:var(--pink)}
/* audit 30.09.: a full-height sheet from the right over the scrim (the page under it takes no taps), the links as big
   rows with a chevron, the doors and the language pills at its foot */
.pc-burger[open]::before{content:"";position:fixed;inset:0;z-index:38;background:var(--scrim);cursor:default}
.pc-burger > summary{z-index:41}
.pc-burger[open] .pc-burger__menu{position:fixed;top:calc(var(--header-h) + env(safe-area-inset-top));right:0;bottom:0;z-index:var(--z-nav);display:flex;flex-direction:column;gap:2px;width:min(86vw,380px);min-width:0;max-width:none;padding:14px 14px calc(18px + env(safe-area-inset-bottom));border-radius:0;border-width:1px 0 0 1px;overflow-y:auto;overscroll-behavior:contain}
.pc-burger__menu > a{min-height:56px;padding:0 10px;border-radius:var(--r-icon);font:700 20px/1 var(--font-display);letter-spacing:-.01em}
.pc-burger__menu > a .pc-ico{width:16px;height:16px;opacity:.6}
.pc-burger__foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;padding-top:24px}
.pc-header .pc-burger__foot .pc-btn{min-height:44px;padding:0 16px;justify-content:center;border-radius:var(--r-btn);font:600 14px/1 var(--font-sans);letter-spacing:0}
.pc-header .pc-burger__foot .pc-btn--primary{color:var(--anthracite)}
.pc-header .pc-burger__foot .pc-btn--primary:hover{background:var(--pink-press)}
.pc-burger__lang{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0 0;padding:0}
.pc-burger__lang a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--radius-full);color:var(--on-chrome);font:600 13px/1 var(--font-sans);text-decoration:none}
.pc-burger__menu a:hover{background:var(--chrome-2)}
@media (min-width:701px){.pc-burger{display:none}}
/* Footer geometry (mockup .ftr, art-director round 30.09.: a designed sitemap). Brand column + up to three link columns
   (Browse / Guides / Help & legal), then the language pills over the grey 50 % line. 56 / 40 padding, 13 px base.
   Links = link tier 4 (list links): no underline at rest, a 2px pink underline on hover, the 3px focus ring. */
.pc-footer{padding:56px var(--col-pad) 40px;font:400 13px/1.4 var(--font-sans)}
.pc-footer .pc-logo{font-size:26px}
.pc-footer a{text-decoration:none}
.pn-gfooter__grid{display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.pn-gfooter__brand{min-width:0}
.pn-gfooter__about{margin:14px 0 0;max-width:280px;font:400 13px/1.55 var(--font-sans)}
.pn-gfooter__adult{display:inline-flex;align-items:center;margin-top:18px;padding:6px 10px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--radius-full);font:600 11px/1 var(--font-label);letter-spacing:0}
.pn-gfooter__col{min-width:0}
.pn-gfooter__h{margin:0 0 16px;font:600 12px/1.3 var(--font-label);letter-spacing:0}
.pn-gfooter__col ul,.pn-gfooter__bar ul{list-style:none;margin:0;padding:0}
.pn-gfooter__col ul{display:grid;gap:12px}
.pn-gfooter__col a{display:inline-block;font:400 14px/1.2 var(--font-sans);text-underline-offset:4px;text-decoration-thickness:2px}
.pn-gfooter__col a:hover{text-decoration:underline;text-decoration-color:var(--pink)}
.pn-gfooter__bar{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:32px}   /* audit 30.09.: 32 above and below; tonal pass 05.10.: no line, the air is the break */
.pn-gfooter__bar ul{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.pn-gfooter__bar a{display:inline-flex;align-items:center;min-height:32px;padding:8px 14px;border:1px solid transparent;background:var(--chrome-well);border-radius:var(--radius-full);font:600 13px/1 var(--font-sans)}
.pn-gfooter__globe{flex:none;width:16px;height:16px}
@media (min-width:701px) and (max-width:1100px){
  .pn-gfooter__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
  .pn-gfooter__brand{grid-column:1 / -1}
  .pn-gfooter__about{max-width:520px}
}
@media (max-width:700px){
  .pn-gfooter__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
  .pn-gfooter__brand,.pn-gfooter__col--site{grid-column:1 / -1}
  .pn-gfooter__about{margin-top:10px}
  .pn-gfooter__adult{margin-top:12px}
  .pn-gfooter__h{margin-bottom:12px}
  .pn-gfooter__col--site ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}   /* four short links in two columns: a compact phone footer */
  .pn-gfooter__bar{align-items:flex-start;margin-top:32px;padding-top:32px}
  .pn-gfooter__bar ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}   /* audit 30.09.: 3 + 2, never a lone pill */
  .pn-gfooter__bar a{justify-content:center;width:100%;padding-inline:8px}
  .pn-gfooter__globe{margin-top:8px}
}
/* T12 member footer: brand + Help & legal only (no guest browse / guide columns): two columns on desktop. */
/* UX 17.10. #80: on desktop the member footer is one column — the brand, then its links as one row under the logo (one
   link column in the middle of a wide footer left a lot of empty space). */
@media (min-width:701px){.pn-gfooter--member .pn-gfooter__grid{grid-template-columns:minmax(0,1fr);gap:28px}.pn-gfooter--member .pn-gfooter__brand{grid-column:auto}.pn-gfooter--member .pn-gfooter__about{max-width:520px}.pn-gfooter--member .pn-gfooter__col ul{display:flex;flex-wrap:wrap;gap:10px 28px}}

/* Tab bar geometry (phones, members): docked to the bottom, chrome with the line on top (derived from .ftr). */
.pc-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:center;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom)}
.pc-tabbar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:min-content;padding:0;font:600 11px/1.15 var(--font-sans);text-decoration:none;white-space:nowrap}
.pn-tab__pill{display:grid;place-items:center;width:52px;height:30px;border-radius:var(--radius-full);border:1px solid transparent;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.pn-tab__pill .pc-ico{width:22px;height:22px}
.pn-tab__label{max-width:100%}
/* inside tier 06.10.: six tabs on a 320 px phone — the labels step down so the last one (es Rincón, fr Mon espace, pt Cantinho) stays on the screen */
@media (max-width:359px){.pc-tabbar{padding-inline:2px}.pc-tabbar a{font-size:10px;letter-spacing:-.01em}.pn-tab__pill{width:44px}}
.pc-tabbar .pc-count,.pn-tab__badge{top:-4px;right:auto;left:calc(50% + 8px)}

/* ==========================================================================
   Sheets + dialogs: paper, the line, radius 28 (phone: bottom sheet with a grabber; desktop: centred dialog)
   ========================================================================== */
.pn-sheet{background:var(--surface);color:var(--ink)}
dialog.pn-sheet{border:0;padding:10px 22px calc(30px + env(safe-area-inset-bottom));max-width:none;max-height:92svh;overflow:auto}
.pn-sheet__grab{display:block;width:40px;height:5px;margin:0 auto 14px;border-radius:3px;background:var(--t-mute,var(--line))}
.pn-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.pn-sheet__title,.pn-sheet h2{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head);color:var(--ink)}
.pn-sheet__body{font:400 14px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-sheet__acts{display:grid;gap:14px;margin-top:var(--space-5)}
dialog.pn-sheet::backdrop{background:var(--scrim);animation:pn-fade .5s both}
.pn-sheet.is-docked{border-radius:var(--r-empty) var(--r-empty) 0 0;box-shadow:var(--sh-sheet)}
@keyframes pn-fade{from{opacity:0}}
@keyframes pn-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:700px){
  dialog.pn-sheet{position:fixed;inset:auto 0 0 0;width:100%;margin:0;border-radius:var(--r-empty) var(--r-empty) 0 0;box-shadow:var(--sh-sheet)}
  dialog.pn-sheet[open]{animation:pn-sheet-up .48s var(--ease-sheet) both}
}
@media (min-width:701px){
  dialog.pn-sheet{width:min(520px,calc(100% - 48px));padding:28px 30px 30px;border-radius:var(--r-empty);box-shadow:var(--sh-float)}
  dialog.pn-sheet .pn-sheet__grab{display:none}
}

/* Skeletons: the stripes of the missing photo, same geometry as the real card. */
.pn-skel{position:relative;overflow:hidden;background:var(--sunken);border-radius:var(--radius-full)}
.pn-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--surface-veil) 50%,transparent 80%);transform:translateX(-100%);animation:pn-shimmer 1.4s linear infinite}
@keyframes pn-shimmer{to{transform:translateX(100%)}}
.pn-skelcard{border:1px solid transparent;border-radius:var(--r-pcard);overflow:hidden;background:var(--surface)}
.pn-skelcard > .pn-skel--media{aspect-ratio:4/5;border-radius:0;background:var(--ph-media)}
.pn-skelcard > .pn-skel--line{height:14px;margin:12px 14px 0;width:70%}
.pn-skelcard > .pn-skel--line + .pn-skel--line{width:40%;margin-bottom:14px}
.pn-skelrow{display:flex;align-items:center;gap:var(--space-3);min-height:64px}
.pn-skelrow > .pn-skel--av{width:44px;height:44px;flex:none;border-radius:50%}

/* Facts (partials/facts.php): the price-box rows (label left muted, value right ink); tonal pass 05.10.: no dashed
   line between rows, the row rhythm (48 min, label / value on one baseline) carries the list. */
.pc-facts{--facts-x:var(--panel-pad);container-type:inline-size;margin:0 calc(-1 * var(--facts-x)) calc(-1 * var(--space-2))}
.pc-facts__list{margin:0;display:grid;grid-template-columns:minmax(0,1fr)}
.pc-fact{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);min-width:0;min-height:48px;padding:var(--space-3) var(--facts-x)}
.pc-fact dt{flex:none;max-width:55%;font:400 14px/20px var(--font-sans);color:var(--ink-2)}
.pc-fact dd{margin:0;min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;font:700 15px/20px var(--font-sans);color:var(--ink);text-align:right;overflow-wrap:anywhere}
.pc-fact .pn-flag{flex:none;width:18px;height:18px;margin:0 8px 0 0;border-radius:var(--radius-full);object-fit:cover}
@container (min-width:520px){
  .pc-facts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc-fact:nth-child(odd){padding-right:var(--space-5)}
  .pc-fact:nth-child(even){padding-left:var(--space-5)}
  .pc-fact.is-wide{grid-column:1 / -1;padding-right:var(--facts-x)}
}

/* ==========================================================================
   Legacy brand devices kept for page files, restyled to the mockup (docs/design-v3-system.md §2.9).
   ========================================================================== */
.pn-tub{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--mask-tub) center/contain no-repeat;mask:var(--mask-tub) center/contain no-repeat;vertical-align:-.12em}
/* Strike device (legacy markup): the struck word and the Caveat correction after it. */
@keyframes pn-slam{0%{transform:rotate(-24deg) scale(2.1);opacity:0}55%{opacity:1}100%{transform:rotate(-9deg) scale(1);opacity:1}}
@keyframes pn-slam-r{0%{transform:rotate(26deg) scale(2.1);opacity:0}55%{opacity:1}100%{transform:rotate(7deg) scale(1);opacity:1}}
@keyframes pn-sway{0%,100%{transform:rotate(var(--r,0deg))}50%{transform:rotate(calc(var(--r,0deg) * -1 + .6deg))}}
@keyframes pn-printout{from{clip-path:inset(0 0 100% 0);transform:rotate(1.5deg) translateY(-24px)}to{clip-path:inset(0 0 0 0);transform:rotate(1.5deg)}}
@keyframes pn-strike{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}
@keyframes pn-wink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .pc-logo__dot{animation:none}
  .pn-ticker__track{animation:none;transform:none}
  .pn-livedot{animation:none}
  .pn-skel::after{animation:none;display:none}
  .pc-btn:active,.pc-btn:hover{transform:none}
}

/* followup: mask (Anhang E §2): the buyer token a free seller sees instead of a face (pnew_mask_avatar(),
   also settings, nudge sheet, paysite): an avatar tone from the server with the ink lock label on it. */
.pc-avatar.pn-mask{background:var(--pn-mask-bg);color:var(--on-prem)}
.pn-mask--t0{--pn-mask-bg:var(--av-g0)}
.pn-mask--t1{--pn-mask-bg:var(--av-g1)}
.pn-mask--t2{--pn-mask-bg:var(--av-g2)}
.pn-mask--t3{--pn-mask-bg:var(--av-g3)}
.pn-mask--t4{--pn-mask-bg:var(--av-g5)}
.pn-mask--t5{--pn-mask-bg:var(--av-g7)}
.pc-avatar.pn-mask > .pn-mask__lock{display:grid;place-items:center;width:54%;height:auto;aspect-ratio:1;line-height:0;border-radius:50%;background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pn-mask__lock .pc-ico{width:56%;height:auto;aspect-ratio:1;stroke-width:2.4}
.pc-avatar--xs.pn-mask > .pn-mask__lock{width:74%}
.pn-masktag{display:inline-flex;align-items:center;gap:4px;min-width:0;font:600 12px/16px var(--font-sans);color:var(--ink-2)}
.pn-masktag .pc-ico{flex:none;width:14px;height:14px}
.pn-maskname{color:var(--ink)}

/* ==========================================================================
   Action menu + toast (chat_ui.js: chats, settings, the member page). Desktop = a floating paper menu
   (the line, radius 18, the float shadow); phones = the kit bottom sheet. Toast = the kit chrome pill.
   ========================================================================== */
.pn-menuwrap{position:fixed;inset:0;z-index:var(--z-menu);pointer-events:none}
.pn-menu{position:fixed;min-width:240px;max-width:min(320px,calc(100vw - 16px));padding:8px;border-radius:var(--r-rules);border:0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-float);pointer-events:auto;opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease}
.pn-menuwrap.is-on .pn-menu{opacity:1;transform:none}
.pn-menu__head{display:grid;gap:3px;padding:8px 12px 12px;margin-bottom:4px}
.pn-menu__head b{font:700 15px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-menu__head span{font:400 13px/1.4 var(--font-sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-menu__item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-icon);background:transparent;color:var(--ink);font:600 15px/20px var(--font-sans);text-align:left;cursor:pointer}
.pn-menu__item:hover,.pn-menu__item:focus-visible{background:var(--sunken);outline:0}
.pn-menu__item:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-ring)}
.pn-menu__item .pc-ico{flex:none;color:var(--ink)}
.pn-menu__item.is-danger,.pn-menu__item.is-danger .pc-ico{color:var(--danger)}
.pn-menuwrap.is-sheet .pn-menu__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:auto;transition:opacity .5s ease}
.pn-menuwrap.is-sheet.is-on .pn-menu__scrim{opacity:1}
.pn-menuwrap.is-sheet .pn-menu.pn-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;min-width:0;padding:10px 18px calc(24px + env(safe-area-inset-bottom));border-radius:var(--r-empty) var(--r-empty) 0 0;box-shadow:var(--sh-sheet);transform:translateY(100%);transition:transform .48s var(--ease-sheet)}
.pn-menuwrap.is-sheet.is-on .pn-menu{transform:none}
.pn-menuwrap.is-sheet .pn-menu__head{padding:0 4px 12px}
.pn-menuwrap.is-sheet .pn-menu__head b{font:700 var(--fs-section)/var(--lh-head) var(--font-display);text-wrap:balance}
.pn-menuwrap.is-sheet .pn-menu__item{min-height:54px;padding:0 8px;font-size:16px}
/* UX polish 23.10. UX-038: ONE toast definition (it was also in pages/account.css with z 60 and bottom = the dock, so the
   same toast sat differently per bundle). The pill look is spelled out here too, so a template toast without .pc-toast
   (settings, pay sheet, wizard) looks the same as the script ones; z 80 keeps it above sheets (70) and the drawer (75). */
.pn-toast{position:fixed;left:50%;bottom:max(var(--dock),calc(var(--toast-low) + env(safe-area-inset-bottom)));z-index:var(--z-toast);display:flex;align-items:center;max-width:calc(100vw - 32px);min-height:48px;padding:12px 20px;border-radius:var(--radius-full);border:1px solid transparent;background:var(--chrome);color:var(--on-chrome);box-shadow:var(--sh-float);font:600 14px/1.3 var(--font-sans);text-align:center;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.pn-toast:empty{display:none}
.pn-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@media (prefers-reduced-motion:reduce){.pn-toast{transition:none;transform:translate(-50%,0)}}
.pn-toast button{min-height:32px}
.pn-toast.is-bad{background:var(--danger);color:var(--on-danger);border-color:transparent}
.pn-toast.is-bad button{color:var(--on-danger);text-decoration:underline}

/* SH-15: iOS zooms into any field under 16px. On phones every text control is 16px, whatever a page sets. */
@media (max-width:700px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea,.pc-input{font-size:16px !important}
}
/* SH-18: touch feedback (hover never fires on touch; pressed is the only feedback there). */
.pc-root{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .pc-chip:active,.pc-seg > a:active,.pc-seg > button:active,.pn-seg > a:active,.pc-tab:active,.pc-iconbtn:active{border-color:var(--line-3)}
  .pn-prodcard:active .pc-media{opacity:.9}
  .pn-row:active,a.pn-tile:active{background:var(--sunken)}
  .pc-footer a:active,.pc-nav a:active{opacity:.7}
}

/* Line breaks: headings balance, running text is pretty; number + unit never split. */
.pc-root{hyphenate-limit-chars:8 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;-webkit-hyphenate-limit-lines:1}
:where(.pc-root){text-wrap-style:pretty}
:where(.pc-root) :where(h1,h2){text-wrap:balance}
:where(.pc-root) :where(h3,h4,p,li,dd,blockquote,figcaption){text-wrap:pretty}

/* ==========================================================================
   Tap floor on phones: small controls keep their look and get an invisible, centred 44×44 hit area.
   ========================================================================== */
@media (max-width:700px){
  .pc-header .pc-logo{min-height:var(--tap)}
  :where(.pc-btn--sm,.pc-chip,.pc-tab,.pc-seg > a,.pc-seg > button,.pc-seg > label,.pn-seg > a,.pn-seg > button,.pn-seg > label,.pn-backchip,.pn-seeall,.pc-more,.pc-footer a,.pn-gcrumbs .pn-crumbs a,button.pn-sheet__grab){position:relative}
  /* UX polish 23.10. UX-002 / UX-017: the 40 × 40 icon squares (header bell, burger, bag, search, "Options for …", follow, back,
     gallery arrows, share, filter) get the same invisible 44 hit area; UX-051: the sheet grab button (40 × 5) too. */
  :is(.pc-btn--sm,.pc-chip,.pc-tab,.pc-seg > a,.pc-seg > button,.pc-seg > label,.pn-seg > a,.pn-seg > button,.pn-seg > label,.pn-backchip,.pn-seeall,.pc-more,.pc-footer a,.pn-gcrumbs .pn-crumbs a,.pc-iconbtn,button.pn-sheet__grab)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));transform:translate(-50%,-50%)}
  /* UX-051: checkboxes and radios (22 × 22) reach 44 through ::before (their ::after is the tick / dot); the 52 × 30 switch
     grows to 60 × 44 the way button.pc-switch already does in account.css. */
  :where(.pc-check,.pc-radio){position:relative}
  :is(.pc-check,.pc-radio)::before{content:"";position:absolute;left:50%;top:50%;width:var(--tap);height:var(--tap);transform:translate(-50%,-50%)}
  .pc-switch::before{content:"";position:absolute;inset:-7px -4px}
  /* UX 17.10. #34: footer links and breadcrumbs are 40 px rows themselves (they stood 16-17 px tall, the hit areas overlapped) */
  .pn-gfooter__col ul{gap:0}
  .pn-gfooter__col a{display:flex;align-items:center;min-height:40px}
  .pn-gcrumbs .pn-crumbs a{display:inline-flex;align-items:center;min-height:40px}
  /* A scrolling chip row clips on both axes: 5px of block padding (given back by the margin) lets the hit areas reach 44. */
  .pc-chips--scroll{padding-block:5px;margin-block:-5px}
  /* Keyboard open: the tabbar and landing sticky step aside, so they never float over the field. Owner 05.10.: a focused
     field alone (e.g. /ads/?focus=q) no longer hides the tabbar; body.pn-kbd comes from the visual viewport shrinking (icons.js). */
  body.pn-kbd :is(.pc-tabbar,.pn-lbsticky){visibility:hidden;opacity:0}
}
/* Empty state without a Caveat note: the button keeps the note's rhythm. */
.pc-empty > p + .pc-btn,.pn-empty > p + .pc-btn{margin-top:22px}

/* ==========================================================================
   BRAND PREVIEW 05.10. (docs/brand-review-05-10.md 2, 14) + owner on the live cards: "die Cards dürfen nicht rumspringen"
   — no box under the photo. The caption sits ON the photo over the bottom shade (adcard2 03.10.), the title is ONE line
   with an ellipsis (the title attribute keeps the full text), the card is a fixed 3:4 so every card in a row has the
   same height whatever the copy. The price is a kraft tag (cream paper, the punched hole, -2°). Premium = a blush tint
   on the caption shade, no word, nothing below the photo. Seller portrait: @name bold on the photo, the rating as the
   glass chip bottom left, the listing count a tiny chip beside it; the same blush for Premium.
   ========================================================================== */
.pn-prodcard .pc-media{aspect-ratio:3/4}
/* UX 17.10. #36: two title lines in every grid, like the home page (one line cut "Soft white cotton pa…"); the card keeps its fixed 3:4, the caption grows upwards */
.pn-prodcard .pc-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;text-wrap:wrap}
.pc-card.is-premium .pc-card__cap::before{background:var(--pcard-cap-blush)}
.pc-card__ticket{top:12px;left:12px;min-height:30px;padding:5px 10px 5px 9px;border-radius:3px 6px 6px 3px;background:var(--cream);color:var(--anthracite);box-shadow:0 0 0 1px var(--line),var(--sh-label);transform:rotate(-2deg);transform-origin:0 50%}
.pc-card__ticket::before{width:7px;height:7px;box-shadow:inset 0 0 0 1.5px var(--anthracite),0 0 0 1px var(--cream)}
.pc-card__fx{font:600 11px/1 var(--font-sans);opacity:.7;white-space:nowrap}   /* UX 17.10. #26: "≈ $58" after a price in another currency, quieter than the price */
.pc-card__ticket .pc-price,.pc-card__ticket .pn-askprice{color:var(--anthracite)}
.pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-blush)}
.pc-scard__foot > .pc-scard__n{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--scard-glass);font:600 11.5px/1 var(--font-sans);color:var(--scard-ink-2);white-space:nowrap}

/* ---------- cart (owner 11.10., lib/cart.php): the bag on a listing card, the header bag with its count, the drawer ---------- */
.pn-cartbtn{position:relative}
.pn-cartbtn[hidden]{display:none}   /* a buyer has no cart (owner 13.10.): the icon button's own display would show it */
.pn-cartbtn__n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pink);color:var(--anthracite);font:700 11px/18px var(--font-sans);text-align:center}
.pn-cartbtn.is-bump{animation:pn-cart-bump .42s}
.pn-cartadd.is-on{background:var(--pink);color:var(--anthracite)}
@keyframes pn-cart-bump{40%{transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.pn-cartbtn.is-bump{animation:none}}
dialog.pn-cart{margin:0 0 0 auto;width:min(420px,100vw);height:100dvh;max-height:none;padding:16px 18px calc(18px + env(safe-area-inset-bottom));border-radius:0}
.pn-cart__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pn-cart__list{list-style:none;margin:0;padding:0}
.pn-cart__row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.pn-cart__item{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:center;flex:1;min-width:0;color:inherit;text-decoration:none}
.pn-cart__item img{grid-row:1 / span 2;width:56px;height:70px;object-fit:cover;border-radius:8px;background:var(--sunken)}
.pn-cart__t{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-cart__m{color:var(--ink-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-cart__foot{position:sticky;bottom:0;padding-top:14px;background:var(--surface)}
.pn-cart__note,.pn-cart__empty{margin:0 0 12px;color:var(--ink-2);font-size:14px;line-height:1.45}
.pn-cart__foot [hidden]{display:none}

/* UX-040 (23.10., package F): the global reduce block above shortens every animation to .001 ms. The join toast's
   still variant (pages/join.css pn-jointoast-still: fade only, no movement) ends hidden, so with "reduce motion" it
   was gone after .2 s and nobody could read it. It keeps its own 4.6 s; nothing in it moves. */
@media (prefers-reduced-motion:reduce){
  .pn-jointoast{animation-duration:4.6s !important}
}

/* ==========================================================================
   Art director pass 27.10. (outside, kit level). Each line names its finding (docs/visual-audit/ad-outside-27-10.md).
   ========================================================================== */
.pc-strip__tg small{font:600 11px/1 var(--font-sans);letter-spacing:0;text-transform:none;opacity:.8}   /* B-035: 9 px caps, the smallest type of the site */
.pc-care{min-width:0;overflow-wrap:anywhere}   /* B-053: es step cards ran 20 px out of their grid */
.pc-receipt{transform:none}   /* C-039: every line of the receipt sat slanted */
.pc-more{padding-block:6px}   /* C-033 (VG-028): a 17 px tall link; the hit area reaches 29 px, the line stays */
.pc-verified{color:var(--pink-glyph)}   /* D-051: the verified mark was 1.5:1 in light */
.pn-vbadge .pc-ico{color:var(--pink-glyph)}
.pn-gfooter__h{line-height:1.3}
@media (min-width:701px){.pn-gfooter__col--site ul{columns:2;column-gap:24px}.pn-gfooter__col--site li{break-inside:avoid}}   /* C-057: ten links in one column left 210 px under the others */
@media (max-width:700px){.pc-footer .pn-lang ul,.pn-gfooter .pn-lang ul{display:flex;flex-wrap:wrap;gap:8px;padding:0}}   /* C-059 */

/* ---------- Premium editorial pass (owner 27.10.: "sophisticated, atmospheric, premium editorial", same colours, same
   content). Outside only (.pc-guest): the member area keeps its tonal surfaces. Tokens in tokens.css (--sh-card*,
   --card-overlay, --btn-pink-grad, --chrome-grad, --lp-real-bg-l). ---------- */
/* photo cards: 16 px, no edge (a 4.5 % rim in dark only), a soft diffuse shadow, 3 px lift on hover, one overlay */
:where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard){border:0;border-radius:var(--r-card-x);box-shadow:var(--sh-card);transition:transform var(--dur-card) ease,box-shadow var(--dur-card) ease}
:where(.pc-guest) .pc-scard::after{box-shadow:var(--card-rim)}
:where(.pc-guest) .pc-card.pn-prodcard::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:var(--card-rim);pointer-events:none}
@media (hover:hover){
  :where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard):hover{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
  :where(.pc-guest) .pc-scard:hover :is(.pc-scard__media > img,.pc-scard__media > picture > img),:where(.pc-guest) .pn-prodcard:hover :is(.pc-media > img,.pc-media > picture > img){transform:scale(1.02)}
}
:where(.pc-guest) .pc-scard > .pn-card-link::after,:where(.pc-guest) .pn-prodcard .pc-media::after{content:"";position:absolute;inset:0;z-index:3;background:var(--card-overlay);pointer-events:none}
:where(.pc-guest) .pc-scard:not(.is-premium) .pc-scard__cap::before,:where(.pc-guest) .pn-prodcard:not(.is-premium) .pc-card__cap::before{background:var(--card-cap-scrim)}   /* a light photo under the caption: the words keep their contrast */
:where(.pc-guest) .pc-scard.is-premium .pc-scard__cap::before{background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 34%, transparent) 100%)}
:where(.pc-guest) .pn-prodcard.is-premium .pc-card__cap::before{background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pink) 30%, transparent) 100%)}
/* the metadata: small translucent chips without an edge; the heart one glass circle, no ring */
:where(.pc-guest) .pc-scard__foot > .pc-scard__n{border-color:transparent;background:var(--chip-glass)}
:where(.pc-guest) :is(.pc-scard,.pc-card) .pc-card__fav,:where(.pc-guest) :is(.pc-scard,.pc-card) .pc-card__fav:hover{border-color:transparent;transition:background var(--dur-card) ease,transform var(--dur-card) ease}
/* the home rail scrolls on phones: room for the shadow and the lift, so neither is cut */
:where(.pc-guest) .pn-lp-sellrail{padding-block:8px 30px;margin-block:-8px -30px}
@media (prefers-reduced-motion:reduce){
  :where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard){transition:none}
  :where(.pc-guest) :is(.pc-scard,.pc-card.pn-prodcard):hover{transform:none}
  :where(.pc-guest) .pc-scard:hover :is(.pc-scard__media > img,.pc-scard__media > picture > img),:where(.pc-guest) .pn-prodcard:hover :is(.pc-media > img,.pc-media > picture > img){transform:none}
}
/* buttons: the pink key on a restrained pink gradient + soft shadow; the secondary key a lifted dark surface, no edge */
:where(.pc-guest) :is(.pc-btn--primary,.pc-btn--pink):not(.pc-btn--on-accent){background:var(--btn-pink-grad);box-shadow:var(--sh-pink);transition:filter var(--dur-card) ease,box-shadow var(--dur-card) ease,transform var(--dur-card) ease}
:where(.pc-guest) :is(.pc-btn--primary,.pc-btn--pink):not(.pc-btn--on-accent):hover{background:var(--btn-pink-grad);filter:brightness(1.05);box-shadow:var(--sh-pink-hover)}
:where([data-theme="dark"] .pc-guest) .pc-btn--line,:where([data-theme="dark"]) .pc-guest .pc-header .pc-btn--ghost{border-color:transparent;background:var(--btn-dk-grad),var(--sunken)}
:where([data-theme="dark"] .pc-guest) .pc-btn--line:hover,:where([data-theme="dark"]) .pc-guest .pc-header .pc-btn--ghost:hover{background:var(--btn-dk-grad-hover),var(--sunken)}
@media (prefers-color-scheme:dark){
  :where(:root:not([data-theme="light"]) .pc-guest) .pc-btn--line,:where(:root:not([data-theme="light"])) .pc-guest .pc-header .pc-btn--ghost{border-color:transparent;background:var(--btn-dk-grad),var(--sunken)}
  :where(:root:not([data-theme="light"]) .pc-guest) .pc-btn--line:hover,:where(:root:not([data-theme="light"])) .pc-guest .pc-header .pc-btn--ghost:hover{background:var(--btn-dk-grad-hover),var(--sunken)}
}
/* the eyebrow: one system — small, the brand pink, the tub; a head's only accent is the site's name (.pc-brandword) */
:where(.pc-guest) .pc-sechead .pc-kicker{color:var(--pink-glyph);margin-bottom:10px}
.pc-brandword{color:var(--pink-glyph)}
/* pnew page layout. Components come from components.css (pc-*); this file only arranges them (pn-*).
   One column (mockup .wrap): content is min(100% - 2 x --gutter, --main-max = 1168), flush with the header and footer.
   The page frame is the mockup's app frame (.app): duck egg, 48 on top, 88 below (phone 28 / 60). */
html{-webkit-text-size-adjust:100%;background:var(--canvas)}
body.pc-root{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);overflow-x:clip}
img{max-width:100%}
/* UX 17.10. #2: no browser blue. Every link takes its text's colour; a text link (an anchor without a class in the page,
   or .pc-link) is ink with the pink underline. Zero-specificity :where() so every component's own link rule wins. */
a{color:inherit}
.pc-link,:where(.pn-main) a:where(:not([class])){color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-main{flex:1;width:100%;max-width:calc(var(--main-max) + 2 * var(--gutter));margin:0 auto;padding:48px max(var(--gutter),env(safe-area-inset-right)) 88px max(var(--gutter),env(safe-area-inset-left));box-sizing:border-box}
.pn-header__end{margin-left:auto;display:flex;align-items:center;gap:12px}
/* Card grids: the mockup .pairs grid (5 x 18 gap on the 1168 column; phone 2 x 12). */
.pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
@media (min-width:1101px){.pn-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

.pn-section{margin-top:var(--sec-gap)}
:where(.pn-section) h2{margin:0 0 var(--sec-head-gap);font:700 var(--fs-m)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h);color:var(--ink);hyphens:manual;overflow-wrap:break-word}
.pn-more{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:var(--space-8)}
.pn-main > .pn-empty{margin-top:var(--section-gap)}
.pc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-card-link{color:inherit;text-decoration:none}
a.pn-card-link:not(.pc-seller){display:block}
.pc-card>a.pn-card-link:not(.pc-seller){display:flex;flex-direction:column}
.pc-seller__who b{overflow-wrap:anywhere}
.pn-card-link:focus-visible,.pc-footer a:focus-visible,.pc-nav a:focus-visible,.pc-logo:focus-visible,.pn-search:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pn-lang{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.pn-about{margin:0;white-space:pre-line;max-width:62ch}
@media (max-width:700px){
  .pn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* Members: the tab bar is docked; the page leaves --dock free under the last content. */
  /* polish v3: the footer already clears the tab bar (chrome.css .pc-footer padding-bottom: --dock + 28px), so a page
     with a footer ends 48px above it; only footer-less member pages keep the dock clearance. */
  .pn-main{padding-top:28px;padding-bottom:48px}
  /* owner 03.10.: logged in on a phone there is no footer (the tab bar is the nav), so every member page keeps the dock
     clearance itself. */
  body:not(:has(.pc-footer)) .pn-main,body:not(.pc-guest) .pn-main{padding-bottom:calc(var(--dock) + 60px)}
  /* Guests have no tab bar (the burger menu is their phone nav). */
  body.pc-guest{--dock:calc(16px + env(safe-area-inset-bottom))}
  body.pc-guest .pn-main{padding-bottom:60px}
}
a.pn-search{text-decoration:none;color:var(--ink-2);min-width:0;flex:1;max-width:360px}
.pn-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  .pn-search{display:none}
}
a.pc-chip{text-decoration:none}
a.pc-tab{text-decoration:none}

.pn-apphead p{max-width:60ch}

/* ---------- The member column + wide grid pages (.pn-wide on the page root: market, discover, videos, Your corner) ----------
   Owner 30.09.: "eher fullwidth … nicht so viel freie Flächen". Desktop: header, main and footer of every member page
   share the wide column (--wide-max 1680, --wide-gutter 32). On .pn-wide pages the card grids fill it: 3 (701) / 4 (1024)
   / 5 (1280) / 6 (1440) / 7 (1800) columns, one even --wide-grid-gap, equal heights. Phones keep the 16 gutter and
   2 columns (above). Guest + landing: never (they keep the 1168 column). */
@media (min-width:701px){
  /* Inner grounding 01.10. (docs/inner-grounding-01-10.md): every member page is on the wide column, not only the grid
     pages, so the logo, the h1, the panels and the footer share one left and one right edge on every page. */
  body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody),body.pc-root:has(.pn-main > .pn-wide),body.pc-guest{--gutter:var(--wide-gutter);--col-pad:max(var(--gutter),calc((100% - var(--main-max)) / 2))}   /* owner 05.10.: no full-width pages — every page keeps the landing column (--main-max); only the gutter changes */
  .pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wide-grid-gap);align-items:stretch}
}
@media (min-width:1024px){.pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(5,minmax(0,1fr))}}
/* owner 18.10.: on desktop the listing grids stay at 5 a row, the seller / profile grids at 6 (they used to grow to 6 and 7);
   the video lists keep growing as before */
@media (min-width:1280px){.pn-main > .pn-wide .pn-grid.pn-sellergrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1440px){.pn-main > .pn-wide .pn-vlist{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1800px){.pn-main > .pn-wide .pn-vlist{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* ==========================================================================
   MEMBER SHELL (inner grounding 01.10., docs/inner-grounding-01-10.md). Members only (body:not(.pc-guest)).
   0 chrome  header / tab bar / footer on the one wide column (above)
   1 band    the page head is a .pc-band (app.css): a full-bleed surface under the chrome, the grey 50 % line under it
   2 ground  --app-ground (light = duck egg; dark = one step under the chrome)
   3 paper   panels / cards, one gap (--app-gap) between them, page sections --app-sec-gap apart
   ========================================================================== */
body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody){--bg:var(--app-ground);--row-inset:calc(var(--panel-pad) - var(--list-pad));background:var(--bg)}   /* --row-inset is recomputed here, after the phone --panel-pad below */
/* Guest grounding 02.10. (docs/guest-grounding-02-10.md): a guest page whose root is .pn-gapp (hub, /ads/, sellers, ad,
   members-only, 404) runs on this shell too: the wide column (above), the ground, the band geometry. The editorial frame
   (landing, money pages, report, guides, imprint) keeps its own 1168 bands. --main-pb = the main's foot (a .pc-band--end
   or --fill paints down to the footer through it). */
body.pc-guest:has(.pn-main > .pn-gapp){--bg:var(--app-ground);--main-pb:88px;background:var(--bg)}
body.pc-guest:has(.pn-main > .pn-gapp) .pn-main{isolation:isolate;padding-top:var(--app-top);padding-bottom:var(--main-pb)}
@media (max-width:700px){body.pc-guest:has(.pn-main > .pn-gapp){--main-pb:60px}}
@media (max-width:700px){body.pc-root:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody){--panel-pad:20px}}   /* members' phone cards: 20 in (guest pages keep the mockup 26) */
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main{isolation:isolate;padding-top:var(--app-top)}   /* isolation: the band's surface (z-index -1) paints over the page ground */
/* Page sections under the band (Sellers: Premium row, New today, favourites; ad: similar listings): one gap, one head.
   The h1 in the band is the only h-m on a member page; section heads on the page are the label + card head (30 / 26). */
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pn-premrow,body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pn-favs{margin:0 0 var(--app-sec-gap)}
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pc-sechead:not(.pc-sechead--sm){margin-bottom:18px}
body:not(.pc-guest):not(.pn-joinbody):not(.pn-wizbody) .pn-main .pc-sechead:not(.pc-sechead--sm) .pc-h-m{font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
/* ==========================================================================
   THE APP FRAME v3 (mockup .app "Your corner", docs/design-v3-system.md §4). The one rule every member page follows.
   --------------------------------------------------------------------------
   0  Chrome   header, footer, phone tab bar, dark boxes (--chrome / --dk-bg). Lines on chrome = --chrome-line.
   1  Page     duck egg (--bg). Page head (h-m + .sub), pill tabs, section heads and card grids sit directly on it.
   2  Card     paper (--surface), 1 px --line, NO shadow. Radius by role: listing card 20, tile/price box 22,
               panel/box 24, empty state 28. Padding 26 (phone 22).
   3  In card  only flat things: rows with a line between them, dashed fact rows, sunken tiles (--sunken, radius 18,
               no border). A card never holds another bordered card (the in-card block below flattens them).
   Page head: .pn-apphead (h1 = .h-m 44/32 + actions) with .pc-sub under it. Section head in a panel: ui_sechead size sm
   (card head 30/26). Section head on the page: .pn-sectionhead / .pc-sechead (h-m).
   ========================================================================== */

.pn-badgewrap{position:relative}
.pn-badgewrap .pc-count{position:absolute;top:-4px;right:-4px}
/* Avatars with a presence dot keep the circle but let the dot sit on the rim. */
.pc-avatar:has(.pc-avatar__dot){overflow:visible}
.pc-avatar:has(.pc-avatar__dot) img{border-radius:50%}
.pc-avatar__dot{box-shadow:0 0 0 2px var(--dot-ring,var(--surface))}

/* App column + page head (mockup .app .h-m + .sub + .tabs-app). */
.pn-app{width:100%;max-width:var(--wrap-max);margin:0 auto;display:grid;gap:var(--app-gap);align-content:start}   /* owner 05.10.: the member area is as wide as the landing page's .wrap (1280), never full-bleed */
.pn-app > *{min-width:0}
/* Layout primitives (inner grounding 01.10.): a member page body is composed of these, never of a page-own grid.
   .pn-stack   blocks one under the other, --app-gap apart
   .pn-split   the main column + the side card column (--split-side, 360) from 1000; one column when there is no side.
               .pn-split__side sticks under the header where the screen is tall enough to show all of it
   .pn-pair    two balanced columns from 1000 (each a .pn-stack); the last panel of each grows, so both end on one
               line; .pn-pair__wide spans both */
.pn-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-content:start;min-width:0}
.pn-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-items:start;min-width:0}
.pn-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-items:stretch;min-width:0}
.pn-pair > .pn-stack{display:flex;flex-direction:column}
.pn-pair > .pn-stack > :last-child{flex:1 0 auto}
@media (min-width:1000px){
  .pn-split{grid-template-columns:minmax(0,1fr) var(--split-side,360px)}
  .pn-split:not(:has(> .pn-split__side)){grid-template-columns:minmax(0,1fr)}
  .pn-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-pair__wide{grid-column:1 / -1}
}
@media (min-width:1000px) and (min-height:1000px){.pn-split__side{position:sticky;top:var(--sticky-top)}}
/* .pn-split with a head row (guest grounding 02.10., docs/guest-grounding-02-10.md): .pn-split__head = the page-head
   band (.pc-band) over the main column; .pn-split__lead = the page's one fact card, standing IN the band over the side
   column (from 1000: its top on the head's first line, its right edge the side column's); .pn-split__side starts on
   the main column's first line. Every other child is the main column. Below 1000: head, main, lead, side (the lead
   never pushes the main column down on phones). The band's line closes the row; --app-gap to the main column. */
.pn-split:has(> .pn-split__head){grid-template-areas:"head" "main" "lead" "side"}
.pn-split:has(> .pn-split__head) > *{grid-area:main}
.pn-split > .pn-split__head{grid-area:head;align-self:stretch}
.pn-split > .pn-split__lead{grid-area:lead}
.pn-split:has(> .pn-split__head) > .pn-split__side{grid-area:side}
@media (min-width:1000px){
  .pn-split:has(> .pn-split__head){grid-template-columns:minmax(0,1fr) var(--split-side,360px);grid-template-areas:"head lead" "main side"}
  .pn-split:has(> .pn-split__head):not(:has(> .pn-split__side, > .pn-split__lead)){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main"}
  .pn-split > .pn-split__lead{align-self:start;margin-bottom:var(--app-head-pb)}
}
.pn-apphead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) 20px;min-height:44px}
.pn-apphead h1{margin:0;font:700 var(--fs-h1)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h);color:var(--ink);text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
.pn-apphead > p{margin:0;color:var(--ink-2);font:400 15px/1.5 var(--font-sans)}
.pn-apphead--stack{display:grid;justify-content:stretch;gap:6px}
/* The back pill reads as navigation above the title (inner grounding 01.10.: 12 + the 6 row gap). */
.pn-apphead--stack > .pn-backchip{margin-bottom:12px}
.pn-apphead__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) 20px}
/* Back link: a small line pill (the .chip family) with an arrow. */
.pn-backchip{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:7px 12px 7px 9px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--sunken);font:700 12px/1 var(--font-sans);color:var(--ink);text-decoration:none;transition:background-color var(--dur-fast)}
.pn-backchip:hover{background:var(--surface-2)}
.pn-backchip .pc-ico{width:16px;height:16px}

/* Panel = the paper card that holds a section (layer 2): .pcard / .pbox skin, radius 24, 26 padding, no shadow.
   Tonal pass 05.10.: the panel is a lighter (dark) / paper (light) surface on the ground, no line (the border stays
   declared, transparent, so state rules that colour it keep working). */
.pn-panel,.pn-proftabs,.pn-chatpage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);box-shadow:none}
.pn-panel{padding:var(--panel-pad);min-width:0}
.pn-panel--flush{padding:var(--list-pad)}
/* Panel head = the kit section head at card size (ui_sechead([... 'size' => 'sm']), the landing's .sec-head): one
   component for page sections and panels (inner grounding 01.10. retired the hand-written .pn-panelhead). */
.pc-sechead :is(h2,h3):has(> .pn-count){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pn-panel--flush > .pc-sechead{padding:var(--row-inset) var(--row-inset) 0;margin-bottom:var(--space-2)}
.pn-panel--flush .pn-row{padding-inline:var(--row-inset)}
/* Count = the small label (.real geometry on duck). Hot = pink. */
.pn-count{flex:none;align-self:center;display:inline-flex;align-items:center;min-height:23px;padding:6px 9px;border-radius:var(--r-label);background:var(--sunken);color:var(--ink);font:700 11px/1 var(--font-display);letter-spacing:0;font-variant-numeric:tabular-nums}
.pn-count--hot{background:var(--accent);color:var(--on-accent)}
/* See all = the .pbox link: Inter Tight 700 14, ink, with the arrow. */
.pn-seeall{flex:none;align-self:flex-end;display:inline-flex;align-items:center;gap:4px;min-height:32px;font:700 14px/1 var(--font-sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px}
.pn-seeall:hover{text-decoration-color:var(--ink)}
.pn-seeall:focus-visible,.pn-backchip:focus-visible,.pn-row:focus-visible,.pn-slotbtn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* An empty state is its own paper card (mockup .empty): a panel that wraps one loses its skin, the empty keeps its own. */
.pn-panel:has(> .pn-empty:only-child){padding:0;background:transparent;border:0}
.pn-panel.pn-empty{padding:56px 32px 44px}
.pn-panel.pn-empty p + p{margin-top:var(--space-3)}

/* Rows: min 64, NO line between them (tonal pass 05.10.: 2 px air, the hover / current tone and the icon wells set the
   rows apart), icon wells = the 44 round control as a sunken disc. */
.pn-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.pn-row{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:64px;margin:0;padding:10px var(--space-3);border-radius:var(--r-rules);color:inherit;text-decoration:none;transition:background-color var(--dur-fast)}
.pn-row + .pn-row::before{content:none}
a.pn-row:hover{background:var(--sunken)}
a.pn-row:hover .pn-rowicon{background:var(--surface-2)}
.pn-row__main{flex:1;min-width:0;display:grid;gap:2px;color:inherit;text-decoration:none}
.pn-row__main > b{font:600 15px/1.3 var(--font-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-row__main > span{font:400 12.5px/1.35 var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-chev{color:var(--ink-3);flex:none}
.pn-rowicon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:var(--sunken);color:var(--ink);transition:background-color var(--dur-fast)}
/* UX 17.10. #75: one circle for every kind (the tonal well, the ink icon); the kind shows in the icon's colour only:
   like (filled) and order / offer / review in pink, chat and the rest in ink. Was white, ink-filled and pink circles. */
.pn-rowicon--like,.pn-rowicon--order{color:var(--pink-text)}
.pn-rowicon--like .pc-ico{fill:currentColor}
.pn-rowicon--chat,.pn-rowicon--sys{color:var(--ink)}
/* the same circle for the hidden senders of "Here's what you're missing" (were six mask tones, light and dark, in one list) */
.pn-missrows .pc-avatar.pn-mask{--pn-mask-bg:var(--sunken);color:var(--ink)}
.pn-missrows .pc-avatar.pn-mask > .pn-mask__lock{width:80%;background:transparent;color:var(--ink);box-shadow:none}
.pn-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.pn-row.is-unread .pn-row__main > b{font-weight:800}
.pn-row.is-unread .pn-row__main > span{color:var(--ink)}
/* Group labels (day buckets, settings groups): the kicker label. */
.pn-grouplabel{margin:var(--space-5) 0 var(--space-2);font:600 12px/1 var(--font-label);letter-spacing:0;color:var(--ink-2)}

/* ---------- Forms: fields stacked with gap 20, two short columns on desktop ---------- */
.pn-form{display:grid;gap:var(--space-5);max-width:none}
.pn-form > .pc-sechead{margin-bottom:0}
.pn-formrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:700px){.pn-formrow{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}}
.pn-form select.pc-input{padding-right:44px}
.pn-form textarea.pc-input{min-height:132px}
.pn-err{color:var(--danger)}
.pn-dangerrow{display:flex;justify-content:flex-end;margin:0}
/* Toggle row: label left, switch right. */
.pn-tgl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:6px 0;font:600 14px/1.3 var(--font-sans)}

/* Page-level alerts on the app column: a quiet paper note, never floating. */
.pn-main > .pc-alert,.pn-app > .pc-alert{align-items:center}
.pn-app > .pc-alert .pc-ico{margin-top:0;color:var(--ink-2)}
.pn-app > .pc-alert--danger .pc-ico{color:var(--danger)}

/* ---------- Phone rhythm for app pages ---------- */
@media (max-width:700px){
  .pn-row{padding:10px var(--space-2)}
  .pn-panel.pn-empty{padding:40px 22px 32px}
}
@media (prefers-reduced-motion:reduce){
  .pn-row,.pn-seeall,.pn-backchip{transition:none}
}
/* layout.css makes every a.pn-card-link a block; app rows and chips keep their own display. */
a.pn-card-link.pn-row,a.pn-card-link.pn-chatwho{display:flex}
a.pn-card-link.pn-row__main{display:grid}
a.pn-card-link.pn-backchip{display:inline-flex}

/* ==========================================================================
   Shared building blocks for page groups (use these, do not invent new skins)
   ========================================================================== */
/* Section head on the page = mockup .sec-head: h-m, muted line, action bottom-right. */
.pn-sectionhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 var(--sec-head-gap)}
.pn-sectionhead > div{min-width:0}
.pn-sectionhead h2{margin:0;font:700 var(--fs-m)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h);color:var(--ink);hyphens:manual;overflow-wrap:break-word}
.pn-sectionhead .pc-help,.pn-sectionhead p{margin:6px 0 0;color:var(--ink-2)}
/* In-card tile: sunken, radius 18, no border, no shadow. */
.pn-tile{display:block;min-width:0;padding:var(--space-4);border-radius:var(--r-rules);background:var(--sunken);color:inherit;text-decoration:none}
a.pn-tile,button.pn-tile{transition:background-color var(--dur-fast)}
a.pn-tile:hover,button.pn-tile:hover{background:var(--surface-2)}
/* In-card divider and sub-group spacing. */


/* Sticky action bar (partials/ui_actionbar.php): in flow at the end of a form; on phones it sticks to the bottom of
   the viewport above the tab bar, with the line on top (never a fixed bar over content). */
/* Inner grounding 01.10.: desktop = a paper bar that closes the form (surface, the line, radius 24), not a lone line on the
   page ground; phones = the sticky dock on paper with the line on top. */
.pc-actionbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px;padding:14px var(--row-inset) 14px var(--panel-pad);border:1px solid transparent;border-radius:var(--r-box);background:var(--surface)}
.pc-actionbar__note{margin-right:auto;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
@media (max-width:700px){
  .pc-actionbar{position:sticky;bottom:var(--dock-flush);z-index:var(--z-bar);margin-inline:calc(-1 * var(--gutter));padding:12px var(--gutter) 14px;border-width:1px 0 0;border-radius:0;background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
  .pc-actionbar > .pc-btn{flex:1 1 auto}
}

/* ==========================================================================
   In-card variants: anything card-like placed inside a panel goes flat.
   ========================================================================== */
.pn-panel .pn-panel,.pn-panel .pc-list{padding:0;background:transparent;border:0;border-radius:0}
.pn-panel .pc-card:not(.pn-prodcard){background:var(--sunken);border-color:transparent;border-radius:var(--r-rules)}
.pn-panel .pc-alert{background:var(--sunken);border-color:transparent;border-radius:var(--r-rules)}
.pn-panel .pc-alert--danger{background:var(--danger-soft);color:var(--ink)}
@media (prefers-reduced-motion:reduce){a.pn-tile,button.pn-tile{transition:none}}
/* ui_apphead(): the mockup app frame rhythm (h-m, 6, .sub → the pill tabs). Without a band (the chat rail head): 30 / 22. */
.pc-apphead{margin-bottom:var(--page-head-gap)}
.pc-apphead:has(> .pc-apphead__tabs){margin-bottom:22px}
.pc-apphead__tabs{margin-top:24px}

/* ==========================================================================
   Band (inner grounding 01.10., docs/inner-grounding-01-10.md): the page head's ground. A full-bleed surface directly
   under the chrome, the landing hero's paper with its soft glow (--app-head-bg), the grey 50 % line under it.
   ui_apphead() renders it (every member page head); ad.php (the back row) and member.php (profile head + view pills)
   use the classes directly. Paint only: the bleed is a border-image outset, so it never adds scroll width.
   .pc-band        the surface across the viewport          .pc-band--top   the page's first block: up to the chrome
   .pc-band--flat  plain --surface (continues a band above)  .pc-band--line  the line under it
   ========================================================================== */
.pc-band{position:relative}
.pc-band::before{content:"";position:absolute;z-index:-1;inset:0;border-image:var(--app-head-bg) fill 0 / / 0 50vw}
.pc-band--top::before{top:calc(-1 * var(--app-top))}
.pc-band--flat::before{border-image-source:linear-gradient(var(--surface),var(--surface))}
.pc-band--line::after{content:none}   /* tonal pass 05.10.: the band is set apart by its own tone, no line under it */
/* .pc-band--end   the band runs on to the footer (through the main's foot, --main-pb)
   .pc-band--fill  the band fills the page from the chrome to the footer, its content centred (a dead end: one card) */
.pc-band--end::before{bottom:calc(-1 * var(--main-pb,0px))}
.pc-band--fill::before{top:calc(-1 * var(--app-top));bottom:calc(-1 * var(--main-pb,0px))}
.pn-main:has(> .pc-band--fill){display:flex;flex-direction:column}
.pc-band--fill{flex:1 0 auto;display:grid;align-content:center;justify-items:stretch}
/* The page head in its band: the back pill, the h1 row, the one muted line, the view pills; --app-gap to the first block
   (inside a gap grid the grid gap is that space). */
.pc-apphead.pc-band{padding-bottom:var(--app-head-pb);margin-bottom:var(--app-gap)}
.pn-app > .pc-apphead.pc-band{margin-bottom:0}
.pc-apphead.pc-band > .pc-sub{margin:0}
.pc-apphead.pc-band .pc-apphead__tabs{margin-top:20px}
@media (max-width:700px){.pc-apphead.pc-band .pc-apphead__tabs{margin-top:16px}}

/* ---------- Follow / Following (owner 03.10., partials/follow_btn.php): a kit line button whose label is its state.
   Off = plus + "Follow", on = check + "Following". The button keeps one width while it flips (both labels share the
   cell), so the action row never jumps. */
.pn-follow{display:inline-grid;justify-items:center;align-items:center}
.pn-follow > span{grid-area:1/1;display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.pn-follow > span .pc-ico{flex:none;width:18px;height:18px}
.pn-follow.pc-btn--sm > span{gap:8px}
.pn-follow.pc-btn--sm > span .pc-ico{width:16px;height:16px}
.pn-follow .pn-follow__on,.pn-follow.is-on .pn-follow__off{visibility:hidden}
.pn-follow.is-on .pn-follow__on{visibility:visible}
.pn-followtoast{gap:var(--space-4);white-space:nowrap}
.pn-followtoast button,.pn-followtoast a{flex:none;min-height:32px;display:inline-flex;align-items:center}
/* ==========================================================================
   Cards v3 (docs/design-v3-system.md §2.5). The card skins live in components.css (.pc-card = mockup .pcard,
   .pc-scard = the seller card, .pc-stories = the Premium row). This file only places them in grids and styles the few
   card-only details.
   Owned by the lead AD with the components; page files never restyle a card.
   ========================================================================== */
.pc-card__title mark{background:var(--pink-soft);color:var(--anthracite);border-radius:3px;padding:0 1px}
.pn-askprice{flex:none;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-age{font-weight:500;color:var(--ink-2)}
.pn-flag{flex:none;width:16px;height:16px;aspect-ratio:1;border-radius:50%;object-fit:cover}
/* Seller cards in a grid fill their cell; in flex rows (the "Your corner" favourites) they keep the rail width. */
:is(.pn-grid,.pn-rail) > .pc-scard{width:100%}
.pn-corner__sellers > .pc-scard{flex:none;width:176px}
@media (max-width:700px){.pn-corner__sellers > .pc-scard{width:148px}}
/* The Premium row on top of the sellers pages (guest discover + members' /sellers/). */
.pn-premrow{margin:var(--sec-gap-stack) 0}   /* polish r1: the same 32 above (under the page head) and below */
.pn-premrow .pc-sechead{margin-bottom:10px}
/* Buyer row (sell home): the 52 avatar, pink ring when online, the name, the quiet status. */
.pn-buyerrow .pc-avatar{width:52px;height:52px;font-size:20px}
.pn-buyerrow .pn-buyerrow__name{display:flex;align-items:center;gap:6px;min-width:0}
.pn-buyerrow .pn-buyerrow__name > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pn-buyerrow .pn-flag{width:14px;height:14px;vertical-align:-2px}
/* A16 (owner 18.10.): the name and status take the row's room, the two round keys sit together at the right end */
.pn-buyerrow .pn-row__lead > .pn-row__main{flex:1 1 auto;min-width:0}
.pn-buyerrow--offer{column-gap:8px}
.pn-sellhome .pn-buyerrow--offer .pn-buyerrow__acts{padding-left:0}   /* the chat key sits beside the offer key, not under the name */
.pn-buyerrow .pn-row__sub.is-online{color:var(--ink);font-weight:600}
/* Listing cards in a grid (adcard2 03.10.): the caption sits on the photo, so rows keep the grid's own gap (the 30 / 22
   row gap of 02.10. made room for a caption under the frame, which is gone). */
/* polish r4: one soft poster for media without a picture of their own (a video with no poster, a locked photo with no
   blur copy): the pink cover stripes blurred into a gradient with a paper highlight, the look of a blurred locked
   poster. Locked photos and videos share it; the lock label or the play disc sits on top. Tokens only, both themes. */
.pn-softposter{position:absolute;inset:0;z-index:1;background:radial-gradient(90% 70% at 24% 14%,var(--surface-veil),transparent 64%),linear-gradient(165deg,var(--surface),var(--sunken));pointer-events:none}   /* no blur / scale: nothing may widen the tile's scroll box */
.pn-softposter::after{content:"";position:absolute;inset:0;background:radial-gradient(150% 110% at 90% 105%,var(--pink),transparent 75%);opacity:.45}
/* AD3 03.10. (docs/ad3-03-10.md): the seller portrait keeps the owner's card rule (PFLICHT 6): the age beside the name,
   the rating as a glass chip bottom left (★ + the score, never a count), her country as a round flag chip bottom right.
   The chips share the like's glass (--scard-glass, blur, the 50 % grey rim), so the photo carries three quiet objects of
   one family. The foot row is the caption's last line; the caption still grows upwards from the bottom edge. */
.pc-scard__name > .pc-scard__age{flex:none;overflow:visible;margin-left:-5px;font:500 .86em/1 var(--font-sans);color:var(--scard-ink-2)}
.pc-scard__name > .pc-scard__age::before{content:none}
.pc-scard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 6px;min-width:0;margin-top:7px}   /* cards3 05.10.: the rating chip, then the tiny listing-count chip, both bottom left; UX 17.10. #37: + "Top rated", a narrow card wraps the row */
.pc-scard__foot > .pc-scard__score{display:inline-flex;flex:none;align-items:center;gap:4px;white-space:nowrap;height:24px;padding:0 9px 0 7px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--scard-glass);font:700 13px/1 var(--font-sans);letter-spacing:.01em;color:var(--scard-ink);text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pc-scard__foot > .pc-scard__score > span[aria-hidden]{display:inline-flex;align-items:center;gap:4px}
.pc-scard__foot > .pc-scard__n{flex:0 1 auto;min-width:0;overflow:hidden;gap:4px;padding:0 8px 0 6px}   /* owner 12.10.: on a narrow card the count chip gives way, the rating never breaks into two lines */
.pc-scard__foot > .pc-scard__n > .pc-ico{width:13px;height:13px;flex:none}   /* UX 17.10. #4: a tag + the number, never cut words */
/* UX 17.10. #37: "Top rated" in the foot row (it was a rotated stamp over the photo): the cream label of the stamp family, flat */
.pc-scard__foot > .pc-scard__top{display:inline-flex;flex:none;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-full);background:var(--cream);color:var(--anthracite);font:700 11px/1 var(--font-display);letter-spacing:.02em;white-space:nowrap}
.pc-scard__foot .pc-scard__star{font-size:12px;line-height:1}
.pc-scard__flag{position:absolute;top:16px;left:16px;z-index:6;width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--scard-glass)}   /* owner 05.10.: top left, the heart's twin */
@media (max-width:700px){
  .pc-scard__foot{margin-top:6px}
  .pc-scard__foot > .pc-scard__score{height:22px;padding:0 8px 0 6px;font-size:12px}
  .pc-scard__flag{top:14px;left:14px;width:20px;height:20px}
}
/* pnew page group: market (landing, marketplace, search, ad detail, discover, buyer list). Design v2 "Bold Flesh"
   (docs/design-v2-system.md, plan §2.6 S1–S4, S7, S12). Page = --bg; panels = --surface; inside a panel only flat fills.
   Black = chrome only (buy bar, stat tiles, join bar). Tokens only; photo glass uses --glass / --glass-strong. */

/* ========== Landing banner (plan S1 home): full-bleed skin band, mega headline, real stat tiles ========== */

/* hero photo (owner, 28.09.): the peach wall on the left carries the copy, the model sits right */

/* The ticker runs full bleed on desktop, flat (§7.13, M:479). */
@media (min-width:701px){
  .pn-main > .pn-ticker{margin:var(--section-gap) calc(50% - 50vw);border-radius:0}
  }
/* Phone: the tilted band is scaled 1.03 (T1b); a little less bleed keeps its bounding box inside the viewport (no h-scroll).
   The scale grows with the width, so the inset does too (mobile UX: 6px fixed left a 1px scroll at 430). */
@media (max-width:700px){.pn-main > .pn-ticker{margin-inline:calc(max(6px,1.8vw) - var(--gutter))}}
/* Recently active sellers: story rings on phones, a compact row list on desktop. */



/* Header search pill (a GET form to /ads/; chrome.css skins it on the black header). */
form.pn-search{position:relative;flex:1;min-width:0;max-width:940px;margin:0;cursor:text}
form.pn-search:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}   /* night N8 #87: keyboard focus ring on the in-page search (the input itself draws none) */
form.pn-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--ink);font:400 14px/20px var(--font-sans);outline:none;appearance:none}
form.pn-search input::placeholder{color:var(--ink-2)}
form.pn-search input::-webkit-search-cancel-button,.pn-mksearch__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}


/* ========== v3 Market + discovery (docs/design-v3-system.md §4.1/§4.2; mockup .app, .tabs-app, .pairs, .sellers) ==========
   Placement only: every look comes from the kit (pc-seg pills, pc-chip, pc-btn, pc-card, pc-scard, pc-input, pn-sheet,
   pc-empty). Owner 30.09.: no filter sidebar, the page is .pn-wide (layout.css: the wide column + the 3–7 column grid).
   One toolbar row: count · active chips … sort pills · Filters. The filters live in ONE form (#pnMkSheet): the centred
   modal on desktop (scrolling body, sticky footer), the bottom sheet on phones (the kit .pn-sheet). */
.pn-mksentinel{height:1px;margin-bottom:-1px}
.pn-mktool{display:none}
.pn-mkmain{min-width:0}
/* The toolbar row (desktop): count and chips left, sort pills + Filters right; everything wraps. */
.pn-mkbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-height:var(--control-sm);margin:0 0 var(--wide-head-gap)}
.pn-mkcount{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0;margin:0;font:600 15px/1.4 var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-mkcount__loose{font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-mkactive{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.pn-mkactive .pc-chip .pc-ico{width:14px;height:14px}
.pn-mkactive .pn-seeall{margin-left:4px;min-height:30px;align-self:center}
.pn-mkbar__end{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 12px;margin-left:auto}
.pn-mksort{justify-content:flex-end}
.pn-mkfilterbtn{flex:none}
.pn-grid > .pn-skelcard{min-width:0}
/* The listing cards fill their grid cell (one row = one height). */
.pn-mkgrid > *{min-width:0;height:100%}
/* Sellers found by a search: the mockup .sellers row under a .sec-head with the "Real sellers" label. */
.pn-mksellers{margin:0 0 var(--sec-gap-stack)}
/* T08: a search that found her but none of her ads: one muted line under the seller strip, no empty-state card */
.pn-mknoads{margin:calc(var(--sec-gap-stack) * -0.5) 0 var(--sec-gap-stack)}
/* Phone search field: the kit field (.pc-input, pill 50) with the icon inside and a round clear button. */
.pn-mksearch{position:relative;flex:1;min-width:0;margin:0}
.pn-mksearch__field{position:relative;display:flex;align-items:center;min-width:0}
.pn-mksearch__field > .pc-ico{position:absolute;left:18px;z-index:1;color:var(--ink-2);pointer-events:none}
.pn-mksearch .pc-input{padding:0 16px 0 48px}
.pn-mksearch .pc-input:has(~ .pn-clearq){padding-right:48px}
.pn-clearq{position:absolute;right:11px;top:50%;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--btn-ink);color:var(--on-btn-ink);text-decoration:none}
.pn-clearq::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.pn-clearq .pc-ico{width:14px;height:14px}
.pn-clearq:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Recent searches: a floating paper menu (the only shadow here, --sh-float) under the search field. */
.pn-recent{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:25;display:grid;gap:10px;padding:16px 18px 18px;background:var(--surface);border:0;border-radius:var(--r-pcard);box-shadow:var(--sh-float);color:var(--ink)}
.pn-recent[hidden]{display:none}
.pn-recent .pn-grouplabel{margin:0}
.pn-mkfilterbtn{flex:none}
/* The filter form: the kit sheet as a flex column; the pill groups scroll, the footer (Reset + Show N results) stays. */
dialog.pn-mksheet{display:none;overflow:hidden;padding:10px 0 0;max-height:min(90svh,780px)}
dialog.pn-mksheet[open],dialog.pn-mksheet:target{display:flex}   /* QA m6: :target = the no-JS filter form */
dialog.pn-mksheet:target:not([open]){z-index:var(--z-toast)}   /* not in the top layer without JS: above the header and the bars */
.pn-mksheet__form{display:flex;flex-direction:column;width:100%;min-height:0;margin:0}
.pn-mksheet .pn-sheet__head{padding:0 22px}
.pn-mksheet__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 22px 20px}
.pn-mkset{margin:0;padding:0;border:0;min-width:0}
.pn-mkset[hidden],.pn-mkset .pc-chips > label[hidden]{display:none}   /* round 2: size + fabric per category, empty options hidden */
.pn-mkset + .pn-mkset{margin-top:22px}
.pn-mkset > legend.pn-grouplabel{margin:0;padding:0 0 10px}
.pn-mkcty{display:block;margin-top:var(--space-3)}   /* owner 18.10. ("gequetscht"): the "Other countries" select under the country chips gets the room of the set's other parts */
.pn-mksheet__btns{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:14px 22px calc(16px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
.pn-mksheet__btns > .pc-btn{justify-content:center;text-align:center;white-space:nowrap}
@media (min-width:701px){
  /* Desktop: a centred modal, 560 wide, the body scrolls between the head and the sticky footer. */
  dialog.pn-mksheet{width:min(560px,calc(100% - 48px));max-height:min(86vh,820px);padding-top:24px}
  .pn-mksheet .pn-sheet__head{margin-bottom:var(--space-4);padding-bottom:0}
  .pn-mksheet .pn-sheet__head,.pn-mksheet__body{padding-inline:28px}
  .pn-mksheet__btns{padding:14px 28px 18px}
}
@media (max-width:700px){
  /* The tool row sticks under the header (in flow; the grid scrolls under it only after the page head). */
  .pn-mktool{position:sticky;top:var(--pn-mktop,var(--header-h));z-index:var(--z-bar);display:flex;align-items:center;gap:10px;margin:0 calc(-1 * var(--gutter)) var(--space-2);padding:8px var(--gutter);background:var(--bg)}
  .pn-mktool.is-stuck{box-shadow:0 10px 24px -14px var(--scrim)}
  .pn-mkbar{gap:8px 10px;min-height:0;margin-bottom:var(--space-3)}
  .pn-mkbar__end,.pn-mksort{display:none}
  .pn-mkcount{flex:1 1 100%;font-size:14px}
  /* The active chips: one row that slides sideways (edge to edge), Reset at its end. */
  .pn-mkactive{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter)}
  .pn-mkactive::-webkit-scrollbar{display:none}
  .pn-mkactive > *{flex:none;white-space:nowrap}
  .pn-mkbar:not(:has(.pn-mkcount,.pn-mkactive)){display:none}
  /* polish r1: phones use the desktop row too: a quiet small Reset left, "Show N results" fills the rest (never wraps). */
  .pn-mksheet__btns{gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .pn-mksheet__btns > .pn-mksheet__reset{min-height:40px;padding:0 8px;font-size:12px}
  .pn-mksheet__btns > .pn-mksheet__go{padding-inline:12px}
}
/* polish r3: safety net at 360: the longest label ("Voir 106 culottes") keeps its 12px padding. */
@media (max-width:380px){.pn-mksheet__btns > .pn-mksheet__go{letter-spacing:.04em}}

/* ---------- Discover (members' /sellers/): page head + Sellers | Videos pills, favourites row, filter pills, avatar grid ---------- */
.pn-discbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--section-gap)}
/* polish r1: the pills and the language chip share one wrapping row (2 rows at 360, not 3). The chip shows a pill-size
   label; the native select lies invisibly on top (it keeps the 16px iOS guard and stays the tap target). */
.pn-discbar > .pc-seg{display:contents}
.pn-langchip .pc-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer}
.pn-langchip .pc-input{inset:-5px 0;height:calc(100% + 10px)}   /* UX polish 23.10. UX-020: the invisible select (the real tap target) reaches 45 px; the 35 px chip keeps the row even with the 32 px segment pills */
.pn-langchip__lab{display:inline-flex;align-items:center;min-height:35px;padding:0 38px 0 14px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--sunken);color:var(--ink);font:600 13px/1 var(--font-sans);white-space:nowrap;transition:background-color var(--dur-fast)}
.pn-langchip:hover .pn-langchip__lab{background:var(--surface-2)}
.pn-langchip.is-set .pn-langchip__lab{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pn-langchip:has(.pc-input:focus-visible) .pn-langchip__lab{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-langchip::after{z-index:2}
.pn-langchip{position:relative}   /* visual audit VM-002: the Premium wall's country chip sits outside the discovery bar; the invisible select needs its box there too */
.pn-favs{margin:0 0 var(--sec-gap-stack)}
/* The seller grid: seller cards in even columns, equal heights. On the wide member pages the columns come from
   layout.css (.pn-wide: 3 / 4 / 5 / 6 / 7); elsewhere 3, 4 from 900, 6 from 1200; 2 on a phone. */
.pn-grid.pn-sellergrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (min-width:900px){.pn-grid.pn-sellergrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.pn-grid.pn-sellergrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:700px){
  .pn-grid.pn-sellergrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* The favourites row slides sideways on phones (the mockup .sellers row is one line). */
  .pn-favs .pn-sellerrail{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 6px}
  .pn-favs .pn-sellerrail::-webkit-scrollbar{display:none}
  .pn-favs .pn-sellerrail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}   /* UX polish 23.10. UX-066: the same edge fade as the hub rails */
  .pn-favs .pn-sellerrail > .pc-scard{flex:none;width:148px}
}
/* @member-only */
/* Owner 15.10. ("bei mobiler ansicht fehlen die ganzen buttons … premium und new … muss auf mobile sichtbar sein"): on a
   phone the sort pills (Premium first, then Newest, …) are one row right under the tool row, above the count and the
   grid; it slides sideways when it does not fit (edge to edge, no scrollbar). 6px of block padding (given back by the
   margin) lets the kit's 44px hit areas reach out of the clipped row. The Filters button stays in the tool row. */
@media (max-width:700px){
  .pn-mkbar__end{display:block;flex:1 1 100%;order:-1;min-width:0;margin:0}
  .pn-mkbar__end > .pn-mkfilterbtn{display:none}
  .pn-mksort{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-6px calc(-1 * var(--gutter));padding:6px var(--gutter)}
  .pn-mksort::-webkit-scrollbar{display:none}
  .pn-mksort > *{flex:none}
  .pn-mkbar:has(.pn-mksort){display:flex}
  /* Members' /sellers/ (the same owner note): the filter pills (Premium first) are one sideways row too; the country and
     the language selects wrap onto the row under it. */
  .pn-discbar > .pc-seg{display:flex;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-6px calc(-1 * var(--gutter));padding:6px var(--gutter)}
  .pn-discbar > .pc-seg::-webkit-scrollbar{display:none}
  .pn-discbar > .pc-seg > *{flex:none}
}
/* @end-member-only */

/* ---------- Photo / video feed of a seller: the listing-card photo (4:5, line, radius 20) in the .pairs grid ---------- */
.pn-grid.pn-fdgrid{gap:18px}
.pn-fdgrid .pn-fdtile{aspect-ratio:4/5;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r-pcard);text-decoration:none;color:inherit}
.pn-fdgrid .pn-fdtile > video{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;background:var(--anthracite)}
.pn-fdgrid button.pn-fdtile{cursor:zoom-in}
@media (hover:hover){.pn-fdgrid .pn-fdtile:is(a,button):hover{border-color:var(--line-3)}}
.pn-fdgrid .pn-fdtile:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-fdgrid .pn-fdtile--lock > img{filter:blur(28px);transform:scale(1.3)}
.pn-fdgrid .pn-fdtile--lock::after{content:"";position:absolute;inset:0;z-index:3;background:var(--media-dim)}
.pn-fdgrid .pn-fdtile--lock .pc-lockpill{position:relative;z-index:4}
.pn-fdgrid .pn-photocount{z-index:5}
@media (max-width:700px){.pn-grid.pn-fdgrid{gap:12px}}
/* The gate: a dark box in flow at the end (mockup .box--dk), one pink action. */
.pn-fdgate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:var(--section-gap)}
.pn-fdgate__txt{display:flex;align-items:center;gap:12px;min-width:0;margin:0;font:600 15px/1.4 var(--font-sans)}
.pn-fdgate__txt .pc-ico{flex:none;color:var(--pink)}
@media (max-width:700px){.pn-fdgate > .pc-btn{flex:1 1 100%}}

/* ========== Ad detail (S4) ========== */

.pn-crumbs{display:none;flex:1;min-width:0;align-items:center;gap:6px;margin:0;padding:0;list-style:none;font:600 13px/20px var(--font-sans);color:var(--ink-2)}
.pn-crumbs li{display:flex;align-items:center;gap:6px;min-width:0}
.pn-crumbs li:last-child{flex:1;min-width:0}
.pn-crumbs a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pn-crumbs a:hover{color:var(--ink);text-decoration:underline}
.pn-crumbs a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sticker)}
.pn-crumbs [aria-current]{min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-crumbs .pn-chev{flex:none;width:14px;height:14px}
.pn-adshare{flex:none;display:inline-grid}
@media (min-width:701px){
  
  .pn-crumbs{display:flex}
}
.pn-sharetoast{position:fixed;left:50%;bottom:calc(var(--dock) + 84px + var(--toast-gap));z-index:var(--z-toast);transform:translateX(-50%);pointer-events:none}
@media (min-width:701px){.pn-sharetoast{bottom:var(--toast-low)}}


/* Gallery: native swipe (scroll-snap). Desktop: 4:5, radius 22, counter + thumbs. Phone: full-bleed 476 hero, story bars. */

.pn-gal{position:relative;overflow:hidden;border-radius:var(--radius-card);background:var(--sunken);box-shadow:var(--sh-1)}
.pn-gal__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:inherit}
.pn-gal__track::-webkit-scrollbar{display:none}
.pn-gal__track:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-gal__slide{flex:0 0 100%;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always}
.pn-gal__slide > img,.pn-gal__slide > picture > img{object-position:50% 35%}
.pn-gal__count{position:absolute;top:14px;right:14px;z-index:5;height:28px;padding:0 11px;border-radius:var(--radius-full);background:var(--glass-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--sticker-cream);font:800 12px/28px var(--font-sans);font-variant-numeric:tabular-nums;pointer-events:none}
.pn-gal__count b{font-weight:800}
/* adult (owner 05.10.): the blurred slide carries the Premium door; the lock sits where the eye lands */
.pn-gal__lock{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:var(--sh-float)}
.pn-gal__slide.is-locked > img,.pn-gal__slide.is-locked > picture > img{transform:scale(1.04)}
.pn-gal__nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);background:var(--glass);color:var(--sticker-cream);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .15s,background-color .2s}
.pn-gal:hover .pn-gal__nav,.pn-gal__nav:focus-visible{opacity:1}
.pn-gal__nav:hover{background:var(--glass-strong)}
.pn-gal__nav:active{transform:translateY(-50%) scale(.9)}
.pn-gal__nav--prev{left:14px}
.pn-gal__nav--next{right:14px}
.pn-gal__dots{display:none}
.pn-gal__bars{position:absolute;left:16px;right:16px;top:12px;z-index:5;display:flex;gap:4px;pointer-events:none}
.pn-gal__bars i{flex:1;height:3px;border-radius:2px;background:var(--media-track);transition:background-color .2s}
.pn-gal__bars i.is-active{background:var(--sticker-cream)}
.pn-gal__thumbs{display:none}
.pn-gal__thumb{padding:0;border:0}
.pn-gal.is-single .pn-gal__count,.pn-gal.is-single .pn-gal__nav,.pn-gal.is-single .pn-gal__bars{display:none}
@media (hover:none){.pn-gal__nav{display:none}}
@media (min-width:701px){
  .pn-gal__bars{display:none}
  .pn-gal__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-3)}
  .pn-gal__thumb{position:relative;width:76px;height:95px;padding:0;border:0;border-radius:var(--radius-tile);overflow:hidden;cursor:pointer;opacity:.7;box-shadow:0 0 0 0 transparent;transition:opacity .15s,box-shadow .2s}
  .pn-gal__thumb:hover{opacity:.95}
  .pn-gal__thumb.is-active{opacity:1;box-shadow:none;opacity:1}
  .pn-gal__thumb:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
  }
/* Buy panel (desktop) / overlapping sheet (phone): everything inside is flat. */

   /* brand pass §6.2: display type never hyphenates */

/* Brand pass (inner pages AD, harmony rules §9 "ad detail"): the price hangs on a tag (agency #9, the .pn-htag device,
   sized here), one Caveat note from the lang keys beside it, and a care-label head over the facts rows. */

   /* lead review: a laundry object keeps its paper colours in dark (§3.2) */

/* Seller row: 44 avatar with the accent ring, name 800, rating / status line, chevron. */

/* Attributes: build3 integrator (owner queue item 10) — the facts component (components.css), bleeding to the sheet edges. */
.pn-adfacts{margin-bottom:0}
.pn-ad__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2);align-items:stretch}
.pn-ad__cta > :only-child{grid-column:1/-1}
.pn-ad__cta form{margin:0;display:grid;gap:var(--space-2)}
.pn-ad__cta #pnMsgForm{grid-column:1}
/* Reserved (followup: orders): a black pill next to the price, a calm disabled button, "view order" link. */

.pn-adorder--reserved[aria-disabled="true"]{gap:8px;background:var(--sunken);color:var(--ink-2);box-shadow:none;cursor:not-allowed;pointer-events:none}
a.pn-adorder--mine{gap:8px;text-decoration:none}
.pn-adorder__offer .pc-input{width:100%}
/* Description + translation toggle */

/* Rails under the ad: "More from" + "Similar" (section role heads, v2 cards). */



/* ========== Buy bar (§7.14): the floating black pill; phones: always on, it replaces the tabbar ========== */

@media (max-width:899px){
  
                        body.pn-has-adbar .pn-main{padding-bottom:calc(72px + 12px + env(safe-area-inset-bottom) + var(--space-8))}
}



/* ========== Ad detail on phones (M:719–754): full-bleed hero under glass buttons, overlapping --bg sheet ========== */
@media (max-width:700px){
  
              .pn-gal{border-radius:0;box-shadow:none}
  .pn-gal__slide{aspect-ratio:auto;height:476px}
  .pn-gal__count{display:none}
  .pn-gal__bars{top:calc(10px + env(safe-area-inset-top))}
                       /* build3 integrator: the sheet's own side padding */
  /* The buy bar carries the main action (M:750). Once it is pinned, the panel's own CTA row is not shown twice: its forms
     stay in the DOM (the bar submits them via form=). The offer form stays visible, since the bar links to it. */
  body.pn-has-adbar .pn-ad__cta:not(:has(.pn-adorder__offer)){display:none}
  .pn-ad__cta{display:flex;flex-wrap:wrap;gap:8px}
  .pn-ad__cta > *{flex:1 1 0;min-width:0}
      .pn-ad__cta .pc-btn--lg{height:44px;padding:0 14px;font-size:14px}
  .pn-ad__cta form:has(.pn-adorder__offer){flex-basis:100%}
          }

/* ========== Buyer list (sell home, plan §2.7) ========== */
.pn-buyerrows{display:grid}
a.pn-card-link.pn-row__lead{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none;border-radius:var(--radius-card)}
.pn-row__lead:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-buyerrow:hover{background:var(--sunken)}
.pn-buyerrow .pn-row__main > b{display:flex;align-items:center;gap:8px}
.pn-rowbtn{flex:none;min-width:104px;justify-content:center}
/* offer: "Make offer" (soft pill) and, after her one offer to that buyer, the state chip in the same slot. */
.pn-buyerrow__acts{flex:none;display:flex;align-items:center;gap:var(--space-2)}
.pn-makeoffer .pc-ico{flex:none;width:16px;height:16px}
.pn-offerstate{display:inline-flex;align-items:center;gap:6px;height:var(--control-sm);padding:0 14px;border-radius:var(--radius-full);background:var(--sunken);color:var(--ink-2);font:800 13px/1 var(--font-sans);white-space:nowrap;text-decoration:none}
.pn-offerstate .pc-ico{flex:none;width:14px;height:14px;stroke-width:2.4}
.pn-offerstate.is-open{background:var(--accent-soft);color:var(--accent-text)}
.pn-offerstate.is-accepted{background:var(--ink);color:var(--bg)}
.pn-offerstate.is-accepted .pc-ico{color:var(--success)}
a.pn-offerstate:hover{text-decoration:underline}
a.pn-offerstate:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* The "Make offer" sheet (.pn-sheet): segmented item | custom, her items as picks, her photos as a strip. */
.pn-offersheet__form{display:grid;gap:var(--space-3)}
.pn-offersheet__form .pn-sheet__head{margin-bottom:0}
/* Its title takes the focus on open (T70) as a landmark, not a control, so it draws no ring. */
.pn-offersheet h2[tabindex="-1"]:focus{outline:0}
.pn-offersheet__lede{margin:0}
.pn-offersheet__seg{justify-self:start}
.pn-offersheet__seg .pc-tab:has(input:checked){background:var(--ink);color:var(--bg)}
.pn-offersheet__seg .pc-tab:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-offersheet__panel{display:grid;gap:var(--space-3);min-width:0;margin:0;padding:0;border:0}
.pn-offersheet__panel[hidden],.pn-offersheet [data-when][hidden]{display:none}
.pn-offersheet__form:has(input[name=mode][value=item]:checked) [data-panel=custom],
.pn-offersheet__form:has(input[name=mode][value=item]:checked) [data-when=custom],
.pn-offersheet__form:has(input[name=mode][value=custom]:checked) [data-panel=item],
.pn-offersheet__form:has(input[name=mode][value=custom]:checked) [data-when=item]{display:none}
.pn-offersheet__form[data-mode=custom] [data-when=item]{display:none}
.pn-offersheet__items{display:grid;gap:var(--space-2);max-height:min(40svh,300px);overflow:auto;padding:2px}
.pn-offerpick{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:8px 12px 8px 8px;border-radius:var(--radius-tile);background:var(--sunken);cursor:pointer;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s var(--ease-snap)}
.pn-offerpick:has(input:checked){box-shadow:none;background:var(--accent-soft)}
.pn-offerpick:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-offerpick__img{flex:none;width:44px;height:55px;border-radius:10px;overflow:hidden;background:var(--ph-media)}
.pn-offerpick__txt{flex:1;min-width:0;display:grid;gap:2px}
/* 02.10. night QA: the seller must recognise the pair she offers: the title takes up to two lines, never an ellipsis at 360 */
.pn-offerpick__txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font:800 14px/1.25 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-offerpick__txt span{font:700 16px/1 var(--font-display);color:var(--ink-2)}
.pn-offerpick__tick{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2px var(--line-3);color:transparent}
.pn-offerpick:has(input:checked) .pn-offerpick__tick{background:var(--accent);box-shadow:none;color:var(--on-accent)}
.pn-offerpick__tick .pc-ico{width:14px;height:14px;stroke-width:2.6}
.pn-offersheet__noitems{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:var(--radius-tile);background:var(--sunken);font:600 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-offersheet__pics{display:flex;gap:var(--space-2);overflow-x:auto;padding:2px;scrollbar-width:none}
.pn-offersheet__pics::-webkit-scrollbar{display:none}
.pn-offerpic{flex:none;position:relative;display:block;width:56px;height:70px;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--sunken);box-shadow:inset 0 0 0 2px transparent}
.pn-offerpic .pn-snap{display:block;width:100%;height:100%}
.pn-offerpic:has(input:checked){outline:3px solid var(--accent);outline-offset:-3px}
.pn-offerpic:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:1px}
.pn-offerpic__none{display:grid;place-items:center;width:100%;height:100%;color:var(--ink-3)}
.pn-offersheet__price{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);align-items:end}
.pn-offersheet__price:has([data-when=custom][hidden]),.pn-offersheet__form:has(input[name=mode][value=item]:checked) .pn-offersheet__price{grid-template-columns:1fr}
.pn-offersheet__cur .pc-input{min-width:112px}
.pn-offersheet__err{margin:0;padding:10px 14px;border-radius:var(--radius-tile);background:var(--danger-soft);color:var(--ink);font:600 13px/1.35 var(--font-sans)}
.pn-offersheet__err[hidden]{display:none}
.pn-offersheet__fine{margin:0;text-align:center}
.pn-offersheet__new{margin-top:4px}   /* member launch: the door to the editor under her listings */
.pn-offerlimit__rows{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pn-offerlimit__rows li{display:flex;align-items:flex-start;gap:8px;font:500 14px/1.4 var(--font-sans);color:var(--ink)}
.pn-offerlimit__rows svg{flex:none;margin-top:2px;color:var(--accent)}
.pn-offersheet__form.is-busy{opacity:.7;pointer-events:none}
@media (min-width:900px){
  .pn-buyerrows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-4)}
  .pn-buyerrows > .pn-row:nth-child(2)::before{display:none}
}

/* ========== Phones: app feel ========== */
@media (max-width:700px){
  .pn-buyerrow{flex-wrap:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .pn-gal__nav,.pn-gal__bars i,.pn-gal__thumb{transition:none}
}

/* ---------- Ad page (moved from chat.css in T7, same cascade position relative to market.css): Order (primary) beside Message (secondary) and the heart ---------- */
.pn-ad__cta:has(.pn-adorder){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.pn-ad__cta:has(.pn-adorder):not(:has(.pn-heart)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pn-ad__cta .pn-adorder:has(.pn-adorder__offer){grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.pn-adorder .pc-btn{gap:8px}
.pn-adorder__offer{display:grid}
.pn-adorder__offer .pc-input{height:var(--control-field);font-size:16px}
.pn-adorder__err{display:flex;align-items:center;gap:6px;margin:var(--space-2) 0 0;padding:10px 14px;border-radius:var(--radius-tile);background:var(--danger-soft);color:var(--ink);font:600 14px/20px var(--font-sans)}
.pn-adorder__err .pc-ico{flex:none;color:var(--danger)}
.pn-ad__cta form .pc-btn .pc-ico{flex:none}
/* polish-b 02.10.: the "Saved to your favourites · See all" toast after a heart on a pair (grid.js): one line, the link
   never wraps. The look is the kit toast. */
.pn-savetoast{gap:var(--space-4);white-space:nowrap}
.pn-savetoast a{flex:none;min-height:32px;display:inline-flex;align-items:center}

/* ==========================================================================
   Premium wall (owner 05.10., pages/premium_wall.php, lib/premium_wall.php): the directory's seller grid for sellers,
   the first card is hers. "You here" = her own portrait dimmed under the pink plus disc, the caption in pink; the whole
   card is the way to the pay site. A Premium seller's own card carries the "You" pill where the heart sits.
   Kit only: the card frame, the pink disc of .pc-scard__prem, the kicker over the page head. No new colour.
   ========================================================================== */
.pn-premwall__count{margin:0;color:var(--ink-2);font:600 14px/1.4 var(--font-sans)}
.pn-apphead__kicker{margin-bottom:6px;color:var(--ink-2)}
.pn-youcard .pc-scard__media > img,.pn-youcard .pc-scard__media > picture > img{opacity:.38;filter:grayscale(.6)}
.pn-youcard .pc-scard__media > .pc-nophoto{opacity:.38}
.pn-youcard__plus{position:absolute;top:50%;left:50%;z-index:4;display:grid;place-items:center;width:72px;height:72px;margin:-52px 0 0 -36px;border-radius:50%;background:var(--pink);color:var(--anthracite);box-shadow:0 0 0 4px var(--scard-glass);line-height:0;transition:transform var(--dur-press)}
.pn-youcard__plus .pc-ico{display:block;width:36px;height:36px;stroke-width:2.6}
.pn-youcard__go{all:unset;cursor:pointer}
.pn-youcard .pc-scard__name{color:var(--pink)}
.pn-youcard .pc-scard__meta{color:var(--scard-ink)}
@media (hover:hover){.pn-youcard:hover .pn-youcard__plus{transform:scale(1.06)}.pn-youcard:hover .pc-scard__media > img,.pn-youcard:hover .pc-scard__media > picture > img{transform:none}}
@media (prefers-reduced-motion:reduce){.pn-youcard__plus{transition:none}}
.pc-scard__you{position:absolute;top:10px;right:10px;z-index:6;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--radius-full);background:var(--pink);color:var(--anthracite);font:700 11px/1 var(--font-display);letter-spacing:0;white-space:nowrap}
@media (max-width:700px){
  .pn-youcard__plus{width:60px;height:60px;margin:-46px 0 0 -30px}.pn-youcard__plus .pc-ico{width:30px;height:30px}
  .pc-scard__you{top:8px;right:8px;min-height:26px;padding:0 9px;font-size:10px}
}
/* pnew page group: seller tools v3 (design/v2/cast-mockup.html, docs/design-v3-system.md §4) — My pairs, the ad editor,
   the seller home and the members-only dead end. This file only PLACES kit components (pc-*, pn-panel, pn-row, ui_*).
   Where a JS-owned element cannot carry a kit class (items.js repaints photo slots, the state label, the preview), the
   kit values are mirrored here from components.css and marked "mirrors". Tokens only.
   Busy buttons, the phone .tile rule, the phone empty head and the tab bar under an open sheet live in the kit
   (components.css / chrome.css). Local: the linked money tile (.pn-shmoney__tile) and the 4:5 upload slot (.pn-slot,
   items.js writes the class). */

/* ---------- Shared: the page toast ---------- */
/* Toast = .pc-toast (chrome pill, line, float shadow), fixed bottom centre; hidden while empty. */
.pn-itoast{position:fixed;left:50%;bottom:calc(var(--toast-low) + env(safe-area-inset-bottom));z-index:var(--z-toast);max-width:calc(100% - 32px);transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .42s var(--ease-pop)}
.pn-itoast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pn-itoast.is-bad{background:var(--danger);color:var(--on-danger)}
.pn-itoast.is-bad a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pn-itoast:empty{display:none}

/* ==========================================================================
   My pairs: app head + pills (ui_apphead / ui_pills), one paper panel of rows (§4.3), empty = ui_empty
   ========================================================================== */
/* polish-s 02.10.: phones read h1 → line → "New listing" → pills (the button no longer splits the h1 from its line). */
@media (max-width:700px){
  .pn-myads .pn-apphead__row{display:contents}
  .pn-myads .pn-apphead > .pc-sub{order:1}
  .pn-myads .pn-apphead__row > .pc-row{order:2;margin-top:10px}
  .pn-myads .pn-apphead > .pc-apphead__tabs{order:3}
  /* UX 01.11. SEL-29: the state pills stay one row that scrolls, with the settings tabs' edge fade (no two-row blob) */
  .pn-myads .pn-adfilter{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-right:28px;-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 36px),transparent)}
  .pn-myads .pn-adfilter > *{flex:none}
}
.pn-adrows{margin:0;padding:0;list-style:none}
/* AD4 03.10.: desktop = two columns of rows, so a seller with 20 listings sees twice as many without scrolling. The
   divider sits on each row's own column; the first row of each column has none. */
@media (min-width:1101px){
  .pn-adrows{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8)}
  .pn-adrows > .pn-adrow:nth-child(2)::before{display:none}
}
.pn-adrow{gap:var(--space-4);min-height:96px}
.pn-adrow:has(a[href].pn-adrow__link:hover){background:var(--sunken)}
.pn-adrow:has(a[href].pn-adrow__link:hover)::before,.pn-adrow:has(a[href].pn-adrow__link:hover) + .pn-adrow::before{opacity:0}
.pn-adrow__link{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-4);align-self:stretch;margin:-10px 0;padding:10px 0;color:inherit;text-decoration:none;border-radius:var(--r-rules)}
a.pn-adrow__link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
a.pn-card-link.pn-adrow__link{display:flex}
/* Thumb: the card photo in small (4:5, 60 x 75), the 1 px line, radius 12; no photo = the care label. */
.pn-adthumb{flex:none;width:60px;height:75px;border-radius:var(--r-icon);border:1px solid var(--line)}
.pn-adthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-adrow .pn-row__main{gap:8px}
/* The title wraps in full (never clipped); the meta row wraps: price, state label, category, "existing ad". */
.pn-adrow .pn-row__main > b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font:600 15px/1.3 var(--font-sans)}
.pn-admeta{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;white-space:normal}
/* owner 02.10.: a draft without a title reads "Untitled draft" in the muted ink (My listings + the editor's resume panel) */
.pn-adrow .pn-row__main > b.pc-muted{color:var(--ink-2);font-weight:500}
.pn-adrow .pn-row__main > .pn-admeta{overflow:visible;text-overflow:clip;white-space:normal}
.pn-admeta > *{flex:none}
.pn-admeta > .pc-badge{flex:0 1 auto;min-width:0;white-space:normal;line-height:1.2;text-align:left}   /* inside tier 06.10.: a long state (fr Sans photo de couverture) wraps inside the row instead of leaving the card */
.pn-adnoprice,.pn-adcat{font:400 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-adcat{flex:0 1 auto}
/* State = the duck label with a dot: live = the live green, paused = muted, draft = pink, reserved = pink, sold = ink. */
.pn-adstate i,.pn-itemstate i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--live)}
.pn-adrow.is-paused .pn-adstate i,.pn-itemstate.is-paused i{background:var(--ink-3)}
.pn-adrow.is-draft .pn-adstate i,.pn-itemstate.is-new i,.pn-itemstate.is-draft i,.pn-adrow.is-reserved .pn-adstate i,.pn-itemstate.is-reserved i{background:var(--pink)}
.pn-adrow.is-sold .pn-adstate i,.pn-itemstate.is-sold i{background:var(--ink)}
.pn-adrow.is-paused .pn-adthumb img,.pn-adrow.is-sold .pn-adthumb img{filter:grayscale(.6);opacity:.55}
.pn-adrow.is-reserved .pn-adthumb img{filter:grayscale(.4)}
.pn-adrow.is-paused .pn-row__main > b,.pn-adrow.is-sold .pn-row__main > b{color:var(--ink-2)}
.pn-adrow__switch{flex:none;margin:0;display:flex}
.pn-adrow__switch .pc-switch::before,.pn-checkpanel .pc-switch::before{content:"";position:absolute;inset:-7px -4px}
.pn-adrow__go{flex:none}
.pn-adrow__lock{color:var(--ink-2)}

/* ==========================================================================
   Ad editor: app head (back pill, h-m, sub, the state label), panels for photos / what / details, the aside
   (checklist or visibility, the preview = the listing card), ui_actionbar() at the end (§4.5)
   ========================================================================== */
.pn-itemstate{display:inline-flex;align-items:center;gap:6px}
/* Body: the .pn-split primitive (app.css): the panels | the aside (checklist, preview), sticky on tall screens. */
.pn-itemnote{align-items:center}
.pn-itemnote a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------- Media: the cover 2 x 2 + 7 photo slots + 1 video slot, all 4:5 upload tiles (radius 20) ---------- */
.pn-photos{position:relative}
.pn-photos.is-error .pn-count{background:var(--danger);color:var(--on-danger)}
.pn-mediagrid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (min-width:701px){.pn-mediagrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:701px){.pn-mediagrid{gap:12px}}
.pn-photo,.pn-slot,.pn-vslot{position:relative;aspect-ratio:4/5;min-width:0;border-radius:var(--r-pcard);overflow:hidden}
.pn-mediagrid > :first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.pn-photo{background:var(--ph-media);border:1px solid var(--line);cursor:grab;touch-action:manipulation;-webkit-touch-callout:none;transition:opacity .15s ease,transform .25s var(--ease-pop),box-shadow .15s ease}
.pn-photo img,.pn-vslot img,.pn-vslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;transition:opacity .15s ease}
.pn-photo form,.pn-vslot form{margin:0}
.pn-photo.is-lifted{z-index:6;cursor:grabbing;pointer-events:none;transition:box-shadow .15s ease;transform:scale(1.04);box-shadow:var(--sh-float)}
.pn-mediagrid.is-sorting .pn-photo:not(.is-lifted){cursor:grabbing}
.pn-mediagrid.is-sorting .pn-photobtn,.pn-mediagrid.is-sorting .pc-remove{opacity:0}
html.pn-nosel,html.pn-nosel *{user-select:none;-webkit-user-select:none}
/* Cover: the black .sticker (+7, the mockup's own tilt), only on the first photo. Scoped: profile.css has a global
   .pn-coverbadge later in the cascade. */
.pn-photo .pn-coverbadge{left:10px;bottom:12px;z-index:3;display:none}
.pn-photo:first-child .pn-coverbadge{display:inline-block}
/* On-photo round controls = the paper circle (like the card's like button); remove = .pc-remove (ink). */
.pn-photobtn{position:absolute;left:6px;bottom:6px;z-index:4;display:grid;place-items:center;width:30px;height:30px;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--anthracite);cursor:pointer;transition:background-color .14s,border-color .14s,opacity .12s}
.pn-photobtn .pc-ico{width:16px;height:16px;stroke-width:2.2}
.pn-photobtn:hover{background:var(--pink);border-color:transparent}
/* A14 (owner 18.10.): the photo keys (turn, swap) are dark glass discs like the remove X, never pale cream on the photo */
.pn-lislot .pn-photobtn{border-color:transparent;background:var(--photo-key-bg);color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pn-lislot .pn-photobtn:hover{background:var(--anthracite)}
.pn-photobtn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-photo:first-child .pn-photobtn,.pn-photo:first-child .pn-photo__cover{display:none}
.pn-photo .pc-remove,.pn-vslot .pc-remove{top:6px;right:6px;transition:opacity .12s}
.pn-photo .pc-remove::after,.pn-vslot .pc-remove::after,.pn-photobtn::after{content:"";position:absolute;inset:-8px}
.pn-photobar{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:none;height:6px;border-radius:var(--radius-full);background:var(--paper);overflow:hidden}
.pn-photobar i{display:block;height:100%;border-radius:inherit;background:var(--pink);transform:scaleX(.04);transform-origin:left;transition:transform .15s linear}
.pn-photo.is-uploading img{opacity:.55}
.pn-photo.is-uploading .pn-photobar,.pn-vslot.is-uploading .pn-photobar{display:block}
.pn-photo.is-uploading .pn-photobtn,.pn-photo.is-uploading .pn-coverbadge,.pn-photo.is-failed .pn-photobtn,.pn-photo.is-failed .pn-coverbadge{display:none}
.pn-photo.is-failed img{opacity:.35;filter:grayscale(1)}
/* Retry: the small ink pill (mirrors .pc-btn--ink.pc-btn--sm, no edge). */
.pn-photoretry{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 calc(14px - .03em) 0 calc(14px + .03em);border:0;border-radius:var(--radius-full);background:var(--btn-ink);color:var(--on-btn-ink);font:700 12px/1 var(--font-display);letter-spacing:0;cursor:pointer;white-space:nowrap}
.pn-photoretry:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-photoretry[hidden]{display:none}   /* QA D1: the pill only shows on a failed upload (it sat on every new photo and blocked dragging) */
/* Empty slots (mirrors .pc-slot, §2.9): paper, 1.5 px dashed line, icon + what the photo could show. The label is one
   line: it breaks between words only (never mid-word, never at a hyphen); the i18n labels are short enough for the
   61 px tile at 360 (item.slot_*). */
.pn-slot,.pn-vslot:not(.has-video):not(.is-uploading){border:1.5px dashed var(--line);background:var(--surface);transition:border-color .14s,background-color .14s}
.pn-slot__in{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:6px;padding:var(--space-2);cursor:pointer;color:var(--ink-2);text-align:center;border-radius:inherit}
.pn-slot__in:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-slot__t{font:600 12px/1.25 var(--font-sans);color:var(--ink-2);overflow-wrap:normal;word-break:normal;hyphens:manual}
.pn-slot__sub{font:400 11px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-slot:hover,.pn-vslot:not(.has-video):not(.is-uploading):hover{border-color:var(--line-3);background:var(--surface)}
.pn-slot:hover .pn-slot__in{color:var(--ink)}
/* The next slot invites like the slot hover (grey dashed line, ink text) on the same paper: no pink fill. The
   cover slot (first) adds the small-caps label and the kit small pink button (.pc-btn--primary.pc-btn--sm). */
.pn-slot.is-next{border-color:var(--line-3)}
.pn-slot.is-next .pn-slot__in{color:var(--ink);gap:10px}
.pn-slot.is-next .pn-slot__t{font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink)}
/* A long "Add photos" (fr/pt) takes a second line in the tile instead of clipping, at every width. */
.pn-slot__btn{white-space:nowrap;text-align:center;pointer-events:none}
/* The slots measure themselves: a narrow cover tile says "Add" (one line, never a 2-line pill), a narrow video slot
   drops the format hint (the file picker still filters by type). */
.pn-slot,.pn-vslot{container-type:inline-size}
.pn-slot__btns{display:none}
@container (max-width:210px){.pn-slot__btnl{display:none}.pn-slot__btns{display:inline}}
@container (max-width:90px){.pn-vslot .pn-slot__sub{display:none}}
/* The button's own 12 px bottom padding + 2 px edge sit under its text: 14 px more on top keeps the text group (icon,
   label, button text) optically centred in the cover slot. */
.pn-mediagrid > .pn-slot.is-next:first-child .pn-slot__in{padding-top:calc(var(--space-2) + 14px)}
.pn-mediagrid > .pn-slot.is-next:not(:first-child) .pn-slot__btn{display:none}
.pn-mediagrid > .pn-slot.is-next:not(:first-child) .pn-slot__t{font:600 12px/1.25 var(--font-sans);letter-spacing:0;text-transform:none}
/* Video slot: poster, the paper play circle, the duration label; while uploading the local clip shows under the bar. */
.pn-vslot{background:var(--ph-media)}
.pn-vslot.has-video,.pn-vslot.is-uploading{border:1px solid var(--line)}
.pn-vslot__play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%)}
.pn-vslot .pn-play{width:40px;height:40px;background:var(--paper);color:var(--anthracite);border:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.pn-vslot .pn-dur{position:absolute;right:6px;bottom:6px;z-index:3;background:var(--paper);color:var(--anthracite);font-variant-numeric:tabular-nums}
.pn-vslot.is-uploading video{opacity:.6}
.pn-vslot__proc{position:absolute;left:8px;right:8px;bottom:24px;z-index:4;padding:5px 6px;border-radius:var(--r-label);background:var(--paper);color:var(--anthracite);font:600 11px/1.3 var(--font-sans);text-align:center}
.pn-vslot__proc:empty{display:none}
.pn-dropcue{position:absolute;inset:0;z-index:5;display:none;place-items:center;border:2px dashed var(--accent);border-radius:inherit;background:var(--accent-soft);font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink);pointer-events:none}
.pn-photos.is-drop .pn-dropcue{display:grid}
.pn-photos > .pn-fielderr{margin:var(--space-3) 0 0;color:var(--danger);text-align:start}
.pn-upforms{display:contents}

/* ---------- Form panels: kit fields (.pc-field / .pc-label / .pc-input / .pc-select), chips = .pc-chip ---------- */
.pn-itemform{gap:var(--section-gap)}
.pn-itemsec{display:grid;gap:var(--space-5);min-width:0}
.pn-itemsec > .pc-sechead{margin-bottom:0}
@media (min-width:561px){.pn-attr[data-attr="form"]{max-width:calc(50% - var(--space-2))}}
.pn-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.pn-counter{font:400 12px/1.3 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-words{transition:color .15s}
.pn-words.is-ok{color:var(--success)}
.pn-itemform .pn-fielderr{margin:0;text-align:start;justify-self:stretch}
.pn-attrs[hidden],.pn-attr[hidden]{display:none}
fieldset.pn-attr{min-width:0;margin:0;padding:0;border:0;display:grid;gap:var(--space-2)}
fieldset.pn-attr legend{float:left;width:100%;padding:0;margin:0 0 var(--space-2)}
.pn-unit{letter-spacing:.06em;color:var(--ink-2)}
/* Price: one field pill (the kit input: paper, 1 px line, focus = ink line + pink-soft ring) holding the currency pills
   (.pc-seg labels, checked = ink) and the number in the price face (Archivo 900 wdth 80). */
.pn-pricebox{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-field);min-width:0;padding:0 6px 0 7px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--field);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.pn-pricebox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pc-field.is-error .pn-pricebox{border-color:var(--danger)}
/* polish r2: one ring only, on the rounded group; the inner number never draws the kit's square error ring. */
.pc-field.is-error .pn-pricebox .pc-input,.pc-field.is-error .pn-pricebox .pc-input:focus{border-color:transparent;box-shadow:none}
.pc-field.is-error .pn-pricebox:focus-within{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.pn-pricebox .pc-input{flex:1;min-width:0;min-height:calc(var(--control-field) - 2px);padding:0 14px 0 4px;border:0;border-radius:0;box-shadow:none;background:transparent;font:700 19px/1 var(--font-display);font-variant-numeric:tabular-nums}
/* UX polish C (23.10., UX-027): the number fills the pill's height (42 on phones, 40 desktop), so the whole pill is the tap target.
   The focus ring stays on the pill (:focus-within above), never on the inner number. */
/* polish-s 02.10.: the hint reads as a hint (body type, muted), never as a price already set */
.pn-pricebox .pc-input::placeholder{font:400 15px/1 var(--font-sans);color:var(--ink-3)}
.pn-pricebox .pc-input:focus{box-shadow:none;border:0;outline:0}
.pn-curseg{flex:none;flex-wrap:nowrap;gap:4px}
.pn-curseg > label{min-width:36px}

/* ---------- Aside: checklist / visibility / lock (rows in a panel), the preview card ---------- */
.pn-checklist{margin:0;padding:0;list-style:none}
.pn-checkpanel > .pc-sechead{margin-bottom:var(--space-2)}
.pn-checkpanel .pn-row{padding-inline:0}
.pn-checkpanel .pn-row + .pn-row::before{left:0;right:0}
.pn-checkrow{min-height:48px}
.pn-checkrow .pn-row__main > b{font-weight:500;white-space:normal}
/* Check: a 24 circle with the line; done = pink with the ink check. */
.pn-checkdot{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid transparent;background:var(--sunken);color:transparent;transition:background-color .2s,border-color .2s,color .2s}
.pn-checkdot .pc-ico{width:14px;height:14px;stroke-width:3}
.pn-checkrow.is-done .pn-checkdot{background:var(--pink);border-color:var(--pink);color:var(--anthracite)}
.pn-checkrow.is-done .pn-row__main > b{color:var(--ink-2)}
.pn-checkpanel .pn-togglerow,.pn-checkpanel .pn-lockrow{min-height:64px;margin:0}
.pn-checkpanel .pn-row__main > span{white-space:normal}
/* Preview = the listing card itself (no sticker, mockup 1:1). */
.pn-prevwrap{display:grid;gap:14px}
.pn-prevhead{display:grid;gap:4px}
.pn-prevhead h2,.pn-prevhead p{margin:0}
.pn-previewcard{pointer-events:none}
.pn-previewcard .pc-media > img[hidden],.pn-previewcard .pc-media > picture > img[hidden],.pn-prevcount[hidden]{display:none}
.pn-previewcard .pc-card__ticket:has(> .pc-price:empty){display:none}   /* no price typed yet: no empty ticket */
.pn-prevfacts{display:none}
.pn-prevtoggle{display:none;border:0}

/* ---------- End of the form: delete (danger line, small), the action bar (ui_actionbar, sticky on phones) ---------- */
.pn-itemdel{display:flex;justify-content:flex-start;margin:0}
.pn-actbar{display:contents}
.pn-itemedit > .pn-actbar > .pc-actionbar,.pn-itemedit .pc-actionbar{margin-top:0}
html:has(.pn-itemedit){scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.pn-itemsheet form{display:grid;margin:0}
.pn-itemsheet .pn-sheet__title{margin-bottom:var(--space-2)}
.pn-itemsheet .pn-sheet__body{margin:0}

/* ---------- Tablet + phone: the aside folds under the form, the preview behind a toggle row ---------- */
@media (max-width:1023px){
  .pn-prevhead{display:none}
  .pn-prevtoggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:72px;padding:18px var(--panel-pad);border:1px solid transparent;border-radius:var(--r-box);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
  .pn-prevtoggle > span{display:grid;gap:6px}
  .pn-prevtoggle b{font:700 var(--fs-section)/var(--lh-head) var(--font-display)}
  .pn-prevtoggle .pc-help{margin:0}
  .pn-prevtoggle .pc-ico{flex:none;transition:transform .25s var(--ease-snap)}
  .pn-prevtoggle[aria-expanded="true"] .pc-ico{transform:scaleY(-1)}
  .pn-prevtoggle:hover{background:var(--surface-2)}
  .pn-prevtoggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
  .pn-prevwrap:not(.is-open) .pn-previewcard{display:none}
  .pn-previewcard{width:min(260px,66%);justify-self:center}
}
@media (max-width:700px){
  .pn-adrow{gap:var(--space-3)}
  .pn-adrow__link{gap:var(--space-3)}
  .pn-adrow__go{display:none}
  .pn-slot__t{font-size:11px}
  .pn-slot:not(.is-next) .pn-slot__in > .pc-ico,.pn-vslot .pn-slot__in > .pc-ico{width:18px;height:18px}
  .pn-vslot .pn-slot__sub{display:none}
  .pn-mediagrid > .pn-slot.is-next:not(:first-child) .pn-slot__t{font-size:11px}
  .pn-slot__btn{padding-inline:12px;font-size:12px}
  /* Editors are a focused task (like the chat): the tabbar steps aside, the action bar is the one bottom bar (IT-04). */
  body:has(.pn-itemedit) .pn-tabbar{display:none}
  body:has(.pn-itemedit){--dock:env(safe-area-inset-bottom)}
  .pn-itemedit .pc-actionbar{gap:8px 10px;padding-top:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .pn-itemedit .pc-actionbar__note{flex-basis:100%;font-size:12px;line-height:1.3}
  .pn-itemedit .pc-actionbar__note:empty{display:none}
  .pn-itoast{bottom:calc(var(--dock) + var(--toast-gap))}
  .pn-itemedit .pn-itoast{bottom:calc(116px + var(--toast-gap) + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  /* My pairs rows: price + state on the first meta line, category + "existing ad" (a tighter badge) on the second,
     the thumb at the top of the row so a two-line title does not leave it floating. */
  .pn-adrow__link{align-items:flex-start}
  .pn-admeta{gap:6px 8px}
  .pn-adlegacy.pc-badge{padding-inline:6px;letter-spacing:0;font-size:11px}   /* UX-022 (23.10.): 11 = the badge size, no text under 11 px */
}
@media (max-width:400px){
  /* 4 columns of 61-69 px tiles: 4 px side padding leaves 50+ px for the one-line label. */
  .pn-mediagrid > .pn-slot:not(:first-child) .pn-slot__in,.pn-vslot .pn-slot__in{padding-inline:4px}
}

/* ==========================================================================
   Seller home: app head, the money box (.pc-box--dk + .pc-tiles of .pc-tile), nudges, buyer panels (§4.3)
   ========================================================================== */
.pn-shmoney{display:grid;gap:18px}
.pn-shmoney > .pc-box__h{margin:0}
/* @member-only */
.pn-shmoney > .pn-shmoney__h2{margin-top:8px;font-size:18px}   /* U22 (owner 18.10.): "Your listings live", the second head */
/* @end-member-only */
/* A grid, not the kit flex wrap: one row of equal tiles on wide screens, 2 x 2 from 1180 px down to 360 px
   (an odd last tile spans the row, so no orphan). */
.pn-shmoney__tiles{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
.pn-shmoney__tiles > li{display:flex;min-width:0}
@media (max-width:1180px){
  .pn-shmoney__tiles{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-shmoney__tiles > li:last-child:nth-child(odd){grid-column:1 / -1}
}
.pn-shmoney__tile{display:flex;flex:1;min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-tile)}
.pn-shmoney__tile > .pc-tile{flex:1;min-width:0;transition:background-color var(--dur-fast)}
.pn-shmoney__tile:hover > .pc-tile{background:var(--chrome-press)}
.pn-shmoney__tile:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.pn-shmoney__tile .pc-tile b{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.pn-shmoney__tile.is-locked .pc-tile small{display:block;margin-top:6px;color:var(--pink)}
.pn-shmoney__note{margin:0;font:400 13px/1.45 var(--font-sans);color:var(--dk-ink-2)}
.pn-shmoney__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.pn-shmoney__act p{margin:0;max-width:420px;font:400 13px/1.45 var(--font-sans);color:var(--dk-ink-2)}
.pn-shnotice{align-items:center}
.pn-sellhome .pn-nudgestack{margin:0}
.pn-sellhome .pn-nudgestack:empty{display:none}
/* Buyer rows (partials/card_buyer.php): the "Make offer" action drops under the name when the row runs out of room, so
   the name and the status line are never cut. */
.pn-sellhome .pn-buyerrow{flex-wrap:wrap;row-gap:10px}
.pn-sellhome a.pn-card-link.pn-row__lead{flex:1 1 200px}
.pn-sellhome .pn-buyerrow .pn-row__main > span{white-space:normal}
/* sellerchrome 02.10.: a capped buyer list ends in its "See all (n)" door, on the rows' inner edge, the line above it. */
.pn-buyerdoor{margin-top:var(--space-3);padding:var(--row-inset)}
@media (max-width:700px){
  /* mockup phone .tile: min-width 0, flex 1 1 140, padding 16, number 40 */
  .pn-shmoney__tiles{gap:12px}
  .pn-shmoney__act .pc-btn{flex:1 1 100%}
  .pn-shmoney__act .pc-btn .pc-ico{display:none}   /* a wrapped label centres on its own; the star stays on wider screens */
  .pn-sellhome .pn-buyerrow__acts{padding-left:64px}   /* under the name: the 52 avatar + the 12 gap */
}
@media (max-width:380px){
  /* AD4 03.10.: two row actions (Premium: write + offer) were 307 px wide at 320 and pushed the page sideways in es /
     it / fr / pt. Under 380 the actions take the row under the buyer at full width and share it. */
  .pn-sellhome .pn-buyerrow__acts{flex:1 1 100%;min-width:0;padding-left:0}
  .pn-sellhome .pn-buyerrow__acts > .pc-btn{flex:1 1 0;min-width:0}
  .pn-shmoney__tiles{gap:10px}
  .pn-shmoney__tile > .pc-tile{padding:14px}
  .pn-shmoney__tile .pc-tile b{font-size:var(--fs-tile,34px)}
}

/* ==========================================================================
   Members only (guests): the level-1 empty card centred in the frame, the quiet ways on under it (§4.7)
   ========================================================================== */
.pn-mo{display:grid;gap:26px;max-width:640px;margin:0 auto}
.pn-mo__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin:0}
/* The dead end's head is the page h1: the h-m role (44 / 32), not the 40 of an in-page empty card. */
.pn-mo .pc-empty h1{font-size:var(--fs-h1)}

@media (prefers-reduced-motion:reduce){
  .pn-itoast,.pn-photo,.pn-photo img,.pn-photobar i,.pn-photobtn,.pn-slot,.pn-checkdot,.pn-prevtoggle .pc-ico,.pn-pricebox,.pn-shmoney__tile > .pc-tile{transition:none}
  .pn-photo.is-lifted{transform:none}
  .pc-btn.is-busy::before{animation-duration:2s}
}
.pn-photo:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}   /* QA D5: photos are keyboard stops (arrows reorder) */

/* ==========================================================================
   Legacy listings (docs/ml-items-03-10.md): My listings + the editor on legacy's rows for a launched seller.
   State dots = legacy's moderation (pnew_li_state): live (green), in review (pink), not approved (danger), no photo (grey).
   Three fixed photo slots (legacy's cover + two more): the cover large on the left, the two more stacked on the right.
   ========================================================================== */
.pn-listate.is-review i,.pn-adrow.is-review .pn-adstate i,.pn-itemstate.is-review i{background:var(--pink)}
.pn-listate.is-rejected i,.pn-adrow.is-rejected .pn-adstate i,.pn-itemstate.is-rejected i{background:var(--danger)}
.pn-listate.is-nophoto i,.pn-adrow.is-nophoto .pn-adstate i,.pn-itemstate.is-nophoto i{background:var(--ink-3)}
.pn-adrow.is-rejected .pn-adthumb img{filter:grayscale(.6);opacity:.55}
.pn-liviews{white-space:nowrap}
.pn-lipager{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:var(--space-4)}
.pn-linote{margin:var(--space-3) 0 0;color:var(--ink-2)}
.pn-lilimit{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* @member-only */
/* U10 (owner 18.10.): the Premium door under the daily limit line — on its own row, the text then the pink key */
.pn-lilimit__prem{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;flex-basis:100%;margin:0;font:600 14px/1.4 var(--font-sans);color:var(--ink)}
p.pn-lilimit__prem{justify-content:center;margin-top:12px}
/* @end-member-only */
/* owner 06.10. ("wirkt schief"): a 3 × 3 grid. The cover takes two columns and two rows and STRETCHES to them (no ratio of
   its own: with one it was shorter than its two rows by exactly the gap); the five more photos fill the other five cells,
   so there is no empty cell either. Same grid on phones. */
.pn-ligrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-ligrid > :first-child{grid-column:1 / span 2;grid-row:1 / span 2;aspect-ratio:auto;height:100%}
/* owner 09.10. ("was die Luft da rechts?"): the 640 px cap left half the panel empty on desktop. Desktop: one row of six
   equal tiles across the full width (the cover keeps its badge); phones keep the 3 × 3 grid with the big cover. */
@media (min-width:701px){
  .pn-ligrid{max-width:none;grid-template-columns:repeat(6,minmax(0,1fr))}
  .pn-ligrid > :first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/5;height:auto}
}
.pn-lislot{position:relative;aspect-ratio:4/5;min-width:0;border-radius:var(--r-pcard);overflow:hidden;border:1.5px dashed var(--line-3);background:var(--surface);container-type:inline-size}
.pn-lislot.has-photo,.pn-lislot.is-picked{border:1px solid var(--line);background:var(--ph-media)}
.pn-lislot__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-lislot.has-photo .pn-lislot__pick,.pn-lislot.is-picked .pn-lislot__pick{display:none}
.pn-lislot .pn-coverbadge{position:absolute;left:10px;bottom:12px;z-index:3;display:none}
.pn-lislot.has-photo .pn-coverbadge,.pn-lislot.is-picked .pn-coverbadge{display:inline-block}
.pn-lislot__swap{display:none}
.pn-lislot.has-photo .pn-lislot__swap,.pn-lislot.is-picked .pn-lislot__swap{display:grid}
.pn-lislot .pc-remove{position:absolute;top:6px;right:6px;z-index:4}
.pn-lislot .pc-remove::after{content:"";position:absolute;inset:-8px}
.pn-lislot.is-picked .pn-lislot__del{display:none}
.pn-lislot__pick .pn-slot__btn{white-space:nowrap}
.pn-lislot:not(:first-child) .pn-lislot__pick .pn-slot__btn{display:none}
.pn-lislot:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-liattrs{display:grid;gap:var(--space-3)}
@media (min-width:701px){.pn-liattrs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-liattrs > [hidden]{display:none}
.pn-linoindex{display:flex;align-items:center;gap:10px;margin-top:var(--space-4);cursor:pointer;font:400 14px/1.4 var(--font-sans);color:var(--ink)}
.pn-lifixed{display:flex;align-items:center;margin:0;background:var(--field);color:var(--ink)}   /* A13 (18.10.): the field's fill, so the chosen category never reads as an empty placeholder */
/* A13 (owner 18.10.): Delete is a quiet text key under the form; the pink Save tops the side column on wide screens */
.pn-lidel{margin:0;padding:var(--space-1) var(--space-2)}
.pn-lidel__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;font:600 14px/1.3 var(--font-sans);color:var(--ink-2);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.pn-lidel__btn:hover{color:var(--danger);text-decoration-color:currentColor}
.pn-lidel__btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-rules)}
.pn-lisave{display:none}
@media (min-width:1000px){
  .pn-lisave{display:block}
  .pn-liedit .pn-actbar > .pc-actionbar{display:none}
  .pn-liedit .pn-split__side{position:sticky;top:var(--sticky-top)}
}
.pn-linoprice{margin:6px 0 0}
.pn-liedit .pn-formrow{align-items:start}
.pn-liedit .pn-formrow > .pc-field{align-content:start}   /* the price help line must not stretch the category field */
.pn-linoprice[hidden]{display:none}
.pn-listate-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;color:var(--ink-2)}
.pn-listatus > p + p{margin-top:var(--space-3)}
.pn-liedit .pn-itemnote[hidden]{display:none}
.pn-lislot__swap{left:auto;right:6px}
.pn-liattrs .pc-select{display:block;width:100%}
.pn-liattrs .pc-select > .pc-input{width:100%}
.pn-lislot [hidden]{display:none}
.pn-lihow{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.pn-lihow li{display:flex;gap:10px;align-items:flex-start;font:400 14px/1.45 var(--font-sans);color:var(--ink)}
.pn-lihow .pc-ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--ink-2)}
.pn-lislot__rot{left:6px;top:6px;bottom:auto}
.pn-lislot.is-picked .pn-lislot__rot{display:none}
.pn-lislot.is-busy::after{content:"";position:absolute;left:50%;top:50%;z-index:5;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:var(--radius-full);border:3px solid var(--ink);border-right-color:transparent;animation:pc-spin .7s linear infinite}
.pn-lislot.is-busy .pn-lislot__pick{opacity:.3}
/* adml 03.10.: Move to top stays on phones as a round icon button (the row's .pn-adrow__go is hidden under 700); the
   Form select fills its cell in the two-column grid; the price select fills the price box (chevron at its edge). */
@media (max-width:700px){.pn-adrow__go.pn-libump{display:inline-grid;place-items:center;width:var(--control-md);height:var(--control-md);min-height:0;padding:0;gap:0;font-size:0;letter-spacing:0;border-radius:50%}}
.pn-liattrs .pn-attr[data-attr="form"]{max-width:none}
.pn-liedit .pn-pricebox > .pc-select{flex:1;min-width:0}
.pn-liedit .pn-pricebox > .pc-select > .pc-input{width:100%;padding-right:44px}
@media (prefers-reduced-motion:reduce){.pn-lislot.is-busy::after{animation-duration:2s}}
/* owner 03.10. ("unruhig und zerfleddert"): the price box is exactly as tall as the category select, its select speaks in
   the field font (no display type for "Choose a price"), and every field error starts flush with its label. */
.pn-liedit .pn-pricebox{height:var(--control-field);min-height:0}
.pn-liedit .pn-pricebox > .pc-select > .pc-input{min-height:0;height:calc(var(--control-field) - 2px);font:400 15px/1.3 var(--font-sans);}
.pn-liedit .pn-curseg > label{min-width:32px}
.pn-liedit .pn-itemform .pn-fielderr{padding:0;font-weight:600}
/* Sleek 08.10.: badges are sentence case; this one's copy starts lowercase ("earlier listing"), so its first letter is set up */
.pc-badge.pn-adlegacy{display:inline-block}
.pc-badge.pn-adlegacy::first-letter{text-transform:uppercase}
/* night N6 08.10.: title ideas + starter text (#46), the price hint (#52), photo tips (#47). Kit chips (pc-chip--sm), the
   50 % line, token-only. The chips wrap their text and keep a 40 px touch height. */
.pn-lisug{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:10px}
.pn-lisug[hidden],.pn-liprice[hidden],.pn-lisug__hint[hidden]{display:none}
.pn-lisug__l{flex-basis:100%;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-lisug .pc-chips{gap:var(--space-2)}
.pn-lisug .pc-chip{min-height:40px;white-space:normal;text-align:left;line-height:1.25}
.pn-lisug .pc-chip .pc-ico{flex:none;width:14px;height:14px}
.pn-lisug__hint{margin:8px 0 0}
.pn-liprice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r-box)}
.pn-liprice__t{display:flex;flex:1 1 220px;gap:var(--space-2);align-items:flex-start;margin:0;font:400 14px/1.45 var(--font-sans);color:var(--ink)}
.pn-liprice__t .pc-ico{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ink-2)}
.pn-liprice .pc-chip{min-height:40px}
.pn-liprice__src{flex-basis:100%;font:400 12px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-litips{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.pn-litips__h{margin:0 0 10px;font:700 13px/1.3 var(--font-sans);color:var(--ink)}
.pn-litips__list li.pn-litips__rule{color:var(--ink-2)}
/* writing help (owner 08.10., package WH, templates/partials/wh_coach.php, assets/js/writehelp.js): the warnings under the
   description and the coach (score ring, meter, one question with chips, Skip, the Top listing checklist). Quiet surfaces,
   1 px lines, no pink key (the editor's Save stays the one). The question box keeps its height so taps never move the page. */
.pn-whw{display:grid;gap:6px;margin-top:10px}
.pn-whw[hidden]{display:none}
.pn-whw__i{margin:0;padding:8px 12px;border:0;background:var(--t-tint);border-radius:var(--r-box);font:500 13px/1.4 var(--font-sans);color:var(--ink)}
.pn-whc{margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r-box)}
.pn-whc__head{display:flex;gap:var(--space-3);align-items:center}
.pn-whc__ring{position:relative;flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--wh-p,0) * 1%),var(--sunken) 0)}
.pn-whc__ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.pn-whc__ring{grid-auto-flow:row;align-content:center;gap:1px}
.pn-whc__ring b{position:relative;font:700 15px/1 var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-whc__of{position:relative;font:600 9px/1 var(--font-sans);color:var(--ink-2);letter-spacing:.02em}   /* A15 (18.10.): the scale under the score */
.pn-whc__meterbox{flex:1;min-width:0}
.pn-whc__h{margin:0 0 4px;font:700 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-whc__meter{margin-top:0}
.pn-whc__meter b{white-space:nowrap}
.pn-whc__n{margin:4px 0 0;font:400 12px/1.35 var(--font-sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pn-whc__line{margin:10px 0 0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-whc__sug{min-height:104px;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
.pn-whc__sug[hidden]{display:none}
.pn-whc__q{margin:0 0 8px;font:600 14px/1.35 var(--font-sans);color:var(--ink)}
.pn-whc__chips{gap:var(--space-2)}
.pn-whc__chips .pc-chip{min-height:40px;white-space:normal;text-align:left;line-height:1.25}
.pn-whc__skip{margin-top:6px;min-height:40px;padding:0 4px;border:0;background:none;color:var(--ink-2);font:600 13px/1 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-whc__skip:hover{color:var(--ink)}
.pn-whc__skip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-whc__done{margin:var(--space-3) 0 0;padding-top:var(--space-3);border-top:1px solid var(--line)}
.pn-whc__done[hidden]{display:none}
.pn-whc__sub{margin:8px 0 0;font-size:12px}
.pn-whtop{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line)}
.pn-whtop__h{margin:0 0 8px;font:700 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-whtop__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pn-whtop__row{display:flex;gap:10px;align-items:flex-start;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-whtop__tick{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:-1px;border:1px solid transparent;border-radius:50%;background:var(--t-tint);color:transparent;transition:background-color var(--dur-fast,.15s),color var(--dur-fast,.15s)}
.pn-whtop__tick .pc-ico{width:12px;height:12px}
.pn-whtop__row.is-ok{color:var(--ink)}
.pn-whtop__row.is-ok .pn-whtop__tick{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pn-whtop__t small{display:block;margin-top:2px;font-size:12px;color:var(--ink-2)}
.pn-whtop__t small[data-wh-topwords]{display:inline;margin:0 0 0 4px;font-variant-numeric:tabular-nums}
.pn-whtop__row.is-ok .pn-whtop__bad{display:none}
.pn-whtop__now{display:flex;gap:8px;align-items:center;margin:12px 0 0;font:600 13px/1.35 var(--font-sans);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity var(--dur-slow,.4s) ease,transform var(--dur-slow,.4s) ease,visibility 0s linear var(--dur-slow,.4s)}
.pn-whtop__now.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pn-whtop__now .pc-ico{width:16px;height:16px;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.pn-whtop__now{transition:none;transform:none}}
/* writing help (08.10.): "Make it stronger" on a short listing in My listings (a quiet chip, 40 px tall; on phones icon only) */
.pn-adrow__boost{flex:none;min-height:40px;gap:6px}
.pn-adrow__boost .pc-ico{width:16px;height:16px}
/* "Do you ship first?" (owner 16.10., lib/sf_ask.php): one card above a new listing's editor */
.pn-sfq{margin-bottom:var(--space-4)}
.pn-sfq__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pn-sfq__ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2,var(--surface));color:var(--ink)}
.pn-sfq__h{margin:0;font:700 17px/1.3 var(--font-sans);color:var(--ink)}
.pn-sfq__p{margin:0 0 6px;color:var(--ink-2)}
.pn-sfq__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-3)}
.pn-sfq__acts form{margin:0}
/* @member-only */
/* night list (owner 18.10., docs/innen-50-*-18-10.md): member pages only — no guest bundle carries this block */
/* A20 (owner 18.10.): a chosen chip in a sheet (filters, My content) is plain to see — ink fill, surface text, a drawn tick;
   the sheet's own surface is only a step away from the resting chips. Premium keeps the page pill's gold there. */
.pn-sheet :is(.pc-chips > .pc-chip:has(> input:checked),.pc-seg > label:has(> input:checked):not(.pc-chip--premium)){background:var(--ink);color:var(--surface)}
.pn-sheet :is(.pc-chips > .pc-chip:has(> input:checked),.pc-seg > label:has(> input:checked))::before{content:"";flex:none;width:9px;height:5px;margin:0 6px 3px 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.pn-sheet .pc-seg > label.pc-chip--premium:has(> input:checked){color:var(--on-prem,var(--anthracite))}
.pn-sheet__head h2[tabindex="-1"]:focus{outline:none}   /* a title that takes the focus on open is no control: no ring */
/* A11 (owner 18.10.): the row's keys sit together (.pn-adrow__acts); on phones they keep their words and wrap under the
   title (a round arrow alone was not understood), and a row's help line ("why nobody sees it") runs under the title too */
.pn-adrow__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;flex:none;max-width:50%}
.pn-adrow:has(> .pc-help){flex-wrap:wrap}
.pn-adrow > .pc-help{flex:1 1 100%;margin:0;padding-left:calc(64px + var(--space-4))}
@media (max-width:700px){
  .pn-adrow:has(> .pn-adrow__acts){flex-wrap:wrap}
  .pn-adrow__acts{flex:1 1 100%;max-width:none;justify-content:flex-start;padding-left:0}
  .pn-adrow > .pc-help{padding-left:0}
  .pn-adrow__acts .pn-adrow__go.pn-libump{display:inline-flex;width:auto;height:auto;min-height:40px;padding:0 14px;gap:6px;font-size:13px;border-radius:var(--radius-full)}
}
/* A12 (owner 18.10., innen-50): on phones a page with a save bar (member-only block: no guest bundle carries it) (.pc-actionbar: profile and listing editors) gives up the
   tab bar, so the two sticky bars never stack (~190 of 844 px hid the review note and the price tip); the bar is one row:
   the state line shrinks beside the key, and the listing editor's Cancel goes (the head's back link does the same). */
@media (max-width:700px){
  body:has(.pc-actionbar) .pn-tabbar{display:none}
  body:has(.pc-actionbar){--dock-flush:env(safe-area-inset-bottom)}
  .pc-actionbar{flex-wrap:nowrap;gap:12px}
  .pc-actionbar > .pc-actionbar__note{flex:1 1 0;min-width:0;margin:0;font-size:12px;line-height:1.35}
  .pc-actionbar > .pc-btn{flex:0 0 auto}
  :is(.pn-itemedit) .pc-actionbar > .pc-btn--line{display:none}
  .pc-actionbar > .pc-actionbar__note:empty{display:none}
  .pc-actionbar > .pc-actionbar__note:empty ~ .pc-btn:not(.pc-btn--line){flex:1 1 auto}
}
/* @end-member-only */
/* pnew page group v3: chats, the thread, offers, orders, alerts (docs/design-v3-system.md §4.1 / §4.3 / §4.4).
   Built only from the kit (components.css, app.css) and the mockup (design/v2/cast-mockup.html). This file places
   the components; the only looks it adds are the chat-specific parts the mockup does not show, each derived from one
   mockup part (named in its comment). Tokens only, no colour literals.
   Surfaces
   - Inbox (every width): the app frame "Your corner": h1 + .sub + the pill tabs (Messages | Orders), a filter row
     (search pill + small paper chips), ONE paper panel of rows, or the .empty card (kraft envelope).
   - Thread: desktop = the chat list card (360) beside the thread card, gap 22 (the mockup .empties rhythm);
     tablet = the thread card alone; phone = the whole screen (no site header, no tab bar, like a native thread).
     Thread card = paper + line: head, the log on duck egg, the composer (or the docked paygate sheet) on paper.
   - In the log: paper bubbles in, pink bubbles out; day labels; status lines = the mockup .chip; order = the dark
     .box / .door--buy card; offer = the pink .door--sell card with the black .sticker.
   - Alerts: the app frame, the dark reach box with the mockup .tile numbers, ONE paper panel of day groups.
   The phone .tile rule, the action menu / toast (chat_ui.js, also settings + member) and the mask token
   (pnew_mask_avatar) are kit parts in components.css. */

/* ==========================================================================
   Shell
   ========================================================================== */
.pn-chatshell{width:100%;min-width:0}
.pn-chatrail{min-width:0}
.pn-chatshell--inbox,.pn-chatshell--inbox.is-orders{max-width:none;margin:0}
.pn-chatshell--thread{flex:1;min-height:0;display:flex;flex-direction:column}
.pn-chatshell--thread > .pn-chatrail{display:none}

/* ==========================================================================
   Page views (Messages | Orders = .tabs-app) and their counters
   ========================================================================== */
.pn-maintabs{flex-wrap:wrap}
/* Orders counter: pink only when an order waits on me; a quiet label when it waits on the other side (CH-13). */
.pn-seg__n.is-quiet{background:var(--sunken);color:var(--ink)}
.pn-maintabs > .is-active .pn-seg__n.is-quiet{background:var(--surface);color:var(--ink)}   /* QA m1: --ink flips with the theme (anthracite was 1.1:1 in dark) */
/* Filter chips (the .tabs-app pill as .pc-chip): the count is the pink pill; archived is only a quiet number. */
.pn-inbox__tabs .pn-seg__n{margin-left:2px}
.pn-inbox__tabs .pn-seg__n[data-count="archived"]{background:var(--sunken);color:var(--ink)}
.pn-inbox__tabs .pc-chip.is-selected .pn-seg__n[data-count="archived"]{background:var(--surface);color:var(--ink)}

/* ==========================================================================
   Paygate strip (free seller): the mockup .box--dk as one line: chrome, the line, the pink lock, the small pink button
   ========================================================================== */
.pn-paystrip{display:flex;align-items:center;gap:14px;min-height:72px;margin:0 0 22px;padding:14px 14px 14px 16px;border-radius:var(--r-tile);border:1px solid transparent;background:var(--chrome);color:var(--on-chrome);text-decoration:none}
.pn-paystrip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-paystrip__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--chrome-tint);color:var(--pink)}
.pn-paystrip__txt{flex:1;min-width:0;display:grid;gap:3px}
.pn-paystrip__txt b{font:700 15px/1.3 var(--font-sans);color:var(--on-chrome)}
.pn-paystrip__txt span{font:400 13px/1.4 var(--font-sans);color:var(--on-chrome-2)}
.pn-paystrip__cta{flex:none;background:var(--accent)}
/* Phones: the pink pill takes its own full-width row under the text (a long es/pt label never spills past the strip). */
@media (max-width:480px){.pn-paystrip{flex-wrap:wrap}.pn-paystrip__txt{flex-basis:calc(100% - 58px)}.pn-paystrip__cta{flex-basis:100%;margin-left:0;justify-content:center;max-width:100%;white-space:normal;text-align:center}}
/* UX polish D (UX-032): inside.css packs the strip into one row with the pill capped at 46 %, so "Answer with Premium"
   broke into two lines at 390 px and three at 320 px (49 / 65 px tall). On phones the pill takes its own full row again,
   one line; the compact strip (small lock, no sub line) stays as inside.css draws it. */
@media (max-width:480px){.pn-chatrail .pn-paystrip{flex-wrap:wrap}.pn-chatrail .pn-paystrip__txt{flex:1 1 calc(100% - 46px)}.pn-chatrail .pn-paystrip__cta{flex:1 1 100%;max-width:none;white-space:nowrap}}

/* ==========================================================================
   Filter row: the search pill (.pc-input with the glass on the left) + the small paper chips
   ========================================================================== */
.pn-inbox__bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 22px}
/* UX polish D (UX-064): without the search (a free seller's masked inbox) the bar is only the ⋯; it sits close to the list
   it filters instead of floating alone between two 22 px gaps. Below the 1024 rail only; the rail keeps its own padding. */
@media (max-width:1023px){.pn-inbox__bar.is-menu:not(:has(> .pn-inbox__search)){margin-bottom:8px}}
.pn-inbox__search{flex:1 1 260px;min-width:0;max-width:420px;margin:0}
.pn-inbox__search .pc-input{padding-left:48px}
.pn-inbox__search .pc-input::-webkit-search-cancel-button{display:none}
.pn-inbox__glass{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.pn-inbox__clear{text-decoration:none}
.pn-inbox__tabs{flex:none}
.pn-inbox__results{margin:0;font:600 13px/18px var(--font-sans);color:var(--ink-2)}

/* ==========================================================================
   Inbox rows (§4.3): one paper panel, avatar + name / time + one line, air between rows (tonal pass 05.10.)
   ========================================================================== */
.pn-chatrail__list{min-width:0}
.pn-chatpick{display:none}
.pn-threads.pn-panel,.pn-orders.pn-panel{padding:var(--list-pad)}
.pn-threadrow{padding:0;min-height:0;align-items:stretch;gap:0}
.pn-threadrow[hidden]{display:none}
/* Clear chats (owner 29.10.): the list's select mode — a check box before each row, a bar under the list */
.pn-inbox__select{margin-inline-start:auto;min-height:var(--tap)}
.pn-inbox__select[aria-pressed="true"]{background:var(--btn-ink);color:var(--on-btn-ink)}
.pn-threadrow__sel{display:flex;align-items:center;justify-content:center;flex:none;min-width:var(--tap);padding-inline-start:var(--row-inset);cursor:pointer}
.is-select .pn-threadrow__more{display:none}
.is-select .pn-threadrow__link{cursor:pointer}
.pn-selbar{position:sticky;bottom:calc(var(--dock, 0px) + var(--space-2));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-block-start:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-box);background:var(--chrome);color:var(--on-chrome);box-shadow:var(--sh-float)}
.pn-selbar[hidden]{display:none}
.pn-selbar__n{flex:1 1 140px;font:600 14px/1.3 var(--font-sans)}
.pn-selbar .pc-chip,.pn-selbar .pc-btn{min-height:var(--tap)}
.pn-selbar .pc-btn--danger{background:var(--surface);color:var(--danger)}
.pn-threadrow:hover,.pn-threadrow.is-held,.pn-threadrow.is-current{background:var(--sunken)}
.pn-threadrow__link{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:74px;padding:12px var(--row-inset);border-radius:inherit;color:inherit;text-decoration:none}
.pn-threadrow__link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-threadrow .pc-avatar__dot{--dot-ring:var(--surface)}
.pn-threadrow:hover .pc-avatar__dot,.pn-threadrow.is-current .pc-avatar__dot{--dot-ring:var(--sunken)}
.pn-threadrow .pn-row__main{gap:3px}
.pn-row__main > .pn-threadrow__top,.pn-row__main > .pn-threadrow__bottom,.pn-row__main > .pn-threadrow__who{display:flex;align-items:center;gap:8px;min-width:0;white-space:normal;overflow:visible;font:inherit;color:inherit}
.pn-row__main > .pn-threadrow__top{align-items:baseline}
/* The name is the one text that may shorten: ellipsis + title attribute. */
.pn-threadrow__top b{flex:1 1 auto;min-width:0;font:600 15px/1.3 var(--font-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-threadrow__top time{flex:none;font:400 12px/16px var(--font-sans);color:var(--ink-2);font-variant-numeric:tabular-nums;transition:opacity var(--dur-fast)}
.pn-threadrow.is-unread .pn-threadrow__top b{font-weight:800}
.pn-threadrow.is-unread .pn-threadrow__top time{color:var(--ink);font-weight:700}
.pn-row__main > .pn-threadrow__who{font:600 12px/16px var(--font-sans);color:var(--ink-2)}
.pn-threadrow__bottom{min-height:20px}
.pn-snippet{flex:1;min-width:0;display:flex;align-items:center;gap:5px;font:400 14px/20px var(--font-sans);color:var(--ink-2)}
/* Snippet = a one-line clamp that breaks words (never a clipped string). */
.pn-snippet__t{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere;word-break:break-word}
.pn-snippet__you{font-weight:600}
.pn-threadrow.is-unread .pn-snippet{color:var(--ink);font-weight:600}
.pn-snippet__ico{flex:none}
.pn-snippet.is-locked .pn-snippet__t{color:var(--ink)}
.pn-snippet.is-locked .pn-snippet__ico{color:var(--accent-text)}
.pn-threadrow__tag{flex:none}
.pn-threadrow .pn-dot{transition:opacity var(--dur-fast)}
/* Row menu: the round icon button floats over the time / dot corner on hover or focus (mouse); touch = long press. */
.pn-threadrow__more{position:absolute;top:50%;right:10px;z-index:1;margin:0;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--dur-fast)}
.pn-threadrow:hover .pn-threadrow__more,.pn-threadrow:focus-within .pn-threadrow__more,.pn-threadrow__more[aria-expanded="true"]{opacity:1;pointer-events:auto}
.pn-threadrow:hover .pn-threadrow__top time,.pn-threadrow:hover .pn-dot,.pn-threadrow:focus-within .pn-threadrow__top time,.pn-threadrow:focus-within .pn-dot{opacity:0}
@media (hover:none){.pn-threadrow__more{display:none}.pn-threadrow:hover .pn-threadrow__top time,.pn-threadrow:hover .pn-dot,.pn-threadrow:focus-within .pn-threadrow__top time,.pn-threadrow:focus-within .pn-dot{opacity:1}}
.pn-threadrow.is-leaving{overflow:hidden;opacity:0;transition:height .2s ease,opacity .15s ease}
.pn-inbox__nohit{margin:0;padding:var(--space-8) var(--space-4);text-align:center;font:400 15px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-inbox__morewrap{margin-top:22px}

/* Ticks (snippet + bubbles): one check sent, two checks read. */
.pn-tick{flex:none;display:inline-flex}
.pn-tick .pc-ico{width:14px;height:14px;vertical-align:0;stroke-width:2.2}
.pn-tick:not(.is-read) .pn-tick__2,.pn-tick.is-read .pn-tick__1{display:none}
.pn-snippet .pn-tick{color:var(--ink-2)}
.pn-snippet .pn-tick.is-read{color:var(--accent-text)}

/* Blurred public faces (membership proof). */
.pc-avatar.is-blur img{filter:blur(6px) saturate(.8);transform:scale(1.15)}
.pc-avatar.is-blur{background:var(--sunken);color:transparent}


/* ==========================================================================
   Orders tab: day-less groups (requested / accepted / shipped / closed) of flat rows in ONE paper panel
   ========================================================================== */
.pn-orders{display:grid;gap:0}
.pn-orders__sum{display:flex;margin:0;padding:12px var(--row-inset) 0}
.pn-orders__sum[hidden]{display:none}
/* The open sum = the pink label (.pc-badge--accent look), set live by chat_inbox.js. */
.pn-orders__sum span{display:inline-flex;align-items:center;min-height:23px;padding:6px 9px;border-radius:var(--r-label);background:var(--accent);color:var(--on-accent);font:600 11px/1 var(--font-label);letter-spacing:0}
.pn-orders__err{margin:0 0 16px}
.pn-ogroup{display:grid}
.pn-ogroup__h.pn-grouplabel{display:flex;align-items:center;gap:8px;margin:0;padding:20px var(--row-inset) 8px}
.pn-ogroup:first-of-type .pn-ogroup__h{padding-top:14px}
/* Group count = the small duck label (app.css .pn-count geometry); chat_inbox.js creates it bare. */
.pn-ogroup__h > [data-n]{display:inline-flex;align-items:center;min-height:21px;padding:5px 8px;border-radius:var(--r-label);background:var(--sunken);color:var(--ink);font:700 11px/1 var(--font-display);letter-spacing:0;font-variant-numeric:tabular-nums}
.pn-orow{position:relative;display:grid;gap:12px;padding:14px var(--row-inset);border-radius:var(--r-rules)}
.pn-orow:hover,.pn-orow.is-current{background:var(--sunken)}
.pn-orow__link{display:flex;gap:14px;align-items:flex-start;min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-icon)}
.pn-orow__link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-orow__img{flex:none;width:56px;height:70px;border-radius:var(--r-icon);border:1px solid var(--line)}
.pn-orow__main{flex:1;min-width:0;display:grid;gap:6px}
.pn-orow__top{display:flex;align-items:baseline;gap:12px;min-width:0}
/* The title has its own class so the price keeps the kit price face (ui_price: Archivo 900, 22). */
.pn-orow__title{flex:1;min-width:0;font:600 15px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-orow__top .pc-price{flex:none}
.pn-orow__price{display:none}
.pn-orow__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;font:400 13px/18px var(--font-sans);color:var(--ink-2)}
.pn-orow__whobox{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.pn-orow__who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
/* The masked buyer line is a message, not a name: it wraps instead of an ellipsis (es/fr/pt at 360). */
.pn-orow__who.pn-maskname{white-space:normal;overflow:visible;text-overflow:clip}
.pn-orow__meta time{flex:none;font-variant-numeric:tabular-nums}
.pn-orow__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-orow .pn-order__actions{margin-left:70px;max-width:440px}
.pn-order.is-busy,.pn-orow.is-busy{opacity:.6;pointer-events:none}
/* Status labels = kit badges (partials pick the modifier): done carries the live dot, closed stays quiet. */
.pn-ostatus--done::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--online)}
.pn-ostatus--closed{color:var(--ink-2)}

/* ==========================================================================
   Thread card: head, the log on duck egg, composer
   ========================================================================== */
body:has(.pn-chatpage){height:100vh;height:100dvh;min-height:0}
body:has(.pn-chatpage) .pn-main{display:flex;flex-direction:column;min-height:0;padding-bottom:var(--space-6)}
.pn-chatpage{position:relative;flex:1;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden}
.pn-chathead{flex:none;position:relative;z-index:3;display:flex;align-items:center;gap:12px;min-height:74px;padding:14px 16px;background:var(--surface)}
.pn-chathead__menu{flex:none;margin:0}
.pn-chatwho{flex:1;min-width:0;min-height:48px;display:flex;align-items:center;gap:12px;padding:4px 14px 4px 4px;border-radius:var(--radius-full);color:inherit;text-decoration:none;transition:background-color var(--dur-fast)}
a.pn-chatwho:hover{background:var(--sunken)}
a.pn-chatwho:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-chatwho .pc-avatar__dot{--dot-ring:var(--surface)}
.pn-chatwho__txt{min-width:0;display:grid;gap:3px}
/* The page h1 is visually hidden (the h1 role size, so the h1 scale stays one); the name shows in the UI title role
   (Inter Tight 700 17) and is the one text that may shorten (ellipsis + title). */
.pn-chathead__h1{font:700 var(--fs-h1)/var(--lh-head) var(--font-display)}
.pn-chatwho__name{display:block;margin:0;font:700 17px/1.25 var(--font-sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-chatwho__sub{font:400 13px/16px var(--font-sans);color:var(--ink-2)}
.pn-chatwho__txt .pc-badge--online{justify-self:start}
.pn-chatwho__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}   /* night N1 #32: Premium badge + online / sub */
.pn-chatwho__txt .pn-masktag{flex-wrap:nowrap;align-items:flex-start}
/* The log: one tone under the card (--canvas: duck-2 in light, the deep ground in dark), so the in-bubbles (--bubble-in),
   the day labels and the order / offer cards stand on it by tone alone (tonal pass 05.10.). */
.pn-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;padding:22px 26px 18px;background:var(--canvas);scroll-padding-bottom:var(--space-4)}
/* UX polish D (UX-006): chat_ui.js sets .is-laying before chat_legacy.js lays the log out (day chips, grouped bubbles,
   the ⋯ keys) and drops it on the next frame, so the bubbles never jump after the first paint. Space and scroll stay. */
.pn-msgs.is-laying{visibility:hidden}
.pn-msgs .pc-day{flex:none;margin:10px 0 4px}
.pn-msgs .pc-day::first-letter{text-transform:uppercase}   /* the day label is sentence case ("today" in the copy) */
.pn-msgs .pc-day:first-child{margin-top:0}
.pn-chatempty{align-self:center;margin:auto 0;padding:var(--space-6);max-width:36ch;text-align:center;font:400 15px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-older{flex:none;align-self:center;margin-bottom:6px}
.pn-older.is-busy{opacity:.6;cursor:progress}
.pn-chaterr{flex:none;margin:10px 16px 0}

/* Messages: bubbles 78 % (max 520), the 6 px corner only at the end of a run. */
.pn-msg{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:none;border-radius:var(--r-pcard);outline:0}
.pn-msg--out{align-items:flex-end}
.pn-msg.is-follow{margin-top:-3px}
.pn-msg.is-switch{margin-top:var(--space-2)}
.pn-msg:focus-visible .pc-bubble{box-shadow:0 0 0 3px var(--focus-ring)}
.pn-msgs .pn-msg .pc-bubble{position:relative;max-width:min(78%,520px);margin:0}
.pn-msg.is-follow .pc-bubble--out{border-top-right-radius:6px}
.pn-msg.is-follow .pc-bubble--in{border-top-left-radius:6px}
.pn-msg.has-follow .pc-bubble--out{border-bottom-right-radius:var(--r-pcard)}
.pn-msg.has-follow .pc-bubble--in{border-bottom-left-radius:var(--r-pcard)}
.pn-msg.has-follow.is-follow .pc-bubble--out{border-bottom-right-radius:6px}
.pn-msg.has-follow.is-follow .pc-bubble--in{border-bottom-left-radius:6px}
.pn-bubble__text{white-space:normal}
.pc-bubble__time{display:flex;align-items:center;justify-content:flex-end;gap:3px;min-height:13px}
/* Clock chips read "3:01 PM", never the tabular "03 : 01" (night CH-22). */
.pn-msgs .pc-bubble__time,.pn-sysline time{font-variant-numeric:normal}
.pc-bubble--out .pn-tick.is-read .pc-ico{stroke-width:2.6}
.pn-msg.is-held .pc-bubble{box-shadow:0 0 0 3px var(--accent-soft)}
.pn-msg.is-busy{opacity:.55}
.pn-msg.is-flash .pc-bubble{animation:pn-flash 1.2s ease}
@keyframes pn-flash{0%,40%{box-shadow:0 0 0 4px var(--accent-soft)}100%{box-shadow:0 0 0 4px transparent}}
.pc-bubble.is-emoji{padding:0 2px;border:0;background:transparent;color:var(--ink);font-size:34px;line-height:42px}
.pc-bubble.is-emoji .pc-bubble__time{color:var(--ink-2);opacity:1}
/* Reply quote: above its bubble, the pink rule on the leading edge (the .tape pink as a 3 px rule). */
.pn-quote{display:flex;align-items:center;gap:var(--space-2);max-width:min(78%,520px);min-height:44px;margin:0 0 -1px;padding:5px 10px 5px 12px;border:0;border-left:0;background:var(--t-tint);border-radius:6px 16px 16px 6px;background:var(--sunken);color:var(--ink-2);font:400 13px/18px var(--font-sans);text-align:left;cursor:pointer}
.pn-msg--out .pn-quote{flex-direction:row-reverse;text-align:right;border-left:0;border-right:0;border-radius:16px 6px 6px 16px;padding:5px 12px 5px 10px}
button.pn-quote:hover{background:var(--surface-2)}
.pn-msg.is-follow > .pn-quote{margin-top:6px}
.pn-quote:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-quote.is-gone{cursor:default;border-color:var(--line)}
.pn-quote__txt{min-width:0;display:grid}
.pn-quote__txt b{font:700 12px/16px var(--font-sans);color:var(--ink)}
.pn-quote__txt span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-quote__img{flex:none;width:36px;height:36px;border-radius:10px;object-fit:cover}
/* Tombstone: neutral on both sides, a dashed line (the .rules box), no brand surface for something that is gone. */
.pn-msgs .pn-msg.is-deleted .pc-bubble{background:transparent;color:var(--ink-2);border:1px dashed var(--line)}
.pn-tomb{display:inline-flex;align-items:center;gap:6px;font:600 14px/1.35 var(--font-sans)}
/* Photos: single + mosaic (2 side by side, 3 = one tall + two, 4+ = 2x2 with "+N"). Fixed boxes, nothing jumps. */
.pn-msgs .pc-bubble.has-photos{padding:4px}
.pn-msgs .pc-bubble.has-photos .pn-bubble__text{padding:6px 10px 0}
.pn-msgs .pc-bubble.has-photos > .pc-bubble__time{padding:0 10px 4px}
.pn-msgs .pc-bubble.is-photo-only{padding:0;border:0;background:transparent}
.pn-msgs .pc-bubble.is-photo-only > .pc-bubble__time{position:absolute;right:10px;bottom:10px;margin:0;padding:4px 9px;border-radius:var(--radius-full);background:var(--chrome);color:var(--on-chrome);opacity:1}
.pn-mosaic{display:grid;gap:2px;width:min(264px,62vw);border-radius:16px;overflow:hidden;background:var(--sunken)}
.is-photo-only > .pn-mosaic{border-radius:var(--r-pcard)}
.pn-mosaic--1{aspect-ratio:4/5}
.pn-mosaic--2{grid-template-columns:1fr 1fr;aspect-ratio:3/2}
.pn-mosaic--3{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.pn-mosaic--3 .pn-mosaic__c:first-child{grid-row:span 2}
.pn-mosaic--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1}
.pn-mosaic__c{position:relative;display:block;min-width:0;min-height:0;padding:0;border:0;background:var(--ph-media);cursor:zoom-in;overflow:hidden}
.pn-mosaic__c img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-mosaic__c.is-broken{cursor:default}
.pn-mosaic__c.is-broken img{visibility:hidden}
.pn-mosaic__c:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-mosaic__more{position:absolute;inset:0;display:grid;place-items:center;background:var(--glass-strong);color:var(--on-chrome);font:700 22px/1 var(--font-display);}

/* Item reference = the mockup .pcard as a row: paper, the line, radius 20; photo, the small label, title, price. */
.pn-msg--card{align-items:center;margin:var(--space-1) 0}
.pn-msg--out.pn-msg--card{align-items:flex-end}
.pn-msg--in.pn-msg--card{align-items:flex-start}
.pn-msg--ad{margin:var(--space-1) 0}
.pn-adcard{display:flex;align-items:center;gap:14px;width:min(84%,400px);min-height:84px;padding:10px 14px 10px 10px;border-radius:var(--r-pcard);border:1px solid transparent;background:var(--bubble-in);color:var(--ink);text-decoration:none;transition:background-color var(--dur-fast)}
a.pn-adcard:hover{background:var(--surface-2)}
a.pn-adcard:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-adcard__img{flex:none;width:52px;height:65px;border-radius:var(--r-icon)}
.pn-adcard__img img{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-adcard__txt{flex:1;min-width:0;display:grid;gap:4px}
.pn-adcard__txt b{font:600 14px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-adcard__txt > span{font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-adcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.pn-adcard.is-gone{justify-content:center;text-align:center;min-height:0;padding:12px 16px;border-style:dashed}
.pn-adcard__time{padding:0 4px;font:600 10.5px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-adcard__time .pn-tick.is-read{color:var(--accent-text)}

/* Hover "more" next to the bubble (mouse only; touch uses long press). */
.pn-msg__more{position:absolute;top:50%;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:50%;background:var(--bubble-in);color:var(--ink);cursor:pointer;opacity:0;transform:translateY(-50%);transition:opacity var(--dur-fast)}
/* @member-only */
.pn-msg__more::after{content:"";position:absolute;inset:-6px;border-radius:50%}   /* UX polish D (UX-003): the 32 px key keeps its look, the finger gets 44 */
/* @end-member-only */
.pc-bubble--out > .pn-msg__more{right:calc(100% + 6px)}
.pc-bubble--in > .pn-msg__more{left:calc(100% + 6px)}
.pn-msg:hover .pn-msg__more,.pn-msg:focus-within .pn-msg__more,.pn-msg.is-held .pn-msg__more{opacity:1}
/* Optimistic send */
.pn-msg.is-pending .pc-bubble{opacity:.72}
.pn-msg.is-failed .pc-bubble{opacity:1;box-shadow:0 0 0 2px var(--danger)}
.pn-failed{display:inline-flex;align-items:center;gap:4px;font:700 12px/16px var(--font-sans);color:var(--danger)}
.pn-failed[hidden]{display:none}
.pn-failed button{min-height:44px;padding:0 6px;border:0;background:transparent;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
/* New messages: the chrome pill (the toast family), placed by chat_thread.js above the composer. */
.pn-newpill{position:absolute;left:50%;bottom:96px;z-index:5;min-height:40px;padding:0 18px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--chrome);color:var(--on-chrome);font:700 13px/1 var(--font-sans);box-shadow:var(--sh-float);transform:translateX(-50%);cursor:pointer}
.pn-newpill[hidden]{display:none}

/* Status lines (system messages) = the mockup .chip geometry (700 12, 8/12, the line) on the surface role, centred. */
.pn-msg--sys{align-items:center;margin:2px 0}
.pn-sysline{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;max-width:92%;min-height:30px;margin:0;padding:7px 12px;border-radius:var(--radius-full);border:1px solid transparent;background:var(--bubble-in);color:var(--ink);font:700 12px/16px var(--font-sans);text-align:center}
.pn-sysline .pc-ico{flex:none;width:14px;height:14px;stroke-width:2.2}
.pn-sysline time{flex:none;white-space:nowrap;font-weight:500;color:var(--ink-2)}
.pn-sysline time:not(:empty)::before{content:"· "}

/* Locked bubble (free seller): the paper bubble with neutral glyphs under a blur and the ink lock; the hint above,
   the link line (the .pbox link) under it. The filler never carries the real text; the whole bubble is the link. */
.pn-msgs .pn-lockbubble{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hint hint" "bub bub" "cta time";column-gap:10px;row-gap:8px;width:min(78%,360px);max-width:none;padding:12px 14px 10px;color:var(--ink);text-decoration:none}
.pn-lockbubble__hint{grid-area:hint;display:flex;align-items:center;gap:6px;font:700 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-lockbubble__hint .pc-ico{flex:none;width:14px;height:14px;stroke-width:2.4}
.pn-lockbubble__blur{grid-area:bub;display:block;max-height:84px;overflow:hidden;padding:10px 12px;border-radius:var(--r-icon);background:var(--sunken);color:var(--ink-2);font:400 15px/1.4 var(--font-sans);overflow-wrap:anywhere;filter:blur(3px);user-select:none}
.pn-lockbubble__lk{grid-area:bub;place-self:center;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--prem-bg);color:var(--pink);box-shadow:0 0 0 1px var(--prem-ring)}
.pn-lockbubble__lk .pc-ico{width:16px;height:16px;stroke-width:2.6}
.pn-lockbubble__cta{grid-area:cta;align-self:center;font:700 14px/1.3 var(--font-sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-msgs .pn-lockbubble > .pc-bubble__time{grid-area:time;align-self:center;margin:0}
.pn-lockbubble:hover .pn-lockbubble__cta{text-decoration-color:var(--ink)}
.pn-lockbubble:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
/* N7 #94 safety line; #3 preview (switch paygate_preview) */
.pn-safeline{display:flex;align-items:center;gap:8px;margin:0 auto 14px;max-width:560px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:var(--r-icon);font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-safeline>.pc-ico{flex:none;color:var(--ink)}
.pn-safeline__t{flex:1}
.pn-safeline a{color:var(--ink);text-decoration:underline}
.pn-safeline__x .pc-ico{width:16px;height:16px}
/* owner 12.10.: "Sold to him? Mark it" above the seller's composer once the thread looks like a sale */
.pn-dealhint{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 6px 6px 12px;border-radius:var(--r-icon);background:var(--t-tint);font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-dealhint[hidden]{display:none}
.pn-dealhint>.pc-ico{flex:none;color:var(--ink)}
.pn-dealhint__t{flex:1;min-width:0}
.pn-dealhint__go{flex:none}
.pn-dealhint__x .pc-ico{width:16px;height:16px}
.is-pv{filter:none}
.pn-lockbubble__pv{color:var(--ink)}
.pn-lockbubble__rest{filter:blur(3px)}
.is-pv+.pn-lockbubble__lk{place-self:center end;margin-right:10px}
/* @member-only */
/* A3 (owner 18.10., docs/innen-50-ad-18-10.md): the sealed letter — who wrote, how long it is, her listing under it, and on
   the newest one the view's pink key right below; the paybar is then only its echo (chat_legacy.js shows it once the key
   scrolls away). The messages sit at the bottom of the thread, so no empty screen lies between the letter and the key. */
.pn-msgs .pn-lockbubble.pn-sealed{grid-template-areas:"hint hint" "bub bub" "len time" "cta cta"}
.pn-sealed__len{grid-area:len;align-self:center;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-msg.is-locked .pn-lccard{width:min(78%,360px)}
.pn-lockkey{display:grid;gap:8px;width:min(78%,360px);margin-top:6px}
.pn-lockkey__t{margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-msgs:has(.pn-lockkey) > :first-child{margin-top:auto}
.pn-paybar.is-echo:not(.is-shown){display:none}
.pn-chatpage:has(> .pn-paybar.is-echo)::after{content:none}
@media (max-width:700px){.pn-lockkey,.pn-msg.is-locked .pn-lccard,.pn-msgs .pn-lockbubble.pn-sealed{width:100%}}
/* @end-member-only */

/* ==========================================================================
   Order card in the log = the mockup dark box (.box--dk / .door--buy): anthracite, the line, radius 24, 22.
   Status label, the item, the pink price (.tile b), the 4-step timeline (the .strip bar: done = pink), the note,
   the pink next step + line-dk buttons (the dark door's pink button).
   ========================================================================== */
.pn-msg--order{align-items:stretch;margin:8px 0}
.pn-order{width:min(100%,460px);align-self:center;display:grid;gap:14px;padding:22px;border-radius:var(--r-box);border:1px solid transparent;background:var(--dkbox);color:var(--dk-ink);scroll-margin:96px}
.pn-order:target{animation:pn-flash 1.6s ease}
.pn-order__over{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-width:0;font:600 12px/16px var(--font-sans);color:var(--dk-ink-2)}
.pn-order__meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-width:0}
.pn-order__id{flex:none;font-variant-numeric:tabular-nums}
.pn-order__role + .pn-order__id::before{content:"· "}
.pn-order__head{display:flex;gap:14px;align-items:center;min-width:0}
.pn-order__imglink{flex:none;display:block;border-radius:var(--r-icon)}
.pn-order__img{flex:none;width:64px;height:80px;border-radius:var(--r-icon)}
/* Order photo over the care label: a photo that cannot load leaves the label (night CH-11). */
.pn-snap{position:relative}
.pn-snap img{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:cover;object-position:50% 35%;color:transparent}
.pn-order__txt{flex:1;min-width:0;display:grid;gap:8px}
.pn-order__title{font:700 16px/1.3 var(--font-sans);color:var(--dk-ink);text-decoration:none;overflow-wrap:anywhere}
a.pn-order__title:hover{text-decoration:underline}
.pn-order .pn-order__price{color:var(--pink)}
.pn-order__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font:400 13px/1.4 var(--font-sans);color:var(--dk-ink-2)}
.pn-order__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.pn-order__track li{display:grid;gap:8px;min-width:0;font:600 11px/1.25 var(--font-sans);color:var(--dk-ink-2);overflow-wrap:anywhere;hyphens:auto}
.pn-order__track li::before{content:"";height:6px;border-radius:3px;background:var(--chrome-tint)}
.pn-order__track li.is-done::before{background:var(--pink)}
.pn-order__track li.is-done{color:var(--dk-ink)}
.pn-order__track li.is-now{font-weight:800}
.pn-order__note{margin:0;padding:12px 14px;border-radius:var(--r-rules);background:var(--dkbox-tile);border:1px solid transparent;font:400 14px/1.45 var(--font-sans);color:var(--dk-ink);white-space:pre-line;overflow-wrap:anywhere}
.pn-order__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pn-order__actions.is-single{grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){.pn-order__actions.is-long{grid-template-columns:minmax(0,1fr)}.pn-order__actions.is-long > .is-next{order:-1}}
.pn-order__actions form{margin:0;display:grid}
/* polish-b 02.10.: nothing to do but wait (only Cancel / Decline for this viewer): one small line button at the start. */
.pn-order__actions.is-quiet{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
.pn-order__actions.is-quiet form{display:block}
.pn-order > .pn-order__actions{padding-bottom:6px}
.pn-order__pay{margin:0;font:400 12px/1.4 var(--font-sans);color:var(--dk-ink-2)}
.pn-order__gate{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-radius:var(--r-rules);border:1px solid transparent;background:var(--dkbox-tile);font:600 13px/1.4 var(--font-sans);color:var(--dk-ink)}
.pn-order__gate .pc-ico{flex:none;width:14px;height:14px;color:var(--pink);stroke-width:2.4}
/* Seller cancel without JS: the reason travels with the form. */
.pn-order__why{margin:0 0 var(--space-2)}
.pn-order .pn-order__why .pc-label{color:var(--dk-ink)}

/* ==========================================================================
   Offer card in the log = the mockup pink door (.door--sell): pink, the line, radius 24, 22; the black sticker
   (+7deg, mockup .sticker--black) on the photo; ink label, title, the Archivo price; the seller's note on cream;
   the buyer's ink Accept + line Decline (the pink door's ink button). Declined / expired fall back to paper.
   ========================================================================== */
.pn-msg--offer{align-items:stretch;margin:8px 0}
.pn-offer{width:min(100%,440px);align-self:center;display:grid;gap:14px;padding:22px;border-radius:var(--r-box);border:1px solid transparent;background:var(--accent);color:var(--anthracite);scroll-margin:96px}
/* On pink the ink is always anthracite (the mockup .on-pink rule), also in dark. */
/* On the pink card the grey (--muted-lt) is only 3.6:1: secondary text is anthracite too (about 10:1), set apart by size. */
.pn-offer:is(.is-open,.is-accepted){--ink:var(--anthracite);--ink-2:var(--anthracite);--focus-ring:var(--anthracite)}
.pn-offer:target{animation:pn-flash 1.6s ease}
.pn-offer__head{display:flex;gap:16px;align-items:center;min-width:0}
.pn-offer__media{position:relative;flex:none;padding:0 0 8px 8px}
.pn-offer__imglink{display:block;border-radius:var(--r-icon)}
.pn-offer__img{display:block;width:64px;height:80px;border-radius:var(--r-icon);border:1px solid var(--line)}
.pn-offer__sticker{position:absolute;left:0;bottom:0;z-index:4;padding:6px 9px;font-size:10px}
.pn-offer__txt{flex:1;min-width:0;display:grid;gap:8px}
.pn-offer__over{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0;font:600 12px/16px var(--font-sans);color:var(--ink-2)}
.pn-offer .pn-offer__tag{background:var(--anthracite);color:var(--white)}
.pn-offer__title{font:700 16px/1.3 var(--font-sans);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.pn-offer__title:hover{text-decoration:underline}
.pn-offer .pn-offer__price{color:var(--ink)}
.pn-offer__note{margin:0;padding:12px 14px;border-radius:var(--r-rules);background:var(--cream);color:var(--anthracite);font:400 14px/1.45 var(--font-sans);white-space:pre-line;overflow-wrap:anywhere}
.pn-offer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-offer__link{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pn-offer__actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;padding-bottom:6px}
.pn-offer__form{margin:0;display:grid;min-width:0}
.pn-offer__form .pc-btn{min-width:0;padding-inline:12px}
.pn-offer__fine{margin:0;font:400 12px/1.4 var(--font-sans);color:var(--ink-2)}
/* T41: small print on the pink card is anthracite (muted grey on pink fails AA). */
.pn-offer:is(.is-open,.is-accepted) :is(.pn-offer__who,.pn-offer__fine){color:var(--anthracite)}
.pn-offer.is-declined,.pn-offer.is-expired{background:var(--surface);color:var(--ink)}
.pn-offer.is-declined .pn-offer__tag,.pn-offer.is-expired .pn-offer__tag{background:var(--sunken);color:var(--ink-2)}
.pn-offer.is-declined .pn-offer__note,.pn-offer.is-expired .pn-offer__note{background:var(--sunken);color:var(--ink)}
.pn-offer.is-busy{opacity:.6;pointer-events:none}

/* ==========================================================================
   Free seller's reply bar = the docked paygate sheet (kit .pn-sheet.is-docked): the real count lines, the sheet
   head, the Premium pink button + the line "Send an item" with its item list (a floating paper menu).
   ========================================================================== */
.pn-chatpage:has(> .pn-paybar)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--shade-paygate)}
.pn-chatpage:has(> .pn-paybar) .pn-msgs{padding-bottom:calc(var(--space-4) + 18px)}
.pn-paybar.pn-sheet{position:relative;z-index:2;flex:none;display:block;margin:-18px 0 0;padding:10px 22px 22px}
.pn-paybar__top{display:flex;align-items:center;gap:12px;margin-bottom:12px;font:600 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-faces:empty{display:none}
.pn-paybar__lk{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--prem-bg);color:var(--pink);box-shadow:0 0 0 1px var(--prem-ring)}
.pn-paybar__lk .pc-ico{width:16px;height:16px;stroke-width:2.6}
.pn-paybar__txt{min-width:0}
.pn-paybar .pn-paybar__h{margin:0 0 18px}
/* The grab handle is a real button (tap = open / fold the sheet on phones); its hit area is larger than the bar. */
.pn-paybar__grab{position:relative;padding:0;border:0;cursor:pointer}
.pn-paybar__grab::before{content:"";position:absolute;inset:-14px -40px -10px}
.pn-paybar__grab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:6px}
@media (min-width:701px){.pn-paybar__grab{display:none}.pn-paybar.pn-sheet{padding-top:22px}}
/* @member-only */
/* A3 (owner 18.10.): on a desktop the heading comes first, then the line under it (it read the other way round) */
@media (min-width:701px){.pn-paybar.pn-sheet{display:flex;flex-direction:column}.pn-paybar .pn-paybar__h{order:-1;margin:0 0 8px}.pn-paybar__top{margin-bottom:16px}}
/* @end-member-only */

.pn-paybar__acts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding-bottom:6px}
.pn-paybar__acts > .pc-btn{min-width:0}
.pn-senditem{position:relative}
.pn-senditem > summary{list-style:none;cursor:pointer}
.pn-senditem > summary::-webkit-details-marker{display:none}
.pn-senditem__list{position:absolute;right:0;bottom:calc(100% + 8px);z-index:var(--z-bar);display:grid;gap:2px;width:min(320px,calc(100vw - 24px));max-height:min(360px,60vh);overflow-y:auto;padding:8px;border-radius:var(--r-rules);border:0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-float)}
.pn-senditem__h{margin:0;padding:8px 10px 6px}
.pn-senditem__list form{margin:0}
.pn-senditem__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:8px 12px;border:0;border-radius:var(--r-icon);background:transparent;color:var(--ink);font:600 14px/1.3 var(--font-sans);text-align:left;cursor:pointer}
.pn-senditem__btn span{min-width:0;overflow-wrap:anywhere}
.pn-senditem__btn .pc-ico{flex:none;color:var(--ink-2)}
.pn-senditem__btn:hover,.pn-senditem__btn:focus-visible{background:var(--sunken);outline:0}
.pn-senditem__h{font:600 11px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}

/* ==========================================================================
   Composer: paper with the line on top; round attach (the 44 line control), the pill field, the pink send circle
   ========================================================================== */
.pn-composer{position:relative;z-index:2;flex:none;display:grid;gap:var(--space-2);padding:12px 16px 14px;background:var(--surface)}
.pn-composer.is-locked{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:16px;text-align:center;color:var(--ink-2);font:600 14px/20px var(--font-sans)}
.pn-composer.is-locked .pc-ico{flex:none}
.pn-composer__row{display:flex;align-items:flex-end;gap:10px}
.pn-composer textarea.pc-input{flex:1;height:44px;min-height:44px;max-height:140px;padding:11px 18px;border-radius:22px;resize:none;font:400 15px/22px var(--font-sans);overflow-y:auto}
.pn-composer .pc-iconbtn{width:44px;height:44px}
.pn-attach{cursor:pointer}
.pn-attach:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-composer .pn-send .pc-ico{stroke-width:2.4}
.pn-composer__reply{display:flex;align-items:center;gap:var(--space-3);padding:6px 6px 6px 12px;border-left:0;background:var(--t-tint);border-radius:6px 16px 16px 6px;background:var(--sunken)}
.pn-composer__reply[hidden],.pn-composer__tray[hidden]{display:none}
.pn-composer__replytxt{flex:1;min-width:0;display:grid;font:400 13px/18px var(--font-sans);color:var(--ink-2)}
.pn-composer__replytxt b{font:700 12px/16px var(--font-sans);color:var(--ink)}
.pn-composer__replytxt span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-composer__reply img{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover}
.pn-composer .pc-remove::after{content:"";position:absolute;inset:-8px;border-radius:var(--radius-full)}
.pn-composer__x.pc-remove{position:relative;top:auto;right:auto;margin:0 8px}
.pn-composer__tray{display:flex;gap:var(--space-2);overflow-x:auto;padding:6px 2px 2px;scrollbar-width:none}
.pn-tray__c{position:relative;flex:none;width:72px;height:72px;border-radius:var(--r-icon);overflow:visible}
.pn-tray__c img{width:100%;height:100%;border-radius:var(--r-icon);object-fit:cover;background:var(--sunken)}
.pn-tray__c .pc-remove{top:-6px;right:-6px}

/* Lightbox: the chrome backdrop, the chrome icon squares (the burger square). */
.pn-lightbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--backdrop);color:var(--on-chrome)}
.pn-lightbox::backdrop{background:var(--backdrop)}
.pn-lightbox[open]{display:grid;place-items:center}
.pn-lightbox img{max-width:min(94vw,1400px);max-height:86vh;max-height:86dvh;object-fit:contain;border-radius:var(--r-icon)}
.pn-lightbox__btn{position:absolute;width:48px;height:48px;background:var(--chrome)}
.pn-lightbox__close{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.pn-lightbox__prev{left:max(16px,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
.pn-lightbox__next{right:max(16px,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}
.pn-lightbox.is-single .pn-lightbox__prev,.pn-lightbox.is-single .pn-lightbox__next{display:none}
.pn-lightbox__n{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);font:700 13px/16px var(--font-sans);font-variant-numeric:tabular-nums}

/* Toast position on the chat pages (the menu, sheet and toast themselves are kit: components.css). */
body:has(.pn-chatpage) .pn-toast{bottom:calc(84px + var(--toast-gap) + env(safe-area-inset-bottom))}
@media (max-width:700px){body:has(.pn-inbox):not(:has(.pn-chatpage)) .pn-toast{bottom:calc(var(--dock) + var(--toast-gap))}}

/* ==========================================================================
   Alerts (§4.3): the app frame, the dark reach box with the mockup .tile numbers, ONE paper panel of day groups
   ========================================================================== */
.pn-reach__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.pn-reach__head .pc-box__h{margin:0}
/* The reach tiles share the dark box evenly in one row (any count), instead of the kit's 230 px flex wrap. */
.pn-reach__tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;margin-top:18px}
.pn-reach__tiles > .pc-tile{min-width:0}
@media (max-width:420px){
  .pn-reach__tiles{gap:8px}
  .pn-reach__tiles > .pc-tile{padding:12px}
  .pn-reach__tiles > .pc-tile b{font-size:var(--fs-tile,32px)}
  .pn-reach__tiles > .pc-tile p{margin-top:4px;font-size:12px;line-height:1.3}
}
.pn-alertlist.pn-panel{padding:var(--list-pad)}
/* Nothing visible in this filter: the panel steps back, the .empty card (#pnAlertsNone) takes its place. */
.pn-alertlist:not(:has([data-alert-group]:not([hidden]))){display:none}
.pn-alertgroup[hidden],.pn-alertlist .pn-alert[hidden]{display:none}
.pn-alertgroup .pn-grouplabel{margin:0;padding:20px var(--row-inset) 6px}
.pn-alertgroup:first-child .pn-grouplabel{padding-top:var(--row-inset)}
.pn-alertgroup:not([hidden]) ~ .pn-alertgroup:not([hidden]){position:relative;margin-top:10px}
.pn-alert{gap:14px;min-height:70px;padding:12px var(--row-inset)}
.pn-alert .pn-row__main{gap:4px}
.pn-row__main > .pn-al__txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;font:400 14px/1.4 var(--font-sans);color:var(--ink)}
.pn-al__txt b{font-weight:700}
.pn-alert.is-unread .pn-row__main > .pn-al__txt{font-weight:600}
.pn-row__main > .pn-al__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;white-space:normal;overflow:visible;font:400 13px/18px var(--font-sans);color:var(--ink-2)}
.pn-al__who{flex:none;display:inline-flex;align-items:center}
.pn-al__who .pc-avatar{box-shadow:0 0 0 2px var(--surface)}
.pn-al__who.is-stack .pc-avatar + .pc-avatar{margin-left:-7px}
.pn-al__snip{flex:0 1 auto;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;overflow-wrap:anywhere}
.pn-al__meta time{flex:none;font-variant-numeric:tabular-nums}
.pn-alert.is-unread .pn-al__meta time{color:var(--ink);font-weight:700}
.pn-al__thumb{flex:none;width:44px;height:55px;border-radius:var(--r-icon);border:1px solid var(--line)}
.pn-alertsnone[hidden]{display:none}

/* ==========================================================================
   Tablet + desktop
   ========================================================================== */
@media (min-width:701px){
  .pn-chatpage{border-radius:var(--r-box)}
}
/* Desktop: the chat list card (360) beside the thread card, gap 22. */
@media (min-width:1024px){
  .pn-chatshell--thread{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--app-gap)}
  .pn-chatshell--thread > .pn-chatrail{display:flex}
  .pn-chatrail.is-rail{flex-direction:column;min-height:0;padding:0;overflow:hidden}
  .is-rail .pn-chatrail__head{flex:none;display:grid;gap:16px;padding:var(--panel-pad) var(--panel-pad) 16px}
  .is-rail .pn-chatrail__title{margin:0}
  .is-rail .pn-paystrip{margin:0 var(--panel-pad) 14px}
  /* UX 21.10. UX5S-065: the inbox rail (360 px) keeps the strip's key — it was hidden, so on a laptop the pay strip was only text */
  .is-rail .pn-paystrip{flex-wrap:wrap}
  .is-rail .pn-paystrip__txt{flex-basis:calc(100% - 58px)}
  .is-rail .pn-paystrip__cta{flex-basis:100%;justify-content:center;margin-left:0}
  .is-rail .pn-inbox__bar{display:grid;gap:12px;margin:0;padding:0 var(--panel-pad) 14px}
  .is-rail .pn-inbox__search{max-width:none}
  .is-rail .pn-chatrail__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--list-pad) var(--list-pad);scrollbar-width:thin}
  .is-rail .pn-threads.pn-panel,.is-rail .pn-orders.pn-panel{padding:8px 0 0}
  .is-rail .pn-orow .pn-order__actions{margin-left:0}
  .is-rail .pn-inbox__morewrap{margin-top:8px}
  .is-split .pn-chathead__back{display:none}
  /* polish r4: the messages inbox keeps the thread page's shape: the list as the 360 rail card (its page h1 in the
     rail head), the "pick a conversation" card beside it at the rail's height (content near its top). */
  .pn-chatshell--inbox.is-msgsplit{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--app-gap);align-items:stretch}
  .pn-chatrail.is-inboxrail{display:flex;background:var(--surface);border:1px solid transparent;border-radius:var(--r-box)}
  .is-inboxrail > .pn-apphead{flex:none;gap:16px;margin:0;padding:var(--panel-pad) var(--panel-pad) 16px;min-height:0}
  .is-inboxrail .pc-apphead__tabs,.is-inboxrail > .pc-band .pc-apphead__tabs{margin:0}
  .is-inboxrail > .pc-band::before,.is-inboxrail > .pc-band::after{content:none}   /* inside the rail card: no page-head band */
  .is-inboxrail .pn-threads.pn-panel{padding:8px 0 0;background:transparent;border:0;border-radius:0}
  /* the thread page's rail title takes the page h1 size too, so the two heads match */
  .is-rail .pn-chatrail__title{font:700 var(--fs-m)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-h)}
  .is-inboxrail > .pn-apphead .pc-sub{display:none}
  .is-inboxrail .pn-chatrail__list{overflow:visible}
  .pn-chatpick{display:flex;flex-direction:column;min-width:0}
  .pn-chatpick__in{flex:1;display:flex;flex-direction:column}
  .pn-chatpick .pc-empty{flex:1;min-height:560px;justify-content:flex-start;padding-top:88px}
  /* Desktop Orders (CH-10): the whole column is the list, one row = photo + text | buttons. */
  /* polish r4: text | price | buttons on the row's centre line, columns shared by the rows of a group (subgrid, so the
     prices line up); the buttons size to their labels (min 168, so single buttons of neighbouring groups line up). */
  .pn-chatshell--inbox.is-orders .pn-ogroup{grid-template-columns:minmax(0,1fr) auto auto}
  .pn-chatshell--inbox.is-orders .pn-ogroup > *{grid-column:1 / -1}
  .pn-chatshell--inbox.is-orders .pn-orow{grid-template-columns:subgrid;align-items:center;column-gap:var(--space-6)}
  .pn-chatshell--inbox.is-orders .pn-orow__price{justify-self:end}
  .pn-chatshell--inbox.is-orders .pn-orow__top .pc-price{display:none}
  .pn-chatshell--inbox.is-orders .pn-orow__price{display:block}
  .pn-chatshell--inbox.is-orders .pn-orow .pn-order__actions{margin-left:0;justify-self:end;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(168px,auto)}
}
@media (min-width:701px) and (max-width:1023px){
  .pn-chatshell--thread > .pn-chatrail{display:none}
}

/* ==========================================================================
   Phone: the thread is the whole screen (its own head on paper, no site header, no tab bar)
   ========================================================================== */
@media (max-width:700px){
  body:has(.pn-chatpage) .pc-header{display:none}
  body:has(.pn-chatpage) .pn-tabbar{display:none}
  body:has(.pn-chatpage){--dock:calc(var(--space-3) + env(safe-area-inset-bottom))}
  body:has(.pn-chatpage) .pn-main{padding:0}
  /* polish-b 02.10.: the member frame's --app-top (layout.css, 0,4,1) out-ranked the line above and left a 20 px strip of
     page ground over the thread head; the full-screen thread starts at the very top like a native one. */
  body.pc-root:not(.pc-guest):not(.pn-joinbody):has(.pn-chatpage) .pn-main{padding-top:0}
  .pn-chatpage{border:0;border-radius:0}
  .pn-chathead{min-height:0;gap:8px;padding:max(8px,env(safe-area-inset-top)) 12px 10px max(8px,env(safe-area-inset-left))}
  .pn-chatwho{padding-right:8px}
  .pn-msgs{padding:16px 12px}
  .pn-msgs .pn-msg .pc-bubble,.pn-quote{max-width:86%}
  .pn-order,.pn-offer{padding:18px}
  .pn-composer{padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
  /* Docked = compact (lead line + Unlock + the round "Send a pair"); a tap on the handle opens the full sheet. */
  .pn-paybar.pn-sheet{padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
  .pn-paybar__top{margin-bottom:10px}
  .pn-paybar__acts{padding-bottom:0}
  .pn-paybar.is-docked:not(.is-open) .pn-paybar__h{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pn-paybar.is-docked:not(.is-open) .pn-senditem > summary{width:48px;min-width:48px;padding:0;gap:0}
  .pn-paybar.is-docked:not(.is-open) .pn-senditem__t{display:none}   /* the summary keeps its aria-label */
  .pn-paybar.is-open .pn-paybar__acts{grid-template-columns:minmax(0,1fr)}
  .pn-paybar.is-open .pn-senditem > summary{width:100%}
  .pn-paybar.is-open .pn-senditem__list{left:0;right:auto}
  /* support 01.11. ("list won't scroll"): inside the bottom sheet (overflow:auto) a picker floating above the button was cut
     off and a swipe moved the sheet; on phones it sits in the flow under the button and scrolls on its own */
  .pn-paybar .pn-senditem__list{position:static;width:100%;max-height:min(300px,45svh);margin-top:8px;box-shadow:none;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  .pn-inbox__search{flex-basis:100%;max-width:none}
  .pn-orow + .pn-orow::before{left:var(--row-inset);right:var(--row-inset)}
  .pn-orow .pn-order__actions{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .pn-menu,.pn-menu__scrim,.pn-menuwrap.is-sheet .pn-menu.pn-sheet,.pn-toast,.pn-threadrow.is-leaving,.pn-msg__more,.pn-threadrow__more,.pn-threadrow__top time,.pn-threadrow .pn-dot,.pn-chatwho{transition:none}
  .pn-msg.is-flash .pc-bubble{animation:none;box-shadow:0 0 0 3px var(--accent-soft)}
  .pn-order:target,.pn-offer:target{animation:none}
}
/* Reviews (owner 01.10., docs/reviews.md): the rating state of a completed order — "Rate your order" (the next step: the
   pink button on the dark card, ink in the Orders list), or the stars given. The sheet: kit .pn-sheet, five big stars
   (reversed in the DOM so a hovered / checked star lights the ones before it), the text with its live count, the three
   checks as kit chips, one pink send. */
.pn-orate{display:grid;gap:6px;margin:0}
/* deals (owner 05.10., lib/deals.php): the handshake cards at the top of the thread — a tonal panel, the round well says
   the state (tag = sold, check = received, clock = not yet), the buttons sit on the buyer's card only. */
.pn-deals{display:grid;gap:8px;margin:0 0 12px}
.pn-deal{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-tile);background:var(--sunken)}
.pn-deal__ico{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink)}
.pn-deal.is-declined .pn-deal__ico{background:var(--t-mute,var(--line));color:var(--ink-2)}
.pn-deal__main{display:grid;gap:3px;min-width:0;flex:1}
.pn-deal__h{font:800 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-deal__item{font:500 14px/1.35 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-deal__line{font:500 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-deal__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pn-deal__acts.is-busy{opacity:.6;pointer-events:none}
.pn-deal__rate{margin-top:8px}
.pn-deal .pn-orate{margin-top:6px}
/* Ships first (09.10., lib/ships_first.php): the label, the proof of shipping, the buyer record under the chat head, the
   proof sheet. Quiet surfaces and 50 % grey lines; the step buttons are the kit's (one pink key per card). */
.pn-deal__sf{align-self:flex-start;justify-self:start;display:inline-flex;align-items:center;gap:4px;min-height:22px;margin:2px 0;padding:2px 8px 2px 6px;border:1px solid var(--line);border-radius:var(--r-label);font:600 12px/1 var(--font-sans);color:var(--ink-2)}
.pn-deal__sf .pc-ico{width:14px;height:14px}
.pn-deal__proof{display:grid;gap:6px;margin:4px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface)}
.pn-deal__proofh{font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-deal__track{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 13px/1.35 var(--font-sans);color:var(--ink);min-width:0}
.pn-deal__track code{font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;overflow-wrap:anywhere}
.pn-deal__track a,.pn-deal__photo span{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-deal__photo{display:inline-flex;align-items:center;gap:10px;min-height:40px;font:500 13px/1.3 var(--font-sans)}
.pn-deal__photo img{flex:none;width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.pn-sfrep{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:8px 16px;border-top:1px solid var(--line);background:var(--surface);font:500 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-sfrep__h{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--ink)}
.pn-sfrep__h .pc-ico,.pn-sfrep__block .pc-ico{width:14px;height:14px}
.pn-sfrep__i b{margin-right:4px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pn-sfrep__i.is-warn b,.pn-sfrep__block{color:var(--danger)}
.pn-sfrep__block{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.pn-sfrep--sheet{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-tile)}
.pn-dealsheet__sf{padding:10px 0;min-height:56px}
.pn-dealsheet__sf b{display:inline-flex;align-items:center;gap:6px}
.pn-dealsheet__sfno{margin:0}
.pn-sfsheet__item{margin:0;font:600 14px/1.35 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-sfsheet__row{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.pn-sfsheet__file{align-self:flex-start;cursor:pointer;max-width:100%}
.pn-sfsheet__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-sfsheet[open]:not(:modal){position:fixed;inset:auto 0 0;z-index:50;margin:0 auto;max-height:90dvh;overflow:auto}
@media (max-width:560px){.pn-sfrep{padding:6px 12px;gap:2px 10px}.pn-sfsheet__row{grid-template-columns:1fr}}
.pn-lcsold{color:var(--accent)}
.pn-orate__left{margin:0;font:400 12px/1.4 var(--font-sans);color:var(--ink-2);text-align:center}
.pn-order .pn-orate__left{color:var(--dk-ink-2)}
p.pn-orate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:700 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-order p.pn-orate{color:var(--dk-ink-2)}
.pn-ratestars{font-size:16px;letter-spacing:2px}
.pn-orow .pn-orate{margin-left:70px;max-width:440px}
.pn-revsheet__form{display:grid;gap:var(--space-3)}
.pn-revsheet__form .pn-sheet__head{margin-bottom:0}
.pn-revsheet h2[tabindex="-1"]:focus{outline:0}
.pn-revsheet__order{display:flex;align-items:center;gap:var(--space-3);min-width:0;padding:8px 12px 8px 8px;border-radius:var(--radius-tile);background:var(--sunken)}
.pn-revsheet__img{flex:none;width:44px;height:55px;border-radius:10px;overflow:hidden;background:var(--ph-media)}
.pn-revsheet__txt{flex:1;min-width:0;display:grid;gap:2px}
.pn-revsheet__txt b{font:800 14px/1.25 var(--font-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-revsheet__txt span{font:400 13px/1.3 var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-revstars,.pn-revchecks{min-width:0;margin:0;padding:0;border:0}
.pn-revstars legend,.pn-revchecks legend{margin-bottom:8px;padding:0}
.pn-revstars__row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.pn-revstars__row label{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ink-3);cursor:pointer;transition:color var(--dur-fast),transform var(--dur-fast)}
.pn-revstars__row label .pc-ico{width:32px;height:32px;stroke-width:1.8}
.pn-revstars__row input:checked ~ label,.pn-revstars__row input:checked + label,
.pn-revstars__row label:hover,.pn-revstars__row label:hover ~ label{color:var(--pink-glyph)}
.pn-revstars__row input:checked ~ label .pc-ico,.pn-revstars__row input:checked + label .pc-ico,
.pn-revstars__row label:hover .pc-ico,.pn-revstars__row label:hover ~ label .pc-ico{fill:currentColor}
.pn-revstars__row input:focus-visible + label{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-revstars__row input[aria-invalid] ~ label{color:var(--danger)}
.pn-revstars__word{min-height:18px;margin:4px 0 0;font:700 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-revsheet__body{min-height:110px;resize:vertical}
.pn-revsheet__count{display:flex;justify-content:space-between;gap:12px;margin:6px 0 0}
.pn-revsheet__count [data-review-count]{flex:none;font-variant-numeric:tabular-nums}
.pn-revchecks__row{display:flex;flex-wrap:wrap;gap:8px}
.pn-revcheck .pc-ico{width:14px;height:14px;stroke-width:2.6;opacity:.35}
.pn-revcheck:has(input:checked){background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pn-revcheck:has(input:checked) .pc-ico{opacity:1}
.pn-revcheck:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-revsheet__err{margin:0;padding:10px 14px;border-radius:var(--radius-tile);background:var(--danger-soft);font:600 13px/1.35 var(--font-sans);color:var(--ink)}
.pn-revsheet__err[hidden]{display:none}
.pn-revsheet__fine{margin:0;text-align:center}
.pn-revsheet__form.is-busy button[type=submit]{opacity:.6;pointer-events:none}
.pn-chatok{border-color:var(--line)}
@media (max-width:560px){.pn-revstars__row label{width:44px;height:44px}.pn-orow .pn-orate{margin-left:0}}
/* legacy chat (docs/legacy-chat-03-10.md): the pnew thread on legacy rows. A legacy photo is a preview + one-time
   download (legacy's attachment.php), a listing/offer card can sit under a text bubble, the error line waits hidden. */
.pn-chaterr[hidden]{display:none}
.pn-lcatt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:0 0 var(--space-2)}
.pn-lcatt__img{display:block;width:120px;height:120px;object-fit:cover;border-radius:var(--r-icon);background:var(--sunken)}
.pn-lcatt__note{color:var(--ink-2)}
.pn-lcatt.is-gone{flex-direction:row;align-items:center;color:var(--ink-2)}
.pn-msg > .pn-lcatt{margin:var(--space-2) 0 0}
.pn-lccard{display:flex;margin:var(--space-2) 0 0}
.pn-msg--out .pn-lccard{justify-content:flex-end}
.pn-lcorder{text-decoration:none;color:var(--ink)}
.pn-lcfile{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-4)}
.pn-lcfile[hidden]{display:none}
.pn-lcfile__name{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink-2)}
.pn-composer.is-busy .pn-send{opacity:.5;pointer-events:none}
.pn-msg.is-busy{opacity:.5}
/* ad5 (docs/ad5-03-10.md): the legacy chat's last weaknesses.
   - First message: who you write to (the kit avatar, lg) and three starter pills (the .tabs-app pill) on the empty log.
   - The room left: a small paper pill in the field's bottom right corner (the mockup .chip), danger once over.
   - Lock lines (limit, blocked, gone, read only): icon + words as one left-aligned line, centred in the bar; read only
     adds its one pink key, "Reply on the classic page".
   - Send a listing: the sheet rows carry the listing's photo and price (pnew_lc_my_listings_shown). */
.pn-lcfirst{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px;padding:var(--space-6) var(--space-4)}
/* U5 (owner 18.10.): the listing his first message is about — one tonal line over the composer, × leaves it out */
.pn-lcabout{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 6px 6px 12px;border-radius:var(--r-rules);background:var(--sunken);font:600 13px/1.35 var(--font-sans);color:var(--ink)}
.pn-lcabout > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lcabout > svg{flex:none;color:var(--ink-2)}
.pn-lcabout__x.pc-remove{position:static;flex:none}
.pn-lcfirst__name{font:700 17px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-lcfirst__t{margin:0 0 6px}
.pn-lcfirst__chips{justify-content:center;flex-wrap:wrap;gap:8px}
.pn-lcfirst__chips .pc-chip{white-space:normal;text-align:center;line-height:1.25;background:var(--surface)}
.pn-lcbody{position:relative;flex:1;min-width:0;display:flex}
.pn-lcbody > textarea.pc-input{flex:1;min-width:0}
/* fix-chatbox 26.10.: up to 3 keys (photo, Sold, listings) squeezed a seller's field to a sliver on phones; when the row
   cannot give it 160 px the keys take their own line above it (tests/chatbox_composer_test.php) */
form.pn-composer{container:pnlc / inline-size}
@container pnlc (max-width:389px){.pn-composer__row:has(> :nth-child(5)){flex-wrap:wrap}.pn-composer__row:has(> :nth-child(5)) > .pn-lcbody{flex:1 1 calc(100% - 56px)}}
@container pnlc (max-width:335px){.pn-composer__row:has(> :nth-child(4)){flex-wrap:wrap}.pn-composer__row:has(> :nth-child(4)) > .pn-lcbody{flex:1 1 calc(100% - 56px)}}
.pn-lccount{position:absolute;right:10px;bottom:9px;z-index:1;padding:4px 9px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--sunken);color:var(--ink-2);font:700 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;pointer-events:none}
.pn-lccount[hidden]{display:none}
.pn-lcbody:has(.pn-lccount:not([hidden])) > textarea.pc-input{padding-right:72px}
.pn-lccount.is-over{border-color:var(--danger);color:var(--danger)}
.pn-composer.is-over textarea.pc-input{border-color:var(--danger)}
.pn-composer.is-locked{flex-wrap:wrap;gap:10px 16px}
.pn-lclock{display:flex;align-items:flex-start;gap:8px;max-width:60ch;margin:0;text-align:left}
.pn-lclock .pc-ico{flex:none;margin-top:2px}
.pn-lclock time{color:var(--ink);font-weight:700}
.pn-lcread__go{flex:none}
@media (max-width:700px){.pn-lcread{flex-direction:column;align-items:stretch}.pn-lcread .pn-lclock{align-self:center}.pn-lcread__go{width:100%}}
.pn-lcfile{padding:0 var(--space-2);gap:var(--space-3)}
.pn-lcfile .pn-tray__c{width:56px;height:56px}
.pn-menu__item.has-img{min-height:64px;padding:8px 12px}
.pn-menu__img{flex:none;width:48px;height:48px;border-radius:var(--r-icon);object-fit:cover;background:var(--sunken)}
.pn-menu__two{display:grid;gap:2px;min-width:0}
.pn-menu__two > span{overflow-wrap:anywhere}
.pn-menu__two small{font:500 13px/1.3 var(--font-sans);color:var(--ink-2)}
/* Guest message (owner 08.10., package GM, lib/guest_msg.php): the one line above his composer about the message he wrote
   to her as a guest (sending it / ready / it went out / try again / it cannot go from here, with his words quoted). */
.pn-gmnote{flex:none;display:grid;gap:8px;margin:10px 16px 0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-field);font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-gmnote__t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0}
.pn-gmnote__t .pc-ico{flex:none;color:var(--accent)}
.pn-gmnote__t span{flex:1 1 200px;min-width:0}
.pn-gmnote[data-state="sent"]{color:var(--ink)}
.pn-gmnote__go{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}
.pn-gmnote__go[hidden]{display:none}
.pn-gmnote__quote{margin:0;padding:8px 12px;border-left:0;background:var(--t-tint);background:var(--sunken);border-radius:0 var(--r-field) var(--r-field) 0;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}

/* ==========================================================================
   Support chat (owner 09.10., lib/support.php): the pinned conversation of the chat list, the conversation
   /account/support/ (templates/support.php): the "Team" chip, the topic picker, the help articles while he types,
   the automatic first answer, the screenshot. Everything else is the thread's own look above.
   ========================================================================== */
.pn-suppin.pn-panel{padding:var(--list-pad);margin-bottom:var(--space-3)}
.pn-suppin .pn-threadrow:hover .pn-threadrow__top time,.pn-suppin .pn-threadrow:hover .pn-dot,.pn-suppin .pn-threadrow:focus-within .pn-threadrow__top time,.pn-suppin .pn-threadrow:focus-within .pn-dot{opacity:1}   /* no row menu: nothing hides */
.pn-suppin .pn-threadrow__top b{flex:0 1 auto}
.pn-suppin .pn-threadrow__top time{margin-left:auto}
.pn-supav{background:var(--chrome);border:1px solid var(--line)}
.pn-supav img{border-radius:inherit}
.pn-supteam{flex:none;gap:4px;min-height:20px;padding:4px 8px;border:0;background:var(--sunken);color:var(--ink-2);font:600 11px/1 var(--font-sans);letter-spacing:0;text-transform:none}
.pn-supteam .pc-ico{width:12px;height:12px;color:var(--accent)}
.pn-supname{display:flex;align-items:center;gap:8px;overflow:visible}
.pn-sup .pn-chatwho{cursor:default}
.pn-supintro .pc-avatar{margin-bottom:4px}
.pn-supauto .pc-bubble{display:grid;gap:6px}
.pn-supauto__l{font:600 11px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-supauto__h{margin:4px 0 0;font:600 13px/1.3 var(--font-sans);color:var(--ink)}
.pn-supauto__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
/* UX 20.10. UX-190: the status line under his first message, the articles folded below it */
.pn-supauto__more{margin:4px auto 0;max-width:420px;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-supauto__more summary{cursor:pointer;min-height:36px;display:flex;align-items:center;justify-content:center;font-weight:600}
.pn-supauto__more .pn-supauto__list{padding:0 8px}
.pn-supauto__list a{display:flex;align-items:center;min-height:40px;color:var(--ink);font:600 14px/1.3 var(--font-sans);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;overflow-wrap:anywhere}
.pn-sup .pn-bubble__text a{color:inherit;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.pn-supatt{display:block;max-width:260px;border-radius:calc(var(--r-pcard) - 4px);overflow:hidden;background:var(--sunken)}
.pn-supatt img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.pn-supatt:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* the help articles above the composer (deflection): a quiet panel, the pink key stays the send button */
.pn-supsug{flex:none;display:grid;gap:8px;margin:10px 16px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface)}
.pn-supsug[hidden],.pn-supdone[hidden]{display:none}
.pn-supsug__h{margin:0;font:700 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-supsug__list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.pn-supsug__list a{display:grid;gap:2px;min-height:44px;padding:8px 10px;border-radius:var(--r-rules);color:var(--ink);text-decoration:none}
.pn-supsug__list a:hover,.pn-supsug__list a:focus-visible{background:var(--sunken);outline:0}
.pn-supsug__list b{font:600 14px/1.3 var(--font-sans);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.pn-supsug__list span{font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-supsug__yes{justify-self:start}
.pn-supdone{flex:none;display:flex;align-items:center;gap:8px;margin:10px 16px 0;padding:10px 12px;border:0;background:var(--sunken);border-radius:var(--r-field);font:400 14px/1.4 var(--font-sans);color:var(--ink)}
.pn-supdone .pc-ico{flex:none;color:var(--accent)}
.pn-suptopics{min-width:0;margin:0;padding:0;border:0}
.pn-suptopics__l{padding:0;margin:0 0 8px;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-suptopics .pc-chips{gap:8px}
.pn-suptopics .pc-chip{min-height:34px;color:var(--ink);white-space:normal;text-align:center}
.pn-suptopics .pc-chip:has(input:checked){background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--btn-ink)}
.pn-suptopics.is-missing .pn-suptopics__l{color:var(--danger)}
@media (max-width:700px){
  .pn-suptopics .pc-chip{min-height:40px}
  .pn-supsug,.pn-supdone{margin-inline:12px}
}
/* UX 20.10. UX-079: the line above the inbox when an order waits for him (Pay now, Did it arrive?) — no pink, a link row */
.pn-turnline{align-items:center;margin:0 0 12px;text-decoration:none;background:var(--t-tint,var(--surface))}
.pn-turnline:hover{background:var(--t-tint-2,var(--surface))}

.pc-bubble:has(.pn-lcard) .pc-bubble__time,.pc-bubble--card .pc-bubble__time{opacity:1;color:var(--ink-2)}   /* visual audit VM-015: 3.0:1 at 10.5 px on the thread ground before */

/* owner 30.10.: the warning under a message that points to another app (both sides see it); tokens only, no line */
.pn-offwarn{display:flex;gap:8px;align-items:flex-start;max-width:min(88%,520px);margin:6px 0 2px;padding:8px 12px;border-radius:var(--r-label);background:color-mix(in srgb,var(--warning) 16%,var(--surface));color:var(--ink);font-size:13px;line-height:1.35}
.pn-msg--out .pn-offwarn{margin-left:auto}
.pn-offwarn .pc-ico{flex:none;margin-top:1px;color:var(--warning)}
/* pnew page group: profile — storefront (member.php), photo/video feeds (feed.php), profile editor (profile_edit.php),
   the report sheet and the photo viewer. Design v2 "Bold Flesh" (docs/design-v2-system.md §7.26, plan §2.6 S8, §2.7).
   Tokens only. Shared primitives that other pages also use (.pn-play, .pn-dur, .pn-vslot, .pn-heart, .pn-flag,
   .pn-counter, .pn-fielderr, .pn-row--danger, .pn-gatebar) stay unscoped; everything else is scoped to its page. */

/* ========== Storefront ========== */



.pn-flag{width:16px;height:16px;border-radius:var(--radius-full);object-fit:cover;margin-right:6px;vertical-align:-3px}
.pn-offers{margin-top:6px}
/* Head (.pn-sf, art-director round, owner 29.09.): one dark card exactly as tall as its content, no dead band, no mega name.
   Background: her cover photo, else her avatar enlarged + blurred, else the skin placeholder, always under a chrome shade.
   The crisp avatar print sits at its native square (400 px source, shown at 220 max: never upscaled), name + facts beside it,
   the BIG counts and the actions on the right. Text is cream on the shade in both themes. */

/* Brand pass (harmony rules §8/§9): the head card's bottom edge is cut with the pinking shears (--mask-zigzag, --edge-h),
   the same edge the landing's black BUY block carries: paper teeth (--bg) bite into the card. The shade, cover and print are untouched. */

.pn-sf__name--l{font-size:clamp(38px,3.8vw,56px)}
.pn-sf__name--xl{font-size:clamp(32px,3vw,44px);}
/* The hero is chrome in both themes: its pills take the chrome roles like the offer chips (was --accent-soft, which flipped to maroon in dark) */

   /* wizard.css styles a bare .pn-offers as a 2-column grid */

/* Big heart (follow/save) and "more": 58 circles next to the large Message button. */

@keyframes pn-pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Tabs: chips (46), counts at .6, sticky under the header on a frosted strip. */

.pn-proftabs .pn-chipn{font-style:normal}

/* Main + 340 aside. */



/* Side card column (≥1100): stretches along the main column, its content sticks under the tabs (short viewports: static). */


/* build3: "Her details" = the facts component (components.css); the head sits closer to the first row. */

/* Brand pass (inner pages AD, harmony rules §9 "profile facts"): the panel is her care label. Sewn-in shape (square top,
   round bottom), a dashed inner seam, the tub symbol in the head. The rows stay the lead's facts component. */

   /* integrator 29.09.: "Message valentina_93" on two lines, the name whole */
/* About: paragraphs (emoji decoded upstream), balanced breaks; two newspaper columns next to the side card on wide screens. */
   /* beats .pn-prose--body 68ch (guest_detail.css loads later) */


/* build3 PR-P1: a long bio folds to six lines behind "Read more" (JS only; no JS = the full text), and one quiet
   contact note under a guest bio replaces the "contact hidden" pills inside her text. */


.pn-specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}

/* Her ads: the v2 product card, 4 columns next to the aside. */



/* Media tiles: 4:5 photos, 9:16 videos, radius 14, locked = server blur + veil + black lock pill. */

   /* = .pc-lockpill (SH-11) */


.pn-play{position:relative;z-index:5;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-full);background:var(--glass);color:var(--sticker-cream);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pn-play .pc-ico{margin-left:2px;fill:currentColor}
.pn-play--sm{width:36px;height:36px}
.pn-dur{position:absolute;right:8px;bottom:8px;z-index:5;height:22px;padding:0 8px;border-radius:var(--radius-full);background:var(--glass-strong);color:var(--sticker-cream);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:800 12px/22px var(--font-sans);font-variant-numeric:tabular-nums}
/* Videos box (aside): 3 columns of 9:16. */

   /* main column now: small 9:16 tiles, up to 4 */


/* Reviews box: stars in accent, the quote at 14, the writer at 12 --ink-2, hairlines between. */

.pn-review{display:grid;gap:4px;padding:14px 0;min-width:0}
.pn-review:first-child{padding-top:4px}
.pn-review:last-child{padding-bottom:0}
.pn-review h3{margin:2px 0 0;font:700 15px/1.3 var(--font-sans);color:var(--ink)}
.pn-review p{margin:0;font:400 14px/1.45 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-review footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-review footer b{font-weight:700;color:var(--ink-2)}
/* Review cards (owner 29.09.: quality first, no long single column): a grid of surface cards, text keeps its line breaks. */

/* Brand pass (harmony rules §9 "reviews"): the rating summary is a receipt slip (the landing receipt's paper, dashed
   rule and pinked bottom edge), tilted one step. No stickers and no notes in the list itself. */


/* Phone message bar: a floating chrome pill in the tabbar style, above the tabbar, once the head's button scrolled away. */


/* ---------- Tablet (701–1099): the aside stacks under the main column ---------- */


/* ---------- Phone ---------- */
@media (max-width:700px){
  /* Head on phones: full bleed; the avatar print next to name + facts, chips, the three counts on one ruled row, the actions. */
  
        .pn-sf__name--l{font-size:clamp(24px,7vw,32px)}
  .pn-sf__name--xl{font-size:clamp(19px,5.4vw,24px)}
                               /* build3 UI-1: text >= 12 */
  
                   /* build3 UI-1: 44 tap target */
  
  .pn-specs{grid-template-columns:minmax(0,1fr)}
                    }

/* ========== Upload grids (profile editor media manager, v3): square tiles radius 20 (the .pcard radius), the add slot
   is the dashed paper slot (components .pc-slot) with the 44 round line control and a small label ========== */
.pn-uploadgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:700px){.pn-uploadgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
.pn-uploadgrid .pc-slot{position:relative;aspect-ratio:1;border-radius:var(--r-pcard);overflow:hidden;display:grid;place-items:center}
.pn-uploadgrid .pc-slot.is-filled{border:1px solid var(--line);background:var(--ph-media)}
.pn-uploadgrid .pc-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-uploadgrid .pc-slot form{margin:0}
.pn-uploadgrid .pc-remove{top:8px;right:8px}
.pn-slot-add{transition:border-color var(--dur-fast)}
.pn-slot-add:hover{border-color:var(--line-3)}
/* polish r4: the add tile is the item form's slot (.pn-slot.is-next, items.css); on phones the caps label drops a size. */
@media (max-width:430px){.pn-uploadgrid .pn-slot-add .pn-slot__in{gap:6px;padding:4px}.pn-uploadgrid .pn-slot-add .pn-slot__t{font-size:11px;letter-spacing:.08em}}
.pn-slotaction{position:absolute;left:8px;bottom:8px;z-index:4;margin:0}
.pn-slotbtn{min-height:30px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--paper);color:var(--anthracite);font:700 12px/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.pn-slotbtn:hover{border-color:transparent}
.pn-processing{position:absolute;left:8px;bottom:8px;z-index:4}
.pn-vslot{background:var(--ph-media-2)}
.pn-slot-empty{border:0;cursor:default;background:var(--sunken)}
.pn-slot-empty:hover{border:0}

/* ========== Feeds (feed.php): tile grid + gate bar ========== */


/* Gate bar = floating black chrome bar (count text + accent Premium CTA; guest = primary Join). Also on /videos/ for guests. */



/* ========== Profile editor (v3, docs/design-v3-system.md §4.5) ==========
   Panels in two balanced columns on desktop (seller: photos | videos, about | offers, details full; buyer: photos |
   about, interests | budget), one column on phones. The field form is display:contents so its panels join the grid.
   Labels on the photo: the ink label (cover), 18+ and the duration as small labels, never tilted. */
.pn-pe{display:grid;gap:0;align-content:start;min-width:0}
.pn-pe > .pc-alert{margin-bottom:var(--app-gap)}
.pn-pe__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-items:stretch}
.pn-pe__form{display:contents}
@media (min-width:1000px){
  .pn-pe__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-pe__details{grid-column:1 / -1}
  .pn-pe__grid:not(.pn-pe__grid--seller) .pn-pe__details{grid-column:auto}
  /* polish r4: photos | videos share their rows (subgrid), so both add tiles start at the same height whatever the
     help length; the heads keep their titles on one line. */
  .pn-pe__grid:has(> .pn-mm--video) > .pn-mm{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .pn-pe__grid:has(> .pn-mm--video) > .pn-mm > .pc-sechead{align-self:start;align-items:flex-start}
  .pn-pe__grid:has(> .pn-mm--video) > .pn-mm > .pc-sechead .pn-count{align-self:flex-start;margin-top:3px}
  /* owner 05.10. ("zuviel Luft"): the switch rows keep their 60 px beside the taller About you; the panel ends after
     the last switch instead of stretching the rows over the column's height (r4 rule reverted). */
  .pn-pe__offers{display:flex;flex-direction:column;align-self:start}
  .pn-pe__offers > .pn-rows{flex:0 0 auto;align-content:start}
  /* polish r4: the picture block uses the full row: picture + text left, the two buttons right. */
  .pn-pe .pn-avpick{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"face body acts" "face err err"}
  .pn-pe .pn-avpick__body{align-self:center}
  .pn-pe .pn-avpick__acts{align-self:center;justify-content:flex-end}
}
.pn-pe .pn-panel{min-width:0}
.pn-pe .pn-form{align-content:start}
.pn-mm .pc-sechead .pn-count{white-space:nowrap}
.pn-mm--video .pn-uploadgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.pn-mm--video .pn-uploadgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* same slot size as the photos: 4 columns left a 63px slot at 360 */
.pn-mmtile{isolation:isolate}
.pn-mmtile__open{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:inherit}
.pn-mmtile__open:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-mmtile__rm{margin:0}
.pn-mm .pc-remove{z-index:5}
.pn-mm .pc-remove::before{content:"";position:absolute;inset:-8px;border-radius:var(--radius-full)}
.pn-mmtile .pc-badge{pointer-events:none}
/* The first photo is the cover: the ink label (the mockup .real geometry) bottom left. */
.pn-coverbadge{display:none;position:absolute;left:8px;bottom:8px;z-index:4;background:var(--prem-bg);color:var(--on-prem);box-shadow:0 0 0 1px var(--prem-ring)}
.pn-mm[data-kind=photo] [data-grid] > .pn-mmtile:first-child .pn-coverbadge{display:inline-flex}
.pn-adultbadge{display:none;position:absolute;left:8px;top:8px;z-index:4;background:var(--paper);color:var(--anthracite)}
.pn-mmtile[data-adult="1"] .pn-adultbadge{display:inline-flex}
.pn-mmtile .pn-dur{position:absolute;right:8px;bottom:8px;z-index:4;background:var(--paper);color:var(--anthracite)}
.pn-mmtile.is-pending img{opacity:.55}
.pn-mmprog{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;height:4px;border-radius:var(--radius-full);background:var(--paper);overflow:hidden}
.pn-mmprog i{display:block;height:100%;background:var(--pink);transform:scaleX(.04);transform-origin:left;transition:transform .15s linear}
.pn-mmtile.is-failed{display:grid;place-items:center;align-content:center;gap:8px;padding:10px;background:var(--surface);border-color:var(--danger)}
.pn-mmfail{font:600 12px/16px var(--font-sans);color:var(--danger);text-align:center}
.pn-mmtile.is-leaving{opacity:0;transition:opacity .15s ease}
.pn-slot-add[hidden],.pn-pe [hidden]{display:none !important}
.pn-mm__hint{margin:var(--space-4) 0 0}
.pn-mm__err{margin-top:var(--space-4)}
/* Fields: one panel per topic; switch rows use the shared 52 x 30 switch. */
.pn-pe .pc-select{display:block}
.pn-pe .pc-field{align-content:start}
.pn-pe__offers > .pc-sechead{margin-bottom:var(--space-2)}
.pn-pe__offers .pn-rows{margin:0 calc(-1 * var(--space-3))}
.pn-selectgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-5) var(--space-4)}
.pn-switchrow{cursor:pointer;min-height:60px}
.pn-switchrow:hover{background:var(--sunken)}
.pn-switchrow input.pc-switch{margin-left:auto}
.pn-switchrow .pn-row__main > b{white-space:normal}
.pn-counter{margin:0;justify-self:end;text-align:right;font-variant-numeric:tabular-nums}
.pn-fielderr{margin:0;font:600 13px/18px var(--font-sans)}
.pn-pe .pc-input[aria-invalid="true"]{border-color:var(--danger)}
.pn-pe [data-save].is-busy{opacity:.7;cursor:progress}
/* The action bar (ui_actionbar): the save state left, the one pink button right. */
.pn-pe > .pc-actionbar{margin-top:var(--app-gap)}
.pn-pe__state.is-dirty{color:var(--ink)}
.pn-pe__state.is-dirty::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--pink);vertical-align:1px}
.pn-pe__views{display:none}
@media (max-width:700px){
  .pn-pe__offers .pn-rows{margin:0 calc(-1 * var(--space-2))}
  .pn-pe > .pc-actionbar .pc-actionbar__note{flex:1 1 100%;margin:0}
  /* The head row keeps "View" beside the h1 (as My pairs keeps New pair), so the lead follows the title directly. */
  .pn-pe .pn-apphead__row{flex-wrap:nowrap;align-items:center}
  .pn-pe .pn-apphead__row > h1{flex:1 1 auto;min-width:0}
  .pn-pe .pn-apphead__row > .pc-row{flex:none}
  .pn-pe__viewl{display:none}
  .pn-pe__views{display:inline}
  /* With JS (profile.js adds .is-live), the bar stays away while nothing changed and slides up with the first edit;
     a full save folds it again (the toast confirms). Without JS it is always there. */
  .pn-pe.is-live.is-clean > .pc-actionbar{display:none}
  .pn-pe.is-live:not(.is-clean) > .pc-actionbar{animation:pn-pe-bar .32s var(--ease-sheet) both}
}
@keyframes pn-pe-bar{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pn-pe.is-live > .pc-actionbar{animation:none}}

/* Media sheet (the editor's tile options): the shared sheet with a thumb in the head and option rows. */
.pn-mmsheet .pn-sheet__head{justify-content:flex-start}
.pn-mmsheet .pn-sheet__head > div{flex:1;min-width:0}
.pn-mmsheet .pn-sheet__head h2{font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0}
.pn-mmsheet .pn-sheet__head .pc-help{margin:4px 0 0}
.pn-sheet__thumb{flex:none;width:56px;height:70px;border-radius:var(--r-pcard);overflow:hidden;background:var(--ph-media);border:1px solid var(--line)}
.pn-sheet__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.pn-mmsheet .pn-sheet__x{flex:none;width:40px;height:40px}
.pn-mmsheet .pn-rows{padding-top:var(--space-2)}
.pn-mmsheet button.pn-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pn-mmsheet button.pn-row:hover,.pn-mmsheet label.pn-row:hover{background:var(--sunken)}
.pn-mmsheet button.pn-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-mmsheet button.pn-row:disabled{opacity:.38;cursor:default;background:none}
.pn-mmsheet .pn-row[hidden]{display:none}
.pn-mmsheet .pn-row__main > span{white-space:normal}
.pn-rowicon--adult{font:700 13px/1 var(--font-display);}
.pn-row--danger .pn-row__main > b,.pn-row--danger .pn-rowicon{color:var(--danger)}

/* Toast: the chrome pill (.pc-toast look), above the action bar / tab bar. */
.pn-ptoast{position:fixed;left:50%;bottom:calc(var(--dock) + 60px + var(--toast-gap));z-index:var(--z-toast);max-width:calc(100% - 32px);min-height:48px;display:flex;align-items:center;padding:12px 20px;border-radius:var(--radius-full);border:1px solid transparent;background:var(--chrome);color:var(--on-chrome);box-shadow:var(--sh-float);font:600 14px/1.3 var(--font-sans);text-align:center;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s ease,transform .3s var(--ease-out)}
.pn-ptoast:empty{display:none}
.pn-ptoast.is-on{opacity:1;transform:translate(-50%,0)}
.pn-ptoast.is-bad{background:var(--danger);color:var(--on-danger)}

/* ========== Photo viewer (feed.php): black stage, glass nav ========== */
.pn-viewer{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--backdrop);color:var(--sticker-cream)}
.pn-viewer[open]{display:grid;place-items:center}
.pn-viewer::backdrop{background:var(--scrim)}
.pn-viewer img{max-width:min(100%,1100px);max-height:100%;object-fit:contain;user-select:none}
.pn-viewer__nav{position:absolute;top:50%;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;padding:0;border:0;border-radius:var(--radius-full);background:var(--glass);color:var(--sticker-cream);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer}
.pn-viewer__nav:hover{background:var(--glass-strong)}
.pn-viewer__nav:active{transform:scale(.9)}
.pn-viewer__prev{left:max(16px,env(safe-area-inset-left))}
.pn-viewer__next{right:max(16px,env(safe-area-inset-right))}
.pn-viewer.is-single .pn-viewer__nav,.pn-viewer.is-single .pn-viewer__pos{display:none}
.pn-viewer__x{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pn-viewer__x .pc-ico{width:20px;height:20px}
.pn-viewer__pos{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);height:30px;padding:0 12px;border-radius:var(--radius-full);background:var(--glass);font:700 13px/30px var(--font-sans);font-variant-numeric:tabular-nums}
@media (max-width:700px){.pn-viewer__nav{display:none}}
/* photos lightbox (owner 05.10., partials/photo_viewer): a locked photo = its blurred copy (or the bare stage) under the
   Premium box; the profile's tiles and "All photos" open the same dialog. */
.pn-viewer img.is-blank{display:none}
.pn-viewer.is-locked img{filter:blur(40px) saturate(.8);transform:scale(1.25)}
.pn-viewer__lock{position:absolute;left:50%;top:50%;z-index:2;display:grid;gap:16px;justify-items:center;width:min(92%,400px);padding:24px;border-radius:var(--r-pcard);background:var(--glass-strong);color:var(--sticker-cream);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center;transform:translate(-50%,-50%)}
.pn-viewer__lock[hidden]{display:none}
.pn-viewer__locktxt{display:flex;align-items:center;gap:10px;margin:0;font:600 15px/1.4 var(--font-sans)}
.pn-viewer__locktxt .pc-ico{flex:none;color:var(--pink)}

/* ========== Report sheet (safety) and the profile "more" ========== */
/* The shared .pn-sheet (components.css): bottom sheet on phones, 520 dialog on desktop. The form scrolls, the buttons stick. */
dialog.pn-sheet.pn-safety{width:min(520px,calc(100% - 48px));max-height:min(88vh,780px);padding:0;overflow:hidden}
.pn-safety[open]{display:flex}
.pn-safety:target:not([open]){display:flex;position:fixed;inset:auto 0 0;z-index:70;margin:0 auto}   /* no-JS fallback */
.pn-sheet.pn-safety .pn-safety__form{display:flex;flex-direction:column;gap:0;width:100%;min-height:0;margin:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 24px 0}
.pn-safety .pn-sheet__grab{flex:none}
.pn-safety .pn-sheet__head{align-items:flex-start;gap:var(--space-3);margin:0;padding:10px 0 var(--space-4)}
.pn-safety .pn-sheet__head > div{flex:1;min-width:0}
.pn-safety .pn-sheet__head .pc-help{margin:6px 0 0}
.pn-safety__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--sunken);color:var(--ink)}
.pn-safety .pn-sheet__x{flex:none;width:40px;height:40px;margin:-2px -4px 0 0}
.pn-safety .pn-sheet__x .pc-ico{width:20px;height:20px}
.pn-safety__reasons{margin:0;padding:var(--space-2) 0 0;border:0;min-width:0}
.pn-safety__legend{display:block;width:100%;margin:0;padding:var(--space-3) 0 var(--space-2);font:600 12px/1 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pn-safety__reason{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:60px;margin:0 calc(-1 * var(--space-3));padding:var(--space-2) var(--space-3);border-radius:var(--radius-card);cursor:pointer;transition:background-color .2s}
.pn-safety__reason:hover{background:var(--sunken)}
.pn-safety__reason:has(input:checked){background:var(--accent-soft)}
.pn-safety__reason:has(input:checked)::before,.pn-safety__reason:has(input:checked) + .pn-safety__reason::before{opacity:0}
.pn-safety__reason:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-safety__reason > span,.pn-safety__also > span{display:grid;gap:2px;min-width:0}
.pn-safety__reason b,.pn-safety__also b{font:700 15px/1.3 var(--font-sans);color:var(--ink)}
.pn-safety__reason b + span,.pn-safety__also b + span{font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-safety__note{margin-top:var(--space-4)}
.pn-safety__note textarea.pc-input{min-height:88px;font-size:16px}   /* 16px: no iOS zoom on focus */
.pn-safety__count{justify-self:end;font-variant-numeric:tabular-nums}
.pn-safety__also{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-tile);background:var(--sunken)}
.pn-safety__also .pc-check{margin-top:1px}
.pn-safety__err{margin:var(--space-3) 0 0;font:600 14px/20px var(--font-sans);color:var(--danger)}
.pn-safety__btns{position:sticky;bottom:0;z-index:1;display:flex;justify-content:flex-end;gap:var(--space-3);margin:var(--space-4) -24px 0;padding:var(--space-3) 24px calc(var(--space-4) + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
@media (min-width:701px){.pn-safety .pn-sheet__grab{display:none}.pn-sheet.pn-safety .pn-safety__form{padding-top:14px}}
/* member launch (owner 05.10.): block / report modals on legacy's handlers (partials/ml_safety). Same sheet; the states
   (ask / done) swap by the hidden attribute, which must beat every display rule of the parts. */
.pn-mls [hidden]{display:none !important}
.pn-mls .pn-sheet__head h2 + h2{margin-top:0}
.pn-mls__premium a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pn-mls .pn-safety__btns button.is-busy{opacity:.6;cursor:progress}
.pn-mls[data-mls-state="done"] .pn-safety__ico{background:var(--accent-soft)}
@media (max-width:700px){
  dialog.pn-sheet.pn-safety{width:100%;max-height:calc(100% - 24px)}
  .pn-sheet.pn-safety .pn-safety__form{padding:10px 18px 0}
  .pn-safety__btns{margin:var(--space-4) -18px 0;padding-inline:18px}
  .pn-safety__btns .pc-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  .pn-slot-add,.pn-mmtile__open img,.pn-mmprog i,.pn-mmtile.is-leaving,.pn-ptoast,.pn-safety__reason{transition:none}
  .pn-mmtile__open:hover img{transform:none}
  }
.pn-mm .pn-count{gap:.3em}

/* ---------- Profile picture (owner 30.09.): the first block of the editor ----------
   The round picture (ui_avatar xl, pink ring) beside the head and one help line; the two buttons under the text
   ("Change picture" = the upload label as a kit .pc-btn, "Choose from my photos" = kit line button). Phone: 84 picture,
   the buttons take the full width under it. The picker sheet shows her photo tiles as round choices, the current one ringed. */
.pn-avpick{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"face body" "face acts" "face err";column-gap:var(--space-5);row-gap:var(--space-3);align-items:center;margin-bottom:22px}
.pn-avpick [hidden]{display:none}
.pn-avpick__face{grid-area:face;display:grid;align-self:center}
.pn-avpick__body{grid-area:body;display:grid;gap:var(--space-2);min-width:0;align-self:end}
.pn-avpick__body h2{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink);overflow-wrap:break-word}
.pn-avpick__body .pc-help{margin:0;max-width:56ch}
.pn-avpick__acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:var(--space-2);align-self:start;min-width:0}
.pn-avpick__up{display:flex;margin:0}
.pn-avpick__file{cursor:pointer}
.pn-avpick__file:focus-within{outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-avpick__err{grid-area:err;margin:0}
@media (max-width:640px){
  .pn-avpick{grid-template-areas:"face body" "acts acts" "err err";column-gap:var(--space-4)}
  .pn-avpick__face .pc-avatar--xl{width:84px;height:84px;font-size:32px}
  .pn-pe .pn-avpick__body{align-self:center}
  .pn-avpick__acts{display:grid;grid-template-columns:minmax(0,1fr)}
  .pn-avpick__up,.pn-avpick__acts > .pc-btn{width:100%}   /* not the .pc-sr file input: at 100% it ran 37 px past the phone's edge (horizontal scroll) */
}
.pn-avsheet__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:var(--space-2)}
.pn-avsheet__pick{position:relative;display:block;width:100%;aspect-ratio:1;margin:0;padding:0;border:3px solid transparent;border-radius:50%;overflow:hidden;background:var(--sunken);cursor:pointer;transition:border-color var(--dur-fast)}
.pn-avsheet__pick img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn-avsheet__pick:hover{border-color:var(--line-3)}
.pn-avsheet__pick.is-current{border-color:transparent}
.pn-avsheet__pick:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:380px){.pn-avsheet__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.pn-avsheet__pick{transition:none}}
/* legacy profile + settings (docs/ml-profile-03-10.md): the pnew account pages on legacy's rows. Token-only. */
.pn-lp__note{margin-bottom:var(--app-gap)}
.pn-lp__err{margin-bottom:var(--app-gap)}
.pn-lptile__badge{position:absolute;left:8px;bottom:8px;z-index:2;max-width:calc(100% - 16px);white-space:normal;line-height:1.2;text-align:left}
.pn-lptile.is-main{border-color:transparent}
.pn-lptile__acts{position:absolute;top:6px;right:6px;z-index:2;display:flex;flex-direction:column;gap:6px}
.pn-lptile__acts .pc-iconbtn{background:var(--photo-key-bg);color:var(--white);border:0;box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}   /* A14 (owner 18.10.): dark glass discs, readable on any photo in both themes (the cream discs of 05.10. outshone the photo) */
.pn-lptile__acts .pc-iconbtn:hover{background:var(--anthracite)}
.pn-lp__date{border:0;padding:0;margin:0;min-width:0}
.pn-lp__date > legend{margin-bottom:8px}   /* owner 05.10.: a legend sits outside the fieldset's grid, so the field gap does not reach it */
.pn-lp__daterow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.pn-lp__form{display:grid;gap:12px}
.pn-lp__formacts{display:flex;justify-content:flex-end;padding-top:4px}
/* adml 03.10.: photo tiles = badge top-left, the three actions one quiet row at the foot (they stacked over the badge);
   two columns on phones so three 34px actions fit beside each other. Date selects: room for "31" and "1990" at 360. */
.pn-lp__photos .pn-lptile__badge{top:8px;bottom:auto}
.pn-lp__photos .pn-lptile__acts{top:auto;left:6px;right:6px;bottom:6px;flex-direction:row;justify-content:flex-end;gap:4px}
.pn-lp__photos .pn-lptile__acts .pc-iconbtn{width:34px;height:34px}
.pn-lp__photos .pn-lptile__acts .pc-ico{width:16px;height:16px}
@media (max-width:560px){.pn-lp__photos .pn-uploadgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-lp__daterow .pc-select > .pc-input{width:100%;padding-left:14px;padding-right:32px}
.pn-lp__daterow .pc-select::after{right:14px}
.pn-lp__daterow .pc-select{display:block;min-width:0}
.pn-setpanel > .pc-sechead + .pn-lp__form{margin-top:var(--space-3)}
@media (max-width:560px){.pn-lp__formacts:has(> .pc-btn + .pc-btn){flex-wrap:wrap;gap:10px}.pn-lp__formacts:has(> .pc-btn + .pc-btn) > .pc-btn{flex:1 1 100%}}
@media (min-width:561px){.pn-lp__formacts{gap:12px}}
/* adml layout_qa 03.10.: at 1024 the tiles are ~110 px wide; the three foot actions shrink with the tile instead of being cut */
.pn-lp__photos .pn-mmtile{container-type:inline-size}
@container (max-width:140px){
  .pn-lp__photos .pn-lptile__acts{left:4px;right:4px;bottom:4px;gap:2px}
  .pn-lp__photos .pn-lptile__acts .pc-iconbtn{width:28px;height:28px}
  .pn-lp__photos .pn-lptile__acts .pc-ico{width:14px;height:14px}
}

/* owner 05.10.: the avatar face is the upload trigger (label for #pnAvFile) */
.pn-avpick__face{cursor:pointer}
.pn-avpick__face:focus-within{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:50%}
/* owner 05.10. (buyer picture): the card's own "Uploading …" line under the buttons; the button dims while it runs */
.pn-avpick__busy{flex-basis:100%;margin:0}
.pn-avpick__up[aria-busy="true"]{opacity:.6;pointer-events:none}

/* owner 05.10. ("Schließen-X nicht sichtbar"): the viewer's X is a solid cream disc with a dark glyph, above everything */
.pn-viewer__x{z-index:var(--z-bar);background:var(--sticker-cream);color:var(--anthracite);border:0;box-shadow:var(--sh-float)}
.pn-viewer__x:hover{background:var(--cream)}

/* night L2 (08.10.): a seller's media in the legacy profile editor (templates/partials/lp_media.php) and the fake check page
   (templates/verify.php). Token-only; the tiles reuse .pn-lptile__badge, the albums the photo grid's .pn-lp__photos rules. */
.pn-lpmedia{display:grid;gap:var(--app-gap);margin-top:var(--app-gap);min-width:0}
.pn-mdvf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 16px}
.pn-mdvf__ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--sunken);color:var(--ink-2)}
.pn-mdvf__ico.is-ok{color:var(--pink)}
.pn-mdvf__t{min-width:0}
.pn-mdvf__t .pc-h-card{margin:0}
.pn-mdvf__t .pc-help{margin:2px 0 0}
@media (max-width:560px){.pn-mdvf{grid-template-columns:auto minmax(0,1fr)}.pn-mdvf > .pc-more{grid-column:2;justify-self:start}}
.pn-mdgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px;margin:0;padding:0;list-style:none}
@media (max-width:700px){.pn-mdgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}}
@media (max-width:560px){.pn-mdgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pn-mdgrid,.pn-lp__albums .pn-uploadgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pn-lpmedia > section,.pn-lp__photos{scroll-margin-top:calc(var(--header-h) + 16px)}
.pn-mdtile{display:grid;gap:8px;min-width:0}
.pn-mdtile__media{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--ph-media);color:var(--ink-2)}
.pn-mdtile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-mdtile .pn-lptile__badge{top:8px;bottom:auto}
.pn-mdtile.is-off .pn-mdtile__media img{opacity:.4}
.pn-mdtile__play{position:absolute;right:8px;bottom:8px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sticker-cream);color:var(--anthracite);box-shadow:var(--sh-float)}
.pn-mdtile__cap{display:grid;gap:2px;min-width:0;font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-mdtile__cap b{overflow:hidden;font:600 13px/1.35 var(--font-sans);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.pn-mdalbum + .pn-mdalbum{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.pn-mdalbum__h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-mdalbum__h .pc-ico{color:var(--ink-2)}
.pn-vf{display:grid;gap:var(--app-gap);max-width:760px}
.pn-vf > .pn-apphead,.pn-vf > .pn-lp__err{margin-bottom:0}
.pn-vf__state{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px 16px}
.pn-vf__state .pn-mdvf__ico{width:48px;height:48px}
.pn-vf__statet{min-width:0}
.pn-vf__statet .pc-h-card{margin:4px 0 0}
.pn-vf__statet .pc-sub{margin:6px 0 0}
.pn-vf__badge{margin:12px 0 0}
.pn-vf__steps{display:grid;gap:14px;margin:var(--space-4) 0 0;padding:0;list-style:none}
.pn-vf__steps > li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px}
.pn-vf__steps > li > span:last-child{display:grid;gap:2px;min-width:0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-vf__steps b{font:600 15px/1.35 var(--font-sans);color:var(--ink)}
.pn-vf__n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--sunken);font:700 13px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-vf__up{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.pn-vf__btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.pn-vf__busy{flex-basis:100%;margin:0}
.pn-vf__later{margin:var(--space-5) 0 0;padding-top:var(--space-4);border-top:1px solid var(--line)}
@media (max-width:560px){.pn-vf__btn{width:100%}}
/* verified go-live (09.10., templates/verify.php, only with app/switch/verify_upload): refusal checklist, picker (phone:
   front camera + library; desktop: library), preview, privacy line, the home card's quiet "waiting" line */
.pn-vf__why{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.pn-vf__why > li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;font:400 14px/1.45 var(--font-sans);color:var(--ink)}
.pn-vf__why .pc-icon,.pn-vf__why svg{margin-top:2px;color:var(--ink-2)}
.pn-vf__pick,.pn-vf__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pn-vf__pick[hidden],.pn-vf__preview[hidden],.pn-vf__prem[hidden]{display:none}
.pn-vf .pn-vf__coarse{display:none}
@media (pointer:coarse){.pn-vf .pn-vf__coarse{display:inline-flex}.pn-vf .pn-vf__fine{display:none}}
.pn-vf__preview{display:grid;gap:12px;flex-basis:100%}
.pn-vf__preview .pc-help{margin:0}
.pn-vf__img{display:block;width:100%;max-width:320px;max-height:420px;object-fit:contain;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--sunken)}
.pn-vf__prem{flex-basis:100%;font:600 14px/1.4 var(--font-sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pn-vf__privacy{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;margin:var(--space-4) 0 0;font:400 13px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-vf__privacy svg{margin-top:2px}
.pn-vf__privacy b{color:var(--ink);font-weight:600}
@media (max-width:560px){.pn-vf__pick .pn-vf__btn,.pn-vf__acts .pn-vf__btn{width:100%}}
/* @member-only */
/* UX 20.10. (owner: what still has to be filled in): the required mark beside the label, a missing group in red with its hint */
.pn-lp__req{margin-left:6px;font:600 11px/1 var(--font-sans);letter-spacing:0;color:var(--ink-2);text-transform:none}
.pn-lp .is-missing .pc-input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--danger)}
.pn-lp .is-missing .pn-lp__req,.pn-lp__miss{color:var(--danger)}
.pn-lp__miss{font-weight:600}
/* @end-member-only */
/* ==========================================================================
   Videos /videos/ + /videos/<id>/ (detail slice v3, docs/design-v3-system.md §4). Placement only: every look is a kit
   component. One item node (.pn-vitem, partials/video_item.php) in four arrangements:
   - grid tile  = the listing card's language (card_ad.php, owner 05.10. "videocards beschissen"): the 4:5 poster IS the
                  card (radius 20, the 50 % line drawn over it, no paper box, no footer); on it the one corner label
                  (Free pink / the small glass lock chip), the glass play disc, and the caption at the bottom edge on
                  the card shade: PREMIUM kicker, her caption (2 lines), 22 px avatar + @name, the pink star score, the
                  glass view count. Locked = the blurred poster (the blur is the paygate) under the same shade.
   - phone feed = one anthracite .box (the mockup .dk block: radius 24, the line) with scroll snap; text on-dark,
                  the rail = 44 circles with the chrome line (the .calc__row buttons) and their label under them.
   - detail / lightbox = the player (radius 20, the line) + a side column: strip, caption, line pills with icon + label,
                  the unlock panel = .box--dk.
   Rotation: none (the care label on a missing poster is the kit's -5deg).
   JS hooks (videos.js): .pn-vpage[.is-feed], #pnVList, .pn-vitem(__media|__poster|__stage), .pn-vlike, .pn-vsound,
   .pn-vshare, .pn-vsolo, .pn-vbox(__body), #pnVSheet, #pnVMore, .pn-vtoast, .pn-vskel, .pn-vburst, .pn-vunavail.
   ========================================================================== */
.pn-vpage{--vtile-ratio:4/5;--vfeed-h:calc(100svh - var(--header-h) - var(--tabbar-h) - 16px);display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start;min-width:0}
.pn-vpage > *{min-width:0}
.pn-vhead .pn-apphead{margin:0}

/* Seller head (?s=): a panel with the big strip and the actions. */
.pn-vseller{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 22px}
.pn-vseller__act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1 1 280px;max-width:420px}   /* polish r3: side by side, equal width, no ragged stack */
.pn-vseller__act > .pc-btn{justify-content:center;min-width:0}
@media (max-width:560px){.pn-vseller__act{max-width:none}}
/* Phones: the labels would break inside two half-width pills ("VIEW / PROFILE"), so both run full width, one per row. */
@media (max-width:440px){.pn-vseller__act{flex-basis:100%;grid-template-columns:minmax(0,1fr)}}

/* Tool row (T64): filter chips left, the sort select chip right; phones: sort chip, layout, filter. Everything wraps. */
.pn-vbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.pn-vchips{display:flex;flex-wrap:wrap;gap:8px}
.pn-vsort{display:flex;align-items:center;gap:10px;margin:0 0 0 auto}
/* T27: the page's one pink "Unlock all videos" (grid); on the phone feed the first locked item's panel carries it. */
.pn-vunlock{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px}
.pn-vunlock__txt{display:flex;align-items:center;gap:10px;margin:0;font:600 14px/1.4 var(--font-sans);color:var(--ink)}
.pn-vunlock__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);color:var(--ink)}
.pn-vunlock__ico .pc-ico{width:16px;height:16px}
@media (max-width:520px){.pn-vunlock > .pc-btn{flex:1 1 100%}.pn-vunlock > .pc-btn .pc-ico{display:none}}   /* layout_qa: a full-width CTA on phones, no icon stranded beside a wrapped label */
.pn-vbar__tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.pn-vsortchip .pc-ico{width:16px;height:16px}
.pn-vsortchip,.pn-vviewbtn,.pn-vbar__sheet{display:none}
@media (max-width:1023px){
  .pn-vsort{display:none}
  .pn-vsortchip{display:inline-flex}
  .pn-vviewbtn{display:inline-grid}
}
@media (min-width:1024px){.pn-vbar__tools{display:none}}

/* ---------- grid: the .pairs grid of .pcard tiles ---------- */
.pn-vlist,.pn-vsolo,.pn-vbox__body{list-style:none;margin:0;padding:0}
/* T27: tiles of one row share the height (stretch), the caption line is reserved, so rows never go ragged. */
.pn-vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;align-items:stretch}
@media (min-width:1101px){.pn-vlist{--dt-cols:repeat(5,minmax(0,1fr));grid-template-columns:var(--dt-cols)}}
/* polish r1: "Up next" on the video page ends on a full row in the 5-column range (the short tail steps aside; "More"
   brings it back in order). */
@media (min-width:1101px){.pn-vdetail #pnVList > :nth-child(5n+6):nth-last-child(-n+4),.pn-vdetail #pnVList > :nth-child(5n+6):nth-last-child(-n+4) ~ *{display:none}}
@media (max-width:700px){.pn-vlist{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.pn-vitem{position:relative;min-width:0;display:grid;align-content:start}
/* vcard 05.10.: no paper box around the tile; the poster frame carries the radius and the 50 % line (= .pn-prodcard). The
   container lets the caption step down in narrow cells like the listing card's. */
.pn-vlist > .pn-vitem{background:none;border:0;border-radius:var(--r-pcard);overflow:visible;container:pn-vitem / inline-size}
.pn-vlist > .pn-vitem > .pn-vitem__media{border-radius:var(--r-pcard);clip-path:inset(0 round var(--r-pcard))}
.pn-vlist > .pn-vitem > .pn-vitem__media::before{content:"";position:absolute;inset:0;z-index:7;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.pn-vlist > .pn-vitem:has(> .pn-vitem__media:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-vlist > .pn-vitem > .pn-vitem__media:focus-visible{outline:none}
.pn-vitem__media{position:relative;display:grid;place-items:center;aspect-ratio:var(--vtile-ratio);overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.pn-vitem__media:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-vitem__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform var(--dur-slow) var(--ease-out)}
.is-locked .pn-vitem__poster,.is-teaser .pn-vitem__poster{filter:blur(24px) saturate(.85);transform:scale(1.3)}
/* The lift = the listing card's (the photo grows a touch under the still frame); the blurred poster keeps its overscan. */
@media (hover:hover){
  .pn-vlist > .pn-vitem:hover .pn-vitem__poster{transform:scale(1.035)}
  .pn-vlist > .pn-vitem:is(.is-locked,.is-teaser):hover .pn-vitem__poster{transform:scale(1.16)}
}
.pn-vitem__shade{display:none}
/* Locked / teaser tiles: the dark foot over the blur (--media-shade), so the wash reads as a poster, not a grey panel. */
.pn-vlist > .pn-vitem:is(.is-locked,.is-teaser) > .pn-vitem__media > .pn-vitem__shade{display:block;position:absolute;inset:0;z-index:3;background:var(--media-shade);pointer-events:none}
/* Labels top left, wrapping (Premium, Free, New). */
.pn-vitem__chips{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;pointer-events:none}
/* vcard 05.10.: the lock = a small glass chip in the label corner (pink kicker type on the strong glass, legible on a bright
   blur in light too), never a centred pill. Player and lightbox move it to the foot of the blurred player. */
.pn-vitem__lock{position:absolute;top:10px;left:10px;z-index:6;display:inline-flex;align-items:center;gap:5px;height:24px;max-width:calc(100% - 20px);padding:0 9px 0 7px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--glass-strong);color:var(--pink);font:700 10.5px/1 var(--font-display);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-vitem__lock .pc-ico{flex:none;width:12px;height:12px;stroke-width:2.2}
/* Play: the paper circle (44, the line), shown on hover. */
/* vcard 05.10.: the play disc = the like button's glass (--scard-glass, blur, the 50 % line), always on the grid tile. */
.pn-vitem__play{position:absolute;left:50%;top:50%;z-index:6;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid var(--line);background:var(--scard-glass);color:var(--scard-ink);opacity:1;transition:opacity var(--dur-fast),background-color var(--dur-fast);pointer-events:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-vitem__play .pc-ico{width:20px;height:20px;fill:currentColor;stroke:none;margin-left:2px;filter:drop-shadow(var(--scard-tshadow))}
@media (hover:hover){.pn-vitem__media:hover .pn-vitem__play{background:var(--scard-glass-hover)}}
/* polish r4: a tile without a poster shows its play disc on the soft poster (grid, detail; the phone feed keeps its own). */
.pn-vpage:not(.is-feed) .pn-vitem.is-noposter .pn-vitem__play{opacity:1}
.pn-vitem.is-scrubbing .pn-vitem__play{opacity:0}
.pn-vitem__scrub{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;height:3px;border-radius:var(--radius-full);background:var(--media-track);opacity:0;transition:opacity var(--dur-fast)}
.pn-vitem__scrub i{display:block;width:var(--scrub,0%);height:100%;border-radius:inherit;background:var(--paper)}
.pn-vitem.is-scrubbing .pn-vitem__scrub{opacity:1}
.pn-vitem__progress,.pn-vitem__rail,.pn-vitem__stage,.pn-vgate{display:none}
/* Body (.pcard__b): strip, time · views, the caption in full, "+n more" chip. */
.pn-vitem__meta{display:grid;gap:4px;min-width:0;padding:12px 14px 14px}
.pn-vitem__title{margin:0;font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-vitem__views .pn-sep{margin:0 5px}
.pn-vitem__views .pc-ico{width:13px;height:13px;margin-right:3px;vertical-align:-2px}
.pn-vitem__desc{margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink);overflow-wrap:break-word;text-wrap:pretty}
.pn-vitem__desc:empty{display:none}
.pn-vlist > .pn-vitem .pn-vitem__desc{display:block;min-height:1.4em}
/* vcard 05.10.: the grid tile has no body; its strip, time and caption live in .pn-vitem__cap on the poster (feed, player
   and lightbox keep the body and hide the cap, below). */
.pn-vlist > .pn-vitem > .pn-vitem__meta{display:none}
.pn-vitem__cap{position:absolute;inset:auto 0 0;z-index:4;display:flex;flex-direction:column;gap:5px;padding:14px 12px 11px;min-width:0;color:var(--scard-ink);text-shadow:var(--scard-tshadow);pointer-events:none}
.pn-vitem__cap::before{content:"";position:absolute;inset:-26px 0 0;z-index:-1;background:var(--pcard-cap-shade);pointer-events:none}
.pn-vlist > .pn-vitem.is-noposter .pn-vitem__cap::before{background:var(--pcard-cap-shade),var(--media-shade)}   /* the soft poster is near white in light: a deeper foot under the kicker */
.pn-vitem__tier{order:-1;margin-bottom:-1px;font:600 10.5px/1 var(--font-label);letter-spacing:0;color:var(--pink);white-space:nowrap}
.pn-vitem__ctitle{margin:0;min-width:0;font:600 14px/1.25 var(--font-sans);color:var(--scard-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;text-wrap:pretty}   /* 2 lines max, the title attribute has the rest */
.pn-vitem__by{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px;font:500 13px/1.2 var(--font-sans);color:var(--scard-ink-2);white-space:nowrap}
.pn-vitem__by > .pc-avatar{width:22px;height:22px;border-color:var(--line);font-size:10px;text-shadow:none}
.pn-vitem__cav--brand{background:var(--anthracite);color:var(--cream);font:700 11px/1 var(--font-display);text-transform:none}
.pn-vitem__cav--brand > i{position:absolute;right:4px;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--pink)}   /* the wordmark's dot */
.pn-vitem__cname{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--scard-ink)}
.pn-vitem__cname:not(.is-brand)::before{content:"@"}
.pn-vitem__cname.is-brand{font-weight:600;color:var(--scard-ink-2)}
.pn-vitem__cscore{flex:none;display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--scard-ink)}
.pn-vitem__cscore .pc-ico{width:11px;height:11px;color:var(--pink);fill:currentColor;stroke:none;filter:drop-shadow(var(--scard-tshadow))}
.pn-vitem__cviews{flex:none;display:inline-flex;align-items:center;gap:3px;min-height:20px;margin-left:auto;padding:3px 7px 3px 6px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--scard-glass);color:var(--scard-ink);font:700 10.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;text-shadow:none;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.pn-vitem__cviews > span[aria-hidden]{display:inline-flex;align-items:center;gap:3px}
.pn-vitem__cviews .pc-ico{width:12px;height:12px}
@media (max-width:700px){
  .pn-vitem__cap{padding:12px 10px 9px;gap:4px}
  .pn-vitem__ctitle{font-size:14px}
  .pn-vitem__by{font-size:12px}
  .pn-vitem__tier{font-size:10px;letter-spacing:.14em}
  .pn-vitem__lock{top:8px;left:8px}
  .pn-vitem__chips{top:8px;left:8px;right:8px}
}
/* Narrow cells (2 columns on a 360 / 390 phone): smaller type, the view count steps aside — as the listing card's count. */
@container pn-vitem (max-width:175px){
  .pn-vitem__cap{padding:10px 9px 8px;gap:4px}
  .pn-vitem__ctitle{font-size:13px;line-height:1.22}
  .pn-vitem__by{gap:5px;min-height:20px;font-size:12px}
  .pn-vitem__by > .pc-avatar{width:20px;height:20px;font-size:9px}
  .pn-vitem__cviews{display:none}
}

/* Seller strip: avatar 22, @name 600 13 (ellipsis + title), age, flag, score. */
.pn-vstrip{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink);text-decoration:none;font:600 13px/1.3 var(--font-sans)}
.pn-vstrip__who{display:grid;gap:2px;min-width:0}
.pn-vstrip__line{display:flex;align-items:center;gap:6px;min-width:0}
.pn-vstrip__name{min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.pn-vstrip .pn-vstrip__name::before{content:"@"}
.pn-vstrip__age{flex:none;font-weight:500;color:var(--ink-2)}
/* polish r4: the seller's Premium on a video card = the seller card's star disc top left of the poster (.pc-scard__prem),
   never a second star next to the rating. The feed and the player keep it clear of their own corner labels. */
.pn-vitem__prem .pc-ico{stroke:none}
.pn-vstrip .pn-flag{flex:none;width:14px;height:14px;margin:0;border-radius:50%;object-fit:cover}
.pn-vstrip__score{flex:none;display:inline-flex;align-items:center;gap:3px;font-weight:700}
.pn-vstrip__score .pc-ico{width:12px;height:12px;color:var(--pink-glyph);fill:currentColor;stroke:none}
.pn-vstrip__status{font:400 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-vstrip--lg{gap:12px;font-size:16px}
.pn-vstrip--lg .pn-vstrip__line{gap:8px}
.pn-vstrip--lg .pc-badge{flex:none}
@media (max-width:440px){.pn-vstrip--lg .pn-vstrip__line{flex-wrap:wrap;row-gap:4px}}   /* polish r3: the Premium label steps to its own row before @name shortens */
.pn-vstrip.is-collection{gap:6px;color:var(--ink-2);font:600 12px/1.3 var(--font-sans)}
.pn-vstrip.is-collection .pc-ico{flex:none;width:14px;height:14px}
a.pn-vstrip:hover .pn-vstrip__name{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
a.pn-vstrip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
@media (max-width:700px){.pn-vlist .pn-vstrip__score,.pn-vlist .pn-vstrip .pn-flag{display:none}}

/* Unlock panel = .box--dk (pc-box pc-box--dk): lock circle, card head, one line, the button, a quiet link. */
.pn-vgate{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;text-align:center}
.pn-vgate__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--chrome-line);color:var(--pink)}
.pn-vgate .pn-vgate__h{margin:4px 0 0;max-width:22ch;color:inherit;text-wrap:balance}
.pn-vgate__fomo{margin:0;max-width:34ch;font:400 14px/1.45 var(--font-sans)}
.pn-vgate .pc-btn{margin-top:8px;max-width:340px}
.pn-vgate__free{display:inline-flex;align-items:center;min-height:32px;font:700 14px/1.2 var(--font-sans);color:var(--pink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pn-vgate__free:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}

/* Rail buttons (feed, detail, lightbox). The label is always real text; how it sits depends on the arrangement. */
.pn-vrail{text-decoration:none}
.pn-vrail--av{position:relative;display:inline-flex;align-items:center;gap:8px;color:inherit}
.pn-vrail__plus{display:none}
.pn-vlike.is-on .pc-ico{fill:currentColor}
.pn-vsound .pc-ico + .pc-ico,.pn-vsound[aria-pressed="true"] .pc-ico:first-child{display:none}
.pn-vsound[aria-pressed="true"] .pc-ico + .pc-ico{display:block}

/* Stage: the one <video>/<iframe> while an item plays. */
.pn-vitem__stage video,.pn-vitem__stage iframe{display:block;width:100%;height:100%;border:0;background:var(--anthracite);object-fit:cover}
.pn-vitem.is-landscape .pn-vitem__stage video{object-fit:contain;background:transparent}
.pn-vunavail{position:absolute;inset:0;z-index:7;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;color:var(--on-chrome);background:var(--backdrop);font:600 14px/1.45 var(--font-sans)}
.pn-vunavail .pc-ico{width:24px;height:24px;color:var(--pink)}
/* Like burst: the pink heart pops and fades (no tilt). */
.pn-vburst{position:absolute;left:50%;top:50%;z-index:8;width:110px;height:110px;margin:-55px 0 0 -55px;color:var(--pink);pointer-events:none;animation:pn-vburst .8s var(--ease-pop) forwards}
.pn-vburst .pc-ico{width:110px;height:110px;fill:currentColor;stroke:currentColor}
@keyframes pn-vburst{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:translateY(-120px) scale(1.25);opacity:0}}
/* Skeletons while the next page loads: the tile geometry with the kit shimmer. */
.pn-vskel{pointer-events:none}
.pn-vskel .pn-vitem__media{background:var(--ph-media)}
.pn-vskel i{position:relative;overflow:hidden;display:block;height:12px;width:70%;margin:12px 14px 14px;border-radius:var(--radius-full);background:var(--sunken)}
.pn-vskel .pn-vitem__media::after,.pn-vskel i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--surface-veil) 50%,transparent 80%);transform:translateX(-100%);animation:pn-shimmer 1.4s linear infinite}
.pn-vend{margin:32px 0 0;text-align:center;color:var(--ink-2)}

/* ---------- phone feed (< 1024): one anthracite box, one video per swipe ---------- */
@media (max-width:1023px){
  .pn-vpage.is-feed .pn-vlist{display:block;height:var(--vfeed-h);overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--r-box);background:var(--dk-bg);scrollbar-width:none}
  .pn-vpage.is-feed .pn-vlist::-webkit-scrollbar{display:none}
  .pn-vpage.is-feed .pn-vlist:focus{outline:none}
  .pn-vpage.is-feed .pn-vlist:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
  .pn-vpage.is-feed > .pn-vmore{display:none}
  .is-feed .pn-vlist > .pn-vitem{display:block;height:var(--vfeed-h);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:var(--dk-bg);border:0;border-radius:0;color:var(--dk-ink);content-visibility:auto;contain-intrinsic-size:auto var(--vfeed-h)}
  .is-feed .pn-vitem__media{position:absolute;inset:0;aspect-ratio:auto}
  .is-feed .pn-vitem__shade{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--shade-card)}
  .is-feed .pn-vitem__stage{display:block;position:absolute;inset:0;z-index:1}
  .is-feed .pn-vitem__stage[hidden]{display:none}
  .is-feed .pn-vitem.is-landscape .pn-vitem__poster{filter:blur(16px) brightness(.7);transform:scale(1.15)}
  .is-feed .pn-vitem__chips{top:14px;left:14px;right:80px}
  .is-feed .pn-vitem__lock,.is-feed .pn-vitem__scrub{display:none}
  /* vcard 05.10.: the feed keeps its own look: no rounded frame or line on the poster, the body strip on the dark
     shade, the poster caption off, the lock chip centred when it is the only hint. */
  .is-feed .pn-vlist > .pn-vitem{container-type:normal}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__media{border-radius:0;clip-path:inset(0)}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__media::before{content:none}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__media > .pn-vitem__shade{background:var(--shade-card)}
  .is-feed .pn-vlist > .pn-vitem > .pn-vitem__meta{display:grid}
  .is-feed .pn-vitem__cap{display:none}
  .is-feed .pn-vitem__lock{top:50%;left:50%;transform:translate(-50%,-50%)}
  /* T27: one pink per page: only the first locked item of the feed shows the unlock panel, the next ones the lock pill. */
  .is-feed .pn-vitem.is-locked ~ .pn-vitem.is-locked .pn-vgate{display:none}
  .is-feed .pn-vitem.is-locked ~ .pn-vitem.is-locked .pn-vitem__lock{display:inline-flex}
  .pn-vpage.is-feed > .pn-vunlock{display:none}
  .is-feed .pn-vitem__play{opacity:0}
  .is-feed .pn-vitem.is-paused .pn-vitem__play{opacity:1}
  .is-feed .pn-vitem__progress{display:block;position:absolute;left:0;right:0;bottom:0;z-index:6;height:3px;background:var(--media-track)}
  .is-feed .pn-vitem__progress i{display:block;width:var(--p,0%);height:100%;background:var(--pink)}
  /* Text bottom left, on dark. */
  .is-feed .pn-vitem__meta{position:absolute;left:16px;right:84px;bottom:18px;z-index:5;gap:6px;padding:0}
  /* T16: on-media colours only for strips that sit on the video; the ?s= seller head (.pn-vseller, paper) keeps the ink. */
  .is-feed .pn-vitem .pn-vstrip,.is-feed .pn-vitem__desc{color:var(--on-media)}
  .is-feed .pn-vitem .pn-vstrip{font-size:15px}
  .is-feed .pn-vitem .pn-vstrip .pc-avatar{display:none}
  .is-feed .pn-vitem .pn-vstrip__age,.is-feed .pn-vitem__title,.is-feed .pn-vitem .pn-vstrip.is-collection{color:var(--on-media-2)}
  .is-feed .pn-vitem__desc{font-size:14px;line-height:1.4}
  /* Rail (right): her avatar with the pink ring, then the 44 circles with the chrome line, each with its label. */
  .is-feed .pn-vitem__rail{display:flex;flex-direction:column;align-items:center;gap:14px;position:absolute;right:10px;bottom:24px;z-index:5}
  .is-feed .pn-vrail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:72px;height:auto;min-width:0;text-align:center;padding:0;border:0;border-radius:0;background:none;color:var(--on-media);font:600 11px/1.2 var(--font-sans)}
  .is-feed .pn-vrail .pc-ico{box-sizing:content-box;width:22px;height:22px;padding:10px;border:1px solid var(--chrome-line);border-radius:50%;background:var(--glass)}
  .is-feed .pn-vrail:hover .pc-ico{border-color:transparent}
  .is-feed .pn-vlike.is-on .pc-ico{background:var(--pink);border-color:transparent;color:var(--anthracite)}
  .is-feed .pn-vrail--av .pc-avatar{width:44px;height:44px;border:0}
  .is-feed .pn-vrail__plus{display:none}
  .is-feed .pn-vrail:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:var(--r-label)}
  .is-feed .pn-vsound[hidden]{display:none}
  .is-feed .pn-vgate{display:grid;position:absolute;left:16px;right:84px;top:50%;z-index:6;max-width:340px;margin:0 auto;transform:translateY(-50%)}
  .is-feed .pn-vskel{height:var(--vfeed-h)}
  .is-feed .pn-vskel .pn-vitem__media{position:absolute;inset:0;aspect-ratio:auto;background:var(--dk-card)}
  .is-feed .pn-vend{padding:32px 16px;color:var(--dk-ink-2);scroll-snap-align:end}
}

/* ---------- detail (.pn-vsolo) and lightbox (.pn-vbox): the player + a side column ---------- */
.pn-vsolo .pn-vitem,.pn-vbox .pn-vitem{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "gate" "meta" "rail";gap:18px}
.pn-vsolo .pn-vitem__media,.pn-vsolo .pn-vitem__stage,.pn-vbox .pn-vitem__media,.pn-vbox .pn-vitem__stage{grid-area:stage;justify-self:center;width:min(100%,calc(78svh * 9 / 16));aspect-ratio:9/16;border:1px solid var(--line);border-radius:var(--r-pcard);overflow:hidden;isolation:isolate;background:var(--anthracite)}   /* owner 30.09.: the rounded corners must clip the poster and the blur */
.pn-vsolo .pn-vitem__stage,.pn-vbox .pn-vitem__stage{display:block;position:relative;z-index:6;overflow:hidden}
.pn-vsolo .pn-vitem__stage[hidden],.pn-vbox .pn-vitem__stage[hidden]{display:none}
.pn-vsolo .pn-vitem__play,.pn-vbox .pn-vitem__play{opacity:1}
.pn-vsolo .pn-vitem__meta,.pn-vbox .pn-vitem__meta{grid-area:meta;gap:8px;padding:0}
.pn-vsolo .pn-vstrip .pc-avatar,.pn-vbox .pn-vstrip .pc-avatar{width:40px;height:40px;font-size:16px;border:0}
.pn-vsolo .pn-vstrip,.pn-vbox .pn-vstrip{font-size:16px}
.pn-vsolo .pn-vitem__title,.pn-vbox .pn-vitem__title{font-size:13px}
.pn-vsolo .pn-vitem__desc,.pn-vbox .pn-vitem__desc{font-size:16px;line-height:1.55}
.pn-vsolo .pn-vitem__rail,.pn-vbox .pn-vitem__rail{grid-area:rail;display:flex;flex-wrap:wrap;gap:8px}
/* Rail as line pills (.tabs-app look): icon + label, 44 tall. */
.pn-vsolo .pn-vrail,.pn-vbox .pn-vrail{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-full);background:transparent;color:var(--ink);font:600 13px/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.pn-vsolo .pn-vrail:hover,.pn-vbox .pn-vrail:hover{border-color:var(--line-3)}
.pn-vsolo .pn-vrail .pc-ico,.pn-vbox .pn-vrail .pc-ico{width:18px;height:18px}
.pn-vsolo .pn-vrail--av,.pn-vbox .pn-vrail--av{padding-left:4px}
.pn-vsolo .pn-vrail--av .pc-avatar,.pn-vbox .pn-vrail--av .pc-avatar{width:34px;height:34px;font-size:13px}
.pn-vsolo .pn-vlike.is-on,.pn-vbox .pn-vlike.is-on{background:var(--pink);border-color:transparent;color:var(--anthracite)}
.pn-vsolo .pn-vsound,.pn-vbox .pn-vsound{display:none}
.pn-vsolo .pn-vgate,.pn-vbox .pn-vgate{grid-area:gate;display:grid}
.pn-vsolo .pn-vitem__chips,.pn-vbox .pn-vitem__chips{top:14px;left:14px;right:14px}
.pn-vsolo .pn-vitem:not(.is-open) .pn-vitem__media,.pn-vbox .pn-vitem:not(.is-open) .pn-vitem__media{aspect-ratio:4/5;width:min(100%,calc(46svh * 4 / 5))}
.pn-vsolo .pn-vitem__lock,.pn-vbox .pn-vitem__lock{left:50%;top:auto;bottom:16px;transform:translateX(-50%)}
/* vcard 05.10.: the player and the lightbox keep the strip column; the poster caption is the grid's, and a locked player
   shows the lock chip + the unlock panel, no play disc. */
.pn-vsolo .pn-vitem__cap,.pn-vbox .pn-vitem__cap{display:none}
.pn-vsolo .pn-vitem:not(.is-open) .pn-vitem__play,.pn-vbox .pn-vitem:not(.is-open) .pn-vitem__play{display:none}
@media (min-width:1024px){
  .pn-vsolo .pn-vitem,.pn-vbox .pn-vitem{grid-template-columns:auto minmax(300px,420px);grid-template-rows:auto auto 1fr;grid-template-areas:"stage meta" "stage rail" "stage gate";justify-content:start;column-gap:40px;row-gap:18px;align-items:start}
  .pn-vsolo .pn-vitem__media,.pn-vsolo .pn-vitem__stage{width:auto;height:max(420px,min(calc(100vh - 240px),780px))}
  .pn-vbox .pn-vitem{justify-content:center}
  .pn-vbox .pn-vitem__media,.pn-vbox .pn-vitem__stage{width:auto;height:min(84vh,860px)}
  /* Detail page: the player flush with the content column's left edge, the side column takes the rest. */
  .pn-vsolo .pn-vitem{grid-template-columns:auto minmax(320px,1fr);justify-content:stretch}
  .pn-vsolo .pn-vitem:not(.is-open) .pn-vitem__media,.pn-vbox .pn-vitem:not(.is-open) .pn-vitem__media{width:clamp(280px,calc(60svh * 4 / 5),440px);height:auto}
}
.pn-vsec{margin-top:var(--sec-gap)}
.pn-vsec .pn-vlist + .pn-more{margin-top:26px}
/* polish r4: section heads at the profile's section scale (30 / 26): the h1 stays the one big head of the page. */
.pn-vsec > .pc-sechead .pc-h-m{font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0}

/* Lightbox: the backdrop, text on chrome, chrome squares for close / prev / next. */
.pn-vbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:40px 96px 40px 40px;border:0;border-radius:0;background:var(--backdrop);color:var(--on-chrome);box-shadow:none;overflow:auto}
.pn-vbox::backdrop{background:var(--scrim)}
.pn-vbox .pn-vstrip,.pn-vbox .pn-vitem__desc{color:var(--on-chrome)}
.pn-vbox .pn-vstrip__age,.pn-vbox .pn-vitem__title,.pn-vbox .pn-vstrip__status{color:var(--on-chrome-2)}
.pn-vbox .pn-vrail{border-color:var(--chrome-line);color:var(--on-chrome)}
.pn-vbox .pn-vrail:hover{border-color:transparent}
.pn-vbox__x{position:absolute;top:20px;right:20px;z-index:9}
.pn-vbox__nav{position:absolute;right:20px;z-index:9}
.pn-vbox__prev{top:calc(50% - 50px)}
.pn-vbox__next{top:calc(50% + 10px)}

/* Filter sheet (.pn-sheet): kicker labels over chip groups. */
.pn-vsheet__in{display:grid;gap:12px}
.pn-vsheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.pn-vsheet__head h2{margin:0}
.pn-vsheet__x{position:relative;top:auto;right:auto}
.pn-vsheet__label{margin:8px 0 0;font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink)}
.pn-vsheet .pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-vsheet .pc-chip .pc-ico{width:16px;height:16px}
.pn-vsheet .pc-btn--block{margin-top:14px}

/* Toast (limit, offline, copied): the kit toast above the dock. */
.pn-vtoast{position:fixed;left:50%;bottom:calc(var(--dock) + var(--toast-gap));z-index:var(--z-toast);transform:translateX(-50%);max-width:calc(100vw - 32px)}
.pn-vtoast[hidden]{display:none}
@media (min-width:701px){.pn-vtoast{bottom:var(--toast-low)}}

@media (prefers-reduced-motion:reduce){
  .pn-vskel .pn-vitem__media::after,.pn-vskel i::after{animation:none}
  .pn-vburst{display:none}
  .pn-vitem__play,.pn-vitem__scrub,.pn-vitem__poster,.pn-vlist > .pn-vitem{transition:none}
}

/* Phone feed: one compact tool row (the Sellers | Videos tabs left, layout + filter right), then the feed fills the
   rest of the viewport (videos.js fit()). The page head and the chip rows live in the filter sheet meanwhile. */
@media (max-width:1023px){
  .pn-main:has(> .pn-vpage.is-feed){padding-top:12px}
  .pn-vpage.is-feed{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .pn-vpage.is-feed > *{grid-column:1 / -1}
  .pn-vpage.is-feed > .pn-vhead{grid-column:1;align-self:center}
  .pn-vpage.is-feed > .pn-vbar{grid-column:2;grid-row:1;align-self:center}
  .pn-vpage.is-feed > .pn-vseller{grid-row:2}
  .pn-vpage.is-feed .pn-vhead .pn-apphead__row,.pn-vpage.is-feed .pn-vhead .pc-sub,.pn-vpage.is-feed .pn-vhead .pn-backchip{display:none}
  .pn-vpage.is-feed .pn-vhead .pc-apphead__tabs{margin-top:0}
  .pn-vpage.is-feed > .pn-vbar > .pn-vchips,.pn-vpage.is-feed .pn-vsortchip{display:none}
  .pn-vpage.is-feed .pn-vbar__sheet{display:inline-grid}
}
.pn-vunavail .pc-btn{color:var(--on-chrome);border-color:var(--chrome-line)}
.pn-vunavail .pc-btn:hover{border-color:transparent;background:transparent;color:var(--on-chrome)}
/* QA fixes: the poster may scale (blur) without widening the tile's scroll box; captions and the "+n more" chip wrap in
   narrow tiles; the collection label is not a name, so it wraps too; the unlock button fits the feed on one line. */
.pn-vitem__media.pc-media{overflow:visible;clip-path:inset(0)}
/* polish r1: the grid rule above must not undo the owner's 30.09. rounded clip on the player page and in the lightbox. */
.pn-vsolo .pn-vitem__media.pc-media,.pn-vbox .pn-vitem__media.pc-media{contain:paint;clip-path:inset(0 round var(--r-pcard))}   /* paint containment: the scaled blur never widens the page */
@media (max-width:700px){.pn-vsolo .pn-vitem.is-locked:not(.is-open) .pn-vitem__media{width:100%}}   /* the locked blur lines up with the gate card */
.pn-vitem__desc{overflow-wrap:anywhere}
.pn-vstrip.is-collection .pn-vstrip__name{white-space:normal;overflow:visible}
@media (max-width:1023px){
  .is-feed .pn-vgate{padding:18px}
  .is-feed .pn-vgate .pc-btn{padding-inline:14px;white-space:normal;text-wrap:balance;text-align:center}   /* layout_qa: the label overflowed the 188 px gate on 360 / 390 */
  .is-feed .pn-vgate .pc-btn .pc-ico{display:none}
}

/* ---------- polish r4: the single video page ----------
   The h1 is the video (her short caption, which then leaves the side column; else @handle). The actions are even: on
   phones two equal columns (the long "custom video" pill takes the last row whole), from 701 the share button is the
   icon square at the end of the pill row (its name stays in aria-label + title), so no pill is ever left alone. */
.pn-vdetail.is-captioned > .pn-vsolo .pn-vitem__desc{display:none}
@media (max-width:700px){
  .pn-vsolo .pn-vitem__rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pn-vsolo .pn-vrail{width:100%;min-width:0;padding-inline:12px}
  .pn-vsolo .pn-vrail[form="pnVCustom"]{order:1;grid-column:1 / -1}
  .pn-vsolo .pn-vitem__rail > .pn-vshare:first-child{grid-column:1 / -1}   /* her own video: share alone, full width */
}
@media (min-width:701px){
  :is(.pn-vsolo,.pn-vbox) .pn-vshare{width:44px;padding:0}
  :is(.pn-vsolo,.pn-vbox) .pn-vshare .pn-vrail__t{display:none}   /* the name stays in aria-label + title */
}
/* ≥ 1024, open video: "More from @x" moves into the column beside the 9:16 player (one row of tiles under the actions),
   so the side column is not 500px of empty paper. The player spans the rows (subgrid); the last side row takes the
   rest of its height. Locked: the unlock panel fills the column and the rail stays below. */
@media (min-width:1024px){
  .pn-vdetail.has-side{grid-template-columns:auto minmax(320px,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:40px}
  .pn-vdetail.has-side > *{grid-column:1 / -1}
  .pn-vdetail.has-side > .pn-vhead{grid-row:1}
  .pn-vdetail.has-side > .pn-vsolo{display:contents}
  .pn-vdetail.has-side > .pn-vsolo > .pn-vitem{grid-column:1 / -1;grid-row:2 / span 3;grid-template-columns:subgrid;grid-template-rows:subgrid;grid-template-areas:"stage meta" "stage rail" "stage .";row-gap:18px}
  .pn-vdetail.has-side > .pn-vsec--more{grid-column:2;grid-row:4;align-self:start;margin-top:14px}
  .pn-vdetail.has-side > .pn-vsec--next{grid-row:5}
  .pn-vdetail.has-side > .pn-vsec--more .pc-sechead{margin-bottom:14px}
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist{--dt-cols:repeat(2,minmax(0,1fr));--dt-gap:14px}
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist > :nth-child(n+3){display:none}
}
@media (min-width:1280px){
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist{--dt-cols:repeat(3,minmax(0,1fr))}
  .pn-vdetail.has-side > .pn-vsec--more .pn-vlist > :nth-child(3){display:grid}
}
/* pnew page group: account (v3, docs/design-v3-system.md §4) — "Your corner" (me), settings, the account frame the
   alerts page sits on, the hero stat (alerts FOMO, seller nudge card) and the chrome toast.
   The mockup app frame (design/v2/cast-mockup.html .app): ui_apphead (h-m + .sub + .tabs-app), then the view.
   Places kit components only: no new colour, radius, font size, button or pill look. */

/* ---------- Your corner (/account/): the active view + the account side card ---------- */
.pn-corner{display:grid;gap:0;align-content:start;min-width:0}
.pn-corner .pn-stack > .pn-nudgestack{margin:0}
.pn-corner__view{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
/* View panels: the paper card with the card head (30 / 26) and a count label, the see-all link bottom right. */
/* My listings: the listing card (adcard2 03.10.: the photo is the card, so already flat inside the panel) 4 across on
   desktop, 2 on phones (mockup .pairs gap 18 / 12), the last tile = the dashed upload slot "New ad" (as tall as a photo).
   The caption's last line is the state (dot + word) where buyers see "@name". Paused and draft photos rest dimmed, sold
   ones lose some colour, and the price ticket goes quiet. */
.pn-corner__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.pc-slot.pn-corner__add{aspect-ratio:4/5;height:auto;gap:8px;color:var(--ink);font:700 13px/1.2 var(--font-sans);text-decoration:none;text-align:center;padding:12px}
.pc-slot.pn-corner__add .pc-ico{width:22px;height:22px}
.pn-mypair__state{gap:7px;font-weight:600}
.pn-mypair__state i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--scard-ink-3)}
.pn-mypair.is-live .pn-mypair__state i{background:var(--online)}
.pn-mypair.is-draft .pn-mypair__state i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--scard-ink-2)}
.pn-mypair.is-reserved .pn-mypair__state i,.pn-mypair.is-sold .pn-mypair__state i{background:var(--pink)}
.pn-mypair.is-paused .pc-media > img,.pn-mypair.is-paused .pc-media > picture > img,.pn-mypair.is-draft .pc-media > img,.pn-mypair.is-draft .pc-media > picture > img{opacity:.6}
.pn-mypair.is-sold .pc-media > img,.pn-mypair.is-sold .pc-media > picture > img{filter:grayscale(.4)}
.pn-mypair:is(.is-paused,.is-draft,.is-sold) .pc-card__ticket{background:var(--scard-glass-hover);color:var(--scard-ink-2)}
.pn-mypair.is-live .pn-mypair__state{color:var(--scard-ink)}
/* Favourites: the seller tiles in a row (mockup .sellers gap 26 / 14). */
.pn-corner__sellers{display:flex;flex-wrap:wrap;gap:26px}
.pn-corner__favstrip{margin-top:22px}
.pn-corner__favdoor{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-5)}
.pn-corner__favdoor > .pc-sechead{margin:0;flex:1 1 280px}
.pn-corner__favdoor .pc-help{margin:6px 0 0;max-width:52ch}
.pn-corner__sellers > .pc-sellertile{flex:none}
/* polish-b 02.10.: Saved pairs = the listing cards straight on the page (no card in a card), the sm head of the panels
   over them; columns by width (the wide-grid column counts are for full-width grids, this one sits beside the side card). */
.pn-corner .pn-split .pn-corner__savedgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--wide-grid-gap)}
.pn-corner__saved > .pc-sechead{margin-bottom:var(--space-4)}
.pn-corner__saved + .pn-panel{margin-top:var(--app-gap)}
/* Latest chats: the app rows; the unread dot sits before the chevron. */
.pn-corner__panel .pn-rows{padding-bottom:var(--space-1)}
.pn-cornerchat .pc-avatar{flex:none}
/* The preview wraps (long words break anywhere); the name is one line with an ellipsis and its title, as in the
   chats list (owner rule: only names may shorten). */
.pn-cornerchat .pn-row__main > span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.pn-cornerchat .pn-row__main > b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  .pn-corner__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pn-corner .pn-split .pn-corner__savedgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pn-corner__sellers{gap:14px}
}

/* ---------- Me: the profile card of the side column ---------- */
.pn-mehead{display:grid;gap:var(--space-5)}
.pn-mehead__link{display:flex;align-items:center;gap:var(--space-4);min-width:0;color:inherit;text-decoration:none;border-radius:var(--r-rules)}
.pn-mehead__link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
.pn-mehead__who{flex:1;display:grid;justify-items:start;gap:var(--space-2);min-width:0}
/* The name = card head (.care h3 30 / 26); "@" by CSS like the seller tile, never in the text. Long handles wrap. */
.pn-mehead__who > b{max-width:100%;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.pn-mehead__who > b::before{content:"@"}
.pn-mehead__link:hover .pn-mehead__who > b{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px}
.pn-mehead__badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pn-mehead__since{font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
/* Owner 30.09.: no profile picture yet — a small camera button sits on the avatar's lower right (the avatar is 84 and
   centred in the row, so the button follows it however the name wraps); it leads to the editor's picture block. */
.pn-mehead__top{position:relative;min-width:0}
.pn-mehead__cam{position:absolute;left:54px;top:calc(50% + 12px);width:36px;height:36px;background:var(--surface);border-color:var(--line-3);color:var(--ink)}
.pn-mehead__cam .pc-ico{width:18px;height:18px}
.pn-mehead__cam:hover{background:var(--ink);color:var(--surface)}
.pn-mehead__cam:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Two counters: the in-card tile (sunken, radius 18), the number in the price role; values never clip, labels wrap. */
.pn-mehead__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.pn-mehead__stats.is-one{grid-template-columns:minmax(0,1fr)}
/* polish r4: "All read" is a quiet meta line (no fill, no tile), not a control. */
.pn-mehead__allread{display:flex;align-items:center;gap:6px;margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-mehead__allread .pc-ico{flex:none;width:16px;height:16px;color:var(--success)}
.pn-mehead__stats > a{display:grid;gap:6px;align-content:center;min-height:76px;padding:14px 16px;border-radius:var(--r-rules);background:var(--sunken);color:inherit;text-decoration:none;transition:background-color var(--dur-fast)}
.pn-mehead__stats > a:hover{background:var(--surface-2);box-shadow:none}   /* owner 05.10.: no light mint hover on dark */
.pn-mehead__stats > a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-mehead__stats b{max-width:100%;font:700 var(--fs-num,22px)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-mehead__stats span{max-width:100%;font:400 13px/1.3 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere;text-wrap:balance}
:root[data-theme="dark"] .pn-mehead__stats > a:hover{background:var(--chrome-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-mehead__stats > a:hover{background:var(--chrome-2)}}

/* ---------- Account sheet (the side card of Your corner): grouped rows ---------- */
/* One sheet per column: groups separated by air and the kicker-type group label (tonal pass 05.10.: no inset line). */
.pn-acctsec{min-width:0;scroll-margin-top:calc(var(--header-h) + var(--space-4))}
.pn-acctsheet .pn-grouplabel{margin:0;padding:var(--space-4) var(--row-inset) var(--space-2)}
.pn-acctsheet > .pn-acctsec{position:relative}
.pn-acctsheet > .pn-acctsec:not([hidden]) ~ .pn-acctsec:not([hidden]){margin-top:var(--space-3);padding-top:var(--space-2)}
.pn-acctsheet .pn-rows{padding-bottom:var(--space-1)}
/* Menu sub lines wrap (it/fr/pt are long) instead of clipping with an ellipsis. */
.pn-acctsheet .pn-row__main > span:not([class]){white-space:normal;text-overflow:clip}
.pn-acctsheet .pn-row .pc-badge{flex:none}

/* ---------- Hero stat (alerts FOMO, seller nudge card): the dark box with the tile number (mockup .box--dk + .tile) ---------- */
.pn-herostat{position:relative;display:grid;gap:var(--space-4);margin:0;padding:var(--panel-pad);border:1px solid transparent;border-radius:var(--r-box);background:var(--dkbox);color:var(--dk-ink)}
.pn-herostat p{margin:0}
.pn-herostat__main{display:grid;justify-items:start;gap:6px;min-width:0}
.pn-herostat__n{font:700 var(--fs-tile,39px)/1 var(--font-display);color:var(--pink);font-variant-numeric:tabular-nums}
.pn-herostat__l{max-width:none;margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--dk-ink);overflow-wrap:break-word;hyphens:manual}
.pn-herostat__pills{display:flex;flex-wrap:wrap;gap:8px}
.pn-herostat__pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:8px 12px;border:1px solid transparent;background:var(--dkbox-tile);border-radius:var(--radius-full);color:var(--dk-ink);font:700 12px/1 var(--font-sans)}
.pn-herostat__pill b{font:700 14px/1 var(--font-display);color:var(--pink);font-variant-numeric:tabular-nums}
.pn-herostat__pill .pc-ico{width:14px;height:14px;color:var(--pink)}
.pc-btn.pn-herostat__cta:not(.pc-btn--primary):not(.pc-btn--premium){border-color:var(--line);color:var(--dk-ink);background:transparent}
.pc-btn.pn-herostat__cta:not(.pc-btn--primary):not(.pc-btn--premium):hover{border-color:transparent}
@media (min-width:701px){
  .pn-herostat{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--space-6)}
  .pn-herostat__main{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:var(--space-4)}
  .pn-herostat__l{margin:0 0 4px}
  .pn-herostat__pills{grid-column:1}
  .pn-herostat__cta.pc-btn--block{grid-column:2;grid-row:1 / span 2;align-self:end;width:auto}
}
@media (max-width:700px){.pn-herostat__n{font-size:var(--fs-tile,40px)}}

/* ---------- Alerts rows (the alerts page sits on this frame) ---------- */
.pn-alert{min-height:64px}
/* Filtering hides rows/groups with [hidden]; the line is drawn only between rows that are visible. */
.pn-acctsheet > .pn-acctsec[hidden]{display:none}


/* ---------- Settings: the groups as panels in two balanced columns (≥1000), one column on phones ---------- */
.pn-set{display:grid;gap:0;align-content:start;min-width:0}
/* The groups sit in the .pn-pair primitive (app.css): two balanced columns from 1000, Blocked spans both. */
@media (min-width:1000px){
  .pn-set__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-set__wide{grid-column:1 / -1}
}
/* polish r4: the section pills are jump links; from 1024 every group is on screen in the two columns, so they go. */
@media (min-width:1024px){.pn-set .pc-apphead__tabs:has(> [data-spy]){display:none}}
.pn-setpanel{scroll-margin-top:calc(var(--header-h) + var(--space-4))}
.pn-setpanel > .pc-sechead{margin-bottom:var(--space-2)}
.pn-setpanel .pn-rows{margin:0 calc(-1 * var(--space-3))}
.pn-setpanel .pn-rows .pn-row{padding-inline:var(--space-3)}
.pn-togglerow{cursor:pointer;min-height:68px;margin:0}
.pn-togglerow .pn-row__main > span{white-space:normal}
.pn-togglerow:hover{background:var(--sunken)}
.pn-row.is-locked{cursor:default}
.pn-row.is-locked .pn-row__main > b{color:var(--ink-2)}
.pn-lock-ico{flex:none;color:var(--ink-3)}
.pn-row.pn-row--danger .pn-row__main > b{color:var(--danger)}
.pn-setpanel a.pn-row .pc-badge{flex:none}
/* Help lines wrap (fr "Comparer les offres et les prix" beside the plan pill) instead of an ellipsis. */
.pn-setpanel .pn-row__main > span{white-space:normal;overflow:visible;text-overflow:clip}
/* A bigger hit area around the 52 x 30 switch without changing its look. */
button.pc-switch::before{content:"";position:absolute;inset:-7px -4px}
/* Blocked members: the same rows; the empty line and the lede are plain muted text. */
.pn-blocklede{margin:0 0 var(--space-2);font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-blockempty{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-2) 0;font:600 14px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-blockempty[hidden],.pn-blocklist[hidden]{display:none}
.pn-blockempty .pc-ico{flex:none;color:var(--success)}
.pn-blocklist{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.pn-pair__wide .pn-blocklist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}}
.pn-blockrow{min-height:64px;transition:opacity .2s ease,transform .2s ease}
.pn-blockrow.is-leaving{opacity:0;transform:translateX(12px)}
.pn-blockrow .pc-avatar{flex:none;width:44px;height:44px}
.pn-blockrow .pn-mask__lock{width:24px;height:24px}
.pn-blockrow__name{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-blockrow__name:hover b{text-decoration:underline}
.pn-blockrow form{flex:none;margin:0}

/* Toast: one definition in components.css (UX polish 23.10. UX-038; it was doubled here with z 60) */

@media (prefers-reduced-motion:reduce){
  .pn-mehead__stats > a,.pn-blockrow{transition:none}
}

/* ---------- Your corner > Following / Followers (owner 03.10.) ----------
   The rows are sell-home's buyer rows (partials/card_buyer, partials/row_follow) in the corner's narrower column: the
   same wrap rules as .pn-sellhome (the actions drop under the name, the name and the status line are never cut), one
   column until the column is wide enough for two. */
.pn-corner .pn-buyerrow{flex-wrap:wrap;row-gap:10px}
.pn-corner a.pn-card-link.pn-row__lead{flex:1 1 200px}
.pn-corner .pn-buyerrow .pn-row__main > span{white-space:normal}
.pn-followrow .pn-follow{min-width:132px}
.pn-followsaved{margin-top:var(--space-6)}
.pn-followlock{display:grid;gap:var(--space-4);justify-items:start}
.pn-followlock__text{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ink-2);font:500 15px/1.45 var(--font-sans)}
.pn-followlock__text .pc-ico{flex:none;width:16px;height:16px;color:var(--ink)}
@media (min-width:900px) and (max-width:1279px){
  .pn-corner .pn-buyerrows{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .pn-corner .pn-buyerrow__acts{padding-left:64px}   /* under the name: the 52 avatar + the 12 gap */
}
@media (max-width:380px){
  .pn-corner .pn-buyerrow__acts{flex:1 1 100%;min-width:0;padding-left:0}
  .pn-corner .pn-buyerrow__acts > .pc-btn,.pn-corner .pn-buyerrow__acts .pn-follow{flex:1 1 0;min-width:0}
}

/* ---------- legacy home (docs/ml-home-03-10.md): Your corner, lists, onboarding on legacy's rows ---------- */
.pn-lhstats{padding:var(--panel-pad)}
.pn-lhstats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
@media (min-width:720px){.pn-lhstats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:720px){.pn-lhstats__grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}   /* A9: a buyer has two tiles */
/* A9 (owner 18.10.): a buyer's home has listing pictures to buy — the cards of the market, two across on phones, four on wide screens */
.pn-lhpicks{display:grid;gap:var(--space-3);padding:var(--panel-pad)}
.pn-lhpicks > .pn-sechead,.pn-lhpicks > .pc-sechead{margin:0}
.pn-lhpicks__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:720px){.pn-lhpicks__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pn-lhstat{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico n" "l l";align-items:center;gap:6px 10px;min-height:84px;padding:14px 16px;border-radius:var(--r-rules);background:var(--sunken);color:inherit;text-decoration:none;transition:background-color var(--dur-fast)}
.pn-lhstat:hover{background:var(--surface-2);box-shadow:none}   /* owner 05.10.: no light mint hover on dark */
.pn-lhstat:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-lhstat__ico{grid-area:ico;display:grid;place-items:center;color:var(--ink-2)}
.pn-lhstat__n{grid-area:n;font:700 var(--fs-num,22px)/1 var(--font-display);font-variant-numeric:tabular-nums}
.pn-lhstat__l{grid-area:l;min-width:0;font:600 13px/1.25 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere}
.pn-lhstat.is-hot .pn-lhstat__n,.pn-lhstat.is-hot .pn-lhstat__ico{color:var(--pink-text)}
.pn-lhempty{display:grid;justify-items:start;gap:var(--space-2);padding:0 var(--space-3) var(--space-3)}
.pn-lhads__sum{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0 var(--space-3) var(--space-2)}
.pn-lhads__foot{padding:var(--space-2) var(--space-3) var(--space-3)}
.pn-lhstate{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-lhstate > i{width:8px;height:8px;border-radius:50%;background:var(--t-mute,var(--line));flex:none}
.pn-lhstate--live > i{background:var(--live)}
.pn-lhstate--review > i{background:var(--accent)}
.pn-lhstate--rejected > i{background:var(--danger)}   /* U27 (18.10.): My listings' states and dots (items.css .pn-listate) */
/* U4 (owner 18.10.): the listings nobody sees — one line on a tonal step (no frame), the fix a link */
.pn-lhfix{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 var(--space-3) var(--space-2);padding:10px 12px;border-radius:var(--r-rules);background:var(--sunken);font:600 13px/1.4 var(--font-sans);color:var(--ink)}
.pn-lhfix > svg{flex:none;color:var(--ink-2)}
.pn-lhfix > span{flex:1 1 200px;min-width:0}
.pn-lhfix a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pn-lhad__img{flex:none;width:56px;height:70px;border-radius:var(--r-rules);overflow:hidden}
.pn-lhad__img img{width:100%;height:100%;object-fit:cover;display:block}
.pn-lhad__noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--ink-2);background:var(--sunken)}
.pn-lhad .pn-row__main > b.pn-lhad__t{display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere}
/* Sales 500 VKF-054 / VKF-072 (switches vkf054, vkf072): a listing row's views and interest; her day line under the head */
.pn-lhad__stats{display:block;font:500 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-lhad .pn-row__main > .pn-lhad__fix{display:block;white-space:normal;overflow:visible;font:600 12.5px/1.35 var(--font-sans);color:var(--ink);text-decoration:underline;text-underline-offset:2px}   /* UX 01.11. SEL-31: the row's fix, whole */
.pn-lhday{display:flex;align-items:center;gap:6px;margin:0;font:600 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-lhday > svg{flex:none}
.pn-lhwait__ad{display:flex;align-items:center;gap:10px}   /* VKF-069 (switch vkf069): her listing in the waiting card */
.pn-lhwait__adimg{width:40px;height:50px}
.pn-lpwait{margin:0 0 var(--space-3)}   /* VKF-091 (switch vkf091): the profile editor's strip, outside a panel */
.pn-lhplan{display:grid;gap:var(--space-2);padding:var(--panel-pad)}
/* owner 07.10.: the free seller's waiting buyers, the first panel of her home */
.pn-lhwait{display:grid;gap:var(--space-2);padding:var(--space-3);background:var(--accent-soft);border-radius:var(--r-tile)}
.pn-lhwait h2,.pn-lhwait p{margin:0}
.pn-lhwait__meta{color:var(--pink);font:700 13px/1.3 var(--font-sans)}
.pn-lhwait__acts{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
/* night N1 (08.10.): the week line (#6) and her direct orders (#7) inside the waiting card: quiet ink, the order line a link */
.pn-lhwait__week,.pn-lhwait__orders{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:600}
.pn-lhwait__week svg,.pn-lhwait__orders svg{flex:none;color:var(--pink-text)}
.pn-lhwait__orders a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mline);min-height:24px;display:inline-flex;align-items:center}
.pn-lhwait__orders a:hover{text-decoration-color:var(--pink)}
@media (max-width:700px){.pn-lhwait__orders a{min-height:40px}}   /* phone: the link is a 40 px touch target */
/* night N1 #31: "Your privacy" on a seller's home (the rows of the account sheet, one quiet nickname line) */
.pn-lhpriv .pn-lhpriv__nick{display:flex;align-items:center;gap:8px;margin:0;padding:var(--space-2) var(--space-3) var(--space-3);color:var(--ink-2);font:600 13px/1.3 var(--font-sans)}
.pn-lhplan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.pn-lhplan__head h2{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head)}   /* h2.pc-h-s: the panel head (Sleek 08.10.; it had no rule and fell back to the browser 1.5em) */
.pn-lhplan .pc-btn{justify-self:start}
.pn-lhrows ul{margin:0;padding:0;list-style:none}
.pn-lhrow{flex-wrap:wrap;row-gap:8px}
.pn-lhrow__who{display:flex;align-items:center;gap:var(--space-3);flex:1 1 220px;min-width:0;color:inherit;text-decoration:none}
.pn-lhrow__who:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-rules)}
.pn-lhrow__who .pn-row__main{min-width:0}
.pn-lhrow__who .pn-row__main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-lhrow__acts{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.pn-lhpager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3)}
.pn-lhpills{max-width:100%;overflow-x:auto}
@media (max-width:480px){
  .pn-lhrow__acts{flex:1 1 100%;margin-left:0;padding-left:52px}
}
/* onboarding (legacy's /services/step1–3 in the wizard look) */
.pn-lhphoto{display:block;cursor:pointer}
.pn-lhphoto__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.pn-lhphoto.is-filled .pn-lhphoto__img{display:block}
.pn-lhphoto.is-filled .pn-crop__empty{display:none}
.pn-lhphoto__busy{position:absolute;inset:0;display:none;background:var(--scrim)}
.pn-lhphoto.is-busy .pn-lhphoto__busy{display:block}
.pn-lhphoto:focus-within{outline:3px solid var(--focus-ring);outline-offset:4px}
.pn-lhoffer{border:0;margin:16px 0 0;padding:0;min-width:0}
.pn-lhoffer .pn-offertile{min-height:72px}
.pn-lhoffer .pn-offertile:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-lhdone{display:grid;justify-items:center;text-align:center;gap:var(--space-2);padding-top:var(--space-4)}
.pn-lhdone__mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.pn-lhdone__acts{display:grid;gap:var(--space-2);width:100%;max-width:420px;margin-top:var(--space-3)}
/* night 05.10. (legacy twin of the seller wizard, docs/wizard-seller-audit-05-10.md): one pink key per screen. Step 1:
   "Choose photo" while the tile is empty, "Continue" once a photo is in (html.js flips the dock, the plain form keeps
   both for no-script browsers); the listing step holds the pnew editor in the wizard column; the go-live screen. */
.js .pn-wiz--lh:not(.has-photo) .pn-dock__filled{display:none}
.js .pn-wiz--lh.has-photo .pn-dock__empty{display:none}
.pn-wiz--lh .pn-dock__filled{display:block}
.pn-wiz--lh .pn-dock__empty{display:flex}
.pn-wiz--lh .pn-lhphoto{flex-shrink:0}
.pn-wiz--lh .pn-starters{gap:6px;margin-top:10px}
.pn-wiz--lh .pn-lhoffer{margin-top:16px}
.pn-wiz--lh .pn-wizfield{margin-top:20px}
.pn-wiz--lhlisting{max-width:800px}
.pn-wiz.pn-wiz--lhlisting .pn-hero{margin:0 0 var(--space-6)}   /* owner 05.10.: air between the tape H1 and the editor's first panel */
.pn-liedit--onb{max-width:none}
.pn-liedit--onb .pn-split{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.pn-liedit--onb .pn-panel{margin:0}
.pn-liedit--onb .pn-stack{gap:var(--space-3)}
.pn-liedit--onb .pn-ligrid{max-width:none}
.pn-liedit__how{margin:12px 0 0}
.pn-liedit--onb .pn-dock .pc-actionbar__note{margin:0 0 6px;text-align:center}
.pn-liedit--onb .pn-dock .pc-actionbar__note:empty{display:none}
.pn-lhlive{position:relative}
.pn-lhlive__sticker{position:absolute;right:0;top:-6px;transform:rotate(7deg)}
.pn-lhlive .pn-wiznext{margin-top:18px}
.pn-lhlive > .pn-hero{padding-right:120px}
@media (min-width:701px){.pn-wiz--lh .pn-dock__empty .pc-btn--block{width:auto;display:inline-flex}}
/* owner 05.10. ("gequetscht"): the follow lists are one narrow column on wide screens (a row spanning 1900px reads
   squeezed), and the panel does not repeat the page title — the page head already says Following / Followers. */
.pn-lp[data-lp-page="follow"] .pn-corner__panel{max-width:960px}
.pn-lp[data-lp-page="follow"] .pn-corner__panel > .pc-sechead{display:none}
/* owner 05.10. ("klebt oben dran"): the follow lists' panel keeps the app gap under the head band */
.pn-lp[data-lp-page="follow"] .pn-corner__panel{margin-top:var(--app-gap)}

/* bio page (owner 08.10., partials/bio_card.php): the "My page" card on her dashboard — her address in full, Copy link,
   Share, Edit page; a free seller one quiet line to Premium. Secondary keys only (the dashboard keeps its one pink key). */
.pn-biocard{display:grid;gap:var(--space-2);padding:var(--space-3)}
.pn-biocard__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pn-biocard__head .pc-h-s{margin:0;margin-right:auto}
.pn-biocard__live{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.2 var(--font-sans);color:var(--online)}
.pn-biocard__live i{width:8px;height:8px;border-radius:50%;background:var(--online)}
.pn-biocard__addr{margin:0;padding:10px 14px;border-radius:var(--r-btn);background:var(--sunken);border:1px solid var(--line);font:600 17px/1.35 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere}
.pn-biocard__addr b{font-weight:700;color:var(--ink)}
.pn-biocard__acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.pn-biocard__acts .pc-btn{width:100%;padding-left:10px;padding-right:10px}
.pn-biocard__acts .pc-btn.is-done{border-color:var(--online);color:var(--online)}
.pn-biocard__up{margin:0}
.pn-biocard__done:empty{display:none}
.pn-biocard__done{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:420px){
  .pn-biocard__acts{grid-template-columns:1fr 1fr}
  .pn-biocard__acts .pn-biocard__edit{grid-column:1 / -1}
}

/* ==========================================================================
   My content (owner 09.10., templates/my_content.php, lib/my_content.php): a seller's videos as a grid — thumbnail,
   state chip, date · views · likes, the "where it shows" button (→ the choice sheet) and Remove (→ the confirm sheet);
   the card on her dashboard (templates/partials/mc_card.php). Token-only. No pink key: every change is one tap, saved.
   ========================================================================== */
.pn-mc__panel{display:grid;gap:var(--space-4);padding:var(--space-4)}
.pn-mc__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.pn-mc__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:0}
.pn-mc__stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}   /* UX 01.11. SEL-42: the page's tiles without "Videos" */
.pn-mc__stats > div{display:grid;gap:6px;align-content:center;min-height:68px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-rules);background:var(--sunken)}
.pn-mc__stats dt{font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-mc__stats dd{margin:0;font:700 var(--fs-num,22px)/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-mc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-mc__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}}
@media (min-width:1024px){.pn-mc__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.pn-mc__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pn-mc__more{display:flex;justify-content:center;margin:0}
.pn-mc__more[hidden]{display:none}
.pn-mctile{display:grid;gap:8px;align-content:start;min-width:0;transition:opacity var(--dur-fast)}
.pn-mctile.is-busy{opacity:.6}
.pn-mctile__media{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--ph-media);color:var(--ink-2)}
.pn-mctile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--dur-fast)}
.pn-mctile.is-hidden .pn-mctile__media img,.pn-mctile.is-off .pn-mctile__media img,.pn-mctile.is-failed .pn-mctile__media img{opacity:.35}
.pn-mctile__state{position:absolute;left:8px;top:8px;z-index:2;max-width:calc(100% - 64px);white-space:normal;line-height:1.2;text-align:left}
.pn-mctile.is-saved .pn-mctile__media{border-color:var(--online)}
.pn-mctile__cap{display:grid;gap:2px;min-width:0;font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-mctile__cap b{overflow:hidden;font:600 13px/1.35 var(--font-sans);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.pn-mctile__acts{display:flex;align-items:center;gap:8px;min-width:0}
.pn-mcvis{flex:1;min-width:0;justify-content:space-between;gap:6px;padding-left:12px;padding-right:10px;letter-spacing:0}
.pn-mcvis > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mcvis .pc-ico{flex:none}
.pn-mctile.is-hidden .pn-mcvis{color:var(--ink-2)}
.pn-mctile__none{flex:1;min-width:0;font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}
/* A14 (owner 18.10., innen-50): the remove key on a photo / video is the standard round remove button — a dark glass disc
   with a drawn X (never the brightest thing on the tile, as the cream disc was) */
.pn-mcdel{position:absolute;top:6px;right:6px;z-index:2;width:36px;height:36px;min-width:36px;padding:0;border:0;border-radius:50%;background:var(--photo-key-bg);color:var(--white);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pn-mcdel:hover{background:var(--anthracite)}
.pn-mcdel .pc-ico{width:16px;height:16px;stroke-width:2.4}
.pn-mcsheet .pn-sheet__head{align-items:flex-start}
.pn-mcsheet .pn-sheet__head > div{flex:1;min-width:0}
.pn-mcsheet .pn-sheet__head .pc-help{margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-mcsheet .pn-sheet__x{flex:none;width:40px;height:40px}
.pn-mcsheet button.pn-row{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pn-mcsheet button.pn-row:hover{background:var(--sunken)}
.pn-mcsheet button.pn-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-mcsheet .pn-row__main > span{white-space:normal}
.pn-mcsheet__on{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--btn-ink);color:var(--on-btn-ink);visibility:hidden}
.pn-mcsheet button.pn-row[aria-checked="true"]{background:var(--sunken)}
.pn-mcsheet button.pn-row[aria-checked="true"] .pn-mcsheet__on{visibility:visible}
.pn-mcsheet--del form{display:grid;margin:0}
.pn-mcsheet--del .pn-sheet__title{margin-bottom:var(--space-2)}
.pn-mcsheet--del .pn-sheet__body{margin:0}
@media (min-width:701px){dialog.pn-mcsheet{width:min(440px,calc(100% - 32px))}}
.pn-mccard{display:grid;gap:var(--space-2);padding:var(--space-3)}
.pn-mccard__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
.pn-mccard__head .pc-h-s{margin:0}
.pn-mccard .pn-mc__stats > div{min-height:60px}
/* phase 2a: select mode (the checkbox on the thumbnail, the sticky bar above the phone tab bar) and the removed view */
.pn-mctile__pick{position:absolute;inset:0;z-index:3;display:none;align-items:flex-start;justify-content:flex-end;padding:8px;cursor:pointer}
.pn-mctile__pick .pc-check{width:28px;height:28px;border-radius:var(--r-chip);box-shadow:var(--sh-float)}
.pn-mc.is-select .pn-mctile__pick{display:flex}
.pn-mc.is-select .pn-mcdel,.pn-mc.is-select .pn-mctile__acts{display:none}
.pn-mctile.is-picked .pn-mctile__media{outline:2px solid var(--pink);outline-offset:2px}
.pn-mc.is-working .pn-mc__grid{opacity:.6;pointer-events:none}
.pn-mctile.is-removed .pn-mctile__media img{opacity:.35}
.pn-mcrestore{flex:1;min-width:0}
.pn-mcbar{position:sticky;bottom:calc(var(--dock, 0px) + 12px);z-index:var(--z-nav);display:grid;gap:10px;margin-top:var(--space-3);padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--surface);box-shadow:var(--sh-float)}
.pn-mcbar[hidden]{display:none}
/* phase 2b: the Photos tab (two stat tiles; the tile's key says and switches On profile / Hidden) */
.pn-mc__stats--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-mcphoto.is-private .pn-mctile__media img,.pn-mcphoto.is-review .pn-mctile__media img{opacity:.6}
.pn-mc.is-select .pn-ptoast{bottom:calc(var(--dock) + 178px + var(--toast-gap))}   /* the result line clears the bar */
.pn-mcbar__n{margin:0;font:600 14px/1.35 var(--font-sans);color:var(--ink)}
.pn-mcbar__link{padding:0;border:0;background:none;color:var(--ink-2);font:600 13px/1.35 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-mcbar__link[hidden]{display:none}
.pn-mcbar__link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-mcbar__acts{display:flex;flex-wrap:wrap;gap:8px}
.pn-mcbar__acts .pc-btn:disabled{opacity:.45;cursor:default}
@media (min-width:701px){.pn-mcbar{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
@media (prefers-reduced-motion:reduce){.pn-mctile,.pn-mctile__media img{transition:none}}
/* Video promotion (owner 09.10., templates/partials/vu_card.php): the upload card. Stage (drop zone → first frame → percent →
   check) beside the body with the one key of the moment; the rules under a 1 px grey line. Phone first: the stage is a
   flat strip on top and grows to 16:9 once a frame is in it; from 701 px it stands as a 4:5 tile on the left. */
.pn-vu{display:grid;gap:0;padding:0;overflow:hidden}
.pn-vu__main{display:grid;gap:var(--space-4);padding:var(--panel-pad)}
.pn-vu__stage{position:relative;display:grid;place-items:center;aspect-ratio:21/9;overflow:hidden;border:1px solid transparent;border-radius:var(--r-tile);background:var(--t-tint);color:var(--ink-2);text-align:center;font:500 13px/1.35 var(--font-sans);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.pn-vu__stage.has-thumb{aspect-ratio:16/9;border-style:solid}
.pn-vu__stage.is-over{border-color:transparent;background:var(--accent-soft);color:var(--ink)}
.pn-vu__stage:hover{color:var(--ink)}
.pn-vu__idle{display:grid;justify-items:center;gap:8px;padding:12px}
.pn-vu__idle .pc-ico{width:28px;height:28px}
.pn-vu__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-vu__stage.has-thumb .pn-vu__idle{display:none}
.pn-vu__len{position:absolute;right:8px;bottom:8px;padding:4px 7px;border-radius:var(--r-label);background:var(--anthracite);color:var(--on-dark);font:600 12px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.pn-vu__pct{position:absolute;inset:0;display:grid;place-items:center;background:var(--glass-strong);color:var(--on-dark);font:700 34px/1 var(--font-sans);letter-spacing:var(--tr-num);font-variant-numeric:tabular-nums}
.pn-vu__badge{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--success);color:var(--on-success)}
.pn-vu__pct[hidden],.pn-vu__len[hidden],.pn-vu__badge[hidden],.pn-vu__thumb[hidden]{display:none}
.pn-vu:not([data-state="idle"]):not([data-state="chosen"]):not([data-state="error"]) .pn-vu__stage{cursor:default;pointer-events:none}
.pn-vu:not([data-state="uploading"]) .pn-vu__pct{display:none}
.pn-vu__body{display:grid;gap:10px;align-content:center;min-width:0}
.pn-vu__body h2,.pn-vu__body p{margin:0}
.pn-vu__kicker{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--font-sans);color:var(--pink-text)}
.pn-vu__pane{display:grid;gap:10px;min-width:0}
.pn-vu__pane[hidden]{display:none}
.pn-vu__pane:focus{outline:none}
.pn-vu__acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:2px}
.pn-vu__acts label.pc-btn{cursor:pointer}
.pn-vu__acts > [hidden]{display:none}
.pn-vu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pn-vu:has(.pn-vu__input:focus-visible) .pn-vu__pane:not([hidden]) label.pc-btn{outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-vu__drop{display:none}
.pn-vu__link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mline)}
.pn-vu__link:hover{text-decoration-color:var(--pink)}
.pn-vu__pending{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--r-icon);background:var(--sunken);color:var(--ink);font:500 13px/1.4 var(--font-sans)}
.pn-vu__pending .pc-ico{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-vu__file{display:grid;gap:2px;min-width:0}
.pn-vu__file b{font:600 15px/1.3 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-vu__file span{color:var(--ink-2);font:400 13px/1.4 var(--font-sans);font-variant-numeric:tabular-nums}
.pn-vu__now{display:flex;align-items:flex-start;gap:8px;font:600 16px/1.3 var(--font-sans);color:var(--ink)}
.pn-vu__now .pc-ico{flex:none;margin-top:1px;color:var(--ink-2)}
.pn-vu__now--ok .pc-ico{color:var(--success)}
.pn-vu__now--err{font-weight:500;font-size:15px}
.pn-vu__now--err .pc-ico{color:var(--danger)}
.pn-vu__bar{position:relative;height:8px;border-radius:4px;background:var(--sunken);overflow:hidden}
.pn-vu__bar i{position:absolute;inset:0 auto 0 0;width:var(--vu-p,0%);border-radius:4px;background:var(--pink);transition:width .25s linear}
.pn-vu__bar.is-wait i{width:100%;background:linear-gradient(90deg,transparent,var(--pink) 50%,transparent);transform:translateX(-100%);animation:pn-shimmer 1.3s ease-in-out infinite}
.pn-vu__line{min-height:19px;color:var(--ink-2);font:500 13px/1.45 var(--font-sans);font-variant-numeric:tabular-nums}
.pn-vu__spin{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid var(--mline);border-top-color:var(--pink);animation:pc-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.pn-vu__bar.is-wait i{animation:none;transform:none;background:var(--pink);opacity:.5}.pn-vu__spin{animation:none}.pn-vu__bar i{transition:none}}
.pn-vu__rules{display:grid;gap:10px;padding:14px var(--panel-pad) 16px;border-top:0}
.pn-vu__rules p{margin:0}
.pn-vu__rulesh{display:flex;align-items:center;gap:8px;font:600 13px/1.2 var(--font-sans);color:var(--ink)}
.pn-vu__rulesh .pc-ico{color:var(--ink-2)}
.pn-vu__rulelist{list-style:none;margin:0;padding:0;display:grid;gap:6px 24px;color:var(--ink-2);font:500 13px/1.4 var(--font-sans)}
.pn-vu__rulelist li{position:relative;padding-left:14px}
.pn-vu__rulelist li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.pn-vu__nojs{margin:0;padding:0 var(--panel-pad) 16px}
.pn-vu .pc-btn{min-height:44px}
.pn-mc > .pn-vu{margin-bottom:var(--app-gap)}
@media (max-width:700px){.pn-vu[data-state="idle"] .pn-vu__stage,.pn-vu[data-state="error"] .pn-vu__stage:not(.has-thumb){display:none}}
@media (min-width:701px){
  .pn-vu__main{grid-template-columns:220px minmax(0,1fr);gap:24px}
  .pn-vu__stage,.pn-vu__stage.has-thumb{aspect-ratio:4/5}
  .pn-vu__rulelist{grid-template-columns:1fr 1fr}
  .pn-vu .pc-btn{min-height:var(--control-btn)}
}
@media (hover:hover) and (pointer:fine){.pn-vu__drop{display:inline}.pn-vu__tap{display:none}}
/* saved delivery address (owner 16.10., lib/saved_addr.php): the settings section */
.pn-sva-edit{margin-top:var(--space-3)}
.pn-sva-edit > summary{list-style:none;cursor:pointer;width:max-content}
.pn-sva-edit > summary::-webkit-details-marker{display:none}
.pn-sva-form{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.pn-sva-del{margin-top:var(--space-3)}
/* Verkäufe 500 MKT-062 / MKT-066 (lib/mkt_more.php, switches mkt062 / mkt066): her market's number and her invite link in the corner */
.pn-lhmarket{display:flex;align-items:center;gap:6px;margin:0 0 var(--space-2)}
.pn-lhmarket > svg{flex:none;color:var(--ink-2)}
.pn-lhinvite{display:grid;gap:8px}
.pn-lhinvite__url{width:100%;min-width:0;font:600 13px/1.4 var(--font-sans)}
/* signup: D — paysite (/membership/) and the pay step S9, v3 (docs/design-v3-system.md §4.6, cast-and-props.md §2 Paysite:
   no women, the kraft envelope with the pink seal on the pink arch is the only picture).
   Hero = the dark box (mockup .box--dk / .buy: pink kicker, h-l head, muted lede, chips on dark). Body = panels on duck egg:
   missing rows, benefits, the dashed rules box (terms), the .faq rows | the sticky plan card. Plans = paper rows with the
   line (selected = the pink ring), the recommended 6-month plan (owner 01.10.2026) is the dark tile with the pink price
   and the pink "Recommended" sticker (mockup .sticker); longer plans show the per-month price, the struck monthly total
   and the saving. Her shop in numbers = the kit .pc-tiles in the dark hero. Phone pay bar = sticky at the end of the form, above the tab bar (in flow, not fixed). */

/* ---------- Frame ---------- */
.pn-paysite{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);min-width:0}
.pn-paysite > *{min-width:0}
.pn-paysite.is-busy [data-pay-go]{opacity:.7;pointer-events:none}
.pn-paysite__alert{margin:0}
/* Sales 50 P2 (18.10.): the refusal line with its reason's sentence and one quiet action under it */
.pn-paysite__declt{flex:1;min-width:0}.pn-paysite__declt > p{margin:0}.pn-paysite__declt > .pn-paysite__declact{margin-top:10px}
.pn-num{font:700 1.15em/1 var(--font-display);font-variant-numeric:tabular-nums}
.pn-paysite .pc-ico.pn-starfill{fill:currentColor}

/* ---------- Hero: the dark box, text left, the arch + envelope right ---------- */
.pn-paysite__hero.pc-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px 40px;align-items:end;overflow:hidden;padding:48px 48px 44px}
.pn-memhero__txt{display:grid;justify-items:start;align-content:end;gap:18px;min-width:0}
/* justify-items:start sizes each line by its content: cap them at the column so a long es/pt head or eyebrow wraps inside. */
.pn-memhero__txt > *{max-width:100%;min-width:0;overflow-wrap:anywhere}
.pn-paysite__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0}
.pn-paysite__hero .pc-kicker{color:var(--pink)}
.pn-paysite__hero .pc-badge--premium{box-shadow:0 0 0 1px var(--line)}
.pn-paysite__h{max-width:24ch;margin:0;color:var(--white)}
.pn-paysite__hnum{color:var(--pink)}
/* 01.10.2026: "Start your business." + the pink tail ("Buyers are waiting." / her number / the open-order value). */
.pn-paysite__h.pn-paysite__h--biz{max-width:24ch}
.pn-paysite__htail{display:block;color:var(--pink)}
/* Her shop in numbers: the kit tiles on the dark box, up to 4 in a row, 2 on phones; the locked one says so in pink. */
.pc-tiles.pn-paysite__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:100%;margin:0;padding:0;list-style:none}
.pn-paysite__tile{display:flex;min-width:0}
.pn-paysite__tile > .pc-tile{flex:1;min-width:0;padding:16px 18px}
.pn-paysite__tile .pc-tile b{font-size:32px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pn-paysite__tile .pc-tile p{font-size:13px;line-height:1.35}
.pn-paysite__tile.is-locked .pc-tile small{display:block;margin-top:6px;color:var(--pink)}
.pn-paysite__hero .pc-hand.pn-paysite__hand{margin:-6px 0 0;color:var(--pink)}   /* mockup .box .hand: not rotated */
.pn-paysite__lede{max-width:560px;margin:0;font:400 18px/1.5 var(--font-sans);color:var(--dk-ink-2)}
.pn-paysite__facts{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.pn-paysite__lines{display:contents;margin:0;padding:0;list-style:none}
.pn-paysite__facts .pn-paysite__chips{display:contents}
/* T65: the live stats are the kit .pc-chip--live (as on the landing); only the number is set in the display face. */
.pc-chip--live .pn-num,.pc-chip--live span > b{font:700 13px/1 var(--font-display);font-variant-numeric:tabular-nums}
.pn-paysite__lines .pc-chip{white-space:normal;text-align:left}
.pn-paysite__faces{display:flex;padding-left:10px}
.pn-paysite__faces .pc-avatar.pn-memhero__face{width:40px;height:40px;margin-left:-10px;border:2px solid var(--dk-bg)}
.pn-paysite__faces .pn-memhero__face.is-blur img{filter:blur(4px);transform:scale(1.15)}
/* @member-only */
/* A5 (owner 18.10.): three blurred faces, a "+N" disc for the rest, and the sentence that says who they are */
.pn-paysite__wrote{display:flex;align-items:center;gap:12px;margin:0;font:600 15px/1.35 var(--font-sans);color:var(--dk-ink)}
.pn-paysite__faces .pn-paysite__facemore{display:grid;place-items:center;background:var(--dk-card);color:var(--dk-ink);font:700 13px/1 var(--font-display);font-variant-numeric:tabular-nums}
/* A5: the live numbers and "N sellers are Premium" as one group — two by two on a phone; from 1000 px the proof line
   lives in the plan rail, so the hero drops its copy */
@media (max-width:700px){.pn-paysite__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pn-paysite__facts .pc-chip--live{min-width:0;white-space:normal;text-align:left}}
@media (min-width:1000px){.pn-paysite__live--proof{display:none}}
/* Sales 50 P3 (18.10.): the choice sheet after two refusals (built by the pay page's script); its "later" is a button styled as the page's quiet link */
button.pn-later.pn-paychoose__later{border:0;background:none;cursor:pointer}
/* @end-member-only */
.pn-paysite__from,.pn-paysite__discreet,.pn-paysite__waitdone{display:flex;align-items:center;gap:8px;margin:0;font:400 14px/1.45 var(--font-sans);color:var(--dk-ink-2)}
.pn-paysite__from{font:700 15px/1.2 var(--font-display);letter-spacing:0;color:var(--dk-ink)}
.pn-paysite__from .pc-ico,.pn-paysite__discreet .pc-ico,.pn-paysite__waitdone .pc-ico{flex:none;color:var(--pink)}
.pn-paysite__waitdone{color:var(--dk-ink)}
.pn-paysite__soon{font-size:15px}
.pn-paysite__buyeracts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
/* The art: the pink arch (mockup .arch at the /sell size) with the envelope standing on it, flush with the box bottom. */
.pn-paysite__art{position:relative;align-self:stretch;min-height:320px;margin:0 0 -44px}
.pn-paysite__art .pc-arch{width:320px;height:300px;border-radius:160px 160px 0 0}
.pn-paysite__art .pc-arch::after{border-radius:146px 146px 0 0}
.pn-paysite__env{position:absolute;left:50%;bottom:36px;width:250px;height:auto;transform:translateX(-50%)}
.pn-paysite__usd .pc-ico{flex:none}
@media (max-width:1100px){
  .pn-paysite__hero.pc-box{grid-template-columns:minmax(0,1fr) 240px;padding:36px 32px 32px}
  .pn-paysite__art{min-height:240px;margin-bottom:-32px}
  .pn-paysite__art .pc-arch{width:230px;height:220px;border-radius:115px 115px 0 0}
  .pn-paysite__art .pc-arch::after{border-radius:101px 101px 0 0}
  .pn-paysite__env{width:180px;bottom:26px}
}
/* AD4 03.10.: the page h1 is the app head (h-m 44 / 32), never hero-sized, so the tablet / narrow-phone clamps are gone. */
/* Up to 900 px the buyer's long copy takes the whole box (as on phones): the art column would squeeze it into a 700 px
   tower. The short seller heroes keep the arch beside them. */
@media (min-width:701px) and (max-width:900px){
  .pn-paysite__hero--buyer.pc-box{grid-template-columns:minmax(0,1fr)}
  .pn-paysite__hero--buyer .pn-paysite__art{display:none}
}
@media (max-width:700px){
  .pn-paysite__hero.pc-box{grid-template-columns:minmax(0,1fr);padding:26px 22px 24px}
  .pn-paysite__art{display:none}
  .pn-memhero__txt{gap:14px}
  .pn-paysite__lede{font-size:16px}
  .pn-paysite__buyeracts{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .pn-paysite__buyeracts .pc-btn{width:100%;justify-content:center}
  .pc-tiles.pn-paysite__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pn-paysite__tiles > li:last-child:nth-child(odd){grid-column:1 / -1}
  .pn-paysite__tile > .pc-tile{padding:14px}
  .pn-paysite__tile .pc-tile b{font-size:var(--fs-tile,36px)}
}

/* ---------- Body: panels | the sticky plan card (≥1000) ---------- */
.pn-paysite__body{--split-side:380px}   /* the .pn-split primitive (app.css) with the 380 plan card */
@media (min-width:1000px){
  .pn-paysite__body:not(:has(> .pn-split__side)) .pn-paysite__bens.pn-benefits2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}   /* buyer path / active: no plan card, the panels take the row */
  .pn-proofchip.pn-paysite__proofphone{display:none}
}
@media (max-width:999px){
  .pn-proofchip.pn-paysite__proofrail{display:none}
  /* One column: the plans come right after what Premium opens; the pay bar carries the CTA. */
  .pn-paysite__main{display:contents}
  .pn-paysite__missing{order:1}.pn-paysite__proofphone{order:2}.pn-paysite__ben{order:3}.pn-paysite__side{order:4}.pn-paysite__terms{order:5}.pn-faq{order:6}
  .pn-paysite:has(.pn-psbar) .pn-paysite__sideacts{display:none}
}
.pn-paysite__sect{min-width:0;margin:0}
.pn-paysite__label{display:block;margin:0 0 12px}

/* What she is missing: masked rows, the blurred filler, the time and the ink lock label. */
.pn-missrows{margin:0 calc(-1 * var(--space-3))}
.pn-missrow .pc-avatar{flex:none;width:44px;height:44px}
.pn-missrow__tx > b{white-space:normal;overflow-wrap:anywhere}
.pn-row__main > .pn-missrow__blur{display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere;filter:blur(4px);user-select:none}
.pn-missrow__end{flex:none;display:grid;justify-items:end;gap:6px;font:400 12px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-missrow:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* Phones: the time and the "Premium only" pill go under the text, so the hint keeps its width. */
@media (max-width:480px){
  .pn-missrow{flex-wrap:wrap}
  .pn-missrow__end{flex:1 1 100%;grid-auto-flow:column;justify-content:start;align-items:center;gap:10px;padding-left:56px}
}

/* What Premium opens: rows with the 44 round line control, two across on wide panels. */
.pn-benefits2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px}
@media (min-width:701px){.pn-paysite__bens.pn-benefits2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-benefit{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;align-content:start}
.pn-benefit .pn-rowicon{grid-row:span 2}
.pn-benefit b{padding-top:3px;font:600 15px/1.3 var(--font-sans);color:var(--ink)}
.pn-benefit > span:not(.pn-rowicon){font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}

/* The terms: the dashed rules box. */
.pn-terms{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 28px;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-terms li{display:flex;gap:10px;font:400 13px/1.45 var(--font-sans);color:var(--ink)}
.pn-terms .pc-ico{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ink)}

/* FAQ (mockup .faq): the question in the card head (26 / 21), the chevron turns, a line under each row. */
.pn-faq{margin:0}
.pn-faq details{max-width:none}
.pn-faq details:not([open]) > p{display:none}   /* a closed answer has no box (no phantom rect under the pay bar) */
.pn-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;color:var(--ink);overflow-wrap:break-word}
.pn-faq summary::-webkit-details-marker{display:none}
.pn-faq summary .pc-ico{flex:none;transition:transform var(--dur-base) var(--ease-snap)}
.pn-faq details[open] summary .pc-ico{transform:rotate(180deg)}
.pn-faq summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pn-faq p{font:400 15px/1.5 var(--font-sans)}
.pn-faq p a{color:var(--ink);font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:700px){.pn-faq summary{font-size:var(--fs-sub-s,21px)}}

/* ---------- The plan card ---------- */
.pn-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.pn-plans > .pc-sechead{margin-bottom:0}
.pn-paysite__sideacts{display:grid;gap:8px}
.pn-paysite__sideacts .pc-btn{justify-content:center;white-space:normal;text-align:center}
.pn-plans__fine{margin:0;text-align:center}
/* Sales 50 P14 (18.10.): what half of the listings here are priced at, next to one month of Premium (over the plans) */
.pn-paysite__salemonth{display:flex;gap:8px;align-items:flex-start;margin:0 0 14px;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-paysite__salemonth .pc-ico{flex:none;margin-top:1px}
/* Sales 50 P10 (18.10.): "why not now?" under "Not now": a small question, tonal chips, the tapped chip's answer */
.pn-paysite__why{display:grid;gap:10px;margin-top:4px;justify-items:center;text-align:center}
.pn-paysite__why[hidden],.pn-paysite__whya[hidden]{display:none}
.pn-paysite__whyq{margin:0;font:600 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-paysite__whychips{justify-content:center}
.pn-paysite__whya{margin:0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-proofchip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:12px 14px;border-radius:var(--r-rules);background:var(--sunken);font:400 13px/1.35 var(--font-sans);color:var(--ink)}
.pn-proofchip .pc-badge{flex:none}
.pn-proofchip .pn-num{font-size:18px}
.pn-devnote{margin:0;padding:10px 14px;background:var(--sunken);border-radius:var(--r-rules);font:400 12px/1.4 var(--font-sans);color:var(--ink-2)}

/* Plan picker (§4.13 C): the method pills, then one radio row per plan. */
.pn-planpick{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.pn-planpick [hidden]{display:none}
.pc-seg.pn-planpick__seg{display:grid;grid-template-columns:1fr 1fr}
.pn-planlist{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pn-plan{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 12px;align-items:center;min-height:86px;padding:16px 18px;border:1px solid transparent;border-radius:var(--r-rules);background:var(--sunken);color:var(--ink);cursor:pointer;transition:border-color var(--dur-fast),background-color var(--dur-fast)}
/* Tonal pass 05.10.: a plan is a sunken tile in the panel; selected = the pink ring (a state, not a divider). */
.pn-plan:hover{background:var(--surface-2)}
.pn-plan:has(input:checked){border-color:transparent;box-shadow:none}
.pn-plan:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-plan__main{display:grid;gap:6px;min-width:0}
.pn-plan__days{display:block;font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);color:inherit}
.pn-plan__pm{font:700 13px/1.2 var(--font-sans);color:var(--ink)}
.pn-plan__end{display:grid;justify-items:end;gap:6px;text-align:right}
.pn-plan__price{font:700 29px/1 var(--font-display);font-variant-numeric:tabular-nums;color:inherit}
.pn-plan__was{font:400 12px/1.2 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.pn-plan__was s{text-decoration-thickness:1px}
.pn-plan__save{margin-left:4px;font:700 12px/1 var(--font-display);letter-spacing:0;color:var(--ink)}
.pn-plan__terms{grid-column:2 / 4;font:400 12px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-sticker.pn-plan__badge{top:-12px;right:16px;left:auto}   /* AD-200: top right, clear of the plan's label */
.pn-plan.pn-plan--reco{margin-top:6px;padding-top:24px}
/* The 380 px plan card: the struck total sits above the saving, so "12 months" keeps one line next to the price. */
.pn-paysite__side .pn-plan__was{display:grid;justify-items:end;gap:4px}
.pn-paysite__side .pn-plan__save{margin-left:0}
.pn-paysite__side .pn-plan__days{font-size:var(--fs-plan,24px);white-space:nowrap}
/* The recommended plan (6 months) = the dark tile (mockup .tile): pink price and saving, on-dark text; selected = the pink ring. */
.pn-plan.pn-plan--reco{background:var(--dkbox-tile);color:var(--dk-ink)}
.pn-plan--reco .pn-plan__price,.pn-plan--reco .pn-plan__save{color:var(--pink)}
.pn-plan--reco .pn-plan__pm{color:var(--dk-ink)}
.pn-plan--reco .pn-plan__terms,.pn-plan--reco .pn-plan__was{color:var(--dk-ink-2)}
.pn-plan--reco input.pc-radio{background:transparent;border-color:var(--dk-ink-2)}
.pn-plan--reco input.pc-radio:checked{background:var(--pink);border-color:var(--pink)}
.pn-plan--reco input.pc-radio:checked::after{background:var(--anthracite)}
.pn-plan.pn-plan--reco:hover{background:var(--chrome-press)}
.pn-plan.pn-plan--reco:has(input:checked){border-color:transparent;box-shadow:none}
.pn-plan.is-disabled{opacity:.5;cursor:not-allowed}
/* night N1 #10 (08.10.): a longer plan leads with its per-month price ("$9.99/month"); the unit small, the billed amount under its name */
.pn-plan__price--pm{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap}
.pn-plan__unit{font:600 13px/1 var(--font-sans);color:var(--ink-2)}
.pn-plan--reco .pn-plan__unit{color:var(--dk-ink-2)}
.pn-plan__billed{font-weight:600;color:var(--ink-2)}
.pn-plan--reco .pn-plan__billed{color:var(--dk-ink-2)}
.pn-planpick .pn-plans__fine{display:flex;gap:8px;text-align:left;font:400 12.5px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-planpick .pn-plans__fine[hidden]{display:none}
.pn-planpick .pn-plans__fine .pc-ico{flex:none;width:16px;height:16px;margin-top:1px}
@media (max-width:374px){
  .pn-plan__days{font-size:var(--fs-plan,22px)}
  .pn-plan__price{font-size:26px}
}
@media (max-width:400px){
  .pn-plan{padding:16px 14px;column-gap:10px}
  .pn-plan__was{white-space:normal}
}

/* Trust row under the CTA (owner 01.10.): small check lines, only what is true for the plans on offer. */
.pn-paytrust{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:14px 0 0;list-style:none}
.pn-paytrust li{display:flex;align-items:flex-start;gap:8px;font:400 12.5px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-paytrust .pc-ico{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ink)}
.pn-paysite--golive .pn-paytrust{margin-top:16px}

/* "I'll pay later" / "Not now": a 44 px text link, muted, underlined. */
.pn-later{display:inline-flex;align-items:center;justify-content:center;justify-self:center;min-height:44px;padding:0 18px;font:700 14px/1 var(--font-sans);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}
.pn-later:hover{color:var(--ink)}
.pn-later:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-full)}
.pn-later__sub{margin:-6px 0 0;text-align:center;font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}

/* ---------- Phone pay bar: the action bar (line on top, duck egg), sticky above the tab bar ---------- */
.pn-psbar{display:none}
@media (max-width:999px){
  .pn-psbar{position:sticky;bottom:var(--dock);z-index:var(--z-bar);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;margin:0 calc(-1 * var(--gutter));padding:12px var(--gutter) 10px;background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
  .pn-psbar__plan{display:grid;gap:4px;min-width:0;margin:0}
  .pn-psbar__price{font:700 22px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
  .pn-psbar__plan small{font:400 12px/1.3 var(--font-sans);color:var(--ink-2)}
  .pn-later.pn-psbar__later{grid-column:1 / -1;min-height:36px;font-size:13px}
  .pn-later.pn-psbar__tocrypto{grid-column:1 / -1;gap:6px;min-height:36px;font-size:13px}
  .pn-psbar__tocrypto[hidden]{display:none}
}
@media (max-width:999px) and (min-width:701px){.pn-psbar{bottom:0}}
/* AD4 03.10.: under 380 px (320 in es / fr / pt, 360 in fr / pt) "Assinar Premium" covered the price. There the plan
   line (price + plan, one baseline) sits on top and the key takes the full row under it. */
@media (max-width:379px){
  .pn-psbar{grid-template-columns:minmax(0,1fr);gap:8px}
  .pn-psbar__plan{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .pn-psbar__price{font-size:22px}
  .pn-psbar__go{width:100%}
}
/* Phones: the pay bar replaces the tab bar (paysite.js sets body.pn-has-adbar, the ad page's rule), so it sits on the edge. */
@media (max-width:700px){body.pn-has-adbar .pn-psbar{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
/* polish-b 02.10.: at the end of the page the bar (in flow) is the last thing before the footer, like the ad page's bar:
   no 116 px strip of empty page ground under it (the frame's dock padding is for the tab bar, which is hidden here). */
@media (max-width:700px){body.pn-has-adbar .pn-main:has(.pn-psbar){padding-bottom:0}}

/* ---------- S9 Go live (inside the wizard): the dark box hero, status chip, the docked CTA ---------- */
.pn-golive{position:relative;overflow:hidden;container-type:inline-size;display:grid;justify-items:start;gap:14px;padding:26px 22px;border:1px solid transparent;border-radius:var(--r-box);background:var(--dkbox);color:var(--dk-ink)}
.pn-statuspill--chrome{display:inline-flex;align-items:center;gap:8px;min-height:30px;margin:0;padding:8px 12px;border:1px solid transparent;background:var(--dkbox-tile);border-radius:var(--radius-full);color:var(--dk-ink);font:700 12px/1.2 var(--font-sans)}
.pn-statuspill__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--live)}
.pc-t-mega.pn-golive__h{margin:0;font-size:min(var(--fs-l),calc(100cqi / (var(--w,4) * .56)));line-height:var(--lh-hero);color:var(--white);overflow-wrap:anywhere;hyphens:manual}
.pc-t-mega.pn-golive__h:focus{outline:none}   /* focus target on step change (tabindex -1), not a control */
.pn-golive__tail{display:block;font-style:normal;color:var(--pink)}
.pn-golive__body{max-width:44ch;margin:0;font:400 16px/1.5 var(--font-sans);color:var(--dk-ink-2)}
.pn-golive__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pn-paysite--golive{gap:0}
.pn-paysite--golive .pn-paysite__sect{padding:22px 0 0}
.pn-paysite--golive .pn-faq{margin-top:22px}
.pn-paydock{position:sticky;bottom:0;z-index:var(--z-bar);display:grid;gap:6px;margin-top:28px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -14px 24px -16px var(--scrim)}
.pn-paydock .pc-btn{justify-content:center;white-space:normal;text-align:center}
.pn-paysite--golive .pn-paysite__dev{margin:var(--space-4) 0 0}
@media (min-width:701px){
  .pn-golive{padding:40px 44px}
  .pn-paysite--golive{max-width:720px;margin-inline:auto;width:100%}
}


@media (prefers-reduced-motion:reduce){
  .pn-faq summary .pc-ico,.pn-plan{transition:none}
}

/* ---------- build3 SH-1: seller home money head (partials/sellhome_head.php) ---------- */
/* Her money before the buyer list: big Archivo numbers on sunken tiles, the locked "buyers wrote you" tile in chrome
   with an accent lock, the Premium CTA naming the number. Tiles wrap: 2 per row on phones, up to 5 in a row on desktop. */
   /* typographer QA: a long CTA label never widens the panel past the phone (es/fr/it/pt) */


.pn-paysite__tocrypto{gap:6px}
/* Sales 500 VKF-058 / VKF-092 (switches vkf058, vkf092): one quiet tip above the key */
.pn-paysite__sstip{display:flex;align-items:flex-start;gap:6px;margin:0}
.pn-paysite__sstip > svg{flex:none;margin-top:2px}
.pn-paysite__sstip a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pn-paysite__heropay{display:none}
@media (min-width:1000px){.pn-paysite__heropay{display:flex}}
/* Verkäufe 500 PAY-051–100 (night 22./23.10., lib/pay_late.php): each rule styles a help that shows only behind its switch */
/* PAY-056: what happens after the tap, three quiet numbered steps under the pay button */
.pn-paysite__after{margin:4px 0 0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-paysite__afterh{margin:0 0 4px;font-weight:600;color:var(--ink)}
.pn-paysite__after ol{margin:0;padding-left:20px;display:grid;gap:2px}
/* PAY-054: the wish door's card with the wish's chips over the hero */
.pn-paysite__wish{display:grid;gap:8px}
.pn-paysite__wishh{display:flex;align-items:center;gap:8px;margin:0;font:400 14px/1.4 var(--font-sans);color:var(--ink)}
.pn-paysite__wishh small{color:var(--ink-2)}
.pn-paysite__wish .pc-chip{cursor:default}
.pn-paysite__wish .pc-sub{margin:0}
/* PAY-094: her last payments, folded, one quiet row each (date · way · term | state | action) */
.pn-paysite__paysh{cursor:pointer;font:600 15px/1.4 var(--font-sans);color:var(--ink)}
.pn-paysite__payl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.pn-paysite__payl li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-paysite__payl b{font-weight:600;color:var(--ink)}
/* Verkäufe 500 MKT-090 (switch mkt090): the support line under the plan card */
.pn-paysite__ask{margin:4px 0 0;text-align:center}
/* signup: A — the join pages on the v3 kit (design/v2/cast-mockup.html). Tokens only.
   Join bar = the header (.hdr: chrome, the grey 50 % line, 68 + 1 / 58 + 1, logo 26 / 22, the .hdr .btn login).
   Switch = the mockup's .join section as a page: h-m head, the muted line, two .door cards (radius 26, padding 28,
   1 px line, h3 Archivo 900 36 / 30 wdth 75, p 14, the .btn under it), one object per door (120 px), no faces.
   Buyer form = the app frame head (h-m + .sub) over a paper panel. The accent word = the pink .tape.
   No tabbar, no footer on /join/*. */

/* UX polish E (UX-008/010/011/015/025, 23.10.): the join/pay-page shift was the Caveat hand note wrapping in its fallback.
   The metric fallbacks 'Caveat FA' / 'Caveat FR' live once, in pages/detail.css (merge 23.10.: E had 71 %, B 76.3 %;
   measured in the DOM over 13 notes, 76.3 % matches Caveat within 1 %, 71 % is 6 % narrow). */

/* ---------- shell: the join bar = .hdr ---------- */
.pn-joinbody{background:var(--bg)}
.pn-joinnav{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:12px;min-height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));background:var(--t-chrome,var(--chrome));color:var(--on-chrome);border-bottom:1px solid var(--chrome-line);box-shadow:var(--sh-chrome,none)}
.pn-joinnav .pc-logo{color:var(--on-chrome);font-size:32px}   /* owner 05.10.: same wordmark size as the site header */
.pn-joinnav .pc-logo:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pn-joinnav__label{flex:1;min-width:0;color:var(--on-chrome);text-align:center}
.pn-joinnav__end{margin-left:auto;display:flex;align-items:center;gap:12px}
.pn-joinnav__have{font:600 14px/1 var(--font-sans);color:var(--on-chrome);opacity:.85}
.pn-joinnav .pc-btn--ghost{border-color:transparent;background:var(--chrome-well);color:var(--on-chrome)}
.pn-joinnav .pc-btn--ghost:hover{border-color:transparent;background:var(--chrome-well-hover)}
.pn-joinnav .pc-btn--ghost:focus-visible,.pn-joinnav .pc-iconbtn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pn-joinnav .pc-iconbtn{width:40px;height:40px;border-radius:var(--r-icon);border:1px solid transparent;background:var(--chrome-well);color:var(--on-chrome)}
@media (min-width:701px){
  .pn-joinnav{padding-inline:var(--col-pad);gap:32px}
  .pn-joinnav .pc-logo{font-size:38px}
}
.pn-main.pn-join{padding-top:48px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
@media (max-width:700px){.pn-main.pn-join{padding-top:28px;padding-bottom:calc(60px + env(safe-area-inset-bottom))}}

/* The accent word of a head = the pink .tape. The 18+ mark = the .real label family. */
.pn-accent-text{font-style:normal;background:var(--pink);color:var(--anthracite);padding:.02em .14em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn-adult{display:inline-flex;align-items:center;padding:6px 9px;margin:0 4px 0 0;border-radius:var(--r-label);background:var(--btn-ink);color:var(--on-btn-ink);font:700 11px/1 var(--font-display);letter-spacing:0;vertical-align:1px}

/* ---------- S0 switch = mockup .join ---------- */
.pn-joinswitch{display:block;max-width:860px;margin:0 auto;padding:0;text-align:center}
.pn-joinswitch__h{margin:0 0 10px;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
.pn-joinswitch__h:focus{outline:none}
.pn-joinswitch__lead{display:block;max-width:48ch;margin:0 auto 30px}
.pn-doors.pc-doors{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:70px;text-align:left}
.pn-door.pc-door{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-door);text-decoration:none;box-shadow:none;transition:border-color var(--dur-fast)}
.pn-door.pc-door:hover{border-color:transparent}
.pn-door.pc-door:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-door.is-intent{outline:0;box-shadow:0 18px 44px -20px var(--pink)}
.pn-door__h{margin:0;padding-right:96px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:inherit}
.pn-door.pc-door p{margin:0;font-size:14px}
.pn-door__obj{position:absolute;right:18px;top:-54px;width:120px;height:auto;filter:var(--fig-shadow);pointer-events:none}
.pn-door__obj--tag{display:block;width:96px;top:-66px;transform:rotate(-6deg)}
.pn-door__obj--tag img{display:block;width:100%;height:auto}
.pn-door__live{align-self:flex-start}
.pn-door .pn-door__cta{align-self:flex-start;margin-top:6px}
/* T52: both doors on one row grid (subgrid): the live pill row, the head, the text, the button line up across doors */
@media (min-width:701px){
  .pn-doors.pc-doors{grid-template-rows:auto auto 1fr auto;row-gap:0}
  .pn-door.pc-door{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  .pn-door__live{grid-row:1;justify-self:start;align-self:start}
  .pn-door__h{grid-row:2}
  .pn-door.pc-door > p{grid-row:3}
  .pn-door .pn-door__cta{grid-row:4;justify-self:start}
}
.pn-joinfoot{margin:26px 0 0;padding:0;text-align:center;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-joinfoot a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media (max-width:700px){
  .pn-doors.pc-doors{grid-template-columns:minmax(0,1fr);gap:40px;margin-top:52px}   /* polish r1: the envelope clears the lead */
  .pn-door__h{font-size:22px}
  .pn-door__obj{width:96px;top:-40px}
  .pn-door__obj--tag{width:80px;top:-56px}
}
@media (prefers-reduced-motion:reduce){.pn-door.pc-door{transition:none}}
/* polish r1: the buyer door wears the landing's door surface (anthracite with the soft pink / cyan glow) in both
   themes, so in dark it is a card of its own and not a hairline box on the page ground */
.pn-door--buy.pc-door{background:var(--lp-door-buy)}
/* polish r4: the sell door gets the landing's satin pink too, and both doors the landing's lift (no flat pink block
   with a hairline next to a lit buy door) */
.pn-door--sell.pc-door{background:var(--lp-door-sell);border-color:transparent}
.pn-doors .pc-door{border-color:transparent;box-shadow:var(--lp-inner-hi-dk),var(--lp-card-lift)}
.pn-doors .pn-door--sell.pc-door{box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
/* polish r1: desktop: the switch sits in the middle of the screen instead of on top of a half-empty page */
@media (min-width:701px){.pn-main.pn-join--switch{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - var(--header-h) - 1px);padding-bottom:64px}}

/* ---------- B1 buyer form + the account partial (S3 reuses it) = app frame head + paper panel ---------- */
.pn-join--form{display:flex;flex-direction:column}
.pn-joinpanel{display:flex;flex-direction:column;flex:1;width:100%;max-width:560px;margin:0 auto}
.pn-joinhead{margin:0 0 30px;padding:0}
.pn-joinhead__h{margin:0 0 6px;text-wrap:balance;hyphens:manual;overflow-wrap:break-word}
.pn-joinhead__h:focus{outline:none}
.pn-joinhead__h em{display:inline;font-style:normal}
.pn-joinhead__lede{margin:0;max-width:48ch}
/* role switch under the head (owner 06.10.): Sell | Buy, the form on screen is the dark pill */
.pn-joinrole{margin:-10px 0 20px}
.pn-joinrole > a{min-height:44px;padding:12px 18px;font-size:14px}
.pn-joinrole > a[aria-current="page"]{background:var(--accent);color:var(--on-accent);border-color:transparent}   /* the stock dark pill does not stand out on the dark page */
.pn-joinrole > a:not([aria-current]){border-color:var(--line)}
.pn-joinhead__hand.pc-hand{margin:10px 0 0;color:var(--pink-text)}   /* night QA D5: pink ink in light (plain pink 1.7:1), pink in dark */   /* mockup .hand: only the .how and .empty notes rotate */
.pn-joinbox.pn-panel{padding:var(--panel-pad)}
.pn-joinbox .pn-joinfield:first-of-type{margin-top:0}
.pn-joinform{display:flex;flex-direction:column;flex:1}
.pn-joinform p{margin:0}
.pn-joinfield{margin-top:20px}
.pn-joinform .pc-field{gap:8px}
.pn-joinform .pc-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pn-joinlabel small{font:400 12px/1.2 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.pn-joinaffix .pc-input{padding-right:48px}
.pn-joinaffix--pw .pc-input{padding-right:96px}
.pn-joinform .pc-help{padding:0 4px}
.pn-joinform .pc-help.is-ok{color:var(--ink);font-weight:700}
.pn-joinfield.is-error .pc-input{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.pn-joinfield.is-error .pc-input:focus{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--danger)}
.pn-joinfield.is-error > .pc-help{display:none}
.pn-okmark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--success);color:var(--on-success);flex:none}
.pn-okmark .pc-ico{width:17px;height:17px;stroke-width:3}
.pn-joinaffix .pn-okmark{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.pn-okmark[hidden]{display:none}
.pn-pwtoggle.pc-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.pn-pwtoggle.pc-btn:active{transform:translateY(-50%)}
.pn-fielderr{display:flex;gap:6px;align-items:flex-start;margin:0;padding:0 4px;color:var(--danger);font:700 13px/1.35 var(--font-sans)}
.pn-fielderr[hidden]{display:none}
.pn-fielderr .pc-ico{flex:none;width:16px;height:16px;margin-top:1px;stroke-width:2.6}
.pn-fielderr a,.pn-formerr a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pn-fielderr--form{margin-top:16px}
.pn-typo{align-self:flex-start}
.pn-typo[hidden]{display:none}
.pn-sugg{margin-top:2px}
.pn-sugg[hidden]{display:none}
.pn-checks{margin-top:12px}
.pn-checks .pn-joinfield{margin-top:0}
.pn-joinform .pn-checkrow{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 2px;font:400 14px/1.4 var(--font-sans);color:var(--ink);cursor:pointer}
.pn-joinform .pn-checkrow .pc-check{margin-top:-1px}
.pn-checks .pn-joinfield + .pn-joinfield .pn-checkrow{padding-top:2px}
/* polish-s 02.10.: a tick-box error sits under its own label text and keeps the next box at its distance (the first one's
   error was glued to the second box) */
.pn-checks .pn-joinfield > .pn-fielderr{margin:-2px 0 10px;padding-left:36px}
.pn-joinform .pn-checkrow a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-joinfield.is-error .pc-check{box-shadow:inset 0 0 0 1.5px var(--danger)}
.pn-joindock{position:sticky;bottom:0;z-index:var(--z-bar);display:flex;flex-direction:column;gap:4px;margin:auto calc(-1 * var(--panel-pad)) 0;padding:16px var(--panel-pad) calc(8px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--surface) 26%)}
.pn-fixcount{margin:0 0 8px;text-align:center;color:var(--danger);font:700 13px/1.3 var(--font-sans)}
.pn-fixcount[hidden],.pn-formerr[hidden]{display:none}
.pn-formerr{margin:0 0 8px;padding:10px 14px;border-radius:var(--r-rules);border:1px solid transparent;background:var(--t-danger,var(--danger-soft));color:var(--danger);font:700 13px/1.35 var(--font-sans);text-align:center}
.pn-joincta.is-busy{opacity:.75;cursor:progress}
.pn-devchip{display:flex;gap:8px;align-items:center;justify-content:center;margin:6px 0 0;padding:8px 12px;border-radius:var(--r-rules);border:0;background:var(--t-tint);color:var(--ink-2);font:400 12px/1.3 var(--font-sans);text-align:center}
.pn-devchip b{font:700 11px/1 var(--font-display);letter-spacing:0;color:var(--ink)}
.pn-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* polish r1: the three-field form fits in about 1.2 screens, so the dock stays in flow on every width
   (a sticky dock covered the Terms / Privacy line in the first phone viewport) */
.pn-joindock{position:static;margin:24px 0 0;padding:0 0 env(safe-area-inset-bottom);background:none}
/* mail login 07.10.: the confirmation page has no field above its one button, so the dock keeps no distance to one */
.pn-authform > input[type=hidden] + .pn-joindock{margin-top:0}

/* ---------- "You're in" toast: once, then it leaves by itself (the kit toast: chrome pill, the line) ---------- */
.pn-jointoast{position:fixed;left:50%;top:calc(var(--header-h) + env(safe-area-inset-top) + 12px);z-index:var(--z-toast);display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);min-height:44px;padding:7px 18px 7px 7px;border-radius:var(--radius-full);border:1px solid var(--chrome-line);background:var(--chrome);color:var(--on-chrome);box-shadow:var(--sh-float);font:700 14px/1.25 var(--font-sans);pointer-events:none;transform:translateX(-50%);animation:pn-jointoast 4.6s var(--ease-pop) both .2s}
.pn-jointoast__dev{margin-left:8px;padding-left:0;border-left:0;color:var(--on-chrome-2);font:700 11px/1 var(--font-display);letter-spacing:0}
@keyframes pn-jointoast{0%{opacity:0;transform:translate(-50%,-14px)}10%,86%{opacity:1;transform:translate(-50%,0);visibility:visible}100%{opacity:0;transform:translate(-50%,-8px);visibility:hidden}}   /* merge 23.10. (F note): visible until 86 %, else it went invisible at half time
@keyframes pn-jointoast-still{0%,86%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.pn-jointoast{animation-name:pn-jointoast-still;transform:translateX(-50%)}}

/* ---------- auth (docs/auth-03-10.md): login + lost password on the buyer form's frame. Tokens only. ----------
   Legacy's info message = a sunken note with the check (no new colour); legacy's errors = .pn-formerr.
   "Forgot your password?" sits right under the password; the alternative way (sign up / back to log in) sits under
   the panel as a plain line. */
.pn-authnote{display:flex;gap:8px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:var(--r-rules);background:var(--sunken);color:var(--ink);font:600 14px/1.4 var(--font-sans)}
.pn-authnote[hidden],.pn-authresend[hidden],.pn-authdone[hidden],.pn-authform[hidden]{display:none}
.pn-authnote .pc-ico{flex:none;width:16px;height:16px;margin-top:2px;stroke-width:2.6}
.pn-authform .pn-joinfield + .pn-joinfield{margin-top:18px}
.pn-authrow{display:flex;justify-content:flex-end;margin-top:14px}
.pn-authlink{color:var(--ink);font:700 14px/1.4 var(--font-sans);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-authlink:hover{text-decoration-color:var(--ink)}
.pn-authlink:focus-visible,.pn-authalt a:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:4px}
.pn-authresend{margin:0 0 12px;text-align:center}
.pn-authalt{margin:22px 0 0;text-align:center;color:var(--ink-2);font:400 15px/1.4 var(--font-sans)}
.pn-authalt a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-authdone{display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 0 4px;text-align:center}
/* owner 03.10.: after "created" only the success state shows — the register form (its own grid display beat [hidden]) goes */
form[data-legacy="register"][hidden],.pn-joinform[hidden]{display:none}
.pn-authpanel:has(.pn-authdone:not([hidden])) :is(.pn-rcnote,.pn-joinform__alt){display:none}
.pn-authdone > .pc-btn{align-self:stretch}
.pn-authdone__h{display:flex;flex-direction:column;gap:14px;align-items:center;margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink);outline:none}
.pn-authdone__h .pc-ico{flex:none;box-sizing:content-box;width:26px;height:26px;padding:15px;border-radius:50%;background:var(--accent);color:var(--on-accent);stroke-width:2.8}
.pn-authdone__p{margin:0;max-width:44ch;color:var(--ink-2);font:400 15px/1.55 var(--font-sans);text-wrap:balance}
.pn-authpanel:has(.pn-authdone:not([hidden])) .pn-authalt{display:none}
body.pn-joinbody .grecaptcha-badge{visibility:hidden}   /* auth stage 2: the notice under the button replaces Google's floating badge (Google allows it) */
.pn-rcnote{margin:22px 0 0;text-align:center;color:var(--ink-2);font:400 12.5px/1.55 var(--font-sans);text-wrap:balance}   /* owner 03.10.: air under the 3D key (its 6 px shadow ate the gap) */
.pn-rcnote a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pn-rc{position:absolute;width:0;height:0;overflow:hidden}
.pn-authalt--in{margin-top:4px}
/* login link (owner 07.10., lib/login_link.php): "Email me a login link", the quiet second way in. Closed: an outline
   key under the pink one. Open: the key gives way to a hairline, one line of copy, the address field and its outline
   send key (the pink key stays the password's). */
.pn-authmore{margin:16px 0 0}   /* air under the 3D key (its 6 px shadow) */
.pn-authmore[hidden]{display:none}
.pn-authmore > summary{list-style:none;cursor:pointer;user-select:none}
.pn-authmore > summary::-webkit-details-marker{display:none}
.pn-authmore > summary:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pn-authmore[open] > summary{display:none}
.pn-authmore__form{margin-top:20px;padding-top:0;border-top:0}
.pn-authmore__form > .pn-authmore__sub{margin:0 0 18px;padding:0;color:var(--ink-2);font:400 14px/1.5 var(--font-sans)}
.pn-authmore__form .pn-joindock{margin-top:18px}
/* owner 05.10. ("gequetscht"): the reCAPTCHA note keeps air under the 3D key inside the dock (its 4px gap zeroed the margin) */
.pn-joindock > .pn-rcnote{margin-top:16px}
/* Verkäufe 500 NACH-008 (switch buyer_join_noname): the buyer's name arrives filled in, folded to one line; Change or an error opens the field */
.pn-qname__line{margin:0;font:400 15px/1.4 var(--font-sans);color:var(--ink)}
.pn-qname__change{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-qname:not(.is-error):not(:has(.pn-qname__t:checked)) > :not(.pn-qname__line):not(.pn-qname__t){display:none}
.pn-qname:has(.pn-qname__t:checked) .pn-qname__line,.pn-qname.is-error .pn-qname__line{display:none}
.pn-qname__t:focus-visible + .pn-qname__line .pn-qname__change{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-pwtoggle.pc-btn{min-height:calc(var(--control-field) - 8px)}   /* D-056: the Show key touched the field's edges */
/* signup: B — the seller wizard (docs/spec-pnew-signup.md §4.4–4.15, mockup design/v2/signup-paysite.html, §16.3 map).
   Black wizard header with the three-phase bar, docked CTAs on phones, the live preview on desktop (>=1200).
   Tokens only; the full-screen chrome pages (under 18, expired, the S10 hero) stay black in both themes.
   night 05.10. (docs/wizard-seller-audit-05-10.md): no S8 intro chrome any more, six photo slots, the S4 helper line is
   gone, the "You're in" toast never covers the desktop dock, the done page has a "What happens next" panel. */

.pn-wizbody{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;margin:0;background:var(--bg);--wizbar-h:108px}
body.pn-wizbody--stop{background:var(--chrome)}   /* T33: beats layout.css body.pc-root (no duck strip) */
.pn-wiz{flex:1;display:flex;flex-direction:column;width:100%;max-width:592px;margin:0 auto;padding:16px 16px 0;box-sizing:border-box}
.pn-wiz--golive,.pn-wiz--done,.pn-wizbody--stop .pn-wiz{max-width:none;padding:0}
/* night 05.10. (audit #1): the step's blocks never shrink under the sticky dock (the S1 proof tile lost its last line) */
.pn-wizstep > .pn-crop,.pn-wizstep > .pn-wiz__proof,.pn-wizstep > .pn-lede,.pn-wizstep > .pn-note{flex-shrink:0}
/* S1 on a 390×844 phone: tag, head, lede, tile, proof and the two-key dock fit in one viewport (the sticky dock covered the
   proof's last line by 24 px): a slightly smaller tile and a tighter proof tile */
@media (max-width:700px){.pn-wiz--photo .pn-crop{width:208px;margin:14px auto 8px}.pn-wiz--photo .pn-wiz__proof{padding:10px 14px;gap:12px}.pn-wiz--photo .pn-wiz__proof .pn-proof__big{font-size:27px}}
.pn-wizstep{display:flex;flex-direction:column;flex:1;min-width:0}
.pn-wizstep--narrow{width:100%;max-width:560px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.pn-wiz--preview .pn-wizstep--narrow{padding:0}
@media (max-width:700px){.pn-wiz:not(.pn-wiz--done) .pn-wizstep--narrow{padding:0}}   /* polish r1: .pn-wiz already holds the 16 px gutter (done: .pn-wiz has none) */
.pn-wizgrid{display:flex;flex-direction:column;flex:1;min-width:0}
.pn-wizcol{display:flex;flex-direction:column;flex:1;min-width:0}

/* ---------- black wizard header (AD3): back · title · saved · close, the phase bar inside ---------- */
.pc-header.pn-wizbar{display:block;position:sticky;top:0;z-index:var(--z-header);height:auto;padding:env(safe-area-inset-top) var(--gutter) 12px;gap:0;background:var(--chrome);color:var(--on-chrome);border:0;border-bottom:1px solid var(--chrome-line);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* T31: one signup header — the logo on the left at every width (22 px on phones, the back square before it), the step
   title centred, one action on the right (close / Save and exit). */
.pn-wizbar__row{display:grid;grid-template-columns:40px auto minmax(0,1fr) auto auto 40px;grid-template-rows:58px auto;grid-template-areas:"back logo title saved prev close" "phase phase phase phase phase phase";align-items:center;gap:0 10px}
.pn-wizbar__back,.pn-wizbar__gap{grid-area:back}
.pn-wizbar__gap{width:40px;height:40px}
.pc-header.pn-wizbar .pn-wizbar__logo{display:inline-flex;grid-area:logo;color:var(--on-chrome);font-size:22px}
.pn-wizbar__title{grid-area:title;color:var(--on-chrome);text-align:center;text-wrap:balance;line-height:1.15}
.pn-wizbar__prev{grid-area:prev}
.pn-wizbar__close{grid-area:close}
.pn-wizbar__exit{display:none}
.pc-header.pn-wizbar .pc-iconbtn--on-chrome{width:40px;height:40px;border-radius:var(--r-icon);border:1px solid var(--chrome-line);background:transparent;color:var(--on-chrome)}
.pc-header.pn-wizbar .pc-iconbtn--on-chrome:hover{border-color:transparent}
.pn-saved{grid-area:saved;display:inline-flex;align-items:center;gap:4px;font:700 12px/1 var(--font-sans);color:var(--on-chrome-2);animation:pn-saved-in var(--dur-base) var(--ease-snap)}
.pn-saved .pc-ico{width:15px;height:15px;color:var(--success);stroke-width:3}
.pn-saved[hidden]{display:none}
@keyframes pn-saved-in{from{opacity:0;transform:translateY(4px)}}
.pn-phase{grid-area:phase;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.pn-phase__seg{display:flex;flex-direction:column;gap:7px;min-width:0}
.pn-phase__tr{display:block;height:5px;border-radius:var(--radius-full);background:var(--chrome-well);overflow:hidden}
.pn-phase__tr i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width var(--dur-enter) var(--ease-snap)}
.pn-phase__lbl{font:600 11px/1.1 var(--font-label);letter-spacing:0;color:var(--on-chrome-2);text-wrap:balance;hyphens:manual}   /* night QA D5: pink ink in light (was 1.7:1), pink in dark */
.pn-phase__seg[aria-current] .pn-phase__lbl{color:var(--on-chrome)}
@media (min-width:701px){
  .pn-wizbody{--wizbar-h:69px}
  .pc-header.pn-wizbar{padding:env(safe-area-inset-top) var(--col-pad) 0}
  .pn-wizbar__row{grid-template-columns:minmax(max-content,1fr) minmax(0,520px) minmax(max-content,1fr);grid-template-rows:68px;grid-template-areas:"logo phase end";height:68px;padding:0;gap:0 32px}
  .pc-header.pn-wizbar .pn-wizbar__logo{display:inline-flex;justify-self:start;font-size:26px}
  .pn-wizbar__back,.pn-wizbar__gap,.pn-wizbar__title,.pn-wizbar__close{display:none}
  .pn-phase{margin:0;padding:0;align-self:center}
  /* polish r1: saved, preview and exit are one flex group in the end track (no fixed right margins), the exit
     button keeps its natural width; the side tracks never shrink below their content, the phase bar gives way */
  .pn-wizbar__end{grid-area:end;justify-self:end;display:flex;align-items:center;gap:14px;min-width:0}
  .pn-saved{font-size:13px;white-space:nowrap}
  .pn-wizbar__exit{display:inline-flex;flex:none;white-space:nowrap;color:var(--on-chrome);border-color:var(--chrome-line)}
  .pn-wizbar__exit:hover{border-color:transparent;background:transparent}
  .pn-saved:not([hidden]) ~ .pn-wizbar__prev{display:none}
}
@media (max-width:700px){.pn-wizbar__end{display:contents}}   /* phones: saved / prev keep their own grid areas */
/* 701-959: the phase row keeps its three bars, the labels move under them only where there is room */
@media (min-width:701px) and (max-width:959px){.pn-phase__lbl{font-size:10px;letter-spacing:.08em}}
@media (min-width:1200px){.pn-wizbar__prev{display:none}}

/* ---------- step body ---------- */
.pn-wiz .pn-hero{margin:0}
.pn-wiz .pn-stop.pn-hero{margin-inline:auto}   /* signup: integration — full-screen pages centred at desktop width */
.pn-wiz .pn-stop.pn-hero{box-shadow:0 0 0 100vmax var(--chrome);clip-path:inset(0 -100vmax)}   /* the black runs edge to edge */
.pn-wiz .pn-hero h1{margin:0}
.pn-wiz .pn-hero{container-type:inline-size}
/* brand pass (flows AD): step heads fit their longest unbreakable unit (--w from the template; fr "vendez‑vous ?" is one unit) */
.pn-wiz .pn-hero .pc-t-display{font-size:min(58px,calc(100cqi / (var(--w,6) * .54)));text-wrap:balance;hyphens:manual;overflow-wrap:anywhere;outline:0}
/* The heading takes focus programmatically on every step change (spec §4 Motion): no ring for that, it is not a control. */
.pn-wiz h1[tabindex="-1"]:focus,.pn-wiz h1[tabindex="-1"]:focus-visible{outline:0}
.pn-lede{margin:10px 0 0;max-width:34ch;color:var(--ink-2);font:400 15px/1.42 var(--font-sans)}
.pn-wizfield{margin-top:16px}
.pn-wizfield.pc-field{gap:7px;border:0;padding:0;min-width:0}
.pn-wizfield legend{padding:0;margin-bottom:7px}
/* polish-s 02.10.: help / message lines under a field sit on the field's own 7 px gap (the browser's p margins stacked
   to 33 px between "@name is yours." and its tip) */
.pn-wizfield > p.pc-help{margin:0}
.pn-wiz .pc-input{font-size:16px}
.pn-lblrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pn-lblrow small{font:600 13px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-fieldmsg:empty{display:none}
.pn-wizfield.is-error .pc-input{box-shadow:0 0 0 1.5px var(--danger)}
.pn-wizfield.is-error .pn-fieldmsg{display:flex;gap:6px;color:var(--danger);font-weight:700}
.pn-wizfield.is-ok .pn-fieldmsg{color:var(--ink);font-weight:700}
.pn-fielderr{margin:10px 0 0;text-align:center;color:var(--danger);font:700 13px/1.35 var(--font-sans)}
.pn-fielderr:empty{display:none}
.pn-inlinecta{margin-top:20px}
.pn-note{display:flex;gap:6px;align-items:center;justify-content:center;margin:12px 0 0;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-note .pc-ico{color:var(--success);stroke-width:2.4}
.pn-lhwrote{justify-content:flex-start;align-items:flex-start;margin:0 0 14px;text-align:left}   /* S7 (sales-50 18.10.): "a buyer just wrote to you" above the step, flush with its head */
/* Sales 500 group C (22.10., lib/first_buyer.php): step 1's face line (VKF-002), its second ask on "Add later" (VKF-001), the
   corner's photo card (VKF-005); every rule is used only while its switch is on */
.pn-lhnoface{margin:8px 0 0}
.pn-lhskip{display:grid;gap:10px;justify-content:stretch;margin:4px 0 0;padding:12px 14px;border-radius:var(--r-tile);background:var(--surface);font:400 14px/1.4 var(--font-sans);color:var(--ink);text-align:left}
.pn-lhskip[hidden],.js .pn-wiz--lh.has-photo .pn-lhskip{display:none}
.pn-lhskip p{margin:0}
.pn-lhskip__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* Sales 500 VKF-066 / VKF-077 / VKF-061 / VKF-068 (lib/seller_start.php): "Take a photo" on phones only (a pointer that
   cannot hover); the About field's 80-character line; the notes on "You're live". Used only while their switches are on */
.pn-dock .pn-lhcam{display:none}
@media (hover:none) and (pointer:coarse){.pn-dock .pn-lhcam{display:inline-flex}}
.pn-lhabout80{display:grid;gap:6px;margin:6px 0 0}
.pn-lhabout80__bar{display:block;height:4px;border-radius:2px;background:var(--sunken);overflow:hidden}
.pn-lhabout80__bar > i{display:block;height:100%;width:0;background:var(--ink-2);transition:width .2s}
.pn-lhabout80.is-done .pn-lhabout80__bar > i{background:var(--live)}
.pn-lhbr,.pn-lhasbuyer{justify-content:flex-start;align-items:flex-start;margin:12px 0 0;text-align:left}
.pn-lhbr a,.pn-lhasbuyer a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- dock (§16.3 pn-dock): sticky on phones, inline row on desktop ---------- */
/* T15: the kit bar look (.pc-actionbar on phones): opaque page ground and the line on top, so step content never shows
   through Skip / Continue while it scrolls under the sticky dock. */
.pn-dock{position:sticky;bottom:0;z-index:var(--z-bar);display:flex;flex-direction:column;gap:4px;margin:auto calc(-1 * var(--gutter)) 0;padding:12px var(--gutter) calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.pn-dock__row{display:flex;gap:8px}
.pn-dock__row .pc-btn{flex:1}
.pn-dock__skip,.pn-dock__edit{flex:0 0 auto !important}
.pn-dock__back{display:none !important}
.pn-dock__empty{display:flex;flex-direction:column;gap:8px}
.pn-dock__later{align-self:center}
.pn-dock__filled{display:none}
.pn-wiz.has-photo .pn-dock__filled{display:block}
.pn-wiz.has-photo .pn-dock__empty{display:none}
.pn-dock--stack{align-items:stretch}
.pn-dock--stack .pn-later{align-self:center}
.pn-dock--form{margin-top:auto}
.pn-wiz .pn-dock .pn-fixcount:empty{display:none}
/* mobile UX: a focused field (tap, "next" key) scrolls clear of the sticky dock instead of sliding under it */
@media (max-width:700px){html:has(.pn-wiz .pn-dock){scroll-padding-bottom:calc(160px + env(safe-area-inset-bottom))}}
/* UX polish E 23.10.: phones only, the desktop row below stays as it is.
   UX-028: the photo dock stacked three rows (Choose / Take / Add later = 175 of 844 px fixed); the two keys now share a
   row once each gets 150 px (from about 360 px wide), "Add later" stays centred under them. One key alone (onboard.php
   with its switch off) still fills the row: the keys are flex items growing from 150 px; an empty ::after (zero high,
   no row gap, the keys carry the 8 px below them) breaks the line, "Add later" is ordered after it. At 320 px the two
   keys stack exactly as before (175 px). Same DOM and focus order, same labels.
   UX-047: the step's object (96 px, top right) sat in the lede's last words at 360–430 px; the lede keeps clear of it
   like the head above it already does (.pn-wiz.has-obj … .pn-hero padding-right:108px). */
@media (max-width:700px){
  .pn-dock__empty{flex-direction:row;flex-wrap:wrap;gap:0 8px}
  .pn-dock__empty > .pc-btn{flex:1 1 150px;width:auto;min-width:0;margin-bottom:8px}
  .pn-dock__empty::after{content:"";order:1;flex:0 0 100%;height:0}
  .pn-dock__empty > .pn-dock__later{order:2;margin-inline:auto}
  .pn-wiz.has-obj > .pn-wizstep > .pn-lede{padding-right:108px}
}
/* polish r1: the read-only "account created" summary is three short lines: its Continue follows in flow on phones
   instead of docking 380 px below them */
.pn-wiz [data-wiz=summary] .pn-note{justify-content:flex-start;padding-left:4px}   /* under the left-aligned recap pill */
@media (max-width:700px){.pn-wiz [data-wiz=summary] .pn-dock{position:static;margin:28px 0 0;padding:0 0 calc(24px + env(safe-area-inset-bottom));border-top:0;background:none}}
@media (min-width:701px){
  .pn-wiz:not(.pn-wiz--done){padding-top:48px}
  .pn-wizbody--stop .pn-wiz.pn-wiz{padding-top:0}   /* T33: the full-screen black pages start at the top */
  .pn-wiz .pn-hero .pc-t-display{font-size:min(92px,calc(100cqi / (var(--w,6) * .54)))}
  .pn-lede{font-size:17px;max-width:44ch}
  .pn-dock{position:static;margin:28px 0 48px;padding:20px 0 0;background:none;border-top:1px solid var(--line)}
  .pn-dock__row{align-items:center}
  .pn-dock__row .pc-btn{flex:0 0 auto}
  .pn-dock__back{display:inline-flex !important;margin-right:auto}
  .pn-dock__row .pn-dock__next:only-child,.pn-dock__row .pn-dock__skip + .pn-dock__next{margin-left:0}
  .pn-dock__row{justify-content:flex-end}
  .pn-dock__empty{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .pn-dock__empty .pc-btn--block{width:auto;display:inline-flex}
  .pn-dock__filled .pc-btn--block{max-width:360px;margin:0 auto}
  .pn-dock--stack{align-items:center}
  .pn-dock--stack .pc-btn--block{max-width:420px}
  .pn-wiz--photo .pn-dock,.pn-wiz--name .pn-dock{border-top:0}
}

/* ---------- S1 photo crop (pn-crop) ---------- */
.pn-crop{position:relative;width:228px;max-width:calc(100% - 20px);aspect-ratio:4/5;margin:22px auto 10px;border-radius:3px;overflow:hidden;background:var(--ph-media);box-shadow:0 0 0 9px var(--pola-edge),var(--sh-pola);touch-action:none;isolation:isolate;transition:transform var(--dur-base) var(--ease-out)}
.pn-crop.is-crop,.pn-crop.is-drag{transform:none}
.pn-crop.is-drag{outline:3px dashed var(--accent);outline-offset:4px}
.pn-crop__empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;cursor:pointer;color:var(--sticker-cream);text-align:center;padding:16px}
.pn-crop__cam{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--scrim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pn-crop__drop{display:none;font:700 13px/1.3 var(--font-sans);color:var(--ph-text)}   /* T37: flips with the theme (on-sticker is for cream stickers only) */
.pn-crop__canvas,.pn-crop__img{position:absolute;inset:0;width:100%;height:100%;display:none;object-fit:cover}
.pn-crop.is-filled .pn-crop__img{display:block}
.pn-crop.is-crop .pn-crop__canvas{display:block;cursor:grab}
.pn-crop.is-crop .pn-crop__img{display:none}
.pn-crop.is-filled .pn-crop__empty,.pn-crop.is-crop .pn-crop__empty{display:none}
.pn-crop__thirds{position:absolute;inset:0;z-index:4;pointer-events:none;display:none;
  background:linear-gradient(to right,transparent calc(33.33% - .5px),var(--media-rule) calc(33.33% - .5px),var(--media-rule) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),var(--media-rule) calc(66.66% - .5px),var(--media-rule) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(to bottom,transparent calc(33.33% - .5px),var(--media-rule) calc(33.33% - .5px),var(--media-rule) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),var(--media-rule) calc(66.66% - .5px),var(--media-rule) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.pn-crop.is-crop .pn-crop__thirds{display:block}
.pn-crop__good{display:none;left:10px;top:22px;z-index:6;font-size:13px}   /* inside the tile: .pn-crop clips (overflow:hidden), a -6 px overhang was cut once the fixture seller had her picture */
.pn-crop__tools{position:absolute;right:10px;top:10px;z-index:5;display:none;flex-direction:column;gap:6px}
.pn-crop__tools .pc-iconbtn{width:40px;height:40px;cursor:pointer}
.pn-crop__tools .pc-iconbtn .pc-ico{width:20px;height:20px}
.pn-crop.is-filled .pn-crop__good,.pn-crop.is-crop .pn-crop__good{display:inline-block}
.pn-crop.is-filled .pn-crop__tools,.pn-crop.is-crop .pn-crop__tools{display:flex}
.pn-crop__hint{position:absolute;left:50%;bottom:12px;z-index:5;display:none;gap:6px;align-items:center;min-height:30px;max-width:calc(100% - 24px);padding:6px 12px;border-radius:var(--radius-full);background:var(--scrim);color:var(--sticker-cream);font:700 12px/1.2 var(--font-sans);text-align:center;text-wrap:balance;width:max-content;transform:translateX(-50%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pn-crop.is-crop .pn-crop__hint{display:flex}
.pn-crop__hint > svg{flex:none}   /* polish-s 02.10.: long hints (es, fr) wrap inside the photo instead of being cut */
.pn-crop__exif{display:none}
.pn-wiz.has-photo .pn-crop__exif{display:flex}
.pn-wiz__proof{margin:0 0 10px}
@media (min-width:701px){.pn-crop{width:300px;transform:none}.pn-crop.is-crop,.pn-crop.is-drag{transform:none}.pn-crop__drop{display:block}}

/* ---------- S2 name and age ---------- */
.pn-atfield{position:relative}
.pn-atfield__at{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--ink-3);font:600 16px/1 var(--font-sans);pointer-events:none}
.pn-atfield .pc-input{padding-left:38px;padding-right:52px}
.pn-atfield .pn-okmark{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:none}
.pn-wizfield.is-ok .pn-atfield .pn-okmark{display:inline-grid}
.pn-sugg{gap:6px;margin-top:2px}
.pn-sugg[hidden]{display:none}
.pn-bday{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;margin-top:8px}
.pn-bday__f{position:relative;display:block}
.pn-bday__l{position:absolute;top:-8px;left:50%;z-index:1;transform:translateX(-50%);padding:2px 6px;border-radius:var(--r-label);background:var(--bg);color:var(--ink-2);font:600 9.5px/1 var(--font-label);letter-spacing:0;white-space:nowrap}
.pn-bday .pc-input{padding:0;text-align:center;font:700 19px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pn-ageecho{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border-radius:var(--r-pcard);background:var(--sunken)}
/* polish r2: the under-18 check asks before it stops (a typo never locks the wizard) */
.pn-u18ask{margin-top:10px;padding:12px 14px;border-radius:var(--r-pcard);background:var(--sunken);border:1px solid var(--line)}
.pn-u18ask[hidden]{display:none}
.pn-u18ask__t{margin:0 0 10px;font:700 14px/1.35 var(--font-sans)}
.pn-u18ask__btns{display:flex;flex-wrap:wrap;gap:8px}
.pn-ageecho[hidden]{display:none}
.pn-ageecho__n{flex:none;padding:8px 10px 4px;border-radius:16px;background:var(--accent);color:var(--on-accent);font:700 39px/1 var(--font-display);box-shadow:var(--sh-tape-hl)}
.pn-ageecho p{margin:0;font:600 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-ageecho b{color:var(--ink)}

/* ---------- S3 recap + the fallback account form ---------- */
.pn-recap{display:flex;align-items:center;gap:10px;align-self:flex-start;margin:14px 0 0;padding:6px 14px 6px 6px;border-radius:var(--radius-full);background:var(--sunken);font:800 14px/1 var(--font-sans)}
.pn-recap[hidden]{display:none}
.pn-recap__ph{width:36px;height:36px;border-radius:50%;background:var(--ph-media-2) center/cover no-repeat;flex:none}
.pn-recap span:not(.pn-recap__ph){color:var(--ink-2);font-weight:600}
.pn-wizform{display:flex;flex-direction:column;flex:1}
.pn-wizform .pn-checks{margin-top:12px}
.pn-wizform .pn-checkrow{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 2px;font:600 14px/1.38 var(--font-sans);cursor:pointer}
.pn-wizform .pn-checkrow a{color:var(--pink-text);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.pn-wizform .pn-checkrow.is-error .pc-check{box-shadow:inset 0 0 0 1.5px var(--danger)}
.pn-pwfield{position:relative}
.pn-pwfield .pc-input{padding-right:96px}

/* ---------- S4 offer tiles (AD5) ---------- */
.pn-offers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.pn-offertile{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px;min-height:84px;padding:14px;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--surface);color:var(--ink);font:700 15px/1.1 var(--font-sans);text-align:left;overflow:hidden;cursor:pointer;transition:background-color var(--dur-fast),color var(--dur-fast),transform var(--dur-press) var(--ease-snap)}
.pn-offertile:hover{border-color:transparent}
.pn-offertile:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-offertile__ico.pc-ico{width:26px;height:26px}
.pn-offertile__t{position:relative;z-index:2;max-width:100%;overflow-wrap:anywhere;hyphens:manual}
.pn-offertile__tick{position:absolute;top:11px;right:11px;z-index:2;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);color:transparent}
.pn-offertile__tick .pc-ico{width:14px;height:14px;stroke-width:3.4}
.pn-offertile.is-selected{background:var(--btn-ink);color:var(--on-btn-ink);border-color:var(--btn-ink)}
.pn-offertile.is-selected .pn-offertile__tick{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pn-offertile--wide{grid-column:span 2;min-height:96px;padding-right:130px}
.pn-offertile__art{position:absolute;right:52px;bottom:-16px;width:112px;transform:rotate(-10deg);pointer-events:none}
.pn-offertile__art .pn-obj{display:block;width:100%;height:auto;filter:drop-shadow(var(--sh-hand))}
.pn-selicon{position:relative}
.pn-selicon > .pc-ico{position:absolute;left:18px;top:50%;z-index:1;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.pn-selicon .pc-input{padding-left:48px}

/* ---------- S5 about ---------- */
.pn-about.pc-input{min-height:132px;border-radius:var(--r-pcard);font:400 16px/1.45 var(--font-sans)}
.pn-meter{display:flex;align-items:center;gap:10px;margin-top:4px}
.pn-meter__bars{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:1}
.pn-meter__bars i{height:5px;border-radius:3px;background:var(--sunken)}
.pn-meter[data-q="short"] .pn-meter__bars i:nth-child(-n+1),.pn-meter[data-q="good"] .pn-meter__bars i:nth-child(-n+2),.pn-meter[data-q="great"] .pn-meter__bars i{background:var(--accent)}
.pn-meter b{font:600 11px/1 var(--font-label);letter-spacing:0}
.pn-meter[data-q="empty"]{visibility:hidden}   /* night 05.10. (audit #7): no verdict before she typed; the row keeps its height */
.pn-starters{gap:6px;margin-top:10px}
.pn-starter.pc-chip:hover{border-color:transparent}
.pn-starter .pc-ico{width:14px;height:14px;margin-block:-1px;stroke-width:2.6}
.pn-details{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.pn-details > summary{list-style:none;cursor:pointer;min-height:44px;align-items:center}
.pn-details > summary::-webkit-details-marker{display:none}
.pn-details > summary .pc-ico{margin-left:auto;transition:transform var(--dur-fast) var(--ease-snap)}
.pn-details[open] > summary .pc-ico{transform:rotate(180deg)}
.pn-grp{margin-top:12px}
.pn-grp .pc-t-label{margin:0 0 8px}
.pn-grp .pc-chips{gap:6px}
.pn-detchip.pc-chip{gap:6px}

/* ---------- S6 photos ---------- */
.pn-goal{display:flex;align-items:center;gap:10px;margin:12px 0 0;font:700 14px/1.3 var(--font-sans)}
.pn-goal__dots{display:flex;gap:4px;flex:none}
.pn-goal__dots i{width:22px;height:6px;border-radius:3px;background:var(--sunken)}
.pn-goal__dots i.is-on{background:var(--accent)}
.pn-wizgrid__photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pn-wiz .pc-slot{aspect-ratio:4/5;border-radius:var(--r-rules);overflow:hidden;position:relative}
.pn-wiz .pc-slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-wiz .pc-slot.is-filled{cursor:grab}
.pn-wizslot__add{display:grid;place-items:center;align-content:center;gap:4px;width:100%;height:100%;cursor:pointer;color:inherit;font:700 12px/1.2 var(--font-sans);text-align:center;padding:4px}
.pn-slot__menu.pc-iconbtn{position:absolute;right:6px;bottom:6px;z-index:5;width:34px;height:34px}
.pn-slot__menu .pc-ico{width:20px;height:20px}
.pc-slot.is-dragging{opacity:.45}
.pc-slot.is-over{outline:3px solid var(--accent);outline-offset:2px}
.pc-slot.is-up > img{filter:saturate(.6)}
.pn-pring{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:var(--scrim)}
.pn-pring > span{--p:0;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--media-track) 0)}
.pn-pring b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--scrim);color:var(--sticker-cream);font:700 13px/1 var(--font-display)}
.pn-pring.is-fail{background:var(--scrim)}
.pn-pring .pc-btn{height:34px}
/* polish r2: the picker labels are keyboard buttons (tabindex=0, role=button; the S1 drop zone repeats "Choose photo" and stays a pointer target): the kit focus ring, inside where the tile clips */
.pn-mediapick__add:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-wizslot__add:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-4px;border-radius:inherit}
.pn-wizmenu{position:fixed;z-index:70;min-width:210px;padding:8px;border-radius:var(--r-pcard);background:var(--surface);color:var(--ink);box-shadow:var(--sh-2),0 0 0 1px var(--line)}
.pn-wizmenu[hidden]{display:none}
.pn-wizmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-rules);background:transparent;color:inherit;font:700 14px/1.2 var(--font-sans);text-align:left;cursor:pointer}
.pn-wizmenu button:hover,.pn-wizmenu button:focus-visible{background:var(--sunken);outline:0}
@media (min-width:701px){.pn-wizgrid__photos{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* night 05.10.: six slots = two rows of three at every width */
/* polish-s 02.10.: on a narrow tile the cover label met the tile menu ("PORTA…" under the ⋯); there it is the star
   alone (the word stays for screen readers), from 150 px the full label. */
.pn-wizgrid__photos > .pc-slot{container-type:inline-size}
@container (max-width:150px){.pn-wizgrid__photos .pc-slot__cover{gap:0;padding:4px 6px;font-size:0;letter-spacing:0}}

/* ---------- live preview (desktop right column, phone sheet) + strength ---------- */
.pn-wizprev{display:none}
.pn-wizprev.is-open{display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast);max-height:86vh;overflow:auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom));border-radius:var(--r-empty) var(--r-empty) 0 0;background:var(--bg);box-shadow:var(--sh-sheet),0 0 0 100vmax var(--scrim);animation:pn-sheet-up var(--dur-slow) var(--ease-sheet)}
@keyframes pn-sheet-up{from{transform:translateY(100%)}}
.pn-wizprev__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pn-wizprev__label{display:flex;align-items:center;gap:8px}
.pn-wizprev--inline{display:block;margin-top:14px}
/* storefront top (mockup .scard): cover banner, avatar ring, name · age · country, offer chips, About, detail tiles */
.pn-wizcard.pc-card{overflow:hidden;border-radius:var(--r-pcard);background:var(--surface);box-shadow:none}
.pn-wizcard__cover{position:relative;height:132px;background:var(--ph-media);overflow:hidden}
.pn-wizcard__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pn-wizcard__new.pn-sticker{position:absolute;right:12px;top:12px;font-size:12px}
.pn-wizcard__body{position:relative;padding:0 14px 16px}
.pn-wizcard__av{display:block;width:72px;height:72px;margin:-40px 0 8px 2px;border-radius:50%;overflow:hidden;background:var(--ph-media);box-shadow:none}
.pn-wizcard__av img{width:100%;height:100%;object-fit:cover}
/* no photo yet: her initial on an avatar tone, like every other avatar fallback (never a hollow ring); wizard.js prepends
   the <img> on upload and the initial steps aside */
.pn-wizcard__av-i{display:grid;place-items:center;width:100%;height:100%;background:var(--av-g2);color:var(--ink);font:700 24px/1 var(--font-display)}
.pn-wizcard__av img ~ .pn-wizcard__av-i{display:none}
.pn-wizcard__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:0 0 8px;font:800 17px/1.25 var(--font-sans);overflow-wrap:anywhere}
.pn-wizcard__name b{font-weight:800}
.pn-wizcard__name .pn-age{margin-left:-6px}
.pn-wizcard__name [data-live="country"]{font:700 13px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-wizcard .pn-wizstore__chips{margin:0}
.pn-wizprev__strength.pn-panel{margin-top:14px;padding:18px;border-radius:var(--r-box);background:var(--surface);border:1px solid var(--line)}
.pn-wizprev__strength .pn-strength{margin:0}
.pn-wizprev__label .pn-ondot{background:var(--accent);box-shadow:none}
.pn-wizstore__chips{display:flex;flex-wrap:wrap;gap:5px}
.pn-wizstore__chips [hidden],.pn-wizstore__facts [hidden],.pn-wizstore__about[hidden]{display:none}
.pn-wizstore__about{margin:8px 0 0;font:400 14px/1.4 var(--font-sans);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pn-wizstore__facts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 0}
.pn-wizstore__facts > div{padding:8px 10px;border-radius:var(--r-rules);background:var(--sunken);min-width:0}
.pn-wizstore__facts dt{font:600 12px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-wizstore__facts dd{margin:2px 0 0;font:800 13px/1.2 var(--font-sans);overflow-wrap:anywhere}
.pn-strength{display:flex;align-items:center;gap:14px;margin-top:14px}
.pn-strength__txt{min-width:0}
.pn-strength .pc-t-title{margin:0 0 6px}
.pn-misschips{gap:6px}
/* polish r2: under 10 % the next item is the headline (no 0 % ring); a soft accent wash instead of a flat block */
.pn-strength--start{display:block;padding:16px;border-radius:var(--r-box);background:linear-gradient(135deg,var(--sunken),var(--surface) 72%);border:1px solid var(--line)}
.pn-wizprev__strength .pn-strength--start{padding:0;background:none;border:0}
.pn-strength__k{margin:0 0 4px}
.pn-strength--start .pc-t-title{margin:0 0 12px}
.pn-strength__go{margin:0 0 12px}
.pn-strength--start .pn-misschips:last-child{margin-bottom:0}
.pn-wiz .pn-ring{--p:0;display:grid;place-items:center;flex:none;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--sunken) 0)}
.pn-wiz .pn-ring b{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:var(--bg);font:700 22px/1 var(--font-display);font-variant-numeric:tabular-nums}
.pn-wiz .pn-ring small{font-size:.55em}
.pn-wiz .pn-ring--md{width:58px;height:58px}
.pn-wiz .pn-ring--md b{width:46px;height:46px;font-size:17px;background:var(--surface)}
.pn-wiz .pn-ring--sm{width:52px;height:52px;background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--chrome-2) 0)}
.pn-wiz .pn-ring--sm b{width:40px;height:40px;font-size:15px;background:var(--chrome);color:var(--on-chrome)}
@media (min-width:1200px){
  .pn-wiz--wide{max-width:1120px;padding-inline:32px}
  .pn-wiz--wide .pn-wizgrid{display:grid;grid-template-columns:minmax(0,560px) 400px;justify-content:center;gap:96px;align-items:start}
  .pn-wiz--wide .pn-wizprev{display:block;position:sticky;top:calc(var(--wizbar-h) + 24px);align-self:start}
  .pn-wiz--wide .pn-wizprev__close{display:none}
}

/* ---------- S8 first ad: quality bar (AD6), media pick, price, the cohort proof as on S1 ---------- */
.pn-wiz button.pn-later{border:0;background:transparent;cursor:pointer}
.pn-wiz .pn-proof.pn-wiz__proof--ad{margin:14px 0 0}   /* under the quality bar: clear of the tag prop at the top right */
.pn-qbar{position:sticky;top:calc(var(--wizbar-h) + 8px);z-index:10;display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border-radius:var(--r-pcard);background:var(--chrome);color:var(--on-chrome);box-shadow:var(--sh-float)}
.pn-qbar__ticks{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;padding:0;list-style:none;font:700 12px/1.3 var(--font-sans);color:var(--on-chrome-2)}
.pn-qbar__ticks li{display:flex;align-items:center;gap:3px}
.pn-qbar__ticks .pc-ico{width:13px;height:13px;stroke-width:3.2}
.pn-qbar__ticks li.is-ok{color:var(--on-chrome)}
.pn-qbar__ticks li.is-ok .pc-ico{color:var(--online)}
.pn-mediapick{display:flex;gap:8px;margin:10px -16px 0;padding:2px 16px 4px;list-style:none;overflow-x:auto;scrollbar-width:none}
.pn-mediapick::-webkit-scrollbar{display:none}
.pn-mediapick > li{flex:none;width:84px}
.pn-mediapick__it.pc-slot{display:block;width:84px;padding:0;border:0;cursor:pointer}
.pn-mediapick__it.is-upload{cursor:default}
.pn-mediapick__n{position:absolute;top:6px;left:6px;z-index:6;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--scrim);color:transparent;font:700 12px/1 var(--font-display);box-shadow:0 0 0 2px var(--sticker-cream)}
.pn-mediapick__it.is-on .pn-mediapick__n{background:var(--accent);color:var(--on-accent)}
.pn-mediapick__it.is-upload .pn-mediapick__n{display:none}
/* T35: not picked = a cream "+" (tap to add); picked = the pink order number. */
.pn-mediapick__n .pc-ico{width:14px;height:14px;stroke-width:3}
.pn-mediapick__n b{font:inherit}
.pn-mediapick__it:not(.is-on) .pn-mediapick__n{background:var(--sticker-cream);color:var(--on-sticker)}
.pn-mediapick__it:not(.is-on) .pn-mediapick__n b,.pn-mediapick__it.is-on .pn-mediapick__n .pc-ico{display:none}
.pn-mediapick__add.pc-slot{display:grid;width:84px;cursor:pointer}
.pn-mediapick > li[hidden]{display:none}
/* night 05.10.: the first photo of the listing wears the cover tag (star only on the 84 px tile, the word for screen readers) */
.pn-mediapick .pn-mediapick__cover{left:4px;bottom:4px;gap:0;padding:4px 6px;font-size:0;letter-spacing:0}
.pn-mediapick__add span{font:600 12px/1 var(--font-label);letter-spacing:0}
/* S8 price: the item editor's .pn-pricebox + .pn-curseg (items.css), AD4 03.10. */
.pn-wiz .pn-statuspill:not(.pn-statuspill--chrome){display:inline-flex;align-items:center;gap:7px;align-self:flex-start;min-height:30px;margin:14px 0 0;padding:0 12px;border-radius:var(--radius-full);background:var(--sunken);font:700 13px/1.2 var(--font-sans)}
.pn-wiz .pn-statuspill__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--online)}
.pn-wizprev--ad{display:none !important}
.pn-dock--stack .pn-fixcount{margin:0 0 6px;text-align:center}   /* night 05.10. (audit #11): the count sits right above the key, never under the fold */

/* ---------- S9 fallback hero (Team D's partial replaces it) ---------- */
.pn-golivefb{padding:6px 16px 22px;background:var(--chrome);color:var(--on-chrome);container-type:inline-size}
.pn-golivefb .pc-t-mega{margin-top:12px;font-size:min(86px,calc(100cqi / (var(--w,4) * .5)));color:var(--on-chrome)}
.pn-golivefb p:last-child{margin:12px 0 0;max-width:36ch;color:var(--on-chrome-2);font:600 15px/1.4 var(--font-sans)}
.pn-wiz--golive .pn-wizstep > .pn-dock{margin:auto 0 0}
/* T02: the go-live pay step sits in the page gutter like every other step (the dark hero is a rounded .dk card, not
   full-bleed). polish r4: the pay row is in flow right under the plans, never a sticky bar over them (owner rule: no bar
   covering content); from 701 px one row: the button left, "I'll pay later" + its reassurance line right. */
.pn-wiz--golive .pn-paysite--golive{padding:var(--gutter) var(--gutter) 0;box-sizing:border-box}
.pn-wiz--golive .pn-paydock{position:static;z-index:auto;margin-top:20px;padding:0;border-top:0;background:none}
@media (min-width:701px){
  .pn-wiz--golive .pn-paysite--golive{padding-top:0}   /* the hero card starts where every step's tag does (48 below the bar), not 104 */
  .pn-wiz--golive .pn-paydock{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;row-gap:2px}
  .pn-wiz--golive .pn-paydock .pc-btn{grid-row:1 / 3}
  .pn-wiz--golive .pn-paydock .pn-later{justify-self:start;min-height:32px;padding:0 4px;align-self:end}
  .pn-wiz--golive .pn-paydock .pn-later__sub{margin:0;padding:0 4px;text-align:left;align-self:start}
  .pn-wiz--golive .pn-paydock .pn-later:only-of-type:last-child{grid-row:1 / 3;align-self:center}
}

/* night 05.10. (audit #12): the go-live step carries the step tag like every other step; it sits on the paysite column */
.pn-wiz--golive > .pn-wiztag{width:100%;max-width:720px;margin:16px auto 0;padding:0 var(--gutter);box-sizing:border-box}
@media (min-width:701px){.pn-wiz--golive > .pn-wiztag{margin-top:0;padding:0}}
@media (min-width:1200px){.pn-wiz--golive > .pn-wiztag{max-width:1120px;padding:0 528px 0 32px}}

/* ---------- S10 done: "What happens next" (audit #13), three honest lines + the wizard-tagged Premium link ---------- */
.pn-wiznext.pn-panel{position:relative;z-index:2;margin:0 0 14px;padding:18px;border-radius:var(--r-box);background:var(--surface);border:1px solid var(--line)}
.pn-wiznext__h{margin:0 0 12px}
.pn-wiznext__rows{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.pn-wiznext__rows li{display:flex;align-items:flex-start;gap:12px;font:600 14px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-wiznext__n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 12px/1 var(--font-display)}
.pn-wiznext__link{color:var(--pink-text);font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* ---------- S10 done ---------- */
.pn-donehero{position:relative;overflow:hidden;container-type:inline-size;padding:calc(env(safe-area-inset-top) + 64px) max(16px,calc((100% - 528px) / 2)) 40px;background:var(--chrome);color:var(--on-chrome)}
.pn-donehero .pc-t-mega{font-size:min(120px,calc(100cqi / (var(--w,4) * .5)));color:var(--on-chrome);outline:0;overflow-wrap:anywhere}
.pn-donehero p{margin:10px 0 0;max-width:30ch;color:var(--on-chrome-2);font:600 14px/1.4 var(--font-sans)}
.pn-donehero__sticker{right:max(22px,calc((100% - 528px) / 2));top:calc(env(safe-area-inset-top) + 22px);transform:rotate(7deg)}   /* mockup .sticker 7deg */
.pn-wiz--done .pn-wizstep{margin-top:-14px;position:relative;z-index:2}
@media (min-width:701px){.pn-donehero .pc-t-mega{font-size:min(160px,calc(100cqi / (var(--w,4) * .5)))}}

/* ---------- under 18 / expired (pn-stop) ---------- */
.pn-stop{container-type:inline-size;width:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:100vh;min-height:100dvh;max-width:592px;margin:0 auto;padding:24px;box-sizing:border-box;background:var(--chrome);color:var(--on-chrome)}
.pn-stop .pc-t-mega{font-size:min(104px,calc(100cqi / (var(--w,4) * .5)));color:var(--on-chrome);outline:0;overflow-wrap:anywhere}
.pn-stop p{margin:0;max-width:28ch;color:var(--on-chrome-2);font:400 16px/1.45 var(--font-sans)}
.pn-stop .pc-btn{align-self:flex-start;margin-top:10px}
.pn-stop__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pn-stop .pc-btn--line{color:var(--on-chrome);border-color:transparent}
.pn-stop .pc-btn--line:hover{background:var(--on-chrome);color:var(--chrome)}
.pn-stop__badge{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 22px/1 var(--font-display);}
.pn-stop__badge .pc-ico{width:36px;height:36px}

/* ---------- S4 "You're in" toast ---------- */
.pn-toastwrap{position:fixed;left:0;right:0;bottom:calc(112px + var(--toast-gap) + env(safe-area-inset-bottom));z-index:var(--z-toast);display:flex;justify-content:center;pointer-events:none}
.pn-intoast.pc-toast{gap:8px;min-height:44px;padding:0 18px 0 8px;animation:pn-toast-in var(--dur-enter) var(--ease-pop) both var(--dur-base)}
.pn-toastwrap[hidden]{display:none}
.pn-toastwrap.is-gone{opacity:0;transition:opacity var(--dur-slow)}
@keyframes pn-toast-in{from{transform:translateY(30px);opacity:0}}
@media (min-width:701px){.pn-toastwrap{top:calc(var(--wizbar-h) + 16px);bottom:auto;justify-content:flex-end;padding-right:var(--col-pad)}}   /* night 05.10. (audit #6): top right under the bar, never over the pink key or the hand line */

@media (prefers-reduced-motion:reduce){
  .pn-phase__tr i,.pn-offertile,.pn-saved,.pn-wizprev.is-open,.pn-intoast.pc-toast,.pn-offertile.is-selected .pn-offertile__tick,.pn-crop,.pn-details > summary .pc-ico,.pn-toastwrap.is-gone{transition:none;animation:none}
}

/* ---------- brand pass (flows AD, docs/brand-harmony-rules.md §9 "Signup + wizard") ----------
   Every white step opens with a care-label step marker (paper object, dashed seam, tub) and the step's one Caveat line.
   Objects keep their paper colours in both themes. */
.pn-wiztag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);margin:2px 0 var(--space-4);min-width:0}
.pn-wiztag__label{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);flex:none;height:30px;padding:0 var(--space-3) 0 10px;border-radius:3px 3px 10px 10px;background:var(--obj-paper);color:var(--obj-ink);box-shadow:none;border:1px solid var(--line);font:600 11px/1 var(--font-label);letter-spacing:var(--tr-label);white-space:nowrap}
.pn-wiztag__label::before{content:"";position:absolute;inset:3px;border:1px dashed var(--obj-line);border-radius:2px 2px 8px 8px;pointer-events:none}
.pn-wiztag__label .pn-tub{width:16px;height:16px;color:var(--pink-ink)}
.pn-wiztag__note.pn-hand{color:var(--pink-text);flex:1 1 150px;min-width:0;max-width:var(--measure-note);margin-left:auto;font-size:var(--fs-hand-s);line-height:1;text-align:right;text-wrap:balance;hyphens:manual}   /* night QA D5: pink ink in light (was 1.7:1), pink in dark */
.pn-wiztag > .pn-wiztag__note.pn-hand:first-child{margin-left:0;text-align:left}   /* UX 17.10. #43: the join wizard drops the step label (the phase bar is the one progress display); its note then opens the line */
@media (min-width:701px){.pn-wiztag{margin-bottom:var(--space-5)}}
@media (min-width:1200px){.pn-wiz--wide .pn-wiztag{width:100%;max-width:1056px;margin-inline:auto;padding-right:496px;box-sizing:border-box}}

/* S1 on desktop (agency P-8: proof left, buttons centred, the right half empty): the words and actions on the left,
   the polaroid on the right. The step and its dock become grid items (display:contents); the order stays the DOM order. */
@media (min-width:1200px){
  .pn-wiz--photo{display:grid;grid-template-columns:minmax(0,560px) 400px;grid-template-rows:repeat(8,min-content) 1fr;column-gap:96px;justify-content:center;max-width:1120px;padding-inline:32px;align-items:start}
  .pn-wiz--photo > .pn-wizstep,.pn-wiz--photo > .pn-dock{display:contents}
  .pn-wiz--photo > .pn-wiztag,.pn-wiz--photo .pn-wizstep > *,.pn-wiz--photo .pn-dock > *{grid-column:1}
  .pn-wiz--photo .pn-crop{grid-column:2;grid-row:1 / -1;width:320px;margin:var(--space-6) auto var(--space-8)}
  .pn-wiz--photo .pn-lede{max-width:var(--measure-lede)}
  .pn-wiz--photo .pn-wiz__proof{margin:var(--space-6) 0 0;max-width:420px}
  .pn-wiz--photo .pn-dock__empty{justify-content:flex-start;align-items:center;margin:var(--space-5) 0 var(--space-8)}
  .pn-wiz--photo .pn-dock__filled{margin:var(--space-5) 0 var(--space-8)}
  .pn-wiz--photo .pn-dock__filled .pc-btn--block{margin:0}
  .pn-wiz--photo .pn-crop__exif{justify-content:flex-start}
}

/* ==========================================================================
   v3 (design/v2/cast-mockup.html, docs/design-v3-system.md): the wizard on the kit's type and colour.
   Step heads = the app frame .h-m role (44 / 32, Archivo 900 wdth 72, caps): words wrap only at spaces, never mid-word.
   The accent word = the pink .tape (anthracite on pink), not red text. One object per step, 96 px, top right
   (cast-and-props §2 "Wizard": care label, the panty on the peg, the tag, the stack; never a woman).
   ========================================================================== */
.pn-wiz .pn-hero .pc-t-display,.pn-wiz .pn-hero .pc-t-mega{font-size:var(--fs-m);line-height:var(--lh-head);letter-spacing:var(--tr-h);overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.pn-wiz .pn-hero .pn-accent-text,.pn-wiz .pn-hero em,.pn-stop .pn-accent-text,.pn-donehero .pn-accent-text,.pn-golivefb .pn-accent-text{font-style:normal;background:var(--pink);color:var(--anthracite);padding:.02em .14em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn-wiz{position:relative}
.pn-wizobj{position:absolute;right:16px;top:64px;z-index:2;width:96px;filter:var(--fig-shadow);pointer-events:none}
.pn-wizobj img{display:block;width:100%;height:auto}
.pn-wiz.has-obj > .pn-wizstep .pn-hero,.pn-wiz.has-obj > form > .pn-hero{padding-right:108px}
.pn-wizobj__label.pc-carelabel{width:96px;padding:10px 10px 9px}
.pn-wizobj__label .pc-logo{font-size:14px}
.pn-wizobj__label p{margin-top:6px;font-size:9px}
.pn-wizobj__label .pc-carelabel__v{font-size:22px}
.pn-wizobj__label .pc-nophoto__syms{margin:6px 0 0;gap:5px}
.pn-wizobj__label .pc-nophoto__syms i{width:12px;height:12px}
.pn-donehero{position:relative}
.pn-wizobj--done{top:auto;bottom:24px;right:max(24px,calc((100% - 528px) / 2))}   /* T33: anchored to the 528 column (with the headline), not the viewport edge */
/* polish r2: headline and line keep clear of the 96 px stack (longer headlines in es/fr/it/pt ran under it) */
.pn-donehero > :is(h1,p){max-width:calc(100% - 112px)}
@media (min-width:701px){
  .pn-wizobj{right:0;top:96px}
  .pn-wizobj.pn-wizobj--done{top:auto;right:max(24px,calc((100% - 528px) / 2))}
}

/* polish r3: the selected plan in "Go live" is marked in pink, never a near-white ring in dark (the shared paysite.css
   rule is handed to its owner; this keeps the wizard right meanwhile) */
.pn-wiz .pn-plan:hover{border-color:var(--line-3)}
.pn-wiz .pn-plan:has(input:checked){border-color:transparent;box-shadow:none}

/* ==========================================================================
   polish r4: ONE step frame for all ten steps from 1200 px (the .pn-wiz--wide grid: form 560 | aside 400, gap 96,
   1056 wide, centred). The form column always starts at the frame's left edge (192 at 1440), so the heading, the
   "Step 0X of 10" tag and the note never jump sideways between steps. Steps without an aside leave it empty; the
   black full-width page (done) keeps its ground edge to edge and puts its words in the same column.
   ========================================================================== */
@media (min-width:701px){
  .pn-wiz .pn-wizstep--narrow{padding-inline:0}   /* .pn-wiz already holds the gutter: the narrow steps start where the wide ones do */
  .pn-donehero{padding-inline:max(16px,calc((100% - 560px) / 2))}
  .pn-donehero__sticker{right:max(22px,calc((100% - 560px) / 2))}
  .pn-wizobj.pn-wizobj--done{right:max(24px,calc((100% - 560px) / 2))}
}
@media (min-width:1200px){
  .pn-wiz:is(.pn-wiz--name,.pn-wiz--account,.pn-wiz--preview,.pn-wiz--summary):not(.pn-wiz--wide){max-width:1120px;padding-inline:32px}
  .pn-wiz:is(.pn-wiz--name,.pn-wiz--account,.pn-wiz--preview,.pn-wiz--summary):not(.pn-wiz--wide) > :is(.pn-wizstep,.pn-wiztag){width:100%;max-width:1056px;margin-inline:auto;padding:0 496px 0 0;box-sizing:border-box}
  .pn-wiz--photo > .pn-wiztag{max-width:none;padding-right:0}
  .pn-wiz--golive .pn-paysite--golive{max-width:1120px;padding-inline:32px 528px}
  .pn-donehero{padding-inline:calc((100% - 1056px) / 2) calc((100% - 1056px) / 2 + 496px)}
  .pn-wiz--done > .pn-wizstep--narrow{max-width:1120px;padding:0 528px 0 32px}
  .pn-donehero__sticker,.pn-wizobj.pn-wizobj--done{right:calc((100% - 1056px) / 2 + 496px)}
}
/* ---------- signup C: post-signup nudges (docs/spec-pnew-signup.md §7), v3 = built from the mockup kit ----------
   Checklist .pn-nudgecl = a panel (.pcard skin: paper, the line, radius 24, no shadow) with the card head, the ring and
   plain rows. Next-step card .pn-nudgecard = the hero stat (account.css: the dark box with the pink tile number).
   Takeover .pn-nudgesheet = the shared sheet. Buyer chip .pn-nudgechip and proof tile .pn-proof = paper cards with the
   line. Live counts use the kit chip (ui_live, components.css).
   Self-contained: the checklist rows do not lean on items.css. */

/* Stack on sell_home / me: checklist, then the card, then the page. */
.pn-nudgestack{display:grid;gap:22px;margin:0 0 var(--section-gap)}
.pn-nudgestack:empty{display:none}

/* ---- Checklist ---- */
.pn-nudgecl{padding:18px var(--panel-pad) 8px;border-radius:var(--r-box);box-shadow:none}
.pn-nudgecl__head{display:flex;align-items:center;gap:14px;min-height:58px;margin-bottom:10px}
.pn-nudgecl__guide{margin:6px 0 12px;padding-top:12px;border-top:1px solid var(--line)}   /* night N6 08.10.: the first-sale guide, a quiet link under the rows */
.pn-nudgecl__guide{display:flex;flex-wrap:wrap;gap:8px 24px}   /* night L2 (08.10.): the guide and the Verified badge link side by side, wrapping on phones */
.pn-nudgecl__t{flex:1;min-width:0}
.pn-nudgecl__t h2{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink);hyphens:manual}
/* T55: at <=400 the fold and close squares sit in the card's top-right corner, so the heading gets the whole row
   beside the ring (no mid-word break "PROFIL / E"). */
@media (max-width:400px){
  .pn-nudgecl{position:relative}
  .pn-nudgecl__head{gap:12px;padding-right:74px}
  .pn-nudgecl__t h2{font-size:22px}
  .pn-nudgecl .pn-ring{width:48px;height:48px}
  .pn-nudgecl .pn-ring b{width:38px;height:38px;font-size:15px}
  .pn-nudgecl .pn-ring small{margin-top:11px}
  .pn-nudgecl__head .pn-nudgecl__fold,.pn-nudgecl__head .pn-nudgecl__x{position:absolute;top:12px;right:12px;width:32px;height:32px}
  .pn-nudgecl__head:has(.pn-nudgecl__x) .pn-nudgecl__fold{right:48px}
}
.pn-nudgecl__next{margin:6px 0 0;font:400 13px/1.35 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere}
.pn-nudgecl__proof{margin:0 0 10px;font:400 13px/1.45 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere}   /* new-seller signals M2: the cohort line */
.pn-nudgecl .pn-ring{--p:0;flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--pink) calc(var(--p) * 1%),var(--sunken) 0)}
.pn-nudgecl .pn-ring b{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--surface);color:var(--ink);font:700 17px/1 var(--font-display);font-variant-numeric:tabular-nums}
.pn-nudgecl .pn-ring small{font-size:.6em;align-self:flex-start;margin-top:15px}
.pn-nudgecl__fold,.pn-nudgecl__x{width:40px;height:40px;background:transparent;color:var(--ink)}
.pn-nudgecl__fold:hover,.pn-nudgecl__x:hover{border-color:var(--line-3)}
.pn-nudgecl__fold .pc-ico,.pn-nudgecl__x .pc-ico{width:20px;height:20px;transition:transform .2s var(--ease-snap)}
.pn-nudgecl__fold[aria-expanded="false"] .pc-ico{transform:rotate(-90deg)}
.pn-nudgecl__head form{display:contents}
.pn-nudgecl__rows{margin:0;padding:0;list-style:none}
.pn-nudgecl__rows[hidden]{display:none}
.pn-nudgecl__rows > li{border-top:1px solid var(--line)}
.pn-nudgecl .pn-checkrow{display:flex;align-items:center;gap:12px;min-height:48px;padding:0;border-radius:0;color:inherit;text-decoration:none}
.pn-nudgecl .pn-checkrow::before{display:none}
.pn-nudgecl a.pn-checkrow:hover{background:transparent}
.pn-nudgecl a.pn-checkrow:hover .pn-nudgecl__go{text-decoration-color:var(--ink)}
.pn-nudgecl a.pn-checkrow:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-rules)}
.pn-nudgecl .pn-checkrow .pn-row__main > b{font:600 14px/1.3 var(--font-sans);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.pn-nudgecl .pn-checkdot{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:transparent;color:transparent}
.pn-nudgecl .pn-checkdot .pc-ico{width:14px;height:14px;stroke-width:3}
.pn-nudgecl .pn-checkrow.is-done .pn-checkdot{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pn-nudgecl .pn-checkrow.is-done .pn-row__main > b{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--ink-3)}
/* "Add" = the see-all link (Inter Tight 700, ink, pink underline). */
.pn-nudgecl__go{flex:none;margin-left:auto;font:700 13px/1 var(--font-sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
.pn-nudgecl--wizard{position:relative;z-index:2}

/* ---- Next-step card: the hero stat variant (account.css) ---- */
.pn-nudgecard p{margin:0}
.pn-nudgecard form{margin:0}
.pn-nudgecard__h{margin:0;padding-right:48px;font:700 var(--fs-m)/var(--lh-head) var(--font-display);color:var(--dk-ink)}
.pn-nudgecard__body{max-width:44ch;font:400 15px/1.5 var(--font-sans);color:var(--dk-ink-2)}
.pn-nudgecard__proof{max-width:48ch;font:400 12px/1.4 var(--font-sans);color:var(--dk-ink-2)}
.pn-nudgecard__chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-nudgecard__h .pn-nudgecard__sticker{position:relative;top:-6px;margin-left:10px;vertical-align:middle}
.pn-nudgecard--promo{gap:var(--space-4)}
/* The close form sits out of the grid flow (no empty row); its button is pinned to the corner. */
.pn-nudgecard > form:has(.pn-nudgecard__x){position:absolute;top:14px;right:14px;z-index:2}
.pn-nudgecard__x{width:40px;height:40px;border-color:var(--line);background:transparent;color:var(--dk-ink)}
.pn-nudgecard__x:hover{border-color:transparent}
.pn-nudgecard__x .pc-ico{width:20px;height:20px}
.pn-nudgecard--views .pn-herostat__main,.pn-nudgecard--waiting .pn-herostat__main{padding-right:48px}
.pn-nudgecard .pn-herostat__l{margin:6px 0 0}
.pn-nudgecard__later{display:block;width:100%;min-height:44px;margin:0;padding:0 14px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--dk-ink-2);font:700 14px/1 var(--font-sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pn-nudgecard__later:hover{color:var(--dk-ink)}
.pn-nudgecard__later:focus-visible,.pn-nudgecard__x:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
/* Actions: the CTA and "Not now" as one block (phone: full width under the text). */
.pn-nudgecard__acts{display:grid;gap:6px;min-width:0}
.pn-nudgecard__acts .pn-herostat__cta{width:100%}
@media (min-width:701px){
  /* Desktop: text left, actions right, spanning exactly the rows that render (--rows from the partial), bottom-aligned. */
  .pn-nudgecard{grid-template-columns:minmax(0,1fr) auto;align-items:start;align-content:start}
  .pn-nudgecard > *:not(.pn-nudgecard__acts){grid-column:1}
  .pn-nudgecard > .pn-nudgecard__acts{grid-column:2;grid-row:1 / span var(--rows,2);align-self:end;min-width:240px}
  .pn-nudgecard__acts .pn-herostat__cta.pc-btn--block{grid-column:auto;grid-row:auto;width:100%}
  .pn-nudgecard .pn-herostat__l{margin:0 0 4px}
  .pn-nudgecard:has(.pn-nudgecard__x) > .pn-nudgecard__acts{margin-right:52px}
}

/* ---- Takeover sheet (first buyer message): the shared sheet ---- */
.pn-nudgesheet__new{margin-bottom:12px}
.pn-nudgesheet__who{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pn-nudgesheet__av.pc-avatar{width:40px;height:40px;filter:blur(1.5px)}
.pn-nudgesheet__who p{margin:0;display:grid;gap:2px;font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-nudgesheet__who b{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.pn-nudgesheet__h{margin-bottom:6px;max-width:15ch}
.pn-nudgesheet__h:focus{outline:none}   /* programmatic focus target (tabindex=-1) for screen readers, not a control */
.pn-nudgesheet__later{display:block;width:100%;min-height:44px;margin:2px 0 0;padding:0 14px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--ink-2);font:700 14px/1 var(--font-sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.pn-nudgesheet__later:hover{color:var(--ink)}
.pn-nudgesheet form{margin:0}

/* ---- Buyer chip (the only buyer follow-up): a paper row with the line ---- */
.pn-nudgechip{display:flex;align-items:center;gap:8px;margin:0 0 var(--space-4);padding:10px 10px 10px 12px;border-radius:var(--r-rules);background:var(--surface);border:1px solid var(--line)}
.pn-nudgechip__main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:44px;color:inherit;text-decoration:none;border-radius:var(--r-pcard)}
.pn-nudgechip__main:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-nudgechip__ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--ink)}
.pn-nudgechip__ico .pc-ico{width:20px;height:20px}
.pn-nudgechip__txt{display:grid;gap:2px;min-width:0}
.pn-nudgechip__txt b{font:600 15px/1.3 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-nudgechip__txt small{font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-nudgechip form{margin:0}
.pn-nudgechip__x{width:40px;height:40px;background:transparent;color:var(--ink)}
/* Verkäufe 500 NACH-004 (switch buyer_first_write): the seller chip — her listing photo, her name, "Message her" */
.pn-nudgechip__img{flex:none;width:48px;height:48px;border-radius:var(--r-pcard);object-fit:cover}
.pn-nudgechip__cta{flex:none;margin-left:auto}
@media (max-width:420px){.pn-nudgechip--fw .pn-nudgechip__main{flex-wrap:wrap}.pn-nudgechip--fw .pn-nudgechip__cta{margin-left:60px}}
.pn-nudgechip__x:hover{border-color:var(--line-3)}
.pn-nudgechip__x .pc-ico{width:18px;height:18px}

/* ---- Proof tile: one honest cohort line (the wizard's S1 / S8 intro) ---- */
.pn-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin:14px 0 0;padding:14px 18px;border-radius:var(--r-tile);background:var(--surface);border:1px solid var(--line)}
.pn-proof__big{font:700 33px/1 var(--font-display);color:var(--pink-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-proof p{margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-proof p b{font-weight:700;color:var(--ink)}
/* On the S1 photo step the proof is a sewn-in label (paper object, dashed seam), the same in both themes. */
.pn-wiz .pn-proof.pn-wiz__proof{position:relative;display:grid;width:auto;border:0;border-radius:var(--r-label);background:var(--cream);box-shadow:var(--sh-label)}
.pn-wiz .pn-proof.pn-wiz__proof::before{content:"";position:absolute;inset:5px;border:1.5px dashed var(--dash-2);border-radius:4px;pointer-events:none}
.pn-wiz .pn-wiz__proof .pn-proof__big{color:var(--pink-ink)}   /* T41: the proof % carries information; paper label = same in both themes */
.pn-wiz .pn-wiz__proof p{color:var(--muted-lt)}
.pn-wiz .pn-wiz__proof p b{color:var(--anthracite)}


@media (max-width:700px){
  .pn-nudgecl{padding:14px var(--panel-pad) 6px}
}
@media (prefers-reduced-motion:reduce){
  .pn-nudgecl__fold .pc-ico{transition:none}
}
/* ==========================================================================
   Guest pages on the v3 kit (design/v2/cast-mockup.html, docs/design-v3-system.md §4): the used-panties hub, facets,
   /ads/ and Discover for guests. The app frame head (.app .h-m + .sub), the pill row (.tabs-app), v3 listing cards and
   seller tiles, the side column (paper panels, the .pbox prices, the join door = .door--buy, trust rows = .priv on
   paper with the 44 round icon well), the pager (line button + page pills), the editorial text (kicker + prose).
   This file only places components. Tokens only. One breakpoint: <=700 / >=701.
   ========================================================================== */

/* ---------- small labels + breadcrumbs ---------- */
.pn-glabel{display:block;font:600 11px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pn-gcrumbs{margin:0 0 18px}
.pn-gcrumbs .pn-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:0;list-style:none;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-gcrumbs .pn-crumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pn-gcrumbs .pn-crumbs a{color:var(--ink-2);text-decoration:none}
.pn-gcrumbs .pn-crumbs a:hover{color:var(--ink);text-decoration:underline}
.pn-gcrumbs .pn-crumbs [aria-current]{color:var(--ink);white-space:normal;overflow:visible}   /* wave 2: a long current crumb (guide title) wraps instead of an ellipsis (market.css .pn-crumbs) */
.pn-gcrumbs .pn-chev{width:14px;height:14px}

/* ---------- hub / Discover head (.app .h-m + .sub), facets (.tabs-app) ----------
   Guest grounding 02.10. (docs/guest-grounding-02-10.md): the head is the page-head band (.pc-band, app.css) over the
   main column of the .pn-split frame: crumbs, the title (h1 + count), the text (lead, strike line, intro, ask), the
   facet pills closing the band. From 1440 title | text side by side, so the band row is used up to the lead card. */
.pn-hubhead{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;align-items:start;gap:0;margin:0;padding-bottom:var(--app-head-pb)}
.pn-hubhead > .pn-gcrumbs{margin:0 0 14px}
.pn-hubhead__b{display:grid;grid-template-columns:minmax(0,1fr);min-width:0}
.pn-hubhead__t{display:grid;gap:6px;align-content:start;min-width:0}
.pn-hubhead__t .pc-sub{margin:0}
.pn-hubhead__x{display:grid;gap:10px;align-content:start;min-width:0;margin-top:12px}
.pn-hubhead .pc-h-m{margin:0}
.pn-hubhead__x > *{margin:0}
.pn-hubhead__x > .pn-hubask{margin-top:4px}
/* Beside a taller lead card (from 1000) the title + text block stands in the middle of the band (crumbs on top, the
   facet pills on the line), never hung from the crumbs over an empty foot. From 1440 title | text side by side, both
   zones on one top line (the h1 beside the strike line / the intro's first line, never sunk to the text's foot). */
@media (min-width:1000px){.pn-hubhead{grid-template-rows:auto 1fr}.pn-hubhead > .pn-hubhead__b{align-self:center}}
@media (min-width:1440px){
  .pn-hubhead__b{grid-template-columns:minmax(0,1fr) min(600px,56%);column-gap:48px;align-items:start}
  .pn-hubhead__x{margin-top:0}
  .pn-hubhead__t:only-child{grid-column:1 / -1}
  /* a one-line lead (/ads/) stays under the title: two zones only for a text block */
  .pn-hubhead__b:has(> .pn-hubhead__x > p.pn-hubintro:only-child){grid-template-columns:minmax(0,1fr)}
  .pn-hubhead__b:has(> .pn-hubhead__x > p.pn-hubintro:only-child) > .pn-hubhead__x{margin-top:12px}
}
.pn-hubintro,.pn-hubhead p.pn-hubintro{max-width:70ch;margin:0;font:400 15px/1.6 var(--font-sans);color:var(--ink-2)}
.pn-hubintro p{margin:0}
.pn-hubintro p + p{margin-top:10px}
.pn-hubintro a{color:var(--ink);font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-hubintro .pn-draftband{margin:0 0 10px}
.pn-hubhead .pn-hubk{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink)}
.pn-hubask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pn-hubask ul{margin:0;padding:0;list-style:none}
/* polish r4: the questions read as quoted words (ink-2, dot-separated), never as pills that look like filters */
.pn-hubask__qs{display:flex;flex-wrap:wrap;gap:4px 18px}
.pn-hubask__qs li{font:600 14px/1.35 var(--font-sans);color:var(--ink-2)}
/* polish 02.10.: no "·" between the questions: on a wrap it opened the next line on its own; the quote marks part them */
.pn-facets{margin:20px 0 0}
.pn-facets .pn-chipn{font-weight:600;opacity:.72}

/* ---------- hub layout = the .pn-split frame (app.css): head band | lead card, main (grid + pager) | side column ----------
   Guest grounding 02.10.: the side column is 300 (360 from 1440, the members' split side); the grid takes its columns
   from the main column's own width (container pn-gmain): 2 / 3 / 4 / 6, so 12 cards before the seller row and 24 per
   page always end on full rows; the members' wide grid gap. */
.pn-hub{--split-side:300px}
@media (min-width:1440px){.pn-hub{--split-side:360px}}
.pn-hub__main,.pn-hubaside{min-width:0}
.pn-hub__main{container:pn-gmain / inline-size}
.pn-hubaside{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--app-gap);align-content:start}   /* T40: the panels never outgrow the side column */
/* owner 12.10.: the sellers filter bar: three chips over the grid; on a phone one row that swipes */
.pn-sfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pn-sfilter__chip{min-height:36px;padding:8px 14px 8px 12px;border-color:var(--line);text-decoration:none;white-space:nowrap}
.pn-sfilter__chip .pc-ico{width:16px;height:16px;margin:0}
/* UX 17.10. #40: one chip style for the three (no gold, no pink fill); the chosen one is tonal — the lighter surface, an ink rim —
   with the pink tick in place of its icon, so it reads at a glance in both themes */
.pn-sfilter__chip[aria-current]{background:var(--surface-2);color:var(--ink);border-color:transparent}
.pn-sfilter__chip[aria-current] .pc-ico{color:var(--pink-glyph)}
@media (max-width:700px){.pn-sfilter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 14px;padding:0 var(--gutter)}.pn-sfilter::-webkit-scrollbar{display:none}}
.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:701px){.pn-hubgrid,.pn-discgrid{gap:var(--wide-grid-gap)}}
@container pn-gmain (max-width:519px){.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pn-gmain (min-width:840px){.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container pn-gmain (min-width:1220px){.pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1000px){.pn-hubaside{position:sticky;top:var(--sticky-top)}}
/* AD2 03.10.: tablets (701–999) stack the side column under the grid: two panels per row instead of four full-width
   cards (1,100 px of stacked boxes on an iPad); an odd last panel takes the row. */
@media (min-width:701px) and (max-width:999px){
  .pn-hub:not(.pn-disc--guest) > .pn-hubaside{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .pn-hub:not(.pn-disc--guest) > .pn-hubaside > :last-child:nth-child(odd){grid-column:1 / -1}
}
/* the seller row after 12 cards (mockup .sec-head + .sellers); T38: the rail is clipped inside the main column and
   fades at the right edge, so a cut avatar reads as "scroll for more" */
.pn-gridbreak{grid-column:1 / -1;min-width:0;padding:18px 0 8px}
.pn-gridbreak .pn-hpola__rail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}
.pn-hpola__rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:4px;margin-block:-4px}
.pn-hpola__rail::-webkit-scrollbar{display:none}
.pn-hubstories{margin:0 0 var(--app-gap)}
/* side panels: numbers (.tile type on paper), the prices (.pbox rows), the countries */
.pn-hubaside .pn-panel,.pn-hubsel{display:grid;gap:12px;min-width:0}
.pn-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pn-minis b{display:block;font:700 22px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-minis span{display:block;margin-top:4px;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-pricefacts{display:block}
.pn-hubsel .pn-pricefacts{padding-top:12px;border-top:1px solid var(--line)}
/* In the band (from 1000) the lead card is the selection at a glance: the three prices as cells under the three numbers
   (same columns), the source line and the report link under them. AD2 03.10.: tablets too (701–999: the card follows
   the grid at the full column width, where three dashed 600 px rows read as a form). */
@media (min-width:701px){
  .pn-hubsel .pn-pricefacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;align-items:start}
  .pn-hubsel .pn-pricefacts > :not(.pc-pbox__row){grid-column:1 / -1}
  .pn-hubsel .pn-pricefacts > .pc-pbox__t{margin-bottom:12px}
  .pn-hubsel .pc-pbox__row{display:grid;align-content:start;gap:4px;padding:0;border:0;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
  .pn-hubsel .pc-pbox__row b{order:-1;display:flex;align-items:flex-end;min-height:40px;font-size:22px;color:var(--ink)}
  .pn-hubsel .pc-pbox__row.is-med b{font-size:29px}
  .pn-hubsel .pn-pricefacts small{margin-top:12px}
}
.pn-pricefacts small{display:block;margin-top:10px;font-size:12px;color:var(--ink-2)}
/* polish 02.10.: the median is information, not decoration: the darker pink for text (>= 4.5:1 on paper; dark = pink),
   as on the landing's price card and the Drawer Report, never the 2.3:1 pink-press */
.pn-pricefacts .pc-pbox__row.is-med b{color:var(--pink-text)}
.pn-hubprice{display:inline-block;margin-top:12px;font:700 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-countries__h{margin:0;padding-top:12px;border-top:1px solid var(--line)}
.pn-panel > .pn-countries__h:first-child{padding-top:0;border-top:0}
.pn-countries{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pn-countries li{display:flex;align-items:center;gap:8px;font:600 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-countries li span{flex:1;min-width:0}
.pn-countries li b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-countries .pn-flag{flex:none;width:16px;height:16px;border-radius:50%}

/* ---------- content doors (polish 02.10., link tier 2): a section's see-all = the line button in the head (desktop),
   the same door full width after the content on phones (the landing's .pn-lp-door--top / --end) ---------- */
.pn-gdoor--end{display:none}
@media (max-width:700px){
  .pc-sechead .pn-gdoor--top{display:none}
  .pn-gdoor--end{display:flex;margin-top:16px}
}

/* ---------- the join door (mockup .door--buy) ---------- */
.pn-promo{align-items:stretch}
.pn-promo .pn-promo__label{align-self:flex-start}
.pn-promo h2{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:inherit;overflow-wrap:break-word;hyphens:manual}
.pn-promo p{margin:0;font-size:14px}
.pn-promo .pc-btn{margin-top:6px}
.pn-promo small{display:block;text-align:center;font:600 12px/1.3 var(--font-sans);color:var(--dk-ink-2)}
.pn-promo small a{color:var(--dk-ink)}   /* UX-071 (23.10.): the "House rules" link took layout.css's --ink (anthracite in the light theme) on the dark door: 1:1, invisible */
.pn-promo__creator{margin:6px 0 0;text-align:center;font:600 13px/1.35 var(--font-sans);color:var(--dk-ink-2)}   /* creator door (owner 27.10.) */
.pn-promo__creator a{color:var(--dk-ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- trust rows (.priv on paper, the 44 round icon well) ---------- */
.pn-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.pn-trust__item{display:flex;align-items:flex-start;gap:12px;min-width:0}
.pn-trust__item b{display:block;font:700 14px/1.3 var(--font-sans);color:var(--ink)}
.pn-trust__item span:not(.pn-rowicon){display:block;margin-top:2px;font:400 12.5px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-trust--stack{grid-template-columns:minmax(0,1fr);gap:0}
.pn-trust--stack .pn-trust__item{padding:12px 0;border-top:1px solid var(--line)}
.pn-trust--stack .pn-trust__item:first-child{padding-top:0;border-top:0}
.pn-trust--stack .pn-trust__item:last-child{padding-bottom:0}
@media (max-width:700px){.pn-trust{grid-template-columns:minmax(0,1fr);gap:0}.pn-trust__item{padding:12px 0;border-top:1px solid var(--line)}.pn-trust__item:first-child{border-top:0}}

/* ---------- pager: the line button, the page pills (.tabs-app, current = ink), the page line ---------- */
.pn-pager{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:34px}
.pn-pager__pages{justify-content:center;flex-wrap:wrap;row-gap:6px;max-width:100%}   /* SEO report 17.10.: the jump pills wrap on a phone */
.pn-pager__pages > :is(a,span){min-width:35px}
.pn-pager__pages > span.is-gap{display:inline-flex;align-items:center;min-height:35px;padding:0 4px;color:var(--ink-2)}
.pn-pager small{font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}

/* ---------- editorial text (mockup .laundry: the kicker left, the prose column) ---------- */
.pn-seotext{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;align-items:start;margin-top:var(--sec-gap);padding-top:40px;border-top:1px solid var(--line)}
/* Guest grounding 02.10.: the hub's tail on the paper band (the landing's Laundry Room surface) down to the footer;
   the band's edge replaces the line; the prose keeps its measure on the wide column. */
.pn-seotext.pc-band{margin-top:var(--app-sec-gap);padding:56px 0 0;border-top:0}
.pn-seotext.pc-band .pn-prose{max-width:var(--measure-prose)}
.pn-seotext__side{position:sticky;top:var(--sticky-top);display:grid;gap:14px;justify-items:start}
/* AD2 03.10.: tablets (701–1023): the 280 kicker column left the hub's prose a 380 px strip with an empty half page
   beside it; the kicker sits over the prose, which keeps its measure. */
@media (min-width:701px) and (max-width:1023px){
  .pn-ghub > .pn-seotext{grid-template-columns:minmax(0,1fr);gap:20px}
  .pn-ghub > .pn-seotext .pn-seotext__side{position:static}
}
.pn-draftband{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r-rules);background:var(--accent-soft);color:var(--pink-text);font:700 13px/1.35 var(--font-sans)}   /* T41 */
.pn-draftband .pc-ico{flex:none;width:16px;height:16px}
.pn-prose{color:var(--ink)}
.pn-prose p{margin:0}
.pn-prose p + p,.pn-prose ul + p,.pn-prose ol + p{margin-top:14px}
.pn-prose h2,.pn-prose h3{margin:30px 0 8px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink);hyphens:manual}
.pn-prose h3{font-size:22px}
.pn-prose > h2:first-child,.pn-prose > h3:first-child{margin-top:0}
.pn-prose a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-prose ul,.pn-prose ol{margin:10px 0;padding:0;list-style:none}
.pn-prose li{position:relative;margin-top:6px;padding-left:20px}
.pn-prose ul > li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pn-prose ol{counter-reset:pn-ol}
.pn-prose ol > li{counter-increment:pn-ol;padding-left:28px}
.pn-prose ol > li::before{content:counter(pn-ol);position:absolute;left:0;top:.1em;font:700 17px/1.4 var(--font-display);color:var(--pink-glyph)}
.pn-prose strong{font-weight:700}

/* ---------- proof tiles (kept for the wizard and the nudges: the dark .tile) ---------- */
.pn-proof{display:flex;flex-direction:column;gap:10px}
.pn-proof__tile{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--dk-card);color:var(--dk-ink)}
.pn-proof__tile b{display:block;font:700 29px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--pink)}
.pn-proof__tile span{display:block;margin-top:5px;font:600 13px/1.3 var(--font-sans);color:var(--dk-ink-2)}
.pn-proof__note{display:flex;gap:6px;align-items:flex-start;margin:0;font:600 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-proof__note .pc-ico{flex:none;width:16px;height:16px}

@media (max-width:700px){
  .pn-hubgrid,.pn-discgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-hubintro{font-size:14.5px}
  .pn-facets{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:5px var(--gutter);margin-block:11px -5px;scrollbar-width:none}
  .pn-facets::-webkit-scrollbar{display:none}
  .pn-facets > *{flex:none}
  .pn-hpola__rail{gap:14px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .pn-hubstories .pn-hpola__rail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 48px),transparent);mask-image:linear-gradient(to right,black calc(100% - 48px),transparent)}   /* UX polish 23.10. UX-066: the hub's seller rail fades at the edge like the grid-break rail (.pn-gridbreak above), so it reads as scrollable */
  .pn-seotext{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:32px}
  .pn-seotext.pc-band{padding-top:36px}
  .pn-seotext__side{position:static}
  .pn-prose h2{font-size:20px}
  .pn-promo h2{font-size:22px}
}

/* ---------- guest Discover (owner 30.09.: "zu viel freie Fläche", Premium row out): the head opens the main column,
   the join door stands beside it from the first line, the grid follows a two-sentence lead ---------- */
.pn-dischead__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.pn-dischead__t .pc-sub{margin:0;font:600 14px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-disc--guest .pn-hubintro{max-width:64ch;margin:0;font-size:16px;line-height:1.55;text-wrap:pretty}
.pn-draftband--sm{display:inline-flex;align-items:center;margin:0 0 10px;padding:5px 10px;border-radius:var(--radius-full);font-size:12px;line-height:1.2}
.pn-draftband--sm .pc-ico{width:14px;height:14px}
.pn-hubintro .pn-draftband--sm{margin:0 0 10px}
@media (max-width:700px){.pn-disc--guest .pn-hubintro{font-size:15px}}

/* polish r4: the guest sellers grid ends on a full row (a lone card under full rows read unfinished): a short last row
   is trimmed per column count; the first row always stays. Guest grounding 02.10.: the column count follows the main
   column (container pn-gmain: 2 / 3 / 4 / 6), so the trim does too. */
@container pn-gmain (max-width:519px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child) ~ *{display:none}}
@container pn-gmain (min-width:520px) and (max-width:839px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child) ~ *{display:none}}
@container pn-gmain (min-width:840px) and (max-width:1219px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child) ~ *{display:none}}
@container pn-gmain (min-width:1220px){.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(6n+1):nth-last-child(-n+5):not(:first-child),.pn-disc--guest .pn-discgrid:not(.pn-discgrid--part) > :nth-child(6n+1):nth-last-child(-n+5):not(:first-child) ~ *{display:none}}
/* owner 12.10.: the heading over the sellers of the other language sites */
.pn-discmore{margin:28px 0 14px}
/* owner 05.10.: a row without a flag ("Other") keeps the flag column, so the labels line up */
.pn-countries .pn-flag--none{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--sunken);flex:none}

/* community mode (owner 25.10., templates/cm_home.php): the six "what happens here" panels in three columns, two on tablets, one on phones */
.pn-cmhome__features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4,16px)}
.pn-cmhome__features .pc-h-s{display:flex;align-items:center;gap:8px}
.pn-cmhome__keys{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pn-cmhome .pn-dischead__t .pc-kicker{display:block;margin:0 0 6px}
/* home audit 26.10.: the kicker over the h1 (the head row was a flex line), the content over the full width once the trust
   aside is gone (the join box keeps the band's right column), the steps and the guides without the browser's list look */
.pn-cmhome .pn-dischead__t{display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:1000px){.pn-split.pn-cmhome:has(> .pn-split__head){grid-template-areas:"head lead" "main main"}}
.pn-cmhome__steps,.pn-cmhome ul.pn-stack{list-style:none;padding:0;margin:0}
.pn-cmfeed__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pn-cmfeed__item{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:baseline}
.pn-cmfeed__item time{white-space:nowrap}
@media (max-width:1024px){.pn-cmhome__features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pn-cmhome__features{grid-template-columns:minmax(0,1fr)}}
/* art director 27.10. C-048 / C-049: the creators head stacks at every width (the 300 px h1 beside a lede at x 484 read as
   two heads), the side column rides along instead of ending 894 px above the grid */
.pn-dischead__t{display:grid;gap:6px;justify-items:start}
.pn-dischead__t .pc-sub{max-width:60ch}
@media (min-width:1101px){.pn-split > aside,.pn-split > .pn-split__side{position:sticky;top:calc(var(--sticky-top) + 12px);align-self:start}}
/* UX 200 GST-42 (assets/js/guest.js): the line that names the page in the browser's language, under the header */
.pn-langhint{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 16px 0;padding:6px 6px 6px 16px;border-radius:var(--r-rules);background:var(--surface);color:var(--ink);font:400 14px/1.45 var(--font-sans)}
.pn-langhint a{font-weight:600}
/* ==========================================================================
   seo D: guest ad page, guest profile, members-only page (docs/spec-pnew-guest-seo.md §9.4–§9.7,
   docs/design-v2-guest-seo.md §3, mockup design/v2/guest-seo.html). Tokens only. One breakpoint: ≤700 / ≥701.
   ========================================================================== */

/* ---- masked contact chip: a 26px sunken pill with a 13px lock (server-side masking, §3.4) ---- */
.pn-masked{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--radius-full);background:var(--sunken);color:var(--ink-2);font:700 13px/1 var(--font-sans);vertical-align:2px;white-space:nowrap}
.pn-masked .pc-ico{width:13px;height:13px;stroke-width:2.4}

/* ---- About the seller (.pn-sellertrust): avatar row + one quality review in the bubble shape 22 22 22 7 ---- */
.pn-sellertrust{display:grid;gap:14px;box-shadow:none;background:var(--surface)}
.pn-sellertrust__quote{padding:12px 14px;border-radius:22px 22px 22px 7px;background:var(--sunken)}
.pn-sellertrust__quote blockquote{margin:6px 0 0;font:400 15px/1.45 var(--font-sans);color:var(--ink)}
.pn-sellertrust__quote small{display:block;margin-top:6px;font:600 12px/1.2 var(--font-sans);color:var(--ink-2)}

/* ---- review rows (profile) and quote card (landing, C may reuse) ---- */
.pn-review h3{margin:4px 0 0;font:800 15.5px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.pn-review blockquote{margin:4px 0 0;max-width:66ch;font:400 15.5px/1.55 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-quote{margin:0;padding:18px;border-radius:var(--radius-panel);background:var(--sunken)}
.pn-quote blockquote{margin:8px 0 0;font:400 15.5px/1.5 var(--font-sans)}
.pn-quote figcaption{margin-top:8px;font:600 13px/1.2 var(--font-sans);color:var(--ink-2)}

/* ---- guest storefront (.pn-store--guest), art-director round: crumbs above the head, photos teaser + trust in the main
   column, the join box + her details in the sticky side card ---- */
.pn-store--guest .pn-gcrumbs{margin:0 0 var(--space-3)}
/* polish 02.10.: on the app shell (.pn-gapp) the crumb row is the page-head band, the guest ad's geometry; on phones the
   row is hidden and the head meets the chrome (the shell's --app-top, not the old fixed 28) */
.pn-store--guest.pn-gapp > .pn-dttop.pc-band{margin-bottom:var(--app-gap);padding:6px 0 12px;min-height:0;align-items:center}   /* owner 05.10.: a compact bar, crumbs and share button on one axis */
.pn-store--guest.pn-gapp > .pn-dttop.pc-band .pn-gcrumbs{margin:0}
@media (max-width:700px){.pn-store--guest.pn-gapp > .pn-dttop + .pn-phead > .pn-dthead{margin-top:calc(-1 * var(--app-top))}}

/* polish r4: the side column rides along (the /sellers/ .pn-hubaside pattern) instead of leaving 600–1,200 px of empty
   column. guest.js sets --stick-h (the aside's height): an aside taller than the viewport sticks with its foot in view
   instead of hiding it under the fold. The trust row in the main column goes 2 × 2 (it wrapped to four lines in four). */
@media (min-width:1024px){
  .pn-store--guest .pn-dtprof__side,.pn-dtad--guest .pn-dtad__side{position:sticky;top:min(var(--sticky-top),calc(100vh - var(--stick-h,0px) - var(--space-4)));align-self:start}
}
/* polish r4: the rating pill in the head takes the kit focus ring, not the browser's 1 px blue */
.pn-store--guest .pn-dtrate--pill:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media (min-width:701px){
  .pn-store--guest .pn-dttrustblock .pn-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
}

@media (max-width:700px){
  .pn-store--guest .pn-gcrumbs{display:none}
  /* §9.5: on phones the sticky CTA replaces the tabbar for guests (always visible, like the ad buy bar). It is
     position:sticky (in flow), so the page needs no reserve under it: it docks flush on the footer (polish r1). */
  body:has(.pn-store--guest) .pn-tabbar{display:none}
  body:has(.pn-store--guest) .pn-main{padding-bottom:0}
}

/* polish r3 / 02.10.: the guest profile's section pills wrapped instead of swiping (owner rule: pills never clipped);
   AD3 03.10.: that rule now holds for every profile view and lives with the head card (detail.css, phones). */

/* polish r4: the guest ad's two card rows ("more from her", "similar") end on full rows: fixed column counts per
   width (the kit's auto-fill gave 5 + 3 and 4 + 1) and a short last row trimmed; the first row always stays. */
@media (max-width:700px){.pn-dtad--guest .pn-grid > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child) ~ *{display:none}}
@media (min-width:701px) and (max-width:959px){.pn-dtad--guest .pn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pn-dtad--guest .pn-grid > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child) ~ *{display:none}}
@media (min-width:960px) and (max-width:1099px){.pn-dtad--guest .pn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pn-dtad--guest .pn-grid > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child) ~ *{display:none}}
@media (min-width:1101px){.pn-dtad--guest .pn-grid > :nth-child(5n+1):nth-last-child(-n+4):not(:first-child),.pn-dtad--guest .pn-grid > :nth-child(5n+1):nth-last-child(-n+4):not(:first-child) ~ *{display:none}}

/* Owner 27.10. ("der Bereich sieht flatterig aus"): the trust points under her photos ran as a loose 2 × 2 grid — one
   point five lines, the others one, rows 40 px apart and no ground under them. Now one panel like the side's details
   card: one column, a hairline between the points, the text at the profile's reading size. The creator line under the
   page starts at the content's left edge instead of a centred island with a rule over it. */
.pn-store--guest .pn-dttrustblock{padding:6px var(--panel-pad,24px);border-radius:var(--r-card-x);background:var(--surface)}
.pn-store--guest .pn-dttrustblock .pn-trust{grid-template-columns:minmax(0,1fr);gap:0}
.pn-store--guest .pn-dttrustblock .pn-trust__item{align-items:center;gap:14px;padding:16px 0;border-top:0}
.pn-store--guest .pn-dttrustblock .pn-trust__item + .pn-trust__item{box-shadow:inset 0 1px 0 var(--t-hair,var(--mline))}
.pn-store--guest .pn-dttrustblock .pn-rowicon{width:38px;height:38px;background:var(--sunken)}
.pn-store--guest .pn-dttrustblock .pn-trust__item b{font-size:15px;line-height:1.35}
.pn-store--guest .pn-dttrustblock .pn-trust__item span:not(.pn-rowicon){margin-top:3px;max-width:68ch;font-size:14px;line-height:1.5;text-wrap:pretty}
.pn-store--guest + .pn-dtsell,.pn-store--guest .pn-dtsell{justify-content:flex-start;padding-top:0;border-top:0;font-size:15px}
/* ==========================================================================
   Guest landing + /sell + /buy + 404 art = design/v2/cast-mockup.html, ported 1:1 (owner 30.09.: "so will ich das haben").
   This file only PLACES the v3 kit (components.css): section backgrounds, paddings, grids and the cast / object
   positions, every value read off the mockup's <style> (desktop l.95-300, phone @container 700 l.320-405).
   The mockup is one 1440 frame and one 390 frame; 701-1100 (not in the mockup) keeps the desktop parts and gives the
   art column less room. Tokens only. Rotations only where the mockup rotates (stamp, sticker, notes, receipt, care
   label, hand notes, the tag objects, the lipstick, the envelope).
   Cast (cast-and-props.md §2): ROXY hero, JESS buy, MARA sell + /sell head, VIVIENNE Laundry Room + /sell worth,
   JESS J2 /buy intro, ROXY R2 404. Never in grids.
   ========================================================================== */

/* ---------- the landing runs edge to edge (its sections carry the column: .pc-wrap = mockup .wrap) ---------- */
body:has(.pn-lb) .pn-main,body:has(.pn-lpm) .pn-main{max-width:none;padding:0}
.pn-lb,.pn-lpm{position:relative}
.pn-lb h2,.pn-lb h3,.pn-lpm h2,.pn-lpm h3{text-wrap:balance}
.pn-lb img,.pn-lpm img{display:block}
.pn-lp-ctas{display:flex;flex-wrap:wrap;gap:14px}
.pn-lp-cta{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:28px;margin-top:44px}
/* the CTA row (art-director round 30.09.): the button | a stack of the fine print alone and a link row (ui_more), no dots */
.pn-lp-cta__stack{min-width:0}
.pn-lp-cta__stack > p:first-child{margin:0;max-width:440px;font:400 13px/1.5 var(--font-sans)}
.pn-lp-cta__links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin:10px 0 0}
.pn-lp-cta__have{font:400 13px/1.5 var(--font-sans)}
.pn-lp-cta__have .pc-more{font-size:13px}
/* content doors (link tier 2): the section-head line button on desktop, the same door after the content on phones */
.pn-lp-door--end{display:none}
/* "Browse by fabric and cut": the open cat-10 facet hubs as chips with their counts, the pink chip to the hub last */
.pn-lp-browse{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:28px}
.pn-lp-browse__h{font:600 11px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pn-lp-browse__row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.pn-lp-browse__chip{min-height:40px;padding:10px 16px;font:600 14px/1 var(--font-sans)}
.pn-lp-browse__n{margin-left:8px;font:700 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- 1 hero (.hero) ---------- */
.pn-lp-hero{background:var(--bg);color:var(--ink);padding:56px 0 0;overflow:hidden}
.pn-lp-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 700px;gap:16px;align-items:end}   /* owner 05.10.: the figure fills more of the hero */
.pn-lp-hero__copy{padding-bottom:72px;min-width:0}
.pn-lp-hero__chip{cursor:pointer;text-decoration:none}
.pn-lp-hero__chip--trust{cursor:default;gap:8px}   /* alt-look hero (owner 12.10. evening): the promise instead of the count, a lock for the live dot */
.pn-lp-hero__chip:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-lp-hero__h{margin:18px 0}
.pn-lp-hero__sub{margin:0 0 12px;max-width:520px;font-size:19px;line-height:1.45;color:var(--ink-2)}
.pn-lp-hero__lede{margin:0 0 30px;max-width:520px;font-size:16px;line-height:1.5;color:var(--ink-2)}   /* owner 05.10.: the second hero line */
.pn-lp-hero__count{margin:22px 0 0;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-lp-hero__art{position:relative;height:740px;margin:0}
.pn-lp-b1{position:absolute;left:50%;bottom:0;width:860px;transform:translateX(-50%)}
.pn-lp-b1 img{width:100%;height:auto;filter:drop-shadow(0 22px 28px var(--ground-shadow)) drop-shadow(0 2px 2px var(--ground-shadow))}   /* owner 05.10.: the cut-out sits on a soft ground shadow instead of looking pasted on */
.pn-lp-b1::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:46px;border-radius:50%;background:radial-gradient(closest-side,var(--ground-shadow),transparent);opacity:.9;pointer-events:none}
/* T50: the hero price tag = mockup .ptag on the blank paper tag (wide: 58.5 / 75 %, -2°; portrait: 35.8 / 69 %, 12°). */
.pn-lp-b1{container-type:inline-size}
.pn-lp-b1 picture{display:block}
.pc-ptag.pn-lp-b1__tag{left:58.5%;top:75%;--r:-2deg;font-size:2.9cqw}
.pn-lp-b1__tag small{font-size:1.05cqw}
/* hero r5 (owner 11.10.): the lying creator shot. Her blank tag is small, so the price alone sits on it; size and stamp
   for the desktop row: after the 1101 / 1440 blocks below */
.pn-lp-b1--r5 .pc-ptag.pn-lp-b1__tag{left:11.9%;top:55%;--r:9deg;font-size:1.6cqw}
.pn-lp-b1--r5 .pn-lp-b1__tag small{display:none}
.pn-lp-hero__stamp{position:absolute;left:0;top:120px}
.pn-lp-hero__sticker{position:absolute;left:230px;top:44px}
.pn-lp-hero__illu{position:absolute;right:12px;bottom:12px;z-index:3;color:var(--ink)}
/* every cast label sits at its figure's foot, bottom right, on the veil chip (one rule for hero, buy, sell) */
.pn-lp-hero__illu,.pn-lp-buy__illu,.pn-lp-sell__illu{padding:3px 7px;border-radius:4px;background:var(--bg-veil);opacity:1;white-space:nowrap}
.pn-lp-hero__illu > *,.pn-lp-buy__illu,.pn-lp-sell__illu{line-height:1.2}

/* ---------- 2 + 3 real listings, real sellers (.real-sec) ---------- */
.pn-lp-real{background:var(--bg);color:var(--ink);padding:72px 0 64px;border-top:1px solid var(--line)}
.pn-lp-real--next{padding-top:0;border-top:0}
.pn-lp-sellrail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:4px;margin-block:-4px}
.pn-lp-sellrail::-webkit-scrollbar{display:none}
.pn-lp-sellrail > .pc-scard{flex:none}
/* from 1101: exactly six v3 seller cards (6 x 176 = 1056 on the 1168 column), spread, nothing cut; the door takes the rest */
@media (min-width:1101px){
  .pn-lp-sellrail{overflow:visible;justify-content:space-between;gap:0}
  .pn-lp-sellrail:not(.pn-lp-sellgrid) > :nth-child(n+7){display:none}
}
/* below: a rail that runs to the screen edge, so the cut reads as "swipe", never as a layout accident */
@media (max-width:1100px){
  .pn-lp-sellrail{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory}
  .pn-lp-sellrail > .pc-scard{scroll-snap-align:start}
}

/* ---------- 4 buyer block (.buy, anthracite) ---------- */
.pn-lp-buy{position:relative;overflow:hidden;background:var(--dk-bg);color:var(--dk-ink);padding:96px 0 88px}
.pn-lp-buy__top{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:40px;align-items:end}
.pn-lp-buy__main{min-width:0}
.pn-lp-buy .pc-kicker{color:var(--pink)}
.pn-lp-buy__h{margin:18px 0 20px;color:var(--white)}
.pn-lp-buy__lede{margin:0 0 16px;max-width:600px;font-size:18px;color:var(--dk-ink-2)}
/* owner 05.10.: the three questions and the Caveat answer "Just ask her." before the two figures */
.pn-lp-buy__ask{margin:0;max-width:600px;font-size:17px;line-height:1.5;color:var(--dk-ink)}
.pn-lp-buy__note{margin:8px 0 30px}
/* the "how" heads (buying: on anthracite; selling: on pink) over the four care steps */
.pn-lp-how__h{margin:0 0 24px}
.pn-lp-buy .pn-lp-how__h{color:var(--white)}
.pn-lp-sell .pn-lp-how__h{color:var(--anthracite)}
.pn-lp-sellhow{margin-top:56px}
.pn-lp-buy__art{position:relative;height:500px}
.pn-lp-buy__jess{position:absolute;right:0;bottom:-120px;height:560px;width:auto;filter:var(--rim-pink)}
.pn-lp-buy__label{position:absolute;left:0;bottom:40px;z-index:2}
.pn-lp-buy__illu{position:absolute;right:12px;bottom:12px;z-index:3;color:var(--dk-ink);background:var(--dk-veil)}
.pn-lp-how{position:relative;z-index:2;margin-top:72px}
.pn-lp-how__note{margin:0 0 20px;transform:rotate(-2deg);transform-origin:left}
.pn-lp-step{position:relative}
.pn-lp-step__obj{right:-14px;top:-58px;width:118px}
.pn-lp-step__obj--env{right:-10px;top:-50px;width:124px;transform:rotate(8deg)}
.pn-lp-buy .pn-lp-cta__stack > p:first-child,.pn-lp-buy .pn-lp-cta__have{color:var(--dk-ink-2)}
@media (min-width:1101px){.pn-lp-step:nth-child(2){padding-right:118px}}

/* ---------- 5 receipt (.proof) ---------- */
.pn-lp-proof{background:var(--bg);color:var(--ink);padding:88px 0;overflow:hidden}
.pn-lp-proof__wrap{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:60px;align-items:start}
.pn-lp-proof__copy{min-width:0;padding-top:40px}
.pn-lp-proof__h{margin:0}
.pn-lp-proof__p{margin:20px 0 0;max-width:460px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.pn-lp-proof__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin:22px 0 0}
.pn-lp-proof__h em{font-style:normal;color:inherit;background:linear-gradient(transparent 58%,var(--pink) 58% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn-lp-proof__h em{padding:0 .06em}
/* dark: light type on the pink marker reads like a strike; the marker becomes the full .tape band (anthracite type) */
[data-theme="dark"] .pn-lp-proof__h em{background:var(--pink);color:var(--anthracite)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lp-proof__h em{background:var(--pink);color:var(--anthracite)}}
.pn-lp-receipt__obj{right:-64px;bottom:-40px;width:120px;transform:rotate(-24deg);z-index:2}
.pn-lp-receipt q{quotes:"\201C" "\201D"}
.pn-lp-receipt .pn-quotes{display:block;list-style:none;margin:14px 0 0;padding:0}
/* a seller name inside a quote: the receipt's own type, a dotted ink line, the pink line on hover (one link per quote) */
.pn-lp-receipt__name{color:var(--anthracite);font:inherit;font-weight:700;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3px}
.pn-lp-receipt__name:hover{text-decoration:underline solid var(--pink);text-decoration-thickness:2px}
.pn-lp-receipt__name::before{content:"@"}

/* ---------- 6 seller block (.sell, pink) ---------- */
.pn-lp-sell{position:relative;overflow:hidden;background:var(--pink);color:var(--anthracite);padding:96px 0 88px}
.pn-lp-sell__top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head art" "lede art" "proof art";grid-template-rows:1fr auto auto;column-gap:40px;align-items:end}
.pn-lp-sell__head{grid-area:head;min-width:0;position:relative}   /* T48: the sticker anchors to the head (mockup .sell__head), not the grid */
.pn-lp-sell__lede{grid-area:lede;margin:0 0 18px;max-width:560px;font-size:18px}
.pn-lp-sell__lede > p{margin:0 0 10px}   /* owner 05.10.: three lede lines */
.pn-lp-sell__lede > p:last-child{margin-bottom:0}
.pn-lp-sell__art{grid-area:art;position:relative;height:520px}
.pn-lp-sell__proof{grid-area:proof;margin:0}
.pn-lp-sell__h{margin:18px 0 22px;color:var(--anthracite)}
.pn-lp-sell__sticker{position:absolute;left:390px;top:-14px}   /* on the kicker line, now anchored to the head block */
.pn-lp-sell .pc-fix{margin-right:.3em}   /* T49: the rotated Caveat fix never runs into the next word (fr "portées ! culottes") */
.pn-lp-sell__mara{position:absolute;right:40px;bottom:-150px;height:620px;width:auto}
.pn-lp-sell__illu{position:absolute;right:12px;bottom:12px;z-index:3;color:var(--anthracite);background:var(--pink-veil)}
.pn-lp-sell .pc-chip--live{border-color:transparent}
.pn-lp-notes{position:relative;z-index:2;margin-top:56px}
.pn-lp-boxes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}   /* polish r1: the same thirds as .pc-notes above, gutters line up */
.pn-lp-paid{display:flex;flex-direction:column}
.pn-lp-paid .pn-lp-paid__big{display:flex;align-items:baseline;gap:10px;margin:0;font:700 40px/1 var(--font-display);color:var(--anthracite)}
.pn-lp-paid .pn-lp-paid__big span{font-size:22px}
.pn-lp-paid .pn-lp-paid__big .pn-lp-paid__num{font-size:inherit;white-space:nowrap}
.pn-lp-paid p{font-size:14px;margin:10px 0 0}
.pn-lp-paid > p:last-child{margin-top:auto;padding-top:10px}
/* owner 05.10.: every box is one block of the copy — a lede under its head, its own CTA at the foot */
.pn-lp-box__p{margin:0 0 16px;font-size:14px;line-height:1.5}
.pc-box--dk .pn-lp-box__p{color:var(--dk-ink-2)}
/* REDAKTION (no calculator): two boxes share the row, no empty pink third column */
@media (min-width:701px){.pn-lp-boxes:not(:has(.pn-lp-calc)){grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-lp-calc .pc-box__h{padding-right:64px}
.pn-lp-calc small{display:block;color:var(--dk-ink-2);font-size:12px}
.pn-lp-calc__stack{right:20px;bottom:44px;width:112px}
/* T47: the fine print keeps clear of the panty stack (it sat on "income.") */
@media (min-width:701px){.pn-lp-calc > small:last-child{position:relative;z-index:1;padding-right:130px}}
/* art-director pass, night of 13.10.: the calculator is a cream box now, and these two rules still painted for the dark one —
   the median stood white on cream, unreadable in both themes. Cream: the box's own ink; the dark box keeps the light one. */
.pn-lp-calc__eq{margin:0;color:var(--muted-lt)}
.pn-lp-calc__eq b{color:var(--anthracite)}
.pc-box--dk .pn-lp-calc__eq{color:var(--dk-ink-2)}
.pc-box--dk .pn-lp-calc__eq b{color:var(--white)}
.pn-lp-calc .pn-lp-calc__res{margin:6px 0;font:700 49px/1 var(--font-display);letter-spacing:var(--tr-num);color:var(--pink)}   /* beats .pc-box--dk p */
.pn-lp-calc .pc-stepper button{color:var(--dk-ink)}
.pn-lp-calc .pc-stepper button:hover{border-color:transparent}
.pn-lp-calc .pc-stepper button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

/* ---------- 7 the Laundry Room (.laundry) ---------- */
.pn-lp-laundry.pn-seotext{display:block;margin:0;padding:0 0 96px;gap:0;background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
.pn-lp-laundry--tail.pn-seotext{padding-top:0;border-top:0}
.pn-lp-mast .pc-kicker{color:var(--ink)}
.pn-lp-mast__mini,.pn-lp-mast__illu{display:none}
.pn-lp-lgrid{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:48px;margin-top:40px}
.pn-lp-laundry--tail .pn-lp-lgrid{margin-top:0}
.pn-lp-lgrid__side,.pn-lp-lgrid__main{min-width:0}
.pn-lp-lgrid__side .pn-draftband{margin:0 0 16px}
.pn-lp-host{position:relative;height:360px;margin:0 0 22px}
.pn-lp-host::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:240px;border-radius:130px 130px 18px 18px;background:var(--sunken)}
.pn-lp-host__img{position:absolute;left:50%;bottom:0;height:350px;width:auto;transform:translateX(-50%)}
.pn-lp-host__illu{position:absolute;left:0;bottom:-18px;color:var(--ink)}
.pn-lp-laundry .pc-toc a{color:var(--ink)}
/* the TOC = an index card under the text and the price box (grid row 2, columns 2-3), two columns of numbered rows;
   the side column (VIVIENNE) spans both rows. On phones: a closed fold before the article (the summary chip). */
.pn-lp-lgrid__side{grid-row:1 / span 2}
.pn-lp-lgrid__toc{grid-column:2 / -1;grid-row:2;min-width:0}
@media (min-width:1101px){.pn-lp-laundry:not(.pn-lp-laundry--tail) .pn-lp-lgrid:not(:has(.pn-lp-lgrid__facts)) .pn-lp-lgrid__main{grid-column:2 / -1}}   /* pt: no price box, no empty column */
@media (min-width:701px){
  .pn-lp-lgrid__toc .pc-toc{margin:0;padding:22px 24px 12px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
  .pn-lp-lgrid__toc .pc-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .pn-lp-lgrid__toc .pc-toc li:nth-last-child(-n+2):nth-child(odd),.pn-lp-lgrid__toc .pc-toc li:last-child{border-bottom:0}
}
.pn-lp-tocfold > summary{list-style:none}
.pn-lp-tocfold > summary::-webkit-details-marker{display:none}
.pn-lp-tocfold__n{font:700 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-lp-tocfold__sum .pc-ico{transition:transform var(--dur-fast)}
.pn-lp-tocfold[open] .pn-lp-tocfold__sum .pc-ico{transform:rotate(180deg)}
@media (min-width:701px){.pn-lp-tocfold > summary{display:none}}
/* the head breaks between words only (pt CONSTRANGEDORA, fr PORTÉES): no letter alone on a line */
.pn-lp-laundry__h{margin:0 0 20px;overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.pn-lp-mast--tail{margin-bottom:40px}
.pn-lp-laundry .pc-prose{color:var(--ink)}
.pn-lp-laundry .pc-prose > :first-child{margin-top:0}
.pn-lp-laundry .pc-prose h2,.pn-lp-laundry .pc-prose h3{margin:30px 0 8px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink)}
.pn-lp-laundry .pc-prose a{color:var(--ink)}
.pn-lp-laundry .pc-prose p.pn-drop::first-letter{float:left;margin:8px 10px 0 0;font:700 60px/1 var(--font-display);color:var(--pink-glyph)}
.pn-laundry__rest > summary{list-style:none}
.pn-laundry__rest > summary::-webkit-details-marker{display:none}
.pn-laundry__rest[open] > summary{display:none}
.pn-lp-more{margin-top:10px}
/* polish r4: "Keep reading" is the kit --sm button as it is (41 px), the same size and type as the report door beside it */
.pn-lp-pbox{margin-top:40px}
.pn-lp-laundry--tail.pn-seotext{padding-top:64px}
/* the report door on one line in the narrow price box (a two-line pill read unfinished): tighter tracking, same type */
.pn-lp-pbox .pc-pbox__foot .pn-lp-pbox__go{display:flex;align-items:center;justify-content:center;min-height:0;padding-block:12px;line-height:1;white-space:nowrap;letter-spacing:.05em;padding-inline:12px}   /* polish r4: the kit --sm height (41), like "Keep reading" */
.pn-lp-pbox__obj{left:50%;top:-78px;width:92px;margin-left:-46px;transform:rotate(-4deg)}
/* owner 05.10. BUYING GUIDE: two columns (VIVIENNE | the guide), the lede, the "Learn about" topic chips, the closing
   line and the ink door under the prose */
.pn-lp-lgrid--guide{grid-template-columns:280px minmax(0,1fr)}
.pn-lp-lgrid--guide .pn-lp-lgrid__side{grid-row:auto}
.pn-lp-laundry__lede{margin:0 0 20px;max-width:640px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.pn-lp-topics{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 28px}
.pn-lp-topics__h{font:600 11px/1.2 var(--font-label);letter-spacing:0;color:var(--ink-2)}
.pn-lp-topics__row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pn-lp-topics__chip{cursor:default;background:var(--surface);color:var(--ink)}
.pn-lp-laundry__close{margin:28px 0 0;max-width:640px;font:600 16px/1.5 var(--font-sans);color:var(--ink)}
.pn-lp-laundry__cta{margin:18px 0 0}

/* ---------- 7c PRICE REPORT (owner 05.10.): anthracite, the copy left, the price box right ---------- */
.pn-lp-report{position:relative;background:var(--lp-grain) 0 0/160px 160px,var(--lp-buy-bg);color:var(--dk-ink);padding:var(--lp-pad) 0}
.pn-lp-report__wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:center}
.pn-lp-report__copy{min-width:0}
.pn-lp-report .pc-kicker{color:var(--pink)}
.pn-lp-report__h{margin:18px 0 20px;color:var(--white)}
.pn-lp-report__p{margin:0;max-width:560px;font-size:18px;line-height:1.5;color:var(--dk-ink-2)}
.pn-lp-report__note{margin:18px 0 0}
.pn-lp-report__cta{margin:26px 0 0}
.pn-lp-report .pn-lp-pbox{margin-top:48px}
.pn-lp-report .pc-pbox{box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}

/* ---------- 8 join (.join + .doors) ---------- */
.pn-lp-join{position:relative;background:var(--bg);color:var(--ink);padding:110px 0 96px;text-align:center}
.pn-lp-join__head{max-width:720px;margin:0 0 28px}
.pn-lp-join__p{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.pn-lp-join__h{margin:10px 0 30px}
.pn-lp-doors{max-width:860px;margin:0 auto;text-align:left}
.pn-lp-doors .pc-door p{margin:0 0 10px;font-size:15px;line-height:1.45;min-height:2.9em}
.pn-lp-doors .pc-door--sell p{color:var(--anthracite);opacity:.82}

/* ---------- /sell (.sp-hero, .worth, .ship, .faq) + /buy intro, one template (money.php) ---------- */
.pn-lpm-hero{background:var(--bg);color:var(--ink);padding:64px 0 0;overflow:hidden}
.pn-lpm-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:30px;align-items:end}
.pn-lpm-hero__copy{padding-bottom:72px;min-width:0}
.pn-lpm-hero__copy .pn-gcrumbs,.pn-lpm-hero__copy .pn-crumbs{margin:0 0 18px}
.pn-lpm-hero__h{margin:18px 0 22px}
.pn-lpm-hero__k{margin:0 0 18px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink)}
.pn-lpm-hero__lede{margin:0 0 28px;max-width:560px;font-size:19px;line-height:1.45;color:var(--ink-2)}
.pn-lpm-art{position:relative;height:560px;margin:0}
.pn-lpm-art .pc-arch{width:400px;height:430px;border-radius:200px 200px 0 0;background:var(--sunken)}
.pn-lpm-art .pc-arch::after{border-radius:186px 186px 0 0}
.pn-lpm-art__fig{position:absolute;left:50%;bottom:-30px;height:560px;width:auto;transform:translateX(-50%)}
.pn-lpm-art__obj{left:10px;bottom:70px;width:150px;transform:rotate(-10deg);z-index:2}
/* T22: the mandatory label sits on the veil (as on the phone hero), fully opaque, so the robe never shows through it. */
.pn-lpm-art__illu{position:absolute;right:0;bottom:12px;z-index:4;padding:3px 6px;border-radius:4px;background:var(--bg-veil);color:var(--ink-2);opacity:1}
.pn-lpm-art--buy .pn-lpm-art__fig{bottom:0;height:460px}
.pn-lpm-art--buy .pn-lpm-art__obj{width:96px;left:auto;right:10px;bottom:40px;transform:rotate(-24deg)}
/* polish r1: the localized money-page titles run 5-6 lines at 92 px (es, fr) and pushed the first CTA under the fold:
   the money h1 is capped (the landing hero keeps 92), the copy column is wider, and the copy starts at the top of the
   hero (crumbs at the same height as on the other guest pages) while the art keeps standing on the hero's floor */
.pn-lpm-hero:not(.pn-lpm-hero--report) .pn-lpm-hero__h.pc-h-xl{font-size:var(--fs-l)}   /* visual audit VG-010: one title scale (was up to 72 px) */
@media (max-width:700px){.pn-lpm-hero:not(.pn-lpm-hero--report) .pn-lpm-hero__h.pc-h-xl{font-size:var(--fs-l)}}
@media (min-width:701px){.pn-lpm-hero__copy{align-self:start}.pn-lpm-art{align-self:end}}
@media (min-width:1101px){
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr) 440px}
  /* the Drawer Report's copy is short (title + one line): a lower art so no empty band opens under the copy */
  .pn-lpm-art--report{height:480px}
  .pn-lpm-art--report .pn-lpm-art__fig{height:480px}
  .pn-lpm-art--report .pc-arch{width:360px;height:380px;border-radius:180px 180px 0 0}
  .pn-lpm-art--report .pc-arch::after{border-radius:166px 166px 0 0}
}
.pn-lpm-worth{background:var(--dk-bg);color:var(--dk-ink);padding:88px 0 0;overflow:hidden;scroll-margin-top:var(--sticky-top)}
.pn-lpm-worth__wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:end}
.pn-lpm-worth__copy{min-width:0;padding-bottom:40px}
.pn-lpm-worth .pc-kicker{color:var(--pink)}
.pn-lpm-worth__h{margin:16px 0 18px;color:var(--white)}
.pn-lpm-worth__copy > p{margin:0 0 12px;max-width:580px;font-size:17px;color:var(--dk-ink-2)}
.pn-lpm-worth__links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px}   /* AD1 03.10.: tier-3 links (ui_more dk) */
.pn-lpm-worth .pc-hand{margin:0;font-size:24px}
.pn-lpm-worth__art{position:relative;height:470px}
.pn-lpm-worth__art img{position:absolute;right:10px;bottom:-4px;height:460px;width:auto;filter:var(--rim-pink)}
.pn-lpm-worth__art .pc-illu{position:absolute;right:0;top:0;color:var(--dk-ink)}
/* UX 17.10. #39: the price tags of lib/landing.php pnew_lp_tags (cream / anthracite in both themes) */
.pn-ptags{display:block;width:100%;height:auto;overflow:visible}
.pn-ptags__tag{fill:var(--cream);stroke:var(--anthracite);stroke-width:1.5}
.pn-ptags__tag.is-pink{fill:var(--pink)}
.pn-ptags__dash{fill:none;stroke:var(--dash);stroke-width:1.2;stroke-dasharray:3 3}
.pn-ptags__ring{fill:none;stroke:var(--pink);stroke-width:3}
.pn-ptags__tag.is-pink + .pn-ptags__dash + .pn-ptags__ring{stroke:var(--cream)}
.pn-ptags__str{fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round}
.pn-ptags__nail{fill:var(--anthracite);stroke:var(--pink);stroke-width:2}
.pn-ptags__p{font-family:var(--font-display);font-weight:700;fill:var(--anthracite);font-variant-numeric:tabular-nums}
.pn-ptags__s{font:700 9px/1 var(--font-sans);fill:var(--anthracite)}
.pn-lpm-worth__art--tags{display:flex;align-items:center;justify-content:center;height:auto;min-height:0;padding:20px 0}
.pn-lpm-worth__art--tags .pn-ptags{max-width:300px}
.pn-lpm-art--tags{display:flex;align-items:flex-end;justify-content:center}
.pn-lpm-art--tags .pn-ptags{position:relative;z-index:1;max-width:380px;margin-bottom:40px}
.pn-lpm-ship{background:var(--bg);color:var(--ink);padding:88px 0;overflow:hidden}
.pn-lpm-ship .pc-steps-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pn-lpm-ship .pc-steps-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pn-lpm-ship__h{margin:0 0 30px}
.pn-lpm-ship .pc-steps-grid{margin-top:58px}
.pn-lpm-ship .pc-care{padding-right:96px}
.pn-lpm-ship .pc-obj{top:-44px;right:-14px;width:100px}
.pn-lpm-ship .pn-lpm-ship__env{transform:rotate(8deg)}
.pn-lpm-ship .pn-lpm-ship__stack{width:92px}
/* the guide body (the SEO sections: every question answered first) on the Laundry Room grid */
.pn-lpm-guide{background:var(--surface);color:var(--ink);padding:72px 0 88px;border-top:1px solid var(--line)}
.pn-lpm-guide__grid{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:48px}
.pn-lpm-guide__grid > *{min-width:0}
.pn-lpm-guide .pc-toc{margin-top:0;align-self:start}
.pn-lpm-guide :is(.pc-toc,.pc-pbox,.pc-faq details){background:var(--sunken)}   /* no borders 18.10.: the section is the panel tone, so its boxes are wells (they had only a line to stand out) */
.pn-lpm-guide .pc-toc a{color:var(--ink)}
.pn-lpm-guide .pc-box .pc-btn{margin-top:18px}
.pn-lpm-guide .pc-box h3{margin-bottom:12px}
.pn-lpm-guide .pc-box > p{margin:0;font-size:14px}
.pn-lpm-rail{display:grid;gap:18px;align-content:start}
.pn-lpm-rail .pc-pbox ul{list-style:none;margin:10px 0 0;padding:0}
.pn-lpm-rail .pc-pbox li{border-bottom:0}
.pn-lpm-rail .pc-pbox li a{display:flex;justify-content:space-between;gap:10px;margin:0 -10px;padding:12px 10px;border-radius:var(--r-icon);font:700 14px/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
.pn-lpm-rail .pc-pbox li a:hover{background:var(--t-tint)}
.pn-lpm-rail .pc-pbox li a:hover > span:first-child{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}   /* owner 27.10. "hover ist kaputt": the tint keeps its 10 px inset, only the words underline, never the arrow */
.pn-lpm-faq{background:var(--bg);color:var(--ink);padding:72px 0;border-top:1px solid var(--line)}
.pn-lpm-faq__h{margin:0 0 10px}
.pn-lpm-faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px}
.pn-lpm-faq summary::-webkit-details-marker{display:none}
.pn-lpm-faq summary::after{content:"+";flex:none;font-family:var(--font-sans);font-weight:700}
.pn-lpm-faq details[open] summary::after{content:"−"}
.pn-lpm-faq summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}

/* ---------- 404 = the .empty card with ROXY R2 (the one woman on an empty state: cast-and-props §2) ---------- */
.pn-lp-404{max-width:720px;margin:0 auto}
.pn-lp-404__art{position:relative;width:220px;height:250px;margin:0 0 6px;overflow:hidden;border-radius:0 0 18px 18px}
.pn-lp-404__art .pc-arch{width:200px;height:200px;border-radius:100px 100px 0 0}
.pn-lp-404__art .pc-arch::after{inset:10px 10px 0;border-radius:90px 90px 0 0}
.pn-lp-404__roxy{position:absolute;left:0;top:0;width:220px;height:auto}
.pn-lp-404__illu{margin:0 0 18px;color:var(--ink)}
.pn-lp-404 h1{font-size:var(--fs-h1)}   /* the page h1 = the h-m role (44 / 32) */
.pn-nf__links{margin-top:26px}   /* polish 02.10.: the guest 404's other ways on, the members-only row under the card */
/* ---------- kept: the arrow nudge used by the wizard and the paysite buttons ---------- */


/* ================= 701-1100: the desktop parts, the art columns get less room ================= */
@media (min-width:701px){.pn-lp-pairs{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-pairs{gap:12px}
  .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr) 400px}
  .pn-lp-hero__art{height:480px}
  .pn-lp-hero__art .pc-arch{width:380px;height:330px;border-radius:190px 190px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:176px 176px 0 0}
  .pn-lp-b1{width:470px}
  .pn-lp-hero__stamp{top:60px}
  .pn-lp-hero__sticker{left:auto;right:0;top:20px}
  .pn-lp-buy__tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .pn-lp-buy__top{grid-template-columns:minmax(0,1fr) 340px}
  .pn-lp-buy__jess{height:480px;bottom:-100px}
  .pn-lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:60px}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px}
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr) 240px}
  .pn-lp-sell__sticker{left:auto;right:0}
  .pn-lp-sell__mara{right:0;height:520px}
  .pn-lp-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-lp-calc{grid-column:1 / -1}
  .pn-lp-lgrid,.pn-lpm-guide__grid{grid-template-columns:240px minmax(0,1fr)}
  .pn-lp-lgrid__facts,.pn-lpm-rail{grid-column:2}
  .pn-lp-lgrid__side{grid-row:1 / span 3}
  .pn-lp-lgrid__facts{grid-row:2}
  .pn-lp-lgrid__toc{grid-column:2;grid-row:3}
  .pn-lp-lgrid__toc .pc-toc ol{grid-template-columns:minmax(0,1fr)}
  .pn-lp-lgrid__toc .pc-toc li:nth-last-child(-n+2):nth-child(odd){border-bottom:1px dashed var(--line)}
  /* with the price box in column 2, the index card fills the hole under VIVIENNE instead of a third row (no empty left column) */
  .pn-lp-lgrid:has(.pn-lp-lgrid__facts):has(.pn-lp-lgrid__toc) .pn-lp-lgrid__side{grid-row:1}
  .pn-lp-lgrid:has(.pn-lp-lgrid__facts) .pn-lp-lgrid__toc{grid-column:1;grid-row:2;align-self:start}
  .pn-lp-lgrid:has(.pn-lp-lgrid__facts) .pn-lp-lgrid__toc .pc-toc{padding:20px 18px 8px}
  .pn-lp-laundry__h{font-size:clamp(34px,4.9vw,48px)}   /* polish 02.10.: the column is 300 px at 701: pt "constrangedora" at 48 ran 84 px out of it (page scrolled sideways) */
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr) 360px}
  .pn-lpm-art{height:480px}
  .pn-lpm-art .pc-arch{width:320px;height:360px;border-radius:160px 160px 0 0}
  .pn-lpm-art .pc-arch::after{border-radius:146px 146px 0 0}
  .pn-lpm-art__fig{height:480px}
  .pn-lpm-worth__wrap{grid-template-columns:minmax(0,1fr) 300px}
  .pn-lpm-worth__art img{height:400px}
  .pn-lpm-ship .pc-steps-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:60px}
}

/* ================= PHONE (mockup @container page (max-width:700px)) ================= */
@media (max-width:700px){
  body:has(.pn-lb) .pn-main,body:has(.pn-lpm) .pn-main{padding-bottom:var(--dock)}
  .pn-lpm-hero .pc-arr{display:none}   /* a wrapping label stays centred: the arrow goes on phones */
  .pn-lp-hero{padding-top:26px}
  .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lp-hero__copy{padding-bottom:10px}
  .pn-lp-hero__sub{font-size:16px;margin-bottom:22px}
  .pn-lp-hero__art{height:420px;margin:0 -16px}
  .pn-lp-hero__art .pc-arch{width:270px;height:300px;border-radius:135px 135px 0 0}
  .pn-lp-hero__art .pc-arch::after{inset:10px 10px 0;border-radius:125px 125px 0 0}
  .pn-lp-b1{width:240px}
  .pc-ptag.pn-lp-b1__tag{left:35.8%;top:69%;--r:12deg;font-size:6cqw}
  .pn-lp-b1__tag small{font-size:2cqw}
  .pn-lp-b1--r5 .pc-ptag.pn-lp-b1__tag{display:none}   /* r5 at 240 px: the tag is 15 px wide, no type fits */
  .pn-lp-hero__stamp{left:12px;top:40px;padding:6px 8px;border-width:2px;font-size:15px}
  .pn-lp-hero__sticker{left:auto;right:12px;top:14px;padding:8px 10px;font-size:10px}
  .pn-lp-hero__illu{right:16px;bottom:8px}
  .pn-lp-cta{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .pn-lp-hero .pn-lp-ctas > .pc-btn{flex:1 1 auto}   /* two doors share the row; a wrapped door fills it (fr, es): no ragged pair of pills */
  .pn-lp-real .pc-sechead > .pn-lp-door--top{display:none}
  .pn-lp-door--end{display:flex;margin-top:18px}
  .pn-lp-browse{display:block;margin-top:24px}
  .pn-lp-browse__h{display:block;margin-bottom:10px}
  .pn-lp-browse__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:calc(-1 * var(--gutter));padding:5px var(--gutter);scroll-padding-inline:var(--gutter);margin-block:-5px;-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 24px),transparent)}
  .pn-lp-browse__row::-webkit-scrollbar{display:none}
  .pn-lp-browse__row > li{flex:none;scroll-snap-align:start}
  .pn-lp-proof__copy{padding-top:0}
  .pn-lp-proof__p{font-size:16px}
  .pn-lp-lgrid__side{order:-2;grid-row:auto}
  .pn-lp-lgrid__toc{order:-1;grid-column:auto;grid-row:auto}
  .pn-lp-tocfold{margin:0 0 20px}
  .pn-lp-tocfold .pc-toc{margin-top:12px;padding-top:0;border-top:0}
  .pn-lp-tocfold .pc-toc > b{display:none}
  .pn-lp-tocfold__sum{gap:8px}
  .pn-lp-real{padding:48px 0 44px}
  .pn-lp-real--next{padding-top:0}
  .pn-lp-pairs:not(.pn-lp-pairs--4) > :nth-child(n+5){display:none}
  .pn-lp-sellrail{gap:14px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .pn-lp-buy{padding:64px 0 60px}
  .pn-lp-buy__top{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lp-buy__lede{font-size:16px}
  .pn-lp-buy .pc-tile{min-width:0;flex:1 1 140px;padding:16px}
  .pn-lp-buy__art{height:300px;margin:26px -16px 0}
  .pn-lp-buy__jess{height:340px;right:-6px;bottom:-60px}   /* her arm stays inside the screen */
  .pn-lp-buy__label{left:16px;bottom:24px;width:160px;padding:13px}
  .pn-lp-buy__label .pc-carelabel__v{font-size:22px}
  .pn-lp-buy__illu{right:16px;bottom:8px}
  .pn-lp-how__note{font-size:21px;margin-bottom:14px}
  .pn-lp-steps{grid-template-columns:minmax(0,1fr);gap:8px}
  .pn-lp-step__obj{width:80px;top:-24px;right:-4px}
  .pn-lp-step__obj--env{width:84px;top:-18px}
  .pn-lp-proof{padding:60px 0}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .pn-lp-receipt{padding:18px 18px 22px;margin-right:12px}
  /* T46: on phones the lipstick lies on the top-right corner (overlapping it by ~20 px, cast-and-props §2), clear of the footnote */
  .pn-lp-receipt__obj{width:84px;right:-14px;top:-56px;bottom:auto}
  .pn-lp-sell{padding:64px 0 60px}
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr) 130px;grid-template-areas:"head head" "lede art" "proof proof";grid-template-rows:auto auto auto;column-gap:8px;align-items:start}
  .pn-lp-sell__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}   /* kicker + sticker share a row; a long kicker (es, it) pushes the sticker under it, never under the sticker */
  .pn-lp-sell__head > .pn-lp-sell__h{flex:0 0 100%;margin-top:10px}
  .pn-lp-sell__sticker{position:static;margin-left:auto;font-size:10px}
  .pn-lp-sell__lede{font-size:15.5px}
  .pn-lp-sell__art{height:260px;margin-right:-16px;overflow:hidden}
  .pn-lp-sell__mara{height:340px;right:-30px;bottom:auto;top:0}
  .pn-lp-sell__illu{right:8px;top:8px;bottom:auto;max-width:none;text-align:center;font-size:10px}   /* two clean lines, no dangling dot; top: the art fades out at the bottom (T25) */
  .pn-lp-sell__illu .pc-illu__a,.pn-lp-sell__illu .pc-illu__b{display:block}
  .pn-lp-sell__illu .pc-illu__sep{display:none}
  .pn-lp-notes{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:28px}
  /* T25: Mara's knee crop never stands free: the live chip moves into the lede column (no dead pink band), the figure
     column runs the full height of the top grid, and the first taped note overlaps the bottom of the figure (as the
     next row does on desktop). The figure is always taller than its clip, so no cut edge shows. */
  .pn-lp-sell__top{grid-template-areas:"head head" "lede art" "proof art";grid-template-rows:auto auto 1fr}
  .pn-lp-sell__art{z-index:1;align-self:stretch;height:auto;min-height:260px;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 44px),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 44px),transparent)}
  .pn-lp-sell__mara{height:max(340px,calc(100% + 60px))}
  .pn-lp-sell__proof{align-self:start;margin:4px 0 56px}
  .pn-lp-sell__proof .pc-chip{white-space:normal;text-align:left;line-height:1.25}
  .pn-lp-sell .pn-lp-notes{position:relative;z-index:2;margin-top:-48px}
  .pn-lp-paid .pn-lp-paid__big{font-size:34px}
  .pn-lp-boxes{grid-template-columns:minmax(0,1fr);gap:16px}
  .pn-lp-laundry.pn-seotext{padding-bottom:64px}
  .pn-lp-mast{padding:14px 0 0}
  .pn-lp-mast__meta{display:none}
  .pn-lp-lgrid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:24px}
  .pn-lp-host{display:none}
  .pn-lp-laundry--tail .pn-lp-lgrid__side{display:none}
  .pn-lp-laundry--tail.pn-seotext{padding-top:40px}
  .pn-lp-mast--tail{margin-bottom:24px}
  .pn-lp-pbox{margin-top:96px}   /* the pegged pair hangs clear of the "Keep reading" button */
  .pn-lp-join{padding:80px 0 64px}
  .pn-lp-doors{grid-template-columns:minmax(0,1fr)}
  .pn-lp-doors .pc-door h3{font-size:22px}
  .pn-lpm-hero{padding-top:30px}
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr)}
  .pn-lpm-hero__lede{font-size:16px}
  .pn-lpm-hero__copy{padding-bottom:0}
  .pn-lpm-art{height:380px;margin:10px -16px 0}
  .pn-lpm-art .pc-arch{width:250px;height:280px;border-radius:125px 125px 0 0}
  .pn-lpm-art .pc-arch::after{border-radius:115px 115px 0 0}
  .pn-lpm-art__fig{height:380px;bottom:-22px}
  .pn-lpm-art--buy .pn-lpm-art__fig{height:300px;bottom:0}
  .pn-lpm-art__obj{width:96px;left:18px;bottom:40px}
  .pn-lpm-art--buy .pn-lpm-art__obj{width:72px;left:auto;right:18px}
  .pn-lpm-art__illu{right:16px}
  .pn-lpm-worth{padding-top:60px}
  .pn-lpm-worth__wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lpm-worth__copy{padding-bottom:0}
  .pn-lpm-worth .pc-strip{height:110px;margin:30px 0 12px}
  .pn-lpm-worth .pc-strip__tg{font-size:17px}
  .pn-lpm-worth .pc-strip__tg.is-med{font-size:21px}
  .pn-lpm-worth__art{height:300px;margin:0 -16px}
  .pn-lpm-worth__art img{height:300px;right:0}
  .pn-lpm-worth__art--tags{height:auto;margin:0;padding:28px 0 0}
  .pn-lpm-worth__art--tags .pn-ptags{max-width:230px}
  .pn-lpm-art--tags{height:300px}
  .pn-lpm-art--tags .pn-ptags{max-width:300px;margin-bottom:24px}
  .pn-lpm-worth__art .pc-illu{right:16px;top:auto;bottom:8px;left:16px}
  .pn-lpm-ship{padding:60px 0}
  .pn-lpm-ship .pc-steps-grid{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:40px}
  .pn-lpm-ship .pc-care{padding-right:78px}
  .pn-lpm-ship .pc-obj{width:76px;top:-18px;right:-6px}
  .pn-lpm-guide{padding:48px 0 60px}
  .pn-lpm-guide__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pn-lpm-faq{padding:48px 0}
  .pn-lpm-faq .pc-faq summary{font-size:21px}
}
/* the live chips size to their content (dot + number + words), so they start left: nothing to centre */
.pn-lb .pc-chip--live,.pn-lpm .pc-chip--live{justify-content:flex-start}
.pn-lpm-faq summary .pn-lpm-faq__q{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
.pn-lpm-faq p{max-width:720px}
/* the rail CTA box (a .box--dk in a 300 column): its buttons take a second line instead of clipping */
.pn-lpm-ctabox{display:grid;gap:14px}
.pn-lpm-ctabox h3{margin:0}
.pn-lpm-ctabox > p{margin:0;font-size:14px}
.pn-lpm-ctabox__btns{display:grid;gap:14px}
.pn-lpm-ctabox .pc-btn{white-space:normal;text-align:center;line-height:1.15;text-wrap:balance}

/* ================= dark: the hero stamp keeps pink ink on a dark plate (it sits on the pink arch from 1101 px); no seams (audit 30.09. Top 2: the surfaces
   are staggered by their own gradients, --lp-*-bg in tokens.css, so no hairline has to separate them) ================= */
[data-theme="dark"] .pn-lp-hero__stamp{background:var(--bg);border-color:var(--pink);color:var(--pink)}
[data-theme="dark"] .pn-lp-hero__stamp .pc-tub{border-color:var(--pink);color:var(--pink)}
[data-theme="dark"] .pn-lp-receipt__name{color:var(--anthracite)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pn-lp-hero__stamp{background:var(--bg);border-color:var(--pink);color:var(--pink)}
  :root:not([data-theme="light"]) .pn-lp-hero__stamp .pc-tub{border-color:var(--pink);color:var(--pink)}
}

/* ================= GLAM PASS + AUDIT 30.09. (owner: "sanfte Verläufe in den Flächen, mehr Glam, weniger KI-Slop";
   docs/landing-audit-30-09.md; notes in docs/landing-glam-notes.md) =================
   Every surface is a layered token (tokens.css --lp-*, light + dark) over a 160 px grain tile; the dark and the pink
   block rise with a flat arch (the brand's arch motif) instead of a hard cut; no hairline between sections. One prop
   per section at most, no stickers, no tilted paper, one rhythm (--lp-pad). Cast labels stand under the art, never on
   a figure. Motion: a sheen on the big pink / ink buttons and the doors, a gentle rise of each section's content once
   in view (landing.js .is-armed / .is-in); reduced motion: nothing moves. */

.pn-lb{--lp-pad:clamp(56px,6vw,80px)}
body:has(.pn-lb) .pc-logo__dot{animation:none}   /* audit: the dot does not wink on the landing */
body:has(.pn-lb) .pn-gfooter{background:var(--lp-footer-bg)}

/* ---- type: tighter display tracking, balanced ledes, and a display word never breaks inside itself ---- */
.pn-lb :is(.pc-h-xl,.pc-h-l,.pc-h-m){font-kerning:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}
.pn-lb :is(.pn-lp-hero__sub,.pn-lp-buy__lede,.pn-lp-sell__lede,.pn-lp-proof__p){text-wrap:pretty}
.pn-lb .pc-strike::after{left:0;right:0}   /* pt "VELHAS": the pen line stays inside the column */
.pn-lb .pc-sechead .pc-real{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
:is(.pn-lp-buy,.pn-lp-sell) .pc-kicker::after{content:"";flex:none;width:44px;height:1px;margin-left:6px;background:currentColor;opacity:.55}

/* ---- the cast labels (audit Top 5): under the art box, right, one line, 11 px, quiet; never on a figure ---- */
.pn-lp-hero__illu,.pn-lp-buy__illu,.pn-lp-sell__illu{top:auto;left:auto;right:0;bottom:0;padding:0;border-radius:0;background:none;font-size:11px;opacity:1;white-space:nowrap;color:var(--ink-2)}   /* AA at 11 px in both themes */
.pn-lp-buy__illu{color:var(--dk-ink-2)}
.pn-lp-sell__illu{color:var(--anthracite)}   /* >= 5.5:1 on both pinks */

/* ---- 1 hero: blush light on duck egg, the satin arch with its glow, the satin tape over the whole second sentence ---- */
.pn-lp-hero{position:relative;background:var(--lp-grain) 0 0/160px 160px,var(--lp-hero-bg)}
.pn-lp-hero__art{--foot:28px}
.pn-lp-hero__art .pc-arch{bottom:var(--foot);background:var(--lp-arch);box-shadow:var(--lp-arch-glow)}
.pn-lp-hero__art .pc-arch{-webkit-mask-image:linear-gradient(var(--ink) 84%,transparent);mask-image:linear-gradient(var(--ink) 84%,transparent)}
.pn-lp-b1 picture{-webkit-mask-image:linear-gradient(var(--ink) 95%,transparent);mask-image:linear-gradient(var(--ink) 95%,transparent)}   /* owner 05.10.: the figure stays solid, only its last edge melts into the ground */
.pn-lp-b1{bottom:var(--foot)}
.pn-lp-hero__illu{bottom:6px}
.pn-lp-hero .pc-hl{background:var(--lp-tape)}
.pn-lp-hero__chip.pc-chip--live,.pn-lp-hero__chip--trust{background:var(--lp-chip-bg);color:var(--lp-chip-ink);border-color:var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pn-lp-hero__sub{max-width:30em}
.pn-lp-hero__count{font-size:14px}
.pn-lp-b1__tag small{font-size:max(10px,1.05cqw);opacity:1}   /* audit: "worn" was 7.5 px; full ink for AA (polish r3) */
@media (min-width:1101px){.pn-lp-hero__stamp{top:180px}}   /* at the arch's edge, not in the air */

/* ---- 2 + 3 real pairs / sellers: one soft glow, no line; the sellers share the pairs' five-column grid ---- */
.pn-lp-real{position:relative;border-top:0;padding:var(--lp-pad) 0 calc(var(--lp-pad) - 16px);background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg)}
.pn-lp-real--next{padding-top:0;background:var(--lp-grain) 0 0/160px 160px,var(--lp-real2-bg)}
@media (min-width:1101px){
  .pn-lp-sellrail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;justify-content:stretch}
  .pn-lp-sellrail > .pc-scard{width:auto}
  .pn-lp-sellrail:not(.pn-lp-sellgrid) > :nth-child(n+6){display:none}
}
@media (min-width:701px){.pn-lp-real .pc-sechead{flex-wrap:nowrap;align-items:flex-end}.pn-lp-real .pc-sechead > .pc-btn{flex:none}}
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-pairs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-lp-pairs > :nth-child(n+9){display:none}
}

/* ---- 4 buyer block: deep anthracite with a cyan and a pink glow, rising with a flat arch ---- */
.pn-lp-buy{z-index:1;margin-top:calc(-1 * var(--lp-dome-h));padding:calc(var(--lp-pad) + var(--lp-dome-h)) 0 var(--lp-pad);background:var(--lp-grain) 0 0/160px 160px,var(--lp-buy-bg);border-top-left-radius:50% var(--lp-dome-h);border-top-right-radius:50% var(--lp-dome-h)}
.pn-lp-hero + .pn-lp-buy{margin-top:0;padding-top:var(--lp-pad);border-radius:0}
.pn-lp-buy .pc-fix{margin-right:.18em}   /* "smell" never touches "HER" */
.pn-lp-buy__art{margin-bottom:26px}
.pn-lp-buy__jess{bottom:0;height:540px;-webkit-mask-image:linear-gradient(var(--ink) 93%,transparent);mask-image:linear-gradient(var(--ink) 93%,transparent)}
.pn-lp-buy__illu{bottom:-24px}
/* polish r1: two columns (>= 960): the copy starts at the top next to Jess instead of sitting on the art's baseline
   (that left ~290 px of empty arch above the kicker); the kicker lands ~120 px under the arch crest */
@media (min-width:960px){
  .pn-lp-buy__top{align-items:start}
  .pn-lp-buy{padding-top:calc(var(--lp-pad) + var(--lp-dome-h) - 40px)}
  .pn-lp-hero + .pn-lp-buy{padding-top:var(--lp-pad)}
}
/* the two numbers read as an editorial pair of figures, not as KPI tiles */
.pn-lp-buy .pn-lp-buy__tiles{gap:0}
.pn-lp-buy .pc-tile{min-width:0;margin:0 30px 0 0;padding:2px 30px 2px 0;border:0;border-right:1px solid var(--lp-buy-line);border-radius:0;background:transparent}
.pn-lp-buy .pc-tile:last-child{margin-right:0;padding-right:0;border-right:0}
.pn-lp-buy .pc-tile b{font-size:56px;background:var(--lp-tape);-webkit-background-clip:text;background-clip:text;color:transparent}
.pn-lp-buy .pc-tile p{margin-top:8px;font-size:15px;color:var(--dk-ink)}
/* the four steps: plain cream labels, one soft shadow, no dashed inner line, no props */
.pn-lp-how{margin-top:64px}
.pn-lp-steps{align-items:stretch}
.pn-lp-step{box-shadow:var(--lp-step-sh)}
.pn-lp-step::before{content:none}
@media (min-width:1101px){.pn-lp-step:nth-child(2){padding-right:20px}}
.pn-lp-cta{align-items:center}
.pn-lp-cta__stack > p:first-child,.pn-lp-cta__have,.pn-lp-cta__have .pc-more,.pn-lp-cta__links .pc-more{font-size:14px}

/* ---- 5 receipt: blush light; the receipt lies straight (−0.4°), quotes in the sans, only its head in mono ---- */
.pn-lp-proof{position:relative;z-index:2;overflow:clip visible;padding:var(--lp-pad) 0;background:var(--lp-grain) 0 0/160px 160px,var(--lp-proof-bg)}
.pn-lp-receipt{transform:rotate(-.4deg);font:400 15px/1.5 var(--font-sans)}
.pn-lp-receipt .pc-receipt__top small{font:500 12px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.02em}
.pn-lp-receipt q{font-size:15px}
.pn-lp-receipt li small{font-size:12px}
@media (min-width:1101px){.pn-lp-proof__wrap{align-items:center}.pn-lp-proof__copy{padding-top:0}}
/* the marker: the same pink stripe under the words in light and dark (dark: a softer pink so light type stays legible) */
.pn-lp-proof__h em,[data-theme="dark"] .pn-lp-proof__h em{background:linear-gradient(transparent 60%,var(--lp-marker) 60% 90%,transparent 90%);color:inherit}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lp-proof__h em{background:linear-gradient(transparent 60%,var(--lp-marker) 60% 90%,transparent 90%);color:inherit}}

/* ---- 6 seller block: satin pink with a sheen, rising with the same flat arch; one prop, straight notes ---- */
.pn-lp-sell{z-index:3;margin-top:calc(-1 * var(--lp-dome-h));padding:calc(var(--lp-pad) + var(--lp-dome-h)) 0 var(--lp-pad);background:var(--lp-grain) 0 0/160px 160px,var(--lp-sell-bg);border-top-left-radius:50% var(--lp-dome-h);border-top-right-radius:50% var(--lp-dome-h)}
.pn-lp-hero + .pn-lp-sell{margin-top:0;padding-top:var(--lp-pad);border-radius:0}
.pn-lp-sell__top{align-items:start;grid-template-rows:auto auto 1fr}
.pn-lp-sell__head{padding-top:12px}
.pn-lp-sell__art{height:470px;margin-bottom:26px}
.pn-lp-sell__mara{bottom:0;height:500px;-webkit-mask-image:linear-gradient(var(--ink) 93%,transparent);mask-image:linear-gradient(var(--ink) 93%,transparent)}
.pn-lp-sell__illu{bottom:-22px}
.pn-lp-sell .pc-fix{margin-right:.22em}
.pn-lp-notes{margin-top:48px}
.pn-lp-notes > .pc-note:nth-child(n){transform:none}
.pn-lp-notes > .pc-note:nth-child(n) .pc-mt{background:var(--mt-light);transform:none}
.pn-lp-sell .pc-box--dk{border-color:transparent;background:var(--lp-box-dk);box-shadow:var(--lp-inner-hi-dk),var(--lp-card-lift)}
.pn-lp-sell .pc-box--cr{border-color:transparent;background:var(--lp-box-cr);box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
.pn-lp-sell .pc-priv small{font-size:14px;color:var(--dk-ink-2)}
.pn-lp-paid > p:last-child{margin-top:12px;padding-top:0}
.pn-lp-calc__stack{top:14px;right:14px;bottom:auto;width:96px}
.pn-lp-calc .pc-box__h{padding-right:100px}
@media (min-width:701px){.pn-lp-calc > small:last-child{padding-right:0}}
.pn-lp-calc .pn-lp-box__p{padding-right:100px}   /* art-director pass 13.10.: the stack's lower edge lay over the first line of the lede; the lede keeps clear of it like the head */

/* ---- 7 the Laundry Room: warm paper, a lace hem under the pink block (scallops + eyelets) ---- */
.pn-lp-laundry.pn-seotext{position:relative;z-index:4;border-top:0;padding-bottom:var(--lp-pad);background:var(--lp-grain) 0 0/160px 160px,var(--lp-laundry-bg)}
.pn-lp-sell + .pn-lp-laundry.pn-seotext{background:radial-gradient(circle,var(--pink) 1.6px,transparent 2.3px) 0 3px/calc(2 * var(--lp-lace-r)) 8px repeat-x,var(--lp-grain) 0 0/160px 160px,var(--lp-laundry-bg)}
.pn-lp-sell + .pn-lp-laundry::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--lp-lace-r));height:var(--lp-lace-r);pointer-events:none;
  background:radial-gradient(circle at 50% 100%,var(--lp-lace) calc(var(--lp-lace-r) - .5px),transparent var(--lp-lace-r)) 0 0/calc(2 * var(--lp-lace-r)) var(--lp-lace-r) repeat-x}
.pn-lp-sell + .pn-lp-laundry .pn-lp-mast{padding-top:24px}
/* HYBRID / REDAKTION: the Laundry Room follows the hero; the hero's ground melts into the paper (no straight seam) */
.pn-lp-hero + .pn-lp-laundry.pn-seotext{background:linear-gradient(180deg,var(--lp-hero-end) 0,transparent 200px),var(--lp-grain) 0 0/160px 160px,var(--lp-laundry-bg)}
.pn-lp-host::before{background:var(--lp-host-arch);box-shadow:inset 0 0 0 1px var(--lp-host-rim)}
.pn-lp-host__img{filter:var(--lp-cut-rim)}
.pn-lp-host__illu{color:var(--ink-2);opacity:1}
@media (min-width:1101px){.pn-lp-lgrid__side{position:sticky;top:96px;align-self:start}}
.pn-lp-laundry .pc-pbox,.pn-lp-lgrid__toc .pc-toc{box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
.pn-lp-laundry .pc-pbox__row.is-med b,.pn-lp-laundry .pc-toc li::before,.pn-lp-laundry .pc-toc li > a::before{color:var(--lp-num-ink)}
.pn-lp-pbox__obj{filter:var(--lp-cut-rim)}
.pn-lp-lgrid__side .pn-draftband{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:5px 10px;border-radius:var(--radius-full);font-size:12px;line-height:1.2}
.pn-lp-lgrid__side .pn-draftband .pc-ico{width:14px;height:14px}

/* a section a dome rises over keeps its content clear of the arch */
.pn-lb > section:has(+ :is(.pn-lp-buy,.pn-lp-sell)){padding-bottom:calc(var(--lp-pad) + var(--lp-dome-h))}

/* ---- 7b "Read up first": an editorial index — the head left, three numbered rows right; the whole row is the link,
   a 40 px arrow pill at its end; no props ---- */
.pn-lp-guides{position:relative;color:var(--ink);padding:var(--lp-pad) 0;background:var(--lp-grain) 0 0/160px 160px,var(--lp-guides-bg)}
.pn-lp-laundry + .pn-lp-guides{padding-top:calc(var(--lp-pad) / 2)}
.pn-lp-guides + .pn-lp-join{padding-top:calc(var(--lp-pad) / 2)}
.pn-lp-guides:has(+ .pn-lp-join){padding-bottom:calc(var(--lp-pad) / 2)}
.pn-lp-guides__wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.pn-lp-guides__head .pc-h-m{margin:0}
.pn-lp-guides__p{margin:14px 0 0;max-width:36em;font-size:16px;line-height:1.5;color:var(--ink-2)}   /* owner 05.10.: the lede under the head */
.pn-lp-mgrid{list-style:none;margin:0;padding:0;counter-reset:lpg}
.pn-lp-mcard{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:20px;min-height:0;padding:24px 4px;border-bottom:1px solid var(--line);color:var(--ink);counter-increment:lpg;
  background:var(--lp-row-hover) 0 0/0% 100% no-repeat;transition:background-size var(--dur-slow) var(--ease-out)}
.pn-lp-mcard:first-child{border-top:1px solid var(--line)}
.pn-lp-mcard::before{content:counter(lpg,decimal-leading-zero);font:800 13px/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--lp-num-ink)}
.pn-lp-mcard__body{min-width:0}
.pn-lp-mcard__h{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head)}
.pn-lp-mcard__p{margin:8px 0 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* owner 05.10.: each row's tier-3 link ("Read the buying guide →") is the row's one link; its ::after covers the row */
.pn-lp-mcard__more{display:inline-block;margin-top:14px}
.pn-lp-mcard__more::after{content:"";position:absolute;inset:0;z-index:2}
.pn-lp-mcard__more:focus-visible{outline:none}
.pn-lp-mcard:has(.pn-lp-mcard__more:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-lp-mcard:hover{background-size:100% 100%}
.pn-lp-mcard:hover .pn-lp-mcard__more{text-decoration-color:currentColor}
.pn-lp-mcard:hover .pn-lp-mcard__more .pc-arr{transform:translateX(3px)}
@media (min-width:1101px){
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .pn-lp-mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
  .pn-lp-mgrid--2,.pn-lp-mgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-lp-mcard{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;row-gap:14px;padding:22px 4px 26px;border-top:1px solid var(--line);border-bottom:0}
  .pn-lp-mcard::before{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.pn-lp-mcard{transition:none}.pn-lp-mcard:hover .pn-lp-mcard__more .pc-arr{transform:none}}

/* ---- 8 join: left on the column, the tag beside the head, two doors across the full width ---- */
.pn-lp-join{padding:var(--lp-pad) 0 calc(var(--lp-pad) + 8px);text-align:left;background:var(--lp-grain) 0 0/160px 160px,var(--lp-join-bg)}
.pn-lp-join .pc-wrap{display:block}   /* owner 05.10.: the head and its lede, then the two doors across the full width (no tag) */
.pn-lp-join__h{margin:0}
.pn-lp-doors{max-width:none;margin:0;gap:16px}
.pn-lp-doors .pc-door{position:relative;isolation:isolate;border-color:transparent;gap:10px;box-shadow:var(--lp-inner-hi-dk),var(--lp-card-lift);transition:transform var(--dur-slow) var(--ease-out)}
.pn-lp-doors .pc-door p{min-height:0;margin:0}
.pn-lp-doors .pc-door .pc-btn{margin-top:20px}
.pn-lp-doors .pc-door--buy{background:var(--lp-door-buy)}
.pn-lp-doors .pc-door--sell{background:var(--lp-door-sell);box-shadow:var(--lp-inner-hi),var(--lp-card-lift)}
.pn-lp-doors .pc-door:hover{transform:translateY(-3px)}

/* ---- the sheen: pink / ink buttons and the doors (a light band slides across on hover; never on small buttons) ---- */
.pn-lb .pc-btn:is(.pc-btn--primary,.pc-btn--ink,.pc-btn--on-accent):not(.pc-btn--sm),.pn-lp-doors .pc-door{position:relative;isolation:isolate}
.pn-lb .pc-btn:is(.pc-btn--primary,.pc-btn--ink,.pc-btn--on-accent):not(.pc-btn--sm)::after,.pn-lp-doors .pc-door::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--lp-sheen) no-repeat;background-size:260% 100%;background-position:130% 0;transition:background-position 900ms var(--ease-out)}
.pn-lb .pc-btn:is(.pc-btn--primary,.pc-btn--ink,.pc-btn--on-accent):not(.pc-btn--sm):hover::after,.pn-lp-doors .pc-door:hover::after{background-position:-30% 0}

/* ---- reveal: each armed section's content rises once in view (landing.js); reduced motion: static ---- */
@media (prefers-reduced-motion:no-preference){
  .pn-lb .is-armed > .pc-wrap{transition:opacity var(--lp-reveal-dur) var(--ease-out),transform var(--lp-reveal-dur) var(--ease-out)}
  .pn-lb .is-armed:not(.is-in) > .pc-wrap{opacity:0;transform:translateY(var(--reveal-y))}
}
@media (prefers-reduced-motion:reduce){.pn-lp-doors .pc-door,.pn-lb .pc-btn::after,.pn-lp-doors .pc-door::after{transition:none}.pn-lp-doors .pc-door:hover{transform:none}}

/* ---- tablet 701-1100 (audit Top 1): 701-959 stacks hero, buy head and receipt; words never break inside ---- */
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .pn-lp-report__wrap{grid-template-columns:minmax(0,1fr) 300px;gap:32px}
  .pn-lp-buy__jess{height:460px}
  .pn-lp-sell__mara{height:480px}
  .pn-lp-steps{row-gap:16px}
}
@media (min-width:701px) and (max-width:959px){
  .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .pn-lp-hero__copy{padding-bottom:8px}
  .pn-lp-hero__art{width:100%;max-width:560px;height:440px;justify-self:center}
  .pn-lp-hero__art .pc-arch{width:420px;height:330px;border-radius:210px 210px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:196px 196px 0 0}
  .pn-lp-b1{width:540px}
  .pn-lp-hero__stamp{left:0;top:40px}
  .pn-lp-buy__top{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-lp-buy__art{height:420px;margin-top:24px}
  .pn-lp-buy__jess{right:40px;height:440px}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .pn-lp-receipt{max-width:460px;margin-right:12px}
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"head head" "lede art" "proof art"}
}

/* ---- phone ---- */
@media (max-width:700px){
  .pn-lp-hero__art{--foot:24px}
  .pn-lp-hero__illu{right:16px;bottom:4px}
  .pn-lp-b1__tag small{display:none}
  .pn-lp-buy__art{height:320px;margin:26px -16px 26px}
  .pn-lp-buy__jess{right:10px;height:340px}
  .pn-lp-buy__illu{right:16px;bottom:-22px}
  .pn-lp-buy .pc-tile{margin-right:18px;padding-right:18px}
  .pn-lp-how{margin-top:30px}
  /* Mara under the lede, 200 px, centred, her label under her (audit: it sat on her face) */
  .pn-lp-sell__top{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "lede" "proof" "art";grid-template-rows:auto}
  .pn-lp-sell__art{justify-self:center;width:200px;height:300px;min-height:0;margin:8px 0 26px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .pn-lp-sell__mara{left:50%;right:auto;top:auto;bottom:0;height:300px;transform:translateX(-50%)}
  .pn-lp-sell__illu{right:auto;left:50%;top:auto;bottom:-20px;transform:translateX(-50%);text-align:center;font-size:11px}
  .pn-lp-sell__illu .pc-illu__a,.pn-lp-sell__illu .pc-illu__b{display:inline}
  .pn-lp-sell__illu .pc-illu__sep{display:inline}
  .pn-lp-sell__proof{margin:4px 0 0}
  .pn-lp-sell .pn-lp-notes{margin-top:24px}
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .pn-lp-mcard{grid-template-columns:30px minmax(0,1fr);column-gap:14px;padding:20px 0}
  .pn-lp-join__head{margin-bottom:16px}
  .pn-lp-report__wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .pn-lp-report__p{font-size:16px}
  /* the es / it / fr report door (34+ characters) ran out of its pill at 360-390: full width, a balanced two-line label */
  .pn-lp-report__cta .pc-btn{display:block;width:100%;white-space:normal;text-align:center;text-wrap:balance;line-height:1.15}   /* block (not flex): the arrow stays in the label's line, the wrapped label stays centred */
  .pn-lp-lgrid--guide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:379px){
  .pn-lp-buy .pn-lp-buy__tiles{flex-direction:column;gap:18px}
  .pn-lp-buy .pc-tile{margin:0;padding:0 0 18px;border-right:0;border-bottom:1px solid var(--lp-buy-line)}
  .pn-lp-buy .pc-tile:last-child{padding-bottom:0;border-bottom:0}
}

/* ---- AD1 03.10. (docs/ad1-03-10.md) ---- */
/* F1 tablet 701-1100: the money / report hero gave the copy 266 px at 768 next to a 360 px art column: the report h1
   broke inside "PANTIES" and left the "?" alone, the fr / it / es / pt pink CTA ran out of its pill. The art column
   now follows the screen (220 at 701, 330 at 1100), the arch scales with it, the report h1 is sized to its column. */
@media (min-width:701px) and (max-width:1100px){
  .pn-lpm-hero__wrap{grid-template-columns:minmax(0,1fr) clamp(220px,30vw,330px);gap:24px}
  .pn-lpm-art,.pn-lpm-art--report{height:clamp(400px,44vw,480px)}
  .pn-lpm-art .pc-arch,.pn-lpm-art--report .pc-arch{width:100%;height:auto;aspect-ratio:8 / 9;border-radius:999px 999px 0 0}
  .pn-lpm-art .pc-arch::after,.pn-lpm-art--report .pc-arch::after{border-radius:999px 999px 0 0}
  .pn-lpm-art__fig,.pn-lpm-art--report .pn-lpm-art__fig{height:clamp(400px,44vw,480px)}
  .pn-lpm-art--buy .pn-lpm-art__fig{height:clamp(340px,38vw,440px)}
  .pn-lpm-art__obj{width:clamp(96px,11vw,130px);left:0}
  .pn-lpm-hero--report .pn-lpm-hero__h.pc-h-l{font-size:clamp(44px,5.6vw,64px)}
  .pn-lpm-hero .pn-lp-ctas > .pc-btn{max-width:100%}
}
/* F4 phones: the two hero doors of /sell and /buy share a row while they fit, else each fills it (the landing hero's
   rule), never a ragged pair of pills hanging off the left edge. */
@media (max-width:700px){.pn-lpm-hero .pn-lp-ctas > .pc-btn{flex:1 1 auto}}
/* F6 the step cards keep the 96 px object lane only where a card carries an object: es "Encuéntrala" ran 30 px
   into the empty lane of the first card on every desktop width. */
.pn-lpm-ship .pc-care:not(:has(> .pc-obj)){padding-right:20px}
/* F3 the rail CTA box (money pages, guides, report): the box is 248 px inside; the 15 px button label wrapped to two
   lines in most languages. The rail button takes the kit's small type (13, as the report rail already did) and a
   balanced wrap where a language still needs two lines; the report's second way on is a tier-3 link under it. */
@media (min-width:701px){
  .pn-lpm-ctabox{padding:22px}
  .pn-lpm-ctabox .pc-btn{padding-inline:14px;font-size:13px}
  .pn-lpm-ctabox__alt{margin:4px 0 0;text-align:center}
}
/* F7 tablet: es "palabras." ran 25 px out of the proof column at 1024 (76 px head in a 464 column), the section heads
   next to their door ran 4-7 px out at 701 (es, fr). Both heads scale with the column between 701 and 1100. */
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-proof__h.pc-h-l{font-size:clamp(48px,6.3vw,76px)}
  .pn-lp-real .pc-sechead .pc-h-m{font-size:clamp(34px,4.3vw,44px)}
}

/* UX 17.10. #35: the wordmark over the join head is gone (the footer's logo followed right under it) */
.pn-lp-mast__meta{font-size:11px;letter-spacing:.2em}   /* the kicker's measure (the label voice) */

/* ================= HERO COMPOSITION from 1101 (owner 05.10. on the live hero at 1280-2000: "oben rechts zu viel freie
   Fläche, die Figur muss weiter hoch, das sieht hingeklatscht aus") =================
   One baseline system for both columns: the art column stretches to the copy column's height (no 740 px box hanging at the
   bottom of a taller row), the figure stands on the ground (--foot) and is scaled so ROXY's head reaches the top of the
   wrap, level with the H1 (920 px cut-out = 713 px tall + the foot = the row); her hands and knees sit on the CTA line.
   The figure is anchored to the right edge of the wrap plus the gutter, so her fingertips end at the viewport edge at 1280
   and nothing is cut; below 1280 the cut-out shrinks with the viewport so her heels never run into the copy. The arch is
   bigger and higher (620 x 600, right-anchored so it sits behind her torso, not centred in an empty column); her head
   rises over it. The stamp sits on the arch's left shoulder (half on the pink, half on the ground), not in the air.
   The hero is tighter (padding 32 / copy foot 32, H1 82 px at 1280 and 92 from 1440) so both CTAs are in the fold at
   1280 x 800. Tokens, the ground shadow, the 95 % fade, the cast label: unchanged. */
@media (min-width:1101px){
  .pn-lp-hero{padding-top:32px}
  .pn-lp-hero__wrap{align-items:stretch;gap:16px}
  .pn-lp-hero__copy{padding-bottom:32px}
  .pn-lp-hero__h{margin:10px 0 18px}
  .pn-lp-hero__lede{margin-bottom:24px}
  .pn-lp-hero__art{height:auto;min-height:760px}
  .pn-lp-b1{left:auto;right:calc(-1 * var(--gutter));transform:none;width:min(920px,calc(100vw - 360px))}
  .pn-lp-hero__art .pc-arch{left:auto;right:-26px;transform:none;width:620px;height:600px;border-radius:310px 310px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:296px 296px 0 0}
  .pn-lp-hero__stamp{left:48px;top:auto;bottom:calc(var(--foot) + 470px)}
}
/* from 1440 the H1 is 92 px and the row 50 px taller: the cut-out grows with it (980 = 760 tall + the foot), the arch too,
   so her head stays level with the H1 and no band opens over it; her fingertips end 80 px inside the viewport. */
@media (min-width:1440px){
  .pn-lp-b1{width:980px}
  .pn-lp-hero__art .pc-arch{width:660px;height:640px;border-radius:330px 330px 0 0}
  .pn-lp-hero__art .pc-arch::after{border-radius:316px 316px 0 0}
  .pn-lp-hero__stamp{bottom:calc(var(--foot) + 505px)}
}
/* hero r5 (owner 11.10.) on the desktop row: she lies across the frame, so the cut-out is narrower than ROXY's (her hand
   and the panties stay clear of the copy) and the stamp sits on the arch at the top right, never on her face */
@media (min-width:1101px){
  .pn-lp-b1--r5{width:min(760px,calc(100vw - 500px))}
  .pn-lp-hero__art--r5 .pn-lp-hero__stamp{left:auto;right:36px;bottom:auto;top:104px}
}
@media (min-width:1440px){
  .pn-lp-b1--r5{width:820px}
}
@media (min-width:701px) and (max-width:1100px){
  .pn-lp-hero__art--r5 .pn-lp-hero__stamp{left:-36px;top:4px}   /* screenshot check: at left 0 its corner touched her hair */
}

/* ==========================================================================
   BRAND PREVIEW 05.10. (docs/brand-review-05-10.md, owner: "setzt mal alle um als Screenshot") — the 15 proposals in one
   build, for the decision from screenshots. Numbers = the review's list.
   ========================================================================== */
/* 1 one kicker system: tub + caps label + hairline in every section; ink on light, pink on every dark ground, ink on pink / paper */
.pn-lb .pc-kicker{color:var(--ink)}
.pn-lb .pc-kicker::after{content:"";flex:none;width:44px;height:1px;margin-left:6px;background:currentColor;opacity:.55}
[data-theme="dark"] .pn-lb .pc-kicker{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lb .pc-kicker{color:var(--pink)}}
.pn-lb .pc-dk .pc-kicker,.pn-lb .pn-lp-laundry .pc-kicker,.pn-lb .pn-lp-report .pc-kicker{color:var(--pink)}
.pn-lb .pc-on-pink .pc-kicker,.pn-lb .pc-box--cr .pc-kicker{color:var(--anthracite)}
.pn-lb .pc-sechead .pc-kicker{margin-bottom:4px}
.pn-lb .pn-lp-proof .pc-kicker,.pn-lb .pn-lp-guides .pc-kicker,.pn-lb .pn-lp-join .pc-kicker{margin-bottom:16px}
/* 4 step numbers: the numeral in the display face (components.css .pc-care__num), the word in the label voice */
.pn-lb .pc-care__num{color:var(--anthracite)}
.pn-lb .pc-care h3{margin-top:8px}
/* 5 stamp family: the calculator's stamp under the stack (the hero keeps DO NOT WASH, the seller cards TOP RATED) */
.pn-lb .pn-lp-calc{overflow:hidden}
.pn-lb .pn-lp-calc__stamp{position:absolute;right:22px;bottom:150px;z-index:2}   /* beside the sum, clear of the copy and the stack */
@media (min-width:701px){.pn-lb .pn-lp-calc > small{padding-right:104px}}   /* art-director pass 13.10.: the stamp lay over the end of the note */
/* 7 hand notes: one size, one place (after the lede), never more than three on the page */
.pn-lb .pc-hand{font-size:26px}
/* 8 the marker underline is gone: the tape is the one highlight */
.pn-lb .pn-lp-proof__h em,[data-theme="dark"] .pn-lb .pn-lp-proof__h em{background:none;padding:0}
/* 9 final CTA: the wordmark stamp over the head (was typo c only) */
/* 10 guides index: cream paper cards with a Pirata numeral, back in the paper family */
.pn-lb .pn-lp-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;counter-reset:lpg}
.pn-lb .pn-lp-mcard{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;row-gap:0;padding:22px 20px 22px;border:0;border-radius:8px 8px 18px 18px;background:var(--cream);color:var(--anthracite);box-shadow:var(--lp-step-sh)}
.pn-lb .pn-lp-mcard:first-child{border-top:0}
.pn-lb .pn-lp-mcard::before{content:counter(lpg,decimal-leading-zero);grid-column:1;font:700 33px/1 var(--font-display);font-variant-numeric:normal;letter-spacing:-.01em;color:var(--anthracite);margin-bottom:10px}
.pn-lb .pn-lp-mcard__p{color:var(--muted-lt)}
.pn-lb .pn-lp-mcard__more{color:var(--anthracite)}
.pn-lb .pn-lp-mcard:hover{background:var(--cream)}
/* 11 the guide figure stands on a filled arch (the brand's arch, dimmer), not a contour */
.pn-lb .pn-lp-host::before{background:var(--lp-arch);box-shadow:var(--lp-arch-glow)}
/* 12 the three sell boxes on one paper surface (template: .pc-box--cr); the calculator's controls in ink */
.pn-lb .pc-box--cr .pn-lp-box__p,.pn-lb .pc-box--cr .pc-priv small,.pn-lb .pn-lp-calc small{color:var(--muted-lt)}
.pn-lb .pc-box--cr .pc-priv b{color:var(--anthracite)}
.pn-lb .pn-lp-calc .pc-stepper button{color:var(--anthracite);border-color:transparent;background:var(--obj-fill)}
.pn-lb .pn-lp-calc .pc-stepper button:hover{border-color:transparent;background:var(--media-dim)}
.pn-lb .pn-lp-calc .pn-lp-calc__res{color:var(--pink-glyph)}
@media (max-width:700px){
  .pn-lb .pn-lp-mgrid{grid-template-columns:minmax(0,1fr)}
  .pn-lb .pn-lp-mcard{padding:18px 16px 18px}
  .pn-lb .pn-lp-mcard::before{font-size:27px}
}

/* ---- homepage v2 (owner brief 10.10., lib/landing.php pnew_lb_v2): the stats strip, eight listings 4 across, eight sellers 4 x 2, three seller benefits, the folded guide, the FAQ ---- */
.pn-lp-stats{position:relative;z-index:2;padding:20px 0 4px;background:var(--bg)}
.pn-lp-stats__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pn-lp-stats__i{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:14px;background:var(--surface)}
.pn-lp-stats__i b{font:700 26px/1.15 var(--font-display);color:var(--ink)}
.pn-lp-stats__i span{font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-lb .pn-lp-sellgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;margin-inline:0;padding-inline:0;justify-content:stretch}
.pn-lb .pn-lp-sellgrid > .pc-scard{width:auto}
.pn-lp-sellben__premium{margin:18px 0 0;max-width:720px;font:400 14px/1.55 var(--font-sans)}
.pn-lp-topics__row--v2{margin:16px 0 20px}
.pn-laundry__rest--v2{margin-top:20px}
.pn-laundry__rest--v2[open] > summary{display:inline-flex}
.pn-lp-faq{position:relative;padding:var(--lp-pad) 0;background:var(--bg);color:var(--ink)}
.pn-lp-faq__wrap{max-width:860px}
.pn-lp-faq__h{margin:0 0 20px}
.pn-lp-faq__i{border-radius:12px;background:var(--surface);margin-top:8px}
.pn-lp-faq__i > summary{cursor:pointer;padding:14px 18px;font:600 16px/1.4 var(--font-sans);list-style:none}
.pn-lp-faq__i > summary::-webkit-details-marker{display:none}
.pn-lp-faq__i > summary::after{content:"+";float:right;font-weight:400}
.pn-lp-faq__i[open] > summary::after{content:"\2212"}
.pn-lp-faq__i > summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pn-lp-faq__i > p{margin:0;padding:0 18px 16px;font:400 15px/1.6 var(--font-sans);color:var(--ink-2)}
.pn-lp-faq__more{margin:20px 0 0}
@media (min-width:701px){
  .pn-lb .pn-lp-pairs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pn-lb .pn-lp-sellgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .pn-lb .pn-lp-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-lb .pn-lp-boxes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  /* phones: the page must get shorter, not longer — three stats cells in one row, the sellers as one swipe row, the buying steps and the guide cards 2 x 2 */
  .pn-lp-stats{padding:14px 0 0}
  .pn-lp-stats__row{gap:8px}
  .pn-lp-stats__i{padding:10px 10px 11px}
  .pn-lp-stats__i b{font-size:18px}
  .pn-lp-stats__i span{font-size:12px;line-height:1.3}
  .pn-lb--v2 .pn-lp-sellgrid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .pn-lb--v2 .pn-lp-sellgrid::-webkit-scrollbar{display:none}
  .pn-lb--v2 .pn-lp-sellgrid > .pc-scard{flex:none;width:148px;scroll-snap-align:start}
  .pn-lb--v2 #how .pn-lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pn-lb--v2 .pn-lp-mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
/* Raw backgrounds (owner 12.10., mockup design/v8/raw-backgrounds.html; lib/landing.php pnew_raw_bg(), switch raw_bg):
   one large flash photo is half of an area and fades out towards the text only. No cut-out, so it works on any area
   colour; the crop per slot is object-position. --raw-h: the height the photo covers (a long block shows it at its top). */
.pn-raw{position:relative;overflow:hidden;isolation:isolate;--raw-h:100%;--raw-w:66%}
.pn-raw > .pc-wrap{position:relative;z-index:1}
.pn-raw__bg{position:absolute;z-index:0;top:0;right:0;width:var(--raw-w);height:var(--raw-h);max-width:none;object-fit:cover;object-position:50% 30%;filter:contrast(1.14) saturate(1.12) brightness(1.04);
  -webkit-mask-image:linear-gradient(to right,transparent 0,var(--ink) 34%),linear-gradient(to right,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,var(--ink) 34%),linear-gradient(to right,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent);mask-composite:intersect}
.pn-raw--l .pn-raw__bg{right:auto;left:0;
  -webkit-mask-image:linear-gradient(to left,transparent 0,var(--ink) 34%),linear-gradient(to left,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent);
  mask-image:linear-gradient(to left,transparent 0,var(--ink) 34%),linear-gradient(to left,transparent 0,var(--ink) 22%),linear-gradient(to bottom,var(--ink) calc(100% - 240px),transparent),linear-gradient(to bottom,var(--ink) calc(100% - 120px),transparent)}
/* the loop over the still (pnew_raw_video): invisible until landing.js has a playable frame; reduced motion keeps the photo */
.pn-raw__vid{opacity:0;transition:opacity .6s ease}
.pn-raw__vid.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.pn-raw__vid{display:none}}
.pn-raw__illu{position:absolute;z-index:1;top:calc(var(--raw-h) - 34px);right:20px;color:var(--dk-ink)}
.pn-raw--l .pn-raw__illu{right:auto;left:20px}
/* owner 12.10. ("the fade is too abrupt"): the fade is two gradients of different length multiplied (soft start, no new colour), and on the dark
   areas the photo's black takes the area colour (lighten), so the photo has no edge at all */
.pn-raw--hero .pn-raw__bg,.pn-raw--guides .pn-raw__bg,.pn-raw--buy .pn-raw__bg{mix-blend-mode:lighten}
/* hero: an area with a photo is dark in both themes (the flash look lives on black) */
.pn-raw--hero{--bg:var(--dk-bg);--ink:var(--dk-ink);--ink-2:var(--dk-ink-2);background:var(--dk-bg);color:var(--dk-ink);padding-top:0}
.pn-raw--hero .pn-lp-hero__wrap{grid-template-columns:minmax(0,560px);align-items:center;min-height:660px}
.pn-raw--hero .pn-lp-hero__copy{padding:72px 0}
.pn-raw__bg--hero{object-position:6% 28%}
/* buyer block: the photo left, the head and the lede in the right half; the steps below run on the plain block */
.pn-raw--buy{--raw-h:640px;--raw-w:62%}
.pn-raw--buy .pn-lp-buy__top{grid-template-columns:minmax(0,1fr) minmax(0,520px);min-height:500px;align-items:center}
.pn-raw--buy .pn-lp-buy__main{grid-column:2}
.pn-raw__bg--buy{object-position:18% 30%}
/* seller block (pink): the photo's dark room fades into the pink */
.pn-raw--sell{--raw-h:620px;--raw-w:60%}
.pn-raw--sell .pn-lp-sell__top{grid-template-columns:minmax(0,560px);grid-template-areas:"head" "lede" "proof";min-height:470px;align-content:center}
.pn-raw__bg--sell{object-position:38% 30%}
/* guides index head: the same dark area as the landing hero */
.pn-raw--guides{--bg:var(--dk-bg);--ink:var(--dk-ink);--ink-2:var(--dk-ink-2);background:var(--dk-bg);color:var(--dk-ink);--raw-w:60%}
.pn-raw--guides .pn-gdx__head{display:grid;align-content:center;min-height:440px;padding-bottom:56px}
.pn-raw--guides .pn-gdx__head > *{max-width:560px}
.pn-raw__bg--guides{object-position:45% 30%}
/* 404: the photo is the top of the card, faded out downwards only */
.pn-raw--nf{height:320px;width:100%;align-self:stretch;margin:0 0 6px;border-radius:16px;--raw-w:100%}
.pn-raw--nf .pn-raw__bg{-webkit-mask-image:linear-gradient(to bottom,var(--ink) 62%,transparent);mask-image:linear-gradient(to bottom,var(--ink) 62%,transparent);-webkit-mask-composite:source-over;mask-composite:add}
.pn-raw__bg--nf{object-position:14% 30%}
/* Alt look (owner 12.10. evening, pnew_alt_on()): the hero carries a lying cut-out figure instead of the photo: it lies on the
   hero's lower edge in the right two thirds, the copy stands left. The pink room pictures of the other slots are daylight
   shots: no flash grading, their own crops. */
.pn-raw--hero.pn-alt{--bg:inherit;--ink:inherit;--ink-2:inherit;background:var(--lp-grain) 0 0/160px 160px,var(--lp-hero-bg);color:var(--ink)}   /* a cut-out needs no black ground: this hero follows the theme; the figure ends on the right where the navigation ends, and is as large as the copy beside it allows (owner 12.10.: "kann groesser") */
/* the hero's moving ground (owner 12.10. evening, mockup design/v8/hero-anim.html, he chose 4 "Spot"): one soft light cone from above
   swings slowly over her; the grain is the hero's own. Still with reduced motion. */
.pn-alt__spot{position:absolute;inset:0;z-index:0;pointer-events:none;background:conic-gradient(from 196deg at 78% -12%,transparent 0 6deg,var(--alt-spot-2) 14deg,var(--alt-spot) 24deg,var(--alt-spot-2) 34deg,transparent 44deg);filter:blur(22px);transform-origin:78% -12%;animation:pnAltSpot 13s ease-in-out infinite alternate}
@keyframes pnAltSpot{from{transform:rotate(-9deg)}to{transform:rotate(11deg)}}
@media (prefers-reduced-motion:reduce){.pn-alt__spot{animation:none}}
.pn-alt .pn-alt__art{position:absolute;z-index:0;right:max(var(--gutter),calc((100% - var(--main-max)) / 2));bottom:26px;width:min(64%,1140px);filter:drop-shadow(0 22px 28px var(--ground-shadow))}
.pn-alt .pn-alt__fig{display:block;width:100%;height:auto;max-width:none;filter:var(--lp-cut-rim)}   /* dark theme: the rim keeps her black plush ears and socks readable */
.pn-alt .pn-raw__illu{top:auto;bottom:10px;color:var(--ink-2)}
.pn-raw__bg--alt{filter:none}
.pn-raw__bg--alt.pn-raw__bg--buy{object-position:10% 40%}
.pn-raw__bg--alt.pn-raw__bg--sell{object-position:70% 40%}
.pn-raw__bg--alt.pn-raw__bg--guides{object-position:70% 40%}
.pn-raw__bg--alt.pn-raw__bg--nf{object-position:20% 22%}
@media (max-width:700px){
  /* phones: the photo lies on top over the full width and runs out downwards into the text */
  .pn-raw{--raw-w:100%}
  .pn-raw__bg,.pn-raw--l .pn-raw__bg{left:0;right:0;width:100%;height:var(--raw-ph,340px);
    -webkit-mask-image:linear-gradient(to bottom,var(--ink) 44%,transparent),linear-gradient(to bottom,var(--ink) 66%,transparent);mask-image:linear-gradient(to bottom,var(--ink) 44%,transparent),linear-gradient(to bottom,var(--ink) 66%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
  .pn-raw__illu{display:none}
  .pn-raw > .pc-wrap{padding-top:calc(var(--raw-ph,340px) - 40px)}
  .pn-raw--hero .pn-lp-hero__wrap{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-raw--hero .pn-lp-hero__copy{padding:0 0 44px}
  .pn-raw--buy .pn-lp-buy__top{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-raw--buy .pn-lp-buy__main{grid-column:1}
  .pn-raw--buy,.pn-raw--sell{padding-top:0}
  .pn-raw--sell .pn-lp-sell__top{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-raw__bg--hero{object-position:50% 25%}
  .pn-raw__bg--buy{object-position:22% 25%}
  .pn-raw__bg--sell{object-position:38% 25%}
  .pn-raw--guides .pn-gdx__head{min-height:0;padding-bottom:36px}
  .pn-raw--nf{height:240px}
  .pn-raw--nf > .pn-raw__bg{height:100%}
}
@media (max-width:700px){
  .pn-alt{--raw-ph:312px}
  .pn-alt__spot{background:conic-gradient(from 190deg at 62% -6%,transparent 0 8deg,var(--alt-spot-2) 18deg,var(--alt-spot) 30deg,var(--alt-spot-2) 42deg,transparent 52deg);transform-origin:62% -6%;height:420px;bottom:auto}
  .pn-alt .pn-alt__art{left:50%;right:auto;top:18px;bottom:auto;transform:translateX(-58%);width:min(118%,520px)}   /* phones: larger than the screen is wide, her socks run off the left edge */
  .pn-raw__bg--alt.pn-raw__bg--buy{object-position:18% 30%}
  .pn-raw__bg--alt.pn-raw__bg--sell,.pn-raw__bg--alt.pn-raw__bg--guides{object-position:72% 30%}
}

/* ==========================================================================
   Home audit 13.10. (owner: "ja bau das"): UX expert + art director on the guest home page. Their points 1, 2, 4, 5,
   6, 11 (the ways to sign up, the first phone screen), 23 (card titles) and 49 (four layout faults).
   ========================================================================== */
/* hero: the seller way and the proof under the doors are text — the outlined chip read as a third button */
.pn-lp-hero__sell{margin:16px 0 0;font:500 15px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-lp-hero__facts{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
.pn-lp-hero__fact{display:block;font:500 14px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-lp-hero__fact--lock{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
/* final doors: browsing is the quiet way under the sign-up */
.pn-lp-door__more{margin:14px 0 0}
/* reviews end with the buyer sign-up on phones (below); wide screens keep the header's door in view */
.pn-lp-proof__cta{display:none;margin:0}
/* the home page's listing cards: two title lines, so "worn 3 days" is read (the card keeps its fixed 3:4, the caption
   sits on the photo). Every other grid keeps the one line of the card spec (components.css, adcard2 03.10.) */
.pn-lp-pairs .pn-prodcard .pc-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;text-wrap:wrap;text-overflow:clip;overflow-wrap:anywhere}
/* the two figures of the buy block stay side by side: the second one wrapped under the first and left the divider alone */
@media (min-width:1101px){
  .pn-lp-buy .pn-lp-buy__tiles{flex-wrap:nowrap}
  .pn-lp-buy .pc-tile{flex:0 1 auto}
}
/* the three safety cards fill their row (they sat in the four-column grid of the steps and left a hole) */
@media (min-width:701px){.pn-lp-how--safe .pn-lp-steps,#how .pn-lp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* UX 17.10. #18: three buying steps too */
/* the phone bar: hidden unless the script shows it */
.pn-lbsticky{display:none}
@media (max-width:700px){
  /* first screen: no empty band under the hero, the listings' lede goes (the cards say it) */
  .pn-lp-real.pn-pairs .pc-sechead p,.pn-lp-hero + .pn-lp-real.pn-pairs .pc-sechead .pc-kicker{display:none}
  .pn-lb .pn-raw--hero.pn-alt .pn-lp-hero__copy{padding-bottom:20px}
  .pn-lb .pn-lp-hero + .pn-lp-real.pn-pairs{padding-top:22px}
  .pn-lp-hero + .pn-lp-real.pn-pairs .pc-sechead{margin-bottom:14px}
  .pn-lp-hero + .pn-lp-real.pn-pairs .pc-sechead .pc-h-m{margin-top:0}
  .pn-lp-hero__sell{margin-top:14px}
  .pn-lp-proof__cta{display:block}
  .pn-lp-proof__cta .pc-btn{display:flex;width:100%;justify-content:center}
  /* the pegged pair of the price box hangs clear of the full-width report button above it */
  .pn-lp-report .pn-lp-pbox{margin-top:104px}
  /* rows that scroll sideways fade out at the edge instead of ending in half a word */
  .pn-lp-browse__row,.pn-lp-sellrail{-webkit-mask-image:linear-gradient(to right,black calc(100% - 36px),transparent);mask-image:linear-gradient(to right,black calc(100% - 36px),transparent)}
  .pn-lbsticky:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);display:flex;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);box-shadow:var(--sh-float)}
  .pn-lbsticky .pc-btn{flex:1 1 0;min-width:0;min-height:48px;justify-content:center;white-space:nowrap}
  /* UX 17.10. #1: no extra room in the footer — the bar hides while the footer is on screen (landing.js) */
  /* UX 17.10. #16: shorter on a phone (the price box repeats the buy tile, the review note the lede; lower pictures) */
  .pn-lb .pn-lp-report .pn-lp-pbox,.pn-lb .pn-lp-proof__note{display:none}
  .pn-lb .pn-lp-buy__art{height:220px}
  .pn-lb .pn-lp-sell__art{height:220px;min-height:0}
  .pn-lb :is(.pn-raw--buy,.pn-raw--sell){--raw-ph:240px}
}

/* UX 17.10. #16 follow-up (owner 17.10.: "ja", about eight phone screens instead of eleven): phones only, denser blocks.
   Every word stays in the HTML (the SEO text is never display:none); on phones the calculator, the extra receipt quotes,
   the guide's brand illustration and the handwritten privacy sign-off go; desktop is untouched. */
@media (max-width:700px){
  .pn-lb{--lp-pad:32px}
  .pn-lb :is(.pn-raw--buy,.pn-raw--sell){--raw-ph:180px}
  /* buy: two figures in one low row, the steps as rows (number | head + line), the safety trio as one list */
  .pn-lb .pn-lp-buy .pc-tile b{font-size:40px}
  .pn-lb .pn-lp-buy .pc-tile p{margin-top:4px}
  .pn-lb .pn-lp-buy__jess{height:250px;bottom:-30px}   /* inside her 220 px box: she stood over the second figure */
  .pn-lb .pn-lp-sell__mara{height:236px}
  .pn-lb .pn-lp-how__h{margin-bottom:14px}
  .pn-lb .pn-lp-buy .pn-lp-step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:10px 14px 11px 10px}
  .pn-lb .pn-lp-buy .pn-lp-step::before{inset:4px}
  .pn-lb .pn-lp-buy .pn-lp-step .pc-care__n{grid-row:1 / 3;flex-direction:column;align-items:center;gap:3px;padding-top:2px}
  .pn-lb .pn-lp-buy .pn-lp-step h3{margin:0 0 2px}
  .pn-lb .pn-lp-buy .pn-lp-step p{font-size:13.5px;line-height:1.45}   /* the safety rows too (.pn-lp-step) */
  .pn-lb .pn-lp-how--safe .pn-lp-steps{gap:0;border-radius:8px 8px 18px 18px;background:var(--cream);overflow:hidden}
  .pn-lb .pn-lp-buy .pn-lp-safe__i{display:block;padding:10px 16px 11px;border-radius:0;background:none;box-shadow:none}
  .pn-lb .pn-lp-buy .pn-lp-safe__i::before{display:none}
  .pn-lb .pn-lp-buy .pn-lp-safe__i + .pn-lp-safe__i{border-top:1px solid var(--line)}
  .pn-lb .pn-lp-buy .pn-lp-cta{margin-top:28px;row-gap:10px}
  /* reviews: one quote on the receipt (the others stay for wide screens) */
  .pn-lb .pn-lp-proof__p{margin-top:12px}
  .pn-lb .pn-lp-proof__links{margin-top:12px}
  .pn-lb .pn-lp-receipt .pn-quotes > li:nth-child(n+2){display:none}
  /* sell: no calculator, the privacy box as four short rows */
  .pn-lb .pn-lp-sell__head{padding-top:0}
  .pn-lb .pn-lp-sell__head > .pn-lp-sell__h{margin-bottom:16px}
  .pn-lb .pn-lp-sell__lede{margin-bottom:16px}
  .pn-lb .pn-lp-calc,.pn-lb .pn-lp-priv > .pc-hand{display:none}
  .pn-lb .pn-lp-boxes{margin-top:24px}
  .pn-lb .pn-lp-priv .pc-box__h{margin-bottom:8px}
  .pn-lb .pn-lp-priv .pn-lp-box__p{margin:0 0 10px;font-size:14px}
  .pn-lb .pn-lp-priv .pc-priv{gap:0}
  .pn-lb .pn-lp-priv .pc-priv > li{padding:7px 0;border-top:1px solid var(--line);line-height:1.4}
  .pn-lb .pn-lp-priv .pc-priv b{display:inline}
  .pn-lb .pn-lp-priv .pc-priv b::after{content:" · "}
  /* guide: the kicker alone over the text, the topics as one swipe row */
  .pn-lb .pn-lp-lgrid--guide{margin-top:16px}
  .pn-lb .pn-lp-laundry__lede{font-size:16px;margin-bottom:16px}
  .pn-lb .pn-lp-topics{margin-bottom:16px}
  .pn-lb .pn-lp-topics__row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(to right,black calc(100% - 36px),transparent);mask-image:linear-gradient(to right,black calc(100% - 36px),transparent)}
  .pn-lb .pn-lp-topics__row::-webkit-scrollbar{display:none}
  .pn-lb .pn-lp-topics__row > li{flex:none}
  .pn-lb .pn-lp-laundry__close{margin-top:20px}
  /* prices + the last block: the same rhythm, smaller doors */
  .pn-lb .pn-lp-report__cta{margin-top:18px}
  .pn-lb .pn-lp-doors{gap:12px}
  .pn-lb .pn-lp-doors .pc-door{padding:20px;gap:8px}
  .pn-lb .pn-lp-doors .pc-door p{min-height:0;margin-bottom:4px}
  .pn-lb .pn-lp-doors .pn-lbdoor__cta{margin-top:8px}
}
/* ==========================================================================
   The guide body of /sell, /buy and the Drawer Report (money_section.php, report_body.php) on the v3 kit: the mockup's
   Laundry Room prose (.prose h3 = Archivo 900 28 wdth 75 caps, 17 / 1.65 text), the step label (.care .n) over each
   section head, the price box rows (.pbox: dashed lines, the median pink-press) for the tables, paper cards with the
   line for the quotes, the pills (.chip) for the tags, the receipt (.receipt) for the report's short answer.
   The page frames are in landing.css (.pn-lpm-*). Tokens only.
   ========================================================================== */
.pn-lpm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;min-width:0}
.pn-mp__sec{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;font:400 var(--fs-prose)/1.65 var(--font-sans);color:var(--ink);scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-mp__sec p{margin:0;max-width:var(--measure-prose)}
.pn-mp__sec p a:not([class]){color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-mp__sec > p:not(:lang(en)),.pn-mp__list > li:not(:lang(en)){-webkit-hyphens:auto;hyphens:auto}
/* UX 17.10. #44: no section number over the heading (the TOC numbers the page), the step lists count 01, 02 like the TOC; #45: the answer that opens a section is plain prose (one lead per page: the hero lede) */
.pn-mp__h{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink);hyphens:manual;overflow-wrap:break-word}
h3.pn-mp__h{font-size:20px}
.pn-mp__q{margin:10px 0 0;font:700 18px/1.3 var(--font-sans);color:var(--ink)}
.pn-mp__answer{max-width:var(--measure-prose)}
.pn-mp__note{font:400 14px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-mp__list{margin:0;padding:0;list-style:none;display:grid;gap:8px;max-width:var(--measure-prose)}
.pn-mp__list > li{position:relative;padding-left:22px}
ul.pn-mp__list > li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
/* numbered steps: the big pink-press number of the mockup's notes (.note .n), in line */
.pn-mp__list--steps{gap:14px;counter-reset:pn-mp}
.pn-mp__list--steps > li{min-height:34px;padding-left:44px;counter-increment:pn-mp}
.pn-mp__list--steps > li::before{content:counter(pn-mp,decimal-leading-zero);position:absolute;left:0;top:.2em;width:32px;font:700 14px/1.35 var(--font-display);color:var(--pink-glyph)}
/* tables = .pbox rows: dashed lines, the caption as the small-caps title, the median column pink-press */
.pn-mp__tw{max-width:100%;overflow-x:auto;scrollbar-width:thin}
.pn-mp__table{width:100%;border-collapse:collapse;font:400 14px/1.35 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.pn-mp__table caption:not(.pc-sr),.pn-mp__cap{padding:0 0 8px;text-align:left;font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--ink)}
.pn-mp__cap{margin:0;text-wrap:balance}   /* polish r1: the visible caption sits above the scroller, never cut with it */
@media (max-width:700px){
  .pn-mp__table .is-opt{display:none}
  .pn-mp__table thead th,.pn-mp__table th[scope="row"]{white-space:normal;vertical-align:bottom}   /* long pt / fr headers wrap */
  .pn-mp__table th[scope="row"]{vertical-align:middle}
  .pn-mp__bar{width:24px;margin-right:6px}
}
.pn-mp__table th,.pn-mp__table td{padding:10px 12px;text-align:right;white-space:nowrap;border-bottom:1px dashed var(--line)}
.pn-mp__table th:first-child{padding-left:0}
.pn-mp__table tr > :last-child{padding-right:0}
.pn-mp__table thead th{font:700 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-mp__table th[scope="row"],.pn-mp__table thead th:first-child{text-align:left;font-weight:700}
.pn-mp__table .is-med{font:700 15px/1 var(--font-display);color:var(--pink-text)}   /* T41: >= 4.5:1 */
.pn-mp__table thead .is-med{font:700 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-mp__bar{position:relative;display:inline-block;width:40px;height:6px;margin-right:8px;overflow:hidden;border-radius:3px;vertical-align:.12em;background:var(--sunken)}
.pn-mp__bar::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w,0) * 100%);background:var(--pink)}
/* quotes: paper cards with the line (.pcard skin) */
.pn-mp__quotes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pn-mp__quote{display:grid;align-content:space-between;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--bg)}
.pn-mp__quote blockquote{margin:0;font:400 15px/1.5 var(--font-sans);color:var(--ink)}
.pn-mp__stars{display:inline-flex;gap:2px;color:var(--pink-text)}
.pn-mp__stars .is-on{fill:currentColor}
.pn-mp__stars .is-off{opacity:.25}
.pn-mp__chips{display:grid;gap:8px}
.pn-mp__chips ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
/* polish 02.10.: the questions to ask her read as quoted words (the hub's "Ask her" line), never as pills that look like
   filters next to real chip links */
.pn-mp__chips ul:has(> li > .pn-mp__ask){gap:4px 18px}
.pn-mp__ask{font:600 14px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-mp__links{margin:0;padding:0;list-style:none;display:grid;justify-items:start;gap:14px}   /* AD1 03.10.: kit tier-3 links (ui_more) */
.pn-mp__links .pc-more{font-size:15px}
.pn-mp__report{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding:26px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--bg)}
/* the page's strike lines (K3 on /sell, K5 on the report, K4 on the hub): the struck word + the Caveat correction */
.pn-mp__k .pc-fix,.pn-hubk .pc-fix{white-space:nowrap;line-height:.9;color:var(--pink-text)}
.pn-lpm-hero__k .pc-fix{color:var(--pink-text)}   /* night QA D5: the money hero strike line (sell / buy) sits on the light hero too */
/* the report's short answer = the receipt (.receipt: paper, line, zigzag foot, 1.5°) */
.pn-rep__sum{display:grid;gap:14px;max-width:520px;margin:0 0 12px;counter-increment:none}
.pn-rep__sumh{margin:0;font:600 12px/1.3 var(--font-sans);letter-spacing:0;color:var(--muted-lt)}
.pn-rep__fig{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;margin:0;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.pn-rep__fig > div{min-width:0}
.pn-rep__fig dt{font:600 11px/1.2 var(--font-sans);color:var(--muted-lt)}
.pn-rep__fig dd{margin:4px 0 0;font:700 32px/1 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--anthracite)}
.pn-rep__fig > div + div{text-align:right}
.pn-rep__fig > div + div dd{font-size:20px;color:var(--muted-lt)}
.pn-rep__sum ul{margin:0;padding:0;list-style:none;display:grid}
.pn-rep__sum li{padding:10px 0;border-top:1px dashed var(--line)}
.pn-rep__sum li:first-child{border-top:0;padding-top:0}
.pn-rep__mast{margin:0 0 18px;padding:0 0 12px}
.pn-rep__mast .pc-kicker{color:var(--ink);line-height:1.4;align-items:flex-start}   /* polish 02.10.: the edition line wraps on phones: real leading, the tub on the first line */
.pn-rep__mast .pc-kicker .pc-tub{margin-top:2px}
@media (max-width:900px){.pn-mp__quotes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .pn-lpm-body{gap:40px}
  .pn-mp__h{font-size:20px}
  .pn-mp__table th,.pn-mp__table td{padding:10px 8px}
  .pn-mp__table th:first-child{position:sticky;left:0;z-index:1;padding-right:10px;background:var(--surface)}
  .pn-mp__report{padding:18px}
  .pn-mp__report .pn-mp__table th:first-child{background:var(--bg)}
  .pn-rep__fig dd{font-size:27px}
  .pn-rep__fig > div + div dd{font-size:20px}
}

/* ---------- T21: the report page on two columns (TOC + rail | the report) ---------- */
/* The side column holds the TOC, the dark CTA box and "Read next" (sticky while it fits); the report column gets ~800 px,
   so the tables are not cut. Phones: the wrapper dissolves (TOC, report, rail as before). */
.pn-lpm--report .pn-lpm-guide__grid{grid-template-columns:300px minmax(0,1fr)}   /* AD1 F3: the rail as wide as the money rail (was 280) */
.pn-rep__side{display:grid;gap:28px;align-content:start;min-width:0}
.pn-rep__side .pn-lpm-rail{grid-column:auto}
@media (min-width:701px){
  /* the side column runs the full report height; the CTA box + "Read next" stick below the TOC (they fit any screen) */
  .pn-rep__side{align-self:stretch;align-content:start}
  .pn-rep__side .pn-lpm-rail{position:sticky;top:calc(var(--sticky-top) + 12px)}
  .pn-lpm--report .pn-lpm-body{grid-column:2;grid-row:1}
  .pn-lpm--report .pn-lpm-ctabox{padding:22px}
  .pn-lpm--report .pn-lpm-ctabox .pc-btn{padding-inline:14px;font-size:13px}
}
@media (min-width:701px) and (max-width:1100px){.pn-lpm--report .pn-lpm-guide__grid{grid-template-columns:240px minmax(0,1fr);gap:32px}}
@media (max-width:700px){
  .pn-lpm--report .pn-lpm-guide__grid{grid-template-columns:minmax(0,1fr)}
  .pn-rep__side{display:contents}
  .pn-lpm--report .pn-lpm-toc{order:1}
  .pn-lpm--report .pn-lpm-body{order:2}
  .pn-lpm--report .pn-lpm-rail{order:3}
}
.pn-rep__ctak{margin:0 0 4px;font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);color:var(--dk-ink)}
.pn-lpm-ctabox .pc-btn{white-space:normal;text-align:center}
/* T19: the money pages' rail CTA is one line of 2-3 words now: the kit button height (53), not the wrapped 1.15 lines. */
.pn-mp-ctabox .pc-btn{line-height:1}
/* The table scroller: a right-edge fade while more columns hide to the right (report.js sets data-more). */
.pn-mp__tw[data-more]{-webkit-mask-image:linear-gradient(to right,black calc(100% - 36px),transparent);mask-image:linear-gradient(to right,black calc(100% - 36px),transparent)}
/* Quotes: one column whenever the report column itself is narrower than 700 (not the viewport). */
.pn-lpm-body{container-type:inline-size}
@container (max-width:700px){.pn-mp__quotes{grid-template-columns:minmax(0,1fr)}}
/* Upsells (owner 05.10.): the ladder = the .pbox rows with a "+" gutter (the pair row without one), the hub link as a
   tier-3 link under the label on phones; the worked order = a receipt-shaped list with the sum; the calculator = the
   landing's dark box (.pc-box--dk + .pc-stepper) with the add-on switches as dashed rows. Tokens only. */
.pn-rep__lad th[scope="row"]{white-space:normal;padding-left:26px;text-indent:-26px}
.pn-rep__lad .is-pair th[scope="row"]{font-weight:800}
.pn-rep__lad-plus{display:inline-block;width:26px;text-indent:0;font:700 15px/1 var(--font-display);color:var(--pink-text)}
.pn-rep__lad-see{margin-left:10px;font-size:13px;text-indent:0;white-space:nowrap}
.pn-rep__lad td{vertical-align:middle}
@media (max-width:700px){
  .pn-rep__lad-see{display:block;margin:4px 0 0 26px}
  .pn-rep__lad td:last-child{white-space:normal;font-size:12px;color:var(--ink-2)}
}
.pn-rep__ex{margin:0;max-width:420px;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-tile);background:var(--surface);font:500 14px/1.45 ui-monospace,Menlo,monospace;color:var(--ink)}
.pn-rep__ex-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-top:1px dashed var(--line)}
.pn-rep__ex-row:first-child{border-top:0;padding-top:0}
.pn-rep__ex-row dt{padding-left:26px;text-indent:-26px}
.pn-rep__ex-row dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-rep__ex-row.is-total{margin-top:6px;padding-top:14px;border-top:0;background:var(--sunken);font-weight:700}
.pn-rep__ex-row.is-total dt{font-weight:700;padding-left:0;text-indent:0}
.pn-rep__ex-row.is-total dd{font:700 22px/1 var(--font-display);color:var(--pink-text)}
.pn-rep__calc{max-width:520px}
/* three classes: guide.css's ".pn-lpm-guide .pc-box > p{font-size:14px}" comes later in the cascade and must not shrink the sum */
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-p{margin:0 0 6px;font-size:15px;color:var(--dk-ink-2)}
.pn-rep__calc .pc-stepper button{color:var(--dk-ink)}
.pn-rep__calc .pc-stepper button:hover{border-color:transparent}
.pn-rep__calc .pc-stepper button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pn-rep__calc-add{margin:6px 0 10px;padding:0;border:0;min-width:0}
.pn-rep__calc-add legend{padding:0;margin:0 0 4px;font:600 11px/1.2 var(--font-label);letter-spacing:0;color:var(--dk-ink-2)}
.pn-rep__calc-base,.pn-rep__calc-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--dk-ink)}
.pn-rep__calc-base b,.pn-rep__calc-opt b{font:700 15px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--white)}
.pn-rep__calc-opt{cursor:pointer}
.pn-rep__calc-opt > span{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.pn-rep__calc-opt input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--pink)}
.pn-rep__calc-opt .pn-rep__lad-plus{width:auto;color:var(--pink)}
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-eq{margin:8px 0 0;font-size:15px;color:var(--dk-ink-2)}
.pn-rep__calc .pn-rep__calc-eq b{color:var(--white)}
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-res{margin:6px 0;font:700 46px/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--pink)}
.pn-rep__calc small{display:block;color:var(--dk-ink-2);font-size:12px}
.pn-mp__sec .pn-rep__calc > .pn-rep__calc-cta{margin:18px 0 0}
@media (max-width:700px){.pn-mp__sec .pn-rep__calc > .pn-rep__calc-res{font-size:37px}}
/* UX polish 23.10. (UX-004): the FAQ question was the only tap target in its box, 19–20 px tall. The summary now spans
   the box's own padding (same negative margin back), so the whole box opens it and nothing moves: closed the box keeps
   its height, open the answer keeps its 10 px (the summary's -16 bottom margin and the answer's +10 collapse to -6,
   after the 16 px padding). Every .pc-faq details carries 16/18 (components.css). */
.pc-faq details > summary{margin:-16px -18px;padding:16px 18px;border-radius:inherit}
/* ==========================================================================
   guides: the guide index /<base>/ and one guide /<base>/<slug>/ (templates/guides.php, guide.php; lib/guides.php).
   Places kit parts only (docs/design-v3-system.md §2): the money pages' reading frame (.pn-lpm-hero, .pn-lpm-guide grid,
   .pc-toc, the dark CTA .pc-box--dk, the related .pc-pbox, .pc-faq — landing.css + report.css), the cream .pc-box for
   the lead answer, the .pc-strip on a dark box for {{figure:price}}, the .pbox table rows of report.css (.pn-mp__table)
   for data and Markdown tables, callouts on the 1 px line with a 4 px role bar (tip pink, note line, warning, safety
   success), the Draft pill = .pc-badge--accent. The index rows reuse the landing's "Read up first" row language
   (numbered rows between lines, the title is the row's link, a 40 px arrow pill). Tokens only; no shadow, no rotation.
   ========================================================================== */
.pn-gd-hero{padding-top:48px}
.pn-gd-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:end}
.pn-gd-hero__copy{min-width:0;padding-bottom:56px}
.pn-gd-hero__tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pn-gd-hero__h{margin:18px 0 18px;text-wrap:balance}
.pn-gd .pn-lpm-hero:not(.pn-lpm-hero--report) .pn-gd-hero__h.pc-h-xl{font-size:var(--fs-l)}   /* visual audit VG-010: one title scale (was up to 64 px) */
.pn-gd-by{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-gd-by .pc-ico{flex:none;color:var(--pink-text)}
.pn-gd-band{margin:16px 0 0;max-width:var(--measure-lede)}
.pn-gd-pill{flex:none}
.pn-gd-lead{margin:0 0 56px;display:grid;gap:12px}
.pn-gd-lead__h{margin:0;font:600 12px/1.2 var(--font-label);letter-spacing:0;color:var(--anthracite)}
.pn-gd-lead__a{margin:0;font:600 18px/1.5 var(--font-sans);color:var(--anthracite)}
.pn-gd-lead__a a{color:inherit;text-decoration:underline;text-decoration-color:var(--pink-press);text-decoration-thickness:2px;text-underline-offset:3px}

/* the body: the report's section head type for h2 (Archivo 900 caps), prose 17 / 1.65 */
.pn-gd-body{min-width:0;max-width:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.pn-gd-body > *{margin:0;max-width:var(--measure-prose)}
.pn-gd-body > :is(.pn-mp__tw,.pn-gd-fig,.pn-mp__cap){max-width:none}
.pn-gd-body h2{margin:36px 0 0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0;color:var(--ink);overflow-wrap:break-word;scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-gd-body > h2:first-child{margin-top:0}
.pn-gd-body h3{margin:14px 0 0;font:700 19px/1.3 var(--font-sans);text-transform:none;color:var(--ink)}
.pn-gd-body :is(ul,ol){padding:0;list-style:none;display:grid;gap:8px}
.pn-gd-body :is(ul,ol) > li{position:relative;padding-left:22px}
.pn-gd-body ul > li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pn-gd-body ol{counter-reset:pn-gd}
.pn-gd-body ol > li{padding-left:36px;counter-increment:pn-gd}
.pn-gd-body ol > li::before{content:counter(pn-gd);position:absolute;left:0;top:-.05em;width:26px;text-align:center;font:700 20px/1 var(--font-display);color:var(--pink-glyph)}
.pn-gd-body a:not([class]),.pn-gd-faq__a a:not([class]){color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-gd-num{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-gd-table--text th,.pn-gd-table--text td{text-align:left;white-space:normal;vertical-align:top}
.pn-gd-table--text thead th{white-space:nowrap}

/* callouts: paper, the 1 px line, a 4 px role bar on the left, the label in kicker type */
.pn-gd-callout{display:grid;gap:10px;padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:var(--r-rules);background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font-sans)}
.pn-gd-callout > :is(p,ul,ol){margin:0}
.pn-gd-callout--note{border-left-color:var(--ink-2)}
.pn-gd-callout--warning{border-left-color:var(--warning)}
.pn-gd-callout--safety{border-left-color:var(--success)}
.pn-gd-callout__k{display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--font-label);letter-spacing:0}
.pn-gd-callout__k .pc-ico{flex:none;width:18px;height:18px}
.pn-gd-callout--tip .pn-gd-callout__k .pc-ico{color:var(--pink-text)}
.pn-gd-callout--warning .pn-gd-callout__k .pc-ico{color:var(--warning)}
.pn-gd-callout--safety .pn-gd-callout__k .pc-ico{color:var(--success)}

/* {{figure:price}}: the mockup .worth strip on the dark box */
.pn-gd-fig{margin:8px 0;padding:22px 26px 24px;overflow:hidden}
.pn-gd-fig__strip{margin:26px 0 8px}
.pn-gd-fig__cap{margin:0;max-width:var(--measure-prose);font:400 14px/1.5 var(--font-sans);color:var(--dk-ink-2)}

/* the TOC rides along on wide screens */
@media (min-width:1101px){.pn-gd-toc{position:sticky;top:calc(var(--sticky-top) + 12px);align-self:start}}
.pn-gd-faq__a{display:grid;gap:10px;margin-top:10px}
.pn-gd-faq__a > *{margin:0;max-width:720px;color:var(--ink-2)}

/* the index: numbered rows between lines (the landing's "Read up first" rows) */
.pn-gdx__head{padding-bottom:56px}
.pn-gdx__head .pn-lpm-hero__lede{margin:0}
.pn-gdx__rows{list-style:none;margin:0;padding:0;counter-reset:gdx;max-width:960px}
.pn-gdx__row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 40px;align-items:center;column-gap:20px;padding:24px 4px;border-bottom:1px solid var(--line);counter-increment:gdx}
.pn-gdx__row:first-child{border-top:1px solid var(--line)}
.pn-gdx__row::before{content:counter(gdx,decimal-leading-zero);align-self:start;padding-top:calc(clamp(24px,2.4vw,32px) * .49 - 6px);font:800 13px/1 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--pink-text)}   /* polish 02.10.: on the title's first line (was centred on the whole row); text pink (was 2.3:1 pink-press) */
.pn-gdx__body{min-width:0;display:grid;gap:8px;justify-items:start}
.pn-gdx__h{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);text-wrap:balance}
.pn-gdx__h a{color:var(--ink);text-decoration:none}
.pn-gdx__h a::after{content:"";position:absolute;inset:0;z-index:1}
.pn-gdx__h a:focus-visible{outline:none}
.pn-gdx__row:has(.pn-gdx__h a:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-gdx__p{margin:0;max-width:62ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* 02.10. guest grounding: from 1000 a row runs the full 1168 column (owner: no empty right half): the title (+ Draft
   pill) left, the lead right on its own column, the arrow pill on the column's edge. */
@media (min-width:1000px){
  .pn-gdx__rows{max-width:none}
  .pn-gdx__body{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;row-gap:8px;align-items:start}
  .pn-gdx__body > .pn-gdx__h,.pn-gdx__body > .pn-gd-pill{grid-column:1}
  .pn-gdx__body > .pn-gdx__p{grid-column:2;grid-row:1 / span 2}
}
.pn-gdx__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--btn-line-edge);font:700 18px/1 var(--font-sans);transition:background-color var(--dur-fast),color var(--dur-fast)}   /* polish 02.10.: the ring is the line button's edge (ink on light, grey 50 % in dark, never a white ring) */
/* polish 02.10.: phones = the landing's "Read up first" row: the number and the arrow on one top line, the title, pill
   and lead below on the full width (the 44 px number column took a sixth of a 390 screen, the lead ran 40 % narrower) */
@media (max-width:700px){
  .pn-gdx__row{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"n go" "b b";align-items:center;row-gap:12px;padding:22px 0}
  .pn-gdx__row::before{grid-area:n;align-self:center;padding-top:0}
  .pn-gdx__body{grid-area:b}
  .pn-gdx__go{grid-area:go;width:36px;height:36px;font-size:16px}
}
.pn-gdx__row:hover .pn-gdx__go{background:var(--ink);color:var(--bg)}
.pn-gdx__row:hover .pn-gdx__h a{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}

/* links into the guides from other pages: the hub side column, the landing's "Read up first" with a fourth row */
/* owner 12.10. evening ("da ist zuviel luft"): 45px lay between the small title and the first row; the title's own margins go, the rows are a little tighter */
.pn-gd-hubbox .pc-pbox__t{margin:0 0 2px}
.pn-gd-hubbox ul{list-style:none;margin:0 0 10px;padding:0}
.pn-gd-hubbox li{border-bottom:1px dashed var(--line)}
.pn-gd-hubbox li a{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font:700 14px/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
.pn-gd-hubbox li a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width:1101px){.pn-lp-mgrid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (min-width:701px) and (max-width:1100px){
  .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
}
@media (max-width:700px){
  .pn-gd-hero{padding-top:32px}
  .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr);gap:0}
  .pn-gd-hero__copy{padding-bottom:28px}
  .pn-gd .pn-lpm-hero:not(.pn-lpm-hero--report) .pn-gd-hero__h.pc-h-xl{font-size:var(--fs-l)}
  .pn-gd-lead{margin-bottom:40px}
  .pn-gd-lead__a{font-size:16.5px}
  .pn-gd-body h2{font-size:20px}
  .pn-gd-toc:empty{display:none}
  .pn-gd-fig{padding:18px}
  .pn-gdx__head{padding-bottom:32px}
  .pn-gdx__row{column-gap:12px}
}

/* the sources box (front matter cite:): a dashed list at the end of the body, the label is the link */
.pn-gd-sources{display:grid;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.pn-gd-body .pn-gd-sources__h{margin:0;font:600 12px/1.2 var(--font-label);letter-spacing:0}
.pn-gd-body .pn-gd-sources ol{margin:0;padding:0;list-style:none;display:grid;gap:0}
.pn-gd-body .pn-gd-sources li{padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px}
.pn-gd-body .pn-gd-sources li::before{content:none}

/* legalpages: legacy's help / FAQ, terms and privacy (templates/legal_page.php) in this frame. The text column stacks
   legacy's prose (.pn-gd-body type) and the FAQ accordion (.pc-faq, the money pages' +/− summary at the question size of
   the mobile FAQ); the question is the summary's h2 in the summary's type. Tokens only. */
.pn-lg-main{min-width:0;display:grid;gap:28px;align-content:start}
.pn-lg-faq{max-width:var(--measure-prose)}
.pn-lg-faq details:first-child{border-top:1px solid var(--line)}
.pn-lg-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:22px;line-height:1.05}
.pn-lg-faq summary::-webkit-details-marker{display:none}
.pn-lg-faq summary::after{content:"+";flex:none;font-family:var(--font-sans);font-weight:700}
.pn-lg-faq details[open] summary::after{content:"−"}
.pn-lg-faq summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
.pn-lg-faq__q{margin:0;min-width:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;overflow-wrap:break-word;scroll-margin-top:calc(var(--sticky-top) + 12px)}
.pn-lg-faq__a{margin-top:12px}
.pn-lg-faq__a > *{color:var(--ink-2)}
.pn-lg-body hr{width:100%;height:0;border:0;border-top:1px solid var(--line)}
.pn-lg-body :is(table){border-collapse:collapse}
.pn-lg-body :is(th,td){padding:6px 10px;border:1px solid var(--line);text-align:left;vertical-align:top}
/* "How creators work" (owner 27.10., lib/creator_voices.php): each creator's excerpt as a quiet tonal card, her name under it */
.pn-lg-body blockquote{margin:12px 0;padding:14px 18px;border-radius:var(--r-pcard);background:var(--sunken)}
.pn-lg-body blockquote p{margin:0;max-width:var(--measure-prose);font:400 16px/1.55 var(--font-sans);color:var(--ink)}
.pn-lg-body blockquote p + p{margin-top:8px;font:600 14px/1.3 var(--font-sans);color:var(--ink-2)}
@media (max-width:700px){.pn-lg-faq summary{font-size:19px}}
/* L3 (owner 08.10., "no legacy anywhere", lib/legacy_pages.php): legacy's editorial pages keep their own photos and YouTube
   embeds in the legal pages' frame; the contact / content-complaint forms and /unsubscribe use the same frame. */
.pn-l3-img{display:block;width:auto;max-width:100%;height:auto;margin:8px 0;border-radius:var(--r-pcard)}
.pn-l3-video{display:block;position:relative;width:100%;max-width:var(--measure-prose);aspect-ratio:16/9;margin:8px 0;border-radius:var(--r-pcard);overflow:hidden;background:var(--sunken)}
.pn-l3-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pn-l3c__main{display:grid;gap:24px;align-content:start;max-width:var(--measure-prose)}
.pn-l3c__form{display:grid;gap:20px}
.pn-l3c__form[hidden],.pn-l3c__done[hidden]{display:none}
.pn-l3c__seg{flex-direction:column;align-items:stretch}
.pn-l3c__seg > a{justify-content:flex-start;min-height:40px;background:var(--t-tint);border-color:transparent;color:var(--ink-2)}
.pn-l3c__seg > a[aria-current="page"]{background:var(--btn-ink);border-color:var(--line);color:var(--on-btn-ink)}
.pn-l3c__coderow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pn-l3c__img{display:block;width:120px;height:40px;border-radius:var(--r-chip);border:1px solid var(--line)}
.pn-l3c__codein{width:9em;flex:0 0 auto}
.pn-l3c__send{justify-self:start}
.pn-l3c__done{display:grid;gap:12px;padding:20px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-l3c__done:focus{outline:none}
.pn-l3c__done p{margin:0;color:var(--ink-2)}
.pn-l3c__done-h{display:flex;align-items:center;gap:10px;margin:0;font:700 18px/1.3 var(--font-sans)}
.pn-l3c__done-h .pc-ico{flex:none;color:var(--accent)}
.pn-l3m__cta{margin-top:4px}
@media (max-width:700px){
  .pn-l3c__seg{flex-direction:row;flex-wrap:wrap}
  .pn-l3c__seg > a{flex:1 1 auto;justify-content:center;min-height:44px}
  .pn-l3c__send{justify-self:stretch}
  .pn-l3c__coderow .pc-btn{min-height:44px}
}
/* affiliate (owner 09.10., lib/affiliate_join.php): CCBill's signup form in the site's look — its tables become a stack
   (label over field) on phones and a two-column grid on wide screens; only looks change, never a field. Apply now. */
.pn-affj{max-width:var(--measure-prose)}
/* owner 14.10.: our own sign-up forms for CCBill (templates/partners.php .pn-affown) */
.pn-affown{display:grid;gap:16px;max-width:var(--measure-prose)}
.pn-affown__new{display:grid;gap:10px;padding:20px;border-radius:20px;background:var(--surface-2)}
.pn-affown__new p,.pn-affown__login p{margin:0;color:var(--ink-2);font:400 15px/1.5 var(--font-sans)}
.pn-affown__h{font:700 18px/1.25 var(--font-sans)!important;color:var(--ink)!important}
.pn-affown__fine{display:flex;gap:6px;align-items:center;font-size:13px!important}
.pn-affown__has{padding:4px 0}
.pn-affown__has summary{cursor:pointer;font:600 15px/1.4 var(--font-sans);color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-affown__login{display:grid;gap:12px;margin-top:12px;max-width:360px}
.pn-affj fieldset,fieldset.pn-affj{border:0;margin:0;padding:0;min-width:0}
.pn-affj__form{display:grid;gap:16px}
.pn-affj table,.pn-affj tbody,.pn-affj thead,.pn-affj tfoot{display:block;width:100%;border:0}
.pn-affj tr{display:grid;gap:8px;padding:0 0 14px}
.pn-affj td,.pn-affj th{display:block;padding:0;border:0;text-align:left;font:400 15px/1.45 var(--font-sans);color:var(--ink)}
.pn-affj tr > td:first-child:not(:last-child){font:600 13px/1.2 var(--font-label);color:var(--ink)}
.pn-affj p,.pn-affj__h{margin:0;color:var(--ink-2);font:400 14px/1.5 var(--font-sans)}
.pn-affj__h{font-weight:700;color:var(--ink);font-size:16px}
.pn-affj .pc-input{max-width:100%}
.pn-affj__check{width:20px;height:20px;margin:0 8px 0 0;vertical-align:middle;accent-color:var(--accent)}
.pn-affj a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-affj__send{justify-self:start;margin-top:4px}
.pn-affj input[type=submit],.pn-affj input[type=image]{cursor:pointer}
@media (min-width:701px){
  .pn-affj tr{grid-template-columns:minmax(140px,220px) minmax(0,1fr);align-items:center;column-gap:16px}
  .pn-affj td[colspan],.pn-affj tr > td:only-child{grid-column:1/-1}
}
.pn-affap{display:grid;gap:18px;max-width:var(--measure-prose)}
.pn-affap__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pn-affap__consent{display:flex;gap:12px;align-items:flex-start;font:400 14px/1.5 var(--font-sans);color:var(--ink-2);min-height:44px}
.pn-affap__consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.pn-affap__consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pn-affap__send{justify-self:start}
.pn-affap__done{display:grid;gap:10px;padding:20px;border:1px solid var(--line);border-radius:var(--r-pcard);max-width:var(--measure-prose)}
.pn-affap__done:focus{outline:none}
.pn-affap__done p{margin:0;color:var(--ink-2)}
.pn-affap__done-h{display:flex;align-items:center;gap:10px;font:700 18px/1.3 var(--font-sans);color:var(--ink) !important}
.pn-affap__done-h .pc-ico{flex:none;color:var(--accent)}
@media (max-width:700px){.pn-affap__send,.pn-affj__send{justify-self:stretch;min-height:44px}}
/* affiliate (owner 09.10., lib/affiliate_view.php): the stats module — the partner's dashboard and /pnew-admin/partners/. */
.pn-afs{display:grid;gap:16px;min-width:0}
.pn-afs__range{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end}
.pn-afs__seg{display:flex;flex-wrap:wrap;gap:6px}
.pn-afs__seg a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-chip);font:600 13px/1 var(--font-sans);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pn-afs__seg a:hover{color:var(--ink);border-color:transparent;background:var(--t-tint-2)}
.pn-afs__seg a[aria-current="true"]{background:var(--btn-ink);border-color:var(--btn-ink);color:var(--on-btn-ink)}
.pn-afs__seg--sm a{min-height:34px;padding:0 10px}
.pn-afs__custom{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.pn-afs__custom label{display:grid;gap:6px;font:600 13px/1.2 var(--font-label);color:var(--ink)}
.pn-afs__custom .pc-input{width:auto;min-width:150px}
.pn-afs__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pn-afs__chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border-radius:var(--r-chip);background:var(--accent-soft);color:var(--ink);font:600 13px/1 var(--font-sans);text-decoration:none}
.pn-afs__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pn-afs__kpi{display:grid;gap:4px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-pcard);min-width:0}
.pn-afs__kl{font:600 12px/1.2 var(--font-label);color:var(--ink-2)}
.pn-afs__kpi b{font:700 22px/1.15 var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pn-afs__kpi small{font:400 12px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-afs__kpi--revenue b,.pn-afs__kpi--est b{color:var(--accent-text)}
.pn-afs__empty{margin:0;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-pcard);color:var(--ink-2);font:400 14px/1.45 var(--font-sans)}
.pn-afs__panel{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-pcard);min-width:0}
.pn-afs__panel h3{margin:0;font:700 16px/1.3 var(--font-sans);color:var(--ink)}
.pn-afs__ph{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.pn-afs__note,.pn-afs__csv{margin:0;font:400 12px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-afs__csv a{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--ink);font-weight:600;text-decoration:none}
.pn-afch{display:block;width:100%;height:auto;max-height:240px}
.pn-afch__bar{fill:var(--accent)}
.pn-afch__bar:hover{fill:var(--accent-press)}
.pn-afch__base{stroke:var(--t-hair,var(--line));stroke-width:1}
.pn-afch__lbl{fill:var(--ink-2);font:400 12px var(--font-sans)}
.pn-afs__funnel{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pn-afs__funnel li{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr) auto 64px;gap:10px;align-items:center;font:400 13px/1.3 var(--font-sans);color:var(--ink)}
.pn-afs__fb{display:block;height:10px;border-radius:999px;background:var(--sunken);overflow:hidden}
.pn-afs__fb i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.pn-afs__funnel b{font-variant-numeric:tabular-nums}
.pn-afs__funnel small{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.pn-afs__tbl{display:block;max-width:100%}
.pn-afs__tbl > * + *{margin-top:10px}
.pn-afs__tbl summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;cursor:pointer;list-style:none}
.pn-afs__tbl summary::-webkit-details-marker{display:none}
.pn-afs__tbl summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin:0 6px 4px auto}
.pn-afs__tbl[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.pn-afs__n{font:600 12px/1 var(--font-sans);color:var(--ink-2)}
.pn-afs__tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-chip)}
.pn-afs__tw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pn-afs__table{width:100%;border-collapse:collapse;font:400 13px/1.35 var(--font-sans);font-variant-numeric:tabular-nums}
.pn-afs__table th,.pn-afs__table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;color:var(--ink)}
.pn-afs__table thead th{font:600 12px/1.2 var(--font-label);color:var(--ink-2);background:var(--sunken)}
.pn-afs__table th:first-child{text-align:left;position:sticky;left:0;background:var(--bg)}
.pn-afs__table thead th:first-child{background:var(--sunken)}
.pn-afs__table tbody tr:last-child > *{border-bottom:0}
.pn-afs__table a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
@media (min-width:701px){.pn-afs__kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1101px){.pn-afs__kpis{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:700px){
  .pn-afs__seg a{min-height:44px}
  .pn-afs__custom{width:100%}
  .pn-afs__custom label{flex:1 1 40%}
  .pn-afs__custom .pc-input{width:100%;min-width:0}
  .pn-afs__funnel li{grid-template-columns:minmax(80px,110px) minmax(0,1fr) auto;row-gap:2px}
  .pn-afs__funnel small{grid-column:3}
}
/* affiliate (owner 09.10.): the partner's dashboard (templates/partners_stats.php). One pink key: "Copy link". */
.pn-afd__wrap{display:grid;gap:28px;padding-top:8px;padding-bottom:48px}
.pn-afd__nav{display:flex;gap:6px;overflow-x:auto;padding:8px 0;position:sticky;top:var(--header-h);z-index:2;background:var(--bg);border-bottom:1px solid var(--line)}
.pn-afd__nav a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-chip);font:600 14px/1 var(--font-sans);color:var(--ink-2);text-decoration:none}
.pn-afd__nav a:hover{color:var(--ink);background:var(--sunken)}
.pn-afd__flash{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:var(--r-pcard);border:1px solid var(--line);font:400 14px/1.45 var(--font-sans);color:var(--ink)}
.pn-afd__flash .pc-ico{flex:none}
.pn-afd__flash.is-ok .pc-ico{color:var(--accent)}
.pn-afd__flash.is-err{border-color:transparent;background:var(--t-danger,var(--danger-soft))}
.pn-afd__flash.is-err .pc-ico{color:var(--danger)}
.pn-afd__flash.is-info{background:var(--sunken)}
.pn-afd__start,.pn-afd__sec{display:grid;gap:14px;scroll-margin-top:calc(var(--header-h) + 64px);min-width:0}
.pn-afd__start{padding:18px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-afd__start h2,.pn-afd__sec h2{margin:0;font:700 22px/1.25 var(--font-sans);color:var(--ink)}
.pn-afd__h3{margin:8px 0 0;font:700 16px/1.3 var(--font-sans);color:var(--ink)}
.pn-afd__steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:afd}
.pn-afd__steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;counter-increment:afd;font:400 14px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-afd__steps li::before{content:counter(afd);grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--sunken);color:var(--ink);font:700 13px/1 var(--font-sans)}
.pn-afd__steps b{color:var(--ink);font-weight:700}
.pn-afd__money{display:flex;gap:10px;align-items:flex-start;margin:0;font:400 14px/1.45 var(--font-sans);color:var(--ink)}
.pn-afd__money .pc-ico{flex:none;color:var(--accent)}
.pn-afd__money a,.pn-afd__clink{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pn-afd__p{margin:0;max-width:var(--measure-prose);font:400 15px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-afd__note,.pn-afd__small{margin:0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-afd__builder,.pn-afd__bfilter,.pn-afd__cadd,.pn-afd__pbform{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.pn-afd__brow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pn-afd__out{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-afd__code{font:400 13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:auto;resize:vertical;word-break:break-all}
.pn-afd__banners{display:grid;gap:14px;margin:0;padding:0;list-style:none;grid-template-columns:minmax(0,1fr);align-items:start}
.pn-afd__banner{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-pcard);min-width:0}
.pn-afd__bimg{display:grid;place-items:center;padding:10px;border-radius:var(--r-chip);background:var(--sunken);overflow:hidden}
.pn-afd__bimg img{display:block;max-width:100%;height:auto}
.pn-afd__bmeta{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-afd__bmeta b{color:var(--ink)}
.pn-afd__banner .pc-btn{justify-self:start}
.pn-afd__camps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pn-afd__camp{padding:12px;border:1px solid var(--line);border-radius:var(--r-pcard)}
.pn-afd__camp.is-archived{opacity:.65}
.pn-afd__crow{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.pn-afd__crow .pc-input{flex:1 1 200px;width:auto}
.pn-afd__slug{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2)}
.pn-afd__clink{font-size:14px;min-height:40px;display:inline-flex;align-items:center}
.pn-afd__macros{display:grid;gap:6px 16px;margin:0;grid-template-columns:minmax(0,1fr)}
.pn-afd__macros div{display:flex;gap:10px;align-items:baseline;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-afd__macros dt{flex:none;min-width:96px}
.pn-afd__macros code{color:var(--ink);font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.pn-afd__macros dd{margin:0}
.pn-afd__pburls{display:grid;gap:6px;margin:0;padding:0;list-style:none;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-afd__pburls code{display:block;overflow-wrap:anywhere;color:var(--ink)}
.pn-afd__faq{display:grid;gap:0;max-width:var(--measure-prose);border-top:1px solid var(--line)}
.pn-afd__faq details{border-bottom:1px solid var(--line)}
.pn-afd__faq summary{display:flex;align-items:center;min-height:48px;padding:10px 0;cursor:pointer;font:600 16px/1.35 var(--font-sans);color:var(--ink)}
.pn-afd__faq p{margin:0 0 14px;font:400 15px/1.55 var(--font-sans);color:var(--ink-2)}
@media (min-width:701px){
  .pn-afd__builder{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
  .pn-afd__builder .pn-afd__brow{grid-column:1/-1}
  .pn-afd__bfilter{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
  .pn-afd__cadd{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:start}
  .pn-afd__cadd .pn-afd__brow{padding-top:25px}
  .pn-afd__banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-afd__macros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1101px){.pn-afd__banners{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){
  .pn-afd__brow .pc-btn,.pn-afd__banner .pc-btn{min-height:44px}
  .pn-afd__brow > .pc-btn{flex:1 1 auto}
  .pn-afd__crow .pc-btn{min-height:44px}
}

/* ==========================================================================
   One editorial frame (art director pass 27.10., owner: "unterschiedliche Schriftgrößen, Grafiken reißen Lücken, Kraut
   und Rüben"). Every .pn-gd page (about, safety, rules, FAQ, imprint, terms, privacy, help, press, contact, the guides and
   the two community guides) shares: a one-column hero when it holds no art (no empty 400 px art slot), one head stack, one
   type scale (--fs-ed-*), one block rhythm (grid gap --ed-gap, a heading adds --ed-sec; the prose margins of guest.css no
   longer add up inside the grid), a text column on the reading measure flush with the h1, and the side column (TOC on
   top, the related box sticky under it) on the right from 1101; one column below that.
   ========================================================================== */
/* hero */
.pn-gd .pn-gd-hero__wrap:not(:has(> :nth-child(2))){grid-template-columns:minmax(0,1fr)}
.pn-gd .pn-gd-hero__copy{padding-bottom:48px}
.pn-gd .pn-lpm-hero:not(.pn-lpm-hero--report) .pn-gd-hero__h{max-width:24ch;margin:18px 0}
.pn-gd .pn-lpm-hero__lede{margin:0;max-width:var(--measure-lede);font-size:var(--fs-ed-lede);line-height:1.5}
.pn-gd .pn-lpm-guide{padding-top:56px}
@media (max-width:700px){
  .pn-gd .pn-gd-hero__copy{padding-bottom:32px}
  .pn-gd .pn-lpm-guide{padding:40px 0 calc(60px + var(--dock))}
  body:has(.pn-gd) .pn-main{padding-bottom:0}   /* the panel runs to the footer: no strip of page ground between them */
}

/* the body: one size, one rhythm */
.pn-gd .pn-gd-body{gap:var(--ed-gap);font-size:var(--fs-ed-body);line-height:1.65}
.pn-gd .pn-gd-body.pn-prose > *,.pn-gd .pn-gd-body.pn-prose li{margin:0}
.pn-gd .pn-gd-body.pn-prose > :is(h2,h3){margin-top:var(--ed-sec)}
.pn-gd .pn-gd-body.pn-prose > :is(h2,h3):first-child{margin-top:0}
.pn-gd .pn-gd-body.pn-prose h2{font:700 var(--fs-ed-h2)/1.2 var(--font-display);letter-spacing:var(--tr-head)}
.pn-gd .pn-gd-body.pn-prose h3{font:700 var(--fs-ed-h3)/1.3 var(--font-display);letter-spacing:var(--tr-head)}
.pn-gd .pn-gd-body.pn-prose > h3{margin-top:calc(var(--ed-sec) / 2)}
.pn-gd .pn-gd-body.pn-prose strong{font-weight:700}
.pn-gd .pn-gd-body :is(ul,ol){gap:10px}
/* numbered steps: the community guide's card list for every page (was a bare 20 px numeral hanging above the line) */
.pn-gd .pn-gd-body:not(.pn-lg-body) > ol > li{padding:14px 16px 14px 56px;border-radius:var(--r-tile);background:var(--sunken);line-height:1.5}
.pn-gd .pn-gd-body:not(.pn-lg-body) > ol > li::before{content:counter(pn-gd,decimal-leading-zero);left:16px;top:14px;width:auto;text-align:left;font:600 15px/1.5 var(--font-label);color:var(--pink-glyph)}
.pn-gd .pn-gd-callout{font-size:var(--fs-ed-body)}
.pn-gd .pn-gd-callout p{font-weight:400}

/* the side column */
.pn-gd .pn-lpm-guide__grid > div.pn-gd-toc:not(:has(*)){display:none}   /* the FAQ / guide placeholder held an empty column */
.pn-gd .pc-toc li a::before{color:var(--pink-glyph)}
.pn-gd .pn-lpm-rail .pc-pbox{padding:16px 18px}
.pn-gd .pn-lpm-rail .pc-pbox__t{font-size:12px}
.pn-gd .pn-lpm-rail .pc-pbox li a{font-weight:600;min-height:40px;padding-block:10px;align-items:center}
@media (min-width:1101px){
  .pn-gd .pn-lpm-guide__grid{grid-template-columns:minmax(0,var(--measure-prose)) 300px;grid-template-rows:auto 1fr;justify-content:space-between;column-gap:48px;row-gap:18px}
  .pn-gd .pn-lpm-guide__grid > *{grid-column:1;grid-row:1 / span 2}
  .pn-gd .pn-lpm-guide__grid > .pn-gd-toc{grid-column:2;grid-row:1;position:static}
  .pn-gd .pn-lpm-guide__grid > .pn-gd-rail{grid-column:2;grid-row:2;position:sticky;top:calc(var(--sticky-top) + 12px);align-self:start}
}
@media (max-width:1100px){
  .pn-gd .pn-lpm-guide__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .pn-gd .pn-lpm-guide__grid > *{grid-column:auto;max-width:var(--measure-prose)}
}

/* FAQ (legal_page kind faq): questions on the h3 step, wrapped evenly, answers in body ink; no straight line on a round card */
.pn-gd .pn-lg-faq summary{font:700 var(--fs-ed-h3)/1.3 var(--font-display);letter-spacing:var(--tr-head)}
.pn-gd .pn-lg-faq__q{text-wrap:pretty}
.pn-gd .pn-lg-faq details:first-child{border-top:0}
.pn-gd .pn-lg-faq__a > *,.pn-gd .pn-gd-faq__a > *{color:var(--ink)}
.pn-gd .pn-lg-body hr{border-top-color:var(--mline)}

/* guides (art director B, 27.10.) */
.pn-gd .pn-gd-hero__wrap{align-items:start}   /* B-005: crumbs, kicker and h1 at one height on every guide (was bottom-aligned to the answer box) */
@media (min-width:701px) and (max-width:1100px){.pn-gd:not(.pn-mpg) .pn-gd-hero__wrap{grid-template-columns:minmax(0,1fr)}.pn-gd .pn-gd-lead{max-width:var(--measure-prose)}}   /* B-007: es/it/fr h1s ran 5 lines next to the box */
.pn-gd .pn-gd-lead{border-radius:var(--r-tile)}
.pn-gd .pn-gd-lead__a{font-weight:400}   /* B-027 */
[data-theme="dark"] .pn-gd .pn-gd-lead{background:var(--surface);box-shadow:inset 4px 0 0 var(--pink)}
[data-theme="dark"] .pn-gd .pn-gd-lead :is(.pn-gd-lead__h,.pn-gd-lead__a){color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-gd .pn-gd-lead{background:var(--surface);box-shadow:inset 4px 0 0 var(--pink)}:root:not([data-theme="light"]) .pn-gd .pn-gd-lead :is(.pn-gd-lead__h,.pn-gd-lead__a){color:var(--ink)}}   /* B-026: no cream slab in the dark hero */
[data-theme="dark"] .pn-gd .pn-lpm-guide{--dkbox:var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-gd .pn-lpm-guide{--dkbox:var(--bg)}}   /* B-001/002: the price figure and the rail call were the panel's own colour */
.pn-gd .pn-lpm-rail .pc-box{padding:18px;border-radius:var(--r-tile)}
.pn-gd .pn-lpm-rail .pc-box .pc-btn{font-size:var(--btn-fs)}   /* B-044 */
.pn-gd .pn-lpm-rail .pc-pbox ul{margin-top:8px}
/* callouts: no bent 4 px border on a round card; a well like the TOC, the role bar inset */
.pn-gd .pn-gd-callout{border:0;border-radius:var(--r-tile);background:var(--sunken);box-shadow:inset 4px 0 0 var(--pink);padding:16px 20px}
.pn-gd .pn-gd-callout--note{box-shadow:inset 4px 0 0 var(--ink-2)}
.pn-gd .pn-gd-callout--warning{box-shadow:inset 4px 0 0 var(--warning)}
.pn-gd .pn-gd-callout--safety{box-shadow:inset 4px 0 0 var(--success)}
/* tables: hairline rows (the dashed line went transparent), cells that fit the measure, the fade always on phones */
.pn-gd .pn-mp__table :is(th,td){border-bottom:0;box-shadow:inset 0 -1px 0 var(--t-hair,var(--mline));padding:10px 8px}
.pn-gd .pn-mp__table .is-med{font:700 14px/1.35 var(--font-sans)}   /* B-037 */
.pn-gd .pn-gd-fig__cap{font-size:13px;color:var(--ink-2)}
@media (max-width:700px){
  .pn-gd .pn-mp__tw{-webkit-mask-image:linear-gradient(to right,black calc(100% - 28px),transparent);mask-image:linear-gradient(to right,black calc(100% - 28px),transparent)}
  .pn-gd .pn-mp__table thead th{font-size:11px;padding-block:6px}
  .pn-gd .pn-gd-lead{margin-bottom:28px}
}
/* sources: quiet references, a hairline between */
.pn-gd .pn-gd-sources{border-top:0;box-shadow:inset 0 1px 0 var(--t-hair,var(--mline))}
.pn-gd .pn-gd-body .pn-gd-sources li{border-bottom:0;padding:8px 0;font-size:var(--fs-sub);text-wrap:pretty}
.pn-gd .pn-gd-body .pn-gd-sources li + li{box-shadow:inset 0 1px 0 var(--t-hair,var(--mline))}
.pn-gd .pn-gd-sources a{font-weight:400;text-decoration-thickness:1px}
/* the guide FAQ: in the text column, the h2 / h3 steps of the body */
.pn-gd .pn-gd-faq{padding:0 0 72px;background:var(--surface)}
.pn-gd .pn-gd-faq .pn-lpm-faq__h{margin:0 0 18px;font:700 var(--fs-ed-h2)/1.2 var(--font-display);letter-spacing:var(--tr-head)}
.pn-gd .pn-gd-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font:700 var(--fs-ed-h3)/1.3 var(--font-display)}
.pn-gd .pn-gd-faq .pn-lpm-faq__q{font:inherit;text-wrap:pretty}
.pn-gd .pn-gd-faq details{max-width:var(--measure-prose);background:var(--sunken)}
.pn-gd .pn-gd-faq__a > *{max-width:none;font-size:var(--fs-ed-body)}
@media (max-width:700px){.pn-gd .pn-gd-faq{padding-bottom:calc(48px + var(--dock))}}
/* the index */
.pn-gdx__row{border-bottom:0}
.pn-gdx__row + .pn-gdx__row{box-shadow:inset 0 1px 0 var(--t-hair,var(--mline))}
.pn-gdx__row::before{font:600 12px/1 var(--font-label);letter-spacing:0;color:var(--pink-glyph)}   /* B-017: the TOC's numeral */
.pn-gdx__h{font-size:var(--fs-ed-h3);text-wrap:pretty}
.pn-gdx__go{align-self:start}
.pn-gdx .pn-lpm-guide{padding-top:40px}
@media (min-width:1000px){.pn-gdx__body{grid-template-columns:minmax(0,4fr) minmax(0,5fr);column-gap:40px}}
@media (min-width:701px) and (max-width:999px){.pn-gdx__p{max-width:none}}
.pn-draftband{font-weight:600}
/* B-025 / A-042: on phones the TOC put up to 480 px of links before the first sentence: compact rows (36 px) */
@media (max-width:700px){
  .pn-gd .pc-toc{padding:12px 16px}
  .pn-gd .pc-toc ol{margin-top:6px}
  .pn-gd .pc-toc li a{min-height:36px;padding:7px 0;font-size:14px}
}

/* The language guides in the frame (art director pass 27.10.: es / it / fr / pt buy and sell ran the old three columns,
   text 492 px wide and 328 px right of the h1, heads 21, text 14 / 15 / 16). templates/money.php carries .pn-gd now; its
   sections (money_section.php) take the editorial scale: one gap inside a section, a head adds --ed-sec, the steps are the
   English guides' numbered cards, the quotes and notes sit on the sunken tile like the callouts. */
.pn-gd .pn-lpm-body{gap:calc(var(--ed-sec) + var(--ed-gap))}
.pn-gd .pn-mp__sec{gap:var(--ed-gap);font-size:var(--fs-ed-body);line-height:1.65}
.pn-gd .pn-mp__sec :is(p,.pn-mp__list,.pn-mp__answer){max-width:none}
.pn-gd .pn-mp__h{font:700 var(--fs-ed-h2)/1.2 var(--font-display);letter-spacing:var(--tr-head)}
.pn-gd .pn-mp__q{margin:calc(var(--ed-sec) / 2) 0 0;font:700 var(--fs-ed-h3)/1.3 var(--font-display);letter-spacing:var(--tr-head)}
.pn-gd .pn-mp__note{font-size:var(--fs-sub);line-height:1.5}
.pn-gd .pn-mp__list{gap:10px}
.pn-gd .pn-mp__list--steps > li{min-height:0;padding:14px 16px 14px 56px;border-radius:var(--r-tile);background:var(--sunken);line-height:1.5}
.pn-gd .pn-mp__list--steps > li::before{left:16px;top:14px;width:auto;font:600 15px/1.5 var(--font-label);color:var(--pink-glyph)}
.pn-gd .pn-mp__quotes{grid-template-columns:minmax(0,1fr);gap:10px}
.pn-gd .pn-mp__quote{padding:16px 20px;border:0;border-radius:var(--r-tile);background:var(--sunken)}
.pn-gd .pn-mp__quote blockquote{font-size:var(--fs-ed-body);line-height:1.5}
.pn-gd .pn-mp__links .pc-more{font-size:var(--fs-ed-body)}
.pn-gd .pn-mp__ask{font-size:var(--fs-sub)}
/* UX polish 23.10. (UX-007/009/014, profile CLS): the metric-matched stand-ins --hand names ("Caveat", "Caveat FA",
   "Caveat FR"). Added 01.10. (ae0a1fdb) straight into the built pnew.css, so the next build dropped them and the note
   fell back to cursive (22 % wider): the profile's note wrapped to two lines, then unwrapped when Caveat came, and
   everything under it jumped 26 px. A local sans scaled to Caveat's width, with Caveat's ascent and descent (divided by
   size-adjust), keeps the line and its box until the swap. fonts.css is generated (tools/fetch_fonts.sh), so they live here. */
@font-face{font-family:'Caveat FA';font-style:normal;font-weight:600 700;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:76.3%;ascent-override:125.8%;descent-override:39.3%;line-gap-override:0%}   /* measured 23.10. (Chrome, Arial): width 54.55 = Caveat's over six notes */
@font-face{font-family:'Caveat FR';font-style:normal;font-weight:600 700;src:local('Roboto'),local('DejaVu Sans');size-adjust:80%;ascent-override:120%;descent-override:37.5%;line-gap-override:0%}   /* Android: 80 % as measured 01.10. */
/* ==========================================================================
   Detail pages (detail slice v3): ad (members + guests), seller profile (members + guests), members-only.
   docs/design-v3-system.md §4.4. This file only PLACES kit components; every look (pill, button, label, panel,
   card, avatar, price, kicker, note) comes from components.css / app.css. Scope: .pn-dt (the page root).
   Some JS hooks keep old class names that market.css / profile.css / guest_detail.css still style (.pn-gal*,
   .pn-ad__cta, .pn-proftabs, #pnStickyCta): the rules below restate what the page needs with a stronger selector,
   so the page does not depend on those files.
   Composed from the kit (not in the mockup):
   - .pn-dttop     back pill (.pn-backchip) left, share (.pc-iconbtn) right.
   - .pn-dtgal     the .pcard photo at page size: paper frame, line, radius 20, 4:5; paper chip + paper arrows on it.
   - .pn-dtbuy     side card = .pn-panel: kicker, h-m, Caveat note, price l, seller row, facts, actions.
   - .pn-dtbar     the action bar = the .hdr skin (chrome, line on top, sm buttons, 40 icon squares), in flow at
                   the end of the page and sticky to the bottom (never fixed over content).
   - .pn-dthead    profile head: the .seller avatar (118 / 84) + .real label + h-m + meta + chips + stat row + actions.
   - .pn-dtstats   stat row = .pbox rows turned sideways (Archivo 900 30 number, 13 muted label, line between).
   - .pn-dtrevs    reviews = a .pbox-like paper list (dashed rows), stars pink-press, no rotation.
   ========================================================================== */
.pn-dt{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;min-width:0}
.pn-dt > *{min-width:0}
.pn-dtat::before{content:"@"}

/* ---------- top row ---------- */
.pn-dttop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px}
.pn-dttop .pn-adshare{flex:none}
.pn-dt .pn-gcrumbs{flex:1;min-width:0}
.pn-dt .pn-gcrumbs .pn-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:0;list-style:none;font:600 13px/20px var(--font-sans);color:var(--ink-2)}
.pn-dt .pn-gcrumbs .pn-crumbs li{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pn-dt .pn-gcrumbs .pn-crumbs a{color:var(--ink-2);text-decoration:none}
.pn-dt .pn-gcrumbs .pn-crumbs a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink)}
.pn-dt .pn-gcrumbs .pn-crumbs [aria-current]{color:var(--ink);white-space:normal;overflow:visible}
.pn-dt .pn-gcrumbs .pn-chev{flex:none;width:14px;height:14px;color:var(--ink-3)}

/* ---------- ad: gallery + side card + description ---------- */
.pn-dtad__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "side" "desc";gap:22px;margin:0}
.pn-dtad__gal{grid-area:gal;min-width:0}
.pn-dtad__side{grid-area:side;min-width:0}
.pn-dtdesc{grid-area:desc}
@media (min-width:1024px){
  .pn-dtad__grid{grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr);grid-template-rows:auto 1fr;grid-template-areas:"gal side" "desc side";column-gap:40px;align-items:start}
}
/* AD2 03.10.: tablets (701–1023) get the desktop composition at tablet scale. One column put a 704 × 880 photo first,
   so on an iPad the title, price, seller and the action started below the first screen. Now photo | buy card side by
   side, the description under the photo; the card head steps down to the section size so a long title stays 3–4 lines. */
@media (min-width:701px) and (max-width:1023px){
  .pn-dtad__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"gal side" "desc side";column-gap:24px;align-items:start}
  .pn-dtad__grid .pn-dtbuy__h{font-size:var(--fs-section)}
  /* The card is 300–470 wide here: a guest's heart only leads to the same signup as the greeting (the bar drops it on
     small phones for the same reason), so the greeting takes the row; a label that still outgrows its button takes a
     second line, as the kit does on phones (fr / es at 701–800). */
  .pn-dt.pn-dtad--guest .pn-dtbuy .pn-dtcta{grid-template-columns:minmax(0,1fr)}
  .pn-dt.pn-dtad--guest .pn-dtbuy .pn-dtcta > .pn-dtlike{display:none}
  .pn-dt .pn-dtbuy .pn-dtcta .pc-btn{white-space:normal;text-align:center;text-wrap:balance}
}
/* owner 13.10. (docs/unterseiten-50-13-10.md point 20): the guest ad's card is two panels (templates/ad_guest.php): the buy
   panel (kicker, title, price, key) and the info panel. UX 17.10. #23: the buy panel alone is the side column; the info
   panel (label, seller, the short trust block) follows the description in the main column, on every width. */
.pn-dtad--guest .pn-dtad__side{display:grid;gap:22px;align-content:start}
.pn-dtad--guest .pn-dtbuy--info > :first-child{margin-top:0}   /* the label opens the panel: no gap of a row that follows a price */
.pn-dtbuy__fx{margin-left:8px;font:600 15px/1.2 var(--font-sans);color:var(--ink-2);white-space:nowrap}   /* UX 17.10. #26: "≈ $58", quieter than her price */
.pn-dtask__sub{margin:8px 0 0}   /* UX 17.10. #30: who gets the request */
/* UX 17.10. #22: a long description folds to six lines; the fade says there is more, "Read more" opens it (market.js) */
.pn-dtdesc__text.is-folded{max-height:calc(6 * 1.65em);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 1.65em),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 1.65em),transparent)}   /* UX polish 23.10. UX-049: only the sixth line fades (it covered 2.4 lines: read as broken text) */
/* polish r1: the buy card rides beside the description, so its actions stay in reach (only where it fits the screen). */
@media (min-width:1024px) and (min-height:800px){
  .pn-dtad__grid > .pn-dtad__side{position:sticky;top:calc(var(--flush-top) + 24px)}
}

/* Gallery (partials/detail_gallery.php). */
.pn-dtgal{display:grid;gap:12px}
.pn-dt .pn-gal{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--surface);box-shadow:none}
.pn-dt .pn-gal__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:inherit}
.pn-dt .pn-gal__track::-webkit-scrollbar{display:none}
.pn-dt .pn-gal__track:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-dt .pn-gal__slide{flex:0 0 100%;width:100%;height:auto;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always}
.pn-dt .pn-gal .pn-gal__count{top:auto;left:auto;right:14px;bottom:14px;height:auto;background:var(--paper);color:var(--anthracite);-webkit-backdrop-filter:none;backdrop-filter:none;font:700 11px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.pn-dt .pn-gal .pn-gal__count b{font-weight:700}
/* owner 13.10. (same list, point 22): on a phone the counter was hidden (market.css: the full-bleed hero has bars), the
   arrows go on touch screens (hover:none) and dots and bars are off on this page: nothing said there are more photos. */
@media (max-width:700px){.pn-dt .pn-gal .pn-gal__count{display:inline-flex}}
.pn-dt .pn-gal .pn-gal__nav{position:absolute;top:50%;z-index:5;transform:translateY(-50%);opacity:1;background:var(--paper);color:var(--anthracite);-webkit-backdrop-filter:none;backdrop-filter:none}
.pn-dt .pn-gal .pn-gal__nav:hover{background:var(--paper);border-color:transparent}
.pn-dt .pn-gal .pn-gal__nav:active{transform:translateY(-50%)}
.pn-dt .pn-gal .pn-gal__nav--prev{left:14px}
.pn-dt .pn-gal .pn-gal__nav--next{right:14px}
.pn-dt .pn-gal__dots,.pn-dt .pn-gal__bars{display:none}
.pn-dt .pn-gal.is-single .pn-gal__count,.pn-dt .pn-gal.is-single .pn-gal__nav{display:none}
@media (hover:none){.pn-dt .pn-gal .pn-gal__nav{display:none}}
/* AD2 03.10.: desktop photo stage. The 4:5 frame at the column width ran 870–1,075 px tall, so on a 1440 × 900 or
   1920 × 1080 screen the lower fifth of the photo (and its count) sat under the fold. From 1024 the stage is never
   taller than the screen under the page head; the photo is shown whole (contain, true colour) on the card paper, and
   where the frame is already short enough nothing changes (125cqw = the 4:5 height). Missing photo: the care label. */
@media (min-width:1024px){
  .pn-dt .pn-dtgal{container-type:inline-size}
  .pn-dt .pn-gal__slide{aspect-ratio:auto;height:min(125cqw,max(520px,calc(100svh - var(--flush-top) - 152px)))}
  .pn-dt .pn-gal__slide:has(> img,> picture > img){background:var(--surface)}
  .pn-dt .pn-gal__slide > img,.pn-dt .pn-gal__slide > picture > img{object-fit:cover;object-position:50% 40%}   /* owner 03.10.: the photo fills the frame, no bars */
}
.pn-dtgal__stamp{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);pointer-events:none}
.pn-dt .pn-gal__thumbs{display:none}
@media (min-width:701px){
  .pn-dt .pn-gal__thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0}
  .pn-dt .pn-gal__thumbs .pn-gal__thumb{position:relative;flex:none;width:64px;height:auto;aspect-ratio:4/5;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ph-media);opacity:.6;box-shadow:none;cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
  .pn-dt .pn-gal__thumbs .pn-gal__thumb:hover{border-color:var(--line-3)}   /* polish r3: grey, never the white ink line in dark */
  .pn-dt .pn-gal__thumbs .pn-gal__thumb.is-active{border-color:transparent;box-shadow:none;opacity:1}
  .pn-dt .pn-gal__thumbs .pn-gal__thumb:not(.is-active):hover{opacity:.9}   /* no borders 18.10.: the active thumb is full strength, the others step back (no pink double ring) */
  .pn-dt .pn-gal__thumbs .pn-gal__thumb:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
}

/* Side card. */
.pn-dtbuy{display:block}
.pn-dtbuy__kick{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 14px}
.pn-dtbuy__when{font:400 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-dtbuy__h{margin:0}
.pn-dtbuy__hand{margin:10px 0 0;color:var(--pink-text)}   /* QA m7: pink ink on light grounds (plain pink was 1.9:1), plain pink in dark */
.pn-dtbuy__price{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 0}
.pn-dtbuy__price .pn-askprice{font:600 15px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-dtbuy__res .pc-ico{width:12px;height:12px}
.pn-dtbuy__note{margin:14px 0 0}
.pn-dtbuy__mine{display:none;margin:8px 0 0}
/* Seller row: avatar with the pink ring, @name (the only thing that may shorten), one muted line, chevron. */
.pn-dtseller{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:12px 14px;border-radius:var(--r-rules);background:var(--sunken);color:inherit;text-decoration:none;transition:background-color var(--dur-fast)}
a.pn-dtseller:hover{background:var(--surface-2)}
.pn-dtseller__who{flex:1;min-width:0;display:grid;gap:2px}
.pn-dtseller__who > b{min-width:0;font:600 15px/1.3 var(--font-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-dtseller__who > span{font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
a.pn-dtseller:hover .pn-dtseller__who > b{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
a.pn-dtseller:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-label)}
.pn-dtseller .pn-chev{flex:none}
/* "On the label": the kicker with the tub over the facts rows. */
.pn-dtlabel{margin:22px 0 0}
.pn-dtlabel__h{margin:0 0 4px}
/* polish r4: the label rows keep the panel inset like the seller row's lines (no edge-to-edge dashed line). */
.pn-dtlabel .pc-facts{--facts-x:0}
/* polish r1: the facts stay label-over-value when the kit splits them into two columns (a wide card), so "Lace" never
   reads into the next label. Same look as the profile's facts grid. */
@container (min-width:520px){
  .pn-dtbuy .pc-fact{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-height:0}
  .pn-dtbuy .pc-fact dt{max-width:none;font:400 12px/16px var(--font-sans)}
  .pn-dtbuy .pc-fact dd{justify-content:flex-start;text-align:left;font:700 14px/20px var(--font-sans)}
}
/* Actions: the one pink (block) + the like square to its right; line buttons under it. */
.pn-dt .pn-dtbuy .pn-ad__cta.pn-dtcta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px;margin:26px 0 0}
.pn-dt .pn-dtbuy .pn-dtcta > *{grid-column:1;min-width:0}
.pn-dt .pn-dtbuy .pn-dtcta > .pn-dtlike{grid-column:2;grid-row:1}
/* polish-b 02.10.: with an order button the pink action takes the full row and the heart pairs with Message under it
   (it hung beside the pink button and left a hole beside Message). */
.pn-dt .pn-dtbuy .pn-dtcta:has(> .pn-adorder) > .pn-adorder{grid-column:1 / -1}
.pn-dt .pn-dtbuy .pn-dtcta:has(> .pn-adorder) > .pn-dtlike{grid-row:2}
.pn-dt .pn-dtbuy .pn-dtcta form{display:grid;gap:14px;margin:0}
.pn-dt .pn-dtbuy .pn-dtcta .pn-adorder__offer .pc-input{width:100%}
.pn-dtlike{width:var(--control-btn);height:var(--control-btn)}
.pn-dtlike.is-on,.pn-dtlike[aria-pressed="true"]{background:var(--pink);border-color:transparent;color:var(--anthracite)}
.pn-dtlike.is-on .pc-ico,.pn-dtlike[aria-pressed="true"] .pc-ico{fill:currentColor}
.pn-dt .pn-adorder__err{display:flex;align-items:center;gap:8px;margin:14px 0 0}
.pn-dt .pn-dtcta .is-disabled{pointer-events:none}
/* owner 08.10. (#34): "Ask her and similar women" under the action row (the outline button, never the pink; only with the direct order switch) */
.pn-dt .pn-dtbuy .pn-dtask{margin-top:14px}
.pn-dtsafe{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;padding-top:0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-dtsafe .pc-ico{flex:none;color:var(--ink)}
.pn-dtsafe b{color:var(--ink);font-weight:700}
.pn-dtsafe + .pn-dtsafe{margin-top:12px;padding-top:0;border-top:0}
/* Description: the panel with the card head; the seller's own words at reading size. */
.pn-dtprose{font:400 16px/1.65 var(--font-sans);color:var(--ink);max-width:var(--measure-prose)}
.pn-dtprose p{margin:0}
.pn-dtprose p + p{margin-top:14px}
.pn-dtdesc__alt{margin-top:18px;padding-top:0}
.pn-dtdesc__tr{margin:16px 0 0}

/* ---------- rails (More from / Similar) = .sec-head + the .pairs grid ---------- */
.pn-dtrail{margin-top:var(--sec-gap)}
/* the quiet seller line under a public listing or profile (owner 12.10. evening: "huebsch und dezent") */
.pn-dtsell{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;align-items:baseline;margin:var(--sec-gap) 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.pn-dtrail .pc-sechead{margin-bottom:var(--sec-head-gap)}
/* polish r4: rail heads take the profile's section scale (30 / 26), so the page h1 stays the one big head. */
.pn-dtrail > .pc-sechead .pc-h-m{font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0}
/* AD2 03.10.: "More from @name" with no other listing of hers (partials/more_none.php): one row on the paper, avatar |
   the line | her profile as the line door; phones stack the door full width under the line. */
.pn-dtnone{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;padding:18px var(--panel-pad);border:1px solid transparent;border-radius:var(--r-rules);background:var(--surface)}
.pn-dtnone__txt{flex:1 1 220px;min-width:0;margin:0;font:500 15px/1.45 var(--font-sans);color:var(--ink)}
.pn-dtnone .pc-avatar{flex:none}
@media (max-width:700px){.pn-dtnone__btn{flex:1 1 100%}}
/* polish r1: 12 similar pairs fill 2, 3, 4 and 6 columns; in the 5-column range the short last row steps aside, on
   phones 8 (4 full rows). */
@media (min-width:701px) and (max-width:1023px){
  .pn-dtsim .pn-grid{--dt-cols:repeat(3,minmax(0,1fr));grid-template-columns:var(--dt-cols)}
  .pn-dtsim .pn-grid > :nth-child(3n+4):nth-last-child(-n+2),.pn-dtsim .pn-grid > :nth-child(3n+4):nth-last-child(-n+2) ~ *{display:none}
}
@media (min-width:1024px) and (max-width:1099px){
  .pn-dtsim .pn-grid{--dt-cols:repeat(4,minmax(0,1fr));grid-template-columns:var(--dt-cols)}
  .pn-dtsim .pn-grid > :nth-child(4n+5):nth-last-child(-n+3),.pn-dtsim .pn-grid > :nth-child(4n+5):nth-last-child(-n+3) ~ *{display:none}
}
@media (min-width:1101px){.pn-dtsim .pn-grid{--dt-cols:repeat(5,minmax(0,1fr));grid-template-columns:var(--dt-cols)}}   /* the member column is wide now: 5 even columns, 2 full rows */
@media (min-width:1101px){.pn-dtsim .pn-grid > :nth-child(5n+6):nth-last-child(-n+4),.pn-dtsim .pn-grid > :nth-child(5n+6):nth-last-child(-n+4) ~ *{display:none}}
@media (max-width:700px){
  .pn-dtsim .pn-grid > :nth-child(n+9){display:none}
  .pn-dtsim .pn-grid:not(:has(> :nth-child(8))) > :nth-child(2n+3):last-child{display:none}   /* an odd short list: no lone card */
}

/* ---------- action bar (#pnAdBar, #pnStickyCta): the header skin, in flow, sticky at the bottom ---------- */
.pn-dtbar{position:sticky;bottom:0;z-index:var(--z-bar);display:flex;align-items:center;justify-content:space-between;gap:12px;margin:var(--sec-gap) calc(-1 * var(--gutter)) 0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:var(--chrome);color:var(--on-chrome);border-top:0;box-shadow:var(--sh-sheet)}
.pn-dtbar[hidden]{display:none}
.pn-dtbar__price{flex:1 1 auto;min-width:0;display:grid;gap:4px}
.pn-dtbar__price .pc-price{color:var(--on-chrome)}
.pn-dtbar__price .pn-askprice{font:600 14px/1.25 var(--font-sans);color:var(--on-chrome)}
.pn-dtbar__price small{font:400 12px/1.3 var(--font-sans);color:var(--on-chrome-2)}
.pn-dtbar__acts{flex:none;display:flex;align-items:center;gap:10px}
.pn-dtbar__ico.is-on,.pn-dtbar__ico[aria-pressed="true"]{background:var(--pink);border-color:transparent;color:var(--anthracite)}
.pn-dtbar__ico.is-on .pc-ico,.pn-dtbar__ico[aria-pressed="true"] .pc-ico{fill:currentColor}
.pn-dtbar .is-disabled{opacity:.6}
@media (max-width:374px){.pn-dtbar__acts{gap:6px}.pn-dtbar .pn-dtbar__ico:first-child:not(:only-child){display:none}}
.pn-dtad--guest .pn-dtbar__price{min-width:110px}   /* T62: never a 92px column of three lines */
.pn-dtad--guest .pn-dtbar__price small{white-space:nowrap}
@media (max-width:429px){.pn-dtad--guest .pn-dtbar .pn-dtbar__ico{display:none}}   /* guests: the heart only leads to the signup; the greeting needs the room */
/* T62: phones: the ad's last crumb is the h1 again, so the trail stops at the category and stays on one line. */
@media (max-width:700px){.pn-dtad .pn-gcrumbs .pn-crumbs > li:last-child{display:none}}
/* Phones: market.js pins the bar and hides the tab bar (body.pn-has-adbar); the side card's actions step aside
   (an offer field stays: it is part of the order form the bar submits). */
.pn-dtbar.is-away{display:none}   /* UX 17.10. #14: the order form on screen is its own key (market.js) */
@media (max-width:700px){
  body.pn-has-adbar .pn-main:has(> .pn-dtad),body.pc-guest.pn-has-adbar .pn-main:has(> .pn-gapp > .pn-dtbar){padding-bottom:0}   /* UX 17.10. #14: no dark gap between the bar and the foot (beats the guest app shell's --main-pb, layout.css) */
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-ad__cta.pn-dtcta:not(:has(.pn-adorder__offer)){display:none}
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-ad__cta.pn-dtcta:has(.pn-adorder__offer){display:grid}
  /* polish r4: the buttons live in the bar; her order state moves under the price.
     AD2 03.10.: the order note ("Ordering is free. You agree on payment …") stays in the card under the facts and the
     bar carries the price alone: as the bar's sub line it ran to four 12 px lines beside three buttons. */
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-dtbuy__note.is-mine{display:none}
  body.pn-has-adbar .pn-dt .pn-dtbuy .pn-dtbuy__mine{display:block}
  .pn-dtad:not(.pn-dtad--guest) .pn-dtbar__price small{display:none}
}

/* ---------- profile head card (partials/profile_head.php, docs/profile-page-02-10.md) ----------
   Owner 02.10. ("zerfleddert, haltlos, viel zu viel Freiflächen"): ONE framed unit for guests and members.
   ≥ 700: the kit card (surface, the 50 % grey line, radius 20). The cover is clipped by the card's top; the avatar sits
   half on the cover edge, ringed in the card colour; identity | actions on one row (actions on the name's row, right);
   the stat strip (equal cells, a line between) and the tabs are the card's foot rows, each with the line on top.
   The cover's height says what it is: a picked photo 4:1 up to 220, the avatar blur / stripe fallback a quiet 128 strip.
   < 700: no card: a full-bleed surface band from the chrome down, the tabs the sticky swipe row under it (one place for
   the numbers: no strip on phones). */
.pn-phead{--ph-pad:var(--panel-pad);--av:128px;--av-gap:24px;--cover-h:128px;margin:0 0 var(--app-gap);border:1px solid transparent;border-radius:var(--r-pcard);background:var(--surface);min-width:0}
.pn-dthead{display:grid;grid-template-columns:var(--av) minmax(0,1fr) auto;grid-template-areas:"cover cover cover" "av who act" "stats stats stats";column-gap:var(--av-gap);align-items:start;margin:0;padding:0 var(--ph-pad)}
@media (min-width:701px){.pn-phead.is-nostats > .pn-dthead{padding-bottom:22px}}
.pn-dthead__av{grid-area:av;position:relative;z-index:1;margin-top:calc(var(--av) / -2)}
.pn-dthead .pn-dthead__av .pc-avatar--xl{width:var(--av);height:var(--av);box-shadow:0 0 0 5px var(--surface)}
.pn-dthead__who{grid-area:who;min-width:0;display:grid;justify-items:start;gap:0;padding-top:20px}
.pn-dthead__id{display:grid;justify-items:start;min-width:0;max-width:100%}
.pn-dthead__kick{margin:0 0 8px}
.pn-dthead__kickrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 8px}   /* night N1 #32: the kicker + a Premium seller's badge */
.pn-dthead__kickrow .pn-dthead__kick{margin:0}
.pn-dthead__name{margin:0;max-width:100%;overflow-wrap:anywhere}   /* night QA D3: a long name never widens the head */
.pn-dthead__hand{margin:4px 0 0;color:var(--pink-text)}   /* QA m7: 1.7:1 → pink ink in light */
.pn-dthead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0;font:400 14px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-dtcountry{display:inline-flex;align-items:center;gap:6px}
.pn-dtcountry .pn-flag{flex:none;width:16px;height:16px;margin:0;border-radius:50%;object-fit:cover}
.pn-dtrate{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font:700 14px/1.3 var(--font-sans);text-decoration:none}
a.pn-dtrate:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-dtrate .pc-ico{color:var(--pink-glyph);fill:currentColor;stroke:none}
.pn-dtrate--big{gap:8px;font-weight:500;color:var(--ink-2)}
.pn-dtrate--big b{font:700 var(--fs-num,22px)/1 var(--font-display);color:var(--ink)}
/* Rating = a small pill (the review count is in the tab; screen readers get it inside the link). */
.pn-dtrate--pill{gap:4px;min-height:26px;padding:4px 10px 4px 8px;border:1px solid transparent;border-radius:var(--radius-full);background:var(--sunken);font:700 13px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.pn-dtrate--pill .pc-ico{width:14px;height:14px}
a.pn-dtrate--pill:hover{text-decoration:none;background:var(--surface-2)}
.pn-dtchips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
/* polish r4: what she offers = quiet tags (sunken fill, no outline, no hover), so only the tab chips below read as buttons. */
.pn-dtchips .pc-chip,.pn-dtchips .pc-chip:hover{cursor:default;border-color:transparent;background:var(--sunken);color:var(--ink)}
.pn-dtchips .pc-ico{width:14px;height:14px}
.pn-dthead__since{font:inherit;color:inherit}
.pn-dthead__act{grid-area:act;align-self:end;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px;padding-top:20px}
.pn-dtform{display:contents}
.pn-dtmore{width:var(--control-btn);height:var(--control-btn)}
/* A7 (owner 18.10.): Block / Report in one ⋯ menu on the launched member's profile — a tonal float, no frame; Message takes the room */
/* A7 menu (review 18.10.): its own class — .pn-dtsafe is the safety notice above (22 px top margin), which pushed the ⋯ key below Message */
.pn-dtsafemenu{position:relative;display:flex;flex:none;align-self:center;margin:0}
.pn-dtsafemenu > summary{list-style:none;cursor:pointer}
.pn-dtsafemenu > summary::-webkit-details-marker{display:none}
.pn-dtsafemenu__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:var(--z-header);display:grid;min-width:200px;padding:6px;border-radius:var(--r-rules);background:var(--t-over,var(--surface));box-shadow:var(--sh-float)}
.pn-dtsafemenu__i{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-rules);background:none;font:600 15px/1.3 var(--font-sans);color:var(--ink);text-align:left;cursor:pointer}
.pn-dtsafemenu__i:hover{background:var(--t-tint-2,var(--sunken))}
.pn-dtsafemenu__i:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.pn-dtsafemenu__i > svg{flex:none;color:var(--ink-2)}
.pn-dthead__act:has(> .pn-dtsafemenu) > .pc-btn--primary{flex:1 1 auto}
/* Stat strip: the card's first foot row. Equal cells (the strip always spans the card), each centred: the number
   (Archivo 900 26) with its label on one baseline, on a sunken band (tonal pass 05.10.: no lines between the cells). The actions sit on the row above it,
   bottom right (on the strip line, like the identity's last line), so the head reads as one block standing on the strip. */
.pn-dtstats{grid-area:stats;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:22px calc(-1 * var(--ph-pad)) 0;padding:0;background:var(--sunken)}
.pn-dtstats__i{display:flex;flex-direction:row-reverse;justify-content:center;align-items:baseline;gap:8px;min-width:0;padding:16px var(--ph-pad)}
.pn-dtstats dt{font:500 14px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-dtstats dd{margin:0;font:700 var(--fs-num,22px)/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.pn-dtstats dd a{color:inherit;text-decoration:none}
.pn-dtstats dd a:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:3px;text-underline-offset:4px}
/* Notes (blocked / paused / private) inside the card, on its inner edge. */
.pn-phead > .pc-alert{margin:0 var(--ph-pad) 20px;align-items:center}

/* Cover banner (partials/profile_cover): clipped by the card's top corners, no frame of its own; a soft shade at the foot. */
.pn-dtcover{grid-area:cover;position:relative;overflow:hidden;height:var(--cover-h);margin:0 calc(-1 * var(--ph-pad));border-radius:calc(var(--r-pcard) - 1px) calc(var(--r-pcard) - 1px) 0 0;background:var(--sunken)}
.pn-dtcover--photo{height:clamp(150px,15vw,220px)}
.pn-dtcover > img,.pn-dtcover > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.pn-dtcover--blur > img,.pn-dtcover--blur > picture > img{filter:blur(44px) saturate(1.15);transform:scale(1.35)}
.pn-dtcover::after{content:"";position:absolute;inset:0;background:var(--shade-cover);pointer-events:none}
.pn-dtcover--plain{background:var(--stripes-cover)}
.pn-dtcover--plain::after{background:var(--shade-cover-plain)}
/* The care label on the fallback: a paper tag with the tub mark, top right. */
.pn-dtcover__tag{position:absolute;top:18px;right:22px;z-index:1;display:grid;place-items:center;width:44px;height:56px;border:1px solid var(--line);border-radius:var(--r-label);background:var(--paper);color:var(--anthracite);transform:rotate(4deg)}
.pn-dtcover__tag .pc-tub{width:20px;height:13px}

/* Tabs = the card foot (≥ 700): a static row on the line. */
.pn-dt .pn-proftabs.pn-dttabs{position:static;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:14px var(--ph-pad);background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.pn-dt .pn-proftabs.pn-dttabs .pc-tab .pc-count--inline{margin-left:2px}

/* Tablet (700–1023): avatar + identity on one axis, then meta, chips and the action row from the card's inner edge. */
@media (max-width:1023px){
  .pn-phead{--av:104px;--av-gap:20px}
  .pn-dthead{grid-template-columns:var(--av) minmax(0,1fr);grid-template-areas:"cover cover" "av id" "meta meta" "chips chips" "act act" "stats stats"}
  .pn-dthead__who{display:contents}
  .pn-dthead__id{grid-area:id;align-self:start;padding-top:16px}
  .pn-dthead__meta{grid-area:meta;margin:14px 0 0}
  /* AD3 03.10.: what she offers wraps (owner: pills never clipped); the swipe row cut the fourth tag ("Budg…") at the edge */
  .pn-dtchips{grid-area:chips;flex-wrap:wrap;margin:12px 0 0}
  .pn-dtchips > li{flex:none}
  .pn-dthead__act{justify-content:flex-start;padding-top:16px}
  .pn-dthead__act > .pc-btn,.pn-dthead__act > .pn-dtform > .pc-btn{flex:0 1 320px;min-width:0}
  .pn-dtstats{margin-top:18px}
}
/* Phones: no card. The head is a full-bleed surface band from the chrome (the wrapper steps aside, so the tabs can stick
   to the page), cover edge to edge, avatar 88 + name on one axis, one full-width action row; the counts are on the tabs. */
@media (max-width:700px){
  .pn-phead{--ph-pad:var(--gutter);--av:88px;--av-gap:14px;--cover-h:112px;display:contents}
  .pn-dthead{margin:0 calc(-1 * var(--gutter));padding-bottom:18px;background:var(--surface)}
  .pn-dtprof > .pn-phead:first-child > .pn-dthead{margin-top:calc(-1 * var(--app-top))}
  .pn-store--guest > .pn-dttop + .pn-phead > .pn-dthead{margin-top:-28px}
  .pn-dtcover{border-radius:0}
  .pn-dtcover--photo{height:clamp(140px,40vw,180px)}
  .pn-dthead .pn-dthead__av .pc-avatar--xl{font-size:32px;box-shadow:0 0 0 4px var(--surface)}
  .pn-dthead__id{padding-top:12px}
  .pn-dthead__name--long{font-size:20px}   /* night QA D3: 13+ letters in a row ("Lamasmorbosadeaqui") */
  .pn-dthead__kick{margin-bottom:6px}
  .pn-dthead__meta{gap:6px 12px;margin-top:12px;font-size:14px}
  .pn-dthead__act{padding-top:14px}
  .pn-dthead__act > .pc-btn,.pn-dthead__act > .pn-dtform:first-child > .pc-btn{flex:1 1 auto;min-width:0}
  /* owner 05.10.: on phones Message is a round pink chat icon (the twin of Block / Report), never a clipped label */
  .pn-dthead__act > .pc-btn--pink,.pn-dthead__act > .pn-dtform:first-child > .pc-btn--pink{flex:none;width:var(--control-btn);height:var(--control-btn);min-height:0;padding:0;gap:0;border-radius:50%;font-size:0;letter-spacing:0}
  .pn-dthead__act > .pc-btn--pink > .pc-ico,.pn-dthead__act > .pn-dtform:first-child > .pc-btn--pink > .pc-ico{width:24px;height:24px}
  .pn-dtstats{display:none}
  /* inside tier 06.10.: a member's Message is a labelled button (the guest's is the round icon above); on a 320 px phone the row wraps instead of cutting the label */
  @media (max-width:359px){body:not(.pc-guest) .pn-dthead__act{flex-wrap:wrap}body:not(.pc-guest) .pn-dthead__act > :is(.pc-btn--primary,.pn-follow){min-width:max-content}}
  .pn-dtcover__tag{top:14px;right:16px;width:38px;height:48px}
  .pn-phead > .pc-alert{margin:0 0 14px}
  /* AD3 03.10.: one rule for guests and members (owner: pills wrap, never clipped): the members' swipe row cut "Reviews"
     at the screen edge while the guests' row wrapped. "About" is the section right under the head, so its pill steps
     aside on phones; the rest fits one row in most profiles and wraps cleanly in the others. */
  .pn-dt .pn-proftabs.pn-dttabs{position:sticky;top:var(--flush-top);z-index:15;flex-wrap:wrap;gap:8px 6px;max-width:none;margin:0 calc(-1 * var(--gutter)) var(--app-gap);padding:6px var(--gutter);overflow:visible;background:var(--surface);box-shadow:0 10px 24px -14px var(--scrim)}   /* UX polish 23.10. UX-029: 6 (was 10) top and bottom: the pinned strip 47 px, not 55 (header + strip + tab bar were 178 px of a phone) */
  .pn-dt .pn-proftabs.pn-dttabs .pc-tab{flex:none;padding:10px 11px}
  .pn-dt .pn-proftabs.pn-dttabs .pc-tab[href="#about"]:not(:only-child){display:none}
  .pn-dtprof .pn-dtblock{scroll-margin-top:calc(var(--flush-top) + 72px)}
  /* the notes stand on the band too (they follow the head in the page flow) */
  .pn-phead > .pc-alert{position:relative}
}
/* Guests on phones: the crumbs are hidden (guest_detail.css), so their empty row goes too and the cover meets the header. */
@media (max-width:700px){.pn-store--guest > .pn-dttop{display:none}}
.pn-dtprivate{align-items:center}

/* Body = the member-shell .pn-split (main + 360 side card, --app-gap) of .pn-stack columns (app.css). Both columns open
   with a card on the same top line (About / the join card / "Her details"); sections in the main column --app-sec-gap. */
.pn-dtprof > .pn-dtprof__grid{align-items:start}
.pn-dtprof .pn-dtprof__main{gap:var(--app-sec-gap)}
.pn-dtprof__side{min-width:0}
.pn-dtblock{scroll-margin-top:calc(var(--flush-top) + 16px);min-width:0}
.pn-dtblock > .pc-sechead{margin-bottom:22px}
.pn-dtblock > .pc-sechead .pn-count{align-self:flex-end}
/* Cards in the main column: 4 across at 1440, 3 at 1024, 2 on phones. */
.pn-dt .pn-grid.pn-dtcards{--dt-cols:repeat(auto-fill,minmax(210px,1fr));grid-template-columns:var(--dt-cols)}
@media (max-width:700px){.pn-dt .pn-grid.pn-dtcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* About: long bios fold (profile.js adds .is-folded); the fold is a fade, the button a see-all link. */
.pn-dtabout.is-folded{max-height:calc(7 * 1.65em);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 1.65em),transparent);mask-image:linear-gradient(to bottom,black calc(100% - 1.65em),transparent)}   /* UX polish 23.10. UX-049: the last line fades, as on the listing */
.pn-dtmorebtn{margin-top:14px;padding:0;border:0;background:none;cursor:pointer}
.pn-dtmorebtn[hidden]{display:none}
/* Photo / video tiles: the .pcard photo (4:5, line, radius 20); on a locked one the ink lock label. */
.pn-dttiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:700px){.pn-dttiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.pn-dttile{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:var(--r-pcard);text-decoration:none;color:inherit}
.pn-dttile > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pn-dttile.is-locked > img{filter:blur(26px) saturate(.8);transform:scale(1.3)}

@media (hover:hover){.pn-dttile:hover{border-color:var(--line-3)}}
.pn-dttile:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-dttile__lock{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%)}
.pn-dttile__play{position:absolute;left:50%;top:50%;z-index:4;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--anthracite)}
.pn-dttile__play .pc-ico{fill:currentColor;margin-left:2px}
/* Reviews: base rows (the profile cards are restyled in the compact block below; the ad seller box keeps rows). */
.pn-dtrevs{margin:0;padding:6px var(--panel-pad);list-style:none;background:var(--surface);border:1px solid transparent;border-radius:var(--r-tile)}
.pn-dtrev,.pn-dtrevs > .pn-review{padding:18px 0}
.pn-dtrev h3,.pn-review h3{margin:8px 0 0;font:700 var(--fs-subhead)/var(--lh-sub) var(--font-display);color:var(--ink);overflow-wrap:break-word}
.pn-dtrev p,.pn-review p{margin:8px 0 0;font:400 15px/1.55 var(--font-sans);color:var(--ink);overflow-wrap:break-word}
.pn-dtrev blockquote,.pn-review blockquote{margin:8px 0 0;font:400 15px/1.55 var(--font-sans);color:var(--ink);overflow-wrap:break-word}
.pn-dtrev blockquote p,.pn-review blockquote p{margin:0}
.pn-dtrev__by,.pn-dt .pn-dtrev .pn-dtrev__by,.pn-dt .pn-review .pn-dtrev__by{display:flex;flex-wrap:wrap;gap:4px 10px;margin:10px 0 0;font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-dtrev__by b{color:var(--ink);font-weight:700}
.pn-dtstars{display:inline-block;font:400 16px/1 var(--font-sans);letter-spacing:2px;color:var(--pink-glyph)}   /* owner 30.09.: brand pink, not the dark text pink */
.pn-dtstars__off{color:var(--ink-3)}   /* polish r3: >= 3:1 on the dark card, a glyph is not a border */
.pn-dtnorev{margin:0}
/* Facts side card: kicker + card head over the facts rows. */
.pn-dtfacts__h{margin:10px 0 8px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink)}

/* Contact bar on the profile (#pnStickyCta): the action bar skin, phones only, shown once the head's actions scroll away. */
.pn-dtsticky{display:none}
@media (max-width:700px){
  .pn-dtsticky{display:flex;justify-content:flex-start;bottom:calc(var(--dock) - 16px);visibility:hidden}
  .pn-dtsticky.is-on{visibility:visible}
  body.pn-has-adbar .pn-dtsticky{bottom:0}   /* polish r1: pinned, it replaces the tab bar (profile.js), so it sits on the edge */
  .pn-dtsticky .pc-avatar{flex:none}
  .pn-dtsticky__name{flex:1;min-width:0;font:600 15px/1.3 var(--font-sans);color:var(--on-chrome);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- guest additions (ad_guest, member_guest) ---------- */
.pn-dt .pn-dtbuy .pn-dtcta > .pn-dtcta__msg{grid-column:1 / -1}
.pn-dtbuy__ship{font:400 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-dtlocknote{display:flex;align-items:flex-start;gap:8px}
.pn-dtlocknote .pc-ico{flex:none;margin-top:2px}
.pn-dttrust{margin:22px 0 0}
.pn-dttrust .pn-dtseller{margin:0}
.pn-dttrust .pn-dtseller__who .pn-flag{display:inline-block;width:14px;height:14px;margin:0 6px 0 0;border-radius:50%;vertical-align:-2px;object-fit:cover}
div.pn-dtseller{color:inherit}
.pn-dttrust .pn-sellertrust__quote{padding:14px 0 0;border-top:0}
.pn-dtdesc--guest{display:grid;gap:22px;align-content:start;min-width:0}
.pn-dtcontactnote{margin-top:18px}
/* "n more listings" card: the listing card's frame with the stripes and the ink lock label, the two lines as its caption
   on the photo (adcard2 03.10.), so it is exactly as big as its siblings. */
.pn-dtmorecard .pc-media{aspect-ratio:4/5;place-items:start center;padding-top:26%}
.pn-dtmorecard .pc-lockpill{position:relative;z-index:3}
.pn-dtmorecard .pc-card__cap h3{margin:0;font:700 14px/1.25 var(--font-sans);color:var(--scard-ink)}
.pn-dtmorecard .pc-card__cap p{margin:0;font:500 12px/1.3 var(--font-sans);color:var(--scard-ink-2)}
/* Locked photos: four striped tiles with the lock label across them. */
.pn-dtlocked{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pn-dtlocked .pn-dttile{background:var(--ph-media)}
.pn-dtlocked__pill{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%)}
.pn-dtlocked__txt{margin:16px 0 0;font:400 14px/1.5 var(--font-sans);color:var(--ink-2)}
@media (max-width:700px){.pn-dtlocked{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-dttrustblock{min-width:0}
.pn-dthead .pc-avatar__dot{width:22px;height:22px;right:4px;bottom:4px}
@media (max-width:700px){.pn-dthead .pc-avatar__dot{width:16px;height:16px;right:2px;bottom:2px}}

/* ---------- compact profile (owner 30.09.: "more compact, not so much empty space") ----------
   Tighter rhythm, card-size section heads, 6 tiles in a row (3 on phones, never a half row), reviews as compact cards
   (a swipe row on phones), the facts as a two-column definition grid. Scope: .pn-dtprof (member + guest profile). */
.pn-dtprof .pn-dtblock > .pc-sechead{margin-bottom:14px;gap:12px}
.pn-dtprof .pn-dtblock > .pc-sechead .pc-h-m{margin-top:6px;font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:0}
.pn-dtprof .pn-dtblock > .pc-sechead > div > .pc-h-m:first-child{margin-top:0}
.pn-dtprof .pn-dtblock > .pc-sechead .pc-kicker{font-size:11px}
.pn-dtprof .pn-dtabout.is-folded{max-height:calc(5 * 1.65em)}
.pn-dtprof .pn-dtmorebtn{margin-top:10px}
.pn-dtprof .pn-grid.pn-dtcards{--dt-cols:repeat(auto-fill,minmax(180px,1fr));--dt-gap:16px;grid-template-columns:var(--dt-cols);gap:var(--dt-gap)}
/* adcard2 03.10.: a lone listing is an ordinary card in the grid (the photo is the card; the wide row of polish r1 had
   the caption beside the photo, which no longer exists). */
/* Tiles: 6 across (≥ 700), 3 across on phones; 4 or 5 tiles on a phone show 3 (the see-all link has the rest). */
.pn-dtprof .pn-dttiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.pn-dtprof .pn-dttile{border-radius:var(--r-icon)}
.pn-dtprof .pn-dtlocked{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.pn-dtprof .pn-dtlocked .pn-dttile{aspect-ratio:4/5}
/* Tiles are small now: the lock label keeps only its lock (the text stays for screen readers). */
.pn-dtprof .pn-dttile__lock{gap:0;padding:8px;font-size:0;letter-spacing:0}
/* Reviews (owner 30.09.: "reviews look awful"): compact paper cards with real padding, the stars in brand pink on one
   short meta line with the writer (and the date for members), the title, the text at a readable measure; long texts
   fold to 5 lines with "Read more" (profile.js).
   AD3 03.10.: two balanced columns from 700 (CSS columns, each card its own height), so a short review no longer stands
   in a stretched card with half its height empty, and an odd last card no longer runs the full width; one review = one
   column. Members' reviews (writer, date, "Verified order") put the stars on their own line and the writer line under
   them, so the line wraps from the card's edge, never indented beside the stars. Stacked on phones. */
.pn-dtprof .pn-dtrevs{display:block;columns:2;column-gap:12px;padding:0;background:none;border:0;border-radius:0}
.pn-dtprof .pn-dtrevs:has(> :only-child){columns:1}
/* owner 13.10. (docs/unterseiten-50-13-10.md point 31): the fold under the first six reviews — its word is a line button, gone once open */
.pn-dtrevmore{margin-top:12px}
.pn-dtrevmore > summary{list-style:none;cursor:pointer}
.pn-dtrevmore > summary::-webkit-details-marker{display:none}
.pn-dtrevmore[open] > summary{display:none}
.pn-dtprof .pn-dtrevs > :is(.pn-dtrev,.pn-review){display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"stars by" "title title" "body body" "more more";align-items:center;align-content:start;column-gap:10px;row-gap:0;min-width:0;margin:0 0 12px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-pcard);background:var(--surface);break-inside:avoid;-webkit-column-break-inside:avoid}
.pn-dtprof .pn-dtrevs .pn-dtstars{grid-area:stars;font-size:14px;letter-spacing:1px}
.pn-dtprof .pn-dtrevs .pn-dtrev__by{grid-area:by;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0;margin:0;padding:0;font:400 13px/1.35 var(--font-sans);color:var(--ink-2)}
.pn-dtprof .pn-dtrevs .pn-dtrev__by::before{content:"·";color:var(--ink-3)}
.pn-dtprof .pn-dtrevs .pn-dtrev__by b{font-weight:700;color:var(--ink)}
.pn-dtprof .pn-dtrevs > .pn-dtrev .pn-dtrev__by{margin-top:8px}
.pn-dtprof .pn-dtrevs > .pn-dtrev .pn-dtrev__by::before{content:none}
.pn-dtprof .pn-dtrevs > .pn-dtrev .pn-dtrev__by time:not(:empty)::before{content:"·";margin-right:8px;color:var(--ink-3)}
.pn-dtprof .pn-dtrevs :is(.pn-dtrev,.pn-review) h3{grid-area:title;margin:10px 0 0;font:700 var(--fs-sub-s,15px)/1.05 var(--font-display);}
.pn-dtprof .pn-dtrevs :is(.pn-dtrev,.pn-review) > :is(p:not(.pn-dtrev__by),blockquote){grid-area:body;max-width:68ch;margin:8px 0 0;font:400 15px/1.55 var(--font-sans);color:var(--ink)}
.pn-dtprof .pn-dtrevs :is(.pn-dtrev,.pn-review) blockquote p{margin:0;font:inherit}
.pn-dtprof .pn-dtrevs .is-folded{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.pn-dtprof .pn-dtrevs .pn-dtrevmore{grid-area:more;justify-self:start;margin-top:10px}
/* Facts: a two-column definition grid (label over value), in the 340 side card too. */
.pn-dtprof .pn-panel.pn-dtfacts{padding-bottom:calc(var(--panel-pad) - var(--space-2))}
.pn-dtprof .pn-dtfacts .pc-facts{--facts-x:var(--panel-pad)}
.pn-dtprof .pn-dtfacts .pc-facts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn-dtprof .pn-dtfacts .pc-fact{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-height:0;padding:10px var(--facts-x)}
.pn-dtprof .pn-dtfacts .pc-fact:nth-child(2){border-top:0}
.pn-dtprof .pn-dtfacts .pc-fact:nth-child(odd){padding-right:8px}
.pn-dtprof .pn-dtfacts .pc-fact:nth-child(even){padding-left:8px}
.pn-dtprof .pn-dtfacts .pc-fact.is-wide{grid-column:1 / -1;padding-right:var(--facts-x)}
.pn-dtprof .pn-dtfacts .pc-fact dt{max-width:none;font:400 12px/16px var(--font-sans)}
.pn-dtprof .pn-dtfacts .pc-fact dd{justify-content:flex-start;text-align:left;font:700 14px/20px var(--font-sans)}
.pn-dtprof .pn-dtfacts .pc-fact .pn-flag{width:16px;height:16px;margin-right:6px}
@media (max-width:700px){
  .pn-dtprof .pn-grid.pn-dtcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pn-dtprof .pn-dttiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pn-dtprof .pn-dttiles:not(:has(> :nth-child(6))) > :nth-child(n+4){display:none}
  .pn-dtprof .pn-dtlocked{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .pn-dtprof .pn-dtlocked > .pn-dttile:nth-child(n+4){display:none}
  /* Small tiles: the play button shrinks. */
  .pn-dtprof .pn-dttile__play{width:36px;height:36px;margin:-18px 0 0 -18px}
  /* Reviews: stacked cards. */
  .pn-dtprof .pn-dtrevs{columns:1}
  .pn-dtprof .pn-dtrevs > :is(.pn-dtrev,.pn-review){margin-bottom:10px;padding:16px 18px}
  .pn-dtprof .pn-dtrevs .is-folded{-webkit-line-clamp:4}
}

/* ---------- polish r4: member detail pages share the wide chrome (.pn-wide + .pn-wdt) ----------
   Ad, profile, photo / video feed and the single video carry .pn-wide like the list pages, so header, main and footer sit
   on the same 32 gutter and the logo never jumps between Pairs and an ad. The content keeps the 1168 reading column
   (the --main-max default), and the grids get their own columns back from the wide 3–7 grid (layout.css): each grid
   names them in --dt-cols / --dt-gap (default = the .pn-grid base). Phones keep their 28 top. */
/* Inner grounding 01.10.: the content fills the member column too (no 1168 cap in the middle of a wide header), so the
   back row, the gallery, the profile head and the footer start on the logo's edge. */
@media (min-width:701px){
  .pn-main > .pn-wdt :is(.pn-grid,.pn-vlist){grid-template-columns:var(--dt-cols,repeat(auto-fill,minmax(200px,1fr)));gap:var(--dt-gap,18px)}
}
/* Reviews (owner 01.10., docs/reviews.md): a pnew review on the members' profile — "Verified order" in the meta line, the
   buyer's checks as small chips, the seller's one reply (indented, a quiet card), Reply (her own profile, a details fold)
   and Report (other members). They span the review card's full width. */
.pn-revverified{gap:4px;min-height:20px;padding:4px 7px;background:var(--sunken);color:var(--ink-2)}
.pn-revverified .pc-ico{width:12px;height:12px;stroke-width:2.6}
.pn-revtags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.pn-revtags .pc-chip{cursor:default}
.pn-revtags .pc-ico{width:12px;height:12px;stroke-width:2.6}
.pn-revreply{margin:12px 0 0;padding:10px 14px;border-left:0;background:var(--t-tint);border-radius:var(--r-rules);border-radius:0 var(--radius-tile) var(--radius-tile) 0;background:var(--sunken)}
.pn-revreply b{display:block;font:700 13px/1.35 var(--font-sans);color:var(--ink)}
.pn-revreply p{margin:4px 0 0;font:400 14px/1.5 var(--font-sans);color:var(--ink);overflow-wrap:break-word}
.pn-revacts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 16px;margin:10px 0 0}
.pn-revacts form{margin:0}
.pn-revreplyform{flex:0 1 auto;min-width:0}
.pn-revreplyform[open]{flex-basis:100%}   /* AD3: Reply and Report share one row; the open form takes the row */
.pn-revreplyform summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none}
.pn-revreplyform summary::-webkit-details-marker{display:none}
.pn-revreplyform[open] summary{margin-bottom:8px}
.pn-revreplyform form{display:grid;gap:8px}
.pn-revreplyform form .pc-btn{justify-self:start}
.pn-revreport{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink-2)}
.pn-revreport:disabled{cursor:default;opacity:.7}
.pn-revacts:has(details[open]) form[data-review-report]{order:2}
.pn-dtprof .pn-dtrevs :is(.pn-revtags,.pn-revreply,.pn-revacts){grid-column:1 / -1}
.pn-dtpaused{margin:0 0 var(--space-4)}
.pn-dtprof .pn-dtrevs > .pn-review{grid-template-areas:"stars by" "title title" "tags tags" "body body" "more more" "reply reply" "acts acts"}
.pn-dtprof .pn-dtrevs > .pn-dtrev{grid-template-columns:minmax(0,1fr);grid-template-areas:"stars" "by" "title" "tags" "body" "more" "reply" "acts"}
.pn-dtprof .pn-dtrevs .pn-revtags{grid-area:tags}
.pn-dtprof .pn-dtrevs .pn-revreply{grid-area:reply}
.pn-dtprof .pn-dtrevs .pn-revacts{grid-area:acts}
/* A locked tile's blurred photo is scaled (no blurred edge) inside its own clipping box, so the link itself never overflows. */
.pn-dttile__img{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.pn-dttile__img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.8);transform:scale(1.3)}
/* ---------- inner grounding 01.10.: the member detail heads stand on the page-head band (.pc-band, app.css) ----------
   Ad: the back row is the band. The profile head is its own anchor since 02.10. (the head card, docs/profile-page-02-10.md). */
.pn-dtad > .pn-dttop.pc-band{margin-bottom:var(--app-gap);padding-bottom:var(--app-head-pb)}
/* owner 12.10. evening on the public listing ("wirkt schief, nicht mittig oder zu gross"): the crumbs carried their own 18px below and sat 9px
   above the share key. Both stand on the band's middle now: as much room below as the band has above, no margin on the crumbs, a smaller key. */
.pn-dtad--guest > .pn-dttop.pc-band{padding-bottom:var(--app-top)}
.pn-dtad--guest > .pn-dttop.pc-band .pn-gcrumbs{margin:0}
.pn-dtad--guest > .pn-dttop.pc-band .pn-adshare{width:var(--control-sm);height:var(--control-sm)}
.pn-dtad > section.pn-dtrail{margin-top:var(--app-sec-gap)}


/* follow (owner 03.10.): the Follow button keeps its own width next to Message (Message takes the rest of the row) */
.pn-dthead__act > .pn-followform > .pn-follow,.pn-dthead__act > a.pn-follow{flex:none}
/* owner 05.10. ("Review ist gequetscht"): the quote card got a tonal fill, so it needs real inner padding and air between stars, text and the by-line */
.pn-dt .pn-quote.pn-dtrev,.pn-dt .pn-sellertrust__quote.pn-dtrev{padding:22px 24px 20px}
.pn-dt .pn-quote.pn-dtrev blockquote,.pn-dt .pn-sellertrust__quote.pn-dtrev blockquote{margin-top:14px}
.pn-dt .pn-quote.pn-dtrev .pn-dtrev__by,.pn-dt .pn-sellertrust__quote.pn-dtrev .pn-dtrev__by{margin-top:14px}
/* Guest message (owner 08.10., package GM, lib/guest_msg.php): "Write to <name>" on a guest listing and profile, in the
   join box's place. One panel: her avatar and the head, the message, the email "for her answer", the one consent line,
   ONE pink key; after the send the calm answer ("Check your inbox") with his own words quoted. */
.pn-gm{display:grid;gap:16px;text-align:left;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.pn-gm__head{display:flex;gap:12px;align-items:center;min-width:0}
.pn-gm__head .pc-avatar{flex:none}
.pn-gm__ht{min-width:0}
.pn-gm__h{margin:0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink);overflow-wrap:anywhere}
.pn-gm__sub{margin:4px 0 0;font:400 14px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-gm__form{display:grid;gap:14px;min-width:0}
.pn-gm__form[hidden]{display:none}
.pn-gm__field{display:grid;gap:6px;min-width:0}
.pn-gm .pn-gm__text{min-height:132px;padding:12px 14px;border-radius:var(--r-field);font-size:16px}
.pn-gm .pc-input{font-size:16px}
.pn-gm__label small{font:400 13px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-gm__count{margin:0;text-align:right;font:600 12px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-gm .pn-checkrow,.pn-l3c__form .pn-checkrow{display:flex;gap:12px;align-items:flex-start;min-height:40px;padding:2px 2px 0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2);cursor:pointer}
.pn-gm .pn-checkrow .pc-check{margin-top:1px}
.pn-gm .pn-checkrow a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-gm .pn-fielderr{display:flex;align-items:flex-start;gap:6px;margin:0;padding:0 2px;font:700 13px/1.35 var(--font-sans);color:var(--danger);text-align:left}   /* never the wizard's centred error line */
.pn-gm .pn-fielderr .pc-ico{flex:none;width:16px;height:16px;margin-top:1px}
.pn-gm .pn-fielderr[hidden]{display:none}
.pn-gm__send{margin-top:2px}
.pn-gm__done{display:grid;gap:8px;justify-items:start;outline:none}
.pn-gm__done[hidden]{display:none}
.pn-gm__ok{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.pn-gm__dh{margin:4px 0 0;font:700 var(--fs-section)/var(--lh-head) var(--font-display);color:var(--ink)}
.pn-gm__dp{margin:0;font:400 15px/1.45 var(--font-sans);color:var(--ink)}
.pn-gm__quote{margin:4px 0;padding:10px 14px;border-left:0;background:var(--t-tint);border-radius:var(--r-rules);background:var(--sunken);border-radius:0 var(--r-field) var(--r-field) 0;font:400 14px/1.5 var(--font-sans);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;max-width:100%}
.pn-gm__done .pc-help a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pn-gm.is-sent .pn-gm__head{opacity:.9}
@media (max-width:700px){
  .pn-gm .pc-input:not(textarea),.pn-gm .pc-btn{min-height:44px}
}

/* art director pass 27.10. (group D, the guest profile kit) */
/* D-025: whole rows only — the posts grid stretches its cards instead of leaving empty slots */
.pn-dtprof .pn-grid.pn-dtcards{--dt-cols:repeat(auto-fit,minmax(180px,1fr))}
/* D-026: three reviews in two columns left a 390 × 180 hole; one column until there are four */
.pn-dtprof .pn-dtrevs:not(:has(> :nth-child(4))){columns:1}
/* D-031 / D-032: one fact takes the row; facts sit side by side at their own width */
.pn-dtprof .pn-dtfacts .pc-facts__list:has(> :only-child){grid-template-columns:minmax(0,1fr)}
@media (min-width:701px) and (max-width:1100px){.pn-dtprof .pn-dtfacts .pc-facts__list{grid-template-columns:repeat(auto-fill,minmax(140px,max-content));column-gap:32px}}
.pn-dtprof .pc-door{padding:var(--panel-pad)}   /* D-017: the side stack's text edges line up */
/* Community mode (owner 25.10.): the guest listing as her post (templates/cm_ad_post.php), 1:1 from the approved mockup
   design/v2/listing-post-guest.html v2. Layout, sizes and spacing are the mockup's; colours are the site tokens of the
   same names (canvas, bg, surface, sunken, ink, ink-2, ink-3, blush, line), so the page follows the light and dark theme.
   pn-cp-* only. */
.pn-cp{max-width:1200px;margin:0 auto;padding:12px 0 120px}   /* visual audit VG-003: the page frame gives the gutter; no second one */
.pn-cp .pn-dtcrumbs,.pn-cp nav[aria-label]{margin:2px 0 12px}
.pn-cp-post{display:grid;gap:14px}

/* creator row */
.pn-cp-who{display:flex;align-items:center;gap:12px}
.pn-cp-av{width:48px;height:48px;border-radius:50%;padding:2px;background:conic-gradient(var(--blush),var(--accent-soft),var(--blush));flex:none;display:block}
.pn-cp-av > span,.pn-cp-av > img{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--sunken);border:2px solid var(--bg);font-weight:700;font-size:18px;color:var(--pink-glyph);object-fit:cover}
.pn-cp-who__t{display:grid;gap:1px;min-width:0}
.pn-cp-who__n{display:flex;align-items:center;gap:5px;font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
.pn-cp-who__n .pc-verified{margin-left:0}
.pn-cp-who__m{color:var(--ink-2);font-size:13px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pn-cp-st{color:var(--pink-glyph);font-weight:700}
.pn-cp-follow{margin-left:auto;border:1px solid var(--line-2);border-radius:var(--radius-full);padding:7px 14px;font:600 13px/1.2 var(--font-sans);color:var(--ink);background:var(--field);cursor:pointer}   /* tonal (owner 18.10.): the pill reads by its surface even where the line is quiet */

/* gallery: swipe on phones, thumbs on desktop, no zoom */
.pn-cp-gal{position:relative;border-radius:var(--r-box);overflow:hidden;background:var(--surface);margin-top:12px}
.pn-cp-gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pn-cp-gal__track::-webkit-scrollbar{display:none}
.pn-cp-gal__track img{flex:0 0 100%;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;scroll-snap-align:center;display:block}
.pn-cp-gal__n{position:absolute;top:12px;right:12px;background:var(--scrim);color:var(--paper);border-radius:var(--radius-full);padding:3px 9px;font-weight:700;font-size:12px}
.pn-cp-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 2px}
.pn-cp-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.pn-cp-dots i.is-on{background:var(--blush);width:18px;border-radius:3px}
.pn-cp-thumbs{display:none}

/* actions under the gallery, social style */
.pn-cp-acts{display:flex;align-items:center;gap:2px;margin:2px -8px 0}
.pn-cp-ib{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:transparent;border:0;color:var(--ink);cursor:pointer}
.pn-cp-ib svg{width:24px;height:24px}
.pn-cp-views{margin-left:auto;margin-right:8px;color:var(--ink-3);font-size:13px;display:flex;gap:6px;align-items:center}
.pn-cp-views svg{width:16px;height:16px}

/* right column: spacing per block */
.pn-cp-side{display:block}

/* her post: title, her words, facts */
.pn-cp-story-blk{margin-top:18px}
.pn-cp-h{font-size:24px;line-height:1.18;font-weight:700;letter-spacing:-.018em;margin:0;max-width:22ch;text-wrap:balance;color:var(--ink)}
.pn-cp-hand{display:flex;align-items:center;gap:6px;font-family:'Caveat',cursive;color:var(--pink-glyph);font-size:22px;line-height:1;margin:14px 0 8px}
.pn-cp-hand svg{width:26px;height:18px;margin-top:6px;opacity:.85}
.pn-cp-story{position:relative;max-width:64ch;color:var(--ink);font-size:16px;line-height:1.65;letter-spacing:.003em}
.pn-cp-story p{margin:0 0 .85em}
.pn-cp-story p:last-child{margin-bottom:0}
.pn-cp-story.is-clamped{max-height:calc(1.65em * 7);overflow:hidden;
  -webkit-mask-image:linear-gradient(black calc(100% - 3.3em),transparent);mask-image:linear-gradient(black calc(100% - 3.3em),transparent)}
.pn-cp-more{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--accent-text);font:700 14px/1 inherit;padding:8px 0;cursor:pointer;text-decoration:none}
.pn-cp-more svg{width:16px;height:16px;transition:transform .15s}
.pn-cp-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.pn-cp-story-blk > .pn-cp-more{margin-top:4px}
.pn-cp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;max-width:64ch}
.pn-cp-tag{border-radius:var(--radius-full);background:var(--field);color:var(--ink-2);padding:5px 11px 6px;font-weight:600;font-size:13px;line-height:1.2}
.pn-cp-tag b{color:var(--pink-glyph);opacity:.75;font-weight:700;margin-right:1px}

/* the one action */
.pn-cp-cta-blk{margin-top:26px}
.pn-cp-btn{display:flex;width:100%;gap:9px}   /* visual audit round 6: ui_btn pink (pc-btn--primary) carries the look; here only the full width */
.pn-cp-btn:focus-visible,.pn-cp-follow:focus-visible,.pn-cp-ib:focus-visible,.pn-cp-more:focus-visible,.pn-cp-report:focus-visible,.pn-cp-tz:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}   /* VG-007: the site's focus ring */
.pn-cp-btn svg{width:22px;height:22px}
.pn-cp-deal{color:var(--ink-3);font-size:12.5px;line-height:1.45;margin:10px 4px 0;text-align:center;text-wrap:balance}

/* community proof: one member review, then how posts are checked */
.pn-cp-proof{margin-top:30px;background:var(--surface);border-radius:var(--r-box);padding:16px}
.pn-cp-proof__h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.pn-cp-proof__h h2{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.pn-cp-proof__score{margin-left:auto;white-space:nowrap;color:var(--pink-glyph);font-weight:700;font-size:14px}
.pn-cp-proof__score small{color:var(--ink-3);font-weight:600;font-size:13px}
.pn-cp-bubble{margin:0;background:var(--sunken);border-radius:4px 16px 16px 16px;padding:11px 14px 12px}
.pn-cp-stars{display:block;color:var(--pink-glyph);letter-spacing:2px;font-size:12px;margin-bottom:4px}
.pn-cp-bubble blockquote{margin:0;color:var(--ink);font-size:15px;line-height:1.5}
.pn-cp-proof > .pn-cp-more{margin-top:6px;padding-bottom:0}

.pn-cp-safe{margin-top:12px;background:var(--bg);border-radius:var(--r-box);padding:14px 16px;display:grid;gap:10px}
.pn-cp-line{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:13px;line-height:1.5;margin:0}
.pn-cp-line > svg{width:17px;height:17px;color:var(--ink-3);margin-top:1px;flex:none}
.pn-cp-line--seal > .pc-verified{color:var(--pink-glyph);margin-left:0}
.pn-cp-line b{color:var(--ink);font-weight:700}
.pn-cp-report{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);font-size:12px;font-weight:600;justify-self:start;margin-left:27px;text-decoration:none}
.pn-cp-report svg{width:13px;height:13px}
.pn-cp-report:hover{color:var(--ink-2)}

/* more posts by her */
.pn-cp-rail{margin-top:44px;display:grid;gap:12px}
.pn-cp-rail__h{display:flex;align-items:baseline;gap:10px}
.pn-cp-rail__h h2{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.pn-cp-rail__h a{margin-left:auto;color:var(--accent-text);font-weight:700;font-size:14px;text-decoration:none}
.pn-cp-teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pn-cp-tz{display:grid;gap:6px;align-content:start;text-decoration:none}
.pn-cp-tz img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-box);display:block;background:var(--surface)}
.pn-cp-tz span{font-weight:700;font-size:13px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.pn-cp-sell{margin:28px 0 0;color:var(--ink-3);font-size:13px}
.pn-cp-sell a{color:var(--accent-text);font-weight:700;text-decoration:none}

/* sticky bar (phone) */
.pn-cp-bar{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg-veil);backdrop-filter:blur(10px)}
.pn-cp-mini{display:flex;align-items:center;gap:8px;min-width:0}
.pn-cp-mini .pn-cp-av{width:34px;height:34px}
.pn-cp-mini .pn-cp-av > span{font-size:13px}
.pn-cp-mini b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.pn-cp-bar .pn-cp-btn{width:auto;flex:0 0 auto;margin-left:auto}

/* desktop */
@media (min-width:960px){
  .pn-cp{padding:20px 0 60px}
  .pn-cp-post{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}
  .pn-cp-gcol{position:sticky;top:78px}
  .pn-cp-gcol > .pn-cp-who{display:none}
  .pn-cp-gcol .pn-cp-gal{margin-top:0}
  .pn-cp-gal__track img{max-height:calc(100vh - 230px);min-height:420px}
  .pn-cp-dots{display:none}
  .pn-cp-thumbs{display:flex;gap:8px;margin-top:10px}
  .pn-cp-thumbs button{flex:0 0 64px;height:80px;padding:0;border:0;border-radius:var(--r-btn);overflow:hidden;background:var(--surface);opacity:.55;cursor:pointer;outline:2px solid transparent;outline-offset:2px}
  .pn-cp-thumbs button.is-on{opacity:1;outline-color:var(--blush)}
  .pn-cp-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
  .pn-cp-story-blk{margin-top:24px}
  .pn-cp-h{font-size:32px}
  .pn-cp-hand{margin-top:16px}
  .pn-cp-story{font-size:17px}
  .pn-cp-story.is-clamped{max-height:calc(1.65em * 8)}
  .pn-cp-cta-blk{margin-top:28px}
  /* owner 26.10. ("sieht scheisse aus"): on desktop the message button is a button, not a pink bar across the column; the
     deal line and the checks sit left under it, quiet */
  .pn-cp-cta-blk .pn-cp-btn{display:inline-flex;width:auto;padding:12px 24px;font-size:15px}
  .pn-cp-deal{text-align:left;margin:10px 2px 0;font-size:12.5px}
  .pn-cp-safe{margin-top:18px;padding:12px 14px;gap:8px}
  .pn-cp-report{margin-left:27px}
  .pn-cp-teasers{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pn-cp-bar{display:none}
}
@media (max-width:959px){ .pn-cp-side > .pn-cp-who--side{display:none} }

/* visual audit 26.10.: VG-004 a tablet (701-959) showed the photo 672 px wide and 840 high, the title a screen below — the
   gallery keeps a phone-like width there; VG-009 the phone bar covered the footer's last row */
@media (min-width:701px) and (max-width:959px){.pn-cp-gcol{max-width:480px;margin-inline:auto;width:100%}}
@media (max-width:700px){body:has(.pn-cp-bar) .pn-gfooter{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}   /* art director 27.10. D-043: the bar is a phone bar now */
@media (max-width:959px){.pn-cp-cta-blk .pn-cp-btn{display:none}.pn-cp-cta-blk .pn-cp-deal{margin-top:0}}   /* visual audit VG-008: the sticky bar carries the one message key on phones */
/* The editorial guides of community mode (owner 26.10., templates/cm_guide.php). Art director pass 27.10.: they sit in the
   info pages' frame (guide.css, "one editorial frame"); here only what is theirs: the pink marker on the h1's second
   sentence (one treatment in both themes), the brand figure at the top of the rail, the closing call on pink.
   Site tokens only (light + dark). */
.pn-cg__h em{font-style:normal;padding:0 .08em;background:var(--pink);color:var(--anthracite);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn-gd .pn-cg__h{line-height:1.14}
.pn-cg__fig{display:none;margin:0}
.pn-cg__fig img{display:block;width:150px;height:auto}
.pn-cg__fig figcaption{margin-top:8px;white-space:nowrap}
@media (min-width:1101px){.pn-cg__fig{display:block;margin:0 0 6px}}

.pn-gd-body > .pn-cg__cta{max-width:var(--measure-prose);margin-top:var(--ed-sec);padding:28px;border-radius:var(--r-tile);background:var(--pink);color:var(--anthracite)}
@media (max-width:700px){.pn-gd-body > .pn-cg__cta{padding:var(--panel-pad)}}
.pn-gd-body.pn-prose > .pn-cg__cta{margin-top:var(--ed-sec)}
.pn-cg__cta .pn-cg__ctah{margin:0;font:700 var(--fs-ed-h2)/1.2 var(--font-display);letter-spacing:var(--tr-head);color:var(--anthracite);text-wrap:balance}
.pn-cg__cta > p{margin:10px 0 0;font-size:var(--fs-ed-body);line-height:1.5}
.pn-cg__ctago{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:20px 0 0}
.pn-cg__ctago small{font:600 12px/1.3 var(--font-label);color:var(--anthracite)}
@media (max-width:700px){.pn-cg__ctago .pc-btn{flex:1 1 100%}}
/* The Panty Game (owner 26.10., community mode only, templates/partials/landing_game.php): the creators' four steps,
   compact (owner: "total Platzverschwendung … nicht kompakt genug"). Desktop: four steps side by side, a small scene over
   each text. Tablets: two by two. Phones: one row per step, the scene left, the text right. Every scene is drawn at its
   natural size inside .pn-pg__fit and scaled into a fixed frame, so it reads the same on every screen.
   Site tokens only (light + dark). pn-pg-* only. */
.pn-pg{background:var(--bg);color:var(--ink);padding:64px 0 56px}
.pn-pg__head{max-width:640px}
.pn-pg__h{margin:6px 0 0}
.pn-pg__h em{font-style:normal;color:inherit;padding:0 .06em;background:linear-gradient(transparent 58%,var(--pink) 58% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-theme="dark"] .pn-pg__h em{background:var(--pink);color:var(--anthracite)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-pg__h em{background:var(--pink);color:var(--anthracite)}}
.pn-pg__sub{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--ink-2)}

/* the steps */
.pn-pg__steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.pn-pg__step{display:grid;grid-template-columns:116px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border-radius:var(--r-box);background:var(--surface)}
.pn-pg__n{display:block;font:600 13px/1 var(--font-label);color:var(--pink-glyph)}
.pn-pg__sh{margin:5px 0 4px;font:700 19px/1.15 var(--font-display);letter-spacing:var(--tr-head);color:var(--ink)}
.pn-pg__sp{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}

/* a scene: a fixed frame, the composition scaled into it */
.pn-pg__vis{position:relative;display:grid;place-items:center;height:132px;border-radius:var(--r-box);background:var(--sunken);overflow:hidden}
.pn-pg__fit{display:grid;place-items:center;transform:scale(.46);transform-origin:center}
.pn-pg__card{background:var(--surface);border-radius:var(--r-box);box-shadow:0 18px 36px -26px var(--scrim)}
.pn-pg__av{display:block;flex:none;border-radius:50%;overflow:hidden;background:var(--sunken)}
.pn-pg__av img{display:block;width:100%;height:100%;object-fit:cover}
.pn-pg__av--lg{width:76px;height:76px;margin:-38px auto 8px;border:4px solid var(--surface)}
.pn-pg__av--sm{width:34px;height:34px}
.pn-pg__av--blank{background:var(--pink-soft)}
.pn-pg__name{display:inline-flex;align-items:center;gap:4px;min-width:0;font-weight:700;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-pg__name--blank{display:inline-block;width:110px;height:12px;border-radius:var(--r-label);background:var(--sunken)}
.pn-pg__ver{flex:none;color:var(--pink-glyph)}
.pn-pg__pic{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-box);background:var(--sunken)}
.pn-pg__ptitle{display:block;padding:8px 4px 2px;font-weight:700;font-size:13px;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 01 her profile */
.pn-pg__prof{width:240px;padding:0 0 14px;text-align:center;overflow:hidden}
.pn-pg__band{display:block;height:56px;background:var(--pink-soft)}
.pn-pg__meta{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.pn-pg__label{display:block;margin:12px 16px 8px;text-align:left;font:600 12px/1 var(--font-label);color:var(--ink-3)}
.pn-pg__ths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 16px}
.pn-pg__th{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-btn);background:var(--sunken)}

/* 02 a post catches an eye, her profile one tap away */
.pn-pg__vis--2 .pn-pg__fit{width:300px;height:300px}
.pn-pg__post{width:190px;padding:8px;transform:rotate(-2.5deg) translateX(-34px)}
.pn-pg__link{position:absolute;left:calc(50% + 8px);bottom:84px;width:70px;height:48px;border:2px dashed var(--pink-glyph);border-color:var(--pink-glyph) var(--pink-glyph) transparent transparent;border-radius:0 52px 0 0;opacity:.8}   /* the dashed arc from her post to her profile chip (CSS, no inline svg) */
.pn-pg__chip{position:absolute;right:0;bottom:22px;display:flex;align-items:center;gap:8px;max-width:240px;padding:7px 7px 7px 8px;border-radius:var(--radius-full)}
.pn-pg__follow{flex:none;padding:6px 12px;border-radius:var(--radius-full);background:var(--pink);color:var(--anthracite);font-weight:700;font-size:12px}

/* 03 a private conversation (an illustration) */
.pn-pg__chat{display:grid;gap:8px;width:280px;padding:14px}
.pn-pg__chathd{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:14px;color:var(--ink)}
.pn-pg__tag{margin-left:auto;padding:4px 8px;border-radius:var(--radius-full);background:var(--sunken);font:600 11px/1 var(--font-label);color:var(--ink-3)}
.pn-pg__b{max-width:82%;padding:9px 13px;border-radius:var(--r-box);font-size:14px;line-height:1.35}
.pn-pg__b--her{justify-self:start;background:var(--sunken);color:var(--ink);border-bottom-left-radius:4px}
.pn-pg__b--me{justify-self:end;background:var(--pink);color:var(--anthracite);border-bottom-right-radius:4px}

/* 04 her post, her call */
.pn-pg__final{display:grid;gap:8px;width:230px;padding:10px}
.pn-pg__fhd{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 2px 0}
.pn-pg__msg{display:flex;align-items:center;justify-content:center;gap:6px;min-height:20px;padding:10px;border-radius:var(--radius-full);background:var(--pink);color:var(--anthracite);font-weight:700;font-size:13px}

/* motion (script on): the chat lines come one after another once the block is in view */
.pn-pg.is-live .pn-pg__b{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.pn-pg.is-live.is-in .pn-pg__b{opacity:1;transform:none}
.pn-pg.is-live .pn-pg__b:nth-child(3){transition-delay:.45s}
.pn-pg.is-live .pn-pg__b:nth-child(4){transition-delay:.9s}

.pn-pg__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:24px 0 0}
.pn-pg__cta small{font-size:13px;color:var(--ink-3)}

@media (min-width:701px){
  .pn-pg__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-pg__step{grid-template-columns:1fr;align-items:start;align-content:start;gap:12px;padding:12px 12px 16px}
  .pn-pg__vis{height:180px}
  .pn-pg__fit{transform:scale(.6)}
  .pn-pg__txt{padding:0 4px}
}
@media (min-width:1101px){
  .pn-pg__steps{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .pn-pg *{transition:none!important}
  .pn-pg.is-live .pn-pg__b{opacity:1;transform:none}
}

/* the community home around the game (art director + PM review 26.10.): the pink block lost its calculator, so "Stay
   private" takes the whole row with its four points side by side; the reviews' join button gets air under the receipt */
.pn-lb--cm .pn-lp-boxes{grid-template-columns:minmax(0,1fr)}
@media (min-width:701px){.pn-lb--cm .pn-lp-priv .pc-priv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px}}
.pn-lb--cm .pn-lp-proof__cta{margin-top:24px}
/* the pink block's fine print under its button (community mode, owner's copy 26.10.) */
.pn-lp-sell__fine{display:block;margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--anthracite);opacity:.78}

/* visual audit 26.10.: VG-001 the dark-theme kicker rule (pink) outranked the on-pink rule, so "For women" was pink on pink
   (1.13:1); VG-005 on phones the illustration covered the pink block's fine print by 8 px; VG-014 the step scenes were cut */
:root:not([data-theme="x"]) .pn-lb .pc-on-pink .pc-kicker,:root:not([data-theme="x"]) .pn-lb .pc-box--cr .pc-kicker{color:var(--anthracite)}
@media (max-width:700px){.pn-lb--cm .pn-lp-sell__art{margin-top:32px}}
@media (max-width:700px){.pn-pg__vis{height:150px}.pn-pg__fit{transform:scale(.4)}}
@media (max-width:700px){.pn-lb--cm :is(.pn-lp-sell__proof,.pn-pg__cta,.pn-lp-laundry__cta,.pn-lp-cta,.pn-lp-proof__cta) .pc-btn{display:flex;width:100%}}   /* VG-012: one width for section keys on phones */
.pn-lb--cm .pn-lp-hero__h{text-wrap:balance}   /* VG-021: the 452 px copy column never fits the second sentence on one line; balanced lines instead of a lone "them." */
/* visual audit VG-011 (26.10.): profiles and "New on panty.com" are two light sections back to back — 64 + 80 px read as a
   hole; the strip follows the profiles at one section gap. The 144 px before the dark and the pink block stay: they are
   the room for those blocks' domes (negative margin-top). */
.pn-lb--cm .pn-line + .pn-lp-fresh{padding-top:0}

/* ==========================================================================
   Art director pass 27.10. (group C: community home, creators, header, footer). Owner: "Kraut und Rüben".
   ========================================================================== */
/* C-001: the game scenes sat off centre and cut — a grid track kept the unscaled size; the scene is placed absolutely and
   scaled from its centre, scene 4 (the tallest) one step smaller so it fits its frame */
.pn-pg__vis{display:block}
.pn-pg__fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--pg-s,.46))}
.pn-pg__vis--4 .pn-pg__fit{--pg-s:.42}
@media (min-width:701px){.pn-pg__fit{--pg-s:.6}.pn-pg__vis--4 .pn-pg__fit{--pg-s:.4}}
@media (max-width:700px){.pn-pg__fit{--pg-s:.4}.pn-pg__vis--4 .pn-pg__fit{--pg-s:.36}}
/* C-012: the game takes the home's section rhythm (was a fixed 64 / 56) */
.pn-lb--cm .pn-pg{padding:var(--lp-pad) 0}
/* C-013 / C-014 / C-044: seven dark and four light grounds met in straight seams; every ordinary section stands on the
   profiles' ground now, only the dark block and the pink block keep their own (their domes mark the change) */
.pn-lb--cm :is(.pn-lp-proof,.pn-lp-guides,.pn-lp-join,.pn-lp-laundry.pn-seotext,.pn-pg){background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg)}
/* C-002: the tablet clamps made the headings bigger than on desktop (69 px at 1100 against 44 at 1440) */
@media (min-width:701px) and (max-width:1100px){
  .pn-lb--cm .pn-lp-proof__h.pc-h-l{font-size:var(--fs-l)}
  .pn-lb--cm .pn-lp-real .pc-sechead .pc-h-m{font-size:var(--fs-m)}
}
/* C-003: every top-level section head of the community home on one step (34 and 44 px mixed); the boxes' heads below it */
.pn-lb--cm :is(.pn-lp-real,.pn-lp-fresh,.pn-lp-join) .pc-sechead .pc-h-m,.pn-lb--cm .pn-lp-join__h.pc-h-m{font-size:var(--fs-l)}
.pn-lb--cm .pn-lp-buy .pn-lp-how__h{font-size:var(--fs-section);color:var(--dk-ink)}   /* C-004: no pure white, a box head */
/* C-006: one lede on the home */
.pn-lb--cm :is(.pn-lp-buy__lede,.pn-lp-proof__p,.pn-pg__sub,.pc-sechead p){font-size:var(--fs-ed-lede);line-height:1.5;color:var(--ink-2)}
.pn-lb--cm .pn-lp-buy :is(.pn-lp-buy__lede){color:var(--dk-ink-2)}
/* C-011: the profiles' kicker stood 9 px under the hero caption */
.pn-lb--cm .pn-lp-hero + .pn-lp-real--next{padding-top:calc(var(--lp-pad) / 2)}
/* C-022: in light the guides kicker was pink on cream (1.6:1) */
.pn-lb .pn-lp-laundry .pc-kicker{color:var(--ink)}
[data-theme="dark"] .pn-lb .pn-lp-laundry .pc-kicker{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lb .pn-lp-laundry .pc-kicker{color:var(--pink)}}
.pn-lp-mast__meta{font:600 12px/1 var(--font-label);letter-spacing:0;color:var(--ink-3)}   /* C-023: the only tracked caps label */
/* C-029: cream cards inside the dark block → the block's own surface */
.pn-lb--cm .pc-dk .pc-care{background:var(--dk-card);color:var(--dk-ink);border-radius:var(--r-box);box-shadow:none}
.pn-lb--cm .pc-dk .pc-care::before,.pn-lb--cm .pc-dk .pc-care::after{display:none}
/* C-036: the door keys take the full width on phones like every other section key */
@media (max-width:700px){.pn-lb--cm .pn-lp-doors .pc-door .pc-btn{display:flex;width:100%}}
/* C-017 / C-043: on phones the members figure ran 30 px out of its box and the caption sat on her legs */
@media (max-width:700px){
  .pn-lb--cm .pn-lp-buy__jess{height:100%;bottom:0;right:0}
  .pn-lb--cm .pn-lp-buy__art .pc-illu{position:static;margin-top:6px;text-align:right}
}
/* C-056: one footer colour on every page (the home had its own darker one) */
body:has(.pn-lb) .pn-gfooter{background:var(--chrome)}
@media (min-width:701px) and (max-width:1100px){.pn-lb--cm .pn-lp-laundry__h{font-size:min(var(--fs-l),clamp(34px,4.9vw,48px))}}   /* C-002: never above the desktop size; still narrow for long pt words at 701 */
/* C-029 follow-up: the step cards on the dark block's own card tone need the block's inks (the cream card's grey was 1.4:1 there) */
.pn-lb--cm .pc-dk .pc-care h3{color:var(--dk-ink)}
.pn-lb--cm .pc-dk .pc-care p{color:var(--dk-ink-2)}
.pn-lb--cm .pc-dk .pc-care__n{color:var(--pink)}
.pn-lb--cm .pc-dk .pc-care__n *{color:inherit;opacity:1}
.pn-lb--cm .pc-dk .pc-care__num{color:var(--pink)}
.pn-lb--cm .pn-lp-buy__jess,.pn-lb--cm .pn-lp-buy__jess img{filter:none}   /* C-016: the 40 px rim shadow lit the alpha noise of the cut-out into a dark rectangle */
/* C-028: step titles at 19 px untracked like every head of that size */
.pn-pg__sh{letter-spacing:0}
/* C-041: the game's highlight is the hero's tape in both themes (light had an underline marker) */
.pn-pg__h em{background:var(--pink);color:var(--anthracite);padding:0 .08em}
/* C-045: the guides kicker 24 px under the lace edge while the others have the section padding */
.pn-lb--cm .pn-lp-sell + .pn-lp-laundry.pn-seotext{padding-top:var(--lp-pad)}
/* C-027: post captions start on one line whether the title runs one or two lines */
.pn-lb--cm .pn-lp-pairs .pn-prodcard .pc-card__title{min-height:2lh}
@media (min-width:701px) and (max-width:959px){.pn-lb--cm .pc-dk .pc-care h3{min-height:2lh}}   /* C-031: card bodies start on one line at 768 */

/* premium editorial pass (owner 27.10.): the community home's ordinary sections take the ambient pink from alternating
   sides (--lp-real-bg right, --lp-real-bg-l left), centred so it fades out before each edge: depth without a seam. */
.pn-lb--cm :is(#sellers,.pn-lp-proof,.pn-lp-laundry.pn-seotext){background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg-l)}
.pn-lb--cm :is(#fresh,.pn-pg,.pn-lp-join){background:var(--lp-grain) 0 0/160px 160px,var(--lp-real-bg)}

/* ==========================================================================
   Home 100 pass (owner 27.10.: "die Startseite sieht unruhig und zusammengeflickt aus", list in
   docs/visual-audit/startseite-100-27-10.md). Community home only (.pn-lb--cm). One rhythm, one head line, one card
   family, one accent per head; the dark and the pink block are straight bands (no domes, no lace hem).
   ========================================================================== */
.pn-lb--cm{--cm-sec:clamp(40px,5vw,64px);--cm-band:clamp(56px,7vw,96px);--cm-gap:20px}
/* A 1-9, F 83-85: every ordinary section the same air above and below; the bands their own, larger air; no overlap */
.pn-lb--cm > section{margin-top:0}
.pn-lb--cm :is(.pn-lp-real,.pn-lp-real--next,.pn-lp-fresh,.pn-line + .pn-lp-fresh,.pn-lp-proof,.pn-pg,.pn-lp-laundry.pn-seotext,.pn-lp-sell + .pn-lp-laundry.pn-seotext,.pn-lp-hero + .pn-lp-real--next,.pn-lp-join){padding:var(--cm-sec) 0}
.pn-lb--cm > section:has(+ :is(.pn-lp-buy,.pn-lp-sell)){padding-bottom:var(--cm-sec)}
.pn-lb--cm :is(.pn-lp-buy,.pn-lp-sell),.pn-lb--cm :is(.pn-lp-buy,.pn-lp-sell).pn-raw{margin-top:0;border-radius:0;padding:var(--cm-band) 0}
.pn-lb--cm .pn-lp-join{padding-bottom:calc(var(--cm-sec) + 16px)}
.pn-lb--cm .pn-lp-sell + .pn-lp-laundry::before{display:none}

/* B 12-13, C 33-34, 43: one head stack everywhere — kicker, 14 px, head, 12 px, lede, 32 px, the content */
.pn-lb.pn-lb--cm .pc-wrap .pc-kicker:has(+ h2){display:flex;width:fit-content;margin:0 0 14px}
.pn-lb--cm .pc-kicker + h2{margin-top:0}
.pn-lb--cm :is(.pc-sechead h2,.pn-lp-buy__h,.pn-pg__h,.pn-lp-sell__h,.pn-lp-gcm__h,.pn-lp-join__h){font-size:var(--fs-l);line-height:1.08}
.pn-lb--cm :is(.pc-sechead h2 + p,.pn-lp-buy__h + .pn-lp-buy__lede,.pn-pg__h + .pn-pg__sub,.pn-lp-join__h + .pn-lp-join__p,.pn-lp-gcm__h + .pn-lp-gcm__lede){margin-top:12px}
.pn-lb--cm .pc-sechead{margin-bottom:32px}
.pn-lb--cm .pn-pg__steps{margin-top:32px}
.pn-lb--cm .pn-lp-join__head{margin-bottom:32px}
.pn-lb--cm :is(.pn-lp-buy__lede,.pn-lp-buy__ask,.pn-lp-sell__lede p,.pn-lp-gcm__lede,.pn-lp-join__p,.pn-pg__sub,.pc-sechead p){font-size:var(--fs-ed-lede);line-height:1.5;color:var(--ink-2)}
.pn-lb--cm .pn-lp-buy :is(.pn-lp-buy__lede,.pn-lp-buy__ask){color:var(--dk-ink-2)}
.pn-lb--cm .pn-lp-sell .pn-lp-sell__lede p{color:var(--anthracite)}
.pn-lb--cm :is(.pn-lp-buy__ask,.pn-lp-sell__lede p + p){margin-top:10px}
.pn-lb--cm :is(.pn-lp-sell__fine,.pn-pg__cta small,.pn-lp-cta__stack p,.pn-lp-cta__stack > p:first-child){font-size:14px;line-height:1.5}

/* D 51-52: one text pink (the kicker's) for the brand word; the tape belongs to the hero's h1 alone */
.pn-lb--cm .pc-brandword{color:var(--pink-glyph)}
[data-theme="dark"] .pn-lb--cm .pc-brandword{color:var(--pink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pn-lb--cm .pc-brandword{color:var(--pink)}}
.pn-lb--cm .pn-pg__h .pc-brandword{background:none;padding:0}
/* D 53: the hero tape flat (no sheen), one pink, lines cut cleanly */
.pn-lb--cm .pn-lp-hero .pc-hl{background:var(--pink)}

/* B 20-21, E 71: profiles and posts on one four-column grid from 701 px (no cut card at 1100); phones keep the swipe rail */
@media (min-width:701px){
  .pn-lb--cm .pn-lp-sellrail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cm-gap);overflow:visible;margin-inline:0;padding-inline:0}
  .pn-lb--cm .pn-lp-sellrail > .pc-scard{width:auto}
  .pn-lb--cm .pn-lp-sellrail > :nth-child(n+5){display:none}
  .pn-lb--cm .pn-lp-pairs{gap:var(--cm-gap)}
}

/* E 66-68, 78: one card family — 16 px corners, the card shadow, no edge, one lift on hover */
.pn-lb--cm :is(.pc-dk .pc-care,.pn-pg__step,.pn-lp-q,.pn-lp-doors .pc-door,.pn-lp-sell .pn-lp-priv){border:0;border-radius:var(--r-card-x);box-shadow:var(--sh-card)}
.pn-lb--cm .pn-lp-doors{gap:var(--cm-gap)}
.pn-lb--cm .pn-lp-doors .pc-door::after{display:none}   /* D 59: no sheen spot */
.pn-lb--cm .pn-lp-doors .pc-door--buy{background:var(--dk-card)}
.pn-lb--cm .pn-lp-doors .pc-door--sell{background:var(--pink)}
.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step){transition:transform var(--dur-card) var(--ease-out),box-shadow var(--dur-card) var(--ease-out)}
.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step):hover{transform:translateY(-3px);box-shadow:var(--sh-card-hover)}
@media (prefers-reduced-motion:reduce){.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step){transition:none}.pn-lb--cm :is(.pn-lp-doors .pc-door,.pn-pg__step):hover{transform:none}}
.pn-lb--cm .pc-dk .pn-lp-steps{align-items:stretch}

/* B 16, 19, F 89: the members band reads like the women's band — copy on the content line left, the photo right (mirrored,
   so she still faces the copy), its width capped on very wide screens; the label at the photo's lower right */
@media (min-width:1101px){
  .pn-lb--cm .pn-raw--buy{--raw-w:min(62%,1120px)}
  .pn-lb--cm .pn-raw--buy .pn-raw__bg{left:auto;right:0;transform:scaleX(-1)}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__top{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__main{grid-column:1}
  .pn-lb--cm :is(.pn-raw--l,.pn-raw--sell) .pn-raw__illu{left:auto;right:max(var(--gutter),calc((100% - var(--main-max)) / 2))}
}
/* C 37, 39-40: "How it works" / "What we check" as eyebrow lines, the steps numbered like the game's (13 px, pink) */
.pn-lb--cm .pn-lp-buy .pn-lp-how{margin-top:56px}
.pn-lb--cm .pn-lp-buy .pn-lp-how--safe{margin-top:40px}
.pn-lb--cm .pn-lp-buy .pn-lp-how__h{margin:0 0 16px;font:600 13px/1.2 var(--font-label);letter-spacing:0;color:var(--pink)}
.pn-lb--cm .pc-dk .pc-care__n{display:block;margin:0 0 6px;font:600 13px/1.2 var(--font-label);white-space:nowrap}
.pn-lb--cm .pc-dk .pc-care__num{font:inherit;letter-spacing:0}
.pn-lb--cm .pc-dk .pc-care__lbl{color:var(--dk-ink-2)}
.pn-lb--cm .pc-dk .pc-care__lbl::before{content:" · "}
.pn-lb--cm .pc-dk .pc-care h3{margin:0 0 6px;font-size:19px;line-height:1.2;letter-spacing:0}
.pn-lb--cm .pc-dk .pc-care p{font-size:14.5px;line-height:1.45}
.pn-lb--cm .pn-lp-buy .pn-lp-cta{margin-top:40px}

/* E 57-58, 79-80: the women's band without paper — "Stay private" a dark tile on the pink, no edge, no double shadow */
.pn-lb--cm .pn-lp-sell .pn-lp-priv{background:var(--dk-card);color:var(--dk-ink)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv :is(.pc-box__h,b){color:var(--dk-ink)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv :is(.pn-lp-box__p,small){color:var(--dk-ink-2)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-box__h{font-size:var(--fs-section)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv li::before{border-color:var(--dk-ink-2)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv::before,.pn-lb--cm .pn-lp-sell .pn-lp-priv::after{display:none}
.pn-lb--cm .pn-lp-sell .pn-lp-notes,.pn-lb--cm .pn-lp-sell .pn-lp-boxes{margin-top:48px}

/* member reviews (landing_receipt, community mode): three dark quote tiles under the section head, the count under them */
.pn-lp-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--cm-gap)}
.pn-lp-q{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:24px;background:var(--surface);color:var(--ink)}
.pn-lp-q q{display:block;font-size:17px;line-height:1.5;quotes:"\201C" "\201D"}
.pn-lp-q small{font-size:13px;line-height:1.4;color:var(--ink-3)}
.pn-lp-q small b{font-weight:600;color:var(--ink-2)}
.pn-lp-q small a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.pn-lp-qfoot{margin:24px 0 0;max-width:68ch;font-size:15px;line-height:1.5;color:var(--ink-3)}
.pn-lp-qfoot b{font-weight:700;color:var(--ink)}
.pn-lb--cm .pn-lp-proof--cm .pn-lp-proof__cta{margin-top:20px}
@media (min-width:701px){.pn-lb--cm .pn-lp-proof--cm .pc-sechead{flex-wrap:nowrap;align-items:flex-end}.pn-lb--cm .pn-lp-proof--cm .pc-sechead > .pc-btn{flex:none}}
@media (max-width:700px){.pn-lb--cm .pn-lp-proof--cm .pc-sechead > .pn-lp-door--top{display:none}.pn-lb--cm .pn-lp-proof--cm .pn-lp-door--end{display:flex;margin-top:18px}}

/* guides (landing_edit, community mode): the copy on the content line, her figure beside it, no arch, no chips */
.pn-lp-gcm__wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end}
.pn-lp-gcm__copy{max-width:640px}
.pn-lp-gcm__h{margin:0}
.pn-lp-gcm__two{margin-top:20px}
.pn-lp-gcm__two p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.pn-lp-gcm__two p + p{margin-top:8px}
.pn-lp-gcm__two b{color:var(--ink)}
.pn-lp-gcm__go{margin:24px 0 0}
.pn-lp-gcm__fig{margin:0;display:grid;justify-items:end;gap:6px}
.pn-lp-gcm__img{display:block;width:auto;height:220px;filter:var(--lp-cut-rim)}
.pn-lp-gcm__fig .pc-illu{position:static;font-size:11px;color:var(--ink-2);opacity:1}
@media (min-width:960px){
  .pn-lp-gcm__wrap{grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:48px;align-items:center}
  .pn-lp-gcm__fig{justify-self:center}
  .pn-lp-gcm__img{height:380px}
}
/* B 23: the hero lede ran behind her foot — the copy column narrower, the lying figure a little smaller on wide screens */
@media (min-width:1101px){
  .pn-lb--cm .pn-lp-hero__sub{max-width:30rem}
  .pn-lb--cm .pn-alt .pn-alt__art{width:min(58%,1040px)}
}
/* phones (A 6, C 40, E 69-70): the members band's steps and checks are the same separate dark tiles as on desktop — the
   number line over the title (no 40 px number column that cut "Message"), no cream list with white corners */
@media (max-width:700px){
  .pn-lb--cm .pn-lp-buy .pn-lp-steps{gap:10px}
  .pn-lb--cm .pn-lp-buy .pn-lp-step,.pn-lb--cm .pn-lp-buy .pn-lp-safe__i{display:block;padding:16px 18px;border-radius:var(--r-card-x);background:var(--dk-card);box-shadow:var(--sh-card)}
  .pn-lb--cm .pn-lp-buy .pn-lp-safe__i + .pn-lp-safe__i{border-top:0}
  .pn-lb--cm .pn-lp-buy .pn-lp-how--safe .pn-lp-steps{border-radius:0;background:none;overflow:visible}
  .pn-lb--cm .pn-lp-buy .pn-lp-step .pc-care__n{display:block;padding:0}
  .pn-lb--cm .pn-lp-buy .pn-lp-how{margin-top:40px}
  .pn-lb--cm .pn-lp-buy .pn-lp-how--safe{margin-top:32px}
}
/* tablets 701-1100: the copy ran over both band photos — the photo on top over the full width, the copy under it (the phone
   order, a taller photo) */
@media (min-width:701px) and (max-width:1100px){
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell){--raw-w:100%;--raw-ph:440px;padding-top:0}
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell) .pn-raw__bg{left:0;right:0;width:100%;height:var(--raw-ph);transform:none;
    -webkit-mask-image:linear-gradient(to bottom,var(--ink) 50%,transparent),linear-gradient(to bottom,var(--ink) 70%,transparent);mask-image:linear-gradient(to bottom,var(--ink) 50%,transparent),linear-gradient(to bottom,var(--ink) 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell) > .pc-wrap{padding-top:calc(var(--raw-ph) - 48px)}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__top,.pn-lb--cm .pn-raw--sell .pn-lp-sell__top{grid-template-columns:minmax(0,1fr);min-height:0}
  .pn-lb--cm .pn-raw--buy .pn-lp-buy__main{grid-column:1;max-width:640px}
  .pn-lb--cm .pn-raw--sell .pn-lp-sell__top > *{max-width:640px}
  .pn-lb--cm :is(.pn-raw--buy,.pn-raw--sell) .pn-raw__illu{top:calc(var(--raw-ph) - 80px);bottom:auto;left:auto;right:var(--gutter)}
  .pn-lb--cm .pn-raw__bg--alt.pn-raw__bg--buy{object-position:30% 35%}
  .pn-lb--cm .pn-raw__bg--alt.pn-raw__bg--sell{object-position:70% 30%}
}
@media (min-width:701px) and (max-width:959px){
  .pn-lp-gcm__wrap{grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
  .pn-lp-gcm__img{height:300px}
}
@media (max-width:700px){.pn-lp-gcm__fig{justify-items:center}}
.pn-lp-gcm__fig .pc-illu{white-space:nowrap}
/* owner 27.10. ("da fehlen Icons um rechts die Fläche zu füllen"): "Stay private" — each point with its icon well, as the
   trust row of the creators page; no list bullet */
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-priv li{display:flex;align-items:flex-start;gap:14px;padding-left:0}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-priv li::before{display:none}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pn-rowicon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--chrome-well);color:var(--dk-ink)}
.pn-lb--cm .pn-lp-sell .pn-lp-priv .pc-priv li > div{min-width:0}
/* Community mode (owner 25.10.): the Top 100 creators (templates/cm_top.php, design/v2/top100-guest-cm.html) and the
   category pages as posts (partials/cm_hub_main.php + partials/cm_postcard.php, design/v2/hub-postcard-cm.html). Layout,
   sizes and spacing are the mockups'; colours are the site tokens of the same names, so both follow the light and dark
   theme. pn-ctp-* (Top 100) and pn-chb-* (category page) only. */

/* ---------- Top 100 ---------- */
.pn-ctp{max-width:1232px;margin:0 auto;padding:12px 16px 56px}
.pn-ctp-hd{display:grid;gap:8px;margin-bottom:14px}
.pn-ctp-hd h1{font-size:28px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--ink)}
.pn-ctp-hd h1 small{display:block;font-size:13px;font-weight:700;color:var(--pink-glyph);margin-bottom:6px}   /* the kicker in sentence case (typo rule: no caps) */
.pn-ctp-lead{margin:0;color:var(--ink-2);font-size:15px;max-width:60ch}
.pn-ctp-rule{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none;counter-reset:r}
.pn-ctp-rule li{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:var(--radius-full);padding:5px 11px 5px 6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pn-ctp-rule li::before{counter-increment:r;content:counter(r);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--sunken);color:var(--pink-glyph);font-size:11px;font-weight:700}
.pn-ctp-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.pn-ctp-ent{position:relative;display:grid;grid-template-columns:22px 104px minmax(0,1fr) 20px;grid-template-areas:"rk ph tx go";column-gap:12px;align-items:center;background:var(--surface);border-radius:var(--r-box);padding:10px 10px 10px 8px}
.pn-ctp-ent:hover{background:var(--sunken)}
.pn-ctp-cover{position:absolute;inset:0;border-radius:inherit;z-index:1}
.pn-ctp-rk{grid-area:rk;text-align:center;font-weight:700;font-size:17px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pn-ctp-ent.is-top .pn-ctp-rk{color:var(--pink-glyph);font-size:20px}
/* her profile picture, the row's main picture (owner 25.10.: "top 100 sind profile"), 4:5 with the house edge line */
.pn-ctp-ph{grid-area:ph;position:relative;display:block;width:104px;aspect-ratio:4/5;border-radius:var(--r-pcard);overflow:hidden;background:var(--sunken)}
.pn-ctp-ph::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.pn-ctp-ph picture,.pn-ctp-ph img{display:block;width:100%;height:100%;object-fit:cover}
.pn-ctp-tx{grid-area:tx;display:grid;gap:2px;min-width:0}
.pn-ctp-nm{display:flex;align-items:center;gap:5px;font-weight:700;font-size:16px;min-width:0;color:var(--ink)}
.pn-ctp-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pn-ctp-nm b::before{content:'@';color:var(--ink-3);font-weight:700}
.pn-ctp-nm .pc-verified{width:15px;height:15px;margin-left:0}
.pn-ctp-rt{font-size:13px;color:var(--ink-2)}
.pn-ctp-st{color:var(--pink-glyph);font-weight:700}
.pn-ctp-mt{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.pn-ctp-mt img{width:14px;height:14px;border-radius:50%}
.pn-ctp-go{grid-area:go;color:var(--ink-3);width:20px;height:20px}
.pn-ctp-go svg{width:20px;height:20px}
.pn-ctp-pager{display:grid;justify-items:center;gap:10px;margin-top:28px}
.pn-ctp-pages{display:flex;gap:4px;background:var(--surface);border-radius:var(--radius-full);padding:4px}
.pn-ctp-pages a,.pn-ctp-pages span{min-width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-full);font-weight:700;font-size:14px;color:var(--ink-2);padding:0 6px;text-decoration:none}
.pn-ctp-pages a[aria-current]{background:var(--ink);color:var(--bg)}
.pn-ctp-pages .pn-ctp-nx svg{width:18px;height:18px}
.pn-ctp-pages span{color:var(--ink-3)}
.pn-ctp-pager small{color:var(--ink-3);font-size:12px}
.pn-ctp-side{display:grid;gap:12px;margin-top:28px;align-content:start}
.pn-ctp-how{background:var(--surface);border-radius:var(--r-box);padding:16px}
.pn-ctp-how h2{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}
.pn-ctp-how p{margin:0;color:var(--ink-2);font-size:13.5px}
.pn-ctp-safe{background:var(--bg);border-radius:var(--r-box);padding:14px 16px;display:grid;gap:10px}
.pn-ctp-line{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:13px;line-height:1.5;margin:0}
.pn-ctp-line > svg{width:17px;height:17px;color:var(--ink-3);margin-top:1px;flex:none}
.pn-ctp-line--seal > .pc-verified{color:var(--pink-glyph);margin-left:0}
.pn-ctp-line b{color:var(--ink);font-weight:700}

/* ---------- category page as posts ---------- */
.pn-chb-strip{margin:22px 0 0}
.pn-chb-strip__h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.pn-chb-strip__h h2{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.pn-chb-strip__h a{margin-left:auto;color:var(--accent-text);font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none}
.pn-chb-rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
.pn-chb-rail::-webkit-scrollbar{display:none}
.pn-chb-cr{flex:0 0 80px;display:grid;justify-items:center;gap:6px;min-width:0;text-decoration:none}
.pn-chb-av{display:block;width:24px;height:24px;border-radius:50%;padding:1.5px;background:conic-gradient(var(--blush),var(--accent-soft),var(--blush));flex:none}
.pn-chb-av > img{display:block;width:100%;height:100%;border-radius:50%;border:1.5px solid var(--bg);background:var(--sunken);object-fit:cover}
.pn-chb-av--lg{width:68px;height:68px;padding:2px}
.pn-chb-av--lg > img{border-width:2px}
.pn-chb-cr b{display:flex;align-items:center;gap:3px;max-width:84px;font-size:12px;font-weight:700;color:var(--ink-2)}
.pn-chb-cr b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-chb-cr .pc-verified{width:12px;height:12px;margin-left:0}
.pn-chb-gridh{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px}
.pn-chb-gridh h2{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.pn-chb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
.pn-chb-card{position:relative;display:grid;gap:7px;align-content:start;min-width:0}
.pn-chb-cover{position:absolute;inset:0;z-index:1;border-radius:var(--r-box)}
.pn-chb-by{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink)}
.pn-chb-by b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pn-chb-by b::before{content:'@';color:var(--ink-3)}
.pn-chb-by .pc-verified{width:13px;height:13px;margin-left:0}
.pn-chb-ph{position:relative;display:block;border-radius:var(--r-box);overflow:hidden;background:var(--surface)}
.pn-chb-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pn-chb-ph::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.pn-chb-n{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;background:var(--scrim);color:var(--paper);backdrop-filter:blur(6px);border-radius:var(--radius-full);padding:3px 8px 3px 6px;font-weight:700;font-size:11.5px}
.pn-chb-n svg{width:13px;height:13px}
.pn-chb-fav{position:absolute;z-index:2;top:31px;right:0;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--paper);padding:0;cursor:pointer}
.pn-chb-fav > span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--scrim);backdrop-filter:blur(6px)}
.pn-chb-fav svg{width:18px;height:18px}
.pn-chb-card h3{margin:0;font-size:14px;line-height:1.3;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-chb-tags{display:flex;flex-wrap:wrap;gap:4px}
.pn-chb-tag{border-radius:var(--radius-full);background:var(--field);color:var(--ink-2);padding:3px 8px 4px;font-weight:600;font-size:12px;line-height:1.2}
.pn-chb-tag b{color:var(--pink-glyph);opacity:.75;font-weight:700;margin-right:1px}
@media (min-width:640px){.pn-chb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (min-width:960px){
  .pn-ctp{padding:20px 24px 60px}
  .pn-ctp-page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
  .pn-ctp-hd h1{font-size:40px}
  .pn-ctp-side{position:sticky;top:78px;margin-top:0}
  .pn-ctp-ent{grid-template-columns:40px 120px minmax(0,1fr) 20px;padding:12px 14px 12px 8px;column-gap:18px}
  .pn-ctp-ph{width:120px}
  .pn-ctp-nm{font-size:18px}
  .pn-ctp-rk{font-size:20px}
  .pn-ctp-ent.is-top .pn-ctp-rk{font-size:24px}
  .pn-chb-rail{margin:0;padding:2px 0 4px;flex-wrap:nowrap;justify-content:flex-start;gap:14px}
  .pn-chb-cr{flex-basis:88px}
  .pn-chb-av--lg{width:72px;height:72px}
  .pn-chb-cr b{max-width:92px}
  .pn-chb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 16px}
}

/* owner 26.10. ("4 pro Reihe"): the original creators grid in community mode never goes past four a row */
@container pn-gmain (min-width:840px){.pn-disc--cm .pn-discgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* the side column narrows the main column under the container step, so the four columns follow the screen width */
@media (min-width:1101px){.pn-disc--cm .pn-discgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* creators audit 27.10. (owner: "ungepflegt und unruhig"), community mode only (.pn-disc--cm):
   the head = the home's h1 over its lede (one column, it read as two heads); the grid over the full width under the
   head | join band — beside the trust column the main column was 655 px, its container step trimmed the cards to a
   three-column count (18 of 20 shown in four columns: a half last row); the trust rows one strip under the grid at the
   page's reading sizes; every card the same dark foot (eight of twenty carried the pink Premium foot) */
.pn-disc--cm .pn-hubhead__b{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.pn-disc--cm .pn-dischead__t h1{font-size:var(--fs-l);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.pn-disc--cm .pn-hubintro{max-width:60ch}
@media (min-width:1000px){
  .pn-split.pn-disc--cm:has(> .pn-split__head){grid-template-areas:"head lead" "main main" "side side"}
  .pn-disc--cm > .pn-split__side{position:static}
  .pn-disc--cm .pn-trust--stack{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .pn-disc--cm .pn-trust--stack .pn-trust__item{padding:0;border-top:0}
}
@media (max-width:999px){.pn-split.pn-disc--cm:has(> .pn-split__head){grid-template-areas:"head" "lead" "main" "side"}}
.pn-disc--cm .pn-trust__item b{font-size:15px}
.pn-disc--cm .pn-trust__item span:not(.pn-rowicon){font-size:14px;line-height:1.45}
.pn-disc--cm .pc-scard.is-premium .pc-scard__cap::before,.pn-lb--cm .pc-scard.is-premium .pc-scard__cap::before{background:var(--card-cap-scrim)}
/* "How creators work" panel in the creators page's side column (owner 27.10.) */
.pn-cvpanel{display:grid;gap:8px}
.pn-cvpanel p{margin:0;font:400 14px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-cvpanel__go{display:inline-flex;align-items:center;gap:4px;font:600 14px/1.3 var(--font-sans);color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Community mode (owner 25.10.): her profile (templates/cm_member_post.php) and her reviews page (templates/cm_member_reviews.php)
   for guests, 1:1 from the mockups design/v2/profile-guest-cm.html and reviews-guest-cm.html. The parts both share with her
   post page (the pink key, Follow, the deal line, her own words, Read more, teasers, review bubbles, the checked box, the
   phone bar) are the pn-cp-* rules of cmpost.css; here only what is new. Colours are site tokens. pn-cpr-* / pn-cmr-* only. */
.pn-cpr{max-width:1200px;margin:0 auto;padding:12px 0 120px}   /* visual audit VG-003: no second gutter */
.pn-cpr .pn-dtcrumbs,.pn-cpr nav[aria-label]{margin:2px 0 12px}

/* avatar with ring (as her post) */
.pn-cpr-av{width:48px;height:48px;border-radius:50%;padding:2px;background:conic-gradient(var(--blush),var(--accent-soft),var(--blush));flex:none;display:block}
.pn-cpr-av > span,.pn-cpr-av > img{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--sunken);border:2px solid var(--bg);font-weight:700;font-size:18px;color:var(--pink-glyph);object-fit:cover}
.pn-cp-mini .pn-cpr-av{width:34px;height:34px}
.pn-cp-mini .pn-cpr-av > span{font-size:13px}

/* profile head */
.pn-cpr-head{position:relative;margin-top:10px}
.pn-cpr-cover{height:112px;border-radius:var(--r-box);background:linear-gradient(135deg,var(--sunken),var(--surface))}   /* owner rule 25.10.: a plain tonal banner, never the blur of her picture */
.pn-cpr-head__body{display:grid;gap:12px;padding:0 2px}
.pn-cpr-av--xl{width:92px;height:92px;padding:3px;margin-top:-46px;margin-left:10px;position:relative}
.pn-cpr-av--xl > span,.pn-cpr-av--xl > img{font-size:34px;border:3px solid var(--canvas)}
.pn-cpr-kick{color:var(--ink-3);font-size:13px;font-weight:600;margin:0 0 2px}   /* labels 600 without caps (typo system, Sleek 08.10.) */
.pn-cpr-head h1{display:flex;align-items:center;gap:7px;margin:0;font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.018em;color:var(--ink);overflow-wrap:anywhere}
.pn-cpr-head h1 .pc-verified{width:22px;height:22px;margin-left:0}
.pn-cpr-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;color:var(--ink-2);font-size:14px;margin-top:6px}
.pn-cpr-st{color:var(--pink-glyph);font-weight:700;text-decoration:none}
.pn-cpr-st:hover{text-decoration:underline}
.pn-cpr-meta i{color:var(--ink-3);font-style:normal}
.pn-cpr-social{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--ink-2);font-size:13px;margin-top:8px}
.pn-cpr-social span{display:inline-flex;align-items:center;gap:6px}
.pn-cpr-social svg{width:15px;height:15px;color:var(--ink-3)}
.pn-cpr-social b{color:var(--ink);font-weight:700}
.pn-cpr-head__acts{display:flex;gap:10px;align-items:center}
.pn-cpr-head__acts .pn-cp-btn{flex:1 1 auto;min-width:0;padding:13px 18px}
.pn-cpr-head__acts .pn-cp-follow{margin-left:0;padding:12px 18px;font-size:14px;flex:none}
.pn-cpr-deal-row .pn-cp-deal{margin:10px 4px 0}

/* below the head */
.pn-cpr-grid{display:grid;gap:0;margin-top:8px}
.pn-cpr-main,.pn-cpr-side{display:block;min-width:0}
.pn-cpr-about{margin-top:30px}
.pn-cpr-sec-h{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.pn-cpr-about .pn-cp-hand{margin:10px 0 8px}
.pn-cpr-story.is-clamped{max-height:calc(1.65em * 6)}
.pn-cpr-about > .pn-cp-more{margin-top:4px}
.pn-cpr-iv{display:flex;align-items:center;gap:6px;margin:14px 0 0;font:600 14px/1.3 var(--font-sans);color:var(--ink-2)}   /* her interview (owner 27.10.) */
.pn-cpr-iv a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* her posts */
.pn-cpr-posts{margin-top:36px;display:grid;gap:12px}
.pn-cpr-rail__h{display:flex;align-items:baseline;gap:10px}
.pn-cpr-rail__h h2{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.pn-cpr-n{margin-left:auto;color:var(--ink-3);font-weight:700;font-size:13px}
.pn-cpr-teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
.pn-cpr-lockpic{width:100%;aspect-ratio:1/1;border-radius:var(--r-box);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--sunken);text-align:center;padding:10px}
.pn-cpr-lockpic svg{width:22px;height:22px;color:var(--pink-glyph)}
.pn-cpr-lockpic b,.pn-cpr-lockpic small{display:block}
.pn-cpr-lockpic b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.25}
.pn-cpr-lockpic small{color:var(--ink-3);font-size:12px;font-weight:600}
.pn-cpr-photos{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r-box);padding:12px 14px;margin-top:4px}
.pn-cpr-photos > svg{width:20px;height:20px;color:var(--ink-3)}
.pn-cpr-photos span{color:var(--ink-2);font-size:14px}
.pn-cpr-photos b{color:var(--ink)}
.pn-cpr-photos a{margin-left:auto;color:var(--accent-text);font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none}

/* members about her (bubbles of cmpost.css) */
.pn-cpr-bubbles{display:grid;gap:8px}
.pn-cp-stars s,.pn-cmr-sum__stars s{text-decoration:none;color:var(--line-2)}

/* her reviews page */
.pn-cmr-who{display:flex;align-items:center;gap:14px}
.pn-cmr-av{width:64px;height:64px;padding:3px}
.pn-cmr-av > span,.pn-cmr-av > img{font-size:24px;border-width:3px}
.pn-cmr-who h1{display:flex;align-items:center;gap:6px;margin:0;font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere}
.pn-cmr-who h1 .pc-verified{width:20px;height:20px;margin-left:0}
.pn-cmr-who .pn-cpr-meta{margin-top:4px;font-size:13px}
.pn-cmr-head{display:grid;gap:14px;margin-top:10px}
.pn-cmr-sum{background:var(--surface);border-radius:var(--r-box);padding:16px;display:grid;justify-items:start;gap:2px}
.pn-cmr-sum b{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.pn-cmr-sum__stars{color:var(--pink-glyph);letter-spacing:2px;font-size:14px}
.pn-cmr-sum small{color:var(--ink-3);font-size:13px;font-weight:600}
.pn-cmr-toprof{display:inline-flex;align-items:center;gap:4px;color:var(--accent-text);font-weight:700;font-size:14px;text-decoration:none}
.pn-cmr-toprof svg{width:16px;height:16px}
.pn-cmr-list{margin-top:28px}
.pn-cmr-list__h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.pn-cmr-list__h h2{margin:0;font-size:18px;font-weight:700;color:var(--ink)}
.pn-cmr-list__h span{margin-left:auto;color:var(--ink-3);font-size:13px;font-weight:700;white-space:nowrap}
.pn-cmr-bubbles{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pn-cmr-bubbles h3{margin:0 0 2px;font-size:15px;font-weight:700;color:var(--ink)}
.pn-cmr-pager{display:flex;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.pn-cmr-pager a,.pn-cmr-pager span{min-width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--radius-full);font-weight:700;font-size:14px;padding:0 14px;text-decoration:none}
.pn-cmr-pager a{background:var(--surface);color:var(--ink)}
.pn-cmr-pager span[aria-current]{background:var(--blush);color:var(--on-accent)}
.pn-cmr-pager .pn-cmr-next{margin-left:auto}
.pn-cmr-safe{margin-top:24px}

@media (min-width:960px){
  .pn-cpr{padding:20px 0 60px}
  .pn-cpr-cover{height:180px}
  .pn-cpr-head__body{display:flex;align-items:flex-end;gap:20px;padding:0 8px}
  .pn-cpr-av--xl{width:128px;height:128px;margin-top:-64px;margin-left:16px}
  .pn-cpr-av--xl > span,.pn-cpr-av--xl > img{font-size:46px;border-width:4px}
  .pn-cpr-head h1{font-size:32px}
  .pn-cpr-head h1 .pc-verified{width:26px;height:26px}
  .pn-cpr-head__id{padding-bottom:2px;min-width:0}
  .pn-cpr-head__acts{margin-left:auto;padding-bottom:6px}
  .pn-cpr-head__acts .pn-cp-btn{flex:0 0 auto;width:auto;padding:13px 22px}
  .pn-cpr-deal-row{display:flex;justify-content:flex-end;margin-top:8px}
  .pn-cpr-deal-row .pn-cp-deal{text-align:right;max-width:46ch;margin:0 4px}
  .pn-cpr-grid{grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;margin-top:4px}
  .pn-cpr-side{position:sticky;top:78px}
  .pn-cpr-about{margin-top:28px}
  .pn-cpr-story.is-clamped{max-height:calc(1.65em * 7)}
  .pn-cpr-teasers{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px}
  .pn-cpr-side .pn-cp-proof{margin-top:28px}
  .pn-cmr-grid{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:48px;align-items:start}
  .pn-cmr-side{grid-column:1;grid-row:1}
  .pn-cmr-list{grid-column:2;grid-row:1 / span 2;margin-top:10px}
  .pn-cmr-safe{grid-column:1;grid-row:2;margin-top:14px;position:sticky;top:78px}
  .pn-cmr-who h1{font-size:26px}
}
@media (max-width:959px){ .pn-cpr-deal-row{text-align:center} }

/* ==========================================================================
   Art director pass 27.10. (group D: her post, her profile, her reviews). One type scale with the rest of the outside,
   one review card, one meta line, no overflow with a long name, no double room before the footer.
   ========================================================================== */
/* D-008 (VG-016): the empty stars were transparent (--line-2), so 4 of 5 read as 4 of 4 */
.pn-cp-stars s,.pn-cmr-sum__stars s{color:var(--ink-3)}
.pn-cp-stars,.pn-cmr-sum__stars{font-size:14px;letter-spacing:1px}   /* D-007 */
/* D-001..005: titles and section heads on the site scale */
.pn-cp-h,.pn-cmr-who h1{font-size:var(--fs-m);font-weight:800;letter-spacing:var(--tr-h)}
.pn-cpr-head h1{font-weight:800}   /* every h1 of the outside at the system's 800 (docs/variants-08-10.md) */
@media (min-width:960px){.pn-cpr-head h1,.pn-cmr-who h1{font-size:var(--fs-m)}}
.pn-cpr-head h1{letter-spacing:var(--tr-h)}
:is(.pn-cp-proof__h,.pn-cp-rail__h,.pn-cpr-rail__h,.pn-cmr-list__h) h2,.pn-cpr-sec-h{font:700 var(--fs-section)/var(--lh-head) var(--font-display);letter-spacing:var(--tr-head);color:var(--ink)}
.pn-cp-more{font:700 14px/1 var(--font-sans)}   /* D-014: "font: … inherit" was invalid, the key fell back to 15/400 */
/* D-011 / D-012 / D-015 / D-058: one quiet meta line (13 px, ink-2), left */
.pn-cp-deal{font-size:13px;color:var(--ink-2)}
.pn-cp-report{font-size:13px;color:var(--ink-2)}
.pn-cp-sell{font-size:14px;color:var(--ink-2)}
@media (min-width:701px){.pn-cp-deal{text-align:left;margin-inline:0}}
/* D-018: the trust note was the page colour with padding — its text started 14 px in from the column */
.pn-cp-safe{background:transparent;padding-inline:0}
@media (min-width:960px){.pn-cp-safe{padding-inline:0}}
/* D-019 / D-021 / D-022: one review card */
.pn-cp-bubble{border-radius:var(--r-tile);padding:14px 16px}
.pn-cmr-bubbles .pn-cp-bubble{background:var(--surface)}
.pn-cmr-bubbles blockquote{max-width:68ch}   /* D-034 */
/* D-023 / D-037: tags on the chip shape, Follow a kit key of 40 px (was a 32 px pill) */
.pn-cp-tag{border-radius:var(--r-chip)}
.pn-cp-follow{display:inline-flex;align-items:center;min-height:var(--control-sm);padding:0 16px;border:0;border-radius:var(--r-btn-sm);background:var(--sunken);font:600 14px/1 var(--font-sans)}
.pn-cpr-head__acts .pn-cp-follow{min-height:var(--control-btn);padding:0 18px}
/* D-052 / D-053: a long name never pushes the page sideways — one column below the desktop step only (owner 27.10.: on the
   desktop it overrode the two columns, the sticky photo stayed on top and her text scrolled over it); the desktop columns
   are minmax(0, …) already (cmpost.css) */
@media (max-width:959px){.pn-cp-post{grid-template-columns:minmax(0,1fr)}}
.pn-cp-who__n{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-cp-who__n .pc-verified{vertical-align:-3px;margin-left:4px}
@media (max-width:700px){:is(.pn-cp,.pn-cpr) :is(.pn-dtcrumbs,nav[aria-label]) li:last-child{display:none}}
/* D-027 / D-028: "More posts" in 4 columns from 600 px (6 columns left 391 px empty; 2 at 768 were bigger than the photo) */
@media (min-width:600px){.pn-cp-teasers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:960px){.pn-cp-teasers{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* D-042 / D-043 / D-035: the phone bar only on phones (at 768 it covered the action row), on the layer ladder; the
   tablet column has one left edge */
.pn-cp-bar{z-index:var(--z-bar)}
@media (min-width:701px) and (max-width:959px){
  .pn-cp-bar{display:none}
  .pn-cp-cta-blk .pn-cp-btn{display:inline-flex;width:auto}
  .pn-cp-gcol{margin-inline:0}
}
/* D-044: 183 px before the footer — the page's own bottom room on top of the main's; the bar room lives on the footer */
.pn-cp,.pn-cpr{padding-bottom:0}
@media (min-width:960px){.pn-cp,.pn-cpr{padding-bottom:0}}
/* D-046 / D-047: one sticky offset; the reviews page keeps its score in view, not only the fine print */
@media (min-width:960px){
  .pn-cpr-side{top:calc(var(--sticky-top) + 12px)}
  .pn-cmr-safe{position:static}
  .pn-cmr-side{position:sticky;top:calc(var(--sticky-top) + 12px)}
  .pn-cmr-sum{max-width:360px}
}
.pn-cmr-sum{max-width:360px}   /* D-033 */
.pn-cp-bubble blockquote{line-height:1.55}   /* D-006: the profile's review line height */
@media (min-width:960px){.pn-cp-cta-blk .pn-cp-btn{font-size:var(--btn-fs);padding:var(--btn-py) var(--btn-px)}}   /* D-038: one key size */
/* ==========================================================================
   wish (owner 05.10., lib/wish.php): the buyer wizard's last step, the done screen, the request card in the chat, the
   buyers-hub rail, Matches and the dashboard card. Tokens only; dark theme first (the default). After chat + join +
   wizard in the cascade: the card restates the dark box (.pn-order), the form reuses the join panel and the wizard dock.
   ========================================================================== */

/* ---------- the form (join shell panel + /account/wish/) ---------- */
.pn-wishpanel{max-width:620px}
.pn-wishbox.pn-panel{padding:var(--panel-pad)}
.pn-wishform{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);min-width:0}   /* 06.10.: the one column never grows past the panel (fr/it/pt chip rows pushed it to 409 px at 390) */
.pn-wishfield{margin:0;padding:0;border:0;min-width:0}
.pn-wishlegend{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 10px;padding:0;width:100%}
.pn-wishlegend > small{font:500 13px/1.3 var(--font-sans);color:var(--ink-2);letter-spacing:0;text-transform:none}
.pn-wishchips{gap:8px}
.pn-wishchip{min-height:44px;padding:10px 16px 10px 13px;background:var(--surface-2);border-color:var(--line);color:var(--ink);cursor:pointer;user-select:none}   /* ux pass 05.10.: 44 px tap targets */
.pn-wishchip .pc-ico{width:16px;height:16px;color:var(--ink-2)}
.pn-wishchip:hover{border-color:transparent}
.pn-wishchip:has(input:checked){background:var(--accent);color:var(--on-accent);border-color:transparent}
.pn-wishchip:has(input:checked) .pc-ico{color:currentColor}
.pn-wishchips--budget .pn-wishchip{min-height:40px;padding:8px 14px}.pn-wishfield.is-error .pn-wishchips{padding:6px;margin:-6px;border-radius:var(--r-rules);box-shadow:inset 0 0 0 1.5px var(--danger)}
.pn-wishtext{min-height:132px;resize:vertical;line-height:1.5}
.pn-wishcount{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.pn-wishcount.is-ok{color:var(--success);font-weight:700}
.pn-wishcount.is-ok::before{content:"✓ "}
.pn-wishtoggles{display:grid;gap:2px}
.pn-wishtoggle{display:flex;gap:12px;align-items:center;min-height:44px;padding:8px 2px;font:500 14px/1.35 var(--font-sans);color:var(--ink);cursor:pointer}
.pn-wishtoggle .pc-check{margin:0}
.pn-wishform .pn-fielderr{display:flex;align-items:flex-start;gap:6px;margin:6px 0 0;font:700 13px/1.35 var(--font-sans);color:var(--danger);text-align:left}   /* ux pass 05.10.: never the wizard's centred error line */
.pn-wishform .pc-field.is-error .pc-help{color:var(--ink-2)}   /* ux pass 05.10.: the error line says it; the help stays quiet (one red line per field) */
.pn-wishform .pn-fielderr[hidden]{display:none}
.pn-wishform .pn-fielderr .pc-ico{flex:none;width:16px;height:16px;margin-top:1px}
.pn-wishform .pc-help{margin:8px 0 0}
/* One short screen: the dock sits at the end of the form (never sticky over the extras), the kit's two-button row. */
.pn-wishdock{position:static;margin:var(--space-2) 0 0;padding:0 0 env(safe-area-inset-bottom);background:none;border-top:0}
.pn-wishdock .pn-dock__row{flex-wrap:wrap-reverse}.pn-wishdock .pn-dock__row .pc-btn{flex:1 1 auto;min-width:0}   /* 06.10.: side by side while both labels fit, else the main button on top and Back under it (fr/it/pt labels ran out of the button) */
.pn-wishdock .pn-dock__skip{flex:0 0 auto}
.pn-wishdock .pn-fixcount{margin:0 0 8px;text-align:center;color:var(--danger);font:700 13px/1.3 var(--font-sans)}
.pn-wishdock .pn-fixcount[hidden],.pn-wishdock .pn-formerr[hidden]{display:none}
.pn-wishdock .pn-formerr{margin:0 0 8px;padding:10px 14px;border-radius:var(--r-rules);border:1px solid transparent;background:var(--t-danger,var(--danger-soft));color:var(--danger);font:700 13px/1.35 var(--font-sans);text-align:center}
.pn-wishcta{white-space:nowrap}
.pn-wishcta.is-busy{opacity:.7}
@media (max-width:420px){.pn-wishdock .pn-wishcta .pc-ico{display:none}}   /* phone: the label on one line, no arrow */
.pn-wishpage .pn-wishbox{max-width:620px}

/* ---------- done: "You now follow N sellers who sell what you want" ---------- */
.pn-wishdone{display:grid;gap:var(--space-4);justify-items:start;text-align:left}
.pn-wishdone__sticker{transform:rotate(-3deg)}
.pn-wishdone__h{margin:0;text-wrap:balance;max-width:16ch}
.pn-wishdone__h:focus{outline:0}
.pn-wishdone__p{max-width:44ch}
.pn-wishdone__hand.pc-hand{margin:-6px 0 0;color:var(--pink-text)}
.pn-wishfaces{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:2px 0 0;padding:0 0 0 10px;list-style:none}   /* ux pass 05.10.: one row, the "+N" never drops under the faces */
.pn-wishfaces > li{margin-left:-10px;flex:none}
@media (max-width:420px){.pn-wishfaces{padding-left:14px}.pn-wishfaces > li{margin-left:-14px}}   /* phone: eight faces + "+N" inside the panel */
.pn-wishfaces .pc-avatar{box-shadow:0 0 0 3px var(--surface)}
.pn-wishfaces__more{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sunken);color:var(--ink-2);font:700 12px/1 var(--font-display);box-shadow:0 0 0 3px var(--surface)}
.pn-wishfaces > li.pn-wishfaces__more{margin-left:4px}   /* the count stands beside the row, never under the last face */
.pn-wishdone__acts{display:grid;gap:10px;width:100%;max-width:420px;margin-top:var(--space-2)}

/* ---------- the request card in the thread (the order card's dark box, the pink kicker) ---------- */
.pn-msg--wish{align-items:center;margin:var(--space-2) 0 var(--space-3)}
.pn-wishcard{width:min(100%,520px);gap:12px}
.pn-wishcard .pn-order__over .pc-badge--accent .pc-ico{width:12px;height:12px}
.pn-wishcard__chips{display:flex;flex-wrap:wrap;gap:6px}
.pn-wishcard .pn-wishcard__chip{background:var(--dkbox-tile);color:var(--dk-ink);border-color:transparent;cursor:default}
.pn-wishcard__chip .pc-ico,.pn-wishsum .pc-chip .pc-ico,.pn-wishstat .pc-chip .pc-ico,.pn-wishtile .pc-chip .pc-ico{width:14px;height:14px}
.pn-wishcard__text{margin:0;font:400 15px/1.5 var(--font-sans);color:var(--dk-ink);overflow-wrap:anywhere;white-space:pre-line}
.pn-wishcard__extras .pc-ico{width:14px;height:14px;color:var(--pink)}
.pn-wishcard__acts{display:flex;gap:8px;flex-wrap:wrap}
.pn-wishcard__acts .pc-btn{min-width:120px}

/* ---------- the buyers hub rail (one tonal tile per wish; ux pass 05.10.: no hairline grid, owner rule) ---------- */
/* A4 (owner 18.10., innen-50): the wishes are rows of the panel, not cards inside a card — every second row one tonal step
   darker, the first and last rows rounded with the panel */
.pn-wishrail__list{display:grid;gap:0;margin:0;padding:0 0 var(--space-2);list-style:none}
.pn-wishtile{display:grid;gap:10px;padding:16px var(--row-inset);border-radius:0;background:transparent}
.pn-wishtile:nth-child(even){background:var(--t-tint,var(--sunken))}
.pn-wishtile:last-child{border-radius:0 0 var(--r-box) var(--r-box)}
.pn-wishtile__who{display:flex;align-items:center;gap:10px;min-width:0}
.pn-wishtile__name{font:800 14px/1.2 var(--font-sans);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
a.pn-wishtile__name:hover{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.pn-wishtile__when{margin-left:auto;flex:none;font:500 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-wishtile__text{margin:0;font:400 14px/1.5 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.pn-wishtile__extras{display:flex;align-items:center;gap:6px;margin:0;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-wishtile__extras .pc-ico{width:14px;height:14px;color:var(--pink-text)}
.pn-wishtile__acts{display:flex;justify-content:flex-end}
.pn-wishtile__acts form{margin:0}
.pn-wishtile__acts .pc-btn{min-height:40px}

/* ---------- Matches ---------- */
.pn-wishsum{display:grid;gap:12px}
.pn-wishsum__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.pn-wishsum__head > .pc-btn{flex:none;white-space:nowrap}   /* the small edit key keeps one line (es "Editar deseo" wrapped to 47 px; N4 #82) */
.pn-wishsum__head h2,.pn-wishstat__head h2{display:flex;align-items:center;gap:8px;margin:0}
.pn-wishsum__head h2 .pc-ico,.pn-wishstat__head h2 .pc-ico{width:18px;height:18px;color:var(--pink-text)}
.pn-wishsum__line,.pn-wishstat__line{margin:4px 0 0;font:600 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-wishsum .pc-chip,.pn-wishstat .pc-chip{cursor:default;background:var(--surface-2)}   /* ux pass 05.10.: a chip on paper keeps its pill in the light theme too */
.pn-wishtile .pc-chip{background:var(--surface);cursor:default}
.pn-wishsum__extra{background:var(--surface-2);color:var(--ink-2)}
.pn-wishsum__text,.pn-wishstat__text{margin:0;font:400 15px/1.5 var(--font-sans);color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.pn-matches .pn-wishsum{margin-bottom:var(--app-sec-gap)}
.pn-matchgrid{align-items:start}
.pn-match{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}   /* the cell, never the foot's max-content, sizes the column */
.pn-match > .pc-scard{width:100%;max-width:none}   /* the portrait fills its grid cell (the grid rule targets direct children only) */
/* ux pass 05.10.: one full-width key under every portrait, the same row height on every card; "Read her reply" in pink ink. */
.pn-match__foot{display:grid;min-width:0}
.pn-match__foot form{margin:0;display:grid}
.pn-match__key{min-height:44px;padding-inline:10px;white-space:normal;text-align:center;line-height:1.1}
/* @member-only */
/* A10 (owner 18.10.): no wine-red reply style any more; "Top rated" on the photo is a tonal pill, not a cream sticker */
.pn-match .pc-scard__foot > .pc-scard__top{background:var(--dk-veil);color:var(--dk-ink)}
/* @end-member-only */

/* ---------- the dashboard card ---------- */
.pn-wishstat{display:grid;gap:12px}
.pn-wishstat__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pn-wishstat--empty .pc-btn{justify-self:start}
/* Verkäufe 500 NACH-006 (switch wish_card_home): the wish card on the buyer home — the step's chip rows in one surface */
.pn-wishhome{display:grid;gap:12px;margin:0 0 var(--space-4);padding:14px 14px 16px;border-radius:var(--r-rules);background:var(--surface)}
.pn-wishhome__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pn-wishhome__head form{margin:0}
.pn-wishhome__h{margin:0;font:700 17px/1.25 var(--font-sans);color:var(--ink);text-wrap:balance}
.pn-wishhome__p{margin:4px 0 0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-wishhome__form{display:grid;gap:12px}
.pn-wishhome__row{margin:0;padding:0;border:0;min-width:0}
.pn-wishhome__row .pc-label{margin:0 0 6px}
.pn-wishhome__row .pn-wishchip{min-height:40px;padding:8px 14px}
.pn-wishhome__send{justify-self:start}
/* Direct order wizard /order/ (owner 06.10., docs/direct-order-06-10.md). A literal port of the approved mockup
   design/v2/direct-order-wizard.html: the same boxes, sizes and motion, class by class (.wz → .pn-do, .tile →
   .pn-do-tile …), its literal colours and fonts replaced by the tokens they are. The page is always dark
   (templates/direct_order.php sets data-theme="dark"), an outside page: Anton for every bold caps line.
   Differences from the mockup, on purpose: the ring of the pick mark is the 50 % grey line (never a white line on
   dark), the reply badges use the site's online and warning tones. */
.pn-dobody{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:500 15px/1.45 var(--body);-webkit-font-smoothing:antialiased}
html:has(> .pn-dobody){background:var(--canvas)}
.pn-do, .pn-do *{box-sizing:border-box}
.pn-do button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pn-do{position:relative;min-height:100vh;padding-bottom:108px;overflow:clip}
.pn-do::before{content:"";position:absolute;left:0;right:0;top:0;height:340px;background:var(--do-glow);pointer-events:none;transition:background .5s}
.pn-do-top{position:sticky;top:0;z-index:5;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:var(--do-top-veil);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pn-do-back{position:relative;width:40px;height:40px;border-radius:50%;border:0;background:var(--surface);display:grid;place-items:center}
.pn-do-back::after{content:"";position:absolute;inset:-2px;border-radius:50%}   /* UX polish E UX-063: a 44 px hit area, the 40 px disc unchanged */
.pn-do-back[disabled]{opacity:0;pointer-events:none}
.pn-do-back svg{width:20px;height:20px}
/* UX 17.10. #8: back and close share one 40 px slot; close shows only while the back is off (step 1, the end) */
.pn-do-nav{display:grid;width:40px;height:40px}
.pn-do-nav > *{grid-area:1/1}
.pn-do-close{color:var(--ink);text-decoration:none}
.pn-do-close[hidden]{display:none}
.pn-do-logo{font:400 24px/1 var(--display-lc);letter-spacing:.4px;color:var(--ink);text-decoration:none}
.pn-do-logo i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-left:2px}
.pn-do-free{min-width:40px;justify-content:center}   /* UX polish E UX-063: "Free" is the kit label (.pc-badge), not loose 11.5 px text; it still balances the 40 px close key so the logo stays centred */
.pn-do-bar{height:4px;background:var(--sunken)}
.pn-do-bar i{display:block;height:100%;width:12%;background:var(--pink);transition:width .3s ease-out}
.pn-do-stage{position:relative;max-width:520px;margin:0 auto;padding:26px 16px 0}
.pn-do-screen{animation:pn-do-in .26s ease-out both}
.pn-do-screen.is-out{animation:pn-do-out .2s ease-in both}
@keyframes pn-do-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes pn-do-out{to{opacity:0;transform:translateX(-24px)}}
.pn-do-kicker{margin:0 0 12px;font:700 12px/1 var(--body);letter-spacing:0;color:var(--pink)}
.pn-do-q{margin:0;font:700 30px/1.15 var(--display);letter-spacing:-.025em;overflow-wrap:break-word;outline:0}
.pn-do-q mark{display:inline-block;background:var(--pink);color:var(--anthracite);padding:.02em .14em 0;line-height:1.06}
.pn-do-aside{display:inline-block;margin:10px 0 0;font:600 22px/1 var(--hand);color:var(--pink);transform:rotate(-2deg)}
.pn-do-sub{margin:12px 0 0;color:var(--ink-2);font-size:15px}
.pn-do-sub b{color:var(--ink)}
.pn-do-opts{margin:24px 0 0}
.pn-do-tiles{display:grid;gap:10px}
.pn-do-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;padding:12px 16px 12px 18px;border:0;border-radius:20px;background:var(--surface);text-align:left;transition:transform .12s,background .14s,color .14s}
.pn-do-tile:active,.pn-do-chip:active,.pn-do-rung:active{transform:scale(.97)}
.pn-do-tile b{display:block;font:700 17px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pn-do-tile small{display:block;margin-top:4px;font:500 13px/1.25 var(--body);color:var(--ink-2)}
.pn-do-tile i{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent}
.pn-do-tile i svg{width:16px;height:16px}
.pn-do-tile.is-on{background:var(--pink);color:var(--anthracite)}
.pn-do-tile.is-on b{color:var(--anthracite)}
.pn-do-tile.is-on small{color:var(--on-accent-2)}
.pn-do-tile.is-on i{background:var(--anthracite);border-color:var(--anthracite);color:var(--pink)}
.pn-do-chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-do-chip{min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:600 15px/1 var(--body);transition:transform .12s,background .14s,color .14s}
.pn-do-chip.is-on{background:var(--pink);border-color:transparent;color:var(--anthracite)}
.pn-do-chip--ghost{background:transparent;color:var(--ink-2)}
.pn-do-chip--ghost.is-on{background:var(--sunken);border-color:transparent;color:var(--ink)}
.pn-do-chip--big{min-height:48px;padding:0 18px;font:700 15px/1 var(--display);letter-spacing:-.01em}
.pn-do-ladder{position:relative;display:grid;gap:8px;padding-left:16px}
.pn-do-ladder::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:6px;background:var(--sunken)}
.pn-do-ladder::after{content:"";position:absolute;left:0;top:0;width:6px;border-radius:6px;height:calc(var(--do-fill, 0) * 1%);background:var(--do-ladder);transition:height .26s ease-out}
.pn-do-rung{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:0 18px;border:0;border-radius:20px;background:var(--surface);color:var(--ink-2);text-align:left;transition:transform .12s,background .14s,color .14s}
.pn-do .pn-do-rung{color:var(--ink-2)}
.pn-do-rung b{font:700 16px/1.1 var(--display);letter-spacing:-.01em}
.pn-do-rung span{font:500 13px/1.25 var(--body);text-align:right;max-width:46%}
.pn-do-rung:nth-child(1){min-height:64px}
.pn-do-rung:nth-child(2){min-height:72px}
.pn-do-rung:nth-child(2) b{font-size:18px}
.pn-do-rung:nth-child(3){min-height:80px}
.pn-do-rung:nth-child(3) b{font-size:20px}
.pn-do-rung:nth-child(4){min-height:88px}
.pn-do-rung:nth-child(4) b{font-size:22px}
.pn-do .pn-do-rung.is-lit:nth-child(1){background:var(--sunken);color:var(--pink-soft)}
.pn-do .pn-do-rung.is-lit:nth-child(2){background:var(--pink-soft);color:var(--anthracite)}
.pn-do .pn-do-rung.is-lit:nth-child(3){background:var(--pink);color:var(--anthracite)}
.pn-do .pn-do-rung.is-lit:nth-child(4){background:var(--pink-press);color:var(--anthracite)}
.pn-do-step{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 4px}
.pn-do-step button{width:64px;height:64px;border-radius:50%;border:0;background:var(--sunken);font:700 22px/1 var(--display)}
.pn-do-step b{min-width:150px;text-align:center;font:700 56px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--pink)}
.pn-do-unit{display:block;text-align:center;margin:0 0 20px;font:700 12px/1 var(--body);letter-spacing:0;color:var(--ink-2)}
.pn-do-chips--center{justify-content:center}
.pn-do-tools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.pn-do-tool{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:transparent;font:600 13px/1 var(--body)}
.pn-do-tool--main{background:var(--sunken);border-color:transparent}
.pn-do-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}
.pn-do-card{position:relative;display:block;padding:0;border:0;border-radius:20px;overflow:hidden;background:var(--surface);aspect-ratio:3/4;text-align:left;outline:2px solid transparent;outline-offset:-2px;transition:transform .14s,outline-color .14s}
.pn-do-card:active{transform:scale(.975)}
.pn-do-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.35) brightness(.62);transition:filter .14s}
.pn-do-card::after{content:"";position:absolute;inset:0;background:var(--do-card-shade)}
.pn-do-card.is-on{outline-color:var(--pink)}
.pn-do-card.is-on img{filter:saturate(.92) contrast(.97)}
.pn-do-card--ph{background:var(--ph-media)}
.pn-do-card--ph::after{content:none}
.pn-do-pick{position:absolute;z-index:1;top:10px;right:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--scard-glass-hover);border:1.5px solid var(--line);color:transparent;transform:scale(1);transition:background .14s,color .14s,border-color .14s}
.pn-do-pick svg{width:18px;height:18px}
.pn-do-card.is-on .pn-do-pick{background:var(--pink);border-color:transparent;color:var(--anthracite);animation:pn-do-pop .16s ease-out}
@keyframes pn-do-pop{from{transform:scale(.6)}to{transform:scale(1)}}
.pn-do-foot{position:absolute;z-index:1;left:12px;right:12px;bottom:11px;color:var(--ink)}
.pn-do-foot strong{display:block;font:700 15px/1.15 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-do-foot em{font:500 13px/1 var(--body);font-style:normal;color:var(--do-foot-2)}
.pn-do-badge{position:absolute;z-index:1;top:12px;left:10px;display:inline-block;max-width:calc(100% - 62px);box-sizing:border-box;white-space:normal;padding:6px 10px 6px 8px;border-radius:12px;background:var(--dk-veil);backdrop-filter:blur(6px);font:700 10.5px/1.15 var(--body);color:var(--ink)}   /* night N8 #61: a long label (fr "En ligne récemment") wraps to two lines instead of being cut at the card edge */
.pn-do-badge i{display:inline-block;vertical-align:1px;margin-right:5px;width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
.pn-do-badge b{font-weight:800}
.pn-do-badge--f{background:var(--pink);color:var(--anthracite)}
.pn-do-badge--f i{background:var(--anthracite)}
.pn-do-badge--t1 i{background:var(--online)}
.pn-do-badge--t1 b{color:var(--online)}
.pn-do-badge--t2 i{background:var(--pink)}
.pn-do-badge--t2 b{color:var(--pink)}
.pn-do-badge--t3 i{background:var(--warning)}
.pn-do-badge--t3 b{color:var(--warning)}
.pn-do-note{margin:14px 0 0;color:var(--ink-2);font-size:13px}
.pn-do-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.pn-do-err{margin:12px 0 0;color:var(--danger);font-size:14px;font-weight:600}
.pn-do-err a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.pn-do-order{padding:16px;border-radius:22px;background:var(--surface)}
.pn-do-order__k{margin:0;font:700 11px/1.3 var(--body);letter-spacing:0;color:var(--pink)}
.pn-do-order__l{margin:10px 0 0;font:700 16px/1.3 var(--display);letter-spacing:-.01em}
.pn-do-order__l small{display:block;margin-top:3px;font:500 14px/1.3 var(--body);text-transform:none;letter-spacing:0;color:var(--ink-2)}
.pn-do-order__m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.pn-do-order__acts{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.pn-do-faces{display:flex}
.pn-do-faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--surface);margin-left:-9px;background:var(--sunken)}
.pn-do-faces img:first-child{margin-left:0}
.pn-do-faces span{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;margin-left:-9px;border-radius:999px;background:var(--sunken);border:2px solid var(--surface);font:700 12px/1 var(--body);color:var(--ink)}
.pn-do-label{display:block;margin:22px 0 8px;font:700 11px/1.3 var(--body);letter-spacing:0;color:var(--ink-2)}
.pn-do-in{width:100%;height:44px;padding:0 14px;border-radius:var(--r-field);border:1px solid var(--line);background:var(--field);color:var(--ink);font:500 16px/1 var(--body)}
.pn-do-in:focus{outline:none;border-color:var(--pink)}
.pn-do-in::placeholder{color:var(--ink-3)}
.pn-do-in[aria-invalid="true"]{border-color:var(--danger)}
.pn-do-fine{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;color:var(--ink-2);font-size:13px}
.pn-do-fine input{width:22px;height:22px;accent-color:var(--pink);flex:none;margin:0}
.pn-do-fine a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.pn-do-state{display:grid;gap:8px;margin:16px 0 0}
.pn-do-state div{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:999px;background:var(--surface);font-size:14px}
.pn-do-state img{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--sunken)}
.pn-do-state b{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-do-state span{color:var(--ink-2);font-size:13px}
.pn-do-gets{display:grid;gap:12px;margin:26px 0 0}
.pn-do-mail{padding:16px;border-radius:22px;background:var(--paper);color:var(--anthracite)}
.pn-do-tag{display:inline-block;margin:0 0 12px;padding:5px 10px;border-radius:8px;background:var(--sunken);color:var(--ink-2);font:700 10.5px/1.2 var(--body);letter-spacing:0}
.pn-do-mail .pn-do-tag{background:var(--duck);color:var(--muted-lt)}
.pn-do-mail p{margin:0}
.pn-do-mail__s{font:600 13px/1.3 var(--body);color:var(--muted-lt)}
.pn-do-mail .pn-do-mail__h{margin:8px 0;font:700 19px/1.15 var(--display);letter-spacing:-.015em}
.pn-do-mail .pn-do-mail__b{margin:0 0 14px;font-size:14px}
.pn-do-pbtn{display:inline-block;padding:10px 14px;border-radius:var(--r-btn-sm);background:var(--pink);color:var(--anthracite);font:600 13px/1 var(--font-sans);letter-spacing:0}
.pn-do-gbtn{display:inline-block;padding:10px 14px;border-radius:var(--r-btn-sm);background:var(--sunken);color:var(--ink);font:600 13px/1 var(--font-sans);letter-spacing:0}
.pn-do-dock{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--do-dock-veil);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.pn-do-dock__in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px}
.pn-do-sum{flex:1;min-width:0}
.pn-do-sum b{display:block;font:700 16px/1.1 var(--display);letter-spacing:-.01em;color:var(--pink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-do-sum b.is-roll{animation:pn-do-roll .2s ease-out}
@keyframes pn-do-roll{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pn-do-sum > span{display:block;margin-top:4px;color:var(--ink-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.pn-do-sum > span.is-flash{color:var(--pink)}
.pn-do .pn-do-cta{flex:none;max-width:100%;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-btn);background:var(--pink);color:var(--anthracite);font:600 15px/1 var(--font-sans);letter-spacing:0;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:opacity .2s,transform .1s}
.pn-do .pn-do-cta:hover{background:var(--pink-press)}
.pn-do .pn-do-cta:active{transform:translateY(1px)}
.pn-do .pn-do-cta span{font-family:var(--font-sans)}   /* the arrow is a plain glyph */
.pn-do .pn-do-cta[hidden]{display:none}
/* Sleek 08.10.: a disabled Next is the neutral waiting key (the tonal well, grey text, the grey-50 % edge), never a faded pink */
.pn-do .pn-do-cta[disabled]{opacity:1;background:var(--surface-2);color:var(--ink-2);border-color:var(--line);cursor:not-allowed;transform:none}
.pn-do-side{display:none}
@media (max-width:379px){
  .pn-do-q{font-size:26px}
  .pn-do .pn-do-cta{padding:0 16px;font-size:15px;gap:8px}
  .pn-do-sum b{font-size:16px}
  .pn-do-step{gap:14px}
  .pn-do-step b{min-width:120px}
  .pn-do-rung span{max-width:52%}
}
@media (min-width:1080px){
  .pn-do{display:grid;grid-template-columns:480px minmax(0,1fr);gap:0;padding-bottom:0;min-height:100vh}
  .pn-do-left{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--line)}
  .pn-do-stage{flex:1;overflow:auto;width:100%;padding:34px 34px 20px}
  .pn-do-dock{position:static;background:var(--bg);padding:16px 34px 22px}
  .pn-do-dock__in{max-width:none}
  .pn-do-side{display:block;padding:34px 34px 60px;background:var(--canvas)}
  .pn-do-side .pn-do-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;transition:opacity .3s,filter .3s}
  .pn-do-side.is-dim .pn-do-grid{opacity:.55;pointer-events:none;filter:saturate(.7)}
  .pn-do-side h2{margin:0 0 6px;font:700 17px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
  .pn-do-side p{margin:0 0 18px;color:var(--ink-2);font-size:14px}
  .pn-do .pn-do-phone{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pn-do *, .pn-do::before, .pn-do *::before, .pn-do *::after{animation:none !important;transition:none !important}
}
/* the order card at the top of her chat (partials/do_card.php; the wish card's dark box) and the buyer's status line */
.pn-docard__k{margin:0;font:600 12px/1.35 var(--font-label);letter-spacing:0;color:var(--pink)}
.pn-docard__lines{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pn-docard__lines b{display:block;font:700 17px/1.15 var(--font-display);letter-spacing:-.01em;color:var(--dk-ink)}
.pn-docard__lines span{display:block;margin-top:3px;font:500 14px/1.3 var(--font-sans);color:var(--dk-ink-2);overflow-wrap:anywhere}
.pn-docard .pn-wishcard__acts form{margin:0}
.pn-docard .pn-order__bar .pc-ico{width:14px;height:14px;color:var(--pink)}
/* owner 07.10.: the door to the wizard on a logged-in buyer's home (partials/do_door.php): the wish card's quiet panel */
.pn-dodoor{display:grid;gap:10px}
.pn-dodoor__k{display:flex;align-items:center;gap:6px;margin:0;font:600 12px/1.35 var(--font-label);letter-spacing:0;color:var(--pink-text)}
.pn-dodoor__k .pc-ico{flex:none;width:16px;height:16px}
.pn-dodoor h2,.pn-dodoor .pc-sub{margin:0}
.pn-dodoor .pc-btn{justify-self:start;margin-top:4px}
.pn-dostat{display:flex;align-items:center;gap:8px;margin:0;font:600 13px/1.4 var(--font-sans);color:var(--ink-2)}
.pn-dostat .pc-ico{flex:none;width:16px;height:16px;color:var(--pink-text)}
/* owner 08.10. (#59): the link to his chats in his status line */
.pn-dostat a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* owner 08.10. (#37): three women to say hi to on a buyer's last onboarding step (templates/onboard.php) */
.pn-dohello{display:grid;gap:10px;text-align:left}
.pn-dohello h2,.pn-dohello .pc-sub{margin:0}
.pn-dohello__rows{display:grid;gap:10px;margin:4px 0 0;padding:0;list-style:none}
.pn-dohello__row{display:flex;align-items:center;gap:12px;min-width:0}
.pn-dohello__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.2 var(--font-sans)}
.pn-dohello__row .pc-btn{flex:none}
/* Topic pages (owner 27.10., templates/topic.php, lib/topics.php; mockup design/v10/topic/dirty-panties-pics.html).
   pn-tp-* only. The hero is the guides' (pn-gd-hero, guide.css) with the join box beside the copy; every section on the
   home's rhythm (section heads 44, padding --cm-sec); the posts are social posts (her name over the photo, her words under
   it), never price tags or garment specs; tokens only. */

.pn-tp-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media (min-width:1001px){.pn-tp-hero__wrap{grid-template-columns:minmax(0,1fr) 360px;gap:40px}}
.pn-tp-hero .pn-lpm-hero__lede{max-width:60ch}

.pn-tp-sec{padding:clamp(40px,5vw,64px) 0 0}
.pn-tp-sec .pc-sechead{margin-bottom:24px}

/* the numbers: tiles on the surface, three a row from 701 */
.pn-tp-stats{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-tp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1001px){.pn-tp-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pn-tp-stats > li{padding:20px;border-radius:var(--r-card-x);background:var(--surface);box-shadow:var(--sh-card)}
.pn-tp-stats b{display:block;font:800 34px/1 var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.pn-tp-stats span{display:block;margin-top:8px;font:400 15px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-tp-bars{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.pn-tp-bars li{display:grid;grid-template-columns:96px minmax(0,1fr) 28px;align-items:center;gap:8px;font:500 13px/1.2 var(--font-sans);color:var(--ink-2)}
.pn-tp-bars li span{margin:0;font:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-tp-bars i{display:block;width:var(--w);height:8px;border-radius:4px;background:var(--pink)}
.pn-tp-bars em{font-style:normal;text-align:right;color:var(--ink-3)}

/* posts: four a row from 1001, two on a phone */
.pn-tp-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-tp-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}}
@media (min-width:1001px){.pn-tp-posts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pn-tp-post{display:grid;gap:8px;align-content:start;color:var(--ink);text-decoration:none}
.pn-tp-post__by{display:flex;align-items:center;gap:8px;min-width:0}
.pn-tp-post__by img,.pn-tp-post__by i{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--sunken)}
.pn-tp-post__by b{font:700 14px/1.2 var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-tp-post__ph{display:block;aspect-ratio:4/5;border-radius:var(--r-card-x);overflow:hidden;background:var(--sunken)}
.pn-tp-post__ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-fast)}
.pn-tp-post:hover .pn-tp-post__ph img{transform:scale(1.02)}
.pn-tp-post__cap{font:500 15px/1.35 var(--font-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-tp-post small{margin-top:-4px;font:500 13px/1.2 var(--font-sans);color:var(--ink-3)}
.pn-tp-post:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:var(--r-card-x)}

/* creators: the creators page's cards, four a row from 1001 */
.pn-tp-creators{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:701px){.pn-tp-creators{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wide-grid-gap)}}
@media (min-width:1001px){.pn-tp-creators{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* reviews: the home's dark quote tiles */
.pn-tp-quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-tp-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pn-tp-quotes li{padding:22px;border-radius:var(--r-card-x);background:var(--dk-card);color:var(--on-dark)}
.pn-tp-quotes q{display:block;font:400 17px/1.5 var(--font-sans);quotes:"\201C" "\201D"}
.pn-tp-quotes q::before,.pn-tp-quotes q::after{color:var(--pink);font-weight:800}
.pn-tp-quotes small{display:block;margin-top:12px;font:600 13px/1.2 var(--font-sans);opacity:.75}

/* how it works: three tiles */
.pn-tp-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
@media (min-width:701px){.pn-tp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pn-tp-steps li{padding:20px;border-radius:var(--r-card-x);background:var(--surface);box-shadow:var(--sh-card)}
.pn-tp-steps em{font:700 13px/1 var(--font-sans);font-style:normal;color:var(--pink-glyph)}
.pn-tp-steps b{display:block;margin-top:10px;font:700 17px/1.3 var(--font-sans);color:var(--ink)}
.pn-tp-steps p{margin:6px 0 0;font:400 15px/1.5 var(--font-sans);color:var(--ink-2)}

/* questions */
.pn-tp-faq{display:grid;gap:12px;max-width:760px}
.pn-tp-faq details{padding:16px 18px;border-radius:14px;background:var(--surface)}
.pn-tp-faq summary{cursor:pointer;font:700 17px/1.35 var(--font-sans);color:var(--ink)}
.pn-tp-faq p{margin:10px 0 0;font:400 16px/1.55 var(--font-sans);color:var(--ink-2)}

/* the closing band: pink, straight, the home's band rhythm */
.pn-tp-band{margin-top:clamp(40px,5vw,64px);padding:clamp(56px,7vw,96px) 0;background:var(--pink);color:var(--anthracite)}
.pn-tp-band h2{margin:0;color:var(--anthracite)}
.pn-tp-band p{margin:10px 0 22px;max-width:56ch;font:400 17px/1.5 var(--font-sans)}
/* Feed (owner 13.10., lib/livefeed.php; mockup design/v8/feed.html): one column of cards, the live strip above it. A character's
   avatar has the pink ring, its sign is a paper object of the brand: stamp, date, one line. pn-lf-* only. */
/* @member-only */
/* UX 17.10.: the whole feed is a member page (templates/livefeed.php, partials/lf_rails, postbox, pb_post), so none of it rides in a guest bundle */
.pn-lf{max-width:660px;margin:0 auto;padding:0 0 56px}
.pn-lf__live{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 18px;padding:12px 14px;border-radius:var(--r-box);background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.pn-lf__live strong{color:var(--ink);font-variant-numeric:tabular-nums}
.pn-lf__live b{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--live)}
.pn-lf__card{margin:0 0 16px;border-radius:var(--r-box);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.pn-lf__hd{display:flex;align-items:center;gap:11px;padding:14px 16px 10px}
.pn-lf__av{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover}
.pn-lf__av--ch{box-shadow:none}
.pn-lf__who{min-width:0;line-height:1.25}
.pn-lf__who b{display:block;font-size:15px}
.pn-lf__who small{font-size:13px;color:var(--ink-2)}
.pn-lf__face{flex:none;display:block;border-radius:50%}
.pn-lf__who a{color:inherit;text-decoration:none}
.pn-lf__who a:hover{text-decoration:underline}
.pn-lf__badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--sunken);color:var(--ink-2);font:600 11px/1.5 var(--font-sans);vertical-align:2px}   /* sentence case, like every label of the site; UX 17.10. #55: a neutral label, the pink ring on the avatar is the character's mark */
.pn-lf__when{margin-left:auto;flex:none;font-size:12px;color:var(--ink-2)}
.pn-lf__tx{margin:0;padding:0 16px 14px;font-size:15.5px;line-height:1.5}
.pn-lf__tape{display:inline;padding:1px 8px;background:var(--pink);color:var(--anthracite);font-size:19px;line-height:1.5;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn-lf__sign{margin:0 16px 14px;padding:18px 16px;border-radius:var(--r-pcard);background:var(--cream);color:var(--anthracite);text-align:center}
.pn-lf__stamp{display:inline-block;padding:6px 12px;border:3px solid var(--anthracite);border-radius:var(--r-chip);font:700 17px/1 var(--font-sans);transform:rotate(-4deg)}
.pn-lf__big{display:block;margin-top:12px;font:700 28px/1.1 var(--font-display);letter-spacing:-.02em}
.pn-lf__sign small{display:block;margin-top:6px;font-size:13px;color:var(--muted-lt)}
.pn-lf__ad{padding:0 16px 14px}
.pn-lf__ad .pc-card{width:100%;max-width:none}
.pn-lf__ad .pc-card .pc-media{aspect-ratio:1/1}
.pn-lf__ft{margin:0;padding:0 16px 16px}
/* UX 17.10. #50: the foot of a post is ONE key (Order request, else Message) and round tonal icons beside it (message,
   follow); her profile is her name and avatar in the head. No frames inside (tonal surfaces, owner 09.10.). */
.pn-lf__acts{display:flex;align-items:center;gap:8px;padding:4px 16px 16px}
.pn-lf__acts:empty{display:none}
.pn-lf__acts > :first-child{flex:1 1 auto;min-width:0}
.pn-lf__acts > .pn-lf__ico,.pn-lf__acts > .pn-followform,.pn-lf__acts > .pn-follow--icon{flex:none}
.pn-lf__acts form{display:flex;margin:0}
.pn-lf__acts > :first-child.pc-btn{width:100%;min-width:0;white-space:nowrap}
.pn-lf__acts .pn-follow--icon.is-on{color:var(--pink)}
.pn-lf__order[disabled]{cursor:default}
.pn-lf__order.is-sent,.pn-lf__order.is-no{background:var(--sunken);border-color:transparent;color:var(--ink-2);box-shadow:none}
.pn-lf__order[aria-busy]{opacity:.6}
.pn-lf__note{margin:18px 0 0;font-size:13px;color:var(--ink-2);text-align:center}
@media (max-width:700px){.pn-lf__acts{padding:4px 12px 12px}.pn-lf__ad .pc-card .pc-media{aspect-ratio:4/5}.pn-lf__big{font-size:24px}}
/* UX 17.10. #54: a post fits the desktop screen — the picture is capped at 64 % of its height (cover crops, nothing stretches) */
@media (min-width:701px){.pn-lf__ad .pc-card .pc-media,.pn-lf__vid,.pn-lf__mos--1 a{max-height:64vh;width:100%}}
/* UX-016 (23.10.): the video tile link had no focus ring; inset, because the post card clips (overflow:hidden) */
.pn-lf__vid:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
/* UX 17.10. #53: on phones the live strip is one slim line before the first post, not a block of three */
@media (max-width:700px){.pn-lf__live{flex-wrap:nowrap;gap:14px;margin:0 0 12px;padding:8px 12px;overflow-x:auto;scrollbar-width:none;font-size:13px;white-space:nowrap}.pn-lf__live::-webkit-scrollbar{display:none}.pn-lf__live > span{flex:none}}

/* @end-member-only */

/* @member-only */
/* POST BOX (mockup design/v9/postbox, 16.10.) — the seller's composer at the top of /feed/.
   pn-pb-* only. Composed from the kit and the feed's own classes; nothing here restyles a kit component:
   the box = a .pn-lf__card · avatar = .pc-avatar.pn-lf__av · keys = .pc-btn (ghost / line / primary, sm) ·
   field = textarea.pc-input · thumbnails = the photo frame + .pc-remove · add slot = .pc-slot · confirm = .pc-check ·
   sheets = dialog.pn-sheet (+ .pn-sheet__grab/__head/__title/__acts) · upgrade = .pc-chip.pc-chip--premium ·
   her published post = .pn-lf__card + .pn-lf__hd / __tx / __mos / __vid / __acts (feed classes, new kind "post").
   Tokens only (no raw colour). Breakpoint = the kit's 700 / 701. Member layer: tones, not lines. */

/* ============ 1 · the box: one feed card, first in the column ============ */
.pn-pb{padding:14px 16px 8px}
.pn-pb__row{display:flex;align-items:center;gap:11px}
.pn-pb__row > .pc-avatar{flex:none;width:42px;height:42px}
/* the prompt is a button that looks like the field it opens (the chat composer's pill): tonal, no edge */
.pn-pb__prompt{flex:1;min-width:0;display:flex;align-items:center;min-height:48px;padding:0 18px;border:0;border-radius:var(--radius-full);background:var(--t-tint);color:var(--ink-2);font:400 15px/1.3 var(--font-sans);text-align:left;cursor:text;transition:background-color var(--dur-fast)}
.pn-pb__prompt:hover{background:var(--t-tint-2)}
.pn-pb__prompt:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-pb__prompt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* tools: Photos · Video (ghost keys of the feed foot) and, for a free seller, the day's counter on the right */
.pn-pb__tools{display:flex;align-items:center;gap:2px;margin:6px 0 0 45px}
.pn-pb__tools .pc-btn--ghost{padding-inline:12px;color:var(--ink-2)}
.pn-pb__tools .pc-btn--ghost .pc-ico{color:var(--ink)}
.pn-pb__tools .pc-btn--ghost:hover{color:var(--ink)}

/* the day's counter (free sellers only): two quiet pips + the words. Never pink, never a warning. */
.pn-pb__cs{display:none}
.pn-pb__count{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding-right:2px;font:500 12.5px/1.2 var(--font-sans);color:var(--ink-2);white-space:nowrap}
.pn-pb__pips{display:inline-flex;gap:4px}
.pn-pb__pips i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.pn-pb__pips i.is-used{background:var(--ink-2);box-shadow:none}

/* ============ 2 · the limit is reached (free seller, 2 of 2 today) ============ */
.pn-pb.is-full .pn-pb__prompt{cursor:default;background:var(--t-tint);color:var(--ink-3)}
.pn-pb.is-full .pn-pb__row .pc-avatar{opacity:.7}
.pn-pb__full{margin:12px 0 8px;padding:16px;border-radius:var(--r-rules);background:var(--sunken)}
.pn-pb__full b{display:block;font:700 15px/1.3 var(--font-sans);color:var(--ink)}
.pn-pb__full p{margin:4px 0 0;font:400 14px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-pb__fullfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
/* the gold pill at key size: the kit's .pc-chip--premium (metal, sheen, reduced-motion rule) — only its size here */
.pc-chip.pc-chip--premium.pn-pb__gold{min-height:var(--tap);padding:0 18px;gap:8px;font:700 14px/1 var(--font-sans)}
.pn-pb__gold .pc-ico{width:18px;height:18px}

/* ============ 3 · the composer: one dialog. Phone = the kit bottom sheet (showModal), full height;
   desktop = the same dialog opened in place inside the box (show(), non-modal) ============ */
dialog.pn-sheet.pn-pbsheet{padding:10px 0 0;overflow:hidden}
dialog.pn-pbsheet[open]{display:flex;flex-direction:column}
.pn-pbsheet > form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.pn-pbsheet .pn-sheet__head{margin:0;padding:0 16px 12px 22px}
.pn-pbsheet__x{flex:none}
.pn-pbsheet__sub{display:flex;align-items:center;gap:8px;margin-top:6px}
.pn-pbsheet__sub .pn-pb__count{margin:0}
.pn-pbsheet__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 22px 16px}
.pn-pb__who{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pn-pb__who .pc-avatar{width:36px;height:36px}
.pn-pb__who b{font:700 15px/1.2 var(--font-sans)}
/* the field: the kit textarea, grows with the text; the soft count sits in its corner */
.pn-pb__field{position:relative}
.pn-pb__field textarea.pc-input{display:block;min-height:150px;padding:14px 18px 34px;resize:none;font-size:16px;line-height:1.5}
.pn-pb__len{position:absolute;right:16px;bottom:10px;font:500 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-3);pointer-events:none}
.pn-pb__len.is-near{color:var(--ink-2)}
/* the house rule: one quiet line, the shield, a link to the full rules */
.pn-pb__rule{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 0;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
.pn-pb__rule .pc-ico{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ink-3)}
.pn-pb__rule a{color:inherit;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px;white-space:nowrap}
.pn-pb__rule a:hover{color:var(--ink)}
/* the foot: what to add, and the one pink key. On a phone it is the sheet's last row, so with the keyboard open it
   rests on the keyboard (the sheet follows window.visualViewport). */
.pn-pbsheet__foot{display:flex;align-items:center;gap:4px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface)}
.pn-pbsheet__foot .pc-btn--ghost{padding-inline:12px}
.pn-pbsheet__foot .pc-btn--ghost[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.pn-pbsheet__post{margin-left:auto;min-width:96px}
.pn-pbsheet__cancel{display:none}
.pn-pbsheet__foot .pn-pb__count{display:none}

/* media: up to 4 photos, or 1 video */
.pn-pb__media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0;padding:0;list-style:none}
.pn-pb__media > li{min-width:0}
.pn-pb__media > li > .pc-slot{width:100%;height:100%}
.pn-pb__thumb{position:relative;aspect-ratio:1;border-radius:var(--r-icon);overflow:hidden;background:var(--ph-media);box-shadow:inset 0 0 0 1px var(--t-hair);touch-action:none}
.pn-pb__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pn-pb__thumb .pc-remove{top:5px;right:5px}
.pn-pb__thumb .pc-remove::after{content:"";position:absolute;inset:-8px}
.pn-pb__thumb.is-uploading img{opacity:.55}
.pn-pb__bar{position:absolute;left:8px;right:8px;bottom:8px;height:5px;border-radius:var(--radius-full);background:var(--paper);overflow:hidden}
.pn-pb__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--pink);transform:scaleX(var(--p,.5));transform-origin:left}
.pn-pb__media .pc-slot{aspect-ratio:1;border-radius:var(--r-icon);font-size:12px}
.pn-pb__media .pc-slot .pc-ico{width:22px;height:22px}
.pn-pb__hint{margin:8px 2px 0;font:400 12.5px/1.4 var(--font-sans);color:var(--ink-3)}
/* one video: its poster, the feed's play disc, length + size */
.pn-pb__vid{position:relative;margin:14px 0 0;width:min(100%,260px);aspect-ratio:4/5;border-radius:var(--r-rules);overflow:hidden;background:var(--ph-media);box-shadow:inset 0 0 0 1px var(--t-hair)}
.pn-pb__vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pn-pb__vid .pc-remove{top:8px;right:8px}
.pn-pb__vid .pc-remove::after{content:"";position:absolute;inset:-8px}
.pn-pb__vlen{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-full);font:600 12.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--on-media);background:var(--glass-strong)}
.pn-pb__vmeta{margin:8px 2px 0;font:400 12.5px/1.4 var(--font-sans);color:var(--ink-2)}

/* phone: the sheet is (almost) the whole screen; the tab bar steps aside (chrome.css, dialog.pn-sheet[open]) */
@media (max-width:700px){
  .pn-pb__tools{margin-left:-6px}
  .pn-pb__tools .pn-pb__cl{display:none}
  .pn-pb__tools .pn-pb__cs{display:inline}
  dialog.pn-sheet.pn-pbsheet{height:auto;max-height:calc(100svh - 24px)}
  .pn-pbsheet__body{flex:0 1 auto}
  /* keyboard open: lib JS sets --pb-kb (the keyboard's height from visualViewport); the sheet ends on the keyboard */
  dialog.pn-sheet.pn-pbsheet.is-kb{bottom:var(--pb-kb);height:auto;max-height:calc(100svh - var(--pb-kb) - 24px);border-radius:var(--r-empty) var(--r-empty) 0 0}
  .pn-pbsheet.is-kb .pn-pb__field textarea.pc-input{min-height:96px}
}

/* desktop: the same dialog, opened in place in the box (not a modal) */
@media (min-width:701px){
  .pn-pb.is-open > .pn-pb__row,.pn-pb.is-open > .pn-pb__tools{display:none}
  .pn-pb.is-open{padding:0}
  .pn-pb dialog.pn-sheet.pn-pbsheet:not(:modal){position:static;inset:auto;width:auto;max-width:none;max-height:none;margin:0;padding:16px 16px 0;border-radius:0;box-shadow:none;background:transparent;color:inherit;--surface:var(--t-band)}
  .pn-pb .pn-pbsheet:not(:modal) .pn-sheet__grab,.pn-pb .pn-pbsheet:not(:modal) .pn-sheet__head{display:none}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__body{display:grid;grid-template-columns:42px minmax(0,1fr);gap:0 11px;padding:0 0 12px;overflow:visible}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__who{grid-row:1/span 4;align-self:start;margin:0}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__who .pc-avatar{width:42px;height:42px}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__who b{display:none}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pb__field textarea.pc-input{min-height:112px}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__foot{margin:0 -16px;padding:10px 16px 12px 69px;background:transparent}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__foot .pn-pb__cs{display:none}
.pn-pb__count{display:inline-flex;margin-left:12px}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__post{margin-left:0}
  .pn-pb .pn-pbsheet:not(:modal) .pn-pbsheet__cancel{display:inline-flex;margin-left:auto}
  .pn-pb__vid{width:220px}
}

/* ============ 4 · the video rules: a kit sheet BEFORE the file picker ============ */
.pn-pbrules .pn-sheet__head{align-items:center}
.pn-pbrules__lede{margin:0 0 14px;font:400 14px/1.5 var(--font-sans);color:var(--ink-2)}
.pn-pbrules__grp{margin:0 0 12px}
.pn-pbrules__h{margin:0 0 6px;font:800 11px/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pn-pbrules__grp ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.pn-pbrules__grp li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font:400 14px/1.45 var(--font-sans);color:var(--ink)}
.pn-pbrules__grp li .pc-ico{flex:none;width:18px;height:18px;margin-top:1px}
.pn-pbrules__grp--ok li .pc-ico{color:var(--online)}
.pn-pbrules__grp--no li .pc-ico{color:var(--ink-2)}
.pn-pbrules__ack{display:flex;align-items:center;gap:12px;min-height:56px;margin:4px 0 0;padding:10px 14px;border-radius:var(--r-rules);background:var(--sunken);font:600 14px/1.4 var(--font-sans);color:var(--ink);cursor:pointer}
.pn-pbrules__ack:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-pbrules .pn-sheet__acts{margin-top:16px}

/* ============ 5 · her post in the feed (new kind "post": text first, then the feed's mosaic / video) ============ */
.pn-lf__card--post{position:relative}
.pn-lf__card--post .pn-lf__tx{white-space:pre-line}
.pn-lf__card--post .pn-lf__hd .pc-iconbtn{width:40px;height:40px;margin:-6px -8px -6px 0;background:transparent}
.pn-lf__card--post .pn-lf__hd .pc-iconbtn:hover{background:var(--t-tint)}
.pn-lf__card--post .pn-lf__hd .pc-iconbtn::after{content:"";position:absolute;inset:-2px}
/* the neutral posting moment: the same for every post (upload + a fixed short beat), then the card is simply there */
.pn-lf__card.is-posting .pn-lf__mos,.pn-lf__card.is-posting .pn-lf__vid{opacity:.6}
.pn-pb__run{position:absolute;left:0;right:0;top:0;height:3px;background:var(--t-tint);overflow:hidden}
.pn-pb__run i{position:absolute;top:0;bottom:0;left:0;width:38%;background:var(--pink);border-radius:var(--radius-full)}
@media (prefers-reduced-motion:no-preference){.pn-pb__run i{animation:pn-pb-run 1.2s ease-in-out infinite}}
@keyframes pn-pb-run{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.pn-lf__card.is-posting .pn-lf__who small{display:inline-flex;align-items:center;gap:6px}
/* the delete question under her "…" (not in the mockup): the kit sheet, the rules sheet's lede line */
.pn-pbdel .pn-sheet__acts{display:grid;gap:8px;margin-top:16px}
/* ---- feed slider (owner 18.10., lib/feed_slider.php, partials/lf_slider.php): the Premium sellers as one row of the directory's
   seller card, under the post box. One tonal surface like a post, no frame; the cards keep their 4:5 portrait from the first
   byte; the arrows only where there is a pointer to use them (phones swipe). Her own card's label is quiet glass, never pink:
   the one pink key of the row is the "You here?" plus of a free seller. */
.pn-fs{margin:0 0 16px;padding:14px 0 16px;border-radius:var(--r-box);background:var(--surface);overflow:hidden}
.pn-fs__head{display:flex;align-items:center;gap:12px;margin:0 16px 12px;min-height:36px}
.pn-fs__h{flex:1 1 auto;min-width:0;margin:0}
.pn-fs__all{flex:none}
.pn-fs__nav{display:none;flex:none;gap:6px}
@media (min-width:701px) and (hover:hover) and (pointer:fine){.pn-fs__nav{display:inline-flex}}
.pn-fs__arr[disabled]{opacity:.38;cursor:default}
.pn-fs__row{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:0 16px 2px;scrollbar-width:none}
.pn-fs__row::-webkit-scrollbar{display:none}
.pn-fs__row > .pc-scard{flex:none;width:148px;scroll-snap-align:start}
.pn-fs__row.is-drag{scroll-snap-type:none;cursor:grabbing}
.pn-fs__row.is-drag .pn-card-link{pointer-events:none}
.pn-fs__join .pn-youcard__plus{width:56px;height:56px;margin:-44px 0 0 -28px}
.pn-fs__join .pn-youcard__plus .pc-ico{width:28px;height:28px}
.pn-fs__price{color:var(--scard-ink);font-weight:700;font-variant-numeric:tabular-nums}
.pc-scard__you--quiet{background:var(--scard-glass);color:var(--scard-ink);font-weight:600;-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
@media (max-width:700px){.pn-fs__row{gap:10px}.pn-fs__row > .pc-scard{width:140px}}
/* @end-member-only */

/* ============ 4 · the box's door on her dashboard and My listings (owner 27.10., partials/postbox_door.php): the box's row
   and tools as links into /feed/#post, under a card head; "New" until her first post ============ */
.pn-pb.pn-pbdoor{padding:18px 20px 10px}
.pn-pbdoor__head{display:flex;align-items:center;gap:10px}
.pn-pbdoor__head .pc-h-card{margin:0}
.pn-pbdoor__new{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:var(--r-chip);background:var(--pink);color:var(--anthracite);font:700 11px/1 var(--font-sans);letter-spacing:.02em}
.pn-pbdoor__sub{margin:4px 0 14px}
a.pn-pb__prompt{text-decoration:none}
.pn-pbdoor.is-full .pn-pb__row{margin-bottom:10px}
@media (max-width:700px){.pn-pb.pn-pbdoor{padding:16px 16px 8px}}
.pn-lf__end{margin:8px 16px 18px}   /* UX 200 BUY-26: the end of the week, the way on */
.pn-lf__end .pc-sub{flex-basis:100%;margin:0;text-align:center}
/* Promo studio (owner 28.10., templates/partials/mc_promo.php; owner 29.10. 13:30: the original left, five variants right,
   a tap opens the sheet): pn-pst-* only. Tonal surfaces inside (owner 09.10.): panels on the page surface, rows one step
   darker, no extra borders. Tokens only; nothing under 13 px; every target 44 px on the phone. */
.pn-pst__panel{margin-block-end:var(--space-4)}
.pn-pst__as{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);background:var(--sunken);outline:2px dashed var(--line);outline-offset:-6px}
.pn-pst__as label{font-weight:600}.pn-pst__as .pc-input{flex:1 1 160px;max-width:260px}
.pn-pst__owner{font:700 13px/1 var(--font-sans);color:var(--ink-2);padding:6px 8px;border-radius:var(--r-label);background:var(--surface-2)}
.pn-pst__asbar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-block-end:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--r-box);background:var(--chrome);color:var(--on-chrome);font:600 14px/1.3 var(--font-sans)}
.pn-pst__asbar a{color:inherit;min-height:var(--tap);display:inline-flex;align-items:center}
.pn-pst__count,.pn-pst__langnote{margin:var(--space-1) 0 0;font-size:13px;color:var(--ink-2)}
.pn-pst__list{display:grid;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none}
.pn-pst__row{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,3fr);grid-template-areas:"orig out" "orig act" "prog prog";gap:var(--space-2) var(--space-4);align-items:start;background:var(--surface-2);border-radius:var(--r-box);padding:var(--space-3)}
.pn-pst__orig{grid-area:orig;display:flex;gap:var(--space-3);align-items:flex-start;min-width:0}
.pn-pst__thumb{flex:none;width:120px;height:120px;object-fit:cover;border-radius:var(--r-chip);background:var(--sunken)}
.pn-pst__thumb--none{display:grid;place-items:center;overflow:hidden}.pn-pst__thumb--none .pc-nophoto{transform:scale(.6)}
.pn-pst__meta{min-width:0}
.pn-pst__title{margin:0;font:600 15px/1.3 var(--font-sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pn-pst__meta small{display:block;margin-block-start:2px;font-size:13px;color:var(--ink-2)}
.pn-pst__origlabel{display:block;margin-block-start:var(--space-2);font-size:13px;color:var(--ink-3)}
.pn-pst__out{grid-area:out;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
.pn-pst__tile{appearance:none;display:block;width:100%;padding:0;border:0;background:var(--sunken);border-radius:var(--r-label);overflow:hidden;cursor:zoom-in;text-align:center;color:var(--ink-2);font:600 13px/1 var(--font-sans)}
.pn-pst__tile img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pn-pst__tile > span{display:block;padding:6px 4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-pst__tile:hover img{opacity:.92}
.pn-pst__tile:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-pst__tile--wait{aspect-ratio:4/5.5;background:linear-gradient(100deg,var(--sunken) 30%,var(--surface) 50%,var(--sunken) 70%);background-size:220% 100%;animation:pn-pst-shimmer 1.6s linear infinite}
.pn-pst__row:not([data-state="building"]) .pn-pst__tile--wait{animation:none;opacity:.5}
@keyframes pn-pst-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.pn-pst__act{grid-area:act;display:grid;justify-items:start}
.pn-pst__state{display:none;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.pn-pst__row[data-state="building"] [data-st="building"],.pn-pst__row[data-state="failed"] [data-st="failed"],.pn-pst__row[data-state="none"] [data-st="note"]{display:flex}
.pn-pst__hint{font-size:13px;color:var(--ink-2);text-wrap:balance}.pn-pst__hint:empty{display:none}
.pn-pst__st{display:inline-flex;align-items:center;min-height:23px;font:700 13px/1 var(--font-sans);border-radius:var(--r-label);padding:4px 10px;white-space:nowrap}
.pn-pst__st--bz{background:var(--pink);color:var(--anthracite)}
.pn-pst__st--no{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.pn-pst__prog{grid-area:prog;display:none;height:6px;border-radius:var(--radius-full);background:var(--sunken);overflow:hidden}
.pn-pst__row[data-state="building"] .pn-pst__prog{display:block}
.pn-pst__prog i{display:block;height:100%;width:32%;min-width:24px;border-radius:var(--radius-full);background:var(--pink);animation:pn-pst-slide 1.6s var(--ease-out,ease-in-out) infinite}
@keyframes pn-pst-slide{from{transform:translateX(-110%)}to{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.pn-pst__prog i,.pn-pst__tile--wait{animation:none}.pn-pst__prog i{width:100%;opacity:.6}}
.pn-pst__me .pn-pst__row{margin-block-start:var(--space-3)}
.pn-pst__thumb--me{border-radius:50%}
.pn-pst__nophoto{display:block;margin-block-start:var(--space-2)}
.pn-pst__locked{display:grid;gap:var(--space-3)}
.pn-pst__gold{margin-block-start:var(--space-3)}
.pn-pst__next,.pn-pst__foot{margin-block-start:var(--space-4)}
.pn-pst__zoom.pn-sheet{max-width:min(92vw,560px)}
.pn-pst__zoomlabel{font:600 14px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-pst__fmt{display:flex;gap:var(--space-2);margin-block-end:var(--space-3)}
.pn-pst__fmt .pc-chip{flex:1 1 0;min-height:var(--tap);background:var(--surface);color:var(--ink);border-color:var(--line)}
.pn-pst__fmt .pc-chip[aria-pressed="true"]{background:var(--pink);color:var(--anthracite);border-color:var(--pink)}
.pn-pst__zoomimg{display:block;width:100%;height:auto;max-height:62svh;object-fit:contain;border-radius:var(--r-label);background:var(--sunken)}
.pn-pst__where{margin:var(--space-2) 0 0;font-size:13px}.pn-pst__where:empty{display:none}
.pn-pst__zoombtns{display:flex;gap:var(--space-2);margin-block-start:var(--space-3)}.pn-pst__zoombtns > *{flex:1 1 0}
.pn-pst__zoombtns .pc-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.pn-pst__row--mag{grid-template-columns:minmax(0,1fr);grid-template-areas:"out" "act" "prog"}   /* her magazine (owner 30.10.): the cover big, the pages as a strip, the PDF */
.pn-pst__row--mag .pn-pst__out{display:block}
.pn-pst__magbody{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:var(--space-4);align-items:start}
.pn-pst__tile--wait.pn-pst__magcover{aspect-ratio:4/5.5}
.pn-pst__magcover > span{font-size:14px}
.pn-pst__magside{display:grid;gap:var(--space-3);min-width:0}
.pn-pst__maglabel{margin:0;font:600 13px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-pst__magstrip{display:flex;gap:var(--space-2);overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:var(--space-1);overscroll-behavior-x:contain}
.pn-pst__magstrip > .pn-pst__tile{flex:0 0 116px;scroll-snap-align:start}
.pn-pst__magstrip > .pn-pst__tile--wait{aspect-ratio:4/5.5}
.pn-pst__magbtns{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-pst__magbtns > *{min-height:var(--tap);flex:0 1 auto}
.pn-pst__magbtns .pc-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.pn-pst__fmt[hidden]{display:none}
.pn-pst__kitbody{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:var(--space-4);align-items:start}   /* her album kit (owner 30.10.): the reel left, the calendar right */
.pn-pst__kitreel{display:grid;gap:var(--space-2);align-content:start;min-width:0}
.pn-pst__tile--wait.pn-pst__kitreel{aspect-ratio:9/16}
.pn-pst__reel{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-label);background:var(--sunken)}
.pn-pst__kitreel .pn-pst__magbtns > *{flex:1 1 0}
@media (max-width:900px){
  .pn-pst__row{grid-template-columns:minmax(0,1fr);grid-template-areas:"orig" "out" "act" "prog"}
  .pn-pst__thumb{width:88px;height:88px}
  .pn-pst__out{gap:var(--space-1)}
}
@media (max-width:700px){
  .pn-pst__out{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
  .pn-pst__magbody{grid-template-columns:minmax(0,1fr)}
  .pn-pst__magcover{max-width:320px;width:100%;justify-self:center}
  .pn-pst__magbtns > *{flex:1 1 0}
  .pn-pst__kitbody{grid-template-columns:minmax(0,1fr)}
  .pn-pst__kitreel{max-width:280px;width:100%;justify-self:center}
  .pn-pst__gold{width:100%}
}
/* Her choice (owner 31.10.: "Im Promo-Studio soll ihr Content gelistet werden und da entscheidet sie, was sie generiert.";
   switch promo_pick, partials/mc_promo_pick.php): "Your content" with Listings and Photos. Tonal surfaces, no lines; the
   chosen photo carries the pink ring; the sticky bar sits above the tab bar like the bulk bar of My content. */
.pn-pst__tabs{display:flex;gap:4px;margin:var(--space-3) 0 0;padding:4px;border-radius:var(--radius-full);background:var(--sunken);width:max-content;max-width:100%}
.pn-pst__tab{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap);padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:transparent;color:var(--ink-2);font:600 15px/1 var(--font-sans);cursor:pointer}
.pn-pst__tab[aria-selected="true"]{background:var(--pink);color:var(--anthracite)}
.pn-pst__tab:focus-visible,.pn-pst__src:focus-visible,.pn-pst__ph:focus-visible,.pn-pst__clear:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-pst__tabn{min-width:22px;padding:4px 7px;border-radius:var(--radius-full);background:var(--surface-2);color:var(--ink-2);font:700 13px/1 var(--font-sans);text-align:center}
.pn-pst__tab[aria-selected="true"] .pn-pst__tabn{background:color-mix(in srgb,var(--anthracite) 14%,transparent);color:var(--anthracite)}
.pn-pst__pane{margin-block-start:var(--space-3)}
.pn-pst__pane[hidden],.pn-pst__panel[hidden]{display:none}
.pn-pst__orig--pick{flex-direction:column;align-items:stretch;gap:var(--space-3)}
.pn-pst__srcs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pn-pst__src{appearance:none;flex:none;width:64px;height:64px;padding:0;border:0;border-radius:var(--r-chip);background:var(--sunken);overflow:hidden;cursor:pointer;opacity:.62;transition:opacity var(--dur-fast)}
.pn-pst__src img{display:block;width:100%;height:100%;object-fit:cover}
.pn-pst__src:hover{opacity:.9}
.pn-pst__src[aria-checked="true"]{opacity:1;outline:3px solid var(--pink);outline-offset:2px}
.pn-pst__make{display:grid;gap:var(--space-1);justify-items:start}
.pn-pst__rule{margin:0;font-size:13px;line-height:1.35;color:var(--ink-2)}.pn-pst__rule:empty{display:none}
.pn-pst__row--pick .pn-pst__out:empty{display:none}
.pn-pst__row[data-state="building"] .pn-pst__make,.pn-pst__row[data-state="failed"] .pn-pst__make{display:none}
.pn-pst__panehelp{margin:0 0 var(--space-3)}
.pn-pst__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--space-2);margin:0;padding:0;list-style:none}
.pn-pst__ph{appearance:none;position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-label);background:var(--sunken);overflow:hidden;cursor:pointer}
.pn-pst__ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pn-pst__ph[aria-pressed="true"]{outline:3px solid var(--pink);outline-offset:-3px}
.pn-pst__check{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--anthracite) 40%,transparent);box-shadow:inset 0 0 0 2px var(--white)}
.pn-pst__ph[aria-pressed="true"] .pn-pst__check{background:var(--pink);box-shadow:none}
.pn-pst__ph[aria-pressed="true"] .pn-pst__check::after{content:"";position:absolute;left:10px;top:5px;width:6px;height:12px;border:solid var(--anthracite);border-width:0 3px 3px 0;transform:rotate(45deg)}
.pn-pst__phtag{position:absolute;left:6px;right:6px;bottom:6px;padding:4px 6px;border-radius:var(--r-label);background:color-mix(in srgb,var(--anthracite) 72%,transparent);color:var(--white);font:600 13px/1.2 var(--font-sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-pst__bar{position:sticky;bottom:var(--dock);z-index:2;display:grid;gap:var(--space-2);margin-block-start:var(--space-3);padding:var(--space-3);border-radius:var(--r-box);background:var(--t-over);box-shadow:0 12px 32px -12px var(--scrim)}
.pn-pst__barhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:28px}
.pn-pst__barcount{margin:0;font:700 15px/1.2 var(--font-sans);color:var(--ink)}
.pn-pst__clear{appearance:none;min-height:var(--tap);margin-block:-8px;padding:0 var(--space-2);border:0;background:none;color:var(--ink-2);font:600 14px/1 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pn-pst__clear[hidden]{display:none}
.pn-pst__baracts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.pn-pst__go{flex-direction:column;gap:2px;white-space:normal;text-align:center;min-height:var(--tap)}
.pn-pst__golabel{font-weight:700}
.pn-pst__gorule{font:500 13px/1.25 var(--font-sans)}.pn-pst__gorule:empty{display:none}
@media (max-width:700px){
  .pn-pst__tabs{width:100%}.pn-pst__tab{flex:1 1 0;padding:0 var(--space-2)}
  .pn-pst__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pn-pst__baracts{grid-template-columns:minmax(0,1fr);gap:6px}
  .pn-pst__go{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:2px var(--space-2);text-align:left}
  .pn-pst__makebtn{width:100%}.pn-pst__make{justify-items:stretch}
}
/* App chrome = mockup .hdr / .ftr (cast-mockup.html l.79-93): chrome fill, the grey 50 % line (--chrome-line, never
   white), logo on-dark, nav Inter Tight 600 14 at 85 %, header buttons = .hdr .btn (line-dk login, pink join, no edge).
   The phone tab bar (members) is derived from the footer: chrome, the line on top, the active tab a pink pill.
   Loaded last by tools/build_css.sh so it wins over page files. */

/* ---------- Header (all widths): chrome, one line under it, 68 / 58 ---------- */
.pc-header{background:var(--t-chrome,var(--chrome));color:var(--on-chrome);border-bottom:1px solid var(--chrome-line);box-shadow:var(--sh-chrome,none);--count-ring:var(--t-chrome,var(--chrome))}   /* no borders 18.10.: the line is transparent (tokens.css); dark = the near-black bar + a soft shadow under it */
.pc-header .pc-logo{color:var(--on-chrome)}
.pc-header .pc-nav a{color:var(--on-chrome);opacity:.85}
.pc-header .pc-nav a:hover{opacity:1}
.pc-header .pc-nav a.is-active,.pc-header .pc-nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:8px}
.pc-header .pc-nav .pc-count{position:static;box-shadow:none}
/* Header search: a line pill on the chrome (the .btn--line-dk family). */
.pc-header .pc-search,.pc-header form.pn-search{flex:1 1 auto;max-width:360px;height:36px;border-radius:var(--r-btn);border:1px solid transparent;background:var(--chrome-well);color:var(--on-chrome-2);box-shadow:none}
.pc-header .pc-search:hover,.pc-header form.pn-search:hover{background:var(--chrome-well-hover)}
.pc-header .pc-search .pc-ico{color:var(--on-chrome-2)}
.pc-header form.pn-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--on-chrome);font:600 13px/1 var(--font-sans);outline:none}
.pc-header form.pn-search input::placeholder{color:var(--on-chrome-2);opacity:1}
.pc-header form.pn-search:focus-within{border-color:var(--pink)}
.pc-header form.pn-search:has(input:focus-visible){outline:3px solid var(--pink);outline-offset:2px}   /* night N8 #87: the keyboard ring (the 1 px pink edge alone was not visible enough) */
/* T32: the search takes the flexible space, and its placeholder is a CSS layer (long / short) that hides once she
   types, so no language is cut mid-word at 1024. */
.pc-header .pc-search,.pc-header form.pn-search{flex:1 1 200px;min-width:0;max-width:360px}
.pc-header form.pn-search{position:relative}
.pn-search__ph{position:absolute;left:44px;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--on-chrome-2);font:600 13px/1.2 var(--font-sans);white-space:nowrap}
.pn-search__ph-s{display:none}
.pc-header form.pn-search input:not(:placeholder-shown) + .pn-search__ph{display:none}
@media (max-width:1100px){.pn-search__ph-l{display:none}.pn-search__ph-s{display:inline}}
/* T20: header buttons never wrap (fr "Inscription gratuite" went to two lines at 360; phones show the short label). */
.pc-header .pc-btn{white-space:nowrap}
/* Header icon buttons = the burger square (40, radius 12): a tonal well on the chrome (tonal pass 05.10., no line). */
.pc-header .pc-iconbtn{width:40px;height:40px;border-radius:9px;border:1px solid transparent;background:var(--chrome-well);color:var(--on-chrome)}
.pc-header .pc-iconbtn .pc-ico{width:22px;height:22px}
.pc-header .pc-iconbtn:hover{background:var(--chrome-well-hover)}
.pc-header .pc-iconbtn.is-active,.pc-header .pc-iconbtn[aria-current="page"]{border-color:transparent;background:var(--accent-soft);color:var(--pink)}   /* no borders 18.10.: a soft fill, not a pink frame */
/* Header buttons = .hdr .btn: 12/18, 13 px, no edge. Log in = .btn--line-dk, Join / New ad = .btn--pink. */
.pc-header .pc-btn{min-height:var(--control-sm);padding:var(--btn-sm-py) var(--btn-sm-px);border-width:1px;border-radius:var(--r-btn-sm);margin-bottom:0;font-size:var(--btn-sm-fs);gap:8px;box-shadow:none;transform:none}
.pc-header .pc-btn .pc-ico{width:16px;height:16px;margin-block:-2px}
.pc-header .pc-btn--ghost{border-color:transparent;background:var(--chrome-well);color:var(--on-chrome)}   /* no borders 18.10.: "Log in" is a chrome well, not an outlined ghost */
.pc-header .pc-btn--ghost:hover{border-color:transparent;background:var(--chrome-well-hover)}
.pc-header .pc-btn--primary{border-color:transparent}
.pc-header .pn-header__avatar{border:1px solid transparent}
.pc-header .pn-header__avatar.pc-avatar--ring{border:0}   /* no borders 18.10.: one pink key per view, no pink ring */
.pc-header .pc-logo:focus-visible,.pc-header .pc-nav a:focus-visible,.pc-header .pc-iconbtn:focus-visible,.pc-header .pn-header__avatar:focus-visible,.pc-header .pc-btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
@media (min-width:701px){.pc-header .pn-appbar__search{display:none}}
@media (min-width:701px){.pc-header .pc-iconbtn{width:36px;height:36px}}   /* Sleek 08.10.: compact on desktop, 40 on the phone */
/* UX polish 23.10. UX-031: one height in the desktop header row — the text keys (34 = --control-sm) rise to the icon
   squares' 36; the search pill is 36 already. The avatar stays its 40 circle. */
@media (min-width:701px){.pc-header .pc-btn{min-height:36px}}
/* Owner 30.09.: the light/dark toggle (a header icon square). Both icons share one grid cell, so the visible one sits
   exactly in the middle; the theme on <html> picks moon (light: "go dark") or sun (dark: "go light"). */
.pc-header .pn-themebtn > .pc-ico{grid-area:1 / 1}
.pc-header .pn-themebtn__sun{display:none}
:root[data-theme="dark"] .pc-header .pn-themebtn__sun{display:block}
:root[data-theme="dark"] .pc-header .pn-themebtn__moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pc-header .pn-themebtn__sun{display:block}
  :root:not([data-theme="light"]) .pc-header .pn-themebtn__moon{display:none}
}
/* Seller phones: "Start earning" = the small pink header button, one line. */
.pc-header .pn-header__earn{white-space:nowrap;padding-inline:12px}
/* The header join pill never wraps (the phone short label: header.php, nav.join_short). */
.pc-header .pn-header__join{white-space:nowrap}
/* Between 701 and 1100 the member header (nav + search + New ad + icons) gets tighter gaps so it stays on the column. */
@media (min-width:701px) and (max-width:1100px){
  .pc-header{gap:18px}
  .pc-nav{gap:18px}
  .pc-header .pc-search,.pc-header form.pn-search{max-width:220px}
}
/* AD4 03.10. (docs/ad4-03-10.md): on a small tablet the seller header (nav + search + "Post in market" + icons) needs
   780-815 px in es / it / fr / pt, so 701-800 scrolled sideways on every seller page. Up to 860 the key is its plus
   square (the label stays the accessible name: font-size 0, not display none). */
@media (min-width:701px) and (max-width:860px){
  .pc-header .pn-header__new{width:41px;padding:0;gap:0;letter-spacing:0;justify-content:center}
  /* UX polish 23.10. UX-057: the label is sr-only (its span, header.php) instead of font-size:0 — readers and zoom keep a real text. */
  .pc-header .pn-header__newlbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* UX 17.10. #31: a guest's phone header keeps the bag, "Join free" and the menu; light / dark is a row in the menu
   (header.php .pc-burger__theme, the house switch), as the members have it in their drawer. */
@media (max-width:700px){
  .pc-header:has(.pc-burger) .pn-themebtn{display:none}
}
.pc-header .pc-burger__foot > .pc-burger__theme{flex:1 1 100%;min-height:var(--tap);padding:0 6px 0 14px;background:var(--chrome-well);border-radius:var(--r-btn)}
.pc-burger__theme .pc-switch{background:var(--chrome-2)}
.pc-burger__theme[aria-pressed="true"] .pc-switch{background:var(--pink)}
/* AD4 03.10.: at 320 a free seller's header (theme + My listings square + "Start earning") needed 332-357 px in en / it /
   pt. Under 341 the theme switch steps aside while "Start earning" is drawn (system dark still applies); the two keys
   and the one pink key stay. */
@media (max-width:340px){
  .pc-header:has(.pn-header__earn) .pn-themebtn{display:none}
  .pc-header .pn-header__earn{padding-inline:10px}
}
/* UX 100 merge 17.10.: the fixed "New listing" key (#84) beside the bell (#83) and the menu button needs 102-127 px in pt / it / fr;
   under 341 px it is the "+" alone (its name stays the aria-label), above it the words alone. */
.pc-header .pn-header__earn > svg{display:none}
@media (max-width:340px){
  .pc-header .pn-header__earn > svg{display:block}
  .pc-header .pn-header__earn{width:40px;padding:0;justify-content:center}
  .pc-header .pn-header__earnlbl{display:none}
}
/* AD4 03.10.: at 320 the labelled "My listings" line button (Premium / paygate header) ran 2-8 px past the edge in fr / pt. */
@media (max-width:340px){
  .pc-header .pc-btn.pn-header__items{padding-inline:12px;gap:6px}
}
/* visual audit VM-001 (26.10.): on the listing editor the header holds one more key, so at 375-390 it still ran 3-6 px past the
   edge; the labelled "My listings" key becomes its grid square up to 400 px there too (the label stays for readers) */
@media (max-width:400px){
  .pc-header:has(.pn-header__items) .pc-btn.pn-header__items:not(:only-child){width:40px;padding:0;gap:0;justify-content:center}
  .pc-header:has(.pn-header__items) .pc-btn.pn-header__items:not(:only-child) .pn-header__itemslbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:340px){
  /* UX polish 23.10. UX-001: at 320 the labelled "My listings" key (111 px) beside the pay key, the bell and the drawer
     button ran the header to 371-391 px (the page scrolled sideways). Under 341 it is its grid square; the label stays
     the link's text for readers (sr-only). */
  .pc-header .pc-btn.pn-header__items{width:40px;padding:0;gap:0;justify-content:center}
  .pc-header .pn-header__itemslbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Polish-g 02.10. (docs/polish-guest-02-10.md): guests on a small tablet (701-960) get the phone header: the nav and
   "Log in" move into the burger (it already holds both). The full guest header needs 780-900 px in es / it / fr (fr:
   "Inscription gratuite"), so on a 768 iPad the pink Join was cut at the edge and the page scrolled sideways. */
@media (min-width:701px) and (max-width:960px){
  body.pc-guest .pc-header{justify-content:space-between}
  body.pc-guest .pc-header .pc-nav,body.pc-guest .pc-header .pc-header__icons > .pc-btn--ghost{display:none}
  body.pc-guest .pc-header .pn-header__end{display:flex;align-items:center;gap:10px}
  body.pc-guest .pc-header .pc-burger.pc-show-sm{display:block !important}
}
/* Phone: logo 22, gap 12, the nav and the login move into the burger menu (guests) / the tab bar (members). */
@media (max-width:700px){
  .pc-header{justify-content:space-between}
  /* The wordmark keeps its 44 tap height as padding, so its line sits on the same axis as the buttons (owner 30.09.:
     min-height alone put the baseline-aligned text at the top of the box, 11 px above the icons). */
  .pc-header .pc-logo{font-size:32px;min-height:0;padding-block:calc((var(--tap) - 1em) / 2)}
  .pc-header .pn-header__end{display:flex;align-items:center;gap:10px}
  .pc-header .pn-header__avatar{display:none}
  .pc-header .pc-header__icons{gap:10px}
}
/* 360: logo + search + theme + Join + burger fit without a horizontal scroll */
@media (max-width:380px){
  .pc-header .pn-header__end,.pc-header .pc-header__icons{gap:6px}
  .pc-header .pn-header__join{padding-inline:12px}
}

/* ---------- Burger menu (guests on phones) ---------- */
.pc-header .pc-burger__menu .pc-count{position:static;box-shadow:none}
/* Polish-g 02.10.: the two doors at the sheet's foot share a row while they fit and stack full width when they do not
   (fr "Inscription gratuite" + "Se connecter" ran out of the 335 px sheet: "Se conne|" cut at its edge) */
.pc-header .pc-burger__foot{display:flex;flex-wrap:wrap}
.pc-header .pc-burger__foot > .pc-btn{flex:1 1 auto}
.pc-header .pc-burger__foot > .pc-burger__lang{flex:1 1 100%}

/* ---------- Tab bar (members on phones): chrome, line on top, active = pink pill ---------- */
.pn-tabbar{background:var(--t-chrome,var(--chrome));border-top:1px solid var(--chrome-line);box-shadow:none;--count-ring:var(--t-chrome,var(--chrome))}
.pn-tabbar a{color:var(--on-chrome-2)}
.pn-tabbar a:hover{color:var(--on-chrome)}
.pn-tabbar a.is-active,.pn-tabbar a[aria-current="page"]{color:var(--on-chrome)}
.pn-tabbar a.is-active .pn-tab__pill,.pn-tabbar a[aria-current="page"] .pn-tab__pill{background:var(--chrome-tint-press);border-color:transparent;color:var(--on-chrome)}   /* A8 (owner 18.10.): the active tab is a tonal pill, not pink (pink: the one key, unread) */
.pn-tabbar .pc-count{background:var(--pink);color:var(--anthracite);box-shadow:0 0 0 2px var(--count-ring)}
.pn-tabbar a:focus-visible{outline:none}
.pn-tabbar a:focus-visible .pn-tab__pill{outline:3px solid var(--pink);outline-offset:2px}
/* Over the full-bleed video feed the bar turns to glass (videos.css switches it on via body:has(.pn-vpage.is-feed)). */
.pn-tabbar.is-glass{background:var(--glass-strong);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);--count-ring:var(--glass-strong)}
@media (min-width:701px){.pn-tabbar{display:none}}
/* The buy bar replaces the tab bar on ad detail; chat threads hide it in chat.css. */
@media (max-width:700px){body.pn-has-adbar .pn-tabbar{display:none}}
/* A modal sheet is the one layer on top: the member tab bar steps aside while it is open. */
body:has(dialog.pn-sheet[open]) .pn-tabbar,body:has(dialog.pn-sheet:target) .pn-tabbar{display:none}   /* QA m6: also the no-JS filter sheet */
/* T17: where no tab bar shows on phones, a flush sticky bar (--dock-flush) sits on the safe area instead. */
@media (max-width:700px){body.pc-guest,body.pn-has-adbar,body:has(.pn-itemedit),body:has(.pn-chatpage),body:has(.pn-store--guest){--dock-flush:env(safe-area-inset-bottom)}}

/* ---------- Footer (mockup .ftr): chrome, one line on top, muted-dk links, logo on-dark 22 ---------- */
.pc-footer{background:var(--footer-bg,var(--chrome));border-top:1px solid var(--chrome-line);color:var(--on-chrome-2)}   /* no borders 18.10.: dark = one step off the page (--footer-bg), no line */
.pc-footer a{color:var(--on-chrome-2)}
.pc-footer a:hover{color:var(--on-chrome)}
.pc-footer .pc-logo{color:var(--on-chrome)}
.pc-footer .pn-gfooter__h{color:var(--on-chrome)}
.pc-footer .pn-gfooter__adult{color:var(--on-chrome)}
.pc-footer .pn-gfooter__bar a:hover{background:var(--chrome-well-hover)}
/* UX 17.10. #42: the current language is a tonal pill with the pink dot (never a white pill on black); footer and guest menu */
.pc-footer .pn-lang a[aria-current],.pc-burger__lang a[aria-current]{background:var(--chrome-well-hover);border-color:transparent;color:var(--on-chrome)}
.pc-footer .pn-lang a[aria-current]::before,.pc-burger__lang a[aria-current]::before{content:"";flex:none;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--pink)}
.pc-footer a:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
@media (max-width:700px){.pc-footer{padding:32px var(--gutter) calc(var(--dock) + 28px)}body:not(.pc-guest) .pc-footer{display:none}}   /* owner 03.10.: no footer for members on phones */
/* Header and footer content sit on the one column (--col-pad) at every desktop width. */
@media (min-width:701px){.pc-header,.pc-footer{padding-inline:var(--col-pad)}}
/* QA m7: skip link — off screen until it gets keyboard focus, then above the header. */
.pc-skip{position:absolute;left:var(--gutter);top:10px;z-index:var(--z-toast);transform:translateY(-200%)}
.pc-skip:focus,.pc-skip:focus-visible{transform:none;outline:3px solid var(--pink);outline-offset:2px}

/* brand preview 05.10. (docs/brand-review-05-10.md 13): the footer signs off as a care label — wash symbols under the
   wordmark, "18+ only" as a small stamp, both in the chrome's ink */
/* Sleek 08.10.: the search field is 36 on desktop, 40 on the phone (touch) */
@media (max-width:700px){.pc-search,.pc-header .pc-search,.pc-header form.pn-search{height:40px}}

/* Ships first v2 (16.10., lib/sfo_view.php pnew_sfo_nav_slot): the count of orders that wait for the member, beside a
   header nav link ("Orders"); pink because it is her / his turn. Only rendered while the slot has a count. */
.pn-navcount{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 11px/1 var(--font-label);vertical-align:2px}

/* premium editorial pass (owner 27.10., outside): the bar is a deep gradient with a soft shadow under it instead of a
   line; the join key the pink gradient with a soft pink shadow (components.css), never a glow. */
.pc-guest .pc-header{background:var(--chrome-grad);border-bottom-color:transparent;box-shadow:var(--sh-chrome-soft)}
.pc-guest .pc-header .pn-header__join{background:var(--btn-pink-grad);box-shadow:var(--sh-pink)}
.pc-guest .pc-header .pn-header__join:hover{background:var(--btn-pink-grad);filter:brightness(1.05)}
.pc-guest .pc-header .pc-nav a{transition:opacity var(--dur-card) ease}

/* creator door (owner 27.10.): the header key only where the row has room for it beside Log in and Join free; tablets and phones reach it in the menu */
.pc-btn.pn-header__creator{display:none}
@media (min-width:1360px){.pc-btn.pn-header__creator{display:inline-flex}}
/* NO BORDERS (owner 18.10., design/v7/noborder/ad-report.md): the tonal rules for every page — guest pages, join and
   login, the member area. Sections 1-5 were the member layer's own (src-css/inside.css, owner 09.10.); they moved here,
   outside the member marker, so the guest bundles (tools/css_guest.php) carry them too. The tokens are the NO BORDERS block
   in tokens.css (--line transparent, the ladder, the veils). Every rule is scoped through :where(), so it weighs what the
   component's own rule weighs and a page rule that is more specific still wins. Admin (.pn-adm) keeps its lines.
   Loaded after chrome.css and before inside.css (tools/build_css.sh). */

/* 1 · Controls: one step up from whatever they stand on. The kit's controls paint themselves with --sunken (rest) and
   --surface-2 (pointer); here those two names point at the veil ON the control itself, so the control's own rules do
   the painting and a page rule that gives a control another face (the paper disc on a photo, a pink key) is untouched.
   The line, secondary and soft buttons, chips, tabs, segments, the back chip, the round icon button, the row's icon
   disc and the stepper all follow; none has a frame (--line is transparent). */
:where(.pc-root:not(.pn-adm)) :is(.pc-btn,.pc-chip,.pc-tab,.pn-backchip,.pn-rowicon,.pc-iconbtn,.pc-stepper button),
:where(.pc-root:not(.pn-adm)) :is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label){--sunken:var(--t-tint);--surface-2:var(--t-tint-2)}
:where(.pc-root:not(.pn-adm)) :is(.pc-btn--ghost,.pc-iconbtn--plain,.pc-stepper button):hover{background:var(--t-tint);border-color:transparent}
/* destructive: the colour stays the cue, as a wash instead of a frame */
:where(.pc-root:not(.pn-adm)) .pc-btn--danger{background:var(--t-danger);border-color:transparent}
:where(.pc-root:not(.pn-adm)) .pc-btn--danger:hover{background:var(--t-danger-2)}
/* the keys on the chrome (header, dark bars): the chrome well, like the header's icon squares */
:where(.pc-root:not(.pn-adm)) :is(.pc-header .pc-btn--ghost,.pc-btn--on-chrome,.pn-stop .pc-btn--line,.pn-vbox .pn-vrail){background:var(--chrome-well);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pc-header .pc-btn--ghost,.pc-btn--on-chrome,.pn-stop .pc-btn--line,.pn-vbox .pn-vrail,.pn-vunavail .pc-btn,.pc-header.pn-wizbar .pc-iconbtn--on-chrome,.pn-wizbar__exit):hover{background:var(--chrome-well-hover);border-color:transparent}
/* where you are, on the chrome: the accent's soft fill and the pink glyph, not a pink frame */
:where(.pc-root:not(.pn-adm)) .pc-header .pc-iconbtn:is(.is-active,[aria-current="page"]){background:var(--accent-soft);border-color:transparent}

/* 2 · Chosen: a fill, never a frame. Chips, tabs and segments paint "chosen" with --btn-ink; on them it is --t-sel,
   two clear steps over the veil. A chosen plan is the accent's soft fill instead of a pink frame. */
:where(.pc-root:not(.pn-adm)) :is(.pc-chip,.pc-tab,.pc-selchip),
:where(.pc-root:not(.pn-adm)) :is(.pc-seg,.pn-seg,.pc-tabs) > :is(a,button,label){--btn-ink:var(--t-sel);--on-btn-ink:var(--on-t-sel)}
:where(.pc-root:not(.pn-adm)) :is(.pc-chip.is-selected,.pc-chip[aria-current],.pc-chip[aria-pressed="true"],.pc-chip:has(input:checked),.pc-tab.is-active,.pc-tab:has(input:checked),.pc-selchip.is-set .pc-input),
:where(.pc-root: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"],label:has(input:checked)){border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-plan,.pn-wiz .pn-plan):has(input:checked){border-color:transparent;box-shadow:inset 0 0 0 2px var(--accent)}   /* visual audit VM-018: a ring, no fill */
/* AD 20.10. AD-200: the chosen recommended plan sits on --accent-soft too, so its on-dark texts (pale label, grey billed
   line, pink price and saving) fell to about 1.5:1 in light. Chosen = every text in ink (in dark --ink is the light ink,
   so both themes read), the saving an ink chip. */
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked){--dk-ink:var(--ink);--dk-ink-2:var(--ink-2);color:var(--ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) :is(.pn-plan__price,.pn-plan__days,.pn-plan__pm){color:var(--ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) .pn-plan__save{display:inline-block;padding:3px 7px;border-radius:var(--radius-full);background:var(--btn-ink);color:var(--on-btn-ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) input.pc-radio:checked{background:var(--btn-ink);border-color:var(--btn-ink)}
:where(.pc-root:not(.pn-adm)) .pn-plan.pn-plan--reco:has(input:checked) input.pc-radio:checked::after{background:var(--on-btn-ink)}

/* 3 · Fields: the one frame that stays. A filled, inset field plus a 1 px edge at 3:1 against the surface it stands on
   (WCAG 1.4.11); the focus ring is the component's own. An empty upload slot is a veil, not a dashed box. */
/* UX 17.10. #74: no frame at rest. The field is its tonal fill; the 3:1 edge (--t-field-edge) is a 1 px line under it,
   the full frame + ring come with focus (components.css .pc-input:focus, items.css .pn-pricebox:focus-within), red with an
   error. A fill alone cannot reach 3:1 here: in dark even black on the panel is 1.4:1. */
/* owner 18.10. (screenshot of the listing editor: "die Forms haben noch so hässliche Striche"): no line under a field at rest
   either; the darker fill is the field, the frame + ring still come with focus, red with an error. */
:where(.pc-root:not(.pn-adm)) :is(.pc-input,.pn-pricebox){border-color:transparent;box-shadow:none}
/* no borders 18.10. (AD report 3c): the filled-field shape. Under a radius on all four corners the 1 px edge curled up at
   both ends and read as a stray underline; with a small foot radius it is an intentional baseline. */
:where(.pc-root:not(.pn-adm)) :is(.pc-input,.pn-pricebox){border-radius:var(--r-field) var(--r-field) var(--r-field-foot) var(--r-field-foot)}
:where(.pc-root:not(.pn-adm)) .pc-slot:not(.is-filled){background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) .pc-slot:not(.is-filled):hover{background:var(--t-tint-2)}
/* AD 20.10. AD-161: the item editor's empty photo slots and the video slot had no visible area (surface on surface, edge
   transparent) — the same tinted tile as .pc-slot and the legacy editor's .pn-lislot */
:where(.pc-root:not(.pn-adm)) :is(.pn-slot,.pn-vslot:not(.has-video):not(.is-uploading)){background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-slot,.pn-vslot:not(.has-video):not(.is-uploading)):hover{background:var(--t-tint-2)}

/* 4 · Overlays: their own tone, the lightest container, and the only soft shadow inside (--sh-float / --sh-sheet). */
:where(.pc-root:not(.pn-adm)) :is(.pn-sheet,.pn-menu,dialog){--surface:var(--t-over);--sunken:var(--t-over-2);--surface-2:var(--t-over-3);--t-field-edge:var(--t-field-edge-over);--ink-3:var(--ink-2)}
/* 5 · Pieces that were a frame and nothing else: the veil takes the frame's place; where the grey line was a fill
   (the sheet's grab, the offline dot, a declined deal) it is --t-mute; a radio tick keeps its ring. */
:where(.pc-root:not(.pn-adm)) :is(.pn-safeline,.pn-liprice,.pn-whc,.pn-vunlock__ico,.pn-vgate__ico,.pn-rowbtn.pc-btn--ghost,.pn-match__key.pc-btn--ghost,.pn-lislot,.pn-slot-add){background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-rowbtn.pc-btn--ghost,.pn-match__key.pc-btn--ghost,.pn-lislot:not(.is-filled),.pn-slot-add):hover{background:var(--t-tint-2)}
:where(.pc-root:not(.pn-adm)) .pn-vsolo .pn-vrail{background:var(--t-tint);border-color:transparent}
:where(.pc-root:not(.pn-adm)) :is(.pn-vsolo .pn-vrail,.pn-offertile,.pn-starter.pc-chip):hover{background:var(--t-tint-2);border-color:transparent}
/* the reply that waits (Matches): the accent's soft fill and pink text; the pointer makes it the pink key */
:where(.pc-root:not(.pn-adm)) :is(.pn-sheet__grab,.pn-lhstate:not(.pn-lhstate--live,.pn-lhstate--review,.pn-lhstate--rejected) > i){background:var(--t-mute)}
:where(.pc-root:not(.pn-adm)) .pn-deal.is-declined .pn-deal__ico{background:var(--t-mute)}
:where(.pc-root:not(.pn-adm)) .pn-offerpick__tick{box-shadow:inset 0 0 0 2px var(--ink-3)}


/* 6 · No borders (owner 18.10.): what lost its frame and needs a fill or a cue of its own.
   Listing and seller cards keep only the quiet edge (--t-card-edge, tokens.css); under the pointer it rises a little. */
@media (hover:hover){
  :where(.pc-root:not(.pn-adm)) .pn-prodcard:hover > .pn-card-link::after,:where(.pc-root:not(.pn-adm)) .pc-scard:hover::after{box-shadow:inset 0 0 0 1px var(--t-card-edge-hover)}
}
/* a review inside a panel: the well, one level only (it was an outlined card in a panel) */
:where(.pc-root:not(.pn-adm)) .pn-panel .pn-review{margin-bottom:8px;padding-inline:16px;border-radius:var(--r-tile);background:var(--sunken)}
/* inline code, the price box's typical row: wells instead of outlines and dashes */
:where(.pc-root:not(.pn-adm)) :not(pre) > code{border-color:transparent;background:var(--sunken);border-radius:var(--r-label)}
/* the phone's sticky buy bar and the burger menu float on their shadow, not on a ring */
:where(.pc-root:not(.pn-adm)) .pc-burger__menu{border-color:transparent}
:where(.pc-root:not(.pn-adm)) .pc-stepper button:hover{background:var(--t-tint-2)}
/* dark boxes (the buy door, the dark box, the hero stat, go-live, the buy band, the worth box): anthracite in light too, so
   a kit key in them takes the on-dark veil and ink. Before 18.10. the outline key was a paper face there; the page veil
   (ink 7 %, dark in light) and the ink label would vanish on anthracite (the guest profile's "Join free", light). */
:where(.pc-root:not(.pn-adm)) :is(.pc-door--buy,.pn-door--buy,.pc-box--dk,.pn-herostat,.pn-golive,.pn-lp-buy,.pn-lpm-worth) :is(.pc-btn--line,.pc-btn--secondary,.pc-btn--soft,.pc-chip,.pc-iconbtn:not(.pc-iconbtn--primary,.pc-iconbtn--glass),.pc-stepper button){--ink:var(--dk-ink);--sunken:var(--chrome-tint);--surface-2:var(--chrome-tint-press);--btn-line-bg:var(--chrome-tint)}
/* AD 21.10. AD5G-001/002: the partner application, the copyright / report notices (.pn-l3c) and the partner login sit on the
   guide's paper: their fields were paper on paper (no edge), so only the labels showed. Inside these forms a field is the
   panel's well (--field-in), as in every other panel (components.css). */
:where(.pc-root:not(.pn-adm)) :is(.pn-affap,.pn-affown__new,.pn-affown__login,.pn-l3c__form){--field:var(--field-in)}
/* AD5G-022: the listing photo's frame was a transparent 1 px border over the gallery's own surface, so a lighter seam ran
   round the photo (in dark a grey stroke). Now the same quiet grey ring as the listing cards (--t-card-edge, owner: grey
   50 %, never white, never removed), drawn over the page, not over the gallery's fill. */
:where(.pc-root:not(.pn-adm)) .pn-dt .pn-gal{border-color:var(--t-card-edge,transparent);background-clip:padding-box}
/* @member-only */
/* TONAL SURFACES INSIDE (owner 09.10., docs/variants-08-10.md "Tonal surfaces inside"). The member area's own layer:
   last in pnew.css, never in a guest bundle (tools/css_guest.php drops the block between the markers). Its tokens are
   the member block at the foot of tokens.css; there --line is transparent, so every panel, card, box, tile and badge
   that drew a 1 px frame from it keeps its box and loses the line. No borders (owner 18.10.): the controls-as-veil,
   chosen-as-fill, field, overlay and frame-to-veil rules (sections 1-5) moved to src-css/tonal.css, which every page
   loads (guest bundles too); what is left here is member-only.
   Every rule is scoped to the member body through :where(), so it weighs what the component's own rule weighs and a
   page rule that is more specific still wins. A new component built from the kit classes inherits all of it. */

/* 6 · One pink key per view (owner 10.10.): the seller's header keys ("New listing" on phones
   and desktop, UX 17.10. #84) step down to the chrome well whenever the page's own content shows a pink key at that size — read from the
   page itself, so a new page needs no list (pnew_header_keys keeps its named cases). Never hidden, only lighter. Not
   counted: a key in a closed dialog or a [hidden] block, a disabled one, one kept for the other size (.pc-hide-sm /
   .pc-show-sm). Breakpoints = components.css (700 / 701). */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-hide-sm,.pc-hide-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay){background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-hide-sm,.pc-hide-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay):hover{background:var(--chrome-well-hover)}
  /* 7 · The head band (back chip + jump pills, partials/ui_apphead.php): every control keeps the 44 px tap floor
     (components.css), and wrapped pill rows sit 12 px apart, so two rows' 44 px hit areas meet and never overlap. */
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-apphead__tabs :is(.pc-seg,.pn-seg){row-gap:12px}
}
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-show-sm,.pc-show-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay){background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):has(.pn-main :is(.pc-btn--primary,.pc-btn--premium,.pc-iconbtn--primary,.pn-do-cta,.pn-paystrip__cta):not(:disabled,.is-disabled,.pc-show-sm,.pc-show-sm *,dialog:not([open]) *,[hidden] *)) .pc-header .pc-btn--primary:is(.pn-header__earn,.pn-header__new,.pn-header__pay):hover{background:var(--chrome-well-hover)}
}
/* owner 14.10.: "Recently active" beside @name (members only, so here in the member layer; text only — no dot). On a narrow line the word gives way before
   the name (ellipsis), so @name stays readable. The middle dot is decoration (empty alt text). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-card__act{flex:0 4 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--scard-ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-card__act::before{content:"\00b7\00a0";content:"\00b7\00a0" / ""}
/* support as a member (owner 14.10., lib/support_dm.php): only the support account's own thread — the German line under a message
   and its composer tools (write in German, AI draft). Members never get these classes. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr{display:grid;gap:2px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr__l{font:600 11px/1.2 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdmtr[data-pending] .pn-sdmtr__t{opacity:.7}
/* Chat + content translation (owner 18.10., lib/chat_tr.php, lib/content_tr.php): the meta line beside a time or date — the
   time's own font, --ink-3 (own chat bubble: the time's colour), no pink, no frame, no fill, 6 px to the time; a 32 px tap
   area laid invisibly over the line. The same hint in the chat (.pn-lctr) and on listings, profiles, reviews, wishes (.pn-trhint). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint){position:relative;display:inline-flex;align-items:center;gap:3px;margin:0 3px 0 0;padding:0;border:0;background:none;font:600 10.5px/1.2 var(--font-sans);color:var(--ink-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lctr{font:inherit}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-bubble--out .pn-lctr{color:inherit}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint)::before{content:"";position:absolute;inset:-10px -6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint) .pn-lctr__g{width:12px;height:12px;flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-lctr,.pn-trhint)[disabled]{cursor:progress}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trhint[hidden],:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__orig[hidden]{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trhint{margin:0 0 0 6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trline{margin:6px 0 0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-trline .pn-trhint{margin:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm{display:grid;gap:8px;margin:0 0 8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:400 13px/1.3 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__de{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__lang{flex:1 1 auto;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__note,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__msg{margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__msg.is-bad{color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__panel{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-field)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__panel[hidden]{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__h{margin:0;font:600 14px/1.3 var(--font-sans);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__sub{margin:0;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) blockquote.pn-sdm__de{margin:0;padding:6px 10px;border-left:3px solid var(--line);font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__out{width:100%;min-height:72px;resize:vertical}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__acts{display:flex;flex-wrap:wrap;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__warn{margin:0;padding:8px 10px;border-radius:var(--r-field);background:var(--danger-soft);color:var(--ink);font:400 13px/1.4 var(--font-sans)}
/* old support requests (owner 15.10., lib/support_backlog.php): the support account's list "Alte Anfragen" (/account/chats/?sdm=backlog,
   partials/sdm_backlog.php) and the note above its composer. Tonal: entries on a lighter surface, the note to check first on the danger tint. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl{display:grid;gap:12px;padding:16px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__h{margin:0;display:flex;align-items:center;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__sub,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__l,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__meta{margin:0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__l{font-weight:600;font-size:12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__none{margin:0;display:flex;align-items:center;gap:6px;font:400 14px/1.4 var(--font-sans);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__item{display:grid;gap:6px;justify-items:start;padding:12px;border-radius:var(--r-field);background:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__item.is-done{padding:8px 12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__top{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font:400 14px/1.3 var(--font-sans);color:var(--ink);min-width:0;max-width:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__name{font-weight:600;overflow-wrap:anywhere}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__check{margin:0;display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-field);background:var(--danger-soft);color:var(--ink);font:400 13px/1.4 var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__check .pc-ico{flex:0 0 auto;margin-top:2px;color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__de{margin:0;padding:0 0 0 10px;border-left:3px solid var(--line);white-space:pre-line;overflow-wrap:anywhere;font:400 13px/1.45 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__done>summary{cursor:pointer;font:600 13px/1.4 var(--font-sans);color:var(--ink-2);padding:4px 0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sbl__done>.pn-sbl__list{margin-top:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdm__bl{display:flex;gap:6px;align-items:flex-start}
/* Support-Dashboard (owner 15.10., lib/support_dash.php, partials/sdm_dash.php): the support account's own /account/home.
   Third round ("mit Tabbern", "mach Grids daraus"): tabs as the kit's seg pills (scrolling sideways on phones), tiles and
   picture tiles on the well surface of the panel, flags on the picture, the bulk bar a sticky overlay surface above the
   dock; warnings on the danger tint. Only the minor list is blurred, on its list class, until the one uncover link. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd{--sdd-pad:16px;display:grid;gap:14px;padding:var(--sdd-pad);margin:0 0 16px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(h2,h3,h4,p){margin:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__head{display:grid;gap:4px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sub{font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__group{grid-column:1/-1;padding:6px 2px 0;font:400 13px/1.4 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pane{display:grid;gap:12px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--sdd-pad));padding:3px var(--sdd-pad)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tabs::-webkit-scrollbar{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__tabs,.pn-sdd__subtabs) > a{flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__subtabs > a{min-height:30px;padding:6px 10px;font-size:12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pc-seg) > a .pn-seg__n.is-zero{background:var(--t-tint-2);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__warn,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flash{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-field);background:var(--t-danger);color:var(--ink);font:400 13px/1.4 var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__warn .pc-ico,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flash.is-bad .pc-ico{flex:0 0 auto;margin-top:2px;color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flash:not(.is-bad){background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__none{display:flex;align-items:center;gap:8px;padding:18px 14px;border-radius:var(--r-tile);background:var(--sunken);color:var(--ink-2);font:500 14px/1.4 var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__l{font-weight:600;color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico n" "l l" "s s";align-items:center;gap:6px 10px;min-height:112px;padding:14px;border-radius:var(--r-tile);background:var(--sunken);color:var(--ink);text-decoration:none;transition:background-color var(--dur-fast)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile:hover{background:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile:focus-visible,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__all:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tico{grid-area:ico;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-icon);background:var(--t-tint);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile.is-hot .pn-sdd__tico{background:var(--t-danger);color:var(--danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tn{grid-area:n;justify-self:end;font:700 28px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:var(--tr-num);color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tile.is-open .pn-sdd__tn{color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tl{grid-area:l;font:600 14px/1.25 var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__ts{grid-area:s;font:400 12px/1.3 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__uncover{display:flex}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__uncover .pc-btn{display:inline-flex;align-items:center;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__listwrap{display:grid;gap:10px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__item{container-type:inline-size;display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 6px 8px;border-radius:var(--r-tile);background:var(--sunken)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pic{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__th{display:block;width:100%;height:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__th img{display:block;width:100%;height:100%;object-fit:cover}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list--blur .pn-sdd__th img{filter:blur(14px);transform:scale(1.15)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__th--none{display:grid;place-items:center;color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pick{position:absolute;top:0;left:0;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pick::before{content:"";position:absolute;top:7px;left:7px;width:30px;height:30px;border-radius:8px;background:var(--surface);opacity:.92}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__pick input,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__spick input{position:relative;width:20px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__nmore{position:absolute;top:8px;right:8px;padding:4px 7px;border-radius:var(--r-label);background:var(--glass-strong);color:var(--white);font:700 11px/1 var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flags{position:absolute;left:6px;right:6px;bottom:6px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flag{max-width:100%;padding:4px 6px;border-radius:var(--r-label);background:var(--surface);color:var(--ink);font:600 10px/1.2 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__flag.is-bad{background:var(--danger);color:var(--on-danger)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det{min-width:0;font:400 12px/1.35 var(--font-sans);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det > summary,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sdet > summary{position:relative;display:block;list-style:none;cursor:pointer;padding-right:16px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det > summary{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__det,.pn-sdd__sdet) > summary::-webkit-details-marker{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__det,.pn-sdd__sdet) > summary::after{content:"";position:absolute;right:4px;top:50%;width:6px;height:6px;border:solid var(--ink-2);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__det,.pn-sdd__sdet)[open] > summary::after{transform:translateY(-20%) rotate(-135deg)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__det[open] > summary{white-space:normal}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__detin{display:grid;gap:4px;margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--t-tint);overflow-wrap:anywhere}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__extra{display:flex;flex-wrap:wrap;gap:4px 10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__extra a,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__meta a,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__shead a,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__mhead a{color:inherit}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__meta{font:400 12px/1.35 var(--font-sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__meta b{font-weight:600;color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__acts,.pn-sdd__sacts) .pc-btn{width:100%;min-height:34px;padding:0 6px;gap:4px;justify-content:center;font-size:12px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd :is(.pn-sdd__acts,.pn-sdd__sacts) .pc-ico{width:16px;height:16px}
@container (max-width:175px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__acts .pc-ico{display:none}}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bulk{position:sticky;bottom:var(--dock);z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:var(--r-box);background:var(--t-over);box-shadow:0 12px 32px -12px var(--scrim)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__all{display:inline-flex;align-items:center;gap:6px;min-height:36px;margin-right:auto;font:600 13px/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bbtns{display:flex;flex-wrap:wrap;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__senders{list-style:none;margin:0;padding:0;display:grid;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__snd{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pick main" ". acts" ". det";align-items:center;gap:4px 6px;padding:8px 10px 8px 2px;border-radius:var(--r-tile);background:var(--sunken)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__spick{grid-area:pick;display:grid;place-items:center;width:40px;height:40px;cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__smain{grid-area:main;display:grid;gap:2px;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__shead{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font:400 14px/1.3 var(--font-sans);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sinfo{font-size:12px;color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__prev{font:400 13px/1.35 var(--font-sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sacts{grid-area:acts;display:grid;grid-template-columns:1fr 1fr;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sdet{grid-area:det;min-width:0;font:400 12px/1.4 var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sdet > summary{display:inline-block;padding:4px 16px 4px 0;font-weight:600;color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__msgs{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__msgs > li{padding:8px 10px;border-radius:8px;background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__mhead{font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__mtext{margin-top:2px!important;font:400 13px/1.45 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
@media (max-width:400px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd{--sdd-pad:12px}}
@media (max-width:559px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bulk{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 10px}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__bbtns .pc-btn{min-height:40px;padding:6px 8px;white-space:normal;line-height:1.15;text-align:center;justify-content:center}}
@media (min-width:560px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(3,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(4,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__snd{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pick main acts" ". det det"}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sacts{display:flex}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__sacts .pc-btn{width:auto;padding:0 10px}}
@media (min-width:1000px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd{--sdd-pad:20px}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(5,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles{grid-template-columns:repeat(5,minmax(0,1fr))}:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__tiles--two{grid-template-columns:repeat(2,minmax(0,280px))}}
@media (min-width:1200px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sdd__list{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Translation line (UX 17.10. #69 reviews, #95 buyer wishes; partials/tr_line.php): a quiet second line under the text.
   "Translated · Show original" folds the original out as a sunken box; "Translate" is the link-style key. Members only. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr{margin:6px 0 0;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn{align-self:auto;gap:6px;min-height:32px;font:600 13px/1.2 var(--font-sans);color:var(--ink-2);text-decoration:none;cursor:pointer}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn{border:0;background:none;padding:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn > span,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__show{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:4px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn:disabled{cursor:default;opacity:.75}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__btn:disabled > span{text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum{list-style:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum::-webkit-details-marker{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr__sum .pn-tr__show::before{content:"·";display:inline-block;margin-right:6px;color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr[open] .pn-tr__show{text-decoration-color:var(--ink-3)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-tr .pn-tr__orig{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:var(--t-tint);font:400 14px/1.5 var(--font-sans);color:var(--ink-2);overflow-wrap:anywhere;white-space:pre-line}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtprof .pn-dtrevs > .pn-dtrev{grid-template-areas:"stars" "by" "title" "tags" "body" "more" "tr" "reply" "acts"}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtprof .pn-dtrevs > .pn-dtrev > .pn-tr{grid-area:tr;justify-self:start}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishcard .pn-tr :is(.pn-tr__sum,.pn-tr__orig){color:var(--dk-ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-wishcard .pn-tr .pn-tr__orig{background:var(--dk-veil)}
/* UX 17.10. (M2: chats, orders, settings, profile, wish, /order/, videos, archive) */
/* #7: "About me" over its cap: the counter turns red (the warning line under it is a .pn-fielderr) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-counter.is-over{color:var(--danger);font-weight:600}
/* #63: one row in the inbox: search + the open filter chip + the ⋯ menu (Unread / Archived), tonal like the row menu */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__bar.is-menu{flex-wrap:nowrap;justify-content:flex-end;gap:10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__bar.is-menu .pn-inbox__search{flex:1 1 0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-rail .pn-inbox__bar.is-menu{display:flex}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__on{flex:none;gap:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more{position:relative;flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more > summary{list-style:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more > summary::-webkit-details-marker{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__more[open] > summary{background:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:var(--z-header);display:grid;min-width:240px;max-width:min(320px,calc(100vw - 32px));padding:8px;border-radius:var(--r-rules);background:var(--t-over);color:var(--ink);box-shadow:var(--sh-float)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:var(--r-icon);color:var(--ink);font:600 15px/20px var(--font-sans);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi:hover,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi.is-selected{background:var(--t-over-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi > span:first-of-type{flex:1}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__mi .pn-seg__n[data-count="archived"]{background:var(--t-over-3);color:var(--ink)}
/* #64/#65: the settings jump pills (phones; desktop hides them) are one row that scrolls sideways, never two lines */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-6px calc(-1 * var(--gutter));padding:6px var(--gutter)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg::-webkit-scrollbar{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set > .pc-apphead,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set .pc-apphead__tabs:has(> [data-spy]){min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg > a{flex:none;white-space:nowrap}
/* UX polish C (23.10., UX-018 / UX-046): on phones the jump pills are 40 tall (a thumb target like the small buttons) and the
   row fades out at its right edge, so a cut pill reads as "more to the right"; the padding behind the fade keeps the last
   pill fully readable once the row is scrolled to its end. */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg{padding-right:calc(var(--gutter) + 28px);-webkit-mask-image:linear-gradient(90deg,var(--ink) calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,var(--ink) calc(100% - 36px),transparent)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-set [data-spy] > .pc-seg > a{min-height:40px}
}
/* #71: one status set for orders: a neutral chip + a dot (grey ring = requested, green ring = accepted / sent, green =
   arrived, none = closed); pink stays for "Your move" and the next-step button */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ostatus{background:var(--sunken);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ostatus:not(.pn-ostatus--closed)::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--online)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ostatus--requested::before{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-ostatus--accepted,.pn-ostatus--shipped)::before{background:transparent!important;box-shadow:inset 0 0 0 2px var(--online)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-order .pn-ostatus{background:var(--dkbox-tile);color:var(--dk-ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-order .pn-ostatus--requested::before{box-shadow:inset 0 0 0 1.5px var(--dk-ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-orow__meta .pn-order__move{flex:none}
/* #72: the Premium sheet under a thread lays no veil over the messages, only its shadow */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-chatpage:has(> .pn-paybar)::after{content:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.pn-sheet{box-shadow:var(--sh-sheet)}
/* #90: one paygate per screen. In a thread the bottom bar is the one: no "Read with Premium" on each bubble (the lock stays,
   the bubble still leads there), no second note under the locked Accept. The list keeps one slim strip on phones. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-chatpage:has(> .pn-paybar) :is(.pn-lockbubble__cta,.pn-order__gate){display:none}
@media (max-width:480px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip{flex-wrap:nowrap;min-height:0;gap:10px;padding:10px 10px 10px 12px}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__ico{width:36px;height:36px}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__txt{flex:1 1 auto}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__txt span{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paystrip__cta{flex:0 1 auto;flex-basis:auto;max-width:46%;white-space:normal;text-align:center;line-height:1.2}
}
/* #91: "Send a listing (free)" is a real button with its words beside "Answer with Premium" (stacked under it on phones) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked:not(.is-open) .pn-senditem > summary,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar .pn-senditem > summary{width:auto;min-width:0;padding-inline:18px;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked:not(.is-open) .pn-senditem__t,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar .pn-senditem__t{display:inline}
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked .pn-paybar__acts,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar__acts{grid-template-columns:minmax(0,1fr)}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked:not(.is-open) .pn-senditem > summary,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar .pn-senditem > summary{width:100%}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paybar.is-docked .pn-senditem__list{left:0;right:auto}
}
/* #92: "Send a listing" right under the reach numbers */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-reach__act{display:flex;justify-content:flex-end;margin-top:14px}
/* #77: /videos/ (members only): the rail's white labels stay readable on a light frame (a soft scrim behind the rail,
   a shadow under each label); the feed rail exists below 1024 px only (videos.css) */
@media (max-width:1023px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-feed .pn-vitem__rail::before{content:"";position:absolute;z-index:-1;inset:-48px -10px -24px -28px;background:linear-gradient(to left,var(--scrim),transparent);pointer-events:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .is-feed .pn-vrail{text-shadow:0 1px 3px var(--scrim)}
}
/* #79: her offers sit in the "Details" card now, under the facts */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtfacts__oh{margin:18px 0 10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dtfacts__offers{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* #100: the profile editor's short selects (figure, hair, bust, orientation, eyes) sit two by two on phones */
@media (max-width:559px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-pe .pn-selectgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-3)}
}
/* #73: light theme inside: the order card in a thread, "Your reach" and the chat list's Premium strip are light surfaces
   with their pink accents, no heavy ink blocks. Their dark-box tokens map to the page's own tones; the dark theme (and
   auto-dark) inherits the house values again, so it is unchanged (every rule starts with the member scope). */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-order,.pn-reach,.pn-paystrip){--dkbox:var(--surface);--dkbox-tile:var(--sunken);--dk-ink:var(--ink);--dk-ink-2:var(--ink-2);--chrome:var(--surface);--on-chrome:var(--ink);--on-chrome-2:var(--ink-2);--chrome-line:var(--line);--chrome-tint:var(--sunken);--chrome-well:var(--sunken);--chrome-well-hover:var(--surface-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is([data-theme="dark"] *) :is(.pn-order,.pn-reach,.pn-paystrip){--dkbox:inherit;--dkbox-tile:inherit;--dk-ink:inherit;--dk-ink-2:inherit;--chrome:inherit;--on-chrome:inherit;--on-chrome-2:inherit;--chrome-line:inherit;--chrome-tint:inherit;--chrome-well:inherit;--chrome-well-hover:inherit}
@media (prefers-color-scheme: dark){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:root:not([data-theme="light"]) *) :is(.pn-order,.pn-reach,.pn-paystrip){--dkbox:inherit;--dkbox-tile:inherit;--dk-ink:inherit;--dk-ink-2:inherit;--chrome:inherit;--on-chrome:inherit;--on-chrome-2:inherit;--chrome-line:inherit;--chrome-tint:inherit;--chrome-well:inherit;--chrome-well-hover:inherit}
}
/* #73: the pink figures on those light surfaces take the pink text tone (the same pink in dark) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) :is(.pn-order .pn-order__price,.pn-reach .pc-tile b){color:var(--accent-text)}

/* UX 17.10. #67: "Sellers you follow" on Your corner is as wide as its cards (three cards left half a desktop panel empty), and
   a Premium seller is told apart by her badge only, not by a caption tinted unlike the others beside it */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-corner__favstrip{width:fit-content;max-width:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-corner__sellers .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
/* UX 17.10. #70: pink is for what is unread; a total on a key (Filters 2) stands in the tonal veil */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-btn > .pc-count--inline{background:var(--t-tint-2);color:var(--ink)}
/* UX 17.10. #60: a member's profile tabs are ONE row that scrolls sideways on phones (they wrapped to two rows and the
   sticky bar cost 100 px); a pill that does not fit stands half out at the edge, so the row reads as more to swipe */
@media (max-width:700px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dt .pn-proftabs.pn-dttabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dt .pn-proftabs.pn-dttabs::-webkit-scrollbar{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-dt .pn-proftabs.pn-dttabs .pc-tab:last-child{margin-right:24px}
}
/* UX 17.10. seller side (S1). #89 My listings: the pause switch carries its own word ("Live" / "Paused", items.js repaints
   it through [data-state]) instead of a chip beside it; the row's numbers ("312 views · 1 interested") stay a quiet line. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrow__switch{align-items:center;gap:8px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrow__swl{font:600 12px/1 var(--font-sans);color:var(--ink-2);white-space:nowrap}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-adrow.is-live .pn-adrow__swl{color:var(--ink)}
/* #86 the listing editor's photo slots: every empty slot shows its key, a round "+" in the ink of the house's keys on the
   slot's tonal surface; the cover's is the big one. Desktop: the phone's 3 × 3 grid with the big cover (two columns, two
   rows) at 456 px, the photo tips beside it, instead of six equal tiles in a row. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot__plus{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--btn-ink);color:var(--on-btn-ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ligrid > :first-child .pn-lislot__plus{width:52px;height:52px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot .pn-slot__t{color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot:not(.has-photo,.is-picked):hover .pn-lislot__plus{transform:scale(1.06)}
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ligrid{max-width:456px;grid-template-columns:repeat(3,minmax(0,1fr))}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-ligrid > :first-child{grid-column:1 / span 2;grid-row:1 / span 2;aspect-ratio:auto;height:100%}
}
@media (min-width:900px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos{display:grid;grid-template-columns:minmax(0,456px) minmax(0,1fr);column-gap:var(--space-6);align-items:start}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos > *{grid-column:1 / -1}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos > .pn-ligrid{grid-column:1;grid-row:2}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liedit .pn-photos > .pn-litips{grid-column:2;grid-row:2;margin-top:0}
}
@media (prefers-reduced-motion:reduce){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lislot:not(.has-photo,.is-picked):hover .pn-lislot__plus{transform:none}}
/* #15 the editors' save key while must-haves are open ("Save listing (2 left)", items_legacy.js / items.js .is-wait): a quiet
   tonal key with ink text, never pale, never disabled (a tap lands on the first open field). #88: the "Good to know" rows
   for the photo and the words tick along with the counter. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-btn--primary.is-wait{background:var(--btn-ink);color:var(--on-btn-ink);border-color:transparent}   /* visual audit VM-005 (owner 26.10.): the ink key, never a pale veil */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-btn--primary.is-wait:hover{background:var(--btn-ink);color:var(--on-btn-ink);filter:brightness(1.12)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lihow li.is-done .pc-ico{color:var(--success)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lihow li.is-done > span{color:var(--ink-2)}
/* #24 the listing editor's Shipping field (switch ship_cost): the listing's currency sign beside a short amount field */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship{margin-top:var(--space-4)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship__box{display:flex;align-items:center;gap:8px;max-width:220px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship__cur{flex:none;display:grid;place-items:center;min-width:40px;height:var(--control-md,44px);padding:0 10px;border-radius:var(--radius-full);background:var(--t-tint);font:600 15px/1 var(--font-sans);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship__box > .pc-input{flex:1;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-liship .pc-help{margin-top:6px}
/* #87 "Copy from an earlier listing" above a new listing: one compact panel, her listings in a select and the ink "Copy" key */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy{display:grid;gap:10px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__h{display:flex;align-items:center;gap:8px;margin:0;font:600 14px/1.3 var(--font-sans);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__h .pc-ico{color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row{display:flex;gap:8px;align-items:center}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row > .pc-select{flex:1;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row > .pc-select > .pc-input{width:100%}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__row > .pc-btn{flex:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-licopy__help{margin:0}
/* #93 buyer rows: the whole row is the offer, a small tag icon at its right end (tonal), no column of "Make offer" buttons */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow--offer > a.pn-card-link.pn-row__lead{flex:1 1 auto;min-width:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow__go{flex:none;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--t-tint);color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow--offer:hover .pn-buyerrow__go{background:var(--t-tint-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow:not(.pn-buyerrow--offer) .pn-buyerrow__go{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-buyerrow__acts[hidden]{display:none}
@media (max-width:700px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-sellhome .pn-buyerrow--offer{flex-wrap:nowrap}}
/* #94 her corner: "Finish your profile" as one line (small ring, the steps left, a chevron) — the card is on the Buyers home */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline{display:flex;align-items:center;gap:12px;padding:12px 16px;color:var(--ink);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline:hover{background:var(--t-tint)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline .pn-ring--sm{--p:0;flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,var(--surface) 9px,transparent 10px),conic-gradient(var(--pink) calc(var(--p) * 1%),var(--t-tint-2) 0)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline__t{flex:1;min-width:0;display:flex;flex-wrap:wrap;column-gap:8px;font:400 14px/1.35 var(--font-sans);color:var(--ink-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline__t > b{font-weight:600;color:var(--ink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-clline > .pc-ico{flex:none;color:var(--ink-2)}
/* #97 the seller's Premium page: the chosen plan is the accent's soft fill WITH the pink ring (one clear signal on the
   recommended, preselected plan); the live pills on the dark hero are tonal (the chrome well), not white; the phone pay
   bar is one row (~72 px): "Not now" moves out of it into the page, under the plans. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite .pn-plan:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite__hero .pc-chip--live{background:var(--chrome-well);color:var(--on-chrome);border-color:transparent}
@media (max-width:999px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-later.pn-psbar__later{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite:has(.pn-psbar) .pn-paysite__sideacts{display:grid}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-paysite:has(.pn-psbar) .pn-paysite__sideacts > :not(.pn-paysite__sidelater){display:none}
}
/* #98 My content: the eye is the visibility switch (pressed = buyers see it), "where" is the small key beside it; the
   corner card without videos is one sentence and "Add a video" instead of three zero tiles */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-mcwhere{flex:none;width:36px;height:36px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-mcvis[aria-pressed="false"] .pc-ico{opacity:.45}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-mccard__empty{margin:8px 0 0}
/* Owner 20.10. (members only: guests have no header search, so it stays out of the guest bundles): the header search is a magnifier square + popover (header.php). The popover lies in the top layer just under
   the bar, one wide field on the chrome surface; the page dims behind it. Open, the key stays pressed. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch{position:fixed;inset:76px 0 auto;width:min(640px,calc(100% - 32px));height:auto;margin:0 auto;padding:10px;border:0;border-radius:14px;background:var(--t-chrome,var(--chrome));color:var(--on-chrome);box-shadow:var(--sh-label);overflow:visible}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch::backdrop{background:var(--scrim)}
/* 22.10.: closed by default in every browser. Without popover support (iOS < 17, Android WebView < 114) the UA rule
   [popover]:not(:popover-open){display:none} does not exist and the panel lay open over the page since x0330; chat.js then
   toggles .is-open instead (it is raised above the page, the top layer does not exist there). Keep :popover-open in its own rule:
   a browser that does not know it drops the whole rule. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch:not(.is-open){display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch:popover-open{display:block}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch.is-open{display:block;z-index:var(--z-drawer)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-hsearch form.pn-search{flex:none;width:100%;max-width:none;height:48px;padding:0 16px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-hsearch form.pn-search input{font-size:15px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch .pn-search__ph{left:46px;font-size:15px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch .pn-search__ph-l{display:inline}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-hsearch .pn-search__ph-s{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-hsearch__key:has(+ .pn-hsearch:popover-open){background:var(--chrome-well-hover);color:var(--pink)}
/* AD-041 / UX-193 (20.10.): the member header (up to 8 nav links, search, theme, New listing, Start earning, chats, bell,
   avatar) needed 955-1121 px at 768 and up to 1302 px at 1280 in pt, so on an iPad or a small laptop the pay key, chats,
   bell and avatar lay behind the clipped edge. Where it does not fit the nav links go behind one "Menu" key (header.php:
   a native popover with the same links + light / dark). Every other key stays in the bar, "Start earning" first among them. English needs the full bar from 1101,
   es / fr / it / pt (longer words) from 1361. Phones (<= 700) keep their own header, wide screens the full one. */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__key{display:none}
/* owner 27.10.: the feed for a seller with the post box, beside the Menu key wherever the nav folds (header.php) */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navpin{display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navpin{flex:none;gap:8px;padding-inline:12px 14px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navpin.is-active{box-shadow:inset 0 -2px 0 var(--pink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key{flex:none;gap:10px;padding-inline:12px 14px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key.is-active{box-shadow:inset 0 -2px 0 var(--pink)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key:has(+ .pn-navmore:popover-open){background:var(--chrome-well-hover)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__bars{position:relative;flex:none;width:16px;height:2px;border-radius:1px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__key .pn-navcount{margin-left:0}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore{position:fixed;inset:calc(var(--header-h) + env(safe-area-inset-top) + 8px) auto auto var(--col-pad);width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - var(--header-h) - 32px);height:auto;margin:0;padding:8px;border:0;border-radius:14px;background:var(--t-chrome,var(--chrome));color:var(--on-chrome);box-shadow:var(--sh-float);overflow-y:auto;overscroll-behavior:contain}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore:not(.is-open){display:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore:popover-open{display:grid;gap:2px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore.is-open{display:grid;gap:2px;z-index:var(--z-drawer)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore::backdrop{background:transparent}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:9px;color:var(--on-chrome);font:600 15px/1.2 var(--font-sans);text-decoration:none}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a:hover{background:var(--chrome-well-hover)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a[aria-current="page"]{background:var(--chrome-well);font-weight:700;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:6px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > a:focus-visible{outline:3px solid var(--pink);outline-offset:-3px}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore > .pn-navmore__theme{justify-content:space-between;margin-top:6px;background:var(--chrome-well)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__theme .pc-switch{background:var(--chrome-2)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-navmore__theme[aria-pressed="true"] .pc-switch{background:var(--pink)}
@media (min-width:701px) and (max-width:1100px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pc-nav{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navmore__key,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-navpin{display:inline-flex}
}
@media (min-width:1101px) and (max-width:1360px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-header .pc-nav{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-header .pn-navmore__key,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)):is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-header .pn-navpin{display:inline-flex}
}
/* chat.js sets .is-tight where the full bar is still too wide at a larger width (an extra slot, e.g. Orders) */
@media (min-width:701px){
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-tight .pc-nav{display:none}
  :where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-tight .pn-navmore__key,:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header.is-tight .pn-navpin{display:inline-flex}
}
/* up to 860 the theme toggle is the menu's row only ("New listing" is its "+" square there already, chrome.css) */
@media (min-width:701px) and (max-width:860px){:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-header .pn-themebtn{display:none}}
/* visual audit VM-003 (owner 26.10.): text fields and selects keep a visible edge — the owner's 50 % grey, never white */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pc-input:not(:focus):not(.is-focus){border-color:var(--t-mute)}
/* UX 200 ACC-45 (01.11.): the legacy chat at the hourly limit — the line above a read-only composer whose send key is off */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lclimit{margin:10px 16px 0;color:var(--ink-2);font:600 14px/20px var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-composer.is-limit .pn-send:disabled{opacity:.4;cursor:default}
/* UX 200 ACC-13 (01.11.): "Not in your recent chats" with the key that asks the server */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-inbox__nohit .pc-btn{margin-left:8px;vertical-align:middle}
/* UX 200 ACC-10 (01.11.): legacy's [order] shortcode without a page: a status line, not a pill */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lcorder.is-line{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font:600 13px/18px var(--font-sans)}
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lcorder.is-line .pc-ico{flex:none;width:14px;height:14px}
/* UX 200 ACC-28 (01.11.): a switch form's Save keys, hidden by legacy_profile.js (the switches save at once), stay hidden */
:where(.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm)) .pn-lp__formacts[hidden]{display:none}
/* @end-member-only */
/* @member-only */
/* MEMBER DRAWER ON PHONES (owner 15.10.: "das was wir in der sidebar dashboard haben das brauchen wir auch mobile burger
   menu wenn man oben auf den avatar klickt"). The small avatar at the right end of the phone header (partials/header.php
   .pn-mdbtn) opens a side sheet from the right (partials/medrawer.php): my card on the chrome, the account aside's
   groups on the overlay tone, light / dark + language + Log out on a well at the foot. Tones, not lines (docs/design-v3
   §3.2, owner 09.10.): head = chrome, sheet = --t-over, foot = its well; the one shadow is the floating layer's.
   Member layer only: never in a guest bundle (tools/css_guest.php drops this block). Phone only: from 701 px nothing of
   it shows (the desktop header keeps its avatar link, Your corner its aside). Breakpoints = components.css (700 / 701). */

/* ---------- the trigger: a 44 px target, the 34 px avatar with the header's pink ring, a pink dot when something is new */
.pn-mdbtn{position:relative;flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);margin-right:-4px;border-radius:50%;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pn-mdbtn__av{width:34px;height:34px;border:0;font-size:14px}
.pn-mdbtn__dot{position:absolute;top:4px;right:3px;width:11px;height:11px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px var(--chrome)}
.pn-mdbtn:focus-visible{outline:3px solid var(--pink);outline-offset:0}
.pn-mdbtn:active .pn-mdbtn__av{transform:scale(.94)}
@media (max-width:700px){
  /* on phones the members' icon squares and the desktop avatar are hidden already: the row keeps only the bell (UX 17.10.
     #83: Alerts left the tab bar for the header, as on the desktop) */
  .pc-root:not(.pc-guest) .pc-header .pc-header__icons{display:contents}
  .pc-root:not(.pc-guest) .pc-header .pc-header__icons > :not(.pn-header__bell){display:none}
  /* the bell takes the square "My listings" had beside a free seller's pink key: logo + square + key + bell + avatar
     needed 384 px in pt and 364 in it at 360. One rule for every language; My listings stays first in the drawer */
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__earn):has(.pn-header__bell) .pn-header__items{display:none}
  /* five tabs (the bell is in the header): bigger labels and pills than the six-tab bar of components.css */
  .pc-root:not(.pc-guest) .pc-tabbar a{font-size:12px}
  .pc-root:not(.pc-guest) .pn-tab__pill{width:56px;height:32px}
  /* UX 17.10. #56: on phones Your corner is its tiles (chats, wish, following) only; the account card and the whole menu
     list under them were the drawer a second time (unread chats stood four times on one page). Desktop keeps its aside. */
  .pc-root:has(.pn-md) .pn-corner > .pn-split > .pn-split__side{display:none}
  /* light / dark moves into the drawer's foot: with the avatar a free seller's header (theme + My listings + "Start
     earning" + avatar) needed 364 px in it and 384 px in pt at 360. One rule for every member, so the toggle is always
     in the same place; the header keeps the role's own keys. */
  .pc-root:not(.pc-guest) .pc-header:has(.pn-mdbtn) .pn-themebtn{display:none}
}

/* ---------- the layer: hidden until #pnMe is the target (no JS) or .is-open (chat.js) */
.pn-md{position:fixed;inset:0;z-index:var(--z-drawer);overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s linear var(--dur-base)}   /* hidden only once the sheet has slid out; overflow:hidden (17.10.): the sheet parked beside the screen can never widen the page */
.pn-md:target,.pn-md.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
@media (min-width:701px){.pn-md{display:none}}
html:has(.pn-md:is(:target,.is-open)),html:has(.pn-md:is(:target,.is-open)) body{overflow:hidden}
.pn-md__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--dur-base) var(--ease-out);cursor:default}
.pn-md:is(:target,.is-open) .pn-md__scrim{opacity:1}
.pn-md__sheet{--surface:var(--t-over);--sunken:var(--t-over-2);--surface-2:var(--t-over-3);--ink-3:var(--ink-2);
  position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(88vw,384px);
  border-radius:var(--radius-sheet) 0 0 var(--radius-sheet);background:var(--t-over);color:var(--ink);box-shadow:var(--sh-float);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;outline:none;
  transform:translateX(104%);transition:transform var(--dur-base) var(--ease-out)}
.pn-md:is(:target,.is-open) .pn-md__sheet{transform:none}
/* UX polish C (23.10., UX-050): parked beside the screen, the closed sheet still counted into the page's scroll width (445 on a
   390 phone). Hidden only after it has slid out (visibility waits for the transform), so opening and closing animate as before. */
.pn-md:not(:target):not(.is-open) .pn-md__sheet{visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}

/* ---------- head: my card on the chrome, the header's colour carried into the sheet */
.pn-md__head{position:relative;display:grid;gap:16px;padding:calc(env(safe-area-inset-top) + 18px) 20px 20px;background:var(--chrome);color:var(--on-chrome);--count-ring:var(--chrome)}
.pn-md__close{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:10px;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;background:var(--chrome-well);color:var(--on-chrome);text-decoration:none}
.pn-md__close:hover{background:var(--chrome-well-hover)}
.pn-md__close .pc-ico{width:20px;height:20px}
.pn-md__me{display:flex;align-items:center;gap:14px;min-width:0;padding-right:48px;color:inherit;text-decoration:none;border-radius:var(--r-rules)}
.pn-md__av{width:64px;height:64px;border:0;font-size:24px}
.pn-md__who{flex:1;display:grid;justify-items:start;gap:8px;min-width:0}
.pn-md__name{max-width:100%;font:700 22px/1.1 var(--font-display);letter-spacing:-.01em;color:var(--on-chrome);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-md__name::before{content:"@";color:var(--pink)}
.pn-md__me:hover .pn-md__name{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:5px}
.pn-md__badges{display:flex;flex-wrap:wrap;gap:6px}
.pn-md__head .pc-badge{background:var(--chrome-well);color:var(--on-chrome);box-shadow:none}
/* what is new: one pill each (the pink count + its word), never a "0" */
.pn-md__stats{display:flex;flex-wrap:wrap;gap:8px}
.pn-md__stats > a{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 16px 0 8px;border-radius:var(--radius-full);background:var(--chrome-well);color:var(--on-chrome);font:600 13.5px/1.2 var(--font-sans);text-decoration:none}
.pn-md__stats > a:hover{background:var(--chrome-well-hover)}
.pn-md__stats b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:var(--radius-full);background:var(--pink);color:var(--anthracite);font:700 13px/1 var(--font-display);font-variant-numeric:tabular-nums}
.pn-md__allread{display:flex;align-items:center;gap:6px;margin:0;font:500 13px/1.3 var(--font-sans);color:var(--on-chrome-2)}
.pn-md__allread .pc-ico{width:16px;height:16px;color:var(--pink)}

/* ---------- body: the aside's groups, the kit's rows (app.css .pn-row) one size tighter than on desktop */
.pn-md__body{display:grid;gap:4px;padding:6px 10px 8px}
.pn-md__sec .pn-grouplabel{margin:0;padding:16px 10px 6px}
.pn-md__body .pn-rows{display:grid;gap:2px}
.pn-md__row.pn-row{min-height:58px;gap:12px;padding:7px 8px}
.pn-md__row .pn-rowicon{width:40px;height:40px}
.pn-md__row .pn-rowicon .pc-ico{width:20px;height:20px}
.pn-md__row .pn-row__main > b{font-size:15px}
.pn-md__row .pn-row__main > span{font-size:12.5px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}   /* fr / pt sub lines take a second line instead of an ellipsis mid-word */
.pn-md__row .pc-badge{flex:none}
.pn-md__row .pn-chev{width:18px;height:18px}

/* ---------- foot: one well with light / dark, the language and Log out */
.pn-md__foot{display:grid;gap:12px;margin:8px 12px calc(env(safe-area-inset-bottom) + 14px);padding:10px;border-radius:var(--r-box);background:var(--sunken)}
.pn-md__theme{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px 6px 4px;border-radius:var(--r-rules);color:var(--ink);text-decoration:none;font:600 15px/1.2 var(--font-sans)}
.pn-md__theme:hover{background:var(--t-tint)}
.pn-md__theme .pn-rowicon{width:40px;height:40px}
.pn-md__themel{flex:1;min-width:0}   /* its switch is the house one (UX 17.10. #76, components.css .pc-switch) */
.pn-md__lang{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0;padding:4px;list-style:none;border-radius:var(--radius-full);background:var(--t-tint)}
.pn-md__lang a{display:grid;place-items:center;min-height:var(--tap);border-radius:var(--radius-full);color:var(--ink-2);font:700 12px/1 var(--font-sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;overflow:hidden}
.pn-md__lang a:hover{color:var(--ink);background:var(--t-tint)}
.pn-md__lang a[aria-current]{background:var(--chrome);color:var(--on-chrome)}   /* the chrome's own pill, as the footer and the guest burger fill the current language */
.pn-md__out.pc-btn{min-height:var(--tap);justify-content:center}
.pn-md :is(.pn-md__close,.pn-md__me,.pn-md__stats > a,.pn-md__theme,.pn-md__lang a):focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.pn-md__body .pn-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}

@media (prefers-reduced-motion:reduce){
  .pn-md,.pn-md__scrim,.pn-md__sheet{transition:none}
}
/* UX 17.10. #83: under 390 px the labels step down a little (pt "Top vendedoras" beside "Novidades" ran together at 360),
   on a 320 px phone the pill too (components.css keeps the six-tab sizes) */
@media (max-width:389px){.pc-root:not(.pc-guest) .pc-tabbar a{font-size:11px}}
@media (max-width:359px){.pc-root:not(.pc-guest) .pn-tab__pill{width:48px}}
/* Earn key (owner 17.10., header.php pn-header__pay; member drawer layer, never in a guest bundle): a free seller's pink pay key, one line. On phones the
   "New listing" key is its "+" square beside it (its name stays the aria-label) and the pay key shows its short form (the
   waiting buyers' number beside a chat icon, or one word; the full label is the aria-label), so logo + square + pay key +
   bell + menu fit from 361 px; below see the 360 px rule. */
.pc-root:not(.pc-guest) .pc-header .pn-header__pay{white-space:nowrap;padding-inline:12px}
.pc-root:not(.pc-guest) .pc-header .pn-header__payshort{display:none;align-items:center;gap:5px}
@media (max-width:700px){
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-header__earn > svg{display:block}
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-header__earn{width:40px;padding:0;justify-content:center}
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-header__earnlbl{display:none}
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-themebtn{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__paylong{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__payshort{display:inline-flex}
}
/* up to 360 px logo + "+" + the pay key + bell + menu need 325-370 px in fr / it / pt: there the pay key keeps the place
   and the "+" steps aside (New listing stays on My listings and on the desktop header) */
@media (max-width:360px){
  .pc-root:not(.pc-guest) .pc-header:has(.pn-header__pay) .pn-header__earn{display:none}
  .pc-root:not(.pc-guest) .pc-header .pn-header__pay{padding-inline:10px}
}
/* @end-member-only */
/* @member-only */
/* MODERN DARK + SIGNATURE PINK (owner 01.11.2026, "Panty – Modern Dark UI Redesign", reference /Users/extraplanet/dev/pcom/neu.jpg).
   The member area's dark theme only: neutral anthracite / graphite surfaces, white and greys, the brand pink as the one
   accent (75 % dark, 20 % white/grey, 5 % pink). No red, brown or bordeaux tint on any dark surface, no pink wash over
   photos. Layout, markup, PHP and JS unchanged: tokens first, then the few components that carried their own colours.
   Last file of pnew.css (after the member layer and the drawer) and between the member markers, so no guest bundle and
   no guest page (body .pc-guest) ever gets it. The brand pink stays #FF9DB2 (the owner: keep the existing pink when it
   differs from #F28EAB). Subtle 1 px lines #303138 are back here by this brief (it replaces the borderless rule of 18.10.
   for the dark member area). */

/* ---- 2. components. Every rule sits under :is() of the two dark entries, so the light theme is untouched. -------- */
/* page ground */
[data-theme="dark"][data-theme="dark"] body.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){background:var(--md-bg)}

/* header: deepest tone, one quiet line, grey nav with the pink underline on the current page */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{background:var(--md-header);box-shadow:inset 0 -1px 0 var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{color:var(--md-ink);transition:color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link:hover{color:var(--accent)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link.is-active,
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link[aria-current]{color:var(--md-ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{background:transparent;color:var(--md-ink);transition:background-color var(--md-ease),color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:hover{background:var(--md-input);color:var(--accent)}
/* the header's paid door ("3 buyers waiting" / "Start earning") is THE accent and stays pink on every page */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay{box-shadow:none;background:var(--accent);color:var(--md-on-pink);border-color:transparent;border-radius:999px;font-weight:700;transition:background-color var(--md-ease),transform var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay:hover{background:var(--accent-press);color:var(--md-on-pink)}
/* "New listing" and the other header buttons: secondary, never competing with the pink one */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key){background:var(--md-input);color:var(--md-ink);border:1px solid var(--md-line);border-radius:999px;transition:background-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key):hover{background:var(--md-hover)}

/* buttons: primary pink (few), secondary anthracite, ghost transparent */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn{transition:background-color var(--md-ease),color var(--md-ease),border-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary{background:var(--accent);color:var(--md-on-pink);border-color:transparent}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary:hover{background:var(--accent-press)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--ink{background:var(--md-input);color:var(--md-white);border:1px solid var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--ink:hover{background:var(--md-hover)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--line,.pc-btn--ghost){background:transparent;color:var(--md-ink-2);border-color:var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--line,.pc-btn--ghost):hover{background:var(--t-tint);color:var(--md-ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn,.pc-iconbtn,a):focus-visible{outline:2px solid var(--md-pink-line);outline-offset:2px}

/* cards and blocks: anthracite, 24 px, one quiet line, the soft shadow */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-lf__card,.pn-fs,.pn-lfr__blk){background:var(--md-card);border:1px solid var(--md-line);border-radius:var(--md-r-card);box-shadow:var(--md-shadow)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__card{transition:box-shadow var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__card:hover{box-shadow:var(--md-shadow-hover)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__card :is(.pc-media,.pn-lf__big){border-radius:var(--md-r-media);overflow:hidden}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__who{color:var(--md-ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__when{color:var(--md-ink-3)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__acts .pc-iconbtn{color:var(--md-ink-2);transition:color var(--md-ease),background-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__acts .pc-iconbtn:hover{color:var(--accent)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__prompt{background:var(--md-input);color:var(--md-ink-2);border-radius:999px}

/* left rail: the profile card light and calm; nav transparent, the current item #303239 with the narrow pink bar */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a{background:transparent;color:var(--md-ink);transition:background-color var(--md-ease),color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a .pc-ico{color:var(--md-white)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a:hover{background:var(--t-tint)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a[aria-current]{background:var(--md-hover);color:var(--md-ink);box-shadow:inset 3px 0 0 var(--accent)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-count{background:var(--md-input);color:var(--md-ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-count--hot{background:var(--accent);color:var(--md-on-pink)}

/* premium sellers: photos first, a dark foot (no pink filter), white name, grey facts, white like button with the pink heart */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs .pc-scard{border-radius:18px;transition:transform var(--md-ease),box-shadow var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs .pc-scard:hover{transform:translateY(-2px);box-shadow:var(--md-shadow-hover)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{color:var(--md-white)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{color:var(--md-meta)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-scard__score,.pc-scard__n){background:var(--md-glass);color:var(--md-white);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav{background:var(--md-white);border-color:transparent;color:var(--accent);transition:transform var(--md-ease),background-color var(--md-ease)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav:hover{background:var(--md-white);transform:scale(1.06)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__arr{background:var(--md-input);color:var(--md-ink);border:1px solid var(--md-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__arr:hover{background:var(--md-hover)}

/* right rail: the progress ring pink on a graphite track, pink action links */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__ring{background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--md-hover) 0)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__ring b{background:var(--md-card);color:var(--md-ink)}
/* the numbers: no paper receipt any more — a dark card with graphite stat panels and quiet lines */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__rcpt{padding:16px;background:var(--md-card);border:1px solid var(--md-line);border-radius:var(--md-r-card);box-shadow:var(--md-shadow)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper{margin:0;padding:14px 16px;background:var(--md-input);color:var(--md-ink-2);font:500 14px/1.4 var(--font-sans);transform:none;box-shadow:none;border-radius:16px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper::after{content:none}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper :is(h2,h3){padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--md-line);color:var(--md-ink);font:700 16px/1.25 var(--font-display)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper h3{margin-top:18px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper dl div{padding:6px 0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper dl div + div{border-top:1px solid var(--md-row-line)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper dd{color:var(--md-white)}

/* type, width and sizes measured on the reference (1438 px wide, owner: "Breite, Schriftgröße und Schriftarten 1:1") */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){--body:"Inter",system-ui,sans-serif;--font-sans:var(--body);--font-label:var(--body);font-family:var(--body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{min-height:76px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{font:500 16px/1.2 var(--body);letter-spacing:0}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__pay,.pn-header__earn,.pn-header__new,.pn-navpin,.pn-navmore__key){min-height:48px;padding:0 20px;font:600 16px/1 var(--body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:48px;height:48px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn .pc-ico{width:26px;height:26px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar{width:44px;height:44px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:46px}
@media (min-width:1260px){
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm):has(.pn-lfr){--gutter:34px}
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr{grid-template-columns:238px minmax(0,1fr) 332px;gap:0 27px}
}
/* left rail */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__me{padding:20px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__meav{width:58px;height:58px;font-size:22px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mename b{font:700 18px/1.2 var(--body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mename small,[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__stats{font-size:16px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a{min-height:48px;padding:4px 18px;font:500 18px/1.2 var(--body);gap:14px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a .pc-ico{width:26px;height:26px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine{font-size:16px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine :is(h2,h3,.pn-lfr__h){font:700 18px/1.2 var(--body)}
/* center */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__prompt{min-height:52px;font-size:17px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb .pc-avatar{width:48px;height:48px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__h{font-size:30px;line-height:1.1}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{font-size:18px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{font-size:15px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__who{font:600 18px/1.25 var(--body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__when{font-size:15px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__av{width:50px;height:50px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__tx{font-size:18px;line-height:1.45}
/* right rail */
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__h{font:700 18px/1.25 var(--body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__sub,[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__blk{font-size:16px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__rcpthd b{font:700 18px/1.2 var(--body)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__rcpthd small{font-size:16px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper{font-size:16px}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper :is(h2,h3){font:700 18px/1.25 var(--body)}

[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine li{align-items:center}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine b{font:700 24px/1.1 var(--body);color:var(--md-ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine span{font-size:16px;color:var(--md-ink)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__tools .pc-btn--ghost{min-height:40px;padding:0 16px;margin-right:6px;background:var(--md-input);border:0;border-radius:999px;color:var(--md-ink);font:600 16px/1 var(--body);letter-spacing:0;text-transform:none}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__tools .pc-btn--ghost:hover{background:var(--md-hover)}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__tools{gap:6px;font-size:15px;color:var(--md-ink-2)}

/* the plastik look's blush pill glow (and its member twin) never on the pay key here: one flat pink accent */
html[data-plk][data-plk]:not([data-theme="light"]) body.pk-site.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay.pn-header__pay{box-shadow:none}

/* the like when it is on, with a small pop */
@keyframes pn-md-like{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
[data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-like,.pc-card__fav)[aria-pressed="true"] .pc-ico{color:var(--accent);animation:pn-md-like .28s ease}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"][data-theme="dark"] .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) *{animation:none !important;transition:none !important}
}
/* ---- 3. the same components for "auto" (no data-theme attribute) on a dark system (generated from section 2) ---- */
@media (prefers-color-scheme: dark){
/* page ground */
:root:not([data-theme]) body.pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){background:var(--md-bg)}

/* header: deepest tone, one quiet line, grey nav with the pink underline on the current page */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{background:var(--md-header);box-shadow:inset 0 -1px 0 var(--md-line)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{color:var(--md-ink);transition:color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link:hover{color:var(--accent)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link.is-active,
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link[aria-current]{color:var(--md-ink)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{background:transparent;color:var(--md-ink);transition:background-color var(--md-ease),color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn:hover{background:var(--md-input);color:var(--accent)}
/* the header's paid door ("3 buyers waiting" / "Start earning") is THE accent and stays pink on every page */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay{box-shadow:none;background:var(--accent);color:var(--md-on-pink);border-color:transparent;border-radius:999px;font-weight:700;transition:background-color var(--md-ease),transform var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__pay.pn-header__pay:hover{background:var(--accent-press);color:var(--md-on-pink)}
/* "New listing" and the other header buttons: secondary, never competing with the pink one */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key){background:var(--md-input);color:var(--md-ink);border:1px solid var(--md-line);border-radius:999px;transition:background-color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__new,.pn-header__earn,.pn-navpin,.pn-navmore__key):hover{background:var(--md-hover)}

/* buttons: primary pink (few), secondary anthracite, ghost transparent */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn{transition:background-color var(--md-ease),color var(--md-ease),border-color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary{background:var(--accent);color:var(--md-on-pink);border-color:transparent}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--primary:hover{background:var(--accent-press)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--ink{background:var(--md-input);color:var(--md-white);border:1px solid var(--md-line)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-btn--ink:hover{background:var(--md-hover)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--line,.pc-btn--ghost){background:transparent;color:var(--md-ink-2);border-color:var(--md-line)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn--line,.pc-btn--ghost):hover{background:var(--t-tint);color:var(--md-ink)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-btn,.pc-iconbtn,a):focus-visible{outline:2px solid var(--md-pink-line);outline-offset:2px}

/* cards and blocks: anthracite, 24 px, one quiet line, the soft shadow */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-lf__card,.pn-fs,.pn-lfr__blk){background:var(--md-card);border:1px solid var(--md-line);border-radius:var(--md-r-card);box-shadow:var(--md-shadow)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__card{transition:box-shadow var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__card:hover{box-shadow:var(--md-shadow-hover)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__card :is(.pc-media,.pn-lf__big){border-radius:var(--md-r-media);overflow:hidden}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__who{color:var(--md-ink)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__when{color:var(--md-ink-3)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__acts .pc-iconbtn{color:var(--md-ink-2);transition:color var(--md-ease),background-color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__acts .pc-iconbtn:hover{color:var(--accent)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__prompt{background:var(--md-input);color:var(--md-ink-2);border-radius:999px}

/* left rail: the profile card light and calm; nav transparent, the current item #303239 with the narrow pink bar */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a{background:transparent;color:var(--md-ink);transition:background-color var(--md-ease),color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a .pc-ico{color:var(--md-white)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a:hover{background:var(--t-tint)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a[aria-current]{background:var(--md-hover);color:var(--md-ink);box-shadow:inset 3px 0 0 var(--accent)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-count{background:var(--md-input);color:var(--md-ink)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-count--hot{background:var(--accent);color:var(--md-on-pink)}

/* premium sellers: photos first, a dark foot (no pink filter), white name, grey facts, white like button with the pink heart */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs .pc-scard{border-radius:18px;transition:transform var(--md-ease),box-shadow var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs .pc-scard:hover{transform:translateY(-2px);box-shadow:var(--md-shadow-hover)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard.is-premium .pc-scard__cap::before{background:var(--scard-cap-shade)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{color:var(--md-white)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{color:var(--md-meta)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pc-scard__score,.pc-scard__n){background:var(--md-glass);color:var(--md-white);border:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav{background:var(--md-white);border-color:transparent;color:var(--accent);transition:transform var(--md-ease),background-color var(--md-ease)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard .pc-card__fav:hover{background:var(--md-white);transform:scale(1.06)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__arr{background:var(--md-input);color:var(--md-ink);border:1px solid var(--md-line)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__arr:hover{background:var(--md-hover)}

/* right rail: the progress ring pink on a graphite track, pink action links */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__ring{background:conic-gradient(var(--accent) calc(var(--p) * 1%),var(--md-hover) 0)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__ring b{background:var(--md-card);color:var(--md-ink)}
/* the numbers: no paper receipt any more — a dark card with graphite stat panels and quiet lines */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__rcpt{padding:16px;background:var(--md-card);border:1px solid var(--md-line);border-radius:var(--md-r-card);box-shadow:var(--md-shadow)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper{margin:0;padding:14px 16px;background:var(--md-input);color:var(--md-ink-2);font:500 14px/1.4 var(--font-sans);transform:none;box-shadow:none;border-radius:16px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper::after{content:none}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper :is(h2,h3){padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--md-line);color:var(--md-ink);font:700 16px/1.25 var(--font-display)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper h3{margin-top:18px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper dl div{padding:6px 0}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper dl div + div{border-top:1px solid var(--md-row-line)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper dd{color:var(--md-white)}

/* type, width and sizes measured on the reference (1438 px wide, owner: "Breite, Schriftgröße und Schriftarten 1:1") */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm){--body:"Inter",system-ui,sans-serif;--font-sans:var(--body);--font-label:var(--body);font-family:var(--body)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header{min-height:76px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-nav__link{font:500 16px/1.2 var(--body);letter-spacing:0}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header :is(.pn-header__pay,.pn-header__earn,.pn-header__new,.pn-navpin,.pn-navmore__key){min-height:48px;padding:0 20px;font:600 16px/1 var(--body)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn{width:48px;height:48px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-iconbtn .pc-ico{width:26px;height:26px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pn-header__avatar{width:44px;height:44px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-header .pc-logo{font-size:46px}
@media (min-width:1260px){
  :root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm):has(.pn-lfr){--gutter:34px}
  :root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr{grid-template-columns:238px minmax(0,1fr) 332px;gap:0 27px}
}
/* left rail */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__me{padding:20px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__meav{width:58px;height:58px;font-size:22px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mename b{font:700 18px/1.2 var(--body)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mename small,:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__stats{font-size:16px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a{min-height:48px;padding:4px 18px;font:500 18px/1.2 var(--body);gap:14px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__nav a .pc-ico{width:26px;height:26px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine{font-size:16px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine :is(h2,h3,.pn-lfr__h){font:700 18px/1.2 var(--body)}
/* center */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__prompt{min-height:52px;font-size:17px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb .pc-avatar{width:48px;height:48px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-fs__h{font-size:30px;line-height:1.1}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__name{font-size:18px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pc-scard__meta{font-size:15px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__who{font:600 18px/1.25 var(--body)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__when{font-size:15px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__av{width:50px;height:50px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lf__tx{font-size:18px;line-height:1.45}
/* right rail */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__h{font:700 18px/1.25 var(--body)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__sub,:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__blk{font-size:16px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__rcpthd b{font:700 18px/1.2 var(--body)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__rcpthd small{font-size:16px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper{font-size:16px}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__paper :is(h2,h3){font:700 18px/1.25 var(--body)}

:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine li{align-items:center}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine b{font:700 24px/1.1 var(--body);color:var(--md-ink)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-lfr__mine span{font-size:16px;color:var(--md-ink)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__tools .pc-btn--ghost{min-height:40px;padding:0 16px;margin-right:6px;background:var(--md-input);border:0;border-radius:999px;color:var(--md-ink);font:600 16px/1 var(--body);letter-spacing:0;text-transform:none}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__tools .pc-btn--ghost:hover{background:var(--md-hover)}
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) .pn-pb__tools{gap:6px;font-size:15px;color:var(--md-ink-2)}

/* the like when it is on, with a small pop */
:root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) :is(.pn-like,.pc-card__fav)[aria-pressed="true"] .pc-ico{color:var(--accent);animation:pn-md-like .28s ease}
@media (prefers-reduced-motion: reduce){
  :root:not([data-theme]) .pc-root:not(.pc-guest,.pn-joinbody,.pn-adm) *{animation:none !important;transition:none !important}
}
}
/* @end-member-only */