/* Home 2 and the /kink-id/ page. Ported from the partner's original landing page styles.
   Fonts are the site's self-hosted Inter and Viga. Nothing here moves under the pointer: hover changes colour and glow only. */
.is-home2 { --ink: #f7fafc; --cyan: #79e8ff; --bg2: #080c12; --h2-grid: 88rem; --h2-gutter: clamp(16px, 3vw, 32px); }
html:has(.is-home2) { background: #080D11; }
/* One centred grid for the header, every section and the footer: a gutter (1rem on a phone) and a centred maximum width. */
.is-home2 .site-header { --nav-max: var(--h2-grid); --nav-gutter: var(--h2-gutter); }
.is-home2 .site-footer { max-width: var(--h2-grid); padding-inline: var(--h2-gutter); }
.is-home2 .site-footer { position: relative; z-index: 1; background: none; margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* The background is the shared moving petrol canvas (.ambient, assets/petrol-bg.js); the home page adds no layer of its own. */

/* Page: the same centred grid as the header and footer; nothing runs to the screen edge */
main.h2 { --fc: 6; --h2-gap: clamp(.875rem, 1.7vw, 1.25rem); display: block; max-width: var(--h2-grid); padding: 2.75rem var(--h2-gutter) 0; overflow-x: clip; }
/* Columns of the card rail and of the faded rows: the grid always fits, nothing scrolls or runs past the gutter. */
@media (max-width: 74.99rem) { main.h2 { --fc: 3; } }
@media (max-width: 47.99rem) { main.h2 { --fc: 2; } }
.h2-hero { --hero-w: min(100%, 28rem); display: grid; justify-items: center; text-align: center; }
.h2-hero > * { width: var(--hero-w); }
.h2-brand { display: flex; justify-content: center; align-items: center; gap: 1.25rem; text-align: left; }
.h2-mark { display: block; width: clamp(5.2rem, 4.1rem + 3vw, 6.5rem); height: auto; aspect-ratio: 1; flex: 0 0 auto; filter: drop-shadow(0 0 .9rem rgba(0, 181, 238, .22)); }
.h2-brand-copy { display: flex; flex-direction: column; align-items: flex-start; }
.h2-brand-copy p { margin: 0; }
.h2 .eyebrow { margin: 0 0 0.4375rem; color: rgba(185, 232, 247, .72); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.h2 .brand-name { margin: 0; font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: clamp(3.3rem, 5vw, 4.65rem); font-weight: 600; line-height: .84; letter-spacing: -.075em; text-shadow: 0 0 .5px currentColor; }
.h2 .tagline { margin-top: 0.625rem; font-size: var(--fs-subhead); font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }

.h2-discovery { position: relative; z-index: 1; margin-top: clamp(2.4375rem, 6.7vw, 4.9375rem); }
.h2-rail { display: grid; grid-template-columns: repeat(var(--fc), minmax(0, 1fr)); gap: var(--h2-gap); margin: 0; padding: 0 0 1.5rem; list-style: none; }
.h2-rail > li { min-width: 0; }

/* Cards */
.h2-card { position: relative; display: block; width: 100%; aspect-ratio: .7; overflow: hidden; isolation: isolate; border: 1px solid rgba(202, 229, 238, .25); border-radius: 2rem; background: #111b24; color: var(--ink); text-align: left; text-decoration: none; box-shadow: 0 1.0625rem 2rem rgba(0, 0, 0, .23), inset 0 1px rgba(255, 255, 255, .1); transition: border-color .3s ease, box-shadow .3s ease; }
.h2-card:hover, .h2-card:has(.pcard-open:hover) { border-color: rgba(108, 222, 252, .68); box-shadow: 0 1.4375rem 2.5rem rgba(0, 0, 0, .32), 0 0 1.6875rem rgba(0, 162, 229, .15), inset 0 1px rgba(255, 255, 255, .13); }
.h2-card:focus-visible, .h2-card:has(.pcard-open:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 0.3125rem; }
.h2-card .pcard-open { border-radius: 2rem; }
.h2-card .card-visual { position: absolute; inset: 0; background: linear-gradient(145deg, #162a36, #0c171f 68%); }
.card-visual::before, .card-visual::after { position: absolute; border-radius: 100%; content: ""; filter: blur(3px); }
.card-visual::before { top: 8%; left: -36%; width: 150%; height: 57%; background: radial-gradient(ellipse, rgba(126, 232, 255, .24), transparent 67%); transform: rotate(-21deg); }
.card-visual::after { right: -58%; bottom: 19%; width: 145%; height: 40%; background: rgba(1, 118, 184, .28); transform: rotate(41deg); }
.placeholder-label { position: absolute; z-index: 1; top: 1.4375rem; left: 1.5rem; color: rgba(223, 247, 255, .72); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .18em; }
.placeholder-orbit { position: absolute; z-index: 1; top: 50%; left: 50%; width: 7.75rem; height: 7.75rem; border: 1px solid rgba(186, 234, 249, .14); border-radius: 50%; box-shadow: 0 0 0 1.25rem rgba(142, 218, 243, .03), 0 0 0 2.75rem rgba(142, 218, 243, .025); transform: translate(-50%, -58%); }
.h2-card.tone-steel .card-visual { background: linear-gradient(145deg, #495864, #17212a 57%, #10161c); }
.h2-card.tone-steel .card-visual::before { background: radial-gradient(ellipse, rgba(241, 246, 247, .3), transparent 61%); }
.h2-card.tone-cyan .card-visual { background: linear-gradient(151deg, #053f62, #082939 59%, #10171d); }
.h2-card.tone-cyan .card-visual::after { background: rgba(0, 189, 240, .35); }
.h2-card.tone-silver .card-visual { background: linear-gradient(136deg, #9ca9a9, #34444d 47%, #10171f); }
.h2-card.tone-silver .card-visual::before { background: radial-gradient(ellipse, rgba(255, 255, 255, .48), transparent 63%); }
.h2-card.tone-ink .card-visual { background: linear-gradient(151deg, #121821, #060b11 62%, #17222b); }
.h2-card.tone-ink .card-visual::after { background: rgba(100, 129, 142, .38); }
.h2-card .profile-info { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; min-height: 27%; padding: 1.25rem 1.25rem 1.0625rem; border: 1px solid rgba(237, 247, 250, .17); border-bottom: 0; border-radius: 1.6875rem 1.6875rem 0 0; background: linear-gradient(110deg, rgba(13, 28, 38, .95), rgba(18, 20, 25, .87)); box-shadow: 0 -9px 1.75rem rgba(0, 0, 0, .17); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.h2-card .profile-info h2 { margin: 0; font-size: clamp(1.05rem, 1.45vw, 1.46rem); font-weight: 600; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.h2-card .profile-info h2 span { margin-right: 0.5rem; }
.h2-card .profile-info p { margin: 0.4375rem 0 0; overflow: hidden; color: #d2d9df; font-size: clamp(var(--fs-footnote), .95vw, var(--fs-subhead)); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.results { margin: 0.5625rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.3125rem; }
.results li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; color: #d2d9df; font-size: clamp(var(--fs-footnote), .95vw, var(--fs-subhead)); line-height: 1.1; }
.results span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results b { flex: none; color: #9cf0ff; font-weight: 600; }
.add-visual { background: linear-gradient(151deg, #123d59 0%, #092a40 55%, #10161b 100%) !important; }
.add-visual::before { top: 20%; left: 50%; width: 11.375rem; height: 11.375rem; background: radial-gradient(circle at 50% 40%, rgba(137, 225, 255, .3), rgba(5, 112, 166, .12) 58%, transparent 59%); transform: translateX(-50%); }
.add-symbol { position: absolute; z-index: 2; top: 43%; left: 50%; color: rgba(245, 251, 253, .85); font-size: 5.5rem; font-weight: 400; line-height: .5; text-shadow: 0 0 1.625rem rgba(213, 246, 255, .3); transform: translate(-50%, -50%); }
.ghost-mark { position: absolute; bottom: 16%; left: 50%; width: 8.125rem; height: 8.125rem; border: 1px solid rgba(134, 224, 252, .17); border-radius: 48% 48% 35% 35%; opacity: .55; transform: translateX(-50%); }

.h2-note { margin: 0; padding: 0; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Signup: the hero's single primary action, directly under the brand and tagline, centred on the hero axis at every width.
   No panel or band of its own, so the background runs on behind it. */
.h2-signup { margin: 2rem auto 0; padding: 0; text-align: center; }

/* Decorative rows under the rail: the same cards and columns, each row more blurred and faded, dissolving into the background.
   Static, aria-hidden and inert. The blur is on three row elements only (their cards drop their own backdrop blur). */
.h2-stage { container-type: inline-size; }
.h2-fade, .h2-about { --fw: calc((100cqw - (var(--fc) - 1) * var(--h2-gap)) / var(--fc)); --rh: calc(var(--fw) / .7); }
.h2-fade { display: grid; align-content: start; gap: var(--h2-gap); margin-inline: -2.5rem; padding-inline: 2.5rem; height: calc(var(--rh) * 1.45 + var(--h2-gap)); pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 22%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 22%, transparent 100%); }
.h2-fade-row { display: grid; grid-template-columns: repeat(var(--fc), minmax(0, 1fr)); gap: var(--h2-gap); transform: translateZ(0); }
.h2-fade-row:nth-child(1) { opacity: .7; filter: blur(1.2px); }
.h2-fade-row:nth-child(2) { opacity: .4; filter: blur(4.5px); }
.h2-fade-row:nth-child(3) { opacity: .18; filter: blur(9px); }
.h2-fade .h2-card { width: 100%; box-shadow: none; }
.h2-fade .profile-info { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
@media (max-width: 74.99rem) {
  .h2-fade-row > :nth-child(n+4) { display: none; }
  .h2-fade-row:nth-child(3) { display: none; }
}
@media (max-width: 47.99rem) {
  .h2-fade-row > :nth-child(n+3) { display: none; }
}
@media (min-width: 75rem) {
  .h2-fade { height: calc(var(--rh) * 2.6 + var(--h2-gap) * 2); }
}
/* The former About page sits BELOW the faded rows, which fade out on their own with nothing over them. No box, no panel: the text is set
   directly on the page background (the moving petrol canvas stays dark, so the light text keeps AA contrast). Same grid and gutters as the rest. */
.h2-about { position: relative; margin-top: calc(var(--rh) * -.42); padding-top: 0; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.h2-about { --about-w: 62rem; }
/* The statement that opens the About part: the biggest text after the hero, then the body-large lines, then the two buttons. */
.h2-about-intro { position: relative; isolation: isolate; padding-block: clamp(.5rem, 2vw, 1.5rem) clamp(2.5rem, 5vw, 4.5rem); text-align: center; }
.h2-about .lead { max-width: 24ch; margin: 0 auto; color: var(--ink); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.h2-about .age-note, .h2-about .trust { max-width: 36rem; margin: 1rem auto 0; padding: 0; border: 0; background: none; color: #d2d9df; font-size: 1.2rem; line-height: 1.45; text-wrap: pretty; }
.h2-about .age-note { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.h2-about .age-note strong { display: inline-block; margin-right: .4rem; padding: .05rem .6rem; border: 1px solid var(--control-border); border-radius: 999px; color: var(--ink); font-size: var(--fs-subhead); font-weight: 600; line-height: 1.5; vertical-align: .08em; }
.h2-about .trust a { white-space: nowrap; }
.h2-about-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }
.h2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.6rem; border: 1px solid transparent; border-radius: 999px; font-size: var(--fs-callout); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease; }
.h2-btn-fill { border-color: var(--accent); background: var(--fill); color: var(--on-fill); }
.h2-btn-fill:hover { background: var(--fill-pressed); color: var(--on-fill); }
.h2-btn-glass { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--text); }
.h2-btn-glass:hover { background: rgba(255, 255, 255, .15); color: var(--text); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .h2-btn-glass { -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } }
.h2-about > section { max-width: var(--about-w); margin-inline: auto; }
.h2-about > section + section { margin-top: clamp(2rem, 4.5vw, 3.5rem); }
.h2-about h2 { margin: 0 0 .5rem; color: var(--ink); text-align: left; }
.h2-about .lead-sm { max-width: 46rem; margin: 0 0 1rem; color: #d2d9df; text-align: left; }
.h2-about .glass { background: rgba(8, 13, 17, .78); }
.h2-about .tile { background: rgba(8, 13, 17, .72); }
.h2-about .tile span, .h2-about .glass p, .h2-about .faq-a p { color: #d2d9df; }
.h2-signup-title { margin: 0 0 .6rem; font-size: var(--fs-subhead); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.h2-signup .wl-form { max-width: none; margin: 0; text-align: left; }
/* One slim glass capsule: hairline border, quiet fill, the solid petrol button inside with a concentric radius (no gradient, glow or shadow). */
.email-field { display: flex; align-items: stretch; height: 3.15rem; padding: .25rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .05); transition: border-color .2s ease, box-shadow .2s ease; }
.email-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(127, 217, 226, .28); }
.email-field input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 .5rem 0 1rem; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: max(1rem, 16px); }
.email-field input::placeholder { color: #9aa8b1; }
.email-field input[aria-invalid="true"] { color: #ffb9b9; }
.email-field button { flex: 0 0 auto; padding: 0 1.15rem; border: 0; border-radius: 999px; background: var(--fill); color: var(--on-fill); font: inherit; font-size: var(--fs-subhead); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s ease; }
.email-field button:hover:not(:disabled) { background: var(--fill-pressed); }
.email-field button:disabled { cursor: default; opacity: .75; }
/* Consent: two small refined checkboxes (separate legal choices, both required, never prefilled). With the script they slide in once the form is touched;
   without it, or with reduced motion, they are always shown. They stay in the accessibility tree either way. */
.wl-consents { display: grid; grid-template-rows: 1fr; }
.wl-consents-in { min-height: 0; padding-top: .35rem; }
.js .wl-form:not(.is-open) .wl-consents { grid-template-rows: 0fr; opacity: 0; }
.js .wl-form:not(.is-open) .wl-consents-in { overflow: hidden; padding-top: 0; }
@media (prefers-reduced-motion: no-preference) { .wl-consents { transition: grid-template-rows .3s ease, opacity .3s ease; } }
@media (prefers-reduced-motion: reduce) { .js .wl-form:not(.is-open) .wl-consents { grid-template-rows: 1fr; opacity: 1; } .js .wl-form:not(.is-open) .wl-consents-in { overflow: visible; padding-top: .35rem; } }
.h2-signup .check { gap: .6rem; align-items: flex-start; margin: .5rem 0 0; font-size: var(--fs-subhead); line-height: 1.4; color: var(--muted); }
.h2-signup .check input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: clamp(16px, 1.1rem, 18px); height: clamp(16px, 1.1rem, 18px); margin: .08rem 0 0; padding: 0; border: 1px solid var(--control-border); border-radius: 4px; background: transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.h2-signup .check input:checked { border-color: var(--accent); background: var(--fill); }
.h2-signup .check input:checked::after { content: ""; position: absolute; left: 33%; top: 12%; width: 28%; height: 56%; border: solid var(--text); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.h2-signup .check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.h2-signup .check span { max-width: none; }
/* Privacy: one quiet left-aligned block on the field's edge. A short line, then a small disclosure row that opens the full wording in a faint inset. */
.wl-short { margin: .8rem 0 0; font-size: var(--fs-footnote); line-height: 1.45; color: var(--muted); text-align: left; }
.wl-more { margin-top: .15rem; text-align: left; interpolate-size: allow-keywords; }
.wl-more summary { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem 0; font-size: var(--fs-footnote); line-height: 1.3; color: var(--muted); text-decoration: none; cursor: pointer; list-style: none; }
.wl-more summary::-webkit-details-marker { display: none; }
.wl-more summary::after { content: ""; width: .4rem; height: .4rem; margin-top: -.15rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.wl-more[open] summary::after { margin-top: .15rem; transform: rotate(-135deg); }
.wl-more summary:hover { color: var(--text); }
.wl-more summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.h2-signup .wl-more .hint { margin: .25rem 0 0; padding: .8rem .9rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: var(--fs-footnote); line-height: 1.5; color: var(--muted); text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .wl-more summary::after { transition: transform .25s ease, margin-top .25s ease; }
  @supports selector(::details-content) {
    .wl-more::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .3s ease, opacity .3s ease, content-visibility .3s allow-discrete; }
    .wl-more[open]::details-content { block-size: auto; opacity: 1; }
  }
}
.h2-signup .wl-status { font-size: var(--fs-footnote); text-align: center; }
.h2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* KINK ID page */
.kid-page { position: relative; width: 100%; max-width: 46rem; margin: var(--space-3) 0 0; border: 1px solid rgba(195, 205, 211, .3); border-radius: 1.5rem; background: linear-gradient(140deg, #12313B, #0b1118 62%); }
.kid-page .dlg-pad { padding: 1.25rem 1.25rem 1.5rem; }

/* ---- Opened sample profile: the app's profile screen (frontend/screens/ProfileScreen.tsx) in plain HTML and CSS ----
   Sizes, weights, colours and spacing are the app's tokens (frontend/theme/tokens.ts): hero 4:5 capped at 85% of the height, Viga name 34,
   Inter 500 meta 15, 44px Chat pill + 44px circle actions with 11px labels, 12px caps section labels, r12 cards, 8px kink bars.
   Phone width: a full-screen sheet. From 38rem: a centred panel at phone proportions. */
.dlg.pf-dlg { --pf-h: 100dvh; --pf-subtle: #2C383F; --pf-scrim: rgba(19, 25, 29, .6); --pf-tertiary: #BDC9D1; --pf-info: #7DB8E8; --pf-online: #4ADE80;
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; overscroll-behavior: contain;
  background: linear-gradient(180deg, #000 0%, #0a171d 50%, #080D11 100%); color: var(--text); font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: var(--fs-subhead); line-height: 1.3; box-shadow: none; }
@media (min-width: 38rem) {
  .dlg.pf-dlg { --pf-h: min(58.25rem, calc(100dvh - 3rem)); width: 26.875rem; height: var(--pf-h); margin: auto; border: 1px solid rgba(195, 205, 211, .3); border-radius: 28px; box-shadow: 0 30px 100px rgba(0, 0, 0, .6); }
}
body:has(.pf-dlg[open]) { overflow: hidden; }
:where(.pf-dlg, .pd-profile) h2, :where(.pf-dlg, .pd-profile) h3, :where(.pf-dlg, .pd-profile) p { margin: 0; }
.pf-dlg button { font-family: Inter, "Inter Fallback", system-ui, sans-serif; }
.ion { font-family: Ionicons; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: 0; display: inline-block; -webkit-font-smoothing: antialiased; }
.pf-close-row { position: absolute; top: 0; right: 0; z-index: 30; height: 0; }
.pf-dlg .dlg-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; left: auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(19, 25, 29, .6); color: var(--text); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pf-dlg .dlg-close { background: rgba(19, 25, 29, .42); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } }
.pf-dlg .dlg-close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pf-dlg .dlg-close:hover { border-color: var(--accent); }
.pf-dlg .dlg-close::after { position: absolute; inset: -2px; content: ""; }
.pf-hero { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: calc(var(--pf-h) * .85); overflow: hidden; background: var(--bg); }
.pf-hero .pcard-visual { position: absolute; inset: 0; }
.pf-scrim-b { position: absolute; right: 0; bottom: 0; left: 0; height: 40%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72)); pointer-events: none; }
.pf-scrim-t { position: absolute; top: 0; right: 0; left: 0; height: 64px; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); pointer-events: none; }
.pf-inapp { position: absolute; top: 20px; left: 16px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--pf-scrim); color: var(--text); font-size: var(--fs-caption); font-weight: 600; }
.pf-inapp .ion { font-size: 12px; }
.pf-info { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; padding: 20px; }
.pf-name-row { display: flex; align-items: center; }
.pf-dlg .pf-name, .pd-profile .pf-name { font-family: Viga, Inter, sans-serif; font-size: var(--fs-display); font-weight: 400; line-height: 1.2; letter-spacing: .4px; color: var(--text); overflow-wrap: anywhere; }
.pf-verified { display: inline-flex; margin-left: 6px; color: var(--pf-info); font-size: 22px; line-height: 1; }
.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-user { margin-bottom: 2px; font-weight: 500; color: var(--text); }
.pf-meta { font-weight: 500; color: var(--muted); }
.pf-online { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-footnote); font-weight: 500; color: var(--muted); }
.pf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-tertiary); }
.pf-dot.is-on { background: var(--pf-online); }
.pf-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.pf-chat { flex: 1 1 auto; min-width: 0; max-width: 420px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 999px; background: var(--fill); color: var(--on-fill); font-size: var(--fs-subhead); font-weight: 600; cursor: pointer; }
.pf-chat .ion { font-size: 16px; }
.pf-circle-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; }
.pf-circle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--pf-subtle); border-radius: 50%; background: var(--pf-scrim); color: var(--text); font-size: 20px; cursor: pointer; }
.pf-circle-l { font-size: var(--fs-caption); font-weight: 500; line-height: 13px; text-align: center; color: var(--muted); }
.pf-chat:hover, .pf-circle:hover { border-color: var(--accent); }
.pf-sections { padding: 24px 16px calc(48px + env(safe-area-inset-bottom, 0px)); }
.pf-section { margin-bottom: 24px; }
.pf-label { margin: 0 0 8px 2px; font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: var(--fs-caption); font-weight: 600; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; color: var(--pf-tertiary); }
.pf-card { border: 1px solid var(--pf-subtle); border-radius: 12px; background: var(--surface); }
.pf-pad { padding: 16px; }
.pf-body { font-size: var(--fs-subhead); line-height: 22px; color: var(--muted); }
.pf-arch { display: grid; gap: 6px; margin-bottom: 12px; }
.pf-arch-l { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--text); }
.pf-arch-l span + span { flex: none; color: var(--muted); }
.pf-track { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--raised); overflow: hidden; }
.pf-track::-webkit-progress-bar { background: var(--raised); border-radius: 4px; }
.pf-track::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.pf-track::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { padding: 6px 12px; border: 1px solid var(--pf-subtle); border-radius: 999px; background: var(--raised); font-size: var(--fs-footnote); font-weight: 500; color: var(--text); }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 12px 16px; }
.pf-row-div { border-top: 1px solid var(--pf-subtle); }
.pf-row-l { font-size: var(--fs-footnote); font-weight: 500; color: var(--pf-tertiary); }
.pf-row-v { font-weight: 600; text-align: right; color: var(--text); }
.pf-badge { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(19, 25, 29, .6); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
/* The reply to an action press: a glass toast pinned near the bottom edge of the dialog (not content), shown for a few seconds. */
.pf-toast-row { position: absolute; bottom: 0; left: 0; right: 0; z-index: 30; height: 0; }
.pf-toast { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); left: 16px; display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(19, 25, 29, .92); color: var(--text); font-size: var(--fs-subhead); line-height: 1.35; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pf-toast { background: rgba(19, 25, 29, .7); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } }
.pf-toast.is-on { display: flex; }
.pf-toast a { font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .pf-toast.is-on { animation: rise .25s ease-out both; } }

/* ---- Profile setup wizard (/kink-id/): the app's onboarding steps, one per screen, in a phone-proportioned card. Made-up data only. ---- */
.page .pd-h1 { margin: 0; font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: var(--fs-headline); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.pd { display: grid; justify-items: center; }
.pd-intro { text-align: center; max-width: 34rem; }
.pd-lead { margin: .35rem 0 0; color: var(--muted); font-size: var(--fs-subhead); line-height: var(--lh-body); }
.pd-card { --pf-h: 52rem; --pf-subtle: #2C383F; --pf-scrim: rgba(19, 25, 29, .6); --pf-tertiary: #BDC9D1; --pf-info: #7DB8E8; --pf-online: #4ADE80; position: relative; display: flex; flex-direction: column; width: min(100%, 390px); margin: 1.5rem auto 0; overflow: hidden; border: 1px solid rgba(195, 205, 211, .3); border-radius: 28px; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(10, 23, 29, .62) 50%, rgba(8, 13, 17, .7) 100%); box-shadow: 0 30px 100px rgba(0, 0, 0, .45); color: var(--text); }
/* A real phone, not scaled by the fluid root: 390px wide at every desktop width; taller steps scroll inside the card so Continue stays visible. */
@media (min-width: 38rem) { .pd-card { max-height: max(480px, calc(100dvh - 232px)); min-height: 480px; } }
@media (max-width: 37.99rem) { .pd-card { min-height: 28rem; border-radius: 24px; } }
.pd-card { scroll-margin-top: calc(var(--header-h) + .5rem); }
@media (prefers-reduced-motion: no-preference) { .pd-card { transition: height .35s cubic-bezier(.2, .8, .2, 1); } }
.pd-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.pd-top { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; padding: 14px 14px 0; }
.pd-back { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--pf-subtle); border-radius: 50%; background: var(--pf-scrim); color: var(--text); font-size: 22px; cursor: pointer; }
.pd-back[hidden] { display: none; }
.pd-back:hover { border-color: var(--accent); }
.pd-progress { display: flex; justify-content: center; gap: 8px; grid-column: 2; }
.pd-seg { width: 28px; height: 4px; border-radius: 2px; background: var(--border); }
.pd-seg.is-on { background: var(--accent); }
.pd-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 24px 24px; overscroll-behavior: contain; }
.pd-step[hidden] { display: none; }
.pd-title { margin: 24px 0 0; font-family: Viga, Inter, sans-serif; font-size: var(--fs-title); font-weight: 400; line-height: 1.2; letter-spacing: .5px; text-align: center; text-transform: uppercase; color: var(--text); }
.pd-title:focus { outline: none; }
.pd-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.pd-sub { margin: 8px 0 0; font-size: var(--fs-subhead); line-height: var(--lh-body); text-align: center; color: var(--muted); }
.pd-panel { display: grid; gap: 24px; margin-top: 20px; }
.pd-field { display: grid; gap: 0; }
.pd-flabel, .pd-label { margin: 0 0 6px; font-size: var(--fs-footnote); font-weight: 500; color: var(--muted); }
.pd-label { margin: 0 0 8px 2px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--pf-tertiary); }
.pd-input { width: 100%; min-height: 52px; padding: 14px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-callout); line-height: 1.3; }
.pd-input::placeholder { color: var(--pf-tertiary); opacity: 1; }
.pd-input:focus { outline: none; border-color: var(--accent); }
.pd-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pd-input[aria-invalid="true"] { border-color: #F26D6A; }
.pd-area { min-height: 8.5rem; resize: vertical; }
.pd-pick { position: relative; }
.pd-pick select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 52px; padding: 14px 44px 14px 14px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-callout); }
.pd-pick select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pd-pick::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.pd-help { margin: 6px 0 0; font-size: var(--fs-footnote); line-height: 1.45; color: var(--muted); }
.pd-ferr { margin: 6px 0 0; font-size: var(--fs-footnote); font-weight: 500; line-height: 1.4; color: #FF9C99; }
.pd-ferr:empty { display: none; }
.pd-check { display: flex; align-items: flex-start; gap: .6rem; margin: 14px 0 0; font-size: var(--fs-subhead); line-height: 1.4; color: var(--text); cursor: pointer; }
.pd-check input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 1.1rem; height: 1.1rem; margin: .12rem 0 0; padding: 0; border: 1px solid var(--control-border); border-radius: 4px; background: transparent; cursor: pointer; }
.pd-check input:checked { border-color: var(--accent); background: var(--fill); }
.pd-check input:checked::after { content: ""; position: absolute; left: 33%; top: 12%; width: 28%; height: 56%; border: solid var(--text); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pd-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pd-section { display: block; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-card .chip { margin: 0 !important; }
.pd-card .chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; border: 1px solid var(--control-border); border-radius: 999px; background: transparent; color: var(--muted); font-size: var(--fs-footnote); font-weight: 500; line-height: 1.25; }
.pd-card .chip input { inset: -4px 0; height: calc(100% + 8px); }
.pd-card .chip input:checked + span { border-color: var(--accent); background: var(--accent); color: #080D11; font-weight: 500; }
.pd-card .chip input:checked + span::before { content: none; }
.pd-card .chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.pd-card .chip input:disabled + span { opacity: .45; }
.pd-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pd-search .pd-input { min-height: 44px; padding: 8px 12px; background: var(--raised); border-color: var(--pf-subtle); font-size: var(--fs-subhead); }
.pd-count { flex: none; font-size: var(--fs-footnote); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.pd-note { margin: 0 0 8px; font-size: var(--fs-footnote); color: var(--accent); }
.pd-note:empty { display: none; }
.pd-group { border-top: 1px solid var(--pf-subtle); }
.pd-group[hidden] { display: none; }
.pd-group summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; list-style: none; cursor: pointer; }
.pd-group summary::-webkit-details-marker { display: none; }
.pd-group summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 4px 0 2px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pd-group[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pd-group-name { flex: 1; font-size: var(--fs-subhead); font-weight: 500; color: var(--text); }
.pd-group-count { font-size: var(--fs-footnote); font-variant-numeric: tabular-nums; color: var(--muted); }
.pd-group .pd-chips { padding: 4px 0 14px; }
.pd-group label[hidden] { display: none; }
.pd-photo-slot { display: grid; justify-items: center; gap: 12px; padding: 28px 16px; border: 1px solid var(--pf-subtle); border-radius: 12px; background: var(--surface); }
.pd-photo-avatar { position: relative; width: 9rem; height: 9rem; overflow: hidden; border-radius: 50%; }
.pd-photo-cap { font-size: var(--fs-footnote); color: var(--pf-tertiary); text-align: center; }
.pd-foot { padding: 10px 24px 16px; display: grid; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 13, 17, .45); }
.pd-foot[hidden] { display: none; }
.pd-foot-err { margin: 0; text-align: center; }
.pd-primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 20px; border: 1px solid var(--accent); border-radius: 999px; background: var(--fill); color: var(--on-fill); font-family: Viga, Inter, sans-serif; font-size: var(--fs-callout); cursor: pointer; transition: background-color .2s ease; }
.pd-primary:hover:not(:disabled) { background: var(--fill-pressed); }
.pd-primary:disabled { border-color: transparent; background: var(--surface); color: var(--pf-tertiary); cursor: default; }
.pd-primary:focus-visible, .pd-secondary:focus-visible, .pd-link:focus-visible, .pd-back:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-inline { width: auto; min-width: 8rem; }
.pd-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border: 1px solid var(--control-border); border-radius: 999px; background: transparent; color: var(--text); font-family: Viga, Inter, sans-serif; font-size: var(--fs-callout); cursor: pointer; }
.pd-secondary:hover { background: rgba(127, 217, 226, .1); }
.pd-link { padding: .5rem 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-subhead); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pd-stephint { margin: 0; font-size: var(--fs-footnote); font-weight: 500; text-align: center; color: var(--pf-tertiary); }
.pd-stephint:empty { display: none; }
.pd-survey-nav { display: flex; gap: 12px; margin: 16px 0 0; }
.pd-survey-leave { margin: 4px 0 0; text-align: center; }
.pd-done { margin: 0; font-size: var(--fs-footnote); color: var(--accent); }
.pd-card .survey-opt { background: var(--surface); }
.pd-card .field { margin: 0; }
.pd-profile { margin-top: 20px; overflow: hidden; border-radius: 20px; border: 1px solid var(--pf-subtle); background: #000; }
.pd-profile .pf-sections { padding-inline: 14px; }
.pd-profile .pf-hero { aspect-ratio: 4 / 5; }
.pd-idcard { margin-top: 20px; }
.pd-actions { margin: 20px 0 0; text-align: center; }
.pd-local { max-width: 28rem; margin: 1rem 0 0; text-align: center; font-size: var(--fs-footnote); line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .pd-in-fwd { animation: pd-fwd .32s cubic-bezier(.2, .8, .2, 1) both; }
  .pd-in-back { animation: pd-back .32s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pd-fwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes pd-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
}
/* Without the script every step shows in a stack and the buttons are hidden. */
html:not(.js) .pd-foot { display: none; }

/* A privacy, terms or contact link never breaks across two lines: each moves down as one unit. */
.nb { white-space: nowrap; }
.h2-signup .wl-more .hint { text-wrap: pretty; }
.id-top { position: relative; }
.id-mark { position: absolute; top: 0; right: 0; opacity: .9; }

/* ---- Setup wizard additions: date of birth columns, the app's survey page, and the unmistakable Demo marks ---- */
.pd-dob { margin: 0; padding: 0; border: 0; min-width: 0; }
.pd-dob legend { padding: 0; }
.pd-dob-row { display: flex; gap: 8px; }
.pd-dob-sel { -webkit-appearance: none; appearance: none; flex: 1 1 0; min-width: 0; min-height: 52px; padding: 14px 28px 14px 12px; border: 1px solid var(--control-border); border-radius: 12px; background: var(--surface) no-repeat right 12px center / 10px; color: var(--text); font: inherit; font-size: var(--fs-callout); }
.pd-dob-sel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pd-dob-sel[aria-invalid="true"] { border-color: #F26D6A; }
.pd-demo { justify-self: end; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.pd-top { grid-template-columns: 2.75rem 1fr auto; }
/* The app's survey page (KinkSurveyScreen): statements with a row of five 44px circles, "Disagree" and "Agree" under the ends. */
.pd-title-sub { margin-top: 20px; font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: var(--fs-body); font-weight: 600; letter-spacing: 0; text-align: left; text-transform: none; }
.pd-sub-left { margin-top: 6px; text-align: left; }
.pd-sv-progress { margin: 6px 0 0; font-size: var(--fs-footnote); font-weight: 500; color: var(--pf-tertiary); }
.pd-sv { display: grid; gap: 20px; margin: 20px 0; }
.sv-q { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sv-text { padding: 0; font-size: var(--fs-subhead); line-height: 1.4; color: var(--text); }
.sv-row { display: flex; align-items: center; justify-content: space-between; }
.sv-dot { position: relative; display: inline-flex; width: 44px; height: 44px; cursor: pointer; }
.sv-dot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sv-ring { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 50%; transition: border-color .15s ease; }
.sv-inner { width: 16px; height: 16px; border-radius: 50%; background: transparent; transition: background-color .15s ease; }
.sv-dot input:checked + .sv-ring { border-color: var(--accent); }
.sv-dot input:checked + .sv-ring .sv-inner { background: var(--accent); }
.sv-dot input:focus-visible + .sv-ring { outline: 3px solid var(--focus); outline-offset: 2px; }
.sv-legend { display: flex; justify-content: space-between; font-size: var(--fs-footnote); font-weight: 500; color: var(--pf-tertiary); }
@media (prefers-reduced-motion: reduce) { .sv-ring, .sv-inner { transition: none; } }
/* Demo marks: a corner ribbon on the profile hero, a notice line and a faint diagonal watermark on the KINK ID card. */
.pd-profile .pf-hero { position: relative; }
.pd-ribbon { position: absolute; top: 20px; right: -38px; z-index: 6; width: 150px; padding: 4px 0; background: #E8A33D; color: #080D11; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .2em; text-align: center; text-transform: uppercase; transform: rotate(45deg); }
.pd-idcard { position: relative; overflow: hidden; }
.pd-idcard::after { content: attr(data-demo); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 5rem; font-weight: 600; letter-spacing: .2em; color: rgba(232, 163, 61, .14); transform: rotate(-24deg); pointer-events: none; }
.id-demo { margin: 0 0 .5rem; padding: .25rem .6rem; align-self: flex-start; border: 1px solid rgba(232, 163, 61, .6); border-radius: 999px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #E8A33D; }

/* The photo step, as in the app: one big 4:5 main slot (here with the made-up sample picture), two pill buttons, a Gallery row of empty "+" slots. */
.pd-photos { margin-top: 20px; }
.pd-main { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--pf-subtle); border-radius: 12px; background: var(--surface); }
.pd-main .pcard-visual { position: absolute; inset: 0; }
.pd-main-cap { margin: 8px 0 0; font-size: var(--fs-footnote); color: var(--pf-tertiary); }
.pd-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-footnote); font-weight: 600; cursor: pointer; }
.pd-pill:hover { border-color: var(--accent); }
.pd-pill-primary { border-color: var(--accent); background: var(--fill); color: var(--on-fill); }
.pd-pill:focus-visible, .pd-add:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-photos .pd-label { margin-top: 16px; }
.pd-gallery { display: flex; gap: 10px; padding: 8px 0 4px; }
.pd-add { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 105px; border: 1px dashed var(--border); border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
.pd-add .ion { font-family: Inter, "Inter Fallback", system-ui, sans-serif; font-size: 28px; font-weight: 400; }
.pd-add:hover { border-color: var(--accent); color: var(--text); }
.pd-note-name { margin: 10px 0 0; font-size: var(--fs-caption); line-height: 1.4; color: var(--pf-tertiary); opacity: .8; }
.pd-toast-row { position: sticky; bottom: 0; z-index: 9; height: 0; }
.pd-toast { position: absolute; right: 16px; bottom: 76px; left: 16px; display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(19, 25, 29, .92); color: var(--text); font-size: var(--fs-subhead); line-height: 1.35; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pd-toast { background: rgba(19, 25, 29, .7); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); } }
.pd-toast.is-on { display: flex; }
.pd-toast a { font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .pd-toast.is-on { animation: rise .25s ease-out both; } }

/* The KINK ID as a wallet pass. Real card proportions (1.586:1), glass over petrol, depth layers, a moving sheen. Flat and static under reduced motion. */
.pd-idcard { margin-top: 24px; display: flex; justify-content: center; overflow: visible; }
.pd-idcard::after { content: none; }
.wallet { position: relative; width: min(100%, 26rem); aspect-ratio: 1.586; perspective: 1000px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.wallet:focus-visible .wallet-card { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 24px; }
.wallet-card { position: absolute; inset: 0; transform-style: preserve-3d; border-radius: 22px; box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .7), 0 10px 24px -8px rgba(0, 0, 0, .4); will-change: transform; }
.wallet-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.wallet-face { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 22px; color: var(--text); }
.wallet-back { transform: rotateY(180deg); }
.wallet-bg { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .2); background: radial-gradient(120% 90% at 85% 0%, rgba(127, 217, 226, .38), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(7, 93, 115, .8), transparent 60%), linear-gradient(145deg, #0e4a59, #0c2630 55%, #080D11); box-shadow: inset 0 1px rgba(255, 255, 255, .25); }
.wallet-sheen { position: absolute; inset: 0; border-radius: 22px; pointer-events: none; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 25%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; }
.wallet-head { position: absolute; top: 14px; left: 18px; right: 16px; display: flex; align-items: center; justify-content: space-between; transform: translateZ(14px); }
.wallet-brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-footnote); font-weight: 600; letter-spacing: .18em; }
.wallet-mark { display: block; }
.wallet .id-demo { margin: 0; padding: 2px 9px; border: 1px solid rgba(232, 163, 61, .75); border-radius: 999px; background: rgba(8, 13, 17, .35); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #F2B766; }
.wallet-who { position: absolute; top: 52px; left: 18px; display: flex; align-items: center; gap: 12px; transform: translateZ(40px); }
.wallet-avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #080D11; font-weight: 600; font-size: 1.4rem; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.wallet-user { margin: 0; font-size: var(--fs-headline); font-weight: 600; overflow-wrap: anywhere; }
.wallet-chips { position: absolute; left: 18px; bottom: 16px; right: 40%; display: flex; flex-wrap: wrap; gap: 6px; transform: translateZ(18px); }
.wallet-chip { padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(8, 13, 17, .35); font-size: var(--fs-footnote); font-weight: 500; line-height: 1.5; }
.wallet-qr { position: absolute; right: 16px; bottom: 16px; width: 34%; aspect-ratio: 1; padding: 6px; border-radius: 12px; background: #F1F5F7; box-shadow: 0 10px 22px rgba(0, 0, 0, .4); transform: translateZ(28px); }
.wallet-qr .qr { display: block; width: 100%; height: 100%; color: #080D11; fill: currentColor; }
.wallet-qr .qr-gap { fill: #F1F5F7; }
.wallet-bigmark { position: absolute; top: 18px; left: 50%; margin-left: -36px; transform: translateZ(30px); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .4)); }
.wallet-notes { position: absolute; left: 20px; right: 20px; bottom: 14px; display: grid; gap: 4px; text-align: center; transform: translateZ(14px); }
.wallet-notes .id-demo-note { margin: 0; font-size: var(--fs-footnote); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #F2B766; }
.wallet-fine { margin: 0; font-size: var(--fs-footnote); color: var(--muted); }
.wallet-back::after { content: attr(data-demo); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 22px; font-size: 4.5rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 183, 102, .12); transform: rotate(-18deg); pointer-events: none; }
.wallet-notes .kid-group { text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .wallet-inner { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
  .wallet.is-flipped .wallet-inner { transform: rotateY(180deg); }
}
/* Reduced motion: flat and static, and the flip is a plain swap of the faces. */
.wallet.is-flat { perspective: none; }
.wallet.is-flat .wallet-card, .wallet.is-flat .wallet-inner, .wallet.is-flat .wallet-face { transform-style: flat; }
.wallet.is-flat .wallet-who, .wallet.is-flat .wallet-chips, .wallet.is-flat .wallet-qr, .wallet.is-flat .wallet-head, .wallet.is-flat .wallet-notes, .wallet.is-flat .wallet-bigmark { transform: none; }
.wallet.is-flat .wallet-back { transform: none; visibility: hidden; }
.wallet.is-flat.is-flipped .wallet-front { visibility: hidden; }
.wallet.is-flat.is-flipped .wallet-back { visibility: visible; }
/* Desktop: when the wizard finishes the card widens into two columns, the profile in its phone frame on the left and the pass standing on its own on the right. */
@media (min-width: 64rem) {
  .pd-card.is-result { width: min(100%, 940px); max-height: none; }
  .pd-card.is-result .pd-stage { overflow: visible; }
  .pd-result { display: grid; grid-template-columns: 342px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .pd-result .pd-title, .pd-result .pd-sub, .pd-result .pd-actions { grid-column: 1 / -1; }
  .pd-result .pd-profile { grid-column: 1; height: min(46rem, calc(100dvh - 14rem)); min-height: 30rem; overflow-y: auto; border-radius: 28px; }
  .pd-result .pd-idcard { grid-column: 2; align-self: center; margin-top: 0; }
  .pd-result .wallet { width: min(100%, 440px); }
}
@media (min-width: 75rem) { .h2-about { margin-top: calc(var(--rh) * -1.15); } }
/* The intro starts on top of the last, very blurred card row: the row's own blur and low opacity carry it; a soft fade (no box) keeps the text above 4.5:1. */
.h2-about-intro::before { content: ""; position: absolute; z-index: -1; inset: -9rem -14vw -6rem; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(8, 13, 17, .8) 0%, rgba(8, 13, 17, .62) 38%, rgba(8, 13, 17, .26) 70%, rgba(8, 13, 17, 0) 100%); pointer-events: none; }

/* ---- Sample profile dialog: the profile in its phone frame and, beside it, that person's KINK ID wallet pass (the same pass as the setup result; wallet.js).
   From 1024px both show side by side on the page; below that the pass slides over the profile (the KINK ID button, and Back). No motion under reduced motion. ---- */
.pf-frame { position: absolute; inset: 0; }
.pf-phone { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.pf-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; height: 64px; padding: 0 64px 0 14px; pointer-events: none; }
.pf-seg { pointer-events: auto; display: grid; grid-template-columns: 1fr 1fr; flex: 1; max-width: 260px; padding: 3px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(19, 25, 29, .55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.pf-tab { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-footnote); font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.pf-tab[aria-selected="true"] { background: rgba(127, 217, 226, .22); color: var(--text); box-shadow: inset 0 0 0 1px rgba(127, 217, 226, .5); }
.pf-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* A small tilted preview of the pass under the switch, so people notice it (it wobbles in once; still under reduced motion). */
.pf-peek { position: absolute; top: 70px; right: 14px; z-index: 35; width: 92px; height: 58px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: radial-gradient(120% 90% at 85% 0%, rgba(127, 217, 226, .45), transparent 55%), linear-gradient(145deg, #0e4a59, #0c2630 60%, #080D11); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); color: var(--text); font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .16em; transform: rotate(7deg); cursor: pointer; }
.pf-peek span { position: absolute; left: 8px; top: 7px; }
.pf-dlg[data-view="1"] .pf-peek { display: none; }
@media (prefers-reduced-motion: no-preference) { .pf-dlg[data-view="0"] .pf-peek { animation: peek-in 1.1s cubic-bezier(.34, 1.4, .64, 1) .5s both; } @keyframes peek-in { from { opacity: 0; transform: translateX(60px) rotate(18deg); } to { opacity: 1; transform: rotate(7deg); } } }
.pf-frame { touch-action: pan-y; }
.pf-side { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 72px 18px 32px; background: linear-gradient(180deg, #000 0%, #0a171d 50%, #080D11 100%); transform: translateX(100%); visibility: hidden; touch-action: pan-y; }
.pf-dlg[data-view="1"] .pf-side, .pf-dlg.is-drag .pf-side { visibility: visible; }
.pf-dlg[data-view="1"] .pf-frame { visibility: hidden; }
.pf-dlg.is-drag .pf-frame { visibility: visible; }
.pf-wallet { display: flex; justify-content: center; width: 100%; }
.pf-side .wallet { width: min(100%, 24rem); touch-action: pan-y; }
.pf-inapp { top: 76px; }
.pf-dlg .pf-phone .pf-hero { margin-top: 0; }
@media (min-width: 64rem) {
  .dlg.pf-dlg { --pf-h: min(840px, calc(100dvh - 48px)); width: min(100%, 940px); height: auto; margin: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .dlg.pf-dlg[open] { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 56px; align-items: center; }
  .pf-frame { position: relative; inset: auto; height: var(--pf-h); overflow: hidden; border: 1px solid rgba(195, 205, 211, .3); border-radius: 28px; background: linear-gradient(180deg, #000 0%, #0a171d 50%, #080D11 100%); box-shadow: 0 30px 100px rgba(0, 0, 0, .6); }
  .pf-side { position: static; z-index: auto; padding: 0; background: none; transform: none; visibility: visible; transition: none; }
  .pf-bar, .pf-peek { display: none; }
  .pf-frame, .pf-side { transform: none !important; transition: none !important; visibility: visible !important; }
  .pf-inapp { top: 20px; }
  .pf-wallet .wallet { width: min(100%, 440px); }
}

.wallet { touch-action: pan-y; }
.pf-dlg[data-view="1"] .pf-close-row { visibility: visible; }

/* The faces hide their backs, and so do the watermark and layers inside them (a child of a 3D face would otherwise show through the front, mirrored). */
.wallet-face *, .wallet-face::after, .wallet-face::before { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wallet-front::after { content: none; }
.wallet-flipbtn { display: inline-flex; align-items: center; gap: 8px; align-self: center; min-height: 44px; margin-top: 18px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(19, 25, 29, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text); font: inherit; font-size: var(--fs-footnote); font-weight: 600; cursor: pointer; }
.wallet-flipbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wallet-flipbtn:hover { border-color: var(--accent); }
.wallet-flipbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pd-idcard, .pf-wallet { flex-direction: column; align-items: center; }