/* ============================================================
   Sentinect — "Lumen" design language (§4.0), silver edition
   Dark minimalist futurism. Hairlines + glass + one pearl element.
   Fonts: familiar system classics only (no trendy display faces, no CDN).
   ============================================================ */

:root {
  --canvas: #0A0B0E;
  --ink: #E9EBF0;
  --ink-dim: #9CA3B2;
  --ink-faint: #5C6372;
  --hairline: rgba(255, 255, 255, 0.13);
  --hairline-dim: rgba(255, 255, 255, 0.07);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --accent: #C0C0C0;
  /* silver — all interactive selection & glow */
  --accent-glow: rgba(192, 192, 192, 0.30);
  --accent-dim: rgba(192, 192, 192, 0.5);
  --agree: #9ECFB4;
  /* desaturated pastels for semantics only */
  --disagree: #D9A8B4;
  --pink-hi: #E2A9B8;
  --pearl-a: #C9B8F0;
  --pearl-b: #BDE9F2;
  --pearl-c: #EFE3C8;
  /* φ type scale */
  --t-micro: 10px;
  --t-0: 12px;
  --t-1: 19px;
  --t-2: 31px;
  --t-3: 50px;
  --t-4: 81px;
  /* Fibonacci spacing */
  --s-1: 8px;
  --s-2: 13px;
  --s-3: 21px;
  --s-4: 34px;
  --s-5: 55px;
  /* Square cards — hard corners for symmetry (pills/chips still use 999px) */
  --radius: 2px;
  --radius-sm: 2px;
  /* Familiar old-school stacks — Helvetica / Georgia / Courier */
  --sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Tahoma, sans-serif;
  --label: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --cursive: Georgia, 'Times New Roman', Times, serif;
  --script: Georgia, 'Times New Roman', Times, serif;
  --script-formal: Georgia, 'Times New Roman', Times, serif;
  --optima: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --mono: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
}

/* light theme ("Porcelain") — bone-white canvas, smoked-white glass, dark hairlines */
body[data-theme="light"] {
  --canvas: #F4F2EC;
  --ink: #1A1B1F;
  --ink-dim: #565a63;
  --ink-faint: #8a8e97;
  --hairline: rgba(0, 0, 0, 0.14);
  --hairline-dim: rgba(0, 0, 0, 0.08);
  --glass: rgba(255, 255, 255, 0.55);
  --glass-hi: rgba(255, 255, 255, 0.75);
  --accent: #B07E1E;
  --accent-glow: rgba(176, 126, 30, 0.22);
  --accent-dim: rgba(176, 126, 30, 0.55);
}

body[data-theme="light"] #bg::before {
  background:
    radial-gradient(1100px 720px at 18% 8%, rgba(224, 190, 90, 0.07), transparent 62%),
    radial-gradient(900px 700px at 82% 96%, rgba(214, 176, 72, 0.05), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.012) 0%, transparent 58%);
}

body[data-theme="light"] #bg::after {
  background: radial-gradient(150% 125% at 50% 38%, transparent 60%, rgba(0, 0, 0, 0.06));
}

body[data-theme="light"] #fx {
  opacity: 0.75;
}

body[data-theme="light"] #topbar {
  background: rgba(244, 242, 236, 0.82);
}

body[data-theme="light"] .modal-veil {
  background: rgba(120, 116, 105, 0.4);
}

body[data-theme="light"] .badge {
  color: #F4F2EC;
}

@media (max-width: 760px) {
  body[data-theme="light"] #sidebar {
    background: rgba(244, 242, 236, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
  }
}

body[data-theme="light"] .opt.selected,
body[data-theme="light"] .pill.active {
  background: rgba(176, 126, 30, 0.08);
}

/* light mode: the silver cursive CTA needs more definition on the bone canvas */
body[data-theme="light"] .landing-cta .btn.primary {
  color: #6b4d0c;
  border-color: rgba(0, 0, 0, 0.38);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

body[data-theme="light"] .landing-cta .btn.primary:hover {
  border-color: rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* effects off — hide the living quilt + bloom entirely */
body[data-noeffects] #fx,
body[data-noeffects] #bg {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Document-level scroll (window). Never put overflow-y:auto on body —
   Safari pull-to-refresh can leave a nested scrollport stuck after reload. */
html {
  background: var(--canvas);
  touch-action: manipulation;
  /* no height:100% trap — window is the scroller */
  min-height: 100%;
  overscroll-behavior-x: none;
  /* Block document PTR hang (long top-edge pull). SPA shouldn't full-reload. */
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  overflow-x: hidden;
  /* overflow-y stays visible so the window, not body, is the scroller */
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

/* iOS WebKit: fixed chrome layers after PTR */
@supports (-webkit-touch-callout: none) {

  #topbar,
  #sidebar,
  #fx,
  #bg {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* ---------- Pull-to-refresh: progressive glass blur + logo at threshold ---------- */
.ptr-veil {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  /* Glass: frosted wash + progressive backdrop blur driven by --ptr-blur */
  background: color-mix(in srgb, var(--canvas) calc(var(--ptr-glass, 0) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--ptr-blur, 0px)) saturate(1.35);
  backdrop-filter: blur(var(--ptr-blur, 0px)) saturate(1.35);
  transition:
    opacity 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
    background 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
    -webkit-backdrop-filter 0.18s cubic-bezier(0.2, 0.9, 0.2, 1),
    backdrop-filter 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, backdrop-filter;
}

.ptr-veil.ptr-active {
  opacity: 1;
}

/* During finger drag: no transition on blur so it tracks pull 1:1 */
.ptr-veil.ptr-pulling {
  transition: none;
}

/* Full frosted glass while refreshing */
.ptr-veil.ptr-refreshing {
  opacity: 1;
  background: color-mix(in srgb, var(--canvas) 48%, transparent);
}

body[data-theme="light"] .ptr-veil.ptr-refreshing {
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
}

/* Logo: hidden until pull reaches refresh threshold */
.ptr-logo {
  position: relative;
  width: clamp(64px, 16vw, 84px);
  height: clamp(72px, 18vw, 96px);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.12s cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 0.16s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform, opacity;
}

.ptr-veil.ptr-show-logo .ptr-logo {
  opacity: 1;
  transform: scale(1);
}

.ptr-logo-base,
.ptr-logo-silver {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--logo-s) center / contain no-repeat;
  mask: var(--logo-s) center / contain no-repeat;
}

.ptr-logo-base {
  background: var(--ink);
  opacity: 0.5;
}

.ptr-veil.ptr-refreshing .ptr-logo-base {
  opacity: 0.32;
  transition: opacity 0.12s ease;
}

.ptr-logo-silver {
  background: var(--accent);
  opacity: 0.7;
}

.ptr-veil.ptr-armed .ptr-logo-silver {
  opacity: 0.85;
}

.ptr-veil.ptr-refreshing .ptr-logo-silver {
  animation: ptr-silver-pulse 0.2s cubic-bezier(0.33, 0, 0.2, 1) 1 forwards;
}

@keyframes ptr-silver-pulse {
  0% {
    opacity: 0.4;
  }

  45% {
    opacity: 1;
    filter: drop-shadow(0 0 14px var(--accent-glow));
  }

  100% {
    opacity: 0.65;
    filter: drop-shadow(0 0 6px var(--accent-glow));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ptr-veil {
    transition-duration: 0.15s;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--canvas) calc(var(--ptr-glass, 0) * 85%), transparent);
  }

  .ptr-veil.ptr-refreshing .ptr-logo-silver {
    animation: none;
    opacity: 0.9;
  }
}

@media (min-width: 761px) and (pointer: fine) {
  .ptr-veil {
    display: none;
  }
}

/* New screens always land under sticky topbar */
html {
  scroll-padding-top: calc(52px + env(safe-area-inset-top, 0px));
}

/* ---------- wallpaper: canvas lattice below, bloom + cushions + vignette above ---------- */
#fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 720px at 18% 8%, rgba(255, 255, 255, 0.05), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 58%);
  background-size: auto, 107px 107px;
}

#bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(150% 125% at 50% 38%, transparent 52%, rgba(0, 0, 0, 0.55));
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.hidden {
  display: none !important;
}

/* ---------- global header ---------- */
/* frosted glass; extends up into the safe area (notch) with content sitting below it */
#topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(12, 13, 17, 0.55);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border-bottom: 1px solid var(--hairline-dim);
}

/* Flex row: fixed back slot | logo+search (grows) | actions
   Back slot is always reserved so logo/search never shift when Back appears. */
.topbar-inner {
  width: 100%;
  max-width: 1460px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Permanent rail for the back control — always same width whether visible or not */
.topbar-left {
  flex: none;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep layout geometry; only hide visually when not needed */
.topbar-left .hdr-back.hidden {
  visibility: hidden !important;
  pointer-events: none !important;
  display: inline-flex !important;
  /* still occupies the slot */
}

.topbar-left .hdr-back {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  gap: 0;
}

.topbar-left .hdr-back .hlbl {
  display: none;
}

/* icon only — never grow the slot */
.topbar-center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-center .logo {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
}

.topbar-center .logo .logo-mark {
  font-size: 28px;
  width: 28px;
  height: 30px;
}

#header-actions {
  flex: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 0;
}

/* ---------- topbar search — fills all remaining center space ---------- */
.top-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: 100%;
}

.top-search-wrap input {
  width: 100%;
  max-width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-dim);
  color: var(--ink);
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
  outline: none;
  box-sizing: border-box;
}

.top-search-wrap input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
}

body[data-theme="light"] .top-search-wrap input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .top-search-wrap input:focus {
  background: rgba(0, 0, 0, 0.06);
  border-color: var(--accent-dim);
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: min(70vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(18, 20, 26, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline-dim);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  box-sizing: border-box;
}

body[data-theme="light"] .search-dropdown {
  background: rgba(252, 250, 246, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.search-dropdown.hidden {
  display: none;
}

.search-dropdown .group-title {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  padding: 8px 14px 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.search-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  min-width: 0;
  box-sizing: border-box;
}

.search-dropdown .dropdown-item>span:not(.avatar) {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

body[data-theme="light"] .search-dropdown .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.search-dropdown .dropdown-item .avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
  flex: none;
}

.search-dropdown .dropdown-person .btn {
  flex: none;
  padding: 6px 10px;
  font-size: 11px;
  min-height: 30px;
}

.search-dropdown .empty-results {
  padding: 14px;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 760px) {
  .topbar-inner {
    height: 50px;
    padding: 0 10px;
    gap: 6px;
  }

  .topbar-left {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
  }

  .topbar-left .hdr-back {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    height: 36px;
  }

  .topbar-center {
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .topbar-center .logo {
    flex: none;
  }

  .topbar-center .logo .logo-mark {
    font-size: 26px;
    width: 26px;
    height: 28px;
  }

  #header-actions {
    gap: 0;
  }

  .top-search-wrap {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  /* thinner bar; 16px type still avoids iOS focus-zoom */
  .top-search-wrap input {
    height: 34px;
    font-size: 16px;
    padding: 0 12px;
    border-radius: 8px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Landing lang chrome must match Sign in (13px), not form 16px zoom guard */
  .landing-nav .lang-wrap select,
  .lang-wrap select {
    font-size: 13px !important;
  }

  .opt,
  .btn.primary,
  .seg button,
  .tab {
    min-height: 44px;
  }

  .hdr-btn {
    min-height: 36px;
    padding: 6px 8px;
  }

  /* dropdown spans nearly full width under the topbar */
  .search-dropdown {
    position: fixed;
    left: 10px;
    right: 10px;
    width: auto;
    top: calc(env(safe-area-inset-top, 0px) + 50px);
    max-height: min(60vh, 360px);
    border-radius: 12px;
  }
}

/* Political compass */
.compass-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.compass-page {
  max-width: 560px;
  margin: 0 auto;
}

.compass-hero-card {
  padding: 18px 16px 20px;
  text-align: center;
}

.compass-label {
  font-family: var(--label);
  font-size: 22px;
  font-weight: 500;
  margin: 12px 0 4px;
}

.compass-sub {
  font-size: 13px;
  color: var(--ink-dim);
}

.compass-progress {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compass-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-dim);
}

.friends-demo-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.friends-demo-filters select {
  flex: 1 1 120px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 13px;
}

.opts.likert .opt {
  min-height: 48px;
  justify-content: center;
  text-align: center;
}

.opts.likert .opt .key {
  display: none;
}

.qcard.compact-answer .qimg,
.qcard.compact-answer .qstats {
  display: none;
}

.qcard.compact-answer .qmeta {
  margin-bottom: 4px;
}

.hdr-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  border: 1px solid transparent;
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.hdr-btn:hover {
  color: var(--ink);
  border-color: var(--hairline-dim);
  text-decoration: none;
}

.hdr-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.hdr-btn .hlbl {
  display: inline;
}

.hdr-btn .badge {
  left: auto;
  right: 2px;
  top: 2px;
}

/* ---------- shell layout (web: sidebar : content : rail ≈ 1 : φ² : φ) ---------- */
#shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr) 300px;
  min-height: calc(100vh - 56px);
  max-width: 1460px;
  margin: 0 auto;
}

#view {
  padding: var(--s-4) var(--s-4) 120px;
  outline: none;
  min-width: 0;
}

#rail {
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
}

@media (max-width: 1180px) {
  #shell {
    grid-template-columns: 218px minmax(0, 1fr);
  }

  #rail {
    display: none;
  }
}

/* ---------- sidebar ---------- */
#sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--s-3);
  border-right: 1px solid var(--hairline-dim);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.logo-mark {
  font-family: var(--script-formal);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
}

.logo-word {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--ink);
}

#nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  text-decoration: none;
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.nav-item svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.nav-item:hover {
  color: var(--ink);
}

.nav-item.active {
  color: var(--ink);
  border-color: var(--hairline-dim);
  background: var(--glass);
  box-shadow: 0 0 16px rgba(192, 192, 192, 0.07);
}

.nav-item.active svg {
  stroke: var(--accent);
}

.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline-dim);
}

.side-link {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink-faint);
  text-decoration: none;
  font-family: var(--label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
}

.side-link:hover {
  color: var(--ink-dim);
}

.bell-ico {
  font-size: 14px;
}

.badge {
  position: absolute;
  left: 22px;
  top: 2px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--accent);
  color: #2B2208;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  padding: 0 3px;
}

.whoami {
  padding: 8px 12px 0;
}

/* ---------- typographic voices ---------- */
.mono {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}

.mono b {
  color: var(--ink-dim);
  font-weight: 500;
}

.lblf {
  font-family: var(--label);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.display {
  font-size: var(--t-4);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.display-sm {
  font-size: var(--t-3);
  font-weight: 200;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

h1 {
  font-size: var(--t-2);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--t-1);
  font-weight: 400;
}

h3 {
  font-size: 14px;
  font-weight: 500;
}

/* headings, display numbers and the main question copy read in Optima (classic humanist) */
h1,
h2,
h3,
.display,
.display-sm,
.t1,
.qtext,
.hot-text,
.auth-slogan,
.landing-hook,
.how-step h3,
.doc-sec h3,
.world-score {
  font-family: var(--optima);
}

.dim {
  color: var(--ink-dim);
}

.faint {
  color: var(--ink-faint);
}

.t1 {
  font-size: var(--t-1);
  font-weight: 300;
}

.silver {
  color: var(--accent);
}

.pinky {
  color: var(--pink-hi);
}

/* ---------- glass panels & HUD corner ticks ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hud {
  position: relative;
  background: var(--glass);
  border-radius: 4px;
  border: none;
}

.hud::before,
.hud::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.hud::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.hud::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, rgba(201, 184, 240, 0.3), rgba(189, 233, 242, 0.3), transparent);
  margin: var(--s-3) 0;
}

/* ---------- pearl (kept scarce, kept precious) ---------- */
.pearl-text {
  background: linear-gradient(105deg, var(--pearl-a), var(--pearl-b) 55%, var(--pearl-c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.official-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.official-mark .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--pearl-a), var(--pearl-b), var(--pearl-c), var(--pearl-a));
}

.pearl-edge {
  border-image: linear-gradient(105deg, rgba(201, 184, 240, .5), rgba(189, 233, 242, .5), rgba(239, 227, 200, .5)) 1;
}

/* ---------- buttons (hairline, never filled) ---------- */
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 21px;
  min-height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s, color 0.2s, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.05);
}

.btn.primary {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.btn.primary:hover {
  box-shadow: 0 0 22px var(--accent-glow);
  border-color: var(--accent);
}

.btn.primary:active {
  transform: scale(0.97);
  box-shadow: 0 0 28px var(--accent-glow);
  border-color: var(--accent);
}

.btn.subtle {
  border-color: transparent;
  color: var(--ink-faint);
  min-height: 36px;
  padding: 6px 12px;
}

.btn.subtle:hover {
  color: var(--ink-dim);
  box-shadow: none;
}

.btn.danger {
  border-color: rgba(217, 168, 180, 0.4);
  color: var(--disagree);
}

.btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.btn.small {
  min-height: 34px;
  padding: 5px 13px;
  font-size: 12px;
}

/* ---------- pills & chips ---------- */
.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pill {
  padding: 7px 14px;
  border: 1px solid var(--hairline-dim);
  border-radius: 999px;
  color: var(--ink-dim);
  font-family: var(--label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}

.pill:hover {
  color: var(--ink);
  border-color: var(--hairline);
}

.pill.active {
  color: var(--accent);
  border-color: var(--accent-dim);
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.12);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--hairline-dim);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip.cat {
  font-family: var(--label);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

/* category color-coding: a colored dot + tinted border, driven by --cat inline var */
.chip.cat[style*="--cat"] {
  color: var(--cat);
  border-color: color-mix(in srgb, var(--cat) 32%, transparent);
}

.chip.cat[style*="--cat"]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cat);
  margin-right: 2px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--cat) 45%, transparent);
}

.chip.warn {
  color: #D9C9A8;
  border-color: rgba(217, 201, 168, 0.3);
}

.chip.agree {
  color: var(--agree);
  border-color: color-mix(in srgb, var(--agree) 32%, transparent);
}

.chip.clash {
  color: var(--disagree);
  border-color: color-mix(in srgb, var(--disagree) 32%, transparent);
}

/* controversy heat tiers — hotter = brighter */
.heat0 {
  color: var(--ink-faint);
}

.heat1 {
  color: #C9A86A;
}

.heat2 {
  color: #E89B3C;
}

.heat3 {
  color: #FF8E45;
  text-shadow: 0 0 12px rgba(255, 142, 69, 0.5);
}

/* ---------- the question card ---------- */
.qcard {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-3);
  overflow: hidden;
}

/* Next / Previous nav at the top of a question/reveal card */
.qnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--s-3);
}

.qnav .btn {
  min-width: 104px;
}

.qnav-pos {
  color: var(--ink-faint);
  font-size: 11px;
}

.qmeta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}

.qmeta .spacer {
  flex: 1;
}

.qtext {
  font-size: var(--t-2);
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  margin: var(--s-3) 0;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .qtext {
    font-size: 24px;
  }
}

/* the two numbers you see first: how spicy, how many */
.qstats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--hairline-dim);
  border-bottom: 1px solid var(--hairline-dim);
}

.qstat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.qstat svg {
  align-self: center;
}

.qstat .val {
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.qstat .cap {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* lettered ballot options */
.opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 52px;
  padding: 11px 16px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}

.opt:hover {
  border-color: var(--hairline);
  background: var(--glass);
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.06);
}

.opt .key {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dim);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
}

/* duel styles (would you rather / this or that): two options face to face */
.duel-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.opt.duel {
  flex: 1;
  justify-content: center;
  text-align: center;
  min-height: 76px;
  font-size: 15.5px;
  line-height: 1.35;
  padding: 14px 12px;
}

.duel-or {
  flex: none;
  align-self: center;
  font-size: 11px;
  color: var(--ink-faint);
}

@media (max-width: 480px) {
  .duel-row {
    flex-direction: column;
    gap: 8px;
  }

  .opt.duel {
    min-height: 56px;
  }
}

/* ==========================================================================
   PHASE 2: WORLDVIEW BASELINE
   ========================================================================== */
.baseline-hero {
  text-align: center;
}

.constellation {
  padding: 21px;
}

.axis-bar-wrap {
  margin-bottom: 13px;
  font-size: 13px;
}

.axis-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  color: var(--ink-dim);
}

.axis-name {
  color: var(--ink);
  font-weight: bold;
}

.axis-track {
  position: relative;
  height: 16px;
  background: var(--glass-panel);
  border-radius: 8px;
  border: 1px solid var(--ink-faint);
  margin-bottom: 6px;
}

.axis-midline {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--ink-dim);
  z-index: 2;
  opacity: 0.3;
}

.axis-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(230, 196, 120, 0.2);
  z-index: 1;
}

.axis-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 4px;
  background: var(--silver);
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 3;
  box-shadow: 0 0 4px var(--silver);
  transition: left 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.axis-marker.null-state {
  background: var(--ink-dim);
  box-shadow: none;
  opacity: 0.5;
}

.axis-poles {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-dim);
}

.axis-poles .pole {
  transition: color 0.3s;
}

.axis-poles .pole.active {
  color: var(--silver);
  font-weight: bold;
}

.minds-grid .mind-card {
  transition: transform 0.2s, background 0.2s;
  padding: 8px;
  border-radius: 6px;
}

.minds-grid .mind-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.03);
}


/* question style chip + create-form style picker */
.chip.sty {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.style-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, background 0.2s;
}

.style-tile b {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.style-tile span {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-faint);
}

.style-tile.selected {
  border-color: var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.style-tile.selected b {
  color: var(--accent);
}

.opt.selected {
  border-color: var(--accent-dim);
  box-shadow: 0 0 22px var(--accent-glow);
  background: rgba(192, 192, 192, 0.05);
}

.opt.selected .key {
  border-color: var(--accent);
  color: var(--accent);
}

/* conviction + protection + actions row */
.answer-controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events: none;
}

.answer-controls.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg button {
  padding: 8px 14px;
  font-family: var(--label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  border-right: 1px solid var(--hairline-dim);
  min-height: 40px;
}

.seg button:last-child {
  border-right: none;
}

.seg button.active {
  color: var(--accent);
  background: rgba(192, 192, 192, 0.07);
}

.qfoot {
  display: flex;
  align-items: center;
  margin-top: var(--s-3);
  gap: var(--s-2);
}

.shield {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid transparent;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  min-height: 40px;
}

.shield:hover {
  color: var(--ink-dim);
  border-color: var(--hairline-dim);
}

.shield.v {
  color: #C9B8F0;
}

.shield.c {
  color: var(--accent);
}

/* ---------- bars: thin-line instruments ---------- */
.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 84px;
  gap: var(--s-2);
  align-items: center;
  padding: 7px 0;
}

.bar-row .blabel {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-row .bval {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar-row .bval b {
  color: var(--ink);
  font-weight: 500;
}

.track {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-dim);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fill.you {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.fill.agree {
  background: var(--agree);
}

.fill.disagree {
  background: var(--disagree);
}

/* conviction + Confirm, shown right under the selected option */
.answer-confirm {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 4px 0 6px;
  padding: 12px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  animation: confirm-in 0.2s ease-out;
}

.answer-confirm .conv-label {
  color: var(--ink-faint);
}

@keyframes confirm-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- reveal ---------- */
.reveal-head {
  margin-bottom: var(--s-3);
}

.reveal-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.your-pick {
  font-size: 15px;
  color: var(--ink-dim);
}

.your-pick b {
  color: var(--ink);
  font-weight: 600;
}

/* clean option distribution — your pick is enlarged + accented */
.dist-chart {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: var(--s-2);
}

.dist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.dist-opt {
  font-size: 13px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dist-key {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dim);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
}

.dist-pct {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.dist-bar {
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.dist-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink-dim);
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.dist-row.mine .dist-bar {
  height: 18px;
}

.dist-row.mine .dist-fill {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

.dist-row.mine .dist-opt {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}

/* ---------- 0–11 rating input: number pad ---------- */
.rating-pad {
  display: flex;
  gap: 5px;
  margin-top: var(--s-2);
}

.rating-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-dim);
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.2s;
}

.rating-btn:hover {
  border-color: var(--hairline);
  color: var(--ink);
  background: var(--glass);
}

.rating-btn.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(192, 192, 192, 0.08);
  box-shadow: 0 0 18px var(--accent-glow);
  font-weight: 600;
}

.rating-btn.perfect {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.rating-btn.perfect.selected {
  box-shadow: 0 0 24px var(--accent-glow);
}

.rating-scaleline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.rating-scaleline>span:last-child {
  margin-left: auto;
}

.rating-readout {
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 480px) {
  .rating-pad {
    gap: 3px;
  }

  .rating-btn {
    font-size: 12px;
    height: 34px;
  }
}

@media (max-width: 340px) {
  .rating-btn {
    font-size: 11px;
  }
}

/* ---------- 0–11 rating reveal: histogram ---------- */
.world-score {
  font-family: var(--optima);
  font-weight: 300;
  font-size: 30px;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.world-score.silver {
  color: var(--accent);
}

.world-score.pinky {
  color: var(--pinky, #C99AC0);
}

.world-score .ws-out {
  font-size: 14px;
  color: var(--ink-faint);
  font-weight: 400;
  margin-left: 1px;
}

.rating-hist {
  display: flex;
  gap: 5px;
  align-items: end;
  margin-top: var(--s-2);
}

.rh-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

@media (max-width: 480px) {
  .rating-hist {
    gap: 3px;
  }
}

.rh-pct {
  font-size: 9px;
  color: var(--accent);
  height: 12px;
  line-height: 12px;
}

.rh-track {
  width: 100%;
  height: 96px;
  display: flex;
  align-items: flex-end;
  border-radius: 4px;
}

.rh-bar {
  width: 100%;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 2px;
}

.rh-col.mine .rh-bar {
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

.rh-num {
  font-size: 11px;
  color: var(--ink-faint);
}

.rh-col.mine .rh-num {
  color: var(--accent);
  font-weight: 600;
}

.dist-row.mine .dist-key {
  border-color: var(--accent);
  color: var(--accent);
}

.dist-row.mine .dist-pct {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}

.stagger>* {
  opacity: 0;
  transform: translateY(8px);
}

.stagger.go>* {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.rsection {
  margin-top: var(--s-4);
}

.rsection .mono.title {
  display: block;
  margin-bottom: var(--s-2);
}

.next-row {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
  align-items: center;
}

/* ---------- lists ---------- */
.qrow {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--hairline-dim);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
}

.qrow:hover {
  background: var(--glass);
}

.qrow .qr-text {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  min-width: 0;
}

.qrow .qr-meta {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  white-space: nowrap;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.item-row {
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.item-row:last-child {
  border-bottom: none;
}

/* ---------- Questions tab: control bar + roomy list rows ---------- */
.qtab-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.qtab-search {
  flex: 1 1 220px;
  display: flex;
}

.qtab-search input {
  width: 100%;
}

.qtab-selects {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.qtab-controls select {
  width: auto;
}

.seg.view {
  margin-left: auto;
}

@media (max-width: 760px) {

  /* stack vertically on mobile: search always visible on top, controls wrap below — no side-scroll */
  .qtab-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .qtab-search {
    flex: none;
  }

  .qtab-selects {
    width: 100%;
  }

  .qtab-selects select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .qtab-selects .seg.view {
    flex: 1 1 100%;
  }

  .qtab-selects .seg.view button {
    flex: 1;
  }

  .seg.view {
    margin-left: 0;
  }
}

.qlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qlist-row {
  display: flex;
  gap: var(--s-2);
  align-items: stretch;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  text-decoration: none;
  color: var(--ink);
}

.qlist-row:hover {
  background: var(--glass);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.04);
  border-color: var(--hairline);
}

.qlist-row .qlr-img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  flex: none;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--hairline-dim);
}

.qlist-row .qlr-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
}

.qlist-row .qlr-top {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qlist-row .qlr-cat {
  font-family: var(--label);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cat, var(--ink-dim));
}

.qlist-row .qlr-text {
  font-size: 15px;
  line-height: 1.35;
}

.qlist-row .qlr-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  flex-wrap: wrap;
}

.qlist-row .qlr-count {
  color: var(--ink-dim);
  font-size: 11px;
}

.qlist-row .qlr-count b {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}

.qlist-row .qlr-check {
  color: var(--agree);
}

/* ---------- people cards ---------- */
.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.dcard {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: box-shadow 0.25s;
}

.dcard:hover {
  box-shadow: 0 0 24px rgba(192, 192, 192, 0.08);
}

.dcard .dscore {
  font-size: 38px;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.uname {
  font-family: var(--label);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.spicy {
  border-top: 1px solid var(--hairline-dim);
  padding-top: 9px;
  font-size: 12px;
  color: var(--ink-dim);
}

.spicy .vs {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* mode picker (find people) */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

@media (max-width: 600px) {
  .mode-grid {
    grid-template-columns: 1fr;
  }
}

.mode-card {
  padding: var(--s-2) var(--s-2);
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: all 0.2s;
}

.mode-card h3 {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}

.mode-card p {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.45;
}

.mode-card.active {
  border-color: var(--accent-dim);
  box-shadow: 0 0 16px rgba(192, 192, 192, 0.12);
}

.mode-card.active h3 {
  color: var(--accent);
}

/* guided find-people sections */
.q-section {
  padding: var(--s-3);
  margin-bottom: var(--s-2);
}

.q-section summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
}

.q-section summary::-webkit-details-marker {
  display: none;
}

.q-section summary::after {
  content: '+';
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 18px;
}

.q-section[open] summary::after {
  content: '–';
}

.slider-readout {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
}

.slabel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slabel .mono {
  color: var(--ink-faint);
}

.pin-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.pin-hit {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}

.pin-hit:hover {
  border-color: var(--accent-dim);
}

.pin-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.pin-browser {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
}

/* Pin answers — clear filter control on Find people */
.pin-block {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.pin-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pin-block-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.pin-block-title {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pin-block-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-dim);
  max-width: 36em;
}

.pin-block-toggle {
  flex: none;
  min-width: 7.5rem;
}

.pin-block-toggle.is-on {
  border-color: var(--accent-dim);
  color: var(--ink);
}

.pin-block-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-dim);
}

.pin-block-body.hidden {
  display: none;
}

.pin-active-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.pin-details summary {
  list-style: none;
}

.pin-details summary::-webkit-details-marker {
  display: none;
}

.pin-details summary::after {
  content: ' ▾';
  color: var(--ink-faint);
}

.pin-details[open] summary::after {
  content: ' ▴';
}

/* Temperament — dedicated page + teaser */
.temper-page {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.temper-page-h1 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}

.temper-hero {
  text-align: center;
  padding: 28px 20px 22px;
}

.temper-hero-code {
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.05;
  color: var(--ink);
}

.temper-hero-title {
  font-family: var(--label);
  font-size: 18px;
  font-weight: 500;
  margin-top: 10px;
  letter-spacing: -0.01em;
}

.temper-hero-blurb {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.45;
  max-width: 28em;
  margin: 8px auto 0;
}

.temper-hero-actions {
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.temper-hero-locked .temper-hero-title {
  margin-top: 4px;
}

.temper-unlock-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.temper-unlock-dim {
  padding: 10px 6px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.temper-unlock-n {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}

.temper-essay {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

.temper-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.temper-list-h {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.temper-list {
  margin: 0;
  padding-left: 1.15em;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.temper-list li {
  margin-bottom: 4px;
}

.temper-side-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0 0 6px;
}

.temper-side-note b {
  color: var(--ink);
  font-weight: 500;
}

.temper-pole-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.temper-pole-card {
  padding: 14px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.temper-pole-card.is-locked {
  opacity: 0.72;
}

.temper-pole-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.temper-pole-short {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.temper-pole-q {
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.temper-pole-letter {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}

.temper-pole-bar {
  margin: 4px 0 6px;
}

.temper-pole-ends {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.temper-pole-about {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0 0 6px;
}

.temper-pole-help {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 6px;
}

.temper-pole-meta {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.temper-dim-bar {
  height: 4px;
  background: var(--hairline-dim);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.temper-dim-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  opacity: 0.75;
}

.temper-neighbor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.temper-neighbor {
  padding: 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
}

.temper-neighbor-code {
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.temper-neighbor-title {
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}

.temper-set-track {
  height: 4px;
  background: var(--hairline-dim);
  overflow: hidden;
}

.temper-set-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.7;
  transition: width 0.25s ease;
}

.temper-how {
  margin: 0;
  padding-left: 1.15em;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.temper-how li {
  margin-bottom: 6px;
}

.temper-catalog-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline-dim);
  font-size: 13px;
}

.temper-catalog-row:last-child {
  border-bottom: none;
}

.temper-catalog-row b {
  flex: none;
  min-width: 4.5em;
}

.temper-all-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.temper-all-chip {
  padding: 10px 8px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  text-align: center;
  min-width: 0;
}

.temper-all-chip.is-you {
  border-color: var(--accent-dim);
  background: rgba(255, 255, 255, 0.04);
}

.temper-all-code {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.temper-all-title {
  display: block;
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 3px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.temper-teaser {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 16px 18px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.temper-teaser:hover {
  border-color: var(--accent-dim);
  background: rgba(255, 255, 255, 0.04);
}

.temper-teaser-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.temper-teaser-copy {
  min-width: 0;
  flex: 1;
}

.temper-teaser-copy .title {
  display: block;
  margin-bottom: 4px;
}

.temper-teaser-code {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.1;
}

.temper-teaser-sub {
  font-size: 13px;
  line-height: 1.35;
  margin-top: 4px;
  color: var(--ink-dim);
}

.temper-teaser-go {
  flex: none;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.06em;
}

@media (max-width: 560px) {
  .temper-hero-code {
    font-size: 36px;
    letter-spacing: 0.14em;
  }

  .temper-unlock-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .temper-two-col,
  .temper-neighbor-grid {
    grid-template-columns: 1fr;
  }

  .temper-all-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* topic fine-tune chips */
.mask-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mask-chip {
  padding: 7px 13px;
  border: 1px solid var(--hairline-dim);
  border-radius: 999px;
  font-family: var(--label);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-faint);
  transition: all 0.15s;
}

.mask-chip.match {
  color: var(--agree);
  border-color: rgba(158, 207, 180, 0.4);
}

.mask-chip.differ {
  color: var(--pink-hi);
  border-color: rgba(226, 169, 184, 0.4);
}

.mask-chip.ignore {
  color: var(--ink-faint);
  border-style: dashed;
  opacity: 0.6;
}

/* ---------- comments ---------- */
.comment {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-dim);
  align-items: flex-start;
}

.comment:last-child {
  border-bottom: none;
}

.comment .cbody {
  flex: 1;
  min-width: 0;
}

.comment .who {
  font-family: var(--label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
}

.comment .ctext {
  font-size: 13px;
  margin-top: 2px;
}

.comment .cmeta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 3px;
}

.share-holder {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline-dim);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

.share-holder svg {
  display: block;
  width: 100%;
  height: auto;
}

.rate-row {
  gap: var(--s-2);
  align-items: center;
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 2px 6px;
  border-radius: 5px;
  transition: color 0.15s;
}

.like-btn:hover {
  color: var(--ink-dim);
}

.like-btn.on {
  color: var(--accent);
}

.flag-btn {
  color: var(--ink-faint);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  transition: color 0.15s;
}

.flag-btn:hover {
  color: var(--disagree);
}

.like-btn span:first-child {
  font-size: 12px;
}

/* ---------- questionnaires ---------- */
.setgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--s-2);
}

.setcard {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.25s;
}

.setcard:hover {
  box-shadow: 0 0 24px rgba(192, 192, 192, 0.08);
}

.setcard h3 {
  font-family: var(--label);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.setcard p {
  font-size: 12px;
  color: var(--ink-dim);
}

/* ---------- forms ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 14px rgba(192, 192, 192, 0.12);
}

/* keyboard navigation: a visible focus ring on everything interactive, without disturbing mouse use */
:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 2px;
  border-radius: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C6372' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

select option {
  background: #14161c;
  color: var(--ink);
}

label.f {
  display: block;
  margin-bottom: var(--s-2);
}

label.f .mono {
  display: block;
  margin-bottom: 6px;
}

input[type="range"] {
  accent-color: var(--accent);
  width: 100%;
}

.field-note {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* toggle */
.toggle {
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  flex: none;
  transition: border-color 0.2s;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: all 0.2s;
}

.toggle.on {
  border-color: var(--accent-dim);
}

.toggle.on::after {
  left: 19px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.tog-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 0;
}

.tog-row .tlabel {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-dim);
}

/* per-field consents: field name on its own line, then two clean toggle rows (no cramming/overlap) */
.demo-consent {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.demo-consent:last-child {
  border-bottom: none;
}

.dc-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 7px;
}

.dc-label .mono {
  font-weight: 400;
  color: var(--ink-faint);
}

.dc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
}

.dc-toggle .mono {
  flex: 1;
  min-width: 0;
  color: var(--ink-dim);
}

/* ---------- privacy matrix ---------- */
.matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.matrix {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
}

.matrix th {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding: 6px 4px;
  text-align: center;
}

.matrix td {
  padding: 4px;
  border-top: 1px solid var(--hairline-dim);
}

.matrix td.rowname {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  padding-right: 10px;
}

.mcell {
  width: 100%;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dim);
  border-radius: 5px;
  transition: all 0.15s;
  color: var(--accent);
}

.mcell:hover {
  border-color: var(--hairline);
}

.mcell.on {
  border-color: var(--accent-dim);
  background: rgba(192, 192, 192, 0.08);
  box-shadow: inset 0 0 8px rgba(192, 192, 192, 0.08);
}

.mcell.on::after {
  content: '✓';
  font-size: 14px;
  line-height: 1;
  color: var(--accent);
}

/* ---------- profile ---------- */
.poster {
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--hairline-dim);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* square thumbnail shown to the LEFT of question rows everywhere (image, or a category-colored tile) */
.qthumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 7px;
  border: 1px solid var(--hairline-dim);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.qthumb.ph {
  background: linear-gradient(145deg, color-mix(in srgb, var(--cat) 26%, transparent), color-mix(in srgb, var(--cat) 8%, transparent));
  border-color: color-mix(in srgb, var(--cat) 30%, transparent);
}

.qthumb.ph span {
  font-size: 11px;
}

.qthumb svg {
  width: 22px;
  height: 22px;
  opacity: 0.85;
}

/* social link as plain text: "X · @handle" */
.social-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  margin: 3px 6px 3px 0;
  font-size: 13px;
  color: var(--ink-dim);
  border: 1px solid var(--hairline-dim);
  border-radius: 999px;
}

.social-row:hover {
  color: var(--ink);
  border-color: var(--hairline);
  text-decoration: none;
}

.social-row svg {
  flex: none;
}

/* "you both answered" indicator on another user's profile */
.shared-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agree);
  border: 1px solid color-mix(in srgb, var(--agree) 38%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
}

.ans-row.shared {
  /* equal chrome — no left accent bar */
  border: 1px solid color-mix(in srgb, var(--agree) 35%, var(--hairline-dim));
  border-radius: var(--radius-sm);
  padding-left: var(--s-2);
  padding-right: var(--s-2);
}

/* "How different groups answered" — legend + per-group stacked distribution */
/* "how different groups answered" — clean rounded stacked bars */
.opt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: var(--s-3);
}

.opt-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--label);
  font-size: 11.5px;
  color: var(--ink-dim);
}

.opt-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.brk-group {
  margin-top: var(--s-3);
}

.brk-group>.mono.title {
  display: block;
  margin-bottom: 11px;
}

.brk-row {
  margin: 15px 0;
}

.brk-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 7px;
}

.brk-label {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.brk-top {
  font-family: var(--label);
  font-size: 11px;
  color: var(--ink-faint);
  text-align: right;
  letter-spacing: 0.01em;
}

.stack-bar {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
}

.stack-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.stack-seg+.stack-seg {
  box-shadow: inset 1.5px 0 0 rgba(10, 11, 14, 0.4);
}

.stack-seg.mine {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  z-index: 1;
}

.seg-lbl {
  font-family: var(--label);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
}

.brk-you {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--label);
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-top: 7px;
}

.brk-you::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

/* header back button */
.hdr-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
}

.hdr-back:hover {
  color: var(--ink);
  border-color: var(--hairline-dim);
}

.hdr-back svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.mono-poster {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}

.mono-poster span {
  font-family: var(--label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
  font-family: var(--label);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink-dim);
  background: var(--glass);
  flex: none;
}

.avatar.sm {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.avatar.img {
  background-size: cover;
  background-position: center;
}

/* image picker control (avatars + question/subject pictures) */
.imgpick {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.imgpick input[type="file"] {
  display: none;
}

.imgpick .drop {
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.imgpick .drop:hover {
  border-color: var(--accent-dim);
  color: var(--ink-dim);
}

.imgpick .drop.sq {
  width: 96px;
  height: 96px;
}

.imgpick .drop.round {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.imgpick .drop.has {
  border-style: solid;
  border-color: var(--hairline-dim);
}

.imgpick .ipmeta {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* square picture above a question/subject */
.qimg {
  display: block;
  width: 200px;
  max-width: 70%;
  aspect-ratio: 1;
  margin: 4px auto 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline-dim);
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.phead-card {
  position: relative;
}

/* Desktop: in-flow above counts (first child of .phead-right) — never overlaps follow stats.
   Mobile repositions absolute top-right of the card (see max-width: 760px). */
.phead-edit-btn {
  position: static;
  z-index: 2;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  flex: none;
  align-self: flex-end;
}

.phead {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Profile header: top row (avatar + stats), then full-width identity */
.phead-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex: 1 1 240px;
  min-width: 0;
  width: 100%;
}

.phead-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.phead-avatar-col {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  flex: none;
}

.phead-info {
  width: 100%;
  min-width: 0;
}

.phead-name-row {
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.phead-name-row .uname {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

.phead-meta {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
  /* natural wrap — no huge gaps between fragments */
  word-break: break-word;
}

.phead-bio {
  font-size: 14px;
  line-height: 1.45;
  margin: 10px 0 0;
  max-width: 36em;
}

.phead-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  max-width: 100%;
}

.phead-socials .social-row {
  margin: 0;
}

.phead-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
}

.phead-self-actions {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.phead-self-actions .btn {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.phead-social-actions {
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

/* Fixed widths so Follow/Following and friend labels never reflow the row */
.phead-social-actions .btn {
  justify-content: center;
  box-sizing: border-box;
}

.phead-btn-follow {
  min-width: 7.25em;
  /* "Following ✓" */
}

.phead-btn-friend {
  min-width: 7.5em;
  /* "Add friend" / "Requested…" / "Friends ✓" */
}

.phead-btn-compare {
  min-width: 6.5em;
}

.phead-btn-wave {
  min-width: 4.25em;
}

.phead-btn-more {
  min-width: 2.5em;
  padding-left: 10px;
  padding-right: 10px;
}

/* profile header counts (friends · followers · following) */
.phead-counts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-faint);
}

.phead-counts .pc {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--ink-faint);
  white-space: nowrap;
  padding: 2px 0;
}

.phead-counts .pc b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.phead-counts .pc-dot {
  display: inline-block;
  margin: 0 10px;
  color: var(--ink-faint);
  opacity: 0.55;
  user-select: none;
  font-weight: 400;
}

.phead-counts a.pc {
  text-decoration: none;
}

.phead-counts a.pc:hover {
  color: var(--ink-dim);
}

.phead-counts a.pc:hover b {
  color: var(--accent);
}

/* showcase grid + cards */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.showcase-card:hover {
  border-color: var(--hairline);
  transform: translateY(-2px);
  text-decoration: none;
}

.sc-media {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--hairline-dim);
}

.sc-media.ph {
  background: linear-gradient(145deg, color-mix(in srgb, var(--cat) 26%, transparent), color-mix(in srgb, var(--cat) 7%, transparent));
}

.sc-ini {
  font-size: 30px;
  font-weight: 600;
}

.sc-media svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
}

.sc-body {
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sc-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sc-sub {
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-pick {
  font-size: 11px;
  color: var(--accent);
  margin-top: 1px;
}

/* showcase editor */
.sc-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-2);
}

.sc-edit-row,
.sc-result-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  width: 100%;
  text-align: left;
  color: var(--ink);
}

.sc-result-row {
  cursor: pointer;
  background: none;
}

.sc-result-row:hover {
  border-color: var(--hairline);
  background: var(--glass);
}

.sc-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  margin-top: var(--s-2);
}

/* discussion (comments) — a main feature, made prominent */
.disc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}

.disc-title {
  font-family: var(--label);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.disc-count {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}

.disc-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  margin-bottom: var(--s-3);
}

.disc-composer input {
  flex: 1;
  min-width: 0;
}

.disc-locked {
  padding: 11px 13px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: 13px;
  margin-bottom: var(--s-3);
}

/* Full discussion room (#/question/:id/discuss) */
.disc-room {
  max-width: 720px;
  margin: 0 auto;
}

.disc-room-head {
  margin-bottom: 0;
}

.disc-room-q {
  font-size: clamp(18px, 4.2vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  margin: 10px 0 12px;
  letter-spacing: -0.01em;
}

.disc-room-meta {
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.disc-room-body {
  min-height: 40vh;
}

.disc-toolbar {
  margin-bottom: var(--s-3);
}

.disc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-dim);
}

.disc-ctrl-lbl {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* Cap height — global `select { width:100% }` + column stretch was blowing this into a tall empty box on iOS */
.disc-filter-sel {
  max-width: 200px;
  min-width: 120px;
  flex: 0 1 160px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 32px 0 12px;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 40px;
}

.disc-sort-pills {
  flex: 1 1 auto;
}

.disc-composer-sticky {
  margin-bottom: var(--s-3);
}

.disc-teaser-panel .disc-teaser-list .comment:nth-child(n+4) {
  /* teaser already limited */
}

.disc-open-full {
  text-decoration: none;
}

@media (max-width: 760px) {
  .disc-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .disc-filter-sel {
    max-width: none;
    width: 100%;
    flex: 0 0 auto;
  }

  .disc-sort-pills {
    width: 100%;
  }
}

.disc-full-list {
  margin-bottom: var(--s-3);
}

.creator-link {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px dashed var(--hairline);
}

.creator-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-dim);
  text-decoration: none;
}

.discuss-btn {
  border-color: var(--accent-dim);
  color: var(--accent);
  font-weight: 500;
}

.discuss-btn:hover {
  box-shadow: 0 0 18px var(--accent-glow);
  border-color: var(--accent);
  text-decoration: none;
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--hairline-dim);
  margin: var(--s-3) 0 var(--s-2);
}

.tab {
  padding: 9px 16px;
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---------- panels / layout helpers ---------- */
.panel {
  padding: var(--s-3);
}

.row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}

.row .spacer,
.spacer {
  flex: 1;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

@media (max-width: 860px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

/* ---------- editions ---------- */
.editions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

@media (max-width: 880px) {
  .editions-grid {
    grid-template-columns: 1fr;
  }
}

.edition-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.edition-card.secret {
  border-color: var(--accent-dim);
  box-shadow: 0 0 26px var(--accent-glow);
}

.ed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.ed-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.ed-status {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline-dim);
  color: var(--ink-faint);
  white-space: nowrap;
}

.ed-status.live {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.ed-status.planned {
  color: var(--ink-dim);
}

.ed-tagline {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.ed-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.ed-feats li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.45;
}

.ed-feats li::before {
  content: '◈';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 10px;
  top: 2px;
}

.ed-interest {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--s-2);
}

.ed-count {
  color: var(--ink-faint);
  font-size: 11px;
}

/* ---------- compare: build-a-group ---------- */
.cohort-builder {
  margin-top: var(--s-3);
}

.cohort-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-2) 0 var(--s-3);
}

.cohort-controls select {
  flex: 1 1 140px;
  min-width: 0;
}

.cohort-result {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

.cohort-arc {
  flex: 0 0 auto;
}

.cohort-cap {
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
  color: var(--ink-dim);
}

.cohort-cap b {
  font-weight: 500;
}

@media (max-width: 600px) {
  .cohort-result {
    flex-direction: column;
    text-align: center;
  }

  .cohort-cap {
    max-width: none;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.page-head {
  margin-bottom: var(--s-3);
}

.page-head .mono {
  display: block;
  margin-bottom: 6px;
}

/* compact head: one small label, tight to the top, used on the Questions tab */
.page-head.compact {
  margin-bottom: var(--s-2);
}

.page-head.compact .mono {
  display: inline;
  margin-bottom: 0;
}

.page-head.compact .row {
  margin-bottom: 10px;
}

/* Cards view: filters collapse into a dropdown so the card is the whole screen */
.cards-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-2);
}

.cards-bar .qtab-drop {
  flex: 1;
}

.qtab-drop {
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
}

.qtab-drop>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  font-size: 13px;
}

.qtab-drop>summary::-webkit-details-marker {
  display: none;
}

.qtab-drop>summary .mono {
  color: var(--ink-faint);
  margin-left: auto;
}

.qtab-drop[open]>summary {
  border-bottom: 1px solid var(--hairline-dim);
}

.qtab-drop .qtab-controls {
  padding: 12px 13px;
  margin: 0;
}

.cards-slot {
  max-width: 720px;
  margin: 0 auto;
}

.center {
  text-align: center;
}

.mt1 {
  margin-top: var(--s-1);
}

.mt2 {
  margin-top: var(--s-2);
}

.mt3 {
  margin-top: var(--s-3);
}

.mt4 {
  margin-top: var(--s-4);
}

.mb2 {
  margin-bottom: var(--s-2);
}

.mb3 {
  margin-bottom: var(--s-3);
}

/* ---------- rail ---------- */
.rail-panel {
  padding: var(--s-3);
  margin-bottom: var(--s-2);
}

.rail-panel .mono.title {
  display: block;
  margin-bottom: var(--s-2);
}

/* ---------- landing ---------- */
#auth-root {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  min-height: 100svh;
}

.landing {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--s-3) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  /* top padding lives on landing-top so hero can fill the first screen cleanly */
}

.landing-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 20;
  /* full-bleed: cancel the parent's side padding so the header background reaches the screen
     edges (incl. the iOS safe-area notches), then add the inset back so content stays aligned */
  margin-left: calc(-1 * var(--s-3));
  margin-right: calc(-1 * var(--s-3));
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(var(--s-3) + env(safe-area-inset-right, 0px)) 10px calc(var(--s-3) + env(safe-area-inset-left, 0px));
  margin-bottom: 0;
  background: linear-gradient(180deg, var(--canvas) 62%, transparent 100%);
  backdrop-filter: blur(0px);
}

.landing-top .logo.solo .logo-mark {
  font-size: 30px;
  width: 30px;
  height: 34px;
}

.landing-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: none;
}

.landing-nav a {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 6px 10px;
  line-height: 1.2;
  text-decoration: none;
}

/* Sign in + language + theme share one control band */
.landing-nav .landing-signin,
.landing-nav .lang-wrap,
.landing-nav .theme-toggle {
  height: 32px;
  box-sizing: border-box;
}

.landing-nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* Language picker — same optical size as .landing-signin / nav links (overrides global select) */
.landing-nav .lang-wrap,
.lang-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-dim);
  flex: none;
  line-height: 1;
}

.landing-nav .lang-wrap select,
.lang-wrap select {
  /* Beat global select { width:100%; font-size:14px } and mobile 16px !important */
  width: auto !important;
  max-width: 7.5rem;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--label) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none;
  line-height: 1.2 !important;
  padding: 6px 14px 6px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%239CA3B2' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 8px 5px !important;
  color: var(--ink-dim) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
}

.landing-nav .lang-wrap select:hover,
.landing-nav .lang-wrap select:focus,
.lang-wrap select:hover,
.lang-wrap select:focus {
  color: var(--ink) !important;
  outline: none;
  border: none !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23E9EBF0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body[data-theme="light"] .landing-nav .lang-wrap select,
body[data-theme="light"] .lang-wrap select {
  color: var(--ink-dim) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23565a63' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

body[data-theme="light"] .landing-nav .lang-wrap select:hover,
body[data-theme="light"] .landing-nav .lang-wrap select:focus,
body[data-theme="light"] .lang-wrap select:hover,
body[data-theme="light"] .lang-wrap select:focus {
  color: var(--ink) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%231A1B1F' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.lang-wrap select option {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--ink);
  background: var(--canvas);
}

.lang-wrap svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex: none;
  opacity: 0.9;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.landing-nav .theme-toggle {
  background: none;
  border: none;
  color: var(--ink-dim);
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
}

.landing-nav .theme-toggle:hover {
  color: var(--ink);
}

.logo.wordmark .logo-word {
  font-size: 15px;
}

@media (max-width: 620px) {
  .landing-nav .lnav-hide {
    display: none;
  }

  .landing-nav {
    gap: 4px;
  }

  .landing-signin {
    padding: 6px 8px;
    font-size: 12.5px;
  }
}

/* privacy & security blurb */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}

@media (max-width: 620px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

.trust-item {
  padding: var(--s-3);
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
}

/* Display flourish — classic serif italic (no trendy script faces) */
.cursive,
.btn.cursive {
  font-family: var(--cursive);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* accent colour swatches (Settings) */
.accent-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--hairline-dim);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s;
}

.accent-swatch:hover {
  transform: scale(1.1);
}

.accent-swatch.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--canvas), 0 0 12px rgba(255, 255, 255, 0.25);
}

.trust-item h4 {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.trust-item p {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}

.no-censor {
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline-dim);
}

.no-censor b {
  color: var(--ink);
  font-weight: 500;
}

/* docs */
.doc {
  padding: var(--s-4) var(--s-3) var(--s-5);
}

.doc-top {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.doc-sec {
  margin-top: var(--s-3);
}

.doc-sec h3 {
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--ink);
}

.doc-sec p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* footer */
.site-footer {
  border-top: 1px solid var(--hairline-dim);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}

.footer-cols {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.footer-brand {
  flex: 1;
  min-width: 200px;
}

.footer-brand .tagline {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: var(--s-1);
  max-width: 280px;
  line-height: 1.5;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col .h {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.footer-col a {
  font-size: 13px;
  color: var(--ink-dim);
}

.footer-col a:hover {
  color: var(--ink);
  text-decoration: none;
}

.footer-base {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline-dim);
  font-size: 12px;
  color: var(--ink-faint);
}

.footer-base .vincere {
  font-family: var(--label);
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer-base .vincere b {
  color: var(--ink-dim);
  font-weight: 500;
}

.pulse-banner {
  padding: 16px 16px 14px;
  margin-bottom: var(--s-3);
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 28px var(--accent-glow);
}

.pulse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pulse-head .archive-eyebrow {
  flex: 1;
}

.pulse-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pulse-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font: inherit;
}

.pulse-chip:hover {
  border-color: var(--accent-dim);
  background: var(--glass);
}

.pulse-chip .mono {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.pulse-chip.hot .mono {
  color: var(--disagree);
}

.pulse-chip.rare .mono {
  color: var(--pearl-a);
}

.pulse-chip span:last-child {
  font-size: 13.5px;
  line-height: 1.35;
}

.baseline-coach {
  padding: 14px 16px;
  margin-bottom: var(--s-3);
  border: 1px dashed var(--hairline);
}

.create-moment {
  padding: 16px 18px;
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 24px var(--accent-glow);
}

.qlr-badge {
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--hairline-dim);
}

.qlr-badge.fresh {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.qlr-badge.hot {
  color: var(--disagree);
  border-color: rgba(217, 168, 180, 0.45);
}

/* Reveal ceremony */
.reveal-hero-num {
  text-align: center;
  margin: 8px 0 16px;
  line-height: 1;
}

.reveal-pct-big {
  font-family: var(--optima);
  font-weight: 300;
  font-size: clamp(56px, 12vw, 88px);
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: 0 0 40px var(--accent-glow);
}

.reveal-pct-unit {
  font-family: var(--optima);
  font-weight: 300;
  font-size: clamp(28px, 6vw, 40px);
  color: var(--accent);
  margin-left: 2px;
  opacity: 0.85;
}

.reveal-pct-sub {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.reveal-head.rare .reveal-pct-big {
  color: var(--accent);
}

.reveal-hero-num.rare .reveal-pct-sub {
  color: var(--accent);
}

.reveal-more {
  margin-top: var(--s-2);
}

.reveal-more-btn {
  width: 100%;
  justify-content: flex-start;
}

.reveal-more-body {
  margin-top: var(--s-2);
}

.unlock-modal {
  padding: 8px 4px 4px;
}

.unlock-glyph {
  font-size: 28px;
  color: var(--accent);
  text-shadow: 0 0 24px var(--accent-glow);
}

.connect-rescue .rescue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* ---- People hub header: title + search ---- */
.people-head {
  margin-bottom: 12px;
}

.people-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.people-head-title {
  flex: none;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  font-family: var(--label);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.people-head-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
  margin-left: auto;
}

.people-head-search {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--hairline-dim);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 14px;
  outline: none;
}

.people-head-search:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

.people-head-hits {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  background: rgba(18, 20, 26, 0.98);
  border: 1px solid var(--hairline-dim);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
}

.people-head-hits.empty {
  display: none;
}

body[data-theme="light"] .people-head-hits {
  background: rgba(252, 250, 246, 0.98);
}

.people-scope {
  margin-bottom: 14px;
  width: 100%;
  max-width: 480px;
}

.people-scope button {
  flex: 1;
}

/* ---- Find: primary bar + collapsed panels ---- */
.find-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}

.find-bar-primary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.find-bar-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.find-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.find-field-lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-left: 2px;
}

.find-ctl {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 13px;
}

.find-panel {
  flex: 1 1 140px;
  min-width: 120px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  padding: 0 12px;
}

.find-panel-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
}

.find-panel-sum::-webkit-details-marker {
  display: none;
}

.find-panel-hint {
  font-size: 10px;
}

.find-panel-body {
  padding: 0 0 12px;
  border-top: 1px solid var(--hairline-dim);
}

.find-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding-top: 10px;
}

@media (max-width: 760px) {
  .people-head-title {
    font-size: 20px;
  }

  .people-head-search {
    height: 36px;
    font-size: 16px;
  }

  .people-head-search-wrap {
    max-width: none;
  }

  .find-bar-primary {
    grid-template-columns: 1fr;
  }

  .find-ctl {
    font-size: 16px;
    min-height: 40px;
  }

  .find-bar-more {
    flex-direction: column;
  }

  .find-panel {
    flex: 1 1 auto;
    width: 100%;
  }
}

.find-results {
  min-height: 120px;
}

.find-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.find-results-hint {
  font-size: 12px;
}

.find-grid {
  margin-top: 4px;
}

.find-fine {
  margin-top: var(--s-4);
}

.find-fine-sum {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--label);
  font-weight: 500;
  font-size: 14px;
  padding: 4px 0;
}

.find-fine-sum::-webkit-details-marker {
  display: none;
}

.find-fine-body {
  padding-top: 12px;
  border-top: 1px solid var(--hairline-dim);
  margin-top: 10px;
}

.find-fine-h {
  display: block;
  margin: 16px 0 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

.find-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.find-filter-row select {
  flex: 1 1 120px;
  min-width: 0;
}

.find-person-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.find-person-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.find-person-id {
  flex: 1;
  min-width: 0;
}

.find-person-score {
  text-align: right;
  flex: none;
}

.find-person-score .dscore {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}

.find-person-meta {
  font-size: 10px;
  color: var(--ink-faint);
}

.find-starter {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline-dim);
  background: rgba(255, 255, 255, 0.02);
}

.find-starter.warm {
  border-color: rgba(158, 207, 180, 0.25);
}

.find-starter-h {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 9px;
}

.find-starter-q {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-dim);
}

.find-starter-takes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  font-size: 12px;
}

.find-starter-takes .you {
  color: var(--agree);
}

.find-starter-takes .them {
  color: var(--disagree);
}

.find-person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.find-unlock {
  text-align: center;
}

@media (max-width: 520px) {
  .find-presets {
    grid-template-columns: 1fr;
    max-width: 280px;
  }

  .find-preset {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 14px;
  }
}

/* ---- Answer feed scope ---- */
.you-fit-teaser:hover {
  border-color: var(--accent-dim);
}

.dropdown-person {
  gap: 8px;
}

.dropdown-person .btn {
  flex: none;
  padding: 4px 10px;
  font-size: 11px;
}

.compare-h2h-head {
  padding: 20px 16px;
}

/* ---- Head-to-head compare (You · them) ---- */
.h2h-page {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

.h2h-page-head .h2h-head-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.h2h-title {
  font-size: 20px;
  line-height: 1.2;
}

.h2h-hero {
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.h2h-dual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 16px;
}

.h2h-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.h2h-side .avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
  border-radius: var(--radius-sm);
}

.h2h-side-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 0;
}

.h2h-side-btn:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 3px;
}

.h2h-side-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.h2h-side-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h2h-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.h2h-sim-num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.h2h-read {
  max-width: 480px;
  margin: 0 auto;
}

.h2h-read.center {
  text-align: center;
}

.h2h-lead {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.h2h-lead[data-tone="hot"],
.h2h-lead[data-tone="warm"] {
  color: var(--agree, #c6e2a8);
}

.h2h-lead[data-tone="split"],
.h2h-lead[data-tone="mid"] {
  color: var(--ink);
}

.h2h-lead[data-tone="cool"],
.h2h-lead[data-tone="cold"] {
  color: var(--disagree, #e8a0b0);
}

.h2h-detail {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}

.h2h-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.h2h-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 68px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--hairline-dim, var(--border));
}

.h2h-stat b {
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.h2h-stat span {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-family: var(--mono, ui-monospace, monospace);
}

.h2h-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--hairline-dim, transparent);
}

.h2h-actions .btn.is-on {
  opacity: 0.92;
}

.h2h-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.h2h-section-head .title {
  margin: 0;
  display: block;
}

.h2h-topics .h2h-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.h2h-cat-row {
  padding: 6px 0;
}

.h2h-lists .h2h-col {
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

.h2h-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.h2h-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 12px 12px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim, var(--border));
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.h2h-item:hover {
  border-color: var(--accent-dim, var(--border));
  background: rgba(255, 255, 255, 0.04);
}

.h2h-item:active {
  transform: scale(0.995);
}

/* agree/diff: equal border all sides — no left accent bar */
.h2h-item.is-agree,
.h2h-item.is-diff {
  border-color: var(--hairline-dim, var(--border));
}

.h2h-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.h2h-item-cat {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.h2h-item-heat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono, ui-monospace, monospace);
}

.h2h-item-q {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 450;
  margin-bottom: 10px;
}

.h2h-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.h2h-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  min-width: 0;
}

.h2h-pick-who {
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.h2h-pick-val {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.h2h-pick.you .h2h-pick-val {
  color: var(--agree, #c6e2a8);
}

.h2h-pick.them.same .h2h-pick-val {
  color: var(--agree, #c6e2a8);
}

.h2h-pick.them.other .h2h-pick-val {
  color: var(--disagree, #e8a0b0);
}

.h2h-empty-list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  text-align: center;
}

.h2h-empty-list p {
  margin: 0;
  font-size: 13px;
  max-width: 260px;
  line-height: 1.4;
}

.h2h-sharpen-copy {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 12px;
}

.h2h-prompt-list {
  display: flex;
  flex-direction: column;
}

.h2h-footer {
  padding: 18px 16px;
}

.h2h-locked .h2h-gauge {
  min-width: 120px;
}

@media (max-width: 560px) {
  .h2h-dual {
    gap: 8px 6px;
  }

  .h2h-side .avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
    border-radius: var(--radius-sm);
  }

  .h2h-side-name {
    max-width: 88px;
    font-size: 12px;
  }

  .h2h-gauge svg {
    width: 120px !important;
    height: 120px !important;
  }

  .h2h-stat {
    min-width: 56px;
    padding: 8px 8px;
  }

  .h2h-stat b {
    font-size: 14px;
  }

  .h2h-picks {
    grid-template-columns: 1fr;
  }

  .h2h-lead {
    font-size: 15px;
  }
}

/* ---- Full search page ---- */
.search-page-panel {
  margin-bottom: 14px;
  padding: 14px 16px 12px;
}
.search-page-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-page-input {
  flex: 1 1 200px;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg, rgba(0, 0, 0, 0.18));
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.search-page-input:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.search-go-btn {
  min-height: 44px;
  padding-left: 16px;
  padding-right: 16px;
}
.search-clear-btn {
  min-height: 36px;
}
.search-page-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.search-type-seg {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
}
.search-type-seg button {
  flex: 1 1 auto;
  min-width: 0;
}
.search-filter-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.search-filter-sel {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 220px;
  min-height: 38px;
  font-size: 13px;
}
.search-meta {
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  min-height: 1.2em;
}
.search-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.search-section-head .title {
  margin: 0;
}
.search-section-n {
  font-size: 11px;
  letter-spacing: 0.04em;
}
.search-people-hint {
  flex-wrap: wrap;
}
.search-results .glass.panel {
  overflow: hidden;
}
@media (max-width: 760px) {
  .search-page-panel { padding: 12px; }
  .search-filter-sel {
    flex: 1 1 calc(50% - 8px);
    max-width: none;
  }
  .search-go-btn { flex: 1 1 auto; }
}

/* ---- Compare hub ---- */
.compare-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.compare-search {
  padding: 14px 16px 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 20;
}

.compare-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
}

.compare-search-input:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.compare-search-hits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.compare-search-hits.empty {
  display: none;
}

.compare-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}

.compare-hit:last-child {
  border-bottom: none;
}

.compare-hit-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.compare-hit-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.compare-hit-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-scope {
  margin-bottom: 16px;
}

.compare-body {
  min-height: 120px;
}

.compare-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.compare-person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  border-radius: var(--radius);
  gap: 6px;
}

.compare-person-pct {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.compare-person-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-fit-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}

.compare-fit-sigil {
  flex: none;
}

.compare-fit-copy {
  flex: 1;
  min-width: 0;
}

.compare-fit-summary {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.compare-fit-axes .axis-bar {
  margin-bottom: 6px;
}

.compare-minds-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.compare-mind-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.compare-mind-av {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--ink-faint) center/cover no-repeat;
  border: 1px solid var(--border);
}

.compare-mind-name {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .compare-fit-strip {
    flex-direction: column;
    text-align: center;
  }

  .compare-fit-copy .row {
    justify-content: center;
  }
}

/* ---- Friends (inside Compare) ---- */
.friends-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 4px;
  margin: 4px 0 18px;
  font-size: 13px;
  color: var(--ink-dim);
}

.friends-summary-stat b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.friends-summary-dot {
  color: var(--ink-faint);
  margin: 0 4px;
}

.friends-summary-activity {
  color: var(--ink-faint);
  font-size: 12px;
}

/* Incoming requests — compact strip above friends, never the whole page */
.friends-req-panel {
  padding: 14px 16px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 24px rgba(192, 192, 192, 0.08);
}

.friends-req-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.friends-req-title {
  font-family: var(--label);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--ink);
}

.friends-req-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #2B2208;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

.friends-req-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.friends-req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.friends-req-row:last-child {
  border-bottom: none;
}

.friends-req-who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.friends-req-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-req-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.friends-req-more {
  margin-top: 4px;
}

.friends-req-toggle {
  width: 100%;
  padding: 10px 8px;
  border: none;
  background: none;
  font-family: var(--label);
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.02em;
}

.friends-req-toggle:hover {
  color: var(--ink);
}

/* Friends list — main stage */
.friends-list-panel {
  padding: 16px 16px 8px;
}

.friends-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.friends-list-title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.friends-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline-dim);
}

.friends-search {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim);
  background: var(--glass);
  color: var(--ink);
  font-size: 13.5px;
  outline: none;
}

.friends-search:focus {
  border-color: var(--accent-dim);
}

.friends-toolbar-sels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: none;
}

.friends-toolbar-sels select {
  width: auto;
  min-width: 0;
  max-width: 11.5em;
  height: 36px;
  font-size: 12.5px;
  padding: 0 8px;
}

.friends-pct-toggle {
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
  border: 1px solid var(--hairline-dim);
  border-radius: 8px;
  background: rgba(192, 192, 192, 0.08);
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.friends-pct-toggle:hover {
  color: var(--ink);
  border-color: var(--hairline);
}

.friends-pct-toggle.off {
  background: transparent;
  color: var(--ink-faint);
}

.friends-filter-empty {
  text-align: center;
  padding: 28px 12px 32px;
}

.friends-filter-empty.hidden {
  display: none;
}

.friends-list-body {
  display: flex;
  flex-direction: column;
}

.friends-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.friends-row:last-child {
  border-bottom: none;
}

.friends-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.friends-row-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.friends-row-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-row-meta {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

.friends-row-sim {
  flex: none;
  min-width: 3.2em;
  text-align: right;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.friends-row-sim.faint {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 13px;
}

.friends-row-actions {
  flex: none;
}

.friends-empty {
  text-align: center;
  padding: 36px 16px 40px;
}

.friends-empty-lead {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}

.friends-empty .dim {
  max-width: 22em;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.5;
}

/* Sent requests — quiet footer, not a competing panel */
.friends-out-panel {
  margin-top: 20px;
  padding: 0 4px;
}

.friends-out-toggle {
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  cursor: pointer;
  text-transform: uppercase;
}

.friends-out-toggle:hover {
  color: var(--ink-dim);
}

.friends-out-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.friends-out-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-dim);
  opacity: 0.85;
}

.friends-out-row:last-child {
  border-bottom: none;
}

.friends-out-name {
  flex: 1;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-dim);
  padding: 0;
}

.friends-out-name:hover {
  color: var(--ink);
}

@media (max-width: 520px) {
  .friends-req-actions .btn {
    padding: 8px 10px;
    min-height: 36px;
  }

  .friends-row-sim {
    min-width: 2.8em;
    font-size: 14px;
  }

  .friends-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .friends-toolbar-sels {
    width: 100%;
  }

  .friends-toolbar-sels select {
    flex: 1;
    max-width: none;
  }
}

.spicy.warm {
  border-color: rgba(158, 207, 180, 0.25);
}

.dcard .spicy {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-dim);
  font-size: 13px;
}

/* Hero stage: first-screen theater — fits iPhone SE → Pro Max without scroll */
.hero-stage {
  /* fill the first viewport under the sticky top bar (~52px + safe area) */
  --hero-top: calc(env(safe-area-inset-top, 0px) + 52px);
  min-height: calc(100svh - var(--hero-top));
  min-height: calc(100dvh - var(--hero-top));
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* slightly more bottom padding so the cluster sits optically above center */
  padding: clamp(8px, 2.5vh, 28px) 4px clamp(36px, 11vh, 88px);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* soft silver bloom behind the wordmark — jewelry, not noise */
.hero-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(120vw, 520px);
  height: min(70vw, 360px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
      rgba(192, 192, 192, 0.12) 0%,
      rgba(192, 192, 192, 0.03) 42%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Dim globe behind hero content — atmosphere, not a product demo */
.hero-globe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 20%, transparent 78%);
}

.hero-globe .ld-canvas {
  width: min(110vw, 640px);
  height: min(110vw, 640px);
  margin: 0;
  filter: saturate(0.9) brightness(0.95);
}

.hero-stage>*:not(.hero-globe) {
  position: relative;
  z-index: 1;
}

.hero-stage .landing-hero {
  margin-bottom: 0;
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-cta {
  margin: clamp(18px, 3.5vh, 34px) 0 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vh, 16px);
  width: 100%;
  max-width: 320px;
}

.landing-begin {
  width: 100%;
  max-width: 300px;
  min-height: 50px;
  font-size: 15px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}

.landing-whisper {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: 8px 0 0;
  text-transform: none;
  line-height: 1.45;
  white-space: normal;
  text-align: center;
  max-width: min(100%, 22em);
  padding: 0 12px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.landing-signin {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 6px 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.landing-signin:hover {
  color: var(--ink);
  text-decoration: none;
}

.landing-nav .lang-wrap {
  padding: 0 6px;
}

.landing-stats {
  min-height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  flex-wrap: wrap;
}

.landing-stats .ls-placeholder {
  opacity: 0;
}

.landing-stats b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.landing-stats .ls-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.shot-bar .sb-fill {
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.try-you-line b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.try-opt:active {
  transform: scale(0.97);
  border-color: var(--accent-dim);
}

.landing-hero {
  text-align: center;
  margin-bottom: var(--s-4);
  position: relative;
}

.footer-wm {
  font-family: var(--optima);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  display: block;
  line-height: 1;
}

/* Hero wordmark: one modern thin sans — full “Sentinect”, no mixed script mark */
.landing-wordmark {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(42px, 11vw, 80px);
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: clamp(6px, 1.2vh, 14px) 0 clamp(4px, 1vh, 10px);
  line-height: 1.05;
  white-space: nowrap;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.landing-eyebrow {
  display: block;
  font-family: var(--label);
  font-weight: 500;
  font-size: clamp(11px, 2.8vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 clamp(4px, 1vh, 10px);
  position: relative;
  padding-top: clamp(10px, 1.8vh, 18px);
}

.landing-eyebrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.landing-hook {
  font-size: clamp(15px, 3.8vw, 19px);
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1.45;
  max-width: min(22em, 92%);
  margin: clamp(8px, 1.6vh, 16px) auto 0;
  text-wrap: balance;
}

/* short phones (SE / mini landscape-ish heights) — compress, never clip CTA */
@media (max-height: 700px) {
  .hero-stage {
    min-height: calc(100svh - var(--hero-top));
    padding-top: 8px;
    padding-bottom: 16px;
    justify-content: center;
  }

  .landing-wordmark {
    font-size: clamp(42px, 10.5vw, 64px);
    margin: 4px 0 2px;
  }

  .landing-hook {
    font-size: 15px;
    margin-top: 8px;
  }

  .hero-cta {
    margin-top: 16px !important;
    gap: 10px;
  }

  .landing-begin,
  .btn.landing-org-cta {
    min-height: 48px;
  }

  .hero-stage::before {
    opacity: 0.7;
    height: 240px;
  }
}

/* very short */
@media (max-height: 600px) {
  .landing-eyebrow {
    font-size: 10px;
    padding-top: 8px;
    letter-spacing: 0.14em;
  }

  .landing-wordmark {
    font-size: clamp(38px, 9.5vw, 52px);
  }

  .landing-hook {
    font-size: 14px;
    line-height: 1.4;
    max-width: 20em;
  }

  .landing-whisper {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* wide phones / Pro Max — keep wordmark from going huge and sparse */
@media (min-width: 430px) {
  .landing-wordmark {
    font-size: clamp(56px, 10vw, 78px);
  }

  .landing-hook {
    font-size: clamp(16px, 2.2vw, 19px);
    max-width: 22em;
  }
}

/* desktop: roomier, still one screen of theater */
@media (min-width: 761px) {
  .hero-stage {
    min-height: min(78vh, 680px);
    padding: 48px 16px 40px;
  }

  .landing-wordmark {
    font-size: clamp(64px, 7vw, 88px);
  }

  .landing-hook {
    font-size: 19px;
    max-width: 28em;
  }

  .hero-cta {
    max-width: 320px;
  }
}

/* today's hottest question card */
.hot-q-wrap:empty {
  display: none;
}

.hot-q {
  max-width: 620px;
  margin: var(--s-4) auto;
  text-align: center;
}

.hot-q .hot-text {
  font-size: clamp(20px, 3.4vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin: var(--s-1) 0 var(--s-3);
}

.hot-q .hot-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.hot-q .hot-meta {
  margin-top: var(--s-2);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* landing: try-it panel + mock product shots */
.try-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.try-opt {
  justify-content: center;
  font-size: 14.5px;
  padding: 12px 18px;
}

.try-bars {
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: var(--s-2);
}

.shot-card {
  padding: 18px 16px;
  border-radius: 12px;
  text-align: left;
}

.shot-cap {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-top: 12px;
  text-align: left;
}

.shot-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 10px;
}

.shot-q {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 12px;
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
}

.shot-bar .sb-label {
  flex: 0 0 34%;
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot-bar .sb-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--glass);
  overflow: hidden;
}

.shot-bar .sb-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink-faint);
}

.shot-bar.mine .sb-fill {
  background: var(--accent);
}

.shot-bar.mine .sb-label {
  color: var(--ink);
  font-weight: 500;
}

.shot-bar .sb-pct {
  flex: 0 0 34px;
  text-align: right;
  font-size: 11px;
  color: var(--ink-faint);
}

.shot-meta {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 12px;
}

.shot-vs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
}

.shot-x {
  color: var(--ink-faint);
}

.shot-big {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.shot-big span {
  font-size: 14px;
  color: var(--ink-dim);
  font-weight: 400;
  letter-spacing: 0;
}

.shot-sub {
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.shot-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.shot-person:last-of-type {
  border-bottom: none;
}

.sp-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-dim);
  flex: none;
}

.sp-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sp-info b {
  font-size: 13.5px;
  font-weight: 500;
}

.sp-info .mono {
  font-size: 10.5px;
  color: var(--ink-faint);
}

.sp-badge {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .shots {
    grid-template-columns: 1fr;
  }
}

/* named friend picks on the reveal */
.friend-takes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--s-2);
}

.ftake {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.ftake:hover {
  background: var(--glass);
}

.ftake-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

.ftake-pick {
  flex: none;
}

.ai-sect .title {
  color: var(--accent);
}

.ai-take {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim);
  margin-top: 8px;
  background: var(--glass);
  transition: border-color 0.15s;
  text-decoration: none;
}

.ai-take:hover {
  border-color: var(--accent-dim);
}

.ai-take-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ai-take-why {
  font-size: 12.5px;
  margin-top: 6px;
  line-height: 1.4;
  font-style: italic;
}

.landing-panel {
  padding: var(--s-4) var(--s-3);
  margin: var(--s-4) 0;
}

.landing-section-label {
  display: block;
  text-align: center;
  margin-bottom: var(--s-2);
}

/* ---------- landing: manifesto + product frames ---------- */
.ld-canvas {
  display: block;
  width: min(86vw, 460px);
  height: min(86vw, 460px);
  margin: 0 auto;
}

/* anchor landing under sticky top bar */
.ld-why,
.ld-how,
.ld-trust {
  scroll-margin-top: 72px;
}

/* WHY manifesto — first scroll after hero */
.ld-why {
  margin: clamp(48px, 10vh, 96px) auto clamp(40px, 8vh, 72px);
  padding: 0 var(--s-3);
  max-width: 40rem;
  text-align: center;
}

.ld-why-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
}

.ld-why-lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(22px, 4.6vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.ld-why-body {
  font-size: clamp(15px, 2.8vw, 17px);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
  max-width: 34em;
  margin: 0 auto;
}

.ld-why-close {
  font-size: clamp(16px, 3vw, 18px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 400;
  padding-top: 4px;
}

.ld-why-close::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin: 0 auto 18px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* HOW — phone product frames */
.ld-how {
  margin: var(--s-5) auto;
  padding: 0 var(--s-2) var(--s-4);
  text-align: center;
  max-width: 1080px;
}

.ld-how .landing-section-label {
  margin-bottom: var(--s-4);
}

/* ---- the feature tour: horizontal glass-pane carousel of real screenshots ---- */
.ld-tour-lede {
  text-align: center;
  color: var(--ink-dim);
  font-size: 15px;
  margin: -6px 0 var(--s-3);
}

.ld-tour {
  position: relative;
  margin: 0 auto;
  max-width: 960px;
}

.tour-wrap {
  position: relative;
  /* bleed so side panes peek past the content column */
  margin: 0 calc(-1 * min(48px, 6vw));
}

.tour-track {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 2.4vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* pad so first/last pane can rest dead-centre; right bias shows the next glass pane */
  padding: 28px calc(50% - min(138px, 36vw)) 36px;
  perspective: 1400px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  overscroll-behavior-x: contain;
  /* pan-x alone trapped vertical page scroll when the gesture began on a card */
  touch-action: pan-x pan-y;
}

.tour-track::-webkit-scrollbar {
  display: none;
}

.tour-track.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.tour-pane {
  flex: 0 0 auto;
  width: min(276px, 72vw);
  margin: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: box-shadow 0.35s ease;
  touch-action: pan-x pan-y;
}

/* clean outline card — no phone bezel: a thin hairline around the screenshot, silver when active */
.tour-pane.is-active .tour-frame {
  border-color: rgba(192, 192, 192, 0.42);
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.58),
    0 0 34px rgba(192, 192, 192, 0.10);
}

.tour-frame {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: var(--canvas);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  touch-action: pan-x pan-y;
}

.tour-shot {
  display: block;
  width: 100%;
  aspect-ratio: 1170 / 2532;
  object-fit: cover;
  object-position: top center;
  background: var(--canvas);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-x pan-y;
}

.tour-frame.is-empty {
  display: flex;
}

.tour-empty {
  width: 100%;
  aspect-ratio: 1170 / 2532;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(192, 192, 192, 0.06), transparent 60%),
    var(--canvas);
  border: 1px dashed var(--hairline);
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 0 18px;
}

.tour-arrow {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  background: rgba(20, 21, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.tour-arrow:hover {
  background: rgba(30, 31, 38, 0.85);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.12);
}

.tour-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.tour-arrow.prev {
  left: max(4px, calc(50% - min(420px, 48vw)));
}

.tour-arrow.next {
  right: max(4px, calc(50% - min(420px, 48vw)));
}

@media (min-width: 760px) {
  .tour-arrow {
    display: flex;
  }
}

.deck-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  margin: 6px auto 0;
  min-height: 2.8em;
}

.deck-cap-t {
  font-family: var(--label);
  color: var(--ink);
  font-size: 15.5px;
  letter-spacing: 0.01em;
}

.deck-cap-s {
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 28ch;
}

.tour-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  padding: 0;
  border: none;
  background: var(--hairline);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s;
}

.tour-dot.on {
  width: 24px;
  background: var(--accent);
}

.deck-hint {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-top: 12px;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .tour-track {
    scroll-behavior: auto;
  }

  .tour-pane {
    transition: none;
  }
}

.ld-steps {
  list-style: none;
  max-width: 36rem;
  margin: var(--s-4) auto 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ld-steps li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  padding-left: 0;
}

.ld-steps li b {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 820px) {
  .ld-steps {
    text-align: center;
  }
}

/* TRUST */
.ld-trust {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.ld-trust-lede {
  text-align: center;
  max-width: 28rem;
  margin: 0 auto var(--s-3);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.trust-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 700px) {
  .trust-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* the story */
.story {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-dim);
}

.story p {
  margin-bottom: var(--s-2);
}

.story .hi {
  color: var(--ink);
}

.story .rare {
  color: var(--accent);
  font-weight: 500;
}

.story .clash {
  color: var(--disagree);
  font-weight: 500;
}

.story .bond {
  color: var(--agree);
  font-weight: 500;
}

.story .punch {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.45;
}

.story .punch .silver {
  color: var(--accent);
}

.landing-cta {
  text-align: center;
  margin: var(--s-5) 0 var(--s-3);
}

/* the Enter / Get started CTA: clean, static accent glow — on-theme, no animation */
.btn.primary.cta-glow {
  box-shadow: 0 0 20px var(--accent-glow);
}

.btn.primary.cta-glow:hover {
  box-shadow: 0 0 30px var(--accent-glow);
  border-color: var(--accent);
}

/* light theme keeps its own crisp shadow — no silver breathing glow */
body[data-theme="light"] .btn.primary.cta-glow {
  animation: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .btn.primary.cta-glow:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* ---------- auth ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-3);
}

.auth-card {
  width: 100%;
  max-width: 468px;
  padding: var(--s-4) var(--s-4) var(--s-3);
}

.auth-top {
  display: flex;
  align-items: center;
}

.auth-slogan {
  font-size: var(--t-3);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--s-2);
}

.auth-lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.auth-sec {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: var(--s-3) 0 var(--s-2);
}

.auth-sec-n {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-dim);
  flex: none;
}

.auth-foot {
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: var(--s-2);
  line-height: 1.5;
}

.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.45;
  cursor: pointer;
  border: 1px solid var(--accent);
  padding: 12px 14px;
  border-radius: 9px;
  background: rgba(192, 192, 192, 0.03);
  transition: background 0.2s;
  box-sizing: border-box;
}

.consent-row:hover {
  background: rgba(192, 192, 192, 0.07);
}

.consent-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  cursor: pointer;
}

.consent-row a {
  color: var(--accent);
  text-decoration: underline;
}

.preset-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.preset {
  padding: var(--s-2);
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.preset.active {
  border-color: var(--accent-dim);
  box-shadow: 0 0 16px rgba(192, 192, 192, 0.12);
}

.preset h3 {
  font-family: var(--label);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

.preset p {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ---------------- polish: micro-interactions ---------------- */
/* press feedback on every interactive control */
.btn:active,
.opt:active,
.rating-btn:active,
.pill:active,
.seg button:active {
  transform: scale(0.97);
}

.opt.selected {
  animation: opt-snap 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes opt-snap {
  0% {
    transform: scale(0.97);
  }

  55% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.btn,
.opt,
.rating-btn,
.pill,
.seg button {
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s, color 0.2s, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Lumen Motion ---------- */
@keyframes lumen-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lumen-rise {
  opacity: 0;
  animation: lumen-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lumen-toast {
  position: fixed;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 12px 22px;
  z-index: 220;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  max-width: min(92vw, 420px);
  text-align: center;
  border: 1px solid var(--accent-dim);
  box-shadow: 0 0 24px var(--accent-glow), 0 8px 32px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.lumen-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lumen-toast.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.lumen-celebrate {
  position: fixed;
  inset: 0;
  z-index: 180;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 50% 55%, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.lumen-celebrate.go {
  opacity: 1;
}

.lumen-celebrate-soft.go {
  animation: celebrate-fade 0.5s ease forwards;
}

.lumen-celebrate-unlock.go {
  animation: celebrate-fade 0.85s ease forwards;
}

.lumen-celebrate-rare.go {
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(192, 192, 192, 0.28), transparent 68%);
  animation: celebrate-fade 0.7s ease forwards;
}

@keyframes celebrate-fade {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumen-rise {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .opt.selected {
    animation: none;
  }

  .lumen-celebrate {
    display: none;
  }
}

/* picking an answer pops gently; the confirm row rises in */
@keyframes pop-in {
  0% {
    transform: scale(0.985);
  }

  60% {
    transform: scale(1.008);
  }

  100% {
    transform: scale(1);
  }
}

.opt.selected,
.rating-btn.selected {
  animation: pop-in 0.22s ease;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.answer-confirm {
  animation: rise-in 0.28s ease both;
}

.rsection {
  animation: rise-in 0.3s ease both;
}

/* skeleton loading (replaces "Loading…") */
.skel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skel-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
}

.skel {
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border-radius: 6px;
}

.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
  background: linear-gradient(90deg, transparent, rgba(192, 192, 192, 0.07), transparent);
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skel-thumb {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 8px;
}

.skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.skel-line {
  height: 13px;
}

.skel-line.thin {
  height: 9px;
  opacity: 0.6;
}

/* matchmaking band: top matches up front on Connect */
.match-band {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.match-card {
  flex: 0 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 14px 10px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: var(--glass);
  transition: border-color 0.2s, box-shadow 0.25s;
  text-decoration: none;
  color: var(--ink-dim);
}

.match-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 18px var(--accent-glow);
  text-decoration: none;
  color: var(--ink-dim);
}

.match-pct {
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--ink);
}

.match-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-cat {
  font-size: 9px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-faint);
}

/* total answers line under the "who picked your answer" cascade */
.reveal-total {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--hairline-dim);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

.reveal-total b {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* onboarding: guided first answers */
.onb-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 16px 60px;
  display: block;
  min-height: 100vh;
  box-sizing: border-box;
}

.onb-head {
  display: flex;
  align-items: center;
  margin-bottom: 26px;
}

.onb-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 22px;
}

.onb-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--glass);
  overflow: hidden;
}

.onb-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.45s ease;
}

.onb-slot .qcard {
  margin-top: 0;
}

.onb-unlock {
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* branded boot splash (removed by app.js once the first view paints) */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: #0A0B0E;
  transition: opacity 0.35s ease;
}

#boot-splash.out {
  opacity: 0;
  pointer-events: none;
}

#boot-splash .boot-s {
  font-family: 'Times New Roman', serif;
  font-size: 84px;
  color: #E9EBF0;
  animation: boot-breathe 1.6s ease-in-out infinite;
}

#boot-splash .boot-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #C0C0C0;
  transform: rotate(45deg) translateY(74px);
}

@keyframes boot-breathe {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .opt.selected,
  .rating-btn.selected,
  .answer-confirm,
  .rsection,
  .skel::after,
  #boot-splash .boot-s {
    animation: none;
  }
}

@media (max-width: 760px) {
  .auth-slogan {
    font-size: 38px;
  }

  .preset-row {
    grid-template-columns: 1fr;
  }

  .auth-wrap {
    padding: var(--s-2);
  }

  .auth-card {
    padding: var(--s-3) var(--s-3) var(--s-2);
    min-width: 0;
  }

  .onb-wrap {
    padding: 12px 12px 30px;
  }

  .onb-head {
    margin-bottom: 16px;
  }

  .onb-progress {
    margin: 12px 0 16px;
  }
}

/* ---------- modal ---------- */
.modal-veil {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 8, 0.7);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s-3);
}

.modal {
  width: 100%;
  max-width: 480px;
  max-height: 86vh;
  overflow: auto;
  padding: var(--s-4);
}

/* ---------- notifications ---------- */
.notif {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  border-bottom: 1px solid var(--hairline-dim);
  font-size: 13px;
  color: var(--ink-dim);
  text-decoration: none;
}

.notif.unread {
  color: var(--ink);
}

.notif .when {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- empty / locked states ---------- */
.empty {
  text-align: center;
  padding: var(--s-5) var(--s-3);
  color: var(--ink-faint);
}

.empty .t1 {
  color: var(--ink-dim);
  margin-bottom: var(--s-1);
}

.empty .btn {
  margin-top: var(--s-2);
}

.empty p {
  line-height: 1.55;
}

/* svg charts */
.chart-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--ink-faint);
  text-transform: uppercase;
}

.spark {
  stroke: rgba(255, 255, 255, 0.4);
  fill: none;
  stroke-width: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: rgba(192, 192, 192, 0.25);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* ---------- bottom sheet (mobile "More" / profile menu) ---------- */
.modal-veil.sheetv {
  place-items: end center;
  padding: 0;
}

.modal.sheet {
  max-width: 100%;
  width: 100%;
  border-radius: 18px 18px 0 0;
  border-bottom: none;
  padding: var(--s-3) var(--s-3) calc(env(safe-area-inset-bottom, 0px) + 28px);
  animation: sheet-up 0.25s ease-out;
}

/* Profile / More menu: square box (no curved edges), mobile sheet + desktop popover */
.modal.menu-modal,
.modal.sheet.menu-modal {
  border-radius: 0;
}

/* ---------- Onboarding hub (Archive-style assessment cards) ---------- */
.onb-hub-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 48px;
}
.onb-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .onb-hub-grid {
    grid-template-columns: 1fr 1fr;
  }
  .onb-hub-card[data-wide],
  .onb-hub-grid > .onb-hub-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.onb-hub-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--glass);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.onb-hub-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 20px var(--accent-glow);
}
.onb-hub-card.is-done {
  opacity: 0.88;
}
.onb-hub-art {
  height: 88px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
}
.onb-hub-art-empty {
  background: linear-gradient(135deg, rgba(192,192,192,0.12), transparent);
}
.onb-hub-body {
  padding: 12px 14px 14px;
}
.onb-hub-title {
  font-size: 17px;
  font-weight: 500;
  margin: 4px 0 6px;
  letter-spacing: -0.02em;
}
.onb-hub-blurb {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.onb-hub-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.onb-hub-cta {
  color: var(--accent);
  white-space: nowrap;
}
.onb-taste-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.onb-taste-row select {
  flex: 0 0 140px;
  min-height: 40px;
}
.onb-taste-row input {
  flex: 1 1 160px;
  min-height: 40px;
}

/* Profile Questions / Ratings library */
.profile-lib-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--hairline-dim);
  margin-bottom: 8px;
}
.profile-lib-sel {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 220px;
  min-height: 36px;
  font-size: 13px;
}
.profile-lib-body {
  min-height: 40px;
}
.profile-fav-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline-dim);
}
.profile-lib-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

/* Archive skip */
.archive-skip-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline-dim);
}
.archive-skip-btn {
  opacity: 0.85;
}

/* AI model directory */
.ai-model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
@media (min-width: 720px) {
  .ai-model-grid { grid-template-columns: 1fr 1fr; }
}
.ai-model-card {
  text-align: left;
  cursor: pointer;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-model-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 18px var(--accent-glow);
}
.ai-model-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ai-model-meta {
  font-size: 11px;
  margin-top: 4px;
}
.ai-model-bio {
  font-size: 13px;
  line-height: 1.45;
  margin: 10px 0 0;
}
.ai-model-stats {
  font-size: 11px;
  color: var(--ink-faint);
}
.ai-model-cta {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 12px;
}
.chip.ai-chip {
  border-color: rgba(102, 163, 255, 0.45);
  color: #9ec0ff;
}

/* Online now */
.online-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.online-strip-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3dce7a;
  box-shadow: 0 0 0 3px rgba(61, 206, 122, 0.2);
  flex: none;
}
.online-dot-abs {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
}
.online-count {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.online-label {
  font-size: 14px;
  color: var(--ink-dim);
}
.online-cta {
  color: var(--accent);
  font-size: 12px;
}
.online-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 18px;
}
.online-face {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.online-scope-head {
  padding: 14px 16px;
}
.online-av-wrap {
  position: relative;
  flex: none;
}
.online-person-card {
  padding: 14px;
}
.online-person-name {
  font-size: 15px;
  font-weight: 500;
}
.online-connect-grid {
  gap: 10px;
}

@keyframes sheet-up {
  from {
    transform: translateY(48px);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.menu-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  width: 100%;
  padding: 15px 8px;
  min-height: 52px;
  border-bottom: 1px solid var(--hairline-dim);
  color: var(--ink);
  font-family: var(--label);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-align: left;
}

.menu-row:last-child {
  border-bottom: none;
}

.menu-row svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-dim);
  fill: none;
  stroke-width: 1.5;
}

/* ---------- THE ARCHIVE: museum surfaces, anthologies, clash of minds ---------- */
.archive-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
}

.archive-hero {
  margin: 4px 0 var(--s-3);
  max-width: 660px;
}

.archive-hero h1 {
  font-size: 30px;
  margin: 7px 0 8px;
}

.archive-hero p {
  font-size: 14px;
  line-height: 1.6;
}

/* billboard on the Questions tab: art strip + silver hairline. Open/close via close btn. */
.archive-banner-slot {
  margin: 0 0 var(--s-3);
}

.archive-banner {
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: #0B0C10 url('/archive/divine-foundations.jpg') center 30% / cover no-repeat;
}

.archive-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.94) 0%, rgba(7, 8, 11, 0.86) 52%, rgba(7, 8, 11, 0.5) 100%);
  pointer-events: none;
}

.archive-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.65), transparent 70%);
  pointer-events: none;
}

.archive-banner-main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 16px 12px 16px 20px;
  text-decoration: none;
  color: inherit;
}

.archive-banner-main:hover {
  text-decoration: none;
}

.archive-banner:hover {
  border-color: rgba(192, 192, 192, 0.4);
}

.archive-banner-close {
  position: relative;
  z-index: 2;
  flex: none;
  align-self: stretch;
  width: 40px;
  border: 0;
  background: transparent;
  color: rgba(233, 235, 240, 0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.archive-banner-close:hover {
  color: #C0C0C0;
  background: rgba(0, 0, 0, 0.2);
}

/* collapsed chip when user hides the billboard */
.archive-banner-collapsed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: 4px;
  background: var(--glass);
}

.archive-banner-open-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
}

.archive-banner-open-btn:hover {
  color: var(--accent);
}

.archive-banner-open-btn .ab-chev {
  color: var(--ink-faint);
  font-size: 11px;
}

.archive-banner-enter {
  flex: none;
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.archive-banner-enter:hover {
  text-decoration: none;
  opacity: 0.85;
}

.onboarding-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: linear-gradient(115deg, #030406 25%, #444853 50%, #030406 75%);
  transition: border-color 0.2s, background 0.2s;
}

.onboarding-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.45), transparent 70%);
}

.onboarding-banner:hover {
  text-decoration: none;
  border-color: rgba(192, 192, 192, 0.35);
  background: linear-gradient(115deg, #030406 20%, #505562 45%, #030406 70%);
}

.ab-body {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ab-title {
  font-family: var(--label);
  font-size: 19px;
  color: #F2ECDD;
  margin-top: 4px;
}

.ab-sub {
  font-size: 12.5px;
  color: rgba(233, 235, 240, 0.62);
  margin-top: 3px;
}

.ab-cta {
  position: relative;
  color: #C0C0C0;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.archive-banner .archive-eyebrow,
.onboarding-banner .archive-eyebrow {
  color: #C0C0C0;
}

/* archive tab toggle: History | Conspiracy Theories */
.archive-page-head {
  margin-bottom: 4px;
}

.archive-tab-seg {
  margin-top: 10px;
  width: 100%;
  max-width: 420px;
}

.archive-tab-seg button {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font-size: 12.5px;
}

.archive-tab-body {
  margin-top: var(--s-2);
}

.anthology-card.conspiracy {
  border-color: rgba(192, 192, 192, 0.18);
}

.anthology-card.conspiracy:hover {
  border-color: rgba(192, 192, 192, 0.5);
}

@media (max-width: 420px) {
  .archive-tab-seg button {
    font-size: 11.5px;
    padding: 9px 8px;
    letter-spacing: 0.01em;
  }
}

/* anthology cards: full-bleed artwork, scrim, progress */
.anthology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}

.anthology-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline-dim);
  border-radius: 4px;
  overflow: hidden;
  background: var(--glass);
  color: var(--ink);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.anthology-card:hover {
  transform: translateY(-3px);
  border-color: rgba(192, 192, 192, 0.45);
  text-decoration: none;
}

.anthology-art {
  height: 150px;
  position: relative;
  background: #14161C center 32% / cover no-repeat;
  border-bottom: 1px solid rgba(192, 192, 192, 0.4);
}

.anthology-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.02) 45%, rgba(7, 8, 11, 0.5) 100%);
}

.anthology-body {
  padding: 15px 17px 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.anthology-body h3 {
  font-family: var(--label);
  font-size: 19px;
  font-weight: 500;
}

.anthology-body p {
  font-size: 13px;
  color: var(--ink-dim);
  flex: 1;
  margin: 0;
}

.anthology-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.anthology-track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.anthology-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.45s ease;
}

.anthology-meta .mono {
  font-size: 10.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.anthology-card.done .anthology-meta .mono {
  color: var(--accent);
}

/* anthology play: art header + focused stage */
.archive-head {
  position: relative;
  margin-bottom: var(--s-3);
  border: 1px solid var(--hairline-dim);
  border-radius: 4px;
  overflow: hidden;
  background: #14161C center 30% / cover no-repeat;
}

.archive-head-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.92), rgba(7, 8, 11, 0.45));
}

.archive-head-body {
  position: relative;
  padding: 18px 20px;
}

.archive-head-body h1 {
  font-size: 26px;
  margin: 4px 0 12px;
  color: #F2ECDD;
}

.archive-head-prog {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
}

.archive-head-prog .mono {
  font-size: 10.5px;
  color: rgba(233, 235, 240, 0.7);
  white-space: nowrap;
}

.archive-stage {
  max-width: 680px;
}

.archive-q .qtext {
  margin-top: 4px;
}

/* clash of minds: agree / disagree sides with portrait rows */
.clash-sect .title {
  color: var(--accent);
}

.clash-side {
  margin-top: 13px;
}

.clash-side-head {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.clash-side.agree .clash-side-head {
  color: var(--agree);
}

.clash-side.clash .clash-side-head {
  color: var(--disagree);
}

.clash-side-empty {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
  padding: 10px 0 2px;
}

.mind-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 7px;
  text-align: left;
  cursor: pointer;
  flex-wrap: wrap;
  row-gap: 6px;
  border: 1px solid var(--hairline-dim);
  border-radius: 3px;
  background: var(--glass);
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.mind-row:hover {
  border-color: rgba(192, 192, 192, 0.5);
  transform: translateX(2px);
}

.mind-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #1A1C22 center / cover no-repeat;
  border: 1px solid rgba(192, 192, 192, 0.4);
  color: var(--ink-faint);
  font-size: 15px;
}

.mind-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.mind-name {
  font-family: var(--label);
  font-size: 15px;
  color: var(--ink);
}

.mind-era {
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

.mind-pick {
  flex: 0 0 auto;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mind-zoom {
  color: var(--ink-faint);
  font-size: 16px;
  flex-shrink: 0;
}

.mind-more {
  margin: 1px 0 4px;
}

/* Archive stacked bars: slate blue grey / concrete / charcoal. Inherit the app's native
   bar surface (subtle glass + hairline) so they sit in the theme; segments split by a hair
   seam, own pick marked with a restrained light ring, labels white for legibility on grey. */
.arc-stack {
  height: 20px;
  border-radius: 10px;
}

.arc-stack .stack-seg+.stack-seg {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.22);
}

.arc-stack .stack-seg.mine {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.arc-stack .seg-lbl {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
}

/* deep dive: the quote large, then the reasoning */
.deepdive {
  position: relative;
}

.deepdive-x {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-dim);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink-dim);
  font-size: 14px;
  cursor: pointer;
}

.deepdive-x:hover {
  color: var(--ink);
  border-color: rgba(192, 192, 192, 0.5);
}

.deepdive-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding-right: 34px;
}

.deepdive-portrait {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #1A1C22 center / cover no-repeat;
  border: 1px solid rgba(192, 192, 192, 0.5);
  font-size: 26px;
  color: var(--ink-faint);
}

.deepdive-name {
  font-family: var(--label);
  font-size: 21px;
}

.deepdive-stance {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ink-dim);
}

.deepdive-stance b {
  color: var(--accent);
}

.deepdive-quote {
  font-family: var(--label);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
}

.deepdive-src {
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.deepdive-ctx p {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.65;
  margin: 0 0 10px;
}

.deepdive-share {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-dim);
}

/* the mind-alignment share flow */
.grim-note {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 12px;
}

/* the Archive scope note: sober, small, at the foot of the gallery */
.archive-note {
  max-width: 660px;
  margin-top: var(--s-4);
  padding-top: 14px;
  border-top: 1px solid var(--hairline-dim);
}

.archive-note-eyebrow {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 7px;
}

.archive-note p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-faint);
  margin: 0;
}

/* world split fades in under the clash when the network answers; never blocks the flow */
.archive-world-in {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.archive-world-in.go {
  opacity: 1;
  transform: none;
}

/* the city reveal finale */
.city-reveal h2 {
  font-size: 24px;
  margin: 7px 0 4px;
}

.cr-row {
  padding: 13px 0 5px;
  border-top: 1px solid var(--hairline-dim);
}

.cr-head {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cr-text {
  font-family: var(--label);
  font-size: 15px;
}

.cr-level-chip {
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.cr-level-chip.silver {
  color: var(--accent);
}

/* collapsible seals: city / friends / most-similar / discuss open on demand, never automatically */
.fold {
  padding: 0;
  overflow: hidden;
  margin-top: var(--s-2);
}

.fold-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 17px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  background: none;
}

.fold-head:hover .fold-title {
  color: var(--accent);
}

.fold-chev {
  color: var(--accent);
  font-size: 11px;
  width: 12px;
}

.fold-title {
  font-family: var(--label);
  font-size: 15.5px;
  transition: color 0.2s ease;
}

.fold-count {
  font-size: 10.5px;
  color: var(--ink-faint);
}

.fold-body {
  padding: 2px 17px 15px;
  border-top: 1px solid var(--hairline-dim);
}

.archive-folds {
  margin-top: var(--s-3);
}

/* discussion inside an Archive run */
.arc-discuss .disc-composer {
  margin: 10px 0 4px;
}

.arc-discuss-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* Nearby placeholder: ships with the native iOS app */
.nearby-teaser {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  margin-top: var(--s-3);
  border-radius: 4px;
}

.nearby-teaser .t1 {
  margin-bottom: 3px;
}

.nearby-teaser .dim {
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- The Five Pillars: sealed answers, Consequence beat, Ideological Autopsy ---------- */
.chip.pillar-chip {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.sealed-confirm .seal-note {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* the pre-seal Consequence beat modal */
.consq-beat {
  text-align: left;
}

.consq-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.consq-pick {
  font-family: var(--label);
  font-size: 15px;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.consq-pick b {
  color: var(--ink);
}

.consq-line {
  font-family: var(--label);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
}

.consq-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* the Ideological Autopsy panel in the reveal */
.autopsy-sect .autopsy-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 7px;
}

.autopsy-body {
  font-family: var(--label);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  padding: 11px 14px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: var(--glass);
}

.autopsy-body b {
  color: var(--ink);
}

/* recovery code (shown once at signup / recovery) */
.recovery-vault {
  margin-top: 18px;
  padding: 18px 16px 14px;
  text-align: center;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 28px var(--accent-glow);
}

.recovery-vault-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.recovery-code {
  margin: 0 0 12px;
  padding: 14px 12px;
  text-align: center;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: transparent;
  border: none;
  word-break: break-all;
  line-height: 1.45;
}

/* Your passkeys manager (Settings) */
.passkey-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline-dim);
}

.passkey-row:last-child {
  border-bottom: none;
}

.passkey-row .pk-when {
  font-size: 12px;
  color: var(--ink-dim);
}

/* ---------- mobile: calm 4-tab bar + More (last so it wins the cascade) ---------- */
@media (max-width: 760px) {
  #shell {
    grid-template-columns: 1fr;
  }

  /* full-bleed tab bar ~50px + safe-area — keep last rows clear */
  #view {
    padding: var(--s-3) var(--s-2) calc(env(safe-area-inset-bottom, 0px) + 58px);
  }

  .page-head.compact {
    margin-bottom: 12px;
  }

  .page-head.compact .answer-mode-seg {
    margin-top: 12px;
    max-width: 100%;
  }

  .answer-toolbar-top {
    width: 100%;
  }

  .answer-toolbar-top .feed-scope-seg {
    flex: 1 1 auto;
    max-width: none;
  }

  .answer-toolbar-meta {
    width: 100%;
  }

  .answer-toolbar-top .answer-filters-toggle {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
  }

  .answer-toolbar-top .btn.small {
    min-height: 36px;
  }

  .archive-banner-main {
    padding: 14px 8px 14px 14px;
    gap: 10px;
  }

  .ab-title {
    font-size: 16px;
    line-height: 1.25;
  }

  .ab-sub {
    display: none;
  }

  /* title + enter is enough on phone */
  .ab-cta {
    font-size: 10px;
  }

  .compare-search {
    padding: 12px 12px 8px;
    margin-bottom: 10px;
  }

  .compare-search-input {
    padding: 11px 12px;
    font-size: 16px;
  }

  /* 16px avoids iOS zoom */
  .compare-scope {
    width: 100%;
    margin-bottom: 12px;
  }

  .compare-scope button {
    flex: 1;
    font-size: 12px;
    padding: 8px 4px;
  }

  .people-scope {
    max-width: none;
  }

  .friends-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }

  .friends-toolbar-sels {
    width: 100%;
    display: flex;
    gap: 8px;
    flex: none;
  }

  .friends-toolbar-sels select {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* prevent search from flex-growing into a tall blank box on column toolbars */
  .friends-search {
    flex: 0 0 auto !important;
    width: 100%;
    height: 40px !important;
    min-height: 40px;
    max-height: 40px;
    box-sizing: border-box;
    font-size: 16px;
    /* no iOS zoom */
  }

  .friends-list-panel {
    padding: 14px 12px 28px;
    margin-bottom: 16px;
  }

  .friends-list-body {
    padding-bottom: 16px;
  }

  .friends-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 14px 0;
  }

  .friends-row-main {
    flex: 1 1 100%;
    min-width: 0;
  }

  .friends-row-sim {
    margin-left: 48px;
    /* align under name after avatar */
    min-width: 2.6em;
    text-align: left;
    font-size: 16px;
  }

  .friends-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
  }

  .friends-row-actions .btn {
    padding: 7px 12px;
    font-size: 12px;
    min-height: 34px;
  }

  .friends-row-meta {
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-faint);
    white-space: normal;
  }

  .friends-summary {
    margin: 2px 0 14px;
    font-size: 12.5px;
    line-height: 1.45;
  }

  .compare-body {
    padding-bottom: 8px;
  }

  .compare-fit-strip {
    gap: 12px;
    padding: 14px;
  }

  .phead {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .phead-main {
    width: 100%;
    gap: 12px;
  }

  .phead-top {
    gap: 10px;
    align-items: center;
  }

  .phead-avatar-col {
    width: auto;
    flex: none;
  }

  /* slightly smaller avatar on phone so stats fit on one line */
  .phead-top .avatar {
    width: 72px;
    height: 72px;
    font-size: 26px;
  }

  .phead-info {
    padding-right: 0;
    padding-top: 0;
    width: 100%;
    min-width: 0;
  }

  .phead-name-row .uname {
    font-size: 20px;
  }

  .phead-meta {
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 5px;
  }

  .phead-bio {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.4;
  }

  .phead-socials {
    margin-top: 10px;
    gap: 6px;
  }

  .phead-edit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    min-height: 34px;
  }

  .phead-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    margin-left: 0;
  }

  .phead-counts {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 0;
    font-size: 12px;
  }

  .phead-counts .pc-dot {
    margin: 0 8px;
  }

  .phead-social-actions {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .phead-social-actions .btn {
    min-height: 36px;
    flex: 1 1 auto;
  }

  .phead-btn-follow,
  .phead-btn-friend,
  .phead-btn-compare {
    min-width: 0;
    flex: 1 1 calc(33% - 8px);
  }

  .phead-btn-wave,
  .phead-btn-more {
    min-width: 0;
    flex: 0 0 auto;
  }

  .phead-self-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .phead-self-actions .btn {
    flex: 1 1 auto;
    min-width: 88px;
    min-height: 36px;
  }

  .phead-counts {
    justify-content: flex-start;
    width: 100%;
    font-size: 13px;
    gap: 0;
    row-gap: 6px;
  }

  .phead-counts .pc-dot {
    margin: 0 12px;
  }

  .phead .btn,
  .phead-right .btn {
    min-height: 36px;
  }

  .phead .row {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Full-width liquid glass bottom bar (edge-to-edge, no pill) */
  #sidebar {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: calc(50px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    align-items: stretch;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: rgba(12, 13, 17, 0.52);
    backdrop-filter: blur(28px) saturate(1.7);
    -webkit-backdrop-filter: blur(28px) saturate(1.7);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 50;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s;
  }

  body[data-theme="light"] #sidebar {
    background: rgba(244, 242, 236, 0.72);
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  /* hide on scroll-down, reveal on scroll-up */
  #sidebar.nav-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }

  .side-foot {
    display: none;
  }

  /* Activity & Privacy live in the More sheet */
  #nav {
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    gap: 0;
    height: 50px;
    max-height: 50px;
  }

  /* bottom bar: icons only, each cell equal width, icon centred */
  .nav-item {
    position: relative;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    min-height: 50px;
  }

  .nav-item .lbl {
    display: none;
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
  }

  .nav-item.active {
    background: none;
    box-shadow: none;
    color: var(--accent);
  }

  /* filter pills become a single scrollable strip */
  .pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .pills::-webkit-scrollbar {
    display: none;
  }

  .pill {
    flex: none;
  }

  .qstats {
    gap: var(--s-3);
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .hdr-btn .hlbl {
    display: none;
  }

  .hdr-btn {
    padding: 8px;
  }

  /* tighten the header so it fits the smallest phones (320px): icon-only back, less padding */
  /* back label already hidden globally in topbar; keep icon-only */
  .topbar-inner {
    padding: 0 10px;
    gap: 6px;
  }

  #header-actions {
    gap: 2px;
    flex-shrink: 0;
  }

  /* rate list rows: let the score/heat/N meta drop to its own line instead of crowding the title */
  .rate-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .rate-row .qr-text {
    flex: 1 1 60%;
  }

  .rate-row .qr-meta {
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 2px;
  }

  .qrow .qr-meta {
    flex-wrap: wrap;
  }

  /* landing: safe-area on sticky top; hero fills rest of first screen */
  .landing {
    padding-top: 0;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .landing-top {
    margin-bottom: 0;
  }

  .landing-hero {
    margin-top: 0;
  }

  .hero-stage {
    min-height: calc(100svh - var(--hero-top));
    min-height: calc(100dvh - var(--hero-top));
  }

  /* try-it sits just below the fold so hero stays pure */
  .hot-q-wrap {
    margin-top: 4px;
  }

  .hot-q {
    margin-top: var(--s-3);
  }

  /* the Archive on small screens */
  .anthology-grid {
    grid-template-columns: 1fr;
  }

  .archive-hero h1 {
    font-size: 25px;
  }

  .archive-head-body h1 {
    font-size: 22px;
  }

  .archive-banner {
    padding: 13px 15px;
  }

  .ab-title {
    font-size: 16.5px;
  }

  .ab-sub {
    display: none;
  }

  .cr-head {
    flex-direction: column;
    gap: 3px;
  }

  /* clash rows: give the name column the full first line, drop the stance chip to its own line
     (indented under the name) so long answers like "Genuinely unsure" read in full */
  .mind-id {
    flex-basis: calc(100% - 51px);
  }

  .mind-pick {
    order: 3;
    flex-basis: 100%;
    max-width: max-content;
    white-space: nowrap;
    margin-left: 51px;
  }

  .mind-zoom {
    display: none;
  }

  .archive-hero p {
    font-size: 13px;
  }

  .archive-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.18em;
  }

  .fold-head {
    padding: 13px 14px;
  }

  .fold-body {
    padding: 2px 14px 14px;
  }

  .modal {
    padding: var(--s-3);
  }

  .deepdive-head {
    gap: 12px;
    padding-right: 30px;
  }

  .deepdive-portrait {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .deepdive-quote {
    font-size: 17px;
  }

  .deepdive-name {
    font-size: 18px;
  }
}

/* --- new calligraphic S logo mask --- */
:root {
  --logo-s: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20910.0%201020.0%22%20fill%3D%22%2523000%22%3E%20%3Cg%20transform%3D%22translate%280.000000%2C1020.000000%29%20scale%280.100000%2C-0.100000%29%22%3E%3Cpath%20d%3D%22M8375%209788%20c-157%20-53%20-349%20-202%20-536%20-418%20-106%20-123%20-293%20-369%20-371%20-490%20-30%20-47%20-76%20-119%20-103%20-160%20-61%20-95%20-109%20-175%20-173%20-290%20-14%20-25%20-42%20-74%20-62%20-110%20-21%20-36%20-54%20-96%20-73%20-135%20-19%20-38%20-57%20-113%20-83%20-165%20-55%20-106%20-194%20-410%20-219%20-480%20-21%20-55%20-28%20-75%20-50%20-123%20-35%20-80%20-115%20-308%20-141%20-403%20-8%20-32%20-20%20-72%20-24%20-89%20-69%20-239%20-93%20-349%20-125%20-550%20-26%20-167%20-44%20-349%20-51%20-505%20l-7%20-155%20-49%20-73%20c-111%20-164%20-728%20-966%20-823%20-1068%20-20%20-23%20-114%20-132%20-210%20-244%20-244%20-287%20-248%20-292%20-275%20-287%20-14%203%20-63%2019%20-110%2035%20-114%2041%20-248%2054%20-411%2042%20-68%20-5%20-133%20-11%20-144%20-14%20-11%20-3%20-51%20-12%20-90%20-22%20-116%20-27%20-213%20-63%20-344%20-127%20-329%20-161%20-589%20-390%20-805%20-710%20-138%20-206%20-276%20-538%20-316%20-762%20-5%20-27%20-16%20-88%20-24%20-135%20-8%20-47%20-17%20-148%20-20%20-225%20-2%20-77%20-5%20-141%20-5%20-141%20-2%20-4%20-172%20-124%20-226%20-160%20-64%20-43%20-233%20-144%20-240%20-144%20-3%200%20-43%20-18%20-90%20-41%20-111%20-52%20-200%20-63%20-260%20-30%20-22%2012%20-48%2027%20-58%2034%20-16%2011%20-27%202%20-94%20-73%20-220%20-246%20-520%20-496%20-934%20-781%20-85%20-58%20-200%20-135%20-257%20-170%20-113%20-70%20-160%20-105%20-152%20-112%203%20-3%2021%202%2040%2012%2019%209%2071%2032%20115%2050%2044%2019%2094%2040%20110%2047%2017%207%2054%2022%2084%2034%2030%2011%2073%2030%2096%2040%2023%2010%2066%2028%2095%2040%2058%2023%2095%2039%20238%20106%2052%2024%2096%2044%2098%2044%202%200%2044%2019%2092%2041%2048%2023%20125%2059%20172%2081%20132%2062%20146%2070%20285%20143%20143%2075%20484%20269%20582%20331%2035%2021%20120%2076%20190%20122%2070%2045%20132%2081%20139%2078%206%20-2%2015%20-26%2018%20-53%208%20-56%2045%20-184%2058%20-197%204%20-6%208%20-16%208%20-24%200%20-21%2093%20-203%20140%20-273%2071%20-106%20160%20-207%20255%20-289%20184%20-159%20475%20-302%20740%20-364%2039%20-10%2079%20-19%2090%20-22%2011%20-2%2072%20-11%20135%20-19%20133%20-17%20517%20-20%20655%20-5%20193%2021%20412%2071%20644%20147%2025%208%2094%2034%20155%2059%20326%20134%20616%20327%20885%20589%20301%20294%20526%20623%20658%20965%20153%20391%20206%20676%20207%201095%200%20213%20-10%20382%20-34%20530%20-42%20271%20-63%20372%20-136%20670%20-17%2068%20-68%20256%20-94%20345%20-17%2058%20-44%20155%20-60%20215%20-16%2061%20-38%20144%20-49%20185%20-11%2041%20-32%20122%20-46%20180%20-14%2058%20-30%20121%20-35%20140%20-5%2019%20-13%2055%20-19%2080%20-5%2025%20-14%2065%20-20%2090%20-6%2025%20-15%2069%20-21%2099%20l-10%2053%2070%2092%20c65%2084%20177%20238%20327%20447%20129%20180%20437%20648%20534%20813%2056%2094%20121%20203%20144%20241%2082%20138%20327%20612%20386%20748%2017%2039%2040%2092%2051%20117%2011%2025%2027%2061%2035%2080%208%2019%2019%2044%2024%2055%2040%2094%20121%20326%20158%20455%2097%20343%20115%20594%2053%20751%20-17%2042%20-64%2091%20-107%20110%20-44%2020%20-131%2024%20-180%207z%20m33%20-280%20c16%20-16%2015%20-126%20-2%20-218%20-45%20-232%20-116%20-462%20-213%20-690%20-44%20-102%20-58%20-133%20-121%20-270%20-131%20-285%20-307%20-610%20-479%20-885%20-27%20-44%20-74%20-118%20-103%20-165%20-65%20-105%20-446%20-673%20-506%20-755%20-24%20-33%20-68%20-93%20-96%20-132%20-28%20-40%20-55%20-73%20-60%20-73%20-4%200%20-8%2010%20-8%2023%201%2051%2037%20249%2081%20447%2020%2090%2029%20126%2064%20258%2029%20106%20107%20343%20145%20437%204%2011%2018%2047%2031%2080%2012%2033%2035%2088%2051%20123%2015%2034%2028%2065%2028%2067%200%2013%20105%20230%20225%20470%20306%20606%20632%201082%20859%201251%2060%2045%2083%2053%20104%2032z%20m-1995%20-4349%20c9%20-67%2023%20-158%2043%20-274%2026%20-155%2032%20-188%2048%20-270%2033%20-165%2076%20-414%20106%20-607%205%20-35%2014%20-92%2019%20-128%2028%20-179%2036%20-313%2035%20-565%200%20-225%20-4%20-295%20-22%20-420%20-40%20-270%20-85%20-461%20-145%20-620%20-9%20-22%20-29%20-78%20-47%20-125%20-39%20-106%20-33%20-95%20-130%20-278%20-199%20-378%20-416%20-624%20-742%20-841%20-86%20-57%20-300%20-171%20-322%20-171%20-4%200%20-25%20-9%20-49%20-19%20-71%20-33%20-196%20-71%20-322%20-99%20-109%20-23%20-141%20-26%20-345%20-26%20-229%20-1%20-269%203%20-450%2046%20-85%2021%20-256%2088%20-340%20135%20-135%2075%20-252%20176%20-361%20312%20-133%20166%20-229%20409%20-255%20648%20-7%2071%20-2%2081%2061%20121%2042%2026%20100%2068%20198%20143%2032%2024%2080%2060%20107%2079%20440%20317%201083%20899%201444%201308%2055%2061%20103%20112%20107%20112%2013%200%2090%20-108%20118%20-167%2037%20-76%2057%20-136%2076%20-225%2025%20-122%2019%20-225%20-24%20-398%20-53%20-215%20-268%20-502%20-467%20-625%20-95%20-58%20-89%20-54%20-81%20-61%208%20-9%20152%2050%20247%2099%20346%20182%20577%20457%20651%20777%2020%2085%2015%20270%20-10%20368%20-37%20149%20-129%20317%20-233%20428%20l-49%2052%2048%2055%20c26%2031%20104%20120%20173%20198%2069%2078%20150%20171%20180%20207%2030%2035%2079%2092%20107%20126%20141%20165%20360%20441%20498%20629%2055%2075%20105%20134%20110%20133%206%20-1%2013%20-27%2018%20-57z%20m-1711%20-1371%20c29%20-6%2057%20-15%2062%20-19%209%20-8%20-486%20-531%20-687%20-725%20-142%20-138%20-330%20-307%20-428%20-386%20-206%20-166%20-265%20-213%20-373%20-297%20-65%20-51%20-122%20-89%20-127%20-84%20-14%2015%2037%20238%2093%20408%2086%20258%20217%20476%20413%20683%20125%20133%20268%20239%20420%20312%20116%2055%20195%2080%20360%20114%2044%209%20217%205%20267%20-6z%22%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E");
}

.logo-mark,
.boot-s {
  display: inline-block;
  width: 0.9em;
  height: 1em;
  font-size: 32px;
  color: transparent;
  background-color: var(--ink);
  -webkit-mask: var(--logo-s) center / contain no-repeat;
  mask: var(--logo-s) center / contain no-repeat;
}

#boot-splash .boot-s {
  width: 74px;
  height: 84px;
  background-color: #E9EBF0;
}

/* ---------- route loader & transitions ---------- */
.route-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 100;
  animation: fade-in 0.25s ease;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--hairline-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.view-enter-root.view-enter,
.view-enter {
  animation: view-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transform: translateY(4px);
}

@keyframes view-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .view-enter-root.view-enter,
  .view-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Answer mode + place + list faces/opts */
.answer-mode-seg {
  margin-top: 10px;
  max-width: 360px;
  width: 100%;
}

.answer-mode-seg button {
  flex: 1;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.answer-mode-seg button.active {
  color: var(--ink);
  background: rgba(230, 195, 121, 0.14);
  box-shadow: inset 0 -2px 0 var(--accent);
}

body[data-theme="light"] .answer-mode-seg button.active {
  background: rgba(176, 126, 30, 0.12);
  color: var(--ink);
}

.answer-feed-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.answer-toolbar-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.answer-toolbar-top .place-bar {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(52vw, 200px);
}

.answer-toolbar-top .place-chip {
  max-width: 100%;
}

.answer-toolbar-top .place-chip-label {
  max-width: 8.5em;
}

.answer-toolbar-top .answer-filters-toggle {
  flex: none;
  white-space: nowrap;
}

.answer-toolbar-top .btn {
  flex: none;
  white-space: nowrap;
}

.answer-toolbar-top .answer-toolbar-end {
  margin-left: auto;
}

.answer-toolbar-top .feed-scope-seg {
  flex: 1 1 160px;
  min-width: 0;
  max-width: 280px;
}

.answer-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.answer-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--s-3);
}

.answer-filters .qtab-search {
  width: 100%;
}

.answer-filters .qtab-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.answer-filters .qtab-selects select {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

.answer-filters.is-collapsed {
  display: none;
}

.answer-filters-toggle.active {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.feed-scope-seg button {
  flex: 1;
  font-size: 12.5px;
  padding: 9px 8px;
}

@media (min-width: 761px) {
  .answer-filters.is-collapsed {
    display: flex;
  }

  /* desktop always show */
  .answer-filters-toggle {
    display: none;
  }

  .answer-toolbar-meta:empty {
    display: none;
  }
}

/* Place: compact dropdown, not a full-screen modal */
.place-bar {
  position: relative;
  flex: none;
  z-index: 20;
}

.place-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink);
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.place-chip:hover,
.place-chip[aria-expanded="true"] {
  border-color: var(--accent-dim);
  box-shadow: 0 0 16px var(--accent-glow);
}

.place-caret {
  color: var(--ink-faint);
  font-size: 10px;
}

.place-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: min(300px, 88vw);
  max-width: 320px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
}

.place-menu.hidden {
  display: none;
}

.place-menu-label {
  margin: 6px 4px 2px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.place-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}

.place-menu-item:hover {
  background: var(--glass);
}

.place-menu-item.on {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.place-menu-note {
  font-size: 11px;
  color: var(--ink-faint);
}

.place-menu-pickers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px 4px;
}

.place-menu-select {
  width: 100%;
  font-size: 13px;
}

.place-menu-apply {
  width: 100%;
  margin-top: 6px;
}

.place-chip-label {
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 4px;
}

.place-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 4px 8px;
}

.place-pill {
  border: 1px solid var(--hairline-dim);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--label);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

.place-pill:hover {
  border-color: var(--hairline);
  color: var(--ink);
}

.place-pill.on {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(192, 192, 192, 0.08);
}

.place-menu {
  max-height: min(70vh, 480px);
  overflow-y: auto;
}

/* Post-reveal history charts */
.history-sect {
  margin-top: 4px;
}

.history-mix-row {
  display: flex;
  gap: 3px;
  align-items: stretch;
  height: 72px;
  width: 100%;
}

.history-mix-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.history-mix-seg {
  min-height: 2px;
  width: 100%;
}

.history-mix-seg.mine {
  box-shadow: inset 0 0 0 1px rgba(192, 192, 192, 0.45);
}

.history-mix-empty {
  flex: 1;
  background: transparent;
}

.history-mix-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
}

.link-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #2B2208;
  background: var(--accent);
  line-height: 1;
}

.link-verify-status {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
  display: block;
}

.link-verify-status.ok {
  color: var(--accent);
}

.link-verify-status.pending {
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}

.link-edit-stack {
  gap: 12px;
}

.link-edit-row input[type="text"],
.link-edit-row input[type="url"] {
  width: 100%;
}

.mind-changed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mind-changed-row {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s;
}

.mind-changed-row:hover {
  border-color: var(--hairline);
  text-decoration: none;
}

.mc-text {
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.mc-shift {
  font-size: 11px;
  color: var(--ink-faint);
}

.mc-from {
  color: var(--ink-dim);
  text-decoration: line-through;
  opacity: 0.85;
}

.mc-to {
  color: var(--accent);
}

.opts-toggle.active {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.qlr-faces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
}

.qlr-faces-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.qlr-face {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--ink-dim);
  font-size: 12px;
}

.qlr-face:hover {
  color: var(--ink);
  text-decoration: none;
}

.qlr-face .avatar,
.qlr-face img {
  width: 18px !important;
  height: 18px !important;
}

.qlr-face-name {
  max-width: 7em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qlr-face-more {
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}

.qlr-face-more:hover {
  color: var(--accent);
}

.view-more-btn {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  font-size: 12px;
  min-height: 34px;
}

.qlr-faces-inner .view-more-btn,
.qlr-faces-inner .qlr-face-more {
  width: auto;
  margin-top: 0;
  min-height: 0;
  justify-content: flex-start;
}

.friend-takes .view-more-btn {
  margin-top: 6px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comment-thread {
  display: contents;
}

.qlr-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.qlr-opt {
  font-size: 12px !important;
  padding: 6px 10px !important;
  min-height: 32px !important;
  max-width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
}

.qlr-opt.mine {
  border-color: var(--accent-dim) !important;
  color: var(--accent) !important;
  background: rgba(192, 192, 192, 0.1) !important;
  box-shadow: 0 0 12px var(--accent-glow);
}

.qlr-opt.dimmed {
  opacity: 0.45;
}

.qlr-opt:disabled {
  cursor: default;
}

.qlr-opt-hint {
  width: 100%;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.qlist-row {
  cursor: pointer;
}

.qlist-row.answered {
  opacity: 1;
}

.answer-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Set cards in the answer feed */
.set-feed-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--hairline-dim);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.set-feed-card:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 20px var(--accent-glow);
  text-decoration: none;
  color: inherit;
}

.sfc-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sfc-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.sfc-done {
  color: var(--agree);
  margin-left: auto;
}

.sfc-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.sfc-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sfc-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.sfc-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--glass);
  overflow: hidden;
}

.sfc-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

.sfc-meta {
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.sfc-cta {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 2px;
}

.comment.reply {
  margin-left: 28px;
  border-left: 1px solid var(--hairline-dim);
  padding-left: 10px;
}

.reply-composer {
  margin-top: 8px;
}

/* tactile list rows */
.qrow:active,
.item-row:active,
.ftake:active,
.match-card:active {
  transform: scale(0.99);
  transition: transform 0.05s;
}

/* =================================================================
   Private Sentinets — Porcelain shell, mobile-first premium product
   ================================================================= */

/* Landing dual path under primary Begin — same column + size as .landing-begin */
.hero-cta {
  margin-left: auto;
  margin-right: auto;
}
.hero-cta .landing-begin,
.hero-cta .landing-org-cta {
  width: 100%;
  max-width: 300px;
}
.btn.landing-org-cta {
  width: 100%;
  max-width: 300px;
  min-height: 50px;
  box-sizing: border-box;
  font-family: var(--label);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color 0.22s, box-shadow 0.25s, background 0.22s, transform 0.15s;
}
.btn.landing-org-cta:hover {
  border-color: var(--accent-dim);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 0 22px var(--accent-glow);
}
.btn.landing-org-cta:active { transform: scale(0.98); }
body[data-theme="light"] .btn.landing-org-cta {
  background: rgba(255,255,255,0.55);
  border-color: rgba(0,0,0,0.14);
}
body[data-theme="light"] .btn.landing-org-cta:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.landing-org-sub {
  margin: 0;
  max-width: 28em;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* ---- Porcelain tokens — daylight institution, high readability ---- */
body[data-shell="sentinet"] {
  --canvas: #F3F0E8;
  --ink: #0F1218;
  --ink-dim: #3F4654;
  --ink-faint: #6B7382;
  --hairline: rgba(15, 18, 24, 0.12);
  --hairline-dim: rgba(15, 18, 24, 0.07);
  --glass: rgba(255, 255, 255, 0.82);
  --glass-hi: rgba(255, 255, 255, 0.94);
  --accent: #A67C1A;
  --accent-glow: rgba(166, 124, 26, 0.26);
  --accent-dim: rgba(166, 124, 26, 0.48);
  --sn-teal: #1F7A77;
  --sn-teal-soft: rgba(31, 122, 119, 0.12);
  --sn-violet: #5C4F96;
  --sn-violet-soft: rgba(92, 79, 150, 0.12);
  --sn-coral: #B85A4A;
  --sn-coral-soft: rgba(184, 90, 74, 0.12);
  --sn-slate: #343C4A;
  --sn-shadow: 0 8px 28px rgba(15, 18, 24, 0.06);
  --sn-shadow-lg: 0 16px 44px rgba(15, 18, 24, 0.09);
  --sn-radius: 2px;
  --sn-radius-sm: 2px;
  --radius: 2px;
  --radius-sm: 2px;
}
body[data-shell="sentinet"] #bg::before {
  background:
    radial-gradient(900px 640px at 8% -4%, rgba(176, 138, 46, 0.14), transparent 58%),
    radial-gradient(780px 560px at 96% 18%, rgba(42, 143, 140, 0.1), transparent 55%),
    radial-gradient(720px 520px at 50% 108%, rgba(107, 92, 165, 0.08), transparent 55%),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.5) 0%, transparent 62%);
  animation: sn-atmosphere 18s ease-in-out infinite alternate;
}
body[data-shell="sentinet"] #bg::after {
  background:
    radial-gradient(140% 120% at 50% 0%, transparent 50%, rgba(18, 20, 26, 0.04));
}
body[data-shell="sentinet"] #topbar {
  background: rgba(244, 241, 234, 0.86);
  border-bottom-color: var(--hairline-dim);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body[data-shell="sentinet"] #fx { opacity: 0.28; }
body[data-shell="sentinet"] #view {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
@media (max-width: 760px) {
  body[data-shell="sentinet"] #view {
    padding: 12px max(14px, env(safe-area-inset-left)) calc(env(safe-area-inset-bottom, 0px) + 88px) max(14px, env(safe-area-inset-right));
  }
}
body[data-shell="sentinet"] .glass {
  background: var(--glass);
  border-color: var(--hairline);
  box-shadow: var(--sn-shadow);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
body[data-shell="sentinet"] .btn.primary {
  background: linear-gradient(165deg, #C9A045 0%, var(--accent) 55%, #8F6E22 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.28);
}
body[data-shell="sentinet"] .btn.primary:hover {
  box-shadow: 0 6px 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.32);
  border-color: transparent;
}
body[data-shell="sentinet"] .qrow,
body[data-shell="sentinet"] .feed-list .qrow {
  border-radius: var(--sn-radius-sm);
}

@keyframes sn-atmosphere {
  from { filter: hue-rotate(0deg) saturate(1); }
  to { filter: hue-rotate(8deg) saturate(1.08); }
}
@keyframes sn-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sn-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes sn-pulse-glow {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}
@keyframes sn-orb {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.06); opacity: 1; }
}

.sn-rise {
  opacity: 0;
  animation: sn-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  body[data-shell="sentinet"] #bg::before { animation: none; }
  .sn-rise { animation: none; opacity: 1; transform: none; }
  .sn-bar-fill { animation: none !important; }
}

/* ---- App shell layout ---- */
.sn-app {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}
.sn-hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--sn-radius);
  padding: 22px 18px 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.62) 100%),
    linear-gradient(120deg, rgba(176,138,46,0.12), rgba(42,143,140,0.08));
  border: 1px solid var(--hairline);
  box-shadow: var(--sn-shadow);
}
.sn-hero-banner::before {
  content: '';
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 120%;
  background: radial-gradient(circle, rgba(176,138,46,0.18), transparent 62%);
  pointer-events: none;
}
.sn-hero-compact { padding: 16px 16px 18px; }
.sn-eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.sn-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--ink);
  text-wrap: balance;
}
.sn-lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 34em;
}
.sn-lede-soft { color: var(--ink-faint); font-size: 13px; }

/* Page head inside an org */
.sn-head {
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sn-head-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sn-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.btn.sn-back {
  padding: 7px 12px;
  font-size: 12.5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  gap: 4px;
}
.btn.sn-back:hover { color: var(--ink); border-color: var(--accent-dim); }
.btn.sn-btn-ghost {
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  border-radius: 10px;
}
.btn.sn-btn-ghost:hover {
  color: var(--ink);
  border-color: var(--accent-dim);
  background: #fff;
}
.sn-btn-block { width: 100%; min-height: 48px; }
.sn-brand-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sn-brand-mark {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-family: var(--label);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(145deg, #C9A045, #8F6E22 70%);
  box-shadow: 0 8px 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.35);
}
.sn-brand-mark.sn-brand-logo {
  background: center/cover no-repeat var(--sn-brand, #9A7B2F);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--hairline-dim);
}
.sn-brand-edit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sn-logo-preview {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-dim);
  background: #C9A045 center/cover no-repeat;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}
.sn-audit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.sn-audit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-dim);
  font-size: 12px;
}
.sn-audit-ts { color: var(--ink-faint); font-size: 10px; }
.sn-audit-who { font-weight: 500; }
.sn-audit-act { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; }
.sn-brand-text { min-width: 0; flex: 1; }
.sn-brand-text .sn-title { font-size: clamp(24px, 6.5vw, 30px); margin-bottom: 4px; }

/* Horizontal subnav — scrolls on phone */
.sn-subnav {
  margin: 2px -4px 0;
  padding: 0;
  border: none;
}
.sn-subnav-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 4px 4px;
}
.sn-subnav-track::-webkit-scrollbar { display: none; }
.sn-subnav-a {
  flex: none;
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  padding: 9px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.35);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.sn-subnav-a:hover { color: var(--ink); text-decoration: none; background: #fff; }
.sn-subnav-a.on {
  color: #fff;
  font-weight: 500;
  background: linear-gradient(165deg, #C9A045, #9A7624);
  border-color: transparent;
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* Panels & cards */
.sn-panel {
  padding: 18px 16px;
  border-radius: var(--sn-radius);
}
.sn-cta-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.72)),
    linear-gradient(120deg, rgba(176,138,46,0.08), rgba(42,143,140,0.06));
}
.sn-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sn-card-h {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sn-card-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
}
.sn-card-p-soft {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* Org grid */
.sn-org-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .sn-org-grid { grid-template-columns: repeat(2, 1fr); }
}
.sn-org-card {
  display: block;
  padding: 18px 16px 16px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--sn-radius);
  transition: border-color 0.22s, box-shadow 0.28s, transform 0.2s;
  position: relative;
  overflow: hidden;
}
.sn-org-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--sn-teal));
  opacity: 0;
  transition: opacity 0.2s;
}
.sn-org-card:hover,
.sn-org-card:active {
  border-color: rgba(176, 138, 46, 0.35);
  box-shadow: var(--sn-shadow-lg);
  text-decoration: none;
  transform: translateY(-2px);
}
.sn-org-card:hover::after,
.sn-org-card:active::after { opacity: 1; }
.sn-org-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.sn-org-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(176,138,46,0.18), rgba(42,143,140,0.12));
  border: 1px solid var(--hairline);
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
}
.sn-role-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--sn-teal-soft);
  color: var(--sn-teal);
  border: 1px solid rgba(42, 143, 140, 0.18);
}
.sn-role-owner { background: rgba(176,138,46,0.12); color: var(--accent); border-color: rgba(176,138,46,0.22); }
.sn-role-admin { background: var(--sn-violet-soft); color: var(--sn-violet); border-color: rgba(107,92,165,0.2); }
.sn-org-card h2 {
  font-size: 17px;
  margin: 0 0 6px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sn-org-desc {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
  color: var(--ink-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sn-org-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.sn-meta-arrow {
  color: var(--accent);
  font-size: 14px;
  transition: transform 0.2s;
}
.sn-org-card:hover .sn-meta-arrow { transform: translateX(3px); }

/* Pulse stats */
.sn-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 720px) {
  .sn-pulse-grid { grid-template-columns: repeat(4, 1fr); }
}
.sn-stat {
  position: relative;
  overflow: hidden;
  padding: 14px 14px 12px;
  border-radius: var(--sn-radius-sm);
  min-height: 84px;
}
.sn-stat-glow {
  position: absolute;
  right: -12px;
  top: -16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  filter: blur(2px);
  animation: sn-pulse-glow 3.6s ease-in-out infinite;
  pointer-events: none;
}
.sn-stat-gold .sn-stat-glow { background: rgba(176,138,46,0.35); }
.sn-stat-teal .sn-stat-glow { background: rgba(42,143,140,0.32); }
.sn-stat-slate .sn-stat-glow { background: rgba(61,70,86,0.22); }
.sn-stat-violet .sn-stat-glow { background: rgba(107,92,165,0.3); }
.sn-stat-gold { border-color: rgba(176,138,46,0.18); }
.sn-stat-teal { border-color: rgba(42,143,140,0.16); }
.sn-stat-violet { border-color: rgba(107,92,165,0.16); }
.sn-stat-l {
  display: block;
  position: relative;
  z-index: 1;
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.sn-stat-n {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(24px, 7vw, 28px);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.sn-stat-gold .sn-stat-n { color: #8A6A1F; }
.sn-stat-teal .sn-stat-n { color: #1F6F6D; }
.sn-stat-violet .sn-stat-n { color: #56488A; }

/* Sections */
.sn-section { display: flex; flex-direction: column; gap: 10px; }
.sn-section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 2px;
}
.sn-section-head-row {
  align-items: center;
  justify-content: space-between;
}
.sn-section-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sn-section-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(176,138,46,0.15);
}
.sn-section-friction .sn-section-dot {
  background: var(--sn-coral);
  box-shadow: 0 0 0 4px var(--sn-coral-soft);
}
.sn-section-consensus .sn-section-dot {
  background: var(--sn-teal);
  box-shadow: 0 0 0 4px var(--sn-teal-soft);
}
.sn-section-attention .sn-section-dot {
  background: var(--sn-violet);
  box-shadow: 0 0 0 4px var(--sn-violet-soft);
}
.sn-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sn-section-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-faint);
}
.sn-section-body { padding: 6px 14px 10px; }
.sn-section-body-flush { padding: 0; background: transparent; border: none; box-shadow: none; }
.sn-section-more {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 2px;
}
.sn-section-more:hover { text-decoration: underline; }
.sn-section-alignment .sn-section-dot {
  background: var(--sn-violet, #56488A);
  box-shadow: 0 0 0 4px rgba(86, 72, 138, 0.12);
}
.sn-section-participation .sn-section-dot {
  background: var(--sn-teal, #1F6F6D);
}

/* Insights / alignment */
.sn-insights .sn-section { margin-top: 16px; }
.sn-scope-note {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
  padding: 0 2px;
}
.sn-align-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sn-align-h {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.sn-align-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sn-align-list-row {
  flex-direction: row;
  flex-wrap: wrap;
}
.sn-align-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
}
.sn-align-list-row .sn-align-chip {
  width: auto;
  min-width: 140px;
  flex: 1 1 140px;
}
.sn-align-chip:hover {
  border-color: var(--accent-dim);
}
.sn-align-chip-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sn-align-chip-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sn-align-chip-meta {
  font-size: 10px;
  color: var(--ink-faint);
}
.sn-part-list {
  display: flex;
  flex-direction: column;
}
.sn-part-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--hairline-dim);
  text-decoration: none;
  color: inherit;
}
.sn-part-row:last-child { border-bottom: none; }
.sn-part-row:hover { background: rgba(0, 0, 0, 0.03); }
.sn-part-t {
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
}
.sn-part-n {
  flex: none;
  font-size: 11px;
  color: var(--ink-faint);
}
.sn-like-you-host:empty { display: none; }
.sn-like-you-host { margin-bottom: 14px; }

/* Create: org privacy tiles + templates */
.sn-priv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sn-priv-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--hairline-dim);
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sn-priv-tile b {
  font-size: 13px;
  font-weight: 600;
}
.sn-priv-tile span {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-dim);
}
.sn-priv-tile.selected {
  border-color: var(--accent-dim);
  background: rgba(192, 192, 192, 0.08);
}
body[data-shell="sentinet"] .sn-priv-tile.selected {
  border-color: rgba(176, 126, 30, 0.45);
  background: rgba(176, 126, 30, 0.08);
}
.sn-tpl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 560px) {
  .sn-priv-grid { grid-template-columns: 1fr; }
}
.sn-member-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .sn-align-grid { grid-template-columns: 1fr; }
}

.sn-insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 780px) {
  .sn-insight-grid { grid-template-columns: 1fr 1fr; }
}
.sn-insight-item {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--hairline-dim);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-radius: 8px;
  margin: 0 -4px;
  padding-left: 8px;
  padding-right: 8px;
}
.sn-insight-item:last-child { border-bottom: none; }
.sn-insight-item:hover,
.sn-insight-item:active {
  text-decoration: none;
  background: rgba(176, 138, 46, 0.05);
}
.sn-insight-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.sn-insight-t {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 450;
}
.sn-insight-m {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.sn-heat-badge,
.sn-pct-badge {
  flex: none;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}
.sn-heat-hot .sn-heat-badge {
  background: var(--sn-coral-soft);
  color: var(--sn-coral);
}
.sn-heat-warm .sn-heat-badge {
  background: rgba(176,138,46,0.14);
  color: #8A6A1F;
}
.sn-heat-cool .sn-heat-badge {
  background: rgba(61,70,86,0.08);
  color: var(--ink-faint);
}
.sn-pct-badge {
  background: var(--sn-teal-soft);
  color: #1F6F6D;
  font-weight: 600;
}
.sn-empty-hint {
  margin: 8px 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Bars with grow animation */
.sn-mini-bars { display: flex; flex-direction: column; gap: 5px; }
.sn-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sn-bar-l {
  flex: 0 0 30%;
  max-width: 7.5em;
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sn-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(18, 20, 26, 0.07);
  overflow: hidden;
}
.sn-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(61,70,86,0.35), rgba(61,70,86,0.55));
  transform-origin: left center;
  animation: sn-bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sn-bar-fill.mine,
.sn-section-consensus .sn-bar-fill {
  background: linear-gradient(90deg, #3BA8A4, var(--sn-teal));
}
.sn-heat-hot .sn-bar-fill {
  background: linear-gradient(90deg, #D48978, var(--sn-coral));
}
.sn-bar-p {
  flex: 0 0 34px;
  text-align: right;
  font-size: 10px;
  color: var(--ink-faint);
}

/* Members */
.sn-member-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sn-member {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--sn-radius-sm);
}
.sn-member-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.sn-av {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(176,138,46,0.16), rgba(42,143,140,0.12));
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  font-size: 14px;
  font-weight: 600;
  flex: none;
}
.sn-member-info { flex: 1; min-width: 0; }
.sn-member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.sn-member-name-row b {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.sn-member-meta {
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.sn-member-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(18,20,26,0.07);
  overflow: hidden;
}
.sn-member-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3BA8A4, var(--sn-teal));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sn-member-admin {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.sn-role-sel {
  flex: 1;
  min-width: 120px;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
}
.sn-leave-wrap { margin-top: 6px; }

/* Forms */
.sn-form-card { max-width: 560px; }
.sn-form-actions { margin-top: 18px; }
.sn-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.sn-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.sn-settings-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sn-settings-tools .btn { width: 100%; min-height: 44px; }

/* Empty states */
.sn-empty-orb {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), transparent 45%),
    linear-gradient(145deg, rgba(176,138,46,0.35), rgba(42,143,140,0.3));
  box-shadow: 0 8px 24px rgba(176,138,46,0.2);
  animation: sn-orb 3.2s ease-in-out infinite;
}
.sn-empty-block { padding: 28px 16px; }

/* Feed inside sentinet */
.sn-feed { display: flex; flex-direction: column; gap: 8px; }
body[data-shell="sentinet"] .sn-feed .qrow {
  background: var(--glass);
  border: 1px solid var(--hairline);
  padding: 12px 12px;
}

/* Mobile sticky dock — sits fully above the bottom tab bar */
.sn-dock {
  display: none;
}
@media (max-width: 760px) {
  body[data-shell="sentinet"] #view {
    /* room for tab bar + dock + safe area */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 132px) !important;
  }
  .sn-dock {
    display: flex;
    gap: 10px;
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 90;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--hairline);
    box-shadow: 0 12px 36px rgba(18, 20, 26, 0.16);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
  }
  .sn-dock .btn {
    flex: 1 1 0;
    min-height: 46px;
    min-width: 0;
    border-radius: 12px;
    font-size: 14px;
  }
  /* keep header actions on Sentinet so Ask is never only in a clipped dock */
  body[data-shell="sentinet"] .sn-head-actions {
    display: flex !important;
  }
}

/* =================================================================
   Private Sentinets marketing — institutional porcelain, high readability
   ================================================================= */
.sn-biz {
  min-height: 100dvh;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Top bar */
.sn-biz-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px max(20px, env(safe-area-inset-left)) 14px max(20px, env(safe-area-inset-right));
  background: rgba(244, 241, 234, 0.88);
  border-bottom: 1px solid var(--hairline-dim);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.sn-biz-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.sn-biz-logo .logo-mark {
  font-size: 22px;
  line-height: 1;
  width: 22px;
  height: 24px;
}
.sn-biz-logo-word {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.sn-biz-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sn-biz-nav > a {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 2px;
  line-height: 1.2;
}
.sn-biz-nav > a:hover { color: var(--ink); }
.sn-biz-nav-cta {
  color: var(--ink) !important;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.7);
  margin-left: 4px;
}
.sn-biz-nav-cta:hover {
  border-color: var(--accent-dim);
  background: #fff;
}

/* Hero */
.sn-biz-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 12vh, 100px) max(20px, env(safe-area-inset-left)) clamp(40px, 8vh, 72px) max(20px, env(safe-area-inset-right));
}
.sn-biz-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.sn-biz-hero-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(90vw, 560px);
  height: min(50vw, 320px);
  transform: translate(-50%, -40%);
  background: radial-gradient(ellipse at center,
    rgba(176, 138, 46, 0.16) 0%,
    rgba(42, 143, 140, 0.06) 42%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.sn-biz-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.sn-biz-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(32px, 7.2vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.sn-biz-sub {
  font-size: clamp(16px, 2.4vw, 18px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 36em;
  margin: 0 auto 28px;
  text-wrap: pretty;
}
.sn-biz-cta-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(100%, 340px);
  margin: 0 auto;
}
.sn-biz-cta-row-center {
  margin-left: auto;
  margin-right: auto;
}
.sn-biz-primary {
  width: 100%;
  min-height: 50px;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 2px;
}
.sn-biz-secondary {
  width: 100%;
  min-height: 48px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.sn-biz-secondary:hover {
  color: var(--ink);
  border-color: var(--accent-dim);
  background: #fff;
}
.sn-biz-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 28px 0 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sn-biz-proof li {
  position: relative;
  padding-left: 12px;
}
.sn-biz-proof li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  opacity: 0.75;
}

/* Trust band */
.sn-biz-trustband {
  border-top: 1px solid var(--hairline-dim);
  border-bottom: 1px solid var(--hairline-dim);
  background: rgba(255, 255, 255, 0.45);
}
.sn-biz-trustband-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 max(16px, env(safe-area-inset-left));
}
.sn-biz-trust-item {
  padding: 22px 8px;
  border-bottom: 1px solid var(--hairline-dim);
  text-align: left;
}
.sn-biz-trust-item:last-child { border-bottom: none; }
.sn-biz-trust-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.sn-biz-trust-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 28em;
}
@media (min-width: 720px) {
  .sn-biz-trustband-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 8px max(24px, env(safe-area-inset-left));
  }
  .sn-biz-trust-item {
    padding: 28px 24px;
    border-bottom: none;
    border-right: 1px solid var(--hairline-dim);
  }
  .sn-biz-trust-item:last-child { border-right: none; }
}

/* Sections */
.sn-biz-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 88px) max(20px, env(safe-area-inset-left)) clamp(40px, 7vh, 72px) max(20px, env(safe-area-inset-right));
}
.sn-biz-section-alt {
  background: rgba(255, 255, 255, 0.35);
  border-top: 1px solid var(--hairline-dim);
  border-bottom: 1px solid var(--hairline-dim);
  max-width: none;
}
.sn-biz-section-alt .sn-biz-section-head,
.sn-biz-section-alt .sn-biz-steps {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.sn-biz-section-head {
  max-width: 560px;
  margin: 0 0 36px;
  text-align: left;
}
.sn-biz-section-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 4.5vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.sn-biz-section-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 36em;
}

/* Feature grid */
.sn-biz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) {
  .sn-biz-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 960px) {
  .sn-biz-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.sn-biz-card {
  position: relative;
  padding: 24px 22px 26px;
  text-align: left;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, var(--sn-shadow);
  transition: border-color 0.22s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.sn-biz-card:hover {
  border-color: rgba(176, 138, 46, 0.32);
  box-shadow: var(--sn-shadow-lg);
  transform: translateY(-2px);
}
.sn-biz-card-num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 14px;
  opacity: 0.9;
}
.sn-biz-card-h {
  font-family: var(--label);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}
.sn-biz-card-p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* Steps */
.sn-biz-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sn-biz-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--hairline);
  box-shadow: var(--sn-shadow);
  text-align: left;
}
.sn-biz-step-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(176, 138, 46, 0.1);
  border: 1px solid rgba(176, 138, 46, 0.22);
}
.sn-biz-step-body h3 {
  margin: 2px 0 6px;
  font-family: var(--label);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sn-biz-step-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Close CTA */
.sn-biz-close {
  padding: clamp(40px, 8vh, 72px) max(20px, env(safe-area-inset-left)) clamp(48px, 9vh, 80px) max(20px, env(safe-area-inset-right));
}
.sn-biz-close-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 48px) clamp(24px, 5vw, 40px);
  text-align: center;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 100%),
    linear-gradient(120deg, rgba(176, 138, 46, 0.08), rgba(42, 143, 140, 0.05));
  box-shadow: var(--sn-shadow-lg);
}
.sn-biz-close-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 4vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.sn-biz-close-copy {
  margin: 0 auto 28px;
  max-width: 32em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Footer */
.sn-biz-footer {
  border-top: 1px solid var(--hairline-dim);
  padding: 36px max(20px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-right));
  background: rgba(255, 255, 255, 0.4);
}
.sn-biz-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sn-biz-footer-mark {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.sn-biz-footer-brand p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 28em;
}
.sn-biz-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.sn-biz-footer-links a {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: none;
}
.sn-biz-footer-links a:hover { color: var(--ink); }
.sn-biz-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-dim);
  font-size: 12px;
  color: var(--ink-faint);
}
.sn-biz-footer-base .spacer { flex: 1; min-width: 12px; }
.sn-biz-footer-base .vincere {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sn-biz-footer-base .vincere b {
  color: var(--ink-dim);
  font-weight: 500;
}

@media (min-width: 720px) {
  .sn-biz-cta-row {
    flex-direction: row;
    width: auto;
    justify-content: center;
  }
  .sn-biz-primary,
  .sn-biz-secondary {
    width: auto;
    min-width: 200px;
    padding-left: 28px;
    padding-right: 28px;
  }
  .sn-biz-nav a:not(.sn-biz-nav-cta):not(.theme-toggle) {
    /* keep mid links on desktop */
  }
}
@media (max-width: 560px) {
  .sn-biz-nav a:not(.sn-biz-nav-cta) {
    display: none;
  }
  .sn-biz-logo-word { display: none; }
}

/* In-app shell readability polish */
body[data-shell="sentinet"] .sn-app {
  gap: 18px;
  max-width: 880px;
}
body[data-shell="sentinet"] .sn-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: -0.028em;
}
body[data-shell="sentinet"] .sn-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dim);
}
body[data-shell="sentinet"] .sn-section-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body[data-shell="sentinet"] .sn-section-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-faint);
}
body[data-shell="sentinet"] .sn-panel {
  border-radius: 2px;
}
body[data-shell="sentinet"] .sn-stat {
  border-radius: 2px;
  padding: 14px 12px;
}
body[data-shell="sentinet"] .sn-stat-n {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
body[data-shell="sentinet"] .sn-stat-l {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
body[data-shell="sentinet"] .sn-insight-t {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 450;
}
body[data-shell="sentinet"] .sn-card-h {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
body[data-shell="sentinet"] .sn-card-p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Sentinet privacy chips on question cards */
.chip.sn-priv-chip {
  color: var(--sn-teal, #2A8F8C);
  border-color: rgba(42, 143, 140, 0.28);
  background: rgba(42, 143, 140, 0.1);
  letter-spacing: 0.04em;
}
body[data-shell="sentinet"] .chip.sn-priv-chip {
  color: var(--sn-teal);
  border-color: rgba(42, 143, 140, 0.28);
  background: var(--sn-teal-soft);
}
.sn-row-priv {
  color: var(--sn-teal, #2A8F8C);
  font-size: 0.85em;
}

/* ---- Duo Play + levels ---- */
.chip.level-chip {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  border-radius: 2px;
}
.duo-hub-status .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.duo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.duo-list-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 16px;
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.duo-list-card:hover {
  border-color: var(--accent-dim, rgba(192,192,192,0.5));
}
.duo-invite-box {
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(0,0,0,0.1));
  border-radius: 2px;
  word-break: break-all;
  font-size: 12px;
  line-height: 1.45;
  background: var(--panel-2, transparent);
}
.duo-bar {
  height: 6px;
  border-radius: 2px;
  background: var(--line, rgba(0,0,0,0.08));
  overflow: hidden;
}
.duo-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent, #c0c0c0);
  transition: width 0.2s ease;
}
.duo-q-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.duo-q-card {
  border-radius: 2px;
  padding: 16px;
}
.duo-q-card.is-done {
  border-color: var(--accent-dim, rgba(192,192,192,0.45));
}
.duo-q-card.agree {
  border-color: rgba(80, 160, 110, 0.45);
}
.duo-q-card.disagree {
  border-color: rgba(200, 120, 100, 0.35);
}
.duo-q-text {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.duo-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.duo-opt {
  border-radius: 2px;
  text-align: left;
}
.duo-compare-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
}
.duo-compare-row .ok { color: rgb(60, 140, 90); }
.duo-compare-row .no { color: rgb(170, 90, 70); }
.duo-results-hero {
  text-align: center;
  padding: 28px 16px;
  border-radius: 2px;
}
.duo-score-big {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.duo-stub-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--line, rgba(0,0,0,0.06));
  font-size: 14px;
}
.duo-stub-row:first-of-type { border-top: 0; }
.profile-unlock-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-unlock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  font-size: 13px;
  opacity: 0.55;
}
.profile-unlock-row.on { opacity: 1; }
.online-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.online-play-btn {
  border-radius: 2px;
  flex-shrink: 0;
}

/* Play CTA on Answer tab — stands out from Create */
.answer-head-actions {
  gap: 8px;
  flex-wrap: wrap;
}
.btn-play-cta {
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--accent, #c0c0c0) 65%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent, #c0c0c0) 22%, transparent),
      color-mix(in srgb, var(--accent, #c0c0c0) 6%, transparent));
  color: var(--ink, #e9ebf0);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #c0c0c0) 18%, transparent) inset,
    0 0 18px color-mix(in srgb, var(--accent, #c0c0c0) 18%, transparent);
  gap: 6px;
}
.btn-play-cta:hover {
  border-color: var(--accent, #c0c0c0);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent, #c0c0c0) 34%, transparent),
      color-mix(in srgb, var(--accent, #c0c0c0) 10%, transparent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent, #c0c0c0) 28%, transparent) inset,
    0 0 24px color-mix(in srgb, var(--accent, #c0c0c0) 28%, transparent);
}
.btn-play-ico {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1;
}

/* Answer stats — one horizontal strip next to the avatar */
.phead-mind-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px 12px;
  padding: 2px 0 0;
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
.pms-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.15;
  white-space: nowrap;
  flex: none;
}
.pms-n {
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pms-l {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Level: number nested in a slim star + ring */
.pms-level {
  align-items: center;
  gap: 2px;
  min-width: 2.5rem;
  margin-left: 2px;
}
.pms-star {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.pms-star-svg {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.pms-star-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--accent, #c0c0c0) 35%, transparent);
  stroke-width: 0.9;
}
.pms-star-path {
  fill: color-mix(in srgb, var(--accent, #c0c0c0) 8%, transparent);
  stroke: color-mix(in srgb, var(--accent, #c0c0c0) 72%, #fff 8%);
  stroke-width: 1.15;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #c0c0c0) 28%, transparent));
}
.pms-star-inner {
  fill: none;
  stroke: color-mix(in srgb, var(--accent, #c0c0c0) 40%, transparent);
  stroke-width: 0.7;
  stroke-linejoin: round;
  opacity: 0.85;
}
.pms-star-n {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent, #c0c0c0) 35%, transparent);
}
.pms-level .pms-l {
  letter-spacing: 0.1em;
  text-align: center;
  width: 100%;
}

/* Profile compass + temperament twin cards — always side-by-side */
.profile-mind-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.profile-mind-card {
  border-radius: 2px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0; /* allow shrink inside grid */
  overflow: hidden;
}
.profile-mind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}
.profile-mind-kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.profile-mind-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
  user-select: none;
  flex: none;
}
.profile-mind-toggle input {
  width: 12px;
  height: 12px;
  accent-color: var(--accent, #c0c0c0);
  margin: 0;
}
.profile-mind-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.profile-compass-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  flex: 1;
  width: 100%;
}
.profile-compass-chart {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}
.profile-compass-chart .compass-chart,
.profile-compass-inner .compass-chart {
  width: min(100%, 220px);
  height: auto;
  aspect-ratio: 1;
  max-width: 100%;
  flex: none;
}
.profile-mind-meta {
  min-width: 0;
  width: 100%;
}
.profile-temper-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 160px;
  justify-content: center;
  flex: 1;
}
.profile-temper-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: var(--ink);
}
.profile-mind-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.profile-mind-sub {
  font-size: 11px;
  line-height: 1.35;
}
.profile-temper-poles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.profile-temper-poles .ptp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 2px;
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.profile-temper-poles .ptp.strong {
  border-color: color-mix(in srgb, var(--accent, #c0c0c0) 55%, transparent);
  background: color-mix(in srgb, var(--accent, #c0c0c0) 12%, transparent);
}
.profile-temper-poles .ptp.edge {
  opacity: 0.65;
}
.profile-mind-locked {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.profile-mind-link {
  align-self: flex-start;
  margin-top: auto;
  border-radius: 2px;
}

/* Phone: keep twins side-by-side; compress type + chart */
@media (max-width: 760px) {
  .profile-mind-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .profile-mind-card {
    padding: 10px 8px 8px;
  }
  .profile-mind-kicker {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .profile-mind-toggle span {
    /* checkbox only — save horizontal space */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .profile-compass-chart .compass-chart,
  .profile-compass-inner .compass-chart {
    width: min(100%, 168px);
  }
  .profile-temper-inner {
    min-height: 120px;
  }
  .profile-temper-code {
    font-size: 26px;
    letter-spacing: 0.12em;
  }
  .profile-mind-label {
    font-size: 12px;
  }
  .profile-mind-sub {
    font-size: 10px;
  }
  .profile-temper-blurb {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .profile-mind-link {
    font-size: 11px;
    min-height: 28px;
    padding: 4px 8px;
  }
  .phead-mind-stats {
    align-items: flex-end;
    justify-content: flex-end;
    margin-left: auto;
    padding-top: 0;
    gap: 8px 10px;
    flex-wrap: nowrap;
    max-width: none;
  }
  .pms-n {
    font-size: 15px;
  }
  .pms-l {
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .pms-star,
  .pms-star-svg {
    width: 32px;
    height: 32px;
  }
  .pms-star-n {
    font-size: 12px;
  }
  .pms-level {
    min-width: 2.25rem;
  }
}

/* ---- Invite · Achievements · Events ---- */
.invite-hero .duo-invite-box { margin-top: 4px; }
.invite-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.invite-reward {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.invite-reward b {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.invite-stats-row {
  gap: 28px;
  flex-wrap: wrap;
}
.invite-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--line, rgba(0,0,0,0.06));
  font-size: 12px;
}
.invite-recent-row:first-of-type { border-top: 0; }

.ach-hero .ach-level {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
.ach-pills { flex-wrap: wrap; }
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ach-card {
  border-radius: 2px;
  padding: 14px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ach-card.earned {
  border-color: color-mix(in srgb, var(--accent, #c0c0c0) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #c0c0c0) 12%, transparent) inset;
}
.ach-card.locked {
  opacity: 0.55;
}
.ach-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.ach-cat {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ach-xp {
  font-size: 11px;
  color: var(--accent, #c0c0c0);
}
.ach-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.ach-desc {
  font-size: 12.5px;
  line-height: 1.4;
  flex: 1;
}
.ach-when, .ach-prog-lbl {
  font-size: 11px;
  margin-top: auto;
}
.ach-prog { height: 4px; }

.events-hero { border-radius: 2px; }
.events-kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.events-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.events-roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.events-card {
  border-radius: 2px;
  padding: 14px;
}
.events-card-status {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.events-card-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}