/* Profile and sign-in pages in the catalog design (2026-11-02). Loaded after
   each page's own styles, so these rules win without touching the markup. */
.vl-acct-page { background: var(--hrp-bg); color: var(--hrp-ink); font-family: var(--brand-sans); }
.vl-acct-page .pf-shell *, .vl-acct-page .auth-card * { font-family: var(--brand-sans) !important; }
.vl-acct-page .pf-eyebrow, .vl-acct-page .auth-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hrp-muted); }
.vl-acct-page .pf-headline, .vl-acct-page .auth-headline { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--hrp-ink); }
.vl-acct-page .pf-headline em, .vl-acct-page .auth-headline em { font-style: normal; color: var(--hrp-ink); background: var(--hrp-pop); padding: 0 .14em; border-radius: .18em; }
.vl-acct-page .pf-identity, .vl-acct-page .pf-resume, .vl-acct-page .pf-card, .vl-acct-page .auth-card { background: var(--hrp-card); border: 1px solid var(--hrp-line); border-radius: 24px; color: var(--hrp-ink); box-shadow: none; }
.vl-acct-page .pf-card { overflow: hidden; }
.vl-acct-page .pf-avatar { background: var(--hrp-pop); color: var(--hrp-on-pop); font-weight: 800; }
.vl-acct-page .pf-name, .vl-acct-page .pf-card-title { font-weight: 800; color: var(--hrp-ink); }
.vl-acct-page .pf-section { border-top-color: var(--hrp-line); }
.vl-acct-page .pf-section h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--hrp-ink); }
.vl-acct-page .pf-card-meta, .vl-acct-page .pf-empty, .vl-acct-page .pf-handle, .vl-acct-page .pf-pref-label,
.vl-acct-page .pf-identity-meta, .vl-acct-page .auth-foot, .vl-acct-page .auth-label { color: var(--hrp-muted); letter-spacing: normal; text-transform: none; }
.vl-acct-page .pf-input, .vl-acct-page .pf-pref-select, .vl-acct-page .auth-input { border: 1px solid var(--hrp-line); border-radius: 14px; background: var(--hrp-bg-2); color: var(--hrp-ink); }
.vl-acct-page .pf-save-btn, .vl-acct-page .auth-primary { border: 0; border-radius: 999px; background: var(--hrp-pop); color: var(--hrp-on-pop); font-weight: 800; }
.vl-acct-page .pf-signout, .vl-acct-page .auth-oauth-btn { border-radius: 999px; font-weight: 800; }
.vl-acct-page .pf-fav-all { color: var(--hrp-ink); }
/* Sign-in: the page was a centred flex box; with the site header it flows. */
html body.vl-acct-page { display: block; padding: 0; background: var(--hrp-bg); background-image: none; color: var(--hrp-ink); }
.vl-acct-page .auth-card { margin: 48px auto 64px; max-width: 480px; }
.vl-acct-page .auth-back, .vl-acct-page > div[style*="position:fixed"] { display: none; }
@media (max-width: 640px) { .vl-acct-page .auth-card { margin: 24px 16px 48px; } }

/* Older public pages (partner cabinet, legal) on the catalog design: their
   own CSS reads these tokens, so remapping them is enough (2026-11-03). */
.vl-acct-page {
  --serif: var(--brand-sans); --sans: var(--brand-sans); --mono: var(--brand-sans);
  --bone: var(--hrp-bg); --paper: var(--hrp-card); --ink: var(--hrp-ink);
  --muted: var(--hrp-muted); --line: var(--hrp-line);
}
.vl-acct-page h1, .vl-acct-page h2, .vl-acct-page h3 { font-family: var(--brand-sans); letter-spacing: -.02em; }
.vl-acct-page h1 { font-weight: 800; }
/* Their old mini header ("HELP RENT · KOH PHANGAN") gives way to the catalog header. */
.vl-acct-page > nav.nav { display: none; }