@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");

:root {
  --background: #070b11;
  --background-soft: #0d1219;
  --surface: rgba(15, 21, 30, 0.82);
  --surface-strong: #111821;
  --surface-quiet: rgba(255, 255, 255, 0.03);
  --border: rgba(189, 204, 225, 0.14);
  --border-strong: rgba(189, 204, 225, 0.24);
  --text-primary: #eef3fb;
  --text-secondary: #9fabbf;
  --text-tertiary: #728098;
  --brand-primary: #78a8ff;
  --brand-strong: #4d84ff;
  --brand-soft: rgba(120, 168, 255, 0.14);
  --success: #55c597;
  --warning: #f0bf63;
  --destructive: #ef6a6a;

  --radius-1: 14px;
  --radius-2: 24px;
  --shadow-card: 0 22px 54px rgba(0, 0, 0, 0.28);
  --shadow-modal: 0 28px 72px rgba(0, 0, 0, 0.42);
  --focus-ring: 0 0 0 3px rgba(120, 168, 255, 0.24);

  font-size: 16px;
}

* {
  box-sizing: border-box;
}

/* Component classes such as DaisyUI's .btn set `display`, which beats the
   user-agent rule for [hidden] and leaves "hidden" elements visible. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(120, 168, 255, 0.11), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(99, 190, 221, 0.09), transparent 24%),
    linear-gradient(180deg, #091018 0%, #070b11 100%);
  color: var(--text-primary);
  font-family: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.55;
}

body.app-body {
  background:
    radial-gradient(circle at 20% 0%, rgba(120, 168, 255, 0.08), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(99, 190, 221, 0.06), transparent 18%),
    linear-gradient(180deg, #091018 0%, #070b11 100%);
}

.muted {
  color: var(--text-secondary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease, opacity 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

a:hover {
  color: var(--text-primary);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 10px;
}

.btn,
.input,
.textarea,
.select,
.checkbox,
.link,
[role="button"],
button,
input,
textarea,
select,
a {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.btn,
.input,
.select,
.textarea,
.card,
.alert,
.modal-box,
.dropdown-content,
.menu,
.cookie-modal-panel,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: var(--radius-1) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-card {
  box-shadow: var(--shadow-card) !important;
}

.cookie-modal-panel,
.modal-box,
.flash-card {
  box-shadow: var(--shadow-modal) !important;
}

input,
button,
textarea,
select {
  font: inherit;
}

.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select {
  background: rgba(9, 14, 21, 0.88);
  color: var(--text-primary);
  border: 1px solid var(--border);
  min-height: 50px;
  width: 100%;
  padding: 0 16px;
}

.textarea,
textarea {
  min-height: 104px;
  padding: 14px 16px;
  line-height: 1.6;
}

select {
  padding-right: 42px;
}

input[type="file"] {
  width: 100%;
  color: var(--text-secondary);
}

.form-control {
  display: grid;
  gap: 8px;
}

.label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}

.label-text {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.label-text-alt {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.45;
}

.form-control .btn + .btn,
.form-control a.btn + .btn,
.form-control .btn + a.btn {
  margin-top: 0;
}

.input::placeholder,
.textarea::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--text-tertiary);
}

.input:focus,
.select:focus,
.textarea:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--focus-ring);
}

.checkbox,
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-primary);
}

.btn {
  min-height: 48px;
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-strong));
  color: #06111f;
  border-color: rgba(120, 168, 255, 0.36);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #8db6ff, #6395ff);
}

.btn-outline {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.btn-outline:hover,
.btn.btn-outline:hover,
a.btn-outline:hover,
a.btn.btn-outline:hover,
.btn-ghost:hover,
.link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.btn-outline:hover,
.btn.btn-outline:hover,
a.btn-outline:hover,
a.btn.btn-outline:hover {
  color: var(--text-primary);
  border-color: rgba(189, 204, 225, 0.32);
}

.btn-neon {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-strong));
  border: 1px solid rgba(120, 168, 255, 0.34);
  border-radius: var(--radius-1);
  box-shadow: var(--shadow-card);
  color: #06111f;
  padding: 12px 16px;
  text-decoration: none !important;
  display: inline-block;
}

.btn-neon:hover {
  transform: translateY(-1px);
}

.score-cta {
  min-width: 180px;
}

.messages {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.msg {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: var(--radius-1);
}

.err {
  color: var(--destructive);
  font-size: 14px;
}

.badge-award {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(120, 168, 255, 0.09);
  color: var(--text-primary);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.flash-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  z-index: 50;
}

.flash-card {
  background: rgba(12, 18, 26, 0.95);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-1);
  padding: 12px;
  font-size: 14px;
}

.flash-card.flash-success {
  border-color: rgba(85, 197, 151, 0.42);
}

.flash-card.flash-error {
  border-color: rgba(239, 106, 106, 0.4);
}

.flash-card.flash-warning {
  border-color: rgba(240, 191, 99, 0.4);
}

.account-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 14px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.account-line span {
  color: var(--text-secondary);
  font-weight: 600;
}

.account-line a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(120, 168, 255, 0.35);
  text-underline-offset: 2px;
}

.account-line a:hover {
  color: var(--text-primary);
  text-decoration-color: rgba(238, 243, 251, 0.7);
}

.account-line--settings {
  margin-top: 14px;
  margin-bottom: 10px;
}

.invite-panel {
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(120, 168, 255, 0.14), rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, rgba(13, 19, 28, 0.95), rgba(19, 27, 39, 0.92));
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.invite-panel__intro {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.invite-panel__limit {
  margin: 20px 0 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.invite-list {
  display: grid;
  gap: 0;
  margin-top: 18px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(189, 204, 225, 0.1);
}

.invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.invite-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.invite-row__main {
  min-width: 0;
}

.invite-row__eyebrow {
  margin: 0 0 6px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 700;
}

.invite-row__code {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.invite-row__status {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.invite-row__status--accepted {
  color: #b7dfc8;
}

.invite-row__meta {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.invite-copy-btn {
  min-width: 84px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(189, 204, 225, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
}

.invite-copy-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(189, 204, 225, 0.16);
}

.tier-badge {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

.tier-platinum {
  background: #a9c8ff;
  color: #08101b;
}

.tier-gold {
  background: #f0bf63;
  color: #171005;
}

.tier-silver {
  background: #c7d2df;
  color: #091018;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(7, 11, 17, 0.76);
  border-bottom: 1px solid rgba(189, 204, 225, 0.08);
}

.site-main {
  flex: 1;
}

.site-main.app-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 48px;
}

.site-main.public-main,
.site-main.auth-main {
  width: 100%;
  padding: 0 0 48px;
}

.site-footer {
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.page-wrap {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* The single-column shell for every signed-in page: requests, messages,
   profile, settings. These were four near-identical rules at four different
   widths (680, 720, 760, 680), so the same panel changed size as you moved
   between tabs. One class, one width.

   A page whose panels are wrapped in a <form> — new request, profile — needs
   the form to carry the rhythm, since the form is then the grid item and the
   panels are its children. */
.page-col {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 8px 0 72px;
  display: grid;
  gap: 20px;
}

.page-col > form {
  display: grid;
  gap: 20px;
}

.app-panel {
  background: rgba(12, 18, 26, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
}

.workspace-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 320px;
  gap: 24px;
  align-items: start;
}

.workspace-main,
.workspace-side {
  display: grid;
  gap: 20px;
  align-content: start;
}

.workspace-band {
  padding: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 168, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(13, 19, 28, 0.96), rgba(18, 26, 38, 0.92));
}

.workspace-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(189, 204, 225, 0.08);
}

.surface-block {
  padding: 26px;
}

.surface-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.data-stack {
  display: grid;
  gap: 12px;
}

.data-row {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px 0;
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.data-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.data-row:last-child {
  padding-bottom: 0;
}

.data-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}

.data-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.text-action {
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 600;
}

.text-action:hover {
  color: var(--text-primary);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.status-pill--active {
  color: #b9d9ff;
  background: rgba(120, 168, 255, 0.1);
}

.status-pill--complete {
  color: #9ae0bf;
  background: rgba(85, 197, 151, 0.1);
}

.status-pill--archived {
  color: #d2dae8;
}

.segment-bar {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.segment-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.segment-pill.is-active {
  background: rgba(120, 168, 255, 0.14);
  color: var(--text-primary);
}

.inspector-stack {
  display: grid;
  gap: 16px;
}

.inspector-panel {
  padding: 22px;
}

.ledger-list {
  display: grid;
  gap: 12px;
}

.ledger-entry {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.ledger-entry__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.referrer-dashboard {
  display: grid;
  gap: 26px;
}

.referrer-dashboard__section {
  display: grid;
  gap: 14px;
}

.referrer-dashboard__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.info-tile {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.flow-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
}

.flow-panel,
.flow-aside {
  padding: 28px;
}

.referrer-verify-panel {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 34px 40px 40px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  border-radius: var(--radius-2);
  background: rgba(11, 16, 24, 0.82);
  box-shadow: var(--shadow-card);
}

.referrer-verify-panel__intro {
  display: grid;
  gap: 12px;
  margin-bottom: 30px;
}

.referrer-verify-panel__intro p {
  max-width: 58ch;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.referrer-verify-form {
  display: grid;
  gap: 22px;
}

.referrer-verify-form .label {
  margin-bottom: 2px;
}

.referrer-verify-form__actions {
  padding-top: 8px;
}

.choice-grid {
  display: grid;
  gap: 12px;
}

.choice-tile {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.profile-panel {
  display: grid;
  gap: 22px;
}

.skill-checklist {
  display: grid;
  gap: 10px;
}

.skill-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.skill-check__label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-assistant {
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(120, 168, 255, 0.18);
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 168, 255, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.03);
}

.section-kicker {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 700;
}

.display-title {
  font-family: "Manrope", "Geist", sans-serif;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.display-hero {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.92;
}

.display-subhero {
  font-size: clamp(2rem, 4vw, 3.75rem);
  line-height: 0.98;
}

.lede {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 38rem;
}

.public-hero {
  position: relative;
  overflow: hidden;
  min-height: min(860px, calc(100svh - 76px));
  display: grid;
  align-items: center;
}

.public-hero--tight {
  min-height: auto;
}

.public-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(7, 11, 17, 0.82) 0%, rgba(7, 11, 17, 0.42) 48%, rgba(7, 11, 17, 0.8) 100%),
    radial-gradient(circle at 72% 28%, rgba(120, 168, 255, 0.28), transparent 24%),
    radial-gradient(circle at 62% 66%, rgba(99, 190, 221, 0.16), transparent 22%);
  pointer-events: none;
}

.public-hero__grid {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 36px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: center;
}

.public-copy {
  display: grid;
  gap: 12px;
  align-content: center;
}

.public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.public-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid rgba(120, 168, 255, 0.22);
  background: linear-gradient(135deg, rgba(132, 177, 255, 0.95), rgba(86, 127, 235, 0.95));
  color: #08101b;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 18px 42px rgba(23, 58, 142, 0.22);
}

.public-cta:hover {
  color: #08101b;
  transform: translateY(-1px);
}

.public-cta--secondary {
  border-color: rgba(189, 204, 225, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  box-shadow: none;
}

.public-cta--secondary:hover {
  color: var(--text-primary);
}

.public-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-size: 13px;
}

.public-sidecard {
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 168, 255, 0.1), transparent 42%),
    rgba(11, 16, 24, 0.78);
  border: 1px solid rgba(189, 204, 225, 0.1);
  border-radius: 28px;
  padding: 20px;
}

.public-mini-grid {
  display: grid;
  gap: 8px;
}

.public-mini-tile {
  padding: 10px 0;
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.public-mini-tile:first-child {
  border-top: 0;
  padding-top: 0;
}

.public-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.public-feature-card {
  background: rgba(11, 16, 24, 0.72);
  border: 1px solid rgba(189, 204, 225, 0.1);
  border-radius: 28px;
  padding: 22px;
}

.public-step-list {
  display: grid;
  gap: 8px;
}

.public-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: start;
  padding-top: 10px;
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.public-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.public-step__index {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 168, 255, 0.14);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.public-divider-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.public-divider-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(189, 204, 225, 0.08);
}

.public-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.public-compare-card {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(189, 204, 225, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.trust-visual {
  position: relative;
  min-height: 420px;
  border: 1px solid rgba(189, 204, 225, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(120, 168, 255, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(16, 24, 34, 0.9), rgba(9, 14, 21, 0.96));
  overflow: hidden;
}

.trust-visual__node {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--brand-primary);
  box-shadow: 0 0 0 10px rgba(120, 168, 255, 0.08);
}

.trust-visual__line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(120, 168, 255, 0.06), rgba(120, 168, 255, 0.45), rgba(120, 168, 255, 0.08));
  transform-origin: left center;
}

.trust-visual__panel {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: min(260px, calc(100% - 48px));
  background: rgba(11, 16, 24, 0.9);
  border: 1px solid rgba(189, 204, 225, 0.12);
  border-radius: 22px;
  padding: 18px;
}

.trust-visual__metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.trust-visual__metric:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.public-section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0;
}

.public-section--pullup {
  padding-top: 20px;
}

.public-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Same surface as .app-panel, so a panel does not change shade or corner
   between the marketing pages and the app. Only the padding differs, because
   marketing blocks carry less inside them. */
.public-block {
  background: rgba(12, 18, 26, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 20px;
}

.public-span-full {
  grid-column: 1 / -1;
}

.public-strip {
  border-top: 1px solid rgba(189, 204, 225, 0.08);
  border-bottom: 1px solid rgba(189, 204, 225, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.proof-list,
.utility-list {
  display: grid;
  gap: 8px;
}

.proof-row,
.utility-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid rgba(189, 204, 225, 0.08);
}

.proof-row:first-child,
.utility-row:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Narrower and shorter than it was. The aside used a 60px display size and
   carried three stacked blocks, so it towered over the sign-in form and left
   a column of empty panel beside it. */
/* The left column is a stack now, so the sign-in panel must not be dragged to
   its height — that empty box beside the form was the complaint. */
.auth-side {
  display: grid;
  gap: 20px;
  align-content: start;
}

.auth-facts {
  padding: 20px 24px 22px;
  background: rgba(12, 18, 26, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
}

.auth-facts .list-label {
  margin: 0 0 12px;
}

.auth-shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 20px;
  align-items: start;
}

.auth-panel,
.auth-aside {
  background: rgba(12, 18, 26, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-card);
}

.auth-aside__intro {
  display: grid;
  gap: 14px;
}

/* The list is body copy, not a quieter tier — one size across the aside. */
.auth-aside .proof-row p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.auth-aside .proof-row {
  padding-top: 12px;
}

.auth-panel {
  padding: 28px;
}

/* Sized against the form beside it rather than as a landing-page hero: the
   shared display-subhero runs to 60px, which made this the loudest thing on a
   page whose job is to get someone signed in. */
.auth-headline {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.12;
}

/* Sits a step below the aside headline, so the pitch leads and the form
   follows rather than the two competing. */
.auth-panel-headline {
  font-size: 26px;
  line-height: 1.15;
}

.auth-lede {
  font-size: 15px;
  line-height: 1.6;
  max-width: 34rem;
}

.auth-aside {
  padding: 28px;
  display: grid;
  gap: 24px;
  align-content: start;
  background:
    radial-gradient(circle at 0% 0%, rgba(120, 168, 255, 0.16), transparent 35%),
    linear-gradient(180deg, rgba(16, 24, 34, 0.96), rgba(10, 15, 23, 0.96));
}

.auth-mode-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(189, 204, 225, 0.1);
  border-radius: 999px;
}

.auth-mode-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--text-secondary);
}

.auth-mode-toggle button.is-active {
  background: rgba(120, 168, 255, 0.16);
  color: var(--text-primary);
}

.auth-form-grid {
  display: grid;
  gap: 18px;
}

.auth-error-summary {
  margin-bottom: 28px;
  padding: 14px 16px;
  border-radius: var(--radius-1);
  border: 1px solid rgba(239, 106, 106, 0.34);
  background:
    linear-gradient(180deg, rgba(239, 106, 106, 0.14), rgba(239, 106, 106, 0.08)),
    rgba(11, 16, 24, 0.9);
  color: var(--text-primary);
}

.auth-error-summary__title {
  color: #ffd6d6;
  font-weight: 700;
}

.auth-error-summary__message {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.micro-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.micro-stat {
  padding: 14px;
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
}

/* The tiles sit inside a titled box, so their own labels step down rather than
   competing with it — the page had four heading sizes when they were kickers. */
.micro-stat__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.micro-stat__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}

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

.onboarding-shell {
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 56px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
}

.onboarding-nav,
.onboarding-panel {
  background: rgba(11, 16, 24, 0.82);
  border: 1px solid rgba(189, 204, 225, 0.1);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}

.onboarding-nav {
  padding: 26px;
  align-self: start;
  position: sticky;
  top: 96px;
}

.onboarding-panel {
  padding: 32px;
}

.step-list {
  display: grid;
  gap: 16px;
}

.step-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
}

.step-item__index {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 168, 255, 0.14);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.field-cluster {
  display: grid;
  gap: 20px;
}

.split-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.triple-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

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

.chip-soft {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(189, 204, 225, 0.1);
  color: var(--text-secondary);
  font-size: 13px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.brand-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  font-family: "Manrope", "Geist", sans-serif;
  letter-spacing: -0.04em;
  font-size: 1.25rem;
  font-weight: 800;
}

.brand-tag {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.is-current {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.nav-sheet {
  display: none;
}

.footer-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.footer-link-button:hover { color: var(--brand-primary); }

@media (max-width: 1024px) {
  .public-hero__grid,
  .auth-shell,
  .onboarding-shell,
  .workspace-shell,
  .flow-shell,
  .profile-shell {
    grid-template-columns: 1fr;
  }

  .onboarding-nav,
  .profile-nav {
    position: static;
  }
}

@media (min-width: 768px) {
  .public-span-half {
    grid-column: span 6;
  }
}

@media (min-width: 1024px) {
  .public-span-narrow {
    grid-column: span 4;
  }

  .public-span-wide {
    grid-column: span 8;
  }
}

@media (max-width: 768px) {
  .site-main.app-main {
    width: min(100%, calc(100% - 24px));
    padding-top: 20px;
  }

  .public-section {
    width: min(100%, calc(100% - 24px));
    padding: 28px 0;
  }

  .page-col {
    width: min(100%, calc(100% - 24px));
    gap: 16px;
  }

  .public-hero {
    min-height: auto;
  }

  .public-hero__grid,
  .auth-shell,
  .onboarding-shell {
    width: min(100%, calc(100% - 24px));
    gap: 18px;
  }

  .public-hero__grid {
    padding: 12px 0 20px;
  }

  .public-section--pullup {
    padding-top: 16px;
  }

  .auth-panel,
  .auth-aside,
  .auth-facts,
  .onboarding-panel,
  .onboarding-nav,
  .public-block {
    padding: 22px;
  }

  /* Form first on a phone: someone who already has an account came here to
     sign in, not to read the pitch. The order sits on .auth-side because that
     is the grid item — putting it on .auth-aside, which is now nested inside,
     silently stopped applying. */
  .auth-panel {
    order: 1;
  }

  .auth-side {
    order: 2;
    gap: 14px;
  }

  .auth-aside {
    display: grid;
    gap: 14px;
    padding: 18px;
  }

  .auth-facts {
    padding: 18px;
  }

  .auth-aside__intro {
    gap: 12px;
  }

  .micro-stat-grid {
    order: 2;
    gap: 10px;
  }

  .micro-stat {
    padding: 14px;
  }

  .public-feature-card,
  .public-sidecard,
  .public-compare-card {
    padding: 16px;
  }

  .micro-stat-grid,
  .split-fields,
  .triple-fields,
  .metric-grid,
  .info-grid,
  .public-feature-grid,
  .public-compare {
    grid-template-columns: 1fr;
  }

  .public-actions {
    flex-direction: column;
  }

  .public-cta {
    width: 100%;
  }

  .public-step {
    grid-template-columns: 28px 1fr;
  }

  .public-step .chip-soft {
    grid-column: 2;
    justify-self: start;
  }

  .site-nav {
    width: min(100%, calc(100% - 24px));
    padding: 12px 0;
  }

  .brand-lockup { min-width: 0; gap: 10px; }
  .brand-meta { min-width: 0; }
  .brand-tag { overflow: hidden; max-width: 24ch; text-overflow: ellipsis; white-space: nowrap; }
  .nav-cluster { flex: 0 0 auto; }

  .nav-links {
    display: none;
  }

  .nav-sheet.is-open {
    position: fixed;
    z-index: 80;
    top: 72px;
    right: 12px;
    left: 12px;
    display: grid;
    gap: 8px;
    width: auto;
    max-height: calc(100dvh - 84px);
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface-strong);
    box-shadow: var(--shadow-modal);
  }

  .nav-sheet--auth.nav-sheet--from-dock.is-open {
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
    border-radius: 18px;
  }

  .footer-shell {
    width: min(100%, calc(100% - 24px));
    padding: 18px 0 26px;
    flex-direction: column;
    align-items: flex-start;
  }

  .workspace-band,
  .surface-block,
  .inspector-panel,
  .flow-panel,
  .flow-aside,
  .profile-nav,
  .profile-panel {
    padding: 22px;
  }

  .workspace-header,
  .surface-header,
  .ledger-entry__top {
    flex-direction: column;
    align-items: start;
  }

  .invite-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .invite-copy-btn {
    min-width: 0;
    width: fit-content;
  }

  .data-row {
    grid-template-columns: 1fr;
  }

  .data-row__actions {
    justify-content: flex-start;
  }

  .flash-container {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }

  .btn-neon {
    width: 100%;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------------
   Recommendation form (referrer-facing)
   The rating control deliberately separates the two positive options from
   "Can't say", so an abstention is never read as a low score.
   --------------------------------------------------------------------------- */

.rating-list {
  display: grid;
  gap: 10px;
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rating-row:focus-within {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
}

.rating-row__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.rating-row__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-scale {
  display: inline-flex;
  gap: 6px;
}

.rating-option,
.rating-abstain {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.rating-option input,
.rating-abstain input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.rating-option span,
.rating-abstain span {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.rating-option span:hover,
.rating-abstain span:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Selected positive states read as trust, not as a generic control. */
.rating-option input:checked + span {
  color: #06231a;
  border-color: transparent;
  background: var(--success);
}

/* Abstain is set apart: quieter, never green, divided from the scale. */
.rating-abstain {
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.rating-abstain span {
  border-style: dashed;
}

.rating-abstain input:checked + span {
  color: var(--text-primary);
  border-style: solid;
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.06);
}

.rating-option input:focus-visible + span,
.rating-abstain input:focus-visible + span {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 640px) {
  .rating-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .rating-row__controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rating-row,
  .rating-option span,
  .rating-abstain span {
    transition: none;
  }
}

/* Single-column variant of the flow layout, for terminal/confirmation screens. */
.flow-shell--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
}

/* ---------------------------------------------------------------------------
   Trust graph
   The score's provenance, shown as three slots. Replaces a locked number with
   the actual shape of what is missing. Filled slots read as trust (success),
   waiting slots as in-flight, empty slots as an invitation.
   --------------------------------------------------------------------------- */

.metric-figure {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.metric-figure--pending {
  color: var(--text-secondary);
}

.metric-figure__of {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-tertiary);
}

.trust-graph {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: trust-slot;
}

.trust-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
}

/* Connecting line: the slots read as one graph rather than three cards. */
.trust-slot::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 100%;
  width: 1px;
  height: 8px;
  background: var(--border);
}

.trust-slot:last-child::after {
  display: none;
}

.trust-slot__marker {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
}

.trust-slot--filled .trust-slot__marker {
  border-color: var(--success);
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(85, 197, 151, 0.14);
}

.trust-slot--waiting .trust-slot__marker {
  border-color: var(--warning);
  border-style: dashed;
}

.trust-slot--empty .trust-slot__marker {
  border-style: dashed;
}

.trust-slot__body {
  flex: 1 1 auto;
  min-width: 0;
}

.trust-slot__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.trust-slot--empty .trust-slot__name {
  font-weight: 500;
  color: var(--text-secondary);
}

.trust-slot__detail {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trust-slot__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.trust-slot__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(85, 197, 151, 0.12);
  border: 1px solid rgba(85, 197, 151, 0.3);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}

.trust-slot__pending {
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .trust-slot {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* Wrap to its own line only when it has to; a lone badge stays inline. */
  .trust-slot__meta {
    padding-left: 30px;
  }

  .trust-slot__detail {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   About page
   Mobile-first. The page shows the product's artifacts — a recommendation and
   a trust graph — rather than describing them, so it reuses .trust-slot from
   the dashboard verbatim. Someone who joins meets the same component again.
   --------------------------------------------------------------------------- */

/* Same column as the signed-in app — this was a second rule at the identical
   720px, which is how the two halves drift apart. The public pages keep their
   own type scale and rhythm; only the measure is shared, so signing in does
   not move the page under you. */
.page-col--public {
  padding-top: 40px;
}

.about-hero {
  padding-bottom: 8px;
}

.about-title {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: clamp(32px, 8.5vw, 52px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin: 14px 0 0;
  text-wrap: balance;
}

.about-title--small {
  font-size: clamp(24px, 6vw, 34px);
}

.about-lede {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 58ch;
}

/* The signature: an actual recommendation, not a diagram of one. The quote is
   the largest body text on the page, because it is the product. */
.vouch-card {
  margin: 32px 0 0;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  background:
    linear-gradient(180deg, rgba(85, 197, 151, 0.05), transparent 60%),
    var(--surface-strong);
  box-shadow: var(--shadow-card);
}

.vouch-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vouch-card__who {
  flex: 1 1 auto;
  min-width: 0;
}

.vouch-card__marker {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(85, 197, 151, 0.14);
}

.vouch-card__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.vouch-card__rel {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.vouch-card__badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(85, 197, 151, 0.12);
  border: 1px solid rgba(85, 197, 151, 0.3);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}

.vouch-card__quote {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.vouch-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.vouch-card__tag {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-quiet);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.about-actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.about-section {
  margin-top: 56px;
}

.about-h2 {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.about-sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.about-graph {
  margin-top: 20px;
}

.about-body {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.about-split {
  display: grid;
  gap: 32px;
}

.about-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow: hidden;
}

.about-facts li {
  padding: 16px 18px;
  background: var(--background);
}

.about-fact__label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.about-fact__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.about-close {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

@media (min-width: 720px) {
  .about {
    padding-top: 64px;
  }

  .about-actions {
    grid-auto-flow: column;
    justify-content: start;
  }

  .about-split {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .about-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* .public-cta and its secondary variant each set box-shadow, which overrode the
   global :focus-visible ring at equal specificity and left keyboard users with
   no visible focus. Restore the ring for both. */
.public-cta:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------------------
   Get started page
   The step list doubles as a time budget: each step carries what it actually
   costs, because "this is small" is the product's whole argument. Numbering is
   used here because the steps are a genuine ordered process, unlike on /about.
   --------------------------------------------------------------------------- */

.gs-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.gs-step {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
}

.gs-step:last-child {
  border-bottom: 1px solid var(--border);
}

.gs-step__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.gs-step__body {
  flex: 1 1 auto;
  min-width: 0;
}

.gs-step__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gs-step__title {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* The time cost is the point of this list, so it is set as data, not as a note. */
/* How long a step takes is not a verification. --success is reserved for
   verified-by-a-real-person; using it here spends the one colour that means
   something on a timing label. */
.gs-step__cost {
  flex: 0 0 auto;
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.gs-step__text {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.callout {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
}

.callout .about-body {
  margin-top: 6px;
}

.qa {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}

.qa__item {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.qa__item:last-child {
  border-bottom: 1px solid var(--border);
}

.qa dt {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.qa dd {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 480px) {
  .gs-step__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* Transient confirm step for single-use links. Sized small on purpose: with
   JavaScript on it is visible for a fraction of a second. */
.confirm-shell {
  width: min(560px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0;
}

.confirm-panel {
  padding: 28px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Dashboard
   The score and the trust graph are one object: a number is only meaningful
   next to what produced it. That fusion replaced a metric-tile row and a
   separate activity ledger that told the same story twice.
   --------------------------------------------------------------------------- */

.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 4px;
}

.dash-name {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

.dash-role {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 15px;
}

.dash-h2 {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-top: 6px;
}

.dash-empty {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* Something waiting on you outranks your own score, so it is marked. */
.dash-inbox {
  border-color: rgba(240, 191, 99, 0.34);
  background:
    linear-gradient(180deg, rgba(240, 191, 99, 0.07), transparent 55%),
    var(--surface);
}

.score-panel {
  padding: 26px;
}

/* The figure and its explanation form the header; a rule separates them from
   the slots below so the unit label cannot read as a heading for the list. */
.score-head {
  display: flex;
  align-items: baseline;
  gap: 26px;
  margin-top: 14px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.score-figure {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  line-height: 1;
}

.score-figure__value {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.score-figure__of {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-tertiary);
}

.score-figure__unit {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.score-copy {
  flex: 1 1 260px;
  min-width: 0;
}

.score-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.rail-panel {
  padding: 22px;
}

.rail-figure {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-top: 6px;
}

.rail-figure__of {
  font-size: 18px;
  color: var(--text-tertiary);
}

.rail-note {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.invite-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
}

.invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.invite-row__state {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
}

/* --- Navigation ----------------------------------------------------------- */

.nav-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-menu {
  position: relative;
}

.account-menu > summary {
  list-style: none;
  cursor: pointer;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-quiet);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.account-menu[open] .account-trigger,
.account-trigger:hover {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
}

.account-initials {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
}

.account-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 214px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  background: var(--surface-strong);
  box-shadow: var(--shadow-modal);
  display: grid;
  gap: 2px;
}

.account-sheet__email {
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-sheet__link {
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.account-sheet__link:hover,
.account-sheet__link.is-current {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.account-sheet__link--quiet {
  color: var(--text-tertiary);
}

.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-quiet);
  color: var(--text-primary);
}

.nav-sheet__divider {
  display: block;
  height: 1px;
  margin: 6px 0;
  background: var(--border);
}

.nav-link--quiet {
  color: var(--text-tertiary);
}

@media (max-width: 900px) {
  .workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-burger {
    display: inline-flex;
  }

  /* On mobile the sheet carries everything, so the inline nav and account
     trigger would only duplicate it. */
  .nav-cluster .nav-links,
  .nav-cluster .account-menu {
    display: none;
  }

  .dash-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dash-head .btn {
    width: 100%;
  }

  .score-head {
    gap: 16px;
  }

  .score-figure__value {
    font-size: 46px;
  }
}

.dash-quote {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   Settings
   Three things a member actually controls, each its own panel. The old page
   spent one panel on a title and one on a sign-out link that now lives in the
   account menu.
   --------------------------------------------------------------------------- */

.settings-panel {
  padding: 24px;
}

.settings-note,
.settings-help {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.settings-help {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Shown when a referrer types a free-mail address. It is a nudge, so it reads
   as a note and not as a validation error — no --warning, no icon, no red.
   The left rule is there to separate it from the static help text above it,
   which would otherwise read as one four-line paragraph. */
.settings-note--nudge {
  padding-left: 10px;
  border-left: 2px solid var(--border-strong, var(--border));
  color: var(--text-tertiary);
}

.settings-form {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.settings-form .form-control {
  width: 100%;
}

.role-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow: hidden;
}

.role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  background: var(--background);
}

.role-row__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.settings-more {
  margin-top: 18px;
}

.settings-more > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--brand-primary);
  list-style: none;
}

.settings-more > summary::-webkit-details-marker {
  display: none;
}

.settings-more > summary:hover {
  color: var(--text-primary);
}

.settings-inline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.settings-inline .input {
  flex: 1 1 200px;
  width: auto;
  min-height: 44px;
}

@media (max-width: 560px) {
  .settings-inline .input,
  .settings-inline .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* Click-triggered hint bubble. Hover is not available on touch and these rules
   are needed while typing, so the trigger is a real button. */
.hint {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  vertical-align: middle;
  margin-left: 6px;
}

.hint__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.hint__trigger:hover,
.hint__trigger[aria-expanded="true"] {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* Anchored to the hint so it works wherever a hint is placed. It is a tiny
   inline element, so script nudges the bubble back inside the viewport when
   left-alignment would overflow. */
.hint__bubble {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  background: var(--surface-strong);
  box-shadow: var(--shadow-modal);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.hint__bubble[hidden] {
  display: none;
}

.hint__bubble ul {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
}

.hint__bubble li,
.hint__bubble p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Settings switch. Label left, control right — the standard reading order for
   a preference. The native checkbox stays in the DOM for keyboard and
   assistive tech; the track and thumb are the visible control. */
/* No border or fill: this sits inside a panel that already has both, and a
   box within a box reads as a nested container. */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
}

/* The switch carries the hover affordance, since the row has no frame. */
.switch-row:hover .switch__track {
  border-color: var(--border-strong);
}

.switch-row:hover .switch input:checked + .switch__track {
  border-color: transparent;
}

.switch-row__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.switch-row__label {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.switch-row__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.switch {
  position: relative;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  display: block;
  width: 46px;
  height: 27px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.switch__thumb {
  display: block;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--text-tertiary);
  transition: transform 0.18s ease, background 0.18s ease;
}

/* On means reachable by a recruiter, which is a verified-trust state. */
/* --brand-primary, not --success: an on switch is a preference, and --success
   is reserved for verified-by-a-real-person. */
.switch input:checked + .switch__track {
  border-color: transparent;
  background: var(--brand-primary);
}

.switch input:checked + .switch__track .switch__thumb {
  background: #06111f;
  transform: translateX(19px);
}

.switch input:focus-visible + .switch__track {
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .switch__track,
  .switch__thumb {
    transition: none;
  }
}

@media (max-width: 480px) {
  .switch-row {
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Messages
   Inbox above, thread below. The volume here is a handful of conversations,
   so a two-pane app shell is the wrong shape — and it collapsed badly on
   mobile. Messages previously reused .ledger-entry, the trust-ledger row,
   which is why a conversation read like a database table.
   --------------------------------------------------------------------------- */

.convo-panel,
.thread-panel {
  padding: 22px;
}

/* Capped at roughly four rows. Below that nothing scrolls, which is the
   expected case; above it the list stops pushing the thread off the first
   screen. Without this, seven conversations put the thread a full screen
   down on a phone. */
.convo-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow-y: auto;
  max-height: 268px;
  overscroll-behavior: contain;
}

.convo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who meta" "preview meta";
  gap: 2px 14px;
  padding: 13px 16px;
  background: var(--background);
  transition: background 0.16s ease;
}

.convo-row:hover {
  background: var(--surface-quiet);
}

.convo-row.is-current {
  background: var(--brand-soft);
}

.convo-row__who {
  grid-area: who;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.convo-row__preview {
  grid-area: preview;
  font-size: 13px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convo-row__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 10px;
}

.convo-row__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #06111f;
  font-size: 12px;
  font-weight: 700;
}

.convo-row__time {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.thread-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Capped so the reply box stays reachable however long the thread runs. */
.thread {
  max-height: 460px;
  overflow-y: auto;
  padding: 18px 2px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.thread-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  color: var(--text-tertiary);
  font-size: 12px;
}

.thread-day::before,
.thread-day::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

.thread-msg {
  display: grid;
  gap: 4px;
  max-width: 78%;
}

.thread-msg--mine {
  justify-self: end;
  justify-items: end;
}

.thread-msg--theirs {
  justify-self: start;
}

.thread-msg__who {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 0 4px;
}

.thread-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-quiet);
}

/* Own messages take the brand colour: they are the thing you did. */
.thread-msg--mine .thread-bubble {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-strong));
}

.thread-bubble__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.thread-msg--mine .thread-bubble__body {
  color: #06111f;
}

.thread-bubble__time {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.thread-msg--mine .thread-bubble__time {
  color: rgba(6, 17, 31, 0.6);
}

.thread-empty,
.thread-closed {
  font-size: 14px;
  color: var(--text-secondary);
}

.thread-closed {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
}

.reply {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.reply textarea {
  min-height: 84px;
}

.reply__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.reply__hint {
  font-size: 12px;
  color: var(--text-tertiary);
}

@media (max-width: 560px) {
  .thread-msg {
    max-width: 88%;
  }

  .reply__hint {
    display: none;
  }

  .reply__actions .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Profile
   One column, matching settings and messages. The old page put a numbered
   step sidebar next to the form — the same false-sequence device removed from
   onboarding, and it forced a two-column layout the rest of the app no longer
   uses.
   --------------------------------------------------------------------------- */

.field-stack {
  display: grid;
  gap: 18px;
}

.field-note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-tertiary);
}

.avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.pf-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
}

.pf-avatar--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-quiet);
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-secondary);
}

.avatar-row__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.date-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-pair .input {
  width: 74px;
  text-align: center;
}

.skill-group {
  min-width: 0;
}

.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
}

.file-row__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-primary);
  overflow-wrap: anywhere;
}

.file-row__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Five panels is a long scroll to reach a save button, so it follows you. */
.profile-save {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  padding: 14px 0 18px;
  background: linear-gradient(180deg, transparent, var(--background) 42%);
}

@media (max-width: 640px) {
  .split-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-save .btn {
    width: 100%;
  }
}

/* A hint next to a heading should not inherit the heading's weight or size. */
.dash-h2 .hint__trigger {
  position: relative;
  top: -2px;
}

.hint__text {
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-secondary);
}

/* Form panels flow with explicit margins. .app-panel is a grid with a row gap,
   which compounded with each child's own margin and left headings floating far
   from the fields they label. Both classes are on the same element, so this
   needs the extra specificity to win. */
.app-panel.profile-panel,
.app-panel.settings-panel {
  display: block;
  padding: 24px;
}

/* The kicker labels the heading directly beneath it: one unit, not two rows. */
.app-panel.profile-panel .section-kicker,
.app-panel.settings-panel .section-kicker {
  margin-bottom: 2px;
}

.app-panel.profile-panel .dash-h2,
.app-panel.settings-panel .dash-h2 {
  margin-top: 0;
}

.app-panel.profile-panel .avatar-row {
  margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   Requests — list, detail, new, share
   ---------------------------------------------------------------------------
   One column, same width as settings and profile. The list used to be three
   stacked lists (Active, Completed, Archived) which is what made a long queue
   unreadable and was logged as "not filterable"; it is now one list with
   chips. The right rail on every one of these pages was guidance, so it moved
   into hints next to the heading it explains.
   --------------------------------------------------------------------------- */

/* Both classes sit on the same element, so this needs to out-specify the
   .app-panel grid the same way the settings and profile panels do. */
.app-panel.reqs-panel {
  display: block;
  padding: 24px;
}

.app-panel.reqs-panel .section-kicker {
  margin-bottom: 2px;
}

.app-panel.reqs-panel .dash-h2 {
  margin-top: 0;
}

.req-back {
  margin-bottom: 10px;
  font-size: 14px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.filter-chip.is-current {
  background: var(--brand-soft);
  border-color: var(--brand-primary);
  color: var(--text-primary);
}

.filter-chip__n {
  color: var(--text-tertiary);
  font-weight: 500;
}

.filter-chip.is-current .filter-chip__n {
  color: var(--text-secondary);
}

.req-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow: hidden;
}

.req-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  background: var(--background);
}

.req-row__body {
  min-width: 0;
}

.req-row__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.req-row__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

a.req-row__name:hover {
  color: var(--brand-primary);
}

.req-row__note {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.req-row__meta {
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.req-row__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  font-size: 14px;
}

.result-shortlist-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-shortlist-form select {
  width: clamp(150px, 18vw, 220px);
}

.req-empty {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 15px;
}

.req-field {
  margin-top: 16px;
}

.req-count {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.req-linkrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.req-linkrow .input {
  flex: 1 1 240px;
  width: auto;
  min-height: 44px;
  font-size: 13px;
}

.req-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.req-stat {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.req-submit {
  display: flex;
  justify-content: flex-start;
}

/* Scoped to this page: .choice-grid is also the referrer's rating form and the
   onboarding picker, which both want one full-width tile per row. Here the
   labels are two or three words and seven of them stacked ran the page well
   past a screen. */
.app-panel.reqs-panel .choice-grid {
  margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.app-panel.reqs-panel .choice-tile {
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-1);
  font-size: 14px;
}

.app-panel.reqs-panel .choice-tile input {
  margin-top: 0;
}

.share-preview {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  white-space: pre-line;
}

.share-preview__link {
  margin-top: 12px;
  white-space: normal;
}

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.skill-preview {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-preview li {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .req-row {
    flex-direction: column;
    gap: 10px;
  }

  .req-row__actions {
    gap: 18px;
  }

  .req-linkrow .input,
  .req-linkrow .btn,
  .req-actions .btn,
  .share-actions .btn,
  .req-submit .btn {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------------
   Home
   ---------------------------------------------------------------------------
   Same single column as the rest of the signed-in app. The invite panel used
   to sit in a right rail level with the score, which gave housekeeping equal
   billing with the thing you came here for; it is now last.
   --------------------------------------------------------------------------- */

.app-panel.reqs-panel .score-head {
  margin-top: 18px;
}

.app-panel.reqs-panel .trust-graph {
  margin-top: 22px;
}

.home-more {
  margin-top: 14px;
  font-size: 14px;
}

.home-invite-form {
  margin-top: 16px;
}

@media (max-width: 560px) {
  .home-invite-form .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Icons
   ---------------------------------------------------------------------------
   Inline sprite (_partials/icon_sprite.html), sized in em so an icon always
   matches the text it sits beside, and stroked in currentColor so it takes
   that text's colour — including the hover and focus states, with no extra
   rules per context.
   --------------------------------------------------------------------------- */

.icon-sprite {
  display: none;
}

.icon {
  /* Tailwind's preflight sets `svg { display: block }`, which pushes an icon
     onto its own line anywhere it sits inline with text. */
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Optically centred against lowercase text rather than sat on the baseline. */
  vertical-align: -0.135em;
}

.icon--lg {
  width: 20px;
  height: 20px;
}

/* Buttons and links that pair an icon with a label. */
.btn-icon,
.text-action--icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* The external-link mark trails its label and is a quiet aside to it, not a
   second thing to read. */
.share-actions .icon {
  opacity: 0.55;
}

.trust-slot__badge .icon {
  margin-right: 5px;
  stroke-width: 2.5;
}

.req-back .icon {
  margin-right: 2px;
}

/* ---------------------------------------------------------------------------
   Recommending someone directly
   ---------------------------------------------------------------------------
   Skill and rating are one row, not two steps. They were separate before, and
   the rating half only rendered after a validation error — so a first-time
   submit saved every rating empty and the recommendation carried no signal.
   --------------------------------------------------------------------------- */

.field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-quiet);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}

.radio-chip:hover {
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}

.radio-chip:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
  color: var(--text-primary);
}

.skill-add {
  margin-top: 14px;
}

.skill-add .input {
  width: 100%;
  min-height: 44px;
}

.rate-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.rate-list:empty {
  margin-top: 0;
}

/* Sits with the rating controls rather than the label, so removing a skill is
   next to where you were already looking. */
.rate-remove {
  border: 0;
  background: none;
  padding: 0 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
}

.rate-remove:hover {
  color: var(--text-primary);
}

.home-cta {
  margin-top: 16px;
}

@media (max-width: 560px) {
  .home-cta .btn,
  .radio-chip {
    width: 100%;
  }

  .radio-chip {
    justify-content: center;
  }
}

/* Labels a list that sits under a heading doing a different job — on home the
   panel heading invites you to write a recommendation, and the list below it
   is what you have already written. */
.list-label {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Grid items default to min-width:auto, so a single child that refuses to
   shrink — a long select, a row of controls that will not wrap — pushes the
   whole page wider than the phone and the body scrolls sideways. The column
   is the right place to stop that for every page using it. */
.page-col > *,
.page-col > form > * {
  min-width: 0;
}

/* Recommend / Outstanding / Can't say plus the remove control do not fit on
   one line inside a panel on a narrow screen. Wrapping keeps them inside it
   instead of widening everything above. */
.rating-row__controls {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* First run. Primary action and the way past it on one line, so skipping is
   available without being a competing button. */
.onboard-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 560px) {
  .onboard-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .onboard-actions .btn {
    width: 100%;
  }
}

/* Group labels inside the referrer's form sit above a list of rating rows. */
.app-panel.reqs-panel .list-label + .rating-list {
  margin-top: 10px;
}

/* Recruiter search filters: three inputs and the action on one row where
   there is space, stacked on a phone. */
.recruit-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

.recruit-filters .input {
  width: 100%;
  min-height: 44px;
}

.recruit-filters__go {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 560px) {
  .recruit-filters {
    grid-template-columns: 1fr;
  }

  .recruit-filters__go .btn {
    width: 100%;
  }
}

/* Destructive actions are available but not adjacent to routine ones. */
.danger-more > summary {
  color: var(--text-tertiary);
}

.danger-more > summary:hover {
  color: var(--danger, #e5806f);
}

.danger-action {
  border-color: rgba(229, 128, 111, 0.4);
  color: #e5806f;
}

.danger-action:hover {
  border-color: #e5806f;
  background: rgba(229, 128, 111, 0.1);
}

/* Recruiter surfaces sit alongside each other rather than under a tab each. */
.recruit-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .recruit-nav {
    width: 100%;
  }

  .recruit-nav .btn {
    flex: 1 1 auto;
  }
}

/* What would raise your trust — a list of actions, not a gauge. */
.trust-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow: hidden;
}

.trust-steps li {
  padding: 12px 14px;
  background: var(--background);
  font-size: 14px;
  color: var(--text-secondary);
}

/* A card that is a link. The first-run finish screen had a paragraph with two
   buttons under it, which read as a panel you might also be able to ignore. */
.next-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2);
  background:
    linear-gradient(180deg, rgba(120, 168, 255, 0.10), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.next-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.next-card__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.next-card__title {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.next-card__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.next-card__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-primary);
  font-size: 18px;
}

/* Both cards are the same size on purpose — see onboarding.html. What marks
   the first as the expected step is the tinted fill and the arrow, not extra
   height, so the second stays a real option rather than a dismissal. */
.next-card-set {
  display: grid;
  gap: 14px;
  /* Equal rows, so the two cards match even though one note runs a line
     longer. Without this the skip card renders ~40px shorter and reads as the
     lesser of the two before anyone has read either. */
  grid-auto-rows: 1fr;
}

/* Second card: same box, no brand tint, no arrow. It carries a heading and a
   sentence like the first, because "Skip for now" alone leaves the person
   guessing what skipping costs them. */
.next-card--quiet {
  background: var(--surface);
  border-color: var(--border);
}

.next-card--quiet:hover {
  border-color: var(--border-strong);
}

.next-card--quiet .next-card__title {
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .next-card {
    padding: 18px;
  }
}

/* ─── Progress marks ──────────────────────────────────────────────────────
   Three marks, three meanings, used everywhere progress is shown:

     ●  filled dot    a step you finished          --brand-primary
     ◌  dashed ring   waiting on someone else      --warning
     ✓  check         a real person confirmed it   --success

   The check is never spent on self-service. `--success` means
   verified-by-a-real-person, and a tick on "you typed your company name"
   would spend the product's most valuable mark on a form field — the same
   mark that has to carry "someone vouched for you" three rows further down.

   The dashed ring matters more here than in most products. Waiting on
   someone else is refr.you's most common state and the one an app of this
   shape usually has no mark for, which is most of why the page reads as
   static: the work is real, it is just not yours to finish.
─────────────────────────────────────────────────────────────────────────── */

/* The evidence ledger: the four checkable facts trust is counted from,
   drawn as discrete marks. See _component() in trust.py for why these are
   pips and not a bar. */
.evidence {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.evidence-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.evidence-row__label {
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.evidence-pips {
  display: inline-flex;
  gap: 5px;
}

.evidence-pip {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
}

.evidence-pip--on {
  border-color: var(--success);
  background: var(--success);
}

/* Manrope and tabular figures so the counts sit in a column and a change of
   number does not shift the row. */
.evidence-row__count {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.evidence + .score-note {
  margin-top: 16px;
}

/* The move that closes this row, under the fact it closes. Only on rows that
   are short, so the list of things to do shrinks as the profile fills — the
   checklist this replaced was four lines long whatever state you were in. */
.evidence-row__action {
  grid-column: 1 / -1;
  margin-top: 1px;
  padding-left: 13px;
  border-left: 2px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.evidence-row--enough .evidence-row__count {
  color: var(--success);
}

.evidence-row__complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
  font-size: 18px;
}

/* Cookie choices live in the shared shell so they remain available on every
   public and signed-in route. */
.cookie-banner {
  position: fixed;
  z-index: 90;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-modal);
}

.cookie-banner[hidden], .cookie-modal[hidden] { display: none; }
.cookie-banner h2 { margin: 0 0 6px; font-size: 18px; }
.cookie-banner p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.cookie-banner__copy { min-width: 0; }
.cookie-actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: nowrap; gap: 10px; }
.cookie-actions > * { flex: 0 0 auto; white-space: nowrap; }

.cookie-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 8, 16, 0.82);
}

.cookie-modal-panel {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface-strong);
}

.cookie-modal-panel > p:not(.section-kicker) { color: var(--text-secondary); }
.cookie-choice { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.cookie-choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand-primary); }
.cookie-choice span { display: grid; gap: 3px; }
.cookie-choice small { color: var(--text-secondary); line-height: 1.45; }
.cookie-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

@media (max-width: 600px) {
  .cookie-banner { right: 12px; left: 12px; align-items: stretch; flex-direction: column; bottom: 12px; width: auto; padding: 16px; }
  .cookie-actions { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .cookie-actions > * { min-height: 44px; }
  .cookie-modal { padding: 12px; }
  .cookie-modal-panel { max-height: calc(100vh - 24px); padding: 20px; }
}

@media (max-width: 480px) {
  .evidence-row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .evidence-row__label {
    grid-column: 1 / -1;
  }
}

/* Which shortlist the Add buttons below are filling. Asked once above the
   list rather than on every row, so the row keeps one action. */
.shortlist-target {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}

.shortlist-target__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* A long shortlist name must not widen the page — a grid item defaults to
   min-width: auto and a select will not shrink below its content. */
.shortlist-target select {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 380px;
}

/* The trust band: one word plus three segments, filled to the level reached.
   Colour is the progress indication — a reader takes the level from the ramp
   before reading the word, and the word says which one it is. Three segments
   because there are exactly three bands, so the meter is the scale rather
   than an approximation of it. */
.trust-band {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.trust-band__meter {
  display: inline-flex;
  gap: 3px;
}

.trust-band__seg {
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: var(--border-strong);
}

.trust-band__label {
  font-family: "Manrope", "Geist", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Building fills one segment and leaves it neutral: at zero recommendations
   there is nothing to claim, and a coloured bar would be claiming it. */
.trust-band--building .trust-band__label {
  color: var(--text-secondary);
}

.trust-band--growing .trust-band__seg:nth-child(-n + 2) {
  background: var(--warning);
}

.trust-band--growing .trust-band__label {
  color: var(--warning);
}

.trust-band--strong .trust-band__seg {
  background: var(--success);
}

.trust-band--strong .trust-band__label {
  color: var(--success);
}

/* Inline in a list of candidates, where the row already carries a name and
   an evidence line and the band has to sit inside that rhythm. */
.trust-band--sm {
  gap: 8px;
}

.trust-band--sm .trust-band__seg {
  width: 12px;
  height: 4px;
}

.trust-band--sm .trust-band__label {
  font-size: 13px;
}

/* Section state on a form: fills as you complete the fields, so a long form
   answers "am I done with this bit" without being submitted first. Brand,
   not success — this is your own work, not anyone's confirmation of it. */
.section-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  vertical-align: middle;
  transition: color 0.2s ease;
}

.section-state__mark {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1.5px dashed var(--border-strong);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.section-state--done {
  color: var(--brand-primary);
}

.section-state--done .section-state__mark {
  border-style: solid;
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

@media (prefers-reduced-motion: reduce) {
  .section-state,
  .section-state__mark {
    transition: none;
  }
}

/* Home carries its icon because the logo alone was not read as a way back. */
.nav-link--home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* The two skill panels asked for different things and looked identical. A
   tinted edge separates them without inventing a second panel style. */
.skills-panel {
  position: relative;
  overflow: hidden;
}

.skills-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}

.skills-panel--functional::before {
  background: var(--brand-primary);
}

.skills-panel--leadership::before {
  background: #c9a227;
}

.app-panel.skills-panel .choice-tile:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-soft);
}

.app-panel.skills-panel--leadership .choice-tile:has(input:checked) {
  border-color: rgba(201, 162, 39, 0.6);
  background: rgba(201, 162, 39, 0.12);
}

/* A skill tile is a pick plus a way to undo the pick. The remove button is a
   sibling of the label rather than inside it — a button inside a <label>
   activates the label's checkbox on the way through. */
.choice-tile__pick {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

.choice-tile__remove {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0 2px;
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, color 0.14s ease;
}

/* Visible on hover or keyboard focus, so it does not clutter a long list but
   is never hidden from someone tabbing through. */
.choice-tile:hover .choice-tile__remove,
.choice-tile__remove:focus-visible {
  opacity: 1;
}

.choice-tile__remove:hover {
  color: var(--text-primary);
}

@media (hover: none) {
  .choice-tile__remove {
    opacity: 1;
  }
}

/* A panel that can fold. Used where a section is still yours to open but is
   not what you came for — a recruiter's own trust standing, say. Collapsed,
   never hidden: the difference matters because the panel is still relevant,
   just not first. */
.app-panel.panel-fold {
  display: block;
  padding: 0;
}

.panel-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

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

.panel-fold__lead {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.panel-fold__title {
  font-family: "Manrope", "Geist", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* A chevron drawn in CSS rather than a sixth sprite entry, since it is
   decoration for a control that already says what it does. */
.panel-fold__chev {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}

.panel-fold[open] .panel-fold__chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.panel-fold__summary:hover .panel-fold__chev {
  border-color: var(--text-primary);
}

.panel-fold__body {
  padding: 0 24px 24px;
}

@media (max-width: 560px) {
  .panel-fold__summary {
    padding: 18px;
  }

  .panel-fold__body {
    padding: 0 18px 18px;
  }
}

.panel-fold__body > .score-note:first-of-type {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Motion and dimensional depth
   Panels are still ordinary readable blocks without JavaScript. The root
   class is added in <head>, so only enhanced pages begin in the reveal state.
   --------------------------------------------------------------------------- */

body.app-body::before,
body.app-body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.65;
}

body.app-body::before {
  width: min(620px, 72vw);
  aspect-ratio: 1;
  top: -310px;
  left: -160px;
  background: radial-gradient(circle, rgba(77, 132, 255, 0.18), rgba(120, 168, 255, 0.03) 48%, transparent 70%);
}

body.app-body::after {
  width: min(520px, 64vw);
  aspect-ratio: 1;
  right: -260px;
  top: 28vh;
  background: radial-gradient(circle, rgba(85, 197, 151, 0.09), rgba(99, 190, 221, 0.025) 48%, transparent 70%);
}

.site-shell {
  position: relative;
  z-index: 1;
}

.app-panel {
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(120, 168, 255, 0.055), transparent 34%),
    linear-gradient(145deg, rgba(18, 25, 35, 0.88), rgba(10, 16, 24, 0.82));
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.app-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid transparent;
  background: linear-gradient(115deg, rgba(120, 168, 255, 0.15), transparent 26%, transparent 72%, rgba(85, 197, 151, 0.06)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.42;
}

@media (hover: hover) {
  .btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }
}

.motion-ready [data-animate] {
  opacity: 0;
  transform: translateY(8px);
}

.motion-ready [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
  transition-delay: calc(var(--reveal-order, 0) * 40ms);
}

.site-header {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.req-row,
.role-row,
.trust-slot,
.panel-fold__summary,
.switch-row {
  transition: background-color 160ms ease, border-color 160ms ease;
}

@media (hover: hover) {
  .req-row:hover,
  .role-row:hover,
  .trust-slot:hover,
  .panel-fold__summary:hover,
  .switch-row:hover {
    background-color: rgba(255, 255, 255, 0.025);
  }
}

.req-row:focus-within,
.role-row:focus-within,
.trust-slot:focus-within,
.panel-fold__summary:focus-visible,
.switch-row:focus-within {
  background-color: rgba(255, 255, 255, 0.035);
}

.dash-name {
  text-shadow: 0 8px 30px rgba(120, 168, 255, 0.08);
}

.evidence-pip--on,
.trust-slot--filled .trust-slot__marker {
  box-shadow: 0 0 14px rgba(85, 197, 151, 0.2);
}

/* Settings: privacy state and data-rights controls. */
.settings-hero {
  padding: 8px 2px 10px;
}

.privacy-state {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 172px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.025);
}

.privacy-state__dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--text-tertiary);
  box-shadow: 0 0 0 5px rgba(114, 128, 152, 0.1);
}

.privacy-state--live .privacy-state__dot {
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(111, 163, 255, 0.1), 0 0 18px rgba(111, 163, 255, 0.3);
}

.privacy-state strong,
.privacy-state small {
  display: block;
}

.privacy-state strong {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.3;
}

.privacy-state small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
}

.settings-panel--featured {
  background:
    radial-gradient(circle at 94% 8%, rgba(120, 168, 255, 0.13), transparent 30%),
    linear-gradient(145deg, rgba(19, 28, 42, 0.96), rgba(10, 16, 24, 0.88));
}

.settings-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.autosave-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-subtle);
  border-radius: 999px;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, .025);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.settings-orbit {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 1px solid rgba(120, 168, 255, 0.22);
  border-radius: 50%;
}

.settings-orbit::before,
.settings-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.settings-orbit::before {
  inset: 9px;
  border: 1px solid rgba(85, 197, 151, 0.15);
}

.settings-orbit::after {
  width: 8px;
  height: 8px;
  top: -4px;
  left: 25px;
  background: var(--brand-primary);
  box-shadow: 0 0 16px rgba(120, 168, 255, 0.65);
}

.settings-orbit > span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  inset: 24px;
  background: var(--success);
  box-shadow: 0 0 16px rgba(85, 197, 151, 0.4);
}

.privacy-controls {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.privacy-controls .switch-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.switch-row--locked {
  opacity: 0.55;
  cursor: default;
}

.account-actions {
  display: grid;
  gap: 10px;
}

.account-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.025);
}

.account-action__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--brand-primary);
  background: var(--brand-soft);
  font-size: 20px;
  font-weight: 700;
}

.account-action__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-action__body strong {
  color: var(--text-primary);
  font-size: 14px;
}

.account-action__body span {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.danger-zone {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.danger-zone > summary {
  width: fit-content;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.danger-zone > summary:hover {
  color: var(--destructive);
}

.danger-zone__body {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid rgba(239, 106, 106, 0.24);
  border-radius: var(--radius-1);
  background: rgba(239, 106, 106, 0.045);
}

.danger-zone__body h3 {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.danger-zone__body p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.btn-danger {
  border: 1px solid rgba(239, 106, 106, 0.38) !important;
  background: rgba(239, 106, 106, 0.11) !important;
  color: #ffb0b0 !important;
}

.btn-danger:hover {
  border-color: rgba(239, 106, 106, 0.65) !important;
  background: rgba(239, 106, 106, 0.18) !important;
}

@media (max-width: 560px) {
  .privacy-state {
    width: 100%;
  }

  .settings-orbit {
    display: none;
  }

  .account-action {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .account-action form {
    grid-column: 1 / -1;
  }

  .account-action .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-body::before,
  body.app-body::after,
  .privacy-state--live .privacy-state__dot,
  .settings-orbit {
    animation: none;
  }

  .motion-ready [data-animate],
  .motion-ready [data-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .app-panel,
  .btn,
  .req-row,
  .role-row,
  .trust-slot,
  .panel-fold__summary,
  .switch-row {
    transition: none;
  }

  .btn:hover:not(:disabled),
  .app-panel:hover {
    transform: none;
  }
}

/* Product navigation and journey guidance ---------------------------------- */
.page-col--workspace {
  width: min(1080px, calc(100vw - 40px));
}

.workspace-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-1) 86%, transparent);
  width: fit-content;
}

.workspace-tab {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: calc(var(--r-md) - 4px);
  color: var(--text-secondary);
  font-size: .84rem;
  font-weight: 720;
  text-decoration: none;
}

.workspace-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .035);
}

.workspace-tab.is-current {
  color: #dce9ff;
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(111, 163, 255, .18);
}

@media (min-width: 900px) {
  .messages.page-col--workspace {
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .messages.page-col--workspace > .dash-head {
    grid-column: 1 / -1;
  }

  .messages.page-col--workspace > .convo-panel {
    position: sticky;
    top: 92px;
  }

  .messages.page-col--workspace > .thread-panel {
    min-height: 620px;
  }

  .reqs.page-col--workspace:has(.recruit-filter-panel) {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }

  .reqs.page-col--workspace:has(.recruit-filter-panel) > .dash-head,
  .reqs.page-col--workspace:has(.recruit-filter-panel) > .workspace-tabs {
    grid-column: 1 / -1;
  }

  .recruit-filter-panel {
    position: sticky;
    top: 92px;
  }

  .recruit-filters {
    grid-template-columns: 1fr;
  }

  .recruit-filters__go {
    grid-column: auto;
  }

  .candidate-dossier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 18px;
  }

  .candidate-dossier > .dash-head,
  .candidate-dossier > .workspace-tabs {
    grid-column: 1 / -1;
  }

  .candidate-evidence,
  .candidate-recommendations {
    grid-column: 1;
  }

  .candidate-actions {
    grid-column: 2;
    grid-row: 3 / span 2;
    position: sticky;
    top: 92px;
  }
}

.mobile-dock {
  display: none;
}

.flow-guide {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(9, 14, 21, 0.7);
  scrollbar-width: none;
}

.flow-guide::-webkit-scrollbar {
  display: none;
}

.flow-guide__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
}

.flow-guide__step::before {
  content: attr(data-step);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  font-size: 11px;
}

.flow-guide__step.is-current {
  color: var(--text-primary);
}

.flow-guide__step.is-current::before {
  background: var(--brand-soft);
  color: var(--brand-primary);
}

.flow-guide__arrow {
  color: var(--border-strong);
  font-size: 12px;
}

.journey-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--border);
}

.journey-strip__item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 14px 16px;
  background: rgba(10, 16, 24, 0.95);
}

.journey-strip__label {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-strip__value {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
}

.journey-strip__item a {
  color: var(--brand-primary);
}

@media (min-width: 900px) {
  .page-col.home {
    width: min(1000px, calc(100% - 40px));
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
    align-items: start;
  }

  .home > .dash-head,
  .home > .journey-strip,
  .home > .dash-inbox,
  .home > .home-recruiting {
    grid-column: 1 / -1;
  }

  .home > .score-panel {
    grid-column: 1;
    grid-row: span 2;
  }

  .home > .home-give,
  .home > .home-invite {
    grid-column: 2;
  }
}

/* Profile actions only float after the form changes. This avoids covering the
   next section from the moment the page loads, especially on a phone. */
.profile-save {
  position: static;
  padding: 2px 0 0;
  background: none;
}

.profile-form.has-unsaved {
  padding-bottom: 92px;
}

.profile-save.is-dirty {
  position: fixed;
  z-index: 55;
  right: max(20px, calc((100vw - 720px) / 2));
  bottom: 20px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(9, 14, 21, 0.9);
  box-shadow: var(--shadow-modal);
  backdrop-filter: blur(18px);
}

.profile-save__state {
  display: none;
  color: var(--text-secondary);
  font-size: 12px;
}

.profile-save.is-dirty .profile-save__state {
  display: inline;
}

@media (max-width: 768px) {
  body.app-body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .site-header {
    position: static;
    backdrop-filter: none;
  }

  .nav-burger--auth,
  .account-menu {
    display: none !important;
  }

  .mobile-dock {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px max(8px, env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-strong);
    background: rgba(7, 11, 17, 0.94);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
  }

  .mobile-dock__item {
    display: flex;
    min-width: 0;
    min-height: 52px;
    padding: 5px 2px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 600;
  }

  .mobile-dock__item .icon {
    width: 19px;
    height: 19px;
  }

  .mobile-dock__item.is-current {
    color: var(--brand-primary);
    background: var(--brand-soft);
  }

  .nav-sheet.is-open {
    position: fixed;
    z-index: 69;
    left: 12px;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: auto;
    margin: 0;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: rgba(10, 16, 24, 0.98);
    box-shadow: var(--shadow-modal);
    backdrop-filter: blur(20px);
  }

  .nav-sheet--public.is-open {
    z-index: 80;
    top: 72px;
    bottom: auto;
    display: grid;
    gap: 8px;
  }

  .nav-sheet--auth.nav-sheet--from-dock.is-open {
    z-index: 69;
    top: auto;
    bottom: calc(70px + env(safe-area-inset-bottom));
    display: grid;
    gap: 8px;
  }

  body.nav-menu-open .cookie-banner {
    visibility: hidden;
  }

  .nav-sheet .nav-link {
    min-height: 48px;
    border-radius: 10px;
  }

  .journey-strip {
    grid-template-columns: 1fr;
  }

  .flow-guide {
    margin-inline: -2px;
  }

  .text-action,
  .settings-more > summary,
  .danger-zone > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .hint__trigger {
    width: 28px;
    height: 28px;
  }

  .profile-save.is-dirty {
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .profile-save.is-dirty .btn {
    width: auto;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-dock__item,
  .profile-save {
    transition: none;
  }
}

/* Signed-out experience ----------------------------------------------------- */
.site-main.public-main,
.site-main.auth-main {
  background:
    radial-gradient(circle at 18% 0%, rgba(84, 137, 231, 0.12), transparent 28rem),
    radial-gradient(circle at 92% 32%, rgba(85, 197, 151, 0.045), transparent 24rem);
}

.public-page {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0 96px;
}

.public-page--cms { width: min(820px, calc(100% - 40px)); }
.cms-copy { min-width: 0; max-width: 100%; color: var(--text-secondary); font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.cms-copy > * { min-width: 0; max-width: 100%; }
.cms-copy > * + * { margin-top: 18px; }
.cms-copy h1,
.cms-copy h2,
.cms-copy h3,
.cms-copy h4 {
  color: var(--text-primary);
  font-family: "Manrope", "Geist", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.cms-copy h1 { max-width: 18ch; margin-bottom: 34px; font-size: clamp(40px, 6vw, 68px); }
.cms-copy h2 { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--border); font-size: clamp(25px, 3vw, 34px); }
.cms-copy h3 { margin-top: 32px; font-size: 20px; }
.cms-copy h4 { margin-top: 26px; font-size: 17px; }
.cms-copy ul,
.cms-copy ol { display: grid; gap: 10px; padding-left: 1.4em; }
.cms-copy li::marker { color: var(--brand-primary); font-weight: 750; }
.cms-copy a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.cms-copy blockquote {
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(85, 197, 151, 0.05), transparent 68%), var(--surface-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
}
.cms-copy blockquote p { margin: 0; }
.cms-copy blockquote p:first-child strong:first-child {
  color: var(--success);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cms-copy blockquote p:nth-child(2) { font-size: 19px; line-height: 1.55; letter-spacing: -.01em; }
.cms-copy blockquote p:last-child { color: var(--text-tertiary); font-size: 13px; line-height: 1.55; }
.cms-copy blockquote p:last-child strong { display: block; color: var(--text-primary); font-size: 15px; }
.cms-copy code { padding: 2px 6px; border-radius: 5px; background: var(--surface-elevated); font-size: .9em; }
.cms-copy pre { overflow-x: auto; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.cms-copy pre code { padding: 0; background: transparent; }
.cms-copy--marketing h1 { max-width: 13ch; margin: 16px 0 0; font-size: clamp(42px, 5.1vw, 64px); line-height: 1; letter-spacing: -0.052em; }
.cms-copy--marketing h1 + p { max-width: 54ch; margin-top: 22px; color: var(--text-secondary); font-size: 18px; line-height: 1.65; }

.public-eyebrow,
.public-proof-label {
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.public-title {
  max-width: 13ch;
  margin-top: 18px;
  color: var(--text-primary);
  font-family: "Manrope", "Geist", sans-serif;
  font-size: clamp(44px, 5.7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.public-title--small {
  max-width: 17ch;
  font-size: clamp(32px, 4vw, 48px);
}

.public-lede {
  max-width: 57ch;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.65;
}

.public-hero {
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.public-hero::before { content: none; }

.public-hero--split,
.public-hero--started {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(44px, 7vw, 88px);
  align-items: center;
}

.public-hero__proof {
  margin: 0;
  padding: 28px;
  transform: rotate(1deg);
  background:
    radial-gradient(circle at 100% 0%, rgba(85, 197, 151, 0.12), transparent 46%),
    linear-gradient(145deg, rgba(18, 28, 39, 0.98), rgba(10, 16, 24, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

.public-proof-label {
  margin-bottom: 28px;
  color: var(--text-tertiary);
}

.public-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 88px;
  border-block: 1px solid var(--border);
}

.public-band > div {
  min-width: 0;
  padding: 24px 22px;
  border-left: 1px solid var(--border);
}

.public-band > div:first-child { border-left: 0; }
.public-band span { color: var(--text-primary); font-weight: 700; font-size: 14px; }
.public-band p { margin-top: 5px; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; }

.public-section {
  width: 100%;
  margin-top: 112px;
  padding: 0;
}

.public-section--process,
.public-section--journey,
.public-faq {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(44px, 8vw, 100px);
  align-items: start;
}

.public-section__intro { max-width: 390px; }
.public-h2 {
  margin-top: 14px;
  color: var(--text-primary);
  font-family: "Manrope", "Geist", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  text-wrap: balance;
}
.public-body { margin-top: 16px; color: var(--text-secondary); font-size: 16px; line-height: 1.7; }

.public-process { list-style: none; margin: 0; padding: 0; }
.public-process li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.public-process li:last-child { border-bottom: 1px solid var(--border); }
.public-process__n { color: var(--brand-primary); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; }
.public-process h3,
.public-principles h3,
.start-journey h3,
.public-start-note h2 { color: var(--text-primary); font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.public-process p,
.public-principles p,
.start-journey__body > p:last-child,
.public-start-note p { margin-top: 8px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }

.public-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.public-persona {
  min-height: 410px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(18, 27, 39, 0.97), rgba(10, 15, 22, 0.96));
}
.public-persona--candidate { background: radial-gradient(circle at 0 0, rgba(120,168,255,.15), transparent 42%), linear-gradient(155deg, rgba(18,27,39,.98), rgba(10,15,22,.96)); }
.public-persona--hiring { background: radial-gradient(circle at 100% 0, rgba(85,197,151,.11), transparent 42%), linear-gradient(155deg, rgba(18,27,39,.98), rgba(10,15,22,.96)); }
.public-persona .public-h2 { font-size: clamp(26px, 3vw, 38px); }
.public-check-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.public-check-list li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid var(--border); color: var(--text-primary); font-size: 14px; }
.public-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 800; }

.public-principles { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(44px, 8vw, 100px); }
.public-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.public-principles__grid article { padding: 24px; border-left: 1px solid var(--border); background: rgba(11,17,25,.72); }
.public-principles__grid article:first-child { border-left: 0; }
.public-principles__grid h3 { font-size: 15px; }
.public-principles__grid p { font-size: 14px; }

.public-close {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-top: 120px;
  padding: 56px 0 12px;
  border-top: 1px solid var(--border-strong);
}
.public-close .about-actions { flex: 0 0 auto; }

/* Sign in / join */
.public-auth-shell {
  width: min(1120px, calc(100% - 40px));
  grid-template-columns: minmax(0, 1.1fr) minmax(370px, .78fr);
  gap: clamp(36px, 6vw, 76px);
  padding: 64px 0 84px;
  align-items: start;
}
.public-auth-story { gap: 30px; }
.public-auth-hero { padding: 14px 0 0; }
.public-auth-hero .auth-headline { max-width: 13ch; margin-top: 16px; font-size: clamp(42px, 5.1vw, 64px); line-height: 1; letter-spacing: -0.052em; }
.public-auth-hero .auth-lede { max-width: 54ch; margin-top: 22px; font-size: 18px; line-height: 1.65; }
.public-auth-proof { max-width: 610px; margin: 4px 0 0; padding: 24px; }
.public-auth-proof .vouch-card__quote { font-size: 18px; }
.public-proof-notes { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 650px; border-block: 1px solid var(--border); }
.public-proof-notes > div { padding: 18px 18px 18px 0; }
.public-proof-notes__n { color: var(--brand-primary); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.public-proof-notes p { margin-top: 7px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.public-auth-panel {
  position: sticky;
  top: 112px;
  padding: 34px;
  border-color: var(--border-strong);
  background: rgba(10, 16, 24, .94);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.public-auth-panel .public-eyebrow { color: var(--text-tertiary); }
.public-auth-panel .auth-panel-headline { margin-top: 12px; font-size: 30px; }
.auth-field-note,
.auth-panel-foot { color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }
.auth-field-note { margin-top: 8px; }
.auth-panel-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }

/* Get started */
.public-hero--started { grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); }
.public-start-note {
  display: flex;
  gap: 16px;
  padding: 26px;
  border: 1px solid rgba(85,197,151,.28);
  border-radius: 22px;
  background: rgba(85,197,151,.065);
}
.public-start-note__icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: rgba(85,197,151,.14); color: var(--success); font-weight: 800; }
.public-start-note h2 { font-size: 16px; }
.public-start-note p { font-size: 14px; }
.start-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; }
.start-journey li { min-height: 260px; padding: 26px; background: rgba(11,17,25,.74); border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.start-journey li:nth-child(odd) { border-left: 0; }
.start-journey li:nth-child(-n+2) { border-top: 0; }
.start-journey__n { color: var(--brand-primary); font-size: 12px; font-weight: 750; }
.start-journey__body { margin-top: 32px; }
.start-journey__meta { margin-bottom: 7px; color: var(--text-tertiary); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.public-invite-help { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding: 34px; border: 1px solid var(--border); border-radius: 24px; background: rgba(11,17,25,.7); }
.public-invite-help .public-body { margin: 0; }
.public-faq__list { border-top: 1px solid var(--border); }
.public-faq details { border-bottom: 1px solid var(--border); }
.public-faq summary { position: relative; padding: 22px 38px 22px 0; cursor: pointer; list-style: none; color: var(--text-primary); font-size: 16px; font-weight: 700; }
.public-faq summary::-webkit-details-marker { display: none; }
.public-faq summary::after { content: "+"; position: absolute; right: 4px; color: var(--brand-primary); font-size: 22px; font-weight: 400; }
.public-faq details[open] summary::after { content: "–"; }
.public-faq details p { max-width: 64ch; padding: 0 38px 22px 0; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }

@media (max-width: 1024px) {
  .public-hero--split,
  .public-hero--started,
  .public-section--process,
  .public-section--journey,
  .public-faq,
  .public-principles { grid-template-columns: 1fr; gap: 40px; }
  .public-hero__copy { max-width: 760px; }
  .public-hero__proof { max-width: 680px; transform: none; }
  .public-section__intro { max-width: 600px; }
  .public-principles__grid { max-width: none; }
  .public-auth-shell { grid-template-columns: 1fr; }
  .public-auth-panel { position: static; max-width: 620px; }
}

@media (max-width: 768px) {
  .public-page,
  .public-auth-shell { width: min(100%, calc(100% - 24px)); padding: 40px 0 64px; }
  .public-page--cms { box-sizing: border-box; width: 100%; padding-inline: 12px; }
  .cms-copy h1,
  .cms-copy h2,
  .cms-copy h3,
  .cms-copy h4 { text-wrap: wrap; }
  .public-title { font-size: clamp(38px, 11vw, 54px); }
  .public-lede { margin-top: 18px; font-size: 17px; }
  .public-auth-hero .auth-headline { font-size: clamp(38px, 11vw, 52px); }
  .public-auth-panel { padding: 24px; }
  .public-auth-story { margin-top: 22px; }
  .public-auth-proof { padding: 20px; }
  .public-proof-notes { grid-template-columns: 1fr; }
  .public-proof-notes > div { border-top: 1px solid var(--border); }
  .public-proof-notes > div:first-child { border-top: 0; }
  .public-band { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .public-band > div:nth-child(odd) { border-left: 0; }
  .public-band > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .public-section { width: 100%; margin-top: 76px; padding: 0; }
  .public-personas { grid-template-columns: 1fr; }
  .public-persona { min-height: 0; padding: 28px 24px; }
  .public-principles__grid { grid-template-columns: 1fr; }
  .public-principles__grid article { border-left: 0; border-top: 1px solid var(--border); }
  .public-principles__grid article:first-child { border-top: 0; }
  .start-journey { grid-template-columns: 1fr; }
  .start-journey li { min-height: 0; border-left: 0; border-top: 1px solid var(--border); }
  .start-journey li:nth-child(2) { border-top: 1px solid var(--border); }
  .start-journey__body { margin-top: 22px; }
  .public-invite-help { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .public-close { display: block; margin-top: 80px; padding-top: 40px; }
  .public-close .about-actions { margin-top: 28px; }
}

/* Request detail ----------------------------------------------------------- */
.request-workspace {
  width: min(980px, calc(100vw - 40px));
}

.request-head {
  align-items: end;
  margin-bottom: 22px;
}

.request-head .req-back { margin-bottom: 24px; }
.request-head .section-kicker { margin-bottom: 6px; }
.request-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.status-pill--success { border-color: rgba(76, 214, 161, .28); background: rgba(76, 214, 161, .1); color: #65ddb1; }
.status-pill--waiting { border-color: rgba(120, 168, 255, .28); background: rgba(120, 168, 255, .1); color: var(--brand-primary); }

.request-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-bottom: 0;
  border-block: 1px solid var(--border);
}

.request-brief > div {
  min-width: 0;
  padding: 18px 24px;
  border-left: 1px solid var(--border);
}

.request-brief > div:first-child { padding-left: 0; border-left: 0; }
.request-brief__label {
  margin-bottom: 7px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.request-brief__value { color: var(--text-primary); font-size: 14px; font-weight: 650; }
.request-skill-list { margin-top: 0; }

.request-responses { padding: 30px !important; }
.request-responses__intro { max-width: 690px; margin-top: 8px; }
.recommendation-stack { display: grid; gap: 18px; margin-top: 24px; }
.recommendation-card {
  overflow: hidden;
  border: 1px solid rgba(189, 204, 225, .16);
  border-radius: 20px;
  background: rgba(5, 9, 14, .38);
}
.recommendation-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}
.recommendation-card__identity { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.recommendation-card__confirmed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #65ddb1;
  font-size: 12px;
  font-weight: 750;
}
.recommendation-card__confirmed .icon { width: 15px; height: 15px; }
.recommendation-card__note {
  margin: 0;
  padding: 24px 22px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.5;
}
.response-overview { padding: 22px; }
.response-overview h3 { margin-bottom: 14px; font-size: 14px; font-weight: 750; }
.response-overview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--border); }
.response-answer { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px; background: #0b111a; }
.response-answer__icon {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 999px;
  background: rgba(76, 214, 161, .1);
  color: #65ddb1;
  font-size: 12px;
  font-weight: 800;
}
.response-answer span { display: block; color: var(--text-primary); font-size: 13px; font-weight: 700; }
.response-answer small { display: block; margin-top: 2px; color: var(--text-tertiary); font-size: 12px; line-height: 1.35; }
.recommendation-card__privacy { padding: 14px 22px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: 12px; line-height: 1.5; }
.request-empty { padding: 24px; margin-top: 22px; }
.request-empty h3 { color: var(--text-primary); font-size: 16px; }
.request-empty p { margin-top: 5px; }

.request-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 16px; }
.request-evidence-note,
.request-manage { padding: 20px 22px; border: 1px solid var(--border); border-radius: 18px; background: rgba(14, 21, 31, .64); }
.request-evidence-note__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.request-manage summary { cursor: pointer; color: var(--text-primary); font-size: 14px; font-weight: 750; }
.request-manage > p { margin-top: 10px; color: var(--text-tertiary); font-size: 12px; line-height: 1.5; }
.request-manage .req-actions { margin-top: 16px; }

@media (max-width: 700px) {
  .request-workspace { width: min(100%, calc(100vw - 24px)); }
  .request-head { align-items: stretch; }
  .request-head > form .btn,
  .request-head > .btn { width: 100%; }
  .request-brief { grid-template-columns: 1fr 1fr; }
  .request-brief > div { padding: 16px 14px; }
  .request-brief > div:first-child { grid-column: 1 / -1; padding-left: 0; }
  .request-responses { padding: 22px 18px !important; }
  .recommendation-card__head { display: block; }
  .recommendation-card__confirmed { margin-top: 12px; }
  .response-overview__grid { grid-template-columns: 1fr; }
  .request-footer-grid { grid-template-columns: 1fr; }
}

/* Requests master-detail workspace ---------------------------------------- */
.request-page { width: min(1240px, calc(100vw - 40px)); }
.request-page__head { margin-bottom: 20px; }
.request-page__head .dash-name { font-size: clamp(26px, 3vw, 34px); }
.request-split {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(9, 14, 22, .72);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .22);
}
.request-master {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: rgba(15, 22, 33, .72);
}
.request-master__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px 16px;
}
.request-master__head .section-kicker { margin-bottom: 2px; }
.request-master__head h2 { color: var(--text-primary); font-size: 17px; font-weight: 750; }
.request-master__count {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 750;
}
.request-master__filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 20px 16px;
  scrollbar-width: none;
}
.request-master__filters::-webkit-scrollbar { display: none; }
.request-master__filters .filter-chip { flex: 0 0 auto; padding: 6px 9px; font-size: 11px; }
.request-master__list { list-style: none; border-top: 1px solid var(--border); }
.request-master__list > li { border-bottom: 1px solid var(--border); }
.request-master__row {
  display: block;
  padding: 17px 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.request-master__row:hover { background: rgba(108, 151, 255, .06); }
.request-master__row.is-current {
  background: rgba(108, 151, 255, .1);
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
.request-master__topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.request-master__name { color: var(--text-primary); font-size: 14px; font-weight: 720; line-height: 1.35; }
.request-master__chevron { color: var(--text-tertiary); font-size: 21px; line-height: 1; }
.request-master__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; color: var(--text-tertiary); font-size: 11px; }
.request-master__meta .status-pill { padding: 3px 7px; font-size: 9px; }
.request-master__recipient { display: block; overflow: hidden; margin-top: 8px; color: var(--text-tertiary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.request-master__empty { margin: 18px 20px; color: var(--text-tertiary); font-size: 13px; }
.request-detail-pane { min-width: 0; padding: 30px; }
.request-detail-content {
  display: grid;
  width: 100%;
  gap: 20px;
}
.request-detail-back { display: none; }
.request-detail-empty {
  display: grid;
  min-height: 560px;
  max-width: 460px;
  margin: auto;
  place-content: center;
  justify-items: start;
}
.request-detail-empty__icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 15px;
  color: var(--brand-primary);
  background: rgba(108, 151, 255, .08);
}
.request-detail-empty__icon .icon { width: 22px; height: 22px; }
.request-detail-empty h2 { margin-top: 4px; color: var(--text-primary); font-size: 24px; }
.request-detail-empty > p:not(.section-kicker) { max-width: 400px; margin-top: 9px; color: var(--text-secondary); line-height: 1.6; }
.request-detail-empty .btn { margin-top: 20px; }
.request-detail-pane .request-head { margin-top: 0; }

@media (max-width: 860px) {
  .request-page { width: min(100%, calc(100vw - 24px)); }
  .request-split { display: block; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .request-master { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
  .request-detail-pane { padding: 0; }
  .request-detail-content { gap: 16px; }
  .request-split.has-selection .request-master { display: none; }
  .request-split:not(.has-selection) .request-detail-pane { display: none; }
  .request-page--selected .request-page__head { display: none; }
  .request-detail-back { display: block; }
  .request-detail-content .request-head { align-items: stretch; margin-top: 2px; }
  .request-detail-content .request-head > form .btn,
  .request-detail-content .request-head > .btn { width: 100%; }
}

@media (max-width: 560px) {
  .request-page__head { align-items: stretch; }
  .request-page__head .btn { width: 100%; }
  .request-master__head { padding-inline: 16px; }
  .request-master__filters { padding-inline: 16px; }
  .request-master__row { padding-inline: 16px; }
}

/* Product workspace refinements */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.active-filter { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border: 1px solid rgba(108,151,255,.35); border-radius: 999px; color: var(--text-secondary); background: rgba(108,151,255,.08); font-size: 12px; }
.match-rationale { margin-top: 10px; color: var(--text-secondary); font-size: 12px; }
.shortlist-quick-action { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.shortlist-quick-action .select { min-width: 160px; }

.home-personal { grid-column: 1 / -1; }
.home-personal > .panel-fold__content { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; padding: 0 20px 20px; }
.home-personal .app-panel { margin: 0; box-shadow: none; }

.shortlist-workspace { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); min-height: 600px; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-1); }
.shortlist-workspace > .app-panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.shortlist-master { padding: 0; border-right: 1px solid var(--border) !important; }
.shortlist-master__head { padding: 24px 22px 14px; }
.shortlist-create { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 0 16px 18px; border-bottom: 1px solid var(--border); }
.shortlist-list { display: grid; }
.shortlist-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 15px 18px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.shortlist-list__item:hover, .shortlist-list__item.is-current { background: rgba(108,151,255,.08); }
.shortlist-list__item.is-current { box-shadow: inset 3px 0 var(--brand-primary); }
.shortlist-list__main { min-width: 0; }
.shortlist-list__name { display: block; overflow: hidden; color: var(--text-primary); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.shortlist-list__meta { display: block; margin-top: 5px; color: var(--text-tertiary); font-size: 12px; }
.shortlist-detail { min-width: 0; padding: 28px 30px; }
.shortlist-detail__back { display: none; }
.shortlist-detail__head, .shortlist-section__head, .shortlist-share { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.shortlist-section { padding: 24px 0; border-top: 1px solid var(--border); }
.shortlist-share { margin-top: 24px; }
.share-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.shortlist-details-form { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(260px,1.3fr) auto; align-items: end; gap: 14px; }
.curated-list { display: grid; gap: 12px; margin-top: 18px; padding: 0; list-style: none; }
.curated-candidate { display: grid; grid-template-columns: minmax(190px,.75fr) minmax(260px,1.25fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.018); }
.curated-candidate__identity { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.curated-candidate__position { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--brand-primary); background: rgba(108,151,255,.1); font-size: 12px; font-weight: 800; }
.curated-candidate__note { display: flex; align-items: center; gap: 8px; }
.curated-candidate__note textarea { min-height: 54px; }
.curated-candidate__actions { display: flex; align-items: center; gap: 6px; }
.icon-action { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--text-secondary); background: transparent; }
.icon-action:disabled { opacity: .35; }
.shortlist-empty-detail { display: grid; min-height: 500px; max-width: 470px; place-content: center; }

.messages-back { display: none; }
.thread-placeholder { align-content: center; min-height: 460px; }

.profile-hero { align-items: stretch; }
.profile-completion { width: min(320px,100%); padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.02); }
.profile-completion__score { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.profile-completion__score strong { color: var(--text-primary); font-size: 25px; }
.profile-completion__score span, .profile-completion small { color: var(--text-tertiary); font-size: 12px; }
.profile-completion__track { height: 5px; margin: 9px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.profile-completion__track span { display: block; height: 100%; border-radius: inherit; background: var(--brand-primary); }
.profile-completion .btn { margin-top: 12px; }
.profile-panel { scroll-margin-top: 100px; }

.privacy-summary { width: min(350px,100%); padding: 15px 18px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.02); }
.privacy-summary ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.privacy-summary li { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--text-tertiary); font-size: 12px; }
.privacy-summary strong { color: var(--text-primary); font-size: 12px; }

.req-row__meta, .settings-note, .field-note, .reply__hint { color: var(--text-secondary); }

@media (max-width: 860px) {
  .shortlist-workspace { display: block; min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .shortlist-master, .shortlist-detail { border: 1px solid var(--border) !important; border-radius: 20px !important; }
  .shortlist-workspace.has-selection .shortlist-master { display: none; }
  .shortlist-workspace:not(.has-selection) .shortlist-detail { display: none; }
  .shortlist-detail { padding: 20px 17px; }
  .shortlist-detail__back { display: block; }
  .shortlist-details-form, .curated-candidate { grid-template-columns: 1fr; }
  .curated-candidate__note { align-items: flex-end; }
  .shortlist-share, .shortlist-detail__head, .shortlist-section__head { align-items: stretch; flex-direction: column; }
  .share-actions { justify-content: flex-start; }
  .messages--inbox .thread-panel { display: none; }
  .messages--thread .convo-panel { display: none; }
  .messages-back { display: block; }
  .home-personal > .panel-fold__content { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .profile-hero, .settings-hero { align-items: stretch; flex-direction: column; }
  .profile-completion, .privacy-summary { width: 100%; }
  .settings-panel__head { flex-direction: column; gap: 12px; }
  .autosave-status { align-self: flex-start; }
  .flow-guide { gap: 5px; padding-inline: 10px; scrollbar-width: thin; }
  .flow-guide__step { gap: 5px; flex: 0 0 auto; font-size: 11px; }
  .flow-guide__step::before { width: 20px; height: 20px; }
  .flow-guide__arrow { display: none; }
  .req-row__actions { align-items: stretch; flex-direction: column; width: 100%; }
  .result-shortlist-form { width: 100%; }
  .result-shortlist-form select { width: auto; min-width: 0; flex: 1; }
  .result-shortlist-form .btn { flex: 0 0 auto; }
  .curated-candidate__note { display: grid; }
}

.home-recruiter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.home-recruiter-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.home-recruiter-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
  transform: translateY(-2px);
}
.home-recruiter-card .text-action { display: inline-block; margin-top: 18px; }

@media (max-width: 700px) {
  .home-recruiter-grid { grid-template-columns: 1fr; }
}

/* Invite request and waitlist */
.auth-invite-request {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 2px 0;
  color: var(--text-tertiary);
  font-size: 13px;
}
.auth-invite-request a { display: inline-flex; min-height: 44px; align-items: center; color: var(--brand-primary); font-weight: 700; }

.waitlist-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) 0 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
}
.waitlist-intro .display-title { max-width: 9ch; margin-top: 16px; font-size: clamp(46px, 6vw, 76px); line-height: .96; letter-spacing: -.055em; }
.waitlist-intro .lede { margin-top: 24px; max-width: 53ch; line-height: 1.65; }
.waitlist-back { display: inline-flex; min-height: 44px; margin-bottom: 34px; align-items: center; color: var(--text-secondary); font-size: 13px; font-weight: 650; }
.waitlist-steps { display: grid; gap: 0; margin: 38px 0 0; padding: 0; border-block: 1px solid var(--border); list-style: none; }
.waitlist-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--border); }
.waitlist-steps li:last-child { border-bottom: 0; }
.waitlist-steps li > span { color: var(--brand-primary); font-family: var(--font-display); font-size: 12px; font-weight: 750; }
.waitlist-steps p { display: grid; gap: 3px; margin: 0; color: var(--text-secondary); font-size: 13px; }
.waitlist-steps strong { color: var(--text-primary); font-size: 14px; }

.waitlist-card {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(189, 204, 225, .16);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(16, 24, 34, .97), rgba(10, 15, 23, .97));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
}
.waitlist-card__title { margin-top: 10px; font-size: clamp(27px, 3vw, 36px); line-height: 1.08; }
.waitlist-form { display: grid; gap: 20px; margin-top: 28px; }
.waitlist-methods { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.waitlist-methods legend { margin-bottom: 4px; }
.waitlist-method { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, .018); cursor: pointer; transition: border-color 160ms ease, background 160ms ease; }
.waitlist-method:has(input:checked) { border-color: rgba(120, 168, 255, .55); background: rgba(120, 168, 255, .08); }
.waitlist-method input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand-primary); }
.waitlist-method span { display: grid; gap: 3px; }
.waitlist-method strong { color: var(--text-primary); font-size: 14px; }
.waitlist-method small { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.waitlist-privacy { margin: -4px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; text-align: center; }

.waitlist-status-shell { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: clamp(70px, 12vw, 150px) 0; }
.waitlist-status-card { display: grid; justify-items: center; gap: 18px; padding: clamp(30px, 7vw, 62px); border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(180deg, rgba(16, 24, 34, .96), rgba(10, 15, 23, .96)); text-align: center; box-shadow: 0 28px 90px rgba(0, 0, 0, .25); }
.waitlist-status-card .display-title { font-size: clamp(36px, 6vw, 56px); line-height: 1; letter-spacing: -.045em; }
.waitlist-status-card .lede { max-width: 48ch; line-height: 1.65; }
.waitlist-status-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(120, 168, 255, .35); border-radius: 50%; background: rgba(120, 168, 255, .08); color: var(--brand-primary); font-family: var(--font-display); font-size: 24px; }
.waitlist-status-icon--ready { border-color: rgba(85, 197, 151, .38); background: rgba(85, 197, 151, .1); color: #9ae0bf; }
.waitlist-status-note { padding: 12px 15px; border-radius: 12px; background: rgba(255, 255, 255, .035); color: var(--text-secondary); font-size: 12px; }
.waitlist-home-link { display: inline-flex; min-height: 44px; margin-top: 2px; align-items: center; color: var(--text-secondary); font-size: 13px; font-weight: 650; }

@media (max-width: 820px) {
  .waitlist-shell { grid-template-columns: 1fr; width: min(620px, calc(100% - 32px)); padding-top: 34px; }
  .waitlist-intro .display-title { max-width: none; }
  .waitlist-steps { margin-top: 28px; }
}

@media (max-width: 520px) {
  .waitlist-shell { width: calc(100% - 24px); gap: 22px; padding-top: 14px; }
  .waitlist-intro .display-title { font-size: 43px; }
  .waitlist-intro .lede { margin-top: 16px; }
  .waitlist-back { margin-bottom: 14px; }
  .waitlist-steps { display: none; }
  .waitlist-card { padding: 22px 17px; border-radius: 21px; }
  .waitlist-status-shell { width: calc(100% - 24px); padding: 44px 0; }
  .waitlist-status-card { padding: 34px 20px; border-radius: 22px; }
  .auth-invite-request { align-items: flex-start; flex-direction: column; gap: 4px; }
}