/* 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: 'Archivo';
  font-style: italic;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-italic-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: italic;
  font-weight: 700 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/Archivo-italic-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;
}
/* seolaunch (audit SHOULD 7, hub CLS 0.158 "Web font loaded"): metric-matched fallbacks for Caveat. Until Caveat arrives
   the note renders in a local sans scaled to Caveat's width (measured 0.714 x Arial, 0.80 x Roboto), so the correction
   (.pc-fix) keeps its line and nothing under it moves when the swap happens. */
@font-face {
  font-family: 'Caveat FA';
  font-style: normal;
  font-weight: 600 700;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 71%;
}
@font-face {
  font-family: 'Caveat FR';
  font-style: normal;
  font-weight: 600 700;
  src: local('Roboto'), local('DejaVu Sans');
  size-adjust: 80%;
}
@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 */
  --white: #FFFFFF;                 /* .btn--ink / .real / .sticker--black text */
  --display: "Archivo", system-ui, sans-serif; --body: "Inter Tight", system-ui, sans-serif; --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 */
  --wdth-h: 72%;                                  /* .h-xl/.h-l/.h-m, .empty h3 */
  --wdth-h3: 75%;                                 /* card heads: .care h3, .note h3, .box h3, .tile b, .stamp */
  --wdth-logo: 80%;                               /* .logo, .pcard__b b */
  --wdth-kick: 90%;                               /* .kicker, .sticker, .real */
  --fs-xl: 92px; --fs-l: 76px; --fs-m: 44px;      /* .h-xl .h-l .h-m (phone 54 / 44 / 32) */
  --lh-h: .9; --tr-h: -.005em;
  --r-label: 6px; --r-stamp: 8px; --r-icon: 12px; --r-rules: 18px; --r-pcard: 20px; --r-tile: 22px;
  --r-box: 24px; --r-door: 26px; --r-empty: 28px; --r-note: 4px;

  /* ============ 2 · pnew role names (aliases onto the mockup) ============ */
  /* photo house look (owner 28.09.): one dial, --photo-look 0 off · 1 mild · 1.6 strong. Owner 02.10. (variant E, medium):
     card photos are normalised on the server (lib/grade.php), so no CSS filter, only a light accent veil (soft-light 10 %).
     Same values in light and dark (the theme blocks below do not touch them). */
  --photo-look: 1; --photo-desat: 0; --photo-contrast: 0; --photo-lift: 0; --photo-wash: .10;
  --photo-tint: #FF9DB2; --photo-blend: soft-light;

  /* 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));
  /* 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);

  /* 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);
  --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%);
  --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);
  --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: flat duck-egg circles with the initial (mockup .seller .av), toned by member id. */
  --av-g0: var(--duck-2); --av-g1: var(--duck-3); --av-g2: var(--pink-soft); --av-g3: var(--cream);
  --av-g4: var(--card-dk); --av-g5: var(--duck-2); --av-g6: var(--pink); --av-g7: var(--anthracite);
  --av-ink: var(--anthracite); --av-ink-light: var(--on-dark);

  /* 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 */
  --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: Archivo (display), Inter Tight (body), Caveat (notes only). */
  --font-display: var(--display);
  --font-sans: var(--body);
  --wdth-mega: var(--wdth-h); --wdth-display: var(--wdth-h); --wdth-section: var(--wdth-h3); --wdth-h1: var(--wdth-h);
  --wdth-price: var(--wdth-logo); --wdth-sticker: var(--wdth-kick); --wdth-btn: 95%; --wdth-label: var(--wdth-kick);
  --fs-h1: var(--fs-m); --fs-section: 30px; --fs-price-card: 22px;
  /* 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. Button = .btn: 15px caps, padding 17/26 + 2px border = 53 tall; small = .hdr .btn 13px, 12/18 = 41. */
  --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: 41px; --control-md: 44px; --control-btn: 53px; --control-field: 50px; --control-lg: 53px;
  --btn-py: 17px; --btn-px: 26px; --btn-fs: 15px;
  --btn-sm-py: 12px; --btn-sm-px: 18px; --btn-sm-fs: 13px;
  /* The column (mockup .wrap: max 1280 incl. 2 x 56 padding = 1168 content). Header, main and footer share it. */
  --panel-pad: 26px; --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: 32px;          /* main top when the first block is its own anchor (profile cover, membership hero, chat panes) */
  --app-head-pb: 26px;      /* the head band's padding under its last line (above it: --app-top) */
  --app-gap: 24px;          /* between panels, cards and bars inside a page */
  --app-sec-gap: 40px;      /* 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: 72px;        /* .real-sec 72 / 64 */
  --sec-gap-mega: 96px;   /* .buy / .sell 96 / 88 */
  --sec-gap-stack: 32px;
  --sec-head-gap: 26px;   /* .sec-head margin-bottom */
  --mega-pad-top: 96px; --mega-pad-bot: 88px;
  --edge-h: 16px;
  /* Measures */
  --measure-prose: 640px; --measure-lede: 560px; --measure-note: 340px; --measure-mega: 14ch;
  /* Brand type scale */
  --fs-mega-h: var(--fs-xl);
  --fs-brand-h: var(--fs-m);       /* .sec-head h2.h-m */
  --fs-edit-h: 64px;               /* .laundry .h-l */
  --fs-lede: 19px; --fs-sub: 15px; --fs-prose: 17px;
  --fs-hand-s: 21px; --fs-hand: 24px; --fs-hand-l: 24px;
  --lh-mega: var(--lh-h); --lh-display: var(--lh-h); --lh-section: .95;
  --lh-brand: var(--lh-h);
  --tr-mega: var(--tr-h); --tr-display: var(--tr-h); --tr-section: 0; --tr-label: .14em;
  /* 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 caps (Á É Í Ê) rise above the cap height: multi-line display heads open up in es/fr/it/pt. */
:root:is(:lang(es),:lang(fr),:lang(it),:lang(pt)){--lh-brand: .98; --lh-display: .98; --lh-section: .98; --lh-h: .98}
/* 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;
  --blush: var(--accent);
  --focus-ring: var(--anthracite);
  --canvas: #D7E7E5; --bg: #E8F1F0; --surface: #FFFDF8; --sunken: #D7E7E5;
  --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 */
  --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-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: rgb(255 255 255 / .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;
  --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;
  --blush: var(--accent);
  --focus-ring: var(--accent);
  --canvas: #0B1113; --bg: #101719; --surface: #172124; --sunken: #1D292C;
  --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) */
  --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: #EAF2F2; --on-btn-ink: #101719; --btn-ink-edge: #9FB0B2;
  --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(34% 40% at 96% 46%, rgb(255 157 178 / .07), transparent 72%), linear-gradient(180deg, #101719 0%, #101719 100%);
  --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));
  --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;
  --blush: var(--accent);
  --focus-ring: var(--accent);
  --canvas: #0B1113; --bg: #101719; --surface: #172124; --sunken: #1D292C;
  --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);
  --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: #EAF2F2; --on-btn-ink: #101719; --btn-ink-edge: #9FB0B2;
  --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(34% 40% at 96% 46%, rgb(255 157 178 / .07), transparent 72%), linear-gradient(180deg, #101719 0%, #101719 100%);
  --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));
  --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: 54px; --fs-l: 44px; --fs-m: 32px;
    --btn-py: 15px; --btn-px: 20px; --btn-fs: 14px; --control-btn: 48px; --control-lg: 48px;
    --fs-section: 26px; --fs-price-card: 22px;
    --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: 48px; --sec-gap-mega: 64px; --sec-gap-stack: 32px;
    --mega-pad-top: 64px; --mega-pad-bot: 60px;
    --fs-edit-h: 40px;
    --fs-lede: 16px; --fs-sub: 14.5px; --fs-prose: 16px;
    --fs-hand-l: 21px;
    --lp-dome-h: 30px; --lp-lace-r: 8px;
    --app-top: 20px; --app-head-pb: 18px; --app-gap: 16px; --app-sec-gap: 32px;
    --list-pad: 4px;
  }
}
/* 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. */
.pc-logo{display:inline-flex;align-items:baseline;font:900 26px/1 var(--font-display);font-stretch:var(--wdth-logo);letter-spacing:-.01em;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: Archivo 800 12 wdth 90, .14em caps, the drawn wash tub in currentColor. */
.pc-kicker,.pn-kicker{display:inline-flex;align-items:center;gap:8px;font:800 12px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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: .h-xl 92/54, .h-l 76/44, .h-m 44/32. Archivo 900 wdth 72, caps, line-height .9. */
.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:900;font-stretch:var(--wdth-h);text-transform:uppercase;line-height:var(--lh-h);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)}
/* Card head (.care h3 / .box h3 / .note h3): Archivo 900 wdth 75, caps. 30 (phone 26). */
.pc-h-card,.pc-t-section{margin:0;font:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;letter-spacing:0;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): Archivo 800 11-12, .12-.14em caps. */
.pc-t-label,.pc-overline{font:800 11px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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);padding:.02em .14em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.02}
/* .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;opacity:.6;margin:0}
/* .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:900 16cqw/1 var(--font-display);font-stretch:var(--wdth-h3);color:var(--anthracite);letter-spacing:-.01em;text-align:center;white-space:nowrap}
.pc-ptag small{display:block;font:700 max(10px,1.05cqw)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;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:10px;min-height:var(--control-btn);padding:var(--btn-py) calc(var(--btn-px) - .03em) var(--btn-py) calc(var(--btn-px) + .03em);border:2px solid var(--ink);border-radius:var(--radius-full);background:transparent;color:var(--ink);font:800 var(--btn-fs)/1 var(--font-display);font-stretch:var(--wdth-btn);letter-spacing:.06em;text-transform:uppercase;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:18px;height:18px;margin-block:-2px;stroke-width:2.5}
.pc-btn .pc-arr{font-family:var(--font-sans);font-weight:700;letter-spacing:0}
.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);box-shadow:0 6px 0 var(--accent-press)}
.pc-btn--ink{background:var(--btn-ink);color:var(--on-btn-ink);box-shadow:0 6px 0 var(--btn-ink-edge)}
.pc-btn--primary:active,.pc-btn--premium:active{transform:translateY(4px);box-shadow:0 2px 0 var(--accent-press)}
.pc-btn--ink:active{transform:translateY(4px);box-shadow:0 2px 0 var(--btn-ink-edge)}
.pc-btn--on-accent:active{transform:translateY(4px);box-shadow:0 2px 0 var(--btn-edge-ink)}
.pc-btn--line,.pc-btn--secondary{background:transparent;color:var(--ink);border-color:var(--btn-line-edge)}
.pc-btn--line:hover,.pc-btn--secondary:hover,.pc-btn--secondary.is-hover{background:var(--ink);color:var(--bg)}
.pc-btn--ghost{background:transparent;color:var(--ink);border-color:transparent}
.pc-btn--ghost:hover,.pc-btn--ghost.is-hover{border-color:var(--line)}
/* --soft is not a mockup button: it renders as .btn--line (secondary actions are line buttons, one pink per view). */
.pc-btn--soft{background:transparent;color:var(--ink);border-color:var(--btn-line-edge)}
.pc-btn--soft:hover{background:var(--ink);color:var(--bg)}
.pc-btn--white{background:var(--cream);color:var(--anthracite);border-color:transparent}
.pc-btn--on-chrome{background:transparent;color:var(--on-chrome);border-color:var(--chrome-line)}
.pc-btn--on-chrome:hover{border-color:var(--on-chrome)}
.pc-btn--on-accent{background:var(--anthracite);color:var(--white);box-shadow:0 6px 0 var(--btn-edge-ink)}
.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) calc(var(--btn-sm-px) - .03em) var(--btn-sm-py) calc(var(--btn-sm-px) + .03em);border-width:2px;font-size:var(--btn-sm-fs);gap:8px;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%}
/* 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}}
.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 var(--line);background:transparent;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{border-color:var(--line-3)}
.pc-iconbtn--raised{background:var(--surface)}
.pc-iconbtn--plain{border-color:transparent}
.pc-iconbtn--plain:hover{border-color:var(--line)}
.pc-iconbtn--glass{background:var(--paper);color:var(--anthracite);border-color:var(--line)}
.pc-iconbtn--glass:hover{border-color:var(--anthracite)}
.pc-iconbtn--on-chrome{width:40px;height:40px;border-radius:var(--r-icon);border-color:var(--chrome-line);color:var(--on-chrome)}
.pc-iconbtn--on-chrome:hover{border-color:var(--on-chrome)}
.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:800 10px/18px var(--font-display);font-stretch:100%;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:35px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-full);background:transparent;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{border-color:var(--line-3)}
.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:var(--line-3)}
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(--surface);border-color:var(--line);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(--surface);border-color:var(--line);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:35px;margin:0;padding:10px 14px;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;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{border-color:var(--line-3)}
: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:var(--r-rules);background:var(--chrome);border:1px solid var(--chrome-line)}
.pc-seg.pc-seg--chrome > :is(a,button,label){min-height:33px;padding:9px 14px;color:var(--on-chrome);border-color:var(--chrome-line)}
.pc-seg.pc-seg--chrome > :is(a,button,label):hover{border-color:var(--on-chrome)}
.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:var(--pink)}
/* 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:800 10px/18px var(--font-display);font-stretch:100%;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)}

/* ==========================================================================
   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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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)}
/* pic_safe is not identity (SH-01): the inline check and the card chip that carries it stay off. */
.pc-verified{display:none}
.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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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:900 22px/1 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:.08em;text-transform:uppercase;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:800 12px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.1em;text-transform:uppercase;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:900 18px/1 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%) rotate(-9deg);pointer-events:none}
.pn-tape > span + span{display:none}
.is-reserved .pc-media > 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 var(--line);background:var(--av-g0);color:var(--av-ink);font:900 16px/1 var(--font-display);font-stretch:var(--wdth-logo);text-transform:uppercase;text-decoration:none}
.pc-avatar img{width:100%;height:100%;aspect-ratio:1;border-radius:inherit;object-fit:cover;object-position:50% 35%}
.pc-avatar--g0{background:var(--av-g0)}
.pc-avatar--g1{background:var(--av-g1)}
.pc-avatar--g2{background:var(--av-g2)}
.pc-avatar--g3{background:var(--av-g3)}
.pc-avatar--g4{background:var(--av-g4);color:var(--av-ink-light)}
.pc-avatar--g5{background:var(--av-g5)}
.pc-avatar--g6{background:var(--av-g6)}
.pc-avatar--g7{background:var(--av-g7);color:var(--av-ink-light)}
.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:2px solid var(--pink)}
.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:800 12px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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:1px dashed var(--line);border-radius:var(--r-rules);padding:18px 22px;font-size:13px;color:var(--ink-2)}
.pc-rules b{color:var(--ink)}
.pc-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:16px 20px;border-radius:var(--r-rules);border:1px solid var(--line);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{border-color:var(--danger)}
.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 var(--chrome-line);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:800 13px/1.3 var(--font-display);font-stretch:var(--wdth-btn);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;padding:0}

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


/* ==========================================================================
   Fields (derived: the pill family with the 1 px line, paper fill; the label is the mockup small caps label)
   ========================================================================== */
.pc-field{display:grid;gap:8px;min-width:0}
.pc-label{font:800 12px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pc-input{width:100%;min-height:var(--control-field);padding:0 20px;border-radius:var(--radius-full);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:400 15px/1.3 var(--font-sans);appearance:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.pc-input::placeholder{color:var(--ink-2);opacity:1}
.pc-input:focus,.pc-input.is-focus{outline:none;border-color:var(--ink);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-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:transparent;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 var(--line);border-radius:var(--radius-full);background:var(--sunken);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);border:1px solid var(--line);transition:transform var(--dur-base) var(--ease-snap)}
.pc-switch:checked{background:var(--pink);border-color:var(--pink)}
.pc-switch:checked::after{transform:translateX(22px)}
button.pc-switch{margin-left:auto}
button.pc-switch::after{content:none}
button.pc-switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--line);transition:transform var(--dur-base) var(--ease-snap)}
button.pc-switch.is-on,button.pc-switch[aria-checked="true"]{background:var(--pink);border-color:var(--pink)}
button.pc-switch.is-on i,button.pc-switch[aria-checked="true"] i{transform:translateX(22px)}
.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)}
.pc-media > img{z-index:2;object-position:50% 35%;filter:saturate(calc(1 - var(--photo-desat) * var(--photo-look))) contrast(calc(1 + var(--photo-contrast) * var(--photo-look))) brightness(calc(1 + var(--photo-lift) * var(--photo-look)))}
.pc-media:has(> img)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:calc(var(--photo-wash) * var(--photo-look));background:var(--photo-tint);mix-blend-mode:var(--photo-blend)}
.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) */
.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:800 .72em/1.15 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase}
.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{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(--line);pointer-events:none}
.pn-prodcard .pc-media{border-radius:inherit}
.pn-prodcard .pc-media > img{transition:transform 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{font-size:17px;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 14px/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:800 10.5px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.16em;text-transform:uppercase;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{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pn-prodcard .pc-media > 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__ticket .pc-price{font-size:16px}
  .pc-card__cap{padding:12px 10px 9px;gap:4px}
  .pn-prodcard .pc-card__title{font-size:13.5px}
  .pc-card__by{font-size:12px}
  .pn-prodcard .pc-card__tier{font-size:10px;letter-spacing:.14em}
}
/* 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 .pc-price{font-size:15px}
  .pc-card__ticket .pn-askprice{font-size:10.5px}
  .pc-card__cap{padding:10px 9px 8px;gap:4px}
  .pn-prodcard .pc-card__title{font-size:12.5px;line-height:1.22}
  .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}
}
/* Price: Archivo 900 wdth 80 tabular; the currency sits on the baseline at the same size ($38). */
.pc-price{font:900 var(--fs-price-card)/1 var(--font-display);font-stretch:var(--wdth-logo);font-variant-numeric:tabular-nums;letter-spacing:0;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:40px}
.pc-price--m{font-size: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(--line);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{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;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:800 10.5px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.pc-scard__name{display:flex;align-items:center;gap:5px;min-width:0;font:800 18px/1.15 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:-.005em;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)}
.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{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.pc-scard__media > 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}
  .pc-scard__tier{font-size:10px;letter-spacing:.14em}
  .pc-scard__name{font-size:15px}
  .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 var(--pink);box-sizing:border-box}
.pc-story__av > 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:900 28px/1 var(--font-display);font-stretch:var(--wdth-logo)}
.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:var(--pink-press)}.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. */
.pc-list{background:var(--surface);border:1px solid var(--line);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;border-top:1px solid var(--line)}
.pc-seller:first-child{border-top: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{font:800 11px/1 var(--font-display);font-stretch:100%;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-lt)}
.pc-care h3{font:900 30px/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:800 12px/1.1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.pc-carelabel__v{font:900 38px/.95 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:0;text-transform:uppercase;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-note__n{display:block;font:900 40px/1 var(--font-display);font-stretch:var(--wdth-h3);color:var(--pink-press)}
.pc-note h3{font:900 26px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;margin:4px 0 8px}
.pc-note p{margin:0;font-size:14px;color:var(--muted-lt)}
/* .box: radius 24, padding 26. --dk anthracite with the line, --cr cream with the line. */
.pc-box{position:relative;border-radius:var(--r-box);padding:26px;border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:0}
.pc-box h3,.pc-box__h{font:900 30px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;margin:0 0 16px}
.pc-box--dk{background:var(--dk-bg);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(--dk-card);color:var(--dk-ink);border:1px solid var(--line);border-radius:var(--r-tile);padding:20px 22px;min-width:230px}
.pc-tile b{display:block;font:900 54px/1 var(--font-display);font-stretch:var(--wdth-h3);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: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:1px solid var(--line);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:20px}
.pc-receipt__cnt{font:900 44px/1 var(--font-display);font-stretch:var(--wdth-h3);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:800 12px/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.pc-pbox__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px dashed var(--line);padding:10px 0;margin:0;font-size:14px}
.pc-pbox__row b{font:900 30px/1 var(--font-display);font-stretch:var(--wdth-h3)}
.pc-pbox__row.is-med b{color:var(--pink-press);font-size:40px}
.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:1px dashed var(--line)}
.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:44px;padding-block:13px;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:18px}
.pc-door{border-radius:var(--r-door);padding:28px;border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;text-align:left;background:var(--surface);color:var(--ink)}
.pc-door h3{font:900 36px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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)}
.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{border-bottom:1px solid var(--line);padding:18px 0;max-width:860px}
.pc-faq summary{font:900 26px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;cursor:pointer}
@media (max-width:700px){.pc-faq summary{font-size: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:900 22px/1 var(--font-display);font-stretch:var(--wdth-h3);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:.08em;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:28px}
/* 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 var(--line);background:transparent;color:inherit;font:700 20px/1 var(--font-sans);cursor:pointer}
.pc-stepper output{font:900 40px/1 var(--font-display);font-stretch:var(--wdth-h3);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:.06em;text-transform:uppercase}
/* 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{border-top:1px solid var(--line);padding-top:16px;margin-top:30px}
.pc-toc b{font:800 12px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.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:1px dashed var(--line)}
.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:800 12px/1.35 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--pink-press)}
.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:900 28px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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 var(--line);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:900 40px/.95 var(--font-display);font-stretch:var(--wdth-h);text-transform:uppercase;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: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 var(--line);font:800 10px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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(--surface);color:var(--ink);border:1px solid var(--line);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 10.5px/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);border-top:1px solid var(--line);background:var(--bg)}
.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:30;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:41px;padding:0 16px;border-radius:var(--radius-full);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 var(--chrome-line);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:40;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 var(--chrome-line);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:40;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-bottom:1px solid var(--chrome-line);border-radius:0;font:800 20px/1 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:.01em;text-transform:uppercase}
.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:auto;padding-top:24px}
.pc-header .pc-burger__foot .pc-btn{min-height:48px;padding:0 16px;justify-content:center;border-radius:var(--radius-full);font:800 14px/1 var(--font-display);font-stretch:var(--wdth-btn);letter-spacing:.06em;text-transform:uppercase}
.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 var(--chrome-line);border-radius:var(--radius-full);color:var(--on-chrome);font:600 13px/1 var(--font-sans);text-decoration:none}
.pc-burger__lang a[aria-current]{background:var(--on-chrome);border-color:var(--on-chrome);color:var(--chrome)}
.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:22px}
.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 var(--chrome-line);border-radius:var(--radius-full);font:800 11px/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.pn-gfooter__col{min-width:0}
.pn-gfooter__h{margin:0 0 16px;font:800 11px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.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;border-top:1px solid var(--chrome-line)}   /* audit 30.09.: 32 above and below the line */
.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 var(--chrome-line);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{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. */
@media (min-width:701px){.pn-gfooter--member .pn-gfooter__grid{grid-template-columns:minmax(240px,1.3fr) minmax(0,1fr)}.pn-gfooter--member .pn-gfooter__brand{grid-column:auto}}

/* 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:40;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%}
.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:1px solid var(--line);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(--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:900 32px/var(--lh-h) var(--font-display);font-stretch:var(--wdth-h);letter-spacing:var(--tr-h);text-transform:uppercase;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 var(--line);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, dashed line between rows). */
.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);border-top:1px dashed var(--line)}
.pc-fact:first-child{border-top:0}
.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(2){border-top:0}
  .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:60;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:1px solid var(--line);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;border-bottom:1px solid var(--line)}
.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;border-bottom: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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;text-wrap:balance}
.pn-menuwrap.is-sheet .pn-menu__item{min-height:54px;padding:0 8px;font-size:16px}
.pn-toast{position:fixed;left:50%;bottom:max(var(--dock),calc(24px + env(safe-area-inset-bottom)));z-index:70;max-width:calc(100vw - 32px);transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.pn-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.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){position:relative}
  :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)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--tap));height:max(100%,var(--tap));transform:translate(-50%,-50%)}
  /* 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. */
  body:has(:is(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=button],[type=submit],[type=hidden]),textarea):focus) :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}
/* 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%}
.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:1100px){.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:900 var(--fs-m)/var(--lh-h) var(--font-display);font-stretch:var(--wdth-h);letter-spacing:var(--tr-h);text-transform:uppercase;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:has(.pn-main > .pn-gapp){--main-max:var(--wide-max);--gutter:var(--wide-gutter);--col-pad:max(var(--gutter),calc((100% - var(--main-max)) / 2))}
  .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))}}
@media (min-width:1440px){.pn-main > .pn-wide :is(.pn-grid,.pn-vlist){grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1800px){.pn-main > .pn-wide :is(.pn-grid,.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);font-stretch:var(--wdth-h3);line-height:var(--lh-section);letter-spacing:0}
/* ==========================================================================
   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:none;margin:0;display:grid;gap:var(--app-gap);align-content:start}
.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:900 var(--fs-m)/var(--lh-h) var(--font-display);font-stretch:var(--wdth-h);letter-spacing:var(--tr-h);text-transform:uppercase;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 var(--line);border-radius:var(--radius-full);background:transparent;font:700 12px/1 var(--font-sans);color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast)}
.pn-backchip:hover{border-color:var(--line-3)}
.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. */
.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)}
:is(.pn-panel--flush,.pn-threads,.pn-orders,.pn-alertlist) .pn-row + .pn-row::before{left:var(--row-inset);right: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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;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, a line between them, hover sunken, icon wells = the 44 round control. */
.pn-rows{display:grid;grid-template-columns:minmax(0,1fr)}
.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:"";position:absolute;top:0;left:var(--space-3);right:var(--space-3);height:1px;background:var(--line)}
a.pn-row:hover{background:var(--sunken)}
a.pn-row:hover::before,a.pn-row:hover + .pn-row::before{opacity:0}
.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 var(--line);background:transparent;color:var(--ink)}
.pn-rowicon--like{background:var(--pink-soft);border-color:transparent;color:var(--anthracite)}
.pn-rowicon--like .pc-ico{fill:currentColor}
.pn-rowicon--chat{background:var(--btn-ink);border-color:transparent;color:var(--on-btn-ink)}
.pn-rowicon--order{background:var(--pink);border-color:transparent;color:var(--anthracite)}
.pn-rowicon--sys{background:transparent;color:var(--ink)}
.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:800 12px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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-row + .pn-row::before{left:var(--space-2);right: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:900 var(--fs-m)/var(--lh-h) var(--font-display);font-stretch:var(--wdth-h);letter-spacing:var(--tr-h);text-transform:uppercase;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 var(--line);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:20;margin-inline:calc(-1 * var(--gutter));padding:12px var(--gutter) 14px;border-width:1px 0 0;border-radius:0;background:var(--surface)}
  .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:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:1px;border-image:linear-gradient(var(--line),var(--line)) fill 0 / / 0 50vw}
/* .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{flex:none;min-height:32px}
/* ==========================================================================
   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}
.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;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin-top:7px}
.pc-scard__foot > .pc-scard__score{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px 0 7px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--scard-glass);font:800 12.5px/1 var(--font-display);font-stretch:var(--wdth-kick);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__star{font-size:12px;line-height:1}
.pc-scard__flag{flex:none;width:22px;height:22px;margin-left:auto;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line),0 0 0 3px var(--scard-glass)}
@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{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 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:1px solid var(--line);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:80}   /* 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-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));border-top:1px solid var(--line);background:var(--surface)}
.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:20;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 1px 0 var(--line)}
  .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-discbar .pn-langchip .pc-input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer}
.pn-langchip__lab{display:inline-flex;align-items:center;min-height:35px;padding:0 38px 0 14px;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;transition:border-color var(--dur-fast)}
.pn-langchip:hover .pn-langchip__lab{border-color:var(--line-3)}
.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-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 > .pc-scard{flex:none;width:148px}
}

/* ---------- 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(14px);transform:scale(1.18)}
.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) + 96px);z-index:60;transform:translateX(-50%);pointer-events:none}
@media (min-width:701px){.pn-sharetoast{bottom:32px}}


/* 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{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}
.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:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
  .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:48px;padding:0 14px;font-size:15px}
  .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:inset 0 0 0 2px var(--accent)}
.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:900 16px/1 var(--font-display);font-stretch:var(--wdth-price);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__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}
/* 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(--space-6) + env(safe-area-inset-bottom));z-index:60;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);border-color:var(--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}
}
.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:1100px){
  .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-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:var(--pink)}
.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:800 12px/1 var(--font-display);font-stretch:var(--wdth-btn);letter-spacing:.06em;text-transform:uppercase;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:800 12px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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(--radius-full);background:var(--surface);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:46px;padding:0 14px 0 4px;border:0;border-radius:0;box-shadow:none;background:transparent;font:900 22px/1 var(--font-display);font-stretch:var(--wdth-logo);font-variant-numeric:tabular-nums}
/* 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);font-stretch:normal;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 var(--line);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-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 var(--line);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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase}
  .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{border-color:var(--line-3)}
  .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(--space-3))}
  .pn-itemedit .pn-itoast{bottom:calc(128px + 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:.04em;font-size:10px}
}
@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}
/* 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:border-color var(--dur-fast)}
.pn-shmoney__tile:hover > .pc-tile{border-color:var(--dk-ink)}
.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-2);padding:var(--row-inset);border-top:1px solid var(--line)}
@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: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;align-items:center;gap:8px}
.pn-ligrid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto}
@media (min-width:701px){.pn-ligrid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);max-width:520px}}
.pn-ligrid > :first-child{grid-column:1;grid-row:1 / span 2;aspect-ratio:4/5}
.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(--surface);color:var(--ink-2)}
.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}}
/* 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 var(--chrome-line);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%;border:1px solid var(--chrome-line);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}}

/* ==========================================================================
   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}
.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, a line between rows
   ========================================================================== */
.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}
.pn-threadrow:hover,.pn-threadrow.is-held,.pn-threadrow.is-current{background:var(--sunken)}
.pn-threadrow:hover::before,.pn-threadrow:hover + .pn-row::before,.pn-threadrow.is-held::before,.pn-threadrow.is-held + .pn-row::before,.pn-threadrow.is-current::before,.pn-threadrow.is-current + .pn-row::before{opacity:0}
.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 13.5px/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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase}
.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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.1em;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 + .pn-orow::before{content:"";position:absolute;left:var(--row-inset);right:var(--row-inset);top:0;height:1px;background:var(--line);pointer-events:none}
.pn-orow:hover,.pn-orow.is-current{background:var(--sunken)}
.pn-orow:hover::before,.pn-orow:hover + .pn-orow::before,.pn-orow.is-current::before,.pn-orow.is-current + .pn-orow::before{opacity:0}
.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 12.5px/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;border-bottom:1px solid var(--line);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:900 var(--fs-h1)/var(--lh-h) 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 12.5px/16px var(--font-sans);color:var(--ink-2)}
.pn-chatwho__txt .pc-badge--online{justify-self:start}
.pn-chatwho__txt .pn-masktag{flex-wrap:nowrap;align-items:flex-start}
/* The log: duck egg inside the paper card, so paper bubbles keep their line and pink bubbles read as "mine". */
.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(--bg);scroll-padding-bottom:var(--space-4)}
.pn-msgs .pc-day{flex:none;margin:10px 0 4px}
.pn-msgs .pc-day::first-letter{text-transform:uppercase}
.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:3px solid var(--pink);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:3px solid var(--pink);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:900 26px/1 var(--font-display);font-stretch:var(--wdth-logo)}

/* 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 var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast)}
a.pn-adcard:hover{border-color:var(--line-3)}
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 var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;opacity:0;transform:translateY(-50%);transition:opacity var(--dur-fast)}
.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 var(--chrome-line);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 var(--line);background:var(--surface);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}

/* ==========================================================================
   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 var(--line);background:var(--dk-bg);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(--dk-card);border:1px solid var(--line);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 var(--line);background:var(--dk-card);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 var(--line);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;border-top:1px solid var(--line)}
.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}}
.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:20;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:1px solid var(--line);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:800 11px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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;border-top:1px solid var(--line);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:3px solid var(--pink);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(96px + env(safe-area-inset-bottom))}
@media (max-width:700px){body:has(.pn-inbox):not(:has(.pn-chatpage)) .pn-toast{bottom:calc(var(--dock) + var(--space-2))}}

/* ==========================================================================
   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: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:6px}
.pn-alertgroup:not([hidden]) ~ .pn-alertgroup:not([hidden])::before{content:"";position:absolute;top:0;left:var(--row-inset);right:var(--row-inset);height:1px;background:var(--line)}
.pn-alertlist .pn-row + .pn-row::before{content:none}
.pn-alertlist .pn-alert:not([hidden]) ~ .pn-alert:not([hidden])::before{content:"";position:absolute;top:0;left:var(--row-inset);right:var(--row-inset);height:1px;background:var(--line)}
.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 12.5px/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}
  .is-rail .pn-paystrip__cta{display:none}
  .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);border-top:1px solid var(--line);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 var(--line);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:900 var(--fs-m)/var(--lh-h) var(--font-display);font-stretch:var(--wdth-h);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}
  .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}
.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-press)}
.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)}
.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}
.pn-lccount{position:absolute;right:10px;bottom:9px;z-index:1;padding:4px 9px;border:1px solid var(--line);border-radius:var(--radius-full);background:var(--surface);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)}
/* 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);font-stretch:var(--wdth-mega)}
/* 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:12px 0;border-top:1px solid var(--line);min-width:0}
.pn-review:first-child{border-top:0;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:var(--anthracite)}
.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}
  /* polish r4: "What I offer" sits beside the taller About you: its switch rows share the panel height (no empty
     paper under the last switch). */
  .pn-pe__offers{display:flex;flex-direction:column}
  .pn-pe__offers > .pn-rows{flex:1;display:grid;grid-auto-rows:minmax(min-content,1fr);align-content:stretch}
  /* 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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:0;text-transform:uppercase}
.pn-mmsheet .pn-sheet__head .pc-help{margin:4px 0 0}
.pn-sheet__thumb{flex:none;width:56px;height:70px;border-radius:12px;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);border-top:1px solid var(--line)}
.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:900 13px/1 var(--font-display);font-stretch:var(--wdth-h3)}
.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) + 72px);z-index:60;max-width:calc(100% - 32px);min-height:48px;display:flex;align-items:center;padding:12px 20px;border-radius:var(--radius-full);border:1px solid var(--chrome-line);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);border-color:var(--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}}

/* ========== 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;border-top:1px solid var(--line);min-width:0}
.pn-safety__legend{display:block;width:100%;margin:0;padding:var(--space-3) 0 var(--space-2);font:800 12px/1 var(--font-display);font-stretch:var(--wdth-label);letter-spacing:.06em;text-transform:uppercase;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 + .pn-safety__reason::before{content:"";position:absolute;top:0;left:calc(var(--space-3) + 22px + var(--space-3));right:var(--space-3);height:1px;background:var(--line)}
.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);border-top:1px solid var(--line)}
@media (min-width:701px){.pn-safety .pn-sheet__grab{display:none}.pn-sheet.pn-safety .pn-safety__form{padding-top:14px}}
@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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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,.pn-avpick__file{width:100%}
}
.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:var(--pink)}
.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:var(--pink)}
.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(--paper);border:1px solid var(--line);box-shadow:var(--sh-float)}
.pn-lp__date{border:0;padding:0;margin:0;min-width:0}
.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}
}
/* ==========================================================================
   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 mockup .pcard: paper, the line, radius 20, no shadow; the 4:5 poster edge to edge; on it only
                  labels (Premium ink, Free pink, New duck), the ink lock label, a paper play circle; the body = strip,
                  time · views, the caption (never cut).
   - 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:1100px){.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:1100px){.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}
.pn-vlist > .pn-vitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pcard);overflow:hidden;transition:border-color var(--dur-fast)}
@media (hover:hover){.pn-vlist > .pn-vitem:hover{border-color:var(--line-3)}}   /* polish r3: grey, never white in dark */
.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%}
.is-locked .pn-vitem__poster,.is-teaser .pn-vitem__poster{filter:blur(10px) saturate(.85);transform:scale(1.12)}
.pn-vitem__shade{display: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}
.pn-vitem__lock{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%)}
/* Play: the paper circle (44, the line), shown on hover. */
.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(--paper);color:var(--anthracite);opacity:0;transition:opacity var(--dur-fast);pointer-events:none}
.pn-vitem__play .pc-ico{width:20px;height:20px;fill:currentColor;margin-left:2px}
@media (hover:hover){.pn-vitem__media:hover .pn-vitem__play{opacity:1}}
/* 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}

/* 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-press);fill:currentColor;stroke:none}
.pn-vstrip__status{font:400 12.5px/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}
  /* 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:var(--on-media)}
  .is-feed .pn-vlike.is-on .pc-ico{background:var(--pink);border-color:var(--pink);color:var(--anthracite)}
  .is-feed .pn-vrail--av .pc-avatar{width:44px;height:44px;border:2px solid var(--pink)}
  .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:2px solid var(--pink)}
.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:var(--pink);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{top:auto;bottom:16px;transform:translateX(-50%)}
@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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);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:var(--on-chrome)}
.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:800 12px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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) + 12px);z-index:60;transform:translateX(-50%);max-width:calc(100vw - 32px)}
.pn-vtoast[hidden]{display:none}
@media (min-width:701px){.pn-vtoast{bottom:32px}}

@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-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:var(--on-chrome);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-draft .pc-media > img{opacity:.6}
.pn-mypair.is-sold .pc-media > 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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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(--duck-3)}
.pn-mehead__stats > a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.pn-mehead__stats b{max-width:100%;font:900 30px/1 var(--font-display);font-stretch:var(--wdth-h3);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 an inset line and the kicker-type group label. */
.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-2);padding-top:var(--space-2)}
.pn-acctsheet > .pn-acctsec:not([hidden]) ~ .pn-acctsec:not([hidden])::before{content:"";position:absolute;top:0;left:var(--row-inset);right:var(--row-inset);height:1px;background:var(--line)}
.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 var(--line);border-radius:var(--r-box);background:var(--dk-bg);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:900 54px/1 var(--font-display);font-stretch:var(--wdth-h3);color:var(--pink);font-variant-numeric:tabular-nums}
.pn-herostat__l{max-width:none;margin:0;font:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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 var(--line);border-radius:var(--radius-full);color:var(--dk-ink);font:700 12px/1 var(--font-sans)}
.pn-herostat__pill b{font:900 14px/1 var(--font-display);font-stretch:var(--wdth-h3);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:var(--dk-ink)}
@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: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 (saved / error): the chrome pill (.pc-toast look), above the tab bar ---------- */
.pn-toast{position:fixed;left:50%;bottom:var(--dock);z-index:60;display:flex;align-items:center;max-width:calc(100% - 32px);min-height:48px;padding:12px 20px;border-radius:var(--radius-full);border:1px solid var(--chrome-line);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;pointer-events:none;transform:translate(-50%,12px);transition:opacity .2s ease,transform .3s var(--ease-out)}
.pn-toast:empty{display:none}
.pn-toast.is-on{opacity:1;transform:translate(-50%,0)}
.pn-toast.is-bad{background:var(--danger);color:var(--on-danger);border-color:var(--danger)}

@media (prefers-reduced-motion:reduce){
  .pn-toast,.pn-mehead__stats > a,.pn-blockrow{transition:none}
  .pn-toast{transform:translate(-50%,0)}
}

/* ---------- 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)}
  .pn-corner .pn-buyerrows > .pn-row:nth-child(2)::before{display:block}
}
@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(--space-3)}
.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))}}
.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(--duck-3)}
.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:800 26px/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(--line);flex:none}
.pn-lhstate--live > i{background:var(--live)}
.pn-lhstate--review > i{background:var(--accent)}
.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}
.pn-lhplan{display:grid;gap:var(--space-2);padding:var(--space-3)}
.pn-lhplan__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.pn-lhplan__head h2{margin:0}
.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)}
/* 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}
.pn-num{font:900 1.15em/1 var(--font-display);font-stretch:var(--wdth-h3);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:44px;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:900 13px/1 var(--font-display);font-stretch:var(--wdth-h3);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)}
.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:800 15px/1.2 var(--font-display);font-stretch:var(--wdth-btn);letter-spacing:.06em;text-transform:uppercase;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: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: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}
.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;border:1px dashed var(--line);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 var(--line);border-radius:var(--r-rules);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color var(--dur-fast)}
/* Selected = the pink ring in both themes (owner: lines are grey 50 %, never white; ink turns near-white in dark). */
.pn-plan:hover{border-color:var(--line-3)}
.pn-plan:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.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:900 26px/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:900 40px/.9 var(--font-display);font-stretch:var(--wdth-h3);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:800 12px/1 var(--font-display);font-stretch:var(--wdth-btn);letter-spacing:.04em;text-transform:uppercase;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:-14px;left:52px;right:auto}
.pn-plan.pn-plan--reco{margin-top:6px}
/* 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: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(--dk-card);color:var(--dk-ink);border-color:var(--line)}
.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{border-color:var(--dk-ink)}
.pn-plan.pn-plan--reco:has(input:checked){border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.pn-plan.is-disabled{opacity:.5;cursor:not-allowed}
.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:22px}
  .pn-plan__price{font-size:34px}
}
@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;border-top:1px solid var(--line);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:20;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;border-top:1px solid var(--line);background:var(--bg)}
  .pn-psbar__plan{display:grid;gap:4px;min-width:0;margin:0}
  .pn-psbar__price{font:900 30px/.9 var(--font-display);font-stretch:var(--wdth-h3);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}
}
@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:26px}
  .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 var(--line);border-radius:var(--r-box);background:var(--dk-bg);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 var(--line);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-h);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:20;display:grid;gap:6px;margin-top:28px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}
.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%}
}
:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pc-t-mega.pn-golive__h{line-height:.98}


@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) */


/* 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/*. */

/* ---------- shell: the join bar = .hdr ---------- */
.pn-joinbody{background:var(--bg)}
.pn-joinnav{position:sticky;top:0;z-index:30;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(--chrome);color:var(--on-chrome);border-bottom:1px solid var(--chrome-line);box-shadow:none}
.pn-joinnav .pc-logo{color:var(--on-chrome);font-size:22px}
.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:var(--chrome-line);color:var(--on-chrome)}
.pn-joinnav .pc-btn--ghost:hover{border-color:var(--on-chrome);background:transparent}
.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 var(--chrome-line);background:transparent;color:var(--on-chrome)}
@media (min-width:701px){
  .pn-joinnav{padding-inline:var(--col-pad);gap:32px}
  .pn-joinnav .pc-logo{font-size:26px}
}
.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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;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:18px;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:var(--ink)}
.pn-door.pc-door:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-door.is-intent{outline:3px solid var(--pink);outline-offset:4px}
.pn-door__h{margin:0;padding-right:96px;font:900 36px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:30px}
  .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}
.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:20;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 var(--danger-line);background: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:1px dashed var(--line);background:var(--surface);color:var(--ink-2);font:400 12px/1.3 var(--font-sans);text-align:center}
.pn-devchip b{font:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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}

/* ---------- "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:70;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:4px;padding-left:8px;border-left:1px solid var(--chrome-line);color:var(--on-chrome-2);font:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase}
@keyframes pn-jointoast{0%{opacity:0;transform:translate(-50%,-14px)}10%,86%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px);visibility:hidden}}
@keyframes pn-jointoast-still{0%,86%{opacity:1}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:900 var(--fs-section)/1.05 var(--font-display);font-stretch:var(--wdth-h3);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}
/* 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 S8 intro, the S10 hero) stay black in both themes. */

.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,body.pn-wizbody--intro{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,.pn-wizbody--intro .pn-wiz{max-width:none;padding:0}
.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:30;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:var(--on-chrome)}
.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-line);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:800 11px/1.1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase;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:var(--on-chrome);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-intro__inner.pn-hero,.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 12.5px/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 12.5px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-note .pc-ico{color:var(--success);stroke-width:2.4}

/* ---------- 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:20;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))}}
/* 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--intro .pn-wiz.pn-wiz,.pn-wizbody--stop .pn-wiz.pn-wiz{padding-top:0}   /* T33: the full-screen black pages start at the top */   /* signup: integration — S10's black hero starts 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(--obj-paper),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:6px;background:var(--bg);color:var(--ink-2);font:800 9.5px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pn-bday .pc-input{padding:0;text-align:center;font:900 22px/1 var(--font-display);font-stretch:var(--wdth-price);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.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}
/* S4: the helper line while Continue waits for a pick */
.pn-offerneed{margin:12px 0 0}
.pn-offerneed[hidden]{display:none}
/* polish-s 02.10.: shown only after a tap on Continue with nothing picked: the reason, in ink, with one short nudge */
.pn-offerneed.is-nudge{color:var(--ink);font-weight:700;animation:pn-need-nudge .36s var(--ease-out)}
@keyframes pn-need-nudge{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.pn-offerneed.is-nudge{animation:none}}
.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:900 54px/.8 var(--font-display);font-stretch:66%;letter-spacing:-.02em;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:var(--ink)}
.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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.06em;text-transform:uppercase}
.pn-starters{gap:6px;margin-top:10px}
.pn-starter.pc-chip:hover{border-color:var(--ink)}
.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 13.5px/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:900 13px/1 var(--font-display)}
.pn-pring.is-fail{background:var(--scrim)}
.pn-pring .pc-btn{height:34px}
.pn-addrow{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:var(--r-pcard);border:2px dashed var(--line-2);font:800 14px/1.25 var(--font-sans);cursor:pointer}
.pn-addrow.is-filled{border-style:solid;cursor:default}
/* 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-addrow:focus-visible,.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-addrow small{display:block;font:600 12px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-addrow__ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:15px;background:var(--ink);color:var(--bg)}
.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(4,minmax(0,1fr))}}
/* 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:80;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:0 0 0 4px var(--surface),0 0 0 6px var(--accent)}
.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(--av-ink);font:900 34px/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 13.5px/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 11.5px/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:900 26px/1 var(--font-display);font-stretch:78%;letter-spacing:-.02em;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 intro (AD4): full black "You're in." + the accent first-ad card ---------- */
.pn-intro{min-height:100vh;min-height:100dvh;background:var(--chrome);color:var(--on-chrome)}
.pn-intro__top{display:flex;justify-content:flex-end;padding:calc(env(safe-area-inset-top) + 12px) 12px 0;max-width:592px;margin:0 auto}
.pn-intro__inner{position:relative;display:flex;flex-direction:column;max-width:592px;margin:0 auto;padding:4px 18px calc(32px + env(safe-area-inset-bottom));box-sizing:border-box;container-type:inline-size}
/* brand pass (flows AD): every black mega head is sized by its longest word (--w, set by the template), so no language
   ever breaks a word (harmony §3.3); overflow-wrap stays only as the safety net. */
.pn-intro__h.pc-t-mega{order:-1;font-size:min(118px,calc(100cqi / (var(--w,4) * .5)));line-height:.78;color:var(--on-chrome);outline:0;overflow-wrap:anywhere}
.pn-intro .pn-accent-text,.pn-stop .pn-accent-text,.pn-donehero .pn-accent-text,.pn-golivefb .pn-accent-text{color:var(--accent)}
/* the sticker follows the head in the flow, pinned right under its last line: it never covers a letter in any language */
.pn-intro__sticker.pn-sticker{position:relative;right:auto;top:auto;z-index:2;align-self:flex-end;margin:2px 6px 4px 0}
.pn-intro__sub{margin:12px 0 14px;max-width:32ch;color:var(--on-chrome-2);font:600 14.5px/1.4 var(--font-sans)}
.pn-intro__sub b{color:var(--on-chrome)}
/* brand pass (flows AD): the first-ad card is a sewn-in care label on the black (paper object, dashed seam, care numbers
   in --obj-alarm); the accent CTA is the one loud object of the screen (harmony rules §4: no pink cards off the landing). */
.pn-intro .pn-promo{position:relative;padding:22px 20px 20px;border-radius:4px 4px 22px 22px;background:var(--obj-paper);color:var(--obj-ink);box-shadow:var(--sh-label)}
.pn-intro .pn-promo::before{content:"";position:absolute;inset:7px;border:1.5px dashed var(--obj-line);border-radius:2px 2px 17px 17px;pointer-events:none}
/* the pink satin thong (owner favourite, queue 15) tucked into the label's top right corner; the head keeps clear of it */
.pn-intro .pn-promo__art{position:absolute;right:-16px;top:-12px;z-index:1;width:96px;transform:rotate(10deg);pointer-events:none}   /* mockup .calc .obj 10deg */
.pn-intro .pn-promo__art .pn-obj{display:block;width:100%;height:auto;filter:drop-shadow(var(--sh-hand))}
@media (max-width:700px){.pn-intro{overflow-x:clip}}   /* the hanging art (right:-16px) must not widen the phone page (layout_qa page-overflow) */
.pn-intro .pn-promo__h.pc-h-card{max-width:none;position:relative;margin:0 0 14px;padding-right:62px;color:var(--obj-ink)}   /* T30: the kit card head (30 / 26) */
.pn-intro .pn-promo__rules{position:relative;display:flex;flex-direction:column;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.pn-intro .pn-promo__rules li{display:flex;align-items:center;gap:10px;font:700 14px/1.25 var(--font-sans);color:var(--obj-ink)}
.pn-intro .pn-promo__n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--obj-ink);color:var(--pink-press);font:900 12px/1 var(--font-display);font-stretch:115%}   /* T30: mockup .note .n */
.pn-intro .pn-promo__proof{position:relative;margin:0 0 14px;padding-top:10px;border-top:2px dashed var(--obj-line-2);font:600 12px/1.3 var(--font-sans);color:var(--obj-ink-2)}
.pn-intro .pn-promo .pn-proof.pn-promo__proofbox{position:relative;margin:0 0 16px;padding:12px 0 0;border:0;border-top:2px dashed var(--obj-line-2);border-radius:0;background:none;box-shadow:none}
.pn-intro .pn-promo .pn-proof.pn-promo__proofbox::before{content:none}
.pn-intro .pn-promo .pn-promo__proofbox .pn-proof__big{color:var(--pink-ink);font-size:44px}
.pn-intro .pn-promo .pn-promo__proofbox p{color:var(--obj-ink-2)}
.pn-intro .pn-promo .pn-promo__proofbox p b{color:var(--obj-ink)}
.pn-intro .pn-promo p{opacity:1}
.pn-wiz button.pn-later,.pn-intro button.pn-later{border:0;background:transparent;cursor:pointer}
.pn-intro .pn-promo__cta{position:relative}
.pn-intro__later.pn-later{display:flex;margin:6px auto 0;border:0;background:transparent;color:var(--on-chrome-2);cursor:pointer}
.pn-intro__later.pn-later:hover{background:var(--chrome-2);color:var(--on-chrome)}
@media (min-width:701px){.pn-intro__h.pc-t-mega{font-size:min(160px,calc(100cqi / (var(--w,4) * .5)))}.pn-intro__inner{padding-top:24px}.pn-intro .pn-promo__art{width:132px;right:-18px;top:-16px}.pn-intro .pn-promo__h.pc-h-card{padding-right:96px}}

/* ---------- S8 first ad: quality bar (AD6), media pick, price ---------- */
.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 11.5px/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:900 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__add span{font:900 12px/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase}
/* 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 12.5px/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-wiz--ad .pn-fixcount{margin-top:12px}

/* ---------- 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 14.5px/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}
}

/* ---------- 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:var(--on-chrome)}
.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:900 30px/1 var(--font-display);font-stretch:80%}
.pn-stop__badge .pc-ico{width:36px;height:36px}

/* ---------- S4 "You're in" toast ---------- */
.pn-toastwrap{position:fixed;left:0;right:0;bottom:calc(124px + env(safe-area-inset-bottom));z-index:45;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 (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:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:var(--tr-label);text-transform:uppercase;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 */
@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}
}
/* Caps with accents (Ê, Í, Á) on a second line need a little more lead than .78, or they touch the line above */
:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) :is(.pn-donehero,.pn-stop,.pn-golivefb) .pc-t-mega,:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pn-intro__h.pc-t-mega{line-height:.94}
:is(:lang(es),:lang(fr),:lang(it),:lang(pt)) .pn-wiz .pn-hero .pc-t-display{line-height:.92}

/* ==========================================================================
   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-h);letter-spacing:var(--tr-h);font-stretch:var(--wdth-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-intro .pn-accent-text,.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:26px}
.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:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* ==========================================================================
   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 pages (ad intro, done) keep their ground edge to edge and put their 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-intro__inner{max-width:1120px;padding-left:32px;padding-right:528px}
  .pn-wiz .pn-intro__inner.pn-hero{margin-inline:auto}
  .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)}
  .pn-intro__top{max-width:1120px;padding-inline:32px 528px;box-sizing:border-box}
}
/* ---------- 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__t{flex:1;min-width:0}
.pn-nudgecl__t h2{margin:0;font:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:0;text-transform:uppercase;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:900 17px/1 var(--font-display);font-stretch:var(--wdth-h3);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:900 var(--fs-m)/var(--lh-h) var(--font-display);font-stretch:var(--wdth-h);text-transform:uppercase;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:var(--dk-ink)}
.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:12px}
.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 12.5px/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)}
.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:900 46px/.9 var(--font-display);font-stretch:var(--wdth-h3);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:800 11px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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:900 var(--fs-section)/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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 */
.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:900 30px/1 var(--font-display);font-stretch:var(--wdth-h3);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:30px;color:var(--ink)}
  .pn-hubsel .pc-pbox__row.is-med b{font-size:40px}
  .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 13.5px/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:900 36px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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)}

/* ---------- 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}
.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 12.5px/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 12.5px/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:900 28px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:900 17px/1.4 var(--font-display);font-stretch:var(--wdth-h3);color:var(--pink-press)}
.pn-prose strong{font-weight:800}

/* ---------- 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:900 40px/1 var(--font-display);font-stretch:var(--wdth-h3);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 12.5px/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-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:24px}
  .pn-promo h2{font-size:30px}
}

/* ---------- 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:11.5px;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 > :nth-child(2n+1):nth-last-child(-n+1):not(:first-child),.pn-disc--guest .pn-discgrid > :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 > :nth-child(3n+1):nth-last-child(-n+2):not(:first-child),.pn-disc--guest .pn-discgrid > :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 > :nth-child(4n+1):nth-last-child(-n+3):not(:first-child),.pn-disc--guest .pn-discgrid > :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 > :nth-child(6n+1):nth-last-child(-n+5):not(:first-child),.pn-disc--guest .pn-discgrid > :nth-child(6n+1):nth-last-child(-n+5):not(:first-child) ~ *{display:none}}
/* ==========================================================================
   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 12.5px/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 14.5px/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 12.5px/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-bottom:var(--app-head-pb)}
.pn-store--guest.pn-gapp > .pn-dttop.pc-band .pn-gcrumbs{margin:0}
@media (max-width:699px){.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:1100px){.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}}
/* ==========================================================================
   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:800 11px/1.2 var(--font-display);letter-spacing:.14em;text-transform:uppercase;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)}
.pn-lp-browse__chip.pc-chip--accent:hover{background:var(--accent-press);border-color:var(--accent-press)}

/* ---------- 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) 640px;gap:24px;align-items:end}
.pn-lp-hero__copy{padding-bottom:72px;min-width:0}
.pn-lp-hero__chip{cursor:pointer;text-decoration:none}
.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 30px;max-width:520px;font-size:19px;line-height:1.45;color:var(--ink-2)}
.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:640px;margin:0}
.pn-lp-b1{position:absolute;left:50%;bottom:0;width:720px;transform:translateX(-50%)}
.pn-lp-b1 img{width:100%;height:auto}
/* 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}
.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 > :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 30px;max-width:600px;font-size:18px;color:var(--dk-ink-2)}
.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__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;font-size:84px;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:var(--mt-dark)}
.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:900 84px/1 var(--font-display);font-stretch:var(--wdth-h);color:var(--anthracite)}
.pn-lp-paid .pn-lp-paid__big span{font-size:30px}
.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}
/* 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 h3{padding-right:64px}
.pn-lp-calc small{display:block;color:var(--dk-ink-2);font-size:11.5px}
.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}}
.pn-lp-calc__eq{margin:0;color:var(--dk-ink-2)}
.pn-lp-calc__eq b{color:var(--white)}
.pn-lp-calc .pn-lp-calc__res{margin:6px 0;font:900 68px/1 var(--font-display);font-stretch:var(--wdth-h);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:var(--dk-ink)}
.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;font-size:var(--fs-edit-h);overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
@media (min-width:1101px){.pn-lp-laundry__h{font-size:clamp(40px,3.9vw,56px)}}
.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:900 28px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:900 84px/.8 var(--font-display);font-stretch:var(--wdth-h);color:var(--pink-press)}
.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)}

/* ---------- 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__tag{position:relative;display:inline-block;width:120px;margin-bottom:10px;container-type:inline-size;filter:var(--fig-shadow);transform:rotate(-6deg)}
.pn-lp-join__tag img{width:100%;height:auto}
.pn-lp-join__tag .pc-ptag{--r:-14deg;font-size:15cqw}
.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}
@media (max-width:700px){.pn-lpm-hero__h.pc-h-xl{font-size:50px}}   /* mockup .sp-hero .h-xl: 92 / 50 */
.pn-lpm-hero__k{margin:0 0 18px;font:900 var(--fs-section)/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:clamp(44px,5vw,72px)}
@media (max-width:700px){.pn-lpm-hero:not(.pn-lpm-hero--report) .pn-lpm-hero__h.pc-h-xl{font-size:42px}}
@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)}
.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}
.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:1px dashed var(--line)}
.pn-lpm-rail .pc-pbox li a{display:flex;justify-content:space-between;gap:10px;margin:0;padding:12px 0;font:700 14px/1.3 var(--font-sans);color:var(--ink);text-decoration:none}
.pn-lpm-rail .pc-pbox li a:hover{text-decoration:underline}
.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__h{font-size:var(--fs-l)}
  .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-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 > :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 .pc-tile b{font-size:40px}
  .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:30px}
  .pn-lp-buy__illu{right:16px;bottom:8px}
  .pn-lp-how{margin-top:48px}
  .pn-lp-how__note{font-size:21px;margin-bottom:14px}
  .pn-lp-steps{grid-template-columns:minmax(0,1fr);gap:14px}
  .pn-lp-step__obj{width:80px;top:-24px;right:-4px}
  .pn-lp-step__obj--env{width:84px;top:-18px}
  .pn-lp-step h3{font-size:26px}
  .pn-lp-proof{padding:60px 0}
  .pn-lp-proof__wrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .pn-lp-receipt{padding:22px 20px 30px;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__h{font-size:46px}
  .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-boxes > .pn-lp-calc{order:-2}
  .pn-lp-boxes > .pn-lp-paid{order:-1}
  .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:64px}
  .pn-lp-boxes{grid-template-columns:minmax(0,1fr);gap:16px}
  .pn-lp-calc__stack{width:96px;bottom:84px;right:8px}
  .pn-lp-laundry.pn-seotext{padding-bottom:64px}
  .pn-lp-mast{padding:14px 0}
  /* T26: not an avatar circle — the spec'd 150 px chest crop in an arch (the host's duck arch), labelled under it. */
  .pn-lp-mast{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:"kick mini" "illu illu";align-items:end;column-gap:12px;row-gap:6px}
  .pn-lp-mast > .pc-kicker{grid-area:kick;align-self:end;margin-bottom:6px}
  .pn-lp-mast__mini{grid-area:mini;display:block;width:150px;height:150px;border-radius:75px 75px 14px 14px;background:var(--sunken);overflow:hidden;border:1px solid var(--line)}
  .pn-lp-mast__viv{display:block;width:100%;height:auto;margin-top:6px;transform:scale(1.25);transform-origin:50% 0}
  .pn-lp-mast__illu{grid-area:illu;display:block;justify-self:end;text-transform:none;letter-spacing:.02em;color:var(--ink)}
  .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:30px}
  .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 .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){letter-spacing:-.012em;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,.pn-lp-b1 picture{-webkit-mask-image:linear-gradient(var(--ink) 84%,transparent);mask-image:linear-gradient(var(--ink) 84%,transparent)}
.pn-lp-b1{bottom:var(--foot)}
.pn-lp-hero__illu{bottom:6px}
.pn-lp-hero .pc-hl{background:var(--lp-tape);padding:.02em .12em 0}
.pn-lp-hero__chip.pc-chip--live{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:701px){.pn-lp-hero__h{font-size:clamp(54px,7.4vw,92px)}}
@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 > :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) 80%,transparent);mask-image:linear-gradient(var(--ink) 80%,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:66px;letter-spacing:-.015em;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) 82%,transparent);mask-image:linear-gradient(var(--ink) 82%,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 h3{padding-right:100px}
@media (min-width:701px){.pn-lp-calc > small:last-child{padding-right:0}}

/* ---- 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:11.5px;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;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.015em}
.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) 40px;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:900 clamp(26px,2.5vw,36px)/.95 var(--font-display);font-stretch:var(--wdth-h3);letter-spacing:-.01em;text-transform:uppercase}
.pn-lp-mcard__h a{color:inherit;text-decoration:none}
.pn-lp-mcard__h a::after{content:"";position:absolute;inset:0;z-index:2}
.pn-lp-mcard__h a:focus-visible{outline:none}
.pn-lp-mcard:has(.pn-lp-mcard__h a:focus-visible){outline:3px solid var(--focus-ring);outline-offset:3px}
.pn-lp-mcard__p{margin:8px 0 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pn-lp-mcard__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),transform var(--dur-slow) var(--ease-out)}   /* polish 02.10.: the ring is the line button's edge (ink on light, grey 50 % in dark, never a white ring) */
.pn-lp-mcard:hover{background-size:100% 100%}
.pn-lp-mcard:hover .pn-lp-mcard__go{background:var(--ink);color:var(--bg);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{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-lp-mcard{grid-template-columns:minmax(0,1fr) 40px;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}
  .pn-lp-mcard__h{font-size:30px}
  .pn-lp-mcard__go{align-self:end}
}
@media (prefers-reduced-motion:reduce){.pn-lp-mcard,.pn-lp-mcard__go{transition:none}.pn-lp-mcard:hover .pn-lp-mcard__go{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:grid;grid-template-columns:minmax(0,max-content) 90px minmax(0,1fr);grid-template-areas:"h tag ." "doors doors doors";column-gap:22px;align-items:end}
.pn-lp-join__tag{grid-area:tag;width:90px;margin:0 0 14px}
.pn-lp-join__h{grid-area:h;margin:0 0 28px}
.pn-lp-doors{grid-area: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-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-buy .pc-tile b{font-size:44px}
  .pn-lp-how{margin-top:40px}
  /* 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-calc__stack{width:76px;top:12px;right:12px}
  .pn-lp-calc h3{padding-right:84px}
  .pn-lp-mast{align-items:center}
  .pn-lp-mast > .pc-kicker{align-self:center;margin-bottom:0}
  .pn-lp-guides__wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .pn-lp-mcard{grid-template-columns:30px minmax(0,1fr) 40px;column-gap:14px;padding:20px 0}
  .pn-lp-join .pc-wrap{grid-template-columns:minmax(0,1fr) 72px;grid-template-areas:"h tag" "doors doors";column-gap:14px}
  .pn-lp-join__tag{width:72px}
  .pn-lp-join__h{margin-bottom:22px}
}
@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)}
}
/* ==========================================================================
   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;counter-reset:pn-mpsec}
.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);counter-increment:pn-mpsec;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}
.pn-mp__n{font:800 11px/1 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pn-mp__n::before{content:counter(pn-mpsec,decimal-leading-zero)}
.pn-mp__h{margin:-6px 0 0;font:900 28px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;letter-spacing:0;color:var(--ink);hyphens:manual;overflow-wrap:break-word}
h3.pn-mp__h{font-size:24px}
.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);font:600 18px/1.55 var(--font-sans);color:var(--ink)}
.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);position:absolute;left:0;top:-.1em;width:32px;text-align:center;font:900 34px/1 var(--font-display);font-stretch:var(--wdth-h3);color:var(--pink-press)}
/* 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:800 12px/1.2 var(--font-display);letter-spacing:.12em;text-transform:uppercase;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:900 18px/1 var(--font-display);font-stretch:var(--wdth-h3);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;counter-reset:pn-mpsec;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:.04em;text-transform:uppercase;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:900 44px/1 var(--font-display);font-stretch:var(--wdth-h3);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:28px;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__answer{font-size:16.5px}
  .pn-mp__h{font-size:24px}
  .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:38px}
  .pn-rep__fig > div + div dd{font-size:24px}
}

/* ---------- 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:900 22px/1.05 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:699px){.pn-mp__quotes{grid-template-columns:minmax(0,1fr)}}
/* ==========================================================================
   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:clamp(40px,4.4vw,64px)}
.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:800 12px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.14em;text-transform:uppercase;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:900 28px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:900 24px/1 var(--font-display);font-stretch:var(--wdth-h3);color:var(--pink-press)}
.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:800 12px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase}
.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:900 clamp(24px,2.4vw,32px)/.98 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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 */
.pn-gd-hubbox ul{list-style:none;margin:10px 0 12px;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:12px 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:38px}
  .pn-gd-lead{margin-bottom:40px}
  .pn-gd-lead__a{font-size:16.5px}
  .pn-gd-body h2{font-size:24px}
  .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:800 12px/1.2 var(--font-display);font-stretch:var(--wdth-kick);letter-spacing:.12em;text-transform:uppercase}
.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}
/* ==========================================================================
   Admin dashboard (design/v2/admin-mockup.html, docs/admin-dashboard-concept.md §11): black chrome (sidebar, top bar,
   phone tab bar) with the 50 % grey chrome line, content on paper, cards keep their --line border. Colours are tokens
   only (tokens.css --adm-* for the data colours); buttons are the kit's .pc-btn (one pink per view).
   ========================================================================== */
.pn-adm{background:var(--bg);color:var(--ink);font:14px/1.45 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;margin:0}
.pn-adm-page a:not(.pc-btn){color:inherit}
.pn-adm :focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:6px}
.pn-adm-app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--chrome) 231px,var(--chrome-line) 231px,var(--chrome-line) 232px,var(--bg) 232px)}
.pn-adm-body{min-width:0}
.pn-adm-small{font-size:12px}
.pn-adm-muted{color:var(--ink-2)}
.pn-adm-gray{color:var(--ink-2)}   /* r3: --ink-3 is 4.1:1 on the dark card (AA needs 4.5) */
.pn-adm-m0{margin:0}
.pn-adm-mt{margin-top:12px}
.pn-adm-grow{flex:1}
.pn-adm-caps{font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.pn-adm-hint{font-size:12px;color:var(--ink-2);margin:0}
.pn-adm-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pn-adm-link{color:var(--accent-text);font-weight:600;font-size:13px;text-decoration:none}
.pn-adm-link:hover{text-decoration:underline}
.pn-adm-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px}

/* ---- chrome: sidebar ---- */
.pn-adm-side{background:var(--chrome);color:var(--on-chrome);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--chrome-line)}
.pn-adm-brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--chrome-line)}
.pn-adm-brand b{font-weight:700;font-size:15px;display:block}
.pn-adm-brand div > span{display:block;font-size:11px;color:var(--on-chrome-2);font-weight:500}
.pn-adm-mark{width:30px;height:30px;border-radius:8px;background:var(--chrome-2);display:grid;place-items:center;font:900 19px/1 var(--display);color:var(--on-chrome);position:relative;flex:none}
.pn-adm-mark i{position:absolute;right:5px;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pn-adm-nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.pn-adm-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--on-chrome-2);font-weight:600;font-size:14px;text-decoration:none;position:relative}
.pn-adm-nav a:hover{background:var(--chrome-2);color:var(--on-chrome)}
.pn-adm-nav a[aria-current="page"]{background:var(--chrome-2);color:var(--on-chrome)}
.pn-adm-nav a[aria-current="page"]::before{content:"";position:absolute;left:-4px;top:13px;width:3px;height:18px;border-radius:2px;background:var(--accent)}
.pn-adm-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pn-adm-sidefoot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--chrome-line);display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--on-chrome-2)}
.pn-adm-sidefoot__row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pn-adm-sidefoot__row b{color:var(--on-chrome);font-weight:600;text-align:right}
.pn-adm-sidefoot__row > span{display:inline-flex;align-items:center;gap:6px}
.pn-adm-sidefoot__site{display:inline-flex;align-items:center;gap:6px;color:var(--on-chrome-2);text-decoration:none;font-weight:600}
.pn-adm-sidefoot__site:hover{color:var(--on-chrome)}
.pn-adm-chromebtn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--chrome-2);color:var(--on-chrome);font-weight:600;font-size:12px;text-decoration:none}
.pn-adm-chromebtn:hover{background:var(--chrome-press)}
.pn-adm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--adm-good);flex:none}
.pn-adm-dot--bad{background:var(--adm-bad)}

/* ---- chrome: top bar ---- */
.pn-adm-top{background:var(--chrome);color:var(--on-chrome);border-bottom:1px solid var(--chrome-line);position:relative;z-index:20}
.pn-adm-top__in{max-width:1328px;margin:0 auto;padding:0 24px;min-height:52px;display:flex;align-items:center;gap:16px}
.pn-adm-top__title{display:none;font-weight:700}
.pn-adm-sample{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--on-chrome-2);min-width:0;flex:1}
.pn-adm-sample b{background:var(--accent);color:var(--on-accent);font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:999px;font-weight:700;flex:none}
.pn-adm-top__stamp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--on-chrome-2);white-space:nowrap}
.pn-adm-top__stamp.is-bad{color:var(--on-chrome)}

/* ---- page ---- */
.pn-adm-page{display:block;max-width:1328px;margin:0 auto;padding:24px 24px 64px}
.pn-adm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pn-adm-head h1{font:900 var(--fs-h1)/1 var(--display);font-stretch:88%;letter-spacing:-.005em;margin:0;text-transform:uppercase}
.pn-adm-head p{margin:6px 0 0;color:var(--ink-2);max-width:72ch}
.pn-adm-stamp{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pn-adm-stamp.is-bad{color:var(--adm-bad);font-weight:700}
.pn-adm h2{font-size:15px;font-weight:700;margin:0}
.pn-adm-card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.pn-adm-card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;flex-wrap:wrap}
.pn-adm-card__h p{margin:2px 0 0}
.pn-adm-card__b{padding:16px 20px 20px}
.pn-adm-card__t{padding:12px 0 0}
.pn-adm-card--table{overflow:hidden}
.pn-adm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.pn-adm-s4{grid-column:span 4;min-width:0}.pn-adm-s8{grid-column:span 8;min-width:0}.pn-adm-s12{grid-column:span 12;min-width:0}
.pn-adm-stack{display:flex;flex-direction:column;gap:16px}
.pn-adm-kv{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.pn-adm-kv > span:first-child{color:var(--ink-2)}
.pn-adm-kv b{font-weight:600;text-align:right}
.pn-adm-kvs{display:flex;flex-direction:column;gap:8px}
.pn-adm-foot{margin:16px 0 0;max-width:110ch}
.pn-adm-chartfoot{margin:8px 0 0}
.pn-adm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-weight:600}
.pn-adm-legend span{display:inline-flex;align-items:center}
.pn-adm-key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;flex:none;vertical-align:0}
.pn-adm-key--leg,.pn-adm-key--erst,.pn-adm-bg--leg{background:var(--adm-c-leg)}
.pn-adm-key--pnew,.pn-adm-key--kry,.pn-adm-bg--pnew{background:var(--adm-c-pnew)}
.pn-adm-key--best,.pn-adm-key--verl,.pn-adm-bg--best{background:var(--adm-c-best)}
.pn-adm-key--cb{background:var(--adm-bad)}

/* ---- filters ---- */
.pn-adm-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 20px;position:relative}
.pn-adm-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex:none}
.pn-adm-seg a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;font-weight:600;font-size:13px;color:var(--ink-2);white-space:nowrap;text-decoration:none}
.pn-adm-seg a:hover{background:var(--adm-hover);color:var(--ink)}
.pn-adm-seg a[aria-current="true"]{background:var(--btn-ink);color:var(--on-btn-ink)}
.pn-adm-seg__n{font-weight:500;opacity:.7;font-size:12px}
.pn-adm-sel{position:relative;display:inline-flex;flex:none}
.pn-adm-sel > span:not(.pc-sr){position:absolute;left:14px;top:-8px;background:var(--bg);padding:0 4px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);line-height:16px;z-index:1}
.pn-adm-sel select{appearance:none;-webkit-appearance:none;min-height:44px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:0 36px 0 16px;font:600 13px/1 var(--body);cursor:pointer}
.pn-adm-sel::after{content:"";position:absolute;right:16px;top:17px;width:7px;height:7px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);pointer-events:none}
.pn-adm-search{display:inline-flex;flex:none;position:relative}
.pn-adm-search input{min-height:44px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:0 16px;min-width:240px;font:500 14px/1 var(--body)}
.pn-adm-search input::placeholder{color:var(--ink-3)}
.pn-adm-onlym{display:none}

/* ---- banner, pills, guards ---- */
.pn-adm-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:var(--surface);border:1px dashed var(--ink-3);font-size:13px;color:var(--ink-2);margin-bottom:16px}
.pn-adm-banner p{margin:0}
.pn-adm-banner b{color:var(--ink)}
.pn-adm-banner .pc-ico{flex:none;margin-top:1px}
.pn-adm-pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pn-adm-pill--good{background:var(--adm-good-bg);color:var(--adm-good)}
.pn-adm-pill--bad{background:var(--adm-bad-bg);color:var(--adm-bad)}
.pn-adm-pill--open{background:var(--adm-neutral-bg);color:var(--ink-2)}
.pn-adm-pill--unfair{background:transparent;color:var(--ink-2);border:1.5px dashed var(--ink-3)}
.pn-adm-guards{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.pn-adm-guard{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px}
.pn-adm-guard b{font-weight:600}
.pn-adm-guard__st{font-size:11px;font-weight:700;color:var(--adm-good);display:inline-flex;align-items:center;gap:4px}
.pn-adm-guard.is-bad{border-color:var(--adm-bad)}
.pn-adm-guard.is-bad .pn-adm-guard__st{color:var(--adm-bad)}
.pn-adm-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text)}

/* ---- verdict ---- */
.pn-adm-verdict{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);overflow:hidden}
.pn-adm-verdict__main{padding:22px 24px}
.pn-adm-verdict__side{padding:22px 24px;border-left:1px solid var(--line);background:var(--sunken);display:flex;flex-direction:column;gap:10px}
.pn-adm-vline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-adm-vsent{font-size:17px;font-weight:600;margin:12px 0 4px;max-width:62ch}
.pn-adm-vbig{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:14px}
.pn-adm-vbig__cap{margin-bottom:6px}
.pn-adm-big{font:900 64px/.95 var(--display);font-stretch:85%;letter-spacing:-.01em;color:var(--ink-2)}
.pn-adm-vcmp{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.pn-adm-vcmp span{display:inline-flex;align-items:center}
.pn-adm-vcmp b{display:block;font-size:18px;color:var(--ink);font-weight:700}

/* ---- KPI tiles ---- */
.pn-adm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:16px 0}
.pn-adm-kpi{box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 16px 12px;display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;color:var(--ink)}
.pn-adm-kpi:not(.is-static):hover{background:var(--adm-hover)}
.pn-adm-kpi__lbl{font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--ink-2);line-height:1.25}
.pn-adm-kpi__vals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn-adm-kpi__v small{display:flex;align-items:center;font-size:11px;color:var(--ink-2);font-weight:600}
.pn-adm-kpi__v b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.15;white-space:nowrap}
.pn-adm-kpi__v b.is-na{font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.8;white-space:normal}
.pn-adm-kpi__one{font-size:22px;font-weight:700;line-height:1.2}
.pn-adm-kpi__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 8px;font-size:11px;color:var(--ink-2);min-height:18px}
.pn-adm-spark{width:100%;height:30px;display:block}
.pn-adm-sl{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.pn-adm-sl--leg{stroke:var(--adm-c-leg)}
.pn-adm-sl--pnew{stroke:var(--adm-c-pnew);stroke-width:2}
.pn-adm-stream{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;margin-bottom:16px}
.pn-adm-stream p{margin:2px 0 0}
.pn-adm-stream__v{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pn-adm-stream__v b{font:900 32px/1 var(--display);font-stretch:88%;color:var(--accent-text)}

/* ---- charts (inline SVG; colours by class) ---- */
.pn-adm-chart{position:relative;width:100%}
.pn-adm-chart svg{display:block;width:100%;height:auto;overflow:visible}
.pn-adm-chart text{font:11px var(--body);fill:var(--ink-2)}
.pn-adm-chart .pn-adm-lbl{fill:var(--ink);font-weight:600}
.pn-adm-chart__m{display:none}
.pn-adm-gl{stroke:var(--adm-grid);stroke-width:1}
.pn-adm-axis{stroke:var(--line-2);stroke-width:1}
.pn-adm-hatch{stroke:var(--adm-hatch);stroke-width:2}
.pn-adm-s--best{fill:var(--adm-c-best)}.pn-adm-s--leg,.pn-adm-s--erst{fill:var(--adm-c-leg)}.pn-adm-s--pnew,.pn-adm-s--kry{fill:var(--adm-c-pnew)}
.pn-adm-s--verl{fill:var(--adm-c-best)}.pn-adm-s--cb{fill:var(--adm-bad)}
.pn-adm-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pn-adm-l--leg{stroke:var(--adm-c-leg)}.pn-adm-l--pnew{stroke:var(--adm-c-pnew)}
.pn-adm-dot.pn-adm-s--leg,.pn-adm-dot.pn-adm-s--pnew{stroke:var(--surface);stroke-width:2}
.pn-adm-hit{fill:transparent}
.pn-adm-col{outline:none}
.pn-adm-chart:hover .pn-adm-col:not(:hover) path,.pn-adm-chart:hover .pn-adm-col:not(:hover) rect:not(.pn-adm-hit){opacity:.5}
.pn-adm-col:focus-visible .pn-adm-hit{stroke:var(--accent-text);stroke-width:2}
.pn-adm-tip{position:fixed;z-index:60;pointer-events:none;background:var(--chrome);color:var(--on-chrome);border:1px solid var(--chrome-line);border-radius:10px;padding:10px 12px;font-size:12px;min-width:170px;box-shadow:var(--adm-tip-sh)}
.pn-adm-tip__t{font-weight:700;margin-bottom:6px}
.pn-adm-tip__r{display:flex;justify-content:space-between;gap:16px;color:var(--on-chrome-2)}
.pn-adm-tip__r span{display:inline-flex;align-items:center}
.pn-adm-tip__r b{color:var(--on-chrome);font-weight:600}
.pn-adm-tip__r.is-sum{border-top:1px solid var(--chrome-line);margin-top:4px;padding-top:4px}

/* ---- tables ---- */
.pn-adm-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 16px 16px}
.pn-adm-table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.pn-adm-table th,.pn-adm-table td{padding:0 12px;height:44px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:middle}
.pn-adm-table thead th{background:var(--surface);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:700;height:40px}
.pn-adm-table thead th a{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:inherit}
.pn-adm-table th[aria-sort]{color:var(--ink)}
.pn-adm-ar{opacity:0;font-size:10px}
.pn-adm-table th[aria-sort] .pn-adm-ar{opacity:1}
.pn-adm-table tbody tr:last-child td{border-bottom:0}
.pn-adm-table .is-r{text-align:right}
.pn-adm-table .is-hl{font-weight:700}
.pn-adm-table .is-wrap{white-space:normal;min-width:200px}
.pn-adm-table tr.is-grp th{height:30px;border-bottom:0;padding-bottom:0}
.pn-adm-table tr.is-total td{background:var(--sunken)}
.pn-adm-table tbody tr:hover td{background:var(--adm-hover)}
.pn-adm-table tr.is-click{cursor:pointer}
.pn-adm-table--flat th,.pn-adm-table--flat td{padding:0 6px}
.pn-adm-table.is-sticky1 th:first-child,.pn-adm-table.is-sticky1 td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
.pn-adm-table.is-sticky1 thead th:first-child{z-index:2}
.pn-adm-table.is-sticky1 tbody tr:hover td:first-child{background:var(--adm-hover)}
.pn-adm-empty{height:120px !important;text-align:center !important;color:var(--ink-2)}
.pn-adm-cellnote{display:block;font-size:11px;color:var(--ink-2);white-space:normal}
.pn-adm-barcell{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.pn-adm-hbar{display:inline-block;height:8px;border-radius:0 4px 4px 0}
.pn-adm-mixbar{display:flex;height:14px;gap:2px;border-radius:0 4px 4px 0;overflow:hidden;margin-bottom:12px}
.pn-adm-mixbar span{display:block}
.pn-adm-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.pn-adm-pager__pg{display:flex;gap:8px}

/* ---- users ---- */
.pn-adm-u{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink)}
.pn-adm-u b{font-weight:600;display:block}
.pn-adm-u small{display:block;color:var(--ink-2);font-size:11px}
/* polish r4: header labels wrap (max ~12 ch), merged columns stack a second sort link / second value in the same order,
   so the users table fits the desktop frame; the sort colour and arrow follow the active link, not the whole th. */
.pn-adm-users th,.pn-adm-users td{padding:0 8px}
.pn-adm-users th:first-child,.pn-adm-users td:first-child{padding-left:16px}
.pn-adm-users thead th{white-space:normal;line-height:1.2;vertical-align:bottom;padding-block:8px;max-width:104px;height:auto}
.pn-adm-users thead th a{display:flex;gap:4px;align-items:baseline}
.pn-adm-users thead th.is-r a{justify-content:flex-end}
.pn-adm-users th[aria-sort]{color:var(--ink-2)}
.pn-adm-users thead .pn-adm-ar{display:none}
.pn-adm-users thead th a.is-on{color:var(--ink)}
.pn-adm-users thead th a.is-on .pn-adm-ar{display:inline;opacity:1}
.pn-adm-thsub{margin-top:3px;font-weight:600;letter-spacing:.03em}
.pn-adm-users td{height:52px;line-height:1.3}
.pn-adm-cellsub{display:block;font-size:11px;color:var(--ink-2)}
@media (min-width:1680px){
  .pn-adm-page:has(.pn-adm-users){max-width:1680px}
}
@media (min-width:861px) and (max-width:1279px){   /* laptop: the phone column set + "Alle Spalten" toggle, no silent sideways strip */
  .pn-adm-users .is-opt{display:none}
  .pn-adm-users.is-allcols .is-opt{display:table-cell}
  .pn-adm-onlym{display:inline-flex}
}
.pn-adm-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-2);background:linear-gradient(145deg,var(--adm-av-a),var(--adm-av-b))}
.pn-adm-av--l{width:64px;height:64px;font-size:20px}
.pn-adm-tier{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pn-adm-tier--buyer{background:var(--sunken);color:var(--ink)}
.pn-adm-tier--seller{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pn-adm-tier--prem{background:var(--prem-bg);color:var(--on-prem);box-shadow:inset 0 0 0 1px var(--prem-ring)}
.pn-adm-tier--g7{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.pn-adm-tier--restr{background:var(--adm-bad-bg);color:var(--adm-bad)}
.pn-adm-src{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.pn-adm-src i{width:8px;height:8px;border-radius:50%;flex:none}
.pn-adm-flags{display:inline-flex;gap:6px;color:var(--ink-2)}
.pn-adm-flags > span{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:600}
.pn-adm-flags .is-m{color:var(--accent-text)}
.pn-adm-flags .is-r{color:var(--adm-bad)}
.pn-adm-subdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--adm-good);margin-left:6px;vertical-align:1px}

/* ---- user detail ---- */
.pn-adm-dhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pn-adm-dhead__who{flex:1;min-width:200px}
.pn-adm-dhead__who h2{font:900 26px/1 var(--display);font-stretch:88%}
.pn-adm-dhead__who p{margin:4px 0 10px}
.pn-adm-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 20px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.pn-adm-meta > div > span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:2px}
.pn-adm-meta > div > b{font-weight:600;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.pn-adm-subnote{display:flex;gap:10px;align-items:center;margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--sunken);font-size:13px}
.pn-adm-subnote i{width:8px;height:8px;border-radius:50%;background:var(--adm-good);flex:none}
.pn-adm-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.pn-adm-metric{background:var(--surface);padding:14px 16px}
.pn-adm-metric span{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.pn-adm-metric b{font-size:22px;font-weight:700;display:block;margin-top:2px}
.pn-adm-metric small{color:var(--ink-2);font-size:12px}
.pn-adm-tl{list-style:none;margin:0;padding:0}
.pn-adm-tl__day{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin:14px 0 6px}
.pn-adm-tl__day:first-child{margin-top:0}
.pn-adm-tl__ev{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:start;padding:6px 0}
.pn-adm-tl__ev i{width:10px;height:10px;border-radius:50%;margin-top:4px;background:var(--line-2)}
.pn-adm-tl__ev i.is-pay{background:var(--adm-good)}.pn-adm-tl__ev i.is-adm{background:var(--adm-c-pnew)}.pn-adm-tl__ev i.is-bad{background:var(--adm-bad)}.pn-adm-tl__ev i.is-act{background:var(--adm-c-leg)}
.pn-adm-tl__ev small{color:var(--ink-2);font-size:12px;white-space:nowrap}
.pn-adm-acts{position:sticky;top:24px}
.pn-adm-actlist{display:flex;flex-direction:column;gap:10px}
.pn-adm-actstate{font-size:13px;padding:10px 12px;border-radius:12px;background:var(--sunken)}
.pn-adm-grpl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.pn-adm-grpl .pn-adm-muted{text-transform:none;letter-spacing:0;font-weight:500}

/* ---- funnel ---- */
.pn-adm-fun{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr);font-size:13px}
.pn-adm-fun > div{padding:10px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.pn-adm-fun__h{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);font-weight:700;padding-top:0 !important}
.pn-adm-fun__h span{display:inline-flex;align-items:center}
.pn-adm-fun__st{font-weight:600;padding-right:12px}
.pn-adm-fun__st small{display:block;font-weight:500;color:var(--ink-2);font-size:12px}
.pn-adm-fun__cell{padding-right:18px}
.pn-adm-fun__wrap > .pn-adm-fun__cell{padding:0 18px 0 0}
.pn-adm-fun__bar{height:14px;border-radius:0 4px 4px 0;min-width:2px}
.pn-adm-fun__num{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2)}
.pn-adm-fun__num b{color:var(--ink);font-weight:600;font-size:13px}
.pn-adm-fun .is-mark{background:var(--accent-soft)}
.pn-adm-fun__st.is-mark{border-radius:10px 0 0 10px;padding-left:8px}
.pn-adm-fun .is-mark.is-last{border-radius:0 10px 10px 0}

/* ---- dialogs ---- */
.pn-adm-dlg{border:1px solid var(--line);padding:0;border-radius:20px;background:var(--surface);color:var(--ink);width:min(520px,calc(100vw - 32px));box-shadow:var(--adm-dlg-sh)}
.pn-adm-dlg::backdrop{background:var(--scrim)}
.pn-adm-dlg form{margin:0}
.pn-adm-dlg__h{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pn-adm-dlg__h h2{font-size:18px}
.pn-adm-dlg__b{padding:16px 24px;display:flex;flex-direction:column;gap:14px}
.pn-adm-dlg__f{padding:16px 24px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);flex-wrap:wrap}
.pn-adm-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--ink);border:0;padding:0;cursor:pointer;flex:none}
.pn-adm-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.pn-adm-ba > div{padding:12px 14px;border-radius:12px;background:var(--sunken);font-size:13px}
.pn-adm-ba > div > span{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.pn-adm-ba > div.is-after{background:var(--accent-soft)}
.pn-adm-ba > .pn-adm-ba__arr{display:grid;place-items:center;color:var(--ink-2);font-size:18px;background:none;padding:0}
.pn-adm-fld{display:flex;flex-direction:column;gap:6px;border:0;margin:0;padding:0;min-width:0}
.pn-adm-fld > span,.pn-adm-fld > legend{font-size:12px;font-weight:700;padding:0;margin-bottom:6px}
.pn-adm-fld > span.pn-adm-hint{font-weight:400;margin:6px 0 0}
.pn-adm-fld select,.pn-adm-fld input,.pn-adm-fld textarea{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink);padding:10px 12px;min-height:44px;font:14px/1.3 var(--body)}
.pn-adm-fld textarea{resize:vertical;min-height:72px}
.pn-adm-chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-adm-chips label{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;font-size:13px;font-weight:600;position:relative}
.pn-adm-chips input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.pn-adm-chips label:has(input:checked){background:var(--btn-ink);color:var(--on-btn-ink);box-shadow:none}
.pn-adm-chips label:has(input:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px}
.pn-adm-chips label.is-off{opacity:.4;cursor:not-allowed}
.pn-adm-warn{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:var(--adm-bad-bg);color:var(--adm-bad);font-size:13px;font-weight:600;margin:0}
.pn-adm-warn .pc-ico{flex:none}
.pn-adm-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--chrome);color:var(--on-chrome);border:1px solid var(--chrome-line);padding:12px 18px;border-radius:999px;font-weight:600;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;z-index:80;pointer-events:none;display:flex;gap:8px;align-items:center;white-space:nowrap}
.pn-adm-toast.is-on{opacity:1;transform:translate(-50%,0)}
.pn-adm-toast i{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---- phone chrome ---- */
.pn-adm-tabbar{display:none}
.pn-adm-tabbar button{border:0;background:none}
.pn-adm-moresheet{display:none}
@media (max-width:1180px){
  .pn-adm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-adm-s4,.pn-adm-s8{grid-column:span 12}
  .pn-adm-meta,.pn-adm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-adm-sample span{display:none}
  .pn-adm-acts{position:static}
}
@media (max-width:860px){
  .pn-adm-app{grid-template-columns:minmax(0,1fr);background:var(--bg)}
  .pn-adm-side{display:none}
  .pn-adm-top__in{padding:0 16px;gap:10px}
  .pn-adm-top__title{display:block;flex:1;min-width:0;overflow-wrap:anywhere}
  .pn-adm-sample{flex:none}
  .pn-adm-page{padding:16px 16px 104px}
  .pn-adm-head .pn-adm-stamp{display:none}
  .pn-adm-verdict{grid-template-columns:minmax(0,1fr)}
  .pn-adm-verdict__side{border-left:0;border-top:1px solid var(--line)}
  .pn-adm-verdict__main,.pn-adm-verdict__side{padding:18px}
  .pn-adm-big{font-size:52px}
  .pn-adm-kpis{gap:10px}
  .pn-adm-kpi{padding:12px}
  .pn-adm-kpi__vals{grid-template-columns:minmax(0,1fr)}
  .pn-adm-kpi__v b{font-size:20px}
  .pn-adm-kpi__foot .pn-adm-pill{white-space:normal;min-width:0;max-width:100%;padding-block:4px;line-height:1.2}
  /* polish r1: the filters wrap (no hidden-scrollbar strip that cuts pills and selects at the screen edge): each
     segment takes the full row (its pills wrap inside), the selects share rows two by two, search takes a row. */
  .pn-adm-filters{flex-wrap:wrap;overflow:visible;margin:0 0 16px;padding:8px 0 0;gap:16px 10px}
  .pn-adm-filters > *{flex:1 1 auto;min-width:0}
  .pn-adm-filters > .pn-adm-seg{flex:1 1 100%;flex-wrap:wrap;border-radius:22px}
  .pn-adm-filters > .pn-adm-seg a{flex:1 1 auto}
  .pn-adm-filters > .pn-adm-sel{flex:1 1 calc(50% - 5px)}
  .pn-adm-filters > .pn-adm-sel select{width:100%;min-width:0}
  .pn-adm-filters > .pn-adm-search{flex:1 1 100%}
  .pn-adm-search input{width:100%;min-width:0}
  .pn-adm-tw.is-more{-webkit-mask-image:linear-gradient(to left,transparent,var(--ink) 40px);mask-image:linear-gradient(to left,transparent,var(--ink) 40px)}
  .pn-adm-onlym{display:inline-flex}
  .pn-adm-card__h{padding:14px 16px 0}.pn-adm-card__b{padding:14px 16px 16px}
  .pn-adm-chart__d{display:none}.pn-adm-chart__m{display:block}
  .pn-adm-fun{grid-template-columns:96px minmax(0,1fr) minmax(0,1fr)}
  .pn-adm-fun__cell{padding-right:10px}
  .pn-adm-av--l{width:52px;height:52px}
  .pn-adm-dlg__f .pc-btn{flex:1}
  .pn-adm-dlg{margin:auto auto 0;border-radius:20px 20px 0 0;width:100%;max-width:100%;max-height:92vh}
  .pn-adm-stream__v{align-items:flex-start}
  .pn-adm-users .is-opt{display:none}
  .pn-adm-users.is-allcols .is-opt{display:table-cell}
  .pn-adm-tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--chrome);border-top:1px solid var(--chrome-line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .pn-adm-tabbar a,.pn-adm-tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:10px;color:var(--on-chrome-2);font:600 11px/1.2 var(--body);min-height:44px;justify-content:center;text-decoration:none;background:none;border:0;cursor:pointer}
  .pn-adm-tabbar [aria-current="page"]{color:var(--on-chrome)}
  .pn-adm-tabbar [aria-current="page"] .pc-ico{color:var(--accent)}
  .pn-adm-moresheet:not([hidden]){display:flex;flex-direction:column;gap:4px;position:fixed;right:10px;bottom:76px;z-index:41;background:var(--chrome);border:1px solid var(--chrome-line);border-radius:16px;padding:8px;min-width:220px}
  .pn-adm-moresheet a{min-height:44px;padding:0 14px;border-radius:10px;color:var(--on-chrome);font-weight:600;display:flex;align-items:center;gap:10px;text-decoration:none}
  .pn-adm-moresheet a:hover{background:var(--chrome-2)}
}
@media (max-width:420px){
  .pn-adm-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-adm-vcmp{gap:14px}
  .pn-adm-meta{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.pn-adm [hidden]{display:none !important}
/* Bewertungen (reviews, owner 01.10.): stars, the text column, state pills, the action forms side by side. */
.pn-adm-reviews tr.is-dim td:not(:last-child){opacity:.6}
.pn-adm-stars{font-size:15px;letter-spacing:1px;color:var(--pink-press);white-space:nowrap}
.pn-adm-rvtext{min-width:260px;max-width:420px}
.pn-adm-rvpills{display:flex;flex-wrap:wrap;gap:6px}
.pn-adm-reviews td{height:auto;padding-block:10px}
.pn-adm-rvacts{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:190px}
.pn-adm-rvform{margin:0;display:grid}
.pn-adm-rvform .pc-btn{min-height:32px;padding-block:6px;font-size:11px;letter-spacing:.06em}
/* ==========================================================================
   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}
}
/* 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}
.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:var(--anthracite)}
.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){background:var(--surface)}
  .pn-dt .pn-gal__slide > 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:1;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:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
  .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:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.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 12.5px/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:var(--pink);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}
.pn-dtsafe{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;padding-top:18px;border-top:1px dashed var(--line);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:18px;border-top:1px dashed var(--line)}
.pn-dtdesc__tr{margin:16px 0 0}

/* ---------- rails (More from / Similar) = .sec-head + the .pairs grid ---------- */
.pn-dtrail{margin-top:var(--sec-gap)}
.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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);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 var(--line);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:1100px){.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:1100px){.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:20;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:1px solid var(--chrome-line)}
.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:var(--pink);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:699px){.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). */
@media (max-width:700px){
  body.pn-has-adbar .pn-main:has(> .pn-dtad){padding-bottom:0}
  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 var(--line);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:700px){.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__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-press);fill:currentColor;stroke:none}
.pn-dtrate--big{gap:8px;font-weight:500;color:var(--ink-2)}
.pn-dtrate--big b{font:900 30px/1 var(--font-display);font-stretch:var(--wdth-h3);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 var(--line);border-radius:var(--radius-full);background:var(--surface);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;border-color:var(--line-3)}
.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)}
/* 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, the 50 % line 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;border-top:1px solid var(--line)}
.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);border-left:1px solid var(--line)}
.pn-dtstats__i:first-child{border-left:0}
.pn-dtstats dt{font:500 14px/1.3 var(--font-sans);color:var(--ink-2)}
.pn-dtstats dd{margin:0;font:900 26px/1 var(--font-display);font-stretch:var(--wdth-h3);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{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.pn-dtcover--blur > img{filter:blur(28px) saturate(1.15);transform:scale(1.25)}
.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-top:1px solid var(--line);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:699px){
  .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:24px}   /* 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:13.5px}
  .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}
  .pn-dtstats{display:none}
  .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:10px var(--gutter);overflow:visible;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .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 55%,transparent);mask-image:linear-gradient(to bottom,black 55%,transparent)}
.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(10px) saturate(.8);transform:scale(1.1)}

@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 var(--line);border-radius:var(--r-tile)}
.pn-dtrev,.pn-dtrevs > .pn-review{padding:18px 0;border-top:1px dashed var(--line)}
.pn-dtrevs > :first-child{border-top:0}
.pn-dtrev h3,.pn-review h3{margin:8px 0 0;font:900 22px/1 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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 12.5px/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-press)}   /* 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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);text-transform:uppercase;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:900 var(--fs-section)/.95 var(--font-display);font-stretch:var(--wdth-h3);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}
.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:900 18px/1.05 var(--font-display);font-stretch:var(--wdth-h3)}
.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:699px){
  .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:3px solid var(--pink-press);border-radius:0 var(--radius-tile) var(--radius-tile) 0;background:var(--sunken)}
.pn-revreply b{display:block;font:700 12.5px/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(10px) saturate(.8);transform:scale(1.1)}
/* ---------- 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)}
.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}
/* 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(--chrome);color:var(--on-chrome);border-bottom:1px solid var(--chrome-line);box-shadow:none;--count-ring:var(--chrome)}
.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:41px;border:1px solid var(--chrome-line);background:transparent;color:var(--on-chrome-2);box-shadow:none}
.pc-header .pc-search:hover,.pc-header form.pn-search:hover{border-color:var(--on-chrome)}
.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)}
/* 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, line). */
.pc-header .pc-iconbtn{width:40px;height:40px;border-radius:var(--r-icon);border:1px solid var(--chrome-line);background:transparent;color:var(--on-chrome)}
.pc-header .pc-iconbtn .pc-ico{width:22px;height:22px}
.pc-header .pc-iconbtn:hover{border-color:var(--on-chrome)}
.pc-header .pc-iconbtn.is-active,.pc-header .pc-iconbtn[aria-current="page"]{border-color:var(--pink);color:var(--pink)}
/* 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) calc(var(--btn-sm-px) - .03em) var(--btn-sm-py) calc(var(--btn-sm-px) + .03em);border-width:2px;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:var(--chrome-line);color:var(--on-chrome)}
.pc-header .pc-btn--ghost:hover{border-color:var(--on-chrome);background:transparent}
.pc-header .pc-btn--primary{border-color:transparent}
.pc-header .pn-header__avatar{border:1px solid var(--chrome-line)}
.pc-header .pn-header__avatar.pc-avatar--ring{border:2px solid var(--pink)}
.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}}
/* 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;font-size:0;letter-spacing:0;justify-content:center}
}
/* 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}
}
/* 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}
}
/* 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:22px;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(--chrome);border-top:1px solid var(--chrome-line);box-shadow:none;--count-ring: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(--pink);border-color:var(--pink);color:var(--anthracite)}
.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(--chrome);border-top:1px solid var(--chrome-line);color:var(--on-chrome-2)}
.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{border-color:var(--on-chrome)}
.pc-footer .pn-lang a[aria-current]{background:var(--on-chrome);border-color:var(--on-chrome);color:var(--chrome)}
.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:80;transform:translateY(-200%)}
.pc-skip:focus,.pc-skip:focus-visible{transform:none;outline:3px solid var(--pink);outline-offset:2px}