/* Additional MVP screens: public inner pages, onboarding and workspaces. */

.mvp-section {
  padding: 96px 0;
  background: var(--paper-soft);
}

/* Рабочие данные API */
.live-data-panel { margin: 0 0 24px; }
.live-list { display: grid; gap: 12px; }
.live-request { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper-soft); }
.live-request > div:first-child { min-width: 0; }
.live-request h3, .live-offers h3, .live-chat h3 { margin: 7px 0; font-size: 17px; }
.live-request p { max-width: 760px; margin: 0 0 8px; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.live-request small { color: var(--ink-4); font-size: 12px; }
.live-offers, .live-chat { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.live-offers > article { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.live-offers p { margin: 5px 0; color: var(--ink-3); font-size: 13px; }
.live-chat > div { display: grid; gap: 8px; max-height: 320px; margin-bottom: 12px; overflow: auto; }
.live-chat p { display: grid; gap: 3px; margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--paper-soft); }
.live-chat p strong { font-size: 12px; }
.live-chat p span { font-size: 14px; }
.live-chat textarea { width: 100%; min-height: 90px; margin-bottom: 9px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); resize: vertical; }
@media (max-width: 700px) {
  .live-request, .live-offers > article { align-items: stretch; flex-direction: column; }
  .live-request .button, .live-offers .button { width: 100%; }
}

.prototype-action { display: none !important; }
.is-live-hydrated > :not(.app-topbar):not(.live-data-panel) { display: none !important; }
.live-empty { padding: 48px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); text-align: center; }
.live-empty h2 { margin-bottom: 8px; font-family: var(--serif); font-size: 30px; }
.live-files { display: grid; gap: 9px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.live-file { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); background: var(--paper-soft); }
.live-file small { color: var(--ink-4); }
.featured-grid > .live-empty { grid-column: 1 / -1; }
.admin-documents { display: grid; gap: 8px; padding: 12px 0 18px; }
.catalog-layout:has(.catalog-results .live-empty), .catalog-layout:has(.catalog-results .live-request) { grid-template-columns: 1fr; }
.catalog-layout:has(.catalog-results .live-empty) .filters, .catalog-layout:has(.catalog-results .catalog-card) .filters { display: none; }

.subpage-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--forest-3);
}

.subpage-hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 54px 54px;
  content: "";
}

.how-hero {
  padding: 42px 0 76px;
}

.how-hero .shell {
  position: relative;
}

.how-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(390px, .7fr);
  align-items: center;
  gap: 80px;
}

.how-hero-grid h1 {
  max-width: 780px;
  margin-bottom: 24px;
  font-size: clamp(50px, 6vw, 76px);
  line-height: .99;
}

.how-hero-grid > div:first-child > p {
  max-width: 730px;
  color: rgba(255, 255, 255, .65);
  font-size: 17px;
}

.hero-action-row {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.route-document {
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
}

.route-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.route-doc-head strong {
  color: rgba(255, 255, 255, .72);
  font-family: ui-monospace, monospace;
}

.route-document ol {
  margin: 0;
  padding: 9px 0 0;
  list-style: none;
}

.route-document li {
  position: relative;
  display: grid;
  grid-template-columns: 33px 1fr;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
}

.route-document li:not(:last-child)::after {
  position: absolute;
  top: 46px;
  bottom: -7px;
  left: 16px;
  width: 1px;
  background: rgba(255, 255, 255, .14);
  content: "";
}

.route-document li > span {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
}

.route-document li.is-done > span {
  border-color: #69b696;
  color: #b8e1d1;
  background: rgba(85, 168, 138, .14);
}

.route-document li.is-current > span {
  border-color: #e8b997;
  color: var(--forest-3);
  background: #e8b997;
}

.route-document li svg {
  width: 15px;
  height: 15px;
}

.route-document li strong,
.route-document li small {
  display: block;
}

.route-document li strong {
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
}

.route-document li small {
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
}

.path-switch-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.path-switch-heading .eyebrow {
  margin-bottom: 13px;
}

.path-switch-heading h2,
.verification-grid h2,
.faq-grid h2 {
  margin: 0;
  font-size: clamp(39px, 4.5vw, 56px);
  line-height: 1.04;
}

.path-switch-heading > p {
  max-width: 430px;
  margin: 0;
  color: var(--ink-3);
}

.role-path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.role-path-card {
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--paper);
}

.role-path-card.role-expert {
  color: #fff;
  background: var(--forest);
}

.role-index {
  display: inline-flex;
  margin-bottom: 21px;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--clay);
  background: var(--clay-pale);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.role-expert .role-index {
  color: #e8b997;
  background: rgba(255, 255, 255, .09);
}

.role-path-card > h3 {
  max-width: 530px;
  margin-bottom: 28px;
  font-family: var(--serif);
  font-size: 31px;
  letter-spacing: -.025em;
}

.role-path-card ol {
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.role-expert ol {
  border-color: rgba(255, 255, 255, .14);
}

.role-path-card li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.role-expert li {
  border-color: rgba(255, 255, 255, .14);
}

.role-path-card li > span {
  color: var(--clay);
  font-family: var(--serif);
  font-size: 13px;
}

.role-expert li > span {
  color: #e8b997;
}

.role-path-card li strong,
.role-path-card li small {
  display: block;
}

.role-path-card li strong {
  font-size: 14px;
}

.role-path-card li small {
  color: var(--ink-4);
  font-size: 12px;
}

.role-expert li small {
  color: rgba(255, 255, 255, .5);
}

.role-expert .button-outline {
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
  background: transparent;
}

.verification-section {
  background: var(--paper-muted);
}

.verification-grid {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: 90px;
}

.verification-grid > div:first-child > p,
.faq-grid > div:first-child > p {
  max-width: 500px;
  margin-top: 20px;
  color: var(--ink-3);
}

.verification-matrix {
  border-top: 1px solid var(--border);
}

.verification-matrix > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.matrix-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--forest);
  background: var(--forest-pale);
}

.matrix-icon svg {
  width: 19px;
}

.verification-matrix strong,
.verification-matrix small {
  display: block;
}

.verification-matrix strong {
  font-size: 14px;
}

.verification-matrix small {
  color: var(--ink-4);
  font-size: 12px;
}

.matrix-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.matrix-state svg {
  width: 15px;
  height: 15px;
}

.faq-grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: start;
  gap: 90px;
}

.faq-list {
  border-top: 1px solid var(--border);
}

.faq-list details {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  list-style: none;
}

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

.faq-list summary svg {
  width: 18px;
  flex: 0 0 auto;
  color: var(--clay);
  transform: rotate(90deg);
  transition: transform var(--transition);
}

.faq-list details[open] summary svg {
  transform: rotate(-90deg);
}

.faq-list details p {
  max-width: 700px;
  padding: 0 45px 22px 0;
  color: var(--ink-3);
  font-size: 13px;
}

/* Auth */

.route-login .site-header,
.route-login .site-footer {
  display: none;
}

.auth-page {
  min-height: 100vh;
  color: #fff;
  background: var(--forest-3);
}

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .75fr);
  gap: 70px;
}

.auth-story {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 0;
}

.auth-story::after {
  position: fixed;
  top: -150px;
  left: 25%;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.auth-story > div h1 {
  max-width: 690px;
  margin: 13px 0 22px;
  font-size: clamp(47px, 5.6vw, 72px);
  line-height: .98;
}

.auth-story > div p {
  max-width: 630px;
  color: rgba(255, 255, 255, .62);
  font-size: 16px;
}

.auth-kicker {
  color: #e8b997;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.auth-story ul {
  display: flex;
  flex-wrap: wrap;
  gap: 19px 27px;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  list-style: none;
}

.auth-story li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.auth-story li svg {
  width: 15px;
  height: 15px;
  color: #e8b997;
}

.auth-card-wrap {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 30px 0;
}

.auth-card {
  width: 100%;
  max-width: 490px;
  padding: 34px;
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  color: var(--ink-4);
  font-size: 12px;
}

.auth-back svg {
  width: 13px;
  height: 13px;
  transform: rotate(180deg);
}

.auth-card-head h2 {
  margin-bottom: 5px;
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: -.03em;
}

.auth-card-head p {
  color: var(--ink-4);
  font-size: 13px;
}

.auth-role-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 22px 0;
}

.auth-role-toggle button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  background: var(--paper-soft);
}

.auth-role-toggle button.is-active {
  border-color: var(--forest);
  background: var(--forest-pale);
  box-shadow: 0 0 0 2px var(--focus);
}

.auth-role-icon {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  color: var(--forest);
  background: var(--paper);
}

.auth-role-icon svg {
  width: 17px;
}

.auth-role-toggle strong,
.auth-role-toggle small {
  display: block;
}

.auth-role-toggle strong {
  font-size: 12px;
}

.auth-role-toggle small {
  color: var(--ink-4);
  font-size: 11px;
}

.auth-form > label {
  display: block;
  margin-bottom: 15px;
}

.auth-form > label > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}

.auth-form input[type="email"],
.password-field {
  width: 100%;
  height: 51px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.auth-form input[type="email"] {
  padding: 0 13px;
  outline: 0;
}

.password-field {
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  height: 100%;
  padding: 0 13px;
  border: 0;
  outline: 0;
  background: transparent;
}

.password-field button {
  width: 48px;
  height: 48px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  color: var(--ink-4);
  background: transparent;
}

.password-field button svg {
  width: 17px;
}

.auth-form input[type="email"]:focus,
.password-field:focus-within {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--focus);
}

.auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 19px;
  color: var(--ink-3);
  font-size: 12px;
}

.auth-options label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-options input {
  accent-color: var(--forest);
}

.auth-options button {
  padding: 0;
  border: 0;
  color: var(--forest-2);
  background: transparent;
  font-size: 12px;
}

.auth-divider {
  position: relative;
  height: 1px;
  margin: 25px 0;
  background: var(--border);
  text-align: center;
}

.auth-divider span {
  position: relative;
  top: -12px;
  padding: 0 10px;
  color: var(--ink-4);
  background: var(--paper);
  font-size: 12px;
}

.auth-signup {
  margin: 20px 0 0;
  color: var(--ink-4);
  font-size: 12px;
  text-align: center;
}

.auth-signup a {
  color: var(--forest-2);
  font-weight: 700;
}

/* Expert onboarding */

.join-page {
  min-height: 900px;
  padding: 38px 0 100px;
  background: var(--paper-muted);
}

.join-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.join-heading .eyebrow {
  margin-bottom: 13px;
}

.join-heading h1 {
  max-width: 800px;
  margin-bottom: 10px;
  font-size: clamp(43px, 5.2vw, 65px);
  line-height: 1;
}

.join-heading p {
  max-width: 710px;
  margin: 0;
  color: var(--ink-3);
}

.join-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 25px;
}

.join-form-card {
  scroll-margin-top: 95px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.join-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0 29px;
  border-bottom: 1px solid var(--border);
  list-style: none;
}

.join-stepper li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 64px;
  color: var(--ink-4);
  font-size: 12px;
}

.join-stepper li::after {
  position: absolute;
  right: 9px;
  left: 34px;
  height: 1px;
  background: var(--border);
  content: "";
}

.join-stepper li:last-child::after {
  display: none;
}

.join-stepper li > span {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--paper);
  font-size: 12px;
}

.join-stepper li strong {
  position: relative;
  z-index: 1;
  padding-right: 8px;
  background: var(--paper);
}

.join-stepper li.is-active,
.join-stepper li.is-complete {
  color: var(--forest);
}

.join-stepper li.is-active > span,
.join-stepper li.is-complete > span {
  border-color: var(--forest);
  color: #fff;
  background: var(--forest);
}

.join-panel {
  display: none;
  padding: 34px;
}

.join-panel.is-active {
  display: block;
  animation: step-in 250ms ease both;
}

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

.speciality-select-grid label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--paper-soft);
}

.speciality-select-grid label:has(input:checked) {
  border-color: var(--forest-2);
  background: var(--forest-pale);
}

.speciality-select-grid input,
.format-row input {
  margin-top: 2px;
  accent-color: var(--forest);
}

.speciality-select-grid strong,
.speciality-select-grid small {
  display: block;
}

.speciality-select-grid strong {
  font-size: 13px;
}

.speciality-select-grid small {
  color: var(--ink-4);
  font-size: 11px;
}

.format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 24px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}

.format-row > span {
  width: 100%;
  font-weight: 750;
}

.format-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
}

.doc-upload-list {
  border-top: 1px solid var(--border);
}

.doc-upload-list button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  background: transparent;
}

.doc-upload-list button:hover em {
  color: var(--forest);
}

.doc-upload-list button > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--clay);
  background: var(--clay-pale);
}

.doc-upload-list svg {
  width: 18px;
}

.doc-upload-list strong,
.doc-upload-list small {
  display: block;
}

.doc-upload-list strong {
  font-size: 13px;
}

.doc-upload-list small {
  color: var(--ink-4);
  font-size: 11px;
}

.doc-upload-list em {
  color: var(--ink-4);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.secure-upload-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--paper-muted);
}

.secure-upload-note > svg {
  width: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--success);
}

.secure-upload-note strong,
.secure-upload-note span {
  display: block;
}

.secure-upload-note strong {
  font-size: 12px;
}

.secure-upload-note span {
  color: var(--ink-4);
  font-size: 11px;
}

.join-preview {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
}

.join-preview .status {
  margin-bottom: 8px;
}

.status-pending,
.status-warm {
  color: #8a5c17;
  background: #f4e8c8;
}

.join-preview h3 {
  margin-bottom: 2px;
  font-family: var(--serif);
  font-size: 24px;
}

.join-preview p {
  margin-bottom: 10px;
  color: var(--ink-3);
  font-size: 12px;
}

.join-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.profile-preview-card,
.join-benefits {
  margin-bottom: 15px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.profile-preview-card {
  text-align: center;
}

.preview-label {
  display: block;
  margin-bottom: 19px;
  color: var(--ink-4);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-preview-card .avatar {
  width: 72px;
  height: 82px;
  margin: 0 auto 14px;
  font-size: 21px;
}

.profile-preview-card h3 {
  margin-bottom: 2px;
  font-family: var(--serif);
  font-size: 21px;
}

.profile-preview-card p {
  color: var(--ink-4);
  font-size: 12px;
}

.preview-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 13px 0;
  color: var(--ink-3);
  font-size: 11px;
}

.preview-placeholder {
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.preview-placeholder span {
  display: block;
  width: 100%;
  height: 5px;
  margin: 7px 0;
  border-radius: 5px;
  background: var(--paper-muted);
}

.preview-placeholder span:nth-child(2) {
  width: 70%;
}

.join-benefits h3 {
  margin-bottom: 13px;
  font-family: var(--serif);
  font-size: 19px;
}

.join-benefits ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.join-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: var(--ink-3);
  font-size: 12px;
}

.join-benefits svg {
  width: 14px;
  height: 14px;
  color: var(--success);
}

/* Organization */

.org-hero {
  padding: 36px 0 43px;
  color: #fff;
  background: var(--forest-3);
}

.org-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 25px;
}

.org-logo {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  color: #e8b997;
  background: rgba(255, 255, 255, .08);
  font-family: var(--serif);
  font-size: 36px;
}

.org-head h1 {
  margin-bottom: 3px;
  font-size: clamp(42px, 5vw, 61px);
  line-height: 1;
}

.org-head > div:nth-child(2) > p {
  margin-bottom: 15px;
  color: rgba(255, 255, 255, .6);
}

.org-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.org-team-grid > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.org-team-grid > a:hover {
  border-color: var(--forest-2);
}

.org-team-grid .avatar {
  width: 44px;
  height: 50px;
  font-size: 14px;
}

.org-team-grid strong,
.org-team-grid span,
.org-team-grid small {
  display: block;
}

.org-team-grid strong {
  font-size: 12px;
}

.org-team-grid span {
  color: var(--ink-3);
  font-size: 11px;
}

.org-team-grid small {
  color: var(--ink-4);
  font-size: 11px;
}

.org-requisites {
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-requisites li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.org-requisites span,
.org-requisites strong {
  display: block;
}

.org-requisites span {
  color: var(--ink-4);
  font-size: 11px;
}

.org-requisites strong {
  font-size: 12px;
}

/* Account shell */

.route-cabinet .site-footer,
.route-request-detail .site-footer,
.route-expert-cabinet .site-footer,
.route-expert-task .site-footer {
  display: none;
}

/* Expert task dossier */
.expert-task-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-start;
  margin: 18px 0 28px;
}

.expert-task-head h1 {
  max-width: 820px;
  margin: 12px 0 10px;
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.expert-task-head > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--ink-4);
  font-size: 14px;
}

.expert-task-head > div > div span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.expert-task-head > div > div svg {
  width: 14px;
  height: 14px;
}

.match-score {
  min-width: 132px;
  display: grid;
  gap: 2px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-align: center;
}

.match-score strong {
  color: var(--forest);
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
}

.match-score small {
  color: var(--ink-4);
  font-size: 13px;
  line-height: 1.35;
}

.expert-task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.expert-task-main,
.expert-offer-column {
  display: grid;
  gap: 14px;
}

.restricted-data {
  min-height: 76px;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 17px 20px;
  border-style: dashed;
  background: var(--paper-soft);
}

.restricted-data > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--forest);
}

.restricted-data strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

.restricted-data p {
  margin: 0;
  color: var(--ink-4);
  font-size: 14px;
}

.task-brief-card,
.expert-files-card,
.conflict-card {
  padding: 24px;
}

.task-brief-card > p {
  max-width: 76ch;
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}

.task-brief-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-brief-card dl > div {
  min-height: 76px;
  padding: 15px 17px;
  background: var(--paper-soft);
}

.task-brief-card dl > div:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.task-brief-card dl > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--border);
}

.task-brief-card dt {
  margin-bottom: 5px;
  color: var(--ink-4);
  font-size: 13px;
}

.task-brief-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.task-question {
  padding: 18px 20px;
  border-left: 3px solid var(--clay);
  background: var(--clay-pale);
}

.task-question span {
  color: var(--clay);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.task-question p {
  margin: 7px 0 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
}

.expert-file-list {
  display: grid;
  border-top: 1px solid var(--border);
}

.expert-file-list > div {
  min-height: 66px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.expert-file-list > div > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--forest);
  background: var(--forest-pale);
}

.expert-file-list svg {
  width: 16px;
  height: 16px;
}

.expert-file-list strong,
.expert-file-list small {
  display: block;
}

.expert-file-list strong {
  margin-bottom: 3px;
  font-size: 13px;
}

.expert-file-list small,
.expert-file-list em {
  color: var(--ink-4);
  font-size: 13px;
  font-style: normal;
}

.expert-file-list .is-locked {
  opacity: 0.67;
}

.conflict-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.conflict-card > div {
  display: flex;
  gap: 14px;
  align-items: center;
}

.conflict-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--forest);
  background: var(--forest-pale);
}

.conflict-icon svg {
  width: 20px;
  height: 20px;
}

.conflict-card h2 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 19px;
}

.conflict-card p {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-4);
  font-size: 14px;
  line-height: 1.5;
}

.expert-offer-card {
  position: sticky;
  top: 88px;
  padding: 24px;
}

.offer-form-head {
  margin-bottom: 20px;
}

.offer-form-head > span {
  color: var(--forest);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.offer-form-head h2 {
  margin: 7px 0 6px;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 500;
}

.offer-form-head p,
.offer-form-note {
  margin: 0;
  color: var(--ink-4);
  font-size: 13px;
  line-height: 1.5;
}

.expert-offer-card form {
  display: grid;
  gap: 14px;
}

.offer-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.offer-field-row label > span,
.offer-form-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 650;
}

.offer-field-row label > div {
  position: relative;
}

.offer-field-row input,
.offer-form-field input,
.offer-form-field textarea {
  width: 100%;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.offer-field-row input,
.offer-form-field input {
  height: 44px;
  padding: 0 12px;
}

.offer-field-row input {
  padding-right: 44px;
}

.offer-field-row em {
  position: absolute;
  top: 50%;
  right: 11px;
  color: var(--ink-4);
  font-size: 12px;
  font-style: normal;
  transform: translateY(-50%);
}

.offer-form-field textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}

.offer-field-row input:focus,
.offer-form-field input:focus,
.offer-form-field textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(31, 79, 63, 0.09);
}

.conflict-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-soft);
  cursor: pointer;
}

.conflict-check input {
  margin-top: 2px;
  accent-color: var(--forest);
}

.conflict-check strong,
.conflict-check small {
  display: block;
}

.conflict-check strong {
  margin-bottom: 3px;
  font-size: 14px;
}

.conflict-check small {
  color: var(--ink-4);
  font-size: 12px;
  line-height: 1.45;
}

.offer-form-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

.offer-form-note svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.response-deadline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
}

.response-deadline > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--clay);
  background: var(--clay-pale);
}

.response-deadline svg {
  width: 16px;
  height: 16px;
}

.response-deadline small,
.response-deadline strong {
  display: block;
}

.response-deadline small {
  color: var(--ink-4);
  font-size: 12px;
}

.response-deadline strong {
  margin: 2px 0 4px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
}

.response-deadline p {
  margin: 0;
  color: var(--ink-4);
  font-size: 13px;
}

.offer-success {
  min-height: 510px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.offer-success .success-mark {
  margin-bottom: 18px;
}

.offer-success h2 {
  margin: 8px 0;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
}

.offer-success > p {
  margin: 0 0 18px;
  color: var(--ink-4);
  font-size: 14px;
  line-height: 1.5;
}

.offer-success > div {
  width: 100%;
  display: grid;
  gap: 3px;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.offer-success > div strong {
  color: var(--forest);
  font-family: var(--serif);
  font-size: 23px;
}

.offer-success > div span {
  color: var(--ink-4);
  font-size: 13px;
}

/* Explicit confirmation before the customer selects an expert */
.offer-card.is-pending {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-pale);
}

.offer-confirm {
  width: 100%;
  display: grid;
  gap: 7px;
  margin-top: 9px;
  padding: 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--clay-pale);
  text-align: left;
}

.offer-confirm strong {
  font-size: 14px;
}

.offer-confirm p {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.4;
}

.offer-confirm > div {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6px;
}

.offer-confirm .button {
  min-height: 34px;
  padding-inline: 8px;
  font-size: 12px;
}

.app-page {
  min-height: calc(100vh - var(--header-h));
  padding: 26px 0 55px;
  background: var(--paper-muted);
}

.app-layout {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  align-items: start;
  gap: 25px;
}

.app-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  min-height: calc(100vh - var(--header-h) - 50px);
  display: flex;
  flex-direction: column;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 17px;
  border-bottom: 1px solid var(--border);
}

.app-user .avatar {
  width: 39px;
  height: 43px;
  font-size: 13px;
}

.app-user strong,
.app-user span {
  display: block;
}

.app-user strong {
  font-size: 12px;
}

.app-user span {
  color: var(--ink-4);
  font-size: 11px;
}

.app-sidebar nav {
  margin-top: 14px;
}

.app-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 41px;
  margin: 3px 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 650;
}

.app-sidebar nav a:hover,
.app-sidebar nav a.is-active {
  color: var(--forest);
  background: var(--forest-pale);
}

.app-sidebar nav a.is-active {
  box-shadow: inset 3px 0 0 var(--forest);
}

.app-sidebar nav a svg {
  width: 16px;
  height: 16px;
}

.app-sidebar nav a > span {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border-radius: 5px;
  color: var(--forest);
  background: var(--paper);
  font-size: 11px;
}

.app-sidebar-bottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.app-sidebar-bottom a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  color: var(--ink-4);
  font-size: 12px;
}

.app-sidebar-bottom a:hover {
  color: var(--forest);
}

.app-sidebar-bottom svg {
  width: 14px;
}

.app-content {
  min-width: 0;
}

.app-topbar {
  min-height: 68px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 23px;
}

.app-topbar > div:first-child > span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-4);
  font-size: 12px;
  letter-spacing: .03em;
}

.app-topbar h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 37px;
  letter-spacing: -.03em;
}

.app-topbar > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-topbar .icon-button {
  position: relative;
  background: var(--paper);
}

.app-topbar .icon-button > i {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid var(--paper-muted);
  border-radius: 50%;
  color: #fff;
  background: var(--clay);
  font-size: 11px;
  font-style: normal;
}

.app-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.app-stat-grid article {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.stat-icon {
  width: 43px;
  height: 43px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--forest);
  background: var(--forest-pale);
}

.stat-icon svg {
  width: 18px;
}

.app-stat-grid small,
.app-stat-grid strong,
.app-stat-grid em {
  display: block;
}

.app-stat-grid small {
  color: var(--ink-4);
  font-size: 11px;
}

.app-stat-grid strong {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
}

.app-stat-grid em {
  color: var(--ink-3);
  font-size: 11px;
  font-style: normal;
}

.app-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.app-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}

.app-card-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -.025em;
}

.app-card-head p {
  margin: 3px 0 0;
  color: var(--ink-4);
  font-size: 12px;
}

.app-label {
  display: block;
  margin-bottom: 7px;
  color: var(--clay);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.active-case {
  margin-bottom: 18px;
  border-left: 4px solid var(--clay);
}

.active-case .app-card-head h2 {
  font-size: 25px;
}

.case-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 21px 0;
}

.case-progress > div {
  position: relative;
  text-align: center;
}

.case-progress > div:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--border);
  content: "";
}

.case-progress > div > span {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0 auto 7px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-4);
  background: var(--paper);
  font-size: 11px;
}

.case-progress > div.is-done > span {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-pale);
}

.case-progress > div.is-current > span {
  border-color: var(--clay);
  color: #fff;
  background: var(--clay);
}

.case-progress svg {
  width: 13px;
}

.case-progress small {
  color: var(--ink-4);
  font-size: 11px;
}

.case-progress .is-current small {
  color: var(--ink);
  font-weight: 700;
}

.case-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}

.case-summary-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 17px;
  color: var(--ink-4);
  font-size: 11px;
}

.case-summary-row .button {
  min-height: 42px;
  font-size: 12px;
}

.app-columns {
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  align-items: start;
  gap: 18px;
}

.activity-list > div {
  display: grid;
  grid-template-columns: 11px 1fr;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.activity-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--border-dark);
}

.activity-dot.is-new {
  background: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-pale);
}

.activity-list strong,
.activity-list p,
.activity-list small {
  display: block;
}

.activity-list strong {
  font-size: 12px;
}

.activity-list p {
  margin: 2px 0;
  color: var(--ink-3);
  font-size: 11px;
}

.activity-list small {
  color: var(--ink-4);
  font-size: 11px;
}

.help-card .help-icon {
  margin-bottom: 16px;
}

.help-card h2 {
  margin-bottom: 7px;
  font-family: var(--serif);
  font-size: 22px;
}

.help-card p {
  color: var(--ink-3);
  font-size: 12px;
}

.help-card .button {
  min-height: 42px;
  font-size: 12px;
}

/* Request detail and offers */

.app-backline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  color: var(--ink-4);
  font-size: 12px;
}

.app-backline a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--forest-2);
  font-weight: 700;
}

.app-backline a svg {
  width: 13px;
  transform: rotate(180deg);
}

.request-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 22px;
}

.request-detail-head h1 {
  max-width: 810px;
  margin: 10px 0;
  font-size: clamp(34px, 4vw, 49px);
  line-height: 1.04;
}

.request-detail-head > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 17px;
  color: var(--ink-4);
  font-size: 11px;
}

.request-detail-head > div > div span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.request-detail-head > div > div svg {
  width: 13px;
}

.request-detail-head > .button {
  min-height: 42px;
  flex: 0 0 auto;
  font-size: 12px;
}

.detail-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}

.detail-tabs button {
  min-height: 39px;
  flex: 1;
  padding: 7px 11px;
  border: 0;
  border-radius: 7px;
  color: var(--ink-3);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.detail-tabs button.is-active {
  color: var(--forest);
  background: var(--forest-pale);
}

.detail-tabs button span {
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--paper);
  font-size: 11px;
}

.detail-panel {
  display: none;
}

.detail-panel.is-active {
  display: block;
  animation: view-in 220ms ease both;
}

.offers-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 25px 0 17px;
}

.offers-heading h2 {
  margin-bottom: 3px;
  font-family: var(--serif);
  font-size: 27px;
}

.offers-heading p {
  margin: 0;
  color: var(--ink-4);
  font-size: 12px;
}

.comparison-labels {
  display: grid;
  grid-template-columns: 1fr 1.1fr 180px;
  gap: 22px;
  padding: 0 20px 7px;
  color: var(--ink-4);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.offer-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr 180px;
  gap: 22px;
  margin-bottom: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.offer-card.is-recommended {
  border-color: #cfbfae;
}

.offer-card.is-selected {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 2px var(--forest);
}

.recommend-badge {
  position: absolute;
  top: -9px;
  left: 22px;
  padding: 4px 8px;
  border-radius: 5px;
  color: #7e4c36;
  background: #f1d7c7;
  font-size: 11px;
  font-weight: 750;
}

.offer-expert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.offer-expert .avatar {
  width: 57px;
  height: 65px;
  font-size: 16px;
}

.offer-expert .verified-line {
  margin-bottom: 5px;
  font-size: 11px;
}

.offer-expert h3 {
  margin-bottom: 1px;
  font-family: var(--serif);
  font-size: 19px;
}

.offer-expert p {
  margin-bottom: 8px;
  color: var(--ink-3);
  font-size: 11px;
}

.offer-expert > div > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-4);
  font-size: 11px;
}

.offer-expert > div > span svg {
  width: 11px;
}

.offer-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 11px;
}

.offer-terms > div span,
.offer-terms > div strong {
  display: block;
}

.offer-terms > div span {
  color: var(--ink-4);
  font-size: 11px;
}

.offer-terms > div strong {
  font-size: 12px;
}

.offer-terms > p,
.offer-terms > .offer-more {
  grid-column: 1 / -1;
}

.offer-terms > p {
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.5;
}

.offer-more {
  justify-self: start;
  font-size: 11px;
}

.offer-more svg {
  transform: rotate(90deg);
}

.offer-action {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 19px;
  border-left: 1px solid var(--border);
}

.offer-action .button {
  min-height: 40px;
  padding: 8px;
  font-size: 11px;
}

.offer-action small {
  color: var(--ink-4);
  font-size: 11px;
  text-align: center;
}

.prose-card h2,
.file-panel h2,
.empty-panel h2 {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: 27px;
}

.prose-card > p {
  max-width: 760px;
  color: var(--ink-3);
}

.prose-card dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
}

.prose-card dl > div {
  padding: 15px;
  background: var(--paper-soft);
}

.prose-card dt {
  color: var(--ink-4);
  font-size: 11px;
}

.prose-card dd {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 700;
}

.file-panel .button {
  min-height: 39px;
  font-size: 11px;
}

.file-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.file-row > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--clay);
  background: var(--clay-pale);
}

.file-row strong,
.file-row small {
  display: block;
}

.file-row strong {
  font-size: 12px;
}

.file-row small {
  color: var(--ink-4);
  font-size: 11px;
}

.file-row button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-3);
  background: transparent;
}

.file-row svg {
  width: 16px;
}

.empty-panel {
  min-height: 340px;
  display: grid;
  place-content: center;
  text-align: center;
}

.empty-panel > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: var(--forest);
  background: var(--forest-pale);
}

.empty-panel p {
  color: var(--ink-4);
  font-size: 12px;
}

/* Expert dashboard */

.profile-completeness {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 17px;
  padding: 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--clay);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.completeness-ring {
  --fill: calc(var(--value) * 1%);
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--forest) var(--fill), var(--paper-deep) 0);
}

.completeness-ring::before {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  content: "";
}

.completeness-ring strong {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: 13px;
}

.profile-completeness h2 {
  margin: 2px 0;
  font-family: var(--serif);
  font-size: 21px;
}

.profile-completeness p {
  margin: 0;
  color: var(--ink-4);
  font-size: 11px;
}

.profile-completeness .button {
  min-height: 40px;
  font-size: 11px;
}

.expert-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  align-items: start;
  gap: 18px;
}

.app-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.app-section-head h2 {
  margin-bottom: 2px;
  font-family: var(--serif);
  font-size: 27px;
}

.app-section-head p {
  margin: 0;
  color: var(--ink-4);
  font-size: 11px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-3);
  background: var(--paper);
  font-size: 11px;
  font-weight: 700;
}

.filter-chip svg {
  width: 14px;
}

.expert-task-list article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 126px;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.task-match {
  text-align: center;
}

.task-match strong,
.task-match span {
  display: block;
}

.task-match strong {
  color: var(--forest);
  font-family: var(--serif);
  font-size: 20px;
}

.task-match span {
  color: var(--ink-4);
  font-size: 10px;
}

.task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  color: var(--forest-2);
  font-size: 11px;
  font-weight: 700;
}

.task-meta small {
  color: var(--ink-4);
  font-weight: 500;
}

.task-main h3 {
  margin-bottom: 3px;
  font-family: var(--serif);
  font-size: 18px;
}

.task-main > p {
  margin-bottom: 9px;
  color: var(--ink-3);
  font-size: 11px;
}

.task-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 13px;
  color: var(--ink-4);
  font-size: 11px;
}

.task-facts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.task-facts svg {
  width: 11px;
}

.task-action {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.task-action .status {
  justify-content: center;
  font-size: 11px;
}

.task-action .button {
  min-height: 38px;
  padding: 7px;
  font-size: 11px;
}

.expert-work-grid > aside {
  display: grid;
  gap: 13px;
}

.schedule-card .availability-state {
  margin-bottom: 15px;
}

.availability-state {
  display: flex;
  align-items: center;
  gap: 9px;
}

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

.availability-state strong {
  font-size: 12px;
}

.availability-state small {
  color: var(--ink-4);
  font-size: 11px;
}

.mini-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 15px;
}

.mini-calendar span {
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-4);
  font-size: 11px;
}

.mini-calendar span.busy {
  color: #8a4e3d;
  background: var(--clay-pale);
}

.mini-calendar span.open {
  color: var(--success);
  background: var(--success-pale);
}

.calendar-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  color: var(--ink-4);
  font-size: 11px;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.calendar-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.calendar-legend i.busy {
  background: var(--clay-pale);
}

.calendar-legend i.open {
  background: var(--success-pale);
}

.response-card {
  text-align: center;
}

.response-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 50%;
  color: var(--forest);
  background: var(--forest-pale);
}

.response-card > span svg {
  width: 18px;
}

.response-card strong,
.response-card em {
  display: block;
}

.response-card strong {
  font-size: 12px;
}

.response-card em {
  color: var(--forest);
  font-family: var(--serif);
  font-size: 20px;
  font-style: normal;
}

.response-card p {
  margin: 6px 0 0;
  color: var(--ink-4);
  font-size: 11px;
}

/* Editorial article */

.editorial-page {
  background: var(--paper-soft);
}

.editorial-hero {
  padding: 40px 0 65px;
  color: #fff;
  background: var(--forest-3);
}

.editorial-hero-inner {
  max-width: 980px;
}

.editorial-type {
  display: block;
  margin-bottom: 15px;
  color: #e8b997;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.editorial-hero h1 {
  max-width: 960px;
  margin-bottom: 22px;
  font-size: clamp(48px, 6vw, 77px);
  line-height: .99;
}

.editorial-hero-inner > p {
  max-width: 790px;
  color: rgba(255, 255, 255, .64);
  font-family: var(--serif);
  font-size: 19px;
}

.editorial-author {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  margin-top: 29px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.editorial-author strong,
.editorial-author span {
  display: block;
}

.editorial-author strong {
  font-size: 12px;
}

.editorial-author span,
.editorial-author small {
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
}

.editorial-layout {
  display: grid;
  grid-template-columns: 175px minmax(0, 720px) 235px;
  align-items: start;
  justify-content: center;
  gap: 38px;
  padding-top: 60px;
  padding-bottom: 100px;
}

.article-toc,
.article-side {
  position: sticky;
  top: calc(var(--header-h) + 25px);
}

.article-toc > span {
  display: block;
  margin-bottom: 12px;
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.article-toc a {
  display: block;
  padding: 7px 0 7px 11px;
  border-left: 1px solid var(--border);
  color: var(--ink-4);
  font-size: 12px;
}

.article-toc a:hover,
.article-toc a.is-active {
  border-left-color: var(--clay);
  color: var(--ink);
}

.article-toc button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 0;
  border: 0;
  color: var(--forest-2);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.article-toc button svg {
  width: 13px;
}

.article-body {
  min-width: 0;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.75;
}

.article-body section + section {
  margin-top: 64px;
}

.article-body .article-lead {
  font-size: 22px;
  line-height: 1.55;
}

.article-callout {
  margin: 34px 0;
  padding: 23px;
  border-left: 3px solid var(--clay);
  background: var(--paper-muted);
}

.article-callout span {
  display: block;
  margin-bottom: 5px;
  color: var(--clay);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-callout p {
  margin: 0;
  font-size: 18px;
}

.section-number {
  display: block;
  margin-bottom: 7px;
  color: var(--clay);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
}

.article-body h2 {
  margin-bottom: 22px;
  font-size: 36px;
  line-height: 1.08;
}

.editorial-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorial-list li {
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 22px;
  padding: 19px 0;
  border-top: 1px solid var(--border);
}

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

.editorial-list strong {
  color: var(--forest);
  font-size: 15px;
}

.question-example {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--sans);
}

.question-example > span {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.question-example p {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 18px;
}

.question-example small {
  font-size: 12px;
}

.question-example.bad {
  color: #7c4436;
  background: var(--clay-pale);
}

.question-example.good {
  color: var(--success);
  background: var(--success-pale);
}

.question-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 8px auto;
  border-radius: 50%;
  color: var(--clay);
  background: var(--paper-muted);
  transform: rotate(90deg);
}

.article-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

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

.article-checklist svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 5px;
  color: var(--success);
}

.article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 43px;
  padding: 24px;
  border-radius: var(--radius-lg);
  color: #fff;
  background: var(--forest);
  font-family: var(--sans);
}

.article-cta h3 {
  margin-bottom: 3px;
  font-family: var(--serif);
  font-size: 20px;
}

.article-cta p {
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.article-cta .button {
  flex: 0 0 auto;
}

.author-card,
.article-disclaimer {
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-align: center;
}

.author-card .avatar {
  width: 62px;
  height: 70px;
  margin: 0 auto 12px;
}

.author-card .status {
  margin-bottom: 10px;
  font-size: 11px;
}

.author-card h3 {
  margin-bottom: 3px;
  font-family: var(--serif);
  font-size: 19px;
}

.author-card p {
  color: var(--ink-4);
  font-size: 11px;
}

.author-card .button {
  min-height: 39px;
  font-size: 11px;
}

.article-disclaimer svg {
  width: 19px;
  margin: 0 auto 9px;
  color: var(--clay);
}

.article-disclaimer p {
  margin: 0;
  color: var(--ink-4);
  font-size: 11px;
}

/* Discussion thread */

.thread-page {
  padding: 38px 0 100px;
  background: var(--paper-soft);
}

.thread-layout {
  display: grid;
  grid-template-columns: minmax(0, 850px) 295px;
  align-items: start;
  justify-content: center;
  gap: 30px;
}

.thread-layout > main {
  min-width: 0;
}

.thread-head {
  margin-bottom: 19px;
  padding: 29px;
  border-radius: var(--radius-xl);
  color: #fff;
  background: var(--forest-3);
}

.thread-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
  color: #e8b997;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.thread-category small {
  color: rgba(255, 255, 255, .4);
  font-weight: 500;
}

.thread-head h1 {
  margin-bottom: 15px;
  font-size: clamp(37px, 4vw, 50px);
  line-height: 1.04;
}

.thread-head > p {
  max-width: 730px;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
}

.thread-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .45);
  font-size: 11px;
}

.thread-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.thread-stats svg {
  width: 12px;
}

.thread-post {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  margin-bottom: 11px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.thread-original {
  border-left: 3px solid var(--clay);
}

.post-author {
  padding: 20px;
  border-right: 1px solid var(--border);
  background: var(--paper-muted);
  text-align: center;
}

.post-author .avatar {
  width: 54px;
  height: 62px;
  margin: 0 auto 11px;
  font-size: 16px;
}

.post-author strong,
.post-author span,
.post-author em {
  display: block;
}

.post-author strong {
  font-size: 12px;
}

.post-author span {
  margin: 3px 0 8px;
  color: var(--ink-4);
  font-size: 11px;
  line-height: 1.4;
}

.post-author em {
  color: var(--success);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.post-author em svg {
  display: inline;
  width: 11px;
  height: 11px;
  vertical-align: -2px;
}

.post-content {
  min-width: 0;
  padding: 20px 23px;
}

.post-time {
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  color: var(--ink-4);
  font-size: 11px;
}

.post-content > p {
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
}

.post-content blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--clay);
  color: var(--ink-3);
  background: var(--paper-muted);
  font-family: var(--serif);
  font-size: 13px;
}

.post-attachment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper-soft);
}

.post-attachment > svg {
  width: 20px;
  color: var(--clay);
}

.post-attachment strong,
.post-attachment small {
  display: block;
}

.post-attachment strong {
  font-size: 12px;
}

.post-attachment small {
  color: var(--ink-4);
  font-size: 11px;
}

.post-attachment button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-3);
  background: transparent;
}

.post-attachment button svg {
  width: 15px;
}

.post-actions {
  display: flex;
  gap: 7px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.post-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--ink-3);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.post-actions button:hover {
  border-color: var(--forest);
  color: var(--forest);
}

.post-actions svg {
  width: 12px;
  height: 12px;
}

.reply-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

.reply-box .avatar {
  width: 42px;
  height: 47px;
  font-size: 12px;
}

.reply-box label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
}

.reply-box textarea {
  width: 100%;
  min-height: 125px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: 0;
  resize: vertical;
  background: var(--paper-soft);
}

.reply-box textarea:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 3px var(--focus);
}

.reply-box > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
}

.reply-box > div > div > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-4);
  font-size: 11px;
}

.reply-box > div > div > span svg {
  width: 12px;
}

.reply-box .button {
  min-height: 40px;
  font-size: 11px;
}

.thread-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.thread-info {
  margin: 0 0 17px;
  padding: 0;
  list-style: none;
}

.thread-info li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
}

.thread-info span {
  color: var(--ink-4);
}

.thread-sidebar .button {
  min-height: 40px;
  font-size: 11px;
}

.rules-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 10px;
  color: var(--forest);
  background: var(--forest-pale);
}

.rules-card p {
  color: var(--ink-3);
  font-size: 11px;
}

.rules-card a {
  color: var(--forest-2);
  font-size: 11px;
  font-weight: 700;
}

.related-threads a {
  display: block;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.35;
}

.related-threads a:hover {
  color: var(--forest-2);
}

.related-threads a span {
  display: block;
  margin-top: 4px;
  color: var(--ink-4);
  font-family: var(--sans);
  font-size: 11px;
}

/* Responsive additional screens */

@media (max-width: 1100px) {
  .how-hero-grid { gap: 45px; }
  .verification-grid,
  .faq-grid { gap: 55px; }
  .auth-layout { grid-template-columns: 1fr 430px; gap: 40px; }
  .app-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 17px; }
  .comparison-labels,
  .offer-card { grid-template-columns: .9fr 1.1fr 150px; gap: 15px; }
  .offer-card { padding: 18px; }
  .expert-work-grid { grid-template-columns: 1fr; }
  .expert-work-grid > aside { grid-template-columns: repeat(2, 1fr); }
  .editorial-layout { grid-template-columns: 155px minmax(0, 720px); }
  .article-side { display: none; }
  .thread-layout { grid-template-columns: minmax(0, 1fr) 270px; }
  .expert-task-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 920px) {
  .mvp-section { padding: 74px 0; }
  .how-hero-grid { grid-template-columns: 1fr; }
  .route-document { width: min(520px, 100%); }
  .verification-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .auth-layout { width: min(calc(100% - 36px), 620px); grid-template-columns: 1fr; }
  .auth-story { min-height: auto; padding-bottom: 0; }
  .auth-story > div,
  .auth-story ul { display: none; }
  .auth-card-wrap { min-height: calc(100vh - 100px); }
  .join-layout { grid-template-columns: 1fr; }
  .join-aside { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .org-team-grid { grid-template-columns: 1fr; }
  .app-layout { display: block; }
  .app-sidebar { position: static; min-height: auto; display: block; margin-bottom: 18px; }
  .app-sidebar nav { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .app-sidebar nav a { min-width: max-content; }
  .app-sidebar-bottom { display: none; }
  .app-user { border-bottom: 0; }
  .app-columns { grid-template-columns: 1fr; }
  .comparison-labels { display: none; }
  .offer-card { grid-template-columns: 1fr 1fr; }
  .offer-action { grid-column: 1 / -1; flex-direction: row; padding: 14px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .offer-action { flex-wrap: wrap; }
  .offer-action .button { flex: 1; }
  .offer-action small { display: none; }
  .offer-confirm { flex: 0 0 100%; }
  .expert-task-grid { grid-template-columns: 1fr; }
  .expert-offer-card { position: static; }
  .editorial-layout { grid-template-columns: minmax(0, 720px); }
  .article-toc { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; }
  .article-toc > span,
  .article-toc button { display: none; }
  .article-toc a { min-width: max-content; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--paper); }
  .thread-layout { grid-template-columns: 1fr; }
  .thread-sidebar { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .thread-sidebar .community-side-card { margin: 0; }
}

@media (max-width: 680px) {
  .mvp-section { padding: 58px 0; }
  .how-hero { padding-bottom: 54px; }
  .how-hero-grid h1 { font-size: 46px; }
  .hero-action-row { flex-direction: column; }
  .hero-action-row .button { width: 100%; }
  .route-document { padding: 18px; }
  .path-switch-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .role-path-grid { grid-template-columns: 1fr; }
  .role-path-card { padding: 26px 20px; }
  .role-path-card > h3 { font-size: 27px; }
  .verification-matrix > div { grid-template-columns: auto 1fr; }
  .matrix-state { grid-column: 2; }
  .faq-list summary { font-size: 17px; }
  .auth-layout { width: min(calc(100% - 28px), 620px); gap: 0; }
  .auth-story { min-height: 80px; padding: 22px 0; }
  .auth-card-wrap { min-height: auto; padding: 10px 0 30px; }
  .auth-card { padding: 25px 18px; }
  .auth-role-toggle { grid-template-columns: 1fr; }
  .join-page { padding-top: 25px; }
  .join-heading { align-items: flex-start; flex-direction: column; }
  .join-heading h1 { font-size: 43px; }
  .join-stepper { padding: 0 15px; }
  .join-stepper li { justify-content: center; }
  .join-stepper li strong { display: none; }
  .join-stepper li::after { right: 0; left: 50%; }
  .join-panel { padding: 25px 18px; }
  .speciality-select-grid { grid-template-columns: 1fr; }
  .join-preview { align-items: flex-start; }
  .join-preview .avatar { width: 62px; height: 72px; }
  .join-aside { grid-template-columns: 1fr; }
  .org-head { grid-template-columns: auto 1fr; align-items: start; }
  .org-logo { width: 76px; height: 76px; border-radius: 12px; font-size: 23px; }
  .org-head h1 { font-size: 37px; }
  .org-head .profile-favorite { display: none; }
  .app-page { padding-top: 14px; }
  .app-sidebar { padding: 12px; }
  .app-user { padding-bottom: 8px; }
  .app-sidebar nav a { min-height: 37px; padding: 7px 9px; font-size: 12px; }
  .app-topbar { align-items: flex-start; flex-direction: column; }
  .app-topbar h1 { font-size: 32px; }
  .app-topbar > div:last-child { width: 100%; }
  .app-topbar > div:last-child .button { flex: 1; }
  .app-stat-grid { grid-template-columns: 1fr; }
  .app-stat-grid article { padding: 14px; }
  .active-case { padding: 18px 15px; }
  .active-case .app-card-head { align-items: flex-start; flex-direction: column; }
  .case-progress { grid-template-columns: repeat(4, minmax(80px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .case-summary-row { align-items: stretch; flex-direction: column; }
  .case-summary-row .button { width: 100%; }
  .request-detail-head { align-items: flex-start; flex-direction: column; }
  .request-detail-head > .button { width: 100%; }
  .detail-tabs { overflow-x: auto; }
  .detail-tabs button { min-width: max-content; }
  .offers-heading { align-items: flex-start; flex-direction: column; }
  .offer-card { grid-template-columns: 1fr; padding: 20px 17px; }
  .offer-terms { grid-template-columns: repeat(2, 1fr); }
  .offer-action { grid-column: auto; flex-direction: column; flex-wrap: nowrap; }
  .offer-action .button { flex: 0 0 auto; }
  .offer-confirm { width: 100%; flex: 0 0 auto; }
  .prose-card dl { grid-template-columns: 1fr; }
  .profile-completeness { grid-template-columns: auto 1fr; }
  .profile-completeness .button { grid-column: 1 / -1; }
  .expert-work-grid > aside { grid-template-columns: 1fr; }
  .expert-task-list article { grid-template-columns: 47px minmax(0, 1fr); align-items: start; }
  .task-action { grid-column: 1 / -1; flex-direction: row; }
  .task-action > * { flex: 1; }
  .expert-task-head { align-items: flex-start; flex-direction: column; }
  .match-score { min-width: 0; grid-template-columns: auto 1fr; align-items: center; text-align: left; }
  .expert-task-grid { gap: 14px; }
  .task-brief-card,
  .expert-files-card,
  .conflict-card,
  .expert-offer-card { padding: 18px 16px; }
  .task-brief-card dl { grid-template-columns: 1fr; }
  .task-brief-card dl > div:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--border); }
  .task-brief-card dl > div:last-child { border-bottom: 0; }
  .conflict-card { align-items: stretch; flex-direction: column; }
  .conflict-card .button { width: 100%; }
  .offer-field-row { grid-template-columns: 1fr; }
  .editorial-hero { padding-bottom: 45px; }
  .editorial-hero h1 { font-size: 45px; }
  .editorial-author { grid-template-columns: auto 1fr; }
  .editorial-author > small { grid-column: 2; }
  .editorial-layout { padding-top: 35px; gap: 28px; }
  .article-body { font-size: 16px; }
  .article-body .article-lead { font-size: 20px; }
  .editorial-list li { grid-template-columns: 1fr; gap: 4px; }
  .article-cta { align-items: flex-start; flex-direction: column; }
  .article-cta .button { width: 100%; }
  .thread-head { padding: 23px 18px; }
  .thread-head h1 { font-size: 36px; }
  .thread-post { grid-template-columns: 1fr; }
  .post-author { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; border-right: 0; border-bottom: 1px solid var(--border); text-align: left; }
  .post-author .avatar { grid-row: span 3; width: 43px; height: 49px; margin: 0; }
  .post-author span { margin: 0; }
  .post-content { padding: 18px; }
  .reply-box { grid-template-columns: 1fr; padding: 18px; }
  .reply-box > .avatar { display: none; }
  .reply-box > div > div { align-items: flex-start; flex-direction: column; }
  .reply-box .button { width: 100%; }
  .thread-sidebar { grid-template-columns: 1fr; }
}