@import url("brand-tokens.css");
@import url("theme.css");
/* h2.css — Herae 2.0 components on the Connected H brand (brand/tokens/herae-tokens.css is the source of truth;
   these --h-* names map onto it so the 2.0 pages didn't need rewriting). Rebrand 2026-10-22: the earlier warm
   amber/ink direction is replaced by midnight navy + indigo, pink for the human "watch together" moments, DM Sans. */

:root {
  /* colour */
  --h-bg: var(--hz-bg);
  --h-surface: var(--hz-surface);
  --h-surface-2: var(--hz-surface-2);
  --h-surface-3: #262545;
  --h-line: rgba(255, 255, 255, 0.08);
  --h-line-strong: rgba(255, 255, 255, 0.16);
  --h-text: var(--hz-text);
  --h-text-2: #CBD5E1;
  --h-text-3: var(--hz-text-2);  /* ≥ 4.5:1 on navy for body-size text */
  --h-accent: var(--brand-primary);         /* indigo: primary actions */
  --h-accent-hover: #818CF8;
  --h-accent-ink: #FFFFFF;      /* text on indigo (5.0:1) */
  --h-coral: #F472B6;           /* pink: "interested", warm human moments */
  --h-ok: var(--hz-success);
  --h-warn: var(--hz-warning);
  --h-danger: var(--hz-danger);
  --h-focus: #A5B4FC;
  /* type */
  --h-font-display: var(--font-sans);
  --h-font-body: var(--font-sans);
  --h-size-xs: 12px; --h-size-sm: 14px; --h-size-md: 16px; --h-size-lg: 19px; --h-size-xl: 24px; --h-size-2xl: 32px;
  --h-lh: 1.55;
  /* space (4-pt) */
  --h-1: 4px; --h-2: 8px; --h-3: 12px; --h-4: 16px; --h-5: 20px; --h-6: 24px; --h-8: 32px; --h-10: 40px; --h-12: 48px;
  /* shape, depth, motion */
  --h-r-sm: 8px; --h-r-md: 12px; --h-r-lg: 16px; --h-r-pill: 999px;
  --h-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(2, 6, 23, 0.45);
  --h-fast: 120ms; --h-med: 220ms; --h-ease: cubic-bezier(.2, .7, .2, 1);
  --h-tap: 44px;                /* minimum touch target */
  /* breakpoints (reference): 360 · 430 · 768 · 1024 */
}
@media (prefers-reduced-motion: reduce) { :root { --h-fast: 0ms; --h-med: 0ms; } }

.h2 { background: var(--h-bg); color: var(--h-text); font: var(--h-size-md)/var(--h-lh) var(--h-font-body); }
.h2 h1, .h2 h2, .h2 h3 { font-family: var(--h-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.h2 h1 { font-size: var(--h-size-2xl); } .h2 h2 { font-size: var(--h-size-xl); } .h2 h3 { font-size: var(--h-size-lg); }
.h2 a { color: var(--hz-link); }
.h2 :focus-visible { outline: 2px solid var(--h-focus); outline-offset: 2px; border-radius: var(--h-r-sm); }
.h2 .muted { color: var(--h-text-2); } .h2 .faint { color: var(--h-text-3); }
.h2 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons: primary (amber), secondary (outline), quiet (text), danger */
.h2 [hidden] { display: none !important; }   /* component display rules must never un-hide [hidden] */
.h2 .hb { display: inline-flex; align-items: center; justify-content: center; gap: var(--h-2); min-height: var(--h-tap);
  padding: 0 var(--h-5); border-radius: var(--h-r-md); border: 1px solid transparent; font: 600 var(--h-size-sm)/1 var(--h-font-body);
  cursor: pointer; text-decoration: none; transition: background var(--h-fast) var(--h-ease), border-color var(--h-fast) var(--h-ease); }
.h2 .hb-primary { background: var(--h-accent); color: var(--h-accent-ink); }
.h2 .hb-primary:hover { background: var(--h-accent-hover); }
.h2 .hb-secondary { background: transparent; color: var(--h-text); border-color: var(--h-line-strong); }
.h2 .hb-secondary:hover { border-color: var(--h-text-2); }
.h2 .hb-quiet { background: transparent; color: var(--h-text-2); padding: 0 var(--h-3); }
.h2 .hb-quiet:hover { color: var(--h-text); }
.h2 .hb-danger { background: transparent; color: var(--h-danger); border-color: rgba(232, 96, 79, .45); }
.h2 .hb[disabled], .h2 .hb[aria-busy="true"] { opacity: .55; cursor: not-allowed; }

/* inputs */
.h2 .hi { box-sizing: border-box; width: 100%; min-height: var(--h-tap); padding: 0 var(--h-3); background: var(--h-surface-2); color: var(--h-text);
  border: 1px solid var(--h-line-strong); border-radius: var(--h-r-md); font: var(--h-size-md) var(--h-font-body); }
.h2 textarea.hi { padding: var(--h-3); min-height: 96px; resize: vertical; }
.h2 .hi:focus-visible { border-color: var(--h-focus); outline: none; box-shadow: 0 0 0 2px rgba(129, 140, 248, .45); }
.h2 .hi[aria-invalid="true"] { border-color: var(--h-danger); }
.h2 .h-label { display: block; font-size: var(--h-size-sm); font-weight: 600; margin-bottom: var(--h-1); }
.h2 .h-help { font-size: var(--h-size-xs); color: var(--h-text-3); margin-top: var(--h-1); }
.h2 .h-error { font-size: var(--h-size-sm); color: var(--h-danger); margin-top: var(--h-1); }

/* chips (toggleable choices) */
.h2 .h-chips { display: flex; flex-wrap: wrap; gap: var(--h-2); }
.h2 .h-chip { min-height: 36px; padding: 0 var(--h-3); border-radius: var(--h-r-pill); border: 1px solid var(--h-line-strong);
  background: transparent; color: var(--h-text-2); font: 500 var(--h-size-sm) var(--h-font-body); cursor: pointer; }
.h2 .h-chip[aria-pressed="true"] { background: var(--h-text); color: var(--h-bg); border-color: var(--h-text); }

/* surfaces */
.h2 .h-card { background: var(--h-surface); border: 1px solid var(--h-line); border-radius: var(--h-r-lg); padding: var(--h-5); }
.h2 .h-section { padding: var(--h-6) 0; border-top: 1px solid var(--h-line); }
.h2 .h-row { display: flex; align-items: center; gap: var(--h-3); }
.h2 .h-stack > * + * { margin-top: var(--h-3); }

/* switch (a real checkbox underneath: keyboard + screen readers for free) */
.h2 .h-switch { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--h-4); padding: var(--h-3) 0; }
.h2 .h-switch input { appearance: none; flex: none; width: 46px; height: 28px; border-radius: var(--h-r-pill); background: var(--h-surface-3);
  border: 1px solid var(--h-line-strong); position: relative; cursor: pointer; transition: background var(--h-fast); }
.h2 .h-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--h-text-2); transition: transform var(--h-fast) var(--h-ease), background var(--h-fast); }
.h2 .h-switch input:checked { background: var(--h-accent); border-color: var(--h-accent); }
.h2 .h-switch input:checked::after { transform: translateX(18px); background: var(--h-accent-ink); }

/* list rows (friends, chats, blocked accounts, admission queue) */
.h2 .h-list { list-style: none; margin: 0; padding: 0; }
.h2 .h-list > li { display: flex; align-items: center; gap: var(--h-3); min-height: 56px; padding: var(--h-2) 0; border-bottom: 1px solid var(--h-line); }
.h2 .h-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--h-surface-3); color: var(--h-text);
  display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.h2 .h-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* feedback */
.h2 .h-toast { position: fixed; left: 50%; bottom: var(--h-6); transform: translateX(-50%); background: var(--h-text); color: var(--h-bg);
  padding: var(--h-3) var(--h-4); border-radius: var(--h-r-md); font-weight: 600; box-shadow: var(--h-shadow); z-index: 50; max-width: calc(100vw - 32px); }
.h2 .h-empty { text-align: center; padding: var(--h-10) var(--h-4); color: var(--h-text-2); }
.h2 .h-skeleton { background: linear-gradient(90deg, var(--h-surface-2), var(--h-surface-3), var(--h-surface-2)); background-size: 200% 100%;
  animation: h-shimmer 1.2s linear infinite; border-radius: var(--h-r-md); }
@keyframes h-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .h2 .h-skeleton { animation: none; } }

/* dialog (native <dialog>) */
.h2 dialog.h-dialog { background: var(--h-surface); color: var(--h-text); border: 1px solid var(--h-line-strong); border-radius: var(--h-r-lg);
  padding: var(--h-6); width: min(440px, calc(100vw - 32px)); }
.h2 dialog.h-dialog::backdrop { background: rgba(8, 7, 6, .7); }

/* page shell */
.h2 .h-page { max-width: 760px; margin: 0 auto; padding: var(--h-6) var(--h-4) var(--h-12); }
.h2 .h-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--h-3); padding: var(--h-3) var(--h-4);
  border-bottom: 1px solid var(--h-line); }
.h2 .h-brand img { display: block; height: 26px; width: auto; }
.h2 .h-brand { font-family: var(--h-font-display); font-size: var(--h-size-lg); font-weight: 600; color: var(--h-text); text-decoration: none; }

/* Theme 2026-11 (founder 11-02; tokens in theme.css, shared with style.css): same page, cards and actions. */
body.h2 { background: var(--page-glow), var(--page-bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; }
.h2 .h-card { background: var(--surface-post); border-color: var(--card-line); border-radius: 20px; box-shadow: var(--card-shadow); }
.h2 .hb { border-radius: 999px; }
.h2 .hb-primary { background: var(--grad-cta); border: 0; color: #fff; box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .7), inset 0 1px 0 rgba(255, 255, 255, .16); }
.h2 .hb-primary:hover { background: var(--grad-cta); filter: brightness(1.08); }
.h2 .hb-secondary { background: rgba(var(--fg-rgb), .05); border-color: rgba(var(--fg-rgb), .14); }
.h2 .hb-secondary:hover { background: rgba(var(--fg-rgb), .09); }
.h2 .hi { border-radius: 14px; }
/* Profile card: the header card from the mock-up (wave corner, three stats with dividers, one wide pill). */
.wp-me { background: var(--hero-glass) !important; border: 1px solid var(--hero-line) !important;
  border-radius: 24px !important; box-shadow: var(--card-shadow); }
.wp-me { display: grid !important; grid-template-columns: auto 1fr; grid-template-areas: "av name" "av meta" "stats stats" "act act"; column-gap: 20px; }
.wp-me-txt { display: contents; } .wp-me-av { grid-area: av; background: var(--grad-ring) !important; } .wp-me-name { grid-area: name; align-self: end; color: var(--h-text); }
.wp-me-meta { grid-area: meta; align-self: start; color: var(--stat-label) !important; }
.wp-me-meta b { color: var(--hz-success) !important; }
.wp-me-stats { grid-area: stats; display: grid !important; grid-template-columns: repeat(3, 1fr); margin: 18px 0 14px; gap: 0 !important; text-align: center; color: var(--stat-label) !important; }
.wp-me-stats b { color: var(--h-text) !important; font-weight: 750; letter-spacing: -0.02em; }
.wp-me-stats span + span { border-left: 1px solid rgba(var(--fg-rgb), .1); }
.wp-me #mePage { grid-area: act; justify-content: center; text-align: center; padding: 13px 18px; border-radius: 999px; background: var(--pill-bg); border: 1px solid var(--pill-line); color: var(--h-text); }
/* Light theme: the few page colours that were tuned for dark only. */
:root[data-theme="light"] .dz-btn:not(.yes) { background: #FFFFFF; border-color: rgba(15, 23, 42, .08); box-shadow: 0 12px 26px -12px rgba(49, 46, 129, .4); }
:root[data-theme="light"] .dz-btn.undo { color: #B45309; } :root[data-theme="light"] .dz-btn.info { color: #2563EB; } :root[data-theme="light"] .dz-btn.no { color: #E11D48; }
:root[data-theme="light"] .dz-tease { color: var(--h-text); }
:root[data-theme="light"] .wp-fork-go { color: #4F46E5; }
:root[data-theme="light"] .wp-vq-next { color: #BE185D; }
/* Glass + spacing for the header cards (mock-up ratios): frosted, fine light edge, generous padding, rounder corners. */
.profile-header .profile-header-inner, .wp-me, .watch-link { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .10) !important; border-radius: 28px !important; padding: 26px 24px 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -20px rgba(0, 0, 0, .7) !important; }
/* Profile header stats (mock-up): a line icon over each number, labels in sentence case. */
.wp-me-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; text-transform: capitalize; font-size: 13px; }
.wp-me-stats span::before { content: ''; width: 20px; height: 20px; margin-bottom: 4px; background: var(--c-indigo-soft); -webkit-mask: var(--stat-ico) center / contain no-repeat; mask: var(--stat-ico) center / contain no-repeat; }
.wp-me-stats span:nth-child(1) { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 4l13 8-13 8z'/%3E%3C/svg%3E"); }
.wp-me-stats span:nth-child(2) { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4z'/%3E%3C/svg%3E"); }
.wp-me-stats span:nth-child(3) { --stat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.8 5.7 6.2.9-4.5 4.4 1 6.2L12 17.3 6.5 20.2l1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
.wp-me-stats b { font-size: 26px !important; font-weight: 700 !important; }
.wp-me-name { font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wp-me .wp-me-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .wp-me .wp-me-meta b { margin-right: 0; font-weight: 500; }
.wp-me .wp-me-name { font-size: 30px; }

/* ── Founder 11-02, round 4: the reference, measured at 390 px. Last in the file so it wins. ── */
.profile-header .profile-header-inner, .wp-me, .watch-link {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='c' cx='400' cy='0' r='260' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23EC4899' stop-opacity='.9'/%3E%3Cstop offset='.32' stop-color='%23A21CAF' stop-opacity='.55'/%3E%3Cstop offset='.68' stop-color='%236D28D9' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%236D28D9' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M140 -20C250 30 330 100 420 125V-20Z' fill='url(%23c)' filter='url(%23b)'/%3E%3Cpath d='M195 -20C285 40 350 112 420 152' stroke='%23EC4899' stroke-opacity='.32' stroke-width='16' fill='none' filter='url(%23s)'/%3E%3Cpath d='M250 -20C320 62 372 135 420 205' stroke='%230C0A12' stroke-opacity='.55' stroke-width='26' fill='none' filter='url(%23b)'/%3E%3Cpath d='M300 -20C352 84 392 165 420 265' stroke='%23C026D3' stroke-opacity='.24' stroke-width='22' fill='none' filter='url(%23b)'/%3E%3C/svg%3E") right top / 100% 100% no-repeat, linear-gradient(160deg, #18151F 0%, #121019 60%, #0F0D15 100%) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(236, 72, 153, .04), 0 18px 40px -18px rgba(0, 0, 0, .8) !important;
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); padding: 18px !important; }
:root[data-theme="light"] .profile-header .profile-header-inner, :root[data-theme="light"] .wp-me, :root[data-theme="light"] .watch-link {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='c' cx='400' cy='0' r='260' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23EC4899' stop-opacity='.35'/%3E%3Cstop offset='.32' stop-color='%23A21CAF' stop-opacity='.2'/%3E%3Cstop offset='.68' stop-color='%236D28D9' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%236D28D9' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M140 -20C250 30 330 100 420 125V-20Z' fill='url(%23c)' filter='url(%23b)'/%3E%3Cpath d='M195 -20C285 40 350 112 420 152' stroke='%23EC4899' stroke-opacity='.32' stroke-width='16' fill='none' filter='url(%23s)'/%3E%3Cpath d='M250 -20C320 62 372 135 420 205' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='26' fill='none' filter='url(%23b)'/%3E%3Cpath d='M300 -20C352 84 392 165 420 265' stroke='%23C026D3' stroke-opacity='.24' stroke-width='22' fill='none' filter='url(%23b)'/%3E%3C/svg%3E") right top / 100% 100% no-repeat, linear-gradient(160deg, #FFFFFF, #F7F5FC) !important;
  border-color: rgba(17, 12, 34, .08) !important; box-shadow: 0 1px 2px rgba(17, 12, 34, .06), 0 12px 32px -18px rgba(17, 12, 34, .25) !important; }
.profile-header .profile-avatar, .profile-header .profile-avatar-wrap > .avatar { width: 78px !important; height: 78px !important; font-size: 28px !important; }
.profile-header .profile-name { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em; }
.profile-header .profile-meta, .profile-header .profile-presence, .profile-header .profile-joined { font-size: 13px !important; }
.profile-header .profile-stats { margin: 16px 0 14px !important; }
.profile-header .profile-stat { font-size: 12px !important; gap: 2px !important; }
.profile-header .profile-stat-num { font-size: 24px !important; font-weight: 700 !important; line-height: 1.15; }
.profile-header .profile-stat svg, .profile-header .profile-stat::before { width: 18px !important; height: 18px !important; }
.profile-header .profile-actions > * { min-height: 36px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 600 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)) !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 999px !important; }
.profile-edit-pill { top: 16px !important; right: 16px !important; width: auto !important; height: 28px !important; padding: 0 12px !important; gap: 6px !important;
  font-size: 12px !important; font-weight: 600 !important; border-radius: 999px !important; }
.profile-edit-pill svg { width: 13px !important; height: 13px !important; }
.profile-edit-pill .label, .profile-edit-pill span { display: inline !important; }
.profile-header .profile-header-inner:has(.profile-edit-pill) .profile-name { padding-right: 104px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-link-ill { width: 40px !important; height: 40px !important; flex: none; }
.watch-link-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.01em; }
.watch-link-sub, .watch-link-note { font-size: 13px !important; line-height: 1.5 !important; }
.watch-link-url { height: 40px !important; border-radius: 12px !important; font-size: 13px !important; }
.watch-link-go { width: 56px !important; min-width: 56px !important; height: 40px !important; border-radius: 12px !important; padding: 0 !important; background: linear-gradient(120deg, #6366F1, #EC4899) !important; }
/* Founder 11-02: "Watch something together" is plain (same solid surface as posts); sizes in the reference's proportions. */
.watch-link { background: var(--surface-post, #15152A) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important; }
:root[data-theme="light"] .watch-link { background: #FFFFFF !important; }
.watch-link-ill { width: 36px !important; height: 36px !important; }
.watch-link-ill svg { width: 20px !important; height: 20px !important; }
.watch-link-title { font-size: 15px !important; }
.watch-link-sub, .watch-link-note { font-size: 12.5px !important; }
.watch-link-url, .watch-link-who { font-size: 13px !important; }
.watch-link-go svg { width: 18px !important; height: 18px !important; }
/* Founder 11-02: every panel in the reference's proportions (390 px phone): compact type, 16-18 px padding, 18 px radius. */
.an-connect:not(.an-push) { padding: 10px 16px !important; gap: 10px !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; }
.an-connect:not(.an-push) .an-connect-cta { padding: 7px 14px !important; font-size: 13px !important; min-height: 32px; }
.an-connect:not(.an-push) .an-connect-x { width: 30px !important; height: 30px !important; font-size: 13px !important; }
.feed-card, .moment-card, .post-detail-card { border-radius: 18px !important; padding: 16px !important; }
.feed-card .feed-card-head, .moment-card .moment-people { font-size: 14px !important; }
.feed-card .feed-card-headtext, .feed-card .moment-date, .moment-card .moment-date { font-size: 12.5px !important; }
.feed-card .moment-description, .moment-card .moment-description { font-size: 13.5px !important; }
.feed-card .reaction-row, .moment-card .reaction-row { font-size: 13px !important; }
.ms-chooser-card { border-radius: 14px !important; }
.danger-zone-inner { border-radius: 18px !important; padding: 16px !important; }
.danger-zone-inner h3 { font-size: 15px !important; } .danger-zone-inner p { font-size: 13px !important; }
@media (max-width: 760px) { .an-top { height: 56px !important; } }
.avatar-edit-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-height: 36px !important; aspect-ratio: 1 / 1; border-radius: 50% !important; padding: 0 !important; }
@media (max-width: 640px) {
  .profile-edit-pill { width: 32px !important; height: 32px !important; padding: 0 !important; justify-content: center !important; font-size: 0 !important; gap: 0 !important; border-radius: 50% !important; top: 14px !important; right: 14px !important; }
  .profile-edit-pill svg { width: 14px !important; height: 14px !important; }
  .profile-header .profile-header-inner:has(.profile-edit-pill) .profile-name { padding-right: 40px !important; }
}
/* Herae page header (any visitor, before or after a contact request): the photo is always a fixed circle, the name gets the rest. */
.profile-header .profile-avatar-wrap { width: 84px !important; height: 84px !important; justify-self: start; align-self: center; flex: none; }
.profile-header .profile-avatar-wrap > .avatar, .profile-header .profile-avatar-wrap > .profile-avatar, .profile-header .profile-avatar-wrap > img { width: 78px !important; height: 78px !important; max-width: 78px; border-radius: 50% !important; }
.profile-header .profile-contact-note { grid-column: 1 / -1 !important; font-size: 13px; text-align: center; }
.profile-header .profile-header-inner { grid-template-columns: 84px minmax(0, 1fr) !important; }
.profile-header .profile-avatar-wrap { display: grid !important; place-items: center !important; } .profile-header .profile-avatar-wrap > .avatar, .profile-header .profile-avatar-wrap > .profile-avatar, .profile-header .profile-avatar-wrap > img { margin: 0 !important; grid-area: 1 / 1; }
.profile-header .profile-contact-note { grid-column: 1 / -1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center !important; justify-self: stretch; font-size: 13px; }
/* Founder 11-05: the Profile tab card is the Home card, same size and proportions. */
.wp-me { padding: 18px !important; border-radius: 18px !important; column-gap: 20px !important; row-gap: 2px !important; align-items: center; }
.wp-me-av { width: 84px !important; height: 84px !important; padding: 3px !important; }
.wp-me-name { font-size: 26px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -.02em; margin: 0 !important; }
.wp-me-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px !important; margin: 4px 0 0 !important; line-height: 1.3; }
.wp-me-meta b { margin: 0 !important; font-size: 13px; }
.wp-me-stats { margin: 16px 0 14px !important; font-size: 12px !important; line-height: 1.3; }
.wp-me-stats b { font-size: 24px !important; font-weight: 700 !important; line-height: 1.15 !important; }
.wp-me #mePage { min-height: 36px !important; height: 36px !important; padding: 0 16px !important; font-size: 13px !important; font-weight: 600 !important; display: flex !important; align-items: center; justify-content: center; border-radius: 999px !important; }
.an-connect-cta { display: inline-flex !important; align-items: center; justify-content: center; }