/* Owner 09.11. (change 3): the feet creator page /@name (templates/bio_feet.php) in the site's own design — one fixed
   layout, tonal surfaces without edges, Nunito heads in sentence case, the mint accent for the one key. Tokens only (pnew.css
   + portal-look.css), no colour literals. Phone first: one column; from 900 px a centred 960 px column. */
.fp-cp-body { margin: 0; background: var(--bg); color: var(--ink); }
.fp-cp { --cp-gap: var(--space-4, 16px); max-width: 960px; margin: 0 auto; padding: 0 var(--space-4, 16px) var(--space-8, 40px); }
.fp-cp__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px;
  margin: 0 calc(-1 * var(--space-4, 16px)); padding: 0 var(--space-4, 16px); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); }
.fp-cp__logo { text-decoration: none; }
.fp-cp__share { background: var(--surface); }
.fp-cp__main { display: grid; gap: var(--cp-gap); }

/* head */
.fp-cp__head { position: relative; border-radius: var(--r-l, 28px); background: var(--surface); overflow: hidden; }
.fp-cp__cover { height: 140px; background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.fp-cp__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .fp-cp__cover { height: 200px; } }
.fp-cp__id { display: grid; justify-items: center; gap: 8px; padding: 0 var(--space-4, 16px) var(--space-5, 20px); margin-top: -56px; text-align: center; }
.fp-cp__avatar { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--surface-2);
  box-shadow: 0 0 0 5px var(--surface); color: var(--ink); font: 800 44px/1 var(--portal-display, var(--body)); }
.fp-cp__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fp-cp__dot { position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.fp-cp__name { margin: 4px 0 0; font: 800 clamp(26px, 5vw, 34px)/1.15 var(--portal-display, var(--body)); color: var(--ink); overflow-wrap: anywhere; }
.fp-cp__handle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--ink-2); font-weight: 600; }
.fp-cp__verified { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); color: var(--ink); font-size: 13px; }
.fp-cp__verified .pc-ico { color: var(--accent); }
.fp-cp__tagline { max-width: 52ch; margin: 0; font-size: 16px; color: var(--ink); }
.fp-cp__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.fp-cp__meta li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.fp-cp__flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; }
.fp-cp__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 520px; margin-top: 8px; }
.fp-cp__keys .pc-btn, .fp-cp__keys form, .fp-cp__keys form .pc-btn { width: 100%; justify-content: center; margin: 0; }
@media (max-width: 420px) { .fp-cp__keys { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fp-cp__order { grid-column: 1 / -1; } }

/* panels */
.fp-cp__panel { display: grid; gap: 12px; padding: var(--space-5, 20px); border-radius: var(--r-l, 28px); background: var(--surface); }
.fp-cp__h2 { margin: 0; font: 800 20px/1.25 var(--portal-display, var(--body)); color: var(--ink); }
.fp-cp__h3 { margin: 8px 0 0; font: 700 15px/1.3 var(--body); color: var(--ink-2); }
.fp-cp__headrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.fp-cp__link { color: var(--accent-text, var(--ink)); font-weight: 600; text-decoration: none; }
.fp-cp__clip { padding: 0; overflow: hidden; background: var(--surface-2); }
.fp-cp__video { display: block; width: 100%; max-height: 72vh; background: var(--surface-2); object-fit: contain; }
.fp-cp__about { max-height: 9.6em; overflow: hidden; line-height: 1.6; color: var(--ink); }
.fp-cp__about p { margin: 0 0 .8em; }
.bio-about.is-open .fp-cp__about, .bio-about.is-short .fp-cp__about { max-height: none; }
.bio-about.is-short .fp-cp__more, body.pc-root .bio-about.is-short .fp-cp__more { display: none; }   /* night 1000 guest: the 44 px band rule in fp-system.css (display inline-flex) showed «Read more» under a two-line About */
.fp-cp__more { justify-self: start; min-height: 44px; padding: 0;   /* night 1000 guest: «Read more» was a 21 px tap target */ border: 0; background: none; color: var(--accent-text, var(--ink)); font: 700 15px/1.4 var(--body); cursor: pointer; }
.fp-cp__more .bio-more__close, .bio-about.is-open .fp-cp__more .bio-more__open { display: none; }
.bio-about.is-open .fp-cp__more .bio-more__close { display: inline; }
.fp-cp__chips { margin: 0; padding: 0; list-style: none; }
.fp-cp__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.fp-cp__facts div { padding: 12px 14px; border-radius: var(--r-s, 14px); background: var(--surface-2); }
.fp-cp__facts dt { color: var(--ink-2); font-size: 13px; }
.fp-cp__facts dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); }

/* sets */
.fp-cp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .fp-cp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fp-cp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-cp__card { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.fp-cp__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-m, 22px); background: var(--surface-2); overflow: hidden; }
.fp-cp__media img { width: 100%; height: 100%; object-fit: cover; }
.fp-cp__price { position: absolute; left: 8px; top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 14px/1.2 var(--body); }
.fp-cp__ct { font: 700 14px/1.3 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* reviews, links */
.fp-cp__score { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.fp-cp__score .pc-ico { color: var(--accent); }
.fp-cp__quotes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fp-cp__quotes blockquote { margin: 0; padding: 12px 14px; border-radius: var(--r-s, 14px); background: var(--surface-2); color: var(--ink); }
.fp-cp__links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fp-cp__lk { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px;
  border-radius: var(--r-m, 22px); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.fp-cp__lk:hover { background: var(--surface-3, var(--surface-2)); }
.fp-cp__lk .pc-ico:first-child { color: var(--accent); }
.fp-cp__lk span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* footer, toast */
.fp-cp__foot { display: grid; justify-items: center; gap: 10px; padding: var(--space-6, 24px) 0 0; color: var(--ink-2); font-size: 14px; text-align: center; }
.fp-cp__foot p { margin: 0; }
.fp-cp__foot a { color: inherit; }
.fp-cp__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fp-cp__onward { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 600; color: var(--accent-ink, var(--ink)) !important; }   /* night 1000 guest: the way on to the other creators */
.fp-cp__toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.fp-cp__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .fp-cp__toast { transition: none; } }

/* audit 500 DISCOVER (#98): a member's way back into the app — «‹ Creators» left, the logo in the middle, Share right */
.fp-cp__back { flex: none; gap: 4px; padding-inline: 10px 14px; }
.fp-cp__back ~ .fp-cp__logo { margin-inline: auto; }

/* ==== q2-mobile (audit 500 #2 round 2, 10.11.; scratchpad r1011/q2-mobile.md) ==== */
/* P1: «Link copied» after Share rose at bottom 24 px, under the fixed request bar (68 px, z 30): on phones it never showed */
@media (max-width: 899.98px) {
  .bio.has-reqbar ~ .fp-cp__toast, .fp-cp.has-reqbar .fp-cp__toast, body:has(.fn-reqbar) .fp-cp__toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 31; }
}
/* P2: the details tiles stacked one per row at 360 px (five 64 px rows); two per row from 280 px */
.fp-cp__facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); }
/* P3: the back chip («‹ Creators», «‹ Discover») was 36 px on touch screens */
@media (pointer: coarse) { .fp-cp__back { min-height: 44px; } }
/* P4: on a phone on its side the sticky bar (60 px) and the request bar (68 px) left 260 px, and the cover + picture + name
   filled all of it: the bar scrolls away there and the cover is lower */
@media (orientation: landscape) and (max-height: 500px) {
  .fp-cp__bar { position: relative; }
  .fp-cp__cover { height: 84px; }
}
/* P5: the notch side in landscape (viewport-fit=cover): the page keeps clear of it */
@media (orientation: landscape) {
  .fp-cp { padding-left: max(var(--space-4, 16px), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4, 16px), env(safe-area-inset-right, 0px)); }
}
/* ==== end q2-mobile ==== */

/* seller20 trust #1 (templates/bio_feet.php, /@slug/?as=guest): her page as a guest gets it — one tonal band above the page
   that says so, and each reason something differs (the letter instead of her picture, a page guests cannot open yet) */
.fp-cp__asguest { display: grid; gap: 6px; max-width: 960px; margin: 0 auto; padding: 12px 16px; background: var(--surface-2, #1b2133); color: var(--ink, #fff); font-size: 14px; line-height: 1.45; }
.fp-cp__asguest p { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.fp-cp__asguest .pc-ico { flex: none; margin-top: 2px; }
.fp-cp__asguest-h b { flex: none; }
.fp-cp__asguest-h { flex-wrap: wrap; }
.fp-cp__asguest-h span { flex: 1 1 100%; padding-left: 24px; color: var(--ink-2, #b9c0d4); }
.fp-cp__asguest-n { padding: 8px 10px; border-radius: 12px; background: var(--surface-3, rgba(255,255,255,.08)); }
.fp-cp__asguest-n.is-warn .pc-ico { color: var(--accent, #00b2ff); }

/* night 1000 handover (design → guest): on a desktop her page was a ~680 px phone column with empty sides (the page is a flex
   item with auto margins, so it shrank to its content). From 1100 px: the full width up to 1120 px, her head card on the left
   (it stays in view while the panels scroll), the clip, request and clips panels on the right. Her own homepage (.st) and a page
   inside the sidebar shell keep their layouts; the members' view (top nav, an 829 px column at 1440) gets the same two columns. */
@media (min-width: 1100px) {
  .fp-cp-body:not(.st-on):not(.fp-has-side) .bio.fp-cp:not(.st) { width: 100%; max-width: 1120px; }
  /* AD creator page (12.11.): the two columns are the hero over .fp-cp__cols now (below); the short sticky head card left
     empty space under it */
}

/* ==== AD creator page v2 (12.11. evening, owner «die seite sieht scheisse aus … wie bootstrap von 2011»;
   docs/fp2/night-1000-12-11/ad-creator-page.md) — templates/bio_feet.php without her homepage ([data-cpad]).
   Direction «Stage» (chosen over «Editorial sheet», mockups in the doc): no stack of bordered cards. A navy stage built from
   her best picture (blurred and graded into the reference home's navy; sharp on phones, a fanned stack of three on a desktop),
   a big Inter name, one line about her, glass fact chips, Request first; under it her clips as a rail, her photos as a bento
   grid (tap = the viewer), a profile band (About, a tag cloud, feet facts as tiles) and a closing navy band with the one ask.
   Colours: the reference home's tokens (--fr-*, set by the theme agent for members; the same values as fallbacks for guests).
   No edges (owner «ich will keine scheiss border an cards etc»): no border, outline or hairline on any card, tile, panel or
   chip; separation by surfaces, soft shadows and spacing only (the card outline of fp-system is switched off here).
   html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] = html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] (it outranks the guest h1 scale and the member sheets). */
.fp-cp__who { display: contents; }   /* her homepage (.st) keeps its grid of head lines */
html:has(.fp-cp[data-cpad]) { background: var(--fr-navy, #040a1f); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x):has(.fp-cp[data-cpad]) { background: var(--fr-day, #f4f7fe); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] { --cpx-navy: var(--fr-navy, #040a1f); --cpx-navy-2: var(--fr-navy-2, #071537); --cpx-navy-3: var(--fr-navy-3, #0b2058); --cpx-navy-4: var(--fr-navy-4, #12307a);
  --cpx-blue: var(--fr-blue, #1a5cff); --cpx-blue-2: var(--fr-blue-2, #3b7bff); --cpx-blue-3: var(--fr-blue-3, #0a43d6); --cpx-sky: var(--fr-sky, #6fd2ff);
  --cpx-day: var(--fr-day, #f4f7fe); --cpx-tint: var(--fr-tint, #eaf1ff); --cpx-tint-2: var(--fr-tint-2, #d9e6ff);
  --cpx-ink: var(--fr-ink, #0a1430); --cpx-ink-2: var(--fr-ink-2, #55617c);
  --cpx-sh: 0 1px 2px rgb(16 32 80 / .05), 0 12px 32px -10px rgb(20 56 150 / .18);
  --cpx-key: linear-gradient(180deg, #4a88ff 0%, var(--cpx-blue) 55%, #1450ef 100%);
  --cpx-head: "Inter", var(--body, system-ui), system-ui, sans-serif;
  --cpx-pad: 20px;
  max-width: none; margin: 0; padding: 0; color: var(--cpx-ink); font-family: var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main { display: block; padding: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main :is(h1, h2, h3) { font-family: var(--cpx-head) !important; text-transform: none !important; }

/* the bar: navy glass over her stage, her face and name once the stage keys are gone (bio.js .is-past) */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: 64px; margin: 0; padding: 0 var(--cpx-pad);
  background: rgb(4 10 31 / .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: #fff; box-shadow: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__logo { margin-right: auto; color: #fff !important; font-size: 24px; transition: opacity .2s ease; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__back + .fp-cp__logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar :is(.pc-logo__dot, .pc-logo svg) { color: var(--cpx-sky) !important; fill: currentColor; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar :is(.fp-cp__back, .fp-cp__login, .fp-cp__share) { min-height: 40px; border: 0 !important; background: rgb(255 255 255 / .08) !important; color: #fff !important; box-shadow: none !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar :is(.fp-cp__back, .fp-cp__login):hover, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__share:hover { background: rgb(255 255 255 / .14) !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__share { width: 40px; height: 40px; border-radius: 50%; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__nav { margin-left: auto; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__navl { color: #dbe6fb; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__navl:hover, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__navl.is-active { color: #fff; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-mini { color: #fff !important; position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 10px; max-width: 46vw; transform: translate(-50%, -50%); color: #fff; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-mini img, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-mini > span { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--cpx-navy-3); font: 800 14px/1 var(--cpx-head);
  box-shadow: 0 0 0 2px var(--cpx-sky); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-mini b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1 var(--cpx-head); letter-spacing: -.01em; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-mini__key { display: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad].is-past .cpx-mini { opacity: 1; visibility: visible; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad].is-past .fp-cp__bar .fp-cp__logo { opacity: 0; visibility: hidden; }
@media (min-width: 900px) {
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad].is-past .cpx-mini__key { display: inline-flex; animation: cpx-in .2s ease both; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar:not(:has(.fp-cp__nav)) .cpx-mini__key { margin-left: auto; }
}
@media (max-width: 899.98px) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar:has(.fp-cp__back) .cpx-mini b { display: none; } }
@keyframes cpx-in { from { opacity: 0; } to { opacity: 1; } }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad]:not([data-cpview="member"]) .fn-reqbar { transition: transform .25s ease-out; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad]:not([data-cpview="member"]) .fn-reqbar.is-away { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fn-reqbar { transition: none; } }

/* the stage */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -64px; padding-top: 64px; color: #fff; background: var(--cpx-navy);
  border-radius: 0 0 50% 50% / 0 0 36px 36px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 88% 6%, rgb(111 210 255 / .2), transparent 62%), radial-gradient(90% 40% at 50% 100%, rgb(70 130 255 / .42), transparent 70%),
    linear-gradient(180deg, rgb(4 10 31 / .5) 0%, rgb(7 21 55 / .8) 52%, rgb(11 32 88 / .94) 100%); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero.is-tone::before { background: radial-gradient(60% 70% at 92% 0%, rgb(111 210 255 / .32), transparent 62%), radial-gradient(90% 40% at 50% 100%, rgb(70 130 255 / .45), transparent 70%),
    radial-gradient(1px 1px at 14% 28%, rgb(255 255 255 / .55), transparent 60%), radial-gradient(1px 1px at 58% 22%, rgb(255 255 255 / .45), transparent 60%), radial-gradient(1px 1px at 76% 58%, rgb(255 255 255 / .4), transparent 60%),
    linear-gradient(180deg, var(--cpx-navy) 0%, var(--cpx-navy-2) 40%, var(--cpx-navy-3) 80%, var(--cpx-navy-4) 100%); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero::after { content: ""; position: absolute; inset: auto -10% -2px; height: 110px; z-index: -1; pointer-events: none; background: radial-gradient(60% 100% at 50% 100%, rgb(160 210 255 / .32), transparent 72%); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__bg { position: absolute; inset: -64px; z-index: -2; pointer-events: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.35); opacity: .62; transform: scale(1.08); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__in { position: relative; display: grid; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 28px var(--cpx-pad) 64px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero.has-pic .cpx-hero__in { padding-top: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__photo { position: relative; margin: -64px calc(-1 * var(--cpx-pad)) 0; aspect-ratio: 4 / 4.3; max-height: 66svh; overflow: hidden; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 10 31 / .35) 0%, transparent 22%, transparent 48%, rgb(7 21 55 / .72) 78%, var(--cpx-navy-2) 100%); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-id { position: relative; z-index: 2; display: grid; justify-items: start; gap: 12px; min-width: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero.has-pic .cpx-id { margin-top: -96px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-av { position: relative; display: grid; place-items: center; width: 92px; height: 92px; padding: 3px; border-radius: 50%; background: linear-gradient(140deg, var(--cpx-sky), var(--cpx-blue));
  box-shadow: 0 12px 30px -8px rgb(26 92 255 / .75); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-av > img { position: static !important; inset: auto !important; width: 100% !important; height: 100% !important; min-height: 0; aspect-ratio: 1 / 1; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-av > img, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-av > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--cpx-navy-3); border: 3px solid var(--cpx-navy-2);
  color: #fff; font: 800 38px/1 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-dot { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--fr-mint, #19c39a); box-shadow: 0 0 0 3px var(--cpx-navy-2); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-id .fp-cp__handle { display: flex; margin: 2px 0 -4px; padding: 0; background: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-id .fp-cp__verified { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: #cfe2ff; font: 600 13px/1 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-id .fp-cp__verified .pc-ico { width: 18px; height: 18px; color: var(--cpx-sky); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h1.cpx-name { margin: 0; max-width: 100%; color: #fff !important; font: 800 clamp(40px, 11.5vw, 84px)/.96 var(--cpx-head) !important; letter-spacing: -.045em !important; text-wrap: balance; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h1.cpx-name.is-long { font-size: clamp(34px, 9.4vw, 72px) !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h1.cpx-name.is-xlong { font-size: clamp(28px, 7.6vw, 58px) !important; letter-spacing: -.035em !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-line { max-width: 46ch; margin: 0; color: #d4e0f7; font: 500 16.5px/1.5 var(--cpx-head); text-wrap: pretty; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; justify-content: flex-start; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 13px; border-radius: 999px; background: rgb(255 255 255 / .1);
  box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #e6eeff; font: 600 13px/1 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-chips li .pc-ico { width: 16px; height: 16px; color: var(--cpx-sky); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-chips li.fp-cp__from { background: rgb(111 210 255 / .14); color: #fff; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-chips .fp-cp__flag { width: 18px; height: 12px; border-radius: 2px; }
/* her keys: Request first, the blue key of the reference home; Follow and Chat as glass */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys { display: flex; flex-flow: row wrap; justify-content: flex-start; justify-self: stretch; gap: 10px; width: 100%; max-width: none; margin: 8px 0 0; padding: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys > * { flex: 1 1 0; min-width: 0; margin: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys > :first-child { flex-basis: 100%; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys form { display: flex; width: auto; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys :is(.pc-btn, button.pc-btn) { width: 100%; min-height: 52px; justify-content: center; gap: 8px; padding: 0 20px; border: 0; border-radius: 999px; white-space: nowrap;
  background: rgb(255 255 255 / .12) !important; color: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 700 15.5px/1 var(--cpx-head); letter-spacing: -.01em; transition: background .15s ease, transform .15s ease; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys :is(.pc-btn, button.pc-btn):hover { background: rgb(255 255 255 / .15) !important; color: #fff !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys .pc-btn.pc-btn--primary, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close__key.pc-btn, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__key.pc-btn, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .pc-btn--primary { background: var(--cpx-key) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 14px 30px -10px rgb(26 92 255 / .8), inset 0 1px 0 rgb(255 255 255 / .25) !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys .pc-btn.pc-btn--primary:hover, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close__key.pc-btn:hover, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__key.pc-btn:hover, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .pc-btn--primary:hover { background: var(--cpx-key) !important; filter: brightness(1.07); color: #fff !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys .pc-btn > span { overflow: hidden; text-overflow: ellipsis; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys .pc-btn .pc-ico { width: 20px; height: 20px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys .pc-btn.is-on, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys .pc-btn[aria-pressed="true"] { background: rgb(111 210 255 / .18) !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-id .fp-cp__blocked { margin: 8px 0 0; padding: 14px 16px; border-radius: 18px; background: rgb(255 255 255 / .1); box-shadow: none; color: #e6eeff; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-id .fp-cp__blocked a { color: var(--cpx-sky); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack { display: none; }
@media (min-width: 640px) and (max-width: 959.98px) {
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys > :first-child { flex-basis: auto; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys > * { flex: 0 0 auto; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys :is(.pc-btn, button.pc-btn) { width: auto; }
}
@media (min-width: 960px) {
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] { --cpx-pad: 32px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero { border-radius: 0 0 50% 50% / 0 0 56px 56px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__in, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero.has-pic .cpx-hero__in { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 48px; min-height: 560px; padding: 48px var(--cpx-pad) 104px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero.is-tone .cpx-hero__in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 64px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero__photo { display: none; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-hero.has-pic .cpx-id { margin-top: 0; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-av { width: 112px; height: 112px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-av > span { font-size: 46px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-line { font-size: 18px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys > *, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys > :first-child { flex: 0 0 auto; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-keys :is(.pc-btn, button.pc-btn) { width: auto; padding: 0 24px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack { position: relative; display: block; height: 480px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack img { position: absolute; top: 0; left: 21%; width: 58%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 26px; background: var(--cpx-navy-3);
    box-shadow: 0 34px 64px -22px rgb(0 0 0 / .78), 0 0 0 6px rgb(255 255 255 / .04); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack img:nth-child(1) { z-index: 3; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack img:nth-child(2) { left: 0; top: 64px; z-index: 2; transform: rotate(-7deg); filter: brightness(.78) saturate(.9); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack img:nth-child(3) { left: auto; right: 0; top: 84px; z-index: 1; transform: rotate(6deg); filter: brightness(.68) saturate(.9); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack.n1 img { left: 18%; width: 64%; transform: rotate(2.5deg); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stack.n2 img:nth-child(1) { left: 30%; }
}

/* under the stage */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 1200px; margin: 0 auto; padding: 36px var(--cpx-pad) 24px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-sec { min-width: 0; margin: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-sec__h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h2.cpx-h2 { margin: 0; color: var(--cpx-ink); font: 800 26px/1.1 var(--cpx-head) !important; letter-spacing: -.03em !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h2.cpx-h3 { margin: 0 0 16px; color: var(--cpx-ink); font: 800 22px/1.15 var(--cpx-head) !important; letter-spacing: -.025em !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-n { color: var(--cpx-ink-2); font: 600 15px/1 var(--cpx-head); font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body { gap: 72px; padding-top: 24px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h2.cpx-h3 { font-size: 24px !important; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h2.cpx-h2 { font-size: 32px !important; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-sec__h { margin-bottom: 20px; }
}
/* her intro clip on a navy stage */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .cpx-intro .fp-cp__clip.fp-cp__panel { display: grid; justify-items: center; margin: 0; padding: 0; border-radius: 26px; overflow: hidden; outline: 0 !important;
  background: radial-gradient(70% 90% at 50% 0%, rgb(26 92 255 / .3), transparent 70%), var(--cpx-navy-2); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-intro .fp-cp__video { width: auto; max-width: 100%; height: auto; max-height: min(72svh, 600px); border-radius: 0; background: #000; }
/* clips: a rail on phones, five across on a desktop */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; margin: 0 calc(-1 * var(--cpx-pad)); padding: 4px var(--cpx-pad) 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--cpx-pad); scrollbar-width: none; list-style: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-rail::-webkit-scrollbar { display: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-rail > li { scroll-snap-align: start; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip { position: relative; display: block; width: 100%; aspect-ratio: 9 / 14; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--cpx-navy-3); box-shadow: var(--cpx-sh); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(4 10 31 / .55)); pointer-events: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip__play { position: absolute; z-index: 1; left: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff;
  background: rgb(255 255 255 / .18); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip__secs { position: absolute; z-index: 1; right: 12px; bottom: 22px; color: #fff; font: 700 12.5px/1 var(--cpx-head); text-shadow: 0 1px 2px rgb(4 10 31 / .6); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-state { position: absolute; z-index: 1; left: 10px; top: 10px; padding: 6px 10px; border-radius: 999px; background: rgb(4 10 31 / .7); color: #fff; font: 700 12px/1 var(--cpx-head); }
@media (hover: hover) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip:hover img, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-ph:hover img { transform: scale(1.05); } }
@media (min-width: 760px) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; margin: 0; padding: 4px 0 16px; } }
@media (min-width: 1100px) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-rail { grid-auto-columns: calc((100% - 4 * 14px) / 5); } }
/* photos: two across on phones (every fifth wide), a bento of four with one big tile on a desktop */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-gridbox { container-type: inline-size; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 8px) / 2 * 1.3333); grid-auto-flow: dense; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid.n1 { grid-template-columns: minmax(0, 420px); grid-auto-rows: auto; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid.n1 .cpx-tile { aspect-ratio: 4 / 5; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tile { position: relative; min-width: 0; margin: 0; border-radius: 16px; overflow: hidden; background: var(--cpx-tint); box-shadow: var(--cpx-sh); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tile.is-wide { grid-column: span 2; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-ph, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-more { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border-radius: inherit; overflow: hidden; background: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-ph img, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-more img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(4 10 31 / .28)); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-ph:hover::after { opacity: 1; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] :is(.cpx-ph, .cpx-more, .cpx-clip, .cpx-add):focus-visible { outline: 3px solid var(--cpx-blue) !important; outline-offset: 3px !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-more img { filter: blur(16px) brightness(.55) saturate(1.2); transform: scale(1.25); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-more__t { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; color: #fff; text-align: center; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-more__t b { font: 800 17px/1.2 var(--cpx-head); letter-spacing: -.015em; max-width: 14ch; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-more__t small { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--cpx-key); font: 700 14px/1 var(--cpx-head); box-shadow: 0 10px 22px -8px rgb(26 92 255 / .8); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .14); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 760px) {
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid { gap: 14px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tile { border-radius: 20px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tile.is-wide { grid-column: auto; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid:is(.n2, .n3, .n4) { grid-auto-rows: auto; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid:is(.n2, .n3, .n4) .cpx-tile { aspect-ratio: 3 / 4; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid.n2 { max-width: 760px; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid:is(.n4, .is-bento) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid.is-bento { grid-auto-rows: calc((100cqw - 3 * 14px) / 4 * 1.3333); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-grid.is-bento .cpx-tile.is-big { grid-column: span 2; grid-row: span 2; }
}
/* a guest: her clips (or photos) wait behind the free sign-up — four blurred tiles of a picture he already sees */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: linear-gradient(160deg, var(--cpx-navy-2), var(--cpx-navy-3) 60%, var(--cpx-navy-4)); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px; list-style: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles li { aspect-ratio: 9 / 14; border-radius: 16px; overflow: hidden; background: radial-gradient(80% 60% at 30% 20%, rgb(111 210 255 / .3), transparent 70%), rgb(255 255 255 / .05); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.62) saturate(1.2); transform: scale(1.3); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles li:nth-child(2) img { object-position: 20% 30%; } html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles li:nth-child(3) img { object-position: 80% 70%; } html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles li:nth-child(4) img { object-position: 50% 100%; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__t { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; text-align: center; color: #fff;
  background: radial-gradient(60% 70% at 50% 50%, rgb(4 10 31 / .55), transparent 80%); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__t .fn-cc__lock { display: block; margin: 0; padding: 0; background: none; color: #fff; font: 800 20px/1.25 var(--cpx-head); letter-spacing: -.02em; max-width: 22ch; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__key.pc-btn { min-height: 48px; padding: 0 26px; border-radius: 999px; font: 700 15px/1 var(--cpx-head); }
@media (max-width: 639.98px) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles li:nth-child(n+3) { display: none; } html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-lock__tiles li { aspect-ratio: 3 / 4; } }
/* her own empty page: the slots where her pictures go, and the way to add them */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty { display: grid; gap: 20px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .fp-cp__slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .fp-cp__slots li { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 18px; color: var(--cpx-blue); background: linear-gradient(160deg, #fff, var(--cpx-tint)); box-shadow: var(--cpx-sh); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty__t { display: grid; justify-items: start; gap: 10px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty__t p { margin: 0; max-width: 52ch; color: var(--cpx-ink-2); font: 500 15.5px/1.55 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .pc-btn--primary { min-height: 50px; padding: 0 24px; border-radius: 999px; }
@media (max-width: 639.98px) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .fp-cp__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-empty .fp-cp__slots li:nth-child(n+3) { display: none; } }
/* the profile band: About and what she creates, her facts as tiles */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-prof { display: grid; gap: 40px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-prof__main { display: grid; gap: 32px; align-content: start; min-width: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-about { display: grid; gap: 14px; margin: 0; padding: 0; background: none; outline: 0 !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-about__t { max-width: 60ch; color: var(--cpx-ink); font: 500 18px/1.6 var(--cpx-head); letter-spacing: -.008em; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags .bio-spec__list, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags li.bio-chip:not(:has(> a)) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 17px; border-radius: 999px; background: var(--cpx-tint); color: var(--cpx-blue-3); font: 650 15px/1 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags li.bio-chip:has(> a) { display: contents; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags li.bio-chip > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 17px; border-radius: 999px; background: var(--cpx-tint); color: var(--cpx-blue-3); font: 650 15px/1 var(--cpx-head); text-decoration: none; transition: background .15s ease; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags li.bio-chip > a:hover { background: var(--cpx-tint-2); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags li.bio-chip > a::before { content: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-tags li.bio-chip :is(small, .bio-chip__d, p) { display: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; background: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stat { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: var(--cpx-sh); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stat.is-feet { background: linear-gradient(150deg, #fff 30%, var(--cpx-tint)); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stat dt { margin: 0; color: var(--cpx-ink-2); font: 600 12.5px/1.2 var(--cpx-head); text-align: left; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stat:not(.is-feet) dd { font-size: 17px !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-stat dd { margin: 0; color: var(--cpx-ink); font: 800 21px/1.15 var(--cpx-head); letter-spacing: -.02em; text-align: left; overflow-wrap: anywhere; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-add { display: flex; align-items: center; gap: 14px; margin: 10px 0 0; padding: 16px 18px; border-radius: 18px; background: #fff; color: var(--cpx-ink); text-decoration: none; box-shadow: var(--cpx-sh); transition: background .15s ease; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-add:hover { background: var(--cpx-tint); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-add > span:last-child { display: grid; gap: 3px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-add b { font: 700 15px/1.25 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-add small { color: var(--cpx-ink-2); font: 500 13.5px/1.4 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-add__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; color: var(--cpx-blue); background: linear-gradient(150deg, #f4f8ff, var(--cpx-tint-2)); }
@media (min-width: 960px) {
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-prof { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-prof:not(:has(.cpx-prof__side)) { grid-template-columns: minmax(0, 1fr); }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-about__t { font-size: 20px; }
}
/* her old priced sets, reviews, links, the request card: light cards, the grey 50 % edge (fp-system), no inner lines */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body :is(.cpx-legacy, .cpx-more-sec) { display: grid; gap: 20px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .fp-cp__panel, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share { outline: 0 !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .fp-cp__panel { display: grid; gap: 14px; margin: 0; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--cpx-sh); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .fp-cp__panel .fp-cp__h2 { margin: 0; font: 800 20px/1.2 var(--cpx-head) !important; letter-spacing: -.02em !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .fp-cp__quotes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .fp-cp__quotes blockquote { position: relative; margin: 0; padding: 18px 20px 18px 44px; border-radius: 18px; background: var(--cpx-tint); color: var(--cpx-ink); font: 600 16px/1.5 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-body .fp-cp__quotes blockquote::before { content: "\201C"; position: absolute; left: 14px; top: 6px; color: var(--cpx-blue); font: 800 40px/1 var(--cpx-head); opacity: .5; }
/* share (her own page): the QR beside her address */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share { display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--cpx-sh); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share .fn-qr { flex: none; width: 104px; padding: 6px; border-radius: 14px; background: #fff; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share__t { display: grid; gap: 8px; min-width: 0; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share__t .cpx-h3 { margin: 0 !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share .fn-share__addr { margin: 0; color: var(--cpx-ink-2); font: 500 15px/1.35 var(--cpx-head); overflow-wrap: anywhere; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share .fn-share__addr b { color: var(--cpx-ink); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share .fn-share__acts { display: flex; flex-wrap: wrap; gap: 8px; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-share .fn-share__done:empty { display: none; }
/* the closing band: the one ask on the home's navy */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close { position: relative; isolation: isolate; display: grid; gap: 20px; justify-items: start; overflow: hidden; margin: 8px 0 0; padding: 36px 24px; border-radius: 30px; color: #fff;
  background: linear-gradient(160deg, var(--cpx-navy-2), var(--cpx-navy-3) 60%, var(--cpx-navy-4)); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -220px; top: -280px; border-radius: 50%; background: radial-gradient(circle, rgb(111 210 255 / .45), rgb(26 92 255 / .16) 55%, transparent 72%); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] main.fp-cp__main h2.cpx-close__h { margin: 0 0 8px; color: #fff !important; font: 800 clamp(28px, 7vw, 44px)/1.05 var(--cpx-head) !important; letter-spacing: -.035em !important; max-width: 16ch; text-wrap: balance; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close p { margin: 0; max-width: 44ch; color: #c9d6f2; font: 500 16px/1.5 var(--cpx-head); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close__key.pc-btn { min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 15.5px/1 var(--cpx-head); }
@media (min-width: 960px) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-close { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 56px; } }
/* the footer on the day ground */
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__foot { max-width: 1200px; margin: 0 auto; padding: 24px var(--cpx-pad) 40px; color: var(--cpx-ink-2); background: none; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__foot a { color: var(--cpx-ink-2); }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__foot .fp-cp__onward { color: var(--cpx-blue-3) !important; font-weight: 700; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] :is(.fp-cp__foot .fp-cp__create, .cpx-share .fn-share__acts .pc-btn).pc-btn { background: var(--cpx-tint) !important; color: var(--cpx-blue-3) !important; border: 0 !important; box-shadow: none !important; }
html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] :is(.fp-cp__foot .fp-cp__create, .cpx-share .fn-share__acts .pc-btn).pc-btn:hover { background: var(--cpx-tint-2) !important; }
@media (max-width: 599.98px) {   /* the back key keeps its arrow only: «‹ Find creators» ran into the logo at 390 px */
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__back { width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .fp-cp__bar .fp-cp__back > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] :is(.cpx-ph img, .cpx-clip img, .cpx-mini, .cpx-mini__key, .fp-cp__logo) { transition: none !important; animation: none !important; } html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-ph:hover img, html body.pc-root.pc-root.fp-cp-body:not(#fp-x) .fp-cp[data-cpad] .cpx-clip:hover img { transform: none; } }